zx_flk_app/pages/feedback/index.vue

<template>
    <view class="container">
        <text class="title">问题类型</text>
        <view class="title-wrapper">
            <view v-for="(item, index) in typeList" @tap="tapType(item)" :key="index"
                :class="item.type_id == typeId ? 'text-wrapper text-wrapper-i' : 'text-wrapper text-wrapper-s'"
               >{{ item.type_name }}</view>
        </view>
        <view style="margin: 64rpx 0;">            
            <view class="title">问题描述</view>
            <view class="text-description-input">
                <textarea :enableNative="false" @input="inputContent" :value="content"
                    placeholder-class="description-placeholder" placeholder="请详细说明，以便我们解决问题，最多可填写300字。"
                    maxlength="300"></textarea>
            </view>
        </view>
        <view>
            <view class="title-img">
                <view class="title-img-text">问题图片</view>
                <view class="img-text">{{ imgList.length }} / 3</view>
            </view>

            <view class="upload-img-row">
                <view class="upload-img-view" v-for="(item, index) in imgList" :key="index">
                    <img @tap="bindChangeImg" :data-index="index" class="upload-img" :src="item" alt="">
                </view>
                <view class="upload-img-view" v-if="imgList.length < 3">
                    <img @tap="bindUpImg" class="upload-img" src="https://qiniu.bms16.com/Fv3KFmim5gle_kWR9g1Mym56lJpC"
                        alt="">
                </view>
            </view>

        </view>
        <view class="submit-btn-view">
            <view v-if="typeId != '' && imgList.length != 0 && content != ''" class="submit" @tap="submitFeedback">提交
            </view>
            <view v-else class="submit-btn">提交</view>
        </view>
    </view>
</template>

<script>
const http = require('../../common/http.js');
const config = require('../../common/config.js');
const common = require('../../common/common.js');
export default {
    data() {
        return {
            typeList: [
                { type_id: 1, type_name: '车辆' },
                { type_id: 2, type_name: '电池' },
                { type_id: 3, type_name: '电柜' },
                { type_id: 4, type_name: '应用操作' },
                { type_id: 5, type_name: '其他' },
            ],
            typeId: '',
            content: '',
            imgList: [],
            isDiabled: false,
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // this.loadTypeList()
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },
    methods: {
        loadTypeList() {
            http.postApi(config.API_DAYHIRE_REPORT_REPORT_TYPE, {}, (resp) => {
                if (resp.data.code === 200) {
                    this.setData({
                        typeList: resp.data.data.list
                    });
                } else {
                    common.simpleToast(resp.data.msg)
                }
            })
        },

        tapType({ type_id }) {
            this.setData({
                typeId: type_id
            })
        },

        inputContent(e) {
            const content_text = e.detail.value
            if (content_text.length >= 300) {
                common.simpleToast('最多输入300字');
            } else {
                this.setData({
                    content: content_text
                })
            }
        },

        bindUpImg: function () {
            const that = this;
            let _imgList = this.imgList
            common.upLoadImgQiNiu(function (imgUrl) {
                _imgList.push(imgUrl)
                that.setData({
                    imgList: _imgList
                });
            });
        },

        bindChangeImg(e) {
            const that = this;
            const index = e.currentTarget.dataset.index
            let _imgList1 = this.imgList
            common.upLoadImgQiNiu(function (imgUrl) {
                _imgList1.splice(index, 1, imgUrl)
                that.setData({
                    imgList: _imgList1
                });
            });
        },

        submitFeedback() {
            const imgs = this.imgList.join(',')
            const pData = {
                content: this.content,
                imgs: imgs,
                type_id: this.typeId
            }
            const that = this
            http.postApi(config.API_DAYHIRE_REPORT_REPORT, pData, (resp) => {
                if (resp.data.code === 200) {
                    // that.setData({
                    // 	isDiabled:true
                    // })
                    common.simpleToast('上传成功')
                    setTimeout(() => {
                        wx.navigateBack({
                            delta: 1 // 返回上一级页面
                        })
                    }, 1000)
                } else {
                    common.simpleToast(resp.data.msg)
                }
            })
        }
    }
};
</script>

<style scoped lang="scss">
.container {
    padding: 48rpx 32rpx 0;
    background-color: white;
    height: 100vh;
}

.title {
    font-size: 40rpx;
    color: #2A3A5A;
    font-weight: 600;
    margin-bottom: 40rpx;
}

.title-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-right: -32rpx;
}

.text-wrapper {
    padding: 24rpx 0;
    text-align: center;
    width: 218rpx;
    background: #F3F8FF;
    border-radius: 16rpx;
    margin: 0 16rpx 16rpx 0;
    font-size: 32rpx;
    border: 4rpx solid transparent
}

.text-wrapper-s {
    background-color: #F3F8FF;
    color: #2A3A5A;
}

.text-wrapper-i {
    color: #0A59F7;
    background: #FFFFFF;
    border-color: #0A59F7;
}

.text-description-input {
    background: #F3F8FF;
    padding-left: 32rpx;
    padding-top: 24rpx;
}

.description-placeholder {
    color: #828DA2;
    font-size: 28rpx;
}

.title-img {
    font-size: 40rpx;
    color: #2A3A5A;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
}

.img-text {
    font-size: 32rpx;
    color: #9FA7B7;
    font-weight: 400;
}

.upload-img-row {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.upload-img-view {
    margin-right: 20rpx;
}

.upload-img {
    width: 218rpx;
    height: 218rpx;
}

.submit-btn-view {
    border-top: 2rpx solid #F4F5F6;
    padding-top: 24rpx;
    position: fixed;
    bottom: 0;
    width: 93%
}

.submit-btn {
    background: #0074FF;
    opacity: 0.2;
    border-radius: 70rpx;
    color: #FFF;
    font-size: 32rpx;
    text-align: center;
    padding: 24rpx 0;
    margin: 0 0 24rpx 0;
}

.submit {
    background: #0074FF;
    border-radius: 40rpx;
    color: #FFF;
    font-size: 32rpx;
    text-align: center;
    padding: 24rpx 0;
    margin: 0 32rpx 24rpx 32rpx;
}
</style>