sisMobilePhone/components/mine/addressBook/addressBook.vue

<template>
	<view>
		<view @tap="closeFrame">
			<cu-custom bgColor="bg-gradual-sisBlack" :isBack="true">
				<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 search fixed" :style="[{top:CustomBar + 'px'}]">
			<view class="search-form round">
				<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">搜索</button>
			</view>
		</view>
		<!-- 搜索列表 -->
		<view class="search-content" ref="search" v-for="item in userListData">
		           
		            	<block>
		            		<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" >
			<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 2" :key="sub"  @tap="common.navTo('/components/mine/addressBook/chat?name='+list[index].name+'&send='+send+'&receive='+receive+'&sendname='+sendname+'&receivename='+receivename)">
							
							<view class="content" >
								<view class="text-grey">{{item.name}}yy<text class="text-abc">{{list[sub].name}}ll</text>君</view>
								<view class="text-gray text-sm">
									有{{sub}}条消息
								</view>
							</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>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				listCurID: '',
				list: [],
				listCur: '',
				send:'1',
				receive:'2',
				hidden: true,
				sendname:'ming',
				receivename:'fang',
				search:'',
				timer: null,
				userList:[],
				
				products:[
				        //假数据
				        {name:"数据1",date:'2018-01-04',depart:'泸化工1'},
				        {name:"数据2",date:'2018-01-25',depart:'泸化工2'},
				        {name:"数据3",date:'2018-02-10',depart:'泸化工3'},
				        {name:"数据4",date:'2018-03-04',depart:'泸化工4'},
				        {name:"数据5",date:'2018-05-24',depart:'泸化工5'},
				        {name:"数据6",date:'2018-10-29',depart:'泸化工6'}
				    	]
				
			};
		},
		created: function() {
			/* this.getUserList(); */
		},
		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];
		},
		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.getUserList(); */
		},
		computed: {
			
			userListData: function() {
			var search = this.search;
			 if(!this.search){
				 return [];
			 }
			else if (search) {
			return this.products.filter(function(product) {
			return Object.keys(product).some(function(key) {
			return String(product[key]).toLowerCase().indexOf(search) > -1
			})
			})
			}
			return this.products;
			},
		    hasNoData () {
		      return !this.list.length
		    }
		  },
		methods: {
			 handleCityClick (city) {
			      this.changeCity(city)
			      this.$router.push('/')
			    },
			closeFrame: function() {
				this.count = this.count + 1;
				if (this.isFrameShow) {
					this.isFrameShow = false;
					this.sanJiao = 'sanJiaoDown';
				}
			},
			getUserList: function() {
				let _this = this;
				
				uni.request({
					/* url: 'http://' + this.backStageIp + ':' + this.backStagePort + '/GyeeMatrixController/GyeeMatrixList?keyid=' +
						this.FDC, */
						url:'https://192.168.1.102:4397/websocket/usercontroller/selectUserList',
					data: {},
					method: 'GET',
					success: function(res) {
						_this.userList = res.data.data
						console.log(_this.userList);
						
			
					},
					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;
		
	}
	.indexes{
		margin-top: 50px;
	}
</style>