zq
2 months ago
15 changed files with 638 additions and 47 deletions
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,8 @@ |
|||
<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> |
|||
@ -0,0 +1,417 @@ |
|||
<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" :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' }">确认</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' }">开始联调 |
|||
</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> <img src="@/assets/site/info_filled.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="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="confirmFormbid2('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="confirmFormbid2('appSecret')">确认</GuipButton> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
<el-form ref="formRef" class="bidform" :model="semFormbid3" v-if="bidList.includes('mast')"> |
|||
<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> <img src="@/assets/site/info_filled.svg" alt=""> 前期准备事项</h4> |
|||
<p class="mt12 flex">1. <a href="" class="flex"> <img |
|||
src="@/assets/site/form_linkActive.svg" alt="">前往微软云</a>（Azure），登录后填写个人资料并完成注册。</p> |
|||
<p class="mt10 flex">2. <a href="" class="flex"> <img |
|||
src="@/assets/site/form_linkActive.svg" |
|||
alt="">前往应用注册</a>，侧边栏点击“应用注册”，然后在右侧应用列表中注册应用程序</p> |
|||
</div> |
|||
<div class="bidwrap-item"> |
|||
<div class="biditemMast mb24 flex-between"> |
|||
<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>配置应用信息</b> |
|||
<p>在微软云平台，获得应用程序(客户端) ID。并联系开户人员，获得开发者令牌Developer token </p> |
|||
</div> |
|||
</div> |
|||
<div class="flex"> |
|||
<span class="notSet">已设置</span> |
|||
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }" |
|||
@click="confirmFormbid2('appKey')">管理设置</GuipButton> |
|||
</div> |
|||
</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="confirmFormbid2('appSecret')">确认</GuipButton> |
|||
</div> |
|||
<div class="biditem360 mb24 flex"> |
|||
<img class="bid-item-img" src="@/assets/site/step_3.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="confirmFormbid2('appSecret')">确认</GuipButton> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
<div class="addStore flex" @click="addBid"> |
|||
<img src="@/assets/addIcon.svg" alt="">增加搜索竞价 |
|||
</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" :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> |
|||
</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'; |
|||
|
|||
export default { |
|||
// 站点设置 |
|||
name: '', |
|||
props: [''], |
|||
components: { |
|||
GuipInput, |
|||
GuipFormItem, |
|||
GuipButton, |
|||
GroupFormBtns, |
|||
GuipDialog |
|||
}, |
|||
data() { |
|||
return { |
|||
bidList: ['baidu', '360','mast'], |
|||
bidAddRadio: '', |
|||
bidAddList: { |
|||
'baidu': '百度OCPC竞价', |
|||
'360': '360OCPC竞价', |
|||
'mast': '必应TCPA竞价', |
|||
}, |
|||
dialogVisibleBid: 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; |
|||
}, |
|||
confirmFormbid2(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; |
|||
}, |
|||
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; |
|||
} |
|||
.green{ |
|||
color: #00C261; |
|||
|
|||
} |
|||
.notSet{ |
|||
color: #FF4D4F; |
|||
} |
|||
.bidform { |
|||
&:nth-child(even) { |
|||
margin: 32px 0; |
|||
} |
|||
} |
|||
|
|||
.beforeNotice { |
|||
h4 { |
|||
margin: 0; |
|||
} |
|||
|
|||
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; |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
color: #006AFF; |
|||
margin-right: 10px; |
|||
|
|||
img { |
|||
margin-left: 12px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.biditem360 { |
|||
b { |
|||
display: inline-block; |
|||
width: 80px; |
|||
text-align: left; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.addStore { |
|||
margin-top: 24px; |
|||
} |
|||
|
|||
.radio-wrap {} |
|||
|
|||
.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; |
|||
|
|||
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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bidwrap-item-bot { |
|||
padding-left: 54px; |
|||
justify-content: flex-end; |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue