jmrh-app/src/views/interact/createInteract.vue

<template>
    <div class="create-interact">
        <nav-bar :title="title" @click-left="$router.go(-1)">
            <div slot="right" class="nav-bar-right">提交</div>
        </nav-bar>
        <div class="title">
            <input placeholder="输入标题内容，30字以内" maxlength="30" v-model="form.title" />
        </div>
        <div class="content">
            <textarea placeholder="详细描述您的问题" v-model="form.content"></textarea>
        </div>
        <div class="upload">
            <van-uploader v-model="fileList" accept="image/*" multiple :after-read="afterRead" max-count="6" />
        </div>
        <div class="switch-wrapper" v-if="type === 'official'">
            <div class="label">是否公开</div>
            <van-switch v-model="pub" active-color="#BF1616" />
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            type: '',
            form: { title: '', content: '' },
            fileList: [],
            pub: false
        };
    },
    created() {
        this.type = this.$route.query.type;
    },
    computed: {
        title() {
            switch (this.type) {
                case 'official':
                    return '我要咨询';
                case 'forum':
                    return '发布话题';
                case 'qa':
                    return '发布问题';
                default:
                    return '';
            }
        }
    },
    methods: {
        afterRead(file) {
            console.log(file);
            file.status = 'uploading';
            file.message = '上传中...';
            let form = new FormData();
            form.append('file', file.file);
            this.$http
                .post('/upload/file', form)
                .then(res => {
                    console.log(res);
                    file.status = 'success';
                    file.url = res;
                })
                .catch(e => {
                    console.log(e);
                    file.status = 'failed';
                    file.message = '上传失败';
                });
        }
    }
};
</script>
<style lang="less" scoped>
.create-interact {
    height: 100%;
    .flex-col();
}
.nav-bar-right {
    color: @prim;
    font-size: 16px;
    word-break: keep-all;
    user-select: none;
    &:active {
        color: fade(@prim, 60%);
    }
}
.title {
    position: relative;
    padding: 16px 16px 18px 16px;
    &::after {
        .setBottomLine();
        left: 16px;
        right: 16px;
    }
    input {
        width: 100%;
        padding: 0;
        margin: 0;
        font-size: 20px;
        line-height: 30px;
        &::-webkit-input-placeholder {
            color: @text4;
        }
    }
}
.content {
    flex-grow: 1;
    padding: 16px;
    position: relative;
    textarea {
        width: 100%;
        height: 100%;
        border: none;
        font-size: 16px;
        line-height: 26px;
        resize: none;
        &::-webkit-input-placeholder {
            color: @text4;
        }
    }
    &::after {
        .setBottomLine();
        left: 16px;
        right: 16px;
    }
}
.upload {
    padding: 16px;
}
/deep/ .van-uploader__preview-image {
    width: 70px;
    height: 70px;
}
/deep/ .van-uploader__upload {
    width: 70px;
    height: 70px;
    &::after {
        content: '添加图片';
        font-size: 12px;
        color: @text4;
        margin-top: 4px;
    }
}
.switch-wrapper {
    padding: 0 16px 14px 16px;
    .flex();
    .label {
        flex-grow: 1;
        color: @text1;
        font-size: 13px;
    }
}
/deep/ .van-switch--on {
    .van-switch__node {
        .flex();
        justify-content: center;
        &::after {
            content: '是';
            font-size: 12px;
            color: @prim;
        }
    }
}
</style>