@@ -1,337 +1,345 @@
< template >
< view class = "add-repair-container" >
<!-- 可滚动内容区 -- >
< view class = "add-repair-scroll-content" >
<!-- 地址选择 -- >
<!-- < view class = "add-repair-section" >
< view class = "add-repair-detail" >
< view class = "add-repair-detail1" > 详细地址 < / view >
< input type = "text" v-model = "repairInfo.location" placeholder="请输入地址" class="add-repair-detail2" / >
< / view >
< / view > -- >
<!-- 报事报修类型 -- >
< view class = "add-repair-section" >
< view class = "add-repair-label" > 详细地址 < / view >
< input type = "text" v-model = "repairInfo.location" placeholder="请输入地址" class="add-repair-detail2" / >
< view class = "add-repair-label" > 报事报修 < / view >
< view class = "repair-type" @click ="chooseType" >
< text class = "text-type" > { { selectedType } } < / text >
< image class = "right-arrow" src = "/static/ic_right_arrow_g.png" / >
< / view >
< view class = "add-repair-label" > 问题详情 < text class = "add-repair-optional" > ( 非必填 ) < / text > < / view >
< textarea v-model = "repairInfo.remark" class="add-repair-detail-textarea" placeholder="如果以上报事不能解决您的问题,可以在这里填写说明" / >
< / view >
<!-- 上传照片 -- >
< view class = "add-repair-section" >
< view class = "add-repair-label" > 上传照片 < text class = "add-repair-op tional " > ( 非必填 , 最多三张 ) < / text > < / view >
< u-upload
:fileList = "selectedImages"
@ on -list -change = " onListChange "
@delete ="deletePic"
name = "upload"
multiple
maxCount = "3"
width = "180"
height = "180"
:autoUpload = "false"
> < / u-upload >
< / view >
<!-- 提交按钮 -- >
< button class = "add-repair-submit-btn" @click ="submit" > 提交 < / button >
< / view >
< / view >
< / template >
< script >
// 导入MediaSelector和MediaType
import MediaSelector , { MediaType } from '@/utils/mediaSelector' ;
import {
uploadFiles
} from '@/common/upload.js ';
import toast from '../../../../uview-ui/libs/function/toast ';
export default {
data ( ) {
return {
repairInfo : {
location : '' ,
type : '1942879389453230082' ,
orderImgUrl : '' ,
remark : ''
} ,
repairTypes : [ ] ,
selectedType : '' ,
selectedImages : [ ] // 存储已选图片
}
} ,
onLoad ( ) {
this . getOrderType ( )
} ,
methods : {
selectType ( item ) {
this . selectedType = item ;
} ,
async getOrderType ( ) {
let params = { parentId : '1952989217332658178' }
let res = await this . $u . api . getRepairTypes ( par ams ) ;
if ( res . code == '200' ) {
this . repairTypes = res . data
this . repairInfo . type = res . data [ 0 ] . id ;
this . selectType ( res . data [ 0 ] . orderTypeName )
}
} ,
// 删除图片
deletePic ( event ) {
this . selectedIma ges . splice ( event . index , 1 ) ;
} ,
// 图片列表变化处理
onListChange ( list ) {
this . selectedImages = list ;
} ,
async submit ( ) {
if ( ! this . repairInfo . location ) {
toast ( '请先填写地址' )
return
}
if ( this . selectedImages . length <= 0 ) {
this . realSubmit ( )
return
}
console . log ( "t1" , this . selectedImages )
const images = this . selectedImages
. map ( item => item ? . path ? . replace ( 'file://' , '' ) || item ? . url || null )
. filter ( path => path !== null ) ;
if ( images . length === 0 ) {
this . realSubmit ( ) ;
return ;
}
const result = await uploadFiles ( {
files : images ,
url : this . vuex _config . baseUrl + '/resource/oss/upload' ,
name : 'file' ,
vm : this // 关键:用于注入 token 等
} ) ;
// 遍历result获取data.url加上,分割
const urls = result . map ( item => item . data ? . url || '' ) . filter ( url => url !== '' ) ;
this . repairInfo . orderImgUrl = urls . join ( ',' ) ;
this . realSubmit ( )
} ,
async realSubmit ( ) {
let res = await this . $u . api . addOrder2 ( this . repairInfo ) ;
if ( res . code == '200' ) {
// 关闭页面前发送事件通知前页面刷新
uni . $emit ( 'refreshData' , '' ) ;
// 返回上一页
uni . navigateBack ( ) ;
}
} ,
// 添加chooseType方法实现
chooseType ( ) {
uni . showActionSheet ( {
itemList : this . repairTypes . map ( item => item . orderTypeName ) ,
success : ( res ) => {
this . selectedType = this . repairTypes [ res . tapIndex ] . orderTypeName ;
this . repairInfo . type = this . repairTypes [ res . tapIndex ] . id ;
} ,
fail : ( err ) => {
console . log ( '用户取消选择或出错' , err ) ;
}
} ) ;
} ,
goRepaired ( ) {
uni . navigateTo ( { url : '/pages/sys/user/myRepair/repaired' } ) ;
} ,
goSelectLocation ( ) {
uni . navigateTo ( { url : '/pages/sys/user/myRepair/selectLocation' } ) ;
}
}
}
< / script >
< style scoped >
. add - repair - container {
height : 100 vh ;
background : # f7f7f7 ;
display : flex ;
flex - direction : column ;
}
. add - repair - scroll - content {
flex : 1 ;
overflow - y: auto ;
padding - bottom : 40 rpx ;
}
. add - repair - section {
background : # fff ;
border - radius : 12 rpx ;
margin : 22 rpx 30 rpx 0 30 rpx ;
padding : 24 rpx 46 rpx 24 rpx 44 rpx ;
}
. repair - type {
width : 100 % ;
height : 98 rpx ;
background : # F7F8FA ;
border - radius : 10 rpx ;
padding : 0 20 rpx ;
display : flex ;
align - items : center ;
justify - content : space - between ;
margin - bottom : 40 rpx ;
box - sizing : border - box ;
}
. text - type {
font - size : 24 rpx ;
color : # 808080 ;
}
. right - arrow {
width : 11 rpx ;
height : 21 rpx ;
}
. add - repair - address - btn {
width : 100 % ;
height : 48 rpx ;
background : # fff ;
border : 2 rpx solid # 2186 FF ;
border - radius : 8 rpx ;
margin - bottom : 30 rpx ;
padding - left : 18 rpx ;
display : flex ;
align - items : center ;
justify - content : center ;
}
. add - repai r- address - text {
font - size : 24 rpx ;
color : # 007 CFF ;
margin - right : 15 rp x;
}
. add - repair - address - img {
width : 11 rpx ;
height : 21 rpx ;
}
. add - repair - detail {
display : flex ;
flex - direction : row ;
align - items : center ;
}
. add - repair - detail1 {
font - size : 26 rpx ;
font - weight : bold ;
color : # 000 ;
}
. add - repair - detail2 {
width : 100 % ;
height : 98 rpx ;
background - color : # F7F8FA ;
border - radius : 10 rpx ;
font - size : 24 rpx ;
color : # 676767 ;
padding : 0 20 rpx ;
margin - bottom : 40 rpx ;
box - sizing : border - box ;
}
. add - repair - label {
font - size : 32 rpx ;
color : # 000000 ;
font - weight : 500 ;
margin - bottom : 41 rpx ;
}
. add - repair - label2 {
font - size : 32 rpx ;
color : # 000000 ;
font - weight : 500 ;
margin - bottom : 25 rpx ;
margin - top : 25 rpx ;
}
. add - repair - type - list {
display : fle x;
flex - wrap : wrap ;
gap : 28 rpx 21 rpx ;
}
. add - repair - type - btn {
flex : 0 0 calc ( ( 100 % - 42 rpx ) / 3 ) ;
box - sizing : border - box ;
height : 73 rpx ;
background : # F2F7FF ;
color : # 2186 FF ;
font - size : 26 rpx ;
border - radius : 8 rpx ;
display : flex ;
align - items : center ;
justify - content : center ;
border : none ;
}
. add - repair - type - btn . selected {
background : # 2186 FF ;
color : # fff ;
border : 2 rpx solid # 2186 FF ;
}
. add - repair - type - btn . dashed {
border : 2 rpx dashed # BDBDBD ;
background : # fff ;
color : # 2186 FF ;
}
. add - repair - optional {
color : # 888 ;
font - size : 24 rpx ;
font - weight : 400 ;
}
. add - repair - detail - textarea {
width : 100 % ;
min - height : 120 rpx ;
background : # F7F8FA ;
border - radius : 10 rpx ;
font - size : 28 rpx ;
color : # 888 ;
padding : 18 rpx ;
margin - top : 18 rpx ;
box - sizing : border - box ;
}
. add - repair - submit - btn {
width : 6 0vw ;
height : 73 rpx ;
background : linear - gradient ( 90 deg , # 005 DE9 0 % , # 4 B9BFF 100 % ) ;
color : # fff ;
font - size : 32 rpx ;
border : none ;
border - radius : 40 rpx ;
margin : 100 rpx auto 0 auto ;
display : block ;
font - weight : bold ;
box - shadow : 0 8 rpx 24 rpx rgba ( 0 , 0 , 0 , 0.18 ) ;
}
< template >
< view class = "add-repair-container" >
<!-- 可滚动内容区 -- >
< view class = "add-repair-scroll-content" >
<!-- 地址选择 -- >
<!-- < view class = "add-repair-section" >
< view class = "add-repair-detail" >
< view class = "add-repair-detail1" > 详细地址 < / view >
< input type = "text" v-model = "repairInfo.location" placeholder="请输入地址" class="add-repair-detail2" / >
< / view >
< / view > -- >
<!-- 报事报修类型 -- >
< view class = "add-repair-section" >
< view class = "add-repair-label" > 详细地址 < / view >
< input type = "text" v-model = "repairInfo.location" placeholder="请输入地址" class="add-repair-detail2" / >
< view class = "add-repair-label" > 报事报修 < / view >
< view class = "repair-type" @click ="chooseType" >
< text class = "text-type" > { { selectedType } } < / text >
< image class = "right-arrow" src = "/static/ic_right_arrow_g.png" / >
< / view >
< view class = "add-repair-label" > 问题详情 < text class = "add-repair-optional" > ( 非必填 ) < / text > < / view >
< textarea v-model = "repairInfo.remark" class="add-repair-detail-textarea"
placeholder = "如果以上报事不能解决您的问题,可以在这里填写说明" / >
< / view >
<!-- 上传照片 -- >
< view class = "add-repair-sec tion" >
< view class = "add-repair-label" > 上传照片 < text class = "add-repair-optional" > ( 非必填 , 最多三张 ) < / text > < / view >
< u-upload :fileList = "selectedImages" @ on -list -change = " onListChange " @delete ="deletePic" name = "upload"
multiple maxCount = "3" width = "180" height = "180" :autoUpload = "false" > < / u-upload >
< / view >
<!-- 提交按钮 -- >
< button class = "add-repair-submit-btn" @click ="submit" > 提交 < / button >
< / view >
< / view >
< / template >
< script >
// 导入MediaSelector和MediaType
import MediaSelector , {
MediaType
} from '@/utils/mediaSelector' ;
import {
uploadFiles
} from '@/common/upload.js' ;
import toast from '../../../../uview-ui/libs/function/toast' ;
export default {
data ( ) {
return {
repairInfo : {
location : ' ' ,
type : '1942879389453230082 ' ,
orderImgUrl : '' ,
remark : ''
} ,
repairTypes : [ ] ,
selectedType : '' ,
selectedImages : [ ] // 存储已选图片
}
} ,
onLoad ( ) {
this . getOrderType ( )
} ,
methods : {
selectType ( item ) {
this . selectedType = item ;
} ,
async getOrderType ( ) {
let params = {
parentId : '1952989217332658178'
}
let res = await this . $u . api . getRepairTypes ( params ) ;
if ( res . code == '200' ) {
this . repairTypes = res . data
this . repairInfo . type = res . data [ 0 ] . id ;
this . selectType ( res . data [ 0 ] . orderTypeN ame )
}
} ,
// 删除图片
deletePic ( event ) {
this . selectedImages . splice ( event . index , 1 ) ;
} ,
// 图片列表变化处理
onListChan ge( list ) {
this . selectedImages = list ;
} ,
async submit ( ) {
if ( ! this . repairInfo . location ) {
toast ( '请先填写地址' )
return
}
if ( this . selectedImages . length <= 0 ) {
this . realSubmit ( )
return
}
console . log ( "t1" , this . selectedImages )
const images = this . selectedImages
. map ( item => item ? . path ? . replace ( 'file://' , '' ) || item ? . url || null )
. filter ( path => path !== null ) ;
if ( images . length === 0 ) {
this . realSubmit ( ) ;
return ;
}
const result = await uploadFiles ( {
files : images ,
url : this . vuex _config . baseUrl + '/resource/oss/upload' ,
name : 'file' ,
vm : this // 关键:用于注入 token 等
} ) ;
const allSuccess = result . every ( item => item . code == 200 ) ;
if ( ! allSuccess ) {
uni . showToast ( {
title : '上传失败' ,
icon : 'none'
} ) ;
return ;
}
// 遍历result获取data.url加上,分割
const urls = result . map ( item => item . data ? . ossId || '' ) . filter ( ossId => ossId !== '' ) ;
this . repairInfo . orderImgUrl = urls . join ( ',' ) ;
this . realSubmit ( )
} ,
async realSubmit ( ) {
let res = await this . $u . api . addOrder2 ( this . repairInfo ) ;
if ( res . code == '200' ) {
// 关闭页面前发送事件通知前页面刷新
uni . $emit ( 'refreshData' , '' ) ;
// 返回上一页
uni . navigateBack ( ) ;
}
} ,
// 添加chooseType方法实现
chooseType ( ) {
uni . showActionSheet ( {
itemList : this . repairTypes . map ( item => item . orderTypeName ) ,
success : ( res ) => {
this . selectedType = this . repairTypes [ res . tapIndex ] . orderTypeName ;
this . repairInfo . type = this . repairTypes [ res . tapIndex ] . id ;
} ,
fail : ( err ) => {
console . log ( '用户取消选择或出错' , err ) ;
}
} ) ;
} ,
goRepaired ( ) {
uni . navigateTo ( {
url : '/pages/sys/user/myRepair/repaired'
} ) ;
} ,
goSelectLocation ( ) {
uni . navigateTo ( {
url : '/pages/sys/user/myRepair/selectLocation'
} ) ;
}
}
}
< / script >
< style scoped >
. add - repair - container {
height : 100 vh ;
background : # f7f7f7 ;
displa y: flex ;
flex - direction : column ;
}
. add - repair - scroll - content {
flex : 1 ;
overflow - y : auto ;
padding - bottom : 40 rpx ;
}
. add - repair- section {
background : # fff ;
border - radius : 12 rpx ;
margin : 22 rpx 30 rpx 0 30 rpx ;
padding : 24 rpx 46 rpx 24 rpx 44 rpx ;
}
. repair - type {
width : 100 % ;
height : 98 rpx ;
background : # F7F8FA ;
border - radius : 10 rpx ;
padding : 0 20 rpx ;
display : flex ;
align - items : center ;
justify - content : space - between ;
margin - bottom : 40 rpx ;
box - sizing : border - box ;
}
. text - type {
font - size : 24 rpx ;
color : # 808080 ;
}
. right - arrow {
width : 11 rpx ;
height : 21 rpx ;
}
. add - repair - address - btn {
width : 100 % ;
height : 48 rpx ;
background : # fff ;
border : 2 rpx solid # 2186 FF ;
borde r - r adius : 8 rpx ;
margin - bottom : 30 rpx ;
padding - left : 18 rpx ;
display : fle x;
align - items : center ;
justify - content : center ;
}
. add - repair - address - text {
font - size : 24 rpx ;
color : # 007 CFF ;
margin - right : 15 rpx ;
}
. add - repair - address - img {
width : 11 rpx ;
height : 21 rpx ;
}
. add - repair - detail {
display : flex ;
flex - direction : row ;
align - items : center ;
}
. add - repair - detail1 {
font - size : 26 rpx ;
font - weight : bold ;
color : # 000 ;
}
. add - repair - detail2 {
width : 100 % ;
height : 98 rpx ;
background - color : # F7F8FA ;
border - radius : 10 rpx ;
font - size : 24 rpx ;
color : # 676767 ;
padding : 0 20 rpx ;
margin - bottom : 40 rpx ;
box - sizing : border - box ;
}
. add - repair - label {
font - size : 32 rpx ;
color : # 000000 ;
font - weight : 500 ;
margin - bottom : 41 rpx ;
}
. add - repair - label2 {
font - size : 32 rp x;
color : # 000000 ;
font - weight : 500 ;
margin - bottom : 25 rpx ;
margin - top : 25 rpx ;
}
. add - repair - type - list {
display : flex ;
flex - wrap : wrap ;
gap : 28 rpx 21 rpx ;
}
. add - repair - type - btn {
flex : 0 0 calc ( ( 100 % - 42 rpx ) / 3 ) ;
box - sizing : border - box ;
height : 73 rpx ;
background : # F2F7FF ;
color : # 2186 FF ;
font - size : 26 rpx ;
border - radius : 8 rpx ;
display : flex ;
align - items : center ;
justify - content : center ;
border : none ;
}
. add - repair - type - btn . selected {
background : # 2186 FF ;
color : # fff ;
border : 2 rpx solid # 2186 FF ;
}
. add - repair - type - btn . dashed {
border : 2 rpx dashed # BDBDBD ;
background : # fff ;
color : # 2186 FF ;
}
. add - repair - optional {
color : # 888 ;
font - size : 24 rpx ;
font - weight : 400 ;
}
. add - repair - detail - textarea {
width : 100 % ;
min - height : 120 rpx ;
background : # F7F8FA ;
border - radius : 1 0rpx ;
font - size : 28 rpx ;
color : # 888 ;
padding : 18 rpx ;
margin - top : 18 rpx ;
box - sizing : border - box ;
}
. add - repair - submit - btn {
width : 60 vw ;
height : 73 rpx ;
background : linear - gradient ( 90 deg , # 005 DE9 0 % , # 4 B9BFF 100 % ) ;
color : # fff ;
font - size : 32 rpx ;
border : none ;
border - radius : 40 rpx ;
margin : 100 rpx auto 0 auto ;
display : block ;
font - weight : bold ;
box - shadow : 0 8 rpx 24 rpx rgba ( 0 , 0 , 0 , 0.18 ) ;
}
< / style >