Browse Source

feat: 修改弹窗

ljc 2 weeks ago
parent
commit
17870536f7

+ 56 - 0
components/cwg-global-popup.vue

@@ -0,0 +1,56 @@
+<template>
+  <cwg-popup v-model:visible="popupState.visible" type="center" :mask-click="false" :show-footers="true" width="400px">
+    <view class="popup-content">
+      <view class="confirm-title">{{ popupState.title }}</view>
+      <view class="confirm-content">{{ popupState.content }}</view>
+    </view>
+    <template #footer>
+      <button v-if="popupState.showCancel" @click="close">{{ popupState.cancelText }}</button>
+      <button class="btn btn-secondary btn-shadow waves-effect" @click="handleConfirm">{{ popupState.confirmText }}</button>
+    </template>
+  </cwg-popup>
+</template>
+
+<script setup>
+import { watch, ref } from 'vue'
+import { usePopup } from '@/hooks/usePopup'
+
+const { popupState, close, handleConfirm } = usePopup()
+
+const popupRef = ref(null)
+
+watch(() => popupState.value.visible, (val) => {
+    if (val) {
+        popupRef.value?.open()
+    } else {
+        popupRef.value?.close()
+    }
+}, { immediate: true })
+</script>
+
+<style scoped lang="scss">
+  @import "@/uni.scss";
+
+  :deep(.cwg-dialog) {
+    width: px2rpx(500);
+    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
+    border-radius: px2rpx(16);
+    text-align: center;
+    box-shadow: 0 px2rpx(10) px2rpx(20) rgba(0, 0, 0, 0.1);
+  }
+
+  .confirm-title {
+    font-size: px2rpx(24);
+    font-weight: 600;
+    color: var(--bs-heading-color);
+    margin-bottom: px2rpx(30);
+  }
+
+  .confirm-content {
+    font-size: px2rpx(20);
+    color: var(--bs-heading-color);
+    margin-bottom: px2rpx(30);
+    line-height: 1.5;
+    word-break: break-word;
+  }
+</style>

+ 19 - 7
components/cwg-system.vue

@@ -7,6 +7,7 @@
       </view>
     </cwg-dropdown>
   </view>
+  <cwg-global-popup/>
 </template>
 
 <script setup lang="ts">
@@ -15,6 +16,9 @@ import { useI18n } from 'vue-i18n'
 import Config from '@/config/index'
 import { customApi } from '@/service/custom'
 import { userToken } from "@/composables/config";
+import { usePopup } from '@/hooks/usePopup'
+
+const { confirm } = usePopup()
 
 const props = defineProps({
   iconColor: {
@@ -127,20 +131,28 @@ function getSystemDisplayName(item: SystemItem) {
   return item.sysName || item.sysNameEn || item.sysCode
 }
 
-function switchSystem(item: SystemItem) {
+async function switchSystem(item: SystemItem) {
   if (!item || !item.sysCode) return
   if (item.sysCode === currentSystemCode.value) return
-
-  uni.showModal({
+  const result = await confirm({
     title: '系统提示',
     content: '是否切换系统?',
     confirmText: '确认',
     cancelText: '取消',
-    success: async (res) => {
-      if (!res.confirm) return
-      await confirmSwitchSystem(item)
-    },
   })
+  if (result){
+    await confirmSwitchSystem(item)
+  }
+  // uni.showModal({
+  //   title: '系统提示',
+  //   content: '是否切换系统?',
+  //   confirmText: '确认',
+  //   cancelText: '取消',
+  //   success: async (res) => {
+  //     if (!res.confirm) return
+  //
+  //   },
+  // })
 }
 
 async function confirmSwitchSystem(item: SystemItem) {

+ 77 - 0
hooks/usePopup.ts

@@ -0,0 +1,77 @@
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+interface PopupOptions {
+  title?: string
+  content?: string
+  cancelText?: string
+  confirmText?: string
+  width?: number
+  showCancel?: boolean
+  // confirmBtnType?: 'primary' | 'danger'
+}
+
+interface PopupState {
+  visible: boolean
+  title: string
+  content: string
+  cancelText: string
+  confirmText: string
+  showCancel: boolean
+  // confirmBtnType: 'primary' | 'danger'
+  resolve: ((value: boolean) => void) | null
+}
+
+const popupState = ref<PopupState>({
+  visible: false,
+  title: '',
+  content: '',
+  cancelText: '',
+  confirmText: '',
+  showCancel: true,
+  // confirmBtnType: 'primary',
+  resolve: null
+})
+
+export function usePopup() {
+  const { t } = useI18n()
+
+  const confirm = (options: PopupOptions = {}): Promise<boolean> => {
+    return new Promise((resolve) => {
+      console.log(options,'dia')
+      popupState.value = {
+        visible: true,
+        title: options.title || t('Msg.SystemPrompt'),
+        content: options.content || '',
+        showCancel: options.showCancel != undefined ? options.showCancel: true,
+        cancelText: options.cancelText || t('Btn.Cancel'),
+        confirmText: options.confirmText || t('Btn.Confirm'),
+        // confirmBtnType: options.confirmBtnType || 'primary',
+        resolve
+      }
+    })
+  }
+
+  const close = () => {
+    if (popupState.value.resolve) {
+      popupState.value.resolve(false)
+      popupState.value.resolve = null
+    }
+    popupState.value.visible = false
+  }
+
+  const handleConfirm = () => {
+    if (popupState.value.resolve) {
+      popupState.value.resolve(true)
+      popupState.value.resolve = null
+    }
+    popupState.value.visible = false
+  }
+
+  return {
+    popupState,
+    confirm,
+    close,
+    handleConfirm
+  }
+}

+ 1 - 1
pages/customer/transfer.vue

@@ -461,7 +461,7 @@ const showCentAccountTransferTip = (login) => {
 onMounted(() => {
     getDateList()
     getAmount()
-    getTransferSystemDropdown()
+    // getTransferSystemDropdown()
 })
 const resetForm = async () => {
     await nextTick();

+ 1 - 1
pages/follow/trading-center.vue

@@ -385,7 +385,7 @@ const currentColumns = computed(() => [
   { prop: 'maxDdRate', label: t('TradingCenter.item7'), align: 'center', sortable: true },
   { prop: 'activity', label: t('TradingCenter.item8'), slot: 'activity', align: 'center', sortable: true },
   { prop: 'view', label: t('Documentary.tradingCenter.item23'), slot: 'view', align: 'center', width: 80 },
-  { prop: 'recommendReason', label: t('Documentary.tradingCenter.item142'), align: 'center', width: 100 },
+  // { prop: 'recommendReason', label: t('Documentary.tradingCenter.item142'), align: 'center', width: 100 },
   { prop: 'subscribe', label: t('Documentary.tradingCenter.item24'), slot: 'subscribe', align: 'center', width: 100 },
 ])
 const mobilePrimaryFields = computed(() => [

+ 1 - 1
pages/login/components/LoginHeaderGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="login-header-group">
-    <!-- #ifndef APP -->
+    <!-- #ifndef APP-PLUS -->
     <view class="header-item">
       <cwg-system :text-color="textColor" :icon-color="iconColor" event-source="login" />
     </view>

+ 21 - 10
pages/login/index.vue

@@ -53,9 +53,7 @@
           <cwg-match-media :max-width="991">
             <view class="mobile-header-bar">
               <!--          <view class="fixed"/>-->
-<!--          #ifndef APP-PLUS    -->
               <LoginHeaderGroup text-color="#fff" :icon-color="isDark ? '#fff' : '#97A1C0'" />
-              <!-- #endif -->
             </view>
           </cwg-match-media>
           <view class="account">
@@ -254,6 +252,7 @@
       <cwg-icon name="chat" color="#fff" />
     </view>
   </view>
+  <cwg-global-popup/>
 </template>
 <script setup>
 import { ref, watch, onMounted, computed } from 'vue'
@@ -280,9 +279,12 @@ import LoginHeaderGroup from './components/LoginHeaderGroup.vue'
 import LiveChatService from '@/utils/liveChat.js'
 import { useWindowWidth } from '@/composables/useWindowWidth'
 import { openLocalPdf } from '@/utils/pdf.js'
+import { usePopup } from '@/hooks/usePopup'
+
 const windowWidth = useWindowWidth(300)
 const isMobile = computed(() => windowWidth.value <= 991)
 const router = useRouter()
+
 const { t } = useI18n()
 const { Code } = Config
 const userStore = useUserStore()
@@ -293,6 +295,8 @@ const tabs = computed(() => [
   { text: t('signin.tabs1'), value: 1, },
   { text: t('signin.tabs2'), value: 2, },
 ])
+
+const { confirm } = usePopup()
 const activeTab = ref(1)
 
 // ========== 注册表单相关 ==========
@@ -431,15 +435,11 @@ const isAgeValid = computed(() => {
 
 const checkAge = () => {
   if (formData.value.birthDate && !isAgeValid.value) {
-    uni.showModal({
+    confirm({
       title: t('Msg.SystemPrompt'),
       content: t('signup.ageRestriction'),
       showCancel: false,
       confirmText: t('Btn.Confirm'),
-      success: function (res) {
-        if (res.confirm) {
-        }
-      },
     })
   }
 }
@@ -608,15 +608,26 @@ const register = async () => {
       { headers: { 'X-System': xSystemValue } },
     )
     if (resData.code == 200) {
-      showToast(t('Msg.registerSuc'))
+      showToast(t('Msg.registerSuc'),'success')
       registLogin()
     } else {
-      showToast(resData.msg)
+      confirm({
+        title: t('Msg.SystemPrompt'),
+        content: resData.msg,
+        showCancel: false,
+        confirmText: t('Btn.Confirm'),
+      })
+      // showToast(resData.msg,'error')
     }
 
   }).catch(err => {
     console.log('表单错误信息:', err)
-    showToast(err.msg)
+    confirm({
+      title: t('Msg.SystemPrompt'),
+      content: err.msg,
+      showCancel: false,
+      confirmText: t('Btn.Confirm'),
+    })
     return false
   })
 }