|
|
@@ -1,20 +1,30 @@
|
|
|
+import { TimeController } from "@/controllers/TimeController";
|
|
|
import { initPayment } from "@/modules/payment";
|
|
|
import { css } from "@linaria/core";
|
|
|
import { useAuth } from "@queenjs-modules/auth";
|
|
|
-import { Button, Input } from "ant-design-vue";
|
|
|
+import { InputNumber } from "ant-design-vue";
|
|
|
+import { queenApi } from "queenjs";
|
|
|
+import Modal from "queenjs/adapter/vue/components/modal";
|
|
|
import { defineComponent, reactive } from "vue";
|
|
|
+import PayQrcode from "./PayQrcode";
|
|
|
+import { IconScan, IconTransfer } from "@/assets/icons";
|
|
|
|
|
|
export default defineComponent({
|
|
|
setup() {
|
|
|
const auth = useAuth();
|
|
|
- const { store, actions } = initPayment({
|
|
|
+ const payment = initPayment({
|
|
|
config: { project: "queenshow" },
|
|
|
});
|
|
|
+ const { store, https, actions } = payment;
|
|
|
|
|
|
const payVersions = [
|
|
|
{
|
|
|
label: "个人",
|
|
|
- children: ["queenshow_person_year", "queenshow_person_month"],
|
|
|
+ children: [
|
|
|
+ "queenshow_person_year",
|
|
|
+ "queenshow_person_month",
|
|
|
+ // "queenshow_point_test",
|
|
|
+ ],
|
|
|
},
|
|
|
{
|
|
|
label: "团队",
|
|
|
@@ -26,54 +36,199 @@ export default defineComponent({
|
|
|
},
|
|
|
];
|
|
|
|
|
|
- const payPointsInfo = {
|
|
|
+ const payWays = [
|
|
|
+ {
|
|
|
+ label: "快捷支付",
|
|
|
+ icon: IconScan,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "对公转账",
|
|
|
+ icon: IconTransfer,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ const payMethods: Record<string, { label: string; icon: string }> = {
|
|
|
+ wechatPay: {
|
|
|
+ label: "微信支付",
|
|
|
+ icon: require("@/assets/imgs/icon-wx.png"),
|
|
|
+ },
|
|
|
+ aliPay: {
|
|
|
+ label: "支付宝支付",
|
|
|
+ icon: require("@/assets/imgs/icon-zfb.png"),
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ const payPointsInfo: Record<
|
|
|
+ string,
|
|
|
+ {
|
|
|
+ name: string;
|
|
|
+ desc: string;
|
|
|
+ default: { quantity: number; number: number };
|
|
|
+ quantityProps?: any;
|
|
|
+ numberProps?: any;
|
|
|
+ quantityUnit?: string;
|
|
|
+ priceTip?: string;
|
|
|
+ }
|
|
|
+ > = {
|
|
|
+ // queenshow_point_test: {
|
|
|
+ // name: "测试",
|
|
|
+ // desc: "xxxx",
|
|
|
+ // default: {
|
|
|
+ // quantity: 1,
|
|
|
+ // number: 1,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
queenshow_person_year: {
|
|
|
name: "一年VIP",
|
|
|
desc: "高性价比之选",
|
|
|
+ default: {
|
|
|
+ quantity: 1,
|
|
|
+ number: 1,
|
|
|
+ },
|
|
|
},
|
|
|
queenshow_person_month: {
|
|
|
name: "月度VIP",
|
|
|
desc: "续费价199.0元",
|
|
|
+ default: {
|
|
|
+ quantity: 1,
|
|
|
+ number: 1,
|
|
|
+ },
|
|
|
+ quantityProps: {
|
|
|
+ min: 1,
|
|
|
+ },
|
|
|
+ quantityUnit: "月",
|
|
|
},
|
|
|
queenshow_team_15month: {
|
|
|
name: "15个月/人",
|
|
|
desc: "鲲舞精心之选",
|
|
|
+ priceTip: "团购30人以上",
|
|
|
+ default: {
|
|
|
+ quantity: 1,
|
|
|
+ number: 30,
|
|
|
+ },
|
|
|
+ numberProps: {
|
|
|
+ min: 30,
|
|
|
+ },
|
|
|
},
|
|
|
queenshow_team_year: {
|
|
|
name: "年VIP/人",
|
|
|
desc: "高性价比之选",
|
|
|
+ default: {
|
|
|
+ quantity: 1,
|
|
|
+ number: 1,
|
|
|
+ },
|
|
|
+ numberProps: {
|
|
|
+ min: 1,
|
|
|
+ },
|
|
|
},
|
|
|
queenshow_team_month: {
|
|
|
name: "月VIP/人",
|
|
|
desc: "续费价199.0元",
|
|
|
+ default: {
|
|
|
+ quantity: 1,
|
|
|
+ number: 1,
|
|
|
+ },
|
|
|
+ numberProps: {
|
|
|
+ min: 1,
|
|
|
+ },
|
|
|
+ quantityProps: {
|
|
|
+ min: 1,
|
|
|
+ },
|
|
|
+ quantityUnit: "月",
|
|
|
},
|
|
|
};
|
|
|
|
|
|
const state = reactive({
|
|
|
versionIdx: 0,
|
|
|
+ payWayIdx: 0,
|
|
|
orderInfo: {
|
|
|
productKey: "",
|
|
|
- price: 0,
|
|
|
- quantity: 1,
|
|
|
- number: 1,
|
|
|
+ quantity: 0,
|
|
|
+ number: 0,
|
|
|
},
|
|
|
amountPrice: 0,
|
|
|
});
|
|
|
|
|
|
+ function changeVersion(idx: number) {
|
|
|
+ state.versionIdx = idx;
|
|
|
+ initOrderInfo(payVersions[idx].children[0]);
|
|
|
+ }
|
|
|
+
|
|
|
+ function initOrderInfo(productKey: string) {
|
|
|
+ state.orderInfo = {
|
|
|
+ productKey,
|
|
|
+ ...payPointsInfo[productKey].default,
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
function changeOrderInfo(
|
|
|
type: keyof (typeof state)["orderInfo"],
|
|
|
value: any
|
|
|
) {
|
|
|
(state.orderInfo as any)[type] = value;
|
|
|
+ if (type === "productKey") {
|
|
|
+ initOrderInfo(value);
|
|
|
+ }
|
|
|
updateOrderAmount();
|
|
|
}
|
|
|
|
|
|
function updateOrderAmount() {
|
|
|
- //
|
|
|
+ https.getPayAmount(state.orderInfo).then((ret) => {
|
|
|
+ state.amountPrice = ret.result;
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
+ async function createOrderQrcode(payMod: number) {
|
|
|
+ queenApi.showLoading("加载中");
|
|
|
+ try {
|
|
|
+ // const orderId = "64b764473d1915628fe24045";
|
|
|
+ // const link = "64b764473d1915628fe24045";
|
|
|
+ const { orderId, link } = await actions.createOrder(payMod, {
|
|
|
+ ...state.orderInfo,
|
|
|
+ amount: state.amountPrice,
|
|
|
+ });
|
|
|
+
|
|
|
+ const orderStatusCtrl = new TimeController({
|
|
|
+ delayTime: 8000,
|
|
|
+ durationTime: 3000,
|
|
|
+ });
|
|
|
+ orderStatusCtrl
|
|
|
+ .setLoop(async () => {
|
|
|
+ const { result } = await https.getOrderDetail({ id: orderId });
|
|
|
+ if (result.status === 2) {
|
|
|
+ orderStatusCtrl.stop();
|
|
|
+ Modal.clear();
|
|
|
+ auth.actions.getUserInfo();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .start();
|
|
|
+
|
|
|
+ queenApi
|
|
|
+ .dialog(
|
|
|
+ <PayQrcode orderId={orderId} link={link} />,
|
|
|
+ {
|
|
|
+ closable: false,
|
|
|
+ },
|
|
|
+ { payment }
|
|
|
+ )
|
|
|
+ .catch(() => {
|
|
|
+ orderStatusCtrl.stop();
|
|
|
+ });
|
|
|
+ } catch (error: any) {
|
|
|
+ queenApi.messageError(error.toString());
|
|
|
+ } finally {
|
|
|
+ queenApi.hideLoading();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ changeOrderInfo("productKey", payVersions[state.versionIdx].children[0]);
|
|
|
+
|
|
|
return () => {
|
|
|
const { saas } = auth.store.userInfo as any;
|
|
|
+ const currPayInfo = payPointsInfo[state.orderInfo.productKey];
|
|
|
+ const currPayPoint = store.payPoints.find(
|
|
|
+ (d) => d.productKey === state.orderInfo.productKey
|
|
|
+ );
|
|
|
return (
|
|
|
<div class={rootCls}>
|
|
|
<header class="p-0.24rem">
|
|
|
@@ -112,10 +267,6 @@ export default defineComponent({
|
|
|
</ul>
|
|
|
</section>
|
|
|
<div class="flex-1 space-y-0.18rem">
|
|
|
- {/* <section>
|
|
|
- <label>购买版本</label>
|
|
|
- <span class="checkbox checked">{payConf.versionName}</span>
|
|
|
- </section> */}
|
|
|
<section>
|
|
|
<label class="">购买版本</label>
|
|
|
{payVersions.map((d, i) => {
|
|
|
@@ -123,7 +274,7 @@ export default defineComponent({
|
|
|
<span
|
|
|
key={i}
|
|
|
class={["checkbox", i === state.versionIdx && "checked"]}
|
|
|
- onClick={() => (state.versionIdx = i)}
|
|
|
+ onClick={() => changeVersion(i)}
|
|
|
>
|
|
|
{d.label}
|
|
|
</span>
|
|
|
@@ -138,8 +289,6 @@ export default defineComponent({
|
|
|
const price =
|
|
|
store.payPoints.find((p) => p.productKey === d)?.price ||
|
|
|
0;
|
|
|
-
|
|
|
- console.log(price, d);
|
|
|
return (
|
|
|
<div
|
|
|
key={i}
|
|
|
@@ -149,6 +298,9 @@ export default defineComponent({
|
|
|
]}
|
|
|
onClick={() => changeOrderInfo("productKey", d)}
|
|
|
>
|
|
|
+ {item.priceTip && (
|
|
|
+ <div class="priceTip">{item.priceTip}</div>
|
|
|
+ )}
|
|
|
<div class="text-0.16rem font-bold text-[#666] pt-0.16rem ">
|
|
|
{item.name}
|
|
|
</div>
|
|
|
@@ -163,45 +315,101 @@ export default defineComponent({
|
|
|
);
|
|
|
})}
|
|
|
</div>
|
|
|
- <div class="mt-0.28rem">
|
|
|
- <span class="text-0.16rem text-[#111] font-bold">
|
|
|
- 人数选择：
|
|
|
- </span>
|
|
|
- <Input class="w-1.8rem mx-0.16rem !border-[#c9c9c9]" />
|
|
|
- <span class="text-0.16rem text-[#666]">人</span>
|
|
|
- <span class="text-0.16rem text-[#111] font-bold ml-0.85rem">
|
|
|
- 时长设置：
|
|
|
- </span>
|
|
|
- <Input class="w-1.8rem mx-0.16rem !border-[#c9c9c9]" />
|
|
|
- <span class="text-0.16rem text-[#666]">年</span>
|
|
|
+ <div class="mt-0.28rem text-[#111]">
|
|
|
+ {currPayInfo.numberProps && (
|
|
|
+ <>
|
|
|
+ <span class="text-0.16rem font-bold">人数选择：</span>
|
|
|
+ <InputNumber
|
|
|
+ class="inputNum"
|
|
|
+ value={state.orderInfo.number}
|
|
|
+ onChange={(v) => changeOrderInfo("number", v)}
|
|
|
+ {...currPayInfo.numberProps}
|
|
|
+ />
|
|
|
+ <span class="text-0.16rem text-[#666] mr-0.85rem">
|
|
|
+ 人
|
|
|
+ </span>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ {currPayInfo.quantityProps && (
|
|
|
+ <>
|
|
|
+ <span class="text-0.16rem font-bold">时长设置：</span>
|
|
|
+ <InputNumber
|
|
|
+ class="inputNum"
|
|
|
+ value={state.orderInfo.quantity}
|
|
|
+ onChange={(v) => changeOrderInfo("quantity", v)}
|
|
|
+ {...currPayInfo.quantityProps}
|
|
|
+ />
|
|
|
+ <span class="text-0.16rem text-[#666]">
|
|
|
+ {currPayInfo.quantityUnit}
|
|
|
+ </span>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
</div>
|
|
|
</section>
|
|
|
<section>
|
|
|
<label class="">支付订单</label>
|
|
|
- <div class="payMethod">
|
|
|
- <div class="text-0.16rem font-bold my-0.3rem">
|
|
|
- <span>实付款：</span>
|
|
|
- <span class="text-0.3rem text-[#D34D39]">
|
|
|
- {state.amountPrice}
|
|
|
- </span>
|
|
|
- <span class="text-[#D34D39]">元</span>
|
|
|
+ <div class="payMethod flex">
|
|
|
+ <div class="py-0.24rem space-y-0.14rem">
|
|
|
+ {payWays.map((d, i) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ "payTabItem",
|
|
|
+ state.payWayIdx === i && "checked",
|
|
|
+ ]}
|
|
|
+ key={i}
|
|
|
+ onClick={() => (state.payWayIdx = i)}
|
|
|
+ >
|
|
|
+ <d.icon class="mr-0.08rem" />
|
|
|
+ {d.label}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <div class="payBtn">
|
|
|
- <img
|
|
|
- class="h-0.2rem mr-0.1rem"
|
|
|
- src={require("@/assets/imgs/icon-wx.png")}
|
|
|
- />
|
|
|
- 微信支付
|
|
|
- </div>
|
|
|
- <span class="mx-0.1rem align-text-bottom">或</span>
|
|
|
- <div class="payBtn">
|
|
|
- <img
|
|
|
- class="h-0.2rem mr-0.1rem"
|
|
|
- src={require("@/assets/imgs/icon-zfb.png")}
|
|
|
- />
|
|
|
- 支付宝支付
|
|
|
+
|
|
|
+ <div class="flex-1 ml-0.3rem">
|
|
|
+ <div class="text-0.16rem font-bold my-0.3rem">
|
|
|
+ <span>实付款：</span>
|
|
|
+ <span class="text-0.3rem text-[#D34D39]">
|
|
|
+ {state.amountPrice.toFixed(1)}
|
|
|
+ </span>
|
|
|
+ <span class="text-[#D34D39]">元</span>
|
|
|
</div>
|
|
|
+ {state.payWayIdx === 0 && (
|
|
|
+ <div>
|
|
|
+ {currPayPoint?.payMethods.map((d, i) => {
|
|
|
+ const item = payMethods[d.Key];
|
|
|
+ const isLast =
|
|
|
+ currPayPoint.payMethods.length === i + 1;
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <div
|
|
|
+ class="payBtn"
|
|
|
+ key={d.Key}
|
|
|
+ onClick={() => createOrderQrcode(d.Value)}
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="h-0.2rem mr-0.1rem"
|
|
|
+ src={item.icon}
|
|
|
+ />
|
|
|
+ {item.label}
|
|
|
+ </div>
|
|
|
+ {!isLast && (
|
|
|
+ <span class="mx-0.1rem align-text-bottom">
|
|
|
+ 或
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
+ </>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ {state.payWayIdx === 1 && (
|
|
|
+ <div class="text-0.2rem">
|
|
|
+ 请咨询：
|
|
|
+ <tel class="text-[#DB8F32]">138 0804 4500</tel>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
@@ -250,6 +458,7 @@ const rootCls = css`
|
|
|
cursor: pointer;
|
|
|
|
|
|
&.priceBox {
|
|
|
+ position: relative;
|
|
|
display: inline-flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
@@ -267,12 +476,41 @@ const rootCls = css`
|
|
|
color: #885428;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .priceTip {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ padding: 0.06rem 0.1rem;
|
|
|
+ font-size: 0.12rem;
|
|
|
+ line-height: 1;
|
|
|
+ background-color: #93643d;
|
|
|
+ color: #fff7e8;
|
|
|
+ border-top-right-radius: 0.04rem;
|
|
|
+ border-bottom-left-radius: 0.04rem;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.splitline {
|
|
|
border-bottom: 1px solid #e0e0e0;
|
|
|
}
|
|
|
|
|
|
+ .payTabItem {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 1.58rem;
|
|
|
+ height: 0.58rem;
|
|
|
+ color: #666;
|
|
|
+ border-radius: 0.06rem;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &.checked {
|
|
|
+ background-color: #f1f2f4;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.payMethod {
|
|
|
margin-top: 0.24rem;
|
|
|
border-top: 1px solid #e0e0e0;
|
|
|
@@ -288,4 +526,8 @@ const rootCls = css`
|
|
|
border-radius: 0.06rem;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
+ .inputNum {
|
|
|
+ @apply w-1.8rem mx-0.16rem border-[#c9c9c9] text-[#111];
|
|
|
+ }
|
|
|
`;
|
