|
|
@@ -0,0 +1,188 @@
|
|
|
+<template>
|
|
|
+ <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
|
|
|
+ <u-navbar :titleStyle="{ color: '#000' }" :autoBack="true" title="身份验证" :placeholder="true" :safeAreaInsetTop="true" bgColor="#fff">
|
|
|
+ <template #left>
|
|
|
+ <view class="u-navbar__content__left__item">
|
|
|
+ <u-icon name="arrow-left" size="20" color="#000"></u-icon>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </u-navbar>
|
|
|
+ </u-sticky>
|
|
|
+
|
|
|
+ <oa-scroll
|
|
|
+ customClass="authentication-container scroll-height bg-white"
|
|
|
+ :isSticky="true"
|
|
|
+ :customStyle="{
|
|
|
+ //#ifdef APP-PLUS || MP-WEIXIN
|
|
|
+ height: `calc(100vh - (44px + ${proxy.$settingStore.StatusBarHeight}))`,
|
|
|
+ //#endif
|
|
|
+ //#ifdef H5
|
|
|
+ height: `calc(100vh - (44px ))`,
|
|
|
+ //#endif
|
|
|
+ }"
|
|
|
+ :refresherLoad="false"
|
|
|
+ :refresherEnabled="flase"
|
|
|
+ :refresherDefaultStyle="'none'"
|
|
|
+ :refresherBackground="'#f5f6f7'"
|
|
|
+ :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
|
|
|
+ >
|
|
|
+ <template #default>
|
|
|
+ <view class="center-area">
|
|
|
+ <view class="center-area-title">请从下方选择一种方式进行验证</view>
|
|
|
+ <view class="center-area-item">
|
|
|
+ <text class="iconfont oaIcon-mima"></text>
|
|
|
+ <view class="center-area-item-title">密码验证</view>
|
|
|
+ <view class="center-area-item-subTitle"></view>
|
|
|
+ </view>
|
|
|
+ <view class="center-area-item">
|
|
|
+ <text class="iconfont oaIcon-shouji"></text>
|
|
|
+ <view class="center-area-item-title">短信验证</view>
|
|
|
+ <view class="center-area-item-subTitle">{{ user.phonenumber }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </oa-scroll>
|
|
|
+
|
|
|
+ <!-- <u-modal class="modal-section" :show="modalShow" :showConfirmButton="true" :showCancelButton="true" @cancel="handleCancel()" @close="handleCancel()" @confirm="handleConfirm()">
|
|
|
+ <view class="modal-section-slot">
|
|
|
+ <view class="modal-section-slot-item" v-if="modalTitle === '修改手机号'">
|
|
|
+ <view class="mb15 title">{{ 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 class="modal-section-slot-item" v-if="modalTitle === '修改密码'">
|
|
|
+ <view class="mb15 title">{{ 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 class="modal-section-slot-item" v-if="modalTitle === '手机号验证'">
|
|
|
+ <view class="mb5 title">{{ modalTitle }}</view>
|
|
|
+ <view class="mb15 subTitle"> 请填写完整的手机号 {{ 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 { onLoad, onShow, onReady, onHide, onLaunch, onUnload, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
|
|
|
+import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
|
|
|
+/*----------------------------------接口引入-----------------------------------*/
|
|
|
+/*----------------------------------组件引入-----------------------------------*/
|
|
|
+/*----------------------------------store引入-----------------------------------*/
|
|
|
+import { useStores, commonStores, controlStores } from "@/store/modules/index";
|
|
|
+/*----------------------------------公共方法引入-----------------------------------*/
|
|
|
+/*----------------------------------公共变量-----------------------------------*/
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const useStore = useStores();
|
|
|
+const controlStore = controlStores();
|
|
|
+/*----------------------------------变量声明-----------------------------------*/
|
|
|
+const state = reactive({
|
|
|
+ loading: false,
|
|
|
+ dataList: [],
|
|
|
+ pageSize: 20,
|
|
|
+ current: 1,
|
|
|
+ total: 0,
|
|
|
+});
|
|
|
+
|
|
|
+const { dataList } = toRefs(state);
|
|
|
+const { avatar, user, userArr } = toRefs(useStore);
|
|
|
+
|
|
|
+/**
|
|
|
+ * @初始化
|
|
|
+ */
|
|
|
+function init() {}
|
|
|
+
|
|
|
+onReady(() => {});
|
|
|
+
|
|
|
+onShow(() => {});
|
|
|
+
|
|
|
+onLoad((options) => {
|
|
|
+ init();
|
|
|
+ useStore.GetUser();
|
|
|
+});
|
|
|
+
|
|
|
+onUnload(() => {});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.center-area {
|
|
|
+ padding: 0 20px;
|
|
|
+ color: #000000;
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ text-align: center;
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ padding: 15px;
|
|
|
+ background-color: #f2f1f6;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 18px;
|
|
|
+ color: $uni-color-primary;
|
|
|
+ margin: auto 0;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ margin: auto 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-subTitle {
|
|
|
+ margin: auto 20px auto auto;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #909399;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-item::before {
|
|
|
+ content: " ";
|
|
|
+ height: 10px;
|
|
|
+ width: 10px;
|
|
|
+ border-width: 2px 2px 0 0;
|
|
|
+ border-color: #c0c0c0;
|
|
|
+ border-style: solid;
|
|
|
+ -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
|
|
+ transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -6px;
|
|
|
+ right: 30rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
fanghuisheng
