瀏覽代碼

消息通知~

zhengjinyi 2 年之前
父節點
當前提交
a0c3c295fd

+ 6 - 0
src/main/resources/static/css/base/base.pc.css

@@ -28,6 +28,7 @@ iframe{width:320px !important;height: 280px !important}
 .jqSelect ul li:hover{background:#FEF6F3;color:#E15616}
 .wrap{width:1184px;margin:0 auto;}
 .icon:before,.baseTopNav .nav:after{content:'';display:inline-block;background:url(/img/base/icon.png) no-repeat;font-size:0;}
+.WEB-icon:before{content:'';display:inline-block;background:url(/img/base/WEB-icon.png) no-repeat;font-size:0;}
 .icon.shop,.icon.heart{vertical-align:middle;display:inline-block;height:25px;line-height:25px;}
 .icon.shop:before{width:30px;height:25px;background-position:5px -297px}
 .icon.heart:before{width:25px;height:25px;background-position:-35px -297px}
@@ -79,6 +80,11 @@ iframe{width:320px !important;height: 280px !important}
 .baseHeadTop li.headCart .addBtn{display:inline-block;width:100%;height:40px;line-height:40px;box-sizing:border-box;position:relative;color:#333;font-size:14px;text-align:center;white-space:nowrap}
 .baseHeadTop li.headCart .addBtn:before{display:inline-block;width:20px;height:20px;vertical-align:middle;background-position:-30px -1px;margin-right:2px}
 .baseHeadTop li.headCart .addBtn em{color:#E15616;font-style:normal;margin-left:4px;}
+.baseHeadTop li.headmsg{position:relative;}
+.baseHeadTop li.headmsg .msg-btn{display:inline-block;width:100%;height:40px;line-height:40px;box-sizing:border-box;position:relative;color:#333;font-size:14px;text-align:center;white-space:nowrap}
+.baseHeadTop li.headmsg .msg-btn:before{display:inline-block;width:20px;height:20px;vertical-align:middle;background-position:1px 1px;margin-right:2px}
+.baseHeadTop li.headmsg .msg-btn em{color:#E15616;font-style:normal;margin-left:4px;}
+
 .baseHeadTop .cartData{display:none;position:absolute;right:0;top:40px;width:360px;box-sizing:border-box;background:#FFF;z-index:999;box-shadow:0px 3px 6px rgba(45,48,54,0.2);border-radius:2px}
 .baseHeadTop .cartData .empty{padding:72px 10px;text-align:center;font-size:16px;line-height:26px;}
 .baseHeadTop .cartData .empty a{color:#E15616;margin:0 5px;border-bottom:1px solid #e15616}

+ 11 - 5
src/main/resources/static/css/user-center/message.css

@@ -7,20 +7,26 @@ li{list-style:none}
     .navLayout{min-height: 500px;}
     .content .empty{background-color:#FFF;}
     .content{width: 100%;min-height: 370px;background-color: #FFFFFF;box-sizing: border-box;padding:0 20px 20px 20px;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);margin:0 0 10px 0;}
-    .content .title{width: 100%;height: 56px;border-bottom: solid 1px #e2e7ef;line-height: 56px;color: #22272e;font-size: 16px;}
+    .content .title{width: 100%;height: 56px;border-bottom: solid 1px #e2e7ef;box-sizing: border-box;padding:9px 0;}
+    .content .title .tabs-item{width:18%;height: 38px;float: left;}
+    .content .title .tabs-item a{width:100%;height: 100%;display: block;font-size: 16px;line-height: 38px;text-align: left;color: #9aa5b5;}
+    .content .title .tabs-item.active a{color: #E15616;}
     .content .section .section-top{width: 100%;height: 54px;float: left;box-sizing: border-box;padding: 9px 0;border-bottom: solid 1px #e2e7ef;}
     .content .section .section-top .cheacked{width: 100px;height: 36px;float: left;cursor: pointer;}
+    .content .section .section-top .cheacked .check{margin: 8px 15px;}
     .content .section .section-top .cheacked .icon{width: 16px;height: 16px;display: block;float: left;padding: 10px 15px}
     .content .section .section-top .cheacked span{display: inline-block;line-height: 36px;font-size: 16px;color: #22272e;}
     .content .section .section-top .button{width: 250px;height: 36px;float: right;}
     .content .section .section-top .button .btn{width: 90px;height: 34px;float: right;margin-left: 16px;border-radius: 2px;background-color: #ffe6dc;line-height: 34px;text-align: center;font-size: 14px;color: #E15616;border: solid 1px #e15616;}
     .content .section .section-content{width: 100%;height: auto;float: left;box-sizing: border-box;padding: 10px 0;}
-    .content .section .section-content .new-list{width: 100%;height: 36px;float: left;box-sizing: border-box;}
-    .content .section .section-content .new-list .text{line-height: 36px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;float: left;}
+    .content .section .section-content .new-list{width: 100%;height:80px;float: left;box-sizing: border-box;padding: 20px 0;}
+    .content .section .section-content .new-list .text{line-height: 36px;float: left;}
     .content .section .section-content .new-list .icon{width: 16px;height: 16px;display: block;float: left;padding: 10px 15px;line-height: 16px;cursor: pointer;}
-    .content .section .section-content .new-list .text p{width: 600px;line-height: 36px;font-size: 14px;color: #627386;float: left;overflow: hidden;text-overflow: ellipsis;}
+    .content .section .section-content .new-list .text p{width: 700px;line-height: 24px;font-size: 14px;color: #627386;float: left;}
+    .content .section .section-content .new-list .text p .link{color: #E15621;cursor: pointer;}
+    .content .section .section-content .new-list .text p .link:hover{text-decoration: underline;}
     .content .section .section-content .new-list .time{line-height: 36px;font-size: 14px;color: #b8bfca;float: right;}
-    .check{float: left;margin: 8px}
+    .check{float: left;margin: 4px 15px;}
     .notclick{opacity: .6}
 }
 

二進制
src/main/resources/static/img/base/H5-icon.png


二進制
src/main/resources/static/img/base/WEB-icon.png


+ 36 - 4
src/main/resources/static/js/user-center/message.js

@@ -1,9 +1,18 @@
 ;
 var helpSuggestion = new Vue({
     el: "#dashboard",
+    mixins: [noticeMixin],
     data: {
         btnLoading: false,
         isRequset:true,
+        mssageTabBarIndex:0,
+        mssageTabBar: [
+            {state: 0,text: '全部消息',bages:0},
+            {state: 1,text: '交易物流',bages:0},
+            {state: 2,text: '账户通知',bages:0},
+            {state: 3,text: '服务通知',bages:0},
+            {state: 4,text: '优惠促销',bages:0},
+        ],
         listQuery:{
             userId: '',
             pageNum:1,
@@ -14,12 +23,25 @@ var helpSuggestion = new Vue({
         pageInput: '1',
         degree:'',
         isCheckedAll:false,
-        messagesList:[],//消息列表
+        messagesList:[
+
+        ],//消息列表
         check:false,
         checklist:[],
         msgId:'',
     },
-     computed: {
+    filters: {
+        NumBadge: function (n) {//处理
+            var num = '';
+            if (n > 100) {
+                num = 99
+            } else {
+                num = n;
+            }
+            return num;
+        }
+    },
+    computed: {
         pageTotal: function () {
             var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
             return total > 0 ? total : 1;
@@ -53,7 +75,16 @@ var helpSuggestion = new Vue({
                 this.pageInput = 1;
             }
         },
-
+        changeTabsFn:function(index,status){//点击Tab切换消息通知
+            var  _self = this;
+            _self.mssageTabBarIndex = index;
+            _self.listQuery.orderState = status;
+            _self.listQuery.searchNo = '';
+            _self.listQuery.beginTime = '';
+            _self.listQuery.endTime = '';
+            _self.listQuery.pageNum = 1;
+            _self.isRequset = true;
+        },
         GetMyPcMymessageInfo:function(){
             var _self = this;
             UserApi.GetMymessageList(_self.listQuery,function (response) {
@@ -159,7 +190,8 @@ var helpSuggestion = new Vue({
         var _self=this;
         if(globalUserData){
             this.listQuery.userId = globalUserData.userId;
-            this.GetMyPcMymessageInfo();
+            this.isRequset = false;
+            // this.GetMyPcMymessageInfo();
         }
         if(!isPC){
             $('footer').addClass("noneImportant");

+ 165 - 0
src/main/resources/static/js/user-center/mixins/noticeMixin.js

@@ -0,0 +1,165 @@
+'use strict';
+var noticeMixin = function () {// 通知消息
+    return {
+        data(){
+            return{
+                orderNaticeList: [
+                    {
+                        addTime: '2022-07-05 16:51:20',
+                        content:'',
+                        image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwhiAWYBKAAE3BA2cBSY917.jpg',
+                        name:'华熙面膜面膜面膜面膜...',
+                        cont:3,
+                        orderId: 1234,
+                        type:1,
+                    },
+                    {
+                        addTime: '2022-07-05 16:51:20',
+                        content:'',
+                        image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwhiAWYBKAAE3BA2cBSY917.jpg',
+                        name:'华熙面膜面膜面膜面膜...',
+                        cont:3,
+                        type:2,
+                        orderId: 1234,
+                    },
+                    {
+                        addTime: '2022-07-05 16:51:20',
+                        content:'¥100000.00',
+                        image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwhiAWYBKAAE3BA2cBSY917.jpg',
+                        name:'华熙面膜面膜面膜面膜...',
+                        cont:3,
+                        type:3,
+                        returnType:0,
+                        returnAmount:'100000.00',
+                        orderId: 1234,
+                    },
+                    {
+                        addTime: '2022-07-05 16:51:20',
+                        content:'¥100000.00',
+                        image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwhiAWYBKAAE3BA2cBSY917.jpg',
+                        name:'华熙面膜面膜面膜面膜...',
+                        cont:3,
+                        type:3,
+                        returnType:1,
+                        returnAmount:'100000.00',
+                        orderId: 1234,
+                    },
+                    {
+                        addTime: '2022-07-05 16:51:20',
+                        content:'已成功取消!',
+                        image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwhiAWYBKAAE3BA2cBSY917.jpg',
+                        name:'华熙面膜面膜面膜面膜...',
+                        cont:3,
+                        type:4,
+                        cancelType:0,
+                        orderId: 1234,
+                    },
+                    {
+                        addTime: '2022-07-05 16:51:20',
+                        content:'因超时未确认,系统已自动取消订单!',
+                        image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwhiAWYBKAAE3BA2cBSY917.jpg',
+                        name:'华熙面膜面膜面膜面膜...',
+                        cont:3,
+                        type:4,
+                        cancelType:1,
+                        orderId: 1234,
+                    },
+                    {
+                        addTime: '2022-07-05 16:51:20',
+                        content:'因超时未付款,系统已自动取消订单!',
+                        image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwhiAWYBKAAE3BA2cBSY917.jpg',
+                        name:'华熙面膜面膜面膜面膜...',
+                        cont:3,
+                        type:4,
+                        cancelType:2,
+                        orderId: 1234,
+                    },
+                    {
+                        addTime: '2022-07-05 16:51:20',
+                        content:'',
+                        image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwhiAWYBKAAE3BA2cBSY917.jpg',
+                        name:'华熙面膜面膜面膜面膜...',
+                        cont:3,
+                        type:5,
+                        orderId: 1234,
+                    },
+                    {
+                        addTime: '2022-07-05 16:51:20',
+                        content:'',
+                        image: 'https://img.caimei365.com/group1/M00/00/1E/rB-lF2JgwhiAWYBKAAE3BA2cBSY917.jpg',
+                        name:'华熙面膜面膜面膜面膜...',
+                        cont:3,
+                        type:6,
+                        orderId: 1234,
+                    },
+                ],
+                template:""
+            }
+        },
+        mounted() {
+            var _this = this;
+            window.handleClick = function (cell) {
+                _this.handleClick(cell);
+            };
+        },
+        methods: {
+            noticeOrderText(cell) { // 交易物流通知文案
+                const linkMap = {
+                        1:`<span onclick="handleClick(cell)" class="link">去支付</span>`,
+                        2:`<span onclick="handleClick(cell)" class="link">查看订单</span>`,
+                        3:`<span onclick="handleClick(cell)" class="link">查看订单</span>`,
+                        4:`<span onclick="handleClick(cell)" class="link">查看订单</span>`,
+                        5:`<span onclick="handleClick(cell)" class="link">查看物流</span>`,
+                        6:`<span onclick="handleClick(cell)" class="link">查看订单</span>`
+                }
+                const map = {
+                    1: `您已成功下单"${cell.name}"等${cell.cont}件商品,订单等待支付,点击${linkMap[cell.type]}进行付款,支付完成后采美将尽快安排发货。`,
+                    2: `订单(${cell.name}"等${cell.cont}件商品)已支付完成,将立即安排发货,点击${linkMap[cell.type]}查看订单详情`,
+                    3: `订单(${cell.name}"等${cell.cont}件商品)已${cell.returnType == 0 ? '全部' : '部分'}退款/货成功,退款金额¥${cell.returnAmount},金额到账时间可能存在延迟,具体以支付方通知为准。点击${linkMap[cell.type]}查看退款详情`,
+                    4: `订单(${cell.name}"等${cell.cont}件商品)${cell.content},点击${linkMap[cell.type]}查看订单详情`,
+                    5: `订单(${cell.name}"等${cell.cont}件商品)已发货,点击${linkMap[cell.type]}查看物流详情`,
+                    6: `订单(${cell.name}"等${cell.cont}件商品)因超时已被系统自动收货,点击${linkMap[cell.type]}查看订单详情`,
+                }
+                return map[cell.type]
+            },
+            noticeUsersText(cell) { // 账户通知文案
+                const map = {
+                    1: '欢迎成为采美机构用户,祝您开启愉快的采购之旅。',
+                    2: `您已成功购买${cell.vipTime}采美平台超级会员服务,在服务期内每月可领多张大额优惠券,还有更多超级会员专属权益等您体验,快去看看吧 >>>`,
+                    3: `您的超级会员服务将于${cell.endTime}到期,到期后将无法享受专属会员权益,赶快去续费吧 >>>`,
+                    4: `您已获得采美平台赠送的${cell.vipTime}超级会员,在服务期内每月可领多张大额优惠券,还有更多超级会员专属权益等您体验,快去看看吧 >>>`,
+                    5: '恭喜您成功升级为资质机构用户!现在可以查看更多商品的信息啦,采美平台也将为您提供更多专业服务。',
+                    6: '您的账号升级资质机构失败!赶快去修改资料重新提交吧 >>>',
+                    7: `恭喜您(微信昵称:${cell.wechatName})成功成为机构运营人员,祝您开启愉快的采购之旅。`
+                }
+                return map[cell.type]
+            },
+            noticeCouponText(cell) { // 优惠促销通知文案
+                const copunMap = {
+                    0: `采美平台送您${cell.couponAmount}元优惠券,众多大牌正品等着您,赶快去领取下单吧 >>>`,
+                    1: `采美平台${cell.categoryType == 1 ? '产品' : '仪器'}类商品大优惠,特送您${cell.couponAmount}元优惠券,赶快去领取下单吧 >>>`,
+                    2: `为了答谢您对采美平台的支持,采美送您${cell.couponAmount}元优惠券,赶快去领取下单吧 >>>`,
+                    3: `【${cell.shopName}】赠送您${cell.couponAmount}元的店铺专属优惠券,众多火爆商品等您来!赶快去领取下单吧 >>>`,
+                    4: `恭喜成功注册采美平台,现赠送您${cell.couponAmount}元新用户优惠券,赶快去领取下单吧 >>>`,
+                }
+                const map = {
+                    1: copunMap[cell.couponType],
+                    2: `您有${cell.couponAmount}元优惠券尚未领取,优惠券将于${cell.endTime}后下架,赶快去领取下单吧 >>>`,
+                    3: `您有${cell.couponAmount}元优惠券将于${cell.endTime}过期,赶快去查看使用吧 >>>`,
+                }
+                return map[cell.type]
+            },
+            handleClick(cell){
+                console.log('cell',cell)
+                switch (cell.type) {
+                    case 1:
+                        if(cell.onlinePayFlag == 1){
+                            window.location.href = '/pay/caimei-payunder.html?orderId='+cell.orderId;
+                        }else{
+                            window.location.href = '/pay/caimei-paylist.html?orderId='+cell.orderId;
+                        }
+                }
+            }
+        }
+    };
+}();

+ 3 - 0
src/main/resources/templates/components/header.html

@@ -5,6 +5,9 @@
             <div class="header_top_left">欢迎来到采美采购服务平台</div>
             <div class="header_top_left"></div>
             <ul class="header_top_ul" >
+                <li class="headmsg">
+                    <a href="/user/message/list.html" class="WEB-icon msg-btn">消息<em v-text="'('+headCart.cartCount+')'"></em></a>
+                </li>
                 <li class="headCart">
                     <a v-if="userIdentity!=3" href="javascript:void(0)" class="addBtn icon" @click="goCartsLinkFn" onclick="_czc.push(['_trackEvent','顶部导航','购物车','点击','','Um_Event_Cart'])">购物车<em v-text="'('+headCart.cartCount+')'"></em></a>
                     <div class="cartData">

+ 0 - 7
src/main/resources/templates/user-center/dashboard.html

@@ -47,13 +47,6 @@
                             </div>
                             <div class="msg"><span>资料完整度:<em class="red">{{degree}}</em></span><a href="/user/setting/information.html">立即完善</a></div>
                         </div>
-                        <div class="message">
-                            <a href="/user/message/list.html">
-                                <i class="icon mIcon">
-                                    <span  v-if="unReadMessageCount>0" :class="[unReadMessageCount < 10 ? 'circular':'ellipse']">{{unReadMessageCount >= 99 ? '99+' : unReadMessageCount}}</span>
-                                </i>
-                            </a>
-                        </div>
                     </div>
                     <div class="svip-content clear">
                         <div class="title order">超级会员</div>

+ 9 - 4
src/main/resources/templates/user-center/message/list.html

@@ -28,7 +28,11 @@
                     <img src="/img/base/loading.gif">
                 </div>
                 <div class="content clear" v-else>
-                    <div class="title">所有消息</div>
+                    <div class="title">
+                        <div class="tabs-item"  v-for="(item, index) in mssageTabBar" :key="index" @click="changeTabsFn(index,item.state)" :class="mssageTabBarIndex == index ? 'active':''">
+                            <a href="javascript: void(0);">{{item.text}}<span v-if="index!=0">({{item.bages | NumBadge}})</span></a>
+                        </div>
+                    </div>
                     <div class="section">
                         <div class="section-top" v-if="isPC">
                             <div class="cheacked" >
@@ -40,11 +44,11 @@
                                 <a href="javascript:void(0);" class="btn" @click="signMessageFn">标为已读</a>
                             </div>
                         </div>
-                        <div class="section-content" v-if="messagesList.length > 0">
-                            <div class="new-list" v-for="(item, index) in messagesList" :key="index" :class="item.readFlag==1?'notclick':''">
+                        <div class="section-content" v-if="orderNaticeList.length > 0">
+                            <div class="new-list" v-for="(item, index) in orderNaticeList" :key="index" :class="item.readFlag==1?'notclick':''">
                                 <div class="text">
                                     <input type="checkbox"  class="check" v-model="item.check" @change="checkedItemFn(item)" />
-                                    <p>{{item.content}}</p>
+                                    <p v-html="noticeOrderText(item)"></p>
                                 </div>
                                 <div class="time">{{item.addTime}}</div>
                             </div>
@@ -92,6 +96,7 @@
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/mixins/noticeMixin.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/message.js(v=${version})}"></script>
 </body>
 </html>