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

Merge pull request '去除废弃文件、修改路由配置' (#105) from zq-perSliderMenu into master 

Reviewed-on: #105
pull/106/head
zhangqi 3 weeks ago
parent
3fabf7fbe0 4261e29674
commit
c152d05fc2
11 changed files with 4 additions and 4786 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. 70
      src/router/index.js
  2. 714
      src/views/HomeView.vue
  3. 125
      src/views/PageTemplete.vue
  4. 62
      src/views/Personalization.vue
  5. 1756
      src/views/Register.vue
  6. 358
      src/views/SiteBaseSetting.vue
  7. 31
      src/views/SiteH5.vue
  8. 529
      src/views/SiteList.vue
  9. 508
      src/views/SitePersonalization.vue
  10. 567
      src/views/SiteSem.vue
  11. 70
      src/views/SiteSetting.vue

70
src/router/index.js
View File

@ -1,7 +1,6 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import store from '../store';
// import HomeView from '../views/HomeView.vue';
Vue.use(VueRouter)
// 第三种侧边栏展示白名单
@ -9,7 +8,7 @@ const whiteSecondSider = [
'/agent/siteAddFinally','/agent/siteServiceAdd'
];
const blackSliderList = [
'/franchise', '/agreement', '/customizeDoc', '/register', '/agent/siteAdd', '/agent/siteServiceList', '/agent/siteTemplate','/agent/siteAddFinally','/agent/siteServiceAdd', '/agent/supplyList',
'/franchise', '/agreement', '/customizeDoc', '/agent/siteAdd', '/agent/siteServiceList', '/agent/siteTemplate','/agent/siteAddFinally','/agent/siteServiceAdd', '/agent/supplyList',
'/agent/domainList'
, '/agent/noticeList'
];
@ -24,7 +23,7 @@ const blackHeaderRightList = [
'/agreement', '/customizeDoc'
];
const blackFooterList = [
'/', '/franchise','/agreement', '/customizeDoc', '/register', '/agent/siteAdd', '/agent/payInfoSetting','/agent/siteServiceEdit','/agent/siteAddFinally','/agent/siteServiceAdd',
'/', '/franchise','/agreement', '/customizeDoc','/agent/siteAdd', '/agent/payInfoSetting','/agent/siteServiceEdit','/agent/siteAddFinally','/agent/siteServiceAdd',
'/agent/siteTemplate'
];
// const whiteSlideList = ['/', '/ui',
@ -34,7 +33,7 @@ const blackFooterList = [
// '/siteBaseSetting',
// '/sitePersonalization'
// ]; //侧边导航白名单
// const whiteHeaderList = ['/', '/ui', '/agent/siteList', '/register', '/configureServicePrices', '/siteList','/siteSetting/siteBaseSetting','/siteSetting/sitePersonalization'
// const whiteHeaderList = ['/', '/ui', '/agent/siteList', '/siteList','/siteSetting/siteBaseSetting','/siteSetting/sitePersonalization'
// ,'/siteSetting/siteH5','/siteSetting/siteSem','/pageTemplete','/demo',
// '/super/ranking/yearProfit', '/super/ranking/monthProfit', '/super/ranking/checkProfit', '/super/ranking/checkOrdernum',
// '/super/ranking/checkRefund', '/super/ranking/agentProfit', '/super/ranking/agentRecharge', '/super/ranking/agentNew',
@ -42,7 +41,7 @@ const blackFooterList = [
// ]; //头部导航白名单
//底部白名单 暂时废弃，在页面独立添加组件
// const whiteFooterList = ['/', '/ui', '/agent/siteList', '/configureServicePrices',
// const whiteFooterList = ['/', '/ui', '/agent/siteList',
// '/super/ranking/yearProfit', '/super/ranking/monthProfit', '/super/ranking/checkProfit', '/super/ranking/checkOrdernum',
// '/super/ranking/checkRefund', '/super/ranking/agentProfit', '/super/ranking/agentRecharge', '/super/ranking/agentNew',
// '/super/ranking/purchase','/super/ranking/stagePurchase','/super/ranking/loss'
@ -91,17 +90,6 @@ const routes = [{
}
},
{
path: '/register',
name: 'register',
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import( /* webpackChunkName: "register" */ '../views/Register.vue'),
meta: {
title: '注册页',
hideBreadcrumb: true, // 一级页面不显示面包屑
}
},
{
path: '/ui',
name: 'ui组件',
isFirst: true,
@ -342,56 +330,6 @@ const routes = [{
hideBreadcrumb: true // 一级页面不显示面包屑
}
},
{
path: '/configureServicePrices',
name: '配置服务价格',
component: () => import( /* webpackChunkName: "configureServicePrices" */ '../views/ConfigureServicePrices.vue')
},
{
path: '/demoPage',
name: '示例',
component: () => import( /* webpackChunkName: "configureServicePrices" */ '../views/demoPage.vue'),
meta: {
hideBreadcrumb: true // 一级页面不显示面包屑
}
},
// 暂时废弃
// {
// path: '/siteSetting',
// name: '站点设置',
// component: () => import( /* webpackChunkName: "SiteSetting" */ '../views/SiteSetting.vue'),
// children: [
// {
// path: '', // 默认子路由
// redirect: () => import( /* webpackChunkName: "siteBaseSetting" */ '../views/SiteBaseSetting.vue') // 重定向到第一个页面
// },
// {
// path: 'siteBaseSetting',
// name: '站点基础设置',
// component: () => import( /* webpackChunkName: "siteBaseSetting" */ '../views/SiteBaseSetting.vue'),
// },
// {
// path: 'sitePersonalization',
// name: '个性化设置',
// component: () => import( /* webpackChunkName: "sitePersonalization" */ '../views/SitePersonalization.vue')
// },
// {
// path: 'siteH5',
// name: '移动端设置',
// component: () => import( /* webpackChunkName: "siteH5" */ '../views/SiteH5.vue')
// },
// {
// path: 'demoTable', // 默认子路由
// name: '测试页面',
// redirect: () => import( /* webpackChunkName: "demoTable" */ '../views/DemoTable.vue') // 重定向到第一个页面
// },
// ]
// },
{
path: '/pageTemplete',
name: '网页模板',
component: () => import( /* webpackChunkName: "pageTemplete" */ '../views/PageTemplete.vue')
},
// -----------------分隔符-----------

714
src/views/HomeView.vue
View File

@ -1,714 +0,0 @@
<template>
<div class="home-wrap column">
<div class="home-main flex">
<div class="home-main-left column">
<div class="systemNotice common-area">
<h2 class="flex-between">
<b>系统通知</b>
<span class="hoverCommon" @click="lookMoreSystem">查看更多</span>
</h2>
<div class="systemNotice-main">
<div class="sales-item flex" v-for="(item) in systemList" :key="item.name">
<img :src="require(`@/assets/home/NEW.svg`)" alt="">
<div class="column">
<b class="flex">{{ item.label }} <img class="systemIcon" src="@/assets/home/systemIcon.svg" alt=""> </b>
<p>{{ item.desc }}</p>
</div>
</div>
</div>
</div>
<div class="salesStatistics common-area">
<h2 class="flex-between">
<b>销售统计 <span>2024–10-28数据</span></b>
<span class="hoverCommon" @click="lookMoreSystem">查看全部</span>
</h2>
<div class="salesStatistics-main flex">
<div class="sales-item flex" v-for="(item, index) in salesList" :key="item.name">
<img :src="require(`@/assets/home/sales${index + 1}.png`)" alt="">
<div class="column">
<p class="flex"><span class="number">{{ item.num }}</span> <span v-if="index < 2" class="unit">元</span></p>
<span class="label">{{ item.label }}</span>
</div>
</div>
</div>
</div>
<div class="supplyPrice common-area">
<h2>供货价格 </h2>
<div class="supplyPrice-main flex">
<div :class="['supplyPric-item', 'supplyPric-item' + (index1 + 1)]" v-for="(item1, index1) in supplyList1"
:key="item1">
<div class="item-top flex-between">
<div class="flex">
<img :src="require(`@/assets/home/supplyPrice${index1 + 1}.png`)" alt="">
<b>{{ item1 }}</b>
</div>
<span>详情</span>
</div>
<div class="list-wrap">
<div v-for="(item2, index2) in supplyList" :key="index2" class="item-list">
<p class="item-list-name">{{ item2.name }}</p>
<p class="flex-between" v-for="(item3, index3) in item2.list" :key="index3">
{{ item3.name }}
<span>{{ item3.price }}元/{{ item3.word }}</span>
</p>
</div>
</div>
</div>
</div>
</div>
<Footer></Footer>
</div>
<div class="home-main-right">
<div class="accountBalance flex-between common-area">
<span>账户余额&nbsp; <b>4560</b>&nbsp;元</span>
<span class="hoverCommon">展开</span>
</div>
<div style=" background: #fff">
<div class="importantReminder common-area">
<h2>重要提醒</h2>
<div class="reminder1 column">
<p>淘宝账号即将过期</p>
<div @click="lookTaoBaoNum">查看</div>
</div>
<div class="reminder2 column hide">
<p>请尽快建立站点，开始售卖</p>
<div @click="lookTaoBaoNum1">立即前往</div>
</div>
</div>
<div class="carouselImage common-area">
<!-- 轮播图 -->
<img src="@/assets/home/home-right.png" alt="">
</div>
<div class="preferredMarket common-area">
<h2>优选营销</h2>
<div class="column">
<div class="sales-item flex" v-for="(item, index) in preferredMarketList" :key="item.name">
<img :src="require(`@/assets/home/preferredMarket${index + 1}.png`)" alt="">
<div class="column">
<span class="flex">{{ item.label }}
<!-- <img class="systemIcon" src="@/assets/home/systemIcon.svg" alt=""> -->
</span>
<p>{{ item.desc }}</p>
</div>
</div>
</div>
</div>
<div class="usageGuide common-area">
<h2 class="flex-between">
<b>使用指南</b>
<span class="hoverCommon">查看全部</span>
</h2>
<p class="hoverCommon">我想将商品绑定淘宝店应该怎么做？</p>
<p class="hoverCommon">基于成交量的推广支持</p>
<p class="hoverCommon">二级、裂变分销，发展代理网络</p>
</div>
<div class="customWrap common-area">
<h2>联系客服</h2>
<img src="@/assets/home/customer.png" alt="">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Footer from '@/components/Footer.vue';
export default {
name: 'HomeView',
data() {
return {
preferredMarketList: [
{
desc: '电脑版、小程序、微信H5',
label: '多端系统'
},
{
desc: '电脑版、小程序、微信H5',
label: 'OCPC推广'
},
{
desc: '电脑版、小程序、微信H5',
label: '多级分销'
},
{
desc: '电脑版、小程序、微信H5',
label: '嵌入广告'
},
{
desc: '电脑版、小程序、微信H5',
label: '发放卡券'
},
],
salesList: [
{
num: 4560,
label: '销售金额'
},
{
num: 1000,
label: '成本支出'
},
{
num: 20,
label: '查重订单量'
},
{
num: 60,
label: 'AIGC订单量'
},
],
systemList: [
{
desc: 'AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000/8000/10000/15000/000000/10000/…',
label: 'AI范文整合的通知'
},
{
desc: 'AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000AI中文范文2万字版、AI中文范文万字版已整合到AI中文范文内(可选3000/5000/8000/10000/15000/000000/10000/…',
label: 'AI范文整合的通知'
},
],
supplyList1: [
'查重服务',
'AIGC服务',
'写作辅助',
],
supplyList: [
{
name: '万方系统',
list: [
{
name: '万方硕博版',
word: '千字符',
price: 2.4
},
{
name: '万方硕博版',
word: '千字符',
price: 2.4
},
{
name: '万方硕博版',
word: '千字符',
price: 2.4
},
]
},
{
name: '维普系统',
list: [
{
name: '维普硕博版',
word: '千字符',
price: 2.4
},
{
name: '维普系统硕博版',
word: '千字符',
price: 2.4
},
{
name: '维普系统硕博版',
word: '千字符',
price: 2.4
},
]
},
{
name: 'PaperPass旗舰版',
list: [
{
name: '万方硕博版',
word: '千字符',
price: 2.4
},
]
},
{
name: '学术不端',
list: [
{
name: '硕博预审版',
word: '篇',
price: 2.4
},
{
name: '期刊小论文小篇幅版',
word: '篇',
price: 2.4
},
{
name: '期刊小论文小篇幅版',
word: '篇',
price: 2.4
},
{
name: '期刊小论文小篇幅版',
word: '篇',
price: 2.4
},
]
},
]
}
},
components: {
// HelloWorld
Footer,
},
methods: {
lookTaoBaoNum() {
// 查看淘宝账号
},
lookTaoBaoNum1() {
// 查看淘宝账号
},
lookMoreSystem() {
// 系统通知 -查看更多
},
lookAllSales() {
// 销售统计 -查看全部
},
}
}
</script>
<style scoped lang="scss">
.home-wrap {
padding: 12px;
.home-main {
width: 100%;
display: flex;
gap: 12px;
min-width: 1018px;
max-width: 1750px;
margin: 0 auto;
align-items: stretch;
box-sizing: border-box;
.home-main-left {
min-width: 746px;
max-width: 1398px;
flex: 1;
.common-area {
width: 100%;
padding: 20px 14px;
box-sizing: border-box;
/* 确保 padding 不会影响宽度计算 */
background: #fff;
margin-bottom: 12px;
h2 {
font-size: 16px;
font-weight: bold;
letter-spacing: 0.08em;
color: #1E2226;
margin: 0 0 20px 0;
text-align: left;
span {
font-size: 14px;
font-weight: normal;
letter-spacing: 0.08em;
color: #8A9099;
}
}
}
.systemNotice-main {
img {
width: 32px;
height: 32px;
margin-right: 8px;
}
.sales-item {
width: 100%;
justify-content: flex-start;
padding: 18px 12px;
box-sizing: border-box;
transition: all .3s;
.systemIcon {
display: none;
width: 12px;
height: 8px;
}
&:hover {
background: #F6F7FA;
b {
color: #006AFF;
}
.systemIcon {
margin-left: 12px;
display: block;
}
}
div {
width: calc(100% - 30px);
}
/* 确保 padding 不会影响宽度计算 */
b {
font-size: 14px;
font-weight: normal;
line-height: normal;
letter-spacing: 0.08em;
color: #1E2226;
}
p {
width: 100%;
margin-top: 6px;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
color: #8A9099;
}
}
}
.salesStatistics-main {
img {
width: 54px;
height: 54px;
margin-right: 12px;
}
.sales-item {
width: 25%;
justify-content: flex-start;
padding: 14px 12px;
transition: all .3s;
.number{
font-size: 22px;
font-weight: bold;
font-family: 'Roboto Condensed';
display: inline-block;
margin-right: 2px;
color: #1E2226;
line-height: 29px;
}
.unit{
color: #1E2226;
font-size: 12px;
}
.label{
color: #8A9099;
letter-spacing: 0.08em;
}
&:hover {
border-radius: 8px;
background: #F6F7FA;
}
}
}
.supplyPrice-main {
display: flex;
gap: 20px;
.supplyPric-item {
padding: 20px 14px;
box-sizing: border-box;
color: #8A9099;
flex: 1;
border-radius: 4px;
transition: all .5s;
cursor: pointer;
.item-top {
border-bottom: 1px solid #EAECF0;
padding-bottom: 20px;
b {
color: #1E2226;
}
img {
width: 28px;
height: 28px;
margin-right: 12px;
}
}
.item-list {
margin-top: 16px;
text-align: left;
line-height: 18px;
p {
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
.item-list-name {
margin-bottom: 8px;
color: #1E2226;
}
}
}
.supplyPric-item1 {
background: linear-gradient(180deg, #F3F8FF 0%, #FFFFFF 17%, #FFFFFF 100%);
border: 1px solid #DFE2E6;
transition: all .5s ease;
&:hover {
color: #626573;
transition: all .5s ease;
background: linear-gradient(180deg, #F3F8FF 0%, #FFFFFF 60%);
box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.13);
}
}
.supplyPric-item2 {
background: linear-gradient(180deg, #FFFAF6 1%, rgba(255, 255, 255, 0.6233) 14%);
border: 1px solid #DFE2E6;
transition: all .5s ease;
&:hover {
color: #626573;
transition: all .5s ease;
box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.13);
background: linear-gradient(180deg, #FFFAF6 0%, #FFFFFF 60%);
}
}
.supplyPric-item3 {
background: linear-gradient(180deg, #FFF6F6 0%, rgba(255, 255, 255, 0.8151) 14%, rgba(255, 255, 255, 0) 100%);
border: 1px solid #DFE2E6;
transition: all .5s ease;
&:hover {
color: #626573;
transition: all .5s ease;
box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.13);
background: linear-gradient(180deg, #FFF6F6 0%, #FFFFFF 60%);
}
}
}
}
.home-main-right {
flex: 0 0 auto;
/* 右边盒子不伸缩 */
min-width: 260px;
/* 右边盒子最小宽度 */
max-width: 328px;
/* 右边盒子最大宽度 */
width: 260px;
/* 在 1440px 屏幕下的固定宽度 */
.common-area {
padding: 20px 0px;
margin: 0 14px;
text-align: left;
font-size: 14px;
line-height: normal;
letter-spacing: 0.08em;
/* text/text_1 */
h2 {
font-weight: bold;
margin: 0;
font-size: 16px;
color: #1E2226;
span {
font-size: 14px;
color: #8A9099;
font-weight: normal;
}
}
}
.accountBalance {
padding: 27px 14px;
margin: 0;
margin-bottom: 12px;
align-items: baseline;
background: #fff;
b {
font-family: Roboto Condensed;
font-size: 32px;
font-weight: bold;
line-height: 27px;
letter-spacing: normal;
color: #1F2026;
}
span {
font-size: 14px;
font-weight: normal;
// color: #8A9099;
color: #1F2026;
&:nth-last-child(1){
color: #8A9099;
}
}
}
.importantReminder {
border-bottom: 1px solid #EAECF0;
.reminder1,
.reminder2 {
border-radius: 4px;
background: linear-gradient(271deg, #F8DCDC 0%, #FCEEEE 60%);
padding: 14px 8px;
border: 1px solid transparent;
margin-top: 20px;
transition: all .3s;
&:hover {
transition: all .3s;
border-radius: 4px;
background: linear-gradient(271deg, #F8DCDC 0%, #FCEEEE 60%);
/* main/main_erro */
border: 1px solid #FF4D4F;
}
div {
display: flex;
justify-content: flex-end;
color: #FF4D4F;
margin-top: 10px;
width: 100%;
}
}
}
.carouselImage {
padding-bottom: 0;
img {
width: 100%;
}
}
.preferredMarket {
border-bottom: 1px solid #EAECF0;
h2 {
margin-bottom: 20px;
}
.sales-item {
padding: 12px 0;
color: #8A9099;
font-size: 12px;
transition: all .3s ease-in-out;
.systemIcon {
display: none;
width: 12px;
height: 8px;
margin-left: 12px;
}
span {
font-size: 14px;
color: #1F2026;
margin-bottom: 6px;
}
&:hover {
.systemIcon {
display: block;
}
span {
transition: all .3s ease-in-out;
color: #006AFF;
}
}
}
img {
width: 34px;
height: 34px;
margin-right: 10px;
}
}
.customWrap {
h2 {
margin-bottom: 20px;
}
img {
/* 自动布局子元素 */
width: 106px;
height: 106px;
z-index: 0;
}
}
.usageGuide {
border-bottom: 1px solid #EAECF0;
h2 {
margin-bottom: 20px;
}
p {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
}
}
}
}
@media screen and (max-width: 1440px) {
.home-main-right {
transition: all .3s;
width: 286px !important;
/* 在 1440px 屏幕下的固定宽度 */
}
}
@media screen and (max-width: 1200px) {
.home-main-right {
transition: all .3s;
width: 260px !important;
/* 在 1440px 屏幕下的固定宽度 */
}
}
@media screen and (min-width: 1441px) {
.home-main-right {
transition: all .3s;
width: 328px !important;
/* 在大于 1440px 屏幕下的最大宽度 */
}
}
</style>

125
src/views/PageTemplete.vue
View File

@ -1,125 +0,0 @@
<template>
<div class="pageTemplete-wrap min-flex">
<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>
</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;
padding: 12px;
// overflow-y: auto;
box-sizing: border-box;
}
::v-deep .el-tabs__nav-wrap {
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: #DFE2E6;
}
</style>

62
src/views/Personalization.vue
View File

@ -1,62 +0,0 @@
<template>
<div class="domain-wrap">
<p>设置自己的域名，需要做 2 步站外操作。如果暂时未准备好，或打算稍后设置，可以先选用平台免费域名，平台随时支持域名修改。 </p>
<div class="domain-box">
<div class="domain-item">
<p>1.&emsp;域名必须在阿里云完成 ICP 备案</p>
<p>备案网址：https://beian.aliyun.com</p>
</div>
<div class="domain-item">
<p>2.&emsp;域名要解析到平台服务器上</p>
<p>备案网址：https://beian.aliyun.com</p>
</div>
<div class="domain-item">
<p>3.&emsp;域名填写</p>
<el-input placeholder="填写完整域名" />
</div>
</div>
</div>
</template>
<script>
// import GuipInput from '@/components/GuipInput.vue';
export default {
name: '',
props: [''],
components: {
// GuipInput,
},
data() {
return {
}
},
methods: {
onSwitchChange(data) {
console.log(data, '---');
}
}
}
</script>
<style lang="scss">
.domain-wrap {
.domain-item{
margin-bottom: 10px;
}
.domain-item p:last-child{
padding-left: 23px;
color: #8A9099;
}
p{
text-align: left;
line-height: 18px;
margin-bottom: 8px;
}
.domain-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
}
</style>

1756
src/views/Register.vue
View File

File diff suppressed because it is too large

358
src/views/SiteBaseSetting.vue
View File

@ -1,358 +0,0 @@
<template>
<div class="site-setting-wrap min-flex-right">
<div class="siteMessage flex-common" id="siteMessage1">
<h3>站点信息</h3>
<el-form :model="siteForm" :rules="siteFormrules" ref="siteForm">
<div class="flex-wrap">
<div class="flex-left">
<GuipInput ref="GuipInput" column="column" label="站点简称" :maxlength="10" :showWordLimit="true"
desc="这是是右侧文案" v-model="siteForm.site_alias" prop="site_alias"
placeholder="仅自己区分站点销售渠道，客户看不到" />
<GuipInput ref="GuipInput" column="column" label="公司名称" desc="在站点首页底部“关于我们”展示"
v-model="siteForm.company_name" prop="company_name" placeholder="非必填" />
</div>
<div class="flex-line"></div>
<div class="flex-right">
<GuipInput ref="GuipInput" column="column" label="公司地址" desc="在站点首页底部“关于我们”展示"
v-model="siteForm.company_address" prop="company_address" placeholder="非必填" />
<GuipInput ref="GuipInput" column="column" label="公司电话" desc="在站点首页底部“关于我们”展示"
v-model="siteForm.company_phone" prop="company_phone" placeholder="非必填" />
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm')" />
</div>
<div class="siteMessage flex-common" id="siteMessage2">
<h3>站点信息</h3>
<el-form :model="siteForm1" :rules="siteFormrules1" ref="siteForm1">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24" label="域名来源" required="true">
<GuipRadio slot="formDom" v-model="siteForm1.domain_source" :options="domain_source"
prop="domain_source" @change="domain_radioChange" />
</GuipFormItem>
</div>
<div class="flex-line"></div>
<div class="flex-right">
<GuipFormItem column="column" label="域名设置" required="true">
<GuipInput slot="formDom" v-model="siteForm1.domain_set" placeholder="仅支持数字、字母">
<span slot="appendshow" style="width: 200px;">
<GuipSelect width="200px" v-model="domainSuffix" placeholder="选择后缀"
:filterable="true" allow-create :options="domainOptions">
<!-- <el-option
v-for="item in domainOptions"
:key="item"
:label="item"
:value="item"
/> -->
</GuipSelect>
</span>
</GuipInput>
</GuipFormItem>
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm1')" />
</div>
<div class="siteMessage flex-common" id="siteMessage3">
<h3>店铺收款</h3>
<el-form :model="siteForm2" ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24">
<div slot="formLeft" class="form-top-icon">
<img src="@/assets/register/weixin.svg" style="width: 26px;height: 26px;"
alt=""><span>微信收款</span>
</div>
<CustomDropdown slot="formDom" width="100%" v-model="siteForm1.weixin_pay"
:options="options_weixin" @change="changeSelectWeixin" placeholder="请选择"
:options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
<!-- 自定义触发按钮 -->
<template #trigger>
<span v-if="selectedItemWeixin"
style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
select_placeholder_weixin ? select_placeholder_weixin :
selectedItemWeixin.desc }}</span>
<span v-else>请选择</span>
</template>
<template #normal>
<div class="flex flex-between noraml-jump">
<div class="left">
<b>绑定新微信收款</b>
<p class="one">需要使用您公司的微信支付</p>
<p>需在微信商户平台-产品中心开通Native支付</p>
</div>
<div class="right">
<GuipButton type="primary" size="medium">前往绑定</GuipButton>
</div>
</div>
</template>
<!-- 自定义下拉选项 -->
<template #item="{ item }">
<div class="flex-between">
<div class="left">
<p class="one">{{ item.label }}</p>
<p>{{ item.desc }}</p>
</div>
<div class="right">
<img v-if="selectedItem.value == item.value"
src="../assets/register/drop-selected.svg" alt="">
</div>
</div>
</template>
</CustomDropdown>
</GuipFormItem>
<GuipFormItem column="column">
<div slot="formLeft" class="form-top-icon">
<img src="@/assets/register/zhifubao.svg" style="width: 26px;height: 26px;"
alt=""><span>支付宝收款</span>
</div>
<!-- <GuipSelect slot="formDom" v-model="siteForm2.zhifubao_pay" prop="zhifubao_pay"
:options="options_zhifubao" placeholder="未绑定支付宝收款" /> -->
<CustomDropdown slot="formDom" width="100%" v-model="siteForm1.zhifubao_pay"
:options="options_weixin" @change="changeSelectWeixin" placeholder="请选择"
:options_null="options_weixin_null" @changeNormal="changeNormalWeixin">
<!-- 自定义触发按钮 -->
<template #trigger>
<span v-if="selectedItemWeixin"
style="color: #1E2226;font-family: Microsoft YaHei UI;">{{
select_placeholder_weixin ? select_placeholder_weixin :
selectedItemWeixin.desc }}</span>
<span v-else>请选择</span>
</template>
<template #normal>
<div class="flex flex-between noraml-jump">
<div class="left">
<b>绑定新支付宝收款</b>
<p class="one">需要使用您公司的支付宝支付</p>
<p>需在支付宝商户平台-产品中心开通Native支付</p>
</div>
<div class="right">
<GuipButton type="primary" size="medium">前往绑定</GuipButton>
</div>
</div>
</template>
<!-- 自定义下拉选项 -->
<template #item="{ item }">
<div class="flex-between">
<div class="left">
<p class="one">{{ item.label }}</p>
<p>{{ item.desc }}</p>
</div>
<div class="right">
<img v-if="selectedItem.value == item.value"
src="../assets/register/drop-selected.svg" alt="">
</div>
</div>
</template>
</CustomDropdown>
</GuipFormItem>
</div>
<div class="flex-line"></div>
<div class="flex-right">
<!-- <div>{{ input1 }}</div> -->
<div class="addStore flex">
<div></div>
添加其他收款方式
</div>
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="submitForm('siteForm2')" />
</div>
</div>
</template>
<script>
// import GuipInput from '@/components/GuipInput.vue';
import store from '../store';
import { mapState } from 'vuex';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipRadio from '@/components/GuipRadio.vue';
import CustomDropdown from '@/components/CustomDropdown.vue';
import GuipButton from '@/components/GuipButton.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
import GuipSelect from '@/components/GuipSelect.vue';
// import {setHighActive} from '@/utils/common';
export default {
// 站点设置
name: '',
props: [''],
components: {
GuipRadio,
GuipFormItem,
GuipInput,
CustomDropdown,
GuipButton,
GroupFormBtns,
GuipSelect
},
data() {
return {
domainInput: '',
domainSuffix: '.chachongz.com',
domainOptions: [
{
value: '1',
label: '.chachongz.com'
},
{
value: '2',
label: '.turnitin.org.cn'
},
{
value: '3',
label: '.jishu.chachongz.com'
},
],
siteForm: {
company_name: '',
company_address: '',
company_phone: '',
site_alias: '',
},
siteFormrules: {
site_alias: [
{ required: true, message: '请输入站点简称', trigger: 'blur' }
]
},
siteForm1: {
domain_set: '',
domain_source: '平台免费域名',
},
siteForm2: {
zhifubao_pay: '',
weixin_pay: '',
},
siteFormrules1: {
domain_source: [
{ required: true, message: '请输入站点简称', trigger: 'blur' }
]
},
domain_source: [
{ label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" },
{ label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" },
],
options_weixin_null: {
label: '暂无收款账号',
value: '暂时没有收款账号，我想稍后配置',
desc: '暂无收款账号，稍后配置'
},
select_placeholder_weixin: '暂无收款账号，稍后配置',
selectedItemWeixin: {},//微信收款方式
options_weixin: [],
options_zhifubao: [],
}
},
computed: {
...mapState(['pageTitle','siteSettingData']) // 从Vuex映射showSidebar状态到组件的计算属性中
},
created(){
store.commit('SET_CUSTOMIZE', true);
store.commit('SET_SLIDER_MENU','siteSettingData');
},
mounted() {
store.commit('SET_PAGETITLE', '基本设置');
},
methods: {
changeNormalWeixin() {
},
changeSelectWeixin(item, flag) {
if (flag) {
this.select_placeholder_weixin = this.options_weixin_null.desc;
return
}
this.selectedItem = { ...item };
console.log(this.selectedItem, 'this.selectedItem====');
},
// 销售渠道
domain_radioChange(type) {
console.log(type, '--');
},
onSwitchChange(data) {
console.log(data, '---');
},
submitForm(form) {
console.log(this.$refs[form], '-----');
this.$refs[form].validate((valid) => {
console.log(this[form], '======formxinxi');
if (valid) {
alert('提交成功!');
} else {
return false;
}
});
},
cancelClick() {
console.log('quxiao');
},
confirmClick(type) {
console.log(type, '确认');
}
}
}
</script>
<style lang="scss">
.siteMessage {
border-radius: 4px;
transition: all .5s;
border: 1px solid transparent;
}
.addStore {
margin-top: 12px;
// border-radius: 4px;
// opacity: 1;
// /* text/text_white_2 */
// border: 1px dashed #BABDC2;
// padding: 15px 20px;
// color: #626573;
// justify-content: center;
// img {
// margin-right: 12px;
// }
}
.site-setting-wrap {
width: 100%;
padding: 12px ;
box-sizing: border-box;
}
#siteMessage2 {
margin: 12px 0;
}
.domain-wrap {
.domain-item {
margin-bottom: 10px;
}
.domain-item p:last-child {
padding-left: 23px;
color: #8A9099;
}
p {
text-align: left;
line-height: 18px;
margin-bottom: 8px;
}
.domain-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
}
</style>

31
src/views/SiteH5.vue
View File

@ -1,31 +0,0 @@
<template>
<div class="site-personal-wrap min-flex-right">
<div class="siteMessage flex-common" id="siteMessage4">
<h3>搜索引擎优化（SEO） <span>通过SEO设置，可以免费获得流量、提高网站在搜索引擎中的排名</span></h3>
</div>
</div>
</template>
<script>
// import request from "./utils/request";
import { mapState } from 'vuex';
import store from '../store';
export default {
name: 'Sidebar',
props: {},
data() {
return {
}
},
mounted() {
store.commit('SET_PAGETITLE', '移动端设置');
},
computed: {
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
},
methods:{
}
}
</script>

529
src/views/SiteList.vue
View File

@ -1,529 +0,0 @@
<!-- 站点列表 -->
<!-- :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
:filter-method="filterHandler" -->
<template>
<div class="siteList-wrap column">
<div class="siteList-main ">
<div class="flex-between site-top">
<div class="left flex">
<h2>站点列表</h2>
<GuipButton size="medium" class="addgroupBtn" type="normal"
:btnstyle="{ width: '115px', hright: '32px' }" @click="addGroupVisiable = true">
<img src="@/assets/site/addIcon.svg" alt="">新增分组
</GuipButton>
<div style="width: 120px;">
<GuipSelectFilter v-model="selectedValue" :options="options" :searchable="true" placeholder="请选择"
:filter-method="customFilter" search-placeholder="搜索..." />
</div>
<!-- <searchable-select :styleObj="{
'width': '140px', 'height': '32px'
}" v-model="selectedValue1" :options="options1" :searchable="true" placeholder="请选择"
search-placeholder="关键词搜索" @change="handleChange" />
<el-form>
<GuipSelect width="600px" v-model="selectedValue" :options="options" defaultValue="选项1" />
</el-form>
-->
<!-- <GuipSelectFilter2
v-model="selectedValue"
:options="options1"
:searchable="true"
placeholder="请选择水果"
search-placeholder="搜索水果名称"
no-data-text="没有找到匹配的水果"
@change="handleFruitChange"
/> -->
</div>
<div class="right">
<GuipButton size="medium" @click="addSite" :btnstyle="btnstyleObj_add" type="primary">新增站点
</GuipButton>
</div>
</div>
<el-form>
<el-table :data="tableData" style="width: 100%" >
<!-- 其他列 -->
<el-table-column prop="short_name" label="站点简称" width="210">
<template slot-scope="scope">
<a class="name_link flex cell_render" :href="scope.row.domain" target="_blank">
{{ scope.row.short_name }}
<img class="edit_icon" src="@/assets/site/form_link.svg" alt="">
</a>
</template>
</el-table-column>
<el-table-column prop="regtime" label="注册时间"></el-table-column>
<!-- 价格列 -->
<el-table-column label="站点分组" prop="group">
<template slot-scope="scope">
<!-- <a class="name_link flex cell_render" :href="scope.row.link" target="_blank">
{{ scope.row.name }}
<img class="edit_icon" src="@/assets/site/form_link.svg" alt="">
</a> -->
<!-- <searchable-select slot="reference" :styleObj="{ 'width': '140px', 'height': '32px','position': 'absolute',
'z-index': '1119' }" v-model="scope.row.group"
:options="options1" :searchable="true" placeholder="请选择" search-placeholder="关键词搜索"
@change="handleChange" /> -->
<!-- <GuipSelect width="600px" v-model="scope.row.group" prop="card" :options="options"
defaultValue="选项1" /> -->
<GuipSelectFilter v-model="scope.row.group" :options="options" :searchable="true"
placeholder="请选择" :filter-method="customFilter" search-placeholder="搜索..." />
<!-- <GuipSelectFilter2
v-model="scope.row.group"
:options="options1"
:searchable="true"
placeholder="请选择水果"
search-placeholder="搜索水果名称"
no-data-text="没有找到匹配的水果"
@change="handleFruitChange"
/> -->
</template>
<!-- <template v-slot="{ row, $index }">
<el-popover v-model="row.group_popover" placement="top" trigger="manual"
:ref="`popover-${$index}`" @show="popshow">
<searchable-select slot="reference" :styleObj="{ 'width': '140px', 'height': '32px' }" v-model="selectedValue1"
:options="options1" :searchable="true" placeholder="请选择" search-placeholder="关键词搜索"
@change="handleChange" >
<span @click="handlePriceClick(row, $index, 'group')">
<div class="flex cell_render">
<span v-if="row.group" :key="random()">{{ groupList[row.group] }}</span>
<img class="edit_icon" src="@/assets/site/drop_icon.svg" alt="">
</div>
</span>
</searchable-select>
</el-popover>
</template> -->
</el-table-column>
<el-table-column prop="phone_services" label="手机服务" :filters="phoneService"
:filter-method="filterHandler">
</el-table-column>
<!-- <el-table-column prop="department" label="部门">
<template #default="{ row, $index }">
<template v-if="editingIndex === $index">
<searchable-select v-model="row.department" :options="departmentOptions"
@change="handleDepartmentChange(row, $index)" @click.native.stop />
</template>
<template v-else>
<span @click="startEditing($index)">{{ row.department }}</span>
</template>
</template>
</el-table-column> -->
<el-table-column prop="config_progress_status" label="状态" width="195">
<!-- <template v-slot="{ row, $index }">-->
<!-- <el-popover v-model="row.status_popover" placement="top" trigger="manual"-->
<!-- :ref="`popover-${$index}`" @show="popshow">-->
<!-- &lt;!&ndash; 弹框内容 &ndash;&gt;-->
<!-- <div class="statusList">-->
<!-- <p class="flex">-->
<!-- <img style="margin-right: 8px;" src="@/assets/site/info_filled.svg"-->
<!-- alt="">自有域名验证未通过-->
<!-- </p>-->
<!-- <p class="flex" style="margin: 12px 0;">-->
<!-- <img style="margin-right: 8px;" src="@/assets/site/info_filled.svg"-->
<!-- alt="">收款方式未配置-->
<!-- </p>-->
<!-- <p class="flex">-->
<!-- <img style="margin-right: 8px;" src="@/assets/site/info_filled.svg"-->
<!-- alt="">支付宝收款账号未配置-->
<!-- </p>-->
<!-- </div>-->
<!-- &lt;!&ndash; 触发弹框的按钮 &ndash;&gt;-->
<!-- <span slot="reference" @click="handlePriceClick(row, $index, 'status')">-->
<!-- <div class="flex cell_render">-->
<!-- <span :class="(row.status == '0' ? 'in_services' : 'in_config')">{{-->
<!-- row.status == '0' ? '运行中' : '配置中' }}</span>-->
<!-- <img class="edit_icon" v-if="row.status == '1'"-->
<!-- src="@/assets/site/more_setIcon.png" alt="">-->
<!-- </div>-->
<!-- </span>-->
<!-- </el-popover>-->
<!-- </template>-->
</el-table-column>
<el-table-column fixed="right" label="操作" width="182">
<template slot-scope="scope">
<div class="flex">
<el-button @click="handleServiceClick(scope.row)" type="text">服务列表</el-button>
<el-button @click="handleSetClick(scope.row)" type="text">站点设置</el-button>
</div>
</template>
</el-table-column>
</el-table>
<!-- <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'-->
<!-- :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"-->
<!-- :total="tableData.length">-->
<!-- </el-pagination>-->
</el-form>
</div>
<GuipDialog type="normal" width="396px" :dialogVisible="addGroupVisiable" title="温馨提示" :show-close-button="false"
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="handleConfirmAddGroup" @cancel="handleCancelAddGroup"
@dialogVisibleChange="dialogVisibleChange">
<el-input ref="GuipInput" width="252px" v-model="groupName" label="分组名称" placeholder="请输入名称" />
</GuipDialog>
<Footer></Footer>
</div>
</template>
<script>
import Footer from '@/components/Footer.vue';
// import GuipInput from '@/components/GuipInput.vue';
import GuipButton from '@/components/GuipButton.vue';
// import GuipSelect from '@/components/GuipSelect.vue';
import GuipSelectFilter from '@/components/GuipSelectFilter.vue';
import GuipDialog from '@/components/GuipDialog.vue';
// import SearchableSelect from '@/components/GuipSelectFilter1.vue';
// import GuipSelectFilter2 from '@/components/GuipSelectFilter2.vue';
// import SearchableSelect from '@/components/GuipSelectFilter2.vue'
export default {
name: 'sitelist',
components: {
// HelloWorld
// GuipInput,
GuipDialog,
GuipSelectFilter,
// SearchableSelect,
// GuipSelectFilter2,
// SearchableSelect,
// GuipSelect,
Footer,
GuipButton
},
data() {
return {
searchText: '',
filteredOptions: this.options,
editingIndex: -1,
gid: 0,//分组id
groupName: '',//分组名称
addGroupVisiable: false,
selectedValue: '',
fruitOptions: [
{ label: '苹果', value: 'apple' },
{ label: '香蕉', value: 'banana' },
{ label: '橙子', value: 'orange' },
{ label: '葡萄', value: 'grape' },
{ label: '西瓜', value: 'watermelon' },
{ label: '菠萝', value: 'pineapple' }
],
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' },
// 更多选项...
],
selectedValue1: '',
options1: [
{ label: '苹果', value: '1' },
{ label: '香蕉', value: '2' },
{ label: '橙子', value: '22' },
{ label: '葡萄', value: '13' },
{ label: '西瓜', value: '31' },
{ label: '菠萝', value: '32' },
{ label: '菠萝1', value: '14' },
{ label: '菠萝2', value: '15' },
{ label: '菠萝21', value: '156' },
{ label: '菠萝22', value: '24' },
],
btnstyleObj_add: {
width: '90px',
height: '30px'
},
tableData: [
// {
// name: '哈哈哈',
// link: 'http://www.chachongz.com',
// registerDate: '2025.02.18',
// group: '1',
// phoneService: '撒大事',
// status: '1',//配置中中
// },
// {
// name: '知网学诚教育',
// link: 'http://new.checkcopy.com',
// registerDate: '2025.02.18',
// group: '2',
// phoneService: '设计部',
// status: '0',//运行中
// },
],
groupList: {
1: '内部测试',
2: '查重站点'
},
phoneServicelist:
{
0: '不限',
1: ' H5',
2: '小程序',
3: '无手机服务'
},
currentPage: 1, //当前页
pageSize: 2, //每页的容量
total: 0, //列表总数
phoneService: [
{
text: '不限',
value: '0'
},
{
text: 'H5',
value: '1'
},
{
text: '小程序',
value: '2'
},
{
text: 'H5以及小程序',
value: '3'
},
]
}
},
mounted() {
const list = ['group', 'status']
list.forEach(item => {
this.tableData = this.tableData.map(item1 => {
item1[item + '_popover'] = false
return {
...item1,
}
})
})
console.log(this.tableData, '000--');
this.getData()
},
methods: {
getData() {
const that = this
that.tableData = []
this.$http('POST', '/agentnew/ajax_get_site_list', {
gid: that.gid,
}).then(response => {
this.$nextTick(() => {
that.tableData = Object.values(response.data.sitelist);
})
}).catch(error => {
console.error(error, 'error')
})
},
// 处理搜索输入
handleSearch(keyword) {
console.log(keyword,'keyword---');
if (this.filterMethod && typeof this.filterMethod === 'function') {
// 使用自定义筛选方法
this.filteredOptions = this.filterMethod(keyword, this.options)
} else {
// 默认筛选方法
if (!keyword) {
this.filteredOptions = this.options
} else {
const lowerKeyword = keyword.toLowerCase()
this.filteredOptions = this.options.filter(item => {
const label = item[this.labelKey] || ''
return label.toString().toLowerCase().includes(lowerKeyword)
})
}
}
},
startEditing(index) {
this.editingIndex = index
// 保存原始数据以便取消编辑时恢复
this.originalData = JSON.parse(JSON.stringify(this.tableData[index]))
},
saveEditing() {
this.editingIndex = -1
this.originalData = null
this.$message.success('保存成功')
},
cancelEditing() {
if (this.originalData) {
this.$set(this.tableData, this.editingIndex, this.originalData)
}
this.editingIndex = -1
this.originalData = null
},
handleDepartmentChange(row, index) {
console.log('部门已修改:', index, row.department)
// 可以在这里添加部门变更后的逻辑
},
// 确认按钮事件
handleConfirmAddGroup() {
this.$message.success('点击了确认按钮');
this.addGroupVisiable = false;
},
// 取消按钮事件
handleCancelAddGroup() {
this.$message.warning('点击了取消按钮');
this.addGroupVisiable = false;
},
dialogVisibleChange(data) {
console.log(data, 'data098908090');
},
handleChange(value) {
console.log('选中值变化:', value)
},
popshow() {
var ariaEls = document.querySelectorAll('.el-popover')
ariaEls.forEach((item) => {
item.removeAttribute('aria-hidden')
})
ariaEls = document.querySelectorAll('.el-radio__original')
ariaEls.forEach((item) => {
item.removeAttribute('aria-hidden')
})
},
random() {
var randomNumber = Math.random();
return randomNumber
},
handleSizeChange(val) {
this.pageSize = val
},
handleCurrentChange(val) {
this.currentPage = val
},
// 列筛选
filterHandler(value, row, column) {
const property = column['property'];
return row[property] === value;
},
handleSetClick(row) {
console.log(row);
},
handleServiceClick(row) {
console.log(row);
},
addGroup() {
// 新增分组
},
addSite() {
// 新增站点
},
// 自定义搜索筛选
customFilter(keyword, options) {
if (!keyword) return options
return options.filter(item => {
// 自定义筛选逻辑
return item.label.includes(keyword) || item.value.includes(keyword)
})
},
customFilter1(keyword, options) {
if (!keyword) return options
// 自定义筛选逻辑，比如同时匹配 label 和 value
return options.filter(item => {
return (
item.label.includes(keyword) ||
item.value.toString().includes(keyword)
)
})
},
handleFruitChange(value) {
console.log('水果选择变化:', value)
},
// 气泡弹出框
handlePriceClick(row, index, type) {
// 关闭其他行的弹框
this.tableData.forEach((item, i) => {
if (i !== index) {
item[type + '_popover'] = false;
}
});
// 打开当前行的弹框
row[type + '_popover'] = true;
row['edit_' + type] = row[type]
// row.edit_price = row.price; // 初始化输入框的值
},
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-popover {
padding: 24px 32px !important;
}
.siteList-wrap {
padding: 12px 12px 0;
width: 100%;
height: 100%;
box-sizing: border-box;
.in_services {
color: #0DAF49;
}
.in_config {
color: #FF4D4F;
}
.addgroupBtn {
margin: 0 12px;
img {
margin-right: 4px;
}
}
.siteList-main {
flex: 1;
padding: 32px 36px;
border-radius: 4px;
box-sizing: border-box;
width: 100%;
background: #FFFFFF;
.site-top {
margin-bottom: 32px;
.left {
h2 {
margin: 0;
}
}
}
.statusList {
padding: 24px 32px;
img {
margin-right: 8px;
}
p {
display: flex;
align-items: center;
}
letter-spacing: 0.08em;
color: #1E2226;
}
.edit_icon {
width: 16px;
height: 16px;
display: none;
transition: all .3s;
margin-left: 8px;
}
.name_link {
text-decoration: none;
color: #1E2226;
}
.el-table__row:hover {
.edit_icon {
display: block;
transition: all .3s;
}
}
}
}
</style>

508
src/views/SitePersonalization.vue
View File

@ -1,508 +0,0 @@
<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>

567
src/views/SiteSem.vue
View File

@ -1,567 +0,0 @@
<template>
<div class="site-sem-wrap min-flex-right">
<div class="siteMessage flex-common" id="siteMessage11">
<h3>搜索引擎优化（SEO） <span>通过SEO设置，可以免费获得流量、提高网站在搜索引擎中的排名</span></h3>
<el-form ref="formRef" :model="semForm1">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24" label="站点标题（T：title）">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
v-model="semForm1.title" placeholder="建议80字内">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" label="站点关键词（K：keyword）">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea"
v-model="semForm1.keyWord">
</GuipInput>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="站点描述（D：description）">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea"
v-model="semForm1.desc">
</GuipInput>
</GuipFormItem>
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('semForm1')" />
</div>
<div class="siteMessage flex-common mt12" id="siteMessage12">
<h3>搜索引擎竞价（SEM） <span>通过SEM设置，获得流量、提高网站在搜索引擎中的排名</span></h3>
<el-form ref="baiduRef" class="bidform baidu-form" :model="semFormbid1" v-if="bidList.includes('baidu')">
<div class="semBidWrap">
<h3 class="flex-between">
<p>百度OCPC竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
<div class="flex close-bid point" @click="deleteBid('baidu')">删除<img
src="@/assets/register/close.svg" alt=""></div>
</h3>
<div class="baidu-wrap bidWrap">
<div class="bidwrap-item">
<div class="bidwrap-item-top mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
<div class="top-right column">
<b>输入Token</b>
<p>百度创建转化追踪：转化类型选择“服务购买成功”，接入方式选择“线索API”，复制token，填入下方输入框。<img
src="@/assets/site/form_qua_ic.svg" alt=""> 指南 </p>
</div>
</div>
<div class="bidwrap-item-bot flex">
<div style="flex: 1;margin-right: 10px;">
<GuipInput ref="GuipInput" width="100%" v-model="semFormbid1.token"
placeholder="请输入Token" />
</div>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }" @click="semFormConmit('baidu','token')">确认</GuipButton>
</div>
</div>
<div class="bidwrap-item">
<div class="bidwrap-item-top mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
<div class="top-right column">
<b>联调创建OCPC</b>
<p>创建转化追踪后：点击该条记录的“联调”，复制带有bd-vid的推广url，复制到下方输入框，点击按钮开始联调。<img
src="@/assets/site/form_qua_ic.svg" alt=""> 指南 </p>
</div>
</div>
<div class="bidwrap-item-bot flex">
<div style="flex: 1;margin-right: 10px;">
<GuipInput ref="GuipInput" width="100%" v-model="semFormbid1.url"
placeholder="请输入url" />
</div>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }" @click="semFormConmit('baidu','url')">开始联调
</GuipButton>
</div>
</div>
</div>
</div>
</el-form>
<el-form class="bidform" ref="360Ref" :model="semFormbid2" v-if="bidList.includes('360')">
<div class="semBidWrap">
<h3 class="flex-between">
<p>360OCPC竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
<div class="flex close-bid point" @click="deleteBid('360')">删除<img
src="@/assets/register/close.svg" alt=""></div>
</h3>
<div class="baidu-wrap bidWrap">
<div class="beforeNotice">
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
<p class="mt12 flex">1. <a href="" class="flex"> <img
src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台</p>
<p class="mt10 flex">2. <a href="" class="flex"> <img
src="@/assets/site/form_linkActive.svg"
alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。</p>
</div>
<div class="bidwrap-item">
<div class="column">
<p class="common_title">AppKey 和 AppSecret </p>
<p class="common_text mt10 mb24" style="text-align: left;">点击前期准备事项第2步页面中的【投放说明】按钮，选择【API回传】，点击【获取Key&Secret】，将 AppKey 和 AppSecret 填入表中保存即可</p>
</div>
<div class="biditem360 mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
<b>AppKey</b>
<div style="flex: 1;margin-right: 10px;">
<GuipInput ref="GuipInput" width="100%" v-model="semFormbid2.appKey"
placeholder="请输入" />
</div>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="semFormConmit('360','appKey')">确认</GuipButton>
</div>
<div class="biditem360 mb24 flex">
<img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
<b>AppSecret</b>
<div style="flex: 1;margin-right: 10px;">
<GuipInput ref="GuipInput" width="100%" v-model="semFormbid2.appSecret"
placeholder="请输入" />
</div>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="semFormConmit('360','appSecret')">确认</GuipButton>
</div>
</div>
</div>
</div>
</el-form>
<el-form ref="formRef" class="bidform tcpr-wrap" :model="semFormbid3" v-if="bidList.includes('mast')">
<div class="semBidWrap">
<h3 class="flex-between">
<p>必应TCPA竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
<div class="flex close-bid point" @click="deleteBid('360')">删除<img
src="@/assets/register/close.svg" alt=""></div>
</h3>
<div class="baidu-wrap bidWrap">
<div class="beforeNotice">
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
<p class="mt12 flex"><i>1.</i> <a href="" class="flex"> <img
src="@/assets/site/form_linkActive.svg" alt="">前往微软云</a>（Azure），登录后填写个人资料并完成注册。
</p>
<p class="mt10 flex"><i>2.</i> <a href="" class="flex"> <img
src="@/assets/site/form_linkActive.svg"
alt="">前往应用注册</a>，侧边栏点击“应用注册”，然后在右侧应用列表中注册应用程序</p>
<div>
<p>名称：填写应用名称</p>
<p>受支持的帐户类型：选择 任何组织目录(任何 Microsoft Entra ID 租户 - 多租户)中的帐户和个人 Microsoft 帐户(例如 Skype、Xbox)</p>
<p>重定向URI：忽略</p>
<p>点击：注册</p>
</div>
<p class="mt10"><i>3.</i> <span>应用配置，返回应用列表，在应用列表点击刚创建的应用，然后在应用概览页点击“添加重定向URI”->点击添加平台，选择移动和桌面应用程序->自定义重定向 URI，
<b>https://www.kuailelunwen.com/callback/microsoft_callback <img class="point" src="@/assets/site/form_copy.svg" alt=""></b></span>
</p>
</div>
<div class="bidwrap-item">
<div class="biditemMast mb12 flex-between">
<div class="bidwrap-item-top flex">
<img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
<div class="top-right column">
<b>配置应用信息</b>
<p>在微软云平台，获得应用程序(客户端) ID。并联系开户人员，获得开发者令牌Developer token </p>
</div>
</div>
<div class="flex">
<span :class="'yesSet'">已设置</span>
<GuipButton type="normal" :btnstyle="{ width: '126px', height: '38px' }"
@click="manageDialog('configAppInfo')">管理设置</GuipButton>
</div>
</div>
<div class="biditemMast mb12 flex-between">
<div class="bidwrap-item-top flex">
<img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
<div class="top-right column">
<b>配置离线转化信息</b>
<p class="flex"><a href="" class="flex"> <img
src="@/assets/site/form_linkActive.svg" alt="">前往微软云</a>，左上角切换有效的账户，从浏览器地址栏链接中获取aid的值和cid的值</p>
</div>
</div>
<div class="flex">
<span :class="'notSet'">未设置</span>
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
@click="manageDialog('configOffline')">立即设置</GuipButton>
</div>
</div>
<div class="biditemMast mb12 flex-between">
<div class="bidwrap-item-top flex">
<img class="bid-item-img" src="@/assets/site/step_3.png" alt="">
<div class="top-right column">
<b>创建离线转化</b>
<p>在微软云平台创建离线转化，创建成功后2个小时才生效，转化数据查看最晚有5-6小时延迟。 </p>
</div>
</div>
<div class="flex">
<span :class="'notSet'">未设置</span>
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
@click="manageDialog('createOffline')">立即设置</GuipButton>
</div>
</div>
<div class="biditemMast flex-between">
<div class="bidwrap-item-top flex">
<img class="bid-item-img" src="@/assets/site/step_4.png" alt="">
<div class="top-right column">
<b>登陆微软云</b>
<p>确认前3步完成，点击右侧“登录”按钮，登录微软云。 </p>
</div>
</div>
<div class="flex">
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
@click="manageDialog('login')">登录</GuipButton>
</div>
</div>
</div>
</div>
</div>
</el-form>
<div class="addStore flex" @click="addBid">
<div></div>
增加搜索竞价
</div>
</div>
<div class="siteMessage flex-common mt12" id="siteMessage13">
<h3>访问统计 <span>输入统计代码，便于统计浏览点击量(可以不填)</span></h3>
<el-form ref="formRef" :model="semForm3">
<GuipInput ref="GuipInput" width="100%" height="160px" type="textarea" v-model="semForm3.code">
</GuipInput>
</el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('semForm3')" />
</div>
<GuipDialog type="normal" width="457px" :dialogVisible="dialogVisibleBid" title="增加搜索竞价" :show-close-button="false"
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="handleConfirm" @cancel="handleCancel"
@dialogVisibleChange="dialogVisibleChange">
<el-radio-group v-model="bidAddRadio" class=" mt12 column" @input="radioChange">
<!-- <div style="margin-top: 16px;" class="column radio-wrap"> -->
<el-radio class="mb24" v-for="key in Object.keys(bidAddList)" :disabled="bidList.includes(key)"
:key="key" :label="key">{{
bidAddList[key] }}{{ bidList.includes(key) ? '（已添加）' : '' }}</el-radio>
<!-- </div> -->
</el-radio-group>
</GuipDialog>
<GuipDialog type="normal" :dialogVisible="dialogVisibleConfig" :title="diaTitle" :show-close-button="false"
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="handleConfirmConfig" @cancel="handleCancelConfig"
@dialogVisibleChange="dialogVisibleChange">
<ConfigOffLineConversion v-if="configType == 'configOffline'"/>
<ConfigAppInformation v-if="configType == 'configAppInfo'"/>
<CreateOffLine v-if="configType == 'createOffline'"/>
</GuipDialog>
</div>
</template>
<script>
import GuipInput from '@/components/GuipInput.vue';
import { mapState } from 'vuex';
import store from '../store';
// import GuipButton from '@/components/GuipButton.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import GuipButton from '@/components/GuipButton.vue';
import ConfigOffLineConversion from '@/components/site/ConfigOffLineConversion.vue';
import ConfigAppInformation from '@/components/site/ConfigAppInformation.vue';
import CreateOffLine from '@/components/site/CreateOffLine.vue';
export default {
// 站点设置
name: '',
props: [''],
components: {
CreateOffLine,
ConfigAppInformation,
ConfigOffLineConversion,
GuipInput,
GuipFormItem,
GuipButton,
GroupFormBtns,
GuipDialog
},
data() {
return {
configType:'configAppInfo',
diaTitle:'配置应用信息',
bidList: ['baidu', '360', 'mast'],
bidAddRadio: '',
bidAddList: {
'baidu': '百度OCPC竞价',
'360': '360OCPC竞价',
'mast': '必应TCPA竞价',
},
configTitle:{
createOffline:'创建离线转化',
configOffline:'配置离线转化信息',
configAppInfo:'配置应用信息',
},
dialogVisibleBid: false,
dialogVisibleConfig: false,
semForm1: {
title: '',
keyWord: '',
desc: ''
},
semForm2: {
title: '',
keyWord: '',
desc: ''
},
semForm3: {
code: '',
},
semFormbid1: {
token: '',
url: ''
},
semFormbid2: {
appKey: '',
appSecret: ''
},
semFormbid3: {
}
}
},
computed: {
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
},
mounted() {
store.commit('SET_PAGETITLE', '营销推广');
},
methods: {
addBid() {
this.dialogVisibleBid = true;
},
semFormConmit(type,key) {
console.log(key, 'key---');
},
radioChange(data) {
console.log(data, 'radio--data');
},
cancelClick() {
console.log('quxiao');
},
confirmClick(type) {
console.log(type, '确认');
},
// 确认按钮事件
handleConfirm() {
this.$message.success('点击了确认按钮');
this.dialogVisibleBid = false;
},
// 取消按钮事件
handleCancel() {
this.$message.warning('点击了取消按钮');
this.dialogVisibleBid = false;
},
manageDialog(type){
this.configType = type;
this.dialogVisibleConfig = true;
this.diaTitle = this.configTitle[type]
},
// 确认按钮事件
handleConfirmConfig() {
this.$message.success('点击了确认按钮');
this.dialogVisibleConfig = false;
},
// 取消按钮事件
handleCancelConfig() {
this.$message.warning('点击了取消按钮');
this.dialogVisibleConfig = false;
},
dialogVisibleChange(data) {
console.log(data, 'data098908090');
},
deleteBid(type) {
let index = this.bidList.indexOf(type)
this.bidList.splice(index, index + 1)
}
}
}
</script>
<style scoped lang="scss">
.site-sem-wrap {
width: 100%;
letter-spacing: 0.08em;
}
.notSet,.yesSet {
margin-right: 12px;
color: #FF4D4F;
}
.yesSet {
color: #00C261;
}
.bidform {
&:nth-child(even) {
margin: 32px 0;
}
}
.baidu-form{
.bidwrap-item{
margin-bottom: 18px;
}
}
.beforeNotice {
h4 {
margin: 0;
gap: 8px;
}
margin-bottom: 18px;
text-align: left;
box-sizing: border-box;
padding: 20px 14px;
border-radius: 4px;
/* middle/middle_blue_1 */
background: #F2F7FF;
/* middle/middle_blue_3 */
border: 1px solid #BFDAFF;
div {
margin-top: 2px;
padding-left: 23px;
p{
color: #8A9099;
}
}
p{
color: #1E2226;
i{
font-style: normal;
}
&:last-child{
display: flex;
align-items: stretch;
b{
font-weight: normal;
color: #8A9099;
display: inline-flex;
img{
margin-left: 4px;
}
}
}
}
a {
text-decoration: none;
color: #006AFF;
margin-right: 10px;
img {
margin-left: 12px;
margin-right: 12px;
}
}
}
.biditem360 {
b {
display: inline-block;
width: 80px;
text-align: left;
margin-right: 10px;
}
}
.addStore {
margin-top: 24px;
// transition: all .3s;
// &:active{
// opacity: 0.7;
// }
// div{
// width: 16px;
// height: 16px;
// background-image: url(../assets/addIcon.svg);
// margin-right: 12px;
// }
// &:hover{
// div{
// background-image: url(../assets/addIcon_light.svg);
// }
// border-color: #006AFF;
// color: #006AFF;
// }
}
.radio-wrap {}
.tcpr-wrap {
.bidwrap-item{
padding: 0 !important;
background: transparent !important;
.biditemMast{
background: #fff;
padding: 24px 16px;
}
}
.semBidWrap{
padding-bottom: 24rpx;
}
}
.semBidWrap {
background: #FAFAFA;
padding: 18px 14px;
box-sizing: border-box;
.el-form-item {
margin-bottom: 0;
}
.close-bid {
color: #626573;
font-size: 14px;
font-weight: normal;
transition: all .3s;
&:hover{
opacity: 0.7;
}
img {
width: 16px;
height: 16px;
margin-left: 6px;
}
}
.bidWrap {
.bidwrap-item {
padding: 24px 16px;
box-sizing: border-box;
border-radius: 8px;
background: #FFFFFF;
.bid-item-img {
width: 32px;
height: 32px;
margin-right: 22px;
}
.bidwrap-item-top {
.top-right {
p {
margin-top: 10px;
}
a{
text-decoration: none;
color: #006AFF;
img{
margin-right: 10px;
}
}
}
}
.bidwrap-item-bot {
padding-left: 54px;
justify-content: flex-end;
}
}
}
}
</style>

70
src/views/SiteSetting.vue
View File

@ -1,70 +0,0 @@
<template>
<div class="siteSetting-wrap">
<!-- <SetLeftMenu /> -->
<SliderMenu :menuData="siteSettingData" :customize="true"></SliderMenu>
<!--:menuList="menuList" :activeFloor="activeFloor" :curIndex="curIndex" -->
<!-- 主内容区域 -->
<main class="main-content" ref="scrollContainer" id="main-content">
<!-- 面包屑 位置 -->
<PageTitle v-if="path !='/siteSetting/siteSem'" className="min-flex-right"/>
<router-view></router-view>
<Footer></Footer>
</main>
</div>
</template>
<script>
// import SiteBaseSetting from './SiteBaseSetting.vue';
import PageTitle from '@/components/PageTitle.vue';
import Footer from '@/components/Footer.vue';
import { mapState } from 'vuex';
import SliderMenu from '@/components/SliderMenu.vue'
export default {
// 站点设置
name: '',
props: [''],
components: {
PageTitle,
Footer,
SliderMenu,
// SiteBaseSetting
},
data() {
return {
path:''
}
},
mounted(){
this.path =this.$route.path;
console.log(this.$route.path,'090-9090');
// this.$refs.scrollContainer.scrollTo(0)
},
computed: {
...mapState(['siteSettingData']) // 从Vuex映射showSidebar状态到组件的计算属性中
},
methods: {
}
}
</script>
<style scoped lang="scss">
.siteSetting-wrap {
display: flex;
height: calc(100vh - 62px);
overflow-y: auto;
}
// .sidebar {
// width: 250px;
// background: #f5f5f5;
// padding: 20px;
// }
.main-content {
flex: 1;
padding: 12px;
overflow-y: auto;
}
</style>
Write Preview
Loading…
Cancel
Save