jiabin преди 10 месеца
родител
ревизия
baf3962142
променени са 1 файла, в които са добавени 217 реда и са изтрити 0 реда
  1. 217 0
      raycos_datacenter_api/src/main/resources/static/index.html

+ 217 - 0
raycos_datacenter_api/src/main/resources/static/index.html

@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Amazon 授权</title>
+    <!-- Element Plus CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
+    <!-- Vue 3 -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <!-- Element Plus -->
+    <script src="https://unpkg.com/element-plus"></script>
+    <!-- Axios -->
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <!-- UUID -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f0f2f5;
+        }
+        .container {
+            max-width: 870px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .form-container {
+            background-color: white;
+            border-radius: 8px;
+            padding: 40px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            text-align: center;
+            color: #409EFF;
+            margin-bottom: 30px;
+        }
+        .el-form-item {
+            margin-bottom: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <div class="container">
+            <div class="form-container">
+                <h1>{{ '授权-沙盒' }}</h1>
+                <el-form :model="AuthorizationForm" :rules="loginRules" ref="AuthorizationFormRef" label-width="120px">
+                    <el-form-item label="店铺名称:" prop="store_name">
+                        <el-input v-model="AuthorizationForm.store_name" placeholder="卖家自定义,以做区分" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="平台账号:" prop="platform_account">
+                        <el-input v-model="AuthorizationForm.platform_account" placeholder="卖家平台上的账号" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="区域:" prop="region">
+                        <el-select v-model="AuthorizationForm.region" placeholder="请选择区域" @change="handleRegionChange">
+                            <el-option v-for="(item, index) in regionList" :key="index" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="站点:" prop="site">
+                        <el-checkbox v-model="AuthorizationForm.checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+                        <div style="margin: 15px 0"></div>
+                        <el-checkbox-group v-model="AuthorizationForm.site" @change="handleCheckedCitiesChange">
+                            <el-checkbox v-for="city in cityOptions" :label="city" :key="city">{{ city }}</el-checkbox>
+                        </el-checkbox-group>
+                    </el-form-item>
+                    <el-form-item label="店铺类型:" prop="store_type">
+                        <el-radio-group v-model="AuthorizationForm.store_type">
+                            <el-radio label="1">跨境</el-radio>
+                            <el-radio label="2">本土</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="店铺模式:" prop="store_model">
+                        <el-checkbox-group v-model="AuthorizationForm.store_model">
+                            <el-checkbox label="1">FBM</el-checkbox>
+                            <el-checkbox label="2">FBA</el-checkbox>
+                        </el-checkbox-group>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" :loading="loading" @click="submit()">确定</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const { createApp, ref, onMounted } = Vue;
+        const { ElMessage } = ElementPlus;
+
+        const app = createApp({
+            setup() {
+                const AuthorizationForm = ref({
+                    store_name: '',
+                    platform_account: '',
+                    region: 'https://sellingpartnerapi-na.amazon.com',
+                    site: ['美国', '加拿大', '墨西哥', '巴西'],
+                    store_type: '1',
+                    store_model: ['1'],
+                    checkAll: false,
+                });
+
+                const regionList = ref([
+                    { label: '北美', value: 'https://sellingpartnerapi-na.amazon.com', cities: ['美国', '加拿大', '墨西哥', '巴西'] },
+                    { label: '欧洲', value: 'https://sellingpartnerapi-eu.amazon.com', cities: ['英国', '德国', '法国', '意大利', '西班牙'] },
+                    { label: '远东', value: 'https://sellingpartnerapi-fe.amazon.com', cities: ['日本', '澳大利亚', '新加坡'] },
+                ]);
+
+                const loading = ref(false);
+                const loginRules = ref({
+                    store_name: [{ required: true, message: '请输入店铺名称', trigger: 'blur' }],
+                    platform_account: [{ required: true, message: '请输入平台账号', trigger: 'blur' }],
+                    region: [{ required: true, message: '请选择区域', trigger: 'change' }],
+                    site: [{ type: 'array', required: true, message: '请至少选择一个站点', trigger: 'change' }],
+                    store_type: [{ required: true, message: '请选择店铺类型', trigger: 'change' }],
+                    store_model: [{ type: 'array', required: true, message: '请至少选择一个店铺模式', trigger: 'change' }],
+                });
+                const cityOptions = ref([]);
+                const AuthorizationFormRef = ref(null);
+
+                onMounted(() => {
+                    handleRegionChange(AuthorizationForm.value.region);
+                });
+
+                const handleRegionChange = (value) => {
+                    const selectedRegion = regionList.value.find((region) => region.value === value);
+                    if (selectedRegion) {
+                        cityOptions.value = selectedRegion.cities;
+                        AuthorizationForm.value.site = [...selectedRegion.cities];
+                        AuthorizationForm.value.checkAll = true;
+                    } else {
+                        cityOptions.value = [];
+                        AuthorizationForm.value.site = [];
+                        AuthorizationForm.value.checkAll = false;
+                    }
+                };
+
+                const handleCheckAllChange = (val) => {
+                    AuthorizationForm.value.site = val ? cityOptions.value : [];
+                };
+
+                const handleCheckedCitiesChange = (value) => {
+                    const checkedCount = value.length;
+                    AuthorizationForm.value.checkAll = checkedCount === cityOptions.value.length;
+                };
+
+                const submit = async () => {
+                if (!AuthorizationFormRef.value) return;
+
+                try {
+                    await AuthorizationFormRef.value.validate();
+                    
+                    loading.value = true;
+                    const uuid = self.crypto.randomUUID();
+
+                    const formData = {
+                        ...AuthorizationForm.value,
+                        uuid: uuid,
+                        site: AuthorizationForm.value.site.join(','),
+                        store_model: AuthorizationForm.value.store_model.join(','),
+                    };
+
+                    const response = await axios.post('https://apisaas.raycos.net/erp/store/add', formData, {
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    });
+
+                    if (response.data.success) {
+                        const authUrl = generateAuthUrl(formData.region, uuid);
+                        window.open(authUrl, '_blank');
+                        ElMessage.success('提交成功');
+                    } else {
+                        ElMessage.error(response.data.message || '提交失败');
+                    }
+                } catch (error) {
+                    console.error('Authorization error:', error);
+                    if (error.errors) {
+                        // 表单验证错误
+                        const errorMessages = Object.values(error.errors).flat().join(', ');
+                        ElMessage.error(`请填写所有必填字段: ${errorMessages}`);
+                    } else {
+                        ElMessage.error('授权过程中发生错误');
+                    }
+                } finally {
+                    loading.value = false;
+                }
+            };
+
+                const generateAuthUrl = (region, uuid) => {
+                    const baseUrl = region;
+                    const applicationId = 'amzn1.sp.solution.b50697a2-e3d3-47e0-8de3-9ae03fbdcd9b';
+                    return `${baseUrl}/apps/authorize/consent?application_id=${applicationId}&state=${uuid}&version=beta`;
+                };
+
+                return {
+                    AuthorizationForm,
+                    regionList,
+                    loading,
+                    loginRules,
+                    cityOptions,
+                    AuthorizationFormRef,
+                    handleRegionChange,
+                    handleCheckAllChange,
+                    handleCheckedCitiesChange,
+                    submit,
+                };
+            }
+        });
+
+        app.use(ElementPlus);
+        app.mount('#app');
+    </script>
+</body>
+</html>