You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

758 lines
32 KiB

<template>
<div class="main-content12">
<!-- page header -->
<div class="pageheader">
<span class="pagetitle">基本设置</span>
</div>
<!-- page content -->
<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">
<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="siteInfo.sitename" placeholder="建议80字内">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" label="站点关键词(K:keyword)">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea"
v-model="siteInfo.sitekeywords">
</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="siteInfo.sitedesc">
</GuipInput>
</GuipFormItem>
</div>
</div>
</el-form>
<GroupFormBtns @cancel="cancleUpdateSiteInfo" @confirm="updateSiteTDK" />
</div>
<div class="siteMessage flex-common mt12" id="siteMessage12">
<h3>搜索引擎竞价(SEM) <span>通过SEM设置,获得流量、提高网站在搜索引擎中的排名</span></h3>
<el-form ref="baiduRef" class="bidform baidu-form">
<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="siteInfo.bd_ocpc_token"
placeholder="请输入Token" />
</div>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="saveBaiduOcpcToken()">确认</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="bdurl" placeholder="请输入联调链接" />
</div>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="verifyBaiduOcpc()">开始联调
</GuipButton>
</div>
</div>
</div>
</div>
</el-form>
<el-form class="bidform" ref="360Ref">
<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="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F"
class="flex" target="_blank">
<img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
</p>
<p class="mt10 flex">
2. <a href="https://dianjing.e.360.cn/ocpc/list" class="flex" target="_blank">
<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="siteInfo.ocpc_360_appkey"
placeholder="请输入appkey" />
</div>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="save360Ocpc()">确认</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="siteInfo.ocpc_360_appsecret"
placeholder="请输入appsecret" />
</div>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="save360Ocpc()">确认</GuipButton>
</div>
</div>
</div>
</div>
</el-form>
<el-form ref="formRef" class="bidform tcpr-wrap">
<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="https://azure.microsoft.com/zh-cn/free" class="flex"
target="_blank"> <img src="@/assets/site/form_linkActive.svg"
alt="">前往微软云</a>(Azure),登录后填写个人资料并完成注册。
</p>
<p class="mt10 flex">
<i>2.</i> <a href="https://aka.ms/bingads-app" class="flex" target="_blank"> <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" v-if="siteInfo.bing_client_id&&siteInfo.bing_developer_token">
<span :class="'yesSet'">已设置</span>
<GuipButton type="normal" :btnstyle="{ width: '126px', height: '38px' }"
@click="manageDialog('configAppInfo')">管理设置</GuipButton>
</div>
<div class="flex" v-else>
<span :class="'notSet'">未设置</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="https://ads.microsoft.com/" class="flex" target="_blank"> <img src="@/assets/site/form_linkActive.svg"
alt="">前往微软广告</a>,左上角切换有效的账户,从浏览器地址栏链接中获取aid的值和cid的值</p>
</div>
</div>
<div class="flex" v-if="siteInfo.bing_customer_id&&siteInfo.bing_customer_account_id">
<span :class="'yesSet'">已设置</span>
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
@click="manageDialog('configOffline')">管理设置</GuipButton>
</div>
<div class="flex" v-else>
<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" v-if="siteInfo.bing_conversion_name">
<span :class="'yesSet'">已设置</span>
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
@click="manageDialog('createOffline')">立即设置</GuipButton>
</div>
<div class="flex" v-else>
<span :class="'notSet'">未设置</span>
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
@click="manageDialog('createOffline')">立即设置</GuipButton>
</div>
</div>
<div class="biditemMast flex-between" v-if="!siteInfo.bing_isexist_accesstoken">
<div class="bidwrap-item-top flex">
<img class="bid-item-img" src="@/assets/site/step_4.png" alt="">
<div class="top-right column" v-if="siteInfo.bing_authurl">
<b>登陆</b>
<p>确认前3步完成,点击右侧“登录”按钮。 </p>
</div>
<div class="top-right column" v-else>
<b>请先完善上方信息</b>
<p>确认前3步完成。 </p>
</div>
</div>
<div class="flex" v-if="siteInfo.bing_authurl">
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" @click="openLink(siteInfo.bing_authurl)">登录</GuipButton>
</div>
</div>
</div>
</div>
</div>
</el-form>
</div>
<div class="siteMessage flex-common mt12" id="siteMessage13">
<h3>访问统计 <span>输入统计代码,便于统计浏览点击量(可以不填)</span></h3>
<el-form ref="formRef">
<GuipInput ref="GuipInput" width="100%" height="160px" type="textarea" v-model="siteInfo.access_stats_code">
</GuipInput>
</el-form>
<GroupFormBtns @cancel="cancleUpdateSiteInfo" @confirm="saveSiteAccessStat" />
</div>
<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'" :siteInfo="siteInfo" @update-field="handleFieldUpdate" />
<ConfigAppInformation v-if="configType == 'configAppInfo'" :siteInfo="siteInfo" @update-field="handleFieldUpdate" />
<CreateOffLine v-if="configType == 'createOffline'" :siteInfo="siteInfo" @update-field="handleFieldUpdate" />
</GuipDialog>
</div>
</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 {
// AUTH
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
// 站点信息
siteInfo: {
sitename: '',
sitedesc: '',
sitekeywords: '',
bd_ocpc_token: '',
ocpc_360_appkey: '',
ocpc_360_appsecret: '',
bing_client_id: '9999',
bing_conversion_name: '',
bing_customer_account_id: '',
bing_customer_id: '',
bing_developer_token: '',
bing_isexist_accesstoken: false,
bing_authurl: '',
},
bdurl: '',
configType: '',
diaTitle: '配置应用信息',
configTitle: {
createOffline: '创建离线转化',
configOffline: '配置离线转化信息',
configAppInfo: '配置应用信息',
},
dialogVisibleBid: false,
dialogVisibleConfig: false,
}
},
computed: {
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
},
created(){
store.commit('SET_CUSTOMIZE', true);
store.commit('SET_SLIDER_MENU','siteSettingData');
},
mounted() {
this.getSiteInfo();
store.commit('SET_PAGETITLE', '营销推广');
},
methods: {
// 修改siteinfo
handleFieldUpdate({ field, value }) {
this.siteInfo = {
...this.siteInfo,
[field]: value
}
},
// 获取站点信息
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}
})
}).catch(error => {
console.error(error, 'error')
})
},
updateSiteTDK() {
this.$http('POST', '/agentnew/ajax_update_site_tdk', {
uid: this.$route.query.uid,
title: this.siteInfo.sitename,
desc: this.siteInfo.sitedesc,
keyword: this.siteInfo.sitekeywords
}, {
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')
})
},
saveBaiduOcpcToken() {
this.$http('POST', '/agentnew/ajax_update_bd_ocpc', {
uid: this.$route.query.uid,
token: this.siteInfo.bd_ocpc_token,
}, {
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')
})
},
verifyBaiduOcpc() {
this.$http('POST', '/agentnew/ajax_verify_bd_ocpc', {
uid: this.$route.query.uid,
bdurl: this.bdurl,
}, {
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')
})
},
save360Ocpc() {
this.$http('POST', '/agentnew/ajax_save_360_ocpc', {
uid: this.$route.query.uid,
appkey: this.siteInfo.ocpc_360_appkey,
appsecret: this.siteInfo.ocpc_360_appsecret
}, {
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')
})
},
saveBingTcpc() {
this.$http('POST', '/agentnew/ajax_save_bing_tcpa', {
uid: this.$route.query.uid,
client_id: this.siteInfo.bing_client_id,
developer_token: this.siteInfo.bing_developer_token,
customer_id: this.siteInfo.bing_customer_id,
customer_account_id: this.siteInfo.bing_customer_account_id,
conversion_name: this.siteInfo.bing_conversion_name
}, {
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')
})
},
saveSiteAccessStat() {
this.$http('POST', '/agentnew/ajax_update_site_access_stat', {
uid: this.$route.query.uid,
access_stats_code: this.siteInfo.access_stats_code,
}, {
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')
})
},
openLink(url) {
window.open(url, '_blank');
},
cancleUpdateSiteInfo() {
this.getSiteInfo();
},
// 确认按钮事件
handleConfirm() {
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.saveBingTcpc();
this.dialogVisibleConfig = false;
},
// 取消按钮事件
handleCancelConfig() {
this.dialogVisibleConfig = false;
},
dialogVisibleChange(data) {
console.log(data, 'data098908090');
},
}
}
</script>
<style scoped lang="scss">
.pageheader {
display: flex;
justify-content: space-between;
/* 关键属性 */
align-items: center;
margin: 0px 0px 16px 0px;
}
.pagetitle {
font-size: 16px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.08em;
color: #1E2226;
margin-top: 8px;
}
.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>