订阅弹窗

src/views/Jyh/Version/Detail/SubscriptionModal.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="subscribe-container">
+    <div class="subscribe-tip mb-3">当您订阅的软件有漏洞预警通知时，将以应用号的方式通知。可在首页查看或取消订阅！</div>
+    <div class="subscribe-form">
+      <span>通知方式</span>
+      <d-radio-group direction="row" v-model="subscribeType" @change="typeChange">
+          <d-radio value="0">短信</d-radio>
+          <d-radio value="1">邮件</d-radio>
+          <d-radio value="2">站内通知</d-radio>
+        </d-radio-group>
+    </div>
+    <div class="subscribe-operation mt-5">
+      <d-popover :is-open="isError" content="请选择一项通知方式" pop-type="error" :position="['top']" trigger="manually">
+        <d-button @click="confirm" variant="solid" class="mr-2">确定</d-button>
+      </d-popover>
+      <d-button @click="$emit('close')">取消</d-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+const props = defineProps(['softwareData']);
+const emit = defineEmits(['close']);
+const subscribeType = ref('');
+const isError = ref(false);
+const typeChange = () => {
+  isError.value = false;
+}
+const confirm = () => {
+  if (!subscribeType.value) {
+    isError.value = true;
+    return;
+  }
+  isError.value = false;
+  emit('close');
+};
+</script>
+
+<style scoped lang="scss">
+.subscribe-container {
+  width: 600px;
+  
+  .subscribe-tip {
+    color: #191919;
+    font-family: HarmonyOS Sans SC;
+    font-weight: regular;
+    font-size: 14px;
+  }
+
+  .subscribe-form {
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+    background: #F2F5FC;
+    padding: 20px;
+
+    >span {
+      margin-right: 20px;
+      color: #808080;
+      font-family: HarmonyOS Sans SC;
+      font-weight: regular;
+      font-size: 14px;
+    }
+  }
+
+  .subscribe-operation {
+    text-align: center;
+  }
+}
+</style>

src/views/Jyh/Version/Detail/index.vue

@@ -9,18 +9,27 @@
       <div class="header-top">
         <GAvatar style="margin-right: 12px" :src="avatarUrl" name="Vue" :width="40" :height="40"></GAvatar>
         <div>
-          <div class="header-title1">vue</div>
+          <div class="header-title1">{{ softwareData.name }}</div>
           <div class="header-div">
-            <span class="span1">版本：</span><span class="span2">3.5.13</span>
+            <span class="span1">版本：</span><span class="span2">{{ softwareData.version }}</span>
             <span class="split"></span>
-            <span class="span1">生命周期状态：</span><span class="span2">选型中</span>
+            <span class="span1">生命周期状态：</span><span class="span2">{{ softwareData.lifecycle }}</span>
             <span class="split"></span>
             <span class="span1">集成风险：</span>
-            <d-tag color="#F6933B">低风险</d-tag>
+            <d-tag color="#F6933B">{{ softwareData.risk }}</d-tag>
           </div>
         </div>
         <div class="fr">
-          <d-button class="mr-2" variant="solid">订阅</d-button>
+          <d-button class="mr-2" variant="solid" @click="openSubscription">订阅</d-button>
+          <d-modal class="subscribe-modal" style="width: auto;" v-model="subscribeModalVisable" title="订阅漏洞预警通知">
+            <template #header>
+              <div class="subscribe-header">
+                <d-icon name="icon-info-o" color="var(--devui-info)" size="18px"></d-icon>
+                <span>订阅漏洞预警通知</span>
+              </div>
+            </template>
+            <SubscriptionModal @close="colseSubscription" :softwareData="softwareData"></SubscriptionModal>
+          </d-modal>
         </div>
       </div>
       <d-tabs class="jyh-tabs jyh-tabs-2" type="wrapped" v-model="selectTab">
@@ -56,6 +65,7 @@ import AIRepair from '../../AIRepair/index.vue';
 import LicenseInfo from '../../LicenseInfo/index.vue';
 const { namespace } = getOrgInfo();
 const avatarUrl = '/src/assets/imgs/jyh/工程首字母图标.png';
+import SubscriptionModal from '@/views/Jyh/Version/Detail/SubscriptionModal.vue';
 
 const selectTab = ref('bbxx');
 
@@ -140,6 +150,21 @@ const setClaStatus = async (row: any) => {
 const signCla = (row: any) => {
   router.push('/cla/' + row.object_id);
 };
+
+const softwareData = ref({
+  name: 'vue',
+  version: '3.5.13',
+  lifecycle: '选中型',
+  risk: '低风险',
+});
+
+const subscribeModalVisable = ref(false);
+const openSubscription = () => {
+  subscribeModalVisable.value = true;
+};
+const colseSubscription = () => {
+  subscribeModalVisable.value = false;
+};
 </script>
 
 <style scoped lang="scss">
@@ -286,4 +311,25 @@ const signCla = (row: any) => {
   width: 100%;
   margin-top: 12px;
 }
+
+.subscribe-modal {
+  width: auto;
+
+  .subscribe-header {
+    display: flex;
+    align-items: center;
+    padding: 20px 20px 0;
+    >span {
+      margin-left: 8px;
+      color: #191919;
+      font-family: HarmonyOS Sans SC;
+      font-weight: medium;
+      font-size: 18px;
+      line-height: 26px;
+    }
+  }
+}
 </style>
+
+<style lang="scss">
+</style>