unimall/unimall-app/pages/home/home.vue

<template>
	<view class="content">
		<block v-if='PageCur=="msg"'>
			<!-- #ifdef MP-WEIXIN -->
			<u-navbar :is-back="false" title="消息" :background="{ background: '#F6F7F8'  }" title-color="#404133" :border-bottom="false" z-index="1001">
				<view class="slot-wrap">
						<text class = 'tip_text cuIcon-back' @click='back' ></text>
				</view>
				<view class="slot-wrap" slot="right">
					<u-icon name="plus-circle" size="34" @click="showSelect"></u-icon>
				</view>		
			</u-navbar>
			<!-- #endif -->
			<selectInput :list="selectList" :list-key="'name'" :show.sync="selectShow" @on-select="checkSelect" @close="closeSelect" />
			<searchInput :searchType="1"/>
			<u-swipe-action style="margin-right: 1px;" :show="item.show" v-for="(item, index) in chatItem" :index="index" btn-width="160" :key="item.id" @click="click" @open="open" :options="options">
				<chatItem @linkTo="linkTochat" :value="item" :index="index" :voiceIcon="true"></chatItem>
			</u-swipe-action>
		</block>
		<block v-if='PageCur=="contract"'>
			<!-- #ifdef MP-WEIXIN -->
			<u-navbar :is-back="false" title="通讯录" :background="{ background: '#F6F7F8'  }" title-color="#404133" :border-bottom="false" z-index="1001">	
			<view class="slot-wrap">
					<text class = 'tip_text cuIcon-back' @click='back'></text>
			</view>
			</u-navbar>
			<!-- #endif -->
				<searchInput :searchType="2"/>
				<addressBook :list="firendItem" :scrollTop="scrollTop" :isShowMenu="true" @linkTo="linkToCard"></addressBook>	
		</block>
		<block v-if='PageCur=="find"'>
			<!-- #ifdef MP-WEIXIN -->
			<u-navbar :is-back="false" title="发现" :background="{ background: '#F6F7F8'  }" title-color="#404133" :border-bottom="false" z-index="1001">	
			<view class="slot-wrap">
					<text class = 'tip_text cuIcon-back' @click='back' ></text>
			</view>
			</u-navbar>
			<!-- #endif -->
			<u-cell-group>
				<u-cell-item  title="粮友圈" :title-style="{marginLeft:'30rpx',fontWeight:'800'}" @tap="linkToMoment">
					<u-icon slot="icon" name="moments" color="#409eff" size="40"></u-icon> 
				</u-cell-item>
			</u-cell-group>	
			<view style="height: 10rpx;"></view>
			<u-cell-group>
				<u-cell-item  title="扫一扫" :title-style="{marginLeft:'30rpx',fontWeight:'800'}" @tap="linkToScan">
					<u-icon slot="icon" name="scan" color="#409eff" size="40"></u-icon> 
				</u-cell-item>
			</u-cell-group>	
			<view style="height: 10rpx;"></view>
			<view class="" v-for="(item,index) in linkItem" :key="index">
				<u-cell-group>
					<u-cell-item  :title="item.title" :title-style="{marginLeft:'30rpx',fontWeight:'800'}"  @tap="linkTo(item,index)">
						<u-icon slot="icon" :name="item.icon" :color="item.color" size="40"></u-icon> 
					</u-cell-item>
				</u-cell-group>
				<view v-if="index!=linkItem.length" class="" style="height: 10rpx;"></view>
			</view>
		</block>
		<block v-if='PageCur=="my"'>
			<!-- #ifdef MP-WEIXIN -->
			<u-navbar :is-back="false" title="　" :border-bottom="false">
				<view class="slot-wrap">
					<text class = 'tip_text cuIcon-back' @click='back' ></text>
				</view>
				<view class="u-flex u-row-right" style="width: 100%;">
					<view class="camera u-flex u-row-center">
						<u-icon @tap="linkToMoment" name="camera-fill" color="#000000" size="48"></u-icon>
					</view>
				</view>
			</u-navbar>
			<!-- #endif -->
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30" @tap="linkToPerson">
				<view class="u-m-r-10">
					<u-avatar mode="square" :src="userData.user.avatar" size="140"></u-avatar>
				</view>
				<view class="u-flex-1">
					<view class="u-font-18 u-p-b-20">{{userData.user.realname}}</view>
					<view class="u-font-14 u-tips-color">积分: {{userData.user.money}}</view>
				</view>
				<view class="u-m-l-10 u-p-10">
					<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
				</view>
			</view>
			
			<view class="u-m-t-20">
				<u-cell-group>
					<u-cell-item @tap="linkTomy(index)" v-for="(item, index) in groupList" :key="index" :title="item.title" :title-style="{ marginLeft: '30rpx' ,fontWeight:'800'}">
						<u-icon slot="icon" :name="item.icon" :color="item.color" size="40"></u-icon>
					</u-cell-item>
				</u-cell-group>
			</view>
			
			<view class="u-m-t-20">
				<u-cell-group>
					<u-cell-item @click="linkToSetting" title="设置" :title-style="{ marginLeft: '30rpx' ,fontWeight:'800'}">
						<u-icon slot="icon" name="setting" color="#409eff" size="40"></u-icon>
					</u-cell-item>
				</u-cell-group>
			</view>
		</block>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view :class="PageCur=='msg'?'action text-pink':'action text-gray'" @click="tabClick" data-cur="msg">
				<view :class="PageCur=='msg'?'cuIcon-message':'cuIcon-message'"></view> 消息
			</view>
			<view :class="PageCur=='contract'?'action text-pink':'action text-gray'" @click="tabClick" data-cur="contract">
				<view :class="PageCur=='contract'?'cuIcon-addressbook':'cuIcon-addressbook'"></view> 通讯录
			</view>
			<view :class="PageCur=='find'?'action text-pink':'action text-gray'" @click="tabClick" data-cur="find">
				<view :class="PageCur=='find'?'cuIcon-friendfill':'cuIcon-friendfill'"></view> 发现
			</view>
			<view :class="PageCur=='my'?'action text-pink':'action text-gray'" @click="tabClick" data-cur="my">
				<view :class="PageCur=='my'?'cuIcon-people':'cuIcon-people'"></view> 我的
			</view>
		</view>
	</view>
</template>

<script>

import searchInput from '@/components/searchInput/index.vue';
import selectInput from '@/components/selectInput/selectInput.vue';
import chatItem from '@/components/chatItem.vue';
import addressBook from '@/components/addressBook.vue';
import { openFSqlite , createFSQL, selectFSQL, addFSQL } from '../../util/f.js'
import {  
        mapState 
    } from 'vuex'; 
export default {
	components: { searchInput, selectInput,chatItem, addressBook},
	
	data() {
		return {
			selectShow: false,
			PageCur: "msg",
			options: [
				{
					text: '置顶',
					style: {
						backgroundColor: '#b4b4b4',
						fontSize: '24rpx'
					}
				},
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d',
						fontSize: '24rpx'
					}
				}
			],
			scrollTop: 0,
			selectList: [
				{ id: '1', name: '添加粮友', icon: 'man-add-fill' },
				{ id: '2', name: '扫一扫', icon: 'scan' },
				{ id: '3', name: '收付款', icon: 'fingerprint' }
				],
			pic:'',
			show:true,
			tar:{
					color:'#07A7E3',
					id:4
			},
			groupList: [
				{
					title: '相册',
					color: '#50E3C2',
					icon: 'photo'
				},
				{
					title: '表情',
					color: '#ff9900',
					icon: 'star'
				}
			],
			$url:'',
			userInfo:[]
		}
	},
	watch:{
        pushRes: function(value){
			this.getChats(false)
		},
		PageCur: function(value){
			if(value == 'msg'){
				this.getChats(false)
			}
		}
	},
	mounted() {
		this.getChats(false)
	},
	computed: {
		...mapState(['userInfo'])
	},
	onShow() {
		this.userInfo =  uni.getStorageSync("userInfo")
		console.log(this.userData.user.realname,this.userInfo.nickname)
		// if(this.userData.user.realname == this.userInfo.nickname){
		// 	var context = this.userData.user.realname
		// 	var type = 0
		// 	this.$u.route({
		// 		url: 'pageC/chat/updateGroupInfo',
		// 		params: { context, type }
		// 	});
		// }
		this.$socket.showLoginDialog = false
		uni.hideLoading()
		if(this.PageCur=='msg'){
			this.getChats(false)
		}else if(this.PageCur=='contract'){
		 	this.getFriends(false)
		}else if(this.PageCur=='find'){
			this.querylinkItem(false)
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad(){	
		uni.setTabBarItem({
		  index: 1,
		  pagePath:'pages/addressBook/addressBook'
		})
	},
	onPullDownRefresh() {
		if(this.PageCur=='msg'){
			this.getChats(true)
		}else if(this.PageCur=='contract'){
			this.getFriends(true)
		}else if(this.PageCur=='find'){
			this.querylinkItem(true)
		}
	},
	methods: {
		back(){
			uni.switchTab({
				url:'/pages/sale/information'
			})
		},
		tabClick: function(e) {
			this.PageCur = e.currentTarget.dataset.cur
			if(this.PageCur=='msg'){
				this.getChats(false)
			}else if(this.PageCur=='contract'){
			 	this.getFriends(false)
			}else if(this.PageCur=='find'){
				this.querylinkItem(false)
			}
		},
		linkTochat(item){
			this.$u.vuex('chatObj', item)
			this.$u.route({
				url: 'pageC/chat/chat',
				params: {}
			});
		},
		getChats(freshFlag){
			if(this.userData.user==undefined){
				return;
			}
			uni.showLoading({
				title: '正在加载'
			})
			this.$socket.queryChats('', this.userData.user.operId,(res) => {
				if (res.success) {
				  res.chats.sort((a, b) => { return b.lastOpenTime - a.lastOpenTime });
				  this.$u.vuex('chatItem', res.chats);
				}
				if(freshFlag){
					uni.stopPullDownRefresh();
				}
				uni.hideLoading()
			});
		},
		//打开或者关闭弹窗
		showSelect(){
			this.selectShow = !this.selectShow;
		},
		//action 点击事件
		click(index,index1) {
			if(index1==0){
				this.chatItem[index].isTop = true;
				// TODO 留空
			}else {
				this.chatItem.splice(index, 1);
				let obj = this.chatItem[index==this.chatItem.length?index-1:index];
				this.$socket.delChat(this.userData.user.operId, obj.id, (res) => {})
			}
		},
		//action 打开事件
		open(index) {
			this.chatItem[index].show = true;
			this.chatItem.map((val, idx) => {
				if (index != idx) this.chatItem[idx].show = false;
			});
		},
		//点击导航栏自定义按钮
		onNavigationBarButtonTap({ index }) {
			if (index == 0) {
				this.showSelect()
			}
		},
		//关闭弹窗
		closeSelect(){
			//小程序兼容
			this.selectShow = false;
		},
		getFriends (freshFlag) {
		 
		 uni.showLoading({
		 	title: '正在加载'
		 })
		  // #ifndef H5
		  var list = [];
		  selectFSQL(this.userData.user.operId).then(res=>{
		  	this.indexList.forEach(name=>{
		  		var members = [];
		  		res.forEach(f=>{
		  			if(f.name===name){
		  				members.push(f);
		  			}
		  		});
		  		let obj = {
		  			name: name,
		  			members: members
		  		};
		  		list.push(obj);
		  	});
		  	this.$u.vuex('firendItem', list);
			if(freshFlag){
				uni.stopPullDownRefresh();
			}
			uni.hideLoading()
		  });
		  // #endif	
		  // #ifndef APP-PLUS
		  this.$socket.listGuests(this.userData.user.operId, res => {
			this.$u.vuex('firendItem', res.response.data)
			if(freshFlag){
				uni.stopPullDownRefresh();
			}
			uni.hideLoading()
		  })
		  // #endif
		},
		linkToCard({id}){
			console.log("linkToCard")
			this.$u.route({
				url: 'pageC/businessCard/businessCard',
				params:{ id: id, source: 1}
			});
		},
		//扫码
		checkSelect(index) {
			if (index == 0) {
				this.$u.route({
					url:"pageD/search/search",
					params: {searchType: 0}
				})
			}
			else if (index == 1) {
				//扫码
				const t = this
				uni.scanCode({
					success: function(res) {
						uni.vibrateLong();
						console.log('条码内容：' + res.result);
						let uId = res.result
						if (uId==t.userData.user.operId){
							uni.showToast({
								icon:'none',
								title:'不能添加自己为好友'
							})
						} else {
							t.$u.route({
								url: 'pageC/businessCard/businessCard',
								params:{ id: uId, source: 2}
							})
						}
					}
				});
			}
		},
		// 发现
		querylinkItem(freshFlag){
			this.$socket.getLinks(this.userData.user.operId, res=>{
				this.$u.vuex('linkItem',res.response.data)
				if(freshFlag){
					uni.stopPullDownRefresh();
				}
			});
		},
		linkToMoment(){
			this.$u.route({
				url:'pageC/firendCircle/firendCircle'
			})
		},
		linkToScan(){
			uni.scanCode({
				success: function(res) {
					uni.vibrateLong();
					let uId = res.result
					if (uId==t.userData.user.operId){
						uni.showToast({
							icon:'none',
							title:'暂不支持添加自己'
						})
					} else {
						t.$u.route({
							url: 'pageC/businessCard/businessCard',
							params:{ id: uId, source: 2}
						})
					}
				}
			});
		},
		linkTo(item, index){
			this.$u.route({
				url:'pageA/webview/webview',
				params:{url:item.url,name:item.title}
			})
		},
		// 我
		linkTomy(index) {
			const url = index == 1 ? '/pageC/my/face' : '/pageC/my/photo'
			this.$u.route({
				url: url
			});
		},
		linkToSetting() {
			this.$u.route({
				url: 'pageC/setings/setings'
			});
		},
		linkToPerson() {
			this.$u.route({
				url: 'pageC/my/person'
			});
		},
		previewImage() {
			let current =  this.userData.user.avatar
			uni.previewImage({
				current,
				urls: [current],
				// #ifndef MP-WEIXIN
				indicator: 'number'
				// #endif
			});
		}
	},
};
</script>
<style lang="scss" scoped>
.content {
	height: 100%;
	background:#fff;
}
.tarbar {
	width: 100%;
	height: 96rpx;
	display: flex;
	justify-content: space-around;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0;
	z-index: 100;
	font-size: 26rpx;
	color: #999999;
}

	.tarbar view {
		text-align: center;
	}
	.cuIcon-back{
		font-size:45rpx;
		margin-left:10rpx;
	}
</style>