teaching-uniapp/pages/dy/dy.vue

<template>
	<view>
		<statusBar :item="navBarData"></statusBar>
		<view class="bigBox" v-for=" i in items">
			<view class="content">
				<view class="left">
					<image class="image" src="../../static/mine/Avatar.png" mode=""></image>
					<view class="text">
						<view class="fwb-font">橘子很橘子</view>
						<view class="brief fz-font">
							<text class="fz-font" style="margin-right: 20rpx;">订阅了您的教研室</text> 
							<text class="fz-font">2023-04-01</text>
						</view>
					</view>
				</view>
				<view class="right">
					<button v-if="i.btn==1" class="btn sBtn-font" @click="btn1(i.tit)">回粉</button>
					<button v-else-if="i.btn==2" class="btn2 sBtn-font" @click="btn2(i.tit)">+关注</button>
					<button v-else class="btn3 sBtn-font" @click="btn3(i.tit)">相互关注</button>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			navBarData: {
				title: '新增订阅',
				btn: 1
			},
			items:[   //1回粉 2关注 3相互关注
				{tit:'hf',btn:1},
				{tit:'hf2',btn:1},
				{tit:'gz',btn:2},
				{tit:'hx',btn:3},
			]
		};
	},
	methods:{
		btn1(e){
			// console.log(e.btn==1);
			// console.log(e);
			this.items.find(i=>{
				if(i.tit==e) return i.btn=3
			})
		},
		btn2(e){
			this.items.find(i=>{
				if(i.tit==e) return i.btn=2
			})
		},
		btn3(e){
			this.items.find(i=>{
				if(i.tit==e) return i.btn=1
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.bigBox{
		background-color: white;
		width: 750rpx;
		padding: 24rpx 30rpx 24rpx 30rpx;
	}
.content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 690rpx;
	height: 88rpx;
	.left{
		display: flex;
		.image {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
		}
		.text{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;
			.brief{
				color: rgba(0, 0, 0, 0.6);
			}
		}
	}
	.right{
		.btn {
			background-color: #adadad;
			width: 144rpx;
			height: 56rpx;
			padding: 0;
			// padding: 8rpx 24rpx 8rpx 24rpx ;
			border-radius: 32rpx;
			// text-align: center;
			line-height: 56rpx;
			color: white;
		}
		.btn2{
			background-color: #0056a9;
			width: 144rpx;
			height: 56rpx;
			padding: 0;
			// padding: 8rpx 24rpx 8rpx 24rpx ;
			// border-radius: 42px;
			border-radius: 32rpx;
			// text-align: center;
			line-height: 56rpx;
			color: white;
		}
		.btn3{
			background-color: #d1e5fe;
			width: 144rpx;
			height: 56rpx;
			padding: 0;
			// padding: 8rpx 24rpx 8rpx 24rpx;
			border-radius: 32rpx;
			// text-align: center;
			line-height: 56rpx;
			color: #105eaa;
		}
	}
	

	
}
</style>