125 lines
2.9 KiB
Vue
125 lines
2.9 KiB
Vue
<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> |