Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jczz_app

Lou

2023-11-03 c247a506d95bbe4ec66d92d08096c7107e799e21

 subPackage/house/roomControl/index.vue

@@ -1,247 +1,260 @@
<template>
   <view class="container">
      <view class="main">
         <view class="content">
            <u-form labelWidth="70" :model="form" ref="form">
               <box-title title=""></box-title>

               <view class="basic-info mt-20">
                  <u-form-item class="form-item" labelWidth="100" label="绑定手机" required>
                     <u--input border="none" v-model="form.phone" placeholder="请输入">
                     </u--input>
                  </u-form-item>

                  <u-form-item class="form-item" labelWidth="100" label="地址" required>
                     <u--input border="none" v-model="form.address">
                     </u--input>
                  </u-form-item>

                  <u-form-item class="form-item" labelWidth="100" label="物业月费" required>
                     <u--input border="none" v-model="form.property_price">
                     </u--input>
                  </u-form-item>

                  <u-form-item class="form-item" labelWidth="100" label="到期时间" required>
                     <u--input border="none" v-model="form.service_due">
                     </u--input>
                  </u-form-item>
               </view>

               <box-title class="mt-20" title="房屋外观"></box-title>
               <view class="pic mt-20">
                  <u-upload :fileList="form.image_urls" :previewFullImage="uploadConfig.previewFullImage"
                     :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
                     :maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture" @afterRead="afterReadImg"
                     @delete="deletePic">
                  </u-upload>
               </view>

               <box-title title="房屋标签"></box-title>
               <view class="mt-20 flex label-btn-box b-c-w">
                  <view v-for="(item, index) in labelBtnList" :key="index">
                     <u-button color="#000" size="mini" type="primary" :plain="true" :text="item.name" @click="showLabelPopup(item)"></u-button>
                  </view>
               </view>
            </u-form>
         </view>

         <view class="edit-btn">
            <u-button type="primary" text="修改数据"></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 class="mt-40" v-model="labelValue" placement="row">
               <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in labelList" :key="index"
                  :label="item.name" :name="item.name" :activeColor="item.color" @change="radioChange(item)">
               </u-radio>
            </u-radio-group>

            <u--textarea class="mt-40" v-model="value1" 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 {
      getHouseDetail,
      getHouseLabelList
   } from "@/api/doorplateAddress/doorplateAddress";
   export default {
      mixins: [uploadMixin],
      data() {
         return {
            houseCode: '',
            form: {
               phone: "",
               address: "",
               property_price: "",
               service_due: "",
               image_urls: []
            },
            showList: {
               relation: false
            },
            nameList: {
               relation: ""
            },
            dataList: {
               relation: []
            },

            popupShow: false,

            labelBtnList: [],
				
            // 安置房弹框中
            labelList: [{
                  name: '撤销',
                  disabled: false,
                  color: '#EBEDF0'
               },
               {
                  name: '绿',
                  disabled: false,
                  color: '#07C160'
               },
               {
                  name: '黄',
                  disabled: false,
                  color: '#FF976A'
               }, {
                  name: '红',
                  disabled: false,
                  color: '#EE0A24'
               }
            ],
            labelModelInfo: {
               title: '',
               selectedColor: ''
            },
            labelValue: '苹果',
            value1: ''
         }
      },
      created() {

      },
      mounted() {

      },
      onLoad(option) {
         const { code } = option
         this.houseCode = code
      },
      onShow() {
         this.getLabelList()
         this.getHouseDetailInfo()
      },
      methods: {
         showLabelPopup(item) {
            this.popupShow = true
            this.labelModelInfo.title = item.name
         },
			
         popupConfirm(){
            this.popupShow = false
         },
			
         radioChange(item) {
				
         },
         async getHouseDetailInfo() {
            const res = await getHouseDetail()
            // const { phone, address, property_price, service_due, image_urls } = res.data
            // this.form = {
            //    phone,
            //    address,
            //    property_price,
            //    service_due,
            //    image_urls: [
            //       image_urls
            //    ]
            // }
         },
         async getLabelList() {
            const res = await getHouseLabelList()
            this.labelBtnList = res.data
         }
      }
   }
</script>

<style scoped lang="scss">
   .container {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: #F9F9FA;

      .main {
         position: relative;
         height: 0;
         flex: 1;
         display: flex;
         flex-direction: column;

         .content {
            height: 0;
            flex: 1;
            overflow-y: auto;

            .basic-info {

               .form-item {
                  background-color: #ffffff;
                  padding: 5rpx 20rpx;
                  border-bottom: 1px solid #eff1f3;
               }

            }

            .pic {
               background-color: #ffffff;
               padding: 40rpx 30rpx;
            }

            .label-btn-box {
               padding: 10rpx 0;
					
               &>view {
                  margin: 0 10rpx;
						
                  .u-button {
                     padding: 6rpx 8rpx;
                  }
               }
            }

         }

         .edit-btn {
            padding: 0 20rpx;
            height: 116rpx;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: #fff;
            border-top: 1rpx solid #ccc;
         }
      }
   }
<template>

   <view class="container">

      <view class="main">

         <view class="content">

            <u-form labelWidth="70" :model="form" ref="form">

               <box-title title=""></box-title>



               <view class="basic-info mt-20">

                  <u-form-item class="form-item" labelWidth="100" label="绑定手机" required>

                     <u--input border="none" v-model="form.phone" placeholder="请输入">

                     </u--input>

                  </u-form-item>



                  <u-form-item class="form-item" labelWidth="100" label="地址" required>

                     <u--input border="none" v-model="form.address" disabled>

                     </u--input>

                  </u-form-item>



                  <u-form-item class="form-item" labelWidth="100" label="物业月费" required>

                     <u--input border="none" v-model="form.property_price" disabled>

                     </u--input>

                  </u-form-item>



                  <u-form-item class="form-item" labelWidth="100" label="到期时间" required>

                     <u--input border="none" v-model="form.service_due" disabled>

                     </u--input>

                  </u-form-item>

               </view>



               <box-title class="mt-20" title="房屋外观"></box-title>

               <view class="pic mt-20">

                  <u-upload :fileList="form.image_urls" :previewFullImage="uploadConfig.previewFullImage"

                     :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"

                     :maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture" @afterRead="afterReadImg"

                     @delete="deletePic">

                  </u-upload>

               </view>



               <box-title title="房屋标签"></box-title>

               <view class="mt-20 flex label-btn-box b-c-w">

                  <view v-for="(item, index) in labelBtnList" :key="index">

                     <u-button color="#000" size="mini" type="primary" :plain="true" :text="item.name"

                        @click="showLabelPopup(item)"></u-button>

                  </view>

               </view>

            </u-form>

         </view>



         <view class="edit-btn">

            <u-button type="primary" text="修改数据"></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 class="mt-40" v-model="labelValue" placement="row">

               <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in labelList" :key="index"

                  :label="item.name" :name="item.name" :activeColor="item.color" @change="radioChange(item)">

               </u-radio>

            </u-radio-group>



            <u--textarea class="mt-40" v-model="value1" 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 {

      getHouseDetail,

      getHouseLabelList,
      uploadFile

   } from "@/api/doorplateAddress/doorplateAddress";

   export default {

      mixins: [uploadMixin],

      data() {

         return {

            houseCode: '',

            form: {

               phone: "",

               address: "",

               property_price: "",

               service_due: "",

               image_urls: []

            },

            showList: {

               relation: false

            },

            nameList: {

               relation: ""

            },

            dataList: {

               relation: []

            },



            popupShow: false,



            labelBtnList: [],



            // 安置房弹框中

            labelList: [{

                  name: '撤销',

                  disabled: false,

                  color: '#EBEDF0'

               },

               {

                  name: '绿',

                  disabled: false,

                  color: '#07C160'

               },

               {

                  name: '黄',

                  disabled: false,

                  color: '#FF976A'

               }, {

                  name: '红',

                  disabled: false,

                  color: '#EE0A24'

               }

            ],

            labelModelInfo: {

               title: '',

               selectedColor: ''

            },

            labelValue: '苹果',

            value1: ''

         }

      },

      created() {



      },

      mounted() {



      },

      onLoad(option) {

         const {

            code

         } = option

         this.houseCode = code

      },

      onShow() {

         this.getLabelList()

         this.getHouseDetailInfo()

      },

      methods: {

         showLabelPopup(item) {

            this.popupShow = true

            this.labelModelInfo.title = item.name

         },



         popupConfirm() {

            this.popupShow = false

         },



         radioChange(item) {



         },

         async getHouseDetailInfo() {

            const res = await getHouseDetail()

            // const { phone, address, property_price, service_due, image_urls } = res.data

            // this.form = {

            //    phone,

            //    address,

            //    property_price,

            //    service_due,

            //    image_urls: [

            //       image_urls

            //    ]

            // }

         },

         async getLabelList() {

            const res = await getHouseLabelList()

            this.labelBtnList = res.data

         },

         async afterReadImg(event) {

            let lists = [].concat(event.file)
            lists.forEach(item => {
               const { url } = item
               uploadFile(item)
            })

				
         }

      }

   }

</script>



<style scoped lang="scss">

   .container {

      position: relative;

      width: 100%;

      height: 100%;

      display: flex;

      flex-direction: column;

      background: #F9F9FA;



      .main {

         position: relative;

         height: 0;

         flex: 1;

         display: flex;

         flex-direction: column;



         .content {

            height: 0;

            flex: 1;

            overflow-y: auto;



            .basic-info {



               .form-item {

                  background-color: #ffffff;

                  padding: 5rpx 20rpx;

                  border-bottom: 1px solid #eff1f3;

               }



            }



            .pic {

               background-color: #ffffff;

               padding: 40rpx 30rpx;

            }



            .label-btn-box {

               padding: 10rpx 0;



               &>view {

                  margin: 0 10rpx;



                  .u-button {

                     padding: 6rpx 8rpx;

                  }

               }

            }



         }



         .edit-btn {

            padding: 0 20rpx;

            height: 116rpx;

            display: flex;

            justify-content: space-around;

            align-items: center;

            background: #fff;

            border-top: 1rpx solid #ccc;

         }

      }

   }

</style>