Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
wfg
/
lottery
2
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

增加专属活码，领取奖励

duanshenglang 1 miesiąc temu
rodzic
d1e81f8d6e
commit
a08cbdd80c
11 zmienionych plików z 1169 dodań i 20 usunięć
Widok podzielony Pokaż statystyki zmian
  1. BIN
      lottery/img/left.png
  2. BIN
      lottery/img/live_code_bg.png
  3. BIN
      lottery/img/ready_code.png
  4. BIN
      lottery/img/red_bg.png
  5. BIN
      lottery/img/red_packet.png
  6. BIN
      lottery/img/right.png
  7. 27 20
      lottery/index.html
  8. 366 0
      lottery/live_code.html
  9. 146 0
      lottery/money.html
  10. 358 0
      lottery/prize.html
  11. 272 0
      lottery/receiveMoney.html

BIN
lottery/img/left.png
Wyświetl plik


BIN
lottery/img/live_code_bg.png
Wyświetl plik


BIN
lottery/img/ready_code.png
Wyświetl plik


BIN
lottery/img/red_bg.png
Wyświetl plik


BIN
lottery/img/red_packet.png
Wyświetl plik


BIN
lottery/img/right.png
Wyświetl plik


+ 27 - 20
lottery/index.html
Wyświetl plik 

@@ -380,7 +380,7 @@
 
 			<img class="qrcode-img" :src="qrCodeData.qrCode" />
 
 			<div class="qrcode-msg">{{qrCodeData.msg}}</div>
 
 		</div>
 
-		<div v-else>
 
+		<div v-if="h5Type == 19">
 
 			<div class="lotteryPage">
 
 				<div class="event_notice" @click="handleRule">
 
 					<span>活动须知</span>
 
@@ -427,7 +427,7 @@
 
 						<span class="prize-money">{{prizeData.money}}</span>
 
 						<span class="prize-unit">元</span>
 
 					</div>
 
-					<img class="dialog-btn" src="./img/dialog-btn.png" />
 
+					<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">
 
@@ -574,31 +574,38 @@
 
 						this.httpUrl = 'http://test.wefanbot.com:18993'
 
 					}
 
 					this.bId = this.getQueryParam('bId')
 
-					
-					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);
 
+					this.h5Type = this.getQueryParam('h5Type')
 
+					if (this.h5Type == 19) {
 
+						if (this.getQueryParam('openId') || localStorage.getItem('openId')) {
 
+							if (!this.getQueryParam('externalUserid')) {
 
+								this.gerQwAuth(this.bId);
 
 							} else {
 
-								this.h5Type = this.getQueryParam('h5Type')
 
-								if (this.h5Type == 19) {
 
+								if (this.getQueryParam('externalUserid') === 'unknown') {
 
+									this.gerQwCode(this.bId);
 
+								} else {
 
 									this.raffleInfo();
 
 									this.raffleRecord()
 
 									this.getCityLevel()
 
 									this.getAllCar()
 
-								} else if (this.h5Type == 20) {
 
-									// 获取当前页面的查询参数
 
-									var currentQueryParams = window.location.search;
 
-									window.location.replace('h5Type-20.html' + currentQueryParams)
 
+									this.getQyWxSign()
 
 								}
 
-								this.getQyWxSign()
 
 							}
 
+						} else {
 
+							// 走授权操作
 
+							this.getAuth();
 
 						}
 
-					} 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)
 
 					}
 
         },
 
         methods: {
 
@@ -663,7 +670,7 @@
 
 					},
 
 					// 内容类型的分享页，获取企业微信的签名
 
 					getQyWxSign () {
 
-						let shareUrl = `${window.location.origin}?bId=${this.bId}&h5Type=${this.getQueryParam('h5Type')}`
 
+						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()

+ 366 - 0
lottery/live_code.html
Wyświetl plik 

@@ -0,0 +1,366 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>专属活码</title>
 
+    <!--引入 element-ui 的样式，-->
 
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 
+    <!-- 必须先引入vue，  后使用element-ui -->
 
+    <script src="./js/vue.js"></script>
 
+    <!-- 引入element 的组件库-->
 
+    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 
+	  <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
 
+    <!-- <script>
 
+		  var vConsole = new window.VConsole();
 
+		</script> -->
 
+</head>
 
+<style>
 
+  body {
 
+    margin: 0;
 
+    padding: 0;
 
+  }
 
+  .box {
 
+    width: 100vw;
 
+    height: 100vh;
 
+    box-sizing: border-box;
 
+  }
 
+  .page1 {
 
+    background: #FAFAFA;
 
+  }
 
+  .page2 {
 
+    background: #FFFFFF;
 
+  }
 
+  .ready_code_box {
 
+    position: relative;
 
+    padding-top: 70px;
 
+  }
 
+  .ready_code {
 
+    width: 100%;
 
+  }
 
+  .code_tip {
 
+    position: absolute;
 
+    bottom: 7px;
 
+    font-weight: bold;
 
+    font-size: 24px;
 
+    color: #222222;
 
+    text-align: center;
 
+    width: 100%;
 
+  }
 
+  .form_title {
 
+    font-weight: bold;
 
+    font-size: 24px;
 
+    color: #222222;
 
+    text-align: center;
 
+    width: 100%;
 
+    padding: 60px 0 7px;
 
+    background: #FAFAFA;
 
+  }
 
+  .main_tip {
 
+    color: #2885FF;
 
+  }
 
+  .page_tip {
 
+    font-weight: 500;
 
+    font-size: 14px;
 
+    color: #222222;
 
+    text-align: center;
 
+    width: 100%;
 
+    padding-top: 8px;
 
+  }
 
+  .page_tip_page2 {
 
+    padding-bottom: 40px;
 
+  }
 
+  .form_list {
 
+    background: #FFFFFF;
 
+  }
 
+  .page_btn {
 
+    width: 305px;
 
+    height: 52px;
 
+    line-height: 52px;
 
+    background: #222222;
 
+    border-radius: 20px;
 
+    font-weight: 500;
 
+    font-size: 16px;
 
+    color: #FFFFFF;
 
+    text-align: center;
 
+  }
 
+  .el-form-item__label {
 
+    padding-right: 0;
 
+    font-weight: 500;
 
+    font-size: 14px;
 
+    color: #666666;
 
+  }
 
+  .el-input__inner{
 
+    border: none;
 
+    font-weight: 500;
 
+    font-size: 14px;
 
+    color: #222222;
 
+    text-align: right;
 
+  }
 
+  .el-form-item {
 
+    margin-bottom: 0;
 
+    border-bottom: 1px solid #F9F9F9;
 
+    padding: 10px 0;
 
+    padding-left: 35px;
 
+  }
 
+  .live_code_box {
 
+    position: relative;
 
+    padding-top: 96px;
 
+    width: 315px;
 
+    height: 329px;
 
+    margin: 0 auto;
 
+  }
 
+  .salesMan_style {
 
+    text-align: center;
 
+    line-height: 14px;
 
+    padding-bottom: 10px;
 
+  }
 
+  .live_code_bg {
 
+    width: 315px;
 
+  }
 
+  .live_code {
 
+    width: 180px;
 
+    position: absolute;
 
+    top: 195px;
 
+    left: 68px;
 
+  }
 
+  .live_code_tip {
 
+    position: absolute;
 
+    bottom: 0;
 
+    font-weight: 500;
 
+    font-size: 14px;
 
+    color: #222222;
 
+    width: 100%;
 
+    text-align: center;
 
+  }
 
+  .foot_btn {
 
+    display: flex;
 
+    align-items: center;
 
+    position: fixed;
 
+    bottom: 40px;
 
+    left: 30px;
 
+  }
 
+  .save_btn {
 
+    width: 152px;
 
+    height: 52px;
 
+    line-height: 52px;
 
+    text-align: center;
 
+    border-radius: 20px;
 
+    border: 1px solid #222222;
 
+    box-sizing: border-box;
 
+    font-weight: 500;
 
+    font-size: 16px;
 
+    color: #222222;
 
+    margin-right: 11px;
 
+  }
 
+  .data_btn {
 
+    width: 152px;
 
+    height: 52px;
 
+    line-height: 52px;
 
+    text-align: center;
 
+    background: #222222;
 
+    border-radius: 20px;
 
+    font-weight: 500;
 
+    font-size: 16px;
 
+    color: #FFFFFF;
 
+  }
 
+  
+  
+  
+  
+  
+</style>
 
+
 
+<body>
 
+  <div id="box" class="box" :class="step === 2 ? 'page2' : 'page1'">
 
+    <!--  引导页面 -->
 
+    <div v-if="step === 1">
 
+      <div class="ready_code_box">
 
+        <image class="ready_code" src="./img/ready_code.png"></image>
 
+        <div class="code_tip">
 
+          <span>生成我的</span>
 
+          <span class="main_tip">专属活码</span>
 
+        </div>
 
+      </div>
 
+      <div class="page_tip">引导门店客户添加，领取引流激励！</div>
 
+      <div class="page_btn" style="margin: 150px auto 0;" @click="createQrcode">创建活码</div>
 
+    </div>
 
+    <!-- 创建活码 -->
 
+    <div v-if="step === 2">
 
+      <div class="form_title">
 
+        <span>生成我的</span>
 
+        <span class="main_tip">专属活码</span>
 
+      </div>
 
+      <div class="page_tip page1 page_tip_page2">引导门店客户添加，领取引流激励！</div>
 
+      <div class="form_list">
 
+        <el-form ref="form" :model="form" label-position="left" label-width="84px">
 
+          <el-form-item label="顾问姓名：">
 
+            <el-input v-model="form.salesMan" placeholder="请输入"></el-input>
 
+          </el-form-item>
 
+          <el-form-item label="经销商名称：">
 
+            <el-input v-model="form.ownerDealerName" placeholder="请输入"></el-input>
 
+          </el-form-item>
 
+          <el-form-item label="经销商代码：">
 
+            <el-input v-model="form.ownerDealerCode" placeholder="请输入"></el-input>
 
+          </el-form-item>
 
+          <el-form-item label="联系电话：">
 
+            <el-input v-model="form.phone" placeholder="请输入"></el-input>
 
+          </el-form-item>
 
+        </el-form>
 
+      </div>
 
+      <div class="page_btn" style="margin: 177px auto 0;" @click="handleQrcode">创建活码</div>
 
+    </div>
 
+    <!-- 我的活码 -->
 
+    <div v-if="step === 3">
 
+      <div class="live_code_box">
 
+        <div class="salesMan_style">{{salesMan}}</div>
 
+        <image class="live_code_bg" src="./img/live_code_bg.png"></image>
 
+        <image class="live_code" :src="qrCode"></image>
 
+        <div class="live_code_tip">
 
+          <div>扫描二维码，添加官方企业微信</div>
 
+          <div>获取最新资讯</div>
 
+        </div>
 
+      </div>
 
+      <div class="foot_btn">
 
+        <div class="save_btn" @click="saveImage">保存二维码</div>
 
+        <div class="data_btn" @click="showData">数据查看</div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</body>
 
+<script>
 
+    new Vue({
 
+        el: '#box',
 
+        data() {
 
+          return {
 
+            httpUrl: '',
 
+            bId: null,
 
+            env: '',
 
+            memberId: null,
 
+            corpId: null,
 
+            step: 2,
 
+            qrCode: '',
 
+            salesMan: '',
 
+            form: {
 
+              salesMan: '',
 
+              ownerDealerName: '',
 
+              ownerDealerCode: '',
 
+              phone: ''
 
+            },
 
+          }
 
+        },
 
+        created() {
 
+					this.bId = this.getQueryParam('bId')
 
+          this.env = this.getQueryParam('env')
 
+
 
+          if (!this.env || this.env === 'prod') {
 
+						this.httpUrl = 'https://wlapi.wefanbot.com'
 
+					} else {
 
+						this.httpUrl = 'http://test.wefanbot.com:18993'
 
+					}
 
+          if (this.getQueryParam('memberId')) {
 
+            // 已授权
 
+					  this.memberId = this.getQueryParam('memberId')
 
+					  this.corpId = this.getQueryParam('corpId')
 
+            this.findQrCode()
 
+          } else {
 
+            // 授权
 
+            this.getAuth()
 
+          }
 
+        },
 
+        methods: {
 
+          getAuth () {
 
+            fetch(this.httpUrl + `/p/insuite/p/getRedirectUri?env=${this.env}&bId=${this.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'
 
+									})
 
+								}
 
+              })
 
+          },
 
+          findQrCode () {
 
+            fetch(this.httpUrl + '/scrm/v1/wxcp-live-code-counselor/p/findQrCodeByH5', {
 
+              method: 'post',
 
+              body: JSON.stringify({
 
+								corpId: this.corpId,
 
+								memberId: this.memberId,
 
+              }),
 
+              headers: {
 
+                'Content-Type': 'application/json'
 
+              }
 
+            }).then(res => {
 
+							return res.json()
 
+						}).then(result => {
 
+							let { data, code, msg } = result
 
+							if (code === 1) {
 
+								this.step = 3
 
+                this.salesMan = data.salesMan
 
+                this.qrCode = data.qrCode
 
+							} else {
 
+								this.step = 1
 
+							}
 
+						})
 
+          },
 
+          createQrcode () {
 
+            this.step = 2
 
+          },
 
+          // 创建活码
 
+          handleQrcode () {
 
+            fetch(this.httpUrl + '/scrm/v1/wxcp-live-code-counselor/p/addByH5', {
 
+              method: 'post',
 
+              body: JSON.stringify({
 
+								corpId: this.corpId,
 
+								memberId: this.memberId,
 
+                ...this.form
 
+              }),
 
+              headers: {
 
+                'Content-Type': 'application/json'
 
+              }
 
+            }).then(res => {
 
+							return res.json()
 
+						}).then(result => {
 
+							let { data, code, msg } = result
 
+							if (data) {
 
+								this.step = 3
 
+                this.qrCode = data.qrCode
 
+							} else {
 
+								this.step = 1
 
+							}
 
+						})
 
+          },
 
+          // 保存二维码
 
+          saveImage() {
 
+            const link = document.createElement('a')
 
+            link.href = this.qrCode
 
+            link.download = 'qrCode.jpg'
 
+            document.body.appendChild(link);
 
+            link.click();
 
+            document.body.removeChild(link);
 
+          },
 
+          // 查看数据
 
+          showData () {
 
+            window.location.href = `prize.html?httpUrl=${this.httpUrl}&corpId=${this.corpId}&memberId=${this.memberId}`;
 
+          },
 
+          // 截取url中的数据
 
+					getQueryParam (paramName) {
 
+						// 获取当前URL的查询字符串部分  
+						const queryString = window.location.search;
 
+						// 创建一个URLSearchParams对象  
+						const urlParams = new URLSearchParams(queryString);
 
+						// 返回指定参数的值，如果不存在则返回null  
+						return urlParams.get(paramName);
 
+					},
 
+        }
 
+    })   
+</script>
 
+
 
+</html>

+ 146 - 0
lottery/money.html
Wyświetl plik 

@@ -0,0 +1,146 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>领取奖励</title>
 
+    <!--引入 element-ui 的样式，-->
 
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 
+    <!-- 必须先引入vue，  后使用element-ui -->
 
+    <script src="./js/vue.js"></script>
 
+    <!-- 引入element 的组件库-->
 
+    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 
+	  <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
 
+    <!-- <script>
 
+		  var vConsole = new window.VConsole();
 
+		</script> -->
 
+</head>
 
+<style>
 
+  body {
 
+    margin: 0;
 
+    padding: 0;
 
+  }
 
+  .box {
 
+    width: 100vw;
 
+    height: 100vh;
 
+    box-sizing: border-box;
 
+    background: #FAFAFA;
 
+  }
 
+  .page5 {
 
+    width: 100vw;
 
+    height: 100vh;
 
+    box-sizing: border-box;
 
+    padding: 30px 20px 0;
 
+  }
 
+  .redeem_code {
 
+    height: 343px;
 
+    background: #FFFFFF;
 
+    border-radius: 15px;
 
+    padding: 20px 35px 15px 38px;
 
+    margin: 0 10px;
 
+    box-sizing: border-box;
 
+  }
 
+  .redeem_code_title {
 
+    font-weight: 500;
 
+    font-size: 14px;
 
+    color: #999999;
 
+    text-align: center;
 
+  }
 
+  .redeem_code_num {
 
+    display: flex;
 
+    align-items: center;
 
+    font-weight: 400;
 
+    font-size: 14px;
 
+    color: #2885FF;
 
+    justify-content: end;
 
+    padding-top: 10px;
 
+    padding-bottom: 10px;
 
+  }
 
+  .code_num {
 
+    font-weight: 500;
 
+    font-size: 20px;
 
+    color: #222222;
 
+    padding-right: 15px;
 
+    line-height: 28px;
 
+  }
 
+  .redeem_erCode {
 
+    width: 240px;
 
+    height: 240px;
 
+    float: right;
 
+  }
 
+  .tip_title {
 
+    font-weight: 500;
 
+    font-size: 14px;
 
+    color: #222222;
 
+    display: flex;
 
+    align-items: center;
 
+    padding: 20px 0 10px;
 
+  }
 
+  .tip_title:before {
 
+    content: '';
 
+    width: 4px;
 
+    height: 16px;
 
+    background: #2885FF;
 
+    border-radius: 2px;
 
+    display: inline-block;
 
+    margin-right: 5px;
 
+  }
 
+  .tip_content {
 
+    font-weight: 400;
 
+    font-size: 14px;
 
+    color: #666666;
 
+    line-height: 20px;
 
+    padding-bottom: 8px;
 
+  }
 
+</style>
 
+<body>
 
+  <div id="box" class="box">
 
+    <!-- 领取奖励 -->
 
+    <div class="page5">
 
+      <div class="redeem_code">
 
+        <div class="redeem_code_title">兑换码</div>
 
+        <div class="redeem_code_num">
 
+          <span class="code_num">{{prizeCode}}</span>
 
+          <span>复制</span>
 
+        </div>
 
+        <image class="redeem_erCode" :src="urlQrCode"></image>
 
+      </div>
 
+      <div class="tip_title">领取指引:</div>
 
+      <div class="tip_content">1、请复制兑换码并保存二维码</div>
 
+      <div class="tip_content">2、使用个人微信扫描二维码，输入兑换码，领取现金激励</div>
 
+      <div class="tip_title">注意事项:</div>
 
+      <div class="tip_content">1、兑换码仅限领一次</div>
 
+      <div class="tip_content">2、兑换码是领取激励的唯一凭证，请妥善保管，避免因遗忘泄露等问题给您造成经济损失</div>
 
+    </div>
 
+  </div>
 
+</body>
 
+<script>
 
+  new Vue({
 
+      el: '#box',
 
+      data() {
 
+        return {
 
+          prizeCode: '',
 
+          urlQrCode: '',
 
+        }
 
+      },
 
+      created() {
 
+        this.prizeCode = this.getQueryParam('prizeCode')
 
+        this.urlQrCode = this.getQueryParam('urlQrCode')
 
+      },
 
+      methods: {
 
+        // 截取url中的数据
 
+        getQueryParam (paramName) {
 
+          // 获取当前URL的查询字符串部分  
+          const queryString = window.location.search;
 
+          // 创建一个URLSearchParams对象  
+          const urlParams = new URLSearchParams(queryString);
 
+          // 返回指定参数的值，如果不存在则返回null  
+          return urlParams.get(paramName);
 
+        },
 
+      }
 
+  })   
+</script>
 
+
 
+</html>

+ 358 - 0
lottery/prize.html
Wyświetl plik 

@@ -0,0 +1,358 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>数据查看</title>
 
+    <!--引入 element-ui 的样式，-->
 
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 
+    <!-- 必须先引入vue，  后使用element-ui -->
 
+    <script src="./js/vue.js"></script>
 
+    <!-- 引入element 的组件库-->
 
+    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 
+	  <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
 
+    <!-- <script>
 
+		  var vConsole = new window.VConsole();
 
+		</script> -->
 
+</head>
 
+<style>
 
+  body {
 
+    margin: 0;
 
+    padding: 0;
 
+  }
 
+  .box {
 
+    width: 100vw;
 
+    height: 100vh;
 
+    box-sizing: border-box;
 
+    background: #FAFAFA;
 
+  }
 
+  .page4 {
 
+    width: 100vw;
 
+    height: 100vh;
 
+    box-sizing: border-box;
 
+    padding: 20px 10px 0;
 
+  }
 
+  .data_box {
 
+    height: 137px;
 
+    margin: 0 auto;
 
+    background: #FFFFFF;
 
+    border-radius: 10px;
 
+    padding: 20px 48px;
 
+    box-sizing: border-box; 
+  }
 
+  .data_title {
 
+    font-weight: 500;
 
+    font-size: 16px;
 
+    color: #222222;
 
+    text-align: center;
 
+  }
 
+  .total_num {
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
+    text-align: center;
 
+    padding-top: 20px;
 
+  }
 
+  .data_line {
 
+    width: 1px;
 
+    height: 49px;
 
+    background: #F5F5F5;
 
+  }
 
+  .total {
 
+    font-weight: 600;
 
+    font-size: 24px;
 
+    color: #222222;
 
+    line-height: 24px;
 
+  }
 
+  .des {
 
+    font-weight: 400;
 
+    font-size: 12px;
 
+    color: #222222;
 
+    padding-top: 5px;
 
+  }
 
+  .prize_list {
 
+    background: #FFFFFF;
 
+    height: calc(100vh - 167px);
 
+    margin-top: 10px;
 
+    padding: 20px 15px;
 
+    box-sizing: border-box;
 
+    overflow-y: auto;
 
+  }
 
+  .prize_title {
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    padding-bottom: 5px;
 
+  }
 
+  .prize_title img{
 
+    width: 22px;
 
+    height: 22px;
 
+  }
 
+  .prize_title span{
 
+    font-weight: 500;
 
+    font-size: 16px;
 
+    color: #222222;
 
+    padding: 0 5px;
 
+  }
 
+  .prize_item {
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
+    border-bottom: 1px solid #F9F9F9;
 
+    padding: 15px 0 20px;
 
+  }
 
+  .prize_item_title {
 
+    font-weight: 400;
 
+    font-size: 14px;
 
+    color: #222222;
 
+    line-height: 20px;
 
+  }
 
+  .prize_item_num {
 
+    font-weight: 400;
 
+    font-size: 12px;
 
+    color: #666666;
 
+    padding-top: 5px;
 
+    line-height: 17px;
 
+  }
 
+  .prize_item_btn {
 
+    width: 72px;
 
+    height: 33px;
 
+    line-height: 33px;
 
+    border-radius: 17px;
 
+    font-weight: 500;
 
+    font-size: 12px;
 
+    color: #FFFFFF;
 
+    text-align: center;
 
+  }
 
+  .btn_no {
 
+    background: #2885FF;
 
+  }
 
+  .btn_ok {
 
+    background: #CCCCCC;
 
+  }
 
+  .el-dialog {
 
+    width: 335px;
 
+    border-radius: 20px;
 
+  }
 
+  .el-dialog__header {
 
+    text-align: center;
 
+  }
 
+  .el-dialog__title {
 
+    font-weight: 500;
 
+    font-size: 16px;
 
+    color: #222222;
 
+  }
 
+  .prize_form .el-form-item{
 
+    padding: 0;
 
+  }
 
+  .prize_form .el-form-item__label {
 
+    line-height: 20px;
 
+  }
 
+  .prize_form .el-input {
 
+    border: 1px solid #CCCCCC;
 
+    border-radius: 5px;
 
+    width: 295px;
 
+  }
 
+  .prize_form .el-input__inner {
 
+    text-align: left;
 
+  }
 
+  .dialog-footer {
 
+    text-align: center;
 
+  }
 
+  .dialog-footer button {
 
+    width: 119px;
 
+    height: 46px;
 
+    background: #2885FF;
 
+    border-radius: 20px;
 
+    font-weight: 500;
 
+    font-size: 16px;
 
+    color: #FFFFFF;
 
+  }
 
+</style>
 
+<body>
 
+  <div id="box" class="box">
 
+    <!-- 数据查看 -->
 
+    <div class="page4">
 
+      <div class="data_box">
 
+        <div class="data_title">新增客户数量</div>
 
+        <div class="total_num">
 
+          <div>
 
+            <div class="total">{{countData.total}}</div>
 
+            <div class="des">累计新增客户</div>
 
+          </div>
 
+          <div class="data_line"></div>
 
+          <div>
 
+            <div class="total">{{countData.todayAdd}}</div>
 
+            <div class="des">今日新增客户</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <div class="prize_list">
 
+        <div class="prize_title">
 
+          <image class="left_icon" src="./img/left.png"></image>
 
+          <span>我的奖品</span>
 
+          <image class="right_icon" src="./img/right.png"></image>
 
+        </div>
 
+        <div class="prize_item" v-for="(item, index) in countData.stimulateList" :key="index">
 
+          <div class="prize_des">
 
+            <div class="prize_item_title">
 
+              <span>{{item.complete ? '恭喜您已达成' : '未达成'}}</span>
 
+              <span style="color: #2885FF;">
 
+                <span v-if="item.rank===1">一等奖：</span>
 
+                <span v-if="item.rank===2">二等奖：</span>
 
+                <span v-if="item.rank===3">三等奖：</span>
 
+                <span>{{item.prizeName}}</span>
 
+              </span>
 
+            </div>
 
+            <div class="prize_item_num" v-if="!item.complete">距离下一阶段奖励还差{{item.needNum}}人</div>
 
+          </div>
 
+          <div v-if="item.complete">
 
+            <div class="prize_item_btn btn_no" @click="handlePrize(item)" v-if="item.accept===1">领取奖励</div>
 
+            <div class="prize_item_btn btn_ok" v-else>已领取</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <el-dialog title="填写收货信息" :visible.sync="showDialog">
 
+        <el-form :model="prizeMsg" class="prize_form" label-position="top">
 
+          <el-form-item label="收件人">
 
+            <el-input v-model="prizeMsg.name"></el-input>
 
+          </el-form-item>
 
+          <el-form-item label="联系方式">
 
+            <el-input v-model="prizeMsg.phone"></el-input>
 
+          </el-form-item>
 
+          <el-form-item label="活动区域">
 
+            <el-input type="textarea" v-model="prizeMsg.address"></el-input>
 
+          </el-form-item>
 
+        </el-form>
 
+        <div slot="footer" class="dialog-footer">
 
+          <el-button type="primary" @click="handleSavePrize">确 定</el-button>
 
+        </div>
 
+      </el-dialog>
 
+    </div>
 
+  </div>
 
+</body>
 
+<script>
 
+  new Vue({
 
+      el: '#box',
 
+      data() {
 
+        return {
 
+          httpUrl: '',
 
+          memberId: null,
 
+          corpId: null,
 
+          countData: {
 
+            stimulateList: [],
 
+            todayAdd: null,
 
+            total: null,
 
+          },
 
+          showDialog: false,
 
+          prizeMsg: {
 
+            name: '',
 
+            phone: '',
 
+            address: '',
 
+            stimulateId: null,
 
+          },
 
+          moneyData: {
 
+            money: null,
 
+            prizeCode: '',
 
+            urlQrCode: '',
 
+          },
 
+        }
 
+      },
 
+      created() {
 
+        this.httpUrl = this.getQueryParam('httpUrl')
 
+        this.corpId = this.getQueryParam('corpId')
 
+        this.memberId = this.getQueryParam('memberId')
 
+        this.showData()
 
+      },
 
+      methods: {
 
+        // 查看数据
 
+        showData () {
 
+          fetch(this.httpUrl + '/scrm/v1/wxcp-live-code-counselor/p/findCountByH5', {
 
+            method: 'post',
 
+            body: JSON.stringify({
 
+              corpId: this.corpId,
 
+              memberId: this.memberId,
 
+            }),
 
+            headers: {
 
+              'Content-Type': 'application/json'
 
+            }
 
+          }).then(res => {
 
+            return res.json()
 
+          }).then(result => {
 
+            let { data, code, msg } = result
 
+            if (data) {
 
+              this.countData = data
 
+            }
 
+          })
 
+        },
 
+        // 领取奖励
 
+        handlePrize  (item) {
 
+          this.prizeMsg.stimulateId = item.stimulateId
 
+          if (item.acceptType === 1) {
 
+            // 表单
 
+            this.showDialog = true
 
+          } else if (item.acceptType === 2) {
 
+            // 红包
 
+            this.getRedMoney()
 
+          }
 
+        },
 
+        // 保存填写的收货信息
 
+        handleSavePrize () {
 
+          fetch(this.httpUrl + '/scrm/v1/wxcp-live-code-counselor/p/receivePrizeByH5', {
 
+            method: 'post',
 
+            body: JSON.stringify({
 
+              corpId: this.corpId,
 
+              memberId: this.memberId,
 
+              ...this.prizeMsg
 
+            }),
 
+            headers: {
 
+              'Content-Type': 'application/json'
 
+            }
 
+          }).then(res => {
 
+            return res.json()
 
+          }).then(result => {
 
+            let { data, code, msg } = result
 
+            if (data) {
 
+              this.showDialog = false
 
+              this.showData()
 
+            }
 
+          })
 
+        },
 
+        // 红包数据
 
+        getRedMoney () {
 
+          fetch(this.httpUrl + '/scrm/v1/wxcp-live-code-counselor/p/receiveMoneyByH5', {
 
+            method: 'post',
 
+            body: JSON.stringify({
 
+              corpId: this.corpId,
 
+              memberId: this.memberId,
 
+              ...this.prizeMsg
 
+            }),
 
+            headers: {
 
+              'Content-Type': 'application/json'
 
+            }
 
+          }).then(res => {
 
+            return res.json()
 
+          }).then(result => {
 
+            let { data, code, msg } = result
 
+            if (data) {
 
+              // 跳转兑换页
 
+              window.location.href = `money.html?prizeCode=${data.prizeCode}&urlQrCode=${data.urlQrCode}`;
 
+            }
 
+          })
 
+        },
 
+        // 截取url中的数据
 
+        getQueryParam (paramName) {
 
+          // 获取当前URL的查询字符串部分  
+          const queryString = window.location.search;
 
+          // 创建一个URLSearchParams对象  
+          const urlParams = new URLSearchParams(queryString);
 
+          // 返回指定参数的值，如果不存在则返回null  
+          return urlParams.get(paramName);
 
+        },
 
+      }
 
+  })   
+</script>
 
+
 
+</html>

+ 272 - 0
lottery/receiveMoney.html
Wyświetl plik 

@@ -0,0 +1,272 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>领取奖励</title>
 
+    <!--引入 element-ui 的样式，-->
 
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 
+    <!-- 必须先引入vue，  后使用element-ui -->
 
+    <script src="./js/vue.js"></script>
 
+    <!-- 引入element 的组件库-->
 
+    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 
+	  <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
 
+    <!-- <script>
 
+		  var vConsole = new window.VConsole();
 
+		</script> -->
 
+</head>
 
+<style>
 
+  body {
 
+    margin: 0;
 
+    padding: 0;
 
+  }
 
+  .box {
 
+    width: 100vw;
 
+    height: 100vh;
 
+    box-sizing: border-box;
 
+    background: #FAFAFA;
 
+  }
 
+  .page6 {
 
+    width: 100vw;
 
+    height: 100vh;
 
+    background: url('./img/red_packet.png') no-repeat center;
 
+    background-size: 100vw 100vh;
 
+		background-repeat: no-repeat;
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+  }
 
+  .cash_prize {
 
+    width: 325px;
 
+    height: 192px;
 
+    background: #FFFFFF;
 
+    border-radius: 20px;
 
+    padding: 20px 20px 15px;
 
+    box-sizing: border-box;
 
+  }
 
+  .cash_prize_title {
 
+    font-weight: 500;
 
+    font-size: 14px;
 
+    color: #222222;
 
+    text-align: center;
 
+    padding-bottom: 15px;
 
+  }
 
+  .cash_input input{
 
+    height: 50px;
 
+    background: #F4F4F4;
 
+    border-radius: 20px;
 
+    text-align: start;
 
+  }
 
+  .cash_btn {
 
+    width: 100%;
 
+    height: 52px;
 
+    margin-top: 20px;
 
+  }
 
+
 
+  .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;
 
+	}
 
+  .dialog-close {
 
+		width: 30px;
 
+		height: 30px;
 
+		margin-top: 20px;
 
+	}
 
+</style>
 
+<body>
 
+  <div id="box" class="box">
 
+    <div class="page6">
 
+      <div class="cash_prize">
 
+        <div class="cash_prize_title">请输入您的兑换码</div>
 
+        <el-input v-model="input" placeholder="请输入" class="cash_input"></el-input>
 
+        <el-button type="warning" round class="cash_btn" @click="getMoney">领取</el-button>
 
+      </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">
 
+            <div class="money-title">微信红包</div>
 
+            <div class="money-content">
 
+              <span class="prize-money">{{prizeMoney}}</span>
 
+              <span class="prize-unit">元</span>
 
+            </div>
 
+            <img class="dialog-btn" src="./img/dialog-btn.png" @click="closePop"/>
 
+            <div class="money-tip">红包到账会有延迟情况，请以实际为准</div>
 
+          </div>
 
+          <img class="dialog-close" src="./img/dialog-close.png" @click="closePop" />
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</body>
 
+<script>
 
+  new Vue({
 
+      el: '#box',
 
+      data() {
 
+        return {
 
+          httpUrl: '',
 
+          bId: null,
 
+          env: '',
 
+          input: '',
 
+					showPrizeDialog: false,
 
+          prizeMoney: null
 
+        }
 
+      },
 
+      created() {
 
+        this.bId = this.getQueryParam('bId')
 
+        this.env = this.getQueryParam('env')
 
+        if (!this.env || this.env === 'prod') {
 
+          this.httpUrl = 'https://wlapi.wefanbot.com'
 
+        } else {
 
+          this.httpUrl = 'http://test.wefanbot.com:18993'
 
+        }
 
+        // 授权
 
+        this.getAuth()
 
+      },
 
+      methods: {
 
+        getAuth () {
 
+          // 获取url上的code
 
+          let code = this.getQueryParam('code')
 
+          if (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.openId = data.openId
 
+              }
 
+            })
 
+          } 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)
 
+          }
 
+        },
 
+        getMoney () {
 
+          fetch(this.httpUrl + '/scrm/v1/wxcp-live-code-counselor/p/prizeCode', {
 
+            method: 'post',
 
+            body: JSON.stringify({
 
+              code: this.input,
 
+              openId: this.openId,
 
+            }),
 
+            headers: {
 
+              'Content-Type': 'application/json'
 
+            }
 
+          }).then(res => {
 
+            return res.json()
 
+          }).then(result => {
 
+            let { data, code, msg } = result
 
+            if (data) {
 
+              this.prizeMoney = data.money
 
+              this.showPrizeDialog = true
 
+            } else {
 
+              this.$message({
 
+                message: msg,
 
+                type: 'warning'
 
+              })
 
+            }
 
+          })
 
+        },
 
+        closePop () {
 
+          this.showPrizeDialog = false
 
+          this.input = ''
 
+          this.prizeMoney = null
 
+        },
 
+        // 截取url中的数据
 
+        getQueryParam (paramName) {
 
+          // 获取当前URL的查询字符串部分  
+          const queryString = window.location.search;
 
+          // 创建一个URLSearchParams对象  
+          const urlParams = new URLSearchParams(queryString);
 
+          // 返回指定参数的值，如果不存在则返回null  
+          return urlParams.get(paramName);
 
+        },
 
+      }
 
+  })   
+</script>
 
+
 
+</html>