828

src/components/activity/extensionV1Shop.vue

+<template>
+  <div class="activity">
+    <img v-lazy="img1" alt />
+    <div class="form-block">
+      <div class="input-block">
+        <input
+          placeholder="请输入手机号"
+          autofocus="autofocus"
+          type="number"
+          pattern="[0-9]*"
+          v-model="mobile"
+        />
+      </div>
+
+      <div class="input-block">
+        <input
+          placeholder="请输入短信验证码"
+          oninput="if(value.length>4)value=value.slice(0,4)"
+          type="number"
+          maxlength="4"
+          pattern="[0-9]*"
+          v-model="msgCode"
+        />
+        <button class="codeMsg right-btn" @click="sendMobileCode" v-if="time===0">发送验证码</button>
+        <button class="codeMsg disabled right-btn" v-if="time>0">{{time}}s后重新发送</button>
+      </div>
+      <div class="btn-block">
+        <div class="btn" ref="btn" @click="bindMobile">领取99元特惠课</div>
+      </div>
+      <div class="tip">
+        <img :src="lock" alt />&nbsp;唱唱会保护您的隐私 请放心输入
+      </div>
+    </div>
+    <img v-lazy="img2" alt />
+    <img v-lazy="img3" alt />
+    <img v-lazy="img4" alt />
+    <div class="nav" @click="navTo" ref="nav">
+      <div class="btn">立即领取</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { spcShopImg } from "../../util/imgUrl";
+import img1 from "../../assets/spcShop/21@2x.png";
+import img2 from "../../assets/spcShop/22@2x.png";
+import img3 from "../../assets/spcShop/23@2x.png";
+import img4 from "../../assets/spcShop/24@2x.png";
+import lock from "../../assets/spcShop/icon_lock@2x.png";
+import { Toast } from "vant";
+import {
+  sendMobileCodeApi,
+  getUserDetailApi,
+  bindMobileApi,
+  getGoodsDetailApi
+} from "../../service/api";
+export default {
+  name: "extensionV1Shop",
+  data() {
+    return {
+      inviteList: [],
+      img1: img1,
+      img2: img2,
+      img3: img3,
+      img4: img4,
+      lock: lock,
+      imgCode: "",
+      msgCode: "",
+      time: 0,
+      mobile: ""
+    };
+  },
+  filters: {},
+  mounted() {
+    window.onscroll = () => {
+      //变量t是滚动条滚动时，距离顶部的距离
+      let t = document.documentElement.scrollTop || document.body.scrollTop;
+      if (this.$refs.nav) {
+        if (t > 300) {
+          this.$refs.nav.style.opacity = 1;
+        } else {
+          this.$refs.nav.style.opacity = 0;
+        }
+      }
+    };
+    if (!this.$route.query.shopId) {
+      this.$router.push("error");
+      return;
+    } else {
+      getGoodsDetailApi(this.$route.query.shopId).then(res => {});
+    }
+  },
+  methods: {
+    navTo() {
+      window.scrollTo(0, 0);
+    },
+    bindMobile() {
+      this.$sa.quick("trackHeatMap", this.$refs.btn);
+      if (this.msgCode === "" || !this.msgCode) {
+        Toast("请填写手机验证码");
+        return false;
+      }
+      let json = {
+        verify_code: this.msgCode
+      };
+      let mobileCheck = /^1\d{10,11}$/;
+      if (this.mobile.match(mobileCheck)) {
+        json.mobile = this.mobile;
+      } else {
+        Toast("请正确填写手机号");
+        return false;
+      }
+      if (window.location.href.indexOf("teacher_id") > -1) {
+        json.teacher_id =
+          common.getParamhref().teacher_id || this.$route.query.teacher_id;
+      }
+      json.source = "login";
+      let query = { shopId: this.$route.query.shopId, type: "" };
+      if (this.$route.query.invite_code) {
+        query.invite_code = this.$route.query.invite_code;
+      }
+      if (localStorage.getItem("gdt_vid")) {
+        query.gdt_vid = localStorage.getItem("gdt_vid");
+      }
+      if (window.location.href.indexOf("cct_user_id") > -1) {
+        query.cct_user_id = comment.getParamhref().cct_user_id;
+      }
+      console.log(json);
+      bindMobileApi(json)
+        .then(data => {
+          getUserDetailApi().then(res => {
+            localStorage.setItem("userDesc", JSON.stringify(res));
+            this.$router.push({
+              name: "buy",
+              query: query
+            });
+          });
+        })
+        .catch(res => {});
+    },
+    refImgCode() {
+      this.$refs.imgCode.src = "/api/public/img/verify?flag=" + Math.random();
+    },
+    sendMobileCode() {
+      let mobileCheck = /^1\d{10,11}$/;
+      console.log(this.mobile);
+      let json = {};
+      if (this.mobile.match(mobileCheck)) {
+        json.mobile = this.mobile;
+      } else {
+        Toast("请正确填写手机号");
+        return false;
+      }
+      // json.img_code = this.imgCode
+      this.time = 30;
+      this.timeO();
+
+      this.$sa.track("clickSendcode", {});
+      sendMobileCodeApi(json)
+        .then(res => {
+          if (res === "操作成功") {
+            Toast("验证码已发送");
+          } else {
+            this.time = 0;
+            Toast(res);
+          }
+        })
+        .catch(res => {});
+    },
+    timeO() {
+      if (this.time > 0) {
+        this.time--;
+        setTimeout(() => {
+          this.timeO();
+        }, 1000);
+      }
+    }
+  }
+};
+</script>
+<style>
+img,
+video {
+  max-width: 100%;
+}
+</style>
+<style scoped lang="less">
+@import "../../util/public";
+@red: #fc4a1b;
+@borderRadius: 8px;
+.activity {
+  background-color: #f9d048;
+  .codeMsg {
+    border-radius: 4 * @toVw;
+    border: 1 * @toVw solid rgba(96, 173, 240, 1);
+    background: white;
+    color: rgb(96, 173, 240);
+    outline: none;
+    float: right;
+    padding: 8 * @toVw 16 * @toVw;
+    &.disabled {
+      opacity: 0.5;
+    }
+  }
+  .form-block {
+    // position: relative;
+    z-index: 10;
+    background: #f9d048;
+    // top: -42*@toVw;
+    padding: 20 * @toVw;
+    // border-radius:20*@toVw;
+    .tip {
+      font-size: 12 * @toVw;
+      color: #952700;
+      text-align: center;
+      margin-top: 16px;
+      img{
+        width: 11* @toVw;
+        position: relative;
+        top: 2* @toVw;
+      }
+    }
+    .input-block {
+      width: 273 * @toVw;
+      height: 47 * @toVw;
+      line-height: 47 * @toVw;
+      text-indent: 10 * @toVw;
+      border: 1 * @toVw dashed #952700;
+      margin-bottom: 18 * @toVw;
+      position: relative;
+      .img {
+        position: absolute;
+        right: 10 * @toVw;
+        width: 100 * @toVw;
+        top: 10 * @toVw;
+        font-size: 12 * @toVw;
+      }
+      .right-btn {
+        position: absolute;
+        right: 10 * @toVw;
+        padding: 0;
+        width: 100 * @toVw;
+        top: 10 * @toVw;
+        height: 25 * @toVw;
+        line-height: 25 * @toVw;
+        font-size: 12 * @toVw;
+      }
+      input {
+        padding: 10 * @toVw 0;
+        font-size: 14 * @toVw;
+        background: transparent;
+        font-family: PingFangSC-Semibold;
+        font-weight: 600;
+        color: rgba(0, 0, 0, 1);
+        line-height: 20 * @toVw;
+        outline: none;
+        border: none;
+        &::-webkit-input-placeholder {
+          font-size: 14 * @toVw;
+          font-family: PingFangSC-Semibold;
+          font-weight: 600;
+          color: #952700;
+          line-height: 20 * @toVw;
+        } /* 使用webkit内核的浏览器 */
+        &:-moz-placeholder {
+          font-size: 14 * @toVw;
+          font-family: PingFangSC-Semibold;
+          font-weight: 600;
+          color: #952700;
+          line-height: 20 * @toVw;
+        } /* Firefox版本4-18 */
+        &::-moz-placeholder {
+          font-size: 14 * @toVw;
+          font-family: PingFangSC-Semibold;
+          font-weight: 600;
+          color: #952700;
+          line-height: 20 * @toVw;
+        } /* Firefox版本19+ */
+        &:-ms-input-placeholder {
+          font-size: 14 * @toVw;
+          font-family: PingFangSC-Semibold;
+          font-weight: 600;
+          color: #952700;
+          line-height: 20 * @toVw;
+        }
+      }
+    }
+    .btn-block {
+      text-align: center;
+      margin-top: 27 * @toVw;
+      .btn {
+        width: 190 * @toVw;
+        height: 35 * @toVw;
+        background: #f83a2a;
+        color: white;
+        line-height: 35 * @toVw;
+        border-radius: 23 * @toVw;
+        font-size: 16 * @toVw;
+      }
+    }
+  }
+  .nav {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    transition: all 0.5s;
+    background: white;
+    height: 63 * @toVw;
+    z-index: 1000;
+    padding: 7 * @toVw 15 * @toVw;
+    box-sizing: border-box;
+    .btn {
+      background: #ff7d77;
+      height: 50 * @toVw;
+      color: white;
+      text-align: center;
+      line-height: 50 * @toVw;
+      border-radius: 24 * @toVw;
+      font-size: 20 * @toVw;
+    }
+  }
+}
+</style>

src/router/index.js

@@ -40,6 +40,24 @@ const router = new Router({
         title: '唱唱启蒙'
       }
     },
+    {
+      path: '/extensionV1Shop',
+      name: 'extensionV1Shop',
+      component: () => import('@/components/activity/extensionV1Shop'),//
+      meta: {
+        deep: 0,
+        noNew: true,
+      }
+    },
+    {
+      path: '/extensionV1',
+      name: 'extensionV1',
+      component: () => import('@/components/activity/extensionV1'),//
+      meta: {
+        deep: 0,
+        noNew: true,
+      }
+    },
     {
       path: '/guideActivity',
       name: 'guideActivity',

src/service/index.js

@@ -15,7 +15,7 @@ axios.interceptors.request.use(
   config => {
     // 获取token
     // process.env.versionTime
-    let versiontime = '080221100'
+    let versiontime = '080281100'
     const token = localStorage.getItem('cc_token');
     // 设置参数格式
     if (!config.headers['Content-Type']) {