zq
1 month ago
13 changed files with 867 additions and 714 deletions
|
After Width: | Height: | Size: 255 B |
|
After Width: | Height: | Size: 114 KiB |
@ -0,0 +1,216 @@ |
|||||
|
<template> |
||||
|
<div class="demo-wrap min-flex-right"> |
||||
|
<div class="flex-between"> |
||||
|
<h2>站点列表</h2> |
||||
|
<el-form :model="form"> |
||||
|
<GuipSelect v-model="form.payword" :defaultValue="form.payword" prop="payword" width="100%" |
||||
|
:options="options_payword" /> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class=" flex-common" id=""> |
||||
|
<el-form> |
||||
|
<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" |
||||
|
style="width: 100%" :key="random()"> |
||||
|
<el-table-column type="index" label="排序" width="100"> |
||||
|
</el-table-column> |
||||
|
<!-- 其他列 --> |
||||
|
<el-table-column prop="name" label="站点简称" width="210"> |
||||
|
<template slot-scope="scope"> |
||||
|
<a class="name_link flex cell_render" :href="scope.row.link" target="_blank"> |
||||
|
{{ scope.row.name }} |
||||
|
<img class="edit_icon" src="@/assets/site/form_link.svg" alt=""> |
||||
|
</a> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="registerDate" label="注册时间"></el-table-column> |
||||
|
<el-table-column prop="count" label="6月订单数" sortable width="230"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
{{ scope.row.count }} |
||||
|
<span class="flex"><img class="edit_icon" src="@/assets/site/form_link.svg" alt="">{{ |
||||
|
scope.row.percentage }}%上年持平</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="price" label="8月订单数" sortable></el-table-column> |
||||
|
<el-table-column prop="phoneService" label="手机服务" :filters="phoneService" |
||||
|
:filter-method="filterHandler"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="status" label="状态" width="195"></el-table-column> |
||||
|
<!-- <el-table-column fixed="right" label="操作" width="182"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
<el-button @click="handleServiceClick(scope.row)" type="text">服务列表</el-button> |
||||
|
<el-button @click="handleSetClick(scope.row)" type="text">站点设置</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> --> |
||||
|
</el-table> |
||||
|
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
||||
|
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
||||
|
:total="tableData.length"> |
||||
|
</el-pagination> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
// import request from "./utils/request"; |
||||
|
import GuipSelect from '@/components/GuipSelect.vue' |
||||
|
export default { |
||||
|
// 站点设置 |
||||
|
name: '', |
||||
|
props: [''], |
||||
|
components: { |
||||
|
GuipSelect, |
||||
|
// GuipSelectFilter, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
phoneService: [ |
||||
|
{ |
||||
|
text: '不限', |
||||
|
value: '0' |
||||
|
}, |
||||
|
{ |
||||
|
text: 'H5', |
||||
|
value: '1' |
||||
|
}, |
||||
|
{ |
||||
|
text: '小程序', |
||||
|
value: '2' |
||||
|
}, |
||||
|
{ |
||||
|
text: 'H5以及小程序', |
||||
|
value: '3' |
||||
|
}, |
||||
|
], |
||||
|
currentPage: 1, //当前页 |
||||
|
pageSize: 2, //每页的容量 |
||||
|
total: 0, //列表总数 |
||||
|
options_payword: [ |
||||
|
{ |
||||
|
label: '按篇', value: '0' |
||||
|
}, |
||||
|
{ |
||||
|
label: '按字符', value: '1' |
||||
|
}, |
||||
|
], |
||||
|
options: [ |
||||
|
{ label: '选项1', value: '1' }, |
||||
|
{ label: '选项2', value: '2' }, |
||||
|
{ label: '选项3', value: '3' }, |
||||
|
// 更多选项... |
||||
|
], |
||||
|
filteredOptions: this.options, |
||||
|
|
||||
|
phoneServicelist: |
||||
|
{ |
||||
|
0: '不限', |
||||
|
1: ' H5', |
||||
|
2: '小程序', |
||||
|
3: '无手机服务' |
||||
|
|
||||
|
}, |
||||
|
tableData: [ |
||||
|
{ |
||||
|
name: '哈哈哈', |
||||
|
link: 'http://www.chachongz.com', |
||||
|
registerDate: '2025.02.18', |
||||
|
group: '1', |
||||
|
phoneService: '1', |
||||
|
status: '1',//配置中中 |
||||
|
price: 10, |
||||
|
count: 23432, |
||||
|
percentage: '2.5' |
||||
|
|
||||
|
}, |
||||
|
{ |
||||
|
name: '知网学诚教育', |
||||
|
link: 'http://new.checkcopy.com', |
||||
|
registerDate: '2025.02.18', |
||||
|
group: '2', |
||||
|
phoneService: '2', |
||||
|
status: '0',//运行中 |
||||
|
price: 20, |
||||
|
count: 3432, |
||||
|
percentage: '17.5' |
||||
|
}, |
||||
|
{ |
||||
|
name: '哈哈哈111', |
||||
|
link: 'http://www.chachongz.com', |
||||
|
registerDate: '2025.02.18', |
||||
|
group: '1', |
||||
|
phoneService: '1', |
||||
|
status: '1',//配置中中 |
||||
|
price: 10, |
||||
|
count: 7868, |
||||
|
percentage: '2.5' |
||||
|
|
||||
|
}, |
||||
|
{ |
||||
|
name: '知网学诚教育2222', |
||||
|
link: 'http://new.checkcopy.com', |
||||
|
registerDate: '2025.02.18', |
||||
|
group: '2', |
||||
|
phoneService: '2', |
||||
|
status: '0',//运行中 |
||||
|
price: 20, |
||||
|
count: 32432, |
||||
|
percentage: '17.5' |
||||
|
}, |
||||
|
], |
||||
|
form: { |
||||
|
payword: '0', |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
// this.ai2() |
||||
|
// this.$refs.scrollContainer.scrollTo(0) |
||||
|
}, |
||||
|
methods: { |
||||
|
// ai2() { |
||||
|
// this.$http('POST', 'https://www.90616.com/ajax_get_ai_services').then(response => { |
||||
|
// console.log(response, '000') |
||||
|
// }) |
||||
|
// .catch(error => { |
||||
|
// console.error(error, '22-----') |
||||
|
// }) |
||||
|
// }, |
||||
|
|
||||
|
// 列筛选 |
||||
|
filterHandler(value, row, column) { |
||||
|
const property = column['property']; |
||||
|
if (value == 0) { |
||||
|
return row[property] != value |
||||
|
} |
||||
|
return row[property] === value; |
||||
|
}, |
||||
|
// 自定义搜索筛选 |
||||
|
customFilter(keyword, options) { |
||||
|
if (!keyword) return options |
||||
|
return options.filter(item => { |
||||
|
// 自定义筛选逻辑 |
||||
|
return item.label.includes(keyword) || item.value.includes(keyword) |
||||
|
}) |
||||
|
}, |
||||
|
handleSizeChange(val) { |
||||
|
this.pageSize = val |
||||
|
}, |
||||
|
handleCurrentChange(val) { |
||||
|
this.currentPage = val |
||||
|
}, |
||||
|
random() { |
||||
|
var randomNumber = Math.random(); |
||||
|
return randomNumber |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.demo-wrap { |
||||
|
width: 100%; |
||||
|
letter-spacing: 0.08em; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,125 @@ |
|||||
|
<template> |
||||
|
<div class="pageTemplete-wrap min-flex"> |
||||
|
<div class=" flex-common" id=""> |
||||
|
<h3>模板选择</h3> |
||||
|
<el-tabs v-model="activeName" @tab-click="handleClick"> |
||||
|
<el-tab-pane label="混合（AI+查重）" name="1"> |
||||
|
<div class="templeteImgs"> |
||||
|
<div class="templeteImgs-item" v-for="item in templeteList" :key="item.tpl_id"> |
||||
|
<img :src="item.img" alt=""> |
||||
|
<span class="look">预览</span> |
||||
|
<img src="@/assets/site/tem-active.svg" class="tem-active" alt=""> |
||||
|
<p>{{ item.list }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="仅查重" name="2"> |
||||
|
<div class="templeteImgs"> |
||||
|
<div class="templeteImgs-item" v-for="item in templeteList.filter(item1=> {item1.type == 1})" :key="item.tpl_id"> |
||||
|
<img :src="require(item.img)" alt=""> |
||||
|
<span class="look">预览</span> |
||||
|
<img src="@/assets/site/tem-active.svg" class="tem-active" alt=""> |
||||
|
<p>{{ item.list }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="仅AI写作" name="3"></el-tab-pane> |
||||
|
<div class="templeteImgs"> |
||||
|
<div class="templeteImgs-item" v-for="item in templeteList.filter(item1=> {item1.type == 0})" :key="item.tpl_id"> |
||||
|
<img :src="require(item.img)" alt=""> |
||||
|
<span class="look">预览</span> |
||||
|
<img src="@/assets/site/tem-active.svg" class="tem-active" alt=""> |
||||
|
<p>{{ item.list }}</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-tabs> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
// 站点设置 |
||||
|
name: '', |
||||
|
components: { |
||||
|
// GuipInput, |
||||
|
// GuipButton, |
||||
|
// GuipSwitch, |
||||
|
// GroupFormBtns |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: '1', |
||||
|
addImgList: { |
||||
|
'万方': require('@/assets/register/wanfang.png'), |
||||
|
'维普': require('@/assets/register/weipu.svg'), |
||||
|
'学术不端': require('@/assets/register/xueshubuduan.svg'), |
||||
|
}, |
||||
|
templeteList:[ |
||||
|
{ |
||||
|
name:'清新科技蓝', |
||||
|
type:1, |
||||
|
tpl_id:'1', |
||||
|
img:require('@/assets/site/temImg.png') |
||||
|
}, |
||||
|
{ |
||||
|
name:'清新科技蓝1', |
||||
|
type:0, |
||||
|
tpl_id:'11', |
||||
|
img:require('@/assets/site/temImg.png') |
||||
|
}, |
||||
|
{ |
||||
|
name:'清新科技蓝2', |
||||
|
tpl_id:'12', |
||||
|
type:0, |
||||
|
img:require('@/assets/site/temImg.png') |
||||
|
}, |
||||
|
{ |
||||
|
name:'清新科技蓝3', |
||||
|
tpl_id:'16', |
||||
|
type:0, |
||||
|
img:require('@/assets/site/temImg.png') |
||||
|
}, |
||||
|
{ |
||||
|
name:'清新科技蓝4', |
||||
|
tpl_id:'13', |
||||
|
type:1, |
||||
|
img:require('@/assets/site/temImg.png') |
||||
|
}, |
||||
|
{ |
||||
|
name:'清新科技蓝5', |
||||
|
tpl_id:'14', |
||||
|
type:1, |
||||
|
img:require('@/assets/site/temImg.png') |
||||
|
}, |
||||
|
{ |
||||
|
name:'清新科技蓝6', |
||||
|
type:1, |
||||
|
tpl_id:'15', |
||||
|
img:require('@/assets/site/temImg.png') |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleClick() { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.pageTemplete-wrap { |
||||
|
width: 100%; |
||||
|
letter-spacing: 0.08em; |
||||
|
padding: 12px; |
||||
|
// overflow-y: auto; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tabs__nav-wrap { |
||||
|
border-width: 0px 0px 1px 0px; |
||||
|
border-style: solid; |
||||
|
border-color: #DFE2E6; |
||||
|
} |
||||
|
</style> |
||||
@ -1,517 +0,0 @@ |
|||||
<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' }" @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> <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="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> <img src="@/assets/site/info_filled.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 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="yesSet">已设置</span> |
|
||||
<GuipButton type="normal" :btnstyle="{ width: '94px', height: '38px' }" |
|
||||
@click="manageDialog('configAppInfo')">管理设置</GuipButton> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="biditemMast mb24 flex-between"> |
|
||||
<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>配置离线转化信息</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: '94px', height: '38px' }" |
|
||||
@click="manageDialog('configOffline')">立即设置</GuipButton> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="biditemMast mb24 flex-between"> |
|
||||
<div class="bidwrap-item-top mb24 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: '94px', height: '38px' }" |
|
||||
@click="manageDialog('createOffline')">立即设置</GuipButton> |
|
||||
</div> |
|
||||
</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" 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; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.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; |
|
||||
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; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.biditem360 { |
|
||||
b { |
|
||||
display: inline-block; |
|
||||
width: 80px; |
|
||||
text-align: left; |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.addStore { |
|
||||
margin-top: 24px; |
|
||||
} |
|
||||
|
|
||||
.radio-wrap {} |
|
||||
.tcpr-wrap .bidwrap-item{ |
|
||||
padding: 0; |
|
||||
background: transparent; |
|
||||
.biditemMast{ |
|
||||
background: #fff; |
|
||||
padding: 24px 16px; |
|
||||
} |
|
||||
} |
|
||||
.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; |
|
||||
} |
|
||||
a{ |
|
||||
text-decoration: none; |
|
||||
color: #006AFF; |
|
||||
img{ |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.bidwrap-item-bot { |
|
||||
padding-left: 54px; |
|
||||
justify-content: flex-end; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
@ -1,206 +1,517 @@ |
|||||
<template> |
<template> |
||||
<div class="demo-wrap min-flex-right"> |
<div class="site-sem-wrap min-flex-right"> |
||||
<div class="flex-between"> |
<div class="siteMessage flex-common" id="siteMessage11"> |
||||
<h2>站点列表</h2> |
<h3>搜索引擎优化（SEO） <span>通过SEO设置，可以免费获得流量、提高网站在搜索引擎中的排名</span></h3> |
||||
<el-form :model="form"> |
<el-form ref="formRef" :model="semForm1"> |
||||
<GuipSelect v-model="form.payword" :defaultValue="form.payword" prop="payword" width="100%" |
<div class="flex-wrap"> |
||||
:options="options_payword" /> |
<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' }" @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> <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="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> |
||||
|
<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> <img src="@/assets/site/info_filled.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 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> |
||||
<div class=" flex-common" id=""> |
|
||||
<el-form> |
|
||||
<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" |
|
||||
style="width: 100%" :key="random()"> |
|
||||
<el-table-column type="index" label="排序" width="100"> |
|
||||
</el-table-column> |
|
||||
<!-- 其他列 --> |
|
||||
<el-table-column prop="name" label="站点简称" width="210"> |
|
||||
<template slot-scope="scope"> |
|
||||
<a class="name_link flex cell_render" :href="scope.row.link" target="_blank"> |
|
||||
{{ scope.row.name }} |
|
||||
<img class="edit_icon" src="@/assets/site/form_link.svg" alt=""> |
|
||||
</a> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="registerDate" label="注册时间"></el-table-column> |
|
||||
<el-table-column prop="count" label="6月订单数" sortable width="230"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div class="flex"> |
<div class="flex"> |
||||
{{ scope.row.count }} |
<span class="yesSet">已设置</span> |
||||
<span class="flex"><img class="edit_icon" src="@/assets/site/form_link.svg" alt="">{{ |
<GuipButton type="normal" :btnstyle="{ width: '94px', height: '38px' }" |
||||
scope.row.percentage }}%上年持平</span> |
@click="manageDialog('configAppInfo')">管理设置</GuipButton> |
||||
</div> |
</div> |
||||
</template> |
</div> |
||||
</el-table-column> |
<div class="biditemMast mb24 flex-between"> |
||||
<el-table-column prop="price" label="8月订单数" sortable></el-table-column> |
<div class="bidwrap-item-top mb24 flex"> |
||||
<el-table-column prop="phoneService" label="手机服务" :filters="phoneService" |
<img class="bid-item-img" src="@/assets/site/step_2.png" alt=""> |
||||
:filter-method="filterHandler"> |
<div class="top-right column"> |
||||
</el-table-column> |
<b>配置离线转化信息</b> |
||||
<el-table-column prop="status" label="状态" width="195"></el-table-column> |
<p class="flex"><a href="" class="flex"> <img |
||||
<!-- <el-table-column fixed="right" label="操作" width="182"> |
src="@/assets/site/form_linkActive.svg" alt="">前往微软云</a>，左上角切换有效的账户，从浏览器地址栏链接中获取aid的值和cid的值</p> |
||||
<template slot-scope="scope"> |
</div> |
||||
|
</div> |
||||
|
<div class="flex"> |
||||
|
<span class="notSet">已设置</span> |
||||
|
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }" |
||||
|
@click="manageDialog('configOffline')">立即设置</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="biditemMast mb24 flex-between"> |
||||
|
<div class="bidwrap-item-top mb24 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"> |
<div class="flex"> |
||||
<el-button @click="handleServiceClick(scope.row)" type="text">服务列表</el-button> |
<span class="notSet">已设置</span> |
||||
<el-button @click="handleSetClick(scope.row)" type="text">站点设置</el-button> |
<GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }" |
||||
</div> |
@click="manageDialog('createOffline')">立即设置</GuipButton> |
||||
</template> |
</div> |
||||
</el-table-column> --> |
</div> |
||||
</el-table> |
</div> |
||||
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
</div> |
||||
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
</div> |
||||
:total="tableData.length"> |
</el-form> |
||||
</el-pagination> |
<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> |
</el-form> |
||||
|
<GroupFormBtns @cancel="cancelClick" @confirm="confirmClick('semForm3')" /> |
||||
</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" |
||||
|
: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> |
</div> |
||||
|
|
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
import GuipSelect from '@/components/GuipSelect.vue' |
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 { |
export default { |
||||
// 站点设置 |
// 站点设置 |
||||
name: '', |
name: '', |
||||
props: [''], |
props: [''], |
||||
components: { |
components: { |
||||
GuipSelect, |
CreateOffLine, |
||||
// GuipSelectFilter, |
ConfigAppInformation, |
||||
|
ConfigOffLineConversion, |
||||
|
GuipInput, |
||||
|
GuipFormItem, |
||||
|
GuipButton, |
||||
|
GroupFormBtns, |
||||
|
GuipDialog |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
phoneService: [ |
configType:'configAppInfo', |
||||
{ |
diaTitle:'配置应用信息', |
||||
text: '不限', |
bidList: ['baidu', '360', 'mast'], |
||||
value: '0' |
bidAddRadio: '', |
||||
}, |
bidAddList: { |
||||
{ |
'baidu': '百度OCPC竞价', |
||||
text: 'H5', |
'360': '360OCPC竞价', |
||||
value: '1' |
'mast': '必应TCPA竞价', |
||||
}, |
}, |
||||
{ |
configTitle:{ |
||||
text: '小程序', |
createOffline:'创建离线转化', |
||||
value: '2' |
configOffline:'配置离线转化信息', |
||||
}, |
configAppInfo:'配置应用信息', |
||||
{ |
}, |
||||
text: 'H5以及小程序', |
dialogVisibleBid: false, |
||||
value: '3' |
dialogVisibleConfig: false, |
||||
}, |
semForm1: { |
||||
], |
title: '', |
||||
currentPage: 1, //当前页 |
keyWord: '', |
||||
pageSize: 2, //每页的容量 |
desc: '' |
||||
total: 0, //列表总数 |
}, |
||||
options_payword: [ |
semForm2: { |
||||
{ |
title: '', |
||||
label: '按篇', value: '0' |
keyWord: '', |
||||
}, |
desc: '' |
||||
{ |
}, |
||||
label: '按字符', value: '1' |
semForm3: { |
||||
}, |
code: '', |
||||
], |
}, |
||||
options: [ |
semFormbid1: { |
||||
{ label: '选项1', value: '1' }, |
token: '', |
||||
{ label: '选项2', value: '2' }, |
url: '' |
||||
{ label: '选项3', value: '3' }, |
|
||||
// 更多选项... |
}, |
||||
], |
semFormbid2: { |
||||
filteredOptions: this.options, |
appKey: '', |
||||
|
appSecret: '' |
||||
phoneServicelist: |
}, |
||||
{ |
|
||||
0: '不限', |
semFormbid3: { |
||||
1: ' H5', |
|
||||
2: '小程序', |
|
||||
3: '无手机服务' |
|
||||
|
|
||||
}, |
|
||||
tableData: [ |
|
||||
{ |
|
||||
name: '哈哈哈', |
|
||||
link: 'http://www.chachongz.com', |
|
||||
registerDate: '2025.02.18', |
|
||||
group: '1', |
|
||||
phoneService: '1', |
|
||||
status: '1',//配置中中 |
|
||||
price: 10, |
|
||||
count: 23432, |
|
||||
percentage: '2.5' |
|
||||
|
|
||||
}, |
|
||||
{ |
|
||||
name: '知网学诚教育', |
|
||||
link: 'http://new.checkcopy.com', |
|
||||
registerDate: '2025.02.18', |
|
||||
group: '2', |
|
||||
phoneService: '2', |
|
||||
status: '0',//运行中 |
|
||||
price: 20, |
|
||||
count: 3432, |
|
||||
percentage: '17.5' |
|
||||
}, |
|
||||
{ |
|
||||
name: '哈哈哈111', |
|
||||
link: 'http://www.chachongz.com', |
|
||||
registerDate: '2025.02.18', |
|
||||
group: '1', |
|
||||
phoneService: '1', |
|
||||
status: '1',//配置中中 |
|
||||
price: 10, |
|
||||
count: 7868, |
|
||||
percentage: '2.5' |
|
||||
|
|
||||
}, |
|
||||
{ |
|
||||
name: '知网学诚教育2222', |
|
||||
link: 'http://new.checkcopy.com', |
|
||||
registerDate: '2025.02.18', |
|
||||
group: '2', |
|
||||
phoneService: '2', |
|
||||
status: '0',//运行中 |
|
||||
price: 20, |
|
||||
count: 32432, |
|
||||
percentage: '17.5' |
|
||||
}, |
|
||||
], |
|
||||
form: { |
|
||||
payword: '0', |
|
||||
} |
} |
||||
} |
} |
||||
}, |
}, |
||||
|
computed: { |
||||
|
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
||||
|
}, |
||||
mounted() { |
mounted() { |
||||
// this.$refs.scrollContainer.scrollTo(0) |
store.commit('SET_PAGETITLE', '营销推广'); |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
// 列筛选 |
addBid() { |
||||
filterHandler(value, row, column) { |
this.dialogVisibleBid = true; |
||||
// console.log(value, row, column,'======'); |
|
||||
const property = column['property']; |
|
||||
if (value == 0) { |
|
||||
return row[property] != value |
|
||||
} |
|
||||
return row[property] === value; |
|
||||
}, |
}, |
||||
// 自定义搜索筛选 |
semFormConmit(type,key) { |
||||
customFilter(keyword, options) { |
console.log(key, 'key---'); |
||||
if (!keyword) return options |
|
||||
return options.filter(item => { |
|
||||
// 自定义筛选逻辑 |
|
||||
return item.label.includes(keyword) || item.value.includes(keyword) |
|
||||
}) |
|
||||
}, |
}, |
||||
handleSizeChange(val) { |
radioChange(data) { |
||||
this.pageSize = val |
console.log(data, 'radio--data'); |
||||
}, |
}, |
||||
handleCurrentChange(val) { |
cancelClick() { |
||||
this.currentPage = val |
|
||||
|
console.log('quxiao'); |
||||
}, |
}, |
||||
random() { |
confirmClick(type) { |
||||
var randomNumber = Math.random(); |
console.log(type, '确认'); |
||||
return randomNumber |
|
||||
}, |
}, |
||||
|
// 确认按钮事件 |
||||
|
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> |
</script> |
||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||
.demo-wrap { |
.site-sem-wrap { |
||||
width: 100%; |
width: 100%; |
||||
letter-spacing: 0.08em; |
letter-spacing: 0.08em; |
||||
} |
} |
||||
|
|
||||
|
.notSet,.yesSet { |
||||
|
margin-right: 12px; |
||||
|
color: #FF4D4F; |
||||
|
} |
||||
|
|
||||
|
.yesSet { |
||||
|
color: #00C261; |
||||
|
} |
||||
|
.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; |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.biditem360 { |
||||
|
b { |
||||
|
display: inline-block; |
||||
|
width: 80px; |
||||
|
text-align: left; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.addStore { |
||||
|
margin-top: 24px; |
||||
|
} |
||||
|
|
||||
|
.radio-wrap {} |
||||
|
.tcpr-wrap .bidwrap-item{ |
||||
|
padding: 0; |
||||
|
background: transparent; |
||||
|
.biditemMast{ |
||||
|
background: #fff; |
||||
|
padding: 24px 16px; |
||||
|
} |
||||
|
} |
||||
|
.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; |
||||
|
} |
||||
|
a{ |
||||
|
text-decoration: none; |
||||
|
color: #006AFF; |
||||
|
img{ |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bidwrap-item-bot { |
||||
|
padding-left: 54px; |
||||
|
justify-content: flex-end; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
</style> |
</style> |
||||
Loading…
Reference in new issue