great_mobileui/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 class="position text-item">{{performInfo.name}}</view> -->
							<!-- 	<view class="addr u-flex u-row-between">
							<view class="u-line-1">地址：遵义市《伟大转折》演艺中心</view>
							<u-icon name="arrow-right" color="#2D2D2D" size="36rpx"></u-icon>
						</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 purchaser">
				<view class="block-title u-flex">
					<view class="name">购票人信息</view>
					<!-- <text>用于入园身份验证</text> -->
				</view>
				<view class="" v-if="vuex_member_info.isAuth">
					<view class="item">姓名：{{pageContent.purchaser.name}}</view>
					<view class="item">手机号：{{pageContent.purchaser.mobile|hidePhoneNumber}}</view>
					<view class="item">身份证：{{pageContent.purchaser.idcard|maskID}}</view>
				</view>
				<view class="un-auth" v-else @click="$u.route('center/factorauth',{from:'bookticket'})">
					请先<text style="color: #ED0000;">实名认证</text>
				</view>
			</view>
			<view class="block-wrap visitors">
				<view class="block-title u-flex">
					<view class="name">观影人信息</view>
					<!-- <text>用于入园身份验证</text> -->
				</view>
				<view class="people-list u-flex u-flex-wrap">
					<view class="people btn" v-if="visitors.length>0" v-for="(visitor,index) in visitors" :key="index">
						{{visitor.name}}
					</view>
					<view class="btn u-flex u-row-center" @click="visitorShow = true">
						<u-icon name="plus-circle" color="#2D2D2D" size="32rpx"></u-icon>
						<text class="text">新增/更换</text>
					</view>
				</view>
				<!-- <view class="no-people u-flex" v-if="!visitors.length>0">
					<text>游客</text>
					<text class="right" @click="visitorShow = true">点击选择游客</text>
				</view> -->
				<view class="peoples" v-if="visitors.length>0">
					<view class="peoples-item u-flex u-row-between" v-for="(visitor,index) in visitors" :key="index">
						<view class="left u-flex">
							<u-icon @click="delVisitor(visitor)" name="close-circle" color="#2D2D2D"
								size="32rpx"></u-icon>
							<text style="margin-left: 8rpx;">观影人{{ index + 1 }}</text>
							<text class="name">{{visitor.name}}</text>
							<!-- <text class="people-id">{{ visitor.idcard | maskID }}</text> -->
						</view>
						<view class="right" @click="editVisitor(visitor)">编辑</view>
					</view>
				</view>
			</view>
			<view class="coupon">
				<view class="title u-flex u-row-between u-border-bottom">
					<text>本单可享优惠</text>
				</view>
				<view class="single-til u-flex u-row-between">
					<view class="text">优惠券</view>
					<view class="more-text u-flex">
						<text>未使用</text>
						<u-icon name="arrow-right" color="#E6E6E6" size="24rpx"></u-icon>
					</view>
				</view>
				<view class="no-coupon">
					您暂无可使用优惠券～
				</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 class="notice-item">
					1.由于设备故障等不可抗力因素，存在少量场次取消的情况，会
					进行退票退款
				</view>
				<view class="notice-item">
					2.由于影院系统不稳定等因素，存在出票失败的情况，会进行退款
				</view>
				<view class="notice-item">
					3.取票码可以在“我的-订单页”中查看
				</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">
					<!-- <image class="img" :src="staticUrl+'/img/car.png'" ></image> -->
					添加观影人信息
				</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.idcard"></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&&vuex_member_info.isAuth"
						@click="submitorder">立即支付</view>
					<view class="btn" v-else>立即支付</view>
				</view>
			</view>
		</view>
		<u-modal 
			:show="umodal.show" 
			:title="umodal.title" 
			:content='umodal.content'
			confirmColor="#ED0303"
			@confirm="modalConfirm"
		></u-modal>
	</view>
</template>

<script>
	import {
		systemInfo
	} from "@/mixin.js";
	// #ifdef H5
	import wxH5 from "weixin-jsapi";
	// #endif
	export default {
		mixins: [systemInfo],
		data() {
			return {
				performId: '',
				performInfo: {},
				pageData: {}, //上个页面传过来的数据
				pageContent: {
					performName: '',
					goodsName: '',
					timeDate: '',
					timeWeek: '',
					seatTypeName: '',
					auditoriumName: '',
					performTimeEnd: '',
					performTimeStart: '',
					purchaser: {
						mobile: '',
						idcard: ''
					},
					ticketNotice: '',
					viewerList: [],
				}, //页面信息
				ticketNotice: '',
				cansubmit: true,
				staticUrl: this.$commonConfig.staticUrl,
				visitors: [], //确认的游客
				visitorShow: false, //游客弹层
				visitorList: [], //游客列表
				selectedVisitor: [], //选中的游客(id)
				params: {}, //要提交的数据
				orderId: '', //订单提交获取
				payResult: {}, //gotoPay结果
				paysuccess: false, //支付结果
				templateIdList: [], //微信小程序订阅消息
				umodal:{
					show:false,
					title:'温馨提示',
					content:''
				}

			}
		},
		computed: {
			totalPrice() {
				let that = this;
				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);
			},
		},
		onShow() {
			this.getSettlement();
			
		},
		onLoad(page) {
			console.log('page', page);
			this.pageData = page;
			this.performId = page.performId;
			this.pageData.performTimeId = page.performTimeId;
			this.pageData.seatTypeId = page.seatTypeId
			this.getSystemInfo();
			this.getSettlement();

			this.getTemplateIdList(); //获取模板列表

		},
		methods: {
			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 => {
					// console.log('getSettlement',res.data);
					this.pageContent = res.data;
					this.getMemberAll();
				}).catch(err => {
					console.log('getSettlement', err);
				})
			},
			getMemberAll() {
				let that = this;
				// const userId = this.vuex_member_info.id;
				const userId = this.pageContent.viewerList[0]?.id;
				this.$u.api.selectMemberAll({
					userid: userId
				}).then(res => {
					// console.log('getMemberAll',res.data);
					this.visitorList = res.data.list;
					// this.visitors = this.visitorList.filter(obj => obj.memberId==userId);
					this.visitors = this.visitorList.filter(obj => that.selectedVisitor.includes(obj.idcard));
					console.log('this.visitorList',this.visitorList);
					// console.log('this.selectedVisitor',this.selectedVisitor);
					console.log('this.visitors',this.visitors);
				}).catch(err => {
					console.log('getMemberAll', err);
				})
			},
			confirmVisitor() {
				let that = this;
				console.log('selectedVisitor',this.selectedVisitor);
				this.visitorShow = false;
				this.visitors = this.visitorList.filter(obj => that.selectedVisitor.includes(obj.idcard)).map(item => {
					return {
						name: item.name,
						mobile: item.mobile,
						idcard: item.idcard
					}
				});
				console.log('this.visitors',this.visitors);
			},
			delVisitor(visitor) {
				// console.log('delVisitor',visitor);
				// console.log('this.visitors',this.visitors);
				this.visitors = this.visitors.filter(obj => obj.idcard != visitor.idcard);
				this.selectedVisitor = this.selectedVisitor.filter(item => item != visitor.idcard);
				// console.log('this.visitors',this.visitors);
				// console.log('this.selectedVisitor',this.selectedVisitor);
			},
			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,
					idcard: item.idcard,
				});
			},
			getTemplateIdList() {
				this.$u.api.templateIdList({
					templateLabel: 'order_pay'
				}).then(res => {
					console.log('getTemplateIdList', res.data);
					this.templateIdList = res.data.list.map(item => {
						return item.templateId
					});
					// if(this.templateIdList.length>0){
					// 	this.templateEven();
					// }
				}).catch(err => {
					console.log('getTemplateIdList', err);
				})
			},
			submitorder() {
				let params = {
					performId: this.pageContent.performId,
					goodsList: [{
						goodsId: this.pageContent.goodsId,
						salePeice: this.pageContent.salePrice,
						saleNum: 1
					}],
					auditoriumId: this.pageContent.auditoriumId,
					performTimeId: this.pageContent.performTimeId,
					seatTypeId: this.pageContent.seatTypeId,
					purchaser: {
						name: this.pageContent.purchaser.name,
						mobile: this.pageContent.purchaser.mobile,
						idcard: this.pageContent.purchaser.idcard
					},
					viewerList: this.visitors
				}
				// #ifdef MP
				params['source'] = 1
				// #endif 
				// #ifdef H5
				params['source'] = 4
				// #endif
				this.cansubmit = false;
				// console.log('pageData',this.pageData);
				// console.log('visitors',this.visitors);
				// console.log('params',params);
				this.$u.api.submitOrder(params,{custom:{toast:false}}).then(res => {
					// console.log('submitOrder',res.data);
					this.orderId = res.data.orderId;
					// this.templateEven()
					this.setTemplate();

				}).catch(err => {
					this.cansubmit = true;
					uni.hideLoading();
					// uni.$u.toast(err.msg);
					// if (err.msg.includes('限购')) {
						this.umodal.title = '';
						this.umodal.content = err.msg;
						this.umodal.show = true;
						// setTimeout(() => {
						// 	uni.$u.route('/center/order', {
						// 		status: 0
						// 	});
						// }, 2000)
					// }
					console.log('submitOrder', err);
				})
			},
			modalConfirm(){
				this.umodal.show = false;
			},
			// 订阅消息
			templateEven() {
				let that = this
				wx.showModal({
					title: '温馨提示',
					content: '为更好的促进与您的交流，服务号需要实时向您发送消息',
					confirmText: "同意",
					cancelText: "拒绝",
					success: function(res) {
						if (res.confirm) {
							//调用订阅消息
							console.log('用户点击确定');
							//调用订阅
							that.setTemplate();
						} else if (res.cancel) {
							console.log('用户点击取消');
							///显示第二个弹说明一下
							wx.showModal({
								title: '温馨提示',
								content: '拒绝后您将无法获取实时的消息',
								confirmText: "知道了",
								showCancel: false,
								success: function(res) {
									that.gotoPay();
									///点击知道了的后续操作 
									///如跳转首页面 
								}
							});
						}
					}
				});
			},
			// 设置小程序订阅消息
			setTemplate() {
				let that = this;
				console.log('templateIdList', this.templateIdList);
				// #ifdef MP
				uni.requestSubscribeMessage({
					tmplIds: that.templateIdList,
					success(res) {
						// that.gotoPay();
						console.log("success:", res);
					},
					fail(res) {
						console.log("fail:", res);
					},
					complete(res) {
						that.gotoPay();
						console.log("complete:", res);
					}
				})
				// #endif
				// #ifdef H5
				that.gotoPay()
				// #endif
			},
			gotoPay() {
				this.$u.api.gotoPay({
					orderId: this.orderId,
					openid: ''
				}).then(res => {
					this.payResult = res.data.payInfo;
					this.payResult.package = res.data.payInfo.packageValue;
					// #ifdef H5
					this.initConfig(this.payResult)
					// #endif 
					// #ifdef MP
					this.wxPay()
					// #endif 


					// if(this.params.paymentMode==1||this.params.paymentMode==4){
					// 	this.wxPay()
					// }else{
					// 	uni.$u.route('/shopping/paysuccess');
					// }
					console.log('gotoPayres', res.data);
				}).catch(err => {
					this.cansubmit = true;
					// this.paypass = '';
					// this.checkPassShow = false;
					console.log('gotoPay', err);
				})
			},
			wxPay() {
				let that = this;
				uni.requestPayment({
					...this.payResult,
					"provider": "wxpay",
					"orderInfo": {
						// "appid": "wx499********7c70e",  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
						// "noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
						// "package": "Sign=WXPay",        // 固定值
						// "partnerid": "148*****52",      // 微信支付商户号
						// "prepayid": "wx202254********************fbe90000", // 统一下单订单号 
						// "timestamp": 1597935292,        // 时间戳（单位：秒）
						// "sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名
					},
					success(res) {
						that.payQuery();
					},
					fail(e) {
						uni.$u.route('/center/order', {
							status: 0
						});
						console.log('wxPayfail', e);
					},
					complete() {
						this.cansubmit = true;
					}
				})
			},
			payQuery() {
				let that = this;
				let retryCount = 0;
				let maxRetryCount = 5; // 设置最大重试次数
				let interval = 2000; // 设置间隔时间为2秒
				let timeout = 10000; // 设置超时时间为10秒
				let timer;
				uni.showLoading({
					title: '支付结果查询中'
				})
				timer = setInterval(() => {
					retryCount++;
					if (retryCount > maxRetryCount || retryCount * interval > timeout) {
						clearInterval(timer);
						uni.hideLoading();
						console.log("支付查询超时或达到最大重试次数");
						// 在这里添加超时或达到最大重试次数的处理逻辑
						uni.$u.route('/center/order');
					} else {
						console.log("第" + retryCount + "次查询");
						// 调用查询支付状态的方法
						// 如果支付状态为成功，则清除定时器并处理成功的逻辑
						// 如果支付状态为失败，则清除定时器并处理失败的逻辑
						this.$u.api.payQuery({
							orderId: this.orderId
						}).then(res => {
							// 0-未支付 1-已支付 2-支付中 3-支付失败 4-支付退款
							let payStatus = res.data.payStatus;
							if (payStatus === 1) {
								uni.$u.route('/center/order', {
									status: 3
								});
								// uni.$u.route('/center/paysuccess');
							} else if (payStatus === 0 || payStatus === 2) {
								this.payQuery()
							} else if (payStatus === 3) {
								uni.toast('支付失败')
							}
							clearInterval(timer);
						}).catch(err => {
							console.log('payQuery', err);
						}).finally(() => {
							uni.hideLoading()
						})
					}
				}, interval);
			},

			/**
			 * 公众号微信支付
			 */
			initConfig() {
				// #ifdef H5
				let that = this
				wxH5.config({
					debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false, 
					appId: that.payResult.appId, // 必填，公众号的唯一标识 
					timestamp: that.payResult.timeStamp, // 必填，生成签名的时间戳     
					nonceStr: that.payResult.nonceStr, // 必填，生成签名的随机串 
					signature: that.payResult.paySign, // 必填，签名 
					jsApiList: ['chooseWXPay', 'checkJsApi'] // 必填，需要使用的JS接口列表 
				})
				wxH5.ready(() => {
					wxH5.chooseWXPay({
						timestamp: that.payResult.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符     
						nonceStr: that.payResult.nonceStr, // 支付签名随机串，不长于 32 位         
						package: that.payResult.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）     
						signType: 'SHA1', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'     
						paySign: that.payResult.paySign, // 支付签名     
						success: () => {
							that.payQuery();
						},
						fail: (e) => {
							uni.$u.route('/center/order', {
								status: 0
							});
							console.log('wxPayfail', e);
						},
						cancel: () => {
							uni.$u.route('/center/order', {
								status: 0
							});
							that.cansubmit = true;
						}
					})
				})
				// #endif
			}

		}
	}
</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 {
			// padding-left: 16rpx;
			position: relative;
			margin-bottom: 22rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #CACACA;

			// &:before{
			// 	content: '';
			// 	width: 6rpx;
			// 	height: 32rpx;
			// 	background: #1677FF;
			// 	border-radius: 4rpx;
			// 	position: absolute;
			// 	left: 0;
			// 	top: 50%;
			// 	margin-top: -16rpx;
			// }
			.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;
			}

			.name {
				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 {
			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;
			}
		}
	}

	.visitors {
		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;
		}
	}
</style>