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