heyang 3 years ago
parent
commit
578c6b3fd0
26 changed files with 515 additions and 0 deletions
  1. 320 0
      microserviceUserH5/static/css/changePhoneActivity.css
  2. BIN
      microserviceUserH5/static/img/changePhoneActivity/activity-bg.png
  3. BIN
      microserviceUserH5/static/img/changePhoneActivity/activity-rule-btn.png
  4. BIN
      microserviceUserH5/static/img/changePhoneActivity/activity-rule-text.png
  5. BIN
      microserviceUserH5/static/img/changePhoneActivity/bg.png
  6. BIN
      microserviceUserH5/static/img/changePhoneActivity/entry-QQ-btn.png
  7. BIN
      microserviceUserH5/static/img/changePhoneActivity/entry-QQ-text.png
  8. BIN
      microserviceUserH5/static/img/changePhoneActivity/footer_bg_img.png
  9. BIN
      microserviceUserH5/static/img/changePhoneActivity/icon-down-first.png
  10. BIN
      microserviceUserH5/static/img/changePhoneActivity/icon-down-second.png
  11. BIN
      microserviceUserH5/static/img/changePhoneActivity/icon-down.png
  12. BIN
      microserviceUserH5/static/img/changePhoneActivity/login-bg.png
  13. BIN
      microserviceUserH5/static/img/changePhoneActivity/login-btn-text.png
  14. BIN
      microserviceUserH5/static/img/changePhoneActivity/login-btn.png
  15. BIN
      microserviceUserH5/static/img/changePhoneActivity/logo.png
  16. BIN
      microserviceUserH5/static/img/changePhoneActivity/middle_bg_img.png
  17. BIN
      microserviceUserH5/static/img/changePhoneActivity/rule-text.png
  18. BIN
      microserviceUserH5/static/img/changePhoneActivity/rule1.png
  19. BIN
      microserviceUserH5/static/img/changePhoneActivity/rule2.png
  20. BIN
      microserviceUserH5/static/img/changePhoneActivity/rule3.png
  21. BIN
      microserviceUserH5/static/img/changePhoneActivity/rule4.png
  22. BIN
      microserviceUserH5/static/img/changePhoneActivity/selected.png
  23. BIN
      microserviceUserH5/static/img/changePhoneActivity/share.png
  24. BIN
      microserviceUserH5/static/img/changePhoneActivity/theme.png
  25. BIN
      microserviceUserH5/static/img/changePhoneActivity/time.png
  26. 195 0
      microserviceUserH5/vcloud/changePhoneActivity.html

+ 320 - 0
microserviceUserH5/static/css/changePhoneActivity.css

@@ -0,0 +1,320 @@
+@media screen and (max-width: 750px) {
+  html {
+    font-size: calc(100vw / 7.5);
+  }
+}
+
+@media screen and (min-width: 750px) {
+  html {
+    font-size: calc(450px / 7.5);
+  }
+}
+
+html, body, div, ul, li, p {
+  padding: 0;
+  margin: 0;
+}
+
+ul, li {
+  list-style: none;
+}
+
+.header{
+  width: 7.5rem;
+  height: 13.34rem;
+  position: relative;
+}
+.bg_img{
+  width: 100%;
+  height: 100%;
+}
+.share{
+  width: 0.88rem;
+  height: 0.45rem;
+  position: absolute;
+  top: 0.7rem;
+  right: 0;
+}
+.logo{
+  width: 2.36rem;
+  height: 0.73rem;
+  position: absolute;
+  top: 1.44rem;
+  left: 2.52rem;
+}
+.theme{
+  width: 5.43rem;
+  height: 2.44rem;
+  position: absolute;
+  top: 2.5rem;
+  left: 1.11rem;
+}
+.activity-bg{
+  width: 4.91rem;
+  height: 0.98rem;
+  position: absolute;
+  top: 5.08rem;
+  left: 1.28rem;
+}
+.time{
+  width: 4.25rem;
+  height: 0.63rem;
+  position: absolute;
+  top: 5.21rem;
+  left: 1.62rem;
+}
+.login-container{
+  width: 6.44rem;
+  height: 5.88rem;
+  position: absolute;
+  top: 6.26rem;
+  left: 0.65rem;
+}
+.login-bg{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.login-row-select{
+  width: 5.04rem;
+  height: 0.72rem;
+  position: absolute;
+  top: 1.14rem;
+  left: 0.63rem;
+  background-color: #FFFFFF;
+  border-radius: 5px;
+}
+.options{
+  width: 2.92rem;
+  height: 1.2rem;
+  position: absolute;
+  top: 1.24rem;
+  left: 1.73rem;
+  display: none;
+}
+.show{
+  display: block;
+}
+.first{
+  width: 2.92rem;
+  height: 0.57rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.second{
+  width: 2.92rem;
+  height: 0.57rem;
+  position: absolute;
+  top: 0.71rem;
+  left: 0;
+  z-index: 99;
+}
+.first-text{
+  font-size: 14px;
+  color: #FFFFFF;
+  position: absolute;
+  top: 0.1rem;
+  left: 0.84rem;
+}
+.second-text{
+  font-size: 14px;
+  color: #FFFFFF;
+  position: absolute;
+  top: 0.81rem;
+  left: 0.84rem;
+  z-index: 999;
+}
+.login-row-account{
+  width: 5.04rem;
+  height: 0.72rem;
+  position: absolute;
+  top: 2.1rem;
+  left: 0.63rem;
+  background-color: #FFFFFF;
+  border-radius: 5px;
+}
+.login-row-password{
+  width: 5.04rem;
+  height: 0.72rem;
+  position: absolute;
+  top: 3.06rem;
+  left: 0.63rem;
+  background-color: #FFFFFF;
+  border-radius: 5px;
+}
+.login-row-title{
+  position: absolute;
+  top: 0.14rem;
+  left: 0.14rem;
+  font-size: 16px;
+}
+.login-row-plc{
+  position: absolute;
+  top: 0.1rem;
+  left: 1.14rem;
+  font-size: 16px;
+}
+.login-row-ipt{
+  border: none;
+  outline: none;
+  position: absolute;
+  top: 0.2rem;
+  left: 1.2rem;
+}
+.icon-down-img{
+  width: 0.32rem;
+  height: 0.18rem;
+  position: absolute;
+  top: 0.26rem;
+  right: 0.2rem;
+}
+.login-btn{
+  width: 2.75rem;
+  height: 0.75rem;
+  position: absolute;
+  bottom: 0.22rem;
+  left: 1.76rem;
+}
+.login-btn-text{
+  width: 1.81rem;
+  height: 0.48rem;
+  position: absolute;
+  bottom: 0.39rem;
+  left: 2.21rem;
+}
+.read-rule{
+  position: absolute;
+  top: 11.58rem;
+  left: 2.02rem;
+}
+.selected{
+  width: 0.2rem;
+  height: 0.2rem;
+}
+.rule-text{
+  width: 3.11rem;
+  height: 0.23rem;
+}
+.entry-QQ{
+  width: 4.37rem;
+  height: 0.74rem;
+  position: absolute;
+  bottom: -0.3rem;
+  left: 1.59rem;
+  z-index: 99;
+}
+.entry-QQ-btn{
+  width: 4.37rem;
+  height: 0.74rem;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+.entry-QQ-text{
+  width: 3.46rem;
+  height: 0.38rem;
+  position: absolute;
+  top: 0.14rem;
+  left: 0.42rem;
+}
+.middle{
+  width: 7.5rem;
+  height: 13.34rem;
+  position: relative;
+}
+.middle_bg_img{
+  width: 100%;
+  height: 100%;
+}
+.activity-rule{
+  width: 5.36rem;
+  height: 0.97rem;
+  position: absolute;
+  top: 0.42rem;
+  left: 1.07rem;
+}
+.activity-rule-btn{
+  width: 5.36rem;
+  height: 0.97rem;
+  position: absolute;
+  top: 0.04rem;
+  left: 0;
+}
+.activity-rule-text{
+  width: 1.56rem;
+  height: 0.37rem;
+  position: absolute;
+  top: 0.3rem;
+  left: 1.9rem;
+}
+.rule1{
+  width: 6.2rem;
+  height: 3.98rem;
+  position: absolute;
+  top: 1.75rem;
+  left: 0.65rem;
+}
+.rule2{
+  width: 6.2rem;
+  height: 4.7rem;
+  position: absolute;
+  top: 6.14rem;
+  left: 0.65rem;
+}
+.rule3{
+  width: 6.2rem;
+  height: 3.13rem;
+  position: absolute;
+  top: 11.24rem;
+  left: 0.65rem;
+  z-index: 999;
+}
+.footer{
+  width: 7.5rem;
+  height: 9.83rem;
+  position: relative;
+}
+.footer_bg_img{
+  width: 100%;
+  height: 100%;
+}
+.rule4{
+  width: 6.2rem;
+  height: 6.68rem;
+  position: absolute;
+  top: 1.75rem;
+  left: 0.65rem;
+}
+
+#toast-container>.toast-error {
+  background-image: none !important;
+}
+
+.toast-error {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+#toast-container>div {
+  font-size: 14px;
+  min-width: 80px !important;
+  padding: 12px !important;
+  box-shadow: none;
+}
+
+.toast-center-center {
+  min-width: 100px;
+  top: 50%;
+  left: 50%;
+  text-align: center;
+  transform: translateX(-50%);
+}
+
+@media (max-width: 480px) and (min-width: 241px) {
+  #toast-container>div {
+    min-width: 80px !important;
+    width: auto;
+  }
+}

BIN
microserviceUserH5/static/img/changePhoneActivity/activity-bg.png


BIN
microserviceUserH5/static/img/changePhoneActivity/activity-rule-btn.png


BIN
microserviceUserH5/static/img/changePhoneActivity/activity-rule-text.png


BIN
microserviceUserH5/static/img/changePhoneActivity/bg.png


BIN
microserviceUserH5/static/img/changePhoneActivity/entry-QQ-btn.png


BIN
microserviceUserH5/static/img/changePhoneActivity/entry-QQ-text.png


BIN
microserviceUserH5/static/img/changePhoneActivity/footer_bg_img.png


BIN
microserviceUserH5/static/img/changePhoneActivity/icon-down-first.png


BIN
microserviceUserH5/static/img/changePhoneActivity/icon-down-second.png


BIN
microserviceUserH5/static/img/changePhoneActivity/icon-down.png


BIN
microserviceUserH5/static/img/changePhoneActivity/login-bg.png


BIN
microserviceUserH5/static/img/changePhoneActivity/login-btn-text.png


BIN
microserviceUserH5/static/img/changePhoneActivity/login-btn.png


BIN
microserviceUserH5/static/img/changePhoneActivity/logo.png


BIN
microserviceUserH5/static/img/changePhoneActivity/middle_bg_img.png


BIN
microserviceUserH5/static/img/changePhoneActivity/rule-text.png


BIN
microserviceUserH5/static/img/changePhoneActivity/rule1.png


BIN
microserviceUserH5/static/img/changePhoneActivity/rule2.png


BIN
microserviceUserH5/static/img/changePhoneActivity/rule3.png


BIN
microserviceUserH5/static/img/changePhoneActivity/rule4.png


BIN
microserviceUserH5/static/img/changePhoneActivity/selected.png


BIN
microserviceUserH5/static/img/changePhoneActivity/share.png


BIN
microserviceUserH5/static/img/changePhoneActivity/theme.png


BIN
microserviceUserH5/static/img/changePhoneActivity/time.png


+ 195 - 0
microserviceUserH5/vcloud/changePhoneActivity.html

@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+	<title>下载APP</title>
+	<link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
+	<link rel="stylesheet" href="../static/js/vender/toastr/toastr.min.css">
+	<link rel="stylesheet" href="../static/css/changePhoneActivity.css">
+	<script src="../static/js/vender/jquery-3.4.1.min.js"></script>
+	<script src="../static/js/vender/toastr/toastr.min.js"></script>
+	<script src="../static/js/vender/config.js"></script>
+</head>
+
+<body>
+	<div class="container">
+		<div class="header">
+			<img class="bg_img" src="../static/img/changePhoneActivity/bg.png" />
+			<img class="share" src="../static/img/changePhoneActivity/share.png" />
+			<img class="logo" src="../static/img/changePhoneActivity/logo.png" />
+			<img class="theme" src="../static/img/changePhoneActivity/theme.png" />
+			<img class="activity-bg" src="../static/img/changePhoneActivity/activity-bg.png" />
+			<img class="time" src="../static/img/changePhoneActivity/time.png" />
+			<div class="login-container">
+			   <img class="login-bg" src="../static/img/changePhoneActivity/login-bg.png" />
+			   <div class="login-row-select">
+				   <div class="login-row-title">选择:</div>
+					<input class="login-row-ipt" id="select" placeholder="请选择兑换时常的平台" disabled="true" />
+				   <img class="icon-down-img" src="../static/img/changePhoneActivity/icon-down.png" />
+			   </div>
+			   <div class="options">
+				   <div class="icon-down-first">
+					   <img class="first" src="../static/img/changePhoneActivity/icon-down-first.png" />
+					   <span class="first-text">多多云</span>
+				   </div>
+				   <div class="icon-down-second">
+					<img class="second" src="../static/img/changePhoneActivity/icon-down-second.png" />
+					<span class="second-text">红手指</span>
+				</div>
+			   </div>
+			   <div class="login-row-account">
+					<div class="login-row-title">账号:</div>
+					<input class="login-row-ipt" id="account" placeholder="请输入兑换时常的账号" />
+				</div>
+				<div class="login-row-password">
+					<div class="login-row-title">密码:</div>
+					<input class="login-row-ipt" id="password" placeholder="请输入兑换时常的密码" />
+				</div>
+				<img class="login-btn" src="../static/img/changePhoneActivity/login-btn.png" />
+				<img class="login-btn-text" src="../static/img/changePhoneActivity/login-btn-text.png" />
+			</div>
+			<div class="read-rule">
+				<img class="selected" src="../static/img/changePhoneActivity/selected.png" />
+				<img class="rule-text" src="../static/img/changePhoneActivity/rule-text.png" />
+			</div>
+			<div class="entry-QQ">
+				<img class="entry-QQ-btn" src="../static/img/changePhoneActivity/entry-QQ-btn.png" />
+				<img class="entry-QQ-text" src="../static/img/changePhoneActivity/entry-QQ-text.png" />
+			</div>
+		</div>
+		<div class="middle">
+			<img class="middle_bg_img" src="../static/img/changePhoneActivity/middle_bg_img.png" />
+			<div class="activity-rule">
+				<img class="activity-rule-btn" src="../static/img/changePhoneActivity/activity-rule-btn.png" />
+				<img class="activity-rule-text" src="../static/img/changePhoneActivity/activity-rule-text.png" />
+			</div>
+			<img class="rule1" src="../static/img/changePhoneActivity/rule1.png" />
+			<img class="rule2" src="../static/img/changePhoneActivity/rule2.png" />
+			<img class="rule3" src="../static/img/changePhoneActivity/rule3.png" />
+		</div>
+		<div class="footer">
+			<img class="footer_bg_img" src="../static/img/changePhoneActivity/footer_bg_img.png" />
+			<img class="rule4" src="../static/img/changePhoneActivity/rule4.png" />
+		</div>
+	</div>
+	<script>
+		toastr.options.positionClass = 'toast-center-center';
+		toastr.options.timeOut = '1500';
+	</script>
+	<script type="text/javascript">
+	    let timer,flag = true;
+		let fromType = 0,
+		    account = '',
+			password = '';
+		var url = window.location.href;
+		url = url.split('/')
+		var baseUrl = 'http://192.168.31.198'
+		var loc = window.location.search,
+		    n1 = loc.length,//地址的总长度
+		    n2 = loc.indexOf("="),//取得=号的位置
+		    id = loc.substr(n2 + 1, n1 - n2),//从=号后面的内容
+			u = navigator.userAgent,
+			ua = navigator.userAgent.toLowerCase(),
+			isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
+			isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
+		
+		//埋点
+		operate('10月换机活动');
+		function operate(pointName,type){
+			$.ajax({
+				url: baseUrl + '/api/public/v1/systemBuriedPoint/stat',
+				type: 'post',
+				data:JSON.stringify({
+					pointName: pointName
+				}),
+				contentType:"application/json",
+				dataType: 'json',
+				cache: false,
+				success: function (res) {
+					if(type === 'click'){
+						changePhone();
+					}
+				},
+			})
+		}
+		//点击选择框
+		$('.login-row-select')[0].addEventListener('click',()=>{
+			$('.options')[0].className = 'options show';
+		},false);
+		//点击多多云
+		$('.icon-down-first')[0].addEventListener('click',()=>{
+			$('.options')[0].className = 'options';
+			$('#select').val('多多云');
+			fromType = 1;
+		},false);
+		//点击红手指
+		$('.icon-down-second')[0].addEventListener('click',()=>{
+			$('.options')[0].className = 'options';
+			$('#select').val('红手指');
+			fromType = 2;
+		},false);
+		//点击免费换机按钮
+		$('.login-btn-text')[0].addEventListener('click',changePhoneHandle,false);
+	    $('.login-btn')[0].addEventListener('click',changePhoneHandle,false);
+		function changePhoneHandle(){
+			account = $('#account').val();
+			password = $('#password').val();
+			if(fromType === 0){
+				stopManyClick(() =>{
+					toastr.error('请选择兑换时常的平台')
+				})
+				return
+			}
+			if(account === ''){
+				stopManyClick(() =>{
+					toastr.error('请输入兑换时常的账号')
+				})
+				return
+			}
+			if(password === ''){
+				stopManyClick(() =>{
+					toastr.error('请输入兑换时常的密码')
+				})
+				return
+			}
+			operate('10月换机活动','click');
+		}
+		//调用免费换机接口
+		function changePhone(){
+			$.ajax({
+				url: baseUrl + '/api/public/v1/activity/change/phone',
+				type: 'post',
+				data:JSON.stringify({
+					type: fromType,
+					account: account,
+					password: password
+				}),
+				contentType: "application/json",
+				dataType: 'json',
+				cache: false,
+				success: function (res) {
+					if(res.status === 0){
+						window.location.href = 'https://wjzx.androidscloud.com:9091/file-center/fileOperate/downloadFile?id=573420181';
+					}else{
+						stopManyClick(() =>{
+							toastr.error(res.msg)
+						})
+					}
+				},
+			})
+		}
+		//防止提示一秒内重复显示
+		function stopManyClick(fn) {
+			if (flag) {
+				fn();
+			}
+			flag = false;
+			if(timer){clearTimeout(timer);}
+			timer = setTimeout(() => {flag = true}, 1500);
+		}
+	</script>
+</body>
+
+</html>