wfg
/
lottery


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169
							<!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://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 必须先引入vue，  后使用element-ui -->
	<script src="./js/vue.js"></script>
	<!-- 引入element 的组件库-->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.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 class="qrcode" v-if="qrCodeData.qrCode || qrCodeData.msg">
			<img class="qrcode-img" :src="qrCodeData.qrCode" />
			<div class="qrcode-msg">{{qrCodeData.msg}}</div>
		</div>
		<el-alert v-if="showError" class="alert_dialog" :title="errorMsg" :closable="false" type="error" show-icon>
		</el-alert>
		<div v-if="(h5Type == 19 && !qrCodeData.qrCode) || (h5Type == 30 && !qrCodeData.qrCode)">
			<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 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>
		</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>
	</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'
				}
				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.gerQwAuth(this.bId);
								this.ifH5Type();
							}
						})
				},
				ifH5Type () {
					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();
						}
					} else if (this.h5Type == 20) {
						// 宝骏云海送祝福
						var currentQueryParams = window.location.search;
						window.location.replace('h5Type-20.html' + currentQueryParams)
					} else if (this.h5Type == 21) {
						// 活码
						var currentQueryParams = window.location.search;
						window.location.replace('live_code.html' + currentQueryParams)
					} else if (this.h5Type == 22) {
						// 红包兑换
						var currentQueryParams = window.location.search;
						window.location.replace('receiveMoney.html' + currentQueryParams)
					} else if (this.h5Type == 23) {
						// 会话列表
						var currentQueryParams = window.location.search;
						window.location.replace('sessionList.html' + currentQueryParams)
					} else if (this.h5Type == 24) {
						// 客户SOP提醒
						var currentQueryParams = window.location.search;
						window.location.replace('clientSopTip.html' + currentQueryParams)
					} else if (this.h5Type == 25) {
						// 客户SOP内容
						var currentQueryParams = window.location.search;
						window.location.replace('clientSop.html' + currentQueryParams)
					} else if (this.h5Type == 26) {
						// 群SOP提醒
						var currentQueryParams = window.location.search;
						window.location.replace('groupSopTip.html' + currentQueryParams)
					} else if (this.h5Type == 27) {
						// 群SOP内容
						var currentQueryParams = window.location.search;
						window.location.replace('groupSop.html' + currentQueryParams)
					} else if (this.h5Type == 28) {
						// 点亮五菱
						var currentQueryParams = window.location.search;
						window.location.replace('lightUpWl.html' + currentQueryParams)
					} else if (this.h5Type == 29) {
						// 车主筛选，试驾筛选，预约试驾
						var currentQueryParams = window.location.search;
						window.location.replace('carOwnerScreening.html' + currentQueryParams)
					} else if (this.h5Type == 31) {
						// 活动报名
						var currentQueryParams = window.location.search;
						window.location.replace('registrationActivity.html' + currentQueryParams)
					} else if (this.h5Type == 32) {
						// 核销
						var currentQueryParams = window.location.search;
						window.location.replace('signUp.html' + currentQueryParams)
					} else if (!this.h5Type) {
						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>