|
|
|
@ -1,27 +1,28 @@ |
|
|
|
<template> |
|
|
|
<view class="page"> |
|
|
|
<!-- 导航栏 --> |
|
|
|
<navbar :title="orderStatus === 'pending' ? '待支付订单' : '订单详情' " leftClick @leftClick="navigateBack" bgColor="#019245" color="#fff" /> |
|
|
|
<navbar :title="orderStatus === 'pending' ? '待支付订单' : '订单详情' " leftClick @leftClick="navigateBack" bgColor="#019245" |
|
|
|
color="#fff" /> |
|
|
|
|
|
|
|
<!-- 店铺信息 --> |
|
|
|
<view class="shop-info"> |
|
|
|
<view class="shop-header"> |
|
|
|
<image class="shop-logo" :src="orderDetail.shopLogo" mode="aspectFill"></image> |
|
|
|
<image class="shop-logo" :src="teamLeader.spotImage" mode="aspectFill"></image> |
|
|
|
<view class="shop-name-container"> |
|
|
|
<text class="shop-name">{{orderDetail.shopName}}</text> |
|
|
|
<text class="shop-name"> {{ teamLeader.spotName }} </text> |
|
|
|
<view class="shop-address"> |
|
|
|
<view style="padding-top: 7rpx;"> |
|
|
|
<!-- 需要置顶 --> |
|
|
|
<uv-icon name="map-fill" color="#019245" size="28rpx"></uv-icon> |
|
|
|
</view> |
|
|
|
<text class="address-text">{{orderDetail.shopAddress}}</text> |
|
|
|
<text class="address-text">{{ teamLeader.area }} {{ teamLeader.address }}</text> |
|
|
|
</view> |
|
|
|
<view class="shop-phone"> |
|
|
|
<view style="padding-top: 7rpx;"> |
|
|
|
<!-- 需要置顶 --> |
|
|
|
<uv-icon name="phone-fill" color="#019245" size="28rpx"></uv-icon> |
|
|
|
</view> |
|
|
|
<text class="phone-text">{{orderDetail.shopPhone}}</text> |
|
|
|
<text class="phone-text">{{teamLeader.phone}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -30,20 +31,20 @@ |
|
|
|
<view class="order-status"> |
|
|
|
<!-- 商品列表 --> |
|
|
|
<view class="food-list"> |
|
|
|
<view class="food-item" v-for="(food, index) in showedFoods" :key="index"> |
|
|
|
<image class="food-image" :src="food.image" mode="aspectFill" /> |
|
|
|
<view class="food-item" v-for="(food, index) in showedFoods" :key="food.id"> |
|
|
|
<image class="food-image" :src="food.goods.image" mode="aspectFill" /> |
|
|
|
<view class="food-info"> |
|
|
|
<text class="food-name">{{food.name}}</text> |
|
|
|
<text class="food-name">{{food.goods.title}}</text> |
|
|
|
<view class="food-sold"> |
|
|
|
<uv-icon name="bag" size="28rpx"></uv-icon> |
|
|
|
<text>已售出 {{food.soldCount}}单</text> |
|
|
|
<text>已售出 {{ food.goods.sales }}单</text> |
|
|
|
</view> |
|
|
|
<text class="food-price"> <text style="font-size: 20rpx;">￥</text> {{food.price.toFixed(1)}}</text> |
|
|
|
<text class="food-count">×{{food.count}}</text> |
|
|
|
<text class="food-price"> <text style="font-size: 20rpx;">￥</text> {{food.goods.price}}</text> |
|
|
|
<text class="food-count">×{{food.num}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="expand-more" @tap="showAllFoods = !showAllFoods" v-if="orderDetail.foods.length > 3"> |
|
|
|
<text>{{showAllFoods ? '收起' : '展开'}} (共{{orderDetail.foodCount}}个)</text> |
|
|
|
<view class="expand-more" @tap="showAllFoods = !showAllFoods" v-if="orderDetail.goodsList.length > 3"> |
|
|
|
<text>{{showAllFoods ? '收起' : '展开'}} (共{{orderDetail.goodsList.length}}个)</text> |
|
|
|
<uv-icon :name="showAllFoods ? 'arrow-up' : 'arrow-down'" size="28rpx"></uv-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -53,11 +54,11 @@ |
|
|
|
<view class="order-info"> |
|
|
|
<view class="info-item"> |
|
|
|
<text class="info-label">合计:</text> |
|
|
|
<text class="info-value price">￥{{orderDetail.totalPrice.toFixed(2)}}</text> |
|
|
|
<text class="info-value price">￥{{ orderDetail.priceAll }}</text> |
|
|
|
</view> |
|
|
|
<view class="info-item"> |
|
|
|
<text class="info-label">创建时间:</text> |
|
|
|
<text class="info-value">{{orderDetail.orderTime}}</text> |
|
|
|
<text class="info-value">{{ orderDetail.createTime }}</text> |
|
|
|
</view> |
|
|
|
<view class="info-item"> |
|
|
|
<text class="info-label">订单编号:</text> |
|
|
|
@ -76,7 +77,7 @@ |
|
|
|
<image src="@/static/image/券.webp" mode="aspectFill" class="coupon-icon" /> |
|
|
|
<view>新用户立减</view> |
|
|
|
</view> |
|
|
|
<text class="discount-amount">-￥2</text> |
|
|
|
<text class="discount-amount">-￥{{ orderDetail.pricePreferential }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -86,15 +87,15 @@ |
|
|
|
<text>备注</text> |
|
|
|
</view> |
|
|
|
<view class="remark-content"> |
|
|
|
<input type="text" v-model="orderDetail.remark" placeholder="请输入您要备注的内容" |
|
|
|
placeholder-style="font-size: 28rpx" /> |
|
|
|
<!-- <text>{{orderDetail.remark || '无备注信息'}}</text> --> |
|
|
|
<input v-if="orderDetail.status_dictText === '待支付'" type="text" v-model="orderDetail.remark" |
|
|
|
placeholder="请输入您要备注的内容" placeholder-style="font-size: 28rpx" /> |
|
|
|
<text v-else>{{orderDetail.remark || '无备注信息'}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 支付方式 --> |
|
|
|
<uv-radio-group v-model="payMethod" v-if="orderStatus === 'pending'"> |
|
|
|
<uv-radio-group v-model="payMethod" v-if="orderDetail.status_dictText === '待支付'"> |
|
|
|
<view class="payment-methods"> |
|
|
|
<view class="payment-item"> |
|
|
|
<uv-icon name="weixin-circle-fill" size="70rpx" color="#019245"></uv-icon> |
|
|
|
@ -103,8 +104,8 @@ |
|
|
|
</view> |
|
|
|
<view class="payment-item"> |
|
|
|
<uv-icon name="red-packet" size="70rpx" color="#019245"></uv-icon> |
|
|
|
<text class="payment-name">账户余额<text class="balance-text">(余额: ￥0)</text></text> |
|
|
|
<uv-radio activeColor="#019245" size="40rpx" name="account"></uv-radio> |
|
|
|
<text class="payment-name">账户余额<text class="balance-text">(余额: ￥{{ userInfo.balance }})</text></text> |
|
|
|
<uv-radio activeColor="#019245" size="40rpx" name="account" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</uv-radio-group> |
|
|
|
@ -112,11 +113,11 @@ |
|
|
|
<!-- 底部支付栏 --> |
|
|
|
<view class="bottom-bar"> |
|
|
|
<view class="total-section"> |
|
|
|
<text class="total-label">共{{orderDetail.foodCount}}个，<text style="color: black;">合计</text> </text> |
|
|
|
<text class="total-price">￥{{(orderDetail.totalPrice - 2).toFixed(1)}}</text> |
|
|
|
<text class="total-label">共{{ orderDetail.goodsList.length || 0 }}个，<text style="color: black;">合计</text> </text> |
|
|
|
<text class="total-price">￥{{ orderDetail.pricePay }}</text> |
|
|
|
</view> |
|
|
|
<view class="pay-button" @tap="handlePay" v-if="orderStatus === 'pending'">立即下单</view> |
|
|
|
<view class="pay-button" @tap="handlePay" v-if="orderStatus === 'delivered'">立即取餐</view> |
|
|
|
<view class="pay-button" @tap="handlePay" v-if="orderStatus === '待支付'">立即下单</view> |
|
|
|
<view class="pay-button" @tap="handlePay" v-if="orderStatus === '已送达'">立即取餐</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
@ -134,60 +135,7 @@ |
|
|
|
payMethod: 'weixin', |
|
|
|
showAllFoods: false, |
|
|
|
orderStatus: '', |
|
|
|
orderDetail: { |
|
|
|
id: '324563256386532', |
|
|
|
status: 'pending', |
|
|
|
shopName: '轻奢时代芙蓉兴盛', |
|
|
|
shopLogo: '/static/image/古茗店面.webp', |
|
|
|
shopAddress: '长沙市雨花区时代阳光大道轻奢时代芙蓉兴盛', |
|
|
|
shopPhone: '15070023168', |
|
|
|
foods: [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
name: '茄子肉沫', |
|
|
|
image: '/static/image/红烧肉.webp', |
|
|
|
price: 9.9, |
|
|
|
count: 1, |
|
|
|
soldCount: 100 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
name: '豆角炒鸡蛋', |
|
|
|
image: '/static/image/红烧肉.webp', |
|
|
|
price: 9.9, |
|
|
|
count: 1, |
|
|
|
soldCount: 100 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
name: '酸辣土豆丝', |
|
|
|
image: '/static/image/红烧肉.webp', |
|
|
|
price: 9.9, |
|
|
|
count: 1, |
|
|
|
soldCount: 100 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
name: '酸辣土豆丝', |
|
|
|
image: '/static/image/红烧肉.webp', |
|
|
|
price: 9.9, |
|
|
|
count: 1, |
|
|
|
soldCount: 100 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
name: '酸辣土豆丝', |
|
|
|
image: '/static/image/红烧肉.webp', |
|
|
|
price: 9.9, |
|
|
|
count: 1, |
|
|
|
soldCount: 100 |
|
|
|
} |
|
|
|
], |
|
|
|
foodCount: 10, |
|
|
|
orderTime: '2025-04-09 14:32:46', |
|
|
|
totalPrice: 88.00, |
|
|
|
remark: '' |
|
|
|
} |
|
|
|
orderDetail: { } |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -203,16 +151,16 @@ |
|
|
|
return statusMap[this.orderDetail.status] || '等待支付' |
|
|
|
}, |
|
|
|
showedFoods() { |
|
|
|
return this.showAllFoods ? this.orderDetail.foods : this.orderDetail.foods.slice(0, 3) |
|
|
|
return this.showAllFoods ? this.orderDetail.goodsList : this.orderDetail.goodsList.slice(0, 3) |
|
|
|
}, |
|
|
|
teamLeader() { |
|
|
|
return this.orderDetail.teamLeader |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(options) { |
|
|
|
// 获取订单ID |
|
|
|
|
|
|
|
if (options.id) { |
|
|
|
this.id = options.id |
|
|
|
// 这里应该根据ID从服务器获取订单详情 |
|
|
|
// this.getOrderDetail(this.id) |
|
|
|
// 这里假设是从订单列表页面跳转过来获取的订单状态 |
|
|
|
this.getOrderDetail(options.id) |
|
|
|
} |
|
|
|
this.orderStatus = options.status |
|
|
|
}, |
|
|
|
@ -224,8 +172,17 @@ |
|
|
|
|
|
|
|
// 获取订单详情 |
|
|
|
getOrderDetail(id) { |
|
|
|
// 这里应该是API请求 |
|
|
|
// 目前使用模拟数据 |
|
|
|
this.id = id |
|
|
|
this.$api('queryMemberOrderList', { |
|
|
|
id: this.id |
|
|
|
}, res => { |
|
|
|
if (res.code === 200) { |
|
|
|
this.orderDetail = res.result.records[0] |
|
|
|
// console.log('111', this.orderDetail); |
|
|
|
console.log('222', this.showedFoods); |
|
|
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
// 处理支付 |
|
|
|
@ -292,7 +249,7 @@ |
|
|
|
.shop-logo { |
|
|
|
width: 150rpx; |
|
|
|
height: 150rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
// border-radius: 10rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
@ -348,9 +305,8 @@ |
|
|
|
.food-image { |
|
|
|
width: 120rpx; |
|
|
|
height: 120rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
// border-radius: 10rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.food-info { |
|
|
|
|
hflllll
5 months ago