<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-select v-model="storeForm.poiId" placeholder="请点击右侧查询按钮获取门店信息" style="width: 400px;">
|
<el-option v-for="item in storeList" :key="item" :label="item" :value="item"></el-option>
|
</el-select>
|
<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>
|
import { getDouyinConfigDTO, updateDouyinAppConfigDTO, updateDouyinPoiIdDTO } from '@/api/business/dictData.js'
|
import { poiList } from '@/api/business/douyinVerify.js'
|
export default {
|
name: 'TiktokConfiguration',
|
data () {
|
return {
|
form: {
|
appkey: '',
|
secret: '',
|
accountId: ''
|
},
|
storeForm: {
|
poiId: ''
|
},
|
storeList: []
|
}
|
},
|
created () {
|
this.loadConfig()
|
},
|
methods: {
|
loadConfig () {
|
getDouyinConfigDTO({}).then(res => {
|
if (res) {
|
this.form.appkey = res.clientKey || ''
|
this.form.secret = res.clientSecret || ''
|
this.form.accountId = res.accountId || ''
|
this.storeForm.poiId = res.poiId || ''
|
}
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
},
|
saveStep1 () {
|
if (!this.form.appkey || !this.form.secret || !this.form.accountId) {
|
this.$message.warning('请填写完整信息')
|
return
|
}
|
updateDouyinAppConfigDTO({
|
accountId: this.form.accountId,
|
clientKey: this.form.appkey,
|
clientSecret: this.form.secret
|
}).then(() => {
|
this.$message.success('保存成功')
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
},
|
queryStore () {
|
if (!this.form.appkey || !this.form.secret || !this.form.accountId) {
|
this.$message.warning('请先完成第一步参数配置')
|
return
|
}
|
poiList({}).then(res => {
|
this.storeList = res || []
|
})
|
},
|
saveStep2 () {
|
if (!this.storeForm.poiId) {
|
this.$message.warning('请先选择门店')
|
return
|
}
|
updateDouyinPoiIdDTO(this.storeForm.poiId).then(() => {
|
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>
|
