Hooke / xyxBooking-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b08cf0b5 1 parent 1f4f60f3

refactor: 将px单位转换为rpx并优化样式结构 

style: 统一组件样式和布局规范

chore: 移除未使用的navBar组件

fix: 修复样式细节和布局问题

docs: 更新文件描述和注释信息
Inline Side-by-side
Showing 25 changed files with 403 additions and 647 deletions
......@@ -7,7 +7,6 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
NavBar: typeof import('./src/components/navBar.vue')['default']
NutButton: typeof import('@nutui/nutui-taro')['Button']
NutCheckbox: typeof import('@nutui/nutui-taro')['Checkbox']
NutCheckboxGroup: typeof import('@nutui/nutui-taro')['CheckboxGroup']
......
{
"name": "myApp",
"name": "xyxBooking",
"version": "1.0.0",
"private": true,
"description": "myApp",
"description": "西园寺预约",
"templateInfo": {
"name": "vue3-NutUI",
"typescript": false,
......
{
"miniprogramRoot": "./dist",
"projectname": "myApp",
"description": "myApp",
"appid": "touristappid",
"projectname": "xyxBooking",
"description": "西园寺预约",
"appid": "wxbf875033c6115304",
"setting": {
"urlCheck": true,
"es6": false,
......
{
"miniprogramRoot": "./",
"projectname": "myApp",
"description": "myApp",
"appid": "touristappid",
"projectname": "xyxBooking",
"description": "西园寺预约",
"appid": "wxbf875033c6115304",
"setting": {
"urlCheck": true,
"es6": false,
......
......@@ -5,7 +5,7 @@
left: 0;
top: 0;
width: 100%;
height: 10px;
height: 20rpx;
background-image: url('http://gyzs.onwall.cn/top-xian%402x.png');
background-size: contain;
}
......
<!--
* @Date: 2022-09-21 11:59:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-13 10:52:42
* @FilePath: /meihuaApp/src/components/navBar.vue
* @Description: 底部导航栏
-->
<template>
<view id="navbar-page" class="navbar-page">
<view @tap="goTo('index')" class="home">
<view style="height: 1.5rem;">
<IconFont :name="icon_home" size="1.5rem" color="" />
</view>
<view><text :style="homeStyle">首页</text></view>
</view>
<view @tap="goTo('book')" class="book">
<view style="height: 1.5rem;">
<IconFont :name="icon_book" size="1.5rem" color="" />
</view>
<view><text :style="bookStyle">订房</text></view>
</view>
<view @tap="goTo('serverInfo')" class="server">
<view style="height: 1.5rem;">
<IconFont :name="icon_server" size="1.5rem" color="" />
</view>
<view><text :style="serverStyle">服务</text></view>
</view>
<view @tap="goTo('my')" class="my">
<view style="height: 1.5rem;">
<IconFont :name="icon_my" size="1.5rem" color="" />
</view>
<view><text :style="myStyle">我的</text></view>
</view>
</view>
</template>
<script setup>
import Taro from '@tarojs/taro'
import { ref, defineProps, computed, onMounted } from 'vue'
import icon_home1 from '@/images/icon/icon_home1@2x.png'
import icon_home2 from '@/images/icon/icon_home2@2x.png'
import icon_my1 from '@/images/icon/icon_my1@2x.png'
import icon_my2 from '@/images/icon/icon_my2@2x.png'
import icon_book1 from '@/images/icon/icon_book1@2x.png'
import icon_book2 from '@/images/icon/icon_book2@2x.png'
import icon_server1 from '@/images/icon/icon_server1.png'
import icon_server2 from '@/images/icon/icon_server2.png'
// import { hostListAPI } from '@/api/Host/index'
import { IconFont } from '@nutui/icons-vue-taro';
const goTo = (page) => {
if (props.activated === page) {
return;
}
wx.redirectTo({
url: `../${page}/index`
});
}
// const createActivity = async () => {
// // 获取主办方列表信息
// const { code, data } = await hostListAPI();
// if (code) {
// if (!data.my_hosts.length) { // 主办方为空
// Taro.showModal({
// title: '温馨提示',
// content: '请先创建主办方后新建活动',
// success: function (res) {
// if (res.confirm) {
// Taro.navigateTo({
// url: '../createProject/index'
// });
// }
// }
// });
// } else {
// Taro.navigateTo({
// url: '../createActivity/index'
// })
// }
// }
// }
const currentPage = ref('');
onMounted(() => {
let pages = getCurrentPages();
let current_page = pages[pages.length - 1];
let url = current_page.route;
if (url == 'pages/index/index') {
currentPage.value = 'index'
} else {
currentPage.value = 'my'
}
})
const props = defineProps({
activated: String,
})
const homeStyle = ref({})
const myStyle = ref({})
const bookStyle = ref({})
const serverStyle = ref({})
const icon_home = computed(() => {
if (props.activated === 'index') {
return icon_home1
} else {
return icon_home2
}
})
const icon_my = computed(() => {
if (props.activated === 'my') {
return icon_my1
} else {
return icon_my2
}
})
const icon_book = computed(() => {
if (props.activated === 'book') {
return icon_book1
} else {
return icon_book2
}
})
const icon_server= computed(() => {
if (props.activated === 'serverInfo') {
return icon_server1
} else {
return icon_server2
}
})
if (props.activated === 'index') {
homeStyle.value = {
color: '#6A4925',
fontSize: '0.9rem'
}
myStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
bookStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
serverStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
} else if (props.activated === 'my') {
homeStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
myStyle.value = {
color: '#6A4925',
fontSize: '0.9rem'
}
bookStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
serverStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
} else if (props.activated === 'book') {
homeStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
myStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
bookStyle.value = {
color: '#6A4925',
fontSize: '0.9rem'
}
serverStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
} else if (props.activated === 'serverInfo') {
homeStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
myStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
bookStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
serverStyle.value = {
color: '#6A4925',
fontSize: '0.9rem'
}
}
</script>
<style lang="less">
.navbar-page {
position: fixed;
bottom: 0;
background-color: #FFFFFF;
padding-top: 0.5rem;
height: 5rem;
width: 100%;
.home {
position: absolute;
left: 10%;
transform: translateX(-15%);
text-align: center;
}
.book {
position: absolute;
left: 35%;
transform: translateX(-50%);
text-align: center;
}
.server {
position: absolute;
left: 60%;
transform: translateX(-50%);
text-align: center;
}
.my {
position: absolute;
left: 85%;
transform: translateX(-85%);
text-align: center;
}
}
</style>
......@@ -25,7 +25,7 @@
<image src="https://cdn.ipadbiz.cn/xys/booking/%E5%8F%B3@2x.png" />
</view>
</view>
<view style="color: red; margin-top: 1rem;">{{ userinfo.datetime }}</view>
<view style="color: red; margin-top: 32rpx;">{{ userinfo.datetime }}</view>
</view>
<view class="user-list">
<view
......@@ -42,9 +42,9 @@
</view>
</view>
<view v-else class="no-qrcode">
<image src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem; height: 10rem;" />
<image src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 320rpx; height: 320rpx;" />
<view class="no-qrcode-title">今天没有预约记录</view>
<view style="text-align: center; color: #A67939; margin-top: 0.5rem;">查看我的“<text @tap="toRecord" style="text-decoration: underline; color: #ED9820;">预约记录</text>”</view>
<view style="text-align: center; color: #A67939; margin-top: 16rpx;">查看我的“<text @tap="toRecord" style="text-decoration: underline; color: #ED9820;">预约记录</text>”</view>
</view>
</view>
</template>
......@@ -177,7 +177,7 @@ const init = async () => {
});
// 剔除qr_code为空的二维码
const validData = data.filter(item => item.qr_code !== '');
if (validData.length > 0) {
userList.value = formatGroup(validData);
refreshBtn();
......@@ -238,36 +238,36 @@ const toRecord = () => {
<style lang="less">
.qr-code-page {
.qrcode-content {
padding: 1rem 0;
padding: 32rpx 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #FFF;
border-radius: 8px;
box-shadow: 0rem 0rem 0.92rem 0rem rgba(106,106,106,0.27);
border-radius: 16rpx;
box-shadow: 0 0 29rpx 0 rgba(106,106,106,0.27);
.user-info {
color: #A6A6A6;
font-size: 1.15rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
font-size: 37rpx;
margin-top: 16rpx;
margin-bottom: 16rpx;
}
.user-qrcode {
display: flex;
align-items: center;
.left {
image {
width: 1.75rem; height: 1.75rem; margin-right: 0.5rem;
width: 56rpx; height: 56rpx; margin-right: 16rpx;
}
}
.center {
border: 1px solid #D1D1D1;
border-radius: 20px;
padding: 0.5rem;
border: 2rpx solid #D1D1D1;
border-radius: 40rpx;
padding: 16rpx;
position: relative;
image {
width: 15rem; height: 15rem;
width: 480rpx; height: 480rpx;
}
.qrcode-used {
position: absolute;
......@@ -275,9 +275,9 @@ const toRecord = () => {
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
border-radius: 40rpx;
overflow: hidden;
.overlay {
width: 100%;
height: 100%;
......@@ -285,14 +285,14 @@ const toRecord = () => {
background-size: contain;
opacity: 0.9;
}
.status-text {
color: #A67939;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.2rem;
font-size: 38rpx;
white-space: nowrap;
font-weight: bold;
z-index: 10;
......@@ -301,37 +301,37 @@ const toRecord = () => {
}
.right {
image {
width: 1.75rem; height: 1.75rem;
margin-left: 0.5rem;
width: 56rpx; height: 56rpx;
margin-left: 16rpx;
}
}
}
}
.user-list {
display: flex;
padding: 1rem;
padding: 32rpx;
align-items: center;
flex-wrap: wrap;
.user-item {
position: relative;
padding: 0.25rem 0.5rem;
border: 1px solid #A67939;
margin: 0.25rem;
border-radius: 5px;
padding: 8rpx 16rpx;
border: 2rpx solid #A67939;
margin: 8rpx;
border-radius: 10rpx;
color: #A67939;
&.checked {
color: #FFF;
background-color: #A67939;
}
&.border {
margin-right: 0.5rem;
margin-right: 16rpx;
&::after {
position: absolute;
right: -0.5rem;
top: calc(50% - 0.5rem);
right: -16rpx;
top: calc(50% - 16rpx);
content: '';
height: 1rem;
border-right: 1px solid #A67939;
height: 32rpx;
border-right: 2rpx solid #A67939;
}
}
}
......@@ -342,11 +342,11 @@ const toRecord = () => {
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 1rem;
margin-bottom: 32rpx;
.no-qrcode-title {
color: #A67939;
font-size: 1.05rem;
font-size: 34rpx;
}
}
}
......
<!--
* @Date: 2024-01-16 10:06:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-12-26 12:35:01
* @LastEditTime: 2026-01-06 23:06:49
* @FilePath: /xyxBooking-weapp/src/components/qrCodeSearch.vue
* @Description: 预约码卡组件
-->
......@@ -25,11 +25,11 @@
<!-- <image src="https://cdn.ipadbiz.cn/xys/booking/%E5%8F%B3@2x.png"> -->
</view>
</view>
<view style="color: red; margin-top: 1rem;">{{ userinfo.datetime }}</view>
<view style="color: red; margin-top: 32rpx;">{{ userinfo.datetime }}</view>
</view>
</view>
<view v-else class="no-qrcode">
<image src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem; height: 10rem;" />
<image src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 320rpx; height: 320rpx;" />
<view class="no-qrcode-title">您还没有预约过今天参观</view>
</view>
</view>
......@@ -88,7 +88,7 @@ onMounted(async () => {
item.datetime = formatDatetime({ begin_time: item.begin_time, end_time: item.end_time });
item.id = formatId(item.id_number);
userinfo.value = item;
const { code: status_code, data: status_data } = await qrcodeStatusAPI({ qr_code: item.qr_code });
if (status_code) {
useStatus.value = status_data.status;
......@@ -101,31 +101,31 @@ onMounted(async () => {
<style lang="less">
.qr-code-page {
.qrcode-content {
padding: 1rem 0;
padding: 32rpx 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #FFF;
border-radius: 8px;
box-shadow: 0rem 0rem 0.92rem 0rem rgba(106,106,106,0.27);
border-radius: 16rpx;
box-shadow: 0 0 29rpx 0 rgba(106,106,106,0.27);
.user-info {
color: #A6A6A6;
font-size: 1.15rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
font-size: 37rpx;
margin-top: 16rpx;
margin-bottom: 16rpx;
}
.user-qrcode {
display: flex;
align-items: center;
.center {
border: 1px solid #D1D1D1;
border-radius: 20px;
padding: 0.5rem;
border: 2rpx solid #D1D1D1;
border-radius: 40rpx;
padding: 16rpx;
position: relative;
image {
width: 15rem; height: 15rem;
width: 480rpx; height: 480rpx;
}
.qrcode-used {
position: absolute;
......@@ -133,9 +133,9 @@ onMounted(async () => {
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
border-radius: 40rpx;
overflow: hidden;
.overlay {
width: 100%;
height: 100%;
......@@ -143,14 +143,14 @@ onMounted(async () => {
background-size: contain;
opacity: 0.9;
}
.status-text {
color: #A67939;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.2rem;
font-size: 38rpx;
white-space: nowrap;
font-weight: bold;
z-index: 10;
......@@ -165,11 +165,11 @@ onMounted(async () => {
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 1rem;
margin-bottom: 32rpx;
.no-qrcode-title {
color: #A67939;
font-size: 1.05rem;
font-size: 34rpx;
}
}
}
......
......@@ -106,27 +106,27 @@ const goToDetail = (item) => {
<style lang="less">
.booking-list-item {
background-color: #FFF;
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
box-shadow: 0rem 0rem 0.92rem 0rem rgba(106,106,106,0.1);
border-radius: 16rpx;
padding: 32rpx;
margin-bottom: 32rpx;
box-shadow: 0 0 30rpx 0 rgba(106,106,106,0.1);
.booking-list-item-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 0.5rem;
border-bottom: 1px dashed #E6E6E6;
margin-bottom: 0.5rem;
font-size: 1rem;
padding-bottom: 16rpx;
border-bottom: 2rpx dashed #E6E6E6;
margin-bottom: 16rpx;
font-size: 32rpx;
font-weight: bold;
color: #333;
.status {
font-size: 0.85rem;
font-size: 27rpx;
font-weight: normal;
padding: 2px 6px;
border-radius: 4px;
padding: 4rpx 12rpx;
border-radius: 8rpx;
&.success {
color: #A67939;
......@@ -148,7 +148,7 @@ const goToDetail = (item) => {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
margin-bottom: 16rpx;
color: #666;
.num-body {
......@@ -160,8 +160,8 @@ const goToDetail = (item) => {
}
.booking-price, .booking-time {
color: #999;
font-size: 0.9rem;
margin-bottom: 0.3rem;
font-size: 29rpx;
margin-bottom: 10rpx;
text {
color: #333;
}
......
<!--
* @Date: 2024-01-15 16:35:10
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-29 17:35:19
* @LastEditTime: 2026-01-06 23:28:40
* @FilePath: /xyxBooking-weapp/src/pages/addVisitor/index.vue
* @Description: 添加参观者
-->
<template>
<view class="add-visitor-page">
<nut-form>
<nut-form-item label="姓名">
<nut-input v-model="name" placeholder="请输入参观者姓名" type="text" />
</nut-form-item>
<nut-form-item label="证件类型">
<view style="padding: 10px 0;">身份证</view>
</nut-form-item>
<nut-form-item label="证件号">
<nut-input v-model="id_number" placeholder="请输入参观者证件号" type="idcard" />
</nut-form-item>
</nut-form>
<view style="padding: 1rem;">
<nut-button type="primary" block color="#A67939" @click="save">保存</nut-button>
</view>
<view class="add-visitor-page">
<nut-form>
<nut-form-item label="姓名">
<nut-input v-model="name" placeholder="请输入参观者姓名" type="text" />
</nut-form-item>
<nut-form-item label="证件类型">
<view style="padding: 20rpx 0;">身份证</view>
</nut-form-item>
<nut-form-item label="证件号">
<nut-input v-model="id_number" placeholder="请输入参观者证件号" type="idcard" />
</nut-form-item>
</nut-form>
<view style="padding: 32rpx;">
<nut-button type="primary" block color="#A67939" @click="save">保存</nut-button>
</view>
<view v-if="visitorList.length" class="history-list">
<view class="title">历史参观者</view>
<view v-for="(item, index) in visitorList" :key="index" class="item">
<view class="info">
<view class="name">{{ item.name }}</view>
<view class="id">{{ formatId(item.id_number) }}</view>
<view v-if="visitorList.length" class="history-list">
<view class="title">历史参观者</view>
<view v-for="(item, index) in visitorList" :key="index" class="item">
<view class="info">
<view class="name">{{ item.name }}</view>
<view class="id">{{ formatId(item.id_number) }}</view>
</view>
<view class="action" @tap="delVisitor(item.id)">删除</view>
</view>
<view class="action" @tap="delVisitor(item.id)">删除</view>
</view>
</view>
</view>
</template>
<script setup>
......@@ -52,13 +52,13 @@ const checkIDCard = (idcode) => {
}
function replaceMiddleCharacters(inputString) {
if (!inputString || inputString.length < 15) {
return inputString;
}
const start = Math.floor((inputString.length - 8) / 2);
const end = start + 8;
const replacement = '*'.repeat(8);
return inputString.substring(0, start) + replacement + inputString.substring(end);
if (!inputString || inputString.length < 15) {
return inputString;
}
const start = Math.floor((inputString.length - 8) / 2);
const end = start + 8;
const replacement = '*'.repeat(8);
return inputString.substring(0, start) + replacement + inputString.substring(end);
}
const formatId = (id) => replaceMiddleCharacters(id);
......@@ -122,27 +122,27 @@ useDidShow(() => {
.add-visitor-page {
min-height: 100vh;
background-color: #F6F6F6;
padding-top: 1px;
padding-top: 2rpx;
.history-list {
margin-top: 1rem;
margin-top: 32rpx;
background-color: #FFF;
padding: 1rem;
padding: 32rpx;
.title {
font-size: 1rem;
font-size: 32rpx;
color: #333;
margin-bottom: 1rem;
border-left: 3px solid #A67939;
padding-left: 0.5rem;
margin-bottom: 32rpx;
border-left: 6rpx solid #A67939;
padding-left: 16rpx;
}
.item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
border-bottom: 1px solid #EEE;
padding: 32rpx 0;
border-bottom: 2rpx solid #EEE;
&:last-child {
border-bottom: none;
......@@ -150,19 +150,20 @@ useDidShow(() => {
.info {
.name {
font-size: 1rem;
font-size: 32rpx;
color: #333;
margin-bottom: 0.3rem;
margin-bottom: 10rpx;
}
.id {
font-size: 0.9rem;
font-size: 29rpx;
color: #999;
}
}
.action {
color: #FF0000;
font-size: 0.9rem;
font-size: 29rpx;
}
}
}
......
......@@ -28,7 +28,7 @@ useDidShow(() => {
<style lang="less">
.auth-page {
height: 100vh;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
......
<!--
* @Date: 2024-01-15 13:35:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-02-05 16:57:15
* @LastEditTime: 2026-01-06 23:00:39
* @FilePath: /xyxBooking-weapp/src/pages/booking/index.vue
* @Description: 预约页面
-->
......@@ -64,12 +64,12 @@
<view class="title">
<view class="text">选择参访时间段</view>
</view>
<view style="padding: 1.5rem 0.75rem; color: #A67939; text-align: center;">
<view style="padding: 48rpx 24rpx; color: #A67939; text-align: center;">
暂未开启预约
</view>
</view>
</view>
<view style="height: 5rem;"></view>
<view style="height: 160rpx;"></view>
<view v-if="checked_day && checked_day_reserve_full === ReserveStatus.AVAILABLE" class="next">
<view @tap="nextBtn" class="button" style="background-color: #A67939;">下一步</view>
</view>
......@@ -292,44 +292,44 @@ const nextBtn = () => {
.booking-page {
position: relative;
.calendar {
padding: 1rem 0.5rem;
padding: 32rpx 16rpx;
.choose-date {
border-radius: 5px;
border-radius: 10rpx;
background-color: #FFFFFF;
.title {
padding: 0.5rem 0.75rem;
padding: 16rpx 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
.text {
&::before {
content: '';
border: 2px solid #A67939;
margin-right: 0.5rem;
border: 4rpx solid #A67939;
margin-right: 16rpx;
}
}
.day {
background-color: #FFFBF3;
border-radius: 7px;
border: 1px solid #A67939;
padding: 0.2rem 0.5rem;
border-radius: 14rpx;
border: 2rpx solid #A67939;
padding: 6rpx 16rpx;
color: #A67939;
}
}
.days-of-week {
background-color: #EAEAEA;
display: flex;
padding: 0.75em 1%;
font-size: 0.85rem;
padding: 24rpx 1%;
font-size: 27rpx;
.item {
width: 14.5%;
text-align: center;
}
}
.weeks-wrapper {
padding: 0.5rem 0;
padding: 16rpx 0;
}
.weeks {
display: flex;
......@@ -338,32 +338,32 @@ const nextBtn = () => {
width: 14.28%; // 100 / 7
// width: 11.5%;
text-align: center;
margin: 0 0.3rem;
padding: 0.5rem 0;
border: 1px solid #FFF;
margin: 0 10rpx;
padding: 16rpx 0;
border: 2rpx solid #FFF;
.day-lunar {
color: #1E1E1E;
font-size: 0.85rem;
margin-bottom: 5px;
font-size: 27rpx;
margin-bottom: 10rpx;
}
.day-text {
color: #1E1E1E;
font-weight: bold;
font-size: 1.05rem;
font-size: 34rpx;
}
.day-price {
color: #A67939;
font-size: 0.85rem;
font-size: 27rpx;
}
&.checked {
border: 1px solid #A67939;
border-radius: 5px;
border: 2rpx solid #A67939;
border-radius: 10rpx;
background-color: #FFFBF3;
}
&.disabled {
.day-lunar {
color: #C7C7C7;
margin-bottom: 5px;
margin-bottom: 10rpx;
}
.day-text {
color: #C7C7C7;
......@@ -373,24 +373,24 @@ const nextBtn = () => {
}
.day-no-booking {
color: #C7C7C7;
font-size: 0.75rem;
font-size: 24rpx;
}
}
}
}
}
.choose-time {
margin-top: 1rem;
margin-top: 32rpx;
.title {
padding: 0.5rem 0.75rem;
padding: 16rpx 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
.text {
&::before {
content: '';
border: 2px solid #A67939;
margin-right: 0.5rem;
border: 4rpx solid #A67939;
margin-right: 16rpx;
}
}
}
......@@ -400,21 +400,21 @@ const nextBtn = () => {
align-items: center;
justify-content: space-between;
background-color: #FFF;
border-radius: 5px;
padding: 0.85rem;
margin: 1rem 0;
border-radius: 10rpx;
padding: 27rpx;
margin: 32rpx 0;
.left {
display: flex;
align-items: center;
color: #1E1E1E;
.icon {
width: 1.2rem;
height: 1.2rem;
margin-right: 0.5rem;
width: 38rpx;
height: 38rpx;
margin-right: 16rpx;
}
.price {
color:#A67939;
margin-left: 0.5rem;
margin-left: 16rpx;
}
}
.right {
......@@ -439,22 +439,22 @@ const nextBtn = () => {
.next {
position: fixed;
bottom: 0;
height: 5rem;
width: 100vw;
height: 160rpx;
width: 750rpx;
display: flex;
left: 0;
background-color: #FFF;
align-items: center;
justify-content: center;
box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
box-shadow: 0 -10rpx 8rpx 0 rgba(0,0,0,0.12);
.button {
color: #FFF;
padding: 0.85rem 0;
border-radius: 8px;
font-size: 1.1rem;
padding: 27rpx 0;
border-radius: 16rpx;
font-size: 35rpx;
text-align: center;
flex-grow: 1;
margin: 1rem;
margin: 32rpx;
}
}
}
......
......@@ -7,25 +7,25 @@
-->
<template>
<view class="booking-code-page">
<view style="padding: 1rem;">
<view style="padding: 32rpx;">
<qrCode></qrCode>
<view class="warning">
<view><IconFont name="tips" />&nbsp;温馨提示</view>
<view style="margin-top: 0.5rem;">一人一码，扫码或识别身份证成功后进入</view>
<view style="height: 8rem;"></view>
<view style="margin-top: 16rpx;">一人一码，扫码或识别身份证成功后进入</view>
<view style="height: 256rpx;"></view>
</view>
</view>
<view class="index-nav">
<view class="nav-logo" @tap="toHome">
<image :src="icon_3" style="width: 1.5rem; height: 1.5rem;" />
<image :src="icon_3" style="width: 48rpx; height: 48rpx;" />
首页
</view>
<view class="nav-logo">
<image :src="icon_4" style="width: 1.5rem; height: 1.5rem; margin-bottom: 0.1rem;" />
<image :src="icon_4" style="width: 48rpx; height: 48rpx; margin-bottom: 3rpx;" />
预约码
</view>
<view class="nav-logo" @tap="toMy">
<image :src="icon_5" style="width: 1.5rem; height: 1.5rem;" />
<image :src="icon_5" style="width: 48rpx; height: 48rpx;" />
我的
</view>
</view>
......@@ -62,17 +62,17 @@ const toHome = () => { // 跳转到首页
.warning {
text-align: center;
color: #A67939;
margin-top: 1rem;
margin-top: 32rpx;
}
.index-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: 10vh;
width: 750rpx;
height: 134rpx;
background: #FFFFFF;
box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
box-shadow: 0 -10rpx 8rpx 0 rgba(0,0,0,0.12);
display: flex;
align-items: center;
justify-content: space-around;
......
......@@ -34,7 +34,7 @@
<view>{{ qrCodeStatusText }}</view>
</view>
</view>
<view style="height: 5rem;"></view>
<view style="height: 160rpx;"></view>
<view v-if="billInfo.status === CodeStatus.SUCCESS && billInfo.show_cancel_reserve === 1" class="cancel-wrapper">
<view @tap="cancelBooking" class="cancel-btn ">取消预约</view>
</view>
......@@ -83,7 +83,7 @@ const cancelBooking = async () => {
content: '是否取消预约？',
confirmColor: '#A67939'
});
if (confirm) {
Taro.showLoading({ title: '取消中...' });
const { code, data } = await icbcRefundAPI({ pay_id: pay_id.value });
......@@ -114,29 +114,29 @@ useDidShow(async () => {
.booking-detail-page {
min-height: 100vh;
background-color: #F6F6F6;
padding: 1rem;
padding: 32rpx;
.detail-wrapper {
background-color: #FFF;
border-radius: 8px;
padding: 1rem;
margin-top: 1rem;
box-shadow: 0rem 0rem 0.92rem 0rem rgba(106,106,106,0.1);
border-radius: 16rpx;
padding: 32rpx;
margin-top: 32rpx;
box-shadow: 0 0 29rpx 0 rgba(106,106,106,0.1);
.detail-item {
display: flex;
justify-content: space-between;
margin-bottom: 0.8rem;
margin-bottom: 26rpx;
color: #333;
font-size: 0.95rem;
font-size: 30rpx;
&:last-child {
margin-bottom: 0;
}
view:first-child {
color: #999;
width: 5rem;
width: 160rpx;
}
view:last-child {
flex: 1;
......@@ -144,24 +144,24 @@ useDidShow(async () => {
}
}
}
.cancel-wrapper {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
width: 750rpx;
background-color: #FFF;
padding: 1rem;
padding: 32rpx;
box-sizing: border-box;
.cancel-btn {
background-color: #FFF;
color: #A67939;
border: 1px solid #A67939;
border: 2rpx solid #A67939;
text-align: center;
padding: 0.8rem 0;
border-radius: 8px;
font-size: 1.1rem;
padding: 26rpx 0;
border-radius: 16rpx;
font-size: 35rpx;
}
}
}
......
......@@ -11,11 +11,11 @@
<reserveCard :data="item" />
</view>
<view v-if="loading" style="text-align: center; color: #999; padding: 10px;">加载中...</view>
<view v-if="finished && bookingList.length > 0" style="text-align: center; color: #999; padding: 10px;">没有更多了</view>
<view v-if="loading" style="text-align: center; color: #999; padding: 20rpx;">加载中...</view>
<view v-if="finished && bookingList.length > 0" style="text-align: center; color: #999; padding: 20rpx;">没有更多了</view>
<view v-if="!bookingList.length && finished" class="no-qrcode">
<image src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem; height: 10rem;" />
<image src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 320rpx; height: 320rpx;" />
<view class="no-qrcode-title">您还没有预约过参观</view>
</view>
</view>
......@@ -78,7 +78,7 @@ useReachBottom(() => {
<style lang="less">
.booking-list-page {
padding: 1rem;
padding: 32rpx;
min-height: 100vh;
background-color: #F6F6F6;
......@@ -87,12 +87,12 @@ useReachBottom(() => {
justify-content: center;
align-items: center;
flex-direction: column;
padding-top: 5rem;
padding-top: 160rpx;
.no-qrcode-title {
color: #A67939;
font-size: 1.05rem;
margin-top: 1rem;
font-size: 34rpx;
margin-top: 32rpx;
}
}
}
......
......@@ -14,7 +14,7 @@
<view class="info-item">参访时间：<text>{{ billInfo?.datetime || '--' }}</text></view>
<view class="info-item">支付金额：<text>¥ {{ billInfo?.total_amt || 0 }}</text></view>
</view>
<view style="padding: 0.5rem; display: flex; justify-content: center; margin-top: 1rem;">
<view style="padding: 16rpx; display: flex; justify-content: center; margin-top: 32rpx;">
<nut-button color="#A67939" size="small" @click="returnMerchant">返回首页</nut-button>
</view>
</view>
......@@ -43,7 +43,7 @@ const out_trade_no = router.params.out_trade_no
const getBillInfo = async () => {
if (!out_trade_no) return
try {
// Get order details
const { code, data } = await onAuthBillInfoAPI({ order_id: out_trade_no })
......@@ -69,43 +69,43 @@ onMounted(() => {
<style lang="less">
.callback-page {
padding: 1rem;
padding: 32rpx;
background: #fff;
min-height: 100vh;
.text-prompts {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 2rem;
padding-top: 2rem;
margin-bottom: 64rpx;
padding-top: 64rpx;
.status-icon {
width: 100px;
height: 100px;
width: 200rpx;
height: 200rpx;
}
.text {
margin-top: 1rem;
font-size: 1.2rem;
margin-top: 32rpx;
font-size: 38rpx;
color: #333;
}
}
.appointment-information {
background: #f8f8f8;
padding: 1rem;
border-radius: 8px;
padding: 32rpx;
border-radius: 16rpx;
.info-item {
margin-bottom: 0.5rem;
font-size: 0.9rem;
margin-bottom: 16rpx;
font-size: 29rpx;
color: #666;
text {
color: #333;
font-weight: 500;
margin-left: 0.5rem;
margin-left: 16rpx;
}
}
}
......
......@@ -2,9 +2,9 @@
* index页面样式
*/
.index {
padding: 20px;
padding: 40rpx;
.nut-button {
margin-bottom: 20px;
margin-bottom: 40rpx;
}
}
\ No newline at end of file
}
......
<!--
* @Date: 2023-06-21 10:23:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-02-05 18:36:21
* @FilePath: /xysBooking/src/views/index.vue
* @LastEditTime: 2026-01-06 23:01:43
* @FilePath: /xyxBooking-weapp/src/pages/index/index.vue
* @Description: 预约页首页
-->
<template>
<view class="index-page">
<view class="index-content">
<view style="height: 30vh;">
<view style="height: 400rpx;">
<swiper class="my-swipe" :autoplay="true" :interval="3000" indicator-dots indicator-color="white" :circular="true">
<swiper-item>
<image style="height: 30vh; width: 100vw;" src="https://cdn.ipadbiz.cn/xys/booking/banner.jpg" mode="aspectFill" />
<image style="height: 400rpx; width: 750rpx;" src="https://cdn.ipadbiz.cn/xys/booking/banner.jpg" mode="aspectFill" />
</swiper-item>
</swiper>
</view>
<view ref="root" class="index-circular">
<view class="booking-wrapper">
<view class="booking" @tap="toBooking">
<view><image :src="icon_1" style="width: 3rem; height: 3rem;" /></view>
<view><image :src="icon_1" style="width: 96rpx; height: 96rpx;" /></view>
<view style="color: #FFF;">开始预约</view>
</view>
</view>
......@@ -28,16 +28,16 @@
</view>
<view class="index-nav">
<view class="nav-logo">
<image :src="icon_3" style="width: 1.5rem; height: 1.5rem;" />
<image :src="icon_3" style="width: 48rpx; height: 48rpx;" />
首页
</view>
<view class="nav-logo" @tap="toCode">
<image :src="icon_4" style="width: 5rem; height: 5rem; position: absolute; top: -4rem;" />
<!-- <van-icon size="1.5rem" name="wap-home" color="#FFF" style="opacity: 0;" /> -->
<image :src="icon_4" style="width: 160rpx; height: 160rpx; position: absolute; top: -170rpx;" />
<!-- <van-icon size="48rpx" name="wap-home" color="#FFF" style="opacity: 0;" /> -->
预约码
</view>
<view class="nav-logo" @tap="toMy">
<image :src="icon_5" style="width: 1.5rem; height: 1.5rem;" />
<image :src="icon_5" style="width: 48rpx; height: 48rpx;" />
我的
</view>
</view>
......@@ -93,51 +93,51 @@ useShareAppMessage(() => {
<style lang="less">
.index-page {
position: relative;
height: 100vh;
min-height: 100vh;
background-image: url('https://cdn.ipadbiz.cn/xys/booking/bg.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover; /* 确保背景覆盖 */
.index-content {
height: 90vh;
height: calc(100vh - 134rpx);
.index-control {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 10vh;
margin-top: 130rpx;
// font-weight: bold;
font-size: 1.15rem;
font-size: 37rpx;
.booking {
display: flex;
justify-content: center;
align-items: center;
background-color: #A67939;
border-radius: 7px;
border-radius: 14rpx;
color: #FFFFFF;
padding: 0.7rem 4rem;
border: 1px solid #A67939;
padding: 22rpx 128rpx;
border: 2rpx solid #A67939;
}
.record {
display: flex;
justify-content: center;
align-items: center;
color: #A67939;
border-radius: 7px;
padding: 0.7rem 4rem;
border: 1px solid #A67939;
margin-top: 1.5rem;
border-radius: 14rpx;
padding: 22rpx 128rpx;
border: 2rpx solid #A67939;
margin-top: 48rpx;
}
.search {
display: flex;
justify-content: center;
align-items: center;
color: #A67939;
border-radius: 7px;
padding: 0.7rem 4rem;
border: 1px solid #A67939;
margin-top: 1.5rem;
border-radius: 14rpx;
padding: 22rpx 128rpx;
border: 2rpx solid #A67939;
margin-top: 48rpx;
}
}
.index-circular {
......@@ -145,21 +145,21 @@ useShareAppMessage(() => {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10vh;
margin-top: 130rpx;
// font-weight: bold;
font-size: 1.1rem;
font-size: 35rpx;
.booking-wrapper {
height: 19vh;
width: 19vh;
height: 260rpx;
width: 260rpx;
border-radius: 50%;
background-color: rgba(166, 121, 57, 0.26);
display: flex;
align-items: center;
justify-content: center;
.booking {
height: 17vh;
width: 17vh;
height: 230rpx;
width: 230rpx;
border-radius: 50%;
background-color: #A67939;
display: flex;
......@@ -172,9 +172,9 @@ useShareAppMessage(() => {
.logo {
position: absolute;
right: 0;
bottom: calc(15vh);
height: 30vh;
width: 20vw;
bottom: 200rpx;
height: 400rpx;
width: 150rpx;
background-image: url('https://cdn.ipadbiz.cn/xys/booking/logo.png');
background-repeat: no-repeat;
background-size: contain;
......@@ -182,10 +182,10 @@ useShareAppMessage(() => {
}
}
.my-swipe {
height: 30vh;
height: 400rpx;
swiper-item { /* Taro swiper-item 编译后 */
height: 30vh;
width: 100vw;
height: 400rpx;
width: 750rpx;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
......@@ -195,10 +195,10 @@ useShareAppMessage(() => {
position: absolute;
bottom: 0;
left: 0;
width: 100vw;
height: 10vh;
width: 750rpx;
height: 134rpx;
background: #FFFFFF;
box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
box-shadow: 0 -10rpx 8rpx 0 rgba(0,0,0,0.12);
display: flex;
align-items: center;
justify-content: space-around;
......
......@@ -2,24 +2,24 @@
<view class="my-page">
<view v-for="(item, index) in menu_list" :key="index" class="my-item" @tap="go(item.to)">
<view class="left">
<image :src="item.icon" style="width: 1.2rem; height: 1.2rem; margin-right: 0.5rem;" />
<image :src="item.icon" style="width: 38rpx; height: 38rpx; margin-right: 16rpx;" />
{{ item.name }}
</view>
<view>
<IconFont name="rect-right" size="1.2rem" />
<IconFont name="rect-right" size="38rpx" />
</view>
</view>
<view class="index-nav">
<view class="nav-logo" @tap="toHome">
<image :src="icon_3" style="width: 1.5rem; height: 1.5rem;" />
<image :src="icon_3" style="width: 48rpx; height: 48rpx;" />
首页
</view>
<view class="nav-logo" @tap="toCode">
<image :src="icon_4" style="width: 1.5rem; height: 1.5rem; margin-bottom: 0.1rem;" />
<image :src="icon_4" style="width: 48rpx; height: 48rpx; margin-bottom: 3rpx;" />
预约码
</view>
<view class="nav-logo">
<image :src="icon_5" style="width: 1.5rem; height: 1.5rem;" />
<image :src="icon_5" style="width: 48rpx; height: 48rpx;" />
我的
</view>
</view>
......@@ -68,16 +68,16 @@ const menu_list = [{
position: relative;
min-height: 100vh;
background-color: #F6F6F6;
padding: 1rem;
padding: 32rpx;
.my-item {
padding: 1rem;
padding: 32rpx;
display: flex;
justify-content:space-between;
align-items: center;
margin-bottom: 1rem;
margin-bottom: 32rpx;
background-color: #FFF;
border-radius: 5px;
border-radius: 10rpx;
.left {
color: #A67939;
display: flex;
......@@ -88,10 +88,10 @@ const menu_list = [{
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: 10vh;
width: 750rpx;
height: 134rpx;
background: #FFFFFF;
box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
box-shadow: 0 -10rpx 8rpx 0 rgba(0,0,0,0.12);
display: flex;
align-items: center;
justify-content: space-around;
......
......@@ -8,18 +8,18 @@
<template>
<view class="notice-page">
<view class="content">
<view style="text-align: center; font-size: 1.1rem; margin-bottom: 0.5rem;">温馨提示</view>
<view style="text-align: center; font-size: 35rpx; margin-bottom: 16rpx;">温馨提示</view>
<view>
为了您和他人的健康与安全，维护清净庄严的寺院环境，营造一个喜悦而祥和的节日氛围，请您留意并遵守以下注意事项：
</view>
<view v-for="(item, index) in note_text" :key="index" style="margin-top: 0.5rem;">{{ item }}</view>
<view style="margin-top: 0.5rem;">谢谢您的支持与配合。祝您新春吉祥、万事如意。</view>
<view v-for="(item, index) in note_text" :key="index" style="margin-top: 16rpx;">{{ item }}</view>
<view style="margin-top: 16rpx;">谢谢您的支持与配合。祝您新春吉祥、万事如意。</view>
</view>
<view style="height: 8rem"></view>
<view style="height: 256rpx"></view>
<view class="footer">
<nut-checkbox-group v-model="checked">
<nut-checkbox label="1" icon-size="1rem">
<text style="color: #a67939; font-size: 1rem">我已阅读并同意以上内容</text>
<nut-checkbox label="1" icon-size="32rpx">
<text style="color: #a67939; font-size: 32rpx">我已阅读并同意以上内容</text>
</nut-checkbox>
</nut-checkbox-group>
<view @tap="confirmBtn" class="confirm-btn">确认，下一步</view>
......@@ -60,35 +60,35 @@ const confirmBtn = () => {
position: relative;
min-height: 100vh;
background-color: #F6F6F6;
padding-top: 1px; // 防止 margin collapse
padding-top: 2rpx; // 防止 margin collapse
.content {
margin: 1rem;
margin: 32rpx;
background-color: #ffffff;
border-radius: 8px;
padding: 1rem;
border-radius: 16rpx;
padding: 32rpx;
color: #333;
font-size: 0.9rem;
font-size: 29rpx;
line-height: 1.5;
}
.footer {
position: fixed;
bottom: 0;
width: 100vw;
width: 750rpx;
background-color: #FFF;
display: flex;
flex-direction: column;
padding: 1rem;
padding: 32rpx;
box-sizing: border-box;
box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
box-shadow: 0 -10rpx 8rpx 0 rgba(0,0,0,0.12);
.confirm-btn {
background-color: #A67939;
color: #FFF;
text-align: center;
padding: 0.8rem 0;
border-radius: 8px;
margin-top: 1rem;
font-size: 1.1rem;
padding: 26rpx 0;
border-radius: 16rpx;
margin-top: 32rpx;
font-size: 35rpx;
}
}
}
......
<!--
* @Date: 2024-01-26 13:08:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-30 17:51:11
* @LastEditTime: 2026-01-06 23:23:30
* @FilePath: /xyxBooking-weapp/src/pages/search/index.vue
* @Description: 文件描述
-->
......@@ -15,11 +15,11 @@
<input type="text" v-model="idCode" placeholder="请输入证件号码" @blur="checkIdCode" maxlength="18" style="width: 100%;">
</view>
</view>
<view style="color:#A67939; font-size: 0.95rem; text-align: center;">
<view style="color:#A67939; font-size: 30rpx; text-align: center;">
<view>
<IconFont name="tips" />&nbsp;温馨提示
</view>
<view style="margin-top: 0.5rem;">获取参观码，扫码或识别身份证成功进闸机</view>
<view style="margin-top: 16rpx;">获取参观码，扫码或识别身份证成功进闸机</view>
</view>
</view>
<view v-else>
......@@ -85,42 +85,42 @@ const goToHome = () => {
<style lang="less">
.search-page {
padding: 1rem;
padding: 32rpx;
min-height: 100vh;
background-color: #F6F6F6;
.input-item {
background-color: #FFF;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
padding: 32rpx;
border-radius: 16rpx;
margin-bottom: 32rpx;
view:first-child {
margin-bottom: 0.5rem;
margin-bottom: 16rpx;
font-weight: bold;
}
input {
border-bottom: 1px solid #EEE;
padding: 0.5rem 0;
border-bottom: 2rpx solid #EEE;
padding: 16rpx 0;
}
}
.save-wrapper {
margin-top: 2rem;
margin-top: 64rpx;
.save-btn {
background-color: #A67939;
color: #FFF;
text-align: center;
padding: 0.8rem 0;
border-radius: 8px;
font-size: 1.1rem;
padding: 26rpx 0;
border-radius: 16rpx;
font-size: 35rpx;
}
}
.success-btn {
position: fixed;
bottom: 2rem;
width: 100vw;
bottom: 64rpx;
width: 750rpx;
left: 0;
display: flex;
justify-content: space-around;
......@@ -128,13 +128,13 @@ const goToHome = () => {
.btn-item {
width: 40%;
text-align: center;
padding: 0.8rem 0;
border-radius: 8px;
font-size: 1.1rem;
padding: 26rpx 0;
border-radius: 16rpx;
font-size: 35rpx;
}
.btn-left {
border: 1px solid #A67939;
border: 2rpx solid #A67939;
color: #A67939;
background-color: #FFF;
}
......@@ -148,9 +148,9 @@ const goToHome = () => {
.logo {
position: absolute;
right: 0;
bottom: 15vh;
height: 30vh;
width: 20vw;
bottom: 200rpx;
height: 400rpx;
width: 150rpx;
background-image: url('https://cdn.ipadbiz.cn/xys/booking/logo.png');
background-repeat: no-repeat;
background-size: contain;
......
......@@ -9,39 +9,39 @@
<view class="submit-page">
<view @tap="goToBooking" class="visit-time">
<view>参访时间</view>
<view><text style="font-size: 0.95rem;">{{ date }} {{ time }}</text>&nbsp;<IconFont name="rect-right" /></view>
<view><text style="font-size: 30rpx;">{{ date }} {{ time }}</text>&nbsp;<IconFont name="rect-right" /></view>
</view>
<view @tap="goToVisitor" class="add-visitors">
<view><IconFont name="plus" /> 添加参观者</view>
</view>
<view v-if="visitorList.length" class="visitors-list">
<view v-for="(item, index) in visitorList" :key="index" @tap="addVisitor(item)" class="visitor-item">
<view style="margin-right: 1rem;">
<image v-if="!checked_visitors.includes(item.id)" :src="icon_check1" style="width: 1.2rem; height: 1.2rem;" />
<image v-else :src="icon_check2" style="width: 1.2rem; height: 1.2rem;" />
<view style="margin-right: 32rpx;">
<image v-if="!checked_visitors.includes(item.id)" :src="icon_check1" style="width: 38rpx; height: 38rpx;" />
<image v-else :src="icon_check2" style="width: 38rpx; height: 38rpx;" />
</view>
<view>
<view style="color: #A67939;">{{ item.name }}</view>
<view>证件号：{{ formatId(item.id_number) }}</view>
<view v-if="item.is_reserve === RESERVE_STATUS.ENABLE" style="color: #9C9A9A; font-size: 0.8rem;">*已预约过{{ date }}参观，请不要重复预约</view>
<view v-if="item.is_reserve === RESERVE_STATUS.ENABLE" style="color: #9C9A9A; font-size: 26rpx;">*已预约过{{ date }}参观，请不要重复预约</view>
</view>
</view>
</view>
<view v-else class="no-visitors-list">
<image src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem; height: 10rem;" />
<image src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 320rpx; height: 320rpx;" />
<view class="no-visitors-list-title">您还没有添加过参观者</view>
</view>
<view style="height: 5rem;"></view>
<view style="height: 160rpx;"></view>
<view class="submit-wrapper">
<view class="control-wrapper">
<view class="left">
<view style="margin-left: 1rem; display: flex;align-items: center;">
订单金额&nbsp;&nbsp;<view style="color: #FF1919;display: inline-block;">¥<view style="font-size: 1.5rem;display: inline-block;">&nbsp;{{ total }}</view></view>
<view style="margin-left: 32rpx; display: flex;align-items: center;">
订单金额&nbsp;&nbsp;<view style="color: #FF1919;display: inline-block;">¥<view style="font-size: 48rpx;display: inline-block;">&nbsp;{{ total }}</view></view>
</view>
</view>
<view @tap="submitBtn" class="right">提交订单</view>
</view>
<view style="font-size: 0.85rem;margin-left: 1rem;color: #FF1919; margin-bottom: 1rem;">提交后请在10分钟内完成支付</view>
<view style="font-size: 27rpx;margin-left: 32rpx;color: #FF1919; margin-bottom: 32rpx;">提交后请在10分钟内完成支付</view>
</view>
</view>
</template>
......@@ -181,31 +181,31 @@ useDidShow(async () => {
<style lang="less">
.submit-page {
margin: 1rem;
margin: 32rpx;
position: relative;
.visit-time {
background-color: #FFF;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem;
border-radius: 8px;
padding: 24rpx;
border-radius: 16rpx;
}
.add-visitors {
border: 1px dashed #A67939;
border: 2rpx dashed #A67939;
color: #A67939;
border-radius: 5px;
border-radius: 10rpx;
text-align: center;
padding: .65rem 0;
margin: 1rem 0;
font-size: 1.15rem;
padding: 21rpx 0;
margin: 32rpx 0;
font-size: 37rpx;
}
.visitors-list {
.visitor-item {
background-color: #FFF;
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 16rpx;
padding: 32rpx;
margin-bottom: 32rpx;
display: flex;
align-items: center;
}
......@@ -216,26 +216,26 @@ useDidShow(async () => {
align-items: center;
flex-direction: column;
img {
margin-top: 1rem;
margin-bottom: 1rem;
width: 10rem;
margin-top: 32rpx;
margin-bottom: 32rpx;
width: 320rpx;
}
.no-visitors-list-title {
color: #A67939;
font-size: 1.05rem;
font-size: 34rpx;
}
}
.submit-wrapper {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
width: 750rpx;
display: flex;
background-color: #FFF;
// padding: 1rem;
// padding: 32rpx;
justify-content: space-between;
flex-direction: column;
box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
box-shadow: 0 -10rpx 8rpx 0 rgba(0,0,0,0.12);
.control-wrapper {
display: flex;
......@@ -251,10 +251,10 @@ useDidShow(async () => {
.right {
background-color: #A67939;
color: #FFF;
margin: 1rem;
padding: 0.8rem 3rem;
margin: 32rpx;
padding: 26rpx 96rpx;
border-radius: 5px;
font-size: 1.1rem;
font-size: 35rpx;
margin-bottom: 0;
}
}
......
......@@ -18,9 +18,9 @@
<view class="payment-amount">支付金额：<text>¥ {{ billInfo?.total_amt }}</text></view>
</view>
<view class="appointment-notice">
<view style="margin-bottom: 0.25rem;"><IconFont name="tips" />&nbsp;温馨提示</view>
<view style="font-size: 0.85rem;">1. 一人一码，或拿身份证，扫码或识别身份证成功后进入</view>
<view style="font-size: 0.85rem;">2. 若您无法按时参观，请提前在预约记录中取消您的预约</view>
<view style="margin-bottom: 8rpx;"><IconFont name="tips" />&nbsp;温馨提示</view>
<view style="font-size: 27rpx;">1. 一人一码，或拿身份证，扫码或识别身份证成功后进入</view>
<view style="font-size: 27rpx;">2. 若您无法按时参观，请提前在预约记录中取消您的预约</view>
</view>
</view>
<view class="success-btn">
......@@ -77,13 +77,13 @@ useDidShow(async () => {
}
.text {
color: #A67939;
font-size: 1.25rem;
margin-top: 1rem;
font-size: 40rpx;
margin-top: 32rpx;
}
}
.appointment-information {
padding: 2rem 1rem;
border-bottom: 1px dashed #A67939;
padding: 64rpx 32rpx;
border-bottom: 2rpx dashed #A67939;
line-height: 2;
.number-of-visitors {
text {
......@@ -103,27 +103,27 @@ useDidShow(async () => {
}
.appointment-notice {
padding: 1rem;
padding: 32rpx;
color: #666;
}
.success-btn {
position: fixed;
bottom: 2rem;
width: 100vw;
bottom: 64rpx;
width: 750rpx;
display: flex;
justify-content: space-around;
.btn-item {
width: 40%;
text-align: center;
padding: 0.8rem 0;
border-radius: 8px;
font-size: 1.1rem;
padding: 26rpx 0;
border-radius: 16rpx;
font-size: 35rpx;
}
.btn-left {
border: 1px solid #A67939;
border: 2rpx solid #A67939;
color: #A67939;
}
......
......@@ -13,28 +13,28 @@
<view style="color: #A67939;">{{ item.name }}</view>
<view>证件号：{{ formatId(item.id_number) }}</view>
</view>
<view @tap="removeItem(item)" style="margin-left: 1rem;">
<image src="https://cdn.ipadbiz.cn/xys/booking/%E5%88%A0%E9%99%A4@2x.png" style="width: 1.2rem; height: 1.2rem;" />
<view @tap="removeItem(item)" style="margin-left: 32rpx;">
<image src="https://cdn.ipadbiz.cn/xys/booking/%E5%88%A0%E9%99%A4@2x.png" style="width: 38rpx; height: 38rpx;" />
</view>
</view>
</view>
<view v-else class="no-visitors-list">
<image src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem; height: 10rem;" />
<image src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 320rpx; height: 320rpx;" />
<view class="no-visitors-list-title">您还没有添加过参观者</view>
</view>
</view>
<view style="height: 8rem;"></view>
<view style="height: 256rpx;"></view>
<view class="index-nav">
<view class="nav-logo" @tap="toHome">
<image :src="icon_3" style="width: 1.5rem; height: 1.5rem;" />
<image :src="icon_3" style="width: 48rpx; height: 48rpx;" />
首页
</view>
<view class="nav-logo" @tap="toCode">
<image :src="icon_4" style="width: 1.5rem; height: 1.5rem; margin-bottom: 0.1rem;" />
<image :src="icon_4" style="width: 48rpx; height: 48rpx; margin-bottom: 3rpx;" />
预约码
</view>
<view class="nav-logo" @tap="toMy">
<image :src="icon_5" style="width: 1.5rem; height: 1.5rem;" />
<image :src="icon_5" style="width: 48rpx; height: 48rpx;" />
我的
</view>
</view>
......@@ -116,27 +116,27 @@ useDidShow(() => {
.visitor-list-page {
min-height: 100vh;
background-color: #F6F6F6;
padding: 1rem;
padding: 32rpx;
.visitor-content {
.title {
.text {
font-size: 1.1rem;
font-size: 35rpx;
font-weight: bold;
margin-bottom: 1rem;
border-left: 3px solid #A67939;
padding-left: 0.5rem;
margin-bottom: 32rpx;
border-left: 6rpx solid #A67939;
padding-left: 16rpx;
}
}
.add-visitors {
border: 1px dashed #A67939;
border: 2rpx dashed #A67939;
color: #A67939;
border-radius: 5px;
border-radius: 10rpx;
text-align: center;
padding: .65rem 0;
margin: 1rem 0;
font-size: 1.15rem;
padding: 21rpx 0;
margin: 32rpx 0;
font-size: 37rpx;
.add-btn {
display: flex;
align-items: center;
......@@ -147,9 +147,9 @@ useDidShow(() => {
.visitors-list {
.visitor-item {
background-color: #FFF;
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 16rpx;
padding: 32rpx;
margin-bottom: 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
......@@ -164,8 +164,8 @@ useDidShow(() => {
.no-visitors-list-title {
color: #A67939;
font-size: 1.05rem;
margin-top: 1rem;
font-size: 34rpx;
margin-top: 32rpx;
}
}
}
......@@ -174,10 +174,10 @@ useDidShow(() => {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: 10vh;
width: 750rpx;
height: 134rpx;
background: #FFFFFF;
box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
box-shadow: 0 -10rpx 8rpx 0 rgba(0,0,0,0.12);
display: flex;
align-items: center;
justify-content: space-around;
......@@ -187,7 +187,7 @@ useDidShow(() => {
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.8rem;
font-size: 26rpx;
}
}
}
......
......@@ -2,11 +2,11 @@
<view class="waiting-page">
<view class="waiting-content">
<view>
<IconFont name="clock" size="40" color="#A67939" />
<IconFont name="clock" size="80rpx" color="#A67939" />
</view>
<view style="margin: 1rem 0;">支付中</view>
<view style="margin: 32rpx 0;">支付中</view>
<view>{{ current.seconds }} s</view>
<view style="margin: 1.5rem 0; font-size: 0.85rem; color: #A67939; text-align: center; line-height: 2;">
<view style="margin: 48rpx 0; font-size: 27rpx; color: #A67939; text-align: center; line-height: 2;">
温馨提示：{{ pay_msg }}<br />
</view>
</view>
......@@ -112,19 +112,19 @@ const goBackBtn = () => {
height: 100vh;
background-color: #fff;
align-items: center;
padding-top: 3rem;
padding-top: 96rpx;
.waiting-content {
display: flex;
flex-direction: column;
align-items: center;
font-size: 1rem;
font-size: 32rpx;
color: #333;
}
.go-back-wrapper {
width: 80%;
margin-top: 2rem;
margin-top: 64rpx;
}
}
</style>
......