修改
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
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
1395
pages/mine/index.vue
1395
pages/mine/index.vue
File diff suppressed because it is too large
Load Diff
@ -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">
|
||||
<text>工单地点：</text>
|
||||
<text v-if="!isEditing" style="font-weight: normal;">{{detailObj.address}}</text>
|
||||
<input class="edit-input" v-model="editAddress" v-else placeholder="请输入地点" />
|
||||
<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>
|
||||
<input class="edit-input" v-model="editAddress" v-else placeholder="请输入工单地点" />
|
||||
</view>
|
||||
<view class="label">
|
||||
<text>工单内容：</text>
|
||||
<text v-if="!isEditing" style="font-weight: normal;">{{detailObj.title}}</text>
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
@mixin card {
|
||||
background: $card-bg;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $shadow;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
transition: $transition;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面容器 */
|
||||
.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);
|
||||
background-color: $bg-color;
|
||||
min-height: 100vh;
|
||||
padding: 0 30rpx 40rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
@include flex-center;
|
||||
margin-bottom: $padding-base;
|
||||
/* 导航栏 */
|
||||
.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;
|
||||
|
||||
.avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
color: $text-color;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-left: -36rpx; // 抵消图标宽度
|
||||
}
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: $font-base;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
}
|
||||
/* 头部用户信息 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.image-area {
|
||||
.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;
|
||||
padding: 24rpx;
|
||||
|
||||
.img-container {
|
||||
position: relative;
|
||||
margin-bottom: $padding-base;
|
||||
width: 100%;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
.work-order-img {
|
||||
width: 100%;
|
||||
border-radius: $border-radius;
|
||||
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;
|
||||
bottom: 20rpx;
|
||||
right: 20rpx;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 30rpx;
|
||||
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: 24rpx;
|
||||
margin-left: 8rpx;
|
||||
font-size: 26rpx;
|
||||
margin-left: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-area {
|
||||
/* 标题区域优化 */
|
||||
.title-area {
|
||||
@include card;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
|
||||
.title-wrap {
|
||||
@include flex-center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $padding-base;
|
||||
border-bottom: 2rpx solid $subtext-color;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: $font-base + 2rpx;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
max-width: 70%;
|
||||
.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 {
|
||||
@include card;
|
||||
|
||||
.label {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-bottom: $padding-base;
|
||||
line-height: 50rpx;
|
||||
font-size: 24rpx;
|
||||
.label-content {
|
||||
align-items: flex-start;
|
||||
|
||||
.label {
|
||||
text {
|
||||
font-weight: bold;
|
||||
}
|
||||
margin-bottom: 20rpx;
|
||||
& > text {
|
||||
white-space: pre-line;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-input {
|
||||
width: 95%;
|
||||
padding: 10rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 8rpx;
|
||||
margin-top: 5rpx;
|
||||
.edit-input, .edit-textarea {
|
||||
flex: 1;
|
||||
padding: 12rpx 16rpx;
|
||||
background: $bg-color;
|
||||
border-radius: 8rpx;
|
||||
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;
|
||||
.edit-textarea {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
.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 {
|
||||
margin-top: 40rpx;
|
||||
|
||||
.u-button {
|
||||
height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user