newyear1.html 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link rel="icon" href="/static/image/logo.png">
  8. <!--<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">-->
  9. <link href="/static/plugs/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
  10. <link href="/static/plugs/vuetify/vuetify.css" rel="stylesheet">
  11. <!-- 引入样式 -->
  12. <link rel="stylesheet" href="/static/plugs/iview/styles/iview.css">
  13. <title>新年拜帖</title>
  14. <style>
  15. [v-cloak] {
  16. display: none !important;
  17. }
  18. body{
  19. color: #000;
  20. }
  21. .page{
  22. background-image: url("/static/image/newyear/bg.png");
  23. background-size: 100% 100%;
  24. }
  25. .page2,.page3{
  26. background-image: url("/static/image/newyear/bg2.png");
  27. background-size: 100% 100%;
  28. }
  29. .page1{
  30. display: flex;
  31. flex-direction:column;
  32. align-items: center;
  33. justify-content: center;
  34. }
  35. .page1 .div1{
  36. /**background-image: url("/static/image/newyear/img1.png");**/
  37. background-size: 100% 100%;
  38. width: 70%;
  39. height: 38%;
  40. margin-top: -15%;
  41. padding: 1em;
  42. }
  43. .page1 .div1 .div1-1,.page1 .div1 .div1-3{
  44. background-image: url("/static/image/newyear/img1_1.png");
  45. height: 10%;
  46. width: 100%;
  47. background-size: 100% 100%;
  48. z-index: 10;
  49. position: relative;
  50. }
  51. .page1 .div1 .div1-3{
  52. margin-top:-5%;
  53. z-index: 10;
  54. }
  55. .page1 .div1 .div1-2{
  56. background-image: url("/static/image/newyear/img1_2.png");
  57. height: 85%;
  58. width: 80%;
  59. background-size: 100% 100%;
  60. margin: 0 auto;
  61. margin-top:-5%;
  62. z-index: 1;
  63. }
  64. .page1 .div1 .msg_div{
  65. padding: 0.7em;
  66. display: flex;
  67. flex-direction:row;
  68. height: 100%;
  69. }
  70. .page1 .div0{
  71. padding-bottom: 3em;
  72. padding-top: -10%;
  73. }
  74. .page1 .div0 .msg1{
  75. width: 100%;
  76. font-size:3em;
  77. color: #f2c21f;
  78. text-align: center;
  79. line-height: 1.5em;
  80. padding-bottom: 0.5em;
  81. }
  82. .page1 .div1 .msg_div .msg2{
  83. height: 100%;
  84. padding: 0.5em;
  85. flex-grow: 1;
  86. text-align: center;
  87. }
  88. .page1 .div1 .msg_div .msg2 img {
  89. width:80%;
  90. height: 100%;
  91. object-fit: contain;
  92. }
  93. .page2 .div{
  94. padding: 2em;
  95. text-align: center;
  96. height: 100%;
  97. }
  98. .page2 .div .update_btn_div{
  99. margin-top: 2em;
  100. }
  101. .page2 .update_btn_div .btn1,.page2 .image_div .btn ,.page3 .div4 .btn{
  102. background:#e79713;
  103. color: #9a021a;
  104. width: 60%;
  105. text-align: center;
  106. border-radius: 5px;
  107. margin: 0 auto;
  108. padding-top: 0.5em;
  109. padding-bottom: 0.5em;
  110. }
  111. .page2 .update_btn_div .btn1{
  112. font-size: 18px;
  113. }
  114. .page2 .input_div textarea{
  115. background:rgba(255, 255, 255, 0.5);
  116. }
  117. .page2 .up_info_div{
  118. text-align: left;
  119. padding-top: 1em;
  120. min-height: 10%;
  121. width: 80%;
  122. margin:0 auto;
  123. font-size: 18px;
  124. word-wrap:break-word;
  125. word-break:normal;
  126. letter-spacing:2px;
  127. color: #e2ae69;
  128. }
  129. .page2 .image_div .upload_img_div{
  130. height: 100%;
  131. position: relative;
  132. }
  133. .page2 .image_div
  134. {
  135. height: 45%;
  136. margin-top: 2em;
  137. }
  138. .page2 .image_div .row{
  139. display: flex;
  140. flex-direction: row;
  141. padding: 0 2.5em;
  142. height: 35%;
  143. }
  144. .page2 .image_div .row div{
  145. flex-grow: 1;
  146. height: 100%;
  147. padding: 0.3em;
  148. }
  149. .page2 .image_div .btn{
  150. font-size: 14px;
  151. height: auto !important;
  152. position: absolute;
  153. bottom: 10%;
  154. width: 70%;
  155. left: 15%;
  156. padding-top: 0.5em;
  157. padding-bottom: 0.5em;
  158. padding-top: 0.3em !important;
  159. padding-bottom: 0.3em !important;
  160. }
  161. #uploadfile{
  162. visibility: hidden;
  163. }
  164. .page3{
  165. padding: 2em;
  166. }
  167. .page3 .div1,.page3 .div3{
  168. padding-top: 1em;
  169. display: flex;
  170. flex-direction: row;
  171. }
  172. .page3 .div1
  173. {
  174. padding-top: 20%;
  175. }
  176. .page3 .div1 .div1-1{
  177. /*flex-grow: 1;*/
  178. width: 40%;
  179. }
  180. .page3 .div1 .div1-2{
  181. width: 60%;
  182. }
  183. .page3 .div3 .div3-1,.page3 .div3 .div3-2{
  184. /*flex-grow: 1;*/
  185. width: 50%;
  186. }
  187. .page3 .div1 .div1-1{
  188. text-align: center;
  189. }
  190. .page3 .div1 .div1-2{
  191. font-weight: bold;
  192. font-size: 20px;
  193. }
  194. .page3 .div2{
  195. padding: 2em;
  196. font-size: 20px;
  197. letter-spacing:2px;
  198. padding-top: 20%;
  199. padding-bottom: 20%;
  200. color: #e79713;
  201. }
  202. .page3 .div3{
  203. padding: 1em;
  204. font-size: 18px;
  205. }
  206. .page3 .div3 .div3-2{
  207. display: flex;
  208. flex-direction: column;
  209. align-items: center;
  210. padding-left: 0.5em;
  211. letter-spacing:2px;
  212. font-size: 18px;
  213. }
  214. .page3 .logo{
  215. width: 40%;
  216. object-fit: contain;
  217. }
  218. .page3 .watch{
  219. width: 80%;
  220. object-fit: contain;
  221. }
  222. .page3 .div4 .btn{
  223. font-size: 20px;
  224. width: 70%;
  225. }
  226. audio{
  227. visibility: hidden;
  228. }
  229. .loading{
  230. display: flex;
  231. flex-direction: row;
  232. align-items: center;
  233. color:#e79713;
  234. background: #9a021a;
  235. }
  236. .loading .content{
  237. margin: 0 auto;
  238. }
  239. .loading .content i{
  240. font-size: 100px;
  241. color:#e79713;
  242. }
  243. .hidden{
  244. visibility: hidden;
  245. height: 0px;
  246. overflow: hidden;
  247. }
  248. .control{
  249. position: fixed;
  250. bottom: 1em;
  251. right: 0.5em;
  252. width: 15%;
  253. height: 5%;
  254. z-index: 10;
  255. }
  256. .control .img{
  257. height: 100%;
  258. width: 100%;
  259. }
  260. .page3 .div2 .div2-mgs{
  261. display: flex;
  262. justify-content:start;
  263. padding-top: 1em;
  264. align-items: center;
  265. }
  266. .page3 .div2 .div2-msg0{
  267. font-size: 1.3em;
  268. }
  269. .page3 .div2 .div2-mgs .item{
  270. /*height: 1.5em;*/
  271. }
  272. .page3 .div2 .div2-mgs .icon{
  273. height: 1.5em;
  274. display: flex;
  275. align-items: center;
  276. }
  277. .page3 .div2 .div2-mgs .item img{
  278. height: 1em;
  279. }
  280. .page3 .div2 .div2-mgs .telno{
  281. height: 1.5em;
  282. line-height: 1.5em;
  283. padding-left: 1em;
  284. font-size: 1.5em;
  285. font-weight: bold;
  286. }
  287. .setusernamemodel .ivu-modal-content{
  288. background-image: url('/static/image/newyear/model_bg.png');
  289. background-size: 100% 100%;
  290. }
  291. .setusernamemodel .ivu-modal-header{
  292. border-bottom:0px !important;
  293. }
  294. .setusernamemodel .ivu-modal-header p{
  295. color:#f2c21f !important;
  296. font-size: 20px;
  297. height: 25px;
  298. }
  299. .setusernamemodel .ivu-modal-footer{
  300. border-top:0px !important;
  301. }
  302. .setusernamemodel .ivu-form .ivu-form-item-label{
  303. color:#f2c21f !important;
  304. }
  305. .setusernamemodel .ivu-input::-webkit-input-placeholder {
  306. color:#f2c21f;
  307. font-size: 16px;
  308. text-align: center;
  309. }
  310. .setusernamemodel .ivu-input::-moz-placeholder {
  311. color:#f2c21f;
  312. font-size: 16px;
  313. text-align: center;
  314. } /* firefox 19+ */
  315. .setusernamemodel .ivu-input::-ms-input-placeholder {
  316. color:#f2c21f;
  317. font-size: 16px;
  318. text-align: center;
  319. } /* ie */
  320. .setusernamemodel .ivu-input::-moz-placeholder {
  321. color:#f2c21f;
  322. font-size: 16px;
  323. text-align: center;
  324. }
  325. .setusernamemodel .ivu-input{
  326. border: 0px;
  327. background-color: transparent;
  328. border-bottom: 1px solid #f2c21f;
  329. border-radius: 0px;
  330. color:#f2c21f;
  331. font-size: 16px;
  332. text-align: center;
  333. }
  334. .setusernamemodel .ivu-input:hover {
  335. border: 0px;
  336. border-bottom: 1px solid #f2c21f;
  337. border-radius: 0px;
  338. }
  339. .setusernamemodel .ivu-input:focus{
  340. -webkit-box-shadow: 0 0 0 0px rgba(45,140,240,.2) !important;
  341. box-shadow: 0 0 0 0px rgba(45,140,240,.2) !important;
  342. border-color: #f2c21f;
  343. }
  344. .setusernamemodel .savebtn{
  345. background-color: #e79713;
  346. color: #9a021a;
  347. font-size: 20px;
  348. padding-top: 0.05em;
  349. padding-bottom: 0.05em;
  350. }
  351. .setusernamemodel .ivu-modal{
  352. width: 70% !important;
  353. margin: 0 auto;
  354. }
  355. .page2 .image_div .item_div{
  356. padding: 10px;
  357. }
  358. .page2 .image_div .item_div .upload_img_div{
  359. margin: 0 auto;
  360. padding: 0px;
  361. }
  362. .page2 .image_div .item_div .upload_img_div .coverdiv{
  363. position: absolute;
  364. width: 100%;
  365. height: 100%;
  366. background: rgba(156,2,26,0.5);
  367. top: 0;
  368. left: 0;
  369. display: flex;
  370. flex-direction: row;
  371. align-items: center;
  372. color:#e79713;
  373. z-index: 7;
  374. }
  375. .page2 .image_div .item_div .upload_img_div .coverdiv i{
  376. font-size: 20px;
  377. color:#e79713;
  378. margin: 0 auto;
  379. }
  380. </style>
  381. </head>
  382. <body>
  383. <div id="app" v-cloak>
  384. <audio src="/static/image/newyear/music1.mp3" loop="loop" preload="auto" id="bg-music">
  385. </audio>
  386. <div v-if="isloading" class="loading">
  387. <div class="content"><v-icon>fa fa-spinner fa-spin</v-icon></div>
  388. </div>
  389. <div :class="{hidden:isloading}">
  390. <div class="control">
  391. <img v-if="!isbottom" src="/static/image/newyear/up.gif" alt="" class="img">
  392. <img v-else src="/static/image/newyear/down.gif" alt="" class="img">
  393. </div>
  394. <div class="page page1">
  395. <div class="div0" v-if="upinfo">
  396. <div class="msg1">
  397. {{upinfo.userinfo.wname}}<br>祝您新年快乐
  398. </div>
  399. </div>
  400. <div class="div1">
  401. <div class="div1-1">
  402. </div>
  403. <div class="div1-2">
  404. <div class="msg_div" >
  405. <div class="msg2">
  406. <img src="/static/image/newyear/img1_3_1.png" alt="">
  407. </div>
  408. </div>
  409. </div>
  410. <div class="div1-3">
  411. </div>
  412. </div>
  413. </div>
  414. <div class="page page2">
  415. <div class="div">
  416. <div class="update_btn_div">
  417. <div v-if="isnew">
  418. <div class="btn1" v-if="!isupdateinfo" @click="updateinfo">
  419. 点&nbsp;击&nbsp;修&nbsp;改&nbsp;文&nbsp;字
  420. </div>
  421. <div class="btn1" v-else @click="saveinfo">
  422. 点&nbsp;击&nbsp;保&nbsp;存&nbsp;文&nbsp;字
  423. </div>
  424. </div>
  425. </div>
  426. <div class="up_info_div">
  427. <div v-if="isupdateinfo && isnew">
  428. <div class="input_div">
  429. <v-textarea name="info" v-model="up_info" rows="3" :value="up_info" :hint="up_info_str"></v-textarea>
  430. </div>
  431. </div>
  432. <div v-else>
  433. <pre>{{ up_info }}</pre>
  434. </div>
  435. </div>
  436. <div class="image_div">
  437. <div id="uploadfile_div">
  438. <input type="file" accept="image/*" id="uploadfile">
  439. </div>
  440. <div class="row row1">
  441. <div class="item_div">
  442. <div class="upload_img_div" id="img1" :style="{ 'background-image': imglist[0] }">
  443. <div class="btn" v-if="isnew" @click="uploadimg" data-index="1">点击上传</div>
  444. <div class="coverdiv" v-if="isloadingimg1">
  445. <v-icon>fa fa-spinner fa-spin</v-icon>
  446. </div>
  447. </div>
  448. </div>
  449. <div class="item_div">
  450. <div class="upload_img_div" id="img2" data-index="2">
  451. <div class="btn" v-if="isnew" @click="uploadimg" data-index="2">点击上传</div>
  452. <div class="coverdiv" v-if="isloadingimg2">
  453. <v-icon>fa fa-spinner fa-spin</v-icon>
  454. </div>
  455. </div>
  456. </div>
  457. </div>
  458. <div class="row row1">
  459. <div class="item_div">
  460. <div class="upload_img_div" id="img3" data-index="3">
  461. <div class="btn" v-if="isnew" @click="uploadimg" data-index="3">点击上传</div>
  462. <div class="coverdiv" v-if="isloadingimg3">
  463. <v-icon>fa fa-spinner fa-spin</v-icon>
  464. </div>
  465. </div>
  466. </div>
  467. <div class="item_div">
  468. <div class="upload_img_div" id="img4" data-index="4">
  469. <div class="btn" v-if="isnew" @click="uploadimg" data-index="4">点击上传</div>
  470. <div class="coverdiv" v-if="isloadingimg4">
  471. <v-icon>fa fa-spinner fa-spin</v-icon>
  472. </div>
  473. </div>
  474. </div>
  475. </div>
  476. <div class="row row1">
  477. <div class="item_div">
  478. <div class="upload_img_div" id="img5" data-index="5">
  479. <div class="btn" v-if="isnew" @click="uploadimg" data-index="5">点击上传</div>
  480. <div class="coverdiv" v-if="isloadingimg5">
  481. <v-icon>fa fa-spinner fa-spin</v-icon>
  482. </div>
  483. </div>
  484. </div>
  485. <div class="item_div">
  486. <div class="upload_img_div" id="img6" data-index="6">
  487. <div class="btn" v-if="isnew" @click="uploadimg" data-index="6">点击上传</div>
  488. <div class="coverdiv" v-if="isloadingimg6">
  489. <v-icon>fa fa-spinner fa-spin</v-icon>
  490. </div>
  491. </div>
  492. </div>
  493. </div>
  494. </div>
  495. </div>
  496. </div>
  497. <div class="page page3">
  498. <div class="div1">
  499. <div class="div1-1">
  500. <img src="/static/image/newyear/logo.png" alt="" class="logo">
  501. </div>
  502. <div class="div1-2" >
  503. <p>水猫工匠平台</p>
  504. <p>专注于招工找活</p>
  505. </div>
  506. </div>
  507. <div class="div2" v-if="upinfo">
  508. <div class="div2-msg0">
  509. <p>{{upinfo.userinfo.wname}}</p>
  510. </div>
  511. <div class="div2-mgs">
  512. <div class="item icon">
  513. <img src="/static/image/newyear/telno.png" alt="">
  514. </div>
  515. <div class="item telno"><p>{{upinfo.userinfo.telno}}</p></div>
  516. </div>
  517. </div>
  518. <div class="div3">
  519. <div class="div3-1">
  520. <img src="/static/image/newyear/watch.png" alt="" class="watch">
  521. </div>
  522. <div class="div3-2">
  523. 扫描二维码登录水猫工匠平台免费制作自己的拜年贴。
  524. </div>
  525. </div>
  526. <div class="div4" v-if="isnew">
  527. <div class="btn" @click="showresult">点&nbsp;击&nbsp;查&nbsp;看&nbsp;制&nbsp;作&nbsp;预&nbsp;览</div>
  528. </div>
  529. </div>
  530. </div>
  531. <Modal v-model="nothaswname" v-if="upinfo" :closable="modelclosable" :mask-closable="modelclosable" class="setusernamemodel">
  532. <p slot="header" style="text-align:center">
  533. <span>请&nbsp;输&nbsp;入&nbsp;您&nbsp;的&nbsp;姓&nbsp;名</span>
  534. </p>
  535. <div style="text-align:center">
  536. <i-input name="wname" v-model="upinfo.userinfo.wname" placeholder="点击输入姓名"></i-input>
  537. </div>
  538. <div slot="footer">
  539. <i-button type="error" size="large" long @click="savewname" class="savebtn">保&nbsp;&nbsp;存</i-button>
  540. </div>
  541. </Modal>
  542. </div>
  543. <script>
  544. var info = {php}echo json_encode($info);{/php};
  545. var sharedata = {php}echo json_encode($sharedata);{/php};
  546. </script>
  547. <script src="/static/plugs/vue/vue.js"></script>
  548. <script src="/static/plugs/iview/iview.min.js"></script>
  549. <script src="/static/plugs/jquery/jquery.js"></script>
  550. <script src="/static/plugs/vuetify/vuetify.js"></script>
  551. <script src="/static/plugs/wechat/jweixin-1.0.0.js"></script>
  552. <!--<script src="/static/plugs/jssha/sha.js"></script>-->
  553. <script src="/static/plugs/js-sha1/sha1.js"></script>
  554. <!--<script src="/static/plugs/wechat/wx_share_config.js"></script>-->
  555. <script>
  556. var url =window.location.href;
  557. var string = "jsapi_ticket=" +sharedata.ticket + "&noncestr=" + sharedata.nonceStr+ "&timestamp=" +sharedata. timestamp + "&url=" + url;
  558. sign = sha1(string)
  559. wx.config({
  560. debug:false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  561. appId:sharedata.appid, // 必填,企业号的唯一标识,此处填写企业号corpid
  562. timestamp:sharedata.timestamp , // 必填,生成签名的时间戳
  563. nonceStr:sharedata.nonceStr, // 必填,生成签名的随机串
  564. signature: sign,// 必填,签名,见附录1
  565. jsApiList:['updateAppMessageShareData','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
  566. });
  567. wx.error(function(res){
  568. // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
  569. //alert(11)
  570. //alert(JSON.stringify(res));
  571. });
  572. var share_info = {
  573. title:info.title,
  574. desc:info.title,
  575. link:url,
  576. imgUrl:info.previewurl
  577. };
  578. //alert(JSON.stringify(share_info));
  579. </script>
  580. <script src="/static/plugs/wechat/wx_share.js"></script>
  581. <script>
  582. var app = new Vue({
  583. el: '#app',
  584. vuetify: new Vuetify(),
  585. data: {
  586. loadbg:0,
  587. loaddedbg:0,
  588. modelclosable:false,
  589. nothaswname:false,
  590. isbottom:false,
  591. loading:true,
  592. isloadingimg1:false,
  593. isloadingimg2:false,
  594. isloadingimg3:false,
  595. isloadingimg4:false,
  596. isloadingimg5:false,
  597. isloadingimg6:false,
  598. imglist : [
  599. {id:0,url:'/static/image/newyear/img2_1.png',isloading:false},
  600. {id:0,url:'/static/image/newyear/img2_2.png',isloading:false},
  601. {id:0,url:'/static/image/newyear/img2_3.png',isloading:false},
  602. {id:0,url:'/static/image/newyear/img2_4.png',isloading:false},
  603. {id:0,url:'/static/image/newyear/img2_5.png',isloading:false},
  604. {id:0,url:'/static/image/newyear/img2_6.png',isloading:false},
  605. ],
  606. up_info_str:'个人简介',
  607. up_info:'',
  608. upinfo:false,
  609. info:info,
  610. isnew:true,
  611. isstart:true,
  612. userid:0,
  613. code:'',
  614. isupdateinfo:false,
  615. },
  616. computed: {
  617. isloading: function () {
  618. if(this.loadbg>0&&this.loaddedbg>0){
  619. if(this.loadbg<=this.loaddedbg){
  620. if(this.loading){
  621. return true
  622. }
  623. if(!this.upinfo){
  624. return true
  625. }
  626. }
  627. }
  628. return false
  629. }
  630. },
  631. methods:{
  632. updateinfo(){
  633. this.isupdateinfo=true
  634. },
  635. saveinfo(){
  636. var that = this;
  637. const url = "/index.php/index/party/saveinfo"
  638. const data ={
  639. 'id':this.upinfo.id,
  640. 'info':this.up_info
  641. }
  642. $.ajax({
  643. type: 'POST',
  644. url: url,
  645. data: data,
  646. dataType: "json",
  647. success: function(res){
  648. res = JSON.parse(res);
  649. if(200!=res.code){
  650. alert(res.msg);
  651. }else{
  652. that.isupdateinfo=false
  653. }
  654. }
  655. });
  656. },
  657. initpage(){
  658. const height = $(window).height();
  659. const imagedivH = height*0.45;
  660. const width = $(window).width();
  661. const imagedivW = width*0.6;
  662. $('.page2 .image_div').height(imagedivH);
  663. $('.page2 .image_div .item_div').height(imagedivH/3);
  664. //$('.page2 .image_div .upload_img_div').width(imagedivW/2);
  665. var str = window.location.search;
  666. let param = {}
  667. str = str.substr(1);
  668. var strarr = str.split("&");
  669. for(var i=0;i<strarr.length;i++){
  670. var arr1 = strarr[i].split("=");
  671. param[arr1[0]] = arr1[1];
  672. }
  673. this.userid = param.userid;
  674. this.code = param.code;
  675. this.showinfo = 1==param.showinfo?true:false;
  676. this.getupinfo()
  677. this.sethtmlimglist()
  678. this.setimages()
  679. this.loadbg=10
  680. const bg1url ="/static/image/newyear/bg.png";
  681. const bg2url ="/static/image/newyear/bg2.png";
  682. this.bgload(bg1url,'.page1')
  683. this.bgload(bg2url,'.page2')
  684. this.bgload(bg2url,'.page3')
  685. const modelbgurl ="/static/image/newyear/model_bg.png";
  686. this.bgload(modelbgurl,'.setusernamemodel .ivu-modal-content')
  687. },
  688. distinctArrObj(arr) {
  689. var MyShow=(typeof arr!="object")? [arr] : arr //确保参数总是数组
  690. for (let i = 0; i < MyShow.length; i++) {
  691. if (MyShow[i] == null || MyShow[i] == "" || JSON.stringify(MyShow[i]) == "{}") {
  692. MyShow.splice(i, 1);
  693. i = i - 1;
  694. }
  695. }
  696. return MyShow;
  697. },
  698. getupinfo(){
  699. const url = "/index.php/index/party/partinparty"
  700. const data ={
  701. 'code':this.code,
  702. 'userid':this.userid
  703. }
  704. var that = this;
  705. $.ajax({
  706. type: 'POST',
  707. url: url,
  708. data: data,
  709. dataType: "json",
  710. success: function(res){
  711. res = JSON.parse(res);
  712. if(200!=res.code){
  713. alert(res.msg);
  714. }else{
  715. that.upinfo = res.data;
  716. var wname = that.upinfo.userinfo.wname
  717. that.up_info = that.upinfo.info;
  718. if(that.showinfo){
  719. that.isnew = false
  720. }else{
  721. if(null==wname||""==wname){
  722. that.nothaswname = true;
  723. }
  724. if(that.upinfo.isnew){
  725. that.isnew = true
  726. }else{
  727. if(0==that.upinfo.isover){
  728. that.isnew = true
  729. }else{
  730. that.isnew = false
  731. }
  732. }
  733. }
  734. //that.isnew =that.upinfo.isnew;
  735. if(that.isnew){
  736. that.isupdateinfo=true
  737. }
  738. share_info.desc=that.upinfo.userinfo.wname+"祝您新年快乐"
  739. }
  740. }
  741. });
  742. },
  743. setimages(){
  744. const url = "/index.php/index/party/getpicture"
  745. const data ={
  746. 'partyid':this.info.id,
  747. 'userid':this.userid
  748. }
  749. var that = this;
  750. $.ajax({
  751. type: 'POST',
  752. url: url,
  753. data: data,
  754. dataType: "json",
  755. success: function(res){
  756. res = JSON.parse(res);
  757. if(200!=res.code){
  758. //alert(res.msg);
  759. }else{
  760. const data = res.data;
  761. const list = data.list;
  762. $.each(list,function(index,term){
  763. that.imglist[term.sort-1].id = term.id
  764. that.imglist[term.sort-1].url = term.pictureurl
  765. });
  766. that.sethtmlimglist();
  767. }
  768. }
  769. });
  770. },
  771. sethtmlimglist(){
  772. var that = this
  773. $.each(this.imglist,function(index,term){
  774. const id = index+1;
  775. //"background-position": "center",
  776. that.bgload(term.url,'.image_div #img'+id,id)
  777. //$('.image_div #img'+id).css({'background-image':"url("+term.url+")","background-size":"100% 100%"});
  778. });
  779. },
  780. uploadimg(e){
  781. let index = $(e.target).data('index');
  782. console.log(index);
  783. let id = this.imglist[index-1].id;
  784. let that = this
  785. myFile = $('#uploadfile');
  786. myFile.click()
  787. myFile.unbind().change(function (e) {
  788. that.setimgloading(index,true)
  789. url = "/index.php/index/fileoper/uploadfilebydir";
  790. var formData = new window.FormData()
  791. //formData.append('userid', this.userid);
  792. //formData.append('partyid', this.partyid);
  793. //formData.append('id', id);
  794. formData.set('dir', "party");
  795. formData.set('file', document.querySelector('input[type=file]').files[0])
  796. var xhr=new XMLHttpRequest();
  797. xhr.open("post",url);
  798. xhr.send(formData);
  799. xhr.onload=function(){
  800. res = JSON.parse(xhr.response);
  801. if(200!=res.code){
  802. alert(res.resultData);
  803. }else{
  804. myFile.val('')
  805. formData.delete('dir')
  806. formData.delete('file')
  807. var pictureurl = res.resultData;
  808. that.imglist[index-1].url = pictureurl;
  809. that.sethtmlimglist()
  810. that.saveimg(index)
  811. }
  812. }
  813. });
  814. },
  815. saveimg(index){
  816. var that = this
  817. let id = this.imglist[index-1].id;
  818. let imgurl = this.imglist[index-1].url;
  819. var imgdata = {
  820. 'id':id,
  821. 'userid':this.userid,
  822. 'partyid':this.info.id,
  823. 'pictureurl':imgurl,
  824. 'sort':index
  825. };
  826. var url = "/index.php/index/party/savepicture"
  827. $.ajax({
  828. type: 'POST',
  829. url: url,
  830. data: imgdata,
  831. dataType: "json",
  832. success: function(res){
  833. res = JSON.parse(res);
  834. if(200!=res.code){
  835. alert(res.msg);
  836. }else{
  837. const data = res.data;
  838. const id = data.id;
  839. that.imglist[index-1].id = id
  840. }
  841. }
  842. });
  843. },
  844. showresult(){
  845. var data={
  846. 'id':this.upinfo.id
  847. }
  848. var url = "/index.php/index/party/setisoverbyid"
  849. $.ajax({
  850. type: 'POST',
  851. url: url,
  852. data: data,
  853. dataType: "json",
  854. success: function(res){
  855. res = JSON.parse(res);
  856. if(200!=res.code){
  857. alert(res.msg);
  858. }else{
  859. window.location.href = location.href;
  860. $('html ,body').animate({ scrollTop: -10 }, 500);
  861. }
  862. }
  863. });
  864. },
  865. audioAutoPlay() {
  866. let that = this
  867. let audio = document.getElementById("bg-music");
  868. if(this.isWeiXin()){
  869. document.addEventListener('WeixinJSBridgeReady', function() {
  870. that.loading=false
  871. audio.play();
  872. $("body").one("touchstart",function() {
  873. audio.play();
  874. });
  875. })
  876. }else{
  877. audio.addEventListener('canplaythrough', function () {
  878. that.loading=false
  879. audio.play();
  880. //取消加载中
  881. }, false);
  882. }
  883. },
  884. isWeiXin(){
  885. //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息,这个属性可以用来判断浏览器类型
  886. var ua = window.navigator.userAgent.toLowerCase();
  887. //alert(JSON.stringify(ua))
  888. //通过正则表达式匹配ua中是否含有MicroMessenger字符串
  889. if(ua.match(/MicroMessenger/i) == 'micromessenger'){
  890. return true;
  891. } else{
  892. return false;
  893. }
  894. },
  895. savewname(){
  896. this.nothaswname=false
  897. let wname = this.upinfo.userinfo.wname;
  898. var data ={
  899. userid: this.upinfo.userinfo.id,
  900. wname: wname,
  901. }
  902. var url = "/index.php/index/user/saveuserwname"
  903. $.ajax({
  904. type: 'POST',
  905. url: url,
  906. data: data,
  907. dataType: "json",
  908. success: function(res){
  909. res = JSON.parse(res);
  910. if(200!=res.code){
  911. console.log(res.msg);
  912. }else{
  913. $('html ,body').animate({ scrollTop: -10 }, 500);
  914. //alert(location.href+"&showinfo=1");
  915. window.location.href = location.href+"&showinfo=1";
  916. }
  917. }
  918. });
  919. //保存
  920. },
  921. bgload(src,objclass,id=0){
  922. var bgimg=new Image();
  923. bgimg.src=src;
  924. var that=this
  925. bgimg.onload=function(){
  926. $(objclass).css({'background-image':"url("+src+")","background-size":"100% 100%"})
  927. that.loaddedbg+=1
  928. if(id>0){
  929. that.setimgloading(id,false)
  930. }
  931. };
  932. },
  933. setimgloading(index,isloading){
  934. switch (index) {
  935. case 1:
  936. this.isloadingimg1=isloading
  937. break;
  938. case 2:
  939. this.isloadingimg2=isloading
  940. break;
  941. case 3:
  942. this.isloadingimg3=isloading
  943. break;
  944. case 4:
  945. this.isloadingimg4=isloading
  946. break;
  947. case 5:
  948. this.isloadingimg5=isloading
  949. break;
  950. case 6:
  951. this.isloadingimg6=isloading
  952. break;
  953. }
  954. }
  955. },
  956. mounted() {
  957. var that = this;
  958. this.audioAutoPlay();
  959. $('#uploadfile').hide()
  960. this.isstart= this.info.isstart;
  961. const height = $(window).height();
  962. $('.page').height(height);
  963. $('.loading').height(height);
  964. if(!this.isstart){
  965. alert("活动未开始");
  966. }else{
  967. this.initpage();
  968. ///static/image/newyear/model_bg.png
  969. $(window).scroll(function() {
  970. var scrollTop = $(document).scrollTop();
  971. var height = $(document).height();
  972. var diff = height-scrollTop;
  973. if(diff<=height*0.5){
  974. that.isbottom=true;
  975. }else{
  976. that.isbottom=false;
  977. }
  978. })
  979. }
  980. }
  981. })
  982. </script>
  983. </body>
  984. </html>