|
@@ -0,0 +1,159 @@
|
|
|
+<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>
|