mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-07 17:32:25 +08:00
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>
|