<template>
|
<view class="container" catchtouchmove="true">
|
<u-navbar class="navbar" title="分享赚钱"></u-navbar>
|
<view class="header">
|
<view class="title flex align-center">
|
<view class="titleA">分享图片 </view>
|
<view class="titleB" v-if="chooseImg">(已选择{{chooseImg}}张图片)</view>
|
</view>
|
|
<scroll-view class="scroll-view_H" scroll-x="true">
|
<view class="scrollLists" v-for="(item,index) in imageList" :key="index" @click="chooseImgs(item)">
|
<image :src="item" class="scrollListsimg" mode="aspectFill"></image>
|
<image :src="imageActiveData.includes(item)?'../../static/images/goods/radioActive.png':'../../static/images/goods/radio.png'" class="scrollAct"></image>
|
<view class="QrCodeimg flex align-center justify-center" v-if="item === codeImage">二维码推广图</view>
|
</view>
|
</scroll-view>
|
|
<view class="changeImg flex align-center justify-between" @click="replaceMasterDrawing">
|
<view class=" flex justify-center align-center"></view>
|
<view class="flex align-center keep" @click.stop="saveMaterial">
|
<!-- <image :src="allActive?'../../static/goodDetail/radioActive.png':'../../static/goodDetail/radio.png'" class="changeActiveicon" mode=""></image>
|
<view class="changeActive">全选({{imageActiveData.length}}/{{imageList.length}})</view> -->
|
保存图片(<text style="color:#FF3824;">{{imageActiveData.length}}</text>/{{imageList.length}})
|
</view>
|
</view>
|
</view>
|
|
<!-- 编辑文案 -->
|
<view class="EditContainer">
|
<view class="editTitle flex flex justify-between align-center">
|
<view class="editTitleA">编辑分享文案</view>
|
<!-- <view class="editTitleB flex align-center justify-center" @click="editModel">
|
编辑模板>
|
</view> -->
|
<view class="editTitleB flex align-center justify-center" @click="copyEditContainer">
|
复制文案
|
</view>
|
</view>
|
<text class="editCenter">{{edits.replace(/\\n/g,'\n')}}</text>
|
<view class="radioContainer flex ">
|
<view class="radioContainerA flex flex align-center" v-for="(item,index) in quickEditList" :key="index" @click="chooseType(item)">
|
<image :src="quickEditActive.includes(item)?'../../static/images/goods/radioActive.png':'../../static/images/goods/radio.png'" class="radioIcon" mode=""></image>
|
<view class="radioText">{{item}}</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 微信朋友圈评论素材 -->
|
<view class="copyContainer">
|
<view class="copy_title">微信朋友圈评论素材
|
<text :msg="msg" style="opacity: 0;" :change:msg="canvasImage.generateImage" class="renderjs" id="renderjs-view">
|
{{msg}}
|
</text>
|
</view>
|
<view class="taoName flex align-center justify-between" v-if="['t','d'].includes(goodsInfo.faction)">
|
<view class="taoName_left">{{goodsInfo.faction ==='t'? '淘口令':'抖音口令'}}</view>
|
<view class="short-url-copy" v-if="goodsInfo.faction =='t'">
|
{{tpwd}}
|
</view>
|
<view class="short-url-copy" v-if="goodsInfo.faction ==='d'">
|
{{dyPassword}}
|
</view>
|
<view class="taoName_right flex align-center justify-center" @click="copys(0)">复制</view>
|
</view>
|
|
<view class="taoName flex align-center justify-between">
|
<view class="taoName_left">短链接</view>
|
<view class="short-url-copy">
|
{{url}}
|
</view>
|
<view class="taoName_right flex align-center justify-center" @click="copys(1)">复制</view>
|
</view>
|
|
<view class="taoName flex align-center justify-between" v-if="goodsInfo.desc">
|
<view class="taoName_left">推荐卖点</view>
|
<view class="short-url-copy">
|
{{goodsInfo.desc}}
|
</view>
|
<view class="taoName_right flex align-center justify-center" @click="copys(2)">复制</view>
|
</view>
|
|
<view class="taoName flex align-center justify-between">
|
<view class="taoName_left">APP下载地址+邀请码</view>
|
<view class="taoName_right flex align-center justify-center" @click="copys(3)">复制</view>
|
</view>
|
</view>
|
|
<view style="height: 280rpx;"></view>
|
<!-- 图文分享 -->
|
<view class="imgtextShare">
|
<view class="shareTitle">海报分享</view>
|
<view class="shareContent flex justify-between">
|
<view class="flex flex-column align-center" @click="menuShare('微信')">
|
<image src="../../static/images/goods/shareicon1.png" mode="" class="shareIcons"></image>
|
<view class="shareName">微信</view>
|
</view>
|
|
<view class="flex flex-column align-center" @click="menuShare('微信朋友圈')">
|
<image src="../../static/images/goods/shareicon2.png" mode="" class="shareIcons"></image>
|
<view class="shareName">朋友圈</view>
|
</view>
|
|
<view class="flex flex-column align-center" @click="menuShare('QQ')">
|
<image src="../../static/images/goods/shareicon3.png" mode="" class="shareIcons"></image>
|
<view class="shareName">QQ</view>
|
</view>
|
<view class="flex flex-column align-center" @click="menuShare('保存')">
|
<image src="../../static/images/goods/shareicon4.png" mode="" class="shareIcons"></image>
|
<view class="shareName">保存</view>
|
</view>
|
</view>
|
</view>
|
<view id="sharePoster">
|
<view class="share-poster">
|
<!-- 为了解决在安卓手机（或部分手机）中生成画布后里面的图片模糊问题，那么建议将该页面所有的 image 标签改为 img 标签，这样兼容性会更好些！ -->
|
<img class="good-img" :src="imageActiveData[0]" />
|
<template v-if="imageActiveData.length ===2">
|
<img class="good-img-index1" :src="imageActiveData[1]" />
|
</template>
|
<!-- <image class="good-img" :src="imageList[0]"></image> -->
|
<template v-if="imageActiveData.length ===3">
|
<view class="flex">
|
<img class="good-img-index2" :src="imageActiveData[1]" />
|
<img class="good-img-index2" :src="imageActiveData[2]" />
|
</view>
|
</template>
|
<template v-if="imageActiveData.length ===4">
|
<view class="flex">
|
<img class="good-img-index3" :src="imageActiveData[1]" />
|
<img class="good-img-index3" :src="imageActiveData[2]" />
|
<img class="good-img-index3" :src="imageActiveData[3]" />
|
</view>
|
</template>
|
|
<view class="title-box p-20 bg-white">
|
<view class="title">
|
<!--因IOS海报logo无法显示，海报暂时禁用显示logo <img :src="goodsInfo.labelImg" alt="" class="img" /> -->
|
<text>{{goodsInfo.dtitle}}</text>
|
</view>
|
<view class="price-box flex">
|
<Price :presentPrice="goodsInfo.actualPrice" :originalPrice="goodsInfo.originalPrice"></Price>
|
<ReceiveTage class="ml-20" :number="goodsInfo.couponPrice"></ReceiveTage>
|
</view>
|
</view>
|
<view class="bottom-box mt-20 mb-20">
|
<view class="code-box">
|
<canvas canvas-id="qrcode" class="code" style="width: 150rpx;height: 150rpx;" />
|
</view>
|
<view class="tips-box">
|
<view class="tips-title">领券购物更省钱</view>
|
<view class="tips-btn mt-20">
|
长按识别二维码领券购买
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- <view style="height: 680rpx;"></view> -->
|
<!-- <view id="renderjs-view">{{msg}}</view> -->
|
<!-- </view> -->
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState
|
} from 'vuex'
|
import uQRCode from '@/utils/qrcode.js'
|
import utils from '@/utils/utils.js'
|
import ReceiveTage from "@/components/tage/receive-tage.vue"
|
import ReturnTage from '@/components/tage/return-tage.vue';
|
import Price from '@/components/price/price.vue';
|
import {
|
base64ToPath,
|
} from '@/utils/image-tools.js';
|
let qrcode
|
export default {
|
data() {
|
return {
|
appInfo:{},
|
tpwd:"",
|
dyPassword:"",
|
user:"",
|
quickEditList: [],
|
quickEditActive: [],
|
chooseImg: 0,
|
goodsInfo: {},
|
imageList: [],
|
imageActiveData: [], //选中的图片
|
codeImage: '', // 二维码主图，不可取消
|
allActive: false,
|
canvas: null,
|
sharePostUrl: '',
|
logo: '',
|
msg: '', // 微信,QQ,微信朋友圈,保存
|
name: '', // 微信,QQ,微信朋友圈,保存
|
url: '', // 分享出去的url
|
// handerShareBtn: '', // 微信，朋友圈，QQ,保存
|
}
|
},
|
components: {
|
ReceiveTage,
|
ReturnTage,
|
Price
|
},
|
computed: {
|
edits() {
|
let str = ''
|
// 淘宝需要在头部拼接 '0'
|
const {
|
faction,
|
dtitle,
|
originalPrice, // 原价
|
actualPrice, // 券后价
|
//tpwd, // 淘口令
|
//dyPassword, // 抖音口令
|
// url, // 下单链接
|
fanli,
|
desc
|
} = this.goodsInfo
|
//type 1-淘宝；2-PDD;3-JD;4-唯品会;5-抖音
|
if (faction == 't') {
|
str += '0'
|
}
|
str += dtitle //拼接标题
|
// 原价和券后价不一样的时候（有惠优券），拼接上价格的优惠信息
|
console.log(originalPrice !== actualPrice, "原价和券后价的判断")
|
if (originalPrice !== actualPrice) {
|
str += '\\n【原价】' + `￥${originalPrice}` +
|
'\\n【券后】' + `￥${actualPrice}`
|
}
|
// 选中的有快捷选项则进行添加
|
if (this.quickEditActive.includes('淘口令')) {
|
str += '\\n【复制此信息打开手机淘宝即可查看并下单】' + this.tpwd
|
}
|
if (this.quickEditActive.includes('抖音口令')) {
|
str += '\\n【抖音口令】' + this.dyPassword
|
}
|
if (this.quickEditActive.includes('下单链接')) {
|
str += '\\n【复制下方链接】' + this.url
|
}
|
if (this.quickEditActive.includes('省钱提示')) {
|
str += '\\n【下载'+this.appInfo.appName+'】' + `再返还￥${fanli}`
|
}
|
if (this.quickEditActive.includes('下载地址+邀请码')) {
|
str += '\\n【下载链接】' + this.appInfo.appAndroidDownUrl +
|
'\\n【邀请码】' + this.user.invitation_code
|
}
|
if (this.quickEditActive.includes('推荐理由')) {
|
str += '\\n【必买理由】' + desc
|
}
|
return str
|
}
|
},
|
|
onLoad(options) {
|
this.appInfo = utils.getCacheSync('appInfo');
|
console.log(this.appInfo)
|
this.goodsInfo = JSON.parse(options.info);
|
console.log(this.goodsInfo,"@@@@this.goodsInfo")
|
this.imageList = this.goodsInfo.imgs
|
this.getJumpUrl(this.goodsInfo)
|
this.getuserInfo()
|
// 只有淘宝的试试需要对连接进行转换
|
// if (this.goodsInfo.faction == 't') {
|
// // 淘宝的商品需要进行单独的处理链接
|
// this.getSingleItemData(this.goodsInfo.goodsId)
|
// } else if (this.goodsInfo.faction == 'p') {
|
// //拼多多的商品也需要单独的处理
|
// //mobileShortUrl 拼多多需要处理这个参数
|
// this.$u.api.getPrivilegeLink({type:2,goodsId:this.goodsInfo.goods_sign}).then(e => {
|
// if(e.code == 1)return that.$alert(e.msg);
|
// var res = e.data.info;
|
// that.url = mobileShortUrl
|
// }).catch(function (err) {
|
// })
|
// } else if (this.goodsInfo.faction == 'd') {
|
// //抖音的商品也需要单独的处理
|
// //dyZlink 拼多多需要处理这个参数
|
// this.url = dyZlink
|
// } else {
|
// this.url = url
|
// }
|
this.setQuickEditList()
|
this.imageActiveData = [this.goodsInfo.imgs[0]]
|
this.codeImage = this.goodsInfo.imgs[0]
|
},
|
mounted() {
|
// this.domId = '#sharePoster'
|
// 页面加载完毕开始绘制二维码
|
// this.makeQRcode()
|
},
|
onShow() {
|
// this.makeQRcode()
|
},
|
methods: {
|
|
getuserInfo() {
|
var that = this;
|
this.$u.api.getUserInfo({}).then(e => {
|
that.user = e.data.userinfo;
|
console.log(that.user)
|
utils.setCache('userInfo', e.data.userinfo)
|
}).catch(function (err) {
|
console.log(err)
|
})
|
},
|
getJumpUrl(goods) {
|
var that = this;
|
if (goods.faction == 't') {
|
this.$u.api.getPrivilegeLink({type:0,goodsId:goods.goodsId}).then(e => {
|
if(e.code == 1)return that.$alert(e.msg);
|
var res = e.data.info;
|
//that.Jumpurl = res.kuaiZhanUrl
|
that.tpwd = res.tpwd
|
var long = res.longTpwd
|
//获取转链接
|
that.$u.api.getPrivilegeShareLink({type:0,goodsId:goods.goodsId}).then(ed=>{
|
if(ed.code == 1)return that.$alert(ed.msg);
|
var re = ed.data.list;
|
that.url = re.link;
|
if(that.url){
|
that.makeQRcode()
|
}else{
|
uni.showToast({
|
title:'制作海报失败！',
|
icon:'none'
|
})
|
}
|
}).catch(function (er) {
|
})
|
|
}).catch(function (err) {
|
})
|
} else if (goods.faction == 'p') {
|
this.$u.api.getPrivilegeLink({type:2,goodsId:goods.goods_sign}).then(e => {
|
if(e.code == 1)return that.$alert(e.msg);
|
var res = e.data.info;
|
that.url = res.mobile_short_url
|
that.makeQRcode()
|
}).catch(function (err) {
|
})
|
} else if (goods.faction == 'j') {
|
this.$u.api.getPrivilegeLink({type:1,goodsId:goods.goodsId}).then(e => {
|
if(e.code == 1)return that.$alert(e.msg);
|
var res = e.data;
|
that.url = res.info
|
that.makeQRcode()
|
}).catch(function (err) {
|
})
|
}else if (goods.faction == 'w'){
|
this.$u.api.getPrivilegeLink({type:3,goodsId:goods.goodsId}).then(e => {
|
if(e.code == 1)return that.$alert(e.msg);
|
var res = e.data.info;
|
that.url = res.url
|
that.makeQRcode()
|
}).catch(function (err) {
|
})
|
}else if(goods.faction == 'd'){
|
this.$u.api.getPrivilegeLink({type:4,goodsId:goods.goodsId}).then(e => {
|
if(e.code == 1)return that.$alert(e.msg);
|
var res = e.data.info;
|
that.url = res.dy_zlink
|
that.dyPassword = res.dy_password
|
//that.codeSrc = res.qr_code.url
|
that.makeQRcode()
|
}).catch(function (err) {
|
})
|
}
|
},
|
//选择类型
|
chooseType(e) {
|
const index = this.quickEditActive.findIndex(v => v === e)
|
if (index === -1) {
|
this.quickEditActive.push(e)
|
} else {
|
// 已经存在来，就删除之前的
|
this.quickEditActive.splice(index, 1)
|
}
|
},
|
|
//选中图片
|
chooseImgs(img) {
|
const index = this.imageActiveData.findIndex(v => v === img)
|
if (index === -1) {
|
// 最多只能选择4张图片
|
if (this.imageActiveData.length === 4) {
|
this.$u.toast('最多只能选择4张图片')
|
return
|
}
|
this.imageActiveData.push(img)
|
} else {
|
// 已经存在来，就删除之前的
|
// 不能删除二维码主图
|
if (img !== this.codeImage) {
|
this.imageActiveData.splice(index, 1)
|
}
|
}
|
this.allActive = this.imageActiveData.length === this.imageList.length
|
},
|
|
//全选
|
AllActive() {
|
if (this.allActive) {
|
// 已经是全选，则取消全选
|
this.imageActiveData = [this.imageActiveData[0]]
|
this.allActive = false
|
} else {
|
if (this.imageList.length === 4) {
|
this.$u.toast('每次最多只能选择4张图片')
|
return
|
}
|
// 没有全选则进行全选
|
this.imageActiveData = [...this.imageList]
|
this.allActive = true
|
}
|
},
|
//编辑模板
|
editModel() {
|
console.log('编辑模板')
|
},
|
/**
|
* @description:更换海报主图
|
*/
|
replaceMasterDrawing() {
|
const parms = {
|
imageActiveData: this.imageActiveData,
|
codeImage: this.codeImage
|
}
|
uni.setStorageSync("goodsShareData", JSON.stringify(parms))
|
this.$utils.to('/pages/ShareMoney/edit')
|
|
},
|
/**
|
* @description: 根据不同平台，设置不同的快捷选项
|
*/
|
setQuickEditList() {
|
|
/*
|
1. 所有的商品商品分享 都有 短连接
|
2. 淘宝独有 淘口令
|
*/
|
const quickEditList = ['下单链接', '省钱提示']
|
// 只有淘宝 type 1
|
const {
|
faction,
|
desc
|
} = this.goodsInfo
|
if (desc) {
|
quickEditList.push('推荐理由')
|
// this.quickEditList = quickEditList
|
}
|
// 有邀请码的时候展示邀请
|
if (this.userInfo.inviteCode) {
|
quickEditList.push('下载地址+邀请码')
|
// this.quickEditList = quickEditList
|
}
|
if (faction == 't') {
|
// 只有淘宝有 淘口令
|
quickEditList.unshift('淘口令')
|
this.quickEditList = quickEditList
|
this.quickEditActive = ['淘口令', '下单链接']
|
console.log(this.quickEditList, "k")
|
console.log(this.quickEditActive)
|
return
|
}
|
if (faction === 'd') {
|
// 只有抖音有 抖音口令
|
quickEditList.unshift('抖音口令')
|
this.quickEditList = quickEditList
|
this.quickEditActive = ['抖音口令', '下单链接']
|
return
|
}
|
// 其他
|
this.quickEditList = quickEditList
|
this.quickEditActive = ['下单链接']
|
},
|
|
//复制
|
copys(e) {
|
//0是口令 1是短链接 2是推荐卖点
|
let data = ''
|
if (e === 0) {
|
// 淘口令
|
if (this.goodsInfo.faction === 't') {
|
data = this.tpwd;
|
}
|
// 抖音口令
|
if (this.goodsInfo.faction === 'd') {
|
data = this.dyPassword
|
}
|
}
|
// 下单链接
|
if (e === 1) {
|
data = this.url
|
}
|
// 推荐卖点
|
if (e === 2) {
|
data = this.goodsInfo.desc
|
}
|
// APP下载地址+邀请码
|
if (e === 3) {
|
console.log(this.user)
|
data = '【下载链接】' + this.appInfo.appAndroidDownUrl +
|
'\n【邀请码】' + this.user.invitation_code
|
}
|
uni.setClipboardData({
|
data,
|
success: () => {
|
uni.showToast({
|
title: "复制成功"
|
})
|
}
|
})
|
},
|
async makeQRcode() {
|
// console.log(this.goodsInfo.url, "this.goodsInfo.url")
|
// 同步等待
|
qrcode = new uQRCode({
|
context: this, // 上下文环境
|
canvasId: 'qrcode', // canvas-id
|
usingComponents: false, // 是否是自定义组件
|
loadingText: '', // loading文字
|
text: this.url, // 生成内容
|
size: uni.upx2px(150), // 二维码大小
|
src: 'http://file.symbollu.top/face.jpg', //二维码中间的图片
|
cbResult: res => { // 生成二维码的回调
|
console.log(res);
|
this.codeSrc = res
|
},
|
});
|
},
|
//分享
|
async menuShare(name) {
|
// 微信
|
if (!this.imageActiveData.length) {
|
this.$u.toast('至少选择一张图片')
|
return
|
}
|
this.msg = `${name}${Date.now()}` // 通知verd
|
this.name = name
|
},
|
/**
|
* 渲染完毕接收图片
|
* @param {String} filePath
|
*/
|
// 获取生成的base64 图片路径
|
async receiveRenderData(base64) {
|
const imgPath = await base64ToPath(base64, '.jpeg');
|
console.log(imgPath, "@imgPath")
|
this.sharePostUrl = imgPath
|
console.log(this.sharePostUrl, "ddd")
|
console.log(this.name)
|
const obj = {
|
'微信': () => {
|
this.sharewx()
|
},
|
'微信朋友圈': () => {
|
this.sharepyq()
|
},
|
"QQ": () => {
|
this.shareqq()
|
},
|
"保存": () => {
|
this.saveImg()
|
}
|
}
|
obj[this.name]()
|
},
|
sharewx() {
|
uni.share({
|
provider: "weixin",
|
scene: "WXSceneSession",
|
type: 2,
|
imageUrl: this.sharePostUrl,
|
success: (res) => {
|
uni.hideLoading()
|
console.log("success:" + JSON.stringify(res));
|
},
|
fail: (err) => {
|
console.log("fail:" + JSON.stringify(err));
|
}
|
});
|
},
|
sharepyq() {
|
uni.share({
|
provider: "weixin",
|
scene: "WXSenceTimeline",
|
type: 2,
|
imageUrl: this.sharePostUrl,
|
success: (res) => {
|
uni.hideLoading()
|
console.log("success:" + JSON.stringify(res));
|
},
|
fail: (err) => {
|
console.log("fail:" + JSON.stringify(err));
|
}
|
});
|
|
},
|
shareqq() {
|
uni.share({
|
provider: "qq",
|
type: 2,
|
imageUrl: this.sharePostUrl,
|
success: (res) => {
|
uni.hideLoading()
|
console.log("success:" + JSON.stringify(res));
|
},
|
fail: (err) => {
|
console.log("fail:" + JSON.stringify(err));
|
}
|
});
|
},
|
saveImg() {
|
uni.saveImageToPhotosAlbum({
|
filePath: this.sharePostUrl,
|
success: res => {
|
uni.showToast({
|
title: "保存成功"
|
})
|
},
|
fail(err) {
|
console.log(err, "保存失败");
|
},
|
});
|
},
|
copyEditContainer() {
|
uni.setClipboardData({
|
data: this.edits.replace(/\\n/g, '\n'),
|
success: () => {
|
uni.showToast({
|
title: "复制成功"
|
})
|
}
|
})
|
|
},
|
// 保存素材
|
saveMaterial() {
|
try {
|
this.imageActiveData.forEach(item => {
|
uni.saveImageToPhotosAlbum({ //保存图片到系统相册
|
filePath: item,
|
success: (res) => {
|
// this.$u.toast('保存成功')
|
},
|
fail: (err) => {
|
// this.$u.toast('保存失败')
|
}
|
})
|
})
|
this.$u.toast('保存成功')
|
} catch (error) {
|
this.$u.toast('保存失败')
|
console.log(error, "error")
|
}
|
},
|
// 显示loading
|
_showLoading(str) {
|
this.posterUrl = '';
|
uni.showLoading({
|
title: str
|
});
|
},
|
|
// 隐藏loading
|
_hideLoading() {
|
uni.hideLoading();
|
|
// #ifdef H5
|
this._showToast('长按保存图片');
|
// #endif
|
},
|
|
// 报错alert
|
_errAlert(content) {
|
uni.showModal({
|
title: '提示',
|
content: content
|
});
|
},
|
|
// 提示弹窗
|
_showToast(msg) {
|
uni.showToast({
|
title: msg,
|
icon: 'none'
|
});
|
}
|
}
|
}
|
</script>
|
|
<script lang="renderjs" module="canvasImage" type="module">
|
import html2canvas from '@/utils/html2canvas.min.js';
|
export default {
|
methods: {
|
// 生成图片需要调用的方法
|
generateImage(e, ownerFun) {
|
this.$ownerInstance.callMethod('_showLoading', '正在生成图片') // 生成图片的 loading 提示
|
const dom = document.getElementById('sharePoster')
|
window.pageYOffset = 0
|
document.documentElement.scrollTop = 0
|
document.body.scrollTop =0
|
try {
|
html2canvas(dom, {
|
width: dom.clientWidth, //dom 原始宽度
|
height: dom.clientHeight,
|
scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
|
scrollX: 0,
|
useCORS: true, //支持跨域
|
dpi: 350, //此为像素 设此就不模糊 数据越高像素越高 设备像素比
|
scale: 3, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
|
}).then((canvas) => {
|
console.log(canvas)
|
// html2canvas 生成成功的图片链接需要转成 base64位的url
|
const base64 = canvas.toDataURL('image/png', 1)
|
this.$ownerInstance.callMethod('receiveRenderData', base64)
|
}).catch(err => {
|
// 生成失败 弹出提示弹窗
|
this.$ownerInstance.callMethod('_errAlert', `【生成图片失败，请重试】${err}`)
|
})
|
} catch (error) {
|
console.log(error)
|
}
|
|
// this.$nextTick(() => {
|
|
// })
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
page {
|
background: #F8F8F8;
|
}
|
.flex-column {
|
flex-direction: column !important;
|
}
|
.header {
|
padding: 24rpx 20rpx;
|
background: #FFFFFF;
|
border-radius: 20rpx;
|
margin: 20rpx;
|
|
.titleA {
|
font-size: 30rpx;
|
font-family: PingFang SC;
|
font-weight: 600;
|
color: #343434;
|
margin-right: 15rpx;
|
}
|
|
.titleB {
|
font-size: 22rpx;
|
font-family: PingFang SC;
|
font-weight: 600;
|
color: #333333;
|
}
|
|
.scroll-view_H {
|
white-space: nowrap;
|
width: 100%;
|
margin: 24rpx 0;
|
|
.scrollLists {
|
width: 172rpx;
|
height: 172rpx;
|
margin-right: 20rpx;
|
display: inline-block;
|
position: relative;
|
|
.scrollListsimg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 172rpx;
|
height: 172rpx;
|
border-radius: 15rpx;
|
}
|
|
.scrollAct {
|
position: absolute;
|
right: 10rpx;
|
top: 10rpx;
|
width: 24rpx;
|
height: 24rpx;
|
z-index: 3;
|
}
|
|
.QrCodeimg {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 172rpx;
|
height: 40rpx;
|
background: rgba(51, 51, 51, 0.41);
|
border-radius: 0rpx 0rpx 10rpx 10rpx;
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
}
|
}
|
|
.changeImg {
|
.changeBtn {
|
width: 212rpx;
|
height: 50rpx;
|
background: #FFFFFF;
|
border: 1rpx solid #FF3824;
|
border-radius: 25rpx;
|
font-size: 26rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #FF3824;
|
}
|
|
.changeActiveicon {
|
width: 26rpx;
|
height: 26rpx;
|
}
|
|
.changeActive {
|
font-size: 26rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
margin-left: 10rpx;
|
}
|
}
|
}
|
|
.EditContainer {
|
margin: 0 20rpx;
|
padding: 30rpx 20rpx 13rpx 20rpx;
|
background: #FFFFFF;
|
border-radius: 20rpx;
|
|
.editTitle {
|
.editTitleA {
|
font-size: 30rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
}
|
|
.editTitleB {
|
width: 170rpx;
|
height: 50rpx;
|
background: #FFEDE9;
|
border-radius: 25rpx;
|
font-size: 26rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #FF3824;
|
}
|
}
|
|
.editCenter {
|
width: 100%;
|
box-sizing: border-box;
|
margin: 30rpx 0rpx;
|
padding: 30rpx;
|
background: #F8F8F8;
|
font-family: PingFang SC;
|
border-radius: 20rpx;
|
display: inline-block;
|
white-space: wrap;
|
word-wrap: break-word;
|
}
|
|
.radioContainer {
|
flex-wrap: wrap;
|
|
.radioContainerA {
|
margin: 0 30rpx 20rpx 0;
|
|
.radioIcon {
|
width: 26rpx;
|
height: 26rpx;
|
margin-right: 14rpx;
|
}
|
|
.radioText {
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
}
|
}
|
}
|
|
|
}
|
|
.copyContainer {
|
padding: 30rpx 20rpx;
|
margin: 20rpx;
|
background: #FFFFFF;
|
border-radius: 20rpx;
|
|
.copy_title {
|
font-size: 30rpx;
|
font-family: PingFang SC;
|
font-weight: 600;
|
color: #333333;
|
}
|
|
.taoName {
|
width: 670rpx;
|
height: 88rpx;
|
background: #F8F8F8;
|
border-radius: 20rpx;
|
padding: 0 20rpx;
|
margin-top: 20rpx;
|
|
.taoName_left {
|
font-size: 28rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
}
|
|
.short-url-copy {
|
max-width: 360rpx;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
// border: 1rpx solid red;
|
}
|
|
.taoName_right {
|
width: 106rpx;
|
height: 44rpx;
|
background: #FFFFFF;
|
border: 1rpx solid #666666;
|
border-radius: 22rpx;
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
}
|
}
|
}
|
|
.imgtextShare {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
width: 750rpx;
|
background: #FFFFFF;
|
z-index: 999;
|
padding-bottom: 34rpx;
|
|
.shareTitle {
|
text-align: center;
|
font-size: 34rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
padding: 28rpx 0 37rpx 0;
|
}
|
|
.shareContent {
|
padding: 0 60rpx;
|
}
|
|
.shareIcons {
|
width: 90rpx;
|
height: 90rpx;
|
}
|
|
.shareName {
|
font-size: 30rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
margin-top: 20rpx;
|
}
|
}
|
|
.share-poster {
|
background: #F8F8F8;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
//文字样式丢失且都变成为最小号字体。
|
//需要截图的节点根样式添加font-variant: normal；
|
font-variant: normal;
|
|
.good-img {
|
width: 690rpx;
|
height: 690rpx;
|
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
margin-top: 20rpx;
|
}
|
|
.good-img-index1 {
|
width: 690rpx;
|
height: 690rpx;
|
}
|
|
.good-img-index2 {
|
width: 345rpx;
|
height: 345rpx;
|
}
|
|
.good-img-index3 {
|
width: 230rpx;
|
height: 230rpx;
|
}
|
|
.title-box {
|
margin-top:10rpx;
|
width: 690rpx;
|
border-bottom-right-radius: 20rpx;
|
border-bottom-left-radius: 20rpx;
|
background: #FFFFFF;
|
|
.title {
|
display:flex;
|
align-items:center;
|
// margin-top: 30rpx;
|
box-sizing: border-box;
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #333333;
|
line-height: 36rpx;
|
width: 100%;
|
color: #000000;
|
// word-break: break-all;
|
// text-overflow: ellipsis;
|
// display: -webkit-box;
|
// -webkit-box-orient: vertical;
|
// -webkit-line-clamp: 2;
|
// /* 这里是超出几行省略 */
|
// overflow: hidden;
|
}
|
|
.img {
|
height: 28rpx;
|
margin-right: 6rpx;
|
}
|
.price-box{
|
margin-top: 10rpx;
|
}
|
}
|
|
.bottom-box {
|
display: flex;
|
width: 698rpx;
|
height: 214rpx;
|
background: #FFFFFF;
|
border-radius: 40rpx;
|
padding: 20rpx 30rpx;
|
box-sizing: border-box;
|
|
.code-box {
|
width: 176rpx;
|
height: 176rpx;
|
background: #F8F8F8;
|
border-radius: 20rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.code {
|
width: 150rpx;
|
height: 150rpx;
|
}
|
}
|
}
|
|
.tips-box {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
padding-left: 54rpx;
|
|
.tips-title {
|
font-size: 30rpx;
|
font-weight: bold;
|
color: #000000;
|
line-height: 50rpx;
|
//控制居中显示
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 340rpx;
|
height: 56rpx;
|
}
|
|
.tips-btn {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 350rpx;
|
height: 52rpx;
|
background: #FFDF5C;
|
border-radius: 30rpx;
|
//控制分享海报4角圆滑度
|
font-size: 24rpx;
|
//字体
|
font-family: PingFang SC;
|
//字体大小
|
font-weight: 600;
|
color: #000000;
|
//调节元素的高度
|
line-height: 30rpx;
|
}
|
}
|
}
|
|
#sharePoster {
|
position: fixed;
|
z-index: 10000;
|
left: 10000px;
|
top: 0px;
|
//
|
// height: 1000px;
|
}
|
|
.keep {
|
padding: 6rpx 20rpx;
|
background: #F8F8F8;
|
border-radius: 32rpx;
|
color: #666 !important;
|
}
|
.ml-20 {
|
margin-left: 20rpx;
|
}
|
.mt-20 {
|
margin-top: 20rpx;
|
}
|
|
</style>
|
