Kaynağa Gözat

Merge branch 'master' of http://test.wefanbot.com:3000/wfg/lottery

liangzhaozhou 7 ay önce
ebeveyn
işleme
3298bad8d2

+ 183 - 2
lottery/dsl.html

@@ -230,9 +230,69 @@
 			line-height: 17rem;
 		}
 		.send_btn {
-			width: 345px;
+			width: 100%;
 			position: fixed;
-			bottom: 60px;
+			bottom: 0rem;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+		.dialog_text {
+			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;
+		}
+		.dialog-body {
+			width: 100%;
+			height: 100vh;
+			z-index: 1001; /* 确保遮罩层在顶部 */
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+		}
+		.text_bg {
+			background: url('./img/dialog-text.png');
+			background-size: cover;
+			width: 100vw;
+			height: 368rem;
+		}
+		.close-text {
+			width: 24rem;
+			height: 24rem;
+			float: right;
+			margin-right: 25rem;
+			margin-top: 25rem;
+		}
+		.textarea_style {
+			background-color: rgba(255, 255, 255, 0);
+			border: unset;
+			height: 180rem;
+			padding: 0 35rem;
+			width: 100%;
+			margin: 0;
+		}
+		.photo-btn {
+			width: 80rem;
+			height: 80rem;
+			margin-top: 18rem;
+			margin-left: 35rem;
+		}
+		.send_text {
+			width: 225rem;
+			height: 52rem;
+			background: linear-gradient( 134deg, #FAFF77 0%, #8EFF3B 100%);
+			border-radius: 30rem;
+			border: 2rem solid #FFFFFF;
+			font-weight: 800;
+			font-size: 16px;
+			color: #222222;
+			margin-top: 15rem;
 		}
 	</style>
 	<body>
@@ -255,6 +315,127 @@
 			</div>
 			<img class="send_btn" id="sendBtn" src="./img/send-btn.png" mode="widthFix" />
 		</div>
+		<div id="dialogText" class="dialog_text">
+			<div class="dialog-body">
+				<div class="text_bg">
+					<img class="close-text" id="closeText" src="./img/close-text.png" mode="widthFix" />
+					<textarea class="textarea_style" id="textarea"></textarea>
+					<img class="photo-btn" id="photoBtn" src="./img/photo-btn.png" mode="widthFix" />
+					 <input type="file" id="uploadfile" onchange="uploadFile()" />
+				</div>
+				<button class="send_text" onclick="handleSendText">发送</button>
+			</div>
+		</div>
+		<script>
+			window.onload = function() {
+				// 获取腾讯COS对象存储的实例对象
+				getCosObj();
+				let uploaInput =document.getElementById("uploadfile");
+				let div;
+				// 当用户上传时触发事件
+				uploaInput.onchange=function(){
+					readFile(this);
+				}
+				//处理图片并添加都dom中的函数
+				let readFile=function(obj){
+					// 获取input里面的文件组
+					let fileList=obj.files;
+					//对文件组进行遍历,可以到控制台打印出fileList去看看
+					for(let i=0;i<fileList.length;i++){
+						
+						var formData = new FormData();
+						formData.append('path', fileList[i].name)
+						formData.append('file', fileList[i])
+						let url = credentials.serverDomain+ '/open/v1/file/upload'
+						mui.ajax(url, {
+							data: formData,
+							processData: false,
+							contentType: false,
+							type:'post',//HTTP请求类型
+							headers: {
+							  'bucket': credentials.bucket,
+							  'Authorization': credentials.authorization,
+							  'secretId': credentials.secretId,
+							},
+							success:function(res){
+								console.log('res', res.data);
+							},
+							error:function(error){
+								//异常处理;
+								console.log(error);
+							}
+						});
+					}
+				}
+			};
+			function fileToArrayBuffer(file) {  
+			    return new Promise((resolve, reject) => {  
+			        const reader = new FileReader();  
+			  
+			        reader.onload = function() {  
+			            resolve(reader.result); // reader.result 现在是 ArrayBuffer  
+			        };  
+			  
+			        reader.onerror = function(error) {  
+			            reject(error);  
+			        };  
+			  
+			        // 读取文件内容为 ArrayBuffer  
+			        reader.readAsArrayBuffer(file);  
+			    });  
+			};
+			let credentials = {
+				bucket: '',
+				Authorization: '',
+				secretId: '',
+				serverDomain: ''
+			};
+			function getCosObj() {
+				mui.ajax('http://test.wefanbot.com:18998/scrm/v1/oss/p/getAuthorization',{
+					data:{
+					},
+					dataType:'json',//服务器返回json格式数据
+					type:'post',//HTTP请求类型
+					headers:{'Content-Type':'application/json'},
+					success:function(res){
+						credentials = res.data.info
+						// 用正则将this.credentials.serverDomain链接中的协议与当前域名的协议保持一致
+						credentials.serverDomain = credentials.serverDomain.replace(/https:|http:/g, document.location.protocol)
+						console.log('credentials2', credentials);
+					},
+					error:function(error){
+						//异常处理;
+						console.log(error);
+					}
+				});
+			};
+			function handleSendText() {
+				let textareaResult = document.getElementById("textarea").value;
+				mui.ajax('http://test.wefanbot.com:18998/scrm/v1/oss/m/getAuthorization', {
+					data:{
+						mpClientId: '',
+						openId: '',
+						content: textareaResult,
+						imgList: '',
+					},
+					dataType:'json',//服务器返回json格式数据
+					type:'post',//HTTP请求类型
+					headers:{'Content-Type':'application/json'},
+					success:function(res){
+					},
+					error:function(error){
+						//异常处理;
+						console.log(error);
+					}
+				});
+			};
+			document.getElementById('sendBtn').addEventListener('click', function() {
+				document.getElementById('dialogText').style.display = 'block';
+			});
+			document.getElementById('closeText').addEventListener('click', function() {
+				document.getElementById('dialogText').style.display = 'none';
+			});
+		</script>
 	</body>
 	<script type="text/javascript">
 		function getRandomArbitrary(min, max) {

BIN
lottery/img/close-text.png


BIN
lottery/img/dialog-text.png


BIN
lottery/img/photo-btn.png


+ 428 - 106
lottery/index.html

@@ -12,6 +12,68 @@
 		<script src="js/mui.poppicker.js"></script>
 		<script type="text/javascript">
 			mui.init()
+			(function flexible (window, document) {
+				let docEl = document.documentElement
+				let dpr = window.devicePixelRatio || 1
+			
+				// adjust body font size
+				function setBodyFontSize () {
+					if (document.body) {
+						document.body.style.fontSize = (12 * dpr) + 'px'
+					} else {
+						document.addEventListener('DOMContentLoaded', setBodyFontSize)
+					}
+				}
+				setBodyFontSize()
+			
+				// set 1rem = viewWidth / 10
+				function setRemUnit () {
+					let rem = docEl.clientWidth / 375
+					docEl.style.fontSize = rem + 'px'
+				}
+			
+				setRemUnit()
+			
+				// reset rem unit on page resize
+				window.addEventListener('resize', setRemUnit)
+				window.addEventListener('pageshow', function(e) {
+					if (e.persisted) {
+						setRemUnit()
+					}
+				})
+			
+				// detect 0.5px supports
+				if (dpr >= 2) {
+					let fakeBody = document.createElement('body')
+					let testElement = document.createElement('div')
+					testElement.style.border = '.5px solid transparent'
+					fakeBody.appendChild(testElement)
+					docEl.appendChild(fakeBody)
+					if (testElement.offsetHeight === 1) {
+						docEl.classList.add('hairlines')
+					}
+					docEl.removeChild(fakeBody)
+				}
+			}(window, document));
+			(function() {
+				if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') {
+					handleFontSize()
+				} else {
+					if (document.addEventListener) {
+						document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)
+					} else if (document.attachEvent) {
+						document.attachEvent('onWeixinJSBridgeReady', handleFontSize)
+					}
+				}
+				function handleFontSize () {
+					// 设置网页字体为默认大小
+					WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 })
+					// 重写设置网页字体大小的事件
+					WeixinJSBridge.on('menu:setfont', function() {
+						WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 })
+					})
+				}
+			})()
 		</script>
 	</head>
 <style type="text/css">
@@ -431,130 +493,307 @@
 		font-size: 14px;
 		border: 4px solid #eb845a;
 	}
+	.bg_content {
+		height: 100vh;
+		width: 100vw;
+		background: url('./img/blessing.png');
+		background-size: cover;
+	}
+	.show_box{
+		position: absolute;
+		top: 198rem;
+		background: #FFFFFF;
+		left: 15rem;
+		right: 15rem;
+		height: 290rem;
+	}
+	.send_btn {
+		width: 100%;
+		position: fixed;
+		bottom: 0rem;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	.dialog_text {
+		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;
+	}
+	.dialog-body {
+		width: 100%;
+		height: 100vh;
+		z-index: 1001; /* 确保遮罩层在顶部 */
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+	.text_bg {
+		background: url('./img/dialog-text.png');
+		background-size: cover;
+		width: 100vw;
+		height: 368rem;
+	}
+	.close-text {
+		width: 24rem;
+		height: 24rem;
+		float: right;
+		margin-right: 25rem;
+		margin-top: 25rem;
+	}
+	.textarea_style {
+		background-color: rgba(255, 255, 255, 0);
+		border: unset;
+		height: 180rem;
+		padding: 0 35rem;
+		width: 100%;
+		margin: 0;
+	}
+	.photo-btn {
+		width: 80rem;
+		height: 80rem;
+		margin-top: 18rem;
+		margin-left: 35rem;
+	}
+	.send_text {
+		width: 225rem;
+		height: 52rem;
+		background: linear-gradient( 134deg, #FAFF77 0%, #8EFF3B 100%);
+		border-radius: 30rem;
+		border: 2rem solid #FFFFFF;
+		font-weight: 800;
+		font-size: 16px;
+		color: #222222;
+		margin-top: 15rem;
+	}
+	.imageGallery {
+		width: 100%;
+		display: flex;
+		overflow-x: auto;
+	}
+	.imageGallery img{
+		width: 80rem;
+		height: 80rem;
+		margin-top: 18rem;
+		margin-left: 35rem;
+	}
 </style>
 <body>
-	<img class="bg-img" id="bgImg" src="./img/lottery-bg.png" mode="widthFix" />
-	<div class="event-notice" id="eventNotice">
-		<span>活动须知</span>
-	</div>
-	<div class="prize-content">
-		<div id="grid-container">
-				
-		</div>  
-	</div>
-	<div class="btn">
-		<img class="btn-img" id="lottery-button" src="./img/btn.png" mode="widthFix" />
-	</div>
-	<div class="lottery-tip" id="lotteryId"></div>
-	<div class="rule">
-		<div class="rule-body">
-			<div class="tabs">
-				<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>  
-			<div id="tab2" class="tab-content" style="display:none;">
-				<div class="record-list" id="recordList">
+	<div id="collectPage">
+		<div class="bg_content">
+			<div class="show_box">
+				<div class="avatar_box">
+					<img class="avatar" src=""/>
+					<div class="info_box">
+						<div class="img_box">
+							<img src=""/>
+						</div>
+					</div>
 				</div>
-			</div>  
+			</div>
+			<img class="send_btn" id="sendBtn" src="./img/send-btn.png" mode="widthFix" />
 		</div>
-	</div>
-	<div id="dialog" class="dialog">
-		<div id="dialog-body" class="dialog-body">
-			<img class="dialog-tip" src="./img/dialog-tip.png" />
-			<img class="dialog-bg" src="./img/dialog-bg.png" />
-			<div class="prize-msg" id="prize-msg-money">
-				<div class="money-title">微信红包</div>
-				<div class="money-content">
-					<span class="prize-money" id="prize-money"></span>
-					<span class="prize-unit">元</span>
+		<div id="dialogText" class="dialog_text">
+			<div class="dialog-body">
+				<div class="text_bg">
+					<img class="close-text" id="closeText" src="./img/close-text.png" mode="widthFix" />
+					<textarea class="textarea_style" id="textarea"></textarea>
+					<div id="imageGallery" class="imageGallery"></div>
+					<img class="photo-btn" id="photoBtn" src="./img/photo-btn.png" mode="widthFix" onclick="uploadImage()" />
+					<input type="file" id="uploadfile" style="display: none;" multiple accept='image/*'>
 				</div>
-				<img class="dialog-btn" id="dialog-btn-money" src="./img/dialog-btn.png" />
-				<div class="money-tip">红包到账会有延迟情况,请以实际为准</div>
+				<button class="send_text" onclick="handleSendText()">发送</button>
 			</div>
-			<div class="prize-msg" id="prize-msg-goods">
-				<img class="goods-img" id="goods-img" src="" />
-				<div class="goods-name" id="goods-name"></div>
-				<img class="dialog-btn" id="dialog-btn-goods" src="./img/dialog-btn.png" />
-			</div>
-			<img class="dialog-close" id="dialog-close" src="./img/dialog-close.png" />
 		</div>
 	</div>
-	<div id="notice" class="dialog">
-		<div class="notice-body" id="notice-body">
-			<div>以下隐私协议是本产品对用户隐私保护的许诺,请您务必仔细阅读本协议,以了解我们关于管理您个人信息的情况。本隐私协议的全部条款属于本产品用户服务协议的重要部份之一。<br />
-				为了给您提供更准确、更有针对性的服务,本产品可能会以如下方式,使用您授权的个人信息。但本产品会以高度的勤勉义务对待这些信息,在未征得您许可的情况下,不会将这些信息对外公开或向第三方提供。<br />
-				请务必遵守《微信开放平台协议》、《微信公众平台协议》、《企业微信服务协议》、《企业微信隐私保护协议》、《微信商户号服务协议》、《微信外部链接内容管理规范》等微信相关管理规范,我们不承担因违反上述管理规范所导致的任何责任。<br />
-				一、您已经认真阅读参与的活动信息,自愿参加相关活动。您自愿并乐意将活动链接、海报、文案等信息转发分享到微信朋友圈、微信群、微信聊天等渠道,并不是因为诱导的情况下参与相关活动、分享相关活动。<br />
-				二、您自愿选择服务或提供信息的情况下收集您的个人信息(包括但不限于,微信昵称,微信头像,微信地址,微信关联手机号等),并将这些信息进行整合,以便向您提供更好的用户服务。<br />
-				三、保有您的使用记录在如下情况下,本产品会遵照您的意愿或法律的规定披露您的个人信息(包括但不限于,微信昵称,微信头像,微信地址,微信关联手机号等),由此引发的问题将由您个人承担: <br />
-					1)事先获得您的授权<br />
-					2)只有获取您的个人资料,才能提供您所要求的服务 <br />
-					3)根据有关的法律法规要求<br />
-					4)按照相关政府主管部门的要求 <br />
-					5)为维护本产品的合法权益<br />
-					6)您同意让第三方共享资料<br />
-					7)我们发现您违反了本产品的服务条款或使用规定 <br />
-					8)我们需要向代表我们提供产品或服务的公司提供资料 (除非我们另行通知您,否则这些公司无权使用您的身份识别资料)<br />
-				四、本《隐私协议》不适用于以下情况: <br />
-					1)通过我们的服务而接入的第三方服务(包括任何第三方网站)收集的信息。本政策仅适用于我们所收集的信息,并不适用于任何第三方提供的服务或第三方的信息使用规则,我们对任何第三方使用由您提供的信息不承担任何责任。<br />
-					2)通过在我们服务中进行广告服务的其他公司或机构所收集的信息。<br />
-			</div>
+	<div id="lotteryPage">
+		<img class="bg-img" id="bgImg" src="./img/lottery-bg.png" mode="widthFix" />
+		<div class="event-notice" id="eventNotice">
+			<span>活动须知</span>
 		</div>
-	</div>
-	<div id="overlay" class="overlay">
-		<div id="popForm" class="pop-form">
-			<div class="pop-title">
-				<img class="close-Icon" id="closeIcon" src="./img/close.png" mode="widthFix" />
-				<span>填写收货地址</span>
+		<div class="prize-content">
+			<div id="grid-container">
+					
+			</div>  
+		</div>
+		<div class="btn">
+			<img class="btn-img" id="lottery-button" src="./img/btn.png" mode="widthFix" />
+		</div>
+		<div class="lottery-tip" id="lotteryId"></div>
+		<div class="rule">
+			<div class="rule-body">
+				<div class="tabs">
+					<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>  
+				<div id="tab2" class="tab-content" style="display:none;">
+					<div class="record-list" id="recordList">
+					</div>
+				</div>  
 			</div>
-			<form class="mui-input-group">
-				<div class="mui-input-row">
-					<label>姓名:</label>
-					<input type="text" id="name" class="mui-input-clear" placeholder="请填写您的姓名">
-				</div>
-				<div class="mui-input-row">
-					<label>微信号:</label>
-					<input type="text" id="wxAccount" class="mui-input-clear" placeholder="请填写您的微信号">
-				</div><div class="mui-input-row">
-					<label>手机号:</label>
-					<input type="text" id="phone" class="mui-input-clear" placeholder="请填写您的手机号">
-				</div>
-				<div class="mui-input-row">
-					<label>地区:</label>
-					<div class="city-data" id="showCityPicker">
-						<div class="no-data" id="placeholderCity">
-							<span>请选择地区</span>
-							<img class="right-Icon" id="city-rightIcon" src="" mode="widthFix" />
-						</div>
-						<div id="province"></div>
-						<div id="city"></div>
+		</div>
+		<div id="dialog" class="dialog">
+			<div id="dialog-body" class="dialog-body">
+				<img class="dialog-tip" src="./img/dialog-tip.png" />
+				<img class="dialog-bg" src="./img/dialog-bg.png" />
+				<div class="prize-msg" id="prize-msg-money">
+					<div class="money-title">微信红包</div>
+					<div class="money-content">
+						<span class="prize-money" id="prize-money"></span>
+						<span class="prize-unit">元</span>
 					</div>
+					<img class="dialog-btn" id="dialog-btn-money" src="./img/dialog-btn.png" />
+					<div class="money-tip">红包到账会有延迟情况,请以实际为准</div>
 				</div>
-				<div class="mui-input-row">
-					<label>详细地址:</label>
-					<input type="text" id="address" class="mui-input-clear" placeholder="请填写详细地址">
+				<div class="prize-msg" id="prize-msg-goods">
+					<img class="goods-img" id="goods-img" src="" />
+					<div class="goods-name" id="goods-name"></div>
+					<img class="dialog-btn" id="dialog-btn-goods" src="./img/dialog-btn.png" />
 				</div>
-				<div class="mui-input-row">
-					<label>备注:</label>
-					<input type="text" id="remark" class="mui-input-clear" placeholder="请填写详细地址">
+				<img class="dialog-close" id="dialog-close" src="./img/dialog-close.png" />
+			</div>
+		</div>
+		<div id="notice" class="dialog">
+			<div class="notice-body" id="notice-body">
+				<div>以下隐私协议是本产品对用户隐私保护的许诺,请您务必仔细阅读本协议,以了解我们关于管理您个人信息的情况。本隐私协议的全部条款属于本产品用户服务协议的重要部份之一。<br />
+					为了给您提供更准确、更有针对性的服务,本产品可能会以如下方式,使用您授权的个人信息。但本产品会以高度的勤勉义务对待这些信息,在未征得您许可的情况下,不会将这些信息对外公开或向第三方提供。<br />
+					请务必遵守《微信开放平台协议》、《微信公众平台协议》、《企业微信服务协议》、《企业微信隐私保护协议》、《微信商户号服务协议》、《微信外部链接内容管理规范》等微信相关管理规范,我们不承担因违反上述管理规范所导致的任何责任。<br />
+					一、您已经认真阅读参与的活动信息,自愿参加相关活动。您自愿并乐意将活动链接、海报、文案等信息转发分享到微信朋友圈、微信群、微信聊天等渠道,并不是因为诱导的情况下参与相关活动、分享相关活动。<br />
+					二、您自愿选择服务或提供信息的情况下收集您的个人信息(包括但不限于,微信昵称,微信头像,微信地址,微信关联手机号等),并将这些信息进行整合,以便向您提供更好的用户服务。<br />
+					三、保有您的使用记录在如下情况下,本产品会遵照您的意愿或法律的规定披露您的个人信息(包括但不限于,微信昵称,微信头像,微信地址,微信关联手机号等),由此引发的问题将由您个人承担: <br />
+						1)事先获得您的授权<br />
+						2)只有获取您的个人资料,才能提供您所要求的服务 <br />
+						3)根据有关的法律法规要求<br />
+						4)按照相关政府主管部门的要求 <br />
+						5)为维护本产品的合法权益<br />
+						6)您同意让第三方共享资料<br />
+						7)我们发现您违反了本产品的服务条款或使用规定 <br />
+						8)我们需要向代表我们提供产品或服务的公司提供资料 (除非我们另行通知您,否则这些公司无权使用您的身份识别资料)<br />
+					四、本《隐私协议》不适用于以下情况: <br />
+						1)通过我们的服务而接入的第三方服务(包括任何第三方网站)收集的信息。本政策仅适用于我们所收集的信息,并不适用于任何第三方提供的服务或第三方的信息使用规则,我们对任何第三方使用由您提供的信息不承担任何责任。<br />
+						2)通过在我们服务中进行广告服务的其他公司或机构所收集的信息。<br />
 				</div>
-				<div class="mui-button-row">
-					<button type="button" id="salesMan" class="mui-btn mui-btn-primary save-btn" id="submit" onclick="handleSave()">提交</button>
+			</div>
+		</div>
+		<div id="overlay" class="overlay">
+			<div id="popForm" class="pop-form">
+				<div class="pop-title">
+					<img class="close-Icon" id="closeIcon" src="./img/close.png" mode="widthFix" />
+					<span>填写收货地址</span>
 				</div>
-			</form>
+				<form class="mui-input-group">
+					<div class="mui-input-row">
+						<label>姓名:</label>
+						<input type="text" id="name" class="mui-input-clear" placeholder="请填写您的姓名">
+					</div>
+					<div class="mui-input-row">
+						<label>微信号:</label>
+						<input type="text" id="wxAccount" class="mui-input-clear" placeholder="请填写您的微信号">
+					</div><div class="mui-input-row">
+						<label>手机号:</label>
+						<input type="text" id="phone" class="mui-input-clear" placeholder="请填写您的手机号">
+					</div>
+					<div class="mui-input-row">
+						<label>地区:</label>
+						<div class="city-data" id="showCityPicker">
+							<div class="no-data" id="placeholderCity">
+								<span>请选择地区</span>
+								<img class="right-Icon" id="city-rightIcon" src="" mode="widthFix" />
+							</div>
+							<div id="province"></div>
+							<div id="city"></div>
+						</div>
+					</div>
+					<div class="mui-input-row">
+						<label>详细地址:</label>
+						<input type="text" id="address" class="mui-input-clear" placeholder="请填写详细地址">
+					</div>
+					<div class="mui-input-row">
+						<label>备注:</label>
+						<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" onclick="handleSave()">提交</button>
+					</div>
+				</form>
+			</div>
 		</div>
 	</div>
 	<script>
+		function uploadImage() {
+		    let uploaInput = document.getElementById('uploadfile');
+			document.getElementById('uploadfile').click();
+		    // 当用户上传时触发事件
+		    uploaInput.onchange=function(){
+		    	readFile(this);
+		    }
+		    //处理图片并添加都dom中的函数
+		    let readFile=function(obj){
+		    	// 获取input里面的文件组
+		    	let fileList=obj.files;
+		    	//对文件组进行遍历,可以到控制台打印出fileList去看看
+		    	for(let i=0;i<fileList.length;i++){
+		    		var formData = new FormData();
+		    		formData.append('path', fileList[i].name)
+		    		formData.append('file', fileList[i])
+		    		let url = credentials.serverDomain+ '/open/v1/file/upload'
+		    		mui.ajax(url, {
+		    			data: formData,
+		    			processData: false,
+		    			contentType: false,
+		    			type:'post',
+		    			headers: {
+		    			  'bucket': credentials.bucket,
+		    			  'Authorization': credentials.authorization,
+		    			  'secretId': credentials.secretId,
+		    			},
+		    			success:function(res){
+		    				imgList.push(res.data.url)
+							const gallery = document.getElementById('imageGallery');  
+							imgList.forEach( item=> { // 假设data是一个包含图片URL的数组  
+								const img = document.createElement('img');  
+								img.src = item; // 假设每个图片对象都有一个url属性
+								gallery.appendChild(img); // 将图片添加到div中  
+							}); 
+		    			},
+		    			error:function(error){
+		    				//异常处理;
+		    				console.log(error);
+		    			}
+		    		});
+		    	}
+		    }
+		}
+		let h5Type = 20
+		let mpClientId = ''
+		let credentials = {
+			bucket: '',
+			Authorization: '',
+			secretId: '',
+			serverDomain: ''
+		}
+		let imgList = []
 		window.onload = function() {
 			if (getQueryParam('openId')) {
 				if(!getQueryParam('externalUserid')) {
 					mui.alert('无权限访问', '提示', '确定');
 				} else {
-					showCityLevel();
-					raffleInfo();
-					raffleRecord();
+					if (h5Type == 19) {
+						showCityLevel();
+						raffleInfo();
+						raffleRecord();
+					} else if (h5Type == 20) {
+						// 获取腾讯COS对象存储的实例对象
+						getCosObj();
+					}
 				}
 			} else {
 				// 走授权操作
@@ -576,11 +815,24 @@
 					dataType:'json',//服务器返回json格式数据
 					type:'get',//HTTP请求类型
 					success:function(res){
-						if (res.data.externalUserid) {
-							showCityLevel();
-						} else {
-							// 进行下一步企微授权
-							gerQwAuth(bId, res.data.openId);
+						h5Type = res.data.h5Type
+						if (h5Type == 19) {
+							document.getElementById('collectPage').style.display = "none"
+							document.getElementById('lotteryPage').style.display = "block"
+							if (res.data.externalUserid) {
+								showCityLevel();
+							} else {
+								// 进行下一步企微授权
+								gerQwAuth(bId, res.data.openId);
+							}
+						} else if (h5Type == 20){
+							document.getElementById('collectPage').style.display = "block"
+							document.getElementById('lotteryPage').style.display = "none"
+							mpClientId = res.data.mpClientId
+							// if (!res.data.externalUserid) {
+							// 	// 进行下一步企微授权
+							// 	gerQwAuth(bId, res.data.openId);
+							// }
 						}
 					},
 					error:function(error){
@@ -616,6 +868,76 @@
 					}
 				});
 		};
+		function getCosObj() {
+			mui.ajax('http://test.wefanbot.com:18998/scrm/v1/oss/p/getAuthorization',{
+				data:{
+				},
+				dataType:'json',//服务器返回json格式数据
+				type:'post',//HTTP请求类型
+				headers:{'Content-Type':'application/json'},
+				success:function(res){
+					credentials = res.data.info
+					// 用正则将this.credentials.serverDomain链接中的协议与当前域名的协议保持一致
+					credentials.serverDomain = credentials.serverDomain.replace(/https:|http:/g, document.location.protocol)
+					console.log('credentials2', credentials);
+				},
+				error:function(error){
+					//异常处理;
+					console.log(error);
+				}
+			});
+		};
+		// 发送祝福
+		function handleSendText() {
+			let openId = getQueryParam('openId')
+			let textareaResult = document.getElementById("textarea").value;
+			mui.ajax('http://test.wefanbot.com:18993/scrm/v1/mp-collect/p/add', {
+				data:{
+					mpClientId: mpClientId,
+					openId: openId,
+					content: textareaResult,
+					imgList: imgList,
+				},
+				dataType:'json',//服务器返回json格式数据
+				type:'post',//HTTP请求类型
+				headers:{'Content-Type':'application/json'},
+				success:function(res){
+					if (res.code == 1) {
+						mui.toast('发送成功');
+						document.getElementById('dialogText').style.display = 'none';
+					} else {
+						mui.toast(res.msg);
+					}
+				},
+				error:function(error){
+					//异常处理;
+					console.log(error);
+				}
+			});
+		};
+		// 获取用户故事收集列表
+		function findCollectList() {
+			let openId = getQueryParam('openId')
+			let textareaResult = document.getElementById("textarea").value;
+			mui.ajax('http://test.wefanbot.com:18993/scrm/v1/mp-collect/p/findCollectList', {
+				data:{
+				},
+				dataType:'json',//服务器返回json格式数据
+				type:'get',//HTTP请求类型
+				success:function(res){
+				},
+				error:function(error){
+					//异常处理;
+					console.log(error);
+				}
+			});
+		};
+		document.getElementById('sendBtn').addEventListener('click', function() {
+			document.getElementById('dialogText').style.display = 'block';
+		});
+		document.getElementById('closeText').addEventListener('click', function() {
+			document.getElementById('dialogText').style.display = 'none';
+		});
 		// 截取url中的数据
 		function getQueryParam(paramName) {
 			// 获取当前URL的查询字符串部分