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=" 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>