修改
This commit is contained in:
qiuyuan
parent
2fb1c184cf
commit
59551ae26a
@ -92,8 +92,10 @@
|
|||||||
const defaultValue=this.generateMiniProgramUUID()
|
const defaultValue=this.generateMiniProgramUUID()
|
||||||
wx.setStorageSync('userId', defaultValue)
|
wx.setStorageSync('userId', defaultValue)
|
||||||
this.userId=defaultValue
|
this.userId=defaultValue
|
||||||
|
}else{
|
||||||
|
this.userId=value
|
||||||
}
|
}
|
||||||
this.userId=value
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log(e)
|
console.log(e)
|
||||||
const defaultValue=this.generateMiniProgramUUID()
|
const defaultValue=this.generateMiniProgramUUID()
|
||||||
|
|||||||
@ -52,19 +52,19 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="weather-footer">
|
<view class="weather-footer">
|
||||||
<view class="footer-item">
|
<view class="footer-item">
|
||||||
<text class="footer-icon">🌬️东风</text>
|
<text class="footer-icon">️风向</text>
|
||||||
<text class="footer-text">{{weather.wind}}</text>
|
<text class="footer-text">{{weather.wind}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="footer-item">
|
<view class="footer-item">
|
||||||
<text class="footer-icon">💧湿度</text>
|
<text class="footer-icon">湿度</text>
|
||||||
<text class="footer-text">{{weather.humidity}}%</text>
|
<text class="footer-text">{{weather.humidity}}%</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="footer-item">
|
<view class="footer-item">
|
||||||
<text class="footer-icon">🌫️空气质量</text>
|
<text class="footer-icon">️空气质量</text>
|
||||||
<text class="footer-text">{{weather.quality}}</text>
|
<text class="footer-text">{{weather.quality}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="footer-item">
|
<view class="footer-item">
|
||||||
<text class="footer-icon">☀️紫外线</text>
|
<text class="footer-icon">️紫外线</text>
|
||||||
<text class="footer-text">{{weather.uv_index}}</text>
|
<text class="footer-text">{{weather.uv_index}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -389,7 +389,8 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
.footer-icon {
|
.footer-icon {
|
||||||
font-size: 24rpx;
|
font-size: 28rpx;
|
||||||
|
font-weight:500;
|
||||||
margin-bottom: 6rpx;
|
margin-bottom: 6rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
1463
pages/mine/index.vue
1463
pages/mine/index.vue
File diff suppressed because it is too large
Load Diff
@ -1,44 +1,69 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="work-order-detail">
|
<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">
|
<view class="image-area card">
|
||||||
<image class="work-order-img" :src="`${IMAGE_BASE_URL}`+detailObj.images[0]" mode="widthFix" v-if="!isEditing"></image>
|
<view class="img-container">
|
||||||
<view v-else>
|
<image
|
||||||
<image class="work-order-img" :src="workOrderImg" mode="widthFix"></image>
|
class="work-order-img"
|
||||||
<view class="upload-btn" @click="uploadImage">
|
:src="!isEditing ? `${IMAGE_BASE_URL}${detailObj.images[0] || ''}` : workOrderImg"
|
||||||
<u-icon name="camera" size="40" color="#fff"></u-icon>
|
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>
|
<text class="upload-text">更换图片</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 标题与日期 -->
|
<!-- 标题与日期 -->
|
||||||
<view class="title-area">
|
<view class="title-area card">
|
||||||
<text class="title" >{{detailObj.label}}</text>
|
<view class="title-wrap">
|
||||||
<text class="date">{{formatTime(detailObj.createdAt,"YYYY-MM-DD")}}</text>
|
<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>
|
||||||
|
|
||||||
<!-- 工单详情内容 - 编辑状态下可修改 -->
|
<!-- 工单详情内容 - 编辑状态下可修改 -->
|
||||||
<view class="content">
|
<view class="content card">
|
||||||
<view class="label">
|
<view class="label">
|
||||||
<text>工单地点：</text>
|
<view class="label-name">
|
||||||
<text v-if="!isEditing" style="font-weight: normal;">{{detailObj.address}}</text>
|
<!-- <u-icon name="map-marker" size="24" color="#409EFF"></u-icon> -->
|
||||||
<input class="edit-input" v-model="editAddress" v-else placeholder="请输入地点" />
|
<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>
|
||||||
<view class="label">
|
<view class="label">
|
||||||
<text>工单内容：</text>
|
<view class="label-name">
|
||||||
<text v-if="!isEditing" style="font-weight: normal;">{{detailObj.title}}</text>
|
<!-- <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
|
<textarea
|
||||||
class="edit-textarea"
|
class="edit-textarea"
|
||||||
v-model="editTitle"
|
v-model="editTitle"
|
||||||
v-else
|
v-else
|
||||||
placeholder="请输入内容"
|
placeholder="请输入工单详细内容"
|
||||||
auto-height
|
auto-height
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
@ -49,15 +74,17 @@
|
|||||||
<u-button
|
<u-button
|
||||||
@click="handleModify"
|
@click="handleModify"
|
||||||
:type="isEditing ? 'success' : 'primary'"
|
:type="isEditing ? 'success' : 'primary'"
|
||||||
class="action-btn"
|
class="action-btn primary-btn"
|
||||||
:loading="isLoading"
|
:loading="isLoading"
|
||||||
|
shape="circle"
|
||||||
>
|
>
|
||||||
{{isEditing ? '保存修改' : '修改'}}
|
{{isEditing ? '保存修改' : '修改'}}
|
||||||
</u-button>
|
</u-button>
|
||||||
<u-button
|
<u-button
|
||||||
@click="handleWithdraw"
|
@click="handleWithdraw"
|
||||||
:type="isEditing ? 'default' : 'primary'"
|
:type="isEditing ? 'default' : 'warning'"
|
||||||
class="action-btn"
|
class="action-btn"
|
||||||
|
shape="circle"
|
||||||
>
|
>
|
||||||
{{isEditing ? '取消编辑' : '撤回'}}
|
{{isEditing ? '取消编辑' : '撤回'}}
|
||||||
</u-button>
|
</u-button>
|
||||||
@ -83,6 +110,8 @@
|
|||||||
editLabel: '',
|
editLabel: '',
|
||||||
editAddress: '',
|
editAddress: '',
|
||||||
editTitle: '',
|
editTitle: '',
|
||||||
|
editContactName: '', // 新增：联系人
|
||||||
|
editContactPhone: '', // 新增：联系电话
|
||||||
detailObj: {},
|
detailObj: {},
|
||||||
tempImagePath: '' // 临时存储上传的图片路径
|
tempImagePath: '' // 临时存储上传的图片路径
|
||||||
};
|
};
|
||||||
@ -91,6 +120,9 @@
|
|||||||
let obj = uni.getStorageSync("Detail");
|
let obj = uni.getStorageSync("Detail");
|
||||||
this.detailObj = {...obj};
|
this.detailObj = {...obj};
|
||||||
this.workOrderImg = `${IMAGE_BASE_URL}${this.detailObj.images[0]}`;
|
this.workOrderImg = `${IMAGE_BASE_URL}${this.detailObj.images[0]}`;
|
||||||
|
// 初始化新增字段
|
||||||
|
this.editContactName = this.detailObj.concatName || '';
|
||||||
|
this.editContactPhone = this.detailObj.customerPhone || '';
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 上传图片到服务器
|
// 上传图片到服务器
|
||||||
@ -145,6 +177,8 @@
|
|||||||
this.editLabel = this.detailObj.label;
|
this.editLabel = this.detailObj.label;
|
||||||
this.editAddress = this.detailObj.address;
|
this.editAddress = this.detailObj.address;
|
||||||
this.editTitle = this.detailObj.title;
|
this.editTitle = this.detailObj.title;
|
||||||
|
this.editContactName = this.detailObj.concatName;
|
||||||
|
this.editContactPhone = this.detailObj.customerPhone;
|
||||||
this.isEditing = true;
|
this.isEditing = true;
|
||||||
} else {
|
} else {
|
||||||
// 保存修改
|
// 保存修改
|
||||||
@ -164,7 +198,9 @@
|
|||||||
address: this.editAddress,
|
address: this.editAddress,
|
||||||
title: this.editTitle,
|
title: this.editTitle,
|
||||||
images: images,
|
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);
|
const res = await put(`/api/v1/app_auth/work-order/${this.detailObj.id}`, requestData);
|
||||||
@ -203,6 +239,14 @@
|
|||||||
|
|
||||||
// 撤回/取消操作
|
// 撤回/取消操作
|
||||||
async handleWithdraw() {
|
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});
|
const res = await put(`/api/v1/app_auth/work-order/${this.detailObj.id}`, {status:98});
|
||||||
|
|
||||||
if (res && res.success) {
|
if (res && res.success) {
|
||||||
@ -222,146 +266,335 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
/* 原有样式保持不变 */
|
/* 基础变量优化 */
|
||||||
// 定义变量
|
$primary-color: #409EFF; // 更舒适的蓝色
|
||||||
$primary-color: #007AFF;
|
$success-color: #67C23A;
|
||||||
$success-color: #4cd964;
|
$warning-color: #F56C6C;
|
||||||
$warning-color: #FF9500;
|
$text-color: #303133;
|
||||||
$text-color: #333;
|
$subtext-color: #606266;
|
||||||
$subtext-color: #999;
|
$light-text: #909399;
|
||||||
$border-radius: 10rpx;
|
$border-color: #E4E7ED;
|
||||||
$padding-base: 15rpx;
|
$bg-color: #F5F7FA;
|
||||||
$font-base: 32rpx;
|
$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 {
|
@mixin flex-center {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
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 {
|
.work-order-detail {
|
||||||
padding: $padding-base;
|
background-color: $bg-color;
|
||||||
width: 90%;
|
min-height: 100vh;
|
||||||
margin: 0 auto;
|
padding: 0 30rpx 40rpx;
|
||||||
border-radius: 10rpx;
|
}
|
||||||
box-shadow: 0rpx 2rpx 10rpx rgba(0, 0, 0, 0.25);
|
|
||||||
|
/* 导航栏 */
|
||||||
.header {
|
.navbar {
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
margin-bottom: $padding-base;
|
height: 100rpx;
|
||||||
|
width: 100%;
|
||||||
.avatar {
|
padding: 0 10rpx;
|
||||||
width: 80rpx;
|
background: $card-bg;
|
||||||
height: 80rpx;
|
border-bottom: 1px solid $border-color;
|
||||||
border-radius: 50%;
|
position: sticky;
|
||||||
margin-right: 10rpx;
|
top: 0;
|
||||||
}
|
z-index: 10;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
.username {
|
|
||||||
font-size: $font-base;
|
.nav-title {
|
||||||
font-weight: bold;
|
font-size: 36rpx;
|
||||||
color: $text-color;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-area {
|
.user-info {
|
||||||
position: relative;
|
margin-left: 24rpx;
|
||||||
margin-bottom: $padding-base;
|
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;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: $bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
.work-order-img {
|
.work-order-img {
|
||||||
width: 100%;
|
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 {
|
.upload-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 20rpx;
|
right: 16rpx;
|
||||||
right: 20rpx;
|
bottom: 16rpx;
|
||||||
background: rgba(0, 0, 0, 0.6);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
padding: 8rpx 20rpx;
|
padding: 8rpx 16rpx;
|
||||||
border-radius: 30rpx;
|
border-radius: 24rpx;
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
|
transition: $transition;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
.upload-text {
|
.upload-text {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 24rpx;
|
font-size: 26rpx;
|
||||||
margin-left: 8rpx;
|
margin-left: 6rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.title-area {
|
|
||||||
|
/* 标题区域优化 */
|
||||||
|
.title-area {
|
||||||
|
@include card;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16rpx;
|
||||||
|
|
||||||
|
.title-wrap {
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
justify-content: space-between;
|
width: 100%;
|
||||||
margin-bottom: $padding-base;
|
}
|
||||||
border-bottom: 2rpx solid $subtext-color;
|
|
||||||
height: 70rpx;
|
.title-icon {
|
||||||
line-height: 70rpx;
|
margin-right: 12rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
.title {
|
}
|
||||||
font-size: $font-base + 2rpx;
|
|
||||||
font-weight: bold;
|
.title {
|
||||||
color: $text-color;
|
font-size: 34rpx;
|
||||||
max-width: 70%;
|
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 {
|
.label-name {
|
||||||
font-size: $font-base + 2rpx;
|
@include flex-center;
|
||||||
font-weight: bold;
|
min-width: 160rpx;
|
||||||
color: $text-color;
|
font-weight: 500;
|
||||||
width: 70%;
|
|
||||||
padding: 10rpx;
|
|
||||||
background: #f8f8f8;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date {
|
|
||||||
font-size: $font-base - 4rpx;
|
|
||||||
color: $subtext-color;
|
color: $subtext-color;
|
||||||
}
|
font-size: 28rpx;
|
||||||
}
|
flex-shrink: 0;
|
||||||
|
|
||||||
.content {
|
|
||||||
margin-bottom: $padding-base;
|
|
||||||
line-height: 50rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
text {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-input {
|
.label-name u-icon {
|
||||||
width: 95%;
|
margin-right: 8rpx;
|
||||||
padding: 10rpx;
|
|
||||||
background: #f8f8f8;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
margin-top: 5rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-textarea {
|
& > text {
|
||||||
width: 95%;
|
font-size: 28rpx;
|
||||||
padding: 10rpx;
|
color: $text-color;
|
||||||
background: #f8f8f8;
|
line-height: 1.6;
|
||||||
border-radius: 8rpx;
|
flex: 1;
|
||||||
margin-top: 5rpx;
|
|
||||||
min-height: 150rpx;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-group {
|
.label-content {
|
||||||
@include flex-center;
|
align-items: flex-start;
|
||||||
justify-content: space-around;
|
|
||||||
margin-top: 30rpx;
|
& > text {
|
||||||
gap:30rpx;
|
white-space: pre-line;
|
||||||
|
word-break: break-all;
|
||||||
.action-btn {
|
}
|
||||||
width: 30%; // 调整为原来的一半
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
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;
|
height: 80rpx;
|
||||||
border-radius: 40rpx;
|
}
|
||||||
font-size: $font-base - 4rpx;
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
padding: 20rpx 5rpx;
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,390 +1,463 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="conent">
|
<view class="content">
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<view class="label">
|
<view class="label">
|
||||||
<u-icon name="order" color="#3B8CFF" size="38"></u-icon>
|
<u-icon name="order" color="#3B8CFF" size="38"></u-icon>
|
||||||
工单内容
|
工单内容
|
||||||
</view>
|
</view>
|
||||||
<textarea v-model="workOrderContent" placeholder="请输入..." style="width: 100%;" />
|
<textarea v-model="workOrderContent" placeholder="请输入工单详细内容..." class="textarea" />
|
||||||
<view class="voice-icon">
|
<view class="voice-icon">
|
||||||
<u-icon name="mic" color="#409EFF" size="36"></u-icon>
|
<u-icon name="mic" color="#409EFF" size="36"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 上传照片/视频 -->
|
|
||||||
<view class="form-item">
|
<!-- 联系人信息 -->
|
||||||
<view class="label">
|
<view class="form-item contact-info">
|
||||||
<u-icon name="photo" color="#3B8CFF" size="38"></u-icon>
|
<view class="contact-row">
|
||||||
上传照片/视频
|
<view class="label">
|
||||||
</view>
|
<u-icon name="account" color="#3B8CFF" size="38"></u-icon>
|
||||||
<view class="upload-area">
|
联系人
|
||||||
<u-upload :fileList="fileList" @afterRead="handleAfterRead" @delete="handleDelete" :maxCount="8"
|
</view>
|
||||||
width="200" height="200" accept="image/*,video/*" :previewFullImage="true">
|
<input v-model="concatName" placeholder="请输入联系人姓名" class="contact-input" />
|
||||||
</u-upload>
|
</view>
|
||||||
</view>
|
<view class="contact-row">
|
||||||
<text class="note">注：照片可识别工单内容，支持分批上传，但最大数量为8</text>
|
<view class="label">
|
||||||
</view>
|
<u-icon name="phone" color="#3B8CFF" size="38"></u-icon>
|
||||||
|
电话
|
||||||
<!-- 工单分类 -->
|
</view>
|
||||||
<view class="form-item" style="height: 60rpx;line-height: 50rpx;">
|
<input v-model="customerPhone" placeholder="请输入联系人电话" class="contact-input" type="number" />
|
||||||
<view class="label" @click="showSelect = true">
|
</view>
|
||||||
工单类型
|
</view>
|
||||||
<view @click="showPicker = true" class="select-box">
|
|
||||||
{{ workOrderCategory || '请选择' }}
|
<!-- 上传照片/视频 -->
|
||||||
<u-icon name="arrow-down" color="#999" size="30"></u-icon>
|
<view class="form-item">
|
||||||
</view>
|
<view class="label">
|
||||||
</view>
|
<u-icon name="photo" color="#3B8CFF" size="38"></u-icon>
|
||||||
<u-picker :show="showSelect" :columns="categoryList" keyName="label" @confirm="handleConfirm"
|
上传照片/视频
|
||||||
@cancel="handleCancel">
|
</view>
|
||||||
</u-picker>
|
<view class="upload-area">
|
||||||
</view>
|
<u-upload :fileList="fileList" @afterRead="handleAfterRead" @delete="handleDelete" :maxCount="8"
|
||||||
|
width="160" height="160" accept="image/*,video/*" :previewFullImage="true">
|
||||||
<!-- 工单地点 -->
|
</u-upload>
|
||||||
<view class="form-item" style="margin-bottom: 30rpx;height: 200rpx;">
|
</view>
|
||||||
<view class="label">
|
<text class="note">注：照片可识别工单内容，支持分批上传，但最大数量为8</text>
|
||||||
<u-icon name="map" color="#3B8CFF" size="38"></u-icon>
|
</view>
|
||||||
工作地点
|
|
||||||
</view>
|
<!-- 工单分类 -->
|
||||||
<textarea v-model="workOrderLocation" placeholder="请输入..." style="width: 100%;" />
|
<view class="form-item">
|
||||||
</view>
|
<view class="label" @click="showSelect = true">
|
||||||
|
<u-icon name="list" color="#3B8CFF" size="38"></u-icon>
|
||||||
<!-- 提交按钮 -->
|
工单类型
|
||||||
<view class="submit-button">
|
<view class="select-box">
|
||||||
<u-button type="primary" @click="handleSubmit">提交</u-button>
|
{{ workOrderCategory || '请选择' }}
|
||||||
</view>
|
<u-icon name="arrow-down" color="#999" size="30"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
<Footer></Footer>
|
</view>
|
||||||
</view>
|
<u-picker :show="showSelect" :columns="categoryList" keyName="label" @confirm="handleConfirm"
|
||||||
</template>
|
@cancel="handleCancel">
|
||||||
|
</u-picker>
|
||||||
<script>
|
</view>
|
||||||
import Footer from '@/components/footer_common.vue';
|
|
||||||
import {
|
<!-- 工单地点 -->
|
||||||
get,
|
<view class="form-item">
|
||||||
post
|
<view class="label">
|
||||||
} from '@/utils/request';
|
<u-icon name="map" color="#3B8CFF" size="38"></u-icon>
|
||||||
import {
|
工作地点
|
||||||
IMAGE_BASE_URL,
|
</view>
|
||||||
BASE_URL
|
<textarea v-model="workOrderLocation" placeholder="请输入详细工作地点..." class="textarea" />
|
||||||
} from '@/utils/config';
|
</view>
|
||||||
export default {
|
|
||||||
components: {
|
<!-- 提交按钮 -->
|
||||||
Footer
|
<view class="submit-button">
|
||||||
},
|
<u-button type="primary" @click="handleSubmit" shape="circle">提交工单</u-button>
|
||||||
data() {
|
</view>
|
||||||
return {
|
</view>
|
||||||
workOrderContent: '',
|
<Footer></Footer>
|
||||||
fileList: [],
|
</view>
|
||||||
workOrderCategory: '',
|
</template>
|
||||||
workOrderCategoryID: '',
|
|
||||||
showSelect: false,
|
<script>
|
||||||
categoryList: [],
|
import Footer from '@/components/footer_common.vue';
|
||||||
workOrderLocation: '',
|
import {
|
||||||
expectedTime: '',
|
get,
|
||||||
uploadedImages: [], // 专门存储图片URL
|
post
|
||||||
uploadedVideos: [], // 专门存储视频URL
|
} from '@/utils/request';
|
||||||
videoFormats: ['mp4', 'mov', 'avi', 'wmv', 'mpeg', '3gp', 'flv', 'mkv']
|
import {
|
||||||
};
|
IMAGE_BASE_URL,
|
||||||
},
|
BASE_URL
|
||||||
mounted() {
|
} from '@/utils/config';
|
||||||
this.getOrderList();
|
export default {
|
||||||
},
|
components: {
|
||||||
methods: {
|
Footer
|
||||||
handleBack() {
|
},
|
||||||
uni.navigateBack({
|
data() {
|
||||||
delta: 1
|
return {
|
||||||
});
|
workOrderContent: '',
|
||||||
},
|
concatName: '', // 新增联系人姓名字段
|
||||||
|
customerPhone: '', // 新增联系人电话字段
|
||||||
// 文件上传相关方法
|
fileList: [],
|
||||||
handleAfterRead(event) {
|
workOrderCategory: '',
|
||||||
const {
|
workOrderCategoryID: '',
|
||||||
file
|
showSelect: false,
|
||||||
} = event;
|
categoryList: [],
|
||||||
let files = [].concat(file);
|
workOrderLocation: '',
|
||||||
|
expectedTime: '',
|
||||||
// 检查文件数量和类型
|
uploadedImages: [],
|
||||||
if (this.fileList.length + files.length > 8) {
|
uploadedVideos: [],
|
||||||
uni.showToast({
|
videoFormats: ['mp4', 'mov', 'avi', 'wmv', 'mpeg', '3gp', 'flv', 'mkv']
|
||||||
title: '最多只能上传8个文件',
|
};
|
||||||
icon: 'none'
|
},
|
||||||
});
|
mounted() {
|
||||||
return;
|
this.getOrderList();
|
||||||
}
|
},
|
||||||
|
methods: {
|
||||||
files.forEach(item => {
|
handleBack() {
|
||||||
// 检查文件类型
|
uni.navigateBack({
|
||||||
const extension = this.getFileExtension(item.url);
|
delta: 1
|
||||||
const isVideo = this.videoFormats.includes(extension.toLowerCase());
|
});
|
||||||
|
},
|
||||||
// 添加到文件列表
|
|
||||||
this.fileList.push({
|
// 文件上传相关方法
|
||||||
...item,
|
handleAfterRead(event) {
|
||||||
status: 'uploading',
|
const {
|
||||||
message: '上传中...',
|
file
|
||||||
isVideo: isVideo
|
} = event;
|
||||||
});
|
let files = [].concat(file);
|
||||||
|
|
||||||
// 开始上传
|
if (this.fileList.length + files.length > 8) {
|
||||||
this.uploadFile(item, isVideo);
|
uni.showToast({
|
||||||
});
|
title: '最多只能上传8个文件',
|
||||||
},
|
icon: 'none'
|
||||||
|
|
||||||
// 获取文件扩展名
|
|
||||||
getFileExtension(filename) {
|
|
||||||
return filename.split('.').pop().split('?')[0];
|
|
||||||
},
|
|
||||||
|
|
||||||
handleDelete(event) {
|
|
||||||
const {
|
|
||||||
index
|
|
||||||
} = event;
|
|
||||||
const file = this.fileList[index];
|
|
||||||
|
|
||||||
// 从对应数组中删除
|
|
||||||
if (file.isVideo) {
|
|
||||||
const videoIndex = this.uploadedVideos.indexOf(file.url);
|
|
||||||
if (videoIndex !== -1) this.uploadedVideos.splice(videoIndex, 1);
|
|
||||||
} else {
|
|
||||||
const imageIndex = this.uploadedImages.indexOf(file.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, // 预览用完整URL
|
|
||||||
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({
|
|
||||||
title: '请填写工单内容',
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.workOrderCategory) {
|
|
||||||
uni.showToast({
|
|
||||||
title: '请选择工单类型',
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.workOrderLocation) {
|
|
||||||
uni.showToast({
|
|
||||||
title: '请填写工作地点',
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const submitData = {
|
|
||||||
title: this.workOrderContent,
|
|
||||||
orderTypeId: this.workOrderCategoryID,
|
|
||||||
address: this.workOrderLocation,
|
|
||||||
images: this.uploadedImages, // 只包含图片
|
|
||||||
videos: this.uploadedVideos, // 只包含视频·
|
|
||||||
};
|
|
||||||
|
|
||||||
console.log('提交数据:', submitData);
|
|
||||||
|
|
||||||
// 调用API保存信息
|
|
||||||
const res = await post('/api/v1/app_auth/work-order', submitData);
|
|
||||||
|
|
||||||
uni.hideLoading();
|
|
||||||
|
|
||||||
if (res && res.success) {
|
|
||||||
uni.showToast({
|
|
||||||
title: '提交成功',
|
|
||||||
icon: 'success',
|
|
||||||
duration: 2000
|
|
||||||
});
|
});
|
||||||
this.workOrderContent = null;
|
return;
|
||||||
this.workOrderCategoryID = null;
|
}
|
||||||
this.workOrderCategory = null;
|
|
||||||
this.workOrderLocation = null;
|
files.forEach(item => {
|
||||||
this.fileList = [];
|
const extension = this.getFileExtension(item.url);
|
||||||
this.uploadedImages = [];
|
const isVideo = this.videoFormats.includes(extension.toLowerCase());
|
||||||
this.uploadedVideos = [];
|
|
||||||
|
this.fileList.push({
|
||||||
|
...item,
|
||||||
|
status: 'uploading',
|
||||||
|
message: '上传中...',
|
||||||
|
isVideo: isVideo
|
||||||
|
});
|
||||||
|
|
||||||
|
this.uploadFile(item, isVideo);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
getFileExtension(filename) {
|
||||||
|
return filename.split('.').pop().split('?')[0];
|
||||||
|
},
|
||||||
|
|
||||||
|
handleDelete(event) {
|
||||||
|
const {
|
||||||
|
index
|
||||||
|
} = event;
|
||||||
|
const file = this.fileList[index];
|
||||||
|
|
||||||
|
if (file.isVideo) {
|
||||||
|
const videoIndex = this.uploadedVideos.indexOf(file.url);
|
||||||
|
if (videoIndex !== -1) this.uploadedVideos.splice(videoIndex, 1);
|
||||||
|
} else {
|
||||||
|
const imageIndex = this.uploadedImages.indexOf(file.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({
|
||||||
|
title: '请填写工单内容',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
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: '请选择工单类型',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.workOrderLocation) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请填写工作地点',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const submitData = {
|
||||||
|
title: this.workOrderContent,
|
||||||
|
concatName: this.concatName, // 新增联系人姓名
|
||||||
|
customerPhone: this.customerPhone, // 新增联系人电话
|
||||||
|
orderTypeId: this.workOrderCategoryID,
|
||||||
|
address: this.workOrderLocation,
|
||||||
|
images: this.uploadedImages,
|
||||||
|
videos: this.uploadedVideos,
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log('提交数据:', submitData);
|
||||||
|
|
||||||
|
// 调用API保存信息
|
||||||
|
const res = await post('/api/v1/app_auth/work-order', submitData);
|
||||||
|
|
||||||
|
uni.hideLoading();
|
||||||
|
|
||||||
|
if (res && res.success) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '提交成功',
|
||||||
|
icon: 'success',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
this.resetForm();
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/myTickets/index`,
|
url: `/pages/myTickets/index`,
|
||||||
});
|
});
|
||||||
},1000)
|
},1000)
|
||||||
|
} else {
|
||||||
} else {
|
uni.showToast({
|
||||||
uni.showToast({
|
title: res?.message || '提交失败',
|
||||||
title: res?.message || '提交失败',
|
icon: 'none'
|
||||||
icon: 'none'
|
});
|
||||||
});
|
}
|
||||||
}
|
},
|
||||||
},
|
|
||||||
|
resetForm() {
|
||||||
// 用户点击"确定"时触发
|
this.workOrderContent = '';
|
||||||
handleConfirm(e) {
|
this.concatName = '';
|
||||||
this.workOrderCategory = e.value[0].label;
|
this.customerPhone = '';
|
||||||
this.workOrderCategoryID = e.value[0].id;
|
this.workOrderCategoryID = '';
|
||||||
this.showSelect = false;
|
this.workOrderCategory = '';
|
||||||
},
|
this.workOrderLocation = '';
|
||||||
|
this.fileList = [];
|
||||||
// 用户点击"取消"时触发
|
this.uploadedImages = [];
|
||||||
handleCancel() {
|
this.uploadedVideos = [];
|
||||||
this.showSelect = false;
|
},
|
||||||
},
|
|
||||||
|
handleConfirm(e) {
|
||||||
//获取工单类型
|
this.workOrderCategory = e.value[0].label;
|
||||||
async getOrderList() {
|
this.workOrderCategoryID = e.value[0].id;
|
||||||
try {
|
this.showSelect = false;
|
||||||
const res = await get('/api/v1/apps/work-order-type');
|
},
|
||||||
if (res?.success) {
|
|
||||||
this.categoryList = [
|
handleCancel() {
|
||||||
[...res.data]
|
this.showSelect = false;
|
||||||
]
|
},
|
||||||
}
|
|
||||||
} catch (err) {
|
async getOrderList() {
|
||||||
console.error('获取工单类型失败:', err);
|
try {
|
||||||
uni.showToast({
|
const res = await get('/api/v1/apps/work-order-type');
|
||||||
title: '获取工单类型失败',
|
if (res?.success) {
|
||||||
icon: 'none'
|
this.categoryList = [
|
||||||
});
|
[...res.data]
|
||||||
}
|
]
|
||||||
},
|
}
|
||||||
}
|
} catch (err) {
|
||||||
};
|
console.error('获取工单类型失败:', err);
|
||||||
</script>
|
uni.showToast({
|
||||||
|
title: '获取工单类型失败',
|
||||||
<style lang="scss" scoped>
|
icon: 'none'
|
||||||
.container {
|
});
|
||||||
width: 100%;
|
}
|
||||||
height: 130vh;
|
},
|
||||||
opacity: 1;
|
}
|
||||||
background: rgba(210, 227, 255, 1);
|
};
|
||||||
position: relative;
|
</script>
|
||||||
|
|
||||||
.conent {
|
<style lang="scss" scoped>
|
||||||
width: 100%;
|
.container {
|
||||||
position: absolute;
|
width: 100%;
|
||||||
margin-top: 20rpx;
|
min-height: 100vh;
|
||||||
|
background: #f5f7fa;
|
||||||
.form-item {
|
padding-bottom: 120rpx;
|
||||||
margin-bottom: 20px;
|
|
||||||
height: 400rpx;
|
.content {
|
||||||
width: 95%;
|
padding: 20rpx;
|
||||||
margin: 0 auto;
|
|
||||||
margin-bottom: 20rpx;
|
.form-item {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 20rpx;
|
border-radius: 16rpx;
|
||||||
display: flex;
|
padding: 24rpx;
|
||||||
flex-direction: column;
|
margin-bottom: 24rpx;
|
||||||
position: relative;
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 30px;
|
font-weight: 500;
|
||||||
display: flex;
|
margin-bottom: 24rpx;
|
||||||
white-space: nowrap;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
|
||||||
.select-box {
|
.u-icon {
|
||||||
display: flex;
|
margin-right: 12rpx;
|
||||||
align-items: center;
|
}
|
||||||
margin-left: 30rpx;
|
}
|
||||||
color: #999;
|
|
||||||
}
|
.textarea {
|
||||||
|
width: 95%;
|
||||||
.voice-icon {
|
height: 180rpx;
|
||||||
position: absolute;
|
padding: 16rpx;
|
||||||
right: 30rpx;
|
background: #f8f8f8;
|
||||||
bottom: 20rpx;
|
border-radius: 8rpx;
|
||||||
}
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
.upload-area {
|
|
||||||
display: flex;
|
.voice-icon {
|
||||||
justify-content: center;
|
position: absolute;
|
||||||
align-items: center;
|
right: 40rpx;
|
||||||
height: 100px;
|
bottom: 40rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.note {
|
.select-box {
|
||||||
font-size: 20rpx;
|
margin-left: auto;
|
||||||
color: #999;
|
color: #666;
|
||||||
margin-top: 60rpx;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
font-size: 28rpx;
|
||||||
.submit-button {
|
|
||||||
text-align: center;
|
.u-icon {
|
||||||
margin-top: 20px;
|
margin-left: 8rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
.upload-area {
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
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 {
|
||||||
|
margin-top: 40rpx;
|
||||||
|
|
||||||
|
.u-button {
|
||||||
|
height: 88rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user