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.
567 lines
24 KiB
567 lines
24 KiB
<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>
|