罗世杰：fix：成交案例页面样式调整，SearchShopListItem.vue支持显示成交案例

components/DropDown/DropDown.vue

@@ -20,7 +20,7 @@
 			</view>
 		</view>
 		<view class="item-border">
-			<DropDownItem v-if="activeIndex !== -1" :list="tablist"/>
+			<DropDownItem v-if="activeIndex !== -1" :list="tablist" @cancelDrop="cancelDrop"/>
 		</view>
 	</view>
 </template>
@@ -61,6 +61,10 @@
 					this.activeIndex = -1;
 				}else 
 					this.activeIndex = index
+			},
+			cancelDrop() {
+				console.log("取消遮罩");
+				this.activeIndex = -1;
 			}
 		},
 		

components/DropDown/DropDownItem.vue

@@ -1,12 +1,13 @@
 <template>
 	<view class="root">
-		<view class="mask"/>
+		<view class="mask" @click="handleMask"/>
 		<view class="list-container">
 			<view 
 				class="item"
 				v-for="(item,index) in list"
+				:class="{isActive: activeIndex === index}"
+				@click="handleActive(index)"
 			>
-				<view></view>
 				<text class="list-text">{{item}}</text>
 			</view>
 		</view>
@@ -22,11 +23,43 @@
 					return	[]
 				}
 			}
-		}
+		},
+		data(){
+			return{
+				activeIndex:-1
+			}
+		},
+		methods: {
+		  handleMask() {
+		    this.$emit('cancelDrop');
+		  },
+		  async handleActive(index) {
+		    this.activeIndex = index;
+		    // 设置一个定时器，等待200毫秒
+		    const delayPromise = this.delay(200);
+		    // 等待定时器完成
+		    await delayPromise;
+		    this.handleMask();
+		  },
+		  delay(ms) {
+		    return new Promise((resolve) => {
+		      // 设置一个定时器，并将定时器的ID存储在this.timerId中
+		      this.timerId = setTimeout(() => {
+		        resolve();
+		        // 清除定时器
+		        clearTimeout(this.timerId);
+		      }, ms);
+		    });
+		  },
+		},
+
 	}
 </script>
 
 <style lang="scss" scoped>
+	.isActive{
+		color: #CC3333;
+	}
 	.mask{
 	    position: fixed;
 	    top: 0;

components/SearchShopListItem/SearchShopListItem.vue

@@ -1,5 +1,8 @@
 <template>
 	<view class="list-border">
+		<view class="yzr" v-if="showStyle === 2">
+			<u-image src="/static/cjal/anl_tu.png" width="156rpx" height="156rpx"></u-image>
+		</view>
 		<view class="list-container">
 			<view class="text-area">
 				<text>{{shopInfo.title}}</text>
@@ -24,25 +27,45 @@
 						</view>
 					</view>
 				</view>
+				<view class="style3" v-if="showStyle === 2">
+					<view class="cjsj">成交时间：{{shopInfo.date}}</view>
+					<view class="cart-and-pos">
+						<view>
+							<view>
+								<u-image src="/static/cjal/al_icon_flh.png" width="12px" height="15px"></u-image>
+							</view>
+							<text :class="{style3: showStyle === 2}">{{shopInfo.category}}</text>
+						</view>
+						<view>
+							<view>
+								<u-image src="/static/cjal/al_icon_dwh.png" width="12px" height="15px"></u-image>
+							</view>
+							<text :class="{style3: showStyle === 2}">{{shopInfo.pos}}</text>
+						</view>
+					</view>
+				</view>
 				
-				<view class="sqr-and-lx">
+				<view class="sqr-and-lx" :class="{pb0: showStyle === 2}">
 					<view>
 						<view>
-							<u-image src="/static/shoplist/sy_icon_lbpm.png" width="12px" height="15px"></u-image>
+							<u-image v-if="showStyle === 2" src="/static/cjal/al_icon_pm.png" width="12px" height="15px"></u-image>
+							<u-image v-else src="/static/shoplist/sy_icon_lbpm.png" width="12px" height="15px"></u-image>
 						</view>
-						<text>{{shopInfo.sqr}}m2</text>
+						<text :class="{style3: showStyle === 2}">{{shopInfo.sqr}}m2</text>
 					</view>
 					<view>
 						<view>
-							<u-image src="/static/shoplist/sy_icon_lbxm.png" width="12px" height="15px"></u-image>
+							<u-image v-if="showStyle === 2" src="/static/cjal/al_icon_mch.png" width="12px" height="15px"></u-image>
+							<u-image v-else src="/static/shoplist/sy_icon_lbxm.png" width="12px" height="15px"></u-image>
 						</view>
-						<text>{{shopInfo.uname}}</text>
+						<text :class="{style3: showStyle === 2}">{{shopInfo.uname}}</text>
 					</view>
 					<view style="flex:2">
 						<view>
-							<u-image src="/static/shoplist/sy_icon_lblxr.png" width="12px" height="15px"></u-image>
+							<u-image v-if="showStyle === 2" src="/static/cjal/al_icon_sjh.png" width="12px" height="15px"></u-image>
+							<u-image v-else src="/static/shoplist/sy_icon_lblxr.png" width="12px" height="15px"></u-image>
 						</view>
-						<text>{{shopInfo.phoneNum}}</text>
+						<text :class="{style3: showStyle === 2}">{{shopInfo.phoneNum}}</text>
 					</view>
 				</view>
 				
@@ -137,7 +160,27 @@
 </script>
 
 <style lang="scss" scoped>
+	.style3 {
+		position: relative;
+		color:#696969 !important;
+		.cart-and-pos{
+			border-top: 1px solid #eee !important;
+		}
+	}
+	.pb0{
+		padding-bottom: 0 !important;
+	}
+	.yzr {
+		position: absolute;
+		top: 30rpx;
+		right: 13rpx;
+	}
+	.cjsj {
+		margin-top: 20rpx;
+		margin-bottom: 12rpx;
+	}
 	.list-border {
+		position: relative;
 		margin: 10px 0;
 		padding: 10px;
 		background-color: #fff;
@@ -184,7 +227,7 @@
 				}
 			}
 			
-			.style2 {
+			.style2,.style3 {
 				display: flex;
 				flex-direction: column;
 				color: #CC3333;
@@ -199,7 +242,7 @@
 				}
 				.cart-and-pos{
 					> view{
-						margin-right: 27px;
+						margin-right: 50rpx;
 						display: flex;
 					}
 					display: flex;
@@ -222,6 +265,9 @@
 					color: #359867;
 					line-height: 12px;
 				}
+				.style3 {
+					color: #696969;
+				}
 				>view {
 					flex:1;
 					display: flex;

pages/index/index.vue

@@ -2,6 +2,9 @@
 	<view class="home-base-bg">
 		<InputAndSwiper></InputAndSwiper>
 		<view class="home-content">
+			<view class="service">
+				<u-image src="/static/statistics/sy_icon_lxkf.png" width="108rpx" height="108rpx"/>
+			</view>
 			<HomeNavCard></HomeNavCard>
 			<HomeNoticeBar :text="notice"/>
 			<Statistics :data="statisticsNum"/>
@@ -54,6 +57,12 @@
 		width: 100%;
 		.home-content {
 			margin: 0 10px;
+			.service {
+				position: fixed;
+				right: 17rpx;
+				top: 1109rpx;
+				z-index: 1;
+			}
 		}
 		.show-and-search{
 			display: flex;