|
@@ -1,5 +1,6 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
+
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
@@ -21,160 +22,175 @@
|
|
|
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" v-if="submitShow">
|
|
|
- <h1>{{ '亚马逊沙盒环境授权' }}</h1>
|
|
|
- <el-form :model="AuthorizationForm" :rules="loginRules" ref="AuthorizationFormRef" label-width="120px">
|
|
|
- <el-form-item label="店铺名称:" prop="storeName">
|
|
|
- <el-input v-model="AuthorizationForm.storeName" placeholder="卖家自定义,以做区分" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="平台账号:" prop="platformAccount">
|
|
|
- <el-input v-model="AuthorizationForm.platformAccount" 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="storeType">
|
|
|
- <el-radio-group v-model="AuthorizationForm.storeType">
|
|
|
- <el-radio label="1">跨境</el-radio>
|
|
|
- <el-radio label="2">本土</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="店铺模式:" prop="storeModel">
|
|
|
- <el-checkbox-group v-model="AuthorizationForm.storeModel">
|
|
|
- <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 class="form-container" v-else>
|
|
|
- <h1>{{ '操作成功!' }}</h1>
|
|
|
- </div>
|
|
|
+<div id="app">
|
|
|
+ <div class="container">
|
|
|
+ <div class="form-container" v-if="submitShow">
|
|
|
+ <h1>{{ '亚马逊沙盒环境授权' }}</h1>
|
|
|
+ <el-form :model="AuthorizationForm" :rules="loginRules" ref="AuthorizationFormRef" label-width="120px">
|
|
|
+ <el-form-item label="店铺名称:" prop="storeName">
|
|
|
+ <el-input v-model="AuthorizationForm.storeName" placeholder="卖家自定义,以做区分" clearable></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="平台账号:" prop="platformAccount">
|
|
|
+ <el-input v-model="AuthorizationForm.platformAccount" 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="storeType">
|
|
|
+ <el-radio-group v-model="AuthorizationForm.storeType">
|
|
|
+ <el-radio label="1">跨境</el-radio>
|
|
|
+ <el-radio label="2">本土</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="店铺模式:" prop="storeModel">
|
|
|
+ <el-checkbox-group v-model="AuthorizationForm.storeModel">
|
|
|
+ <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 class="form-container" v-else>
|
|
|
+ <h1>{{ '操作成功!' }}</h1>
|
|
|
</div>
|
|
|
</div>
|
|
|
+</div>
|
|
|
|
|
|
- <script>
|
|
|
- const { createApp, ref, onMounted } = Vue;
|
|
|
- const { ElMessage } = ElementPlus;
|
|
|
-
|
|
|
- const app = createApp({
|
|
|
- setup() {
|
|
|
- const AuthorizationForm = ref({
|
|
|
- storeName: '',
|
|
|
- platformAccount: '',
|
|
|
- region: 'https://sellercentral.amazon.com',
|
|
|
- site: ['美国', '加拿大', '墨西哥', '巴西'],
|
|
|
- storeType: '1',
|
|
|
- storeModel: ['1'],
|
|
|
- checkAll: false,
|
|
|
- });
|
|
|
- const submitShow = ref(true)
|
|
|
- const regionList = ref([
|
|
|
- { label: '美国', value: 'https://sellercentral.amazon.com', cities: ['美国', '加拿大', '墨西哥', '巴西'] },
|
|
|
- { label: '欧洲', value: 'https://sellercentral-europe.amazon.com ', cities: ['英国', '德国', '法国', '意大利', '西班牙'] },
|
|
|
- { label: '远东', value: 'https://sellercentral.amazon.co.jp', cities: ['日本', '澳大利亚', '新加坡'] },
|
|
|
- ]);
|
|
|
-
|
|
|
- const loading = ref(false);
|
|
|
- const loginRules = ref({
|
|
|
- storeName: [{ required: true, message: '请输入店铺名称', trigger: 'blur' }],
|
|
|
- platformAccount: [{ required: true, message: '请输入平台账号', trigger: 'blur' }],
|
|
|
- region: [{ required: true, message: '请选择区域', trigger: 'change' }],
|
|
|
- site: [{ type: 'array', required: true, message: '请至少选择一个站点', trigger: 'change' }],
|
|
|
- storeType: [{ required: true, message: '请选择店铺类型', trigger: 'change' }],
|
|
|
- storeModel: [{ 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;
|
|
|
- }
|
|
|
- };
|
|
|
+<script>
|
|
|
+ const { createApp, ref, onMounted } = Vue;
|
|
|
+ const { ElMessage } = ElementPlus;
|
|
|
+
|
|
|
+ const app = createApp({
|
|
|
+ setup() {
|
|
|
+ const AuthorizationForm = ref({
|
|
|
+ storeName: '',
|
|
|
+ platformAccount: '',
|
|
|
+ region: 'https://sellercentral.amazon.com',
|
|
|
+ site: ['美国', '加拿大', '墨西哥', '巴西'],
|
|
|
+ storeType: '1',
|
|
|
+ storeModel: ['1'],
|
|
|
+ checkAll: false,
|
|
|
+ companyId: '',
|
|
|
+ });
|
|
|
+ const submitShow = ref(true)
|
|
|
+ const regionList = ref([
|
|
|
+ { label: '美国', value: 'https://sellercentral.amazon.com', cities: ['美国', '加拿大', '墨西哥', '巴西'] },
|
|
|
+ { label: '欧洲', value: 'https://sellercentral-europe.amazon.com ', cities: ['英国', '德国', '法国', '意大利', '西班牙'] },
|
|
|
+ { label: '远东', value: 'https://sellercentral.amazon.co.jp', cities: ['日本', '澳大利亚', '新加坡'] },
|
|
|
+ ]);
|
|
|
+
|
|
|
+ const loading = ref(false);
|
|
|
+ const loginRules = ref({
|
|
|
+ storeName: [{ required: true, message: '请输入店铺名称', trigger: 'blur' }],
|
|
|
+ platformAccount: [{ required: true, message: '请输入平台账号', trigger: 'blur' }],
|
|
|
+ region: [{ required: true, message: '请选择区域', trigger: 'change' }],
|
|
|
+ site: [{ type: 'array', required: true, message: '请至少选择一个站点', trigger: 'change' }],
|
|
|
+ storeType: [{ required: true, message: '请选择店铺类型', trigger: 'change' }],
|
|
|
+ storeModel: [{ type: 'array', required: true, message: '请至少选择一个店铺模式', trigger: 'change' }],
|
|
|
+ });
|
|
|
+ const cityOptions = ref([]);
|
|
|
+ const AuthorizationFormRef = ref(null);
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ handleRegionChange(AuthorizationForm.value.region);
|
|
|
+ AuthorizationForm.value.companyId = getCompanyIdFromUrl();
|
|
|
+ });
|
|
|
+ const getCompanyIdFromUrl = () => {
|
|
|
+ const urlParams = new URLSearchParams(window.location.search);
|
|
|
+
|
|
|
+ return urlParams.get('companyId') || '';
|
|
|
+ };
|
|
|
+ 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 handleCheckAllChange = (val) => {
|
|
|
+ AuthorizationForm.value.site = val ? cityOptions.value : [];
|
|
|
+ };
|
|
|
|
|
|
- const handleCheckedCitiesChange = (value) => {
|
|
|
- const checkedCount = value.length;
|
|
|
- AuthorizationForm.value.checkAll = checkedCount === cityOptions.value.length;
|
|
|
- };
|
|
|
+ const handleCheckedCitiesChange = (value) => {
|
|
|
+ const checkedCount = value.length;
|
|
|
+ AuthorizationForm.value.checkAll = checkedCount === cityOptions.value.length;
|
|
|
+ };
|
|
|
|
|
|
- const submit = async () => {
|
|
|
+ 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(','),
|
|
|
+ stationsIdStr: AuthorizationForm.value.site.join(','),
|
|
|
storeModel: AuthorizationForm.value.storeModel.join(','),
|
|
|
};
|
|
|
- const response = await axios.post('https://apisaas.raycos.net/erp/store/add', formData, {
|
|
|
+ debugger;
|
|
|
+ const response = await axios.post('http://127.0.0.1:18082/erp/amzstore/add', formData, {
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json',
|
|
|
},
|
|
|
});
|
|
|
-
|
|
|
- if (response.data.code==200) {
|
|
|
+ debugger;
|
|
|
+ if (response.data.code == 200) {
|
|
|
const authUrl = generateAuthUrl(formData.region, uuid);
|
|
|
window.open(authUrl, '_blank');
|
|
|
ElMessage.success('提交成功');
|
|
|
- submitShow.value=false
|
|
|
+ submitShow.value = false
|
|
|
} else {
|
|
|
ElMessage.error(response.data.msg || '提交失败');
|
|
|
}
|
|
@@ -192,30 +208,31 @@
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- 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 {
|
|
|
- submitShow,
|
|
|
- AuthorizationForm,
|
|
|
- regionList,
|
|
|
- loading,
|
|
|
- loginRules,
|
|
|
- cityOptions,
|
|
|
- AuthorizationFormRef,
|
|
|
- handleRegionChange,
|
|
|
- handleCheckAllChange,
|
|
|
- handleCheckedCitiesChange,
|
|
|
- submit,
|
|
|
- };
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- app.use(ElementPlus);
|
|
|
- app.mount('#app');
|
|
|
- </script>
|
|
|
+ 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 {
|
|
|
+ submitShow,
|
|
|
+ AuthorizationForm,
|
|
|
+ regionList,
|
|
|
+ loading,
|
|
|
+ loginRules,
|
|
|
+ cityOptions,
|
|
|
+ AuthorizationFormRef,
|
|
|
+ handleRegionChange,
|
|
|
+ handleCheckAllChange,
|
|
|
+ handleCheckedCitiesChange,
|
|
|
+ submit,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ app.use(ElementPlus);
|
|
|
+ app.mount('#app');
|
|
|
+</script>
|
|
|
</body>
|
|
|
+
|
|
|
</html>
|