Situation-Awareness-Platform-Frontend/src/views/Jyh/Version/Detail/SubscriptionModal.vue

<template>
  <div class="subscribe-container">
    <div class="subscribe-tip mb-3">当您订阅的软件有漏洞预警通知时，将以应用号的方式通知。可在首页查看或取消订阅！</div>
    <div class="subscribe-form">
      <d-form ref="formRef" :data="formData" :rules="rules">
        <d-form-item field="subscribeType" label="通知方式">
          <d-radio-group direction="row" v-model="formData.subscribeType">
            <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>
    </div>
    <div class="subscribe-operation mt-5">
      <d-button @click="confirm" variant="solid" class="mr-2">确定</d-button>
      <d-button @click="$emit('close')">取消</d-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { subscribeSoftware } from '@/api/jyh';
import { computed, ref } from 'vue';
import { Message } from 'vue-devui';

const props = defineProps(['softwareData']);
const emit = defineEmits(['close']);
const formRef = ref(null);
const formData = ref({
  subscribeType: '',
});
const rules = {
  subscribeType: [{ required: true, message: '请选择', trigger: 'change' }],
};
const sendSubscribe = async () => {
  const data = await subscribeSoftware({
    softwareId: props.softwareData.id,
    status: '1',
    alertType: {
      mobileSwitch: formData.value.subscribeType === '0',
      emailSwitch: formData.value.subscribeType === '1',
      webSwitch: formData.value.subscribeType === '2',
    }
  }).catch(err => {
    Message({
      message: err.error,
      type: 'error'
    })
  });
  if (!data?.data?.data?.data) {
    Message({
      message: data?.data?.data?.msg,
      type: 'error'
    })
  } else {
    emit('close');
  }
}
const confirm = () => {
  (formRef?.value as any)?.validate((isValid: boolean, invalidFields: any) => {
    if (!isValid) {
      return;
    }
    sendSubscribe();
  });
};
</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 32px 0;

    form {
      width: 100%;
    }
  }

  .subscribe-operation {
    text-align: center;
  }
}
</style>