|
|
@@ -1,6 +1,36 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <view @tap="closeFrame">
|
|
|
+ <cu-custom bgColor="bg-blacks" :isBack="false">
|
|
|
+ <block slot="right">
|
|
|
+ <image src="../../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image>
|
|
|
+ </block>
|
|
|
+ <block slot="right">
|
|
|
+ <view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;">
|
|
|
+ <view class="cu-tag looknumber" style="margin-top: -2%;">
|
|
|
+ <block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <block slot="right">
|
|
|
+
|
|
|
+ </block>
|
|
|
+ <block slot="content">通讯录</block>
|
|
|
+ <block slot="right">
|
|
|
+ <view class="plus" @tap="showModal" data-target="viewModal">+</view>
|
|
|
+ </block>
|
|
|
+ </cu-custom>
|
|
|
+
|
|
|
+ <!-- 抽屉组件 -->
|
|
|
+ <div>
|
|
|
+ <drawer ref="drawer"></drawer>
|
|
|
+ </div>
|
|
|
+ <div class="plusDrawer" @tap="hideModal">
|
|
|
+ <plusDrawer ref="plusDrawer"></plusDrawer>
|
|
|
+ </div>
|
|
|
+ <!-- 组件左右移动 -->
|
|
|
+
|
|
|
+ <scroll-view @tap="hideModal" scroll-y class="DrawerPage" :class="modalName == 'viewModal' ? 'show' : ''">
|
|
|
+ <!-- <view @tap="closeFrame">
|
|
|
<cu-custom bgColor="bg-gradual-sisBlack" :isBack="true">
|
|
|
<block slot="backText">
|
|
|
<view style="height: 80rpx;line-height: 80rpx;color: silver;">返回</view>
|
|
|
@@ -9,13 +39,13 @@
|
|
|
<view style="color: silver;">聊天通讯</view>
|
|
|
</block>
|
|
|
</cu-custom>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
+ </view> -->
|
|
|
+ `
|
|
|
+ <view v-show="judge">
|
|
|
|
|
|
|
|
|
<!-- 搜索标签 -->
|
|
|
- <view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]"> <!-- :style="[{top:CustomBar + 'px'}]" -->
|
|
|
+ <view class="cu-bar bg-white search"> <!-- :style="[{top:CustomBar + 'px'}]" -->
|
|
|
<view class="search-form round" @touchstart="accordingTo">
|
|
|
<text class="cuIcon-search"></text>
|
|
|
<input type="text" placeholder="输入搜索的关键词" confirm-type="search" v-model="search"></input>
|
|
|
@@ -29,7 +59,7 @@
|
|
|
|
|
|
<block>
|
|
|
|
|
|
- <view class="cu-list menu-avatar no-padding mar_t" >
|
|
|
+ <view class="cu-list menu-avatar no-padding" >
|
|
|
<!-- <view class="cu-avatar">{{item.name}}</view> 字母开头显示 -->
|
|
|
<!-- 将汉字以当前字母开头的遍历 -->
|
|
|
<view class="cu-item " v-for="item in userListData" >
|
|
|
@@ -122,6 +152,10 @@
|
|
|
<view v-show="!hidden" class="indexToast">
|
|
|
<!-- {{listCur}} -->
|
|
|
</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </scroll-view>
|
|
|
<initial ref="initial"></initial>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -129,9 +163,20 @@
|
|
|
<script>
|
|
|
import pinyin from './index.js';
|
|
|
import initial from './InitializeThe.vue';
|
|
|
+
|
|
|
+ import res from '../../../common/data.json';
|
|
|
+ import drawer from '../../../components/drawer/threeLineDrawer.vue'
|
|
|
+ import plusDrawer from '../../../components/drawer/plusDrawer.vue';
|
|
|
+
|
|
|
+ import mine from '../../../components/mine/Mine.vue';
|
|
|
+ import chatindex from '../../../components/mine/chat/Chatindex.vue';
|
|
|
export default {
|
|
|
components: {
|
|
|
- initial: initial
|
|
|
+ initial: initial,
|
|
|
+ drawer: drawer,
|
|
|
+ plusDrawer: plusDrawer,
|
|
|
+ mine:mine,
|
|
|
+ chatindex:chatindex
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -160,12 +205,49 @@
|
|
|
},
|
|
|
biaos:2,
|
|
|
socketTask_getUserList:'',
|
|
|
-
|
|
|
+ inconList:["form","favor","question","edit"],
|
|
|
+ drawerList: [
|
|
|
+ {"name":"聊天通讯"},
|
|
|
+ ],
|
|
|
+ leftNavigationtitle:'我的功能分组',
|
|
|
+ badge: 22,
|
|
|
+ address: '',
|
|
|
+ modalName:null,
|
|
|
+ plusDrawerList: [],
|
|
|
+ toggleid:12,
|
|
|
+ plusDrawerList: [
|
|
|
+ {
|
|
|
+ name: '宁夏新能源公司',
|
|
|
+ windPowerStationId: 'NINGXIAXINNENGYUANGONGSI'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '牛首山风电场',
|
|
|
+ windPowerStationId: 'NSS_FDC'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '香山风电场',
|
|
|
+ windPowerStationId: 'XS_FDC'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '石板泉风电场',
|
|
|
+ windPowerStationId: 'SBQ_FDC'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '青山风电场',
|
|
|
+ windPowerStationId: 'QS_FDC'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '麻黄山风电场',
|
|
|
+ windPowerStationId: 'MHS_FDC'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ judge:true,
|
|
|
};
|
|
|
},
|
|
|
created: function() {
|
|
|
|
|
|
this.getUserList();
|
|
|
+ this.drawerList=uni.getStorageSync('leftlist5');
|
|
|
/* this.pinyin(); */
|
|
|
},
|
|
|
onLoad() {
|
|
|
@@ -179,6 +261,10 @@
|
|
|
this.listCur = list[0];
|
|
|
|
|
|
},
|
|
|
+ onHide() {
|
|
|
+ this.$refs.drawer.closeDrawer();
|
|
|
+ this.hideModal();
|
|
|
+ },
|
|
|
onReady() {
|
|
|
let that = this;
|
|
|
/* uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
|
|
|
@@ -221,6 +307,38 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ showModal(e) {
|
|
|
+ this.modalName = e.currentTarget.dataset.target;
|
|
|
+ this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
|
|
|
+ },
|
|
|
+ hideModal() {
|
|
|
+ this.modalName = null;
|
|
|
+ this.$refs.plusDrawer.hideModal(this.modalName);
|
|
|
+ },
|
|
|
+ falseLogin: function() {
|
|
|
+ this.removeUsernamePassword();
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/components/login/Login'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openDrawer: function() {
|
|
|
+
|
|
|
+ if(this.$refs.drawer != undefined){
|
|
|
+ this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList,this.leftNavigationtitle);
|
|
|
+ }else{
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ closeDrawer: function() {
|
|
|
+ this.drawerIsShow = false;
|
|
|
+
|
|
|
+ },
|
|
|
+ viewUserid: function() {
|
|
|
+ this.plusDrawerList=uni.getStorageSync('plusList');
|
|
|
+ },
|
|
|
+ monitoringAuthority: function() {
|
|
|
+ this.drawerList=uni.getStorageSync('leftlist5');
|
|
|
+ },
|
|
|
go(userid,lastUserName,nickname,id,bool){
|
|
|
|
|
|
let _this=this;
|
|
|
@@ -246,6 +364,7 @@
|
|
|
},
|
|
|
child(id){
|
|
|
this.$refs.initial.childMethod(id);
|
|
|
+ this.judge = false;
|
|
|
},
|
|
|
accordingOut(){
|
|
|
this.play=true;
|
|
|
@@ -449,4 +568,97 @@
|
|
|
.text-grey{
|
|
|
margin-top: -10px;
|
|
|
}
|
|
|
+ .plus {
|
|
|
+ width: 30px;
|
|
|
+ height: 45px;
|
|
|
+ float: right;
|
|
|
+ color: white;
|
|
|
+ font-size: 35px;
|
|
|
+ line-height: 45px;
|
|
|
+ text-align: right;
|
|
|
+ margin-right: 2.5%;
|
|
|
+ }
|
|
|
+ .top {
|
|
|
+ width: 100%;
|
|
|
+ height: 130upx;
|
|
|
+ padding-top: 5upx;
|
|
|
+ background-color: #1f1f1f;
|
|
|
+ position: fixed;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+
|
|
|
+ .threeLine {
|
|
|
+ width: 50px;
|
|
|
+ height: 45px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ width: calc(100% - 100px);
|
|
|
+ height: 45px;
|
|
|
+ float: left;
|
|
|
+ user-select: text;
|
|
|
+ -webkit-user-select: text;
|
|
|
+ -moz-user-select: text;
|
|
|
+ -ms-user-select: text;
|
|
|
+ color: silver;
|
|
|
+ line-height: 45px;
|
|
|
+ margin-top: 11px;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .DrawerPage {
|
|
|
+ position: fixed;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ left: 0vw;
|
|
|
+ background-color: #1f1f1f;
|
|
|
+ transition: all 0.4s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .DrawerPage.show {
|
|
|
+ transform: scale(0.9, 0.9);
|
|
|
+ left: 85vw;
|
|
|
+ box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
|
|
|
+ transform-origin: 0;
|
|
|
+ }
|
|
|
+ .DrawerPage .cu-bar.tabbar .action button.cuIcon {
|
|
|
+ width: 64upx;
|
|
|
+ height: 64upx;
|
|
|
+ line-height: 64upx;
|
|
|
+ margin: 0;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .DrawerPage .cu-bar.tabbar .action .cu-avatar {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .DrawerPage .nav {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .DrawerPage .nav .cu-item.cur {
|
|
|
+ border-bottom: 0;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .DrawerPage .nav .cu-item.cur::after {
|
|
|
+ content: '';
|
|
|
+ width: 10upx;
|
|
|
+ height: 10upx;
|
|
|
+ background-color: currentColor;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10upx;
|
|
|
+ border-radius: 10upx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .DrawerPage .cu-bar.tabbar .action {
|
|
|
+ flex: initial;
|
|
|
+ }
|
|
|
</style>
|
zhaomiao