H5_module/mine/coupons/coupons.vue

<template>
	<view>
		<!--mine/coupons/coupons.wxml-->
		<view class="tab bgfff dflex">
			<view :class="'li ' + (currentTab == 0 ? 'active' : '')" data-current="0" @tap="tab">未使用({{couponCount.unUse ? couponCount.unUse : 0}})</view>
			<view :class="'li ' + (currentTab == 1 ? 'active' : '')" data-current="1" @tap="tab">已使用({{couponCount.used ? couponCount.used : 0}})</view>
			<view :class="'li ' + (currentTab == 2 ? 'active' : '')" data-current="2" @tap="tab">已失效({{couponCount.invalid ? couponCount.invalid : 0}})</view>
		</view>
		<navigator url="/product/couponList/index" hover-class="none" class="ling ddflex">
			<image :src="config.mainIconPath ? picUrlss + config.mainIconPath+'quan.png' : '../static/mine/images/quan.png'" class="quan-img"></image>
			<view class="fflex">去领券中心</view>
			<image src="../../static/pages/images/rico.png" class="rico"></image>
		</navigator>
		<block v-if="pageList.length > 0">
			<view class="list">
				<view :class="'li' + (item.couponType === 3 ? ' tong' : '') + (currentTab == 0 ? '' : ' hui')" v-for="(item, index) in pageList" :key="index">
					<view class="info dflex">
						<image :src="item.couponIcon" mode="aspectFill" class="info-img" v-if="item.couponIcon"></image>
						<view class="flex">
							<view class="title">{{item.couponType === 3 ? '通用券' : item.couponType === 1 ? '满减券' :  item.couponType === 4 ? '免除券':'代金券'}}-{{item.couponTitle}}</view>
							<view class="time">有效期至{{item.couponEnd}}</view>
						</view>
						<view class="info-r" v-if="item.couponType != 4">
							<view class="money"><text>￥</text>{{item.couponAmount}}</view>
							<view class="man">{{item.couponBrief}}</view>
						</view>
					</view>
					<view class="li-bot dflex">
						<view class="check dflex flex" @click="checks(item,index)">查看详情
							<!-- <view class="xian">限青岛大虾</view> -->
							<image src="../static/mine/images/bico1.png" v-if="item.couponType === 3"></image>
							<image src="../static/mine/images/bico.png" v-else></image>
						</view>
						<!-- <image :src="'../static/mine/images/' + (item.couponType === 3 ? 'ma_white' : 'ma_dark') + '.png'" class="ma"></image> -->
						<view class="yong dflex" @tap="toIndex" v-if="currentTab == 0">去使用</view>
						<view class="yi" v-else>
							<image src="../static/mine/images/yishiyong.png" class="yipic" v-if="currentTab == 1"></image>
							<image src="../static/mine/images/yishixiao.png" class="yipic" v-else></image>
						</view>
					</view>
					<view class="infos" v-if="item.isShow">
						<view>1.使用时间：{{item.couponStart}}至{{item.couponEnd}}</view>
						<view v-if="item.couponBrief">2.使用范围：{{item.couponBrief}}</view>
						<view v-if="item.useActionsList && item.useActionsList.length > 0" class="i-pro">{{item.couponBrief?'3':'2'}}.指定产品：
							<text v-for="(it,idx) in item.useActionsList" :key="idx" @click="toDetail(it)">{{it.name}}</text>
						</view>
					</view>
				</view>
			</view>
		
			<!-- <view :class="'list ' + (currentTab == 0 ? 'show' : 'hide')">
				<view v-for="(item, index) in pageList" :key="index" class="li" @tap="toIndex">
					<view class="lit">
						<image :src="picUrlss+'yhq_wei.png'" class="lqbg" v-if="item.couponState==1"></image>
						<image :src="picUrlss+'yiguoqi.png'" class="lqbg"
							v-if="item.couponState==2||item.couponState==3"></image>
						<view class="lits dflex">
							<view class="left"><text>￥</text><text class="jine">{{item.couponAmount}}</text>元</view>
							<view class="tong flex">
								<view>{{item.couponType === 1 ? '满减券' : '代金券'}}</view>
								<text>{{item.couponBrief}}</text>
							</view>
							<view class="lqbtn" v-if="item.couponState==1">立即使用</view>
							<view class="lqbtn" v-if="item.couponState==2">已使用</view>
							<view class="lqbtn" v-if="item.couponState==3">已过期</view>
						</view>
					</view>
					<view class="dflex bot">
						<view class="right">
							<view>使用日期：{{item.couponStart}}至{{item.couponEnd}}</view>
							<view>适用范围：{{item.couponTitle}}</view>
						</view>
						<image src="/static/pages/images/erweima.png" class="erweima" v-if="item.couponState==1">
						</image>
						<image src="/static/pages/images/yhq-ygq.png" class="erweima"
							v-if="item.couponState==2||item.couponState==3"></image>
					</view>
				</view>
			</view>
			<view :class="'list ' + (currentTab == 1 ? 'show' : 'hide')">
				<view v-for="(item, index) in pageList" :key="index" class="li fail">
					<view class="lit">
						<image :src="picUrlss+'yhq_yi.png'" class="lqbg"></image>
						<view class="lits dflex">
							<view class="left"><text>￥</text><text class="jine">{{item.couponAmount}}</text>元</view>
							<view class="tong flex">
								<view>{{item.couponType === 1 ? '满减券' : '代金券'}}</view>
								<text>{{item.couponBrief}}</text>
							</view>
						</view>
					</view>
					<view class="right">
						<view>使用日期：{{item.couponStart}}至{{item.couponEnd}}</view>
						<view>适用范围：{{item.couponTitle}}</view>
					</view>
					<image src="/static/pages/images/guoqi.png" class="guoqi"></image>
				</view>
			</view> -->
		</block>
		<view class="nodata" v-if="ishow">
			<image :src="picUrlss+'empty_yhq.png'"></image>
			<text>暂无优惠券</text>
		</view>
	</view>
</template>

<script>
	// mine/coupons/coupons.js
	const req = require("../../utils/request.js");
	const app = getApp();

	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				currentTab: 0,
				form: {
					page: 1,
					limit: 10,
					couponState: 1
				},
				pageList: [],
				isLoad: true,
				ishow: false,
				couponCount: '',
				config: {}
			};
		},

		components: {},
		props: {},
		onShow: function() {
			this.config = JSON.parse(req.getStorage('configRes'));
			this.form.page = 1;
			this.isLoad = true;
			this.setData({
				pageList: []
			});
			this.loadCoupon();
			this.getCount();
		},

		onReachBottom() {
			this.form.page++;
			this.loadCoupon();
		},

		methods: {
			tab(e) {
				let that = this;
				const index = e.currentTarget.dataset.current;
				if (that.currentTab === index) {
					return false;
				}
				that.setData({
					currentTab: index
				});
				console.log('currentTab==' + that.currentTab)
				that.form.couponState = index == 0 ? 1 : index == 1 ? 2 : 3;
				// console.log(index, that.form.couponState);
				that.form.page = 1;
				that.isLoad = true;
				that.setData({
					pageList: []
				});
				that.loadCoupon();
			},
			getCount(){
				req.getRequest('/api/v3/coupon/count',{},data=>{
					this.couponCount = data;
				})
			},
			loadCoupon() {
				let isShowLoading = false;

				if (this.form.page == 1 && !isShowLoading) {
					req.loadIng('加载中');
					isShowLoading = true;
				}

				if (!this.isLoad) return false;
				this.isLoad = false;
				let that = this;
				req.getRequest('/api/coupon/user', this.form, data => {
					if (data && data.length == 10) this.isLoad = true;
					if (that.form.page > 1) data = that.pageList.concat(data);
					data.map(it=>{
						it.isShow = false;
						return it;
					})
					that.setData({
						pageList: data
					});

					if (!this.pageList || data.length <= 0) {
						that.setData({
							ishow: true
						});
					} else {
						that.setData({
							ishow: false
						});
					}

					if (isShowLoading) {
						uni.hideLoading();
						isShowLoading = false;
					}
				});
			},

			toIndex() {
				app.globalData.openHome();
			},
			checks(item,index){
				let pageList = this.pageList;
				if(pageList[index].isShow){
					pageList[index].isShow = false;
				}else{
					pageList.map(it=>{
						it.isShow = false;
						return it;
					});
					pageList[index].isShow = true;
				}
			},
			toDetail(it){
				uni.navigateTo({
					url: '/product/detail/detail?id=' + it.id + '&merchantId=' + req.getStorage('MERCHANT').id
				})
			}

		}
	};
</script>
<style>
	@import "./coupons.css";
</style>