2、订单填写页面 /items/write?skuId=10&orderNo=201903211033410001
作者：互联网
<template>
<div class="write">
<div class="adr" v-if="address" @click="adrList()">
<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)
// }
}
}
</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 .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>
标签：function,skuId,10,items,address,height,write,rem,orderNo 来源： https://www.cnblogs.com/suanmei/p/10570055.html