<template>
|
<view class="container">
|
<view class="main">
|
<view class="content">
|
<u-form labelWidth="70" :model="form" ref="form" :rules="rules">
|
<view class="basic-info">
|
<!-- <u-form-item class="form-item" labelWidth="100" label="绑定手机" borderBottom prop="phone">
|
<u--input border="none" v-model="form.phone" :disabled="roleType == 2?true:false"
|
:placeholder="setPlaceholder(1)">
|
</u--input>
|
</u-form-item> -->
|
|
<u-form-item class="form-item" labelWidth="100" label="地址" borderBottom>
|
<u--input border="none" :placeholder="setPlaceholder(1)" v-model="form.address"
|
:disabled="true" disabled-color="#fff">
|
</u--input>
|
</u-form-item>
|
|
<u-form-item class="form-item" labelWidth="100" label="物业月费" borderBottom>
|
<u--input border="none" :placeholder="setPlaceholder(1)" v-model="form.propertyPrice"
|
:disabled="true" disabled-color="#fff">
|
</u--input>
|
</u-form-item>
|
|
<u-form-item class="form-item" labelWidth="100" label="到期时间" borderBottom>
|
<u--input border="none" :placeholder="setPlaceholder(2)" v-model="form.serviceDue" disabled
|
disabledColor="#ffffff">
|
</u--input>
|
<!-- <u-icon slot="right" name="arrow-right" v-show="roleType != 2"></u-icon> -->
|
</u-form-item>
|
</view>
|
|
<view class="pic">
|
<newBoxTitle title="房屋外观"></newBoxTitle>
|
<u-upload :fileList="form.images" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
:maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture" @afterRead="afterReadImg"
|
@delete="deletePic" uploadIcon="/static/icon/upload.png">
|
</u-upload>
|
</view>
|
|
|
<view class="pic" v-if="roleType == 1">
|
<newBoxTitle title="房产证照片"></newBoxTitle>
|
<u-upload :fileList="form.propertyCertificateImg"
|
:previewFullImage="uploadConfig.previewFullImage" :accept="uploadConfig.acceptImg"
|
:multiple="uploadConfig.multiple" :maxCount="uploadConfig.maxCount"
|
:capture="uploadConfig.capture" @afterRead="afterReadImg($event,'propertyCertificateImg')"
|
@delete="deletePic($event,'propertyCertificateImg')" uploadIcon="/static/icon/upload.png">
|
</u-upload>
|
</view>
|
|
<view class=" flex label-btn-box b-c-w" v-if="roleType == 2">
|
<newBoxTitle title="房屋标签"></newBoxTitle>
|
<view class="list">
|
<block v-for="(item, index) in labelBtnList" :key="index">
|
<view @click="handleLabel(index,item)" class="label-item"
|
:class="index == labelIndex?'c-ff':'c-66'"
|
:style="{backgroundColor:(index == labelIndex?item.showColor:'#F5F5F5')}">
|
{{item.name}}
|
<!-- <u-button size="mini" type="primary" :color="$setLabelColor(item.color)"
|
:style="{color: $setLabelColor(item.color) && '#fff'}" :text="item.name"
|
@click="showLabelPopup(item)"></u-button> -->
|
</view>
|
</block>
|
</view>
|
</view>
|
</u-form>
|
</view>
|
|
<view class="edit-btn">
|
<u-button type="primary" color="linear-gradient(163deg, #01BDFC 0%, #017BFC 100%)" text="修改数据"
|
@click="updateHouseInfo(item)"></u-button>
|
</view>
|
</view>
|
|
<u-modal style="flex: none;" :show="popupShow" :closeOnClickOverlay="true" showCancelButton
|
@cancel="popupShow = false" @confirm="popupConfirm">
|
<view class="slot-content">
|
<view class="flex_base">
|
{{ labelModelInfo.title }}
|
</view>
|
|
<u-radio-group v-model="" class="mt-40" v-model="labelValue" placement="row">
|
<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in labelList" :key="index"
|
:label="item.name" :labelColor="item.showColor" :name="item.name" :activeColor="item.showColor"
|
@change="radioChange(item)">
|
</u-radio>
|
</u-radio-group>
|
|
<u--textarea class="mt-40" v-model="remark" placeholder="请输入内容"></u--textarea>
|
</view>
|
</u-modal>
|
|
|
<!-- 租客关系下拉框 -->
|
<my-select v-if="showList.relation" :show="showList.relation" v-model="form.relation" type="radio"
|
popupTitle="请选择租客关系" :dataLists="dataList.relation" @cancel="showList.relation = false">
|
</my-select>
|
|
|
<u-datetime-picker ref="datetimePicker" :show="showSelectDate" v-model="serveTime" mode="datetime"
|
:formatter="formatter" @confirm="confirmDate" @cancel="showSelectDate = false"></u-datetime-picker>
|
|
</view>
|
</template>
|
|
<script>
|
import uploadMixin from "@/mixin/uploadMixin";
|
import newBoxTitle from '@/subPackage/house/components/boxTitle/index2.vue'
|
import {
|
getLabelListByParentId
|
} from "@/api/label/label.js";
|
import {
|
saveOrUpdateHouseholdLabel,
|
removeHouseholdLabel,
|
setHouseLabel
|
} from "@/api/house/householdLabel.js";
|
import {
|
getHouseDetail,
|
saveOrUpdateHouse
|
} from "@/api/house/house.js";
|
import {
|
minioBaseUrl
|
} from '@/common/setting'
|
export default {
|
mixins: [uploadMixin],
|
components: {
|
newBoxTitle
|
},
|
data() {
|
return {
|
houseCode: '',
|
form: {
|
phone: "",
|
address: "",
|
propertyPrice: "",
|
serviceDue: "",
|
imageUrls: "",
|
propertyCertificateImg: []
|
},
|
// rules: {
|
// phone: [{
|
// required: true,
|
// message: '请输入手机号',
|
// // 可以单个或者同时写两个触发验证方式
|
// trigger: ['change', 'blur'],
|
// },
|
// {
|
// // 自定义验证函数，见上说明
|
// validator: (rule, value, callback) => {
|
// const reg =
|
// /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
|
// if (reg.test(value)) {
|
// return true
|
// }
|
// return false
|
// },
|
// message: '请输入正确的手机号',
|
// // 触发器可以同时用blur和change
|
// trigger: ['change', 'blur'],
|
// }
|
// ]
|
// },
|
showList: {
|
relation: false
|
},
|
nameList: {
|
relation: ""
|
},
|
dataList: {
|
relation: []
|
},
|
|
popupShow: false,
|
|
labelBtnList: [],
|
|
// 安置房弹框中
|
labelList: [{
|
name: '撤销',
|
disabled: false,
|
// color: '#EBEDF0'
|
showColor: '#999',
|
color: '#999'
|
},
|
{
|
name: '绿',
|
disabled: false,
|
// color: '#30D17C'
|
showColor: '#30D17C',
|
color: 'green'
|
},
|
{
|
name: '黄',
|
disabled: false,
|
// color: '#FFB42B'
|
showColor: '#FFB42B',
|
color: 'yellow'
|
}, {
|
name: '红',
|
disabled: false,
|
// color: '#EA1F1F'
|
showColor: '#EA1F1F',
|
color: 'red'
|
}
|
],
|
currentLabelInfo: {},
|
currentColorInfo: {},
|
labelModelInfo: {
|
title: '',
|
selectedColor: ''
|
},
|
labelValue: "",
|
remark: '',
|
// 标记
|
number: 0,
|
roleType: 1,
|
showSelectDate: false,
|
serveTime: Number(new Date()),
|
labelIndex: null,
|
labelItemList: [{
|
name: "闲置",
|
showColor: '#30D17C',
|
color: "green"
|
},
|
|
{
|
|
|
name: "出租",
|
showColor: '#FFCC00',
|
color: "yellow"
|
},
|
{
|
name: "自住",
|
showColor: '#0099FF',
|
color: "blue"
|
},
|
],
|
from: ""
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
|
},
|
onLoad(option) {
|
if (option.code) {
|
this.houseCode = option.code;
|
} else {
|
this.houseCode = uni.getStorageSync("siteInfo").houseCode;
|
uni.setNavigationBarTitle({
|
title: "我的房屋"
|
})
|
}
|
|
let roleName = uni.getStorageSync("activeRole").roleName;
|
if (roleName != "居民") {
|
this.roleType = 2;
|
}
|
if (option.from) {
|
this.from = option.from;
|
}
|
},
|
onShow() {
|
// this.getLabelList()
|
this.getHouseDetailInfo()
|
},
|
methods: {
|
|
confirmDate(e) {
|
if (this.roleType == 2) return;
|
this.showSelectDate = false;
|
this.form.serviceDue = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
|
},
|
|
setPlaceholder(type) {
|
if (this.roleType == 2) {
|
return "未完善"
|
} else {
|
return type == 1 ? "请输入" : "请选择"
|
}
|
},
|
|
|
// 获取房屋详情
|
async getHouseDetailInfo() {
|
var that = this;
|
const param = {
|
houseCode: this.houseCode
|
}
|
const res = await getHouseDetail(param)
|
// 房屋标签处理
|
const paramLabel = {
|
parentId: 1001
|
}
|
const resLabel = await getLabelListByParentId(paramLabel)
|
let labelItem = resLabel.data;
|
for (let i = 0, ii = labelItem.length; i < ii; i++) {
|
for (let k = 0, kk = this.labelItemList.length; k < kk; k++) {
|
if (labelItem[i].name == this.labelItemList[k].name) {
|
labelItem[i].showColor = this.labelItemList[k].showColor;
|
labelItem[i].color = this.labelItemList[k].color;
|
}
|
}
|
}
|
this.labelBtnList = labelItem;
|
if (null != res.data) {
|
const images = []
|
const {
|
phone,
|
address,
|
propertyPrice,
|
serviceDue,
|
imageUrls,
|
userHouseLabelVOList
|
} = res.data
|
if (imageUrls && imageUrls.length > 0) {
|
const urls = imageUrls.split(',')
|
// 遍历
|
urls.forEach(e => {
|
images.push({
|
url: minioBaseUrl + e,
|
name: e
|
})
|
})
|
}
|
let propertyCertificateImg = this.$setImageUrl(res.data.propertyCertificateImg, 2)
|
|
|
|
|
|
// if (userHouseLabelVOList.length > 0) {
|
// that.labelBtnList.forEach(e => {
|
// userHouseLabelVOList.forEach(f => {
|
// if (Number(e.id) == f.labelId) {
|
// e['color'] = f.color
|
// e['remark'] = f.remark
|
// }
|
// })
|
// })
|
// }
|
|
if (userHouseLabelVOList.length) {
|
this.labelIndex = this.labelBtnList.findIndex(item => item.id == userHouseLabelVOList[0]
|
.labelId)
|
}
|
|
this.form = {
|
phone,
|
address,
|
propertyPrice,
|
serviceDue,
|
imageUrls,
|
images,
|
propertyCertificateImg
|
}
|
}
|
},
|
// 获取房屋标签信息
|
async getLabelList() {
|
const param = {
|
parentId: 1001
|
}
|
const res = await getLabelListByParentId(param)
|
this.labelBtnList = res.data
|
},
|
// 更新房屋数据
|
async updateHouseInfo() {
|
this.form['houseCode'] = this.houseCode
|
if (this.form.images.length > 0) {
|
let urls = []
|
this.form.images.forEach(e => {
|
urls.push(e.name)
|
})
|
this.form.imageUrls = urls.join(",")
|
}
|
|
if (this.form.propertyCertificateImg.length) {
|
let urls = []
|
this.form.propertyCertificateImg.forEach(e => {
|
urls.push(e.name)
|
})
|
this.form.propertyCertificateImg = urls.join(",")
|
}
|
this.form.propertyCertificateImg = JSON.stringify(this.form.propertyCertificateImg)
|
const {
|
code,
|
data
|
} = await saveOrUpdateHouse(this.form)
|
if (code !== 200) {
|
uni.showToast({
|
title: "房屋信息修改失败",
|
icon: "error",
|
duration: 1500
|
})
|
return
|
}
|
uni.showToast({
|
title: "房屋信息修改成功",
|
icon: "success",
|
duration: 1500,
|
success: () => {
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 1500)
|
}
|
})
|
},
|
// 房屋弹窗
|
showLabelPopup(item) {
|
// 先清空
|
this.number = 0
|
this.labelValue = ""
|
this.remark = ""
|
this.popupShow = true
|
this.labelModelInfo.title = item.name
|
this.currentLabelInfo = item
|
// 遍历标签集合
|
this.labelList.forEach(e => {
|
console.log(e.color, item.color);
|
if (e.color == item.color) {
|
this.labelValue = e.name
|
console.log(e);
|
this.remark = item.remark
|
this.number = 1
|
}
|
})
|
},
|
|
popupConfirm() {
|
this.popupShow = false
|
},
|
|
radioChange(item) {
|
this.currentColorInfo = item
|
},
|
// 更新房屋标签
|
async popupConfirm() {
|
const {
|
id
|
} = this.currentLabelInfo
|
const {
|
color,
|
name
|
} = this.currentColorInfo
|
let res = null
|
if (name === '撤销') {
|
if (this.number == 1) {
|
const data = {
|
labelId: id,
|
houseCode: this.houseCode
|
}
|
res = await removeHouseholdLabel(data)
|
} else {
|
uni.showToast({
|
title: "无可撤销项",
|
icon: "error",
|
duration: 1500
|
})
|
return
|
}
|
} else {
|
res = await saveOrUpdateHouseholdLabel({
|
houseCode: this.houseCode,
|
labelId: id,
|
remark: this.remark,
|
lableType: 2,
|
color
|
})
|
}
|
if (res.code !== 200) {
|
uni.showToast({
|
title: "修改失败",
|
icon: "error",
|
duration: 1500
|
})
|
return
|
}
|
// 刷新页面 (直接刷新页面上传但没提交的图片会直接没了)
|
// this.getHouseDetailInfo()
|
const labelIndex = this.labelBtnList.findIndex(item => item.id === id)
|
console.log(id);
|
this.labelBtnList[labelIndex].color = color
|
this.popupShow = false
|
},
|
|
//选择标签
|
handleLabel(index, item) {
|
this.labelIndex = index;
|
let data = {
|
labelId: item.id,
|
color: item.color,
|
lableType: 2,
|
houseCode: this.houseCode
|
}
|
this.setLabelRequest(data, item.name)
|
},
|
|
setLabelRequest(data, name) {
|
setHouseLabel(data).then(res => {
|
if (res.code == 200) {
|
this.$showTips("操作成功", "success")
|
if (this.from) {
|
this.updatePrePageData(name)
|
}
|
}
|
})
|
},
|
|
//更新上个页面标签数据
|
updatePrePageData(text) {
|
let pages = getCurrentPages();
|
let prePage = pages[pages.length - 2];
|
prePage.$vm.houseTag = text;
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background: #F5F5F5;
|
}
|
</style>
|
|
<style scoped lang="scss">
|
.container {
|
// position: relative;
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
background: #F5F5F5;
|
font-size: 30rpx;
|
|
.main {
|
// position: relative;
|
// height: 0;
|
// flex: 1;
|
// display: flex;
|
// flex-direction: column;
|
|
.content {
|
// height: 0;
|
// flex: 1;
|
overflow-y: auto;
|
padding: 20rpx 30rpx;
|
|
.basic-info {
|
background-color: #fff;
|
padding: 30rpx;
|
|
.form-item {
|
background-color: #ffffff;
|
padding: 5rpx 20rpx;
|
border-bottom: 1px solid #eff1f3;
|
|
&:first-child {
|
padding-top: 0;
|
}
|
|
&:last-child {
|
padding-bottom: 0;
|
}
|
}
|
|
}
|
|
.pic {
|
background-color: #ffffff;
|
padding: 30rpx;
|
margin-top: 20rpx;
|
|
/deep/ .u-upload__button {
|
border: 1rpx solid #EEEEEE;
|
background-color: #fff;
|
}
|
}
|
|
.label-btn-box {
|
padding: 30rpx;
|
margin-top: 20rpx;
|
display: flex;
|
flex-direction: column;
|
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
|
&>view {
|
width: calc((100% - 80rpx) / 5);
|
margin: 0 20rpx 20rpx 0;
|
|
&:nth-child(5n) {
|
margin-right: 0;
|
}
|
|
/deep/ .u-button {
|
padding: 6rpx 8rpx;
|
border-width: 0 !important;
|
background-color: #F5F5F5;
|
color: #999999;
|
}
|
}
|
}
|
|
}
|
|
}
|
|
.edit-btn {
|
width: calc(100% - 40rpx);
|
padding: 0 20rpx;
|
height: 116rpx;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
background: #fff;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
}
|
}
|
}
|
|
|
.label-item {
|
padding: 12rpx;
|
border-radius: 8rpx;
|
font-size: 26rpx;
|
margin-right: 30rpx;
|
text-align: center;
|
}
|
</style>
|
