jje_uniapp/myPages/userInfo/index.vue

<template>
  <view class="page">
    <view class="outView">
      <form @submit="inputValue">
        <view class="flex-row justify-between bordBot">
          <view class="key flex-col justify-center ">
            <text>头像</text>
          </view>
          <button class="photoView" open-type="chooseAvatar" @chooseavatar="chooseavatar">
            <image class="photoImage" :src="userInfo.selfPhotoUrl || '/static/me/ud4.png'"></image>
          </button>
        </view>
        <view class="flex-row justify-between bordBot">
          <view class="key flex-col justify-center ">
            <text>昵称</text>
          </view>
          <view class="nikeName flex-col justify-center">
            <input type="nickname" name="nickname" v-model="userInfo.ncikName" placeholder="请输入昵称"/>
          </view>
        </view>
        <view class="flex-row justify-between bordBot">
          <view class="key flex-col justify-center ">
            <text>会员编号</text>
          </view>
          <view class="flex-row justify-end groupItemContent">
            <text>{{ userInfo.no }}</text>
          </view>
        </view>
        <view class="flex-row justify-between bordBot">
          <view class="key flex-col justify-center ">
            <text>性别</text>
          </view>
          <picker class="picker" @change="genderChange" mode='selector' range-key="gender" :value="genderIndex"
                  :range="genderList">
            <view class="flex-row justify-end groupItemContent">
              <text v-if="userInfo.sex == 0">男</text>
              <text v-else-if="userInfo.sex == 1">女</text>
              <text v-else-if="userInfo.sex == 2">未知</text>
              <text v-else>请选择性别</text>
              <u-icon name="arrow-right" color="#666" size="18"></u-icon>
            </view>
          </picker>
        </view>

        <view class="flex-row justify-between bordBot">
          <view class="key flex-col justify-center ">
            <text>生日</text>
          </view>
          <picker class="picker" :end="endDate" @change="birthdayChange" mode='date' range-key="label">
            <view class="flex-row justify-end groupItemContent">
              <text>{{ userInfo.birthday || '请选择出生日期' }}</text>
              <u-icon name="arrow-right" color="#666" size="18"></u-icon>
            </view>
          </picker>
        </view>

        <view class="flex-row justify-between bordBot">
          <view class="key flex-col justify-center ">
            <text>手机号</text>
          </view>
          <view class="flex-row justify-end groupItemContent" @click="settingTelphone">
            <text>{{ userInfo.phone ? userInfo.phone : '绑定手机号' }}</text>
            <u-icon name="arrow-right" color="#666" size="18"></u-icon>
          </view>
        </view>

        <!--			<view class="flex-row justify-between bordBot" >-->
        <!--				<view class="key flex-col justify-center ">-->
        <!--					<text>实名认证</text>-->
        <!--				</view>-->
        <!--				<view class="flex-row justify-end groupItemContent" @click="gotoRealNameAuth">-->
        <!--					<text>{{userInfo.isAttestation? '已认证' : '未实名认证，去认证' }}</text>-->
        <!--					<u-icon name="arrow-right" color="#666" size="18"></u-icon>-->
        <!--				</view>-->
        <!--			</view>-->

        <button class="updateButton" formType="submit">
          <text>保存</text>
        </button>

      </form>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      photoUrl: '',
      userInfo: {},
      genderIndex: 0,
      genderList: [{gender: '男', id: '0'},
        {gender: '女', id: '1'},
        {gender: '未知', id: '2'}],
    };
  },
  mounted() {
  },
  onLoad() {
    // 用户信息
    this.userInfo = uni.getStorageSync('userInfo')

    if (this.userInfo.selfPhoto) {
      this.getImgUrlByOssId(this.userInfo.selfPhoto)
    }
  },
  onShow() {

    this.userInfo.phone = uni.getStorageSync('userInfo').phone


  },
  computed: {
    endDate() {
      return this.getDate('end');
    }
  },
  methods: {
    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;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    settingTelphone() {
      uni.navigateTo({
        url: '/myPages/setting/setting-telphone'
      })
    },

    inputValue(e) {
      console.log('+++++++++++++inputValue+++++++++++', e)
      this.userInfo.ncikName = e.detail.value.nickname
      this.saveUserInfo()
    },

    // 选择性别
    genderChange(e) {
      console.log(e.detail.value)
      this.userInfo.sex = e.detail.value
    },

    //选择的日期
    birthdayChange(e) {
      console.log(e.detail.value)
      this.userInfo.birthday = e.detail.value
    },

    // 去实名认证
    gotoRealNameAuth() {
      uni.navigateTo({
        url: '/myPages/realNameAuth/index',
      })
    },
    // 保存用户信息
    saveUserInfo() {
      // 保存数据
      this.$api.saveUserInfo(this.userInfo).then((res) => {
        console.log(res)
        // 刷新用户信息
        this.getUserInfo();
        uni.showToast({
          title: "操作成功"
        })
        // setTimeout(res=>{
        // 	uni.switchTab({
        // 		url: '/pages/index/index',
        // 	},2000)
        // })

      }).catch(() => {
        uni.showToast({
          title: "操作失败"
        })
      });
    },

    getUserInfo() {
      this.$api.getUserInfo().then(res => {
        console.log('++++++++++++获取用户信息++++++++++++++++++', res)
        uni.setStorageSync('userInfo', res.data.data)
        this.userInfo = res.data.data
        if (this.userInfo.selfPhoto) {
          this.getImgUrlByOssId(this.userInfo.selfPhoto)
        }
      })

    },

    getImgUrlByOssId(Id) {
      this.$api.getImage(Id).then(res => {
        this.userInfo.selfPhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
        this.$set(this.userInfo)
      });
    },
    //头像上传
    chooseavatar(e) {
      let that = this
      let avatarUrl = e.detail.avatarUrl
      console.log(e.detail.avatarUrl)
      uni.uploadFile({
        url: that.$baseUrl + '/resource/oss/upload', //仅为示例，非真实的接口地址
        filePath: avatarUrl,
        name: 'file',
        header: {
          // "Content-Type": "multipart/form-data",
          // 'X-Access-Token': uni.getStorageSync('token'),
          'Authorization': 'Bearer ' + uni.getStorageSync('accessToken'),
        },
        success: (uploadFileRes) => {
          let res = JSON.parse(uploadFileRes.data)
          console.log('+++++++++++++++++chooseavatar+++++++++++++++++++++++', uploadFileRes.data)
          that.userInfo.selfPhoto = res.data.ossId
          that.userInfo.selfPhotoUrl = res.data.url.replace(/^http:/, "https:")
        }
      });

    },
  }
};
</script>

<style lang="scss">
@import '/common/css/common.css';
@import './index.rpx.css';

.logoutButton {
  width: 70%;
  margin: 0 auto;
  margin-top: 60rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #FFE05C;
  border-radius: 40rpx;
  text-align: center;
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}
</style>