poster_body.html 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title>title</title>
  8. <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
  9. <link rel="stylesheet" href="../../css/common.css"/>
  10. <link rel="stylesheet" href="../../css/login.css"/>
  11. <link rel="stylesheet" href="../../css/html.css"/>
  12. <style>
  13. body, html {
  14. background-color: transparent;
  15. overflow: hidden;
  16. }
  17. .zc_btn {
  18. text-align: center;
  19. margin-top: 10px;
  20. color: #374782;
  21. }
  22. .zmq-form {
  23. top: 42%;
  24. position: absolute;
  25. box-sizing: border-box;
  26. width: 90%;
  27. left: 5%;
  28. }
  29. .poster_dom1 {
  30. position: fixed;
  31. top: 0;
  32. left: 0;
  33. width: 100%;
  34. height: 100%;
  35. z-index: 8;
  36. background-color: #000;
  37. opacity: 0.2;
  38. }
  39. .poster_img {
  40. position: fixed;
  41. z-index: 10;
  42. top: 8%;
  43. height: 80%;
  44. left: 5%;
  45. width: 90%;
  46. }
  47. .posterImg {
  48. width: 100%;
  49. height: 100%;
  50. }
  51. .poster-btn {
  52. position: fixed;
  53. bottom: 0px;
  54. width: 90%;
  55. left: 5%;
  56. height: 12%;
  57. justify-content: space-between;
  58. z-index: 11;
  59. }
  60. .poster-btn-item {
  61. text-align: center;
  62. }
  63. .poster-btn-item:first-of-type {
  64. margin-left: 1rem;
  65. }
  66. .poster-btn-item:last-of-type {
  67. margin-right: 1rem;
  68. }
  69. .poster-btn-item img {
  70. width: 1.5rem;
  71. height: 1.5rem;
  72. padding: 5px;
  73. }
  74. .poster-btn-item p {
  75. color: #000000;
  76. font-size: 0.8rem;
  77. }
  78. .poster_close {
  79. position: absolute;
  80. width: 1.5rem;
  81. height: 1.5rem;
  82. right: 3%;
  83. top: 7%;
  84. z-index: 20;
  85. }
  86. </style>
  87. </head>
  88. <body>
  89. <div id="app" v-cloak>
  90. <!--<div v-if="posterSrc == ''">-->
  91. <!--<div id="login"></div>-->
  92. <div class="poster_dom" v-show="posterSrc != ''">
  93. <div class="poster_close" v-on:click="closePoster">
  94. <img src="../../image/close1.png" class="posterImg" />
  95. </div>
  96. <div class="poster_dom1"></div>
  97. <div class="poster_img">
  98. <img v-bind:src="posterSrc" class="posterImg" />
  99. </div>
  100. <div class="zmq-flex poster-btn">
  101. <div class="poster-btn-item" v-on:click="shareImg">
  102. <img src="../../image/criver1.png"/>
  103. <p>
  104. 分享到朋友圈
  105. </p>
  106. </div>
  107. <div class="poster-btn-item" v-on:click="saveImg">
  108. <img src="../../image/down1.png"/>
  109. <p>
  110. 保存到本地
  111. </p>
  112. </div>
  113. </div>
  114. </div>
  115. <img src="../../image/drawable-xhdpi/bg03.png" v-bind:style="{ height: bodyH + 'px' }" class="loginImg" />
  116. <div class="poster">
  117. <form class="zmq-form" action="">
  118. <div class="userName zmq-input-parent">
  119. <img src="../../image/drawable-xhdpi/11.png" class="zmq-input-img"/>
  120. <input class="zmq-input" type="text" name="name" placeholder="门店名称" required v-model = "storeP"/>
  121. </div>
  122. <!--<div class="passWord zmq-input-parent-margin zmq-flex zmq-flex-between">
  123. <img src="../../image/drawable-xhdpi/pass2.png" class="zmq-input-img zmq-input-ru" style="margin-top: 3%"/>
  124. <input class="zmq-input zmq-margin-auto" type="number" name="phoneCode" placeholder="请输入验证码" required v-model="userPassword" style="width: 45%"/>
  125. <div class="zmq-text-font-07 zmq-btn-getCode" v-on:click="getCode">获取验证码</div>
  126. </div>-->
  127. <div class="passWord zmq-input-parent">
  128. <img src="../../image/drawable-xhdpi/pass.png" class="zmq-input-img"/>
  129. <input class="zmq-input" type="text" name="password" placeholder="门店电话" required v-model="storeN" />
  130. </div>
  131. <div class="choose_box">
  132. <!--<a href="javascript:void(0)" class="zmq-text-msg zmq-text-font-09">忘记密码?</a>-->
  133. </div>
  134. <div class="zmq-btn zmq-btn-img" v-on:click="poster">
  135. 生成海报
  136. </div>
  137. </form>
  138. </div>
  139. </div>
  140. <!-- <div v-else>
  141. <img v-bind:src="posterSrc" v-bind:alt="posterSrc" style="width : 100vw;height: 100vh" />
  142. </div>-->
  143. </div>
  144. </body>
  145. <script type="text/javascript" src="../../script/api.js"></script>
  146. <script type="text/javascript" src="../../script/vue.js"></script>
  147. <script type="text/javascript" src="../../script/httpRequest.js"></script>
  148. <script type="text/javascript" src="../../script/html2canvas.js"></script>
  149. <script type="text/javascript" src="../../script/vue_plugins.js"></script>
  150. <script type="text/javascript">
  151. apiready = function() {
  152. var p = api.pageParam.p;
  153. var n = api.pageParam.n;
  154. new Vue({
  155. el : '#app',
  156. data : {
  157. // 输入的用户名和密码
  158. userCode : '', // 用户名
  159. userPassword : '', // 用户密码
  160. loginUrl : 'loginUrl',
  161. bodyH : '', // 设置背景图高度
  162. mobile : '',
  163. getPhoneCodeUrl : 'getPhoneCode',
  164. // 店铺名称和手机号
  165. storeP : p,
  166. storeN : n,
  167. // 海报路径
  168. posterSrc : '',
  169. // var trans = api.require('trans');
  170. trans : '' ,
  171. },
  172. methods : {
  173. // 注册成功,跳转登录
  174. login : function() {
  175. var _this = this;
  176. // setTimeout(function() {
  177. // _this.sendEvent("openFrameGroup", "");
  178. // }, 500);
  179. if (this.userCode == "") {
  180. this.showToast("请输入用户手机号");
  181. return;
  182. }
  183. if (this.userPassword == "") {
  184. this.showToast("用户密码不能为空");
  185. return;
  186. }
  187. var data = {
  188. mobile : this.userCode,
  189. // password : this.userPassword,
  190. mobileCode : this.userPassword,
  191. }
  192. this.$post(this.loginUrl, data, function(ret) {
  193. if (ret.code == 0 || ret.code == '0') {
  194. _this.showToast("登录成功");
  195. // 将loginid 保存到本地
  196. $api.setStorage("loginid", ret.data.loginId);
  197. setTimeout(function() {
  198. _this.sendEvent("openFrameGroup", "");
  199. }, 500);
  200. }
  201. })
  202. },
  203. // 分享
  204. shareImg : function(){
  205. api.toast({
  206. msg:'该功能暂未开放'
  207. });
  208. },
  209. // 关闭海报
  210. closePoster : function() {
  211. this.posterSrc = "";
  212. },
  213. // 保存海报到本地
  214. saveImg : function() {
  215. var random = new Date();
  216. var trans = api.require('trans');
  217. api.showProgress({
  218. title : '正在保存中...'
  219. });
  220. trans.saveImage({
  221. base64Str : this.posterSrc.split(',')[1],
  222. album: true,
  223. imgPath : "fs://image/",
  224. imgName : random.getMilliseconds() + ".png"
  225. }, function(ret, err) {
  226. api.hideProgress();
  227. if (ret.status) {
  228. if(ret.status == true){
  229. api.toast({
  230. msg:'保存成功'
  231. });
  232. }
  233. } else {
  234. api.toast({
  235. msg:'保存失败'
  236. });
  237. }
  238. });
  239. },
  240. // 获取短信验证码
  241. getCode : function() {
  242. if (this.userCode == "") {
  243. this.showToast("请输入用户手机号");
  244. return;
  245. }
  246. var data = {
  247. mobile : this.userCode
  248. }
  249. this.$post(this.getPhoneCodeUrl, data, function(ret) {
  250. if (ret.code == 0 || ret.code == '0') {
  251. api.toast({
  252. msg : '验证码发送成功'
  253. });
  254. }
  255. })
  256. },
  257. // 生成海报
  258. poster : function() {
  259. var _this = this;
  260. api.showProgress({
  261. title : '生成海报中...'
  262. });
  263. this.createImg(function(src) {
  264. api.hideProgress();
  265. _this.posterSrc = src;
  266. });
  267. },
  268. // 跳转注册页面
  269. goRegize : function() {
  270. this.goWin("regize_win", "regize_win.html", "");
  271. }
  272. },
  273. mounted : function() {
  274. this.trans = api.require('trans');
  275. }
  276. })
  277. };
  278. </script>
  279. </html>