update

src/components/BindMsgModal.vue

@@ -0,0 +1,50 @@
+<script setup>
+import {onMounted} from "vue";
+import XModal from "./XModal.vue";
+import XQrCode from "./XQrCode.vue";
+
+const show = defineModel('show');
+
+onMounted(() => {
+
+});
+</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">
+                <x-qr-code size="320rpx" :qrSize="180" content="公众号"></x-qr-code>
+            </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>

src/components/XConfirmModal.vue

@@ -0,0 +1,89 @@
+<script setup>
+import XModal from "./XModal.vue";
+
+const emits = defineEmits(['success']);
+const {title, info, cancel, confirmText} = defineProps({
+    title: {
+        type: String,
+        default: '确认删除吗'
+    },
+    info: {
+        type: String,
+        default: '删除后不可恢复'
+    },
+    confirmText: {
+        type: String,
+        default: '确定'
+    },
+    cancel: {
+        type: Boolean,
+        default: true,
+    }
+});
+const show = defineModel('show');
+
+const success = () => {
+    emits('success');
+    show.value = false;
+}
+</script>
+
+<template>
+    <view @click="show=true">
+        <slot></slot>
+    </view>
+
+    <x-modal v-model:show="show" v-bind="$attrs">
+        <view class="py-[40rpx] px-[32rpx] !flex justify-center flex-col items-center gap-[20rpx]">
+            <template v-if="!$slots.context">
+                <view class="title">{{ title }}</view>
+                <view class="info">{{ info }}</view>
+            </template>
+            <slot name="context" v-else></slot>
+        </view>
+
+        <view class="!flex">
+            <view v-if="cancel" class="btn cancel" @click="show=false">取消</view>
+            <view class="btn confirm" @click="success">{{ confirmText }}</view>
+        </view>
+    </x-modal>
+</template>
+
+<style scoped lang="scss">
+.btn {
+    padding: 22rpx 0;
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: 300ms;
+
+    &:active {
+        background-color: rgba(0, 0, 0, .2);
+    }
+}
+
+.confirm {
+    color: #165DFF;
+    border-top: 1px solid #E5E6EA;
+}
+
+.cancel {
+    border-top: 1px solid #E5E6EA;
+    border-right: 1px solid #E5E6EA;
+}
+
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 16px;
+    font-weight: 500;
+    letter-spacing: 0;
+}
+
+.info {
+    color: rgb(78, 89, 105);
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 0;
+}
+</style>

src/components/XModal.vue

@@ -4,6 +4,7 @@ const show = defineModel('show');
 
 <template>
     <tui-modal
+        v-bind="$attrs"
         @cancel="show=false"
         padding="0"
         custom