Front-end general questionnaire source code

 

<template>
    <view>
        <!-- 消息 -->
        <view class="">
            <u-top-tips ref="uTips"></u-top-tips>
        </view>
        <!--  -->
        <!-- 标签列表 -->
        <u-gap bgColor="#f5f5f5" height="30"></u-gap>

        <view class="pageView">
            <!-- 标题 -->
            <view class="ansHearview">
                <view class="QleftName">
                    <u-section title="问题" :right="false"></u-section>
                </view>
                <view class="ansT">
                    <view class="ansInputs">
                        <u-input v-model="title" placeholder="请输入您的问题?" type="textarea" :auto-height="true" border="border" />
                    </view>
                </view>
            </view>
            <!-- end -->
            <u-gap bgColor="#f5f5f5" height="30"></u-gap>
            <!-- 选项 -->
            <view class="ansHearview">
                <view class="QleftName">
                    <u-section title="回答" :right="false"></u-section>
                </view>
                <!-- 文本题 -->
                <view class="ansT" v-if="typeName=='文本题'">
                    <view class="ansInput">
                        <!-- <dragSort :list="obj" :props="props" @change="onDragSortChange"></dragSort> -->
                        <view class="vInputs">
                            <u-input v-model="textTitle" disabled="disabled" placeholder="-" :value="textTitle" type="textarea"
                                :auto-height="true" border="border" />
                        </view>
                    </view>
                </view>
                <!-- 文本题end -->
                <!-- 单选题 -->
                <view class="ansT" v-if="typeName=='单选题'">
                    <view class="ansInput">
                        <!-- <dragSort :list="obj" :props="props" @change="onDragSortChange"></dragSort> -->
                        <view v-for="(item,index) in List" class="AnsIcon">
                            <view class="AnsIcons" @click="removeItem(item,index)">
                                <u-icon name="minus-circle" color="#C51A15" size="45"></u-icon>
                            </view>
                            <view class="vInput">
                                <u-input v-model="item.name" :value="item.name" type="text" border="border" />
                            </view>
                        </view>
                    </view>
                    <view class="optionView" @click='addItem'>
                        + 添加选项
                    </view>
                </view>
                <!-- 单选题end -->
                <!-- 单选题 -->
                <view class="ansT" v-if="typeName=='多选题'">
                    <view class="ansInput">
                        <!-- <dragSort :list="obj" :props="props" @change="onDragSortChange"></dragSort> -->
                        <view v-for="(item,index) in List" class="AnsIcon">
                            <view class="AnsIcons" @click="removeItem(item,index)">
                                <u-icon name="minus-circle" color="#C51A15" size="45"></u-icon>
                            </view>
                            <view class="vInput">
                                <u-input v-model="item.name" :value="item.name" type="text" border="border" />
                            </view>
                        </view>
                    </view>
                    <view class="optionView" @click='addItem'>
                        + 添加选项
                    </view>
                </view>
                <!-- 单选题end -->
            </view>
            <!-- end -->
            <u-gap bgColor="#f5f5f5" height="30"></u-gap>
            <!-- 设置 -->
            <view class="ansHearview">
                <view class="QleftName">
                    <u-section title="设置" :right="false"></u-section>
                </view>
                <view class="ansT">
                    <view class="ansInput">
                        <u-picker mode="selector" v-model="doctorshow" :default-selector="[0]" :range="selectorObj"
                            range-key="cateName" @confirm="getQues"></u-picker>
                        <view class="ulist" @click="doctorshow=true">
                            <view class="ulistName">
                                题目切换
                            </view>
                            <view class="ulistAView">
                                <view class="">
                                    <u-icon :label="typeName" label-pos="left" color="#999" size="30" name="arrow-right"></u-icon>
                                </view>
                            </view>
                        </view>
                        <u-cell-item title="题目必答" :arrow="false">
                            <u-switch size="30" v-model="checked" @change="change"></u-switch>
                        </u-cell-item>
                    </view>
                </view>
            </view>
        </view>
        <!-- end -->
        <!-- 保存 -->
        <view class="subview">
            <view class="subviewBtn" @click="getSubmit">
                保存
            </view>
        </view>
        <!-- end -->
    </view>
</template>
<script>

</script>
<script>
    import {
        config
    } from "../../static/js/config.js";
    import dragSort from '../../components/drag-sort/index.vue'
    export default {
        components: {
            dragSort
        },
        data() {
            return {
                doctorshow: false,
                typeName: "文本题",
                title: "",
                textTitle: "",
                selectorObj: [{
                        cateName: '文本题',
                        id: 1
                    },
                    {
                        cateName: '单选题',
                        id: 2
                    },
                    {
                        cateName: '多选题',
                        id: 3
                    }
                ],
                List: [{
                    name: "选项"
                }, {
                    name: "选项"
                }],
                id: "",
                // 
                checked: false,

            }
        },
        onLoad: function(options) {
            var that = this;
            this.typeName = options.typeName;
            that.id = options.id;
        },
        methods: {

            showToast(msg, type) {
                this.$refs.uTips.show({
                    title: msg,
                    type: type
                })
            },
            addItem: function(e) {
                var temp = this.List;
                var input = {
                    name: ""
                };
                temp.push(input);
                this.List = temp;
            },
            /***** 删除最后一个组件，也可以修改删除指定组件*/
            removeItem: function(item, index) {
                var temp = this.List;
                console.log(item, index);
                temp.splice(index, 1);
                this.List = temp;
                // this.obj.splice(1,index)
            },
            // switch打开或者关闭时触发，值为true或者false
            change(status) {
                console.log(status);
            },
            /*
             *题目类型
             */
            getQues(e) {
                console.log(e);
                var that = this;
                that.typeName = that.selectorObj[e].cateName;
            },

            // 保存
            getSubmit() {
                var that = this;
                if (this.title == "") {
                    this.showToast("请输入问题!", "error");
                    return;
                }
                var datas = {

                };
                if (this.typeName == "文本题") {
                    if (this.title == "") {
                        this.showToast("请输入标题!", "info");
                        return;
                    }
                    datas = {
                        openid: "omgue4vK8mpc8Nw0MHaUsn3TjQfQ",
                        questionnaireid: that.id,
                        title: this.title,
                        type: 3,
                        typeName: this.typeName,
                        status: this.checked ? 1 : 0
                    };

                }
                if (this.typeName == "单选题") {
                    datas = {
                        openid: "omgue4vK8mpc8Nw0MHaUsn3TjQfQ",
                        questionnaireid: that.id,
                        title: this.title,
                        typeName: this.typeName,
                        optionArr: this.List,
                        type: 1,
                        status: this.checked ? 1 : 0
                    };
                }
                if (this.typeName == "多选题") {
                    datas = {
                        openid: "omgue4vK8mpc8Nw0MHaUsn3TjQfQ",
                        questionnaireid: that.id,
                        title: this.title,
                        typeName: this.typeName,
                        optionArr: this.List,
                        type: 2,
                        status: this.checked ? 1 : 0
                    };
                }

                console.log("data==>", datas);
                uni.getStorage({
                    key: 'userList',
                    success: function(res) {
                        var userList = res.data.data;
                        console.log("存储数据==>", userList);
                        uni.request({
                            url: config.creatquestionnairequestion,
                            method: 'post',
                            data: datas,
                            success: (res) => {
                                if (res.data.code == 0) {
                                    console.log("添加问卷题目==>", res);
                                    uni.navigateTo({
                                        url: "../QApage/QApage?id=" + that.id
                                    })
                                } else {
                                    uni.showToast({
                                        mask: true,
                                        icon: "none",
                                        title: "网络异常,请联系管理员~",
                                        duration: 2000
                                    })
                                    console.log("异常获取数据token==>", res)
                                }

                            },
                            fail: (err) => {
                                console.log("接口异常获取数据token==>", err)
                            }
                        })
                    }
                })
                console.log("提交给后端的数据==>", datas)
            },
        }
    }
</script>

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

    .ansHearview {
        position: relative;
        width: 100%;
    }

    .ansHead {
        position: relative;
        width: 95%;
        color: #999;
        margin: 0 auto;
        padding: 15rpx 0rpx;
        text-align: left;
    }

    .ansT {
        position: relative;
        width: 95%;
        text-align: center;
        margin: 0 auto;
        padding-bottom: 30rpx;
        background-color: #fff;
    }

    .ansInputs {
        position: relative;
        width: 90%;
        margin: 0 auto;
    }

    .ansInput {
        position: relative;
        width: 90%;
        margin: 0 auto;
    }

    /* 动态文本框 */
    .AnsIcon {
        position: relative;
        width: 100%;
        display: flex;
        flex: 1;
        margin-bottom: 20rpx;
    }

    .AnsIcons {
        margin-right: 10rpx;
        position: relative;
        top: 18rpx;
    }

    /* 添加选项 */
    .optionView {
        position: relative;
        color: #0062CC;
        width: 100%;
        border-top: 1rpx solid #f5f5f5;
        padding-top: 20rpx;
    }

    .subview {
        position: fixed;
        bottom: 0;
        text-align: center;
        width: 100%;
        z-index: 3;
        padding: 30rpx 0rpx;
        background-color: #fff;
    }

    .subviewBtn {
        position: relative;
        width: 90%;
        height: 80rpx;
        display: inline-block;
        line-height: 80rpx;
        color: #fff;
        background-color: #0062CC;
        border-radius: 15rpx;
    }

    /* 拖拽 */

    .pageView {
        position: relative;
        margin-bottom: 230rpx;
    }

    .vInput {
        position: relative;
        width: 90%;
    }

    .vInputs {
        position: relative;
        width: 100%;
    }

    .ulist {
        position: relative;
        display: flex;
        flex: 1;
        width: 100%;
        background-color: #fff;
        height: 100rpx;
        line-height: 100rpx;
        border-bottom: 1rpx solid #f5f5f5;
    }

    .ulistName {
        position: absolute;
        left: 30rpx;
    }

    .ulistAView {
        position: absolute;
        right: 20rpx;
        display: flex;
        flex: 1;
    }

    /*  */
    .mtagList {
        background-color: #fff;
        position: relative;
        width: 95%;
        margin: 0 auto;
    }

    .rowlike {
        background-color: #fff;
        display: table;
        width: 100%;
        padding-bottom: 35rpx;
    }

    .rowlike .label {
        float: left;
        /*   width: 79px;
            height: 25px;
            line-height: 25px; */

        text-align: center;
        font-size: 13px;
        margin-left: 11px;
        margin-top: 12px;
        overflow: hidden;
    }

    .spanBlock {
        display: inline-block;
        text-align: center;
        /* width: 79px; */
        border: 1rpx solid #ccc;
        border-radius: 12rpx;
        padding: 0rpx 12rpx;
        height: 50rpx;
        line-height: 50rpx;
    }

    .spanBlock.activew {
        border: 0.5px solid #dd1a21;
        color: #dd1a21;
        background: #fff;
        padding: 0rpx 12rpx;
        height: 50rpx;
        border-radius: 12rpx;
        /* width: 79px; */
        line-height: 50rpx;
    }

    .QleftName {
        width: 95%;
        margin: 0 auto;
        background-color: #fff;
        padding: 30rpx 0rpx;
    }
</style>