wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

我的分销码与会员码展示+邀请好友海报

Browse Source
main
shuxiaoquan 7 months ago
parent 493fb320f5
commit c7b361273a
3 changed files with 167 additions and 30 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      .hbuilderx/launch.json
  2. 125
      pages/invite/index.vue
  3. 70
      pages/user/index.vue

2
.hbuilderx/launch.json
Unescape View File

@ -20,7 +20,7 @@
}, },
"mp-weixin" : "mp-weixin" :
{ {
"launchtype" : "remote" "launchtype" : "local"
}, },
"type" : "uniCloud" "type" : "uniCloud"
} }

125
pages/invite/index.vue
Unescape View File

@ -5,7 +5,8 @@
</view> </view>
<view class="invite-hd"> <view class="invite-hd">
<!-- <image :src="$picUrl+'/static/news/invite-bg.png'"></image> --> <!-- <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 class="rule" @click="openPage(4)"></view>
</view> </view>
<view class="invite-bd"> <view class="invite-bd">
@ -70,17 +71,21 @@
<!-- --> <!-- -->
<view class="invite-popup" v-if="isPopup"> <view class="invite-popup" v-if="isPopup">
<view class="popup"> <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="tips">
<view class="cancle" @click="download(1)">取消</view> <view class="cancle" @click="download(1)">取消</view>
<view class="sure" @click="download(2)">保存到相册</view> <view class="sure" @click="download(2)">保存到相册</view>
</view> </view>
</view> </view>
</view> </view>
<canvas id="myCanvas" class="myCanvas" canvas-id="myCanvas" :style="{'width': 702/devicePixelRatio+'px',' height': 1248/devicePixelRatio+'px'}" ></canvas>
</view> </view>
</template> </template>
<script> <script>
const ctx = uni.createCanvasContext('myCanvas')
import { import {
createQrCodeImg createQrCodeImg
} from '@/utils/qrcode' } from '@/utils/qrcode'
@ -89,7 +94,7 @@
export default { export default {
data() { data() {
return { return {
qrcode: "", qrcode: "https://www.royaum.com.cn/temp/10001/qrcode_9771ee05d738a611504d2199eb7ee1df.png?t=1713240295",
userInfo: {}, userInfo: {},
backgroundBg: { backgroundBg: {
"background": "rgba(255,255,255,0.22)" "background": "rgba(255,255,255,0.22)"
@ -99,7 +104,8 @@
}, },
isPopup: false, isPopup: false,
info: {}, info: {},
list: [] list: [],
devicePixelRatio: uni.getSystemInfoSync().devicePixelRatio
} }
}, },
onReady() { onReady() {
@ -116,6 +122,60 @@
} }
}, },
methods: { 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() { getCarousel() {
const app = this; const app = this;
@ -168,7 +228,10 @@
app.isPopup = false; app.isPopup = false;
if(type == 1){ if(type == 1){
return ; return ;
}else{
} }
return ;
uni.showLoading({ uni.showLoading({
title: '加载中' title: '加载中'
}) })
@ -191,7 +254,6 @@
// 图片保存到相册 // 图片保存到相册
onSaveImage(tempFilePath) { onSaveImage(tempFilePath) {
const app = this const app = this
// #ifndef H5
uni.saveImageToPhotosAlbum({ uni.saveImageToPhotosAlbum({
filePath: tempFilePath, filePath: tempFilePath,
success(data) { success(data) {
@ -203,7 +265,6 @@
} }
} }
}) })
// #endif
// #ifdef H5 // #ifdef H5
const names = tempFilePath.split('/') const names = tempFilePath.split('/')
const fileName = names[names.length - 1] const fileName = names[names.length - 1]
@ -272,7 +333,13 @@
.invite { .invite {
background: url(https://www.royaum.com.cn/static/news/invite-bg.png?t=2) center top no-repeat; background: url(https://www.royaum.com.cn/static/news/invite-bg.png?t=2) center top no-repeat;
background-size: 100% auto; background-size: 100% auto;
.myCanvas{
position: absolute;
left: 0;
top: 0;
z-index: -1;
opacity: 0;
}
&-popup { &-popup {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -283,43 +350,51 @@
z-index: 55; z-index: 55;
.popup { .popup {
width: 672rpx; width: 702rpx;
height: 912rpx; height: 1370rpx;
position: absolute; position: absolute;
left: 50%; left: 50%;
margin-left: -336rpx; margin-left: -351rpx;
top: 50%; top: 50%;
margin-top: -556rpx; margin-top: -685rpx;
z-index: 2; z-index: 2;
.bg{
.bg { width: 702rpx;
width: 672rpx; height: 1248rpx;
height: 100%; }
border-radius: 26rpx; .code {
width: 162rpx;
height: 162rpx;
border-radius: 50%;
position: absolute;
left: 50%;
bottom: 340rpx;
z-index: 2;
margin-left: -65rpx;
} }
.qrcode { .qrcode {
width: 200rpx; width: 200rpx;
height: 200rpx; height: 80rpx;
position: absolute; position: absolute;
right: 25rpx; left: 85px;
top: 670rpx; bottom: 125rpx;
border: 8rpx solid #FFFFFF;
z-index: 2; z-index: 2;
border-radius: 5rpx; font-size: 45rpx;
color: #cf100d;
text-align: center;
} }
.tips { .tips {
width: 672rpx; width: 100%;
height: 80rpx; height: 80rpx;
position: absolute; position: absolute;
text-align: center; text-align: center;
font-size: 30rpx; font-size: 30rpx;
line-height: 80rpx; line-height: 80rpx;
color: #212121; color: #212121;
left: 50%; left: 0;
margin-left: -336rpx; bottom: 0;
bottom: -120rpx;
z-index: 2; z-index: 2;
display: flex; display: flex;
align-items: center; align-items: center;

70
pages/user/index.vue
Unescape View File

@ -546,8 +546,11 @@
<image :src="$picUrl+'/static/toTop.png?=1'"></image> <image :src="$picUrl+'/static/toTop.png?=1'"></image>
</view> </view>
<view class="memberCode" v-if="memberCode" @click="memberCode=false"> <view class="memberCode" v-if="memberCode" @click="memberCode=false">
<view class="codeMain"> <view class="codeMain1" v-if="lookMemberType == 2">
<view class="myCode"> <image class="bg" :show-menu-by-longpress="true" src="https://www.royaum.com.cn/static/1@2x.png"></image>
<image class="code" :show-menu-by-longpress="true" :src="qrcode"></image>
<view class="btn" @click.stop="goMember('hy')"></view>
<!-- <view class="myCode">
<text v-if="lookMemberType == 2">我的专属会员识别码</text> <text v-if="lookMemberType == 2">我的专属会员识别码</text>
<text v-if="lookMemberType == 3">我的专属分销识别码</text> <text v-if="lookMemberType == 3">我的专属分销识别码</text>
</view> </view>
@ -557,7 +560,12 @@
</view> </view>
<view class="codeName"> <view class="codeName">
{{userInfo.user_id}} {{userInfo.user_id}}
</view> </view> -->
</view>
<view class="codeMain2" v-if="lookMemberType == 3">
<image class="bg" :show-menu-by-longpress="true" src="https://www.royaum.com.cn/static/2@2x.png"></image>
<image class="code" :show-menu-by-longpress="true" :src="qrcode"></image>
<view class="btn" @click.stop="goMember('fx')"></view>
</view> </view>
</view> </view>
</view> </view>
@ -2089,7 +2097,61 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.codeMain1{
width: 702rpx;
height: 702rpx;
position: relative;
.bg{
width: 100%;
height: 100%;
}
.code{
width: 170rpx;
height: 170rpx;
border-radius: 50%;
position: absolute;
right: 70rpx;
bottom: 55rpx;
z-index: 2;
}
.btn{
width: 220rpx;
height: 50rpx;
position: absolute;
left: 50%;
top: 172rpx;
margin-left: -110rpx;
z-index: 3;
}
}
.codeMain2{
width: 702rpx;
height: 889rpx;
position: relative;
.bg{
width: 100%;
height: 100%;
}
.code{
width: 150rpx;
height: 150rpx;
border-radius: 50%;
position: absolute;
left: 50%;
bottom: 105rpx;
margin-left: -75rpx;
z-index: 2;
}
.btn{
width: 400rpx;
height: 50rpx;
position: absolute;
left: 50%;
bottom: 10rpx;
margin-left: -200rpx;
z-index: 3;
}
}
.codeMain { .codeMain {
width: 560rpx; width: 560rpx;
height: 714rpx; height: 714rpx;

Write Preview
Loading…
Cancel
Save