<template>
|
<view class="inviteFriends-wrapper wrapperLayer">
|
<titleBar :titleText='"邀请好友"' :pageForm='"inviteFriends"'></titleBar>
|
<view class="swiper-container">
|
<view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
|
<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{'--index': item.zIndex,'--left':item.mLeft}]"
|
:data-direction="direction">
|
<view class="swiper-item">
|
<image :src="item.img" mode="aspectFill"></image>
|
<view class="code rowCenCen">
|
<image :src="codeSrc" mode="aspectFill"></image>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="pagebottom-container pd30 colCen">
|
<view class="inviteCode-container pd30 rowCenBet">
|
<view class="left-code">
|
我的邀请码：{{user.invitation_code}}
|
</view>
|
<view class="clipbtn rowCenCen" @tap="clipcode()">
|
<view>复制</view>
|
</view>
|
</view>
|
|
<view class="invite-step colCen">
|
<view class="step-title">
|
邀请步骤
|
</view>
|
<view class="step-list">
|
1. 将邀请码或海报分享给好友</br>
|
⒉ 好友注册时填写您的邀请码</br>
|
3. 好友即可0元购买改商品</br>
|
未来他/她有购物订单,您可获得佣金奖励,并自动计入您的帐户
|
</view>
|
</view>
|
|
<view class="bottom-options-container rowCenAro">
|
<view class="option-items-container colCen" @tap='copyLink()'>
|
<image class="icon-box" src="../../static/images/mine/link.png" mode="aspectFill"></image>
|
<view class="option-name">
|
分享链接
|
</view>
|
<view class="option-explain">
|
一键授权
|
</view>
|
</view>
|
<view class="option-items-container colCen" @tap='showModel()'>
|
<image class="icon-box" src="../../static/images/mine/pic.png" mode="aspectFill"></image>
|
<view class="option-name">
|
分享海报
|
</view>
|
<view class="option-explain">
|
强力锁粉
|
</view>
|
</view>
|
<!-- <view class="option-items-container colCen" @tap="goodsnew()">
|
<image class="icon-box" src="../../static/images/mine/code.png" mode="aspectFill"></image>
|
<view class="option-name">
|
商品拉新
|
</view>
|
<view class="option-explain">
|
助力社群
|
</view>
|
</view> -->
|
</view>
|
</view>
|
|
|
<u-popup v-model="shareShow" mode="bottom" border-radius="14" height="auto">
|
<view class="share-container colCen">
|
<view class="share-title rowCenCen">
|
<view class="title-text">
|
分享到
|
</view>
|
</view>
|
<view class="shareList rowCen">
|
<view class="items-container colCen" @tap='sharewx()'>
|
<view class="icon-box defIcon">
|
<image src="../../static/images/mine/wxshare.png" mode=""></image>
|
</view>
|
<view class="modeName">
|
微信好友
|
</view>
|
</view>
|
<view class="items-container colCen" @tap='sharepyq()'>
|
<view class="icon-box defIcon">
|
<image src="../../static/images/mine/sharefriend.png" mode=""></image>
|
</view>
|
<view class="modeName">
|
朋友圈
|
</view>
|
</view>
|
<view class="items-container colCen" @tap='shareqq()'>
|
<view class="icon-box defIcon">
|
<image src="../../static/images/mine/shareqq.png" mode=""></image>
|
</view>
|
<view class="modeName">
|
QQ
|
</view>
|
</view>
|
<view class="items-container colCen" @tap='savepic()'>
|
<view class="icon-box defIcon">
|
<image src="../../static/images/app/saveimg.png" mode=""></image>
|
</view>
|
<view class="modeName">
|
保存相册
|
</view>
|
</view>
|
</view>
|
|
<view class="cancelbox rowCenCen" @click="closeModel()">
|
<view class="canceltext">
|
取消
|
</view>
|
</view>
|
</view>
|
</u-popup>
|
<canvas canvas-id="qrcode" class="canvass" style="width: 260rpx;height: 260rpx;opacity: 0;" />
|
<canvas canvas-id="sharePoster" class="canvass" :style="{ width: canvasInfo.canvasW + 'px', height: canvasInfo.canvasH + 'px'}" />
|
</view>
|
</template>
|
|
<script>
|
import util from '../../utils/utils.js'
|
import uQRCode from '../../utils/qrcode.js'
|
import titleBar from '../../components/backTitlebar.vue'
|
let qrcode
|
export default {
|
components: {
|
titleBar
|
},
|
data() {
|
return {
|
code: '',
|
codeSrc: '',
|
direction: '',
|
user: '',
|
swiperList: [],
|
|
shareShow: false,
|
bannerUrl: '',
|
|
CVS: null,
|
canvasInfo: {
|
canvasW: 750,
|
canvasH: 1334,
|
},
|
shareUrl: ''
|
}
|
},
|
onLoad() {
|
this.getpageInfo()
|
this.user = util.getCacheSync('userInfo')
|
this.makeCode()
|
},
|
methods: {
|
showModel() {
|
this.$nextTick(()=>{
|
this.getbanner()
|
})
|
},
|
closeModel() {
|
this.shareShow = false
|
},
|
|
async getbanner() {
|
uni.showLoading()
|
let goodsPic = await this.getImageInfo(this.bannerUrl) //广告图
|
console.log(goodsPic);
|
this.CVS = uni.createCanvasContext('sharePoster', this);
|
this.canvasInfo.canvasW = 750
|
this.canvasInfo.canvasH = 1334
|
this.CVS.setFillStyle('white'); //canvas背景颜色
|
this.CVS.fillRect(0, 0, 750, 1334); //canvas画布大小
|
|
this.CVS.drawImage(goodsPic.path, 0, 0, 750, 1334);
|
this.CVS.drawImage(this.codeSrc, 259, 1034, 232, 232);
|
|
this.CVS.setFontSize(28); //设置标题字体大小
|
this.CVS.setFillStyle('#ffffff'); //设置标题文本颜色
|
|
this.CVS.setTextAlign('center')
|
this.CVS.fillText('邀请码：' + this.user.invitation_code, 374, 1296)
|
this.CVS.draw(false, res => {
|
console.log(res);
|
uni.canvasToTempFilePath({
|
canvasId: 'sharePoster',
|
success: ress => {
|
console.log(ress);
|
uni.hideLoading()
|
this.shareShow = true
|
this.shareUrl = ress.tempFilePath
|
}
|
});
|
});
|
},
|
|
async getImageInfo(imgSrc) {
|
return new Promise((resolve, errs) => {
|
uni.getImageInfo({
|
src: imgSrc,
|
success: image => {
|
resolve(image);
|
},
|
fail: err => {
|
errs(err);
|
uni.hideLoading()
|
}
|
});
|
});
|
},
|
|
async makeCode() {
|
var globalData = util.getCacheSync('appInfo')
|
//var txt = globalData.appAndroidDownUrl
|
var txt = globalData.invite_url + "?code="+this.user.invitation_code
|
console.log(txt)
|
// #ifdef APP-PLUS
|
//txt = plus.os.name == 'Android' ? globalData.appAndroidDownUrl : globalData.appIosDownUrl, // 生成内容
|
// #endif
|
qrcode = new uQRCode({
|
context: this, // 上下文环境
|
canvasId: 'qrcode', // canvas-id
|
usingComponents: false, // 是否是自定义组件
|
loadingText: '', // loading文字
|
text: txt, // 生成内容
|
size: uni.upx2px(260), // 二维码大小
|
cbResult: res => { // 生成二维码的回调
|
this.codeSrc = res
|
},
|
});
|
},
|
copyLink() {
|
var globalData = util.getCacheSync('appInfo')
|
// #ifdef APP-PLUS
|
var txtdata = globalData.invite_url + "?code="+this.user.invitation_code
|
// if (plus.os.name == 'Android') {
|
// txtdata = globalData.appName + '的下载链接为：' + globalData.appAndroidDownUrl +
|
// '\n邀请码：' + this.user.invitation_code
|
// } else {
|
// txtdata = globalData.appName + '的下载链接为：' + globalData.appIosDownUrl + '\n邀请码：' +
|
// this.user.invitation_code
|
// }
|
console.log(this.user)
|
uni.setClipboardData({
|
data: txtdata,
|
success: res => {
|
console.log(res)
|
uni.showToast({
|
title: '邀请链接已复制~快去分享给好友吧！',
|
icon: 'none'
|
})
|
uni.setStorageSync('clipboard', txtdata);
|
}
|
});
|
// #endif
|
},
|
|
clipcode(){
|
uni.setClipboardData({
|
data: this.user.invitation_code,
|
success: res => {
|
console.log(res)
|
uni.showToast({
|
title: '邀请码已复制~快去分享给好友吧！',
|
icon: 'none'
|
})
|
uni.setStorageSync('clipboard', this.user.invitation_code);
|
}
|
});
|
},
|
goodsnew() {
|
uni.navigateTo({
|
url: './pullNew'
|
})
|
},
|
getpageInfo() {
|
var globalData = util.getCacheSync('appInfo')
|
this.swiperList = globalData['inviteImgs'];
|
this.TowerSwiper('swiperList');
|
},
|
|
|
sharewx() {
|
uni.share({
|
provider: "weixin",
|
scene: "WXSceneSession",
|
type: 2,
|
imageUrl: this.shareUrl,
|
success: function(res) {
|
console.log("success:" + JSON.stringify(res));
|
},
|
fail: function(err) {
|
console.log("fail:" + JSON.stringify(err));
|
}
|
});
|
},
|
|
sharepyq() {
|
uni.share({
|
provider: "weixin",
|
scene: "WXSenceTimeline",
|
type: 2,
|
imageUrl: this.shareUrl,
|
success: function (res) {
|
console.log("success:" + JSON.stringify(res));
|
},
|
fail: function (err) {
|
console.log("fail:" + JSON.stringify(err));
|
}
|
});
|
},
|
|
shareqq(){
|
uni.share({
|
provider: "qq",
|
type: 2,
|
imageUrl: this.shareUrl,
|
success: function (res) {
|
console.log("success:" + JSON.stringify(res));
|
},
|
fail: function (err) {
|
console.log("fail:" + JSON.stringify(err));
|
}
|
});
|
},
|
|
savepic(){
|
uni.saveImageToPhotosAlbum({
|
filePath: this.shareUrl,
|
success: res => {
|
uni.showToast({
|
title:'保存相册成功~',
|
icon:'none'
|
})
|
this.closeModel()
|
},
|
fail(err) {
|
console.log(err);
|
},
|
});
|
},
|
|
|
|
DotStyle(e) {
|
this.dotStyle = e.detail.value
|
},
|
// cardSwiper
|
cardSwiper(e) {
|
this.cardCur = e.detail.current
|
},
|
// towerSwiper
|
// 初始化towerSwiper
|
TowerSwiper(name) {
|
let list = this[name];
|
for (let i = 0; i < list.length; i++) {
|
list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
|
list[i].mLeft = i - parseInt(list.length / 2)
|
}
|
this.swiperList = list
|
this.swiperList.forEach((items, index) => {
|
if (items.mLeft == 0) {
|
this.bannerUrl = items.img
|
}
|
})
|
},
|
|
// towerSwiper触摸开始
|
TowerStart(e) {
|
this.towerStart = e.touches[0].pageX
|
},
|
|
// towerSwiper计算方向
|
TowerMove(e) {
|
this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
|
},
|
|
// towerSwiper计算滚动
|
TowerEnd(e) {
|
let direction = this.direction;
|
let list = this.swiperList;
|
if (direction == 'right') {
|
let mLeft = list[0].mLeft;
|
let zIndex = list[0].zIndex;
|
for (let i = 1; i < this.swiperList.length; i++) {
|
this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
|
this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
|
}
|
this.swiperList[list.length - 1].mLeft = mLeft;
|
this.swiperList[list.length - 1].zIndex = zIndex;
|
} else {
|
let mLeft = list[list.length - 1].mLeft;
|
let zIndex = list[list.length - 1].zIndex;
|
for (let i = this.swiperList.length - 1; i > 0; i--) {
|
this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
|
this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
|
}
|
this.swiperList[0].mLeft = mLeft;
|
this.swiperList[0].zIndex = zIndex;
|
}
|
this.direction = ""
|
this.swiperList.forEach((items, index) => {
|
if (items.mLeft == 0) {
|
this.bannerUrl = items.img
|
}
|
})
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.inviteFriends-wrapper {
|
width: 100%;
|
|
.swiper-container {
|
width: 100%;
|
height: 665rpx;
|
|
.tower-swiper {
|
height: 100%;
|
|
.tower-item {
|
width: 374rpx;
|
height: 100%;
|
|
.swiper-item {
|
position: relative;
|
|
.code {
|
position: absolute;
|
width: 100%;
|
bottom: 44rpx;
|
|
image {
|
width: 106rpx;
|
height: 106rpx;
|
z-index: 10;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.pagebottom-container {
|
width: 100%;
|
margin-bottom: 260rpx;
|
|
.inviteCode-container {
|
width: 100%;
|
height: 86rpx;
|
background: #FFFFFF;
|
border-radius: 16rpx;
|
|
.left-code {
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #333333;
|
}
|
|
.clipbtn {
|
width: 122rpx;
|
height: 52rpx;
|
background: linear-gradient(0deg, #7A11F2, #D31BF7);
|
border-radius: 26rpx;
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
}
|
|
.invite-step {
|
width: 100%;
|
margin-top: 30rpx;
|
background-color: #FFFFFF;
|
border-radius: 16rpx;
|
padding: 30rpx;
|
|
.step-title {
|
width: 100%;
|
}
|
|
.step-list {
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #666666;
|
line-height: 38rpx;
|
margin-top: 25rpx;
|
}
|
}
|
|
.bottom-options-container {
|
width: 100%;
|
background: #FFFFFF;
|
border-radius: 16rpx;
|
padding: 20rpx 0;
|
position: fixed;
|
bottom: 0;
|
|
.option-items-container {
|
.icon-box {
|
width: 96rpx;
|
height: 96rpx;
|
}
|
|
.option-name {
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #333333;
|
}
|
|
.option-explain {
|
font-size: 22rpx;
|
font-weight: 500;
|
color: #666666;
|
}
|
}
|
}
|
}
|
}
|
|
.tower-swiper .tower-item {
|
transform: scale(calc(0.65 + var(--index) / 10));
|
margin-left: calc(var(--left) * 430upx - 184upx);
|
z-index: var(--index);
|
}
|
|
.share-container {
|
width: 100%;
|
|
.share-title {
|
width: 100%;
|
height: 90rpx;
|
flex-wrap: wrap;
|
border-bottom: 1rpx solid #EFF1F7;
|
|
.title-text {
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #333333;
|
}
|
}
|
|
.shareList {
|
width: 100%;
|
flex-wrap: wrap;
|
border-bottom: 1rpx solid #EFF1F7;
|
margin-top: 45rpx;
|
|
.items-container {
|
width: 25%;
|
margin-bottom: 30rpx;
|
|
.icon-box {
|
width: 95rpx;
|
height: 95rpx;
|
}
|
|
.modeName {
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #333333;
|
margin-top: 15rpx;
|
}
|
}
|
}
|
|
.cancelbox {
|
width: 100%;
|
height: 90rpx;
|
|
.canceltext {
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #333333;
|
}
|
}
|
}
|
|
.canvass {
|
opacity: 0;
|
position: fixed;
|
pointer-events: none;
|
bottom: 0;
|
left: 0;
|
}
|
.pd30 {
|
padding: 0 30rpx;
|
}
|
</style>
|
