4、订单详情 /items/order/detail?orderNo=201903251750380001

 

<template>
    <div class="write">
        <div class="adr">
            <div class="top">
                <img src="../../../assets/images/icon-adr.png" alt="" srcset="">
                {{detail.memberName}} {{detail.memberPhone}}
            </div>
            <div class="btm">
                <!-- 山东省 青岛市 市南区 香港中路2号海航万邦中心33楼微众控股集团 -->
                {{replace(detail.memberAddress)}}
            </div>
        </div>
        <ul class="list">
            <li @click="goto(detail.productId)">
                <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>
        <ul class="od_list">
            <li> <span class="red">{{detail.total}} 积分</span> 订单总额</li>
            <li> <span>{{detail.orderNo}}</span> 订单编号</li>
            <li> <span>{{detail.submitTime}}</span> 下单时间</li>
        </ul>
    </div>
</template>

<script>
import { Card } from 'vant';
export default {
    data() {
        return {
            orderNo: '',
            detail: {},
            imageURL: 'https://img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
        }
    },
    components: {
        [Card.name]: Card,
    },
    mounted() {
        var that = this
        this.orderNo = this.$route.query.orderNo;
        this.$reqPost('/order/get-order-detail',{orderNo:this.orderNo}).then(function(res) {
            that.detail = res.data.body[0]
        }).catch(function(err) {
            console.log(err)
        })

    },
    methods: {
        goto(productId) {
            this.$router.push('/items/detail/'+productId)
            // this.$router.go(-1)
        },
        replace(str) {
            if(str) {
                return str.replace(/\@/g,' ');
            }
            
        }
    }
}
</script>

<style scoped>
.write .adr {
    padding: 0.35rem;
    background: #fff;
    margin-bottom: 0.3rem;
    font-size: 0.42rem;
}
.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 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 {
    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;
}
.write .od_list {
    margin-top: 0.3rem;
}
.write .od_list li{
    height: 1.5rem;
    line-height: 1.5rem;
    padding: 0 0.35rem;
    font-size: 0.42rem;
    color: #666;
    background: #fff;
    border-bottom:1px solid #f6f6f9;
}
.write .od_list li span{
    float: right;
}
.write .od_list li span.red{
    color:#fd141d;
}
</style>

 

转载于:https://www.cnblogs.com/suanmei/p/10595273.html