diff --git a/components/order/OrderItem.vue b/components/order/OrderItem.vue
new file mode 100644
index 0000000..50e681c
--- /dev/null
+++ b/components/order/OrderItem.vue
@@ -0,0 +1,237 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 共{{ order.foodCount }}个
+
+
+
+
+
+ 下单时间：{{ order.orderTime }}
+
+ 合计:
+ ￥{{ order.totalPrice.toFixed(2) }}
+
+
+
+
+
+
+
+ 全力奔跑中，请耐心等待哦！
+ 您的餐点已送到取餐点，请尽快取餐
+
+
+ 取消订单
+
+
+ 立即下单
+
+
+ 查看订单
+
+
+ 订单售后
+
+
+ 取餐完成
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 841cd5a..6027566 100644
--- a/pages.json
+++ b/pages.json
@@ -51,6 +51,13 @@
"enablePullDownRefresh": true
}
},
+ {
+ "path": "order/newOrderDetail",
+ "style": {
+ "navigationBarTitleText": "待支付订单",
+ "navigationStyle": "custom"
+ }
+ },
{
"path": "mine/purse"
},
@@ -84,6 +91,9 @@
{
"path": "order/createOrder"
},
+ {
+ "path": "order/afterSale"
+ },
{
"path": "mine/balance"
},
@@ -131,6 +141,12 @@
},
{
"path": "order/receiveGift"
+ },
+ {
+ "path": "location/pickupPoint",
+ "style": {
+ "navigationBarTitleText": "取餐点选择"
+ }
}
]
}],
diff --git a/pages/index/order.vue b/pages/index/order.vue
index 161dcdc..221931a 100644
--- a/pages/index/order.vue
+++ b/pages/index/order.vue
@@ -1,21 +1,34 @@
-
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
-
+
+
@@ -95,37 +108,58 @@
import mixinsOrder from '@/mixins/order.js'
import tabber from '@/components/base/tabbar.vue'
import customerServicePopup from '@/components/config/customerServicePopup.vue'
+ import OrderItem from '@/components/order/OrderItem.vue'
+ import mockOrders from '@/static/js/mockOrders.js'
export default {
mixins: [mixinsList, mixinsOrder],
components: {
tabber,
customerServicePopup,
+ OrderItem
},
computed: {},
data() {
return {
+ keyword: '',
+ // tabs: [{
+ // name: '全部'
+ // },
+ // {
+ // name: '待付款'
+ // },
+ // {
+ // name: '待发货'
+ // },
+ // {
+ // name: '待收货'
+ // },
+ // {
+ // name: '已完成'
+ // },
+ // {
+ // name: '已取消'
+ // }
+ // ],
tabs: [{
- name: '全部'
- },
- {
- name: '待付款'
- },
- {
- name: '待发货'
- },
- {
- name: '待收货'
- },
- {
- name: '已完成'
- },
- {
- name: '已取消'
- }
+ name: '待支付'
+ },
+ {
+ name: '待出餐'
+ },
+ {
+ name: '送餐中'
+ },
+ {
+ name: '待取餐'
+ },
+ {
+ name: '已完成'
+ }
],
current: 0,
mixinsListApi: 'getOrderPageList',
+ orderList: [],
}
},
onLoad(args) {
@@ -133,6 +167,10 @@
this.clickTabs({
index: this.current
})
+
+ // 加载模拟订单数据
+ this.loadMockOrders()
+ this.filterOrdersByStatus(this.current)
},
methods: {
//点击tab栏
@@ -144,14 +182,102 @@
} else {
this.queryParams.state = index - 1
}
- this.getData()
+ // 关闭请求
+ // this.getData()
+
+ // 模拟根据状态筛选订单
+ this.filterOrdersByStatus(index)
+ },
+ // 跳转到新订单详情页
+ goToOrderDetail(order) {
+ if (order.status === 'completed') {
+ tthis.$utils.navigateTo({
+ url: '/pages_order/order/newOrderDetail?id=' + order.id + '&status=' + order.status
+ })
+ } else {
+ this.$utils.navigateTo({
+ url: '/pages_order/order/newOrderDetail?id=' + order.id + '&status=' + order.status
+ })
+ }
+ },
+ // 加载模拟订单数据
+ loadMockOrders() {
+ this.orderList = mockOrders
},
- //跳转订单详情页面
- toOrderDetail(id) {
- uni.navigateTo({
- url: '/pages_order/order/orderDetail?id=' + id
+ // 根据状态筛选订单
+ filterOrdersByStatus(index) {
+ this.loadMockOrders() // 先重置数据
+
+ // if (index === 0) return // 全部订单不需要筛选
+
+ const statusMap = {
+ 0: 'pending', // 待支付
+ 1: 'processing', // 待出餐
+ 2: 'shipping', // 送餐中
+ 3: 'delivered', // 待取餐
+ 4: 'completed' // 已完成
+ }
+
+ const targetStatus = statusMap[index]
+ if (targetStatus) {
+ this.orderList = this.orderList.filter(order => order.status === targetStatus)
+ }
+ },
+ // 处理取消订单
+ handleCancelOrder(orderId) {
+ uni.showModal({
+ title: '提示',
+ content: '确定要取消订单吗？',
+ success: (res) => {
+ if (res.confirm) {
+ // 模拟取消订单API调用
+ uni.showToast({
+ title: '订单已取消',
+ icon: 'success'
+ })
+
+ // 更新订单状态
+ const orderIndex = this.orderList.findIndex(item => item.id === orderId)
+ if (orderIndex !== -1) {
+ this.orderList[orderIndex].status = 'canceled'
+
+ // 如果当前标签页不是全部或已取消，则移除该订单
+ if (this.current !== 0 && this.current !== 5) {
+ this.orderList.splice(orderIndex, 1)
+ }
+ }
+ }
+ }
})
},
+ // 处理支付订单
+ handlePayOrder(orderId) {
+ uni.showToast({
+ title: '正在跳转支付...',
+ icon: 'loading'
+ })
+
+ // 模拟支付操作，实际项目中应调用支付API
+ setTimeout(() => {
+ uni.hideToast()
+
+ uni.showToast({
+ title: '支付成功',
+ icon: 'success'
+ })
+
+ // 更新订单状态
+ const orderIndex = this.orderList.findIndex(item => item.id === orderId)
+ if (orderIndex !== -1) {
+ this.orderList[orderIndex].status = 'processing'
+
+ // 如果当前标签页不是全部或待发货，则移除该订单
+ if (this.current !== 0 && this.current !== 2) {
+ this.orderList.splice(orderIndex, 1)
+ }
+ }
+ }, 1500)
+ }
}
}
@@ -160,7 +286,13 @@
.page {}
.tabs {
- background: $uni-color;
+ background: #fff;
+ padding-bottom: 4rpx;
+ }
+
+ .order-list {
+ padding: 0 20rpx;
+ // position: relative;
}
.list {
diff --git a/pages_order/components/order/placeOrder.vue b/pages_order/components/order/placeOrder.vue
index 2dfbc1d..82c62c5 100644
--- a/pages_order/components/order/placeOrder.vue
+++ b/pages_order/components/order/placeOrder.vue
@@ -6,15 +6,25 @@
2563人下单
+
+
+
-
+
-
+
+
请选择取餐地点
+
+
+ {{ pickupPoint.name }}，{{ pickupPoint.phone }}
+
+ {{ pickupPoint.address }}
+
@@ -98,7 +108,8 @@ export default {
data() {
return {
value: 1,
- payMethod: 'weixin'
+ payMethod: 'weixin',
+ pickupPoint: null
}
},
methods: {
@@ -106,14 +117,40 @@ export default {
open() {
this.$refs.popup.open();
},
+ // 添加close方法，用于关闭弹窗
+ close(){
+ this.$refs.popup.close();
+ },
// 添加change方法，用于处理弹窗状态变化
change(e) {
console.log('弹窗状态变化:', e);
// 可以在这里添加弹窗打开或关闭后的逻辑处理
+ },
+ // 跳转到取餐点选择页面
+ gotoPickupPoint() {
+ this.$utils.navigateTo('/pages_order/location/pickupPoint')
+ // uni.navigateTo({
+ // url: '/pages_order/location/pickupPoint'
+ // });
+ },
+
+ // 获取并监听取餐点选择事件
+ listenPickupPoint() {
+ const pickupPointStr = uni.getStorageSync('selectedPickupPoint');
+ if (pickupPointStr) {
+ this.pickupPoint = JSON.parse(pickupPointStr);
+ }
+ uni.$on('updatePickupPoint', (point) => {
+ this.pickupPoint = point;
+ })
}
},
mounted(){
- this.open()
+ this.open();
+ this.listenPickupPoint();
+ },
+ beforeDestroy() {
+ uni.$off('updatePickupPoint');
}
}
@@ -125,6 +162,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
+ position: relative;
.number{
color: $uni-color;
}
@@ -135,11 +173,19 @@ export default {
width: 100rpx;
height: 50rpx;
}
+ .place-order-title-close{
+ position: absolute;
+ right: 20rpx;
+ top: 50%;
+ transform: translateY(-50%);
+ color: $uni-color-third;
+ }
}
.place-order-address{
display: flex;
height: 80rpx;
line-height: 80rpx;
+ align-items: center;
// background-color: red;
gap: 30rpx;
padding-left: 20rpx;
@@ -148,11 +194,31 @@ export default {
font-size: 32rpx;
font-weight: 500;
}
- .place-order-address-arrow{
+ &-arrow{
position: absolute;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
+ }
+ &-content{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ gap: 0rpx;
+ height: 100%;
+ // width: 100%;
+ &-name{
+ height: 30rpx;
+ line-height: 30rpx;
+ }
+ &-address{
+ height: 30rpx;
+ line-height: 30rpx;
+ width: 90%;
+ text-overflow: ellipsis; // 三个连着一起才会出现省略号
+ overflow: hidden;
+ white-space: nowrap;
+ }
}
}
.item{
diff --git a/pages_order/location/pickupPoint.vue b/pages_order/location/pickupPoint.vue
new file mode 100644
index 0000000..94988e5
--- /dev/null
+++ b/pages_order/location/pickupPoint.vue
@@ -0,0 +1,189 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{item.name}}
+
+
+ {{item.address}}
+
+
+
+ {{item.phone}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/pages_order/order/afterSale.vue b/pages_order/order/afterSale.vue
new file mode 100644
index 0000000..d6c818e
--- /dev/null
+++ b/pages_order/order/afterSale.vue
@@ -0,0 +1,296 @@
+
+
+
+
+
+
+
+
+
+
+
+ 请描述具体问题
+
+
+
+
+
+
+
+
+
+
+ 请提供相关问题的截图或图片
+
+
+
+
+
+
+
+
+
+
+
+
+ 添加图片
+
+
+
+
+
+
+
+
+
+ 联系方式
+
+
+
+
+
+
+
+
+
+ 提交
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages_order/order/newOrderDetail.vue b/pages_order/order/newOrderDetail.vue
new file mode 100644
index 0000000..af57609
--- /dev/null
+++ b/pages_order/order/newOrderDetail.vue
@@ -0,0 +1,554 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{food.name}}
+
+
+ 已售出 {{food.soldCount}}单
+
+ ￥ {{food.price.toFixed(1)}}
+ ×{{food.count}}
+
+
+
+ {{showAllFoods ? '收起' : '展开'}} (共{{orderDetail.foodCount}}个)
+
+
+
+
+
+
+
+
+ 合计:
+ ￥{{orderDetail.totalPrice.toFixed(2)}}
+
+
+ 创建时间:
+ {{orderDetail.orderTime}}
+
+
+ 订单编号:
+ {{orderDetail.id}}
+
+
+
+
+
+
+
+
+
+
+ 新用户立减
+
+ -￥2
+
+
+
+
+
+
+
+
+
+
+
+
+ 微信支付
+
+
+
+
+ 账户余额(余额: ￥0)
+
+
+
+
+
+
+
+
+ 共{{orderDetail.foodCount}}个，合计
+ ￥{{(orderDetail.totalPrice - 2).toFixed(1)}}
+
+ 立即下单
+ 立即取餐
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/image/古茗店面.webp b/static/image/古茗店面.webp
new file mode 100644
index 0000000..28aab00
Binary files /dev/null and b/static/image/古茗店面.webp differ
diff --git a/static/js/mockOrders.js b/static/js/mockOrders.js
new file mode 100644
index 0000000..ec9a007
--- /dev/null
+++ b/static/js/mockOrders.js
@@ -0,0 +1,123 @@
+export default [
+ {
+ id: '20241223184523001',
+ shopName: '轻奢时代芙蓉兴盛',
+ shopLogo: '/static/image/古茗店面.webp',
+ foods: [
+ { id: 1, name: '红烧肉', image: '/static/image/红烧肉.png' },
+ { id: 2, name: '青椒炒肉', image: '/static/image/红烧肉.png' },
+ { id: 3, name: '香菇炒肉', image: '/static/image/红烧肉.png' },
+ { id: 4, name: '豆角炒肉', image: '/static/image/红烧肉.png' },
+ { id: 5, name: '豆角炒肉', image: '/static/image/红烧肉.png' },
+ { id: 6, name: '豆角炒肉', image: '/static/image/红烧肉.png' },
+ { id: 7, name: '豆角炒肉', image: '/static/image/红烧肉.png' }
+ ],
+ foodCount: 10,
+ orderTime: '2024-12-23 18:45:23',
+ totalPrice: 88.00,
+ status: 'pending'
+ },
+ {
+ id: '20241223184523001',
+ shopName: '轻奢时代芙蓉兴盛',
+ shopLogo: '/static/image/古茗店面.webp',
+ foods: [
+ { id: 1, name: '红烧肉', image: '/static/image/红烧肉.png' },
+ { id: 2, name: '青椒炒肉', image: '/static/image/红烧肉.png' },
+ { id: 3, name: '香菇炒肉', image: '/static/image/红烧肉.png' },
+ { id: 4, name: '豆角炒肉', image: '/static/image/红烧肉.png' },
+ { id: 5, name: '豆角炒肉', image: '/static/image/红烧肉.png' },
+ { id: 6, name: '豆角炒肉', image: '/static/image/红烧肉.png' },
+ { id: 7, name: '豆角炒肉', image: '/static/image/红烧肉.png' }
+ ],
+ foodCount: 10,
+ orderTime: '2024-12-23 18:45:23',
+ totalPrice: 88.00,
+ status: 'pending'
+ },
+ {
+ id: '20241223184523001',
+ shopName: '轻奢时代芙蓉兴盛',
+ shopLogo: '/static/image/古茗店面.webp',
+ foods: [
+ { id: 1, name: '红烧肉', image: '/static/image/红烧肉.png' },
+ { id: 2, name: '青椒炒肉', image: '/static/image/红烧肉.png' },
+ { id: 3, name: '香菇炒肉', image: '/static/image/红烧肉.png' },
+ { id: 4, name: '豆角炒肉', image: '/static/image/红烧肉.png' },
+ { id: 5, name: '豆角炒肉', image: '/static/image/红烧肉.png' },
+ { id: 6, name: '豆角炒肉', image: '/static/image/红烧肉.png' },
+ { id: 7, name: '豆角炒肉', image: '/static/image/红烧肉.png' }
+ ],
+ foodCount: 10,
+ orderTime: '2024-12-23 18:45:23',
+ totalPrice: 88.00,
+ status: 'pending'
+ },
+ {
+ id: '20241223184523002',
+ shopName: '爷爷不泡茶奶茶店(鲁北路)',
+ shopLogo: '/static/image/古茗店面.webp',
+ foods: [
+ { id: 1, name: '红烧肉', image: '/static/image/红烧肉.png' },
+ { id: 2, name: '青椒炒肉', image: '/static/image/红烧肉.png' },
+ { id: 3, name: '香菇炒肉', image: '/static/image/红烧肉.png' },
+ { id: 4, name: '豆角炒肉', image: '/static/image/红烧肉.png' }
+ ],
+ foodCount: 10,
+ orderTime: '2024-12-23 18:45:23',
+ totalPrice: 88.00,
+ status: 'pending'
+ },
+ {
+ id: '20241223184523003',
+ shopName: '芙蓉兴盛小文轩便利店',
+ shopLogo: '/static/image/古茗店面.webp',
+ foods: [
+ { id: 5, name: '回锅肉', image: '/static/image/红烧肉.png' },
+ { id: 6, name: '豆角炒鸡蛋', image: '/static/image/红烧肉.png' }
+ ],
+ foodCount: 4,
+ orderTime: '2024-12-23 17:30:15',
+ totalPrice: 45.50,
+ status: 'processing'
+ },
+ {
+ id: '20241223184523003',
+ shopName: '晨光文具店',
+ shopLogo: '/static/image/古茗店面.webp',
+ foods: [
+ { id: 5, name: '回锅肉', image: '/static/image/红烧肉.png' },
+ { id: 6, name: '豆角炒鸡蛋', image: '/static/image/红烧肉.png' }
+ ],
+ foodCount: 4,
+ orderTime: '2024-12-23 17:30:15',
+ totalPrice: 45.50,
+ status: 'shipping'
+ },
+ {
+ id: '20241223184523003',
+ shopName: 'KFC肯德基中山路店',
+ shopLogo: '/static/image/古茗店面.webp',
+ foods: [
+ { id: 5, name: '回锅肉', image: '/static/image/红烧肉.png' },
+ { id: 6, name: '豆角炒鸡蛋', image: '/static/image/红烧肉.png' }
+ ],
+ foodCount: 4,
+ orderTime: '2024-12-23 17:30:15',
+ totalPrice: 45.50,
+ status: 'delivered'
+ },
+ {
+ id: '20241223184523003',
+ shopName: '轩宇蛋炒饭',
+ shopLogo: '/static/image/古茗店面.webp',
+ foods: [
+ { id: 5, name: '回锅肉', image: '/static/image/红烧肉.png' },
+ { id: 6, name: '豆角炒鸡蛋', image: '/static/image/红烧肉.png' }
+ ],
+ foodCount: 4,
+ orderTime: '2024-12-23 17:30:15',
+ totalPrice: 45.50,
+ status: 'completed'
+ },
+];
\ No newline at end of file
diff --git a/uni.scss b/uni.scss
index e38d268..af18934 100644
--- a/uni.scss
+++ b/uni.scss
@@ -14,6 +14,7 @@
/* 颜色变量 */
$uni-color: #019245;
$uni-color-second: #FF2A2A;
+$uni-color-third: #999;
/* 行为相关颜色 */
$uni-color-primary: #007aff;