483 lines
9.5 KiB
Vue
483 lines
9.5 KiB
Vue
<template>
|
|
<view>
|
|
<touch-popup ref="popup" background="#FFFDE8" :backShow="true">
|
|
<view class="bck">
|
|
<view style="width: 100%;height: 15px;"></view>
|
|
<view class="img-bck">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/背景图案.png" mode="widthFix"></image>
|
|
</view>
|
|
<scroll-view scroll-y="true">
|
|
<view class="title">
|
|
<view>
|
|
邀请好友
|
|
</view>
|
|
<view>
|
|
获取<text>专属神秘宝藏</text>
|
|
</view>
|
|
</view>
|
|
<view class="qrcode">
|
|
<view class="qrcode-bck">
|
|
<!-- #ifdef H5 -->
|
|
<canvas id="qrcode" canvas-id="qrcode"></canvas>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<image v-if="qrcodeUrl" :show-menu-by-longpress="true" :src="qrcodeUrl" mode="widthFix"></image>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="qrcode-download" @click="downloadQrcode">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/download.png" mode="widthFix"></image>
|
|
</view>
|
|
<view>
|
|
分享给好友扫一扫，成为宝藏猎人
|
|
</view>
|
|
</view>
|
|
<view class="share">
|
|
<view class="share-info">
|
|
<view class="share-title">
|
|
当前邀请好友
|
|
</view>
|
|
<view class="share-count">
|
|
<view class="">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/share-count-left.png" mode="heightFix">
|
|
</image>
|
|
</view>
|
|
<view style="justify-content: center;">
|
|
{{helpNumber}}
|
|
</view>
|
|
<view class="">
|
|
<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/share-count-right.png" mode="heightFix">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="share-help">
|
|
<view class="help-input">
|
|
<input type="text" v-model="helpCode" placeholder="输入邀请码"
|
|
placeholder-style="font-size: 12px;" />
|
|
</view>
|
|
<view @click="doHelp" class="help-btn">
|
|
<view class="">
|
|
帮TA助力
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="share-code">
|
|
<view class="">
|
|
我的邀请码
|
|
</view>
|
|
<view class="">
|
|
{{myHelpCode}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="buttons">
|
|
<view class="btn btn1" @click="copyCode">
|
|
<view class="">
|
|
<text>复制邀请码</text>
|
|
</view>
|
|
<view class="">
|
|
邀请好友
|
|
</view>
|
|
</view>
|
|
<!-- #ifdef H5 -->
|
|
<view class="btn btn2" @click="copyUrl">
|
|
分享链接
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<button class="btn btn2" open-type="share">
|
|
分享链接
|
|
</button>
|
|
<!-- #endif -->
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</touch-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const app = getApp()
|
|
import {
|
|
ref,
|
|
defineExpose,
|
|
nextTick
|
|
} from 'vue'
|
|
// #ifdef H5
|
|
import UQRCode from 'uqrcodejs'
|
|
// #endif
|
|
const popup = ref() // ref组件
|
|
|
|
const helpCode = ref('') // 输入邀请码帮助别人助力
|
|
const myHelpCode = ref('') // 我的邀请码
|
|
const helpNumber = ref(0) // 已邀请人数
|
|
|
|
// #ifdef MP-WEIXIN
|
|
const qrcodeUrl = ref('')
|
|
// #endif
|
|
|
|
const doHelp = () => {
|
|
if (!helpCode.value) return
|
|
if (helpCode.value === myHelpCode.value) {
|
|
uni.showToast({
|
|
title: '不能为自己助力',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.showLoading()
|
|
uni.request({
|
|
url: app.globalData.requestUrl + '/api/user/code/save',
|
|
data: {
|
|
code: helpCode.value
|
|
},
|
|
header: {
|
|
'Authorization': 'Bearer ' + app.globalData.token
|
|
},
|
|
method: 'POST',
|
|
success(res) {
|
|
if (res.data.code === 200) {
|
|
uni.showToast({
|
|
title: '已为TA助力成功',
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
complete() {
|
|
uni.hideLoading()
|
|
}
|
|
})
|
|
}
|
|
const downloadQrcode = () => {
|
|
// #ifdef H5
|
|
const toast = '请截图页面发送给好友'
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
const toast = '长按保存二维码'
|
|
// #endif
|
|
uni.showToast({
|
|
title: toast,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
const copyCode = () => {
|
|
uni.setClipboardData({
|
|
data: myHelpCode.value,
|
|
success: function() {
|
|
uni.showToast({
|
|
title: '邀请码复制成功',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
const copyUrl = () => {
|
|
uni.setClipboardData({
|
|
data: (location.origin + location.pathname + '?code=' + myHelpCode.value),
|
|
success: function() {
|
|
uni.showToast({
|
|
title: '链接复制成功',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
const showQrcode = (code) => {
|
|
// #ifdef H5
|
|
const qr = new UQRCode()
|
|
qr.data = location.origin + location.pathname + '?code=' + myHelpCode.value
|
|
qr.size = 140
|
|
qr.make()
|
|
const canvasContext = uni.createCanvasContext('qrcode', this)
|
|
qr.canvasContext = canvasContext
|
|
qr.drawCanvas()
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
uni.request({
|
|
url: app.globalData.requestUrl + '/api/user/wechat/qrcode',
|
|
header: {
|
|
'Authorization': 'Bearer ' + app.globalData.token
|
|
},
|
|
success(res) {
|
|
if (res.data.code === 200) {
|
|
qrcodeUrl.value = res.data.data
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
// #endif
|
|
|
|
}
|
|
|
|
const open = () => {
|
|
if (myHelpCode.value) {
|
|
popup.value.open()
|
|
nextTick(() => {
|
|
showQrcode()
|
|
})
|
|
return
|
|
}
|
|
uni.showLoading()
|
|
uni.request({
|
|
url: app.globalData.requestUrl + '/api/user/code',
|
|
header: {
|
|
'Authorization': 'Bearer ' + app.globalData.token
|
|
},
|
|
success: (res) => {
|
|
if (res.data.code === 200) {
|
|
myHelpCode.value = res.data.data.code
|
|
helpNumber.value = res.data.data.number
|
|
app.globalData.userinfo.code = res.data.data.code
|
|
popup.value.open()
|
|
nextTick(() => {
|
|
showQrcode()
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: '获取排行榜列表失败，请重试',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
complete: () => {
|
|
uni.hideLoading()
|
|
}
|
|
})
|
|
}
|
|
defineExpose({
|
|
open
|
|
}) // 暴露方法
|
|
</script>
|
|
|
|
<style scoped>
|
|
.btn {
|
|
width: 256px;
|
|
height: 49px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 20px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.btn1 text {
|
|
color: #D0FF66;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.btn1 {
|
|
background-color: #000;
|
|
color: #9F9F9F;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.btn2 {
|
|
background-color: #fff;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
z-index: 9999;
|
|
align-items: center;
|
|
margin-top: 15px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.share-code view:last-child {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.share-code view {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.share-code {
|
|
background-color: rgba(65, 255, 183, .8);
|
|
font-size: 14px;
|
|
display: flex;
|
|
border-radius: 20px;
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.help-input input {
|
|
background-color: rgba(221, 221, 221, 0.8);
|
|
border-radius: 10px;
|
|
height: 28px;
|
|
padding: 0 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.help-input {
|
|
flex: 1;
|
|
}
|
|
|
|
.help-btn view {
|
|
background-color: rgba(170, 170, 170, 0.8);
|
|
padding: 6px 10px;
|
|
border-radius: 10px;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.help-btn {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.share-help {
|
|
padding: 10px 15px 15px 15px;
|
|
display: flex;
|
|
}
|
|
|
|
.share-title {
|
|
padding: 10px 15px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.share-count image {
|
|
height: 30px;
|
|
}
|
|
|
|
.share-count view {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.share-count view:first-child {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.share-count {
|
|
display: flex;
|
|
}
|
|
|
|
.share-info {
|
|
box-shadow: 0px 4px 5px 0px #00000040;
|
|
background-color: #fff;
|
|
border-radius: 20px;
|
|
flex-direction: column;
|
|
width: 260px;
|
|
display: flex;
|
|
}
|
|
|
|
.share {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.qrcode-download image {
|
|
width: 25px;
|
|
}
|
|
|
|
.qrcode-download {
|
|
position: absolute;
|
|
right: calc(50% - 120px);
|
|
bottom: 30px;
|
|
}
|
|
|
|
.qrcode view:last-child {
|
|
padding: 8px;
|
|
color: #626262;
|
|
font-family: Noto Sans S Chinese;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.qrcode-bck canvas {
|
|
width: 140px;
|
|
height: 140px;
|
|
}
|
|
.qrcode-bck image {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.qrcode-bck {
|
|
background-color: #fff;
|
|
border-radius: 20px;
|
|
padding: 15px;
|
|
width: 140px;
|
|
height: 140px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.qrcode {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
z-index: 888;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.img-bck {
|
|
position: absolute;
|
|
top: 60px;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.title view:last-child {
|
|
position: relative;
|
|
z-index: 1;
|
|
font-family: Noto Sans S Chinese;
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
line-height: 36px;
|
|
text-align: center;
|
|
}
|
|
|
|
.title text {
|
|
color: #ffb800;
|
|
}
|
|
.title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 15px 30px;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
font-family: Noto Sans S Chinese;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 36px;
|
|
text-align: center;
|
|
}
|
|
|
|
scroll-view {
|
|
height: calc(100% - 15px);
|
|
}
|
|
|
|
.bck {
|
|
height: 100%;
|
|
background: url('https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/share/bck.png') no-repeat;
|
|
background-size: 750rpx;
|
|
background-position: bottom;
|
|
}
|
|
</style> |