zz--front/pages2/wd/coupon.vue

<template>
	<view>
		<view class="box_head">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#2F4379"></uni-segmented-control>
		</view>
		<view class="box">
			<view>
				<view v-show="current === 0">
					<view class="content" v-for="(item, index) in list1" :key="index">
						<view>
							<u-row>
								<u-col span="4">
									<view class="price_box">
										<text class="price_num">{{ item.price }}</text>
										<text class="price_unit">元</text>
									</view>
								</u-col>
								<u-col span="8">
									<view style="margin-top: 20rpx;">
										<u-row>
											<u-col span="6"><view class="coupon_title">课程现金券</view></u-col>
											<u-col span="4" offset="2"><view class="coupon_btn">立即使用</view></u-col>
										</u-row>
									</view>
									<view class="date">有效期：</view>
									<view class="time">{{ $method.timestampToTime(item.createTime) }} ~ {{ $method.timestampToTime(item.endTime) }}</view>
									<view class="tip">仅部分课程使用</view>
								</u-col>
							</u-row>
						</view>
					</view>
				</view>
				<view v-show="current === 1">
					<view class="content" v-for="(item, index) in list2" :key="index">
						<view>
							<u-row>
								<u-col span="4">
									<view class="price_box">
										<text class="price_num">{{ item.price }}</text>
										<text class="price_unit">折</text>
									</view>
								</u-col>
								<u-col span="8">
									<view style="margin-top: 20rpx;">
										<u-row>
											<u-col span="6"><view class="coupon_title">课程折扣券</view></u-col>
											<u-col span="4" offset="2"><view class="coupon_btn">立即使用</view></u-col>
										</u-row>
									</view>
									<view class="date">有效期：</view>
									<view class="time">{{ $method.timestampToTime(item.createTime) }} ~ {{ $method.timestampToTime(item.endTime) }}</view>
									<view class="tip">仅部分课程可使用</view>
								</u-col>
							</u-row>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer"><view class="footer_btn" @click="openPopup">失效券</view></view>
		<u-popup v-model="show" mode="bottom" :safe-area-inset-bottom="true">
			<view class="popup_box">
				<scroll-view scroll-y="true" class="popup_list">
					<view class="content" v-for="(item, index) in list3" :key="index" v-show="current === 0">
						<view style="position: relative;">
							<u-row>
								<u-col span="4">
									<view class="price_box">
										<text class="price_num">20</text>
										<text class="price_unit">元</text>
									</view>
								</u-col>
								<u-col span="8">
									<view style="margin-top: 20rpx;">
										<u-row>
											<u-col span="6"><view class="coupon_title">课程现金券</view></u-col>
										</u-row>
									</view>
									<view class="date">有效期：</view>
									<view class="time">{{ $method.timestampToTime(item.createTime) }} ~ {{ $method.timestampToTime(item.endTime) }}</view>
									<view class="tip">仅部分课程可使用</view>
								</u-col>
							</u-row>
							<view><image :src="item" class="status_img"></image></view>
						</view>
					</view>
					<view class="content" v-for="(item, index) in list4" :key="index" v-show="current === 1">
						<view style="position: relative;">
							<u-row>
								<u-col span="4">
									<view class="price_box">
										<text class="price_num">5.5</text>
										<text class="price_unit">折</text>
									</view>
								</u-col>
								<u-col span="8">
									<view style="margin-top: 20rpx;">
										<u-row>
											<u-col span="6"><view class="coupon_title">课程折扣券</view></u-col>
										</u-row>
									</view>
									<view class="date">有效期：</view>
									<view class="time">{{ $method.timestampToTime(item.createTime) }} ~ {{ $method.timestampToTime(item.endTime) }}</view>
									<view class="tip">仅部分课程可使用</view>
								</u-col>
							</u-row>
							<view><image :src="item" class="status_img"></image></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			items: ['现金券（0）', '折扣券（0）'],
			list: [],
			current: 0,
			show: false,
			list2: [],
			list1: ['/static/coupon/overdue.png', '/static/coupon/used.png', '/static/coupon/used.png', '/static/coupon/overdue.png', '/static/coupon/overdue.png'],
			paramList: [
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					showStatus: 0,
					couponType: 0,
					userStatus: 0
				},
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					showStatus: 0,
					couponType: 1,
					userStatus: 0
				}
			],
			list1: [],
			list2: [],
			list3: [],
			list4: [],
			userParamList: [
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					couponType: 0,
					userStatus: 2
				},
				{
					pageNum: 1,
					pageSize: 10,
					total: 0,
					couponType: 1,
					userStatus: 2
				}
			]
		};
	},
	onReachBottom() {
		console.log(32423);
	},
	onLoad(option) {
		this.getList1();
		this.getList2();
		this.getList3();
		this.getList4();
	},
	onShow() {},
	methods: {
		getList1() {
			let self = this;
			let param = this.paramList[0];
			self.$api.configurationlistCoupon(param).then(res => {
				self.list1 = res.data.rows;
				self.paramList[0].total = res.data.total;
				self.items[0] = '现金券（' + res.data.total + '）';
			});
		},
		getList2() {
			let self = this;
			let param = this.paramList[1];
			self.$api.configurationlistCoupon(param).then(res => {
				self.list2 = res.data.rows;
				self.paramList[1].total = res.data.total;
				self.items[1] = '折扣券（' + res.data.total + '）';
			});
		},
		onReachBottom() {
			if (this.current == 0) {
				if (this.list1.length < this.paramList[0].total) {
					this.paramList[0].pageNum++;
					this.getList1()
				}
			}
			if (this.current == 1) {
				if (this.list1.length < this.paramList[1].total) {
					this.paramList[1].pageNum++;
					this.getList2()
				}
			}
		},
		getList3() {
			let self = this;
			let param = this.userParamList[0];
			self.$api.configurationlistCoupon(param).then(res => {
				self.list3 = res.data.rows;
				self.userParamList[0].total = res.data.total;
			});
		},
		getList4() {
			let self = this;
			let param = this.userParamList[1];
			self.$api.configurationlistCoupon(param).then(res => {
				self.list4 = res.data.rows;
				self.userParamList[1].total = res.data.total;
			});
		},
		onClickItem(e) {
			this.current = e.currentIndex;
		},
		openPopup() {
			this.show = true;
		}
	}
};
</script>
<style>
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
.u-drawer-content-visible {
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	overflow: hidden;
}
</style>
<style scope>
.status_img {
	width: 161rpx;
	height: 161rpx;
	position: absolute;
	top: 40rpx;
	left: 20%;
}
.popup_list {
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	height: 580rpx;
	margin-bottom: 20rpx;
}
.popup_box {
	height: 600rpx;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	background: #f2f3f6;
	padding-left: 20rpx;
	padding-right: 20rpx;
}
.footer_btn {
	width: 686rpx;
	height: 88rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	border-radius: 32rpx;
	text-align: center;
	line-height: 88rpx;
	margin: 0 auto;
	margin-top: 10rpx;
}
.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 120rpx;
	background: #f2f3f6;
	text-align: center;
}
.price_box view {
	padding: 0;
}
.date {
	font-size: 20rpx;
	color: #636a75;
	margin-top: 20rpx;
}
.time {
	font-size: 20rpx;
	color: #636a75;
	margin-top: 20rpx;
}
.tip {
	font-size: 20rpx;
	color: #636a75;
	opacity: 0.5;
	margin-top: 20rpx;
}
.coupon_btn {
	width: 112rpx;
	height: 48rpx;
	background: #32467b;
	border-radius: 16rpx;
	line-height: 48rpx;
	text-align: center;
	font-size: 20rpx;
	color: #ffffff;
}
.coupon_title {
	width: 140rpx;
	height: 48rpx;
	background: #ffffff;
	border: 2rpx solid #32467b;
	border-radius: 16rpx;
	font-size: 24rpx;
	color: #636a75;
	line-height: 48rpx;
	text-align: center;
}
.price_box {
	text-align: center;
	vertical-align: middle;
	height: 240rpx;
	border-right: 1px dashed #eeeeee;
}
.price_unit {
	font-size: 24rpx;
	color: #636a75;
}
.price_num {
	font-size: 88rpx;
	font-family: Impact;
	font-weight: bold;
	color: #32467b;
	line-height: 240rpx;
}
.box_head {
	z-index: 999;
	padding: 20rpx 100rpx;
	height: 96rpx;
	position: fixed;
	width: 100%;
	background-color: #f2f3f6;
	text-align: center;
}
.box {
	padding-top: 96rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	padding-bottom: 120rpx;
	overflow-x: hidden;
	overflow-y: auto;
}
.c_log {
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #2f4379;
	position: absolute;
	bottom: 10rpx;
}
.c_title {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #2f4379;
	padding-top: 10rpx;
}
.c_img {
	width: 278rpx;
	height: 134rpx;
}
.c_t1 {
	font-size: 20rpx;
	color: #2f4379;
	padding: 15rpx;
}
.content {
	margin-top: 20rpx;
	width: 100%;
	height: 240rpx;
	background: #ffffff;
	border-radius: 32rpx;
	position: relative;
}
.content:after {
	content: '';
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: -35rpx;
	width: 70rpx;
	height: 100%;
	background: radial-gradient(circle, #f2f3f6, #f2f3f6 30rpx, transparent 35rpx);
}
.content:before {
	content: '';
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: -35rpx;
	width: 70rpx;
	height: 100%;
	background: radial-gradient(circle, #f2f3f6, #f2f3f6 30rpx, transparent 35rpx);
}
.segmented-control__text {
	font-size: 24rpx !important;
}
.segmented-control {
	height: 56rpx !important;
	background-color: #f8f9ff;
}

page {
	background: #f2f3f6;
}
</style>