<template>
	<view class="park">
		<view class="park-top">
			<view class="park-navbar">
				<!-- :is-fixed='false' -->
				<view class="navbarHeight">
					<u-navbar title="开通商城" :border-bottom="false" :background="scrollTop?background:backgroundNone">
					</u-navbar>
				</view>
				<view class="box_1">
					<image :src="$picUrl+'/static/default-logo.png'" class="image_2"
						@click="goJump('/pages/news1/setting')"></image>
					<view class="group_1">
						<view class="image-text_2" @click="goLogin()">
							{{userInfo.mobile}}
						</view>
						<view class="image-text_1" @click="goLogin()">
							{{retail==0?'您暂未开通商城哦～':'您已经开通商城啦～'}}
						</view>
					</view>
					<image :src="$picUrl+'/static/user/gmallZuan.png'" class="image_1"></image>
				</view>
			</view>
		</view>
		<u-sticky :offset-top="heightTop">
			<view class="tab_fix" :style="{ 'border-radius': radius}">
				<view class="tab_pos">
					<view class="tab_bg">
						<view :class="[tabIndex==index ? 'tab_active' : 'tab_a']" v-for="(item,index) in tabbar"
							@click="onChage(index)" :key="index">
							{{item}}
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="tab-type">
			<view class="tab-pro" v-for="(item,index) in tabType" :class="index==banIndex?'tab-pro-active':''"
				@click="onChageBan(index)" :key="index">
				<view class="tab-name">
					{{item.retail_name}}
				</view>
				<view class="tab-price">
					<text style="font-size: 32rpx;">¥</text>{{Number(item.retail_current_price)}}
				</view>
				<view class="tab-line">
					¥{{Number(item.retail_original_price)}}
				</view>
				<view class="tab-jian" v-if='item.jian>0' :class="index==banIndex?'tab-jian-active':''">
					立减 ¥{{Number(item.jian)}}元
				</view>
				<view class="tab-quan">

				</view>
			</view>
		</view>
		<view class="tab-box">
			<view class="tabFavour">
				<view class="favour" v-for="(item,index) in tabFavour" :class="index==priceIndex?'favourActive':''"
					@click="onChagePrice(index)" :key="index">
					<view class="favour_active">
						{{item.name}}
					</view>
					<view class="favour_infor">
						<view style="overflow: hidden;">
							<view class="favour_year">
								{{item.year}}<text style="font-weight: 500;">年</text>
							</view>
							<view class="favour_tips">
								限时特惠
							</view>
						</view>
						<view class="favour_price">
							<text style="font-size: 32rpx;">¥</text>{{item.price}}
						</view>
					</view>
					<view class="tab-quan"></view>
				</view>
			</view>
			<view class="tab-title">
				<view class="name">
					<image :src="$picUrl+'/static/user/left.png'"></image>开通{{tabbar[tabIndex]}}的优势<image
						:src="$picUrl+'/static/user/right.png'">
					</image>
				</view>
			</view>
			<view class="advantage">
				<view class="advantage-tips" v-if="tabIndex==0" v-html="retail"></view>
				<view class="advantage-tips" v-if="tabIndex==1" v-html="wholesale"></view>
			</view>
			<view class="tab-title" style="margin-top: 0;">
				<view class="name">
					<image :src="$picUrl+'/static/user/left.png'"></image>功能对比<image
						:src="$picUrl+'/static/user/right.png'">
					</image>
				</view>
			</view>
			<view class="equity" style="margin-top: 8px;">
				<view class="table_box">
					<u-table>
						<u-tr v-for="(a,ind) in equityList" :key="ind">
							<u-td class="box_name">{{a.name}}</u-td>
							<u-td class='box_content'>
								<u-tr v-for="(item,index) in a.list" :key="index">
									<u-td class="box_cus flex-1">
										<view class="box_tips" :style="{ color: index==0?'#333':'#594b40' }">
											{{item.feature}}
											<u-icon v-if="item.function_description"
												@click="openPopup(item.function_description,item.feature)"
												name="question-circle-fill" color="#999" size="30"></u-icon>
										</view>
									</u-td>
									<u-td class="box_cus flex-2">
										<view class="box_view">
											<u-icon v-if="item.air=='10'" name="checkbox-mark" color="#594b40"
												size="28"></u-icon>
											<view v-else>
												<u-icon v-if="item.air=='20'" name="close" color="#959595" size="28">
												</u-icon>
												<text :style="{ color: (index==0&&item.air=='air')?'#fff':'#594b40' }"
													v-else>{{item.air}}</text>
											</view>
										</view>
									</u-td>
									<u-td class="box_cus flex-3">
										<view class="box_view">
											<u-icon v-if="item.pro=='10'" name="checkbox-mark" color="#b24341"
												size="28"></u-icon>
											<view v-else>
												<u-icon v-if="item.pro=='20'" name="close" color="#959595" size="28">
												</u-icon>
												<text :style="{ color: (index==0&&item.pro=='pro')?'#fff':'#b24341' }"
													v-else>{{item.pro}}</text>
											</view>
										</view>
									</u-td>
									<u-td class="box_cus flex-4">
										<view class="box_view">
											<u-icon v-if="item.H5=='10'" name="checkbox-mark" color="#5362d9" size="28">
											</u-icon>
											<view v-else>
												<u-icon v-if="item.H5=='20'" name="close" color="#959595" size="28">
												</u-icon>
												<text :style="{ color: (index==0&&item.H5=='H5')?'#fff':'#5362d9' }"
													v-else>{{item.H5}}</text>
											</view>
										</view>
									</u-td>
								</u-tr>
							</u-td>
						</u-tr>
					</u-table>
				</view>

			</view>
			<view class="payment-method">
				<view class="title">选择支付方式</view>
				<view v-for="(a,index) in paymentMethods" :key="index" @click="tabItem1(index)"
					class="pay-item dis-flex flex-x-between">
					<view class="item-left dis-flex flex-y-center">
						<view v-if="a.method!=='huifu'" class="item-left_icon" :class="[a.method]">
							<text class="iconfont" :class="[PayMethodIconEnum[a.method]]"></text>
						</view>
						<view v-else class="huifu-box">
							<image :src="`${$picUrl}/static/yinlian.png`" mode="heightFix" class="huifu"></image>
						</view>
						<view class="item-left_text">
							<text>{{ PayMethodEnum[a.method].name }}</text>
						</view>
						<view v-if="a.method === PayMethodEnum.BALANCE.value" class="user-balance">
							<text>(可用￥{{ userInfo.balance }}元)</text>
						</view>
					</view>
					<view class="item-right col-m" v-if="payIndex == index">
						<text class="iconfont icon-check" style="color: red;"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomBtn">
			<button class="submitBtn" formType="submit" @click="submitPay">立即支付 ¥<text
					style="font-size: 48rpx;">{{tabFavour[priceIndex].price}}</text>（开通您的{{tabbar[tabIndex]}}）</button>
			<view class="paytext" @click="goRules">
				<view class="">
					本产品为软件服务产品，购买后不支持退款
				</view>
				<view class="">
					开通即表示接受<text style="color: #999;">《软件付费服务协议》</text>
				</view>
			</view>
		</view>
		<u-popup v-model="show" length="60%" mode='center' :mask='true' :closeable='true'>
			<view class="content">
				<view class="content-title">
					{{feature_name}}
				</view>
				<view class="content-box">
					{{content_description}}
				</view>
			</view>
		</u-popup>
			<addShuiyin />
	</view>
</template>
<script>
	import * as api from '@/api/tutorial'
	import {
		Wechat
	} from '@/core/payment'
	import {
		PayMethodEnum
	} from '@/common/enum/payment'
	// 支付方式对应的图标
	const PayMethodIconEnum = {
		[PayMethodEnum.WECHAT.value]: 'icon-wechat-pay',
		[PayMethodEnum.ALIPAY.value]: 'icon-alipay',
		[PayMethodEnum.BALANCE.value]: 'icon-balance-pay',
		[PayMethodEnum.HUIFU.value]: 'icon-balance-pay'
	}

	// 支付方式的终端名称
	const PayMethodClientNameEnum = {
		[PayMethodEnum.WECHAT.value]: '微信',
		[PayMethodEnum.ALIPAY.value]: '支付宝'
	}
	export default {
		data() {
			let img = 'https://www.royaum.com.cn/static/user/gmallBg.png'
			return {
				background: {
					// background: 'url(' + img + ') center top no-repeat',
					// backgroundSize: '100%',
					background: '#fdcac5',
				},
				backgroundNone: {
					background: 'none'
				},
				// 枚举类
				PayMethodEnum,
				PayMethodIconEnum,
				PayMethodClientNameEnum,
				paymentMethods: [],
				isClick: true,
				radius: '28rpx 0 0 0',
				leftNum: 33.33333,
				tabbar: ['零售商城', '批发商城'],
				tabIndex: 0,
				banIndex: 0,
				priceIndex: 0,
				payIndex: 0,
				tabType: [],
				tabFavour: [{
						name: '限时享受额外权益',
						price: 0,
						year: 1
					},
					{
						name: '限时享受额外权益',
						price: 0,
						year: 2
					}
				],
				equityList: [],
				userInfo: '',
				retail: null,
				show: false,
				content_description: '',
				feature_name: '',
				retail: '',
				wholesale: '',
				scrollTop: 0,
				heightTop:136,
			}
		},
		onLoad() {

			this.retail = uni.getStorageSync('userInfo').retail
			this.getRetailList()
			this.getDescribe()
			uni.$on('appShow', this.solveShowMsg);
		},
		onUnload() {
			uni.$off('appShow', this.solveShowMsg);
		},
		onShow() {
			let that = this
			that.checkIfElementIsAtTop()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop > 120 ? true : false
			if (this.scrollTop) {
				this.radius = '0rpx';
			} else {
				this.radius = this.tabIndex == 0 ? '28rpx 0 0 0' : '0 28rpx 0 0';
			}
		},
		methods: {
			pxToRpx(px) {
				const screenWidth = uni.getSystemInfoSync().screenWidth //窗口宽度
			    let rpx =  (750 * Number.parseInt(px)) / screenWidth //转换单位为rpx
				return  Number(rpx)
			},
			checkIfElementIsAtTop() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.navbarHeight ').boundingClientRect(data => {
					if (data) {
						this.heightTop=this.pxToRpx(data.height)
					}
				}).exec();
			},
			goRules() {
				uni.navigateTo({
					url: '/pages/gamll/rules'
				})
			},
			openPopup(msg, name) {
				this.feature_name = name
				this.content_description = msg
				if (msg) {
					this.show = true
				}
			},
			solveShowMsg(info) {
				console.log(info);
				if (this.miniPayRequest && Object.keys(this.miniPayRequest).length > 0 && info.appId === this
					.miniPayRequest.miniuser) {
					this.onTradeQuery(this.miniPayRequest.out_trade_no, this.paymentMethods[this.payIndex].method);
				}
			},
			// 已完成支付按钮事件: 请求后端查单
			onTradeQuery(outTradeNo, method) {
				const app = this
				// 交易查询
				// 查询第三方支付订单是否付款成功
				api.tradeQuery({
						outTradeNo,
						method,
						client: app.platform
					})
					.then(result => {
						if (result.data.isPay) {
							uni.showToast({
								title: result.message || "支付成功",
								icon: 'success'
							})

							setTimeout(() => {
								uni.switchTab({
									url: "/pages/user/index"
								})
							}, 1000)
						} else {
							uni.showToast({
								title: result.message || "支付失败",
								icon: 'none'
							})
						}
					})
					.finally(() => app.showConfirmModal = false)
			},
			tabItem1(i) {
				// if (this.paymentMethods[i].method == 'huifu') {
				// 	this.$toast('抱歉，此支付方式暂未完善')
				// 	return
				// }
				this.payIndex = i
				if (this.paymentMethods[i].method == "huifu") {
					this.huifuPay();
				}
			},
			onChage(index) {
				this.radius = index == 0 ? '28rpx 0 0 0' : '0 28rpx 0 0';
				this.leftNum = index == 0 ? 33.33333 : 66.66666;
				this.tabIndex = index;
				this.getRetailList()
				this.getDescribe()
			},
			onChageBan(index) {
				this.banIndex = index
				this.getRetailList()
			},
			onChagePrice(index) {
				this.priceIndex = index;
				if (this.paymentMethods[this.payIndex].method == "huifu") {
					this.huifuPay();
				}
			},
			getBan() {
				let that = this
				that.tabFavour.forEach(item => {
					if (item.year == 1) {
						item.price = item.year * that.tabType[that.banIndex].retail_current_price
					}
					if (item.year == 2) {
						item.price = Number((Number(item.year * (that.tabType[that.banIndex]
							.retail_current_price)) - Number(that.tabType[that.banIndex]
							.retail_discounts)).toFixed(2))
					}
				});
			},
			// 设置默认的支付方式
			setDefaultPayType() {
				const app = this
				const defaultIndex = app.paymentMethods.findIndex(item => item.is_default == true)
				defaultIndex > -1 && app.tabItem1(defaultIndex);
			},
			huifuPay() {
				const that = this
				let params = {
					retail_price_id: that.tabType[that.banIndex].retail_price_id,
					year: that.tabFavour[that.priceIndex].year,
					method: 'huifu',
					client: 'MP-WEIXIN'
				}
				api.submit(params)
					.then(result => {
						console.log(result);
						const {
							miniPayRequest,
							out_trade_no
						} = result.data.payment;
						that.miniPayRequest = miniPayRequest;
						that.miniPayRequest.out_trade_no = out_trade_no;
					})
					.finally(() => that.isLoading = false)
			},
			//微信支付
			async toWechatPay() {
				const that = this;
				const {
					status,
					data
				} = await api.submit({
					method: 'wechat',
					client: "MP-WEIXIN",
					retail_price_id: that.tabType[that.banIndex].retail_price_id,
					year: that.tabFavour[that.priceIndex].year
				})
				if (status == 200) {
					Wechat.payment({
							orderKey: data.payment.out_trade_no,
							...data.payment
						})
						.then((result) => {
							console.log(22, result)
							uni.showToast({
								title: "支付成功",
								icon: 'success'
							})
							this.isClick = true;
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/user/index"
								})
							}, 1000)
						})
						.catch(err => {
							uni.showToast({
								title: "支付失败",
								icon: 'none'
							})
							this.isClick = true;
						})
				}

			},
			//去支付 余额支付
			async toPay() {
				const that = this;
				const {
					status,
					message
				} = await api.submit({
					method: 'balance',
					client: "MP-WEIXIN",
					retail_price_id: that.tabType[that.banIndex].retail_price_id,
					year: that.tabFavour[that.priceIndex].year
				})
				if (status == 200) {
					uni.showToast({
						title: "支付成功"
					})
					this.isClick = true;
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/user/index"
						})
					}, 1000)
				} else {
					this.isClick = true;
					uni.showToast({
						icon: "none",
						title: message
					})
				}
			},
			// 支付
			async submitPay() {
				let that = this;
				if (that.isClick == false) {
					return;
				}
				that.isClick = false;
				if (that.paymentMethods[that.payIndex].method == "balance") {
					if (Number(that.tabFavour[that.priceIndex].price) <= Number(that.userInfo.balance)) {
						that.toPay()
					} else {
						that.isClick = true;
						uni.showToast({
							icon: "none",
							title: "余额不足，请选择其他支付方式"
						})
					}
				} else if (that.paymentMethods[that.payIndex].method == "wechat") {
					that.toWechatPay();
				} else if (that.paymentMethods[that.payIndex].method == "huifu") {
					that.isClick = true;
					if (!this.miniPayRequest || Object.keys(this.miniPayRequest).length === 0) {
						this.$toast(`暂无${this.PayMethodEnum[this.payType].name}支付信息`);
						return
					}
					let appPayRequest = '';
					appPayRequest = encodeURIComponent(JSON.stringify({
						sign: this.miniPayRequest.sign,
						prepayid: this.miniPayRequest.prepayid,
					}));
					uni.openEmbeddedMiniProgram({
						appId: this.miniPayRequest.miniuser,
						path: `${this.miniPayRequest.minipath}?appPayRequest=${appPayRequest}`
					});
				}
			},
			// 会员权益
			async getDescribe() {
				let that = this;
				let {
					status,
					message,
					data
				} = await api.describe({
					type: this.tabIndex == 0 ? 10 : 20
				});
				if (status == 200) {
					let list = Object.values(data.group)
					let all = [{
						name: '板块',
						list: [{
							feature: '功能',
							air: 'air',
							airIndex: 1,
							pro: 'pro',
							proIndex: 1,
							H5: 'H5',
							H5Index: 1,
							function_description: '',
							plate_id: 1
						}]

					}]
					list = all.concat(list)
					console.log(list)
					this.equityList = list

				} else {
					that.$toast(message)
				}
			},
			removeEmptyLines(htmlContent) {
				// 使用正则表达式匹配连续的空白字符（包括空格、制表符、换页符等）
				// 匹配两个换行符之间的任何内容，但不包括这两个换行符
				const regex = />\s*\n\s*</g;
				// 替换掉所有匹配到的内容为一个空格，这样就去除了空行
				const newContent = htmlContent.replace(regex, ' > <');
				return newContent;
			},
			// 列表
			async getRetailList() {
				let that = this;
				let pames = {
					retail_type: this.tabIndex == 0 ? 10 : 20,
					client: 'MP-WEIXIN',
				}
				let {
					status,
					message,
					data
				} = await api.retailList(pames);
				if (status == 200) {
					that.userInfo = data.list.personal;
					data.list.list.forEach(item => {
						item.jian = Number((Number(item.retail_original_price) - Number(item
							.retail_current_price)).toFixed(2))
					})
					that.tabType = data.list.list
					that.paymentMethods = data.list.paymentMethods;
					that.retail = this.removeEmptyLines(data.list.retail)
					that.wholesale = this.removeEmptyLines(data.list.wholesale)
					that.getBan()
					this.setDefaultPayType();
				} else {
					that.$toast(message)
				}
			},
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-empty {
		padding: 100rpx 0;
	}

	page {
		width: 100%;
	}

	.content {

		padding: 0rpx 30rpx 40rpx 30rpx;
		border-radius: 16rpx;
		font-size: 30rpx;
		color: #333;

		.content-title {
			font-size: 32rpx;
			font-weight: 700;
			height: 110rpx;
			text-align: center;
			line-height: 110rpx;
		}

		.content-box {
			font-size: 28rpx;
			line-height: 40rpx;
		}
	}

	::v-deep .u-mode-center-box {
		border-radius: 8rpx;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		position: relative;
		background: black;
		z-index: 999;
	}

	.park {
		height: 100%;
		width: 100%;
		background: rgba(255, 255, 255, 1);

		.park-top {
			width: 100%;
			height: 380rpx;
			background: url(https://www.royaum.com.cn/static/user/gmallBg.png) center top no-repeat;
			background-size: 100% 100%;
		}

		.box_1 {
			flex-direction: row;
			display: flex;
			align-items: center;
			margin: 40rpx auto 0 36rpx;
			position: relative;
		}

		.image_2 {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.image_1 {
			position: absolute;
			width: 340rpx;
			height: 316rpx;
			bottom: -190rpx;
			right: 35rpx;
			z-index: 1;
			transform: rotate(10deg)
		}

		.group_1 {
			height: 96rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 2rpx 0 0 30rpx;

			button:after {
				border: none !important;
			}
		}

		.image-text_1 {
			font-size: 28rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40rpx;
			color: rgba(102, 102, 102, 1);
			text-align: left;

		}

		.image-text_2 {
			font-size: 40rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 56rpx;
			color: rgba(51, 51, 51, 1);
			text-align: left;
			vertical-align: top;

		}

		.tab_fix {
			overflow: hidden;
			height: 126rpx;
			background: linear-gradient(180deg, rgba(253, 202, 197, 1) 0.42%, rgba(254, 231, 229, 1) 32.99%, rgba(255, 255, 255, 1) 100%);
		}

		.tab_pos {
			position: relative;
			width: 100%;
			height: 126rpx;

		}

		.tab_posxi {
			// background: #fdcac5;
			width: 100%;
			height: 120rpx;
		}

		.tab_bg {
			position: absolute;
			width: 100%;
			height: 126rpx;
			z-index: 9;
			display: flex;
			justify-content: center;
			// border-radius: 28rpx 28rpx, 0rpx, 0rpx;

		}

		.tab_a {
			width: 50%;
			height: 126rpx;
			font-size: 36rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 126rpx;
			color: rgba(184, 169, 169, 1);
			text-align: left;
			vertical-align: top;
			text-align: center;
		}

		.tab_active {
			width: 376rpx;
			height: 126rpx;
			background: linear-gradient(180deg, rgba(255, 245, 245, 1) 0%, rgba(255, 255, 255, 0) 100%);
			border: 4rpx solid rgba(255, 255, 255, 1);
			font-size: 36rpx;
			font-weight: 500;
			line-height: 126rpx;
			color: rgba(51, 51, 51, 1);
			text-align: center;
			border-radius: 28rpx;
		}

		.tab-type {
			display: flex;
			// justify-content: space-between;
			// justify-content: space-evenly;
			overflow: hidden;
			flex-wrap: wrap;
			margin: 0 17rpx;

			.tab-pro-active {
				background: linear-gradient(180deg, rgba(255, 238, 237, 1) 0%, rgba(255, 202, 201, 1) 66.15%, rgba(255, 173, 173, 1) 100%) !important;
				border: 4rpx solid rgba(243, 74, 64, 1) !important;
			}

			.tab-pro {
				margin: 20rpx 13rpx 0 13rpx;
				width: 214rpx;
				height: 248rpx;
				border-radius: 20rpx;
				background: linear-gradient(180deg, rgba(255, 255, 255, 1) 40%, rgba(255, 217, 217, 0.01) 100%);
				border: 4rpx solid rgba(255, 235, 235, 1);
				overflow: hidden;
				position: relative;

				.tab-name {
					width: 100%;
					font-size: 30rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 42rpx;
					color: rgba(51, 51, 51, 1);
					margin-top: 35rpx;
					text-align: center;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					-webkit-line-clamp: 1;
					white-space: normal
				}

				.tab-price {
					text-align: center;
					width: 100%;
					font-size: 48rpx;
					font-weight: 700;
					line-height: 55rpx;
					color: rgba(243, 74, 64, 1);
					margin: 8rpx 0 0 0;
				}

				.tab-line {
					width: 100%;
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40rpx;
					text-decoration-line: line-through;
					color: rgba(166, 166, 166, 1);
					text-align: center;
				}

				.tab-quan {
					border-radius: 50%;
					width: 132rpx;
					height: 132rpx;
					transform: rotate(-44.85deg);
					border: 40rpx solid rgba(243, 74, 64, 0.06);
					position: absolute;
					right: -50rpx;
					bottom: -50rpx;
				}

				.tab-jian-active {
					background: rgba(243, 74, 64, 1) !important;
				}

				.tab-jian {
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 48rpx;
					opacity: 1;
					border-radius: 0rpx 0rpx, 20rpx, 20rpx;
					background: rgba(255, 161, 162, 1);
					line-height: 48rpx;
					text-align: center;
					opacity: 1;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);

				}
			}

		}

		.tab-box {
			margin: 10rpx 30rpx 24rpx 30rpx;
			overflow: hidden;

			.tabFavour {
				display: flex;
				justify-content: space-between;
				margin-top: 42rpx;

				.favour {
					width: 336rpx;
					height: 144rpx;
					border-radius: 20rpx;
					background: linear-gradient(90deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 243, 242, 0.89) 100%);
					border: 4rpx solid rgba(255, 235, 235, 1);
					position: relative;

					// .tab-quan {
					// 				border-radius: 50%;
					// 				width: 132rpx;
					// 				height: 132rpx;
					// 				transform: rotate(-44.85deg);
					// 				border: 40rpx solid rgba(243, 74, 64, 0.06);
					// 				position: absolute;
					// 				right: -50rpx;
					// 				bottom: -50rpx;
					// 				overflow: hidden;
					// 			}
					.favour_active {
						z-index: 99;
						top: -20rpx;
						left: 0;
						line-height: 40rpx;
						position: absolute;
						padding: 0 18rpx;
						height: 40rpx;
						border-radius: 0rpx 24rpx 24rpx 24rpx;
						background: linear-gradient(90deg, rgba(243, 74, 64, 1) 0%, rgba(255, 142, 89, 1) 100%);
						font-size: 24rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						color: rgba(255, 255, 255, 1);
					}

					.favour_infor {
						margin: 35rpx 20rpx 0 20rpx;
						display: flex;
						justify-content: space-between;

						.favour_year {
							font-size: 32rpx;
							font-weight: 700;
							letter-spacing: 0rpx;
							line-height: 45rpx;
							color: rgba(51, 51, 51, 1);

						}

						.favour_tips {
							font-size: 26rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 45rpx;
							color: rgba(153, 153, 153, 1);

						}
					}

					.favour_price {
						font-size: 48rpx;
						font-weight: 700;
						letter-spacing: 0rpx;
						line-height: 67rpx;
						color: rgba(243, 74, 64, 1);

					}
				}



				.favourActive {
					background: linear-gradient(91.32deg, rgba(255, 248, 247, 0.56) 0%, rgba(255, 185, 181, 1) 100%) !important;
					border: 4rpx solid rgba(243, 74, 64, 1) !important;
				}
			}

			.tab-title {
				overflow: hidden;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 15rpx;

				.name {
					font-size: 32rpx;
					font-weight: 700;
					color: rgba(51, 51, 51, 1);

					image {
						width: 30rpx;
						height: 30rpx;
						margin: 0 10rpx;
					}

				}

			}

			.equity {
				margin-bottom: 60rpx;
				position: relative;

				.table_box {
					overflow: hidden;
					border-radius: 20rpx;
				}

				::v-deep .u-table {
					border: none !important;
				}

				::v-deep u-td,
				u-th {
					display: flex !important;
					flex: auto !important
				}

				::v-deep .box_content .u-tr {
					border: 1rpx solid #e4e7ed;
				}

				::v-deep .box_content .u-tr {
					border-left: none;
					border-right: none;
					border-bottom: none;
				}

				::v-deep u-tr:nth-child(1) .box_content u-tr:nth-child(1) .flex-1 {
					background-color: #e3e6f5;
					color: #333 !important;
					font-size: 34rpx;
					font-weight: 700;
				}

				::v-deep u-tr:nth-child(1) .box_content u-tr:nth-child(1) .flex-2 {
					background-color: #f6cdb1;
					font-size: 34rpx;
					font-weight: 700;
				}

				::v-deep u-tr:nth-child(1) .box_content u-tr:nth-child(1) .flex-3 {
					background-color: #fe9a9a;
					font-size: 34rpx;
					font-weight: 700;
				}

				::v-deep u-tr:nth-child(1) .box_content u-tr:nth-child(1) .flex-4 {
					background-color: #5a74e3;
					font-size: 34rpx;
					font-weight: 700;
				}

				::v-deep u-tr:nth-child(1) {
					border-top: none;
				}

				.box_name {
					width: 10%;
					border-top: 1rpx solid #e4e7ed;
				}

				::v-deep .box_name {
					background: #D6D6D6;
				}

				.box_content {
					width: 80%;
				}

				.box_cus {
					text-align: center;
					padding: 10px 3px !important;
					height: auto;
					vertical-align: middle;
					width: 25%;
					// border-left: 1rpx solid #e4e7ed;

					.box_view {
						display: flex;
						align-items: center;
						height: 100%;
						justify-content: center;
						flex-grow: 1;
						vertical-align: middle;
						color: #333;
						font-size: 28rpx;

						image {
							width: 30rpx;
							height: 30rpx;
							margin: 0 auto;
							margin-left: calc(50% - 15rpx);
							display: block;
							vertical-align: middle;
						}
					}

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

				}

				.flex-1 {
					width: 28% !important;
					background-color: #F5F5F5;
				}

				.flex-2,
				.flex-3,
				.flex-4 {
					width: 24% !important;
				}

				.flex-2 {
					background-color: #fef4e8;
				}

				.flex-3 {
					background-color: #feeaeb;
				}

				.flex-4 {
					background-color: #eeedfd;
				}

				.box_cus:nth-child(1) {
					border-left: none;
				}

				::v-deep .u-td {
					border: none !important;
					padding: 0 !important;
				}
			}

			.advantage {
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;

				.advantage-tips {
					font-size: 26rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40rpx;
					color: rgba(51, 51, 51, 1);
					text-align: left;

					rich-text {
					    text-align: left;
						line-height: 50rpx !important;
					}

				}
			}
		}
	}

	.bottomBtn {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 180upx;
		z-index: 88;
		background: #fff;

		.paytext {
			line-height: 24rpx;
			font-size: 20rpx;
			color: #333;
			margin: 0 160rpx;
			text-align: center;
		}

	}

	.submitBtn {
		height: 85rpx;
		line-height: 85upx;
		background: #FFAAA4;
		background: #FE483B;
		border-radius: 36px;
		font-size: 30rpx;
		font-weight: 700;
		letter-spacing: 0rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		margin: 20rpx 58rpx 16rpx 58rpx;
	}

	.payment-method {
		width: 100%;
		margin: 20rpx 0 220rpx 0;
		padding: 0 40rpx 0 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;

		.title {
			padding: 30rpx 0 30rpx 20rpx;
			font-size: 30rpx;
		}

		.pay-item {
			padding: 26rpx 0;
			font-size: 28rpx;
			border-bottom: 1rpx solid rgb(248, 248, 248);

			&:last-child {
				border-bottom: none;
			}

			.item-left_icon {
				width: 100rpx;
				text-align: center;
				font-size: 60rpx;

				&.wechat {
					color: #00c800;
				}

				&.alipay {
					color: #009fe8;
				}

				&.balance {
					color: #ff9700;
				}

				&.huifu {
					color: #009fe8;
				}
			}

			.huifu-box {
				width: 100rpx;
				display: flex;
				justify-content: center;

				.huifu {
					height: 44rpx;
				}
			}

			.item-left_text {
				font-size: 28rpx;
			}

			.item-right {
				font-size: 32rpx;
			}

			.user-balance {
				margin-left: 20rpx;
				font-size: 26rpx;
			}
		}

	}
</style>
