jjx-web-sign-only/pages/enquiry/list.vue

<template>
	<view>
		<top-bar></top-bar>
		<common-header></common-header>
		<category-bar></category-bar>

		<!-- <view class="page-nav">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item><navigator url="/pages/spot/goods/goods">现货市场</navigator></el-breadcrumb-item>
			</el-breadcrumb>
		</view> -->

		<view class="carousel">
			<el-carousel height="170px">
				<el-carousel-item v-for="item in 4" :key="item">
					<image class="carousel-img"
						src="http://jyx.gxwebsoft.com/uploads/20210506/600fc93e6b85324b3ea1373ee264290d.jpg"
						mode="aspectFill"></image>
				</el-carousel-item>
			</el-carousel>
			<view class="goods-options">
				<el-row class="">
					<el-button @click="toRelease" type="primary" round>发布询价单</el-button>
					<el-button type="primary" round plain>我发布的询价单</el-button>
				</el-row>
			</view>
		</view>


		<!-- 筛选表单 -->
		<view class="filter-outer">
			<el-form @submit.native.prevent label-width="80px">
				<el-form-item label="关键词">
					<el-input @keyup.enter.native="search" clearable placeholder="输入关键字搜索" v-model="keyword">
						<el-button @click="search(1)" type="primary" slot="append" icon="el-icon-search"></el-button>
					</el-input>
				</el-form-item>
				<el-form-item label="分类">
					<el-tabs>
						<el-tab-pane v-for="(item, index) in categoryTreeData" :label="item.name" :key="item._id">
							<el-checkbox-group v-model="checkCategoryList[index]">
								<el-checkbox v-for="(citem, cindex) in item.children" :label="citem"
									:key="cindex">{{citem.name}}</el-checkbox>
							</el-checkbox-group>
						</el-tab-pane>

					</el-tabs>
				</el-form-item>
				<el-form-item label="城市">
					<el-checkbox-group v-model="checkProvinceList">
						<!-- <el-checkbox :label="{code:0,name: '全国'}">全国</el-checkbox> -->
						<el-checkbox :checked="cindex == 0" v-for="(citem, cindex) in provinceData" :label="citem"
							:key="cindex">{{citem.name}}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="已选">
					<view class="tags">
						<el-tag v-for="(item, index) in checkCategoryArr" :key="index">{{item.name}}</el-tag>
					</view>
				</el-form-item>

			</el-form>
		</view>
		
		<!-- 商品列表 -->
		<view class="goods-list">
			
		</view>
		
		<view class="paginatio">
			<el-pagination
				@current-change="search"
			  background
			  layout="prev, pager, next"
			  :total="goodsData.total">
			</el-pagination>
		</view>

	</view>
</template>

<script>
	import provinces from "@/uni_modules/vk-uview-ui/libs/address/provinces.json";
	provinces.unshift({
		code: 9999,
		name: '全国'
	})
	export default {
		data() {
			return {
				categoryTreeData: [],
				provinceData: provinces,
				checkCategoryList: [],
				checkProvinceList: [],
				keyword: '',
				goodsData: {
					total: 0,
					rows: []
				}

			};
		},
		onLoad() {
			this.search(1)
			vk.callFunction({
				url: 'client/spot/category/pub/getTree',
				title: '请求中...',
				data: {

				},
				success: (data) => {
					this.categoryTreeData = data.rows
					for (var i = 0; i < data.rows.length; i++) {
						this.checkCategoryList.push([])
					}
				}
			});
		},
		methods: {
			toRelease() {
				
				if (!vk.getVuex('$user.userInfo.fadadaConfirm')) {
					this.$confirm('您尚未认证, 是否前往认证?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.getCertUrl()
					})
				}else if(vk.pubfn.isNull(vk.getVuex('$user.userInfo.businessCard'))) {
					this.$confirm('请完善名片信息', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						vk.navigateTo('/pages/user/user?menu=business-card');
					})
				}else {
					uni.navigateTo({
						url: '/pages/enquiry/release'
					})
				}
				
				
				
				
			},
			search(pageIndex) {
				const categoryIds = []
				this.checkCategoryList.forEach(item => {
					item.forEach(sitem => {
						categoryIds.push(sitem._id)
					})
				})

				let provinceCodes = this.checkProvinceList.map(item => item.code)

				if (provinceCodes.includes(9999)) {
					provinceCodes = []
				}

				vk.callFunction({
					url: 'client/spot/goods/pub/getList',
					data: {
						pageIndex: pageIndex,
						pageSize: 20,
						keyword: this.keyword,
						categoryIds: categoryIds,
						provinceCodes: provinceCodes

					},
					success: (data) => {
						console.log('data: ',data);
						data.rows.forEach(item => {
							try {
								item.addressStr = item.address.province.name + "-" + item.address.city.name + "-" + item.address.area.name
							} catch(err){
								item.addressStr = ""
							}
						})
						this.goodsData = data
					}
				});
			},
		},
		computed: {
			checkCategoryArr() {
				let arr = []
				this.checkCategoryList.forEach(item => {
					arr.push(...item)
				})

				this.checkProvinceList.forEach(item => {
					arr.push({
						...item
					})
				})
				return arr
			}

		}
	}
</script>

<style lang="scss" scoped>
	.carousel {
		width: 1200px;
		margin: 20px auto;
	}

	.carousel-img {
		width: 100%;
		height: 100%;
	}

	.goods-options {
		background-color: #FFFFFF;
		padding: 20px;
	}

	.filter-outer {
		width: 1200px;
		margin: 20px auto;
		background-color: #FFFFFF;
		padding: 20px;
	}

	.tags {
		display: flex;

		.el-tag {
			margin-right: 10px;
		}
	}
	
	
	.goods-list {
		width: 1200px;
		margin: 20px auto;
		display: flex;
		
	}
	
	
	
	.paginatio{
		float: none;
		width: 1200px;
		margin: 20px auto;
		display: flex;
		justify-content: center;
	}
</style>