psy_web_share/newScale/paymentPage/index.vue

<template>
	<view class="payment_bg">
		<view class="payment_info" :style="{
        background: `url(${currentScale.infoImg}) no-repeat center`,
        'background-size': 'cover',
      }">
			<view class="people_num"><text>{{ peopleNum }}人已测</text></view>
			<view class="price_num"><text>￥{{ price }}</text></view>
			<view class="pay_btn_sm" @click="checkOrder(1)">{{ hasDiscount ? promotionPrice : price }}元解锁专属测试报告</view>
		</view>
		<view v-if="currentScale.showDesc" class="payment_desc">
			<image v-if="currentScale" :src="currentScale.descImg" mode="widthFix"></image>
		</view>
		<view class="top_footer">
			<template v-if="hasDiscount">
				<view class="pay_price">
					<view class="pay_price_p">
						<view class="price_left">
							<view class="yh">
								<view class="yh_title">限时优惠</view>
								<view class="yh_yj"><text>原价</text><text>￥{{ price }}</text></view>
							</view>
							<view class="price_center"><text
									style="font-size: 40rpx; margin-left: 10rpx">￥</text><text>{{ promotionPrice }}</text>
							</view>
						</view>
						<view class="price_right">
							<text>{{ getPriceMod(price, promotionPrice) }}</text>
						</view>
					</view>
				</view>
			</template>
			<view class="pay_btn_lg" @click="checkOrder(1)">
				{{ hasDiscount ? promotionPrice : price }}元解锁专属测试报告
			</view>
			<view v-if="hasDiscount" style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 20rpx 0;
        ">
				<!-- <view class="people_sy"> 本次优惠剩余名额：{{residueNum}} </view> -->
				<view class="people_sy_time">
					<!-- <uni-countdown :show-day="false" :hour="testHour" :minute="testMinute" :second="testSecond" /> -->
					<text>优惠倒计时：</text><uni-countdown :show-day="true" background-color="#FF9D41" color="#ffffff"
						:start="start" :hour="testHour" :minute="testMinute" :second="testSecond" />
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="pay_dialog">
				<view class="btn_area">
					<image style="margin-right: 89rpx" @click="completeHandle"
						src="https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/complete_btn.png"
						mode="widthFix"></image>
					<image @click="uncompleteHandle"
						src="https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/uncomplete_btn.png"
						mode="widthFix"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		timestampFormatter
	} from "../../utils/util.js";
	import {
		photoUrl
	} from "@/common/config.js";
	import {
		chooseWXPayApi,
		chooseImageApi
	} from "../../utils/js_sdk_utils";


	const photoUrls = `${photoUrl}/api/show?filePath=./webo`;
	export default {
		data() {
			return {
				scaleList: {
					MarriageQuality: {
						infoImg: `${photoUrls}/MarriageQuality/pay_scale_info.png`,
						descImg: `${photoUrls}/MarriageQuality/pay_scale_desc.png`,
						flag: "20220124203027",
						showDesc: true,
					},
					Burnout: {
						infoImg: `${photoUrls}/Burnout/pay_scale_info.png`,
						descImg: `${photoUrls}/Burnout/pay_scale_desc.png`,
						flag: "20210804162506",
						showDesc: true,
					},
					Career: {
						infoImg: `${photoUrls}/Career/pay_scale_info.png`,
						descImg: `${photoUrls}/Career/pay_scale_desc.png`,
						flag: "20210714221054",
						showDesc: true,
					},
					Charm: {
						infoImg: `${photoUrls}/Charm/paymentPage/pay_scale_info.png`,
						descImg: `${photoUrls}/Charm/paymentPage/pay_scale_desc.png`,
						flag: "20210804164957",
						showDesc: true,
					},
					EQtest: {
						infoImg: `${photoUrls}/EQtest/paymentPage/pay_scale_info.png`,
						descImg: `${photoUrls}/EQtest/paymentPage/pay_scale_desc.png`,
						flag: "20210820143117",
						showDesc: true,
					},
					Family: {
						infoImg: `${photoUrls}/Family/pay_scale_info.png`,
						descImg: `${photoUrls}/Family/pay_scale_desc.png`,
						flag: "20210622214416",
						showDesc: true,
					},
					Marriage: {
						infoImg: `${photoUrls}/Marriage/pay_scale_info.png`,
						descImg: `${photoUrls}/Marriage/pay_scale_desc.png`,
						flag: "20210714220600",
						showDesc: true,
					},
					Mbti: {
						infoImg: `${photoUrls}/Mbti/paymentPage/pay_scale_info.png`,
						descImg: `${photoUrls}/Mbti/paymentPage/pay_scale_desc.png`,
						flag: "20211020113914",
						showDesc: true,
					},
					Mental: {
						infoImg: `${photoUrls}/Mental/paymentPage/pay_scale_info.png`,
						descImg: `${photoUrls}/Mental/paymentPage/pay_scale_desc.png`,
						flag: "20210616235331",
						showDesc: true,
					},
					Senile: {
						infoImg: `${photoUrls}/Senile/paymentPage/pay_scale_info.png`,
						descImg: `${photoUrls}/Senile/paymentPage/pay_scale_desc.png`,
						flag: "20210804165314",
						showDesc: true,
					},
					Sleep: {
						infoImg: `${photoUrls}/Sleep/paymentPage/pay_scale_info.png`,
						descImg: `${photoUrls}/Sleep/paymentPage/pay_scale_desc.png`,
						flag: "20210725100704",
						showDesc: true,
					},
					Delay: {
						infoImg: `${photoUrls}/Delay/paymentPage/pay_scale_info.png`,
						descImg: `${photoUrls}/Delay/paymentPage/pay_scale_desc.png`,
						flag: "20210617113742",
						showDesc: true,
					},
					RuiWen: {
						infoImg: `${photoUrls}/RuiWen/paymentPage/pay_scale_info.png`,
						descImg: `${photoUrls}/RuiWen/paymentPage/pay_scale_desc.png`,
						flag: "20210617113742",
						showDesc: true,
					},
					Adapt: {
						infoImg: `${photoUrls}/Adapt/paymentPage/pay_scale_info.png`,
						descImg: `${photoUrls}/Adapt/paymentPage/pay_scale_desc.png`,
						flag: "20210727224129",
						showDesc: true,
					},
					Romance: {
						infoImg: `${photoUrls}/Romance/paymentPage/pay_scale_info.png`,
						descImg: `${photoUrls}/Romance/paymentPage/pay_scale_desc.png`,
						flag: "20240714220600",
						showDesc: true,
					}
				},
				scaleName: "",
				currentScale: null,
				orderNo: "",
				orderInfo: {},
				peopleNum: 0,
				residueNum: 0, // 剩余名额
				price: 0, // 正常价格
				promotionPrice: 0, // 优惠价格
				promotionEndTime: 0, // 结束时间（时间戳）
				testHour: 0, // 时
				testMinute: 0, // 分
				testSecond: 0, // 秒
				start: false,
				userInfo: {},
				checkType: 0,
			};
		},
		onLoad(options) {
			if (options.orderNo) {
				this.orderNo = options.orderNo;
				setTimeout(() => {
					this.payEnsure();
				}, 200);
			}

			if (options && options.tName) {
				this.scaleName = options.tName;
				this.currentScale = this.scaleList[options.tName];
			}

			if (options && options.resultId) {
				this.resultId = options.resultId;
			}

			this.userInfo = uni.getStorageSync("user");
			this.getPeople();
			this.queryPromotion();
		},
		computed: {
			// 是否有折扣
			hasDiscount() {
				let timeSpan = new Date().getTime();
				let endTime = this.promotionEndTime - timeSpan;
				return this.residueNum > 0 && endTime > 0;
			},
		},
		methods: {
			payHandle() {
				// #ifdef H5
				this.is_wx();

				if (this.is_wx()) {
					//在微信中的h5 处理方法
					this.getOrderWx();
				} else {
					this.getH5Pay();
				}
				// #endif
				// #ifdef MP-TOUTIAO
				this.createOrder();
				// #endif
			},
			//微信支付
			getOrderWx() {
				this.orderInfo.total = this.hasDiscount ? this.promotionPrice : this.price;
				this.$request
					.post({
						url: `api/wx-pay/jsapiPay`,
						loadingTip: "加载中...",
						data: {
							productId: this.orderInfo.productId,
							userId: this.orderInfo.userId,
							resultId: this.orderInfo.resultId,
							description: this.orderInfo.description,
							total: this.orderInfo.total,
							openId: uni.getStorageSync("openId"),
							merchantNo: uni.getStorageSync('merchantNo') || ''
						},
					})
					.then((res) => {
						console.log("初始订单返回的信息");
						console.log(res);
						this.orderNo = res.data.orderNo;
						if (res.code == 200) {
							// JSON.parse(aa.data.codeUrl)

							let par = JSON.parse(res.data.codeUrl);
							//将数据传输到调用支付的接口
							chooseWXPayApi(par).then((res) => {
								if (res == "已取消支付") {
									uni.showToast({
										icon: "none",
										title: "已取消支付",
									});
									//提示用户取消了
									return;
								} else if (res == "支付失败了") {
									uni.showToast({
										icon: "none",
										title: "支付失败了",
									});
									//弹出框提示
									return;
								} else {
									if (res.errMsg == "chooseWXPay:ok") {
										this.queryWXh5();
									}
								}
							});
						}
						uni.hideLoading();
					});
			},

			//支付成功后
			//查询订单是否成功
			queryWXh5() {
				let _this = this;
				_this.$request
					.get({
						url: `api/wx-pay/queryOrder/${_this.orderNo}`,
						loadingTip: "加载中...",
						data: {},
					})
					.then((res) => {
						uni.hideLoading();
						let resultInfo = JSON.parse(res.data.body);
						if (resultInfo.trade_state === "SUCCESS") {
							//提示支付成功
							uni.showToast({
								icon: "none",
								title: "支付成功",
							});
							uni.navigateTo({
								url: `/newScale/${this.scaleName}/testResult?resultId=${this.orderInfo.resultId}&messageShare=1`,
							});
						} else {
							uni.showToast({
								icon: "none",
								title: "支付失败",
							});
						}
					});
			},

			is_wx() {
				let en = window.navigator.userAgent.toLowerCase();
				// 匹配en中是否含有MicroMessenger字符串
				if (en.match(/MicroMessenger/i) == "micromessenger") {
					return true;
				} else {
					return false;
				}
			},

			// 检查订单支付状态
			checkOrder(type) {
				let _this = this;
				if (_this.orderNo) {
					_this.$request
						.get({
							url: `api/wx-pay/queryOrder/${_this.orderNo}`,
							loadingTip: "加载中...",
							data: {},
						})
						.then((res) => {
							uni.hideLoading();
							let resultInfo = JSON.parse(res.data.body);
							if (resultInfo.trade_state === "SUCCESS") {
								uni.navigateTo({
									url: `/newScale/${this.scaleName}/testResult?resultId=${this.orderInfo.resultId}&messageShare=1`,
								});
							} else {
								if (type == 0) {
									return;
								} else {
									this.payHandle();
								}
							}
						});
				} else {
					this.payHandle();
				}
			},
			// 拉起微信支付
			getH5Pay(params) {
				this.orderInfo.total = this.hasDiscount ? this.promotionPrice : this.price;
				if (uni.getStorageSync('merchantNo')) {
					this.orderInfo.merchantNo = uni.getStorageSync('merchantNo');
				}
				if (this.orderInfo.total === 0) {
					uni.navigateTo({
						url: `/newScale/${this.scaleName}/testResult?resultId=${this.resultId}&messageShare=1`,
					});
				} else if (this.orderInfo.total > 0) {
					let _this = this;
					_this.$request
						.get({
							url: `api/orderInfo/queryOrderByResultIdAndUserId/${this.orderInfo.userId}/${this.orderInfo.resultId}`,
							loadingTip: "加载中...",
							data: {},
						})
						.then((res) => {
							uni.hideLoading();
							if (res.data && res.data.orderStatus === "支付成功") {
								uni.navigateTo({
									url: `/newScale/${this.scaleName}/testResult?resultId=${this.orderInfo.resultId}&messageShare=1`,
								});
							} else {
								_this.$request
									.post({
										url: "api/wx-pay/h5Pay",
										loadingTip: "加载中...",
										data: _this.orderInfo,
									})
									.then((res) => {
										let redirect_url = encodeURIComponent(
											`https://hnhong-duo.com/webo/newScale/paymentPage/index?orderNo=${res.data.orderNo}&tName=${_this.scaleName}&resultId=${this.resultId}`
										);
										window.location.href = `${res.data.codeUrl}&redirect_url=${redirect_url}`;
									});
							}
						});
				}
			},
			createOrder() {
				let _this = this;
				this.orderInfo.total = this.hasDiscount ? this.promotionPrice : this.price;
				let params = {
					resultId: _this.orderInfo.resultId,
					subject: _this.orderInfo.description,
					body: _this.orderInfo.description,
					total_amount: _this.orderInfo.total * 100,
					msgPage: "",
				};
				_this.$request
					.post({
						url: "api/douyin/createOrder",
						loadingTip: "加载中...",
						data: params,
					})
					.then((res) => {
						_this.orderNo = res.data.orderNo;
						let imageUrl =
							"https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/banner1.png";
						_this.syncOrder({
							resultId: params.resultId,
							total_amount: params.total_amount,
							subject: params.subject,
							path: `/newScale/${this.scaleName}/testResult?resultId=${this.orderInfo.resultId}&messageShare=1`,
							orderNo: _this.orderNo,
							openId: uni.getStorageSync("openId"),
							orderStatus: "1",
							imgPath: imageUrl,
						});
						_this.payToutiao(res.data.orderId, res.data.orderToken, res.data.orderNo);
					});
			},
			payToutiao(orderId, orderToken, orderNo) {
				let _this = this;
				tt.pay({
					orderInfo: {
						order_id: orderId,
						order_token: orderToken,
					},
					service: 5,
					success: (response) => {
						_this.timer = setInterval(() => {
							_this.getQueryOrder(orderNo);
						}, 1000);
					},
					fail: (err) => {
						uni.showToast({
							icon: "none",
							title: "支付失败",
						});
					},
				});
			},
			// 订单状态
			getQueryOrder(orderNo) {
				let _this = this;
				_this.$request
					.get({
						url: `api/douyin/queryOrder/${orderNo}`,
						loadingTip: "加载中...",
						data: {},
					})
					.then((res) => {
						if (res.code == "200") {
							if (res.data.statusCode == "SUCCESS") {
								let imageUrl =
									"https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/banner1.png";
								_this.syncOrder({
									resultId: this.orderInfo.resultId,
									total_amount: _this.orderInfo.total * 100,
									subject: _this.orderInfo.description,
									path: `/newScale/${this.scaleName}/testResult?resultId=${this.orderInfo.resultId}&messageShare=1`,
									orderNo: orderNo,
									openId: uni.getStorageSync("openId"),
									orderStatus: "2",
									imgPath: imageUrl,
								});
								uni.navigateTo({
									url: `/newScale/${this.scaleName}/testResult?resultId=${_this.orderInfo.resultId}&messageShare=1`,
								});

								clearInterval(_this.timer);
								uni.showToast({
									title: "支付成功",
								});
							} else if (res.data.statusCode == "CLOSED") {
								// console.log("订单支付回调成功===========CLOSED》", _this.trade_state_closed );
							} else {
								clearInterval(_this.timer);
								// console.log("订单支付回调成功CLOSED===========》", _this.trade_state_closed);
							}
						} else {
							uni.showToast({
								title: "支付失败",
							});
						}
					});
			},
			// 查询测试人数
			getPeople() {
				let _this = this;
				_this.$request
					.get({
						url: `record/countByFlag?flag=${this.currentScale.flag}`,
						loadingTip: "加载中...",
					})
					.then((res) => {
						_this.peopleNum = res.data + 57000;
					});
			},
			payEnsure() {
				// console.log(11111)
				this.$refs.popup.open();
			},
			uncompleteHandle() {
				this.$refs.popup.close();
			},
			completeHandle() {
				uni.showLoading({
					title: "",
				});
				this.checkOrder(0);
			},
			// 查询优惠信息
			queryPromotion() {
				let _this = this;
				_this.$request
					.get({
						url: `api/promotionInfo/queryPromotionDetail/${this.currentScale.flag}`,
						loadingTip: "加载中...",
						data: {},
					})
					.then((res) => {
						let {
							price,
							name,
							residueNum,
							promotionPrice,
							promotionEndTime
						} = res.data;
						let params = {
							productId: this.currentScale.flag,
							userId: this.userInfo?.id,
							resultId: this.resultId,
							description: name,
							total: price,
							sceneType: uni.getSystemInfoSync().platform == "android" ? "Android" : "iOS",
						};
						this.orderInfo = params;
						uni.setStorageSync("orderInfo", params);
						this.residueNum = residueNum;
						this.price = price;
						this.promotionPrice = promotionPrice;
						this.promotionEndTime = new Date(promotionEndTime).getTime();
						this.getDhms();
						uni.hideLoading();
					});
			},
			// 获取天时分秒
			getDhms() {
				let timeSpan = this.promotionEndTime - new Date().getTime();
				let time = timestampFormatter(timeSpan);
				this.testHour = time.h;
				this.testMinute = time.m;
				this.testSecond = time.s;
				this.start = true;
			},

			getPriceMod(p1, p2) {
				let p = p1 * 1000 - p2 * 1000;
				return (p / 1000).toFixed(2);
			},
			// 同步订单
			syncOrder(params) {
				this.$request
					.post({
						url: "api/douyin/pushOrder",
						loadingTip: "加载中...",
						data: params,
					})
					.then((res) => {
						console.log(res);
					})
					.catch((err) => {
						console.log(err);
					});
			},
		},
	};
</script>

<style scoped>
	.payment_bg {
		width: 100%;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/payment_bg.png) no-repeat top;
		background-size: 100% auto;
		overflow: hidden;
		padding-bottom: 311rpx;
	}

	.payment_info {
		width: 750rpx;
		height: 531rpx;
		position: relative;
		margin-top: 143rpx;
		overflow: hidden;
	}

	.payment_info image {
		width: 100%;
		height: auto;
		margin-top: 134rpx;
	}

	.payment_info .pay_btn_sm {
		width: 640rpx;
		height: 73rpx;
		line-height: 73rpx;
		position: absolute;
		left: 55rpx;
		bottom: 73rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/pay_button.png) no-repeat center;
		background-size: 100% auto;
		font-family: "Alibaba PuHuiTi 2.0";
		font-weight: bold;
		font-size: 36rpx;
		color: #ffffff;
		text-shadow: 0rpx 0rpx 5rpx rgba(168, 63, 90, 0.5);
		text-align: center;
	}

	.payment_desc image {
		width: 750rpx;
	}

	.pay_btn_lg {
		width: 640rpx;
		height: 73rpx;
		line-height: 73rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/pay_button.png) no-repeat center;
		background-size: 100% auto;
		font-family: "Alibaba PuHuiTi 2.0";
		font-weight: bold;
		font-size: 36rpx;
		color: #ffffff;
		text-shadow: 0rpx 0rpx 5rpx rgba(168, 63, 90, 0.5);
		text-align: center;
		margin: 20rpx auto 20rpx;
	}

	.pay_dialog {
		width: 594rpx;
		height: 360rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/EQtest/paymentPage/dialog_bg.png) no-repeat top;
		background-size: cover;
		position: fixed;
		top: 540rpx;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.btn_area {
		margin: 240rpx 0 0 96rpx;
	}

	.btn_area image {
		width: 160rpx;
	}

	.btn_area image:active {
		border: 1rpx solid #999999;
		opacity: 0.8;
		border-radius: 28rpx;
	}

	.people_num {
		margin-top: 197rpx;
	}

	.people_num text {
		min-width: 157rpx;
		height: 44rpx;
		padding: 0 10rpx;
		background: #ffedf1;
		border-radius: 22rpx;
		font-family: "Alibaba PuHuiTi 2.0";
		font-size: 28rpx;
		color: #fc716d;
		line-height: 44rpx;
		text-align: center;
		margin-left: 373rpx;
	}

	.price_num {
		margin-top: 62rpx;
	}

	.price_num text {
		min-width: 74rpx;
		font-family: "Alibaba PuHuiTi 2.0";
		font-weight: normal;
		font-size: 32rpx;
		color: #fc716d;
		line-height: 24rpx;
		margin-left: 374rpx;
	}

	.top_footer {
		width: 750rpx;
		background: #ffffff;
		padding-bottom: 20rpx;
		position: fixed;
		bottom: 0;
	}

	.pay_price {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 10px 50rpx 0 50rpx;
	}

	.pay_price_y {
		font-family: "Alibaba PuHuiTi 2.0";
		font-weight: normal;
		font-size: 24rpx;
		color: #ff2f29;
		line-height: 16rpx;
	}

	.pay_price_p {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.price_left {
		display: flex;
	}

	.yh_title {
		font-family: "Alibaba PuHuiTi 2.0";
		font-weight: normal;
		font-size: 35rpx;
		color: #ff2f29;
		margin-top: 21rpx;
	}

	.yh_yj {
		font-family: "Alibaba PuHuiTi 2.0";
		font-weight: normal;
		font-size: 24rpx;
		color: #999999;
		text-decoration-line: line-through;
	}

	.price_center {
		font-family: "Alibaba PuHuiTi 2.0";
		font-weight: bold;
		font-size: 78rpx;
		color: #ff2f29;
		margin-top: 7rpx;
	}

	.price_right {
		width: 176rpx;
		height: 70rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/MarriageQuality/lijian.png) no-repeat;
		background-size: cover;
		padding-top: 50rpx;
	}

	.price_right text {
		font-family: "Alibaba PuHuiTi 2.0";
		font-weight: bold;
		font-size: 32rpx;
		color: #ffffff;
		margin-left: 35rpx;
	}

	.radio_class {
		display: flex;
		background-color: #ffffff;
		margin-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		border-radius: 5px;
		padding-bottom: 5px;
		align-items: center;
	}

	.radio_class_1 {
		display: flex;
		justify-content: space-around;
	}

	.pay_title {
		text-align: center;
		/* margin-top:38px; */
		font-size: 20px;
		font-family: AlibabaPuHuiTi-Heavy, AlibabaPuHuiTi;
		font-weight: 900;
		color: #500000;
		line-height: 101px;
	}

	.top_page_yh {
		font-size: 14px;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #656c74;
		line-height: 20px;
	}

	.main_scale_gmcp {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.main_scale_font_gmcp {
		font-size: 16px;
		font-family: Source Han Sans-Medium, Source Han Sans;
		font-weight: 700;
		color: #040000;
	}

	.main_xing_left {
		height: 30px;
		width: 20px;
		margin-right: 20px;
	}

	.main_xing_right {
		height: 30px;
		width: 20px;
		margin-left: 20px;
	}

	.scale_gmcp_connent {
		margin-top: 10px;
		background-color: #ffffff;
		border-radius: 10px 10px 10px 10px;
		opacity: 1;
		padding: 24px 15px;
		margin-bottom: 200px;
		overflow-y: scroll;
	}

	.pub_time {
		margin-top: 5px;
		font-size: 12px;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #c4c4c4;
		line-height: 17px;
	}

	.pub_connnet {
		font-size: 14px;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #3d3d3d;
		line-height: 20px;
	}

	.people_sy {
		font-size: 14px;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #656c74;
		line-height: 20px;
		margin-left: 4px;
	}

	.people_sy_time {
		font-family: "Alibaba PuHuiTi 2.0";
		font-weight: normal;
		font-size: 32rpx;
		color: #333333;
		line-height: 16rpx;
		display: flex;
		margin-right: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.time_ol {
		background: linear-gradient(270deg, #ff9d41 0%, #fc3c3c 100%);
		border-radius: 4px 4px 4px 4px;
		padding: 2px;
		color: #ffffff;
	}

	.time_mao {
		color: #ff9d41;
	}

	.pro_tag {
		height: 62rpx;
		padding: 0 20rpx;
		background: url(https://test.jue-ming.com:8849/api/show?filePath=./webo/Charm/paymentPage/price_bg.png) no-repeat center;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin-left: 16rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		font-family: "Alibaba PuHuiTi 2.0";
		font-weight: normal;
		font-size: 24rpx;
		color: #ffffff;

		.price {
			font-family: "Alibaba PuHuiTi 2.0";
			font-weight: bold;
			font-size: 40rpx;
			color: #ffffff;
			line-height: 16rpx;
		}
	}
</style>