agent0.2
添加返回按钮
This commit is contained in:
WindowBird
parent
986be3f4de
commit
d838a14669
91
components/custom-nav-bar3/custom-nav-bar3.vue
Normal file
91
components/custom-nav-bar3/custom-nav-bar3.vue
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<view class="layout">
|
||||
<view class="navbar">
|
||||
<view :style="{ height: getStatusBarHeight() + 'px' }" class="statusBar"></view>
|
||||
<view
|
||||
:style="{ height: getTitleBarHeight() + 'px', marginLeft: getLeftIconLeft() + 'px' }"
|
||||
class="titleBar"
|
||||
>
|
||||
<view class="search">
|
||||
<image :src="commonEnum.BACK" class="left-icon" @click="goBack"></image>
|
||||
</view>
|
||||
<view class="title">{{ title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
getStatusBarHeight,
|
||||
getTitleBarHeight,
|
||||
getNavBarHeight,
|
||||
getLeftIconLeft,
|
||||
} from '@/utils/system.js'
|
||||
|
||||
import commonEnum from '../../enum/commonEnum'
|
||||
import { navigateBack } from '../../utils/router'
|
||||
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '壁纸',
|
||||
},
|
||||
})
|
||||
|
||||
function goBack() {
|
||||
navigateBack(1)
|
||||
console.log('666')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout {
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
|
||||
.statusBar {
|
||||
}
|
||||
|
||||
.titleBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: #3d3d3d;
|
||||
}
|
||||
|
||||
.search {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 220rpx;
|
||||
height: 50rpx;
|
||||
margin-left: 10rpx;
|
||||
color: #3d3d3d;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
//background: black;
|
||||
|
||||
.left-icon {
|
||||
margin-left: 60rpx;
|
||||
width: 18rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fill {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -24,5 +24,6 @@ export const commonEnum = {
|
|||
GIFT: 'https://api.ccttiot.com/image-1755071830648.png',
|
||||
//业务代理
|
||||
AGENT: 'https://api.ccttiot.com/image-1755327024599.png',
|
||||
BACK: 'https://api.ccttiot.com/image-1755328282735.png', //返回
|
||||
}
|
||||
export default commonEnum
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<view class="lease-page">
|
||||
<!-- 头部区域 -->
|
||||
<custom-nav-bar2 title=""></custom-nav-bar2>
|
||||
<custom-nav-bar3 title=""></custom-nav-bar3>
|
||||
<view class="header">
|
||||
<image :src="commonEnum.AGENT" class="agent-background" mode="aspectFill"></image>
|
||||
</view>
|
||||
|
|
@ -9,111 +9,7 @@
|
|||
<!-- 主要内容区域 -->
|
||||
<view class="main-content">
|
||||
<!-- 租赁信息表单 -->
|
||||
<view class="form-section">
|
||||
<view class="section-header">
|
||||
<view class="section-indicator"></view>
|
||||
<text class="section-title">填写租赁信息</text>
|
||||
</view>
|
||||
|
||||
<view class="form-fields">
|
||||
<!-- 姓名 -->
|
||||
<view class="form-item">
|
||||
<text class="field-label">姓名</text>
|
||||
<input v-model="formData.name" class="field-input" placeholder="请输入姓名" />
|
||||
</view>
|
||||
|
||||
<!-- 手机号 -->
|
||||
<view class="form-item">
|
||||
<text class="field-label">手机号</text>
|
||||
<input
|
||||
v-model="formData.phone"
|
||||
class="field-input"
|
||||
placeholder="请填写手机号"
|
||||
type="number"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 地址 -->
|
||||
<view class="form-item address-form-item">
|
||||
<text class="field-label">地址</text>
|
||||
<view class="address-selector" @click="selectAddress">
|
||||
<text class="address-text">{{ formData.address || '选择收货地址' }}</text>
|
||||
<view class="map-icon-wrapper">
|
||||
<text class="map-icon">📍</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 当前定位 -->
|
||||
<view class="location-suggestion">
|
||||
<view v-if="currentLocation" class="location-card">
|
||||
<view class="location-content">
|
||||
<view class="location-header">
|
||||
<text class="location-title">当前定位</text>
|
||||
<text class="location-company">{{ currentLocation.company }}</text>
|
||||
</view>
|
||||
<text class="location-address">{{ currentLocation.address }}</text>
|
||||
</view>
|
||||
<button class="use-location-btn" @click="useCurrentLocation">使用</button>
|
||||
</view>
|
||||
<view v-else class="location-card">
|
||||
<view class="location-content">
|
||||
<view class="location-header">
|
||||
<text class="location-title">获取位置</text>
|
||||
<text class="location-company">点击获取当前位置</text>
|
||||
</view>
|
||||
<text class="location-address">需要定位权限</text>
|
||||
</view>
|
||||
<button class="get-location-btn" @click="getCurrentLocation">获取</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 详细位置 -->
|
||||
<view class="form-item">
|
||||
<text class="field-label">详细位置</text>
|
||||
<input v-model="formData.detailAddress" class="field-input" placeholder="例:6栋201室" />
|
||||
</view>
|
||||
|
||||
<!-- 租赁设备 -->
|
||||
<view class="form-item">
|
||||
<text class="field-label">租赁设备</text>
|
||||
<view class="selector" @click="selectEquipment">
|
||||
<text class="selector-text">{{ formData.equipment || '选择设备类型' }}</text>
|
||||
<text class="arrow-icon">></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 租赁周期 -->
|
||||
<view class="form-item">
|
||||
<text class="field-label">租赁周期</text>
|
||||
<view class="selector" @click="selectPeriod">
|
||||
<text class="selector-text">{{ formData.period || '1年' }}</text>
|
||||
<text class="arrow-icon">></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付区域 -->
|
||||
<view class="payment-section">
|
||||
<button class="pay-button" @click="handlePayment">立即支付 ¥{{ totalAmount }}</button>
|
||||
|
||||
<view class="payment-details">
|
||||
<view class="details-header" @click="toggleDetails">
|
||||
<text class="details-title">明细</text>
|
||||
<view :class="{ expanded: showDetails }" class="arrow-wrapper">
|
||||
<image :src="commonEnum.DOWN_ARROW" class="details-arrow"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="showDetails" class="details-content">
|
||||
<view class="detail-item">
|
||||
<text class="detail-label">租金</text>
|
||||
<text class="detail-value">¥{{ totalAmount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-section"></view>
|
||||
</view>
|
||||
|
||||
<!-- 底部导航已由系统tabBar处理 -->
|
||||
|
|
@ -306,7 +202,7 @@ export default {
|
|||
// 主要内容区域
|
||||
.main-content {
|
||||
position: relative;
|
||||
top: -220rpx;
|
||||
top: -34rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
margin: 0 30rpx;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user