sai/QCN_rider
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Ls
2026-02-12 12:19:20 +08:00
commit 219fd9be5c
529 changed files with 169918 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

659
.svn/pristine/ce/ce8172dd8153b9ad30f7794c1feeed1cd856499d.svn-base Normal file
View File

@@ -0,0 +1,659 @@
<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 = () => {
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 => {
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>

400
.svn/pristine/ce/ced31180dbca31d4426fd3d71b45375e543a2974.svn-base Normal file
View File

@@ -0,0 +1,400 @@
<template>
<!-- 实际内容 -->
<view class="rider-home">
<!-- 统计数据区域 -->
<view class="stats-section">
<view class="stat-item">
<text class="stat-label">今日收入</text>
<text class="stat-value income">¥86.50</text>
</view>
<view class="stat-item">
<text class="stat-label">已完成</text>
<text class="stat-value completed">5单</text>
</view>
<view class="stat-item">
<text class="stat-label">进行中</text>
<text class="stat-value ongoing">6单</text>
</view>
</view>
<!-- 接单按钮 -->
<view class="action-section">
<up-button :disabled='riderInfo.status===0' type="primary" shape="circle" size="default" class="accept-orders-btn"
@click="toggleAcceptOrders">{{ userStatus === '已上线' ? '已上线' : '已下线' }}</up-button>
</view>
<view class="tab-bar">
<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === index }"
@click="switchTab(index)">
<text class="tab-text">{{ tab }}</text>
<view v-if="activeTab === index" class="active-line"></view>
</view>
</view>
<view v-if="riderInfo.status===1" class="" style="padding: 0 30rpx;">
<view @click="gopage()" v-for="(orderItem,orderIndex) in 3 " :key="orderIndex" class="task-section">
<!-- 高价单标签 -->
<view class="" style="display: flex; align-items: center; justify-content: space-between;">
<view class="high-price-tag" :style="{'border':activeTab==0?'1rpx solid #FF7875':(activeTab==1?'1rpx solid #52C41A':'1rpx solid #FAAD14'),'color':activeTab==0?'#FF7875':(activeTab==1?'#52C41A':'#FAAD14') }" style="background-color: #fff;" >
<text class="high-price-text">{{activeTab==0? '新订单':(activeTab==1? '待取单':'配送中')}}</text>
</view>
<view class="" style="display: flex; align-items: baseline;">
<up-icon name="phone" color="var(--nav-mian)" size="20"></up-icon>
<text style="margin-left: 10rpx; color: var(--nav-mian); ">拨打商家</text>
</view>
</view>
<!-- 商家信息 -->
<view class="merchant-info">
<text class="merchant-name">老北京炸酱面</text>
<text v-if="activeTab==1" class="distance">500m</text>
</view>
<!-- 地址信息 -->
<view class="address-info">
<up-icon name="map" color="#999" size="24rpx" />
<text class="address-text">北京市朝阳区三里屯SOHO</text>
<!-- <text v-if="activeTab!==0" class="address-text">共3件商品</text> -->
</view>
<!-- 商品次数-->
<!-- <view class="address-info">
<text class="address-text">共3件商品</text>
<view class="">
<text class="price">¥5.50</text>
<text style="color: var(--nav-mian); font-weight: 600; margin-left: 10rpx; ">/单</text>
</view>
</view> -->
<!-- 价格和取餐时间 -->
<view class="price-time-row">
<view v-if="activeTab==1" class="">
<text style="font-size: 30rpx; font-weight: 600; color: #1890FF; ">取件码: </text>
<text style="color: var(--nav-mian); font-weight: 600; margin-left: 10rpx; ">A121</text>
</view>
<view v-if="activeTab!==1" class="">
<text class="address-text">据您1.2km</text>
</view>
<view class="pickup-time">
<up-icon name="clock" color="#FF9500" size="24rpx" />
<text class="time-text" :style="{'color':activeTab==0?'#FAAD14':'#FF0000'}" >{{activeTab==0?'12:30 前取餐':'12:30 前送达'}}</text>
</view>
</view>
<!-- 立即抢单按钮 -->
<up-button type="primary" :color="activeTab==0?'#1890FF':'#52C41A'" size="large" class="grab-btn">{{ activeTab==0?'我已取餐':'确认送达'}}</up-button>
</view>
<up-loadmore :status="status" />
</view>
<view v-else class="" style="font-weight: bold; text-align: center; font-size: 32rpx; margin-top: 100rpx; " >
信息审核中·暂时无法接单
</view>
<view class="" style="width: 100%; height: 60rpx; ">
</view>
</view>
</template>
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref, onMounted } from 'vue';
import { Service } from '@/Service/Service';
import { CNRiderDataService } from '@/Service/CN/CNRiderDataService'
// 加载状态
const isLoading = ref(true);
let userStatus = ref('已下线')
let status = ref('nomore')
const tabs = ['新订单','待取货', '配送中']
const activeTab = ref(0)
let riderInfo=ref<any>({})
onLoad(() => {
getData()
})
const getData=()=>{
CNRiderDataService.GetRiderInfo().then(res=>{
isLoading.value = false
riderInfo.value=res.data.riderInfo
if(res.data.riderInfo.status===-1){
Service.GoPage('/pages/my/completeData')
}
})
}
// 切换标签
const switchTab = (index : number) => {
activeTab.value = index
}
// 切换接单状态
const toggleAcceptOrders = () => {
userStatus.value = userStatus.value === '已上线' ? '已下线' : '已上线';
};
// 页面跳转
const gopage = () => {
if (activeTab.value == 0) {
Service.GoPage('/pages/order/grabOrder')
} else {
Service.GoPage('/pages/order/orderDetail')
}
}
</script>
<style scoped lang="scss">
page {
background-color: #F6f6f6;
}
/* 统计数据区域 */
.stats-section {
background-color: #ffffff;
margin: 20rpx;
border-radius: 16rpx;
display: flex;
justify-content: space-around;
padding: 30rpx 0;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-label {
font-size: 28rpx;
color: #666666;
margin-bottom: 10rpx;
}
.stat-value {
font-size: 36rpx;
font-weight: 600;
}
.income {
color: var(--nav-diluted);
}
.completed {
color: var(--nav-vice);
}
.ongoing {
color: #FF9500;
}
/* 接单按钮 */
.action-section {
margin: 0 20rpx;
}
.accept-orders-btn {
width: 100%;
height: 90rpx;
font-size: 32rpx;
background-color: #52C41A;
}
/* 顶部标签栏 */
.tab-bar {
margin-top: 20rpx;
display: flex;
background-color: #FFFFFF;
padding: 20rpx 0 0;
border-bottom: 1rpx solid #E5E5E5;
width: 100vw;
background-color: #fff;
}
.tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx 0;
position: relative;
}
.tab-text {
font-size: 28rpx;
color: #666666;
}
.tab-item.active .tab-text {
color: var(--nav-mian);
font-weight: 600;
}
.active-line {
position: absolute;
bottom: 0;
width: 110rpx;
height: 6rpx;
background-color: var(--nav-mian);
border-radius: 3rpx;
}
.task-section {
margin-top: 20rpx;
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: 20rpx;
padding: 20rpx;
}
/* 标签样式 */
.high-price-tag {
width: fit-content;
background-color: #FF7875;
color: #FFFFFF;
padding: 5rpx 20rpx;
border-radius: 20rpx;
font-size: 24rpx;
display: flex;
align-items: center;
}
.status-tag {
position: absolute;
top: 20rpx;
left: 20rpx;
padding: 5rpx 20rpx;
border-radius: 20rpx;
font-size: 24rpx;
z-index: 10;
}
.status-tag.pending {
background-color: #4CD964;
color: #FFFFFF;
}
.status-tag.delivering {
background-color: #FF9500;
color: #FFFFFF;
}
/* 右侧操作按钮 */
.right-action {
position: absolute;
top: 20rpx;
right: 20rpx;
}
.call-btn {
padding: 5rpx 15rpx;
font-size: 24rpx;
line-height: 36rpx;
}
/* 信息展示 */
.merchant-info {
margin-top: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.merchant-name {
font-size: 34rpx;
font-weight: 600;
color: #333333;
}
.distance {
font-size: 28rpx;
color: #666666;
}
.address-info {
display: flex;
align-items: baseline;
margin-top: 15rpx;
}
.address-text {
margin-left: 10rpx;
font-size: 28rpx;
color: #666666;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 价格和时间 */
.price-time-row {
margin-top: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.price {
font-size: 36rpx;
font-weight: 600;
color: #FF3B30;
}
.pickup-code {
font-size: 28rpx;
color: #333333;
font-weight: 500;
}
.pickup-time {
display: flex;
align-items: center;
}
.time-text {
margin-left: 8rpx;
font-size: 26rpx;
}
/* 按钮样式 */
.grab-btn {
margin-top: 25rpx;
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
}
.grab-btn {
background-color: #007AFF;
}
/* uview组件样式覆盖 */
::v-deep .u-button--primary {
background-color: var(--nav-vice);
border-color: var(--nav-vice);
}
::v-deep .u-button--mini {
background-color: var(--nav-mian);
border-color: var(--nav-mian);
}
</style>