history_detail.html 10.7 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <script src="../../assets/js/fontsize.js"></script>
    <link rel="stylesheet" href="../../assets/css/weui.min.css">
    <link rel="stylesheet" href="../../assets/css/api.css"/>
    <link rel="stylesheet" href="../../assets/css/index.css">
    <link rel="stylesheet" href="../../assets/icon/iconfont.css">
    <style>
        #app {
            padding: 0.24rem 0.28rem;
        }

        .detail_title_box {
            border-bottom: 1px solid #c5c5c5;
            margin-bottom: 0.25rem;
        }

        .detail_title {
            font-size: 13px;
        }

        .detail_item {
            display: flex;
            align-items: center;
            /*justify-content: space-around;*/
            padding: 0.15rem 0;
            flex-wrap: wrap;
        }

        .detail_item span {
            margin: 0.1rem 0.09rem 0.1rem 0;
            padding: 0.1rem 0;
            width: 32%;
            text-align: center;
            font-size: 13px;
            background-color: #efefef;
            border-radius: 0.1rem;
            display: inline-block;
        }

        .detail_item .detail_active {
            background-color: #D8B25F;
            color: #fff;
        }

        .choose_one {
            justify-content: space-around;
        }

        .save_btn {
            position: fixed;
        }
    </style>
</head>
<body>
<div id="loadStart"></div>
<div id="app" v-cloak>
    <div v-if="!question_list_one && !question_list_two && !question_list_thr" class="nodata">暂无信息</div>
    <div v-else>
        <div class="detail_title_box" v-if="question_list_one!=null && question_list_one.select_type==1&&status1==1">
            <div class="detail_title">{{question_list_one.title}}</div>
            <div class="detail_item choose_one">
                <span :class="[item.select==1?'detail_active':'']" @click="chooseAnswer(index)"
                      v-for="(item,index) in answer_one" v-html="item.value"></span>
            </div>
        </div>
        <div class="detail_title_box" v-if="question_list_two!=null && question_list_two.select_type==2&&status2==1">
            <div class="detail_title">{{question_list_two.title}}</div>
            <div class="detail_item">
                <span :class="{detail_active:item.select==1}" v-for="(item,index) in answer_two"
                      @click="choose_more(item.select,index)" v-html="item.value"></span>
            </div>
        </div>
        <div class="detail_title_box" v-if="question_list_thr!=null && question_list_thr.select_type==1&&status3==1">
            <div class="detail_title">{{question_list_thr.title}}</div>
            <div class="detail_item choose_one">
                  <span :class="[item.select==1?'detail_active':'']" @click="chooseAnswer2(index)"
                        v-for="(item,index) in answer_thr" v-html="item.value"></span>
                <span v-if="answer_thr.length%3==2&&answer_thr.length!=2" style="background-color: #fff"></span>
            </div>
        </div>
        <div class="save_btn" @click="save_info">保存</div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="../../assets/js/weui.min.js"></script>
<script type="text/javascript" src="../../assets/js/api.js"></script>
<script type="text/javascript" src="../../assets/js/public.js"></script>
<script type="text/javascript" src="../../assets/js/fastclick.js"></script>
<script>
    new FastClick(document.body);
</script>
<script type="text/javascript" src="../../assets/js/vue.min.js"></script>
<script type="text/javascript" src="../../assets/js/axios.min.js"></script>
<script type="text/javascript" src="../../assets/icon/iconfont.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            type_id: '',
            question_list_one: [],
            answer_one: [],
            question_list_two: [],
            answer_two: [],
            question_list_thr: [],
            answer_thr: [],
            rid: 0,
            ind: -1,
            ind1: -1,
            ind2: [],
            one_qid: '',
            two_qid: '',
            thr_qid: '',
            status1: '',
            status2: '',
            status3: ''
        },
        created: function () {
            // var app=this;
            // apiready = function () {
            //     app.type_id = api.pageParam.id;
            //     app.rid = api.pageParam.rid;
            this.type_id=localStorage.getItem("id");
            this.rid=localStorage.getItem("rid")
            this.typeInfo();
            // }
        },
        methods: {
            // 获取选择数据
            typeInfo: function () {
                var app=this;
                var post = {
                    type_id: app.type_id
                };
                var header = {
                    "XX-Device-Type": getDevice(),
                    'XX-Token': getToken()
                };
                getRequest('post', 'user/index/typeInfo', post, header).then(function (res) {
                    console.log(res)
                    if (res.data.code == 1) {
                        app.status1 = res.data.data[0].status;
                        app.status2 = res.data.data[1].status;
                        app.status3 = res.data.data[2].status;
                        app.question_list_one = res.data.data[0].question;
                        app.question_list_two = res.data.data[1].question;
                        app.question_list_thr = res.data.data[2].question;
                        app.one_qid = res.data.data[0].answer[0].qid;
                        app.two_qid = res.data.data[1].answer[0].qid;
                        app.thr_qid = res.data.data[2].answer[0].qid;

                        app.answer_one=res.data.data[0].answer[0].answer;
                        app.answer_two=res.data.data[1].answer[0].answer;
                        app.answer_thr=res.data.data[2].answer[0].answer;

                        // for (var i in  res.data.data[0].answer[0].answer) {
                        //     app.answer_one.push(res.data.data[0].answer[0].answer[i])
                        // }
                        // for (var j in  res.data.data[1].answer[0].answer) {
                        //     app.answer_two.push(res.data.data[1].answer[0].answer[j])
                        // }
                        // for (var k in  res.data.data[2].answer[0].answer) {
                        //     app.answer_thr.push(res.data.data[2].answer[0].answer[k])
                        // }
                    }
                    loadEnd();
                })
            },
            // 多选
            choose_more: function (select, index) {
                var app=this;
                Array.prototype.indexOf = function (val) {
                    for (var i = 0; i < this.length; i++) {
                        if (this[i] == val) return i;
                    }
                    return -1;
                };
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (select == 1) {
                    app.answer_two[index].select = 0;
                    app.ind2.remove(index);
                } else {
                    // alert(index)
                    app.answer_two[index].select = 1;
                    app.ind2.push(index);
                }
            }
            ,
            // 第一道单选
            chooseAnswer: function (index) {
                var app=this;
                for (var m in app.answer_one) {
                    app.answer_one[m].select = 0
                }
                var ind = app.answer_one[index].select;
                if (ind == 1) {
                    app.answer_one[index].select = 0;
                } else {
                    app.answer_one[index].select = 1;
                    app.ind = index;
                }
                // alert(app.one_qid);
            }
            ,
            // 第二道单选
            chooseAnswer2: function (index) {
                var app=this;
                for (var n in app.answer_thr) {
                    app.answer_thr[n].select = 0
                }
                var ind1 = app.answer_thr[index].select;
                if (ind1 == 1) {
                    app.answer_thr[index].select = 0;
                } else {
                    app.answer_thr[index].select = 1;
                    app.ind1 = index;
                }
            }
            ,
            // 保存选择结果
            save_info: function () {
                var app=this;

                toastMsg('正在保存')
                // api.showProgress({
                //     title: '保存中',
                //     text: '正在保存……',
                //     modal: false
                // });


                var header = {
                    "XX-Device-Type": getDevice(),
                    'XX-Token': getToken()
                };
                for (var j in app.answer_two) {
                    if (app.answer_two[j].select == 1) {
                        app.ind2.push(j)
                    }
                }
                var post = {
                    rid: app.rid,
                    type_id: app.type_id,
                    'info[0][qid]': app.one_qid,
                    'info[0][aid]': app.ind == -1 ? '' : app.ind,
                    'info[0][type_id]': app.type_id,
                    'info[1][qid]': app.two_qid,
                    'info[1][aid]': app.ind2.join('|').replace(/'|'$/gi, ''),
                    'info[1][type_id]': app.type_id,
                    'info[2][qid]': app.thr_qid,
                    'info[2][aid]': app.ind1 == -1 ? '' : app.ind1,
                    'info[2][type_id]': app.type_id,
                };
                // alert(JSON.stringify(post));
                getRequest('post', 'user/index/Answer', post, header).then(function (res) {
                    // alert(JSON.stringify(res));
                    if (res.data.code == 1) {
                        api.sendEvent({
                            name: 'history',
                        });
                        setTimeout(function() {
                            api.hideProgress();
                            toastMsg('保存成功');
                            api.closeWin();
                        }, 2000)
                    }
                })
            }
        },
    })
</script>