renshou/product/coupon/coupon.vue

<template>
	<view>
		<view class="new" v-if="newCouponList.length>0">
			<image src="../static/product/image/quan_dai.png" class="quan-dai"></image>
			<view class="new-tits">新人专用券</view>
			<scroll-view scroll-x="true" class="new-list">
				<view class="li" v-for="(item,index) in newCouponList" :key="index" @click="item.userCount >= item.userReceive&&item.userCount!=0&&item.userReceive!=-1 ? toIndex(item,index) : recieveCoupon(item,index)">
					<image :src="item.couponIcon?item.couponIcon:picUrlss+'coupon_default.png'" mode="aspectFill" class="new-img"></image>
					<view class="new-info ddflex">
						<view class="new-money"><text>￥</text>{{item.couponAmount}}</view>
						<view class="new-man tover">{{item.couponTitle}}</view>
					</view>
					<view class="new-btn">{{item.userCount >= item.userReceive&&item.userCount!=0&&item.userReceive!=-1 ? '已领取' : '立即领'}}</view>
				</view>
			</scroll-view>
		</view>
		<view class="coupons" v-if="commonCouponList.length>0">
			<view class="coupons-tits">全场通用券</view>
			<scroll-view scroll-x="true" class="coupons-list ddflex">
				<view class="li" v-for="(item,index) in commonCouponList" :key="index" @click="item.userCount >= item.userReceive&&item.userCount!=0&&item.userReceive!=-1 ? toIndex(item,index) : recieveCoupon(item,index)">
					<view class="coupons-top">
						<view class="coupons-type">{{item.couponType === 3 ? '通用券':item.couponType === 1 ? '满减券' : '代金券'}}</view>
						<view class="coupons-money"><text>￥</text>{{item.couponAmount}}</view>
						<view class="coupons-man tover">{{item.couponTitle}}</view>
					</view>
					<view class="coupons-btn">{{item.userCount >= item.userReceive&&item.userCount!=0&&item.userReceive!=-1 ? '已领取' : '立即领'}}</view>
				</view>
			</scroll-view>
		</view>
		<block v-if="brandCouponList.length>0">
		<view class="title ddflex" @click="jumpUrl('/product/couponList/index?couponType=6')">品牌券<image src="../../static/pages/images/more.png" class="rico"></image></view>
		<view class="list">
			<view class="li ddflex" v-for="(item,index) in brandCouponList" :key="index" @click="item.userCount >= item.userReceive&&item.userCount!=0&&item.userReceive!=-1 ? toIndex(item,index) : recieveCoupon(item,index)">
				<view class="name" v-if="item.title">{{item.title}}</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>
		</view>
		</block>
		<block v-if="supplierCouponList.length>0">
		<view class="title ddflex" @click="jumpUrl('/product/couponList/index?couponType=7')">供应商券<image src="../../static/pages/images/more.png" class="rico"></image></view>
		<view class="list">
			<view class="li ddflex" v-for="(item,index) in supplierCouponList" :key="index" @click="item.userCount >= item.userReceive&&item.userCount!=0&&item.userReceive!=-1 ? toIndex(item,index) : recieveCoupon(item,index)">
				<view class="name" v-if="item.title">{{item.title}}</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>
		</view>
		</block>
		<view style="height: 135rpx;"></view>
		<view class="bot ddflex">
			<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>
		</view>
	</view>
</template>

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

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

		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(3,100,data=>{
						this.commonCouponList = data;
					});
					this.loadCoupon(5,100,data=>{//新人券
						this.newCouponList = data;
					});
					this.loadCoupon(6,3,data=>{//品牌券
						this.brandCouponList = data;
					});
					this.loadCoupon(7,3,data=>{//供应商券
						this.supplierCouponList = data;
					});
				}
			}
		},
		onShow(){
			this.getMy();
		},

		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(couponType,limit,success) {
				let isShowLoading = false;
				let that = this;
				this.form.couponType = couponType//  5新人券 6品牌券 7供应商券 3其它通用
				this.form.bindType = 'use'
				req.getRequest('/api/coupon/list', that.form, data => {
					// console.log(data);
					success.call(this,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;
						// _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(item) {
				let arr = item.useActionList;
				let special = ''
				arr.map(it=>{
					if(it.indexOf('APPOINT_SPECIAL')>-1){
						special = it;
					}
				})
				if(special) { 
					special = JSON.parse(special.split(':')[1]);
					app.globalData.navigateTo('pages/topic/topic?id='+special[0]);
				}else{
					// 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'
				})
			},
			jumpUrl(url){
				uni.navigateTo({
					url: url
				})
			}

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