|
@@ -27,20 +27,18 @@
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
- margin-top: -100px;
|
|
|
|
}
|
|
}
|
|
.btn-img {
|
|
.btn-img {
|
|
width: 290px;
|
|
width: 290px;
|
|
}
|
|
}
|
|
.rule {
|
|
.rule {
|
|
- width: 375px;
|
|
|
|
|
|
+ width: 100%;
|
|
height: 509px;
|
|
height: 509px;
|
|
padding: 65px 15px 40px;
|
|
padding: 65px 15px 40px;
|
|
background: linear-gradient( 180deg, #FF6C52 0%, #FFBA9B 100%);
|
|
background: linear-gradient( 180deg, #FF6C52 0%, #FFBA9B 100%);
|
|
- margin-top: -46px;
|
|
|
|
|
|
+ margin-top: -60px;
|
|
}
|
|
}
|
|
.rule-body {
|
|
.rule-body {
|
|
- width: 345px;
|
|
|
|
height: 404px;
|
|
height: 404px;
|
|
background: #FEE8D0;
|
|
background: #FEE8D0;
|
|
border-radius: 20px;
|
|
border-radius: 20px;
|
|
@@ -77,13 +75,17 @@
|
|
}
|
|
}
|
|
|
|
|
|
.tab-content {
|
|
.tab-content {
|
|
- font-weight: 400;
|
|
|
|
- font-size: 14px;
|
|
|
|
- color: #CB4E35;
|
|
|
|
- margin-top: 20px;
|
|
|
|
|
|
+ p {
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #CB4E35;
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.record-list {
|
|
.record-list {
|
|
- /* display: flex; */
|
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ height: 300px;
|
|
|
|
+ margin-top: 18px;
|
|
}
|
|
}
|
|
.record-item {
|
|
.record-item {
|
|
width: 315px;
|
|
width: 315px;
|
|
@@ -93,7 +95,7 @@
|
|
padding: 9px 10px 8px;
|
|
padding: 9px 10px 8px;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
- margin-bottom: 10px;
|
|
|
|
|
|
+ margin: 0 auto 10px;
|
|
}
|
|
}
|
|
.prize-img {
|
|
.prize-img {
|
|
width: 55px;
|
|
width: 55px;
|
|
@@ -163,6 +165,7 @@
|
|
color: #222222;
|
|
color: #222222;
|
|
text-align: right;
|
|
text-align: right;
|
|
padding: 10px 0;
|
|
padding: 10px 0;
|
|
|
|
+ padding-right: 30px !important;
|
|
}
|
|
}
|
|
.mui-input-row label {
|
|
.mui-input-row label {
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
@@ -196,7 +199,7 @@
|
|
float: right;
|
|
float: right;
|
|
width: 65%;
|
|
width: 65%;
|
|
height: 40px;
|
|
height: 40px;
|
|
- padding: 10px;
|
|
|
|
|
|
+ padding: 10px 30px 10px 10px;
|
|
display: flex;
|
|
display: flex;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
@@ -243,46 +246,263 @@
|
|
transition: opacity 0.5s ease; /* 可选:添加透明度过渡效果 */
|
|
transition: opacity 0.5s ease; /* 可选:添加透明度过渡效果 */
|
|
display: none;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
+ .prize-content {
|
|
|
|
+ width: fit-content;
|
|
|
|
+ margin: -96% auto 0
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ #grid-container {
|
|
|
|
+ display: grid;
|
|
|
|
+ grid-template-columns: repeat(3, 1fr); /* 创建3列,每列等宽 */
|
|
|
|
+ gap: 10px; /* 格子之间的间距 */
|
|
|
|
+ padding: 10px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .grid-item {
|
|
|
|
+ width: 78px; /* 使图片宽度适应格子 */
|
|
|
|
+ height: 78px; /* 保持图片原始宽高比 */
|
|
|
|
+ position: relative; /* 为了让标题能够绝对定位 */
|
|
|
|
+ overflow: hidden; /* 确保图片不会溢出格子 */
|
|
|
|
+ background-image: url(./img/prize-bg.png);
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ background-size: cover;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ padding-top: 8px;
|
|
|
|
+ transition: transform 0.3s, opacity 0.3s; /* 平滑过渡效果 */
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .grid-item img {
|
|
|
|
+ width: 48px; /* 使图片宽度适应格子 */
|
|
|
|
+ height: 48px; /* 保持图片原始宽高比 */
|
|
|
|
+ display: block; /* 移除图片下方的默认空间 */
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .grid-item-title {
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 10px;
|
|
|
|
+ color: #CC745A;
|
|
|
|
+ width: 70px;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ /* ... 其他样式保持不变 ... */
|
|
|
|
+
|
|
|
|
+ .rotating {
|
|
|
|
+ animation: rotateGrid 3s infinite linear;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ @keyframes rotateGrid {
|
|
|
|
+ from {
|
|
|
|
+ transform: rotate(0deg);
|
|
|
|
+ }
|
|
|
|
+ to {
|
|
|
|
+ transform: rotate(360deg);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .actives {
|
|
|
|
+ border: 2px solid #df2727;
|
|
|
|
+ border-radius: 15px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .lottery-tip {
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ }
|
|
|
|
+ .dialog {
|
|
|
|
+ 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%;
|
|
|
|
+ z-index: 1001; /* 确保遮罩层在顶部 */
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+ .dialog-tip {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100px;
|
|
|
|
+ }
|
|
|
|
+ .dialog-bg {
|
|
|
|
+ width: 295px;
|
|
|
|
+ height: 251px;
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
|
|
+ .prize-msg {
|
|
|
|
+ position: absolute;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ .money-title {
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ color: #FF4E4E;
|
|
|
|
+ padding-top: 90px;
|
|
|
|
+ padding-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
+ .money-content {
|
|
|
|
+ margin-bottom: 30px;
|
|
|
|
+ height: 60px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+ .prize-money {
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ font-size: 60px;
|
|
|
|
+ color: #FF4E4E;
|
|
|
|
+ }
|
|
|
|
+ .prize-unit {
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ color: #FF4E4E;
|
|
|
|
+ padding-left: 10px;
|
|
|
|
+ padding-top: 28px;
|
|
|
|
+ }
|
|
|
|
+ .dialog-btn {
|
|
|
|
+ width: 235px;
|
|
|
|
+ height: 52px;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
+ .money-tip {
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #999999;
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
+ }
|
|
|
|
+ .goods-img {
|
|
|
|
+ width: 100px;
|
|
|
|
+ height: 100px;
|
|
|
|
+ margin: 70px 0 10px;
|
|
|
|
+ }
|
|
|
|
+ .goods-name {
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ color: #222222;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ }
|
|
|
|
+ .dialog-close {
|
|
|
|
+ width: 30px;
|
|
|
|
+ height: 30px;
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+ }
|
|
|
|
+ .mui-poppicker {
|
|
|
|
+ z-index: 1002 !important;
|
|
|
|
+ }
|
|
|
|
+ .event-notice {
|
|
|
|
+ width: 30px;
|
|
|
|
+ height: 84px;
|
|
|
|
+ background: rgba(255,255,255,0.5);
|
|
|
|
+ border-radius: 15px 0px 0px 15px;
|
|
|
|
+ border: 1px solid #FFFFFF;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #FF4E4E;
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 0;
|
|
|
|
+ top: 20%;
|
|
|
|
+ writing-mode: vertical-rl;
|
|
|
|
+ text-align: center;
|
|
|
|
+ padding-right: 4px;
|
|
|
|
+ }
|
|
|
|
+ .notice-body {
|
|
|
|
+ width: 80%;
|
|
|
|
+ z-index: 1001;
|
|
|
|
+ height: 500px;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ background: #FFF;
|
|
|
|
+ margin: 40px;
|
|
|
|
+ border-radius: 20px;
|
|
|
|
+ padding: 20px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ border: 4px solid #eb845a;
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|
|
<body>
|
|
<body>
|
|
<img class="bg-img" id="bgImg" src="./img/lottery-bg.png" mode="widthFix" />
|
|
<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">
|
|
<div class="btn">
|
|
- <img class="btn-img" id="btnImg" src="./img/btn.png" mode="widthFix" />
|
|
|
|
|
|
+ <img class="btn-img" id="lottery-button" src="./img/btn.png" mode="widthFix" />
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="lottery-tip" id="lotteryId"></div>
|
|
<div class="rule">
|
|
<div class="rule">
|
|
<div class="rule-body">
|
|
<div class="rule-body">
|
|
<div class="tabs">
|
|
<div class="tabs">
|
|
<button class="tab-link active" onclick="changeTab(event, 'tab1')">活动信息</button>
|
|
<button class="tab-link active" onclick="changeTab(event, 'tab1')">活动信息</button>
|
|
<button class="tab-link" onclick="changeTab(event, 'tab2')">抽奖记录</button>
|
|
<button class="tab-link" onclick="changeTab(event, 'tab2')">抽奖记录</button>
|
|
</div>
|
|
</div>
|
|
- <div id="tab1" class="tab-content">
|
|
|
|
- <div>活动规则:</div>
|
|
|
|
- <div>1.参与宝骏/车主认证成功的小伙伴才能参与抽奖,转发无效。</div>
|
|
|
|
- <div>2.请填写参与认证时填写的正在使用/提车手机号,其他手机号无效</div>
|
|
|
|
- <div>3.实物礼品将会在 15 个工作日内发货,敬请期待</div>
|
|
|
|
|
|
+ <div id="tab1" class="tab-content">
|
|
</div>
|
|
</div>
|
|
<div id="tab2" class="tab-content" style="display:none;">
|
|
<div id="tab2" class="tab-content" style="display:none;">
|
|
- <div class="record-list">
|
|
|
|
- <div class="record-item">
|
|
|
|
- <img class="prize-img" src="./img/lottery-bg.png" mode="widthFix" />
|
|
|
|
- <div>
|
|
|
|
- <div class="prize-name">奖品名称</div>
|
|
|
|
- <div class="prize-time">2020-01-01 10:22:01</div>
|
|
|
|
- </div>
|
|
|
|
- <button id="toggleButton" class="get-btn">领取</button>
|
|
|
|
- </div>
|
|
|
|
- <div class="record-item">
|
|
|
|
- <img class="prize-img" src="./img/lottery-bg.png" mode="widthFix" />
|
|
|
|
- <div>
|
|
|
|
- <div class="prize-name">奖品名称</div>
|
|
|
|
- <div class="prize-time">2020-01-01 10:22:01</div>
|
|
|
|
- </div>
|
|
|
|
- <button class="get-btn" onclick="getPrize">领取</button>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="record-list" id="recordList">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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="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>
|
|
|
|
+ </div>
|
|
<div id="overlay" class="overlay">
|
|
<div id="overlay" class="overlay">
|
|
<div id="popForm" class="pop-form">
|
|
<div id="popForm" class="pop-form">
|
|
<div class="pop-title">
|
|
<div class="pop-title">
|
|
@@ -292,11 +512,11 @@
|
|
<form class="mui-input-group">
|
|
<form class="mui-input-group">
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
<label>姓名:</label>
|
|
<label>姓名:</label>
|
|
- <input type="text" id="salesMan" class="mui-input-clear" placeholder="请填写您的姓名">
|
|
|
|
|
|
+ <input type="text" id="name" class="mui-input-clear" placeholder="请填写您的姓名">
|
|
</div>
|
|
</div>
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
<label>微信号:</label>
|
|
<label>微信号:</label>
|
|
- <input type="text" id="wechat" class="mui-input-clear" placeholder="请填写您的微信号">
|
|
|
|
|
|
+ <input type="text" id="wxAccount" class="mui-input-clear" placeholder="请填写您的微信号">
|
|
</div><div class="mui-input-row">
|
|
</div><div class="mui-input-row">
|
|
<label>手机号:</label>
|
|
<label>手机号:</label>
|
|
<input type="text" id="phone" class="mui-input-clear" placeholder="请填写您的手机号">
|
|
<input type="text" id="phone" class="mui-input-clear" placeholder="请填写您的手机号">
|
|
@@ -314,11 +534,11 @@
|
|
</div>
|
|
</div>
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
<label>详细地址:</label>
|
|
<label>详细地址:</label>
|
|
- <input type="text" id="city" class="mui-input-clear" placeholder="请填写详细地址">
|
|
|
|
|
|
+ <input type="text" id="address" class="mui-input-clear" placeholder="请填写详细地址">
|
|
</div>
|
|
</div>
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
<label>备注:</label>
|
|
<label>备注:</label>
|
|
- <input type="text" id="notes" class="mui-input-clear" placeholder="请填写详细地址">
|
|
|
|
|
|
+ <input type="text" id="remark" class="mui-input-clear" placeholder="请填写详细地址">
|
|
</div>
|
|
</div>
|
|
<div class="mui-button-row">
|
|
<div class="mui-button-row">
|
|
<button type="button" id="salesMan" class="mui-btn mui-btn-primary save-btn" id="submit" onclick="handleSave()">提交</button>
|
|
<button type="button" id="salesMan" class="mui-btn mui-btn-primary save-btn" id="submit" onclick="handleSave()">提交</button>
|
|
@@ -328,9 +548,84 @@
|
|
</div>
|
|
</div>
|
|
<script>
|
|
<script>
|
|
window.onload = function() {
|
|
window.onload = function() {
|
|
- showCityLevel();
|
|
|
|
|
|
+ if (getQueryParam('openId')) {
|
|
|
|
+ if(!getQueryParam('externalUserid')) {
|
|
|
|
+ mui.alert('无权限访问', '提示', '确定');
|
|
|
|
+ } else {
|
|
|
|
+ showCityLevel();
|
|
|
|
+ raffleInfo();
|
|
|
|
+ raffleRecord();
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ // 走授权操作
|
|
|
|
+ getAuth();
|
|
|
|
+ }
|
|
document.getElementById("city-rightIcon").src = 'https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/1000/1720163006057/icon_jiantou2%402x.png';
|
|
document.getElementById("city-rightIcon").src = 'https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/1000/1720163006057/icon_jiantou2%402x.png';
|
|
};
|
|
};
|
|
|
|
+ // 公众号授权,获取code
|
|
|
|
+ function getAuth() {
|
|
|
|
+ // 获取url上的code
|
|
|
|
+ let code = getQueryParam('code')
|
|
|
|
+ if (code) {
|
|
|
|
+ let bId = getQueryParam('bId')
|
|
|
|
+ mui.ajax('http://test.wefanbot.com:18993/scrm/v1/mp-client/p/getInfoByh5Code',{
|
|
|
|
+ data:{
|
|
|
|
+ code: code,
|
|
|
|
+ bId: bId,
|
|
|
|
+ },
|
|
|
|
+ dataType:'json',//服务器返回json格式数据
|
|
|
|
+ type:'get',//HTTP请求类型
|
|
|
|
+ success:function(res){
|
|
|
|
+ if (res.data.externalUserid) {
|
|
|
|
+ showCityLevel();
|
|
|
|
+ } else {
|
|
|
|
+ // 进行下一步企微授权
|
|
|
|
+ gerQwAuth(bId, res.data.openId);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ error:function(error){
|
|
|
|
+ //异常处理;
|
|
|
|
+ console.log(error);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ let redirect_uri = window.location.href
|
|
|
|
+ // code 不存在,走微信网页授权逻辑
|
|
|
|
+ let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appId=wx99ec0d0828a4d2d3&redirect_uri=${redirect_uri}&scope=snsapi_userinfo&state=STATE#wechat_redirect`
|
|
|
|
+ window.location.replace(url)
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+ // 企微授权
|
|
|
|
+ function gerQwAuth (bId, openId) {
|
|
|
|
+ let link = window.location.href
|
|
|
|
+ mui.ajax('http://test.wefanbot.com:18993/p/insuite/p/getOAUrl',{
|
|
|
|
+ data:{
|
|
|
|
+ bId: bId,
|
|
|
|
+ openId: openId,
|
|
|
|
+ },
|
|
|
|
+ dataType:'json',//服务器返回json格式数据
|
|
|
|
+ type:'get',//HTTP请求类型
|
|
|
|
+ success:function(res){
|
|
|
|
+ if (res.data) {
|
|
|
|
+ window.location.replace(res.data)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ error:function(error){
|
|
|
|
+ //异常处理;
|
|
|
|
+ console.log(error);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
+ // 截取url中的数据
|
|
|
|
+ function getQueryParam(paramName) {
|
|
|
|
+ // 获取当前URL的查询字符串部分
|
|
|
|
+ const queryString = window.location.search;
|
|
|
|
+ // 创建一个URLSearchParams对象
|
|
|
|
+ const urlParams = new URLSearchParams(queryString);
|
|
|
|
+ // 返回指定参数的值,如果不存在则返回null
|
|
|
|
+ return urlParams.get(paramName);
|
|
|
|
+ };
|
|
|
|
+ // 城市数据
|
|
function showCityLevel() {
|
|
function showCityLevel() {
|
|
var picker = new mui.PopPicker({
|
|
var picker = new mui.PopPicker({
|
|
layer: 2,
|
|
layer: 2,
|
|
@@ -364,6 +659,196 @@
|
|
})
|
|
})
|
|
});
|
|
});
|
|
};
|
|
};
|
|
|
|
+ let lotteryStatus = '' // 抽奖活动状态
|
|
|
|
+ let gridList = []; // 用于存储所有格子数据
|
|
|
|
+ let gridItems = []; // 用于存储所有格子
|
|
|
|
+ let currentIndex = 0; // 当前活动的格子索引
|
|
|
|
+ let stopRotation = false; // 控制是否停止轮询的变量
|
|
|
|
+ let remainingTimes = 0
|
|
|
|
+ // 获取抽奖信息
|
|
|
|
+ function raffleInfo() {
|
|
|
|
+ let openId = getQueryParam('openId')
|
|
|
|
+ let raffleId = getQueryParam('bId')
|
|
|
|
+ mui.ajax('http://test.wefanbot.com:18993/scrm/v1/wxcp-raffle/p/raffleInfoByOpenId',{
|
|
|
|
+ data:{
|
|
|
|
+ openId: openId,
|
|
|
|
+ raffleId: raffleId,
|
|
|
|
+ },
|
|
|
|
+ dataType:'json',//服务器返回json格式数据
|
|
|
|
+ type:'get',//HTTP请求类型
|
|
|
|
+ success:function(res){
|
|
|
|
+ lotteryStatus = res.data.status
|
|
|
|
+ gridList = res.data.prizes
|
|
|
|
+ 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}次机会`
|
|
|
|
+ const container = document.getElementById('grid-container');
|
|
|
|
+ const buttons = document.getElementById('lottery-button');
|
|
|
|
+ container.innerHTML = '';
|
|
|
|
+ for (let i = 0; i < 9; i++) {
|
|
|
|
+ // 创建一个新的div元素作为格子
|
|
|
|
+ const gridItem = document.createElement('div');
|
|
|
|
+ gridItem.classList.add('grid-item');
|
|
|
|
+
|
|
|
|
+ // 创建图片元素并添加到格子中
|
|
|
|
+ const img = document.createElement('img');
|
|
|
|
+ img.src = res.data.prizes[i].img; // 设置图片源
|
|
|
|
+ img.alt = `图片 ${i + 1}`; // 设置图片的替代文本
|
|
|
|
+ gridItem.appendChild(img);
|
|
|
|
+
|
|
|
|
+ // 创建标题元素并添加到格子中
|
|
|
|
+ const title = document.createElement('div');
|
|
|
|
+ title.classList.add('grid-item-title');
|
|
|
|
+ title.textContent = res.data.prizes[i].name; // 设置标题文本
|
|
|
|
+ gridItem.appendChild(title);
|
|
|
|
+
|
|
|
|
+ // 将格子添加到容器中
|
|
|
|
+ container.appendChild(gridItem);
|
|
|
|
+ }
|
|
|
|
+ gridItems = []
|
|
|
|
+ container.querySelectorAll('.grid-item').forEach(item => {
|
|
|
|
+ gridItems.push(item);
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ buttons.addEventListener('click', function() {
|
|
|
|
+ handleLottery();
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ error:function(error){
|
|
|
|
+ //异常处理;
|
|
|
|
+ console.log(error);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
+ // 点击抽奖
|
|
|
|
+ function handleLottery() {
|
|
|
|
+ if (!remainingTimes) {
|
|
|
|
+ mui.toast('抽奖次数已用完');
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ const gridContainer = document.getElementById('grid-container');
|
|
|
|
+ if (lotteryStatus === -1) {
|
|
|
|
+ mui.toast('活动已结束');
|
|
|
|
+ } else if (lotteryStatus === 0) {
|
|
|
|
+ mui.toast('活动未开始');
|
|
|
|
+ } else if (lotteryStatus === 1) {
|
|
|
|
+ stopRotation = false
|
|
|
|
+ rotateActive();
|
|
|
|
+ let externalUserid = getQueryParam('externalUserid')
|
|
|
|
+ let openId = getQueryParam('openId')
|
|
|
|
+ let raffleId = getQueryParam('bId')
|
|
|
|
+ mui.ajax('http://test.wefanbot.com:18993/scrm/v1/wxcp-raffle/p/lottery',{
|
|
|
|
+ data:{
|
|
|
|
+ externalUserid: externalUserid,
|
|
|
|
+ openId: openId,
|
|
|
|
+ raffleId: raffleId,
|
|
|
|
+ },
|
|
|
|
+ dataType:'json',//服务器返回json格式数据
|
|
|
|
+ type:'get',//HTTP请求类型
|
|
|
|
+ success:function(res){
|
|
|
|
+ if (res.data) {
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ // 停止轮询
|
|
|
|
+ stopRotation = true;
|
|
|
|
+
|
|
|
|
+ // 立即将 active 类应用到目标格子上
|
|
|
|
+ gridItems.forEach(item => item.classList.remove('actives'));
|
|
|
|
+ gridList.forEach((item, index) => {
|
|
|
|
+ if (res.data.id === item.id) {
|
|
|
|
+ gridItems[index].classList.add('actives');
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ if (res.data.acceptType === 0 || res.data.acceptType === 1) {
|
|
|
|
+ document.getElementById('dialog').style.display = 'flex';
|
|
|
|
+ document.getElementById('prize-msg-goods').style.display = 'block';
|
|
|
|
+ document.getElementById('prize-msg-money').style.display = 'none';
|
|
|
|
+ document.getElementById("goods-img").src = res.data.img
|
|
|
|
+ document.getElementById("goods-name").innerHTML = res.data.name
|
|
|
|
+ } else if (res.data.acceptType === 2) {
|
|
|
|
+ document.getElementById('dialog').style.display = 'flex';
|
|
|
|
+ document.getElementById('prize-msg-goods').style.display = 'none';
|
|
|
|
+ document.getElementById('prize-msg-money').style.display = 'block';
|
|
|
|
+ document.getElementById("prize-money").innerHTML = res.data.money
|
|
|
|
+ }
|
|
|
|
+ raffleInfo()
|
|
|
|
+ raffleRecord()
|
|
|
|
+ currentIndex = 0
|
|
|
|
+ }, 2000); // 假设接口调用需要2秒
|
|
|
|
+ } else {
|
|
|
|
+ stopRotation = true;
|
|
|
|
+ gridItems.forEach(item => item.classList.remove('actives'));
|
|
|
|
+ currentIndex = 0
|
|
|
|
+ mui.toast(res.msg);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ error:function(error){
|
|
|
|
+ //异常处理;
|
|
|
|
+ console.log(error);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+ // 轮询动画函数
|
|
|
|
+ function rotateActive() {
|
|
|
|
+ // 移除上一个格子的 active 类
|
|
|
|
+ if (gridItems[currentIndex]) {
|
|
|
|
+ gridItems[currentIndex].classList.remove('actives');
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 更新当前索引,循环到第一个格子如果超出范围
|
|
|
|
+ currentIndex = (currentIndex + 1) % gridItems.length;
|
|
|
|
+
|
|
|
|
+ // 应用 active 类到新的格子
|
|
|
|
+ gridItems[currentIndex].classList.add('actives');
|
|
|
|
+
|
|
|
|
+ // 递归调用以继续动画,直到接口调用完成
|
|
|
|
+ if (!stopRotation) {
|
|
|
|
+ setTimeout(rotateActive, 100); // 假设每个格子显示 500 毫秒
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+ // 获取抽奖记录
|
|
|
|
+ function raffleRecord() {
|
|
|
|
+ let openId = getQueryParam('openId')
|
|
|
|
+ let raffleId = getQueryParam('bId')
|
|
|
|
+ mui.ajax('http://test.wefanbot.com:18993/scrm/v1/wxcp-raffle/p/raffleRecord',{
|
|
|
|
+ data:{
|
|
|
|
+ openId: openId,
|
|
|
|
+ raffleId: raffleId,
|
|
|
|
+ page: 1,
|
|
|
|
+ pageCount: 1000,
|
|
|
|
+ },
|
|
|
|
+ dataType:'json',//服务器返回json格式数据
|
|
|
|
+ type:'post',//HTTP请求类型
|
|
|
|
+ headers:{'Content-Type':'application/json'},
|
|
|
|
+ success:function(res){
|
|
|
|
+ const recordList = document.getElementById('recordList');
|
|
|
|
+ recordList.innerHTML = ''
|
|
|
|
+ res.data.records.forEach(record => {
|
|
|
|
+ recordList.innerHTML += `
|
|
|
|
+ <div class="record-item">
|
|
|
|
+ <img class="prize-img" src="${record.img}" mode="widthFix" />
|
|
|
|
+ <div>
|
|
|
|
+ <div class="prize-name">${record.name}</div>
|
|
|
|
+ <div class="prize-time">${timeFormat(record.raffleTime)}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <button id="toggleButton" ${record.status ? 'disabled' : ''} class="get-btn" onclick="handleOpenForm(${record.id})">${record.status ? '已领取' : '领取'}</button>
|
|
|
|
+ </div>`
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ error:function(error){
|
|
|
|
+ //异常处理;
|
|
|
|
+ console.log(error);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
+ let recordId = ''
|
|
|
|
+ function handleOpenForm(id) {
|
|
|
|
+ recordId = id
|
|
|
|
+ document.getElementById('overlay').style.display = 'flex';
|
|
|
|
+ var div = document.getElementById('popForm');
|
|
|
|
+ div.classList.add('show');
|
|
|
|
+ };
|
|
|
|
+ // 切换tab
|
|
function changeTab(evt, tabName) {
|
|
function changeTab(evt, tabName) {
|
|
// 获取所有tab链接,并移除激活类
|
|
// 获取所有tab链接,并移除激活类
|
|
var i, tabcontent, tablinks;
|
|
var i, tabcontent, tablinks;
|
|
@@ -380,16 +865,111 @@
|
|
document.getElementById(tabName).style.display = "block";
|
|
document.getElementById(tabName).style.display = "block";
|
|
evt.currentTarget.className += " active";
|
|
evt.currentTarget.className += " active";
|
|
};
|
|
};
|
|
- document.getElementById('toggleButton').addEventListener('click', function() {
|
|
|
|
- document.getElementById('overlay').style.display = 'flex';
|
|
|
|
- var div = document.getElementById('popForm');
|
|
|
|
- div.classList.add('show');
|
|
|
|
- });
|
|
|
|
|
|
+ function handleSave() {
|
|
|
|
+ let nameResult = document.getElementById('name').value;
|
|
|
|
+ let wxAccountResult = document.getElementById('wxAccount').value
|
|
|
|
+ let phone = document.getElementById("phone").value;
|
|
|
|
+ let provinceResult = document.getElementById('province');
|
|
|
|
+ let cityResult = document.getElementById('city');
|
|
|
|
+ let addressResult = document.getElementById("address").value;
|
|
|
|
+ let remarkResult = document.getElementById("remark").value;
|
|
|
|
+ if (!nameResult){
|
|
|
|
+ mui.toast("请填写姓名");
|
|
|
|
+ } else if (!phone){
|
|
|
|
+ mui.toast("请输入手机号");
|
|
|
|
+ } else if (!provinceResult.innerText){
|
|
|
|
+ mui.toast('请选择城市');
|
|
|
|
+ } else {
|
|
|
|
+ mui.ajax('http://test.wefanbot.com:18993/scrm/v1/wxcp-raffle/p/raffleForm',{
|
|
|
|
+ data:{
|
|
|
|
+ name: nameResult,
|
|
|
|
+ wxAccount: wxAccountResult,
|
|
|
|
+ phone: phone,
|
|
|
|
+ province: provinceResult.innerText || '',
|
|
|
|
+ city: cityResult.innerText || '',
|
|
|
|
+ address: addressResult,
|
|
|
|
+ remark: remarkResult,
|
|
|
|
+ recordId: recordId
|
|
|
|
+ },
|
|
|
|
+ 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('overlay').style.display = 'none';
|
|
|
|
+ var div = document.getElementById('popForm');
|
|
|
|
+ div.classList.remove('show');
|
|
|
|
+ raffleRecord()
|
|
|
|
+ } else {
|
|
|
|
+ mui.toast(res.msg);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ error:function(error){
|
|
|
|
+ //异常处理;
|
|
|
|
+ console.log(error);
|
|
|
|
+ mui.toast(error);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ };
|
|
document.getElementById('closeIcon').addEventListener('click', function() {
|
|
document.getElementById('closeIcon').addEventListener('click', function() {
|
|
document.getElementById('overlay').style.display = 'none';
|
|
document.getElementById('overlay').style.display = 'none';
|
|
var div = document.getElementById('popForm');
|
|
var div = document.getElementById('popForm');
|
|
div.classList.remove('show');
|
|
div.classList.remove('show');
|
|
});
|
|
});
|
|
|
|
+ if (document.getElementById('dialog-btn-money')) {
|
|
|
|
+ document.getElementById('dialog-btn-money').addEventListener('click', function() {
|
|
|
|
+ document.getElementById('dialog').style.display = 'none';
|
|
|
|
+ gridItems[currentIndex].classList.remove('actives');
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ if (document.getElementById('dialog-btn-goods')) {
|
|
|
|
+ document.getElementById('dialog-btn-goods').addEventListener('click', function() {
|
|
|
|
+ document.getElementById('dialog').style.display = 'none';
|
|
|
|
+ gridItems[currentIndex].classList.remove('actives');
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ document.getElementById('dialog-close').addEventListener('click', function() {
|
|
|
|
+ document.getElementById('dialog').style.display = 'none';
|
|
|
|
+ gridItems[currentIndex].classList.remove('actives');
|
|
|
|
+ });
|
|
|
|
+ document.getElementById('eventNotice').addEventListener('click', function() {
|
|
|
|
+ document.getElementById('notice').style.display = 'block';
|
|
|
|
+ });
|
|
|
|
+ document.getElementById('notice').addEventListener('click', function() {
|
|
|
|
+ var div = document.getElementById('notice-body');
|
|
|
|
+ // 检查点击事件的目标是否不是div本身或其子元素
|
|
|
|
+ if (!div.contains(event.target)) {
|
|
|
|
+ document.getElementById('notice').style.display = 'none';
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ function timeFormat (time, format = 'yyyy-MM-dd hh:mm:ss') {
|
|
|
|
+ if (time === undefined || time === '' || time === null) {
|
|
|
|
+ return '/'
|
|
|
|
+ } else {
|
|
|
|
+ const date = new Date(time)
|
|
|
|
+ const o = {
|
|
|
|
+ 'M+': date.getMonth() + 1,
|
|
|
|
+ 'd+': date.getDate(),
|
|
|
|
+ 'h+': date.getHours(),
|
|
|
|
+ 'm+': date.getMinutes(),
|
|
|
|
+ 's+': date.getSeconds(),
|
|
|
|
+ 'q+': Math.floor((date.getMonth() + 3) / 3),
|
|
|
|
+ 'S': date.getMilliseconds()
|
|
|
|
+ }
|
|
|
|
+ if (/(y+)/.test(format)) {
|
|
|
|
+ format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
|
|
|
|
+ }
|
|
|
|
+ for (let k in o) {
|
|
|
|
+ if (new RegExp('(' + k + ')').test(format)) {
|
|
|
|
+ format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return format
|
|
|
|
+ }
|
|
|
|
+ }
|
|
</script>
|
|
</script>
|
|
</body>
|
|
</body>
|
|
</html>
|
|
</html>
|