移动端买卖家中心增加消息

assets/scss/mobileCenter.scss

@@ -63,13 +63,14 @@
     }
   }
   .collect-block {
-    height: 2.33rem;
+    height: 3.49rem;
     padding: 0 .24rem;
     .content-line {
       height: 1.16rem;
       line-height: 1.16rem;
-      &:first-child {
-        border-bottom: .01rem solid #d3d3d3;
+      border-bottom: .01rem solid #d3d3d3;
+      &:last-child {
+        border-bottom: none;
       }
       img {
         width: .8rem;

nuxt.config.js

@@ -6,6 +6,8 @@ const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://api.usoftmall.com/
 const commonUrl = process.env.COMMON_URL || (isProdMode ? 'https://api-inquiry.usoftmall.com/' : 'http://218.17.158.219:24000/')
 // 公共物料
 const materialUrl = process.env.MATERIAL_URL || (isProdMode ? 'https://api-product.usoftmall.com/' : 'http://218.17.158.219:24000/')
+// 消息
+const messageUrl = process.env.MATERIAL_URL || (isProdMode ? 'https://api-message.ubtob.com/' : 'http://192.168.253.6:24000/message')
 module.exports = {
   router: {
     middleware: 'check-auth',
@@ -87,7 +89,8 @@ module.exports = {
   env: {
     baseUrl,
     commonUrl,
-    materialUrl
+    materialUrl,
+    messageUrl
   },
   plugins: [
     {
@@ -178,6 +181,8 @@ module.exports = {
     '/account/**': baseUrl,
     '/vendor/**': baseUrl,
     '/internalmessage-service/**': baseUrl,
-    '/wx/**': baseUrl
+    '/wx/**': baseUrl,
+    '/messages**': messageUrl,
+    '/messages/**': messageUrl
   }
 }

pages/mobile/center/user/collect/message.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="mobile-center">
+    <div class="com-mobile-header mobile-center-header">
+      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
+      <p>消息</p>
+      <p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
+    </div>
+    <div class="mobile-content">
+      <div v-if="messageList.content && messageList.content.length" class="message-list" v-bind:key="item.id" v-for="item in messageList.content">
+        <div class="content">
+          <div class="new-dot">
+            <b v-if="item.isRead === 0"></b>
+            <img src="/images/mobile/center/user/message.png" alt="">
+          </div>
+          <div class="message">
+            <p>{{item.createTime | time}}</p>
+            <a :href="item.type === 'MALL跳转卖家待报价页面' ? '/vendor#/seekPurchase?type=1' : item.type === 'MALL公共询价' ? '/user#/seekPurchase' : item.type === '商城公共询价采纳结果' ? '/vendor#/vendorPurchaseOffer' : ''"
+               v-if="item.type"
+               :title="item.content" class="info" target="_blank">{{item.content}}</a>
+            <a v-else :title="item.content" class="noLink info">{{item.content}}</a>
+          </div>
+        </div>
+      </div>
+      <empty-status v-if="!messageList.content.length"  :showLink="true" :text="'抱歉，暂无消息'"></empty-status>
+    </div>
+    <pull-up :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
+  </div>
+</template>
+<script>
+  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
+  export default {
+    middleware: 'authenticated',
+    layout: 'mobileNoHeader',
+    data () {
+      return {
+        count: 10,
+        page: 1
+      }
+    },
+    fetch ({ store }) {
+      let user = store.state.option.user.data
+      return Promise.all([
+        // 获取消息列表
+        store.dispatch('messageShow/getAllMessage', { receiverUu: user.userUU, receiverEnuu: user.enterprise.uu, consumerApp: 'MALL', count: 10, page: 1, sorting: {'createTime': 'DESC'} })
+      ])
+    },
+    computed: {
+      user () {
+        return this.$store.state.option.user
+      },
+      messageList () {
+        return this.$store.state.messageShow.messageList.list.data
+      },
+      fetching () {
+        return this.messageList.fetching
+      },
+      allPage () {
+        return Math.floor(this.messageList.totalElements / this.messageList.size) + Math.floor(this.messageList.totalElements % this.messageList.size > 0 ? 1 : 0)
+      }
+    },
+    components: {
+      RemindBox,
+      PullUp,
+      EmptyStatus
+    },
+    methods: {
+      reloadList: function () {
+        this.$store.dispatch('messageShow/getAllMessage', { receiverUu: this.user.data.userUU, receiverEnuu: this.user.data.enterprise.uu, consumerApp: 'MALL', page: this.page, count: this.count, sorting: {'createTime': 'DESC'} })
+      },
+      onPullUpAction: function () {
+        this.page++
+        this.reloadList()
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .mobile-content {
+    margin-top: .6rem !important;
+    padding: .2rem;
+    background: #f1f3f6;
+    .com-none-state {
+      padding-bottom: 100%;
+    }
+    .message-list {
+      background: #fff;
+      padding: 0 .15rem 0 .2rem;
+      .content {
+        padding: .14rem 0;
+        overflow: hidden;
+        border-bottom: 1px solid #d3d3d3;
+        .new-dot {
+          position: relative;
+          b{
+            position: absolute;
+            left: .2rem;
+            top: .25rem;
+            width: .16rem;
+            height: .16rem;
+            border-radius: 50%;
+            background: #fc0405;
+          }
+        }
+        img{
+          margin: .3rem 0 0 .12rem;
+          float: left;
+          width: .8rem;
+          height: .8rem;
+        }
+        .message{
+          margin-left: .24rem;
+          float: left;
+          width: 5.4rem;
+          p{
+            display: inherit;
+            margin-bottom: .1rem;
+            text-align: right;
+            font-size: .24rem;
+            color: #666;
+          }
+          a.info{
+            font-size: .28rem;
+            color: #333;
+          }
+        }
+      }
+    }
+  }
+  .message-list:last-child .content{
+     border-bottom: none;
+   }
+</style>

pages/mobile/center/user/index.vue

@@ -37,6 +37,11 @@
           <span>店铺关注<span class="text">({{storeCount.data || 0}})</span></span>
           <i class="iconfont icon-xiangyou"></i>
         </nuxt-link>
+        <nuxt-link tag="div" to="/mobile/center/user/collect/message" class="content-line">
+          <img src="/images/mobile/center/user/message.png" alt="">
+          <span>消息<span class="text">({{messageCount.count || 0}})</span></span>
+          <i class="iconfont icon-xiangyou"></i>
+        </nuxt-link>
       </div>
     </div>
     <publish-seek :showSayPriceBox="showPublishBox" @cancelAction="showPublishBox = false" @remindAction="onRemind"></publish-seek>
@@ -57,9 +62,11 @@
       }
     },
     fetch ({store}) {
+      let user = store.state.option.user.data
       return Promise.all([
         store.dispatch('product/loadCompCollectInfo'),
-        store.dispatch('shop/loadStoreCollectInfo')
+        store.dispatch('shop/loadStoreCollectInfo'),
+        store.dispatch('messageShow/loadMessageCount', {receiverUu: user.userUU, receiverEnuu: user.enterprise.uu, consumerApp: 'MALL', isRead: 0})
       ])
     },
     components: {
@@ -72,6 +79,10 @@
       },
       storeCount () {
         return this.$store.state.shop.storeInfo.collectCount.data
+      },
+      messageCount () {
+        // console.log(this.$store.state.messageShow.messageCount.count.data)
+        return this.$store.state.messageShow.messageCount.count.data
       }
     },
     methods: {

pages/mobile/center/vendor/index.vue

@@ -46,6 +46,13 @@
           <i class="iconfont icon-xiangyou"></i>
         </div>
       </div>
+      <nuxt-link tag="div" to="/mobile/center/vendor/message" class="block-wrap collect-block">
+        <div class="content-line">
+          <img src="/images/mobile/center/user/message.png" alt="">
+          <span>消息<span class="text">({{messageCount.count || 0}})</span></span>
+          <i class="iconfont icon-xiangyou"></i>
+        </div>
+      </nuxt-link>
     </div>
     <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
   </div>
@@ -62,8 +69,10 @@
       }
     },
     fetch ({ store }) {
+      let user = store.state.option.user.data
       return Promise.all([
-        store.dispatch('loadStoreStatus', { op: 'check' })
+        store.dispatch('loadStoreStatus', { op: 'check' }),
+        store.dispatch('messageShow/loadMessageCount', {receiverUu: user.userUU, receiverEnuu: user.enterprise.uu, consumerApp: 'MALL', isRead: 0})
       ])
     },
     components: {
@@ -72,6 +81,9 @@
     computed: {
       storeInfo () {
         return this.$store.state.option.storeStatus.data
+      },
+      messageCount () {
+        return this.$store.state.messageShow.messageCount.count.data
       }
     },
     methods: {

pages/mobile/center/vendor/message.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="mobile-center">
+    <div class="com-mobile-header mobile-center-header">
+      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
+      <p>消息</p>
+      <p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
+    </div>
+    <div class="mobile-content">
+      <div v-if="messageList.content && messageList.content.length" class="message-list" v-bind:key="item.id" v-for="item in messageList.content">
+        <div class="content">
+          <div class="new-dot">
+            <b v-if="item.isRead === 0"></b>
+            <img src="/images/mobile/center/user/message.png" alt="">
+          </div>
+          <div class="message">
+            <p>{{item.createTime | time}}</p>
+            <a :href="item.type === 'MALL跳转卖家待报价页面' ? '/vendor#/seekPurchase?type=1' : item.type === 'MALL公共询价' ? '/user#/seekPurchase' : item.type === '商城公共询价采纳结果' ? '/vendor#/vendorPurchaseOffer' : ''"
+               v-if="item.type"
+               :title="item.content" class="info" target="_blank">{{item.content}}</a>
+            <a v-else :title="item.content" class="noLink info">{{item.content}}</a>
+          </div>
+        </div>
+      </div>
+      <empty-status v-if="!messageList.content.length"  :showLink="true" :text="'抱歉，暂无消息'"></empty-status>
+    </div>
+    <pull-up :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
+  </div>
+</template>
+<script>
+  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
+  export default {
+    middleware: 'authenticated',
+    layout: 'mobileNoHeader',
+    data () {
+      return {
+        count: 10,
+        page: 1
+      }
+    },
+    fetch ({ store }) {
+      let user = store.state.option.user.data
+      return Promise.all([
+        // 获取消息列表
+        store.dispatch('messageShow/getAllMessage', { receiverUu: user.userUU, receiverEnuu: user.enterprise.uu, consumerApp: 'MALL', count: 10, page: 1, sorting: {'createTime': 'DESC'} })
+      ])
+    },
+    computed: {
+      user () {
+        return this.$store.state.option.user
+      },
+      messageList () {
+        return this.$store.state.messageShow.messageList.list.data
+      },
+      fetching () {
+        return this.messageList.fetching
+      },
+      allPage () {
+        return Math.floor(this.messageList.totalElements / this.messageList.size) + Math.floor(this.messageList.totalElements % this.messageList.size > 0 ? 1 : 0)
+      }
+    },
+    components: {
+      RemindBox,
+      PullUp,
+      EmptyStatus
+    },
+    methods: {
+      reloadList: function () {
+        this.$store.dispatch('messageShow/getAllMessage', { receiverUu: this.user.data.userUU, receiverEnuu: this.user.data.enterprise.uu, consumerApp: 'MALL', page: this.page, count: this.count, sorting: {'createTime': 'DESC'} })
+      },
+      onPullUpAction: function () {
+        this.page++
+        this.reloadList()
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .mobile-content {
+    margin-top: .6rem !important;
+    padding: .2rem;
+    background: #f1f3f6;
+    .com-none-state {
+      padding-bottom: 100%;
+    }
+    .message-list {
+      background: #fff;
+      padding: 0 .15rem 0 .2rem;
+      .content {
+        padding: .14rem 0;
+        overflow: hidden;
+        border-bottom: 1px solid #d3d3d3;
+        .new-dot {
+          position: relative;
+          b{
+            position: absolute;
+            left: .2rem;
+            top: .25rem;
+            width: .16rem;
+            height: .16rem;
+            border-radius: 50%;
+            background: #fc0405;
+          }
+        }
+        img{
+          margin: .3rem 0 0 .12rem;
+          float: left;
+          width: .8rem;
+          height: .8rem;
+        }
+        .message{
+          margin-left: .24rem;
+          float: left;
+          width: 5.4rem;
+          p{
+            display: inherit;
+            margin-bottom: .1rem;
+            text-align: right;
+            font-size: .24rem;
+            color: #666;
+          }
+          a.info{
+            font-size: .28rem;
+            color: #333;
+          }
+        }
+      }
+    }
+  }
+  .message-list:last-child .content{
+     border-bottom: none;
+   }
+</style>

plugins/axios.js

@@ -19,10 +19,11 @@ service.interceptors.request.use(config => {
       config.url = process.env.commonUrl + config.url
     } else if (config.url.indexOf('/productsuer') === 0) {
       config.url = process.env.materialUrl + config.url
+    } else if (config.url.indexOf('/messages') === 0) {
+      config.url = process.env.messageUrl + config.url
     } else {
       config.url = process.env.baseUrl + config.url
     }
-    // console.log(config.url)
     // config.headers.cookie = store.state.option.cookies + '; ' + store.state.option.sessionId
     // config.headers['User-Agent']
   } else {

plugins/mixin.js

@@ -71,5 +71,23 @@ Vue.mixin({
         this.initSctoll.refresh()
       }
     }
+  },
+  filters: {
+    time: function (time) {
+      if (typeof time === 'number') {
+        if (!time) {
+          return '无'
+        } else {
+          let d = new Date(time)
+          let year = d.getFullYear()
+          let month = d.getMonth() + 1
+          let day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
+          let hour = d.getHours() < 10 ? '0' + d.getHours() : '' + d.getHours()
+          let minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : '' + d.getMinutes()
+          let seconds = d.getSeconds() < 10 ? '0' + d.getSeconds() : '' + d.getSeconds()
+          return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
+        }
+      }
+    }
   }
 })

store/messageShow.js

@@ -0,0 +1,24 @@
+import axios from '~plugins/axios'
+
+export const actions = {
+  // 获取未读消息数量
+  loadMessageCount({ commit }, params = {}) {
+    commit('messageCount/REQUEST_MESSAGE_COUNT')
+    return axios.get('/messages/count', {params})
+      .then(response => {
+        commit('messageCount/REQUEST_MESSAGE_COUNT_SUCCESS', response.data)
+      }, err => {
+        commit('messageCount/REQUEST_MESSAGE_COUNT_FAILURE', err)
+      })
+  },
+  // 获取全部消息
+  getAllMessage({ commit }, params = {}) {
+    commit('messageList/REQUEST_MESSAGE_LIST')
+    return axios.get('/messages', {params})
+      .then(response => {
+        commit('messageList/GET_MESSAGE_LIST_SUCCESS', response.data)
+      }, err => {
+        commit('messageList/GET_MESSAGE_LIST_FAILURE', err)
+      })
+  }
+}

store/messageShow/messageCount.js

@@ -0,0 +1,22 @@
+/**
+ * 未读消息数量展示
+ */
+export const state = () => ({
+  count: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_MESSAGE_COUNT (state) {
+    state.count.fetching = true
+  },
+  REQUEST_MESSAGE_COUNT_FAILURE (state) {
+    state.count.fetching = false
+  },
+  REQUEST_MESSAGE_COUNT_SUCCESS (state, result = []) {
+    state.count.fetching = false
+    state.count.data = result
+  }
+}

store/messageShow/messageList.js

@@ -0,0 +1,22 @@
+/**
+ * 未读消息数量展示
+ */
+export const state = () => ({
+  list: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_MESSAGE_LIST (state) {
+    state.list.fetching = true
+  },
+  GET_MESSAGE_LIST_FAILURE (state) {
+    state.list.fetching = false
+  },
+  GET_MESSAGE_LIST_SUCCESS (state, result = []) {
+    state.list.fetching = false
+    state.list.data = result
+  }
+}