|
|
@@ -0,0 +1,533 @@
|
|
|
+<!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: #FFD0D0;
|
|
|
+ background-size: 100vw 100vh;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .activity_content {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 180px);
|
|
|
+ margin-top: 180px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20px 20px 0px 0px;
|
|
|
+ padding: 30px 20px 66px;
|
|
|
+ overflow-y: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .activity_item {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+ .item_title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222222;
|
|
|
+ min-width: 70px;
|
|
|
+ }
|
|
|
+ .item_content {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .foot_btn {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 14px;
|
|
|
+ padding: 0 35px;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .signUp_btn {
|
|
|
+ height: 52px;
|
|
|
+ line-height: 52px;
|
|
|
+ background: #1677FF;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .form_content {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 180px);
|
|
|
+ margin-top: 180px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20px 20px 0px 0px;
|
|
|
+ padding: 20px 20px 66px;
|
|
|
+ overflow-y: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .form_title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #222222;
|
|
|
+ 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-input--prefix .el-input__inner {
|
|
|
+ padding-left: 0;
|
|
|
+ padding-right: 0;
|
|
|
+ }
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+ border-bottom: 1px solid #F9F9F9;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ .el-textarea__inner {
|
|
|
+ border: none;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222222;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .signup_page {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background: url('./img/sign_up.png') no-repeat center;
|
|
|
+ background-size: 100vw 100vh;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+ .signupSucc_page {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background: url('./img/signup_success.png') no-repeat center;
|
|
|
+ background-size: 100vw 100vh;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+ .succ_tip {
|
|
|
+ padding-top: 240px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .signup_title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ padding-top: 80px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 41px;
|
|
|
+ }
|
|
|
+ .signup_box {
|
|
|
+ margin: 30px 20px 0;
|
|
|
+ height: 390px;
|
|
|
+ background: linear-gradient(#D5E6FF 50%, #FFFFFF 100%);
|
|
|
+ border-radius: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .signup_tip {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #222222;
|
|
|
+ padding: 50px 31px 40px 32px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ .signup_code {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #222222;
|
|
|
+ padding: 15px 36px;
|
|
|
+ background: #D3E0F5;
|
|
|
+ border-radius: 20px;
|
|
|
+ margin: 0 20px;
|
|
|
+ }
|
|
|
+ .copy_text {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding-top: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #9FB3C7;
|
|
|
+ }
|
|
|
+ .copy_icon {
|
|
|
+ width: 11px;
|
|
|
+ height: 11px;
|
|
|
+ margin-right: 3px;
|
|
|
+ }
|
|
|
+ .attention {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: start;
|
|
|
+ padding-top: 50px;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ .fail_box {
|
|
|
+ margin: 80px 20px 0;
|
|
|
+ height: 287px;
|
|
|
+ background: linear-gradient(#D5E6FF 50%, #FFFFFF 100%);
|
|
|
+ border-radius: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .fail_img {
|
|
|
+ width: 246px;
|
|
|
+ height: 144px;
|
|
|
+ margin-top: -20px;
|
|
|
+ }
|
|
|
+ .fail_title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 20px 0;
|
|
|
+ }
|
|
|
+ .fail_tip {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="box" class="box">
|
|
|
+ <div class="signup_page" v-if="step === 3">
|
|
|
+ <div class="signup_title">
|
|
|
+ <div>恭喜您已经报名</div>
|
|
|
+ <div>{{toshopData.name}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="signup_box">
|
|
|
+ <div class="signup_tip">请您于活动结束前，凭以下核销码前往预约到店门店领取礼品</div>
|
|
|
+ <div class="signup_code">{{verificationCode}}</div>
|
|
|
+ <div class="copy_text" @click="handleCopy(verificationCode)">
|
|
|
+ <img class="copy_icon" src="./img/copy_icon.png" />
|
|
|
+ <span>点击复制核销码</span>
|
|
|
+ </div>
|
|
|
+ <div class="attention">
|
|
|
+ <div>注意：</div>
|
|
|
+ <div>1.凭证码仅可核销一次，请注意保管</div>
|
|
|
+ <div>2.不记名，不挂失</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="signupSucc_page" v-else-if="step === 4">
|
|
|
+ <div class="succ_tip">
|
|
|
+ <div>感谢参与{{toshopData.name}}活动</div>
|
|
|
+ <div>请联系门店顾问领取礼品</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="signup_page" v-else-if="step === 5">
|
|
|
+ <div class="signup_title">{{toshopData.name}}</div>
|
|
|
+ <div class="fail_box">
|
|
|
+ <img class="fail_img" src="./img/fail_img.png" />
|
|
|
+ <div class="fail_title">很遗憾，您不在此次活动范围内</div>
|
|
|
+ <div class="fail_tip">
|
|
|
+ <div>后续有活动我们将第一时间通知您</div>
|
|
|
+ <div>敬请关注</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page6" v-else>
|
|
|
+ <div class="activity_content" v-if="step === 1">
|
|
|
+ <div class="activity_item">
|
|
|
+ <div class="item_title">活动主题：</div>
|
|
|
+ <div class="item_content">{{toshopData.name}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="activity_item">
|
|
|
+ <div class="item_title">活动对象：</div>
|
|
|
+ <div class="item_content">{{toshopData.target}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="activity_item">
|
|
|
+ <div class="item_title">活动时间：</div>
|
|
|
+ <div class="item_content">{{toshopData.startTime.slice(0, 10) + '~' + toshopData.endTime.slice(0, 10)}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="activity_item">
|
|
|
+ <div class="item_title">活动规则：</div>
|
|
|
+ <div class="item_content" v-html="toshopData.activityInfo"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form_content" v-else-if="step === 2">
|
|
|
+ <div class="form_title">报名表单</div>
|
|
|
+ <el-form ref="form" label-position="left" label-width="100px">
|
|
|
+ <el-form-item v-for="(item, index) in toshopData.formProList" :key="index" :label="item.name + ':'" :required="Boolean(item.isNeed)">
|
|
|
+ <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-date-picker v-if="item.type === 5" v-model="item.value" type="date" placeholder="选择日期">
|
|
|
+ <el-time-picker v-if="item.type === 6" v-model="item.value" placeholder="请选择"></el-time-picker>
|
|
|
+ <el-date-picker v-if="item.type === 7" v-model="item.value" type="datetime" placeholder="选择日期时间"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="foot_btn">
|
|
|
+ <div class="signUp_btn" @click="toSignUp">{{step === 1 ? '去报名' : '确定'}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+<script>
|
|
|
+ new Vue({
|
|
|
+ el: '#box',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ httpUrl: '',
|
|
|
+ bId: null,
|
|
|
+ env: '',
|
|
|
+ openId: '',
|
|
|
+ toshopData: {
|
|
|
+ name: '',
|
|
|
+ target: '',
|
|
|
+ startTime: '',
|
|
|
+ endTime: '',
|
|
|
+ activityInfo: '',
|
|
|
+ formProList: [],
|
|
|
+ },
|
|
|
+ step: 2,
|
|
|
+ verificationCode: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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.ifH5Type()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ifH5Type() {
|
|
|
+ if (this.getQueryParam('openId') || localStorage.getItem('openId')) {
|
|
|
+ if (!this.getQueryParam('externalUserid')) {
|
|
|
+ this.gerQwAuth(this.bId);
|
|
|
+ } else {
|
|
|
+ this.lightenShare()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 走授权操作
|
|
|
+ this.getAuth();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ localStorage.setItem('openId', data.openId)
|
|
|
+ this.ifH5Type()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } 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)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 企微授权
|
|
|
+ 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'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ lightenShare() {
|
|
|
+ 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-toshop-share/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.toshopData = data
|
|
|
+ if (data.client.state === 1) {
|
|
|
+ // 未提交表单
|
|
|
+ this.step = 1
|
|
|
+ } else if (data.client.state === 2) {
|
|
|
+ // 已提交表单
|
|
|
+ this.verificationCode = data.client.verificationCode
|
|
|
+ this.step = 3
|
|
|
+ } else if (data.client.state === 3) {
|
|
|
+ // 已核销
|
|
|
+ this.step = 4
|
|
|
+ } else if (data.client.state === -1) {
|
|
|
+ // 不符合资格
|
|
|
+ this.step = 5
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: msg,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toSignUp () {
|
|
|
+ if (this.step === 1) {
|
|
|
+ this.step = 2
|
|
|
+ } else {
|
|
|
+ let cols = []
|
|
|
+ cols = this.toshopData.formProList.map(item => {
|
|
|
+ return {
|
|
|
+ name: item.name,
|
|
|
+ type: item.type,
|
|
|
+ value: [item.value]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ fetch(this.httpUrl + `/scrm/v1/wxcp-toshop-share/p/formData?openId=${this.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 (data) {
|
|
|
+ this.verificationCode = data.client.verificationCode
|
|
|
+ if (data.client.state === 2) {
|
|
|
+ // 已提交表单
|
|
|
+ this.step = 3
|
|
|
+ } else if (data.client.state === 3) {
|
|
|
+ // 已核销
|
|
|
+ this.step = 4
|
|
|
+ } else if (data.client.state === -1) {
|
|
|
+ // 不符合资格
|
|
|
+ this.step = 5
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: msg,
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 检测是否iOS端
|
|
|
+ iosAgent() {
|
|
|
+ return navigator.userAgent.match(/(iPhone|iPod|iPad);?/i);
|
|
|
+ },
|
|
|
+ // 复制文本函数，微信端，需要在用户触发 Click 事件里面才能执行成功
|
|
|
+ handleCopy(message) {
|
|
|
+ if (this.iosAgent()) {
|
|
|
+ let inputObj = document.createElement("input");
|
|
|
+ inputObj.value = message;
|
|
|
+ document.body.appendChild(inputObj);
|
|
|
+ inputObj.select();
|
|
|
+ inputObj.setSelectionRange(0, inputObj.value.length);
|
|
|
+ this.execCommand('Copy');
|
|
|
+ document.body.removeChild(inputObj);
|
|
|
+ } else {
|
|
|
+ let domObj = document.createElement("span");
|
|
|
+ domObj.innerHTML = message;
|
|
|
+ document.body.appendChild(domObj);
|
|
|
+ let selection = window.getSelection();
|
|
|
+ let range = document.createRange();
|
|
|
+ range.selectNodeContents(domObj);
|
|
|
+ selection.removeAllRanges();
|
|
|
+ selection.addRange(range);
|
|
|
+ this.execCommand('Copy');
|
|
|
+ document.body.removeChild(domObj);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 执行浏览器命令 Copy 顺便输出一下日志，如果在移动端推荐写个方法展示日志或者用alert(msg)也行。
|
|
|
+ execCommand(action) {
|
|
|
+ let is = document.execCommand(action);
|
|
|
+ if (is) {
|
|
|
+ this.$message({
|
|
|
+ message: '复制成功',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: '复制失败',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 截取url中的数据
|
|
|
+ getQueryParam(paramName) {
|
|
|
+ // 获取当前URL的查询字符串部分
|
|
|
+ const queryString = window.location.search;
|
|
|
+ // 创建一个URLSearchParams对象
|
|
|
+ const urlParams = new URLSearchParams(queryString);
|
|
|
+ // 返回指定参数的值，如果不存在则返回null
|
|
|
+ return urlParams.get(paramName);
|
|
|
+ },
|
|
|
+ }
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+</html>
|
