raolu
/
PC-application


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../../css/font-awesome.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>健康指导</title>
</head>
<style>
    * {
        box-sizing: border-box;
        outline: none;
        list-style: none;
    }

    html,
    body {
        height: 100%;
    }

    ul,
    li,
    body,
    h1 {
        margin: 0;
        padding: 0;
    }
    body{
        font-size: 14px;
    }

    /* 头 */

    .head {
        width: 100%;
        line-height: 45px;
        background-color: #ffffff;
        padding-left: 40px;

    }

    section {
        width: 100%;
    }

    /* 内容 */

    div.nr {
        display: flex;
        background-color: #ffffff;
        border: 1px solid #d7dce6;

    }

    /* 左 */

    .left {
        position: relative;
        width: 45%;
        margin: 0 13px;
        background-color: #f6f6f6;
        border: 1px solid #d7dce6;
    }

    .left .nav {
        list-style: none;
        display: flex;
        justify-content: center;
        width: 100%;
        border-bottom: 1px solid #d7dce6;

    }

    .left .nav li {
        width: 92px;
        border: 1px solid #d7dce6;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin:18px 3px -1px 3px;
        line-height: 30px;
    }

    .left .nav li a {
        text-decoration: none;
        display: inline-block;
        width: 100%;
        text-align: center;

    }

    .before {
        color: gray;
    }

    .avtive {
        color: #12b7f5;
    }

    .left button.new {
        width: 100%;
        background-color: #17b3ec;
        line-height: 50px;
        color: aliceblue;
        border: 0;
        outline: none;
    }

    .check {
        display: flex;
        align-items: center;
        background-color: #ffffff;
        height: 58px;
        width: 100%;
        margin-top: 12px;
        /* margin: 10px 10px; */
    }
    .check input {
        display: inline-block;
        height: 38px;
        width: calc(100% - 50px);
        background-color: #f2f2f2;
        border: 1px solid gainsboro;
        outline: none;
        margin-left: 15px;
    }
    .check i {
        padding: 8px 15px;
        color: gainsboro;
        border: 1px solid gainsboro;
        border-left: none;
        margin-right: 20px;
    }

    .model {

        background-color: #ffffff;
        border: 1px solid rebeccapurple;

    }
    /* 右 */
    .right {
        width: 55%;
        background-color: #f6f6f6;
    }
    .right .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 55px;
        background-color: #ffffff;
        padding: 20px 25px;
        font-size: 16px;
        font-weight: 530;
    }

    .right .title button {
        width: 100px;
        height: 35px;
        color: white;
        background-color: #17b3ec;
        border: 1px solid white;
        outline: none;
    }

    .chenhu {
        height: 55px;
        background-color: white;
        line-height: 50px;

    }

    .chenhu label {
        margin: 10px;
        vertical-align: bottom;

    }

    .chenhu input {
        display: inline-block;
        border: 0;
        line-height: 50px;
    }

    .right textarea {
        width: 100%;
        border: 0;
        border-top: 1px solid #e1e1e1;
        height: 285px;
        height: auto;
        resize: none;
        padding: 10px 15px;
    }

    .rigbtn {
        width: 130px;
        height: 40px;
        margin-top: 30px;
        border: 0;
        background-color: #17b3ec;
        color: #ffffff;
        border-radius: 5px;

    }

    .di {
        width: 100%;
        text-align: center;
    }

    .c-t-right {
        width: 100%;
        text-align: right;
        margin: 0;
        padding: 0;
    }

    .bgc-fff {
        background-color: #ffffff;

    }

    textarea {
        border: none;
        margin: 0;
        padding: 0;
    }

    .addpic {
        margin-top: 10px;
        padding: 10px 15px;
    }

    .xuanranmuban {
        margin: 10px 0;
        height: 490px;
        background-color: #ffffff;
    }

    .xuanranmuban ul li {
        width: 100%;
        line-height: 50px;
        border: 1px solid #e4e4e4;
        padding-left: 15px;
    }
</style>


<body>
    <section>
        <!-- 头 -->
        <div class="head">
            健康指导
        </div>
        <!-- 内容-->
        <div class="nr" id="dra" v-cloak>
            <div class="left">
                <div id="dra1">
                    <!-- 导航栏 -->
                    <ul class="nav">
                        <li>
                            <a class="avtive" href="javascript:void(0)" @click="layout='personal'">个人模板</a>
                        </li>
                        <li>
                            <a class="before" href="javascript:void(0)" @click="layout='team'">团队模板</a>
                        </li>
                        <li>
                            <a class="before" href="javascript:void(0)" @click="layout='sysm'">系统模板</a>
                        </li>
                    </ul>
                    <div class="check">
                        <input type="text" placeholder="查找模板" class="search-input">
                        <i class="fa fa-search"></i>

                    </div>
                    <div class="xuanranmuban">
                        <ul v-if="layout=='personal'">
                            <li v-for="(list,index) in resultList">{{list.modelName}}</li>

                        </ul>
                        <ul v-if="layout=='team'">
                            <li v-for="(list,index) in resultList">
                                {{list.owner}}
                            </li>

                        </ul>
                        <ul v-if="layout=='sysm'">
                            <li v-for="(list,index) in resultList">
                                {{list.sendTimes}}
                            </li>

                        </ul>
                    </div>

                </div>
                <button class="new">
                    新建指导模板</button>

            </div>
            <div class="right">
                <div class="title">
                    <p>指导模板</p>
                    <button>保存到模板</button>
                </div>
                <div class="chenhu">
                    <label for="">模板名称:</label>
                    <input maxlength="10" placeholder="请输入模板名称(10字内)">
                </div>
                <div class="bgc-fff c-border-b me">
                    <textarea class="c-f14 " placeholder="请输入指导内容 " rows="22 " maxlength="1000"></textarea>
                    <div class="c-t-right c-f14 c-909090 pr10 pb10 me2">
                        <span id="text_count ">0</span>/1000</div>
                </div>
                <div class="mt10 bgc-fff c-border-tb addpic" id="imgArea">
                    <div class="c-f16 c-333">插入图片 (
                        <span id="img_count">0</span>/9)</div>
                    <div id="img_wrap" class="clearfix">
                        <div id="add" class="fl mr15 mt20">
                            <img src="../../../images/tianjiatupian_btn.png" width="65">
                        </div>
                    </div>
                </div>

                <div class="di">
                    <button class="rigbtn ">发送</button>

                </div>
            </div>
        </div>

    </section>
    <!-- <script src="https://unpkg.com/vue/dist/vue.js "></script> -->
    <!-- <script type="text/javascript " src="../../../js/vue.js "></script> -->
    <script src="../js/vue2.js "></script>
    <script src="https://unpkg.com/element-ui/lib/index.js "></script>
    <script src="../../../js//vue-router.js "></script>
    <script type="text/javascript " src="../../../js/jquery-2.2.4.js "></script>
    <script src="../../../js/bootstrap.min.js "></script>
    <script src="../../../api/http-request.js "></script>
    <script src="../../../api//healthy-guide-api.js"></script>
    <script>
        new Vue({
            el: '#dra',
            data: {
                layout: 'personal',
                resultList: [],
            },
            mounted: function () {
                this.signList();
            },
            methods: {
                signList: function (isInit) {
                    var vm = this
                    var selectedTab = 0
                    var page = [1,0,1]
                    if (isInit) {
                        page[selectedTab] = 1;
                    }
                    var params = {
                        type: selectedTab == 0 ? 2 : 1, //模板类型 1:系统 2:自定义 为空:所有
                        pageNo: page[selectedTab],
                        pageSize: 20,
                    }
                    healthAPI.getlist(params).then(function (res) {
                        if (res.status == 200) {
                            loaded[selectedTab] = true;
                            console.log(res.data)
                            vm.resultList = res.data//>
                        } else {
                            showErrorMessage(res.msg);

                        }
                    })//>
                },

            }
        })

        var li = document.getElementsByTagName('a');
        var $text_count = $("#dra").find(".right").find(".me").find(".me2").find("span")
        var last = 0
        for (i = 0; i < li.length; i++) {
            li[i].onclick = function () {
                li[last].style.backgroundColor = 'white'
                li[last].style.color = 'gray'
                last = Array.from(li).indexOf(this)
                li[last].style.backgroundColor = '#17b3ec'
                li[last].style.color = 'white'
            }
        }
        $("textarea").on('keyup', function () {
            var count = $(this).val().length;
            $text_count.html(count);
        });
        $(".search-input").on('keydown', function (e) {
            if (e.which === 13) {
                if (selectedTab == 0 || selectedTab == 2) {
                    getList(true);
                } else {
                    getTeamInfoBySearch(searchIndex);
                }
            }
        });
    </script>

</body>

</html>