Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
20237374 1 parent 23e91841

refactor(页面布局): 优化多个页面的导航栏和样式 

移除重复的顶部导航栏代码，改用微信原生API设置标题
重构myCar页面布局，使用nut-row和nut-col实现响应式设计
调整样式间距和加载状态显示
Inline Side-by-side
Showing 4 changed files with 73 additions and 67 deletions
......@@ -3,10 +3,28 @@
background-color: #f5f5f5;
padding-bottom: 120px;
}
.car-list {
padding: 20px;
}
.loading-container {
display: flex;
justify-content: center;
align-items: center;
.loading-text {
font-size: 28rpx;
color: #999;
}
}
.no-more-container {
display: flex;
justify-content: center;
align-items: center;
padding: 32rpx 0;
text {
font-size: 24rpx;
color: #ccc;
}
}
/* 空状态样式 */
.empty-state {
......@@ -78,10 +96,9 @@
/* 车辆图片 */
.car-image-container {
width: 100%;
height: 200px;
height: 150px;
border-radius: 12px;
overflow: hidden;
margin-bottom: 20px;
}
.car-image {
......@@ -92,14 +109,14 @@
/* 车辆信息 */
.car-info {
margin-bottom: 20px;
padding-left: 12px;
}
.car-title {
font-size: 36px;
font-weight: bold;
color: #333;
margin-bottom: 12px;
margin-bottom: 0.5rem;
}
.car-details {
......@@ -204,7 +221,7 @@
}
.action-buttons {
gap: 8px;
gap: 15px;
}
.status-badge {
......@@ -216,4 +233,4 @@
width: 14px;
height: 14px;
}
}
\ No newline at end of file
}
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-03 14:06:14
* @LastEditTime: 2025-07-03 14:32:00
* @FilePath: /jgdl/src/pages/myCar/index.vue
* @Description: 文件描述
-->
......@@ -11,7 +11,6 @@
<view class="flex-1">
<!-- 滚动列表 -->
<scroll-view
class="car-list"
:style="scrollStyle"
:scroll-y="true"
@scrolltolower="loadMore"
......@@ -27,51 +26,58 @@
</view>
<!-- 车辆卡片列表 -->
<view v-else class="space-y-4">
<view v-else class="space-y-4 ml-4 mr-4 mt-4">
<view v-for="car in carList" :key="car.id" class="car-card">
<!-- 状态标识 -->
<view class="status-badges">
<view v-if="car.isAuthenticated" class="status-badge verified">
<Check class="status-icon" />
<text>已认证</text>
</view>
<view v-if="car.isOffline" class="status-badge offline">
<Close class="status-icon" />
<text>已下架</text>
</view>
</view>
<!-- 车辆图片 -->
<view class="car-image-container">
<image :src="car.image" class="car-image" mode="aspectFill" />
</view>
<!-- 车辆信息 -->
<view class="car-info">
<view class="car-title">{{ car.brand }} {{ car.model }}</view>
<view class="car-details">
<text class="detail-item">{{ car.year }}</text>
<text class="detail-item">{{ car.condition }}</text>
<text class="detail-item">{{ car.mileage }}公里</text>
</view>
<view class="car-description">{{ car.description }}</view>
<view class="price-section">
<view class="current-price">¥{{ car.price }}</view>
<view class="market-price">市场价 ¥{{ car.marketPrice }}</view>
</view>
</view>
<!-- 使用 nut-row 和 nut-col 布局 -->
<nut-row :gutter="10">
<!-- 左侧：车辆图片 -->
<nut-col :span="8">
<view class="car-image-container">
<image :src="car.image" class="car-image" mode="aspectFill" />
</view>
</nut-col>
<!-- 右侧：车辆信息 -->
<nut-col :span="16">
<view class="car-info">
<view class="car-title">{{ car.brand }} {{ car.model }}</view>
<view class="car-details">
<text class="detail-item">{{ car.year }}</text>
<text class="detail-item">{{ car.condition }}</text>
<text class="detail-item">{{ car.mileage }}公里</text>
</view>
<view class="car-description">{{ car.description }}</view>
<view class="price-section">
<view class="current-price">¥{{ car.price }}</view>
<view class="market-price">市场价 ¥{{ car.marketPrice }}</view>
</view>
</view>
</nut-col>
</nut-row>
<!-- 操作按钮 -->
<view class="action-buttons">
<nut-button size="small" type="default" @click="editCar(car.id)">编辑</nut-button>
<view class="action-buttons mt-4">
<nut-button size="small" type="default" shape="square" @click="editCar(car.id)">编辑</nut-button>
<nut-button
size="small"
shape="square"
:type="car.isOffline ? 'success' : 'warning'"
@click="toggleOffline(car)"
>
{{ car.isOffline ? '上架' : '下架' }}
</nut-button>
<nut-button
shape="square"
v-if="!car.isAuthenticated"
size="small"
type="primary"
......@@ -108,12 +114,9 @@
<script setup>
import { ref, computed, onMounted } from 'vue'
import { Check, Close } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'
import './index.less'
// 添加样式定义
/**
* 滚动样式 - 考虑header和TabBar的高度
*/
......
<template>
<view class="sell-page">
<!-- 顶部导航 -->
<nut-config-provider :theme-vars="themeVars">
<nut-sticky top="0">
<nut-navbar :title="isEditMode ? '编辑车源' : '发布车源'" left-show @on-click-back="goBack">
<template #left-show>
<RectLeft color="white" />
</template>
</nut-navbar>
</nut-sticky>
</nut-config-provider>
<!-- 表单内容 -->
<view class="form-container">
<!-- 车辆照片上传 -->
......@@ -793,10 +782,10 @@ const loadCarData = async () => {
try {
Taro.showLoading({ title: '加载中...' })
// TODO: 调用真实API获取车辆数据
// const carData = await getCarById(carId.value)
// 模拟API响应数据
const mockCarData = {
school: '上海理工大学',
......@@ -821,7 +810,7 @@ const loadCarData = async () => {
other: 'https://picsum.photos/300/200?random=4'
}
}
// 填充表单数据
Object.assign(formData, {
school: mockCarData.school,
......@@ -840,10 +829,10 @@ const loadCarData = async () => {
marketPrice: mockCarData.marketPrice,
description: mockCarData.description
})
// 填充图片数据
Object.assign(uploadedImages, mockCarData.images)
Taro.hideLoading()
} catch (error) {
console.error('加载车辆数据失败:', error)
......@@ -860,5 +849,9 @@ onMounted(() => {
if (isEditMode.value) {
loadCarData()
}
// 动态修改标题
wx.setNavigationBarTitle({
title: isEditMode.value ? '编辑车源' : '发布车源'
});
})
</script>
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-03 14:03:37
* @LastEditTime: 2025-07-03 14:27:41
* @FilePath: /jgdl/src/pages/setAuthCar/index.vue
* @Description: 申请认证
-->
<template>
<view class="auth-car-page">
<!-- 顶部导航 -->
<nut-config-provider :theme-vars="themeVars">
<nut-sticky top="0">
<nut-navbar :title="isEditMode ? '编辑认证' : '申请认证'" left-show @on-click-back="goBack">
<template #left-show>
<RectLeft color="white" />
</template>
</nut-navbar>
</nut-sticky>
</nut-config-provider>
<!-- 表单内容 -->
<view class="form-container">
<!-- 车辆照片上传 -->
......@@ -488,6 +477,10 @@ onMounted(() => {
if (isEditMode.value) {
loadAuthData()
}
// 动态修改标题
wx.setNavigationBarTitle({
title: isEditMode.value ? '编辑认证' : '发布认证'
});
})
</script>
......