xytSk-App/pages/addressBook/follow.vue

<template>
	<view :style="{height:'100vh',overflow:'hidden',background:'#f7f7f7'}">
		<u-status-bar></u-status-bar>
		<u-navbar
			title="关注" 
			:autoBack="true" 
			:titleStyle="{
				fontSize:'18px'
			}" 
			:height='44'
			:safeAreaInsetTop=true
			leftIconSize='20'
			leftIconColor='rgb(153, 153, 153)'
		>
		</u-navbar>
		<div class="searchBar">
			<u-search
				placeholder="请输入姓名或手机号" 
				shape="square"
				:showAction="false"
				height="35"
				v-model="keyword"
			></u-search>
		</div>
		
		<div class="mybody">
			<div :style="{display:'flex',alignItems:'center',height:'60px'}" v-for="(item,index) in getList">
				<!-- <u--image :style="{margin:'0 30px'}" :src="'../../static/images/filter.png'" width="22px" height="22px"></u--image> -->
				<div class="personItemIcon"><text>{{item.userName.slice(0, 1)}}</text></div>
				<div class="personItemRow_right">
					<div class="personItemRow_right_top">
						<rich-text :style="{width:'100px'}" :nodes="highlightKeyword(item.userName, keyword)"></rich-text>
						<rich-text :style="{flex:'1'}" :nodes="highlightKeyword(item.phone, keyword)"></rich-text>
					</div>
					<div class="personItemRow_right_bottom">
						<text :style="{fontSize:'12px',color:'rgba(0, 0, 0, 0.4)'}">{{item.duty}}</text>
					</div>
				</div>
				<div class="personItemRow_right2">
					<u-icon v-if="item.isMyAttendee" name="star-fill" color="#f5dc4d" size="24" @click="follow(false,item.userId)"></u-icon>
					<u-icon v-if="!item.isMyAttendee" name="star" color="#f5dc4d" size="24" @click="follow(true,item.userId)"></u-icon>
					<u-icon name="phone" size="24" :style="{margin:'3px 10px 0 10px'}" @click="callNum(item.phone)"></u-icon>
				</div>
			</div>
			
			<div :style="{height:'100px'}"></div>
		</div>
	</view>
</template>

<script>	
	import moment from 'moment'
	export default {
		data() {
			return {
				keyword:'',
				list:[]
			};
		},
		computed: {
			getList() {
				if(this.keyword){
					return [...this.list].filter(o=>o.userName.indexOf(this.keyword)!==-1)
				}else{
					return [...this.list]
				}
			}
		},
		methods: {
			highlightKeyword(text, keyword) {
			      const highlightedText = text.replace(new RegExp(keyword, 'gi'), match => {
			        return `<span style="color: red;">${match}</span>`;
			      });
			      return highlightedText;
			},
			async getData () {
				try {
				  const res = await uni.$http.get('/gunshiApp/xfflood/addressbook/my/attendee')
				  this.list = res.data.data
				} catch (e) {
				  uni.$showMsg()
				}
			},
			async follow (flag,id) {
				let url = flag?'/gunshiApp/xfflood/addressbook/attendee/add':'/gunshiApp/xfflood/addressbook/attendee/cancel'
				const params = {
					addUserId:id
				}
				try {
				  const res = await uni.$http.post(url,params)
				  if(res.data.code === 200){
					  //关注成功
					  this.getData()
				  }
				} catch (e) {
				  uni.$showMsg()
				}
				
			},
			callNum(num) {
				uni.makePhoneCall({
					phoneNumber: num //仅为示例
				});
			}
		},
		created() {
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
.searchBar{
	background-color: #ffffff;
	margin-top: 44px;
	height: 60px;
	display: flex;
	padding: 0 10px;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
.mybody{
	background-color: #ffffff;
	margin: 5px 5px;
	padding: 5px 0px;
	height: calc( 100vh - 100px );
	overflow: scroll;
}
.personItemIcon{
	width: 40px;
	height:40px;
	background-color: rgb(53, 133, 249);;
	border-radius: 20px;
	margin: 0 20px;
	text-align: center;
	line-height: 40px;
	color: #ffffff;
}
.personItemRow_right{
	height: 100%;
	flex: 1;
	border-bottom: 1px solid #eee;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.personItemRow_right2{
	width: 100px;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	border-bottom: 1px solid #eee;
}
.personItemRow_right_top{
	margin-top: 5px;
	display: flex;
	justify-content: flex-start
}
</style>