renshou/product/coupon/coupon - 副本.vue

<template>
	<view>
		<!--product/coupon/coupon.wxml-->
		<view class="list" v-if="pageList.length > 0">
			<block v-for="(item, index) in pageList" :key="index">
				<!-- //选择使用优惠券 -->
				<view class="li" @tap="item.isUse?chooseCoupon(index):''" :data-index="index" v-if="isChoose">
					<view class="lit">
						<image :src="picUrlss+'yhq_wei.png'" class="lqbg" v-if="item.isUse"></image>
						<image :src="picUrlss+'yhq_yi.png'" class="lqbg" v-else></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="!isChoose">立即使用</view>
						</view>
					</view>
					<view class="right">
						<view>使用日期：{{item.couponStart}}至{{item.couponEnd}}</view>
						<view>适用范围：{{item.couponTitle}}</view>
						<image src="/product/static/product/image/yhq_gq.png" v-if="!item.isUse" class="guoqi"></image>
						<!-- <image src="/pages/images/erweima.png"></image> -->
					</view>

				</view>

				<!-- //领取优惠券 -->
				<view v-else class="li"
					@tap="item.userCount >= item.userReceive&&item.userCount!=0&&item.userReceive!=-1 ? toIndex(index) : recieveCoupon(index)"
					:data-index="index">
					<view class="lit">
						<!-- 用户已经张数>= 优惠券领取次数限制   并且用户已经张数不等于0，优惠券领取次数限制不等于无限次数-->
						<image :src="picUrlss+'yhq_yi.png'" class="lqbg"
							v-if="item.userCount >= item.userReceive&&item.userCount!=0&&item.userReceive!=-1"></image>
						<image :src="picUrlss+'yhq_wei.png'" class="lqbg" v-else></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="!isChoose">
								{{item.userCount >= item.userReceive&&item.userCount!=0&&item.userReceive!=-1 ? '已领取' : '立即领取'}}
							</view>
						</view>
					</view>
					<view class="right">
						<view>使用日期：{{item.couponStart}}至{{item.couponEnd}}</view>
						<view>适用范围：{{item.couponTitle}}</view>
					</view>
					<!-- <view class="left"><text>{{item.couponAmount}}</text>元</view>
			<view class="right flex">                      
				<view>{{item.couponType === 1 ? '满减券' : '代金券'}}</view>
				<view>订单满{{item.couponFull}}元减{{item.couponAmount}}</view>          
			</view> -->
				</view>
			</block>
		</view>
		<view class="nodata" v-if="ishow">
			<image :src="picUrlss+'empty_yhq.png'"></image>
			<text>暂无优惠券</text>
		</view>
		<view class="placeholder-view" :style="'height:' + (bottomBlankHeight + 120) + 'rpx'" v-if="isChoose">
			<view class="bot" :style="'padding-bottom:' + bottomBlankHeight + 'rpx'">
				<view class="confirm " @tap="noUsecoupon">不使用优惠券</view>
			</view>
		</view>
		<view class="placeholder-view" :style="'height:' + (bottomBlankHeight + 120) + 'rpx'" v-else>
			<view class="bot" :style="'padding-bottom:' + bottomBlankHeight + 'rpx'">
				<view class="confirm " @tap="toCoupon">查看我的优惠券</view>
			</view>
		</view>
	</view>
</template>

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

	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				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) {
			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() {
			if (!this.isChoose) {
				this.form.page++;
				if(this.productId){
					this.loadProductCoupon()
				}else{
					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(isLoading) {
				let isShowLoading = false;

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

				// console.log(!this.isLoad);
				if (!this.isLoad) return false;
				this.isLoad = false;
				let that = this;
				req.getRequest('/api/coupon/list', that.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;
					}
				});
			},

			recieveCoupon(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 = _ts.pageList[index];

				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;

						_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');
				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'
				})
			}

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