|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="min-h-screen w-full ">
|
|
|
+ <div class="min-h-screen w-full">
|
|
|
<div class="relative overflow-hidden py-4 pb-10 bg-[#fdedc5]">
|
|
|
<img
|
|
|
src="https://oss.hhmdtech.com/merchant/RmW4frEmQRr99JJ4RJ5hwdZR8FYDhTe8PKn6inRBijRJMRcA.png"
|
|
@@ -8,36 +8,36 @@
|
|
|
/>
|
|
|
<div class="relative">
|
|
|
<div class="h-full w-full overflow-hidden px-4">
|
|
|
- <div
|
|
|
- class="flex h-full w-full rounded bg-[#ffc72f] transition-all duration-150"
|
|
|
- >
|
|
|
- <div class="flex-1 p-4">
|
|
|
- <div
|
|
|
- class="mb-2 max-w-[8em] truncate whitespace-nowrap text-2xl"
|
|
|
- >
|
|
|
- {{ goodsDetail.memberCardName }}
|
|
|
- </div>
|
|
|
- <div v-if="goodsDetail?.originPrice" class="text-gray-500 line-through">
|
|
|
- <span>¥</span>
|
|
|
- <span>
|
|
|
- {{ parseFloat((goodsDetail?.originPrice / 100).toFixed(2)) }}
|
|
|
- </span>
|
|
|
- <span>/{{ goodsDetail.memberCard?.lifespan }}天</span>
|
|
|
- </div>
|
|
|
- <div :class="goodsDetail?.originPrice ? 'pb-3' : 'py-3'">
|
|
|
- <span>¥</span>
|
|
|
- <span class="text-2xl">
|
|
|
- {{ parseFloat((goodsDetail.memberCard?.price / 100).toFixed(2)) }}
|
|
|
- </span>
|
|
|
- <span>/{{ goodsDetail.memberCard?.lifespan }}天</span>
|
|
|
- </div>
|
|
|
- <div class="text-base text-gray-500">{{ goodsDetail.title }}</div>
|
|
|
+ <div
|
|
|
+ class="flex h-full w-full rounded bg-[#ffc72f] transition-all duration-150"
|
|
|
+ >
|
|
|
+ <div class="flex-1 p-4">
|
|
|
+ <div class="mb-2 max-w-[8em] truncate whitespace-nowrap text-2xl">
|
|
|
+ {{ goodsDetail.memberCardName }}
|
|
|
</div>
|
|
|
- <img
|
|
|
- src="@/assets/icon-vip.png"
|
|
|
- class="m-4 h-12 w-12"
|
|
|
- />
|
|
|
+ <div
|
|
|
+ v-if="goodsDetail?.originPrice"
|
|
|
+ class="text-gray-500 line-through"
|
|
|
+ >
|
|
|
+ <span>¥</span>
|
|
|
+ <span>
|
|
|
+ {{ parseFloat((goodsDetail?.originPrice / 100).toFixed(2)) }}
|
|
|
+ </span>
|
|
|
+ <span>/{{ goodsDetail.memberCard?.lifespan }}天</span>
|
|
|
+ </div>
|
|
|
+ <div :class="goodsDetail?.originPrice ? 'pb-3' : 'py-3'">
|
|
|
+ <span>¥</span>
|
|
|
+ <span class="text-2xl">
|
|
|
+ {{
|
|
|
+ parseFloat((goodsDetail.memberCard?.price / 100).toFixed(2))
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ <span>/{{ goodsDetail.memberCard?.lifespan }}天</span>
|
|
|
+ </div>
|
|
|
+ <div class="text-base text-gray-500">{{ goodsDetail.title }}</div>
|
|
|
</div>
|
|
|
+ <img src="@/assets/icon-vip.png" class="m-4 h-12 w-12" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -47,16 +47,18 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="z-[2000] fixed bottom-6 left-0 flex w-full items-center justify-center">
|
|
|
+ <div
|
|
|
+ class="z-[2000] fixed bottom-6 left-0 flex w-full items-center justify-center"
|
|
|
+ >
|
|
|
<div
|
|
|
- class=" flex w-10/12 items-center justify-center overflow-hidden rounded-xl bg-[#2c2c2c]">
|
|
|
+ class="flex w-10/12 items-center justify-center overflow-hidden rounded-xl bg-[#2c2c2c]"
|
|
|
+ >
|
|
|
<button
|
|
|
class="flex-1 whitespace-nowrap border-0 bg-[#2c2c2c] p-4 text-sm text-[#e59223] after:hidden"
|
|
|
- @click="buy">
|
|
|
-
|
|
|
+ @click="buy"
|
|
|
+ >
|
|
|
<span class="text-base">立即购买</span>
|
|
|
</button>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
<PaymentDialog
|
|
@@ -70,13 +72,13 @@
|
|
|
<script setup>
|
|
|
import { ref, reactive, onMounted, computed, watch } from "vue";
|
|
|
|
|
|
-import PaymentDialog from './components/PaymentDialog.vue'
|
|
|
+import PaymentDialog from "./components/PaymentDialog.vue";
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
|
|
import { request } from "@/utils";
|
|
|
|
|
|
const [route, router] = [useRoute(), useRouter()];
|
|
|
-const goodsDetail = ref({})
|
|
|
+const goodsDetail = ref({});
|
|
|
const getGoodsDetail = async () => {
|
|
|
const { data } = await request.get(
|
|
|
`archivesService/member/promotionGoods/detail`,
|
|
@@ -86,23 +88,58 @@ const getGoodsDetail = async () => {
|
|
|
},
|
|
|
}
|
|
|
);
|
|
|
- goodsDetail.value = data.detail
|
|
|
+ goodsDetail.value = data.detail;
|
|
|
};
|
|
|
getGoodsDetail();
|
|
|
|
|
|
-
|
|
|
-const showDialog = ref(false)
|
|
|
+const showDialog = ref(false);
|
|
|
|
|
|
const handleClose = () => {
|
|
|
- showDialog.value = false
|
|
|
-}
|
|
|
+ showDialog.value = false;
|
|
|
+};
|
|
|
|
|
|
const handleConfirm = () => {
|
|
|
- console.log('Payment confirmed')
|
|
|
- showDialog.value = false
|
|
|
-}
|
|
|
+ console.log("Payment confirmed");
|
|
|
+ showDialog.value = false;
|
|
|
+};
|
|
|
const buy = () => {
|
|
|
- showDialog.value = true
|
|
|
+ showDialog.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const preCheck = async () => {
|
|
|
+ const { data } = await request.get(
|
|
|
+ `/archivesService/member/promotionGoods/preData`,
|
|
|
+ {
|
|
|
+ params: {
|
|
|
+ promotionGoodsId: route.query.promotionGoodsId,
|
|
|
+ },
|
|
|
+ }
|
|
|
+ );
|
|
|
+ return data;
|
|
|
+};
|
|
|
+
|
|
|
+const getWeChatAuth = async () => {
|
|
|
+
|
|
|
+ const { appId, errMsg, paymentSettingId } = await preCheck();
|
|
|
+ if (errMsg) {
|
|
|
+ return showToast(errMsg);
|
|
|
+ }
|
|
|
+ if (appId) {
|
|
|
+ //缓存信息
|
|
|
+ localStorage.setItem("paymentSettingId", paymentSettingId);
|
|
|
+ //跳转微信授权
|
|
|
+
|
|
|
+ const redirectUri = encodeURIComponent(location.href);
|
|
|
+ location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+};
|
|
|
+const init = async () => {
|
|
|
+ const { code } = route.query;
|
|
|
+ const paymentSettingId = localStorage.getItem("paymentSettingId");
|
|
|
+ if (!code && !paymentSettingId) {
|
|
|
+ getWeChatAuth()
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|