|
|
@@ -0,0 +1,212 @@
|
|
|
+<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-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="customItem in distItem.orderList" :key="customItem.id" @click="goToDetail(customItem.id)">
|
|
|
+ <text class="col-name">{{ customItem.name }}</text>
|
|
|
+ <text class="col-phone">{{ customItem.phone }}</text>
|
|
|
+ <text class="col-address">{{ customItem.address }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(distList)" />
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <NotLogin></NotLogin>
|
|
|
+ </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' }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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 [];
|
|
|
+ }
|
|
|
+ // 接口标准返回：{ totalNum, list, shop, shopExt }
|
|
|
+ if (data && Array.isArray(data.list)) {
|
|
|
+ return data.list.map((item, index) => this.normalizeDistItem(item, index)).filter(item => !this.$util.isEmpty(item.orderList));
|
|
|
+ }
|
|
|
+ if (Array.isArray(data)) {
|
|
|
+ return data.map((item, index) => this.normalizeDistItem(item, index)).filter(item => !this.$util.isEmpty(item.orderList));
|
|
|
+ }
|
|
|
+ if (typeof data === 'object') {
|
|
|
+ return Object.keys(data)
|
|
|
+ .filter((key) => Array.isArray(data[key]))
|
|
|
+ .map((distName, index) => this.normalizeDistItem({ distName, orderList: data[distName] }, index))
|
|
|
+ .filter(item => !this.$util.isEmpty(item.orderList));
|
|
|
+ }
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ normalizeDistItem(item, index) {
|
|
|
+ const orderListRaw = item.list || [];
|
|
|
+ const orderList = Array.isArray(orderListRaw)
|
|
|
+ ? orderListRaw.map(order => this.normalizeCustomItem(order))
|
|
|
+ : [];
|
|
|
+ return {
|
|
|
+ distKey:item.distId,
|
|
|
+ distName: item.distName || '未分区',
|
|
|
+ orderList
|
|
|
+ };
|
|
|
+ },
|
|
|
+ normalizeCustomItem(item) {
|
|
|
+ return {
|
|
|
+ id: item.id || item.customId || '',
|
|
|
+ name: item.name || '--',
|
|
|
+ phone: item.mobile || '--',
|
|
|
+ address: item.fullAddress || '--'
|
|
|
+ };
|
|
|
+ },
|
|
|
+ goToDetail(id) {
|
|
|
+ if (id) {
|
|
|
+ uni.navigateTo({
|
|
|
+ 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: 120upx 10upx 20upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.table-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 70upx;
|
|
|
+ padding: 0 20upx;
|
|
|
+ color: #8d96b0;
|
|
|
+ font-size: 30upx;
|
|
|
+ background-color: #eceef3;
|
|
|
+}
|
|
|
+
|
|
|
+.dist-block {
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.dist-title {
|
|
|
+ padding: 30upx 20upx 20upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 88upx;
|
|
|
+ padding: 0 20upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #333;
|
|
|
+ border-top: 1upx solid #e8e8e8;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.col-name {
|
|
|
+ width: 24%;
|
|
|
+}
|
|
|
+
|
|
|
+.col-phone {
|
|
|
+ width: 30%;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.col-address {
|
|
|
+ width: 46%;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
