罗世杰:feat:商铺展示列表提供删除和编辑按钮

This commit is contained in:
LuoShijie
2023-11-07 00:17:38 +08:00
parent 7523e0e262
commit b7a4fad4f6
4 changed files with 68 additions and 12 deletions

View File

@@ -6,6 +6,7 @@
:shopInfo="item" :shopInfo="item"
:is-adshow="isADshow" :is-adshow="isADshow"
:show-style="showStyle" :show-style="showStyle"
@delItem="handleDel"
></ShowShopListItem> ></ShowShopListItem>
</view> </view>
</template> </template>
@@ -15,6 +16,7 @@
* @property {Array} shopInfoList 对象数组,(带图片)需要展示的商铺列表 * @property {Array} shopInfoList 对象数组,(带图片)需要展示的商铺列表
* @property {Number} showStyle 展示商铺的样式类型(0为首页默认) * @property {Number} showStyle 展示商铺的样式类型(0为首页默认)
* @property {Boolean} isADshow 是否显示推广广告 * @property {Boolean} isADshow 是否显示推广广告
* @property {Boolean} isEdit 是否显示编辑和删除
*/ */
export default { export default {
name:"ShowShopList", name:"ShowShopList",
@@ -27,7 +29,7 @@
showStyle:{ showStyle:{
type: Number, type: Number,
default() { default() {
return 0 return 1
} }
}, },
isADshow: { isADshow: {
@@ -76,6 +78,15 @@
}, },
computed: { computed: {
},
methods: {
handleDel(shopid){
console.log("删除了商铺", shopid);
// const delindex = this.shopInfoList.findIndex((item,index)=> item.shopid === shopid)
// TODO不能直接修改
// if(delindex !== -1) this.shopInfoList = this.shopInfoList.slice(delindex,1)
// console.log(this.shopInfoList);
}
} }
} }
</script> </script>

View File

@@ -35,7 +35,8 @@
</view> </view>
</view> </view>
</view> </view>
<view class="cart-and-date" v-if="showStyle==1">
<view class="cart-and-date bottom-common" v-if="showStyle==1">
<view> <view>
<view> <view>
<u-image src="/static/shoplist/sy_icon_lbpm.png" width="12px" height="15px"></u-image> <u-image src="/static/shoplist/sy_icon_lbpm.png" width="12px" height="15px"></u-image>
@@ -61,14 +62,26 @@
<text>{{shopInfo.phoneNum}}</text> <text>{{shopInfo.phoneNum}}</text>
</view> </view>
</view> </view>
<view v-if="isADShow" class="list-ads" style="font-size: 11px;">
<view v-if="isADShow" class="list-ads bottom-common" style="font-size: 11px;">
<view> <view>
<text>已将该店推给 </text> <text>已将该店推给</text>
<text style="color:#ce3b3b;margin: 0 4px;"> {{shopInfo.promotionNum}} </text> <text style="color:#ce3b3b;margin: 0 4px;"> {{shopInfo.promotionNum}} </text>
<text> 位潜在客户</text> <text> 位潜在客户</text>
</view> </view>
<text style="color:#ce3b3b">我也要推广>></text> <text style="color:#ce3b3b">我也要推广>></text>
</view> </view>
<view v-if="isEdit" class="del-and-edit bottom-common">
<view class="edit" @click="handleEdit(shopInfo.shopid)">
<u-image src="/static/shoplist/dp_icon_pj.png" width="12px" height="15px"></u-image>
<text>编辑</text>
</view>
<view class="del" @click="handleDel(shopInfo.shopid)">
<u-image src="/static/shoplist/dp_icon_sc.png" width="12px" height="15px"></u-image>
<text>删除</text>
</view>
</view>
</view> </view>
</template> </template>
@@ -89,7 +102,7 @@
showStyle:{ showStyle:{
type: Number, type: Number,
default() { default() {
return 1 return 0
} }
}, },
isADShow: { isADShow: {
@@ -97,17 +110,33 @@
default() { default() {
return true return true
} }
},
isEdit: {
type: Boolean,
default() {
return false
}
} }
}, },
data() { data() {
return { return {
delshopid: 0,
} }
}, },
computed: { computed: {
},
methods: {
handleEdit(shopid) {
// TODO 完成页面跳转
console.log("edit clicked");
console.log(shopid);
},
handleDel(shopid) {
this.$emit('delItem', shopid)
}
} }
} }
</script> </script>
@@ -161,10 +190,16 @@
} }
} }
} }
.cart-and-date {
display: flex; .bottom-common {
border-top: 1px solid #f7f7f7; border-top: 1px solid #f7f7f7;
padding-top: 5px; padding-top: 5px;
display: flex;
> view {
display: flex;
}
}
.cart-and-date {
margin-bottom: 6px; margin-bottom: 6px;
justify-content: space-between; justify-content: space-between;
font-weight: 500; font-weight: 500;
@@ -174,17 +209,27 @@
} }
>view { >view {
flex:1; flex:1;
display: flex;
>view { >view {
margin-right: 4px; margin-right: 4px;
} }
} }
} }
.del-and-edit{
margin-top: 6px;
justify-content: flex-end;
>view{
margin-left: 38rpx;
}
text {
margin-left: 4px;
color: #666666;
}
}
.list-ads { .list-ads {
border-top: 1px solid #f7f7f7;
padding-top: 5px;
display: flex;
justify-content: space-between; justify-content: space-between;
text {
color: #359867;
}
} }
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB