轮播是vant组件，需要先装van依赖包
npm i vant -S //详情查看官方文档 https://youzan.github.io/vant/#/zh-CN/quickstart
npm install --save html2canvas //安装html2canvas依赖 官方文档 http://html2canvas.hertzen.com/
<!-- 二维码分享 -->
<template>
<div class="codeadd">
<div id="codedddddddd" class="code" v-if="show == 1">
<div class="swiper_">
<img class="bjimg" :src="bjshow" alt="" />
<div class="van-swipe-item_">
<div class="code_img" >
<!-- 二维码 -->
<img src="../../assets/user/ceshi.png" alt="" />
<!-- <div class="code_txt">邀请码：123456</div> -->
</div>
</div>
</div>
</div>
<div class="code" v-if="show == 0">
<div class="swiper_">
<van-swipe class="my-swipe" autoplay="false" indicator-color="red" ref="swiper" @change="onChange">
<van-swipe-item v-for="item in bjimg" :key="item.id">
<img :src="item.img" alt="" />
<div class="van-swipe-item_">
<div class="code_img" >
<!-- 二维码 -->
<img src="../../assets/user/ceshi.png" alt="" />
<!-- <div class="code_txt">邀请码：123456</div> -->
</div>
</div>
</van-swipe-item>
</van-swipe>
</div>
<div class="arrow">
<van-icon name="arrow-left" @click="changeSwipe('up')" />
<van-icon name="arrow" @click="changeSwipe('down')"/>
</div>
</div>
<div class="code_btn">
<div class="code_btn_1" @click="copyUrl">复制链接</div>
<div class="code_btn_2" @click="download">点击图片保存</div>
</div>
<input type="text" v-model="copydata" id="input" class="inputcopy">
<!-- <div class="onreturn">
<van-icon @click="$router.back()" size="25" name="arrow-left" />
</div> -->
</div>
</template>
<script>
import html2canvas from 'html2canvas';
import {
Toast } from 'vant';
export default {
data() {
return {
copydata:"123456", //分享链接
two_code_url:"", //二维码
toDataURL:'', //截图
bjimg:[ //背景图
{
id:1,
img: require('../../assets/user/haibao.png'),
},
{
id:2,
img: require('../../assets/user/haibao.png')
},
],
show:0, //截图与视图显示切换
bjshow:"", //需要截图的背景图片
swid:0, //轮播切换触发，0为第一张
}
},
created(){
},
methods:{
//复制
copyUrl(){
console.log(this.copydata)
var Url=document.getElementById("input");
Url.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
Toast("复制成功");
},
//保存图片
download(){
this.show =1
if(this.swid == 0){
this.bjshow = this.bjimg[0].img
}else if(this.swid == 1){
this.bjshow = this.bjimg[1].img
}else{
this.bjshow = this.bjimg[0].img
}
Toast.loading({
message: '加载中...',
forbidClick: true,
duration: 0.5, // 持续展示 toast
});
setTimeout(()=> {
html2canvas(document.querySelector("#codedddddddd"),{
backgroundColor: null,
useCORS:true,
allowTaint:false,
logging:false,
taintTest: false,
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/png");
this.downImg=dataURL;
this.toDataURL = dataURL
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
Toast("长按二维码保存");
setTimeout(() => {
this.show =0
}, 500);
return;
} else {
Toast.loading({
message: '加载中...',
forbidClick: true,
duration: 0.5, // 持续展示 toast
});
setTimeout(()=>{
var a = document.createElement('a')
a.download = 'ypyg'
// 设置图片地址
a.href = this.toDataURL;
a.click();
// document.getElementById("img").click()
},500)
Toast.loading({
message: '加载中...',
forbidClick: true,
duration: 0.5, // 持续展示 toast
});
setTimeout(() => {
this.show =0
}, 500);
}
});
},500)
},
onChange(index) {
window.scrollTo(0, 0);
this.swid = index
},
changeSwipe(type) {
// console.log(type)
if(type == 'up') {
this.swid -= 1;
} else if (type == 'down') {
this.swid += 1;
}
this.$refs.swiper.swipeTo(this.swid);
},
},
components:{
}
};
</script>
<style scoped>
.codeadd{
width: 100vw;
height: 100vh;
}
.swiper_{
width: 100%;
height: 100%;
}
.van-swipe{
width: 100%;
height: 100%;
}
.my-swipe .van-swipe-item {
color: #fff;
width: 100%;
height: 100%;
text-align: center;
background-color: #39a9ed;
}
.van-swipe-item img{
width: 100%;
height: 100%;
overflow: hidden;
}
.code{
width: 100%;
height: 100vh;
background-size:100% 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.van-swipe-item_{
width: 375px;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
margin-top: 150px;
}
.code_img{
width: 200px;
height: 200px;
display: block;
text-align: center;
}
.code_img img{
margin: 0 auto;
width: 106px;
height: 106px;
}
.code_txt{
font-size:15px;
color: #fff;
text-align: center;
}
.bjimg{
width: 100%;
height: 100%;
}
.arrow{
width: 100%;
position: fixed;
display: flex;
justify-content: space-between;
}
.arrow .van-icon{
color: #fff;
}
.code_btn{
width: 100%;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
font-size:15px;
font-family:Microsoft YaHei;
font-weight:400;
color:rgba(255,255,255,1);
background: #fff;
position: fixed;
bottom: 0;
}
.code_btn_1{
width:139px;
height:42px;
/* background:linear-gradient(94deg,rgba(252,38,89,1),rgba(255,202,215,1)); */
background:rgba(252,38,89,1);
border-radius:21px 0px 0px 21px;
line-height: 42px;
text-align: center;
}
.code_btn_2{
width:139px;
height:42px;
/* background:linear-gradient(-84deg,rgba(255,177,66,1),rgba(255,201,126,1)); */
background: rgba(255,201,126,1);
border-radius:0px 21px 21px 0px;
line-height: 42px;
text-align: center;
}
.inputcopy{
/* width: 0px; */
height:0px;
border: none;
display: block;
position: fixed;
top: 0;
z-index: -10;
}
/deep/.van-swipe__indicators{
top: 600px
}
/deep/.van-swipe__indicator{
width: 10px;
height: 10px;
background-color:rgba(255,177,66,1)
}
.onreturn{
color: #fff;
position: absolute;
top: 10px;
left: 10px;
padding: 5px;
border-radius: 50%;
width: 30px;
height: 30px;
text-align: center;
border-radius: 50%;
background: #E5E5E5;
display: flex;
align-items: center;
justify-content: center;
}
</style>