WindowBird/HomeLease
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

租聘申请界面0.5

Browse Source
This commit is contained in:
minimaxagent1 2025-08-13 14:37:35 +08:00
parent f05ac1d1e5
commit 53ca83e0b5
2 changed files with 105 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
enum/commonEnum.js
View File

@ -11,5 +11,7 @@ export const commonEnum = {
TEMP1: 'https://api.ccttiot.com/image-1754987048988.png', TEMP1: 'https://api.ccttiot.com/image-1754987048988.png',
TEMP2: 'https://api.ccttiot.com/image-1754987114695.png', TEMP2: 'https://api.ccttiot.com/image-1754987114695.png',
TEMP3: 'https://api.ccttiot.com/image-1754987141539.png', TEMP3: 'https://api.ccttiot.com/image-1754987141539.png',
LEASE_BACKGROUND: 'https://api.ccttiot.com/image-1755063111406.png',
FIRE: 'https://api.ccttiot.com/image-1755063906561.png',
} }
export default commonEnum export default commonEnum

171
pages/lease/lease.vue
View File

@ -1,31 +1,17 @@
<template> <template>
<view class="lease-page"> <view class="lease-page">
<!-- 状态栏 -->
<view class="status-bar">
<text class="time">9:41</text>
<view class="status-icons">
<text class="signal">📶</text>
<text class="wifi">📶</text>
<text class="battery">🔋</text>
</view>
</view>
<!-- 头部区域 --> <!-- 头部区域 -->
<view class="header"> <view class="header">
<view class="header-content"> <view class="header-content">
<view class="title-section"> <view class="title-section">
<text class="page-title">租赁申请</text> <text class="page-title">租赁申请</text>
<view class="header-actions">
<text class="action-icon">⋯</text>
<text class="action-icon">🎯</text>
</view>
</view> </view>
<view class="product-info"> <view class="product-info">
<text class="product-name">渝锦汇节能灶燃烧器</text> <text class="product-name">渝锦汇节能灶燃烧器</text>
<text class="product-slogan">租来节能,灶就省钱</text> <text class="product-slogan">租来节能,灶就省钱</text>
</view> </view>
<view class="header-graphic"> <view class="header-graphic">
<view class="flame-graphic"></view> <image :src="commonEnum.FIRE" class="fire"></image>
</view> </view>
</view> </view>
</view> </view>
@ -43,13 +29,18 @@
<!-- 姓名 --> <!-- 姓名 -->
<view class="form-item"> <view class="form-item">
<text class="field-label">姓名</text> <text class="field-label">姓名</text>
<input class="field-input" v-model="formData.name" placeholder="请输入姓名" /> <input v-model="formData.name" class="field-input" placeholder="请输入姓名" />
</view> </view>
<!-- 手机号 --> <!-- 手机号 -->
<view class="form-item"> <view class="form-item">
<text class="field-label">手机号</text> <text class="field-label">手机号</text>
<input class="field-input" v-model="formData.phone" placeholder="请填写手机号" type="number" /> <input
v-model="formData.phone"
class="field-input"
placeholder="请填写手机号"
type="number"
/>
</view> </view>
<!-- 地址 --> <!-- 地址 -->
@ -62,7 +53,7 @@
</view> </view>
<!-- 当前定位 --> <!-- 当前定位 -->
<view class="location-info" v-if="currentLocation"> <view v-if="currentLocation" class="location-info">
<view class="location-details"> <view class="location-details">
<text class="location-title">当前定位:{{ currentLocation.company }}</text> <text class="location-title">当前定位:{{ currentLocation.company }}</text>
<text class="location-address">{{ currentLocation.address }}</text> <text class="location-address">{{ currentLocation.address }}</text>
@ -73,7 +64,7 @@
<!-- 详细位置 --> <!-- 详细位置 -->
<view class="form-item"> <view class="form-item">
<text class="field-label">详细位置</text> <text class="field-label">详细位置</text>
<input class="field-input" v-model="formData.detailAddress" placeholder="例:6栋201室" /> <input v-model="formData.detailAddress" class="field-input" placeholder="例:6栋201室" />
</view> </view>
<!-- 租赁设备 --> <!-- 租赁设备 -->
@ -98,17 +89,15 @@
<!-- 支付区域 --> <!-- 支付区域 -->
<view class="payment-section"> <view class="payment-section">
<button class="pay-button" @click="handlePayment"> <button class="pay-button" @click="handlePayment">立即支付 ¥{{ totalAmount }}</button>
立即支付 ¥{{ totalAmount }}
</button>
<view class="payment-details"> <view class="payment-details">
<view class="details-header" @click="toggleDetails"> <view class="details-header" @click="toggleDetails">
<text class="details-title">明细</text> <text class="details-title">明细</text>
<text class="details-arrow" :class="{ 'expanded': showDetails }">▼</text> <text :class="{ expanded: showDetails }" class="details-arrow">▼</text>
</view> </view>
<view class="details-content" v-if="showDetails"> <view v-if="showDetails" class="details-content">
<view class="detail-item"> <view class="detail-item">
<text class="detail-label">租金</text> <text class="detail-label">租金</text>
<text class="detail-value">¥{{ totalAmount }}</text> <text class="detail-value">¥{{ totalAmount }}</text>
@ -123,8 +112,15 @@
</template> </template>
<script> <script>
import commonEnum from '../../enum/commonEnum'
export default { export default {
name: 'LeasePage', name: 'LeasePage',
computed: {
commonEnum() {
return commonEnum
},
},
data() { data() {
return { return {
formData: { formData: {
@ -133,14 +129,14 @@ export default {
address: '', address: '',
detailAddress: '', detailAddress: '',
equipment: '', equipment: '',
period: '1年' period: '1年',
}, },
currentLocation: { currentLocation: {
company: '福鼎创特物联科技有限公司', company: '福鼎创特物联科技有限公司',
address: '福建宁德市福鼎市' address: '福建宁德市福鼎市',
}, },
showDetails: false, showDetails: false,
totalAmount: '100.10' totalAmount: '100.10',
} }
}, },
methods: { methods: {
@ -148,34 +144,34 @@ export default {
// 选择地址逻辑 // 选择地址逻辑
uni.showToast({ uni.showToast({
title: '选择地址功能', title: '选择地址功能',
icon: 'none' icon: 'none',
}) })
}, },
useCurrentLocation() { useCurrentLocation() {
this.formData.address = this.currentLocation.company + ' ' + this.currentLocation.address this.formData.address = this.currentLocation.company + ' ' + this.currentLocation.address
uni.showToast({ uni.showToast({
title: '已使用当前定位', title: '已使用当前定位',
icon: 'success' icon: 'success',
}) })
}, },
selectEquipment() { selectEquipment() {
// 选择设备逻辑 // 选择设备逻辑
uni.showActionSheet({ uni.showActionSheet({
itemList: ['节能灶', '燃烧器', '燃气灶', '电磁炉'], itemList: ['节能灶', '燃烧器', '燃气灶', '电磁炉'],
success: (res) => { success: res => {
const equipmentList = ['节能灶', '燃烧器', '燃气灶', '电磁炉'] const equipmentList = ['节能灶', '燃烧器', '燃气灶', '电磁炉']
this.formData.equipment = equipmentList[res.tapIndex] this.formData.equipment = equipmentList[res.tapIndex]
} },
}) })
}, },
selectPeriod() { selectPeriod() {
// 选择租赁周期逻辑 // 选择租赁周期逻辑
uni.showActionSheet({ uni.showActionSheet({
itemList: ['1个月', '3个月', '6个月', '1年', '2年'], itemList: ['1个月', '3个月', '6个月', '1年', '2年'],
success: (res) => { success: res => {
const periodList = ['1个月', '3个月', '6个月', '1年', '2年'] const periodList = ['1个月', '3个月', '6个月', '1年', '2年']
this.formData.period = periodList[res.tapIndex] this.formData.period = periodList[res.tapIndex]
} },
}) })
}, },
toggleDetails() { toggleDetails() {
@ -186,139 +182,110 @@ export default {
uni.showModal({ uni.showModal({
title: '确认支付', title: '确认支付',
content: `确认支付 ¥${this.totalAmount} 吗？`, content: `确认支付 ¥${this.totalAmount} 吗？`,
success: (res) => { success: res => {
if (res.confirm) { if (res.confirm) {
uni.showToast({ uni.showToast({
title: '支付成功', title: '支付成功',
icon: 'success' icon: 'success',
}) })
} }
} },
}) })
}, },
// 页面跳转现在由系统tabBar处理 // 页面跳转现在由系统tabBar处理
goToHome() { goToHome() {
uni.switchTab({ uni.switchTab({
url: '/pages/index/index' url: '/pages/index/index',
}) })
}, },
goToProfile() { goToProfile() {
uni.switchTab({ uni.switchTab({
url: '/pages/profile/profile' url: '/pages/profile/profile',
}) })
} },
} },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.lease-page { .lease-page {
min-height: 100vh;
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
position: relative; position: relative;
} }
// 状态栏
.status-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 40rpx;
color: #fff;
font-size: 28rpx;
.status-icons {
display: flex;
gap: 10rpx;
}
}
// 头部区域 // 头部区域
.header { .header {
padding: 40rpx; padding: 80rpx 14rpx 40rpx 40rpx;
color: #fff; //border: #120d0d solid 2rpx;
background: linear-gradient(to bottom, #ffdecb 0, #f7ede6 600rpx);
.header-content { .header-content {
position: relative; position: relative;
} }
.title-section { .title-section {
padding-top: 20rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 40rpx; margin-bottom: 40rpx;
.page-title { .page-title {
font-size: 36rpx; font-size: 36rpx;
font-weight: bold; font-weight: 400;
}
.header-actions {
display: flex;
gap: 20rpx;
.action-icon {
font-size: 32rpx;
width: 60rpx;
height: 60rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
} }
} }
.product-info { .product-info {
margin-bottom: 40rpx; margin-bottom: 40rpx;
//border: red solid 2rpx;
.product-name { .product-name {
display: block; display: block;
font-size: 48rpx; font-size: 48rpx;
font-weight: bold; font-weight: bold;
margin-bottom: 20rpx; margin-bottom: 20rpx;
color: #722b03;
} }
.product-slogan { .product-slogan {
font-size: 28rpx; font-size: 28rpx;
color: #ff6b35; color: #f15a04;
} }
} }
.header-graphic { .header-graphic {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 58rpx;
//border: red solid 2rpx;
.flame-graphic { .fire {
width: 120rpx; width: 252rpx;
height: 120rpx; height: 224rpx;
background: radial-gradient(circle, #ff6b35 0%, #ff9a9e 100%);
border-radius: 50%;
box-shadow: 0 0 40rpx rgba(255, 107, 53, 0.6);
animation: pulse 2s infinite;
} }
} }
} }
// 主要内容区域 // 主要内容区域
.main-content { .main-content {
background: #fff; background: #ffffff;
border-radius: 40rpx 40rpx 0 0; border-radius: 40rpx 40rpx 0 0;
margin-top: -20rpx; margin: 0 30rpx;
padding: 40rpx; padding: 40rpx;
min-height: 60vh; min-height: 60vh;
border: #120d0d solid 2rpx;
} }
// 表单区域 // 表单区域
.form-section { .form-section {
margin-bottom: 60rpx; margin-bottom: 60rpx;
border: #0c1387 solid 2rpx;
.section-header { .section-header {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 40rpx; margin-bottom: 40rpx;
border: red solid 2rpx;
.section-indicator { .section-indicator {
width: 8rpx; width: 8rpx;
@ -339,23 +306,27 @@ export default {
.form-fields { .form-fields {
.form-item { .form-item {
margin-bottom: 40rpx; margin-bottom: 40rpx;
display: flex;
align-items: center;
border-bottom: 1rpx solid #d8d8d8;
.field-label { .field-label {
display: block; display: block;
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
margin-bottom: 20rpx; font-weight: 400;
font-weight: 500; flex: 1;
border: 2rpx solid #d81313;
} }
.field-input { .field-input {
border: 2rpx solid #d81313;
flex: 4;
width: 100%; width: 100%;
height: 80rpx; height: 80rpx;
border: 2rpx solid #e0e0e0;
border-radius: 12rpx; padding: 0 76rpx;
padding: 0 20rpx;
font-size: 28rpx; font-size: 28rpx;
background: #f8f9fa;
&:focus { &:focus {
border-color: #ff9a9e; border-color: #ff9a9e;
@ -367,14 +338,12 @@ export default {
// 地址选择器 // 地址选择器
.address-selector { .address-selector {
flex: 4;
padding-left: 76rpx;
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
height: 80rpx; height: 80rpx;
border: 2rpx solid #e0e0e0; border: 2rpx solid #d81313;
border-radius: 12rpx;
padding: 0 20rpx;
background: #f8f9fa;
.address-text { .address-text {
font-size: 28rpx; font-size: 28rpx;
@ -440,7 +409,7 @@ export default {
.arrow-icon { .arrow-icon {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #989;
} }
} }
@ -449,7 +418,7 @@ export default {
.pay-button { .pay-button {
width: 100%; width: 100%;
height: 100rpx; height: 100rpx;
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); background: #f15a04;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 50rpx; border-radius: 50rpx;