This commit is contained in:
qiuyuan 2025-08-07 12:22:19 +08:00
parent 0adc144dc4
commit 42b6d2db33
6 changed files with 840 additions and 704 deletions

View File

@ -34,7 +34,7 @@
<view class="info-item">
<u-icon name="clock" size="26" color="#5b9cf8"></u-icon>
<view class="info-text"><text class="info-label">活动时间</text>{{ activityInfo.openAt }}</view>
<view class="info-text"><text class="info-label">开始时间</text>{{formatTime(activityInfo.startAt,"YYYY-MM-DD HH:mm:ss") }}</view>
</view>
<view class="info-item">

View File

@ -12,22 +12,26 @@
<u--textarea placeholder="请输入求助内容..." v-model="content" border height="300"></u--textarea>
</view>
<!-- 图片上传 -->
<!-- 图片上传 - 修改后的上传组件 -->
<view class="upload-section">
<u-upload
@afterRead="afterRead"
@delete="deletePic"
:fileList="fileList"
:maxCount="9"
:previewFullImage="true"
:accept="'image/*'"
:capture="['album', 'camera']"
width="220"
height="220">
<view class="upload-btn" v-if="fileList.length < 1">
<u-icon name="plus" size="40" color="#666"></u-icon>
<view class="label">
<u-icon name="photo" color="#3B8CFF" size="38"></u-icon>
上传照片
</view>
</u-upload>
<view class="upload-area">
<view class="upload-list">
<view class="upload-item" v-for="(item, index) in fileList" :key="index">
<image :src="item.url" mode="aspectFill" @click="previewImage(index)"></image>
<view class="delete-btn" @click="handleDelete(index)">
<u-icon name="close" color="#fff" size="24"></u-icon>
</view>
</view>
<view class="upload-btn" @click="showUploadAction" v-if="fileList.length < 9">
<u-icon name="plus" size="40" color="#c0c4cc"></u-icon>
</view>
</view>
</view>
<text class="note">照片支持分批上传但最大数量为9</text>
</view>
<!-- 发布按钮 -->
@ -35,11 +39,9 @@
<u-button type="primary" text="立即发布" @click="publish"></u-button>
</view>
</view>
</view>
<Footer></Footer>
</view>
</template>
<script>
@ -70,100 +72,132 @@
delta: 1 //
});
},
async afterRead(event) {
//
const files = event.file; //
const uploadFiles = Array.isArray(files) ? files : [files];
// -
for (const file of uploadFiles) {
// 1
const fileExt = file.url.split('.').pop().toLowerCase();
const allowedExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
// 2MIME
const isImage = file.type?.startsWith('image/') ||
allowedExts.includes(fileExt);
if (!isImage) {
uni.showToast({
title: '只能上传图片文件(JPG/PNG等)',
icon: 'none',
duration: 2000
//
showUploadAction() {
uni.showActionSheet({
itemList: ['拍照', '从相册选择'],
success: (res) => {
if (res.tapIndex === 0) {
this.chooseMedia('camera');
} else {
this.chooseMedia('album');
}
}
});
return;
}
}
uni.showLoading({ title: '上传中...' });
},
//
async chooseMedia(sourceType) {
try {
//
const uploadPromises = uploadFiles.map(file => this.uploadAvatar(file.url));
const uploadedUrls = await Promise.all(uploadPromises);
// URL
this.uploadedImageUrls = [...this.uploadedImageUrls, ...uploadedUrls];
//
this.fileList = [
...this.fileList,
...uploadFiles.map((file, index) => ({
url: file.url,
status: 'success',
uploadedUrl: uploadedUrls[index]
}))
];
uni.showToast({ title: '上传成功', icon: 'success' });
} catch (error) {
console.error('上传失败:', error);
uni.showToast({
title: '上传失败: ' + error.message,
icon: 'none',
duration: 2000
// 1.
const res = await new Promise((resolve, reject) => {
uni.chooseImage({
count: 9 - this.fileList.length,
sourceType: [sourceType === 'camera' ? 'camera' : 'album'],
success: resolve,
fail: reject
});
} finally {
uni.hideLoading();
});
// 2.
const newFiles = res.tempFilePaths.map(url => ({
url,
status: 'uploading'
}));
this.fileList = [...this.fileList, ...newFiles];
// 3.
for (const file of newFiles) {
await this.uploadFile(file);
}
} catch (err) {
console.error('选择图片失败:', err);
uni.showToast({ title: '选择图片失败', icon: 'none' });
}
},
deletePic(event) {
// URL
const deletedFile = this.fileList[event.index];
this.uploadedImageUrls = this.uploadedImageUrls.filter(
url => url !== deletedFile.uploadedUrl
);
//
this.fileList.splice(event.index, 1);
},
uploadAvatar(filePath) {
return new Promise((resolve, reject) => {
//
async uploadFile(file) {
try {
const res = await new Promise((resolve, reject) => {
uni.uploadFile({
url: `${BASE_URL}/api/v1/upload`,
filePath: filePath,
filePath: file.url,
name: 'file',
header: {
'Authorization': `Bearer ${uni.getStorageSync('token')}`
'Authorization': `Bearer ${uni.getStorageSync('token')}`,
'Content-Type': 'multipart/form-data'
},
success: (uploadRes) => {
try {
const res = JSON.parse(uploadRes.data);
if (res && res.success) {
resolve(res.data);
const data = JSON.parse(uploadRes.data);
if (data.success) {
resolve(data.data); // 使URL
} else {
reject(new Error(res.message || '上传失败'));
reject(data.message || '上传失败');
}
} catch (e) {
reject(new Error('解析响应失败'));
reject('解析响应失败');
}
},
fail: (err) => {
reject(new Error('上传失败: ' + JSON.stringify(err)));
}
fail: (err) => reject(err)
});
});
//
const index = this.fileList.findIndex(f => f.url === file.url);
if (index !== -1) {
this.$set(this.fileList, index, {
...file,
status: 'success',
serverUrl: res // URL
});
//
this.uploadedImageUrls.push(res);
}
} catch (err) {
console.error('上传失败:', err);
const index = this.fileList.findIndex(f => f.url === file.url);
if (index !== -1) {
this.$set(this.fileList, index, {
...file,
status: 'failed',
error: err.message || err
});
}
uni.showToast({
title: `上传失败: ${err.message || err}`,
icon: 'none'
});
}
},
//
previewImage(index) {
const images = this.fileList.map(item => item.url);
uni.previewImage({
current: index,
urls: images
});
},
//
handleDelete(index) {
const file = this.fileList[index];
if (file.serverUrl) {
const imageIndex = this.uploadedImageUrls.indexOf(file.serverUrl);
if (imageIndex !== -1) this.uploadedImageUrls.splice(imageIndex, 1);
}
this.fileList.splice(index, 1);
},
async publish() {
if (!this.title.trim()) {
uni.showToast({
@ -226,7 +260,6 @@
<style lang="scss" scoped>
.container {
width: 100%;
height: 100vh;
/* 占满整个视口高度 */
@ -263,20 +296,76 @@
margin-bottom: 30rpx;
}
.upload-btn {
width: 220rpx;
height: 220rpx;
.upload-section {
.label {
font-size: 32rpx;
color: #333;
font-weight: 500;
margin-bottom: 24rpx;
display: flex;
align-items: center;
.u-icon {
margin-right: 12rpx;
}
}
.upload-area {
margin-top: 16rpx;
.upload-list {
display: flex;
flex-wrap: wrap;
margin: -5rpx;
.upload-item, .upload-btn {
width: 160rpx;
height: 160rpx;
margin: 5rpx;
position: relative;
background: #f8f8f8;
border-radius: 8rpx;
display: flex;
justify-content: center;
background-color: #f0f0f0;
border-radius: 10rpx;
align-items: center;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
.delete-btn {
position: absolute;
right: 0;
top: 0;
width: 40rpx;
height: 40rpx;
background: rgba(0, 0, 0, 0.5);
border-radius: 0 0 0 8rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.upload-btn {
border: 1rpx dashed #c0c4cc;
}
}
}
.note {
font-size: 24rpx;
color: #999;
margin-top: 24rpx;
display: block;
}
}
.publish-section {
text-align: center;
margin-top: 100rpx;
}
}
</style>

View File

@ -2,41 +2,55 @@
<view class="work-order-detail">
<!-- 头部用户信息区域 -->
<view class="header">
<image class="avatar" :src="detailObj.customerPortrait" mode="aspectFill"></image>
<text class="username">{{detailObj.customerName}}</text>
<image class="avatar" :src="`${IMAGE_BASE_URL}`+detailObj.customerPortrait|| '/static/index/nav.png'" mode="aspectFill"></image>
<text class="username">{{detailObj.customerName || '未知用户'}}</text>
</view>
<!-- 图片区域 - 编辑状态下可修改 -->
<view class="image-area">
<template v-if="!isEditing">
<template v-if="detailObj.images && detailObj.images.length > 0">
<image
class="work-order-img"
:src="`${IMAGE_BASE_URL}${detailObj.images && detailObj.images[0] ? detailObj.images[0] : ''}`"
mode="widthFix"
v-if="!isEditing && detailObj.images && detailObj.images.length > 0">
</image>
<view v-else>
:src="`${IMAGE_BASE_URL}${detailObj.images[0]}`"
mode="aspectFit"
/>
</template>
<view class="empty-placeholder" v-else>
<u-icon name="photo" size="48" color="#c0c4cc"></u-icon>
<text class="empty-text">暂无图片</text>
</view>
</template>
<template v-else>
<image
:src="isEditing ? workOrderImg : `${IMAGE_BASE_URL}${detailObj.images && detailObj.images[0] ? detailObj.images[0] : ''}`" >
</image>
<view class="upload-btn" @click="uploadImage" v-if="isEditing">
class="work-order-img"
:src="tempImagePath || (detailObj.images && detailObj.images[0] ? `${IMAGE_BASE_URL}${detailObj.images[0]}` : '')"
mode="aspectFit"
v-if="tempImagePath || (detailObj.images && detailObj.images.length > 0)"
/>
<view class="empty-placeholder" v-else>
<u-icon name="photo" size="48" color="#c0c4cc"></u-icon>
<text class="empty-text">暂无图片</text>
</view>
<view class="upload-btn" @click="uploadImage">
<u-icon name="camera" size="40" color="#fff"></u-icon>
<text class="upload-text">更换图片</text>
</view>
<text class="upload-text">{{tempImagePath ? '更换图片' : '上传图片'}}</text>
</view>
</template>
</view>
<!-- 标题与日期 -->
<view class="title-area">
<text class="title" v-if="!isEditing">{{detailObj.title}}</text>
<view class="title-area" :class="{editing: isEditing}">
<text class="title" v-if="!isEditing">{{detailObj.title || '无标题'}}</text>
<input class="title-input" v-model="editLabel" v-else placeholder="请输入标题" />
<text class="date">{{formatTime(detailObj.createdAt,"YYYY-MM-DD")}}</text>
<text class="date">{{formatTime(detailObj.createdAt,"YYYY-MM-DD") || '未知日期'}}</text>
</view>
<!-- 工单详情内容 - 编辑状态下可修改 -->
<view class="content">
<view class="content" :class="{editing: isEditing}">
<view class="label">
<text>求助内容</text>
<text v-if="!isEditing" style="font-weight: normal;">{{detailObj.content}}</text>
<text v-if="!isEditing" class="content-text">{{detailObj.content || '无内容描述'}}</text>
<textarea
class="edit-textarea"
v-model="editTitle"
@ -51,16 +65,18 @@
<view class="btn-group">
<u-button
@click="handleModify"
:type="isEditing ? 'success' : 'primary'"
:type="isEditing ? 'primary' : 'primary'"
class="action-btn"
:loading="isLoading"
:custom-style="btnStyle"
>
{{isEditing ? '保存修改' : '修改'}}
</u-button>
<u-button
@click="handleWithdraw"
:type="isEditing ? 'default' : 'primary'"
:type="isEditing ? 'error' : 'error'"
class="action-btn"
:custom-style="btnStyle"
>
{{isEditing ? '取消编辑' : '撤回'}}
</u-button>
@ -81,47 +97,40 @@
formatTime,
isEditing: false, //
isLoading: false, //
workOrderImg: '', //
tempImagePath: '', //
//
editLabel: '',
editAddress: '',
editTitle: '',
detailObj: {
images: [], // images
customerPortrait: '',
customerName: '',
createdAt: '',
label: '',
address: '',
title: '',
content: '',
id: ''
},
tempImagePath: '' //
btnStyle: {
width: '45%',
height: '80rpx'
}
};
},
mounted() {
let obj = uni.getStorageSync("Detail") || {};
console.log("===boj",obj)
this.detailObj = {
...obj //
};
// workOrderImg
if (this.detailObj.images && this.detailObj.images.length > 0) {
this.workOrderImg = `${IMAGE_BASE_URL}${this.detailObj.images[0]}`;
}
},
methods: {
//
//
uploadImage() {
uni.chooseImage({
count: 1,
success: (res) => {
const tempFilePaths = res.tempFilePaths[0];
this.tempImagePath = tempFilePaths;
this.workOrderImg = tempFilePaths;
this.tempImagePath = res.tempFilePaths[0];
uni.showToast({
title: '图片已更换',
title: '图片已选择',
icon: 'success'
});
},
@ -161,7 +170,7 @@
});
if (res && res.success) {
return res.data; //
return res.data;
} else {
throw new Error(res.message || '上传失败');
}
@ -180,11 +189,7 @@
if (!this.isEditing) {
//
this.editLabel = this.detailObj.title || '';
this.editAddress = this.detailObj.address || '';
this.editTitle = this.detailObj.content || '';
if (!this.workOrderImg && this.detailObj.images && this.detailObj.images.length > 0) {
this.workOrderImg = `${IMAGE_BASE_URL}${this.detailObj.images[0]}`;
}
this.isEditing = true;
} else {
//
@ -196,8 +201,7 @@
//
if (this.tempImagePath) {
const uploadedPath = await this.uploadImageToServer(this.tempImagePath);
images = [uploadedPath]; //
this.workOrderImg = `${IMAGE_BASE_URL}${uploadedPath}`;
images = [uploadedPath];
}
const requestData = {
@ -210,7 +214,6 @@
const res = await put(`/api/v1/app_auth/reciprocities/${this.detailObj.id}`, requestData);
if (res && res.success) {
//
this.detailObj = {
...this.detailObj,
...requestData
@ -222,12 +225,7 @@
});
this.isEditing = false;
this.tempImagePath = ''; //
// workOrderImg
if (images.length > 0) {
this.workOrderImg = `${IMAGE_BASE_URL}${images[0]}`;
}
this.tempImagePath = '';
} else {
throw new Error(res.message || '修改失败');
}
@ -249,10 +247,6 @@
//
this.isEditing = false;
this.tempImagePath = '';
//
if (this.detailObj.images && this.detailObj.images.length > 0) {
this.workOrderImg = `${IMAGE_BASE_URL}${this.detailObj.images[0]}`;
}
} else {
//
try {
@ -264,7 +258,6 @@
title: '撤回成功',
icon: 'success'
});
//
uni.navigateBack();
} else {
throw new Error(res.message || '撤回失败');
@ -285,39 +278,39 @@
</script>
<style lang="scss" scoped>
/* 原有样式保持不变 */
//
$primary-color: #007AFF;
$success-color: #4cd964;
$warning-color: #FF9500;
$error-color: #dd524d;
$text-color: #333;
$subtext-color: #999;
$border-radius: 10rpx;
$padding-base: 15rpx;
$border-radius: 12rpx;
$padding-base: 20rpx;
$font-base: 32rpx;
// mixin
@mixin flex-center {
display: flex;
align-items: center;
}
$shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
.work-order-detail {
padding: $padding-base;
width: 90%;
margin: 0 auto;
border-radius: 10rpx;
box-shadow: 0rpx 2rpx 10rpx rgba(0, 0, 0, 0.25);
width: 92%;
margin: 20rpx auto;
border-radius: $border-radius;
box-shadow: $shadow;
background-color: #fff;
.header {
@include flex-center;
display: flex;
align-items: center;
margin-bottom: $padding-base;
padding-bottom: $padding-base;
border-bottom: 1rpx solid #f5f5f5;
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin-right: 10rpx;
margin-right: 20rpx;
background-color: #f5f5f5;
}
.username {
@ -330,107 +323,141 @@
.image-area {
position: relative;
margin-bottom: $padding-base;
min-height: 200rpx;
background-color: #f5f5f5;
height: 400rpx;
background-color: #f9f9f9;
border-radius: $border-radius;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.work-order-img {
width: 100%;
border-radius: $border-radius;
max-height: 400rpx;
height: 100%;
object-fit: contain;
}
.empty-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #c0c4cc;
width: 100%;
height: 100%;
.empty-text {
font-size: 28rpx;
margin-top: 16rpx;
color: #c0c4cc;
}
}
.upload-btn {
position: absolute;
bottom: 20rpx;
right: 20rpx;
bottom: 30rpx;
right: 30rpx;
background: rgba(0, 0, 0, 0.6);
padding: 8rpx 20rpx;
border-radius: 30rpx;
@include flex-center;
padding: 12rpx 24rpx;
border-radius: 40rpx;
display: flex;
align-items: center;
justify-content: center;
.upload-text {
color: #fff;
font-size: 24rpx;
margin-left: 8rpx;
font-size: 26rpx;
margin-left: 10rpx;
}
}
}
.title-area {
@include flex-center;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: $padding-base;
border-bottom: 2rpx solid $subtext-color;
height: 70rpx;
line-height: 70rpx;
padding-bottom: $padding-base;
border-bottom: 1rpx solid #f5f5f5;
&.editing {
border-bottom: 1rpx solid #eaeaea;
}
.title {
font-size: $font-base + 2rpx;
font-size: $font-base + 4rpx;
font-weight: bold;
color: $text-color;
max-width: 70%;
flex: 1;
}
.title-input {
font-size: $font-base + 2rpx;
font-size: $font-base + 4rpx;
font-weight: bold;
color: $text-color;
width: 70%;
flex: 1;
padding: 10rpx;
background: #f8f8f8;
border-radius: 8rpx;
border: 1rpx solid #eaeaea;
}
.date {
font-size: $font-base - 4rpx;
color: $subtext-color;
margin-left: 20rpx;
}
}
.content {
margin-bottom: $padding-base;
line-height: 50rpx;
font-size: 24rpx;
margin-bottom: $padding-base * 2;
font-size: $font-base;
&.editing {
padding: 10rpx;
background: #fafafa;
border-radius: $border-radius;
}
.label {
display: flex;
flex-direction: column;
text {
font-weight: bold;
}
margin-bottom: 20rpx;
margin-bottom: 10rpx;
}
.edit-input {
width: 95%;
padding: 10rpx;
background: #f8f8f8;
border-radius: 8rpx;
margin-top: 5rpx;
.content-text {
font-weight: normal;
color: #666;
line-height: 1.6;
}
}
.edit-textarea {
width: 95%;
padding: 10rpx;
background: #f8f8f8;
width: 100%;
padding: 16rpx;
background: #fff;
border-radius: 8rpx;
margin-top: 5rpx;
min-height: 150rpx;
border: 1rpx solid #eaeaea;
min-height: 200rpx;
font-size: $font-base;
line-height: 1.5;
}
}
.btn-group {
@include flex-center;
justify-content: space-around;
margin-top: 30rpx;
gap:30rpx;
display: flex;
justify-content: space-between;
margin-top: 40rpx;
gap: 20rpx;
.action-btn {
width: 30%; //
height: 80rpx;
border-radius: 40rpx;
font-size: $font-base - 4rpx;
flex: 1;
border-radius: 50rpx;
font-size: $font-base;
font-weight: bold;
}
}
}

View File

@ -3,7 +3,7 @@
<!-- 主帖内容 -->
<view class="post-container">
<view class="post-header">
<image class="avatar" :src="postData.customerPortrait" mode="aspectFill"></image>
<image class="avatar" :src="`${IMAGE_BASE_URL}`+postData.customerPortrait" mode="aspectFill"></image>
<view class="post-info">
<text class="username">{{ postData.customerName }}</text>
<text class="time">{{ formatTime(postData.pushAt) }}</text>
@ -32,7 +32,8 @@
<view v-for="comment in flatComments" :key="comment.id" class="comment-item"
:class="{'is-reply': comment.toUserName}">
<view class="comment-header">
<image class="avatar" :src="comment.pusherPortrait" mode="aspectFill"></image>
<image class="avatar"
:src="comment.pusherPortrait === '/static/imgs/index/nav.png' ? comment.pusherPortrait : `${IMAGE_BASE_URL}${comment.pusherPortrait}`" mode="aspectFill"></image>
<view class="comment-user-info">
<text class="username">{{ comment.pusherName }}</text>
<view class="meta-info">

View File

@ -41,7 +41,7 @@
</view>
<view class="item_right">
<view class="right_nav">
<image :src="item.customerPortrait ?item.customerPortrait :`/static/imgs/index/nav.png`" class="nav"></image>
<image :src="item.customerPortrait ?`${IMAGE_BASE_URL}`+item.customerPortrait :`/static/imgs/index/nav.png`" class="nav"></image>
<image src="/static/imgs/index/nav_bg.png" class="bg"></image>
</view>
<view class="right_name">
@ -317,7 +317,7 @@
.bg {
position: absolute;
z-index: 1;
top: 20rpx;
top: 0rpx;
left: -118rpx;
width: 260rpx;
height: 260rpx;

View File

@ -37,9 +37,6 @@
工单内容
</view>
<textarea v-model="workOrderContent" placeholder="请输入工单详细内容..." class="textarea" />
<view class="voice-icon">
<u-icon name="mic" color="#409EFF" size="36"></u-icon>
</view>
</view>
<!-- 联系人信息 -->
@ -56,7 +53,13 @@
<u-icon name="phone" color="#3B8CFF" size="38"></u-icon>
电话
</view>
<input v-model="customerPhone" placeholder="请输入联系人电话" class="contact-input" type="number" />
<input
v-model="customerPhone"
placeholder="请输入联系人电话"
class="contact-input"
type="number"
@blur="validatePhone"
/>
</view>
</view>
@ -151,6 +154,19 @@ export default {
this.getOrderTypeList();
},
methods: {
//
validatePhone() {
if (!this.customerPhone) return true;
const phoneReg = /^1[3-9]\d{9}$/;
if (!phoneReg.test(this.customerPhone)) {
uni.showToast({
title: '请输入正确的手机号码',
icon: 'none'
});
return false;
}
return true;
},
//
showUploadAction() {
uni.showActionSheet({
@ -350,8 +366,11 @@ export default {
this.fileList.splice(index, 1);
},
// ...
async handleSubmit() {
//
if (!this.validatePhone()) {
return;
}
if (!this.workOrderContent) {
uni.showToast({
title: '请填写工单内容',