yinchuan-community-all/mini-program/smart-city-yinchuan-wx/pages/wode/feedback/feedback.vue

<template>
    <view class="page">
        <view class="content">
            <view style="padding: 30rpx 0;">
                <text>请选择您要反馈的问题类型：</text>
            </view>

            <radio-group class="block" @change="RadioChange">
                <view class="radioBox">
                    <view class="radioItem" :class="data.type==item.type?'checkBorder':'defalutBorder'"
                          v-for="(item,index) in typeList" :key="index">
                        <label class="flex">
                            <view class="">
                                <radio style="transform: scale(.7);" class="round blue"
                                       :class="data.type===item.type?'checked':''"
                                       :checked="data.type==item.type?true:false"
                                       :value="item.type"></radio>
                            </view>
                            <view class="text-left padding-left-20 flex"
                                  style="flex-direction: column;justify-content: center;">
                                {{item.title}}
                            </view>
                        </label>
                    </view>
                </view>
            </radio-group>
            <view class="area">
                <view>
                    <textarea @input="input" :value="data.question" maxlength="120"
                              placeholder="请描述您的问题,以便我们尽快为您处理"></textarea>
                    <view class="text-right text-df text-gray padding-bottom-10">
                        {{data.question.length}} / 120
                    </view>
                </view>
                <view class="imgArea">
                    <view class="padding-bottom-20">
                        <text class="">请提供相关问题的截图或照片（最多四张）</text>
                    </view>
                    <view class="cu-form-group" style="padding: 20rpx 0 0 0;">
                        <view class="grid col-3 grid-square flex-sub">
                            <view class="bg-img" v-for="(item,index) in imgList" :key="index" @click="viewImage(index)">
                                <image :src="imgList[index]" mode="aspectFill"></image>
                                <view class="cu-tag bg-red" @click.stop="DelImg(index)">
                                    <text class='cuIcon-close'></text>
                                </view>
                            </view>
                            <view class="solids" @click="chooseImage" v-if="imgList.length<4">
                                <text class='cuIcon-add ' style="font-size: 60rpx;color: #c9c9c9;"></text>
                            </view>
                        </view>
                    </view>
                    <!-- <u-upload @on-choose-complete="chooseImage" :auto-upload="false" width="194" height="194" :action="action" max-count="4" :file-list="fileList" ></u-upload> -->
                </view>

            </view>
            <view class="bg-white" style="height: 150rpx;">

            </view>
        </view>
        <view class="bg-white margin-top-20 footer-fixed  " @click="sumit">
            <view class="flex flex-direction padding-sm">
                <button class="radius cu-btn base-bg-color" style="padding: 45rpx;">提交反馈</button>
            </view>
        </view>

    </view>
</template>

<script>
    var app = getApp();
    export default {
        data() {
            return {
                //图片回显
                imgList: [],
                data: {
                    member_id: '',
                    question: '',
                    image_base64: [],
                    type: "1",
                },
                //选择项列表
                typeList: [
                    {
                        title: '功能异常：功能故障或不可用',
                        type: '1'
                    },
                    {
                        title: '产品建议：用的不爽，我有建议',
                        type: '2'
                    },
                    {
                        title: '安全密码：密码，故障等',
                        type: '3'
                    },
                    {
                        title: '商户终端异常：无法支付，支付慢等',
                        type: '4'
                    },
                    {
                        title: '其他问题',
                        type: '5'
                    },
                ],
            }
        },
        methods: {
            //选择反馈类型
            RadioChange(e) {
                this.data.type = e.detail.value
            },
            /**输入问题描述
             * @param {Object} e
             */
            input(e) {
                this.data.question = e.detail.value
            },
            sumit() {
                if (this.$isEmpty(this.data.question)) {
                    uni.showToast({
                        title: "问题描述不能为空",
                        icon: "none"
                    })
                    return
                }
                if (this.data.question.length < 3) {
                    uni.showToast({
                        title: "问题描述不能少于三个字",
                        icon: "none"
                    })
                    return
                }
                if (this.$isEmpty(this.data.image_base64)) {
                    uni.showToast({
                        title: "请提供相关截图",
                        icon: "none"
                    })
                    return
                }
                this.data.member_id = app.globalData.member.id
                console.log(this.data)
                let operation = 'userFeedback/addFeedback'
                app.globalData.postRequest(this.data, operation, function (res) {
                    if (res.data.result_code == 1) {
                        app.globalData.oneFailHint(res.data.result_msg, function () {
                            uni.switchTab({
                                url: "../wode"
                            })
                        });
                    } else {
                        app.globalData.oneFailHint(res.data.result_msg);
                    }
                });
            },
            /**
             * 上传问题截图
             */
            chooseImage() {
                let that = this
                uni.chooseImage({
                    count: 4 - this.imgList.length,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album'],
                    success: (res) => {
                        const tempFilePaths = res.tempFilePaths;
                        for (let index in tempFilePaths) {
                            //图片回显
                            that.imgList.push(tempFilePaths[index])
                            //图片转为base64的图片
                            uni.getFileSystemManager().readFile({
                                filePath: tempFilePaths[index],
                                //选择图片返回的相对路径
                                encoding: 'base64',
                                //编码格式
                                success: res => {
                                    //成功的回调
                                    that.data.image_base64.push('data:image/jpeg;base64,' + res.data)
                                }
                            });
                        }

                    }
                });
            },
            /*预览图片*/
            viewImage(index) {
                uni.previewImage({
                    urls: this.imgList,
                    current: index
                });
            },
            /*删除图片*/
            DelImg(index) {
                uni.showModal({
                    title: '提示',
                    content: '确定要删除这张照片吗？',
                    cancelText: '取消',
                    confirmText: '确定',
                    success: res => {
                        if (res.confirm) {
                            this.imgList.splice(index, 1)
                        }
                    }
                })
            },
        }
    }
</script>

<style lang="scss">
    .page {
        background-color: #FFFFFF;
        min-height: 100vh;
    }

    view {
        box-sizing: border-box;
    }

    .commit {
        color: #fff;
        font-size: 28 upx;
        text-align: center;
        line-height: 88 upx;
        margin: 0 20 upx;
        width: 690 upx;
        height: 88 upx;
        background: #59a5f0;
        border-radius: 25px;
        margin-bottom: 50 upx;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;

    }

    .content {
        margin: 0 26 rpx;

        .radioBox {
            padding-top: 10 rpx;

            .radioItem {
                padding: 18 rpx;
                margin-bottom: 15 rpx;
                border-radius: 10 rpx;
            }

            .defalutBorder {
                border: 1 rpx solid #d1d1d1;
            }

            .checkBorder {
                border: 1 rpx solid #59a5f0;
                color: #59a5f0;
            }

        }

        .area {
            margin-top: 20 rpx;
            padding: 20 rpx;
            border-radius: 12 rpx;
            border: 1 rpx solid #d1d1d1;

            textarea {
                width: 100%;
                line-height: 50 rpx;
            }

            .imgArea {
                border-top: 1 rpx solid #d1d1d1;
                padding-top: 30 rpx;
            }

        }
    }

</style>