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-12 11:12:57 +08:00
parent 8450f0add1
commit 28ac15fea7
3 changed files with 296 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/edit/choosingIdentity.vue
View File

@@ -7,18 +7,22 @@
<div class="please-choose">请选择：</div>
<div class="choice-box flexflex flex1">
<div v-for="(item, index) in identityList" :key="index">
<div v-if="index != identityList.length - 1" class="choice-item" @click="choiceItem(item.key)">
<div class="choice-name">{{ item.value }}</div>
<div class="choice-explain">{{ item.desc }}</div>
<div class="choice-arrows"></div>
</div>
<div v-else class="choice-long-item flexacenter" @click="choiceItem(item.key)">
<!-- return index === items.length - 1 && index % 2 !== 0; -->
<!-- <div v-if="index != identityList.length - 1" class="choice-item" @click="choiceItem(item.key)"> -->
<div v-if="index == identityList.length - 1 && index % 2 !== 0"
class="choice-long-item flexacenter" @click="choiceItem(item.key)">
<div class="choice-long-left">
<div class="choice-name">{{ item.value }}</div>
<div class="choice-explain">{{ item.desc }}</div>
</div>
<div class="choice-arrows"></div>
</div>
<div v-else class="choice-item" @click="choiceItem(item.key)">
<div class="choice-name">{{ item.value }}</div>
<div class="choice-explain">{{ item.desc }}</div>
<div class="choice-arrows"></div>
</div>
</div>
</div>
</div>
@@ -34,7 +38,7 @@
</div>
</div>
<div class="footer flexcenter">
<div class="footer-item flexcenter">重新选择</div>
<div class="footer-item flexcenter" @click="backChoice">重新选择</div>
<div class="footer-item affirm flexcenter">确认并继续</div>
</div>
</div>
@@ -51,7 +55,7 @@ let html = `中介账号只能发布“<span style="color: #000; font-weight:650
let identityList = ref([])
let popType = ref('agent') // choice agent: 确认是否是中介（有个人房源） affirmAgent: 确认是否是中介（有中介房源）
let popType = ref('choice') // choice agent: 确认是否是中介（有个人房源） affirmAgent: 确认是否是中介（有中介房源）
let agent = ref([{
content: `中介账号发布的房源信息，均展示在“<span style="color: #000; font-weight:650;">中介房源</span>”频道中，即不能发布“<span style="color: #000; font-weight:650;">个人房源</span>”、“<span style="color: #000; font-weight:650;">求房源</span>”；如您已上架个人房源或求房源信息，在你确认中介身份后，将会自动下架`,
@@ -77,9 +81,11 @@ let rulesList = ref([{
type: 1,
}])
let showList = ref([]) //展示的规则
onMounted(() => {
// init()
init()
})
async function init() {
@@ -89,6 +95,28 @@ async function init() {
console.log("data", data);
// identityList.value = data.data
identityList.value = [
{
"key": 3,
"value": "我是房东",
"desc": "出租自有物业"
},
{
"key": 1,
"value": "我是中介",
"desc": "持有房产代理牌照"
},
{
"key": 4,
"value": "有房招室友",
"desc": "我已租房，需要招室友"
},
{
"key": 5,
"value": "其他",
"desc": "二房东、物业租赁公司等"
}
]
// if (data['ispopup'] == 1) {
// }
@@ -96,6 +124,16 @@ async function init() {
}
// 返回选择 重新选择
let backChoice = () => {
popType.value = "choice"
}
// 选择身份
let choiceItem = (key) => {
console.log(key, "key");
}
// /tenement/pc/api/publish/checkidentity
// export default {
// name: 'GterFangChoosingIdentity',

237
src/components/edit/user-box.vue Normal file
View File

@@ -0,0 +1,237 @@
<template>
<div class="user-box shadow radius16 flexflex">
<img class="user-img" :src="user.avatar">
<div class="user-username">{{ user.nickname }}</div>
<div class="housing-info-box">
<div class="housing-info-top flexacenter">
<div class="housing-info-location flexacenter">
<img class="housing-info-location-icon" src="@/assets/img/edit/location-icon.png" />
香港
</div>
<img v-if="userIntermediary" class="housing-info-certifying"
src="@/assets/img/publicImage/certifying-agent.png">
<div v-else class="housing-info-identity flexcenter">{{ intermediaryObj[intermediary] }}</div>
</div>
<div class="housing-info-list" v-if="type != 'plus'">
<div class="housing-info-item flexacenter" v-if="id">
<div class="housing-info-head flexcenter">房源ID</div>
<div class="longString"></div>
<div class="housing-info-trail">{{ id }}</div>
</div>
<div class="housing-info-item flexacenter">
<div class="housing-info-head flexcenter">状态</div>
<div class="longString"></div>
<div class="housing-info-trail">{{ stateObj[status] }}</div>
</div>
<div class="housing-info-item flexacenter" v-if="status > 0">
<div class="housing-info-head flexcenter">发布</div>
<div class="longString"></div>
<div class="housing-info-trail">{{ time['timestamp'] }}</div>
</div>
<div class="housing-info-item flexacenter" v-if="status > 0">
<div class="housing-info-head flexcenter">更新</div>
<div class="longString"></div>
<div class="housing-info-trail">{{ time['updatetime'] }}</div>
</div>
<div class="housing-info-item flexacenter" v-if="status < 0">
<div class="housing-info-head flexcenter">下架</div>
<div class="longString"></div>
<div class="housing-info-trail">{{ time['offshelftime'] }}</div>
</div>
</div>
<div class="listing-verified flexacenter" v-if="verified == 1">
<img class="listing-verified-tick" src="@/assets/img/edit/tick.svg" />
房源已认证
</div>
<div class="housing-info-amount flexcenter" v-if="status != 1">
<div class="housing-hint flexacenter">您还可以发布 <div class="bold">{{ allowpublishednum }}</div>
条普通房源</div>
<div class="learn-more-btn flexcenter" @click="$emit('handleAboutPopState')">了解更多 <img
class="learn-more-icon" src="@/assets/img/edit/learn-more-icon.svg" /></div>
</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
user: Object,
time: Object,
verified: Number,
allowpublishednum: Number,
id: Number,
status: Number,
intermediary: Number,
userIntermediary: Number,
type:String
});
let stateObj = {
1: "已上架",
0: "未发布",
"-1": "已下架"
}
let intermediaryObj = {
1: "中介",
2: "非中介",
3: "房东",
4: "有房招室友",
5: "其他",
6: "求房源",
}
</script>
<style lang="less" scoped>
.user-box {
flex-direction: column;
justify-content: center;
align-items: center;
width: 320px;
margin-right: 20px;
background: #fff;
border: 1px solid rgba(235, 235, 235, 1);
padding: 40px 0 20px;
.user-img {
width: 64px;
height: 64px;
border-radius: 50%;
margin-bottom: 10px;
}
.user-username {
color: #555;
font-size: 14px;
margin-bottom: 30px;
}
.housing-info-box {
width: 280px;
background-color: rgba(246, 246, 246, 1);
border-radius: 8px;
.housing-info-top {
justify-content: space-between;
height: 83px;
padding: 0 16px;
.housing-info-location {
color: #333;
font-size: 24px;
line-height: 30px;
font-weight: 650;
.housing-info-location-icon {
width: 24px;
height: 24px;
margin-right: 6px;
}
}
.housing-info-certifying {
width: 85px;
height: 20px
}
.housing-info-identity {
padding: 0 10px;
height: 28px;
border-radius: 42px;
border: 1px solid rgba(215, 215, 215, 1);
color: #555;
font-size: 14px;
}
}
.housing-info-list {
border-top: 1px solid #ebebeb;
font-size: 14px;
padding: 30px 0;
.housing-info-item {
line-height: 24px;
&:not(:last-of-type) {
margin-bottom: 12px;
}
.longString {
width: 1px;
height: 15px;
background-color: #aaaaaa;
}
.housing-info-head {
width: 75px;
color: #7F7F7F;
}
.housing-info-trail {
color: #333;
padding-left: 16px;
}
}
}
.listing-verified {
width: 121px;
height: 28px;
border-radius: 42px;
border: 1px solid rgba(215, 215, 215, 1);
font-size: 14px;
color: #555555;
margin: 10px auto 50px;
justify-content: space-evenly;
.listing-verified-tick {
width: 16px;
height: 16px;
}
}
.housing-info-amount {
border-top: 1px solid #ebebeb;
flex-direction: column;
padding-top: 49px;
padding-bottom: 47px;
.housing-hint {
color: #555;
font-size: 14px;
margin-bottom: 30px;
.bold {
font-weight: 900;
color: #000;
margin: 0 5px;
}
}
.learn-more-btn {
width: 124px;
height: 40px;
border-radius: 62px;
background-color: rgba(51, 51, 51, 1);
font-size: 15px;
color: #fff;
font-weight: 400;
cursor: pointer;
.learn-more-icon {
width: 16px;
height: 16px;
margin-left: 8px;
}
}
}
}
}
</style>