sooka_consult_uniapp/pages/quotations/quotationsSecond.vue

<template>
  <view>
    <view>
      <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
        <uni-grid :column="5" @change="change" showBorder="false" square="false">
          <uni-grid-item v-for="item in categories" :index="item.id">
            <view class="grid-item-box">
              <image class="image" :src="loadImgSrcLocalhost(item.icon)" mode="aspectFit"></image>
              <text class="text">{{ item.productName }}</text>
            </view>
          </uni-grid-item>
        </uni-grid>
      </scroll-view>
    </view>
    <view class="uni-container">
      <uni-table>
        <uni-tr>
          <uni-th width="80" align="center">名称</uni-th>
          <uni-th width="80" align="center">类型</uni-th>
          <uni-th width="80" align="center">价格</uni-th>
          <uni-th width="100" align="center">时间</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in quotationsList" :key="index">
          <uni-td align="center">{{ item.productName }}
          </uni-td>
          <uni-td align="center">
            <view class="name">{{ item.type }}</view>
          </uni-td>
          <uni-td align="center">{{ item.price }}
          </uni-td>
          <uni-td align="center">{{ item.createTime }}
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
  </view>
</template>

<script>
import {listConfig,QuotationsList, listQuotations} from "@/api/quotations/quotations";
import upload from '../../components/upload/index.vue'

export default {
  components: {
    upload
  },
  data() {
    return {
      //父组件传值
      FatherType: '',
      //是否显示弹出层
      open: false,
      //悬浮按钮右对齐
      right: 'right',
      //悬浮按钮下对齐
      bottom: 'bottom',
      //分类列表
      categories: [
        // 这里是一级分类的数据
      ],
      // 行情列表
      quotationsList: [
        // 这里是列表的数据
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        id: null,
        type: null,
      },
      //表单数据
      form: {},
      //分类树列表
      forms:{},
      imageList: []
    }
  },
  onPullDownRefresh() {
    this.queryParams.pageNum = 1;
    this.quotationsList = [];
    this.getList()
  },
  //上拉加载
  onReachBottom() {
    if (this.status === 'noMore') {
      return;
    }
    this.queryParams.pageNum++;
    this.getList();
  },
  onLoad(e) {
    this.FatherType = e.type;
    this.getList();
  },
  methods: {
    getList(row) {
      // 这里是获取列表的方法
      this.queryParams.type = this.FatherType
      listQuotations(this.queryParams).then(response => {
        if (this.queryParams.pageNum === 1) {
          this.quotationsList = this.dataFormat(response.rows)
        } else {
          this.quotationsList = this.quotationsList.concat(this.dataFormat(response.rows));
        }
        // 判断是否还有更多数据
        if (response.rows.length < this.queryParams.pageSize) {
          this.status = 'noMore'; // 没有更多数据
        } else {
          this.status = 'more'; // 还有更多数据
        }
      });
      this.forms.parentId = this.FatherType
      //获取分类树的方法
      QuotationsList(this.forms).then(response => {
        //取出response.rows中所有homeDisplay为1的数据
        this.categories = response.rows
      });
      uni.stopPullDownRefresh();
    },
    //格式化时间
    dataFormat(rows) {
      return rows.map(item => {
        let date = new Date(item.createTime);
        item.createTime = date.toLocaleDateString('zh-CN', {dateStyle: 'short'});
        return item;
      });
    },
    //根据分类id查询列表
    change(e) {
      this.queryParams.type = e.detail.index;
      listQuotations(this.queryParams).then(response => {
        this.quotationsList = response.rows.map(item => {
          let date = new Date(item.createTime);
          item.createTime = date.toLocaleDateString('zh-CN', {dateStyle: 'short'});
          return item;
        });
      });
    },
    updateImg(imgList) {
      this.imageList = imgList;
    }

  }
}
</script>

<style>
.grid-item-box {
  flex: 1;
// position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px 0;
}

.image {
  height: 100%;
  width: 100%;
}


</style>