duomendian/pages/annex/vip_paid/index1.vue

<template>
	<!-- svip会员模块 -->
	<view class="vipPaid">
		<!-- #ifdef MP -->
		<NavBar titleText="SVIP会员" :iconColor="iconColor" :textColor="iconColor" :isScrolling="isScrolling" showBack></NavBar>
		<!-- #endif -->
		<view class="headerBg"></view>
		<view class="card-section">
			<image src="../static/vip-paid.png" class="vip-paid"></image>
			<view class="wrapper">
				<view class="avatar-wrap acea-row">
					<image class="avatar" :src="userInfo.avatar"></image>
					<view class="text">
						<view class="name line1">{{userInfo.nickname}}</view>
						<view class="tips" v-if="userInfo.is_ever_level">永久SVIP会员</view>
						<view class="tips" v-else-if="userInfo.is_money_level">{{userInfo.overdue_time | dateFormat}} 到期</view>
						<view class="arrow" @click="goRightDetail">权益介绍<text class="iconfont icon-ic_rightarrow"></text></view>
					</view>
				</view>
				<view class="right-section">
					<view class="section-bd acea-row row-between-wrapper">
						<view v-for="item in memberRights" :key="item.id" class="item">
							<view class="image-wrap acea-row row-center row-middle">
								<view class="image-wrap-inner">
									<image class="image" :src="item.pic"></image>
								</view>
							</view>
							<view class="text">
								<view class="name">{{item.title}}</view>
								<view>{{item.explain}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 选择卡种 -->
		<view class="other-section">
			<view class="type-section" id="card" v-if="memberType.length && !userInfo.is_ever_level">
				<view class="type-section-inner">
					<view class="title acea-row row-between-wrapper">
						<view class="">选择卡种</view>
						<view class="cash" @click="drawMemberCard">点击兑换卡密</view>
					</view>
					<scroll-view class="scroll" scroll-x="true">
						<view v-for="item in memberType" :key="item.id" class="item" :class="{on: item.id === svip.id}" @click="checkType(item)">
							<view v-if="item.is_label" class="badge">限时特惠</view>
							<view class="name">{{item.title}}</view>
							<view class="new">￥<text class="num">{{item.pre_price | moneyFormat}}</text></view>
							<view class="old">￥{{item.price | moneyFormat}}</view>
							<view class="button">立省{{ $util.$h.Sub(item.price, item.pre_price) }}元</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view v-if="memberCoupons.length" class="coupon-section">
				<view class="section-hd acea-row row-between-wrapper">
					<view class="">会员优惠券</view>
					<navigator class="link" url="/pages/annex/vip_coupon/index">查看更多<text class="iconfont icon-ic_rightarrow"></text></navigator>
				</view>
				<scroll-view class="section-bd" scroll-x="true">
					<view v-for="item in memberCoupons" :key="item.id" class="item acea-row row-center-wrapper" :class="{gray: item.is_fail || item.status === '已使用'}">
						<view class="inner">
							<view class="type">{{ item.type_name }}</view>
							<view class="money">
								<text v-if="item.coupon_type==1">￥</text>
								<text class="num">{{item.coupon_type == 1?item.coupon_price:parseFloat(item.coupon_price)/10}}</text>
								<text v-if="item.coupon_type==2">折</text>
							</view>
						</view>
						<view class="text">
							<!-- <view class="name">{{item.coupon_title}}</view> -->
							<view v-if="item.use_min_price == '0.00'" class="mark">无门槛券</view>
							<view v-else class="mark">满{{item.use_min_price | moneyFormat}}可用</view>
						</view>
						<!-- <view class="btn">{{item.status}}</view> -->
					</view>
				</scroll-view>
			</view>
			<view class="px-20">
				<recommend class="recommend" title="SVIP商品推荐" :hostProduct="goodsList" saleShow></recommend>
			</view>
		</view>
		<view class="footer">
			<view class="acea-row">
				<view class="text acea-row row-middle">
					<view><text class="symbol">¥</text><text class="number">{{ totalPrice }}</text><text class="original">原价¥{{ parseFloat(svip.price) }}</text></view>
				</view>
				<view class="buy acea-row row-center-wrapper" @tap="pay">{{ type == 'free' ? '立即试用' : '立即支付' }}</view>
			</view>
		</view>
		<view class="footer-placeholder"></view>
	</view>
</template>

<script>
	import colors from '@/mixins/color.js';
	import {
		mapGetters
	} from "vuex";
	import {
		memberCard,
		memberCardDraw,
		memberCardCreate,
		groomList,
		memberOverdueTime
	} from '@/api/user.js';
	import {
		orderOfflinePayType
	} from '@/api/order.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		openPaySubscribe
	} from '@/utils/SubscribeMessage.js';
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import recommend from '@/components/recommend/index.vue';
	// #ifdef MP
	import NavBar from '@/components/NavBar';
	// #endif

	export default {
		components: {
			recommend,
			// #ifdef MP
			NavBar,
			// #endif
		},
		mixins: [colors],
		filters: {
			dateFormat: function(value) {
				return dayjs(value * 1000).format('YYYY-MM-DD');
			},
			moneyFormat: function(value) {
				return parseFloat(value);
			}
		},
		data() {
			return {
				memberType: [],
				userInfo: {},
				memberRights: [],
				memberExplain: [],
				memberCoupons: [],
				isGetFree: null,
				account: '',
				password: '',
				goodsList: [],
				pay_order_id: '',
				totalPrice: '0',
				page: 1,
				limit: 15,
				finished: false,
				memberEndTime: '',
				// #ifdef H5
				isWeixin: this.$wechat.isWeixin(),
				// #endif
				type: '',
				svip: {},
				isShowAuth: false,
				// #ifdef MP
				iconColor: '#FFFFFF',
				isScrolling: false,
				// #endif
			}
		},
		computed: mapGetters(['isLogin']),
		onLoad() {
			if (this.isLogin) {
				this.onLunch();
			}
		},
		onReachBottom() {
			this.groomList();
		},
		onPageScroll(e) {
			uni.$emit('scroll');
			// #ifdef MP
			if (e.scrollTop > 50) {
				this.isScrolling = true;
				this.iconColor = '#333333';
			} else if (e.scrollTop < 50) {
				this.isScrolling = false;
				this.iconColor = '#FFFFFF';
			}
			// #endif
		},
		methods: {
			onLunch() {
				this.memberCard();
				this.groomList();
			},
			pay() {
				this.createMemberCard('weixin');
			},
			scrollToCard() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#card').boundingClientRect(data => {
					uni.pageScrollTo({
						scrollTop: data.top
					});
				}).exec();
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${id}`
				});
			},
			// 付费会员数据
			memberCard() {
				uni.showLoading({
					title: '正在加载…'
				});
				memberCard().then(res => {
					uni.hideLoading();
					const {
						is_get_free,
						member_coupons,
						member_explain,
						member_rights,
						member_type
					} = res.data;
					this.isGetFree = is_get_free;
					this.userInfo = is_get_free.user_info;
					this.memberRights = member_rights;
					this.memberType = member_type;
					this.memberCoupons = member_coupons;
					this.memberExplain = member_explain;
					if (is_get_free.is_record) {
						this.memberType = this.memberType.filter(item => item.type !== 'free');
					};
					this.totalPrice = parseFloat(this.memberType[0].pre_price);
					this.type = this.memberType[0].type;
					this.totalPrice = parseFloat(this.memberType[0].pre_price);
					this.svip = this.memberType[0];
					memberOverdueTime({
						member_type: this.svip.type,
						vip_day: this.svip.vip_day
					}).then(res => {
						this.memberEndTime = res.data.data;
					});
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
			},
			groomList() {
				if (this.finished) {
					return;
				}
				uni.showLoading({
					title: '加载中'
				});
				groomList(5, {
					page: this.page,
					limit: this.limit
				}).then(res => {
					uni.hideLoading();
					this.goodsList = this.goodsList.concat(res.data.list);
					this.finished = res.data.list.length < this.limit;
					this.page += 1;
				}).catch(err => {
					uni.hideLoading();
				});
			},
			checkType(svip) {
				this.type = svip.type;
				this.svip = svip;
				this.totalPrice = parseFloat(svip.pre_price)
			},
			getMemberCard() {
				memberCard().then(res => {
					let data = res.data;
					this.memberType = data.member_type;
					this.memberRights = data.member_rights;
					this.isGetFree = data.is_get_free;
				}).catch(err => {

				});
			},
			memberSelect(index) {
				this.memberSelected = index;
			},
			// 卡密兑换
			drawMemberCard() {
				uni.navigateTo({
					url: '/pages/annex/vip_paid_active/index'
				})
			},
			// 立即购买
			createMemberCard(type) {
				uni.showLoading({
					title: '正在加载…'
				});
				let query = {
					pay_type: type || this.payMode[0].value,
					type: '1',
					// #ifdef H5
					from: this.isWeixin ? 'weixin' : 'weixinh5',
					// #endif
					// #ifdef MP
					from: 'routine',
					// #endif
					// #ifdef APP-PLUS
					from: 'weixin',
					// #endif
					member_type: this.svip.id,
					price: this.svip.pre_price,
					money: this.svip.price,
					// #ifdef H5
					quitUrl: location.port ? location.protocol + '//' + location.hostname + ':' + location.port +
						'/pages/annex/vip_paid/index' : location.protocol + '//' + location.hostname +
						'/pages/annex/vip_paid/index'
					// #endif
				};
				// #ifdef MP
				openPaySubscribe().then(() => {
					memberCardCreate(query).then(res => {
						// if (parseFloat(this.svip.pre_price) > 0) {
						// 	uni.hideLoading()
						// 	uni.reLaunch({
						// 		url: `/pages/goods/cashier/index?order_id=${res.data.order_id}&from_type=vip`
						// 	})
						// } else {
						// 	uni.hideLoading();
						// 	this.onLunch();
						// 	return this.$util.Tips({
						// 		title: '成功开启0元试用',
						// 	});
						// }
						uni.hideLoading()
						uni.redirectTo({
							url: `/pages/goods/cashier/index?order_id=${res.data.order_id}&from_type=vip`
						})
					}).catch(err => {
						uni.showToast({
							title: err
						});
					});
				});
				// #endif
				// #ifndef MP
				memberCardCreate(query).then(res => {
					uni.hideLoading()
					uni.redirectTo({
						url: `/pages/goods/cashier/index?order_id=${res.data.order_id}&from_type=vip`
					})
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
				// #endif
			},
			goRightDetail() {
				uni.navigateTo({
					url: `/pages/annex/vip_paid_rights/index`
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.vipPaid {
		padding-bottom: 172rpx;
	}

	.headerBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 820rpx;
		background: #121212;
		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjYAAAFOCAYAAACVL1cEAAAAAXNSR0IArs4c6QAAIABJREFUeF7svYmuJDmSLUZ6RNwt962yKju7Ot9M4QGSgAcJDxCe9PT/XyHN9Ex3V9delcuN3Z3CMdLo5nQ6Sfcbd8uMKETFzQhfSbrx0OzYMf38+fP/1Rgzb5pmgc/5fD5rmsZ/4jul1MwYM8MLn3grpSq88cKnMUYrpfDGv7X7t3LfxT7ld/ibXzjG8XVsgWtrAQxQ/+r8Izxl8seDX1/0bAe6BDyw+VelVGLDqprpqqrwfJqmaVTT1Ka4KWMnn3Bv7eWV3VHntBN2OcyISNxo5KcJzZLv2sEbSTfKAZqs/NqCk11PO0w76mzabkX3nj90fovUc4uLKDhC/lrdQdBNpsJcX6kFjr2YqUobsg3zqtJVRVtoCxeUpt3cvlorbzPwd6Mao7Q2qlYK/9ZaN0Zro7VqtMHfpqnwnTL1zOi6qXSjldrj71qpvVJmX+n5rq7NXtf7XaPMblPvtvrZs2f/DUAGAGY2mxG4mc1m9G+8q6qiTwY3+HTf4VJx5QRkJNARIAe3xEAl/JS/+UYVgCjf0Mctji0wsQW8Dc1a7uwGE6+gv9t1Aptiw0brlPgLhsu9lWoatW8aABxvqIrPwYcfvYM00FfaeXKfjR8Nmet0B5xwN6PvId61hznzdY3d7NVlNwibaXwP+uE6+lzlXRS/qpEnzGw+8mjxi5/Bm0HIRgO/aK31vJoToJnPKq0tuFEV/WkPYbQDNwADDthopU0j/lYGmymjK4AYAJumMUY3ujKNMroGuFFa7WdVVStjaqXNXqvZvqrUzjRq1zT1bm/q7W6rt6beb/XTp0//d3hr5vP5AgCHwY0xZuEADMAO2p2BDsCMBDrSa4NbIaDjVnbsxfEgJgAuMe/M0WNT/jwct7yhFvBGYZJ1KNvpuiaHUSu2BLDBcWhFNp/DVasBavb7PXlvRp3jHgObsp7sDspqaL085WDBeM90V8HTkb+Iq439QgB/hTExbtfqSu6L4tbKb9hrmAm7jGzcKy4M2PEyx3FokaO0rvTJXOvZrIKHpoJ9mM0Aduxv3lNTwQmj/SIIoAZAhoCBoe8NQAyBG63hrQGuaSpV1arSdWVMrQFqlK4BcKpG77Q2e6X1zlRqV9fNtlFms9k3m/262egnT578dwdmAGQAYujt/obHhrw47nsCNA7wAOz4sBTAD4elnJcG4Sj3FXltJGCJeW8KHsLjJscWuL0W6Bie0VaobIfrAjfFqwXrOB580cplPtOz2ZwOaQyDGzPN3V3WLP56upsX35Xdf+S5wkaYsrvdZ2DPKQd0F3V1QCPvLn4hVxvv/SGU7K2rtEWpSRgY21c4tTizO8rVcFN7vMxFTb9msWfkILnjYtxpQJYZvDKVnsFjM6uq+WymFwutZ3N4b6xfA8AGoN5ooqnAuyND10A67t8UeiJwU1VYJ2lTVQAwpgHIUcrUFuCYutKzXYV/a7UzZrZXld5q1WxNoza7ZrfZN2q9vNxu9IsXL/5Px6/xwKaqqpMA4HhwE4SmAHQAXjq8G3wHFxUDnOCT7tEaRXvDwWuktSod1cftji0wrQWuYuCjq/Wc9Si8zEFPQGYSTz5gBU8fVmqz2UzP5zPaer+rTb0H38Z6bvqvxA0XtkV8s/TF+l8LzxG99Mgpxh8u2VNXAlzTAU75XYxvx3S/JM9cMP6GHo/iO4o0WvG+2WfTHimzPsgehTa4NnAjDj5ifNtm02oGZ4wmz4yaz+Z6PtPVfAF7UFWL2UzPKA4FBKApbGV3q4BcAAosmIFDxv9tOTXGIiBEorCpDT8xqNG61lrtta72s0rtK6V2RuudUnpnlNnU+3pTG7Xe7uvVbrde6+fPn/8PgJimaU7gucGn89IA3PDfHS8OPNIAai48RZ4brbUnFDveDQAPgRv3b9sq7Zv/fQQ2ZcP8uNUttkDn+R9pfJ2p6179ASxpZrqMGsbspWc3sLcxn89UVc0qABxjjNntdsbUXTJx9oYL2+DWQM2AhSq8bH/73h8/EvPlhjtZ18mvsrvwW5Vt7q5m+MKuw2sz/tLaPUbtm21rQSbJbpvZYII3JXXEbru7g48YPxbUANEoeGRowp8vwKeZ6dm8qk7cQgf5BbMZyMTOX4P9CK04rw2HozgUBaIwgRmi4ghQQ0CnqSqiFddKqVorvZ/PEIICwFEEarTS21qrTVOrdb2v17t6t9ruNysAm/8LYMaBGP8pvgOoiQIc56npEItxPwA6QYaUuz2L1QQHx/fFkTR81SfhuP91tkDUABZaxe5m7l+F++buKTlpjliN+fOMuC4sXBbwP8PHXNemxluQibvXHrmYQsMav6T0hY73MkRaekr7RQ+TuNER7R0eeiywiU5uuQFWeH3tZuIsidsu7Prc1XnwXniZXTeIu4iDXYtjW0z3ogW3e6Dxx0eN2orChrOhJfLUKHCE8WYwM5vPq/kcIAdcmxl9gjnsojbw2nSyJ4lPQ2EpeHhtGMoQuNEGsW2EnypFHprGGNXoSsNDU2tdEaipZtUO3JpKNTujq40yADb1el83q3W9W+22zRJZUf9TghqtNcDNKb7D30opfBK4EQAHHhtkesnMKfLciEwpNBkBGgd2Yt4a33UJYHO4cZd/TI5bfAEt0HmWRyKW3mAcPTpHTi8Zw5M9/SjjOI4gAFezDUk5vg1yLkEmhpmKvqaBm+EmGP7luoBNtr2D+7ZXePgZfkqoIwqwy5f5hT3q7jUxbgvnUn++wdYb2xncF+ICRl/L4Dm7R5p0aXzHmYtK/pxprOjPmYu1vBoLVCi0VM0QfqJQNADNAllR4N3NLeeGttPk3SEEoMX474SfKBRlHL/GARwiDpvGEYYBcPaqgrem2oM0PJ+pHQCOMnqnK7012myVUeumadbbXbPaN/vlerslYPP/gFPTNM2p49Z4UOPADf3bARzi3jhQQ+EpEZIC0Tjk2uDfdHsiLBUDOC2o7D8+VxojX8A8fbzFiS3gB9aEp90bl7GWka61v1NykGeegLH7Zi95hCsARmyxOKEVHOBMXddNMwhupgGbeIsNf9uDEtkbTgwgcclTDFES2Ew5oLvUscCmf6qCRslNeIPNpqNYbuztZq8wu8GQB0ROtWXGI9/e7cWMvaw8grNbjH3Ou/uUrXDCa6e9yFWjwJ2x6d3snQGwmc31AiQbm+7t07zZW2PDS20bCx0bF4ISoShwali7hjw2CEGBOGzDUArcGg1AowBqNjM12xp4a4zZ1Mqs9rsG3prVrl57YHPquDUMavDZ+dt5ctiLw6AGXhsCN5wCLng3aCPi3QwRiRMifnK0jX0eykbqcasvtgWOgGag60cAGr8SsV4bBa8NSINN3ah9vaewFNS5hkwyreZGvsjo0n7jpo4JuwhLHP0zc+X25rJXGbRBvknEFu7g+X2GJvf0FUavPXGy4Z/6vySvOXLise2YHVZi8I1tvzjA6V9h9ppTF5lZaI0FOPHt+2NJXhJfv20qJHcjEwrEYUrtVkQSBrDBv92n5QzDpWODXgRvhSAfQlCt3SAuccuvgQifBQSNItKwBTYIPSE/AVlSWsFbo3YEbmZ6g4yoqtabxiiEodZ1Y5a73W612e0v2WMjgc2p1pqBjf+bQ1QC4DCoIZDDYSlBJObQFFSJyWMjhPvQXPItwWWsH8aOv+zYPm5wbIGpAKczGEePzPgOg4YwYSGzpx7YYHg/8huPfiEkBWCzsIRiXdd7Cknt9+D8eVPWO+5YHNUHKPmLTfdxET5J3MHQ/knm02CT5O9GgJFpXRXp3/5Zx4Iaaby7LXJ1UDN8bHemskbrjkO3zxTw0Qfk8aOMvqwYqghGXvaYkQ2yVxfsI//JoAb8XnhrCNjMrLow0rtn80otwBaGjg1+t4lQNvQUjE8fghJaNuDQMMfGARri2ECdDyndRBquNIjCe4VsKK12DG70rNpopbbKVGvy2jT1cr9vVtv9/nJf7/sem6ZpzqqqAtAhcKO1PnNhKP43vDb4G54aCk05UEOfLjTV
		background-position: right top;
		background-repeat: no-repeat;
		background-size: 566rpx 334rpx;
	}

	.card-section {
		position: relative;
		height: 528rpx;
		padding-top: 48rpx;
		border-bottom-right-radius: 48rpx;

		.vip-paid {
			position: absolute;
			top: 40rpx;
			right: 52rpx;
			width: 229rpx;
			height: 329rpx;
		}

		.expect {
			padding: 32rpx 0 58rpx 36rpx;

			.image {
				display: block;
				width: 414rpx;
				height: 76rpx;
			}

			.mark {
				display: inline-flex;
				align-items: center;
				height: 48rpx;
				padding: 0 24rpx;
				border-radius: 24rpx;
				margin-top: 12rpx;
				background: linear-gradient(-270deg, #E7B667 0%, #FFEAB5 100%);
				font-size: 28rpx;
				line-height: 48rpx;
				color: #7E4B06;

				.number {
					margin: 0 8rpx;
					font-family: SemiBold;
					font-size: 36rpx;
					color: var(--view-theme);
				}
			}
		}

		.wrapper {
			min-height: 450rpx;
			border-radius: 24rpx;
			margin: 0 20rpx;
			background: rgba(255, 255, 255, 0.05);
		}

		.avatar-wrap {
			min-height: 236rpx;
			padding: 62rpx 0 0 40rpx;

			.arrow {
				margin-top: 12rpx;
				font-size: 22rpx;
				line-height: 30rpx;
				color: rgba(254, 227, 174, 0.6);

				.iconfont {
					font-size: 24rpx;
				}
			}

			.text {
				flex: 1;
				margin-left: 15rpx;
				font-size: 22rpx;
				line-height: 30rpx;
				color: #89735B;

				.shopName {
					max-width: 164rpx;
				}

				.name {
					display: inline-block;
					vertical-align: middle;
					font-weight: 500;
					font-size: 32rpx;
					line-height: 44rpx;
					background: linear-gradient(-270deg, #FACB7A 0%, #FFF3D5 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}

		.avatar {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.tips {
			margin-top: 6rpx;
			font-size: 22rpx;
			line-height: 30rpx;
			color: rgba(254, 227, 174, 0.8);
		}

		.info {
			margin-top: 74rpx;
			font-size: 24rpx;
			color: #AE5A2A;
		}

		.num {
			font-size: 36rpx;
		}

		.btn {
			width: 146rpx;
			height: 44rpx;
			border-radius: 22rpx;
			background-color: #FFFFFF;
			line-height: 44rpx;
			text-align: center;
		}
	}

	.right-section {
		.section-hd {
			padding: 32rpx 32rpx 36rpx;
			font-weight: 500;
			font-size: 30rpx;
			line-height: 44rpx;
			color: rgba(250, 204, 125, 0.8);

			.arrow {
				font-weight: 400;
				font-size: 24rpx;
				line-height: 34rpx;
				color: rgba(255, 255, 255, 0.6);
			}

			.iconfont {
				font-size: 24rpx;
			}
		}

		.section-bd {
			padding: 0 0 32rpx;

			.item {
				flex: 1;
				min-width: 0;
			}

			.image-wrap {
				position: relative;
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin: 0 auto;

				.image-wrap-inner {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.image-inner {
				height: 100%;
				border-radius: 50%;
			}

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

			.text {
				margin-top: 28rpx;
				text-align: center;
				font-size: 20rpx;
				line-height: 28rpx;
				color: rgba(255, 255, 255, 0.4);
			}

			.name {
				margin-bottom: 8rpx;
				font-size: 26rpx;
				line-height: 37rpx;
				color: rgba(255, 255, 255, 0.7);
			}
		}
	}

	.other-section {
		position: relative;
		border-top-left-radius: 48rpx;
		border-top-right-radius: 48rpx;
		background-color: #F5F5F5;
	}

	.type-section {
		padding: 20rpx;

		.type-section-inner {
			border-radius: 24rpx;
			background-color: #FFFFFF;
		}

		.title {
			padding: 32rpx 32rpx 36rpx;
			border-radius: 24rpx 24rpx 0 0;
			background: linear-gradient(180deg, #FFEFCE 0%, #FFFFFF 100%);
			font-weight: bold;
			font-size: 32rpx;
			line-height: 44rpx;
			color: #333333;

			.bold {
				display: inline-block;
				margin-right: 14rpx;
				font-weight: bold;
				font-size: 32rpx;
				line-height: 45rpx;
				color: #333333;

				+view {
					display: inline-block;
				}
			}

			.time {
				margin-left: 14rpx;
				font-size: 24rpx;
				color: #AE5A2A;
			}

			.cash {
				font-weight: 400;
				font-size: 26rpx;
				line-height: 36rpx;
				color: rgba(217, 126, 29, 0.8);
			}
		}

		.scroll {
			white-space: nowrap;
		}

		.item {
			position: relative;
			display: inline-block;
			width: 220rpx;
			padding: 36rpx 0 32rpx;
			border: 1rpx solid #DDDDDD;
			border-radius: 24rpx;
			margin: 16rpx 24rpx 32rpx 0;

			&:first-child {
				margin: 16rpx 24rpx 32rpx 32rpx;
			}

			&:last-child {
				margin: 16rpx 32rpx 32rpx 0;
			}

			&.on {
				border: 2rpx solid #D97E1D;
				background: linear-gradient(180deg, #FFFFFF 0%, #FEF5E6 100%);
			}

			.badge {
				position: absolute;
				top: 0;
				left: 0;
				height: 44rpx;
				padding: 0 12rpx;
				border-radius: 22rpx 22rpx 22rpx 0;
				margin-top: -18rpx;
				background: linear-gradient(90deg, #FF7931 0%, #E93323 100%);
				font-size: 24rpx;
				line-height: 44rpx;
				color: #FFFFFF;
			}

			.name {
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #7E4B06;
			}

			.button {
				width: 142rpx;
				height: 52rpx;
				border-radius: 22rpx;
				margin: 18rpx auto 0;
				background-color: #FEE8BC;
				text-align: center;
				font-size: 22rpx;
				line-height: 52rpx;
				color: #333333;
			}
		}

		.new {
			margin-top: 16rpx;
			text-align: center;
			font-family: SemiBold;
			font-size: 36rpx;
			line-height: 62rpx;
			color: #333333;

			.num {
				// margin-left: 4rpx;
				font-size: 52rpx;
			}
		}

		.old {
			margin-top: 4rpx;
			text-decoration: line-through;
			text-align: center;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #999999;
		}

		.info {
			margin-top: 4rpx;
			text-align: center;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #999999;
		}

		.agree {
			font-size: 22rpx;
			text-align: center;
			color: #797979;

			.link {
				display: inline-block;
			}

			.mark {
				color: #AE5A2A;
			}
		}
	}

	.footer-placeholder {
		height: 152rpx;
		height: calc(152rpx + constant(safe-area-inset-bottom));
		height: calc(152rpx + env(safe-area-inset-bottom));
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 22rpx 20rpx;
		padding-bottom: calc(22rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom));
		background-color: #FFFFFF;

		.text {
			flex: 1;
			height: 108rpx;
			padding-left: 48rpx;
			border-radius: 54rpx 0 0 54rpx;
			background-color: #222222;
			font-size: 28rpx;
			color: #FACC7D;
		}

		.symbol {
			font-weight: 600;
			font-size: 40rpx;
		}

		.number {
			font-family: SemiBold;
			font-size: 56rpx;
		}

		.original {
			margin-left: 16rpx;
			text-decoration: line-through;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.4);
		}

		.buy {
			position: relative;
			width: 266rpx;
			height: 108rpx;
			border-radius: 0 54rpx 54rpx 0;
			background: linear-gradient(to right, #FFDD9C, #EEA82F);
			font-weight: 500;
			font-size: 36rpx;
			color: #7E4B06;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				border-width: 54rpx 20rpx;
				border-style: solid;
				border-color: #222222 transparent transparent #222222;
			}
		}
	}

	.coupon-section {
		border-radius: 24rpx;
		margin: 0 20rpx;
		background-color: #FFFFFF;

		.section-hd {
			padding: 32rpx 32rpx 24rpx;
			font-weight: bold;
			font-size: 32rpx;
			line-height: 44rpx;
			color: #333333;

			.link {
				font-weight: 400;
				font-size: 26rpx;
				line-height: 36rpx;
				color: #666666;

				.iconfont {
					font-size: 24rpx;
				}
			}
		}

		.section-bd {
			padding-bottom: 24rpx;
			white-space: nowrap;

			.item {
				position: relative;
				display: inline-block;
				width: 151rpx;
				padding: 0 6rpx;
				border-radius: 24rpx;
				margin: 20rpx 14rpx 0 0;
				background-color: #E0A558;

				&:first-child {
					margin-left: 32rpx;
				}

				.inner {
					padding-bottom: 76rpx;
					border: 2rpx solid #FFEDCA;
					border-radius: 12rpx;
					margin-top: -20rpx;
					background-color: #FFFFFF;

					.type {
						width: 96rpx;
						height: 38rpx;
						border-radius: 0 0 12rpx 12rpx;
						background-color: rgba(224, 165, 88, 0.2);
						margin: 0 auto;
						text-align: center;
						font-size: 20rpx;
						line-height: 38rpx;
						color: #333333;
					}
				}

				&.gray {
					background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAACUCAMAAACJHEMxAAAAeFBMVEUAAAC/v7/f39/V1dXf39/c3Nzh4eHc3Nze3t7a2tre3t7f39/e3t7d3d3e3t7d3d3f39/e3t7e3t7e3t7d3d3e3t7e3t7d3d3d3d3e3t7d3d3e3t7f39/h4eHi4uLn5+fo6Ojp6enq6urs7Ozu7u7v7+/w8PDx8fEswD7yAAAAG3RSTlMABAgMECQrLC8we4+Tl6uvr7/Dz9PT5+vz9/vtB+63AAADZElEQVR42u3Zy3baMBSFYbmmsaFuIRcKxdixi5He/w0LGJtLljrA1mby7xFZyehbyjkS25hD0uzjT06CZP2RpabNt59wBM0mi47O0RsUofN6lM5wCJ/MmOkGBsH0SDjQqiO9BEGRd5NEcTJbIREuv2dJHCXtDW+yuPlVUTfWkYdim6q4wfw1Mde5lq5QHmZdXWEuzG0ml+mxc7Yut/zLP5Zt+de63WVuTO6gzaz7Ve32BV5DUuxdf6Zn985m2v2VszgPlba9YfIFOu4PdIXU0NSuPn+KvdCN40APTukaL3Q3OqzDaXic9Y6Obhk6oMeAdr5l2F/vgB4VenV/vZvnQIeAzue353meAx0GOp+fz3Qaxen1l0pAjwydr2ZpHKXmf39CxoBuAzTQQBOggQZ6etcZAj029KkznH7pDIEeGdrXGQI9LvSCL5Uk0P7OEOhRof2dIdCjQvs7Q6BHhY6BfhY0o0M0OliGmmXI9S4MNJ2h6sFCZ6h6gtMZiqDpDFXQbYAGGmgCNNBA0xmGhqYz1EDTGWqg6Qw10HSGImg6QxE0naEIms7wadCMDtHoYBlqliHXuzDQdIaqBwudoeoJTmcogqYzVEG3ARpooAnQQANNZxgams5QA01nqIGmM9RA0xmKoOkMRdB0hiJoOsOnQTM6RKODZahZhlzvwkDTGaoeLHSGqic4naEIms5QBd0GaKCBJkADDTSdYWhoOkMNNJ2hBprOUANNZyiCpjMUQdMZiqDpDJ8GzegQjQ6WoWYZcr0LA01nqHqw0BmqnuB0hiJoOkMVdBuggQaaAA000HSGoaHpDDXQdIYaaDpDDTSdoQiazlAETWcogqYzfBo0o0M0OliGmmXI9S4MNJ2h6sFCZ6h6gtMZiqDpDFXQbYAGGmgCNNBA0xmGhqYz1EDTGWqg6Qw10HSGImh/Z2iBHgPanj/4O8PGlTgNTema8yd/Z1i7CqihqXpEf2dYOFsgNSyFdYV3dHTL8HCk90gPc967Ovctw8nlcbhz9rPc4vVYtuWndbv+R39neJww1pEBsddbztsZns5+3WD9qHJT3U7erjN8uesMydg5dYYvZomEIu8mA0GRzEw3KITP5nCf5khLDrQx0RsOofMaHe8dEWc68NzIou57jmy5xiNM1ssf34/G/wD2nqj2ECBXfgAAAABJRU5ErkJggg==");

					.btn {
						color: #9F9F9F;
					}

					.money {
						color: #fff;

						.num {
							color: #fff;
						}
					}

					.name {
						color: #fff;
					}

					.text {
						color: #9F9F9F;
					}

					.mark {
						color: #A8A8A8;
					}
				}

				.btn {
					width: 52rpx;
					padding-right: 14rpx;
					padding-left: 14rpx;
					white-space: pre-wrap;
					font-size: 24rpx;
					color: #5D3324;
				}

				.text {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 76rpx;
					padding-top: 30rpx;
					background-image: url("data:image/png;base64,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
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}

				.name {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: bold;
					font-size: 28rpx;
					line-height: 40rpx;
					color: #5D3324;
				}

				.mark {
					text-align: center;
					font-weight: 500;
					font-size: 22rpx;
					line-height: 30rpx;
					color: rgba(250, 204, 125, 0.8);
				}

				.money {
					margin-top: 16rpx;
					text-align: center;
					font-weight: 500;
					font-size: 28rpx;
					line-height: 44rpx;
					color: #E0A558;
				}

				.num {
					font-family: SemiBold;
					font-size: 44rpx;
				}
			}
		}
	}

	.recommend /deep/ .fw-500 {
		font-weight: bold;
	}
</style>