Browse Source

feat(myPoints): 我的积分页面的完成

18285564342 2 years ago
parent
commit
cedb1c9c4a

+ 19 - 2
src/pages.json

@@ -7,14 +7,14 @@
       "path": "pages/tabbar/home/index",
       "style": {
         "navigationBarTitleText": "首页",
-        "navigationStyle":"custom"
+        "navigationStyle": "custom"
       }
     },
     {
       "path": "pages/tabbar/community/index",
       "style": {
         "navigationBarTitleText": "社区",
-        "navigationStyle":"custom"
+        "navigationStyle": "custom"
       }
     },
     {
@@ -94,6 +94,23 @@
           }
         }
       ]
+    },
+    {
+      "root": "pages/points",
+      "pages": [
+        {
+          "path": "myPoints/index",
+          "style": {
+            "navigationBarTitleText": "我的积分"
+          }
+        },
+        {
+          "path": "checkIn/index",
+          "style": {
+            "navigationBarTitleText": "每日签到"
+          }
+        }
+      ]
     }
   ],
   "tabBar": {

+ 15 - 0
src/pages/points/checkIn/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    积分签到
+  </div>
+</template>
+
+<script>
+  export default {
+    
+  }
+</script>
+
+<style lang="sass" scoped>
+
+</style>

+ 152 - 0
src/pages/points/myPoints/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <view class="myPoints">
+    <!-- 积分和积分签到 -->
+    <view class="signIn">
+      <view>20000</view>
+      <view class="signIn-item" @tap="$Router.push('/pages/points/checkIn/index')">
+        <text>签到获取积分</text>
+        <u-icon name="arrow-right" color="#fff" size="16"></u-icon>
+      </view>
+    </view>
+    <!-- 积分列表 -->
+    <view class="integral">
+      <u-grid :border="false" col="4">
+        <u-grid-item v-for="(listItem, listIndex) in list1" :key="listIndex" @tap="$Router.push(listItem.url)">
+          <u-icon :name="listItem.name" :size="50" color="#347caf" />
+          <text class="integral-text">{{ listItem.title }}</text>
+        </u-grid-item>
+      </u-grid>
+    </view>
+
+    <!-- 邀请好友 -->
+    <view class="invite">
+      <view class="invite-item">
+        <view class="invite-text">
+          <u-icon name="red-packet" color="#f9cf99" size="28" />
+          <text class="friends">邀请好友</text>
+        </view>
+        <view class="gotoInvite">去邀请</view>
+      </view>
+      <view class="inviteFriends">
+        <view class="flex-invite">
+          <u-icon name="scan" color="#f9cf99" size="20" />
+          <text class="scan-text">当面扫描</text>
+        </view>
+        <text>|</text>
+        <view class="flex-invite">
+          <u-icon name="weixin-fill" color="#28c445" size="20" />
+          <text class="scan-text">微信邀请</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 获取积分方式 -->
+    <view class="method">
+      <u-cell-group :border="false">
+        <u-cell size="mini" :border="false" icon="red-packet" title="发帖" isLink url="" />
+        <u-cell size="mini" :border="false" icon="red-packet" title="消费" isLink url="" />
+        <u-cell size="mini" :border="false" icon="red-packet" title="点评" isLink url="" />
+        <u-cell size="mini" :border="false" icon="red-packet" title="分享" isLink url="" />
+        <u-cell size="mini" :border="false" icon="red-packet" title="回帖" isLink url="" />
+        <u-cell size="mini" :border="false" icon="red-packet" title="广告" isLink url="" />
+      </u-cell-group>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list1: [
+        { name: 'photo', title: '积分说明' },
+        { name: 'lock', title: '积分明细' },
+        { name: 'star', title: '积分提现' },
+        { name: 'hourglass', title: '积分活动' },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.myPoints {
+  /* 签到获取积分 */
+  .signIn {
+    height: 300rpx;
+    font-size: 35px;
+    color: #fff;
+    padding-top: 40px;
+    text-align: center;
+    background-color: #347caf;
+
+    .signIn-item {
+      display: flex;
+      font-size: 16px;
+      justify-content: center;
+    }
+  }
+
+  /* 积分列表 */
+  .integral {
+    height: 220rpx;
+    padding-top: 20px;
+    box-sizing: border-box;
+    border-radius: 20rpx;
+    background-color: #fff;
+    margin: -100rpx 20rpx 30rpx 20rpx;
+  }
+
+  /* 邀请好友 */
+  .invite {
+    margin: 0 20rpx;
+    padding: 10px;
+    height: 220rpx;
+    background-color: #fff;
+    .invite-item {
+      display: flex;
+      justify-content: space-between;
+      .invite-text {
+        display: flex;
+      }
+      .gotoInvite {
+        width: 60px;
+        height: 30px;
+        color: #fff;
+        line-height: 30px;
+        border-radius: 15px;
+        text-align: center;
+        background-color: #347caf;
+      }
+      .friends {
+        margin-top: 5px;
+      }
+    }
+    .inviteFriends {
+      width: 500rpx;
+      height: 90rpx;
+      display: flex;
+      border-radius: 45rpx;
+      margin: 50rpx 0 0 80rpx;
+      padding: 25rpx 30rpx;
+      box-sizing: border-box;
+      background-color: #e6f5fd;
+      justify-content: space-between;
+      .flex-invite {
+        display: flex;
+      }
+      .scan-text {
+        margin-top: 2px;
+        color: #626c79;
+      }
+    }
+  }
+
+  /* 获取积分的方式 */
+  .method {
+    height: 460rpx;
+    background-color: #fff;
+    margin: 40rpx 20rpx 100rpx 20rpx;
+  }
+}
+</style>

+ 1 - 0
src/pages/tabbar/mine/index.vue

@@ -74,6 +74,7 @@ export default {
         {
           name: 'lock',
           title: '积分',
+          url: '/pages/points/myPoints/index'
         },
         {
           name: 'star',