yanxiang_h5/pages/home/apps.vue

<template>
  <view class="pageHome">
    <yx-navbar :isBack="false" title="移动应用"></yx-navbar>
    <view class="pageIndex">
      <view class="tabs">
        <view class="tab" :class="tabIndex == 0 ? 'active' : ''" @click="onClickTab(0)">系统应用</view>
        <view class="tab" :class="tabIndex == 1 ? 'active' : ''" @click="onClickTab(1)">我的应用</view>
      </view>
      <view class="search">
        <u-search
          placeholder="请输入应该名称" v-model="params.appName" :show-action="false"
          search-icon-color='#eb5a10' bg-color="#fff" @change="onSearch"
        ></u-search>
      </view>
      <scroll-view class="content" scroll-y @scrolltolower="getData(false)">
        <view class="main" v-if="dataList.length ">
          <view class="infoList" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
            <img v-if="item.appIcon" class="infoImg" :src="item.appIcon" alt="">
            <img v-else class="infoImg" src="../../static/img/no-bg-img.jpg" alt="">
            <view class="infoRight">
              <view class="name">{{ item.appName }}</view>
              <view class="describe">{{ item.appDescription }}</view>
              <view class="infoBottom">
                <view class="num"><i class="el-icon-view"></i> 访问量:0</view>
                <view class="dateTime">{{ item.date }}</view>
              </view>
            </view>
          </view>
        </view>
        <template v-if="!loading&&!dataList.length">
          <image v-if="params.appName" src="../../static/img/no-search.png" style="width: 100%" mode="aspectFit"></image>
          <image v-else src="../../static/img/no-data.png" style="width: 100%" mode="aspectFit"></image>
        </template>
      </scroll-view>
    </view>
    <tab-bar tabbarValue='移动应用'></tab-bar>
  </view>
</template>
<script>
import {systemAppPage, mineAppPage} from '@/common/api.js'
import moment from 'moment'
export default {
  data() {
    return {
      tabIndex: 0,
      params: {size: 10, current: 1, appName: "", publishStatus: 1},
      dataList: [],
      loading: true,
    }
  },
  onShow() {
    this.getData(true)
  },
  methods: {
    getData(reload) {
      if (reload) {
        this.params.current = 1
      }
      this.loading = true
      if (this.tabIndex === 0) {
        systemAppPage({...this.params}).then(res => {
          let data = res.data.records
          data.forEach(item => {
            item.date = moment(item.createTime).format('YYYY-MM-DD')
          })
          if (data.length) this.params.current++
          if (reload) {
            this.dataList = data
          } else {
            this.dataList = this.dataList.concat(data)
          }
        }).finally(() => this.loading = false)
      }
      if (this.tabIndex === 1) {
        mineAppPage({...this.params}).then(res => {
          let data = res.data.records
          data.forEach(item => {
            item.date = moment(item.createTime).format('YYYY-MM-DD')
          })
          if (data.length) this.params.current++
          if (reload) {
            this.dataList = data
          } else {
            this.dataList = this.dataList.concat(data)
          }
        }).finally(() => this.loading = false)
      }
    },
    onClickTab(index) {
      this.tabIndex = index
      this.params.appName = ''
      this.getData(true)
    },
    onSearch(e) {
      this.getData(true)
    },
    goDetail(item) {
      uni.navigateTo({url: `/pages/detail/app?id=${item.appId}&title=${item.appName}`})
    },
  }
}
</script>
<style lang="less">
@import "./home.less";
</style>