| New file |
| | |
| | | <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"> |
| | | <view v-for="(item, index) in labelBtnList" :key="index"> |
| | | <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> |
| | | </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 |
| | | } 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()), |
| | | } |
| | | }, |
| | | 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; |
| | | } |
| | | |
| | | |
| | | 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) |
| | | this.labelBtnList = resLabel.data |
| | | 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 |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | 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(",") |
| | | } |
| | | |
| | | |
| | | 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 |
| | | }, |
| | | |
| | | } |
| | | } |
| | | </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; |
| | | } |
| | | } |
| | | } |
| | | </style> |