great_group/pages/bookticket.vue

<template>
	<view class="pages">
		<view class="" :style="{height: navHeight+'px' }"></view>
		<view class="navbar-box">
			<u-navbar title="订单详情" :safeAreaInsetTop="true" @leftClick="leftClick" :titleStyle="{color:'#fff'}"
				leftIconColor="#fff" bgColor="transparent"></u-navbar>
		</view>
		<view class="page-wrap">
			<view class="base-info">
				<view class="up u-flex">
					<image class="img" :src="pageContent.performImg" mode="aspectFill" alt="" />
						<view class="text">
							<view class="name text-item">{{pageContent.performName}}-{{pageContent.goodsName}}</view>
							<view class="time text-item">日期 {{pageContent.timeDate}}({{pageContent.timeWeek}})</view>
							<view class="time text-item">场次 {{pageContent.performTimeStart}} -
								{{pageContent.performTimeEnd}}</view>
							<view class="num text-item">{{pageContent.goodsName}} / {{pageContent.seatTypeName}}</view>
							<view class=" text-item">{{pageContent.auditoriumName}}</view>
						</view>
				</view>
				<view class="down">
					<view class="num-wrap u-flex u-row-between">
						<view class="title">选购数量</view>
						<view class="num">{{totalVisitor}}</view>
					</view>
				</view>
			</view>
			<view class="block-wrap linkman">
				<view class="block-title u-flex">
					<view class="name">带队负责人</view>
				</view>
				<view class="">
					<view class="item u-flex">
						<view class="til">姓名： </view>
						<u--input placeholder="请输入负责人姓名" border="surround" maxlength="12" v-model="linkName"></u--input>
					</view>
					<view class="item u-flex">
						<view class="til">手机号：</view>
						<u--input placeholder="请输入负责人手机号" border="surround" maxlength="11" v-model="linkPhone"></u--input>
					</view>
				</view>
			</view>
			<view class="block-wrap visitors">
				<view class="block-title u-flex">
					<view class="name">观影人信息 
						<text class="tip" v-if="pageContent.touristMin">最少{{pageContent.touristMin}}个观影人</text>
						<text class="tip" v-if="pageContent.touristMax">最多{{pageContent.touristMax}}个观影人</text> 
					</view>
				</view>
				<view class="people-list">
					<view class="add-wrap" >
						<!-- v-if="!fileList.length" -->
						<u--input placeholder="请输入观影人姓名" border="surround" v-model="newVisitor.name"></u--input>
						<u--input placeholder="请输入观影人身份证" border="surround" v-model="newVisitor.cardId"></u--input>
					</view>
					<view class="btn-wrap u-flex">
						<view class="btn u-flex u-row-center" @click="addVisitor">
							<u-icon name="plus-circle" color="#2D2D2D" size="32rpx"></u-icon>
							<text class="text">新增观影人</text>
						</view>
						<view class="btn u-flex u-row-center">
							<!-- :fileList="fileList" -->
							<u-upload
								@afterRead="afterRead"
								:maxSize="5 * 1024 * 1024"
								@oversize="onOversize"
								 accept=".xlsx,.xls"
								:maxCount="1"
								@select="onSelect"
							>
								<view class="upload-btn u-flex u-row-center">
									<u-icon name="plus-circle" color="#2D2D2D" size="32rpx"></u-icon>
									<text class="text">导入观影人(限制5M)</text>
								</view>
							</u-upload>
						</view>
					</view>
				</view>
				<view class="peoples" v-if="visitors.length>0">
					<view class="peoples-item u-flex u-row-between" v-for="(visitor,index) in displayVisitors" :key="index">
						<view class="left u-flex">
							<u-icon @click="delVisitor(visitor)" name="close-circle" color="#2D2D2D"
								size="32rpx"></u-icon>
							<text class="serial">{{ index + 1 }}</text>
							<text class="name">{{visitor.name}}</text>
							<text class="cardId">{{visitor.cardId}}</text>
						</view>
					</view>
					<view class="expand-btn" v-if="visitors.length > 5" @click="showAllVisitors = !showAllVisitors">
						{{ showAllVisitors ? '收起' : '展开查看更多' }}
						<u-icon :name="showAllVisitors ? 'arrow-up' : 'arrow-down'" size="24rpx" color="#666"></u-icon>
					</view>
				</view>
			</view>
			<view class="notice">
				<view class="title u-flex u-row-between u-border-bottom">
					<text>购票须知</text>
				</view>
				<view class="notice-item parse-content">
					<u-parse :content="pageContent.ticketNotice"></u-parse>
				</view>
			</view>
		</view>
		<u-popup :show="visitorShow">
			<view class="people-show-content">
				<view class="title">
					<view class="cancel" @click="visitorShow=false">取消</view>
					选择观影人
				</view>
				<view class="add-btn u-flex u-row-center" @click="addVisitor">
					添加观影人信息
				</view>
				<view class="list">
					<u-checkbox-group v-model="selectedVisitor" iconPlacement="left">
						<view class="people u-flex u-row-between" v-for="(item,index) in visitorList" :key="index">
							<u-checkbox activeColor="#ED0303" :label="item.name" :name="item.id"></u-checkbox>
							<u-icon name="edit-pen-fill" color="#7F7F7F" size="32rpx"
								@click="editVisitor(item)"></u-icon>
						</view>
					</u-checkbox-group>
				</view>
				<view class="full-btn" @click="confirmVisitor">确定</view>
			</view>
		</u-popup>
		<view class="page-bottom">
			<view class="inner u-flex u-row-between">
				<view class="left u-flex">
					<text>应付金额：</text>
					<view class="total-price">
						{{totalPrice}}
					</view>
				</view>
				<view class="right">
					<view class="btn active" v-if="totalPrice>0&&cansubmit"
						@click="applyOrder">提交报名</view>
					<view class="btn" v-else>提交报名</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		systemInfo
	} from "@/mixin.js";
	// #ifdef H5
	import wxH5 from "weixin-jsapi";
	// #endif
	export default {
		mixins: [systemInfo],
		data() {
			return {
				theatreId:'',
				theatreName:'',
				performId: '',
				performInfo: {},
				pageData: {}, //上个页面传过来的数据
				pageContent: {
					performName: '',
					goodsName: '',
					timeDate: '',
					timeWeek: '',
					seatTypeName: '',
					auditoriumName: '',
					performTimeEnd: '',
					performTimeStart: '',
					purchaser: {
						mobile: '',
						cardId: ''
					},
					ticketNotice: '',
					viewerList: [],
				}, //页面信息
				ticketNotice: '',
				cansubmit: true,
				staticUrl: this.$commonConfig.staticUrl,
				visitors: [], //确认的游客
				visitorShow: false, //游客弹层
				visitorList: [], //游客列表
				selectedVisitor: [], //选中的游客(id)
				params: {}, //要提交的数据
				orderId: '', //订单提交获取
				payResult: {}, //gotoPay结果
				paysuccess: false, //支付结果
				templateIdList: [], //微信小程序订阅消息
				newVisitor:{
					name:'',
					cardId:''
				},
				linkName:'',
				linkPhone:'',
				fileList: [], // 上传的文件列表
				fileUrl: '', // 上传的文件URL
				showAllVisitors: false, // 是否显示所有观影人
			}
		},
		computed: {
			totalPrice() {
				let that = this;
				if(that.pageContent.priceType===1){
					if(this.visitors.length>0){
						return that.pageContent.salePrice
					}else{
						return 0
					}
				}else{
					return this.visitors.reduce((total, item) => {
						let price = null;
						price = Number(that.pageData.salePrice);
						total += price;
						return total;
					}, 0).toFixed(2);
				}
			},
			totalVisitor() {
				let that = this;
				return this.visitors.reduce((total, item) => {
					total += 1;
					return total;
				}, 0);
			},
			needIdcardNumber(){
				if(this.pageContent.oneMany===1&&this.pageContent.personnelNum!==0){
					return this.pageContent.personnelNum
				}else if(this.pageContent.oneMany===1&&this.pageContent.personnelNum===0){
					return null
				}else if(this.pageContent.oneMany===2){
					return 1
				}
			},
			displayVisitors() {
				return this.showAllVisitors ? this.visitors : this.visitors.slice(0, 5);
			}
		},
		onShow() {
		},
		onLoad(page) {
			this.pageData = page;
			this.performId = page.performId;
			this.pageData.performTimeId = page.performTimeId;
			this.pageData.seatTypeId = page.seatTypeId;
			this.theatreId = page.theatreId;
			this.theatreName = page.theatreName;
			
			this.getSystemInfo();
			this.getSettlement();
		},
		methods: {
			// 文件选择回调
			onSelect(files) {
				const file = files[0];
				if (!/\.(xlsx|xls)$/i.test(file.name)) {
					uni.showToast({
						title: '请上传XLSX或XLS格式的文件',
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			// 文件读取后的处理
			afterRead(files) {
				this.fileList = [files.file];
				const size  = this.fileList[0].size/1024/1024;//M
				if(size>5){
					this.onOversize();
					return
				}
				uni.showLoading({
					title: '文件上传中...'
				});
				uni.uploadFile({
					url: this.$commonConfig.baseUrl+'/member/marketTeamApplyViewer/analysis',		
					filePath: files.file.url,
					name: 'file',
					header: {
						'Authorization': `Bearer ${this.vuex_user_info.accessToken}`
					},
					formData: {
						bucket: 'greattransition'
					},
					success: (res) => {
						if (res.statusCode === 200) {
							const data = JSON.parse(res.data);
							if (data.code === 200) {
								const newVisitors = data.data || [];
								const uniqueVisitors = newVisitors.filter(newVisitor => {
									return !this.visitors.some(existingVisitor => 
										existingVisitor.cardId === newVisitor.cardId
									);
								});
								this.visitors = [...this.visitors, ...uniqueVisitors];
								uni.showToast({
									title: '导入成功',
									icon: 'success'
								});
							} else {
								this.clearFile();
								uni.showToast({
									title: data.msg || '导入失败',
									icon: 'none'
								});
							}
						}
					},
					fail: () => {
						this.clearFile();
						uni.showToast({
							title: '导入失败',
							icon: 'none'
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			// 文件大小超出限制
			onOversize() {
				uni.showToast({
					title: '文件大小不能超过5M',
					icon: 'none'
				});
			},
			// 清除已上传的文件
			clearFile() {
				this.fileList = [];
				this.fileUrl = '';
			},
			leftClick(e) {
				let pages = getCurrentPages();
				if (pages.length == 1) {
					uni.$u.route('/pages/index/index')
				} else {
					uni.navigateBack()
				};
			},
			getSettlement() {
				this.$u.api.getSettlement(this.pageData).then(res => {
					this.pageContent = res.data;
				}).catch(err => {
					console.log('getSettlement', err);
				})
			},
			confirmVisitor() {
				let that = this;
				if(this.needIdcardNumber&&this.needIdcardNumber!==this.selectedVisitor.length){
					uni.showToast({
						title:`身份证数量应该为${this.needIdcardNumber}张`,
						icon:'none'
					})
					return false
				}
				this.visitorShow = false;
				this.visitors = this.visitorList.filter(obj => that.selectedVisitor.includes(obj.id)).map(item => {
					return {
						name: item.name,
						mobile: item.mobile,
						cardId: item.cardId
					}
				});
			},
			delVisitor(visitor) {
				this.visitors = this.visitors.filter(obj => obj.cardId != visitor.cardId);
			},
			addVisitor() {
				uni.$u.route('/center/people', {
					type: 'addVisitor',
					fromPage: 'bookticket'
				});
			},
			editVisitor(item) {
				uni.$u.route('/center/people', {
					type: 'editVisitor',
					fromPage: 'bookticket',
					id: item.id,
					name: item.name,
					mobile: item.mobile,
					cardId: item.cardId,
				});
			},
			applyOrder(){
				if(!this.linkName||!this.linkPhone){
					uni.showToast({
						title:'请填写带队负责人信息',
						icon:'none'
					})
					return
				}
				if(!uni.$u.test.mobile(this.linkPhone)){
					uni.showToast({
						title:'请正确填写带队负责人电话',
						icon:'none'
					})
					return
				}
				
				this.cansubmit = false;
				let params = {
					theatreId:this.theatreId,
					theatreName:this.theatreName,
					auditoriumId:this.pageContent.auditoriumId,
					auditoriumName:this.pageContent.auditoriumName,
					performId:this.pageContent.performId,
					performName:this.pageContent.performName,
					seatTypeId:this.pageContent.seatTypeId,
					seatTypeName:this.pageContent.seatTypeName,
					goodsId:this.pageContent.goodsId,
					goodsName:this.pageContent.goodsName,
					performTimeId:this.pageContent.performTimeId,
					price:this.pageContent.salePrice,
					priceTotal:this.totalPrice,
					viewerList:this.visitors,
					linkName:this.linkName,
					linkPhone:this.linkPhone,
					
				}
				this.$u.api.teamApply(params).then(res => {
					uni.$u.route('/center/paysuccess')				
				}).catch(err => {
					this.cansubmit = true;
					uni.$u.toast(err.msg);
					console.log('applyOrder', err);
				})
			},
			addVisitor(){
				if(!this.newVisitor.name){
					uni.$u.toast('请填写观影人姓名')
					return
				}
				if(!this.newVisitor.cardId){
					uni.$u.toast('请填写观影人身份证')
					return
				}
				if(this.pageContent.oneMany==1){
					if(this.visitors.some(visitor => visitor.cardId === this.newVisitor.cardId)){
						uni.$u.toast('相同身份证号的观影人已存在')
						return
					}
				}
				this.visitors.push(this.newVisitor);
				this.newVisitor = {name:'',cardId:''};
			},
		}
	}
</script>
<style>
	page {
		background: linear-gradient(180deg, #ED0000 0%, #F9FBFD 50%, #fff 100%);
		background-repeat: no-repeat;
	}
</style>
<style lang="scss" scoped>
	.base-info {
		border-radius: 30rpx;
		overflow: hidden;
		background: radial-gradient(circle at -26rpx 294rpx, transparent 8%, #fff 4%) left, radial-gradient(circle at calc(100% + 26rpx) 294rpx, transparent 8%, #fff 4%) right;
		background-size: 50% 100%;
		background-repeat: no-repeat;
		padding: 34rpx 36rpx;
		box-sizing: border-box;
		margin: 30rpx 0 40rpx;

		.up {
			margin-bottom: 36rpx;

			.img {
				display: block;
				width: 172rpx;
				height: 230rpx;
				border-radius: 20rpx;
				margin-right: 32rpx;
			}

			.text {
				font-size: 22rpx;
				font-weight: 400;
				color: #606060;
				line-height: 1;
			}

			.text-item {
				margin-bottom: 18rpx;
			}

			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: #2D2D2D;
			}

			.addr {
				font-size: 24rpx;
				font-weight: 500;
				color: #2D2D2D;
			}
		}

		.down {
			position: relative;

			&:before {
				content: '';
				width: calc(100% + 26rpx);
				height: 1px;
				position: absolute;
				left: -13rpx;
				top: -2rpx;
				border-top: 4rpx dashed #F39FA0;
			}

			.num-wrap {
				padding-top: 36rpx;

				.title {
					font-size: 14px;
					color: #4E4E4E;
				}
			}
		}
	}

	.block-wrap {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(221, 221, 221, 0.5);
		border-radius: 20rpx;
		margin-bottom: 28rpx;
		padding: 32rpx 30rpx 34rpx;

		.block-title {
			position: relative;
			margin-bottom: 22rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #CACACA;

			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: #2D2D2D;
				margin-right: 20rpx;
			}
		}

		.no-people {
			font-size: 28rpx;
			font-weight: 400;
			color: #7F7F7F;

			.right {
				margin-left: 20rpx;
				color: #1677FF;
			}
		}

		.peoples {
			font-size: 28rpx;
			font-weight: 400;
			color: #7F7F7F;
			// margin-bottom: 24rpx;

			.peoples-item {
				margin-bottom: 10rpx;
			}
			.serial{
				margin-left: 3px;
				min-width: 2em;
			}
			.name {
				min-width: 4em;
				margin-left: 20rpx;
				margin-right: 28rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #363636;
			}

			.people-id {
				font-size: 20rpx;
				font-weight: 400;
				color: #606060;
			}

			.right {
				font-size: 28rpx;
				font-weight: 400;
				color: #ED0303;
			}
		}
	}

	.people-list {
		margin-bottom: 20rpx;
		.btn-wrap{
			gap: 10px;
		}

		.btn {
			min-width: 185rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #2D2D2D;
			background-color: #F1F1F1;
			border: 1px solid #F1F1F1;
			border-radius: 8rpx;
			margin-bottom: 12rpx;

			.text {
				margin-left: 16rpx;
			}

			&.people {
				margin-right: 16rpx;
				text-align: center;
				background-color: #FFF2F2;
				border-color: #ED0303;
			}
		}
		.add-wrap{
			margin-bottom: 24rpx;
			.u-input{
				margin-bottom: 24rpx;
			}
		}
	}

	.visitors {
		.block-title{
			.tip{
				margin-left: 10px;
				font-size: 28rpx;
				font-weight: normal;
				color: #ef3642;
			}
		}
		margin-bottom: 20rpx;
	}

	.people-show-content {
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 30rpx 40rpx;

		.title {
			position: relative;
			font-size: 32rpx;
			font-weight: 500;
			color: #606060;
			margin-bottom: 46rpx;
			text-align: center;

			.cancel {
				position: absolute;
				left: 0;
				top: 0;
			}
		}

		.add-btn {
			margin-bottom: 28rpx;
			background: #ffdee1;
			border-radius: 44rpx;
			padding: 26rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #ff1616;

			.img {
				width: 28rpx;
				height: 36rpx;
				margin-right: 36rpx;
			}
		}

		.list {
			/deep/ .u-radio-group {
				flex-wrap: wrap;
			}

			/deep/ .u-checkbox-group {
				flex-wrap: wrap;
			}

			overflow-y: auto;
			height: 40vh;

			.people {
				width: 100%;
				margin-bottom: 24rpx;
			}
		}

		.btn {}
	}

	.coupon {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(232, 232, 232, 0.5);
		border-radius: 16rpx;
		padding: 44rpx 36rpx;
		margin-bottom: 24rpx;

		.title {
			font-size: 28rpx;
			font-weight: bold;
			color: #2D2D2D;
			padding-bottom: 20rpx;
			margin-bottom: 26rpx;
			border-bottom-style: dashed;
		}

		.single-til {
			margin-bottom: 28rpx;

			.text {
				font-weight: 400;
			}
		}

		.no-coupon {
			height: 116rpx;
			line-height: 116rpx;
			text-align: center;
			background: #F9FAFD;
			border-radius: 8rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #C0C0C0;
		}
	}

	.notice {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(232, 232, 232, 0.5);
		border-radius: 16rpx;
		padding: 44rpx 36rpx;
		margin-bottom: 24rpx;

		.title {
			font-size: 28rpx;
			font-weight: bold;
			color: #2D2D2D;
			padding-bottom: 20rpx;
			margin-bottom: 26rpx;
			border-bottom-style: dashed;
		}

		.notice-item {
			font-size: 24rpx;
			font-weight: 400;
			color: #7F7F7F;
			line-height: 36rpx;
			margin-bottom: 8rpx;
		}
	}

	.page-bottom {
		position: relative;
		z-index: 1001;
		height: 98rpx;
		padding: 24rpx 20rpx 50rpx;

		.inner {
			position: fixed;
			background-color: #fff;
			height: 98rpx;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 24rpx 20rpx 50rpx;
			box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(215, 215, 215, 0.5);

			.total-price {
				font-size: 40rpx;
				font-weight: bold;
				color: #ED0000;
			}

			.btn {
				font-size: 28rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50rpx;
				padding: 0 50rpx;
				background-color: #eee;
				color: #333;
				text-align: center;

				&.active {
					background: linear-gradient(90deg, #FF7979 0%, #ED0000 100%);
					color: #fff;
				}
			}
		}
	}

	.purchaser {
		.item {
			margin-bottom: 10rpx;
			font-size: 26rpx;
			color: #333;
		}

		.un-auth {
			padding: 26rpx;
			background-color: #eee;
			color: #333;
			text-align: center;
			border-radius: 8rpx;
		}
	}
.linkman{
	.item{
		margin-bottom: 10px;
		.til{
			width: 4em;
			text-align: right;
			font-size: 28rpx;
		}
		/deep/ .u-input{
			width: auto;
			flex: 1;
		}
	}
}

.upload-wrap {
	margin-top: 20rpx;
	.file-info {
		padding: 20rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
		.left {
			.filename {
				margin: 0 10rpx;
				max-width: 400rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.filesize {
				color: #909399;
				font-size: 24rpx;
			}
		}
	}
}
.upload-btn {
	width: 100%;
	height: 100%;
}
.expand-btn {
	text-align: center;
	padding-top: 20rpx;
	font-size: 24rpx;
	color: #666;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.u-icon {
		margin-left: 10rpx;
	}
}
</style>