odjbin/city-store-transfer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
LuoShijie
2023-11-11 22:47:47 +08:00
parent f97c558fa0
commit a8fbef6966
5 changed files with 105 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/DropDown/DropDown.vue
View File

@@ -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;
}
},

39
components/DropDown/DropDownItem.vue
View File

@@ -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;

64
components/SearchShopListItem/SearchShopListItem.vue
View File

@@ -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;