wfg
/
lottery


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156
							<!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: 100%;
    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: auto;
    max-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%;
  }
  @media screen and (max-width: 320px) {
    .prize_content {
      padding: 280px 31px 0 30px;
    }
    .prize_item {
      width: 68px;
      height: 68px;
      background-size: 68px 68px;
    }

    .prize_img {
      width: 38px;
      height: 38px;
    }
    .el-dialog {
      width: 280px;
      border-radius: 20px;
    }
  }
</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 class="tab_content" v-html="activeMsg"></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="地址：" v-if="!preOnlyPhone">
              <el-cascader v-model="cityData" :options="transformedData" @change="handleInfoCity">
              </el-cascader>
            </el-form-item>
            <el-form-item label="意向车型：" v-if="!preOnlyPhone">
              <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: '',
            area: '',
            store: '',
            intenModel: '',
            car: '',
          },
          prizeData: {
            acceptType: null,
            name: '',
            img: '',
            money: '',
            id: null
          },
          showPrizeDialog: false,
          lotteryStatus: null,
          currentIndex: 0, // 当前活动的格子索引
          isSpinning: false,
          intervalId: null,
          showRuleDialog: false,
          preFormType: null,
          preOnlyPhone: 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.isUnknownType(this.getQueryParam('externalUserid'))) {
                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}&externalUserId=${this.getQueryParam('externalUserid')}`)
            .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) {
                  this.preOnlyPhone = data.preOnlyPhone
                  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.preOnlyPhone) {
              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.area = ''
            this.getInfoForm.store = ''
            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,
              area: this.getInfoForm.area,
              store: this.getInfoForm.store,
              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
            } else {
              this.$message({
                message: msg,
                type:'warning'
              }) 
            }
          })
        },
        // 获取城市数据
        getCityLevel() {
          fetch(this.httpUrl + `//scrm/v1/tenancy-prov-city-area/p/lotteryArea?bid=${this.bId}`)
            .then(res => {
              return res.json()
            }).then(result => {
              let { data, code, msg } = result
              if (code === 1) {
                this.transformedData = this.transformData(data)
              }
            })
        },
        // 获取全部车型
        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]
          this.getInfoForm.area = value[2] || ''
          this.getInfoForm.store = value[3] || ''
        },
        // 点击抽奖
        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)
            // 开始转圈
            this.intervalId = setInterval(() => {
              this.currentIndex = (this.currentIndex + 1) % 9
            }, 200); // 每 200 毫秒转一次
            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.prizeData = data
                  // 2. 添加等待逻辑
                  const checkInterval = setInterval(() => {
                    if (this.currentIndex >= 8) {
                      clearInterval(checkInterval)
                      this.showPrizeDialog = true
                      this.raffleInfo()
                      this.raffleRecord()
                      this.stopLottery() // 停止动画
                    }
                  }, 100) // 每100ms检查一次
                } else {
                  this.stopLottery()
                  this.$message({
                    message: msg,
                  })
                }
              })
          }
        },
        // 停止抽奖
        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
          }
        },
        isUnknownType(value) {
          // 1. 先检查是否为字符串类型
          // 2. 再检查是否以"unknown"开头（区分大小写）
          return typeof value === 'string' && value.startsWith('unknown');
        },
      }
    })   
  </script>
</body>

</html>