148 lines
4.0 KiB
Vue
148 lines
4.0 KiB
Vue
<template>
|
|
<view class="flex column">
|
|
<!-- topbar -->
|
|
<u-navbar title="确认订单" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
|
|
<view class="u-nav-slot" slot="left">
|
|
<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
|
|
</view>
|
|
</u-navbar>
|
|
<!-- 地址框 -->
|
|
<view class="flex p-24 borderB bg-w">
|
|
<u--image src="/static/icons/site-48.svg" width="96rpx" height="96rpx" />
|
|
<view class="flex column m-l-24">
|
|
<view class="fz36 siteBox l-h-18">{{siteCon.sitename}}</view>
|
|
<view>{{userInfo.tel}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 订单详情 -->
|
|
<view class="fb fz36 m-24">商品详情</view>
|
|
<view class="m-24 m-t-12 flex column">
|
|
<!-- cart -->
|
|
<view class="flex" v-for="(item,index) in cartList" :key="index">
|
|
<view class="rad8" style="width:192rpx;height: 144rpx;">
|
|
<u--image :src="item.photo" width="192rpx" height="144rpx"></u--image>
|
|
</view>
|
|
<view class="flex1 flex column p-24">
|
|
<view class="fz28 m-b-24">{{item.spu_name}}</view>
|
|
<view v-for="(i,index) in item.sku_nameG" :key="index" v-if="item.sku_nameG.length>1"
|
|
class="fz24 fcb l-h-12">1 X {{i}}</view>
|
|
<view class="fz32 fcm fb m-t-24" style="height: 36rpx;">¥{{item | calculateTotal}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 价格明细 -->
|
|
<view class="fb fz36 m-24">价格明细</view>
|
|
<view class="flex msb m-l-24 m-r-24 fz32">
|
|
<view>商品小计</view>
|
|
<view>¥{{total | formatPrice}}</view>
|
|
</view>
|
|
<!-- 客户备注 -->
|
|
<textarea class="border" v-model="remark"></textarea>
|
|
<!-- 提交订单 -->
|
|
<view class="subBox flex mr mac">
|
|
<view class="m-r-24 fb">
|
|
<text class="fz24">合计：</text>
|
|
<text class="fz44">¥{{total | formatPrice}}</text>
|
|
</view>
|
|
<view class="fz32 bg-m flex column mac mc fci rad16 m-r-24" style="width:220rpx;height:100rpx;"
|
|
@click="handleCheckout">
|
|
<view>提交订单</view>
|
|
<view>Checkout</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
calculateTotal,
|
|
formatPrice,
|
|
totalPrice
|
|
} from '@/utils/index.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
remark: '' //用户备注
|
|
}
|
|
},
|
|
computed: {
|
|
//站点信息
|
|
siteCon() {
|
|
return this.$store.state.siteList.find(item => item.id === this.$store.state.site_id.toString())
|
|
},
|
|
//购物车列表
|
|
cartList() {
|
|
return this.$store.state.cartList
|
|
},
|
|
//购物车总价
|
|
total() {
|
|
return this.totalPrice(this.$store.state.cartList)
|
|
},
|
|
//用户信息
|
|
userInfo() {
|
|
return this.$store.state.userInfo
|
|
}
|
|
},
|
|
methods: {
|
|
//计算购物车总价
|
|
totalPrice,
|
|
//提交订单
|
|
handleCheckout() {
|
|
//提交订单
|
|
uni.$u.http.post('/Api/Check/checkout', {
|
|
cartList: JSON.stringify(this.cartList), //购物车列表
|
|
shop_id: this.$store.state.shop_id, //商铺id
|
|
total: this.total, //总价格
|
|
site_id: this.$store.state.site_id, //站点id
|
|
remark: this.remark //客户订单备注
|
|
}, {
|
|
header: {
|
|
'Token': this.$store.state.userInfo.token,
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
}
|
|
}).then(res => {
|
|
//订单添加成功
|
|
if (res.data.status === 1) {
|
|
const order_sn = res.data.order_sn;
|
|
uni.navigateTo({
|
|
url: `/pages/shop/pay?order_sn=${order_sn}`
|
|
});
|
|
} else if (res.data.status === -1) {
|
|
uni.removeStorage({ //清除用户信息 跳转首页
|
|
key: 'userInfo',
|
|
success: (res) => {
|
|
this.$store.commit('clearUserInfo')
|
|
uni.redirectTo({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'error'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
filters: {
|
|
calculateTotal, //计算spu单价
|
|
formatPrice, //格式化价格
|
|
},
|
|
onLoad() {}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.subBox {
|
|
height: 150rpx;
|
|
background-color: $uni-bg-color;
|
|
z-index: 10076;
|
|
width: 100vw;
|
|
position: fixed;
|
|
bottom: 0rpx;
|
|
}
|
|
</style> |