From c2b8e37ea9c689276f3eb75bcd3588074d141fc1 Mon Sep 17 00:00:00 2001
From: Lion <120344285@qq.com>
Date: Fri, 13 May 2022 17:35:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B4=BB=E5=8A=A8=E9=A2=84=E7=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/activity/book.vue | 498 +++++++++++++++++++++++++++++++---------
 pages/activity/info.vue |  12 +-
 2 files changed, 396 insertions(+), 114 deletions(-)

diff --git a/pages/activity/book.vue b/pages/activity/book.vue
index 19a3179..31c82d1 100644
--- a/pages/activity/book.vue
+++ b/pages/activity/book.vue
@@ -5,7 +5,40 @@
 				<view class="box-card-title">
 					预约的活动
 				</view>
-				<view class="box-card-content">
+				<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.substring(11,list.end_time.length)}}</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">
+						<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>
@@ -15,34 +48,54 @@
 						参与人员
 					</view>
 					<view class="box-card-content">
-						<u-form-item label="参与人数" labelWidth="120" prop="from.number" ref="number">
-							<u-number-box slot="right" inputWidth="44" color="#EF9525" bgColor="#FCF6E3" :min="1"
-								:max="100" class="plus"></u-number-box>
+						<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:8)" :max="(type=='user'?5:50)" class="plus">
+							</u-number-box>
 						</u-form-item>
+						<view class="box-tips">
+							<text class="box-tips-txt" v-if="type=='user'">每单限购5张，同一身份证当天限购1张</text>
+							<text class="box-tips-txt" v-if="type=='team'">8人以上可团体预约，一个团体最多50人</text>
+						</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"></u-icon>
+										<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="editDetails(index)" name="edit-pen" size="24" color="#828282"></u-icon>
+										<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">
+							<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>
@@ -51,55 +104,76 @@
 						联系人信息
 					</view>
 					<view class="box-card-content">
-						<u-form-item label="单位名称" labelWidth="80" prop="from.unit" ref="unit">
-							<u-input placeholder="请输入单位名称"></u-input>
+						<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>
-						<u-form-item label="联系人" labelWidth="80" prop="from.leader" ref="leader">
-							<u-input placeholder="请输入联系人"></u-input>
-						</u-form-item>
-						<u-form-item label="手机号" labelWidth="80" prop="from.mobile" ref="mobile">
-							<u-input placeholder="请输入手机号"></u-input>
+						<block v-if="type=='team'">
+							<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 placeholder="请输入手机号" v-model="form.mobile"></u-input>
 						</u-form-item>
 					</view>
 				</view>
 			</u--form>
 			<view class="page-bottom">
-				<u-button type="primary">确定</u-button>
+				<u-button type="primary" @click="submitOrder">确定</u-button>
 			</view>
 		</view>
-		<u-popup :show="showAdd" mode="bottom" @close="closeAdd" @open="openAdd" :round="10" closeable>
+		<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="details_form" :rules="details_rule" ref="details_form">
-						<u-form-item label="姓名" labelWidth="80" prop="details_form.name" ref="details_form.name">
-							<u-input v-model="details_form.name" placeholder="请输入姓名"></u-input>
+					<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 @click="showCardType=true" label="证件类型" labelWidth="80" prop="details_form.card_name" ref="details_form.card_type">
-							<u--input v-model="details_form.card_name" placeholder="选择证件类型" disabled suffixIcon="arrow-down-fill"
-								suffixIconStyle="color: #A7A7A7;font-size:24rpx">
-							</u--input>
+						<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="details_form.idcard" ref="details_form.idcard">
-							<u-input v-model="details_form.idcard" placeholder="请输入证件号码"></u-input>
+						<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="details_form.mobile" ref="details_form.mobile">
-							<u-input v-model="details_form.mobile" placeholder="请输入手机号"></u-input>
+						<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-action-sheet
-						:show="showCardType"
-						:actions="cardType"
-						title="请选择证件类型"
-						@close="showCardType = false"
-						@select="sexSelect"
-					>
-					</u-action-sheet>
-					<u-button type="primary" @click="pushDetails(isedit)">确定</u-button>
+					<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>
@@ -107,95 +181,295 @@
 <script>
 	export default {
 		data() {
-			return {
-				form: {
-					activity_id:"",
-					unit:"",
-					leader:"",
-					card_type:"",
-					idcard:"",
-					total:"",
-					type:"",
-					details_list:[]
-				},
-				details_form:{
-					name:"",
-					card_type:"",
-					card_name:"",
-					idcard:"",
-					mobile:""
-				},
-				rules: [],
-				details_rule:{
-					name: [
-						{
-							required: true,
-							message: '请输入姓名',
-							trigger: ['blur', 'change']
-						}
-					]
-				},
-				cardType: [{
-						id:1,
-						name: '身份证',
-					},
-					{
-						id:2,
-						name: '护照',
-					}
-				],
+			return {
 				showAdd: false,
-				showCardType:false
+				isEdit: false,
+				isEditIndex: 0,
+				showInfo: false,
+				list:{},
+				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>"
+				}]
 			}
 		},
+		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
+			  }
+			})
+					console.log(this.list)
+			
+			that.util.getUserInfo(function(r) {
+				that.form.mobile = r.mobile;
+			}, true);
+		},
 		methods: {
 			closeAdd() {
-				this.showAdd = false
-				this.details_form={
-					name:"",
-					card_type:"",
-					idcard:"",
-					mobile:""
-				}
+				this.showAdd = false
 			},
-			openAdd() {
+			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) {
+				this.form.details_list.splice(index, 1);
 			},
-			sexSelect(e) {
-				console.log(e);
-				this.details_form.card_name = e.name;
-				this.details_form.card_type = e.id;
+			closeInfo() {
+				this.showInfo = false;
 			},
-			editDetails(obj){
-				this.showAdd = true;
-				this.details_form = this.form.details_list[obj];
-				// this.pushDetails(obj);
+			openNoticeInfo(type) {
+				this.showInfo = true;
+				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 (!uni.$u.test.idCard(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
+				}
+
 			},
-			pushDetails(obj){
-				var that = this;
-				this.$refs.details_form.validate().then(res => {
-					uni.$u.toast('校验通过')
-					if(res){
-						that.form.details_list.push(that.details_form);
-						this.details_form={
-							name:"",
-							card_type:"",
-							idcard:"",
-							mobile:""
+			selectFile() {
+				let _that = this
+				wx.chooseMessageFile({
+					count: 1, //最多可以选择的文件个数，可以 0～100
+					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
+										})
+									}
+									uni.hideLoading();
+								}
+							})
+							console.log('上传到服务器')
 						}
-						this.showAdd = false;
 					}
-				}).catch(errors => {
-					uni.$u.toast('校验失败')
 				})
-			}
+			},
+			submitOrder() {
+				
+				if (this.util.isNull(this.form.leader)) {
+					if (this.type == "user") {
+						uni.showToast({
+							icon: "none",
+							title: "请填写联系人"
+						})
+					} else {
+						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 (!uni.$u.test.idCard(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 (!uni.$u.test.mobile(this.form.mobile)) {
+					uni.showToast({
+						icon: "none",
+						title: "请正确填写手机号"
+					})
+					return false;
+				}
+				if (this.form.details_list.length != this.form.total) {
+					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.reLaunch({
+									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;
diff --git a/pages/activity/info.vue b/pages/activity/info.vue
index 66ea3bb..63ae9bf 100644
--- a/pages/activity/info.vue
+++ b/pages/activity/info.vue
@@ -93,9 +93,10 @@
 			this.loadActiveInfo()
 		},
 		methods: {
-			tobook(type) {
+			tobook(type) {
+
 				uni.navigateTo({
-					url: "book?type=" + type
+					url: "book?type=" + type + "&activity_id="+this.id 
 				})
 			},
 			loadActiveInfo(){
@@ -109,6 +110,13 @@
 					},
 					utilSuccess: function(res) {
 						that.list = res;
+						wx.setStorage({
+							key: 'activityinfo',
+							data: res,
+							success: ()=> {
+								console.log('存储成功');
+							}
+						})
 					},
 					utilFail: function(res) {