first win activity

src/api.js

@@ -5,8 +5,8 @@ import config from './config';
 
 Vue.use(VueResource)
 
-const URL = "http://localhost:3000/api"
-// const URL = "https://api.mycard.moe/ygopro/arena"
+// const URL = "http://localhost:3000/api"
+const URL = "https://api.mycard.moe/ygopro/arena"
 
 export default class Api {
 
@@ -127,4 +127,20 @@ export default class Api {
         return Vue.http.post(url, opt, { 'emulateJSON': true });
     }
 
+    static getFirstWin(opt) {
+        var request = query.stringify(opt);
+        const url = `${URL}/firstwin?${request}`;
+        return Vue.http.get(url);
+    }
+
+    static adSwitchChange(opt) {
+        const url = `${URL}/adSwitchChange`
+        return Vue.http.post(url, opt, { 'emulateJSON': true });
+    }
+
+    static saveActivity(opt) {
+        const url = `${URL}/activity`
+        return Vue.http.post(url, opt, { 'emulateJSON': true });
+    }
+
 }

src/components/Ads.vue

 <template>
 	<div class="container">
 		<div id="history">
+			<h4 class="color-blue"><i class="glyphicon glyphicon-filter"></i> 系统设置</h4>
 
+			<el-form :model="dynamicValidateForm" :rules="rules2" ref="dynamicValidateForm" label-width="180px" class="demo-dynamic">
 
+				<el-form-item label="自动关闭弹窗广告设置">
+					<el-switch v-model="ad_switch" @change="adSwitchChange(ad_switch)" on-color="#13ce66" off-color="#ff4949" on-text="启用" off-text="禁用"
+						:on-value="onValue" :off-value="offValue">
+						</el-switch>
+				</el-form-item>
 
-			<el-button type="text" @click="newVote">新增广告素材</el-button>
+				<el-form-item label="首胜活动设置">
+					<el-button type="link" @click="firstWin">点我设置</el-button>
+				</el-form-item>
 
+			</el-form>
+
+			<h4 class="color-blue"><i class="glyphicon glyphicon-filter"></i> 广告素材列表</h4>
+			<el-button type="text" @click="newVote">新增广告素材</el-button>
 			<el-dialog title="广告素材" :visible.sync="dialogFormVisible">
 				<el-form :model="dynamicValidateForm" :rules="rules2" ref="dynamicValidateForm" label-width="80px" class="demo-dynamic">
 
@@ -56,6 +69,30 @@
 			</el-dialog>
 
 
+			<el-dialog title="首胜活动设置" :visible.sync="firstWinDialogVisible">
+				<el-form :model="firstWinForm" :rules="rules2" ref="firstWinForm" label-width="80px" class="demo-dynamic">
+
+					<el-form-item prop="name" label="活动标题" :rules="{required: true, message: '活动标题不能为空', trigger: 'blur'}">
+						<el-input v-model="firstWinForm.name"></el-input>
+					</el-form-item>
+
+					<el-form-item prop="email" label="活动日期">
+						<el-date-picker v-model="date" type="daterange" placeholder="选择日期范围" :picker-options="pickerOptions2" style="width: 220px;">
+						</el-date-picker>
+					</el-form-item>
+
+					<el-form-item prop="max" label="达标场次" >
+						<el-input v-model="firstWinForm.max" placeholder=""></el-input>
+					</el-form-item>
+
+				</el-form>
+				<div slot="footer" class="dialog-footer">
+					<el-button @click="firstWinDialogVisible = false">取 消</el-button>
+					<el-button type="primary" @click="submitFirstWinForm('firstWinForm')">提 交</el-button>
+				</div>
+			</el-dialog>
+
+
 			<hr>
 
 			<!--<el-form :inline="true" :model="formInline">
@@ -150,23 +187,23 @@
 					this.from_date = '';
 					this.to_date = '';
 				}
-				if (this.needRender) {
-					this.renderTable()
-				}
+				// if (this.needRender) {
+				// 	this.renderTable()
+				// }
 			},
 		},
 		data: function () {
 			var checkMax = (rule, value, callback) => {
 				if (!value) {
-					return callback(new Error('个数不能为空'));
+					return callback(new Error('次数不能为空'));
 				}
 				setTimeout(() => {
 					value = value - 0
 					if (!Number.isInteger(value)) {
 						callback(new Error('请输入数字值'));
 					} else {
-						if (value > 6) {
-							callback(new Error('个数不能超过6个'));
+						if (value > 365) {
+							callback(new Error('次数不能超过365个'));
 						} else {
 							callback();
 						}
@@ -176,9 +213,10 @@
 			return {
 				rules2: {
 					max: [
-						{ validator: checkMax, trigger: 'blur' }
+						{ validator: checkMax, trigger: 'blur' ,required: true}
 					]
 				},
+				ad_switch: true,
 				radio: "x",
 				loading: true,
 				onValue: true,
@@ -258,6 +296,10 @@
 					clkurl: API.clkUrl
 				},
 				dialogFormVisible: false,
+				firstWinDialogVisible: false,
+				firstWinForm: {
+
+				},
 				form: {
 					name: '',
 					region: '',
@@ -281,6 +323,39 @@
 		},
 
 		methods: {
+			firstWin: function () {
+				API.getFirstWin({}).then((res) => {
+					this.firstWinForm.name = res.data.name
+					this.firstWinForm.max = res.data.max
+					this.firstWinDialogVisible = true
+					this.date = [moment(res.data.start).format('YYYY-MM-DD HH:mm'), moment(res.data.end).format('YYYY-MM-DD HH:mm')]
+					// from_date: moment().format('YYYY-MM-DD HH:mm'),
+					// to_date: moment().add(7, 'd').format('YYYY-MM-DD HH:mm'),
+					// date: [moment().format('YYYY-MM-DD HH:mm'), moment().add(7, 'd').format('YYYY-MM-DD')],
+				}, (res) => {
+					// this.loading = false
+				});
+			},
+			adSwitchChange: function (status) {
+				// this.loading = true
+				var param = {
+					status: status
+				}
+				console.log(status)
+				API.adSwitchChange(param).then((res) => {
+					// this.loading = false
+
+					// this.$notify({
+					// 	title: '操作成功',
+					// 	message: '状态已修改!',
+					// 	type: 'success'
+					// })
+
+				}, (res) => {
+					// this.loading = false
+				});
+			},
+
 			switchChange: function (id, status) {
 				// this.loading = true
 				var param = {
@@ -392,14 +467,59 @@
 					history.data = res.data.data;
 					// console.log(history.data)
 					_this.history = history
-
-
+					_this.ad_switch = res.data.ad_switch
 
 				}, (res) => {
 					//
 					_this.loading = false
 				})
 			},
+			submitFirstWinForm(formName) {
+				this.$refs[formName].validate((valid) => {
+					if (valid) {
+
+						if (this.isClick) {
+							this.$notify({
+								title: '警告',
+								message: '您操作得太快了!',
+								type: 'error'
+							})
+						} else {
+							this.isClick = true;
+							var param = {
+								name: this.firstWinForm.name,
+								start: this.from_date,
+								end: this.to_date,
+								max: this.firstWinForm.max,
+							}
+
+							var _this = this;
+
+							API.saveActivity(param).then((res) => {
+								this.firstWinDialogVisible = false
+
+								// this.$notify({
+								// 	title: '操作成功',
+								// 	message: '感谢您的提交!',
+								// 	type: 'success'
+								// })
+								setTimeout(function () {
+									_this.isClick = false;
+								}, 1500)
+							}, (res) => {
+								setTimeout(function () {
+									_this.isClick = false;
+								}, 1500)
+							});
+
+						}
+
+					} else {
+						console.log('error submit!!');
+						return false;
+					}
+				});
+			},
 			submitForm(formName) {
 				this.$refs[formName].validate((valid) => {
 					if (valid) {

src/components/Index.vue

@@ -12,14 +12,14 @@
       </div>
     </div>
 
-    <div id="promo2" v-if="adObj.id" v-bind:style="{ backgroundImage: 'url(' + adObj.src + ')' }">
+    <div id="promo2" v-if="adObj.id" v-bind:style="{ backgroundImage: 'url(' + adObj.src + ')' , width: width}">
       <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 style="position:absolute;bottom:0;right:0;width:100px;height:10px;border:1px solid red;z-index:100; ">广告</div>-->
     </div>
 
 
@@ -72,9 +72,10 @@
     data() {
       return {
         isMobile: false,
+        width: '55%',
         image: image,
         image3: image3,
-        adObj:{}
+        adObj: {}
       }
     },
 
@@ -87,6 +88,10 @@
 
     mounted: function () {
       var _this = this
+
+      if (this.isMobile) {
+        this.width="100%"
+      }
       API.getAd({}).then((res) => {
         if (res.data.data && res.data.data !== "null") {
           _this.adObj = res.data.data
@@ -124,7 +129,7 @@
         // window.open(url)
         window.location.href = url
       },
-      adClick: function(){
+      adClick: function () {
         API.adClick({ id: this.adObj.id }).then((res) => {
 
         }, (res) => {
@@ -133,7 +138,7 @@
 
         window.open(this.adObj.click_ref, "_blank");
       },
-      adImpl: function(){
+      adImpl: function () {
         API.adImpl({ id: this.adObj.id }).then((res) => {
 
         }, (res) => {
@@ -179,7 +184,11 @@
     padding: 40px;
     background-repeat: no-repeat;
     background-size: cover;
-    margin-top: 50px;
+    /*background-size: contain;*/
+    margin-top: 80px;
+    margin-left: auto;
+    margin-right: auto;
+    background-position: center;
   }
   
   .el-carousel__item h3 {

src/components/PageHeader.vue

@@ -87,8 +87,9 @@
       </div>
     </el-dialog>
 
-    <div id="ads" style="display: none">
+    <div id="ads" style="display: none;position: relative;">
       <div @click="adClick">
+        <div v-if="autoClose" style="text-align: center;position: absolute;width:20px;height: 20px;margin-top: 0px; float: right;background-color: red">{{timer}}</div>
         <img v-bind:style="{ height: 'auto',  width: width  }" v-bind:src="adObj.src">
       </div>
     </div>
@@ -114,6 +115,7 @@
       const cityOptions = ['上海', '北京', '广州', '深圳'];
       return {
         opids: [],
+        timer: 5,
         height: "300",
         width: "400",
         isMobile: false,
@@ -125,6 +127,7 @@
         adObj: {
 
         },
+        autoClose: false,
         size: 'small',
         dialogFormVisible: false,
         form: {
@@ -172,8 +175,21 @@
       //   }
       // }
 
+      var ad_popup = localStorage.getItem('ad_popup');
+      if (ad_popup) {
+        var today = moment().format('YYYY-MM-DD')
+        if (ad_popup === today) {
+          return
+        }
+      }
+
+      var time = 5000
+
       var _this = this
       API.getAd({}).then((res) => {
+        if (res.data.auto_close_ad && res.data.auto_close_ad === "true") {
+          _this.autoClose = true
+        }
         if (res.data.data && res.data.data !== "null") {
           _this.adObj = res.data.data
           if (_this.isMobile) {
@@ -182,44 +198,53 @@
             _this.adObj.src = _this.adObj.imgp_url
           }
 
-          setTimeout(function () {
 
-            var area = ["800px", "480px"]
-            if (_this.isMobile) {
-              area = ["300px", "400px"]
-            }
+          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()
+          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()
+
+              localStorage.setItem('ad_popup', moment().format('YYYY-MM-DD'));
+
+              if (_this.autoClose) {
+                var int = setInterval(function () {
+                  _this.timer--;
+                  if (_this.timer == 0) {
+                    clearInterval(int)
+                    // layer.close(layer.index);
+                    layer.closeAll();
+                  }
+                }, 1000)
               }
-            });
 
-          }, 3000)
+
+            }
+            , end: function () {
+              $("#ads").hide()
+            }
+          });
 
 
         }

src/components/Profile.vue

@@ -7,7 +7,8 @@
             <img v-bind:src="user.avatar_url" style="height:200px;margin-top:13px;">
             <div class="caption">
               <h3> <i class="glyphicon glyphicon-user"></i> <strong>{{user.username}}</strong></h3>
-              <!--<p class="text-nowrap text-muted" style="font-size:20px;">有妞不泡，大逆不道;遇妞则泡，替天行道。 </p>-->
+              <p class="text-muted" style="font-size:20px;">今日首胜: {{activity.today}}/1 </p>
+              <p class="text-muted" style="font-size:20px;">{{activity.name}}首胜: {{activity.total}}/{{activity.max}} </p>
             </div>
           </div>
         </div>
@@ -150,6 +151,10 @@
     data() {
       return {
         isMobile: false,
+        activity:{
+          name:'新年充电活动',
+          max:'15'
+        },
         user_info: {
           exp: 0,
           pt: 500,
@@ -250,6 +255,14 @@
         }, (res) => {
           console.log(res)
         });
+
+        var _this = this;
+
+        API.getFirstWin({ username: username }).then((res) => {
+            _this.activity = res.data
+        }, (res) => {
+          console.log(res)
+        });
       },
 
       renderRankTable: function (id, tableData, ttype) {

src/components/Userinfo.vue

@@ -25,6 +25,8 @@
 						<div class="caption">
 							<h3> <i class="glyphicon glyphicon-user"></i> <strong>{{username}}</strong></h3>
 							<!--<p class="text-nowrap text-muted" style="font-size:20px;">有妞不泡，大逆不道;遇妞则泡，替天行道。 </p>-->
+							<p class="text-muted" style="font-size:20px;">今日首胜: {{activity.today}}/1 </p>
+							<p class="text-muted" style="font-size:20px;">{{activity.name}}首胜: {{activity.total}}/{{activity.max}} </p>
 						</div>
 					</div>
 				</div>
@@ -171,6 +173,10 @@
 	export default {
 		data() {
 			return {
+				activity: {
+					name: '新年充电活动',
+					max: '15'
+				},
 				searchText: "",
 				hasError: false,
 				username: "",
@@ -278,6 +284,13 @@
 				}, (res) => {
 					console.log(res)
 				});
+
+				var _this = this;
+				API.getFirstWin({ username: username }).then((res) => {
+					_this.activity = res.data
+				}, (res) => {
+					console.log(res)
+				});
 			},
 
 			renderRankTable: function (id, tableData, ttype) {
@@ -315,7 +328,7 @@
 									diff = "+" + diff
 								}
 								var append = diff + ttype
-								if(ttype === ""){
+								if (ttype === "") {
 									append = ""
 								}
 								if (userscorea < 0) {
@@ -339,7 +352,7 @@
 									diff = "+" + diff
 								}
 								var append = diff + ttype
-								if(ttype === ""){
+								if (ttype === "") {
 									append = ""
 								}
 								if (userscoreb < 0) {