php_group
/
watercat_web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074
							<!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"> 
                                点&nbsp;击&nbsp;修&nbsp;改&nbsp;文&nbsp;字
                            </div>
                            <div class="btn1"  v-else @click="saveinfo"> 
                                点&nbsp;击&nbsp;保&nbsp;存&nbsp;文&nbsp;字
                            </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">点&nbsp;击&nbsp;查&nbsp;看&nbsp;制&nbsp;作&nbsp;预&nbsp;览</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>请&nbsp;输&nbsp;入&nbsp;您&nbsp;的&nbsp;姓&nbsp;名</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">保&nbsp;&nbsp;存</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+ "&timestamp=" +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%"});
                        that.setimgloading(id,false)
                    });
                },
                uploadimg(e){
                    let index = $(e.target).data('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.set('dir', "party"); 
                        var file = document.querySelector('input[type=file]').files[0];
                        if (file.size > 1024 * 1024 * 1){
                            // 图片大于1M进行压缩
                            that.canvasDataURL(file, function (blob) {
                                console.log(blob);
                                var newFile = new File([blob], file.name, {
                                    type: file.type
                                    }
                                )
                                var isLt1M;
                                if (file.size < newFile.size) {
                                    isLt1M = file.size
                                } else {
                                    isLt1M = newFile.size
                                }
                                console.log(file.size)
                                console.log(newFile.size)
                                if (isLt1M / 1024 / 1024 > 1) {
                                    alert('图片压缩之后还是大于1M，请压缩之后上传！');
                                    that.setimgloading(index,false);
                                    return false;
                                }
                                file = newFile
                                that.douploadimg(file,index,myFile)
                            })
                        }else{
                            that.douploadimg(file,index,myFile)
                        }
                        /*formData.set('file', file)
                        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.msg);
                                that.setimgloading(index,false)
                            }else{
                                myFile.val('')
                                formData.delete('dir')
                                formData.delete('file')
                                var pictureurl =  res.resultData;
                                that.imglist[index-1].url = pictureurl;
                                that.saveimg(index)  
                                that.sethtmlimglist()
                            }
                        }*/
                    });
                },
                douploadimg(file,index,myFile){
                    let that = this
                    url = "/index.php/index/fileoper/uploadfilebydir";
                    var formData = new window.FormData()
                    formData.set('dir', "party"); 
                    formData.set('file', file)
                    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.msg);
                            that.setimgloading(index,false)
                        }else{
                            myFile.val('')
                            formData.delete('dir')
                            formData.delete('file')
                            var pictureurl =  res.resultData;
                            that.imglist[index-1].url = pictureurl;
                            that.saveimg(index)  
                            that.sethtmlimglist()
                        }
                    }
                },
                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){
                                alert(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;
                    }
                },
                canvasDataURL(file, callback) {
                    var that=this
                    var reader = new FileReader()
                    reader.readAsDataURL(file)
                    reader.onload = function (e) {
                        const img = new Image()
                        const quality = 0.1 // 图像质量
                        const canvas = document.createElement('canvas')
                        const drawer = canvas.getContext('2d')
                        img.src = this.result
                        img.onload = function () {
                        canvas.width = img.width
                        canvas.height = img.height
                        drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
                        // convertBase64UrlToBlob(canvas.toDataURL(file.type, quality), callback);
                        var blob =that.convertBase64UrlToBlob(canvas.toDataURL("image/jpeg", quality) );
                        callback(blob)
                        }
                    }
                },
                convertBase64UrlToBlob(urlData) {
                    var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
                    //处理异常,将ascii码小于0的转换为大于0
                    var ab = new ArrayBuffer(bytes.length);
                    var ia = new Uint8Array(ab);
                    for (var i = 0; i < bytes.length; i++) {
                        ia[i] = bytes.charCodeAt(i);
                    }
                    return new Blob([ab], {
                        type: 'image/jpg'
                    });
                }
            },
            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>