yihuo/pages/feedback/index.vue

<template>
    <page title="意见反馈" ref="pageRef" nav-color="#fff">
        <view class="container">
            <view class="pageWrapper">
                <view class="type-selector">
                    <view
                        class="type-item"
                        :class="{ active: feedbackType === 'BUG' }"
                        @click="feedbackType = 'BUG'"
                    >
                        BUG
                    </view>
                    <view
                        class="type-item"
                        :class="{ active: feedbackType === '建议' }"
                        @click="feedbackType = '建议'"
                    >
                        建议
                    </view>
                    <view
                        class="type-item"
                        :class="{ active: feedbackType === '投诉' }"
                        @click="feedbackType = '投诉'"
                    >
                        投诉
                    </view>
                    <view
                        class="type-item"
                        :class="{ active: feedbackType === '其他' }"
                        @click="feedbackType = '其他'"
                    >
                        其他
                    </view>
                </view>
                <view class="input-wrapper">
                    <textarea
                        class="input"
                        v-model="feedbackContent"
                        :maxlength="maxContentLength"
                        placeholder="请输入您的反馈内容，我们将及时为您处理。"
                    ></textarea>
                    <view class="input-count">
                        <view class="num" :class="{ count: feedbackContent.length > 0 }">
                            {{ feedbackContent.length }}
                        </view>
                        /{{ maxContentLength }}
                    </view>
                </view>
                <view class="line"></view>
                <view class="image-upload">
                    <view class="image-item" v-for="(image, index) in imageList" :key="index">
                        <image :src="image" mode="aspectFill" class="img"></image>
                        <view class="delete-btn" @click="deleteImage(index)">
                            <image class="upload-icon" :src="resource.delete"></image>
                        </view>
                    </view>
                    <view class="upload-btn" v-if="imageList.length < maxImageCount">
                        <view class="upload-img" @click="chooseImage">
                            <image class="upload-icon" :src="resource.upload"></image>
                        </view>
                    </view>
                    <view class="input-count">
                        <view class="num" :class="{ count: imageList.length > 0 }">
                            {{ imageList.length }}
                        </view>
                        /{{ maxImageCount }}
                    </view>
                </view>
                <view class="submit-btn" @click="submitFeedback">提交</view>
            </view>
        </view>
    </page>
</template>

<script>
    import resource from '@/utils/resource'
    export default {
        data() {
            return {
                resource,
                feedbackType: 'BUG',
                feedbackContent: '',
                maxContentLength: 3000,
                imageList: [],
                maxImageCount: 3,
                uploadImg: null
            }
        },
        mounted() {},
        methods: {
            chooseImage() {
                wx.chooseImage({
                    count: this.maxImageCount - this.imageList.length,
                    success: (res) => {
                        this.imageList = this.imageList.concat(res.tempFilePaths)
                        console.log(res)
                        const promises = this.imageList.map((tempFilePath) => {
                            return new Promise((resolve, reject) => {
                                wx.uploadFile({
                                    url: this.$service.base.apis.UPLOAD, //仅为示例，非真实的接口地址
                                    filePath: tempFilePath,
                                    name: 'file',
                                    header: {
                                        Authentication: this.$store.getters.token
                                    },
                                    formData: {
                                        appId: 'supermart',
                                        folder: 'avatar'
                                    },
                                    success: (uploadRes) => {
                                        resolve(JSON.parse(uploadRes.data))
                                    },
                                    fail: (err) => {
                                        reject(err)
                                    }
                                })
                            })
                        })
                        Promise.all(promises)
                            .then((urls) => {
                                this.uploadImg = urls.map((item) => item.data.url).join(',')
                            })
                            .catch((err) => {
                                console.error('上传失败', err)
                            })
                    }
                })
            },
            deleteImage(index) {
                this.imageList.splice(index, 1)
            },
            async submitFeedback(loading = true) {
                if (this.feedbackContent) {
                    await this.$service.base
                        .feedbackSubmit(
                            {
                                type: this.feedbackType,
                                text: this.feedbackContent,
                                image: this.uploadImg
                            },
                            loading
                        )
                        .then((res) => {
                            this.$message.success('提交成功！')
                            setTimeout(() => {
                                this.$router.back()
                            }, 500)
                        })
                } else {
                    this.$message.warn('反馈内容是必填的！')
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .container {
        padding: 30rpx;
        .pageWrapper{
          background-color: #fff;
          padding: 30rpx;
          border-radius: 18rpx;
        }
    }
    .type-selector {
        display: flex;
        justify-content: flex-start;
        margin: 10rpx 0;
    }
    .type-item {
        padding: 10rpx 20rpx;
        margin-right: 20rpx;
        border-radius: 40rpx;
        font-size: 28rpx;
        color: #666;
        background-color: #f8f8f8;
        cursor: pointer;
    }
    .type-item.active {
        background: #fec433;
        color: #000;
    }
    .input-wrapper {
        position: relative;
        margin-bottom: 20rpx;
    }
    .input {
        width: 100%;
        height: 300rpx;
        padding: 20rpx;
        border-radius: 10rpx;
        font-size: 28rpx;
        line-height: 1.5;
        resize: none;
    }
    .input-count {
        position: absolute;
        bottom: 10rpx;
        right: 10rpx;
        font-size: 24rpx;
        color: #999;
    }
    .num {
        display: inline;
    }
    .count {
        color: #fec433;
    }
    .line {
        margin-bottom: 20rpx;
        border-bottom: 1rpx solid #ccc;
    }
    .image-upload {
        display: flex;
        flex-wrap: no-wrap;
        margin-bottom: 20rpx;
        position: relative;
    }
    .upload-btn {
        width: 30%;
        height: 200rpx;
        margin-right: 5%;
        margin-bottom: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1rpx solid #ccc;
        border-radius: 16rpx;
        font-size: 28rpx;
        color: #666;
        cursor: pointer;
    }
    .upload-img {
        width: 76rpx;
        height: 76rpx;
    }
    .upload-icon {
        width: 100%;
        height: 100%;
    }
    .image-item {
        position: relative;
        width: 30%;
        height: 200rpx;
        margin-right: 5%;
        margin-bottom: 5%;
        border-radius: 16rpx;
        .img {
            max-height: 100%;
            border-radius: 16px;
        }
    }
    .delete-btn {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        cursor: pointer;
    }
    .submit-btn {
        position: fixed;
        bottom: 94rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 502rpx;
        height: 88rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fec433;
        color: #000;
        border-radius: 44rpx;
        font-size: 32rpx;
        font-weight: 500;
        line-height: 88rpx;
        cursor: pointer;
    }
</style>