update

src/dict/apis.ts

@@ -1,5 +1,5 @@
 const baseURL = "https://www.infish.cn";
-// const localURL = "http://192.168.110.180:8889";
+// const localURL = "http://192.168.110.131:8890";
 
 const baseVersion = "/cloud/v1";
 const treeVersion = "/tree/v1";

src/hooks/initRemSize.ts

@@ -1,10 +1,9 @@
-import { isPc } from "@queenjs/utils";
 
 export function initRemSize() {
   function setRem() {
     const clientWidth = document.documentElement.clientWidth;
-    const width = clientWidth > 750 ? 750 : clientWidth;
-    const fontSize = (width / 750) * (isPc() ? 50 : 100);
+    const width = clientWidth < 1280 ? 1280 : clientWidth;
+    const fontSize = width / 19.2;
     document.documentElement.style.fontSize = fontSize + "px";
   }
 

src/modules/payment/actions.ts

@@ -0,0 +1,8 @@
+import { PaymentModule } from ".";
+
+export const actions = PaymentModule.action({
+  async initPayPoints() {
+    const { result } = await this.https.getPayPoinits();
+    this.store.setPayPoints(result);
+  },
+});

src/modules/payment/https.ts

@@ -0,0 +1,40 @@
+import { PaymentModule } from ".";
+
+export const https = PaymentModule.http({
+  getPayPoinits() {
+    return this.request("/pay/points", {
+      method: "GET",
+      params: {
+        project: this.config.project,
+      },
+    });
+  },
+  getPayAmount(params: {
+    productKey: string;
+    quantity: number;
+    number: number;
+  }) {
+    return this.request("/pay/points", {
+      method: "GET",
+      params,
+    });
+  },
+  createOrder(data) {
+    return this.request("/pay/order/create", {
+      method: "POST",
+      data,
+    });
+  },
+  createOrderQr(data) {
+    return this.request("/pay/create/qr", {
+      method: "POST",
+      data,
+    });
+  },
+  getOrderDetail(params) {
+    return this.request("/pay/order/detail", {
+      method: "GET",
+      params,
+    });
+  },
+});

src/modules/payment/index.ts

@@ -0,0 +1,23 @@
+import { Dict_Apis } from "@/dict";
+import { ModuleRoot } from "queenjs";
+import { https } from "./https";
+import { store } from "./store";
+import { actions } from "./actions";
+
+export class PaymentModule extends ModuleRoot {
+  config = this.setConfig({
+    project: "",
+    httpConfig: {
+      baseURL: Dict_Apis.promotion,
+    },
+  });
+  actions = this.createActions(actions)
+  https = this.createHttps(https);
+  store = this.createStore(store);
+  
+  onReady() {
+    this.actions.initPayPoints();
+  }
+}
+
+export const { initPayment, usePayment } = PaymentModule.hook("Payment");

src/modules/payment/store.ts

@@ -0,0 +1,21 @@
+import { PaymentModule } from ".";
+
+interface PayPoint {
+  _id: string;
+  project: string;
+  productKey: string;
+  productName: string;
+  price: number;
+  payMethods: { Key: string; Value: number }[];
+}
+
+export const store = PaymentModule.store({
+  state: () => ({
+    payPoints: [] as PayPoint[],
+  }),
+  actions: {
+    setPayPoints(points: PayPoint[]) {
+      this.store.payPoints = points;
+    },
+  },
+});

src/pages/website/Payment/index.tsx

@@ -0,0 +1,291 @@
+import { initPayment } from "@/modules/payment";
+import { css } from "@linaria/core";
+import { useAuth } from "@queenjs-modules/auth";
+import { Button, Input } from "ant-design-vue";
+import { defineComponent, reactive } from "vue";
+
+export default defineComponent({
+  setup() {
+    const auth = useAuth();
+    const { store, actions } = initPayment({
+      config: { project: "queenshow" },
+    });
+
+    const payVersions = [
+      {
+        label: "个人",
+        children: ["queenshow_person_year", "queenshow_person_month"],
+      },
+      {
+        label: "团队",
+        children: [
+          "queenshow_team_15month",
+          "queenshow_team_year",
+          "queenshow_team_month",
+        ],
+      },
+    ];
+
+    const payPointsInfo = {
+      queenshow_person_year: {
+        name: "一年VIP",
+        desc: "高性价比之选",
+      },
+      queenshow_person_month: {
+        name: "月度VIP",
+        desc: "续费价199.0元",
+      },
+      queenshow_team_15month: {
+        name: "15个月/人",
+        desc: "鲲舞精心之选",
+      },
+      queenshow_team_year: {
+        name: "年VIP/人",
+        desc: "高性价比之选",
+      },
+      queenshow_team_month: {
+        name: "月VIP/人",
+        desc: "续费价199.0元",
+      },
+    };
+
+    const state = reactive({
+      versionIdx: 0,
+      orderInfo: {
+        productKey: "",
+        price: 0,
+        quantity: 1,
+        number: 1,
+      },
+      amountPrice: 0,
+    });
+
+    function changeOrderInfo(
+      type: keyof (typeof state)["orderInfo"],
+      value: any
+    ) {
+      (state.orderInfo as any)[type] = value;
+      updateOrderAmount();
+    }
+
+    function updateOrderAmount() {
+      //
+    }
+
+    return () => {
+      const { saas } = auth.store.userInfo as any;
+      return (
+        <div class={rootCls}>
+          <header class="p-0.24rem">
+            <div class="flex">
+              <img
+                class="w-0.48rem h-0.48rem rounded-[50%]"
+                src={auth.store.userInfo.avatar}
+              />
+              <div class="ml-0.14rem space-y-0.08rem">
+                <div class="text-0.2rem font-500 text-white">
+                  {auth.store.userInfo.name}
+                </div>
+                <div class="text-0.16rem font-500 text-[#888]">
+                  {saas ? "会员版" : "免费版"}
+                </div>
+              </div>
+            </div>
+          </header>
+          <main>
+            <section class="w-2.95rem mr-0.24rem space-y-0.2rem">
+              <div class="flex items-center">
+                <img
+                  class="w-0.22rem h-0.22rem mr-0.1rem"
+                  src={require("@/assets/imgs/icon-vip.png")}
+                />
+                <span class="text-0.22rem text-[#222]">会员版</span>
+              </div>
+              <p>适合个人创作设计，如个人新媒体、个人网店、直播带货等</p>
+              <div class="splitline"></div>
+              <ul class="pl-0.16rem leading-0.24rem space-y-0.12rem">
+                <li>个人或企业商用授权（选购）</li>
+                <li>VIP专属内容</li>
+                <li>模版创建无上限</li>
+                <li>鲲秀AI使用权限</li>
+                <li>专属客服/正规发票</li>
+              </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) => {
+                  return (
+                    <span
+                      key={i}
+                      class={["checkbox", i === state.versionIdx && "checked"]}
+                      onClick={() => (state.versionIdx = i)}
+                    >
+                      {d.label}
+                    </span>
+                  );
+                })}
+              </section>
+              <section>
+                <label>价格选择</label>
+                <div class="mt-0.24rem">
+                  {payVersions[state.versionIdx].children.map((d, i) => {
+                    const item = payPointsInfo[d as keyof typeof payPointsInfo];
+                    const price =
+                      store.payPoints.find((p) => p.productKey === d)?.price ||
+                      0;
+
+                    console.log(price, d);
+                    return (
+                      <div
+                        key={i}
+                        class={[
+                          "checkbox priceBox",
+                          state.orderInfo.productKey === d && "checked",
+                        ]}
+                        onClick={() => changeOrderInfo("productKey", d)}
+                      >
+                        <div class="text-0.16rem font-bold text-[#666] pt-0.16rem ">
+                          {item.name}
+                        </div>
+                        <div class="text-0.3rem font-bold">
+                          <span class="text-0.14rem">&yen;</span>
+                          {price.toFixed(1)}
+                        </div>
+                        <div class="text-0.14rem text-[#666] pt-0.16rem ">
+                          {item.desc}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </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>
+              </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>
+                  <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>
+                  </div>
+                </div>
+              </section>
+            </div>
+          </main>
+        </div>
+      );
+    };
+  },
+});
+
+const rootCls = css`
+  margin: -24px;
+
+  header {
+    background-color: #2a2d41;
+  }
+  main {
+    display: flex;
+    padding: 0.24rem;
+    background-color: #f1f2f4;
+    color: #666;
+  }
+  section {
+    padding: 0.24rem;
+    background-color: #fff;
+    border-radius: 0.08rem;
+
+    label {
+      margin-right: 0.4rem;
+      font-size: 0.2rem;
+      color: #111;
+    }
+  }
+
+  .checkbox {
+    display: inline-block;
+    padding: 0.16rem;
+    margin-right: 0.3rem;
+    min-width: 1.4rem;
+    border: 1px solid rgba(51, 51, 51, 0.3);
+    border-radius: 0.06rem;
+    font-size: 0.18rem;
+    color: #333;
+    text-align: center;
+    cursor: pointer;
+
+    &.priceBox {
+      display: inline-flex;
+      flex-direction: column;
+      justify-content: space-between;
+      width: 1.6rem;
+      height: 1.6rem;
+      vertical-align: top;
+      text-align: left;
+    }
+
+    &.checked {
+      border: 1px solid #885428;
+      background-color: #fff7e8;
+      color: #885428;
+      * {
+        color: #885428;
+      }
+    }
+  }
+
+  .splitline {
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .payMethod {
+    margin-top: 0.24rem;
+    border-top: 1px solid #e0e0e0;
+  }
+
+  .payBtn {
+    display: inline-flex;
+    width: 2rem;
+    justify-content: center;
+    align-items: center;
+    padding: 0.12rem;
+    border: 1px solid #e0e0e0;
+    border-radius: 0.06rem;
+    cursor: pointer;
+  }
+`;

src/pages/website/components/layout/LeftContent.tsx

@@ -7,12 +7,14 @@ import {
   IconSettings,
 } from "@queenjs/icons";
 import { Avatar, Divider } from "ant-design-vue";
-import { defineUI } from "queenjs";
+import { defineUI, queenApi } from "queenjs";
 import { defineComponent } from "vue";
 import { array, object } from "vue-types";
 import Logo from "./Logo";
 import { UserController } from "./UserController";
 import dayjs from "dayjs";
+import Payment from "../../Payment";
+import { useAuth } from "@queenjs-modules/auth";
 
 export default defineUI({
   props: {
@@ -20,6 +22,7 @@ export default defineUI({
   },
 
   setup(props) {
+    const auth = useAuth();
     const footerOptions: TextListProps[] = [
       {
         label: "退出",
@@ -52,6 +55,11 @@ export default defineUI({
         icon: IconSettings,
       },
     ];
+
+    function showPayment() {
+      queenApi.dialog(<Payment />, { width: "12rem" }, [auth]);
+    }
+
     return () => {
       const { userInfo } = props.Controller.state;
 
@@ -64,8 +72,15 @@ export default defineUI({
             <Avatar size={76} src={userInfo.avatar} />
             <div class="ml-20px flex-1">
               <p class="mb-10px text-16px font-bold">{userInfo.name}</p>
-              <div class="text-12px text-gray" style={{color:"#E88B00"}}>
-                {userInfo.saas? "VIP 到期时间:" + dayjs(userInfo.saas.Exp).format("YYYY.MM.DD") :  "免费版(限3个推广)" }
+              <div
+                class="text-12px text-gray cursor-pointer"
+                style={{ color: "#E88B00" }}
+                onClick={showPayment}
+              >
+                {userInfo.saas
+                  ? "VIP 到期时间:" +
+                    dayjs(userInfo.saas.Exp).format("YYYY.MM.DD")
+                  : "免费版(限3个推广)"}
               </div>
             </div>
           </div>

src/pages/website/index.ts

@@ -5,11 +5,12 @@ import { initEditor } from "@/modules/editor";
 import { initResource } from "@/modules/resource";
 import CKEditor from "@ckeditor/ckeditor5-vue";
 import router from "./router";
+import { initRemSize } from "@/hooks/initRemSize";
 
 document.title = "推广编辑器";
 startApp(
   router,
-  [initAuthDef, initViewportSize, initResource, initEditor],
+  [initViewportSize, initRemSize, initAuthDef, initResource, initEditor],
   (app) => {
     app.use(CKEditor);
   }