first commit

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

View File

@@ -0,0 +1,503 @@
<template>
<view v-if="loading" class="skeleton-container">
<!-- 骨架屏 - 异常状态 -->
<view class="skeleton-status-section">
<view class="skeleton-line skeleton-status-text"></view>
</view>
<!-- 骨架屏 - 关联订单 -->
<view class="skeleton-section">
<view class="skeleton-line skeleton-section-title"></view>
<view class="skeleton-order-info">
<view class="skeleton-line skeleton-order-id"></view>
<view class="skeleton-line skeleton-order-item"></view>
<view class="skeleton-line skeleton-order-time"></view>
</view>
</view>
<!-- 骨架屏 - 异常详情 -->
<view class="skeleton-section">
<view class="skeleton-line skeleton-section-title"></view>
<view class="skeleton-detail-content">
<view class="skeleton-line skeleton-report-title"></view>
<view class="skeleton-line skeleton-report-desc"></view>
<view class="skeleton-image-container">
<view class="skeleton-image"></view>
<view class="skeleton-image"></view>
</view>
<view class="skeleton-line skeleton-report-time"></view>
</view>
</view>
<!-- 骨架屏 - 处理结果 -->
<view class="skeleton-section">
<view class="skeleton-line skeleton-section-title"></view>
<view class="skeleton-result-content">
<view class="skeleton-line skeleton-result-item"></view>
<view class="skeleton-line skeleton-result-time"></view>
<view class="skeleton-line skeleton-result-item"></view>
</view>
</view>
<!-- 骨架屏 - 补充说明 -->
<view class="skeleton-section">
<view class="skeleton-line skeleton-section-title"></view>
<view class="skeleton-textarea"></view>
</view>
<!-- 骨架屏 - 底部按钮 -->
<view class="skeleton-bottom-button">
<view class="skeleton-button"></view>
</view>
</view>
<view v-else class="abnormal-detail-page">
<!-- 异常状态 -->
<view class="status-section">
<text class="status-text">异常已上报 · 处理中</text>
</view>
<!-- 关联订单 -->
<view class="order-section">
<view class="section-title">关联订单</view>
<view class="order-info">
<view class="order-item">
<text class="order-label">订单号:</text>
<text class="order-value">MT20251017123456</text>
</view>
<view class="order-item">
<text class="order-value">酸菜鱼x1</text>
</view>
<view class="order-item">
<text class="order-value" style="color: #999999;">2025-10-17 18:30</text>
</view>
</view>
</view>
<!-- 异常详情 -->
<view class="detail-section">
<view class="section-title">异常详情</view>
<view class="detail-content"
style="padding: 20rpx 30rpx; background-color: #fafafa; border-radius: 20rpx; ">
<view class="report-section">
<view class="report-header">
<text class="report-title">骑手上报</text>
</view>
<view class="report-desc">
<text>餐品盖子没封好洒漏</text>
</view>
<!-- 图片展示区 -->
<view class="image-container">
<view class="image-placeholder"></view>
<view class="image-placeholder"></view>
</view>
<view class="report-time">
<text>2025-10-25 19:25</text>
</view>
</view>
</view>
</view>
<!-- 处理结果 -->
<view class="result-section">
<view class="section-title">处理结果</view>
<view class="result-content">
<view class="result-item">
<text class="result-text">同意调换菜品</text>
</view>
<view class="result-time">
<text>2025-10-25 20:10</text>
</view>
<view class="result-item">
<text class="result-text">已联系用户解决</text>
</view>
</view>
</view>
<!-- 补充说明 -->
<view class="supplement-section">
<view class="section-title">请补充说明(选填)</view>
<up-textarea v-model="supplementText" placeholder="如: 已补送米饭,请骑手带回"></up-textarea>
</view>
<view class="" style="width: 100vw; height: 140rpx;">
</view>
<!-- 底部按钮 -->
<view class="bottom-button">
<up-button type="primary" size="default" @click="submitSupplement" class="submit-btn">
提交补充说明
</up-button>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 补充说明文本
const supplementText = ref<string>('')
let loading=ref(true)
// 页面加载时的逻辑
onLoad(() => {
setTimeout(()=>{
loading.value=false
},1000)
})
// 提交补充说明
const submitSupplement = () => {
if (supplementText.value.trim()) {
// 这里可以添加提交逻辑
console.log('提交补充说明:', supplementText.value)
uni.showToast({
title: '提交成功',
icon: 'success'
})
} else {
uni.showToast({
title: '请输入补充说明',
icon: 'none'
})
}
}
</script>
<style lang="scss">
.abnormal-detail-page {
background-color: #fff;
overflow: hidden;
// 状态区域样式
.status-section {
background-color: #fff0f0;
padding: 30rpx 30rpx;
margin: 20rpx;
border-radius: 20rpx;
.status-text {
color: #FF4D4F;
font-size: 28rpx;
font-weight: 600;
}
}
// 通用区块样式
.order-section,
.detail-section,
.result-section,
.supplement-section {
background-color: #fff;
padding: 30rpx;
.section-title {
font-size: 30rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
}
// 订单信息样式
.order-info {
background-color: #FAFAFA;
padding: 20rpx 30rpx;
border-radius: 20rpx;
.order-item {
margin-bottom: 16rpx;
font-size: 28rpx;
.order-label {
color: #666;
}
.order-value {
color: #333;
}
}
}
// 异常详情样式
.report-section {
.report-header {
display: flex;
align-items: center;
margin-bottom: 16rpx;
.report-title {
font-size: 28rpx;
font-weight: 500;
color: #007aff;
margin-left: 8rpx;
}
}
.report-desc {
margin-bottom: 20rpx;
text {
font-size: 28rpx;
color: #333;
line-height: 42rpx;
}
}
// 图片容器样式
.image-container {
display: flex;
gap: 20rpx;
margin-bottom: 20rpx;
.image-placeholder {
width: 200rpx;
height: 200rpx;
border: 2rpx solid #333;
background-color: #fff;
border-radius: 8rpx;
}
}
.report-time {
text {
font-size: 24rpx;
color: #999;
}
}
}
// 处理结果样式
.result-content {
background-color: #FAFAFA;
padding: 20rpx 30rpx;
border-radius: 20rpx;
.result-item {
margin-bottom: 16rpx;
.result-text {
font-size: 28rpx;
color: #07c160;
}
}
.result-time {
margin-bottom: 20rpx;
text {
font-size: 24rpx;
color: #999;
}
}
}
// 补充说明样式
.supplement-input {
border: 2rpx solid #e0e0e0;
border-radius: 12rpx;
padding: 20rpx;
font-size: 28rpx;
color: #333;
background-color: #fafafa;
&::placeholder {
color: #999;
}
}
// 底部按钮样式
.bottom-button {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
padding: 20rpx 30rpx;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
.submit-btn {
height: 90rpx;
line-height: 90rpx;
font-size: 32rpx;
border-radius: 45rpx;
}
}
}
// 骨架屏基础样式
.skeleton-loading {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 8rpx;
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
// 骨架屏容器样式
.skeleton-container {
padding: 0 30rpx;
background-color: #fff;
min-height: 100vh;
}
// 骨架屏各模块通用样式
.skeleton-section {
margin-bottom: 30rpx;
}
.skeleton-line {
height: 32rpx;
background-color: #f0f0f0;
margin-bottom: 20rpx;
border-radius: 8rpx;
}
// 异常状态骨架样式
.skeleton-status-section {
padding: 30rpx 0;
margin-bottom: 30rpx;
background-color: #fff0f0;
border-radius: 20rpx;
padding-left: 30rpx;
padding-right: 30rpx;
}
.skeleton-status-text {
width: 60%;
height: 40rpx;
margin-bottom: 0;
}
// 区块标题骨架样式
.skeleton-section-title {
width: 20%;
height: 36rpx;
margin-bottom: 20rpx;
}
// 订单信息骨架样式
.skeleton-order-info {
background-color: #f9f9f9;
padding: 20rpx 20rpx;
border-radius: 12rpx;
}
.skeleton-order-id {
width: 80%;
height: 30rpx;
}
.skeleton-order-item {
width: 40%;
height: 30rpx;
}
.skeleton-order-time {
width: 50%;
height: 28rpx;
margin-bottom: 0;
}
// 异常详情骨架样式
.skeleton-detail-content {
background-color: #fafafa;
padding: 20rpx 30rpx;
border-radius: 20rpx;
}
.skeleton-report-title {
width: 30%;
height: 32rpx;
margin-bottom: 30rpx;
}
.skeleton-report-desc {
width: 70%;
height: 30rpx;
margin-bottom: 30rpx;
}
.skeleton-image-container {
display: flex;
margin-bottom: 30rpx;
}
.skeleton-image {
width: 200rpx;
height: 200rpx;
background-color: #f0f0f0;
margin-right: 20rpx;
border-radius: 12rpx;
}
.skeleton-report-time {
width: 50%;
height: 28rpx;
margin-bottom: 0;
}
// 处理结果骨架样式
.skeleton-result-content {
background-color: #f9f9f9;
padding: 20rpx 20rpx;
border-radius: 12rpx;
}
.skeleton-result-item {
width: 50%;
height: 30rpx;
}
.skeleton-result-time {
width: 50%;
height: 28rpx;
}
// 补充说明骨架样式
.skeleton-textarea {
height: 200rpx;
background-color: #f9f9f9;
border-radius: 12rpx;
margin-bottom: 140rpx;
}
// 底部按钮骨架样式
.skeleton-bottom-button {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 30rpx;
background-color: #fff;
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
}
.skeleton-button {
height: 100rpx;
background-color: #f0f0f0;
border-radius: 50rpx;
}
</style>

View File

@@ -0,0 +1,136 @@
<template>
<view style="margin: 20rpx 40rpx;">
<up-form labelPosition="left" labelWidth='90' :model="password" ref="form1">
<up-form-item label="手机号:" prop="userInfo.name" :borderBottom="true" ref="item1">
<up-input inputAlign='right' v-model="password.phone" readonly='true' border="none"></up-input>
</up-form-item>
<up-form-item label="验证码:" prop="userInfo.name" :borderBottom="true" ref="item1">
<up-input inputAlign='right' type='number' v-model="password.code" clearable='true' placeholder="请输入验证码"
border="none">
<template #suffix>
<up-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="X秒重新获取"></up-code>
<up-button @tap="getCode" :text="tips" type="success" size="mini"></up-button>
</template>
</up-input>
</up-form-item>
<up-form-item label="密码:" prop="userInfo.name" :borderBottom="true" ref="item1">
<up-input inputAlign='right' v-model="password.password" type="number" placeholder="请输入密码"
border="none"></up-input>
</up-form-item>
<up-form-item label="确认密码:" prop="userInfo.name" :borderBottom="true" ref="item1">
<up-input inputAlign='right' v-model="password.rePassword" type="number" placeholder="请再次输入密码"
border="none"></up-input>
</up-form-item>
</up-form>
<view class="" style="margin-top: 20rpx;">
<button @click="save()" :disabled='!password.password || !password.rePassword || !password.code '
class="logout-btn">确认</button>
</view>
</view>
</template>
<script setup lang="ts">
import { onShow, onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { Service } from "../../Service/Service";
import { CNRiderDataService } from "@/Service/CN/CNRiderDataService"
import { CNRiderLoginService } from '@/Service/CN/CNRiderLoginService'
let password = ref({
realPhone: '',
phone: '',
password: '',
code: '',
rePassword: ''
})
let tips = ref('')
const uCodeRef = ref(null);
onLoad((data : any) => {
getData()
});
onShow(() => {
});
const getData = () => {
CNRiderDataService.GetRiderInfo().then(res => {
if (res.code == 0) {
password.value.realPhone = res.data.riderInfo.phone
password.value.phone = res.data.riderInfo.phone.slice(0, 3) + '****' + res.data.riderInfo.phone.slice(-4)
}
})
}
// 验证码
const codeChange = (text) => {
tips.value = text;
};
const getCode = () => {
if (uCodeRef.value.canGetCode) {
// 模拟向后端请求验证码
uni.showLoading({
title: '正在获取验证码',
});
CNRiderLoginService.SendUserSms(password.value.realPhone, 'RiderUpPwd').then(res => {
if (res.code == 0) {
uni.hideLoading();
// 这里此提示会被start()方法中的提示覆盖
uni.$u.toast('验证码已发送');
// 通知验证码组件内部开始倒计时
uCodeRef.value.start();
} else {
Service.Msg(res.msg)
}
})
} else {
uni.$u.toast('倒计时结束后再发送');
}
};
const change = (e) => {
console.log('change', e);
};
const save = () => {
if (password.value.password !== password.value.rePassword) {
Service.Msg('两次密码不一致,请重新输入!')
return
}
CNRiderLoginService.UpdateRiderPassword(password.value.code, password.value.password, password.value.rePassword).then(res => {
if (res.code == 0) {
Service.Msg('修改成功!')
setTimeout(() => {
Service.GoPageBack()
}, 1500)
} else {
Service.Msg(res.msg)
}
})
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
.logout-btn {
background-color: var(--nav-diluted);
color: #fff;
font-weight: 500;
border-radius: 10rpx;
height: 80rpx;
line-height: 80rpx;
font-size: 30rpx;
margin: 0;
border: none;
}
</style>