|
|
@@ -0,0 +1,242 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view v-if="boostDetail.urlsType == 1" class="bg-img" style="height: 563upx;" :style="{'backgroundImage':'url('+ boostDetail.cover +')'}"></view>
|
|
|
+ <view v-else class="bg-img" style="height: 563upx;" :style="{'backgroundImage':'url('+ boostDetail.urls +')'}"></view>
|
|
|
+ <view class="head">
|
|
|
+ <view class="title">为{{boostDetail.title}}打榜</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.rank}}</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.ticketHotValue}}</text>
|
|
|
+ </button>
|
|
|
+ <view class="text-sm text-gray margin-top-xs">今日可打榜次数: {{boostDetail.allowHitNum}}</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('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/e914f556be414767aca011a30961560a-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.title}}增加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,
|
|
|
+ productId: '',
|
|
|
+ userId: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.productId = options.id;
|
|
|
+ this.userId = uni.getStorageSync("userId");
|
|
|
+ this.getBoostDetail(options.id, this.userId);
|
|
|
+ this.authorization();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //打榜助力
|
|
|
+ userBoost() {
|
|
|
+ if (this.$u.test.isEmpty(this.userId)) {
|
|
|
+ let path = 'pages/activityList/activity/musicBoost?id=' + this.productId;
|
|
|
+ window.location.href = authUrl(path);
|
|
|
+ } else {
|
|
|
+ this.$u.api.boost.doHit({
|
|
|
+ activityId: this.boostDetail.activityId,
|
|
|
+ productId: this.productId,
|
|
|
+ senderId: this.userId,
|
|
|
+ receiverId: this.boostDetail.userId,
|
|
|
+ type: 0,
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ if (res.code == 400) {
|
|
|
+ uni.showToast({
|
|
|
+ icon: "none",
|
|
|
+ title: res.msg
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.getBoostDetail(this.productId, this.userId);
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //礼物支付
|
|
|
+ pay() {
|
|
|
+ if (this.$u.test.isEmpty(this.userId)) {
|
|
|
+ let path = 'pages/activityList/activity/musicBoost?id=' + this.productId;
|
|
|
+ window.location.href = authUrl(path);
|
|
|
+ } else {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取助力详情
|
|
|
+ getBoostDetail(productId, userId) {
|
|
|
+ this.$u.api.musicBoost.detail({id: productId, userId: this.userId}).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.boostDetail.presentList[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.userId = 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>
|
lyqu