罗世杰:faet:SearchShopList组件支持第二种样式

This commit is contained in:
LuoShijie
2023-11-07 21:41:15 +08:00
parent bfb9decb93
commit 9d701e7442
5 changed files with 146 additions and 9 deletions

View File

@@ -3,6 +3,28 @@
<view class="list-container">
<view class="text-area">
<text>{{shopInfo.title}}</text>
<view class="style2" v-if="showStyle === 1">
<view class="rent-and-cost">
<text>租金{{shopInfo.price}}/</text>
<text v-if="showStyle==1">预计投资{{shopInfo.yjtzText}}</text>
</view>
<view class="cart-and-pos">
<view>
<view>
<u-image src="/static/shoplist/sy_icon_lbhy.png" width="12px" height="15px"></u-image>
</view>
<text>{{shopInfo.category}}</text>
</view>
<view>
<view>
<u-image src="/static/shoplist/sy_icon_lbhdw.png" width="12px" height="15px"></u-image>
</view>
<text>{{shopInfo.pos}}</text>
</view>
</view>
</view>
<view class="pos-and-sqr">
<view>
<view>
@@ -23,7 +45,8 @@
<text>{{shopInfo.phoneNum}}</text>
</view>
</view>
<view class="cart-and-date">
<view class="cart-and-date" v-if="showStyle === 0">
<view>
<view>
<u-image src="/static/shoplist/sy_icon_lbhy.png" width="12px" height="15px"></u-image>
@@ -43,6 +66,18 @@
<text>发布日期{{shopInfo.date}}</text>
</view>
</view>
<view v-if="isEdit" class="del-and-edit bottom-common">
<view class="edit" @click="handleEdit(shopInfo.searchid)">
<u-image src="/static/shoplist/dp_icon_pj.png" width="12px" height="15px"></u-image>
<text>编辑</text>
</view>
<view class="del" @click="handleDel(shopInfo.searchid)">
<u-image src="/static/shoplist/dp_icon_sc.png" width="12px" height="15px"></u-image>
<text>删除</text>
</view>
</view>
</view>
</view>
</view>
@@ -66,7 +101,18 @@
}
}
},
showStyle: {
type:Number,
default() {
return 0
}
},
isEdit: {
type:Boolean,
default(){
return false
}
}
},
data() {
@@ -77,6 +123,15 @@
},
computed: {
},
methods: {
handleEdit(searchid) {
// TODO 完成页面跳转
console.log("点击了编辑ID为",searchid);
},
handleDel(searchid) {
this.$emit('delItem', searchid)
}
}
}
</script>
@@ -91,7 +146,26 @@
font-size: 12px;
.list-container {
display: flex;
height: 90px;
height: auto;
}
.bottom-common {
border-top: 1px solid #f7f7f7;
padding-top: 5px;
display: flex;
> view {
display: flex;
}
}
.del-and-edit{
margin-top: 6px;
justify-content: flex-end;
>view{
margin-left: 38rpx;
}
text {
margin-left: 4px;
color: #666666;
}
}
.text-area {
display: flex;
@@ -103,13 +177,43 @@
>view {
display: flex;
>view {
flex:1;
display: flex;
>view {
margin-right: 4px;
}
}
}
.style2 {
display: flex;
flex-direction: column;
color: #CC3333;
font-weight: 500;
.rent-and-cost {
text{
margin-right: 26rpx;
}
margin-top: 5px;
padding-top: 5px;
padding-bottom: 6px;
}
.cart-and-pos{
> view{
margin-right: 27px;
display: flex;
}
display: flex;
border-top: 1px solid #f7f7f7;
padding-top: 5px;
margin-bottom: 5px;
justify-content: start;
font-weight: 500;
text {
color: #CC3333;
line-height: 12px;
}
}
}
.pos-and-sqr {
justify-content: space-between;
margin-top: 5px;
@@ -119,6 +223,7 @@
line-height: 12px;
}
>view {
flex:1;
display: flex;
>view {
margin-right: 4px;
@@ -126,6 +231,7 @@
}
}
.cart-and-date {
display: flex;
border-top: 1px solid #f7f7f7;
padding-top: 5px;
justify-content: space-between;
@@ -133,6 +239,7 @@
text {
color: #CC3333;
line-height: 12px;
margin-right: 48rpx;
}
}
}