Trang chủ Khám phá Trợ giúp
Đăng nhập
wfg
/
lottery
2
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu khéo về 0 Wiki
Browse Source

修复bug

duanshenglang 7 tháng trước cách đây
mục cha
1daec8c2ae
commit
cc2dc70d35
2 tập tin đã thay đổi với 1125 bổ sung và 620 xóa
View chưa được định nghĩa Hiển thị tình trạng sai khác
  1. 3 620
      lottery/index.html
  2. 1122 0
      lottery/lottery.html

+ 3 - 620
lottery/index.html
Xem Tập Tin 

@@ -423,165 +423,6 @@
 
 
 
 <body>
 
 <body>
 
 	<div id="box">
 
 	<div id="box">
 
-		<div v-if="h5Type == 19 || h5Type == 30">
 
-			<!-- 二维码 -->
 
-			<div class="qrcode" v-if="qrCodeData.qrCode || qrCodeData.msg">
 
-				<img class="qrcode-img" :src="qrCodeData.qrCode" />
 
-				<div class="qrcode-msg">{{qrCodeData.msg}}</div>
 
-			</div>
 
-			<div v-else>
 
-				<div class="lotteryPage">
 
-					<div class="event_notice" @click="handleRule">
 
-						<span>活动须知</span>
 
-					</div>
 
-					<div class="prize_content">
 
-						<div :class="['prize_item', { actives: isSpinning && index === currentIndex }]"
 
-							v-for="(item, index) in prizesList" :key="index">
 
-							<img class="prize_img" :src="item.img"></img>
 
-							<div>{{item.name}}</div>
 
-						</div>
 
-					</div>
 
-					<div class="lottery_btn">
 
-						<img class="btn_img" src="./img/btn.png" @click="handleLottery"></img>
 
-						<div class="lottery_tip">已抽奖{{useNum}}次，还剩{{remainNum}}次机会</div>
 
-					</div>
 
-				</div>
 
-				<div class="rule">
 
-					<div class="rule_body">
 
-						<div class="tabs">
 
-							<Button class="tab_link" :class="{ 'active': activeName === 'tab1' }"
 
-								@click="changeTab('tab1')">活动信息</Button>
 
-							<Button class="tab_link" :class="{ 'active': activeName === 'tab2' }"
 
-								@click="changeTab('tab2')">抽奖记录</Button>
 
-						</div>
 
-						<div v-if="activeName === 'tab1'" class="tab_content record_list" v-html="activeMsg"></div>
 
-						<div v-if="activeName === 'tab2'" class="record_list">
 
-							<div class="record_item" v-for="(item, index) in lotteryRecords" :key="index">
 
-								<img class="record_img" :src="item.img" mode="widthFix" />
 
-								<div>
 
-									<div class="prize_name">{{item.name}}</div>
 
-									<div class="prize_time">{{timeFormat(item.raffleTime)}}</div>
 
-								</div>
 
-								<el-button :disabled="item.status == -1 || item.status == 1" class="get_btn"
 
-									@click="handleOpenForm(item.id)">{{item.status == 1 ? '已领取' : (item.status == -1 ?
 
-									'审核中'
 
-									: '领取')}}</el-button>
 
-							</div>
 
-						</div>
 
-					</div>
 
-				</div>
 
-			</div>
 
-			<!-- 奖励弹窗 -->
 
-			<div class="prize_dialog" v-if="showPrizeDialog">
 
-				<div 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" v-if="prizeData.acceptType === 2">
 
-						<div class="money-title">微信红包</div>
 
-						<div class="money-content">
 
-							<span class="prize-money">{{prizeData.money}}</span>
 
-							<span class="prize-unit">元</span>
 
-						</div>
 
-						<img class="dialog-btn" src="./img/dialog-btn.png" @click="showPrizeDialog = false" />
 
-						<div class="money-tip">红包到账会有延迟情况，请以实际为准</div>
 
-					</div>
 
-					<div class="prize-msg" v-if="prizeData.acceptType === 0 || prizeData.acceptType === 1">
 
-						<img class="goods-img" :src="prizeData.img" />
 
-						<div class="goods-name">{{prizeData.name}}</div>
 
-						<img class="dialog-btn" src="./img/dialog-btn.png" @click="showPrizeDialog = false" />
 
-					</div>
 
-					<img class="dialog-close" src="./img/dialog-close.png" @click="showPrizeDialog = false" />
 
-				</div>
 
-			</div>
 
-			<!-- 活动须知弹框 -->
 
-			<el-dialog title="活动须知" :visible.sync="showRuleDialog">
 
-				<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>
 
-			</el-dialog>
 
-			<el-dialog title="收货地址" :visible.sync="showDialog">
 
-				<el-form :model="form" class="prize_form">
 
-					<el-form-item label="姓名：">
 
-						<el-input v-model="form.name" autocomplete="off"></el-input>
 
-					</el-form-item>
 
-					<el-form-item label="微信号：">
 
-						<el-input v-model="form.wxAccount" autocomplete="off"></el-input>
 
-					</el-form-item>
 
-					<el-form-item label="手机号：">
 
-						<el-input v-model="form.phone" autocomplete="off"></el-input>
 
-					</el-form-item>
 
-					<el-form-item label="地区：">
 
-						<el-cascader v-model="cityData" :options="transformedData" @change="handleChangeCity">
 
-						</el-cascader>
 
-					</el-form-item>
 
-					<el-form-item label="详细地址：">
 
-						<el-input v-model="form.address" autocomplete="off"></el-input>
 
-					</el-form-item>
 
-					<el-form-item label="备注：">
 
-						<el-input v-model="form.remark" type="textarea" autocomplete="off"></el-input>
 
-					</el-form-item>
 
-				</el-form>
 
-				<div slot="footer" class="dialog-footer">
 
-					<el-button type="primary" @click="handleSave">确 定</el-button>
 
-				</div>
 
-			</el-dialog>
 
-			<el-dialog :title="dialogTitle" :visible.sync="showTipDialog" :show-close="false"
 
-				:close-on-click-modal="false">
 
-				<el-form :model="getInfoForm" class="prize_form" label-position="top">
 
-					<div v-if="preFormType">
 
-						<el-form-item label="手机号：">
 
-							<el-input v-model="getInfoForm.phone" autocomplete="off" maxlength="11"
 
-								oninput="value=value.replace(/[^\d]/g,'')"
 
-								@blur="$event => {getInfoForm.phone = Number($event.target.value) || '';}"></el-input>
 
-						</el-form-item>
 
-						<el-form-item label="地址：">
 
-							<el-cascader v-model="cityData" :options="transformedData" @change="handleInfoCity">
 
-							</el-cascader>
 
-						</el-form-item>
 
-						<el-form-item label="意向车型：">
 
-							<el-select v-model="getInfoForm.intenModel" placeholder="请选择">
 
-								<el-option v-for="item in allCarList" :key="item" :label="item" :value="item">
 
-								</el-option>
 
-							</el-select>
 
-						</el-form-item>
 
-					</div>
 
-					<div v-else>
 
-						<el-form-item label="确认：">
 
-							<el-radio-group v-model="getInfoForm.buyCar">
 
-								<el-radio :label="1">是</el-radio>
 
-								<el-radio :label="0">否</el-radio>
 
-							</el-radio-group>
 
-						</el-form-item>
 
-						<el-form-item label="已购车型：" v-if="getInfoForm.buyCar">
 
-							<el-select v-model="getInfoForm.car" placeholder="请选择">
 
-								<el-option v-for="item in allCarList" :key="item" :label="item" :value="item">
 
-								</el-option>
 
-							</el-select>
 
-						</el-form-item>
 
-					</div>
 
-				</el-form>
 
-				<div slot="footer" class="dialog-footer">
 
-					<el-button type="primary" @click="handleSaveCar">确 定</el-button>
 
-				</div>
 
-			</el-dialog>
 
-			<el-alert v-if="showError" class="alert_dialog" :title="errorMsg" :closable="false" type="error" show-icon>
 
-			</el-alert>
 
-		</div>
 
 	</div>
 
 	</div>
 
 	<script>
 
 	<script>
 
 		new Vue({
 
 		new Vue({
 
@@ -591,60 +432,7 @@
 
 					env: '',
 
 					env: '',
 
 					httpUrl: '',
 
 					httpUrl: '',
 
 					h5Type: null,
 
 					h5Type: null,
 
-					qrCodeData: {
 
-						qrCode: '',
 
-						msg: '',
 
-					},
 
 					bId: null,
 
 					bId: null,
 
-					shareTitle: '',
 
-					shareDes: '',
 
-					shareCover: '',
 
-					prizesList: [],
 
-					useNum: null,
 
-					remainNum: null,
 
-					activeMsg: '',
 
-					lotteryRecords: [],
 
-					activeName: 'tab1',
 
-					showDialog: false,
 
-					form: {
 
-						name: '',
 
-						wxAccount: '',
 
-						phone: '',
 
-						province: '',
 
-						city: '',
 
-						address: '',
 
-						remark: '',
 
-						recordId: null,
 
-					},
 
-					transformedData: [],
 
-					cityData: '',
 
-					showTipDialog: false,
 
-					allCarList: [],
 
-					getInfoForm: {
 
-						buyCar: 1,
 
-						phone: '',
 
-						province: '',
 
-						city: '',
 
-						intenModel: '',
 
-						car: '',
 
-					},
 
-					prizeData: {
 
-						acceptType: null,
 
-						name: '',
 
-						img: '',
 
-						money: '',
 
-						id: null
 
-					},
 
-					showPrizeDialog: false,
 
-					lotteryStatus: null,
 
-					currentIndex: 0, // 当前活动的格子索引
 
-					isSpinning: false,
 
-					intervalId: null,
 
-					showRuleDialog: false,
 
-					preFormType: null,
 
-					showError: false,
 
-					errorMsg: '',
 
-					dialogTitle: ""
 
 				}
 
 				}
 
 			},
 
 			},
 
 			created () {
 
 			created () {
 
@@ -694,31 +482,15 @@
 
 							if (code === 1) {
 
 							if (code === 1) {
 
 								this.h5Type = data.h5Type
 
 								this.h5Type = data.h5Type
 
 								localStorage.setItem('openId', data.openId)
 
 								localStorage.setItem('openId', data.openId)
 
-								// this.gerQwAuth(this.bId);
 
 								this.ifH5Type();
 
 								this.ifH5Type();
 
 							}
 
 							}
 
 						})
 
 						})
 
 				},
 
 				},
 
 				ifH5Type () {
 
 				ifH5Type () {
 
 					if (this.h5Type == 19 || this.h5Type == 30) {
 
 					if (this.h5Type == 19 || this.h5Type == 30) {
 
-						if (this.getQueryParam('openId') || localStorage.getItem('openId')) {
 
-							if (!this.getQueryParam('externalUserid')) {
 
-								this.gerQwAuth(this.bId);
 
-							} else {
 
-								if (this.getQueryParam('externalUserid') === 'unknown') {
 
-									this.gerQwCode(this.bId);
 
-								} else {
 
-									this.raffleInfo();
 
-									this.raffleRecord()
 
-									this.getCityLevel()
 
-									this.getAllCar()
 
-									this.getQyWxSign()
 
-								}
 
-							}
 
-						} else {
 
-							// 走授权操作
 
-							this.getAuth();
 
-						}
 
+						// 抽奖
 
+						var currentQueryParams = window.location.search;
 
+						window.location.replace('lottery.html' + currentQueryParams)
 
 					} else if (this.h5Type == 20) {
 
 					} else if (this.h5Type == 20) {
 
 						// 宝骏云海送祝福
 
 						// 宝骏云海送祝福
 
 						var currentQueryParams = window.location.search;
 
 						var currentQueryParams = window.location.search;
 
@@ -779,370 +551,6 @@
 
 						this.getAuth()
 
 						this.getAuth()
 
 					}
 
 					}
 
 				},
 
 				},
 
-				// 企微授权
 
-				gerQwAuth (bId) {
 
-					let openId = this.getQueryParam('openId') || localStorage.getItem('openId')
 
-					fetch(this.httpUrl + `/p/insuite/p/getOAUrl?openId=${openId}&bId=${bId}`)
 
-						.then(res => {
 
-							return res.json()
 
-						}).then(result => {
 
-							let { data, code, msg } = result
 
-							if (code === 1) {
 
-								window.location.replace(data)
 
-							} else {
 
-								this.$message({
 
-									message: msg,
 
-									type: 'warning'
 
-								})
 
-							}
 
-						})
 
-				},
 
-				// 获取二维码
 
-				gerQwCode (bId) {
 
-					fetch(this.httpUrl + `/scrm/v1/wxcp-raffle/p/getUnknown?bId=${bId}`)
 
-						.then(res => {
 
-							return res.json()
 
-						}).then(result => {
 
-							let { data, code, msg } = result
 
-							if (code === 1) {
 
-								this.qrCodeData = data
 
-							} else {
 
-								this.$message({
 
-									message: msg,
 
-									type: 'warning'
 
-								})
 
-							}
 
-						})
 
-				},
 
-				// 内容类型的分享页，获取企业微信的签名
 
-				getQyWxSign () {
 
-					let shareUrl = `${window.location.origin}?bId=${this.bId}&h5Type=${this.h5Type}`
 
-					fetch(this.httpUrl + `/scrm/v1/ct-share/p/getSignature?url=${window.location.href}`)
 
-						.then(res => {
 
-							return res.json()
 
-						}).then(result => {
 
-							let { data, code, msg } = result
 
-							if (code === 1) {
 
-								wx.config({
 
-									debug: false,
 
-									appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
 
-									timestamp: data.timestamp, // 必填，生成签名的时间戳
 
-									nonceStr: data.nonceStr, // 必填，生成签名的随机串
 
-									signature: data.signature, // 必填，签名，见附录1
 
-									jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
 
-								})
 
-								// 分享接口仅激活的成员数超过200人且已经认证的企业才可在微信上调用。
 
-								wx.ready(() => {
 
-									let shareData = {
 
-										link: shareUrl,
 
-										title: this.shareTitle, // 分享标题
 
-										desc: this.shareDes, // 分享描述
 
-										imgUrl: this.shareCover,
 
-									}
 
-									// 分享到朋友圈
 
-									wx.updateAppMessageShareData(shareData)
 
-									// 分享给朋友
 
-									wx.updateTimelineShareData(shareData);
 
-									// 配置失败的回调函数
 
-									wx.error(function(res) {
 
-										// 配置失败
 
-										console.log('配置失败', res);
 
-									})
 
-								})
 
-							} else {
 
-								// this.$message({
 
-								// 	message: msg,
 
-								// 	type: 'warning'
 
-								// })
 
-							}
 
-						})
 
-				},
 
-				// 获取抽奖信息
 
-				raffleInfo () {
 
-					fetch(this.httpUrl + `/scrm/v1/wxcp-raffle/p/raffleInfoByOpenId?openId=${this.getQueryParam('openId') || localStorage.getItem('openId')}&bId=${this.bId}`)
 
-						.then(res => {
 
-							return res.json()
 
-						}).then(result => {
 
-							let { data, code, msg } = result
 
-							if (code === 1) {
 
-								this.lotteryStatus = data.status
 
-								this.prizesList = data.prizes
 
-								this.useNum = data.useNum
 
-								this.remainNum = data.raffleNum - data.useNum
 
-								this.activeMsg = data.activityInfo
 
-								this.shareTitle = data.name
 
-								this.shareDes = data.description
 
-								this.shareCover = data.cover
 
-								this.preFormType = data.preFormType
 
-								if (data.preForm && !data.isSubmit && this.getInfoForm.buyCar !== 0) {
 
-									if (this.preFormType) {
 
-										this.dialogTitle = '五菱试驾体验报名'
 
-									} else {
 
-										this.dialogTitle = '请问您是否已购五菱/宝骏车型?'
 
-									}
 
-									// 此处加上this.getInfoForm.buyCar !== 0的条件是当用户点击过否的时候，不再弹出此框，除非用户重新进入页面，可再次弹出此框
 
-									this.showTipDialog = true
 
-								}
 
-							} else {
 
-								this.showError = true
 
-								this.errorMsg = msg
 
-							}
 
-						})
 
-				},
 
-				// 抽奖记录
 
-				raffleRecord () {
 
-					fetch(this.httpUrl + '/scrm/v1/wxcp-raffle/p/raffleRecord', {
 
-						method: 'post',
 
-						body: JSON.stringify({
 
-							openId: this.getQueryParam('openId') || localStorage.getItem('openId'),
 
-							bid: this.bId,
 
-							page: 1,
 
-							pageCount: 1000,
 
-						}),
 
-						headers: {
 
-							'Content-Type': 'application/json'
 
-						}
 
-					}).then(res => {
 
-						return res.json()
 
-					}).then(result => {
 
-						let { data, code, msg } = result
 
-						if (code === 1) {
 
-							this.lotteryRecords = data.records
 
-						}
 
-					})
 
-				},
 
-				changeTab (tabName) {
 
-					this.activeName = tabName
 
-				},
 
-				handleOpenForm (id) {
 
-					this.form.recordId = id
 
-					this.showDialog = true
 
-				},
 
-				handleSave () {
 
-					if (!this.form.name) {
 
-						this.$message({
 
-							message: '请填写姓名',
 
-							type: 'warning'
 
-						})
 
-						return
 
-					}
 
-					if (!this.form.phone) {
 
-						this.$message({
 
-							message: '请输入手机号',
 
-							type: 'warning'
 
-						})
 
-						return
 
-					}
 
-					if (!this.form.province) {
 
-						this.$message({
 
-							message: '请选择城市',
 
-							type: 'warning'
 
-						})
 
-						return
 
-					}
 
-					fetch(this.httpUrl + '/scrm/v1/wxcp-raffle/p/raffleForm', {
 
-						method: 'post',
 
-						body: JSON.stringify(this.form),
 
-						headers: {
 
-							'Content-Type': 'application/json'
 
-						}
 
-					}).then(res => {
 
-						return res.json()
 
-					}).then(result => {
 
-						let { data, code, msg } = result
 
-						if (code === 1) {
 
-							this.$message({
 
-								message: '提交成功！',
 
-								type: 'success'
 
-							})
 
-							this.showDialog = false
 
-							this.raffleRecord()
 
-						}
 
-					})
 
-				},
 
-				handleSaveCar () {
 
-					if (this.preFormType) {
 
-						if (!this.getInfoForm.phone) {
 
-							this.$message({
 
-								message: '请输入手机号',
 
-								type: 'warning'
 
-							})
 
-							return
 
-						}
 
-						if (!this.getInfoForm.city) {
 
-							this.$message({
 
-								message: '请选择城市',
 
-								type: 'warning'
 
-							})
 
-							return
 
-						}
 
-						if (!this.getInfoForm.intenModel) {
 
-							this.$message({
 
-								message: '请选择意向车型',
 
-								type: 'warning'
 
-							})
 
-							return
 
-						}
 
-						this.getInfoForm.buyCar = null
 
-						this.getInfoForm.car = ''
 
-					} else {
 
-						if (this.getInfoForm.buyCar) {
 
-							if (!this.getInfoForm.car) {
 
-								this.$message({
 
-									message: '请选择已购车型',
 
-									type: 'warning'
 
-								})
 
-								return
 
-							}
 
-						} else {
 
-							this.getInfoForm.car = ''
 
-						}
 
-						this.getInfoForm.phone = ''
 
-						this.getInfoForm.province = ''
 
-						this.getInfoForm.city = ''
 
-						this.getInfoForm.intenModel = ''
 
-					}
 
-					fetch(this.httpUrl + '/scrm/v1/wxcp-raffle/p/submitPreForm', {
 
-						method: 'post',
 
-						body: JSON.stringify({
 
-							bid: this.bId,
 
-							buyCar: this.getInfoForm.buyCar,
 
-							car: this.getInfoForm.car,
 
-							phone: this.getInfoForm.phone,
 
-							province: this.getInfoForm.province,
 
-							city: this.getInfoForm.city,
 
-							intenModel: this.getInfoForm.intenModel,
 
-							mpOpenId: this.getQueryParam('openId') || this.localStorage.getItem('openId'),
 
-						}),
 
-						headers: {
 
-							'Content-Type': 'application/json'
 
-						}
 
-					}).then(res => {
 
-						return res.json()
 
-					}).then(result => {
 
-						let { data, code, msg } = result
 
-						if (code === 1) {
 
-							this.$message({
 
-								message: '提交成功！',
 
-								type: 'success'
 
-							})
 
-							this.showTipDialog = false
 
-						}
 
-					})
 
-				},
 
-				// 获取城市数据
 
-				getCityLevel () {
 
-					fetch('https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/1000/1720161853377/pc-code.json')
 
-						.then(res => {
 
-							return res.json()
 
-						}).then(result => {
 
-							this.transformedData = this.transformData(result)
 
-						})
 
-				},
 
-				// 获取全部车型
 
-				getAllCar () {
 
-					fetch(this.httpUrl + `/scrm/v1/wxcp-raffle/p/getCarList?bId=${this.bId}`)
 
-						.then(res => {
 
-							return res.json()
 
-						}).then(result => {
 
-							let { data, code, msg } = result
 
-							if (code === 1) {
 
-								this.allCarList = data
 
-							}
 
-						})
 
-				},
 
-				handleChangeCity (value) {
 
-					this.form.province = value[0]
 
-					this.form.city = value[1]
 
-				},
 
-				handleInfoCity (value) {
 
-					this.getInfoForm.province = value[0]
 
-					this.getInfoForm.city = value[1]
 
-				},
 
-				// 点击抽奖
 
-				handleLottery () {
 
-					if (!this.remainNum) {
 
-						this.$message({
 
-							message: '暂无抽奖次数',
 
-							type: 'warning'
 
-						})
 
-						return
 
-					}
 
-					if (this.lotteryStatus === -1) {
 
-						this.$message({
 
-							message: '活动已结束',
 
-							type: 'warning'
 
-						})
 
-					} else if (this.lotteryStatus === 0) {
 
-						this.$message({
 
-							message: '活动未开始',
 
-							type: 'warning'
 
-						})
 
-					} else if (this.lotteryStatus === 1) {
 
-						if (this.isSpinning) return
 
-						this.isSpinning = true
 
-						this.currentIndex = 0
 
-						let externalUserid = this.getQueryParam('externalUserid')
 
-						let openId = this.getQueryParam('openId') || localStorage.getItem('openId')
 
-						const headers = new Headers();
 
-						headers.append('police', 110);
 
-						fetch(this.httpUrl + `/scrm/v1/wxcp-raffle/p/lottery?externalUserid=${externalUserid}&openId=${openId}&bId=${this.bId}`, {
 
-							method: 'GET',
 
-							headers: headers
 
-						})
 
-							.then(res => {
 
-								return res.json()
 
-							}).then(result => {
 
-								let { data, code, msg } = result
 
-								if (code === 1) {
 
-									this.stopLottery()
 
-									this.prizeData = data
 
-									this.showPrizeDialog = true
 
-									this.raffleInfo();
 
-									this.raffleRecord();
 
-								} else {
 
-									this.stopLottery()
 
-									this.$message({
 
-										message: msg,
 
-									})
 
-								}
 
-							})
 
-						// 开始转圈
 
-						this.intervalId = setInterval(() => {
 
-							this.currentIndex = (this.currentIndex + 1) % 9;
 
-						}, 200); // 每 200 毫秒转一次
 
-					}
 
-				},
 
-				// 停止抽奖
 
-				stopLottery () {
 
-					clearInterval(this.intervalId);
 
-					this.isSpinning = false;
 
-					this.currentIndex = null;
 
-				},
 
-				handleRule () {
 
-					this.showRuleDialog = true
 
-				},
 
-				// 省市数据做转换
 
-				transformData (data) {
 
-					return data.map(item => {
 
-						// 创建一个新对象，避免直接修改原始对象
 
-						const newItem = { ...item };
 
-
 
-						// 重命名 text 为 label
 
-						if (newItem.text) {
 
-							newItem.label = newItem.text;
 
-							newItem.value = newItem.text;
 
-							delete newItem.text;
 
-						}
 
-
 
-						// 如果存在 children 数组，则递归处理每个子项
 
-						if (newItem.children && Array.isArray(newItem.children)) {
 
-							newItem.children = this.transformData(newItem.children);
 
-						}
 
-
 
-						return newItem;
 
-					})
 
-				},
 
 				// 截取url中的数据
 
 				// 截取url中的数据
 
 				getQueryParam (paramName) {
 
 				getQueryParam (paramName) {
 
 					// 获取当前URL的查询字符串部分  
 					// 获取当前URL的查询字符串部分  
@@ -1152,31 +560,6 @@
 
 					// 返回指定参数的值，如果不存在则返回null  
 					// 返回指定参数的值，如果不存在则返回null  
 					return urlParams.get(paramName);
 
 					return urlParams.get(paramName);
 
 				},
 
 				},
 
-				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>

+ 1122 - 0
lottery/lottery.html
Xem Tập Tin 

@@ -0,0 +1,1122 @@
 
+<!DOCTYPE html>
 
+<html>
 
+
 
+<head>
 
+  <meta charset="utf-8">
 
+  <title>活动</title>
 
+  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 
+  <!--引入 element-ui 的样式，-->
 
+  <link rel="stylesheet"
 
+    href="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742018383195/element-ui.css">
 
+  <!-- 必须先引入vue，  后使用element-ui -->
 
+  <script
 
+    src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017957144/vue.js"></script>
 
+  <!-- 引入element 的组件库-->
 
+  <script
 
+    src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017747738/element-ui.js"></script>
 
+  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 
+  <!-- <script src="js/vconsole.min.js"></script>
 
+  <script>
 
+		  var vConsole = new window.VConsole();
 
+		</script> -->
 
+</head>
 
+<style>
 
+  body {
 
+    margin: 0;
 
+    padding: 0;
 
+  }
 
+
 
+  #box {
 
+    width: 100vw;
 
+    height: 100vh;
 
+    box-sizing: border-box;
 
+  }
 
+
 
+  .lotteryPage {
 
+    width: 100%;
 
+    height: 620px;
 
+    background: url('./img/lottery-bg.png');
 
+    background-size: 100% 620px;
 
+    background-repeat: no-repeat;
 
+    position: relative;
 
+  }
 
+
 
+  .prize_content {
 
+    padding: 267px 61px 0 60px;
 
+    display: flex;
 
+    flex-wrap: wrap;
 
+    justify-content: center;
 
+    gap: 10px;
 
+  }
 
+
 
+  .prize_item {
 
+    width: 78px;
 
+    height: 78px;
 
+    background: url('./img/prize-bg.png');
 
+    background-size: 78px 78px;
 
+    background-repeat: no-repeat;
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+    flex-direction: column;
 
+    font-weight: 400;
 
+    font-size: 10px;
 
+    color: #CC745A;
 
+    box-sizing: border-box;
 
+  }
 
+
 
+  .prize_img {
 
+    width: 48px;
 
+    height: 48px;
 
+    padding-bottom: 3px;
 
+  }
 
+
 
+  .lottery_btn {
 
+    position: absolute;
 
+    bottom: -14px;
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    width: 100%;
 
+  }
 
+
 
+  .btn_img {
 
+    width: 290px;
 
+  }
 
+
 
+  .lottery_tip {
 
+    text-align: center;
 
+    font-size: 14px;
 
+    color: #FFFFFF;
 
+    font-weight: 600;
 
+    line-height: 14px;
 
+  }
 
+
 
+  .rule {
 
+    width: 100%;
 
+    height: 509px;
 
+    background: linear-gradient(180deg, #FF6C52 0%, #FFBA9B 100%);
 
+    margin-top: -50px;
 
+    padding: 65px 15px 40px;
 
+    box-sizing: border-box;
 
+  }
 
+
 
+  .rule_body {
 
+    height: 404px;
 
+    background: #FEE8D0;
 
+    border-radius: 20px;
 
+    padding: 20px 15px;
 
+    box-sizing: border-box;
 
+  }
 
+
 
+  .tabs {
 
+    display: flex;
 
+    justify-content: space-around;
 
+    align-items: center;
 
+    padding: 0 2px;
 
+    margin: 0 auto;
 
+    width: 255px;
 
+    height: 34px;
 
+    background: rgba(255, 125, 97, 0.2);
 
+    border-radius: 17px 17px 17px 17px;
 
+  }
 
+
 
+  .tab_link {
 
+    border: none;
 
+    outline: none;
 
+    cursor: pointer;
 
+    transition: 0.3s;
 
+    color: #FF765B;
 
+    background: unset;
 
+    width: 125px;
 
+    height: 30px;
 
+    border-radius: 17px
 
+  }
 
+
 
+  .tab_link:active {
 
+    background: rgba(255, 125, 97, 0.2);
 
+  }
 
+
 
+  .tab_link.active {
 
+    background: #FFFFFF;
 
+  }
 
+
 
+  .tab_content {
 
+    p {
 
+      font-weight: 400;
 
+      font-size: 14px;
 
+      color: #CB4E35;
 
+      margin-top: 20px;
 
+    }
 
+  }
 
+
 
+  .record_list {
 
+    overflow-y: auto;
 
+    height: 300px;
 
+    margin-top: 18px;
 
+  }
 
+
 
+  .record_item {
 
+    width: 315px;
 
+    height: 72px;
 
+    background: #FEDFC9;
 
+    border-radius: 10px;
 
+    padding: 9px 10px 8px;
 
+    display: flex;
 
+    align-items: center;
 
+    margin: 0 auto 10px;
 
+    box-sizing: border-box;
 
+  }
 
+
 
+  .record_img {
 
+    width: 55px;
 
+    height: 55px;
 
+    border-radius: 10px;
 
+    margin-right: 8px;
 
+  }
 
+
 
+  .get_btn {
 
+    width: 72px;
 
+    height: 30px;
 
+    background: #FF4646;
 
+    border-radius: 17px;
 
+    font-size: 14px;
 
+    color: #FFFFFF;
 
+    margin-left: 30px;
 
+    padding: 0;
 
+  }
 
+
 
+  .prize_name {
 
+    font-size: 14px;
 
+    font-weight: 500;
 
+    color: #FF4646;
 
+  }
 
+
 
+  .prize_time {
 
+    font-size: 12px;
 
+    color: #FF6767;
 
+  }
 
+
 
+  .el-dialog {
 
+    width: 335px;
 
+    border-radius: 20px;
 
+  }
 
+
 
+  .el-dialog__header {
 
+    text-align: center;
 
+  }
 
+
 
+  .el-dialog__title {
 
+    font-weight: 500;
 
+    font-size: 16px;
 
+    color: #222222;
 
+  }
 
+
 
+  .el-dialog__body {
 
+    height: 260px;
 
+    overflow-y: auto;
 
+  }
 
+
 
+  .prize_form .el-form-item {
 
+    padding: 0;
 
+  }
 
+
 
+  .prize_form .el-form-item__label {
 
+    line-height: 20px;
 
+  }
 
+
 
+  .prize_form .el-input {
 
+    width: 295px;
 
+  }
 
+
 
+  .prize_form .el-input__inner {
 
+    text-align: left;
 
+  }
 
+
 
+  .prize_form .el-input.is-active .el-input__inner,
 
+  .prize_form .el-input__inner:focus {
 
+    border: 1px solid #FF4646;
 
+  }
 
+
 
+  .prize_form .el-textarea.is-active .el-textarea__inner,
 
+  .prize_form .el-textarea__inner:focus {
 
+    border: 1px solid #FF4646;
 
+  }
 
+
 
+  .el-radio__input.is-checked .el-radio__inner {
 
+    border-color: #FF4646;
 
+    background: #FF4646;
 
+  }
 
+
 
+  .el-radio__input.is-checked+.el-radio__label {
 
+    color: #FF4646;
 
+  }
 
+
 
+  .el-select .el-input.is-focus .el-input__inner {
 
+    border-color: #FF4646;
 
+  }
 
+
 
+  .dialog-footer {
 
+    text-align: center;
 
+  }
 
+
 
+  .dialog-footer button {
 
+    width: 100%;
 
+    height: 46px;
 
+    background: #FF4646;
 
+    border-radius: 20px;
 
+    font-weight: 500;
 
+    font-size: 16px;
 
+    color: #FFFFFF;
 
+    border: none;
 
+  }
 
+
 
+  .prize_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;
 
+    /* 可选：添加透明度过渡效果 */
 
+  }
 
+
 
+  .dialog-body {
 
+    width: 100%;
 
+    height: 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;
 
+  }
 
+
 
+  .actives {
 
+    border: 2px solid #df2727;
 
+    border-radius: 15px;
 
+  }
 
+
 
+  .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;
 
+  }
 
+
 
+  .qrcode {
 
+    width: 100vw;
 
+    height: 100vh;
 
+    box-sizing: border-box;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    flex-direction: column;
 
+  }
 
+
 
+  .qrcode-msg {
 
+    text-align: center;
 
+    font-size: 18px;
 
+  }
 
+
 
+  .alert_dialog {
 
+    z-index: 999;
 
+    position: fixed;
 
+    top: 0;
 
+    left: 0;
 
+    width: 100%;
 
+  }
 
+</style>
 
+
 
+<body>
 
+  <div id="box">
 
+    <div v-if="h5Type == 19 || h5Type == 30">
 
+      <!-- 二维码 -->
 
+      <div class="qrcode" v-if="qrCodeData.qrCode || qrCodeData.msg">
 
+        <img class="qrcode-img" :src="qrCodeData.qrCode" />
 
+        <div class="qrcode-msg">{{qrCodeData.msg}}</div>
 
+      </div>
 
+      <div v-else>
 
+        <div class="lotteryPage">
 
+          <div class="event_notice" @click="handleRule">
 
+            <span>活动须知</span>
 
+          </div>
 
+          <div class="prize_content">
 
+            <div :class="['prize_item', { actives: isSpinning && index === currentIndex }]"
 
+              v-for="(item, index) in prizesList" :key="index">
 
+              <img class="prize_img" :src="item.img"></img>
 
+              <div>{{item.name}}</div>
 
+            </div>
 
+          </div>
 
+          <div class="lottery_btn">
 
+            <img class="btn_img" src="./img/btn.png" @click="handleLottery"></img>
 
+            <div class="lottery_tip">已抽奖{{useNum}}次，还剩{{remainNum}}次机会</div>
 
+          </div>
 
+        </div>
 
+        <div class="rule">
 
+          <div class="rule_body">
 
+            <div class="tabs">
 
+              <Button class="tab_link" :class="{ 'active': activeName === 'tab1' }"
 
+                @click="changeTab('tab1')">活动信息</Button>
 
+              <Button class="tab_link" :class="{ 'active': activeName === 'tab2' }"
 
+                @click="changeTab('tab2')">抽奖记录</Button>
 
+            </div>
 
+            <div v-if="activeName === 'tab1'" class="tab_content record_list" v-html="activeMsg"></div>
 
+            <div v-if="activeName === 'tab2'" class="record_list">
 
+              <div class="record_item" v-for="(item, index) in lotteryRecords" :key="index">
 
+                <img class="record_img" :src="item.img" mode="widthFix" />
 
+                <div>
 
+                  <div class="prize_name">{{item.name}}</div>
 
+                  <div class="prize_time">{{timeFormat(item.raffleTime)}}</div>
 
+                </div>
 
+                <el-button :disabled="item.status == -1 || item.status == 1" class="get_btn"
 
+                  @click="handleOpenForm(item.id)">{{item.status == 1 ? '已领取' : (item.status == -1 ?
 
+                  '审核中'
 
+                  : '领取')}}</el-button>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 奖励弹窗 -->
 
+      <div class="prize_dialog" v-if="showPrizeDialog">
 
+        <div 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" v-if="prizeData.acceptType === 2">
 
+            <div class="money-title">微信红包</div>
 
+            <div class="money-content">
 
+              <span class="prize-money">{{prizeData.money}}</span>
 
+              <span class="prize-unit">元</span>
 
+            </div>
 
+            <img class="dialog-btn" src="./img/dialog-btn.png" @click="showPrizeDialog = false" />
 
+            <div class="money-tip">红包到账会有延迟情况，请以实际为准</div>
 
+          </div>
 
+          <div class="prize-msg" v-if="prizeData.acceptType === 0 || prizeData.acceptType === 1">
 
+            <img class="goods-img" :src="prizeData.img" />
 
+            <div class="goods-name">{{prizeData.name}}</div>
 
+            <img class="dialog-btn" src="./img/dialog-btn.png" @click="showPrizeDialog = false" />
 
+          </div>
 
+          <img class="dialog-close" src="./img/dialog-close.png" @click="showPrizeDialog = false" />
 
+        </div>
 
+      </div>
 
+      <!-- 活动须知弹框 -->
 
+      <el-dialog title="活动须知" :visible.sync="showRuleDialog">
 
+        <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>
 
+      </el-dialog>
 
+      <el-dialog title="收货地址" :visible.sync="showDialog">
 
+        <el-form :model="form" class="prize_form">
 
+          <el-form-item label="姓名：">
 
+            <el-input v-model="form.name" autocomplete="off"></el-input>
 
+          </el-form-item>
 
+          <el-form-item label="微信号：">
 
+            <el-input v-model="form.wxAccount" autocomplete="off"></el-input>
 
+          </el-form-item>
 
+          <el-form-item label="手机号：">
 
+            <el-input v-model="form.phone" autocomplete="off"></el-input>
 
+          </el-form-item>
 
+          <el-form-item label="地区：">
 
+            <el-cascader v-model="cityData" :options="transformedData" @change="handleChangeCity">
 
+            </el-cascader>
 
+          </el-form-item>
 
+          <el-form-item label="详细地址：">
 
+            <el-input v-model="form.address" autocomplete="off"></el-input>
 
+          </el-form-item>
 
+          <el-form-item label="备注：">
 
+            <el-input v-model="form.remark" type="textarea" autocomplete="off"></el-input>
 
+          </el-form-item>
 
+        </el-form>
 
+        <div slot="footer" class="dialog-footer">
 
+          <el-button type="primary" @click="handleSave">确 定</el-button>
 
+        </div>
 
+      </el-dialog>
 
+      <el-dialog :title="dialogTitle" :visible.sync="showTipDialog" :show-close="false" :close-on-click-modal="false">
 
+        <el-form :model="getInfoForm" class="prize_form" label-position="top">
 
+          <div v-if="preFormType">
 
+            <el-form-item label="手机号：">
 
+              <el-input v-model="getInfoForm.phone" autocomplete="off" maxlength="11"
 
+                oninput="value=value.replace(/[^\d]/g,'')"
 
+                @blur="$event => {getInfoForm.phone = Number($event.target.value) || '';}"></el-input>
 
+            </el-form-item>
 
+            <el-form-item label="地址：">
 
+              <el-cascader v-model="cityData" :options="transformedData" @change="handleInfoCity">
 
+              </el-cascader>
 
+            </el-form-item>
 
+            <el-form-item label="意向车型：">
 
+              <el-select v-model="getInfoForm.intenModel" placeholder="请选择">
 
+                <el-option v-for="item in allCarList" :key="item" :label="item" :value="item">
 
+                </el-option>
 
+              </el-select>
 
+            </el-form-item>
 
+          </div>
 
+          <div v-else>
 
+            <el-form-item label="确认：">
 
+              <el-radio-group v-model="getInfoForm.buyCar">
 
+                <el-radio :label="1">是</el-radio>
 
+                <el-radio :label="0">否</el-radio>
 
+              </el-radio-group>
 
+            </el-form-item>
 
+            <el-form-item label="已购车型：" v-if="getInfoForm.buyCar">
 
+              <el-select v-model="getInfoForm.car" placeholder="请选择">
 
+                <el-option v-for="item in allCarList" :key="item" :label="item" :value="item">
 
+                </el-option>
 
+              </el-select>
 
+            </el-form-item>
 
+          </div>
 
+        </el-form>
 
+        <div slot="footer" class="dialog-footer">
 
+          <el-button type="primary" @click="handleSaveCar">确 定</el-button>
 
+        </div>
 
+      </el-dialog>
 
+      <el-alert v-if="showError" class="alert_dialog" :title="errorMsg" :closable="false" type="error" show-icon>
 
+      </el-alert>
 
+    </div>
 
+  </div>
 
+  <script>
 
+    new Vue({
 
+      el: '#box',
 
+      data() {
 
+        return {
 
+          env: '',
 
+          httpUrl: '',
 
+          h5Type: null,
 
+          qrCodeData: {
 
+            qrCode: '',
 
+            msg: '',
 
+          },
 
+          bId: null,
 
+          shareTitle: '',
 
+          shareDes: '',
 
+          shareCover: '',
 
+          prizesList: [],
 
+          useNum: null,
 
+          remainNum: null,
 
+          activeMsg: '',
 
+          lotteryRecords: [],
 
+          activeName: 'tab1',
 
+          showDialog: false,
 
+          form: {
 
+            name: '',
 
+            wxAccount: '',
 
+            phone: '',
 
+            province: '',
 
+            city: '',
 
+            address: '',
 
+            remark: '',
 
+            recordId: null,
 
+          },
 
+          transformedData: [],
 
+          cityData: '',
 
+          showTipDialog: false,
 
+          allCarList: [],
 
+          getInfoForm: {
 
+            buyCar: 1,
 
+            phone: '',
 
+            province: '',
 
+            city: '',
 
+            intenModel: '',
 
+            car: '',
 
+          },
 
+          prizeData: {
 
+            acceptType: null,
 
+            name: '',
 
+            img: '',
 
+            money: '',
 
+            id: null
 
+          },
 
+          showPrizeDialog: false,
 
+          lotteryStatus: null,
 
+          currentIndex: 0, // 当前活动的格子索引
 
+          isSpinning: false,
 
+          intervalId: null,
 
+          showRuleDialog: false,
 
+          preFormType: null,
 
+          showError: false,
 
+          errorMsg: '',
 
+          dialogTitle: ""
 
+        }
 
+      },
 
+      created() {
 
+        this.bId = this.getQueryParam('bId')
 
+        this.env = this.getQueryParam('env')
 
+        this.h5Type = this.getQueryParam('h5Type')
 
+        if (!this.env || this.env === 'prod') {
 
+          this.httpUrl = 'https://wlapi.wefanbot.com'
 
+        } else {
 
+          this.httpUrl = 'http://test.wefanbot.com:18993'
 
+        }
 
+        localStorage.removeItem('openId')
 
+        this.ifH5Type()
 
+      },
 
+      methods: {
 
+        // 公众号授权，获取code
 
+        getAuth() {
 
+          // 获取url上的code
 
+          let code = this.getQueryParam('code')
 
+          if (code) {
 
+            // 判断业务id是否生产环境业务id
 
+            fetch(this.httpUrl + `/p/insuite/p/isProdId?id=${this.bId}`)
 
+              .then(res => {
 
+                return res.json()
 
+              }).then(result => {
 
+                let { data, msg } = result
 
+                if (typeof data === 'boolean' && data) {
 
+                  this.httpUrl = 'https://wlapi.wefanbot.com'
 
+                } else {
 
+                  this.httpUrl = 'http://test.wefanbot.com:18993'
 
+                }
 
+                this.getInfoByh5Code(this.getQueryParam('code'))
 
+              })
 
+          } 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)
 
+          }
 
+        },
 
+        getInfoByh5Code(code) {
 
+          fetch(this.httpUrl + `/scrm/v1/mp-client/p/getInfoByh5Code?code=${code}&bId=${this.bId}`)
 
+            .then(res => {
 
+              return res.json()
 
+            }).then(result => {
 
+              let { data, code, msg } = result
 
+              if (code === 1) {
 
+                this.h5Type = data.h5Type
 
+                localStorage.setItem('openId', data.openId)
 
+                this.ifH5Type();
 
+              }
 
+            })
 
+        },
 
+        ifH5Type() {
 
+          if (this.getQueryParam('openId') || localStorage.getItem('openId')) {
 
+            if (!this.getQueryParam('externalUserid')) {
 
+              this.gerQwAuth(this.bId);
 
+            } else {
 
+              if (this.getQueryParam('externalUserid') === 'unknown') {
 
+                this.gerQwCode(this.bId);
 
+              } else {
 
+                this.raffleInfo();
 
+                this.raffleRecord()
 
+                this.getCityLevel()
 
+                this.getAllCar()
 
+                this.getQyWxSign()
 
+              }
 
+            }
 
+          } else {
 
+            // 走授权操作
 
+            this.getAuth();
 
+          }
 
+        },
 
+        // 企微授权
 
+        gerQwAuth(bId) {
 
+          let openId = this.getQueryParam('openId') || localStorage.getItem('openId')
 
+          fetch(this.httpUrl + `/p/insuite/p/getOAUrl?openId=${openId}&bId=${bId}`)
 
+            .then(res => {
 
+              return res.json()
 
+            }).then(result => {
 
+              let { data, code, msg } = result
 
+              if (code === 1) {
 
+                window.location.replace(data)
 
+              } else {
 
+                this.$message({
 
+                  message: msg,
 
+                  type: 'warning'
 
+                })
 
+              }
 
+            })
 
+        },
 
+        // 获取二维码
 
+        gerQwCode(bId) {
 
+          fetch(this.httpUrl + `/scrm/v1/wxcp-raffle/p/getUnknown?bId=${bId}`)
 
+            .then(res => {
 
+              return res.json()
 
+            }).then(result => {
 
+              let { data, code, msg } = result
 
+              if (code === 1) {
 
+                this.qrCodeData = data
 
+              } else {
 
+                this.$message({
 
+                  message: msg,
 
+                  type: 'warning'
 
+                })
 
+              }
 
+            })
 
+        },
 
+        // 内容类型的分享页，获取企业微信的签名
 
+        getQyWxSign() {
 
+          let shareUrl = `${window.location.origin}?bId=${this.bId}&h5Type=${this.h5Type}`
 
+          fetch(this.httpUrl + `/scrm/v1/ct-share/p/getSignature?url=${window.location.href}`)
 
+            .then(res => {
 
+              return res.json()
 
+            }).then(result => {
 
+              let { data, code, msg } = result
 
+              if (code === 1) {
 
+                wx.config({
 
+                  debug: false,
 
+                  appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
 
+                  timestamp: data.timestamp, // 必填，生成签名的时间戳
 
+                  nonceStr: data.nonceStr, // 必填，生成签名的随机串
 
+                  signature: data.signature, // 必填，签名，见附录1
 
+                  jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
 
+                })
 
+                // 分享接口仅激活的成员数超过200人且已经认证的企业才可在微信上调用。
 
+                wx.ready(() => {
 
+                  let shareData = {
 
+                    link: shareUrl,
 
+                    title: this.shareTitle, // 分享标题
 
+                    desc: this.shareDes, // 分享描述
 
+                    imgUrl: this.shareCover,
 
+                  }
 
+                  // 分享到朋友圈
 
+                  wx.updateAppMessageShareData(shareData)
 
+                  // 分享给朋友
 
+                  wx.updateTimelineShareData(shareData);
 
+                  // 配置失败的回调函数
 
+                  wx.error(function (res) {
 
+                    // 配置失败
 
+                    console.log('配置失败', res);
 
+                  })
 
+                })
 
+              } else {
 
+                // this.$message({
 
+                // 	message: msg,
 
+                // 	type: 'warning'
 
+                // })
 
+              }
 
+            })
 
+        },
 
+        // 获取抽奖信息
 
+        raffleInfo() {
 
+          fetch(this.httpUrl + `/scrm/v1/wxcp-raffle/p/raffleInfoByOpenId?openId=${this.getQueryParam('openId') || localStorage.getItem('openId')}&bId=${this.bId}`)
 
+            .then(res => {
 
+              return res.json()
 
+            }).then(result => {
 
+              let { data, code, msg } = result
 
+              if (code === 1) {
 
+                this.lotteryStatus = data.status
 
+                this.prizesList = data.prizes
 
+                this.useNum = data.useNum
 
+                this.remainNum = data.raffleNum - data.useNum
 
+                this.activeMsg = data.activityInfo
 
+                this.shareTitle = data.name
 
+                this.shareDes = data.description
 
+                this.shareCover = data.cover
 
+                this.preFormType = data.preFormType
 
+                if (data.preForm && !data.isSubmit && this.getInfoForm.buyCar !== 0) {
 
+                  if (this.preFormType) {
 
+                    this.dialogTitle = '五菱试驾体验报名'
 
+                  } else {
 
+                    this.dialogTitle = '请问您是否已购五菱/宝骏车型?'
 
+                  }
 
+                  // 此处加上this.getInfoForm.buyCar !== 0的条件是当用户点击过否的时候，不再弹出此框，除非用户重新进入页面，可再次弹出此框
 
+                  this.showTipDialog = true
 
+                }
 
+              } else {
 
+                this.showError = true
 
+                this.errorMsg = msg
 
+              }
 
+            })
 
+        },
 
+        // 抽奖记录
 
+        raffleRecord() {
 
+          fetch(this.httpUrl + '/scrm/v1/wxcp-raffle/p/raffleRecord', {
 
+            method: 'post',
 
+            body: JSON.stringify({
 
+              openId: this.getQueryParam('openId') || localStorage.getItem('openId'),
 
+              bid: this.bId,
 
+              page: 1,
 
+              pageCount: 1000,
 
+            }),
 
+            headers: {
 
+              'Content-Type': 'application/json'
 
+            }
 
+          }).then(res => {
 
+            return res.json()
 
+          }).then(result => {
 
+            let { data, code, msg } = result
 
+            if (code === 1) {
 
+              this.lotteryRecords = data.records
 
+            }
 
+          })
 
+        },
 
+        changeTab(tabName) {
 
+          this.activeName = tabName
 
+        },
 
+        handleOpenForm(id) {
 
+          this.form.recordId = id
 
+          this.showDialog = true
 
+        },
 
+        handleSave() {
 
+          if (!this.form.name) {
 
+            this.$message({
 
+              message: '请填写姓名',
 
+              type: 'warning'
 
+            })
 
+            return
 
+          }
 
+          if (!this.form.phone) {
 
+            this.$message({
 
+              message: '请输入手机号',
 
+              type: 'warning'
 
+            })
 
+            return
 
+          }
 
+          if (!this.form.province) {
 
+            this.$message({
 
+              message: '请选择城市',
 
+              type: 'warning'
 
+            })
 
+            return
 
+          }
 
+          fetch(this.httpUrl + '/scrm/v1/wxcp-raffle/p/raffleForm', {
 
+            method: 'post',
 
+            body: JSON.stringify(this.form),
 
+            headers: {
 
+              'Content-Type': 'application/json'
 
+            }
 
+          }).then(res => {
 
+            return res.json()
 
+          }).then(result => {
 
+            let { data, code, msg } = result
 
+            if (code === 1) {
 
+              this.$message({
 
+                message: '提交成功！',
 
+                type: 'success'
 
+              })
 
+              this.showDialog = false
 
+              this.raffleRecord()
 
+            }
 
+          })
 
+        },
 
+        handleSaveCar() {
 
+          if (this.preFormType) {
 
+            if (!this.getInfoForm.phone) {
 
+              this.$message({
 
+                message: '请输入手机号',
 
+                type: 'warning'
 
+              })
 
+              return
 
+            }
 
+            if (!this.getInfoForm.city) {
 
+              this.$message({
 
+                message: '请选择城市',
 
+                type: 'warning'
 
+              })
 
+              return
 
+            }
 
+            if (!this.getInfoForm.intenModel) {
 
+              this.$message({
 
+                message: '请选择意向车型',
 
+                type: 'warning'
 
+              })
 
+              return
 
+            }
 
+            this.getInfoForm.buyCar = null
 
+            this.getInfoForm.car = ''
 
+          } else {
 
+            if (this.getInfoForm.buyCar) {
 
+              if (!this.getInfoForm.car) {
 
+                this.$message({
 
+                  message: '请选择已购车型',
 
+                  type: 'warning'
 
+                })
 
+                return
 
+              }
 
+            } else {
 
+              this.getInfoForm.car = ''
 
+            }
 
+            this.getInfoForm.phone = ''
 
+            this.getInfoForm.province = ''
 
+            this.getInfoForm.city = ''
 
+            this.getInfoForm.intenModel = ''
 
+          }
 
+          fetch(this.httpUrl + '/scrm/v1/wxcp-raffle/p/submitPreForm', {
 
+            method: 'post',
 
+            body: JSON.stringify({
 
+              bid: this.bId,
 
+              buyCar: this.getInfoForm.buyCar,
 
+              car: this.getInfoForm.car,
 
+              phone: this.getInfoForm.phone,
 
+              province: this.getInfoForm.province,
 
+              city: this.getInfoForm.city,
 
+              intenModel: this.getInfoForm.intenModel,
 
+              mpOpenId: this.getQueryParam('openId') || this.localStorage.getItem('openId'),
 
+            }),
 
+            headers: {
 
+              'Content-Type': 'application/json'
 
+            }
 
+          }).then(res => {
 
+            return res.json()
 
+          }).then(result => {
 
+            let { data, code, msg } = result
 
+            if (code === 1) {
 
+              this.$message({
 
+                message: '提交成功！',
 
+                type: 'success'
 
+              })
 
+              this.showTipDialog = false
 
+            }
 
+          })
 
+        },
 
+        // 获取城市数据
 
+        getCityLevel() {
 
+          fetch('https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/1000/1720161853377/pc-code.json')
 
+            .then(res => {
 
+              return res.json()
 
+            }).then(result => {
 
+              this.transformedData = this.transformData(result)
 
+            })
 
+        },
 
+        // 获取全部车型
 
+        getAllCar() {
 
+          fetch(this.httpUrl + `/scrm/v1/wxcp-raffle/p/getCarList?bId=${this.bId}`)
 
+            .then(res => {
 
+              return res.json()
 
+            }).then(result => {
 
+              let { data, code, msg } = result
 
+              if (code === 1) {
 
+                this.allCarList = data
 
+              }
 
+            })
 
+        },
 
+        handleChangeCity(value) {
 
+          this.form.province = value[0]
 
+          this.form.city = value[1]
 
+        },
 
+        handleInfoCity(value) {
 
+          this.getInfoForm.province = value[0]
 
+          this.getInfoForm.city = value[1]
 
+        },
 
+        // 点击抽奖
 
+        handleLottery() {
 
+          if (!this.remainNum) {
 
+            this.$message({
 
+              message: '暂无抽奖次数',
 
+              type: 'warning'
 
+            })
 
+            return
 
+          }
 
+          if (this.lotteryStatus === -1) {
 
+            this.$message({
 
+              message: '活动已结束',
 
+              type: 'warning'
 
+            })
 
+          } else if (this.lotteryStatus === 0) {
 
+            this.$message({
 
+              message: '活动未开始',
 
+              type: 'warning'
 
+            })
 
+          } else if (this.lotteryStatus === 1) {
 
+            if (this.isSpinning) return
 
+            this.isSpinning = true
 
+            this.currentIndex = 0
 
+            let externalUserid = this.getQueryParam('externalUserid')
 
+            let openId = this.getQueryParam('openId') || localStorage.getItem('openId')
 
+            const headers = new Headers();
 
+            headers.append('police', 110);
 
+            fetch(this.httpUrl + `/scrm/v1/wxcp-raffle/p/lottery?externalUserid=${externalUserid}&openId=${openId}&bId=${this.bId}`, {
 
+              method: 'GET',
 
+              headers: headers
 
+            })
 
+              .then(res => {
 
+                return res.json()
 
+              }).then(result => {
 
+                let { data, code, msg } = result
 
+                if (code === 1) {
 
+                  this.stopLottery()
 
+                  this.prizeData = data
 
+                  this.showPrizeDialog = true
 
+                  this.raffleInfo();
 
+                  this.raffleRecord();
 
+                } else {
 
+                  this.stopLottery()
 
+                  this.$message({
 
+                    message: msg,
 
+                  })
 
+                }
 
+              })
 
+            // 开始转圈
 
+            this.intervalId = setInterval(() => {
 
+              this.currentIndex = (this.currentIndex + 1) % 9;
 
+            }, 200); // 每 200 毫秒转一次
 
+          }
 
+        },
 
+        // 停止抽奖
 
+        stopLottery() {
 
+          clearInterval(this.intervalId);
 
+          this.isSpinning = false;
 
+          this.currentIndex = null;
 
+        },
 
+        handleRule() {
 
+          this.showRuleDialog = true
 
+        },
 
+        // 省市数据做转换
 
+        transformData(data) {
 
+          return data.map(item => {
 
+            // 创建一个新对象，避免直接修改原始对象
 
+            const newItem = { ...item };
 
+
 
+            // 重命名 text 为 label
 
+            if (newItem.text) {
 
+              newItem.label = newItem.text;
 
+              newItem.value = newItem.text;
 
+              delete newItem.text;
 
+            }
 
+
 
+            // 如果存在 children 数组，则递归处理每个子项
 
+            if (newItem.children && Array.isArray(newItem.children)) {
 
+              newItem.children = this.transformData(newItem.children);
 
+            }
 
+
 
+            return newItem;
 
+          })
 
+        },
 
+        // 截取url中的数据
 
+        getQueryParam(paramName) {
 
+          // 获取当前URL的查询字符串部分  
+          const queryString = window.location.search;
 
+          // 创建一个URLSearchParams对象  
+          const urlParams = new URLSearchParams(queryString);
 
+          // 返回指定参数的值，如果不存在则返回null  
+          return urlParams.get(paramName);
 
+        },
 
+        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>
 
+</body>
 
+
 
+</html>