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

<template>
	<view>
		<view v-if="boostDetail.cover"  class="bg-img" style="height: 563upx;" :style="{'backgroundImage':'url('+ boostDetail.cover +')'}"></view>
		<view v-else class="flex justify-center align-center"  style="height: 563upx;background-color: #5a3ee8;">
			<view class="text-white" @click="uploadCover">
				<text class="cuIcon-add " style="font-size: 120rpx;"></text>
				<view>上传封面</view>
			</view>
		</view>
		
		<view class="head">
			<view class="title">为{{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">成功邀请一位好友打榜，热力值+5</view>
				</view>
			</view>
			<button style="height: 56upx;" class="cu-btn round theme-bg-color text-white text-sm">去邀请</button>
		</view>
		<view class="container">
			<view class="title">打call助力</view>
		</view>
		<view class="bg-white padding-sm">
			<view class="flex justify-around">
				<block v-for="(item,index) in boostDetail.presentList" :key="index">
					<view class="text-center padding-top-xs" :class="current == index ? 'boder':''" @click="change(index)">
						<image :src="item.icon" style="width: 80upx;height: 80upx;"></image>
						<view class="text-sm margin-tb-xs">金额: {{+item.price}}</view>
						<view style="margin-bottom: 10upx;">
							<text class="cuIcon-hotfill theme-color"></text>
							<text style="font-size: 20upx;">{{+item.hotValue}}热力值/{{+item.pointsValue}}</text>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="bg-white padding-sm">
			<view class="text-sm text-gray">所有的打call助力均会由本平台发起公益捐赠</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="dialogShow = true">助力</button>
			</view>
		</view>
		<u-popup v-model="dialogShow" mode="center" width="500rpx" height="600rpx" border-radius="30">
			<view class="bg-img text-center" style="background-image: url('/static/dialogBgImg.png');height: 600rpx;">
				<view style="height: 120upx;"></view>
				<u-avatar src="/static/avatar.png" size="160"></u-avatar>
				<view class="margin-top" style="font-size: 24upx;font-family: PingFang SC;font-weight: bold;color: #323035;">你将为{{boostDetail.nickName}}增加50热力值</view>
				<view class="text-gray text-sm">公益勋章X1</view>
				<view class="text-gray text-sm">立白助力礼包A</view>
				<view class="text-gray text-sm">可得300积分，可用于国信商城兑换</view>
				<view class="padding">
					<u-button class="custom-style" shape="circle" @click="pay">去支付</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {authUrl} from '@/common/conf/config.js';
	import {getUrlParams} from '@/common/utils/utils.js';
	export default {
		data() {
			return {
				current: 0,
				boostDetail: {},
				dialogShow: false,
				count: 1,
				currentPresentSum: 0,
				activityId: '',
				senderId: '',
				receiverId: '',
			}
		},
		onLoad(options) {
			this.activityId = options.activityId;
			this.senderId = uni.getStorageSync("userId");
			this.receiverId = options.receiverId;
			this.getBoostDetail(options.activityId, options.receiverId);
			this.authorization();
		},
		methods: {
			uploadCover(){
				this.$mpi.uploadFile().then(res=>{
					let obj= JSON.parse(res)
					let params={
						id:this.receiverId,
						cover:obj.data
					}
					this.$u.api.user.submit(params).then(res=>{
						this.getBoostDetail(this.activityId, this.receiverId);
					})
				})
			},
			//打榜助力
			userBoost() {
				if (this.$u.test.isEmpty(this.senderId)) {
					let path = 'pages/activityList/activity/boost?activityId=' + this.activityId + '&receiverId=' + this.receiverId;
					window.location.href = authUrl(path);
				} else {
					
				}
			},
			//礼物支付
			pay() {
				if (this.$u.test.isEmpty(this.senderId)) {
					let path = 'pages/activityList/activity/boost?activityId=' + this.activityId + '&receiverId=' + this.receiverId;
					window.location.href = authUrl(path);
				} else {
					
				}
			},
			//获取助力详情
			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(index) {
				this.currentPresentSum = 0;
				this.count = 1;
				this.current = index;
				this.currentPresentSum = this.present[index].price;
			},
			//礼物＋
			plus() {
				this.count++
			}, 
			//礼物 -
			minus() {
				if (this.count > 1) {
					this.count--
				}
			},
			async authorization() {
				let params = getUrlParams(window.location.search);
				if (!this.$u.test.isEmpty(params.code)) {
					let res = await this.$u.api.wxInfo.getUserInfo({userCode: params.code});
					let datas = {
						nickName: res.nickname,
						avatar: res.headimgurl,
						gender: res.sex,
						openid: res.openid,
						unionid: res.unionid
					}
					let result = await this.$u.api.user.login(datas);
					if (result) {
						this.senderId = result.id;
						uni.setStorageSync("userId", result.id);
					}
				}
			},
		}
	}
</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>