hs_hzl_uniapp_ml/pageA/msg/index.vue

<template>
	<view class="top">
		<view style="margin: 20px 15px 15px 15px; border: 1px solid #a4a4a4;border-radius: 10px;">
			<u--input v-model="text" placeholder="姓名 / 手机号" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399" @focus="searchFocus" @blur="searchBlur"
				@input="doSearch()">
			</u--input>
		</view>
		<view v-if="showSearch">
			<u-row v-for="item in groupList" customStyle="margin: 5px 0" @click="toGroupAbPage(item.groupMember)">
				<u-col span="2">
					<view class="demo-layout bg-purple-light">
						<image src="../../static/img/msg/gzqz.png" style="margin-left: 10px;width: 50px;height: 50px;">
						</image>
					</view>
				</u-col>
				<u-col span="9">
					<view class="demo-layout bg-purple">
						<u-text :text="item.groupName" size="14"></u-text>
					</view>
				</u-col>
			</u-row>
		</view>
		<view v-if="showSearch">
			<view style="color: #a4a4a4;padding: 5px;background-color: #ffffff;">部门分类</view>
			<uni-list v-for="item in bmList">
				<uni-list-item :clickable="true" @click="toAbListPage(item.deptId)" :title="item.deptName" />
			</uni-list>
		</view>
		<view v-if="!showSearch" style="border-top: 1px solid #eeeeee;">
			<view class="row uni-flex uni-row" v-for="friend in result">
				<view style="padding: 5rpx 0 0 20rpx" @click="toVisitingCard(friend)">
					<u-text :text="friend.name+' '+friend.phone" size="18" color="#a5a5a5"></u-text>
				</view>
			</view>
			<view style="height: 40px;">

			</view>
		</view>
		<view style="height: 40px;">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: '',
				result: [],
				data: [],
				showSearch: true,
				BaseUrl: this.$BASE_URL,
				list: [],
				qiyes: [{
						id: 1,
						name: '中山大学',
						src: '../../static/img/tab-icon/me-active.png'
					},
					{
						id: 2,
						name: '阿里巴巴',
						src: '../../static/img/tab-icon/me-active.png'
					}
				],
				stars: [{
						id: 1,
						name: '1',
						src: '../../static/img/tab-icon/me-active.png'
					},
					{
						id: 2,
						name: '2',
						src: '../../static/img/tab-icon/me-active.png'
					}
				],
				friends: [],
				bmList: [],
				groupList: [],
				isSearch: false,
				searchCount: 0
			}
		},
		onLoad() {
			this.getBmData()
		},
		onShow() {
			this.getBmData()
			this.getabData()
			this.getGcData()
		},
		methods: {
			toVisitingCard(friend) {
				console.log(this.result)
				uni.setStorageSync('data', friend)
				uni.navigateTo({
					url: '/pageA/msg/visitingCard'
				})
			},
			doSearch(value) {
				let that = this
				let count = this.searchCount++
				if (value) {
					this.result = []
					this.data.forEach(i => {
						if (that.isSearch) {
							// setTimeout(() => {
							i.children.forEach(t => {
								if (that.isSearch) {
									var tc = t
									if (that.isZhOrNumber(value) === 'ZH') {
										if (tc.name.indexOf(value) != -1) {
											that.result.push(tc)
										}
									} else if (that.isZhOrNumber(value) === 'NUM') {
										if (value.length >= 2) {
											let zzbds = new RegExp("^" + value + "[0-9]+")
											if (zzbds.test(tc.phone)) {
												that.result.push(tc)
											}
										} else {
											this.result = []
										}
									}
								}
							})
							// }, 10)
						}
					})
				}
			},
			isZhOrNumber(str) {
				//验证是否是汉字
				var pattern = new RegExp("[\u4E00-\u9FA5]+");
				if (pattern.test(str)) {
					return 'ZH'
				}
				//验证是否是数字
				var pattern3 = new RegExp("[0-9]+");
				if (pattern3.test(str)) {
					return 'NUM'
				}
			},
			searchFocus() {
				this.showSearch = false
				this.isSearch = true
				this.result = []
			},
			searchBlur() {
				this.isSearch = false
				this.text = null
				this.showSearch = true
			},
			toAbListPage(deptId) {
				uni.setStorageSync("deptId", deptId)
				this.$goto("abList")
			},
			toGroupAbPage(data) {
				uni.setStorageSync("groupUserCode", data)
				this.$goto("groupAb")
			},
			bindClick(e) {
				console.log('点击item，返回数据' + JSON.stringify(e))
			},
			async getGcData() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/api/ci/gl?un=' + uni.getStorageSync('userInfo').userName,
					method: 'get',
				})
				if (res.code == 200) {
					this.groupList = res.data
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
			async getBmData() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/api/ci/abDepts?un=' + uni.getStorageSync('userInfo').userName + "&oc=" + uni
						.getStorageSync("orgInfo").organizationCode,
					method: 'get',
				})
				if (res.code == 200) {
					this.bmList = res.data
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				}
			},
			async getabData() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/api/ci/ab?un=all',
					method: 'get',
				})
				if (res.code == 200) {
					this.data = res.data
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fefefe;
	}

	.row {
		background: white;
		display: flex;
		width: 100%;
		height: 80rpx;
		border-bottom: 1px solid #eeeeee;

		.row_logo {
			width: 20%;
			display: flex;
			align-items: center;

			image {
				width: 80px;
				height: 80px;
				margin: auto;
				border-radius: 5px;
			}
		}

		.row_left {
			height: 100%;
			width: 40%;
			display: flex;
			align-items: center;

			border: {
				bottom: 1px solid #DDDDDD;
			}

			text {
				font-size: 16px;
				font-family: 'syht';
				display: block;
			}

		}

		.row_right {
			height: 100%;
			width: 40%;
			display: flex;
			align-items: center;

			border: {
				bottom: 1px solid #DDDDDD;
			}

			text {
				font-size: 16px;
				font-family: 'syht';
				display: block;
			}

		}



	}

	.row:last-child {
		.row_right {
			border: 0;
		}
	}

	.qu {
		.tip {
			margin: 3px 0;
			font-size: 14px;
			font-family: 'syht';

			text {
				margin-left: 13px;
			}
		}
	}
</style>