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.
376 lines
16 KiB
376 lines
16 KiB
<template>
|
|
<div class="site-personal-wrap min-flex">
|
|
<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="">
|
|
展示在网站右侧悬浮栏的客服，请至少设置1个</p>
|
|
<el-tab-pane label="网站客服" name="first">
|
|
<div class="flex-wrap">
|
|
<div class="flex-left">
|
|
<p class="flex-left-desc">旺旺客服</p>
|
|
<GuipInput ref="GuipInput" width="100%" v-model="personalForm8.checkNum"
|
|
placeholder="请输入数字">
|
|
</GuipInput>
|
|
<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
|
|
:show-file-list="false" :on-success="handleAvatarSuccess"
|
|
:before-upload="beforeAvatarUpload">
|
|
<GuipButton> <img src="@/assets/site/info_filled.svg" alt=""> 重新上传</GuipButton>
|
|
</el-upload>
|
|
<p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p>
|
|
</div>
|
|
<div class="flex-line"></div>
|
|
<div class="flex-right">
|
|
<p class="flex-left-desc">微信客服</p>
|
|
<div class="flex">
|
|
<img v-if="imageUrl" :src="imageUrl" class="kefuImg">
|
|
<img e-else src="@/assets/site/kefuTem.png" alt="" class="kefuImg">
|
|
<div class="right">
|
|
<el-upload class="avatar-uploader"
|
|
action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
|
|
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
|
<GuipButton> <img src="" alt=""> 重新上传</GuipButton>
|
|
</el-upload>
|
|
<p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="报告页客服" name="second">报告页客服</el-tab-pane>
|
|
<el-tab-pane label="支付账单客服" name="third">支付账单客服</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>服务列表页价格 <img src="@/assets/site/form_qua_ic.svg" alt=""></span>
|
|
<GuipSwitch :modelValue="personalForm3.weixinFlag1" activeText="显示"
|
|
inactiveText="隐藏" @change="onSwitchChange">
|
|
</GuipSwitch>
|
|
</div>
|
|
</div>
|
|
<div class="left-pay-item ">
|
|
<div class="flex-between">
|
|
<span>服务提交页价格 <img src="@/assets/site/form_qua_ic.svg" alt=""></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>服务列表页价格 <img src="@/assets/site/form_qua_ic.svg" alt=""></span>
|
|
<GuipSwitch :modelValue="personalForm3.weixinFlag3" activeText="显示"
|
|
inactiveText="隐藏" @change="onSwitchChange">
|
|
</GuipSwitch>
|
|
</div>
|
|
</div>
|
|
<div class="left-pay-item ">
|
|
<div class="flex-between">
|
|
<span>服务提交页价格 <img src="@/assets/site/form_qua_ic.svg" alt=""></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分钟内不可提交重复内容 <img src="@/assets/site/form_qua_ic.svg" alt=""></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分钟内不可提交重复内容 <img src="@/assets/site/form_qua_ic.svg" alt=""></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" 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 GuipButton from '@/components/GuipButton.vue';
|
|
import GroupFormBtns from '@/components/GroupFormBtns.vue';
|
|
|
|
export default {
|
|
// 站点设置
|
|
name: '',
|
|
props: [''],
|
|
components: {
|
|
GuipInput,
|
|
GuipButton,
|
|
GuipSwitch,
|
|
GroupFormBtns
|
|
},
|
|
data() {
|
|
return {
|
|
activeName: 'first',
|
|
imageUrl: '',
|
|
checkList1: ['识别重复辅助信息'],
|
|
checkList: ['识别重复正文'],
|
|
// 在线客服
|
|
personalForm3: {
|
|
weixinFlag1: false,
|
|
weixinFlag2: true,
|
|
weixinFlag3: true,
|
|
weixinFlag4: false
|
|
},
|
|
personalForm7: {
|
|
weixinFlag3: true,
|
|
weixinFlag4: true,
|
|
},
|
|
personalForm8: {
|
|
checkNum: 0,
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
|
|
},
|
|
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.imageUrl = URL.createObjectURL(file.raw);
|
|
},
|
|
beforeAvatarUpload(file) {
|
|
const isJPG = file.type === 'image/jpeg';
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
|
if (!isJPG) {
|
|
this.$message.error('上传头像图片只能是 JPG 格式!');
|
|
}
|
|
if (!isLt2M) {
|
|
this.$message.error('上传头像图片大小不能超过 2MB!');
|
|
}
|
|
return isJPG && isLt2M;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.site-personal-wrap {
|
|
width: 100%;
|
|
|
|
.siteMessage {
|
|
border-radius: 4px;
|
|
transition: all .5s;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.siteMessage5_desc {}
|
|
|
|
.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;
|
|
}
|
|
|
|
.avatar-desc {
|
|
/* regular/body3-Regular */
|
|
/* 样式描述：辅助文字 */
|
|
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 */
|
|
}
|
|
}
|
|
</style>
|