625

src/App.vue

@@ -7,11 +7,11 @@
 </template>
 
 <script>
-// setSize();
-// addEventListener('resize',setSize);
-// function setSize() {
-//     document.documentElement.style.fontSize = document.documentElement.clientWidth/375*10+'px';
-// }
+setSize();
+addEventListener('resize',setSize);
+function setSize() {
+    document.documentElement.style.fontSize = document.documentElement.clientWidth/375*10+'px';
+}
 export default {
   name: 'App',
   mounted(){

src/components/buy/buy.vue

@@ -64,6 +64,7 @@
         </div>
       </div>
     </div>
+
     <footer>
       <div class="sub-block">
         <span v-if="groupDetail.goods_desc">￥{{priceTotal}}</span>
@@ -79,6 +80,20 @@
         <addAddress @closeAdd="closeAdd"></addAddress>
       </div>
     </transition>
+    <van-popup class="orderCancel" v-model="orderCancel"   :overlay="true">
+      <div class="box">
+          <img :src="popup_img" alt="">
+          <div class="content">
+            <h2>参与未成功</h2>
+            <p>真的要放弃孩子启蒙英语的黄金机会吗？</p>
+            <p class="warn">每天10分钟，英语启蒙很轻松！</p>
+            <div class="btnbox">
+              <div @click="orderCancel=false" class="btn fal">含泪放弃</div>
+              <div @click="payOrder(orderFlag)" class="btn suc">报名课程</div>
+            </div>
+          </div>
+      </div>
+    </van-popup>
     <login-page :bind-mobile="bindMobile"  v-if="groupDetail" :groupDetail="groupDetail" @goToBuyPage="goToBuyPage"></login-page>
   </div>
 </template>
@@ -94,6 +109,7 @@
   import clock from '../../assets/shop/clock.png'
   import addressImg from '../../assets/shop/address.png'
   import leftG from '../../assets/shop/leftg.png'
+  import popup_img from '../../assets/shop/popup_img@2x.png'
   export default {
     name: "buy",
     components:{
@@ -136,6 +152,8 @@
         jsApiParameters:'',
         orderNo:'',
         canSale:false,
+        popup_img:popup_img,
+        orderCancel:false
       }
     },
     mounted(){
@@ -198,6 +216,7 @@
             }
             if (res.err_msg === 'get_brand_wcpay_request:cancel') {
               Toast('取消购买')
+              that.orderCancel=true
             }
           })
       },
@@ -222,6 +241,7 @@
       },
       payOrder(flag){
         let type = this.type ? 0 : 1
+        this.orderCancel = false;
         if(!JSON.parse(localStorage.getItem('userDesc')).mobile|| JSON.parse(localStorage.getItem('userDesc')).mobile === ''){
           this.bindMobile.flag = type;
           this.bindMobile.show = true;
@@ -396,6 +416,29 @@
       font-size: 14 * @toVw;
     }
   }
+  .orderCancel{
+    img{
+      width: 31.5rem;
+    }
+    .content{
+      position: absolute;
+      width: 31.5rem;
+      top: 12rem;
+      text-align: center;
+      h2{
+        font-size: 2.5rem;
+        color: #6C6C6C;
+      }
+      p{font-size: 1.4rem;color: #999999;margin: 1.5rem;}
+      .warn{font-size: 1.5rem;color: #EC612A;margin-bottom: 3rem;}
+      .btnbox{
+        display: flex;
+        .btn{width: 11.8rem;height: 4rem;line-height: 4rem;font-size: 1.4rem;color: white;border-radius: 2rem; }
+        .fal{background: #F8D56B;box-shadow:0px 4px 0px 0px rgba(239,147,70,0.97);}
+        .suc{background: #EC612A;box-shadow:0px 4px 0px 0px rgba(190,61,10,0.97);}
+      }
+    }
+  }
   .slide-fade-leave-active {
     transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
   }

src/components/newLesson/video.vue

@@ -25,12 +25,13 @@
       <div class="video-block hp-video" v-if="showObj.video[videoIndex]" v-show="!share_show && !popupVisible && !star">
         <video :src="showObj.video[videoIndex].url" @ended="videoEnd" @play="videoPlay()" controls :poster="showObj.video[videoIndex].url+'?vframe/jpg/offset/3'"></video>
       </div>
-       <div v-if="showObj.video.length > 1&&!orientationchange" class="age-block video" @click="videoShow = !videoShow">
+       <!-- <div v-if="showObj.video.length > 1&&!orientationchange" class="age-block video" @click="videoShow = !videoShow">
         <div>视频({{videoIndex+1}})<i class="playImage _154722344142123489"></i></div>
       </div>
       <div class="age-change-block video" v-if="showObj.video.length > 1 && videoShow&&!orientationchange">
         <div @click="videoIndex= index;videoShow=false;sendConsole('多视频选择视频')"  v-for="(item,index) in showObj.video">视频({{index+1}})<i :class="{'playImage _282918034425091245':index === videoIndex}" v-if="contentData.age === 1"></i></div>
-      </div>
+      </div> -->
+      <p v-if="!orientationchange&&showObj.video.length>1" class="videoTitle">选集</p>
       <scroll :class="{scroll:true,disShow:showObj.video.length>1}"  :data="showObj.video" v-if="!orientationchange" ref="scrollDom" :scrollX="true"  :bounce="true" >
           <div class="itemBox" ref="itembox">
             <div :class="{item:true}" v-for="(item,index) in showObj.video" @click="scrollFn(index)" >
@@ -98,15 +99,23 @@
         },
         orientationchange:false,
         testCount:5,
-        videoStyle:'0'
+        videoStyle:'0',
+        videoWidth:100
       }
     },
     props:[
       'contentData','nowShow'
     ],
+    created(){
+      this.videoWidth = Number(document.documentElement.clientWidth)/3.8
+      console.log(this.videoWidth)
+    },
     mounted(){
       this.changeAge(this.contentData.age)
       let that = this
+      // console.log(Number(document.documentElement.clientWidth))
+      // console.log(Number(document.documentElement.clientWidth.replace('px','')))
+      
       window.addEventListener('orientationchange',function(){
         setTimeout(function(){
           let width = document.documentElement.clientWidth
@@ -122,19 +131,20 @@
     methods:{
       scrollFn(index){
         this.videoStyle = index
+        this.videoIndex = index
         let parentwidth = Number(getComputedStyle(document.querySelector('.scroll')).width.replace('px',''))
         let itemBoxWidth = Number(getComputedStyle(document.querySelector('.itemBox')).width.replace('px',''))
         console.log(itemBoxWidth)
         let difWidth = (parentwidth/2)-45
-        if(index*90>difWidth){
+        if(index*this.videoWidth>difWidth){
           let indexS = index - 1 
-          if((index*100-difWidth)<(itemBoxWidth-parentwidth)){
-            this.$refs.scrollDom.scrollTo(-((index*100)-difWidth),0,100)
+          if((index*this.videoWidth-difWidth)<(itemBoxWidth-parentwidth)){
+            this.$refs.scrollDom.scrollTo(-((index*this.videoWidth)-difWidth),0,this.videoWidth)
           }else{
-            this.$refs.scrollDom.scrollTo(-(itemBoxWidth-parentwidth),0,100)
+            this.$refs.scrollDom.scrollTo(-(itemBoxWidth-parentwidth),0,this.videoWidth)
           }
         }else{
-          this.$refs.scrollDom.scrollTo(0,0,100)
+          this.$refs.scrollDom.scrollTo(0,0,this.videoWidth)
         }
       },
       swiperback(index){
@@ -239,11 +249,11 @@
             change:this.contentData.content.change
           }
         }
-         console.log(this.$refs.itembox)
-         console.log(this.showObj.video.length)
+        //  console.log(this.$refs.itembox)
+        //  console.log(this.showObj.video.length)
         if(this.$refs.itembox&&this.showObj.video.length){
-          this.$refs.itembox.style.width = this.showObj.video.length*100+'px'
-          console.log(this.$refs.itembox.style.width)
+          this.$refs.itembox.style.width = this.showObj.video.length*this.videoWidth+'px'
+          console.log(this.videoWidth)
         }
       }
     },
@@ -274,6 +284,7 @@
   .orientationchangeBox{
     p{text-align: center;margin-bottom: 10*@toVw;}
   }
+  .videoTitle{font-size: 14*@toVw;margin-bottom: 12*@toVw;text-indent: 6*@toVw;}
   .scroll{
     width: 310*@toVw;
     overflow: hidden;
@@ -285,15 +296,14 @@
       .item{
         // display: inline-block;
         flex: 1;
-        width: 100px;
-        height: 100px;
+        width: 10rem;
+        height: 10rem;
         // border: 1px solid black;
-        img{width: 90px;height: 60px;border-radius: 10px;border: 3px solid transparent;}
+        img{width: 9rem;height: 6rem;border-radius: 18px;border: 3px solid transparent;}
         .activity{
           border: 3px solid #40A9FF;
         }
       }
-
     }
   }
   .disShow{display: block;}
@@ -319,9 +329,10 @@
       }
       .video-block{
         margin-bottom: 16*@toVw;
-        border: 1*@toVw solid #666;
+        // border: 1*@toVw solid #666;
         border-radius: 12*@toVw;
         padding: 8*@toVw;
+        background:#69C0FF ;
         video{
           // width: 100%;
           height: 171*@toVw;

src/service/index.js

@@ -46,8 +46,8 @@ axios.interceptors.request.use(
       json.sing = "singsingenglish21000";
       if(common.getUrlParam().chang_test_user_id){
         console.log(common.getUrlParam())
-        json.chang_test_user_id = common.getUrlParam().chang_test_user_id
-        json.special_token = 'changchangenglish'
+        // json.chang_test_user_id = common.getUrlParam().chang_test_user_id
+        // json.special_token = 'changchangenglish'
       }
       if(process.env.NODE_ENV === 'development' ){
         config.params.special_token="changchangenglish";
@@ -73,8 +73,8 @@ axios.interceptors.request.use(
       json2.sing = "singsingenglish21000";
       if(common.getUrlParam().chang_test_user_id){
         console.log(common.getUrlParam())
-        json2.chang_test_user_id = common.getUrlParam().chang_test_user_id
-        json2.special_token =  'changchangenglish'
+        // json2.chang_test_user_id = common.getUrlParam().chang_test_user_id
+        // json2.special_token =  'changchangenglish'
       }
       if(process.env.NODE_ENV === 'development' ){
         config.data.special_token="changchangenglish";