订单页面布局——从购物车界面-选购结算-缓存数据操作后,订单界面才会有数据
实例
编译订单界面
在order文件夹下新建main.less
.cart-top {
.receive {
display: flex;
padding: 20rpx;
justify-content: space-between;
position: relative;
padding-right: 50rpx;
}
.address {
padding: 20rpx;
padding-top: 0;
}
.address-bar {
width: 100%;
height: 8px;
}
}
.add_addresss {
padding: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
span {
display: block;
width: 12px;
height: 12px;
border-top: 1px #999 solid;
border-right: 1px #999 solid;
transform: rotate(45deg);
}
}
.list-title {
padding: 20rpx;
border-bottom: 1px #eee solid;
border-top: 10px #eee solid;
}
.ware-item {
padding: 20rpx;
padding-bottom: 0;
display: flex;
align-items: center;
.choice-button {
flex-shrink: 0;
text-align: center;
margin-right: 20rpx;
}
}
.ware-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.ware-content {
display: flex;
flex: 1;
justify-content: space-between;
border-bottom: 1px #eee solid;
padding-bottom: 20rpx;
}
.ware-image {
img {
display: block;
width: 200rpx;
height: 200rpx;
}
}
.ware-info {
flex: 1;
margin-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.ware-info-btm {
display: flex;
justify-content: space-between;
.ware-price {
color: red;
}
}
.calculate {
display: flex;
}
.rect {
width: 20px;
text-align: center;
border: 1px #999 solid;
line-height: 1.2;
}
.number {
margin: 0 10px;
}
.cart-total {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
.total-button {
padding-left: 20px;
icon {
margin-right: 10px;
}
}
.total-center {
flex: 1;
padding: 20rpx;
.colorRed {
color: red;
}
.price-tips {
font-size: 14px;
color: #666;
}
}
.accounts {
width: 30%;
height: 100rpx;
background: red;
color: #fff;
line-height: 100rpx;
text-align: center;
}
}
.all-price {
padding: 20rpx;
border-top: 1px #eee solid;
color: red;
text-align: right;
span {
font-size: 24px;
}
button {
margin-top: 20rpx;
}
}
在order/index中进行引入
<style scoped lang="less">
@import './main.less';
</style>
- 地址基本布局
<div class="cart-top" >
<div class="receive">
<div class="name">收货人: {{address.userName}}</div>
<div class="phonen-number">{{address.telNumber}}</div>
</div>
<div class="address">收货地址: {{joinAddress}}</div>
<img src="../../../static/images/cart_border@2x.png" class="address-bar" mode="aspectFill">
</div>
数据
data () {
return {
orderNumber: '',
//收货地址
address: null,
cart: {}
}
},
载入收货地址
onLoad (param) {
// 获取路由参数
this.orderNumber = param.order_number
// 获取缓存的地址
this.address = wx.getStorageSync('myAddress')
}
在购物车界面cart/index中,收货地址保存到本地
chooseAddress () {
// 选择收货地址
wx.chooseAddress({
success: (res) => {
// 获取地址信息后更新data中的数据
this.address = res
// 保存到本地缓存
wx.setStorageSync('myAddress', res)
}
})
}
把购物车cart/index.vue中的计算属性里的detailAddress复制到order/index.vue中的计算属性中;为null改为取反
computed:{
detailAddress: function () {
// 组合详细地址
console.log(this.address)
if (!this.address) {
return ''
}
let { provinceName, cityName, countyName, detailInfo } = this.address
let detail = `${provinceName}${cityName}${countyName}${detailInfo}`
return detail
}
}
- 从本地缓存中获取地址数据
onShow () {
this.address = mpvue.getStorageSync('myAddress')
}
展示收货地址
注:如果直接编译order界面,收货地址栏为空
此时,需要从购物车界面选购后,进行结算,然后收货地址栏显示数据