TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

[商品分享微信好友和朋友圈处理邀请码和商品id]

Browse Source
This commit is contained in:
张冬雪
2021-10-29 16:17:05 +08:00
parent 18fc1f2239
commit 0682a04664
3 changed files with 492 additions and 424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
pages/goods/details.vue
View File

@@ -315,13 +315,16 @@
},
// 顶部菜单点击了分享功能
onNavigationBarButtonTap() {
console.log('点击了分享功能。。。')
let invite = this.goodsObj.user_invite || ''
let goods ='&GoodsId/$-?' + this.goodsObj.goods_id
let shareCode = invite === '' ?goods:invite.slice(0,2) + '$InviTaTiOn$CoDe/$-?' + invite.substring(2)+goods
console.log(shareCode)
uniShare.show({
content: { //公共的分享参数配置 类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
content: {
type: 0,
href: 'https://www.lianshang.vip/app?',
title: '链商星球，共创未来，一起搭建链商经济的世界~',
summary: '链商星球app你值得拥有~天天签到领福利~',
href: 'https://www.lianshang.vip/app?parent_id=' + shareCode,
title: '链商星球 共创未来，一起搭建 链商经济的世界~',
summary: '链商星球APP你值得拥有~每日签到领贡献值~',
imageUrl: config.apiUrls+'images/top_logo.png'
},
menus: [{
@@ -342,9 +345,10 @@
}
],
cancelText: "取消分享",
}, e => { //callback
console.log(uniShare.isShow);
console.log(e);
}, e => {
if(uniShare.isShow){
console.log('shareCode',shareCode)
}
})
}
}

851
pages/user/code.vue
View File

@@ -7,27 +7,29 @@
<view class="code-lay" @click="coverCode"></view>
<image class="code-back-image" :src="item.cover" mode="aspectFill"></image>
<view class="codDate">
<view class="codDate-year">
{{item.date.solar.month}}
</view>
<view class="codDate-day">
{{item.date.solar.day}}
</view>
<view class="codDate-lunar">
{{item.date.lunar}}
</view>
<view class="codDate-year">
{{item.date.solar.month}}
</view>
<view class="codDate-day">
{{item.date.solar.day}}
</view>
<view class="codDate-lunar">
{{item.date.lunar}}
</view>
</view>
<view class="codeCont">
<image class="codeCont-avatar" :src="item.user_info.avatar ? item.user_info.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image>
<view class="codeCont-text">
<view class="codeCont-name">
{{item.user_info.nickname}}
</view>
<view class="codeCont-number">
邀请码：{{item.invite}}
</view>
</view>
<image class="codeCont-img" :src="item.code" mode="widthFix"></image>
<image class="codeCont-avatar"
:src="item.user_info.avatar ? item.user_info.avatar : '/static/user/user-portrait.png'"
mode="aspectFill"></image>
<view class="codeCont-text">
<view class="codeCont-name">
{{item.user_info.nickname}}
</view>
<view class="codeCont-number">
邀请码：{{item.invite}}
</view>
</view>
<image class="codeCont-img" :src="item.code" mode="widthFix"></image>
</view>
</view>
</swiper-item>
@@ -37,454 +39,495 @@
<view class="hith">朋友通过你的邀请注册成功后，将与您绑定好友关系通过成为平台用户，你都可以获得贡献值奖励。</view>
<view class="number">
<view class="title">邀请码 : {{inviteData[0].invite}}</view>
<view class="value" @click="copyCenter(inviteData[0].invite)">复制邀请码</view>
<view class="value" @click="copyCenter(inviteData[0].invite)">复制邀请码</view>
</view>
<!-- <view class="button" @click="coverCode">生成分享海报</view> -->
</view>
<canvas class="my-canvas" canvas-id="myCanvas" id="myCanvas"/>
<view v-if="posterShow">
<view class="posterBack"></view>
<view class="poster">
<view class="poster-img">
<image class="img" :src="posterImg" mode="widthFix" />
</view>
<view class="poster-btn">
<view class="operate operate-cancel" @click="saveImage">保存图片至相册</view>
<view class="operate" @tap="posterShow = false">取消</view>
</view>
</view>
</view>
<canvas class="my-canvas" canvas-id="myCanvas" id="myCanvas" />
<view v-if="posterShow">
<view class="posterBack"></view>
<view class="poster">
<view class="poster-img">
<image class="img" :src="posterImg" mode="widthFix" />
</view>
<view class="poster-btn">
<view class="operate operate-cancel" @click="saveImage">保存图片至相册</view>
<view class="operate" @tap="posterShow = false">取消</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { userInvite } from '@/apis/interfaces/user'
import { saveImageToPhotosAlbum, showToast, downloadFile } from '@/uni_modules/sakura-canvas/js_sdk/util'
import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
let draw = null
import {
userInvite
} from '@/apis/interfaces/user'
import {
saveImageToPhotosAlbum,
showToast,
downloadFile
} from '@/uni_modules/sakura-canvas/js_sdk/util'
import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
let draw = null
export default {
data() {
return {
Popinvite : {}, //下载海报数据
inviteData: [] ,//二维码信息
codeIndex : 0,
posterImg : '',
defaultImg: '',
loaded : false,
posterShow: false
Popinvite: {}, //下载海报数据
inviteData: [], //二维码信息
codeIndex: 0,
posterImg: '',
defaultImg: '',
loaded: false,
posterShow: false
};
},
onLoad() {
// 获取二维码
this.inviteInfo()
},
async created() {},
methods:{
// 二维码
inviteInfo(){
userInvite().then(res => {
this.loaded = true
this.inviteData = res
}).catch(err => {
uni.showToast({
icon: 'none',
title: err.message
})
})
},
// 生成海报
async coverCode(){
let img = this.inviteData[this.codeIndex].code
let back = this.inviteData[this.codeIndex].cover
let name = this.inviteData[this.codeIndex].user_info.nickname
let invite = this.inviteData[this.codeIndex].invite
let avatar = this.inviteData[this.codeIndex].user_info.avatar || '/static/user/user-portrait.png'
let date = this.inviteData[this.codeIndex].date
draw = new Draw({
width: 375,
height: 667,
canvasId:'myCanvas',
_this: this,
background: {
type: 'color',
color: 'white',
w: 375,
h: 667,
},
})
let res = await draw.createdSharePoster(({ bgObj }) => {
let { width, height } = bgObj
this.Popinvite = bgObj
// 绘制内容
return [
// 背景
{
type: 'image',
x: 0,
y: 0,
src: back,
w: 375,
h: 667,
zIndex: 0,
},
// 日历-边框
{
type: 'rect',
x: 280,
y: 10,
w: 60, // 宽度 必填
h: 80, // 高度 必填
zIndex: 99,
isFill: false, // 是否是填充矩形, false: 线性矩形
lineWidth: 1 ,// 当矩形为线性时，矩形的边框宽度
color: '#ffffff',
},
// 日历-线条
{
type: 'line',
zIndex: 99,
x: 280,
y: 62,
w: 60, // 宽度 默认整个画布的宽度 - x轴的距离
color: '#ffffff', // 颜色 默认#000000 在不考虑字节跳动小程序的前提下可简写(#000)
alpha: 1, // 透明度 默认1 取值范围 0~1
lineType: 'solid', // 线条类型 默认 solid: 实线 可选 dashed: 虚线
lineWidth: 1, // 线条高度
lineCap: 'butt' // 线条端点样式 默认 butt 可选 round, square
},
// 日历-年月
{
type: 'text',
x: 284,
y: 18,
zIndex: 99,
w: width - (20 * 2),
text: date.solar.month,
color: '#ffffff',
font: {
size: 14
}
},
// 日历-日
{
type: 'text',
x: 298,
y: 40,
zIndex: 99,
w: width - (20 * 2),
text: date.solar.day,
color: '#ffffff',
font: {
size: 18,
weight: 'bold'
}
},
// 日历-农历日期
{
type: 'text',
x: 282,
y: 70,
zIndex: 99,
w: width - (20 * 2),
text: date.lunar,
color: '#ffffff',
font: {
size: 14
}
},
// 用户昵称
{
type: 'text',
x: 86,
y: 600,
zIndex: 99,
w: width - (20 * 2),
text: name,
color: '#ffffff',
font: {
size: 16
}
},
// 邀请码
{
type: 'text',
x: 86,
y: 628,
zIndex: 99,
w: width - (20 * 2),
text: '邀请码：' + invite,
color: '#c4a1cb',
font: {
size: 14
}
},
// 用户头像
{
type: 'image',
x: 24,
y: 598,
src: avatar,
w: 46,
h: 46,
drawType: 'arc',
zIndex: 99,
borderWidth: 5, // 图片边框大小 默认0
borderColor: '#ffffff' // 图片边框颜色 默认无颜色
},
// 二维码
{
type: 'image',
x: 280,
y: 585,
w: 72,
h: 72,
zIndex: 99,
src: img
}
]
})
if (!res.success) return
this.posterImg = res.data
this.posterShow = true
onLoad() {
// 获取二维码
this.inviteInfo()
},
async created() {},
methods: {
// 二维码
inviteInfo() {
userInvite().then(res => {
this.loaded = true
this.inviteData = res
}).catch(err => {
uni.showToast({
icon: 'none',
title: err.message
})
})
},
// 保存图片
async saveImage() {
let { posterImg } = this
let res = await saveImageToPhotosAlbum(posterImg)
if (!res.success) return
showToast('保存成功,去相册分享给朋友吧')
this.posterShow = false
},
// 复制邀请码
copyCenter(e) {
// 生成海报
async coverCode() {
let img = this.inviteData[this.codeIndex].code
let back = this.inviteData[this.codeIndex].cover
let name = this.inviteData[this.codeIndex].user_info.nickname
let invite = this.inviteData[this.codeIndex].invite
let avatar = this.inviteData[this.codeIndex].user_info.avatar || '/static/user/user-portrait.png'
let date = this.inviteData[this.codeIndex].date
draw = new Draw({
width: 375,
height: 667,
canvasId: 'myCanvas',
_this: this,
background: {
type: 'color',
color: 'white',
w: 375,
h: 667,
},
})
let res = await draw.createdSharePoster(({
bgObj
}) => {
let {
width,
height
} = bgObj
this.Popinvite = bgObj
// 绘制内容
return [
// 背景
{
type: 'image',
x: 0,
y: 0,
src: back,
w: 375,
h: 667,
zIndex: 0,
},
// 日历-边框
{
type: 'rect',
x: 280,
y: 10,
w: 60, // 宽度 必填
h: 80, // 高度 必填
zIndex: 99,
isFill: false, // 是否是填充矩形, false: 线性矩形
lineWidth: 1, // 当矩形为线性时，矩形的边框宽度
color: '#ffffff',
},
// 日历-线条
{
type: 'line',
zIndex: 99,
x: 280,
y: 62,
w: 60, // 宽度 默认整个画布的宽度 - x轴的距离
color: '#ffffff', // 颜色 默认#000000 在不考虑字节跳动小程序的前提下可简写(#000)
alpha: 1, // 透明度 默认1 取值范围 0~1
lineType: 'solid', // 线条类型 默认 solid: 实线 可选 dashed: 虚线
lineWidth: 1, // 线条高度
lineCap: 'butt' // 线条端点样式 默认 butt 可选 round, square
},
// 日历-年月
{
type: 'text',
x: 284,
y: 18,
zIndex: 99,
w: width - (20 * 2),
text: date.solar.month,
color: '#ffffff',
font: {
size: 14
}
},
// 日历-日
{
type: 'text',
x: 298,
y: 40,
zIndex: 99,
w: width - (20 * 2),
text: date.solar.day,
color: '#ffffff',
font: {
size: 18,
weight: 'bold'
}
},
// 日历-农历日期
{
type: 'text',
x: 282,
y: 70,
zIndex: 99,
w: width - (20 * 2),
text: date.lunar,
color: '#ffffff',
font: {
size: 14
}
},
// 用户昵称
{
type: 'text',
x: 86,
y: 600,
zIndex: 99,
w: width - (20 * 2),
text: name,
color: '#ffffff',
font: {
size: 16
}
},
// 邀请码
{
type: 'text',
x: 86,
y: 628,
zIndex: 99,
w: width - (20 * 2),
text: '邀请码：' + invite,
color: '#c4a1cb',
font: {
size: 14
}
},
// 用户头像
{
type: 'image',
x: 24,
y: 598,
src: avatar,
w: 46,
h: 46,
drawType: 'arc',
zIndex: 99,
borderWidth: 5, // 图片边框大小 默认0
borderColor: '#ffffff' // 图片边框颜色 默认无颜色
},
// 二维码
{
type: 'image',
x: 280,
y: 585,
w: 72,
h: 72,
zIndex: 99,
src: img
}
]
})
if (!res.success) return
this.posterImg = res.data
this.posterShow = true
},
// 保存图片
async saveImage() {
let {
posterImg
} = this
let res = await saveImageToPhotosAlbum(posterImg)
if (!res.success) return
showToast('保存成功,去相册分享给朋友吧')
this.posterShow = false
},
// 复制邀请码
copyCenter(e) {
console.log(e)
// e.slice(0,2) + '$InviTaTiOn$CoDe/$-?' + e.substring(2)
uni.setClipboardData({
data: e,
success(){
success() {
uni.showToast({
title: '邀请码已复制',
icon : 'none'
icon: 'none'
})
}
})
},
// 切换海报背景index
swiperChange(e) {
this.codeIndex = e.detail.current
}
}
},
// 切换海报背景index
swiperChange(e) {
this.codeIndex = e.detail.current
}
}
}
</script>
<style lang="scss" scoped>
.content{
.content {
background: white;
padding: $padding 0;
box-sizing: border-box;
box-sizing: border-box;
min-height: 100vh;
@extend .vertical;
}
// 轮播
.code{
.code {
position: relative;
width: 100%;
padding-top: calc(183% - 280rpx - #{$padding * 2});
.code-swiper{
.code-swiper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.code-item{
.code-item {
height: 100%;
width: 100%;
padding: 0 $padding/2;
.code-lay{
.code-lay {
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
}
.code-back-image{
.code-back-image {
width: 100%;
height: 100%;
}
}
}
}
// 提示信息
.footer{
.footer {
padding: 0 $padding + 10;
.hith{
.hith {
color: $text-gray;
font-size: $title-size-sm;
padding-top: $padding + 10;
padding-top: $padding + 10;
}
.number {
background-color: $border-color-lg;
padding: $padding - 5;
margin: $margin + 20 0;
font-size: $title-size-lg;
border-radius: 8rpx;
display: flex;
.title {
flex: 1;
}
.value {
font-size: $title-size-m;
color: $text-price;
}
}
.button {
background: $text-price;
border-radius: 0;
height: 90rpx;
line-height: 90rpx;
font-size: $title-size;
color: white;
text-align: center;
border-radius: 8rpx;
}
.number {
background-color: $border-color-lg;
padding: $padding - 5;
margin: $margin + 20 0;
font-size: $title-size-lg;
border-radius: 8rpx;
display: flex;
.title {
flex: 1;
}
.value {
font-size: $title-size-m;
color: $text-price;
}
}
.button {
background: $text-price;
border-radius: 0;
height: 90rpx;
line-height: 90rpx;
font-size: $title-size;
color: white;
text-align: center;
border-radius: 8rpx;
}
// number
// title
// value
// button
// title
}
// 头像昵称
.codeCont {
position: absolute;
left: 10rpx;
bottom: 0;
width: 100%;
padding: 16rpx 30rpx 20rpx;
box-sizing: border-box;
z-index: 9;
.codeCont-avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
border: 4rpx solid #FFFFFF;
}
.codeCont-text {
position: absolute;
width: 100%;
left: 0;
top: 0;
padding: 14rpx 40rpx 0 140rpx;
box-sizing: border-box;
.codeCont-name {
color: #FFFFFF;
font-size: $title-size;
margin-bottom: 10rpx;
}
.codeCont-number {
font-size: $title-size-sm;
display: flex;
color: #c4a1cb;
}
}
.codeCont-img {
width: 120rpx;
height: 120rpx;
position: absolute;
right: 50rpx;
bottom: 10rpx;
}
}
// 头像昵称
.codeCont {
position: absolute;
left: 10rpx;
bottom: 0;
width: 100%;
padding: 16rpx 30rpx 20rpx;
box-sizing: border-box;
z-index: 9;
.codeCont-avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
border: 4rpx solid #FFFFFF;
}
.codeCont-text {
position: absolute;
width: 100%;
left: 0;
top: 0;
padding: 14rpx 40rpx 0 140rpx;
box-sizing: border-box;
.codeCont-name {
color: #FFFFFF;
font-size: $title-size;
margin-bottom: 10rpx;
}
.codeCont-number {
font-size: $title-size-sm;
display: flex;
color: #c4a1cb;
}
}
.codeCont-img {
width: 120rpx;
height: 120rpx;
position: absolute;
right: 50rpx;
bottom: 10rpx;
}
}
// 日历
.codDate {
position: absolute;
top: 15rpx;
right: 70rpx;
z-index: 9;
color: #FFFFFF;
text-align: center;
font-size: 24rpx;
border: 2rpx solid #fffefc;
.codDate-year {
padding-top: 5rpx;
}
.codDate-day {
padding: 5rpx 0;
font-size: 32rpx;
font-weight: 600;
border-bottom: 2rpx solid #a980c6;
}
.codDate-lunar {
font-size: 24rpx;
transform: scale(.9);
padding: 4rpx 0;
}
}
// canvas
.my-canvas{
width: 375px;
height: 667px;
position: fixed;
top: -99999999999rpx;
left: -99999999999rpx;
z-index: -99999999999;
opacity: 0;
}
.posterBack {
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0,0,0,.7);
left: 0;
top: 0;
}
.poster{
width: 100vw;
height: 100vh;
display: flex;
flex-flow: column nowrap;
justify-content: center;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 9;
&-img{
width: 580rpx;
position: relative;
margin: 70rpx auto 20rpx;
.img{
width: 100%;
}
}
&-btn{
padding: 0 $padding * 2;
.operate {
width: 100%;
margin-bottom: 20rpx;
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
display: inline-block;
text-align: center;
color: #fff;
&-cancel{
background-color: $text-price;
}
}
}
}
.codDate {
position: absolute;
top: 15rpx;
right: 70rpx;
z-index: 9;
color: #FFFFFF;
text-align: center;
font-size: 24rpx;
border: 2rpx solid #fffefc;
.codDate-year {
padding-top: 5rpx;
}
.codDate-day {
padding: 5rpx 0;
font-size: 32rpx;
font-weight: 600;
border-bottom: 2rpx solid #a980c6;
}
.codDate-lunar {
font-size: 24rpx;
transform: scale(.9);
padding: 4rpx 0;
}
}
// canvas
.my-canvas {
width: 375px;
height: 667px;
position: fixed;
top: -99999999999rpx;
left: -99999999999rpx;
z-index: -99999999999;
opacity: 0;
}
.posterBack {
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, .7);
left: 0;
top: 0;
}
.poster {
width: 100vw;
height: 100vh;
display: flex;
flex-flow: column nowrap;
justify-content: center;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 9;
&-img {
width: 580rpx;
position: relative;
margin: 70rpx auto 20rpx;
.img {
width: 100%;
}
}
&-btn {
padding: 0 $padding * 2;
.operate {
width: 100%;
margin-bottom: 20rpx;
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
display: inline-block;
text-align: center;
color: #fff;
&-cancel {
background-color: $text-price;
}
}
}
}
</style>