居家小二拉新活动H5页面
2024-05-18 16:44:52
说明： 该页面是 后端数据注入 + 前端模板技术（前端先写好的h5页面，给到后端，后端注入用户信息等动态数据后，再返回给前端） 浏览器显示：
所使用到的技术：bootstrap、jquery、javascript、html、css
<!DOCTYPE html>
<html style="font-size:12px;">
<head><meta charset="utf-8"><meta name="viewport"content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"><#--<meta name="viewport" content="width=divice-width, initial-scal=1">--><#--给移动端专用的按等比 pc端缩小到移动端 （内容宽=设备宽 保证网页在移动设备上正常显示--><link rel="stylesheet" href="/static/global/plugins/bootstrap/css/bootstrap.min.css"><style>body {background-image: url(/static/images/welcome/bar1.png);background-repeat: no-repeat;background-position: center;background-size: cover;height: 100vh;margin: 0;padding: 0;}</style>
</head>
<body>
<div class="row"><div style="position: absolute;left: 8%; top:3%;"><div style="width:40px;height: 40px;border-radius:50%;background:url('/static/images/welcome/tou.png') no-repeat 0 0 ;background-size: cover;position: relative;"></div><div style="width:3.8rem;height:1.8rem;position: absolute;left: 0%;bottom: -53%;color:white;"><span>张伟荣</span></div></div>
</div>
<div class="row" style="width:79%;height:21%;margin:auto;position: absolute;left: 0; right: 0;top:52%;bottom:0;"><form><div class="col-xs-12"><div class="form-group"><input type="text" class="form-control" id="telPhone" placeholder="请输入您的手机号码" style="position:relative"><span id="err_PhoneMsg" style="color:#edb73f;position:absolute;left:6%;top:66%;"> </span><span id="delPhone" style="color:#dea319;position:absolute;right:8%;top:19%;font-size:0.8rem;">X</span></div></div><div class="col-xs-7"><div class="form-group"><input type="text" class="form-control validateCode" id="validateCode" placeholder="验证码"style="position:relative"><span id="err_codeMsg" style="color:#edb73f;position:absolute;left:9%;top:66%;"> </span><span id="delCode" style="color:#dea319;position:absolute;right:13%;top:20%;font-size:0.8rem;">X</span></div></div><div class="col-xs-5"><div class="form-group" style="font-size:1rem"><input type="button" id="sendYzm" value="获取验证码" onclick="getCodeAndTime(this)" class="btn btn-default"style="width:100%;background-color:#FFA200;color:white;border:none"></div></div><div class="col-xs-12"><div class="form-group"><button type="button" class="btn btn-default btn-lg btn-block"style="background-color: #FCF536;color:#B50F15;font-size:1.2rem;position:relative"id="btnSubmit">立即领取</button></div></div></form>
</div><div class="grayBg" style="display:none;width:100%;height:100vh;background-color: #5e5e5e;opacity:0.7;">
</div><div id="mod"style="display:none;width:322px;height: 357px;background:url('/static/images/welcome/bg21.png') no-repeat 0 0 ;background-size: cover;margin:45% auto;position:fixed;top:0;right:0;bottom:0;left:0; "><div class="row" style="color:#FADA43"><div class="col-xs-12" style="text-align: center;margin-top: 42%"><p>手机号：<span id="overPhone"></span>注册居家小二领取</p></div><div class="col-xs-12" style="text-align: center"><span>领取成功！</span></div><div class="col-xs-8 col-xs-offset-2" style="margin-top: 27%"><button type="button" class="btn btn-default btn-block btnCreate"style="background-color: #FCF536;color:#B50F15;font-size:1.2rem;font-weight:700">立即注册</button></div></div>
</div><div class="zheZao" style="display:none;width:100%;height:100vh;background-color: #5e5e5e;opacity:0.7;">
</div><div id="modal"style="display:none;width:280px;height: 315px;background-color:white;border-radius:30px;margin:45% auto;position:fixed;top:0;right:0;bottom:0;left:0; "><div class="row" style="color:#b5b6bc"><div class="col-xs-12" style="text-align: center;margin-top: 24%;margin-bottom:16%"><span style="font-weight:800;font-size:18px;">您已经是居家小二用户</span></div><div class="col-xs-12" style="text-align: center"><span style="font-size:16px">可发起邀请其他用户获得最高168元</span></div><div class="col-xs-4 col-xs-offset-2" style="margin-top: 27%"><button type="button" id="btnClose" class="btn btn-default btn-block"style="background-color: #eee;color:#333;font-size:1.2rem;">取消</button></div><div class="col-xs-4" style="margin-top: 27%"><button type="button" class="btn btn-warning btnCreate" style="background-color: #dab10d"style="background-color: #eee;color:#333;font-size:1.2rem;">立即参与</button></div></div>
</div></body>
<#--<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->
<script src="/static/global/plugins/jquery.min.js"></script>
<script src="/static/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<#--<script src="/static/js/bootstrap.min.js"></script>-->
<script type="text/javascript">var id = "${userId}"// var id = "1474d9aa-c17a-4bd2-b1de-6823e873d4a5"var rule = /^1[3|4|5|7|8][0-9]\d{8}$/;var delPhone = $("#delPhone")var delCode = $("#delCode")// 验证手机号格式function validatePhone(phone) {return /^1[3|4|5|7|8][0-9]\d{8}$/.test(phone)}function isPhoneValidate() {var phone = $("#telPhone").val();return validatePhone(phone)}$("#telPhone").focus(function () {$("#err_PhoneMsg").text("")});$("#telPhone").blur(function () {if (isPhoneValidate()) {$("#err_PhoneMsg").text("")} else {$("#err_PhoneMsg").text("请输入正确的手机号")}})$("#delPhone").click(function () {$("#telPhone").val("")$("#err_PhoneMsg").text("")})// 空 验证码function isEmptyCode() {return !$("#validateCode").val()}$("#validateCode").focus(function () {$("#err_codeMsg").text("")});$("#validateCode").blur(function () {if (isEmptyCode()) {$("#err_codeMsg").text("验证码不能为空")} else {$("#err_codeMsg").text("")}})// 点击取消 模态框$("#delCode").click(function () {$("#validateCode").val("")$("#err_codeMsg").text("")})// 封装倒计时功能function timeGo(id) {return (function (id) {var time = 60var ele = $(id)var timeInterval;var inner = {start: function () {ele.attr('disabled', true)timeInterval = setInterval(function () {ele.val(time + 's')time--if (time <= 0) {inner.stop()}}, 1000)},stop: function () {time = 60if (timeInterval) {clearInterval(timeInterval)timeInterval = ''ele.val('获取验证码')ele.removeAttr('disabled')}}}return inner})(id)}var timeInterval = timeGo('#sendYzm')// timeInterval.start()// setTimeout(function () {// timeInterval.stop()// }, 5000)// 获取验证码且倒计时function getCodeAndTime(e) {if (isPhoneValidate()) {// 若手机号格式正确，则先请求发送验证码接口（判断是否已经是居家小二用户）getCode() // 发送验证码接口里面包含：1、先验证该号领取过没有 2、没有领取过 才会开始发送（若领取过了，则弹框提示:已领取）} else {$("#err_PhoneMsg").text("*请输入正确手机号")return}}// 点击取消，隐藏遮罩层和modal$('#btnClose').click(function () {$(".zheZao").css("display", "none");$("#modal").css("display", "none");})// 点击获取验证码：发送验证码接口里面包含：1、先验证该号领取过没有--> 2、没有领取过 才会给该手机发送短信（若领取过了，则不会发短信，且弹框提示:已领取）function getCode() {$.ajax({type: "get",url: "/api/ms-user-info/activity/activitiSendSms",data: {phone: $("#telPhone").val(),actionId: "register",invistorId: id},success: function (data) {if (!data) {return}if (!data.data) {$("#err_PhoneMsg").text("该号码已领取过了")// ，若（请求接口返回 success）已经是居家小二，则弹出弹框$(".zheZao").css("display", "block");$("#modal").css("display", "block");timeInterval.stop()return} else { // 若不是，则开始倒计时,发送验证码timeInterval.start()console.log("该号码从未领取过，可以领，----发验证码 倒计时 不弹提示")}}})}// 1. checkCode检查验证码正确否：2 正确才能继续请求第二个post接口// ====> 正确再弹modal$("#btnSubmit").click(function (e) {var yanZM = $("#validateCode").val();if (!isPhoneValidate()) {$("#err_PhoneMsg").text("*请输入正确的手机号")return} else if (isEmptyCode()) {$("#err_codeMsg").text("*验证码不能为空!");} else { // 调用 检查验证码：$(this).attr("disabled", "true")// 设置为灰$.ajax({type: "get",url: "/api/ms-user-info/activity/verifiyActivitiSmsCode",data: {phone: $("#telPhone").val(),code: yanZM,actionId: "register"},success: function (data) {console.log("请求检验验证码 返回的data: " + data)if (data.success) {// 验证码成功之后 弹modal(不需取出data.data.message二次验证码来调“注册”)接口?console.log("code正确")// e.preventDefault();阻止表单提交console.log("12222", $("#mod"))$.ajax({type: "POST",contentType: "application/json",url: "/api/ms-user-info/activity/submitRegister",data: JSON.stringify({registerPhone: $("#telPhone").val(),invistorId: id}),success: function(data) {console.log("注册提交成功后的data："+data)if (data.success) {var oldPhone = $('#telPhone').val()var newPhone = oldPhone.replace(oldPhone.substr(3, 4), "****")console.log("3333----" + newPhone)$("#overPhone").text(newPhone)$(".grayBg").css("display", "block");$("#mod").css("display", "block");}},error: function (err) {console.log(err)}})} else {// 提示code错误，请重新输入console.log("code错的：")$("#err_codeMsg").text("验证码错误!");}},error: function (data) {console.log("check code失败后返回data：" + data)}})setTimeout("$('#btnSubmit').removeAttr('disabled')", 3000)//解除置灰}})$(document).ready(function () {var ua = navigator.userAgent;var config = {/*scheme:必须*/scheme_IOS: 'jujiaxiaoer://v1-beta.api.jjtvip.com/HomeViewController?id=1124266252',scheme_Android: 'jjtvip://jujiaxiaoer.app/open',download_IOS_url: 'https://itunes.apple.com/cn/app/id1124266252?mt=8',download_Android_url: 'http://sj.qq.com/myapp/detail.htm?apkName=com.jjtvip.jujiaxiaoer',timeout: 1000};function isIOS() {return !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);}function isAndroid() {return ua.indexOf('Android') > -1 || u.indexOf('Adr') > -1;}function isSafari() {return ua.indexOf("Safari") > -1 && ua.indexOf("Version") > -1}function openClient() {var startTime = Date.now();var ifr = document.createElement('iframe');ifr.src = isIOS() ? config.scheme_IOS : config.scheme_Android;ifr.style.display = 'none';document.body.appendChild(ifr);var t = setTimeout(function () {var endTime = Date.now();if (!startTime || endTime - startTime < config.timeout + 200) {window.location.href = isIOS() ? config.download_IOS_url : config.download_Android_url;}}, config.timeout);window.onblur = function () {clearTimeout(t);}}(function IOSFooter() {if (isIOS() && isSafari()) {var str = '<div class="btn-group btn-group-justified" role="group">\n' +' <div class="btn-group" role="group">\n' +' <a href="' + config.scheme_IOS + '">\n' +' <button type="button" class="btn btn-default">打开</button>\n' +' </a>\n' +' </div>\n' +' <div class="btn-group" role="group">\n' +' <a href="' + config.download_IOS_url + '">\n' +' <button type="button" class="btn btn-primary">下载</button>\n' +' </a>\n' +' </div>\n' +' </div>';$("footer").html(str)}})()$(".btnCreate").click(function () {openClient();})})
</script>
</html>
居家小二拉新活动H5页面相关推荐
- 案例 | 撇开虚荣指标，如何策划一场成功的拉新活动？
拉新一直是众多活动运营的目标.拉新活动方式有很多,包括"以老带新"客户口碑式的拉新.锁定目标式的地推拉新.宣传合作的线上渠道拉新等.精心策划的线上线下活动,可以快速实现拉新.而拉新 ...
- endpointimpl怎么填参数_App拉新：以老拉新活动怎么做？
虽然利用老用户来拉新用户这种活动方式已经比较老套了,但是这种方式依然可以为App带来很多的流量和用户,并且有概率实现用户裂变式的增长. 以老拉新这种拉新获客模式,主要是源于用户的分享行为,有些App会 ...
- 怎么做app图标_App拉新：以老拉新活动怎么做？
虽然利用老用户来拉新用户这种活动方式已经比较老套了,但是这种方式依然可以为App带来很多的流量和用户,并且有概率实现用户裂变式的增长. 以老拉新这种拉新获客模式,主要是源于用户的分享行为,有些App会 ...
- 【淘客基地各项目拉新活动海报已开启】公告
1.涵盖业务:公众号商城:小程序商城:CMS基础版:拾牛APP:原生APP:推好单-好券等均已开启拉新活动海报:(扶持) 2.为什么要开启拉新活动海报:(2月份所有淘宝客带来的新人,及其消费者带来的新 ...
- APP拉新活动方案怎么做才能吸引用户
[活动盒子-APP活动运营工具]一个APP拉新活动的成功与否,就在于能不能给一个APP应用带来很多的新用户,帮助盘活更多的新用户.但是从现在的形式看来,APP拉新活动依然是非常有效的,那么一个APP拉 ...
- 数据分享|Python决策树、随机森林、朴素贝叶斯、KNN（K-最近邻居）分类分析银行拉新活动挖掘潜在贷款客户...
原文链接:http://tecdat.cn/?p=23518 项目背景:银行的主要盈利业务靠的是贷款,这些客户中的大多数是存款大小不等的责任客户(存款人).银行拥有不断增长的客户(点击文末" ...
- Python决策树、随机森林、朴素贝叶斯、KNN（K-最近邻居）分类分析银行拉新活动挖掘潜在贷款客户
最近我们被客户要求撰写关于银行拉新活动的研究报告,包括一些图形和统计输出. 项目背景:银行的主要盈利业务靠的是贷款,这些客户中的大多数是存款大小不等的责任客户(存款人).银行拥有不断增长的客户.该银行 ...
- 3天（从策划到上线传播）获客10w+| 小程序拉新活动范例
1 我们为什么要在1024这个活动 1) 蹭1024程序员活动热点 随着节日的到来,微信指数日环比增长了644.05%,要抓住这波增长红利 2) 蹭网上吐槽互联网穿衣指南的 ...
- 淘宝特价版拉新赚钱的页面怎么做？我终于弄懂了
淘宝的同胞兄弟特价版,虽然长的朴实无华以至于经常被人问起淘宝特价版靠谱吗?2021年淘宝特价版可谓大火了一把,阿里巴巴不计成本的大力推广淘宝特价版,目的也非常明确要把拼多多占领的市场掠夺回来.最近还传 ...
- 用户拉新是去哪儿现在的重要战略目标，结合近期大火的“百万答题”等热门活动，给去哪儿设计一个拉新活动，设计内容要包括：活动主题、活动所依附的产品基本形态，产品核心功能点。请你详
活动主题:开学季,去哪儿? 活动所依附的产品基本形态:去哪儿APP&小程序 策划详情 拉新.促活.转化.复购,是4个用户增长的关键点.在本题中,只讲拉新这一部分. 首先,对代金券的类型进行设计 ...
最新文章
- vmware 12.5.3 linux,vmware12如何安装linux|opensuse42.3系统安装教程
- 计算机组成要素五：虚拟机 堆栈模型
- holer实现外网访问内网数据库
- ffmpeg h265编码_基于ffmpeg库mp4编码记录。
- 同时启动多个Tomcat服务器
- THUSC2016 游记
- CSS3 过渡 transition
- 基于matlab车牌识别算法
- java cximage_CxImage的几种应用举例
- JavaScript高级程序设计（读书笔记）（七）
- 检测键盘的 CAPS LOCK 开关
- Python从excel读取数据并绘图
- 英文电子书下载：salttiger.com
- mysql 计算天数_mysql计算两个日期之间的天数
- 一周总结——2020.5.31
- 紫光同创 FPGA 开发跳坑指南（五）—— DDR3 控制器 IP 的仿真
- html5跟随手指的小球,Android自定义圆形View实现小球跟随手指移动效果（详细介绍）...
- linux grub 编辑器,KGRUBEditor: 可视化的 GRUB 编辑器
- es6 去掉空格_微信小程序自动去除input空格的方法
- 日期时间差的计算--C++