front/pages/user/perk/list.vue

<template>
	<view class="container" v-if="fetch">
		<use-tabbar :tabbar="false"></use-tabbar>
		<view class="w-full navbar-area bg-main">
			<view class="state-area dflex-a">
				<view v-for="(item, index) in navList" :key="index" :class="{ active: status === index }" class="nav-item dflex-c pos-r fs padding-lr-lg h-full"
				 @click="tabClick(index)">
					{{ item.state }}
					<text v-if="item.cnt > 0">({{ item.cnt }})</text>
				</view>
			</view>
		</view>

		<scroll-view class="list-scroll-content h-full" scroll-y >
			<!-- 空白页 -->
			<u-empty v-if="fetch.list && fetch.list.length == 0" marginTop="200" mode="coupon" text="暂无权益包"></u-empty>
			<view v-else class="padding-lr" v-for="(item, index) in fetch.list" :key="index">
				<view class="coupon_box border-radius margin-top-sm bg-main" :class="[{ 'disabled': status != 0 }]" @click="go(item)">
					<view class="dflex-b">
						<view class="left pos-a h-full dflex-c dflex-flow-c">
							
							<view>
								<text class="price fs-big">{{ item.yue }}</text>
							</view>
							<view class="fs-sm">权益</view>
						</view>
						<view class="right padding left_t flex1">
							<view class="dflex-b padding-bottom-xs">
								<view class="fwb fs">{{ item.name }}</view>
								<text class="arrow">›</text>
							</view>
							<view v-if="status == 1" class="ft-dark iconfont iconyishiyong"></view>
							<view v-if="status == 2" class="ft-dark iconfont iconyiguoqi"></view>
							<view class="dflex-b ft-dark fs-xs padding-bottom border-line">
								<view class="">{{ item.date_name }}</view>
							</view>
							<view class="dflex-b padding-top-xs">
								<view class="fs-xs ft-dark">{{ item.code }}</view>
							
								<!-- 周期权益按钮 -->
								<!--
								<view v-if="status == 0">
									<view
										class="btn-receive bg-base ft-white border-radius-sm fs-xs padding-lr-sm padding-tb-xxs"
										@click.stop="go(item)">
										详情
									</view>
								</view>
								-->
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-modal @close="closeModal" @confirm="closeModal" :show="show.state" :title="show.title" :closeOnClickOverlay="true">
			<view class="slot-content">
				<u-parse :content="show.content"></u-parse>
			</view>
		</u-modal>
		
		<view style="height: 76px;"></view>
		<view class="pos-f btn-container padding-tb bg-drak">
			<view class="dflex-b margin-lr border-radius-big safe-area-inset-bottom-plus">
				<view class="tac padding-tb-sm flex1 bg-warn" @click="duihuan">我要兑换</view>
				<view class="tac padding-tb-sm flex1 bg-base" @click="trade">交易中心</view>
			</view>
		</view>
		
		<u-popup mode="center" @close="close('duihuan')" :show="show.duihuan" round="14" :closeable="true">
			<view class="alert-area border-radius bg-main pos-r">
				<view class="dflex-b ft-dark margin-bottom-sm margin-lr-xs">
					<view>兑换码：</view>
				</view>
		
				<view class="dflex border-radius-sm field" style="padding: 8px 7px;">
					<u--input placeholder="请输入兑换码" v-model="code"
						class="fwb fs-sm" type="text" border="none" :focus="true" clearable
						style="max-height: 76px; min-height: 19px; height: auto; font: initial;"></u--input>
				</view>
		
				<!-- 提交按钮 -->
				<view class="bg-base margin-top-xl tac w-full border-radius-lg padding-tb-sm" @click="useDuihuan">
					提交
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				fetch: {},
				status: 0,
				show : {
					state : false,
					title : '',
					content : '',
					duihuan : false,
				},
				navList: [{
						id: 0,
						state: '已领取',
						cnt: 0,
					},
					{
						id: 1,
						state: '已过期',
						cnt: 0,
					}
				],
				code: '',
			};
		},
		onLoad(options) {
			this.loadData(1);
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.loadData(1);
		},
		// 上拉加载更多
		onReachBottom() {
			this.loadData(2);
		},
		methods: {
			loadData(page) {
				this.DeverApi.page([page, 'list'], this, 'perk.my', {status:this.status});
			},
			// 顶部tab点击
			tabClick(index) {
				this.status = index;
				this.fetch.list = {}
				this.loadData(1);
			},
			showModal(title, content) {
				if (content) {
					this.show.title = title;
					this.show.content = content;
					this.show.state = true;
				}
			},
			closeModal() {
				this.show.state = false;
			},
			duihuan() {
				this.show.duihuan = true;
			},
			close() {
				this.show.duihuan = false;
			},
			useDuihuan() {
				if (this.code) {
					this.close();
					this.DeverApi.post('perk.receive', {code:this.code}, r => {
						this.code = '';
						this.Dever.success('兑换成功', () => {
							this.loadData(1);
						});
					}, s => {
						this.code = '';
						this.Dever.alert(s.msg);
					});
				} else {
					this.Dever.alert('请输入兑换码');
				}
			},
			go(item) {
				if (item.yue > 0) {
					this.Dever.location('user/perk/info?id=' + item.id);
				}
			},
			trade() {
				this.Dever.alert('敬请期待');
			}
		}
	};
</script>

<style lang="scss">
	page,
	.container {
		min-height: 100%;
		background: $page-color-base;
	}

	/* 优惠券状态区 */
	.navbar-area {
		white-space: nowrap;

		.state-area {
			height: 7vh;
			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
			z-index: 10;
		}

		.nav-item {
			flex: 1;

			&.active {
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					transform: translate(-50%);
					bottom: 0;
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

	/* 优惠券轮播区 */
	.swiper-area {
		height: 93vh;
	}

	.coupon_box {
		position: relative;
		&:last-child {
			margin-bottom: 20rpx;
		}
		.left {
			background-color: #f26aff;
			color: #fff;
			width: 30%;

			.price {
				color: #fff !important;
			}
		}

		.right {
			margin-left: 30%;
		}

		.discount {
			font-weight: 580;
		}

		.discount::after {
			content: '折';
			font-size: 24rpx;
			margin-left: 6rpx;
		}

		.border-line {
			border-bottom: 1px dotted #ededed;
		}
	}

	.disabled {
		.left {
			background-color: #d9d9d9;
			color: #b2b2b2 !important;

			.price {
				color: #b2b2b2 !important;
			}
		}

		.iconfont {
			position: absolute;
			/*top: 0rpx;*/
			right: 30rpx;
			font-size: 110rpx;
		}
	}
	
	.btn-container {
	    left: 9px;
	    right: 9px;
	    bottom: 0;
	}
	
	.btn-receive {
		background-color: #846aff;
		color: #fff;
		font-weight: bold;
	}
</style>