|
|
<template>
|
|
|
|
|
|
<view class="mybaoxiu-container">
|
|
|
<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="我的报修" :autoBack="true">
|
|
|
|
|
|
</u-navbar>
|
|
|
<uni-forms :model="mybaoxiuForm" ref="mybaoxiuForm" :rules="rules" :errShowType="errorType">
|
|
|
<uni-forms-item name="question">
|
|
|
<view class="top-search">
|
|
|
<view class="top-search-prefix">报修原因</view>
|
|
|
<u-input ref="input" :focus="isfocus" clearable v-model="mybaoxiuForm.question" placeholder="请输入报修原因" fontSize="13px" @blur="onblur"></u-input>
|
|
|
</view>
|
|
|
</uni-forms-item>
|
|
|
<uni-forms-item>
|
|
|
<view class="upload-img">
|
|
|
<view class="upload-img-title">上传图片</view>
|
|
|
<u-line color="#E6E6E6"></u-line>
|
|
|
<view class="upload-img-box"><u-upload :fileList="fileList" auto-upload @delete="deletePic" @afterRead="getImage"></u-upload></view>
|
|
|
</view>
|
|
|
</uni-forms-item>
|
|
|
<!-- <uni-forms-item>
|
|
|
<view class="dispose-person">
|
|
|
<view class="dispose-item" @click="openPicker">
|
|
|
<view class="dispose-item-left">处理人</view>
|
|
|
<view class="dispose-item-right">
|
|
|
<view style="margin-right: 20rpx">请选择处理人</view>
|
|
|
<u-icon name="arrow-right"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-forms-item> -->
|
|
|
</uni-forms>
|
|
|
<view class="submit" @click="addFrom()">提交报修</view>
|
|
|
<u-picker :show="personPopupShow" :columns="columns" @confirm="personPopupConfirm" @cancel="personPopupClose"></u-picker>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import config from '@/config.js';
|
|
|
import { getToken } from '@/utils/auth.js';
|
|
|
import { addFacilitiesRepair } from '@/api/indexpage/implement/index.js';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
errorType: 'toast',
|
|
|
|
|
|
mybaoxiuForm: { question: '', pic: '' },
|
|
|
fileList: [],
|
|
|
ssid: '',
|
|
|
columns: [],
|
|
|
isfocus: false,
|
|
|
rules: {
|
|
|
// 对name字段进行必填验证
|
|
|
question: {
|
|
|
rules: [
|
|
|
{
|
|
|
required: true,
|
|
|
errorMessage: '请输入报修原因',
|
|
|
trigger: ['blur', 'change']
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
personPopupShow: false
|
|
|
};
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
this.ssid = options.ssId;
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
onblur() {
|
|
|
this.isfocus = false;
|
|
|
},
|
|
|
addFocus() {
|
|
|
this.isfocus = true;
|
|
|
},
|
|
|
personPopupConfirm() {
|
|
|
this.personPopupShow = false;
|
|
|
},
|
|
|
openPicker() {
|
|
|
this.personPopupShow = true;
|
|
|
},
|
|
|
personPopupClose() {
|
|
|
this.personPopupShow = false;
|
|
|
},
|
|
|
//确定提交
|
|
|
addFrom() {
|
|
|
this.$refs.mybaoxiuForm
|
|
|
.validate()
|
|
|
.then(res => {
|
|
|
//把图片数组对象中的id，转成逗号隔开的字符串,赋值给from表单
|
|
|
this.mybaoxiuForm.pic = this.fileList
|
|
|
.map(item => {
|
|
|
return item.id;
|
|
|
})
|
|
|
.join(',');
|
|
|
let params = {
|
|
|
facilitiesId: this.ssid,
|
|
|
...this.mybaoxiuForm
|
|
|
};
|
|
|
addFacilitiesRepair(params).then(res => {
|
|
|
this.mybaoxiuForm = { question: '', pic: '' };
|
|
|
this.fileList = [];
|
|
|
uni.navigateBack({
|
|
|
delta: 1
|
|
|
});
|
|
|
this.$modal.msg('提交成功');
|
|
|
});
|
|
|
})
|
|
|
.catch(err => {
|
|
|
this.$modal.msg(err);
|
|
|
});
|
|
|
},
|
|
|
// 删除图片
|
|
|
deletePic(event) {
|
|
|
//删除本地
|
|
|
this[`fileList${event.name}`].splice(event.index, 1);
|
|
|
},
|
|
|
// 图片上传结果
|
|
|
async getImage(event) {
|
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
|
let lists = [].concat(event.file);
|
|
|
let fileListLen = this[`fileList${event.name}`].length;
|
|
|
lists.map(item => {
|
|
|
this[`fileList${event.name}`].push({
|
|
|
...item,
|
|
|
status: 'uploading',
|
|
|
message: '上传中'
|
|
|
});
|
|
|
});
|
|
|
for (let i = 0; i < lists.length; i++) {
|
|
|
const result = await this.uploadFilePromise(lists[i].url);
|
|
|
let item = this[`fileList${event.name}`][fileListLen];
|
|
|
this[`fileList${event.name}`].splice(
|
|
|
fileListLen,
|
|
|
1,
|
|
|
Object.assign(item, {
|
|
|
status: 'success',
|
|
|
message: '',
|
|
|
id: result
|
|
|
})
|
|
|
);
|
|
|
fileListLen++;
|
|
|
}
|
|
|
},
|
|
|
uploadFilePromise(url) {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
let a = uni.uploadFile({
|
|
|
url: `${config.baseUrlImg}/filemanage/upload1`, // 仅为示例，非真实的接口地址
|
|
|
filePath: url,
|
|
|
name: 'file',
|
|
|
header: {
|
|
|
Authorization: 'Bearer ' + getToken()
|
|
|
},
|
|
|
formData: {
|
|
|
isFullDir: false,
|
|
|
classify: '1',
|
|
|
dir: '/inspectionPic'
|
|
|
},
|
|
|
success: res => {
|
|
|
let result = JSON.parse(res.data);
|
|
|
console.log('result', result);
|
|
|
setTimeout(() => {
|
|
|
resolve(result.data.id);
|
|
|
}, 1000);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.mybaoxiu-container {
|
|
|
// #ifndef APP-PLUS
|
|
|
height: calc(100vh - 44px);
|
|
|
// #endif
|
|
|
// #ifdef APP-PLUS
|
|
|
height: calc(100vh);
|
|
|
// #endif
|
|
|
background-color: #fff;
|
|
|
overflow-y: auto;
|
|
|
font-family: Noto Sans S Chinese;
|
|
|
/deep/ .uni-forms-item {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
.top-search {
|
|
|
height: 134rpx;
|
|
|
box-sizing: border-box;
|
|
|
padding: 20rpx 28rpx 28rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
/deep/ .input-placeholder {
|
|
|
text-align: right !important;
|
|
|
color: red;
|
|
|
}
|
|
|
::v-deep .u-input {
|
|
|
height: 100%;
|
|
|
border-radius: 0 9px 9px 0;
|
|
|
background-color: #f8f9fb;
|
|
|
border: none;
|
|
|
}
|
|
|
/deep/ .uni-input-placeholder {
|
|
|
text-align: right;
|
|
|
}
|
|
|
.top-search-prefix {
|
|
|
font-weight: 400;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
width: 140rpx;
|
|
|
background-color: #f8f9fb;
|
|
|
align-items: center;
|
|
|
border-radius: 9px 0 0 9px;
|
|
|
font-size: 13px;
|
|
|
color: #666666;
|
|
|
}
|
|
|
.top-search-suffix {
|
|
|
width: 100px;
|
|
|
font-weight: 400;
|
|
|
font-size: 13px;
|
|
|
color: #999999;
|
|
|
line-height: 19px;
|
|
|
}
|
|
|
}
|
|
|
.upload-img {
|
|
|
width: calc(100% - 56rpx);
|
|
|
margin: 0 auto;
|
|
|
box-sizing: border-box;
|
|
|
padding: 28rpx 28rpx 42rpx 28rpx;
|
|
|
background-color: #f8f9fb;
|
|
|
border-radius: 18rpx;
|
|
|
.upload-img-title {
|
|
|
width: 100%;
|
|
|
font-weight: 400;
|
|
|
font-size: 13px;
|
|
|
color: #666666;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
.upload-img-box {
|
|
|
margin-top: 34rpx;
|
|
|
}
|
|
|
}
|
|
|
.dispose-person {
|
|
|
height: 134rpx;
|
|
|
box-sizing: border-box;
|
|
|
padding: 30rpx 28rpx 28rpx;
|
|
|
.dispose-item {
|
|
|
width: 100%;
|
|
|
border-radius: 18rpx;
|
|
|
height: 42px;
|
|
|
background: #f8f9fb;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
box-sizing: border-box;
|
|
|
padding: 0 26rpx;
|
|
|
.dispose-item-left {
|
|
|
font-weight: 400;
|
|
|
font-size: 13px;
|
|
|
color: #666666;
|
|
|
}
|
|
|
.dispose-item-right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-weight: 400;
|
|
|
font-size: 13px;
|
|
|
color: #999999;
|
|
|
line-height: 19px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.submit {
|
|
|
height: 94rpx;
|
|
|
background: linear-gradient(0deg, #2a86ff, #8fbcff);
|
|
|
line-height: 94rpx;
|
|
|
width: calc(100% - 140rpx);
|
|
|
text-align: center;
|
|
|
margin: 0 auto;
|
|
|
margin-top: 200rpx;
|
|
|
border-radius: 50rpx;
|
|
|
color: #fff;
|
|
|
font-size: 30rpx;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
