freight-ts-dy-web/src/pagesOrder/battery/index.vue

<template>
  <view>
    <view class="custom-tab">
      <up-tabs
        :list="[{ name: '询价列表' }, { name: '登记列表' }]"
        @click="handleTab"
      ></up-tabs>
    </view>
    <view class="filter">
      <view @click="handleSort"
        >创建时间<u-icon :name="state.isUp ? 'arrow-up' : 'arrow-down'"></u-icon
      ></view>
      <view @click="state.isShowStatus = true"
        >状态<u-icon name="arrow-down"></u-icon
      ></view>
      <view style="width: 65%" @click="state.showTime = true">
        <u-input
          v-model="state.startTime"
          disabled
          disabledColor=""
          placeholder="开始时间"
        ></u-input>
        <text>-</text>
        <u-input
          v-model="state.endTime"
          disabled
          disabledColor=""
          placeholder="结束时间"
        ></u-input>
        <u-icon name="arrow-down"></u-icon>
      </view>
    </view>
    <page-view
      @loadList="
        (v) => {
          getList(v);
        }
      "
      :noMoreData="pageList.noMoreData"
      :list="pageList.list"
      :height="294"
      :isLoading="pageList.isLoading"
    >
      <view class="box">
        <scroll-view scroll-x class="scroll-view">
          <uni-table stripe emptyText="">
            <!-- 表头行 -->
            <uni-tr>
              <block
                v-for="(item, index) in state.tab === 1
                  ? tableTitleList1
                  : tableTitleList"
                :key="index"
              >
                <uni-th>{{ item.name }} </uni-th>
              </block>
            </uni-tr>
            <!-- 表格数据行 -->
            <uni-tr v-for="(item, index) in pageList.list" :key="index">
              <uni-td
                v-for="(tItem, index) in state.tab === 1
                  ? tableTitleList1
                  : tableTitleList"
                :key="index"
              >
                <view>
                  <text v-if="tItem.key === 'status'">
                    {{ item[tItem.key] ? "已处理" : "待处理" }}
                  </text>
                  <text
                    v-else-if="tItem.key === 'photoUrl'"
                    class="btn"
                    @click="showImage(item)"
                  >
                    照片
                  </text>
                  <text v-else>
                    {{ item[tItem.key] }}
                  </text>
                </view></uni-td
              >
            </uni-tr>
          </uni-table>
        </scroll-view>
      </view>
    </page-view>

    <view class="btn-box-fix-btn">
      <view
        ><u-button type="primary" shape="circle" @click="goInquiry()"
          >去询价</u-button
        >
      </view>
    </view>

    <!-- 状态 -->
    <u-action-sheet
      :closeOnClickOverlay="true"
      :closeOnClickAction="true"
      :actions="actionSheet.statusList"
      :title="'单据状态'"
      :show="state.isShowStatus"
      @select="handleSelectStatus"
      @close="state.isShowStatus = false"
    ></u-action-sheet>

    <TimeRangeFilter
      :show="state.showTime"
      @handleDialog="(v:boolean) => {state.showTime = v}"
      @handleOk="changeTime"
    />
  </view>
</template>

<script setup lang="ts">
import PageView from "@/components/PageView/index.vue";
import TimeRangeFilter from "@/components/Dialog/TimeRangeFilter.vue";
import { BatteryApi } from "@/services";
import pinia from "@/store";
import { useMemberStore } from "@/store/index";
const state = reactive({
  tab: 0,
  startTime: "",
  endTime: "",
  showTime: false,
  status: -1,
  isShowStatus: false,
  isUp: false,
});
const pageList: PageResult<any> = reactive({
  total: 0,
  list: [],
  pageNum: 1,
  pageSize: 100,
});
const resetPageList = () => {
  pageList.noMoreData = false;
  pageList.total = 0;
  pageList.list = [];
  pageList.pageNum = 1;
  pageList.pageSize = 100;
};
const tableTitleList = reactive([
  {
    name: "时间",
    key: "createdTime",
  },
  {
    name: "状态",
    key: "status",
  },
  {
    name: "回收种类",
    key: "recyclingType",
  },
  {
    name: "回收重量",
    key: "recyclingWeight",
  },
  {
    name: "照片",
    key: "photoUrl",
  },
]);
const tableTitleList1 = reactive([
  {
    name: "时间",
    key: "createdTime",
  },
  {
    name: "状态",
    key: "status",
  },
  {
    name: "回收种类",
    key: "recyclingType",
  },
  {
    name: "回收重量",
    key: "recyclingWeight",
  },
  {
    name: "上门时间",
    key: "preferredVisitTime",
  },
  {
    name: "照片",
    key: "photoUrl",
  },
]);
const actionSheet = reactive({
  statusList: [
    {
      name: "全部",
      key: -1,
    },
    {
      name: "待处理",
      key: 0,
    },
    {
      name: "已处理",
      key: 1,
    },
  ],
});
const showImage = (item: any) => {
  uni.previewImage({
    urls: [item.photoUrl], // 图片列表
    current: 0, // 当前显示图片的索引
    indicator: "default", // 图片指示器样式，默认为圆点
    loop: true,
  });
};

function handleTab(item: any) {
  state.tab = item.index;
  resetPageList();
  getList();
}
const changeTime = (obj: any) => {
  state.startTime = obj.startTime;
  state.endTime = obj.endTime;
  resetPageList();
  getList();
};

const handleSelectStatus = (v: any) => {
  state.isShowStatus = false;
  state.status = v.key;
  resetPageList();
  getList();
};

const handleSort = () => {
  state.isUp = !state.isUp;
  resetPageList();
  getList();
};

const goInquiry = () => {
  uni.navigateTo({
    url: "/pagesBattery/inquiry", // 要跳转到的页面路径
  });
};

const getList = (v?: boolean) => {
  if (v) {
    if (Math.ceil(pageList.total / pageList.pageSize) > pageList.pageNum) {
      pageList.pageNum++;
    } else {
      pageList.noMoreData = true;
      return;
    }
  }
  let params: any = {
    pageSize: pageList.pageSize,
    pageNum: pageList.pageNum,
  };
  if (state.status > -1) {
    params.status = state.status;
  }
  if (state.startTime && state.endTime) {
    params.startTime = state.startTime;
    params.endTime = state.endTime;
  }
  params.isUp = state.isUp;
  pageList.isLoading = true;
  if (state.tab === 1) {
    BatteryApi.queryRegis(params).then((res: any) => {
      if (res.code === 200) {
        pageList.isLoading = false;
        pageList.list = pageList.list = pageList.list.concat(res.data.list);
        pageList.total = res.data.total;
      }
    });
  } else {
    BatteryApi.queryInquiry(params).then((res: any) => {
      if (res.code === 200) {
        pageList.isLoading = false;
        pageList.list = pageList.list = pageList.list.concat(res.data.list);
        pageList.total = res.data.total;
      }
    });
  }
};

// function goDetail(item: any) {
//   uni.navigateTo({
//     url: "/pagesOrder/vehicle/detail?id=" + item.id + `&status=${item.status}`,
//   });
// }

getList();
</script>
<style lang="scss" scoped>
.custom-tab {
  width: 100%;
  display: flex;
  justify-content: center;
}
.filter {
  display: flex;
  justify-content: space-around;
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  > view {
    display: flex;
    align-items: center;
  }
  ::v-deep.u-input__content__field-wrapper__field {
    font-size: 14px !important;
  }
}
.box {
  padding: 28rpx 20rpx;
  .btn {
    color: $u-primary;
  }
  .scroll-view {
    white-space: nowrap;
    width: 100%;
    overflow: auto;
  }
  ::v-deep.uni-table {
    min-width: 700px !important;
  }
}
.btn-box-fix-btn {
  justify-content: center;
  view {
    width: 70%;
  }
}
.regis {
  font-size: 12px;
  text-align: center;
  padding-top: 15px;
  width: 100% !important;
  color: $u-primary;
  font-weight: bold;
}
</style>