<template>
|
<!-- 确认订单 -->
|
<view class="container">
|
<view class="header">
|
<image class="header-img" :src="memberInfo.photo?memberInfo.photo:'../../static/images/default-avatar.png'"></image>
|
<view>
|
<view>
|
<text>{{memberInfo.vipName}}</text>
|
<text class="ml-20">{{memberInfo.phone}}</text>
|
</view>
|
<text class="font-14 gray mt-5">{{memberInfo.vipLevel || '-'}}</text>
|
</view>
|
</view>
|
<view class="content">
|
<view class="list-item" v-for="item in list">
|
<view class="flex align-center">
|
<image class="img" mode="aspectFill" :src="item.img?item.img:'../../static/images/no-img.png'"></image>
|
<view>
|
<text>{{item.name}}</text>
|
<text class="gray block mt-5">×{{item.num}}</text>
|
</view>
|
</view>
|
<view>
|
<text class="font-14">￥{{item.isFree?0:item.price}}</text>
|
</view>
|
</view>
|
<view class="list-footer">
|
<text class="blue">共{{totalCount}}件商品</text>
|
<text>
|
合计：<text class="price">￥{{totalAmount}}</text>
|
</text>
|
</view>
|
</view>
|
<view class="footer">
|
<button :disabled="isDisabled" class="blue-btn" @click="createOrder">确认提交</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default{
|
data(){
|
return{
|
memberInfo: {},
|
list: [],
|
id:'',
|
isDisabled: false
|
}
|
},
|
onLoad(options) {
|
this.id = options.id;
|
this.list = JSON.parse(decodeURIComponent(options.list));
|
this.loadMemberInfo();
|
},
|
computed:{
|
// 购物车总数量
|
totalCount(){
|
let count = 0;
|
this.list.forEach((item) => {
|
count += item.num;
|
})
|
return count;
|
},
|
// 购物车总金额
|
totalAmount(){
|
let amount = 0;
|
this.list.forEach((item) => {
|
if(!item.isFree){
|
amount += item.price * item.num;
|
}
|
})
|
return amount;
|
}
|
},
|
methods:{
|
loadMemberInfo(){
|
this.$httpUtils.request('/api/vip/findVipInfoById/'+this.id).then((res) => {
|
if(res.status == 200){
|
this.memberInfo = res.mapInfo.vipInfo;
|
}
|
})
|
},
|
createOrder(){
|
this.isDisabled = true;
|
let orderList = this.list.map((item) => {
|
return {
|
"count": item.num,
|
"goodsId": item.id,
|
"goodsType": item.goodsType,
|
"isFree": item.isFree?1:0
|
}
|
})
|
this.$httpUtils.request('/api/order/createOrder', {
|
items: orderList,
|
vipId: this.id
|
}, 'POST').then((res) => {
|
if(res.status == 200){
|
uni.navigateTo({
|
url: './submitSucceed'
|
})
|
}
|
this.$toast.info(res.info);
|
this.isDisabled = false;
|
}).catch(() => {
|
this.isDisabled = false;
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page{
|
background: #F6F6F8;
|
}
|
.container{
|
padding-top: 10px;
|
padding-bottom: 70px;
|
}
|
.header{
|
display: flex;
|
align-items: center;
|
border: 1px solid #EDEAF4;
|
padding: 10px 10px;
|
background: #FFFFFF;
|
font-size: 16px;
|
}
|
.header-img{
|
width: 48px;
|
height: 48px;
|
border-radius: 50%;
|
margin-right: 10px;
|
}
|
.content{
|
margin: 10px 10px;
|
padding: 0 10px 0;
|
background: #FFFFFF;
|
border: 1px solid #EDEAF4;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
border-radius: 4px;
|
}
|
.list-item{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-bottom: 1px solid #EDEAF4;
|
padding: 12px 5px;
|
font-size: 13px;
|
}
|
.list-item .img{
|
width: 40px;
|
height: 40px;
|
border-radius: 4px;
|
margin-right: 10px;
|
}
|
.list-footer{
|
display: flex;
|
justify-content: space-between;
|
padding: 15px 0;
|
font-size: 16px;
|
}
|
.list-footer .price{
|
color: #FA5151;
|
font-weight: 700;
|
}
|
.footer{
|
position: fixed;
|
left: 10px;
|
right: 10px;
|
bottom: 0;
|
padding-bottom: 20px;
|
background: #F6F6F8;
|
}
|
</style>
|
