feat: 页面调整

This commit is contained in:
huxuejian 2026-05-15 15:38:48 +08:00
parent d6f3184e28
commit 384b6a08a7
4 changed files with 131 additions and 26 deletions

View File

@ -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>

View File

@ -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>

View 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>

View File

@ -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) {