【类 型】：docs
【原 因】：order.vue 重名 改为confirm.vue 【过 程】： 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
This commit is contained in:
parent
6abfd95c8a
commit
5571f967ac
@ -12,5 +12,9 @@
|
||||
"mqtt": "^2.18.9",
|
||||
"uview-ui": "^2.0.36"
|
||||
},
|
||||
"description": ""
|
||||
}
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "http://111.229.174.37:3000/Food/food_wechat.git"
|
||||
},
|
||||
"description": "飞行魔方，物流、送餐小程序"
|
||||
}
|
||||
249
pages/shop/confirm.vue
Normal file
249
pages/shop/confirm.vue
Normal file
@ -0,0 +1,249 @@
|
||||
<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>
|
||||
Loading…
Reference in New Issue
Block a user