<!-- 咨询与投诉 -->
<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>
 
             
             
             
			 
                                        
                                     
                                                                                                                                                                                                                                                             
                                                                                                                                                                                