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

281
.svn/pristine/8b/8b798e3b3828de7454cbe53f8d93a2a0dce5bb0a.svn-base Normal file
View File

@@ -0,0 +1,281 @@
<template>
<view v-if="loading" class="pure-css-skeleton">
<view style=" margin: 20rpx; padding: 20rpx; background-color: #fff; border-radius: 10rpx;">
<!-- 头像区域骨架 -->
<view class="avatar-skeleton-wrapper"
style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
<div class="skeleton-circle animate-pulse"></div>
<div class="skeleton-text animate-pulse" style="margin-top: 15rpx;"></div>
</view>
<!-- 表单区域骨架 -->
<view class="form-skeleton-wrapper" style="margin-top: 30rpx;">
<!-- 昵称 -->
<div class="form-item-skeleton">
<div class="form-label-skeleton animate-pulse"></div>
<div class="form-input-skeleton animate-pulse"></div>
</div>
<!-- 性别 -->
<div class="form-item-skeleton">
<div class="form-label-skeleton animate-pulse"></div>
<div class="form-radio-skeleton">
<div class="radio-item-skeleton animate-pulse"></div>
<div class="radio-item-skeleton animate-pulse"></div>
</div>
</div>
<!-- 生日 -->
<div class="form-item-skeleton">
<div class="form-label-skeleton animate-pulse"></div>
<div class="form-input-skeleton animate-pulse"></div>
</div>
<!-- 手机号 -->
<div class="form-item-skeleton">
<div class="form-label-skeleton animate-pulse"></div>
<div class="form-input-skeleton animate-pulse"></div>
</div>
<!-- 邮箱 -->
<div class="form-item-skeleton">
<div class="form-label-skeleton animate-pulse"></div>
<div class="form-input-skeleton animate-pulse"></div>
</div>
</view>
<!-- 底部空间占位 -->
<view style="width: 100%; height: 200rpx;"></view>
</view>
<!-- 底部保存按钮骨架 -->
<view class="bottom-button-skeleton animate-pulse"></view>
</view>
<view v-else style=" margin: 20rpx; padding: 20rpx;">
<view @click="uploadFImg()" class=""
style=" display: flex; flex-direction: column; justify-content: center; align-items: center; ">
<img v-if="userInfo.headImg!=''" :src="Service.GetMateUrlByImg(userInfo.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="" style=" margin-top: 30rpx; ">
<up-form labelWidth='90' labelPosition="left" :borderBottom="true" :model="userInfo" ref="form1">
<up-form-item label="昵称" prop="userInfo.name" ref="item1" :borderBottom="true">
<up-input inputAlign='right' v-model="userInfo.nick" border="none"></up-input>
</up-form-item>
<up-form-item label="性别" :borderBottom="true" style="position: relative;" prop="userInfo.sex">
<view class="" style=" position: absolute; top: 10rpx; right: 0; ">
<up-radio-group v-model="userInfo.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>
</up-form-item>
<up-form-item label="生日" :borderBottom="true" prop="userInfo.sex" style="position: relative;">
<view @click="showDate=true" class=""
style=" position: absolute; top: 25rpx; right: 0; display: flex; align-items: center; ">
{{Service.formatDate(userInfo.date,2)}}
<u-icon name="arrow-right" size="24rpx" color="#000"></u-icon>
</view>
</up-form-item>
<up-form-item label="手机号" :borderBottom="true" prop="userInfo.sex">
<up-input inputAlign='right' v-model="userInfo.phone" border="none"></up-input>
</up-form-item>
<up-form-item label="紧急联系人" :borderBottom="true" prop="userInfo.sex">
<up-input inputAlign='right' v-model="userInfo.age" border="none"></up-input>
</up-form-item>
</up-form>
</view>
<up-datetime-picker :maxDate="nowDate" :minDate="631123200000" :show="showDate" @cancel="showDate=!showDate"
@confirm="dateConfirm" v-model="userInfo.date" mode="date"></up-datetime-picker>
<view class="" style="width: 100%; height: 200rpx;">
</view>
<view class="" style=" width: 100% ; background-color: #fff; position: fixed; bottom: 15rpx; left: 0; ">
<view class=""
style=" margin: 0 20rpx; padding: 26rpx 0; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 60rpx; background-color: var(--nav-mian);">
保存信息
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { onShow, onLoad } from "@dcloudio/uni-app";
import { Service } from '@/Service/Service';
import { ref } from "vue";
let loading = ref(true)
let showDate = ref(false)
const userInfo = ref({
headImg: '',
age: '1',
sex: '',
phone: '1',
date: Date.now(),
nick: '大大怪将军'
})
let nowDate = ref()
const radiolist1 = ref([
{
name: '男',
disabled: false,
},
{
name: '女',
disabled: false,
}
]);
onLoad(() => {
setTimeout(() => {
loading.value = false;
}, 1500);
});
onShow(() => {
nowDate.value = new Date()
});
const dateConfirm = (e) => {
showDate.value = !showDate.value
userInfo.value.date = e.value
}
const uploadFImg = () => {
uni.chooseImage({
count: 1, // 最多选择3张图片
sizeType: ['original', 'compressed'], // 支持原图和压缩图
sourceType: ['album', 'camera'], // 可从相册选择或使用相机拍照
success: function (res) {
let path = res.tempFiles[0].path
userInfo.value.headImg = path
// Service.uploadH5(path, 'Avatar', data => {
// userInfo.value.headImg = data.split(',')[2].split(':')[1].split('"')[1]
// })
},
fail: function (err) {
console.error('选择失败:', err.errMsg);
}
})
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
.pure-css-skeleton {
min-height: 100vh;
background-color: #f8f8f8;
}
/* 骨架屏基础样式 */
.skeleton-circle {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
background-color: #e0e0e0;
}
.skeleton-text {
width: 120rpx;
height: 26rpx;
background-color: #e0e0e0;
border-radius: 4rpx;
}
.form-item-skeleton {
display: flex;
align-items: center;
padding: 20rpx 0;
border-bottom: 1px solid #f5f5f5;
position: relative;
}
.form-item-skeleton:last-child {
border-bottom: none;
}
.form-label-skeleton {
width: 90rpx;
height: 30rpx;
background-color: #e0e0e0;
border-radius: 4rpx;
}
.form-input-skeleton {
position: absolute;
right: 0;
width: 50%;
height: 30rpx;
background-color: #e0e0e0;
border-radius: 4rpx;
}
.form-radio-skeleton {
position: absolute;
right: 0;
display: flex;
gap: 20rpx;
}
.radio-item-skeleton {
width: 100rpx;
height: 30rpx;
background-color: #e0e0e0;
border-radius: 4rpx;
}
.bottom-button-skeleton {
position: fixed;
bottom: 15rpx;
left: 20rpx;
right: 20rpx;
height: 90rpx;
background-color: #e0e0e0;
border-radius: 60rpx;
}
/* 动画效果 - 不使用组件，纯CSS实现 */
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
.animate-pulse {
animation: pulse 1.5s ease-in-out infinite;
}
</style>

557
.svn/pristine/8b/8bad7f57df97db3881c661d9be875918f3c85385.svn-base Normal file
View File

@@ -0,0 +1,557 @@
<template>
<!-- 骨架屏 -->
<view v-if="loading" class="skeleton-container">
<!-- 骨架屏提示信息 -->
<view class="skeleton-warning">
<view class="skeleton-warning-text"></view>
</view>
<!-- 骨架屏问题类型 -->
<view class="skeleton-section">
<view class="skeleton-title"></view>
<view class="skeleton-radio-group">
<view class="skeleton-radio-item" v-for="i in 6" :key="i">
<view class="skeleton-radio-circle"></view>
<view class="skeleton-radio-text"></view>
</view>
</view>
</view>
<!-- 骨架屏详细描述 -->
<view class="skeleton-section">
<view class="skeleton-title"></view>
<view class="skeleton-textarea"></view>
</view>
<!-- 骨架屏图片上传 -->
<view class="skeleton-section">
<view class="skeleton-title"></view>
<view class="skeleton-image-group">
<view class="skeleton-image" v-for="i in 3" :key="i">
<view class="skeleton-image-content"></view>
</view>
</view>
</view>
<!-- 骨架屏说明文字 -->
<view class="skeleton-info"></view>
<view class="" style="width: 100vw; height: 120rpx;"></view>
<!-- 骨架屏底部按钮 -->
<view class="skeleton-submit-section">
<view class="skeleton-submit-btn"></view>
</view>
</view>
<view v-else class="exception-report">
<!-- 提示信息 -->
<view class="warning-tip">
<text class="warning-text">上报异常后，系统将自动暂停配送计时</text>
</view>
<!-- 问题类型选择 -->
<view class="problem-section">
<view class="section-title">请选择问题类型</view>
<view class="radio-group">
<view v-for="(item, index) in problemTypes" :key="index" class="radio-item"
:class="{ active: selectedProblem === index }" @click="selectProblem(index)">
<view class="radio-circle">
<view v-if="selectedProblem === index" class="radio-inner"></view>
</view>
<text class="radio-text">{{ item }}</text>
</view>
</view>
</view>
<!-- 详细描述 -->
<view class="description-section">
<view class="section-title">详细描述问题</view>
<up-textarea v-model="message.des" placeholder="请说明具体情况，如用户电话无法接通、地址找不到等..."></up-textarea>
</view>
<!-- 凭证图片上传 -->
<view class="image-section">
<view class="section-title">上传凭证图片（最多3张）</view>
<view class="image-upload">
<!-- 上传按钮 -->
<view v-if="message.img.length <3" class="upload-btn" @click="uploaduserImg()">
<u-icon name="plus" size="40rpx" color="#999"></u-icon>
</view>
<!-- 已上传图片 -->
<view v-for="(image, index) in message.img" :key="index" class="image-item">
<view class="image-placeholder">
<image :src="Service.GetMateUrlByImg(image.url)" style="width: 100%; height: 100%; " mode="">
</image>
</view>
<view class="delete-btn" @click="removeImage(index)">
<u-icon name="close-circle" size="36rpx" color="#fff"></u-icon>
</view>
</view>
</view>
</view>
<!-- 说明文字 -->
<view class="info-text">
<up-icon name="clock" color="var(--nav-diluted)" size="22"></up-icon>
<view style="margin-left: 20rpx;">上报后，本单配送时间将暂停计算，不影响您的准时率。</view>
</view>
<view class="" style="width: 100vw; height: 120rpx; ">
</view>
<!-- 提交按钮 -->
<view class="submit-section">
<u-button type="primary" class="submit-btn" @click="submitReport">提交异常上报</u-button>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Service } from "@/Service/Service"
import { onLoad } from '@dcloudio/uni-app'
import { CNRiderOrderService } from '@/Service/CN/CNRiderOrderService'
let loading = ref(false)
// 问题类型选项
const problemTypes = [
'联系不上用户',
'用户地址错误/不详',
'餐品洒漏/包装破损',
'商家出餐慢/未出餐',
'交通堵塞/临时封路',
'其他问题'
]
let message = ref({
type: '联系不上用户',
des: '',
img: []
})
// 选中的问题类型
const selectedProblem = ref<number | null>(0) // 默认选中第一个
let orderId=ref('')
onLoad((data:any) => {
orderId.value=data.orderId
})
// 选择问题类型
const selectProblem = (index : number) => {
selectedProblem.value = index
message.value.type = problemTypes[index]
}
// 上传图片
const uploaduserImg = () => {
uni.chooseImage({
count: 1, // 最多选择1张图片
sizeType: ['original', 'compressed'], // 支持原图和压缩图
sourceType: ['album', 'camera'], // 可从相册选择或使用相机拍照
success: function (res) {
let path = res.tempFiles[0].path
Service.uploadH5(path, 'Avatar', data => {
message.value.img.push({
url: data
})
})
},
fail: function (err) {
console.error('选择失败:', err.errMsg);
}
})
}
// 删除图片
const removeImage = (index : number) => {
message.value.img.splice(index, 1)
}
// 提交上报
const submitReport = () => {
if(!message.value.des){
Service.Msg('请输入订单异常详情!')
return
}
if(message.value.img.length==0){
Service.Msg('请上传图片!')
return
}
let img=JSON.stringify(message.value.img)
CNRiderOrderService.ApplyOrderService(orderId.value,message.value.type,message.value.des,img).then(res=>{
if(res.data){
Service.Msg('提交成功!')
setTimeout(()=>{
Service.GoPage('/pages/my/abnormalDetail?orderId='+orderId.value)
},1000)
}else{
Service.Msg(res.msg)
}
})
}
</script>
<style scoped>
/* 骨架屏样式 */
.skeleton-container {
min-height: 100vh;
background-color: #fff;
}
/* 骨架屏导航栏 */
.skeleton-nav-icon {
width: 32rpx;
height: 32rpx;
background-color: #e6e6e6;
border-radius: 4rpx;
animation: pulse 1.5s infinite;
}
.skeleton-nav-title {
width: 180rpx;
height: 36rpx;
background-color: #e6e6e6;
border-radius: 4rpx;
animation: pulse 1.5s infinite;
}
/* 骨架屏提示信息 */
.skeleton-warning {
height: 80rpx;
background-color: #FFF2F0;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
animation: pulse 1.5s infinite;
}
.skeleton-warning-text {
width: 70%;
height: 40rpx;
background-color: #e6e6e6;
border-radius: 4rpx;
}
/* 骨架屏通用区块 */
.skeleton-section {
margin-top: 30rpx;
padding: 30rpx;
background-color: #fff;
}
.skeleton-title {
width: 200rpx;
height: 36rpx;
background-color: #e6e6e6;
border-radius: 4rpx;
margin-bottom: 30rpx;
animation: pulse 1.5s infinite;
}
/* 骨架屏单选组 */
.skeleton-radio-group {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.skeleton-radio-item {
display: flex;
align-items: center;
padding: 20rpx;
border: 2rpx solid #e6e6e6;
border-radius: 10rpx;
animation: pulse 1.5s infinite;
}
.skeleton-radio-circle {
width: 36rpx;
height: 36rpx;
border: 2rpx solid #d9d9d9;
border-radius: 50%;
margin-right: 20rpx;
background-color: #f5f5f5;
}
.skeleton-radio-text {
width: 60%;
height: 32rpx;
background-color: #e6e6e6;
border-radius: 4rpx;
}
/* 骨架屏文本域 */
.skeleton-textarea {
height: 180rpx;
background-color: #e6e6e6;
border-radius: 10rpx;
animation: pulse 1.5s infinite;
}
/* 骨架屏图片上传 */
.skeleton-image-group {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
}
.skeleton-image {
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
overflow: hidden;
animation: pulse 1.5s infinite;
}
.skeleton-image-content {
width: 100%;
height: 100%;
background-color: #e6e6e6;
position: relative;
overflow: hidden;
}
.skeleton-image-content::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: shimmer 1.5s infinite;
}
/* 骨架屏说明文字 */
.skeleton-info {
height: 100rpx;
background-color: #FFF2F0;
margin: 30rpx;
border-radius: 10rpx;
animation: pulse 1.5s infinite;
}
/* 骨架屏底部按钮 */
.skeleton-submit-section {
position: fixed;
bottom: 0;
left: 0;
background-color: #fff;
padding: 30rpx;
width: 100vw;
}
.skeleton-submit-btn {
width: 100%;
height: 90rpx;
background-color: #e6e6e6;
border-radius: 45rpx;
animation: pulse 1.5s infinite;
}
/* 骨架屏动画 */
@keyframes pulse {
0% {
opacity: 0.6;
}
50% {
opacity: 0.8;
}
100% {
opacity: 0.6;
}
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* end */
.exception-report {
min-height: 100vh;
background-color: #fff;
padding-bottom: 40rpx;
}
/* 提示信息样式 */
.warning-tip {
background-color: #FFF2F0;
padding: 20rpx 30rpx;
border-bottom: 2rpx solid #f0f0f0;
text-align: center;
}
.warning-text {
font-size: 30rpx;
font-weight: 700;
color: var(--nav-diluted);
}
/* 通用区域样式 */
.problem-section,
.description-section,
.image-section {
background-color: #fff;
margin-top: 20rpx;
padding: 30rpx;
}
.section-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 30rpx;
}
/* 问题类型选择样式 */
.radio-group {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.radio-item {
display: flex;
align-items: center;
padding: 20rpx;
border: 2rpx solid #e6e6e6;
border-radius: 10rpx;
cursor: pointer;
transition: all 0.3s;
}
.radio-item.active {
border-color: #ff4d4f;
}
.radio-circle {
width: 36rpx;
height: 36rpx;
border: 2rpx solid #d9d9d9;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.radio-item.active .radio-circle {
border-color: #ff4d4f;
}
.radio-inner {
width: 20rpx;
height: 20rpx;
background-color: #ff4d4f;
border-radius: 50%;
}
.radio-text {
font-size: 30rpx;
color: #333;
}
/* 详细描述样式 */
.description-input {
border: 2rpx solid #e6e6e6;
border-radius: 10rpx;
padding: 20rpx;
font-size: 28rpx;
color: #333;
background-color: #fff;
min-height: 160rpx;
}
/* 图片上传样式 */
.image-upload {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
}
.upload-btn {
width: 200rpx;
height: 200rpx;
border: 2rpx dashed #e2e2e2;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #fafafa;
cursor: pointer;
}
.image-item {
position: relative;
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
overflow: hidden;
}
.image-placeholder {
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #666;
}
.delete-btn {
position: absolute;
top: 12rpx;
right: 12rpx;
border-radius: 50%;
width: 36rpx;
height: 36rpx;
}
/* 说明文字样式 */
.info-text {
display: flex;
margin: 30rpx;
padding: 20rpx;
background-color: #FFF2F0;
border-radius: 10rpx;
font-size: 26rpx;
color: var(--nav-diluted);
line-height: 1.5;
}
/* 提交按钮样式 */
.submit-section {
position: fixed;
bottom: 0;
left: 0;
background-color: #fff;
padding: 30rpx;
width: 100vw;
}
.submit-btn {
width: 100%;
height: 90rpx;
font-size: 32rpx;
border-radius: 45rpx;
background-color: var(--nav-diluted);
border: none;
}
</style>