sooka_consult_uniapp/pages/quotations/quotations.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="loadImgSrc(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>
      <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 {
      //是否显示弹出层
      open: false,
      //悬浮按钮右对齐
      right: 'right',
      //悬浮按钮下对齐
      bottom: 'bottom',
      //分类列表
      categories: [
        // 这里是一级分类的数据
      ],
      // 行情列表
      quotationsList: [
        // 这里是列表的数据
      ],
      //查询参数
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        id: null,
      },
      //表单数据
      form: {},
      imageList: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList(row) {
      // 这里是获取列表的方法
      listQuotations().then(response => {
        this.quotationsList = response.rows.map(item => {
          let date = new Date(item.createTime);
          item.createTime = date.toLocaleDateString('zh-CN', {dateStyle: 'short'});
          return item;
        });
      });
      //获取分类树的方法
      listConfig().then(response => {
        this.categories = response.data.quotations;
      });
    },
    //根据分类id查询列表
    change(e) {
      console.log(e)
      const type = e.detail.index;
      uni.navigateTo({
        url: `../quotations/quotationsSecond?type=${type}`
      });
    },
    //悬浮按钮点击事件
    fabClick() {
      uni.navigateTo({
        url: '../quotations/quotationsForm'
      });
    },
    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>