罗世杰：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;