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

guoshilong

2023-11-02 f32cff008d5ebdf1fdf3c8369fb8f7b0c2b4448e

 subPackage/bs/components/list/rentList.vue

@@ -1,92 +1,161 @@
<template>
   <view class="list-container">

      <view class="item" v-for="(item, index) in list" :key="index">
         <view class="line">
            <view class="l">租客：{{item.name}} {{`(共${item.num}人)`}}</view>
            <view class="r">
               <u-icon name="trash-fill" color="#ff0000" size="18"></u-icon>
            </view>
         </view>

         <view class="line">
            <view class="l">{{item.startTime}} - {{item.endTime}}</view>
            <view class="r status">
               {{item.status}}
            </view>
         </view>

         <view class="list-btn">
            <u-button :customStyle="btnCustomStyle" color="#cdf3df" type="primary" text="修改"></u-button>
         </view>

      </view>

      <view class="tip">
         <u-divider text="已经到底了"></u-divider>
      </view>
   </view>
</template>

<script>
   export default {
      props: {
         list: {
            type: Array,
            default: () => []
         }
      },
      data() {
         return {
            btnCustomStyle: {
               color: "#6dc160",
               fontWeight: "700"
            }
         }
      },
      created() {

      },
      mounted() {

      },
      onLoad(option) {

      },
      onShow() {

      },
      methods: {

      }
   }
</script>

<style scoped lang="scss">
   .list-container {

      .item {
         background-color: #ffffff;
         margin: 20rpx 0;

         .line {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14rpx;

            .status {
               color: #6dc160
            }

         }

         .list-btn {
            padding: 24rpx;
         }
      }

      .tip {}

   }
<template>

   <view class="list-container">



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

         <view class="line">

            <view class="l">租客：{{item.name}} (<text>{{`共${item.num}人`}}</text>)</view>

            <view class="r">

               <u-icon name="trash-fill" color="#ff0000" size="18" @click="deleteRental(item)"></u-icon>

            </view>

         </view>



         <view class="line">

            <view class="l">{{item.rentalTime}} - {{item.dueTime}}</view>

            <view class="r status">

               {{item.status}}

            </view>

         </view>



         <view class="list-btn">

            <u-button icon="edit-pen" class="btn-item" type="primary" plain text="修改"

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

            <u-button icon="calendar" class="btn-item" type="primary" plain text="续租"

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

            <u-button icon="order" class="btn-item" type="primary" plain text="终止"

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

         </view>



      </view>



      <view class="tip">

         <u-divider text="已经到底了"></u-divider>

      </view>



      <u-datetime-picker :show="isPickerShow" @cancel="isPickerShow = false" mode="date"

         @confirm="dueTimeConfirm"></u-datetime-picker>

      <u-datetime-picker :show="istPickerShow" @cancel="istPickerShow = false" mode="date"

         @confirm="terminateTimeConfirm"></u-datetime-picker>

      <u-modal :show="isModelShow" width="auto" :showCancelButton="true" title="提示" content="请确认是否删除当前租户信息"

         @cancel="isModelShow = false" @confirm="deleteRentalConfirm"></u-modal>

   </view>

</template>



<script>

   import {

      deleteRentalInfo,

      updateDueTime

   } from "@/api/houseRental/houseRental.js";

   export default {

      props: {

         list: {

            type: Array,

            default: () => []

         }

      },

      data() {

         return {

            isPickerShow: false,

            istPickerShow: false,

            currentRentalId: '',

            isModelShow: false

         }

      },

      methods: {

         deleteRental(item) {

            this.currentRentalId = item.housingRentalId

            this.isModelShow = true

         },

         async deleteRentalConfirm() {

            const {

               code,

               data

            } = await deleteRentalInfo(this.currentRentalId)

            console.log(code, data)

            this.isModelShow = false

         },

         pushPage(item) {

            const {

               houseCode

            } = this.$route.query

            const {

               id

            } = item

            this.$u.func.globalNavigator(

               `/subPackage/bs/views/rentDetail?houseCode=${houseCode}&id=${id}`)

         },

         xzHandleClick(item) {

            this.currentRentalId = item.housingRentalId

            this.isPickerShow = true

         },

         async dueTimeConfirm(e) {

            const time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')

            const res = await updateDueTime({

               id: this.currentRentalId,

               dueTime: time

            })

            this.isPickerShow = false

         },

         async terminate(item) {

            this.currentRentalId = item.housingRentalId

            this.istPickerShow = true

         },

         async terminateTimeConfirm(e) {

            const time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')

            const res = await updateDueTime({

               id: this.currentRentalId,

               terminationTime: time

            })

            this.isPickerShow = false

         }

      }

   }

</script>



<style scoped lang="scss">

   .list-container {



      .item {

         background-color: #ffffff;

         margin: 20rpx 0;



         .line {

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 20rpx;



            &:nth-child(1) {

               border: 1rpx solid #F6F6F6;

            }



            .l {

               font-weight: 700;



               text {

                  color: #0682EF;

               }

            }



            .status {

               color: #6dc160

            }



         }



         .list-btn {

            padding: 24rpx;

            display: flex;



            .btn-item {

               margin: 0 10rpx;

               border: 0;

               color: #009FFF;

               font-weight: 700;

            }

         }

      }



      .tip {}



   }

</style>