<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="绑定手机" required prop="phone">
|
<u--input border="none" v-model="form.phone" placeholder="请输入">
|
</u--input>
|
</u-form-item>
|
|
<u-form-item class="form-item" labelWidth="100" label="地址">
|
<u--input border="none" v-model="form.address" disabled>
|
</u--input>
|
</u-form-item>
|
|
<u-form-item class="form-item" labelWidth="100" label="物业月费">
|
<u--input border="none" v-model="form.propertyPrice" disabled>
|
</u--input>
|
</u-form-item>
|
|
<u-form-item class="form-item" labelWidth="100" label="到期时间">
|
<u--input border="none" v-model="form.serviceDue" disabled>
|
</u--input>
|
</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">
|
</u-upload>
|
</view>
|
<view class=" flex label-btn-box b-c-w">
|
<newBoxTitle title="房屋标签"></newBoxTitle>
|
<view class="list">
|
<view v-for="(item, index) in labelBtnList" :key="index">
|
<u-button size="mini" type="primary"
|
:style="{background: item.color, color: item.color && '#fff'}" :plain="true"
|
:text="item.name" @click="showLabelPopup(item)"></u-button>
|
</view>
|
</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.color" :name="item.name" :activeColor="item.color"
|
@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>
|
</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 {
|
updateHouseLabel,
|
removeHouseLabel
|
} from "@/api/house/houseLabel.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: "",
|
},
|
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'
|
},
|
{
|
name: '绿',
|
disabled: false,
|
color: '#30D17C'
|
},
|
{
|
name: '黄',
|
disabled: false,
|
color: '#FFB42B'
|
}, {
|
name: '红',
|
disabled: false,
|
color: '#EA1F1F'
|
}
|
],
|
currentLabelInfo: {},
|
currentColorInfo: {},
|
labelModelInfo: {
|
title: '',
|
selectedColor: ''
|
},
|
labelValue: "",
|
remark: '',
|
// 标记
|
number: 0
|
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
|
},
|
onLoad(option) {
|
const {
|
code
|
} = option
|
this.houseCode = code
|
},
|
onShow() {
|
// this.getLabelList()
|
this.getHouseDetailInfo()
|
},
|
methods: {
|
// 获取房屋详情
|
async getHouseDetailInfo() {
|
var that = this;
|
const param = {
|
houseCode: this.houseCode
|
}
|
const res = await getHouseDetail(param)
|
// 房屋标签处理
|
const paramLabel = {
|
parentId: 1001
|
}
|
const resLabel = await getLabelListByParentId(paramLabel)
|
this.labelBtnList = resLabel.data
|
if (null != res.data) {
|
const images = []
|
const {
|
phone,
|
address,
|
propertyPrice,
|
serviceDue,
|
imageUrls,
|
houseLabelVOList
|
} = res.data
|
if (imageUrls.length > 0) {
|
const urls = imageUrls.split(',')
|
// 遍历
|
urls.forEach(e => {
|
images.push({
|
url: minioBaseUrl + e,
|
name: e
|
})
|
})
|
}
|
|
if (houseLabelVOList.length > 0) {
|
that.labelBtnList.forEach(e => {
|
houseLabelVOList.forEach(f => {
|
if (Number(e.id) == f.labelId) {
|
e['color'] = f.color
|
e['remark'] = f.remark
|
}
|
})
|
})
|
}
|
this.form = {
|
phone,
|
address,
|
propertyPrice,
|
serviceDue,
|
imageUrls,
|
images
|
}
|
}
|
},
|
// 获取房屋标签信息
|
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(",")
|
}
|
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 removeHouseLabel(data)
|
} else {
|
uni.showToast({
|
title: "无可撤销项",
|
icon: "error",
|
duration: 1500
|
})
|
return
|
}
|
} else {
|
res = await updateHouseLabel({
|
houseCode: this.houseCode,
|
labelId: id,
|
remark: this.remark,
|
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
|
},
|
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
background: #F9F9FA;
|
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;
|
}
|
|
.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;
|
}
|
|
.u-button {
|
padding: 6rpx 8rpx;
|
border-width: 0 !important;
|
background-color: #F5F5F5;
|
color: #999999;
|
}
|
}
|
}
|
|
}
|
|
}
|
|
.edit-btn {
|
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);
|
}
|
}
|
}
|
</style>
|
