Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
bf7a6880 1 parent 16facecc

feat(认证): 添加车辆认证页面及功能 

实现车辆认证页面，包括图片上传、表单填写和提交功能
将样式从vue文件拆分到单独的less文件
更新路由配置添加认证页面
修复认证跳转链接错误
Expand all
Inline Side-by-side
Showing 8 changed files with 628 additions and 312 deletions
/*
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-02 17:15:42
* @LastEditTime: 2025-07-02 18:16:09
* @FilePath: /jgdl/src/app.config.js
* @Description: 文件描述
*/
......@@ -15,6 +15,7 @@ export default {
'pages/editProfile/index',
'pages/register/index',
'pages/authCar/index',
'pages/setAuthCar/index',
'pages/auth/index',
],
subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-02 17:36:43
* @LastEditTime: 2025-07-02 18:15:19
* @FilePath: /jgdl/src/pages/authCar/index.vue
* @Description: 认证车源
-->
......@@ -107,6 +107,7 @@
</template>
<script setup>
import Taro from '@tarojs/taro'
import { ref, computed, onMounted } from 'vue'
import { Check, RectRight, Addfollow, HeartFill } from '@nutui/icons-vue-taro'
import './index.less'
......@@ -189,9 +190,8 @@ const scrollStyle = computed(() => {
* 处理认证按钮点击
*/
const handleAuth = () => {
showToast('跳转到认证页面', 'success')
// TODO: 跳转到认证页面
// Taro.navigateTo({ url: '/pages/auth/index' })
Taro.navigateTo({ url: '/pages/setAuthCar/index' })
}
/**
......
......@@ -141,7 +141,7 @@
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { RectLeft, Camera, Right } from '@nutui/icons-vue-taro'
import { RectLeft, Right } from '@nutui/icons-vue-taro'
import './index.less'
// 主题配置
......
.sell-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 120rpx;
}
.form-container {
padding: 0 32rpx;
margin-bottom: 2rem;
}
.form-section {
background-color: #ffffff;
border-radius: 24rpx;
padding: 32rpx;
margin: 24rpx 0;
}
.section-title {
font-size: 32rpx;
font-weight: 600;
color: #111827;
margin-bottom: 32rpx;
display: block;
}
.upload-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32rpx;
margin-top: 24rpx;
}
.upload-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 16rpx;
}
.upload-button {
width: 160rpx;
height: 160rpx;
border: 2rpx dashed #d1d5db;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #f9fafb;
transition: all 0.3s ease;
}
.upload-button:active {
background-color: #f3f4f6;
border-color: #f97316;
}
.upload-icon {
font-size: 48rpx;
color: #9ca3af;
}
.upload-label {
font-size: 24rpx;
color: #6b7280;
text-align: center;
}
.image-preview {
position: relative;
width: 160rpx;
height: 160rpx;
border-radius: 16rpx;
overflow: hidden;
}
.preview-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.delete-btn {
position: absolute;
top: 8rpx;
right: 8rpx;
width: 32rpx;
height: 32rpx;
background-color: #ef4444;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16rpx;
z-index: 10;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}
.delete-icon {
font-size: 16rpx;
color: white;
}
.form-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx 0;
border-bottom: 1rpx solid #f3f4f6;
}
.form-item:last-child {
border-bottom: none;
}
.form-item-left {
display: flex;
align-items: center;
}
.form-icon {
margin-right: 16rpx;
color: #9ca3af;
}
.form-label {
font-size: 28rpx;
color: #374151;
}
.form-item-right {
display: flex;
align-items: center;
}
.form-value {
font-size: 28rpx;
color: #9ca3af;
margin-right: 16rpx;
}
.arrow-icon {
color: #9ca3af;
}
.form-item-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 24rpx 0;
}
.unit {
font-size: 28rpx;
color: #9ca3af;
margin-left: 16rpx;
}
.price-symbol {
font-size: 32rpx;
color: #f97316;
font-weight: 600;
margin-right: 8rpx;
}
.price-input {
font-size: 32rpx;
color: #f97316;
font-weight: 600;
text-align: right;
border: none;
outline: none;
background: transparent;
width: 160rpx;
}
.market-price-symbol {
font-size: 28rpx;
color: #9ca3af;
margin-right: 8rpx;
}
.market-price-input {
font-size: 28rpx;
color: #9ca3af;
text-align: right;
border: none;
outline: none;
background: transparent;
width: 160rpx;
}
.bottom-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #ffffff;
padding: 24rpx 32rpx;
border-top: 1rpx solid #f3f4f6;
z-index: 100;
}
// NutUI组件样式覆盖
:deep(.nut-form-item) {
padding: 0;
margin-bottom: 0;
border-bottom: 1rpx solid #f3f4f6;
}
// :deep(.nut-form-item:last-child) {
// border-bottom: none;
// }
:deep(.nut-form-item__body) {
padding: 32rpx 0;
}
:deep(.nut-form-item__label) {
font-size: 28rpx;
color: #374151;
margin-right: 32rpx;
}
:deep(.nut-input) {
text-align: right;
}
:deep(.nut-input__input) {
font-size: 28rpx;
color: #374151;
text-align: right;
}
:deep(.nut-textarea) {
border: 1rpx solid #e5e7eb;
border-radius: 16rpx;
padding: 24rpx;
}
:deep(.nut-textarea__textarea) {
font-size: 28rpx;
color: #374151;
line-height: 1.5;
}
:deep(.nut-uploader) {
margin-bottom: 0;
}
:deep(.nut-uploader__preview) {
margin-bottom: 0;
}
:deep(.nut-uploader__preview-img) {
width: 160rpx;
height: 160rpx;
border-radius: 16rpx;
object-fit: cover;
}
:deep(.nut-uploader__upload) {
width: 160rpx;
height: 160rpx;
}
:deep(.nut-uploader__input) {
width: 100%;
height: 100%;
}
:deep(.nut-uploader__preview-delete) {
position: absolute;
top: 8rpx;
right: 8rpx;
width: 32rpx;
height: 32rpx;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 20rpx;
}
:deep(.nut-picker__toolbar) {
padding: 24rpx 32rpx;
}
:deep(.nut-picker__cancel) {
color: #9ca3af;
}
:deep(.nut-picker__confirm) {
color: #f97316;
}
:deep(.nut-picker__title) {
font-size: 32rpx;
font-weight: 600;
}
......@@ -296,6 +296,7 @@ import { ref, reactive } from 'vue'
import { Plus, Right, Location, RectLeft, Close } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'
// import BASE_URL from '@/utils/config';
import './index.less'
const themeVars = ref({
navbarBackground: '#fb923c',
......@@ -761,310 +762,3 @@ const validateForm = () => {
return true
}
</script>
<style lang="less">
.sell-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 120rpx;
}
.form-container {
padding: 0 32rpx;
margin-bottom: 2rem;
}
.form-section {
background-color: #ffffff;
border-radius: 24rpx;
padding: 32rpx;
margin: 24rpx 0;
}
.section-title {
font-size: 32rpx;
font-weight: 600;
color: #111827;
margin-bottom: 32rpx;
display: block;
}
.upload-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32rpx;
margin-top: 24rpx;
}
.upload-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 16rpx;
}
.upload-button {
width: 160rpx;
height: 160rpx;
border: 2rpx dashed #d1d5db;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #f9fafb;
transition: all 0.3s ease;
}
.upload-button:active {
background-color: #f3f4f6;
border-color: #f97316;
}
.upload-icon {
font-size: 48rpx;
color: #9ca3af;
}
.upload-label {
font-size: 24rpx;
color: #6b7280;
text-align: center;
}
.image-preview {
position: relative;
width: 160rpx;
height: 160rpx;
border-radius: 16rpx;
overflow: hidden;
}
.preview-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.delete-btn {
position: absolute;
top: 8rpx;
right: 8rpx;
width: 32rpx;
height: 32rpx;
background-color: #ef4444;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16rpx;
z-index: 10;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}
.delete-icon {
font-size: 16rpx;
color: white;
}
.form-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx 0;
border-bottom: 1rpx solid #f3f4f6;
}
.form-item:last-child {
border-bottom: none;
}
.form-item-left {
display: flex;
align-items: center;
}
.form-icon {
margin-right: 16rpx;
color: #9ca3af;
}
.form-label {
font-size: 28rpx;
color: #374151;
}
.form-item-right {
display: flex;
align-items: center;
}
.form-value {
font-size: 28rpx;
color: #9ca3af;
margin-right: 16rpx;
}
.arrow-icon {
color: #9ca3af;
}
.form-item-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 24rpx 0;
}
.unit {
font-size: 28rpx;
color: #9ca3af;
margin-left: 16rpx;
}
.price-symbol {
font-size: 32rpx;
color: #f97316;
font-weight: 600;
margin-right: 8rpx;
}
.price-input {
font-size: 32rpx;
color: #f97316;
font-weight: 600;
text-align: right;
border: none;
outline: none;
background: transparent;
width: 160rpx;
}
.market-price-symbol {
font-size: 28rpx;
color: #9ca3af;
margin-right: 8rpx;
}
.market-price-input {
font-size: 28rpx;
color: #9ca3af;
text-align: right;
border: none;
outline: none;
background: transparent;
width: 160rpx;
}
.bottom-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #ffffff;
padding: 24rpx 32rpx;
border-top: 1rpx solid #f3f4f6;
z-index: 100;
}
// NutUI组件样式覆盖
:deep(.nut-form-item) {
padding: 0;
margin-bottom: 0;
border-bottom: 1rpx solid #f3f4f6;
}
// :deep(.nut-form-item:last-child) {
// border-bottom: none;
// }
:deep(.nut-form-item__body) {
padding: 32rpx 0;
}
:deep(.nut-form-item__label) {
font-size: 28rpx;
color: #374151;
margin-right: 32rpx;
}
:deep(.nut-input) {
text-align: right;
}
:deep(.nut-input__input) {
font-size: 28rpx;
color: #374151;
text-align: right;
}
:deep(.nut-textarea) {
border: 1rpx solid #e5e7eb;
border-radius: 16rpx;
padding: 24rpx;
}
:deep(.nut-textarea__textarea) {
font-size: 28rpx;
color: #374151;
line-height: 1.5;
}
:deep(.nut-uploader) {
margin-bottom: 0;
}
:deep(.nut-uploader__preview) {
margin-bottom: 0;
}
:deep(.nut-uploader__preview-img) {
width: 160rpx;
height: 160rpx;
border-radius: 16rpx;
object-fit: cover;
}
:deep(.nut-uploader__upload) {
width: 160rpx;
height: 160rpx;
}
:deep(.nut-uploader__input) {
width: 100%;
height: 100%;
}
:deep(.nut-uploader__preview-delete) {
position: absolute;
top: 8rpx;
right: 8rpx;
width: 32rpx;
height: 32rpx;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 20rpx;
}
:deep(.nut-picker__toolbar) {
padding: 24rpx 32rpx;
}
:deep(.nut-picker__cancel) {
color: #9ca3af;
}
:deep(.nut-picker__confirm) {
color: #f97316;
}
:deep(.nut-picker__title) {
font-size: 32rpx;
font-weight: 600;
}
</style>
......
/*
* @Date: 2025-07-02 17:52:43
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-02 17:53:28
* @FilePath: /jgdl/src/pages/setAuthCar/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '申请认证',
usingComponents: {
},
}
/* 申请认证页面样式 */
.auth-car-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 200rpx;
}
.form-container {
padding: 20rpx 32rpx;
margin-bottom: 2rem;
}
.form-section {
background-color: #ffffff;
border-radius: 24rpx;
padding: 32rpx;
margin: 24rpx 0;
}
.section-title {
font-size: 32rpx;
font-weight: 600;
color: #111827;
margin-bottom: 32rpx;
display: block;
}
.upload-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32rpx;
margin-top: 24rpx;
}
.upload-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 16rpx;
}
.upload-button {
width: 160rpx;
height: 160rpx;
border: 2rpx dashed #d1d5db;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #f9fafb;
transition: all 0.3s ease;
}
.upload-button:active {
background-color: #f3f4f6;
border-color: #f97316;
}
.upload-icon {
font-size: 48rpx;
color: #9ca3af;
}
.upload-label {
font-size: 24rpx;
color: #6b7280;
text-align: center;
}
.image-preview {
position: relative;
width: 160rpx;
height: 160rpx;
border-radius: 16rpx;
overflow: hidden;
}
.preview-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.delete-btn {
position: absolute;
top: 8rpx;
right: 8rpx;
width: 32rpx;
height: 32rpx;
background-color: #ef4444;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16rpx;
z-index: 10;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}
.delete-icon {
font-size: 16rpx;
color: white;
}
.form-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx 0;
border-bottom: 1rpx solid #f3f4f6;
}
.form-item:last-child {
border-bottom: none;
}
.form-item-left {
display: flex;
align-items: center;
}
.form-icon {
margin-right: 16rpx;
color: #9ca3af;
}
.form-label {
font-size: 28rpx;
color: #374151;
}
.form-item-right {
display: flex;
align-items: center;
}
.form-value {
font-size: 28rpx;
color: #9ca3af;
margin-right: 16rpx;
}
.arrow-icon {
color: #9ca3af;
}
.form-item-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 24rpx 0;
}
.unit {
font-size: 28rpx;
color: #9ca3af;
margin-left: 16rpx;
}
.price-symbol {
font-size: 32rpx;
color: #f97316;
font-weight: 600;
margin-right: 8rpx;
}
.price-input {
font-size: 32rpx;
color: #f97316;
font-weight: 600;
text-align: right;
border: none;
outline: none;
background: transparent;
width: 160rpx;
}
.market-price-symbol {
font-size: 28rpx;
color: #9ca3af;
margin-right: 8rpx;
}
.market-price-input {
font-size: 28rpx;
color: #9ca3af;
text-align: right;
border: none;
outline: none;
background: transparent;
width: 160rpx;
}
.bottom-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #ffffff;
padding: 24rpx 32rpx;
border-top: 1rpx solid #f3f4f6;
z-index: 100;
}
// NutUI组件样式覆盖
:deep(.nut-form-item) {
padding: 0;
margin-bottom: 0;
border-bottom: 1rpx solid #f3f4f6;
}
// :deep(.nut-form-item:last-child) {
// border-bottom: none;
// }
:deep(.nut-form-item__body) {
padding: 32rpx 0;
}
:deep(.nut-form-item__label) {
font-size: 28rpx;
color: #374151;
margin-right: 32rpx;
}
:deep(.nut-input) {
text-align: right;
}
:deep(.nut-input__input) {
font-size: 28rpx;
color: #374151;
text-align: right;
}
:deep(.nut-textarea) {
border: 1rpx solid #e5e7eb;
border-radius: 16rpx;
padding: 24rpx;
}
:deep(.nut-textarea__textarea) {
font-size: 28rpx;
color: #374151;
line-height: 1.5;
}
:deep(.nut-uploader) {
margin-bottom: 0;
}
:deep(.nut-uploader__preview) {
margin-bottom: 0;
}
:deep(.nut-uploader__preview-img) {
width: 160rpx;
height: 160rpx;
border-radius: 16rpx;
object-fit: cover;
}
:deep(.nut-uploader__upload) {
width: 160rpx;
height: 160rpx;
}
:deep(.nut-uploader__input) {
width: 100%;
height: 100%;
}
:deep(.nut-uploader__preview-delete) {
position: absolute;
top: 8rpx;
right: 8rpx;
width: 32rpx;
height: 32rpx;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 20rpx;
}
:deep(.nut-picker__toolbar) {
padding: 24rpx 32rpx;
}
:deep(.nut-picker__cancel) {
color: #9ca3af;
}
:deep(.nut-picker__confirm) {
color: #f97316;
}
:deep(.nut-picker__title) {
font-size: 32rpx;
font-weight: 600;
}
This diff is collapsed. Click to expand it.