131 lines
2.5 KiB
Vue
131 lines
2.5 KiB
Vue
<template>
|
|
<view class="page-wrapper">
|
|
<view class="content">
|
|
<view class="title">消息订阅码</view>
|
|
<view ref="qrcode" class="qrcode">
|
|
<image :src="vdata.QrcodeUrl" style="width: 100%;height: 100%;" mode="scaleToFill" />
|
|
</view>
|
|
<view class="bom">
|
|
<view @click="saveImage">保存订阅码</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, onMounted } from 'vue';
|
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
|
import infoBox from '@/commons/utils/infoBox.js'
|
|
import qrCode from '@/commons/utils/qrCode.js'
|
|
import { getSubQrCode } from '@/http/yskApi/pageNotification.js'
|
|
import { saveHeadImgFile } from '@/commons/utils/saveImg.js'
|
|
const vdata = reactive({
|
|
size: 20,
|
|
QrcodeUrl: "",
|
|
|
|
});
|
|
|
|
onLoad((options) => {
|
|
|
|
})
|
|
|
|
|
|
onShow(() => {
|
|
getSubQrCode().then((res) => {
|
|
vdata.QrcodeUrl = res;
|
|
})
|
|
})
|
|
|
|
|
|
const saveImage = () => {
|
|
uni.downloadFile({
|
|
url: vdata.QrcodeUrl,
|
|
success: (res) => {
|
|
console.log(res)
|
|
if (res.statusCode == 200) {
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: res.tempFilePath,
|
|
success: (r) => {
|
|
infoBox.showSuccessToast('保存成功')
|
|
uni.vibrateShort()
|
|
},
|
|
fail: (er) => {
|
|
console.log(er)
|
|
infoBox.showErrorToast('保存失败')
|
|
}
|
|
})
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
console.log(err)
|
|
infoBox.showErrorToast('保存失败')
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.page-wrapper {
|
|
min-height: calc(100vh - 90rpx);
|
|
padding: 48rpx 52rpx;
|
|
box-sizing: border-box;
|
|
|
|
.content{
|
|
width: 100%;
|
|
background-color: #fff;
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 64rpx 0;
|
|
box-sizing: border-box;
|
|
.title{
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: #333333;
|
|
}
|
|
.qrcode{
|
|
width: 416rpx;
|
|
height: 416rpx;
|
|
margin-top: 50rpx;
|
|
border: 2rpx solid #333;
|
|
padding: 15rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
::v-deep .u-qrcode,::v-deep .u-qrcode__content,::v-deep .u-qrcode__canvas{
|
|
width: 100%!important;
|
|
height: 100%!important;
|
|
|
|
}
|
|
.bom{
|
|
display: flex;
|
|
margin-top: 110rpx;
|
|
view{
|
|
width: 218rpx;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #318AFE;
|
|
border-radius: 8rpx;
|
|
}
|
|
view:nth-child(1){
|
|
color: #318AFE;
|
|
border: 2rpx solid #318AFE;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|