php_group
/
watercat_web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684
							<!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">
    <title>新年拜帖</title>
    <style>
        [v-cloak] {
            display: none !important;
        }
        .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: 50%;
            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;
        }
        .page1 .div1 .msg_div .msg1{
            width: 1em;
            font-size: 0.8em;
        }
        .page1 .div1 .msg_div .msg2{
            height: 100%;
            padding: 0.5em;
            flex-grow: 1;
            text-align: center;
        }
        .page1 .div1 .msg_div .msg2 img {
            width: 70%;
            /*object-fit: contain;*/
        }
        .page2 .div{
            padding: 1em;
            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 .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: 2em;
            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;
        }
        .page3 .div3{
            padding: 2em;
            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;
        }
        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;
        }
    </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="page page1">
                <div class="div1">
                    <div class="div1-1">
                    </div>
                    <div class="div1-2">
                        <div class="msg_div" v-if="upinfo">
                            <div class="msg1">
                                {{upinfo.userinfo.wname}}祝您新年<br/>：
                            </div>
                            <div  class="msg2">
                                <img src="/static/image/newyear/img1_3.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>
                                <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>
                            </div>
                            <div>
                                <div class="upload_img_div"  id="img2" data-index="2">
                                    <div class="btn" v-if="isnew"  @click="uploadimg" data-index="2">点击上传</div> 
                                </div>
                            </div>
                        </div>
                        <div class="row row1">
                            <div>
                                <div class="upload_img_div"  id="img3" data-index="3">
                                    <div class="btn" v-if="isnew"  @click="uploadimg" data-index="3">点击上传</div> 
                                </div>
                            </div>
                            <div>
                                <div class="upload_img_div" id="img4" data-index="4">
                                    <div class="btn" v-if="isnew"  @click="uploadimg" data-index="4">点击上传</div> 
                                </div>
                            </div>
                        </div>
                        <div class="row row1">
                            <div>
                                <div class="upload_img_div" id="img5" data-index="5">
                                    <div class="btn" v-if="isnew"  @click="uploadimg" data-index="5">点击上传</div> 
                                </div>
                            </div>
                            <div>
                                <div class="upload_img_div" id="img6" data-index="6">
                                    <div class="btn" v-if="isnew"  @click="uploadimg" data-index="6">点击上传</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">
                    <!--目前平台免费帮工友和老板朋友进行招工找活服务,注册送、用就送、天天送积分！覆盖天津二十万零散工，
                    欢迎您对平台多提宝贵意见，我们会逐步完善，水猫工匠平台欢迎您的加入。-->
                </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>
    </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/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;
        //alert(url)
        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:['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: {
                loading:true,
                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'},
                ],
                up_info_str:'个人简介',
                up_info:'',
                upinfo:false,
                info:info,
                isnew:true,
                isstart:true,
                userid:0,
                code:'',
                isupdateinfo:false,
            },
            computed: {
                isloading: function () {
                    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(){
                    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()
                },
                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;
                                that.up_info = that.upinfo.info;
                                if(that.showinfo){
                                    that.isnew = false
                                }else{
                                    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(){
                    $.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%"});
                    });
                },
                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) {
                        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;
                    }
                },
            },
            mounted() {
                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();
                } 
            }
        })
    </script>
</body>

</html>