|
|
@@ -19,15 +19,17 @@
|
|
|
</script> -->
|
|
|
</head>
|
|
|
<style>
|
|
|
- body {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- #box {
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ #box {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
.lotteryPage {
|
|
|
width: 100%;
|
|
|
height: 620px;
|
|
|
@@ -36,13 +38,15 @@
|
|
|
background-repeat: no-repeat;
|
|
|
position: relative;
|
|
|
}
|
|
|
+
|
|
|
.prize_content {
|
|
|
padding: 267px 61px 0 60px;
|
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
+ flex-wrap: wrap;
|
|
|
justify-content: center;
|
|
|
- gap: 10px;
|
|
|
+ gap: 10px;
|
|
|
}
|
|
|
+
|
|
|
.prize_item {
|
|
|
width: 78px;
|
|
|
height: 78px;
|
|
|
@@ -50,37 +54,42 @@
|
|
|
background-size: 78px 78px;
|
|
|
background-repeat: no-repeat;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
+ 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;
|
|
|
+ height: 48px;
|
|
|
padding-bottom: 3px;
|
|
|
}
|
|
|
+
|
|
|
.lottery_btn {
|
|
|
position: absolute;
|
|
|
bottom: -14px;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
+ 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;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-weight: 600;
|
|
|
line-height: 14px;
|
|
|
}
|
|
|
+
|
|
|
.rule {
|
|
|
width: 100%;
|
|
|
height: 509px;
|
|
|
@@ -89,6 +98,7 @@
|
|
|
padding: 65px 15px 40px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
+
|
|
|
.rule_body {
|
|
|
height: 404px;
|
|
|
background: #FEE8D0;
|
|
|
@@ -96,6 +106,7 @@
|
|
|
padding: 20px 15px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
+
|
|
|
.tabs {
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
@@ -127,6 +138,7 @@
|
|
|
.tab_link.active {
|
|
|
background: #FFFFFF;
|
|
|
}
|
|
|
+
|
|
|
.tab_content {
|
|
|
p {
|
|
|
font-weight: 400;
|
|
|
@@ -135,11 +147,13 @@
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.record_list {
|
|
|
overflow-y: auto;
|
|
|
height: 300px;
|
|
|
margin-top: 18px;
|
|
|
}
|
|
|
+
|
|
|
.record_item {
|
|
|
width: 315px;
|
|
|
height: 72px;
|
|
|
@@ -158,6 +172,7 @@
|
|
|
border-radius: 10px;
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
+
|
|
|
.get_btn {
|
|
|
width: 72px;
|
|
|
height: 30px;
|
|
|
@@ -179,65 +194,81 @@
|
|
|
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;
|
|
|
- }
|
|
|
+ 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-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;
|
|
|
+ border: 1px solid #FF4646;
|
|
|
}
|
|
|
+
|
|
|
.prize_form .el-textarea.is-active .el-textarea__inner,
|
|
|
.prize_form .el-textarea__inner:focus {
|
|
|
- border: 1px solid #FF4646;
|
|
|
+ border: 1px solid #FF4646;
|
|
|
}
|
|
|
+
|
|
|
.el-radio__input.is-checked .el-radio__inner {
|
|
|
border-color: #FF4646;
|
|
|
- background: #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;
|
|
|
- }
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
.dialog-footer button {
|
|
|
- width: 100%;
|
|
|
- height: 46px;
|
|
|
- background: #FF4646;
|
|
|
- border-radius: 20px;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 16px;
|
|
|
- color: #FFFFFF;
|
|
|
+ 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;
|
|
|
@@ -251,6 +282,7 @@
|
|
|
transition: opacity 0.5s ease;
|
|
|
/* 可选：添加透明度过渡效果 */
|
|
|
}
|
|
|
+
|
|
|
.dialog-body {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -320,6 +352,7 @@
|
|
|
color: #999999;
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
+
|
|
|
.goods-img {
|
|
|
width: 100px;
|
|
|
height: 100px;
|
|
|
@@ -338,10 +371,12 @@
|
|
|
height: 30px;
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
+
|
|
|
.actives {
|
|
|
border: 2px solid #df2727;
|
|
|
border-radius: 15px;
|
|
|
}
|
|
|
+
|
|
|
.event_notice {
|
|
|
width: 30px;
|
|
|
height: 84px;
|
|
|
@@ -358,19 +393,22 @@
|
|
|
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;
|
|
|
+ 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;
|
|
|
+ font-size: 18px;
|
|
|
}
|
|
|
+
|
|
|
.alert_dialog {
|
|
|
z-index: 999;
|
|
|
position: fixed;
|
|
|
@@ -389,13 +427,14 @@
|
|
|
</div>
|
|
|
<el-alert v-if="showError" class="alert_dialog" :title="errorMsg" :closable="false" type="error" show-icon>
|
|
|
</el-alert>
|
|
|
- <div v-if="(h5Type == 19 || h5Type == 30) && !qrCodeData.qrCode">
|
|
|
+ <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">
|
|
|
+ <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>
|
|
|
@@ -408,8 +447,10 @@
|
|
|
<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>
|
|
|
+ <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">
|
|
|
@@ -419,38 +460,38 @@
|
|
|
<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>
|
|
|
+ <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 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>
|
|
|
- <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 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>
|
|
|
- <img class="dialog-close" src="./img/dialog-close.png" @click="showPrizeDialog = false" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 活动须知弹框 -->
|
|
|
- <el-dialog
|
|
|
- title="活动须知"
|
|
|
- :visible.sync="showRuleDialog">
|
|
|
+ <el-dialog title="活动须知" :visible.sync="showRuleDialog">
|
|
|
<div>以下隐私协议是本产品对用户隐私保护的许诺，请您务必仔细阅读本协议，以了解我们关于管理您个人信息的情况。本隐私协议的全部条款属于本产品用户服务协议的重要部份之一。<br />
|
|
|
为了给您提供更准确、更有针对性的服务，本产品可能会以如下方式，使用您授权的个人信息。但本产品会以高度的勤勉义务对待这些信息，在未征得您许可的情况下，不会将这些信息对外公开或向第三方提供。<br />
|
|
|
请务必遵守《微信开放平台协议》、《微信公众平台协议》、《企业微信服务协议》、《企业微信隐私保护协议》、《微信商户号服务协议》、《微信外部链接内容管理规范》等微信相关管理规范，我们不承担因违反上述管理规范所导致的任何责任。<br />
|
|
|
@@ -482,10 +523,7 @@
|
|
|
<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 v-model="cityData" :options="transformedData" @change="handleChangeCity">
|
|
|
</el-cascader>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="详细地址：">
|
|
|
@@ -500,14 +538,12 @@
|
|
|
</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">
|
|
|
+ <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-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">
|
|
|
@@ -515,11 +551,7 @@
|
|
|
</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 v-for="item in allCarList" :key="item" :label="item" :value="item">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
@@ -545,593 +577,593 @@
|
|
|
</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();
|
|
|
- }
|
|
|
- })
|
|
|
+ new Vue({
|
|
|
+ el: '#box',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ env: '',
|
|
|
+ httpUrl: '',
|
|
|
+ h5Type: null,
|
|
|
+ qrCodeData: {
|
|
|
+ qrCode: '',
|
|
|
+ msg: '',
|
|
|
},
|
|
|
- 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'
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+ 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,
|
|
|
},
|
|
|
- // 获取二维码
|
|
|
- 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'
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+ transformedData: [],
|
|
|
+ cityData: '',
|
|
|
+ showTipDialog: false,
|
|
|
+ allCarList: [],
|
|
|
+ getInfoForm: {
|
|
|
+ buyCar: 1,
|
|
|
+ phone: '',
|
|
|
+ province: '',
|
|
|
+ city: '',
|
|
|
+ intenModel: '',
|
|
|
+ car: '',
|
|
|
},
|
|
|
- // 内容类型的分享页，获取企业微信的签名
|
|
|
- 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'
|
|
|
- // })
|
|
|
- }
|
|
|
- })
|
|
|
+ prizeData: {
|
|
|
+ acceptType: null,
|
|
|
+ name: '',
|
|
|
+ img: '',
|
|
|
+ money: '',
|
|
|
+ id: null
|
|
|
},
|
|
|
- // 获取抽奖信息
|
|
|
- raffleInfo () {
|
|
|
- fetch(this.httpUrl + `/scrm/v1/wxcp-raffle/p/raffleInfoByOpenId?openId=${this.getQueryParam('openId') || localStorage.getItem('openId')}&bId=${this.bId}`)
|
|
|
- .then(res => {
|
|
|
+ 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, 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
|
|
|
- }
|
|
|
+ }).then(result => {
|
|
|
+ let { data, msg } = result
|
|
|
+ if (typeof data === 'boolean' && data) {
|
|
|
+ this.httpUrl = 'https://wlapi.wefanbot.com'
|
|
|
} else {
|
|
|
- this.showError = true
|
|
|
- this.errorMsg = msg
|
|
|
+ this.httpUrl = 'http://test.wefanbot.com:18993'
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- // 抽奖记录
|
|
|
- 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 => {
|
|
|
+ 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.lotteryRecords = data.records
|
|
|
+ this.h5Type = data.h5Type
|
|
|
+ localStorage.setItem('openId', data.openId)
|
|
|
+ // this.gerQwAuth(this.bId);
|
|
|
+ this.ifH5Type();
|
|
|
}
|
|
|
})
|
|
|
- },
|
|
|
- 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
|
|
|
+ },
|
|
|
+ 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();
|
|
|
}
|
|
|
- fetch(this.httpUrl + '/scrm/v1/wxcp-raffle/p/raffleForm', {
|
|
|
- method: 'post',
|
|
|
- body: JSON.stringify(this.form),
|
|
|
- headers: {
|
|
|
- 'Content-Type': 'application/json'
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
+ } 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: '提交成功！',
|
|
|
- type: 'success'
|
|
|
- })
|
|
|
- this.showDialog = false
|
|
|
- this.raffleRecord()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- handleSaveCar () {
|
|
|
- if (this.preFormType) {
|
|
|
- if (!this.getInfoForm.phone) {
|
|
|
- this.$message({
|
|
|
- message: '请输入手机号',
|
|
|
+ message: msg,
|
|
|
type: 'warning'
|
|
|
})
|
|
|
- return
|
|
|
}
|
|
|
- if (!this.getInfoForm.city) {
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取二维码
|
|
|
+ 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: '请选择城市',
|
|
|
+ message: msg,
|
|
|
type: 'warning'
|
|
|
})
|
|
|
- return
|
|
|
}
|
|
|
- if (!this.getInfoForm.intenModel) {
|
|
|
- this.$message({
|
|
|
- message: '请选择意向车型',
|
|
|
- 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接口列表
|
|
|
})
|
|
|
- return
|
|
|
- }
|
|
|
- this.getInfoForm.buyCar = null
|
|
|
- this.getInfoForm.car = ''
|
|
|
- } else {
|
|
|
- if (this.getInfoForm.buyCar) {
|
|
|
- if (!this.getInfoForm.car) {
|
|
|
- this.$message({
|
|
|
- message: '请选择已购车型',
|
|
|
- type: 'warning'
|
|
|
+ // 分享接口仅激活的成员数超过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);
|
|
|
})
|
|
|
- return
|
|
|
- }
|
|
|
+ })
|
|
|
} else {
|
|
|
- this.getInfoForm.car = ''
|
|
|
+ // this.$message({
|
|
|
+ // message: msg,
|
|
|
+ // type: 'warning'
|
|
|
+ // })
|
|
|
}
|
|
|
- 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 => {
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取抽奖信息
|
|
|
+ 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.$message({
|
|
|
- message: '提交成功！',
|
|
|
- type: 'success'
|
|
|
- })
|
|
|
- this.showTipDialog = false
|
|
|
+ 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
|
|
|
}
|
|
|
})
|
|
|
- },
|
|
|
- // 获取城市数据
|
|
|
- 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) {
|
|
|
+ },
|
|
|
+ // 抽奖记录
|
|
|
+ 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: '暂无抽奖次数',
|
|
|
+ message: '提交成功！',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.showDialog = false
|
|
|
+ this.raffleRecord()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSaveCar () {
|
|
|
+ if (this.preFormType) {
|
|
|
+ if (!this.getInfoForm.phone) {
|
|
|
+ this.$message({
|
|
|
+ message: '请输入手机号',
|
|
|
type: 'warning'
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
- if (this.lotteryStatus === -1) {
|
|
|
+ if (!this.getInfoForm.city) {
|
|
|
this.$message({
|
|
|
- message: '活动已结束',
|
|
|
+ message: '请选择城市',
|
|
|
type: 'warning'
|
|
|
})
|
|
|
- } else if (this.lotteryStatus === 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.getInfoForm.intenModel) {
|
|
|
this.$message({
|
|
|
- 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
|
|
|
+ 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'
|
|
|
})
|
|
|
- .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 毫秒转一次
|
|
|
+ this.showTipDialog = false
|
|
|
}
|
|
|
- },
|
|
|
- // 停止抽奖
|
|
|
- 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;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取城市数据
|
|
|
+ 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)
|
|
|
})
|
|
|
- },
|
|
|
- // 截取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))
|
|
|
+ },
|
|
|
+ // 获取全部车型
|
|
|
+ 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
|
|
|
}
|
|
|
- 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)))
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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>
|
|
|
+ return format
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
duanshenglang