Commit 692bcec5 authored by ganjingcun's avatar ganjingcun

ads

parent 5fe5c56e
......@@ -12,6 +12,10 @@ export default class Api {
static uploadUrl = `${URL}/upload`
static implUrl = `${URL}/impltrack`
static clkUrl = `${URL}/clktrack`
static getDownloadUrl(url) {
url = url.slice(7)
var downloadUrl = `${URL}/download/${url}`
......@@ -95,4 +99,32 @@ export default class Api {
return Vue.http.post(url, opt, { 'emulateJSON': true });
}
static saveAds(opt) {
const url = `${URL}/ads`
return Vue.http.post(url, opt, { 'emulateJSON': true });
}
static getAdsList(opt) {
return Vue.http.get(`${URL}/ads`, { 'params': opt });
}
static adsStatus(opt) {
const url = `${URL}/adsStatus`
return Vue.http.post(url, opt, { 'emulateJSON': true });
}
static getAd(opt) {
return Vue.http.get(`${URL}/getAd`, { 'params': opt });
}
static adClick(opt) {
const url = `${URL}/adClick`
return Vue.http.post(url, opt, { 'emulateJSON': true });
}
static adImpl(opt) {
const url = `${URL}/adImpl`
return Vue.http.post(url, opt, { 'emulateJSON': true });
}
}
This diff is collapsed.
<template>
<div class="hello">
<div id="promo" v-if="!user.isLogin" v-bind:style="{ backgroundImage: 'url(' + image + ')' }">
<div class="jumbotron">
<h1>MyCard </h1>
......@@ -9,6 +12,18 @@
</div>
</div>
<div id="promo2" v-if="adObj.id" v-bind:style="{ backgroundImage: 'url(' + adObj.src + ')' }">
<div class="jumbotron">
<h3>{{adObj.name}} </h3>
<p>{{adObj.desctext}}</p>
<p><a class="text-uppercase btn btn-info btn-lg" @click="adClick">去看看!</a></p>
<!--<p><a class="text-uppercase btn btn-info btn-lg" href="#/download">Start Now!</a></p>-->
</div>
<div style="float:right;position:relative; background-color: #d3dce6; padding: 4px; margin-right: -38px; margin-top: 10px;">广告</div>
</div>
<div class="projects-clean" v-bind:class="{ 'fix-top': user.isLogin }">
<div class="container" id="project">
<div class="intro">
......@@ -49,13 +64,17 @@
<script>
import querystring from 'querystring';
import image from '../assets/img/banner.jpg'
import image3 from '../assets/img/image3.png'
import { mapGetters } from 'vuex'
import API from '../api'
export default {
data() {
return {
isMobile: false,
image: image,
image3: image3,
adObj:{}
}
},
......@@ -66,6 +85,24 @@
}),
},
mounted: function () {
var _this = this
API.getAd({}).then((res) => {
if (res.data.data && res.data.data !== "null") {
_this.adObj = res.data.data
if (_this.isMobile) {
_this.adObj.src = _this.adObj.imgm_url
} else {
_this.adObj.src = _this.adObj.imgp_url
}
}
}, (res) => {
console.log(res)
});
},
created: function () {
var clientWidth = document.body.clientWidth;
if (clientWidth < 753) {
......@@ -86,6 +123,22 @@
gogo: function (url) {
// window.open(url)
window.location.href = url
},
adClick: function(){
API.adClick({ id: this.adObj.id }).then((res) => {
}, (res) => {
console.log(res)
});
window.open(this.adObj.click_ref, "_blank");
},
adImpl: function(){
API.adImpl({ id: this.adObj.id }).then((res) => {
}, (res) => {
console.log(res)
});
}
},
}
......@@ -120,4 +173,28 @@
background-size: cover;
margin-top: 50px;
}
#promo2 {
text-align: center;
padding: 40px;
background-repeat: no-repeat;
background-size: cover;
margin-top: 50px;
}
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
\ No newline at end of file
......@@ -87,7 +87,11 @@
</div>
</el-dialog>
<div id="ads" style="display: none">
<div @click="adClick">
<img v-bind:style="{ height: 'auto', width: width }" v-bind:src="adObj.src">
</div>
</div>
......@@ -110,11 +114,16 @@
const cityOptions = ['上海', '北京', '广州', '深圳'];
return {
opids: [],
height: "300",
width: "400",
isMobile: false,
cities: cityOptions,
voteObj: {
multiple: false,
options: []
},
adObj: {
},
size: 'small',
dialogFormVisible: false,
......@@ -149,11 +158,7 @@
var _this = this
if (location.hash === "#/vote" || location.hash === "#/report") {
return;
}
if (!this.user.isLogin) {
if (location.hash === "#/vote" || location.hash === "#/report" || location.hash === "#/ads") {
return;
}
......@@ -167,10 +172,70 @@
// }
// }
var _this = this
API.getAd({}).then((res) => {
if (res.data.data && res.data.data !== "null") {
_this.adObj = res.data.data
if (_this.isMobile) {
_this.adObj.src = _this.adObj.imgm_url
} else {
_this.adObj.src = _this.adObj.imgp_url
}
setTimeout(function () {
var area = ["800px", "480px"]
if (_this.isMobile) {
area = ["300px", "400px"]
}
layer.open({
type: 1
, title: false //不显示标题栏
// ,closeBtn: false
, area: area
, shade: 0.8
, offset: _this.isMobile ? '100px' : "auto"
, id: 'LAY_layuipro' //设定一个id,防止重复弹出
// ,btn: ['火速围观', '残忍拒绝']
, btnAlign: 'c'
, moveType: 1 //拖拽模式,0或者1
, content: $('#ads')
, success: function (layero) {
var btn = layero.find('.layui-layer-btn');
btn.find('.layui-layer-btn0').attr({
href: 'http://www.layui.com/'
, target: '_blank'
});
}
, success: function () {
_this.adImpl()
setTimeout(function () {
layer.close(layer.index);
}, 5000)
}
, end: function () {
$("#ads").hide()
}
});
}, 3000)
}
}, (res) => {
console.log(res)
});
if (!this.user.isLogin) {
return;
}
API.getVote({ user: this.user.id, username: this.user.username }).then((res) => {
if(res.data.data && res.data.data !== "null"){
if (res.data.data && res.data.data !== "null") {
this.voteObj = res.data.data
this.voteObj.options = JSON.parse(this.voteObj.options)
......@@ -260,8 +325,29 @@
},
methods: {
adClick: function () {
API.adClick({ id: this.adObj.id }).then((res) => {
}, (res) => {
console.log(res)
});
window.open(this.adObj.click_ref, "_blank");
},
adImpl: function () {
API.adImpl({ id: this.adObj.id }).then((res) => {
}, (res) => {
console.log(res)
});
},
submitVote: function () {
var param = {
user: this.user.id,
username: this.user.username,
......
......@@ -164,6 +164,18 @@
export default {
created: function () {
//权限设置
if (!this.user.isLogin || !this.user.admin) {
this.$notify({
// title: '警告',
message: '需要管理员权限才能查看该页面,已为您自动跳转到首页 !',
type: 'warning'
})
this.loading = false
return this.$router.replace('/')
}
var lang = localStorage.getItem('lang') || 'cn';
this.init(lang)
},
......@@ -304,6 +316,13 @@
}
},
computed: {
...mapGetters({
lang: 'getLang',
user: 'getUser'
})
},
methods: {
switchChange: function (id, status) {
// this.loading = true
......
......@@ -11,6 +11,7 @@ import History from '@/components/History'
import Deck from '@/components/Deck'
import Report from '@/components/Report'
import Vote from '@/components/Vote'
import Ads from '@/components/Ads'
Vue.use(Router)
......@@ -71,5 +72,10 @@ export default new Router({
name: 'Vote',
component: Vote
},
{
path: '/ads',
name: 'Ads',
component: Ads
},
]
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment