lucky_shop/pages_tool/files/list.vue

<template>
  <view>
    <view class="search-wrap uni-flex uni-row">
      <view class="flex-item input-wrap">
        <input class="uni-input" maxlength="50" placeholder=$lang("tool.files.list.l5.t0") v-model="keyword" @confirm="search"
          @input="__set_model($event, 'keyword')" />
        <text class="iconfont icon-sousuo3" @tap="search"></text>
      </view>
    </view>
    <mescroll-uni ref="mescroll" top="100" @getData="getData" :style="tabBarPagePaddingStyle">
      <view slot="list">
        <block v-if="list.length > 0">
          <view class="article-wrap">
            <ns-adv keyword="NS_ARTICLE" class-name="adv-wrap"></ns-adv>
            <block v-for="(item, index) in list" :key="index">
              <view class="item" @tap="toDetail(item.$orig)">
                <view class="article-img">
                  <image class="cover-img" :src="item.g1" mode="widthFix" @error="imgError(index)" show-menu-by-longpress></image>
                </view>
                <view class="info-wrap">
                  <view class="title">{{ item.$orig.files_title }}</view>
                  <view class="read-wrap">
                    <text>{{ $lang("tool.cases.index.l31.t0") }}</text>
                  </view>
                </view>
              </view>
            </block>
          </view>
        </block>
        <block v-else>
          <view class="empty-wrap">
            <ns-empty text="暂无文件" :isIndex="false"></ns-empty>
          </view>
        </block>
        <loading-cover ref="loadingCover"></loading-cover>
      </view>
    </mescroll-uni>
    <privacy-popup ref="privacyPopup"></privacy-popup>

    <!-- 底部tabBar -->
    <view id="tab-bar">
      <diy-bottom-nav></diy-bottom-nav>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      category_id: '',
      list: [],
      title: '',
      keyword: ''
    }
  },
  onLoad(options) {
    if (options.category_id > 0) {
      this.category_id = options.category_id
    }
  },
  onShow() {
  },
  methods: {
    __set_model(event, field) {
      this[field] = event.detail.value
    },
    search() {
      this.list = []
      this.$refs.mescroll.refresh()
    },
    getData(page) {
      this.$api.sendRequest({
        url: '/api/files/getpage',
        data: {
          page_size: page.size,
          page: page.num,
          category_id: this.category_id,
          keyword: this.keyword
        },
        success: res => {
          let list = []
          let message = res.message
          if (res.code === 0 && res.data) {
            list = res.data.list
            if (!this.title && res.data.list.length > 0) {
              uni.setNavigationBarTitle({
                title: res.data.list[0].category_name
              })
            }
          } else {
            this.$util.showToast({
              title: message
            })
          }
          page.endSuccess(list.length)
          if (page.num === 1) {
            this.list = []
          }
          this.list = this.list.concat(list.map(item => {
            const orig = item
            const g1 = this.$util.img("addon/personnel/shop/view/enterprise/fileicon.png")
            return { $orig: orig, g1: g1 }
          }))
          if (this.$refs.loadingCover) {
            this.$refs.loadingCover.hide()
          }
        },
        fail: () => {
          page.endErr()
          if (this.$refs.loadingCover) {
            this.$refs.loadingCover.hide()
          }
        }
      })
    },
    toDetail(item) {
      uni.showLoading({
        title: $lang('tool.cases.index.l143.t0')
      })
      try {
        uni.downloadFile({
          url: item.files_url,
          success: res => {
            if (res.statusCode === 200) {
              uni.openDocument({
                filePath: res.tempFilePath,
                success: () => {
                },
                fail: () => {
                },
                complete: () => {
                  uni.hideLoading()
                }
              })
            }
          },
          fail: () => {
            uni.hideLoading()
          },
          complete: res => {
            if (res.statusCode === 404) {
              uni.showToast({
                title: $lang('tool.cases.index.l167.t0'),
                icon: 'none'
              })
            }
          }
        })
      } catch (e) {
        uni.hideLoading()
      }
    },
    imgError(index) {
      if (this.list[index]) {
        this.list[index].cover_img = this.$util.getDefaultImage().article
      }
    }
  }
}
</script>

<style scoped>
.search-wrap {
  flex: 0.5;
  padding: 30rpx 30rpx 0;
  font-size: 24rpx;
  display: flex;
  align-items: center;
}

.search-wrap .iconfont {
  margin-left: 16rpx;
  font-size: 36rpx;
}

.search-wrap .input-wrap {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  height: 64rpx;
  padding-left: 10rpx;
  border-radius: 70rpx;
}

.search-wrap .input-wrap input {
  width: 90%;
  background: #fff;
  font-size: 24rpx;
  height: 100%;
  padding: 0 25rpx 0 40rpx;
  line-height: 50rpx;
  border-radius: 40rpx;
}

.search-wrap .input-wrap text {
  font-size: 32rpx;
  color: #909399;
  width: 80rpx;
  text-align: center;
  margin-right: 20rpx;
}

.empty-wrap {
  padding-top: 200rpx;
}

.article-wrap {
  background: #f8f8f8;
}

.article-wrap .adv-wrap {
  margin: 24rpx 24rpx 0 24rpx;
  width: auto;
}

.article-wrap .item {
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  margin: 24rpx;
  border-radius: 16rpx;
}

.article-wrap .item .article-img {
  margin-right: 20rpx;
  width: 80rpx;
  height: 80rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-wrap .item .article-img image {
  width: 100%;
}

.article-wrap .item .info-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.article-wrap .item .info-wrap .title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 24rpx;
}

.article-wrap .item .info-wrap .read-wrap {
  display: flex;
  color: #999ca7;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10rpx;
  line-height: 1;
}

.article-wrap .item .info-wrap .read-wrap text {
  font-size: 24rpx;
}
</style>