590 lines
18 KiB
Vue
590 lines
18 KiB
Vue
<template>
|
||
<div class="list-item" ref="list" @click="goDetail(data.status)">
|
||
<div class="authentication-box dis-f al-item" v-if="data.verified == 1">
|
||
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
|
||
<img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
|
||
<img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="">
|
||
</div>
|
||
<div class="top-box">
|
||
<div class="title-text">
|
||
<div class="title-hint" v-if="data.verifiedstatus == 1 && !stateData.text">认证审核中</div>
|
||
<div class="title-hint" v-if="stateData.text">{{ stateData.text }}</div>
|
||
{{ data.subject || '暂无标题' }}
|
||
</div>
|
||
<div class=" dis-f al-item-start jus-bet s-w-100" style="margin-top: 20px;">
|
||
<div>
|
||
<div class="dis-f al-item">
|
||
<div class="tab-item first-tab flexacenter">{{ data.gptype }}</div>
|
||
<div class="tab-item mg-l-8 flexacenter" v-if="data.type">{{ listData.type[data.type] }}
|
||
</div>
|
||
<div class="tab-item mg-l-8 flexacenter" v-if="data.elevator && data.elevator !== -1">{{
|
||
listData.elevator[data.elevator] }}</div>
|
||
<div class="tab-item mg-l-8 flexacenter" v-if="data.sunshinearea && data.sunshinearea !== -1">{{
|
||
listData.sunshinearea[data.sunshinearea] }}</div>
|
||
<div class="tab-item mg-l-8 flexacenter" v-if="data.gender">
|
||
{{ listData.gender[data.gender] }}
|
||
</div>
|
||
</div>
|
||
<div class="address-text dis-f al-item" v-if="item['location']">
|
||
<template v-if="Array.isArray(item['location'])">
|
||
<template v-for="it in item['location']">
|
||
<div class="address-item flexacenter" v-if="it">
|
||
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
|
||
{{ location[it >>> 0] + ' > ' + (it >>> 0 == it ? '不限' : location[it]) }}
|
||
</div>
|
||
</template>
|
||
</template>
|
||
<div class="address-item flexacenter" v-else>
|
||
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
|
||
{{ location[item['location'] >>> 0] + ' > ' + location[item['location']] }}
|
||
</div>
|
||
</div>
|
||
<div class="price-text dis-f" style="" v-if="data.rent">
|
||
<span class="unit">HK$</span>
|
||
<span class="price" v-if="Array.isArray(data.rent)">{{ data.rent.join(' ~ ') }}</span>
|
||
<span class="price" v-else>{{ data.rent }}</span>
|
||
<span>/月</span>
|
||
<span class="time" v-show="data.rentalduration">[ 租期{{ data.rentalduration == 0 ? '不限' :
|
||
listData['rentalduration'][data.rentalduration] }} ]</span>
|
||
</div>
|
||
<div class="data-info flexacenter" v-if="ispublish">
|
||
<div class="info-item" v-if="data['id']">
|
||
房源ID：{{ data['id'] }}
|
||
</div>
|
||
<template v-if="data['timestamp']">
|
||
<div class="longstring" v-if="data['id']" style="margin: 0 8px;"></div>
|
||
<div class="info-item">
|
||
{{ formatDate(data['timestamp']) }}发布
|
||
</div>
|
||
</template>
|
||
<template v-if="data['status'] != 0">
|
||
<div class="longstring"></div>
|
||
<div class="info-item flexacenter">
|
||
<div class="itemm flexacenter">
|
||
<img class="item-icon" src="@/assets/img/publicImage/eye-icon.svg" alt="">
|
||
{{ data['count_view'] }}
|
||
</div>
|
||
<div class="itemm flexacenter" style="margin-left: 10px;">
|
||
<img class="item-icon" src="@/assets/img/publicImage/collect-icon.png" alt="">
|
||
{{ data['count_fav'] }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div class="img">
|
||
<div>
|
||
<img :src="data && data.ispic ? data && data.imageurl : data && data.isvideo ? data && data.imageurl : ''"
|
||
@load="loadFinish" class="img " alt="">
|
||
<div class="s-img dis-f jus-x al-item" v-if="data && data.isvideo">
|
||
<img src="../../assets/homeImage/videoIcon.svg" class="img" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath === '/personHousing'" alt=""> -->
|
||
<img src="../../assets/homeImage/corner.svg" v-if="data['intermediary'] == 1" class="tab-img" alt="">
|
||
<img src="../../assets/homeImage/intermediaryCorner.svg" v-else class="tab-img" alt="">
|
||
</div>
|
||
<div class="publish-footer flexacenter" v-if="ispublish">
|
||
<div class="publish-item flexcenter" v-if="stateData.btn >= 0 || stateData.btn == -2"
|
||
@click.stop="handleDelete">删除
|
||
</div>
|
||
<div class="publish-item flexcenter" v-if="stateData.btn >= 0" @click.stop="goEdit">{{ stateData.btn
|
||
== 1 ? "编辑上架" : "编辑" }}</div>
|
||
<div class="publish-item flexcenter" v-if="stateData.btn == 2" @click.stop="undercarriage">下架</div>
|
||
<div class="publish-item flexcenter go-up"
|
||
:class="{ 'go-up': data.isding == 0, 'already-go-up': data.isding == 1 }" v-if="stateData.btn == 2"
|
||
@click.stop="goUp">{{
|
||
data.isding == 0 ? '顶上去' : '今天已顶' }}
|
||
</div>
|
||
<!-- <div class="publish-item flexcenter already-go-up" v-if="stateData.btn == 2 && item.isding == 1"></div> -->
|
||
</div>
|
||
<div class="btm-box dis-f al-item" v-else>
|
||
<div class="flex1 flexacenter">
|
||
<img :src="data.avatar" class="user-img" alt="">
|
||
<span class="user-name">{{ data.author }}</span>
|
||
<div class="btn flexcenter" v-if="data.isintermediary !== 1">{{ data.intermediary_text ||
|
||
listData.intermediary[data.intermediary] }}</div>
|
||
<img src="../../assets/homeImage/intermediaryTabImg.png" v-else class="intermediary-tab-img" alt="">
|
||
</div>
|
||
<div class="cancel-collection flexcenter" @click.stop="cancelCollection(data.token)">
|
||
<img class="icon" src="@/assets/img/publicImage/black-circle-cross.svg">
|
||
取消收藏
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch, defineProps, reactive, defineEmits, onMounted, getCurrentInstance } from "vue";
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { redirectToExternalWebsite } from '@/utils/util.js'
|
||
import store from '../../store/index';
|
||
|
||
const { proxy } = getCurrentInstance()
|
||
|
||
const router = useRouter()
|
||
|
||
let props = defineProps({
|
||
item: Object,
|
||
index: Number,
|
||
ispublish: Boolean,
|
||
})
|
||
|
||
let data = {}
|
||
data = props.item
|
||
|
||
const emit = defineEmits(['cancelCollection', 'goUp', 'undercarriage'])
|
||
|
||
//监听路由
|
||
const route = useRoute()
|
||
let routePath = ref('')
|
||
routePath.value = route.path
|
||
//地区数据
|
||
let location = reactive({})
|
||
location = store.state.indexData && store.state.indexData.config && store.state.indexData.config.location
|
||
|
||
//数据包
|
||
let listData = reactive({})
|
||
listData = store.state.indexData && store.state.indexData.config
|
||
|
||
// rentalduration
|
||
const stateObj = { // btn: 0 删除 编辑 1 删除 编辑 上架 2 删除 编辑 下架 顶上去
|
||
"1": {
|
||
btn: 2,
|
||
},
|
||
"-7": {
|
||
text: "身份变化，已下架",
|
||
btn: -2,
|
||
},
|
||
"-5": {
|
||
text: "超出发布期限，已自动下架",
|
||
btn: 0,
|
||
},
|
||
"-3": {
|
||
text: "多人投诉，已下架",
|
||
btn: -1,
|
||
},
|
||
"-4": {
|
||
text: "该信息正在审核中",
|
||
btn: -1,
|
||
},
|
||
"2": {
|
||
text: "已下架",
|
||
btn: 1,
|
||
},
|
||
"0": {
|
||
text: "草稿",
|
||
btn: 0,
|
||
}
|
||
}
|
||
|
||
let stateData = ref(stateObj[data.status])
|
||
// 监听修改的值
|
||
watch(() => props.item.status, (newValue, oldValue) => {
|
||
stateData.value = stateObj[data.status]
|
||
})
|
||
|
||
const cancelCollection = token => emit('cancelCollection', { token, index: props['index'] })
|
||
|
||
// 点击跳转详情页
|
||
const goDetail = status => {
|
||
if (status == 1) redirectToExternalWebsite(`/detail?id=${data.uniqid}`)
|
||
else ElMessage("该房源信息已出租或已失效")
|
||
}
|
||
|
||
// 跳转编辑页面
|
||
const goEdit = () => router.push(`/edit?token=${data.token}`)
|
||
|
||
// 点击删除房源
|
||
const handleDelete = () => {
|
||
ElMessageBox.confirm(
|
||
'确定删除吗？',
|
||
'提示',
|
||
{
|
||
cancelButtonText: '取消',
|
||
confirmButtonText: '确定',
|
||
center: true,
|
||
autofocus: false,
|
||
customClass: "ElMessageBox",
|
||
width: 260,
|
||
customStyle: 'width: 260px'
|
||
},
|
||
).then(() => {
|
||
proxy.$post('/tenement/pc/api/user/delete', {
|
||
token: data['token']
|
||
}).then(res => {
|
||
if (res.code != 200) return
|
||
ElMessage.success(res.message)
|
||
emit('handleDelete', props['index'], data['status'])
|
||
})
|
||
}).catch(() => { })
|
||
}
|
||
|
||
// 点击下架
|
||
const undercarriage = () => {
|
||
proxy.$post('/tenement/pc/api/user/status', {
|
||
status: 2,
|
||
token: data['token'],
|
||
uniqid: data['uniqid'],
|
||
}).then(res => {
|
||
let data = res.data
|
||
emit('undercarriage', props['index'], data['status'])
|
||
})
|
||
}
|
||
|
||
// 点击顶上去
|
||
const goUp = () => {
|
||
if (data.isding == 1) ElMessage('今天已顶过啦，明天再来吧！')
|
||
if (data.isding != 0) return
|
||
proxy.$post("/tenement/pc/api/user/ding", { token: data['token'] }).then(res => {
|
||
ElMessage.success(res.message)
|
||
emit('goUp', props['index'])
|
||
})
|
||
}
|
||
|
||
|
||
// 输出 时间格式 2023年07月04日
|
||
const formatDate = timestamp => {
|
||
// 创建一个新的Date对象，将时间戳作为参数传入
|
||
var date = new Date(timestamp * 1000);
|
||
// 使用Date对象的get方法获取年、月、日
|
||
var year = date.getFullYear();
|
||
|
||
var month = date.getMonth() + 1;
|
||
var day = date.getDate();
|
||
|
||
// 将月份和日期转为两位数的格式，如果不足两位，前面补0
|
||
if (month < 10) month = '0' + month;
|
||
if (day < 10) day = '0' + day;
|
||
|
||
// 返回格式化后的日期字符串
|
||
return year + '年' + month + '月' + day + '日';
|
||
|
||
}
|
||
|
||
</script>
|
||
<style scoped lang="less">
|
||
img {
|
||
object-fit: contain;
|
||
}
|
||
|
||
.dis-f {
|
||
display: flex;
|
||
}
|
||
|
||
.jus-x {
|
||
justify-content: center;
|
||
}
|
||
|
||
.jus-bet {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.al-item-start {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.al-item {
|
||
align-items: center;
|
||
}
|
||
|
||
.pos-r {
|
||
position: relative;
|
||
}
|
||
|
||
.body-maxWidth {
|
||
width: 1200px;
|
||
min-width: 1200px;
|
||
}
|
||
|
||
.s-w-100 {
|
||
width: 100%;
|
||
}
|
||
|
||
.authentication-box {
|
||
width: 100%;
|
||
height: 30px;
|
||
|
||
.bg {
|
||
height: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.logo {
|
||
width: 18px;
|
||
height: 18px;
|
||
position: absolute;
|
||
left: 15px;
|
||
}
|
||
|
||
.text-img {
|
||
width: 81px;
|
||
height: 81px;
|
||
position: absolute;
|
||
left: 35px;
|
||
}
|
||
}
|
||
|
||
.list-item {
|
||
width: 590px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
border: none;
|
||
border-radius: 16px;
|
||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||
position: relative;
|
||
margin-bottom: 20px;
|
||
|
||
.mg-t-10 {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.img {
|
||
display: block;
|
||
width: 100px;
|
||
object-fit: cover;
|
||
border-radius: 10px;
|
||
position: relative;
|
||
}
|
||
|
||
.s-img {
|
||
width: 100px;
|
||
height: 100%;
|
||
border-radius: 10px;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
background: rgba(51, 51, 51, 0.733333333333333);
|
||
|
||
.img {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
}
|
||
|
||
.top-box {
|
||
padding: 22px 20px 20px;
|
||
|
||
.tab-img {
|
||
width: 32px;
|
||
height: 32px;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
// z-index: 66;
|
||
}
|
||
|
||
.title-text {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 18px;
|
||
color: #000000;
|
||
text-align: left;
|
||
word-wrap: break-word;
|
||
line-height: 28px;
|
||
|
||
.title-hint {
|
||
border: 1px solid rgba(249, 93, 93, 1);
|
||
display: inline;
|
||
height: 24px;
|
||
font-size: 14px;
|
||
color: #F95D5D;
|
||
border-radius: 5px;
|
||
padding: 0 8px;
|
||
|
||
}
|
||
}
|
||
|
||
.mg-l-8 {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.tab-item {
|
||
padding: 0 6px;
|
||
height: 24px;
|
||
background-color: rgba(242, 242, 242, 1);
|
||
border-radius: 6px;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #7F7F7F;
|
||
}
|
||
|
||
.address-text {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 15px;
|
||
color: #555555;
|
||
margin-top: 8px;
|
||
flex-wrap: wrap;
|
||
|
||
.img {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.address-item {
|
||
margin-right: 20px;
|
||
margin-top: 12px;
|
||
}
|
||
}
|
||
|
||
.price-text {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #555555;
|
||
margin-top: 15px;
|
||
align-items: end;
|
||
// line-height: 28px;
|
||
|
||
.time {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #7F7F7F;
|
||
margin-left: 15px;
|
||
}
|
||
|
||
.price {
|
||
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
||
font-weight: 900;
|
||
font-size: 20px;
|
||
color: #F95D5D;
|
||
line-height: 20px;
|
||
margin: 0 8px;
|
||
}
|
||
|
||
.unit {
|
||
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
||
font-weight: 900;
|
||
color: #000000;
|
||
font-size: 14px;
|
||
line-height: 14px;
|
||
}
|
||
}
|
||
|
||
.first-tab {
|
||
background: rgba(51, 51, 51, 1);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.btm-box {
|
||
padding: 0 20px;
|
||
height: 58px;
|
||
border-top: 1px dashed #d7d7d7;
|
||
|
||
.intermediary-tab-img {
|
||
width: 85px;
|
||
height: 20px;
|
||
margin-left: 15px;
|
||
}
|
||
|
||
.user-img {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.user-name {
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
color: #555555;
|
||
font-size: 14px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.btn {
|
||
margin-left: 10px;
|
||
padding: 0px 7.5px;
|
||
height: 24px;
|
||
background-color: rgba(242, 242, 242, 0);
|
||
border: 1px solid rgba(215, 215, 215, 1);
|
||
border-radius: 42px;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #555555;
|
||
text-align: center;
|
||
}
|
||
|
||
.cancel-collection {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
// padding: 0 23px;
|
||
height: 100%;
|
||
cursor: pointer;
|
||
|
||
.icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 3px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.data-info {
|
||
color: #555555;
|
||
font-size: 14px;
|
||
margin-top: 24px;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
|
||
.longstring {
|
||
width: 2px;
|
||
height: 13px;
|
||
background-color: #d7d7d7;
|
||
margin: 0 16px;
|
||
}
|
||
|
||
.info-item {
|
||
.itemm {
|
||
.item-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.publish-footer {
|
||
height: 85px;
|
||
border-top: 1px dotted #d7d7d7;
|
||
justify-content: flex-end;
|
||
padding: 0 20px;
|
||
user-select: none;
|
||
|
||
.publish-item {
|
||
width: 100px;
|
||
height: 40px;
|
||
border: 1px solid rgba(170, 170, 170, 1);
|
||
font-size: 15px;
|
||
color: #555555;
|
||
border-radius: 45px;
|
||
cursor: pointer;
|
||
margin-left: 10px;
|
||
|
||
&.go-up {
|
||
border: none;
|
||
color: #fff;
|
||
background-color: rgba(98, 177, 255, 1);
|
||
}
|
||
|
||
&.already-go-up {
|
||
border: none;
|
||
color: #AAAAAA;
|
||
background-color: rgba(242, 242, 242, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |