661 lines
14 KiB
Plaintext
661 lines
14 KiB
Plaintext
<template>
|
|
|
|
<!-- 骨架屏 -->
|
|
<view v-if="isLoading" class="skeleton-container">
|
|
<!-- 顶部提示栏骨架 -->
|
|
<view class="skeleton-top-tip"></view>
|
|
|
|
<!-- 头像上传区域骨架 -->
|
|
<view class="skeleton-avatar-section">
|
|
<view class="skeleton-avatar"></view>
|
|
<view class="skeleton-avatar-text"></view>
|
|
</view>
|
|
|
|
<!-- 表单内容骨架 -->
|
|
<view class="skeleton-form-content">
|
|
<!-- 身份信息区域骨架 -->
|
|
<view class="skeleton-section">
|
|
<view class="skeleton-section-title"></view>
|
|
|
|
<!-- 姓名输入骨架 -->
|
|
<view class="skeleton-form-item">
|
|
<view class="skeleton-label"></view>
|
|
<view class="skeleton-input"></view>
|
|
</view>
|
|
|
|
<!-- 身份证号输入骨架 -->
|
|
<view class="skeleton-form-item">
|
|
<view class="skeleton-label"></view>
|
|
<view class="skeleton-input"></view>
|
|
</view>
|
|
|
|
<!-- 年龄输入骨架 -->
|
|
<view class="skeleton-form-item">
|
|
<view class="skeleton-label"></view>
|
|
<view class="skeleton-input"></view>
|
|
</view>
|
|
|
|
<!-- 性别选择骨架 -->
|
|
<view class="skeleton-form-item">
|
|
<view class="skeleton-label"></view>
|
|
<view class="skeleton-radio-group">
|
|
<view class="skeleton-radio-item"></view>
|
|
<view class="skeleton-radio-item"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 身份证照片区域骨架 -->
|
|
<view class="skeleton-section">
|
|
<view class="skeleton-section-title"></view>
|
|
|
|
<!-- 身份证正面上传骨架 -->
|
|
<view class="skeleton-upload-item">
|
|
<view class="skeleton-upload-area"></view>
|
|
</view>
|
|
|
|
<!-- 身份证反面上传骨架 -->
|
|
<view class="skeleton-upload-item">
|
|
<view class="skeleton-upload-area"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 占位空间骨架 -->
|
|
<view class="skeleton-placeholder"></view>
|
|
|
|
<!-- 提交按钮骨架 -->
|
|
<view class="skeleton-submit-section">
|
|
<view class="skeleton-submit-btn"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view v-else class="real-name-auth-container">
|
|
<!-- 顶部提示栏 -->
|
|
<view class="top-tip">
|
|
<text class="tip-text">请完成实名认证，保障您的接单权益</text>
|
|
</view>
|
|
<view @click="uploadFImg(1)" class=""
|
|
style=" display: flex; flex-direction: column; justify-content: center; align-items: center; ">
|
|
<img v-if="formData.headImg!=''" :src="Service.GetMateUrlByImg(formData.headImg)"
|
|
style="width: 140rpx; height: 140rpx; border-radius: 50%; " alt="" />
|
|
<view v-else class=""
|
|
style="background-color: #EBEBEB; width: 140rpx; height: 140rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; ">
|
|
<image :src="Service.GetIconImg('/static/index/my/edit/photo.png')"
|
|
style="width: 50rpx; height: 50rpx; " alt=""> </image>
|
|
</view>
|
|
<view class="" style="margin-top: 15rpx; font-size: 26rpx; color: #999999; ">
|
|
点击更换头像
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 表单内容 -->
|
|
<view class="form-content">
|
|
<!-- 身份信息区域 -->
|
|
<view class="section">
|
|
<view class="section-title">身份信息</view>
|
|
|
|
<!-- 姓名输入 -->
|
|
<view class="form-item">
|
|
<view class="label">姓名</view>
|
|
<u-input v-model="formData.name" placeholder="请输入真实姓名" placeholder-color="#999" border="none"
|
|
class="input" input-align="right" />
|
|
</view>
|
|
<!-- 身份证号输入 -->
|
|
<view class="form-item">
|
|
<view class="label">身份证号</view>
|
|
<u-input v-model="formData.idCard" placeholder="请输入18位身份证号" placeholder-color="#999" border="none"
|
|
class="input" input-align="right" maxlength="18" />
|
|
</view>
|
|
<!-- 年龄 -->
|
|
<view class="form-item">
|
|
<view class="label">年龄</view>
|
|
<u-input v-model="formData.age" placeholder="请输入年龄" placeholder-color="#999" border="none"
|
|
class="input" input-align="right" maxlength="18" />
|
|
</view>
|
|
<view class="form-item" style="justify-content: space-between;">
|
|
<view class="label">性别</view>
|
|
<view class="" style="">
|
|
<up-radio-group v-model="formData.sex" placement="row">
|
|
<up-radio v-for="(item, index) in radiolist1" activeColor='#FF6A00' :key="index"
|
|
iconPlacement="right" :label="item.name" :name="item.name">
|
|
</up-radio>
|
|
</up-radio-group>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
<!-- 身份证照片区域 -->
|
|
<view class="section">
|
|
<view class="section-title">身份证照片</view>
|
|
|
|
<!-- 上传身份证正面 -->
|
|
<view @click="uploadFImg(2)" class="upload-item">
|
|
<view class="upload-area bordered-area">
|
|
<view v-if="!formData.frontImage" class="upload-content">
|
|
<view class="upload-icon">+</view>
|
|
<view class="upload-text">上传身份证正面</view>
|
|
</view>
|
|
<!-- 显示上传后的占位图 -->
|
|
<view v-else class="uploaded-placeholder">
|
|
<image :src="Service.GetMateUrlByImg(formData.frontImage)"
|
|
style="width: 100%; height: 100%; " mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 上传身份证反面 -->
|
|
<view @click="uploadFImg(3)" class="upload-item">
|
|
<view class="upload-area bordered-area">
|
|
<view v-if="!formData.backImage" class="upload-content">
|
|
<view class="upload-icon">+</view>
|
|
<view class="upload-text">上传身份证反面</view>
|
|
</view>
|
|
<!-- 显示上传后的占位图 -->
|
|
<view v-else class="uploaded-placeholder">
|
|
<image :src="Service.GetMateUrlByImg(formData.backImage)"
|
|
style="width: 100%; height: 100%; " mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="" style="width: 100vw; height: 180rpx;">
|
|
|
|
</view>
|
|
|
|
<!-- 提交按钮 -->
|
|
<view class="submit-section">
|
|
<button @click="save()" type="primary" class="submit-btn">
|
|
提交信息
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
import { ref, computed } from 'vue';
|
|
import { Service } from '@/Service/Service';
|
|
import { CNRiderDataService } from '@/Service/CN/CNRiderDataService';
|
|
|
|
|
|
let isLoading = ref(true)
|
|
|
|
// 表单数据
|
|
const formData = ref({
|
|
name: '',
|
|
idCard: '',
|
|
sex: '男',
|
|
frontImage: '',
|
|
backImage: '',
|
|
agreed: false,
|
|
headImg: '',
|
|
age: '',
|
|
phone: ''
|
|
});
|
|
|
|
const radiolist1 = ref([
|
|
{
|
|
name: '男',
|
|
disabled: false,
|
|
},
|
|
{
|
|
name: '女',
|
|
disabled: false,
|
|
}
|
|
]);
|
|
|
|
|
|
let addressInfo = ref({
|
|
province: '',
|
|
city: '',
|
|
region: '',
|
|
lat: 0,
|
|
lon: 0
|
|
})
|
|
|
|
onLoad(() => {
|
|
getLocation()
|
|
})
|
|
|
|
|
|
|
|
|
|
const getLocation = () => {
|
|
console.log('开始定位');
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function (res) {
|
|
addressInfo.value.lat = res.latitude
|
|
addressInfo.value.lon = res.longitude
|
|
CNRiderDataService.GetAddressInfo(res.latitude, res.longitude).then(data => {
|
|
console.log(1111);
|
|
isLoading.value = false
|
|
addressInfo.value.province = data.data.addrInfo.province
|
|
addressInfo.value.city = data.data.addrInfo.city
|
|
addressInfo.value.region = data.data.addrInfo.district
|
|
})
|
|
}
|
|
});
|
|
}
|
|
|
|
const uploadFImg = (index : number) => {
|
|
uni.chooseImage({
|
|
count: 1, // 最多选择3张图片
|
|
sizeType: ['original', 'compressed'], // 支持原图和压缩图
|
|
sourceType: ['album', 'camera'], // 可从相册选择或使用相机拍照
|
|
success: function (res) {
|
|
let path = res.tempFiles[0].path
|
|
Service.uploadH5(path, 'Avatar', data => {
|
|
|
|
if (index === 1) {
|
|
formData.value.headImg = data
|
|
} else if (index === 2) {
|
|
formData.value.frontImage = data
|
|
} else {
|
|
formData.value.backImage = data
|
|
}
|
|
})
|
|
|
|
},
|
|
fail: function (err) {
|
|
console.error('选择失败:', err.errMsg);
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
const save = () => {
|
|
if (rules() === 1) {
|
|
return
|
|
}
|
|
CNRiderDataService.CompleteRider(formData.value.name, formData.value.headImg, formData.value.idCard, formData.value.sex, Number(formData.value.age), formData.value.frontImage, formData.value.backImage, addressInfo.value.province, addressInfo.value.city, addressInfo.value.region, addressInfo.value.lat, addressInfo.value.lon).then(res => {
|
|
if (res.data) {
|
|
Service.Msg('提交成功')
|
|
setTimeout(()=>{
|
|
Service.GoPageTab('/pages/index/index')
|
|
},1000)
|
|
} else {
|
|
Service.Msg(res.msg)
|
|
}
|
|
})
|
|
}
|
|
|
|
const rules = () => {
|
|
if (!formData.value.headImg) {
|
|
Service.Msg('请上传头像!')
|
|
return 1
|
|
}
|
|
if (!formData.value.name) {
|
|
Service.Msg('请输入真实姓名!')
|
|
return 1
|
|
}
|
|
|
|
if (formData.value.idCard.split('').length !== 18) {
|
|
Service.Msg('请输入正确身份证号!')
|
|
return 1
|
|
}
|
|
|
|
if (!formData.value.idCard) {
|
|
Service.Msg('请输入身份证号!')
|
|
return 1
|
|
}
|
|
if (!formData.value.age) {
|
|
Service.Msg('请输入年龄!')
|
|
return 1
|
|
}
|
|
|
|
if (!formData.value.frontImage) {
|
|
Service.Msg('请输入身份证正面!')
|
|
return 1
|
|
}
|
|
if (!formData.value.backImage) {
|
|
Service.Msg('请输入身份证背面!')
|
|
return 1
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
page {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
/* 骨架屏样式 */
|
|
.skeleton-container {
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.skeleton-top-tip {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background-color: #e6f7ff;
|
|
border-radius: 20rpx;
|
|
margin: 20rpx 0;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
}
|
|
|
|
.skeleton-avatar-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.skeleton-avatar {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
border-radius: 50%;
|
|
background-color: #e6e6e6;
|
|
margin-bottom: 20rpx;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
}
|
|
|
|
.skeleton-avatar-text {
|
|
width: 200rpx;
|
|
height: 26rpx;
|
|
background-color: #e6e6e6;
|
|
border-radius: 8rpx;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
}
|
|
|
|
.skeleton-form-content {
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
.skeleton-section {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.skeleton-section-title {
|
|
width: 150rpx;
|
|
height: 32rpx;
|
|
background-color: #e6e6e6;
|
|
border-radius: 8rpx;
|
|
margin-bottom: 20rpx;
|
|
padding-left: 10rpx;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
}
|
|
|
|
.skeleton-form-item {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.skeleton-form-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.skeleton-label {
|
|
width: 120rpx;
|
|
height: 28rpx;
|
|
background-color: #e6e6e6;
|
|
border-radius: 8rpx;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
}
|
|
|
|
.skeleton-input {
|
|
flex: 1;
|
|
height: 28rpx;
|
|
background-color: #e6e6e6;
|
|
border-radius: 8rpx;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
}
|
|
|
|
.skeleton-radio-group {
|
|
display: flex;
|
|
gap: 40rpx;
|
|
}
|
|
|
|
.skeleton-radio-item {
|
|
width: 120rpx;
|
|
height: 28rpx;
|
|
background-color: #e6e6e6;
|
|
border-radius: 8rpx;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
}
|
|
|
|
.skeleton-upload-item {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.skeleton-upload-area {
|
|
width: 100%;
|
|
height: 250rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
}
|
|
|
|
.skeleton-placeholder {
|
|
width: 100%;
|
|
height: 180rpx;
|
|
}
|
|
|
|
.skeleton-submit-section {
|
|
z-index: 1000;
|
|
width: 100%;
|
|
margin-top: 60rpx;
|
|
padding: 20rpx;
|
|
background-color: #fff;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.skeleton-submit-btn {
|
|
width: 100%;
|
|
height: 92rpx;
|
|
background-color: #e6e6e6;
|
|
border-radius: 46rpx;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
}
|
|
|
|
/* 骨架屏动画 */
|
|
@keyframes skeleton-loading {
|
|
0% {
|
|
background-color: #e6e6e6;
|
|
}
|
|
50% {
|
|
background-color: #f0f0f0;
|
|
}
|
|
100% {
|
|
background-color: #e6e6e6;
|
|
}
|
|
}
|
|
|
|
.top-tip {
|
|
background-color: #E6F7FF;
|
|
padding: 20rpx 30rpx;
|
|
margin: 20rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.tip-text {
|
|
color: #1890ff;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.form-content {
|
|
padding: 0 30rpx;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
padding-left: 10rpx;
|
|
}
|
|
|
|
.form-item {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.form-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.label {
|
|
width: 120rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.input {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.upload-item {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.upload-area {
|
|
height: 250rpx;
|
|
overflow: hidden;
|
|
border-radius: 6rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.bordered-area {
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.upload-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.upload-icon {
|
|
font-size: 60rpx;
|
|
color: #1890ff;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.upload-text {
|
|
font-size: 28rpx;
|
|
color: #1890ff;
|
|
}
|
|
|
|
.uploaded-placeholder {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.face-verify-area {
|
|
background-color: #fff;
|
|
height: 240rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.face-icon {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
background-color: #e6f7ff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.face-text {
|
|
font-size: 28rpx;
|
|
color: #1890ff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.agreement-section {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
.checkbox {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.agreement-text {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.agreement-link {
|
|
font-size: 26rpx;
|
|
color: #1890ff;
|
|
margin-left: 4rpx;
|
|
}
|
|
|
|
.input {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.submit-section {
|
|
z-index: 1000;
|
|
width: 100%;
|
|
margin-top: 60rpx;
|
|
padding: 20rpx;
|
|
background-color: #fff;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.submit-btn {
|
|
height: 92rpx;
|
|
font-size: 32rpx;
|
|
border-radius: 46rpx;
|
|
background-color: #1890ff;
|
|
}
|
|
|
|
.submit-btn[disabled] {
|
|
background-color: #a0cfff;
|
|
color: #ffffff;
|
|
}
|
|
</style> |