|
|
@@ -1,20 +1,31 @@
|
|
|
<template>
|
|
|
- <v-container class="invite-user pa-0" fluid>
|
|
|
+ <v-container class="invite-user pa-0" fluid :class="`bg-${type}`">
|
|
|
<div class="box box1">
|
|
|
<div class="box-header">参与步骤</div>
|
|
|
<div class="box-main">
|
|
|
<v-img
|
|
|
+ v-if="type === 1"
|
|
|
class="cybz-content"
|
|
|
src="~/assets/image/activity/invite-user/cybz-content@2x.png"
|
|
|
/>
|
|
|
+ <v-img
|
|
|
+ v-else-if="type === 2"
|
|
|
+ class="cybz-content"
|
|
|
+ src="~/assets/image/activity/invite-user/cybz-content-2@2x.png"
|
|
|
+ />
|
|
|
<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">返星币换现金</div>
|
|
|
+ <div class="cybz-content-text-item">
|
|
|
+ <template v-if="type === 1">返星币换现金</template>
|
|
|
+ <template v-else-if="type === 2">返云手机时长</template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<v-btn class="share-button" rounded @click="share()">
|
|
|
- <template v-if="$userAgent.isApp">分享好友赚星币</template>
|
|
|
- <template v-else>复制链接分享好友赚星币</template>
|
|
|
+ <template v-if="!($userAgent.isSzx || $userAgent.isSzxBrowser)"
|
|
|
+ >复制链接</template
|
|
|
+ >分享好友赚<template v-if="type === 1">星币</template
|
|
|
+ ><template v-else-if="type === 2">手机时长</template>
|
|
|
</v-btn>
|
|
|
<!-- <button @click="share()">邀请</button> -->
|
|
|
</div>
|
|
|
@@ -41,12 +52,57 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- <div class="box box3">
|
|
|
- <div class="box-header">返利套餐</div>
|
|
|
- <div class="box-main"></div>
|
|
|
- </div> -->
|
|
|
+
|
|
|
+ <div v-if="type === 2" class="box box3">
|
|
|
+ <div class="box-header">收益明细</div>
|
|
|
+ <div class="box-main">
|
|
|
+ <table class="w-full code-table">
|
|
|
+ <thead class="text-left text-sm whitespace-nowrap break-normal">
|
|
|
+ <tr>
|
|
|
+ <th class="w-120px">获得的时间</th>
|
|
|
+ <th>激活码编号</th>
|
|
|
+ <th class="w-60px">使用状态</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody class="text-xs">
|
|
|
+ <tr v-for="(item, index) in myActivationCode" :key="index">
|
|
|
+ <td class="whitespace-nowrap break-normal">
|
|
|
+ {{ item.createTime }}
|
|
|
+ </td>
|
|
|
+ <td class="whitespace-nowrap break-normal">
|
|
|
+ <div class="flex">
|
|
|
+ <span>{{ item.activationCode }} </span
|
|
|
+ ><span class="ml-auto">|</span><v-btn
|
|
|
+ text
|
|
|
+ small
|
|
|
+ color="#991AD2"
|
|
|
+ class="copy-btn"
|
|
|
+ @click="copyCode(item)"
|
|
|
+ >复制</v-btn
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td class="whitespace-nowrap break-normal text-right">
|
|
|
+ <span v-if="item.activationUse" style="color: #dd1b0d"
|
|
|
+ >已使用</span
|
|
|
+ >
|
|
|
+ <span v-else>未使用</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <!-- <div class="code-list">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in 10"
|
|
|
+ :key="index"
|
|
|
+ class="code-item"
|
|
|
+ ></div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="box box4">
|
|
|
<div class="box-header">活动规则</div>
|
|
|
+ <!-- eslint-disable-next-line vue/no-v-html -->
|
|
|
<div class="box-main text-sm" v-html="activityRules">
|
|
|
<!-- <p>1、传播过程中有任何疑问，可直接咨询客服</p>
|
|
|
<p>
|
|
|
@@ -86,12 +142,22 @@
|
|
|
// import qs from 'qs';
|
|
|
// import clipboard from 'clipboardy/browser';
|
|
|
import * as clipboard from 'clipboard-polyfill/text';
|
|
|
-import { getStarCoinOverview } from '~/api/activity/invite-user.js';
|
|
|
-import { getContentByType } from '~/api/public/agreement.js';
|
|
|
+// import { getStarCoinOverview } from '~/api/activity/invite-user.js';
|
|
|
+// import { getContentByType } from '~/api/public/agreement.js';
|
|
|
export default {
|
|
|
// auth: false,
|
|
|
name: 'InviteUser',
|
|
|
filters: {},
|
|
|
+ // async asyncData({ $axios }) {
|
|
|
+ // // 页面初始化前触发
|
|
|
+ // const res = await $axios.$get(
|
|
|
+ // '/activity/v1/inviteUser/orderRelation/starCoinOverview',
|
|
|
+ // );
|
|
|
+ // res.data.type = 2;
|
|
|
+ // return {
|
|
|
+ // data: res.data,
|
|
|
+ // };
|
|
|
+ // },
|
|
|
data() {
|
|
|
return {
|
|
|
data: {
|
|
|
@@ -105,15 +171,21 @@ export default {
|
|
|
inviteUserName: null,
|
|
|
activityId: null,
|
|
|
status: 0,
|
|
|
+ type: 0,
|
|
|
},
|
|
|
activityRules: '',
|
|
|
+ myActivationCode: [],
|
|
|
};
|
|
|
},
|
|
|
async fetch() {
|
|
|
- //
|
|
|
+ // 页面初始化后触发
|
|
|
try {
|
|
|
- this.getActivityRules();
|
|
|
- this.data = (await getStarCoinOverview(this)).data;
|
|
|
+ await this.getActiveInfo();
|
|
|
+ this.$native.setShareInfo(this.shareInfo);
|
|
|
+ await Promise.all([
|
|
|
+ this.getActivityRules(),
|
|
|
+ this.type === 2 && this.getMyActivationCode(),
|
|
|
+ ]);
|
|
|
} catch (error) {
|
|
|
this.$toast.error(error.message);
|
|
|
}
|
|
|
@@ -129,40 +201,114 @@ export default {
|
|
|
},
|
|
|
computed: {
|
|
|
dataList() {
|
|
|
- return [
|
|
|
- { label: '今日收益（星币）', value: this.data.todayIncomeStarCoin },
|
|
|
- { label: '总收益（星币）', value: this.data.totalIncomeStarCoin },
|
|
|
- { label: '今日购买订单数', value: this.data.todayBuyOrderSuccessCount },
|
|
|
- { label: '累计推广订单', value: this.data.totalBuyOrderCount },
|
|
|
- {
|
|
|
- label: '今日购买成功客户',
|
|
|
- value: this.data.todayBuyOrderSuccessCount,
|
|
|
- },
|
|
|
- {
|
|
|
- label: '累计购买成功客户',
|
|
|
- value: this.data.totalBuyOrderSuccessCount,
|
|
|
- },
|
|
|
- // { label: '可提现星币数量', value: this.data.withdrawStarCoinNum },
|
|
|
- ];
|
|
|
+ switch (this.type) {
|
|
|
+ case 1: {
|
|
|
+ return [
|
|
|
+ { label: '今日收益（星币）', value: this.data.todayIncomeStarCoin },
|
|
|
+ { label: '总收益（星币）', value: this.data.totalIncomeStarCoin },
|
|
|
+ {
|
|
|
+ label: '今日购买订单数',
|
|
|
+ value: this.data.todayBuyOrderSuccessCount,
|
|
|
+ },
|
|
|
+ { label: '累计推广订单', value: this.data.totalBuyOrderCount },
|
|
|
+ {
|
|
|
+ label: '今日购买成功客户',
|
|
|
+ value: this.data.todayBuyOrderSuccessCount,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '累计购买成功客户',
|
|
|
+ value: this.data.totalBuyOrderSuccessCount,
|
|
|
+ },
|
|
|
+ // { label: '可提现星币数量', value: this.data.withdrawStarCoinNum },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ case 2: {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ label: '今日获取的激活码',
|
|
|
+ value: this.data.todayIncomeActivationCode,
|
|
|
+ },
|
|
|
+ { label: '总激活码', value: this.data.totalIncomeActivationCode },
|
|
|
+ {
|
|
|
+ label: '今日购买订单数',
|
|
|
+ value: this.data.todayBuyOrderSuccessCount,
|
|
|
+ },
|
|
|
+ { label: '累计推广订单', value: this.data.totalBuyOrderCount },
|
|
|
+ {
|
|
|
+ label: '今日购买成功客户',
|
|
|
+ value: this.data.todayBuyOrderSuccessCount,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '累计购买成功客户',
|
|
|
+ value: this.data.totalBuyOrderSuccessCount,
|
|
|
+ },
|
|
|
+ // { label: '可提现星币数量', value: this.data.withdrawStarCoinNum },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ default: {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ type() {
|
|
|
+ return this.data.type;
|
|
|
+ },
|
|
|
+ shareInfo() {
|
|
|
+ if (this.$userAgent.isMiniProgram) {
|
|
|
+ return {
|
|
|
+ title: '双子星APP',
|
|
|
+ path: '/pages/home/home',
|
|
|
+ imgUrl: location.origin + require('~/assets/image/logo.png'),
|
|
|
+ };
|
|
|
+ }
|
|
|
+ const url =
|
|
|
+ location.origin +
|
|
|
+ this.$router.resolve({
|
|
|
+ path: '/activity/invite-user/register',
|
|
|
+ query: {
|
|
|
+ invitationUserName: this.data.inviteUserName,
|
|
|
+ activityId: this.data.activityId,
|
|
|
+ type: this.type,
|
|
|
+ },
|
|
|
+ }).href;
|
|
|
+ return {
|
|
|
+ title: '双子星APP',
|
|
|
+ desc: '分享好友购买云机套餐,返星币换现金',
|
|
|
+ link: url,
|
|
|
+ imgUrl: location.origin + require('~/assets/image/logo.png'),
|
|
|
+ };
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.$userAgent.isMiniProgram &&
|
|
|
- this.$wx.miniProgram.postMessage({
|
|
|
- data: {
|
|
|
- action: 'updateAppMessageShareData',
|
|
|
- params: {
|
|
|
- title: '双子星云手机',
|
|
|
- path: '/pages/home/home',
|
|
|
- imageUrl:
|
|
|
- location.origin +
|
|
|
- require('~/assets/image/activity/invite-user/bg@2x.png'),
|
|
|
- // promise: null,
|
|
|
- },
|
|
|
- },
|
|
|
- });
|
|
|
+ // this.$userAgent.isMiniProgram &&
|
|
|
+ // this.$wx.miniProgram.postMessage({
|
|
|
+ // data: {
|
|
|
+ // action: 'updateAppMessageShareData',
|
|
|
+ // params: {
|
|
|
+ // title: '双子星云手机',
|
|
|
+ // path: '/pages/home/home',
|
|
|
+ // imageUrl:
|
|
|
+ // location.origin +
|
|
|
+ // require('~/assets/image/activity/invite-user/bg@2x.png'),
|
|
|
+ // // promise: null,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // });
|
|
|
},
|
|
|
methods: {
|
|
|
+ async getActiveInfo() {
|
|
|
+ const res = await this.$axios.$get(
|
|
|
+ '/activity/v1/inviteUser/orderRelation/starCoinOverview',
|
|
|
+ );
|
|
|
+ // res.data.type = 2;
|
|
|
+ this.data = res.data;
|
|
|
+ },
|
|
|
+ async getMyActivationCode() {
|
|
|
+ const res = await this.$axios.$get(
|
|
|
+ '/activity/v1/inviteUser/orderRelation/myActivationCode',
|
|
|
+ );
|
|
|
+ this.myActivationCode = res.data.list;
|
|
|
+ },
|
|
|
async share() {
|
|
|
// console.log(this);
|
|
|
if (this.data.status !== 1) {
|
|
|
@@ -179,40 +325,45 @@ export default {
|
|
|
}
|
|
|
|
|
|
this.$tongji.trackEvent('活动', '分享', '', 0);
|
|
|
- const url =
|
|
|
- location.origin +
|
|
|
- this.$router.resolve({
|
|
|
- path: '/activity/invite-user/register',
|
|
|
- query: {
|
|
|
- invitationUserName: this.data.inviteUserName,
|
|
|
- activityId: this.data.activityId,
|
|
|
- },
|
|
|
- }).href;
|
|
|
|
|
|
- if (this.$userAgent.isMiniProgram) {
|
|
|
- // 小程序环境
|
|
|
- await clipboard.writeText(`${url} 唔即云手机`);
|
|
|
- this.$toast.success('链接复制成功');
|
|
|
- } else if (this.$userAgent.isApp) {
|
|
|
+ // if (this.$userAgent.isMiniProgram) {
|
|
|
+ // // 小程序环境
|
|
|
+ // await clipboard.writeText(`${this.shareInfo.gotoUrl} 唔即云手机`);
|
|
|
+ // this.$toast.success('链接复制成功');
|
|
|
+ // } else
|
|
|
+ if (this.$userAgent.isSzx || this.$userAgent.isSzxBrowser) {
|
|
|
// app环境
|
|
|
- this.$native.share({
|
|
|
- title: '双子星APP',
|
|
|
- content: '分享好友购买云机套餐,返星币换现金',
|
|
|
- gotoUrl: url,
|
|
|
- shareImg: 'sdsa.png',
|
|
|
- });
|
|
|
+ this.$native.share(this.shareInfo);
|
|
|
} else {
|
|
|
// 浏览器环境
|
|
|
- await clipboard.writeText(`${url} 唔即云手机`);
|
|
|
+ await clipboard.writeText(`${this.shareInfo.gotoUrl} 唔即云手机`);
|
|
|
// throw new Error('1231');
|
|
|
this.$toast.success('链接复制成功');
|
|
|
}
|
|
|
},
|
|
|
async getActivityRules() {
|
|
|
- const res = await getContentByType(this, 'iuserrules01');
|
|
|
- this.activityRules = res.data.content
|
|
|
- .replace(/[\d\D]*<body>([\d\D]+)<\/body>[\d\D]*/i, '$1')
|
|
|
- .replace(/<div class="phone-container">([\d\D]+)<\/div>/g, '$1');
|
|
|
+ const agreementCoding = { 1: 'iuserrules01', 2: 'iuserrules02' }[
|
|
|
+ this.type
|
|
|
+ ];
|
|
|
+ if (agreementCoding) {
|
|
|
+ const res = await this.$axios.$get(
|
|
|
+ '/public/v5/agreementApi/content/getContentByType',
|
|
|
+ {
|
|
|
+ params: {
|
|
|
+ agreementCoding,
|
|
|
+ type: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ );
|
|
|
+
|
|
|
+ this.activityRules = res.data.content
|
|
|
+ .replace(/[\d\D]*<body>([\d\D]+)<\/body>[\d\D]*/i, '$1')
|
|
|
+ .replace(/<div class="phone-container">([\d\D]+)<\/div>/g, '$1');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async copyCode(item) {
|
|
|
+ await clipboard.writeText(item.activationCode);
|
|
|
+ this.$toast.success('复制成功');
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
@@ -221,12 +372,20 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
.invite-user {
|
|
|
color: #333;
|
|
|
- background-image: url('~/assets/image/activity/invite-user/bg@2x.png');
|
|
|
+ // background-image: url('~/assets/image/activity/invite-user/bg@2x.png');
|
|
|
background-size: 100% auto;
|
|
|
// background-position-y: -44px;
|
|
|
overflow: hidden;
|
|
|
padding-bottom: 30px;
|
|
|
+
|
|
|
+ &.bg-1 {
|
|
|
+ background-image: url('~/assets/image/activity/invite-user/bg@2x.png');
|
|
|
+ }
|
|
|
+ &.bg-2 {
|
|
|
+ background-image: url('~/assets/image/activity/invite-user/bg-2@2x.png');
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
.box {
|
|
|
width: 373px;
|
|
|
box-sizing: border-box;
|
|
|
@@ -240,9 +399,11 @@ export default {
|
|
|
// border-width: 1px;
|
|
|
border-style: solid;
|
|
|
position: relative;
|
|
|
+
|
|
|
+ .box {
|
|
|
margin-top: 30px;
|
|
|
}
|
|
|
+
|
|
|
.box-header {
|
|
|
position: absolute;
|
|
|
top: -30px;
|
|
|
@@ -253,17 +414,21 @@ export default {
|
|
|
padding: 0 130px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
+
|
|
|
.box-main {
|
|
|
padding: 30px 15px 20px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.box1 {
|
|
|
margin-top: 275px;
|
|
|
+
|
|
|
.box-main {
|
|
|
// padding: 30px 15px 20px;
|
|
|
padding-left: 0;
|
|
|
padding-right: 0;
|
|
|
}
|
|
|
+
|
|
|
.cybz-content {
|
|
|
width: 305px;
|
|
|
height: 75px;
|
|
|
@@ -271,6 +436,7 @@ export default {
|
|
|
display: block;
|
|
|
// margin-top: 30px;
|
|
|
}
|
|
|
+
|
|
|
.cybz-content-text {
|
|
|
// display: flex;
|
|
|
display: grid;
|
|
|
@@ -282,12 +448,14 @@ export default {
|
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
|
font-size: 12px;
|
|
|
color: #333;
|
|
|
+
|
|
|
.cybz-content-text-item {
|
|
|
// width: 0;
|
|
|
// flex: auto;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.share-button {
|
|
|
display: block;
|
|
|
margin: auto;
|
|
|
@@ -302,25 +470,45 @@ export default {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.box2 {
|
|
|
.label {
|
|
|
// font-size: 14px;
|
|
|
}
|
|
|
+
|
|
|
.value {
|
|
|
color: #ff6600;
|
|
|
// font-size: 24px;
|
|
|
}
|
|
|
+
|
|
|
.box-main {
|
|
|
padding-left: 20px;
|
|
|
padding-right: 20px;
|
|
|
}
|
|
|
}
|
|
|
-.box4 {
|
|
|
+
|
|
|
+.box3 {
|
|
|
.box-main {
|
|
|
// padding-left: 20px;
|
|
|
// padding-top: 0;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.code-table {
|
|
|
+ // width: 100%;
|
|
|
+ tr {
|
|
|
+ height: 30px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ height: 30px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .copy-btn {
|
|
|
+ min-width: 0 !important;
|
|
|
+ height: auto !important;
|
|
|
+ padding: 0 !important;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
-
|
|
|
-
|
zengzhixiang
