yihuo/pages/topic_create/index.vue

<template>
    <page title="发起话题" ref="pageRef" light nav-color="transparent">

        <view class="flex-align padding14">
            <image :src="resource.weal_create_remind" style="width: 32rpx; height: 32rpx" />
            <view class="font2 color-white margin10">
                审核通过后发布，不得包含非法内容，否则将审核不通过
            </view>
        </view>
        <view class="content paddingX14">
            <view class="font6 color-white paddingT20 paddingB2">话题</view>
            <view class="flex-align" style="height: 100rpx">
                <input
                    v-model.trim="question"
                    placeholder="请输入话题内容"
                    class="color-white flex1"
                />
            </view>
        </view>
        <view class="content paddingX14">
            <view class="font6 color-white paddingY20">选项配置</view>
            <view class="flex-align">
                <view
                    class="choose-btn flex-align-center"
                    :class="[check === 2 && 'check']"
                    @click="check = 2"
                >
                    2选项
                    <image v-if="check === 2" :src="resource.icon_check2" class="flag" />
                </view>
                <view
                    class="choose-btn marginL20 flex-align-center"
                    :class="[check === 3 && 'check']"
                    @click="check = 3"
                >
                    3选项
                    <image v-if="check === 3" :src="resource.icon_check2" class="flag" />
                </view>
            </view>
            <view class="flex-align marginT10 line" style="height: 100rpx">
                <view class="color-white marginR25">选项1</view>
                <input v-model.trim="a1" placeholder="请输入选项1" class="color-white flex1" />
            </view>
            <view
                class="flex-align marginT10"
                :class="[check === 3 && 'line']"
                style="height: 100rpx"
            >
                <view class="color-white marginR25">选项2</view>
                <input v-model.trim="a2" placeholder="请输入选项2" class="color-white flex1" />
            </view>
            <view v-if="check === 3" class="flex-align marginT10" style="height: 100rpx">
                <view class="color-white marginR25">选项3</view>
                <input v-model.trim="a3" placeholder="请输入选项3" class="color-white flex1" />
            </view>
        </view>
        <view class="bottom-wrapper flex-align-center">
            <image :src="resource.sell_btn_create" webp class="btn-create" @click="submit" />
        </view>
    </page>
</template>

<script>
import resource from '@/utils/resource'
export default {
    data() {
        return {
            resource,
            question: '',
            check: 2,
            a1: '',
            a2: '',
            a3: ''
        }
    },
    methods: {
        async submit() {
            if (!this.question) {
                this.$message.warn('请输入话题')
                return
            }
            let a = []
            if (!this.a1) {
                this.$message.warn('请输入选项1')
                return
            }
            a.push(this.a1)
            if (!this.a2) {
                this.$message.warn('请输入选项2')
                return
            }
            a.push(this.a2)
            if (this.check === 3 && !this.a3) {
                this.$message.warn('请输入选项3')
                return
            }
            this.check === 3 && a.push(this.a3)
            const res = await this.$service.weal.topicCreate(this.question, a.join(','))
            if (res) {
                this.$message.alert('话题已提交成功，审核通过后会显示在爆炸头页面', () => {
                    this.$router.back()
                })
            }
        }
    }
}
</script>
<style>

</style>
<style lang="scss" scoped>
.bg {
    position: fixed;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
}
.content {
    margin: 20rpx 28rpx;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 6px 3px rgba(147, 67, 255, 0.3);
    border: 2rpx solid rgba(174, 231, 255, 0.5);
    border-radius: 6px;
    .choose-btn {
        position: relative;
        width: 100px;
        height: 34px;
        border-radius: 4px;
        border: 1px solid #a76ef4;
        color: #a76ef4;
        &.check {
            color: #fff;
            border: none;
            background: linear-gradient(315deg, #6c6fff 0%, #a948ff 100%);
        }
        .flag {
            width: 40rpx;
            height: 40rpx;
            position: absolute;
            bottom: 0;
            right: 0;
        }
    }
    .line {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}
.bottom-wrapper {
    padding-bottom: 48rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}
.btn-create {
    width: 616rpx;
    height: 128rpx;
}
</style>