135 lines
3.9 KiB
Vue
135 lines
3.9 KiB
Vue
<template>
|
||
<ContentWrap>
|
||
<span>客服配置</span>
|
||
<el-divider />
|
||
<div style="height:380px;width:650px;padding: 20px;">
|
||
<span>客服类型：</span>
|
||
<span>
|
||
<el-radio-group v-model="radios" @change="handleRadioChange">
|
||
<el-radio value="1" size="large">系统客服</el-radio>
|
||
<el-radio value="2" size="large">拨打电话</el-radio>
|
||
<el-radio value="3" size="large">跳转链接</el-radio>
|
||
</el-radio-group>
|
||
</span>
|
||
<p style="margin-left: 80px;color:#bcbaba;font-size:13px">系统客服：点击联系客服使用系统的自带客服；拨打电话：点击联系客服拨打客服电话；跳转链接：跳转外部链接联系客服</p>
|
||
|
||
<div v-show="radios == 1">
|
||
<span style="margin-top: 60px; vertical-align: middle;">客服反馈：</span>
|
||
<span style="vertical-align: middle;">
|
||
<el-input
|
||
v-model="formData.feedback"
|
||
placeholder="请输入客服反馈"
|
||
style="width:550px"
|
||
:rows="5"
|
||
type="textarea"
|
||
|
||
/>
|
||
</span>
|
||
<p style="margin-left: 80px;color:#bcbaba;font-size:13px">暂无客服在线是，联系客服跳转的客服反馈页面的显示文字</p>
|
||
</div>
|
||
|
||
<div v-show="radios == 2">
|
||
<span style="margin-top: 60px; vertical-align: middle;">客服电话：</span>
|
||
<span style="vertical-align: middle;">
|
||
<el-input
|
||
v-model="formData.phone"
|
||
placeholder="请输入客服电话"
|
||
style="width:550px"
|
||
/>
|
||
</span>
|
||
<p style="margin-left: 80px;color:#bcbaba;font-size:13px">客服类型选择拨打电话时，用户点击联系客服的联系电话</p>
|
||
</div>
|
||
|
||
<div v-show="radios == 3">
|
||
<span style="margin-top: 60px; vertical-align: middle;">客服链接：</span>
|
||
<span style="vertical-align: middle;">
|
||
<el-input
|
||
v-model="formData.link"
|
||
placeholder="请输入客服链接"
|
||
style="width:550px"
|
||
/>
|
||
</span>
|
||
<p style="margin-left: 80px;color:#bcbaba;font-size:13px">客服类型选择跳转链接时，跳转的链接地址</p>
|
||
|
||
<span style="margin-top: 60px; vertical-align: middle;"> 企业ID：</span>
|
||
<span style="vertical-align: middle;">
|
||
<el-input
|
||
v-model="formData.enterpriseID"
|
||
placeholder="请输入企业ID"
|
||
style="width:550px"
|
||
/>
|
||
</span>
|
||
<p style="margin-left: 80px;color:#bcbaba;font-size:13px">如果客服链接填写企业微信客服，小程序需要跳转企业微信客服的话需要配置此项，并且在小程序客服中绑定企业ID</p>
|
||
|
||
</div>
|
||
|
||
<el-button style="margin-left: 80px;" type="primary" @click="submit">提交</el-button>
|
||
|
||
</div>
|
||
</ContentWrap>
|
||
|
||
|
||
|
||
|
||
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
|
||
import { ConfigurationApi, ConfigurationVO } from '@/api/mall/promotion/configuration'
|
||
|
||
|
||
const message = useMessage() // 消息弹窗
|
||
const { t } = useI18n() // 国际化
|
||
|
||
const loading = ref(true) // 列表的加载中
|
||
|
||
const radios = ref('1')
|
||
|
||
const formData = ref({
|
||
id: undefined,
|
||
type: undefined,
|
||
feedback: undefined,
|
||
phone: undefined,
|
||
link: undefined,
|
||
enterpriseID: undefined
|
||
})
|
||
|
||
|
||
/** 查询列表 */
|
||
const getList = async () => {
|
||
loading.value = true
|
||
try {
|
||
|
||
formData.value = await ConfigurationApi.getConfiguration(Number(radios.value))
|
||
// radios.value = formData.value.id
|
||
console.log('11111',radios.value)
|
||
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
|
||
const handleRadioChange = async (value) =>{
|
||
formData.value = await ConfigurationApi.getConfiguration(value)
|
||
|
||
|
||
console.log("选中的值是: ", radios.value); // 输出选中的值
|
||
|
||
}
|
||
|
||
|
||
const submit = async () => {
|
||
const data = formData.value as unknown as ConfigurationVO
|
||
await ConfigurationApi.updateConfiguration(data)
|
||
message.success('提交成功')
|
||
}
|
||
|
||
|
||
|
||
/** 初始化 **/
|
||
onMounted(() => {
|
||
getList()
|
||
})
|
||
</script> |