362 lines
8.2 KiB
Vue
362 lines
8.2 KiB
Vue
<template>
|
|
<view>
|
|
<up-overlay :show="showDialog" :zIndex="999">
|
|
<view class="serviceBox">
|
|
<view class="imgBox flex1">
|
|
<!-- <view class="picBox" id="capture">
|
|
<view class="top">
|
|
<image :src="avatar" mode="widthFix"></image>
|
|
<text>{{nickname}}邀请您观看</text>
|
|
</view>
|
|
<image :src="share_img" mode="aspectFill" class="share_img"></image>
|
|
<view class="mid">
|
|
<image :src="cover_img" mode="widthFix"></image>
|
|
<text> {{live_title}}</text>
|
|
</view>
|
|
<view class="btm">
|
|
<image :src="logo" mode="aspectFill" class="logo"></image>
|
|
<view class="ewm">
|
|
<image :src="code" mode="aspectFill" class="code"></image>
|
|
<view>长按保存图片</view>
|
|
</view>
|
|
</view>
|
|
<image :src="canvasImage" class="diaimg" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="txt flex1">
|
|
<up-icon name="fingerprint" color="#fff" size="20" />
|
|
<text>长按图片保存</text>
|
|
</view> -->
|
|
</view>
|
|
<view class="bbox">
|
|
<view class="close flex1" @click="closeDialog"><up-icon name="close" color="#666" size="20" /></view>
|
|
<view class="btnBox">
|
|
<view class="row" @click="showTips = true">
|
|
<view class="icon flex1"><up-icon name="weixin-fill" color="#28C445" size="26" /></view>
|
|
<view class="tit">微信分享</view>
|
|
</view>
|
|
<view class="row" @click="copyLink">
|
|
<view class="icon flex1"><text class="iconfont icon-link"></text></view>
|
|
<view class="tit">复制链接</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="wx_mask_wrapper" v-if="showTips">
|
|
<view class="wx_contentbox" @click="showTips = false">
|
|
<view class="note_box">请点击右上角<text class="icon_more"></text>分享给好友</view>
|
|
<view class="icon_arrow"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</up-overlay>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, reactive, toRefs, watch } from 'vue'
|
|
import { get } from '@/Api/request.js'
|
|
import { showToast } from '@/components/common.js'
|
|
import html2canvas from 'html2canvas';
|
|
import '@/static/js/html2canvas.js'
|
|
|
|
export default {
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
userId: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
id: {
|
|
type: Number
|
|
},
|
|
info: {
|
|
type: Object,
|
|
default: {}
|
|
}
|
|
},
|
|
setup(props, context) {
|
|
const data = reactive({
|
|
showDialog: false,
|
|
userId: 0,
|
|
liveId: 0,
|
|
showTips: false,
|
|
avatar: '',
|
|
nickname: '',
|
|
share_img: '',
|
|
cover_img: '',
|
|
live_title: '',
|
|
logo: uni.getStorageSync('logo'),
|
|
code: 'https://g.csdnimg.cn/side-toolbar/3.4/images/qr_app.png',
|
|
canvasImage: ''
|
|
})
|
|
|
|
function copyLink() {
|
|
let shopId = (uni.getStorageSync('shop_id') || 0) * 1
|
|
let href = window.location.origin
|
|
let value = href + '/web#/pages/live/index?live_id=' + data.liveId + '&user_id=' + data.userId + '&shopId=' + shopId
|
|
var input = document.createElement('input')
|
|
input.value = value
|
|
document.body.appendChild(input)
|
|
input.select()
|
|
var copy_result = document.execCommand('copy')
|
|
if (copy_result) {
|
|
showToast('分享链接复制成功', 'success')
|
|
} else {
|
|
showToast('复制失败')
|
|
}
|
|
document.body.removeChild(input)
|
|
}
|
|
|
|
function closeDialog() {
|
|
data.showDialog = false
|
|
context.emit('close')
|
|
}
|
|
|
|
function getAvatar(info) {
|
|
let avatar = '', nickname = ''
|
|
for (let index = 0; index < info.streamers.length; index++) {
|
|
let item = info.streamers[index]
|
|
if(item.pivot.live_status == 1) {
|
|
avatar = item.avatar
|
|
nickname = item.nickname
|
|
break
|
|
}
|
|
}
|
|
if(!avatar) {
|
|
avatar = info.streamers[0].avatar
|
|
nickname = info.streamers[0].nickname
|
|
}
|
|
data.avatar = avatar
|
|
data.nickname = nickname
|
|
}
|
|
|
|
async function getShareCode() {
|
|
let shopId = (uni.getStorageSync('shop_id') || 0) * 1
|
|
let href = window.location.origin
|
|
let url = href + '/web#/pages/live/index?live_id=' + data.liveId + '&user_id=' + data.userId + '&shopId=' + shopId
|
|
|
|
await get('/api/v1/user/webCode', {url: url}).then((res) => {
|
|
|
|
})
|
|
}
|
|
|
|
function drawImg() {
|
|
uni.showLoading({
|
|
title: '图片生成中...',
|
|
mask: true
|
|
})
|
|
setTimeout(async() => {
|
|
const canvas = await html2canvas(document.getElementById("capture"), {
|
|
useCORS: true,
|
|
dpi: 300,
|
|
scale: 4
|
|
})
|
|
|
|
let imgUrl = canvas.toDataURL("image/jpeg", 1);
|
|
data.canvasImage = imgUrl
|
|
uni.hideLoading()
|
|
}, 1000)
|
|
}
|
|
|
|
watch(props, async (newProps) => {
|
|
if (newProps.show) {
|
|
console.log(newProps.info)
|
|
data.showDialog = true
|
|
data.liveId = newProps.id
|
|
data.userId = newProps.userId
|
|
getAvatar(newProps.info)
|
|
data.share_img = newProps.info.share_img
|
|
data.cover_img = newProps.info.cover_img
|
|
data.live_title = newProps.info.name
|
|
// await getShareCode()
|
|
// await drawImg()
|
|
}
|
|
})
|
|
|
|
return {
|
|
...toRefs(data),
|
|
copyLink,
|
|
closeDialog,
|
|
getShareCode,
|
|
getAvatar
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.flex1{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.flex2{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.serviceBox{
|
|
height: 100vh;
|
|
width: 100%;
|
|
.imgBox{
|
|
height: calc(100% - 130px);
|
|
box-sizing: border-box;
|
|
padding-top: 20px;
|
|
flex-direction: column;
|
|
.picBox{
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
margin: 0 auto;
|
|
width: 280px;
|
|
height: 430px;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 12px;
|
|
.top{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
image{
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.share_img{
|
|
width: 100%;
|
|
height: 160px;
|
|
vertical-align: bottom;
|
|
margin-top: 10px;
|
|
border-radius: 12rpx;
|
|
}
|
|
.mid{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-top: 10px;
|
|
image{
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.btm{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
margin-top: 40px;
|
|
color: #777;
|
|
.code{
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
.ewm{
|
|
width: 140px;
|
|
text-align: center;
|
|
}
|
|
.logo{
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
}
|
|
.diaimg{
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.txt{
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
height: 40px;
|
|
}
|
|
}
|
|
.bbox{
|
|
height: 130px;
|
|
position: relative;
|
|
background-color: #fff;
|
|
box-sizing: border-box;
|
|
padding-top: 40px;
|
|
border-radius: 20px 20px 0 0;
|
|
.close{
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 15px;
|
|
width: 30px;
|
|
height: 15px;
|
|
}
|
|
.btnBox{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
.row{
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
.icon{
|
|
background-color: #e9e9e9;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
text{
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
.tit{
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.wx_mask_wrapper{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,.7);
|
|
.wx_contentbox{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
.note_box{
|
|
position: absolute;
|
|
right: 105px;
|
|
top: 70px;
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
.icon_more{
|
|
display: inline-flex;
|
|
vertical-align: middle;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: 0 5px;
|
|
background: url(https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/02/19/xufMNFWmg5F5irxll3wLyy8wCQVXEyCk4flQW4zP.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.icon_arrow{
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 20px;
|
|
width: 70px;
|
|
height: 70px;
|
|
background: url(https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/02/19/NgTzZE30DfkLuaXKHmJSFoqGF9kAxzbq1AA8JPJa.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |