<template>
|
<view class="content bg">
|
<view class="invite-wrapper">
|
<text class="slogan">
|
成为经销商，推广享收益
|
</text>
|
<image class="image" mode="aspectFit" src="../../static/img/invite-banner.png" />
|
</view>
|
|
<view class="task-title">
|
<text>
|
<text style="font-size: 17px; font-weight: 600;">任务</text> 完成以下两个任务,即可成为经销商
|
</text>
|
</view>
|
|
<view class="invite-task">
|
<view class="task">
|
<text>任务1： 成功邀请好友</text>
|
<view class="progress">
|
<el-progress :percentage="5">2/5</el-progress>
|
</view>
|
<view class="progress-btn">
|
<el-tag>未完成</el-tag>
|
</view>
|
</view>
|
<el-divider></el-divider>
|
<view class="task">
|
<text>任务2： 注册一周内购买20个节点</text>
|
<view class="progress">
|
<el-progress :percentage="5">2/5</el-progress>
|
</view>
|
<view class="progress-btn">
|
<el-tag>未完成</el-tag>
|
</view>
|
</view>
|
</view>
|
<view class="invite-code">
|
<view class="uni-flex uni-row">
|
<view class="flex-item0">
|
<uni-qrcode class="invite-qrcode" ref="qrcode" cid="invite-qr-canvas" :text="inviteUrl" :margin="10" makeOnLoad
|
@makeComplete="qrcodeComplete" />
|
</view>
|
<view class="flex-item1">
|
<el-divider direction="vertical" style="height:5em"></el-divider>
|
</view>
|
<view class="flex-item2">
|
<view class="sub-item">
|
<text>专属邀请码 </text>
|
</view>
|
<view class="sub-item">
|
<text>专属邀请码 </text>
|
</view>
|
<view class="sub-item">
|
<el-button type="primary" size="mini" round @click="copyToclip">复制邀请码</el-button>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- <view class="invite-wrapper" v-show="false">
|
<uni-qrcode class="invite-qrcode" ref="qrcode" cid="invite-qr-canvas" :text="inviteUrl" :margin="10" makeOnLoad
|
@makeComplete="qrcodeComplete" />
|
<view class="share-btn">
|
<button type="primary" @click="shareLink">分享链接</button>
|
<button type="primary" @click="shareImage">分享图片</button>
|
</view>
|
<view class="share-btn">
|
<button type="primary" @click="toInvitedUser">我邀请的用户</button>
|
</view>
|
<uni-popup id="popupShare" ref="popupShare" type="share">
|
<uni-popup-share title="分享到" :shareType="shareType" @select="select"></uni-popup-share>
|
</uni-popup>
|
</view> -->
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState
|
} from 'vuex'
|
export default {
|
data() {
|
return {
|
inviteUrl: 'http://192.168.10.10',
|
qrcodeImagePath: '',
|
qrcodePath: '',
|
shareType: ''
|
}
|
},
|
onLoad() {
|
uni.showLoading({
|
title: '加载中...'
|
})
|
|
this.inviteUrl = 'https://login.tpl.dcloud.net.cn/#/pages/invite-reg/invite-reg?invite_code='
|
|
uni.hideLoading()
|
},
|
methods: {
|
copyInviteUrl() {
|
uni.setClipboardData({
|
data: this.inviteUrl
|
})
|
},
|
qrcodeComplete(path) {
|
this.qrcodeImagePath = path
|
},
|
shareLink() {
|
this.shareType = 'link'
|
this.$refs.popupShare.open()
|
},
|
shareImage() {
|
this.shareType = 'image'
|
this.$refs.popupShare.open()
|
},
|
select({
|
item
|
}) {
|
const shareTitle = '登录模板',
|
shareSummary = 'DCloud邀请您试用登录模板'
|
let params = {}
|
switch (`${this.shareType}_${item.name}`) {
|
case 'link_weixin':
|
params = {
|
type: 1,
|
summary: this.inviteUrl,
|
scene: 'WXSceneSession'
|
}
|
break;
|
case 'link_qq':
|
params = {
|
type: 1,
|
title: shareTitle,
|
summary: shareSummary,
|
href: this.inviteUrl
|
}
|
break;
|
case 'link_more':
|
uni.setClipboardData({
|
data: this.inviteUrl
|
})
|
return
|
case 'image_weixin':
|
params = {
|
type: 2,
|
imageUrl: this.qrcodeImagePath,
|
scene: 'WXSceneSession'
|
}
|
break;
|
case 'image_qq':
|
params = {
|
type: 2,
|
imageUrl: this.qrcodeImagePath
|
}
|
break;
|
case 'image_more':
|
uni.shareWithSystem({
|
type: 'image',
|
imageUrl: this.qrcodeImagePath
|
})
|
return
|
default:
|
break;
|
}
|
console.log(params);
|
uni.share({
|
provider: item.name,
|
...params,
|
success() {
|
uni.showModal({
|
content: '分享成功',
|
showCancel: false
|
})
|
},
|
fail(err) {
|
uni.showModal({
|
content: '分享失败：' + err.errMsg,
|
showCancel: false
|
})
|
}
|
})
|
|
},
|
toInvitedUser() {
|
uni.navigateTo({
|
url: '/pages/invited-user/invited-user'
|
})
|
},
|
copyToclip(content) {
|
// #ifdef APP-PLUS
|
var Context = plus.android.importClass('android.content.Context');
|
var main = plus.android.runtimeMainActivity();
|
var clip = main.getSystemService(Context.CLIPBOARD_SERVICE);
|
plus.android.invoke(clip, 'setText', content);
|
// #endif
|
|
uni.showToast({
|
title: '复制成功',
|
icon: 'none'
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.bg {
|
background-color: #58a1f1;
|
}
|
|
.invite-wrapper {
|
height: 400rpx;
|
display: flex;
|
padding: 20px;
|
flex-direction: column;
|
align-items: center;
|
/* background: url(../../static/img/invite-banner.png) no-repeat;
|
background-size: cover;
|
background-position: center 0; */
|
}
|
|
.slogan {
|
font-size: 1.8em;
|
margin: 20px;
|
color: #fff;
|
}
|
|
.task-title {
|
color: #fff;
|
margin-left: 20px;
|
}
|
|
.invite-task,
|
.invite-code {
|
margin: 10px 20px;
|
background-color: #fff;
|
border: 4px solid #ffcc00;
|
border-radius: 10px;
|
}
|
|
.invite-task {
|
height: 350rpx;
|
}
|
|
.task {
|
margin: 5%;
|
height: 28%;
|
}
|
|
.progress {
|
width: 40%;
|
position: absolute;
|
margin: 2% 13%;
|
}
|
|
.progress-btn {
|
float: right;
|
margin-top: 5%;
|
}
|
|
.invite-code {
|
height: 250rpx;
|
}
|
|
.invite-qrcode {
|
margin: 5% 10%;
|
}
|
|
.share-btn {
|
display: flex;
|
flex-direction: row;
|
padding: 20px 0px 10px 0px;
|
}
|
|
.share-btn button {
|
flex: 1;
|
margin: 0px 10px;
|
border-radius: 40px;
|
}
|
|
.flex-item0 {
|
width: 40%;
|
line-height: 250rpx;
|
padding: 10rpx;
|
;
|
}
|
|
.flex-item1 {
|
width: 20%;
|
line-height: 250rpx;
|
text-align: center;
|
}
|
|
.flex-item2 {
|
width: 40%;
|
line-height: 250rpx;
|
text-align: center;
|
margin-right: 15rpx;
|
}
|
|
.sub-item {
|
height: 50rpx;
|
line-height: 120rpx;
|
}
|
|
.el-divider--vertical {
|
height: 5em;
|
}
|
</style>
|
