feat: 页面调整
This commit is contained in:
parent
d6f3184e28
commit
384b6a08a7
@ -17,10 +17,10 @@
|
||||
<view class="flex-shrink-0 min-w-60">姓名:</view>
|
||||
<view>{{ customer.maskName }}</view>
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<!-- <view class="flex items-center">
|
||||
<view class="flex-shrink-0 min-w-60">性别:</view>
|
||||
<view>{{ customer.sex || '--' }}</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="flex items-center">
|
||||
<view class="flex-shrink-0 min-w-60">手机号:</view>
|
||||
<view>{{ customer.mobile }}</view>
|
||||
@ -30,13 +30,13 @@
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="footer-buttons">
|
||||
<button-footer hideden-shadow confirmText="确定" :showCancel="false" @confirm="confirm()" />
|
||||
</view>
|
||||
<view class="flex justify-end px-15 pb-10">
|
||||
<view class="mr-5 text-base text-dark">以上档案都不对,可以:</view>
|
||||
<view class="px-10 text-base leading-normal text-primary border-auto rounded-sm" @click="close()">新增档案</view>
|
||||
</view>
|
||||
<view class="footer-buttons">
|
||||
<button-footer hideden-shadow confirmText="确定" :showCancel="false" @confirm="confirm()" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<verify-name-popup
|
||||
@ -108,7 +108,10 @@ function onVerifyConfirm() {
|
||||
|
||||
watch(() => props.visible, n => {
|
||||
if (n) {
|
||||
popup.value && popup.value.open()
|
||||
popup.value && popup.value.open();
|
||||
if(props.customers && props.customers.length === 1 && props.customers[0] && props.customers[0]._id){
|
||||
id.value = props.customers[0]._id
|
||||
}
|
||||
} else {
|
||||
popup.value && popup.value.close()
|
||||
}
|
||||
@ -126,6 +129,6 @@ watch(() => props.visible, n => {
|
||||
}
|
||||
|
||||
.popup-content-scroll {
|
||||
max-height: 65vh;
|
||||
max-height: 50vh;
|
||||
}
|
||||
</style>
|
||||
@ -8,9 +8,11 @@
|
||||
<view class="px-15 pt-15 text-base text-dark">
|
||||
请输入所选档案的姓名进行验证
|
||||
</view>
|
||||
<view class="px-15 py-12">
|
||||
<input v-model="inputName" class="input-name" :placeholder="placeholder" placeholder-class="placeholder-class"
|
||||
maxlength="20" />
|
||||
<view class="px-15 py-12 flex items-center justify-center">
|
||||
<view class="text-xl font-semibold text-dark">{{ nameSet.pre }}</view>
|
||||
<view v-if="nameSet.middle" class="text-xl font-semibold text-dark">{{ nameSet.middle }}</view>
|
||||
<input v-model="inputName" :focus="focus" class="input-name text-xl font-semibold text-dark"
|
||||
placeholder-class="text-lg font-semibold placeholder-class" maxlength="1" />
|
||||
</view>
|
||||
<view class="pb-15">
|
||||
<button-footer hideden-shadow confirmText="确定" @cancel="close" @confirm="confirm()" />
|
||||
@ -20,7 +22,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { computed, ref, watch, nextTick } from 'vue';
|
||||
import { toast } from '@/utils/widget';
|
||||
|
||||
import ButtonFooter from '@/components/button-footer.vue';
|
||||
@ -39,7 +41,15 @@ const props = defineProps({
|
||||
|
||||
const popup = ref()
|
||||
const inputName = ref('')
|
||||
const placeholder = computed(() => '请输入姓名' + (props.customer.maskName ? `(${props.customer.maskName})` : ''))
|
||||
const focus = ref(false)
|
||||
const placeholder = computed(() => '请输入姓名' + (props.customer.maskName ? `(${props.customer.maskName})` : ''));
|
||||
const nameSet = computed(() => {
|
||||
const name = props.customer && typeof props.customer.name === 'string' ? props.customer.name.trim() : ''
|
||||
const pre = name.slice(0, -1);
|
||||
const middle = pre.slice(4);
|
||||
const last = name.slice(-1);
|
||||
return { pre, middle: middle ? '*' : '', last: last ? '*' : '', last }
|
||||
})
|
||||
|
||||
function close() {
|
||||
emits('close')
|
||||
@ -48,10 +58,10 @@ function close() {
|
||||
function confirm() {
|
||||
const trimmedName = inputName.value.trim()
|
||||
if (!trimmedName) {
|
||||
toast('请输入姓名')
|
||||
toast('请输入姓名最后一个字')
|
||||
return
|
||||
}
|
||||
if (trimmedName && trimmedName === props.customer.name) {
|
||||
if (trimmedName && trimmedName === nameSet.value.last) {
|
||||
emits('confirm')
|
||||
close()
|
||||
} else {
|
||||
@ -62,22 +72,27 @@ function confirm() {
|
||||
watch(() => props.visible, n => {
|
||||
if (n) {
|
||||
inputName.value = ''
|
||||
popup.value && popup.value.open()
|
||||
popup.value && popup.value.open();
|
||||
nextTick(() => {
|
||||
focus.value = true
|
||||
})
|
||||
} else {
|
||||
popup.value && popup.value.close()
|
||||
focus.value = false
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.input-name {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
padding: 0 20rpx;
|
||||
border: 1px solid #e5e5e5;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
box-sizing: border-box;
|
||||
margin-left: 8rpx;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.placeholder-class {
|
||||
@ -103,4 +118,8 @@ watch(() => props.visible, n => {
|
||||
color: #fff;
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.leading-1 {
|
||||
line-height: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
80
pages/login/agreement-popup.vue
Normal file
80
pages/login/agreement-popup.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<uni-popup ref="popup" type="center" :mask-click="false">
|
||||
<view class="bg-white rounded overflow-hidden" style="width: 690rpx;">
|
||||
<view class="flex text-center border-b">
|
||||
<view class="relative px-15 py-12 flex-grow text-lg"
|
||||
:class="type == 'agree' ? 'text-primary active-title' : 'text-dark'" @click="type = 'agree'">
|
||||
用户协议
|
||||
</view>
|
||||
<view class="relative px-15 py-12 flex-grow text-lg"
|
||||
:class="type != 'agree' ? 'text-primary active-title' : 'text-dark'" @click="type = 'privacyPolicy'">
|
||||
隐私政策
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view v-if="type === 'agree'" scroll-y="true" class="popup-content-scroll">
|
||||
<view class="px-15 py-12 text-base leading-normal" style="white-space: pre-wrap;">
|
||||
{{ userAgreement }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view v-else scroll-y="true" class="popup-content-scroll">
|
||||
<view class="px-15 py-12 text-base leading-normal text-dark" style="white-space: pre-wrap;">
|
||||
{{ privacy }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="footer-buttons">
|
||||
<button-footer hideden-shadow confirmText="我已阅读并同意" @cancel="close" @confirm="confirm()" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import privacy from './privacy-policy.js';
|
||||
import userAgreement from './user-agreement.js';
|
||||
import ButtonFooter from '@/components/button-footer.vue';
|
||||
|
||||
const emits = defineEmits(['close', 'confirm'])
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const popup = ref()
|
||||
const type = ref('agree')
|
||||
|
||||
function close() {
|
||||
emits('close')
|
||||
}
|
||||
|
||||
function confirm() {
|
||||
emits('confirm')
|
||||
}
|
||||
|
||||
watch(() => props.visible, n => {
|
||||
if (n) {
|
||||
popup.value && popup.value.open();
|
||||
type.value = 'agree'
|
||||
} else {
|
||||
popup.value && popup.value.close()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.active-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 4rpx;
|
||||
left: calc(50% - 40rpx);
|
||||
width: 80rpx;
|
||||
height: 8rpx;
|
||||
background: #0074ff;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.popup-content-scroll {
|
||||
max-height: 50vh;
|
||||
}
|
||||
</style>
|
||||
@ -30,7 +30,7 @@
|
||||
@getphonenumber="getPhoneNumber">
|
||||
手机号快捷登录
|
||||
</button>
|
||||
<button v-else class="login-btn" type="primary" @click="remind()">
|
||||
<button v-else class="login-btn" type="primary" @click="visible = true">
|
||||
手机号快捷登录
|
||||
</button>
|
||||
</view>
|
||||
@ -43,6 +43,7 @@
|
||||
<text class="link" @click="toAggreement('privacyPolicy')">《隐私政策》</text>
|
||||
</view>
|
||||
</view>
|
||||
<agreement-popup :visible="visible" @close="visible = false" @confirm="onAgree()" />
|
||||
</template>
|
||||
|
||||
|
||||
@ -56,6 +57,7 @@ import { get, set } from "@/utils/cache";
|
||||
import { toast } from "@/utils/widget";
|
||||
|
||||
import groupAvatar from "@/components/group-avatar.vue";
|
||||
import agreementPopup from "./agreement-popup.vue";
|
||||
|
||||
const env = __VITE_ENV__;
|
||||
const appid = env.MP_WX_APP_ID;
|
||||
@ -64,6 +66,7 @@ const checked = ref(false);
|
||||
const redirectUrl = ref("");
|
||||
const { account } = storeToRefs(useAccountStore());
|
||||
const { login } = useAccountStore();
|
||||
const visible = ref(false)
|
||||
|
||||
function attempRedirect(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
@ -85,8 +88,9 @@ function attempSwitchTab(url) {
|
||||
});
|
||||
}
|
||||
|
||||
function remind() {
|
||||
toast("请先阅读并同意用户协议和隐私政策");
|
||||
function onAgree() {
|
||||
visible.value = false;
|
||||
checked.value = true;
|
||||
}
|
||||
|
||||
function toAggreement(type) {
|
||||
@ -102,7 +106,6 @@ function toHome() {
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function bindTeam() {
|
||||
const res = await api('bindWxappWithTeam', { appid, corpId: team.value.corpId, teamId: team.value.teamId, openid: account.value.openid });
|
||||
if (!res || !res.success) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user