<template>
	<view class="content">
		<view class="bg-white u-p-b-36 rounded-20">
			<view class="title row-between" @click="toCouponList">
				<view>优惠券</view>
				<view>
					可用 <text class="num">13</text> 张
					<u-icon name="arrow-right" size="24" color="#808080"></u-icon>
				</view>
			</view>

			<view class="u-m-l-32">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
					<view class="scroll-view-item_H coupon" v-for="(item, index) in couponList" :key="index">
						<view class="coupon-top">
							<text>满减券x{{item.num}}</text>
						</view>
						<view class="u-m-t-50 u-text-center primary">
							<price-format :subscript-size="34" :first-size="60" :second-size="50" :price="item.price" :weight="500"></price-format>
						</view>
						<view class="dashed"></view>
						<view class="coupon-tips">
							满{{item.full_price}}元可用
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="coupon-btn">领取优惠券</view>
		</view>

		<view class="bg-white u-p-b-36 rounded-20 u-m-t-24">
			<view class="title row-between" @click="toCouponPackage">
				<view>优惠券包</view>
				<view>
					可用 <text class="num">13</text> 张
					<u-icon name="arrow-right" size="24" color="#808080"></u-icon>
				</view>
			</view>

			<view class="u-m-l-32">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
					<view class="scroll-view-item_H coupon2" v-for="(item, index) in couponPackageList" :key="index">
						<view class="coupon-top2">
							<text>优惠券专享</text>
						</view>
						<view class="unit">
							<view>{{item.price}}</view>
							<view>元</view>
							<view class="u-m-l-10 u-m-r-10">x</view>
							<view>{{item.num}}</view>
							<view>张</view>
						</view>
						<view class="coupon-tips2">
							{{item.full_price == 0 ? '无门槛' : '满' + item.full_price + '元可用'}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="bg-white u-p-b-36 rounded-20 u-m-t-24">
			<view class="title row-between" @click="toCouponExchange">
				<view>兑换券</view>
				<view>
					可用 <text class="num">13</text> 张
					<u-icon name="arrow-right" size="24" color="#808080"></u-icon>
				</view>
			</view>

			<view class="u-m-l-32">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
					<view class="scroll-view-item_H coupon" v-for="(item, index) in 10" :key="index">
						<view class="coupon-top">
							<text>满减券x1</text>
						</view>
						<view class="u-m-t-50 u-text-center primary">
							<price-format :subscript-size="34" :first-size="60" :second-size="50" :price="18" :weight="500"></price-format>
						</view>
						<view class="dashed"></view>
						<view class="coupon-tips">
							满11元可用
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="coupon-btn">立即兑换</view>
		</view>
	</view>
</template>

<script>
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
import { getCoupon } from "@/api/user"
import { getCouponList } from '@/api/activity'


export default {
	mixins: [MescrollMixin],
	data() {
		return {
			tab: [
				{
					name: '购买'
				},
				{
					name: '兑换'
				}
			],
			current: 0,
			upOption: {
				noMoreSize: 4,
				empty: {
					tip: '~ 空空如也 ~', // 提示
					btnText: '',
				},
				textNoMore: '没有更多了'
			},
			list: [],
			couponList: [
				{price: 2, full_price: 9, num: 1},
				{price: 3, full_price: 15, num: 3},
				{price: 4, full_price: 18, num: 4},
				{price: 2, full_price: 0, num: 4},
			],
			couponPackageList: [
				{price: 2, full_price: 9, num: 1},
				{price: 3, full_price: 15, num: 3},
				{price: 4, full_price: 18, num: 4},
				{price: 2, full_price: 0, num: 4},
			]
		}
	},
	methods: {
		change(index) {
			this.current = index
		},

		// 初始化数据
		upCallback(page) {
			getCouponList({
				page: page.num,
				current: this.current,
			}).then(res => {
				const { data } = res
				this.mescroll.endSuccess(data.length, data.totalPages);
				//设置列表数据
				if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
				this.list = this.list.concat(data); //追加新数据
			}).catch(() => {
				this.mescroll.endErr();
			})
		},

		// 优惠券列表
		toCouponList() {
			uni.navigateTo({ url: '/bundle/pages/coupon/coupon_list' })
		},

		// 优惠券包列表
		toCouponPackage() {
			uni.navigateTo({ url: '/bundle/pages/coupon/coupon_package' })
		},

		// 兑换券列表
		toCouponExchange() {
			uni.navigateTo({ url: '/bundle/pages/coupon/coupon_exchange' })
		}
	}
}
</script>

<style lang="scss">
.rounded-20 {
	border-radius: 20rpx;
}

.content {
	margin: 26rpx;
}

.title {
	padding: 26rpx 32rpx;
}

.num {
	color: #E80E0F;
	margin: 0 10rpx;
}

.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}

.scroll-view-item_H {
	display: inline-block;
	width: 206rpx;
	height: 196rpx;
}

.coupon {
	position: relative;
	background: #FFF5F3;
	border-radius: 8px;
	margin-right: 22rpx;
	height: 100px;
}

.coupon::before,
.coupon::after {
	content: "";
	position: absolute;
	top: 70%;
	width: 32rpx;
	/* 控制凹口大小 */
	height: 32rpx;
	background: #fff;
	/* 与页面背景色一致 */
	border-radius: 50%;
	transform: translateY(-70%);
	z-index: 2;
}

.coupon::before {
	left: -16rpx;
}

.coupon::after {
	right: -16rpx;
}

.coupon-top {
	width: 165rpx;
	height: 40rpx;
	background: linear-gradient( 180deg, #FC7001 0%, #FE00B0 100%);
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	text-align: center;
	border-bottom-left-radius: 24rpx;
	border-bottom-right-radius: 24rpx;
	color: #fff;
	font-size: 22rpx;
	line-height: 40rpx;
}

.dashed {
	position: absolute;
	top: 66%;
	left: 0;
	right: 0;
	transform: translateY(-66%);
	border: 2rpx dashed #E0B66C;
}

.coupon-tips {
	color: #E0B66C;
	position: absolute;
	top: 90%;
	left: 50%;
	transform: translate(-50%, -90%);
	font-size: 22rpx;
}

.coupon-btn {
	width: 554rpx;
	height: 68rpx;
	font-size: 28rpx;
	line-height: 68rpx;
	font-weight: 400;
	color: #fff;
	text-align: center;
	margin: 44rpx auto 0;
	background: linear-gradient( 90deg, #FC680E 0%, #FE02AC 100%);
	border-radius: 116rpx 116rpx 116rpx 116rpx;
}

.coupon2 {
	margin-right: 20rpx;
	position: relative;
	width: 258rpx;
	height: 161rpx;
	background: #FFF5F3;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}

.curved-rect {
	width: 258rpx;
	height: 64rpx;
}

.coupon-top2 {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 136rpx;
	height: 30rpx;
	background: #FFEBE3;
	text-align: center;
	border-bottom-left-radius: 24rpx;
	border-bottom-right-radius: 24rpx;
	color: #F1BFB6;
	font-size: 22rpx;
	line-height: 27rpx;
}

.unit {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 40rpx;
	color: #F90004;
	font-weight: 600;
	margin-top: 40rpx;
	text-align: center;
}

.coupon-tips2 {
	background-image: url('/static/coupon_bg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 66rpx;
	text-align: center;
	padding-top: 20rpx;
	color: #fff;
}
</style>