<!-- 咨询与投诉 -->
<template>
<scroll-view scroll-y="true" class="page-scroll" show-scrollbar="false">
<view class="form">
<input v-model="title" class="forminput" type="text" placeholder="*请输入标题" placeholder-class="input-placeholder" @confirm="hideKeyBoard">
<!-- <view class="textarea-box formtextarea-box"> -->
<textarea class="formtextarea" v-model="word" maxlength="100" placeholder="*问题描述" placeholder-class="input-placeholder"/>
<!-- <text class="textarea-count formtextarea-count">{{word.length}} / 100</text> -->
<!-- </view> -->
<view class="form upload">
<view class="uploadtitle">
<text class="uploadtext">上传照片</text>
<text class="uploadcomment">(选填,最多上传{{maxImgCount}}张)</text>
</view>
<view class="uploadimgs">
<view class="uploadbox uploadbox-img" v-for="(item, index) in imgs" :key="index">
<image class="uploadimg" :src="item" mode="" @click="previewImg(index)"></image>
<text class="uploaddelete" @click="deleteImg(index)">删除</text>
</view>
<view v-if="imgs.length < maxImgCount" class="uploadbox" @click="chooseImg">
<image class="uploadicon" src="/static/images/icon_upload.png" mode=""></image>
</view>
</view>
</view>
<button class="btn-commit" :class="{'btn-disabled': btnDisabled}" type="default" :disabled="btnDisabled || btnLocked" :loading="btnLoading" @click="commit">
<text class="btn-committext" :class="{'btn-disabledtext': btnDisabled}">提交</text>
</button>
</view>
</scroll-view>
</template>
<script>
import loginApi from '@/common/api/login.js'
import {toast, loginToken} from '@/common/helper.js'
import UploadImg from '@/common/UploadImg.js'
import api from '@/common/api/workOrder.js'
export default {
data() {
return {
imgs: [],
title: '',
word: '',
maxImgCount: 3, // 最大上传照片数量
btnLoading: false,
btnLocked: false,
uploadImg: null,
};
},
computed: {
btnDisabled() {
return !this.title || !this.word;
}
},
methods: {
hideKeyBoard() {
uni.hideKeyboard();
},
// 选择照片
chooseImg() {
this.uploadImg.chooseImg();
},
// 预览照片
previewImg(index) {
// uni.previewImage({
// current: index,
// urls: this.imgs,
// indicator: 'number',
// loop: true,
// })
this.uploadImg.previewImg(index);
},
// 删除照片
deleteImg(index) {
this.uploadImg.deleteImg(index);
},
commit() {
if (this.btnDisabled || this.btnLocked || this.btnLoading) return false;
if (this.imgs.length > 0) {
this.upload();
return false;
}
this.btnLocked = true;
this.btnLoading = true;
api.setCounselMsg({
title: this.title.trim(),
word: this.word.trim()
}).then(res => {
this.btnLoading = false;
toast('提交成功', () => {
uni.navigateBack();
});
}).catch(err => {
setTimeout(() => {
this.btnLoading = false;
this.btnLocked = false;
}, 800);
});
},
upload() {
let url = api.setCounselMsgUrl();
let formData = {
title: this.title.trim(),
word: this.word.trim()
};
this.uploadImg.upload({
url,
formData
});
},
},
onLoad() {
this.uploadImg = new UploadImg(this.maxImgCount, this.imgs);
}
}
</script>
<style lang="less">
@import '../../../common/common.less';
.page-scroll {
flex: 1;
background-color: #FFFFFF;
}
.form {
padding-top: 40rpx;
.column-center();
justify-content: flex-start;
.border(yellowgreen);
&__input {
width: 630rpx;
height: 90rpx;
.font-primary();
.border-one(bottom);
.border(red);
}
&__textarea {
width: 630rpx;
height: 200rpx;
.font-primary();
.border(green);
&-box {
width: 630rpx;
height: 240rpx;
margin-top: 30rpx;
padding: 20rpx 0;
background-color: #FFFFFF;
// .border(blue);
}
&-count {
background-color: #FFFFFF;
}
}
}
.upload {
margin-top: 40rpx;
width: 750rpx;
align-items: flex-start;
padding: 0 60rpx;
.upload();
}
.btn-commit {
margin-top: 80rpx;
.btn-width(630rpx);
}
// .upload {
// margin-top: 40rpx;
// width: 750rpx;
// align-items: flex-start;
// padding: 0 60rpx;
// .border(red);
// &__title {
// .row-center();
// justify-content: flex-start;
// }
// &__text {
// color: @color-secondary;
// font-size: 30rpx;
// }
// &__comment {
// color: @color-light-grey;
// font-size: 24rpx;
// }
// &__box {
// position: relative;
// margin-top: 20rpx;
// width: 152rpx;
// height: 152rpx;
// .border(@color-border, 2rpx);
// .row-center();
// margin-right:15rpx;
// }
// &__box-img {
// position: relative;
// width: 152rpx;
// height: 152rpx;
// border-width: 0;
// .row-center();
// }
// &__imgs {
// .row-center();
// }
// &__img {
// position: absolute;
// top: 0;
// right: 0;
// left: 0;
// bottom: 0;
// }
// &__delete {
// position: absolute;
// top: 6rpx;
// right: 6rpx;
// width: 60rpx;
// height: 28rpx;
// background-color: rgba(0, 0, 0, 0.5);
// border-radius: 16rpx;
// font-size: 18rpx;
// color: #FFFFFF;
// line-height: 28rpx;
// text-align: center;
// }
// &__icon {
// width: 40rpx;
// height: 40rpx;
// }
// &__remark {
// margin-top: 30rpx;
// width: 650rpx;
// height: 160rpx;
// background-color: #F4F4F4;
// padding: 10rpx;
// font-size: 30rpx;
// border-radius: 5rpx;
// }
// }
</style>