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.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;" @click="wxShare">转发好友</button>
				<button class="theme-bg-color text-white round cu-btn" style="width: 200upx;height: 70upx;" @click="pyqShare">生成海报</button>
			</view>
		</view>
		<view style="width: 10upx;height: 10upx;" class="qrimg-i" v-if="qrCode">
			<tki-qrcode 
			cid="qrcode" 
			ref="qrcode" 
			:val="val" 
			:size="qrSize" 
			:onval="onval" 
			:loadMake="loadMake" 
			:usingComponents="true"
			 @result="qrR" />
		</view>
		<view class="container margin-sm" v-if="!$u.test.isEmpty(boostList)">
			<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>
							<view class="name">{{item.nickName}}</view>
							<view class="time padding-top-xs">{{item.createTime}}</view>
						</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 v-else>
			<u-empty margin-top="100" text="暂无数据" mode="list"></u-empty>
		</view>
		<view class="cu-modal" :class="wxShareShow ? 'show' : ''" style="z-index: 9999;">
			<view class="cu-dialog">
				<view style="height:150px;">
					<view style="color: #000000;font-size: 38upx;padding: 40upx;">1. 先点击右上角<text class="text-bold" style="font-size: 38upx;">"···"</text></view>
					<view style="color: #000000;font-size: 38upx;padding: 40upx;">2. 选择<text class="text-bold" style="font-size: 38upx;">"{{type}}"</text></view>
				</view>
				<view class="cu-bar text-green text-lg bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="wxShareShow = false">知道了</view>
				</view>
			</view>
		</view>
		<view style="height: 80rpx;" v-if="status">
			<u-divider bgColor="#f1f1f1;"  height="80">到底了</u-divider>
		</view>
		<works-poster ref="myCard" :works="works"></works-poster>
	</view>
</template>

<script>
	import worksPoster from "@/components/works-poster/works-poster.vue";
	import { pathToBase64, base64ToPath } from '@/common/utils/index.js'
	export default {
		components: {worksPoster},
		data() {
			return {
				val: '', // 要生成的二维码值
				qrSize: 200, // 二维码大小
				//unit: 'upx', // 单位
				//icon: '', // 二维码图标
				//iconsize: 40, // 二维码图标大小
				//lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' ,// 二维码生成后的图片地址或base64
				qrCode: false,
				works: {
					image: 'https://music.nanyue6688.com/obsfile/9bd6e4bb9e464794a23d7073de826662-图层 1.png',
					title: '',
					hotValue: '',
					rank: '',
					avatar: '',
					name: '',
					qrcode: 'https://music.nanyue6688.com/obsfile/c531395a576b4b1aa7377cdbf62cb088-default.png',
				},
				productId: '',
				detail: {},
				boostList: [],
				current: 1,
				size: 30,
				status: false,
				wxShareShow: false,
				type: '',
			}
		},
		onLoad(options) {
			this.productId = options.id;
			this.getProductInfo();
			this.getHelpRecord();
			let userId = uni.getStorageSync("userId");
			if (!this.$u.test.isEmpty(userId)) {
				this.val = "https://music.nanyue6688.com/vote-h5/index.html#/pages/activityList/activity/musicBoost?id=" + this.productId + "&agenterId=" + userId;
			} else {
				this.val = "https://music.nanyue6688.com/vote-h5/index.html#/pages/activityList/activity/musicBoost?id=" + this.productId;
			}
		},
		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.musicBoost.detail({id: this.productId}).then(res => {
					this.detail = res;
					this.getActivity(res.activityId);
				})
			},
			getActivity(id) {
				this.$u.api.activity.detail({id: id}).then(res => {
					let userId = uni.getStorageSync("userId");
					if (!this.$u.test.isEmpty(userId)) {
						let link = "https://music.nanyue6688.com/vote-h5/index.html#/pages/activityList/activity/musicBoost?id=" + this.productId;
						if (link.indexOf("?") != -1) {
							link = link + "&agenterId=" + userId
						} else {
							link = link + "?agenterId=" + userId
						}
						let obj = {
							link,
							title: res.shareTitle,
							desc: res.shareDesc,
							imgUrl: res.shareImg
						}
						this.$shareConfig(obj, this);
					}
				})
			},
			wxShare() {
				this.wxShareShow = true;
				this.type = "发送给朋友";
			},
			pyqShare() {
				this.qrCode = true;
			},
			qrR(res) {
				base64ToPath(res).then(res => {
					this.works.qrcode = res;
					this.posterInfo();
				});
			},
			posterInfo() {
				uni.showLoading({
				    title: '制作海报中...',
					mask: true
				})
				if (this.detail.urlsType == 1) {
					this.works.image = this.detail.cover;
				} else {
					this.works.image = this.detail.urls;
				}
				this.works.title = this.detail.title;
				this.works.hotValue = +this.detail.hotValue;
				this.works.rank = this.detail.rank;
				this.works.name = this.detail.personName;
				setTimeout(() => {
					uni.hideLoading()
					this.$refs.myCard.showCanvas();
				},800)
			}
		}
	}
</script>

<style>
	.container {
		background-color: #ffffff;
		border-radius: 30upx;
		box-shadow: 10upx 10upx 60upx #d0d0d0;
	}
	.avatar {
		width: 145upx;
		height: 145upx;
		margin-top: -60upx;
	}
	.time {
		font-size: 22upx;
		font-family: PingFang SC;
		color: #9E9E9E;
	}
	.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>