hookehuyr

新增预约人员信息逻辑

<!--
* @Date: 2024-01-15 16:25:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-15 17:30:46
* @LastEditTime: 2024-01-16 15:39:18
* @FilePath: /xysBooking/src/views/submit.vue
* @Description: 文件描述
-->
<template>
<div class="submit-page">
<div class="visit-time">
<div @click="goToBooking" class="visit-time">
<div>参访时间</div>
<div>2024-01-10 05:00-08:00&nbsp;<van-icon name="arrow" /></div>
<div>{{ date }} {{ time }}&nbsp;<van-icon name="arrow" /></div>
</div>
<div class="add-visitors">
<div @click="goToVisitor" class="add-visitors">
<div><van-icon name="plus" /> 添加参观者</div>
</div>
<div class="visitors-list">
......@@ -31,10 +31,10 @@
<div class="submit-wrapper">
<div class="left">
<div style="margin-left: 1rem; display: flex;align-items: center;">
订单金额&nbsp;&nbsp;<div style="color: #FF1919;display: inline-block;">¥<div style="font-size: 1.5rem;display: inline-block;">50</div></div>
订单金额&nbsp;&nbsp;<div style="color: #FF1919;display: inline-block;">¥<div style="font-size: 1.5rem;display: inline-block;">&nbsp;{{ total }}</div></div>
</div>
</div>
<div class="right">提交订单</div>
<div @click="submitBtn" class="right">提交订单</div>
</div>
</div>
</template>
......@@ -47,10 +47,14 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { useGo } from '@/hooks/useGo'
import { showSuccessToast, showFailToast, showToast } from 'vant';
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const go = useGo();
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 checked_visitors = ref([]);
......@@ -61,6 +65,34 @@ const addVisitor = (item) => {
checked_visitors.value.push(item.id);
}
}
const date = $route.query.date;
const time = $route.query.time;
const price = $route.query.price;
const total = computed(() => {
return price * checked_visitors.value.length;
})
const goToBooking = () => {
go('/booking');
}
const goToVisitor = () => {
go('/addVisitor');
}
const submitBtn = () => {
if (!checked_visitors.value.length) {
showToast('请先添加参观者!')
} else {
// TODO: 提交订单跳转到支付页面
go('/success');
}
}
onMounted(() => {
});
</script>
<style lang="less" scoped>
......