pay.vue支付页面 优惠券功能

<template>
    <div id="pay" class="has-top">
        <template v-if="listExist===1">
            <router-link :to="{path: '/address/select'}" class="address-selector" tag="div">
                <div class="address-item single has-follow" v-if="address">
                    <div class="base-info">
                        <div class="contact">收货人：{{address.contact}}</div>
                        <div class="phone">{{address.phone}}</div>
                    </div>
                    <div class="detail">收货地址：{{address.provinceName + address.cityName + address.districtName + address.detail}}</div>
                </div>
                <div class="address-placeholder has-follow color-red"  v-else>请选择收货地址</div>
            </router-link>
            <div class="identity-card mt10 bordre-top-bottom" v-if="address && isGlobalBuy">
                <template v-if="!isEditMode">
                    <input class="input" maxlength="18" type="text" placeholder="因海关清关需要，请填写收货人的身份证号" v-model="identityCard" />
                    <div class="btn-clear" v-if="identityCard" @click="identityCard=''"></div>
                    <div class="btn-save" @click="saveIdentityCard()">保存</div>
                </template>
                <div class="cell-line" v-else>
                    <div class="label">身份证号</div>
                    <div class="value">{{address.identityCard|maskIdCard}}</div>
                    <div class="icon-edit" @click.stop="isEditMode = true"></div>
                </div>
            </div>
            <div class="order-store mt10" v-for="store in list" :key="store.storeId">
                <!--<div class="order-store-header">{{store.storeName}}</div>-->
                <div class="order-store-body">
                    <div class="cart-item-box" v-for="item in store.skuProductList" :key="item.skuId">
                        <div class="cart-item">
                            <!-- <div class="discount" v-if="item.discountStatus"></div> -->
                            <v-image :src="item.thumbUrl" class="thumb" />
                            <div class="item-detail">
                                <div class="title">{{item.skuName}}</div>
                                <div class="desc">{{item.property||item.properties}}</div>

                                <div class="price" v-if="isGroup">{{item.groupSkuInfo.groupPrice | currency}}<span class="amount">&times; {{item.quantity}}</span></div>
                                <div class="price" v-else>
                                    <!-- <template v-if="item.flashSaleFlag==1">¥{{item.flashSaleSkuDTO.activityPrice | currency}}</template> -->
                                    <template>¥{{item.retailPrice | currency}}</template>
                                    <span class="amount">&times; {{item.quantity}}</span>
                                </div>
                                <!-- <div class="price" v-else>{{item.marketPrice | currency}}<span class="amount">&times; {{item.quantity}}</span></div> --></div>
                          </div>
                          <div class="cell-line">
                            <div class="label"></div>
                            <div class="value">小计：
                                <!-- <span class="color-red" v-if="item.flashSaleFlag==1">¥{{item.flashSaleSkuDTO.activityPrice*item.quantity | currency}}</span> -->
                                <span class="color-red">¥{{item.retailPrice*item.quantity | currency}}</span>
                            </div>
                          </div>
                        <!-- <div class="gift-box" v-if="item.presents.length > 0"> -->
                        <div class="gift-box">
                            <div class="label">赠品</div>
                            <div class="gift-list">
                                <div class="gift-item" v-for="present in item.presents" :key="present.skuId">
                                    <div class="title">{{present.skuName}}</div>
                                    <div class="amount">&times; {{present.quantity}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="order-store-footer">

                </div>
            </div>
            <div class="pay-section">
                <div class="cell-line">
                    <div class="label">买家留言：</div>
                    <div class="value flex999">
                        <textarea class="mint-field-core remark" placeholder="选填，给商家的留言（50字以内）" v-model="remark" maxlength="50" id="buyer-message"></textarea>
                    </div>
                </div>
            </div>
            <div class="pay-section">
                <div class="cell-line">
                    <div class="label">运费</div>
                    <template v-if="address">
                        <div class="value color-red" v-if="freight>0">{{freight | currency}}</div>
                        <div class="value" v-else>包邮</div>
                    </template>
                    <div class="value color-gray" v-else>运费根据收货地址计算</div>
                </div>
                <div class="cell-line">
                    <div class="label">会员折扣</div>
                    <!-- <div class="value color-red" v-if="discountTotal > 0">¥{{-discountTotal|currency}}</div> -->
                    <div class="value color-gray">无会员折扣</div>
                </div>
                <div @click="selectCoupon()" class="cell-line has-follow">
                    <div class="label">优惠券</div>ii
                    <div v-if="couponlist.length">
                        <div class="value color-red" v-if="currentCoup.reducedPrice">-¥{{currentCoup.reducedPrice | currency}}</div>
                        <div class="value color-red" v-else>请选择优惠券</div>
                    </div>
                    <div v-else>''
                        <div class="value color-red">无可用优惠券</div>
                    </div>
                    

                    <!-- <div class="value gray" :class="{'color-red': hasCoupon, 'color-gray': isGroup}" v-if="!coupon || (coupon && !coupon.couponId)">{{couponText}}</div>
                    <div class="value color-red" v-else>{{-coupon.cost | currency}}</div> -->
                </div>
                <div class="payway">
                    <div class="title">选择支付方式</div>
                    <div class="payway-list">
                        <div class="item" v-for="item in payways" :key="item.id" @click.stop="selectPayWay(item)" v-show="(item.id==='wepay')">
                            <img :src="item.icon" class="icon">
                            <div class="name">{{item.name}}</div>
                            <div class="selector" :class="{'selected':item.id === payway.id}" ></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom pay-bottom">
                <div class="content"> 合计：<span class="color-red">¥{{total| currency}}</span> </div>
                <div class="btn" :class="{'disabled': products.length === 0}" @click="payNow()">确认付款</div>
            </div>
            <mt-popup
            v-model="popup"
            position="bottom">
            <div class="w1125">
                <h2>优惠券
                    <img @click="closeCoup()" src="../../assets/images/coupon/coupon_close.png" alt="" srcset="">
                </h2>
                <p>金额门槛仅为商品总价，不含运费哦</p>
                <div class="coupon-list">
                    <ul>
                        <li :class="item.btmFlag ? 'active' : ''" v-for="(item,index) in couponlist" v-bind:key="index">
                        <div class="top">
                            <div class="leftBox">
                            <p class="price">
                                <span>{{item.reducedPrice | currency}}</span> 
                                <b>元</b>
                            </p>
                            <div class="range">
                                {{item.conditions == 0 ? '无门槛' : `满¥${item.conditions/100}使用`}}
                            </div>
                            </div>
                            <div class="rightArea">
                            <h2>{{item.title}}</h2>
                            <div class="tips">
                                <ul>
                                <li>{{item.label}}</li>
                                </ul>
                            </div>
                            <p @click="changeCoupon(item.btmFlag,item)">
                                <span class="icon" v-if="item.btmFlag"><img src="../../assets/images/coupon/icon1.png" alt="" srcset=""></span>
                                <span class="icon" v-else><img src="../../assets/images/coupon/icon2.png" alt="" srcset=""></span>
                                有效期至{{item.endDate}}
                            </p>
                            </div>
                        </div>

                        </li>
                    </ul>
                </div>
            </div>
            </mt-popup>
            <div class="pay-shadow" v-show="confirmFlag || tipsFlag" @click="closeAll"></div>
            <div class="pay-confirm" v-show="confirmFlag">
                <div class="title">
                    购买跨境商品需实名认证
                </div>
                <p class="tip" @click="tipsShow">海关要求?</p>
                <ul>
                    <li> <span>姓名</span> <input type="text" placeholder="请输入收货人姓名"></li>
                    <li> <span>身份证号</span> <input type="text" placeholder="请输入身份证号"></li>
                </ul>
                <p class="notice">*请填写收货人的真是姓名和身份证号</p>
                <div class="btn">提交验证</div>
            </div>
            <div class="pay-tips" v-show="tipsFlag">
                <div class="title">
                    为什么需要实名认证?
                </div>
                <ol>
                    <li>根据海关要求，购买跨境商品需对订购人进行实名认证。</li>
                    <li>错误的实名信息可能导致无法正常清关，即：无法收到购买的商品。</li>
                    <li>如您的跨境购个人额度超限，可能导致订单被退回，我们将为您取消订单。</li>
                    <li>您的身份信息将被加密保管，店多多保证信息安全，绝不对外泄露！</li>
                    <li>任何身份认证问题可随时联系店多多客服。</li>
                </ol>
                <div class="btn" @click="know">知道了</div>
            </div>
        </template>
    </div>
</template>
<script type="text/javascript">
import Config from '@/config'
import AddressService from '@/services/AddressService'
import CartService from '@/services/CartService'
import CouponService from '@/services/CouponService'
import FreightService from '@/services/FreightService'
import OrderService from '@/services/OrderService'
import PayService from '@/services/PayService'
import ProductService from '@/services/ProductService'
import UserService from '@/services/UserService'
import PayFactory from '@/pay/PayFactory'
import axios from 'axios'
import qs from 'qs'
// import CouponService from '../../services/CouponService.js';

export default {
    data() {
        return {
            payways: [],
            freight: 0,
            list: [],
            listExist:'',
            products: [],
            defaultAddress: undefined,
            coupon: undefined,
            address: undefined,
            remark: '',
            userProfit: {},
            hasCoupon: false,
            userInfo: {},
            discountLevel: -1,
            identityCard: '',
            isEditMode: true,
            isGroup: false,
            hasPassword: false,
            orderCode: '',
            productType:0,
            confirmFlag: false,
            tipsFlag: false,
            popup: false,
            couponlist: [],
            currentCoup: {}
        }
    },
    computed: {
        //海关
        isGlobalBuy() {
            return this.list.filter((store) => {
                return store.skuProductList.filter(item => item.isCross === 1).length > 0
            }).length > 0
        },
        // 原始产品总价格
        orginalProductTotal() {
            let sum = 0;
            this.list.forEach((store) => {
                store.skuProductList.forEach(item => {
                    console.log(this.isGroup);
                    //let price = this.isGroup ? item.groupSkuInfo.groupPrice : item.currentVipTypePrice
                    let price = this.isGroup ? item.groupSkuInfo.groupPrice : item.retailPrice
                    if (item.productType === 3) {
                        price = item.retailPrice;
                    }
                    console.log(price);
                    sum += price * item.quantity;
                });
            });
            return sum;
        },
        storeTotal(){
            let sum = 0;
            this.list.forEach((store) => {
                store.skuProductList.forEach(item => {
                    //let price = this.isGroup ? item.groupSkuInfo.groupPrice : item.currentVipTypePrice
                    let price = this.isGroup ? item.groupSkuInfo.groupPrice : item.retailPrice
                    if (item.productType === 3) {
                        price = item.retailPrice;
                    }
                    // if(item.flashSaleFlag==1){//代表限时抢购得商品
                    //     price=item.flashSaleSkuDTO.activityPrice;
                    // }
                    sum += price * item.quantity;
                });
            });
            return sum;
        },
        //产品总价格
        orginalTotal() {
            let sum = this.orginalProductTotal;
            
            // if (this.coupon && this.coupon.couponId) {
            //     sum -= this.coupon.cost;
            // }
            if (this.currentCoup && this.currentCoup.reducedPrice) {

                sum -= this.currentCoup.reducedPrice;
            }

            return (sum >= 0) ? sum : 0;
        },
        //产品合计（产品总价+运费）
        total() {

            return this.orginalTotal + parseFloat(this.freight)
        },
        //优惠券
        couponText() {
            if (this.isGroup) {
                return '无可用优惠券';
            }
            return this.hasCoupon ? '有可用优惠券' : '无可用优惠券';
        },
        //折扣总价
        discountTotal (){
            let sum = 0;
            this.list.forEach((store) => {
                store.skuProductList.forEach(item => {
                    let currentPrice = item.productType == 3 ? item.retailPrice : item.currentVipTypePrice
                    sum += (item.retailPrice - currentPrice) * item.quantity
                    // if(item.flashSaleFlag==1){
                    //     let currentPrice = item.currentVipTypePrice
                    //     sum += (item.flashSaleSkuDTO.activityPrice - currentPrice) * item.quantity
                    // }else{
                    //     let currentPrice = item.productType == 3 ? item.retailPrice : item.currentVipTypePrice
                    //     sum += (item.retailPrice - currentPrice) * item.quantity
                    // }
                })
            });
            return sum;
        }
    },
    methods: {
        /**
         *@desc   获取支付方式
         *@author zwn
         *@date 2018/10/12
         */
        getPayTypeList() {
            PayService.getPayWays(this, this.userProfit.availableMoney, (payways) => {
                this.payways = payways;
                if (this.payways.length > 0) {
                    this.payway = this.payways[0]
                }
            });
        },
        onBack() {
            this.$destroy();
            this.$router.back()
        },
        /**
         *@desc   获取优惠券
         *@author zwn
         *@date 2018/10/12
         */
        getCouponForOrder(products) {
            if (!products) {
                products = []
            }
            CouponService.getCouponsForOrder(this, products, (list) => {
                this.hasCoupon = list.length > 0
            })
        },
        selectPayWay(item) {
            this.payway = item;
            this.payway.id=item.id;
            this.$set(this.payway,0,item);
        },
        /**
         *@desc  获所有取商品列表信息
         *@author zwn
         *@date 2018/10/11
         */
        getListBySkuIds(skuIds) {
            this.products = [];
            CartService.getListBySkuIds(this, skuIds, (list) => {
                this.list = list;
                (this.list.length>0)? this.listExist=1:this.listExist=0;
                this.list.forEach(store => {
                    store.skuProductList.forEach(item => {
                        let activityType=1;//默认无活动
                        if(item.flashSaleFlag==0){
                            activityType=1
                        }else{
                            activityType=2
                        }
                        this.products.push({ skuId: item.skuId, quantity: item.quantity ,activityType:activityType,flashSaleId:item.flashSaleId});
                    });
                });
                this.checkIfHasCoupon(this.products);
            })
        },
        /**
         *@desc  获单个取商品列表信息
         *@author zwn
         *@date 2018/10/11
         */
        getListBySkuId(skuId, amount) {
            var that=this;
            ProductService.getSkuById(this, skuId, (skuInfo) => {
                ProductService.getProductInfoById(this, skuInfo.productId, (product) => {
                    skuInfo.quantity = amount;
                    skuInfo.productType = product.type;
                    this.$set(skuInfo, 'flashSaleSkuDTO', {})
                    this.$set(skuInfo.flashSaleSkuDTO, 'activityPrice', skuInfo.flashSaleSku.activityPrice)
                    this.productType=product.type
                    // var nowPrice=skuInfo.retailPrice
                    // if(skuInfo.flashSaleFlag==1){
                    //     nowPrice=skuInfo.flashSaleSku.activityPrice
                    // }
                    let store = {
                        storeId: skuInfo.storeId,
                        skuName: skuInfo.storeName,
                        total: skuInfo.retailPrice * skuInfo.quantity,
                        //total: nowPrice * skuInfo.quantity,
                        hasCoupon: skuInfo.hasCoupon,//优惠券
                        skuProductList: [skuInfo]
                    };
                    if (this.isGroup) {
                        store.total = skuInfo.groupSkuInfo.groupPrice * skuInfo.quantity;
                    } else {
                        store.total = (skuInfo.productType == 3 ? skuInfo.retailPrice : skuInfo.currentVipTypePrice) * skuInfo.quantity
                        //store.total = (skuInfo.productType == 3 ? nowPrice : skuInfo.currentVipTypePrice) * skuInfo.quantity
                    }
                    
                    that.list.push(store);
                    if(that.list.length >0){
                       this.listExist=1
                    }else{
                       that.listExist=0;
                    }  
                    var activityType=1;//默认是无活动
                    if(product.flashSaleFlag==0){
                        activityType=1
                    }else{
                        activityType=2
                    }
                    this.products = [{ skuId: skuInfo.skuId, quantity: amount,activityType:activityType,flashSaleId:product.flashSaleDetail.flashSaleId}];
                    this.getCoupon()
                })
            })
        },

        checkIfHasCoupon(products) {
            // OrderService.setProducts(this, products, () => {
            //     this.getCouponForOrder(products)
            // })
        },
        /**
         *@desc   获取运费
         *@author zwn
         *@date 2018/10/12
         */
        getFreight() {
            if (this.address && this.list.length > 0) {
                if (this.address.identityCard) {
                    this.identityCard = this.address.identityCard;
                }
                FreightService.calculate(this, this.address.addressId, this.products, Number(this.isGroup), (res) => {
                    if(res.freight){
                        this.freight =res.freight===0?1:res.freight;
                    }
                })
            }
        },
        closeAll() {
            this.confirmFlag = false
            this.tipsFlag = false
        },
        know() {
            this.tipsFlag = false
        },
        tipsShow() {
            this.tipsFlag = true
        },
        payNow() {
            if (!this.address) {
                this.showError('请选择收货地址');
                return
            }
            if (this.products.length === 0) {
                this.showError('没有要购买的产品');
                return
            }
            if (this.isGlobalBuy && (!this.identityCard || this.isEditMode)) {
                this.showError('请先填写并保存收件人的身份证信息');
                return
            }
            // 零钱包支付
            if (this.payway.id === 'balance') {
                this.checkPassword();
                if (!this.hasPassword) {
                    return false
                }
                if (!this.userInfo.phone) {
                    this.showError('零钱包支付必须绑定手机号');
                    return
                }
                if (this.total > this.userProfit.availableMoney) {
                    this.showError('零钱不足');
                    return
                }
            }
            // // 全球购逻辑代码
            // if (1==1) {
            //     this.confirmFlag = true
            //     return
            // }
            if (this.isGroup) {
                this.mkGroupOrder();
            } else {
                this.mkOrder();
            }
        },
        checkPassword() {
            if (!this.hasPassword) {
                let toast = Config.toast.find(item => item.id === 'noLogin')
                this.showConfirms(toast.title, toast.message, () => {
                    this.$router.push({
                        path: '/find-password',
                        query: {
                            redirect: location.pathname + location.search,
                            set: true
                        }
                    })
                }, null, '去设置', '取消');
                return
            }
        },

        mkGroupOrder() {
            let params = {
                addressId: this.address.addressId,
                products: this.products,
                remark: this.remark || '',
                couponId: this.coupon ? this.coupon.couponId : '',
                score: 0
            };
            params.groupCode = this.$route.query.groupCode || '';
            let productType=this.productType;
            OrderService.addGroupOrder(this, params, (res) => {
                if (res.orderId) {
                    this.orderCode = res.orderCode;
                    PayFactory.pay(this, this.payway, 'pay.normal',  this.orderCode, this.total,productType);
                }
            })
        },
        //创建订单
        mkOrder() {
            let params = {
                addressId: this.address.addressId,
                products: this.products,
                orderFrom: 3,
                remark: this.remark || '',
                couponId: this.coupon ? this.coupon.couponId : '',
                score: 0,
            };
            if(this.$route.query.skuIds){
                params.fromCart=1;
            }else{
                params.fromCart=0;
            }
            let productType=this.productType;
            OrderService.createOrder(this, params,(orderInfo) => {
                this.orderCode = orderInfo.orderCode;
                PayFactory.pay(this, this.payway, 'pay.normal',  this.orderCode, this.total,productType);
            });
        },

        buildParams() {
            return {
                addressId: this.address.addressId,
                products: this.products,
                remark: this.remark || '',
                couponId: this.coupon ? this.coupon.couponId : '',
                score: 0
            }
        },
        init() {
            //购物车结算支付
            if (this.$route.params.from === 'cart') {
                let skuIds = this.$route.query.skuIds;
                if (skuIds) {
                    this.getListBySkuIds(skuIds);
                } else {
                    this.showError('没有要购买的产品')
                }
            } else {
                //商品详情结算支付
                if (this.$route.query.skuId) {

                    this.skuId=this.$route.query.skuId;
                    this.getListBySkuId(this.$route.query.skuId,this.$route.query.amount)
                } else {
                    this.showError('没有要购买的产品');
                }
            }
        },
        /**
         *@desc  优惠券
         *@author zwn
         *@date 2018/10/12
         */
        getCoupon() {
            CouponService.getUseableList(this,sessionStorage.getItem('memberId'),this.products, data => {
                console.log(data);
                if (data.data.length) {
                    for (let i = 0; i <  data.data.length; i++) {
                        this.$set(data.data[i],'btmFlag',false)
                        
                    }
                    this.couponlist = data.data;
                    
                }
                
            });
        },
        closeCoup() {
            this.popup = false
        },
        selectCoupon() {
            this.popup = true
            // if (this.isGroup) {
            //     return 0
            // }else{
            //     CouponService.getUseableList(this,sessionStorage.getItem('memberId'),this.products, data => {
            //         console.log(data);
            //         if (data.data.length) {
            //             for (let i = 0; i <  data.data.length; i++) {
            //                 this.$set(data.data[i],'btmFlag',false)
                            
            //             }
            //             this.couponlist = data.data;
            //             this.popup = true
            //         }else {
            //             this.couponlist = {};
            //         }
                    
            //     });
                
            //     // this.$router.push({ path: '/coupon/select' });
            //     // OrderService.setProducts(this, this.products, () => {
            //     //     this.$router.push({ path: '/coupon/select' })
            //     // })
            // }
        },
        changeCoupon(flag,item) {
            this.couponlist.forEach((i,v)=> {
                i.btmFlag = false
            })
            this.$set(item,'btmFlag',!flag)
            if (flag) {
                
                this.currentCoup = {}
            }else {
                
                this.currentCoup = item
            }
            
            // this.popup = false
        },
        /**
         *@desc 保存身份证号
         *@author zwn
         *@date 2018/10/12
         */
        saveIdentityCard() {
            if (!this.identityCard) {
                this.showError('请输入身份证号');
                return
            }
            AddressService.saveIdentityCard(this, this.address.addressId, this.identityCard, () => {
                this.showMessage('保存成功');
                this.address.identityCard = this.identityCard;
                this.isEditMode = false;
            })
        },
        loadAddress() {
            /**
             *@desc  获取默认地址
             *@author sky
             *@date 2018/10/12
             */
            AddressService.getDefault(this, (address) => {
                this.address = address;
                this.address = address.addressId ? address : undefined;
                this.isEditMode = this.address ? !this.address.identityCard : true;
            },error => {});
        }
    },
    watch: {
        'address': 'getFreight',
        'list': 'getFreight'
    },
    created() {
        
        this.getPayTypeList();
        this.$root.$on('user.info.update', (userInfo) => {
            this.userInfo = userInfo;
        });
        this.$root.$on('user.profit.update', (userProfit) => {
            this.userProfit = userProfit;
            this.getPayTypeList();
        });
        this.$root.$on('pay.normal', (status, message) => {
            this.$destroy();
            this.$router.replace({ path: `/order/detail/${this.orderCode}`})
        });
        UserService.checkLogin(this, () => {
            UserService.getProfit(this,(userProfit)=>{
                this.userProfit = userProfit;
            });
        });
        this.address=JSON.parse(sessionStorage.getItem("selectAddress"));
        if(!sessionStorage.getItem("selectAddress")){
            this.loadAddress();//获取默认收货地址
        }
    },
    activated() {
        UserService.checkPassword(this, (res) => {
            if (res.code === 1) {
                this.hasPassword = true
            }
        });
        if (this.$route.query.action && this.$route.query.action.indexOf('group-buy') > -1) {
            this.isGroup = true;
        }
        CouponService.getSelectedCoupon(this, (coupon) => this.coupon = coupon);
    },
    mounted() {
        this.init();

    }
}
</script>