Merge branch 'main' of https://gitlab.guxuan.icu/Leo_Ding/JinShan_uniapp
This commit is contained in:
Leo_Ding
commit
a411e94890
@ -96,7 +96,7 @@
|
||||
<text class="card-desc">维修方便便捷</text>
|
||||
<view class="card-bg"></view>
|
||||
</view>
|
||||
<image class="card-icon" src="/static/imgs/index/weixiu.png"></image>
|
||||
<image class="card-icon" src="/static/imgs/index/weixiu.png" style="width: 80rpx;height: 80rpx;bottom: 32rpx;"></image>
|
||||
</view>
|
||||
|
||||
<!-- <view class="service-card large card-3" @click="goDetail('neighborList')" hover-class="card-hover">
|
||||
@ -522,13 +522,13 @@
|
||||
|
||||
&.card-2 {
|
||||
.card-bg {
|
||||
background: #ff7e7e;
|
||||
top: -30rpx;
|
||||
background: #5b9cf8;
|
||||
top: -50rpx;
|
||||
right: -30rpx;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
filter: drop-shadow(0 4rpx 8rpx rgba(255, 126, 126, 0.3));
|
||||
filter: drop-shadow(0 4rpx 8rpx rgba(91, 156, 248, 0.3));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<view class="avatar-section">
|
||||
<view class="avatar-wrapper">
|
||||
<image class="avatar" :src="userInfo.avatarUrl || '/static/imgs/index/nav.png'"
|
||||
mode="aspectFill"></image>
|
||||
mode="aspectFill" @click="onAvatarClick"></image>
|
||||
<view class="edit-icon" @click="handleEditClick">
|
||||
<u-icon name="edit-pen" color="#fff" size="24"></u-icon>
|
||||
</view>
|
||||
@ -23,7 +23,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能按钮区域 -->
|
||||
<view class="function-card">
|
||||
<view class="button-item" v-for="(item, index) in choseList" :key="index" @click="goPage(item)">
|
||||
@ -34,7 +33,6 @@
|
||||
<u-icon name="arrow-right" color="#c8c9cc" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 修改用户信息弹窗 -->
|
||||
<u-modal :show="showEditModal" :title="isLogin ? '修改用户信息' : '微信授权登录'" :show-confirm-button="isLogin"
|
||||
:show-cancel-button="isLogin" @confirm="handleSubmit" @cancel="handleCancel" confirm-color="#2979ff"
|
||||
@ -55,25 +53,33 @@
|
||||
</button>
|
||||
<view class="auth-tip">登录即表示同意《用户协议》和《隐私政策》</view>
|
||||
</view>
|
||||
|
||||
<!-- 已登录时显示编辑表单 -->
|
||||
<view v-else class="edit-section">
|
||||
<view class="form-item">
|
||||
<text class="form-label">头像：</text>
|
||||
<u-upload :file-list="avatarList" :max-count="1" @afterRead="handleAvatarUpload"
|
||||
@delete="handleAvatarDelete" width="160" height="160" preview-full-image>
|
||||
<view slot="delete" class="custom-delete">
|
||||
<u-icon name="close" color="#fff" size="24"></u-icon>
|
||||
<view class="avatar-upload-container" @click="onAvatarClick">
|
||||
<view class="avatar-preview">
|
||||
<image
|
||||
v-if="avatarList.length > 0"
|
||||
:src="avatarList[0].url"
|
||||
mode="aspectFill"
|
||||
class="avatar-img">
|
||||
</image>
|
||||
<view v-else class="avatar-placeholder">
|
||||
<u-icon name="plus" color="#c0c4cc" size="28"></u-icon>
|
||||
<text class="placeholder-text">点击上传</text>
|
||||
</view>
|
||||
</u-upload>
|
||||
<view class="upload-tip">点击上传，建议尺寸1:1</view>
|
||||
<view v-if="avatarList.length > 0" class="avatar-delete" @click.stop="handleAvatarDelete">
|
||||
<u-icon name="close" color="#fff" size="26"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="upload-tip">点击上传，支持拍照或从相册选择</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">姓名：</text>
|
||||
<u-input v-model="formData.name" placeholder="请输入姓名" border="bottom" clearable></u-input>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">简介：</text>
|
||||
<u-input v-model="formData.bio" type="textarea" placeholder="请输入简介" :maxlength="200"
|
||||
@ -84,7 +90,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</u-modal>
|
||||
|
||||
<u-modal
|
||||
:show="showPhoneDialog"
|
||||
title="联系社区"
|
||||
@ -98,7 +103,6 @@
|
||||
<text class="phone-number">{{communityPhone}}</text>
|
||||
</view>
|
||||
</u-modal>
|
||||
|
||||
<Footer></Footer>
|
||||
</view>
|
||||
</template>
|
||||
@ -113,7 +117,6 @@
|
||||
IMAGE_BASE_URL,
|
||||
BASE_URL
|
||||
} from '@/utils/config';
|
||||
import { navigateTo } from '@/utils/router';
|
||||
export default {
|
||||
components: {
|
||||
Footer
|
||||
@ -179,6 +182,44 @@ import { navigateTo } from '@/utils/router';
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
// 新增：点击头像触发上传
|
||||
onAvatarClick() {
|
||||
if (!this.isLogin) {
|
||||
this.showEditModal = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果正在上传，则不处理
|
||||
if (this.uploading) return;
|
||||
|
||||
// 调用选择图片方法
|
||||
uni.chooseImage({
|
||||
count: 1, // 只选一张
|
||||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||||
success: (res) => {
|
||||
// 选择成功后，获取临时文件路径
|
||||
const tempFilePaths = res.tempFilePaths;
|
||||
if (tempFilePaths && tempFilePaths.length > 0) {
|
||||
// 构造一个类似file对象的结构，用于handleAvatarUpload
|
||||
const file = {
|
||||
url: tempFilePaths[0]
|
||||
};
|
||||
// 调用上传方法
|
||||
this.handleAvatarUpload({ file });
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('选择图片失败', err);
|
||||
uni.showToast({
|
||||
title: '选择图片失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 其他方法保持不变...
|
||||
handleCloseModal() {
|
||||
this.showPhoneDialog = false;
|
||||
},
|
||||
@ -203,34 +244,28 @@ import { navigateTo } from '@/utils/router';
|
||||
this.clearUserData();
|
||||
}
|
||||
},
|
||||
|
||||
// 更新用户信息
|
||||
updateUserInfo(data) {
|
||||
// 显示时拼接IMAGE_BASE_URL
|
||||
const avatarUrl = data.avatar ? `${IMAGE_BASE_URL}${data.avatar}` : '/static/imgs/index/nav.png';
|
||||
|
||||
this.userInfo = {
|
||||
nickName: data.name || data.nickName || '未命名用户',
|
||||
avatarUrl: avatarUrl,
|
||||
bio: data.introduce || data.bio || '这家伙很懒，什么都没有写~',
|
||||
phone: data.phone || ''
|
||||
};
|
||||
|
||||
// 更新显示头像
|
||||
this.displayAvatar = this.userInfo.avatarUrl;
|
||||
|
||||
this.formData = {
|
||||
name: this.userInfo.nickName,
|
||||
bio: this.userInfo.bio
|
||||
};
|
||||
|
||||
if (this.userInfo.avatarUrl) {
|
||||
this.avatarList = [{
|
||||
url: this.userInfo.avatarUrl
|
||||
}];
|
||||
}
|
||||
},
|
||||
|
||||
// 清除用户数据
|
||||
clearUserData() {
|
||||
this.isLogin = false;
|
||||
@ -247,20 +282,17 @@ import { navigateTo } from '@/utils/router';
|
||||
uni.removeStorageSync('token');
|
||||
uni.removeStorageSync('userInfo');
|
||||
},
|
||||
|
||||
// 处理编辑点击
|
||||
handleEditClick() {
|
||||
if (!this.isLogin) {
|
||||
this.showEditModal = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// 已登录时填充表单数据
|
||||
this.formData = {
|
||||
name: this.userInfo.nickName,
|
||||
bio: this.userInfo.bio
|
||||
};
|
||||
|
||||
if (this.userInfo.avatarUrl) {
|
||||
this.avatarList = [{
|
||||
url: this.userInfo.avatarUrl
|
||||
@ -268,10 +300,8 @@ import { navigateTo } from '@/utils/router';
|
||||
} else {
|
||||
this.avatarList = [];
|
||||
}
|
||||
|
||||
this.showEditModal = true;
|
||||
},
|
||||
|
||||
// 获取用户信息
|
||||
onGetUserInfo(e) {
|
||||
if (e.detail.userInfo) {
|
||||
@ -286,13 +316,12 @@ import { navigateTo } from '@/utils/router';
|
||||
this.showEditModal = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 微信登录获取code
|
||||
wxLogin() {
|
||||
uni.showLoading({
|
||||
title: '登录中...'
|
||||
});
|
||||
|
||||
this.showEditModal = false;
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: (loginRes) => {
|
||||
@ -308,17 +337,14 @@ import { navigateTo } from '@/utils/router';
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 发送登录请求
|
||||
async sendLoginRequest(code) {
|
||||
try {
|
||||
const res = await post('/api/v1/apps/login/weixins', {
|
||||
code: code
|
||||
});
|
||||
|
||||
if (res.success) {
|
||||
uni.setStorageSync('token', res.data.access_token);
|
||||
|
||||
if (!res.data.phone) {
|
||||
this.showPhoneButton = true;
|
||||
uni.showToast({
|
||||
@ -340,7 +366,6 @@ import { navigateTo } from '@/utils/router';
|
||||
console.error('登录接口错误:', err);
|
||||
}
|
||||
},
|
||||
|
||||
// 获取手机号
|
||||
async getPhoneNumber(e) {
|
||||
if (e.detail.errMsg !== "getPhoneNumber:ok") {
|
||||
@ -350,16 +375,13 @@ import { navigateTo } from '@/utils/router';
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '获取手机号中...'
|
||||
});
|
||||
|
||||
try {
|
||||
const res = await post('/api/v1/app_auth/weixin/bind_phone', {
|
||||
code: e.detail.code
|
||||
});
|
||||
|
||||
if (res.success) {
|
||||
await this.loginComplete(res.data);
|
||||
} else {
|
||||
@ -374,7 +396,6 @@ import { navigateTo } from '@/utils/router';
|
||||
console.error('绑定手机号失败:', err);
|
||||
}
|
||||
},
|
||||
|
||||
// 登录完成处理
|
||||
async loginComplete(data) {
|
||||
try {
|
||||
@ -385,7 +406,6 @@ import { navigateTo } from '@/utils/router';
|
||||
uni.setStorageSync('userInfo', res.data);
|
||||
this.updateUserInfo(res.data);
|
||||
this.isLogin = true;
|
||||
// this.showEditModal = false;
|
||||
this.showPhoneButton = false;
|
||||
uni.showToast({
|
||||
title: '登录成功'
|
||||
@ -401,21 +421,17 @@ import { navigateTo } from '@/utils/router';
|
||||
console.error('登录完成处理失败:', err);
|
||||
}
|
||||
},
|
||||
|
||||
// 上传头像
|
||||
async handleAvatarUpload(event) {
|
||||
if (!this.isLogin) {
|
||||
this.showEditModal = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const {
|
||||
file
|
||||
} = event;
|
||||
if (!file || !file.url) return;
|
||||
|
||||
this.uploading = true;
|
||||
|
||||
try {
|
||||
// 检查文件大小
|
||||
const fileInfo = await new Promise((resolve, reject) => {
|
||||
@ -425,17 +441,13 @@ import { navigateTo } from '@/utils/router';
|
||||
fail: reject
|
||||
});
|
||||
});
|
||||
|
||||
if (fileInfo.size > 3 * 1024 * 1024) {
|
||||
throw new Error('图片大小不能超过2MB');
|
||||
throw new Error('图片大小不能超过3MB');
|
||||
}
|
||||
|
||||
// 上传到服务器
|
||||
const avatarUrl = await this.uploadAvatar(file.url);
|
||||
|
||||
// 更新用户信息
|
||||
await this.updateUserAvatar(avatarUrl);
|
||||
|
||||
uni.showToast({
|
||||
title: '头像上传成功'
|
||||
});
|
||||
@ -449,7 +461,6 @@ import { navigateTo } from '@/utils/router';
|
||||
this.uploading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 上传头像到服务器
|
||||
uploadAvatar(filePath) {
|
||||
return new Promise((resolve, reject) => {
|
||||
@ -478,7 +489,6 @@ import { navigateTo } from '@/utils/router';
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 上传头像到服务器
|
||||
async updateUserAvatar(avatarUrl) {
|
||||
try {
|
||||
@ -488,7 +498,6 @@ import { navigateTo } from '@/utils/router';
|
||||
introduce: this.formData.bio,
|
||||
name: this.formData.name
|
||||
});
|
||||
|
||||
// 2. 获取最新用户信息
|
||||
const res = await get('/api/v1/app_auth/mine');
|
||||
if (res && res.success) {
|
||||
@ -503,29 +512,38 @@ import { navigateTo } from '@/utils/router';
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
// 删除头像
|
||||
// 删除头像 - 新增确认提示
|
||||
handleAvatarDelete() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除当前头像吗？',
|
||||
confirmText: '删除',
|
||||
cancelText: '取消',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.avatarList = [];
|
||||
this.displayAvatar = '/static/imgs/index/nav.png';
|
||||
this.userInfo.avatarUrl = '';
|
||||
uni.showToast({
|
||||
title: '已删除',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 提交表单
|
||||
async handleSubmit() {
|
||||
if (!this.isLogin) return;
|
||||
|
||||
const {
|
||||
name,
|
||||
bio
|
||||
} = this.formData;
|
||||
console.log("====", this.avatarList)
|
||||
let avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
|
||||
|
||||
let avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
|
||||
if (avatarUrl && avatarUrl.includes(IMAGE_BASE_URL)) {
|
||||
avatarUrl = avatarUrl.replace(IMAGE_BASE_URL, '');
|
||||
}
|
||||
|
||||
if (!name) {
|
||||
uni.showToast({
|
||||
title: '请输入姓名',
|
||||
@ -533,11 +551,9 @@ import { navigateTo } from '@/utils/router';
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '提交中...'
|
||||
});
|
||||
|
||||
try {
|
||||
// 1. 提交修改请求
|
||||
await post('/api/v1/app_auth/bind', {
|
||||
@ -545,7 +561,6 @@ import { navigateTo } from '@/utils/router';
|
||||
introduce: bio,
|
||||
name: name
|
||||
});
|
||||
|
||||
// 2. 获取最新用户信息
|
||||
const res = await get('/api/v1/app_auth/mine');
|
||||
if (res && res.success) {
|
||||
@ -553,12 +568,10 @@ import { navigateTo } from '@/utils/router';
|
||||
uni.setStorageSync('userInfo', res.data);
|
||||
this.updateUserInfo(res.data);
|
||||
this.showEditModal = false;
|
||||
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '修改成功'
|
||||
});
|
||||
|
||||
} else {
|
||||
throw new Error(res.message || '获取用户信息失败');
|
||||
}
|
||||
@ -571,13 +584,10 @@ import { navigateTo } from '@/utils/router';
|
||||
console.error('修改失败:', err);
|
||||
}
|
||||
},
|
||||
|
||||
// 取消修改
|
||||
handleCancel() {
|
||||
this.showEditModal = false;
|
||||
},
|
||||
|
||||
// 跳转页面
|
||||
// 跳转页面
|
||||
goPage(item) {
|
||||
if (item.key === 6) { // 联系社区的特殊处理
|
||||
@ -588,19 +598,16 @@ import { navigateTo } from '@/utils/router';
|
||||
this.handleEditClick(); // 调用编辑用户信息的方法
|
||||
return;
|
||||
}
|
||||
|
||||
// if (!this.checkLogin()) {
|
||||
// this.showEditModal = true;
|
||||
// return;
|
||||
// }
|
||||
|
||||
if (!this.checkLogin()) {
|
||||
this.showEditModal = true;
|
||||
return;
|
||||
}
|
||||
if (item.pageUrl) {
|
||||
navigateTo({
|
||||
uni.navigateTo({
|
||||
url: `/pages/${item.pageUrl}/index`
|
||||
},false);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 处理联系社区点击
|
||||
handleContactCommunity() {
|
||||
if (!this.checkLogin()) {
|
||||
@ -620,7 +627,6 @@ import { navigateTo } from '@/utils/router';
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 拨打社区电话
|
||||
callCommunityPhone() {
|
||||
uni.makePhoneCall({
|
||||
@ -638,7 +644,6 @@ import { navigateTo } from '@/utils/router';
|
||||
});
|
||||
this.showPhoneDialog = false;
|
||||
},
|
||||
|
||||
// 检查登录状态
|
||||
checkLogin() {
|
||||
const token = uni.getStorageSync('token');
|
||||
@ -663,29 +668,24 @@ import { navigateTo } from '@/utils/router';
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.user-info-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
|
||||
.avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -693,7 +693,6 @@ import { navigateTo } from '@/utils/router';
|
||||
border: 4rpx solid #fff;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -707,7 +706,6 @@ import { navigateTo } from '@/utils/router';
|
||||
justify-content: center;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.u-loading-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -723,79 +721,66 @@ import { navigateTo } from '@/utils/router';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name-section {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.phone {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.description-card {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-bottom: 12rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.function-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 30rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
.button-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 28rpx 0;
|
||||
border-bottom: 1rpx solid #f2f3f5;
|
||||
|
||||
&:active {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.button-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
@ -803,21 +788,17 @@ import { navigateTo } from '@/utils/router';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 0 30rpx;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
|
||||
/* 编辑表单区域 */
|
||||
.edit-section {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
@ -825,14 +806,12 @@ import { navigateTo } from '@/utils/router';
|
||||
margin-bottom: 16rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.word-count {
|
||||
text-align: right;
|
||||
font-size: 24rpx;
|
||||
@ -840,31 +819,13 @@ import { navigateTo } from '@/utils/router';
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 自定义删除按钮样式 */
|
||||
.custom-delete {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: -10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #f56c6c;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 授权登录区域 */
|
||||
.auth-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40rpx 0;
|
||||
|
||||
.auth-title {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
@ -872,7 +833,6 @@ import { navigateTo } from '@/utils/router';
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.auth-button {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
@ -887,20 +847,16 @@ import { navigateTo } from '@/utils/router';
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.phone-button {
|
||||
background: #2979ff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.wechat-icon,
|
||||
.phone-icon {
|
||||
width: 40rpx;
|
||||
@ -908,7 +864,6 @@ import { navigateTo } from '@/utils/router';
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-tip {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
@ -916,12 +871,10 @@ import { navigateTo } from '@/utils/router';
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-dialog-content {
|
||||
padding: 40rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
|
||||
.phone-number {
|
||||
font-weight: bold;
|
||||
color: #2979ff;
|
||||
@ -929,4 +882,61 @@ import { navigateTo } from '@/utils/router';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 头像上传容器
|
||||
.avatar-upload-container {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 头像预览区域
|
||||
.avatar-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
background-color: #f5f7fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #c0c4cc;
|
||||
|
||||
.placeholder-text {
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-delete {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: -10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: #f56c6c;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -42,7 +42,7 @@
|
||||
<view class="date">{{ formatTime(order.createdAt,"YYYY-MM-DD") }}</view>
|
||||
</view>
|
||||
<view class="order-description">{{ order.title }}</view>
|
||||
<button @click="handleAction(order)" class="order-action" v-if="order.status == 1 || order.status == 2 || order.status == 99">撤回</button>
|
||||
<button @click.stop="handleAction(order, $event)" class="order-action" v-if="order.status == 1 || order.status == 2 || order.status == 99">撤回</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 空状态提示 -->
|
||||
@ -73,7 +73,7 @@
|
||||
<script>
|
||||
// import Header from '@/components/header_common.vue';
|
||||
import Footer from '@/components/footer_common.vue';
|
||||
import { get, post } from '@/utils/request';
|
||||
import { get, post,put } from '@/utils/request';
|
||||
import { IMAGE_BASE_URL,BASE_URL } from '@/utils/config';
|
||||
import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
|
||||
export default {
|
||||
@ -116,7 +116,7 @@
|
||||
2: '进行中',
|
||||
3: '已完成',
|
||||
99:'驳回',
|
||||
98:'已删除'
|
||||
98:'已撤回'
|
||||
};
|
||||
return statusMap[status] || '未知状态';
|
||||
},
|
||||
@ -153,20 +153,39 @@
|
||||
uni.navigateTo({ url: '/pages/serviceTickets/index' });
|
||||
},
|
||||
// 工单操作处理
|
||||
handleAction(order) {
|
||||
if (order.actionText === '撤回') {
|
||||
handleAction(order, e) {
|
||||
// 阻止事件冒泡
|
||||
e.stopPropagation();
|
||||
|
||||
if (order.status == 1 || order.status == 2 || order.status == 99) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要撤回这个工单吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 执行撤回逻辑
|
||||
this.withdrawOrder(order.id);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
async withdrawOrder(orderId) {
|
||||
try {
|
||||
const res = await put(`/api/v1/app_auth/work-order/${orderId}`, {status:98});
|
||||
if (res?.success) {
|
||||
uni.showToast({
|
||||
title: '工单已撤回',
|
||||
icon: 'success'
|
||||
});
|
||||
// 刷新列表
|
||||
this.getWorkOrderList();
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('撤回工单失败:', err);
|
||||
uni.showToast({
|
||||
title: '撤回失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,22 +1,5 @@
|
||||
<template>
|
||||
<view class="work-order-detail">
|
||||
|
||||
<!-- 图片区域 - 编辑状态下可修改 -->
|
||||
<view class="image-area card">
|
||||
<view class="img-container">
|
||||
<image
|
||||
class="work-order-img"
|
||||
:src="!isEditing ? `${IMAGE_BASE_URL}${detailObj.images[0] || ''}` : workOrderImg"
|
||||
mode="widthFix"
|
||||
:lazy-load="true"
|
||||
></image>
|
||||
<view class="upload-btn" @click="uploadImage" v-if="isEditing">
|
||||
<u-icon name="camera" size="28" color="#fff"></u-icon>
|
||||
<text class="upload-text">更换图片</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 标题与日期 -->
|
||||
<view class="title-area card">
|
||||
<view class="title-wrap">
|
||||
@ -31,7 +14,6 @@
|
||||
<view class="content card">
|
||||
<view class="label">
|
||||
<view class="label-name">
|
||||
<!-- <u-icon name="map-marker" size="24" color="#409EFF"></u-icon> -->
|
||||
<text>工单地点：</text>
|
||||
</view>
|
||||
<text v-if="!isEditing" style="font-weight: normal;" :class="{empty: !detailObj.address}">{{detailObj.address || '未填写'}}</text>
|
||||
@ -39,7 +21,6 @@
|
||||
</view>
|
||||
<view class="label">
|
||||
<view class="label-name">
|
||||
<!-- <u-icon name="user" size="24" color="#409EFF"></u-icon> -->
|
||||
<text>联系人：</text>
|
||||
</view>
|
||||
<text v-if="!isEditing" style="font-weight: normal;" :class="{empty: !detailObj.concatName}">{{detailObj.concatName || '未填写'}}</text>
|
||||
@ -47,7 +28,6 @@
|
||||
</view>
|
||||
<view class="label">
|
||||
<view class="label-name">
|
||||
<!-- <u-icon name="phone" size="24" color="#409EFF"></u-icon> -->
|
||||
<text>联系电话：</text>
|
||||
</view>
|
||||
<text v-if="!isEditing" style="font-weight: normal;" :class="{empty: !detailObj.customerPhone}">{{detailObj.customerPhone || '未填写'}}</text>
|
||||
@ -55,7 +35,6 @@
|
||||
</view>
|
||||
<view class="label label-content">
|
||||
<view class="label-name">
|
||||
<!-- <u-icon name="file-text" size="24" color="#409EFF"></u-icon> -->
|
||||
<text>工单内容：</text>
|
||||
</view>
|
||||
<text v-if="!isEditing" style="font-weight: normal; white-space: pre-line;" :class="{empty: !detailObj.title}">{{detailObj.title || '未填写'}}</text>
|
||||
@ -68,6 +47,65 @@
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 图片区域 - 支持多张展示和编辑 -->
|
||||
<view class="image-area card">
|
||||
<view class="img-container">
|
||||
<!-- 非编辑状态显示服务器图片 -->
|
||||
<scroll-view
|
||||
class="image-scroll"
|
||||
scroll-x="true"
|
||||
v-if="!isEditing && detailObj.images && detailObj.images.length > 0"
|
||||
>
|
||||
<view class="image-list">
|
||||
<image
|
||||
class="work-order-img"
|
||||
v-for="(img, index) in detailObj.images"
|
||||
:key="index"
|
||||
:src="`${IMAGE_BASE_URL}${img}`"
|
||||
mode="aspectFill"
|
||||
lazy-load="true"
|
||||
@click="previewImage(index)"
|
||||
></image>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 编辑状态显示本地选择的图片 -->
|
||||
<scroll-view
|
||||
class="image-scroll"
|
||||
scroll-x="true"
|
||||
v-if="isEditing && localImages.length > 0"
|
||||
>
|
||||
<view class="image-list">
|
||||
<view class="image-item" v-for="(img, index) in localImages" :key="index">
|
||||
<image
|
||||
class="work-order-img"
|
||||
:src="img"
|
||||
mode="aspectFill"
|
||||
lazy-load="true"
|
||||
></image>
|
||||
<view class="delete-btn" @click="removeImage(index)">
|
||||
<u-icon name="close" size="20" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 没有图片时的占位 -->
|
||||
<view class="empty-placeholder" v-if="(!detailObj.images || detailObj.images.length === 0) && !isEditing">
|
||||
<u-icon name="photo" size="48" color="#c0c4cc"></u-icon>
|
||||
<text class="empty-text">暂无图片</text>
|
||||
</view>
|
||||
|
||||
<!-- 编辑状态的上传按钮 -->
|
||||
<view class="upload-btn-container" v-if="isEditing">
|
||||
<view class="upload-btn" @click="uploadImage">
|
||||
<u-icon name="camera" size="28" color="#fff"></u-icon>
|
||||
<text class="upload-text">{{ localImages.length > 0 ? '添加更多' : '上传图片' }}</text>
|
||||
</view>
|
||||
<text class="upload-tip" v-if="localImages.length > 0">最多可上传9张</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="btn-group">
|
||||
@ -105,44 +143,85 @@
|
||||
formatTime,
|
||||
isEditing: false, // 编辑状态
|
||||
isLoading: false, // 加载状态
|
||||
workOrderImg: '', // 编辑时的图片
|
||||
localImages: [], // 本地选择的图片数组
|
||||
// 编辑状态下的临时数据
|
||||
editLabel: '',
|
||||
editAddress: '',
|
||||
editTitle: '',
|
||||
editContactName: '', // 新增：联系人
|
||||
editContactPhone: '', // 新增：联系电话
|
||||
editContactName: '',
|
||||
editContactPhone: '',
|
||||
detailObj: {},
|
||||
tempImagePath: '' // 临时存储上传的图片路径
|
||||
tempImagePaths: [] // 临时存储上传的图片路径
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
let obj = uni.getStorageSync("Detail");
|
||||
this.detailObj = {...obj};
|
||||
this.workOrderImg = `${IMAGE_BASE_URL}${this.detailObj.images[0]}`;
|
||||
// 初始化本地图片数组
|
||||
if (this.detailObj.images && this.detailObj.images.length > 0) {
|
||||
this.localImages = this.detailObj.images.map(img => `${IMAGE_BASE_URL}${img}`);
|
||||
}
|
||||
// 初始化新增字段
|
||||
this.editContactName = this.detailObj.concatName || '';
|
||||
this.editContactPhone = this.detailObj.customerPhone || '';
|
||||
},
|
||||
methods: {
|
||||
// 上传图片到服务器
|
||||
uploadImage() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: async (res) => {
|
||||
const tempFilePaths = res.tempFilePaths[0];
|
||||
this.tempImagePath = tempFilePaths;
|
||||
this.workOrderImg = tempFilePaths;
|
||||
uni.showToast({
|
||||
title: '图片已更换',
|
||||
icon: 'success'
|
||||
// 预览图片
|
||||
previewImage(index) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: this.detailObj.images.map(img => `${IMAGE_BASE_URL}${img}`)
|
||||
});
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
uploadImage() {
|
||||
const maxCount = 9 - this.localImages.length;
|
||||
if (maxCount <= 0) {
|
||||
uni.showToast({
|
||||
title: '最多只能上传9张图片',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.chooseImage({
|
||||
count: maxCount,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
this.tempImagePaths = [...this.tempImagePaths, ...res.tempFilePaths];
|
||||
this.localImages = [...this.localImages, ...res.tempFilePaths];
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 删除图片
|
||||
removeImage(index) {
|
||||
this.localImages.splice(index, 1);
|
||||
// 如果是新上传的图片，也从tempImagePaths中移除
|
||||
if (index >= this.localImages.length - this.tempImagePaths.length) {
|
||||
this.tempImagePaths.splice(index - (this.localImages.length - this.tempImagePaths.length), 1);
|
||||
}
|
||||
},
|
||||
|
||||
// 上传图片到服务器
|
||||
async uploadImageToServer(filePath) {
|
||||
async uploadImagesToServer() {
|
||||
const uploadedPaths = [];
|
||||
for (const filePath of this.tempImagePaths) {
|
||||
try {
|
||||
const path = await this.uploadSingleImage(filePath);
|
||||
uploadedPaths.push(path);
|
||||
} catch (error) {
|
||||
console.error('图片上传失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
return uploadedPaths;
|
||||
},
|
||||
|
||||
// 上传单张图片
|
||||
uploadSingleImage(filePath) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: `${BASE_URL}/api/v1/upload`,
|
||||
@ -155,7 +234,7 @@
|
||||
try {
|
||||
const res = JSON.parse(uploadRes.data);
|
||||
if (res && res.success) {
|
||||
resolve(res.data); // 只返回路径部分
|
||||
resolve(res.data);
|
||||
} else {
|
||||
reject(new Error(res.message || '上传失败'));
|
||||
}
|
||||
@ -188,9 +267,16 @@
|
||||
let images = this.detailObj.images;
|
||||
|
||||
// 如果有新图片上传
|
||||
if (this.tempImagePath) {
|
||||
const uploadedPath = await this.uploadImageToServer(this.tempImagePath);
|
||||
images = [uploadedPath]; // 替换为新的图片
|
||||
if (this.tempImagePaths.length > 0) {
|
||||
const uploadedPaths = await this.uploadImagesToServer();
|
||||
// 合并原有图片和新上传的图片
|
||||
const originalPaths = this.localImages
|
||||
.filter(img => img.startsWith(IMAGE_BASE_URL))
|
||||
.map(img => img.replace(IMAGE_BASE_URL, ''));
|
||||
images = [...originalPaths, ...uploadedPaths];
|
||||
} else if (this.localImages.length === 0) {
|
||||
// 用户删除了所有图片
|
||||
images = [];
|
||||
}
|
||||
|
||||
const requestData = {
|
||||
@ -199,8 +285,8 @@
|
||||
title: this.editTitle,
|
||||
images: images,
|
||||
status: 1,
|
||||
concatName: this.editContactName, // 新增：联系人
|
||||
customerPhone: this.editContactPhone // 新增：联系电话
|
||||
concatName: this.editContactName,
|
||||
customerPhone: this.editContactPhone
|
||||
};
|
||||
|
||||
const res = await put(`/api/v1/app_auth/work-order/${this.detailObj.id}`, requestData);
|
||||
@ -218,7 +304,7 @@
|
||||
});
|
||||
|
||||
this.isEditing = false;
|
||||
this.tempImagePath = ''; // 清空临时图片路径
|
||||
this.tempImagePaths = []; // 清空临时图片路径
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.message || '修改失败',
|
||||
@ -240,9 +326,14 @@
|
||||
// 撤回/取消操作
|
||||
async handleWithdraw() {
|
||||
if (this.isEditing) {
|
||||
// 取消编辑状态，不发送请求
|
||||
// 取消编辑状态，恢复原始数据
|
||||
this.isEditing = false;
|
||||
this.tempImagePath = '';
|
||||
this.tempImagePaths = [];
|
||||
if (this.detailObj.images && this.detailObj.images.length > 0) {
|
||||
this.localImages = this.detailObj.images.map(img => `${IMAGE_BASE_URL}${img}`);
|
||||
} else {
|
||||
this.localImages = [];
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
@ -267,7 +358,7 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 基础变量优化 */
|
||||
$primary-color: #409EFF; // 更舒适的蓝色
|
||||
$primary-color: #409EFF;
|
||||
$success-color: #67C23A;
|
||||
$warning-color: #F56C6C;
|
||||
$text-color: #303133;
|
||||
@ -299,87 +390,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面容器 */
|
||||
.work-order-detail {
|
||||
background-color: $bg-color;
|
||||
min-height: 100vh;
|
||||
padding: 0 30rpx 40rpx;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.navbar {
|
||||
@include flex-center;
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
padding: 0 10rpx;
|
||||
background: $card-bg;
|
||||
border-bottom: 1px solid $border-color;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
color: $text-color;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-left: -36rpx; // 抵消图标宽度
|
||||
}
|
||||
}
|
||||
|
||||
/* 头部用户信息 */
|
||||
.header {
|
||||
@include card;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 30rpx;
|
||||
|
||||
.avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background-color: $bg-color;
|
||||
border: 2rpx solid #F0F2F5;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin-left: 24rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-name-wrap {
|
||||
@include flex-center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 34rpx;
|
||||
color: $text-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
margin-left: 12rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
@include flex-center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.user-phone {
|
||||
color: $subtext-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片区域优化 */
|
||||
.image-area {
|
||||
@include card;
|
||||
@ -391,37 +401,76 @@
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
background-color: $bg-color;
|
||||
min-height: 200rpx;
|
||||
}
|
||||
|
||||
.image-scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-list {
|
||||
display: inline-flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
position: relative;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.work-order-img {
|
||||
width: 100%;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 8rpx;
|
||||
transition: $transition;
|
||||
// 加载占位效果
|
||||
&:empty {
|
||||
height: 300rpx;
|
||||
background-color: $bg-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $light-text;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
right: 8rpx;
|
||||
top: 8rpx;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
@include flex-center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-placeholder {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 8rpx;
|
||||
|
||||
.empty-text {
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-btn-container {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
position: absolute;
|
||||
right: 16rpx;
|
||||
bottom: 16rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 8rpx 16rpx;
|
||||
background: $primary-color;
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
@include flex-center;
|
||||
transition: $transition;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
color: #fff;
|
||||
@ -429,9 +478,20 @@
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
font-size: 24rpx;
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
|
||||
/* 其他样式保持不变 */
|
||||
.work-order-detail {
|
||||
background-color: $bg-color;
|
||||
min-height: 100vh;
|
||||
padding: 0 30rpx 40rpx;
|
||||
}
|
||||
|
||||
/* 标题区域优化 */
|
||||
.title-area {
|
||||
@include card;
|
||||
display: flex;
|
||||
@ -443,11 +503,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 34rpx;
|
||||
color: $text-color;
|
||||
@ -461,17 +516,12 @@
|
||||
padding-top: 4rpx;
|
||||
}
|
||||
|
||||
.date-icon {
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 26rpx;
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
|
||||
/* 内容区域优化 */
|
||||
.content {
|
||||
@include card;
|
||||
|
||||
@ -498,10 +548,6 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.label-name u-icon {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
& > text {
|
||||
font-size: 28rpx;
|
||||
color: $text-color;
|
||||
@ -549,7 +595,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮区域优化 */
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
@ -574,28 +619,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 适配小屏幕 */
|
||||
@media (max-width: 375px) {
|
||||
$font-base: 28rpx;
|
||||
|
||||
.header {
|
||||
padding: 18rpx;
|
||||
|
||||
.avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
padding: 20rpx 5rpx;
|
||||
|
||||
.action-btn {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -11,11 +11,7 @@
|
||||
<u-icon name="arrow-down" color="#999" size="30"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-picker
|
||||
:show="showTypeSelect"
|
||||
:columns="areaList"
|
||||
keyName="title"
|
||||
@confirm="handleTypeConfirm"
|
||||
<u-picker :show="showTypeSelect" :columns="areaList" keyName="title" @confirm="handleTypeConfirm"
|
||||
@cancel="showTypeSelect = false">
|
||||
</u-picker>
|
||||
</view>
|
||||
@ -35,7 +31,6 @@
|
||||
</u-picker>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label">
|
||||
<u-icon name="order" color="#3B8CFF" size="38"></u-icon>
|
||||
@ -65,21 +60,29 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 上传照片/视频 -->
|
||||
<!-- 上传照片/视频 - 完全重写的上传组件 -->
|
||||
<view class="form-item">
|
||||
<view class="label">
|
||||
<u-icon name="photo" color="#3B8CFF" size="38"></u-icon>
|
||||
上传照片/视频
|
||||
</view>
|
||||
<view class="upload-area">
|
||||
<u-upload :fileList="fileList" @afterRead="handleAfterRead" @delete="handleDelete" :maxCount="8"
|
||||
width="160" height="160" accept="image/*,video/*" :previewFullImage="true">
|
||||
</u-upload>
|
||||
<view class="upload-list">
|
||||
<view class="upload-item" v-for="(item, index) in fileList" :key="index">
|
||||
<image v-if="!item.isVideo" :src="item.url" mode="aspectFill" @click="previewImage(index)"></image>
|
||||
<video v-else :src="item.url" controls></video>
|
||||
<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 < 8">
|
||||
<u-icon name="plus" size="40" color="#c0c4cc"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="note">注：照片可识别工单内容，支持分批上传，但最大数量为8</text>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 工单地点 -->
|
||||
<view class="form-item">
|
||||
<view class="label">
|
||||
@ -95,42 +98,52 @@
|
||||
</view>
|
||||
</view>
|
||||
<Footer></Footer>
|
||||
|
||||
<!-- 上传操作菜单 -->
|
||||
<u-action-sheet
|
||||
:list="actionList"
|
||||
v-model="showActionSheet"
|
||||
@click="handleActionClick"
|
||||
></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Footer from '@/components/footer_common.vue';
|
||||
import {
|
||||
get,
|
||||
post
|
||||
} from '@/utils/request';
|
||||
import {
|
||||
IMAGE_BASE_URL,
|
||||
BASE_URL
|
||||
} from '@/utils/config';
|
||||
export default {
|
||||
import Footer from '@/components/footer_common.vue';
|
||||
import { get, post } from '@/utils/request';
|
||||
import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
|
||||
import uActionSheet from 'uview-ui/components/u-action-sheet/u-action-sheet';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Footer
|
||||
Footer,uActionSheet
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
workOrderContent: '',
|
||||
concatName: '', // 新增联系人姓名字段
|
||||
customerPhone: '', // 新增联系人电话字段
|
||||
concatName: '',
|
||||
customerPhone: '',
|
||||
fileList: [],
|
||||
workOrderCategory: '',
|
||||
workOrderCategoryID: '',
|
||||
workOrderArea:'',
|
||||
workOrderAreaID:'',
|
||||
workOrderArea: '',
|
||||
workOrderAreaID: '',
|
||||
showSelect: false,
|
||||
showTypeSelect:false,
|
||||
showTypeSelect: false,
|
||||
categoryList: [],
|
||||
workOrderLocation: '',
|
||||
expectedTime: '',
|
||||
uploadedImages: [],
|
||||
uploadedVideos: [],
|
||||
videoFormats: ['mp4', 'mov', 'avi', 'wmv', 'mpeg', '3gp', 'flv', 'mkv'],
|
||||
areaList:[],
|
||||
areaList: [],
|
||||
|
||||
// 上传相关
|
||||
showActionSheet: false,
|
||||
actionList: [
|
||||
{ text: '拍照', value: 'camera' },
|
||||
{ text: '从相册选择', value: 'album' }
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -138,129 +151,206 @@
|
||||
this.getOrderTypeList();
|
||||
},
|
||||
methods: {
|
||||
handleBack() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
// 显示上传选项
|
||||
showUploadAction() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['拍照', '从相册选择'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
this.chooseMedia('camera');
|
||||
} else {
|
||||
this.chooseMedia('album');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 文件上传相关方法
|
||||
handleAfterRead(event) {
|
||||
const {
|
||||
file
|
||||
} = event;
|
||||
let files = [].concat(file);
|
||||
// 处理上传选项选择
|
||||
handleActionClick(index) {
|
||||
const action = this.actionList[index].value;
|
||||
if (action === 'camera') {
|
||||
this.chooseMedia('camera');
|
||||
} else {
|
||||
this.chooseMedia('album');
|
||||
}
|
||||
},
|
||||
|
||||
if (this.fileList.length + files.length > 8) {
|
||||
uni.showToast({
|
||||
title: '最多只能上传8个文件',
|
||||
icon: 'none'
|
||||
// 选择媒体文件
|
||||
async chooseMedia(sourceType) {
|
||||
try {
|
||||
// 1. 选择图片
|
||||
const res = await new Promise((resolve, reject) => {
|
||||
uni.chooseImage({
|
||||
count: 8 - this.fileList.length,
|
||||
sourceType: [sourceType === 'camera' ? 'camera' : 'album'],
|
||||
success: resolve,
|
||||
fail: reject
|
||||
});
|
||||
return;
|
||||
});
|
||||
|
||||
// 2. 添加到预览列表
|
||||
const newFiles = res.tempFilePaths.map(url => ({
|
||||
url,
|
||||
isVideo: false,
|
||||
status: 'uploading'
|
||||
}));
|
||||
this.fileList = [...this.fileList, ...newFiles];
|
||||
|
||||
// 3. 逐个上传文件
|
||||
for (const file of newFiles) {
|
||||
await this.uploadFile(file);
|
||||
}
|
||||
|
||||
files.forEach(item => {
|
||||
const extension = this.getFileExtension(item.url);
|
||||
const isVideo = this.videoFormats.includes(extension.toLowerCase());
|
||||
} catch (err) {
|
||||
console.error('选择图片失败:', err);
|
||||
uni.showToast({ title: '选择图片失败', icon: 'none' });
|
||||
}
|
||||
},
|
||||
_chooseMedia(sourceType) {
|
||||
uni.chooseMedia({
|
||||
count: 8 - this.fileList.length,
|
||||
mediaType: ['image', 'video'],
|
||||
sourceType: [sourceType],
|
||||
success: async (res) => {
|
||||
// 添加到预览列表
|
||||
const newFiles = res.tempFiles.map(file => ({
|
||||
url: file.tempFilePath,
|
||||
isVideo: file.fileType === 'video',
|
||||
status: 'uploading' // 新增上传状态
|
||||
}));
|
||||
this.fileList = [...this.fileList, ...newFiles];
|
||||
|
||||
this.fileList.push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中...',
|
||||
isVideo: isVideo
|
||||
});
|
||||
|
||||
this.uploadFile(item, isVideo);
|
||||
// 逐个上传文件
|
||||
for (const file of newFiles) {
|
||||
await this.uploadFile(file); // 等待上传完成
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getFileExtension(filename) {
|
||||
return filename.split('.').pop().split('?')[0];
|
||||
},
|
||||
|
||||
handleDelete(event) {
|
||||
const {
|
||||
index
|
||||
} = event;
|
||||
const file = this.fileList[index];
|
||||
// 上传文件
|
||||
uploadFiles(files) {
|
||||
files.forEach(file => {
|
||||
this.uploadFile(file).then(res => {
|
||||
const index = this.fileList.findIndex(item => item.url === file.url);
|
||||
if (index !== -1) {
|
||||
this.$set(this.fileList, index, {
|
||||
...file,
|
||||
status: 'success',
|
||||
serverUrl: res
|
||||
});
|
||||
|
||||
if (file.isVideo) {
|
||||
const videoIndex = this.uploadedVideos.indexOf(file.url);
|
||||
this.uploadedVideos.push(res.replace(BASE_URL, ''));
|
||||
} else {
|
||||
this.uploadedImages.push(res.replace(BASE_URL, ''));
|
||||
}
|
||||
}
|
||||
}).catch(err => {
|
||||
const index = this.fileList.findIndex(item => item.url === file.url);
|
||||
if (index !== -1) {
|
||||
this.$set(this.fileList, index, {
|
||||
...file,
|
||||
status: 'failed'
|
||||
});
|
||||
}
|
||||
console.error('上传失败:', err);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 单个文件上传
|
||||
async uploadFile(file) {
|
||||
try {
|
||||
const res = await new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: `${BASE_URL}/api/v1/upload`,
|
||||
filePath: file.url,
|
||||
name: 'file',
|
||||
header: {
|
||||
'Authorization': `Bearer ${uni.getStorageSync('token')}`,
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
success: (uploadRes) => {
|
||||
try {
|
||||
const data = JSON.parse(uploadRes.data);
|
||||
if (data.success) {
|
||||
resolve(data.data); // 使用服务器返回的完整URL
|
||||
} else {
|
||||
reject(data.message || '上传失败');
|
||||
}
|
||||
} catch (e) {
|
||||
reject('解析响应失败');
|
||||
}
|
||||
},
|
||||
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
|
||||
});
|
||||
|
||||
// 添加到提交数组
|
||||
if (file.isVideo) {
|
||||
this.uploadedVideos.push(res);
|
||||
} else {
|
||||
this.uploadedImages.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
|
||||
.filter(item => !item.isVideo)
|
||||
.map(item => item.url);
|
||||
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: images
|
||||
});
|
||||
},
|
||||
|
||||
// 删除文件
|
||||
handleDelete(index) {
|
||||
const file = this.fileList[index];
|
||||
|
||||
if (file.serverUrl) {
|
||||
if (file.isVideo) {
|
||||
const videoIndex = this.uploadedVideos.indexOf(file.serverUrl.replace(BASE_URL, ''));
|
||||
if (videoIndex !== -1) this.uploadedVideos.splice(videoIndex, 1);
|
||||
} else {
|
||||
const imageIndex = this.uploadedImages.indexOf(file.url);
|
||||
const imageIndex = this.uploadedImages.indexOf(file.serverUrl.replace(BASE_URL, ''));
|
||||
if (imageIndex !== -1) this.uploadedImages.splice(imageIndex, 1);
|
||||
}
|
||||
}
|
||||
|
||||
this.fileList.splice(index, 1);
|
||||
},
|
||||
|
||||
async uploadFile(file, isVideo) {
|
||||
try {
|
||||
const fullUrl = await this.uploadAvatar(file.url);
|
||||
const relativePath = fullUrl.replace(BASE_URL, '');
|
||||
|
||||
const fileIndex = this.fileList.findIndex(item => item.url === file.url);
|
||||
if (fileIndex !== -1) {
|
||||
this.fileList[fileIndex] = {
|
||||
...this.fileList[fileIndex],
|
||||
status: 'success',
|
||||
message: '上传成功',
|
||||
url: fullUrl,
|
||||
relativeUrl: relativePath,
|
||||
isVideo: isVideo
|
||||
};
|
||||
|
||||
if (isVideo) {
|
||||
this.uploadedVideos.push(relativePath);
|
||||
} else {
|
||||
this.uploadedImages.push(relativePath);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
const fileIndex = this.fileList.findIndex(item => item.url === file.url);
|
||||
if (fileIndex !== -1) {
|
||||
this.fileList[fileIndex] = {
|
||||
...this.fileList[fileIndex],
|
||||
status: 'failed',
|
||||
message: '上传失败'
|
||||
};
|
||||
}
|
||||
uni.showToast({
|
||||
title: `${isVideo ? '视频' : '图片'}上传失败: ${error.message}`,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
uploadAvatar(filePath) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: `${BASE_URL}/api/v1/upload`,
|
||||
filePath: filePath,
|
||||
name: 'file',
|
||||
header: {
|
||||
'Authorization': `Bearer ${uni.getStorageSync('token')}`
|
||||
},
|
||||
success: (uploadRes) => {
|
||||
try {
|
||||
const res = JSON.parse(uploadRes.data);
|
||||
if (res && res.success) {
|
||||
resolve(`${IMAGE_BASE_URL}${res.data}`);
|
||||
} else {
|
||||
reject(new Error(res.message || '上传失败'));
|
||||
}
|
||||
} catch (e) {
|
||||
reject(new Error('解析响应失败'));
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(new Error('上传失败: ' + JSON.stringify(err)));
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 其他原有方法保持不变...
|
||||
async handleSubmit() {
|
||||
if (!this.workOrderContent) {
|
||||
uni.showToast({
|
||||
@ -304,10 +394,10 @@
|
||||
|
||||
const submitData = {
|
||||
title: this.workOrderContent,
|
||||
concatName: this.concatName, // 新增联系人姓名
|
||||
customerPhone: this.customerPhone, // 新增联系人电话
|
||||
concatName: this.concatName,
|
||||
customerPhone: this.customerPhone,
|
||||
orderTypeId: this.workOrderCategoryID,
|
||||
orderAreaId:this.workOrderAreaID,
|
||||
orderAreaId: this.workOrderAreaID,
|
||||
address: this.workOrderLocation,
|
||||
images: this.uploadedImages,
|
||||
videos: this.uploadedVideos,
|
||||
@ -315,7 +405,6 @@
|
||||
|
||||
console.log('提交数据:', submitData);
|
||||
|
||||
// 调用API保存信息
|
||||
const res = await post('/api/v1/app_auth/work-order', submitData);
|
||||
|
||||
uni.hideLoading();
|
||||
@ -327,11 +416,11 @@
|
||||
duration: 2000
|
||||
});
|
||||
this.resetForm();
|
||||
setTimeout(()=>{
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/myTickets/index`,
|
||||
});
|
||||
},1000)
|
||||
}, 1000)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res?.message || '提交失败',
|
||||
@ -387,8 +476,7 @@
|
||||
}
|
||||
},
|
||||
|
||||
// 获取工作区域
|
||||
async getOrderTypeList(){
|
||||
async getOrderTypeList() {
|
||||
try {
|
||||
const res = await get('/api/v1/apps/work-order-area');
|
||||
if (res?.success) {
|
||||
@ -405,11 +493,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
.container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
@ -467,6 +555,47 @@
|
||||
|
||||
.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;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
image, video {
|
||||
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 {
|
||||
@ -512,5 +641,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user