RentWeAppFront/pages/form/leaseCancel.vue

<template>
  <view class="lease-cancel-page">
    <!-- 页面标题 -->
     <customNavbar title="退租申请" />

    <!-- 表单内容 -->
    <view class="form-section">
      <!-- 关联合同 -->
      <view class="form-item">
        <text class="label">关联合同</text>
        <picker :range="contracts" range-key="name" @change="onContractChange">
          <view class="picker-value">
            {{ selectedContract ? selectedContract.name : '请选择合同' }}
          </view>
        </picker>
      </view>

      <!-- 退租日期 -->
      <view class="form-item">
        <text class="label">退租日期</text>
        <picker mode="date" @change="onDateChange">
          <view class="picker-value">
            {{ cancelDate || '请选择退租日期' }}
          </view>
        </picker>
      </view>

      <!-- 退租原因 -->
      <view class="form-item">
        <text class="label">退租原因</text>
        <textarea
          v-model="reason"
          placeholder="请输入退租原因"
          class="textarea"
        />
      </view>

      <!-- 银行信息 -->
      <view class="section-title">银行账户信息</view>

      <view class="form-item">
        <text class="label">开户名</text>
        <input
          v-model="bankAccount.name"
          placeholder="请输入开户名"
          class="input"
        />
      </view>

      <view class="form-item">
        <text class="label">银行名称</text>
        <input
          v-model="bankAccount.bank"
          placeholder="请输入银行名称"
          class="input"
        />
      </view>

      <view class="form-item">
        <text class="label">银行卡号</text>
        <input
          v-model="bankAccount.number"
          placeholder="请输入银行卡号"
          class="input"
        />
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="bottom-bar">
      <button class="submit-btn" @click="submitForm">提交申请</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contracts: [
        { id: 1, name: '资产A - 租赁合同001' },
        { id: 2, name: '资产B - 租赁合同002' },
      ],
      selectedContract: null,
      cancelDate: '',
      reason: '',
      bankAccount: {
        name: '',
        bank: '',
        number: '',
      },
    };
  },
  methods: {
    onContractChange(e) {
      const index = e.detail.value;
      this.selectedContract = this.contracts[index];
    },
    onDateChange(e) {
      this.cancelDate = e.detail.value;
    },
    submitForm() {
      if (!this.selectedContract || !this.cancelDate || !this.reason) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none',
        });
        return;
      }

      // 模拟提交
      const data = {
        contractId: this.selectedContract.id,
        cancelDate: this.cancelDate,
        reason: this.reason,
        bankAccount: this.bankAccount,
      };

      console.log('提交退租申请：', data);
      uni.showToast({
        title: '提交成功',
        icon: 'success',
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1200);
    },
  },
};
</script>

<style lang="scss" scoped>
.lease-cancel-page {
  min-height: 100vh;
  background-color: #f6f8fa;
  display: flex;
  flex-direction: column;
  padding-top: 120rpx;
  padding-bottom: 120rpx;
}

.page-header {
  padding: 40rpx 30rpx 20rpx;
  background-color: #fff;
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.form-section {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 30rpx;
  border-radius: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #EA4D3E;
  margin-top: 40rpx;
  margin-bottom: 20rpx;
}

.form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 30rpx;

  .label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 12rpx;
  }

  .picker-value,
  .input {
    background-color: #f7f8fa;
    border-radius: 12rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #333;
  }

  .textarea {
    background-color: #f7f8fa;
    border-radius: 12rpx;
    padding: 20rpx;
    font-size: 28rpx;
    min-height: 140rpx;
    color: #333;
	width: 94%;
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 40rpx;
  box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.08);
  z-index: 999;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(90deg, #FF6F63 0%, #FB392A 100%);
  border-radius: 44rpx;
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
}
</style>