123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="icon" href="/static/image/logo.png">
- <!--<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">-->
- <link href="/static/plugs/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
- <link href="/static/plugs/vuetify/vuetify.css" rel="stylesheet">
- <!-- 引入样式 -->
- <link rel="stylesheet" href="/static/plugs/iview/styles/iview.css">
- <title>新年拜帖</title>
- <style>
- [v-cloak] {
- display: none !important;
- }
- body{
- color: #000;
- }
- .page{
- background-image: url("/static/image/newyear/bg.png");
- background-size: 100% 100%;
- }
- .page2,.page3{
- background-image: url("/static/image/newyear/bg2.png");
- background-size: 100% 100%;
- }
- .page1{
- display: flex;
- flex-direction:column;
- align-items: center;
- justify-content: center;
- }
- .page1 .div1{
- /**background-image: url("/static/image/newyear/img1.png");**/
- background-size: 100% 100%;
- width: 70%;
- height: 38%;
- margin-top: -15%;
- padding: 1em;
- }
- .page1 .div1 .div1-1,.page1 .div1 .div1-3{
- background-image: url("/static/image/newyear/img1_1.png");
- height: 10%;
- width: 100%;
- background-size: 100% 100%;
- z-index: 10;
- position: relative;
- }
- .page1 .div1 .div1-3{
- margin-top:-5%;
- z-index: 10;
- }
- .page1 .div1 .div1-2{
- background-image: url("/static/image/newyear/img1_2.png");
- height: 85%;
- width: 80%;
- background-size: 100% 100%;
- margin: 0 auto;
- margin-top:-5%;
- z-index: 1;
- }
- .page1 .div1 .msg_div{
- padding: 0.7em;
- display: flex;
- flex-direction:row;
- height: 100%;
- }
- .page1 .div0{
- padding-bottom: 3em;
- padding-top: -10%;
- }
- .page1 .div0 .msg1{
- width: 100%;
- font-size:3em;
- color: #f2c21f;
- text-align: center;
- line-height: 1.5em;
- padding-bottom: 0.5em;
- }
- .page1 .div1 .msg_div .msg2{
- height: 100%;
- padding: 0.5em;
- flex-grow: 1;
- text-align: center;
- }
- .page1 .div1 .msg_div .msg2 img {
- width:80%;
- height: 100%;
- object-fit: contain;
- }
- .page2 .div{
- padding: 2em;
- text-align: center;
- height: 100%;
- }
- .page2 .div .update_btn_div{
- margin-top: 2em;
- }
- .page2 .update_btn_div .btn1,.page2 .image_div .btn ,.page3 .div4 .btn{
- background:#e79713;
- color: #9a021a;
- width: 60%;
- text-align: center;
- border-radius: 5px;
- margin: 0 auto;
- 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);
- }
- .page2 .up_info_div{
- text-align: left;
- padding-top: 1em;
- min-height: 10%;
- width: 80%;
- margin:0 auto;
- font-size: 18px;
- word-wrap:break-word;
- word-break:normal;
- letter-spacing:2px;
- color: #e2ae69;
- }
- .page2 .image_div .upload_img_div{
- height: 100%;
- position: relative;
- }
- .page2 .image_div
- {
- height: 45%;
- margin-top: 2em;
- }
- .page2 .image_div .row{
- display: flex;
- flex-direction: row;
- padding: 0 2.5em;
- height: 35%;
- }
- .page2 .image_div .row div{
- flex-grow: 1;
- height: 100%;
- padding: 0.3em;
- }
- .page2 .image_div .btn{
- font-size: 14px;
- height: auto !important;
- position: absolute;
- bottom: 10%;
- width: 70%;
- left: 15%;
- padding-top: 0.5em;
- padding-bottom: 0.5em;
- padding-top: 0.3em !important;
- padding-bottom: 0.3em !important;
- }
- #uploadfile{
- visibility: hidden;
- }
- .page3{
- padding: 2em;
- }
- .page3 .div1,.page3 .div3{
- padding-top: 1em;
- display: flex;
- flex-direction: row;
- }
- .page3 .div1
- {
- padding-top: 20%;
- }
- .page3 .div1 .div1-1{
- /*flex-grow: 1;*/
- width: 40%;
- }
- .page3 .div1 .div1-2{
- width: 60%;
- }
- .page3 .div3 .div3-1,.page3 .div3 .div3-2{
- /*flex-grow: 1;*/
- width: 50%;
- }
- .page3 .div1 .div1-1{
- text-align: center;
- }
- .page3 .div1 .div1-2{
- font-weight: bold;
- font-size: 20px;
- }
- .page3 .div2{
- padding: 2em;
- font-size: 20px;
- letter-spacing:2px;
- padding-top: 20%;
- padding-bottom: 20%;
- color: #e79713;
- }
- .page3 .div3{
- padding: 1em;
- font-size: 18px;
- }
- .page3 .div3 .div3-2{
- display: flex;
- flex-direction: column;
- align-items: center;
- padding-left: 0.5em;
- letter-spacing:2px;
- font-size: 18px;
- }
- .page3 .logo{
- width: 40%;
- object-fit: contain;
- }
- .page3 .watch{
- width: 80%;
- object-fit: contain;
- }
- .page3 .div4 .btn{
- font-size: 20px;
- width: 70%;
- }
- audio{
- visibility: hidden;
- }
- .loading{
- display: flex;
- flex-direction: row;
- align-items: center;
- color:#e79713;
- background: #9a021a;
- }
- .loading .content{
- margin: 0 auto;
- }
- .loading .content i{
- font-size: 100px;
- color:#e79713;
- }
- .hidden{
- visibility: hidden;
- height: 0px;
- overflow: hidden;
- }
- .control{
- position: fixed;
- bottom: 1em;
- right: 0.5em;
- width: 15%;
- height: 5%;
- z-index: 10;
- }
- .control .img{
- height: 100%;
- width: 100%;
- }
- .page3 .div2 .div2-mgs{
- display: flex;
- justify-content:start;
- padding-top: 1em;
- align-items: center;
- }
- .page3 .div2 .div2-msg0{
- font-size: 1.3em;
- }
- .page3 .div2 .div2-mgs .item{
- /*height: 1.5em;*/
- }
- .page3 .div2 .div2-mgs .icon{
- height: 1.5em;
- display: flex;
- align-items: center;
- }
- .page3 .div2 .div2-mgs .item img{
- height: 1em;
- }
- .page3 .div2 .div2-mgs .telno{
- height: 1.5em;
- line-height: 1.5em;
- padding-left: 1em;
- 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>
- <body>
- <div id="app" v-cloak>
- <audio src="/static/image/newyear/music1.mp3" loop="loop" preload="auto" id="bg-music">
- </audio>
- <div v-if="isloading" class="loading">
- <div class="content"><v-icon>fa fa-spinner fa-spin</v-icon></div>
- </div>
- <div :class="{hidden:isloading}">
- <div class="control">
- <img v-if="!isbottom" src="/static/image/newyear/up.gif" alt="" class="img">
- <img v-else src="/static/image/newyear/down.gif" alt="" class="img">
- </div>
- <div class="page page1">
- <div class="div0" v-if="upinfo">
- <div class="msg1">
- {{upinfo.userinfo.wname}}<br>祝您新年快乐
- </div>
- </div>
- <div class="div1">
- <div class="div1-1">
- </div>
- <div class="div1-2">
- <div class="msg_div" >
- <div class="msg2">
- <img src="/static/image/newyear/img1_3_1.png" alt="">
- </div>
- </div>
- </div>
- <div class="div1-3">
- </div>
- </div>
- </div>
- <div class="page page2">
- <div class="div">
- <div class="update_btn_div">
- <div v-if="isnew">
- <div class="btn1" v-if="!isupdateinfo" @click="updateinfo">
- 点 击 修 改 文 字
- </div>
- <div class="btn1" v-else @click="saveinfo">
- 点 击 保 存 文 字
- </div>
- </div>
- </div>
- <div class="up_info_div">
- <div v-if="isupdateinfo && isnew">
- <div class="input_div">
- <v-textarea name="info" v-model="up_info" rows="3" :value="up_info" :hint="up_info_str"></v-textarea>
- </div>
- </div>
- <div v-else>
- <pre>{{ up_info }}</pre>
- </div>
- </div>
- <div class="image_div">
- <div id="uploadfile_div">
- <input type="file" accept="image/*" id="uploadfile">
- </div>
- <div class="row row1">
- <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 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 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 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 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 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>
- </div>
- </div>
- </div>
- <div class="page page3">
- <div class="div1">
- <div class="div1-1">
- <img src="/static/image/newyear/logo.png" alt="" class="logo">
- </div>
- <div class="div1-2" >
- <p>水猫工匠平台</p>
- <p>专注于招工找活</p>
- </div>
- </div>
- <div class="div2" v-if="upinfo">
- <div class="div2-msg0">
- <p>{{upinfo.userinfo.wname}}</p>
- </div>
- <div class="div2-mgs">
- <div class="item icon">
- <img src="/static/image/newyear/telno.png" alt="">
- </div>
- <div class="item telno"><p>{{upinfo.userinfo.telno}}</p></div>
- </div>
- </div>
- <div class="div3">
- <div class="div3-1">
- <img src="/static/image/newyear/watch.png" alt="" class="watch">
- </div>
- <div class="div3-2">
- 扫描二维码登录水猫工匠平台免费制作自己的拜年贴。
- </div>
- </div>
- <div class="div4" v-if="isnew">
- <div class="btn" @click="showresult">点 击 查 看 制 作 预 览</div>
- </div>
- </div>
- </div>
- <Modal v-model="nothaswname" v-if="upinfo" :closable="modelclosable" :mask-closable="modelclosable" class="setusernamemodel">
- <p slot="header" style="text-align:center">
- <span>请 输 入 您 的 姓 名</span>
- </p>
- <div style="text-align:center">
- <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" class="savebtn">保 存</i-button>
- </div>
- </Modal>
- </div>
-
- <script>
- var info = {php}echo json_encode($info);{/php};
- var sharedata = {php}echo json_encode($sharedata);{/php};
- </script>
- <script src="/static/plugs/vue/vue.js"></script>
- <script src="/static/plugs/iview/iview.min.js"></script>
- <script src="/static/plugs/jquery/jquery.js"></script>
- <script src="/static/plugs/vuetify/vuetify.js"></script>
- <script src="/static/plugs/wechat/jweixin-1.0.0.js"></script>
- <!--<script src="/static/plugs/jssha/sha.js"></script>-->
- <script src="/static/plugs/js-sha1/sha1.js"></script>
- <!--<script src="/static/plugs/wechat/wx_share_config.js"></script>-->
- <script>
- var url =window.location.href;
- var string = "jsapi_ticket=" +sharedata.ticket + "&noncestr=" + sharedata.nonceStr+ "×tamp=" +sharedata. timestamp + "&url=" + url;
- sign = sha1(string)
- wx.config({
- debug:false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
- appId:sharedata.appid, // 必填,企业号的唯一标识,此处填写企业号corpid
- timestamp:sharedata.timestamp , // 必填,生成签名的时间戳
- nonceStr:sharedata.nonceStr, // 必填,生成签名的随机串
- signature: sign,// 必填,签名,见附录1
- jsApiList:['updateAppMessageShareData','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
- });
- wx.error(function(res){
- // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
- //alert(11)
- //alert(JSON.stringify(res));
- });
- var share_info = {
- title:info.title,
- desc:info.title,
- link:url,
- imgUrl:info.previewurl
- };
- //alert(JSON.stringify(share_info));
- </script>
- <script src="/static/plugs/wechat/wx_share.js"></script>
- <script>
-
- var app = new Vue({
- 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',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:'',
- upinfo:false,
- info:info,
- isnew:true,
- isstart:true,
- userid:0,
- code:'',
- isupdateinfo:false,
- },
- computed: {
- isloading: function () {
- if(this.loadbg>0&&this.loaddedbg>0){
- if(this.loadbg<=this.loaddedbg){
- if(this.loading){
- return true
- }
- if(!this.upinfo){
- return true
- }
- }
- }
- return false
- }
- },
- methods:{
- updateinfo(){
- this.isupdateinfo=true
- },
- saveinfo(){
- var that = this;
- const url = "/index.php/index/party/saveinfo"
- const data ={
- 'id':this.upinfo.id,
- 'info':this.up_info
- }
- $.ajax({
- type: 'POST',
- url: url,
- data: data,
- dataType: "json",
- success: function(res){
- res = JSON.parse(res);
- if(200!=res.code){
- alert(res.msg);
- }else{
- that.isupdateinfo=false
- }
- }
- });
- },
- 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);
- var strarr = str.split("&");
- for(var i=0;i<strarr.length;i++){
- var arr1 = strarr[i].split("=");
- param[arr1[0]] = arr1[1];
- }
- this.userid = param.userid;
- this.code = param.code;
- this.showinfo = 1==param.showinfo?true:false;
- 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 //确保参数总是数组
- for (let i = 0; i < MyShow.length; i++) {
- if (MyShow[i] == null || MyShow[i] == "" || JSON.stringify(MyShow[i]) == "{}") {
- MyShow.splice(i, 1);
- i = i - 1;
- }
- }
- return MyShow;
- },
- getupinfo(){
- const url = "/index.php/index/party/partinparty"
- const data ={
- 'code':this.code,
- 'userid':this.userid
- }
- var that = this;
- $.ajax({
- type: 'POST',
- url: url,
- data: data,
- dataType: "json",
- success: function(res){
- res = JSON.parse(res);
- if(200!=res.code){
- alert(res.msg);
- }else{
- that.upinfo = res.data;
- var wname = that.upinfo.userinfo.wname
-
- 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{
- if(0==that.upinfo.isover){
- that.isnew = true
- }else{
- that.isnew = false
- }
- }
- }
-
- //that.isnew =that.upinfo.isnew;
- if(that.isnew){
- that.isupdateinfo=true
- }
- share_info.desc=that.upinfo.userinfo.wname+"祝您新年快乐"
- }
- }
- });
- },
- setimages(){
- const url = "/index.php/index/party/getpicture"
- const data ={
- 'partyid':this.info.id,
- 'userid':this.userid
- }
- var that = this;
- $.ajax({
- type: 'POST',
- url: url,
- data: data,
- dataType: "json",
- success: function(res){
- res = JSON.parse(res);
- if(200!=res.code){
- //alert(res.msg);
- }else{
- const data = res.data;
- const list = data.list;
- $.each(list,function(index,term){
- that.imglist[term.sort-1].id = term.id
- that.imglist[term.sort-1].url = term.pictureurl
- });
- that.sethtmlimglist();
- }
- }
- });
- },
- sethtmlimglist(){
- var that = this
- $.each(this.imglist,function(index,term){
- const id = index+1;
- //"background-position": "center",
- 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);
- //formData.append('partyid', this.partyid);
- //formData.append('id', id);
- formData.set('dir', "party");
- formData.set('file', document.querySelector('input[type=file]').files[0])
- var xhr=new XMLHttpRequest();
- xhr.open("post",url);
- xhr.send(formData);
- xhr.onload=function(){
- res = JSON.parse(xhr.response);
- if(200!=res.code){
- alert(res.resultData);
- }else{
- myFile.val('')
- formData.delete('dir')
- formData.delete('file')
- var pictureurl = res.resultData;
- that.imglist[index-1].url = pictureurl;
- that.sethtmlimglist()
- that.saveimg(index)
- }
- }
- });
- },
- saveimg(index){
- var that = this
- let id = this.imglist[index-1].id;
- let imgurl = this.imglist[index-1].url;
- var imgdata = {
- 'id':id,
- 'userid':this.userid,
- 'partyid':this.info.id,
- 'pictureurl':imgurl,
- 'sort':index
- };
- var url = "/index.php/index/party/savepicture"
- $.ajax({
- type: 'POST',
- url: url,
- data: imgdata,
- dataType: "json",
- success: function(res){
- res = JSON.parse(res);
- if(200!=res.code){
- alert(res.msg);
- }else{
- const data = res.data;
- const id = data.id;
- that.imglist[index-1].id = id
- }
- }
- });
- },
- showresult(){
- var data={
- 'id':this.upinfo.id
- }
- var url = "/index.php/index/party/setisoverbyid"
- $.ajax({
- type: 'POST',
- url: url,
- data: data,
- dataType: "json",
- success: function(res){
- res = JSON.parse(res);
- if(200!=res.code){
- alert(res.msg);
- }else{
- window.location.href = location.href;
- $('html ,body').animate({ scrollTop: -10 }, 500);
- }
- }
- });
- },
- audioAutoPlay() {
- let that = this
- let audio = document.getElementById("bg-music");
- if(this.isWeiXin()){
- document.addEventListener('WeixinJSBridgeReady', function() {
- that.loading=false
- audio.play();
- $("body").one("touchstart",function() {
- audio.play();
- });
- })
- }else{
- audio.addEventListener('canplaythrough', function () {
- that.loading=false
- audio.play();
- //取消加载中
- }, false);
- }
- },
- isWeiXin(){
- //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息,这个属性可以用来判断浏览器类型
- var ua = window.navigator.userAgent.toLowerCase();
- //alert(JSON.stringify(ua))
- //通过正则表达式匹配ua中是否含有MicroMessenger字符串
- if(ua.match(/MicroMessenger/i) == 'micromessenger'){
- return true;
- } else{
- return false;
- }
- },
- savewname(){
- this.nothaswname=false
- let wname = this.upinfo.userinfo.wname;
- var data ={
- userid: this.upinfo.userinfo.id,
- wname: wname,
- }
- var url = "/index.php/index/user/saveuserwname"
- $.ajax({
- type: 'POST',
- url: url,
- data: data,
- dataType: "json",
- success: function(res){
- res = JSON.parse(res);
- if(200!=res.code){
- console.log(res.msg);
- }else{
- $('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() {
- var that = this;
- this.audioAutoPlay();
- $('#uploadfile').hide()
- this.isstart= this.info.isstart;
- const height = $(window).height();
- $('.page').height(height);
- $('.loading').height(height);
- if(!this.isstart){
- alert("活动未开始");
- }else{
- this.initpage();
- ///static/image/newyear/model_bg.png
- $(window).scroll(function() {
- var scrollTop = $(document).scrollTop();
- var height = $(document).height();
- var diff = height-scrollTop;
- if(diff<=height*0.5){
- that.isbottom=true;
- }else{
- that.isbottom=false;
- }
- })
- }
- }
- })
- </script>
- </body>
- </html>
|