H5实名购买顺序与后台批量配置

src/components/business/BatchRealnamePolicyDialog.vue

@@ -0,0 +1,93 @@
+<template>
+  <ElDialog v-model="visible" title="批量修改实名顺序" width="520px" @closed="resetPolicy">
+    <ElForm label-width="110px">
+      <ElFormItem label="已选数量">
+        <span class="selected-count">{{ selectedCount }} {{ assetUnit }}</span>
+      </ElFormItem>
+      <ElFormItem label="实名认证策略">
+        <ElRadioGroup v-model="policy" :disabled="loading">
+          <ElRadio value="none">无需实名</ElRadio>
+          <ElRadio value="before_order">先实名后购买</ElRadio>
+          <ElRadio value="after_order">先购买后实名</ElRadio>
+        </ElRadioGroup>
+      </ElFormItem>
+      <ElAlert
+        v-if="devicePolicyHint"
+        title="实际H5流程由设备策略决定"
+        type="info"
+        :closable="false"
+        show-icon
+      />
+      <ElAlert
+        v-if="errorMessage"
+        :title="errorMessage"
+        type="error"
+        :closable="false"
+        show-icon
+        class="error-alert"
+      />
+    </ElForm>
+
+    <template #footer>
+      <ElButton :disabled="loading" @click="visible = false">取消</ElButton>
+      <ElButton type="primary" :loading="loading" @click="emit('confirm', policy)">
+        确认修改
+      </ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref } from 'vue'
+  import {
+    ElAlert,
+    ElButton,
+    ElDialog,
+    ElForm,
+    ElFormItem,
+    ElRadio,
+    ElRadioGroup
+  } from 'element-plus'
+  import type { AssetRealnamePolicy } from '@/types/api'
+
+  interface Props {
+    modelValue: boolean
+    selectedCount: number
+    assetUnit: string
+    loading?: boolean
+    errorMessage?: string
+    devicePolicyHint?: boolean
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    loading: false,
+    errorMessage: '',
+    devicePolicyHint: false
+  })
+
+  const emit = defineEmits<{
+    'update:modelValue': [value: boolean]
+    confirm: [policy: AssetRealnamePolicy]
+  }>()
+
+  const policy = ref<AssetRealnamePolicy>('none')
+  const visible = computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value)
+  })
+
+  const resetPolicy = () => {
+    policy.value = 'none'
+  }
+</script>
+
+<style scoped lang="scss">
+  .selected-count {
+    font-weight: 600;
+    color: var(--el-color-primary);
+  }
+
+  .error-alert {
+    margin-top: 12px;
+  }
+</style>