QSY-lvjuxcx/components/DepositOtherPaymentPopup.vue

<template>
  <tn-popup :value="value" mode="bottom" length="84%" :borderRadius="32" :closeBtn="true" @close="close" @input="handleInput">
    <view class="deposit-other-payment-popup">
      <view class="popup-header">
        <view class="popup-handle"></view>
        <view class="popup-title">{{ getLocalizedText('其他支付方式', 'Other Payment Methods') }}</view>
      </view>

      <scroll-view scroll-y class="popup-body" :show-scrollbar="false">
        <view class="popup-content">
          <view v-if="hasConfiguredContent" class="hero-card">
            <view class="hero-badge">{{ getLocalizedText('线下支付说明', 'Alternative Payment') }}</view>
            <view class="hero-title">{{ getLocalizedText('定金支付备用方案', 'Deposit payment backup plan') }}</view>
            <view class="hero-desc">
              {{ getLocalizedText(
                '当线上支付渠道暂不可用时，可通过下方联系电话、二维码或转账说明继续完成定金支付。',
                'Use the configured contact, QR code, or transfer instructions below when the online payment channel is unavailable.'
              ) }}
            </view>
          </view>

          <view v-if="loading" class="loading-card">
            <view class="loading-chip">{{ getLocalizedText('正在同步其他支付配置，请稍候...', 'Syncing alternative payment details...') }}</view>
          </view>

          <template v-else>
            <view v-if="phone" class="contact-card">
              <view class="contact-main">
                <view class="contact-label">{{ getLocalizedText('联系电话', 'Contact Phone') }}</view>
                <view class="contact-value">{{ phone }}</view>
              </view>
              <view class="contact-action" @click="handleCallPhone">
                <text class="tn-text-bold">{{ getLocalizedText('拨打电话', 'Call') }}</text>
              </view>
            </view>

            <view v-if="qrCodeUrl" class="qr-card">
              <view class="section-title">{{ getLocalizedText('支付二维码', 'Payment QR Code') }}</view>
              <image class="qr-image" :src="qrCodeUrl" mode="widthFix" @click="previewQrCode"></image>
              <view class="qr-hint">
                {{ getLocalizedText('点击二维码图片可查看大图。', 'Tap the image to preview the code in full size.') }}
              </view>
            </view>

            <view v-if="richTextNodes" class="rich-text-card">
              <view class="section-title">{{ getLocalizedText('支付说明', 'Payment Instructions') }}</view>
              <rich-text class="rich-text-content" :nodes="richTextNodes"></rich-text>
            </view>

            <view v-if="!phone && !qrCodeUrl && !richTextNodes" class="empty-card">
              <view class="empty-title">{{ getLocalizedText('暂未配置展示内容', 'Configuration Pending') }}</view>
              <view class="empty-desc">
                {{ getLocalizedText(
                  '当前暂未同步到其他支付配置，请联系公寓工作人员处理。',
                  'Alternative payment details are not available yet. Please contact the property staff for manual payment assistance.'
                ) }}
              </view>
            </view>
          </template>
        </view>
      </scroll-view>

      <view class="popup-footer">
        <view class="notice-action-btn" @click="close">
          <text class="tn-text-bold">{{ getLocalizedText('我知道了', 'Got It') }}</text>
        </view>
      </view>
    </view>
  </tn-popup>
</template>

<script>
import { addFilePrefix } from '@/utils/common'
import { normalizeRichTextImages } from '@/utils/rich-text'

function escapeHtml(value = '') {
  return String(value)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
}

function normalizeContentToRichText(value = '') {
  const text = String(value || '').trim()
  if (!text) {
    return ''
  }
  if (/<[a-z][\s\S]*>/i.test(text)) {
    return normalizeRichTextImages(
      text,
      'display:block;width:100%;max-width:100%;height:auto;box-sizing:border-box;border-radius:20rpx;margin:18rpx 0;vertical-align:top;'
    )
  }
  return `<div style="white-space:pre-wrap;line-height:1.9;color:#334155;font-size:28rpx;">${escapeHtml(text)}</div>`
}

export default {
  name: 'DepositOtherPaymentPopup',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    config: {
      type: Object,
      default: () => ({})
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    language() {
      return this.$getLanguage()
    },
    phone() {
      return String((this.config && this.config.phone) || '').trim()
    },
    qrCodeUrl() {
      return addFilePrefix(String((this.config && this.config.qrCode) || '').trim())
    },
    localizedContent() {
      if (this.language === 'en') {
        return this.config.contentEn || this.config.contentZh || ''
      }
      return this.config.contentZh || this.config.contentEn || ''
    },
    hasConfiguredContent() {
      return !!(this.phone || this.qrCodeUrl || this.richTextNodes)
    },
    richTextNodes() {
      return normalizeContentToRichText(this.localizedContent)
    }
  },
  methods: {
    getLocalizedText(zh, en) {
      return this.language === 'en' ? en : zh
    },
    handleInput(value) {
      this.$emit('input', value)
      this.$emit('update:modelValue', value)
    },
    close() {
      this.handleInput(false)
    },
    handleCallPhone() {
      if (!this.phone) {
        uni.showToast({
          title: this.getLocalizedText('暂无联系电话', 'No contact phone available'),
          icon: 'none'
        })
        return
      }
      uni.makePhoneCall({
        phoneNumber: this.phone
      })
    },
    previewQrCode() {
      if (!this.qrCodeUrl) {
        return
      }
      uni.previewImage({
        urls: [this.qrCodeUrl]
      })
    }
  }
}
</script>

<style scoped>
.deposit-other-payment-popup {
  background: #ffffff;
  border-radius: 32rpx 32rpx 0 0;
  display: flex;
  flex-direction: column;
  height: 80vh;
}

.popup-header {
  padding: 18rpx 88rpx 20rpx;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 255, 0.96) 100%);
}

.popup-handle {
  width: 88rpx;
  height: 8rpx;
  margin: 0 auto 18rpx;
  border-radius: 999rpx;
  background: rgba(148, 163, 184, 0.35);
}

.popup-title {
  font-size: 34rpx;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1rpx;
  color: #1a2233;
}

.popup-body {
  flex: 1;
  height: 0;
  min-height: 0;
  padding: 28rpx 28rpx 24rpx;
  box-sizing: border-box;
  background: linear-gradient(180deg, #f7faff 0%, #f2f5fc 100%);
}

.popup-content {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding-bottom: 24rpx;
}

.hero-card {
  padding: 28rpx;
  border-radius: 32rpx;
  background:
    radial-gradient(circle at top right, rgba(43, 142, 255, 0.16) 0, rgba(43, 142, 255, 0) 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 255, 0.96) 100%);
  border: 1rpx solid rgba(43, 142, 255, 0.1);
  box-shadow: 0 24rpx 60rpx rgba(43, 142, 255, 0.1);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 10rpx 18rpx;
  border-radius: 999rpx;
  background: rgba(43, 142, 255, 0.1);
  color: #2b6fd6;
  font-size: 22rpx;
  font-weight: 700;
}

.hero-title {
  margin-top: 18rpx;
  font-size: 36rpx;
  line-height: 1.25;
  font-weight: 700;
  color: #183b73;
}

.hero-desc {
  margin-top: 12rpx;
  font-size: 25rpx;
  line-height: 1.7;
  color: #607089;
}

.loading-card,
.contact-card,
.qr-card,
.rich-text-card,
.empty-card {
  padding: 24rpx 28rpx;
  border-radius: 28rpx;
  background: rgba(255, 255, 255, 0.88);
  border: 1rpx solid rgba(43, 142, 255, 0.08);
  box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.85);
}

.loading-chip {
  display: inline-flex;
  padding: 12rpx 20rpx;
  border-radius: 999rpx;
  background: rgba(43, 142, 255, 0.08);
  color: #4c6a95;
  font-size: 24rpx;
}

.contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
}

.contact-main {
  flex: 1;
  min-width: 0;
}

.contact-label,
.section-title {
  font-size: 24rpx;
  color: #7c8ca5;
  font-weight: 600;
}

.contact-value {
  margin-top: 10rpx;
  font-size: 32rpx;
  line-height: 1.4;
  font-weight: 700;
  color: #22324d;
  word-break: break-all;
}

.contact-action {
  padding: 0 28rpx;
  height: 76rpx;
  border-radius: 999rpx;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2b8eff 0%, #1f6fe5 100%);
  color: #ffffff;
  box-shadow: 0 14rpx 28rpx rgba(43, 142, 255, 0.18);
  flex-shrink: 0;
}

.qr-card {
  text-align: center;
}

.qr-image {
  width: 360rpx;
  max-width: 100%;
  margin: 18rpx auto 0;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 18rpx 40rpx rgba(15, 23, 42, 0.1);
}

.qr-hint {
  margin-top: 16rpx;
  font-size: 22rpx;
  line-height: 1.6;
  color: #7c8ca5;
}

.rich-text-content {
  margin-top: 18rpx;
}

.empty-title {
  font-size: 30rpx;
  font-weight: 700;
  color: #22324d;
}

.empty-desc {
  margin-top: 10rpx;
  font-size: 24rpx;
  line-height: 1.7;
  color: #7c8ca5;
}

.popup-footer {
  padding: 18rpx 28rpx calc(20rpx + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 26%, #ffffff 100%);
  display: flex;
  justify-content: center;
  backdrop-filter: blur(8rpx);
}

.notice-action-btn {
  width: 100%;
  height: 88rpx;
  padding: 0 40rpx;
  border-radius: 999rpx;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #2b8eff 0%, #1f6fe5 100%);
  color: #ffffff;
  box-shadow: 0 14rpx 28rpx rgba(43, 142, 255, 0.22);
}
</style>