gypsy-crm-frontend-vu/pages/customer/components/CheckPopup.vue

<template>
  <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :showFooters="true" :showClose="false" @close="close">
    <view class="popup-content">
      <view class="icon">
        <cwg-icon name="loading" :size="64" color="#1e2a3a" />
      </view>
      <view class="des1">{{ t('news_add_field.ApplicationDialog.Des31') }}</view>
      <view class="des2">
        <text>{{ t('news_add_field.ApplicationDialog.Des32') }}</text>
        <text>{{ t('news_add_field.ApplicationDialog.Des33') }}</text>
        <text class="crm-cursor" @click="toHistory">{{ t('news_add_field.ApplicationDialog.Des34') }}</text>
        <text>{{ t('news_add_field.ApplicationDialog.Des35') }}</text>
      </view>
      <view class="GoPay" v-if="goPayLink">
        <view class="GoPay-btn">
          <button type="primary" @click="GoPayBtn">{{ t('Label.item3') }}</button>
        </view>
        <view class="GoPay-con">{{ t('Label.item4') }}</view>
        <view class="GoPay-copy">
          <text class="link-text">{{ goPayLink }}</text>
          <view class="btn">
            <text class="crm-cursor" @click="CopyShareLink('custom_link')">{{ t('Ib.Index.Copy') }}</text>
          </view>
        </view>
      </view>
    </view>
    <template #footer>
      <button @click="close">{{ t('Btn.Cancel') }}</button>
      <button type="primary" @click="close">{{ t('Btn.Confirm') }}</button>
    </template>
  </cwg-popup>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { openExternalUrl } from '@/utils/openExternalUrl'

const props = defineProps({
  visible: { type: Boolean, default: false },
  success: { type: Boolean, default: true },
  errorMsg: { type: String, default: '' },
  goPayLink: { type: String, default: '' },
  isWaiting: { type: Boolean, default: false }
});
const emit = defineEmits(['update:visible', 'close', 'toHistory', 'goPay', 'copy']);

const { t } = useI18n();
const visible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
});
const close = () => {
  visible.value = false;
  emit('close');
};
//支付历史
const toHistory = () => {
  uni.navigateTo({ url: "/pages/customer/payment-history" })
}
// 去支付
const GoPayBtn = () => {
  openExternalUrl(props.goPayLink)
}
// 复制分享链接
const CopyShareLink = (link) => {
  uni.setClipboardData({
    data: props.goPayLink,
    success: function () {
      uni.showToast({
        title: t('Btn.item8'),
        icon: 'none',
        duration: 2000
      });
    }
  });
  emit('copy');
}
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.popup-content {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;

  .icon {
    margin-bottom: 24px;
    animation: pulse 1.5s ease-in-out infinite;
  }

  .des1 {
    font-size: 20px;
    font-weight: bold;
    color: var(--bs-emphasis-color);
    margin: 0 0 20px 0;
    line-height: 1.4;
  }

  .des2 {
    font-size: 14px;
    color: #606266;
    margin-bottom: 24px;
    line-height: 1.6;
    text-align: left;

    text {
      display: inline-block;
      margin-right: 4px;
    }

    .crm-cursor {
      color: #409eff;
      text-decoration: underline;
      transition: color 0.3s;
      cursor: pointer;

      &:hover {
        color: #66b1ff;
      }
    }
  }

  .GoPay {
    margin-top: 24px;
    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
    border-radius: 8px;
    padding: 20px;
    text-align: left;

    .GoPay-btn {
      margin-bottom: 16px;

      button {
        width: 100%;
        height: 44px;
        line-height: 44px;
        border-radius: 6px;
        font-size: 16px;
      }
    }

    .GoPay-con {
      font-size: 14px;
      color: #606266;
      margin-bottom: 16px;
      line-height: 1.5;
    }

    .GoPay-copy {
      display: flex;
      align-items: center;
      gap: 12px;
      background-color: #ffffff;
      border: 1px solid #e4e7ed;
      border-radius: 6px;
      padding: 12px;

      .link-text {
        flex: 1;
        font-size: 14px;
        color: #303133;
        word-break: break-all;
        line-height: 1.4;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .btn {
        min-width: 80px;
        text-align: right;

        .crm-cursor {
          display: inline-block;
          padding: 6px 12px;
          background-color: #f0f9eb;
          color: #67c23a;
          border-radius: 4px;
          font-size: 14px;
          transition: all 0.3s;
          cursor: pointer;

          &:hover {
            background-color: #e6f7ff;
            color: #409eff;
          }
        }
      }
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .popup-content {
    padding: 20px 16px;

    .des1 {
      font-size: 18px;
    }

    .des2 {
      font-size: 13px;
    }

    .GoPay {
      padding: 16px;

      .GoPay-btn button {
        height: 40px;
        font-size: 14px;
      }
    }
  }
}
</style>