front-end/ghsApp/src/admin/order/orderListByDist.vue

<template>
  <view class="app-main app-content">
    <view class="input-wrap_box">
      <view class="select-dn_bx">
        <DateSelect class="bar" top="0" @selectDateFn="selectDateFn" defaultShowName="今天" :isShowMonth="false" :customDateOption="myCustomDateOption" :maxDays="7" />
      </view>
    </view>

    <view class="list-wrap">
      <view class="table-header">
        <text class="col-index-header">序号</text>
        <text class="col-name">名称</text>
        <text class="col-phone">电话</text>
        <text class="col-address">地址</text>
      </view>

      <block v-if="!$util.isEmpty(distList)">
        <view class="dist-block" v-for="distItem in distList" :key="distItem.distKey">
          <view class="dist-title">{{ distItem.distName }}</view>
          <view class="custom-row" v-for="(customItems, index) in distItem.orderList" :key="index" @click="handleRowClick(customItems)">
            <view class="row-content">
              <block v-if="customItems.length === 1">
                <text class="col-index">{{ index + 1 }}</text>
                <text class="col-name">{{ customItems[0].name }}</text>
                <text class="col-phone">{{ customItems[0].phone }}</text>
                <text class="col-address">{{ customItems[0].address }}</text>
              </block>
              <block v-else-if="customItems.length > 1">
                <text class="col-index">{{ index + 1 }}</text>
                <text class="col-name" style="color: #3385FF;">{{ customItems[0].name }}</text>
                <text class="col-phone" style="color: #3385FF;">{{ customItems[0].phone }}</text>
                <text class="col-address" style="color: #3385FF;">{{ customItems[0].address }}</text>
              </block>
            </view>
            <block v-if="getRemarks(customItems).length > 0">
              <view class="row-remark" v-for="(remarkItem, rIndex) in getRemarks(customItems)" :key="'remark-' + rIndex" style="font-weight:bold;">
                <text style="font-size:28upx;">{{ remarkItem.label }}：</text>{{ remarkItem.text }}
              </view>
            </block>
          </view>
        </view>
      </block>
      <block v-else>
        <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(distList)" />
      </block>
    </view>

    <NotLogin></NotLogin>

    <!-- 弹窗 -->
    <view class="popup-mask" v-if="showPopup" @click="closePopup">
      <view class="popup-content" @click.stop>
        <view class="popup-header">
          <text class="popup-title">{{ popupList.length }}条订单</text>
          <view class="popup-close" @click="closePopup">×</view>
        </view>
        <scroll-view scroll-y class="popup-list">
          <view class="popup-item" v-for="item in popupList" :key="item.id" @click="goToDetail(item.id)">
            <view class="row-content">
              <text class="col-name-popup">{{ item.name }}</text>
              <text class="col-phone-popup">{{ item.phone }}</text>
              <text class="col-address-popup">{{ item.address }}</text>
            </view>

            <view class="row-remark" v-if="item.remark" style="font-weight:bold;">
              <text style="font-size: 28upx;">备注：</text>{{ item.remark }}
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import DateSelect from '@/components/module/dateSelect';
import NotLogin from '@/components/not-login';
import AppWrapperEmpty from '@/components/app-wrapper-empty';
import { getOrderListByDist } from '@/api/order';

export default {
  name: 'orderListByDist',
  components: {
    DateSelect,
    NotLogin,
    AppWrapperEmpty
  },
  data() {
    return {
      searchTime: '今天',
      startTime: '',
      endTime: '',
      distList: [],
      myCustomDateOption: [
        { name: '昨天', value: 'yesterday' },
        { name: '今天', value: 'today' },
        { name: '本周', value: 'thisWeek' }
      ],
      showPopup: false,
      popupList: []
    };
  },
  onLoad() {
    this.getListData();
  },
  onPullDownRefresh() {
    this.getListData().finally(() => {
      uni.stopPullDownRefresh();
    });
  },
  methods: {
    init() {},
    selectDateFn(val) {
      this.searchTime = val.searchTime || '';
      this.startTime = val.startTime || '';
      this.endTime = val.endTime || '';
      this.getListData();
    },
    getListData() {
      return getOrderListByDist({
        searchTime: this.searchTime,
        startTime: this.startTime,
        endTime: this.endTime
      })
        .then((res) => {
          this.distList = this.normalizeDistList(res.data);
        })
        .catch(() => {
          this.distList = [];
        });
    },
    normalizeDistList(data) {
      if (this.$util.isEmpty(data)) {
        return [];
      }
      let result = [];
      // 接口标准返回：{ totalNum, list, shop, shopExt }
      if (data && Array.isArray(data.list)) {
        result = data.list.map((item, index) => this.normalizeDistItem(item, index)).filter(item => !this.$util.isEmpty(item.orderList));
      }
      
      const unpartitionedIndex = result.findIndex(item => item.distName === '未分区');
      if (unpartitionedIndex > -1) {
        const unpartitionedItem = result.splice(unpartitionedIndex, 1)[0];
        result.push(unpartitionedItem);
      }
      
      return result;
    },
    normalizeDistItem(item, index) {
      const orderListRaw = item.list || {};
      const orderList = [];
      
      if (typeof orderListRaw === 'object' && !Array.isArray(orderListRaw)) {
        Object.keys(orderListRaw).forEach(key => {
          const items = orderListRaw[key] || [];
          if (Array.isArray(items) && items.length > 0) {
            orderList.push(items.map(order => this.normalizeCustomItem(order)));
          }
        });
      } else if (Array.isArray(orderListRaw)) {
        orderListRaw.forEach(order => {
          orderList.push([this.normalizeCustomItem(order)]);
        });
      }
        
      return {
        distKey:item.distId || 999999 + index,
        distName: item.distName || '未分区',
        orderList
      };
    },
    normalizeCustomItem(item) {
      return {
        id: item.id || item.customId || '',
        name: item.name || '--',
        phone: item.mobile || '--',
        address: item.fullAddress || '--',
        remark: item.remark || ''
      };
    },
    getRemarks(customItems) {
      if (!customItems || !customItems.length) return [];
      const remarks = customItems.map(item => item.remark).filter(remark => !!remark);
      if (remarks.length === 0) {
        return [];
      }
      if (remarks.length === 1) {
        return [{ label: '备注', text: remarks[0] }];
      }
      return remarks.map((remark, index) => ({
        label: `备注${index + 1}`,
        text: remark
      }));
    },
    handleRowClick(customItems) {
      if (customItems.length === 1) {
        this.goToDetail(customItems[0].id);
      } else if (customItems.length > 1) {
        this.popupList = customItems;
        this.showPopup = true;
      }
    },
    closePopup() {
      this.showPopup = false;
      this.popupList = [];
    },
    goToDetail(id) {
      if (id) {
        this.$util.pageTo({ url: `/pagesOrder/detail?id=${id}`})
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.app-content {
  min-height: 100vh;
  background-color: #f7f7f7;
}

.input-wrap_box {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100upx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20upx;
  box-sizing: border-box;

  .select-dn_bx {
    width: 100%;
  }
}

.list-wrap {
  padding: 100upx 10upx 20upx;
  box-sizing: border-box;
}

.table-header {
  display: flex;
  align-items: center;
  min-height: 70upx;
  padding: 0 10upx;
  color: #8d96b0;
  font-size: 30upx;
  background-color: #eceef3;
}

.dist-block {
  background-color: #fff;
}

.dist-title {
  text-align: center;
  padding:18upx 0 18upx 0;
  font-size: 35upx;
  color: #3385FF;
  font-weight:bold;
}

.custom-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 88upx;
  padding: 20upx;
  font-size: 28upx;
  color: #333;
  border-top: 1upx solid #e8e8e8;
  box-sizing: border-box;
}

.row-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.row-remark {
  font-size: 26upx;
  color: hsl(0, 95%, 44%);
  margin-top: 10upx;
  width: 100%;
}

.col-index-header {
  width: 14%;
  margin-right: 1%;
}

.col-index {
  width: 4%;
  margin-right: 2%;
  text-align: left;
}

.col-name {
  width: 24%;
  margin-right: 1%;
}

.col-phone {
  width: 29%;
  text-align: center;
}

.col-address {
  width: 42%;
  text-align: center;
}

.col-name-popup {
  width: 24%;
  margin-right: 1%;
}

.col-phone-popup {
  width: 30%;
  text-align: center;
}

.col-address-popup {
  width: 46%;
  text-align: center;
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-content {
  width: 96%;
  background-color: #fff;
  border-radius: 16upx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.popup-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100upx;
  border-bottom: 1upx solid #eee;
}

.popup-title {
  font-size: 32upx;
  font-weight: bold;
  color: #333;
}

.popup-close {
  position: absolute;
  right: 0;
  top: 0;
  width: 100upx;
  height: 100upx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40upx;
  color: #999;
}

.popup-list {
  flex: 1;
  padding: 0 20upx;
  box-sizing: border-box;
}

.popup-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 88upx;
  padding: 20upx 0;
  font-size: 28upx;
  color: #333;
  border-bottom: 1upx solid #eee;
  box-sizing: border-box;
}

.popup-item:last-child {
  border-bottom: none;
}
</style>