cyzh-SoundOfMusic-H5/pages/activityList/mine/introduction.vue

<template>
	<view>
		<block v-if="detail.urlsType == 0">
			<view class="bg-img flex align-center" :style="[{backgroundImage:'url('+ detail.urls +')'}]" style="height: 450upx;"></view>
		</block>
		<block v-else>
			<view class="bg-img flex align-center" :style="[{backgroundImage:'url('+ detail.cover +')'}]" style="height: 450upx;"></view>
		</block>
		<view class="container" style="margin: -60upx 20upx 20upx 20upx;">
			<view class="text-center">
				<view class="cu-avatar avatar round" :style="[{backgroundImage:'url('+ detail.loginWebVO.avatar +')'}]"></view>
				<view class="padding-tb-xs" style="font-size: 38upx;font-family: PingFang SC;font-weight: 800;color: #222222;">{{detail.personName}}</view>
				<view class="flex justify-center align-center">
					<view class="padding-right-sm" style="font-size: 30upx;font-family: PingFang SC;font-weight: 800;color: #222222;">{{+detail.hotValue}}</view>
					<!-- <view class="tag">
						<image src="/static/crown.png" style="width: 22upx;height: 19upx;margin-right: 10upx;"></image>
						<view class="text-sm text-white">热力榜第1</view>
					</view> -->
				</view>
			</view>
			<view style="padding: 0 60upx;">
				<view>{{detail.introduce}}</view>
			</view>
			<view class="flex justify-around padding">
				<button class="theme-bg-color text-white round cu-btn" style="width: 200upx;height: 70upx;">转发好友</button>
				<button class="theme-bg-color text-white round cu-btn" style="width: 200upx;height: 70upx;">生成海报</button>
			</view>
		</view>
		<view class="container margin-sm">
			<block v-for="(item, index) in boostList" :key="index">
				<view class="flex align-center justify-between padding-lr-sm">
					<view class="flex align-center" style="width: 40%;">
						<view class="padding-sm">
							<u-avatar :src="item.avatar" size="82"></u-avatar>
						</view>
						<view class="name">{{item.nickName}}</view>
					</view>
					<view class="text-sm" style="color: #757575;">{{item.typeSub == 1 ? '打榜' : '打赏'}}</view>
					<view class="name padding-right flex justify-end" style="width: 180upx;">{{+item.totalHotValue}}热力值</view>
				</view>
			</block>
		</view>
		<view style="height: 80rpx;" v-if="status">
			<u-divider bgColor="#f1f1f1;"  height="80">到底了</u-divider>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productId: '',
				detail: {},
				boostList: [],
				current: 1,
				size: 30,
				status: false,
			}
		},
		onLoad(options) {
			this.productId = options.id;
			this.getProductInfo();
			this.getHelpRecord();
		},
		onReachBottom() {
			if (this.boostList.length < this.current * this.size) {
				this.status = true;
			} else {
				this.current += 1;
				this.getHelpRecord();
			}
		},
		methods: {
			getHelpRecord() {
				this.$u.api.production.helpRecord({productId: this.productId, current: this.current, size: this.size}).then(res => {
					this.boostList = [...this.boostList,...res.records];
				})
			},
			getProductInfo() {
				this.$u.api.production.detail({id: this.productId}).then(res => {
					this.detail = res;
				})
			}
		}
	}
</script>

<style>
	.container {
		background-color: #ffffff;
		border-radius: 30upx;
		box-shadow: 10upx 10upx 60upx #d0d0d0;
	}
	.avatar {
		width: 145upx;
		height: 145upx;
		margin-top: -60upx;
	}
	.tag {
		padding: 0 10upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(90deg, #7355F4 0%, #573BE5 100%);
		margin-top: 8upx;
		border-radius: 30upx;
	}
	.name {
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
	}
</style>