饭侠三十六微信支付

无卤 • 2022年10月11日 pm1:58 • 微信开发技术
<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>
饭侠三十六微信支付
以上是饭侠三十六微信支付的全部内容。
THE END
二维码
h5网页在微信里打开右上角分享到微信好友或者朋友圈
< <上一篇
Spring Boot微信点餐——实战开发DAO层
下一篇>>
搜索内容

饭侠三十六微信支付

目录

目录

推荐文章

最新文章
