front/pages/user/benefit/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 fetch.nav" :key="index" :class="{ active: type === index }"
					class="nav-item dflex-c pos-r fs padding-lr-lg h-full" @click="tabClick(index)">
					{{ item.name }}
					<text v-if="item.num > 0">({{ item.num }})</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="permission" 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" @click="showModal(item.title, item.tip)">
					<view class="dflex-b">
						<view class="left pos-a h-full dflex-c dflex-flow-c">
							<view>
								<text class="price fs-lg">{{ item.config_name }}</text>
							</view>
							<view class="fs-sm">{{item.type_name}}</view>
							
							<!-- 后续升级
							<view v-if="type == 0 && item.config_type == 'exchange'"
								class="btn-exchange bg-base ft-white padding-lr-sm padding-tb-xxs"
								@click.stop="exchange(item)">
								立即兑换
							</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" v-if="item.tip">›</text>
							</view>
							<view class="dflex-b ft-dark fs-xs padding-bottom border-line">
								<view class="">{{ item.desc }}</view>
							</view>
							<view class="dflex-b padding-top-xs">
								<view class="fs-xs ft-dark">{{ item.edate }}</view>

								<!-- 周期权益按钮 -->
								<view v-if="type === 1">
									<view v-if="item.receive == 1"
										class="btn-receive bg-base ft-white border-radius-sm fs-xs padding-lr-sm padding-tb-xxs"
										@click.stop="receive(item)">
										领取
									</view>
									<view v-else-if="item.receive == 2"
										class="btn-receive-disabled border-radius-sm fs-xs padding-lr-sm padding-tb-xxs"
										@click.stop="tip(item)">
										记录
									</view>
								</view>
								<view v-else>
									<view v-if="item.receive_tip"
										class="btn-receive-disabled border-radius-sm fs-xs padding-lr-sm padding-tb-xxs"
										@click.stop="tip(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" @linktap="handleClick"></u-parse>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fetch: {},
				type: 0,
				show: {
					state: false,
					title: '',
					content: '',
				},
			};
		},
		onLoad() {
			this.loadData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.loadData();
		},
		methods: {
			loadData() {
				this.DeverApi.get(this, 'benefit.my', {
					type: this.type
				});
			},
			// 顶部tab点击
			tabClick(index) {
				this.type = index;
				this.fetch.list = {}
				this.loadData();
			},
			showModal(title, content) {
				if (content) {
					this.show.title = title;
					this.show.content = content;
					this.show.state = true;
				}
			},
			closeModal() {
				this.show.state = false;
			},
			// 点击领取
			receive(item) {
				this.Dever.confirm('确认现在领取？', res => {
					this.DeverApi.post('benefit.receive', {
						id: item.config_id
					}, res => {
						this.Dever.alert('领取成功');
						this.loadData();
					});
				})
			},
			tip(item) {
				//this.Dever.alert(item.receive_tip);
				this.showModal('记录', item.receive_tip);
			},
			handleClick(e) {
				console.info(e)
				if (e['data-content']) {
				  uni.setClipboardData({
					data: e['data-content'],
				  });
				}
			},
			// 跳转至兑换界面
			exchange(item) {
				this.Dever.confirm('确认现在兑换？', res => {
					
				})
			},
		}
	};
</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;
				}
			}
		}
	}

	.coupon_box {
		position: relative;

		&:last-child {
			margin-bottom: 20rpx;
		}

		.left {
			background-color: #6a92ff;
			color: #fff;
			width: 30%;

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

		.right {
			margin-left: 30%;
		}

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

	/* 按钮样式 */
	.btn-receive {
		background: $base-color;
		color: #fff;
		font-weight: bold;
	}

	.btn-receive-disabled {
		background: #3dafcb;
		color: #fff;
		font-weight: bold;
	}
	
	.btn-container {
	    left: 9px;
	    right: 9px;
	    bottom: 0;
	}
	
	.btn-exchange {
		background: #ff6ade;
		color: #fff;
		font-weight: bold;
	}
</style>