<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">
|
{{ findObjValue(item.status, status) }}
|
</view>
|
</view>
|
|
<view class="list-btn flex j-c-s-b">
|
<!-- <u-button icon="edit-pen" class="btn-item" type="primary" plain text="修改"
|
:disabled="item.status == 1 || item.status == 2" @click="pushPage(item)"></u-button>
|
<u-button icon="calendar" class="btn-item" type="primary" plain text="续租" :disabled="item.status == 2"
|
@click="xzHandleClick(item)"></u-button>
|
<u-button icon="order" class="btn-item" type="primary" plain text="终止"
|
:disabled="item.status == 1 || item.status == 2" @click="terminate(item)"></u-button> -->
|
<view class="btn-item">
|
<u-button class="bgc-main" type="primary" size='small' text="修改"
|
:disabled="item.status == 1 || item.status == 2" @click="pushPage(item)"></u-button>
|
</view>
|
<view class="btn-item">
|
<u-button class="bgc-main" type="primary" size='small' text="续租"
|
:disabled="item.status == 2" @click="xzHandleClick(item)"></u-button>
|
</view>
|
|
<view class="btn-item">
|
<u-button class="bgc-main" type="primary" size='small' text="终止"
|
:disabled="item.status == 1 || item.status == 2" @click="terminate(item)"></u-button>
|
</view>
|
</view>
|
|
</view>
|
|
<view class="tip">
|
<u-divider text="已经到底了"></u-divider>
|
</view>
|
|
<u-datetime-picker v-model="currentTime" v-if="isPickerShow" :closeOnClickOverlay="true" @close="isPickerShow = false" :show="isPickerShow" @cancel="isPickerShow = false" mode="date"
|
@confirm="dueTimeConfirm"></u-datetime-picker>
|
<u-datetime-picker v-model="currentTime" v-if="istPickerShow" :closeOnClickOverlay="true" @close="istPickerShow = false" :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>
|
<u-toast ref="uToast"></u-toast>
|
</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,
|
status: [{
|
name: '未到期',
|
value: 0
|
},
|
{
|
name: '已到期',
|
value: 1
|
},
|
{
|
name: '已终止',
|
value: 2
|
},
|
],
|
currentTime: '',
|
currentRentInfo: {}
|
}
|
},
|
methods: {
|
findObjValue(value, obj) {
|
const res = obj.find(item => {
|
return item.value == value
|
})
|
return res.name
|
},
|
deleteRental(item) {
|
this.currentRentalId = item.housingRentalId
|
this.isModelShow = true
|
},
|
async deleteRentalConfirm() {
|
const {
|
code,
|
data
|
} = await deleteRentalInfo(this.currentRentalId)
|
if (code !== 200) {
|
uni.showToast({
|
title: "删除失败",
|
icon: "error",
|
duration: 1500
|
})
|
return
|
}
|
this.isModelShow = false
|
this.$emit('refreshData')
|
},
|
pushPage(item) {
|
console.log("item===>",item);
|
// const {
|
// houseCode
|
// } = this.$route.query
|
const {
|
id,
|
houseCode
|
} = item
|
this.$u.func.globalNavigator(
|
`/subPackage/bs/views/rentDetail?houseCode=${houseCode}&id=${id}`)
|
},
|
xzHandleClick(item) {
|
this.currentRentalId = item.housingRentalId
|
this.currentRentInfo = item
|
this.currentTime = item.dueTime
|
this.isPickerShow = true
|
|
},
|
async dueTimeConfirm(e) {
|
// 判断当前选中的时间是否小于租房时间
|
const {
|
rentalTime
|
} = this.currentRentInfo
|
const rentDate = new Date(rentalTime).getTime()
|
if (rentDate > e.value) {
|
this.$refs.uToast.show({
|
type: 'warning',
|
message: "续租时间不可小于租房时间",
|
position: 'top',
|
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
|
})
|
return
|
}
|
const time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
|
const res = await updateDueTime({
|
id: this.currentRentalId,
|
dueTime: time
|
})
|
if (res.code !== 200) {
|
uni.showToast({
|
title: "续租失败",
|
icon: "error",
|
duration: 1500
|
})
|
return
|
}
|
this.isPickerShow = false
|
this.$emit('refreshData')
|
},
|
terminate(item) {
|
this.currentRentalId = item.housingRentalId
|
this.istPickerShow = true
|
},
|
async terminateTimeConfirm(e) {
|
const {
|
rentalTime
|
} = this.currentRentInfo
|
const rentDate = new Date(rentalTime).getTime()
|
if (rentDate > e.value) {
|
this.$refs.uToast.show({
|
type: 'warning',
|
message: "终止时间不可小于租房时间",
|
position: 'top',
|
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
|
})
|
return
|
}
|
const time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
|
const res = await updateDueTime({
|
id: this.currentRentalId,
|
terminationTime: time
|
})
|
if (res.code !== 200) {
|
uni.showToast({
|
title: "终止失败",
|
icon: "error",
|
duration: 1500
|
})
|
return
|
}
|
this.istPickerShow = false
|
this.$emit('refreshData')
|
}
|
}
|
}
|
</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;
|
.btn-item {
|
width: 180rpx;
|
// margin: 0 10rpx;
|
// border: 0;
|
// color: #009FFF;
|
// font-weight: 700;
|
}
|
}
|
}
|
|
.tip {}
|
|
}
|
</style>
|
