123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
- <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
- <title>title</title>
- <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
- <link rel="stylesheet" href="../../css/common.css"/>
- <link rel="stylesheet" href="../../css/login.css"/>
- <link rel="stylesheet" href="../../css/html.css"/>
- <style>
- body, html {
- background-color: transparent;
- overflow: hidden;
- }
- .zc_btn {
- text-align: center;
- margin-top: 10px;
- color: #374782;
- }
- .zmq-form {
- top: 42%;
- position: absolute;
- box-sizing: border-box;
- width: 90%;
- left: 5%;
- }
- .poster_dom1 {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 8;
- background-color: #000;
- opacity: 0.2;
- }
- .poster_img {
- position: fixed;
- z-index: 10;
- top: 8%;
- height: 80%;
- left: 5%;
- width: 90%;
- }
- .posterImg {
- width: 100%;
- height: 100%;
- }
- .poster-btn {
- position: fixed;
- bottom: 0px;
- width: 90%;
- left: 5%;
- height: 12%;
- justify-content: space-between;
- z-index: 11;
- }
- .poster-btn-item {
- text-align: center;
- }
- .poster-btn-item:first-of-type {
- margin-left: 1rem;
- }
- .poster-btn-item:last-of-type {
- margin-right: 1rem;
- }
- .poster-btn-item img {
- width: 1.5rem;
- height: 1.5rem;
- padding: 5px;
- }
- .poster-btn-item p {
- color: #000000;
- font-size: 0.8rem;
- }
- .poster_close {
- position: absolute;
- width: 1.5rem;
- height: 1.5rem;
- right: 3%;
- top: 7%;
- z-index: 20;
- }
- </style>
- </head>
- <body>
- <div id="app" v-cloak>
- <!--<div v-if="posterSrc == ''">-->
- <!--<div id="login"></div>-->
- <div class="poster_dom" v-show="posterSrc != ''">
- <div class="poster_close" v-on:click="closePoster">
- <img src="../../image/close1.png" class="posterImg" />
- </div>
- <div class="poster_dom1"></div>
- <div class="poster_img">
- <img v-bind:src="posterSrc" class="posterImg" />
- </div>
- <div class="zmq-flex poster-btn">
- <div class="poster-btn-item" v-on:click="shareImg">
- <img src="../../image/criver1.png"/>
- <p>
- 分享到朋友圈
- </p>
- </div>
- <div class="poster-btn-item" v-on:click="saveImg">
- <img src="../../image/down1.png"/>
- <p>
- 保存到本地
- </p>
- </div>
- </div>
- </div>
- <img src="../../image/drawable-xhdpi/bg03.png" v-bind:style="{ height: bodyH + 'px' }" class="loginImg" />
- <div class="poster">
- <form class="zmq-form" action="">
- <div class="userName zmq-input-parent">
- <img src="../../image/drawable-xhdpi/11.png" class="zmq-input-img"/>
- <input class="zmq-input" type="text" name="name" placeholder="门店名称" required v-model = "storeP"/>
- </div>
- <!--<div class="passWord zmq-input-parent-margin zmq-flex zmq-flex-between">
- <img src="../../image/drawable-xhdpi/pass2.png" class="zmq-input-img zmq-input-ru" style="margin-top: 3%"/>
- <input class="zmq-input zmq-margin-auto" type="number" name="phoneCode" placeholder="请输入验证码" required v-model="userPassword" style="width: 45%"/>
- <div class="zmq-text-font-07 zmq-btn-getCode" v-on:click="getCode">获取验证码</div>
- </div>-->
- <div class="passWord zmq-input-parent">
- <img src="../../image/drawable-xhdpi/pass.png" class="zmq-input-img"/>
- <input class="zmq-input" type="text" name="password" placeholder="门店电话" required v-model="storeN" />
- </div>
- <div class="choose_box">
- <!--<a href="javascript:void(0)" class="zmq-text-msg zmq-text-font-09">忘记密码?</a>-->
- </div>
- <div class="zmq-btn zmq-btn-img" v-on:click="poster">
- 生成海报
- </div>
- </form>
- </div>
- </div>
- <!-- <div v-else>
- <img v-bind:src="posterSrc" v-bind:alt="posterSrc" style="width : 100vw;height: 100vh" />
- </div>-->
- </div>
- </body>
- <script type="text/javascript" src="../../script/api.js"></script>
- <script type="text/javascript" src="../../script/vue.js"></script>
- <script type="text/javascript" src="../../script/httpRequest.js"></script>
- <script type="text/javascript" src="../../script/html2canvas.js"></script>
- <script type="text/javascript" src="../../script/vue_plugins.js"></script>
- <script type="text/javascript">
- apiready = function() {
- var p = api.pageParam.p;
- var n = api.pageParam.n;
- new Vue({
- el : '#app',
- data : {
- // 输入的用户名和密码
- userCode : '', // 用户名
- userPassword : '', // 用户密码
- loginUrl : 'loginUrl',
- bodyH : '', // 设置背景图高度
- mobile : '',
- getPhoneCodeUrl : 'getPhoneCode',
- // 店铺名称和手机号
- storeP : p,
- storeN : n,
- // 海报路径
- posterSrc : '',
- // var trans = api.require('trans');
- trans : '' ,
- },
- methods : {
- // 注册成功,跳转登录
- login : function() {
- var _this = this;
- // setTimeout(function() {
- // _this.sendEvent("openFrameGroup", "");
- // }, 500);
- if (this.userCode == "") {
- this.showToast("请输入用户手机号");
- return;
- }
- if (this.userPassword == "") {
- this.showToast("用户密码不能为空");
- return;
- }
- var data = {
- mobile : this.userCode,
- // password : this.userPassword,
- mobileCode : this.userPassword,
- }
- this.$post(this.loginUrl, data, function(ret) {
- if (ret.code == 0 || ret.code == '0') {
- _this.showToast("登录成功");
- // 将loginid 保存到本地
- $api.setStorage("loginid", ret.data.loginId);
- setTimeout(function() {
- _this.sendEvent("openFrameGroup", "");
- }, 500);
- }
- })
- },
- // 分享
- shareImg : function(){
- api.toast({
- msg:'该功能暂未开放'
- });
- },
- // 关闭海报
- closePoster : function() {
- this.posterSrc = "";
- },
- // 保存海报到本地
- saveImg : function() {
- var random = new Date();
- var trans = api.require('trans');
- api.showProgress({
- title : '正在保存中...'
- });
- trans.saveImage({
- base64Str : this.posterSrc.split(',')[1],
- album: true,
- imgPath : "fs://image/",
- imgName : random.getMilliseconds() + ".png"
- }, function(ret, err) {
- api.hideProgress();
- if (ret.status) {
- if(ret.status == true){
- api.toast({
- msg:'保存成功'
- });
- }
- } else {
- api.toast({
- msg:'保存失败'
- });
- }
- });
- },
- // 获取短信验证码
- getCode : function() {
- if (this.userCode == "") {
- this.showToast("请输入用户手机号");
- return;
- }
- var data = {
- mobile : this.userCode
- }
- this.$post(this.getPhoneCodeUrl, data, function(ret) {
- if (ret.code == 0 || ret.code == '0') {
- api.toast({
- msg : '验证码发送成功'
- });
- }
- })
- },
- // 生成海报
- poster : function() {
- var _this = this;
- api.showProgress({
- title : '生成海报中...'
- });
- this.createImg(function(src) {
- api.hideProgress();
- _this.posterSrc = src;
- });
- },
- // 跳转注册页面
- goRegize : function() {
- this.goWin("regize_win", "regize_win.html", "");
- }
- },
- mounted : function() {
- this.trans = api.require('trans');
- }
- })
- };
- </script>
- </html>
|