|
|
@@ -12,6 +12,7 @@
|
|
|
padding: '0 20rpx',
|
|
|
borderLeft: '1rpx solid #DDDDDD'
|
|
|
}"
|
|
|
+ @search="onSearch" @custom="onSearch"
|
|
|
></u-search>
|
|
|
</view>
|
|
|
|
|
|
@@ -31,113 +32,128 @@
|
|
|
@change="onTabChange"
|
|
|
></u-tabs>
|
|
|
|
|
|
- <scroll-view scroll-y class="detail-scroll-view">
|
|
|
- <view v-if="currentStatusTab !== 2">
|
|
|
- <view class="location-group" v-for="group in orderGroups" :key="group.location.id">
|
|
|
- <view class="location-header">
|
|
|
- <view class="location-info">
|
|
|
- <view class="location-name">{{ group.location.name }}</view>
|
|
|
- <view class="location-address">{{ group.location.address }}</view>
|
|
|
+ <view class="detail-scroll-view">
|
|
|
+ <ListScrollView ref="listScroll"
|
|
|
+ :api="api"
|
|
|
+ :init="{
|
|
|
+ ...initParams,
|
|
|
+ }">
|
|
|
+ <template v-slot:list="{ data }">
|
|
|
+ <view class="order-group" v-for="(group, oi) in data" :key="oi">
|
|
|
+ <view class="order-header">
|
|
|
+ <view class="location-info">
|
|
|
+ <view class="location-name">{{ group.address }}</view>
|
|
|
+ <view class="location-address">{{ group.region }}</view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="nav-button">
|
|
|
+ <u-icon name="map" color="#2979ff" size="36"></u-icon>
|
|
|
+ <text>导航</text>
|
|
|
+ </view> -->
|
|
|
+ <view :class="['refund-status', `status-${group.orderStatus}`]" v-if="currentStatusTab == 2">
|
|
|
+ {{ getRefundStatusText(group.orderStatus) }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="nav-button">
|
|
|
- <u-icon name="map" color="#2979ff" size="36"></u-icon>
|
|
|
- <text>导航</text>
|
|
|
+ <view v-for="(item, si) in group.orderChildren" :key="si" @click="onClick(item)">
|
|
|
+ <view class="pickup-info">
|
|
|
+ <text>取餐号:{{ item.mealNumber }}</text>
|
|
|
+ <text :class="['status', `status-${item.orderStatus}`]">{{ getStatusText(item.orderStatus) }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-item">
|
|
|
+ <u-image width="120rpx" height="120rpx" border-radius="12rpx" :src="item.productImage && `${$config.apiUrl}/${item.productImage.split(',')[0]}`" mode="aspectFill"></u-image>
|
|
|
+ <!-- <image class="goods-image" :src="item.image" mode="aspectFill"></image> -->
|
|
|
+ <view class="item-details">
|
|
|
+ <view class="item-title">{{ item.packageName }}</view>
|
|
|
+ <view class="item-desc">{{ item.dishName }}</view>
|
|
|
+ <view class="item-line">
|
|
|
+ <view class="item-quantity">数量:{{ item.packageNumber }}</view>
|
|
|
+ <view class="item-price">成团价:<text class="price-value"><text class="unit">¥</text>{{ item.price }}</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="pickup-info">
|
|
|
- <text>取餐号:{{ group.pickupCode }}</text>
|
|
|
- </view>
|
|
|
- <view class="order-item" v-for="item in group.items" :key="item.id">
|
|
|
- <u-image width="120rpx" height="120rpx" border-radius="12rpx" :src="item.image" mode="aspectFill"></u-image>
|
|
|
- <!-- <image class="goods-image" :src="item.image" mode="aspectFill"></image> -->
|
|
|
- <view class="item-details">
|
|
|
- <view class="item-title">{{ item.title }}</view>
|
|
|
- <view class="item-desc">{{ item.description }}</view>
|
|
|
- <view class="item-quantity">数量:{{ item.quantity }}</view>
|
|
|
- <view class="item-price">成团价:<text class="price-value"><text class="unit">¥</text>{{ item.price }}</text></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="group-footer">
|
|
|
- <view class="info">
|
|
|
- <view class="m">合计金额 ¥<text class="v">{{ group.totalQuantity }}</text></view>
|
|
|
- <view class="n">共{{ group.totalQuantity }}份</view>
|
|
|
- </view>
|
|
|
- <u-button v-if="currentStatusTab === 0" type="primary" size="small" text="出餐"></u-button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 售后Tab内容 -->
|
|
|
- <view v-if="currentStatusTab === 2">
|
|
|
- <view class="refund-group" v-for="item in refundList" :key="item.id">
|
|
|
- <view class="location-header">
|
|
|
- <view class="location-info">
|
|
|
- <view class="location-name">{{ item.locationName }}</view>
|
|
|
- <view class="location-address">{{ item.address }}</view>
|
|
|
- </view>
|
|
|
- <view :class="['refund-status', `status-${item.refundStatus.code}`]">
|
|
|
- {{ item.refundStatus.text }}
|
|
|
+ <view class="group-footer">
|
|
|
+ <view class="info">
|
|
|
+ <view class="m">合计金额 ¥<text class="v">{{ group.copiesAmount }}</text></view>
|
|
|
+ <view class="n">共 {{ group.copies }} 份</view>
|
|
|
+ </view>
|
|
|
+ <u-button v-if="currentStatusTab === 0" type="primary" size="small" text="出餐"></u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="pickup-info">
|
|
|
- <text>取餐号:{{ item.pickupCode }}</text>
|
|
|
- </view>
|
|
|
- <view class="order-item">
|
|
|
- <u-image width="120rpx" height="120rpx" border-radius="12rpx" :src="item.image" mode="aspectFill"></u-image>
|
|
|
- <!-- <image class="goods-image" :src="item.image" mode="aspectFill"></image> -->
|
|
|
- <view class="item-details">
|
|
|
- <view class="item-title">{{ item.title }}</view>
|
|
|
- <view class="item-desc">{{ item.description }}</view>
|
|
|
- <view class="item-quantity">数量:{{ item.quantity }}</view>
|
|
|
- <view class="item-price">成团价:<text class="price-value">¥{{ item.price }}</text></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
-
|
|
|
+ </template>
|
|
|
+ </ListScrollView>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import ListScrollView from '@/components/list-scroll-view/index.vue';
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ ListScrollView
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
+ api: {
|
|
|
+ url: '/groupmeal/merchantPackageOrder/getOrderDteails',
|
|
|
+ method: 'POST',
|
|
|
+ },
|
|
|
statusTabs: [{ name: '待出餐' }, { name: '已出餐' }, { name: '售后' }],
|
|
|
currentStatusTab: 0,
|
|
|
- // 模拟待出餐和已出餐数据
|
|
|
- orderGroups: [
|
|
|
- {
|
|
|
- location: { id: 1, name: '信达国际金融中心25层', address: '山西省太原市万柏林区迎泽西大街79号' },
|
|
|
- pickupCode: 'C-1',
|
|
|
- totalQuantity: 20,
|
|
|
- items: [
|
|
|
- { id: 101, title: '套餐名称套餐名称套餐名称', description: '米饭, 鱼香肉丝, 宫保鸡丁, 炒土豆...', quantity: 1, price: 10.8, image: '/static/demo/goods1.png' },
|
|
|
- { id: 102, title: '套餐名称套餐名称套餐名称', description: '米饭, 鱼香肉丝, 宫保鸡丁, 炒土豆...', quantity: 1, price: 14.8, image: '/static/demo/goods2.png' },
|
|
|
- { id: 103, title: '套餐名称套餐名称套餐名称', description: '米饭, 鱼香肉丝, 宫保鸡丁, 炒土豆...', quantity: 1, price: 13.1, image: '/static/demo/goods3.png' },
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- location: { id: 2, name: '国际能源7层', address: '山西省太原市万柏林区' },
|
|
|
- pickupCode: 'D-2',
|
|
|
- totalQuantity: 10,
|
|
|
- items: [
|
|
|
- { id: 201, title: '另一个套餐', description: '米饭, 红烧排骨...', quantity: 1, price: 18.8, image: '/static/demo/goods1.png' },
|
|
|
- ]
|
|
|
- }
|
|
|
- ],
|
|
|
- // 模拟售后数据
|
|
|
- refundList: [
|
|
|
- { id: 301, locationName: '信达国际金融中心25层', address: '山西省太原市万柏林区迎泽西大街79号', pickupCode: 'C-1', refundStatus: { code: 'processing', text: '退款中' }, title: '套餐名称', description: '描述...', quantity: 1, price: 10.8, image: '/static/demo/goods1.png' },
|
|
|
- { id: 302, locationName: '国际能源7层', address: '山西省太原市万柏林区', pickupCode: 'D-2', refundStatus: { code: 'applying', text: '退款申请' }, title: '套餐名称', description: '描述...', quantity: 1, price: 14.8, image: '/static/demo/goods2.png' },
|
|
|
- { id: 303, locationName: '国际能源7层', address: '山西省太原市万柏林区', pickupCode: 'E-3', refundStatus: { code: 'failed', text: '退款失败' }, title: '套餐名称', description: '描述...', quantity: 1, price: 13.1, image: '/static/demo/goods3.png' },
|
|
|
- { id: 304, locationName: '国际能源7层', address: '山西省太原市万柏林区', pickupCode: 'F-4', refundStatus: { code: 'success', text: '退款成功' }, title: '套餐名称', description: '描述...', quantity: 1, price: 10.8, image: '/static/demo/goods1.png' },
|
|
|
- ]
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ // 数据参数
|
|
|
+ initParams() {
|
|
|
+ let params = {
|
|
|
+ orderStatus: this.currentStatusTab + 1,
|
|
|
+ }
|
|
|
+ return params;
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ getStatusText(status) {
|
|
|
+ // 订单状态 0 待支付 1 待成团 2 已成团 3 已出餐 4 已送达 5 已取消 6 售后
|
|
|
+ const statusMap = {
|
|
|
+ 0: '待支付',
|
|
|
+ 1: '待成团',
|
|
|
+ 2: '已成团',
|
|
|
+ 3: '已出餐',
|
|
|
+ 4: '已送达',
|
|
|
+ 5: '已取消',
|
|
|
+ };
|
|
|
+ return statusMap[status] || '--';
|
|
|
+ },
|
|
|
+ getRefundStatusText(status) {
|
|
|
+ //
|
|
|
+ const statusMap = {
|
|
|
+ 0: '退款申请',
|
|
|
+ 1: '退款成功',
|
|
|
+ 2: '退款失败',
|
|
|
+ };
|
|
|
+ return statusMap[status] || '';
|
|
|
+ },
|
|
|
+ onSearch(value) {
|
|
|
+ this.$refs[`listScroll`].reloadList({
|
|
|
+ queryName: value,
|
|
|
+ });
|
|
|
+ },
|
|
|
onTabChange(e) {
|
|
|
this.currentStatusTab = e;
|
|
|
+ // 触发更新
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.listScroll.downCallback();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onClick(item) {
|
|
|
+ let params = {
|
|
|
+ packageId: item.packageId,
|
|
|
+ userOrderId: item.userOrderId,
|
|
|
+ hostOrderId: item.hostOrderId,
|
|
|
+ };
|
|
|
+ let str = this.$u.queryParams(params);
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/groupMeal/orders/order-details${str}`
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -163,109 +179,128 @@ export default {
|
|
|
.detail-scroll-view {
|
|
|
flex: 1;
|
|
|
height: 0;
|
|
|
-
|
|
|
- .location-group, .refund-group {
|
|
|
- margin: 24rpx;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .location-header {
|
|
|
- padding: 24rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ .item-line {
|
|
|
display: flex;
|
|
|
- align-items: flex-start;
|
|
|
+ align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- background: linear-gradient(90deg, #FDFDFF 0%, #E3F0FF 100%);
|
|
|
- .location-info {
|
|
|
- .location-name {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #303133;
|
|
|
+ }
|
|
|
+ .order-group {
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ .order-header {
|
|
|
+ padding: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: linear-gradient(90deg, #FDFDFF 0%, #E3F0FF 100%);
|
|
|
+ .location-info {
|
|
|
+ .location-name {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ .location-address {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #606266;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav-button {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #449AFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
- .location-address {
|
|
|
+ .refund-status {
|
|
|
+ font-weight: 500;
|
|
|
font-size: 26rpx;
|
|
|
- color: #606266;
|
|
|
- margin-top: 4rpx;
|
|
|
+ color: #449AFF;
|
|
|
+ &.status-applying { color: #f9ae3d; }
|
|
|
+ &.status-failed { color: #fa3534; }
|
|
|
+ &.status-success { color: #19be6b; }
|
|
|
}
|
|
|
}
|
|
|
- .nav-button {
|
|
|
+ .pickup-info {
|
|
|
font-weight: 500;
|
|
|
font-size: 26rpx;
|
|
|
color: #449AFF;
|
|
|
+ padding: 24rpx 25rpx 0;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
- .refund-status {
|
|
|
- font-size: 26rpx;
|
|
|
- &.status-processing { color: #f9ae3d; }
|
|
|
- &.status-applying { color: #f9ae3d; }
|
|
|
- &.status-failed { color: #fa3534; }
|
|
|
- &.status-success { color: #19be6b; }
|
|
|
- }
|
|
|
- }
|
|
|
- .pickup-info {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #449AFF;
|
|
|
- padding: 24rpx 25rpx 12rpx;
|
|
|
- }
|
|
|
- .order-item {
|
|
|
- display: flex;
|
|
|
- padding: 12rpx 24rpx;
|
|
|
- .goods-image {
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
- border-radius: 12rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
- .item-details {
|
|
|
- flex: 1;
|
|
|
- margin-left: 20rpx;
|
|
|
- .item-title {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: bold;
|
|
|
+ justify-content: space-between;
|
|
|
+ .status {
|
|
|
+ min-width: 100rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding: 4rpx 12rpx;
|
|
|
+ background: #F1F8FF;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ &.status-2 {
|
|
|
+ color: #8B93A7;
|
|
|
+ background: rgba(139,147,167,0.1);
|
|
|
+ }
|
|
|
}
|
|
|
- .item-desc, .item-quantity {
|
|
|
- font-size: 22rpx;
|
|
|
- color: #8A91A8;
|
|
|
- margin-top: 6rpx;
|
|
|
+ }
|
|
|
+ .order-item {
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ .goods-image {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
- .item-price {
|
|
|
- font-size: 22rpx;
|
|
|
- color: #8A91A8;
|
|
|
- margin-top: 6rpx;
|
|
|
- .price-value {
|
|
|
- color: #FD4912;
|
|
|
- font-size: 32rpx;
|
|
|
+ .item-details {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ .item-title {
|
|
|
+ font-size: 28rpx;
|
|
|
font-weight: bold;
|
|
|
- .unit {
|
|
|
- font-size: 22rpx;
|
|
|
+ }
|
|
|
+ .item-desc, .item-quantity {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #8A91A8;
|
|
|
+ margin-top: 6rpx;
|
|
|
+ }
|
|
|
+ .item-price {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #8A91A8;
|
|
|
+ margin-top: 6rpx;
|
|
|
+ .price-value {
|
|
|
+ color: #FD4912;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ .unit {
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .group-footer {
|
|
|
- padding: 24rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- border-top: 1rpx solid #f0f0f0;
|
|
|
- .info {
|
|
|
- .m {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #FF6A42;
|
|
|
- .v {
|
|
|
- font-size: 36rpx;
|
|
|
+ .group-footer {
|
|
|
+ padding: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-top: 1rpx solid #f0f0f0;
|
|
|
+ .info {
|
|
|
+ .m {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #FF6A42;
|
|
|
+ .v {
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .n {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #666666;
|
|
|
}
|
|
|
- }
|
|
|
- .n {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #666666;
|
|
|
}
|
|
|
}
|
|
|
}
|