310 lines
6.5 KiB
Vue
310 lines
6.5 KiB
Vue
<template>
|
||
<view class="list-border">
|
||
<view class="list-container" @click="enterDetail()">
|
||
<view class="shop-list-img">
|
||
<u-image :src="leftImage" width="80px" height="80px" radius="8px"></u-image>
|
||
</view>
|
||
<view class="text-area">
|
||
<u-text style="font-weight: 500;" :text="shopInfo.tt" :lines="2"></u-text>
|
||
<view v-if="showStyle == 0" class="pos-and-sqr">
|
||
<view>
|
||
<view>
|
||
<u-image src="/static/shoplist/sy_icon_lbdw.png" width="12px" height="15px"></u-image>
|
||
</view>
|
||
<text>{{shopInfo.area1}}</text>
|
||
</view>
|
||
<view>
|
||
<view>
|
||
<u-image src="/static/shoplist/sy_icon_lbpm.png" width="12px" height="15px"></u-image>
|
||
</view>
|
||
<text>{{shopInfo.mianji}}m²</text>
|
||
</view>
|
||
</view>
|
||
<view v-else class="pos-and-sqr pos-only">
|
||
<view>
|
||
<view>
|
||
<u-image src="/static/shoplist/dp_icon_hhhdw.png" width="12px" height="15px"></u-image>
|
||
</view>
|
||
<text>{{shopInfo.area1}}-{{shopInfo.adress}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="rent-and-date">
|
||
<text>租金：{{shopInfo.zujin}}元/月</text>
|
||
<text v-if="showStyle == 0">发布日期：{{$u.timeFormat(shopInfo.pub_time,'yyyy-mm-dd')}}</text>
|
||
<text v-if="showStyle == 1">转让费：{{shopInfo.zhuanrangfei}}万</text>
|
||
<!-- 有 bug -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="cart-and-date bottom-common" v-if="showStyle == 1 || showStyle == 2">
|
||
<view>
|
||
<view>
|
||
<u-image src="/static/shoplist/sy_icon_lbpm.png" width="12px" height="15px"></u-image>
|
||
</view>
|
||
<text>{{shopInfo.mianji}}m²</text>
|
||
</view>
|
||
<view>
|
||
<view>
|
||
<u-image src="/static/shoplist/sy_icon_lblhy.png" width="12px" height="15px"></u-image>
|
||
</view>
|
||
<text>{{shopInfo.trade1}}</text>
|
||
</view>
|
||
<view>
|
||
<view>
|
||
<u-image src="/static/shoplist/sy_icon_lbxm.png" width="12px" height="15px"></u-image>
|
||
</view>
|
||
<text>{{shopInfo.lianxiren}}</text>
|
||
</view>
|
||
<view>
|
||
<view>
|
||
<u-image src="/static/shoplist/sy_icon_lblxr.png" width="12px" height="15px"></u-image>
|
||
</view>
|
||
<text>{{shopInfo.mobile}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="isADShow" class="list-ads bottom-common" style="font-size: 11px;" @click="handleAD">
|
||
<view>
|
||
<text>已将该店推给</text>
|
||
<text style="color:#ce3b3b;margin: 0 4px;"> {{shopInfo.num}} </text>
|
||
<text> 位潜在客户</text>
|
||
</view>
|
||
<text style="color:#ce3b3b">我也要推广>></text>
|
||
</view>
|
||
|
||
<view v-if="isEdit" class="del-and-edit bottom-common">
|
||
<view class="edit" @click="handleEdit(shopInfo.id)">
|
||
<u-image src="/static/shoplist/dp_icon_pj.png" width="12px" height="15px"></u-image>
|
||
<text>编辑</text>
|
||
</view>
|
||
<view class="del" @click="handleDel(shopInfo.id)">
|
||
<u-image src="/static/shoplist/dp_icon_sc.png" width="12px" height="15px"></u-image>
|
||
<text>删除</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* @property {Object} shopInfo 传入商铺对象数据
|
||
* @property {Number} showStyle 展示商铺的样式类型(0为首页默认)
|
||
* @property {Boolean} isADshow 是否显示推广广告
|
||
* @property {Boolean} isEdit 是否显示编辑和删除
|
||
* @property {String} adlinkPath 推广广告链接
|
||
*/
|
||
export default {
|
||
props: {
|
||
shopInfo: {
|
||
type: Object,
|
||
default () {
|
||
return {
|
||
|
||
}
|
||
}
|
||
},
|
||
// 展示商铺的样式类型
|
||
showStyle: {
|
||
type: Number,
|
||
default () {
|
||
return 0
|
||
}
|
||
},
|
||
// 是否展示推广广告
|
||
isADShow: {
|
||
type: Boolean,
|
||
default () {
|
||
return true
|
||
}
|
||
},
|
||
// 推广广告链接
|
||
adlinkPath: {
|
||
type: String,
|
||
default () {
|
||
return ''
|
||
}
|
||
},
|
||
// 是否可编辑
|
||
isEdit: {
|
||
type: Boolean,
|
||
default () {
|
||
return false
|
||
}
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
delshopid: 0,
|
||
leftImage: ''
|
||
}
|
||
|
||
},
|
||
computed: {
|
||
|
||
},
|
||
watch: {
|
||
shopInfo(newVal, oldVal) {
|
||
if (newVal.pics.includes(",")) {
|
||
this.leftImage = this.$api.imgUrl + newVal.pics.split(',')[0]
|
||
} else {
|
||
this.leftImage = this.$api.imgUrl + newVal.pics
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
if (this.shopInfo.pics.includes(",")) {
|
||
this.leftImage = this.$api.imgUrl + this.shopInfo.pics.split(',')[0]
|
||
} else {
|
||
this.leftImage = this.$api.imgUrl + this.shopInfo.pics
|
||
}
|
||
},
|
||
methods: {
|
||
handleEdit(shopid) {
|
||
// TODO 完成页面跳转
|
||
console.log("点击了编辑ID为", shopid);
|
||
this.$emit('updateItem', shopid)
|
||
},
|
||
handleDel(shopid) {
|
||
// 需完善删除请求
|
||
this.$emit('delItem', shopid)
|
||
},
|
||
enterDetail() {
|
||
console.log("进入详情页面", this.shopInfo.id, this.shopInfo.type);
|
||
const query = this.$u.queryParams({
|
||
id: this.shopInfo.id,
|
||
type: this.shopInfo.type
|
||
})
|
||
console.log("query", query);
|
||
uni.navigateTo({
|
||
url: '/pages/detail/detail' + `${query}`
|
||
})
|
||
},
|
||
handleAD() {
|
||
// TODO 完成页面跳转
|
||
if (this.adlinkPath) {
|
||
uni.navigateTo({
|
||
url: this.adlinkPath
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/pages/publish/publishTransfer/publishTransfer'
|
||
})
|
||
}
|
||
}
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.list-border {
|
||
margin: 10px 0;
|
||
padding: 10px;
|
||
background-color: #fff;
|
||
border-radius: 7px;
|
||
box-shadow: 0 1px 2px 0 rgba(224, 224, 224, 0.50);
|
||
font-size: 12px;
|
||
|
||
.list-container {
|
||
display: flex;
|
||
height: 80px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.text-area {
|
||
margin-left: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
>text,
|
||
>u-text {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.pos-and-sqr {
|
||
display: flex;
|
||
|
||
text {
|
||
color: #359867;
|
||
line-height: 12px;
|
||
}
|
||
|
||
>view {
|
||
margin-right: 24px;
|
||
display: flex;
|
||
|
||
>view {
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pos-only {
|
||
text {
|
||
color: #A0A0A0;
|
||
}
|
||
}
|
||
|
||
.rent-and-date {
|
||
text {
|
||
font-weight: 500;
|
||
margin-right: 6px;
|
||
color: #CC3333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-common {
|
||
border-top: 1px solid #f7f7f7;
|
||
padding-top: 5px;
|
||
display: flex;
|
||
|
||
>view {
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
.cart-and-date {
|
||
margin-bottom: 6px;
|
||
justify-content: space-between;
|
||
font-weight: 500;
|
||
|
||
text {
|
||
color: #359867;
|
||
line-height: 12px;
|
||
}
|
||
|
||
>view {
|
||
flex: 1;
|
||
|
||
>view {
|
||
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 {
|
||
justify-content: space-between;
|
||
|
||
text {
|
||
color: #359867;
|
||
}
|
||
}
|
||
}
|
||
</style> |