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>
    </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">点击修改</text></view>
		  </uni-file-picker>
		 
	  </view>
      <!-- <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @click="tn('/minePages/avatar')">
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text-lg">
            用户头像
          </view>
          <view class="tn-color-gray tn-padding-top-xs">
            有趣的头像，百里挑一
          </view>
        </view>
        <view class="justify-content-item tn-text-lg tn-color-grey">
          <view class="logo-pic tn-shadow">
            <view class="logo-image">
              <view class="tn-shadow-blur" style="background-image:url('https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1664005699053-assets/web-upload/8645ea3a-e0a9-4422-8364-cc5ede305c9f.jpeg');width: 80rpx;height: 80rpx;background-size: cover;">
              </view>
            </view>
          </view>
        </view>
      </view> -->
	  
	  <view class="" style="padding: 16px;
    margin-top: 16px;">
	  		<uni-forms :modelValue="formData" label-width="100px">
	  			<uni-forms-item label="用户昵称" name="name">
	  				<uni-easyinput type="text" :clearable="false" v-model="userInfo.contactNickName" placeholder="请输入昵称" />
	  			</uni-forms-item>
	  			<uni-forms-item label="真实姓名" name="realName">
	  				 <uni-easyinput type="text" :clearable="false" v-model="userInfo.userRealName" placeholder="请输入姓名" />
	  			</uni-forms-item>
				<uni-forms-item label="联系方式" name="contactMethod">
					 <uni-easyinput type="text" v-model="userInfo.contactMethod" :clearable="false" placeholder="请输入手机号码/邮箱/微信" />
				</uni-forms-item>
				<uni-forms-item label="手机号" name="phone">
					 <uni-easyinput type="text" disabled  v-model="userInfo.userName" placeholder=" " />
				</uni-forms-item>
	  			 
	  		</uni-forms>
	  		<button shape="round" style="background-color: #1d60b1;border-radius: 30px;" type="primary" @click="saveForm">保存修改</button>
	  	</view>
      
      <!-- <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @click="showModal1">
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text-lg">
            用户名
          </view>
          <view class="tn-color-gray tn-padding-top-xs">
            --
          </view>
        </view>
        <view class="justify-content-item tn-text-lg tn-color-grey">
          
		  <view class="tn-icon-right tn-padding-top"></view>
        </view>
      </view>
      
      <view class="tn-flex tn-flex-row-between tn-strip-bottom tn-padding" @click="showModal2">
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text-lg">
            手机号
          </view>
          <view class="tn-color-gray tn-padding-top-xs">
            13911111193
          </view>
        </view>
        <view class="justify-content-item tn-text-lg tn-color-grey">
          <view class="tn-icon-right tn-padding-top"></view>
        </view>
      </view>
      
      <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @click="showModal3">
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text-lg">
            联系方式
          </view>
          <view class="tn-color-gray tn-padding-top-xs">
            未填写
          </view>
        </view>
        <view class="justify-content-item tn-text-lg tn-color-grey">
          <view class="tn-icon-right tn-padding-top"></view>
        </view>
      </view>
       
       
      <picker @change="bindPickerChange1" :value="index1" :range="array1">
        <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
          <view class="justify-content-item">
            <view class="tn-text-bold tn-text-lg">
              所属公司
            </view>
            <view class="tn-color-gray tn-padding-top-xs">
              {{array1[index1]}}
            </view>
          </view>
          <view class="justify-content-item tn-text-lg tn-color-grey">
            <view class="tn-icon-right tn-padding-top"></view>
          </view>
        </view>
      </picker> -->
      <tn-modal v-model="show1" :custom="true" :showCloseBtn="true">
        <view class="custom-modal-content">
          <view class="">
            <view class="tn-text-lg tn-text-bold tn-color-purplered tn-text-center tn-padding">修改昵称</view>
            <view class="tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;margin: 50rpx 0 60rpx 0;">
            	<input placeholder="==" name="input" placeholder-style="color:#AAAAAA" maxlength="20"></input>
            </view>
          </view>
          <view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
            <tn-button backgroundColor="#3668FC" padding="40rpx 0" width="60%" shadow fontBold>
              <text class="tn-color-white">保 存</text>
            </tn-button>
          </view>
        </view>
      </tn-modal>
      
      <tn-modal v-model="show2" :custom="true" :showCloseBtn="true">
        <view class="custom-modal-content">
          <view class="">
            <view class="tn-text-lg tn-text-bold tn-color-purplered tn-text-center tn-padding">变更手机号码</view>
            <view class="tn-bg-gray--light tn-color-gray" style="border-radius: 10rpx;padding: 20rpx 30rpx;margin: 50rpx 0 60rpx 0;">
              13911111193
            </view>
          </view>
          <view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
            <tn-button backgroundColor="#3668FC" padding="40rpx 0" width="60%" shadow fontBold>
              <text class="tn-color-white">获取手机号</text>
            </tn-button>
            <!-- <tn-button backgroundColor="#3668FC" padding="40rpx 0" width="60%" shadow fontBold open-type="getPhoneNumber">
              <text class="tn-color-white">获取手机号</text>
            </tn-button> -->
            <view class="tn-padding-top-sm">因为获取手机号api收费了，所以这里注释掉，需要的自行展示出来即可</view>
          </view>
        </view>
      </tn-modal>
      
      <tn-modal v-model="show3" :custom="true" :showCloseBtn="true">
        <view class="custom-modal-content">
          <view class="">
            <view class="tn-text-lg tn-text-bold tn-color-purplered tn-text-center tn-padding">请输入真实姓名</view>
            <view class="tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;margin: 50rpx 0 60rpx 0;">
              <input placeholder="请填写姓名" name="input" placeholder-style="color:#AAAAAA" maxlength="20"></input>
            </view>
          </view>
          <view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
            <tn-button backgroundColor="#3668FC" padding="40rpx 0" width="60%" shadow fontBold @click="saveForm()">
              <text class="tn-color-white">保 存</text>
            </tn-button>
          </view>
        </view>
      </tn-modal>
      
      
      
      
    </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 {
        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:''
		},
      }
    },
    computed: {
        startDate() {
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        }
    },
	onLoad(){
		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>