yizhizan-h5/my/vip/index.vue

<template>
	<view class="page-box">
		<navBar title="vip" color="#b1643c" />
		<view class="page-content">
			<!-- 用户端 -->
			<block v-if="userType == 1">
				<view class="bgTop flex justify-center">
					<view class="bgTop-box">
						<view class="bgTop-box-top flex justify-center align-center">
							<view class="bgTop-box-top-box flex justify-between align-center">
								<view class="bgTop-box-top-box-l">
									<view class="bgTop-box-top-box-l-t">
										{{ isVip == true ? "已开通会员" : "开通会员" }}
									</view>
									<view class="bgTop-box-top-box-l-c"> 提升简历曝光 </view>
									<view class="bgTop-box-top-box-l-b">
										{{
                      isVip == true ? "到期时间：" + dataTime : "开通会员更多招聘方联系你"
                    }}
									</view>
								</view>
								<view class="bgTop-box-top-box-r">
									<image src="../../static/images/my/icon/vip5.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="bgTop-box-btn flex justify-around">
							<view class="bgTop-box-btn-item">
								<image src="../../static/images/my/icon/btn1.png" mode=""></image>
								<view class="bgTop-box-btn-item-t"> 专属客服 </view>
							</view>
							<view class="bgTop-box-btn-item">
								<image src="../../static/images/my/icon/btn2.png" mode=""></image>
								<view class="bgTop-box-btn-item-t"> 优先提醒 </view>
							</view>
							<view class="bgTop-box-btn-item">
								<image src="../../static/images/my/icon/btn3.png" mode=""></image>
								<view class="bgTop-box-btn-item-t"> 简历刷新 </view>
							</view>
							<view class="bgTop-box-btn-item">
								<image src="../../static/images/my/icon/btn4.png" mode=""></image>
								<view class="bgTop-box-btn-item-t"> 简历置顶 </view>
							</view>
						</view>
					</view>
				</view>
				<view class="icon flex justify-center align-start">
					<u-icon name="arrow-up-fill" color="#ffffff" size="50"></u-icon>
				</view>
				<view class="bgc"></view>
				<view class="bgb flex justify-center">
					<view class="bgb-c flex justify-center">
						<view class="bgb-c-n">
							<view class="bgb-c-n-title flex justify-between align-center">
								<view class="bgb-c-n-title-l bgb-c-n-titles"> 专属特权 </view>
								<view class="bgb-c-n-title-c bgb-c-n-titles"> 普通用户 </view>
								<view class="bgb-c-n-title-r bgb-c-n-titles"> VIP </view>
							</view>
							<view class="bgb-c-n-title flex justify-between align-center">
								<view class="bgb-c-n-title-l bgb-c-n-titles"> 简历刷新 </view>
								<view class="bgb-c-n-title-c bgb-c-n-titles"> {{ noVipNum }}次/天 </view>
								<view class="bgb-c-n-title-r bgb-c-n-titles"> {{ vipNum }}次/天 </view>
							</view>
							<view class="bgb-c-n-title flex justify-between align-center">
								<view class="bgb-c-n-title-l bgb-c-n-titles"> 优先提醒 </view>
								<view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
								<view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
							</view>
							<view class="bgb-c-n-title flex justify-between align-center">
								<view class="bgb-c-n-title-l bgb-c-n-titles"> 专属客服 </view>
								<view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
								<view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
							</view>
							<view class="bgb-c-n-title flex justify-between align-center">
								<view class="bgb-c-n-title-l bgb-c-n-titles"> 视频面试 </view>
								<view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
								<view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
							</view>
							<view class="bgb-c-n-title flex justify-between align-center">
								<view class="bgb-c-n-title-l bgb-c-n-titles"> 语音沟通 </view>
								<view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
								<view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
							</view>
							<view class="bgb-c-n-title flex justify-between align-center">
								<view class="bgb-c-n-title-l bgb-c-n-titles"> 简历置顶 </view>
								<view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
								<view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
							</view>
						</view>
					</view>
				</view>
				<view class="btn flex justify-center align-start flex-wrap" v-if="isVip == false">
					<view class="" style="width: 686rpx; padding-left: 20rpx">
						<view class="flex align-center" style="width: 100%">
							<u-checkbox size="28rpx" v-model="checked" shape="circle">
								<view class="flex align-center">开通即同意<navigator style="color: #016bf6"
										url="/my/setting/weekXiYi" open-type="navigate">《会员开通协议》</navigator>
								</view>
							</u-checkbox>
						</view>
					</view>
					<view class="btn-c flex align-center justify-between">
						<view class="btn-c-l flex align-center">
							<text>{{ vipPrice }}</text>
							<text>元/月</text>
						</view>
						<view class="btn-c-r flex justify-center align-center" @click="submit()">
							立即购买
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="bgTop flex justify-center">
					<view class="bgTop-box">
						<view class="bgTop-box-top flex justify-center align-center">
							<view class="bgTop-box-top-box flex justify-between align-center">
								<view class="bgTop-box-top-box-l">
									<view class="bgTop-box-top-box-l-t">
										{{ isVipC == true ? "已开通会员" : "开通会员" }}
									</view>
									<view class="bgTop-box-top-box-l-c"> 提升岗位曝光 </view>
									<view class="bgTop-box-top-box-l-b">
										{{
                      isVipC == true
                        ? "到期时间：" + dataTimeC
                        : "开通会员更多求职者联系你"
                    }}
									</view>
								</view>
								<view class="bgTop-box-top-box-r">
									<image src="../../static/images/my/icon/vip5.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="bgTop-box-btn flex justify-around">
							<view class="bgTop-box-btn-item">
								<image src="../../static/images/my/icon/btn1.png" mode=""></image>
								<view class="bgTop-box-btn-item-t"> 专属客服 </view>
							</view>
							<view class="bgTop-box-btn-item">
								<image src="../../static/images/my/icon/btn2.png" mode=""></image>
								<view class="bgTop-box-btn-item-t"> 优先推荐 </view>
							</view>
							<view class="bgTop-box-btn-item">
								<image src="../../static/images/my/icon/btn3.png" mode=""></image>
								<view class="bgTop-box-btn-item-t"> 招聘刷新 </view>
							</view>
							<view class="bgTop-box-btn-item">
								<image src="../../static/images/my/icon/btn4.png" mode=""></image>
								<view class="bgTop-box-btn-item-t"> 专属特权 </view>
							</view>
						</view>
					</view>
				</view>
				<view class="icon flex justify-center align-start">
					<u-icon name="arrow-up-fill" color="#ffffff" size="50"></u-icon>
				</view>
				<view class="bgc"></view>
				<view class="bgb flex justify-center">
					<view class="bgb-c flex justify-center">
						<view class="bgb-c-n">
							<view class="bgb-c-n-title flex justify-between align-center">
								<view class="bgb-c-n-title-l bgb-c-n-titles"> 专属特权 </view>
								<view class="bgb-c-n-title-c bgb-c-n-titles"> 普通用户 </view>
								<view class="bgb-c-n-title-r bgb-c-n-titles"> VIP </view>
							</view>
							<view class="bgb-c-n-title flex justify-between align-center">
								<view class="bgb-c-n-title-l bgb-c-n-titles"> 招聘刷新 </view>
								<view class="bgb-c-n-title-c bgb-c-n-titles">
									{{ noVipNumCom }}次/天
								</view>
								<view class="bgb-c-n-title-r bgb-c-n-titles"> {{ vipNumCom }}次/天 </view>
							</view>
							<view class="bgb-c-n-title flex justify-between align-center">
								<view class="bgb-c-n-title-l bgb-c-n-titles"> 优先推荐 </view>
								<view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
								<view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
							</view>
							<view class="bgb-c-n-title flex justify-between align-center">
								<view class="bgb-c-n-title-l bgb-c-n-titles"> 专属客服 </view>
								<view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
								<view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
							</view>
							<view class="bgb-c-n-title flex justify-between align-center">
								<view class="bgb-c-n-title-l bgb-c-n-titles"> 视频面试 </view>
								<view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
								<view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
							</view>
							<view class="bgb-c-n-title flex justify-between align-center">
								<view class="bgb-c-n-title-l bgb-c-n-titles"> 语音沟通 </view>
								<view class="bgb-c-n-title-c bgb-c-n-titles"> × </view>
								<view class="bgb-c-n-title-r bgb-c-n-titles"> √ </view>
							</view>
							<view class="bgb-c-n-title flex justify-between align-center">
								<view class="bgb-c-n-title-l bgb-c-n-titles"> 免费沟通 </view>
								<view class="bgb-c-n-title-c bgb-c-n-titles"> {{ msgNum }}次/天 </view>
								<view class="bgb-c-n-title-r bgb-c-n-titles"> {{ vipMsgNum }}次/天 </view>
							</view>
							<view class="bgb-c-n-title flex justify-between align-center">
								<view class="bgb-c-n-title-l bgb-c-n-titles"> 沟通价格 </view>
								<view class="bgb-c-n-title-c bgb-c-n-titles"> {{ msgPrice }}元/次 </view>
								<view class="bgb-c-n-title-r bgb-c-n-titles">
									{{ vipMsgPrice }}元/次
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="btn flex justify-center align-start flex-wrap" v-if="isVipC == false">
					<view class="" style="width: 686rpx; padding-left: 20rpx">
						<view class="flex align-center" style="width: 100%">
							<u-checkbox size="28rpx" v-model="checked" shape="circle">
								<view class="flex align-center">开通即同意<navigator style="color: #016bf6"
										url="/my/setting/weekXiYi" open-type="navigate">《会员开通协议》</navigator>
								</view>
							</u-checkbox>
						</view>
					</view>
					<view class="btn-c flex align-center justify-between">
						<view class="btn-c-l flex align-center">
							<text>{{ vipPrice }}</text>
							<text>元/月</text>
						</view>
						<view class="btn-c-r flex justify-center align-center" @click="submit()">
							立即购买
						</view>
					</view>
				</view>
			</block>
			<u-popup v-model="show" mode="bottom" :mask-close-able="false" border-radius="24" :closeable="true">
				<view class="payTitle">选择支付类型</view>
				<view class="payPrice"> 支付价格：¥{{ vipPrice }} </view>
				<view class="payList flex justify-center">
					<view class="payList-box">
						<view class="payList-box-item flex align-center justify-between" v-for=""
							v-for="(item, index) in openLists" :key="index">
							<view class="payList-box-item-l flex align-center">
								<image :src="item.image" style="
                    width: 54rpx;
                    height: 54rpx;
                    border-radius: 50%;
                    margin-right: 20rpx;
                  " mode="">
								</image>
								{{ item.text }}
							</view>
							<view class="payList-box-item-r">
								<radio-group name="openWay" @tap="selectWay(item)">
									<label class="tui-radio">
										<radio color="#016BF6" :checked="openWay === item.id ? true : false" />
									</label>
								</radio-group>
							</view>
						</view>
					</view>
				</view>
				<view class="payBtn flex justify-center">
					<view class="payBtn-box flex justify-center align-center" @click="pay()">
						确认支付
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import navBar from "@/components/nav-bar/index.vue";

	export default {
		data() {
			return {
				show: false,
				checked: false,
				number: 0,
				userType: "2",
				current: 0,
				xingValue1: "",
				chakan1: "",
				jiangjiMouth: "",
				xingValue2: "",
				chakan2: "",
				jiangjiMouth2: "",
				list1: [],
				list2: [],
				list3: [],
				vipNum: 0,
				noVipNum: 0,
				vipNumCom: 0,
				noVipNumCom: 0,
				userMonthTime: "", //用户会员到期时间
				companyMonthTime: "", //企业会员到期时间
				vipPrice: "0", //会员价格
				openLists: [],
				openWay: 1,
				isVip: false,
				isVipC: "",
				dataTime: "", //到期时间
				dataTimeC: "",
				isTrue: true,
				msgNum: 0, //非会员每天免费联系次数
				vipMsgNum: 0, //会员每天免费联系次数
				msgPrice: 0, //非会员每次联系价格
				vipMsgPrice: 0, //会员每次联系价格
			};
		},
		components: {
			navBar,
		},
		onShow() {
			this.msgNum = uni.getStorageSync("msgNum") ? uni.getStorageSync("msgNum") : 0;
			this.vipMsgNum = uni.getStorageSync("vipMsgNum") ?
				uni.getStorageSync("vipMsgNum") :
				0;
			this.vipMsgPrice = uni.getStorageSync("vipMsgPrice") ?
				uni.getStorageSync("vipMsgPrice") :
				0;
			this.msgPrice = uni.getStorageSync("msgPrice") ? uni.getStorageSync("msgPrice") : 0;
			this.getUserInfo();
		},
		onLoad() {
			this.userType = uni.getStorageSync("userType");
			if (this.userType == 1) {
				//用户简历的刷新次数
				this.getVipPeople();
				this.getNoVipPeople();
			} else {
				this.getVipCom();
				this.getNoVipCom();
			}
			this.getVipPrice();
			// #ifdef APP-PLUS
			this.openLists = [{
					image: "../../static/images/my/zhifubao.png",
					text: "支付宝",
					id: 1,
				},
				{
					image: "../../static/images/my/icon_weixin.png",
					text: "微信",
					id: 2,
				},
			];
			this.openWay = 1;
			// #endif

			// #ifdef MP-WEIXIN
			this.openLists = [{
				image: "../../static/share/icon_weixin.png",
				text: "微信",
				id: 2,
			}, ];
			this.openWay = 2;
			// #endif

			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf("micromessenger") !== -1) {
				this.openLists = [{
						image: "../../static/images/my/zhifubao.png",
						text: "支付宝",
						id: 1,
					},
					{
						image: "../../static/share/icon_weixin.png",
						text: "微信",
						id: 2,
					},
				];
			} else {
				this.openLists = [{
					image: "../../static/images/my/zhifubao.png",
					text: "支付宝",
					id: 1,
				}, ];
			}

			this.openWay = 1;
			// #endif
		},
		methods: {
			//支付
			pay() {

				let that = this;
				if (that.isTrue == false) {
					return;
				}
				let token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({
						title: "登录过期",
						icon: "none",
					});
					return
				}

				console.log('进入支付')
				that.isTrue = false;
				if (this.openWay == 2) {
					// #ifdef APP-PLUS
					// 微信APP支付 根据订单id获取支付信息
					this.$Request
						.post("/app/wxPay/wxPayOrder", {
							classify: 1,
							money: this.vipPrice,
							type: 2,
						})
						.then((ret) => {
							this.isCheckPay(ret.code, "wxpay", JSON.stringify(ret.data));
						});
					// #endif

					// #ifdef MP-WEIXIN
					// 微信小程序支付
					this.$Request
						.post("/app/wxPay/wxPayOrder", {
							classify: 3,
							money: this.vipPrice,
							type: 2,
						})
						.then((ret) => {
							uni.hideLoading();
							console.log(ret.data);
							uni.requestPayment({
								provider: "wxpay",
								timeStamp: ret.data.timestamp,
								nonceStr: ret.data.noncestr,
								package: ret.data.package,
								signType: ret.data.signType,
								paySign: ret.data.sign,
								success: function(suc) {
									console.log("success:" + JSON.stringify(suc));
									uni.showToast({
										title: "支付成功",
										icon: "success",
									});
									that.show = false;
									that.isTrue = true;
									that.getUserInfo();
								},
								fail: function(err) {
									console.log("fail:" + JSON.stringify(err));
									that.isTrue = true;
									uni.showToast({
										title: "支付失败",
										icon: "none",
									});
								},
							});
						});
					// #endif

					// #ifdef H5
					let ua = navigator.userAgent.toLowerCase();
					if (ua.indexOf("micromessenger") !== -1) {
						let data = {
							classify: 2,
							money: this.vipPrice,
							type: 2,
						};
						this.$Request.postJson("/app/wxPay/wxPayOrder", data).then((res) => {
							if (res.code == 0) {
								this.callPay(res.data);
							} else {
								that.isTrue = true;
								uni.showToast({
									icon: "none",
									title: "支付失败!",
								});
							}
						});
					}
					// #endif
				} else {
					// APP支付宝支付
					// #ifdef APP
					console.log("APP进入支付。");
					const datas = {
						classify: 4,
						money: 0.1,
						type: 2,
					}
					this.$Request.postT("/app/aliPay/payMoneyOrder", datas).then((ret) => {
						this.show = false;
						console.log(ret);
						this.isCheckPay(ret.code, "alipay", ret.data);
					});
					// #endif
					// #ifdef H5
					let data = {
						classify: 4,
						money: this.vipPrice,
						type: 2,
					};
					this.$Request.postJson("/app/aliPay/payMoneyOrder", data).then((res) => {
						if (res.code === 0) {
							this.show = false;
							that.isTrue = true;
							const div = document.createElement("div");
							div.innerHTML = res.data; //此处form就是后台返回接收到的数据
							// document.body.appendChild(div);
							// document.forms[0].submit();
						} else {
							that.isTrue = true;
							uni.showToast({
								icon: "none",
								title: "支付失败!",
							});
						}
					});
					// #endif
				}
			},
			callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener(
							"WeixinJSBridgeReady",
							this.onBridgeReady(response),
							false
						);
					} else if (document.attachEvent) {
						document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady(response));
						document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			onBridgeReady: function(response) {
				let that = this;
				if (!response.package) {
					return;
				}
				console.log(response, "++++++++");
				WeixinJSBridge.invoke(
					"getBrandWCPayRequest", {
						appId: response.appid, //公众号名称，由商户传入
						timeStamp: response.timestamp, //时间戳，自1970年以来的秒数
						nonceStr: response.noncestr, //随机串
						package: response.package,
						signType: response.signType, //微信签名方式：
						paySign: response.sign, //微信签名
					},
					function(res) {
						console.log(res, "/*-/*-/*-");
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							uni.showLoading({
								title: "支付成功",
							});
							setTimeout(function() {
								that.isTrue = true;
								uni.hideLoading();
							}, 1000);
							that.show = false;
							that.getUserInfo();
						} else {
							that.isTrue = true;
							uni.hideLoading();
						}
						WeixinJSBridge.log(response.err_msg);
					}
				);
			},
			isCheckPay(status, name, order) {
				let that = this;
				if (status == 0) {
					this.setPayment(name, order);
				} else {
					uni.hideLoading();
					that.isTrue = true;
					uni.showToast({
						title: "支付信息有误",
						icon: "none",
					});
				}
			},
			setPayment(name, order) {
				let that = this;
				console.log("*-*-*");
				uni.requestPayment({
					provider: name,
					orderInfo: order, //微信、支付宝订单数据
					success: function(res) {
						console.log(res);
						uni.hideLoading();
						uni.showLoading({
							title: "支付成功",
						});
						that.show = false;
						that.getUserInfo();
						that.isTrue = true;
					},
					fail: function(err) {
						console.log(err);
						that.isTrue = true;
						uni.hideLoading();
					},
					complete() {
						that.isTrue = true;
						uni.hideLoading();
					},
				});
			},
			selectWay: function(item) {
				this.openWay = item.id;
			},
			//获取会员开通价格
			getVipPrice() {
				if (uni.getStorageSync("userType") == 1) {
					//用户会员价格
					this.$Request.get("/app/common/type/331").then((res) => {
						if (res.code == 0) {
							this.vipPrice = res.data.value;
						}
					});
				} else {
					//企业会员价格
					this.$Request.get("/app/common/type/332").then((res) => {
						if (res.code == 0) {
							this.vipPrice = res.data.value;
						}
					});
				}
			},
			//获取个人信息
			getUserInfo() {
				this.$Request.get("/app/user/selectUserById").then((res) => {
					if (res.code == 0) {
						if (res.data.isUserVip + "" == 1) {
							this.isVip = true;
							this.dataTime = res.data.userMonthTime;
						} else {
							this.isVip = false;
						}
						if (res.data.isCompanyVip + "" == "1") {
							this.isVipC = true;
							this.dataTimeC = res.data.companyMonthTime;
						} else {
							this.isVipC = false;
						}
					}
				});
			},
			submit() {
				if (this.checked == false) {
					uni.showToast({
						title: "请阅读并同意《会员开通协议》",
						icon: "none",
					});
					return;
				}
				console.log('准备支付')
				this.show = true;
			},
			//会员简历刷新次数
			getVipPeople() {
				this.$Request.get("/app/common/type/328").then((res) => {
					if (res.code == 0) {
						this.vipNum = res.data.value;
					}
				});
			},
			//非会员简历刷新次数
			getNoVipPeople() {
				this.$Request.get("/app/common/type/327").then((res) => {
					if (res.code == 0) {
						this.noVipNum = res.data.value;
					}
				});
			},
			//会员岗位刷新次数
			getVipCom() {
				this.$Request.get("/app/common/type/330").then((res) => {
					if (res.code == 0) {
						this.vipNumCom = res.data.value;
					}
				});
			},
			//非会员岗位刷新次数
			getNoVipCom() {
				this.$Request.get("/app/common/type/329").then((res) => {
					if (res.code == 0) {
						this.noVipNumCom = res.data.value;
					}
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	.page-box {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		top: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.page-content {
			flex: 1;
			overflow: hidden;
			overflow-y: auto;
		}
	}

	page {
		background-color: #f6f6f6;
	}

	/deep/.u-checkbox__icon-wrap--checked {
		background-color: #016bf6;
		border-color: #016bf6;
	}

	.payTitle {
		width: 100%;
		text-align: center;
		font-weight: bold;
		margin-top: 30rpx;
	}

	.payPrice {
		width: 100%;
		margin-top: 30rpx;
		text-align: center;
	}

	.payList {
		width: 100%;
		margin-top: 20rpx;

		.payList-box {
			width: 686rpx;

			.payList-box-item {
				width: 100%;
				margin-bottom: 20rpx;
			}

			.payList-box-item-l {
				font-size: 30rpx;
			}
		}
	}

	.payBtn {
		width: 100%;
		height: 88rpx;
		margin-top: 20rpx;
		margin-bottom: 60rpx;

		.payBtn-box {
			width: 686rpx;
			height: 100%;
			background-color: #016bf6;
			color: #ffffff;
			border-radius: 40rpx;
		}
	}

	.bgTop {
		width: 100%;
		height: 611rpx;
		background-color: #1f1f27;

		.bgTop-box {
			width: 686rpx;
			height: 100%;

			.bgTop-box-top {
				width: 100%;
				height: 300rpx;
				margin-top: 30rpx;
				background: linear-gradient(90deg, #eab99b 0%, #f8d6bb 46%, #dc9c79 100%);
				border-radius: 16rpx;
			}

			.bgTop-box-top-box {
				width: calc(100% - 60rpx);
				height: 165rpx;
			}

			.bgTop-box-top-box-l {
				.bgTop-box-top-box-l-t {
					// color: #9C694D;
					font-size: 34rpx;
					font-weight: 800;
					background-image: linear-gradient(to right, #6f3e1d, #c4724b);
					background-clip: text;
					color: transparent;
				}

				.bgTop-box-top-box-l-c {
					background-image: linear-gradient(to right, #6f3e1d, #c4724b);
					background-clip: text;
					color: transparent;
					font-size: 34rpx;
					font-weight: 800;
					// margin-top: 10rpx;
				}

				.bgTop-box-top-box-l-b {
					color: #9c694d;
					font-size: 26rpx;
					font-weight: 500;
					margin-top: 30rpx;
				}
			}

			.bgTop-box-top-box-r {
				width: 178rpx;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.bgTop-box-btn {
				width: 100%;
				height: 187rpx;
				background: linear-gradient(0deg, #272731 0%, #1f1f27 100%);
				border-radius: 16rpx;
				margin-top: 20rpx;

				.bgTop-box-btn-item {
					width: 100rpx;
					margin-top: 10rpx;

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}

					.bgTop-box-btn-item-t {
						width: 100rpx;
						color: #d6b19b;
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 16rpx;
					}
				}
			}
		}
	}

	.icon {
		width: 100%;
		margin-top: -50rpx;
	}

	.bgc {
		width: 100%;
		height: 158rpx;
		background: #f6f6f6;
		border-radius: 24rpx;
		margin-top: -20rpx;
	}

	.bgb {
		width: 100%;
		// height: 400rpx;
		margin-top: -130rpx;

		.bgb-c {
			width: 686rpx;
			height: 100%;
			background-color: #ffffff;
			border-radius: 24rpx;

			.bgb-c-n {
				width: 606rpx;
				height: 100%;
			}

			.bgb-c-n-title:nth-of-type(1) {
				margin-top: 46rpx;
			}

			.bgb-c-n-title {
				width: 100%;
				// margin-top: 20rpx;
				margin-bottom: 50rpx;

				.bgb-c-n-titles {
					width: 150rpx;
					text-align: center;
				}

				.bgb-c-n-title-l {
					color: #202020;
					font-size: 28rpx;
					font-weight: 800;
				}

				.bgb-c-n-title-c {
					color: #202020;
					font-size: 28rpx;
					font-weight: 800;
				}

				.bgb-c-n-title-r {
					color: #b1643c;
					font-size: 28rpx;
					font-weight: 800;
				}
			}
		}
	}

	.btn {
		width: 100%;
		// height: 140rpx;
		background-color: #f6f6f6;
		position: fixed;
		bottom: 0;

		.btn-c {
			margin-top: 10rpx;
			width: 686rpx;
			height: 90rpx;
			border-radius: 45rpx;
			background: linear-gradient(90deg, #056d70 0%, #023842 100%);
			margin-bottom: 40rpx;

			.btn-c-l {
				width: 436rpx;
				height: 100%;
				color: #febb91;

				// font-weight: 800;
				text:nth-of-type(1) {
					font-size: 44rpx;
					margin-left: 20rpx;
				}

				text:nth-of-type(2) {
					font-size: 32rpx;
				}
			}

			.btn-c-r {
				width: 250rpx;
				height: 100%;
				background: linear-gradient(90deg, #ffe2da 0%, #ffb584 100%);
				border-radius: 0rpx 45rpx 45rpx 0rpx;
				color: #5e3c28;
				font-size: 28rpx;
				// font-weight: 800;
			}
		}
	}
</style>