878 lines
22 KiB
Vue
878 lines
22 KiB
Vue
|
<template>
|
|||
|
|
<view class="add-record-page">
|
|||
|
|
<!-- 自定义导航栏 -->
|
|||
|
|
<view class="custom-nav safe-area-top">
|
|||
|
|
<view class="nav-content">
|
|||
|
|
<view class="nav-btn" @click="goBack">
|
|||
|
|
<uni-icons type="left" size="22" color="#1E293B"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
<text class="nav-title">办理入住</text>
|
|||
|
|
<view class="nav-btn" @click="saveRental">
|
|||
|
|
<text class="save-text">提交</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 表单内容 -->
|
|||
|
|
<scroll-view scroll-y class="form-content">
|
|||
|
|
<!-- 步骤指示器 -->
|
|||
|
|
<view class="step-indicator">
|
|||
|
|
<view class="step-item" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
|
|||
|
|
<view class="step-num">1</view>
|
|||
|
|
<text class="step-text">选择房间</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="step-line" :class="{ active: currentStep >= 2 }"></view>
|
|||
|
|
<view class="step-item" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
|
|||
|
|
<view class="step-num">2</view>
|
|||
|
|
<text class="step-text">租客信息</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="step-line" :class="{ active: currentStep >= 3 }"></view>
|
|||
|
|
<view class="step-item" :class="{ active: currentStep >= 3 }">
|
|||
|
|
<view class="step-num">3</view>
|
|||
|
|
<text class="step-text">合同信息</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 步骤1：选择房间 -->
|
|||
|
|
<view v-if="currentStep === 1" class="step-panel">
|
|||
|
|
<view class="panel-title">选择公寓</view>
|
|||
|
|
<view class="apartment-list">
|
|||
|
|
<view
|
|||
|
|
v-for="apt in apartments"
|
|||
|
|
:key="apt.id"
|
|||
|
|
class="apartment-card"
|
|||
|
|
:class="{ active: selectedApartmentId === apt.id }"
|
|||
|
|
@click="selectApartment(apt.id)"
|
|||
|
|
>
|
|||
|
|
<view class="apt-header">
|
|||
|
|
<text class="apt-name">{{apt.name}}</text>
|
|||
|
|
<uni-icons v-if="selectedApartmentId === apt.id" type="checkmarkempty" size="20" color="#409EFF"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
<text class="apt-address">{{apt.address || '暂无地址'}}</text>
|
|||
|
|
<view class="apt-stats">
|
|||
|
|
<text>空房 {{apt.emptyCount || 0}}间</text>
|
|||
|
|
<text class="divider">|</text>
|
|||
|
|
<text>共 {{apt.roomCount || 0}}间</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="panel-title" v-if="selectedApartmentId">选择房间</view>
|
|||
|
|
<view class="room-grid" v-if="selectedApartmentId">
|
|||
|
|
<view
|
|||
|
|
v-for="room in availableRooms"
|
|||
|
|
:key="room.id"
|
|||
|
|
class="room-item"
|
|||
|
|
:class="{ active: form.roomId === room.id }"
|
|||
|
|
@click="selectRoom(room)"
|
|||
|
|
>
|
|||
|
|
<text class="room-num">{{room.roomNumber}}</text>
|
|||
|
|
<text class="room-price">¥{{room.rent || 0}}/月</text>
|
|||
|
|
<text class="room-area" v-if="room.area">{{room.area}}m²</text>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="availableRooms.length === 0" class="empty-tip">
|
|||
|
|
<text>该公寓暂无空房</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<button class="btn-next" :disabled="!form.roomId" @click="nextStep">下一步</button>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 步骤2：租客信息 -->
|
|||
|
|
<view v-if="currentStep === 2" class="step-panel">
|
|||
|
|
<view class="panel-title">租客信息</view>
|
|||
|
|
<view class="form-card">
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">租客姓名 <text class="required">*</text></text>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
v-model="form.renterName"
|
|||
|
|
placeholder="请输入租客姓名"
|
|||
|
|
class="form-input"
|
|||
|
|
maxlength="20"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">联系电话</text>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
v-model="form.renterPhone"
|
|||
|
|
placeholder="请输入联系电话（选填）"
|
|||
|
|
class="form-input"
|
|||
|
|
maxlength="11"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">身份证号</text>
|
|||
|
|
<input
|
|||
|
|
type="idcard"
|
|||
|
|
v-model="form.renterIdCard"
|
|||
|
|
placeholder="请输入身份证号（选填）"
|
|||
|
|
class="form-input"
|
|||
|
|
maxlength="18"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="btn-group">
|
|||
|
|
<button class="btn-prev" @click="prevStep">上一步</button>
|
|||
|
|
<button class="btn-next" :disabled="!form.renterName" @click="nextStep">下一步</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 步骤3：合同信息 -->
|
|||
|
|
<view v-if="currentStep === 3" class="step-panel">
|
|||
|
|
<view class="panel-title">合同信息</view>
|
|||
|
|
<view class="form-card">
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">付租方式 <text class="required">*</text></text>
|
|||
|
|
<view class="radio-group">
|
|||
|
|
<view
|
|||
|
|
v-for="type in paymentTypes"
|
|||
|
|
:key="type.value"
|
|||
|
|
class="radio-item"
|
|||
|
|
:class="{ active: form.paymentType === type.value }"
|
|||
|
|
@click="selectPaymentType(type.value)"
|
|||
|
|
>
|
|||
|
|
<text>{{type.label}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">租期 <text class="required">*</text></text>
|
|||
|
|
<view class="period-selector">
|
|||
|
|
<view class="period-options">
|
|||
|
|
<view
|
|||
|
|
v-for="period in periodOptions"
|
|||
|
|
:key="period.value"
|
|||
|
|
class="period-item"
|
|||
|
|
:class="{ active: leasePeriod === period.value }"
|
|||
|
|
@click="selectPeriod(period.value)"
|
|||
|
|
>
|
|||
|
|
<text>{{period.label}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">开始日期 <text class="required">*</text></text>
|
|||
|
|
<picker mode="date" :value="form.startDate" @change="onStartDateChange">
|
|||
|
|
<view class="picker-value">
|
|||
|
|
<text>{{form.startDate || '请选择开始日期'}}</text>
|
|||
|
|
<uni-icons type="arrowright" size="16" color="#94A3B8"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">结束日期</text>
|
|||
|
|
<view class="static-value">{{form.endDate || '自动计算'}}</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">{{form.paymentType === 'monthly' ? '月租金' : '年租金'}} <text class="required">*</text></text>
|
|||
|
|
<input
|
|||
|
|
type="digit"
|
|||
|
|
v-model="form.rent"
|
|||
|
|
:placeholder="form.paymentType === 'monthly' ? '请输入月租金' : '请输入年租金'"
|
|||
|
|
class="form-input"
|
|||
|
|
/>
|
|||
|
|
<text class="input-suffix">元</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">押金</text>
|
|||
|
|
<input
|
|||
|
|
type="digit"
|
|||
|
|
v-model="form.deposit"
|
|||
|
|
placeholder="请输入押金金额"
|
|||
|
|
class="form-input"
|
|||
|
|
/>
|
|||
|
|
<text class="input-suffix">元</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">水表起始读数</text>
|
|||
|
|
<input
|
|||
|
|
type="digit"
|
|||
|
|
v-model="form.waterStartReading"
|
|||
|
|
placeholder="请输入水表起始读数（选填）"
|
|||
|
|
class="form-input"
|
|||
|
|
/>
|
|||
|
|
<text class="input-suffix">吨</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">电表起始读数</text>
|
|||
|
|
<input
|
|||
|
|
type="digit"
|
|||
|
|
v-model="form.electricStartReading"
|
|||
|
|
placeholder="请输入电表起始读数（选填）"
|
|||
|
|
class="form-input"
|
|||
|
|
/>
|
|||
|
|
<text class="input-suffix">度</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">备注</text>
|
|||
|
|
<textarea
|
|||
|
|
v-model="form.remark"
|
|||
|
|
placeholder="请输入备注信息（选填）"
|
|||
|
|
class="form-textarea"
|
|||
|
|
maxlength="200"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="btn-group">
|
|||
|
|
<button class="btn-prev" @click="prevStep">上一步</button>
|
|||
|
|
<button class="btn-submit" :loading="submitLoading" @click="submitForm">确认办理</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="safe-area-bottom" style="height: 40rpx;"></view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import rentalApi from '@/api/rental.js'
|
|||
|
|
import apartmentApi from '@/api/apartment.js'
|
|||
|
|
import roomApi from '@/api/room.js'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
currentStep: 1,
|
|||
|
|
submitLoading: false,
|
|||
|
|
apartments: [],
|
|||
|
|
rooms: [],
|
|||
|
|
selectedApartmentId: null,
|
|||
|
|
leasePeriod: 1,
|
|||
|
|
form: {
|
|||
|
|
roomId: '',
|
|||
|
|
renterName: '',
|
|||
|
|
renterPhone: '',
|
|||
|
|
renterIdCard: '',
|
|||
|
|
paymentType: 'monthly',
|
|||
|
|
startDate: '',
|
|||
|
|
endDate: '',
|
|||
|
|
rent: '',
|
|||
|
|
deposit: '',
|
|||
|
|
waterStartReading: '',
|
|||
|
|
electricStartReading: '',
|
|||
|
|
remark: ''
|
|||
|
|
},
|
|||
|
|
paymentTypes: [
|
|||
|
|
{ label: '月租', value: 'monthly' },
|
|||
|
|
{ label: '季租', value: 'quarterly' },
|
|||
|
|
{ label: '半年租', value: 'half_year' },
|
|||
|
|
{ label: '年租', value: 'yearly' }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
availableRooms() {
|
|||
|
|
return this.rooms.filter(room => room.status === 'empty' || room.status === 'vacant')
|
|||
|
|
},
|
|||
|
|
periodOptions() {
|
|||
|
|
if (this.form.paymentType === 'monthly') {
|
|||
|
|
return Array.from({ length: 12 }, (_, i) => ({
|
|||
|
|
label: `${i + 1}个月`,
|
|||
|
|
value: i + 1
|
|||
|
|
}))
|
|||
|
|
} else if (this.form.paymentType === 'quarterly') {
|
|||
|
|
return Array.from({ length: 4 }, (_, i) => ({
|
|||
|
|
label: `${i + 1}个季度`,
|
|||
|
|
value: i + 1
|
|||
|
|
}))
|
|||
|
|
} else if (this.form.paymentType === 'half_year') {
|
|||
|
|
return Array.from({ length: 2 }, (_, i) => ({
|
|||
|
|
label: `${i + 1}个半年`,
|
|||
|
|
value: i + 1
|
|||
|
|
}))
|
|||
|
|
} else {
|
|||
|
|
return Array.from({ length: 5 }, (_, i) => ({
|
|||
|
|
label: `${i + 1}年`,
|
|||
|
|
value: i + 1
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.loadApartments()
|
|||
|
|
// 设置默认开始日期为今天
|
|||
|
|
this.form.startDate = this.formatDate(new Date())
|
|||
|
|
if (options.roomId) {
|
|||
|
|
this.preSelectRoom(options.roomId)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
'form.paymentType': function() {
|
|||
|
|
this.leasePeriod = 1
|
|||
|
|
this.updateEndDate()
|
|||
|
|
},
|
|||
|
|
leasePeriod: function() {
|
|||
|
|
this.updateEndDate()
|
|||
|
|
},
|
|||
|
|
'form.startDate': function() {
|
|||
|
|
this.updateEndDate()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async loadApartments() {
|
|||
|
|
try {
|
|||
|
|
const res = await apartmentApi.getList({ pageSize: 999 })
|
|||
|
|
if (res.data) {
|
|||
|
|
this.apartments = res.data
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载公寓列表失败:', error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async loadRooms(apartmentId) {
|
|||
|
|
try {
|
|||
|
|
const res = await roomApi.getList({ apartmentId, pageSize: 999 })
|
|||
|
|
if (res.data) {
|
|||
|
|
this.rooms = res.data
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载房间列表失败:', error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async preSelectRoom(roomId) {
|
|||
|
|
try {
|
|||
|
|
const res = await roomApi.getDetail(roomId)
|
|||
|
|
if (res.data) {
|
|||
|
|
const room = res.data
|
|||
|
|
this.selectedApartmentId = room.apartmentId
|
|||
|
|
await this.loadRooms(room.apartmentId)
|
|||
|
|
this.form.roomId = roomId
|
|||
|
|
this.form.rent = room.rent || ''
|
|||
|
|
this.currentStep = 2
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载房间详情失败:', error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
selectApartment(id) {
|
|||
|
|
this.selectedApartmentId = id
|
|||
|
|
this.form.roomId = ''
|
|||
|
|
this.loadRooms(id)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
selectRoom(room) {
|
|||
|
|
this.form.roomId = room.id
|
|||
|
|
this.form.rent = room.rent || ''
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
selectPaymentType(type) {
|
|||
|
|
this.form.paymentType = type
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
selectPeriod(period) {
|
|||
|
|
this.leasePeriod = period
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onStartDateChange(e) {
|
|||
|
|
this.form.startDate = e.detail.value
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
updateEndDate() {
|
|||
|
|
if (!this.form.startDate) return
|
|||
|
|
const startDate = new Date(this.form.startDate)
|
|||
|
|
const endDate = new Date(startDate)
|
|||
|
|
|
|||
|
|
switch(this.form.paymentType) {
|
|||
|
|
case 'monthly':
|
|||
|
|
endDate.setMonth(endDate.getMonth() + this.leasePeriod)
|
|||
|
|
break
|
|||
|
|
case 'quarterly':
|
|||
|
|
endDate.setMonth(endDate.getMonth() + (this.leasePeriod * 3))
|
|||
|
|
break
|
|||
|
|
case 'half_year':
|
|||
|
|
endDate.setMonth(endDate.getMonth() + (this.leasePeriod * 6))
|
|||
|
|
break
|
|||
|
|
case 'yearly':
|
|||
|
|
endDate.setFullYear(endDate.getFullYear() + this.leasePeriod)
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.form.endDate = this.formatDate(endDate)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
nextStep() {
|
|||
|
|
if (this.currentStep < 3) {
|
|||
|
|
this.currentStep++
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
prevStep() {
|
|||
|
|
if (this.currentStep > 1) {
|
|||
|
|
this.currentStep--
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async submitForm() {
|
|||
|
|
// 表单验证
|
|||
|
|
if (!this.form.roomId) {
|
|||
|
|
uni.showToast({ title: '请选择房间', icon: 'none' })
|
|||
|
|
this.currentStep = 1
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!this.form.renterName.trim()) {
|
|||
|
|
uni.showToast({ title: '请输入租客姓名', icon: 'none' })
|
|||
|
|
this.currentStep = 2
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!this.form.startDate) {
|
|||
|
|
uni.showToast({ title: '请选择开始日期', icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!this.form.rent) {
|
|||
|
|
uni.showToast({ title: '请输入租金', icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.submitLoading = true
|
|||
|
|
try {
|
|||
|
|
const submitData = {
|
|||
|
|
roomId: this.form.roomId,
|
|||
|
|
renterName: this.form.renterName.trim(),
|
|||
|
|
renterPhone: this.form.renterPhone.trim() || null,
|
|||
|
|
renterIdCard: this.form.renterIdCard.trim() || null,
|
|||
|
|
paymentType: this.form.paymentType,
|
|||
|
|
startDate: this.form.startDate,
|
|||
|
|
endDate: this.form.endDate,
|
|||
|
|
rent: parseFloat(this.form.rent),
|
|||
|
|
deposit: parseFloat(this.form.deposit) || 0,
|
|||
|
|
waterStartReading: this.form.waterStartReading ? parseFloat(this.form.waterStartReading) : null,
|
|||
|
|
electricStartReading: this.form.electricStartReading ? parseFloat(this.form.electricStartReading) : null,
|
|||
|
|
remark: this.form.remark.trim() || null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
await rentalApi.createWithRenter(submitData)
|
|||
|
|
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '办理入住成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.switchTab({ url: '/pages/properties/properties' })
|
|||
|
|
}, 1500)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('办理入住失败:', error)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '办理失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
} finally {
|
|||
|
|
this.submitLoading = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
formatDate(date) {
|
|||
|
|
const d = new Date(date)
|
|||
|
|
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
goBack() {
|
|||
|
|
if (this.currentStep > 1) {
|
|||
|
|
this.prevStep()
|
|||
|
|
} else {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
saveRental() {
|
|||
|
|
if (this.currentStep < 3) {
|
|||
|
|
this.nextStep()
|
|||
|
|
} else {
|
|||
|
|
this.submitForm()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.add-record-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: #F8FAFC;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 导航栏 */
|
|||
|
|
.custom-nav {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-bottom: 2rpx solid #F1F5F9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-content {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 20rpx 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-btn {
|
|||
|
|
width: 72rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-title {
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1E293B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.save-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #409EFF;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 表单内容 */
|
|||
|
|
.form-content {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 步骤指示器 */
|
|||
|
|
.step-indicator {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-num {
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #E4E7ED;
|
|||
|
|
color: #909399;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-item.active .step-num {
|
|||
|
|
background: #409EFF;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-item.completed .step-num {
|
|||
|
|
background: #67C23A;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-text {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-item.active .step-text {
|
|||
|
|
color: #409EFF;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-line {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 2rpx;
|
|||
|
|
background: #E4E7ED;
|
|||
|
|
margin: 0 16rpx;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-line.active {
|
|||
|
|
background: #409EFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 步骤面板 */
|
|||
|
|
.step-panel {
|
|||
|
|
animation: fadeIn 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes fadeIn {
|
|||
|
|
from { opacity: 0; transform: translateX(20rpx); }
|
|||
|
|
to { opacity: 1; transform: translateX(0); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.panel-title {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1E293B;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 公寓列表 */
|
|||
|
|
.apartment-list {
|
|||
|
|
margin-bottom: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.apartment-card {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
border: 2rpx solid transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.apartment-card.active {
|
|||
|
|
border-color: #409EFF;
|
|||
|
|
background: #F0F9FF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.apt-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.apt-name {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1E293B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.apt-address {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #909399;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.apt-stats {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #64748B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.apt-stats .divider {
|
|||
|
|
color: #E4E7ED;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 房间网格 */
|
|||
|
|
.room-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
gap: 16rpx;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.room-item {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
border: 2rpx solid #E4E7ED;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.room-item.active {
|
|||
|
|
border-color: #409EFF;
|
|||
|
|
background: #F0F9FF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.room-num {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #1E293B;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.room-price {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #F56C6C;
|
|||
|
|
margin-bottom: 4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.room-area {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-tip {
|
|||
|
|
grid-column: span 3;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 48rpx;
|
|||
|
|
color: #909399;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 表单卡片 */
|
|||
|
|
.form-card {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-item {
|
|||
|
|
padding: 24rpx 0;
|
|||
|
|
border-bottom: 2rpx solid #F1F5F9;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-item:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-label {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #64748B;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.required {
|
|||
|
|
color: #F56C6C;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-input {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 60rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #1E293B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-suffix {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 36rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-textarea {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 160rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #1E293B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.picker-value {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #1E293B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.static-value {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 单选组 */
|
|||
|
|
.radio-group {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.radio-item {
|
|||
|
|
padding: 16rpx 32rpx;
|
|||
|
|
background: #F5F7FA;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.radio-item.active {
|
|||
|
|
background: #409EFF;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 租期选择 */
|
|||
|
|
.period-options {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.period-item {
|
|||
|
|
padding: 12rpx 24rpx;
|
|||
|
|
background: #F5F7FA;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.period-item.active {
|
|||
|
|
background: #409EFF;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 按钮 */
|
|||
|
|
.btn-next {
|
|||
|
|
background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
padding: 28rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-next[disabled] {
|
|||
|
|
opacity: 0.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-group {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-prev {
|
|||
|
|
flex: 1;
|
|||
|
|
background: #F5F7FA;
|
|||
|
|
color: #606266;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
padding: 28rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-submit {
|
|||
|
|
flex: 2;
|
|||
|
|
background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
padding: 28rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
</style>
|