|
@@ -109,6 +109,9 @@
|
|
|
padding-top: 0.5em;
|
|
|
padding-bottom: 0.5em;
|
|
|
}
|
|
|
+ .page2 .update_btn_div .btn1{
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
.page2 .input_div textarea{
|
|
|
background:rgba(255, 255, 255, 0.5);
|
|
|
}
|
|
@@ -219,6 +222,7 @@
|
|
|
}
|
|
|
.page3 .div4 .btn{
|
|
|
font-size: 20px;
|
|
|
+ width: 70%;
|
|
|
}
|
|
|
audio{
|
|
|
visibility: hidden;
|
|
@@ -281,7 +285,99 @@
|
|
|
font-size: 1.5em;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
-
|
|
|
+ .setusernamemodel .ivu-modal-content{
|
|
|
+ background-image: url('/static/image/newyear/model_bg.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .setusernamemodel .ivu-modal-header{
|
|
|
+ border-bottom:0px !important;
|
|
|
+ }
|
|
|
+ .setusernamemodel .ivu-modal-header p{
|
|
|
+ color:#f2c21f !important;
|
|
|
+ font-size: 20px;
|
|
|
+ height: 25px;
|
|
|
+ }
|
|
|
+ .setusernamemodel .ivu-modal-footer{
|
|
|
+ border-top:0px !important;
|
|
|
+ }
|
|
|
+ .setusernamemodel .ivu-form .ivu-form-item-label{
|
|
|
+ color:#f2c21f !important;
|
|
|
+ }
|
|
|
+ .setusernamemodel .ivu-input::-webkit-input-placeholder {
|
|
|
+ color:#f2c21f;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .setusernamemodel .ivu-input::-moz-placeholder {
|
|
|
+ color:#f2c21f;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ } /* firefox 19+ */
|
|
|
+ .setusernamemodel .ivu-input::-ms-input-placeholder {
|
|
|
+ color:#f2c21f;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ } /* ie */
|
|
|
+ .setusernamemodel .ivu-input::-moz-placeholder {
|
|
|
+ color:#f2c21f;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .setusernamemodel .ivu-input{
|
|
|
+ border: 0px;
|
|
|
+ background-color: transparent;
|
|
|
+ border-bottom: 1px solid #f2c21f;
|
|
|
+ border-radius: 0px;
|
|
|
+ color:#f2c21f;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .setusernamemodel .ivu-input:hover {
|
|
|
+ border: 0px;
|
|
|
+ border-bottom: 1px solid #f2c21f;
|
|
|
+ border-radius: 0px;
|
|
|
+ }
|
|
|
+ .setusernamemodel .ivu-input:focus{
|
|
|
+ -webkit-box-shadow: 0 0 0 0px rgba(45,140,240,.2) !important;
|
|
|
+ box-shadow: 0 0 0 0px rgba(45,140,240,.2) !important;
|
|
|
+ border-color: #f2c21f;
|
|
|
+ }
|
|
|
+ .setusernamemodel .savebtn{
|
|
|
+ background-color: #e79713;
|
|
|
+ color: #9a021a;
|
|
|
+ font-size: 20px;
|
|
|
+ padding-top: 0.05em;
|
|
|
+ padding-bottom: 0.05em;
|
|
|
+ }
|
|
|
+ .setusernamemodel .ivu-modal{
|
|
|
+ width: 70% !important;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .page2 .image_div .item_div{
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .page2 .image_div .item_div .upload_img_div{
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0px;
|
|
|
+ }
|
|
|
+ .page2 .image_div .item_div .upload_img_div .coverdiv{
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(156,2,26,0.5);
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ color:#e79713;
|
|
|
+ z-index: 7;
|
|
|
+ }
|
|
|
+ .page2 .image_div .item_div .upload_img_div .coverdiv i{
|
|
|
+ font-size: 20px;
|
|
|
+ color:#e79713;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
@@ -344,38 +440,56 @@
|
|
|
<input type="file" accept="image/*" id="uploadfile">
|
|
|
</div>
|
|
|
<div class="row row1">
|
|
|
- <div>
|
|
|
+ <div class="item_div">
|
|
|
<div class="upload_img_div" id="img1" :style="{ 'background-image': imglist[0] }">
|
|
|
<div class="btn" v-if="isnew" @click="uploadimg" data-index="1">点击上传</div>
|
|
|
+ <div class="coverdiv" v-if="isloadingimg1">
|
|
|
+ <v-icon>fa fa-spinner fa-spin</v-icon>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div>
|
|
|
+ <div class="item_div">
|
|
|
<div class="upload_img_div" id="img2" data-index="2">
|
|
|
<div class="btn" v-if="isnew" @click="uploadimg" data-index="2">点击上传</div>
|
|
|
+ <div class="coverdiv" v-if="isloadingimg2">
|
|
|
+ <v-icon>fa fa-spinner fa-spin</v-icon>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row row1">
|
|
|
- <div>
|
|
|
+ <div class="item_div">
|
|
|
<div class="upload_img_div" id="img3" data-index="3">
|
|
|
<div class="btn" v-if="isnew" @click="uploadimg" data-index="3">点击上传</div>
|
|
|
+ <div class="coverdiv" v-if="isloadingimg3">
|
|
|
+ <v-icon>fa fa-spinner fa-spin</v-icon>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div>
|
|
|
+ <div class="item_div">
|
|
|
<div class="upload_img_div" id="img4" data-index="4">
|
|
|
<div class="btn" v-if="isnew" @click="uploadimg" data-index="4">点击上传</div>
|
|
|
+ <div class="coverdiv" v-if="isloadingimg4">
|
|
|
+ <v-icon>fa fa-spinner fa-spin</v-icon>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row row1">
|
|
|
- <div>
|
|
|
+ <div class="item_div">
|
|
|
<div class="upload_img_div" id="img5" data-index="5">
|
|
|
<div class="btn" v-if="isnew" @click="uploadimg" data-index="5">点击上传</div>
|
|
|
+ <div class="coverdiv" v-if="isloadingimg5">
|
|
|
+ <v-icon>fa fa-spinner fa-spin</v-icon>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div>
|
|
|
+ <div class="item_div">
|
|
|
<div class="upload_img_div" id="img6" data-index="6">
|
|
|
<div class="btn" v-if="isnew" @click="uploadimg" data-index="6">点击上传</div>
|
|
|
+ <div class="coverdiv" v-if="isloadingimg6">
|
|
|
+ <v-icon>fa fa-spinner fa-spin</v-icon>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -416,19 +530,15 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <Modal v-model="nothaswname" width="360" v-if="upinfo" :closable="modelclosable" :mask-closable="modelclosable">
|
|
|
+ <Modal v-model="nothaswname" v-if="upinfo" :closable="modelclosable" :mask-closable="modelclosable" class="setusernamemodel">
|
|
|
<p slot="header" style="text-align:center">
|
|
|
- <span>用户名设置</span>
|
|
|
+ <span>请 输 入 您 的 姓 名</span>
|
|
|
</p>
|
|
|
<div style="text-align:center">
|
|
|
- <i-form :model="upinfo.userinfo" :label-width="80">
|
|
|
- <Form-item label="用户名">
|
|
|
- <i-input name="wname" v-model="upinfo.userinfo.wname"></i-input>
|
|
|
- </Form-item>
|
|
|
- </i-form>
|
|
|
+ <i-input name="wname" v-model="upinfo.userinfo.wname" placeholder="点击输入姓名"></i-input>
|
|
|
</div>
|
|
|
<div slot="footer">
|
|
|
- <i-button type="error" size="large" long @click="savewname">保存</i-button>
|
|
|
+ <i-button type="error" size="large" long @click="savewname" class="savebtn">保 存</i-button>
|
|
|
</div>
|
|
|
</Modal>
|
|
|
</div>
|
|
@@ -447,7 +557,6 @@
|
|
|
<!--<script src="/static/plugs/wechat/wx_share_config.js"></script>-->
|
|
|
<script>
|
|
|
var url =window.location.href;
|
|
|
- //alert(url)
|
|
|
var string = "jsapi_ticket=" +sharedata.ticket + "&noncestr=" + sharedata.nonceStr+ "×tamp=" +sharedata. timestamp + "&url=" + url;
|
|
|
sign = sha1(string)
|
|
|
wx.config({
|
|
@@ -456,7 +565,7 @@
|
|
|
timestamp:sharedata.timestamp , // 必填,生成签名的时间戳
|
|
|
nonceStr:sharedata.nonceStr, // 必填,生成签名的随机串
|
|
|
signature: sign,// 必填,签名,见附录1
|
|
|
- jsApiList:['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
|
|
|
+ jsApiList:['updateAppMessageShareData','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
|
|
|
});
|
|
|
wx.error(function(res){
|
|
|
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
|
|
@@ -478,17 +587,25 @@
|
|
|
el: '#app',
|
|
|
vuetify: new Vuetify(),
|
|
|
data: {
|
|
|
+ loadbg:0,
|
|
|
+ loaddedbg:0,
|
|
|
modelclosable:false,
|
|
|
nothaswname:false,
|
|
|
isbottom:false,
|
|
|
loading:true,
|
|
|
+ isloadingimg1:false,
|
|
|
+ isloadingimg2:false,
|
|
|
+ isloadingimg3:false,
|
|
|
+ isloadingimg4:false,
|
|
|
+ isloadingimg5:false,
|
|
|
+ isloadingimg6:false,
|
|
|
imglist : [
|
|
|
- {id:0,url:'/static/image/newyear/img2_1.png'},
|
|
|
- {id:0,url:'/static/image/newyear/img2_2.png'},
|
|
|
- {id:0,url:'/static/image/newyear/img2_3.png'},
|
|
|
- {id:0,url:'/static/image/newyear/img2_4.png'},
|
|
|
- {id:0,url:'/static/image/newyear/img2_5.png'},
|
|
|
- {id:0,url:'/static/image/newyear/img2_6.png'},
|
|
|
+ {id:0,url:'/static/image/newyear/img2_1.png',isloading:false},
|
|
|
+ {id:0,url:'/static/image/newyear/img2_2.png',isloading:false},
|
|
|
+ {id:0,url:'/static/image/newyear/img2_3.png',isloading:false},
|
|
|
+ {id:0,url:'/static/image/newyear/img2_4.png',isloading:false},
|
|
|
+ {id:0,url:'/static/image/newyear/img2_5.png',isloading:false},
|
|
|
+ {id:0,url:'/static/image/newyear/img2_6.png',isloading:false},
|
|
|
],
|
|
|
up_info_str:'个人简介',
|
|
|
up_info:'',
|
|
@@ -502,11 +619,15 @@
|
|
|
},
|
|
|
computed: {
|
|
|
isloading: function () {
|
|
|
- if(this.loading){
|
|
|
- return true
|
|
|
- }
|
|
|
- if(!this.upinfo){
|
|
|
- return true
|
|
|
+ if(this.loadbg>0&&this.loaddedbg>0){
|
|
|
+ if(this.loadbg<=this.loaddedbg){
|
|
|
+ if(this.loading){
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ if(!this.upinfo){
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
return false
|
|
|
}
|
|
@@ -538,6 +659,13 @@
|
|
|
});
|
|
|
},
|
|
|
initpage(){
|
|
|
+ const height = $(window).height();
|
|
|
+ const imagedivH = height*0.45;
|
|
|
+ const width = $(window).width();
|
|
|
+ const imagedivW = width*0.6;
|
|
|
+ $('.page2 .image_div').height(imagedivH);
|
|
|
+ $('.page2 .image_div .item_div').height(imagedivH/3);
|
|
|
+ //$('.page2 .image_div .upload_img_div').width(imagedivW/2);
|
|
|
var str = window.location.search;
|
|
|
let param = {}
|
|
|
str = str.substr(1);
|
|
@@ -552,6 +680,14 @@
|
|
|
this.getupinfo()
|
|
|
this.sethtmlimglist()
|
|
|
this.setimages()
|
|
|
+ this.loadbg=10
|
|
|
+ const bg1url ="/static/image/newyear/bg.png";
|
|
|
+ const bg2url ="/static/image/newyear/bg2.png";
|
|
|
+ this.bgload(bg1url,'.page1')
|
|
|
+ this.bgload(bg2url,'.page2')
|
|
|
+ this.bgload(bg2url,'.page3')
|
|
|
+ const modelbgurl ="/static/image/newyear/model_bg.png";
|
|
|
+ this.bgload(modelbgurl,'.setusernamemodel .ivu-modal-content')
|
|
|
},
|
|
|
distinctArrObj(arr) {
|
|
|
var MyShow=(typeof arr!="object")? [arr] : arr //确保参数总是数组
|
|
@@ -582,13 +718,14 @@
|
|
|
}else{
|
|
|
that.upinfo = res.data;
|
|
|
var wname = that.upinfo.userinfo.wname
|
|
|
- if(null==wname||""==wname){
|
|
|
- that.nothaswname = true;
|
|
|
- }
|
|
|
+
|
|
|
that.up_info = that.upinfo.info;
|
|
|
if(that.showinfo){
|
|
|
that.isnew = false
|
|
|
}else{
|
|
|
+ if(null==wname||""==wname){
|
|
|
+ that.nothaswname = true;
|
|
|
+ }
|
|
|
if(that.upinfo.isnew){
|
|
|
that.isnew = true
|
|
|
}else{
|
|
@@ -638,20 +775,24 @@
|
|
|
});
|
|
|
},
|
|
|
sethtmlimglist(){
|
|
|
+ var that = this
|
|
|
$.each(this.imglist,function(index,term){
|
|
|
const id = index+1;
|
|
|
//"background-position": "center",
|
|
|
- $('.image_div #img'+id).css({'background-image':"url("+term.url+")","background-size":"100% 100%"});
|
|
|
+ that.bgload(term.url,'.image_div #img'+id,id)
|
|
|
+ //$('.image_div #img'+id).css({'background-image':"url("+term.url+")","background-size":"100% 100%"});
|
|
|
});
|
|
|
},
|
|
|
uploadimg(e){
|
|
|
let index = $(e.target).data('index');
|
|
|
console.log(index);
|
|
|
let id = this.imglist[index-1].id;
|
|
|
+
|
|
|
let that = this
|
|
|
myFile = $('#uploadfile');
|
|
|
myFile.click()
|
|
|
myFile.unbind().change(function (e) {
|
|
|
+ that.setimgloading(index,true)
|
|
|
url = "/index.php/index/fileoper/uploadfilebydir";
|
|
|
var formData = new window.FormData()
|
|
|
//formData.append('userid', this.userid);
|
|
@@ -776,12 +917,47 @@
|
|
|
if(200!=res.code){
|
|
|
console.log(res.msg);
|
|
|
}else{
|
|
|
- window.location.href = location.href;
|
|
|
$('html ,body').animate({ scrollTop: -10 }, 500);
|
|
|
+ //alert(location.href+"&showinfo=1");
|
|
|
+ window.location.href = location.href+"&showinfo=1";
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
//保存
|
|
|
+ },
|
|
|
+ bgload(src,objclass,id=0){
|
|
|
+ var bgimg=new Image();
|
|
|
+ bgimg.src=src;
|
|
|
+ var that=this
|
|
|
+ bgimg.onload=function(){
|
|
|
+ $(objclass).css({'background-image':"url("+src+")","background-size":"100% 100%"})
|
|
|
+ that.loaddedbg+=1
|
|
|
+ if(id>0){
|
|
|
+ that.setimgloading(id,false)
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ setimgloading(index,isloading){
|
|
|
+ switch (index) {
|
|
|
+ case 1:
|
|
|
+ this.isloadingimg1=isloading
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ this.isloadingimg2=isloading
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ this.isloadingimg3=isloading
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ this.isloadingimg4=isloading
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ this.isloadingimg5=isloading
|
|
|
+ break;
|
|
|
+ case 6:
|
|
|
+ this.isloadingimg6=isloading
|
|
|
+ break;
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
@@ -796,6 +972,7 @@
|
|
|
alert("活动未开始");
|
|
|
}else{
|
|
|
this.initpage();
|
|
|
+ ///static/image/newyear/model_bg.png
|
|
|
$(window).scroll(function() {
|
|
|
var scrollTop = $(document).scrollTop();
|
|
|
var height = $(document).height();
|