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.
616 lines
19 KiB
616 lines
19 KiB
<template>
|
|
<view class="body">
|
|
<view class="body_content">
|
|
<view class="reservation_con">
|
|
<radio-group @change="radioChange" class="radio_group d_flex a_center">
|
|
<label class="label d_flex a_center" v-for="(item, index) in items" :key="item.name">
|
|
<view>
|
|
<radio :value="index" :checked="index==current" />
|
|
</view>
|
|
<view>{{item.name}}</view>
|
|
</label>
|
|
</radio-group>
|
|
<view class="reservation_input d_flex j_between a_center">
|
|
<view class="left">姓名</view>
|
|
<view class="right"><input class="input" type="text" placeholder="请输入姓名" v-model="name" /></view>
|
|
</view>
|
|
<view class="reservation_input d_flex j_between a_center" v-if="neddPhone">
|
|
<view class="left">联系方式</view>
|
|
<view class="right"><input class="input" type="number" placeholder="请输入联系方式" v-model="phone" /></view>
|
|
</view>
|
|
<view class="reservation_input d_flex j_between a_center" v-if="neddCard">
|
|
<view class="left">身份证</view>
|
|
<view class="right"><input class="input" type="idcard" placeholder="请输入身份证" v-model="yycard" /></view>
|
|
</view>
|
|
<view v-if="current==1" class="reservation_input d_flex j_between a_center">
|
|
<view class="left">团队人数</view>
|
|
<view class="right"><input class="input" type="number" placeholder="请输入团队人数" v-model="num" /></view>
|
|
</view>
|
|
<radio-group v-if="current==1" @change="radioChange2" class="radio_group d_flex a_center">
|
|
<view class="mr_30">是否需要讲解</view>
|
|
<label class="label d_flex a_center" v-for="(item, index) in items2" :key="item.name">
|
|
<view>
|
|
<radio :value="item.value" :checked="item.value==current2" />
|
|
</view>
|
|
<view>{{item.name}}</view>
|
|
</label>
|
|
</radio-group>
|
|
<view v-if="current==1" class="reservation_input reservation_input2">
|
|
<view class="left">其他需求</view>
|
|
<view class="right">
|
|
<textarea class="input" type="text" placeholder="请输入预约留言" v-model="content"></textarea>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-x="true" class="reservation_tab">
|
|
<view class="reservation_tab_nav" v-for="(item, index) in tabs" :key="index" :class="tabIndex == index ? 'on' : ''" @click="tabClick(index)">
|
|
<view class="reservation_tab_week" v-text="item.week"></view>
|
|
<view class="reservation_tab_title" v-text="item.title"></view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="reservation_time" v-show="current==0">
|
|
<view v-if="timeTitles.length > 0" class="reservation_time_nav" v-for="(item, index) in timeTitles" :key="index" @click="timeClick(index)">
|
|
<view class="title">预约时段：{{item.title}}</view>
|
|
<view class="subtitle">预约进度：<text class="num_box">{{item.currentNum}}/{{item.maxnum}}</text></view>
|
|
<view class="yy_btn" @click="subMitData(index)">点击预约</view>
|
|
</view>
|
|
<view v-if="timeTitles.length == 0" class="reservation_time_txt">~ 暂无预约时间 ~</view>
|
|
</view>
|
|
<view class="reservation_con reservation_con2" v-show="current==1">
|
|
<view class="reservation_input font_32 d_flex j_between a_center" @click="startClick">
|
|
<view class="left">开始时间</view>
|
|
<view class="right">
|
|
<text v-if="startDate" v-text="startDate"></text>
|
|
<text v-else class="color_999">请选择</text>
|
|
</view>
|
|
</view>
|
|
<view class="reservation_input font_32 d_flex j_between a_center" @click="endClick">
|
|
<view class="left">结束时间</view>
|
|
<view class="right">
|
|
<text v-if="endDate" v-text="endDate"></text>
|
|
<text v-else class="color_999">请选择</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-show="current==1" class="yy_btn2" @click="subMitData2">点击预约</view>
|
|
</view>
|
|
<w-picker
|
|
:visible.sync="visible1"
|
|
mode="time"
|
|
:startYear="year"
|
|
:endYear="year2"
|
|
:value="startDate"
|
|
:current="false"
|
|
fields="minute"
|
|
:second="false"
|
|
@confirm="onConfirm($event,'date')"
|
|
@cancel="onCancel"
|
|
:disabled-after="false"
|
|
ref="date1"
|
|
></w-picker>
|
|
<w-picker
|
|
:visible.sync="visible2"
|
|
mode="time"
|
|
:startYear="year"
|
|
:endYear="year2"
|
|
:value="endDate"
|
|
:current="false"
|
|
fields="minute"
|
|
:second="false"
|
|
@confirm="onConfirm2($event,'date1')"
|
|
@cancel="onCancel2"
|
|
:disabled-after="false"
|
|
ref="date2"
|
|
></w-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
|
|
import wPicker from "@/components/w-picker/w-picker.vue";
|
|
export default {
|
|
mixins: [MescrollMixin],
|
|
components: {
|
|
wPicker
|
|
},
|
|
data() {
|
|
return {
|
|
year:new Date().getFullYear(),
|
|
year2:new Date().getFullYear(),
|
|
startDate:"",
|
|
endDate:"",
|
|
visible1:false,
|
|
visible2:false,
|
|
mescroll: null,
|
|
downOption: {
|
|
use: false, //是否启用下拉刷新
|
|
auto: false //是否自动加载
|
|
},
|
|
upOption: {
|
|
use: false, //是否启用上拉加载更多
|
|
auto: false //是否自动加载
|
|
},
|
|
id: '',
|
|
tabs:[],
|
|
tabIndex: 0,
|
|
subIndex:null,
|
|
timeTitles: [],
|
|
name: '',
|
|
phone: '',
|
|
yycard:"",
|
|
neddCard:0,
|
|
neddPhone:0,
|
|
items: [{
|
|
name: '个人'
|
|
},
|
|
{
|
|
name: '团队'
|
|
}
|
|
],
|
|
current: 0,
|
|
items2: [{
|
|
name: '是',
|
|
value:1
|
|
},
|
|
{
|
|
name: '否',
|
|
value:0
|
|
}
|
|
],
|
|
current2: 0,
|
|
num:"",
|
|
content:""
|
|
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
let that = this;
|
|
that.id = options.id;
|
|
that.getDetail();
|
|
},
|
|
onReady() {},
|
|
onShow() {
|
|
|
|
},
|
|
methods: {
|
|
startClick(e){
|
|
this.$refs.date1.show()
|
|
},
|
|
endClick(e){
|
|
this.$refs.date2.show()
|
|
},
|
|
onConfirm(e){
|
|
console.log(e);
|
|
this.startDate = e.value;
|
|
},
|
|
onCancel(e){
|
|
|
|
},
|
|
onConfirm2(e){
|
|
console.log(e);
|
|
this.endDate = e.value;
|
|
},
|
|
onCancel2(e){
|
|
|
|
},
|
|
radioChange: function(e) {
|
|
this.current = e.detail.value;
|
|
},
|
|
radioChange2: function(e) {
|
|
this.current2 = e.detail.value;
|
|
},
|
|
getDetail(){
|
|
let that = this;
|
|
that.$doPost('Server.aspx', {
|
|
mod:'getCSinfo',
|
|
cgid:that.id
|
|
})
|
|
.then(res => {
|
|
if (res.data.resultcode != 0) {
|
|
that.$util.showToast(res.data.msg);
|
|
return;
|
|
}
|
|
let body = res.data.data;
|
|
that.neddCard = body.neddCard;
|
|
that.neddPhone = body.neddPhone;
|
|
that.getMenus();
|
|
})
|
|
.catch(err => {
|
|
console.log('request fail', err);
|
|
});
|
|
},
|
|
subMitData(index){
|
|
let that = this;
|
|
let subIndex = index;
|
|
let timeTitles = that.timeTitles;
|
|
if(!that.name){
|
|
that.$util.showToast("请输入姓名");
|
|
return;
|
|
}
|
|
if(that.neddPhone){
|
|
if(!that.phone){
|
|
that.$util.showToast("请输入联系方式");
|
|
return;
|
|
}
|
|
if(!that.$util.isPhone(that.phone)){
|
|
that.$util.showToast("联系方式格式错误");
|
|
return;
|
|
}
|
|
}
|
|
if(that.neddCard){
|
|
if(!that.yycard){
|
|
that.$util.showToast("请输入身份证");
|
|
return;
|
|
};
|
|
if(!that.$util.isCardNo(that.yycard)){
|
|
that.$util.showToast("请输入正确的身份证");
|
|
return;
|
|
}
|
|
}
|
|
let data = {
|
|
mod: 'addCSorder',
|
|
stime:that.$util.strDateFormat(timeTitles[subIndex].stime,"yyyy-MM-dd hh:mm"),
|
|
etime:that.$util.strDateFormat(timeTitles[subIndex].etime,"yyyy-MM-dd hh:mm"),
|
|
listid:timeTitles[subIndex].ImgId,
|
|
cgid:that.id,
|
|
yyname:that.name
|
|
}
|
|
if(that.neddPhone){
|
|
data.yyphone = that.phone;
|
|
}
|
|
if(that.neddCard){
|
|
data.yycard = that.yycard;
|
|
}
|
|
that.$doPost('Server.aspx', data)
|
|
.then(res => {
|
|
if (res.data.resultcode != 0) {
|
|
that.$util.showToast(res.data.msg);
|
|
return;
|
|
}
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: "预约成功",
|
|
showCancel:false,
|
|
success: function (res) {
|
|
uni.navigateBack();
|
|
}
|
|
});
|
|
})
|
|
.catch(err => {
|
|
console.log('request fail', err);
|
|
});
|
|
},
|
|
subMitData2(index){
|
|
let that = this;
|
|
let tabs = that.tabs;
|
|
let tabIndex = that.tabIndex;
|
|
let startDate = that.startDate;
|
|
let endDate = that.endDate;
|
|
if(!that.name){
|
|
that.$util.showToast("请输入姓名");
|
|
return;
|
|
}
|
|
if(that.neddPhone){
|
|
if(!that.phone){
|
|
that.$util.showToast("请输入联系方式");
|
|
return;
|
|
}
|
|
if(!that.$util.isPhone(that.phone)){
|
|
that.$util.showToast("联系方式格式错误");
|
|
return;
|
|
}
|
|
}
|
|
if(that.neddCard){
|
|
if(!that.yycard){
|
|
that.$util.showToast("请输入身份证");
|
|
return;
|
|
};
|
|
if(!that.$util.isCardNo(that.yycard)){
|
|
that.$util.showToast("请输入正确的身份证");
|
|
return;
|
|
}
|
|
}
|
|
if(!that.num){
|
|
that.$util.showToast("请输入团队人数");
|
|
return;
|
|
};
|
|
if(!startDate){
|
|
that.$util.showToast("请选择开始时间");
|
|
return;
|
|
};
|
|
if(!endDate){
|
|
that.$util.showToast("请选择结束时间");
|
|
return;
|
|
};
|
|
startDate = that.tabs[tabIndex].time + " " + startDate;
|
|
endDate = that.tabs[tabIndex].time + " " + endDate;
|
|
if(that.$util.strToDate(startDate) <= new Date()){
|
|
that.$util.showToast("开始时间不能小于等于当前时间");
|
|
return;
|
|
}
|
|
if(that.$util.strToDate(endDate)<=that.$util.strToDate(startDate)){
|
|
that.$util.showToast("结束时间不能小于等于开始时间");
|
|
return;
|
|
}
|
|
let data = {
|
|
mod: 'addCSorderTeam',
|
|
stime:startDate,
|
|
etime:endDate,
|
|
cgid:that.id,
|
|
yyname:that.name,
|
|
yynum:that.num,
|
|
yycontent:that.content,
|
|
havejs:that.current2
|
|
}
|
|
if(that.neddPhone){
|
|
data.yyphone = that.phone;
|
|
}
|
|
if(that.neddCard){
|
|
data.yycard = that.yycard;
|
|
}
|
|
that.$doPost('Server.aspx', data)
|
|
.then(res => {
|
|
if (res.data.resultcode != 0) {
|
|
that.$util.showToast(res.data.msg);
|
|
return;
|
|
}
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: "申请成功，请等待审核",
|
|
showCancel:false,
|
|
success: function (res) {
|
|
uni.navigateBack();
|
|
}
|
|
});
|
|
})
|
|
.catch(err => {
|
|
console.log('request fail', err);
|
|
});
|
|
},
|
|
tabClick(index){
|
|
if(this.tabIndex==index){
|
|
return;
|
|
}
|
|
this.tabIndex = index;
|
|
this.subIndex = null;
|
|
this.getData();
|
|
},
|
|
timeClick(index) {
|
|
let that = this;
|
|
let timeTitles = that.timeTitles;
|
|
if(timeTitles[index].expired){
|
|
return;
|
|
}
|
|
that.subIndex = index;
|
|
},
|
|
getMenus(){
|
|
let that = this;
|
|
that.$doPost('Server.aspx', {
|
|
mod: 'getcgordertime7',
|
|
cgid: that.id
|
|
})
|
|
.then(res => {
|
|
if (res.data.resultcode != 0) {
|
|
that.$util.showToast(res.data.msg);
|
|
return;
|
|
}
|
|
let body = res.data.data;
|
|
body.filter(function(item,index){
|
|
item.title = that.$util.strToDate(item.time,"MM-dd");
|
|
})
|
|
that.tabs = body;
|
|
that.getData();
|
|
})
|
|
.catch(err => {
|
|
console.log('request fail', err);
|
|
});
|
|
},
|
|
getData() {
|
|
let that = this;
|
|
that.$doPost('Server.aspx', {
|
|
mod: 'getcgordertimelist',
|
|
cgid: that.id,
|
|
daytime:that.tabs[that.tabIndex].time
|
|
})
|
|
.then(res => {
|
|
if (res.data.resultcode != 0) {
|
|
that.$util.showToast(res.data.msg);
|
|
return;
|
|
}
|
|
let body = res.data.data;
|
|
body.filter(function(item,index){
|
|
if(item.synum<=0){
|
|
item.currentNum = 0;
|
|
}else{
|
|
item.currentNum = item.maxnum - item.synum;
|
|
}
|
|
item.title = that.$util.strDateFormat(item.stime,"hh:mm") + " - " + that.$util.strDateFormat(item.etime,"hh:mm");
|
|
})
|
|
that.timeTitles = body;
|
|
})
|
|
.catch(err => {
|
|
console.log('request fail', err);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page,
|
|
.body {
|
|
background: #f5f5f5;
|
|
}
|
|
.radio_group{
|
|
border-bottom: 1upx solid #e5e5e5;
|
|
padding-top: 30upx;
|
|
padding-bottom:30upx;
|
|
font-size: 32upx;
|
|
}
|
|
.radio_group .label{
|
|
margin-right: 30upx;
|
|
}
|
|
.reservation_con {
|
|
padding: 0 30upx;
|
|
background: #fff;
|
|
margin-top: 20upx;
|
|
}
|
|
.reservation_con2{
|
|
margin-top: 0;
|
|
}
|
|
.reservation_input {
|
|
height: 100upx;
|
|
border-bottom: 1upx solid #e5e5e5;
|
|
line-height: 100upx;
|
|
color: #333333;
|
|
}
|
|
.reservation_input:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.reservation_input .left {
|
|
height: 100%;
|
|
font-size: 32upx;
|
|
}
|
|
.reservation_input .right {
|
|
height: 100%;
|
|
width: 70%;
|
|
text-align: right;
|
|
}
|
|
.reservation_input .input {
|
|
height: 100%;
|
|
width: 100%;
|
|
font-size: 32upx;
|
|
}
|
|
.reservation_tab {
|
|
height: 140upx;
|
|
border-bottom: 1upx solid #e5e5e5;
|
|
white-space: nowrap;
|
|
background: #fff;
|
|
margin-top: 20upx;
|
|
}
|
|
.reservation_tab .reservation_tab_nav {
|
|
display: inline-block;
|
|
padding: 0 30upx;
|
|
position: relative;
|
|
text-align: center;
|
|
height: 100%;
|
|
}
|
|
.reservation_tab .reservation_tab_nav::after {
|
|
height: 27upx;
|
|
background: #ccc;
|
|
width: 2upx;
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.reservation_tab .reservation_tab_nav:last-child::after {
|
|
height: 0;
|
|
width: 0;
|
|
content: initial;
|
|
}
|
|
.reservation_tab .reservation_tab_nav .reservation_tab_week {
|
|
font-size: 28upx;
|
|
color: #131313;
|
|
padding-top: 34upx;
|
|
padding-bottom: 10upx;
|
|
}
|
|
.reservation_tab .reservation_tab_nav .reservation_tab_title {
|
|
font-size: 24upx;
|
|
color: #c5c5c5;
|
|
}
|
|
.reservation_tab .reservation_tab_nav.on .reservation_tab_week {
|
|
color: #ff570e;
|
|
}
|
|
.reservation_tab .reservation_tab_nav.on .reservation_tab_title {
|
|
color: #ff570e;
|
|
}
|
|
.content_btn_con {
|
|
padding-left: 80upx;
|
|
padding-right: 80upx;
|
|
}
|
|
.main_content_btn {
|
|
border-radius: 60upx;
|
|
font-size: 36upx;
|
|
font-weight: initial;
|
|
height: 84upx;
|
|
line-height: 84upx;
|
|
}
|
|
.reservation_time{
|
|
width: 100%;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
margin-top: 20upx;
|
|
}
|
|
.reservation_time_txt{
|
|
width: 100%;
|
|
text-align: center;
|
|
color:#999;
|
|
font-size: 28upx;
|
|
line-height: 140upx;
|
|
height: 140upx;
|
|
}
|
|
.reservation_time_nav{
|
|
border-bottom: 1upx solid #e5e5e5;
|
|
font-size: 28upx;
|
|
padding:30upx 30upx;
|
|
position:relative;
|
|
}
|
|
.reservation_time_nav.on{
|
|
color:#ff4c4c;
|
|
}
|
|
.reservation_time_nav.line{
|
|
color:#c5c5c5;
|
|
}
|
|
.reservation_time_nav .title{
|
|
margin-bottom: 10upx;
|
|
}
|
|
.reservation_time_nav .num_box{
|
|
border:1upx solid $color_orange;
|
|
padding: 0 10upx;
|
|
border-radius: 20upx;
|
|
}
|
|
.yy_btn{
|
|
position: absolute;
|
|
background: $color_orange;
|
|
width:160upx;
|
|
height:66upx;
|
|
line-height:66upx;
|
|
text-align: center;
|
|
color:#fff;
|
|
font-size: 28upx;
|
|
right: 30upx;
|
|
top: 50%;
|
|
border-radius: 40upx;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.reservation_input2{
|
|
height: auto;
|
|
overflow: hidden;
|
|
padding-bottom: 30upx;
|
|
}
|
|
.reservation_input2 .right{
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
.reservation_input2 .input{
|
|
border: 1upx solid #e5e5e5;
|
|
padding: 20upx;
|
|
height: 200upx;
|
|
box-sizing: border-box;
|
|
line-height: 40upx;
|
|
}
|
|
.yy_btn2{
|
|
background: $color_orange;
|
|
height:88upx;
|
|
line-height:88upx;
|
|
text-align: center;
|
|
color:#fff;
|
|
font-size: 32upx;
|
|
border-radius: 40upx;
|
|
margin:30upx 30upx 50upx 30upx;
|
|
}
|
|
|
|
</style>
|
|
|