<template>
|
<div class="tiktok-config">
|
<!-- 第一步 -->
|
<div class="step-section">
|
<div class="step-desc">
|
第一步：请在<el-link type="primary" href="https://developer.open-douyin.com" target="_blank">《抖音开放平台》</el-link>创建应用，并在<el-link type="primary" href="https://open-douyin.com" target="_blank">《抖音来客》</el-link>创建门店、完成服务应用授权，授权成功后在抖音开放平台自建应用的应用管理中获取对应的Appkey和Secret，在抖音来客个人中心获取门店ID（AccountId）
|
</div>
|
<el-form ref="form" :model="form" label-width="100px" class="config-form">
|
<el-form-item label="Appkey" required>
|
<el-input v-model="form.appkey" placeholder="请输入" style="width: 400px;"></el-input>
|
<span class="form-tip">抖音开放平台自建应用的应用管理-应用设置中查看</span>
|
</el-form-item>
|
<el-form-item label="Secret" required>
|
<el-input v-model="form.secret" placeholder="请输入" style="width: 400px;"></el-input>
|
<span class="form-tip">抖音开放平台自建应用的应用管理-应用设置中查看</span>
|
</el-form-item>
|
<el-form-item label="AccountId" required>
|
<el-input v-model="form.accountId" placeholder="请输入" style="width: 400px;"></el-input>
|
<span class="form-tip">抖音开放平台自建应用的应用管理-应用设置中查看</span>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="saveStep1">保存</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<!-- 第二步 -->
|
<div class="step-section">
|
<div class="step-desc">
|
第二步：完成参数配置后，点击查询门店获取门店信息，并完成门店绑定
|
</div>
|
<el-form ref="storeForm" :model="storeForm" label-width="100px" class="config-form">
|
<el-form-item label="门店名称">
|
<el-input v-model="storeForm.storeName" placeholder="请点击右侧查询按钮获取查询门店信息" style="width: 400px;" readonly></el-input>
|
<el-button @click="queryStore" style="margin-left: 10px;">查询门店</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="saveStep2">保存</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'TiktokConfiguration',
|
data () {
|
return {
|
form: {
|
appkey: '',
|
secret: '',
|
accountId: ''
|
},
|
storeForm: {
|
storeName: ''
|
}
|
}
|
},
|
methods: {
|
saveStep1 () {
|
if (!this.form.appkey || !this.form.secret || !this.form.accountId) {
|
this.$message.warning('请填写完整信息')
|
return
|
}
|
this.$message.success('保存成功')
|
},
|
queryStore () {
|
if (!this.form.appkey || !this.form.secret || !this.form.accountId) {
|
this.$message.warning('请先完成第一步参数配置')
|
return
|
}
|
this.$message.info('查询门店中...')
|
},
|
saveStep2 () {
|
if (!this.storeForm.storeName) {
|
this.$message.warning('请先查询门店')
|
return
|
}
|
this.$message.success('保存成功')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.tiktok-config {
|
padding: 20px;
|
background: #fff;
|
}
|
|
.step-section {
|
margin-bottom: 30px;
|
}
|
|
.step-desc {
|
font-size: 14px;
|
color: #606266;
|
margin-bottom: 20px;
|
line-height: 1.8;
|
}
|
|
.config-form {
|
::v-deep .el-form-item__label {
|
font-weight: 500;
|
}
|
}
|
|
.form-tip {
|
font-size: 12px;
|
color: #999;
|
margin-left: 10px;
|
}
|
</style>
|
