Hooke / xysBooking

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
efb0e47e 1 parent 29e18d45

首页访问逻和我的访问样式修改

Inline Side-by-side
Showing 9 changed files with 404 additions and 20 deletions
/*
* @Date: 2023-08-24 09:42:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-27 11:52:54
* @LastEditTime: 2024-01-29 17:26:42
* @FilePath: /xysBooking/src/api/index.js
* @Description: 文件描述
*/
......@@ -141,6 +141,7 @@ export const icbcRefundAPI = (params) => fn(fetch.post(Api.ICBC_REFUND, params))
export const billPersonAPI = (params) => fn(fetch.get(Api.BILL_PREPARE, params));
/**
* 接口废弃
* @description: 刷新预约单支付状态
* @param {String}
* @returns {String}
......
/*
* @Date: 2023-06-13 13:26:46
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-26 13:08:44
* @LastEditTime: 2024-01-29 14:53:27
* @FilePath: /xysBooking/src/route.js
* @Description: 路由列表
*/
......@@ -73,7 +73,7 @@ export default [
path: '/me',
component: () => import('@/views/me.vue'),
meta: {
title: '我的',
title: '参观者',
},
},
{
......@@ -94,7 +94,7 @@ export default [
path: '/search',
component: () => import('@/views/search.vue'),
meta: {
title: '寺院录入',
title: '邀请码',
},
},
{
......@@ -104,4 +104,18 @@ export default [
title: '授权页面',
},
},
{
path: '/visitorList',
component: () => import('@/views/visitorList.vue'),
meta: {
title: '参观者列表',
},
},
{
path: '/my',
component: () => import('@/views/my.vue'),
meta: {
title: '我的',
},
},
];
......
<!--
* @Date: 2024-01-16 10:06:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-25 13:05:10
* @LastEditTime: 2024-01-29 15:54:01
* @FilePath: /xysBooking/src/views/bookingCode.vue
* @Description: 文件描述
-->
......@@ -54,7 +54,7 @@ useTitle($route.meta.title);
const toMy = () => { // 跳转到我的
// go('/me');
window.location.replace(location.origin + location.pathname + '#/me');
window.location.replace(location.origin + location.pathname + '#/my');
}
const toHome = () => { // 跳转到首页
// go('/');
......
<!--
* @Date: 2023-06-21 10:23:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-27 11:19:43
* @LastEditTime: 2024-01-29 16:41:51
* @FilePath: /xysBooking/src/views/index.vue
* @Description: 预约页首页
-->
......@@ -15,7 +15,7 @@
</van-swipe-item>
</van-swipe>
</div>
<div ref="root" class="index-control">
<!-- <div ref="root" class="index-control">
<div class="booking" @click="toBooking">
<van-icon size="1.5rem" color="#FFFFFF" :name="icon_1" />
&nbsp;立即预约
......@@ -26,7 +26,15 @@
</div>
<div class="search" @click="toSearch">
<van-icon size="1.5rem" color="#A67939" :name="icon_6" />
&nbsp;寺院录入
&nbsp;邀请码
</div>
</div> -->
<div class="index-circular">
<div class="booking-wrapper">
<div class="booking" @click="toBooking">
<div><van-icon size="3rem" color="#FFFFFF" :name="icon_1" /></div>
<div style="color: #FFF;">马上预约</div>
</div>
</div>
</div>
<div class="logo"></div>
......@@ -89,7 +97,7 @@ const toCode = () => { // 跳转到预约码
}
const toMy = () => { // 跳转到我的
// go('/me');
window.location.replace(location.origin + location.pathname + '#/me');
window.location.replace(location.origin + location.pathname + '#/my');
}
onMounted(async () => {
......@@ -153,6 +161,35 @@ useClickAway(root, () => {
margin-top: 1.5rem;
}
}
.index-circular {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-top: 10vh;
// font-weight: bold;
font-size: 1.1rem;
.booking-wrapper {
height: 25vh;
width: 25vh;
border-radius: 50%;
background-color: rgba(166, 121, 57, 0.26);
display: flex;
align-items: center;
justify-content: center;
.booking {
height: 21.5vh;
width: 21.5vh;
border-radius: 50%;
background-color: #A67939;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
}
}
.logo {
position: absolute;
right: 0;
......
<!--
* @Date: 2024-01-16 13:33:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-25 14:32:00
* @LastEditTime: 2024-01-29 15:54:38
* @FilePath: /xysBooking/src/views/me.vue
* @Description: 我的页面
-->
......@@ -31,7 +31,7 @@
</div>
</div>
<div style="height: 8rem;"></div>
<div class="index-nav">
<!-- <div class="index-nav">
<div class="nav-logo" @click="toHome">
<van-icon size="1.5rem" :name="icon_3" color="#A67939" />
首页
......@@ -45,7 +45,7 @@
<van-icon size="1.5rem" :name="icon_5" color="#A67939" />
我的
</div>
</div>
</div> -->
</div>
</template>
......
<!--
* @Date: 2024-01-29 14:52:46
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-29 16:11:15
* @FilePath: /xysBooking/src/views/my.vue
* @Description: 文件描述
-->
<template>
<div class="my-page">
<div v-for="(item, index) in menu_list" :key="index" class="my-item" @click="go(item.to)">
<div class="left">
<van-icon size="1rem" :name="item.icon" color="#A67939" />&nbsp;
{{ item.name }}
</div>
<div>
<van-icon name="arrow" size="1.2rem" />
</div>
</div>
<div class="index-nav">
<div class="nav-logo" @click="toHome">
<van-icon size="1.5rem" :name="icon_3" color="#A67939" />
首页
</div>
<div class="nav-logo" @click="toCode">
<van-icon size="5rem" :name="icon_4" color="#A67939" style="position: absolute; top: -4rem;" />
<van-icon size="1.5rem" name="wap-home" color="#FFF" style="opacity: 0;" />
预约码
</div>
<div class="nav-logo">
<van-icon size="1.5rem" :name="icon_5" color="#A67939" />
我的
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useGo } from '@/hooks/useGo'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import icon_1 from '@/assets/images/立即预约@2x.png'
import icon_2 from '@/assets/images/预约记录@2x.png'
import icon_3 from '@/assets/images/首页01@2x.png'
import icon_4 from '@/assets/images/二维码icon.png'
import icon_5 from '@/assets/images/我的02@2x.png'
import icon_6 from '@/assets/images/我的01@2x.png'
import icon_7 from '@/assets/images/二维码@2x2.png'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const go = useGo();
const toCode = () => { // 跳转到预约码
// go('/bookingCode');
window.location.replace(location.origin + location.pathname + '#/bookingCode');
}
const toHome = () => { // 跳转到首页
// go('/');
window.location.replace(location.origin + location.pathname + '#/');
}
const menu_list = [{
icon: icon_2,
name: '预约记录',
to: '/bookingList'
}, {
icon: icon_6,
name: '参观者',
to: '/me'
}, {
icon: icon_7,
name: '邀请码',
to: '/search'
}]
</script>
<style lang="less" scoped>
.my-page {
position: relative;
// height: 100vh;
.my-item {
padding: 1rem;
display: flex;
justify-content:space-between;
align-items: center;
margin: 1rem;
background-color: #FFF;
border-radius: 5px;
.left {
color: #A67939; display: flex; align-items: center;
}
}
.index-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: 10vh;
background: #FFFFFF;
box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
display: flex;
align-items: center;
justify-content: space-around;
color: #A67939;
.nav-logo {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
}
}
</style>
<!--
* @Date: 2024-01-15 11:43:01
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-25 09:15:53
* @LastEditTime: 2024-01-29 06:59:32
* @FilePath: /xysBooking/src/views/notice.vue
* @Description: 文件描述
-->
......@@ -12,7 +12,7 @@
<p>
为了您和他人的健康与安全，维护清净庄严的寺院环境，营造一个喜悦而祥和的节日氛围，请您留意并遵守以下注意事项：
</p>
<p>1、进寺后请全程佩戴口罩。</p>
<!-- <p>1、进寺后请全程佩戴口罩。</p>
<p>2、敬香贵在心诚，不在数量多少。请带着虔诚心、恭敬心和清净心敬香礼佛。</p>
<p>3、请不要自带香烛进寺院点燃，禁止燃放烟花爆竹。</p>
<p>4、山门殿两侧设有赠香处，凭香花券可免费领取三支清香。</p>
......@@ -21,10 +21,9 @@
<p>7、点燃后的香烛请放入指定的地点，禁止将香烛带入天王殿内。</p>
<p>8、请照看好身边的家人，以免走散或发生意外。</p>
<p>9、请保管好自己随身携带的钱物，以免丢失给您带来麻烦。</p>
<p>
10、您若有任何问题和困难，请向身边的法师或义工咨询、求助，或直接与客堂联系。电话：0512-65349545.
</p>
<p>11、预约如需退款，请在初七之后，到客堂办理。</p>
<p>10、您若有任何问题和困难，请向身边的法师或义工咨询、求助，或直接与客堂联系。电话：0512-65349545.</p>
<p>11、预约如需退款，请在初七之后，到客堂办理。</p> -->
<p v-for="(item, index) in note_text" :key="index">{{ item }}</p>
<p>谢谢您的支持与配合。祝您新春吉祥、万事如意</p>
</div>
<div style="height: 8rem"></div>
......@@ -70,7 +69,17 @@ const $router = useRouter();
useTitle($route.meta.title);
const go = useGo();
const note_text = [
'1、敬香贵在心诚，不在数量多少。三支清香，可表心诚。请带着虔诚心、恭敬心和清净心敬香礼佛。',
'2、请不要自带香烛进寺院。山门殿两侧设有赠香处，凭香花券可免费领取三支清香。',
'3、点燃香烛时请多加小心，以免灼伤自己与他人。',
'4、请在指定燃香处燃香，禁止将香烛带入殿堂。禁止燃放烟花爆竹。',
'5、请爱护公共绿地，请不要踩踏及在草坪上点烛燃香。',
'6、请照看好身边的家人，以免走散。',
'7、请保管好自己随身携带的钱物，以免丢失给您带来麻烦。',
'8、您若有任何问题和困难，请向身边的法师或义工咨询、求助，或直接与客堂联系。电话:0512-65349545。',
'9、预约如需退款，请在初七之后，到客堂办理。',
];
const checked = ref(["0"]);
const confirmBtn = () => {
......
<!--
* @Date: 2024-01-16 13:33:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-29 14:24:56
* @FilePath: /xysBooking/src/views/visitorList.vue
* @Description: 我的页面
-->
<template>
<div class="me-page">
<div class="me-content">
<div class="title">
<div class="text">参观者信息</div>
</div>
<div @click="() => { go('/addVisitor') }" class="add-visitors">
<div><van-icon name="plus" /> 添加参观者</div>
</div>
<div v-if="visitorList.length" class="visitors-list">
<div v-for="(item, index) in visitorList" :key="index" class="visitor-item">
<div>
<p style="color: #A67939;">{{ item.name }}</p>
<p>证件号：{{ formatId(item.id_number) }}</p>
</div>
<div @click="removeItem(item)" style="margin-left: 1rem;">
<van-icon name="https://cdn.ipadbiz.cn/xys/booking/%E5%88%A0%E9%99%A4@2x.png" />
</div>
</div>
</div>
<div v-else class="no-visitors-list">
<img src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem;">
<div class="no-visitors-list-title">您还没有添加过参观者</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useGo } from '@/hooks/useGo'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { showConfirmDialog } from 'vant';
import { showSuccessToast, showFailToast } from 'vant';
import { personListAPI, delPersonAPI } from '@/api/index'
import icon_1 from '@/assets/images/立即预约@2x.png'
import icon_2 from '@/assets/images/预约记录@2x.png'
import icon_3 from '@/assets/images/首页01@2x.png'
import icon_4 from '@/assets/images/二维码icon.png'
import icon_5 from '@/assets/images/我的02@2x.png'
const go = useGo();
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const toCode = () => { // 跳转到预约码
// go('/bookingCode');
window.location.replace(location.origin + location.pathname + '#/bookingCode');
}
const toHome = () => { // 跳转到首页
// go('/');
window.location.replace(location.origin + location.pathname + '#/');
}
const visitorList = ref([]);
/**
* 生成15位身份证号中间8位替换为*号
* @param {*} inputString
*/
function replaceMiddleCharacters(inputString) {
if (inputString.length < 15) {
return inputString; // 字符串长度不足，不进行替换
}
const start = Math.floor((inputString.length - 8) / 2); // 开始替换的索引位置
const end = start + 8; // 结束替换的索引位置
const replacement = '*'.repeat(8); // 生成包含8个*号的字符串
const replacedString = inputString.substring(0, start) + replacement + inputString.substring(end);
return replacedString;
}
const formatId = (id) => {
return replaceMiddleCharacters(id);
};
const removeItem = (item) => {
showConfirmDialog({
title: '温馨提示',
message: '是否确认删除参观者信息？',
confirmButtonColor: '#A67939',
width: '80vw'
})
.then(async () => {
// on confirm
const { code, data } = await delPersonAPI({ person_id: item.id });
if (code) {
showSuccessToast('删除成功');
visitorList.value = visitorList.value.filter((v) => v.id !== item.id);
}
})
.catch(() => {
// on cancel
});
}
onMounted(async () => {
const { code, data } = await personListAPI();
if (code) {
visitorList.value = data;
}
})
</script>
<style lang="less" scoped>
.me-page {
position: relative;
height: 100vh;
.me-content {
margin: 0 1rem;
.title {
padding: 0.5rem 0.75rem;
padding-top: 1rem;
padding-left: 0;
display: flex;
justify-content: space-between;
align-items: center;
.text {
&::before {
content: '';
border: 2px solid #A67939;
margin-right: 0.5rem;
}
}
.day {
background-color: #FFFBF3;
border-radius: 7px;
border: 1px solid #A67939;
padding: 0.2rem 0.5rem;
color: #A67939;
}
}
.add-visitors {
border: 1px dashed #A67939;
color: #A67939;
border-radius: 5px;
text-align: center;
padding: .65rem 0;
margin: 1rem 0;
font-size: 1.15rem;
}
.visitors-list {
.visitor-item {
background-color: #FFF;
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.no-visitors-list {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
img {
margin-top: 1rem;
margin-bottom: 1rem;
width: 10rem;
}
.no-visitors-list-title {
color: #A67939;
font-size: 1.05rem;
}
}
}
.index-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: 10vh;
background: #FFFFFF;
box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
display: flex;
align-items: center;
justify-content: space-around;
color: #A67939;
.nav-logo {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
}
}
</style>