MoeNovaClient/pages/my/security.vue

<template>
  <view class="page">
    <!-- 基本资料组 -->
    <view class="group">
      <view class="item" @click="goPage('/pages/my/editInfo')">
        <text class="title">基本资料</text>
        <view class="right">
          <text class="value">去完善</text>
          <image class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
        </view>
      </view>
    </view>

    <!-- 账号安全组 -->
    <view class="group">
      <view class="item" @click="goPage('/pages/my/editMobile?originalPhoneNumber='+ phoneNumber)">
        <text class="title">手机号</text>
        <view class="right">
          <text class="value">{{ formatPhoneNumber( phoneNumber )|| '未绑定' }}</text>
          <image class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
        </view>
      </view>
      <view class="item" @click="goPage('/pages/my/editPass')" v-if="false">
        <text class="title">登录密码</text>
        <view class="right">
          <text class="value">未设置</text>
          <image class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
        </view>
      </view>
    </view>

    <!-- 第三方账号组 -->
    <view class="group">
      <view class="item" @click="bindWechat">
        <text class="title">微信账号</text>
        <view class="right">
          <text class="value">{{ wechat || '未绑定' }}</text>
          <image class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
        </view>
      </view>
      <view class="item" @click="bindQQ" v-if="false">
        <text class="title">QQ账号</text>
        <view class="right">
          <text class="value">未授权</text>
          <image class="arrow" src="../../static/me/arrow_right_gray.png" mode="widthFix"></image>
        </view>
      </view>
    </view>

    <!-- 删除账号组 -->
    <view class="group">
      <view class="item"  @click="goPage('/pages/my/DelMemConfirm')" >
        <text class="title red">删除用户</text>
        <view class="right">
          <text class="value red">注销账户</text>
          <image class="arrow" style="width: 30rpx; height: 30rpx;" src="../../static/me/wd_icon_jiantou_red.png" mode="widthFix"></image>
        </view>
      </view>
    </view>
    <DialogBox ref="DialogBox"></DialogBox>

  </view>
</template>

<script>


export default {
  components: {   }, // 注册组件
  data() {
    return {
      phoneNumber: '', // 用户手机号 
      wechat: '',
    }
  },
  onLoad() {
    this.loadUserInfo()
  },
  methods: {
    loadUserInfo() {
      // 这里添加获取用户信息的逻辑
      // 获取手机号等信息
      uni.request({
        url: this.$apiHost + "/User/getinfo",
        data: {
          uuid: getApp().globalData.uuid,
          skey: getApp().globalData.skey,
        },
        header: {
          "content-type": "application/json",
          sign: getApp().globalData.headerSign,
        },
        success: (res) => { 
          this.phoneNumber = res.data.mobile;
          this.wechat = res.data.wechat;
        },
        complete: (com) => { 
        },
        fail: (e) => {
          console.log("----e:", e);
        },
      });
    },
    goPage(url) { 
      uni.navigateTo({
        url: url
      })
    },
    bindWechat() {
      // 微信绑定逻辑
      // uni.showToast({
      // 	title: '暂未开放',
      // 	icon: 'none'
      // })
      this.$refs['DialogBox'].confirm({
          title: '确认解绑',
          content: '解绑微信账号后将无法继续使用它登录该App账号',
          DialogType: 'inquiry',
          btn1: '再考虑一下',
          btn2: '确认解绑',
          animation: 0
        }).then(() => {
          uni.showToast({
            title: '暂未开放',
            icon: 'none'
          })
        })
    },
    bindQQ() {
      // QQ绑定逻辑
      uni.showToast({
        title: '暂未开放',
        icon: 'none'
      })
    },
    formatPhoneNumber(phoneNumber) {
      if (phoneNumber && phoneNumber.length === 11) {
        return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
      }
      return phoneNumber;
    },
  }
}
</script>

<style scoped lang="scss">
@import 'security.scss';
</style>