订阅弹窗

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

@@ -2,17 +2,21 @@
   <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>
+      <d-form ref="formRef" :data="formData" :rules="rules">
+        <d-form-item field="subscribeType" label="通知方式">
+          <d-radio-group direction="row" v-model="formData.subscribeType" @change="typeChange">
+            <d-radio value="0">短信</d-radio>
+            <d-radio value="1">邮件</d-radio>
+            <d-radio value="2">站内通知</d-radio>
+          </d-radio-group>
+        </d-form-item>
+        <d-form-item v-if="formData.subscribeType && formData.subscribeType !== '2'" field="subscribeText" :label="textLabel">
+          <d-input v-model="formData.subscribeText" />
+        </d-form-item>
+      </d-form>
     </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="confirm" variant="solid" class="mr-2">确定</d-button>
       <d-button @click="$emit('close')">取消</d-button>
     </div>
   </div>
@@ -23,18 +27,30 @@ 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 formRef = ref(null);
+const formData = ref({
+  subscribeType: '',
+  subscribeText: '',
+});
+const rules = {
+  subscribeType: [{ required: true, message: '请选择', trigger: 'change' }],
+  subscribeText: [{ required: true, message: '不能为空', trigger: 'blur' }],
+};
+const textLabel = ref('');
 const confirm = () => {
-  if (!subscribeType.value) {
-    isError.value = true;
-    return;
+  (formRef?.value as any)?.validate((isValid: boolean, invalidFields: any) => {
+    if (!isValid) {
+      return;
+    }
+    emit('close');
+  });
+};
+const typeChange = () => {
+  if (formData.value.subscribeType === '0') {
+    textLabel.value = '手机号';
+  } else if (formData.value.subscribeType === '1') {
+    textLabel.value = '邮箱地址';
   }
-  isError.value = false;
-  emit('close');
 };
 </script>
 
@@ -54,14 +70,10 @@ const confirm = () => {
     align-items: center;
     border-radius: 4px;
     background: #F2F5FC;
-    padding: 20px;
+    padding: 20px 32px 0;
 
-    >span {
-      margin-right: 20px;
-      color: #808080;
-      font-family: HarmonyOS Sans SC;
-      font-weight: regular;
-      font-size: 14px;
+    form {
+      width: 100%;
     }
   }