Dialog

src/components/dialog/Dialog.vue

@@ -0,0 +1,125 @@
+<template>
+  <transition enter-active-class="fadeIn" leave-active-class="fadeOut">
+    <div
+      v-if="visible"
+      class="ptc-dialog-wrap"
+      @touchmove.prevent
+      @wheel.prevent
+    >
+      <div class="ptc-dialog">
+        <div v-if="title" class="ptc-dialog__title">{{ title }}</div>
+        <div class="ptc-dialog__content">
+          <slot>{{ content }}</slot>
+        </div>
+        <div class="ptc-dialog__footer">
+          <button
+            v-if="showCancel"
+            class="ptc-dialog__cancel"
+            @click="onCancel"
+          >
+            {{ cancelText }}
+          </button>
+          <button class="ptc-dialog__confirm" @click="onConfirm">
+            {{ confirmText }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    visible: boolean
+    title?: string
+    content?: string
+    showCancel?: boolean
+    cancelText?: string
+    confirmText?: string
+  }>(),
+  {
+    showCancel: false,
+    cancelText: 'CANCEL',
+    confirmText: 'OK',
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'update:visible', val: boolean): void
+  (e: 'cancel'): void
+  (e: 'confirm'): void
+}>()
+
+function onCancel() {
+  emit('cancel')
+  emit('update:visible', false)
+}
+
+function onConfirm() {
+  emit('confirm')
+  emit('update:visible', false)
+}
+</script>
+
+<style lang="scss">
+.ptc-dialog {
+  &-wrap {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 2000;
+  }
+
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 630px;
+  background: #fff;
+  border-radius: 8px;
+  text-align: center;
+
+  &__title {
+    padding: 48px 24px 0;
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 44px;
+    color: rgba(0, 0, 0, 0.85);
+  }
+
+  &__content {
+    padding-top: 48px;
+    white-space: pre-wrap;
+    font-size: 32px;
+    line-height: 44px;
+    color: rgba(0, 0, 0, 0.85);
+  }
+
+  &__footer {
+    display: flex;
+    box-sizing: content-box;
+    margin-top: 46px;
+    height: 138px;
+    border-top: 1px solid #d9d9d9;
+  }
+  &__cancel,
+  &__confirm {
+    flex: 1;
+    font-size: 32px;
+    &:active {
+      background: rgba(0, 0, 0, 0.05);
+    }
+  }
+  &__cancel {
+    color: #bebebe;
+  }
+  &__confirm {
+    font-weight: 600;
+    color: $primary-color;
+  }
+}
+</style>

src/components/dialog/index.ts

@@ -0,0 +1,70 @@
+import { reactive, h } from 'vue'
+import PtcDialog from './Dialog.vue'
+import { mountComponent } from '../utils/mount-component'
+
+interface DialogProps {
+  visible: boolean
+  title?: string
+  content?: string
+  showCancel?: boolean
+  cancelText?: string
+  confirmText?: string
+}
+
+type DialogOptions = Omit<DialogProps, 'visible'> & {
+  onCancel?(): void
+  onConfirm?(): void
+}
+
+interface DialogExposed {
+  open(options: DialogOptions): void
+}
+
+const defaultOptions: Partial<DialogOptions> = {
+  showCancel: false,
+  cancelText: 'CANCEL',
+  confirmText: 'OK',
+}
+
+let instance: DialogExposed | undefined
+
+function getInstance() {
+  if (!instance) {
+    instance = mountComponent<DialogExposed>({
+      setup(props, { expose }) {
+        const state = reactive<DialogProps>({ visible: false })
+        const attrs = {
+          'onUpdate:visible': (v: boolean) => {
+            state.visible = v
+          },
+        }
+        const open = (options: DialogOptions) => {
+          state.visible = true
+          Object.assign(state, { ...defaultOptions, ...options })
+        }
+        expose({ open })
+
+        return () => h(PtcDialog, { ...state, ...attrs })
+      },
+    }).instance
+  }
+  return instance
+}
+
+export default function Dialog(options: DialogOptions) {
+  return new Promise((resolve, reject) => {
+    getInstance().open({
+      ...options,
+      onCancel: reject,
+      onConfirm: () => resolve('ok'),
+    })
+  })
+}
+
+Dialog.alert = (title: string, content: string, options?: DialogOptions) =>
+  Dialog({ title, content, ...options })
+Dialog.confirm = (title: string, content: string, options?: DialogOptions) =>
+  Dialog({ title, content, showCancel: true, ...options })
+
+const win: any = window
+win.Dialog = Dialog

src/pages/account/index.vue

@@ -8,7 +8,7 @@
           <img class="qrcode" />
         </div>
       </div>
-      <div v-if="info.from === 1" class="ptc-block">
+      <div v-if="info.from == 1" class="ptc-block">
         <div class="ptc-inner">
           <div class="ptc-cell">
             <p class="ptc-label">Email</p>
@@ -32,9 +32,9 @@
               }}<i
                 class="account-icon"
                 :class="{
-                  'a-facebook': info.from === 2,
-                  'a-google': info.from === 3,
-                  'a-apple': info.from === 4,
+                  'a-facebook': info.from == 2,
+                  'a-google': info.from == 3,
+                  'a-apple': info.from == 4,
                 }"
               ></i>
             </p>