ZLPMS/PMS.WebUI/Views/MobileProblem/My.cshtml

@{
    ViewBag.Title = "My";
    Layout = "~/Views/MobileProblem/_APPMain.cshtml";
    var url = HttpContext.Current.Request.Url;
    var webSite = String.Concat(url.Scheme, "://", url.Authority);
}

    <link href="~/Content/Style/MobileProductRegist/iconfont.css" rel="stylesheet" />
    <script src="~/Content/Scripts/plugins/mui/fonts/iconfont.js"></script>
    <script src="~/Content/Scripts/plugins/mui/fonts/home.js"></script>
    <script type="text/babel" src="~/ViewModels/JY.AppInterface.js?v=1.32"></script>

    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
    <script src="~/Content/Scripts/babel.min.js"></script>
    <style>


        .mui-active {
            color: #2ab8ff !important;
        }

        .icon-soushuo {
            color: white;
        }

        .my-background {
            position: relative;
            height: 10rem;
            width: 100%;
            background-color: #00aaff;
        }

        .mycard {
            bottom: -6rem;
            z-index: 1;
        }

        .myhead {
            width: 5rem;
            height: 5rem;
            border-radius: 40px;
            box-shadow: 0 0 7px rgb(183, 210, 255);
            position: absolute;
            top: 4rem;
            left: 50%;
            margin-left: -2.5rem;
            z-index: 2;
        }

        .cardiv {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }

        .problem-summa {
            text-align: center;
        }

        #rela li {
            position: static;
            font-size: 14px;
            padding-right: 39px;
        }

        .mui-card {
            margin: 0 10px 10px 10px;
        }

        .mui-active {
            color: black !important;
        }

        .mui-deaflut {
            color: #2ab8ff !important;
        }

        #nobef::before, #nobef::after {
            position: relative;
        }

        .mui-card-footer my {
            max-height: 15px;
        }

        .my {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .we {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .ncs {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .boxx {
            flex: 1;
            height: 60px;
            align-self: flex-start;
        }

        .overf {
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

         .icon {
            width: 1.5em;
            height: 1.5em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
             margin-right:10px;
        }

        .miniblok {
            background-color: #efeff4;
            border-radius: 18px;
            padding: 5px 10px 5px 10px;
            font-size: 14px;
            margin-bottom: 10px;
            border: 1px solid #ffffff;
            margin-left: 15px;
        }

        .myactive {
            border: 1px solid #ffd69c;
        }

        .myname {
            text-align: center;
            padding: 0.3rem;
            font-size: 16px;
            font-weight: 600;
            color: black;
        }

        [v-cloak] {
            display: none;
        }

        .mui-bar {
            box-shadow: 0 0 7px rgb(183,210,422) ;
        }
        .mui-navigate,.mui-navigate-right{
            display: flex!important;
            flex-direction: row;
            align-items: center;
            justify-content: start;
        }
        p{
            font-size:13px
        }
    </style>
    <div id="vue" v-cloak>


        <header id="header" class="mui-bar mui-bar-transparent" style="box-shadow:none">
            <a  href="/MobileProblem/PersonalSetting"  class="mui-icon mui-icon-gear mui-pull-left" style="color:white"></a>
            <a href="/MobileProblem/UserDefualtSet" class="mui-icon mui-icon-more mui-pull-right" style="color:white"></a>
        </header>
        <nav class="mui-bar mui-bar-tab">

            <a class="mui-tab-item" id="Home">
                <span class="mui-icon iconfont icon-shouye"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item" id="NewProblem">
                <span class="mui-icon iconfont icon-wentifankui"></span>
                <span class="mui-tab-label">问题查询</span>
            </a>
            <a class="mui-tab-item" id="my">
                <span class="mui-icon iconfont icon-wode"></span>
                <span class="mui-tab-label">我的</span>
            </a>

        </nav>
        <div class="mui-scroll-wrapper" id="scr1">
            <div class="mui-scroll">
                <div class="my-background">
                    <div class="mui-card mycard">
                        <div class="mui-card-content">
                            <div class="mui-card-content-inner">

                                <div style="height:2rem"></div>
                                <h5 class="myname">{{Name}}</h5>
                                <div class="cardiv">
                                    <template v-if="PersonProperty=='3'">
                                        <div v-on:click="Goquery" class="problem-summa">
                                            <animated-integer v-bind:value="djCount"></animated-integer>
                                            <p>已登记</p>
                                        </div>
                                        <div v-on:click="Goquery"  class="problem-summa">
                                            <animated-integer v-bind:value="Unsolution"></animated-integer>
                                            <p>未解决</p>
                                        </div>
                                        <div v-on:click="Goquery"  class="problem-summa">
                                            <animated-integer v-bind:value="Solution"></animated-integer>
                                            <p>已解决</p>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div v-on:click="Goquery(1)"  class="problem-summa">
                                            <animated-integer v-bind:value="djCount"></animated-integer>
                                            <p>登记的</p>
                                        </div>
                                        <div v-on:click="Goquery(3)"  class="problem-summa">
                                            <animated-integer v-bind:value="sqCount"></animated-integer>
                                            <p>提交的</p>
                                        </div>
                                        <div v-on:click="Goquery(2)"  class="problem-summa">
                                            <animated-integer v-bind:value="clCount"></animated-integer>
                                            <p>处理的</p>
                                        </div>

                                    </template>

                                </div>


                            </div>
                        </div>
                    </div>
                    <img class="myhead" src="~/Content/Images/Account/wtx.jpg" />
                </div>
                <ul class="mui-table-view mui-table-view-chevron" id="rela" style="padding-top:6rem">

                    <li class="mui-table-view-cell">
                        <a href="" class="mui-navigate">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-icon_shouji"></use>
                            </svg>
                            <div style="flex:1">手机号</div>
                            <div style="float:right">{{Telephone}}</div>

                        </a>

                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zujian-youxiang"></use>
                            </svg>
                            <div style="flex:1">邮箱地址</div>
                            <div style="float:right">{{Email}}</div>
                        </a>
                    </li>
                    <li v-if="Channel!=null" class="mui-table-view-cell">
                        <a class="mui-navigate">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-gongsi"></use>
                            </svg>
                            <div style="flex:1">分公司</div>
                            <div style="float:right">{{Channel}}</div>
                        </a>
                    </li>
                    <li v-if="Institution!=null" class="mui-table-view-cell">
                        <a href="" class="mui-navigate">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-yiyuan"></use>
                            </svg>
                            <div style="flex:1">机构</div>
                            <div style="float:right">{{Institution}}</div>
                        </a>
                    </li>
                    <li v-if="Department!=null" class="mui-table-view-cell">
                        <a href="" class="mui-navigate">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-keshi"></use>
                            </svg>
                            <div style="flex:1">科室</div>
                            <div style="float:right">{{Department}}</div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell" style="padding-right:65px">
                        <a href="" class="mui-navigate-right">
                            <img src="~/Content/Images/zllogo.png" style="width:1.5em;margin-right:10px" />
                            <div style="flex:1"> 关于中联</div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell" style="padding-right:65px" id="QuerList">
                        <a class="mui-navigate-right">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-liebiao"></use>
                            </svg>
                            <div style="flex:1"> 问题列表</div>

                        </a>
                    </li>
                    <li class="mui-table-view-cell" style="padding-right:65px" id="MyComments">
                        <a class="mui-navigate-right">
                            <img src="~/Content/Images/pj.png" style="width:1.5em;margin-right:10px" />
                            <div style="flex:1">我的评价</div>

                        </a>
                    </li>
                    <li class="mui-table-view-cell" style="padding-right:65px" id="complaint">
                        <a class="mui-navigate-right">
                            <img style="width:21px;margin-right:10px;" src="~/Content/Images/tousu.png" />
                            <div style="flex:1"> 问题投诉</div>
                        </a>
                    </li>
                </ul>
                <ul class="mui-table-view" style="margin-bottom:50px;margin-top:10px" id="lo">
                    <li class="mui-table-view-cell" style="text-align: center;">
                        <a style="flex:1;font-size:14px" v-on:click="logout">退出登录</a>
                    </li>
                </ul>

            </div>
        </div>

    </div>
    <script  >         type = "text/babel"
        var ID = "@ViewBag.PersonProperty";
        var myInterfaceName = myInterfaceName;
        Vue.component('animated-integer', {
            template: '<h4>{{ tweeningValue }}</h4>',
            props: {
                value: {
                    type: Number,
                    required: true
                }
            },
            data: function () {
                return {
                    tweeningValue: 0
                }
            },
            watch: {
                value: function (newValue, oldValue) {
                    this.tween(oldValue, newValue)
                }
            },
            mounted: function () {
                this.tween(0, this.value)
            },
            methods: {
                tween: function (startValue, endValue) {
                    var vm = this
                    function animate() {
                        if (TWEEN.update()) {
                            requestAnimationFrame(animate)
                        }
                    }

                    new TWEEN.Tween({ tweeningValue: startValue })
                      .to({ tweeningValue: endValue }, 500)
                      .onUpdate(function () {
                          vm.tweeningValue = this.tweeningValue.toFixed(0)
                      })
                      .start()

                    animate()
                }
            }
        })

        var vm = new Vue({
            el: '#vue',
            data: {
                msg: 'Hello World!',
                Name: null,
                Telephone: null,
                Email: null,
                Institution: null,
                Department: null,
                Channel: null,
                djCount: 0,//我登记的
                sqCount: 0,//我申请的
                clCount: 0,  //我处理的
                Unsolution: 0, //未解决
                Solution: 0, //已解决
                PersonProperty: ID
            },
            methods: {
                logout: function () {
                    var that = this;
                    var btnArray = ['否', '是'];
                    mui.confirm('是否退出登录？', '提示', btnArray, function (e) {
                        if (e.index == 1) {
                            mui.showLoading("正在注销...", 'div');
                            that.RemoveCookie();
                            $.post("/MobileAccount/LogOut", {}, function (data) {
                                //mui.openWindow({
                                //    url: '/MobileAccount/MobileProblemLogin'
                                //});
                                window.location.href = '/MobileAccount/MobileProblemLogin?isOpenWechatLgoin=0'
                            })
                        } else {

                        }
                    });
                },
                QueryProblem: function () {

                    window.location.href = '/MobileProblem/QueryProblem'
                },
                //清除Cookie
                RemoveCookie () {
                    delCookie("DefaultProjectId");
                    delCookie("DefaultProjectName");
                    delCookie("CurrentLink");
                    delCookie("QueryProblemSlider");
                    delCookie("UserSetProject");
                    delCookie("UserSetInstitution");
                    delCookie("SearchCondition");
                },
                Goquery (val) {
                    if (val) {
                        setCookie("QueryProblemSlider", val);
                    }
                     window.location.href = '/MobileProblem/QueryProblem'

                }
            },
            created: function () {

                var that = this;
                $.post("/MobileProblem/GetCUserInfo", {}, function (data) {
                    that.Name = data[0].姓名;
                    var reg = /^(\d{3})\d{4}(\d{4})$/;
                    that.Telephone = data[0].联系电话.replace(reg, '$1****$2');
                    that.Email = data[0].电子邮箱;
                    that.Institution = data[0].名称;
                    that.Department = data[0].部门名;
                    that.Channel = data[0].渠道名称;
                });
                $.post("/MobileProblem/GetCount", {}, function (data) {
                    if (ID == "3") {
                        that.djCount = data[0].已登记 || 0;
                        that.Unsolution = data[0].未解决 || 0;
                        that.Solution = data[0].已解决 || 0;
                    } else {
                        that.djCount = data[0].我登记的;
                        that.sqCount = data[0].我申请的;
                        that.clCount = data[0].我处理的;
                    }

                });
            },
            mounted: function () {
                var that = this;
                mui.init({
                    swipeBack: true //启用右滑关闭功能
                });
                mui('#scr1').scroll();
                $("#my").addClass('mui-deaflut');

                document.getElementById('Home').addEventListener('tap', function () {

                    window.location.href = '/MobileProblem/Home'
                });
                document.getElementById('my').addEventListener('tap', function () {
                    //mui.openWindow({
                    //    url: '/MobileProblem/My'
                    //});

                });
                document.getElementById('NewProblem').addEventListener('tap', function () {

                    window.location.href = '/MobileProblem/QueryProblem'
                });
                mui('.mui-table-view-cell').on('tap', 'a', function () {
                    this.click();
                });
                document.getElementById('QuerList').addEventListener('tap', function () {
                    window.location.href = '/MobileProblem/QueryProblem'
                });
                //我的评价
                document.getElementById('MyComments').addEventListener('tap', function () {
                    window.location.href = '/MobileProblem/MyComments'
                });
                document.getElementById('complaint').addEventListener('tap', function () {
                    window.location.href = '/Complaint/NewComplaint'
                });
                mui(".cardiv").on('tap', '.problem-summa', function (event) {
                    this.click();
                });
                
            }
        })
    </script>