<template>
|
<!-- 联系我们 -->
|
<!-- -->
|
<view class="contact-container">
|
<view class="container" @click="saveCode" v-if="!codeUrl">
|
<canvas type="2d" id="myQrcode" class="code"></canvas>
|
<view class="info">
|
<view class="desc">
|
<p>{{name||'-'}}的推广二维码</p>
|
<p style="font-size: 600;color: #000;">点击保存二维码</p>
|
</view>
|
</view>
|
</view>
|
<view v-if="codeUrl" @click="saveImg">
|
<image :src="codeUrl" class="code-img"></image>
|
<view class="info">
|
<view class="desc">
|
<p>{{name||'-'}}的推广二维码</p>
|
<p style="font-size: 600;color: #000;">点击保存二维码</p>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import drawQrcode from '@/plugins/weapp.qrcode.esm.js'
|
|
export default {
|
data() {
|
return {
|
name: '',
|
userId: '',
|
codeUrl: '',
|
canvas: undefined,
|
}
|
},
|
// onShareAppMessage() {
|
// let params = `id=${this.info.Id}`
|
// if (this.isGroup) {
|
// params += `&groupId=${this.groupId}`
|
// }
|
// if (this.memberId) {
|
// params += `&inviteId=${this.memberId}`
|
// }
|
// let path = `/pages/home/product/detail?${params}`
|
// return {
|
// title: this.info.Name,
|
// path: path
|
// }
|
// }
|
onLoad(options) {
|
if (!this.currentInfo.partnerDTO) {
|
this.$message.showToast('请先完善合伙人信息')
|
return
|
}
|
//有定制二维码，显示定制二维码
|
this.codeUrl = this.currentInfo.partnerDTO.codeUrl || ''
|
this.name = this.currentInfo.partnerDTO.name || '佚名'
|
// this.userId = this.currentInfo.userId
|
if (!this.codeUrl)
|
this.initcode()
|
},
|
methods: {
|
async saveImg() {
|
await this.$message.confirm('确定保存此文件吗')
|
let _this = this
|
_this.$message.showLoading()
|
|
uni.downloadFile({
|
url: _this.codeUrl, //下载地址接口返回
|
success: (data) => {
|
_this.$message.hideLoading()
|
console.log('success', data)
|
if (data.statusCode === 200) {
|
//文件保存到本地
|
uni.saveImageToPhotosAlbum({
|
filePath: data.tempFilePath,
|
success: function() {
|
console.log('save success');
|
uni.showToast({
|
title: '保存成功'
|
})
|
},
|
fail(res) {
|
console.error(res)
|
uni.showToast({
|
title: '保存失败。',
|
icon: 'error'
|
})
|
}
|
})
|
|
}else{
|
uni.showToast({
|
title: '保存失败。.',
|
icon: 'error'
|
})
|
}
|
},
|
fail: (err) => {
|
_this.$message.hideLoading()
|
|
console.log(err);
|
uni.showToast({
|
icon: 'none',
|
mask: true,
|
title: '失败请重新下载',
|
});
|
},
|
});
|
},
|
initcode() {
|
let that = this
|
const query = uni.createSelectorQuery()
|
var qrUrl =
|
`https://scan.hmyxianhua.com/wx/?partnerUserId=${this.currentInfo.id||'-'}&partnerUserName=${this.name||'-'}`
|
query.select('#myQrcode')
|
.fields({
|
node: true,
|
size: true
|
})
|
.exec((res) => {
|
var canvas = res[0].node
|
that.canvas = canvas
|
// 调用方法drawQrcode生成二维码
|
drawQrcode({
|
callback: function(e) {
|
console.log('drawQrcode callback', e)
|
},
|
canvas: canvas,
|
canvasId: 'myQrcode',
|
width: 480,
|
height: 480,
|
padding: 30,
|
background: '#ffffff',
|
foreground: '#000000',
|
// text: JSON.stringify({
|
// 'name': that.name,
|
// 'userId': that.currentInfo.id,
|
// 'version': '1.1.0'
|
// }),
|
text: qrUrl
|
// text: `https://www.hmyxianhua.com/wx-c-jump/sub_pages/customer/customer-info/customer-info?name=${that.name}&userId=${that.currentInfo.id}`
|
// JSON.stringify({
|
// 'name': that.name,
|
// 'userId': this.currentIn fo.id
|
// }),
|
})
|
// .catch(e) {
|
// console.log('drawQrcode', e)
|
// }
|
})
|
},
|
saveCode() {
|
|
// 获取临时路径（得到之后，想干嘛就干嘛了）
|
uni.canvasToTempFilePath({
|
canvasId: 'myQrcode',
|
canvas: this.canvas,
|
x: 0,
|
y: 0,
|
width: 480,
|
height: 480,
|
destWidth: 260,
|
destHeight: 260,
|
success(res) {
|
console.log('二维码临时路径：', res.tempFilePath)
|
uni.saveImageToPhotosAlbum({
|
filePath: res.tempFilePath,
|
success: function() {
|
console.log('save success');
|
uni.showToast({
|
title: '保存成功'
|
})
|
},
|
fail(res) {
|
// console.error(res)
|
uni.showToast({
|
title: '保存失败。',
|
icon: 'error'
|
})
|
}
|
})
|
},
|
fail(res) {
|
uni.showToast({
|
title: '保存失败',
|
icon: 'error'
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.contact-container {
|
position: relative;
|
|
.code-img {
|
width: 600rpx;
|
min-height: 600rpx;
|
display: inline-block;
|
margin: 0 auto;
|
margin-top: 100rpx;
|
}
|
|
.container {
|
position: absolute;
|
top: 148rpx;
|
// width: 694rpx;
|
left: 30rpx;
|
right: 30rpx;
|
min-height: 712rpx;
|
// background: #FFFFFF;
|
border-radius: 20rpx;
|
|
.code {
|
margin-left: auto;
|
margin-right: auto;
|
margin-top: 24rpx;
|
width: 482rpx;
|
height: 482rpx;
|
margin-bottom: 32rpx;
|
display: block;
|
}
|
|
.info {
|
text-align: center;
|
|
.desc {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #666666;
|
line-height: 40rpx;
|
font-style: normal;
|
margin-bottom: 126rpx;
|
|
p {
|
line-height: 48rpx;
|
}
|
}
|
|
.main {
|
font-weight: 600;
|
font-size: 48rpx;
|
color: #000000;
|
margin-top: 48rpx;
|
margin-bottom: 32rpx;
|
|
}
|
}
|
}
|
|
.top-image {
|
width: 418rpx;
|
height: 228rpx;
|
position: absolute;
|
top: 16rpx;
|
left: 50%;
|
transform: translateX(-50%);
|
|
}
|
}
|
</style>
|
