lsappBms/lss_vue_wx/src/views/my/myAddress.vue

<template>
	<div class="detail">
        <mt-header class="detail_head" fixed title="通讯录">
            <router-link to="" slot="left">
                <mt-button icon="back" v-on:click="jumpBack()"></mt-button>
            </router-link>
        </mt-header>
        <div class="detail_body">
            <div class="noList" v-if="list.length==0">
                <img src="../../assets/image/noList.png">
            </div>  
            <ul v-else class="recordBox">
                <li v-for="(item,index) in list" :id="'tab' + item.departmentGuid" class="one_recordBox detailBox">
                    <div v-on:click="showList('tab'+item.departmentGuid)">
                        <img :class="item.departmentGuid == user.deptId?'rotate1':'rotate'" src="../../assets/image/down_blue.png"> 
                        <span>{{item.departmentName}}</span>
                    </div>
                    <ul :style="item.departmentGuid == user.deptId?'':'display:none'">
                        <li v-for="(peo,num) in item.userVOS" class="one_peo">
                            <div class="one_peo_head">
                                <img src="../../assets/image/userHead.png">
                            </div>
                            <div class="one_peo_body">
                                <div>{{peo.name}} <span v-if="peo.roleName=='部门领导'" style="color: #5FA1F0;margin-left:0.05rem;font-size:0.12rem;">({{peo.roleName}})</span></div>
                                <div>{{peo.phone}}</div>
                            </div>
                            <!-- <div v-if="peo.roleName!='部门领导' && item.departmentGuid == user.deptId && user.roles[0].rolename == '部门领导' && power.indexOf('scoring')>-1" 
                                class="one_peo_score" v-on:click="toScore(peo.id,peo.name)">
                                {{peo.totalScore==null?"打分":peo.totalScore + "分"}}
                                <span class="toScore"><img class="rotate" src="../../assets/image/pull_down_blue.png"></span>
                            </div> -->
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
	export default {
		data() {
			return {
                user: JSON.parse(sessionStorage.getItem("user")),
                power: sessionStorage.getItem("power"),
                list: [],
			}
		},
		methods: {
            // 消息列表
            getList() {
                this.$indicator.open();
                this.http.post(this.port.my.addressList, {} , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        this.list = res.data;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            showList(id) {
                if($('#'+ id +' > div > img').attr('class') == "rotate"){
                    $('#'+ id +' > ul').slideDown();
                    $('#'+ id +' > ul .mint-cell-right').css("transform","translate3d(100%, 0, 0)")
                    $('#'+ id +' > div >img').attr("class","rotate1");
                } else {
                    $('#'+ id +' > ul').slideUp();
                    $('#'+ id +' > ul .mint-cell-right').css("transform","translate3d(100%, 0, 0)")
                    $('#'+ id +' > div > img').attr("class","rotate");
                }
            },

            toScore(id,name) {
                this.$router.push("/myGrade/" + id + "/" + name)
            },

            jumpBack() {
                this.$router.go(-1);
            }
        },
        created() {
            this.getList();
        },
		mounted() {
		}
	}

</script>

<style scoped>
    body {
        background: #EFEFEF;
    }

    .detail_head {
        background: #fff;
        color: #333;
        height: 0.4rem;
    }

    .detail_body {
        margin-top: 0.4rem;
        padding-bottom: 0.15rem;
    }

    .tab_head {
        position: fixed;
        width: 100%;
        top: 0.4rem;
        z-index: 110;
    }

    .detail {
        background: #EFEFEF;
    }

    .detailBox {
        background: #fff;
    }

    .recordBox {
        margin: 0.12rem 0 0 0;
    }

    .one_recordBox {
        padding: 0.12rem 0.2rem;
    }

    .one_recordBox > div > img {
        width: 0.15rem;
        margin-right: 0.1rem;
        vertical-align: middle;
    }

    .one_recordBox > div > span {
        display: inline-block;
        width:60%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: middle;
    }

    .rotate {
        transform-origin: center center;
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transition: transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -o-transition: -o-transform 0.2s;
        -ms-transition: -ms-transform 0.2s;
    }

    .rotate1 {
        transform-origin: center center;
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transition: transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -o-transition: -o-transform 0.2s;
        -ms-transition: -ms-transform 0.2s;
    }

    .one_recordBox > ul {
        padding: 0 0 0 0.2rem;
    }

    .toScore img {
        width: 0.1rem;
    }

    .one_peo {
        padding: 0.12rem 0;
    }

    .one_peo_head {
        float:left;
        margin-right: 0.15rem;
    }

    .one_peo_head img {
        width: 0.35rem;
        height: 0.35rem;
        border-radius: 50%;
    }

    .one_peo_body {
        display: inline-block;
        line-height: 0.2rem;
        color: #999;
    }

    .one_peo_body > div:nth-child(1) {
        color: #333;
    }

    .one_peo_score {
        float:right;
        line-height: 0.4rem;
        color: #5FA1F0;
    }

    .noList {
        text-align: center;
        padding: 1.5rem 0;
    }

    .noList img {
        width: 1.2rem;
        height: 1.2rem;
    }
</style>
<style>
    .one_peo .mint-cell-value {
        display: block;
        width: 100%;
    }

    .one_peo .mint-cell:last-child {
        background-image: none;
    }

    .one_peo .mint-cell-wrapper {
        background-image: none;
    }
</style>