feat: 完成【[活动报名模板] - 活动详情】、【[活动报名模板] - 二级详情页】

app.json

@@ -2,7 +2,8 @@
   "pages": [
     "pages/index/index",
     "pages/explore/index",
-    "pages/my/index"
+    "pages/my/index",
+    "pages/activitydetail/index"
   ],
   "window": {
     "backgroundTextStyle": "light",
@@ -30,6 +31,7 @@
       }
     ]
   },
-  "style": "v2",
+  "usingComponents": {},
+
   "sitemapLocation": "sitemap.json"
 }

app.less

@@ -8,3 +8,31 @@
   padding: 200rpx 0;
   box-sizing: border-box;
 } 
+
+.note{
+  color: #00000099;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.font-normal{
+  font-size: 14px;
+}
+
+.font-normal-bold{
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.font-h2{
+  font-size: 16px;
+  font-weight: 600;
+}
+
+page{
+  --color-brand-blue:#0052D9;
+  --color-lightblue:#F2F3FF;
+  --color-red:#d54941;
+  --color-orange:#E37318;
+  --color-black-60:#00000099;
+}

custom-tab-bar/index.json

@@ -2,6 +2,6 @@
   "component": true,
   "usingComponents": {
     "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
-    "t-tab-bar-item": "tdesign-miniprogram/tab-bar/tab-bar-item"
+    "t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item"
   }
 }

custom-tab-bar/index.wxml

@@ -1,5 +1,5 @@
-<t-tab-bar value="{{value}}" bind:change="handleChange">
+<t-tab-bar value="{{value}}" bind:change="handleChange" class="custom">
   <t-tab-bar-item wx:for="{{list}}" wx:key="index" icon="{{item.icon}}" value="{{item.value}}">
     {{item.label}}
   </t-tab-bar-item>
-</t-tab-bar>
+</t-tab-bar>

mock/mockData.js

@@ -0,0 +1,59 @@
+module.exports = {
+  // 模拟接口
+  '/api/detailBasic': {
+    code: 200,
+    message: 'success',
+    data: {
+      ifLiked:false,
+      posterImage:"/images/activitydetail/image [email protected]",
+      guestImage:[
+        `/images/activitydetail/Image 图片.png`,
+        `/images/activitydetail/Image 图片.png`,
+        `/images/activitydetail/Image 图片.png`
+      ],
+      venueImage:[
+        "/images/activitydetail/Image 图片(1).png",
+        "/images/activitydetail/Image 图片(1).png",
+        "/images/activitydetail/Image 图片(1).png"
+      ],
+      activityTitleText:"2021 SICC服装设计创新大会",
+      interestedPeopleAvatar:[
+        "/images/activitydetail/Image.png",
+        "/images/activitydetail/Image(1).png",
+        "/images/activitydetail/Image(2).png",
+        "/images/activitydetail/Image(3).png",
+        "/images/activitydetail/Image(4).png",
+        "/images/activitydetail/Image(5).png"
+      ],
+      interestedPeopleNum:236,
+      beginTime:"2021年3月16日",
+      location:"深圳市腾讯滨海大厦",
+      evaluationScore:4.5,
+      evaluation:[
+        {
+          userAvatar:"/images/activitydetail/Image.png",
+          username:"小小轩",
+          text:"我已经是第三次参加SICC大会了，作为一名服务体验行业的设计者，每次参与都受益匪浅。我已经是第三次参加SICC大会了，作为一名服务体验行业的设计者，每次参与都受益匪浅。"
+        },
+        {
+          userAvatar:"/images/activitydetail/Image.png",
+          username:"小小轩",
+          text:"我已经是第三次参加SICC大会了，作为一名服务体验行业的设计者，每次参与都受益匪浅。我已经是第三次参加SICC大会了，作为一名服务体验行业的设计者，每次参与都受益匪浅。"
+        },
+        {
+          userAvatar:"/images/activitydetail/Image.png",
+          username:"小小轩",
+          text:"我已经是第三次参加SICC大会了，作为一名服务体验行业的设计者，每次参与都受益匪浅。我已经是第三次参加SICC大会了，作为一名服务体验行业的设计者，每次参与都受益匪浅。"
+        },
+        {
+          userAvatar:"/images/activitydetail/Image.png",
+          username:"小小轩",
+          text:"我已经是第三次参加SICC大会了，作为一名服务体验行业的设计者，每次参与都受益匪浅。我已经是第三次参加SICC大会了，作为一名服务体验行业的设计者，每次参与都受益匪浅。"
+        }
+      ],
+      introduction:"在数字化时代背景下，如何抓住机遇，构建“数字”+“文化”更高效、宽领域、深覆盖的新时代文化创新之路，让优秀传统文化得以延续和新生，被更多人认可和接受，也是我们服务设计探索的方向。2021年5月16日，由腾讯用户研究与体验设计部（简称CDC）主办的第三届服务创新大会，将在深圳腾讯滨海大厦召开。近年来数字化正在赋能传统文化的传承和传播，而传统文化也同样在启发新的服务设计理念和思路，两者之间的界限越来越模糊，相互融合。本次大会将围绕文化保育和文化创新，邀请7位传统文物、建筑、服饰、工艺等不同艺术领域的行业专家，为我们分享最新发展趋势和实践经验，开拓来宾在传统文化与数字科技间的碰撞思路，探索新的服务设计课题，让我们先睹为快，了解这些专家们将会分享哪些主题。",
+      pricemin:88,
+      pricemax:288
+    },
+  },
+};

package.json

@@ -5,12 +5,15 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": ["wechat", "miniprogram", "starter"],
+  "keywords": [
+    "wechat",
+    "miniprogram",
+    "starter"
+  ],
   "author": "leejim",
   "license": "MIT",
   "description": "a start-kit for wechat miniprogram powerby TDesign miniprogram",
   "dependencies": {
-    "tdesign-miniprogram": "^0.12.1"
-  },
-  "devDependencies": {}
+    "tdesign-miniprogram": "^1.1.15"
+  }
 }

pages/activitydetail/index.js

@@ -0,0 +1,169 @@
+// pages/activitydetail/index.js
+const mockData = require('../../mock/mockData.js');
+import Toast from 'tdesign-miniprogram/toast/index';
+
+
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    ifShowDetail:true,
+    animationShowHide:{},
+    screenHeight:0,
+    imageProps:{
+      width:"566rpx"
+    },
+    swiperNextMargin:0
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function () {
+    // 导入初始数据
+    this.setData({
+      pageData:mockData['/api/detailBasic'].data,
+
+    })
+    // 判断感兴趣的人数
+    if(this.data.pageData.interestedPeopleNum > 99){
+      this.setData({
+        avatarnum:99
+      })
+    }else{
+      this.setData({
+        avatarnum:this.data.pageData.interestedPeopleNum
+      })
+    }
+
+    const that = this;
+    wx.getSystemInfo({
+      success: function (res) {
+        that.setData({
+          screenHeight: res.windowHeight,
+          swiperNextMargin: (res.windowWidth-311)*2
+        });
+      }
+    });
+  },
+
+  // 点击收藏按钮
+  onLikeTap(){
+    this.data.pageData.ifLiked = !this.data.pageData.ifLiked
+    this.setData({
+      pageData:this.data.pageData
+    })
+  },
+
+  // 点击导航
+  navigateToLocation(){
+    Toast({
+      context: this,
+      selector: '#t-toast',
+      message: '导航到'+this.data.pageData.location,
+    });
+  },
+
+  // 点击分享
+  onShareTap(){
+    Toast({
+      context: this,
+      selector: '#t-toast',
+      message: '分享该活动',
+    });
+  },
+
+  // 点击购买
+  buyTicket(){
+    Toast({
+      context: this,
+      selector: '#t-toast',
+      message: '购买活动门票',
+    });
+  },
+
+  // 展示或者隐藏详细信息
+  showOrHideDetail(){
+    this.setData({
+      ifShowDetail : !this.data.ifShowDetail
+    })
+    // 创建动画
+    var animation = wx.createAnimation({
+      duration: 400, // 动画持续时间，单位ms，默认值为0
+      timingFunction: 'ease', // 动画的时间曲线，默认值为'linear'
+      delay: 0, // 动画延迟时间，单位ms，默认值为0
+      transformOrigin: '50% 50% 0'
+    })
+    var animationFlip = wx.createAnimation({
+      duration: 400, // 动画持续时间，单位ms，默认值为0
+      timingFunction: 'ease', // 动画的时间曲线，默认值为'linear'
+      delay: 0, // 动画延迟时间，单位ms，默认值为0
+      transformOrigin: '50% 50% 0'
+    })
+    if(!this.data.ifShowDetail){
+      // console.log("下拉")
+      animation.height(0).step()
+      this.setData({
+        animationShowHide: animation,
+      });
+    }else{
+      // console.log("上拉")
+      let _height = this.data.screenHeight - 250; // 计算新的高度值
+      // console.log(_height)
+      animation.height(_height).step()
+      this.setData({
+        animationShowHide: animation,
+      });
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/activitydetail/index.json

@@ -0,0 +1,18 @@
+{
+
+  "usingComponents": {
+    "t-avatar": "tdesign-miniprogram/avatar/avatar",
+    "t-avatar-group": "tdesign-miniprogram/avatar-group/avatar-group",
+    "t-divider": "tdesign-miniprogram/divider/divider",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-rate": "tdesign-miniprogram/rate/rate",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-swiper": "tdesign-miniprogram/swiper/swiper",
+    "t-swiper-nav": "tdesign-miniprogram/swiper-nav/swiper-nav"
+  },
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "详情",
+  "navigationBarBackgroundColor": "#000"
+
+}