|
|
|
|
@ -5,7 +5,8 @@ |
|
|
|
|
</view> |
|
|
|
|
<view class="invite-hd"> |
|
|
|
|
<!-- <image :src="$picUrl+'/static/news/invite-bg.png'"></image> --> |
|
|
|
|
<view class="btn" @click="openPage(3)"></view> |
|
|
|
|
<view class="btn" @click="createImge"> |
|
|
|
|
</view> |
|
|
|
|
<view class="rule" @click="openPage(4)"></view> |
|
|
|
|
</view> |
|
|
|
|
<view class="invite-bd"> |
|
|
|
|
@ -70,17 +71,21 @@ |
|
|
|
|
<!-- --> |
|
|
|
|
<view class="invite-popup" v-if="isPopup"> |
|
|
|
|
<view class="popup"> |
|
|
|
|
<image class="bg" show-menu-by-longpress :src="qrcode"></image> |
|
|
|
|
<image class="bg" show-menu-by-longpress src="https://www.royaum.com.cn/static/3@2x.png"></image> |
|
|
|
|
<image class="code" show-menu-by-longpress :src="qrcode"></image> |
|
|
|
|
<view class="qrcode">{{userInfo.user_id}}</view> |
|
|
|
|
<view class="tips"> |
|
|
|
|
<view class="cancle" @click="download(1)">取消</view> |
|
|
|
|
<view class="sure" @click="download(2)">保存到相册</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<canvas id="myCanvas" class="myCanvas" canvas-id="myCanvas" :style="{'width': 702/devicePixelRatio+'px',' height': 1248/devicePixelRatio+'px'}" ></canvas> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
const ctx = uni.createCanvasContext('myCanvas') |
|
|
|
|
import { |
|
|
|
|
createQrCodeImg |
|
|
|
|
} from '@/utils/qrcode' |
|
|
|
|
@ -89,7 +94,7 @@ |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
qrcode: "", |
|
|
|
|
qrcode: "https://www.royaum.com.cn/temp/10001/qrcode_9771ee05d738a611504d2199eb7ee1df.png?t=1713240295", |
|
|
|
|
userInfo: {}, |
|
|
|
|
backgroundBg: { |
|
|
|
|
"background": "rgba(255,255,255,0.22)" |
|
|
|
|
@ -99,7 +104,8 @@ |
|
|
|
|
}, |
|
|
|
|
isPopup: false, |
|
|
|
|
info: {}, |
|
|
|
|
list: [] |
|
|
|
|
list: [], |
|
|
|
|
devicePixelRatio: uni.getSystemInfoSync().devicePixelRatio |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onReady() { |
|
|
|
|
@ -116,6 +122,60 @@ |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
createImge() { |
|
|
|
|
const that = this; |
|
|
|
|
|
|
|
|
|
ctx.fillRect(0, 0, 702/that.devicePixelRatio, 1248/that.devicePixelRatio); |
|
|
|
|
uni.downloadFile({ |
|
|
|
|
url: 'https://www.royaum.com.cn/static/3@2x.png', |
|
|
|
|
success(res) { |
|
|
|
|
ctx.drawImage(res.tempFilePath, 0, 0, 702/that.devicePixelRatio, 1248/that.devicePixelRatio); |
|
|
|
|
uni.downloadFile({ |
|
|
|
|
url: that.qrcode, |
|
|
|
|
success: (res2) => { |
|
|
|
|
ctx.save(); // 保存 |
|
|
|
|
ctx.beginPath(); // 开始绘制 |
|
|
|
|
ctx.arc(162/that.devicePixelRatio / 2 + 285/that.devicePixelRatio, 162/that.devicePixelRatio / 2 + 870/that.devicePixelRatio, 162/that.devicePixelRatio / 2, 0, Math.PI * 2, false); |
|
|
|
|
ctx.clip(); |
|
|
|
|
ctx.drawImage(res2.tempFilePath, 285/that.devicePixelRatio, 870/that.devicePixelRatio, 162/that.devicePixelRatio, 162/that.devicePixelRatio); |
|
|
|
|
// 恢复之前保存的绘图上下文 |
|
|
|
|
ctx.restore(); |
|
|
|
|
// 邀请码 |
|
|
|
|
ctx.setFontSize(45/that.devicePixelRatio); |
|
|
|
|
ctx.setFillStyle('#cf100d'); |
|
|
|
|
ctx.fillText(that.userInfo.user_id, 200/that.devicePixelRatio, 1213/that.devicePixelRatio); |
|
|
|
|
ctx.draw() |
|
|
|
|
uni.canvasToTempFilePath({ |
|
|
|
|
width: 702/that.devicePixelRatio, |
|
|
|
|
height: 1248/that.devicePixelRatio, |
|
|
|
|
destWidth: 702/that.devicePixelRatio, |
|
|
|
|
destHeight: 1248/that.devicePixelRatio, |
|
|
|
|
canvasId: 'myCanvas', |
|
|
|
|
success: function(res) { |
|
|
|
|
// 在H5平台下，tempFilePath 为 base64 |
|
|
|
|
console.log(res.tempFilePath) |
|
|
|
|
// uni.saveImageToPhotosAlbum({ |
|
|
|
|
// filePath: res.tempFilePath, |
|
|
|
|
// success(data) { |
|
|
|
|
// that.$success('保存成功') |
|
|
|
|
// }, |
|
|
|
|
// fail(err) { |
|
|
|
|
// if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') { |
|
|
|
|
// that.$toast('请允许访问相册后重试 (右上角菜单 - 设置 - 相册)', 3000) |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// }) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
// 获取预售规则 |
|
|
|
|
getCarousel() { |
|
|
|
|
const app = this; |
|
|
|
|
@ -168,7 +228,10 @@ |
|
|
|
|
app.isPopup = false; |
|
|
|
|
if(type == 1){ |
|
|
|
|
return ; |
|
|
|
|
}else{ |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
return ; |
|
|
|
|
uni.showLoading({ |
|
|
|
|
title: '加载中' |
|
|
|
|
}) |
|
|
|
|
@ -191,7 +254,6 @@ |
|
|
|
|
// 图片保存到相册 |
|
|
|
|
onSaveImage(tempFilePath) { |
|
|
|
|
const app = this |
|
|
|
|
// #ifndef H5 |
|
|
|
|
uni.saveImageToPhotosAlbum({ |
|
|
|
|
filePath: tempFilePath, |
|
|
|
|
success(data) { |
|
|
|
|
@ -203,7 +265,6 @@ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
// #endif |
|
|
|
|
// #ifdef H5 |
|
|
|
|
const names = tempFilePath.split('/') |
|
|
|
|
const fileName = names[names.length - 1] |
|
|
|
|
@ -272,7 +333,13 @@ |
|
|
|
|
.invite { |
|
|
|
|
background: url(https://www.royaum.com.cn/static/news/invite-bg.png?t=2) center top no-repeat; |
|
|
|
|
background-size: 100% auto; |
|
|
|
|
|
|
|
|
|
.myCanvas{ |
|
|
|
|
position: absolute; |
|
|
|
|
left: 0; |
|
|
|
|
top: 0; |
|
|
|
|
z-index: -1; |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
&-popup { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
@ -283,43 +350,51 @@ |
|
|
|
|
z-index: 55; |
|
|
|
|
|
|
|
|
|
.popup { |
|
|
|
|
width: 672rpx; |
|
|
|
|
height: 912rpx; |
|
|
|
|
width: 702rpx; |
|
|
|
|
height: 1370rpx; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 50%; |
|
|
|
|
margin-left: -336rpx; |
|
|
|
|
margin-left: -351rpx; |
|
|
|
|
top: 50%; |
|
|
|
|
margin-top: -556rpx; |
|
|
|
|
margin-top: -685rpx; |
|
|
|
|
z-index: 2; |
|
|
|
|
|
|
|
|
|
.bg { |
|
|
|
|
width: 672rpx; |
|
|
|
|
height: 100%; |
|
|
|
|
border-radius: 26rpx; |
|
|
|
|
.bg{ |
|
|
|
|
width: 702rpx; |
|
|
|
|
height: 1248rpx; |
|
|
|
|
} |
|
|
|
|
.code { |
|
|
|
|
width: 162rpx; |
|
|
|
|
height: 162rpx; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 50%; |
|
|
|
|
bottom: 340rpx; |
|
|
|
|
z-index: 2; |
|
|
|
|
margin-left: -65rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.qrcode { |
|
|
|
|
width: 200rpx; |
|
|
|
|
height: 200rpx; |
|
|
|
|
height: 80rpx; |
|
|
|
|
position: absolute; |
|
|
|
|
right: 25rpx; |
|
|
|
|
top: 670rpx; |
|
|
|
|
border: 8rpx solid #FFFFFF; |
|
|
|
|
left: 85px; |
|
|
|
|
bottom: 125rpx; |
|
|
|
|
z-index: 2; |
|
|
|
|
border-radius: 5rpx; |
|
|
|
|
font-size: 45rpx; |
|
|
|
|
color: #cf100d; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tips { |
|
|
|
|
width: 672rpx; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 80rpx; |
|
|
|
|
position: absolute; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 30rpx; |
|
|
|
|
line-height: 80rpx; |
|
|
|
|
color: #212121; |
|
|
|
|
left: 50%; |
|
|
|
|
margin-left: -336rpx; |
|
|
|
|
bottom: -120rpx; |
|
|
|
|
left: 0; |
|
|
|
|
bottom: 0; |
|
|
|
|
z-index: 2; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
fanfan
8 months ago