<!--
|
* @Descripttion: 分享邀请码
|
* @version: 1.0.1
|
* @Author: huangpan
|
* @Date: 2021-10-19 16:22:44
|
-->
|
<template>
|
<div>
|
<div class="share-container" :style="{height:`${screenHeight}px`}">
|
<!-- 背景区域 -->
|
<canvas id="myCanvas" ref="myCanvas" :width="screenWidth" :height="screenHeight"
|
:style="{width:`${screenWidth}px`,height:`${screenHeight}px`}">
|
</canvas>
|
<div style="display:none;">
|
<img ref="conf0" :src="imgUrl" class="img-style" />
|
</div>
|
<!-- 内容区域 -->
|
<div class="con" :style="{width:`${screenWidth}px`,height:`${screenHeight}px`}"
|
v-if="isCompleted">
|
<nav-bar title="分享邀请码" leftIcon="arrow-left" :autoBack="false"
|
backgroundColor="rgba(000, 000, 000, 0)" :fixed="false" color="#FFF"
|
@clickLeft="clickLeft"></nav-bar>
|
<div class="search-area row-between">
|
<input :maxlength="6" v-model="inviteCode" placeholder="请输入被邀请人的邀请码"
|
class="invite-input font24" />
|
<div class="pop-button" @click="confirmInviteCode">提交</div>
|
</div>
|
<div class="newShare-container">
|
<div class="yqm">我的邀请码</div>
|
<div class="yqm-code">{{ code }}</div>
|
<div class="btn">
|
<div class="btn-hb" @click="saveImage">保存海报</div>
|
<a class="copyClassUrl btn-fzyqm" data-clipboard-action="copy"
|
:data-clipboard-text="code" @click="copyLink">复制邀请码</a>
|
</div>
|
</div>
|
<div class="newShare-footer">
|
<div class="f-inner" @click="getRecordData">
|
<span>邀请记录</span>
|
<van-icon name="arrow-down" class="arrow-style" />
|
</div>
|
</div>
|
</div>
|
<!-- 邀请记录列表 -->
|
<van-action-sheet v-model="isShow" title="邀请记录">
|
<div class="content list">
|
<div class="tb">
|
<div class="list-line1">昵称</div>
|
<div class="list-line1">邀请码</div>
|
<div class="list-line1">邀请时间</div>
|
</div>
|
<div v-if="inviteRecodeList.length > 0" class="con-list">
|
<div class="cn" v-for="(item, index) in inviteRecodeList" :key="index">
|
<div class="list-line2">
|
<img class="pic-item-img"
|
:src="item.memberInfo.memberPic ? item.memberInfo.memberPic : defaultH" />
|
<span class="nick-style">{{ item.memberInfo.memberNickName }}</span>
|
</div>
|
<div class="list-line2">{{ item.memberInfo.inviteCode }}</div>
|
<div class="list-line2">{{ item.inviteeTime }}</div>
|
</div>
|
</div>
|
<div v-else class="empty-row">
|
<img :src="empyImg | ossProcess" class="empty-img" />
|
<div class="empty-text">暂无邀请记录</div>
|
</div>
|
</div>
|
</van-action-sheet>
|
<!-- 保存的海报 -->
|
<lPainter2 :yqmCode="code" id="imageWrapper" :style="{ top: `${screenHeight}px` }">
|
</lPainter2>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
bindInviteCode,
|
getInviteCode,
|
findBaseInfoByUserId,
|
queryMemberInvitationRecordList
|
} from '@/api/share/index'
|
import lPainter2 from './modules/lPainter2.vue'
|
import html2canvas from 'html2canvas'
|
import Clipboard from 'clipboard'
|
import { closeLoading, showLoading } from '@/utils/loading.js'
|
|
var baseUrl = process.env.VUE_APP_H5_URL
|
export default {
|
name: 'newShare',
|
components: {
|
lPainter2
|
},
|
data() {
|
return {
|
code: '', // 我的邀请码
|
inviteCode: '', // 对方邀请码
|
isShow: false,
|
inviteRecodeList: [], // 邀请记录
|
screenWidth: '0',
|
screenHeight: '0',
|
screenBackgroundSize: '0px 0px',
|
maxHeight: '',
|
// 默认头像
|
defaultH: require('../../assets/images/userM.png'),
|
// 背景图片
|
imgUrl: require('../../assets/images/share/new_share_bg.jpg'),
|
// 无数据图片
|
empyImg: require('../../assets/images/seckill/empy.png'),
|
// 是否加载完成
|
isCompleted: false
|
}
|
},
|
created() {
|
this.getHtmlSize()
|
this.getCode()
|
},
|
methods: {
|
getHtmlSize() {
|
const _this = this
|
const htmlWidth = window.innerWidth
|
const htmlHeight = window.innerHeight
|
const backgroundSize = `${window.innerWidth}px ${window.innerHeight}px`
|
_this.$nextTick(() => {
|
_this.screenWidth = htmlWidth
|
_this.screenHeight = htmlHeight
|
_this.screenBackgroundSize = backgroundSize
|
// *****************解决移动端糊的问题
|
const dpr = window.devicePixelRatio
|
// 在画布上绘制图片
|
var myCanvas = _this.$refs.myCanvas
|
var cxt = myCanvas.getContext('2d')
|
var img = _this.$refs.conf0
|
img.onload = () => {
|
closeLoading(0)
|
// 获取css的宽高
|
const { width: cssWidth, height: cssHeight } = myCanvas.getBoundingClientRect()
|
// 根据dpr，扩大canvas画布的像素，使1个canvas像素和1个物理像素相等
|
myCanvas.width = dpr * cssWidth
|
myCanvas.height = dpr * cssHeight
|
// 由于画布扩大，canvas的坐标系也跟着扩大，如果按照原先的坐标系绘图内容会缩小
|
// 所以需要将绘制比例放大
|
cxt.scale(dpr, dpr)
|
cxt.drawImage(img, 0, 0, window.innerWidth, window.innerHeight)
|
this.isCompleted = true
|
}
|
})
|
},
|
// 获取自己的邀请码
|
async getCode() {
|
const res = await getInviteCode()
|
this.code = res.data
|
},
|
// 获取被邀请人的邀请码
|
async getfindBaseInfoByUserId() {
|
try {
|
const res = await findBaseInfoByUserId()
|
if (res.code === '0') {
|
if (res.data.otherInviteCode) {
|
this.inviteCode = res.data.otherInviteCode
|
}
|
} else {
|
console.log(res.msg)
|
}
|
console.log(res, 'resasdfg')
|
} catch (error) {
|
console.log(error, 'error')
|
}
|
},
|
// 点击确定按钮
|
confirmInviteCode() {
|
if (!this.inviteCode) {
|
this.$toast('请输入邀请码')
|
return
|
}
|
this.bindInviteCode(this.inviteCode)
|
},
|
// 校验邀请码是否存在
|
bindInviteCode(value) {
|
bindInviteCode({ inviteCode: value }).then((res) => {
|
if (res.code === '0') {
|
this.$toast('绑定成功')
|
} else {
|
this.inviteCode = ''
|
this.$toast(res.msg)
|
}
|
})
|
},
|
// 保存图片
|
saveImage() {
|
const _this = this;
|
if (_this.$root.isIos) {
|
window.webkit.messageHandlers.base64ToPicture.postMessage(`${baseUrl}/lPainter2?code=${_this.code}`)
|
} else {
|
showLoading(0)
|
const _node = document.getElementById('imageWrapper')
|
html2canvas(_node, {
|
dpi: 350,
|
scale: 4,
|
logging: true,
|
useCORS: true // 允许使用跨域图片
|
}).then((canvas) => {
|
// base64路径
|
let _base64DataUrl = canvas.toDataURL('image/jpeg')
|
if (_base64DataUrl.indexOf('data:image/jpeg;base64,') != -1) {
|
_base64DataUrl = _base64DataUrl.replace('data:image/jpeg;base64,', '')
|
}
|
if (_base64DataUrl && _base64DataUrl.length > 0) {
|
const newArr = JSON.stringify(this.breakStr(_base64DataUrl, 100000, []))
|
window.wlyxls.base64ToPicture(newArr)
|
}
|
})
|
}
|
},
|
breakStr(str, step, receiver) {
|
// str 需要截取的字符串
|
// step 步长
|
// receiver 接收器，可以是字符串，也可以是数组
|
var remainder = str.length % step
|
var n = (str.length - remainder) / step
|
var type = typeof receiver
|
for (var i = 0; i < n; i++) {
|
if (type == 'string') {
|
receiver += str.slice(i * step, (i + 1) * step) + '\n'
|
} else {
|
receiver.push({
|
str: str.slice(i * step, (i + 1) * step)
|
})
|
}
|
}
|
if (remainder > 0) {
|
receiver.push({
|
str: str.slice(str.length - remainder, str.length)
|
})
|
}
|
return receiver
|
},
|
// 复制邀请码
|
copyLink() {
|
const _this = this
|
const clipboardUrl = new Clipboard('.copyClassUrl')
|
clipboardUrl.on('success', function () {
|
_this.$toast('邀请码复制成功')
|
})
|
clipboardUrl.on('error', function () {
|
console.log(clipboardUrl)
|
})
|
},
|
// 获取邀请记录
|
getRecordData() {
|
this.inviteRecodeList = []
|
queryMemberInvitationRecordList({}).then((res) => {
|
if (res.code === '0') {
|
this.inviteRecodeList = res.data
|
}
|
this.isShow = true
|
})
|
},
|
// 返回上一页
|
clickLeft() {
|
if (this.$root.isIos) {
|
window.webkit.messageHandlers.iosBrowserPop.postMessage('')
|
} else {
|
// navigateBack 返回 navigateClose关闭
|
window.wlyxls.navigateBack('')
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.loading-style {
|
margin: 0 auto; /*水平居中*/
|
position: relative;
|
top: 50%; /*偏移*/
|
transform: translateY(-50%);
|
}
|
.share-container {
|
position: relative;
|
overflow-y: hidden;
|
.img-style {
|
object-fit: cover;
|
}
|
#myCanvas,
|
.con {
|
position: absolute;
|
// top: 0;
|
}
|
.con {
|
.search-area {
|
position: absolute;
|
top: 108px;
|
padding: 0 30px;
|
width: calc(100% - 60px);
|
}
|
.invite-input {
|
width: calc(100% - 160px);
|
height: 56px;
|
border: 0 none;
|
border-radius: 4px;
|
padding-left: 20px;
|
background-color: rgba(255, 255, 255, 0.1);
|
}
|
.pop-button {
|
width: 120px;
|
height: 56px;
|
line-height: 56px;
|
background: #fff;
|
border-radius: 4px;
|
text-align: center;
|
color: #ce3135;
|
font-size: 26px;
|
font-weight: 400;
|
}
|
.con-style {
|
text-align: center;
|
}
|
.con-img-style {
|
width: 512px;
|
height: 910px;
|
margin-top: 184px;
|
// background-image: url("../../assets/images/share/new_share_bg2.png");
|
// background-size:512px 910px;
|
// background-repeat: no-repeat;
|
}
|
.newShare-container {
|
width: 480px;
|
height: 312px;
|
background: linear-gradient(
|
180deg,
|
#ffdbd8,
|
rgba(255, 240, 203, 0.53) 100%
|
);
|
border-radius: 32px;
|
margin: 224px auto 0;
|
padding: 0 70px 4px;
|
.yqm {
|
font-size: 28px;
|
font-weight: 400;
|
color: #3a2929;
|
padding-top: 48px;
|
}
|
.yqm-code {
|
font-size: 60px;
|
font-weight: 600;
|
color: #ce3135;
|
margin-top: 24px;
|
}
|
.yqm,
|
.yqm-code {
|
text-align: center;
|
}
|
.btn > div,
|
.btn > a {
|
font-size: 26px;
|
font-weight: 400;
|
text-align: center;
|
color: #fff;
|
width: 190px;
|
height: 68px;
|
line-height: 68px;
|
background: linear-gradient(109deg, #db4b4e, #c23034 100%);
|
border-radius: 40px;
|
display: inline-block;
|
margin-top: 29px;
|
}
|
.btn {
|
overflow: hidden;
|
}
|
.btn > div {
|
float: left;
|
}
|
.btn > a {
|
float: right;
|
}
|
}
|
.newShare-footer {
|
width: 100%;
|
height: 140px;
|
line-height: 140px;
|
text-align: center;
|
opacity: 0.8;
|
background: #170201;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
font-size: 26px;
|
font-weight: 400;
|
color: #fff;
|
.arrow-style {
|
font-size: 32px;
|
position: relative;
|
top: 7px;
|
margin-left: 11px;
|
}
|
}
|
}
|
.list {
|
// margin: 0 40px;
|
padding-bottom: 20px;
|
.tb {
|
color: #666;
|
border-top: 1px solid #fafafa;
|
}
|
.cn {
|
color: #333;
|
}
|
.tb,
|
.cn {
|
font-size: 28px;
|
font-weight: 400;
|
text-align: left;
|
.list-line1,
|
.list-line2 {
|
display: inline-block;
|
vertical-align: top;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
height: 102px;
|
line-height: 102px;
|
padding: 0 10px;
|
img[src=""],
|
img:not([src]) {
|
opacity: 0;
|
}
|
}
|
.list-line1:first-child {
|
text-align: center;
|
}
|
.list-line1:first-child,
|
.list-line2:first-child {
|
width: 30%;
|
}
|
.list-line1:nth-child(2),
|
.list-line2:nth-child(2) {
|
width: 18%;
|
}
|
.list-line1:last-child,
|
.list-line2:last-child {
|
width: 43%;
|
}
|
}
|
}
|
.van-action-sheet__header {
|
font-weight: 400;
|
color: #000;
|
font-size: 32px;
|
}
|
.empty-row {
|
text-align: center;
|
padding-bottom: 30px;
|
|
.empty-img {
|
width: 424px;
|
height: 315px;
|
}
|
|
.empty-text {
|
color: #cecece;
|
font-size: 32px;
|
font-weight: 400;
|
}
|
}
|
.con-list {
|
overflow-y: scroll;
|
max-height: 500px;
|
padding: 0 20px;
|
.pic-item-img {
|
width: 44px !important;
|
height: 44px !important;
|
border-radius: 50%;
|
position: relative;
|
top: 8px;
|
margin-right: 14px;
|
}
|
}
|
#imageWrapper {
|
position: absolute;
|
}
|
}
|
</style>
|
