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('bottom')"/>
    </view>
    <uni-popup ref="popup" background-color="#fff" @change="popup">
    <view class="example">
      <!-- 基础用法，不包含校验规则 -->
      <uni-forms ref="baseForm" :modelValue="form" >
        <uni-forms-item label="产品名称" required>
          <uni-easyinput v-model="form.productName" placeholder="请输入产品名称" />
        </uni-forms-item>
        <uni-forms-item label="地区" required>
          <uni-easyinput v-model="form.area" placeholder="请输入地区" />
        </uni-forms-item>
        <uni-forms-item label="价格" required>
          <uni-easyinput v-model="form.price" placeholder="请输入价格" />
        </uni-forms-item>
        <uni-forms-item label="地址" required>
          <uni-easyinput v-model="form.address" placeholder="请输入地址" />
        </uni-forms-item>
        <uni-forms-item label="手机号" required>
          <uni-easyinput v-model="form.phone" placeholder="请输入手机号" />
        </uni-forms-item>
        <uni-forms-item label="图片" required>
        <upload :imgArr="imageList" :fileSize="1" :limit="3" @updateImg="updateImg"></upload>
        </uni-forms-item>
      </uni-forms>
    </view>
    </uni-popup>
  </view>
</template>

<script>
import {listConfig, listQuotations} from "@/api/quotations/quotations";

export default {
  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) {
      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;
        });
      });
    },
    //悬浮按钮点击事件
    fabClick(type){
      this.type = type
      // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
      this.$refs.popup.open(type)
    },
    popup(){

    }

  }
}
</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>