修改
This commit is contained in:
qiuyuan
parent
2fb1c184cf
commit
59551ae26a
@ -92,8 +92,10 @@
|
||||
const defaultValue=this.generateMiniProgramUUID()
|
||||
wx.setStorageSync('userId', defaultValue)
|
||||
this.userId=defaultValue
|
||||
}
|
||||
}else{
|
||||
this.userId=value
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
const defaultValue=this.generateMiniProgramUUID()
|
||||
|
||||
@ -52,19 +52,19 @@
|
||||
</view>
|
||||
<view class="weather-footer">
|
||||
<view class="footer-item">
|
||||
<text class="footer-icon">🌬️东风</text>
|
||||
<text class="footer-icon">️风向</text>
|
||||
<text class="footer-text">{{weather.wind}}</text>
|
||||
</view>
|
||||
<view class="footer-item">
|
||||
<text class="footer-icon">💧湿度</text>
|
||||
<text class="footer-icon">湿度</text>
|
||||
<text class="footer-text">{{weather.humidity}}%</text>
|
||||
</view>
|
||||
<view class="footer-item">
|
||||
<text class="footer-icon">🌫️空气质量</text>
|
||||
<text class="footer-icon">️空气质量</text>
|
||||
<text class="footer-text">{{weather.quality}}</text>
|
||||
</view>
|
||||
<view class="footer-item">
|
||||
<text class="footer-icon">☀️紫外线</text>
|
||||
<text class="footer-icon">️紫外线</text>
|
||||
<text class="footer-text">{{weather.uv_index}}</text>
|
||||
</view>
|
||||
</view>
|
||||
@ -389,7 +389,8 @@
|
||||
flex: 1;
|
||||
|
||||
.footer-icon {
|
||||
font-size: 24rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight:500;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
<view class="edit-icon" @click="handleEditClick">
|
||||
<u-icon name="edit-pen" color="#fff" size="24"></u-icon>
|
||||
</view>
|
||||
<u-loading-icon v-if="uploading" mode="circle" color="#2979ff" size="28"></u-loading-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="name-section" @click="handleEditClick">
|
||||
@ -35,61 +36,50 @@
|
||||
</view>
|
||||
|
||||
<!-- 修改用户信息弹窗 -->
|
||||
<u-modal :show="showEditModal"
|
||||
:title="isLogin ? '修改用户信息' : '微信授权登录'"
|
||||
:show-confirm-button="isLogin"
|
||||
:show-cancel-button="isLogin"
|
||||
@confirm="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
confirm-color="#2979ff"
|
||||
<u-modal :show="showEditModal" :title="isLogin ? '修改用户信息' : '微信授权登录'" :show-confirm-button="isLogin"
|
||||
:show-cancel-button="isLogin" @confirm="handleSubmit" @cancel="handleCancel" confirm-color="#2979ff"
|
||||
cancel-color="#606266">
|
||||
<view class="modal-content">
|
||||
<!-- 未登录时显示授权按钮 -->
|
||||
<view v-if="!isLogin" class="auth-section">
|
||||
<button v-if="!showPhoneButton"
|
||||
class="auth-button"
|
||||
open-type="getUserInfo"
|
||||
<view class="auth-title">请先登录以使用完整功能</view>
|
||||
<button v-if="!showPhoneButton" class="auth-button" open-type="getUserInfo"
|
||||
@getuserinfo="onGetUserInfo">
|
||||
<image class="wechat-icon" src="/static/imgs/wechat.png"></image>
|
||||
微信一键登录
|
||||
</button>
|
||||
<button v-if="showPhoneButton"
|
||||
type="default"
|
||||
open-type="getPhoneNumber"
|
||||
@getphonenumber="getPhoneNumber"
|
||||
class="auth-button phone-button">
|
||||
<button v-if="showPhoneButton" type="default" open-type="getPhoneNumber"
|
||||
@getphonenumber="getPhoneNumber" class="auth-button phone-button">
|
||||
<image class="phone-icon" src="/static/imgs/phone.png"></image>
|
||||
授权获取手机号
|
||||
</button>
|
||||
<view class="auth-tip">登录即表示同意《用户协议》和《隐私政策》</view>
|
||||
</view>
|
||||
|
||||
<!-- 已登录时显示编辑表单 -->
|
||||
<view v-else>
|
||||
<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>
|
||||
<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>
|
||||
</u-upload>
|
||||
<view class="upload-tip">点击上传，建议尺寸1:1</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<text class="form-label">姓名：</text>
|
||||
<u-input v-model="formData.name" placeholder="请输入姓名" border="bottom"></u-input>
|
||||
<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"
|
||||
height="320">
|
||||
<u-input v-model="formData.bio" type="textarea" placeholder="请输入简介" :maxlength="200"
|
||||
height="120" border="bottom">
|
||||
</u-input>
|
||||
<view class="word-count">{{formData.bio.length}}/200</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -100,11 +90,17 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Footer from '@/components/footer_common.vue';
|
||||
import { get, post } from '@/utils/request';
|
||||
import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
|
||||
import Footer from '@/components/footer_common.vue';
|
||||
import {
|
||||
get,
|
||||
post
|
||||
} from '@/utils/request';
|
||||
import {
|
||||
IMAGE_BASE_URL,
|
||||
BASE_URL
|
||||
} from '@/utils/config';
|
||||
|
||||
export default {
|
||||
export default {
|
||||
components: {
|
||||
Footer
|
||||
},
|
||||
@ -124,8 +120,9 @@ export default {
|
||||
bio: "",
|
||||
phone: ""
|
||||
},
|
||||
choseList: [
|
||||
{
|
||||
uploading: false,
|
||||
displayAvatar: '/static/imgs/index/nav.png',
|
||||
choseList: [{
|
||||
key: 1,
|
||||
url: "/static/imgs/service/service_list.png",
|
||||
name: '全部工单',
|
||||
@ -198,13 +195,18 @@ export default {
|
||||
phone: data.phone || ''
|
||||
};
|
||||
|
||||
// 更新显示头像
|
||||
this.displayAvatar = this.userInfo.avatarUrl || '/static/imgs/index/nav.png';
|
||||
|
||||
this.formData = {
|
||||
name: this.userInfo.nickName,
|
||||
bio: this.userInfo.bio
|
||||
};
|
||||
|
||||
if (this.userInfo.avatarUrl) {
|
||||
this.avatarList = [{ url: this.userInfo.avatarUrl }];
|
||||
this.avatarList = [{
|
||||
url: this.userInfo.avatarUrl
|
||||
}];
|
||||
}
|
||||
},
|
||||
|
||||
@ -216,7 +218,10 @@ export default {
|
||||
avatarUrl: '/static/imgs/index/nav.png',
|
||||
bio: '这家伙很懒，什么都没有写~'
|
||||
};
|
||||
this.formData = { name: '', bio: '' };
|
||||
this.formData = {
|
||||
name: '',
|
||||
bio: ''
|
||||
};
|
||||
this.avatarList = [];
|
||||
uni.removeStorageSync('token');
|
||||
uni.removeStorageSync('userInfo');
|
||||
@ -236,7 +241,9 @@ export default {
|
||||
};
|
||||
|
||||
if (this.userInfo.avatarUrl) {
|
||||
this.avatarList = [{ url: this.userInfo.avatarUrl }];
|
||||
this.avatarList = [{
|
||||
url: this.userInfo.avatarUrl
|
||||
}];
|
||||
} else {
|
||||
this.avatarList = [];
|
||||
}
|
||||
@ -261,7 +268,9 @@ export default {
|
||||
|
||||
// 微信登录获取code
|
||||
wxLogin() {
|
||||
uni.showLoading({ title: '登录中...' });
|
||||
uni.showLoading({
|
||||
title: '登录中...'
|
||||
});
|
||||
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
@ -282,7 +291,9 @@ export default {
|
||||
// 发送登录请求
|
||||
async sendLoginRequest(code) {
|
||||
try {
|
||||
const res = await post('/api/v1/apps/login/weixins', { code: code });
|
||||
const res = await post('/api/v1/apps/login/weixins', {
|
||||
code: code
|
||||
});
|
||||
|
||||
if (res.success) {
|
||||
uni.setStorageSync('token', res.data.access_token);
|
||||
@ -319,7 +330,9 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showLoading({ title: '获取手机号中...' });
|
||||
uni.showLoading({
|
||||
title: '获取手机号中...'
|
||||
});
|
||||
|
||||
try {
|
||||
const res = await post('/api/v1/app_auth/weixin/bind_phone', {
|
||||
@ -352,7 +365,9 @@ export default {
|
||||
this.isLogin = true;
|
||||
this.showEditModal = false;
|
||||
this.showPhoneButton = false;
|
||||
uni.showToast({ title: '登录成功' });
|
||||
uni.showToast({
|
||||
title: '登录成功'
|
||||
});
|
||||
} else {
|
||||
throw new Error(res.message || '获取用户信息失败');
|
||||
}
|
||||
@ -372,12 +387,14 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
const { file } = event;
|
||||
const {
|
||||
file
|
||||
} = event;
|
||||
if (!file || !file.url) return;
|
||||
|
||||
try {
|
||||
uni.showLoading({ title: '上传中...' });
|
||||
this.uploading = true;
|
||||
|
||||
try {
|
||||
// 检查文件大小
|
||||
const fileInfo = await new Promise((resolve, reject) => {
|
||||
uni.getFileInfo({
|
||||
@ -391,17 +408,23 @@ export default {
|
||||
throw new Error('图片大小不能超过2MB');
|
||||
}
|
||||
|
||||
// 上传到服务器
|
||||
const avatarUrl = await this.uploadAvatar(file.url);
|
||||
this.avatarList = [{ url: avatarUrl }];
|
||||
this.userInfo.avatarUrl = avatarUrl;
|
||||
|
||||
uni.hideLoading();
|
||||
// 更新用户信息
|
||||
await this.updateUserAvatar(avatarUrl);
|
||||
|
||||
uni.showToast({
|
||||
title: '头像上传成功'
|
||||
});
|
||||
} catch (error) {
|
||||
uni.hideLoading();
|
||||
console.error('头像上传失败:', error);
|
||||
uni.showToast({
|
||||
title: '头像上传失败: ' + error.message,
|
||||
icon: 'none'
|
||||
});
|
||||
} finally {
|
||||
this.uploading = false;
|
||||
}
|
||||
},
|
||||
|
||||
@ -434,9 +457,35 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
// 上传头像到服务器
|
||||
async updateUserAvatar(avatarUrl) {
|
||||
try {
|
||||
// 1. 提交修改请求
|
||||
await post('/api/v1/app_auth/bind', {
|
||||
avatar: avatarUrl,
|
||||
introduce: this.formData.bio,
|
||||
name: this.formData.name
|
||||
});
|
||||
|
||||
// 2. 获取最新用户信息
|
||||
const res = await get('/api/v1/app_auth/mine');
|
||||
if (res && res.success) {
|
||||
// 3. 更新本地存储和页面数据
|
||||
uni.setStorageSync('userInfo', res.data);
|
||||
this.updateUserInfo(res.data);
|
||||
} else {
|
||||
throw new Error(res.message || '获取用户信息失败');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('更新头像失败:', err);
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
|
||||
// 删除头像
|
||||
handleAvatarDelete() {
|
||||
this.avatarList = [];
|
||||
this.displayAvatar = '/static/imgs/index/nav.png';
|
||||
this.userInfo.avatarUrl = '';
|
||||
},
|
||||
|
||||
@ -444,7 +493,10 @@ export default {
|
||||
async handleSubmit() {
|
||||
if (!this.isLogin) return;
|
||||
|
||||
const { name, bio } = this.formData;
|
||||
const {
|
||||
name,
|
||||
bio
|
||||
} = this.formData;
|
||||
const avatarUrl = this.avatarList.length > 0 ? this.avatarList[0].url : "";
|
||||
|
||||
if (!name) {
|
||||
@ -455,7 +507,9 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showLoading({ title: '提交中...' });
|
||||
uni.showLoading({
|
||||
title: '提交中...'
|
||||
});
|
||||
|
||||
try {
|
||||
// 1. 提交修改请求
|
||||
@ -473,7 +527,9 @@ export default {
|
||||
this.updateUserInfo(res.data);
|
||||
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: '修改成功' });
|
||||
uni.showToast({
|
||||
title: '修改成功'
|
||||
});
|
||||
this.showEditModal = false;
|
||||
} else {
|
||||
throw new Error(res.message || '获取用户信息失败');
|
||||
@ -520,19 +576,19 @@ export default {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.profile-page {
|
||||
.profile-page {
|
||||
background-color: #f5f7fa;
|
||||
padding: 20rpx;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-card {
|
||||
.user-info-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
@ -544,9 +600,9 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
.avatar-section {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.avatar-wrapper {
|
||||
@ -575,11 +631,24 @@ export default {
|
||||
justify-content: center;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name-section {
|
||||
// display: flex;
|
||||
.u-loading-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name-section {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
@ -589,16 +658,15 @@ export default {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
// margin-right: 12rpx;
|
||||
}
|
||||
.phone{
|
||||
|
||||
.phone {
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.description-card {
|
||||
.description-card {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
@ -617,9 +685,9 @@ export default {
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.function-card {
|
||||
.function-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 30rpx;
|
||||
@ -658,12 +726,18 @@ export default {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
.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;
|
||||
@ -673,28 +747,70 @@ export default {
|
||||
font-size: 28rpx;
|
||||
color: #606266;
|
||||
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;
|
||||
color: #999;
|
||||
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;
|
||||
margin-bottom: 40rpx;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.auth-button {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background: #07C160;
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
border-radius: 45rpx;
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
@ -702,13 +818,26 @@ export default {
|
||||
|
||||
&.phone-button {
|
||||
background: #2979ff;
|
||||
margin-top: 20rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.wechat-icon, .phone-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-tip {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,44 +1,69 @@
|
||||
<template>
|
||||
<view class="work-order-detail">
|
||||
<!-- 头部用户信息区域 -->
|
||||
<view class="header">
|
||||
<image class="avatar" :src="detailObj.customerPortrait" mode="aspectFill"></image>
|
||||
<text class="username">{{detailObj.customerName}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 图片区域 - 编辑状态下可修改 -->
|
||||
<view class="image-area">
|
||||
<image class="work-order-img" :src="`${IMAGE_BASE_URL}`+detailObj.images[0]" mode="widthFix" v-if="!isEditing"></image>
|
||||
<view v-else>
|
||||
<image class="work-order-img" :src="workOrderImg" mode="widthFix"></image>
|
||||
<view class="upload-btn" @click="uploadImage">
|
||||
<u-icon name="camera" size="40" color="#fff"></u-icon>
|
||||
<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">
|
||||
<text class="title" >{{detailObj.label}}</text>
|
||||
<text class="date">{{formatTime(detailObj.createdAt,"YYYY-MM-DD")}}</text>
|
||||
<view class="title-area card">
|
||||
<view class="title-wrap">
|
||||
<text class="title" :class="{empty: !detailObj.label}">{{detailObj.label || '未设置标题'}}</text>
|
||||
</view>
|
||||
<view class="date-wrap">
|
||||
<text class="date">{{formatTime(detailObj.createdAt,"YYYY-MM-DD") || '未知时间'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 工单详情内容 - 编辑状态下可修改 -->
|
||||
<view class="content">
|
||||
<view class="content card">
|
||||
<view class="label">
|
||||
<view class="label-name">
|
||||
<!-- <u-icon name="map-marker" size="24" color="#409EFF"></u-icon> -->
|
||||
<text>工单地点：</text>
|
||||
<text v-if="!isEditing" style="font-weight: normal;">{{detailObj.address}}</text>
|
||||
<input class="edit-input" v-model="editAddress" v-else placeholder="请输入地点" />
|
||||
</view>
|
||||
<text v-if="!isEditing" style="font-weight: normal;" :class="{empty: !detailObj.address}">{{detailObj.address || '未填写'}}</text>
|
||||
<input class="edit-input" v-model="editAddress" v-else placeholder="请输入工单地点" />
|
||||
</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>
|
||||
<input class="edit-input" v-model="editContactName" v-else placeholder="请输入联系人" />
|
||||
</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>
|
||||
<input class="edit-input" v-model="editContactPhone" v-else placeholder="请输入联系电话" type="number" />
|
||||
</view>
|
||||
<view class="label label-content">
|
||||
<view class="label-name">
|
||||
<!-- <u-icon name="file-text" size="24" color="#409EFF"></u-icon> -->
|
||||
<text>工单内容：</text>
|
||||
<text v-if="!isEditing" style="font-weight: normal;">{{detailObj.title}}</text>
|
||||
</view>
|
||||
<text v-if="!isEditing" style="font-weight: normal; white-space: pre-line;" :class="{empty: !detailObj.title}">{{detailObj.title || '未填写'}}</text>
|
||||
<textarea
|
||||
class="edit-textarea"
|
||||
v-model="editTitle"
|
||||
v-else
|
||||
placeholder="请输入内容"
|
||||
placeholder="请输入工单详细内容"
|
||||
auto-height
|
||||
/>
|
||||
</view>
|
||||
@ -49,15 +74,17 @@
|
||||
<u-button
|
||||
@click="handleModify"
|
||||
:type="isEditing ? 'success' : 'primary'"
|
||||
class="action-btn"
|
||||
class="action-btn primary-btn"
|
||||
:loading="isLoading"
|
||||
shape="circle"
|
||||
>
|
||||
{{isEditing ? '保存修改' : '修改'}}
|
||||
</u-button>
|
||||
<u-button
|
||||
@click="handleWithdraw"
|
||||
:type="isEditing ? 'default' : 'primary'"
|
||||
:type="isEditing ? 'default' : 'warning'"
|
||||
class="action-btn"
|
||||
shape="circle"
|
||||
>
|
||||
{{isEditing ? '取消编辑' : '撤回'}}
|
||||
</u-button>
|
||||
@ -83,6 +110,8 @@
|
||||
editLabel: '',
|
||||
editAddress: '',
|
||||
editTitle: '',
|
||||
editContactName: '', // 新增：联系人
|
||||
editContactPhone: '', // 新增：联系电话
|
||||
detailObj: {},
|
||||
tempImagePath: '' // 临时存储上传的图片路径
|
||||
};
|
||||
@ -91,6 +120,9 @@
|
||||
let obj = uni.getStorageSync("Detail");
|
||||
this.detailObj = {...obj};
|
||||
this.workOrderImg = `${IMAGE_BASE_URL}${this.detailObj.images[0]}`;
|
||||
// 初始化新增字段
|
||||
this.editContactName = this.detailObj.concatName || '';
|
||||
this.editContactPhone = this.detailObj.customerPhone || '';
|
||||
},
|
||||
methods: {
|
||||
// 上传图片到服务器
|
||||
@ -145,6 +177,8 @@
|
||||
this.editLabel = this.detailObj.label;
|
||||
this.editAddress = this.detailObj.address;
|
||||
this.editTitle = this.detailObj.title;
|
||||
this.editContactName = this.detailObj.concatName;
|
||||
this.editContactPhone = this.detailObj.customerPhone;
|
||||
this.isEditing = true;
|
||||
} else {
|
||||
// 保存修改
|
||||
@ -164,7 +198,9 @@
|
||||
address: this.editAddress,
|
||||
title: this.editTitle,
|
||||
images: images,
|
||||
status:1
|
||||
status: 1,
|
||||
concatName: this.editContactName, // 新增：联系人
|
||||
customerPhone: this.editContactPhone // 新增：联系电话
|
||||
};
|
||||
|
||||
const res = await put(`/api/v1/app_auth/work-order/${this.detailObj.id}`, requestData);
|
||||
@ -203,6 +239,14 @@
|
||||
|
||||
// 撤回/取消操作
|
||||
async handleWithdraw() {
|
||||
if (this.isEditing) {
|
||||
// 取消编辑状态，不发送请求
|
||||
this.isEditing = false;
|
||||
this.tempImagePath = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 撤回工单
|
||||
const res = await put(`/api/v1/app_auth/work-order/${this.detailObj.id}`, {status:98});
|
||||
|
||||
if (res && res.success) {
|
||||
@ -222,146 +266,335 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 原有样式保持不变 */
|
||||
// 定义变量
|
||||
$primary-color: #007AFF;
|
||||
$success-color: #4cd964;
|
||||
$warning-color: #FF9500;
|
||||
$text-color: #333;
|
||||
$subtext-color: #999;
|
||||
$border-radius: 10rpx;
|
||||
$padding-base: 15rpx;
|
||||
$font-base: 32rpx;
|
||||
/* 基础变量优化 */
|
||||
$primary-color: #409EFF; // 更舒适的蓝色
|
||||
$success-color: #67C23A;
|
||||
$warning-color: #F56C6C;
|
||||
$text-color: #303133;
|
||||
$subtext-color: #606266;
|
||||
$light-text: #909399;
|
||||
$border-color: #E4E7ED;
|
||||
$bg-color: #F5F7FA;
|
||||
$card-bg: #FFFFFF;
|
||||
$border-radius: 12rpx;
|
||||
$shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
$transition: all 0.2s ease;
|
||||
|
||||
// 定义 mixin
|
||||
/* 工具类 */
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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);
|
||||
@mixin card {
|
||||
background: $card-bg;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $shadow;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
transition: $transition;
|
||||
|
||||
.header {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面容器 */
|
||||
.work-order-detail {
|
||||
background-color: $bg-color;
|
||||
min-height: 100vh;
|
||||
padding: 0 30rpx 40rpx;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.navbar {
|
||||
@include flex-center;
|
||||
margin-bottom: $padding-base;
|
||||
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: 80rpx;
|
||||
height: 80rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
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: $font-base;
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
color: $text-color;
|
||||
}
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.image-area {
|
||||
position: relative;
|
||||
margin-bottom: $padding-base;
|
||||
.status-tag {
|
||||
margin-left: 12rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.work-order-img {
|
||||
width: 100%;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
right: 20rpx;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 30rpx;
|
||||
.contact-info {
|
||||
@include flex-center;
|
||||
|
||||
.upload-text {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.title-area {
|
||||
@include flex-center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $padding-base;
|
||||
border-bottom: 2rpx solid $subtext-color;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
|
||||
.title {
|
||||
font-size: $font-base + 2rpx;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
max-width: 70%;
|
||||
.info-icon {
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.title-input {
|
||||
font-size: $font-base + 2rpx;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
width: 70%;
|
||||
padding: 10rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: $font-base - 4rpx;
|
||||
.user-phone {
|
||||
color: $subtext-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片区域优化 */
|
||||
.image-area {
|
||||
@include card;
|
||||
padding: 24rpx;
|
||||
|
||||
.img-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
.work-order-img {
|
||||
width: 100%;
|
||||
border-radius: 8rpx;
|
||||
transition: $transition;
|
||||
// 加载占位效果
|
||||
&:empty {
|
||||
height: 300rpx;
|
||||
background-color: $bg-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
position: absolute;
|
||||
right: 16rpx;
|
||||
bottom: 16rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 24rpx;
|
||||
@include flex-center;
|
||||
transition: $transition;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 标题区域优化 */
|
||||
.title-area {
|
||||
@include card;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
|
||||
.title-wrap {
|
||||
@include flex-center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 34rpx;
|
||||
color: $text-color;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.date-wrap {
|
||||
@include flex-center;
|
||||
align-self: flex-end;
|
||||
padding-top: 4rpx;
|
||||
}
|
||||
|
||||
.date-icon {
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 26rpx;
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
|
||||
/* 内容区域优化 */
|
||||
.content {
|
||||
margin-bottom: $padding-base;
|
||||
line-height: 50rpx;
|
||||
font-size: 24rpx;
|
||||
@include card;
|
||||
|
||||
.label {
|
||||
text {
|
||||
font-weight: bold;
|
||||
}
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-bottom: 28rpx;
|
||||
align-items: flex-start;
|
||||
padding-bottom: 28rpx;
|
||||
border-bottom:1rpx dashed $border-color;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.edit-input {
|
||||
width: 95%;
|
||||
padding: 10rpx;
|
||||
background: #f8f8f8;
|
||||
.label-name {
|
||||
@include flex-center;
|
||||
min-width: 160rpx;
|
||||
font-weight: 500;
|
||||
color: $subtext-color;
|
||||
font-size: 28rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.label-name u-icon {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
& > text {
|
||||
font-size: 28rpx;
|
||||
color: $text-color;
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.label-content {
|
||||
align-items: flex-start;
|
||||
|
||||
& > text {
|
||||
white-space: pre-line;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-input, .edit-textarea {
|
||||
flex: 1;
|
||||
padding: 12rpx 16rpx;
|
||||
background: $bg-color;
|
||||
border-radius: 8rpx;
|
||||
margin-top: 5rpx;
|
||||
border: 1px solid $border-color;
|
||||
font-size: 28rpx;
|
||||
color: $text-color;
|
||||
line-height: 1.5;
|
||||
transition: $transition;
|
||||
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
background: #fff;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.edit-textarea {
|
||||
width: 95%;
|
||||
padding: 10rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 8rpx;
|
||||
margin-top: 5rpx;
|
||||
min-height: 150rpx;
|
||||
min-height: 180rpx;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: $light-text;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮区域优化 */
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
padding: 30rpx 10rpx 20rpx;
|
||||
background-color: transparent;
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 45rpx;
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background-color: $primary-color;
|
||||
|
||||
&:active {
|
||||
background-color: #3A8EE6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 适配小屏幕 */
|
||||
@media (max-width: 375px) {
|
||||
$font-base: 28rpx;
|
||||
|
||||
.header {
|
||||
padding: 18rpx;
|
||||
|
||||
.avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
@include flex-center;
|
||||
justify-content: space-around;
|
||||
margin-top: 30rpx;
|
||||
gap:30rpx;
|
||||
padding: 20rpx 5rpx;
|
||||
|
||||
.action-btn {
|
||||
width: 30%; // 调整为原来的一半
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: $font-base - 4rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,16 +1,35 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="conent">
|
||||
<view class="content">
|
||||
<view class="form-item">
|
||||
<view class="label">
|
||||
<u-icon name="order" color="#3B8CFF" size="38"></u-icon>
|
||||
工单内容
|
||||
</view>
|
||||
<textarea v-model="workOrderContent" placeholder="请输入..." style="width: 100%;" />
|
||||
<textarea v-model="workOrderContent" placeholder="请输入工单详细内容..." class="textarea" />
|
||||
<view class="voice-icon">
|
||||
<u-icon name="mic" color="#409EFF" size="36"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 联系人信息 -->
|
||||
<view class="form-item contact-info">
|
||||
<view class="contact-row">
|
||||
<view class="label">
|
||||
<u-icon name="account" color="#3B8CFF" size="38"></u-icon>
|
||||
联系人
|
||||
</view>
|
||||
<input v-model="concatName" placeholder="请输入联系人姓名" class="contact-input" />
|
||||
</view>
|
||||
<view class="contact-row">
|
||||
<view class="label">
|
||||
<u-icon name="phone" color="#3B8CFF" size="38"></u-icon>
|
||||
电话
|
||||
</view>
|
||||
<input v-model="customerPhone" placeholder="请输入联系人电话" class="contact-input" type="number" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 上传照片/视频 -->
|
||||
<view class="form-item">
|
||||
<view class="label">
|
||||
@ -19,17 +38,18 @@
|
||||
</view>
|
||||
<view class="upload-area">
|
||||
<u-upload :fileList="fileList" @afterRead="handleAfterRead" @delete="handleDelete" :maxCount="8"
|
||||
width="200" height="200" accept="image/*,video/*" :previewFullImage="true">
|
||||
width="160" height="160" accept="image/*,video/*" :previewFullImage="true">
|
||||
</u-upload>
|
||||
</view>
|
||||
<text class="note">注：照片可识别工单内容，支持分批上传，但最大数量为8</text>
|
||||
</view>
|
||||
|
||||
<!-- 工单分类 -->
|
||||
<view class="form-item" style="height: 60rpx;line-height: 50rpx;">
|
||||
<view class="form-item">
|
||||
<view class="label" @click="showSelect = true">
|
||||
<u-icon name="list" color="#3B8CFF" size="38"></u-icon>
|
||||
工单类型
|
||||
<view @click="showPicker = true" class="select-box">
|
||||
<view class="select-box">
|
||||
{{ workOrderCategory || '请选择' }}
|
||||
<u-icon name="arrow-down" color="#999" size="30"></u-icon>
|
||||
</view>
|
||||
@ -40,17 +60,17 @@
|
||||
</view>
|
||||
|
||||
<!-- 工单地点 -->
|
||||
<view class="form-item" style="margin-bottom: 30rpx;height: 200rpx;">
|
||||
<view class="form-item">
|
||||
<view class="label">
|
||||
<u-icon name="map" color="#3B8CFF" size="38"></u-icon>
|
||||
工作地点
|
||||
</view>
|
||||
<textarea v-model="workOrderLocation" placeholder="请输入..." style="width: 100%;" />
|
||||
<textarea v-model="workOrderLocation" placeholder="请输入详细工作地点..." class="textarea" />
|
||||
</view>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<view class="submit-button">
|
||||
<u-button type="primary" @click="handleSubmit">提交</u-button>
|
||||
<u-button type="primary" @click="handleSubmit" shape="circle">提交工单</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<Footer></Footer>
|
||||
@ -74,6 +94,8 @@
|
||||
data() {
|
||||
return {
|
||||
workOrderContent: '',
|
||||
concatName: '', // 新增联系人姓名字段
|
||||
customerPhone: '', // 新增联系人电话字段
|
||||
fileList: [],
|
||||
workOrderCategory: '',
|
||||
workOrderCategoryID: '',
|
||||
@ -81,8 +103,8 @@
|
||||
categoryList: [],
|
||||
workOrderLocation: '',
|
||||
expectedTime: '',
|
||||
uploadedImages: [], // 专门存储图片URL
|
||||
uploadedVideos: [], // 专门存储视频URL
|
||||
uploadedImages: [],
|
||||
uploadedVideos: [],
|
||||
videoFormats: ['mp4', 'mov', 'avi', 'wmv', 'mpeg', '3gp', 'flv', 'mkv']
|
||||
};
|
||||
},
|
||||
@ -103,7 +125,6 @@
|
||||
} = event;
|
||||
let files = [].concat(file);
|
||||
|
||||
// 检查文件数量和类型
|
||||
if (this.fileList.length + files.length > 8) {
|
||||
uni.showToast({
|
||||
title: '最多只能上传8个文件',
|
||||
@ -113,11 +134,9 @@
|
||||
}
|
||||
|
||||
files.forEach(item => {
|
||||
// 检查文件类型
|
||||
const extension = this.getFileExtension(item.url);
|
||||
const isVideo = this.videoFormats.includes(extension.toLowerCase());
|
||||
|
||||
// 添加到文件列表
|
||||
this.fileList.push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
@ -125,12 +144,10 @@
|
||||
isVideo: isVideo
|
||||
});
|
||||
|
||||
// 开始上传
|
||||
this.uploadFile(item, isVideo);
|
||||
});
|
||||
},
|
||||
|
||||
// 获取文件扩展名
|
||||
getFileExtension(filename) {
|
||||
return filename.split('.').pop().split('?')[0];
|
||||
},
|
||||
@ -141,7 +158,6 @@
|
||||
} = event;
|
||||
const file = this.fileList[index];
|
||||
|
||||
// 从对应数组中删除
|
||||
if (file.isVideo) {
|
||||
const videoIndex = this.uploadedVideos.indexOf(file.url);
|
||||
if (videoIndex !== -1) this.uploadedVideos.splice(videoIndex, 1);
|
||||
@ -158,19 +174,17 @@
|
||||
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, // 预览用完整URL
|
||||
relativeUrl: relativePath, // 存储相对路径
|
||||
url: fullUrl,
|
||||
relativeUrl: relativePath,
|
||||
isVideo: isVideo
|
||||
};
|
||||
|
||||
// 存储相对路径到对应数组
|
||||
if (isVideo) {
|
||||
this.uploadedVideos.push(relativePath);
|
||||
} else {
|
||||
@ -230,6 +244,22 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.concatName) {
|
||||
uni.showToast({
|
||||
title: '请填写联系人姓名',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.customerPhone) {
|
||||
uni.showToast({
|
||||
title: '请填写联系电话',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.workOrderCategory) {
|
||||
uni.showToast({
|
||||
title: '请选择工单类型',
|
||||
@ -248,10 +278,12 @@
|
||||
|
||||
const submitData = {
|
||||
title: this.workOrderContent,
|
||||
concatName: this.concatName, // 新增联系人姓名
|
||||
customerPhone: this.customerPhone, // 新增联系人电话
|
||||
orderTypeId: this.workOrderCategoryID,
|
||||
address: this.workOrderLocation,
|
||||
images: this.uploadedImages, // 只包含图片
|
||||
videos: this.uploadedVideos, // 只包含视频·
|
||||
images: this.uploadedImages,
|
||||
videos: this.uploadedVideos,
|
||||
};
|
||||
|
||||
console.log('提交数据:', submitData);
|
||||
@ -267,19 +299,12 @@
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
this.workOrderContent = null;
|
||||
this.workOrderCategoryID = null;
|
||||
this.workOrderCategory = null;
|
||||
this.workOrderLocation = null;
|
||||
this.fileList = [];
|
||||
this.uploadedImages = [];
|
||||
this.uploadedVideos = [];
|
||||
this.resetForm();
|
||||
setTimeout(()=>{
|
||||
uni.navigateTo({
|
||||
url: `/pages/myTickets/index`,
|
||||
});
|
||||
},1000)
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res?.message || '提交失败',
|
||||
@ -288,19 +313,28 @@
|
||||
}
|
||||
},
|
||||
|
||||
// 用户点击"确定"时触发
|
||||
resetForm() {
|
||||
this.workOrderContent = '';
|
||||
this.concatName = '';
|
||||
this.customerPhone = '';
|
||||
this.workOrderCategoryID = '';
|
||||
this.workOrderCategory = '';
|
||||
this.workOrderLocation = '';
|
||||
this.fileList = [];
|
||||
this.uploadedImages = [];
|
||||
this.uploadedVideos = [];
|
||||
},
|
||||
|
||||
handleConfirm(e) {
|
||||
this.workOrderCategory = e.value[0].label;
|
||||
this.workOrderCategoryID = e.value[0].id;
|
||||
this.showSelect = false;
|
||||
},
|
||||
|
||||
// 用户点击"取消"时触发
|
||||
handleCancel() {
|
||||
this.showSelect = false;
|
||||
},
|
||||
|
||||
//获取工单类型
|
||||
async getOrderList() {
|
||||
try {
|
||||
const res = await get('/api/v1/apps/work-order-type');
|
||||
@ -324,65 +358,104 @@
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 130vh;
|
||||
opacity: 1;
|
||||
background: rgba(210, 227, 255, 1);
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding-bottom: 120rpx;
|
||||
|
||||
.conent {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
margin-top: 20rpx;
|
||||
.content {
|
||||
padding: 20rpx;
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 20px;
|
||||
height: 400rpx;
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20rpx;
|
||||
background: #fff;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.label {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.select-box {
|
||||
font-weight: 500;
|
||||
margin-bottom: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 30rpx;
|
||||
color: #999;
|
||||
|
||||
.u-icon {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 95%;
|
||||
height: 180rpx;
|
||||
padding: 16rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.voice-icon {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
bottom: 20rpx;
|
||||
right: 40rpx;
|
||||
bottom: 40rpx;
|
||||
}
|
||||
|
||||
.select-box {
|
||||
margin-left: auto;
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
|
||||
.u-icon {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.note {
|
||||
font-size: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 60rpx;
|
||||
margin-top: 24rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
.contact-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 0;
|
||||
width: 160rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.contact-input {
|
||||
flex: 1;
|
||||
padding: 16rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
margin-top: 40rpx;
|
||||
|
||||
.u-button {
|
||||
height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user