1hjz-h5/src/view/month-card.vue

<template>
 <div class="">
        <div class="m-slider">
            <img src="../assets/images/slider-img.png" width="100%" height="100%" alt="">
        </div>

        <div class="month-card-title f-text-center">
            <h4 class="">{{getData.goodsName}}</h4>
            <p class="f-mt5">{{getData.shortDesc}}</p>
            <p class="f-price f-mt10 f-flex justify-center">
                <span class="s-gray f-mr15">市场价 : &nbsp;<span class="line-through">￥{{getData.originalPrice | numFilter}}</span></span>
                <span>券后价 : </span><span class="f-font-23 s-red">￥{{getData.couponPrice | numFilter}}</span>
            </p>
        </div>

            <div class="month-card-area">
                <div class="month-card f-flex" style="margin-bottom: -35px;">
                    <div class="month-card-left" style="width: 76%;">                        
                        <div class="f-flex f-mt9">
                            <div class="f-mb20 f-mr10">
                                <p v-show="getData.type != 3" class="f-font-15" style="line-height:1;">￥</p>
                                <!-- 定额券 -->
                                <div v-show="getData.type == 1" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{getData.amount | numFilter}}</div>
                                <!-- 满减券 -->
                                <div v-show="getData.type == 2" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{getData.amount | numFilter}}</div>
                                <!-- 折扣 -->
                                <div v-show="getData.type == 3" class="f-bold f-font-45" style="text-shadow: 1px 1px #852B0E;">{{Number(getData.discount/10)}}折</div>
                                
                                <!-- 定额券 -->
                                <p v-show="getData.type != 2" class="f-font-12 f-mt5" style="margin-left: 6px;">{{couponType[getData.type]}}</p>

                                <!-- 满减券 -->
                                <p v-show="getData.type == 2" class="f-font-12 f-mt5" style="margin-left: 6px;">满{{getData.fullAmount | numFilter}}可用</p>
                            </div>
                            <div class="f-mb20">
                                <p class="new-man">{{getData.batchName}}</p>
                                <p class="limit-buy">({{getData.goodsDesc}})</p>
                                <p class="end-date">{{getData.invalidTimeDesc}}</p>
                            </div>
                        </div>

                    </div>
                    <div class="month-card-right justify-center" style="margin-left:10px;">
                        <div v-show="getData.couponStatus == 0" class="f-mt-15 f-flex">
                            <img src="../assets/images/arrow-right_03.png" width="7" height="12" alt="" class="f-mr15">
                            <button class="get-btn" v-on:click="handleGetCoupon">点击领取</button>
                        </div>
                        <img v-show="getData.couponStatus > 0" src="../assets/images/get.png" width="60" height="60" alt="" class="f-mt-10">
                    </div>
                </div>
                <div class="f-mt10 f-text-center" v-show="getData.couponStatus > 0">
                    
                    <button style="background-color:#F45252"  v-show="getData.couponStatus != 30" v-on:click="handleUseCoupon" class="btn-md bg-gray s-white f-font-18">立即使用</button>

                    <button v-show="getData.couponStatus == 30" v-on:click="handleUseCoupon" class="btn-md bg-gray s-white f-font-18">已使用</button>
                </div>
                <div style="padding: 0 10px 20px;">
                    <p class="s-gray-1 f-font-11 f-mt20" style="line-height: 18px;">使用范围：{{getData.authAreaStr}}</p>
                    <p class="f-mt10 f-font-11 s-orange-2">
                        使用流程：领券下单→关注公众号→预约服务
                    </p>
                    <div class="f-text-center">
                        <div class="qrcode-img">
                            <img src="../assets/images/qrcode.png" width='100%' height="100%" alt="">
                        </div>
                        <p class="f-font-11 f-mt5 s-black-1">预约服务请关注公众号</p>
                    </div>
                </div>
            </div>


    </div>
</template>

<script>
    import couponModel from '../models/coupon-model';
    import configs from '../configs';
	import { Alert, Toast,Popup,Picker } from "vux";
	
	var strCookie =document.cookie; 
	var cookieName = "1hjz_mall_login_access_token=";
	var token = strCookie.slice(cookieName.length); 

    var locationUrl = configs.locationUrl;

  export default {
    data() {
        return {
            loading: false,
            getData: {},
            couponType: {
                '1': '定额券',
                '2': '满减券',
                '3': '折扣券',
            },
            batchNo: this.$route.query.batchNo,
        };
    },
    components: {
		Toast,
		Popup,
		Picker
	},
    methods: {

        // 初始化
        handleInit() {

            let that = this;

            // 回去优惠券信息
            couponModel.getCouponInfo(that.batchNo, token).then(function (result) {
            //    console.log("xx",result.response);
              	that.loading = false;             
              	if ( result.code == 0 ) {
					if ( result.response.isLogin ){
						that.sourceUser()
					}
                	that.getData = result.response

              	} else {
                	//console.log(result.msg);
                	alert(result.msg);
              	}
            });
            	
        },

        // 立即使用优惠券
        handleUseCoupon() {

            window.location.href = locationUrl + '/mall/web/vgoods/detail/' + this.getData.goodsNo;
        },

        // 领取优惠券
        handleGetCoupon() {
            let that = this;        
                
            this.loading = true;

            let params = {              
                batchNo: that.batchNo                
            };

            // 调用领券接口
            couponModel.giveCoupon(params,token).then(function (result) {
              
                that.loading = false;              
				console.log("信息",result)
				if (result.code === 0 || result.code === 3) {
				    window.history.go(0);
				} else if (result.code === 666) {
				    that.$vux.toast.text("您还没登录，请先登录!","middle");         
				    setTimeout(function () {
				        window.location.href = locationUrl + '/mall/web/user/login?callback=' + encodeURIComponent(window.location.href);
				    }, 1000);
				} else {
				    if (result.msg === '' || result.msg === undefined || result.msg == null) {
				        result.msg = '操作失败，请刷新重试';
				    }
				    alert(result.msg);
				}
            });

      	},
        sourceUser (){
        	var sourceUserId = this.$route.query.sourceUserId
        	if ( sourceUserId ){
        		couponModel.sourceUser(sourceUserId).then(res => {
        			
        		})
        	}
        }
        
    },    
    filters: {
        numFilter(value) {            
            // 截取当前数据到小数点后三位
            let transformVal = Number(value/100).toFixed(1)
            let realVal = transformVal.substring(0, transformVal.length - 1)
            // num.toFixed(3)获取的是字符串
            return Number(realVal)
        }
    },
    mounted() {
        // 初始化
        this.handleInit();
		this.wxShare({"couponNo":this.batchNo,"source":20,"url":encodeURIComponent(location.href)})
    }
  }
</script>
<style>
  body {
    background-color: #FFF3E8;
  }
</style>