update

src/components/SendMsg.vue

@@ -0,0 +1,18 @@
+<script setup>
+import XLink from "./XLink.vue";
+import XInput from "./XInput.vue";
+
+const modalValue = defineModel();
+</script>
+
+<template>
+    <x-input v-model:model-value="modalValue" placeholder="验证码">
+        <template #suffix>
+            <x-link>发送验证码</x-link>
+        </template>
+    </x-input>
+</template>
+
+<style scoped>
+
+</style>

src/components/WXOfficialAccount.vue

@@ -0,0 +1,47 @@
+<script setup>
+import {onMounted} from "vue";
+import XModal from "./XModal.vue";
+import XQrCode from "./XQrCode.vue";
+
+const show = defineModel('show');
+
+onMounted(() => {
+
+});
+</script>
+
+<template>
+    <x-modal
+        :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">
+                <x-qr-code size="320rpx" :qrSize="180" content="公众号"></x-qr-code>
+            </view>
+            <view class="desc">截图后扫码，变现快人一步</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 {
+    margin-top: 24rpx !important;
+    color: rgb(78, 89, 105);
+    font-size: 28rpx;
+    font-weight: 500;
+    line-height: 48rpx;
+    letter-spacing: 0;
+    text-align: center;
+}
+</style>

src/components/XModal.vue

@@ -0,0 +1,16 @@
+<script setup>
+const show = defineModel('show');
+</script>
+
+<template>
+    <tui-modal
+        padding="0"
+        custom
+        :show="show">
+        <slot></slot>
+    </tui-modal>
+</template>
+
+<style scoped>
+
+</style>

src/components/XNav.vue

@@ -1,19 +1,25 @@
 <script setup>
+import {ref} from 'vue';
 import {isWXWeb} from "../utils/uils.js";
 
-const {title} = defineProps({
-    title: {
-        type: String,
-        default: document.title || "页面",
+const {showBack} = defineProps({
+    showBack: {
+        type: Boolean,
+        default: true
     }
 });
+
+const title = ref(document.title);
 </script>
 
 <template>
     <template v-if="!isWXWeb()">
         <view class="!flex justify-center items-center h-[100rpx] bg-[#f9f9f9]">
-            <image class="!w-[9px] !h-[17px] cursor-pointer !absolute left-[50rpx]"
-                   src="/static/icons/back.png"></image>
+            <image
+                v-if="showBack"
+                class="!w-[9px] !h-[17px] cursor-pointer !absolute left-[50rpx]"
+                src="/static/icons/back.png">
+            </image>
 
             <view class="title">{{ title }}</view>
         </view>

src/components/XQrCode.vue

@@ -0,0 +1,50 @@
+<script setup>
+import {onMounted} from 'vue';
+import UQRCode from 'uqrcodejs';
+import {v4} from "uuid";
+
+const {size, content, qrSize} = defineProps({
+    size: {
+        type: String,
+        default: '160rpx'
+    },
+    qrSize: {
+        type: Number,
+        default: 80
+    },
+    content: {
+        type: String,
+        default: 'https://www.baidu.com'
+    },
+});
+
+const ID = v4();
+
+onMounted(() => {
+    const qr = new UQRCode();
+    qr.data = content;
+    qr.size = qrSize;
+    qr.make();
+    const canvasContext = uni.createCanvasContext(ID, this);
+    qr.canvasContext = canvasContext;
+    qr.drawCanvas();
+});
+</script>
+
+<template>
+    <view id="QRCode">
+        <canvas
+            :id="ID"
+            type="2d"
+            :canvasId="ID"
+            className='!w-full !h-full'>
+        </canvas>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+#QRCode {
+    width: v-bind(size);
+    height: v-bind(size);
+}
+</style>