wapshop/src/components/confirm_order/confirm_order.vue

<template>
    <div v-if="datas!==''">
        <div v-document_title>确认订单</div>
        <div class="check_order">
            <div @click="link_address">
                <flexbox style="background: #fff" v-if="datas.address !== null">
                    <flexbox-item class="address_box"><span class="address_icon"></span></flexbox-item>
                    <flexbox-item :span="4/5" style="padding: 24px 0;line-height: 50px;">
                        <p>{{store_address?store_address.name:datas.address.true_name}}&nbsp;&nbsp;&nbsp;{{store_address?store_address.mobile:datas.address.mob_phone}}</p>
                        <p>{{store_address?store_address.address:datas.address.area_info+datas.address.address}}</p>
                    </flexbox-item>
                </flexbox>
                <div v-else>
                    <p style="text-align: center;color:#EB4E4F; padding: 50px 0;background: #fff; font-size: 26px;">
                        <icon type="warn"></icon>
                        请填写收货人信息
                    </p>
                </div>
            </div>
            <group>
                <x-input title="红包支付" class="weui-vcode" style="padding-top: 21px; padding-bottom: 21px;">
                    <p slot="left"></p>
                    <icon slot="right" type="success-circle" style="color: #EB4E4F"></icon>
                </x-input>
                <x-input title="微信支付" class="weui-vcode" style="padding-top: 21px; padding-bottom: 21px;">
                    <icon slot="right" type="success-circle" style="color: #EB4E4F"></icon>
                </x-input>
            </group>
            <flexbox style="margin-top: 0.71428571em;" v-for="goods in goods_list" :key="goods">
                <flexbox-item style="background: #fff; padding:30px;" class="vux-1px-b">
                    <flexbox>
                        <flexbox-item :span="2/6">
                            <img :src="goods.goods_image_url" style="width: 175px;height: 175px;">
                        </flexbox-item>
                        <flexbox-item :span="3/6" style="padding-left: 25px;">
                            <p>{{goods.goods_mobile_name}}</p>
                            <p style="margin: 20px 0 40px 0;" class="letter_pro">{{goods.goods_spec}}</p>
                            <p><span class="letter_warn" style="margin-right: 10px; font-size: 30px;">¥{{goods.act_type == 0?goods.bonus_price:goods.goods_promotion_price}}</span><span
                                    class="letter_pro">专柜价{{goods.goods_price}}</span></p>
                        </flexbox-item>
                        <flexbox-item style="text-align: right;">
                            <span class="letter_pro">x{{goods.goods_num}}</span>
                        </flexbox-item>
                    </flexbox>
                </flexbox-item>
            </flexbox>
            <div style="background: #fff; padding:20px 0 20px 30px;" v-if="datas.payinfo.gap_desc"><span
                    class="letter_pro">{{datas.payinfo.gap_desc}}</span></div>
            <div class="entry">
                <flexbox>
                    <flexbox-item>
                        <flexbox>
                            <flexbox-item :span="4/5" style="line-height: 50px;">商品总价</flexbox-item>
                            <flexbox-item :span="1/5" style="text-align: right"><span class="letter_warn">¥ {{datas.payinfo['goods_amount']}}</span>
                            </flexbox-item>
                        </flexbox>
                    </flexbox-item>
                </flexbox>
                <flexbox>
                    <flexbox-item>
                        <flexbox>
                            <flexbox-item :span="4/5" style="line-height: 50px;">{{datas.payinfo['full_desc']}}
                            </flexbox-item>
                            <flexbox-item :span="1/5" style="text-align: right" v-if="datas.payinfo['full_desc']"><span
                                    class="letter_info">- ¥ {{datas.payinfo['full_discount']}}</span></flexbox-item>
                        </flexbox>
                    </flexbox-item>
                </flexbox>
                <flexbox>
                    <flexbox-item>
                        <flexbox v-for="bonus in datas.payinfo['bonus_rates']" :key="bonus">
                            <flexbox-item :span="4/5" style="line-height: 50px;"><span class="bonus_bg"><span
                                    class="bonus_rate">{{bonus.rate}}%</span></span>红包抵扣
                            </flexbox-item>
                            <flexbox-item :span="1/5" style="text-align: right"><span class="letter_info">- ¥ {{bonus.total}}</span>
                            </flexbox-item>
                        </flexbox>
                    </flexbox-item>
                </flexbox>
                <flexbox>
                    <flexbox-item>
                        <flexbox>
                            <flexbox-item :span="4/5" style="line-height: 50px;">运费</flexbox-item>
                            <flexbox-item :span="1/5" style="text-align: right"><span class="letter_warn">+ ¥ {{datas.payinfo['freight']}}</span>
                            </flexbox-item>
                        </flexbox>
                    </flexbox-item>
                </flexbox>
            </div>
        </div>
        <div class="order_pay">
            <div class="default_address" v-if="datas.address !== null">
                配送至：{{store_address?store_address.address:datas.address.area_info+datas.address.address}}
            </div>
            <div class="just_buy">
                <flexbox>
                    <flexbox-item :span="4/6" style="text-align: center;line-height: 93px; font-size: 30px;">应付: <span
                            class="letter_warn">¥ {{datas.payinfo['pay_cash_pred']}}</span></flexbox-item>
                    <flexbox-item :span="2/6"
                                  style="text-align: center;background:#EB4E4F;color: #fff;line-height: 93px; "><p
                            @click="onBridgeReady">去付款</p></flexbox-item>
                </flexbox>
            </div>
        </div>
    </div>
</template>
<script>
    import {Flexbox, FlexboxItem, Group, CellBox, XSwitch, XInput, Icon} from 'vux'
    import Api from '../../lib/api'
    import Proxy from '../blocks/util/proxy'

    export default
    {
        created()
        {
            this.$store.commit('updateLoadingStatus', {isLoading: true});
            let goods_id = this.$route.query["goods_id"];
            let goods_num = this.$route.query['num'];
            let iscart = this.$route.query["iscart"];
            let cart_id = this.$route.query["cart_id"] ? this.$route.query["cart_id"] : '';
            this.$http.jsonp(Api.step_first(iscart, cart_id, goods_id, goods_num),{_timeout:5000}).then(function (res) {
                if (res.body.datas == null && res.body.code !== '200') {
                    this.$vux.toast.show({
                        type: 'warn',
                        text: res.body.message,
                        position: 'middle',
                        width: '600px'
                    });
                    this.$router.go(-1);
                }
                else {
                    this.datas = res.body['datas'];
                    this.proxy.addData(res.body.datas);
                    this.$store.commit('updateLoadingStatus', {isLoading: false});
                }
            },(err) => {
                this.$vux.toast.show({
                type: 'text',
                text: "网络错误",
                position: 'middle'
            })
        })
        },
        beforeDestroy(){
            this.$store.commit('update_address', {
                'name': '',
                'mobile': '',
                'address': '',
                'aid': ''
            });
        },
        data ()
        {
            return {
                datas: '',
                proxy: new Proxy(),
                aid: ''
            }
        },
        computed: {
            default_address(){
                let address_list = this.datas['address'];
            },
            goods_list(){
                if (!this.datas)return;
                let goods_list = this.datas.goods_list;
                let list = [];
                for (let i = 0; i < goods_list.length; i++) {
                    let goods_item = this.proxy.getSummery(goods_list[i].goods_id);
                    goods_item.goods_num = goods_list[i].goods_num;
                    list.push(goods_item);
                }
                return list;
            },
            store_address(){
                let address;
                if (this.$store.state.address['name']) {
                    address = this.$store.state.address;
                    return address;
                }
                else {
                    return false;
                }
            }
        },
        methods: {
            link_address(){
                this.$router.push({path: '/address/list', query: {need_goBack: true}});
            },
            onBridgeReady(){
                let goods_id = this.$route.query["goods_id"];
                let goods_num = this.$route.query['num'];
                let iscart = this.$route.query["iscart"];
                let cart_id = this.$route.query["cart_id"] ? this.$route.query["cart_id"] : '';
                let vat_hash = this.datas['payinfo'].vat_hash;
                let offpay_hash = this.datas['payinfo'].offpay_hash;
                let offpay_hash_batch = this.datas['payinfo'].offpay_hash_batch;
                let address_id = this.store_address ? this.store_address.aid : this.datas['address'].address_id;
                console.log(address_id);
                this.$http.jsonp(Api.step_second(cart_id, goods_id, goods_num, address_id, 0, vat_hash, offpay_hash, offpay_hash_batch),{_timeout:5000}).then(function (res) {
                    if (res.status == 200 && res.body.code == 200) {
                        let param = res.body.datas.param.data;
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                                "appId": param.appId,     //公众号名称，由商户传入
                                "timeStamp": param.timeStamp,         //时间戳，自1970年以来的秒数
                                "nonceStr": param.nonceStr, //随机串
                                "package": param.package,
                                "signType": param.signType,         //微信签名方式：
                                "paySign": param.paySign //微信签名
                            },
                            function (res) {
                                if (res.err_msg == "get_brand_wcpay_request:ok") {
                                    alert('支付成功');
                                }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                            }
                        );
                    } else {
                        let msg;
                        if (res.status != 200) {
                            msg = "网络错误!";
                        } else {
                            msg = res.body.message;
                        }
                        this.$vux.toast.show({
                            type: 'text',
                            text: msg,
                            position: 'middle'
                        });
                    }
                },(err) => {
                    this.$vux.toast.show({
                    type: 'text',
                    text: "网络错误",
                    position: 'middle'
                })
            });
            }
        },
        components: {
            Flexbox,
            FlexboxItem,
            Group,
            CellBox,
            XSwitch,
            XInput,
            Icon
        }
    }
</script>
<style scoped>
    #router_view {
        background: #f9f9f9;
    }

    .address_box {
        padding: 24px 0 24px 40px;
    }

    .address_box p {
        line-height: 50px;
    }

    .address_icon {
        display: inline-block;
        width: 34px;
        height: 47px;
        background: url("../../assets/address_icon.jpg") no-repeat;
        background-size: 100% 100%;
    }

    .check_order {
        padding-bottom: 133px;
    }

    .entry {
        background: #fff;
        margin-top: 0.71428571em;
        padding: 30px;
    }

    .order_pay {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .just_buy {
        height: 93px;
        background: #fff;
    }

    .default_address {
        font-size: 18px;
        background: #ffeab8;
        color: #f2bc73;
        height: 40px;
        line-height: 40px;
        padding-left: 30px;
    }

    .bonus_bg {
        background: #f2bb11;
        padding: 5px;
        margin-right: 5px;
    }

    .bonus_rate {
        border: 1px dashed #fff;
    }

    .letter_pro {
        color: #a7a7a7;
    }

    .letter_info {
        color: #09BB07;
    }

    .letter_warn {
        color: #EB4E4F;
    }

    .weui-icon-warn {
        vertical-align: text-bottom;
        font-size: 34px;
    }
</style>