调整分享码，修复修改资料提示字段判断错误
This commit is contained in:
唐明明
250
pages/user/salesmanCode.vue
Normal file
250
pages/user/salesmanCode.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<view class="code" :style="'background-image: url(' + require('@/static/code/back.png') + ')'">
|
||||
<image class="code-back code-logo" src="@/static/code/logo.png" mode="widthFix"></image>
|
||||
<image class="code-back code-heder" src="@/static/code/header.png" mode="widthFix"></image>
|
||||
<view class="block">
|
||||
<view class="qrcode" :style="'background-image: url(' + require('@/static/code/code.png') + ')'">
|
||||
<view class="qrcode-column">
|
||||
<l-painter class="qrcode-src">
|
||||
<l-painter-qrcode
|
||||
:text="'https://app.douhuofalv.com/app?invite_code=' + invite"
|
||||
css="width: 250rpx; height: 250rpx;"
|
||||
/>
|
||||
</l-painter>
|
||||
<view class="qrcode-text" @click="copyInvite">邀请码{{invite}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<image class="btn" src="@/static/code/btn.png" mode="widthFix" @click="onWx"></image>
|
||||
</view>
|
||||
<!-- 绘制二维码 -->
|
||||
<l-painter ref="painter" class="code-canvas" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
code
|
||||
} from '@/apis/interfaces/user.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
invite : '',
|
||||
codeLay: false,
|
||||
codeImg: ''
|
||||
};
|
||||
},
|
||||
created() {
|
||||
code().then(res => {
|
||||
let {
|
||||
invite
|
||||
} = res;
|
||||
this.invite = invite
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
copyInvite() {
|
||||
uni.setClipboardData({
|
||||
data: this.invite,
|
||||
success() {
|
||||
uni.showToast({
|
||||
title: '邀请码已复制',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
onWx() {
|
||||
uni.showLoading({
|
||||
title: '保存二维码...',
|
||||
mask : true
|
||||
})
|
||||
if(this.codeImg != ''){
|
||||
this.onDowCode()
|
||||
return
|
||||
}
|
||||
this.$refs.painter.render({
|
||||
css: {
|
||||
width: "600rpx",
|
||||
height: "1300rpx",
|
||||
background: "#1F25AE",
|
||||
position: "relative"
|
||||
},
|
||||
views: [
|
||||
{
|
||||
type: "image",
|
||||
src: require('@/static/code/back.png'),
|
||||
css: {
|
||||
width: "600rpx",
|
||||
height: "1300rpx",
|
||||
}
|
||||
},{
|
||||
type: "image",
|
||||
src: require('@/static/code/logo.png'),
|
||||
css: {
|
||||
width: "200rpx",
|
||||
height: "55rpx",
|
||||
position: "absolute",
|
||||
top: "80rpx",
|
||||
left: "50rpx",
|
||||
zIndex: 1
|
||||
}
|
||||
},{
|
||||
type: "image",
|
||||
src: require('@/static/code/header.png'),
|
||||
css: {
|
||||
width: "400rpx",
|
||||
height: "160rpx",
|
||||
position: "absolute",
|
||||
top: "200rpx",
|
||||
left: "100rpx",
|
||||
zIndex: 1
|
||||
}
|
||||
},{
|
||||
type: "image",
|
||||
src: require('@/static/code/code.png'),
|
||||
css: {
|
||||
width: "360rpx",
|
||||
height: "325rpx",
|
||||
position: "absolute",
|
||||
top: "440rpx",
|
||||
left: "120rpx",
|
||||
zIndex: 1
|
||||
}
|
||||
}, {
|
||||
type: "view",
|
||||
css: {
|
||||
height: '325rpx',
|
||||
width: '360rpx',
|
||||
position: "absolute",
|
||||
top: "440rpx",
|
||||
left: "120rpx",
|
||||
},
|
||||
views: [
|
||||
{
|
||||
text: "https://app.douhuofalv.com/app?invite_code=" + this.invite,
|
||||
type: "qrcode",
|
||||
css: {
|
||||
width: "220rpx",
|
||||
height: "220rpx",
|
||||
background: "#FFF",
|
||||
marginLeft: "70rpx",
|
||||
marginTop: "40rpx"
|
||||
},
|
||||
},{
|
||||
type: "text",
|
||||
text: "邀请码" + this.invite,
|
||||
css: {
|
||||
width: "300rpx",
|
||||
marginLeft: "30rpx",
|
||||
marginTop: "10rpx",
|
||||
lineClamp: "1",
|
||||
lineHeight: "40rpx",
|
||||
textAlign: "center",
|
||||
color: "gray",
|
||||
fontSize: "28rpx"
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
this.$refs.painter.canvasToTempFilePathSync({
|
||||
fileType: "jpg",
|
||||
quality: 1,
|
||||
success: (res) => {
|
||||
this.codeLay = true;
|
||||
this.codeImg = res.tempFilePath
|
||||
this.onDowCode()
|
||||
}
|
||||
});
|
||||
},
|
||||
onDowCode(){
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: this.codeImg,
|
||||
success: ()=> {
|
||||
uni.showToast({
|
||||
title: '二维码已保存到您的相册',
|
||||
icon : 'none'
|
||||
})
|
||||
},
|
||||
fail: err => {
|
||||
uni.showToast({
|
||||
title: '保存失败，请检查您的App[访问您的系统相册]系统权限',
|
||||
icon : 'none'
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.code-canvas{
|
||||
position: absolute;
|
||||
left: -100%;
|
||||
top: -100%;
|
||||
}
|
||||
// 二维码
|
||||
.code {
|
||||
background: #1F25AE;
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
background-position: center bottom;
|
||||
background-size: cover;
|
||||
padding: 50rpx;
|
||||
box-sizing: border-box;
|
||||
.code-back{
|
||||
&.code-logo{
|
||||
width: 240rpx;
|
||||
}
|
||||
&.code-heder{
|
||||
width: 90%;
|
||||
margin: 40rpx 5%;
|
||||
}
|
||||
}
|
||||
.block{
|
||||
text-align: center;
|
||||
.qrcode{
|
||||
display: inline-block;
|
||||
width: 70%;
|
||||
padding-top: 63%;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
margin-bottom: 30rpx;
|
||||
.qrcode-column{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.qrcode-src{
|
||||
width: 250rpx;
|
||||
height: 250rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.qrcode-text{
|
||||
margin-top: 20rpx;
|
||||
line-height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user