webapp / GreenwayWeb

<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;"><span style="color: red;">*</span>
						意向区域</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;"><span
							style="color: red;">*</span>租金周期</text>
					<view @click="showS(3)">
						<text class="mc" style="margin-right: 10rpx;">
							{{formList.leaseTerm ==''?'请选择':formList.leaseTerm}}</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;"><span
							style="color: red;">*</span>意向租金</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;"><span
							style="color: red;">*</span>意向面积</text>
					<view @click="showS(5)">
						<text class="mc" style="margin-right: 10rpx;">
							{{formList.actualUsableArea ==''?'请选择':formList.actualUsableArea}}</text>
						<u-icon name="arrow-down"></u-icon>
					</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: {
					belongingRegion: '',
					zujin: '',
					actualUsableArea: '',
					leaseTerm: '',
					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)
			
				let items = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/details/details?item=${encodeURIComponent(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: '年'
						},
						{
							value: '2',
							label: '季'
						},
						{
							value: '3',
							label: '月'
						},
						{
							value: '4',
							label: '日'
						}
					]
				} else if (val == 4) {
					this.companys = [{
							value: '1',
							label: '0-2000'
						},
						{
							value: '2',
							label: '2001-5000'
						},
						{
							value: '3',
							label: '5001-10000'
						},
						{
							value: '4',
							label: '10001-20000'
						}
					]
				} 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.leaseTerm = 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.actualUsableArea = 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() {
				const isLogin = uni.getStorageSync('user');
				if (isLogin == '') {
					// 如果未登录，跳转到登录页面
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return false
				}
				if (!this.formList.belongingRegion) {
					uni.showToast({
						icon: 'none',
						title: '请选择意向区域'
					});
					return false;
				}
				if (!this.formList.leaseTerm) {
					uni.showToast({
						icon: 'none',
						title: '请选择租金周期'
					});
					return false;
				}
				if (!this.formList.zujin) {
					uni.showToast({
						icon: 'none',
						title: '请选择意向租金'
					});
					return false;
				}
				if (!this.formList.actualUsableArea) {
					uni.showToast({
						icon: 'none',
						title: '请选择意向面积'
					});
					return false;
				}
				this.$http.sendRequest('/cereBasicInformationShop/queryByPage', 'POST', this.formList, 1).then(res => {
					//成功回调
					this.tableData = res.data.data.content
					if (res.data.data.content.length != 0) {
						let obj = {
							leaseTerm: this.formList.leaseTerm,
							rentalPrice:this.formList.zujin,
							actualUsableArea:this.formList.actualUsableArea,
							belongingRegion:this.formList.belongingRegion,
							applicableResources:'商铺',
							matchingRecord: JSON.stringify(res.data.data.content),
							type:2,
							shopId:isLogin.phone
						}
						this.$http.sendRequest('/resourceStrategyMatchingRecord/insert', 'POST', obj, 1).then(
							res => {
								this.formList = {
									belongingRegion: '',
									zujin: '',
									actualUsableArea: '',
									leaseTerm: '',
									pageNumber: 0,
									pageSize: 10,
									publishStatus: 2
								}
							})
					}

				})
			
				this.zidongS = false
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'shops.scss';
</style>