|
@@ -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>
|