You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
672 lines
15 KiB
672 lines
15 KiB
<template>
|
|
<view class="invite" :id="`invite${styleIndex}`">
|
|
<view class="invite-notice">
|
|
<u-notice-bar mode="horizontal" :list="list" color="#fff" bg-color="rgba(255,255,255,0.22)"></u-notice-bar>
|
|
</view>
|
|
<view class="invite-hd">
|
|
<!-- <image :src="$picUrl+'/static/news/invite-bg.png'"></image> -->
|
|
<view v-if="!styleIndex" class="btn" @click="openPage(3)"></view>
|
|
<view v-else class="btn btn2" @click="openPage(3)"></view>
|
|
<view class="rule" @click="openPage(4)"></view>
|
|
</view>
|
|
<view class="invite-bd">
|
|
<view class="invite-bd-a">
|
|
<view class="a">
|
|
<view class="l">
|
|
累计邀请好友(人）
|
|
<view class="p">{{info.count_people}}</view>
|
|
</view>
|
|
<view class="l" style="border: none;">
|
|
累计现金奖励(元）
|
|
<view class="p">{{info.money}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="b" @click="openPage(1)">
|
|
我的邀请<u-icon name="arrow-right"></u-icon>
|
|
</view>
|
|
<view class="c" @click="openPage(2)">
|
|
立即提现<u-icon name="arrow-right"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="invite-bd-b">
|
|
<image :src="$picUrl+'/static/news/invite-bg2.png'"></image>
|
|
<view class="a">
|
|
<view class="l">
|
|
可得188积分
|
|
<!-- 可得{{info.integral}}积分
|
|
<br />{{info.coupon_name}} -->
|
|
</view>
|
|
<view class="l">
|
|
可返现3-5‰
|
|
<!-- 可返现{{info.one_order_rate}}% -->
|
|
</view>
|
|
<view class="l">
|
|
新人首单礼
|
|
<!-- {{info.one_order_rate}}元{{info.coupon_name}} -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="invite-bd-c">
|
|
<image :src="$picUrl+'/static/news/invite-bg3.png'"></image>
|
|
<view class="a">
|
|
<view class="l">
|
|
优惠券
|
|
<!-- {{info.one_order_rate}}元{{info.coupon_name}} -->
|
|
</view>
|
|
<view class="l">
|
|
积分
|
|
<!-- {{info.integral}}积分 -->
|
|
</view>
|
|
<view class="l">
|
|
长期返现
|
|
<!-- 首单返{{info.one_order_rate}}% -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="invite-bd-d">
|
|
<image :src="$picUrl+'/static/news/invite-bg4.png'"></image>
|
|
<view class="p" @click="openPage(3)">立即邀请</view>
|
|
</view> -->
|
|
</view>
|
|
<!-- -->
|
|
<view class="invite-popup" v-if="isPopup">
|
|
<view class="popup">
|
|
<image class="bg" show-menu-by-longpress :src="qrcode1"></image>
|
|
<!-- <image class="code" show-menu-by-longpress :src="qrcode"></image>
|
|
<view class="qrcode">{{userInfo.user_id}}</view> -->
|
|
<view class="tips">
|
|
<view class="cancle" @click="download(1)">取消</view>
|
|
<view class="sure" @click="download(2)">保存到相册</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<canvas id="myCanvas" class="myCanvas" canvas-id="myCanvas"
|
|
:style="{'width': 702/devicePixelRatio+'px',' height': 1248/devicePixelRatio+'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
|
|
<addShuiyin />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const ctx = uni.createCanvasContext('myCanvas')
|
|
import {
|
|
createQrCodeImg
|
|
} from '@/utils/qrcode'
|
|
import * as newFunApi from '@/api/newFun'
|
|
import * as Api from '@/api/help'
|
|
import styleColor from '../styleColor';
|
|
export default {
|
|
data() {
|
|
return {
|
|
qrcode1: "",
|
|
qrcode: "",
|
|
userInfo: {},
|
|
backgroundBg: {
|
|
"background": "rgba(255,255,255,0.22)"
|
|
},
|
|
backgroundBg1: {
|
|
"background-color": "transparent"
|
|
},
|
|
isPopup: false,
|
|
info: {},
|
|
list: [],
|
|
devicePixelRatio: 750 / uni.getSystemInfoSync().windowHeight
|
|
}
|
|
},
|
|
computed: {
|
|
styleIndex() {
|
|
const index = uni.getStorageSync('styleIndex') || '';
|
|
return index;
|
|
},
|
|
},
|
|
watch: {
|
|
styleIndex: {
|
|
immediate: true,
|
|
handler() {
|
|
uni.setNavigationBarColor({
|
|
frontColor: '#ffffff',
|
|
backgroundColor: this.styleIndex > 0 ? styleColor.inviteNavBgColor[this.styleIndex - 1] : '#FF4A49',
|
|
})
|
|
},
|
|
},
|
|
},
|
|
onReady() {
|
|
this.getList();
|
|
this.getCarousel()
|
|
console.log(uni.getSystemInfoSync().devicePixelRatio)
|
|
},
|
|
onShow() {
|
|
if (uni.getStorageSync("AccessToken")) {
|
|
this.userInfo = uni.getStorageSync("userInfo");
|
|
// this.qrcode = createQrCodeImg(this.userInfo.user_id, { 'size': 500 });
|
|
} else {
|
|
this.userInfo = {}
|
|
// this.qrcode = ""
|
|
}
|
|
},
|
|
methods: {
|
|
createImge() {
|
|
const that = this;
|
|
ctx.fillRect(0, 0, 702 / that.devicePixelRatio, 1248 / that.devicePixelRatio);
|
|
uni.downloadFile({
|
|
url: 'https://www.royaum.com.cn/static/3@2x.png',
|
|
success(res) {
|
|
ctx.drawImage(res.tempFilePath, 0, 0, 702 / that.devicePixelRatio, 1248 / that
|
|
.devicePixelRatio);
|
|
uni.downloadFile({
|
|
url: that.qrcode,
|
|
success: (res2) => {
|
|
ctx.save(); // 保存
|
|
ctx.beginPath(); // 开始绘制
|
|
ctx.arc(162 / that.devicePixelRatio / 2 + 285 / that.devicePixelRatio,
|
|
162 / that.devicePixelRatio / 2 + 870 / that.devicePixelRatio,
|
|
162 / that.devicePixelRatio / 2, 0, Math.PI * 2, false);
|
|
ctx.clip();
|
|
ctx.drawImage(res2.tempFilePath, 285 / that.devicePixelRatio, 870 /
|
|
that.devicePixelRatio, 162 / that.devicePixelRatio, 162 / that
|
|
.devicePixelRatio);
|
|
// 恢复之前保存的绘图上下文
|
|
ctx.restore();
|
|
// 邀请码
|
|
ctx.setFontSize(45 / that.devicePixelRatio);
|
|
ctx.setFillStyle('#cf100d');
|
|
ctx.fillText(that.userInfo.user_id, 200 / that.devicePixelRatio, 1213 /
|
|
that.devicePixelRatio);
|
|
ctx.draw()
|
|
uni.canvasToTempFilePath({
|
|
width: 702 / that.devicePixelRatio,
|
|
height: 1248 / that.devicePixelRatio,
|
|
destWidth: 702 / that.devicePixelRatio,
|
|
destHeight: 1248 / that.devicePixelRatio,
|
|
canvasId: 'myCanvas',
|
|
success: function(res) {
|
|
// 在H5平台下，tempFilePath 为 base64
|
|
console.log(res.tempFilePath)
|
|
that.qrcode1 = res.tempFilePath;
|
|
that.isPopup = true;
|
|
ctx.clearRect(0,0,702,1248);
|
|
// uni.saveImageToPhotosAlbum({
|
|
// filePath: res.tempFilePath,
|
|
// success(data) {
|
|
// that.$success('保存成功')
|
|
// },
|
|
// fail(err) {
|
|
// if (err.errMsg ===
|
|
// 'saveImageToPhotosAlbum:fail auth deny'
|
|
// ) {
|
|
// that.$toast(
|
|
// '请允许访问相册后重试 (右上角菜单 - 设置 - 相册)',
|
|
// 3000)
|
|
// }
|
|
// }
|
|
// })
|
|
}
|
|
})
|
|
|
|
},
|
|
})
|
|
|
|
}
|
|
})
|
|
|
|
|
|
},
|
|
// 获取预售规则
|
|
getCarousel() {
|
|
const app = this;
|
|
app.list = []
|
|
Api.getAgreement({
|
|
type: 'invite_notice'
|
|
})
|
|
.then(result => {
|
|
if (result.data.detail && result.data.detail.content) {
|
|
app.list.push(this.formatRichText(result.data.detail.content))
|
|
}
|
|
})
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
formatRichText(value) {
|
|
value = value.replace(/\s*/g, ""); //去掉空格
|
|
value = value.replace(/<[^>]+>/g, ""); //去掉所有的html标记
|
|
value = value.replace(/↵/g, ""); //去掉所有的↵符号
|
|
value = value.replace(/[\r\n]/g, "") //去掉回车换行
|
|
value = value.replace(/ /g, "") //去掉空格
|
|
value = this.convertIdeogramToNormalCharacter(value);
|
|
return value
|
|
},
|
|
convertIdeogramToNormalCharacter(val) {
|
|
const arrEntities = {
|
|
'lt': '<',
|
|
'gt': '>',
|
|
'nbsp': ' ',
|
|
'amp': '&',
|
|
'quot': '"'
|
|
};
|
|
return val.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
|
|
return arrEntities[t];
|
|
});
|
|
},
|
|
//生成海报
|
|
async InviteUserPoster() {
|
|
const {
|
|
status,
|
|
data
|
|
} = await newFunApi.InviteUserPoster({});
|
|
if (status == 200) {
|
|
console.log(data)
|
|
this.qrcode = data.imageUrl;
|
|
this.createImge();
|
|
}
|
|
},
|
|
download(type) {
|
|
const app = this
|
|
app.isPopup = false;
|
|
if (type == 1) {
|
|
return;
|
|
} else {
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
})
|
|
app.onSaveImage(app.qrcode1)
|
|
// this.createImge();
|
|
}
|
|
return;
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
})
|
|
// 下载海报图片
|
|
uni.downloadFile({
|
|
url: app.qrcode,
|
|
success(res) {
|
|
console.log(res)
|
|
uni.hideLoading()
|
|
// 图片保存到相册
|
|
app.onSaveImage(res.tempFilePath)
|
|
},
|
|
fail(res) {
|
|
console.log('fail', res)
|
|
uni.hideLoading()
|
|
app.$toast('很抱歉，自动保存失败 请点击图片后长按手动保存', 3000)
|
|
}
|
|
})
|
|
},
|
|
// 图片保存到相册
|
|
onSaveImage(tempFilePath) {
|
|
const app = this
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: tempFilePath,
|
|
success(data) {
|
|
app.$success('保存成功')
|
|
},
|
|
fail(err) {
|
|
if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
|
|
app.$toast('请允许访问相册后重试 (右上角菜单 - 设置 - 相册)', 3000)
|
|
}
|
|
}
|
|
})
|
|
// #ifdef H5
|
|
const names = tempFilePath.split('/')
|
|
const fileName = names[names.length - 1]
|
|
app.fileDownLoadForH5({
|
|
name: fileName,
|
|
blob: tempFilePath
|
|
})
|
|
// #endif
|
|
},
|
|
|
|
// 兼容H5端下载图片
|
|
// #ifdef H5
|
|
fileDownLoadForH5({
|
|
name,
|
|
blob
|
|
}) {
|
|
const linkElement = document.createElement('a')
|
|
linkElement.setAttribute('href', blob)
|
|
linkElement.setAttribute('downLoad', name)
|
|
linkElement.click()
|
|
},
|
|
// #endif
|
|
async getList() {
|
|
uni.showLoading({
|
|
title: "加载中"
|
|
})
|
|
const {
|
|
status,
|
|
data
|
|
} = await newFunApi.inviteInit({});
|
|
if (status == 200) {
|
|
uni.hideLoading();
|
|
this.info = data;
|
|
console.log(this.info)
|
|
}
|
|
},
|
|
openPage(index) {
|
|
if (!uni.getStorageSync("AccessToken")) {
|
|
uni.navigateTo({
|
|
url: "/pages/login/index"
|
|
})
|
|
return;
|
|
}
|
|
if (index == 1) {
|
|
uni.navigateTo({
|
|
url: "/pages/invite/list"
|
|
})
|
|
} else if (index == 2) {
|
|
uni.navigateTo({
|
|
url: "/pages/news/user/withdrawal?balance=" + this.userInfo.withdrawal_money
|
|
})
|
|
} else if (index == 3) {
|
|
if(!this.qrcode1){
|
|
this.InviteUserPoster();
|
|
}else{
|
|
this.isPopup = true;
|
|
}
|
|
|
|
} else if (index == 4) {
|
|
uni.navigateTo({
|
|
url: "/pages/invite/rule"
|
|
})
|
|
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './style.scss';
|
|
.invite {
|
|
background: url(https://www.royaum.com.cn/static/news/invite-bg.png?t=2) center -40px no-repeat;
|
|
background-size: 100% auto;
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 100vh;
|
|
|
|
.myCanvas {
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
|
|
&-popup {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 55;
|
|
|
|
.popup {
|
|
width: 620rpx;
|
|
height: 1220rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -310rpx;
|
|
top: 50%;
|
|
margin-top: -635rpx;
|
|
z-index: 2;
|
|
|
|
.bg {
|
|
width: 620rpx;
|
|
height: 1102rpx;
|
|
}
|
|
|
|
.code {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 305rpx;
|
|
z-index: 2;
|
|
margin-left: -62rpx;
|
|
}
|
|
|
|
.qrcode {
|
|
width: 200rpx;
|
|
height: 80rpx;
|
|
position: absolute;
|
|
left: 70px;
|
|
bottom: 115rpx;
|
|
z-index: 2;
|
|
font-size: 45rpx;
|
|
color: #cf100d;
|
|
text-align: center;
|
|
}
|
|
|
|
.tips {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
position: absolute;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
line-height: 80rpx;
|
|
color: #212121;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.cancle {
|
|
flex: 1;
|
|
background-color: #FFFFFF;
|
|
margin-right: 30rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.sure {
|
|
border-radius: 10rpx;
|
|
flex: 1;
|
|
color: #FFFFFF;
|
|
background-color: #FF4A49;
|
|
}
|
|
}
|
|
|
|
.close {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -150rpx;
|
|
color: #FFFFFF;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&-notice {
|
|
// background-color: #FF5554;
|
|
width: 100%;
|
|
height: 75rpx;
|
|
}
|
|
|
|
&-hd {
|
|
width: 100%;
|
|
text-align: center;
|
|
// background-color: #FF5554;
|
|
height: 536rpx;
|
|
position: relative;
|
|
|
|
.rule {
|
|
width: 130rpx;
|
|
height: 50rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 208rpx;
|
|
z-index: 2;
|
|
}
|
|
|
|
.btn {
|
|
width: 396rpx;
|
|
height: 90rpx;
|
|
position: absolute;
|
|
left: 51%;
|
|
margin-left: -205rpx;
|
|
bottom: 2rpx;
|
|
z-index: 2;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
border-radius: 45rpx;
|
|
&.btn2 {
|
|
bottom: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-bd {
|
|
padding: 0 32rpx 60rpx 32rpx;
|
|
// background: linear-gradient(181deg, #FF5F55 0%, #FAC39D 100%);
|
|
overflow: hidden;
|
|
|
|
&-a {
|
|
width: 100%;
|
|
height: 366rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 12rpx;
|
|
margin-top: 40rpx;
|
|
|
|
.a {
|
|
padding: 50rpx 0 30rpx;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
|
|
.l {
|
|
flex: 1;
|
|
border-right: 1px solid #DDDDDD;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #414141;
|
|
|
|
.p {
|
|
font-size: 54rpx;
|
|
font-weight: 500;
|
|
color: #FF5251;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.b {
|
|
width: 396rpx;
|
|
height: 88rpx;
|
|
background: linear-gradient(180deg, #FD5B54 0%, #FFC277 100%);
|
|
border-radius: 106rpx;
|
|
border: 1px solid #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.c {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
color: #FF5251;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
|
|
&-b {
|
|
width: 100%;
|
|
height: 515rpx;
|
|
margin-top: 20rpx;
|
|
position: relative;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.a {
|
|
width: 100%;
|
|
bottom: 40rpx;
|
|
padding: 0 25rpx;
|
|
box-sizing: border-box;
|
|
z-index: 1;
|
|
left: 0;
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.l {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #FF4D4C;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-c {
|
|
width: 100%;
|
|
height: 375rpx;
|
|
margin-top: 20rpx;
|
|
position: relative;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.a {
|
|
width: 260rpx;
|
|
bottom: -60rpx;
|
|
box-sizing: border-box;
|
|
z-index: 1;
|
|
right: 0;
|
|
position: absolute;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.l {
|
|
width: 130rpx;
|
|
height: 135rpx;
|
|
text-align: center;
|
|
font-size: 22rpx;
|
|
font-weight: 500;
|
|
color: #414141;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-d {
|
|
width: 100%;
|
|
height: 108rpx;
|
|
position: relative;
|
|
margin-top: 20rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.p {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 2;
|
|
text-align: center;
|
|
line-height: 105rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #FF5251;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|