first commit
This commit is contained in:
liangzai
212
src/components/Payment.vue
Normal file
212
src/components/Payment.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<van-popup v-model:show="show" position="bottom" class="flex flex-col justify-between p-6"
|
||||
:style="{ height: '50%' }">
|
||||
<!-- 应用信息和支付时间 -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<img src="/logo.png" alt="Logo" class="w-8 h-8 rounded-full" />
|
||||
<span class="text-base font-semibold text-gray-800">云客查</span>
|
||||
</div>
|
||||
<div class="text-sm text-gray-500">
|
||||
{{ paymentTime }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h3 class="text-lg font-bold">支付</h3>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="font-bold text-xl">{{ data.product_name }}</div>
|
||||
<div class="text-3xl text-red-500 font-bold">
|
||||
<!-- 显示原价和折扣价格 -->
|
||||
<div v-if="discountPrice" class="line-through text-gray-500 mt-4"
|
||||
:class="{ 'text-2xl': discountPrice }">
|
||||
¥ {{ data.sell_price }}
|
||||
</div>
|
||||
<div>
|
||||
¥
|
||||
{{
|
||||
discountPrice
|
||||
? (data.sell_price * 0.2).toFixed(2)
|
||||
: data.sell_price
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 仅在折扣时显示活动说明 -->
|
||||
<div v-if="discountPrice" class="text-sm text-red-500 mt-1">
|
||||
活动价：2折优惠
|
||||
</div>
|
||||
</div>
|
||||
<!-- 支付方式选择 -->
|
||||
<div class="">
|
||||
<van-cell-group inset>
|
||||
<!-- 开发环境测试支付选项 -->
|
||||
<van-cell v-if="isDevMode" title="测试支付（开发环境）" clickable @click="selectedPaymentMethod = 'test'">
|
||||
<template #icon>
|
||||
<van-icon size="24" name="setting" color="#FF9800" class="mr-2" />
|
||||
</template>
|
||||
<template #right-icon>
|
||||
<van-radio v-model="selectedPaymentMethod" name="test" />
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
<van-cell v-if="isWeChat" title="微信支付" clickable @click="selectedPaymentMethod = 'wechat'">
|
||||
<template #icon>
|
||||
<van-icon size="24" name="wechat-pay" color="#1AAD19" class="mr-2" />
|
||||
</template>
|
||||
<template #right-icon>
|
||||
<van-radio v-model="selectedPaymentMethod" name="wechat" />
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
<!-- 易支付-支付宝 -->
|
||||
<van-cell v-if="!isWeChat" title="支付宝" clickable @click="selectedPaymentMethod = 'easypay_alipay'">
|
||||
<template #icon>
|
||||
<van-icon size="24" name="alipay" color="#00A1E9" class="mr-2" />
|
||||
</template>
|
||||
<template #right-icon>
|
||||
<van-radio v-model="selectedPaymentMethod" name="easypay_alipay" />
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
<!-- 支付宝支付（官方SDK） -->
|
||||
<!-- <van-cell v-if="!isWeChat" title="支付宝支付（官方）" clickable @click="selectedPaymentMethod = 'alipay'">
|
||||
<template #icon>
|
||||
<van-icon size="24" name="alipay" color="#00A1E9" class="mr-2" />
|
||||
</template>
|
||||
<template #right-icon>
|
||||
<van-radio v-model="selectedPaymentMethod" name="alipay" />
|
||||
</template>
|
||||
</van-cell> -->
|
||||
</van-cell-group>
|
||||
</div>
|
||||
<!-- 确认按钮 -->
|
||||
<div class="">
|
||||
<van-button class="w-full" round type="primary" @click="getPayment">确认支付</van-button>
|
||||
</div>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
const { isWeChat } = useEnv();
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const show = defineModel();
|
||||
|
||||
// 判断是否为开发环境
|
||||
const isDevMode = computed(() => {
|
||||
return import.meta.env.MODE === 'development' || import.meta.env.DEV;
|
||||
});
|
||||
|
||||
// 默认支付方式：开发环境优先使用测试支付，否则根据平台选择
|
||||
// 非微信环境默认使用易支付-支付宝
|
||||
const selectedPaymentMethod = ref(
|
||||
isDevMode.value ? "test" : (isWeChat.value ? "wechat" : "easypay_alipay")
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
if (!isDevMode.value) {
|
||||
// 非开发环境，根据平台选择支付方式
|
||||
if (isWeChat.value) {
|
||||
selectedPaymentMethod.value = "wechat";
|
||||
} else {
|
||||
// 默认使用易支付-支付宝
|
||||
selectedPaymentMethod.value = "easypay_alipay";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const orderNo = ref("");
|
||||
const router = useRouter();
|
||||
const discountPrice = ref(false); // 是否应用折扣
|
||||
|
||||
// 格式化支付时间
|
||||
const formatPaymentTime = (date) => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
// 支付时间
|
||||
const paymentTime = ref(formatPaymentTime(new Date()));
|
||||
|
||||
async function getPayment() {
|
||||
const { data, error } = await useApiFetch("/pay/payment")
|
||||
.post({
|
||||
id: props.id,
|
||||
pay_method: selectedPaymentMethod.value,
|
||||
pay_type: props.type,
|
||||
})
|
||||
.json();
|
||||
|
||||
if (data.value && !error.value) {
|
||||
// 测试支付模式：直接跳转到结果页面
|
||||
if (selectedPaymentMethod.value === "test" || selectedPaymentMethod.value === "test_empty") {
|
||||
orderNo.value = data.value.data.order_no;
|
||||
router.push({
|
||||
path: "/payment/result",
|
||||
query: { orderNo: data.value.data.order_no },
|
||||
});
|
||||
} else if (selectedPaymentMethod.value === "easypay_alipay") {
|
||||
// 易支付-支付宝：直接跳转到支付URL
|
||||
orderNo.value = data.value.data.order_no;
|
||||
const prepayUrl = data.value.data.prepay_id || data.value.data.prepay_data;
|
||||
if (prepayUrl) {
|
||||
// 直接跳转到易支付页面
|
||||
window.location.href = prepayUrl;
|
||||
} else {
|
||||
console.error("支付URL获取失败");
|
||||
showToast({
|
||||
type: 'fail',
|
||||
message: '获取支付链接失败，请重试'
|
||||
});
|
||||
}
|
||||
} else if (selectedPaymentMethod.value === "alipay") {
|
||||
orderNo.value = data.value.data.order_no;
|
||||
// 存储订单ID以便支付宝返回时获取
|
||||
const prepayUrl = data.value.data.prepay_id;
|
||||
const paymentForm = document.createElement("form");
|
||||
paymentForm.method = "POST";
|
||||
paymentForm.action = prepayUrl;
|
||||
paymentForm.style.display = "none";
|
||||
document.body.appendChild(paymentForm);
|
||||
paymentForm.submit();
|
||||
} else {
|
||||
const payload = data.value.data.prepay_data;
|
||||
WeixinJSBridge.invoke(
|
||||
"getBrandWCPayRequest",
|
||||
payload,
|
||||
function (res) {
|
||||
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||||
// 支付成功，直接跳转到结果页面
|
||||
router.push({
|
||||
path: "/payment/result",
|
||||
query: { orderNo: data.value.data.order_no },
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
show.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user