init

pages/form/leaseCancel.vue

@@ -0,0 +1,217 @@
+<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: 175rpx;
+  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: #007aff;
+  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;
+  }
+}
+
+.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);
+}
+
+.submit-btn {
+  width: 100%;
+  height: 88rpx;
+  background: linear-gradient(90deg, #007aff, #00aaff);
+  border-radius: 44rpx;
+  color: #fff;
+  font-size: 32rpx;
+  font-weight: bold;
+  letter-spacing: 2rpx;
+}
+</style>