318 lines
7.2 KiB
Plaintext
318 lines
7.2 KiB
Plaintext
<template>
|
|
<view class="admin-kefu-config">
|
|
<view class="config-container border-shadow">
|
|
<!-- 页头选项卡 -->
|
|
<view class="config-tabs">
|
|
<view class="tab-item active">
|
|
<text class="tab-txt">客服配置</text>
|
|
<view class="tab-line"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="config-content">
|
|
<!-- 客服类型 -->
|
|
<view class="form-item">
|
|
<view class="label-box">
|
|
<text class="label-txt">客服类型:</text>
|
|
</view>
|
|
<view class="input-box flex-row">
|
|
<view class="radio-group">
|
|
<view class="radio-item" @click="configType = 'system'">
|
|
<view :class="['radio-circle', configType === 'system' ? 'checked' : '']">
|
|
<view v-if="configType === 'system'" class="radio-inner"></view>
|
|
</view>
|
|
<text class="radio-label">系统客服</text>
|
|
</view>
|
|
<view class="radio-item" @click="configType = 'phone'">
|
|
<view :class="['radio-circle', configType === 'phone' ? 'checked' : '']">
|
|
<view v-if="configType === 'phone'" class="radio-inner"></view>
|
|
</view>
|
|
<text class="radio-label">拨打电话</text>
|
|
</view>
|
|
<view class="radio-item" @click="configType = 'link'">
|
|
<view :class="['radio-circle', configType === 'link' ? 'checked' : '']">
|
|
<view v-if="configType === 'link'" class="radio-inner"></view>
|
|
</view>
|
|
<text class="radio-label">跳转链接</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提示信息 -->
|
|
<view class="form-item no-label">
|
|
<view class="tip-box">
|
|
<text class="tip-txt">系统客服：点击联系客服使用系统的自带客服；拨打电话：点击联系客服拨打客服电话；跳转链接：跳转外部链接联系客服</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 动态显示内容 -->
|
|
<template v-if="configType === 'system'">
|
|
<view class="form-item align-start">
|
|
<view class="label-box pt-10">
|
|
<text class="label-txt">客服反馈:</text>
|
|
</view>
|
|
<view class="input-box">
|
|
<textarea
|
|
class="textarea-base"
|
|
v-model="feedbackText"
|
|
placeholder="请输入客服反馈内容"
|
|
/>
|
|
<text class="input-tip">暂无客服在线是，联系客服跳转的客服反馈页面的显示文字</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<template v-else-if="configType === 'phone'">
|
|
<view class="form-item">
|
|
<view class="label-box">
|
|
<text class="label-txt">客服电话:</text>
|
|
</view>
|
|
<view class="input-box">
|
|
<input class="input-base" v-model="phoneNumber" placeholder="请输入客服电话" />
|
|
<text class="input-tip">客服类型选择不打电话是，用户点击联系客服的联系电话</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<template v-else-if="configType === 'link'">
|
|
<view class="form-item">
|
|
<view class="label-box">
|
|
<text class="label-txt">跳转链接:</text>
|
|
</view>
|
|
<view class="input-box">
|
|
<input class="input-base" v-model="linkUrl" placeholder="请输入外部链接地址" />
|
|
<text class="input-tip">客服类型选择跳转链接时，用户点击联系客服跳转的外部链接</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 提交按钮 -->
|
|
<view class="form-item no-label">
|
|
<view class="btn-submit" @click="handleSubmit">
|
|
<text class="submit-txt">提交</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref } from 'vue'
|
|
|
|
const configType = ref('system') // system, phone, link
|
|
const feedbackText = ref('尊敬的用户，客服当前不在线，有问题请留言，我们会第一时间进行处理！！！')
|
|
const phoneNumber = ref('4008888794')
|
|
const linkUrl = ref('')
|
|
|
|
const handleSubmit = () => {
|
|
console.log('提交配置', {
|
|
type: configType.value,
|
|
feedback: feedbackText.value,
|
|
phone: phoneNumber.value,
|
|
link: linkUrl.value
|
|
})
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.admin-kefu-config {
|
|
padding: 20px;
|
|
background-color: #f5f7fa;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.border-shadow {
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.config-container {
|
|
min-height: 500px;
|
|
}
|
|
|
|
/* Tabs */
|
|
.config-tabs {
|
|
height: 54px;
|
|
padding: 0 20px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.tab-item {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 10px;
|
|
position: relative;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tab-txt {
|
|
font-size: 14px;
|
|
color: #2d8cf0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tab-line {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background-color: #2d8cf0;
|
|
}
|
|
|
|
/* Content */
|
|
.config-content {
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.form-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 24px;
|
|
align-items: center;
|
|
}
|
|
|
|
.align-start {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.no-label {
|
|
padding-left: 140px;
|
|
}
|
|
|
|
.label-box {
|
|
width: 140px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.pt-10 {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.label-txt {
|
|
font-size: 14px;
|
|
color: #606266;
|
|
}
|
|
|
|
.input-box {
|
|
flex: 1;
|
|
max-width: 600px;
|
|
}
|
|
|
|
.flex-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
/* Radio Group */
|
|
.radio-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.radio-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-right: 30px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.radio-circle {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.radio-circle.checked {
|
|
border-color: #2d8cf0;
|
|
}
|
|
|
|
.radio-inner {
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: #2d8cf0;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.radio-label {
|
|
font-size: 14px;
|
|
color: #606266;
|
|
}
|
|
|
|
/* Tips */
|
|
.tip-box {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.tip-txt {
|
|
font-size: 12px;
|
|
color: #c0c4cc;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.input-tip {
|
|
font-size: 12px;
|
|
color: #c0c4cc;
|
|
margin-top: 10px;
|
|
display: block;
|
|
}
|
|
|
|
/* Inputs */
|
|
.input-base {
|
|
width: 100%;
|
|
height: 38px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
padding: 0 15px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.textarea-base {
|
|
width: 100%;
|
|
height: 150px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
padding: 10px 15px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Button */
|
|
.btn-submit {
|
|
width: 64px;
|
|
height: 34px;
|
|
background-color: #2d8cf0;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.submit-txt {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|