消息中心

apis/interfaces/news.js

@@ -0,0 +1,53 @@
+/**
+ * Web-zdx
+ * moduleName: 通知消息列表
+ */
+
+import {request} from '../index.js'
+
+// 消息列表
+const notificationsType = () => {
+  return request({
+    url: 'notifications',
+    method: 'GET'
+  })
+}
+// 根据type 获取具体消息列表
+const notificationsList = (type,data) => {
+  return request({
+    url: 'notifications/'+type+'/list',
+    method: 'GET',
+    data:data
+  })
+}
+//  根据type 全部已读
+const notificationsReaded = (type) => {
+  return request({
+    url: 'notifications/'+type,
+    method: 'PUT'
+  })
+}
+//  根据type 全部已读
+const notificationsDelete= () => {
+  return request({
+    url: 'notifications',
+    method: 'DELETE'
+  })
+}
+// 根据消息id获取消息详情
+const notificationsDetail= (id) => {
+  return request({
+    url: 'notifications/'+id,
+    method: 'get'
+  })
+}
+
+
+
+export {
+  notificationsType,
+  notificationsList,
+  notificationsDetail,
+  notificationsReaded,
+  notificationsDelete
+}

pages.json

@@ -129,7 +129,22 @@
 		"style": {
 			"navigationBarTitleText": "企业认证"
 		}
-	}],
+	},{
+		"path": "pages/news/index",
+		"name": "news",
+		"auth": true,
+		"style": {
+			"navigationBarTitleText": "消息中心"
+		}
+	},{
+		"path": "pages/news/detail",
+		"name": "newsDetail",
+		"auth": true,
+		"style": {
+			"navigationBarTitleText": "消息列表"
+		}
+	}
+	],
 	"globalStyle": {
 		"navigationStyle": "custom",
 		"backgroundColor": "#F5F5F5"

pages/news/detail.vue

@@ -0,0 +1,248 @@
+<template>
+  <view class="News-detail" v-if="loaded">
+    <view class="item" v-for="(item,index) in items" v-if="items.length>0"
+      @click="item.read_at === ''?read(index,item):noread(item)">
+      <view class="top">
+        <image src="/static/images/news_2_1.png" mode="widthFix"></image>
+        <!--        <image v-if="index===1" src="/static/img/news_1_1.png" mode="widthFix"></image>
+        <image v-if="index===2" src="/static/img/news_3_1.png" mode="widthFix"></image> -->
+        <view :style="item.read_at=== '' ?'flex:1;':'flex:1;color:#808080;'">{{item.title}}</view>
+      </view>
+      <view class="des">{{item.content}}</view>
+      <view class="time">{{item.created_at}}</view>
+      <view class="read_at" v-if="item.read_at === ''"></view>
+    </view>
+	  <no-list v-if="items.length === 0" name='no-new1' txt="空空如也~" />
+  </view>
+</template>
+
+<script>
+  import {
+    notificationsList,
+    notificationsDetail,
+    notificationsReaded
+  } from '@/apis/interfaces/news.js'
+  export default {
+    data() {
+      return {
+        items: [],
+        page: 1,
+        has_more: true,
+        loaded: false
+      };
+    },
+    onLoad(e) {
+      this.type = e.type
+      this.notificationsList()
+    },
+    onReachBottom() {
+      this.notificationsList()
+    },
+    //  右侧全部已读
+    onNavigationBarButtonTap(e) {
+      // #ifdef APP-PLUS
+      var currentWebview = this.$mp.page.$getAppWebview()
+      var tn = currentWebview.getStyle().titleNView
+      var text = tn.buttons[0].text
+      if (text == '全部已读') {
+        notificationsReaded(this.type).then(res => {
+          this.items.find((item, index) => {
+            this.$set(item, 'read_at', 'zdx')
+          })
+          uni.showToast({
+            title: '全部已读',
+            icon: 'none'
+          })
+		  uni.setStorageSync('refresh',true)
+        }).catch(err => {
+          uni.showToast({
+            title: err.message,
+            icon: 'nonde'
+          })
+        })
+      }
+      // #endif
+    },
+    methods: {
+      // 点击每个消息，假装查看详情，触发已读效果$set
+      read(index, item) {
+        let notification_id = item.notification_id
+        notificationsDetail(notification_id).then(res => {
+          this.$set(this.items[index], 'read_at', '已读已读')
+		  uni.setStorageSync('refresh',true)
+        }).catch(err => {
+          uni.showToast({
+            title: err.message,
+            icon: 'nonde'
+          })
+        })
+        if (item.url) {
+          switch (item.url.openType) {
+            case 'web':
+              // #ifdef APP-PLUS
+              plus.runtime.openURL(item.url.url)
+              return
+              // #endif
+              window.location.href = item.url.url
+              break;
+            case 'navigateTo':
+              uni.navigateTo({
+                url: item.url.path
+              })
+              break;
+            case 'switchTab':
+              uni.switchTab({
+                url: item.url.path
+              })
+              break;
+            default:
+              uni.showToast({
+                title: '活动过期,请联系系统管理员',
+                icon: 'none'
+              })
+              break;
+          }
+        }
+      },
+
+      //  消息列表
+      notificationsList() {
+        if (this.has_more) {
+          notificationsList(this.type, {
+            page: this.page
+          }).then(res => {
+            this.items = this.items.concat(res.data)
+            if (res.page.has_more) {
+              this.page = this.page + 1
+            }
+            this.has_more = res.page.has_more
+            this.loaded = true
+          }).catch(err => {
+            uni.showToast({
+              title: err.message,
+              icon: 'nonde'
+            })
+          })
+        } else {
+          uni.showToast({
+            title: '没有更多啦~',
+            icon: 'none'
+          })
+        }
+      },
+      noread(item) {
+        if(item.url){
+          switch (item.url.openType) {
+            case 'web':
+              // #ifdef APP-PLUS
+              plus.runtime.openURL(item.url.url)
+              return
+              // #endif
+              window.location.href = item.url.url
+              break;
+            case 'navigateTo':
+              uni.navigateTo({
+                url: item.url.path
+              })
+              break;
+            case 'switchTab':
+              uni.switchTab({
+                url: item.url.path
+              })
+              break;
+            default:
+              uni.showToast({
+                title: '活动过期,请联系系统管理员',
+                icon: 'none'
+              })
+              break;
+          }
+        }else{
+          uni.showToast({
+            title: '哎呦，已经读过了~',
+            icon: 'none'
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .News-detail {
+    min-height: 100vh;
+    width: 100%;
+    padding: 0 $padding*1.5 $padding*1.5 $padding*1.5;
+    box-sizing: border-box;
+
+
+    .item {
+      background-color: #fff;
+      padding: $padding*1.5;
+      box-shadow: 0 0 40rpx 2rpx rgba(0, 0, 0, 0.1);
+      border-radius: $radius-m;
+      margin-top: $padding*1.5;
+      position: relative;
+
+      .top {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        box-sizing: border-box;
+        color: #353535;
+        font-weight: bold;
+        border-bottom: solid 1rpx #f8f8f8;
+        padding-bottom: $padding*1.3;
+
+        image {
+          width: 42rpx;
+          margin-right: $padding;
+        }
+
+        span {
+          font-size: $title-size;
+        }
+      }
+
+      .des {
+        font-size: $title-size-m;
+        padding-top: $padding;
+        color: #808080;
+      }
+
+      .time {
+        color: #999;
+        font-size: $title-size*0.9;
+        padding-top: $padding*0.9;
+      }
+    }
+  }
+
+  // 无消息
+  .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: $padding*7 0 $margin*3 0;
+      opacity: 0.6;
+    }
+  }
+
+  .read_at {
+    background-color: red;
+    width: 14rpx;
+    height: 14rpx;
+    position: absolute;
+    top: 20rpx;
+    right: 20rpx;
+    border-radius: 50%;
+  }
+</style>

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>