更新：课程与图书下单支付功能初步完成

2025-11-25 11:23:42 +08:00
parent bfe0c09242
commit 7dea269e6a
14 changed files with 1490 additions and 2361 deletions
--- a/components/order/PayWay.vue
+++ b/components/order/PayWay.vue
@@ -0,0 +1,125 @@
+<template>
+  <view>
+    <!-- 天医币支付 -->
+    <view class="payment-item">
+      <view class="payment-left">
+        <image src="/static/icon/pay_3.png" class="payment-icon" />
+        <text class="">{{ $t('order.virtualCoin') }}</text>
+        <text class="text-[#7dc1f0]">
+          ({{ $t('order.balance') }}：{{ peanutCoin || 0 }})
+        </text>
+      </view>
+    </view>
+
+    <!-- 支付说明 -->
+    <view class="payment-tips">
+      <view class="tips-header">
+        <wd-icon name="error-circle" color="#7dc1f0" size="20" />
+        <text>{{ $t('order.ensureBalance') }}</text>
+        <text class="recharge-btn" @click="goToRecharge">
+          {{ $t('order.recharge') }}
+        </text>
+      </view>
+      
+      <view class="tips-content">
+        <view class="tip-title">{{ $t('order.paymentTipTitle') }}</view>
+        <view class="tip-item">{{ $t('order.paymentTip1') }}</view>
+        <view class="tip-item">
+          {{ $t('order.paymentTip2') }}
+          <text class="link-text" @click="makePhoneCall('022-24142321')">022-24142321</text>
+        </view>
+        <view class="tip-item">
+          {{ $t('order.paymentTip3') }}
+          <text class="link-text" @click="copyToClipboard('publisher@tmrjournals.com')">
+            publisher@tmrjournals.com
+          </text>
+          {{ $t('order.paymentTip3_1') }}
+          <text class="link-text" @click="copyToClipboard('yilujiankangkefu')">
+            yilujiankangkefu
+          </text>
+          {{ $t('order.paymentTip3_2') }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { makePhoneCall, copyToClipboard } from '@/utils/index'
+
+const props = defineProps({
+  peanutCoin: {
+    type: Number,
+    default: 0
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.payment-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 0;
+  
+  .payment-left {
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+    font-size: 28rpx;
+    font-weight: bold;
+    
+    .payment-icon {
+      width: 40rpx;
+      height: 40rpx;
+    }
+  }
+}
+
+.payment-tips {
+  margin-top: 20rpx;
+  padding: 20rpx;
+  background-color: #f7f8f9;
+  border-radius: 10rpx;
+  
+  .tips-header {
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+    margin-bottom: 12rpx;
+    font-size: 28rpx;
+    color: #333;
+    
+    .recharge-btn {
+      margin-left: auto;
+      padding: 4rpx 14rpx;
+      background-color: #7dc1f0;
+      color: #fff;
+      font-size: 24rpx;
+      border-radius: 10rpx;
+    }
+  }
+  
+  .tips-content {
+    font-size: 28rpx;
+    color: #5a5a5a;
+    line-height: 1.6;
+    
+    .tip-title {
+      font-weight: 500;
+      margin-bottom: 10rpx;
+    }
+    
+    .tip-item {
+      margin-bottom: 10rpx;
+      word-wrap: break-word;
+      word-break: break-all;
+    }
+    
+    .link-text {
+      color: #7dc1f0;
+      text-decoration: underline;
+    }
+  }
+}
+</style>