153 lines
3.6 KiB
Vue
153 lines
3.6 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar title="认证中心" :border-bottom="false" :background="bgc" back-icon-color="#000" title-color='#262B37'
|
|
title-size='36' height='36' id="navbar" :custom-back="btnfh">
|
|
</u-navbar>
|
|
|
|
<view class="certification-center">
|
|
<!-- 认证项目列表 -->
|
|
<view class="certification-list">
|
|
<!-- 实名认证 -->
|
|
<view class="certification-item" @click="navigateTo('realName')">
|
|
<view class="item-left">
|
|
<view class="item-info">
|
|
<text class="item-title">实名认证</text>
|
|
<text class="item-desc">保障账户安全</text>
|
|
</view>
|
|
</view>
|
|
<view class="item-right" :class="{'verified': realNameStatus === 'verified'}">
|
|
<!-- <text>{{ realNameStatus === 'verified' ? '已认证' : '未认证' }}</text> -->
|
|
<uni-icons type="forward" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 驾驶证认证 -->
|
|
<view class="certification-item" @click="navigateTo('driver')">
|
|
<view class="item-left">
|
|
<view class="item-info">
|
|
<text class="item-title">驾驶证认证</text>
|
|
<text class="item-desc">租车必备认证</text>
|
|
</view>
|
|
</view>
|
|
<view class="item-right" :class="{'verified': driverStatus === 'uploaded'}">
|
|
<!-- <text>{{ driverStatus === 'uploaded' ? '已上传' : '未上传' }}</text> -->
|
|
<uni-icons type="forward" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
realNameStatus: 'verified', // verified, unverified
|
|
bgc: {
|
|
backgroundColor: "#f7f7f7",
|
|
},
|
|
studentStatus: 'uploaded', // uploaded, unuploaded
|
|
}
|
|
},
|
|
methods: {
|
|
navigateTo(type) {
|
|
// 根据不同类型跳转到不同认证页面
|
|
let url = '';
|
|
switch(type) {
|
|
case 'realName':
|
|
url = '/page_user/shiming';
|
|
break;
|
|
case 'driver':
|
|
url = '/page_user/renzheng/jiashizheng';
|
|
break;
|
|
}
|
|
uni.navigateTo({
|
|
url: url
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.certification-center {
|
|
padding: 30rpx;
|
|
background-color: #f7f7f7;
|
|
max-height: 100vh;
|
|
|
|
.header {
|
|
margin-bottom: 40rpx;
|
|
|
|
.title {
|
|
font-size: 44rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
display: block;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.certification-list {
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.certification-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.item-left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.item-icon {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.item-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.item-title {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.item-desc {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-right {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #ff5a5f;
|
|
|
|
&.verified {
|
|
color: #09bb07;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |