YileUI - 意见反馈

简述

意见反馈页面，用于收集用户的意见反馈入口。

平台支持

<template>
    <view class="feedback_con">
        <view class="title">问题和意见</view>
        <view class="con">
            <yile-textarea placeholder="请填写10个字以上的问题描述以便我们提供更好的帮助" size="32rpx" isCount :maxlength="100">
            </yile-textarea>
        </view>
        <view class="title">图片（选填，提供问题截图）</view>
        <view class="con">
            <view class="file">
                <image v-for="(item,index) in imgs" :src="item">
                </image>
                <view class="add" @click="onUploadFile">
                    +
                </view>
            </view>
        </view>
        <view class="title">联系电话</view>
        <view class="con">
            <yile-input placeholder="选填,便于我们与您联系" size="32rpx"></yile-input>
        </view>
        <button @click="onSubmit">提交</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                imgs: []
            }
        },
        onLoad() {

        },
        methods: {
            //上传文件
            onUploadFile: function(e) {
                var _this = this;

                uni.chooseImage({
                    success: (chooseImageRes) => {
                        const tempFilePaths = chooseImageRes.tempFilePaths;

                        for (var i = 0; i < tempFilePaths.length; i++) {
                            _this.imgs.push(tempFilePaths[i]);

                            // uni.uploadFile({
                            //     url: _this.websiteUrl + '/api/UpdateImg/UpImg', //仅为示例，非真实的接口地址
                            //     filePath: tempFilePaths[i],
                            //     name: 'file',
                            //     formData: _this.formData,
                            //     success: (uploadFileRes) => {
                            //         var _data = JSON.parse(uploadFileRes.data);
                            //         _this.FileUrl = _data.data;
                            //         _this.FileExt = _data.ext;
                            //     }
                            // });
                        }
                    }
                });
            },
            //点击提交
            onSubmit() {
                uni.showToast({
                    title: '事件：提交',
                    icon: "none"
                });
            }
        }
    }
</script>

<style>
    page {
        background-color: #f8f8f8;
    }

    .feedback_con {
        width: 100%;

        .title {
            padding: 35rpx 3% 20rpx;
            color: #999;
            font-size: 30rpx;
        }

        .con {
            background-color: #fff;
            padding: 25rpx 3%;

            .file {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;

                image {
                    width: 180rpx;
                    height: 180rpx;
                    border-radius: 15rpx;
                    margin: 0 15rpx 10rpx 0;
                }

                .add {
                    box-sizing: border-box;
                    width: 180rpx;
                    height: 180rpx;
                    line-height: 160rpx;
                    color: #666;
                    border-radius: 15rpx;
                    border: 1px solid #eee;
                    text-align: center;
                    font-size: 100rpx;
                    font-weight: normal;
                }
            }
        }

        button {
            background-color: #3485FB;
            color: #fff;
            width: 50%;
            margin-top: 80rpx;
            font-size: 34rpx;
            line-height: 90rpx;
        }
    }
</style>