gxwebsoft
d66a8dfe8c
- 保存按钮布局调整优化，提升用户体验 - 房源详情地区显示只展示市级，简化展示信息 - 地区选择器调整，只显示市，确保区域数据统一 - 删除房源操作添加确认弹窗，避免误删 - 省市区数据加载逻辑简化，使用固定城区列表替代异步接口请求 - 替换首页及闪屏logo图片，更新为新资源路径 - 隐藏房源详情页电话咨询按钮，暂不支持电话功能 - 代码格式和注释优化，提升代码可读性
994 lines
27 KiB
Vue
994 lines
27 KiB
Vue
<template>
|
|
<view class="container">
|
|
<u--form :model="form" ref="uForm" :rules="rules" labelPosition="top" :labelStyle="{paddingLeft: '10rpx'}"
|
|
label-width="200rpx">
|
|
<!-- 表单组件 -->
|
|
|
|
<view class="his-head">
|
|
<text class="title">房源信息</text>
|
|
</view>
|
|
<view class="form-wrapper">
|
|
<u-cell-group :border="false">
|
|
<u-form-item prop="houseTitle">
|
|
<u-cell title="标题" :isLink="false" customStyle="">
|
|
<u-input slot="value" class="input" v-model="form.houseTitle" inputAlign="right"
|
|
maxlength="30" :border="false" placeholder="请输入标题" />
|
|
</u-cell>
|
|
</u-form-item>
|
|
<u-form-item prop="area">
|
|
<u-cell title="所在地区" @click="onArea" :isLink="true">
|
|
<u-input :disabled="true" disabledColor="#FFFFFF" slot="value" class="input"
|
|
v-model="form.area" inputAlign="right" maxlength="30" :border="false"
|
|
placeholder="请选择所在地区" />
|
|
</u-cell>
|
|
</u-form-item>
|
|
<!-- <u-form-item prop="address">
|
|
<u-cell title="详细地址" :isLink="true">
|
|
<u-input slot="value" class="input" v-model="form.address" inputAlign="right" maxlength="30"
|
|
:border="false" placeholder="请输入详细地址" :disabled="true" disabledColor="#FFFFFF"/>
|
|
</u-cell>
|
|
</u-form-item> -->
|
|
<u-form-item prop="address">
|
|
<view class="his-head">
|
|
<text class="title">详细地址</text>
|
|
</view>
|
|
<view class="form-wrapper" @click="openMap">
|
|
<view class="textarea">
|
|
<u--textarea v-model="form.address" placeholder="请输入详细地址" maxlength="200"
|
|
:disabled="true" disabledColor="#FFFFFF"></u--textarea>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item prop="houseType">
|
|
<u-cell title="户型" :isLink="true" @click="showHouseType = true">
|
|
<u-input slot="value" class="input" v-model="form.houseType" inputAlign="right"
|
|
maxlength="30" :border="false" placeholder="请选择房子户型" :disabled="true"
|
|
disabledColor="#FFFFFF" />
|
|
</u-cell>
|
|
</u-form-item>
|
|
<u-form-item prop="extent">
|
|
<u-cell title="面积(m²)" :isLink="true">
|
|
<u-input slot="value" class="input" v-model="form.extent" inputAlign="right" maxlength="30"
|
|
:border="false" placeholder="该房屋面积" />
|
|
</u-cell>
|
|
</u-form-item>
|
|
<u-form-item prop="leaseMethod">
|
|
<u-cell title="押付方式" :isLink="true">
|
|
<u-input slot="value" class="input" v-model="form.leaseMethod" inputAlign="right"
|
|
maxlength="30" :border="false" placeholder="请选择押付方式"
|
|
disabledColor="#FFFFFF" />
|
|
</u-cell>
|
|
</u-form-item>
|
|
<u-form-item prop="rent">
|
|
<u-cell title="租金(元/m²)" :isLink="false">
|
|
<u-input type="digit" slot="value" class="input" v-model="form.rent" inputAlign="right"
|
|
maxlength="30" :border="false" placeholder="请输入租金" />
|
|
</u-cell>
|
|
</u-form-item>
|
|
<u-form-item prop="monthlyRent">
|
|
<u-cell title="月租金(每月)" :isLink="false">
|
|
<u-input type="digit" slot="value" class="input" :value="monthlyRent" inputAlign="right"
|
|
disabled-color="#FFFFFF" maxlength="30" :border="false" placeholder="请输入月租金" disabled />
|
|
</u-cell>
|
|
</u-form-item>
|
|
<u-form-item prop="propertyFees">
|
|
<u-cell title="物业费(元/m²)" :isLink="false">
|
|
<u-input type="digit" slot="value" class="input" v-model="form.propertyFees"
|
|
inputAlign="right" maxlength="30" :border="false" placeholder="请输入物业费" />
|
|
</u-cell>
|
|
</u-form-item>
|
|
|
|
<!-- <u-form-item prop="tenancy">
|
|
<u-cell title="租期" :isLink="false">
|
|
<u-input slot="value" class="input" v-model="form.tenancy" inputAlign="right" maxlength="30"
|
|
:border="false" placeholder="请输入租期" />
|
|
</u-cell>
|
|
</u-form-item> -->
|
|
<u-form-item prop="commission">
|
|
<u-cell title="佣金" :isLink="false">
|
|
<u-input type="digit" slot="value" class="input" v-model="form.commission"
|
|
inputAlign="right" maxlength="30" :border="false" placeholder="请输入佣金" />
|
|
</u-cell>
|
|
</u-form-item>
|
|
<!-- <u-form-item prop="premium">
|
|
<u-cell title="可溢价" :isLink="true" @click="showPremium = true">
|
|
<u-input slot="value" class="input" v-model="form.premium" inputAlign="right" maxlength="30"
|
|
:border="false" placeholder="请选择楼是否可溢价" />
|
|
</u-cell>
|
|
</u-form-item> -->
|
|
<u-form-item prop="floor">
|
|
<u-cell title="楼层" :isLink="true" @click="showFloor = true">
|
|
<u-input slot="value" class="input" v-model="form.floor" inputAlign="right" maxlength="30"
|
|
:border="false" placeholder="请选择楼层" :disabled="true" disabledColor="#FFFFFF" />
|
|
</u-cell>
|
|
</u-form-item>
|
|
<u-form-item prop="roomNumber">
|
|
<u-cell title="房号" :isLink="false">
|
|
<u-input slot="value" class="input" v-model="form.roomNumber" inputAlign="right"
|
|
maxlength="30" :border="false" placeholder="请输入房号" />
|
|
</u-cell>
|
|
</u-form-item>
|
|
<u-form-item prop="phone">
|
|
<u-cell title="业主电话" :isLink="false">
|
|
<u-input slot="value" class="input" v-model="form.phone" inputAlign="right" maxlength="30"
|
|
:border="false" placeholder="请输入业主电话" />
|
|
</u-cell>
|
|
</u-form-item>
|
|
<u-form-item prop="password">
|
|
<u-cell title="如何看房" :isLink="false">
|
|
<u-input slot="value" class="input" v-model="form.password" inputAlign="right"
|
|
maxlength="30" :border="false" placeholder="请输入房屋密码" />
|
|
</u-cell>
|
|
</u-form-item>
|
|
<u-form-item prop="toward">
|
|
<u-cell title="朝向" :isLink="true" @click="showToward = true">
|
|
<u-input slot="value" class="input" v-model="form.toward" inputAlign="right" maxlength="30"
|
|
:border="false" placeholder="请选择房源朝向" :disabled="true" disabledColor="#FFFFFF" />
|
|
</u-cell>
|
|
</u-form-item>
|
|
<u-form-item prop="salePrice">
|
|
<u-cell title="卖价(元/平)" :isLink="false">
|
|
<u-input type="digit" slot="value" class="input" v-model="form.salePrice"
|
|
inputAlign="right" maxlength="30" :border="false" placeholder="8000元/平" @input="onInputSalePrice" />
|
|
</u-cell>
|
|
</u-form-item>
|
|
<u-form-item prop="salePrice">
|
|
<u-cell title="总价(万)" :isLink="false">
|
|
<u-input type="digit" slot="value" class="input" v-model="form.totalPrice"
|
|
inputAlign="right" maxlength="30" :border="false" placeholder="120万" />
|
|
</u-cell>
|
|
</u-form-item>
|
|
</u-cell-group>
|
|
</view>
|
|
|
|
<u-form-item prop="houseLabel">
|
|
<view class="his-head">
|
|
<text class="title">房源标签</text>
|
|
</view>
|
|
<view class="form-wrapper">
|
|
<view class="house-label" v-if="dict">
|
|
<view class="u-page__tag-item" v-for="(item, index) in dict.houseLabel[0]" :key="index">
|
|
<u-tag :text="`${item}`" type="info" :plain="inArr(item)" :name="index"
|
|
:bgColor="inArr(item) ? '' : '#fd8008'" :borderColor="inArr(item) ? '' : '#fd8008'"
|
|
@click="onHouseLabel(item)">
|
|
</u-tag>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
|
|
<u-form-item prop="supporting">
|
|
<view class="his-head">
|
|
<text class="title">办公室配套</text>
|
|
</view>
|
|
<view class="form-wrapper">
|
|
<view class="textarea">
|
|
<u--textarea v-model="form.supporting" placeholder="请输入办公室配套"
|
|
:customStyle="{backgroundColor: '#f3f3f3'}" maxlength="200"></u--textarea>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
|
|
<u-form-item prop="images">
|
|
<view class="his-head">
|
|
<text class="title">房源照片</text>
|
|
</view>
|
|
<view class="form-wrapper">
|
|
<view class="images">
|
|
<u-upload :fileList="fileList1" :maxSize="3145728" :width="72" :height="72"
|
|
@afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9"></u-upload>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
|
|
<u-form-item prop="images">
|
|
<view class="his-head">
|
|
<text class="title">房源视频</text>
|
|
</view>
|
|
<view class="form-wrapper">
|
|
<view class="video-box" style="position: relative;" v-if="form.videoUrl">
|
|
<view class="colse" style="position: absolute; top: 0; right: 30px; width: 26px; height: 26px;color: #000000; z-index: 88; font-size: 24px; background-color: #cccccc; display: flex;justify-content: center; align-items: center;" @click="closeVideo">
|
|
X
|
|
</view>
|
|
<video loop class="swiper-video" muted :autoplay="false" :src="form.videoUrl"></video>
|
|
</view>
|
|
|
|
<view v-else class="images" style="display: flex; flex-direction: column; justify-content: center; ">
|
|
<u-upload :fileList="fileList2" :maxSize="31457280" :width="72" :height="72" accept="video"
|
|
@afterRead="afterRead" @delete="deleteVideo" name="2" multiple :maxCount="1"></u-upload>
|
|
<text style="padding-left: 8px;">上传视频</text>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
|
|
<u-form-item prop="introduction">
|
|
<view class="his-head">
|
|
<text class="title">房源介绍</text>
|
|
</view>
|
|
<view class="form-wrapper">
|
|
<view class="textarea">
|
|
<u--textarea v-model="form.content" placeholder="请输入房源介绍"
|
|
:customStyle="{backgroundColor: '#f3f3f3'}" maxlength="200"></u--textarea>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
|
|
<u-form-item prop="introduction">
|
|
<view class="his-head">
|
|
<text class="title">管理员备注</text>
|
|
</view>
|
|
<view class="form-wrapper">
|
|
<view class="textarea">
|
|
<u--textarea v-model="form.comments" placeholder="请输备注"
|
|
:customStyle="{backgroundColor: '#f3f3f3'}" maxlength="200"></u--textarea>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
|
|
|
|
<block v-if="dict">
|
|
<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="请选择男或女"
|
|
@close="showSex = false" @select="sexSelect">
|
|
</u-action-sheet>
|
|
<u-datetime-picker ref="datetimePicker" :show="showBirthday" v-model="birthday" mode="date"
|
|
@close="closeBirthday" @confirm="confirmBirthday" :minDate="0" :maxDate="1112102400000"
|
|
@cancel="closeBirthday" :closeOnClickOverlay="true">
|
|
</u-datetime-picker>
|
|
|
|
<u-picker :show="showHouseType" :columns="dict.houseType" @confirm="confirmHouseType"
|
|
@cancel="closeHouseType" :closeOnClickOverlay="true" @close="closeHouseType">
|
|
</u-picker>
|
|
<u-picker :show="showLeaseMethod" :columns="dict.leaseMethod" @confirm="confirmLeaseMethod"
|
|
@cancel="closeLeaseMethod" :closeOnClickOverlay="true" @close="closeLeaseMethod">
|
|
</u-picker>
|
|
<u-picker :show="showFloor" :columns="dict.floor" @confirm="confirmFloor" @cancel="closeFloor"
|
|
:closeOnClickOverlay="true" @close="closeFloor">
|
|
</u-picker>
|
|
<u-picker :show="showToward" :columns="dict.toward" @confirm="confirmToward" @cancel="closeToward"
|
|
:closeOnClickOverlay="true" @close="closeToward">
|
|
</u-picker>
|
|
<u-picker :show="showPremium" :columns="[['是','否']]" @confirm="confirmPremium"
|
|
@cancel="showPremium = false" :closeOnClickOverlay="true" @close="showPremium = false">
|
|
</u-picker>
|
|
|
|
|
|
|
|
<!-- 地址选择器 -->
|
|
<liu-customize-sel ref="area" :level="3" @change="chooseSuccess"></liu-customize-sel>
|
|
</block>
|
|
</u--form>
|
|
|
|
<u-gap height="80"></u-gap>
|
|
<!-- 保存按钮 -->
|
|
<view class="footer">
|
|
<u-button text="保存" color="linear-gradient(to bottom, #27b0fd, #3f72f4)" :disabled="disabled" shape="circle" @click="handleSubmit()"></u-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import store from '@/store'
|
|
import {
|
|
fileUrl
|
|
} from '@/config.js'
|
|
import {
|
|
dateFormat
|
|
} from '@/utils/util.js'
|
|
import * as UserApi from '@/api/user'
|
|
import {
|
|
updateHouseInfo,
|
|
getHouseInfo,
|
|
addHouseInfo
|
|
} from '@/api/house-info.js'
|
|
import * as UploadApi from '@/api/upload'
|
|
import * as DictApi from '@/api/dict.js'
|
|
|
|
// tab栏数据
|
|
const tabs = [{
|
|
name: `基本信息`,
|
|
value: 10
|
|
}, {
|
|
name: `择偶条件`,
|
|
value: 20
|
|
}]
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectId: 0,
|
|
tabs,
|
|
tabIndex: 10,
|
|
dict: null,
|
|
// 按钮禁用
|
|
disabled: false,
|
|
// 头像路径 (用于显示)
|
|
avatarUrl: '',
|
|
// 临时图片 (用于上传)
|
|
tempFile: null,
|
|
// 表单数据
|
|
form: {
|
|
houseTitle: '',
|
|
province: '',
|
|
city: '',
|
|
region: '',
|
|
area: '',
|
|
status: 10,
|
|
address: ''
|
|
},
|
|
fileList1: [],
|
|
fileList2: [],
|
|
loading: false,
|
|
// regionsData: [
|
|
// ['广西壮族自治区','广东'],
|
|
// ['南宁市', '北海市', '贵港市']
|
|
// ],
|
|
showHouseType: false,
|
|
showLeaseMethod: false,
|
|
showFloor: false,
|
|
showToward: false,
|
|
showPremium: false,
|
|
houseLabel: [],
|
|
|
|
showRegion: false,
|
|
|
|
actions: [{
|
|
name: '男',
|
|
},
|
|
{
|
|
name: '女',
|
|
},
|
|
{
|
|
name: '保密',
|
|
},
|
|
],
|
|
minDate: '',
|
|
columnsHeight: [
|
|
['160cm', '170cm', '180cm']
|
|
],
|
|
birthday: Number(new Date()),
|
|
// 验证规则
|
|
rules: {
|
|
'houseTitle': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请填写标题',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
monthlyRent() {
|
|
const {
|
|
extent,
|
|
rent
|
|
} = this.form
|
|
let monthlyRent = 0
|
|
if (extent && rent) {
|
|
monthlyRent = (extent * rent).toFixed(2)
|
|
}
|
|
return monthlyRent;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
if (options.id > 0) {
|
|
uni.setNavigationBarTitle({
|
|
title: '编辑房源'
|
|
})
|
|
this.selectId = options.id
|
|
this.getHouse(options.id)
|
|
}
|
|
this.getDict()
|
|
},
|
|
|
|
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
|
onReady() {
|
|
// this.$refs.uForm.setRules(this.rules)
|
|
// 微信小程序需要用此写法
|
|
// this.$refs.datetimePicker.setFormatter(this.formatter)
|
|
},
|
|
onUnload() {
|
|
const eventChannel = this.getOpenerEventChannel();
|
|
eventChannel.emit('reload', {
|
|
status: true
|
|
});
|
|
},
|
|
methods: {
|
|
getDict() {
|
|
DictApi.listDictionary().then(res => {
|
|
this.dict = res.data;
|
|
})
|
|
|
|
},
|
|
getHouse(id) {
|
|
const app = this
|
|
console.log('id: ', id);
|
|
getHouseInfo(id).then(res => {
|
|
console.log('res: ', res);
|
|
app.form = res.data
|
|
app.houseLabel = JSON.parse(app.form.houseLabel) || []
|
|
app.fileList1 = JSON.parse(app.form.files) || []
|
|
// 回显时只显示市
|
|
if (app.form.city) {
|
|
app.form.area = app.form.city
|
|
}
|
|
})
|
|
},
|
|
onChangeTab(e) {
|
|
const app = this
|
|
app.tabIndex = e.value
|
|
},
|
|
sexSelect(e) {
|
|
const app = this
|
|
console.log("e.name: ", e.name);
|
|
app.form.sexName = e.name
|
|
if (e.name == '男') {
|
|
app.form.userInfo.sex = 1
|
|
}
|
|
if (e.name == '女') {
|
|
app.form.userInfo.sex = 2
|
|
}
|
|
if (e.name == '保密') {
|
|
app.form.userInfo.sex = 0
|
|
}
|
|
console.log("app.form.userInfo.sex: ", app.form.userInfo.sex);
|
|
this.$refs.uForm.validateField('sexName')
|
|
},
|
|
// 选择微信地址
|
|
// #ifdef MP-WEIXIN
|
|
chooseAddress() {
|
|
const {
|
|
form,
|
|
$refs
|
|
} = this
|
|
uni.chooseAddress({
|
|
success(res) {
|
|
const names = $refs.sRegion.getOptionItemByNames(res)
|
|
form.name = res.userName
|
|
form.phone = res.telNumber
|
|
form.detail = res.detailInfo
|
|
form.region = names.length > 0 ? names : []
|
|
}
|
|
})
|
|
},
|
|
// #endif
|
|
|
|
// 点击头像按钮事件
|
|
onClickAvatar() {
|
|
// #ifdef MP-WEIXIN
|
|
return
|
|
// #endif
|
|
this.chooseImage()
|
|
},
|
|
|
|
// 选择头像事件 - 仅限微信小程序
|
|
// #ifdef MP-WEIXIN
|
|
onChooseAvatar({
|
|
detail
|
|
}) {
|
|
const app = this
|
|
app.form.avatar = detail.avatarUrl
|
|
app.tempFile = detail.avatarUrl
|
|
// 上传头像图片
|
|
app.uploadFile()
|
|
},
|
|
// #endif
|
|
|
|
// 选择图片
|
|
chooseImage() {
|
|
const app = this
|
|
console.log("选择图片: ");
|
|
// 选择图片
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
|
success(chooseImageRes) {
|
|
const tempFilePaths = chooseImageRes.tempFilePaths;
|
|
UploadApi.uploadFile({
|
|
filePath: tempFilePaths[0],
|
|
fileType: 'image',
|
|
name: 'file'
|
|
}).then(res => {
|
|
console.log("res: ", res);
|
|
app.form.avatar = fileUrl + res.data.path
|
|
console.log("form: ", app.form);
|
|
|
|
})
|
|
}
|
|
});
|
|
},
|
|
|
|
// 上传图片
|
|
uploadFile() {
|
|
const app = this
|
|
UploadApi.uploadFile({
|
|
filePath: app.tempFile,
|
|
fileType: 'image',
|
|
name: 'file'
|
|
}).then(res => {
|
|
app.form.avatar = res.data.url
|
|
HouseInfoApi.updateUserProfile(app.form)
|
|
})
|
|
},
|
|
openMap() {
|
|
const app = this
|
|
uni.chooseLocation({
|
|
success: (res) => {
|
|
app.form.address = res.address
|
|
app.form.latitude = res.latitude
|
|
app.form.longitude = res.longitude
|
|
console.log(res);
|
|
}
|
|
})
|
|
},
|
|
|
|
// 确认修改
|
|
async handleSubmit() {
|
|
const app = this
|
|
if (app.disabled === true) return
|
|
console.log("app.tempFile: ", app.tempFile);
|
|
this.$refs.uForm.validate().then(() => {
|
|
app.disabled = true
|
|
app.form.houseLabel = JSON.stringify(app.houseLabel)
|
|
app.form.files = JSON.stringify(app.fileList1)
|
|
app.form.videoUrl = app.fileList2[0] ? app.fileList2[0].url : null
|
|
app.form.monthlyRent = app.monthlyRent
|
|
const saveOrUpdate = app.selectId > 0 ? updateHouseInfo : addHouseInfo;
|
|
// 调试：打印提交的数据
|
|
console.log('提交表单数据:', JSON.stringify(app.form, null, 2));
|
|
console.log('province:', app.form.province, 'city:', app.form.city, 'area:', app.form.area);
|
|
saveOrUpdate(app.form).then(result => {
|
|
app.$toast('保存成功')
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 1000)
|
|
}).catch(err => {
|
|
uni.$u.toast(err)
|
|
})
|
|
}).catch(errors => {
|
|
console.log('errors: ', errors);
|
|
uni.$u.toast('校验失败')
|
|
})
|
|
|
|
|
|
|
|
// 判断是否重复提交
|
|
// if (app.disabled === true) return
|
|
// app.$refs.uForm.validate(async valid => {
|
|
// if (valid) {
|
|
// console.log("valid: ", valid);
|
|
// // 按钮禁用
|
|
// app.disabled = true
|
|
// // 先上传头像图片
|
|
// if (app.tempFile) {
|
|
// await app.uploadFile()
|
|
// }
|
|
// // 提交保存个人信息
|
|
// UserApi.updateUser(app.form)
|
|
// .then(result => {
|
|
// app.$toast(result.message)
|
|
// setTimeout(() => {
|
|
// app.disabled = false
|
|
// uni.navigateBack()
|
|
// }, 1500)
|
|
// })
|
|
// .catch(err => app.disabled = false)
|
|
// }
|
|
// })
|
|
},
|
|
// 确认修改
|
|
// async handleSubmit() {
|
|
// const app = this
|
|
// if (app.disabled === true) return
|
|
|
|
// return new Promise((resolve, reject) => {
|
|
// app.$refs.uForm.validate().then(() => {
|
|
// app.form.houseLabel = JSON.stringify(app.houseLabel)
|
|
// app.form.images = JSON.stringify(app.fileList1)
|
|
// HouseInfoApi.addHouseInfo(app.form).then(result => {
|
|
// console.log("result: ",result);
|
|
// app.$toast(result.message)
|
|
// }).catch(err => {
|
|
// uni.$u.toast(err)
|
|
// })
|
|
// }).catch(errors => {
|
|
// // uni.$u.toast('校验失败')
|
|
// })
|
|
// })
|
|
// },
|
|
onHouseLabel(text) {
|
|
const app = this
|
|
if (app.houseLabel.indexOf(text) > -1) {
|
|
console.log("1: ");
|
|
app.houseLabel.splice(app.houseLabel.indexOf(text), 1)
|
|
} else {
|
|
console.log("2: ");
|
|
app.houseLabel.push(text)
|
|
}
|
|
},
|
|
onSupportingLabel(item) {
|
|
item.checked = !item.checked
|
|
},
|
|
inArr(text) {
|
|
const {
|
|
houseLabel
|
|
} = this
|
|
if (houseLabel.indexOf(text) > -1) {
|
|
return false
|
|
}
|
|
return true
|
|
},
|
|
|
|
// 绑定昵称输入框 (用于微信小程序端快速填写昵称能力)
|
|
onInputNickName(val) {
|
|
console.log("val: ", val);
|
|
if (val) {
|
|
this.form.nickname = val
|
|
}
|
|
},
|
|
onInputSalePrice(val){
|
|
this.form.totalPrice = (this.form.extent * val * 0.0001).toFixed(0)
|
|
},
|
|
formatter(type, value) {
|
|
if (type === 'year') {
|
|
return `${value}年`
|
|
}
|
|
if (type === 'month') {
|
|
return `${value}月`
|
|
}
|
|
if (type === 'day') {
|
|
return `${value}日`
|
|
}
|
|
console.log("value: ", value);
|
|
return value
|
|
},
|
|
onArea() {
|
|
this.$refs.area.open()
|
|
},
|
|
//地址选择成功 - 存储省市区，但显示只显示市
|
|
chooseSuccess(e) {
|
|
console.log('chooseSuccess 收到数据:', JSON.stringify(e));
|
|
const data = e.value
|
|
if (!data || data.length < 2) {
|
|
console.error('地区数据不完整:', data);
|
|
return;
|
|
}
|
|
this.form.province = data[0].label
|
|
this.form.city = data[1].label
|
|
// 根据选择层级保存数据
|
|
if (data.length >= 3 && data[2]) {
|
|
this.form.region = data[2].label
|
|
// 显示只显示市
|
|
this.form.area = data[1].label
|
|
} else {
|
|
this.form.region = ''
|
|
// 显示只显示市
|
|
this.form.area = data[1].label
|
|
}
|
|
console.log('地区选择完成 - province:', this.form.province, 'city:', this.form.city, 'region:', this.form.region, 'area:', this.form.area);
|
|
},
|
|
changeHandler(e) {
|
|
console.log("e: ", e);
|
|
},
|
|
confirmHouseType(e) {
|
|
this.form.houseType = e.value[0]
|
|
this.showHouseType = false
|
|
},
|
|
closeHouseType() {
|
|
this.showHouseType = false
|
|
},
|
|
confirmLeaseMethod(e) {
|
|
this.form.leaseMethod = e.value[0]
|
|
this.showLeaseMethod = false
|
|
},
|
|
closeLeaseMethod() {
|
|
this.showLeaseMethod = false
|
|
},
|
|
confirmFloor(e) {
|
|
this.form.floor = e.value[0]
|
|
this.showFloor = false
|
|
},
|
|
closeFloor() {
|
|
this.showFloor = false
|
|
},
|
|
confirmToward(e) {
|
|
this.form.toward = e.value[0]
|
|
this.showToward = false
|
|
},
|
|
confirmPremium(e) {
|
|
this.form.premium = e.value[0]
|
|
this.showPremium = false
|
|
},
|
|
closeToward() {
|
|
this.showToward = false
|
|
},
|
|
closeVideo() {
|
|
this.form.videoUrl = ''
|
|
updateHouseInfo(this.form).then(res => {
|
|
this.$toast('删除成功')
|
|
})
|
|
},
|
|
confirmRegion(e) {
|
|
this.form.region = e.value[0] + ' ' + e.value[1]
|
|
this.showRegion = false
|
|
},
|
|
pickerRegion(e) {
|
|
console.log("e: ", e);
|
|
},
|
|
chooseBgImage() {
|
|
const app = this;
|
|
uni.showActionSheet({
|
|
itemList: ['更换背景图'],
|
|
success() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
|
success(chooseImageRes) {
|
|
const tempFilePaths = chooseImageRes.tempFilePaths;
|
|
app.uploadFilePromise(tempFilePaths[0]).then(result => {
|
|
app.form.bgImage = result.url
|
|
console.log(app.form, result.url);
|
|
})
|
|
}
|
|
});
|
|
}
|
|
})
|
|
|
|
},
|
|
// 删除图片
|
|
deletePic(event) {
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
|
},
|
|
// 新增图片
|
|
async afterRead(event) {
|
|
console.log("event: ", event);
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file)
|
|
let fileListLen = this[`fileList${event.name}`].length
|
|
lists.map((item) => {
|
|
this[`fileList${event.name}`].push({
|
|
...item,
|
|
status: 'uploading',
|
|
message: '上传中'
|
|
})
|
|
})
|
|
for (let i = 0; i < lists.length; i++) {
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
|
let item = this[`fileList${event.name}`][fileListLen]
|
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|
status: 'success',
|
|
message: '',
|
|
url: event.name == 2 ? result.path : result.url,
|
|
thumb: result.thumbUrl
|
|
}))
|
|
fileListLen++
|
|
}
|
|
},
|
|
uploadFilePromise(url) {
|
|
return new Promise((resolve, reject) => {
|
|
UploadApi.uploadFile({
|
|
filePath: url,
|
|
fileType: 'image',
|
|
name: 'file',
|
|
header: {
|
|
Authorization: uni.getStorageSync('AccessToken')
|
|
},
|
|
}).then(result => {
|
|
setTimeout(() => {
|
|
resolve(result.data)
|
|
}, 1000)
|
|
}).catch(err => {
|
|
console.log("err: ", err);
|
|
})
|
|
// UploadApi.uploadFile()
|
|
// let a = uni.uploadFile({
|
|
// url: fileUrl + '/file/image', // 仅为示例，非真实的接口地址
|
|
// filePath: url,
|
|
// name: 'file',
|
|
// header: {
|
|
// Authorization: uni.getStorageSync('AccessToken')
|
|
// },
|
|
// formData: {
|
|
// user: 'test'
|
|
// },
|
|
// success: (res) => {
|
|
// const result = JSON.parse(res.data)
|
|
// setTimeout(() => {
|
|
// resolve(result)
|
|
// }, 1000)
|
|
// }
|
|
// });
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background: #f7f8fa;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.container {}
|
|
|
|
.bg {
|
|
width: 750rpx;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 0;
|
|
background-color: #0d0119;
|
|
opacity: .3;
|
|
}
|
|
|
|
.page-title {
|
|
width: 94%;
|
|
margin: 0 auto;
|
|
padding-top: 40rpx;
|
|
font-size: 28rpx;
|
|
color: rgba(69, 90, 100, 0.6);
|
|
}
|
|
|
|
|
|
|
|
.header {
|
|
height: 220rpx;
|
|
padding: 40rpx 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: #101010;
|
|
color: #cccccc;
|
|
font-size: 24rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
button {
|
|
background: none;
|
|
}
|
|
|
|
text {
|
|
padding: 12rpx 0;
|
|
}
|
|
}
|
|
|
|
.form-wrapper {
|
|
margin: 20rpx auto 20rpx auto;
|
|
padding: 20rpx;
|
|
width: 660rpx;
|
|
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
|
border-radius: 16rpx;
|
|
background: #fff;
|
|
|
|
.input {
|
|
text-align: right !important;
|
|
width: 500rpx !important;
|
|
}
|
|
|
|
.house-label {
|
|
padding: 10rpx;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
|
|
.u-page__tag-item {
|
|
margin-bottom: 10rpx;
|
|
margin-right: 10rpx;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 底部操作栏 */
|
|
|
|
.footer {
|
|
margin-top: 50rpx;
|
|
padding-bottom: 50rpx;
|
|
position: fixed;
|
|
z-index: 999;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #f7f8fa;
|
|
padding-top: 20rpx;
|
|
|
|
.btn-wrapper {
|
|
width: 360rpx;
|
|
margin: auto;
|
|
// display: flex;
|
|
// align-items: center;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.action-btns {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
gap: 20rpx;
|
|
|
|
.u-button {
|
|
flex: 1;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
.btn-item {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
height: 86rpx;
|
|
color: #fff;
|
|
border-radius: 50rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn-item-wechat {
|
|
background: #0ba90b;
|
|
margin-bottom: 26rpx;
|
|
}
|
|
|
|
.btn-item-main {
|
|
background: linear-gradient(to right, $main-bg, $main-bg2);
|
|
color: $main-text;
|
|
|
|
// 禁用按钮
|
|
&.disabled {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.tabs {
|
|
width: 700rpx;
|
|
margin: auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.textarea {
|
|
background-color: #f3f3f3;
|
|
}
|
|
|
|
.images {
|
|
padding: 10rpx;
|
|
}
|
|
|
|
.his-head {
|
|
width: 660rpx;
|
|
margin: auto;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
font-size: 30rpx;
|
|
padding-top: 20rpx;
|
|
color: #333333;
|
|
// font-weight: 600;
|
|
|
|
.line {
|
|
background-color: #681752;
|
|
width: 8rpx;
|
|
height: 30rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.icon {
|
|
float: right;
|
|
}
|
|
|
|
}
|
|
|
|
/deep/ .u-form-item__body {
|
|
padding: 0 !important;
|
|
}
|
|
</style> |