Hooke / xysBooking

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
bc9ba096 1 parent 2da22ff5

新增寺院录入功能，新增支付完成展示订单详情页

Inline Side-by-side
Showing 8 changed files with 635 additions and 7 deletions
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
2 VITE_BASE = / 2 VITE_BASE = /
3 3
4 # 测试open-id 4 # 测试open-id
5 -# VITE_OPENID = api-test-openid 5 +VITE_OPENID = api-test-openid
6 # VITE_OPENID = o8BRf1gLDWieH3Y3JvbrI_4IjaME 6 # VITE_OPENID = o8BRf1gLDWieH3Y3JvbrI_4IjaME
7 # VITE_OPENID = oJLZq5t9PIKLW9tm1oSUNAuPwssA 7 # VITE_OPENID = oJLZq5t9PIKLW9tm1oSUNAuPwssA
8 # VITE_OPENID = oJLZq5uT_6GwIh2tQWh1F9IoHZ3U 8 # VITE_OPENID = oJLZq5uT_6GwIh2tQWh1F9IoHZ3U
9 -VITE_OPENID = o5CsxuF5AfUirRn4VUwaCSNZrUoM 9 +# VITE_OPENID = o5CsxuF5AfUirRn4VUwaCSNZrUoM
10 # VITE_OPENID = 10 # VITE_OPENID =
11 11
12 # B端账号 12 # B端账号
...@@ -16,8 +16,8 @@ VITE_ID = 13761653761 ...@@ -16,8 +16,8 @@ VITE_ID = 13761653761
16 VITE_PIN = 16 VITE_PIN =
17 17
18 # 反向代理服务器地址 18 # 反向代理服务器地址
19 -# VITE_PROXY_TARGET = https://oa-dev.onwall.cn 19 +VITE_PROXY_TARGET = https://oa-dev.onwall.cn
20 -VITE_PROXY_TARGET = http://oa.onwall.cn 20 +# VITE_PROXY_TARGET = http://oa.onwall.cn
21 21
22 # PC端地址 22 # PC端地址
23 VITE_MOBILE_URL = http://localhost:5173/ 23 VITE_MOBILE_URL = http://localhost:5173/
......
...@@ -7,7 +7,9 @@ export {} ...@@ -7,7 +7,9 @@ export {}
7 7
8 declare module '@vue/runtime-core' { 8 declare module '@vue/runtime-core' {
9 export interface GlobalComponents { 9 export interface GlobalComponents {
10 + copy: typeof import('./src/components/qrCode copy.vue')['default']
10 QrCode: typeof import('./src/components/qrCode.vue')['default'] 11 QrCode: typeof import('./src/components/qrCode.vue')['default']
12 + QrCodeSearch: typeof import('./src/components/qrCodeSearch.vue')['default']
11 ReserveCard: typeof import('./src/components/reserveCard.vue')['default'] 13 ReserveCard: typeof import('./src/components/reserveCard.vue')['default']
12 RouterLink: typeof import('vue-router')['RouterLink'] 14 RouterLink: typeof import('vue-router')['RouterLink']
13 RouterView: typeof import('vue-router')['RouterView'] 15 RouterView: typeof import('vue-router')['RouterView']
......
1 /* 1 /*
2 * @Date: 2023-08-24 09:42:27 2 * @Date: 2023-08-24 09:42:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-01-25 14:56:16 4 + * @LastEditTime: 2024-01-26 13:28:51
5 * @FilePath: /xysBooking/src/api/index.js 5 * @FilePath: /xysBooking/src/api/index.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -17,12 +17,14 @@ const Api = { ...@@ -17,12 +17,14 @@ const Api = {
17 PAY_PREPARE: '/srv/?a=api&t=pay_prepare', 17 PAY_PREPARE: '/srv/?a=api&t=pay_prepare',
18 PAY_CALLBACK: '/srv/?a=api&t=pay_callback', 18 PAY_CALLBACK: '/srv/?a=api&t=pay_callback',
19 BILL_INFO: '/srv/?a=api&t=bill_info', 19 BILL_INFO: '/srv/?a=api&t=bill_info',
20 + ON_AUTH_BILL_INFO: '/srv/?a=no_auth_api&t=bill_info',
20 QRCODE_LIST: '/srv/?a=api&t=qrcode_list', 21 QRCODE_LIST: '/srv/?a=api&t=qrcode_list',
21 QRCODE_STATUS: '/srv/?a=api&t=qrcode_status', 22 QRCODE_STATUS: '/srv/?a=api&t=qrcode_status',
22 BILL_LIST: '/srv/?a=api&t=bill_list', 23 BILL_LIST: '/srv/?a=api&t=bill_list',
23 ICBC_REFUND: '/srv/?a=icbc_refund', 24 ICBC_REFUND: '/srv/?a=icbc_refund',
24 BILL_PREPARE: '/srv/?a=api&t=bill_person', 25 BILL_PREPARE: '/srv/?a=api&t=bill_person',
25 BILL_PAY_STATUS: '/srv/?a=api&t=bill_pay_status', 26 BILL_PAY_STATUS: '/srv/?a=api&t=bill_pay_status',
27 + QUERY_QR_CODE: '/srv/?a=api&t=id_number_query_qr_code',
26 }; 28 };
27 29
28 /** 30 /**
...@@ -97,6 +99,13 @@ export const payCallbackAPI = (params) => fn(fetch.post(Api.PAY_CALLBACK, params ...@@ -97,6 +99,13 @@ export const payCallbackAPI = (params) => fn(fetch.post(Api.PAY_CALLBACK, params
97 export const billInfoAPI = (params) => fn(fetch.get(Api.BILL_INFO, params)); 99 export const billInfoAPI = (params) => fn(fetch.get(Api.BILL_INFO, params));
98 100
99 /** 101 /**
102 + * @description: 预约单详情，参观者列表 - 免授权接口
103 + * @param {String} bill_id 预约单id
104 + * @returns {String}
105 + */
106 +export const onAuthBillInfoAPI = (params) => fn(fetch.get(Api.ON_AUTH_BILL_INFO, params));
107 +
108 +/**
100 * @description: 预约码列表 109 * @description: 预约码列表
101 * @returns {String} 110 * @returns {String}
102 */ 111 */
...@@ -136,3 +145,10 @@ export const billPersonAPI = (params) => fn(fetch.get(Api.BILL_PREPARE, params)) ...@@ -136,3 +145,10 @@ export const billPersonAPI = (params) => fn(fetch.get(Api.BILL_PREPARE, params))
136 * @returns {String} 145 * @returns {String}
137 */ 146 */
138 export const billPayStatusAPI = (params) => fn(fetch.get(Api.BILL_PAY_STATUS, params)); 147 export const billPayStatusAPI = (params) => fn(fetch.get(Api.BILL_PAY_STATUS, params));
148 +
149 +/**
150 + * @description: 身份证查询预约码
151 + * @param {String}
152 + * @returns {String}
153 + */
154 +export const queryQrCodeAPI = (params) => fn(fetch.get(Api.QUERY_QR_CODE, params));
......
1 +<!--
2 + * @Date: 2024-01-16 10:06:47
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-01-26 13:55:15
5 + * @FilePath: /xysBooking/src/components/qrCodeSearch.vue
6 + * @Description: 预约码卡组件
7 +-->
8 +<template>
9 + <div class="qr-code-page">
10 + <div v-if="userinfo.qr_code" class="show-qrcode">
11 + <div class="qrcode-content">
12 + <div class="user-info">{{ userinfo.name }}&nbsp;{{ userinfo.id }}</div>
13 + <div class="user-qrcode">
14 + <div class="left">
15 + <!-- <img src="https://cdn.ipadbiz.cn/xys/booking/%E5%B7%A6@2x.png"> -->
16 + </div>
17 + <div class="center">
18 + <img :src="userinfo.qr_code_url ">
19 + <div v-if="useStatus === STATUS_CODE.CANCELED || useStatus === STATUS_CODE.USED" class="qrcode-used">
20 + <p>二维码{{ qr_code_status[useStatus] }}</p>
21 + </div>
22 + </div>
23 + <div class="right">
24 + <!-- <img src="https://cdn.ipadbiz.cn/xys/booking/%E5%8F%B3@2x.png"> -->
25 + </div>
26 + </div>
27 + <div style="color: red; margin-top: 1rem;">{{ userinfo.datetime }}</div>
28 + </div>
29 + </div>
30 + <div v-else class="no-qrcode">
31 + <img src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem;">
32 + <div class="no-qrcode-title">您还没有预约过今天参观</div>
33 + </div>
34 + </div>
35 +</template>
36 +
37 +<script setup>
38 +import { ref } from 'vue'
39 +import { useRoute, useRouter } from 'vue-router'
40 +import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
41 +//import { } from '@/utils/generateModules.js'
42 +//import { } from '@/utils/generateIcons.js'
43 +//import { } from '@/composables'
44 +
45 +import { qrcodeListAPI, qrcodeStatusAPI, billPersonAPI, queryQrCodeAPI } from '@/api/index'
46 +const $route = useRoute();
47 +const $router = useRouter();
48 +useTitle($route.meta.title);
49 +
50 +const props = defineProps({
51 + id: {
52 + type: String,
53 + default: ''
54 + },
55 +});
56 +
57 +const formatDatetime = (data) => { // 格式化日期
58 + let begin_time = data.begin_time.slice(0, -3);
59 + let end_time = data.end_time.slice(0, -3);
60 + let str = begin_time + ' ' + end_time;
61 + return `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
62 +}
63 +
64 +const userinfo = ref({});
65 +
66 +watch(
67 + () => props.id,
68 + async (id) => {
69 + console.warn(id);
70 + }
71 +)
72 +
73 +/**
74 + * 生成15位身份证号中间8位替换为*号
75 + * @param {*} inputString
76 + */
77 +function replaceMiddleCharacters(inputString) {
78 + if (inputString?.length < 15) {
79 + return inputString; // 字符串长度不足，不进行替换
80 + }
81 +
82 + const start = Math.floor((inputString?.length - 8) / 2); // 开始替换的索引位置
83 + const end = start + 8; // 结束替换的索引位置
84 +
85 + const replacement = '*'.repeat(8); // 生成包含8个*号的字符串
86 +
87 + const replacedString = inputString?.substring(0, start) + replacement + inputString?.substring(end);
88 + return replacedString;
89 +}
90 +
91 +const formatId = (id) => {
92 + return replaceMiddleCharacters(id);
93 +};
94 +
95 +const useStatus = ref('0');
96 +
97 +const qr_code_status = {
98 + '1': '未激活',
99 + '3': '待使用',
100 + '5': '被取消',
101 + '7': '已使用'
102 +};
103 +
104 +const STATUS_CODE = {
105 + APPLY: '1',
106 + SUCCESS: '3',
107 + CANCELED: '5',
108 + USED: '7'
109 +};
110 +
111 +const formatStatus = (status) => {
112 + switch (status) {
113 + case 'success':
114 + return {
115 + key: 'success',
116 + value: '预约成功'
117 + }
118 + case 'cancel':
119 + return {
120 + key: 'cancel',
121 + value: '已取消'
122 + }
123 + case 'used':
124 + return {
125 + key: 'used',
126 + value: '已使用'
127 + }
128 + }
129 +}
130 +
131 +const selectUser = (index) => {
132 + select_index.value = index;
133 +}
134 +
135 +onMounted(async () => {
136 + if (props.id) {
137 + // 511522190103214279
138 + const { code, data } = await queryQrCodeAPI({ id_number: props.id });
139 + if (code) {
140 + userinfo.value = {
141 + id: formatId(props.id),
142 + name: data.name,
143 + datetime: formatDatetime({ begin_time: data.begin_time, end_time: data.end_time }),
144 + qr_code: data.qr_code,
145 + qr_code_url: 'http://oa.onwall.cn/admin?m=srv&a=get_qrcode&key=' + data.qr_code,
146 + }
147 + const { code: status_code, data: status_data } = await qrcodeStatusAPI({ qr_code: data.qr_code });
148 + if (status_code) {
149 + useStatus.value = status_data.status;
150 + }
151 + }
152 + }
153 +});
154 +
155 +// 定义轮询函数
156 +const poll = async () => {
157 + // 二维码未使用不停轮询接口
158 + if (useStatus.value === STATUS_CODE.SUCCESS) {
159 + const { code, data } = await qrcodeStatusAPI({ qr_code: userinfo.value.qr_code });
160 + if (code) {
161 + useStatus.value = data.status;
162 + }
163 + }
164 +};
165 +
166 +// 每秒执行一次轮询函数
167 +const intervalId = setInterval(poll, 1000);
168 +
169 +// 在组件卸载时清除定时器
170 +onUnmounted(() => {
171 + clearInterval(intervalId);
172 +});
173 +</script>
174 +
175 +<style lang="less" scoped>
176 +.qr-code-page {
177 + .qrcode-content {
178 + padding: 1rem 0;
179 + display: flex;
180 + flex-direction: column;
181 + justify-content: center;
182 + align-items: center;
183 + // width: 100%;
184 + // height: 100%;
185 + background-color: #FFF;
186 + border-radius: 8px;
187 + box-shadow: 0rem 0rem 0.92rem 0rem rgba(106,106,106,0.27);
188 + .user-status {
189 + .status {
190 + font-size: 0.75rem;
191 + padding: 5px 8px;
192 + border-radius: 5px;
193 + }
194 + .success {
195 + color: #A67939;
196 + background-color: #FBEEDC;
197 + }
198 + .cancel {
199 + color: #929292;
200 + background-color: #E6E6E6;
201 + }
202 + .used {
203 + color: #477F3D;
204 + background-color: #E5EFE3;
205 + }
206 + }
207 + .user-info {
208 + color: #A6A6A6;
209 + font-size: 1.15rem;
210 + margin-top: 0.5rem;
211 + margin-bottom: 0.5rem;
212 + }
213 + .user-qrcode {
214 + display: flex;
215 + align-items: center;
216 + .left {
217 + img {
218 + width: 1.75rem; margin-right: 0.5rem;
219 + }
220 + }
221 + .center {
222 + border: 1px solid #D1D1D1;
223 + border-radius: 20px;
224 + padding: 0.5rem;
225 + position: relative;
226 + img {
227 + width: 15rem;
228 + }
229 + div {
230 + position: absolute;
231 + top: 0;
232 + left: 0;
233 + right: 0;
234 + bottom: 0;
235 + background-color: rgba(106,106,106,0.6);
236 + // opacity: 0.49;
237 + border-radius: 20px;
238 + color: #FFF;
239 + text-align: center;
240 + p {
241 + position: absolute;
242 + top: 50%;
243 + left: 50%;
244 + transform: translate(-50%, -50%);
245 + font-size: 1.2rem;
246 + }
247 + }
248 + }
249 + .right {
250 + img {
251 + width: 1.75rem;
252 + margin-left: 0.5rem;
253 + }
254 + }
255 + }
256 + .refresh {
257 + display: flex;
258 + justify-content: center;
259 + align-items: center;
260 + margin-top: 1rem;
261 + img {
262 + width: 3.5rem;
263 + }
264 + div {
265 + color: #A67939; font-size: 1.1rem;
266 + }
267 + }
268 + }
269 + .user-list {
270 + display: flex;
271 + padding: 1rem;
272 + align-items: center;
273 + flex-wrap: wrap;
274 + .user-item {
275 + position: relative;
276 + padding: 0.25rem 0.5rem;
277 + border: 1px solid #A67939;
278 + margin: 0.25rem;
279 + border-radius: 5px;
280 + color: #A67939;
281 + &.checked {
282 + color: #FFF;
283 + background-color: #A67939;
284 + }
285 + &.border {
286 + margin-right: 0.5rem;
287 + &::after {
288 + position: absolute;
289 + right: -0.5rem;
290 + top: calc(50% - 0.5rem);
291 + content: '';
292 + height: 1rem;
293 + border-right: 1px solid #A67939;
294 + }
295 + }
296 + }
297 + }
298 +
299 + .no-qrcode {
300 + display: flex;
301 + justify-content: center;
302 + align-items: center;
303 + flex-direction: column;
304 + margin-bottom: 1rem;
305 + img {
306 + margin-top: 1rem;
307 + margin-bottom: 1rem;
308 + width: 10rem;
309 + }
310 + .no-qrcode-title {
311 + color: #A67939;
312 + font-size: 1.05rem;
313 + }
314 + }
315 +}
316 +</style>
1 /* 1 /*
2 * @Date: 2023-06-13 13:26:46 2 * @Date: 2023-06-13 13:26:46
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-01-19 21:59:56 4 + * @LastEditTime: 2024-01-26 13:08:44
5 * @FilePath: /xysBooking/src/route.js 5 * @FilePath: /xysBooking/src/route.js
6 * @Description: 路由列表 6 * @Description: 路由列表
7 */ 7 */
...@@ -84,6 +84,20 @@ export default [ ...@@ -84,6 +84,20 @@ export default [
84 }, 84 },
85 }, 85 },
86 { 86 {
87 + path: '/callback',
88 + component: () => import('@/views/callback.vue'),
89 + meta: {
90 + title: '反馈页',
91 + },
92 + },
93 + {
94 + path: '/search',
95 + component: () => import('@/views/search.vue'),
96 + meta: {
97 + title: '寺院录入',
98 + },
99 + },
100 + {
87 path: '/auth', 101 path: '/auth',
88 component: () => import('@/views/auth.vue'), 102 component: () => import('@/views/auth.vue'),
89 meta: { 103 meta: {
......
1 +<!--
2 + * @Date: 2024-01-26 10:24:45
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-01-26 13:58:57
5 + * @FilePath: /xysBooking/src/views/callback.vue
6 + * @Description: 反馈页面
7 +-->
8 +<template>
9 + <div class="callback-page">
10 + <div style="">
11 + <div class="text-prompts">
12 + <img src="https://cdn.ipadbiz.cn/xys/booking/%E6%88%90%E5%8A%9F@2x.png">
13 + <div class="text">支付完成</div>
14 + </div>
15 + <div class="appointment-information">
16 + <div class="number-of-visitors">参观人数：<span>{{ billInfo?.total_qty }} 人</span></div>
17 + <div class="visit-time">参访时间：<span>{{ billInfo?.datetime }}</span></div>
18 + <div class="payment-amount">支付金额：<span>¥ {{ billInfo?.total_amt }}</span></div>
19 + </div>
20 + <!-- <div class="appointment-notice">
21 + <p style="margin-bottom: 0.25rem;"><van-icon name="info-o" />&nbsp;温馨提示</p>
22 + <p style="font-size: 0.85rem;">1. 一人一码，或拿身份证，扫码或识别身份证成功后进入</p>
23 + <p style="font-size: 0.85rem;">2. 若您无法按时参观，请提前在预约记录中取消您的预约</p>
24 + </div> -->
25 + </div>
26 + </div>
27 +</template>
28 +
29 +<script setup>
30 +import { ref } from 'vue'
31 +import { useRoute, useRouter } from 'vue-router'
32 +import { onAuthBillInfoAPI } from '@/api/index'
33 +import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
34 +//import { } from '@/utils/generateModules.js'
35 +//import { } from '@/utils/generateIcons.js'
36 +//import { } from '@/composables'
37 +const $route = useRoute();
38 +const $router = useRouter();
39 +useTitle($route.meta.title);
40 +
41 +const billInfo = ref({});
42 +
43 +const formatDatetime = (data) => { // 格式化日期
44 + let begin_time = data.begin_time.slice(0, -3);
45 + let end_time = data.end_time.slice(0, -3);
46 + let str = begin_time + ' ' + end_time;
47 + return `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
48 +}
49 +
50 +onMounted(async () => {
51 + // 获取订单详情
52 + const { code, data } = await onAuthBillInfoAPI({ pay_id: $route.query.pay_id });
53 + if (code) {
54 + //
55 + data.datetime = data && formatDatetime(data);
56 + billInfo.value = data;
57 + }
58 +})
59 +</script>
60 +
61 +<style lang="less" scoped>
62 +.callback-page {
63 + position: relative;
64 + background-color: #FFF;
65 + .text-prompts {
66 + display: flex;
67 + align-items: center;
68 + justify-content: center;
69 + height: 35vh;
70 + flex-direction: column;
71 + img {
72 + width: 60vw;
73 + }
74 + .text {
75 + color: #A67939;
76 + font-size: 1.25rem;
77 + }
78 + }
79 + .appointment-information {
80 + padding: 2rem 1rem;
81 + border-bottom: 1px dashed #A67939;
82 + line-height: 2;
83 + .number-of-visitors {
84 + span {
85 + color: #A67939;
86 + }
87 + }
88 + .visit-time {
89 + span {
90 + color: #A67939;
91 + }
92 + }
93 + .payment-amount {
94 + span {
95 + color: #FF1919;
96 + }
97 + }
98 + }
99 + .appointment-notice {
100 + color: #A67939;
101 + padding: 1rem;
102 + line-height: 2;
103 + }
104 +}
105 +</style>
1 <!-- 1 <!--
2 * @Date: 2023-06-21 10:23:09 2 * @Date: 2023-06-21 10:23:09
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-01-25 12:02:12 4 + * @LastEditTime: 2024-01-26 13:09:53
5 * @FilePath: /xysBooking/src/views/index.vue 5 * @FilePath: /xysBooking/src/views/index.vue
6 * @Description: 预约页首页 6 * @Description: 预约页首页
7 --> 7 -->
...@@ -24,6 +24,10 @@ ...@@ -24,6 +24,10 @@
24 <van-icon size="1.5rem" color="#A67939" :name="icon_2" /> 24 <van-icon size="1.5rem" color="#A67939" :name="icon_2" />
25 &nbsp;预约记录 25 &nbsp;预约记录
26 </div> 26 </div>
27 + <div class="search" @click="toSearch">
28 + <van-icon size="1.5rem" color="#A67939" :name="icon_2" />
29 + &nbsp;寺院录入
30 + </div>
27 </div> 31 </div>
28 <div class="logo"></div> 32 <div class="logo"></div>
29 </div> 33 </div>
...@@ -75,6 +79,9 @@ const toBooking = () => { // 跳转到预约须知 ...@@ -75,6 +79,9 @@ const toBooking = () => { // 跳转到预约须知
75 const toRecord = () => { // 跳转到预约记录 79 const toRecord = () => { // 跳转到预约记录
76 go('/bookingList'); 80 go('/bookingList');
77 } 81 }
82 +const toSearch = () => { // 跳转到寺院录入
83 + go('/search');
84 +}
78 const toCode = () => { // 跳转到预约码 85 const toCode = () => { // 跳转到预约码
79 // go('/bookingCode'); 86 // go('/bookingCode');
80 window.location.replace(location.origin + location.pathname + '#/bookingCode'); 87 window.location.replace(location.origin + location.pathname + '#/bookingCode');
...@@ -134,6 +141,16 @@ useClickAway(root, () => { ...@@ -134,6 +141,16 @@ useClickAway(root, () => {
134 border: 1px solid #A67939; 141 border: 1px solid #A67939;
135 margin-top: 1.5rem; 142 margin-top: 1.5rem;
136 } 143 }
144 + .search {
145 + display: flex;
146 + justify-content: center;
147 + align-items: center;
148 + color: #A67939;
149 + border-radius: 7px;
150 + padding: 0.7rem 4rem;
151 + border: 1px solid #A67939;
152 + margin-top: 1.5rem;
153 + }
137 } 154 }
138 .logo { 155 .logo {
139 position: absolute; 156 position: absolute;
......
1 +<!--
2 + * @Date: 2024-01-26 13:08:09
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-01-26 13:53:38
5 + * @FilePath: /xysBooking/src/views/search.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="search-page">
10 + <div>
11 + <div v-if="!is_search" class="input-item">
12 + <div>证件号码</div>
13 + <div>
14 + <input type="text" v-model="idCode" placeholder="请输入证件号码" @blur="checkIdCode" maxlength="18" style="width: 100%;">
15 + </div>
16 + </div>
17 + <div v-else>
18 + <qrCodeSearch :id="id_number" />
19 + </div>
20 + <div v-if="!is_search" class="save-wrapper">
21 + <div class="save-btn" @click="searchBtn">查询</div>
22 + </div>
23 + <div v-else class="success-btn">
24 + <div @click="goToHome" class="btn-item btn-left">首页</div>
25 + <div @click="goBack" class="btn-item btn-right">返回查询</div>
26 + </div>
27 + </div>
28 +
29 + <van-toast v-model:show="show_error" style="">
30 + <template #message>
31 + {{ error_message }}
32 + </template>
33 + </van-toast>
34 + </div>
35 +</template>
36 +
37 +<script setup>
38 +import { ref } from 'vue'
39 +import { useRoute, useRouter } from 'vue-router'
40 +import { validateCIN } from '@code-ts/cin'
41 +import qrCodeSearch from '@/components/qrCodeSearch';
42 +import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
43 +//import { } from '@/utils/generateModules.js'
44 +//import { } from '@/utils/generateIcons.js'
45 +//import { } from '@/composables'
46 +import { showSuccessToast, showFailToast } from 'vant';
47 +import { useGo } from '@/hooks/useGo'
48 +import { queryQrCodeAPI } from '@/api/index'
49 +
50 +const $route = useRoute();
51 +const $router = useRouter();
52 +useTitle($route.meta.title);
53 +
54 +const go = useGo();
55 +const is_search = ref(false);
56 +const idCode = ref('');
57 +const id_number = ref('');
58 +
59 +const show_error = ref(false);
60 +const error_message = ref('');
61 +
62 +const checkIdCode = () => { // 检查身份证号是否为空
63 + let flag = true;
64 + if (idCode.value.length === 15) { // 15位身份证号码不校验
65 + flag = true;
66 + } else {
67 + if (!validateCIN(idCode.value)) {
68 + show_error.value = true;
69 + error_message.value = '请检查身份证号码';
70 + flag = false;
71 + }
72 + }
73 + return flag;
74 +}
75 +
76 +const searchBtn = async () => {
77 + // 查询用户信息
78 + if (checkIdCode()) {
79 + is_search.value = true;
80 + id_number.value = idCode.value;
81 + idCode.value = ''
82 + }
83 +}
84 +const goBack = () => {
85 + is_search.value = false;
86 +}
87 +const goToHome = () => {
88 + go('/')
89 +}
90 +</script>
91 +
92 +<style lang="less" scoped>
93 +.search-page {
94 + padding: 1rem;
95 + position: relative;
96 + .input-item {
97 + display: flex;
98 + align-items: center;
99 + justify-content: space-between;
100 + background-color: #fff;
101 + padding: 1rem;
102 + border-radius: 8px;
103 + margin-bottom: 1rem;
104 + input {
105 + border: 0;
106 + text-align: right;
107 + }
108 + }
109 + .save-wrapper {
110 + background-color: #FFF;
111 + position: fixed;
112 + width: 100vw;
113 + bottom: 0;
114 + left: 0;
115 + height: 5rem;
116 + display: flex;
117 + align-items: center;
118 + justify-content: center;
119 + .save-btn {
120 + text-align: center;
121 + flex-grow: 1;
122 + background-color: #A67939;
123 + padding: 0.8rem 0;
124 + margin: 1rem;
125 + color: #FFF;
126 + border-radius: 5px;
127 + font-size: 1.1rem;
128 + }
129 + }
130 + .success-btn {
131 + background-color: #FFF;
132 + position: fixed;
133 + width: 100vw;
134 + bottom: 0;
135 + left: 0;
136 + height: 5rem;
137 + display: flex;
138 + align-items: center;
139 + justify-content: space-around;
140 + .btn-item {
141 + padding: 0.7rem 4rem;
142 + border-radius: 5px;
143 + font-size: 1.05rem;
144 + }
145 + .btn-left{
146 + background-color: #A67939;
147 + color: #FFF;
148 + margin-left: 0.7rem;
149 + }
150 + .btn-right{
151 + border: 1px solid #A67939;
152 + color: #A67939;
153 + font-size: 1.05rem;
154 + margin-right: 0.7rem;
155 + }
156 + }
157 +}
158 +</style>