zq
2 months ago
12 changed files with 547 additions and 111 deletions
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 52 KiB |
@ -0,0 +1,9 @@ |
|||||
|
// 设置页面元素对应高亮
|
||||
|
export function setHighActive(dom) { |
||||
|
const ele = document.getElementById(dom) |
||||
|
ele.classList.add('ceshi') |
||||
|
ele.scrollIntoView({behavior:'smooth',block:'start'}) |
||||
|
setTimeout(()=>{ |
||||
|
ele.classList.remove('ceshi') |
||||
|
},1000) |
||||
|
} |
||||
@ -1,52 +1,376 @@ |
|||||
<template> |
<template> |
||||
<div class="page-title-wrap min-flex"> |
<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> |
</div> |
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
// import GuipInput from '@/components/GuipInput.vue'; |
import GuipInput from '@/components/GuipInput.vue'; |
||||
import { mapState } from 'vuex'; |
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 { |
export default { |
||||
// 站点设置 |
// 站点设置 |
||||
name: '', |
name: '', |
||||
props: [''], |
props: [''], |
||||
components: { |
components: { |
||||
// GuipInput, |
GuipInput, |
||||
|
GuipButton, |
||||
|
GuipSwitch, |
||||
|
GroupFormBtns |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
|
activeName: 'first', |
||||
|
imageUrl: '', |
||||
|
checkList1: ['识别重复辅助信息'], |
||||
|
checkList: ['识别重复正文'], |
||||
|
// 在线客服 |
||||
|
personalForm3: { |
||||
|
weixinFlag1: false, |
||||
|
weixinFlag2: true, |
||||
|
weixinFlag3: true, |
||||
|
weixinFlag4: false |
||||
|
}, |
||||
|
personalForm7: { |
||||
|
weixinFlag3: true, |
||||
|
weixinFlag4: true, |
||||
|
}, |
||||
|
personalForm8: { |
||||
|
checkNum: 0, |
||||
|
} |
||||
} |
} |
||||
}, |
}, |
||||
computed: { |
computed: { |
||||
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
||||
}, |
}, |
||||
|
mounted() { |
||||
|
store.commit('SET_PAGETITLE', '个性化设置'); |
||||
|
}, |
||||
methods: { |
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> |
</script> |
||||
<style lang="scss"> |
<style lang="scss" scoped> |
||||
.page-title-wrap { |
.site-personal-wrap { |
||||
width: 100%; |
width: 100%; |
||||
height: 72px; |
|
||||
/* 自动布局 */ |
.siteMessage { |
||||
display: flex; |
border-radius: 4px; |
||||
flex-direction: column; |
transition: all .5s; |
||||
padding: 24px 12px; |
border: 1px solid transparent; |
||||
box-sizing: border-box; |
} |
||||
|
|
||||
b { |
.siteMessage5_desc {} |
||||
/* headline/haeadline_3_bold */ |
|
||||
font-family: Microsoft YaHei UI; |
.checkboxGroup { |
||||
font-size: 18px; |
display: flex; |
||||
font-weight: bold; |
justify-content: flex-start; |
||||
line-height: 24px; |
margin-top: 18px; |
||||
letter-spacing: 0.06em; |
padding: 10px 0; |
||||
font-variation-settings: "opsz" auto; |
} |
||||
/* text/text_1 */ |
|
||||
color: #1E2226; |
.tem-home { |
||||
display: inline-block; |
width: 100%; |
||||
text-align: left; |
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> |
</style> |
||||
Loading…
Reference in new issue