You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
508 lines
21 KiB
508 lines
21 KiB
<template>
|
|
<div class="site-personal-wrap min-flex-right">
|
|
<div class="siteMessage flex-common" id="siteMessage4">
|
|
<h3>网页模板</h3>
|
|
<el-form ref="formRef">
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<div class="tem-home">
|
|
<img class="tem-home-top" src="@/assets/register/tem-img-normal.png" alt="">
|
|
<div class="tem-home-bottom">
|
|
<b>经典深蓝模板（默认）</b>
|
|
<div>
|
|
<div class="tem-look" @click="lookTemImg">
|
|
<img src="@/assets/register/look-tem.svg" alt="">
|
|
预览
|
|
</div>
|
|
<div @click="editTemImg">
|
|
<img src="@/assets/register/edit-tem.svg" alt="">
|
|
修改
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-line borderNone"></div>
|
|
<div class="flex-right"></div>
|
|
</div>
|
|
</el-form>
|
|
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('siteForm')" />
|
|
</div>
|
|
<div class="siteMessage flex-common mt12" id="siteMessage5">
|
|
<h3>在线客服</h3>
|
|
<el-form ref="formRef">
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<p class="flex siteMessage5_desc"> <img src="@/assets/site/info_filled.svg" alt="">
|
|
{{ textObj[activeName] }}</p>
|
|
<el-tab-pane label="网站客服" name="1">
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<p class="flex-left-desc">旺旺客服</p>
|
|
<GuipInput ref="GuipInput" class="mt12 mb24" width="98%"
|
|
v-model="personalForm8.checkNum" placeholder="请填写账号">
|
|
</GuipInput>
|
|
<p class="flex-left-desc">QQ客服</p>
|
|
<div class="qqCode-wrap">
|
|
<el-upload class="avatar-uploader mt12" accept=".jpg,.png"
|
|
action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
|
|
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
|
<GuipButton type="ignore" :btnstyle="{width:'133px'}">
|
|
<!-- <img src="@/assets/site/uploadIcon.svg" alt="" > -->
|
|
<div class="bgImg"></div>
|
|
上传二维码</GuipButton>
|
|
</el-upload>
|
|
<p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p>
|
|
</div>
|
|
</div>
|
|
<div class="flex-line"></div>
|
|
<div class="flex-right">
|
|
<p class="flex-left-desc">微信客服</p>
|
|
<div class="flex mt12">
|
|
<img v-if="imageUrl1" :src="imageUrl1" class="kefuImg">
|
|
<img e-else src="@/assets/site/kefuTem.png" alt="" class="kefuImg">
|
|
<div class="qqCode-wrap right">
|
|
<el-upload class="avatar-uploader" accept=".jpg,.png"
|
|
action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
|
|
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
|
<GuipButton type="ignore" :btnstyle="{width:'118px'}">
|
|
<!-- <img src="@/assets/site/uploadIcon.svg" alt="" > -->
|
|
<div class="bgImg"></div>
|
|
重新上传
|
|
</GuipButton>
|
|
</el-upload>
|
|
<p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="报告页客服" name="2">
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<p class="flex-left-desc">微信客服</p>
|
|
<div class="flex mt12">
|
|
<img v-if="imageUrl2" :src="imageUrl2" class="kefuImg">
|
|
<img e-else src="@/assets/site/kefuTem.png" alt="" class="kefuImg">
|
|
<div class="qqCode-wrap right">
|
|
<el-upload class="avatar-uploader" accept=".jpg,.png"
|
|
action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
|
|
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
|
<GuipButton type="ignore" :btnstyle="{width:'118px'}">
|
|
<!-- <img src="@/assets/site/uploadIcon.svg" alt="" > -->
|
|
<div class="bgImg"></div>
|
|
重新上传
|
|
</GuipButton>
|
|
</el-upload>
|
|
<p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-line borderNone"></div>
|
|
<div class="flex-right"></div>
|
|
</div>
|
|
|
|
</el-tab-pane>
|
|
<el-tab-pane label="支付账单客服" name="3">
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<p class="flex-left-desc">客服微信号</p>
|
|
<GuipInput ref="GuipInput" class="mt12 mb24" width="100%"
|
|
v-model="personalForm8.checkNum1" placeholder="请填写">
|
|
</GuipInput>
|
|
</div>
|
|
<div class="flex-line borderNone"></div>
|
|
<div class="flex-right"></div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
|
|
|
|
</el-form>
|
|
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('siteForm')" />
|
|
</div>
|
|
<div class="siteMessage flex-common mt12" id="siteMessage6">
|
|
<h3>功能显隐</h3>
|
|
<el-form :model="personalForm3" ref="formRef">
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<p class="flex-left-desc">价格显隐</p>
|
|
<div class="left-pay-list mb24">
|
|
<div class="left-pay-item ">
|
|
<div class="flex-between">
|
|
<span class="flex">服务列表页价格
|
|
<GuipToolTip content="----居中----">
|
|
<img style="margin-left: 13px;" src="@/assets/site/form_qua_ic.svg" alt="">
|
|
</GuipToolTip>
|
|
</span>
|
|
<GuipSwitch :modelValue="personalForm3.weixinFlag1" activeText="显示"
|
|
inactiveText="隐藏" @change="onSwitchChange">
|
|
</GuipSwitch>
|
|
</div>
|
|
</div>
|
|
<div class="left-pay-item ">
|
|
<div class="flex-between">
|
|
<span class="flex">服务提交页价格
|
|
<GuipToolTip content="----居中----">
|
|
<img style="margin-left: 13px;" src="@/assets/site/form_qua_ic.svg" alt="">
|
|
</GuipToolTip>
|
|
</span>
|
|
<GuipSwitch :modelValue="personalForm3.weixinFlag2" activeText="显示"
|
|
inactiveText="隐藏" @change="onSwitchChange">
|
|
</GuipSwitch>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-line"></div>
|
|
<div class="flex-right">
|
|
<p class="flex-left-desc">报告与真伪查询</p>
|
|
<div class="left-pay-list mb24">
|
|
<div class="left-pay-item ">
|
|
<div class="flex-between">
|
|
<span class="flex">服务列表页价格
|
|
<GuipToolTip content="----居中----">
|
|
<img style="margin-left: 13px;" src="@/assets/site/form_qua_ic.svg" alt="">
|
|
</GuipToolTip>
|
|
</span>
|
|
<GuipSwitch :modelValue="personalForm3.weixinFlag3" activeText="显示"
|
|
inactiveText="隐藏" @change="onSwitchChange">
|
|
</GuipSwitch>
|
|
</div>
|
|
</div>
|
|
<div class="left-pay-item ">
|
|
<div class="flex-between">
|
|
<span class="flex">服务提交页价格
|
|
<GuipToolTip content="----居中----">
|
|
<img style="margin-left: 13px;" src="@/assets/site/form_qua_ic.svg" alt="">
|
|
</GuipToolTip>
|
|
</span>
|
|
<GuipSwitch :modelValue="personalForm3.weixinFlag4" activeText="显示"
|
|
inactiveText="隐藏" @change="onSwitchChange">
|
|
</GuipSwitch>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('personalForm3')" />
|
|
</div>
|
|
<div class="siteMessage flex-common mt12" id="siteMessage7">
|
|
<h3>安全提交</h3>
|
|
<el-form :model="personalForm7" ref="formRef">
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<p class="flex-left-desc">查重服务</p>
|
|
<div class="left-pay-list mb24">
|
|
<div class="left-pay-item ">
|
|
<div class="flex-between">
|
|
<span>60分钟内不可提交重复内容</span>
|
|
<GuipSwitch :modelValue="personalForm3.weixinFlag1" activeText="显示"
|
|
inactiveText="隐藏" @change="onSwitchChange">
|
|
</GuipSwitch>
|
|
</div>
|
|
<el-checkbox-group v-model="checkList" class="checkboxGroup">
|
|
<el-checkbox label="识别重复标题"></el-checkbox>
|
|
<el-checkbox label="识别重复作者"></el-checkbox>
|
|
<el-checkbox label="识别重复正文"></el-checkbox>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-line"></div>
|
|
<div class="flex-right">
|
|
<p class="flex-left-desc">AI服务</p>
|
|
<div class="left-pay-list mb24">
|
|
<div class="left-pay-item ">
|
|
<div class="flex-between">
|
|
<span>3分钟内不可提交重复内容</span>
|
|
<GuipSwitch :modelValue="personalForm3.weixinFlag3" activeText="显示"
|
|
inactiveText="隐藏" @change="onSwitchChange">
|
|
</GuipSwitch>
|
|
</div>
|
|
<el-checkbox-group v-model="checkList1" class="checkboxGroup">
|
|
<el-checkbox label="识别重复标题"></el-checkbox>
|
|
<el-checkbox label="识别重复辅助信息"></el-checkbox>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('personalForm7')" />
|
|
</div>
|
|
<div class="siteMessage flex-common mt12" id="siteMessage8">
|
|
<h3>初始订单数 <span>设定检测基数，首页显示检测数量时，显示三个月内实际数值+该数值</span></h3>
|
|
<el-form :model="personalForm8" ref="formRef">
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<p class="flex-left-desc">检测篇数基数</p>
|
|
<GuipInput ref="GuipInput" class="mt12" width="100%" v-model="personalForm8.checkNum" placeholder="请输入数字">
|
|
</GuipInput>
|
|
</div>
|
|
<div class="flex-line borderNone"></div>
|
|
<div class="flex-right"></div>
|
|
</div>
|
|
</el-form>
|
|
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('personalForm8')" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import GuipInput from '@/components/GuipInput.vue';
|
|
import { mapState } from 'vuex';
|
|
import store from '../store';
|
|
import GuipSwitch from '@/components/GuipSwitch.vue';
|
|
import GuipToolTip from '@/components/GuipToolTip.vue';
|
|
import GuipButton from '@/components/GuipButton.vue';
|
|
import GroupFormBtns from '@/components/GroupFormBtns.vue';
|
|
|
|
export default {
|
|
// 站点设置
|
|
name: '',
|
|
props: [''],
|
|
components: {
|
|
GuipInput,
|
|
GuipButton,
|
|
GuipSwitch,
|
|
GuipToolTip,
|
|
GroupFormBtns
|
|
},
|
|
data() {
|
|
return {
|
|
textObj: {
|
|
'1': '展示在网站右侧悬浮栏的客服，请至少设置1个',
|
|
'2': '展示在报告页右侧悬浮栏的客服，请至少设置1个',
|
|
'3': '显示在微信、支付宝账单详情中，方便用户联系'
|
|
},
|
|
activeName: '1',
|
|
checkList1: ['识别重复辅助信息'],
|
|
checkList: ['识别重复正文'],
|
|
// 在线客服
|
|
personalForm3: {
|
|
weixinFlag1: false,
|
|
weixinFlag2: true,
|
|
weixinFlag3: true,
|
|
weixinFlag4: false
|
|
},
|
|
personalForm7: {
|
|
weixinFlag3: true,
|
|
weixinFlag4: true,
|
|
},
|
|
personalForm8: {
|
|
checkNum: 0,
|
|
},
|
|
imageUrl1:'',
|
|
imageUrl2:'',
|
|
imageUrl3:'',
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
|
|
},
|
|
created(){
|
|
store.commit('SET_CUSTOMIZE', true);
|
|
store.commit('SET_SLIDER_MENU','siteSettingData');
|
|
},
|
|
mounted() {
|
|
store.commit('SET_PAGETITLE', '个性化设置');
|
|
},
|
|
methods: {
|
|
handleTabClick(tab, event) {
|
|
console.log(tab, event);
|
|
},
|
|
lookTemImg() {
|
|
|
|
},
|
|
editTemImg() {
|
|
|
|
},
|
|
onSwitchChange(data) {
|
|
console.log(data, '---');
|
|
},
|
|
cancelClick() {
|
|
console.log('quxiao');
|
|
},
|
|
confirmClick(type) {
|
|
console.log(type, '确认');
|
|
},
|
|
// 上传图片
|
|
handleAvatarSuccess(res, file) {
|
|
this.imageUrl1 = URL.createObjectURL(file.raw);
|
|
},
|
|
beforeAvatarUpload(file) {
|
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
|
if (!isJPG) {
|
|
this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
|
|
}
|
|
if (!isLt2M) {
|
|
this.$message.error('上传头像图片大小不能超过 2MB!');
|
|
}
|
|
return isJPG && isLt2M;
|
|
},
|
|
handleClick(tab, event) {
|
|
console.log(tab, event);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
// ::v-deep .el-tabs__item.is-active {
|
|
// letter-spacing: 0.08em;
|
|
// /* main/main_stardard */
|
|
// color: #006AFF;
|
|
// font-weight: bold;
|
|
// }
|
|
|
|
// ::v-deep .el-tabs__nav-wrap::after {
|
|
// content: none;
|
|
// }
|
|
|
|
::v-deep .el-tabs__header {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.site-personal-wrap {
|
|
width: 100%;
|
|
|
|
.siteMessage {
|
|
border-radius: 4px;
|
|
transition: all .5s;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.siteMessage5_desc {
|
|
border-radius: 4px;
|
|
/* middle/middle_blue_1 */
|
|
background: #F2F7FF;
|
|
/* middle/middle_blue_3 */
|
|
border: 1px solid #BFDAFF;
|
|
padding: 8px 13px;
|
|
margin-bottom: 32px;
|
|
|
|
img {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
}
|
|
|
|
.checkboxGroup {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-top: 18px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.tem-home {
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
opacity: 1;
|
|
background: #FFFFFF;
|
|
/* middle/middle_line_1 */
|
|
border: 1px solid #DFE2E6;
|
|
|
|
.tem-home-top {
|
|
width: 100%;
|
|
}
|
|
|
|
.tem-home-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 22px 32px;
|
|
justify-content: space-between;
|
|
|
|
.tem-look {
|
|
margin-right: 36px;
|
|
}
|
|
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.left-pay-list {
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
opacity: 1;
|
|
|
|
/* middle/middle_grey_0 */
|
|
// span{
|
|
// color: #23242B;
|
|
// }
|
|
.left-pay-item {
|
|
padding: 24px;
|
|
color: #23242B;
|
|
background: #FAFAFA;
|
|
margin-top: 12px;
|
|
|
|
p {
|
|
text-align: left;
|
|
margin-top: 9px;
|
|
/* caption/caption_regular */
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
line-height: 13px;
|
|
letter-spacing: 0.08em;
|
|
color: #626573;
|
|
}
|
|
|
|
.el-form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.kefuImg {
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
|
|
.qqCode-wrap {
|
|
display: grid;
|
|
justify-items: start;
|
|
// justify-content: flex-start;
|
|
// text-align: left;
|
|
// flex-direction: column;
|
|
}
|
|
|
|
.qqCode-wrap.right {
|
|
margin: 0 0 8px 12px;
|
|
}
|
|
|
|
.avatar-desc {
|
|
/* regular/body3-Regular */
|
|
/* 样式描述：辅助文字 */
|
|
margin-top: 8px;
|
|
font-family: Inter;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
line-height: 20px;
|
|
letter-spacing: normal;
|
|
font-variation-settings: "wght" 400;
|
|
/* Light/中性色 Neutral/Text/Regular */
|
|
color: var(--el-color-text-regular);
|
|
/* #606266 */
|
|
}
|
|
}
|
|
.avatar-uploader{
|
|
.bgImg{
|
|
width: 20px;
|
|
height: 16px;
|
|
margin-right: 6px;
|
|
background-image: url(../assets/site/uploadIcon.svg);
|
|
}
|
|
&:hover{
|
|
.bgImg{
|
|
background-image: url(../assets/site/uploadIcon_light.svg);
|
|
}
|
|
}
|
|
}
|
|
</style>
|