Browse Source

新增活动页面

Limengbo 4 years ago
parent
commit
dd9dfbe3fe

+ 2 - 1
app.json

@@ -23,7 +23,8 @@
     "pages/vipPage/vip/vip",
     "pages/vipPage/vipCode/vipCode",
     "pages/vipPage/wechat/wechat",
-    "pages/grade/grade"
+    "pages/grade/grade",
+    "pages/activity/index/index"
   ],
   "window": {
     "backgroundTextStyle": "light",

+ 6 - 6
component/share/share.js

@@ -77,9 +77,9 @@ Component({
       const ctx = wx.createCanvasContext('myCanvas');
       // 画出背景和相同内容
       if (this.data.shareType === 'works') {
-        ctx.drawImage('../../static/image/works_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片  
+        ctx.drawImage('../../static/image/works_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片
       } else {
-        ctx.drawImage('../../static/image/group_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片  
+        ctx.drawImage('../../static/image/group_poster.jpg', 0, 0, 1200, 2100, 0, 0, 600, 1050); //插入图片
       }
       ctx.save()
       ctx.beginPath()
@@ -124,7 +124,7 @@ Component({
         ctx.setFillStyle('#ff6f42')
         ctx.fill();
         ctx.clip(); //剪切头像区域
-        //插入图片  
+        //插入图片
         ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
         ctx.setFontSize(18)
         ctx.setFillStyle('#ff6f42')
@@ -304,7 +304,7 @@ Component({
             data.shareContentEnum = 'READ';
             data.productId = this.data.productId;
           } */
-          
+
           httpRequestApi.shareLog({
             readId:this.data.id,
             type:this.data.type,
@@ -363,6 +363,6 @@ Component({
         path: '/pages/index/index'
       }
     }
-    
+
   },
-})
+})

+ 66 - 0
pages/activity/index/index.js

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

+ 3 - 0
pages/activity/index/index.json

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

+ 138 - 0
pages/activity/index/index.wxml

@@ -0,0 +1,138 @@
+<!--pages/activity/index/index.wxml-->
+<view class="activity-index">
+  <view class="rule">
+    <image src=""></image>
+  </view>
+  <view class="activity-works">
+    <text class="activity-works-title">选择下面课文进行朗读</text>
+    <view class="activity-works-swiper">
+      <swiper indicator-dots="true" autoplay="false" circular="true" previous-margin="66rpx" next-margin="56rpx" indicator-color="#BABABA" indicator-active-color="#7ACAFF">
+        <block wx:for="{{background}}" wx:key="*this">
+          <swiper-item>
+            <view class="swiper-item-view" style="background: {{item}};"></view>
+          </swiper-item>
+        </block>
+      </swiper>
+    </view>
+  </view>
+  <view class="activity-ranking">
+    <view class="activity-ranking-tab">
+      <text class="select">TOP100人气榜单</text>
+      <text>我的参赛作品</text>
+    </view>
+    <view class="activity-ranking-container">
+      <view class="activity-ranking-title">
+        <text>排名</text>
+        <text>名称</text>
+        <text>人气值</text>
+      </view>
+      <scroll-view scroll-y="true" style="height: 300rpx;">
+        <view class="scroll-view-item">
+          <text class="ranking-number">1</text>
+          <view class="ranking-message">
+            <view class="reanking-message-head">
+              <image class="haed-url" src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+            </view>
+            <view class="reanking-message-name">
+              <text>小明</text>
+              <view class="operation">
+                <view class="forward">
+                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+                  1
+                </view>
+                <view class="like">
+                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+                  1
+                </view>
+                <view class="comment">
+                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+                  1
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="popularity">99</view>
+        </view>
+        <view class="scroll-view-item">
+          <text class="ranking-number">1</text>
+          <view class="ranking-message">
+            <view class="reanking-message-head">
+              <image class="haed-url" src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+              <image class="follow-url" src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+            </view>
+            <view class="reanking-message-name">
+              <text>小明</text>
+              <view class="operation">
+                <view class="forward">
+                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+                  1
+                </view>
+                <view class="like">
+                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+                  1
+                </view>
+                <view class="comment">
+                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+                  1
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="popularity">99</view>
+        </view>
+        <view class="scroll-view-item">
+          <text class="ranking-number">1</text>
+          <view class="ranking-message">
+            <view class="reanking-message-head">
+              <image class="haed-url" src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+            </view>
+            <view class="reanking-message-name">
+              <text>小明</text>
+              <view class="operation">
+                <view class="forward">
+                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+                  1
+                </view>
+                <view class="like">
+                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+                  1
+                </view>
+                <view class="comment">
+                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+                  1
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="popularity">99</view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+  <view class="activity-my-ranking">
+        <text class="ranking-number" style="color: #fff;">1</text>
+        <view class="ranking-message">
+          <view class="reanking-message-head">
+            <image class="haed-url" src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+          </view>
+          <view class="reanking-message-name" style="color: #fff;">
+            <text style="color: #fff;">小明</text>
+            <view class="operation">
+              <view class="forward" style="color: #fff;">
+                <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+                1
+              </view>
+              <view class="like">
+                <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+                1
+              </view>
+              <view class="comment">
+                <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
+                1
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="popularity" style="color: #fff;">99</view>
+  </view>
+</view>

+ 160 - 0
pages/activity/index/index.wxss

@@ -0,0 +1,160 @@
+/* pages/activity/index/index.wxss */
+.activity-index {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.rule {
+  position: absolute;
+  top: 32rpx;
+  right: 0;
+  width: 191rpx;
+  height: 60rpx;
+}
+.rule image {
+  width: 100%;
+  height: 100%;
+  background: red;
+}
+.activity-works {
+  width: 726rpx;
+  height: 461rpx;
+  margin: 390rpx auto 0 auto;
+  background: skyblue;
+  overflow: hidden;
+}
+.activity-works-title {
+  width: 583rpx;
+  height: 52rpx;
+  text-align: center;
+  line-height: 52rpx;
+  background: #F8F6FF;
+  box-shadow: 0px 2rpx 14rpx 0rpx rgba(0, 0, 0, 0.1);
+  border-radius: 30rpx;
+  font-size: 30rpx;
+  display: block;
+  margin: 88rpx auto 22rpx auto;
+}
+.activity-works-swiper  swiper {
+  width: 100%;
+  height: 237rpx;
+}
+.swiper-item-view {
+  width: 583rpx;
+  height: 237rpx;
+  border-radius: 12rpx;
+}
+.activity-ranking {
+  height: 30%;
+  width: 100%;
+}
+.activity-ranking-tab {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 108rpx;
+  margin-top: 60rpx;
+}
+.activity-ranking-tab text {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #fff;
+  font-size: 38rpx;
+  background: blueviolet;
+}
+.activity-ranking-tab .select {
+  background: aquamarine;
+}
+.activity-ranking-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 21rpx 32rpx;
+  color: #D52822;
+  font-size: 38rpx;
+  background: #FCF4F6;
+  box-sizing: border-box;
+}
+.scroll-view-item,
+.activity-my-ranking {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 150rpx;
+  background: #FCF4F6;
+  border-bottom: 2rpx solid #fff;
+  padding: 0 50rpx;
+  box-sizing: border-box;
+}
+.scroll-view-item .ranking-number,
+.activity-my-ranking .ranking-number {
+  width: 52rpx;
+  height: 52rpx;
+  text-align: center;
+  line-height: 52rpx;
+  font-size: 38rpx;
+  color: #666;
+}
+.scroll-view-item  .ranking-message,
+.activity-my-ranking  .ranking-message{
+  display: flex;
+  margin-left: -90rpx;
+}
+.scroll-view-item  .ranking-message .reanking-message-head,
+.activity-my-ranking  .ranking-message .reanking-message-head {
+  position: relative;
+  width: 80rpx;
+  height: 80rpx;
+  margin-right: 30rpx;
+}
+.reanking-message-head .haed-url{
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+}
+.reanking-message-head .follow-url {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 34rpx;
+  height: 34rpx;
+  transform: translateX(-50%);
+}
+.reanking-message-name {
+  display: flex;
+  flex-direction: column;
+}
+.reanking-message-name text{
+  font-size: 34rpx;
+  color: #333;
+}
+.operation {
+  display: flex;
+  color: #999;
+  font-size: 22rpx;
+}
+.operation .like {
+  margin: 0 23rpx 0 23rpx;
+}
+.operation image{
+  width: 28rpx;
+  height: 24rpx;
+}
+.scroll-view-item .popularity,
+.activity-my-ranking  .popularity {
+  color: #666;
+  font-size: 38rpx;
+}
+.activity-my-ranking {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  background: #FEBD19;
+  color: #fff;
+}

+ 2 - 2
pages/index/index.js

@@ -698,7 +698,7 @@ Page({
   },
   // 打开评论
   openComment: function (e) {
-    // 
+    //
     console.log('id', e.detail.activeId)
     this.setData({
       commentShow: !this.data.commentShow,
@@ -945,4 +945,4 @@ Page({
       [likeNumStr]: this.data.videoList[index].likes + 1
     })
   },
-})
+})

+ 12 - 4
project.config.json

@@ -44,6 +44,14 @@
 	"simulatorType": "wechat",
 	"simulatorPluginLibVersion": {},
 	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
 		"plugin": {
 			"list": []
 		},
@@ -106,10 +114,10 @@
 					"scene": null
 				},
 				{
-					"name": "pages/index/index",
-					"pathName": "pages/index/index",
-					"query": "readId=1606387447807610",
-					"scene": 1007
+					"id": -1,
+					"name": "活动页",
+					"pathName": "pages/activity/index/index",
+					"scene": null
 				}
 			]
 		}