343 lines
8.9 KiB
Vue
343 lines
8.9 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<scroll-view scroll-y="true" class="scroll-wrapper">
|
|||
|
|
<view>
|
|||
|
|
<view class="wrap">
|
|||
|
|
<u-form ref="uForm">
|
|||
|
|
<u-form-item :label-position="labelPosition" label="出租房间" label-width="150" required>
|
|||
|
|
<u-input :border="border" type="select" :select-open="selectShow" v-model="roomLabelVo" placeholder="请选择出租房间" @click="selectShow = true"></u-input>
|
|||
|
|
</u-form-item>
|
|||
|
|
|
|||
|
|
<u-form-item label-width="150" :label-position="labelPosition" label="房间号" required>
|
|||
|
|
<u-input :border="border" placeholder="如 A01..." v-model="model.roomCode" type="text"></u-input>
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item label-width="150" :label-position="labelPosition" label="房屋面积" required>
|
|||
|
|
<u-input :border="border" placeholder="请输入房屋面积" v-model="model.roomArea" type="number"></u-input>
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item label-width="150" :label-position="labelPosition" label="朝向" >
|
|||
|
|
<u-input :border="border" type="select" :select-open="directionShow" v-model="directionVo" placeholder="请选择朝向" @click="directionShow = true"></u-input>
|
|||
|
|
</u-form-item>
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item label-width="150" :label-position="labelPosition" label="租金" required>
|
|||
|
|
<u-input :border="border" placeholder="请输入租金" v-model="model.price" type="number"></u-input>
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item label-width="150" :label-position="labelPosition" label="起租日期">
|
|||
|
|
<view class="dateBtn" @click="dateClick">
|
|||
|
|
{{dateLabel}}<u-icon name="arrow-right"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</u-form-item>
|
|||
|
|
<view class="custom-gap"></view>
|
|||
|
|
<u-form-item :label-position="labelPosition" label="房源图片" label-width="150" required>
|
|||
|
|
<u-upload
|
|||
|
|
:custom-btn="true" ref="uUpload" :auto-upload="true" :action="action" :max-size="10 * 1024 * 1024" max-count="9" width="160" height="160" :size-type="siteType">
|
|||
|
|
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
|
|||
|
|
<u-icon name="plus" size="60" :color="$u.color['lightColor']"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</u-upload>
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item label-width="150" :label-position="labelPosition" label="房源描述">
|
|||
|
|
<u-input type="textarea" :border="border" placeholder="请填写房屋描述" v-model="model.introduce" />
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item label-width="150" :label-position="labelPosition" label="房源亮点" required>
|
|||
|
|
<u-checkbox-group @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
|
|||
|
|
<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
|
|||
|
|
</u-checkbox-group>
|
|||
|
|
</u-form-item>
|
|||
|
|
</u-form>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
|
|||
|
|
<u-select mode="single-column" :list="directionList" v-model="directionShow" @confirm="directionConfirm"></u-select>
|
|||
|
|
<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
|
|||
|
|
<u-calendar v-model="show" :mode="mode" @change="changeDate" max-date="2100-01-01"></u-calendar>
|
|||
|
|
<view class="bottom-btn">
|
|||
|
|
<u-button type="primary" @click="submit">提交</u-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import config from "@/common/config.js" // 全局配置文件
|
|||
|
|
export default {
|
|||
|
|
props:{
|
|||
|
|
model:Object
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
roomLabelVo:'',
|
|||
|
|
directionVo:'',
|
|||
|
|
show: false,
|
|||
|
|
mode: 'date',
|
|||
|
|
selectList: [
|
|||
|
|
{
|
|||
|
|
value: '1',
|
|||
|
|
label: '主卧'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '2',
|
|||
|
|
label: '次卧'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
directionList:[
|
|||
|
|
{
|
|||
|
|
value: '东',
|
|||
|
|
label: '东'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '南',
|
|||
|
|
label: '南'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '西',
|
|||
|
|
label: '西'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '北',
|
|||
|
|
label: '北'
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
border: false,
|
|||
|
|
check: false,
|
|||
|
|
checkboxList: [
|
|||
|
|
{
|
|||
|
|
name: '看房方便',
|
|||
|
|
checked: false,
|
|||
|
|
disabled: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '独卫',
|
|||
|
|
checked: false,
|
|||
|
|
disabled: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '独立阳台',
|
|||
|
|
checked: false,
|
|||
|
|
disabled: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '智能锁',
|
|||
|
|
checked: false,
|
|||
|
|
disabled: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '可短租',
|
|||
|
|
checked: false,
|
|||
|
|
disabled: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '首次出租',
|
|||
|
|
checked: false,
|
|||
|
|
disabled: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '免物业费',
|
|||
|
|
checked: false,
|
|||
|
|
disabled: false
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '民用水电',
|
|||
|
|
checked: false,
|
|||
|
|
disabled: false
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
actionSheetList: [
|
|||
|
|
{
|
|||
|
|
text: '电梯房'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: '楼梯房'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
selectShow: false,
|
|||
|
|
directionShow: false,
|
|||
|
|
radioCheckWidth: 'auto',
|
|||
|
|
radioCheckWrap: false,
|
|||
|
|
labelPosition: 'left',
|
|||
|
|
errorType: ['toast'],
|
|||
|
|
actionSheetShow: false,
|
|||
|
|
dateLabel:'随时入住',
|
|||
|
|
// 图片服务器地址
|
|||
|
|
action: config.staticUrl + '/common/upload',
|
|||
|
|
siteType:['compressed'],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
model: {
|
|||
|
|
handler(newName, oldName) {
|
|||
|
|
this.roomLabelVo = newName.roomLabel
|
|||
|
|
// 回显房源亮点
|
|||
|
|
if(this.model.featureList){
|
|||
|
|
this.checkboxList.forEach(item=>{
|
|||
|
|
this.model.featureList.forEach(feature=>{
|
|||
|
|
if(feature.feature == item.name){
|
|||
|
|
item.checked=true
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
this.directionVo = newName.direction
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
immediate: true,
|
|||
|
|
deep: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
submit() {
|
|||
|
|
if(this.$u.test.isEmpty(this.model.roomType)){
|
|||
|
|
return this.$mytip.toast('请选择租房间')
|
|||
|
|
}
|
|||
|
|
if(this.$u.test.isEmpty(this.model.roomCode)){
|
|||
|
|
return this.$mytip.toast('请输入房间号')
|
|||
|
|
}
|
|||
|
|
if(this.$u.test.isEmpty(this.model.roomArea)){
|
|||
|
|
return this.$mytip.toast('请输入房屋面积')
|
|||
|
|
}
|
|||
|
|
// if(this.$u.test.isEmpty(this.model.direction)){
|
|||
|
|
// return this.$mytip.toast('请输入朝向')
|
|||
|
|
// }
|
|||
|
|
if(this.$u.test.isEmpty(this.model.price)){
|
|||
|
|
return this.$mytip.toast('请输入租金')
|
|||
|
|
}
|
|||
|
|
let files = [];
|
|||
|
|
// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
|
|||
|
|
files = this.$refs.uUpload.lists.filter(val => {
|
|||
|
|
return val.progress == 100;
|
|||
|
|
})
|
|||
|
|
if(this.$u.test.isEmpty(files)){
|
|||
|
|
return this.$mytip.toast('请至少选择一张房源图片')
|
|||
|
|
}
|
|||
|
|
let imageList = files.map(val => {
|
|||
|
|
return {
|
|||
|
|
imageName: val.response.realName,
|
|||
|
|
imagePath: val.response.fileName,
|
|||
|
|
imgUrl: val.response.url,
|
|||
|
|
imageSize: val.file.size
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.model.imageList = imageList
|
|||
|
|
if(this.$u.test.isEmpty(this.model.featureList)){
|
|||
|
|
return this.$mytip.toast('请至少选择一个房源亮点')
|
|||
|
|
}
|
|||
|
|
let url = "api/houseApi/saveHouse";
|
|||
|
|
if(this.model.id){
|
|||
|
|
url = "api/houseApi/updateHouse";
|
|||
|
|
}
|
|||
|
|
this.model.publishId = uni.getStorageSync('lifeData').vuex_user.user.userId;
|
|||
|
|
this.$u.post(url,this.model).then(data => {
|
|||
|
|
// uni.$emit('findIndexHouseList', {});
|
|||
|
|
// this.$u.route({
|
|||
|
|
// type: 'tab',url: '/pages/index/index'
|
|||
|
|
// })
|
|||
|
|
this.$u.route({
|
|||
|
|
url: 'pages/center/order',
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 选择类型回调
|
|||
|
|
selectConfirm(e) {
|
|||
|
|
this.model.roomLabel = ''
|
|||
|
|
this.model.roomType = ''
|
|||
|
|
e.map((val, index) => {
|
|||
|
|
this.model.roomLabel += val.label;
|
|||
|
|
this.model.roomType += val.value;
|
|||
|
|
})
|
|||
|
|
this.roomLabelVo = this.model.roomLabel
|
|||
|
|
},
|
|||
|
|
directionConfirm(e) {
|
|||
|
|
e.map((val, index) => {
|
|||
|
|
this.model.direction = val.label;
|
|||
|
|
this.directionVo = val.label;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 点击actionSheet回调
|
|||
|
|
actionSheetCallback(index) {
|
|||
|
|
uni.hideKeyboard();
|
|||
|
|
this.model.stepType = this.actionSheetList[index].text;
|
|||
|
|
},
|
|||
|
|
// checkbox选择发生变化
|
|||
|
|
checkboxGroupChange(e) {
|
|||
|
|
let featureList = e.map(val => {
|
|||
|
|
return {
|
|||
|
|
feature: val
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.model.featureList = featureList
|
|||
|
|
},
|
|||
|
|
borderChange(index) {
|
|||
|
|
this.border = !index;
|
|||
|
|
},
|
|||
|
|
labelPositionChange(index) {
|
|||
|
|
this.labelPosition = index == 0 ? 'left' : 'top';
|
|||
|
|
},
|
|||
|
|
codeChange(text) {
|
|||
|
|
this.codeTips = text;
|
|||
|
|
},
|
|||
|
|
dateClick(){
|
|||
|
|
this.show = true
|
|||
|
|
},
|
|||
|
|
changeDate(e){
|
|||
|
|
this.model.startDate = e.result
|
|||
|
|
this.dateLabel = e.result
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
page{
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
|
|||
|
|
.wrap {
|
|||
|
|
padding: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scroll-wrapper{
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0rpx;
|
|||
|
|
right: 0rpx;
|
|||
|
|
top: 0rpx;
|
|||
|
|
bottom: 120rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-btn {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 8rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
border-top: 1rpx solid #ccc;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dateBtn{
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0rpx;
|
|||
|
|
top:10rpx;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.slot-btn {
|
|||
|
|
width: 160rpx;
|
|||
|
|
height: 160rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
background: rgb(244, 245, 246);
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.slot-btn__hover {
|
|||
|
|
background-color: rgb(235, 236, 238);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-gap{
|
|||
|
|
width: 1000rpx;
|
|||
|
|
height: 10rpx;
|
|||
|
|
margin: 0 -200rpx 0 -200rpx;
|
|||
|
|
background-color: rgb(235, 236, 238);
|
|||
|
|
}
|
|||
|
|
</style>
|