chore: suite

packages/ui/certd-client/src/style/common.less

@@ -96,6 +96,9 @@ h1, h2, h3, h4, h5, h6 {
   overflow-y: auto;
 
 }
+.m-0{
+  margin:0
+}
 .m-2{
   margin:2px
 }

packages/ui/certd-client/src/views/certd/cname/record/crud.tsx

@@ -23,9 +23,6 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
   };
 
   const addRequest = async ({ form }: AddReq) => {
-    form.content = JSON.stringify({
-      title: form.title
-    });
     const res = await api.AddObj(form);
     return res;
   };

packages/ui/certd-client/src/views/certd/history/crud.tsx

@@ -22,9 +22,6 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
   };
 
   const addRequest = async ({ form }: AddReq) => {
-    form.content = JSON.stringify({
-      title: form.title
-    });
     const res = await api.AddObj(form);
     return res;
   };

packages/ui/certd-client/src/views/certd/suite/api.ts

@@ -17,7 +17,7 @@ export const durationDict = dict({
 });
 
 export type OrderModalOpenReq = {
-  productId: number;
+  product: any;
   duration: number;
   num?: number;
 };
@@ -41,6 +41,7 @@ export type TradeCreateReq = {
   productId: number;
   duration: number;
   num: number;
+  payType: string;
 };
 
 export async function TradeCreate(form: TradeCreateReq) {

packages/ui/certd-client/src/views/certd/suite/buy.vue

@@ -6,10 +6,12 @@
     <div class="suite-buy-content">
       <a-row :gutter="12">
         <a-col v-for="item of products" :key="item.id" class="mb-10" :xs="12" :sm="12" :md="8" :lg="6" :xl="6" :xxl="4">
-          <product-info product="item"></product-info>
+          <product-info :product="item" @order="doOrder" />
         </a-col>
       </a-row>
     </div>
+
+    <order-modal ref="orderModalRef" />
   </fs-page>
 </template>
 
@@ -17,14 +19,21 @@
 import { ref } from "vue";
 import * as api from "./api";
 import ProductInfo from "/@/views/certd/suite/product-info.vue";
+import OrderModal from "/@/views/certd/suite/order-modal.vue";
 
 const products = ref([]);
 
-async function loadSuites() {
+async function loadProducts() {
   products.value = await api.ProductList();
 }
 
-loadSuites();
+loadProducts();
+const orderModalRef = ref<any>(null);
+async function doOrder(req: any) {
+  await orderModalRef.value.open({
+    ...req
+  });
+}
 </script>
 
 <style lang="less">
@@ -36,26 +45,6 @@ loadSuites();
   .suite-buy-content {
     padding: 20px;
 
-    .duration-list {
-      display: flex;
-      .duration-item {
-        width: 50px;
-        border: 1px solid #cdcdcd;
-        text-align: center;
-        padding: 2px;
-        margin: 2px;
-        cursor: pointer;
-
-        &:hover {
-          border-color: #1890ff;
-        }
-        &.active {
-          border-color: #a6fba3;
-          background-color: #c1eafb;
-        }
-      }
-    }
-
     .hr {
       border-top: 1px solid #cdcdcd;
       margin-top: 5px;

packages/ui/certd-client/src/views/certd/suite/order-modal.vue

@@ -0,0 +1,67 @@
+<template>
+  <a-modal v-model:open="openRef" class="order-modal" title="订单确认" @ok="orderCreate">
+    <div v-if="product" class="order-box">
+      <div class="flex-o mt-5">套餐：{{ product.title }}</div>
+      <div class="flex-o mt-5">说明：{{ product.intro }}</div>
+      <div class="flex-o mt-5">
+        <span class="flex-o">规格：</span>
+        <span class="flex-o">流水线<suite-value class="ml-5" :model-value="product.content.maxPipelineCount" unit="条" />；</span>
+        <span class="flex-o">域名<suite-value class="ml-5" :model-value="product.content.maxDomainCount" unit="个" />；</span>
+        <span class="flex-o">部署次数<suite-value class="ml-5" :model-value="product.content.maxDeployCount" unit="次" />；</span>
+      </div>
+
+      <div class="flex-o mt-5">
+        时长：
+        <a-tag color="green"> {{ durationDict.dataMap[formRef.duration]?.label }}</a-tag>
+      </div>
+      <div class="flex-o mt-5">价格： <price-input :edit="false" :model-value="durationSelected.price"></price-input></div>
+
+      <div class="flex-o mt-5">
+        支付方式：
+        <a-select v-model:value="formRef.payType">
+          <a-select-option value="alipay">支付宝</a-select-option>
+        </a-select>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { durationDict, OrderModalOpenReq, TradeCreate, TradeCreateReq } from "/@/views/certd/suite/api";
+import SuiteValue from "/@/views/sys/suite/product/suite-value.vue";
+import PriceInput from "/@/views/sys/suite/product/price-input.vue";
+
+const openRef = ref(false);
+
+const product = ref<any>(null);
+const formRef = ref<any>({});
+const durationSelected = ref<any>(null);
+async function open(opts: OrderModalOpenReq) {
+  openRef.value = true;
+
+  product.value = opts.product;
+
+  durationSelected.value = opts.product.durationPrices.find((dp: any) => dp.duration === opts.duration);
+  formRef.value.productId = opts.product.id;
+  formRef.value.duration = opts.duration;
+  formRef.value.num = opts.num ?? 1;
+  formRef.value.payType = "alipay";
+}
+
+async function orderCreate() {
+  console.log("orderCreate", formRef.value);
+  const res = await TradeCreate({
+    productId: formRef.value.productId,
+    duration: formRef.value.duration,
+    num: formRef.value.num ?? 1,
+    payType: formRef.value.payType
+  });
+
+  //跳转到对应的页面
+}
+
+defineExpose({
+  open
+});
+</script>

packages/ui/certd-client/src/views/certd/suite/order.vue

@@ -1,22 +0,0 @@
-<template>
-  <a-modal class="order-modal">
-    <div class="order-box"></div>
-  </a-modal>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import { OrderModalOpenReq } from "/@/views/certd/suite/api";
-
-const openRef = ref(false);
-
-async function open(opts: OrderModalOpenReq) {
-  openRef.value = true;
-
-  const productDetail = api.ProductInfo(opts.productId);
-}
-
-defineExpose({
-  open
-});
-</script>

packages/ui/certd-client/src/views/certd/suite/product-info.vue

@@ -1,18 +1,27 @@
 <template>
-  <a-card :title="product.title">
+  <a-card :title="product.title" class="product-card">
     <template #extra>
       <a-tag>{{ product.type }}</a-tag>
     </template>
 
     <div>{{ product.intro }}</div>
     <div class="hr">
-      <div class="flex-between mt-5">流水线条数：<suite-value :model-value="product.content.maxPipelineCount" /></div>
-      <div class="flex-between mt-5">域名数量： <suite-value :model-value="product.content.maxDomainCount" /></div>
-      <div class="flex-between mt-5">部署次数： <suite-value :model-value="product.content.maxDeployCount" /></div>
       <div class="flex-between mt-5">
-        证书监控：
+        <div class="flex-o"><fs-icon icon="ant-design:check-outlined" class="color-green mr-5" /> 流水线条数：</div>
-        <span v-if="product.content.sproductonitor">支持</span>
+        <suite-value :model-value="product.content.maxPipelineCount" unit="条" />
-        <span v-else>不支持</span>
+      </div>
+      <div class="flex-between mt-5">
+        <div class="flex-o"><fs-icon icon="ant-design:check-outlined" class="color-green mr-5" />域名数量：</div>
+        <suite-value :model-value="product.content.maxDomainCount" unit="个" />
+      </div>
+      <div class="flex-between mt-5">
+        <div class="flex-o"><fs-icon icon="ant-design:check-outlined" class="color-green mr-5" /> 部署次数：</div>
+        <suite-value :model-value="product.content.maxDeployCount" unit="次" />
+      </div>
+      <div class="flex-between mt-5">
+        <div class="flex-o"><fs-icon icon="ant-design:check-outlined" class="color-green mr-5" /> 证书监控：</div>
+        <a-tag v-if="product.content.sproductonitor" color="green" class="m-0">支持</a-tag>
+        <a-tag v-else color="gray" class="m-0">不支持</a-tag>
       </div>
     </div>
 
@@ -22,7 +31,7 @@
         <div
           v-for="dp of product.durationPrices"
           :key="dp.duration"
-          class="duration-product"
+          class="duration-item"
           :class="{ active: selected.duration === dp.duration }"
           @click="selected = dp"
         >
@@ -40,7 +49,6 @@
     </div>
 
     <template #actions>
-      <setting-outlined key="setting" />
       <a-button type="primary" @click="doOrder">立即购买</a-button>
     </template>
   </a-card>
@@ -50,16 +58,38 @@ import { durationDict } from "/@/views/certd/suite/api";
 import SuiteValue from "/@/views/sys/suite/product/suite-value.vue";
 import PriceInput from "/@/views/sys/suite/product/price-input.vue";
 import { ref } from "vue";
-import * as api from "./api";
+
 const props = defineProps<{
   product: any;
 }>();
 const selected = ref(props.product.durationPrices[0]);
+
+const emit = defineEmits(["order"]);
 async function doOrder() {
-  console.log("doOrder", selected.value);
+  emit("order", { product: props.product, productId: props.product.id, duration: selected.value.duration });
-  const res = await api.OrderCreate({
-    productId: props.product.id,
-    duration: selected.value.duration
-  });
 }
 </script>
+
+<style lang="less">
+.product-card {
+  .duration-list {
+    display: flex;
+    .duration-item {
+      width: 50px;
+      border: 1px solid #cdcdcd;
+      text-align: center;
+      padding: 2px;
+      margin: 2px;
+      cursor: pointer;
+
+      &:hover {
+        border-color: #1890ff;
+      }
+      &.active {
+        border-color: #a6fba3;
+        background-color: #c1eafb;
+      }
+    }
+  }
+}
+</style>

packages/ui/certd-client/src/views/sys/cname/provider/crud.tsx

@@ -23,9 +23,6 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
   };
 
   const addRequest = async ({ form }: AddReq) => {
-    form.content = JSON.stringify({
-      title: form.title
-    });
     const res = await api.AddObj(form);
     return res;
   };

packages/ui/certd-client/src/views/sys/plugin/crud.tsx

@@ -23,9 +23,6 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
   };
 
   const addRequest = async ({ form }: AddReq) => {
-    form.content = JSON.stringify({
-      title: form.title
-    });
     const res = await api.AddObj(form);
     return res;
   };

packages/ui/certd-client/src/views/sys/suite/product/crud.tsx

@@ -134,7 +134,6 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             }
           },
           valueResolve: ({ form }) => {
-            debugger;
             if (form.content) {
               form.content = JSON.stringify(form.content);
             }
@@ -145,7 +144,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
         },
         "content.maxDomainCount": {
           title: "域名数量",
-          type: "number",
+          type: "text",
           form: {
             key: ["content", "maxDomainCount"],
             component: {
@@ -158,13 +157,15 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
           column: {
             width: 100,
             component: {
-              name: SuiteValue
+              name: SuiteValue,
+              vModel: "modelValue",
+              unit: "个"
             }
           }
         },
         "content.maxPipelineCount": {
           title: "流水线数量",
-          type: "number",
+          type: "text",
           form: {
             key: ["content", "maxPipelineCount"],
             component: {
@@ -177,13 +178,15 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
           column: {
             width: 100,
             component: {
-              name: SuiteValue
+              name: SuiteValue,
+              vModel: "modelValue",
+              unit: "条"
             }
           }
         },
         "content.maxDeployCount": {
           title: "部署次数",
-          type: "number",
+          type: "text",
           form: {
             key: ["content", "maxDeployCount"],
             component: {
@@ -196,7 +199,9 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
           column: {
             width: 100,
             component: {
-              name: SuiteValue
+              name: SuiteValue,
+              vModel: "modelValue",
+              unit: "次"
             }
           }
         },
@@ -217,6 +222,22 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             width: 120
           }
         },
+        isBootstrap: {
+          title: "是否初始套餐",
+          type: "dict-switch",
+          dict: dict({
+            data: [
+              { label: "是", value: true, color: "success" },
+              { label: "否", value: false, color: "gray" }
+            ]
+          }),
+          form: {
+            value: false
+          },
+          column: {
+            width: 120
+          }
+        },
         durationPrices: {
           title: "时长及价格",
           type: "text",
@@ -243,29 +264,13 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             }
           }
         },
-        isBootstrap: {
-          title: "是否初始套餐",
-          type: "dict-switch",
-          dict: dict({
-            data: [
-              { label: "是", value: true, color: "success" },
-              { label: "否", value: false, color: "error" }
-            ]
-          }),
-          form: {
-            value: false
-          },
-          column: {
-            width: 120
-          }
-        },
         disabled: {
           title: "上下架",
           type: "dict-radio",
           dict: dict({
             data: [
-              { value: false, label: "上架" },
+              { value: false, label: "上架", color: "green" },
-              { value: true, label: "下架" }
+              { value: true, label: "下架", color: "gray" }
             ]
           }),
           form: {

packages/ui/certd-client/src/views/sys/suite/product/price-input.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex-o">
+  <div class="flex-o price-input">
     <a-input-number v-if="edit" prefix="¥" :value="priceValue" :precision="2" class="ml-5" @update:value="onPriceChange"> </a-input-number>
-    <span v-else>{{ priceLabel }}</span>
+    <span v-else class="price-text">{{ priceLabel }}</span>
   </div>
 </template>
 
@@ -33,3 +33,12 @@ const onPriceChange = (price: number) => {
   emit("update:modelValue", price * 100);
 };
 </script>
+
+<style lang="less">
+.price-input {
+  .price-text {
+    font-size: 18px;
+    color: red;
+  }
+}
+</style>

packages/ui/certd-client/src/views/sys/suite/product/suite-value.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="target" class="cd-suite-value">
-    <a-tag :color="target.color">{{ target.label }}</a-tag>
+    <a-tag :color="target.color" class="m-0">{{ target.label }}</a-tag>
   </div>
 </template>
 
@@ -9,10 +9,11 @@ import { computed } from "vue";
 
 const props = defineProps<{
   modelValue: number;
+  unit?: string;
 }>();
 
 const target = computed(() => {
-  if (!props.modelValue) {
+  if (props.modelValue == null) {
     return {};
   }
   if (props.modelValue === -1) {
@@ -24,13 +25,13 @@ const target = computed(() => {
   } else if (props.modelValue === 0) {
     return {
       value: 0,
-      label: "-",
+      label: "0" + (props.unit || ""),
       color: "red"
     };
   } else {
     return {
       value: props.modelValue,
-      label: props.modelValue,
+      label: props.modelValue + (props.unit || ""),
       color: "blue"
     };
   }

packages/ui/certd-client/src/views/sys/suite/trade/crud.tsx

@@ -23,9 +23,6 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
   };
 
   const addRequest = async ({ form }: AddReq) => {
-    form.content = JSON.stringify({
-      title: form.title
-    });
     const res = await api.AddObj(form);
     return res;
   };

packages/ui/certd-client/src/views/sys/suite/user-suite/crud.tsx

@@ -23,9 +23,6 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
   };
 
   const addRequest = async ({ form }: AddReq) => {
-    form.content = JSON.stringify({
-      title: form.title
-    });
     const res = await api.AddObj(form);
     return res;
   };