Dining_Hall/pages/arrivalConfirmation/index.vue

<template>
  <view>
    <!-- 搜索 -->
    <div class="search">
      <u-input
        v-model="keyWord"
        placeholder="请输入搜索内容"
        suffixIcon="search"
        suffixIconStyle="color: #666"
        shape="circle"
        @blur="handleSearch"
      ></u-input>
    </div>
    <!-- 列表 -->
    <div class="list-cont" v-for="(item, index) in tableList" :key="index" @click="handleDetail(item)">
      <u-row justify="space-between" customStyle="margin-bottom: 10px; padding: 0 15px;">
        <u-col span="6">
          <div>{{ item.name }}</div>
        </u-col>
        <u-col span="6">
          <div style="display: flex; justify-content: flex-end">
            <u-tag text="已上传" type="success" v-if="item.imgList && item.imgList.length > 0"></u-tag>
            <u-tag text="待上传" type="warning" v-else></u-tag>
          </div>
        </u-col>
      </u-row>
      <u-line style="margin-bottom: 5px"></u-line>
      <div class="list-item">
        <span>工程名称：</span>
        <span>{{ item.proName }}</span>
      </div>
      <div class="list-item df-item">
        <div>
          <span>派车数量：</span>
          <span style="color: #5ae725">{{ item.pcNum }}</span>
        </div>
        <div>
          <u-tag
            v-if="item.imgList && item.imgList.length > 0"
            text="查看到货确认单"
            type="info"
            @click="openImgModal(item)"
          ></u-tag>
          <u-tag v-else type="primary" text="上传到货确认单" @click="openImgModal"></u-tag>
        </div>
      </div>
      <div class="list-item">
        <span>派车时间：</span>
        <span style="color: #f9ae3d">{{ item.time }}</span>
      </div>
    </div>

    <!-- 上传图片 -->
    <u-modal :show="imgModal" :title="imgModelTitle" showCancelButton @cancel="imgModal = false" @confirm="uploadImg">
      <view class="slot-content" style="display: flex; flex-direction: column; align-items: center">
        <uni-file-picker
          v-model="imgList"
          :auto-upload="false"
          ref="files"
          limit="3"
          @select="selectImg"
          @delete="deleteImg"
          :readonly="readonly"
          style="height: 100px; width: 260px"
        />
      </view>
    </u-modal>

    <u-loadmore :status="status" line v-if="tableList.length > 10" />

    <!-- 空状态 -->
    <u-empty v-if="tableList.length == 0" mode="data"></u-empty>
  </view>
</template>

<script>
import { getInventoryList } from '@/api/aqSafety'

export default {
  data() {
    return {
      imgModal: false,
      readonly: false,
      imgModelTitle: '',
      imgList: [],
      uploadPaths: [],
      keyWord: '',
      status: 'loadmore',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableList: [
        {
          name: '张三',
          proName: '项目名称',
          pcNum: 10,
          time: '2021-08-01',
          imgList: []
        },
        {
          name: '李四',
          proName: '项目名称',
          pcNum: 20,
          time: '2021-08-01',
          imgList: [
            {
              url: 'https://img.yzcdn.cn/vant/cat.jpeg'
            }
          ]
        }
      ]
    }
  },
  onLoad() {
    // this.getList()
  },
  methods: {
    handleSearch() {
      this.pageSize = 10
      this.getList()
    },
    async getList() {
      try {
        const params = {
          encryptedData: JSON.stringify({ keyWord: this.keyWord }),
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        console.log('🚀 ~ getList ~ params', params)
        const res = await getInventoryList(params)
        console.log('🚀 ~ getList ~ res', res)
        this.tableList = res.data.list
        this.total = res.data.total
      } catch (error) {
        console.log('🚀 ~ getList ~ error', error)
      }
    },
    onReachBottom() {
      console.log('🚀 ~ onReachBottom ~ ')
      if (this.total < 10 || this.total == this.tableList.length) {
        this.status = 'nomore'
        return
      }
      this.status = 'loading'
      setTimeout(() => {
        this.pageSize += 10
        this.getList()
        if (this.tableList.length != this.total) this.status = 'loadmore'
        else this.status = 'nomore'
      }, 500)
      console.log('加载..', this.pageSize)
    },
    // 打开图片弹窗
    openImgModal(item) {
      this.imgModal = true
      if (item) {
        this.readonly = true
        this.imgModelTitle = '查看到货确认单'
        this.imgList = item.imgList
      } else {
        this.readonly = false
        this.imgModelTitle = '上传到货确认单'
        this.imgList = []
      }
    },
    selectImg(e) {
      console.log('🚀 ~ selectImg ~ e:', e)
      e.tempFiles.forEach(file => {
        this.imgList.push(file)
      })
      console.log('🚀 ~ selectImg ~ this.imgList:', this.imgList)
    },
    deleteImg(e) {
      console.log('🚀 ~ deleteImg ~ e:', e)
      this.imgList.splice(e.index, 1)
      console.log('🚀 ~ deleteImg ~ this.imgList:', this.imgList)
    },
    uploadImg() {
      console.log('🚀 ~ uploadImg ~ this.imgList:', this.imgList)
      this.imgModal = false
    },
    upload(path) {
      uni.uploadFile({
        url: this.actionUrl,
        filePath: path,
        name: 'file',
        header: {
          Authorization: this.token
        },
        success: res => {
          console.log('🚀 ~ selectImg ~ res:', res)
          console.log('🚀 ~ selectImg ~ res--data:', JSON.parse(res.data).data)
          this.uploadPaths.push(JSON.parse(res.data).data)
        },
        fail: err => {
          console.log('🚀 ~ selectImg ~ err:', err)
        }
      })
    },
    handleDetail(item) {
      console.log('🚀 ~ handleDetail ~ item', item)
      const params = {
        isDetail: true,
        // 到货
        isArrival: true,
        active: 1
      }
      uni.navigateTo({
        url: `/pages/sendACarSystem/details?params=${JSON.stringify(params)}`
      })
    }
  }
}
</script>

<style lang="scss">
page {
  padding: 15px;
  background-color: #f8f8f8;
}
.search {
  margin-bottom: 15px;
}
.list-cont {
  padding: 15px 0;
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);

  .list-item {
    padding: 5px 15px;
  }

  .df-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>