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>

257
src/views/edit.vue
View File

@@ -1,69 +1,17 @@
<template>
<header-nav :isNoTabList="true"></header-nav>
<map-component v-if="mapComponentState" :info="info" @choosingLocation="choosingLocation" />
<choosing-identity v-if="false"></choosing-identity>
<choosing-identity v-if="true"></choosing-identity>
<div class="content-box flexflex">
<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">{{ 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">{{ 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">{{ 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="handleAboutPopState">了解更多 <img class="learn-more-icon"
src="@/assets/img/edit/learn-more-icon.svg" /></div>
</div>
</div>
</div>
<!-- 左边的信息盒子 -->
<user-box :user="user" :type="type" :time="{ timestamp, updatetime, offshelftime }" :status="status"
:allowpublishednum="allowpublishednum" :id="id" :intermediary="intermediary"
:userIntermediary="userIntermediary" @handleAboutPopState="handleAboutPopState"></user-box>
<div class="form-box shadow radius16 flex1">
<div class="form-header">发布{{ intermediary == 6 ? '求' : '出租' }}房源</div>
<div class="form-boxes">
<div class="form-item" v-for="(item) in fieldinfoBasic" :key="item.field">
<div class="form-item" v-for="item in fieldinfoBasic" :key="item.field">
<div class="form-title flexacenter">{{ item.title }}
<div class="asterisk" v-if="item.required === 1">*</div>
</div>
@@ -431,7 +379,6 @@
</div>
<div class="halving-line"></div>
<div class="form-item" v-for="(item, index) in fieldinfoIdentity" :key="index">
<template v-if="item.field != 'intermediary' && judgeGenderCohabitantsShow(item.field)">
@@ -613,8 +560,7 @@
</div>
</div>
<div class="target-area-btn flexcenter" :class="{ 'pitch': info.location && info.location.length > 0 }"
@click.stop="closeTargetArea">选好了
</div>
@click.stop="closeTargetArea">选好了</div>
</div>
</div>
</div>
@@ -703,6 +649,7 @@ import pageFooter from '@/components/footer/footer.vue'
import how from '@/components/edit/how-pop.vue'
import failPop from '@/components/edit/fail-pop.vue'
import headerNav from '@/components/public/head.vue'
import userBox from '@/components/edit/user-box.vue'
export default {
name: 'ZufangEdit',
@@ -712,15 +659,6 @@ export default {
user: {},
userIntermediary: false, // 用户是否是 认证中介，需要全局获取
allowpublishednum: 0,
intermediaryObj: {
1: "中介",
2: "非中介",
3: "房东",
4: "有房招室友",
5: "其他",
6: "求房源",
},
navList: ["寄托首页", "论坛", "Offer榜", "港校租房", "院校库", "兑换店", "搜索", "招生官", "中外合办院校"],
fieldinfo: {}, // 字段配置
fieldinfoBasic: [],
locationObj: {},
@@ -784,16 +722,11 @@ export default {
offshelftime: "",
offshelftime: "",
updatetime: "",
residentialAreaState: false, // 所属小区的弹窗的状态
isResidentialAreaUpdate: true, // 所属小区的数据是否需要更新
communityList: [], // 所属小区的列表
stateObj: {
1: "已上架",
0: "未发布",
"-1": "已下架"
},
qrcodeBase64: "", // 提交发布后的二维码
skipUrl: "",
@@ -801,8 +734,6 @@ export default {
loading: null, // 加载
value2: null,
}
},
computed: {
@@ -852,6 +783,7 @@ export default {
how,
failPop,
headerNav,
userBox,
},
methods: {
@@ -943,10 +875,8 @@ export default {
arr.forEach(element => {
if (info[element] && info[element].length == 1 && info[element][0] == 0) {
info[element] = []
}
if (info[element] && info[element].length == 1 && info[element][0] == 0) info[element] = []
if (info[element] && info[element].length != 0) {
info[element].forEach((ele, i) => {
info[element][i] = Number(ele)
@@ -962,7 +892,6 @@ export default {
this.fieldinfo = fieldinfo
this.typeData = typeData
this.locationData = locationData
this.fieldinfoBasic = fieldinfo.basic
this.fieldinfoAddress = fieldinfo.address
@@ -1004,7 +933,6 @@ export default {
handleType(key, value) {
if (key >>> 0 == key) {
this.typeValue = key
// this.info['type'] = null
this.typePopState = true
if (this.info['type'] >>> 0 != key) this.info['type'] = null
@@ -1196,7 +1124,6 @@ export default {
if (info['images'] && info['images'].length > 1 && !info['aid']) {
this.$message.error("请选择封面");
// data.field
let data = {
field: "images"
}
@@ -1256,7 +1183,6 @@ export default {
} else {
if (status == 0) return
let data = res.data
let uniqid = data['uniqid']
this.qrcodeBase64 = data['qrcode']
this.skipUrl = data['url']
@@ -1385,8 +1311,6 @@ export default {
// 处理所属小区判断，并获取数据
handleResidentialArea() {
// communityList
if (this.isResidentialAreaUpdate) {
let info = this.info
@@ -1395,7 +1319,6 @@ export default {
location
}).then(res => {
if (res.code != 200) return
console.log(res, "res");
let data = res.data
data.push({
name: "以上都不是"
@@ -1426,10 +1349,6 @@ export default {
},
},
@@ -1443,162 +1362,10 @@ export default {
align-items: flex-start;
position: relative;
.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;
}
}
}
}
}
.form-box {
background-color: #fff;
border: 1px solid rgba(235, 235, 235, 1);
.form-header {
color: #000;
font-size: 20px;