ads

src/api.js

@@ -12,10 +12,14 @@ 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}`
-        return downloadUrl 
+        return downloadUrl
     }
 
     static getCount(opt) {
@@ -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 });
+    }
+
 }

src/components/Index.vue

 <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

src/components/PageHeader.vue

@@ -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)
 
@@ -239,8 +304,8 @@
             }, 1000)
           }
         }
-        
-    
+
+
 
 
 
@@ -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,

src/components/Vote.vue

@@ -164,12 +164,24 @@
 
 	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)
 		},
 
 		mounted: function () {
-
+			
 
 		},
 
@@ -304,6 +316,13 @@
 			}
 		},
 
+		computed: {
+      		...mapGetters({
+				lang: 'getLang',
+				user: 'getUser'
+			})
+		},
+
 		methods: {
 			switchChange: function (id, status) {
 				// this.loading = true
@@ -382,7 +401,7 @@
 				return row.status ? '启用' : '禁用'
 			},
 			formatter4(row, column) {
-				return row.count 
+				return row.count
 			},
 			renderTable: function () {
 				var params = {

src/router/index.js

@@ -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)
 
@@ -60,7 +61,7 @@ export default new Router({
       path: '/deck',
       name: 'Deck',
       component: Deck
-    }, 
+    },
     {
       path: '/report',
       name: 'Report',
@@ -71,5 +72,10 @@ export default new Router({
       name: 'Vote',
       component: Vote
     },
+    {
+      path: '/ads',
+      name: 'Ads',
+      component: Ads
+    },
   ]
 })