jsm-mall-h5-front/src/packageWorkorder/pages/infoCollect/list.vue

<template>
  <view>
    <zj-page-layout
      :hasFooter="true"
      :isScroll="true"
      :refresherTriggered="refresherTriggered"
      @refresherrefresh="refresherrefresh"
    >
      <template slot="header">
        <view class="tab-container">
          <u-tabs :scrollable="false" :lineWidth="30" :list="tabList" :current="curTab - 1" @click="changeTab"></u-tabs>
        </view>
        <view class="total"
          >当前完成进度：<text>{{ count.ycj || 0 }}</text
          >/{{ count.qb || 0 }}</view
        >
      </template>

      <view class="list-container">
        <view class="item" v-for="(item, index) in dataList" :key="index" @tap="toCollect(item)">
          <view class="top">
            <view class="name">设备{{ item.sort }}</view>
            <view class="right">{{ item.status | statusFilter }}</view>
          </view>
          <view class="main">
            <view class="row">
              <view class="label">产品机型</view>
              <view class="value">{{ item.productName || '' }}</view>
            </view>
            <view class="row">
              <view class="label">产品小类</view>
              <view class="value">{{ item.smallName || '' }}</view>
            </view>
          </view>
        </view>
      </view>

      <Loading :type="2" :loadStatus="loadStatus" :dataList="dataList" />

      <template slot="footer">
        <view class="footer-btn-group">
          <u-button
            text="提交全部采集"
            type="primary"
            size="large"
            @click="submitData"
            :disabled="isCollected"
          ></u-button>
        </view>
      </template>
    </zj-page-layout>
  </view>
</template>

<script>
export default {
  filters: {
    statusFilter(val) {
      const MAP = {
        WAIT: '待采集',
        WAIT_SAVE: '待完善',
        OK: '已采集'
      }
      return MAP[val]
    }
  },

  data() {
    return {
      id: null,
      isCollected: false,
      tabList: [
        { name: '待采集', value: 1, badge: { value: 0 } },
        { name: '已采集', value: 2, badge: { value: 0 } }
      ],
      loadStatus: 0,
      curTab: 1,
      dataList: [],
      refresherTriggered: false,
      count: {}
    }
  },

  async onLoad({ id }) {
    this.id = id

    await this.getOrderDetail()
    await this.getCount()
    if (this.isCollected || this.count.wcj == 0) {
      this.curTab = 2
    }

    this.getList()

    this.crossPage.$on('refreshCollectList', async type => {
      console.log(type)
      await this.getOrderDetail()
      await this.getCount()
      if (type == 1) {
        this.curTab = 1
      }
      if (this.isCollected || this.count.wcj == 0) {
        this.curTab = 2
      }
      this.refreshList()
    })
  },

  onUnload() {
    this.crossPage.$off('refreshCollectList')
  },

  methods: {
    // 触发下拉刷新
    async refresherrefresh(e) {
      this.refresherTriggered = true
      this.getCount()
      this.refreshList()
    },

    // 获取详情
    async getOrderDetail() {
      return new Promise((resolve, reject) => {
        this.$api
          .post('/pg/order/base/detail', {
            orderBaseId: this.id
          })
          .then(res => {
            this.isCollected = res.data && res.data.isGather == 'YES'
            resolve(1)
          })
      })
    },

    async getCount() {
      return new Promise((resolve, reject) => {
        this.$api
          .post('/changeOrder/getOrderProductCount', {
            id: this.id
          })
          .then(res => {
            this.count = res.data
            this.tabList[0].badge.value = res.data.wcj
            this.tabList[1].badge.value = res.data.ycj
            resolve(1)
          })
      })
    },

    getList() {
      this.loadStatus = 1
      this.$api
        .post('/changeOrder/getOrderProduct', {
          id: this.id,
          status: this.curTab == 1 ? ['WAIT', 'WAIT_SAVE'] : 'OK'
        })
        .then(res => {
          this.loadStatus = 0
          this.dataList = res.data
        })
        .catch(() => {
          this.loadStatus = 2
        })
        .finally(() => {
          this.loadStatus = 0
          this.refresherTriggered = false
        })
    },

    changeTab(e) {
      this.curTab = e.value
      this.refreshList()
    },

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

    toCollect(item) {
      this.$navToPage({
        // url: `/packageWorkorder/pages/infoCollect/form?oid=${this.id}&cid=${item.id}&isView=${this.isCollected ? 1 : 0}`
        url: `/packageWorkorder/pages/infoCollect/form?oid=${this.id}&cid=${item.id}&isView=0`
      })
    },

    // 提交全部采集
    async submitData() {
      const lo = await this.$getAddress()

      this.$api
        .post('/changeOrder/submitProductDetail', {
          orderBaseId: this.id,
          address: lo.address || ''
        })
        .then(res => {
          this.$successToast('提交成功')
          this.crossPage.$emit('refreshFeedbackForm', '')
          setTimeout(() => {
            this.$navToPage(
              {
                delta: 1
              },
              'navigateBack'
            )
          }, 500)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-container {
  background: #ffffff;
}

.total {
  text-align: right;
  color: $sec-font;
  padding: 30rpx;
  text {
    color: $theme-color;
    font-weight: 500;
  }
}

.list-container {
  padding: 1rpx 30rpx;
  .item {
    @include zj-card;
    margin-bottom: 30rpx;
    .top {
      padding: 0 30rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name {
        font-size: 32rpx;
        font-weight: 500;
        display: flex;
        align-items: center;
        ::v-deep .u-badge {
          margin-left: 12rpx;
        }
      }
      .right {
        color: $theme-color;
      }
    }
    .main {
      padding: 30rpx;
      border-top: 1px solid #f5f5f5;
      .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 30rpx;
        &:first-child {
          margin-top: 0;
        }
        .label {
          color: $sec-font;
        }
      }
    }
    .bottom {
      padding: 0 30rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #f5f5f5;
      .right {
        ::v-deep .u-button {
          height: 60rpx;
        }
      }
    }
  }
}
</style>