usky-web-mobile/src/pages/mine/secure/index.vue

<template>
  <view :data-theme="'theme-' + proxy.$settingStore.themeColor.name" class="secure-container">
    <view class="content-section">
      <view class="menu-list mt0 mlr0">
        <view></view>
        <image style="width: 100%; height: 160px" src="@/static/images/index/banner2.jpg" mode="widthFix"></image>
      </view>

      <view class="menu-list mt0 mlr0">
        <view class="list-cell list-cell-arrow" @click="handleUserModal('修改手机号')">
          <view class="menu-item">
            <view class="title">手机号</view>
            <view style="margin: 0 15px 0 auto; font-size: 14px; color: #909399">{{ user.phonenumber }}</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleUserModal('修改密码')">
          <view class="menu-item">
            <view class="title">密码</view>
            <view style="margin: 0 15px 0 auto; font-size: 14px; color: #909399">{{ user.password ? "已设置" : "未设置" }}</view>
          </view>
        </view>
      </view>

      <view class="menu-list mt0 mlr0">
        <!-- #ifdef APP-PLUS || MP-WEIXIN -->
        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
          <!-- <view class="list-cell list-cell-arrow" @click="proxy.$tab.navigateTo(`/pages/mine/secure/fingerprint/index`)"> -->
          <view class="menu-item">
            <view class="title">指纹登录</view>
          </view>
        </view>
        <!-- #endif -->
        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
          <view class="menu-item">
            <view class="title">人脸</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
          <view class="menu-item">
            <view class="title">手势密码</view>
          </view>
        </view>
      </view>

      <view class="menu-list mt0 mlr0">
        <view class="list-cell list-cell-arrow" @click="proxy.$tab.navigateTo(`/pages/mine/secure/loginLog/index`)">
          <view class="menu-item">
            <view class="title">登录日志</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
          <view class="menu-item">
            <view class="title">常用设备管理</view>
          </view>
        </view>
      </view>

      <view class="menu-list mt0 mlr0" @click="handleUserModal('手机号验证')">
        <view class="list-cell">
          <view class="menu-item">
            <view class="button error">注 销 账 号</view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <u-modal :show="modalShow" :showConfirmButton="true" :showCancelButton="true" @cancel="handleCancel()" @close="handleCancel()" @confirm="handleConfirm()">
    <view class="slot-content" style="width: 100%">
      <view v-if="modalTitle === '修改手机号'">
        <view class="mb15" style="text-align: center; color: #000; font-weight: 600">{{ modalTitle }}</view>
        <u-input v-model="phone" placeholder="请输入手机号" :maxlength="11" border="bottom" />
        <u-input v-model="verify" placeholder="请输入验证码" :maxlength="6" border="bottom">
          <template #suffix>
            <button class="verify" @click="getVerifyCode">{{ !useStore.codeTime ? "获取验证码" : useStore.codeTime + "s" }}</button>
          </template>
        </u-input>
      </view>

      <view v-if="modalTitle === '修改密码'">
        <view class="mb15" style="text-align: center; color: #000; font-weight: 600">{{ modalTitle }}</view>
        <u-input class="mb15" v-model="oldPassword" placeholder="请输入旧密码" :password="oldPasswordBool" border="bottom">
          <template #suffix>
            <text :class="!oldPasswordBool ? 'iconfont oaIcon-eye' : 'iconfont oaIcon-eye-close'" @click="oldPasswordBool = !oldPasswordBool"></text>
          </template>
        </u-input>

        <u-input class="mb15" v-model="newPassword" placeholder="请输入新密码" :password="newPasswordBool" border="bottom">
          <template #suffix>
            <text :class="!newPasswordBool ? 'iconfont oaIcon-eye' : 'iconfont oaIcon-eye-close'" @click="newPasswordBool = !newPasswordBool"></text>
          </template>
        </u-input>

        <u-input v-model="confirmPassword" placeholder="请再次输入新的密码" :password="confirmPasswordBool" border="bottom">
          <template #suffix>
            <text :class="!confirmPasswordBool ? 'iconfont oaIcon-eye' : 'iconfont oaIcon-eye-close'" @click="confirmPasswordBool = !confirmPasswordBool"></text>
          </template>
        </u-input>
      </view>

      <view v-if="modalTitle === '手机号验证'">
        <view class="mb5" style="text-align: center; color: #000; font-weight: 600">{{ modalTitle }}</view>
        <view class="mb15" style="text-align: center; color: #000; font-size: 0.75rem; width: 90%; margin: 0 auto"> 请填写完整的手机号 {{ user.phonenumber }} 以验证身份 </view>
        <u-input v-model="phone" placeholder="请输入手机号" :maxlength="11" border="bottom" />
        <u-input v-model="verify" placeholder="请输入验证码" :maxlength="6" border="bottom">
          <template #suffix>
            <button class="verify" @click="getVerifyCode">{{ !useStore.codeTime ? "获取验证码" : useStore.codeTime + "s" }}</button>
          </template>
        </u-input>
      </view>
    </view>
  </u-modal>
</template>

<script setup>
import config from "@/config";
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
import { useStores, commonStores } from "@/store/modules/index";

import { updateUserProfile, updateUserPwd } from "@/api/system/user";

const useStore = useStores();
const { proxy } = getCurrentInstance();

const data = reactive({
  modalShow: false,
  modalTitle: "",

  oldPassword: undefined,
  oldPasswordBool: true,
  newPassword: undefined,
  newPasswordBool: true,
  confirmPassword: undefined,
  confirmPasswordBool: true,

  phone: undefined,
  verify: undefined,
});

const { modalShow, modalTitle, oldPassword, oldPasswordBool, newPassword, newPasswordBool, confirmPassword, confirmPasswordBool, phone, verify } = toRefs(data);
const { avatar, user, userArr } = toRefs(useStore);

function handleUserModal(title) {
  modalShow.value = true;
  modalTitle.value = title;
}

/** 确定按钮 */
function handleConfirm() {
  if (modalTitle.value == "修改手机号") {
    useStore.PhoneVerify({
      data: {
        phone: phone.value,
        verify: verify.value,
      },
      success: (res) => {
        userArr.value.phonenumber = phone.value;

        updateUserProfile(userArr.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          handleCancel(); //调用取消按钮
          useStore.GetUser();
        });
      },
      error: (res) => {
        return false;
      },
    });
  }

  if (modalTitle.value == "修改密码") {
    if (!oldPassword.value) {
      proxy.$modal.showToast("旧密码不能为空");
      return;
    }

    if (!newPassword.value) {
      proxy.$modal.showToast("新密码不能为空");
      return;
    }

    if (newPassword.value.length < 6 && newPassword.value.length > 20) {
      proxy.$modal.showToast("长度在 6 到 20 个字符");
      return;
    }

    if (!confirmPassword.value) {
      proxy.$modal.showToast("确认密码不能为空");
      return;
    }

    if (confirmPassword.value != newPassword.value) {
      proxy.$modal.showToast("两次输入的密码不一致");
      return;
    }

    updateUserPwd(oldPassword.value, newPassword.value).then((response) => {
      proxy.$modal.msgSuccess("修改成功");
      handleCancel(); //调用取消按钮
      useStore.GetUser();
    });
  }

  if (modalTitle.value == "手机号验证") {
    if (phone.value != userArr.value.phonenumber) {
      proxy.$modal.msg("请输入正确的手机号");
      return;
    }

    useStore.PhoneVerify({
      data: {
        phone: phone.value,
        verify: verify.value,
      },
      success: (res) => {
        useStore.UserDel({
          data: {
            id: user.value.userId,
          },
          success: (res) => {
            proxy.$modal.msgSuccess("用户注销成功");
            handleCancel(); //调用取消按钮
            useStore.LogOut().then(() => {
              proxy.$tab.reLaunch("/pages/index");
            });
          },
        });
      },
      error: (res) => {
        return false;
      },
    });
  }
}

/** 取消按钮 */
function handleCancel() {
  modalShow.value = false;
  modalTitle.value = "";

  oldPassword.value = undefined;
  oldPasswordBool.value = true;
  newPassword.value = undefined;
  newPasswordBool.value = true;
  confirmPassword.value = undefined;
  confirmPasswordBool.value = true;

  phone.value = undefined;
  verify.value = undefined;
}

/** 点击发送验证码 */
function getVerifyCode() {
  if (modalTitle.value == "手机号验证" && phone.value != userArr.value.phonenumber) {
    proxy.$modal.msg("请输入正确的手机号");
    return;
  }

  verify.value = undefined;
  useStore.GetCodeImg({
    phone: phone.value,
    success: (res) => {
      proxy.$modal.msgSuccess("发送成功");
    },
  });
}

onLoad((options) => {
  useStore.GetUser();
});

onReady(() => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
    proxy.$tab.navigateTo("/pages/mine/setting/index");
  }
});
</script>

<style lang="scss" scoped></style>