点亮五菱

lottery/carOwnerScreening.html

@@ -15,10 +15,10 @@
   <!-- 引入element 的组件库-->
   <script
     src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017747738/element-ui.js"></script>
-  <!-- <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
+  <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
   <script>
 		  var vConsole = new window.VConsole();
-		</script> -->
+		</script>
 </head>
 <style>
   body {
@@ -259,26 +259,36 @@
       <div v-else-if="filter==3">
         <div class="testDrive_title">预约试驾</div>
         <div class="testDrive_tip">预约试驾即可帮助好友点亮五菱</div>
-        <el-form :model="getInfoForm" class="prize_form">
-          <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-form ref="form" class="prize_form" label-width="90px">
+          <el-form-item v-for="(item, index) in lightData.formProList" :key="index" :label="item.name"
+            :required="Boolean(item.isNeed)">
+            <el-cascader v-if="item.type === 10" v-model="item.value" :options="transformedData" @change="handleInfoCity">
+            </el-cascader>
+            <el-select v-if="item.type === 11" v-model="item.value" placeholder="请选择" @change="handlechange">
+              <el-option v-for="(sto, sindex) in storeList" :key="sindex" :label="sto.name" :value="sto.name">
               </el-option>
             </el-select>
-          </el-form-item>
-          <el-form-item label="所在城市：">
-            <el-cascader v-model="cityData" placeholder="请选择您所在的城市" :options="transformedData" @change="handleInfoCity">
-            </el-cascader>
-          </el-form-item>
-          <el-form-item label="联系方式：">
-            <el-input v-model="getInfoForm.phone" placeholder="请输入您的手机号" autocomplete="off" maxlength="11"
-              oninput="value=value.replace(/[^\d]/g,'')"
-              @blur="$event => {getInfoForm.phone = Number($event.target.value) || '';}"></el-input>
+            <el-input v-if="item.type === 0" v-model="item.value" placeholder="请输入"></el-input>
+            <el-input v-if="item.type === 1" type="textarea" autosize v-model="item.value" placeholder="请输入"></el-input>
+            <el-input v-if="item.type === 2" type="number" v-model="item.value" placeholder="请输入"></el-input>
+            <el-select v-if="item.type === 3" v-model="item.value" placeholder="请选择">
+              <el-option v-for="sto in item.formProTagReqs" :key="sto.proValue" :label="sto.proValue" :value="sto.proValue">
+              </el-option>
+            </el-select>
+            <el-col :span="22" v-if="item.type === 5">
+              <el-date-picker v-model="item.value" type="date" placeholder="选择日期" style="width: 100%;">
+            </el-col>
+            <el-col :span="22" v-if="item.type === 6">
+              <el-time-picker v-model="item.value" placeholder="请选择"></el-time-picker>
+            </el-col>
+            <el-col :span="22" v-if="item.type === 7">
+              <el-date-picker v-if="item.type === 7" v-model="item.value" type="datetime" placeholder="选择日期时间"></el-date-picker>
+            </el-col>
           </el-form-item>
         </el-form>
       </div>
       <div class="page_foot">
-        <div class="foot_btn" @click="handleOk" v-if="filter==3">确认预约，马上抽奖</div>
+        <div class="foot_btn" @click="handleFormOk" v-if="filter==3">确认预约，马上抽奖</div>
         <div class="foot_btn" @click="handleOk" v-else>确认</div>
       </div>
     </div>
@@ -292,15 +302,14 @@
         httpUrl: '',
         bId: null,
         env: '',
-        allCarList: [],
-        getInfoForm: {
-          intenModel: '',
-          province: '',
-          city: '',
-          phone: ''
+        lightData: {
+          raffle1BizId: null,
+          formProList: [],
         },
-        cityData: '',
+        province: '',
+        city: '',
         transformedData: [],
+        storeList: [],
         selectData: 'one',
         isWlCar: false,
         filter: 1,
@@ -316,9 +325,8 @@
         this.httpUrl = 'http://test.wefanbot.com:18993'
         // this.httpUrl = 'http://192.168.1.147:18993'
       }
-      // this.ifH5Type()
-      // this.getAllCar()
-      // this.getCityLevel()
+      this.ifH5Type()
+      this.getCityLevel()
     },
     methods: {
       ifH5Type () {
@@ -394,18 +402,6 @@
             }
           })
       },
-      // 获取全部车型
-      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
-            }
-          })
-      },
       // 获取城市数据
       getCityLevel () {
         fetch('https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/1000/1720161853377/pc-code.json')
@@ -416,8 +412,40 @@
           })
       },
       handleInfoCity (value) {
-        this.getInfoForm.province = value[0]
-        this.getInfoForm.city = value[1]
+        this.province = value[0]
+        this.city = value[1]
+        // 清空经销商类型的数据
+        this.lightData.formProList.forEach(item => {
+          if (item.type === 11) {
+            item.value = ''
+          }
+        })
+        this.storeList = []
+        this.getStoreList()
+      },
+      getStoreList() {
+        fetch(this.httpUrl + `/scrm/v1/wxcp-toshop-store/p/findListByPage?city=${this.city}&province=${this.province}`, {
+          method: 'post',
+          body: JSON.stringify({
+            page: 1,
+            pageCount: 10000,
+          }),
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        }).then(res => {
+          return res.json()
+        }).then(result => {
+          let { data, code, msg } = result
+          if (code === 1) {
+            this.storeList = data.records
+          } else {
+            this.$message({
+              message: msg,
+              type: 'warning'
+            })
+          }
+        })
       },
       // 省市数据做转换
       transformData (data) {
@@ -455,6 +483,79 @@
           this.noTestDrive = true
         }
       },
+      handleFormOk () {
+        // 填写了试驾表单
+        const isValid = this.lightData.formProList.some(item => {
+          if (item.isNeed && !item.value) {
+            this.$message({
+              message: '必填项不能为空',
+              type: 'warning'
+            })
+            return true
+          }
+          if (this.containsAllChineseCharacters(item.name, '手机') && item.value.length !== 11) {
+            this.$message({
+              message: '请输入正确的手机号',
+              type: 'warning'
+            })
+            return true
+          }
+          return false
+        })
+        if (isValid) return
+        let cols = []
+        cols = this.lightData.formProList.map(item => {
+          return {
+            name: item.name,
+            type: item.type,
+            value: item.type === 10 ? [item.value.join('')] : [item.value],
+          }
+        })
+        let openId = this.getQueryParam('openId') || localStorage.getItem('openId')
+        this.loading = true
+        fetch(this.httpUrl + `/scrm/v1/wxcp-lighten-client/p/formData?openId=${openId}`, {
+          method: 'post',
+          body: JSON.stringify({
+            bid: this.bId,
+            cols: cols,
+          }),
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        }).then(res => {
+          return res.json()
+        }).then(result => {
+          let { data, code, msg } = result
+          if (code === 1) {
+            let url = ''
+            if (!this.env || this.env === 'prod') {
+              url = `https://lottery.camlook.cn/?bId=${this.lightData.raffle1BizId}&env=dev&h5Type=30`
+            } else {
+              url = `https://lottery.camlook.cn/?bId=${this.lightData.raffle1BizId}&h5Type=30`
+            }
+            window.location.replace(url)
+          } else {
+            this.$message({
+              message: msg,
+              type: 'warning'
+            })
+          }
+        }).finally(() => {
+          this.loading = false
+        })
+      },
+      // 检查字符串中是否包含所有指定的中文字符
+      containsAllChineseCharacters(str, chineseChars) {
+        // 将要检查的字符拆分为数组
+        const charsArray = chineseChars.split('')
+        // 遍历每个字符并检查是否存在
+        for (const char of charsArray) {
+          if (!str.includes(char)) {
+            return false
+          }
+        }
+        return true
+      },
       // 截取url中的数据
       getQueryParam (paramName) {
         // 获取当前URL的查询字符串部分  

lottery/lightUpWl.html

@@ -15,10 +15,10 @@
   <!-- 引入element 的组件库-->
   <script
     src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017747738/element-ui.js"></script>
-  <!-- <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
+  <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
   <script>
 		  var vConsole = new window.VConsole();
-		</script> -->
+		</script>
 </head>
 <style>
   body {
@@ -110,6 +110,7 @@
   .ask_btn img {
     width: 50px;
     height: 50px;
+    border-radius: 50%;
   }
 
   .activity_box {
@@ -201,17 +202,13 @@
   }
 
   .dialog_bg {
-    width: 275px;
+    max-width: 275px;
     height: 370px;
+    border-radius: 20px;
     position: relative;
+    object-fit: contain;
   }
 
-  .qrcode {
-    width: 125px;
-    height: 125px;
-    position: absolute;
-    bottom: 260px;
-  }
 
   .save_btn {
     padding: 15px 77px;
@@ -228,12 +225,17 @@
     font-size: 14px;
     color: #CB4E35;
     padding-top: 5px;
+    padding-bottom: 15px;
   }
 
   .activity_msg {
     font-size: 14px;
     color: #CB4E35;
   }
+  .activity_msg p {
+    margin: 0;
+    line-height: 24px;
+  }
 </style>
 
 <body>
@@ -248,7 +250,7 @@
       <div class="wl_btn" @click="handleAsk">
         <div class="image_wrapper">
           <img class="btn_img" src="./img/wl_btn.png" />
-          <div class="btn_text">{{lightData.wxcpLightenClientList.length == 5 ? '点亮成功，解锁终极大奖' : '邀请好友点亮'}}</div>
+          <div class="btn_text">{{lightData.raffle2Num ? '点亮成功，解锁终极大奖' : '邀请好友点亮'}}</div>
         </div>
       </div>
     </div>
@@ -261,11 +263,8 @@
         <span>3.完成任务</span>
       </div>
       <div class="ask_btn">
-        <img src="./img/ask_btn.png" />
-        <img src="./img/ask_btn.png" />
-        <img src="./img/ask_btn.png" />
-        <img src="./img/ask_btn.png" />
-        <img src="./img/ask_btn.png" />
+        <img v-for="(item, index) in lightData.wxcpLightenClientList" :key="index" :src="item.head || require('img/ask_btn.png')" />
+        <img v-for="i in (5-lightData.wxcpLightenClientList.length)" :key="i" src="img/ask_btn.png" />
       </div>
       <div class="activity_box">
         <div class="lottery">
@@ -276,7 +275,7 @@
               <div>每邀请1人点亮即可抽奖1次</div>
             </div>
           </div>
-          <div :class="lightData.raffle1Num ? 'award_btn_ac' : 'award_btn'">{{lightData.raffle1Num ? '去抽奖' : '未完成'}}
+          <div :class="lightData.raffle1Num ? 'award_btn_ac' : 'award_btn'" @click="handleLottery(lightData.raffle1BizId, lightData.raffle1Num)">{{lightData.raffle1Num ? '去抽奖' : '未完成'}}
           </div>
         </div>
         <div class="lottery">
@@ -287,7 +286,7 @@
               <div>完全点亮即可抽取终极大奖！</div>
             </div>
           </div>
-          <div :class="lightData.raffle2Num ? 'award_btn_ac' : 'award_btn'">{{lightData.raffle2Num ? '去抽奖' : '未完成'}}
+          <div :class="lightData.raffle2Num ? 'award_btn_ac' : 'award_btn'" @click="handleLottery(lightData.raffle2BizId, lightData.raffle2Num)">{{lightData.raffle2Num ? '去抽奖' : '未完成'}}
           </div>
         </div>
         <div class="activity_title">活动信息</div>
@@ -298,8 +297,6 @@
     <div class="prize_dialog" v-if="showAskDialog">
       <div class="dialog_body">
         <img class="dialog_bg" :src="lightData.urlPost" />
-        <!-- <img class="dialog_bg" src="./img/ask_bg.png" />
-        <img class="qrcode" src="./img/prize-bg.png" /> -->
         <div class="save_btn" @click="saveImage">保存图片</div>
       </div>
     </div>
@@ -315,7 +312,15 @@
         env: '',
         showAskDialog: false,
         lightData: {
-          wxcpLightenClientList: []
+          urlPost: '',
+          wxcpLightenClientList: [],
+          wxcpLighten: {
+            activityInfo: '',
+          },
+          raffle1Num: 0,
+          raffle2Num: 0,
+          raffle1BizId: null,
+          raffle2BizId: null,
         },
       }
     },
@@ -325,8 +330,8 @@
       if (!this.env || this.env === 'prod') {
         this.httpUrl = 'https://wlapi.wefanbot.com'
       } else {
-        // this.httpUrl = 'http://test.wefanbot.com:18993'
-        this.httpUrl = 'http://192.168.1.147:18993'
+        this.httpUrl = 'http://test.wefanbot.com:18993'
+        // this.httpUrl = 'http://192.168.1.147:18993'
       }
       this.ifH5Type()
     },
@@ -397,8 +402,6 @@
             let { data, code, msg } = result
             if (code === 1) {
               this.lightData = data
-              console.log('dd', this.lightData.wxcpLightenClientList);
-
             } else {
               this.$message({
                 message: msg,
@@ -425,6 +428,21 @@
         document.body.removeChild(link);
         this.showAskDialog = false
       },
+      handleLottery (bizId, status) {
+        if (status) {
+          let url = ''
+          if (!this.env || this.env === 'prod') {
+            url = `https://lottery.camlook.cn/?bId=${bizId}&env=dev&h5Type=30`
+          } else {
+            url = `https://lottery.camlook.cn/?bId=${bizId}&h5Type=30`
+          }
+          window.location.replace(url)
+        } else {
+          this.$message({
+            message: '未完成',
+          }) 
+        }
+      },
       // 截取url中的数据
       getQueryParam (paramName) {
         // 获取当前URL的查询字符串部分