index.html 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Amazon 授权</title>
  7. <!-- Element Plus CSS -->
  8. <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  9. <!-- Vue 3 -->
  10. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  11. <!-- Element Plus -->
  12. <script src="https://unpkg.com/element-plus"></script>
  13. <!-- Axios -->
  14. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  15. <!-- UUID -->
  16. <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script>
  17. <style>
  18. body {
  19. font-family: Arial, sans-serif;
  20. margin: 0;
  21. padding: 0;
  22. background-color: #f0f2f5;
  23. }
  24. .container {
  25. max-width: 870px;
  26. margin: 0 auto;
  27. padding: 20px;
  28. }
  29. .form-container {
  30. background-color: white;
  31. border-radius: 8px;
  32. padding: 40px;
  33. box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  34. }
  35. h1 {
  36. text-align: center;
  37. color: #409EFF;
  38. margin-bottom: 30px;
  39. }
  40. .el-form-item {
  41. margin-bottom: 20px;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div id="app">
  47. <div class="container">
  48. <div class="form-container">
  49. <h1>{{ '授权-沙盒' }}</h1>
  50. <el-form :model="AuthorizationForm" :rules="loginRules" ref="AuthorizationFormRef" label-width="120px">
  51. <el-form-item label="店铺名称:" prop="store_name">
  52. <el-input v-model="AuthorizationForm.store_name" placeholder="卖家自定义,以做区分" clearable></el-input>
  53. </el-form-item>
  54. <el-form-item label="平台账号:" prop="platform_account">
  55. <el-input v-model="AuthorizationForm.platform_account" placeholder="卖家平台上的账号" clearable></el-input>
  56. </el-form-item>
  57. <el-form-item label="区域:" prop="region">
  58. <el-select v-model="AuthorizationForm.region" placeholder="请选择区域" @change="handleRegionChange">
  59. <el-option v-for="(item, index) in regionList" :key="index" :label="item.label" :value="item.value"></el-option>
  60. </el-select>
  61. </el-form-item>
  62. <el-form-item label="站点:" prop="site">
  63. <el-checkbox v-model="AuthorizationForm.checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  64. <div style="margin: 15px 0"></div>
  65. <el-checkbox-group v-model="AuthorizationForm.site" @change="handleCheckedCitiesChange">
  66. <el-checkbox v-for="city in cityOptions" :label="city" :key="city">{{ city }}</el-checkbox>
  67. </el-checkbox-group>
  68. </el-form-item>
  69. <el-form-item label="店铺类型:" prop="store_type">
  70. <el-radio-group v-model="AuthorizationForm.store_type">
  71. <el-radio label="1">跨境</el-radio>
  72. <el-radio label="2">本土</el-radio>
  73. </el-radio-group>
  74. </el-form-item>
  75. <el-form-item label="店铺模式:" prop="store_model">
  76. <el-checkbox-group v-model="AuthorizationForm.store_model">
  77. <el-checkbox label="1">FBM</el-checkbox>
  78. <el-checkbox label="2">FBA</el-checkbox>
  79. </el-checkbox-group>
  80. </el-form-item>
  81. <el-form-item>
  82. <el-button type="primary" :loading="loading" @click="submit()">确定</el-button>
  83. </el-form-item>
  84. </el-form>
  85. </div>
  86. </div>
  87. </div>
  88. <script>
  89. const { createApp, ref, onMounted } = Vue;
  90. const { ElMessage } = ElementPlus;
  91. const app = createApp({
  92. setup() {
  93. const AuthorizationForm = ref({
  94. store_name: '',
  95. platform_account: '',
  96. region: 'https://sellingpartnerapi-na.amazon.com',
  97. site: ['美国', '加拿大', '墨西哥', '巴西'],
  98. store_type: '1',
  99. store_model: ['1'],
  100. checkAll: false,
  101. });
  102. const regionList = ref([
  103. { label: '北美', value: 'https://sellingpartnerapi-na.amazon.com', cities: ['美国', '加拿大', '墨西哥', '巴西'] },
  104. { label: '欧洲', value: 'https://sellingpartnerapi-eu.amazon.com', cities: ['英国', '德国', '法国', '意大利', '西班牙'] },
  105. { label: '远东', value: 'https://sellingpartnerapi-fe.amazon.com', cities: ['日本', '澳大利亚', '新加坡'] },
  106. ]);
  107. const loading = ref(false);
  108. const loginRules = ref({
  109. store_name: [{ required: true, message: '请输入店铺名称', trigger: 'blur' }],
  110. platform_account: [{ required: true, message: '请输入平台账号', trigger: 'blur' }],
  111. region: [{ required: true, message: '请选择区域', trigger: 'change' }],
  112. site: [{ type: 'array', required: true, message: '请至少选择一个站点', trigger: 'change' }],
  113. store_type: [{ required: true, message: '请选择店铺类型', trigger: 'change' }],
  114. store_model: [{ type: 'array', required: true, message: '请至少选择一个店铺模式', trigger: 'change' }],
  115. });
  116. const cityOptions = ref([]);
  117. const AuthorizationFormRef = ref(null);
  118. onMounted(() => {
  119. handleRegionChange(AuthorizationForm.value.region);
  120. });
  121. const handleRegionChange = (value) => {
  122. const selectedRegion = regionList.value.find((region) => region.value === value);
  123. if (selectedRegion) {
  124. cityOptions.value = selectedRegion.cities;
  125. AuthorizationForm.value.site = [...selectedRegion.cities];
  126. AuthorizationForm.value.checkAll = true;
  127. } else {
  128. cityOptions.value = [];
  129. AuthorizationForm.value.site = [];
  130. AuthorizationForm.value.checkAll = false;
  131. }
  132. };
  133. const handleCheckAllChange = (val) => {
  134. AuthorizationForm.value.site = val ? cityOptions.value : [];
  135. };
  136. const handleCheckedCitiesChange = (value) => {
  137. const checkedCount = value.length;
  138. AuthorizationForm.value.checkAll = checkedCount === cityOptions.value.length;
  139. };
  140. const submit = async () => {
  141. if (!AuthorizationFormRef.value) return;
  142. try {
  143. await AuthorizationFormRef.value.validate();
  144. loading.value = true;
  145. const uuid = self.crypto.randomUUID();
  146. const formData = {
  147. ...AuthorizationForm.value,
  148. uuid: uuid,
  149. site: AuthorizationForm.value.site.join(','),
  150. store_model: AuthorizationForm.value.store_model.join(','),
  151. };
  152. const response = await axios.post('https://apisaas.raycos.net/erp/store/add', formData, {
  153. headers: {
  154. 'Content-Type': 'application/json',
  155. },
  156. });
  157. if (response.data.success) {
  158. const authUrl = generateAuthUrl(formData.region, uuid);
  159. window.open(authUrl, '_blank');
  160. ElMessage.success('提交成功');
  161. } else {
  162. ElMessage.error(response.data.message || '提交失败');
  163. }
  164. } catch (error) {
  165. console.error('Authorization error:', error);
  166. if (error.errors) {
  167. // 表单验证错误
  168. const errorMessages = Object.values(error.errors).flat().join(', ');
  169. ElMessage.error(`请填写所有必填字段: ${errorMessages}`);
  170. } else {
  171. ElMessage.error('授权过程中发生错误');
  172. }
  173. } finally {
  174. loading.value = false;
  175. }
  176. };
  177. const generateAuthUrl = (region, uuid) => {
  178. const baseUrl = region;
  179. const applicationId = 'amzn1.sp.solution.b50697a2-e3d3-47e0-8de3-9ae03fbdcd9b';
  180. return `${baseUrl}/apps/authorize/consent?application_id=${applicationId}&state=${uuid}&version=beta`;
  181. };
  182. return {
  183. AuthorizationForm,
  184. regionList,
  185. loading,
  186. loginRules,
  187. cityOptions,
  188. AuthorizationFormRef,
  189. handleRegionChange,
  190. handleCheckAllChange,
  191. handleCheckedCitiesChange,
  192. submit,
  193. };
  194. }
  195. });
  196. app.use(ElementPlus);
  197. app.mount('#app');
  198. </script>
  199. </body>
  200. </html>