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

添加父子通信逻辑

pull/53/head
zq 1 week ago
parent
5cd4fc2f9e
commit
299439f64c
3 changed files with 167 additions and 98 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. 10
      src/components/GuipInput.vue
  2. 26
      src/components/site/ConfigAppInformation.vue
  3. 183
      src/views/agent/siteSemSetting.vue

10
src/components/GuipInput.vue
View File

@ -4,9 +4,9 @@
:prop="prop" :rules="rules">
<p v-if="desc" class="desc_right">{{ desc }}</p>
<el-input :type="type" v-bind="$attrs" :placeholder="placeholder1" :disabled="disabled" :maxlength="maxlength1"
:style="{ width: width, height: height }" :minLength="minLength1" :show-word-limit="showWordLimit"
:style="{ width: width, height: height }" :value="inputValue" :minLength="minLength1" :show-word-limit="showWordLimit"
@input="$emit('input', $event)" @keydown="handleKeydown" @change="$emit('change', $event)"
@blur="$emit('blur', inputValue)" @focus="$emit('focus', inputValue)" v-model="inputValue">
@blur="$emit('blur', inputValue)" @focus="$emit('focus', inputValue)" >
<!-- 自定义前面小图标 -->
<template v-slot:prepend>
<slot name="prependshow"></slot>
@ -58,6 +58,12 @@ export default {
// },
value(newVal) {
this.inputValue = newVal;
},
defaultValue(newVal) {
// 如果没有value但有defaultValue变化时更新
if (!this.value && newVal !== this.inputValue) {
this.inputValue = newVal;
}
}
},
created() {

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

@ -1,16 +1,18 @@
<template>
<div class="config-appInfo-wrap">
<el-form :model="siteInfo">
<el-form>
<p class="column">
<b>1. 应用程序（客户端）ID</b>
<span>微软云平台＞应用列表，点击刚创建的应用，在应用概览中即可看到</span>
</p>
<GuipInput v-model="siteInfo.bing_client_id" placeholder="请输入" />
<GuipInput :value="siteInfo.bing_client_id"
@input="val => updateField('bing_client_id', val)" placeholder="请输入" />
<p class="column mt16">
<b>1. 开发者令牌Developer token</b>
<span>联系开户人员获取</span>
</p>
<GuipInput v-model="siteInfo.bing_developer_token" placeholder="商户号" />
<GuipInput :value="siteInfo.domain" @input="val => updateField('domain', val)"
placeholder="商户号" />
</el-form>
</div>
</template>
@ -29,10 +31,7 @@ export default {
},
data() {
return {
// siteInfo: {
// id: '',
// merchantID: ''
// }
// localSiteInfo: { ...this.siteInfo }
}
},
computed: {
@ -42,7 +41,18 @@ export default {
// store.commit('SET_PAGETITLE', '营销推广');
},
methods: {
// updateField(field, value) {
// this.$emit('update-field', {
// field,
// value
// })
// }
updateField(field, value) {
this.$emit('update-field', {
field,
value
})
}
}
}
</script>

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

@ -38,7 +38,8 @@
</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')">
<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>
@ -60,7 +61,8 @@
<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>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="saveBaiduOcpcToken()">确认</GuipButton>
</div>
</div>
<div class="bidwrap-item">
@ -77,7 +79,8 @@
<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 type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="verifyBaiduOcpc()">开始联调
</GuipButton>
</div>
</div>
@ -94,34 +97,42 @@
<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">
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投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。
<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>
<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" />
<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>
<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" />
<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>
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
@click="save360Ocpc()">确认</GuipButton>
</div>
</div>
@ -138,18 +149,27 @@
<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），登录后填写个人资料并完成注册。
<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>
<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>受支持的帐户类型：选择 任何组织目录(任何 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 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>
@ -164,7 +184,8 @@
</div>
<div class="flex">
<span :class="'yesSet'">已设置</span>
<GuipButton type="normal" :btnstyle="{ width: '126px', height: '38px' }" @click="manageDialog('configAppInfo')">管理设置</GuipButton>
<GuipButton type="normal" :btnstyle="{ width: '126px', height: '38px' }"
@click="manageDialog('configAppInfo')">管理设置</GuipButton>
</div>
</div>
<div class="biditemMast mb12 flex-between">
@ -173,7 +194,8 @@
<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>
src="@/assets/site/form_linkActive.svg"
alt="">前往微软云</a>，左上角切换有效的账户，从浏览器地址栏链接中获取aid的值和cid的值</p>
</div>
</div>
<div class="flex">
@ -226,9 +248,9 @@
</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">
<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)"
@ -238,11 +260,12 @@
</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'" :siteInfo="siteInfo" />
<CreateOffLine v-if="configType == 'createOffline'"/>
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="handleConfirmConfig"
@cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange">
<ConfigOffLineConversion v-if="configType == 'configOffline'" />
<ConfigAppInformation v-if="configType == 'configAppInfo'" :siteInfo="siteInfo"
@update-field="handleFieldUpdate" />
<CreateOffLine v-if="configType == 'createOffline'" />
</GuipDialog>
</div>
</div>
@ -286,16 +309,17 @@ export default {
bd_ocpc_token: '',
ocpc_360_appkey: '',
ocpc_360_appsecret: '',
bing_client_id: '',
bing_client_id: '9999',
bing_conversion_name: '',
bing_customer_account_id: '',
bing_customer_id: '',
domain: "测试一下回显",
bing_developer_token: '',
},
bdurl: '',
configType:'configAppInfo',
diaTitle:'配置应用信息',
configType: '',
diaTitle: '配置应用信息',
bidList: ['baidu', '360', 'mast'],
bidAddRadio: '',
bidAddList: {
@ -303,10 +327,10 @@ export default {
'360': '360OCPC竞价',
'mast': '必应TCPA竞价',
},
configTitle:{
createOffline:'创建离线转化',
configOffline:'配置离线转化信息',
configAppInfo:'配置应用信息',
configTitle: {
createOffline: '创建离线转化',
configOffline: '配置离线转化信息',
configAppInfo: '配置应用信息',
},
dialogVisibleBid: false,
dialogVisibleConfig: false,
@ -342,8 +366,15 @@ export default {
store.commit('SET_PAGETITLE', '营销推广');
},
methods: {
postRequest(url, params, headers={'Auth': this.token}) {
this.$http('POST', url, params, {headers:headers}).then(response => {
// 修改siteinfo
handleFieldUpdate({ field, value }) {
this.siteInfo = {
...this.siteInfo,
[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);
@ -361,13 +392,13 @@ export default {
that.siteInfo = []
this.$http('POST', '/agentnew/ajax_get_site_info', {
uid: this.$route.query.uid,
},{
headers:{
}, {
headers: {
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
that.siteInfo = response.data
that.siteInfo = {...response.data}
})
}).catch(error => {
console.error(error, 'error')
@ -379,8 +410,8 @@ export default {
title: this.siteInfo.sitename,
desc: this.siteInfo.sitedesc,
keyword: this.siteInfo.sitekeywords
},{
headers:{
}, {
headers: {
'Auth': this.token
}
}).then(response => {
@ -399,8 +430,8 @@ export default {
this.$http('POST', '/agentnew/ajax_update_bd_ocpc', {
uid: this.$route.query.uid,
token: this.siteInfo.bd_ocpc_token,
},{
headers:{
}, {
headers: {
'Auth': this.token
}
}).then(response => {
@ -419,8 +450,8 @@ export default {
this.$http('POST', '/agentnew/ajax_verify_bd_ocpc', {
uid: this.$route.query.uid,
bdurl: this.bdurl,
},{
headers:{
}, {
headers: {
'Auth': this.token
}
}).then(response => {
@ -440,8 +471,8 @@ export default {
uid: this.$route.query.uid,
appkey: this.siteInfo.ocpc_360_appkey,
appsecret: this.siteInfo.ocpc_360_appsecret
},{
headers:{
}, {
headers: {
'Auth': this.token
}
}).then(response => {
@ -463,7 +494,7 @@ export default {
addBid() {
this.dialogVisibleBid = true;
},
semFormConmit(type,key) {
semFormConmit(type, key) {
console.log(key, 'key---');
},
radioChange(data) {
@ -485,13 +516,14 @@ export default {
this.$message.warning('点击了取消按钮');
this.dialogVisibleBid = false;
},
manageDialog(type){
manageDialog(type) {
this.configType = type;
this.dialogVisibleConfig = true;
this.diaTitle = this.configTitle[type]
},
// 确认按钮事件
handleConfirmConfig() {
console.log(this.siteInfo.bing_client_id,this.siteInfo.domain,'看一下修改数据');
this.dialogVisibleConfig = false;
},
// 取消按钮事件
@ -512,17 +544,19 @@ export default {
<style scoped lang="scss">
.pageheader {
display: flex;
justify-content: space-between; /* 关键属性 */
justify-content: space-between;
/* 关键属性 */
align-items: center;
margin: 16px 0px 16px 0px;
}
.pagetitle {
font-size: 18px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.08em;
color: #1E2226;
margin-top:8px;
margin-top: 8px;
}
.site-sem-wrap {
@ -530,7 +564,8 @@ export default {
letter-spacing: 0.08em;
}
.notSet,.yesSet {
.notSet,
.yesSet {
margin-right: 12px;
color: #FF4D4F;
}
@ -538,16 +573,19 @@ export default {
.yesSet {
color: #00C261;
}
.bidform {
&:nth-child(even) {
margin: 32px 0;
}
}
.baidu-form{
.bidwrap-item{
.baidu-form {
.bidwrap-item {
margin-bottom: 18px;
}
}
.beforeNotice {
h4 {
@ -564,32 +602,40 @@ export default {
background: #F2F7FF;
/* middle/middle_blue_3 */
border: 1px solid #BFDAFF;
div {
margin-top: 2px;
padding-left: 23px;
p{
p {
color: #8A9099;
}
}
p{
p {
color: #1E2226;
i{
i {
font-style: normal;
}
&:last-child{
&:last-child {
display: flex;
align-items: stretch;
b{
b {
font-weight: normal;
color: #8A9099;
display: inline-flex;
img{
img {
margin-left: 4px;
}
}
}
}
}
a {
text-decoration: none;
color: #006AFF;
@ -633,19 +679,23 @@ p{
}
.radio-wrap {}
.tcpr-wrap {
.bidwrap-item{
.bidwrap-item {
padding: 0 !important;
background: transparent !important;
.biditemMast{
.biditemMast {
background: #fff;
padding: 24px 16px;
}
}
.semBidWrap{
.semBidWrap {
padding-bottom: 24rpx;
}
}
.semBidWrap {
background: #FAFAFA;
padding: 18px 14px;
@ -660,7 +710,8 @@ p{
font-size: 14px;
font-weight: normal;
transition: all .3s;
&:hover{
&:hover {
opacity: 0.7;
}
@ -691,10 +742,12 @@ p{
p {
margin-top: 10px;
}
a{
a {
text-decoration: none;
color: #006AFF;
img{
img {
margin-right: 10px;
}
}

Write Preview
Loading…
Cancel
Save