activitys-uniapp/pages/activity/activityDetail.vue

<template>
	<view>
		<video class="works-video" :src="activity.videoUrl"></video>
		<view style="padding: 20rpx 30rpx 50rpx 30rpx;background: white;">
			<view class="title" style="border-bottom: 1rpx solid #EEEEEE ;">
				<span class="bg-red work-no"> {{activity.productNo}}号</span> 
				<span class="work-title">{{activity.title}}</span>
				<view class="work-info-box">
					<image class="remen-icon" src="../../static/icon/remen.png"></image>
					<span class="vote-count">{{activity.voteCount}}</span>
					<span class="work-rank">排行榜第{{activity.rank}}名</span>
				</view>
			</view>
			<view style="font-size: 24rpx;color: #888888;padding: 30rpx 10rpx 20rpx 10rpx;">
				<u-parse :html="content"></u-parse>
			</view>
		</view>
		
		<view class="bg-white padding-30 margin-top-30 flex">
			<view class="basis-xs">
				<image style="width: 84rpx;height: 84rpx;" src="../../static/icon/ic_zhuanfa.png"></image>
			</view>
			<view class="basis-lg flex flex-direction">
				<view style="font-size: 28rpx;color: #353535;">转发邀请投票</view>
				<view style="font-size: 22rpx;color: #AEACAF;padding-top: 10rpx;">成功邀请一位好友投票，获得{{vuex_active_setting.voteAndHeatRate}}热力值</view>
			</view>
			<view class="flex justify-center align-center" style="color: #666666;flex-basis: 20%;">去邀请 ></view>
		</view>
		
		<view class="footer-bar">
			<u-button @click="showVote()" shape="circle" :custom-style="customStyle">给ta投票</u-button>
		</view>
	
		<vote-popup ref="votePopup"></vote-popup>
	</view>
</template>

<script>
	import votePopup from '../../components/alert/votePopup.vue'
	export default {
		components:{ votePopup },
		onLoad(props) {
			const { id } = props;
			this.$api.activity.getWorksDetail(id).then(res=> {
				this.activity = res.data.data;
				console.log(this.activity);
			})
		},
		computed:{
			content(){
				return decodeURIComponent(this.activity.content)
			}
		},
		data() {
			return {
				activity: {},
				customStyle: {
					color: 'white',
					background: "#E72226",
					fontSize: '32rpx',
					width: '500rpx',
					margin: '25rpx auto'
				}
			}
		},
		methods: {
			async showVote(){
				this.$refs.votePopup.showVote();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.works-video{
		width: 100%;
		height: 422rpx;
	}
	.title{
		padding: 20rpx;
		.work-no{
			padding: 5rpx 10rpx 5rpx 10rpx;
			border-radius: 7rpx;
		}
		.work-title{
			padding:  0 0 0 20rpx ;
			color: #353535;
			font-size: 32rpx;
			font-weight: 800;
		}
	}
	.work-info-box{
		padding: 30rpx 0 15rpx 10rpx;
		.remen-icon{
			width: 30rpx;
			height: 30rpx;
		}
		.vote-count{
			padding: 0 40rpx 0 20rpx;
			font-size: 40rpx;
			color: #353535;
			font-weight: 800;
		}
		.work-rank{
			color: #353535;
			background: #FDEBEC;
			border-radius: 21px 21px 21px 21px;
			font-size: 22rpx;
			padding: 8rpx 15rpx 8rpx 15rpx;
		}
	}
	.footer-bar{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 170rpx;
		background-color: white;
	}
</style>