TmOct5/barter-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

更新代码

Browse Source
This commit is contained in:
zhangmanman
2021-09-23 10:18:51 +08:00
parent f7fc27944d
commit ec3c9428b3
29 changed files with 26009 additions and 21844 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
pages/store/Spread.vue
View File

@@ -2,19 +2,28 @@
<view class="content">
<view class="codeContent">
<image class="codeContent-back" src="../../static/icons/store_codeBack.png" mode="widthFix"></image>
<view class="company">
<image class="company-logo" src="../../static/dev/good_cover_00.jpg" mode="aspectFill"></image>
<view class="company-cont">
<view class="company-name">如朗科技</view>
<view class="company-name">邀请你加入易货平台</view>
<image class="codeContent-cont" src="../../static/icons/store_contBack.png" mode="widthFix"></image>
<view class="textContent">
<view class="company">
<image class="company-logo" :src="companyInfo.cover" mode="aspectFill"></image>
<view class="company-cont">
<view class="nowrap company-name">{{companyInfo.name}}</view>
<view class="company-tips">易货平台</view>
</view>
</view>
<view class="code">
<image class="code-img" :src="companyInfo.code" mode="aspectFit"></image>
<!-- <view class="code-text">简单扫一扫，即可进入平台</view> -->
</view>
<!-- @click="shareCanvas" -->
<view class="codeBnt">
扫码推广
</view>
</view>
<image class="codeContent-code" src="../../static/dev/good_cover_03.jpg" mode="aspectFit"></image>
</view>
<view class="codeBnt">
<image class="codeBnt-img" src="../../static/icons/store_down.png" mode="aspectFill"></image>
保存图片
</view>
<canvas class="codeImg" canvas-id="qrcodeCard"></canvas>
</view>
</template>
@@ -23,62 +32,218 @@
export default {
data() {
return {
codeImg: ''
companyInfo : ''
}
},
created() {
// companiesCode().then(res=>{
// this.codeImg = res
// })
companiesCode().then(res=>{
this.companyInfo = res
})
},
methods: {
// 绘制图片
shareCanvas(e){
uni.showLoading({
title: '加载中',
})
// 下载头像
let avatarImg = new Promise(success=>{
uni.getImageInfo({
src : this.companyInfo.cover,
success : res => {
success(res.path)
}
})
})
// 下载二维码
let codeImg = new Promise(success => {
uni.getImageInfo({
src : this.companyInfo.code,
success : res => {
success(res.path)
}
})
})
Promise.all([avatarImg, codeImg]).then(res => {
// 绘制海报
const ctx = uni.createCanvasContext('qrcodeCard')
ctx.save()
// 绘制背景图片
ctx.drawImage('../../static/icons/store_downBack', 0, 0, 375, 603)
// 绘制头像
ctx.drawImage(res[0], 0, 0, 60, 60)
// 绘制二维码
ctx.drawImage(res[1], 140, 250, 110, 110)
// 文字
ctx.setFontSize(16)
ctx.fillText(this.companyInfo.name, 194, 180 , 270)
ctx.setFontSize(16)
ctx.fillText('邀请你加入易货平台', 194, 180 , 270)
ctx.save();
ctx.beginPath(); //开始绘制
ctx.arc(50 / 2 + 170, 50 / 2 + 110, 50 / 2, 0, Math.PI * 2, false);
ctx.clip();
// 保存图片
ctx.draw(true, () => {
uni.hideLoading()
uni.canvasToTempFilePath({
canvasId: 'qrcodeCard',
x: 0,
y: 0,
success: res => {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success : res=>{
if (res.errMsg == "saveImageToPhotosAlbum:ok"){
uni.showToast({
title: '分享海报已保存至相册',
icon : 'none'
})
}else{
uni.hideLoading()
}
},
fail : err=>{
if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny"){
uni.showModal({
title : '提示',
content : '暂未授权小程序写入您的相册，无法存储二维码海报',
confirmColor: '#d82526',
confirmText : '去设置',
success : res=>{
if (res.confirm){
uni.openSetting()
}
}
})
}
}
})
}
})
})
}).catch(err=>{
uni.showToast({
title: '海报下载，请检查网络',
icon : 'none'
})
})
}
}
}
</script>
<style lang="scss" scoped>
.content {
background-color: #e1293f;
background-color: #e93340;
height: 100vh;
width: 100vw;
padding: 80rpx;
box-sizing: border-box;
}
.codeContent {
position: relative;
width: 100%;
height: 100vh;
.codeContent-back {
width: 100%;
height: 100%;
z-index: 1;
position: absolute;
box-shadow: 0 0 20rpx rgba(115,0,4,.3);
}
.codeContent-cont {
left: 5%;
width: 90%;
top: 100px;
z-index: 2;
position: absolute;
}
.codeContent-tips {
position: absolute;
top: 0;
right: 20rpx;
width: 200rpx;
z-index: 2;
}
.textContent {
position: absolute;
padding: 20rpx 20rpx 0 40rpx;
box-sizing: border-box;
width: 70%;
z-index: 3;
left: 15%;
right: 15%;
top: 140px;
}
.company {
position: absolute;
width: 100%;
.company-logo {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
}
.company-cont {
position: absolute;
width: 100%;
height: 230rpx;
left: 0;
top: 0;
padding: 20rpx 20rpx 30rpx 210rpx;
font-size: $title-size;
.company-name {
font-weight: 600;
margin: 10rpx 0;
}
.company-tips {
font-size: 26rpx;
color: #787878;
}
}
}
.code {
text-align: center;
width: 100%;
box-sizing: border-box;
margin-bottom: $margin;
.code-img {
width: 90%;
}
.code-text {
color: #787878;
margin-top: $margin - 10;
font-size: $title-size;
}
}
}
.codeBnt {
background-color: #FFFFFF;
background-color: #e1293f;
text-align: center;
border-radius: 10rpx;
line-height: 90rpx;
font-weight: 600;
font-size: $title-size;
color: #e1293f;
margin-top: 160rpx;
color: #FFFFFF;
box-shadow: 4rpx 0 10rpx rgba(155,0,19,.5);
position: relative;
.codeBnt-img {
position: absolute;
top: 0;
width: 60rpx;
height: 60rpx;
left: 24%;
}
}
/* canvas */
.codeImg {
position: absolute;
left: -1000%;
height: 603px;
width: 375px;
background: white;
}
</style>