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.

906 lines
25 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 activityBox-content">
<view class="activityBox-row ">
<view class="activityBox-title">{{list.name}}</view>
<view class="tag tag_green activityBox_btn" v-if="false">
<text>{{numberlist.name}}</text>
</view>
</view>
<view class="activityBox-row">
<text class="icon-shijian iconfont"></text>
<text>活动时间:{{timeFormat(numberlist.start_time,"yyyy年MM月DD日")}}
{{getHm(numberlist.start_time)}}-{{getHm(numberlist.end_time)}}</text>
</view>
<!-- <view class="activityBox-row">
<text class="icon-huodongfangshi iconfont"></text>
<text>活动方式:{{list.area_name}}</text>
</view> -->
<view class="activityBox-row">
<text class="icon-huodong iconfont"></text>
<text>活动地址:{{list.address}}</text>
</view>
<view class="activityBox-row">
<text class="icon-renshu iconfont"></text>
<text>{{list.form==2?'起约人数':'人数限制'}}{{(list.form==2?10 : (numberlist.total==0?'不限':numberlist.total))}}</text>
</view>
<view class="activityBox-row flex-row align-center" @click="tothere">
<text class="icon-ditu-dibiao iconfont"></text>
<text>距离:{{list.distance}}km</text>
<view class="tomap">
<text class="icon-daohang1 iconfont" style="margin-right: 0;"></text>
</view>
</view>
</view>
</view>
<u--form labelPosition="left" :model="form" :rules="rules" ref="form">
<view class="box-card" v-if="type=='team'">
<view class="box-card-title">
参加人数
</view>
<view class="box-card-content">
<u-form-item label="人数" labelWidth="120" prop="total" ref="total" v-if="type=='team'">
<u-number-box slot="right" v-model="form.total" inputWidth="44" color="#EF9525"
bgColor="#FCF6E3" :min="(list.form==2?10:(type=='user'?1:list.team_min_count))"
:max="(type=='user'?list.person_max_count:list.team_max_count)" class="plus">
</u-number-box>
</u-form-item>
<!-- <u-form-item v-else label="人数" labelWidth="120" prop="total" ref="total">
{{form.total}} 请添加参与名单
</u-form-item> -->
<!-- <view class="box-tips" v-if="type=='team'">
<text class="box-tips-txt"
v-if="type=='user'">每单限购{{list.person_max_count}}张同一身份证当天限购1张</text>
<text class="box-tips-txt"
v-if="type=='team'">{{list.form==2?10:list.team_min_count}}人以上可团体预约</text>
</view> -->
<!-- <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="">
<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">
<u-icon @click="openAdd(index)" 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>
<!-- v-if="type=='team'" -->
<view class="box-card">
<view class="box-card-title">
联系人信息
</view>
<view class="box-card-content">
<u-form-item :label="(type=='team'?'领队人':'预约人')" labelWidth="80" prop="leader" ref="leader"
required>
<u-input :placeholder="`请输入${type=='team'?'领队人':'预约人'}`" v-model="form.leader"></u-input>
</u-form-item>
<block>
<u-form-item v-if="type=='team'" 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>
</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="details_rule" ref="formUser">
<u-form-item label="姓名" labelWidth="80" prop="formUser.name" ref="formUser.name" required>
<u-input v-model="formUser.name" placeholder="请输入姓名"></u-input>
</u-form-item>
<u-form-item label="证件类型" labelWidth="80" prop="formUser.card_type" ref="formUser.card_type"
required>
<!-- <u-radio-group v-model="formUser.card_type">
<u-radio width="50%" activeColor="#EF9525" v-for="(item, index) in cardType"
:key="index" :name=item.id :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-form-item>
<u-form-item label="证件号码" labelWidth="80" prop="formUser.idcard" ref="formUser.idcard" required>
<u-input v-model="formUser.idcard" placeholder="请输入证件号码"></u-input>
</u-form-item>
<u-form-item label="手机号" labelWidth="80" prop="formUser.mobile" ref="formUser.mobile">
<u-input v-model="formUser.mobile" placeholder="请输入手机号"></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">
<view class="mpopup-title">
{{currentNotice.title}}
</view>
<view class="mpopup-content" style="margin-top: 60rpx;">
<rich-text :nodes="currentNotice.content"></rich-text>
<view @click="downLoad" style="color:#EF9525 ;" v-if="currentNotice.isTemplate">下载模版</view>
<view style="margin-top: 80px;"></view>
<u-button type="primary" @click="closeInfo">知道了</u-button>
</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;">
请授权您的手机号
</view>
<view class="box-content" style="padding: 20px;">
<u-button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
</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">报名成功后具体事宜请联系金老师65166121</view>
<view class="p">即将跳转到活动预约 {{time}} s</view>
</view>
<view class="pinkBtn" @click="goHome"></view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
successshow: false,
showAuthorization: false,
time: 3,
showAdd: false,
isEdit: false,
isEditIndex: 0,
showInfo: false,
list: {},
numberlist: {},
common_user: [],
form: {
unit: "",
leader: "",
card_type: 1,
idcard: "",
total: 1,
type: "",
mobile: "",
details_list: []
},
formUser: {
name: "",
card_type: 1,
idcard: "",
mobile: ""
},
type: "user",
rules: [],
t: null,
timer: null,
details_rule: {
name: [{
required: true,
message: '请输入姓名',
trigger: 'blur'
}],
idcard: [{
required: true,
message: '请输入证件号',
trigger: 'blur'
}],
card_type: [{
required: true,
message: '请选择证件类型',
trigger: 'change'
}]
},
cardshow: false,
cardshows: false,
card_type_name: "身份证",
card_type_names: "身份证",
// cardLists:['身份证','港澳台居民居住证','护照','台胞证','港澳证'],
cardLists: [
[{
value: 1,
label: '身份证'
},
{
value: 2,
label: '港澳台居民居住证'
},
{
value: 3,
label: '护照'
},
{
value: 4,
label: '台胞证'
},
{
value: 5,
label: '港澳证'
},
{
value: 6,
label: '外国人永久居留身份证'
}
]
],
currentNotice: {},
notice: [{
title: "预约须知",
content: "预约须知的内容"
}, {
title: "批量上传帮助",
content: "<p>1.批量上传EXCEL的以xlsx结尾</p><p>2.第一列为标题列 姓名 手机号 证件号</p><p>3.文件是从微信聊天记录中选取或者微信文件传输助手</p><img src='@host@/export.png' style='width:100%'/>"
}]
}
},
onLoad(options) {
this.type = options.type;
this.form.type = (options.type == 'user' ? 2 : 1);
this.form.activity_id = parseInt(options.activity_id);
this.form.activity_number_id = parseInt(options.activity_number_id);
},
onShow() {
var that = this;
that.numberlist = {};
wx.getStorage({
key: 'activityinfo',
success(res) {
that.list = res.data;
for (var m of that.list.numbers) {
if (that.form.activity_number_id == m.id) {
that.numberlist = m
}
}
if (that.form.type == 2) {
that.form.total = 1
} else if (that.form.type == 1) {
that.form.total = 1; //res.data.team_min_count;
}
}
})
//先登录
that.util.getOpenidInfo(function(res) {
//手机号
that.util.getUserInfo(function(r) {
//如果手机号为空 需要先授权手机号
if (that.util.isNull(r.mobile)) {
that.showAuthorization = true;
} else {
that.showAuthorization = false;
that.form.mobile = r.mobile;
}
}, true);
that.loadCommonUser()
}, true);
},
onHide() {
clearInterval(this.t)
clearTimeout(this.timer)
},
onUnload() {
clearInterval(this.t)
clearTimeout(this.timer)
},
methods: {
downLoad() {
const downloadTask = uni.downloadFile({
url: 'https://leyitest.ali251.langye.net/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);
});
},
closePhone() {
this.showAuthorization = false
},
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) {
}
})
},
getHm(val) {
if (val) {
return this.$moment(val).format("HH:mm")
} else return "";
},
timeFormat(val, format) {
return this.$moment(val).format(format)
},
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"
})
},
loadCommonUser() {
var that = this;
this.util.request({
api: '/api/mobile/activity/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)
}
}
}
this.form.total = this.form.details_list.length;
},
tothere() {
uni.openLocation({
latitude: parseFloat(this.list.latitude),
longitude: parseFloat(this.list.longitude),
name: this.list.name,
address: this.list.address
})
},
closeAdd() {
this.showAdd = false
},
openAdd(index) {
this.formUser = this.$options.data().formUser;
if (parseInt(index) > 0 || parseInt(index) == 0) {
console.log(index)
let r = Object.assign(this.formUser, this.form.details_list[index]);
this.isEditIndex = index
this.isEdit = true
}
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;
},
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];
},
handleAddUser() {
var that = this;
//验证表单
try {
if (this.util.isNull(this.formUser.name)) {
uni.showToast({
icon: "none",
title: "请填写观众姓名"
})
return false;
}
if (that.formUser.card_type == 1) {
// if (this.util.isNull(this.formUser.idcard)) {
// uni.showToast({
// icon: "none",
// title: "请填写身份证号"
// })
// return false;
// }
// if (!that.util.isValidCardID(that.formUser.idcard)) {
// uni.showToast({
// icon: "none",
// title: "请正确输入身份证号"
// })
// return false;
// }
}
if (that.isEdit) {
that.form.details_list[that.isEditIndex] = that.formUser;
that.isEdit = false
} else {
that.form.details_list.push(that.formUser);
}
that.form.total = that.form.details_list.length;
that.showAdd = false;
} catch (e) {
console.log(e)
//TODO handle the exception
}
},
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) {
var jsonlist = JSON.parse(res.data)
for (var m of jsonlist) {
_that.form.details_list.push({
name: m.name,
idcard: m.idcard,
mobile: m.mobile,
card_type: 1
})
}
_that.form.total = _that.form.details_list.length
uni.hideLoading();
}
})
console.log('上传到服务器')
}
}
})
},
submitOrder() {
// 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.type != "user"){
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;
// }
// }
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.type=='user'){
this.form.details_list.push({
name:this.form.leader,
mobile:this.form.mobile,
card_type:1,
idcard:''
})
}
console.log("this.form",this.form)
// return
var that = this;
this.util.request({
api: '/api/mobile/activity/order',
method: "POST",
data: this.form,
utilSuccess: function(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/activityorder'
})
clearInterval(that.t);
clearTimeout(that.timer)
}, 3000)
},
utilFail: function(res) {
uni.showToast({
icon: "none",
title: res
})
}
})
},
}
}
</script>
<style lang="scss">
@import url("@/static/css/bookbox.css");
@import url("@/static/css/activitybox.css");
.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;
}
.book-box-row-timeitem {
width: 160rpx;
text-align: center;
}
.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;
}
.u-radio-group {
flex-wrap: wrap;
}
.u-radio-group .u-radio {
margin-bottom: 10rpx;
margin-right: 10rpx
}
</style>