修改样式

miniprogram/config.ts

@@ -1,4 +1,4 @@
-const environmentVariable = "online";
+const environmentVariable = "test";
 const apiUrlInfo = {
   dev: "https://dev.kt.colexiu.com",
   test: "https://test.kt.colexiu.com",

miniprogram/pages/index/index.less

@@ -38,30 +38,46 @@ page {
     z-index: 1;
   }
 
-  swiper {
+  .bannerSwiper {
     height: 750rpx;
-  }
-
-  .swiper-item {
-    width: 100%;
-    height: 100%;
-
-    image {
+    .swiper-item {
       width: 100%;
       height: 100%;
+  
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  
+    .swiper-video {
+      display: flex;
+      align-items: center;
+      video {
+        width: 100%
+      }
+      wx-video .wx-video-top-bar>.wx-video-top-right-buttons {
+        display: none;
+      }
+      // wx-video .wx-video-top-bar {
+      //   display: none;
+      // }
+      .bg {
+        filter: blur(32rpx);
+      }
+      image {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+      }
+      .icon-video {
+        width: 92rpx;
+        height: 92rpx;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
     }
-  }
-
-  .demo-text-1 {
-    background-color: red;
-  }
-
-  .demo-text-2 {
-    background-color: black;
-  }
-
-  .demo-text-3 {
-    background-color: gray;
   }
 }
 
@@ -380,6 +396,98 @@ page {
   }
 }
 
+.titleVideoSection {
+  position: relative;
+  margin: 24rpx 0;
+  .icon-video {
+    position: absolute;
+    width: 92rpx !important;
+    height: 92rpx !important;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  wx-video .wx-video-top-bar>.wx-video-top-right-buttons {
+    display: none;
+  }
+  .videoItem {
+    width: 100%;
+    height: 368rpx;
+    border-radius: 24rpx;
+    box-shadow: 4rpx 8rpx 24rpx 1rpx rgba(96, 168, 223, 0.45);
+  }
+}
+.liu-section {
+  padding: 0 48rpx 48rpx;
+}
+
+.title-section {
+  background: linear-gradient( 180deg, #D9F0FF 0%, #FAF8F8 50%, #D9F0FF 100%);
+  overflow: hidden;
+  .title {
+    margin: 40rpx auto;
+    width: 160rpx !important;
+    height: 76rpx;
+    padding: 0;
+  }
+  .topSection {
+    padding: 0 48rpx;
+    .content1 {
+      font-size: 28rpx;
+      color: #131415;
+      line-height: 48rpx;
+    }
+
+    .content2 {
+      font-size: 24rpx;
+      color: #131415;
+      line-height: 48rpx;
+      text-align: center;
+    }
+  }
+  .titleSwiper {
+    position: relative;
+    padding: 24rpx 0 40rpx;
+    swiper {
+      height: 472rpx;
+    }
+
+    .swiper-item-detail {
+      height: 368rpx;
+      padding: 0 48rpx;
+      image {
+        width: 100%;
+        height: 100%;
+        box-shadow: 4rpx 8rpx 24rpx 1rpx rgba(96, 168, 223, 0.45);
+        border-radius: 24rpx;
+      }
+      .text {
+        padding: 20rpx 0;
+        font-size: 24rpx;
+        color: #131415;
+        line-height: 48rpx;
+        text-align: center;
+      }
+    }
+
+    .title-dot {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .title-dot--item {
+        width: 16rpx;
+        height: 16rpx;
+        border-radius: 50%;
+        margin: 0 11rpx;
+        background: #D1D1D1;
+      }
+      .title-dot--item-active {
+        background: #78CAFE;
+      }
+    }
+  }
+}
+
 .bottom-section {
   position: fixed;
   bottom: 0;

miniprogram/pages/index/index.ts

@@ -16,20 +16,33 @@ Page({
       'https://oss.dayaedu.com/ktyq/1732519479416.png',
       'https://oss.dayaedu.com/ktyq/1733110029242.png',
       'https://oss.dayaedu.com/ktyq/1732519500580.png'
-      // 'https://oss.dayaedu.com/ktyq/1732174025169.png',
-      // 'https://oss.dayaedu.com/ktyq/1732501351014.png',
-      // 'https://oss.dayaedu.com/ktyq/1732174043543.png'
     ],
     goodsImgList: [
       'https://oss.dayaedu.com/ktyq/1732175006625.png',
       'https://oss.dayaedu.com/ktyq/1732175021350.png',
       'https://oss.dayaedu.com/ktyq/1732175031878.png',
-      'https://oss.dayaedu.com/ktyq/1732617269723.png',
-      'https://oss.dayaedu.com/ktyq/1732617388991.png'
+      'https://oss.dayaedu.com/ktyq/1733406956046abd99e75.png',
+      'https://oss.dayaedu.com/ktyq/173340695604938755d8b.png',
+      'https://oss.dayaedu.com/ktyq/17333975985307c7f2bec.png'
+    ],
+    detailImgList: [
+      {
+        url: 'https://oss.dayaedu.com/ktyq/1733403675345.png',
+        text: '合作学校音乐数字课堂公开课'
+      },
+      {
+        url: 'https://oss.dayaedu.com/ktyq/1733403707851.png',
+        text: '音乐课课堂器乐教学'
+      },
+      {
+        url: 'https://oss.dayaedu.com/ktyq/1733403725644.png',
+        text: '学期末汇报演出'
+      }
     ],
     serviceShow: true,
     scrollTop: 0,
     current: 0,
+    detailCurrent: 0,
     autoplay: false,
     interval: 5000,
     duration: 500,
@@ -47,6 +60,10 @@ Page({
     headerHeight: 0, // 头部的高度
     initialScrollHeight: 0, // 滚动高度
     isFromPreviewImage: false,
+    bannerPlay: false, // 视频是否播放
+    titleControls: false, // 详情是否显示控制条
+    liuControls: false, // 详情是否显示控制条
+    bannerImageloaded: false, // Banner图片是否加载完成
   },
 
   /**
@@ -69,6 +86,65 @@ Page({
       })
     }).exec();
   },
+  onBannerVideoLoad() {
+    this.setData({
+      bannerImageloaded: true
+    })
+  },
+  onBannerPlay() {
+    const bannerVideo = wx.createVideoContext('bannerVideo')
+    const titleVideo = wx.createVideoContext('titleVideo')
+    const liuVideo = wx.createVideoContext('liuVideo')
+    this.setData({
+      bannerPlay: true
+    }, () => {
+      titleVideo.stop()
+      bannerVideo.play()
+      liuVideo.stop()
+    })
+  },
+  onBannerVideoPlay() {
+    const titleVideo = wx.createVideoContext('titleVideo')
+    titleVideo.stop()
+    const liuVideo = wx.createVideoContext('liuVideo')
+    liuVideo.stop()
+  },
+  onTitlePlay() {
+    const bannerVideo = wx.createVideoContext('bannerVideo')
+    bannerVideo.stop()
+    const liuVideo = wx.createVideoContext('liuVideo')
+    liuVideo.stop()
+  },
+  onTItleVideoPlay() {
+    const bannerVideo = wx.createVideoContext('bannerVideo')
+    const titleVideo = wx.createVideoContext('titleVideo')
+    const liuVideo = wx.createVideoContext('liuVideo')
+    this.setData({
+      titleControls: true
+    }, () => {
+      titleVideo.play()
+      bannerVideo.stop()
+      liuVideo.stop()
+    })
+  },
+  onLiuPlay() {
+    const bannerVideo = wx.createVideoContext('bannerVideo')
+    bannerVideo.stop()
+    const titleVideo = wx.createVideoContext('titleVideo')
+    titleVideo.stop()
+  },
+  onLiuVideoPlay() {
+    const bannerVideo = wx.createVideoContext('bannerVideo')
+    const titleVideo = wx.createVideoContext('titleVideo')
+    const liuVideo = wx.createVideoContext('liuVideo')
+    this.setData({
+      liuControls: true
+    }, () => {
+      liuVideo.play()
+      bannerVideo.stop()
+      titleVideo.stop()
+    })
+  },
   /**
    * 获取基础信息
    */
@@ -150,6 +226,15 @@ Page({
       this.setData({
         current: detail.current
       })
+      this.onTitlePlay()
+    }
+  },
+  changeSwiperDetail(e: any) {
+    const detail = e.detail
+    if(detail.source === 'touch' || detail.source == 'autoplay') {
+      this.setData({
+        detailCurrent: detail.current
+      })
     }
   },
   isLogin() {
@@ -220,6 +305,19 @@ Page({
       }
     })
   },
+  onPreivewDetailImg(e: { currentTarget: { dataset: any } }) {
+    wx.previewImage({
+      current: e.currentTarget.dataset.src,
+      urls: ['https://oss.dayaedu.com/ktyq/1733403675345.png','https://oss.dayaedu.com/ktyq/1733403707851.png','https://oss.dayaedu.com/ktyq/1733403725644.png',
+        
+      ],
+      success: () => {
+        this.setData({
+          isFromPreviewImage: true
+        })
+      }
+    })
+  },
   onPreivewGoodsImg(e: { currentTarget: { dataset: any } }) {
     wx.previewImage({
       current: e.currentTarget.dataset.src,
@@ -262,10 +360,6 @@ Page({
       serviceShow: false
     })
   },
-  // onReady() {
-  //   const scrollView = this.selectComponent('#scrollarea');
-  //   console.log(scrollView, 'scrollView')
-  // },
   // 页面滚动时颜色变化
   onScrollView(e: { detail: any }) {
     const top = e.detail.scrollTop || 0 
@@ -301,30 +395,41 @@ Page({
         }
       }
     }
-    
   },
   onChangeScroll() {
     const that = this;
     debounce(function() {
-      wx.createSelectorQuery().select('#type2').boundingClientRect(function (rect) {
-        if(rect.top > 0 &&  rect.top <= that.data.headerHeight) {
+      wx.createSelectorQuery().select('#type3').boundingClientRect(function (rect) {
+        let check = false
+        if(rect.top > 0 && (rect.top <= that.data.headerHeight )) {
           that.setData({
-            scrolIntoViewStr: 'type2'
+            scrolIntoViewStr: 'type3',
           })
-        }
-      }).exec();
-      wx.createSelectorQuery().select('#type3').boundingClientRect(function (rect) {
-        if(rect.top > 0 &&  rect.top <= that.data.headerHeight) {
-         that.setData({
-           scrolIntoViewStr: 'type3',
-         })
+          check = true
         }
         if(rect.top > 0 && rect.top > that.data.headerHeight) {
           that.setData({
             scrolIntoViewStr: 'type1'
           })
+          check = true
+        }
+        // console.log('checked', check)
+        if(!check) {
+          wx.createSelectorQuery().select('#type2').boundingClientRect(function (rect) {
+            if(rect.top > 0 && rect.top <= that.data.headerHeight) {
+              that.setData({
+                scrolIntoViewStr: 'type2'
+              }) 
+            }
+            if(rect.top > 0 && rect.top > that.data.headerHeight) {
+              that.setData({
+                scrolIntoViewStr: 'type3'
+              }) 
+            }
+          }).exec();
         }
       }).exec();
+      
     }, 100)()
   },
   onTapAnchor(e: { currentTarget: { dataset: any } }) {
@@ -332,7 +437,7 @@ Page({
     this.setData({
       scrolIntoView: type,
       scrolIntoViewStr: type,
-      scrollDiscount: type !== 'type2' ? true : false,
+      scrollDiscount: true, // type !== 'type2' ? true : false,
       scrollIntoViewType: true,
     })
   },

miniprogram/pages/index/index.wxml

@@ -2,8 +2,23 @@
 <scroll-view class="scrollarea" id="scroll-view" scroll-y="{{popupShow ? false : true}}" type="list" bindscroll="onScrollView" enable-passive="true" scroll-into-view="{{scrolIntoView}}" scroll-top="{{ scrollTop }}">
   <view class="container">
     <!-- <view class="topShadow"></view> -->
-    <view class="slider-count">{{current + 1}}/{{imgList.length}}</view>
-    <swiper indicator-dots="{{false}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="changeSwiper">
+    <view class="slider-count">{{current + 1}}/{{imgList.length + 1}}</view>
+    <swiper class="bannerSwiper" indicator-dots="{{false}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="changeSwiper">
+      <swiper-item>
+        <view class="swiper-item swiper-video">
+        <block wx:if="{{bannerImageloaded}}">
+          <image class="bg" src="https://oss.dayaedu.com/ktyq/17333963532320adcf421.png"></image>
+          <video object-fit="fill" bindplay="onBannerPlay" picture-in-picture-mode="[]" id="bannerVideo" src="https://oss.dayaedu.com/ktyq/17334057618630fc77dba.mp4"></video>
+          <!-- https://oss.dayaedu.com/ktyq/17334015356119a704b08.mp4 100M -->
+          <!-- https://oss.dayaedu.com/ktyq/1733405365311b760c974.mp4 30M -->
+          <!-- https://oss.dayaedu.com/ktyq/17334057618630fc77dba.mp4 60M -->
+        </block>
+          <block wx:if="{{ !bannerPlay }}">
+            <image bindload="onBannerVideoLoad" src="https://oss.dayaedu.com/ktyq/17333963532320adcf421.png"></image>
+            <image bind:tap="onBannerPlay" src="./images/icon-video.png" class="icon-video"></image>
+          </block>
+        </view>
+      </swiper-item>
       <swiper-item wx:for="{{ imgList }}" wx:key="index">
         <view class="swiper-item ">
           <image bind:tap="onPreivewBannerImg" src="{{ item }}" data-src="{{ item }}"></image>
@@ -11,11 +26,11 @@
       </swiper-item>
     </swiper>
 
-    <view id="scroll-header" class="scroll-header" style="opacity: {{opacity}}">
+    <view id="scroll-header" class="scroll-header" style="opacity: {{opacity}}; pointer-events: {{opacity > 0 ? 'all' : 'none'}};">
       <navigation-bar back="{{false}}" title="商品详情"></navigation-bar>
       <view class="product-catagory">
         <view class="item {{ scrolIntoViewStr == 'type1' || !scrolIntoViewStr ? 'selected' : '' }}" bind:tap="onTapAnchor" data-type="type1">产品介绍</view>
-        <view class="item {{ scrolIntoViewStr == 'type3' ? 'selected' : '' }}" bind:tap="onTapAnchor" data-type="type3">购买流程</view>
+        <view class="item {{ scrolIntoViewStr == 'type3' ? 'selected' : '' }}" bind:tap="onTapAnchor" data-type="type3">激活流程</view>
         <view class="item {{ scrolIntoViewStr == 'type2' ? 'selected' : '' }}" bind:tap="onTapAnchor" data-type="type2">互通案例</view>
       </view>
     </view>
@@ -36,8 +51,42 @@
           <image id="type1" mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732175006625.png" data-src="https://oss.dayaedu.com/ktyq/1732175006625.png"></image>
           <image mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732175021350.png" data-src="https://oss.dayaedu.com/ktyq/1732175021350.png"></image>
           <image mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732175031878.png" data-src="https://oss.dayaedu.com/ktyq/1732175031878.png"></image>
-          <image id="type3" mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732617269723.png" data-src="https://oss.dayaedu.com/ktyq/1732617269723.png"></image>
-          <image id="type2" class="type2s" mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732617388991.png" data-src="https://oss.dayaedu.com/ktyq/1732617388991.png"></image>
+          <!-- <image  mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/173339759143825859f65.png" data-src="https://oss.dayaedu.com/ktyq/173339759143825859f65.png"></image> -->
+          <view id="type3" class="liu-section">
+            <image  mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1733406956046abd99e75.png" data-src="https://oss.dayaedu.com/ktyq/1733406956046abd99e75.png"></image>
+            <view class="titleVideoSection">
+              <video object-fit="fill" show-center-play-btn="{{false}}" picture-in-picture-mode="[]" controls="{{liuControls}}" bindplay="onLiuPlay" class="videoItem" id="liuVideo" src="https://oss.dayaedu.com/ktyq/1733395673461fc6123ca.mp4"></video>
+              <image wx:if="{{!liuControls}}" bind:tap="onLiuVideoPlay" src="./images/icon-video.png" class="icon-video"></image>
+            </view>
+            <image  mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/173340695604938755d8b.png" data-src="https://oss.dayaedu.com/ktyq/173340695604938755d8b.png"></image>
+          </view>
+          <!-- <image id="type2" class="type2s" mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/1732617388991.png" data-src="https://oss.dayaedu.com/ktyq/1732617388991.png"></image> -->
+          <view id="type2" class="type2s title-section">
+            <image src="./images/title1.png" class="title"></image>
+            <view class="topSection">
+              <view class="content1">音乐数字课堂已赢得超过100万名注册师生的喜爱与赞誉，成为学生乐器学习旅程中的得力伙伴，更是一路陪伴他们从初探音乐世界走向精通乐器。为学生带来极佳的学习体验。</view>
+              <view class="titleVideoSection">
+                <video object-fit="fill" show-center-play-btn="{{false}}" picture-in-picture-mode="[]" controls="{{titleControls}}" bindplay="onTitlePlay" class="videoItem" id="titleVideo" src="https://oss.dayaedu.com/ktyq/1733395673461fc6123ca.mp4"></video>
+                <image wx:if="{{!titleControls}}" bind:tap="onTItleVideoPlay" src="./images/icon-video.png" class="icon-video"></image>
+              </view>
+              <view class="content2">实践知真章，合作学校仅用两节课便完成母亲节主题演奏</view>
+            </view>
+
+            <view class="titleSwiper">
+              <swiper indicator-dots="{{false}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="changeSwiperDetail">
+                <swiper-item wx:for="{{ detailImgList }}" wx:key="index">
+                  <view class="swiper-item-detail">
+                    <image bind:tap="onPreivewDetailImg" src="{{ item.url }}" data-src="{{ item.url }}"></image>
+                    <view class="text">{{item.text}}</view>
+                  </view>
+                </swiper-item>
+              </swiper>
+              <view class="title-dot">
+                <view wx:for="{{ detailImgList }}" wx:key="index" class="title-dot--item {{ detailCurrent === index ? 'title-dot--item-active' : '' }}"></view>
+              </view>
+            </view>
+          </view>
+          <image mode="widthFix" bind:tap="onPreivewGoodsImg" src="https://oss.dayaedu.com/ktyq/17333975985307c7f2bec.png" data-src="https://oss.dayaedu.com/ktyq/17333975985307c7f2bec.png"></image>
         </view>
       </view>
     </view>