<template>
	<view class="container">

		<van-tabs :active="status" color="#d77958" @change="onTabChange">
			<van-tab title="未使用" name="0"></van-tab>
			<van-tab title="已使用" name="1"></van-tab>
			<van-tab title="已过期" name="2"></van-tab>
		</van-tabs>

		<view class="b">
			<view class="coupon-form" v-if="status == 0">
				<view class="input-box">
					<input class="coupon-sn" placeholder="请输入优惠码" :value="code" @input="bindExchange" />
					<van-icon name="close" class="clear-icon" v-if="code.length > 0"
						@tap.native.stop.prevent="clearExchange" />
				</view>
				<view class="add-btn" @tap="goExchange">兑换</view>
			</view>
			<view v-if="status == 0" class="coupon-switch-block">
				<view :data-type="item.type"
					:class="'type-switch ' + (item.type === currentType ? 'active-switch' : '')" @tap="switchType"
					v-for="(item, index) in typeList" :key="index">
					{{ item.name }}
				</view>
			</view>

			<scroll-view :scroll-y="true" :scroll-top="scrollTop" class="my-coupon-list">
				<!-- 未使用 -->
				<view class="my-coupon-item-valid" v-if="status == 0" v-for="(item, index) in couponList" :key="index">
					<view v-if="item.type == 4" class="marker">会员专享</view>

					<view class="coupon-top">
						<view class="coupon-top-left">
							<view class="coupon-value">
								<text v-if="item.voucherType == 1"
									:class="item.type == 4 ? 'coupon-flag-member' : 'coupon-flag'">¥</text>
								<text :class="item.type == 4 ? 'coupon-value-member' : 'coupon-value-num'"
									v-if="item.voucherType == 1">{{ item.discount }}</text>
								<text :class="item.type == 4 ? 'coupon-value-member' : 'coupon-value-num'"
									v-if="item.voucherType == 2">{{ item.discount / 10 }}</text>
								<text v-if="item.voucherType == 2"
									:class="item.type == 4 ? 'coupon-unit-member' : 'coupon-unit'">折</text>
									<text :class="item.type==4?'coupon-value-member':'coupon-value-num2'" v-if="item.voucherType==3">兑换券</text>
							</view>
							<view class="coupon-type">
								<text v-if="item.voucherType == 1" style="color: #d77958">满{{ item.min }}可用</text>
								<text v-if="item.voucherType == 2" style="color: #d77958">满{{ item.min }}可用</text>
								<text v-if="item.voucherType == 3" style="color:#d77958">无门槛立即兑换</text>
							</view>
						</view>
						<view class="coupon-top-content">
							<view class="coupon-valid-name">{{ item.name }}</view>
							<view>有效期至：{{ item.endTime }}</view>
						</view>
					</view>

					<view class="coupon-bottom">
						<text v-if="item.desc && item.name != item.desc">{{ item.desc }}</text>
						<text v-else-if=""></text>
						<view :class="item.type == 4 ? 'coupon-top-member' : 'coupon-top-right'"
							:data-id="item.couponId" :data-goodsvalue="item.goodsValue" @tap="goService">
							立即使用
						</view>
					</view>
				</view>
				<!-- 已使用 已过期 -->
				<view class="my-coupon-item" v-if="status != 0" v-for="(item, index) in couponList" :key="index">
					<view class="coupon-left">
						<view v-if="item.voucherType == 1">
							¥
							<text class="coupon-amount">{{ item.discount }}</text>
						</view>
						<view v-if="item.voucherType == 2">
							<text class="coupon-amount">{{ item.discount / 10 }}</text>
							折
						</view>
						<view class="coupon-type">
							<!-- {{item.name}} -->
							<span v-if="item.voucherType == 2">折扣券</span>
							<span v-if="item.voucherType == 1">抵用券</span>
						</view>
						<view v-if="status == 0" :class="'coupon-btn ' + (item.status === 0 ? 'active-btn' : '')"
							:data-id="item.couponId" :data-goodsvalue="item.goodsValue" @tap="goService">
							立即使用
						</view>
					</view>

					<view class="coupon-content">
						<view class="coupon-name">{{ item.name }}</view>
						<view class="coupon-date">有效期开始:{{ item.startTime }}</view>
						<view class="coupon-date">有效期结束:{{ item.endTime }}</view>
					</view>

					<view class="coupon-right">
						<image class="coupon-status" mode="aspectFit" v-if="item.status == 1"
							src="/static/images/coupon-used.png"></image>
						<image class="coupon-status" mode="aspectFit" v-if="item.status == 2"
							src="/static/images/coupon-invalid.png"></image>
					</view>
				</view>

				<view class="page" v-if="showPage">
					<view :class="'prev ' + (page <= 1 ? 'disabled' : '')" @tap="prevPage">上一页</view>
					<view :class="'next ' + (count / size < page ? 'disabled' : '')" @tap="nextPage">下一页</view>
				</view>
			</scroll-view>
			<view class="no-list" v-if="couponList == 0">没有更多了</view>
			<view class="pup-up-coupon" @tap="closePupCoupon" v-if="showTc">
				<view class="tc" @tap="drawDown">
					<view class="pkName">{{couponPackage.pkName.length>8?couponPackage.pkName:couponPackage.pkName}}
					</view>
					<view class="num">{{couponPackage.pkNumber}}</view>
					<view class="box">
						<view :class="coupon.voucherType==3?'couponName':'money'">
							{{coupon.voucherType==3?'商品券':coupon.discount}}
							<span v-if="coupon.voucherType!=3">{{coupon.voucherType==1?'元':'折'}}</span>
						</view>
						<view class="couponNameDesc">{{coupon.voucherType==3?'无门槛立即兑换':'满'+coupon.min+'元可用'}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	import {
		login
	} from '../../../utils/user.js';
	var util = require('../../../utils/util.js');
	var api = require('../../../config/api.js');
	var app = getApp();
	export default {
		data() {
			return {
				couponList: [],
				code: '',
				codeChannelType: '',

				//2是抖音 其他小商城
				status: 0,

				page: 1,
				limit: 20,
				count: 0,
				scrollTop: 0,
				showPage: false,
				currentType: 0,

				typeList: [{
						name: '全部',
						type: 0
					},
					// {
					//   name: "会员专享",
					//   type: 3
					// },
					{
						name: '立减券',
						type: 1
					},
					{
						name: '折扣券',
						type: 2
					}
				],

				totalList: [],

				//页面参数
				options: '',

				size: 0,
				showTc: false,
				couponPackage: {},
				coupon: {}
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			if (this.options == '') {
				this.setData({
					options: options
				});
			}
			console.log(11)
			console.info(options.scene);
			// let pkSn=""+options[0].split(",")[0]
			// console.log(pkSn)
			// let scene = options.scene;

		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			if (app.globalData.hasLogin == false) {
				uni.navigateTo({
					url: '/pages/auth/login/login'
				});
				return;
			}
			setTimeout(() => {
				this.exchange(this.options);
				this.setData({
					options: ''
				});
			}, 500);
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载
			this.getCouponList();
			uni.hideNavigationBarLoading(); //完成停止加载
			uni.stopPullDownRefresh(); //停止下拉刷新
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			exchange(options) {
				let that = this;
				if (options.scene) {
					let scene = decodeURIComponent(options.scene);
					var couponId;
					var fraId;
					if (scene && scene.indexOf('fraId') >= 0) {
						//fraId,加盟商id:优惠券id    加盟商发的优惠券
						var paras = scene.split(',')[1];
						fraId = paras.split(':')[0];
						couponId = paras.split(':')[1];
					} else if (scene && scene.indexOf("pkSn") >= 0) {
						//卡卷包领取 
						console.log(3000)
						console.log(scene)
						var paras = scene.split(",")[1];
						let pkSn = paras.split(";")[0];

						//查询可领取卡包券
						util.request(api.getCouponPackageOne, {
							pkSn: pkSn
						}, "GET").then(res => {
							if (res.errno == 0) {
								this.setData({
									showTc: true,
									couponPackage: res.data.couponPackage,
									coupon: res.data.coupon
								})
							} else util.showErrorToast(res.errmsg);
							this.getCouponList();
						})
						return;
					} else {
						// id,12;type,0
						var paras = scene.split(';');
						console.info(paras);
						var couponId = paras[0].replace('id,', '');
						console.info(couponId);
					}
					//开始领取优惠券
					util.request(
						api.CouponReceive, {
							couponId: couponId,
							fraId: fraId
						},
						'POST'
					).then((res) => {
						if (res.errno == 0) {
							uni.showToast({
								title: '领取成功',
								icon: 'none',
								duration: 3000
							});
						} else {
							util.showErrorToast(res.errmsg);
						}
						this.getCouponList();
					});
				} else if (options.q) {
					//扫码url二维码过来的
					let url = decodeURIComponent(options.q);
					console.info(url);
					if (url.indexOf('?coupon=') >= 0) {
						let coupon = url.substring(url.indexOf('?coupon=') + 8);
						console.info('兑换码：' + coupon);
						that.setData({
							code: coupon
						});
						//判断是否登录
						if (app.globalData.hasLogin) {
							that.goExchange();
						} else {
							uni.navigateTo({
								url: '/pages/auth/login/login'
							});
						}
					}
				} else if (options.type) {
					//2抖音 1其他
					that.setData({
						code: options.coupon,
						codeChannelType: options.type
					});
					if (app.globalData.hasLogin) {
						if (options.type == 2) {
							that.goDouyinExchange();
						} else {
							that.goExchange();
						}
					} else {
						uni.navigateTo({
							url: '/pages/auth/login/login'
						});
					}
					//util.showErrorToast(options.coupon);
				} else {
					that.getCouponList();
				}
			},

			goExchange: function() {
				if (!this.code || this.code.length === 0) {
					util.showErrorToast('请输入兑换码');
					return;
				}
				let that = this;
				uni.showModal({
					title: '提示',
					confirmColor: '#d77958',
					content: '确定要兑换吗？兑换后将无法撤回',
					success: (res) => {
						if (res.confirm) {
							util.request(
								api.CouponExchange, {
									code: this.code
								},
								'POST'
							).then(function(res) {
								if (res.errno === 0) {
									that.getCouponList();
									that.clearExchange();
									uni.showToast({
										title: '领取成功',
										duration: 2000
									});
								} else {
									util.showErrorToast(res.errmsg);
								}
							});
						}
					}
				});
			},

			goService(e) {
				let goodsvalue = e.currentTarget.dataset.goodsvalue;
				let id = e.currentTarget.dataset.id;
				console.log("api1", goodsvalue);
				if (goodsvalue.length >= 1) {
					console.log("应该跳转中间页")
					uni.navigateTo({
						url: '/pages/ucenter/couponGoods/couponGoods?id=' + id
					});
				} else {
					uni.navigateTo({
						url: '/pages/index/index'
					});
				}
			},

			getCouponList: function() {
				let that = this;
				that.setData({
					scrollTop: 0,
					showPage: false,
					couponList: []
				});
				util.request(api.CouponMyList, {
					status: that.status,
					page: that.page,
					limit: that.limit
				}).then(function(res) {
					if (res.errno === 0) {
						that.setData({
							scrollTop: 0,
							couponList: res.data.list,
							showPage: res.data.total > that.limit,
							count: res.data.total
						});
						if (that.status == 0) {
							console.log("优惠券列表", res.data.list);
							that.setData({
								totalList: res.data.list
							});
						}
					}
				});
			},

			bindExchange: function(e) {
				this.setData({
					code: e.detail.value
				});
			},

			clearExchange: function() {
				this.setData({
					code: ''
				});
			},

			goDouyinExchange: function() {
				if (this.code.length === 0) {
					util.showErrorToast('请输入兑换码');
					return;
				}
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要兑换抖音券吗？兑换后将无法撤回',
					confirmColor: '#d77958',
					success: (res) => {
						if (res.confirm) {
							util.request(
								api.CouponDouyinExchange, {
									code: this.code
								},
								'POST'
							).then(function(res) {
								if (res.errno === 0) {
									that.getCouponList();
									that.clearExchange();
									uni.showToast({
										title: '领取成功',
										duration: 2000
									});
								} else {
									util.showErrorToast(res.errmsg);
								}
							});
						}
					}
				});
			},

			nextPage: function(event) {
				var that = this;
				if (this.page > that.count / that.limit) {
					return true;
				}
				that.setData({
					page: that.page + 1,
					currentType: 0
				});
				this.getCouponList();
			},

			prevPage: function(event) {
				if (this.page <= 1) {
					return false;
				}
				var that = this;
				that.setData({
					page: that.page - 1,
					currentType: 0
				});
				this.getCouponList();
			},

			switchTab: function(e) {
				this.setData({
					couponList: [],
					status: e.currentTarget.dataset.index,
					page: 1,
					limit: 20,
					count: 0,
					scrollTop: 0,
					showPage: false
				});
				this.getCouponList();
			},

			switchType(e) {
				let type = e.currentTarget.dataset.type;
				let currentList = [];
				if (type == 0) {
					currentList = this.totalList;
				} else if (type == 3) {
					//会员券
					currentList = this.totalList.filter((item) => {
						return item.type == 4;
					});
				} else {
					currentList = this.totalList.filter((item) => {
						return item.voucherType == type;
					});
				}
				this.setData({
					currentType: type,
					couponList: currentList
				});
			},

			onTabChange(e) {
				let status = e.detail.name;
				this.setData({
					couponList: [],
					status: status,
					page: 1,
					limit: 20,
					count: 0,
					scrollTop: 0,
					showPage: false
				});
				this.getCouponList();
			},
			closePupCoupon() {
				this.setData({
					showTc: false
				})
			},
			drawDown() {
				console.log('卡券包领取')
				util.request(api.couponPackageReceive, {
					pkSn: this.couponPackage.pkSn
				}, "POST").then(res => {
					if (res.errno == 0) {
						console.log("领取成功");
						uni.showToast({
							title: '领取成功，已发放至您的账户',
							icon: 'none'
						})
						this.setData({
							showTc: false,
						})
						this.getCouponList();
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}

				})

			}
		}
	};
</script>
<style>
	page {
		background: #f4f4f4;
		min-height: 100%;
	}

	.container {
		background: #f4f4f4;
		min-height: 100%;
		/* padding-top: 30rpx; */
	}

	.container .h {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		width: 100%;
		display: flex;
		background: #fff;
		height: 84rpx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	}

	.container .h .item {
		display: inline-block;
		height: 82rpx;
		width: 50%;
		padding: 0 15rpx;
		text-align: center;
	}

	.container .h .item .txt {
		display: inline-block;
		height: 82rpx;
		padding: 0 20rpx;
		line-height: 82rpx;
		color: #333;
		font-size: 30rpx;
		width: 170rpx;
	}

	.container .h .item.active .txt {
		color: #ab2b2b;
		border-bottom: 4rpx solid #ab2b2b;
	}

	.container .b {
		padding-top: 12rpx;
		height: auto;
		border-top: 1rpx solid #ddd;
	}

	.container .b .coupon-form {
		height: 110rpx;
		width: 100%;
		background: #fff;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		display: flex;
	}

	.container .b .input-box {
		flex: 1;
		height: 70rpx;
		color: #333;
		font-size: 24rpx;
		background: #fff;
		position: relative;
		border: 1px solid rgba(0, 0, 0, 0.15);
		border-radius: 35rpx;
		margin-right: 30rpx;
	}

	.container .b .input-box .coupon-sn {
		position: absolute;
		top: 10rpx;
		left: 30rpx;
		height: 50rpx;
		width: 100%;
		color: #000;
		line-height: 50rpx;
		font-size: 24rpx;
	}

	.container .b .clear-icon {
		position: absolute;
		top: 20rpx;
		right: 18rpx;
		z-index: 2;
		display: block;
		background: #fff;
	}

	.container .b .add-btn {
		height: 70rpx;
		border: none;
		width: 168rpx;
		background: #D8D8D8;
		border-radius: 35rpx;
		line-height: 70rpx;
		color: #fff;
		font-size: 28rpx;
		text-align: center;
	}

	.container .b .add-btn.disabled {
		background: #D8D8D8;
	}

	.container .b .help {
		height: 72rpx;
		line-height: 72rpx;
		text-align: right;
		padding-right: 30rpx;
		background-size: 28rpx;
		color: #999;
		font-size: 24rpx;
	}

	.container .b .coupon-list {
		width: 750rpx;
		height: 100%;
		overflow: hidden;
	}

	.container .b .item {
		position: relative;
		height: 290rpx;
		background: #ccc7c7;
		margin-bottom: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-top: 52rpx;
	}

	.container .b .item.active {
		background: linear-gradient(to right, #cfa568, #e3bf79);
	}

	.container .b .tag {
		height: 32rpx;
		background: #a48143;
		padding-left: 16rpx;
		padding-right: 16rpx;
		position: absolute;
		left: 20rpx;
		color: #fff;
		top: 20rpx;
		font-size: 20rpx;
		text-align: center;
		line-height: 32rpx;
	}

	.container .b .content {
		margin-top: 24rpx;
		margin-left: 40rpx;
		display: flex;
		margin-right: 40rpx;
		flex-direction: row;
	}

	.container .b .content .left {
		flex: 1;
	}

	.container .b .discount {
		font-size: 50rpx;
		color: #b4282d;
	}

	.container .b .min {
		color: #fff;
	}

	.container .b .content .right {
		width: 400rpx;
	}

	.container .b .name {
		font-size: 44rpx;
		color: #fff;
		margin-bottom: 14rpx;
	}

	.container .b .time {
		font-size: 24rpx;
		color: #fff;
		line-height: 30rpx;
	}

	.container .b .condition {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		height: 78rpx;
		background: rgba(0, 0, 0, 0.08);
		padding: 24rpx 40rpx;
		display: flex;
		flex-direction: row;
	}

	.container .b .condition .txt {
		display: block;
		height: 30rpx;
		flex: 1;
		overflow: hidden;
		font-size: 24rpx;
		line-height: 30rpx;
		color: #fff;
	}

	.container .b .condition .icon {
		margin-left: 30rpx;
		width: 24rpx;
		height: 24rpx;
	}

	.container .b .page {
		width: 750rpx;
		height: 108rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.container .b .page view {
		height: 108rpx;
		width: 50%;
		float: left;
		font-size: 29rpx;
		color: #333;
		text-align: center;
		line-height: 108rpx;
	}

	.container .b .page .prev {
		border-right: 1px solid #d9d9d9;
	}

	.container .b .page .disabled {
		color: #ccc;
	}

	.b .no-list {
		margin: 16rpx 0 0;
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}

	.my-coupon-list {
		padding: 20rpx 24rpx;
		width: auto;
		height: 100%;
		overflow: hidden;
	}

	.my-coupon-item {
		border-radius: 18rpx;
		background: #fff;
		height: 190rpx;
		margin: 0 0 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx 0 0;
		width: 706rpx;
	}

	.coupon-left {
		width: 230rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		height: 190rpx;
		padding: 18rpx 0 30rpx;
		color: #d77958;
	}

	.coupon-left .coupon-amount {
		font-size: 48rpx;
		font-weight: bold;
	}

	.coupon-left .coupon-type {
		font-size: 24rpx;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 220rpx;
		text-align: center;
	}

	.coupon-left .coupon-btn {
		background: #999999;
		color: #fff;
		width: 120rpx;
		height: 32rpx;
		line-height: 32rpx;
		font-size: 22rpx;
		margin-top: 10rpx;
		border-radius: 30rpx;
		text-align: center;
	}

	.coupon-left .coupon-btn.active-btn {
		background: #d77958;
	}

	.coupon-content {
		margin: 0 20rpx 0 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 40rpx 0;
		flex: 1;
	}

	.coupon-content view.coupon-name {
		color: #999;
		font-size: 30rpx;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 330rpx;
	}

	.coupon-content view.coupon-date {
		color: #999;
		font-size: 20rpx;
	}

	.coupon-right {
		width: 84rpx;
		height: 114rpx;
		padding-top: 30rpx;
	}

	.coupon-status {
		width: 84rpx;
		height: 84rpx;
	}

	.my-coupon-item-valid {
		background: #fff;
		box-shadow: 0rpx 6rpx 14rpx 0px rgba(142, 142, 142, 0.03);
		border-radius: 20rpx;
		width: 696rpx;
		margin-bottom: 24rpx;
		padding: 0 30rpx;
	}

	.my-coupon-item-valid .marker {
		position: absolute;
		right: 10rpx;
		float: right;
		padding: 5rpx;
		width: 136rpx;
		background: #f5da9e;
		color: #c8965a;
		text-align: center;
		border-bottom-left-radius: 20rpx;
		border-top-right-radius: 15rpx;
	}

	.coupon-top {
		display: flex;
		height: 152rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 8rpx 0 0;
	}

	.coupon-top-left {
		width: 150rpx;
		color: #d77958;
		font-size: 22rpx;
		padding: 8rpx 0 0 4rpx;
	}

	.coupon-top-left .coupon-value {
		display: flex;
		align-items: flex-end;
		height: 54rpx;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		font-weight: bold;
	}

	.coupon-top-left .coupon-value .coupon-value-num {
		font-size: 44rpx;
		line-height: 44rpx;
		font-weight: normal;
	}

	.coupon-top-left .coupon-value .coupon-unit {
		color: #d77958;
		margin-left: 4rpx;
	}

	.coupon-top-left .coupon-value .coupon-unit-member {
		color: #e9b06b;
		margin-left: 4rpx;
	}

	.coupon-top-left .coupon-value .coupon-flag {
		color: #d77958;
		margin-right: 4rpx;
	}

	.coupon-top-left .coupon-value .coupon-flag-member {
		color: #e9b06b;
		margin-right: 4rpx;
	}

	.coupon-top-left .coupon-value .coupon-value-member {
		font-size: 70rpx;
		line-height: 54rpx;
		color: #e9b06b;
	}
.coupon-top-left .coupon-value .coupon-value-num2{
  font-size: 40rpx;
	line-height: 54rpx;
	margin-left: 15rpx
}
	.coupon-top-content {
		flex: 1;
		margin: 30rpx 30rpx 0 60rpx;
		color: #b4b4b4;
		font-size: 22rpx;
		font-weight: normal;
	}

	.coupon-valid-name {
		font-weight: bold;
		color: #555555;
		font-size: 32rpx;
		margin-bottom: 25rpx;
		width: 380rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.coupon-top-right {
		width: 142rpx;
		height: 41rpx;
		background: #d77958;
		border-radius: 42rpx;
		text-align: center;
		color: #ffffff;
		line-height: 41rpx;
		font-size: 20rpx;
		letter-spacing: 3rpx;
	}

	.coupon-top-member {
		width: 142rpx;
		height: 56rpx;
		background: #e9b06b;
		border-radius: 42rpx;
		text-align: center;
		color: #ffffff;
		line-height: 56rpx;
		font-size: 20rpx;
		letter-spacing: 3rpx;
	}

	.coupon-bottom {
		padding: 2rpx 4rpx 23rpx;
		color: #757575;
		font-size: 20rpx;
		line-height: 36rpx;
		letter-spacing: 2rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.coupon-switch-block {
		height: 104rpx;
		padding: 0 27rpx;
		display: flex;
		align-items: center;
		margin-bottom: -20rpx;
		justify-content: center;
	}

	.van-tab--active.van-tab>view.van-ellipsis {
		color: #999 !important;
		letter-spacing: 2rpx;
	}

	.type-switch {
		width: 132rpx;
		height: 46rpx;
		line-height: 42rpx;
		border: 2rpx solid #d77958;
		border-radius: 46rpx;
		text-align: center;
		color: #d77958;
		font-size: 24rpx;
		margin: 10rpx;
	}

	.type-switch.active-switch {
		background: #d77958;
		color: #fff;
	}

	.pup-up-coupon {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999;
	}

	/* .pup-up-coupon image{
  width: 550rpx;
	height: 550rpx;
	border-radius: 10rpx;
} */
	.pup-up-coupon .close-icon {
		position: absolute;
		right: 360px;
		top: 70%;
	}

	.tc {
		font-family: '阿里巴巴普惠体 2 55 Regular';
		width: 550px;
		height: 550px;
		background-image: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/yhj.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	.pkName {
		text-align: center;
		font-weight: bold;
		color: #862B0B;
		line-height: 55px;
	}

	.num {
		text-align: center;
		font-weight: bold;
		color: #802003;
		line-height: 100px;
		font-size: 55px;
	}

	.money {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 170px;
		color: #FEFAFA;
		font-weight: bold;
		font-size: 80px;
		margin-left: 70px;
		/* margin-top: 55rpx; */
	}

	.money>span {
		color: #FEFAFA;
		font-weight: bold;
		font-size: 30px;
		padding-top: 30px;
	}

	.couponName {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		color: #FEFAFA;
		font-weight: bold;
		width: 150px;
		font-size: 45px;
		margin-left: 70px;
	}

	.couponNameDesc {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		color: #FEFAFA;
		font-weight: bold;
		width: 250px;
		height: 240px;
		font-size: 35px;
		margin-left: 20px;
	}

	.box {
		/* width: 510px; */
		height: 240px;
		display: flex;
		/* justify-content: space-between; */
	}

	/* 优惠券弹窗 */
	.pup-up-coupon {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999;
	}

	.pup-up-coupon image {
		/* 设不设都行 */
		width: 550rpx;
		height: 550rpx;
		border-radius: 10rpx;
	}

	.pup-up-coupon .close-icon {
		position: absolute;
		right: 360rpx;
		top: 70%;
	}

	.tc {
		font-family: '阿里巴巴普惠体 2 55 Regular';
		width: 550rpx;
		height: 550rpx;
		background-image: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/yhj.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	.pkName {
		text-align: center;
		font-weight: bold;
		color: #862B0B;
		line-height: 55rpx;
	}

	.num {
		text-align: center;
		font-weight: bold;
		color: #802003;
		line-height: 100rpx;
		font-size: 55rpx;
	}

	.money {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 170rpx;
		color: #FEFAFA;
		font-weight: bold;
		font-size: 80rpx;
		margin-left: 70rpx;
		/* margin-top: 55rpx; */
	}

	.money>span {
		color: #FEFAFA;
		font-weight: bold;
		font-size: 30rpx;
		padding-top: 30rpx;
	}

	.couponName {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		color: #FEFAFA;
		font-weight: bold;
		width: 150rpx;
		font-size: 45rpx;
		margin-left: 70rpx;
		height: 240rpx;
	}

	.couponNameDesc {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		color: #FEFAFA;
		font-weight: bold;
		width: 250rpx;
		height: 240rpx;
		font-size: 35rpx;
		margin-left: 20rpx;
	}
</style>