sszdot
5571f967ac
【原 因】：order.vue 重名 改为confirm.vue 【过 程】： 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
249 lines
7.0 KiB
Vue
249 lines
7.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="m-l-24 m-r-24 m-t-24 p-t-24 p-b-24 bg-w rad8 boxshadow">
|
||
<view class="flex md msb p-b-24 p-l-24 p-r-24">
|
||
<view class="flex md">
|
||
<u--image src="/static/icons/site-48.svg" width="75rpx" height="75rpx" />
|
||
<view class="m-l-24 fz36 fb">收货站点：<font class="fcm">{{siteCon.sitename}}</font>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<u--image src="/static/icons/pulldown-40.svg" width="40rpx" height="40rpx" />
|
||
</view>
|
||
</view>
|
||
<view class="colorBar"></view>
|
||
<view class="flex m-t-24 p-l-24 p-r-24 fz28 msb">
|
||
<view>配置物流</view>
|
||
<view>{{shopCon.name}}</view>
|
||
</view>
|
||
<view class="flex m-t-12 p-l-24 p-r-24 fz28 msb">
|
||
<view>送达时间</view>
|
||
<view>预估{{estimated}}分钟之后送达</view>
|
||
</view>
|
||
</view>
|
||
<!-- 订单详情 -->
|
||
<view class="m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow">
|
||
<view class="fb fz36 m-b-24">餐品详情</view>
|
||
<!-- cart -->
|
||
<view class="flex m-t-24 msb" v-for="(item,index) in cartList" :key="index">
|
||
<view class="flex">
|
||
<u--image :src="item.photo" width="192rpx" height="144rpx" />
|
||
<view class="m-l-24 flex column">
|
||
<view class="fz32 m-b-12">{{item.spu_name}}</view>
|
||
<view class="fz24 fcb" v-for="(i,index) in item.sku_nameG" :key="index"
|
||
v-if="item.sku_nameG.length>1">
|
||
X1 {{i}}
|
||
</view>
|
||
<view class="fz24 m-t-12">X{{item.countG[0]}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="fz36 fb m-l-12">¥{{item | calculateTotal}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 价格明细 -->
|
||
<view class="m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow">
|
||
<view class="fb fz36 m-b-24 borderBDas p-b-12">价格明细</view>
|
||
<view class="flex msb fb m-b-12">
|
||
<view class="fz28">商品小计</view>
|
||
<view class="fz36">¥{{total | formatPrice}}</view>
|
||
</view>
|
||
<view class="flex msb fz28 m-b-12">
|
||
<view>外送费</view>
|
||
<view>¥{{transportPrice | formatPrice}}</view>
|
||
</view>
|
||
<view class="flex msb fz28 m-b-24 p-b-24 borderBDas">
|
||
<view>打包服务费</view>
|
||
<view>¥{{packPrice | formatPrice}}</view>
|
||
</view>
|
||
<view class="flex mr mac">
|
||
<view class="fcb fz24">合计</view>
|
||
<view class="m-l-12 fz36 fb">¥{{fullPrice | formatPrice}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 客户备注 -->
|
||
<view class="flex msb m-l-24 m-r-24 m-t-24 p-24 bg-w rad8 boxshadow backBox">
|
||
<view class="fz28">备注</view>
|
||
<view class="fcb fz28 flex mac">
|
||
<view class="fz24">口味、偏好等要求</view>
|
||
<u-icon name="arrow-right" size="28rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!-- 提交订单 -->
|
||
<view class="subBox flex mr mu p-t-24 p-b-24">
|
||
<view class="fz24 fcb m-r-12 l-h-18">
|
||
合计
|
||
</view>
|
||
<view class="flex column m-r-12">
|
||
<view class="fb fz36">¥{{fullPrice | formatPrice}}</view>
|
||
<view class="fz24">共{{totalCount}}件</view>
|
||
</view>
|
||
<view class="fz32 flex column mac mc fci rad8 m-r-24" style="width:220rpx;height:100rpx;"
|
||
@click="handleCheckout" :class="isPressed?'bg-g':'bg-m'">
|
||
<view>提交订单</view>
|
||
<view>Checkout</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
calculateTotal,
|
||
formatPrice,
|
||
totalPrice
|
||
} from '@/utils/index.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
isPressed: false, //提交按钮是否锁定
|
||
remark: '' //用户备注
|
||
}
|
||
},
|
||
computed: {
|
||
//站点信息
|
||
siteCon() {
|
||
return this.$store.state.siteList.find(item => item.id === this.$store.state.site_id.toString())
|
||
},
|
||
//商铺信息
|
||
shopCon() {
|
||
return this.$store.state.shopCon
|
||
},
|
||
//预估送达时间
|
||
estimated() {
|
||
return 30
|
||
},
|
||
//购物车列表
|
||
cartList() {
|
||
return this.$store.state.cartList
|
||
},
|
||
//购物车总价
|
||
total() {
|
||
return Number(this.totalPrice(this.$store.state.cartList))
|
||
},
|
||
//外送费
|
||
transportPrice() {
|
||
return Number(this.$store.state.shopCon.default_transport_price)
|
||
},
|
||
//打包服务费
|
||
packPrice() {
|
||
return Number(this.$store.state.shopCon.default_pack_price)
|
||
},
|
||
//购物车货品总数 ps:sku的总数 即单品总数
|
||
totalCount() {
|
||
let total = 0
|
||
for (let i = 0; i < this.cartList.length; i++) {
|
||
for (let j = 0; j < this.cartList[i].countG.length; j++) {
|
||
total += this.cartList[i].countG[j]
|
||
}
|
||
}
|
||
return total
|
||
},
|
||
//所有总价包括 商品总价 打包费 等总和
|
||
fullPrice() {
|
||
return Number(this.total) + Number(this.transportPrice) + Number(this.packPrice)
|
||
},
|
||
//用户信息
|
||
userInfo() {
|
||
return this.$store.state.userInfo
|
||
}
|
||
},
|
||
methods: {
|
||
//计算购物车总价
|
||
totalPrice,
|
||
//提交订单
|
||
handleCheckout() {
|
||
if (this.isPressed) { //防止提交订单按钮重复点击
|
||
return
|
||
}
|
||
this.isPressed = true
|
||
//提交订单
|
||
uni.$u.http.post('/Api/Check/checkout', {
|
||
cartList: JSON.stringify(this.cartList), //购物车列表
|
||
shop_id: this.$store.state.shop_id, //商铺id
|
||
total: this.total, //商品总价格
|
||
transport_price: this.transportPrice, //运费
|
||
pack_price: this.packPrice, //打包费
|
||
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) {
|
||
let fullPrice = String(this.fullPrice)
|
||
//清空购物车
|
||
this.$store.commit('clearCartList')
|
||
//跳转到支付页面
|
||
uni.navigateTo({
|
||
url: `/pages/shop/pay?order_sn=${res.data.order_sn}&fullPrice=${fullPrice}`
|
||
})
|
||
} 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'
|
||
})
|
||
this.isPressed = false
|
||
}
|
||
})
|
||
}
|
||
},
|
||
filters: {
|
||
calculateTotal, //计算spu单价
|
||
formatPrice, //格式化价格
|
||
},
|
||
onShow() {
|
||
//购物车没有信息 跳转到订单查询页面
|
||
if (this.$store.state.cartList.length === 0) {
|
||
uni.redirectTo({
|
||
url: '/pages/main/order'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.subBox {
|
||
height: 122rpx;
|
||
background-color: $uni-bg-color;
|
||
z-index: 10076;
|
||
width: 100vw;
|
||
position: fixed;
|
||
bottom: 0rpx;
|
||
}
|
||
|
||
.backBox {
|
||
margin-bottom: 194rpx;
|
||
}
|
||
|
||
.colorBar {
|
||
height: 5rpx;
|
||
background-image: url('/static/colorBar.png');
|
||
background-size: contain;
|
||
/* 防止图像重复 */
|
||
background-position: center;
|
||
/* 居中显示 */
|
||
}
|
||
</style> |