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.

1231 lines
34 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view>
<view class="content">
<view class="box-card">
<view class="box-card-title">
预约详情
</view>
<view class="box-card-content">
<view class="book-box" style="padding-top: 20rpx;">
<view class="book-box-card">
<view class="book-box-title">
日期
</view>
<view class="book-box-row">
<view class="book-box-row-date">
<block v-for="(item,index) in listDatePrice" :key="index">
<view class="book-box-row-dateitem" :class="{'book-box-row-dateitem-on':item.checked,
'book-box-row-dateitem-none':item.is_open==0}" @click="handleDate(index)">
<view class="book-box-row-dateitem-status">
<u-icon name="checkmark" color="#fff" size="20rpx" v-if="item.checked">
</u-icon>
<view v-else>
<text
v-if="item.is_open==1">{{item.remain_count==0?"不可预约":"可预约"}}</text>
<text v-else>闭馆</text>
</view>
</view>
<view>{{item.week}}</view>
<view>{{item.datef}}</view>
</view>
</block>
</view>
<view class="book-box-row-select" @click="openCalendar">
<view>
<view>指定</view>
<view>日期</view>
</view>
<view class="book-box-row-select-more">
<u-icon name="arrow-right" color="#EF9525" size="20rpx"></u-icon>
</view>
</view>
</view>
</view>
<view class="book-box-card">
<view class="book-box-title">
进馆时间
</view>
<view class="book-box-timerow">
<view class="book-box-row-timeitem" v-for="(item,index) in currentDate.rules"
:class="{'book-box-row-timeitem-on':item.checked,'timeitem-none':item.remain_count==0,'timeitem-none':item.isCanbook==false}"
:key="index" @click="handleSelectTime(index)">
<view class="book-box-row-timeitem-status" v-if="item.checked">
<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
</view>
<view class="book-box-row-timeitem-txt">{{item.start_time+'-'+item.end_time}}</view>
<view class="book-box-row-timeitem-txt" v-if="item.remain_count>0">
{{item.remain_count}}张
</view>
<view class="book-box-row-timeitem-txt" v-else>已约满</view>
</view>
</view>
</view>
</view>
<view class="book-box-selectInfo" style="width: 100%;">
<view class="book-box-selectInfo-left">已选:{{currentDate.datef||""}}
{{(currentTime.start_time||"")+"-"+(currentTime.end_time||"")}}
</view>
<view class="book-box-selectInfo-right" @click="openNoticeInfo(0)">
<text class="book-box-selectInfo-righttxt">预约须知</text>
<u-icon name="arrow-right" color="#EF9525" size="20rpx"></u-icon>
</view>
</view>
</view>
</view>
<u--form labelPosition="left" :model="form" :rules="rules" ref="form">
<view class="box-card">
<view class="box-card-title">
添加观众
</view>
<view class="box-card-content">
<u-form-item label="参观人数" labelWidth="120" prop="total" ref="total">
<u-number-box slot="right" v-model="form.total" inputWidth="44" color="#EF9525"
bgColor="#FCF6E3" :min="minCount" :max="maxCount" class="plus">
</u-number-box>
</u-form-item>
<view class="box-tips" v-if="type=='team'">
<text class="box-tips-txt" v-if="type=='user'">每单限购{{maxCount}}张同一身份证当天限购1张</text>
<text class="box-tips-txt"
v-if="type=='team'">{{minCount}}人以上可团体预约,一个团体最多{{maxCount}}人</text>
</view>
<view class="commonuser">
<view class="box-card-content">
<view class="book-box" style="padding-top: 20rpx;">
<view class="book-box-card">
<view class="book-box-title">
常用人
</view>
<view class="">
<view class="book-box-timerow">
<block v-for="(item,index) in common_user" :key="index">
<view class="book-box-row-timeitem"
:class="{'book-box-row-timeitem-on':item.checked}"
@click="handleCommonUser(item)">
<view v-if="item.checked" class="book-box-row-timeitem-status">
<u-icon name="checkmark" color="#fff" size="20rpx"
v-if="item.checked">
</u-icon>
</view>
<view>{{item.name}}</view>
<!-- <view>{{item.datef}}</view> -->
</view>
</block>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="box-visitor">
<block v-for="(item,index) in form.details_list" :key="index">
<view class="box-visitor-item">
<view class="box-visitor-item-left">
<u-icon name="minus-circle" size="22" color="#828282" @click="delUser(index)">
</u-icon>
<view class="box-visitor-info">
<view>{{item.name}}</view>
<view>{{item.idcard}}</view>
</view>
</view>
<view class="box-visitor-item-right" @click="openAdd(index)">
<u-icon name="edit-pen" size="24" color="#828282"></u-icon>
</view>
</view>
</block>
</view>
<view class="box-footer">
<view class="box-footer-left">
<view class="box-button" @click="openAdd()">
<u-icon name="plus" color="#EF9525"></u-icon>
<text class="box-button-txt">添加观众</text>
</view>
</view>
<view class="box-footer-right" v-if="type=='team'">
<view class="box-button" @click="selectFile">
<u-icon name="plus" color="#EF9525"></u-icon>
<text class="box-button-txt">批量导入观众</text>
</view>
</view>
</view>
<view class="book-box-selectInfo" v-if="type=='team'" style="width: 100%; margin-top: 20rpx;">
<view class="book-box-selectInfo-right" @click="openNoticeInfo(1)">
<u-icon name="question-circle-fill" color="#EF9525" size="40rpx"></u-icon>
<text class="book-box-selectInfo-righttxt" style="margin-left: 20rpx;">批量导入说明</text>
</view>
</view>
</view>
</view>
<!-- <view class="box-card">
<u-form-item label="特殊情况" labelWidth="80" prop="leader" ref="leader">
<u-checkbox-group @change="radioChange">
<u-checkbox activeColor="#EF9525" label="乘坐轮椅等行动不便者" v-model="specialtype" name='1' shape="circle"></u-checkbox>
</u-checkbox-group>
</u-form-item>
</view> -->
<view class="box-card" v-if="type=='team'">
<view class="box-card-title">
{{type=="team"?"领队人信息":"联系人信息"}}
</view>
<view class="box-card-content" style="padding: 10px;">
<u-form-item :label="(type=='team'?'领队人':'联系人')" labelWidth="80" prop="leader" ref="leader"
required>
<u-input placeholder="请输入联系人" v-model="form.leader"></u-input>
</u-form-item>
<block>
<u-form-item label="单位名称" labelWidth="80" prop="unit" required>
<u-input placeholder="请输入单位名称" v-model="form.unit"></u-input>
</u-form-item>
<u-form-item label="证件类型" labelWidth="80" prop="card_type1" required>
<!-- <u-radio-group v-model="form.card_type">
<u-radio width="50%" activeColor="#EF9525" v-for="(item, index) in cardList"
:key="index" :name=item.idx :label="item.name">
</u-radio>
</u-radio-group> -->
<u-cell-group :border="false">
<u-cell @click="showCards" :title="card_type_names" :isLink="true"
arrow-direction="down"></u-cell>
</u-cell-group>
</u-form-item>
<u-form-item label="证件号码" labelWidth="80" prop="from.idcard" required>
<u-input placeholder="请输入证件号码" v-model="form.idcard"></u-input>
</u-form-item>
</block>
<u-form-item label="手机号" labelWidth="80" prop="mobile" ref="mobile" required>
<u-input readonly placeholder="请输入手机号" v-model="form.mobile"></u-input>
</u-form-item>
</view>
</view>
<view class="box-card" v-if="type=='user'">
<view class="box-card-content" style="padding: 10px;">
<u-form-item label="手机号" labelWidth="80" prop="mobile" ref="mobile" required>
<u-input readonly placeholder="请输入手机号" v-model="form.mobile"></u-input>
</u-form-item>
</view>
</view>
</u--form>
<view class="page-bottom">
<u-button type="primary" @click="submitOrder">确定</u-button>
</view>
</view>
<u-popup :show="showAdd" mode="bottom" @close="closeAdd" :round="10" closeable>
<view class="mpopup">
<view class="mpopup-title">
添加观众
</view>
<view class="mpopup-content" style="margin-top: 60rpx;">
<u--form labelPosition="left" :model="formUser" :rules="rules" ref="formUser">
<u-form-item label="姓名" labelWidth="80" prop="name" ref="name" required>
<u-input placeholder="请输入姓名" v-model="formUser.name"></u-input>
</u-form-item>
<u-form-item label="证件类型" labelWidth="80" prop="card_type1" ref="card_type" required>
<!-- <u-radio-group v-model="formUser.card_type">
<u-radio width="50%" activeColor="#EF9525" v-for="(item, index) in cardList"
:key="index" :name=item.idx :label="item.name">
</u-radio>
</u-radio-group> -->
<u-cell-group :border="false">
<u-cell @click="showCard" :title="card_type_name" :isLink="true" arrow-direction="down">
</u-cell>
</u-cell-group>
<!-- <u-input placeholder="身份证" disabled @click="showCard" v-model="formUser.card_type"></u-input> -->
</u-form-item>
<u-form-item label="证件号码" labelWidth="80" prop="idcard" ref="idcard" required>
<u-input placeholder="请输入证件号码" v-model="formUser.idcard"></u-input>
</u-form-item>
<u-form-item label="行动不便者" labelWidth="80" prop="is_disability" ref="is_disability">
<u-radio-group v-model="formUser.is_disability">
<u-radio width="100%" activeColor="#EF9525" v-for="(item, index) in disabilitys"
:key="index" :name=item.idx :label="item.name">
</u-radio>
<!-- <u-checkbox activeColor="#EF9525" label="乘坐轮椅等行动不便者" v-model="specialtype" name='1' shape="circle"></u-checkbox> -->
</u-radio-group>
</u-form-item>
<u-form-item label="手机号" labelWidth="80" prop="from.mobile" ref="mobile">
<u-input placeholder="请输入手机号" v-model="formUser.mobile"></u-input>
</u-form-item>
</u--form>
<u-button type="primary" @click="handleAddUser">确定</u-button>
</view>
</view>
</u-popup>
<u-picker :show="cardshow" @cancel="cancel" @confirm="confirmCard" ref="uPicker" :columns="cardLists"
keyName="label"></u-picker>
<u-picker :show="cardshows" @cancel="cancels" @confirm="confirmCards" ref="uPickers" :columns="cardLists"
keyName="label"></u-picker>
<u-popup :show="showInfo" mode="bottom" @close="closeInfo" :round="10" closeable>
<view class="mpopup" :style="[{height:maxheight}]">
<view class="mpopup-title">
{{currentNotice.title}}
</view>
<view class="mpopup-content" style="margin-top: 60rpx;">
<scroll-view scroll-y="true" :style="[{height:scrollheight}]">
<!-- <rich-text :nodes="currentNotice.content"></rich-text> -->
<view class="htmls" style="line-height: 50rpx;text-indent: 2em;" v-html="currentNotice.content">
</view>
</scroll-view>
<view style="margin-top: 40rpx;"></view>
<u-button type="primary" @click="closeInfo">知道了</u-button>
</view>
</view>
</u-popup>
<u-popup :show="successshow" customStyle="width:600rpx;height:300rpx;text-align:center" :round="10"
mode="center" width="600rpx" height="150rpx">
<view class="">
<view class="successBox">
<!-- <u-icon name="checkmark-circle" size="90" color="#EF9525"></u-icon> -->
<view class="h3">您已经预约成功</view>
<view class="p">即将跳转到参观预约 {{time}} s</view>
</view>
<view class="pinkBtn" @click="goHome">返回首页</view>
</view>
</u-popup>
<u-calendar ref="calendar" :show-confirm="false" :show="showCalendar" :minDate="minDate" :maxDate="maxDate"
color="#EF9525" round="20" defaultDate="2022-02-15" @confirm="handleSelectDate" @close="closecalendar">
</u-calendar>
</view>
</template>
<script>
export default {
data() {
const d = new Date()
const year = d.getFullYear()
let month = d.getMonth() + 1
month = month < 10 ? `0${month}` : month
const date = d.getDate()
return {
successshow: false,
time: 3,
showInfo: false,
currentNotice: {},
maxheight: "",
scrollheight: "",
notice: [{
title: "预约须知",
content: "预约须知的内容"
}, {
title: "批量上传帮助",
content: "<p>1.批量上传EXCEL的以xlsx结尾</p><p>2.第一行为标题行 姓名 手机号 证件号 行动不便者</p><p>3.文件是从微信聊天记录中选取或者微信文件传输助手</p><img src='@host@/export.png?v=1.1' style='width:100%'/>"
}],
specialtype: false,
specialid: 0,
common_user: [],
t: null,
timer: null,
form: {
date: "",
rule_id: "",
unit: "",
leader: "",
card_type: 1,
idcard: "",
total: 1,
mobile: "",
type: "",
details_list: []
},
formUser: {
name: "",
idcard: "",
mobile: "",
card_type: 1,
is_disability: 0,
},
rules: {
name: [{
required: true,
message: '请输入姓名',
trigger: 'blur'
}],
idcard: [{
required: true,
message: '请输入证件号',
trigger: 'blur'
}],
card_type: [{
required: true,
message: '请选择证件类型',
trigger: 'change'
}]
},
listVistor: [{}, {}],
showAdd: false,
showInfo: false,
showBook: false,
minDate: `${year}-${month}-${date + 1}`,
maxDate: `${year}-${month}-${date + 7}`,
showCalendar: false,
listDatePrice: [],
currentDate: {},
currentTime: {},
bcurrentDate: {},
bcurrentTime: {},
currentIndex: 0,
listCalendar: [],
type: "user",
user: {},
minCount: 1,
maxCount: 1,
config: {},
info: {},
editIndex: -1,
disabilitys: [{
idx: 0,
name: '否'
},
{
idx: 1,
name: '是'
}
],
cardshow: false,
cardshows: false,
card_type_name: "身份证",
card_type_names: "身份证",
// cardLists:['身份证','港澳台居民居住证','护照','台胞证','港澳证'],
cardLists: [
[{
value: 1,
label: '身份证'
},
{
value: 3,
label: '港澳台居民居住证'
},
{
value: 2,
label: '护照'
},
{
value: 4,
label: '台胞证'
},
{
value: 5,
label: '港澳证'
}
]
],
}
},
onReady() {
// 如果需要兼容微信小程序的话,需要用此写法
this.$refs.calendar.setFormatter(this.formatter)
this.$refs.formUser.setRules(this.rules);
},
onLoad(options) {
this.loadConfig();
this.loadInfo();
this.openNoticeInfo(0);
if (options.currentDate) {
this.bcurrentDate = JSON.parse(options.currentDate);
this.currentDate = this.bcurrentDate;
}
if (options.currentTime) {
this.bcurrentTime = JSON.parse(options.currentTime);
this.currentTime = this.bcurrentTime;
}
this.form.type = (options.from == 'user' ? 2 : 1);
this.type = options.from;
this.load3Day(this.bcurrentDate.date);
uni.setNavigationBarTitle({
title: (options.from == 'user' ? "个人预约" : "团队预约")
})
//this.maxCount = (type == 'user' ? 5 : 50);
var that = this;
that.util.getUserInfo(function(r) {
that.user = r;
that.form.mobile = r.mobile;
}, true);
that.loadCommonUser();
that.maxheight = wx.getSystemInfoSync().windowHeight * 0.6 + "px"
that.scrollheight = wx.getSystemInfoSync().windowHeight * 0.6 * 0.7 + "px"
},
onHide() {
clearInterval(this.t)
clearTimeout(this.timer)
},
onUnload() {
clearInterval(this.t)
clearTimeout(this.timer)
},
methods: {
confirmCards(e) {
this.card_type_names = e.value[0].label
this.form.card_type = e.value[0].value
this.cardshows = false
},
cancel() {
this.cardshow = false
},
cancels() {
this.cardshows = false
},
showCards() {
this.cardshows = true
},
confirmCard(e) {
this.card_type_name = e.value[0].label
this.formUser.card_type = e.value[0].value
this.cardshow = false
},
showCard() {
this.cardshow = true
},
goHome() {
uni.switchTab({
url: "/pages/index/index"
})
},
radioChange(val) {
console.log(val)
this.specialtype = !this.specialtype;
if (this.specialtype) {
this.specialid = val[0]
} else {
this.specialid = 0
}
// if(this.$refs.radio.currentValue){
// this.specialtype = val;
// }
},
loadCommonUser() {
var that = this;
this.util.request({
api: '/api/mobile/visit/address-book',
utilSuccess: function(res) {
for (var m of res) {
m.checked = false
}
that.common_user = res;
console.log(that.common_user)
},
utilFail: function(res) {
}
})
},
handleCommonUser(obj) {
obj.checked = !obj.checked
if (obj.checked) {
this.form.details_list.push(obj)
} else {
for (var i = 0; i < this.form.details_list.length; i++) {
if (this.form.details_list[i].name == obj.name) {
this.form.details_list.splice(i, 1)
}
}
}
},
loadConfig() {
var that = this;
this.util.request({
api: '/api/mobile/visit/visit-defualt-config',
utilSuccess: function(res) {
that.config = res;
if (that.type == "user") {
that.maxCount = res.person_max_count;
that.minCount = 1;
} else {
that.maxCount = res.team_max_count;
that.minCount = res.team_min_count;
}
that.form.total = that.minCount;
},
utilFail: function(res) {
}
})
},
loadInfo() {
var that = this;
this.util.request({
api: '/api/mobile/visit/introduce',
utilSuccess: function(res) {
console.log(res);
that.info = res;
that.notice[0].content = (that.type == 'user' ? res.person_notice : res.team_notice)
that.notice[0].content = that.notice[0].content.replace(/\<p/gi, "<p class='richp'");
},
utilFail: function(res) {
}
})
},
closeInfo() {
this.showInfo = false;
},
openNoticeInfo(type) {
this.showInfo = true;
this.notice[type].content = this.notice[type].content.replace("@host@", this.util.HOST);
this.currentNotice = this.notice[type];
},
submitOrder() {
console.log(this.form);
this.form.date = this.currentDate.date;
this.form.rule_id = this.currentTime.id;
// if(this.specialid){
// //
// this.form.is_disability = this.specialid;
// }
if (this.form.details_list.length != this.form.total) {
uni.showToast({
icon: "none",
title: "请正确添加观众数量"
})
return false;
}
if (this.type != "user") {
if (this.util.isNull(this.form.leader)) {
uni.showToast({
icon: "none",
title: "请填写领队姓名"
})
return false;
}
if (this.util.isNull(this.form.mobile)) {
uni.showToast({
icon: "none",
title: "请填写手机号"
})
return false;
} else if (!this.util.phoneRegex.test(this.form.mobile)) {
uni.showToast({
icon: "none",
title: "请正确填写手机号"
})
return false;
}
if (this.util.isNull(this.form.unit)) {
uni.showToast({
icon: "none",
title: "请填写单位名称"
})
return false;
}
if (this.util.isNull(this.form.idcard)) {
uni.showToast({
icon: "none",
title: "请填写证件号"
})
return false;
}
if (this.form.card_type == 1) {
if (!this.util.isValidCardID(this.form.idcard)) {
uni.showToast({
icon: "none",
title: "请正确输入身份证号"
})
return false;
}
}
}
var that = this;
this.util.request({
api: '/api/mobile/visit/order',
method: "POST",
data: this.form,
utilSuccess: function(res) {
console.log(res)
that.successshow = true;
that.t = setInterval(function() {
if (that.time > 0)
that.time = that.time - 1;
}, 1000)
that.timer = setTimeout(function() {
uni.redirectTo({
url: '/pages/order/visitorder'
})
clearInterval(that.t);
clearTimeout(that.timer)
}, 3000)
// uni.showToast({
// icon: "none",
// title: "下单成功",
// complete() {
// uni.redirectTo({
// url: "/pages/success/success?from=visit&id=" + res.id
// })
// }
// })
},
utilFail: function(res) {
that.util.toast(res);
}
})
},
selectFile() {
let _that = this
wx.chooseMessageFile({
count: 1, //最多可以选择的文件个数,可以 0100
type: 'file', //所选的文件的类型,具体看官方文档
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFiles[0].path
let filename = res.tempFiles[0].name; //用于页面显示的名字
// 这一步判断可以省略,如果需求没有格式要求的话
if (filename.indexOf(".xlsx") == -1) {
uni.showToast({
icon: "none",
title: "暂时仅支持xlsx格式的文件"
})
return
} else {
console.log("开始上传");
uni.showLoading({
title: "正在上传"
})
wx.uploadFile({
url: _that.util.HOST + '/api/mobile/visit/excel-analyse', //上传的路径
filePath: tempFilePaths, //刚刚在data保存的文件路径
name: 'file', //后台获取的凭据
formData: { //如果是需要带参数请在formData里面添加不需要就去掉这个就可以的
"token": uni.getStorageSync("userInfo_token").token
},
success(res) {
console.log(res);
if (res.data.indexOf("err") > -1) {
var err = JSON.parse(res.data);
_that.util.toast("导入失败,原因‘" + err.errmsg + "’请查看批量导入说明");
} else {
var jsonlist = JSON.parse(res.data);
_that.form.total=jsonlist.length;
for (var m of jsonlist) {
_that.form.details_list.push({
name: m.name,
idcard: m.idcard,
mobile: m.mobile,
card_type: 1,
is_disability: 0
})
}
}
},
fail(error) {
console.log(error);
}
})
uni.hideLoading();
}
}
})
},
handleAddUser() {
var that = this;
//验证表单
try {
this.$refs.formUser.validate().then(res => {
if (that.formUser.card_type == 1) {
that.formUser.idcard = that.formUser.idcard.toUpperCase();
if (!that.util.isValidCardID(that.formUser.idcard)) {
uni.showToast({
icon: "none",
title: "请正确输入身份证号"
})
return false;
}
}
// if (this.util.isNull(this.formUser.mobile)) {
// uni.showToast({
// icon: "none",
// title: "请填写手机号"
// })
// return false;
// } else if (!this.util.phoneRegex.test(this.formUser.mobile)) {
// uni.showToast({
// icon: "none",
// title: "请正确填写手机号"
// })
// return false;
// }
if (!this.util.isNull(this.formUser.mobile)) {
if (!this.util.phoneRegex.test(this.formUser.mobile)) {
uni.showToast({
icon: "none",
title: "请正确填写手机号"
})
return false;
}
}
//判断是不是编辑 如果是编辑
if (that.editIndex != -1) {
that.form.details_list.splice(that.editIndex, 1, that.formUser)
} else
that.form.details_list.push(that.formUser);
// that.addUserAfter();
that.showAdd = false;
}).catch(errors => {
uni.showToast({
icon: "none",
title: "观众信息提交不正确"
})
})
} catch (e) {
console.log(e)
//TODO handle the exception
}
},
addUserAfter() {
if (this.type == "user") {
var user = this.form.details_list[0];
if (this.form.leader != "")
this.form.leader = user.name;
}
},
closecalendar() {
this.showCalendar = false;
},
handleSelectDate(e) {
let that = this;
if (e.length != 0) {
var date = e[0]
var mod = this.listCalendar.filter((p) => {
return p.is_open == 1 && p.remain_count != 0 && p.date == date;
})
if (mod.length != 0) {
this.load3Day(date, function(isCanbook) {
if (isCanbook) {
that.showCalendar = false;
that.bcurrentTime = null;
} else {
that.util.toast("您选择的日期不可预约")
}
});
} else {
that.util.toast("您选择的日期不可预约")
}
}
},
openCalendar() {
var that = this;
var edate = this.$moment().add('days', 7).format("yyyy-MM-DD");
var ndate = this.$moment().add('days', 1).format("yyyy-MM-DD")
this.loadCalendar(ndate, edate, function(res) {
that.listCalendar = res;
that.showCalendar = true;
});
},
formatter(day) {
for (var m of this.listCalendar) {
let date = this.$moment(day.date).format("yyyy-MM-DD");
if (date == m.date) {
if (m.is_open == 1) {
if (m.remain_count == 0) {
day.bottomInfo = '不可预约'
} else {
day.bottomInfo = '可预约'
}
} else {
day.bottomInfo = '闭馆'
}
}
}
return day
},
handleDate(index) {
var nt = this.$moment().format("yyyy-MM-DD");
let list = this.listDatePrice;
let cdate = list[index];
if (cdate.is_open === 0) {
uni.showToast({
icon: "none",
title: "该日期已经闭馆"
})
return;
}
if (cdate.remain_count === 0) {
uni.showToast({
icon: "none",
title: "该日期已不可预约"
})
return;
}
for (var m of list) {
m.checked = false;
}
cdate.checked = true;
this.currentDate = cdate;
this.loadDefaultTime(cdate.rules);
this.listDatePrice = list;
this.$forceUpdate();
},
handleSelectTime(index) {
var mod = this.currentDate.rules[index];
if (mod.remain_count == 0) {
this.util.toast("该时段已不可预约");
return false
}
for (var m of this.currentDate.rules) {
m.checked = false;
}
mod.checked = true;
this.currentTime = mod;
this.$forceUpdate();
},
load3Day(sdate, callbak) { //加载7天数据
var that = this;
that.listDatePrice = [];
var edate = this.$moment(sdate).add('days', 2).format("yyyy-MM-DD");
var ndate = this.$moment(sdate).add('days', 0).format("yyyy-MM-DD")
var nt = this.$moment().format("yyyy-MM-DD");
var mt = this.$moment().add('days', 1).format("yyyy-MM-DD");
var ht = this.$moment().add('days', 2).format("yyyy-MM-DD");
var selectDate = (nt == sdate) ? ndate : sdate;
this.loadCalendar(sdate, edate, function(res) {
that.listDatePrice = res;
var i = 0;
let isOpenDate = false;
for (var m of that.listDatePrice) {
m.checked = false;
m.datef = that.$moment(m.date).format("MM月DD日");
var week = that.$moment(m.date).format("dddd");
if (m.date == nt)
m.week = "今天";
else if (m.date == mt) {
m.week = "明天";
} else if (m.date == ht) {
m.week = "后天";
} else {
m.week = week;
}
if (m.date == selectDate) {
if (m.is_open == 1 && m.remain_count > 0) {
m.checked = true;
that.currentDate = m;
that.currentIndex = i;
that.loadDefaultTime(m.rules);
isOpenDate = true;
} else {
isOpenDate = false;
/* uni.showToast({
icon: "none",
title: selectDate + "不可以预约",
complete() {
setTimeout(function() {
that.load3Day(that.$moment(selectDate).add('days', 1)
.format("yyyy-MM-DD"))
}, 2000)
}
}, 2000) */
}
}
i++;
}
if (callbak)
callbak(isOpenDate);
})
},
loadCalendar(sdate, edate, cb) {
var that = this;
this.util.request({
api: '/api/mobile/visit/get-calendar',
data: {
start_date: sdate,
end_date: edate
},
utilSuccess: function(res) {
cb(res);
},
utilFail: function(res) {
}
})
},
loadDefaultTime(rules) {
var that = this;
var nt = new Date();
that.currentTime = {};
let isDefault = false;
for (var mod of rules) {
mod.checked = false;
if (that.bcurrentTime) {
if (that.bcurrentTime.id == mod.id) {
mod.checked = true;
that.currentTime = that.bcurrentTime;
}
} else {
mod.endtime = that.currentDate.date + " " + mod.end_time;
var isCanbook = that.$moment(nt).isBefore(mod.endtime);
mod.isCanbook = isCanbook;
if (!isDefault && mod.remain_count > 0 && isCanbook) {
isDefault = true;
mod.checked = true;
that.currentTime = mod;
}
}
}
},
closeAdd() {
this.showAdd = false
},
openAdd(index) {
this.formUser = this.$options.data().formUser;
if (index || index == 0) {
console.log(index)
this.editIndex = index;
let r = Object.assign(this.formUser, this.form.details_list[index]);
} else
this.editIndex = -1;
this.showAdd = true
},
delUser(index) {
for (var i = 0; i < this.common_user.length; i++) {
if (this.form.details_list[index].name == this.common_user[i].name) {
this.common_user[i].checked = false;
}
}
this.form.details_list.splice(index, 1);
}
}
}
</script>
<style lang="scss">
@import url("@/static/css/bookbox.css");
.timeitem-none {
color: #ccc;
}
.box-visitor-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
.box-visitor-item-left {
display: flex;
}
.box-visitor-info {
font-size: 32rpx;
color: #4E4E4E;
margin-left: 22rpx;
}
.box-visitor {
margin: 32rpx 0rpx 27rpx 0rpx;
}
.box-footer {
display: flex;
justify-content: space-between;
padding-top: 28rpx;
border-top: 2px solid #F7F6F4;
}
.box-footer-left {
display: flex;
flex: 1;
margin-right: 8rpx;
}
.box-footer-right {
display: flex;
flex: 1;
margin-left: 8rpx;
}
.box-button-txt {
margin-left: 20rpx;
}
.box-button {
display: flex;
background: #FCF6E3;
border: 1px solid #EF9525;
border-radius: 5px;
padding: 20rpx 0rpx;
width: 100%;
justify-content: center;
color: #4E4E4E;
}
.box-tips {
background-color: #f7f6f4;
height: 62rpx;
line-height: 62rpx;
color: #828282;
padding: 0rpx 16rpx;
font-size: 24rpx;
}
.page-bottom {
background: #FFFFFF;
height: 108rpx;
box-shadow: 2rpx 3rpx 10rpx 0rpx rgba(107, 94, 77, 0.3);
width: 100%;
position: fixed;
bottom: 0;
left: 0;
padding: 15rpx 25rpx;
box-sizing: border-box;
z-index: 1024;
}
.content {
background-color: #f7f6f4;
padding: 31rpx 26rpx;
min-height: 100vh;
padding-bottom: 128rpx;
}
.box-card {
background: #FFFFFF;
border-radius: 16rpx;
padding: 31rpx 18rpx;
margin-bottom: 20rpx;
}
.u-form-item__body__left__content__label {
color: #4E4E4E !important;
}
.box-card-title {
font-size: 32rpx;
color: #351C1B;
padding-bottom: 25rpx;
border-bottom: 2px solid #F7F6F4;
}
.commonuser .book-box-row-timeitem {
width: 160rpx;
text-align: center;
}
// .mpopup{
// max-height: 400rpx;
// // overflow-y: scroll;
// }
.mpopup-content {
font-size: 32rpx;
// text-indent: 2rem;
}
.box-card-content {}
.successBox {
.iconfont {
color: #00CCB9;
font-size: 180rpx;
}
.h3 {
font-size: 40rpx;
font-weight: 500;
color: #333333;
margin-top: 40rpx;
}
.p {
font-size: 28rpx;
font-weight: 400;
color: #333333;
margin-top: 24rpx;
}
}
.pinkBtn {
width: 50%;
background-image: linear-gradient(45deg, #EF9525 0%, #EF9525 100%);
border-radius: 44rpx;
font-size: 30rpx;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 70rpx;
margin: 30rpx auto;
}
.richp {
margin-bottom: 10rpx;
}
.u-radio-group {
flex-wrap: wrap;
}
.u-radio-group .u-radio {
margin-bottom: 10rpx;
margin-right: 10rpx
}
</style>