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-box">
            <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-box">
            <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-box">
            <view class="title">指纹登录</view>
          </view>
        </view>
        <!-- #endif -->
        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
          <view class="menu-item-box">
            <view class="title">人脸</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
          <view class="menu-item-box">
            <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-box">
            <view class="title">登录日志</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
          <view class="menu-item-box">
            <view class="title">常用设备管理</view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <u-modal :show="modalShow" :showConfirmButton="true" :showCancelButton="true" @cancel="modalShow = false" @confirm="handleConfirm">
    <view class="slot-content" style="width: 100%">
      <view class="mb15" style="color: #909399">{{ modalTitle }}</view>

      <view v-if="modalTitle === '修改手机号'">
        <u--input v-model="userArr.phonenumber" :maxlength="11" :placeholder="modalTitle" border="bottom" clearable></u--input>
      </view>

      <view v-if="modalTitle === '修改密码'">
        <u-input class="mb15" v-model="oldPassword" placeholder="请输入旧密码" :password="oldPasswordBool" border="bottom">
          <template #suffix>
            <text :class="!oldPasswordBool ? 'iconfont ucicon-eye' : 'iconfont ucicon-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 ucicon-eye' : 'iconfont ucicon-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 ucicon-eye' : 'iconfont ucicon-eye-close'" @click="confirmPasswordBool = !confirmPasswordBool"></text>
          </template>
        </u-input>
      </view>
    </view>
  </u-modal>
</template>

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

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

const useStore = useStores();

const { proxy } = getCurrentInstance();

const avatar = computed(() => {
  return useStore.$state.avatar;
});

const user = computed(() => {
  return useStore.$state.user;
});

const userArr = computed(() => {
  return useStore.$state.userArr;
});

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

  oldPassword: undefined,
  oldPasswordBool: true,
  newPassword: undefined,
  newPasswordBool: true,
  confirmPassword: undefined,
  confirmPasswordBool: true,
});

const { modalShow, modalTitle, oldPassword, oldPasswordBool, newPassword, newPasswordBool, confirmPassword, confirmPasswordBool } = toRefs(data);

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

function handleConfirm() {
  if (modalTitle.value == "修改手机号") {
    if (!userArr.value.phonenumber) {
      proxy.$modal.showToast("手机号码不能为空");
      return;
    }

    if (!/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(userArr.value.phonenumber)) {
      proxy.$modal.showToast("请输入正确的手机号码");
      return;
    }
  }

  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;
    }
  }

  if (modalTitle.value == "修改手机号") {
    updateUserProfile(userArr.value).then((response) => {
      proxy.$modal.msgSuccess("修改成功");
      modalShow.value = false;
      useStore.getUser();
    });
  } else if (modalTitle.value == "修改密码") {
    updateUserPwd(oldPassword.value, newPassword.value).then((response) => {
      proxy.$modal.msgSuccess("修改成功");
      modalShow.value = false;
      oldPassword.value = undefined;
      oldPasswordBool.value = true;
      newPassword.value = undefined;
      newPasswordBool.value = true;
      confirmPassword.value = undefined;
      confirmPasswordBool.value = true;

      useStore.getUser();
    });
  }
}

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>