zh-wx/pages/app/coupon/list.vue

<!-- 优惠劵列表  -->
<template>
	<view class="page_box">
		<view class="head_box u-m-b-20">
			<shopro-navbar back-icon-color="#333" :background="{ backgroundColor: '#fff' }">
				<view slot="content" class="u-flex nav-wrap">
					<view class="nav-item u-flex-1 u-flex-col u-row-center u-col-center" v-for="nav in navbarHeadState" :key="nav.value" @tap="onHead(nav.value)">
						<view class="item-title" :class="{ 'title-active': navState === nav.value }">{{ nav.title }}</view>
						<text class="nav-line" :class="{ 'line-active': navState === nav.value }"></text>
					</view>
				</view>
			</shopro-navbar>
			<view class="coupon-nav u-flex" v-show="navState === 'user'">
				<button
					class=" cu-btn nav-btn u-flex-col u-row-center u-col-center"
					:class="{ 'btn-active': nav.id == stateCurrent }"
					v-for="nav in couponsState"
					:key="nav.id"
					@tap="onNav(nav.id)"
				>
					<view class="item-title">{{ nav.title }}</view>
				</button>
			</view>
		</view>
		<view class="content_box">
			<view class="coupon-list" v-for="(c, index) in couponList" :key="index" @tap="toCouponDetail(c)">
				<shopro-coupon :state="stateCurrent" :couponData="c"></shopro-coupon>
			</view>
			<!-- 缺省页 -->
			<shopro-empty marginTop="300rpx" v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无此类优惠券"></shopro-empty>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			stateCurrent: 0,
			isEmpty: false,
			navState: 'event',
			navbarHeadState: [
				{
					value: 'event',
					title: '领券中心'
				},
				{
					value: 'user',
					title: '我的优惠券'
				}
			],
			couponsState: [
				{
					id: 1,
					title: '可使用'
				},
				{
					id: 2,
					title: '暂不可用'
				},
				{
					id: 3,
					title: '无效优惠券'
				}
			],
			couponList: []
		};
	},
	computed: {},
	onLoad() {
		this.getCouponList();
	},
	methods: {
		onNav(id) {
			if (this.stateCurrent !== id) {
				this.stateCurrent = id;
				this.couponList = [];
				this.getCouponList();
			}
		},
		onHead(value) {
			if (this.navState !== value) {
				this.navState = value;
				if (value === 'event') {
					this.stateCurrent = 0;
				}
				if (value === 'user') {
					this.stateCurrent = 1;
				}
				this.couponList = [];
				this.getCouponList();
			}
		},
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		getCouponList() {
			let that = this;
			that.$http('coupons.list', {
				type: that.stateCurrent
			}).then(res => {
				if (res.code === 1) {
					that.couponList = res.data;
					that.isEmpty = !that.couponList.length;
				}
			});
		},

		//跳转优惠券详情
		toCouponDetail(data) {
			if (data.user_coupons_id) {
				this.jump('/pages/app/coupon/detail', { id: data.id, userCouponId: data.user_coupons_id });
			} else {
				this.jump('/pages/app/coupon/detail', { id: data.id });
			}
		}
	}
};
</script>

<style lang="scss">
.nav-item {
	flex: 1;
	height: 100%;
	.item-title {
		font-size: 30rpx;
		font-weight: 400;
		color: #666;
	}
	.title-active {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}
	.nav-line {
		width: 128rpx;
		height: 6rpx;
		border-radius: 3rpx;
		background: #fff;
	}

	.line-active {
		background: #e9b664;
	}
}
.nav-wrap {
	/* #ifdef MP-WEIXIN */
	width: 460rpx;
	/* #endif */
	/* #ifndef MP-WEIXIN */
	width: 100%;
	/* #endif */
}
.coupon-nav {
	background: #fff;
	height: 100rpx;
	padding: 0 30rpx;
	.nav-btn {
		margin-right: 10rpx;
		font-size: 26rpx;
		color: #666;
	}
	.btn-active {
		font-size: 26rpx;
		color: #fff;
		background-color: #faae0c;
	}
}
.coupon-list {
	margin: 30rpx 20rpx;
}
</style>