onecric_h5/pages/Live/attention.vue

<template>
	<view class="contain">
		<view class="select-head">
			<u-navbar bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true">
				<view slot="center" class="navbar-center" style="width: 700rpx;margin-left: 70rpx">
					 <u-tabs 
					 :list="list1" 
					 lineWidth="126rpx"
					 @click="changeTab" 
					 lineHeight="0" 
					 lineColor="#DC3C23" 
					 :scrollable="false"   
					 :activeStyle="{color:'#fff',fontSize:'34rpx'}" 
					 :inactiveStyle="{color:'#fff',fontSize:'34rpx'}
					 "></u-tabs>
				</view>
			</u-navbar>
			<!-- <view class="match-head-tab" v-if="list1Index == 0">
				 <u-tabs 
				 :list="list2" 
				 lineWidth="126rpx"
				 @click="changeTab2" 
				 lineHeight="2" 
				 lineColor="#DC3C23" 
				 :scrollable="false"   
				 :activeStyle="{color:'#DC3C23',fontSize:'32rpx'}" 
				 :inactiveStyle="{color:'#fff',fontSize:'32rpx'}
				 "></u-tabs>
			</view> -->
		</view>
		<view class="main">
			<view>
				<view class="list-item flex-start" v-for="(item,index) in list" :key="index">
					<!-- actives:item!==2 -->
					<div class="avatar-box">
						<image :src="item.avatar || '/static/image/common/teams_avatar_ico@2x.png'" mode="aspectFill" class="avatar"></image>
						<img v-if="item.is_live == 0" class="img" src="/static/image/match/live.png" alt="">
						<img v-if="item.is_live == 1" class="img" src="/static/image/match/live-actives.png" alt="">
					</div>
					<view class="list-item-content c9 size24">
						<view class="mg-tp6">
							<text>{{ $t('live.lab37') }}: {{item.attention}}</text>
							<view class="size28 c3">{{item.user_nickname}}</view>
						</view>
						<view class="flexcenter flex-col align-start">
						<!-- <view class="flexcenter flex-col align-start"> -->
							<!-- <view class="paid size28" v-if="list1Index == 0 || item.is_attention == 0" @click="setAttention(1,item)">
								Paid attention to
							</view> -->
							<!-- <text v-if="item.is_attention == 1">Number of fans: 44</text> -->
							<!-- <view class="guanzhu-box" @click="setAttention(item)">
								<image src="/static/image/match/guanzhu.png" mode="widthFix" class="guanzhu-icon mg-rt12"></image>
								<text class="size28 cfff">follow</text>
							</view> -->
							<view class="Followed" @click="setAttention(item)">
								<!-- Followed -->
								{{ $t('live.lab38') }}
							</view>
						</view>
					</view>
				</view>
				
				<u-empty
					v-if="list && list.length == 0"
					mode="data"
					width="474"
					height="312"
					textSize="28"
					marginTop="100"
					:text="$t('common.nodata')"
					icon="/static/image/common/nodata.png"
				>
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1Index:0,
				list1:[
					{
						name: this.$t('live.title4'),
					},
					// {
					// 	name: this.$t('live.title5'),
					// },
				],
				type:2,
				list:[]
			};
		},
		onReady() {
			this.getList()
		},
		computed:{
			info() {
				return this.$store.state.info
			}
		},
		methods:{
			changeTab(e) {
				this.list1Index = e.index
				return
				if(e.index == 1) {
					this.watchlistList()
				}else {
					this.getList()
				}
			},
			changeTab2(e) {
				this.type = e.index
				this.getList()
			},
			getList() {
				let index = this.list1Index;
				uni.showLoading({
					title:this.$t('common.lab')
				})
				uni.$u.http.get('api/User/attentionList',{params:{type: 0}}).then(res=>{
					this.list = res.data || []
					uni.hideLoading()
				}).catch(res=>{})
			},
			watchlistList() {
				let index = this.list1Index;
				uni.showLoading({
					title:this.$t('common.lab')
				})
				uni.$u.http.get('api/Live_streaming/getUserReserveLiveList',{params:{type:0,uid:this.info.id}}).then(res=>{
					this.list = res.data || []
					uni.hideLoading()
				}).catch(res=>{})
			},
			/* type == 1取消 2关注 */
			setAttention(item){
				uni.showLoading({
					title: this.$t('common.lab'),
				});
				uni.$u.http.post('/api/Member/attention',{id:item.followed_id}).then(res=>{
          uni.hideLoading();
					this.getList()
				}).catch(res=>{})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F3F3F7;
	}
	
	.contain{
		min-height: 100vh;
		background-color: #F3F3F7;
	}
	.navbar-center{
		width: 520rpx;
	}
	.select-head {
		position: sticky;
		top: 0;
		z-index: 99;
		background-color: $color1;
		.select-tab {
			padding: 0 28rpx;
			margin-top: 20rpx;
		}
	}
	.match-head-tab {
		padding: 0 52rpx;
		// margin-top: 49rpx;
	}
	.main{
		padding: 24rpx 28rpx;
		.list-item{
			margin-bottom: 24rpx;
			padding: 24rpx 28rpx;
			background-color: #fff;
			border-radius: 12rpx;
			.avatar-box {
				position: relative;
				margin-right: 20rpx;
				width: 96rpx;
				.img {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 77%;
				}
			}
			.avatar{
				display: block;
				width: 96rpx;
				height: 96rpx;
				border-radius: 200rpx;
			}
			.live{
				position: relative;
				&:before{
					content: url(@/static/image/match/live.png);
					width: 74rpx;
					height: 28rpx;
					position: absolute;
					bottom: -12rpx;
					margin-left: -50%;
					left: 50%;
				}
			}
			.actives{
				&:before{
					content: url(@/static/image/match/live-actives.png);
					width: 74rpx;
					height: 28rpx;
					position: absolute;
					bottom: -12rpx;
					margin-left: -50%;
					left: 50%;
				}
			}
			.list-item-content{
				flex: 1;
				display: flex;
				justify-content: space-between;
				.paid{
					padding: 8rpx 15rpx;
					border-radius: 12rpx;
					border: 2rpx solid #ccc;
				}
				.guanzhu-box{
					display: flex;
					justify-content: center;
					align-items: center;
					background: url(@/static/image/match/right-bg.png)center center/ 100% 100% no-repeat;
					width: 180rpx;
					height: 59.54rpx;
					.guanzhu-icon{
						width: 28.82rpx;
						height: 25.39rpx;
					}
				}
				.Followed {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 180rpx;
					height: 59.54rpx;
					color: #fff;
					background-color: #ccc;
					border-radius: 8rpx;
				}
			}
		}
		
	}
</style>