lvdao-miniapp/pages/shops/shops.vue

<template>
	<view class="page">
		<!-- 搜索 -->
<!-- 		<view class="head-search">
			<u-search bg-color="#fff" placeholder="请输入" v-model="query.shopName" :show-action="false" @search="search" @clear="clearGet"></u-search>
			<u-button type="success" @click="search" style="height:32px;">搜索</u-button>
		</view> -->
		<view style="margin: 20rpx 0;background-color: #FFFFFF;border-radius: 18rpx;border: 2rpx solid #E8E8E8;	margin: 22rpx 24rpx;overflow: hidden;" >
			<u-search :action-style="{'background':'#19be6b','color':'#fff','height':'32px','line-height':'32px','border-radius':'18rpx'}" bg-color="#fff" placeholder="请输入关键词" v-model="query.shopName" action-text="搜索" @clear="search" @search="search" @custom="search"></u-search>
		</view>
		<view class="screen-list">
			<view class="list" @click="show = true">
				<text>区域</text>
				<image  :src="$imgUrl('/down.png')"></image>
				<u-select v-model="show" :list="areList" @confirm="(v) => {queryChange('belongingRegion', v)}"></u-select>
			</view>
		<!-- 	<view class="list" @click="setList(1)">
				<text>租金</text>
				<image :src="$imgUrl('/down.png')"></image>
			</view>
			<view class="list" @click="setList(2)">
				<text>默认排序</text>
				<image :src="$imgUrl('/down.png')"></image>
			</view> -->
			<view class="zidong" @click="zidong">
				自动匹配
			</view>
			<u-select v-model="show1" :list="list" @confirm="confirm" mini borderless></u-select>
		</view>
		<!-- 订单列表 -->
		<view class="goods-data">
			<view v-if="tableData.length == 0" style="padding: 50rpx 0;text-align: center;">暂无数据</view>
			<view class="goods-list">
				<view class="list" v-for="(item,index) in tableData" :key="index" @click="reconciliationdetail(item)">
					<view class="thumb">
						<u-image width="25vw" height="25vw" border-radius="20" :src="$img + (item.displayMainImage || item.locationDiagram || item.displayImage) | getimgurl"></u-image>
						<!-- <image :src="item.displayMainImage" mode=""></image> -->
					</view>
					<view class="item">
						<view class="title">
							<text class="one-omit">{{item.shopName}}</text>
						</view>
						<view class="tag">
							<!-- <text>标签标签</text>
							<text>标签标签</text> -->
						</view>
						<view class="introduce">
							<image  :src="$imgUrl('/kefu.png')"></image>
							<text class="one-omit">{{item.detailedLocation}}</text>
						</view>
						<view class="like-goods">
							<view class="retail-price" v-if="item.belongingRegion">
									<text>所属区域:</text>
									<text class="max">{{item.belongingRegion}}</text>
								</view>
							<view class="retail-price" >
						<!-- 		<text>租金:</text>
								<text class="min">￥</text>
								<text class="max">{{item.id * 10}}</text>
								<text class="min">/月</text>
								<text class="line"></text> -->
								<text>面积:</text>
								<text class="max">{{item.actualUsableArea}}</text>
								<text class="min" >/m²</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="zidongS" mode="center" width="90%" border-radius="20" :mask-close-able="false" :closeable="true" close-icon-pos="top-right">
			<view class="zulinY">
				<view style="font-size: 32rpx;font-weight: 600;margin-bottom: 20rpx;">请填写您的租赁意向</view>
				<view class="" style="display: flex;justify-content: space-between;border-bottom:1px solid #F6F9FA;padding: 20rpx 0;">
						<text class="sc" style="color: #979797;font-size: 30rpx;">意向区域</text>
						<view @click="showS(2)">
							<text class="mc" style="margin-right: 10rpx;"> {{formList.belongingRegion ==''?'请选择':formList.belongingRegion}}</text>
							<u-icon name="arrow-down"></u-icon>
						</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;border-bottom:1px solid #F6F9FA;padding: 20rpx 0;">
						<text class="sc" style="color: #979797;font-size: 30rpx;">意向租金(月)</text>
						<view @click="showS(4)">
							<text class="mc" style="margin-right: 10rpx;"> {{formList.zujin ==''?'请选择':formList.zujin}}</text>
							<u-icon name="arrow-down"></u-icon>
						</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;border-bottom:1px solid #F6F9FA;padding: 20rpx 0;">
						<text class="sc" style="color: #979797;font-size: 30rpx;">意向面积</text>
						<view @click="showS(5)">
							<text class="mc" style="margin-right: 10rpx;"> {{formList.mianji ==''?'请选择':formList.mianji}}</text>
							<u-icon name="arrow-down"></u-icon>
						</view>
				</view>
				<!-- <view class="" style="display: flex;justify-content: space-between;border-bottom:1px solid #F6F9FA;padding: 20rpx 0;">
						<view class="sc" style="color: #979797;font-size: 30rpx;line-height: 200%;">租赁人姓名</view>
						<view style="width: 20%">
							<u-input v-model="formList.name" type="text" :border="false" placeholder="请输入" :clearable="false" />
						</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;border-bottom:1px solid #F6F9FA;padding: 20rpx 0;">
						<view class="sc" style="color: #979797;font-size: 30rpx;line-height: 200%;">联系电话</view>
						<view style="width: 20%">
							<u-input v-model="formList.phone" type="text" :border="false" placeholder="请输入" :clearable="false"/>
						</view>
				</view> -->
				<view class="" style="text-align: center;padding: 16rpx 0;background-color: #00BE4B;color: #fff;border-radius: 20rpx;margin: 20rpx 0;" @click="request">
					确定
				</view>
			</view>
			<u-select v-model="showList" :list="companys" @confirm="handleCompanyConfirm" mini borderless></u-select>
			
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				query: {
					shopName:'',
					belongingRegion: '',
					pageNumber: 0, 
					pageSize: 10 ,
					publishStatus:2,
					minPrice:0,
					maxPrice:1000000
				},
				pageindex: {
					pageNumber: 0,
					pageSize: 10,
					publishStatus:2,
					minPrice:0,
					maxPrice:1000000
				},
				tableData: [],
				areList: [
					{value: '武侯区', label: '武侯区'},
					{value: '锦江区', label: '锦江区'},
					{value: '青羊区', label: '青羊区'},
					{value: '金牛区', label: '金牛区'},
					{value: '双流区', label: '双流区'},
					{value: '郫都区', label: '郫都区'},
					{value: '龙泉驿区', label: '龙泉驿区'},
					{value: '温江区', label: '温江区'},
				], // 区域列表
				
				showList:false,
				zidongS: false,
				formList: {
					zulei: '',
					belongingRegion: '',
					zuqi:'',
					zujin: '',
					mianji:'',
					name:'',
					phone:'',
					pageNumber: 0,
					pageSize: 10,
					publishStatus:2
				},
				showSex: false,
				show:false,
				index:1,
				companys: [
					{
						value: '1',
						label: '商铺'
					},
					{
						value: '2',
						label: '临铺'
					},
					{
						value: '3',
						label: '广告位'
					}
				],
				show1:false,
				list:[],
				xuanval:0,
			}
		},
		filters: {
			getimgurl(e) {
				let c1 = e.split(',')[0]
				return c1;
			},
		},
		mounted() {
			this.getAll()
		},
		methods: {
			//请求列表数据
			getAll() {
				let query = Object.assign(this.query, this.pageindex);
				this.$http.sendRequest('/cereBasicInformationShop/queryByPage', 'POST', query, 1).then(res => {
					//成功回调
					this.tableData = res.data.data.content
				}).catch(err => {
					console.log(err)
					//请求失败
				})
			},
			// 查询
			search() {
			this.$http.sendRequest('/cereBasicInformationShop/queryByPage', 'POST', this.query, 1).then(res => {
				//成功回调
				this.tableData = res.data.data.content
			})
			},
			queryChange(key, val) {
				this.query[`${key}`] = val[0].value;
				this.search();
			},
			reconciliationdetail(item) {
				let items = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/details/details?item=${items}`
				})
			},
			
			
			// 自动匹配
			zidong() {
					this.zidongS = true
			},
			showS(val){
			   this.index = val 
			   if(val == 1){
				   this.companys = [
					{
						value: '1',
						label: '商铺'
					},
					// {
					// 	value: '2',
					// 	label: '临铺'
					// },
					// {
					// 	value: '3',
					// 	label: '广告位'
					// }
				]
				
			   }else if(val ==2 ){
				   this.companys = [
				   	{
				   		value: '1',
				   		label: '成华区'
				   	},
				   	{
				   		value: '2',
				   		label: '武侯区'
				   	},
					{
						value: '3',
						label: '锦江区'
					},
					{
						value: '4',
						label: '青羊区'
					},
					{
						value: '5',
						label: '金牛区'
					},
					{
						value: '6',
						label: '双流区'
					},
					{
						value: '7',
						label: '郫都区'
					},
					{
						value: '8',
						label: '龙泉驿区'
					},
					{
						value: '9',
						label: '温江区'
					}
					
					
				   ]
			   }else if(val == 3){
				   this.companys = [
				   	{
				   		value: '1',
				   		label: '1年'
				   	},
				   	{
				   		value: '2',
				   		label: '2年'
				   	}
				   ]
			   }else if(val == 4){
				   this.companys = [
				   	{
				   		value: '1',
				   		label: '0-2000'
				   	},
				   	{
				   		value: '2',
				   		label: '2000-5000'
				   	},
					{
						value: '3',
						label: '5000-10000'
					}
				   ]
			   }else{
				   this.companys = [
				   	{
				   		value: '1',
				   		label: '0-100'
				   	},
				   	{
				   		value: '2',
				   		label: '100-200'
				   	},
				   	{
				   		value: '3',
				   		label: '200-300'
				   	}
				   ]
			   }
			   this.showList = true
			},
		handleCompanyConfirm(e){
			if(this.index == 1){
				this.formList.zulei = e[0].label
			}else if(this.index  == 2){
				this.formList.belongingRegion = e[0].label 
			}else if(this.index  == 3){
				this.formList.zuqi = e[0].label
			}else if(this.index  == 4){
				this.formList.zujin = e[0].label 
				if(e[0].value == 1){
					this.formList.minPrice = 0
					this.formList.maxPrice = 2000
				}else if(e[0].value == 2){
					this.formList.minPrice = 2000
					this.formList.maxPrice = 5000
				}else{
					this.formList.minPrice = 5000
					this.formList.maxPrice = 10000
				}
			}else{
				this.formList.mianji = e[0].label 
				if(e[0].value == 1){
					this.formList.minActualUsableArea = 0
					this.formList.maxActualUsableArea = 100
				}else if(e[0].value == 2){
					this.formList.minActualUsableArea = 100
					this.formList.maxActualUsableArea = 200
				}else{
					this.formList.minActualUsableArea = 200
					this.formList.maxActualUsableArea = 300
				}
				
			}
			
		},
		setList(val){
			this.xuanval = val
			if(val == 0){
			const filteredTableData = this.tableData.filter(item => item.hasOwnProperty('belongingRegion'));
			
			// 提取 belongingRegion 字段并进行去重
			const labeledBelongingRegions = filteredTableData.map(item => ({
				label: item.belongingRegion
			}));
		
			const uniqueBelongingRegions = [...new Set(labeledBelongingRegions)];
				console.log(uniqueBelongingRegions)
				this.list  = uniqueBelongingRegions
			}else if(val == 1){
				this.list = []
			}else if(val == 2){
				this.list = []
			}
			this.show1 = true
		},
		confirm(val){
			let page = {
				pageNumber: 0,
				pageSize: 10,
				belongingRegion:val[0].label
			}
			this.$http.sendRequest('/cereBasicInformationShop/queryByPage', 'POST', page, 1).then(res => {
				//成功回调
				this.tableData = res.data.data.content
			})
		},
		clearGet(){
			this.$http.sendRequest('/cereBasicInformationShop/queryByPage', 'POST', this.pageindex, 1).then(res => {
				//成功回调
				this.tableData = res.data.data.content
			})
		},
		request(){
			this.$http.sendRequest('/cereBasicInformationShop/queryByPage', 'POST', this.formList, 1).then(res => {
				//成功回调
				this.tableData = res.data.data.content
			})
			this.formList = {
					zulei: '',
					belongingRegion: '',
					zujin: '',
					mianji:'',
					name:'',
					phone:'',
					pageNumber: 0,
					pageSize: 10,
					publishStatus:2
				
			}
			this.zidongS = false
		}
		}
	}
</script>
<style scoped lang="scss">
	@import 'shops.scss';
</style>