sisMobilePhone/components/mine/addressBook/addressBook.vue

<template>
	<view>
		<cu-custom bgColor="bg-blacks" :isBack="false" v-show="but1">
			<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>
		<!-- 组件左右移动 -->

		<!-- 返回组件 -->
		 <view @click="changeState()">    
		<cu-custom bgColor="bg-gradual-sisBlack" :isBack="false"  v-show="but2" >
			<block slot="backText">
				<view style="height: 80rpx;line-height: 80rpx;color: silver;">返回</view>
			</block>
			<block slot="content">
				<view style="color: silver;">聊天通讯</view>
			</block>
		</cu-custom>
		</view> -->
		<!--<view class="cu-bar bg-white" v-show="but2" style="z-index: 9999;" @tap="common.navTo('/components/mine/addressBook/addressBook')">
			<view class="action">
				<text class="cuIcon-back text-white" style="font-size: 15px;"></text>
				<text style="    color: silver;">返回</text>
			</view>
			<view class="content text-white">
				通讯录
			</view>
		</view>-->

		<scroll-view @tap="" scroll-y class="DrawerPage" :class="modalName == 'viewModal' ? 'show' : ''">


			`
			<view v-if="judge==1">


				<!-- 搜索标签 -->
				<view class="cu-bar bg-white search" style="z-index: 999999;">
					<!-- :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>
					</view>
					<view class="action">
						<button class="cu-btn bg-gradual-sisBlack shadow-blur round" @click="accordingOut">取消</button>
					</view>
				</view>
				<!-- 搜索列表 -->
				<view class="search-content " ref="search">

					<block>

						<view class="cu-list menu-avatar no-padding">
							<!-- <view class="cu-avatar">{{item.name}}</view> 字母开头显示 -->
							<!-- 将汉字以当前字母开头的遍历 -->
							<view class="cu-item " v-for="item in userListData">
								<view v-if="item.remak1==1">
									<view class="content" @click="go(userid,lastUserName,items.nickname,items.id,1)">
										<view class="text-grey">{{item.username}}({{item.remak2}})
											<!-- <text class="text-abc">{{items.name}}</text>君 -->
										</view>
										<view class="text-gray text-sm" v-text="displayTheData(item.id)">

										</view>
									</view>
									<!-- 在线离线标识 -->
									<text class="cuIcon-radioboxfill text-green" style="margin-right: 3px;">在线</text>
								</view>

								<view v-if="item.remak1==0">
									<view class="content" @click="go(userid,lastUserName,item.nickname,item.id,0)">
										<view class="text-grey">{{item.username}}({{item.remak2}})
											<!-- <text class="text-abc">{{items.name}}</text>君 -->
										</view>
										<view class="text-gray text-sm" v-text="displayTheData(item.id)">

										</view>
									</view>

									<text class="cuIcon-radioboxfill text-gray" style="margin-right: 3px;">离线</text>
								</view>
							</view>
						</view>

						<!-- <view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
		            			<view class="padding"></view>
		            			<view class="cu-list menu-avatar no-padding" >
		            				<view class="cu-item"   @tap="common.navTo('/components/mine/addressBook/chat?name='+item+'&send='+send+'&receive='+receive+'&sendname='+sendname+'&receivename='+receivename)">
		            					<view class="cu-avatar round lg"></view>
		            					<view class="content" >
		            						<view class="text-grey">{{item.name}}</view>
		            						
		            					</view>
		            				</view>
		            			</view>
		            		</view> -->
					</block>

				</view>

				<!-- 通讯列表 -->

				<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
				 :scroll-with-animation="true" :enable-back-to-top="true" v-if="play">
					<!-- <block v-for="(item,index) in list" :key="index"> -->
					<!-- 控制侧导航栏 -->
					<!-- <view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name"> -->
					<!-- <view class="padding">{{item.name}}</view> -->
					<view class="cu-list menu-avatar no-padding">
						<!-- <view class="cu-avatar">{{item.name}}</view> 字母开头显示 -->
						<!-- 将汉字以当前字母开头的遍历 -->
						<view class="cu-item" v-for="(items,sub) in userList" :key="sub">
							<view v-if="items.remak1==1">
								<view class="content" @click="go(userid,lastUserName,items.nickname,items.id,1)">
									<view class="text-grey">{{items.username}}({{items.remak2}})
										<!-- <text class="text-abc">{{items.name}}</text>君 -->
									</view>
									<view class="text-gray text-sm" v-text="displayTheData(items.id)">

									</view>
								</view>
								<!-- 在线标识 -->
								<text class="cuIcon-radioboxfill text-green" style="margin-right: 3px;">在线</text>
							</view>

							<view v-if="items.remak1==0">
								<view class="content" @click="go(userid,lastUserName,items.nickname,items.id,0)">
									<view class="text-grey">{{items.username}}({{items.remak2}})
										<!-- <text class="text-abc">{{items.name}}</text>君 -->
									</view>
									<view class="text-gray text-sm" v-text="displayTheData(items.id)">

									</view>
								</view>
								<!-- 离线标识 -->
								<text class="cuIcon-radioboxfill text-gray" style="margin-right: 3px;">离线</text>
							</view>

						</view>
					</view>
					<!-- </view>
			</block> -->
				</scroll-view>
				<!-- 侧导航栏 -->
				<!-- <view class="indexBar" :style="[{height:'calc(100vh - ' + CustomBar + 'px - 50px)'}]">
			<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
				<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur"> {{item.name}}</view>
			</view>
		</view> -->
				<!--选择显示  keyword-->
				<view v-show="!hidden" class="indexToast">
					<!-- {{listCur}} -->
				</view>

			</view>

		</scroll-view>
		<initial ref="initial"></initial>
	</view>
</template>

<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,
			drawer: drawer,
			plusDrawer: plusDrawer,
			mine: mine,
			chatindex: chatindex
		},
		data() {
			return {
				content1: '',
				but1: true,
				but2: false,
				userid: '',
				lastUserName: '',
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				listCurID: '',
				list: [],
				listCur: '',
				send: '1',
				receive: '2',
				hidden: true,
				play: true,
				sendname: 'ming',
				receivename: 'fang',
				search: '',
				timer: null,
				userList: {
					id: '',
					nickname: '',
					password: '',
					remak1: '',
					username: '',
					remak2: '',
				},
				biaos: 2,
				socketTask_getUserList: '',
				inconList: ["form", "favor", "question", "edit"],
				drawerList: [{
					"name": "聊天通讯"
				}, ],
				leftNavigationtitle: '我的功能分组',
				badge: 22,
				address: '',
				modalName: null,
				plusDrawerList: [],
				toggleid: 12,
				plusDrawerList: [],
				judge: 1,
				LastStatement: {
					content: '',
					receive: '',
					send: '',
					time: '',
					type: '',
				},
			};
		},
		created: function() {
			
			this.getUserList();
			this.drawerList = uni.getStorageSync('leftlist5');
			/* this.pinyin(); */
		},
		mounted() {
			this.getUserList();
			this.initial();
		},
		onLoad() {
		
			let list = [{}];
			for (let i = 0; i < 26; i++) {
				list[i] = {};
				list[i].name = String.fromCharCode(65 + i);
			}
			this.list = list;
			this.listCur = list[0];

		},
		onHide() {
			this.$refs.drawer.closeDrawer();
			this.hideModal();
		},
		onReady() {
			let that = this;
			/* uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
				that.boxTop = res.top
			}).exec();
			uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
				that.barTop = res.top
			}).exec(); */

			/* 
			this.pinyin(); */
		},
		computed: {
			sisStageIp: function() {
				return this.$store.state.wholeSituationBackStageIp;
			},
			sisStagePort: function() {
				return this.$store.state.wholeSituationBackStagePort;
			},
			backStageIp: function() {
				return this.$store.state.GlobalLocalIp;
			},
			backStagePort: function() {
				return this.$store.state.GlobalLocalPort;
			},
			windpowerstationNameToId: function() {
				return this.$store.state.windpowerstationNameToId;
			},
			userListData: function() {
				var search = this.search;
				if (!this.search) {
					return [];
				} else if (search) {
					return this.userList.filter(function(userList) {
						return Object.keys(userList).some(function(key) {
							return String(userList[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return this.products;

			},
			hasNoData() {
				return !this.list.length
			}
		},
		methods: {
			initial() {
				let userid = uni.getStorageSync('userid');
				this.theLastStatement(userid);
			},
			displayTheData(id) {
				// this.theLastStatement(id);
				// console.log(this.LastStatement);
				// if(this.LastStatement[0].type=="pic"){
				// 	return "[图片]";
				// }else{
				// 	return this.LastStatement[0].content;
				// }

				for (var i = 0; i < this.LastStatement.length; i++) {

					if (this.LastStatement[i].receive== id) {
						if(this.LastStatement[i].type=="pic"){
							return "[图片]";
						}else{
							return this.LastStatement[i].content;
						}		
					}


				};
			},
			changeState() {
				console.log("更改状态")
				this.but1 = true;
				this.but2 = false;
				this.judge = 1;
				//this.$set(this.judge,judge,1);
				//this.child('',1);
			},
			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;

				/* if(bool==0){
					
					 window.location.href="https://192.168.1.102:4397/websocket/usercontroller/viewoffline?send="+userid+"&receive="+id+"&sendname="+lastUserName+"&receivename="+nickname;
				}
				if(bool==1){
					 window.location.href="https://192.168.1.102:4397/websocket/usercontroller/view?send="+userid+"&receive="+id+"&sendname="+lastUserName+"&receivename="+nickname;
				} */
				this.but1 = false;
				this.but2 = true;
				this.child(id, bool);

				/*
				 let _this=this;
				 if(bool==0){
				 	
				 	 window.location.href="https://192.168.1.102:4397/websocket/usercontroller/viewoffline?send="+userid+"&receive="+id+"&sendname="+lastUserName+"&receivename="+nickname;
				 }
				 if(bool==1){
				 	 window.location.href="https://192.168.1.102:4397/websocket/usercontroller/view?send="+userid+"&receive="+id+"&sendname="+lastUserName+"&receivename="+nickname;
				 }
				 */
			},
			child(id,bool) {
				///this.$refs.initial.childMethod(id,bool);
				this.judge = 0;
			},
			accordingOut() {
				this.play = true;
				this.search = '';
			},
			accordingTo() {
				this.play = false;

			},
			pinyin(str) {
				var l = pinyin.getSpell(str).substring(0, 1);
				console.log(l);
			},
			/* handleCityClick (city) {
			     this.changeCity(city)
			     this.$router.push('/')
			   }, */
			closeFrame: function() {
				this.count = this.count + 1;
				if (this.isFrameShow) {
					this.isFrameShow = false;
					this.sanJiao = 'sanJiaoDown';
				}
			},
			async getUserList() {
				let _this = this;
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask_getUserList = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: 'ws://' + this.sisStageIp + ':' + this.sisStagePort + '/websocket/pageNumber_4/functionNumber_3/all',
					success(data) {
						console.log(data);
					}
				});
				/* let windpowerstationid = uni.getStorageSync('windpowerstationName'); */
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask_getUserList.onOpen(res => {
					console.log('WebSocket连接正常打开中...！');
					this.is_open_socket = true;

					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask_getUserList.onMessage(res => {
						/* _this.windpowerstationdetail.getUserList = JSON.parse(res.data); */
						_this.lastUserName = uni.getStorageSync('gyeeusername');
						_this.userid = uni.getStorageSync('userid');
						let templist=JSON.parse(res.data);
						_this.userList=[];
							for (var i = 0; i < templist.length; i++) {
								
								if(templist[i].id!=_this.userid)
								{
									_this.userList.push(templist[i]);		
								}
								
							
						};
						//_this.userList = JSON.parse(res.data);
						
					});
				});
			},
			//获取最后一条语句  '/websocket/chatDetailController/selectLastInfoByUserId?userid='+id
			async theLastStatement(id) {
				let _this = this;
				uni.request({
					url: 'http://' + this.sisStageIp + ':' + this.sisStagePort +
						'/chatDetailController/selectLastInfoByUserId?userid=' + id,
					data: {},
					method: 'GET',
					success: function(res) {
						_this.LastStatement = res.data;
					},
					fail: () => {
						_this.tips = '网络错误，小程序端请检查合法域名';
					},
				});

			},
			//获取文字信息
			getCur(e) {
				this.hidden = false;
				this.listCur = this.list[e.target.id].name;
			},
			setCur(e) {
				this.hidden = true;
				this.listCur = this.listCur
			},
			//滑动选择Item
			tMove(e) {
				let y = e.touches[0].clientY,
					offsettop = this.boxTop,
					that = this;
				//判断选择区域,只有在选择区才会生效
				if (y > offsettop) {
					let num = parseInt((y - offsettop) / 20);
					this.listCur = that.list[num].name
				};
			},

			//触发全部开始选择
			tStart() {
				this.hidden = false
			},

			//触发结束选择
			tEnd() {
				this.hidden = true;
				this.listCurID = this.listCur
			},
			indexSelect(e) {

				let that = this;
				let barHeight = this.barHeight;
				let list = this.list;
				let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
				for (let i = 0; i < list.length; i++) {
					if (scrollY < i + 1) {
						that.listCur = list[i].name;
						that.movableY = i * 20
						return false
					}
				}
			}
		},

	}
</script>

<style>
	body {
		font-family: '方正兰亭细黑_GBK';
		font-size: 20px;
		color: silver;
		background: #000;
	}

	@font-face {
		font-family: '方正兰亭细黑_GBK';
		src: url(../../../static/fzltxh.TTF);
	}

	page {
		background-color: #1f1f1f;
		font-family: '方正兰亭细黑_GBK';
		overflow-x: hidden;
	}

	.indexes {
		position: relative;
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}

	.bg-white {
		background-color: #242424;
	}

	.cu-list,
	.menu-avatar>.cu-item {
		background-color: #242424;
	}

	.cu-avatar {
		height: 20px;
		width: 20px;

	}

	.mar_t {
		margin-top: 50px;
	}

	.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>