vux 微信支付

http://amazeui.org/widgets/wechatpay?_ver=2.x //下面截圖的文檔地址
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 //微信支付開發文檔
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432 //微信公衆平臺技術文檔

　　　　配置好js-sdk 配置信息，就能夠調用wx.chooseWXPay了

 

 

 

 

<template>
    <div id="pay">
        <flexbox style="margin: 10px 0;">
            <flexbox-item :span="3">
                <div class="sendMeal">
                    <icon name="meal" scale="4"></icon>
                    <p>送餐上門</p>
                </div>
            </flexbox-item>
            <flexbox-item :span="8">
                <div v-if="receiver" @click="goto('/list')">
                    <p><span>{{receiver.user_name}}</span><span style="float: right">{{receiver.phone_num}}</span></p>
                    <div style="margin-top: 10px;">{{receiver.address}}</div>
                </div>
                <div v-else>
                    <group>
                        <cell title="請新增地址" @click.native="goto('/address')" is-link></cell>
                    </group>
                </div>
            </flexbox-item>

        </flexbox>
        <flexbox :gutter="0" id="pay-order">
            <flexbox-item style="width: 100%;">
                <scroller lock-x height="300px" ref="scroller" @on-scroll="scrolling">
                    <div>
                        <div class="mealOrder-list" v-for="(item,index) in shopCart.items">
                            <div class="left-border">
                                <p class="order-date inner-box" v-for="(i,index) in item" v-if="index<1">{{i.sale_date}}</p>
                                <div class="inner-box food-box" v-for="(i,index) in item">
                                    <flexbox>
                                        <flexbox-item :span="1/2" class="meal-detial">
                                            <span>{{i.food_id}}</span>
                                            <span>{{i.food_name}}</span>
                                        </flexbox-item>
                                        <flexbox-item :span="1/6" class="money"> ￥<span>{{i.price*i.number/100}}</span>
                                        </flexbox-item>
                                        <flexbox-item :span="1/3" class="pay-number" style="margin-left: 0">
                                            <span>{{i.number}}</span>
                                        </flexbox-item>
                                    </flexbox>
                                </div>
                            </div>
                        </div>
                        <flexbox>
                            <flexbox-item :span="1/2">
                                <div style="font-size: 18px;text-align: center;">總計：</div>
                            </flexbox-item>
                            <flexbox-item :span="1/6">
                                <span style="color: red; font-size: 18px; font-weight: 600;">￥{{shopCart.price}}</span>
                            </flexbox-item>
                            <flexbox-item :span="1/3" style="margin-left: 0">
                                <span>x{{shopCart.number}}</span>
                            </flexbox-item>
                        </flexbox>
                    </div>
                </scroller>
            </flexbox-item>
        </flexbox>
        <div>
            <!--<group>-->
                <!--<radio :selected-label-style="{color: '#FF9900'}" :options="radio003" v-model="shopCart.address" @on-change="changeItem"></radio>-->
            <!--</group>-->
            <group>
                <radio :selected-label-style="{color: '#FF9900'}" :options="radio001" value="微信支付" disabled @on-change="changeItem" v-model="radioValue"></radio>
            </group>
        </div>

        <div class="cart-box">
            <flexbox :gutter="0" >
                <flexbox-item :span="1/3">
                    <div style="font-size: 18px;text-align: center;">總計：</div>
                </flexbox-item>
                <flexbox-item :span="1/3">
                    <div class="totalMoney"> ￥{{shopCart.price}}</div>
                </flexbox-item>
                <flexbox-item :span="1/3" class="order">
                    <span @click="createOrder()" style="height: 60px;display: block;">支付</span>
                </flexbox-item>
            </flexbox>
        </div>

    </div>

</template>

<script> import Client from '../../service/Client' import { Flexbox, FlexboxItem, Scroller, Group, Radio,Cell } from 'vux' export default { data() { return { radioValue:"微信支付", radio001: [ '微信支付' ], radio003: [{ icon: '/img/card1.png', key: '001', value: '飯卡支付' }, { icon: '/img/wechat.png', key: '002', value: '微信支付' }], shopCart:{}, receiver: null } }, created(){ this.restoreShopcart() this.wechatConfig() this.getAddress() }, methods: { createOrder(){ if (this.shopCart === undefined || this.shopCart.price === 0) { this.$vux.toast.show({ text: '購物車爲空', type: 'cancel' }) return } if (this.receiver === null) { this.$vux.toast.show({ text: '請選擇收穫地址', type: 'cancel' }) return } this.shopCart = JSON.parse(window.localStorage.getItem('shopCart')) let order = { shopCart: this.shopCart, adr_id: this.receiver.id, create_time: Date.parse(new Date()) } this.$vux.loading.show({text: '建立訂單中'}) let url = location.href.split('#')[0] Client.post(url + 'create-order', order).then((response) => { this.$vux.loading.hide() if (response.status === 200 && response.data.status === 1) { this.wechatPay(response.data.data) } else { this.$vux.alert.show({ title : '建立訂單失敗', content: response.data.message }) } }).catch((error) => { this.$vux.loading.hide() 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, // 支付簽名
 success: function (response) { // 支付成功後的回調函數
 window.localStorageclear() $this.$vux.toast.show('支付成功!') window.location.href = "/mobile/my-order" }, cancel: function (re) { $this.$vux.toast.show({ text: '支付已取消', type: 'cancel' }) } }); }, addNewAddress(){ this.$router.push({path:'/address'}); }, showAddress(){ this.$router.push({path:'/list'}); }, getAddress() { this.$vux.loading.show('加載中') Client.get('/mobile/api/get-default-address').then((response) => { this.$vux.loading.hide() if (response.status === 200 && response.data.status === 1) { this.receiver = response.data.data } }) }, wechatConfig() { this.$vux.loading.show('加載中') let url = location.href.split('#')[0] Client.post(url + 'js-sdk-config', {url}).then((response) => { this.$vux.loading.hide() 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.loading.hide() }) }, goto(path) { this.$router.push({path:path}); }, restoreShopcart() { this.shopCart = JSON.parse(window.localStorage.getItem('shopCart')); } }, components: { Cell, Flexbox, FlexboxItem, Scroller, Group, Radio, } } </script>


<style lang="scss"> body,html,#app{ height: 100% } #pay{ height: 100%; position: relative; #pay-order{ max-height: 300px; background: #ffffff; .mealOrder-list{ .order-date{ padding-bottom:10px; border-bottom:2px solid #666;
            } .left-border{ border-left:2px solid #0DD874; margin-bottom: 20px;
            } } .cart-title{ background: #efefef; line-height: 50px; padding-left: 15px; color:#888; font-size: 18px;
        } .inner-box{ margin-left: 10px; .meal-detial{ font-weight: 600;
            } .money{ color: orangered;
            } .pay-number{ margin-left: 0; .weui-cell{ padding: 10px 0;
                } } } .food-box{ padding: 15px 0; border-bottom: 1px solid #cccccc;
        } } } .sendMeal{ margin-left: 20px;
    }
</style>