sailun
/
sailun-shop


			
				
					
						
						
							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>