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

搜索推广相关设置页面

pull/53/head
rainbro 1 week ago
parent
299439f64c
commit
e225e39035
4 changed files with 120 additions and 126 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/components/site/ConfigAppInformation.vue
  2. 24
      src/components/site/ConfigOffLineConversion.vue
  3. 25
      src/components/site/CreateOffLine.vue
  4. 193
      src/views/agent/siteSemSetting.vue

4
src/components/site/ConfigAppInformation.vue
View File

@ -8,10 +8,10 @@
<GuipInput :value="siteInfo.bing_client_id" <GuipInput :value="siteInfo.bing_client_id"
@input="val => updateField('bing_client_id', val)" placeholder="请输入" /> @input="val => updateField('bing_client_id', val)" placeholder="请输入" />
<p class="column mt16"> <p class="column mt16">
<b>1. 开发者令牌Developer token</b> <b>2. 开发者令牌Developer token</b>
<span>联系开户人员获取</span> <span>联系开户人员获取</span>
</p> </p>
<GuipInput :value="siteInfo.domain" @input="val => updateField('domain', val)" <GuipInput :value="siteInfo.bing_developer_token" @input="val => updateField('bing_developer_token', val)"
placeholder="商户号" /> placeholder="商户号" />
</el-form> </el-form>
</div> </div>

24
src/components/site/ConfigOffLineConversion.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="config-offline-wrap"> <div class="config-offline-wrap">
<el-form :model="formConfig"> <el-form>
<p class="flex"><a href="" class="flex"> <img src="@/assets/site/form_linkActive.svg" <p class="flex"><a href="" class="flex"> <img src="@/assets/site/form_linkActive.svg"
alt="">前往微软云</a>左上角切换有效的账户，从浏览器地址栏链接中获取aid的值和cid</p> alt="">前往微软云</a>左上角切换有效的账户，从浏览器地址栏链接中获取aid的值和cid</p>
@ -9,13 +9,13 @@
aid就是12345 cid就是67890 aid就是12345 cid就是67890
</p> </p>
<p class="column"> <p class="column">
<b>1. aid</b> <b>1. cid</b>
</p> </p>
<GuipInput v-model="formConfig.id" placeholder="请输入" /> <GuipInput :value="siteInfo.bing_customer_id" @input="val => updateField('bing_customer_id', val)" placeholder="" />
<p class="column mt16"> <p class="column mt16">
<b>1. cid</b> <b>2. aid</b>
</p> </p>
<GuipInput v-model="formConfig.merchantID" placeholder="商户号" /> <GuipInput :value="siteInfo.bing_customer_account_id" @input="val => updateField('bing_customer_account_id', val)" placeholder="" />
</el-form> </el-form>
</div> </div>
</template> </template>
@ -26,17 +26,14 @@ import GuipInput from '@/components/GuipInput.vue';
export default { export default {
// 站点设置 // 站点设置
name: '', name: '',
props: [''], props: ['siteInfo'],
components: { components: {
GuipInput, GuipInput,
// GuipFormItem, // GuipFormItem,
}, },
data() { data() {
return { return {
formConfig: { // localSiteInfo: { ...this.siteInfo }
id: '',
merchantID: ''
}
} }
}, },
computed: { computed: {
@ -46,7 +43,12 @@ export default {
// store.commit('SET_PAGETITLE', '营销推广'); // store.commit('SET_PAGETITLE', '营销推广');
}, },
methods: { methods: {
updateField(field, value) {
this.$emit('update-field', {
field,
value
})
}
} }
} }
</script> </script>

25
src/components/site/CreateOffLine.vue
View File

@ -1,12 +1,15 @@
<template> <template>
<div class="create-offline-wrap"> <div class="create-offline-wrap">
<el-form :model="formConfig"> <el-form>
<p class="flex"><a href="" class="flex"> <img src="@/assets/site/form_linkActive.svg" <p class="flex">
alt="">前往微软云</a>左上角切换有效的账户后，点击转化->点击转化目标->点击创建</p> <a href="https://ads.microsoft.com/" class="flex" target="_blank"> <img src="@/assets/site/form_linkActive.svg" alt="">前往微软广告</a>
，左上角切换有效的账户后，点击转化->点击转化目标->点击创建
</p>
<p class="createOffdescBox mt12">您想要跟踪哪种类型的转化？ 选择“离线”->点击下一步<br /> <p class="createOffdescBox mt12">您想要跟踪哪种类型的转化？ 选择“离线”->点击下一步<br />
目标类别 选择“购买”->点击下一步<br /> 目标类别 选择“购买”->点击下一步<br />
目标名称自行设置并同步到下方输入框</p> 目标名称自行设置并同步到下方输入框</p>
<GuipInput label="目标名称" column="column" v-model="formConfig.merchantID" placeholder="商户号" /> <GuipInput class="mt12" label="目标名称" column="column" :value="siteInfo.bing_conversion_name" @input="val => updateField('bing_conversion_name', val)" placeholder="" />
<p>创建成功后2个小时才生效，转化数据查看最晚有5-6小时延迟</p>
</el-form> </el-form>
</div> </div>
</template> </template>
@ -17,17 +20,14 @@ import GuipInput from '@/components/GuipInput.vue';
export default { export default {
// 站点设置 // 站点设置
name: '', name: '',
props: [''], props: ['siteInfo'],
components: { components: {
GuipInput, GuipInput,
// GuipFormItem, // GuipFormItem,
}, },
data() { data() {
return { return {
formConfig: { // localSiteInfo: { ...this.siteInfo }
id: '',
merchantID: ''
}
} }
}, },
computed: { computed: {
@ -37,7 +37,12 @@ export default {
// store.commit('SET_PAGETITLE', '营销推广'); // store.commit('SET_PAGETITLE', '营销推广');
}, },
methods: { methods: {
updateField(field, value) {
this.$emit('update-field', {
field,
value
})
}
} }
} }
</script> </script>

193
src/views/agent/siteSemSetting.vue
View File

@ -38,8 +38,7 @@
</div> </div>
<div class="siteMessage flex-common mt12" id="siteMessage12"> <div class="siteMessage flex-common mt12" id="siteMessage12">
<h3>搜索引擎竞价（SEM） <span>通过SEM设置，获得流量、提高网站在搜索引擎中的排名</span></h3> <h3>搜索引擎竞价（SEM） <span>通过SEM设置，获得流量、提高网站在搜索引擎中的排名</span></h3>
<el-form ref="baiduRef" class="bidform baidu-form" :model="semFormbid1" <el-form ref="baiduRef" class="bidform baidu-form">
v-if="bidList.includes('baidu')">
<div class="semBidWrap"> <div class="semBidWrap">
<h3 class="flex-between"> <h3 class="flex-between">
<p>百度OCPC竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p> <p>百度OCPC竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
@ -87,7 +86,7 @@
</div> </div>
</div> </div>
</el-form> </el-form>
<el-form class="bidform" ref="360Ref" :model="semFormbid2" v-if="bidList.includes('360')"> <el-form class="bidform" ref="360Ref">
<div class="semBidWrap"> <div class="semBidWrap">
<h3 class="flex-between"> <h3 class="flex-between">
<p>360OCPC竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p> <p>360OCPC竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
@ -139,7 +138,7 @@
</div> </div>
</div> </div>
</el-form> </el-form>
<el-form ref="formRef" class="bidform tcpr-wrap" :model="semFormbid3" v-if="bidList.includes('mast')"> <el-form ref="formRef" class="bidform tcpr-wrap">
<div class="semBidWrap"> <div class="semBidWrap">
<h3 class="flex-between"> <h3 class="flex-between">
<p>必应TCPA竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p> <p>必应TCPA竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
@ -182,23 +181,32 @@
<p>在微软云平台，获得应用程序(客户端) ID。并联系开户人员，获得开发者令牌Developer token </p> <p>在微软云平台，获得应用程序(客户端) ID。并联系开户人员，获得开发者令牌Developer token </p>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex" v-if="siteInfo.bing_client_id&&siteInfo.bing_developer_token">
<span :class="'yesSet'">已设置</span> <span :class="'yesSet'">已设置</span>
<GuipButton type="normal" :btnstyle="{ width: '126px', height: '38px' }" <GuipButton type="normal" :btnstyle="{ width: '126px', height: '38px' }"
@click="manageDialog('configAppInfo')">管理设置</GuipButton> @click="manageDialog('configAppInfo')">管理设置</GuipButton>
</div> </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>
<div class="biditemMast mb12 flex-between"> <div class="biditemMast mb12 flex-between">
<div class="bidwrap-item-top flex"> <div class="bidwrap-item-top flex">
<img class="bid-item-img" src="@/assets/site/step_2.png" alt=""> <img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
<div class="top-right column"> <div class="top-right column">
<b>配置离线转化信息</b> <b>配置离线转化信息</b>
<p class="flex"><a href="" class="flex"> <img <p class="flex"><a href="https://ads.microsoft.com/" class="flex" target="_blank"> <img src="@/assets/site/form_linkActive.svg"
src="@/assets/site/form_linkActive.svg" alt="">前往微软广告</a>，左上角切换有效的账户，从浏览器地址栏链接中获取aid的值和cid的值</p>
alt="">前往微软云</a>，左上角切换有效的账户，从浏览器地址栏链接中获取aid的值和cid的值</p>
</div> </div>
</div> </div>
<div class="flex"> <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> <span :class="'notSet'">未设置</span>
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
@click="manageDialog('configOffline')">立即设置</GuipButton> @click="manageDialog('configOffline')">立即设置</GuipButton>
@ -212,60 +220,53 @@
<p>在微软云平台创建离线转化，创建成功后2个小时才生效，转化数据查看最晚有5-6小时延迟。 </p> <p>在微软云平台创建离线转化，创建成功后2个小时才生效，转化数据查看最晚有5-6小时延迟。 </p>
</div> </div>
</div> </div>
<div class="flex"> <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> <span :class="'notSet'">未设置</span>
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
@click="manageDialog('createOffline')">立即设置</GuipButton> @click="manageDialog('createOffline')">立即设置</GuipButton>
</div> </div>
</div> </div>
<div class="biditemMast flex-between"> <div class="biditemMast flex-between" v-if="!siteInfo.bing_isexist_accesstoken">
<div class="bidwrap-item-top flex"> <div class="bidwrap-item-top flex">
<img class="bid-item-img" src="@/assets/site/step_4.png" alt=""> <img class="bid-item-img" src="@/assets/site/step_4.png" alt="">
<div class="top-right column"> <div class="top-right column" v-if="siteInfo.bing_authurl">
<b>登陆微软云</b> <b>登陆</b>
<p>确认前3步完成，点击右侧“登录”按钮，登录微软云。 </p> <p>确认前3步完成，点击右侧“登录”按钮。 </p>
</div>
<div class="top-right column" v-else>
<b>请先完善上方信息</b>
<p>确认前3步完成。 </p>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex" v-if="siteInfo.bing_authurl">
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" @click="openLink(siteInfo.bing_authurl)">登录</GuipButton>
@click="manageDialog('login')">登录</GuipButton>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</el-form> </el-form>
<!-- <div class="addStore flex" @click="addBid">
<div></div>
增加搜索竞价
</div> -->
</div> </div>
<div class="siteMessage flex-common mt12" id="siteMessage13"> <div class="siteMessage flex-common mt12" id="siteMessage13">
<h3>访问统计 <span>输入统计代码，便于统计浏览点击量(可以不填)</span></h3> <h3>访问统计 <span>输入统计代码，便于统计浏览点击量(可以不填)</span></h3>
<el-form ref="formRef" :model="semForm3"> <el-form ref="formRef">
<GuipInput ref="GuipInput" width="100%" height="160px" type="textarea" v-model="semForm3.code"> <GuipInput ref="GuipInput" width="100%" height="160px" type="textarea" v-model="siteInfo.access_stats_code">
</GuipInput> </GuipInput>
</el-form> </el-form>
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('semForm3')" /> <GroupFormBtns @cancel="cancleUpdateSiteInfo" @confirm="saveSiteAccessStat" />
</div> </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" <GuipDialog type="normal" :dialogVisible="dialogVisibleConfig" :title="diaTitle" :show-close-button="false"
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="handleConfirmConfig" :show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="handleConfirmConfig"
@cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange"> @cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange">
<ConfigOffLineConversion v-if="configType == 'configOffline'" /> <ConfigOffLineConversion v-if="configType == 'configOffline'" :siteInfo="siteInfo" @update-field="handleFieldUpdate" />
<ConfigAppInformation v-if="configType == 'configAppInfo'" :siteInfo="siteInfo" <ConfigAppInformation v-if="configType == 'configAppInfo'" :siteInfo="siteInfo" @update-field="handleFieldUpdate" />
@update-field="handleFieldUpdate" /> <CreateOffLine v-if="configType == 'createOffline'" :siteInfo="siteInfo" @update-field="handleFieldUpdate" />
<CreateOffLine v-if="configType == 'createOffline'" />
</GuipDialog> </GuipDialog>
</div> </div>
</div> </div>
@ -313,20 +314,14 @@ export default {
bing_conversion_name: '', bing_conversion_name: '',
bing_customer_account_id: '', bing_customer_account_id: '',
bing_customer_id: '', bing_customer_id: '',
domain: "测试一下回显",
bing_developer_token: '', bing_developer_token: '',
bing_isexist_accesstoken: false,
bing_authurl: '',
}, },
bdurl: '', bdurl: '',
configType: '', configType: '',
diaTitle: '配置应用信息', diaTitle: '配置应用信息',
bidList: ['baidu', '360', 'mast'],
bidAddRadio: '',
bidAddList: {
'baidu': '百度OCPC竞价',
'360': '360OCPC竞价',
'mast': '必应TCPA竞价',
},
configTitle: { configTitle: {
createOffline: '创建离线转化', createOffline: '创建离线转化',
configOffline: '配置离线转化信息', configOffline: '配置离线转化信息',
@ -334,31 +329,9 @@ export default {
}, },
dialogVisibleBid: false, dialogVisibleBid: false,
dialogVisibleConfig: false, dialogVisibleConfig: false,
semForm2: {
title: '',
keyWord: '',
desc: ''
},
semForm3: {
code: '',
},
semFormbid1: {
token: '',
url: ''
},
semFormbid2: {
appKey: '',
appSecret: ''
},
semFormbid3: {
}
} }
}, },
computed: { computed: {
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
}, },
mounted() { mounted() {
@ -373,19 +346,6 @@ export default {
[field]: value [field]: value
} }
}, },
postRequest(url, params, headers = { 'Auth': this.token }) {
this.$http('POST', url, params, { headers: headers }).then(response => {
this.$nextTick(() => {
if (response.status) {
this.$Message.success(response.info);
} else {
this.$Message.error(response.info);
}
})
}).catch(error => {
console.error(error, 'error')
})
},
// 获取站点信息 // 获取站点信息
getSiteInfo() { getSiteInfo() {
const that = this const that = this
@ -487,25 +447,55 @@ export default {
console.error(error, 'error') console.error(error, 'error')
}) })
}, },
cancleUpdateSiteInfo() { saveBingTcpc() {
this.getSiteInfo(); this.$http('POST', '/agentnew/ajax_save_bing_tcpa', {
}, uid: this.$route.query.uid,
client_id: this.siteInfo.bing_client_id,
addBid() { developer_token: this.siteInfo.bing_developer_token,
this.dialogVisibleBid = true; customer_id: this.siteInfo.bing_customer_id,
}, customer_account_id: this.siteInfo.bing_customer_account_id,
semFormConmit(type, key) { conversion_name: this.siteInfo.bing_conversion_name
console.log(key, 'key---'); }, {
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')
})
}, },
radioChange(data) { saveSiteAccessStat() {
console.log(data, 'radio--data'); 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')
})
}, },
cancelClick() { openLink(url) {
window.open(url, '_blank');
console.log('quxiao');
}, },
confirmClick(type) { cancleUpdateSiteInfo() {
console.log(type, '确认'); this.getSiteInfo();
}, },
// 确认按钮事件 // 确认按钮事件
handleConfirm() { handleConfirm() {
@ -523,8 +513,9 @@ export default {
}, },
// 确认按钮事件 // 确认按钮事件
handleConfirmConfig() { handleConfirmConfig() {
console.log(this.siteInfo.bing_client_id,this.siteInfo.domain,'看一下修改数据'); this.saveBingTcpc();
this.dialogVisibleConfig = false; this.dialogVisibleConfig = false;
}, },
// 取消按钮事件 // 取消按钮事件
handleCancelConfig() { handleCancelConfig() {
@ -533,10 +524,6 @@ export default {
dialogVisibleChange(data) { dialogVisibleChange(data) {
console.log(data, 'data098908090'); console.log(data, 'data098908090');
}, },
deleteBid(type) {
let index = this.bidList.indexOf(type)
this.bidList.splice(index, index + 1)
}
} }
} }

Write Preview
Loading…
Cancel
Save