初步搭建H5双旦活动页面

microserviceUserH5/static/css/doubleChristmasActivity.css

@@ -0,0 +1,461 @@
+@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-container{
+  width: 7.5rem;
+  height: 6.54rem;
+  margin: 0 auto;
+  position: relative; 
+  overflow: hidden;
+}
+.top-banner{
+  width: 101%;
+  height: 6.54rem;
+}
+.middle-container{
+  width: 7.5rem;
+  margin: 0 auto;
+  position: relative;
+  background: url(../../static/img/doubleChristmasActivity/bg.png) no-repeat;
+  background-size: 100% auto,100% auto;
+  margin-top: -0.72rem;
+  padding-bottom: 0.5rem;
+}
+.tips{
+  width: 6.9rem;
+  height: 1.76rem;
+  position: absolute;
+  top: 1.82rem;
+  left: 0;
+  z-index: 9;
+}
+.step-container{
+  width: 6.9rem;
+  position: relative;
+  padding-top: 2.82rem;
+  margin-left: 0.3rem;
+}
+.main-step-content{
+  width: 6.9rem;
+  position: relative;
+  z-index: 9;
+  border-radius: 0.1rem;
+  background-color: #ffffff;
+  padding-bottom: 1.18rem;
+}
+.top-step{
+  display: flex;
+  justify-content: space-between;
+}
+.hongbao{
+  width: 1.44rem;
+  height: 1.5rem;
+  margin-top: 0.4rem;
+}
+.step{
+  width: 0.52rem;
+  height: 0.24rem;
+  margin-top: 0.76rem;
+}
+.buyphone{
+  width: 1.44rem;
+  height: 1.5rem;
+  margin-top: 0.4rem;
+}
+.red-packet{
+  margin: 0.3rem 0.3rem 0 0.3rem;
+}
+.red-packet-next{
+  margin: 0.3rem;
+}
+.packet{
+  position: relative;
+  width: 6.32rem;
+  height: 1.56rem;
+  margin-bottom: 0.3rem;
+}
+.fxhb{
+  width: 100%;
+  height: 100%;
+}
+.money{
+  width: 2rem;
+  position: absolute;
+  top: 0.34rem;
+  text-align: center;
+  font-size: 0.14rem;
+  color: #AC6C23;
+}
+.money-mark{
+  font-size: 0.36rem;
+}
+.money-val{
+  font-size: 0.64rem;
+}
+.packet-title{
+  position: absolute;
+  top: 0.36rem;
+  right: 0.82rem;
+  font-size: 0.36rem;
+  color: #FEF1C4;
+}
+.packet-time{
+  position: absolute;
+  bottom: 0.1rem;
+  right: 1.58rem;
+  font-size: 0.24rem;
+  color: #FEF1C4;
+}
+.account{
+  font-size: 0.28rem;
+  text-align: center;
+  padding-bottom: 0.2rem;
+}
+.step-item{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.step-text{
+  font-size: 0.24rem;
+}
+.join-activity-btn{
+  width: 6.6rem;
+  height: 1.8rem;
+  line-height: 1.4rem;
+  position: absolute;
+  bottom: -0.74rem;
+  left: 0.15rem;
+  z-index: 99;
+}
+.join-activity{
+  width: 100%;
+  height: 100%;
+}
+.activity-btn-content{
+  width: 5.2rem;
+  font-size: 0.44rem;
+  position: absolute;
+  left: 1.06rem;
+  top: 0;
+}
+.activity-btn-text{
+  font-size: 0.44rem;
+  color: #BB3804;
+}
+.icon-left{
+  width: 0.2rem;
+  height: 0.32rem;
+}
+.invite-text{
+  margin-top: 0.6rem;
+  font-size: 0.28rem;
+  text-align: center;
+  color: #ffffff;
+  display: none;
+}
+.packet-container{
+  width: 6.9rem;
+  position: relative;
+  margin-top: 1.6rem;
+  margin-left: 0.3rem;
+  display: none;
+}
+.rule-container{
+  width: 6.9rem;
+  position: relative;
+  margin-top: 1.6rem;
+  margin-left: 0.3rem;
+}
+.rule-tips{
+  width: 6.9rem;
+  height: 1.76rem;
+  position: absolute;
+  top: -1rem;
+  left: 0;
+}
+.rule-content{
+  width: 6.9rem;
+  height: 6.2rem;
+  padding: 0.2rem 0;
+  border-radius: 0.1rem;
+  background-color: #ffffff;
+  overflow-y: scroll;
+  position: relative;
+  z-index: 99;
+}
+.rule-point{
+  margin: 0 0.2rem;
+  font-size: 0.24rem;
+  line-height: 0.48rem;
+}
+.packet-block{
+  width: 6.9rem;
+  min-height: 2.16rem;
+  max-height: 9.16rem;
+  border-radius: 0.1rem;
+  background-color: #ffffff;
+  overflow-y: scroll;
+  position: relative;
+  z-index: 99;
+    }
+.packet-titles{
+  position: absolute;
+  top: 0.14rem;
+  left: 2.32rem;
+  font-size: 0.36rem;
+  color: #FEF1C4;
+}
+.packet-times{
+  position: absolute;
+  top: 0.64rem;
+  right: 1.68rem;
+  font-size: 0.24rem;
+  color: #FEF1C4;
+}
+.packet-info{
+  position: absolute;
+  bottom: 0.1rem;
+  right: 0.88rem;
+  font-size: 0.24rem;
+  color: #FEF1C4;
+}
+.share-btn{
+  width: 1.04rem;
+  height: 0.48rem;
+  position: absolute;
+  top: 0.24rem;
+  right: 0.34rem;
+}
+.share-num{
+  position: absolute;
+  top: 0.08rem;
+  left: 0.12rem;
+  font-size: 0.24rem;
+  color: #FD1C15;
+}
+.share{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+.icon{
+  width: 0.2rem;
+  height: 0.16rem;
+  position: absolute;
+  bottom: 0.2rem;
+  right: 0.34rem;
+}
+.user-list{
+  width: 5.72rem;
+  max-height: 5.68rem;
+  margin: 0 auto;
+  margin-bottom: 0.2rem;
+  background: #FFFFFF;
+  border-radius: 0.2rem;
+  border: 0.02rem solid #FFE4E3;
+  padding: 0.3rem 0.3rem 0 0.3rem;
+  overflow-y: scroll;
+  display: none;
+}
+.user-item{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.28rem;
+}
+.user-left{
+  display: flex;
+}
+.head-img{
+  width: 0.68rem;
+  height: 0.68rem;
+  padding-top: 0.06rem;
+  border-radius: 50%;
+}
+.user-info{
+  margin-left: 0.14rem;
+  font-size: 0.24rem;
+}
+.user-name{
+  color: #272624;
+}
+.user-time{
+  color: #999999;
+}
+.meal{
+  font-size: 0.24rem;
+  color: #FD2B1B;
+  max-width: 1.72rem;
+}
+.receive{
+  width: 1.14rem;
+  height: 0.52rem;
+  line-height: 0.52rem;
+  font-size: 0.24rem;
+    color: #ffffff;
+  background-color: #3B7FFF;
+  border-radius: 0.08rem;
+  text-align: center;
+}
+.pop {
+  width: 6.22rem;
+  height: 8.5rem;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  top: -6.96rem;
+  z-index: 999;
+}
+.pop-bg{
+  width: 100%;
+  height: 100%;
+}
+.mask {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.8);
+  display: none;
+}
+.top-title{
+  position: absolute;
+  top: 3.14rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.32rem;
+  color: #ffffff;
+}
+.share-num-text{
+  position: absolute;
+  top: 4.94rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.4rem;
+  color: #F23200;
+  letter-spacing: 0.06rem;
+  font-weight: 600;
+  line-height: 0.56rem;
+  text-align: center;
+}
+.bottom{
+  position: absolute;
+  bottom: 0.46rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bottom-title-row{
+  width: 5.16rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.line{
+  width: 1.5rem;
+  height: 0.02rem;
+  background-color: #ffffff;
+}
+.bottom-title{
+  font-size: 0.24rem;
+  color: #ffffff;
+}
+.bottom-share-row{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 0.18rem;
+  margin: 0 0.2rem;
+}
+.left-friend_share,.right-wechat{
+  display: flex;
+  align-items: center;
+  font-size: 0.28rem;
+  color: #ffffff;
+}
+.friend_share,.wechat{
+  width: 0.68rem;
+  height: 0.68rem;
+  margin-right: 0.2rem;
+}
+.share-text{
+  opacity: 0.8;
+}
+.del{
+  width: 0.56rem;
+  height: 0.56rem;
+  position: absolute;
+  bottom: -0.8rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.del-img{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+
+#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;
+  }
+}
+
+.no-user{
+  background-color: #F16902;
+}
+
+.usered{
+  background-color: #E3E7EE;
+  color: #AAADB3;
+}
+
+.gray{
+  color: #F5E7E7;
+}

microserviceUserH5/vcloud/doubleChristmasActivity.html

@@ -0,0 +1,320 @@
+<!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>双旦活动</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/doubleChristmasActivity.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>
+	<style>
+		
+	</style>
+</head>
+
+<body>
+	<div class="container">
+		<div class="header-container">
+			<img class="top-banner" src="../static/img/doubleChristmasActivity/top-banner.png" />
+			<div class="activity-meal">活动参与套餐：星耀套餐</div>
+		</div>
+		<div class="middle-container">
+			<div class="step-container">
+			    <img class="tips" src="../static/img/doubleElevenActivity/tip.png" />
+			    <div class="main-step-content">
+					<div class="top-step">
+						<div class="step-item">
+							<img class="buyphone" src="../static/img/doubleElevenActivity/buyphone.png" />
+							<span class="step-text">购买云机</span>
+						</div>
+						<img class="step" src="../static/img/doubleElevenActivity/step.png" />
+						<div class="step-item">
+							<img class="hongbao" src="../static/img/doubleElevenActivity/hongbao.png" />
+							<span class="step-text">分享好友红包</span>
+							<span class="step-text">并购买</span>
+						</div>
+						<img class="step" src="../static/img/doubleElevenActivity/step.png" />
+						<div class="step-item">
+							<img class="buyphone" src="../static/img/doubleElevenActivity/buyphone.png" />
+							<span class="step-text">获得云机</span>
+						</div>
+					</div>
+					<div class="red-packet"></div>
+				</div>
+				<div class="join-activity-btn">
+					<img class="join-activity" src="../static/img/doubleElevenActivity/button-join-activity.png" />
+					<div class="activity-btn-content">
+						<span class="activity-btn-text">快来参加双十一活动</span>
+					    <img class="icon-left" src="../static/img/doubleElevenActivity/icon-left.png" />
+					</div>
+				</div>
+			</div>
+			<div class="invite-text">*邀请好友即得厚礼，红包购机买一赠一</div>
+			<div class="packet-container">
+			    <img class="rule-tips" src="../static/img/doubleElevenActivity/packet-tip.png" />
+				<div class="packet-block">
+					<div class="red-packet-next"></div>
+				</div>
+			</div>
+			<div class="rule-container">
+			    <img class="rule-tips" src="../static/img/doubleElevenActivity/rule.png" />
+				<div class="rule-content">
+					<div class="rule-point">红包规则：</div>
+					<div class="rule-point">1.红包可以自用或者分享给好友（好友可以是双子星新/老用户）</div>
+					<div class="rule-point">2.同一个红包一人限领一次，共计6个红包</div>
+					<div class="rule-point">3.红包可以无门槛抵押任何套餐，但是一个订单只能使用一个</div>
+					<div class="rule-point">4. 分享者分享的红包被领取后，如果领取红包的人使用红包购买了任意套餐，分享者都可领取一份相同的套餐</div>
+					<div class="rule-point">5. 若分享者自己领取自己的红包后使用红包购买套餐，自己可获得两份相同的套餐</div>
+					<div class="rule-point">6.本次活动仅限人民币购买套餐，星币支付不参与本次活动</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<script>
+		toastr.options.positionClass = 'toast-center-center';
+		toastr.options.timeOut = '1500';
+	</script>
+	<script type="text/javascript">
+	    let timer,flag = true;
+		var url = window.location.href;
+		url = url.split('/');
+		var topVal = -0.5;
+		let obj = {};
+		// 上线分享环境改为0,图片路径改为正式站路径
+		// var baseUrl = 'https://test.androidscloud.com'
+		var loc = window.location.search,
+			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终端
+		let s = loc.substr(1,loc.length-1);//取得=号的位置
+		let parms = s.split('&');
+		parms.map((item) =>{
+			let arr = item.split('=');
+			let key = arr[0];
+			obj[key] = arr[1];
+		})
+		// 双十一活动
+		function receiveRedEnvelope(){
+			$.ajax({
+				url: baseUrl + `/api/user/v1/activity/receiveRedEnvelope`,
+				type: 'post',
+				headers: {
+					'Authorization': obj.token //id
+				},
+				data:JSON.stringify({
+					couponRandomId: obj.couponRandomId,
+					goodId: obj.goodId,
+					originalOrder: obj.originalOrder,
+					shareUser: obj.shareUser
+				}),
+				contentType:"application/json",
+				dataType: 'json',
+				cache: false,
+				success: function (res) {
+					if (res.status == 0 || res.status == 4106) {
+						operate('dt_双11_mp_领取红包');
+						phoneNumber = res.data;
+						let node = `<div class="packet">
+							<img class="fxhb" src="../static/img/doubleElevenActivity/fxhb.png" />
+							<div class="money"><span class="money-mark">¥</span><span class="money-val">${parseInt(obj.money)}</span></div>
+							<div class="packet-title">云手机无门槛抵扣券</div>
+							<div class="packet-time">${obj.startTime.substring(5,7)}月${obj.startTime.substring(8,10)}-${obj.endTime.substring(5,7)}月${obj.endTime.substring(8,10)}日有效</div>
+						</div>
+						<div class="account">优惠券已放入您的账户${getPhoneNumber(phoneNumber)}</div>`
+						$('.red-packet').eq(0).append(node);
+						$('.activity-btn-text').eq(0).text('在双子星APP使用红包');
+						$('.icon-left').eq(0).hide();
+					} else {
+						stopManyClick(() => {
+							toastr.error(res.msg);
+						})
+					}
+					
+				},
+			})
+		}
+		//调用获取数据列表接口
+		function getList(){
+			$.ajax({
+				url: baseUrl + '/api/user/v1/activity/orderRedEnvelopeSharing',
+				type: 'post',
+				headers: {
+					'Authorization': obj.token //id
+				},
+				contentType: "application/json",
+				dataType: 'json',
+				cache: false,
+				success: function (res) {
+					if(res.status === 0){
+						if(res.data && res.data.length > 0){
+							$('.invite-text').eq(0).show();
+							$('.packet-container').eq(0).show();
+							var str = '',
+							    list = '',
+							    len = res.data.length;
+							for (var i = 0; i < len; i++) {
+								var totalMoney = res.data[i].totalMoney,
+								    shareCount = res.data[i].shareCount,
+								    couponRandomId = res.data[i].couponRandomId,
+								    goodId = res.data[i].goodId,
+								    shareOrder = res.data[i].shareOrder,
+								    shareUser = res.data[i].shareUser,
+									dataList = res.data[i].list,
+								    quantity = res.data[i].quantity;
+									function getReceivePhoneDuration(item){
+										let res = item.receivePhoneDuration===30?'月卡':item.receivePhoneDuration===90?'季卡':item.receivePhoneDuration===365?'年卡':item.receivePhoneDuration+'天卡';
+										return dataObj[item.receivePhoneType] + res
+									}
+									dataList.map((item,index) => {
+										let numberImg = Math.floor(getRandom()/2) + 1;
+										list += `<div class="user-item">
+											<div class="user-left">
+												<img class="head-img" src="../static/img/doubleElevenActivity/head-img-0${numberImg}.png" />
+												<div class="user-info">
+													<div class="user-name">${getPhoneNumber(item.receiveUserPhone)}</div>
+													<div class="user-time">${item.createTime.substring(5,7)}月${item.createTime.substring(8,11)}日${item.createTime.substring(11,19)}</div>
+												</div>
+											</div>
+											<div class="meal">${item.state === 0?totalMoney/quantity+'元红包':getReceivePhoneDuration(item)}</div>
+											<div class="${['receive no-user','receive',' receive usered'][item.state]}" data-type=${item.receivePhoneType} data-state=${item.state} data-id=${item.id}>${['未使用','领取','已领取'][item.state]}</div>
+										</div>`
+									})
+								    str += `<div class="packet">
+											<img class="fxhb" data-index=${i} data-dataList=${JSON.stringify(dataList)} src="../static/img/doubleElevenActivity/fxhb.png" />
+											<div class="money" data-index=${i} data-dataList=${JSON.stringify(dataList)}><span class="money-mark">¥</span><span class="money-val">${parseInt(totalMoney)}</span></div>
+											<div class="packet-titles" data-index=${i} data-dataList=${JSON.stringify(dataList)}>无门槛</div>
+											<div class="packet-times" data-index=${i} data-dataList=${JSON.stringify(dataList)}>${startTime.substring(5,7)}月${startTime.substring(8,10)}-${endTime.substring(5,7)}月${endTime.substring(8,10)}日有效</div>
+											<div class="share-btn">
+												<img class="share" data-obj=${
+													JSON.stringify({
+														totalMoney: totalMoney,
+														couponRandomId: couponRandomId,
+														goodId: goodId,
+														shareOrder: shareOrder,
+														shareUser: shareUser,
+														shareCount: shareCount,
+														quantity: quantity
+													})
+												} src="../static/img/doubleElevenActivity/${shareCount === quantity?'no-share':'share'}.png" />
+												<div class="share-num ${shareCount === quantity?'gray':''}" data-obj=${
+													JSON.stringify({
+														totalMoney: totalMoney,
+														couponRandomId: couponRandomId,
+														goodId: goodId,
+														shareOrder: shareOrder,
+														shareUser: shareUser,
+														shareCount: shareCount,
+														quantity: quantity
+													})
+												}>${shareCount}/${quantity}</div>
+											</div>
+											<div class="packet-info">${dataList.length !== 0?'':'尚未有用户领取红包购买云机'}</div>
+											<img class="icon" src="../static/img/doubleElevenActivity/icon_up.png" />
+										</div>
+										<div class="list ${dataList.length !== 0?'user-list':''}" flag="2">
+											${dataList.length !== 0?list:''}
+									    </div>`
+										list = ''
+							}
+							$('.red-packet-next').eq(0).append(str);
+							$('.user-list').eq(0).css('display','block');
+-							$('.icon').eq(0).attr('src','../static/img/doubleElevenActivity/icon_down.png');
+-					        $('.user-list').eq(0).attr('flag','1');
+						}
+					}else{
+						stopManyClick(() => {
+							toastr.error(res.msg);
+						})
+					}
+				}
+			})
+		}
+		//埋点
+		operate('dt_双11_h5_活动页面');
+		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) {
+					
+				},
+			})
+		}
+		//点击红包
+		$('.red-packet-next')[0].addEventListener('click',(e) => {
+			if(['fxhb','packet-titles','money','packet-times'].includes(e.target.className)){
+				let index = e.target.dataset.index;
+				$('.list').eq(index).toggle();
+				const flag = $('.user-list').eq(index).attr('flag');
+				if(flag === '1'){
+					$('.icon').eq(index).attr('src','../static/img/doubleElevenActivity/icon_up.png');
+					$('.user-list').eq(index).attr('flag','2');
+				}else{
+					$('.icon').eq(index).attr('src','../static/img/doubleElevenActivity/icon_down.png');
+					$('.user-list').eq(index).attr('flag','1');
+				}
+			}
+		})
+		//点击参加按钮
+		$('.join-activity-btn')[0].addEventListener('click',()=>{
+			if(obj.money){ // 小程序
+				window.location.href = `${baseUrl}/h5/microserviceUserH5/vcloud/downApp.html`
+			}else{
+				if (isAndroid) {
+					window.native.startPurchase();
+					operate('dt_双11_h5_快来参加双11');
+				}
+			}
+		});
+		//点击领取
+		$('.red-packet-next')[0].addEventListener('click',(e)=>{
+			var state = e.target.dataset.state;
+			let id = e.target.dataset.id;
+			let type = e.target.dataset.type;
+			if(state == 0){
+				if(obj.money){
+					return
+				}
+				stopManyClick(() => {
+					toastr.error('赶紧让你的好友使用红包购买云机吧！');
+				})
+			}else if(state == 1){
+				if(e.target.className === 'receive'){
+					e.stopPropagation();
+					if (isAndroid) {
+						window.native.activatePhone(id, type);
+					}
+				}
+			}
+		});
+		//防止提示一秒内重复显示
+		function stopManyClick(fn) {
+		if (flag) {
+				fn();
+			}
+			flag = false;
+			if(timer){clearTimeout(timer);}
+			timer = setTimeout(() => {flag = true}, 1500);
+		}
+		// 获取一个随机数
+		function getRandom(){
+			return Math.floor(Math.random()*10);
+		}
+		function getPhoneNumber(phoneNumber){
+			return `${phoneNumber.substring(0,3)}****${phoneNumber.substring(7,11)}`
+		}
+	</script>
+</body>
+
+</html>