Commit 692bcec5 authored by ganjingcun's avatar ganjingcun

ads

parent 5fe5c56e
...@@ -12,6 +12,10 @@ export default class Api { ...@@ -12,6 +12,10 @@ export default class Api {
static uploadUrl = `${URL}/upload` static uploadUrl = `${URL}/upload`
static implUrl = `${URL}/impltrack`
static clkUrl = `${URL}/clktrack`
static getDownloadUrl(url) { static getDownloadUrl(url) {
url = url.slice(7) url = url.slice(7)
var downloadUrl = `${URL}/download/${url}` var downloadUrl = `${URL}/download/${url}`
...@@ -95,4 +99,32 @@ export default class Api { ...@@ -95,4 +99,32 @@ export default class Api {
return Vue.http.post(url, opt, { 'emulateJSON': true }); 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> <template>
<div class="hello"> <div class="hello">
<div id="promo" v-if="!user.isLogin" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"> <div id="promo" v-if="!user.isLogin" v-bind:style="{ backgroundImage: 'url(' + image + ')' }">
<div class="jumbotron"> <div class="jumbotron">
<h1>MyCard </h1> <h1>MyCard </h1>
...@@ -9,6 +12,18 @@ ...@@ -9,6 +12,18 @@
</div> </div>
</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="projects-clean" v-bind:class="{ 'fix-top': user.isLogin }">
<div class="container" id="project"> <div class="container" id="project">
<div class="intro"> <div class="intro">
...@@ -49,13 +64,17 @@ ...@@ -49,13 +64,17 @@
<script> <script>
import querystring from 'querystring'; import querystring from 'querystring';
import image from '../assets/img/banner.jpg' import image from '../assets/img/banner.jpg'
import image3 from '../assets/img/image3.png'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import API from '../api'
export default { export default {
data() { data() {
return { return {
isMobile: false, isMobile: false,
image: image, image: image,
image3: image3,
adObj:{}
} }
}, },
...@@ -66,6 +85,24 @@ ...@@ -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 () { created: function () {
var clientWidth = document.body.clientWidth; var clientWidth = document.body.clientWidth;
if (clientWidth < 753) { if (clientWidth < 753) {
...@@ -86,6 +123,22 @@ ...@@ -86,6 +123,22 @@
gogo: function (url) { gogo: function (url) {
// window.open(url) // window.open(url)
window.location.href = 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 @@ ...@@ -120,4 +173,28 @@
background-size: cover; background-size: cover;
margin-top: 50px; 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> </style>
\ No newline at end of file
...@@ -87,7 +87,11 @@ ...@@ -87,7 +87,11 @@
</div> </div>
</el-dialog> </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 @@ ...@@ -110,11 +114,16 @@
const cityOptions = ['上海', '北京', '广州', '深圳']; const cityOptions = ['上海', '北京', '广州', '深圳'];
return { return {
opids: [], opids: [],
height: "300",
width: "400",
isMobile: false, isMobile: false,
cities: cityOptions, cities: cityOptions,
voteObj: { voteObj: {
multiple: false, multiple: false,
options: [] options: []
},
adObj: {
}, },
size: 'small', size: 'small',
dialogFormVisible: false, dialogFormVisible: false,
...@@ -149,11 +158,7 @@ ...@@ -149,11 +158,7 @@
var _this = this var _this = this
if (location.hash === "#/vote" || location.hash === "#/report") { if (location.hash === "#/vote" || location.hash === "#/report" || location.hash === "#/ads") {
return;
}
if (!this.user.isLogin) {
return; return;
} }
...@@ -167,10 +172,70 @@ ...@@ -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) => { 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 = res.data.data
this.voteObj.options = JSON.parse(this.voteObj.options) this.voteObj.options = JSON.parse(this.voteObj.options)
...@@ -260,8 +325,29 @@ ...@@ -260,8 +325,29 @@
}, },
methods: { 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 () { submitVote: function () {
var param = { var param = {
user: this.user.id, user: this.user.id,
username: this.user.username, username: this.user.username,
......
...@@ -164,6 +164,18 @@ ...@@ -164,6 +164,18 @@
export default { export default {
created: function () { 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'; var lang = localStorage.getItem('lang') || 'cn';
this.init(lang) this.init(lang)
}, },
...@@ -304,6 +316,13 @@ ...@@ -304,6 +316,13 @@
} }
}, },
computed: {
...mapGetters({
lang: 'getLang',
user: 'getUser'
})
},
methods: { methods: {
switchChange: function (id, status) { switchChange: function (id, status) {
// this.loading = true // this.loading = true
......
...@@ -11,6 +11,7 @@ import History from '@/components/History' ...@@ -11,6 +11,7 @@ import History from '@/components/History'
import Deck from '@/components/Deck' import Deck from '@/components/Deck'
import Report from '@/components/Report' import Report from '@/components/Report'
import Vote from '@/components/Vote' import Vote from '@/components/Vote'
import Ads from '@/components/Ads'
Vue.use(Router) Vue.use(Router)
...@@ -71,5 +72,10 @@ export default new Router({ ...@@ -71,5 +72,10 @@ export default new Router({
name: 'Vote', name: 'Vote',
component: 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