uniAppXCX/pages/user/user.vue

<template>
  <view class="container">
    <view class="uesrInfo">
      <view class="userPhoto">
        <image class="img" :src="userInfo.avatar"></image>
        <uni-file-picker
          ref="picker"
          class="picker"
          limit="1"
          mode="list"
          file-mediatype="image"
          @select="select"
          @progress="progress"
          @success="success"
          @fail="fail"
        >
          <image
            class="icon"
            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/icon1.png'"
            mode="widthFix"
          ></image>
        </uni-file-picker>
      </view>
      <uni-list class="list">
        <uni-list-item
          class="listItem"
          title="用户昵称"
          :rightText="userInfo.nickname"
          showArrow
          clickable
          @click="editName"
        />
        <uni-list-item class="listItem" title="手机号" :rightText="userInfo.mobile">
          <template v-slot:footer>
            <view class="right">
              <button class="m_button button" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
                <!-- <span v-if="userInfo.mobile">更换</span> -->
                <span>绑定</span>
              </button>
              <span>{{ userInfo.mobile }}</span>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    <view class="bottom">
      <view class="textButton textColor5" @click="logOff">注销账号</view>
      <view class="line"></view>
      <view class="textButton" @click="loginOut">退出登录</view>
    </view>
  </view>
</template>

<script>
import { logOffApi, bindPhoneApi, userInfoApi, profileApi, logout } from '@/api/user.js'
import { uploadApi } from '@/api/common.js'
import { down } from '@/api/monitor'
export default {
  data() {
    return {
      userInfo: {},
    }
  },
  onShow() {
    this.getUserInfo()
  },
  methods: {
    // 获取上传状态
    select(e) {
      let _this = this
      console.log('选择文件：', e)
      // let file = e.tempFiles[0]
      wx.uploadFile({
        url: 'https://mall.rongtongh.cn/wx/storage/upload',
        filePath: e.tempFilePaths[0],
        name: 'file',
        success: function (res) {
          let data = JSON.parse(res.data)
          console.log(data, 'data')
          _this.save(data.data.url, '')
          _this.$refs.picker.clearFiles()
        },
      })
    },
    // 获取上传进度
    progress(e) {
      console.log('上传进度：', e)
    },
    // 上传成功
    success(e) {
      console.log(e, '上传成功')
    },
    // 上传失败
    fail(e) {
      console.log('上传失败：', e)
    },
    editName() {
      // 修改用户名称
      wx.navigateTo({
        url: '/pages/user/editUser/editUser',
      })
    },
    save(url) {
      let _this = this
      let params = {
        avatarUrl: url,
      }
      profileApi(params).then(res => {
        console.log(res, 'res')
        wx.showToast({
          title: '修改成功',
        })
        this.getUserInfo()
      })
    },
    getUserInfo() {
      userInfoApi().then(res => {
        this.userInfo = res.data
        console.log(this.userInfo, '用户信息')
      })
    },
    decryptPhoneNumber(e) {
      let _this = this
      console.log(e, 'eeee')
      let params = {
        iv: e.detail.iv,
        encryptedData: e.detail.encryptedData,
      }
      bindPhoneApi(params).then(res => {
        console.log(res, 'rrr')
        _this.getUserInfo()
      })
    },
    loginOut() {
      down()
      logout()
      wx.removeStorageSync('userInfo')
      wx.removeStorageSync('userId')
      wx.removeStorageSync('token')
      getApp().globalData.hasLogin = false
      wx.switchTab({
        url: '/pages/mine/mine',
      })
    },
    logOff() {
      wx.showModal({
        title: '确认注销账号？',
        content: '注销账号后xxxxx',
        success: res => {
          if (res.confirm) {
            console.log('用户点击确定')
            down()
            logOffApi().then(res => {
              wx.removeStorageSync('userInfo')
              wx.removeStorageSync('userId')
              wx.removeStorageSync('token')
              getApp().globalData.hasLogin = false
              wx.switchTab({
                url: '/pages/mine/mine',
              })
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        },
      })
    },
  },
}
</script>

<style scoped lang="scss">
.uesrInfo {
  background: #fff;
  overflow: hidden;
  padding: 0 30rpx;
}
.userPhoto {
  width: 148rpx;
  height: 148rpx;
  position: relative;
  margin: 60rpx auto 60rpx auto;
  position: relative;

  .img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #dedede;
  }
  .icon {
    height: 40rpx;
    width: 40rpx;
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
.list {
  // margin: 0 20rpx;
}
.right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.button {
  display: inline-block;
  font-size: 22rpx;
  font-weight: 500;
  // width: 68rpx;
  height: 44rpx;
  border-radius: 22rpx;
  line-height: 44rpx;
  padding: 0 20rpx;
  margin-right: 10rpx;
}
.bottom {
  position: absolute;
  width: 100%;
  height: 36rpx;
  display: flex;
  justify-content: center;
  bottom: 0;
  margin-bottom: 60rpx;

  .line {
    width: 2rpx;
    height: 100%;
    background: #000;
    // margin: 0 60rpx;
  }
  .textButton {
    font-size: 26rpx;
    text-decoration: underline;
    width: 50%;
    text-align: center;
  }
}
</style>
<style scoped>
.listItem >>> .uni-list-item__extra-text {
  color: #000;
  font-size: 28rpx;
  font-weight: 600;
}
.userPhoto >>> .uni-file-picker__lists {
  display: none !important;
}
</style>