2025-04-15 14:08:32 +08:00
|
|
|
|
<script setup>
|
2025-05-27 20:03:47 +08:00
|
|
|
|
import {watch, ref} from "vue";
|
2025-04-15 14:08:32 +08:00
|
|
|
|
import XModal from "./XModal.vue";
|
2025-05-27 20:03:47 +08:00
|
|
|
|
import Api from "../api/index.js";
|
2025-04-15 14:08:32 +08:00
|
|
|
|
|
|
|
|
|
|
const show = defineModel('show');
|
2025-05-27 20:03:47 +08:00
|
|
|
|
const qrCode = ref(null);
|
|
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
|
() => show.value,
|
|
|
|
|
|
(val) => {
|
|
|
|
|
|
if (val) Api.system.createQrcode().then(({data}) => {
|
|
|
|
|
|
qrCode.value = data.url;
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
)
|
2025-04-15 14:08:32 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
<view @click="show=true">
|
|
|
|
|
|
<slot></slot>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<x-modal
|
|
|
|
|
|
v-model:show="show">
|
|
|
|
|
|
<view class="px-[30rpx] py-[40rpx] relative">
|
|
|
|
|
|
<image @click="show=false" class="!w-[52rpx] !h-[52rpx] absolute top-[-110rpx] right-[calc(-100%-10rpx)]"
|
|
|
|
|
|
src="/static/icons/close.png"></image>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="title">绑定</view>
|
|
|
|
|
|
<view class="!mt-[24rpx] w-[320rpx] !mx-auto aspect-square">
|
2025-05-27 20:03:47 +08:00
|
|
|
|
<image v-if="qrCode" class="!size-full" :src="qrCode"></image>
|
|
|
|
|
|
<tui-loading v-else type="row"></tui-loading>
|
2025-04-15 14:08:32 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
<view class="desc !mt-[24rpx]">截图保存后，使用微信扫码并关注</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</x-modal>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
.title {
|
|
|
|
|
|
color: rgb(29, 33, 41);
|
|
|
|
|
|
font-size: 34rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
line-height: 48rpx;
|
|
|
|
|
|
letter-spacing: 0;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.desc {
|
|
|
|
|
|
color: rgb(78, 89, 105);
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
letter-spacing: 0;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
