租聘申请界面0.5
This commit is contained in:
minimaxagent1
parent
f05ac1d1e5
commit
53ca83e0b5
|
|
@ -11,5 +11,7 @@ export const commonEnum = {
|
|||
TEMP1: 'https://api.ccttiot.com/image-1754987048988.png',
|
||||
TEMP2: 'https://api.ccttiot.com/image-1754987114695.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
|
||||
|
|
|
|||
|
|
@ -1,31 +1,17 @@
|
|||
<template>
|
||||
<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-content">
|
||||
<view class="title-section">
|
||||
<text class="page-title">租赁申请</text>
|
||||
<view class="header-actions">
|
||||
<text class="action-icon">⋯</text>
|
||||
<text class="action-icon">🎯</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="product-info">
|
||||
<text class="product-name">渝锦汇节能灶燃烧器</text>
|
||||
<text class="product-slogan">租来节能,灶就省钱</text>
|
||||
</view>
|
||||
<view class="header-graphic">
|
||||
<view class="flame-graphic"></view>
|
||||
<image :src="commonEnum.FIRE" class="fire"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -43,13 +29,18 @@
|
|||
<!-- 姓名 -->
|
||||
<view class="form-item">
|
||||
<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 class="form-item">
|
||||
<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>
|
||||
|
||||
<!-- 地址 -->
|
||||
|
|
@ -62,7 +53,7 @@
|
|||
</view>
|
||||
|
||||
<!-- 当前定位 -->
|
||||
<view class="location-info" v-if="currentLocation">
|
||||
<view v-if="currentLocation" class="location-info">
|
||||
<view class="location-details">
|
||||
<text class="location-title">当前定位:{{ currentLocation.company }}</text>
|
||||
<text class="location-address">{{ currentLocation.address }}</text>
|
||||
|
|
@ -73,7 +64,7 @@
|
|||
<!-- 详细位置 -->
|
||||
<view class="form-item">
|
||||
<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>
|
||||
|
||||
<!-- 租赁设备 -->
|
||||
|
|
@ -98,17 +89,15 @@
|
|||
|
||||
<!-- 支付区域 -->
|
||||
<view class="payment-section">
|
||||
<button class="pay-button" @click="handlePayment">
|
||||
立即支付 ¥{{ totalAmount }}
|
||||
</button>
|
||||
|
||||
<button class="pay-button" @click="handlePayment">立即支付 ¥{{ totalAmount }}</button>
|
||||
|
||||
<view class="payment-details">
|
||||
<view class="details-header" @click="toggleDetails">
|
||||
<text class="details-title">明细</text>
|
||||
<text class="details-arrow" :class="{ 'expanded': showDetails }">▼</text>
|
||||
<text :class="{ expanded: showDetails }" class="details-arrow">▼</text>
|
||||
</view>
|
||||
|
||||
<view class="details-content" v-if="showDetails">
|
||||
|
||||
<view v-if="showDetails" class="details-content">
|
||||
<view class="detail-item">
|
||||
<text class="detail-label">租金</text>
|
||||
<text class="detail-value">¥{{ totalAmount }}</text>
|
||||
|
|
@ -123,8 +112,15 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import commonEnum from '../../enum/commonEnum'
|
||||
|
||||
export default {
|
||||
name: 'LeasePage',
|
||||
computed: {
|
||||
commonEnum() {
|
||||
return commonEnum
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
|
|
@ -133,14 +129,14 @@ export default {
|
|||
address: '',
|
||||
detailAddress: '',
|
||||
equipment: '',
|
||||
period: '1年'
|
||||
period: '1年',
|
||||
},
|
||||
currentLocation: {
|
||||
company: '福鼎创特物联科技有限公司',
|
||||
address: '福建宁德市福鼎市'
|
||||
address: '福建宁德市福鼎市',
|
||||
},
|
||||
showDetails: false,
|
||||
totalAmount: '100.10'
|
||||
totalAmount: '100.10',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -148,34 +144,34 @@ export default {
|
|||
// 选择地址逻辑
|
||||
uni.showToast({
|
||||
title: '选择地址功能',
|
||||
icon: 'none'
|
||||
icon: 'none',
|
||||
})
|
||||
},
|
||||
useCurrentLocation() {
|
||||
this.formData.address = this.currentLocation.company + ' ' + this.currentLocation.address
|
||||
uni.showToast({
|
||||
title: '已使用当前定位',
|
||||
icon: 'success'
|
||||
icon: 'success',
|
||||
})
|
||||
},
|
||||
selectEquipment() {
|
||||
// 选择设备逻辑
|
||||
uni.showActionSheet({
|
||||
itemList: ['节能灶', '燃烧器', '燃气灶', '电磁炉'],
|
||||
success: (res) => {
|
||||
success: res => {
|
||||
const equipmentList = ['节能灶', '燃烧器', '燃气灶', '电磁炉']
|
||||
this.formData.equipment = equipmentList[res.tapIndex]
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
selectPeriod() {
|
||||
// 选择租赁周期逻辑
|
||||
uni.showActionSheet({
|
||||
itemList: ['1个月', '3个月', '6个月', '1年', '2年'],
|
||||
success: (res) => {
|
||||
success: res => {
|
||||
const periodList = ['1个月', '3个月', '6个月', '1年', '2年']
|
||||
this.formData.period = periodList[res.tapIndex]
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
toggleDetails() {
|
||||
|
|
@ -186,140 +182,111 @@ export default {
|
|||
uni.showModal({
|
||||
title: '确认支付',
|
||||
content: `确认支付 ¥${this.totalAmount} 吗？`,
|
||||
success: (res) => {
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({
|
||||
title: '支付成功',
|
||||
icon: 'success'
|
||||
icon: 'success',
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
// 页面跳转现在由系统tabBar处理
|
||||
goToHome() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
url: '/pages/index/index',
|
||||
})
|
||||
},
|
||||
goToProfile() {
|
||||
uni.switchTab({
|
||||
url: '/pages/profile/profile'
|
||||
url: '/pages/profile/profile',
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lease-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
|
||||
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 {
|
||||
padding: 40rpx;
|
||||
color: #fff;
|
||||
|
||||
padding: 80rpx 14rpx 40rpx 40rpx;
|
||||
//border: #120d0d solid 2rpx;
|
||||
background: linear-gradient(to bottom, #ffdecb 0, #f7ede6 600rpx);
|
||||
|
||||
.header-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.title-section {
|
||||
padding-top: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
|
||||
.page-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.product-info {
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
//border: red solid 2rpx;
|
||||
|
||||
.product-name {
|
||||
display: block;
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
color: #722b03;
|
||||
}
|
||||
|
||||
|
||||
.product-slogan {
|
||||
font-size: 28rpx;
|
||||
color: #ff6b35;
|
||||
color: #f15a04;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.header-graphic {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
.flame-graphic {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
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;
|
||||
top: 58rpx;
|
||||
//border: red solid 2rpx;
|
||||
|
||||
.fire {
|
||||
width: 252rpx;
|
||||
height: 224rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 主要内容区域
|
||||
.main-content {
|
||||
background: #fff;
|
||||
background: #ffffff;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
margin-top: -20rpx;
|
||||
margin: 0 30rpx;
|
||||
padding: 40rpx;
|
||||
min-height: 60vh;
|
||||
border: #120d0d solid 2rpx;
|
||||
}
|
||||
|
||||
// 表单区域
|
||||
.form-section {
|
||||
margin-bottom: 60rpx;
|
||||
|
||||
border: #0c1387 solid 2rpx;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
border: red solid 2rpx;
|
||||
|
||||
.section-indicator {
|
||||
width: 8rpx;
|
||||
height: 40rpx;
|
||||
|
|
@ -327,7 +294,7 @@ export default {
|
|||
border-radius: 4rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
|
|
@ -339,24 +306,28 @@ export default {
|
|||
.form-fields {
|
||||
.form-item {
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #d8d8d8;
|
||||
|
||||
.field-label {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
flex: 1;
|
||||
border: 2rpx solid #d81313;
|
||||
}
|
||||
|
||||
|
||||
.field-input {
|
||||
border: 2rpx solid #d81313;
|
||||
flex: 4;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 20rpx;
|
||||
|
||||
padding: 0 76rpx;
|
||||
font-size: 28rpx;
|
||||
background: #f8f9fa;
|
||||
|
||||
|
||||
&:focus {
|
||||
border-color: #ff9a9e;
|
||||
background: #fff;
|
||||
|
|
@ -367,20 +338,18 @@ export default {
|
|||
|
||||
// 地址选择器
|
||||
.address-selector {
|
||||
flex: 4;
|
||||
padding-left: 76rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 80rpx;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 20rpx;
|
||||
background: #f8f9fa;
|
||||
|
||||
border: 2rpx solid #d81313;
|
||||
|
||||
.address-text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
.map-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
|
@ -395,23 +364,23 @@ export default {
|
|||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
|
||||
.location-details {
|
||||
flex: 1;
|
||||
|
||||
|
||||
.location-title {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
|
||||
.location-address {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.use-location-btn {
|
||||
background: #ff9a9e;
|
||||
color: #fff;
|
||||
|
|
@ -432,15 +401,15 @@ export default {
|
|||
border-radius: 12rpx;
|
||||
padding: 0 20rpx;
|
||||
background: #f8f9fa;
|
||||
|
||||
|
||||
.selector-text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
color: #989;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -449,7 +418,7 @@ export default {
|
|||
.pay-button {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
|
||||
background: #f15a04;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 50rpx;
|
||||
|
|
@ -458,7 +427,7 @@ export default {
|
|||
margin-bottom: 40rpx;
|
||||
box-shadow: 0 10rpx 30rpx rgba(255, 154, 158, 0.3);
|
||||
}
|
||||
|
||||
|
||||
.payment-details {
|
||||
.details-header {
|
||||
display: flex;
|
||||
|
|
@ -466,37 +435,37 @@ export default {
|
|||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
|
||||
|
||||
.details-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
.details-arrow {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
transition: transform 0.3s;
|
||||
|
||||
|
||||
&.expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.details-content {
|
||||
padding: 20rpx 0;
|
||||
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
|
||||
.detail-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
.detail-value {
|
||||
font-size: 28rpx;
|
||||
color: #ff4757;
|
||||
|
|
@ -524,4 +493,4 @@ export default {
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user