Browse Source

调整样式

duanshenglang 1 month ago
parent
commit
597530a717
3 changed files with 261 additions and 39 deletions
  1. BIN
      lottery/img/blessing.png
  2. BIN
      lottery/img/blessings.png
  3. 261 39
      lottery/index.html

BIN
lottery/img/blessing.png


BIN
lottery/img/blessings.png


+ 261 - 39
lottery/index.html

@@ -13,8 +13,8 @@
 	<script src="js/mui.picker.js"></script>
 	<script src="js/mui.poppicker.js"></script>
 	<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
-	<!-- <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
-		<script>
+	<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
+		<!-- <script>
 		  var vConsole = new window.VConsole();
 		</script> -->
 	<script type="text/javascript">
@@ -90,7 +90,8 @@
 	}
 
 	#lotteryPage,
-	#collectPage {
+	#collectPage,
+	#qrcode {
 		display: none;
 	}
 
@@ -306,7 +307,24 @@
 		padding: 24px 25px 44px 15px;
 		border-radius: 15px 15px 0px 0px;
 	}
-
+	.pop-form-car {
+		width: 100%;
+		background-color: #FFFFFF;
+		height: 300px;
+		/* 根据需要调整高度 */
+		position: fixed;
+		/* 或 absolute,根据需要定位 */
+		bottom: -300px;
+		/* 初始位置在可视区域外 */
+		transition: bottom 0.5s ease-in-out;
+		/* 平滑过渡效果 */
+		left: 0;
+		z-index: 1001;
+		/* 确保在遮罩层之上 */
+		box-sizing: border-box;
+		padding: 24px 25px 44px 15px;
+		border-radius: 15px 15px 0px 0px;
+	}
 	.city-data {
 		float: right;
 		width: 65%;
@@ -333,7 +351,9 @@
 		bottom: 0;
 		/* 显示时位置 */
 	}
-
+	.pop-form-car.show {
+		bottom: 0;
+	}
 	.pop-title {
 		display: flex;
 		align-items: center;
@@ -369,7 +389,6 @@
 		display: none;
 		overflow: hidden;
 	}
-
 	.prize-content {
 		width: fit-content;
 		margin: -96% auto 0
@@ -592,7 +611,7 @@
 	.bg_content {
 		height: calc(100vh + 44rem);
 		width: 100vw;
-		background: url('./img/blessing.png');
+		background: url('./img/blessings.png');
 		background-size: cover;
 		margin-top: -44rem;
 	}
@@ -904,6 +923,41 @@
 	input {
 		font-size: 14rem;
 	}
+	.qrcode {
+		padding: 20rem;
+	}
+	.qrcode-img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		margin-bottom: 20rem;
+	}
+	.qrcode-msg {
+		text-align: center;
+		font-size: 18rem;
+	}
+	
+	.ifBuyCar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		/* 半透明黑色 */
+		z-index: 1000;
+		/* 确保遮罩层在顶部 */
+		transition: opacity 0.5s ease;
+		/* 可选:添加透明度过渡效果 */
+		display: none;
+		overflow: hidden;
+	}
+	.car-title {
+		font-size: 18rem;
+		font-weight: 500;
+		color: #222222;
+		text-align: center;
+	}
 </style>
 
 <body>
@@ -967,7 +1021,7 @@
 					<button class="tab-link active" onclick="changeTab(event, 'tab1')">活动信息</button>
 					<button class="tab-link" onclick="changeTab(event, 'tab2')">抽奖记录</button>
 				</div>
-				<div id="tab1" class="tab-content">
+				<div id="tab1" class="tab-content record-list">
 				</div>
 				<div id="tab2" class="tab-content" style="display:none;">
 					<div class="record-list" id="recordList">
@@ -1057,14 +1111,55 @@
 						<input type="text" id="remark" class="mui-input-clear" placeholder="请填写详细地址">
 					</div>
 					<div class="mui-button-row">
-						<button type="button" id="salesMan" class="mui-btn mui-btn-primary save-btn" id="submit"
+						<button type="button" class="mui-btn mui-btn-primary save-btn" id="submit"
 							onclick="handleSave()">提交</button>
 					</div>
 				</form>
 			</div>
 		</div>
+		<div id="ifBuyCar" class="ifBuyCar">
+			<div id="carForm" class="pop-form-car">
+				<div class="car-title">
+					<span>请问您是否已购五菱/宝骏车型?</span>
+				</div>
+				<form class="mui-input-group">
+					<div style="display: flex;padding: 20rem 0;" id="yesNo">
+						<div class="mui-input-row mui-radio">
+							<label>是</label>
+							<input name="radio1" type="radio" value="是">
+						</div>
+						<div class="mui-input-row mui-radio">
+							<label>否</label>
+							<input name="radio1" type="radio" value="否">
+						</div>
+					</div>
+					<div class="mui-input-row" id="showBuyCar">
+						<label>已购车型:</label>
+						<div class="city-data" id="ChoiceSexButton">
+							<div class="no-data" id="placeholderCar">
+								<span>请选择已购车型</span>
+								<img class="right-Icon" id="car-rightIcon" src="" mode="widthFix" />
+							</div>
+							<div id="carResult"></div>
+						</div>
+					</div>
+					<div class="mui-button-row">
+						<button type="button" id="submitCar" class="mui-btn mui-btn-primary save-btn"
+							onclick="handleSaveCar()">立即抽奖</button>
+					</div>
+				</form>
+			</div>
+		</div>
 	</div>
+	<!-- 二维码 -->
+	<div id="qrcode" class="qrcode">
+		<img id="qrcode-img" class="qrcode-img" src="" />
+		<div id="qrcode-msg" class="qrcode-msg"></div>
+	</div>
+
 	<script>
+		let httpUrl = true // 初始化时请求地址为真则是正式环境,否则是测试环境
+		let buyCar= ''
 		let h5Type = null
 		let credentials = {
 			bucket: '',
@@ -1076,6 +1171,9 @@
 		var itemList = []
 		var itemIndex = 0
 		var itemTimer = null
+		var shareTitle = null
+		var shareDes = null
+		var shareCover = null
 		function uploadImage () {
 			let uploaInput = document.getElementById('uploadfile');
 			document.getElementById('uploadfile').click();
@@ -1128,21 +1226,32 @@
 			}
 		}
 		window.onload = function() {
-			if (localStorage.getItem('openId')) {
+			if (httpUrl) {
+				httpUrl = 'https://wlapi.wefanbot.com'
+			} else {
+				httpUrl = 'http://test.wefanbot.com:18993'
+			}
+			if (localStorage.getItem('openId') || getQueryParam('openId')) {
 				if (!getQueryParam('externalUserid')) {
 					let bId = getQueryParam('bId')
 					gerQwAuth(bId);
 				} else {
-					h5Type = getQueryParam('h5Type')
-					getQyWxSign()
-					if (h5Type == 19) {
-						showCityLevel();
-						raffleInfo();
-						raffleRecord();
-						document.getElementById('lotteryPage').style.display = "block"
-					} else if (h5Type == 20) {
-						findCollectList()
-						document.getElementById('collectPage').style.display = "block"
+					if (getQueryParam('externalUserid') === 'unknown') {						
+						let bId = getQueryParam('bId')
+						gerQwCode(bId);
+					} else {
+						h5Type = getQueryParam('h5Type')
+						if (h5Type == 19) {
+							showCityLevel();
+							raffleInfo();
+							raffleRecord();
+							document.getElementById('lotteryPage').style.display = "block"
+							document.getElementById('showBuyCar').style.display = 'none';
+						} else if (h5Type == 20) {
+							findCollectList()
+							document.getElementById('collectPage').style.display = "block"
+						}
+						getQyWxSign()
 					}
 				}
 			} else {
@@ -1150,11 +1259,12 @@
 				getAuth();
 			}
 			document.getElementById("city-rightIcon").src = 'https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/1000/1720163006057/icon_jiantou2%402x.png';
+			document.getElementById("car-rightIcon").src = 'https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/1000/1720163006057/icon_jiantou2%402x.png';
 		};
 		// 内容类型的分享页,获取企业微信的签名
 		function getQyWxSign () {
 			let shareUrl = `${window.location.origin}?bId=${getQueryParam('bId')}&h5Type=${getQueryParam('h5Type')}`
-			mui.ajax('https://wlapi.wefanbot.com/scrm/v1/ct-share/p/getSignature', {
+			mui.ajax(httpUrl + '/scrm/v1/ct-share/p/getSignature', {
 				data: {
 					url: window.location.href
 				},
@@ -1174,9 +1284,9 @@
 						wx.ready(() => {
 							let shareData = {
 								link: shareUrl,
-								title: '寻找可靠的伙伴——宝骏14周年车主故事征集', // 分享标题
-								desc: '暨宝骏云海新车上市500万车主送祝福有奖活动,说出你和宝骏的故事', // 分享描述
-								imgUrl: 'http://wfg-1631.oss.wefanbot.com/imgUrl.jpg',
+								title: getQueryParam('h5Type') == 19 ? shareTitle : '寻找可靠的伙伴——宝骏14周年车主故事征集', // 分享标题
+								desc: getQueryParam('h5Type') == 19 ? shareDes : '暨宝骏云海新车上市500万车主送祝福有奖活动,说出你和宝骏的故事', // 分享描述
+								imgUrl: getQueryParam('h5Type') == 19 ? shareCover : 'http://wfg-1631.oss.wefanbot.com/imgUrl.jpg',
 							}
 							// 分享到朋友圈
 							wx.updateAppMessageShareData(shareData)
@@ -1202,7 +1312,7 @@
 			let code = getQueryParam('code')
 			if (code) {
 				let bId = getQueryParam('bId')
-				mui.ajax('https://wlapi.wefanbot.com/scrm/v1/mp-client/p/getInfoByh5Code', {
+				mui.ajax(httpUrl + '/scrm/v1/mp-client/p/getInfoByh5Code', {
 					data: {
 						code: code,
 						bId: bId,
@@ -1243,10 +1353,10 @@
 		// 企微授权
 		function gerQwAuth (bId) {
 			let link = window.location.href
-			mui.ajax('https://wlapi.wefanbot.com/p/insuite/p/getOAUrl', {
+			mui.ajax(httpUrl + '/p/insuite/p/getOAUrl', {
 				data: {
 					bId: bId,
-					openId: localStorage.getItem('openId'),
+					openId: localStorage.getItem('openId') || getQueryParam('openId'),
 				},
 				dataType: 'json',//服务器返回json格式数据
 				type: 'get',//HTTP请求类型
@@ -1263,6 +1373,29 @@
 				}
 			});
 		};
+		// 获取二维码
+		function gerQwCode (bId) {
+			mui.ajax(httpUrl + '/scrm/v1/wxcp-raffle/p/getUnknown', {
+				data: {
+					bId: bId,
+				},
+				dataType: 'json',//服务器返回json格式数据
+				type: 'get',//HTTP请求类型
+				success: function(res) {
+					if (res.data) {
+						document.getElementById('qrcode').style.display = "block"
+						document.getElementById("qrcode-img").src = res.data.qrCode
+						document.getElementById("qrcode-msg").innerHTML = res.data.msg
+					} else {
+						mui.toast(res.msg);
+					}
+				},
+				error: function(error) {
+					//异常处理;
+					console.log(error);
+				}
+			});
+		}
 		function getCosObj () {
 			mui.ajax('https://saasapi.wefango.com/scrm/v1/oss/p/getAuthorization', {
 				data: {
@@ -1286,10 +1419,10 @@
 		function handleSendText () {
 			let bId = getQueryParam('bId')
 			let textareaResult = document.getElementById("textarea").value;
-			mui.ajax('https://wlapi.wefanbot.com/scrm/v1/mp-collect/p/add', {
+			mui.ajax(httpUrl + '/scrm/v1/mp-collect/p/add', {
 				data: {
 					bId: bId,
-					openId: localStorage.getItem('openId'),
+					openId: localStorage.getItem('openId') || getQueryParam('openId'),
 					content: textareaResult,
 					imgList: imgList,
 				},
@@ -1323,7 +1456,7 @@
 		};
 		// 获取用户故事收集列表
 		function findCollectList () {
-			mui.ajax('https://wlapi.wefanbot.com/scrm/v1/mp-collect/p/findCollectList', {
+			mui.ajax(httpUrl + '/scrm/v1/mp-collect/p/findCollectList', {
 				data: {
 				},
 				dataType: 'json',//服务器返回json格式数据
@@ -1422,6 +1555,15 @@
 		document.getElementById('textareaPlaceHolder').addEventListener('click', function() {
 			document.getElementById('textarea').focus();
 		})
+		document.querySelector('#yesNo').addEventListener('change', function(e) {
+			if (e.srcElement.value == '是') {
+				buyCar = 1
+				document.getElementById('showBuyCar').style.display = 'block';
+			} else {
+				buyCar = 0
+				document.getElementById('showBuyCar').style.display = 'none';
+			}
+		})
 		// 截取url中的数据
 		function getQueryParam (paramName) {
 			// 获取当前URL的查询字符串部分  
@@ -1474,9 +1616,9 @@
 		// 获取抽奖信息
 		function raffleInfo () {
 			let raffleId = getQueryParam('bId')
-			mui.ajax('https://wlapi.wefanbot.com/scrm/v1/wxcp-raffle/p/raffleInfoByOpenId', {
+			mui.ajax(httpUrl + '/scrm/v1/wxcp-raffle/p/raffleInfoByOpenId', {
 				data: {
-					openId: localStorage.getItem('openId'),
+					openId: localStorage.getItem('openId') || getQueryParam('openId'),
 					raffleId: raffleId,
 				},
 				dataType: 'json',//服务器返回json格式数据
@@ -1485,6 +1627,9 @@
 					if (res.code === 1) {
 						lotteryStatus = res.data.status
 						gridList = res.data.prizes
+						shareTitle = res.data.name
+						shareDes = res.data.description
+						shareCover = res.data.cover
 						document.getElementById("tab1").innerHTML = res.data.activityInfo
 						remainingTimes = res.data.raffleNum - res.data.useNum
 						document.getElementById("lotteryId").innerHTML = `已抽奖${res.data.useNum}次,还剩${res.data.raffleNum - res.data.useNum}次机会`
@@ -1519,6 +1664,45 @@
 						buttons.addEventListener('click', function() {
 							handleLottery();
 						})
+						if (res.data.preForm && buyCar==='') {
+							document.getElementById('ifBuyCar').style.display = 'flex';
+							var div = document.getElementById('carForm');
+							div.classList.add('show');
+							document.body.style.overflow = 'hidden';
+
+							var sexPicker = new mui.PopPicker({}); //假如是二联则在括号里面加入{layer:2} 城市列表中有示例
+							//给picker对象添加数据
+							mui.ajax(httpUrl + '/scrm/v1/wxcp-raffle/p/getCarList', {
+								data: {
+								},
+								dataType: 'json',//服务器返回json格式数据
+								type: 'get',//HTTP请求类型
+								success: function(res) {
+									sexPicker.setData(res.data.map(item => {
+										return {
+											value: item,
+											text: item
+										}
+									}))
+								},
+								error: function(error) {
+									//异常处理;
+									console.log(error);
+								}
+							});
+							//一级联示例
+							let carResult = document.getElementById('carResult');
+							document.getElementById("ChoiceSexButton").addEventListener('click', function(event) {
+								event.stopPropagation();
+								// 默认第一层显示第1项;第二层显示第2项
+								sexPicker.pickers[0].setSelectedIndex(0);
+								sexPicker.show(function(selectItems) {
+									document.getElementById('placeholderCar').style.display = "none"
+									var text1 = selectItems[0].text;
+									carResult.innerText = text1
+								})
+							});
+						}
 					} else {
 						mui.toast(res.msg);
 					}
@@ -1532,7 +1716,7 @@
 		// 点击抽奖
 		function handleLottery () {
 			if (!remainingTimes) {
-				mui.toast('抽奖次数已用完');
+				mui.toast('暂无抽奖次数');
 				return false;
 			}
 			const gridContainer = document.getElementById('grid-container');
@@ -1545,10 +1729,10 @@
 				rotateActive();
 				let externalUserid = getQueryParam('externalUserid')
 				let raffleId = getQueryParam('bId')
-				mui.ajax('https://wlapi.wefanbot.com/scrm/v1/wxcp-raffle/p/lottery', {
+				mui.ajax(httpUrl + '/scrm/v1/wxcp-raffle/p/lottery', {
 					data: {
 						externalUserid: externalUserid,
-						openId: localStorage.getItem('openId'),
+						openId: localStorage.getItem('openId') || getQueryParam('openId'),
 						raffleId: raffleId,
 					},
 					dataType: 'json',//服务器返回json格式数据
@@ -1617,9 +1801,9 @@
 		// 获取抽奖记录
 		function raffleRecord () {
 			let raffleId = getQueryParam('bId')
-			mui.ajax('https://wlapi.wefanbot.com/scrm/v1/wxcp-raffle/p/raffleRecord', {
+			mui.ajax(httpUrl + '/scrm/v1/wxcp-raffle/p/raffleRecord', {
 				data: {
-					openId: localStorage.getItem('openId'),
+					openId: localStorage.getItem('openId') || getQueryParam('openId'),
 					raffleId: raffleId,
 					page: 1,
 					pageCount: 1000,
@@ -1693,7 +1877,7 @@
 			} else if (!provinceResult.innerText) {
 				mui.toast('请选择城市');
 			} else {
-				mui.ajax('https://wlapi.wefanbot.com/scrm/v1/wxcp-raffle/p/raffleForm', {
+				mui.ajax(httpUrl + '/scrm/v1/wxcp-raffle/p/raffleForm', {
 					data: {
 						name: nameResult,
 						wxAccount: wxAccountResult,
@@ -1786,7 +1970,45 @@
 				}
 				return format
 			}
-		}
+		};
+		function handleSaveCar () {
+			if (buyCar === '') {
+				mui.toast('请选择选项');
+				return
+			}
+			let carResult = document.getElementById('carResult').innerHTML;
+			if (buyCar && !carResult) {
+				mui.toast('请选择已购车型');
+			} else {
+				mui.ajax(httpUrl + '/scrm/v1/wxcp-raffle/p/submitPreForm', {
+					data: {
+						bid: getQueryParam('bId'),
+						buyCar: buyCar,
+						car: buyCar ? carResult : '',
+						mpOpenId: localStorage.getItem('openId') || getQueryParam('openId'),
+					},
+					dataType: 'json',//服务器返回json格式数据
+					type: 'post',//HTTP请求类型
+					timeout: 10000,//超时时间设置为10秒;
+					headers: { 'Content-Type': 'application/json' },
+					success: function(res) {
+						if (res.code === 1) {
+							mui.toast("提交成功!");
+							document.getElementById('ifBuyCar').style.display = 'none';
+							var div = document.getElementById('carForm');
+							div.classList.remove('show');
+							document.body.style.overflow = 'auto';
+						} else {
+							mui.toast(res.msg);
+						}
+					},
+					error: function(error) {
+						//异常处理;
+						mui.toast(error);
+					}
+				});
+			}
+		};
 	</script>
 </body>