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.

666 lines
18 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 flex-row justify-between">
<text class="activityBox-title">{{list.name}}</text>
<view class="tag tag_green">
<text>{{list.target_name}}</text>
</view>
</view>
<view class="activityBox-row">
<text class="icon-shijian iconfont"></text>
<text>活动时间{{list.start_time}}-{{list.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.total==0?'不限':list.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">
<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="(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>
<view class="box-tips">
<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.team_min_count}}人以上可团体预约,一个团体最多{{list.team_max_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>{{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">
<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>
<view class="box-card" v-if="type=='team'">
<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="请输入联系人" 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 cardType"
:key="index" :name=item.id :label="item.name">
</u-radio>
</u-radio-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-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-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 style="margin-top: 80px;"></view>
<u-button type="primary" @click="closeInfo"></u-button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
showAdd: false,
isEdit: false,
isEditIndex: 0,
showInfo: false,
list: {},
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: [],
details_rule: {
name: [{
required: true,
message: '请输入姓名',
trigger: 'blur'
}],
idcard: [{
required: true,
message: '请输入证件号',
trigger: 'blur'
}],
card_type: [{
required: true,
message: '请选择证件类型',
trigger: 'change'
}]
},
cardType: [{
id: 1,
name: '身份证',
},
{
id: 2,
name: '护照',
}
],
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);
var that = this;
wx.getStorage({
key: 'activityinfo',
success(res) {
that.list = res.data;
if(that.form.type==2){
that.form.total = 1
}else if(that.form.type==1){
that.form.total = res.data.team_min_count;
}
}
})
that.util.getUserInfo(function(r) {
that.form.mobile = r.mobile;
}, true);
that.loadCommonUser()
},
methods: {
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)
}
}
}
},
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);
},
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.showAdd = false;
} catch (e) {
console.log(e)
//TODO handle the exception
}
},
selectFile() {
let _that = this
wx.chooseMessageFile({
count: 1, // 0100
type: 'file', //
success(res) {
// tempFilePathimgsrc
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
})
}
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.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;
}
}
var that = this;
this.util.request({
api: '/api/mobile/activity/order',
method: "POST",
data: this.form,
utilSuccess: function(res) {
uni.showToast({
icon: "none",
title: "",
complete() {
uni.redirectTo({
url: "/pages/success/success?from=activity&id=" + res.id
})
}
})
},
utilFail: function(res) {
uni.showToast({
icon: "none",
title: res
})
}
})
},
}
}
</script>
<style>
@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 {}
</style>