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.

1328 lines
36 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="#cf995a" 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<=50">
{{item.remain_count}}张
</view>
<!-- <view class="book-box-row-timeitem-txt" v-else-if="item.remain_count>50">
余票充足
</view> -->
<view class="book-box-row-timeitem-txt" v-if="item.remain_count<=0">已约满</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="#cf995a" 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="参观人数" v-if="type=='user'" labelWidth="120" prop="total" ref="total">
<u-number-box slot="right" v-model="form.total" inputWidth="44" color="#cf995a"
bgColor="#FCF6E3" :min="minCount" :max="maxCount" class="plus">
</u-number-box>
</u-form-item>
<u-form-item v-else label="人数" labelWidth="120" prop="total" ref="total">
<!-- {{form.total}} 请添加参与名单 -->
<u-number-box slot="right" v-model="form.total" inputWidth="44" color="#cf995a"
bgColor="#FCF6E3" :min="minCount" :max="maxCount" class="plus">
</u-number-box>
</u-form-item>
<view class="box-tips">
<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" style='font-size: 30rpx;'>
常用人
</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>
</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="#cf995a"></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="#cf995a"></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="#cf995a" size="40rpx"></u-icon>
<text class="book-box-selectInfo-righttxt" style="margin-left: 20rpx;">批量导入说明</text>
</view>
</view> -->
</view>
</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-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-cell-group :border="false">
<u-cell @click="showCard" :title="card_type_name" :isLink="true" arrow-direction="down">
</u-cell>
</u-cell-group>
</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="#cf995a" v-for="(item, index) in disabilitys"
:key="index" :name=item.idx :label="item.name">
</u-radio>
</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}]">
<view class="htmls" style="line-height: 50rpx;text-indent: 2em;" v-html="currentNotice.content">
</view>
<view @click="downLoad" style="color:#cf995a ;" v-if="currentNotice.isTemplate">下载模版</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">
<view class="h3">您已经填报成功</view>
<view class="p">即将跳转到参观信息 {{time}} s</view>
</view>
<view class="pinkBtn" @click="goHome">返回首页</view>
</view>
</u-popup>
<u-popup :show="showAuthorization" closeable mode="bottom" @close="closePhone" :round="10">
<view class="box">
<view class="box-title" style="text-align: center;padding: 20rpx 0;font-size: 32rpx;">
{{isH5 ? '请输入您的手机号' : '请授权您的手机号'}}
</view>
<view class="box-content" style="padding: 20px;">
<!-- H5环境手动输入手机号 -->
<view v-if="isH5">
<u-input v-model="inputMobile" placeholder="请输入手机号" type="number" maxlength="11"></u-input>
<u-button type="primary" @click="confirmMobile" style="margin-top: 20rpx;">确认</u-button>
</view>
<!-- 小程序环境:微信授权 -->
<u-button v-else type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号
</u-button>
</view>
</view>
</u-popup>
<u-calendar ref="calendar" :show-confirm="false" :show="showCalendar" :minDate="minDate" :maxDate="maxDate"
color="#cf995a" 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 {
showAuthorization: false,
successshow: false,
time: 3,
showInfo: false,
currentNotice: {},
isH5: false,
inputMobile: '',
maxheight: "",
scrollheight: "",
notice: [{
title: "参观须知",
content: "参观须知的内容",
isTemplate:false
}, {
title: "批量上传帮助",
content: "<p>1.批量上传EXCEL的以xlsx结尾</p><p>2.第一行为标题行 姓名 手机号 行动不便者</p><p>3.文件是从微信聊天记录中选取或者微信文件传输助手</p><img src='@host@/export.png?v=1.1' style='width:100%'/>",
isTemplate:true
}],
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;
// 检测运行环境
this.isH5 = typeof window !== 'undefined' && window.location
//先登录
that.util.getOpenidInfo(function(res) {
//手机号
that.util.getUserInfo(function(r) {
that.user = r;
//如果手机号为空 需要先授权手机号
if (that.util.isNull(r.mobile)) {
that.showAuthorization = true;
} else {
that.showAuthorization = false;
that.form.mobile = r.mobile;
}
}, true);
that.loadCommonUser()
}, true);
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)
},
onShareAppMessage() {
return this.util.shareInfo
},
onShareTimeline(){
return this.util.shareInfo
},
onUnload() {
clearInterval(this.t)
clearTimeout(this.timer)
},
methods: {
//关闭手机授授权
closePhone() {
this.showAuthorization = false
},
// H5环境确认手机号
confirmMobile() {
if (!this.inputMobile) {
uni.showToast({ title: '请输入手机号', icon: 'none' })
return
}
if (!/^1[3-9]\d{9}$/.test(this.inputMobile)) {
uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
return
}
var that = this;
this.util.request({
api: '/api/mobile/user/save',
method: 'POST',
data: {
mobile: this.inputMobile
},
utilSuccess: function(res) {
that.form.mobile = that.inputMobile;
that.showAuthorization = false
},
utilFail: function(res) {
uni.showToast({ title: '手机号保存失败', icon: 'none' })
}
})
},
// 小程序环境:微信授权获取手机号
getPhoneNumber(e) {
var that = this;
this.util.request({
api: '/api/mobile/user/mobile',
data: {
code: e.detail.code
},
utilSuccess: function(res) {
that.form.mobile = res.mobile;
that.showAuthorization = false
},
utilFail: function(res) {
}
})
},
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
}
},
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;
},
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)
}
}
}
},
downLoad() {
const downloadTask = uni.downloadFile({
url: 'https://gbyuyue.szgmbwg.org.cn/Template.xlsx', //仅为示例,并非真实的资源
success: (res) => {
var filePath = res.tempFilePath
if (res.statusCode === 200) {
uni.openDocument({
filePath: filePath,
showMenu: true,
success: function(res) {
console.log('打开文档成功')
}
})
}
}
});
downloadTask.onProgressUpdate((res) => {
console.log('下载进度' + res.progress);
console.log('已经下载的数据长度' + res.totalBytesWritten);
console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
});
},
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;
that.form.total = that.minCount;
} 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) {
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() {
this.form.date = this.currentDate.date;
this.form.rule_id = this.currentTime.id;
if(this.type!='team'){
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: '/packages/order/visitorder'
})
clearInterval(that.t);
clearTimeout(that.timer)
}, 3000)
},
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 {
console.log(res.data);
var jsonlist = JSON.parse(res.data);
console.log(jsonlist);
_that.form.total = jsonlist.length || 6;
for (var m of jsonlist) {
console.log("m", m);
_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)) {
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;
// that.form.total = that.form.details_list.length;
}).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.isCanbook) {
return false
}
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;
}
}
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;
mod.endtime = that.currentDate.date + " " + mod.end_time;
var isCanbook = that.$moment(nt).isBefore(mod.endtime);
mod.isCanbook = isCanbook;
if (that.bcurrentTime) {
if (that.bcurrentTime.id == mod.id) {
mod.checked = true;
that.currentTime = that.bcurrentTime;
}
} else {
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) {
this.editIndex = index;
let r = Object.assign(this.formUser, this.form.details_list[index]);
} else
this.editIndex = -1;
this.formUser.card_type = 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);
this.form.total = this.form.details_list.length;
}
}
}
</script>
<style lang="scss" scoped>
@import url("@/static/css/bookbox.css");
.timeitem-none {
color: #ccc;
}
.commonuser .book-box-row-timeitem{
font-size:30rpx;
border-radius: 10rpx;
}
.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 #cf995a;
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, #cf995a 0%, #cf995a 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
}
.book-box-row-timeitem {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 32%;
padding: 19rpx 21rpx!important;
}
.book-box-row-timeitem-txt {
width:100%
}
</style>