yizhizan-h5/my/vip/index.vue

<template>
	<view style="padding-bottom: 300rpx;">
		<!-- 用户端 -->
		<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: #00B88F;"
									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: #00B88F;"
									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="#00B88F" :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>
</template>

<script>
	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, //会员每次联系价格
			}
		},
		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
				}
				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.post('/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
					this.$Request.post("/app/aliPay/payMoneyOrder", {
						classify: 4,
						money: this.vipPrice,
						type: 2,
					}).then(ret => {
						this.show = false
						console.log(ret)
						this.isCheckPay(ret.code, 'alipay', ret.data);
					});
					// #endif
					// #ifdef H5
					let data = {
						classify: 5,
						money: this.vipPrice,
						type: 2,
					}
					this.$Request.post('/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
				}
				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">
	page {
		background-color: #F6F6F6;

	}

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

	.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: #00B88F;
			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>