You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
191 lines
5.3 KiB
191 lines
5.3 KiB
<template>
|
|
<view class="home">
|
|
<view class="content" style="padding-top: 15vh;">
|
|
<span class="font-bold">预约日期和时间</span>
|
|
<view class="flex-center mt-40" style="gap: 50rpx;" @click="open">
|
|
<view class="date">
|
|
{{year}}
|
|
</view>
|
|
<view class="date">
|
|
{{date}}
|
|
</view>
|
|
<view class="date">
|
|
{{time}}
|
|
</view>
|
|
</view>
|
|
<span class="font-bold" style="margin-top: 5vh;">预约信息</span>
|
|
<view class="" style="width: 80vw;">
|
|
<view class="flex-sb mt-40">
|
|
<view class="flex-center">
|
|
<view class="date">
|
|
{{firstName}}
|
|
</view>
|
|
<span style="margin-left: 30rpx;">姓</span>
|
|
</view>
|
|
<view class="flex-center">
|
|
<view class="date">
|
|
{{lastName}}
|
|
</view>
|
|
<span style="margin-left: 30rpx;">名</span>
|
|
</view>
|
|
<view class="flex-center">
|
|
<view class="flex-center" style="position: relative;" @click="checkGender">
|
|
<span class="main-color">先生</span>
|
|
<img src="../static/info/a.png" alt="" style="width: 40rpx; height: 40rpx;" />
|
|
</view>
|
|
<view class="flex-col select" id="select" ref="check">
|
|
<span class="main-color">先生</span>
|
|
<span class="main-color">女士</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-sb mt-40">
|
|
<view class="flex-center" style="gap: 30rpx;">
|
|
<input v-model="phone" type="tel" class="input"></input>
|
|
<span>手机</span>
|
|
</view>
|
|
<view class="">
|
|
<span class="main-color" style="text-decoration: underline;">修改号码</span>
|
|
</view>
|
|
</view>
|
|
<view class="mt-40" style="width: 100%;">
|
|
<textarea class="area" cols="20" rows="20" placeholder="如有下一步需求,请告诉我们"></textarea>
|
|
</view>
|
|
<view class="flex-start-col mt-40" style="gap: 20rpx;">
|
|
<view style="display: flex; align-items: start; gap: 20rpx;">
|
|
<uv-icon size="40" name="checkmark-circle" color="#07c060"></uv-icon>
|
|
<span style="font-size: 28rpx;">本人提交此信息即表示本人已网读并接受Genius JourneyClub 的使用条款和个人信息处理规则。</span>
|
|
</view>
|
|
<view class="flex-center" style="gap: 20rpx;">
|
|
<uv-icon size="40" name="info-circle" color="#07c060"></uv-icon>
|
|
<span style="font-size: 28rpx;">未满18周岁请勿参与此内容。</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col query" style="gap: 0rpx;">
|
|
<view class="flex-center" style="gap: 30rpx;">
|
|
<view class="btn2" style="padding: 16rpx 80rpx;" @click="pre">
|
|
返回
|
|
</view>
|
|
<view class="btn2" style="padding: 16rpx 80rpx;" @click="next">
|
|
取消预约
|
|
</view>
|
|
</view>
|
|
<text class="second-color">欢快无限饮 饮酒有限度</text>
|
|
</view>
|
|
</view>
|
|
<uv-popup mode="bottom" round="20" closeable ref="service" duration="500">
|
|
<view class="flex-col" style="gap: 30rpx; padding: 40rpx 0;">
|
|
<text style="font-weight: bold;">请填写预约信息</text>
|
|
<view class="flex-sa">
|
|
<img src="../static/address/icon.png" alt="" style="width: 40rpx; height: 40rpx;" />
|
|
<span>{{username}}</span>
|
|
<span>{{address}}</span>
|
|
</view>
|
|
</view>
|
|
<view class="" style="height: 20rpx; width: 100vw; background-color: #f6f6f6;">
|
|
|
|
</view>
|
|
<view class="" style="padding: 40rpx;">
|
|
<span>预约时间</span>
|
|
<view class="flex-sa mt-40" style="background-color: #f6f6f6; padding: 30rpx 20rpx;">
|
|
<span style="margin-right: 30rpx;">备注</span>
|
|
<uv-input placeholder="填选,可输入的其他需求" border="none" v-model="remark_column"></uv-input>
|
|
</view>
|
|
<uv-calendar ref="calendar" @confirm="confirm"></uv-calendar>
|
|
<view class="flex-sb mt-40" style="width: 90vw;border-radius: 100rpx; border: 2rpx solid #fab445; box-sizing: border-box; overflow: hidden;">
|
|
<span style=" padding: 30rpx;color: #fab445;">暂不预约，先购买</span>
|
|
<span style=" padding: 30rpx;background-color: #fab445; color: white;">下一步，确认订单</span>
|
|
</view>
|
|
</view>
|
|
</uv-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
year: '2024年',
|
|
date: '9月20日',
|
|
time: '08：00',
|
|
firstName: '张',
|
|
lastName: '里于',
|
|
gender: '',
|
|
phone: '',
|
|
message: '',
|
|
username: '利曼和',
|
|
address: '湖南省长沙市天心村天启小区6栋',
|
|
remark_column:''
|
|
}
|
|
},
|
|
methods: {
|
|
next() {
|
|
uni.navigateTo({
|
|
url: '/pages_order/info/start'
|
|
})
|
|
},
|
|
pre() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
open() {
|
|
this.$refs.calendar.open();
|
|
this.$refs.service.open();
|
|
},
|
|
confirm(e){
|
|
console.log(e);
|
|
},
|
|
checkGender(){
|
|
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.query {
|
|
position: relative;
|
|
bottom: -5vh;
|
|
}
|
|
|
|
.date {
|
|
border: 2rpx solid $uni-color;
|
|
padding: 14rpx 30rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.main-color {
|
|
flex-wrap: nowrap;
|
|
color: $uni-color;
|
|
}
|
|
|
|
.input {
|
|
border: 2rpx solid #FD5100;
|
|
border-radius: 10rpx;
|
|
padding: 10rpx;
|
|
}
|
|
|
|
.area {
|
|
border: 2rpx solid #FD5100;
|
|
border-radius: 10rpx;
|
|
padding: 10rpx;
|
|
width: 100%;
|
|
height: 120rpx;
|
|
}
|
|
|
|
.select{
|
|
position: absolute;
|
|
margin-top: 180rpx;
|
|
margin-right: 25rpx;
|
|
gap: 10rpx;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
background: white;
|
|
border-radius: 10rpx;
|
|
font-size: 28rpx;
|
|
transition: 0.4s;
|
|
display: none;
|
|
}
|
|
</style>
|