104 lines
2.0 KiB
Vue
104 lines
2.0 KiB
Vue
<template>
|
|
<view class="components-qrCode-content">
|
|
<uni-popup ref="qrCodePopup" type="center" :is-mask-click="false" :mask-click="false">
|
|
<view class="qr-code-content">
|
|
<image class="image" :src="qr_code"></image>
|
|
<view class="close-qr-code" @click="qrCodeClose()">关闭</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {getQrCodeLink} from "@/api/api";
|
|
|
|
export default {
|
|
props: {
|
|
// 是否显示
|
|
isShow: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 小程序码生成信息
|
|
params: {
|
|
type: Object,
|
|
default() {
|
|
return {};
|
|
}
|
|
},
|
|
|
|
|
|
},
|
|
components: {},
|
|
data() {
|
|
return {
|
|
qr_code: '',
|
|
};
|
|
},
|
|
watch: {
|
|
isShow: {
|
|
handler(newValue) {
|
|
// console.log('状态变更',newValue)
|
|
if(newValue) this.getQrCodeInfo();
|
|
else this.$refs.qrCodePopup.close();
|
|
},
|
|
deep: true
|
|
},
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
// 获取二维码信息
|
|
getQrCodeInfo(){
|
|
let _this = this;
|
|
uni.showLoading({title: '处理中...', mask: true})
|
|
getQrCodeLink(_this.params).then(res => {
|
|
if (res.status == 200) {
|
|
_this.qr_code = res.data.qr_code || '';
|
|
_this.qrCodeShow();
|
|
}
|
|
}).catch(err => {
|
|
this.$util.Tips({title: err});
|
|
});
|
|
},
|
|
// 二维码弹框显示
|
|
qrCodeShow(){
|
|
this.$refs.qrCodePopup.open('center');
|
|
uni.hideLoading();
|
|
},
|
|
// 二维码弹框关闭
|
|
qrCodeClose(){
|
|
this.$emit('close');
|
|
},
|
|
|
|
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.components-qrCode-content{
|
|
// 二维码弹框
|
|
.qr-code-content{
|
|
width: 80vw;
|
|
.image{
|
|
width: 80vw;
|
|
height: 80vw;
|
|
}
|
|
.close-qr-code{
|
|
position: fixed;
|
|
top: 35rpx;
|
|
right: 70rpx;
|
|
color: #FFFFFF;
|
|
border: 2rpx solid #FFFFFF;
|
|
height: 40rpx;
|
|
line-height: 36rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|