cyzh-SoundOfMusic-H5/pages/activityList/activity/authorBoost.vue

<template>
	<view>
		<swiper @change="swiperChange" class="screen-swiper square-dot"  style="height: 500upx;" :indicator-dots="isIndicator" :circular="true"
			interval="5000" duration="500">
			<swiper-item v-if="!$u.test.isEmpty(boostDetail.video)">
				<video :autoplay="true"
					@play="playVideo"
					@ended="ended"
					:src="boostDetail.video"
					objectFit="fill"></video>
			</swiper-item>
			<swiper-item>
				<view v-if="!$u.test.isEmpty(boostDetail.cover)" @click="preViewImg(boostDetail.cover)" class="bg-img" style="height: 500upx;" :style="{'backgroundImage':'url('+ boostDetail.cover +')'}"></view>
				<view v-else class="bg-img"  style="height: 500upx;background-image: url('https://music.nanyue6688.com/obsfile/ea1a9741a5d5469e967dac8e8e7f0c9d-singerBg.png');"></view>
			</swiper-item>
		</swiper>
		
		<view class="homeBtn" @click="home">
			<image src="/static/home.png" style="width: 40upx;height: 40upx;" />
		</view>
		<view class="head">
			<view class="title margin-top-sm">{{boostDetail.nickName}}与你分享</view>
			<view class="flex justify-between align-center padding-lr">
				<view class="flex align-center">
					<u-avatar :src="boostDetail.avatar" size="120"></u-avatar>
					<view class="padding-left">
						<view class="number">{{+boostDetail.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">热力榜第{{boostDetail.sequence}}</view>
						</view>
					</view>
				</view>
				<view class="text-center">
					<button class="cu-btn round theme-bg-color text-white text-bold" @click="userBoost">
						<text>热力值</text>
						<text class="cuIcon-hot padding-lr-xs"></text>
						<text>X{{boostDetail.activityHotValue}}</text>
					</button>
					<view class="text-sm text-gray margin-top-xs">今日可助力次数: {{boostDetail.allowHitCount}}</view>
				</view>
			</view>
		</view>
		<view class="flex justify-between align-center bg-white" style="padding: 40upx 30upx 30upx 30upx;">
			<view class="flex align-center">
				<image src="/static/icon-person.png" style="width: 82upx;height: 82upx;"></image>
				<view class="padding-left-sm">
					<view class="text-lg text-bold text-black">好的音乐值得分享</view>
					<view class="text-sm text-gray padding-top-xs">邀请好友分享，获得热力值更快哦</view>
				</view>
			</view>
			<button style="height: 56upx;" class="cu-btn round theme-bg-color text-white text-sm"
				@click="invite">去分享</button>
		</view>
		<view class="container">
			<view class="title">分享音乐，公益同行</view>
		</view>
		<view class="bg-white padding-sm">
			<view class="grid col-3 padding-xs">
				<block v-for="(item,index) in boostDetail.presentList" :key="index">
					<view class="text-center padding-top-xs" :class="current == index ? 'boder':''"
						@click="change(item.id,index)">
						<image :src="item.icon" style="width: 150upx;height: 150upx;"></image>
						<view class="margin-tb-xs">金额: {{+item.price}}</view>
						<view class="margin-bottom-xs" style="font-size: 22rpx;">
							<text>公益捐赠</text>
							<text class="text-bold">{{+item.pointsValue}}</text>
							<text>积分</text>
						</view>
						<view style="margin-bottom: 10upx;">
							<text class="cuIcon-hotfill theme-color"></text>
							<text class="text-sm">{{+item.hotValue}}热力值/{{+item.pointsValue}}</text>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="bg-white padding-sm">
			<view class="text-sm text-gray">50%的收入由平台发起定向公益捐赠</view>
			<view class="text-sm text-gray">50%的积分可捐赠或兑换商品</view>
		</view>
		<view style="height: 100upx;"></view>
		<view class="footer-fixed bg-white padding-sm flex justify-between align-center">
			<view>
				<text style="font-size: 36upx;color: #FF4200">￥</text>
				<text
					style="font-size: 46upx;font-family: PingFang SC;font-weight: bold;color: #FF4200">{{count * currentPresentSum}}</text>
			</view>
			<view class="flex align-center">
				<view class="flex align-center">
					<view class="padding-right-sm" @click="minus">
						<u-icon name="minus-circle-fill" color="#5a3ee8" size="36"></u-icon>
					</view>
					<input type="number" class="text-center input" v-model="count" />
					<view class="padding-left-sm" @click="plus">
						<u-icon name="plus-circle-fill" color="#5a3ee8" size="36"></u-icon>
					</view>
				</view>
				<button style="width: 150upx;" class="margin-left cu-btn round theme-bg-color text-white text-sm"
					@click="presentBoost(boostDetail.presentList[current].id)">分享</button>
			</view>
		</view>
		<u-popup v-model="shareShow" mode="bottom" height="460rpx" border-radius="30">
			<view class="flex align-center justify-around" style="padding: 90upx 60upx 70upx 60upx;">
				<view class="text-center" @click="wxShare">
					<image src="/static/wx-share.png" style="width: 125upx;height: 125upx;"></image>
					<view class="text-sm">分享好友</view>
				</view>
				<view class="text-center" @click="pyqShare">
					<image src="/static/wx-pyq.png" style="width: 129upx;height: 124upx;"></image>
					<view class="text-sm">分享朋友圈</view>
				</view>
			</view>
			<view style="width: 10upx;height: 10upx;" class="qrimg-i" v-if="shareShow">
				<tki-qrcode cid="qrcode" ref="qrcode" :val="val" :size="size" :onval="onval" :loadMake="loadMake"
					:usingComponents="true" @result="qrR" />
			</view>
			<view class="padding">
				<button class="cu-btn bg-gray round" style="width: 100%;height: 80upx;"
					@click="shareShow = false">取消</button>
			</view>
		</u-popup>
		<u-popup v-model="dialogShow" mode="center" width="500rpx" height="600rpx" border-radius="30">
			<view class="bg-img text-center"
				style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/e914f556be414767aca011a30961560a-dialogBgImg.png');height: 600rpx;">
				<view style="height: 120upx;"></view>
				<u-avatar :src="boostDetail.avatar" size="160"></u-avatar>
				<view class="margin-bottom-xs margin-top text-bold">
					<text>公益捐赠：{{+boostDetail.presentList[current].pointsValue * count}}积分</text>
				</view>
				<view class="margin-bottom-xs"
					style="font-size: 24upx;font-family: PingFang SC;font-weight: bold;color: #323035;">
					你将为{{boostDetail.nickName}}增加{{+boostDetail.presentList[current].hotValue * count}}热力值</view>
				<view class="text-gray text-sm" v-if="presentDetail.isGiveMedal == 1">公益勋章X {{count}}</view>
				<view class="text-gray text-sm" v-if="presentDetail.isSendGoods == 1">{{presentDetail.goodsName}} X
					{{count}}</view>
				<view class="text-gray text-sm">可得{{+boostDetail.presentList[current].pointsValue * count}}积分，用于积分商城兑换
				</view>
				<view class="padding">
					<u-button class="custom-style" shape="circle" @click="pay">去支付</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="successShow" mode="center" width="500rpx" height="600rpx" border-radius="30">
			<view class="bg-img text-center"
				style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/e914f556be414767aca011a30961560a-dialogBgImg.png');height: 600rpx;">
				<view style="height: 120upx;"></view>
				<u-avatar :src="boostDetail.avatar" size="160"></u-avatar>
				<view class="margin-top"
					style="font-size: 30upx;font-family: PingFang SC;font-weight: bold;color: #323035;">
					恭喜您已为{{boostDetail.nickName}}注入{{+boostDetail.presentList[current].hotValue * count}}热力值</view>
				<view class="margin-tb-xs">{{+boostDetail.presentList[current].pointsValue * count}}积分已到账，用于积分商城兑换
				</view>
				<view class="text-gray text-sm">购买成功！快去我的订单兑换或捐赠</view>
				<view class="padding">
					<u-button class="custom-style" shape="circle" @click="successShow = false">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="errorShow" mode="center" width="500rpx" height="600rpx" border-radius="30">
			<view class="bg-img text-center"
				style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/e914f556be414767aca011a30961560a-dialogBgImg.png');height: 600rpx;">
				<view style="height: 120upx;"></view>
				<u-avatar :src="boostDetail.avatar" size="160"></u-avatar>
				<view class="text-center margin-top text-lg text-bold">支付失败</view>
				<view class="padding">
					<u-button class="custom-style" shape="circle" @click="errorShow = false">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="payShow" mode="center" width="500rpx" height="320rpx" border-radius="30">
			<view class="text-center text-lg padding">请确定支付是否已完成</view>
			<u-line color="#c2c2c2"></u-line>
			<view class="text-red text-center text-lg padding" @click="checkPayInterval">已完成支付</view>
			<u-line color="#c2c2c2"></u-line>
			<view class="text-gray text-center text-lg padding" @click="pay">支付遇到问题，重新支付</view>
		</u-popup>
		<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>
		<works-poster ref="myCard" :works="works"></works-poster>
	</view>
</template>

<script>
	import {
		appId
	} from '@/common/conf/config.js';
	import {
		authUrl
	} from '@/common/conf/config.js';
	import {
		getUrlParams
	} from '@/common/utils/utils.js';
	import worksPoster from "@/components/works-poster/works-poster.vue";
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/utils/index.js'
	export default {
		components: {
			worksPoster
		},
		data() {
			return {
				isPlay:false,
				swiperCurrent:0,
				val: '', // 要生成的二维码值
				size: 200, // 二维码大小
				//unit: 'upx', // 单位
				//icon: '', // 二维码图标
				//iconsize: 40, // 二维码图标大小
				//lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				works: {
					image: 'https://music.nanyue6688.com/obsfile/9bd6e4bb9e464794a23d7073de826662-图层 1.png',
					title: '',
					hotValue: '',
					rank: '',
					avatar: '',
					name: '',
					qrcode: 'https://music.nanyue6688.com/obsfile/c531395a576b4b1aa7377cdbf62cb088-default.png',
					logo: 'https://music.nanyue6688.com/obsfile/0f1d302bde434a68a049fafdeb5e1209-logo.png'
				},
				current: 0,
				boostDetail: {},
				dialogShow: false,
				shareShow: false,
				wxShareShow: false,
				count: 1,
				currentPresentSum: 0,
				activityId: '',
				senderId: '',
				receiverId: '',
				type: '',
				presentId: '',
				successShow: false,
				presentDetail: {},
				errorShow: false,
				payShow: false,
				orderId: '',
			}
		},
		onLoad(options) {
			this.activityId = options.activityId;
			this.senderId = uni.getStorageSync("userId");
			this.receiverId = options.receiverId;
			console.log(this.senderId);
			if (!this.$u.test.isEmpty(this.senderId)) {
				this.val =
					"https://music.nanyue6688.com/vote-h5/index.html#/pages/activityList/activity/authorBoost?activityId=" +
					this.activityId + '&receiverId=' + this.receiverId + "&agenterId=" + this.senderId;
			} else {
				this.val =
					"https://music.nanyue6688.com/vote-h5/index.html#/pages/activityList/activity/authorBoost?activityId=" +
					this.activityId + '&receiverId=' + this.receiverId;
			}
			console.log("*********************=>", this.val);
			this.getBoostDetail(options.activityId, options.receiverId);
			this.authorization();

		},
		computed:{
			isIndicator:{
				get(){
					if (this.boostDetail.cover && this.boostDetail.video && !this.isPlay) {
						return true
					}else {
						return false
					}
				}
			},
		},
		methods: {
			swiperChange(e){
				this.swiperCurrent=e.detail.current
			},
			playVideo(){
				this.isPlay=true
			},
			ended(){
				this.isPlay=false
			},
			home() {
				uni.navigateTo({
					url: "/pages/activityList/home/home?activityId=" + this.activityId,
				})
			},
			//打榜助力
			userBoost() {
				if (this.$u.test.isEmpty(this.senderId)) {
					let path = 'pages/activityList/activity/authorBoost?activityId=' + this.activityId + '&receiverId=' +
						this.receiverId;
					window.location.href = authUrl(path);
				} else {
					this.$u.api.boost.doHit({
						activityId: this.activityId,
						senderId: this.senderId,
						receiverId: this.receiverId,
						type: 2
					}).then(res => {
						console.log(res);
						if (res.code == 400) {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						} else {
							this.$u.toast('助力成功')
							this.getBoostDetail(this.activityId, this.receiverId);
						}
					})
				}
			},
			//礼物支付
			async pay() {
				this.payShow = false;
				let _this = this;

				if (this.$u.test.isEmpty(this.senderId)) {
					let path = 'pages/activityList/activity/authorBoost?activityId=' + this.activityId +
						'&receiverId=' + this.receiverId;
					window.location.href = authUrl(path);
				} else {
					this.orderId = this.$u.guid(16);
					let orderInfo = (await this.$u.api.yeePay.initOrder({
						"channel": "ALIPAY",
						"goodsName": this.boostDetail.presentList[this.current].name,
						"notifyUrl": "1",
						"orderAmount": this.count * this.currentPresentSum,
						"orderId": this.orderId,
						"payWay": "USER_SCAN",
						"scene": "OFFLINE",
						"userIp": "127.0.0.1"
					}));
					_this.$u.api.boost.billRecord({
						userId: _this.senderId,
						orderId: this.orderId,
						payPath: encodeURIComponent(window.location.href),
						openId: "",
						activityId: _this.activityId,
						price: _this.count * _this.currentPresentSum,
						presentId: _this.boostDetail.presentList[_this.current].id,
						presentCount: _this.count,
						relationId: _this.receiverId,
						type: 2,
						payStatus: 0,
					}).then(res => {
						if (typeof orderInfo.prePayTn != 'undefined') {
							//调起支付
							this.toPay(orderInfo.prePayTn);
						}
					})
				}
			},
			//获取助力详情
			getBoostDetail(activityId, receiverId) {
				this.$u.api.user.boost({
					activityId: activityId,
					receiverId: receiverId,
					senderId: this.senderId
				}).then(res => {
					this.boostDetail = res;
					this.currentPresentSum = res.presentList[this.current].price;
				})
			},
			change(id, index) {
				this.presentId = id;
				this.currentPresentSum = 0;
				this.count = 1;
				this.current = index;
				this.currentPresentSum = this.boostDetail.presentList[index].price;
			},
			//礼物＋
			plus() {
				this.count++
			},
			//礼物 -
			minus() {
				if (this.count > 1) {
					this.count--
				}
			},
			async authorization() {
				let agenterId = uni.getStorageSync("agenterId")
				let params = getUrlParams(window.location.search);
				if (!this.$u.test.isEmpty(params.code)) {
					let res = await this.$u.api.wxInfo.getUserInfo({
						userCode: params.code
					});
					uni.setStorageSync("openid", res.openid);
					let datas = {
						nickName: res.nickname,
						avatar: res.headimgurl,
						gender: res.sex,
						openid: res.openid,
						unionid: res.unionid,
						province: res.province,
						city: res.city
					}
					if (!this.$u.test.isEmpty(agenterId)) {
						datas.agenterId = agenterId
					}
					let result = await this.$u.api.user.login(datas);
					if (result) {
						this.senderId = result.id;
						uni.setStorageSync("userId", result.id);
						this.getBoostDetail(this.activityId, this.receiverId);
					}
				}
			},
			qrR(res) {
				base64ToPath(res).then(res => {
					this.works.qrcode = res;
				});
			},
			//邀请
			invite() {
				this.shareShow = true;
				if (!this.$u.test.isEmpty(this.boostDetail.cover)) {
					this.works.image = this.boostDetail.cover;
				}
				this.works.title = this.boostDetail.nickName;
				this.works.hotValue = +this.boostDetail.hotValue;
				this.works.rank = this.boostDetail.sequence;
				this.works.name = this.boostDetail.nickName;
			},
			wxShare() {
				this.shareShow = false;
				this.wxShareShow = true;
				this.type = "发送给朋友";
			},
			pyqShare() {
				this.$refs.myCard.showCanvas();
				this.shareShow = false;
				// this.wxShareShow = true;
				// this.type = "分享到朋友圈"
			},
			toPay(info) {
				location.href = `alipays://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode=${info}`;
				this.dialogShow = false;
				setTimeout(() => {
					this.payShow = true;
				}, 3000)
			},
			async checkPayInterval() {
				this.payShow = false;
				let res = await this.$u.api.boost.billRecordDetail({
					orderId: this.orderId
				})
				if (res && res.payStatus == 1) {
					this.successShow = true;
					this.getBoostDetail(this.activityId, this.receiverId);
				} else {
					this.errorShow = true;
				}
			},
			presentBoost(id) {
				this.$u.api.boost.presentDetail({
					id: id
				}).then(res => {
					this.presentDetail = res;
					this.dialogShow = true;
				})
			},
			preViewImg(url) {
				uni.previewImage({
					urls: [url]
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		background-color: #ffffff;
		margin-top: -26upx;
		border-radius: 26upx 26upx 0 0;

		.number {
			font-size: 38upx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #222222;
		}

		.tag {
			padding: 0 10upx;
			line-height: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(90deg, #7355F4 0%, #573BE5 100%);
			margin-top: 8upx;
			border-radius: 30upx;
		}
	}

	.title {
		line-height: 50px;
		padding-left: 30upx;
		font-size: 30upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #201F1F;
	}

	.container {
		background-color: #FFFFFF;
		margin-top: 30upx;
	}

	.boder {
		box-shadow: -1upx -1upx 60upx #d8d8d8;
		border-radius: 16upx;
	}

	.input {
		width: 80upx;
		background-color: #ffffff;
		text-align: center;
		border: none;
		height: 60rpx;
		min-height: 1.8rem;
	}

	.custom-style {
		background-color: #5b3ee7;
		width: 250upx;
		color: #ffffff;
	}
</style>