支付页面 account。vue

<template>
    <div>
        <flexbox orient="vertical" :gutter="0">
            <flexbox-item>
                <div class="flex-demo">
                    <div>
                        <div class="meal_box">
                            <flexbox :gutter="0" class="select_title">
                                <flexbox-item :span="6">
                                    <button @click="selfMeal" class="selfMeal" :class="{selectSelf:addressType==1}" :disabled="self_mention==0">自助取餐</button>
                                </flexbox-item>
                                <flexbox-item :span="6">
                                    <button @click="deliveryMeal" class="deliveryMeal" :class="{selectDelivery:addressType==2}" :disabled="delivery==0">送货上门</button>
                                </flexbox-item>
                            </flexbox>
                            <flexbox :gutter="0" class="selfDetail" v-if="addressType==1">
                                <flexbox-item :span="1">
                                    <icon name="address" scale="2"></icon>
                                </flexbox-item>
                                <flexbox-item :span="10">
                                    <div>
                                        <p>{{storeName.name}}</p>
                                        <div class="detailAddress">地址：{{storeName.address}}<span class="my_remark">{{storeName.address_detail}}</span></div>
                                    </div>
                                </flexbox-item>
                            </flexbox>

                            <flexbox :gutter="0" class="deliveryDetail" v-if="addressType==2" @click.native="selectAddress">
                                <flexbox-item :span="1">
                                    <icon name="address" scale="2"></icon>
                                </flexbox-item>
                                <flexbox-item :span="10">
                                    <div v-if="addressItem">
                                        <p><span class="my_remark">收货人：{{addressItem.name}}</span></p>
                                        <p><span class="my_remark">手机号：{{addressItem.phone}}</span></p>
                                        <div class="detailAddress">
                                            <span class="my_remark">
                                                收货地址：{{addressItem.address}}{{addressItem.address_detail}}
                                            </span>
                                        </div>
                                    </div>
                                    <div v-else="!addressItem">
                                        请选择地址
                                    </div>
                                </flexbox-item>
                                <flexbox-item :span="1">
                                    <icon name="rightIcon" scale="3"></icon>
                                </flexbox-item>
                            </flexbox>

                        </div>
                    </div>
                </div>
            </flexbox-item>
            <flexbox-item>
                <scroller lock-x height="-295px">
                    <div class="">
                        <div v-for="list of shopCart.items">
                            <shopcart-item :good=item v-for="item of list"></shopcart-item>
                        </div>
                    </div>
                </scroller>
            </flexbox-item>
            <flexbox-item>
                <div class="choose_box">
                    <div class="my_card" @click="selectWechat">
                        <flexbox :gutter="0">
                            <flexbox-item :span="2" class="card_icon">
                                <p class="middle_icon"><icon name="wechatPay" scale="3"></icon></p>
                            </flexbox-item>
                            <flexbox-item :span="8">
                                <p>微信支付</p>
                            </flexbox-item>
                            <flexbox-item :span="2">
                                <p class="middle_icon" v-if="wechatCircle"><x-icon type="ios-circle-outline" size="26"></x-icon></p>
                                <p class="middle_icon" v-if="wechatCheck"><x-icon type="ios-checkmark-outline" size="26"></x-icon></p>
                            </flexbox-item>
                        </flexbox>
                    </div>
                    <div class="my_card" @click="selectMyCard">
                        <flexbox :gutter="0">
                            <flexbox-item :span="2" class="card_icon">
                                <p class="middle_icon"><icon name="cardPay" scale="3"></icon></p>
                            </flexbox-item>
                            <flexbox-item :span="8">
                                <p>消费卡</p>
                            </flexbox-item>
                            <flexbox-item :span="2">
                                <p class="middle_icon" v-if="cardCircle"><x-icon type="ios-circle-outline" size="26"></x-icon></p>
                                <p class="middle_icon" v-if="cardCheck"><x-icon type="ios-checkmark-outline" size="26"></x-icon></p>
                            </flexbox-item>
                        </flexbox>
                    </div>

                    <div class="blank_box"></div>
                </div>
                <popup v-model="chooseThisCard" position="bottom" max-height="50%">
                    <h4 class="card_title">请选择卡片</h4>
                    <div v-for="(item,index) in cardInfo" class="card_item" @click="cardSelected(index,item)">
                        <flexbox :gutter="0">
                            <flexbox-item :span="2">
                                <div class="card_one_item">
                                    <icon name="cardPay" scale="3"></icon>
                                </div>
                            </flexbox-item>
                            <flexbox-item :span="8">
                                <p>{{item.name}} <span>（{{item.card_code}}）</span></p>
                            </flexbox-item>
                            <flexbox-item :span="2">
                                <p class="selected" v-if="showIcon(index)"><x-icon type="ios-checkmark-outline" size="30"></x-icon></p>
                                <p v-if="otherCard(index)"><x-icon type="ios-circle-outline" size="30"></x-icon></p>
                            </flexbox-item>
                        </flexbox>
                    </div>
                </popup>
            </flexbox-item>
            <flexbox-item>
                <div class="flex-demo menu-bottom" >
                    <flexbox :gutter="0" class="bottom_order">
                        <flexbox-item :span="9">
                            <div class="money_box">
                                合计：<span class="order_money">￥{{shopCart.totalMoney}}</span>
                            </div>
                        </flexbox-item>
                        <flexbox-item :span="3">
                            <div class="payOrder" @click="payOrder">去支付</div>
                        </flexbox-item>
                    </flexbox>
                </div>
            </flexbox-item>
        </flexbox>
    </div>

</template>

<script>
    import { mapGetters } from 'vuex'
    import {Shopcart,ShopcartItem} from "../shopcart"
    import { Cell, Group,Popup,Flexbox, FlexboxItem, Scroller,XButton,XHeader,Selector} from 'vux'
    export default {
        data() {
            return {
                wechatCheck:true,
                wechatCircle:false,
                cardCheck:false,
                cardCircle:true,
                chooseThisCard:false,
                orderNo:'',
                addressItem:'',
                payType:1,
            }
        },
        computed: {
            ...mapGetters([
                'shopCart',
                "storeCardInfo",
                "storeName",
                "addressType",
                "delivery",
                "self_mention",
            ]),
        },
        created(){
            this.getStorage()
            this.wechatConfig()
            this.getDefaultAddress()
            if(!this.storeCardInfo){
                this.getCardInfo()
            }else{
             this.cardInfo=this.storeCardInfo
            }
            if(!_global.customerId){
                let $this=this
                setTimeout(()=>{
                    this.$vux.toast.show({
                        text: "新用户请绑定手机号",
                        type:'cancel',
                        onHide(){
                            $this.$router.push({path:"/binding"})
                        }
                    },1000)
                })
            }
        },
        methods: {
            getStorage(){
                let cartStorage = JSON.parse(window.sessionStorage.getItem('shopCart'))
                let storeStorage = JSON.parse(window.sessionStorage.getItem('storeName'))
                let deliveryStorage = JSON.parse(window.sessionStorage.getItem('delivery'))
                let selfStorage = JSON.parse(window.sessionStorage.getItem('self_mention'))
                let addressTypeStorage = JSON.parse(window.sessionStorage.getItem('addressType'))
                if(cartStorage){
                    this.$store.commit("saveShopCart",cartStorage)
                }
                if(storeStorage){
                    this.$store.commit("storageStore",storeStorage)
                }
                if(deliveryStorage){
                    this.$store.commit("delivery",deliveryStorage)
                }
                if(selfStorage){
                    this.$store.commit("selfMention",selfStorage)
                }
                if(addressTypeStorage){
                    this.$store.commit("saveAddressType",addressTypeStorage)
                }
            },
            getDefaultAddress(){
                this.$http.get('/shop/api/get-default-address',{
                    params:{
                        customerId:_global.customerId
                    }
                }).then((response) => {
                    if(response.data.status){
                        this.addressItem=response.data.data
                    }
                }).catch((error)=>{
                    this.$vux.toast.show({
                        text: "网络异常",
                        type: 'cancel'
                    })
                })
            },
            getCardInfo(){
                this.$http.get('/shop/api/get-wx-user-customer',{
                    params:{
                        customerId:_global.customerId
                    }
                }).then((response) => {
                    if(response.data.status){
                        this.cardInfo=response.data.data;
                        this.$store.commit('saveMyCard',this.cardInfo);
                    }else{
                        this.$store.commit('saveMyCard',{});
                    }
                }).catch((error)=>{
                    this.$vux.toast.show({
                        text: "网络异常",
                        type: 'cancel'
                    })
                })
            },
            selfMeal(){
                this.$store.commit('saveAddressType',1);
            },
            deliveryMeal(){
                    this.$store.commit('saveAddressType',2);
            },

            selectAddress(){
                this.$router.push({ name: 'addressList', params: {clickStatus: 1}})
            },
            /**选择微信&&消费卡的function */
            selectMyCard(){
                this.wechatCheck=false;
                this.wechatCircle=true;
                this.chooseThisCard=true;
            },
            selectWechat(){
                this.wechatCheck=true;
                this.wechatCircle=false;
                this.cardCheck=false;
                this.cardCircle=true;
                this.payType=1;
            },
            /** 选择消费卡的function */
            cardSelected(index,item){
                this.cardIndex=index;
                this.chooseThisCard=false;
                this.cardCheck=true;
                this.cardCircle=false;
                this.currentItem=item;
                this.payType=2;
            },
            showIcon(index){
                if(index === this.cardIndex){
                    return true
                }else {
                    return false;
                }
            },
            otherCard(index){
                if(index === this.cardIndex){
                    return false
                }else {
                    return true;
                }
            },
            /** 下面是跟支付有关的function*/
            wechatConfig() {
                let urls = location.href.split('#')[0]
                let postData={
                    url:urls,
                    mallId:_global.mallId
                }
                this.$http.post('/shop/api/js-sdk-config', postData).then((response) => {
                    if (response.status === 200 && response.data.status === 1) {
                        this.$wechat.config(JSON.parse(response.data.data))
                    } else {
                        this.$vux.toast.show({
                            text: '微信参数错误',
                            type: 'cancel'
                        })
                    }
                }).catch(() => {
                    this.$vux.toast.show({
                        text: "网络异常",
                        type: 'cancel'
                    })
                })
            },
            validate(){
                if(this.shopCart.num ==0 ){
                    return { code : 'error', msg: '您还没有购买商品~'}
                }
                if(!this.addressItem&&this.addressType=='2'){
                    return { code : 'error', msg: '请选择收货地址'}
                }
                if(!this.storeName&&this.addressType=='1'){
                    return { code : 'error', msg: '请选择收货地址'}
                }
                return {code :'success'}
            },
            payOrder(){
                let validResult=this.validate()
                if(validResult.code ==='error'){
                    this.$vux.toast.show({
                        text: validResult.msg,
                        type: 'cancel'
                    })
                    return false
                }
                var  postAddress
                if(this.addressType==1){
                    postAddress=this.storeName
                }else{
                    postAddress=this.addressItem
                }
                let orderInfo={
                    shopCart:this.shopCart,
                    address:postAddress.id,
                    mallId:_global.mallId,
                    customerId:_global.customerId,
                    type:this.addressType,
                }
                this.$http.post('/shop/api/create-order',orderInfo).then((response) => {
                    if(response.data.status){
                        this.orderNo=response.data.data
                        if(this.payType==2){
                            this.cardPay()
                        }else{
                            this.getWxApi()
                        }
                    }else{
                        this.$vux.toast.show({
                            text: response.data.message,
                            type:'cancel'
                        })
                    }
                }).catch((error)=>{
                    this.$vux.toast.show({
                        text: "网络异常",
                        type: 'cancel'
                    })
                })
            },
            cardPay(){
                let postCard={
                    type:1,
                    orderNo:this.orderNo,
                    cardCode:this.currentItem.card_code,
                    customerId:_global.customerId,
                    totalAmount:this.shopCart.totalMoney,
                }
                this.$http.post('/shop/api/pay-order',postCard).then((response) => {
                    if(response.data.status){
                        this.$store.dispatch("emptyCart")
                        this.$store.commit("saveItemIndex",'2')
                        this.$store.commit("savePayType",'2')
                        let $this=this
                        this.$vux.toast.show({
                            text: '支付成功',
                            type: 'success',
                            onHide(){
                                $this.$router.push({path:'/orderList'})
                            }
                        })
                    }else{
                        this.$vux.toast.show({
                            text: response.data.message,
                        })
                    }
                }).catch((error)=>{
                    this.$vux.toast.show({
                        text: "网络异常",
                        type:'cancel'
                    })
                })
            },
            wechatPay(config) {
                let $this= this
                this.$wechat.chooseWXPay({
                    timestamp: config.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                    nonceStr: config.nonceStr, // 支付签名随机串，不长于 32 位
                    package: config.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                    signType: config.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                    paySign: config.paySign, // 支付签名
                    appId:config.appId,
                    success: function (response) {
                        // 支付成功后的回调函数
                        $this.$store.dispatch("emptyCart")
                        $this.$store.commit("saveItemIndex",'2')
                        $this.$store.commit("savePayType",'1')
                        $this.$vux.toast.show({
                            text: '支付成功',
                            type: 'success',
                            onHide(){
                                $this.$router.push({path:'/orderList'})
                            }
                        })
                    },
                    cancel: function (re) {
                        $this.$vux.toast.show({
                            text: '支付已取消',
                            type: 'cancel'
                        })
                    }
                });
            },
            getWxApi(){
                this.$http.post('/shop/api/wx-pay',{orderNo:this.orderNo}).then((response) => {
                    if(response.data.status){
                        this.wechatPay(response.data.data)
                    }else{
                        this.$vux.toast.show({
                            text: response.data.message,
                            type:'cancel'
                        })
                    }
                }).catch((error)=>{
                    this.$vux.toast.show({
                        text: "网络异常",
                        type:'cancel'
                    })
                })
            },

        },
        components: {
            Group,
            Cell,
            Flexbox,
            FlexboxItem,
            Scroller,
            XHeader,
            Popup,
            XButton,
            Selector,
            Shopcart,ShopcartItem
        },

    }
</script>
<style lang="less">
    body,html{
        background: #F2F2F2;
        font-size: 14px;
    }
    .bottom_order{
        line-height: 60px;
        height: 60px;
        box-sizing: border-box;
        font-size:18px;
        background: #fff;
        .money_box{
            margin-left: 10px;
            height:60px;
        }
        .order_money{
            color:#EB3D3D;
            font-size: 22px;
        }
        .payOrder{
            text-align: center;
            background:#0c6;
            color:#fff;
        }
    }
    .my_remark{
        display: inline-block;
        padding-left:10px;
    }
    .meal_box{
        padding: 5px 10px;
        height:120px;
        background: #fff;
    }
    .selfDetail{
        margin-top: 15px;
        .detailAddress{
            color: #999;
        }
    }
    .deliveryDetail{
        margin-top: 15px;
        .detailAddress{
            color: #999;
        }
    }
    .select_title{
        text-align: center;
        button{
            padding: 2px 10px;
            min-width: 120px;
            text-align: center;
            line-height: 30px;
            display: inline-block;
            border: 1px solid #E4E4E4;
            color: #A1A1A1;
            background: #fff;
        }
        .selectSelf{
            background: #EB3D3D;
            color: #fff;
            border:none;
        }
        .selectDelivery{
            background: #EB3D3D;
            color: #fff;
            border:none;
        }
        .selfMeal{
            float: right;
        }
        .deliveryMeal{
            float: left;
        }
    }
    .vux-x-icon {
        fill: #09BB07;
    }
    .choose_box{
        height: 105px;
        .middle_icon{
            margin:12px 0 6px 0;
        }
        .card_icon{
            text-align: center;
        }
        .my_card{
            background: #fff;
            border-top: 1px solid #F2F2F2;
        }
    }
    .card_title{
        line-height: 40px;
        text-align: center;
        background:#fff;
        font-weight:300;
    }
    .card_item{
        background: #fff;
        border:1px solid #f2f2f2;
        padding:5px 10px;
        .card_one_item{
            margin-top: 8px;
        }
    }

</style>