zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

站点个性化设置

pull/73/head
rainbro 4 days ago
parent
93c95b3b09
commit
bcb7128f6f
3 changed files with 743 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      src/router/index.js
  2. 599
      src/views/agent/sitePersonalization.vue
  3. 125
      src/views/agent/siteTemplate.vue

28
src/router/index.js
View File

@ -8,7 +8,7 @@ import HomeView from '../views/HomeView.vue';
Vue.use(VueRouter)
// 侧边导航黑名单
const blackSliderList = [
'/register', '/franchise','/agent/siteServiceList'
'/register', '/franchise','/agent/siteServiceList', '/agent/siteTemplate'
];
// 一级路由
let first_child_router = []
@ -133,14 +133,24 @@ const routes = [{
breadcrumbParent: '站点列表' // 手动指定父级
}
},
// {
// path: '/agent/SitePersonalization',
// name: '个性化设置',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/SitePersonalization.vue')
// },
{
path: '/agent/sitePersonalization',
name: '个性化设置',
component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/sitePersonalization.vue'),
meta: {
title: '站点设置',
breadcrumbParent: '站点列表' // 手动指定父级
}
},
{
path: '/agent/siteTemplate',
name: '个性化设置',
component: () => import( /* webpackChunkName: "siteList" */ '../views/agent/siteTemplate.vue'),
// meta: {
// title: '站点设置',
// breadcrumbParent: '站点列表' // 手动指定父级
// }
},
{
path: '/agent/payList',
isFirst: true,

599
src/views/agent/sitePersonalization.vue
View File

@ -0,0 +1,599 @@
<template>
<div class="main-content12">
<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">
<p class="flex-left-desc">销售方向</p>
<GuipRadio class="flex" v-model="siteInfo.site_type" :options="siteInfo.site_types" label="" prop="site_type" />
<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="previewTpl">
<img src="@/assets/register/look-tem.svg" alt="">
预览
</div>
<div @click="changeTpl">
<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="updateSiteCustomerService(siteInfo)" />
</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="web_customer_service">
<div class="flex-wrap">
<div class="flex-left">
<p class="flex-left-desc">旺旺客服</p>
<GuipInput ref="GuipInput" class="mt12 mb24" v-model="siteInfo.wangwang" placeholder="请填写账号">
</GuipInput>
<p class="flex-left-desc">QQ客服</p>
<div class="qqCode-wrap">
<el-upload class="avatar-uploader mt12" accept=".jpg,.png"
action="/agentnew/ajax_update_site_kefu" :show-file-list="false"
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" slot="trigger">
<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="web_report_page_customer_service">
<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="web_wx_customer_service">
<div class="flex-wrap">
<div class="flex-left">
<p class="flex-left-desc">客服微信号</p>
<GuipInput ref="GuipInput" class="mt12 mb24" width="100%" v-model="siteInfo.wxkf" 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="updateSiteCustomerService(siteInfo)" />
</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="siteInfo.is_display_price" :active-value="1" :inactive-value="0" activeText="显示" inactiveText="隐藏" @change="updateSiteDisplayPrice(siteInfo, 'is_display_price')"></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="siteInfo.is_display_submit_page_price" :active-value="1" :inactive-value="0" activeText="显示" inactiveText="隐藏" @change="updateSiteDisplayPrice(siteInfo, 'is_display_submit_page_price')"></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="siteInfo.is_display_outchain" :active-value="1" :inactive-value="0" activeText="显示" inactiveText="隐藏" @change="updateSiteDisplayPrice(siteInfo, 'is_display_outchain')"></GuipSwitch>
</div>
</div>
</div>
</div>
</div>
</el-form>
</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">查重服务/AI服务</p>
<div class="left-pay-list mb24">
<div class="left-pay-item ">
<div class="flex-between">
<span>查重60分钟内不可提交重复内容，AI产品3分钟内不能重复提交</span>
<GuipSwitch :modelValue="siteInfo.is_allow_repeat_submit" :active-value="1" :inactive-value="0" activeText="开" inactiveText="关" @change="updateSiteRepeatSubmitConfig"></GuipSwitch>
</div>
<el-checkbox-group v-model="siteInfo.repeat_submit_fields" class="checkboxGroup">
<el-checkbox name="repeat_submit_fields" label="title">识别重复标题</el-checkbox>
<el-checkbox name="repeat_submit_fields" label="author">识别重复作者</el-checkbox>
<el-checkbox name="repeat_submit_fields" label="content">识别重复正文/辅助信息</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="updateSiteCustomerService(siteInfo)" />
</div>
<div class="siteMessage flex-common mt12" id="siteMessage8">
<h3>初始订单数 <span>设定检测基数，首页显示检测数量时，显示三个月内实际数值+该数值</span></h3>
<el-form>
<div class="flex-wrap">
<div class="flex-left">
<p class="flex-left-desc">检测篇数基数</p>
<GuipInput ref="GuipInput" class="mt12" width="100%" v-model="siteInfo.init_checknum" placeholder="请输入数字"></GuipInput>
</div>
<div class="flex-line borderNone"></div>
<div class="flex-right"></div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="updateSiteInitChecknum(siteInfo)" />
</div>
</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';
import GuipRadio from '@/components/GuipRadio.vue';
export default {
// 站点设置
name: '',
props: [''],
components: {
GuipInput,
GuipButton,
GuipSwitch,
GuipToolTip,
GroupFormBtns,
GuipRadio
},
data() {
return {
// AUTH
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
// 站点信息
siteInfo: [],
textObj: {
'web_customer_service': '展示在网站右侧悬浮栏的客服，请至少设置1个',
'web_report_page_customer_service': '展示在报告页右侧悬浮栏的客服，请至少设置1个',
'web_wx_customer_service': '显示在微信、支付宝账单详情中，方便用户联系'
},
activeName: 'web_customer_service',
checkList1: ['识别重复辅助信息'],
// 在线客服
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', '个性化设置');
this.getSiteInfo();
},
methods: {
// 获取站点信息
getSiteInfo() {
const that = this
that.siteInfo = []
this.$http('POST', '/agentnew/ajax_get_site_info', {
uid: this.$route.query.uid,
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
that.siteInfo = response.data
that.siteInfo.is_display_outchain = Number(response.data.is_display_outchain)
that.siteInfo.is_display_price = Number(response.data.is_display_price)
that.siteInfo.is_display_submit_page_price = Number(response.data.is_display_submit_page_price)
that.siteInfo.is_allow_repeat_submit = Number(response.data.is_allow_repeat_submit)
console.log(that.siteInfo.is_allow_repeat_submit)
})
}).catch(error => {
console.error(error, 'error')
})
},
updateSiteInitChecknum(row) {
this.$http('POST', '/agentnew/ajax_update_site_init_checknum', {
uid: this.$route.query.uid,
init_checknum: row.init_checknum
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
if (response.status) {
this.$Message.success(response.info);
this.getSiteInfo();
} else {
this.$Message.error(response.info);
}
})
}).catch(error => {
console.error(error, 'error')
})
},
updateSiteDisplayPrice(row, flag) {
var is_display_price = -1;
var is_display_submit_page_price = -1;
var is_display_outchain = -1;
if (flag == 'is_display_price') {
is_display_price = row.is_display_price==1 ? 0 : 1;
is_display_submit_page_price = row.is_display_submit_page_price;
is_display_outchain = row.is_display_outchain;
} else if (flag == 'is_display_submit_page_price') {
is_display_price = row.is_display_price;
is_display_submit_page_price = row.is_display_submit_page_price==1 ? 0 : 1;
is_display_outchain = row.is_display_outchain;
} else if (flag == 'is_display_outchain') {
is_display_price = row.is_display_price;
is_display_submit_page_price = row.is_display_submit_page_price;
is_display_outchain = row.is_display_outchain==1 ? 0 : 1;
}
this.$http('POST', '/agentnew/ajax_update_site_display_price', {
uid: this.$route.query.uid,
is_display_price: is_display_price,
is_display_submit_page_price: is_display_submit_page_price,
is_display_outchain: is_display_outchain,
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
if (response.status) {
this.$Message.success(response.info);
} else {
this.$Message.error(response.info);
}
})
}).catch(error => {
console.error(error, 'error')
})
},
updateSiteRepeatSubmitConfig() {
this.$http('POST', '/agentnew/ajax_update_site_repeatsubmit_config', {
uid: this.$route.query.uid,
is_allow_repeat_submit: this.siteInfo.is_allow_repeat_submit==1 ? 0 : 1,
repeat_submit_fields: this.siteInfo.repeat_submit_fields.join(',')
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
if (response.status) {
this.$Message.success(response.info);
} else {
this.$Message.error(response.info);
}
})
}).catch(error => {
console.error(error, 'error')
})
},
handleTabClick(tab, event) {
console.log(tab, event);
},
previewTpl() {
window.open('http://'+this.siteInfo.domain, '_blank');
},
changeTpl() {
window.open('/agent/siteTemplate', '_blank');
},
onSwitchChange(data) {
console.log(data, '---');
},
cancelClick() {
console.log('quxiao');
},
updateSiteCustomerService(row) {
console.log(row, 'row');
this.$http('POST', '/agentnew/ajax_update_site_kefu', {
uid: this.$route.query.uid,
wx: this.siteInfo.wxkf,
wangwang: this.siteInfo.wangwang,
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
if (response.status) {
this.$Message.success(response.info);
} else {
this.$Message.error(response.info);
}
})
}).catch(error => {
console.error(error, 'error')
})
},
// 上传图片
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>

125
src/views/agent/siteTemplate.vue
View File

@ -0,0 +1,125 @@
<template>
<div class="main-content12">
<div class="pageTemplete-wrap">
<div class=" flex-common" id="">
<h3>模板选择</h3>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="混合（AI+查重）" name="1">
<div class="templeteImgs">
<div class="templeteImgs-item" v-for="item in templeteList" :key="item.tpl_id">
<img :src="item.img" alt="">
<span class="look">预览</span>
<img src="@/assets/site/tem-active.svg" class="tem-active" alt="">
<p>{{ item.list }}</p>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="仅查重" name="2">
<div class="templeteImgs">
<div class="templeteImgs-item" v-for="item in templeteList.filter(item1=> {item1.type == 1})" :key="item.tpl_id">
<img :src="require(item.img)" alt="">
<span class="look">预览</span>
<img src="@/assets/site/tem-active.svg" class="tem-active" alt="">
<p>{{ item.list }}</p>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="仅AI写作" name="3"></el-tab-pane>
<div class="templeteImgs">
<div class="templeteImgs-item" v-for="item in templeteList.filter(item1=> {item1.type == 0})" :key="item.tpl_id">
<img :src="require(item.img)" alt="">
<span class="look">预览</span>
<img src="@/assets/site/tem-active.svg" class="tem-active" alt="">
<p>{{ item.list }}</p>
</div>
</div>
</el-tabs>
</div>
</div>
</div>
</template>
<script>
export default {
// 站点设置
name: '',
components: {
// GuipInput,
// GuipButton,
// GuipSwitch,
// GroupFormBtns
},
data() {
return {
activeName: '1',
addImgList: {
'万方': require('@/assets/register/wanfang.png'),
'维普': require('@/assets/register/weipu.svg'),
'学术不端': require('@/assets/register/xueshubuduan.svg'),
},
templeteList:[
{
name:'清新科技蓝',
type:1,
tpl_id:'1',
img:require('@/assets/site/temImg.png')
},
{
name:'清新科技蓝1',
type:0,
tpl_id:'11',
img:require('@/assets/site/temImg.png')
},
{
name:'清新科技蓝2',
tpl_id:'12',
type:0,
img:require('@/assets/site/temImg.png')
},
{
name:'清新科技蓝3',
tpl_id:'16',
type:0,
img:require('@/assets/site/temImg.png')
},
{
name:'清新科技蓝4',
tpl_id:'13',
type:1,
img:require('@/assets/site/temImg.png')
},
{
name:'清新科技蓝5',
tpl_id:'14',
type:1,
img:require('@/assets/site/temImg.png')
},
{
name:'清新科技蓝6',
type:1,
tpl_id:'15',
img:require('@/assets/site/temImg.png')
},
]
}
},
methods: {
handleClick() {
}
}
}
</script>
<style scoped lang="scss">
.pageTemplete-wrap {
width: 100%;
letter-spacing: 0.08em;
box-sizing: border-box;
}
::v-deep .el-tabs__nav-wrap {
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: #DFE2E6;
}
</style>
Write Preview
Loading…
Cancel
Save