开发春节活动弹窗组件及活动详情页面

app.js

@@ -8,11 +8,11 @@ import {
 App({
     watch(method) {
         let obj = this.globalData
-            // 这里监听 openId
+        // 这里监听 openId
         Object.defineProperty(obj, "openId", {
             configurable: true,
             enumerable: true,
-            set: function(value) {
+            set: function (value) {
                 console.log('zzeweqweqw', value);
                 method(value) // 触发页面回调函数
             }
@@ -38,12 +38,13 @@ App({
         statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],
         userGrade: '二年级',
         upgradeHide: true,
-        openId: null
+        openId: null,
+        activityPop: true
     },
-    checkIsIPhoneX: function() {
+    checkIsIPhoneX: function () {
         const self = this
         wx.getSystemInfo({
-            success: function(res) {
+            success: function (res) {
                 // 根据 model 进行判断
                 if (res.model.search('iPhone X') != -1) {
                     self.globalData.isIPX = true

app.json

@@ -1,5 +1,6 @@
 {
     "pages": [
+        "pages/activityDet/index",
         "pages/index/index",
         "pages/login/login",
         "pages/my/index",

component/activityPop/index.js

@@ -0,0 +1,30 @@
+let app = getApp()
+Component({
+    data: {
+        state: false
+    },
+    lifetimes: {
+        attached() {
+            let state = app.globalData.activityPop
+            if (this.data.state != state) {
+                this.setData({
+                    state
+                })
+            }
+        },
+    },
+    methods: {
+        close() {
+            getApp().globalData.activityPop = false;
+            this.setData({
+                state: false
+            })
+        },
+        jumpDet() {
+            this.close()
+            wx.navigateTo({
+                url: '/pages/activityDet/index',
+            })
+        }
+    }
+})

component/activityPop/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

component/activityPop/index.less

@@ -0,0 +1,32 @@
+.popBox {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 999;
+    background-color: rgba(0, 0, 0, 0.46);
+
+    .closeImg {
+        width: 52rpx;
+        height: 62rpx;
+        margin-top: 250rpx;
+        margin-left: 80%;
+    }
+
+    .activityImg {
+        width: 680rpx;
+        height: 544rpx;
+        border-radius: 20rpx;
+        overflow: hidden;
+    }
+
+    .btnImg {
+        width: 350rpx;
+        height: 82rpx;
+        margin-top: 60rpx;
+    }
+}

component/activityPop/index.wxml

@@ -0,0 +1,6 @@
+<view class="popBox" wx:if="{{state}}">
+    <image src="/static/image/lollipop.png" class="closeImg" catchtap="close" />
+    <image src="https://yfklxt-image.ai160.com/reader/20210630/1625021926320684.jpg" class="activityImg"
+        catchtap="jumpDet" />
+    <image src="/static/groupImg/tuanzhangIcon.png" class="btnImg" catchtap="jumpDet" />
+</view>

component/activityPop/index.wxss

@@ -0,0 +1,29 @@
+.popBox {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 999;
+  background-color: rgba(0, 0, 0, 0.46);
+}
+.popBox .closeImg {
+  width: 52rpx;
+  height: 62rpx;
+  margin-top: 250rpx;
+  margin-left: 80%;
+}
+.popBox .activityImg {
+  width: 680rpx;
+  height: 544rpx;
+  border-radius: 20rpx;
+  overflow: hidden;
+}
+.popBox .btnImg {
+  width: 350rpx;
+  height: 82rpx;
+  margin-top: 60rpx;
+}

pages/activityDet/index.js

@@ -0,0 +1,66 @@
+// pages/activityDet/index.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/activityDet/index.json

@@ -0,0 +1,3 @@
+{
+    "usingComponents": {}
+}

pages/activityDet/index.less

@@ -0,0 +1 @@
+/* pages/activityDet/index.wxss */

pages/activityDet/index.wxml

@@ -0,0 +1,3 @@
+<view>
+    
+</view>

pages/activityDet/index.wxss

@@ -0,0 +1 @@
+/* pages/activityDet/index.wxss */

pages/index/index.json

@@ -8,7 +8,8 @@
         "StatusBar": "../../component/statusBar/statusBar",
         "shareDialog": "/component/share/share",
         "flowerBox": "/component/flowerBox/flowerBox",
-        "setGrade": "/component/setGrade/index"
+        "setGrade": "/component/setGrade/index",
+        "activityPop": "/component/activityPop/index"
     },
     "enablePullDownRefresh": true,
     "window": {

pages/index/index.wxml

@@ -1,114 +1,117 @@
 <!-- index.wxml -->
-<!-- <StatusBar receiveData="{{statusbarobj}}" grade="{{grade}}" bindgradeTap="gradeTap" /> -->
 <mp-navigation-bar title="UI组件库"></mp-navigation-bar>
 <view class="gradeContainer" catchtouchmove='true' wx:if="{{isGradeShow}}">
-  <view class="gradeBox" bindtap="selectGrade">
-    <view class="title">年级选择</view>
-    <view class="content">
-      <view class="grade {{temporaryGrade=='PRESCHOOL'?'check':''}}" data-code="PRESCHOOL">学前班</view>
-      <view class="grade {{temporaryGrade=='PRIMARY_FIRST_GRADE'?'check':''}}" data-code="PRIMARY_FIRST_GRADE">一年级
-      </view>
+    <view class="gradeBox" bindtap="selectGrade">
+        <view class="title">年级选择</view>
+        <view class="content">
+            <view class="grade {{temporaryGrade=='PRESCHOOL'?'check':''}}" data-code="PRESCHOOL">学前班</view>
+            <view class="grade {{temporaryGrade=='PRIMARY_FIRST_GRADE'?'check':''}}" data-code="PRIMARY_FIRST_GRADE">一年级
+            </view>
+        </view>
+        <view class="content">
+            <view class="grade {{temporaryGrade=='PRIMARY_SECOND_GRADE'?'check':''}}" data-code="PRIMARY_SECOND_GRADE">
+                二年级
+            </view>
+            <view class="grade {{temporaryGrade=='PRIMARY_THREE_GRADE'?'check':''}}" data-code="PRIMARY_THREE_GRADE">三年级
+            </view>
+        </view>
+        <view class="content">
+            <view class="grade {{temporaryGrade=='PRIMARY_SENIOR_GRADE'?'check':''}}" data-code="PRIMARY_SENIOR_GRADE">
+                四年级
+            </view>
+        </view>
+        <view class="submitBox">
+            <button class="resetBtn submit" bindtap="changeGrade">登录</button>
+        </view>
     </view>
-    <view class="content">
-      <view class="grade {{temporaryGrade=='PRIMARY_SECOND_GRADE'?'check':''}}" data-code="PRIMARY_SECOND_GRADE">二年级
-      </view>
-      <view class="grade {{temporaryGrade=='PRIMARY_THREE_GRADE'?'check':''}}" data-code="PRIMARY_THREE_GRADE">三年级
-      </view>
-    </view>
-    <view class="content">
-      <view class="grade {{temporaryGrade=='PRIMARY_SENIOR_GRADE'?'check':''}}" data-code="PRIMARY_SENIOR_GRADE">四年级
-      </view>
-    </view>
-    <view class="submitBox">
-      <button class="resetBtn submit" bindtap="changeGrade">登录</button>
-    </view>
-  </view>
 </view>
 <view class="container">
-  <!-- 引入组件 -->
-  <!-- <import src="/component/my/my.wxml" /> -->
-  <import src="/templates/courses/courses.wxml" />
-  <!-- 顶部导航 -->
-  <view class="top-tab" wx:if="{{!isGradeShow}}">
-    <!-- <view class="tabbar {{3 == myIndex ? 'select':' '}}" bindtap="jumpMy">
+    <!-- 引入组件 -->
+    <!-- <import src="/component/my/my.wxml" /> -->
+    <import src="/templates/courses/courses.wxml" />
+    <!-- 顶部导航 -->
+    <view class="top-tab" wx:if="{{!isGradeShow}}">
+        <!-- <view class="tabbar {{3 == myIndex ? 'select':' '}}" bindtap="jumpMy">
             <text>我的</text>
         </view> -->
-    <view class="tabbar" bindtap="jumpMy">
-      <text>我的</text>
-    </view>
-    <view class="tabbar {{0 == myIndex ? 'select':' '}}" bindtap="switcher" data-index="0">
-      <text>推荐</text>
-    </view>
-    <view class="tabbar {{1 == myIndex ? 'select':' '}}" bindtap="switcher" data-index="1">
-      <text>关注</text>
-    </view>
-    <view class="tabbar {{2 == myIndex ? 'select':' '}}" bindtap="switcher" data-index="2">
-      <text>资源</text>
+        <view class="tabbar" bindtap="jumpMy">
+            <text>我的</text>
+        </view>
+        <view class="tabbar {{0 == myIndex ? 'select':' '}}" bindtap="switcher" data-index="0">
+            <text>推荐</text>
+        </view>
+        <view class="tabbar {{1 == myIndex ? 'select':' '}}" bindtap="switcher" data-index="1">
+            <text>关注</text>
+        </view>
+        <view class="tabbar {{2 == myIndex ? 'select':' '}}" bindtap="switcher" data-index="2">
+            <text>资源</text>
+        </view>
     </view>
-  </view>
-  <swiper class="activity-img" autoplay circular indicator-dots indicator-active-color="#FFFFFF"
-    hidden="{{0 != myIndex}}">
-    <swiper-item>
-      <image src=" http://reader-wx.ai160.com/images/reader/activity/ad.jpg" bindtap="goToActivity">
-      </image>
-    </swiper-item>
-    <swiper-item>
-      <image src=" http://reader-wx.ai160.com/images/reader/activity/banner.jpg">
-      </image>
-    </swiper-item>
-    <swiper-item>
-      <image src="https://reader-wx.ai160.com/images/reader/activity/guide.jpg"></image>
-    </swiper-item>
-  </swiper>
+    <swiper class="activity-img" autoplay circular indicator-dots indicator-active-color="#FFFFFF"
+        hidden="{{0 != myIndex}}">
+        <swiper-item>
+            <image src=" http://reader-wx.ai160.com/images/reader/activity/ad.jpg" bindtap="goToActivity">
+            </image>
+        </swiper-item>
+        <swiper-item>
+            <image src=" http://reader-wx.ai160.com/images/reader/activity/banner.jpg">
+            </image>
+        </swiper-item>
+        <swiper-item>
+            <image src="https://reader-wx.ai160.com/images/reader/activity/guide.jpg"></image>
+        </swiper-item>
+    </swiper>
 
-  <!-- 调用组件 -->
-  <template is="{{templates}}" wx:if="{{myIndex === 3 || myIndex === 2}}"
-    data="{{myData: myData,coursesData:coursesData,noMoreWork:noMoreWork}}"></template>
-  <VideoSwiper wx:if="{{videoList.length > 0}}" class="video-swiper" video-list="{{videoList}}"
-    nextMargin="{{nextMargin}}" isSwiper="{{isSwiper}}" noMoreWork="{{noMoreWork}}" ifHeadTap="{{true}}"
-    bindopenShare="openShare" bindopenComment="openComment" bindheadTap="headTapHandler" bindgoToReading="goToReading"
-    bindcollectTap="collectTap" bindlikeTap="likeTap" binddelHideMyWork="delHideMyWork"
-    bindaddShareAmount="addShareAmount" bindchange="videoChange">
-  </VideoSwiper>
-  <view class="comment_section" catchtouchmove="touchMove" catchtap="commentTap" data-type="blank"
-    wx:if="{{commentShow}}">
-    <view class="comment_close" data-type='blank'>
-      ×
+    <!-- 调用组件 -->
+    <template is="{{templates}}" wx:if="{{myIndex === 3 || myIndex === 2}}"
+        data="{{myData: myData,coursesData:coursesData,noMoreWork:noMoreWork}}"></template>
+    <VideoSwiper wx:if="{{videoList.length > 0}}" class="video-swiper" video-list="{{videoList}}"
+        nextMargin="{{nextMargin}}" isSwiper="{{isSwiper}}" noMoreWork="{{noMoreWork}}" ifHeadTap="{{true}}"
+        bindopenShare="openShare" bindopenComment="openComment" bindheadTap="headTapHandler"
+        bindgoToReading="goToReading" bindcollectTap="collectTap" bindlikeTap="likeTap"
+        binddelHideMyWork="delHideMyWork" bindaddShareAmount="addShareAmount" bindchange="videoChange">
+    </VideoSwiper>
+    <view class="comment_section" catchtouchmove="touchMove" catchtap="commentTap" data-type="blank"
+        wx:if="{{commentShow}}">
+        <view class="comment_close" data-type='blank'>
+            ×
+        </view>
+        <Comment data-type="list" commentId="{{commentId}}" commentNum="{{commentNum}}" inputValue="{{inputValue}}"
+            bindsendReply="sendReply" />
+    </view>
+    <view class="no_follow" wx:if="{{myIndex === 1 && videoList.length <= 0 && noFollow}}">
+        <image class="no_follow_icon" src="../../static/index/no_follow.png" />
+        <text>赶快去关注优秀作者吧，</text>
+        <text>这里将会发生欣喜的变化。</text>
     </view>
-    <Comment data-type="list" commentId="{{commentId}}" commentNum="{{commentNum}}" inputValue="{{inputValue}}"
-      bindsendReply="sendReply" />
-  </view>
-  <view class="no_follow" wx:if="{{myIndex === 1 && videoList.length <= 0 && noFollow}}">
-    <image class="no_follow_icon" src="../../static/index/no_follow.png" />
-    <text>赶快去关注优秀作者吧，</text>
-    <text>这里将会发生欣喜的变化。</text>
-  </view>
 </view>
 <!--弹窗-->
 <view class="help-pay" hidden="{{helpPayHide}}">
-  <view class="help-pay-main" style="{{tipsType === 'tips' && 'top: 35%'}}">
-    <view wx:if="{{ tipsType === 'helpPay'}}" bindtap="payAndHelp">
-      <view class="pay-price" wx:if="{{payPrice}}">{{payPrice}}<text>元</text></view>
-      <image class="help-pay-icon" src="{{helpPayImg}}"></image>
+    <view class="help-pay-main" style="{{tipsType === 'tips' && 'top: 35%'}}">
+        <view wx:if="{{ tipsType === 'helpPay'}}" bindtap="payAndHelp">
+            <view class="pay-price" wx:if="{{payPrice}}">{{payPrice}}<text>元</text></view>
+            <image class="help-pay-icon" src="{{helpPayImg}}"></image>
+        </view>
+        <image wx:else class="tips-icon" src="{{tipsImg}}" bindtap="tips"></image>
+        <image class="help-close" bindtap="helpPayHideEvent" src="../../static/image/close.png"></image>
     </view>
-    <image wx:else class="tips-icon" src="{{tipsImg}}" bindtap="tips"></image>
-    <image class="help-close" bindtap="helpPayHideEvent" src="../../static/image/close.png"></image>
-  </view>
 </view>
 <!-- <MyToast /> -->
 <view hidden="{{hide}}">
-  <Dialog bindmyevent="jurisdiction" />
+    <Dialog bindmyevent="jurisdiction" />
 </view>
 <!-- <view class="upgrade" hidden="{{gradeActivity === 'PRIMARY_SENIOR_GRADE' || gradeActivity === 'PRESCHOOL' || upgradeHide}}"> -->
 <view class="upgrade" hidden="{{upgradeHide}}" bindtap="hideUpgrade">
-  <view class="upgrade-main">
-    <image class="upgrade-icon" src="http://reader-wx.ai160.com/images/reader/activity/activity_dialog.png"
-      catchtap="goToActivity"></image>
-    <image class="close" catchtap="hideUpgrade" src="../../static/image/close.png"></image>
-  </view>
+    <view class="upgrade-main">
+        <image class="upgrade-icon" src="http://reader-wx.ai160.com/images/reader/activity/activity_dialog.png"
+            catchtap="goToActivity"></image>
+        <image class="close" catchtap="hideUpgrade" src="../../static/image/close.png"></image>
+    </view>
 </view>
+<!-- 活动弹窗 -->
+<activityPop />
 <shareDialog id="share-dialog" shareType='works' bindaddShareAmount="addShareAmount"
-  bindShareDialogClose="shareDialogClose" shareId="{{id}}" />
+    bindShareDialogClose="shareDialogClose" shareId="{{id}}" />
 <canvas canvas-id="myCanvas"
-  style="width:300px; height: 525px; position: absolute; left: -999rpx; top: -9999rpx;"></canvas>
+    style="width:300px; height: 525px; position: absolute; left: -999rpx; top: -9999rpx;"></canvas>
 <canvas id='share' type="2d"> </canvas>