消息中心

pages/news/index.vue

@@ -0,0 +1,179 @@
+<template>
+  <view class="News">
+    <view class="list" v-for="(item,index) in items" :key="index" v-if="items.length>0">
+      <navigator class="item" open-type="navigate" hover-class="none" :url="'/pages/news/detail?type='+item.type">
+        <view class="left">
+          <image class="img" v-if='item.type ==="SystemNotification"' :src="item.icon?item.icon:'/static/images/news_1.png'" mode="aspectFill"></image>
+          <image class="img" v-if='item.type ==="OrderNotification"' :src="item.icon?item.icon:'/static/images/news_2.png'" mode="aspectFill"></image>
+          <image class="img" v-if='item.type ==="CouponNotification"' :src="item.icon?item.icon:'/static/images/news_3.png'" mode="aspectFill"></image>
+          <view class="content">
+            <view class="title">{{item.name}}</view>
+            <view class="des">{{item.title || '暂无任何未读消息'}}</view>
+          </view>
+        </view>
+        <view class="num" v-if="item.count>0">{{item.count}}</view>
+      </navigator>
+    </view>
+    <view class="no-news" v-else>
+      <image src="/static/img/no-news.png" mode="widthFix"></image>
+      暂时没有收到任何消息~
+    </view>
+  </view>
+</template>
+
+<script>
+  import {
+    notificationsType,
+    notificationsDelete
+  } from '@/apis/interfaces/news.js'
+  export default {
+    data() {
+      return {
+        items: [],
+        editShow: false
+      };
+    },
+    onShow() {
+      this.notificationsType()
+    },
+    //  右侧编辑按钮触发事件
+    onNavigationBarButtonTap(e) {
+      let that = this
+      let index = e.index
+      // 按钮文字的改变所需 
+      // #ifdef APP-PLUS
+      let currentWebview = that.$mp.page.$getAppWebview()
+      let tn = currentWebview.getStyle().titleNView
+      let text = tn.buttons[0].text
+      if (text == '全部清空') {
+        uni.showModal({
+          title: '是否确认清空全部消息',
+          content: '确认清空',
+          success(res) {
+            if (res.confirm) {
+              notificationsDelete().then(res => {
+                that.notificationsType()
+                uni.showToast({
+                  title: '全部清除啦~',
+                  icon: 'none'
+                })
+              }).catch(err => {
+                uni.showToast({
+                  title: err.message,
+                  icon: 'none'
+                })
+              })
+            }
+          }
+        })
+      }
+      // #endif
+    },
+    methods: {
+      notificationsType() {
+        notificationsType().then(res => {
+          this.items = res
+        }).catch(err => {
+          uni.showToast({
+            title: err.message,
+            icon: 'nonde'
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .News {
+    height: 100vh;
+    // #ifdef APP-PLUS
+    min-height: calc(100vh - 20rpx);
+    // #endif
+    width: 100%;
+    // background-color: pink;
+
+    // 无消息
+    .no-news {
+      font-size: $title-size-m;
+      color: #666;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+
+      image {
+        width: 70%;
+        margin-top: $padding*7;
+      }
+    }
+
+    //  消息列表
+    .list {
+      width: 94%;
+      margin-left: 3%;
+
+      .item {
+        margin-top: 20rpx;
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        box-sizing: border-box;
+        padding: $padding*1.5;
+        background-color: #fff;
+        border-radius: $radius*0.6;
+        box-sizing: 0 0 20rpx 40rpx rgba(0, 0, 0, 0.3);
+
+        .left {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          box-sizing: border-box;
+          flex: 1;
+
+          .content {
+            flex: 1;
+            padding: 0 $padding*0.5;
+            box-sizing: border-box;
+          }
+
+          .img {
+            width: 80rpx;
+            height: 80rpx;
+            margin-right: $padding*1.2;
+            border-radius: 50%;
+          }
+
+          .title {
+            font-size: $title-size-m*1.1;
+            margin-bottom: $padding*0.5;
+            font-weight: bold;
+          }
+
+          .des {
+            font-size: $title-size-m*0.9;
+            color: #999;
+          }
+        }
+
+        .num {
+          background-color: $mian-color;
+          color: #fff;
+          border-radius: 50%;
+          width: 40rpx;
+          height: 40rpx;
+		  display: flex;
+		  align-items: center;
+		  justify-content: center;
+          font-size: $title-size*.8;
+          padding: $padding*0.3;
+          text-align: center;
+        }
+      }
+    }
+  }
+</style>