jsm-mall-h5-front/src/packageWorkorder/pages/myNanDu.vue

<template>
  <view style="width: 100%; height: 100vh; background: rgb(247, 248, 255)">
    <zj-page-container>
      <view class="toubuyangs">
        <view class="toubuyangsTab">
          <view class="toubuyangsTabItem" @click="tabQiehuan('1,3')">
            <view>待审核{{ websitCount.dsp ? ` (${websitCount.dsp})` : '' }}</view>
            <view :class="{ hengxian: true, xuanzhong: tab == '1,3' }"> </view>
          </view>
          <view class="toubuyangsTabItem" @click="tabQiehuan('5')">
            <view>已通过{{ websitCount.ytg ? ` (${websitCount.ytg})` : '' }}</view>
            <view :class="{ hengxian: true, xuanzhong: tab == '5' }"></view>
          </view>
          <view class="toubuyangsTabItem" @click="tabQiehuan('2,4')">
            <view>已驳回{{ websitCount.ybh ? ` (${websitCount.ybh})` : '' }}</view>
            <view :class="{ hengxian: true, xuanzhong: tab == '2,4' }"></view>
          </view>
        </view>
        <view class="search-container">
          <u-search
            shape="round"
            :showAction="false"
            placeholder="输入工单号，客户名称，客户地址"
            v-model="keyword"
            @search="getList"
          >
          </u-search>
        </view>
      </view>
      <zj-page-fill>
        <zj-page-layout
          :isScroll="true"
          :refresherTriggered="refresherTriggered"
          @refresherrefresh="refresherrefresh"
          @scrolltolower="scrolltolower"
        >
          <view class="list-container" v-if="dataList.length > 0">
            <view class="mode" @click="toNandufysq(item)" v-for="(item, index) in dataList" :key="index">
              <view class="flex_asb order">
                <view class="title"></view>
                <view class="status">{{ returnText(item) }}</view>
              </view>
              <view class="flex_asb" style="align-items: flex-start">
                <view class="content flex1">
                  <view class="flex">
                    <view class="hui">工单单号</view>
                    <view class="text">{{ item.orderBaseId }}</view>
                  </view>
                  <view class="flex">
                    <view class="hui">客户名称</view>
                    <view class="text">{{ item.linkName }}</view>
                  </view>
                  <view class="flex">
                    <view class="hui">客户电话</view>
                    <view class="text">{{ item.userMobile }}</view>
                  </view>
                  <view class="flex">
                    <view class="hui">提交时间</view>
                    <view class="text">{{ item.createTime }}</view>
                  </view>
                  <view class="flex">
                    <view class="hui">申请费用</view>
                    <view class="text">{{ item.maintenancePricePass }}</view>
                  </view>
                  <view class="flex">
                    <view class="hui">客户地址</view>
                    <view class="text">{{ item.address || '无' }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <Loading :loadStatus="loadStatus" :dataList="dataList" />
        </zj-page-layout>
      </zj-page-fill>
    </zj-page-container>
  </view>
</template>

<script>
import zjPageContainer from '@/components/zj-page-container/zj-page-container.vue'
import zjPageFill from '@/components/zj-page-container/zj-page-fill.vue'
import { getStorage } from '@/common/utils/storage.js'
import zjDialogPicker from '@/components/zj-dialog/zj-dialog-picker.vue'
export default {
  components: {
    zjPageContainer,
    zjPageFill,
    zjDialogPicker
  },
  data() {
    return {
      tab: '1,3',
      dataList: [],
      refresherTriggered: false,
      loadStatus: 0,
      keyword: '',
      websitCount: {}
    }
  },
  onShow() {
    this.refreshLish()
    this.$api.post('/workerApply/count').then(res => {
      this.websitCount = res.data
    })
  },
  computed: {
    userInfo() {
      return getStorage('user')
    }
  },
  methods: {
    returnText(data) {
      return { 1: '待网点审核', 2: '驳回重申', 3: '待中心审核', 4: '驳回禁止申诉', 5: '通过审核' }[
        data.status || data.websitStatus
      ]
    },
    toNandufysq(item) {
      this.$api
        .post('/workerApply/detail', {
          orderBaseId: item.orderBaseId
        })
        .then(res => {
          if (res.data?.status == 2 || res.data?.websitStatus == 2) {
            this.$navToPage({
              url: `/packageWorkorder/pages/nandufysq?id=${item.orderBaseId}&type=shenhe`
            })
          } else {
            this.$navToPage({
              url: `/packageWorkorder/pages/nandufysq?id=${item.orderBaseId}&type=view`
            })
          }
        })
        .catch(res => {})
    },

    async getList() {
      this.loadStatus = 1
      this.$api
        .post('/workerApply/list', {
          status: this.tab,
          value: this.keyword,
          pageNum: 1,
          pageSize: -1
        })
        .then(res => {
          this.$api.post('/workerApply/count').then(res2 => {
            this.websitCount = res2.data
          })
          this.loadStatus = 2
          this.refresherTriggered = false
          this.dataList = res.data.records
        })
    },

    // 触发下拉刷新
    refresherrefresh(e) {
      this.refresherTriggered = true
      this.refreshLish()
    },

    refreshLish() {
      this.dataList = []
      this.getList()
    },

    tabQiehuan(index) {
      this.tab = index
      this.dataList = []
      this.getList()
    },

    // 滚动到底部
    scrolltolower(e) {},

    // 触发下拉刷新
    async refresherrefresh(e) {
      this.refresherTriggered = true
      this.dataList = []
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container {
  background: #ffffff;
  padding: 20rpx;
  ::v-deep .u-search {
    height: 60rpx;
    input {
      background: #f7f8ff !important;
    }
    .u-search__content {
      background: #f7f8ff !important;
      height: 60rpx;
    }
  }
}
.quanjuanniu {
  width: 100%;
  height: auto;
  padding: 30rpx;
  box-sizing: border-box;
}
.neirongquyu {
  width: 100%;
  height: auto;
  padding: 30rpx 30rpx 15rpx 30rpx;
  box-sizing: border-box;
  .zhegeshineirong {
    width: 100%;
    height: auto;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    .neirongbiaot {
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      margin-bottom: 40rpx;
      text {
        font-size: 32rpx;
        font-weight: 700;
      }
    }
    .neironglieju {
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      box-sizing: border-box;
      margin-bottom: 30rpx;
      text {
        font-size: 28rpx;
      }
    }
    .neironghengxin {
      width: 100%;
      border-bottom: 1rpx solid #aaa;
      margin-bottom: 30rpx;
    }
    .neironganniuqu {
      widows: 100%;
      text-align: right;
    }
  }
}
.toubuyangs {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 30rpx 30rpx 15rpx 30rpx;
  .toubuyangsTab {
    width: 100%;
    height: auto;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .toubuyangsTabItem {
      box-sizing: border-box;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .hengxian {
        margin-top: 20rpx;
        width: 100rpx;
      }
      .xuanzhong {
        border-bottom: 4rpx solid #000;
      }
    }
  }
}
.flex {
  display: flex;
  align-items: center;
}
.flex_asb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex_end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 30rpx;
}
.flex1 {
  flex: 1;
}
.list-container {
  box-sizing: border-box;
  padding: 0 30rpx;
}
.mode {
  @include zj-card;
  padding: 30rpx 20rpx;
  margin-top: 30rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  .order {
    margin-bottom: 20rpx;
  }
  .content {
    width: 450rpx;
    .title {
      font-weight: bold;
      font-size: 30rpx;
    }
    .text,
    .hui {
      font-size: 28rpx;
      margin-top: 16rpx;
    }
    .hui {
      color: #999999;
      margin-right: 20rpx;
    }
  }
  .status {
    font-size: 28rpx;
    color: #0379ff;
  }
  .zhihui {
    .text,
    .hui,
    .title,
    .status {
      color: #999999 !important;
    }
  }
  .img {
    width: 100rpx;
    height: 100rpx;
    margin-right: 30rpx;
  }
}
.search-container {
  background: #ffffff;
  padding: 20rpx;
  ::v-deep .u-search {
    height: 60rpx;
    input {
      background: #f7f8ff !important;
    }
    .u-search__content {
      background: #f7f8ff !important;
      height: 60rpx;
    }
  }
}
</style>