Hooke / bieyuan

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
89d4a284 1 parent 0e0cd160

fix

Inline Side-by-side
Showing 5 changed files with 79 additions and 91 deletions
<!--
* @Date: 2023-06-13 13:26:46
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-25 17:33:44
* @LastEditTime: 2023-08-25 21:39:03
* @FilePath: /bieyuan/src/App.vue
* @Description: 文件描述
* @Description: 启动页
-->
<template>
<div class="bg-wrapper">
......@@ -72,11 +72,11 @@ onMounted(async () => {
<style lang="less">
@prefix: ~'@{namespace}-x';
html,
body {
// width: 100%;
// height: 100%;
}
// html,
// body {
// width: 100%;
// height: 100%;
// }
body {
position: relative;
......@@ -88,6 +88,7 @@ body {
// --van-blue: #F9D95C;
background-color: #F7EFEB;
p {
margin: 0;
padding: 0;
......@@ -112,22 +113,25 @@ body {
padding: 1rem;
padding-bottom: 0;
background-image: url('https://cdn.ipadbiz.cn/bieyuan/bg@2x~1.png');
background-repeat:no-repeat;
background-repeat: no-repeat;
}
.box-wrapper {
background: #FFFFFF;
box-shadow: 0px 0px 13px 0px rgba(95,69,54,0.25);
box-shadow: 0px 0px 13px 0px rgba(95, 69, 54, 0.25);
border-radius: 10px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
min-height: calc(100vh - 1rem);
.box-top {
padding: 0 1rem 1rem;
height: 1rem;
background-image: url('https://cdn.ipadbiz.cn/bieyuan/top@2x~1.png');
background-repeat:no-repeat;
background-repeat: no-repeat;
background-size: calc(100% - 2rem);
background-position: 1rem 0; /* 向右位移 1rem */
background-position: 1rem 0;
/* 向右位移 1rem */
}
}
</style>
......
<!--
* @Date: 2023-06-21 10:23:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-25 16:31:01
* @LastEditTime: 2023-08-25 21:39:47
* @FilePath: /bieyuan/src/views/index.vue
* @Description: 文件描述
* @Description: 预约页首页
-->
<template>
<div class="index-page">
......@@ -63,44 +63,37 @@
<div class="shortcut-bottom"></div>
<div class="bookingBox">
<van-row>
<van-col span="6" class="text">预约人数</van-col>
<van-col span="18" class="control">
<van-row style="line-height: 3rem;" gutter="10">
<van-col span="4" style="text-align: center;">
<div @click="clickMinus" class="minus">
<van-row>
<van-col span="6" class="text">预约人数</van-col>
<van-col span="18" class="control">
<van-row style="line-height: 3rem;" gutter="10">
<van-col span="4" style="text-align: center;">
<div @click="clickMinus" class="minus">
<van-icon size="0.85rem" name="https://cdn.ipadbiz.cn/bieyuan/-@2x.png" />
</div>
</van-col>
<van-col span="12" style="text-align: center;">
<input v-model="num" type="number" class="input_num">
</van-col>
<van-col span="4" style="text-align: center;">
<span>人</span>
</van-col>
<van-col span="4" style="text-align: center;">
<div @click="clickPlus" class="plus">
</van-col>
<van-col span="12" style="text-align: center;">
<input v-model="num" type="number" class="input_num">
</van-col>
<van-col span="4" style="text-align: center;">
<span>人</span>
</van-col>
<van-col span="4" style="text-align: center;">
<div @click="clickPlus" class="plus">
<van-icon size="0.85rem" name="https://cdn.ipadbiz.cn/bieyuan/+@2x.png" />
</div>
</van-col>
</van-row>
</van-col>
</van-row>
</div>
</van-col>
</van-row>
</van-col>
</van-row>
</div>
<div>
<div @click="clickNext" class="next-btn">下一步</div>
</div>
<van-calendar
v-model:show="show"
type="multiple"
:max-range="7"
:formatter="formatter"
:max-date="maxDate"
color="#93663D"
@confirm="onConfirm"
/>
<van-calendar v-model:show="show" type="multiple" :max-range="7" :formatter="formatter" :max-date="maxDate"
color="#93663D" @confirm="onConfirm" />
</div>
</template>
......@@ -290,17 +283,20 @@ const isMinValue = (array, value) => { // 判断输入值是否小于数组中
<style lang="less" scoped>
.index-page {
padding: 1rem 1rem 0;
.app-time {
padding-bottom: 0.5rem;
border-bottom: 1px solid #D7D7D7;
font-weight: bold;
font-size: 1.05rem;
}
.shortcut-wrapper {
padding-top: 2rem;
display: flex;
align-items: flex-end;
}
.shortcut-bottom {
width: 100%;
height: 4px;
......@@ -393,6 +389,7 @@ const isMinValue = (array, value) => { // 判断输入值是否小于数组中
display: inline-block;
}
// .input-box {
// width: 40%;
// display: inline-block;
......
<!--
* @Date: 2023-08-22 14:13:07
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-25 19:20:46
* @LastEditTime: 2023-08-25 21:39:23
* @FilePath: /bieyuan/src/views/next.vue
* @Description: 文件描述
* @Description: 预约用户信息录入页
-->
<template>
<div class="next-page">
......@@ -11,21 +11,26 @@
<div v-for="(item, index) in userInfo" :key="index" class="input-box">
<p class="title">{{ index + 1 }}.&nbsp;{{ index === 0 ? '我的信息' : '同行人' }}</p>
<van-field :id="'name' + index" v-model="item.name" label="姓名:" type="text" placeholder="请输入姓名" :border="false"
:rules="[{ required: true, message: '请填写姓名' }]" label-width="4em" class="input-text" @focus="onFocus" @keydown="handleKeyDown" />
<van-field :id="'phone' + index" v-model="item.phone" maxlength="11" label="手机号:" type="digit" placeholder="请输入手机号" :border="false"
:rules="[{ validator: validatorPhone, message: '请输入正确手机号' }]" label-width="4em" class="input-text" @focus="onFocus" @keydown="handleKeyDown" />
:rules="[{ required: true, message: '请填写姓名' }]" label-width="4em" class="input-text" @focus="onFocus"
@keydown="handleKeyDown" />
<van-field :id="'phone' + index" v-model="item.phone" maxlength="11" label="手机号:" type="digit"
placeholder="请输入手机号" :border="false" :rules="[{ validator: validatorPhone, message: '请输入正确手机号' }]"
label-width="4em" class="input-text" @focus="onFocus" @keydown="handleKeyDown" />
<van-field label="证件类型:" :border="false" label-width="4.5em">
<template #input>
<van-radio-group v-model="item.id_type" direction="horizontal" checked-color="#93663D" style="height: 2.5rem;">
<van-radio-group v-model="item.id_type" direction="horizontal" checked-color="#93663D"
style="height: 2.5rem;">
<van-radio name="id_card">身份证</van-radio>
<van-radio name="passport">护照</van-radio>
</van-radio-group>
</template>
</van-field>
<van-field :id="'id_type' + index" v-if="item.id_type === 'id_card'" v-model="item.id_number" label="身份证:" type="text" placeholder="请输入身份证号" :border="false"
:rules="[{ validator: validatorId, message: '请填写正确身份证号' }]" label-width="4em" class="input-text" @focus="onFocus" @keydown="handleKeyDown" />
<van-field :id="'id_type' + index" v-else v-model="item.id_number" label="护照:" type="text" placeholder="请输入护照号" :border="false"
:rules="[{ required: true, message: '请填写正确护照号' }]" label-width="4em" class="input-text" @focus="onFocus" @keydown="handleKeyDown" />
<van-field :id="'id_type' + index" v-if="item.id_type === 'id_card'" v-model="item.id_number" label="身份证:"
type="text" placeholder="请输入身份证号" :border="false" :rules="[{ validator: validatorId, message: '请填写正确身份证号' }]"
label-width="4em" class="input-text" @focus="onFocus" @keydown="handleKeyDown" />
<van-field :id="'id_type' + index" v-else v-model="item.id_number" label="护照:" type="text" placeholder="请输入护照号"
:border="false" :rules="[{ required: true, message: '请填写正确护照号' }]" label-width="4em" class="input-text"
@focus="onFocus" @keydown="handleKeyDown" />
</div>
<div style="padding: 2rem;">
<van-button block type="primary" color="#93663D" native-type="submit">
......@@ -53,12 +58,6 @@ useTitle($route.meta.title);
const store = mainStore();
const { appUserInfo } = storeToRefs(store);
// // 监听路由离开
// onBeforeRouteLeave((to, from, next) => {
// console.warn('leave');
// next()
// })
const userInfo = ref([]); // 用户预约信息
const num = ref(1);
const keyDownList = ref([]);
......
......@@ -26,8 +26,8 @@
<van-row style="line-height: 3rem;" gutter="10">
<van-col span="4" style="text-align: center;">
<div @click="clickMinus" class="minus">
<van-icon size="0.85rem" name="https://cdn.ipadbiz.cn/bieyuan/-@2x.png" />
</div>
<van-icon size="0.85rem" name="https://cdn.ipadbiz.cn/bieyuan/-@2x.png" />
</div>
</van-col>
<van-col span="12" style="text-align: center;">
<input v-model="num" type="number" class="input_num">
......@@ -37,8 +37,8 @@
</van-col>
<van-col span="4" style="text-align: center;">
<div @click="clickPlus" class="plus">
<van-icon size="0.85rem" name="https://cdn.ipadbiz.cn/bieyuan/+@2x.png" />
</div>
<van-icon size="0.85rem" name="https://cdn.ipadbiz.cn/bieyuan/+@2x.png" />
</div>
</van-col>
</van-row>
</van-col>
......@@ -49,16 +49,8 @@
<div @click="clickNext" class="next-btn">下一步</div>
</div>
<van-calendar
v-model:show="show"
:default-date="defaultDate"
type="multiple"
:max-range="7"
:formatter="formatter"
:max-date="maxDate"
color="#93663D"
@confirm="onConfirm"
/>
<van-calendar v-model:show="show" :default-date="defaultDate" type="multiple" :max-range="7" :formatter="formatter"
:max-date="maxDate" color="#93663D" @confirm="onConfirm" />
</div>
</template>
......@@ -85,7 +77,7 @@ onMounted(async () => {
if (localStorage.getItem('save_selected_dates')) { // 如果缓存过以缓存为先
dates = JSON.parse(localStorage.getItem('save_selected_dates'));
}
const { data } = await orderRestCountAPI({ dates: dates.join(',')});
const { data } = await orderRestCountAPI({ dates: dates.join(',') });
shortcut.value = data;
// 上一页选择的预约人数
num.value = $route.query.count ? +$route.query.count : 1;
......@@ -185,7 +177,7 @@ const onConfirm = async (dates) => {
defaultDate.value.push(dayjs(date).toDate())
});
// 后台请求数据
const { data } = await orderRestCountAPI({ dates : selectedDates.value.join(',') });
const { data } = await orderRestCountAPI({ dates: selectedDates.value.join(',') });
shortcut.value = data;
shortcut.value.forEach(item => {
item.checked = true;
......@@ -201,7 +193,7 @@ const clickMinus = () => { // 减少预约数
}
const clickPlus = () => { // 新增预约数
if (num.value.toString().length < 3) {
num.value = num.value + 1
num.value = num.value + 1
}
}
......@@ -337,6 +329,7 @@ const clickNext = () => { // 点击下一步按钮
display: inline-block;
}
// .input-box {
// width: 40%;
// display: inline-block;
......
......@@ -26,7 +26,8 @@
</van-col>
<van-col span="18" style="text-align: center;">
<div class="qr-box">
<van-icon size="13rem" :name="app_info_list[checkedIndex]?.qr_code" style="border: 1px dashed #93663D; width: 100%; overflow: hidden;" />
<van-icon size="13rem" :name="app_info_list[checkedIndex]?.qr_code"
style="border: 1px dashed #93663D; width: 100%; overflow: hidden;" />
</div>
</van-col>
<van-col span="3">
......@@ -68,36 +69,33 @@ onMounted(async () => {
if (data) {
// 预约日期集合
app_time.value = data.dates;
//
// 生成二维码列表
data.details.forEach((item, index) => {
app_info_list.value.push({
name: item.name,
checked: index ? false : true,
checked: index ? false : true, // 默认选中第一个
qr_code: 'http://oa.onwall.cn/admin?m=srv&a=get_qrcode&key=' + item.qrcode_content,
});
});
}
// TAG: 清除用户填写信息
store.changeUserInfo([]);
})
const app_time = ref([]);
const appTimeShow = computed(() => {
const appTimeShow = computed(() => { // 页面显示日期格式化
return app_time.value.join('，')
});
const handleLeftIcon = computed(() => {
const handleLeftIcon = computed(() => { // 左滚动图标切换
return checkedIndex.value === 0 ? 'https://cdn.ipadbiz.cn/bieyuan/left002@2x.png' : 'https://cdn.ipadbiz.cn/bieyuan/left001@2x.png'
});
const handleRightIcon = computed(() => {
const handleRightIcon = computed(() => { // 右滚动图标切换
return app_info_list.value.length - 1 === checkedIndex.value ? 'https://cdn.ipadbiz.cn/bieyuan/right002@2x.png' : 'https://cdn.ipadbiz.cn/bieyuan/right001@2x.png'
});
const app_info_list = ref([]);
const checkedIndex = ref(0);
const toggleItem = (item) => {
const toggleItem = (item) => { // 点击人名操作
app_info_list.value.forEach((info) => {
info.checked = false;
});
......@@ -107,13 +105,14 @@ const toggleItem = (item) => {
}
const show = ref(false);
const cancelApp = () => {
const cancelApp = () => { // 点击取消预约按钮
show.value = true;
nextTick(() => {
$('.van-popup.van-popup--center.van-dialog').css('width', '320px')
})
}
const onConfirm = async () => {
const onConfirm = async () => { // 确认取消预约
const { code } = await orderCancelAPI({ id: $route.query.id });
if (code) {
showSuccessToast('取消成功！');
......@@ -240,8 +239,4 @@ const handleRight = () => { // 右侧滚动
margin: 0 auto;
}
}
// .van-button--default {
// background: #93663D;
// }
</style>
......