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.
653 lines
15 KiB
653 lines
15 KiB
<template>
|
|
<view class="invite">
|
|
<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">
|
|
<view class="btn" @click="openPage(1)">邀请记录</view>
|
|
<view class="rule" @click="openPage(4)">邀请规则</view>
|
|
</view>
|
|
<view class="invite-bd">
|
|
<view class="a">
|
|
<view class="title">邀请商家越多 赚越多</view>
|
|
<view class="desc">服务商权益</view>
|
|
<view class="content">
|
|
<view class="item">
|
|
<image src="https://www.amiami.com.cn/static/news1/1@2x.png"></image>
|
|
<view class="text">商家流水奖励</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.amiami.com.cn/static/news1/2@2x.png"></image>
|
|
<view class="text">服务商礼包</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.amiami.com.cn/static/news1/3@2x.png"></image>
|
|
<view class="text">权益更多</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="a">
|
|
<view class="title">
|
|
<image src="https://www.amiami.com.cn/static/news1/zuo@2x.png"></image>怎么邀请好友<image
|
|
src="https://www.amiami.com.cn/static/news1/you@2x.png"></image>
|
|
</view>
|
|
<view class="content" style="margin-top: 30rpx;">
|
|
<view class="item">
|
|
<image src="https://www.amiami.com.cn/static/news1/4@2x.png"></image>
|
|
<view class="text">点击立即邀请</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.amiami.com.cn/static/news1/5@2x.png"></image>
|
|
<view class="text">生成邀请海报</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.amiami.com.cn/static/news1/6@2x.png"></image>
|
|
<view class="text">转发邀请商家</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="a">
|
|
<view class="title">
|
|
<image src="https://www.amiami.com.cn/static/news1/zuo@2x.png"></image>邀请小技巧<image
|
|
src="https://www.amiami.com.cn/static/news1/you@2x.png"></image>
|
|
</view>
|
|
<view class="desc1">邀请成功率提高200%</view>
|
|
<view class="content">
|
|
<view class="li">邀请您的同行，跨行商家，成功率高</view>
|
|
<view class="li">授权通讯录找到您的同城商家，成功率提高200%</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="tixian" @click="openPage(2)"><image src="https://www.amiami.com.cn/static/news1/提现记录@2x.png"></image>立即提现</view> -->
|
|
</view>
|
|
<view class="invite-popup" v-if="isPopup">
|
|
<view class="popup">
|
|
<image class="bg" mode="heightFix" show-menu-by-longpress :src="qrcode1"></image>
|
|
<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>
|
|
<view class="invite-fd">
|
|
<view class="btn" @click="openPage(3)">立即邀请</view>
|
|
</view>
|
|
<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'
|
|
export default {
|
|
data() {
|
|
return {
|
|
qrcode1: "",
|
|
qrcode: "",
|
|
userInfo: {},
|
|
backgroundBg: {
|
|
"background": "rgba(255,255,255,0.22)"
|
|
},
|
|
backgroundBg1: {
|
|
"background-color": "transparent"
|
|
},
|
|
isPopup: false,
|
|
info: {},
|
|
info1: {},
|
|
list: [],
|
|
devicePixelRatio: 750 / uni.getSystemInfoSync().windowHeight
|
|
}
|
|
},
|
|
onReady() {
|
|
// this.getList();
|
|
this.getCarousel()
|
|
// this.getList1();
|
|
},
|
|
onShow() {
|
|
if (uni.getStorageSync("AccessToken")) {
|
|
this.userInfo = uni.getStorageSync("userInfo");
|
|
} else {
|
|
this.userInfo = {}
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取预售规则
|
|
getCarousel() {
|
|
const app = this;
|
|
app.list = []
|
|
Api.getAgreement({
|
|
type: 'invite_notice'
|
|
})
|
|
.then(result => {
|
|
if (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];
|
|
});
|
|
},
|
|
createImge() {
|
|
const that = this;
|
|
ctx.fillRect(0, 0, 702 / that.devicePixelRatio, 1248 / that.devicePixelRatio);
|
|
uni.downloadFile({
|
|
url: 'https://www.amiami.com.cn/static/news1/business.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)
|
|
// }
|
|
// }
|
|
// })
|
|
}
|
|
})
|
|
|
|
},
|
|
})
|
|
|
|
}
|
|
})
|
|
|
|
|
|
},
|
|
//生成海报
|
|
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
|
|
// #ifndef H5
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: tempFilePath,
|
|
success(data) {
|
|
app.$success('保存成功')
|
|
},
|
|
fail(err) {
|
|
if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
|
|
app.$toast('请允许访问相册后重试 (右上角菜单 - 设置 - 相册)', 3000)
|
|
}
|
|
}
|
|
})
|
|
// #endif
|
|
// #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 getList1() {
|
|
const {
|
|
status,
|
|
data
|
|
} = await newFunApi.inviteStatistics({});
|
|
if (status == 200) {
|
|
this.info1 = data;
|
|
}
|
|
},
|
|
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>
|
|
.invite {
|
|
background: #f7e5cb url(https://www.amiami.com.cn/static/news1/bg@2x.png) center -30rpx no-repeat;
|
|
background-size: 100% auto;
|
|
min-height: 100vh;
|
|
padding-bottom: 150rpx;
|
|
|
|
.myCanvas {
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
|
|
&-fd {
|
|
width: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
background-color: #f7e5cb;
|
|
padding: 20rpx 30rpx 40rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.btn {
|
|
width: 642rpx;
|
|
line-height: 90rpx;
|
|
background: #F34A40;
|
|
border-radius: 90rpx;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
&-popup {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 55;
|
|
|
|
.popup {
|
|
display: flex;
|
|
justify-content: center;
|
|
/* 水平居中 */
|
|
width: 672rpx;
|
|
height: 912rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -336rpx;
|
|
top: 50%;
|
|
margin-top: -556rpx;
|
|
z-index: 2;
|
|
|
|
.bg {
|
|
width: 672rpx;
|
|
height: 100%;
|
|
border-radius: 26rpx;
|
|
}
|
|
|
|
.qrcode {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
position: absolute;
|
|
right: 25rpx;
|
|
top: 670rpx;
|
|
border: 8rpx solid #FFFFFF;
|
|
z-index: 2;
|
|
border-radius: 5rpx;
|
|
}
|
|
|
|
.tips {
|
|
width: 672rpx;
|
|
height: 80rpx;
|
|
position: absolute;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
line-height: 80rpx;
|
|
color: #212121;
|
|
left: 50%;
|
|
margin-left: -336rpx;
|
|
bottom: -120rpx;
|
|
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;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&-hd {
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 435rpx;
|
|
position: relative;
|
|
|
|
.rule {
|
|
width: 50rpx;
|
|
height: 170rpx;
|
|
border-radius: 20rpx 0px 0px 20rpx;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
right: 0;
|
|
top: 80rpx;
|
|
z-index: 2;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn {
|
|
width: 50rpx;
|
|
height: 170rpx;
|
|
border-radius: 20rpx 0px 0px 20rpx;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
right: 0;
|
|
top: 280rpx;
|
|
z-index: 2;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&-bd {
|
|
padding: 0 24rpx 24rpx;
|
|
overflow: hidden;
|
|
|
|
.a {
|
|
width: 100%;
|
|
min-height: 290rpx;
|
|
background: #FAF4ED;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 20rpx;
|
|
padding-bottom: 50rpx;
|
|
overflow: hidden;
|
|
|
|
.title {
|
|
line-height: 100rpx;
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #9A372D;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
image {
|
|
width: 52rpx;
|
|
height: 24rpx;
|
|
margin: 0 20rpx;
|
|
}
|
|
}
|
|
|
|
.desc1 {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #9A372D;
|
|
position: relative;
|
|
}
|
|
|
|
.desc {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #9A372D;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
width: 100rpx;
|
|
height: 1px;
|
|
background-color: #9A372D;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 150rpx;
|
|
z-index: 2;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
width: 100rpx;
|
|
height: 1px;
|
|
background-color: #9A372D;
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 150rpx;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
margin-top: 45rpx;
|
|
overflow: hidden;
|
|
|
|
.item {
|
|
width: 33.3%;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #9A372D;
|
|
float: left;
|
|
|
|
image {
|
|
width: 122rpx;
|
|
height: 122rpx;
|
|
display: block;
|
|
margin: 0 auto 20rpx;
|
|
}
|
|
}
|
|
|
|
.li {
|
|
padding: 0 50rpx 0 80rpx;
|
|
position: relative;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #9A372D;
|
|
line-height: 45rpx;
|
|
|
|
&::after {
|
|
content: "";
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
background: #9A372D;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50rpx;
|
|
top: 50%;
|
|
margin-top: -5rpx;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.tixian {
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 4rpx 12rpx 0px rgba(77, 13, 17, 0.16);
|
|
border-radius: 50%;
|
|
|
|
image {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
display: block;
|
|
margin: 15rpx auto;
|
|
}
|
|
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
text-align: center;
|
|
color: #9A372D;
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 30%;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|