2、订单填写页面 /items/write?skuId=10&orderNo=201903211033410001

<template>
    <div class="write">
        <div class="adr"  v-if="address" @click="adrList()">
            <i class="van-icon van-icon-arrow pos-right"></i>
            <div class="top">
                <img src="../../../assets/images/icon-adr.png" alt="" srcset="">
                {{address.receiver}} {{address.phone}}
            </div>
            <div class="btm">
                <!-- 山东省 青岛市 市南区 香港中路2号海航万邦中心33楼微众控股集团 -->
                {{address.province}} {{address.address}}
            </div>
        </div>
        <div class="address" v-else @click="addAdr()">
            <i class="van-icon van-icon-arrow pos-right"></i>
            请添加收货地址
        </div>
        <ul class="list">
            <li>
                <a href="" class="pic_thumb">
                    <img :src="detail.productUrl" alt="" srcset="">
                </a>
                <div class="cont">
                    <div class="title">
                        {{detail.productTitle}}
                    </div>
                    <p class="desc">
                        <!-- 深空灰色 -->
                    </p>
                    <div class="btm">
                        <span>{{detail.pointPrice}} 积分</span>
                        <i>x {{detail.count}}</i>
                    </div>
                </div>
            </li>
        </ul>
        <div class="fixed-btm">
            <span @click="buy()">确认支付</span>
            合计：<i>{{getTotal()}}积分</i>
        </div>
    </div>
</template>
 
<script>
import { Card,Dialog } from 'vant';
export default {
    data() {
        return {
            orderNo: '',
            detail: {},
            address: {},
            payTotal: 0,
            imageURL: 'https://img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
        }
    },
    created: function() {
        // var that = this
        // window.addEventListener('popstate', function(e) {
        //     that.$router.go(-1)
        // });
    },
    components: {
        [Card.name]: Card,
        [Dialog.name]: Dialog
    },
    mounted() {
        var that = this
        this.orderNo = this.$route.query.orderNo;
        this.$reqPost('/order/get-order-detail',{orderNo:this.orderNo}).then(function(res) {
            console.log(res.data.body[0])
            that.detail = res.data.body[0]
        }).catch(function(err) {
            console.log(err)
        })
 
        this.$reqGet('/member-address/getdefault').then(function(res) {
            console.log(res.data.body)
            that.address = res.data.body
            if (!res.data.body) {
                that.$dialog.confirm({
                    message: '您尚未填写收货地址，请填写收货地址',
                    showConfirmButton: true,
                    showCancelButton: true,
                }).then(function () {
                    that.$router.push('/user/address/edit/-1')
                }).catch(function () {
                    console.log('cancel')
                });
            }
        }).catch(function(err) {
            console.log(err)
        })
    },
    methods: {
        getTotal: function() {
            this.payTotal = this.detail.total;
            return this.payTotal
        },
        adrList: function() {
            this.$router.push('/user/address')
        },
        addAdr: function() {
            this.$router.push('/user/address/edit/-1')
        },
        buy: function() {
            var that = this;
            if (!that.address) {
                that.$dialog.confirm({
                    message: '您尚未填写收货地址，请填写收货地址!',
                    showConfirmButton: true,
                    showCancelButton: true,
                }).then(function () {
                    that.$router.push('/user/address/edit/-1')
                }).catch(function () {
                    console.log('cancel')
                });
                // that.$toast('您尚未填写收货地址，请填写收货地址');
                return false;
            }
            this.$reqPost('/order/pay-order',{addressId:this.address.id,memberId:1,orderNo:this.detail.orderNo,payTotal:this.payTotal}).then(function(res) {
                console.log(res)
                if(res.data.success) {
                    that.$router.replace({path: '/items/result',query: {point:that.payTotal,orderNo:that.detail.orderNo}})
                }
            }).catch(function(err) {
                console.log(err)
            })
            // this.$router.push('/')
        },
        // FentoYuan: function(num) {
        //     return (num / 100).toFixed(0)
        // }
    },
 
    destroyed () {
        this.$dialog.close()
    },
    beforeRouteLeave(to, from, next){
        this.$dialog.close()
        next();
    }
}
</script>
 
<style scoped>
.write .adr {
    padding: 0.35rem;
    background: #fff;
    margin-bottom: 0.3rem;
    font-size: 0.42rem;
    position: relative;
}
.write .adr .top {
    height: 0.53rem;
    line-height: 0.53rem;
    margin-bottom: 0.35rem;
}
.write .adr img {
    display: block;
    float: left;
    width: 0.41rem;
    height: 0.53rem;
    margin-right: 0.36rem;
}
.write .adr .btm {
    padding-left: 0.77rem;
}
.write .adr .pos-right {
    position: absolute;
    right: 0.5rem;
    top: 0.7rem;
}
.write .address {
    height: 1.82rem;
    line-height: 1.82rem;
    margin-bottom: 0.28rem;
    background: #fff;
    padding: 0 0.5rem;
    font-size: 0.42rem;
    color: #666;
    position: relative;
}
.write .address .pos-right{
    position: absolute;
    right: 0.5rem;
    top: 0.7rem;
}
.write ul.list{
    background: #fff;
}
.write ul.list li{
    padding: 0.35rem;
    border-top:1px solid #f6f6f9;
    height: 3.3rem;
    position: relative;
}
.write .pic_thumb{
    width: 2.6rem;
    height: 2.6rem;
    top: 0.35rem;
    left: 0.35rem;
    position: absolute;
}
.write .pic_thumb img{
    max-width: 100%;
    max-height: 100%;
    border: none;
}
.write .cont {
    padding-left: 3rem;
    height: 2.6rem;
}
.write .cont .title {
    font-size: 0.42rem;
    font-weight: bold;
    padding-bottom: 0.2rem;
    height: 0.9rem;
    overflow: hidden;
}
.write .cont .desc {
    height: 0.5rem;
    margin: 0px;
    color: #b4b4b9;
}
.write .cont .btm {
    padding-top: 0.5rem;
    font-size: 0.42rem;
}
.write .cont .btm span {
    color: #ff8400;
}
.write .cont .btm i {
    float: right;
    font-style: normal;
}
.write .fixed-btm{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    height: 50px;
    line-height: 50px;
    padding: 0 0.35rem;
}
.write .fixed-btm i {
    font-size: 0.42rem;
    color: #fd141d;
    font-style: normal;
}
.write .fixed-btm span {
    display: block;
    float: right;
    width: 4.29rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    color: #fff;
    background: #fd141d;
    border-radius: 0.6rem;
    margin-top: 0.15rem;
}
</style>