smart-admin/rc-busness/pages/personal/discount.vue

<template>
	<div class="allmain">
		<Myheader></Myheader>
		<!-- <tabs></tabs> -->
		<div class="rc-top"></div>
		<tabs :crumbs="crumbs"></tabs>
		<div class="rc-usermain">
			<div class="rc rc-column">
				<span v-for="(item, index) in discountlist" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'">
					{{ item.title }}
				</span>
				<!-- <span @click="tanchu()">弹出</span> -->
			</div>
			<div class="online bold"></div>

			<div class="rs-dis">
				<div class="ts-no-data" v-if="!newlist.length">暂未发现相关记录</div>
				<div class="rc-discount" v-for="(item, index) in newlist" :key="index">
					<img :src="userimage" alt="" />
					<div class="rc-contair">
						<div class="rc-left" ref="userleft" id="userleft" :style="usercolor">
							<div>
								<i v-if="item.couponTypeId != '4' && item.couponAmount > 0">￥</i>
								<span>{{ item.couponAmount ? item.couponAmount : parseInt(10 - item.discount * 10) + '折' }}</span>
							</div>
							<strong>{{ item.couponName }}</strong>
						</div>
						<div class="rc-right">
							<i :style="usercolor">{{ item.couponDesc }}</i>
							<div class="rc-userfont" :style="item.validTo ? 'visibility:visible' : 'visibility:hidden'">
								<strong>有效期</strong>
								<span>{{ item.validFrom }}</span>
								<span>至</span>
								<em>{{ item.validTo }}</em>
							</div>
							<nuxt-link :to="`/productdetails/productlist`" v-if="item.canUse"><div class="ts-standard-btn">立即使用</div></nuxt-link>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { allConfig, getdraw } from '../../ajax/getData';
import tabs from '@/components/tabs.vue';
import { mapMutations, mapState } from 'vuex';
const EXPIRED = 2;
const UNUSE = 0;
const USED = 1;

export default {
	async asyncData(context) {},
	data() {
		return {
			crumbs: [
				{
					path: '/personal/mypersonal/'
				},
				{
					path: '/personal/discount/'
				}
			],
			userload: true,
			pastdue: false,
			unused: false,
			usercolor: { color: '#e1001a' },
			usermessage: [],
			userstates: 0,
			userimage: require('../../assets/image/unused.png'),
			fullCouponList: [],
			newlist: [],
			discountlist: [
				{
					title: '未使用'
				},
				{
					title: '已使用'
				},
				{
					title: '已过期'
				}
			],

			preferential: [
				{
					price: '30',
					pricestype: '新客优惠券',
					special: '全场每满299-30',
					period: '有效期',
					starttime: '2021.11.29-2022.01.28'
				},
				{
					price: '30',
					pricestype: '新客优惠券',
					special: '全场每满299-30',
					period: '有效期',
					starttime: '2021.11.29-2022.01.28'
				},
				{
					price: '30',
					pricestype: '新客优惠券',
					special: '全场每满299-30',
					period: '有效期',
					starttime: '2021.11.29-2022.01.28'
				}
			],
			userdiscount: [],
			activeIndex: 0
		};
	},
	methods: {
		...mapMutations(['changemessage', 'checkIsLogin']),
		//获取用户领取的优惠券
		async userdraw(mobile) {
			//let curDate = new Date();
			let paramsToAPI = {
				mobile: mobile
				//useStartDate : curDate.getYear()+'-'+curDate.getMonth()+'-'+curDate.getDate(),
				//productCodes : ''
			};
			let data = await getdraw(paramsToAPI);
			let _self = this;
			if (data) {
				let list = [];
				data.data.forEach(function(element, index) {
					element.validFrom = element.validFrom.slice(0, 10);
					element.validTo = element.validTo.slice(0, 10);
					if (element.udf2 && element.udf2 == 'H5') {
						list.push(element);
					}
				});
				this.fullCouponList = list;
				this.selectGoods('', UNUSE);
			}
		},
		selectGoods(item, index) {
			this.activeIndex = index;
			if (this.activeIndex == USED) {
				this.userload = false;
				this.pastdue = true;
				this.userimage = require('../../assets/image/hasused.png');
				this.userstates = 1;
				this.usercolor = { color: 'white' };
				//this.userdraw(this.usermessage.data.mobile,1)
			}
			if (this.activeIndex == UNUSE) {
				this.userload = true;
				this.pastdue = false;
				//this.userdraw(this.usermessage.data.mobile,0)
				this.usercolor = { color: '#e1001a' };
				this.userstates = 0;
				this.userimage = require('../../assets/image/unused.png');
			}
			if (this.activeIndex == EXPIRED) {
				this.userload = false;
				this.pastdue = true;
				//this.userdraw(this.usermessage.data.mobile,2)
				this.userstates = 2;
				this.usercolor = { color: 'white' };
				this.userimage = require('../../assets/image/expired.png');
			}
			this.couponStatusFilter(this.activeIndex);
		},
		couponStatusFilter(status) {
			let curTime = new Date().getTime();
			let valDateFromTime;
			let valDateToTime;
			this.newlist = [];
			status = !status || status > EXPIRED || status < UNUSE ? UNUSE : status;
			for (let coupon of this.fullCouponList) {
				switch (status) {
					case EXPIRED:
						if (coupon) {
							if (coupon.fValidTo) {
								valDateToTime = new Date(coupon.fValidTo).getTime();
							}
							if (curTime > valDateToTime && coupon.status == 0) {
								coupon.canUse = false;
								this.newlist.push(coupon);
							}
						}
						break;
					case UNUSE:
						if (coupon.fValidFrom) {
							valDateFromTime = new Date(coupon.fValidFrom).getTime();
						}
						if (coupon.fValidTo) {
							valDateToTime = new Date(coupon.fValidTo).getTime();
						}
						/*
					if(valDateFromTime && valDateToTime && curTime >= valDateFromTime && curTime <= valDateToTime && coupon.status == 0) {
						coupon.canUse=true;
						this.newlist.push(coupon);
					}
					*/
						if (valDateToTime && curTime <= valDateToTime && coupon.status == 0) {
							coupon.canUse = true;
							this.newlist.push(coupon);
						}
						break;
					case USED:
						if (coupon.status == 1) {
							coupon.canUse = false;
							this.newlist.push(coupon);
						}
						break;
				}
			}
		},
		usertiao() {
			this.$router.push({ name: 'productdetails-productlist' });
		}
	},

	directives: {
		color: {
			bind: function(el, binding) {
				el.style.color = binding.value;
			},
			inserted: function(el) {}
		}
	},
	mounted() {
		if (this.loginState) {
			this.usermessage = this.userInfo;
			this.userInfo && this.userdraw(this.userInfo.mobile);
		} else {
			this.$router.push({ path: '/userlogin/login' });
		}
		// this.checkIsLogin();
		// this.usermessage = this.$store.state.userInfo;
		// if (!this.usermessage) {
		//
		// }
		// this.userdraw(this.usermessage.data.mobile);
	},
	watch: {
		userInfo(newVal) {
			if (newVal && this.loginState) {
				this.usermessage = newVal;
				this.userInfo && this.userdraw(this.usermessage.mobile);
			}
		}
	},
	components: {
		Myheader,
		tabs
	},
	computed: {
		...mapState({
			loginState: state => state.login.loginState,
			userInfo: state => state.user.userInfo
		})
	}
};
import Myheader from '~/components/header.vue';
</script>

<style lang="less" scoped>
// 手机端
@import url('../../assets/css/discount.less');
</style>