|
|
@@ -1,19 +1,23 @@
|
|
|
<template>
|
|
|
<v-container class="invite-user" fluid :class="`bg-${type}`">
|
|
|
<div class="rule" @click="show = true">规则</div>
|
|
|
- <activity-invite-user-box class="box1">
|
|
|
- <template #title>参与步骤</template>
|
|
|
- <v-img class="cybz-content" :src="returnContent ? returnContent.img : null" />
|
|
|
- <div class="cybz-content-text">
|
|
|
- <div class="cybz-content-text-item">分享好友</div>
|
|
|
- <div class="cybz-content-text-item">邀请好友下单</div>
|
|
|
- <div class="cybz-content-text-item">
|
|
|
- {{ returnContent ? returnContent.content : '' }}
|
|
|
+ <div class="box1">
|
|
|
+ <div class="fcnc">
|
|
|
+ <div v-for="(item, index) in level.levelAwardDetails" :key="item.goodsId">
|
|
|
+ <div v-if="index < 4" class="cybz-content-container">
|
|
|
+ <v-img class="cybz-content" :src="returnContent[index].img" />
|
|
|
+ <div class="cybz-content-text">{{returnContent[index].content}}</div>
|
|
|
+ <img v-if="item.status === 0" class="w76h24" src="~/assets/image/activity/invite-user/btn-3.png" alt="">
|
|
|
+ <img v-else-if="item.status === 1" class="w76h24" src="~/assets/image/activity/invite-user/btn-1.png" alt="" @click="receiveLevelAward(item.goodsId)">
|
|
|
+ <img v-else-if="item.status === 2" class="w76h24" src="~/assets/image/activity/invite-user/btn-2.png" alt="">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <v-btn class="share-button" rounded @click="share()">
|
|
|
- <template v-if="!($userAgent.isSzx || $userAgent.isSzxBrowser)">赶紧分享你的好友，送云机时长</template>
|
|
|
- <template v-else>分享好友赚云机时长</template>
|
|
|
+ <v-btn v-if="received" class="share-button" rounded @click="share()">
|
|
|
+ 云机免费领取
|
|
|
+ </v-btn>
|
|
|
+ <v-btn v-else class="share-button" rounded @click="share()">
|
|
|
+ 赶紧分享你的好友，送云机时长
|
|
|
</v-btn>
|
|
|
<div class="dqdj-content">
|
|
|
<div class="dqdj-item">
|
|
|
@@ -42,7 +46,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </activity-invite-user-box>
|
|
|
+ </div>
|
|
|
<div v-if="type === 2" :class="current ? 'box3 tab2' : 'box3'">
|
|
|
<div class="tab">
|
|
|
<div class="tab-item" @click="current = 0">{{ current === 1 ? '我的奖励' : '' }}</div>
|
|
|
@@ -196,7 +200,10 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { Toast } from 'vant';
|
|
|
+import { Toast, Dialog } from 'vant';
|
|
|
+import NativeShare from 'nativeshare';
|
|
|
+import { fileKeyToUrl } from '@/plugins/file-center.js';
|
|
|
+
|
|
|
export default {
|
|
|
auth: false,
|
|
|
name: 'Fission',
|
|
|
@@ -261,7 +268,32 @@ export default {
|
|
|
boostValue: 0,
|
|
|
currentEndTime: 0,
|
|
|
currentRanking: 0,
|
|
|
- preRanking: 0
|
|
|
+ preRanking: 0,
|
|
|
+ userType: 1,
|
|
|
+ received: 0,
|
|
|
+ shareInfo: {
|
|
|
+ title: '双子星云手机',
|
|
|
+ content: `免费领取一台全能云手机！`,
|
|
|
+ shareUrl: '',
|
|
|
+ shareImage: ''
|
|
|
+ },
|
|
|
+ showShare: false,
|
|
|
+ returnContent: [{
|
|
|
+ img: require('@/assets/image/activity/invite-user/card-1.png'),
|
|
|
+ content: '奖励一&邀请1人注册',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: require('@/assets/image/activity/invite-user/card-2.png'),
|
|
|
+ content: '奖励二&邀请2人注册',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: require('@/assets/image/activity/invite-user/card-3.png'),
|
|
|
+ content: '奖励三&邀请3人注册',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img: require('@/assets/image/activity/invite-user/card-4.png'),
|
|
|
+ content: '奖励四&邀请5人注册',
|
|
|
+ }]
|
|
|
};
|
|
|
},
|
|
|
async fetch() {
|
|
|
@@ -269,7 +301,7 @@ export default {
|
|
|
try {
|
|
|
this.token = this.$route.query.token;
|
|
|
await this.getActiveInfo();
|
|
|
- this.$native.setShareInfo(this.shareInfo);
|
|
|
+ await this.shareCanReceiveCloudPhone();
|
|
|
await Promise.all([
|
|
|
this.getActivityRules(),
|
|
|
this.type === 2 && this.getMyActivationCode(this.myCodeFrom),
|
|
|
@@ -295,22 +327,6 @@ export default {
|
|
|
title: '邀请好友'
|
|
|
},
|
|
|
computed: {
|
|
|
- returnContent() {
|
|
|
- return {
|
|
|
- 1: {
|
|
|
- img: require('@/assets/image/activity/invite-user/cybz-content@2x.png'),
|
|
|
- content: '返星币换现金',
|
|
|
- },
|
|
|
- 2: {
|
|
|
- img: require('@/assets/image/activity/invite-user/cybz-content-2@2x.png'),
|
|
|
- content: '云机时长奖励',
|
|
|
- },
|
|
|
- 3: {
|
|
|
- img: require('@/assets/image/activity/invite-user/cybz-content-3@2x.png'),
|
|
|
- content: '返积分',
|
|
|
- },
|
|
|
- }[this.type];
|
|
|
- },
|
|
|
codeHasMore() {
|
|
|
return (
|
|
|
this.codeTotal < 0 ||
|
|
|
@@ -357,28 +373,46 @@ export default {
|
|
|
},
|
|
|
}).href
|
|
|
);
|
|
|
- },
|
|
|
- shareInfo() {
|
|
|
- if (this.$userAgent.isMiniProgram) {
|
|
|
- return {
|
|
|
- title: '双子星APP',
|
|
|
- path: '/pages/home/home',
|
|
|
- imgUrl: location.origin + require('~/assets/image/logo.png'),
|
|
|
- };
|
|
|
- }
|
|
|
- return {
|
|
|
- title: '双子星云手机',
|
|
|
- desc: `畅玩“原神”“幻塔”，24小时在线，不限下载流量的手机`,
|
|
|
- link: this.shareUrl,
|
|
|
- imgUrl: location.origin + require('~/assets/image/logo.png'),
|
|
|
- };
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.makePoint('activity_Share_PV')
|
|
|
this.makePoint('activity_Share_UV')
|
|
|
+ this.addUserVisit(12);
|
|
|
},
|
|
|
methods: {
|
|
|
+ async shareCanReceiveCloudPhone() {
|
|
|
+ try {
|
|
|
+ const res = await this.$axios.$get('/resources/register/send/cloud/phone/shareCanReceiveCloudPhone', {}, { headers: { Authorization: this.token } });
|
|
|
+ this.received = res.data.received
|
|
|
+ this.shareInfo.title = res.data.title
|
|
|
+ this.shareInfo.content = res.data.content
|
|
|
+ this.shareInfo.shareUrl = res.data.url
|
|
|
+ this.shareInfo.shareImage = fileKeyToUrl(res.data.imgUrl)
|
|
|
+ this.$native.setShareInfo(this.shareInfo);
|
|
|
+ } catch (err) {
|
|
|
+ Toast({
|
|
|
+ message: err.message,
|
|
|
+ position: 'top'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async shareReceiveCloudPhone() {
|
|
|
+ try {
|
|
|
+ const res = await this.$axios.$post('/resources/register/send/cloud/phone/shareReceiveCloudPhone', {}, { headers: { Authorization: this.token } });
|
|
|
+ Dialog.alert({
|
|
|
+ message: res.msg,
|
|
|
+ }).then(() => {
|
|
|
+ this.showShare = false
|
|
|
+ });
|
|
|
+ this.addUserVisit(7);
|
|
|
+ } catch (err) {
|
|
|
+ Toast({
|
|
|
+ message: err.message,
|
|
|
+ position: 'top'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
async receiveLevelAward(goodsId) {
|
|
|
try {
|
|
|
const res = await this.$axios.$post('/activity/v1/level/award/receiveLevelAward', { activityId: this.myCodeFrom.activityId, goodsId }, { headers: { Authorization: this.token } });
|
|
|
@@ -451,11 +485,12 @@ export default {
|
|
|
this.currentRanking = res.data.currentRanking
|
|
|
this.preRanking = res.data.preRanking
|
|
|
this.levelAwardRankings = res.data.levelAwardRankings;
|
|
|
+ this.userType = res.data.userType;
|
|
|
} finally {
|
|
|
this.codeIsLoading = false;
|
|
|
}
|
|
|
},
|
|
|
- async share() {
|
|
|
+ share() {
|
|
|
if (this.data.status !== 1) {
|
|
|
if (this.data.status === 0) {
|
|
|
Toast({
|
|
|
@@ -484,18 +519,43 @@ export default {
|
|
|
});
|
|
|
return
|
|
|
}
|
|
|
-
|
|
|
this.$tongji.trackEvent('活动', '分享', '', 0);
|
|
|
+ if (this.received) {
|
|
|
+ this.addUserVisit(13);
|
|
|
+ }
|
|
|
if (this.$userAgent.isSzx || this.$userAgent.isSzxBrowser) {
|
|
|
// app环境
|
|
|
this.$native.share(this.shareInfo);
|
|
|
- this.makePoint('activity_Share_分享好友按钮');
|
|
|
} else {
|
|
|
// 浏览器环境
|
|
|
- await this.$native.clipboard.writeText(`${this.shareUrl} 双子星云手机`);
|
|
|
- // throw new Error('1231');
|
|
|
- this.$toast.success('链接复制成功');
|
|
|
- this.makePoint('activity_Share_复制链接');
|
|
|
+ const nativeShare = new NativeShare()
|
|
|
+ nativeShare.setShareData({
|
|
|
+ icon: this.shareInfo.shareImage,
|
|
|
+ link: this.shareInfo.shareUrl,
|
|
|
+ title: this.shareInfo.content,
|
|
|
+ desc: this.shareInfo.title,
|
|
|
+ success: () => {
|
|
|
+ this.shareReceiveCloudPhone()
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ Toast({
|
|
|
+ message: '分享失败',
|
|
|
+ position: 'center'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ try {
|
|
|
+ nativeShare.call('wechatTimeline')
|
|
|
+ } catch (err) {
|
|
|
+ Toast({
|
|
|
+ message: '您的浏览器不支持分享功能，请下载app使用！',
|
|
|
+ position: 'center',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ window.open('https://www.androidscloud.com/', '_self');
|
|
|
+ }, 3000)
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
makePoint(positionButton) {
|
|
|
@@ -568,17 +628,40 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
- },
|
|
|
+ addUserVisit(accessType) {
|
|
|
+ this.$axios.$post('/user/v5/operateApi/addUserVisit', {
|
|
|
+ accessType,
|
|
|
+ loginType: 1
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.w76h24 {
|
|
|
+ width: 76px;
|
|
|
+ height: 24px;
|
|
|
+ margin: 5px 0;
|
|
|
+}
|
|
|
+.w373h237 {
|
|
|
+ width: 373px;
|
|
|
+ height: 237px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.fcnc {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 51px;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
.w373h192 {
|
|
|
width: 373px;
|
|
|
height: 192px;
|
|
|
display: block;
|
|
|
margin: 17px auto 0;
|
|
|
}
|
|
|
+
|
|
|
.fcw {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -660,26 +743,30 @@ export default {
|
|
|
}
|
|
|
|
|
|
.box1 {
|
|
|
- margin-top: 460px;
|
|
|
-
|
|
|
+ margin: 240px auto 0;
|
|
|
+ width: 373px;
|
|
|
+ height: 648px;
|
|
|
+ background: url('~/assets/image/activity/invite-user/box.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ .cybz-content-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 140px;
|
|
|
+ }
|
|
|
.cybz-content {
|
|
|
- width: 305px;
|
|
|
- height: 75px;
|
|
|
+ width: 119px;
|
|
|
+ height: 108px;
|
|
|
margin: auto;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.cybz-content-text {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr 1fr;
|
|
|
font-size: 12px;
|
|
|
- color: #333;
|
|
|
-
|
|
|
- .cybz-content-text-item {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ color: #FF6F3C;
|
|
|
}
|
|
|
-
|
|
|
.share-button {
|
|
|
display: block;
|
|
|
margin: auto;
|
|
|
@@ -759,7 +846,7 @@ export default {
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.progress-text {
|
|
|
font-size: 12px;
|
|
|
color: #8f8f8f;
|
lihao
