123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217 |
- <!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>
|