sulibao-mini/minePages/set.vue

<template>
  <view class="template-set">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
      </view>
	  <view slot="default">
			<view>
				<text :style="{fontSize:(wxFontSize)+'px'}">个人信息</text>
			</view>
			 
		  </view>
    </tn-nav-bar>

    <view class="tn-margin-top" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      
      <view style="text-align: center;">		  
		  <uni-file-picker 
		  	v-model="value" mode="list" :auto-upload="false" @select="select" @success="success">
		  	<image v-if="!userInfo.profilePhotoUrl" src="../static/me2.png" style="width: 100px;height: 100px;"></image>
		  	<image v-if="userInfo.profilePhotoUrl" :src="userInfo.profilePhotoUrl" style="width: 100px;height: 100px;border-radius: 50%;"></image>
			<view><text class="tn-color-grey" :style="{fontSize:(wxFontSize-4)+'px'}">点击修改</text></view>
		  </uni-file-picker>
		 
	  </view>
      
	  
	  <view class="" style="padding: 16px;
    margin-top: 16px;">
	  		<uni-forms :modelValue="formData" label-width="100px">
	  			<uni-forms-item label="用户昵称" name="name" :labelFontSize="wxFontSize-2">
	  				<uni-easyinput type="text" :clearable="false" v-model="userInfo.contactNickName" :inputSize="wxFontSize-3" :placeholder-style="styleString" placeholder="请输入昵称" />
	  			</uni-forms-item>
	  			<uni-forms-item label="真实姓名" name="realName" :labelFontSize="wxFontSize-2">
	  				 <uni-easyinput type="text" :clearable="false" v-model="userInfo.userRealName" :inputSize="wxFontSize-3" :placeholder-style="styleString" placeholder="请输入姓名" />
	  			</uni-forms-item>
				<uni-forms-item label="联系方式" name="contactMethod" :labelFontSize="wxFontSize-2">
					 <uni-easyinput type="text" v-model="userInfo.contactMethod" :clearable="false" :inputSize="wxFontSize-3" :placeholder-style="styleString" placeholder="请输入手机号码/邮箱/微信" />
				</uni-forms-item>
				<uni-forms-item label="手机号" name="phone" :labelFontSize="wxFontSize-2">
					 <uni-easyinput type="text" disabled  v-model="userInfo.userName" :inputSize="wxFontSize-3" :placeholder-style="styleString" placeholder=" " />
				</uni-forms-item>
	  			 
	  		</uni-forms>
	  		<button shape="round" style="background-color: #1d60b1;border-radius: 30px;" type="primary" @click="saveForm">保存修改</button>
	  	</view>
       
      
      
      
      
    </view>
    
    
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import request from '../utils/request';
  export default {
    name: 'TemplateSet',
    mixins: [template_page_mixin],
    data(){
      return {
		wxFontSize: 17,
        show1: false,
        show2: false,
        show3: false,
        index: 0,
        array: ['女', '男', '保密'],
        date: '2000-01-29',
        index1: 1,
        array1: ['计算机/电子', '广告/媒体', '会计/金融', '政府/非盈利组织/其他'],
		userInfo:{
			profilePhotoUrl:uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).profilePhotoUrl:'',
			contactNickName:uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).contactNickName:'',
			contactMethod:uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).contactMethod:'',
			userName:uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).userName:''
		},
		styleString:'font-size:'+14+'px'
      }
    },
    computed: {
        startDate() {
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        }
    },
	onLoad(){
		const appBaseInfo = wx.getAppBaseInfo();
		this.wxFontSize = uni.getStorageSync('fontSize')||appBaseInfo.fontSizeSetting||17;
		this.styleString='font-size:'+(this.wxFontSize-3)+'px';
		this.getInfo();
	},
    methods: {
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
      
      // 弹出模态框
      showModal1(event) {
        this.openModal1()
      },
      // 打开模态框
      openModal1() {
        this.show1 = true
      },
      
      // 弹出模态框
      showModal2(event) {
        this.openModal2()
      },
      // 打开模态框
      openModal2() {
        this.show2 = true
      },
      
      // 弹出模态框
      showModal3(event) {
        this.openModal3()
      },
      // 打开模态框
      openModal3() {
        this.show3 = true
      },
      
      bindPickerChange: function(e) {
        this.index = e.detail.value
      },
      
      bindPickerChange1: function(e) {
        this.index1 = e.detail.value
      },
      
      bindDateChange: function(e) {
          this.date = e.detail.value
      },
      
      getDate(type) {
          const date = new Date();
          let year = date.getFullYear();
          let month = date.getMonth() + 1;
          let day = date.getDate();
      
          if (type === 'start') {
              year = year - 60;
          } else if (type === 'end') {
              year = year + 2;
          }
          month = month > 9 ? month : '0' + month;
          day = day > 9 ? day : '0' + day;
          return `${year}-${month}-${day}`;
      },
	  getInfo(){
		request.post('/slbWxma/getPersonlInfo',{}).then(res=>{
			if(res&&res.success){
				this.userInfo = res.resultMap.userInfo||{}
			}
		})  
	  },
	  saveForm(){
		  const that = this;
		  let params= this.userInfo;
		  request.post('/slbWxma/changePersonlInfo',{userInfo:JSON.stringify(params)},{
			  headers: {
			  	'Content-Type': 'application/json', // 默认值
			  },
		  }).then(res=>{
			  if(res.success){
				  uni.showToast({
				  	title:'修改成功'
				  })
				  uni.navigateBack();
			  }
		  })
	  },
	  // 获取上传状态
	  select(e) {
	  	console.log('选择文件：', e)
	  	let tempFiles = e.tempFiles;
	  	for (let i in tempFiles) {
	  		this.upfile(tempFiles[i])
	  	}
	  },
	  upfile(file) {
	  	let that = this;
	  	console.warn(file);
	  	uni.uploadFile({
	  		url: 'https://slb-m.lx-device.com/oss/upload/userFeedback', //仅为示例，非真实的接口地址
	  		filePath: file.url,
	  		name: 'file',
	  		success: (uploadFileRes) => {
	  			console.warn(JSON.parse(uploadFileRes.data));
	  			let resultMap = JSON.parse(uploadFileRes.data).resultMap;
				that.userInfo.profilePhotoUrl= resultMap.uploadUrl;
				 
				 
	  			
	  		}
	  	});
	  },
	  // 上传成功
	  success(e) {
	  	console.log('上传成功')
	  },
        
    }
  }
</script>

<style lang="scss" scoped>
    /* 胶囊*/
    .tn-custom-nav-bar__back {
      width: 60%;
      height: 100%;
      position: relative;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      box-sizing: border-box;
      // background-color: rgba(0, 0, 0, 0.15);
      border-radius: 1000rpx;
      border: 1rpx solid rgba(255, 255, 255, 0.5);
      // color: #FFFFFF;
      font-size: 18px;
      
      .icon {
        display: block;
        flex: 1;
        margin: auto;
        text-align: center;
      }
      
    }


    /* 间隔线 start*/
    .tn-strip-bottom-min {
      width: 100%;
      border-bottom: 1rpx solid #F8F9FB;
    }
    
    .tn-strip-bottom {
     width: 100%;
     border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
    }
     /* 间隔线 end*/


  /* 用户头像 start */
  .logo-image {
    width: 80rpx;
    height: 80rpx;
    position: relative;
  }

  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border: 2rpx solid rgba(255,255,255,0.05);
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    overflow: hidden;
    // background-color: #FFFFFF;
  }


  /* 底部悬浮按钮 start*/
  .tn-tabbar-height {
  	min-height: 100rpx;
  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
  }
  .tn-footerfixed {
    position: fixed;
    width: 100%;
    bottom: calc(30rpx + env(safe-area-inset-bottom));
    z-index: 1024;
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
    
  }
  /deep/ .uni-file-picker__container {
	  justify-content: center;
  }
  /deep/ .file-picker__box-content {
    border: none !important;
  }
  /deep/ .uni-file-picker__lists{
	display: none;
  }
  /deep/ .uni-forms-item__label {
  	font-size: 16px;
  }
  /* 底部悬浮按钮 end*/
  
</style>