Compare commits
No commits in common. "5b6787aa4969ebe28e7932e9782ca4a0bf65e44a" and "a1feb8bb4b3a1b1bd2e51fd08e09ecf2c47f275b" have entirely different histories.
5b6787aa49
...
a1feb8bb4b
4
App.vue
4
App.vue
@ -3,8 +3,8 @@
|
|||||||
// 数据初始化
|
// 数据初始化
|
||||||
onLaunch: function(options) {
|
onLaunch: function(options) {
|
||||||
//从二维码获取站点id 商铺id
|
//从二维码获取站点id 商铺id
|
||||||
this.$store.commit('setShopId', String(options.query.s))
|
this.$store.commit('setShopId', String(options.query.s));
|
||||||
this.$store.commit('setSiteId', String(options.query.z))
|
this.$store.commit('setSiteId', String(options.query.z));
|
||||||
//异步加载商铺信息
|
//异步加载商铺信息
|
||||||
this.$store.dispatch('fetchShopCon')
|
this.$store.dispatch('fetchShopCon')
|
||||||
//异步加载站点列表
|
//异步加载站点列表
|
||||||
|
|||||||
@ -1,84 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="mealsBox rad8 flex column m-r-24 m-l-24 m-t-24 p-24 bg-w boxshadow">
|
|
||||||
<view class="flex">
|
|
||||||
<view class="flex3 ofh">
|
|
||||||
<view class="fz24 fcb m-t-12">订单号：{{order.order_sn}}</view>
|
|
||||||
<view class="fz24 fcb">{{order.order_time | parseTime}}</view>
|
|
||||||
<view class="fz32 l-h-18 fb">取餐点：{{order.receive_site_name}}</view>
|
|
||||||
<view class="spuGmap flex m-t-12 ofa">
|
|
||||||
<view class="m-r-12" v-for="(ps,index) in order.product_snapshot" :key="index">
|
|
||||||
<u--image :src="ps.spu_photo[0]" width="147rpx" height="110rpx" radius="4rpx" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="flex1 flex column md">
|
|
||||||
<view class="fz28 fb fcm l-h-18">{{order.shipment_status}}</view>
|
|
||||||
<view class="priceBox fz36 fb">
|
|
||||||
¥{{Number(order.transport_price) + Number(order.pack_price) + Number(order.total_price) | formatPrice}}
|
|
||||||
</view>
|
|
||||||
<view class="fz24 fcb">共{{order.total_num}}件</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="m-t-24 flex mr">
|
|
||||||
<view class="numberBut bg-m fci rad8 fz28 fb flex mac mc" :key="foodSn">
|
|
||||||
{{ foodSn }}
|
|
||||||
</view>
|
|
||||||
<view class="nullBut border fcb rad8 fz28 flex mac mc m-l-24">申请售后</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
parseTime,
|
|
||||||
formatPrice
|
|
||||||
} from '@/utils/index.js'
|
|
||||||
export default {
|
|
||||||
name: 'orderItem',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
foodSn: '取餐号', //取餐号 文字轮播
|
|
||||||
intervalId: null, // 存储定时器ID，用于清除定时器
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onReady() {
|
|
||||||
this.intervalId = setInterval(() => {
|
|
||||||
this.foodSn = this.foodSn === '取餐号' ? this.order.food_sn : '取餐号'
|
|
||||||
}, 1200)
|
|
||||||
},
|
|
||||||
destroyed() {
|
|
||||||
// 清除定时器，避免内存泄漏
|
|
||||||
clearInterval(this.intervalId);
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
order: {
|
|
||||||
type: Object,
|
|
||||||
deep: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
filters: {
|
|
||||||
parseTime, //日期 格式化
|
|
||||||
formatPrice //价格 格式化
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.spuGmap {
|
|
||||||
height: 110rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.priceBox {
|
|
||||||
margin-top: 85rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.numberBut {
|
|
||||||
width: 130rpx;
|
|
||||||
height: 48rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nullBut {
|
|
||||||
width: 159rpx;
|
|
||||||
height: 48rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -34,7 +34,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/shop/confirm",
|
"path": "pages/shop/order",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,46 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="vh100 flex column">
|
<view class="vh100 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 mc">
|
|
||||||
<view class="avatarBox rad-c">
|
|
||||||
<u-avatar size="300rpx" :src="avatarSrc"></u-avatar>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 昵称 -->
|
|
||||||
<view class="flex mc fz28 fb m-t-24">
|
|
||||||
{{userInfo.name}}
|
|
||||||
</view>
|
|
||||||
<!-- 菜单栏 -->
|
|
||||||
<view class="m-t-24 m-r-24 m-l-24 bg-w p-24 rad8 boxshadow">
|
|
||||||
<view class="fb fz36 p-b-12 borderBDas">常用功能</view>
|
|
||||||
<view class="flex msb">
|
|
||||||
<view class="setItemBox flex mac column p-24">
|
|
||||||
<u-icon name="order" size="28"></u-icon>
|
|
||||||
<view class="fz24">订单</view>
|
|
||||||
</view>
|
|
||||||
<view class="setItemBox flex mac column p-24">
|
|
||||||
<u-icon name="map-fill" size="28"></u-icon>
|
|
||||||
<view class="fz24">地图</view>
|
|
||||||
</view>
|
|
||||||
<view class="setItemBox flex mac column p-24">
|
|
||||||
<u-icon name="server-fill" size="28"></u-icon>
|
|
||||||
<view class="fz24">客服</view>
|
|
||||||
</view>
|
|
||||||
<view class="setItemBox flex mac column p-24">
|
|
||||||
<u-icon name="setting-fill" size="28"></u-icon>
|
|
||||||
<view class="fz24">设置</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 取餐列表 -->
|
|
||||||
<orderItem v-for="order in orderList" :order=order :key="order.id"></orderItem>
|
|
||||||
<view class="reserveBox"></view>
|
|
||||||
<!-- tabbar -->
|
<!-- tabbar -->
|
||||||
<view>
|
<view>
|
||||||
<tabbar></tabbar>
|
<tabbar></tabbar>
|
||||||
@ -60,31 +19,15 @@
|
|||||||
// 当页面显示时，设置tabber的激活项
|
// 当页面显示时，设置tabber的激活项
|
||||||
this.$store.commit('setTabbarCurrent', 2)
|
this.$store.commit('setTabbarCurrent', 2)
|
||||||
},
|
},
|
||||||
computed: {
|
methods: {
|
||||||
userInfo() {
|
}
|
||||||
return this.$store.state.userInfo
|
|
||||||
},
|
|
||||||
//订单列表 过滤出 已付款的状态订单
|
|
||||||
orderList() {
|
|
||||||
return this.$store.state.orderList.filter(item => item.main_status === '已付款')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {},
|
|
||||||
methods: {}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
.avatarBox {
|
.topbar {
|
||||||
margin-top: 89rpx;
|
background-color: $uni-color-error;
|
||||||
border: 12rpx solid #fff;
|
height: 176rpx;
|
||||||
}
|
}
|
||||||
.setItemBox {
|
.topTit{margin-right: 104rpx;}
|
||||||
width: 72rpx;
|
|
||||||
height: 72rpx;
|
|
||||||
}
|
|
||||||
.reserveBox {
|
|
||||||
margin-bottom: 60rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -283,7 +283,7 @@
|
|||||||
const regex = /^(\+?\d{1,4}[\s-]?)?\d{3}\*{4}\d{4}$/
|
const regex = /^(\+?\d{1,4}[\s-]?)?\d{3}\*{4}\d{4}$/
|
||||||
if (regex.test(this.$store.state.userInfo.tel)) { //手机号合法
|
if (regex.test(this.$store.state.userInfo.tel)) { //手机号合法
|
||||||
uni.navigateTo({ //跳转到订单页面
|
uni.navigateTo({ //跳转到订单页面
|
||||||
url: '/pages/shop/confirm'
|
url: '/pages/shop/order'
|
||||||
})
|
})
|
||||||
} else { //手机号不合法 获取为空
|
} else { //手机号不合法 获取为空
|
||||||
uni.navigateTo({ //跳转到获取手机号页面
|
uni.navigateTo({ //跳转到获取手机号页面
|
||||||
|
|||||||
249
pages/shop/order.vue
Normal file
249
pages/shop/order.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