Hooke / xysBooking

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f7c42956 1 parent a7bdcfd3

fix

Inline Side-by-side
Showing 6 changed files with 109 additions and 27 deletions
<!--
* @Date: 2024-01-15 17:39:29
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-16 17:08:33
* @LastEditTime: 2024-01-16 17:25:22
* @FilePath: /xysBooking/src/views/addVisitor.vue
* @Description: 文件描述
-->
......
<!--
* @Date: 2024-01-15 13:35:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-16 16:29:11
* @LastEditTime: 2024-01-16 17:44:34
* @FilePath: /xysBooking/src/views/booking.vue
* @Description: 预约页面
* @Version: 1.0.0
......@@ -40,8 +40,8 @@
:class="['time', !item.num ? 'disabled' : '']"
>
<div class="left">
<van-icon v-if="checked_time !== index" name="https://cdn.ipadbiz.cn/xys/booking/%E5%8D%95%E9%80%8901@2x.png" />&nbsp;
<van-icon v-else name="https://cdn.ipadbiz.cn/xys/booking/%E5%8D%95%E9%80%8902@2x.png" />&nbsp;
<van-icon v-if="checked_time !== index" :name="icon_select1" />&nbsp;
<van-icon v-else :name="icon_select2" />&nbsp;
{{ item.left }}
</div>
<div class="right">
......@@ -86,6 +86,8 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { useGo } from '@/hooks/useGo'
import icon_select1 from '@/assets/images/单选01@2x.png'
import icon_select2 from '@/assets/images/单选02@2x.png'
const $route = useRoute();
const $router = useRouter();
......
<!--
* @Date: 2023-06-21 10:23:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-16 16:15:12
* @LastEditTime: 2024-01-16 18:04:39
* @FilePath: /xysBooking/src/views/index.vue
* @Description: 预约页首页
-->
......@@ -17,11 +17,11 @@
</div>
<div class="index-control">
<div class="booking" @click="toBooking">
<van-icon size="1.5rem" color="#FFFFFF" name="https://cdn.ipadbiz.cn/xys/booking/%E7%AB%8B%E5%8D%B3%E9%A2%84%E7%BA%A6@2x.png" />
<van-icon size="1.5rem" color="#FFFFFF" :name="icon_1" />
&nbsp;立即预约
</div>
<div class="record" @click="toRecord">
<van-icon size="1.5rem" color="#A67939" name="https://cdn.ipadbiz.cn/xys/booking/%E9%A2%84%E7%BA%A6%E8%AE%B0%E5%BD%95@2x.png" />
<van-icon size="1.5rem" color="#A67939" :name="icon_2" />
&nbsp;预约记录
</div>
</div>
......@@ -29,16 +29,16 @@
</div>
<div class="index-nav">
<div class="nav-logo">
<van-icon size="1.5rem" name="https://cdn.ipadbiz.cn/xys/booking/%E9%A6%96%E9%A1%B502@2x.png" color="#A67939" />
<van-icon size="1.5rem" :name="icon_3" color="#A67939" />
首页
</div>
<div class="nav-logo" @click="toCode">
<van-icon size="5rem" name="https://cdn.ipadbiz.cn/xys/booking/%E4%BA%8C%E7%BB%B4%E7%A0%81@2x%20(1).png" color="#A67939" style="position: absolute; top: -4rem;" />
<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" @click="toMy">
<van-icon size="1.5rem" name="https://cdn.ipadbiz.cn/xys/booking/%E6%88%91%E7%9A%8401@2x.png" color="#A67939" />
<van-icon size="1.5rem" :name="icon_5" color="#A67939" />
我的
</div>
</div>
......@@ -55,6 +55,11 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
//import { } from '@/composables'
import { showSuccessToast, showFailToast } from 'vant';
import { useGo } from '@/hooks/useGo'
import icon_1 from '@/assets/images/立即预约@2x.png'
import icon_2 from '@/assets/images/预约记录@2x.png'
import icon_3 from '@/assets/images/首页02@2x.png'
import icon_4 from '@/assets/images/二维码icon.png'
import icon_5 from '@/assets/images/我的01@2x.png'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
......
<!--
* @Date: 2024-01-16 13:33:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-16 17:13:07
* @LastEditTime: 2024-01-17 07:03:58
* @FilePath: /xysBooking/src/views/me.vue
* @Description: 文件描述
-->
......@@ -13,17 +13,21 @@
<div @click="() => { go('/addVisitor') }" class="add-visitors">
<div><van-icon name="plus" /> 添加参观者</div>
</div>
<div class="visitors-list">
<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;">张雨燕</p>
<p>证件号：3101******234</p>
<p style="color: #A67939;">{{ item.name }}</p>
<p>证件号：{{ formatId(item.idCard) }}</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>
</template>
......@@ -31,7 +35,7 @@
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useGo } from '@/hooks/useGo'
import xctcCheck from "xctc-check"
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
......@@ -43,7 +47,33 @@ const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const visitorList = ref([{ id: '1', name: '张雨燕1', idCard: '3101******234' }, { id: '2', name: '张雨燕2', idCard: '3101******234' }, { id: '3',name: '张雨燕3', idCard: '3101******234' }, { id: '4',name: '张雨燕4', idCard: '3101******234' }]);
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) => {
if (id.length === 15) {
return replaceMiddleCharacters(id);
} else {
return xctcCheck.formatInfoHide(id)
}
};
const removeItem = (item) => {
showConfirmDialog({
......@@ -61,6 +91,15 @@ const removeItem = (item) => {
// on cancel
});
}
onMounted(() => {
visitorList.value = [
{ id: '1', name: '张雨燕1', idCard: '311522190103214', today: false },
{ id: '2', name: '张雨燕2', idCard: '311522190103214279', today: true },
{ id: '3',name: '张雨燕3', idCard: '311522190103214279', today: false },
{ id: '4',name: '张雨燕4', idCard: '311522190103214279', today: false }
];
})
</script>
<style lang="less" scoped>
......@@ -108,5 +147,20 @@ const removeItem = (item) => {
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;
}
}
}
</style>
......
<!--
* @Date: 2024-01-15 16:25:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-16 16:53:24
* @LastEditTime: 2024-01-16 18:19:12
* @FilePath: /xysBooking/src/views/submit.vue
* @Description: 文件描述
-->
......@@ -14,11 +14,11 @@
<div @click="goToVisitor" class="add-visitors">
<div><van-icon name="plus" /> 添加参观者</div>
</div>
<div class="visitors-list">
<div v-if="visitorList.length" class="visitors-list">
<div v-for="(item, index) in visitorList" :key="index" @click="addVisitor(item)" class="visitor-item">
<div style="margin-right: 1rem;">
<van-icon v-if="!checked_visitors.includes(item.id)" name="https://cdn.ipadbiz.cn/xys/booking/%E5%A4%9A%E9%80%8901@2x.png" />&nbsp;
<van-icon v-else name="https://cdn.ipadbiz.cn/xys/booking/%E5%A4%9A%E9%80%8902@2x.png" />&nbsp;
<van-icon v-if="!checked_visitors.includes(item.id)" :name="icon_check1" />&nbsp;
<van-icon v-else :name="icon_check2" />&nbsp;
</div>
<div>
<p style="color: #A67939;">{{ item.name }}</p>
......@@ -27,6 +27,10 @@
</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 style="height: 5rem;"></div>
<div class="submit-wrapper">
<div class="left">
......@@ -49,18 +53,15 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
//import { } from '@/composables'
import { useGo } from '@/hooks/useGo'
import { showSuccessToast, showFailToast, showToast } from 'vant';
import icon_check1 from '@/assets/images/多选01@2x.png'
import icon_check2 from '@/assets/images/多选02@2x.png'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const go = useGo();
const visitorList = ref([
{ id: '1', name: '张雨燕1', idCard: '311522190103214', today: false },
{ id: '2', name: '张雨燕2', idCard: '311522190103214279', today: true },
{ id: '3',name: '张雨燕3', idCard: '311522190103214279', today: false },
{ id: '4',name: '张雨燕4', idCard: '311522190103214279', today: false }
]);
const visitorList = ref([]);
/**
* 生成15位身份证号中间8位替换为*号
......@@ -126,7 +127,12 @@ const submitBtn = () => {
}
onMounted(() => {
visitorList.value = [
{ id: '1', name: '张雨燕1', idCard: '311522190103214', today: false },
{ id: '2', name: '张雨燕2', idCard: '311522190103214279', today: true },
{ id: '3',name: '张雨燕3', idCard: '311522190103214279', today: false },
{ id: '4',name: '张雨燕4', idCard: '311522190103214279', today: false }
];
});
</script>
......@@ -161,6 +167,21 @@ onMounted(() => {
align-items: center;
}
}
.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;
}
}
.submit-wrapper {
position: fixed;
bottom: 0;
......