H5_module/product/couponList/index.vue

<template>
	<view>
		<view class="list" v-if="pageList.length>0">
			<block v-for="(item,index) in pageList" :key="index">
			<!-- //选择使用优惠券 -->
			<view class="li ddflex" @tap="item.isUse?chooseCoupon(index):''" :data-index="index" v-if="isChoose">
				<image src="/product/static/product/image/yhq_gq.png" v-if="!item.isUse" class="guoqi"></image>
				<view class="name">
					<block v-if="item.title">{{item.title}}</block>
					<block v-else>{{item.couponType === 3 ? '通用券':item.couponType === 1 ? '满减券' : '代金券'}}</block>
				</view>
				<view class="info fflex ddflex">
					<image :src="item.couponIcon" mode="aspectFill" v-if="item.couponIcon"></image>
					<view class="fflex">
						<view class="tit">{{item.couponTitle}}</view>
						<view class="time">有效期至{{item.couponEnd}}</view>
					</view>
				</view>
				<view class="info-r ddflex">
					<view class="money"><text>￥</text>{{item.couponAmount}}</view>
					<view class="man">{{item.couponBrief}}</view>
				</view>
			
			</view>
			<!-- 领取优惠券 -->
			<view class="li ddflex" @click="item.userCount >= item.userReceive&&item.userCount!=0&&item.userReceive!=-1 ? toIndex(item,index) : recieveCoupon(item,index)" v-else>
				<view class="name">
					<block v-if="item.title">{{item.title}}</block>
					<block v-else>{{item.couponType === 3 ? '通用券':item.couponType === 1 ? '满减券' : '代金券'}}</block>
				</view>
				<view class="info fflex ddflex">
					<image :src="item.couponIcon?item.couponIcon:picUrlss+'coupon_default.png'" mode="aspectFill"></image>
					<view class="fflex">
						<view class="tit">{{item.couponTitle}}</view>
						<view class="time">有效期至{{item.couponEnd}}</view>
					</view>
				</view>
				<view class="info-r ddflex">
					<view class="money"><text>￥</text>{{item.couponAmount}}</view>
					<view class="man">{{item.couponBrief}}</view>
					<view class="btn">{{item.userCount >= item.userReceive&&item.userCount!=0&&item.userReceive!=-1 ? '已领取' : '立即领'}}</view>
				</view>
			</view>
			</block>
		</view>
		<view class="nodata" v-else>
			<image :src="picUrlss+'empty_yhq.png'"></image>
			<text>暂无优惠券</text>
		</view>
		<view style="height: 135rpx;"></view>
		<view class="bot ddflex">
			<view class="ddflex no fflex" @click="noUsecoupon" v-if="isChoose">不使用优惠券</view>
			<block v-else>
			<view class="ddflex" @click="jumpUrl('/product/exchange/index')"><image src="../static/product/image/quan_dhm.png"></image>兑换</view>
			<view class="ddflex" @click="jumpUrl('/mine/coupons/coupons')"><image src="../static/product/image/quan_wd.png"></image>我的券</view>
			</block>
		</view>
	</view>
</template>

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

	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				opt: {},
				form: {
					page: 1,
					limit: 10
				},
				pageList: [],
				isLoad: true,
				isChoose: false,
				bottomBlankHeight: app.globalData.isIPhoneX ? 68 : 0,
				ishow: false,
				couponIndex: "",
				userInfo: {},
				productId: '',
			};
		},

		components: {},
		props: {},
		onLoad: function(options) {
			this.opt = options;
			if(options.productId){
				this.productId = options.productId
			}
			if (options.isChoose) {
				let pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				// console.log(prevPage,prevPage.data.couponList);
				this.setData({
					pageList: prevPage.data.couponList,
					isChoose: options.isChoose
				});
			} else {
				if(this.productId){
					this.loadProductCoupon()
				}else{
					this.loadCoupon();
				}
			}
		},
		onShow(){
			this.getMy();
		},
		onReachBottom() {
			this.form.page++
			this.loadCoupon();
		},

		methods: {
			getMy() {
				req.getRequest('/api/user/my', {}, data => {
					this.userInfo = data;
				});
			},
			loadProductCoupon(isLoading) {
				let isShowLoading = false;
				let that = this;
				if (!this.isLoad) return false;
				this.isLoad = false;
				let form = that.form;
				if(this.productId){
					form.productId = this.productId;
				}
				if (form.page == 1 && !isShowLoading && !isLoading) {
					req.loadIng('加载中');
					isShowLoading = true;
				}
				req.getRequest('/api/coupon/listV2', form, data => {
					// console.log(data);
					if (data && data.length >= 10) that.isLoad = true;
					if (that.form.page > 1) data = that.pageList.concat(data);
					that.setData({
						pageList: data
					});
			
					if (data.length <= 0) {
						that.setData({
							ishow: true
						});
					} else {
						that.setData({
							ishow: false
						});
					}
			
					if (isShowLoading) {
						uni.hideLoading();
						isShowLoading = false;
					}
				});
			},
			loadCoupon() {
				if(!this.isLoad) return false;
				this.isLoad = false;
				let form = this.form;
				form.bindType = 'use'
				if(this.opt.couponType) form.couponType = this.opt.couponType;//  5新人券 6品牌券 7供应商券 3其它通用
				else delete form.couponType;
				if(this.opt.categoryId){
					form.categoryId = this.opt.categoryId;
				}
				if(this.opt.specialId){
					form.specialId = this.opt.specialId;
				}
				req.getRequest('/api/coupon/list', form, data => {
					if(data&&data.length >= 10) this.isLoad = true;
					if(form.page > 1) data = this.pageList.concat(data);
					this.pageList = data;
				});
			},

			recieveCoupon(item,index) {
				let _ts = this;
				if(!_ts.userInfo.mobile){
					uni.navigateTo({
						url: '/pages/authorize/authorize?bindmobile=' + 1
					})
					return false;
				}

				// let index = e.currentTarget.dataset.index;
				const coupon = item;

				if (coupon.userReceive > -1 && coupon.userCount >= coupon.userReceive) {
					return req.msg('超出优惠券领取限制，无法领取');
				}

				req.postRequest('/api/coupon/receive', {
					id: coupon.id
				}, res => {
					// console.log(res);
					req.msg('领取成功', () => {
						// console.log("11111111111111");
						let isLoading = true;
						this.pageList[index].userCount++;
						// _ts.loadCoupon(isLoading);
					});
				});
			},

			chooseCoupon(index) {
				// let index = event.currentTarget.dataset.index;
				// console.log(index);
				let pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				prevPage.$vm.setData({
					couponIndex: index
				});
				uni.navigateBack();
			},

			toIndex() {
				// app.globalData.switchTab('pages/index/index');
				return req.msg('不可重复领取')
				// if (req.header.appId == 'ZQ1VK5oc17I387E') {
				// 	app.globalData.switchTab('pages/timelyDelivery/index')
				// } else {
				// 	app.globalData.switchTab('pages/index/index')
				// }
			},

			noUsecoupon() {
				let pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				prevPage.$vm.setData({
					couponIndex: false
				});
				uni.navigateBack();
			},
			toCoupon() {
				uni.navigateTo({
					url: '/mine/coupons/coupons'
				})
			},
			jumpUrl(url){
				uni.navigateTo({
					url: url
				})
			}

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