Files
peiwan-uniapp/components/qrcode-modal/qrcode-modal.vue
2025-01-21 01:46:34 +08:00

121 lines
2.1 KiB
Vue

<template>
<su-popup
:show="modal.qrcode"
type="center"
backgroundColor="none"
round="0"
:showClose="false"
:isMaskClick="true"
@close="closeModal"
>
<view class="content">
<image class="img" :src="tradeConfig.qrcode" show-menu-by-longpress="true"></image>
<view class="tip">长按二维码 关注公众号</view>
<view class="desc">用于接收消息提醒</view>
<view class="close-btn" @click="getQrcode">点击验证</view>
</view>
</su-popup>
</template>
<script>
import sheep from '@/sheep';
import $store from '@/sheep/store';
import UserApi from '@/sheep/api/member/user';
export default {
components: {
},
data() {
return {
show: false,
};
},
computed: {
modal() {
return sheep.$store('modal');
},
tradeConfig() {
return sheep.$store('user').tradeConfig;
},
},
methods: {
open() {
this.show = true;
},
closeModal() {
$store('modal').$patch((state) => {
state.qrcode = false;
});
},
getQrcode() {
UserApi.getQrcode().then((res) => {
if (res.code === 0) {
if(res.data){
sheep.$helper.toast('验证通过');
this.closeModal();
}else{
sheep.$helper.toast('未关注公众号');
}
}
});
},
}
};
</script>
<style lang="scss" scoped>
.show {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
z-index: 999999;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
.content {
padding: 40rpx;
background-color: #fff;
border-radius: 10rpx;
.img {
width: 500rpx;
height: 500rpx;
}
.tip {
display: flex;
justify-content: center;
padding-top: 40rpx;
padding-bottom: 20rpx;
font-size: 28rpx;
color: #666666;
}
.desc{
display: flex;
justify-content: center;
font-size: 28rpx;
font-weight: bold;
}
.close-btn {
display: flex;
justify-content: center;
background-color: var(--ui-BG-Main);
border-radius: 40px;
margin-top: 40rpx;
padding: 20rpx;
font-size: 24rpx;
color: #fff;
}
}
</style>