XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

公寓列表

Browse Source
This commit is contained in:
A1300399510
2023-07-18 19:01:35 +08:00
parent 1cc8d070b5
commit c0132f27fd
9 changed files with 648 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/public/apartment-item.vue
View File

@@ -30,9 +30,13 @@
</template>
<script setup>
import { ref } from 'vue';
const props = defineProps({
item: Object,
});
let imgse = ref('https://oss.gter.net/Zvt57TuJSUvkyhw-xG7Y2l-R-Josd3fqqsgFptxhXa6RWi26P-BuTQccE7DK7tkb8MVYZjQ0Mjk~')
</script>
<style lang="less" scoped>

2
src/components/public/empty-duck.vue
View File

@@ -2,12 +2,14 @@
<div class="empty-box flexflex">
<img class="empty-icon" src="@/assets/img/publicImage/empty-duck.png">
<text class="empty-text">{{ hintText || '暂无内容' }}</text>
<text class="empty-text" v-if="hintTextTwo">{{ hintTextTwo }}</text>
</div>
</template>
<script setup>
const props = defineProps({
hintText: String,
hintTextTwo: String,
})
</script>

376
src/components/public/public-list-item.vue Normal file
View File

@@ -0,0 +1,376 @@
<template>
<div class="list-item" ref="list">
<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">
{{ data && 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 && data.gptype }}</div>
<div class="tab-item mg-l-8 flexacenter" v-if="data.type">{{ listData.type[data && 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] + ' > ' + 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>
<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/intermediaryCorner.svg" v-if="routePath === '/intermediaryHousing'"
class="tab-img" alt="">
</div>
<div class="btm-box dis-f al-item">
<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>
<img class="" src="@/assets/img/publicImage/black-circle-cross.svg">
</div>
</div>
</template>
<script setup>
import { ref, defineProps, reactive, onMounted, getCurrentInstance } from "vue";
import { useRoute, useRouter } from 'vue-router';
import store from '../../store/index';
let props = defineProps({
item: {
type: Object
}
})
// console.log("item", props.item);
let data = {}
data = props.item
//监听路由
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,
}
}
</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;
}
.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;
}
}
}
</style>