sooka_consult_uniapp/pages/quotations/quotations.vue

<template>
  <view>
    <view class="nactive">
      <scroll-view class="scroll-view_H" :scroll-x="true" @scroll="scroll" scroll-left="120">
        <uni-grid :column="5" @change="change" :showBorder="false" :square="true">
          <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="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.area + item.address }}
          </uni-td>
          <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>
      <uni-load-more :status="status" :content-text="contentText"/>
      <uni-fab ref="fab" :horizontal="right" :vertical="bottom"
               @fabClick="fabClick()"/>
    </view>
  </view>
</template>

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

export default {
  components: {
    upload
  },
  data() {
    return {
      book: false,
      total:0,
      //是否显示弹出层
      open: false,
      //悬浮按钮右对齐
      right: 'right',
      //悬浮按钮下对齐
      bottom: 'bottom',
      //分类列表
      categories: [
        // 这里是一级分类的数据
      ],
      // 行情列表
      quotationsList: [
        // 这里是列表的数据
      ],
      //查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        id: null,
        status: "1",
      },
      //加载更多
      status: 'more',
      contentText: {
        contentdown: '查看更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多'
      },

      //表单数据
      form: {},
      imageList: []
    }
  },
  onPullDownRefresh() {
    this.queryParams.pageNum = 1;
    this.quotationsList = [];
    this.categories = [];
    this.getList()
  },
  //上拉加载
  onReachBottom() {
    let pageNum = this.queryParams.pageNum
    let pageSize = this.queryParams.pageSize
    let total = this.total
    if (pageNum * pageSize >= total) {
      uni.showToast({
        title: '暂无更多数据'
      })
      return
    } else {
      this.queryParams.pageNum += 1;
      this.getList()
    }
  },
  onLoad() {
    this.getList();
  },
  methods: {
    getList(row) {
      // 这里是获取列表的方法
      listQuotations(this.queryParams).then(response => {
		  this.total=response.total
        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'; // 还有更多数据
        }
      });
      //获取分类树的方法
      listConfig().then(response => {
        this.categories = response.data.quotations.filter(item => item.homeDisplay === "1");
      });
      uni.stopPullDownRefresh();
    },
    dataFormat(rows) {
      // 创建一个映射对象，键是id，值是productName
      const idToProductName = this.categories.reduce((acc, cur) => {
        acc[cur.id] = cur.productName;
        return acc;
      }, {});
      return rows.map(item => {
        let date = new Date(item.createTime);
        item.createTime = date.toLocaleDateString('zh-CN', {dateStyle: 'short'});
        // 使用映射对象将type的值从id转换为productName
        item.type = idToProductName[item.type] || item.type;
        return item;
      });
    },
    //根据分类id查询列表
    change(e) {
      console.log(e)
      const type = e.detail.index;
      uni.navigateTo({
        url: '/pages/quotations/quotationsSecond?type=${type}'
      });
    },
    //悬浮按钮点击事件
    fabClick() {
      uni.navigateTo({
        url: '/pages/quotations/quotationsForm'
      });
    },
    updateImg(imgList) {
      this.imageList = imgList;
    }

  }
}
</script>

<style>
.nactive {
  padding: 10px 0 10px 0;
}

.container {
  backgroud-color: #f5f5f5;
}

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

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

.uni-container {
  align-items: center;
}

.gray-background {
  background-color: gray;
}

.uni-table-tr:first-child {
  background-color: #E8E8E8 !important;
  color: #7F818A;
}


</style>