style(client):优化消息样式

src/design/common.css

@@ -104,6 +104,10 @@
   color: #666666;
 }
 
+.text-999 {
+  color: #999999;
+}
+
 .text-white {
   color: #ffffff;
 }

src/pages/tabbar/message copy.vue

@@ -0,0 +1,245 @@
+<template>
+  <view class="container">
+    <view>
+      <u-navbar :autoBack="true" leftIconSize="0">
+        <view slot="center">
+          <u-tabs :list="list" lineWidth="60" :current="current" @change="changeInfo" />
+        </view>
+      </u-navbar>
+
+      <view :style="{ marginTop: totalHeight + 'px' }">
+        <view v-if="current == 0">
+          <view
+            class="orderList"
+            v-for="item in orderList"
+            :key="item.id"
+            @tap="$Router.push(item.url)"
+          >
+            <view class="img">
+              <image :src="item.img" style="width: 45px; height: 45px" />
+              <view class="dot">
+                <u-badge type="warning" max="99" :value="item.numb"></u-badge>
+              </view>
+            </view>
+            <view class="orderItem">
+              <view class="order1">{{ item.name }}</view>
+              <view class="order2">{{ item.text }}</view>
+            </view>
+            <u-icon name="arrow-right"></u-icon>
+          </view>
+        </view>
+
+        <!-- 消息通知 -->
+        <view v-if="current == 1">
+          <view class="message" @click="notification" v-for="item in 5" :key="item">
+            <view class="img">
+              <image src="/static/icon/tools.png" style="width: 45px; height: 45px" />
+            </view>
+            <view class="business">
+              <view class="businessItem">商家</view>
+              <view class="messages">您好，请问有什么需要帮助的吗？</view>
+            </view>
+            <view class="time">
+              <view class="timeItem">17:00</view>
+              <u-badge numberType="overflow" :type="type" max="99" :value="value" />
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <tabbar currentTab="clientMessage" />
+  </view>
+</template>
+
+<script>
+import { getIsHaveNewInform } from '@/api/client/message.js';
+export default {
+  data() {
+    return {
+      list: [
+        {
+          id: 1,
+          name: '系统通知',
+        },
+        // ,
+        // {
+        //   id: 2,
+        //   name: '消息通知',
+        //   badge: {
+        //     value: 5,
+        //   },
+        // },
+      ],
+      current: 0,
+      orderList: [
+        {
+          id: '1',
+          img: '/static/icon/tools.png',
+          name: '订单通知',
+          text: '暂无订单通知。',
+          url: '/pagesMessage/orderNotify',
+          numb: 0,
+        },
+        // {
+        //   id: '3',
+        //   img: '/static/icon/tools.png',
+        //   name: '支付通知',
+        //   text: '暂无支付通知。',
+        //   url: '/pages/client/clientPackage/message/orderNotice/index',
+        //   numb:0
+        // },
+        {
+          id: '2',
+          img: '/static/icon/tools.png',
+          name: '评价通知',
+          text: '暂无评价通知。',
+          url: '/pagesMessage/commentNotify',
+          numb: 0,
+        },
+        {
+          id: '4',
+          img: '/static/icon/tools.png',
+          name: '点赞回复',
+          text: '暂无点赞回复。',
+          url: '/pagesMessage/kudosNotify',
+          numb: 0,
+        },
+        {
+          id: '5',
+          img: '/static/icon/tools.png',
+          name: '优惠福利',
+          text: '暂无优惠福利通知。',
+          url: '/pagesMessage/benefitsNotify',
+          numb: 0,
+        },
+      ],
+      type: 'warning',
+      value: 99999,
+      flag: true,
+    };
+  },
+  onShow() {
+    this.handlerGetSystemNewInform();
+  },
+  computed: {
+    totalHeight() {
+      return uni.getSystemInfoSync().statusBarHeight + 44;
+    },
+  },
+  methods: {
+    // 获取订单详细通知 是否有系统新消息
+    handlerGetSystemNewInform() {
+      getIsHaveNewInform().then(res => {
+        let { order, comment, evaluate, coupon } = res.data;
+        this.orderList[0].numb = order;
+        order
+          ? (this.orderList[0].text = `您有${order}条订单信息`)
+          : (this.orderList[0].text = '暂无订单通知');
+
+        //       this.orderList[1].numb = pay
+        // pay ? this.orderList[1].text = `您有${pay}条订单信息` : this.orderList[1].text = '暂无支付通知'
+
+        this.orderList[1].numb = comment;
+        comment
+          ? (this.orderList[1].text = `您有${comment}条订单信息`)
+          : (this.orderList[1].text = '暂无评价通知');
+
+        this.orderList[2].numb = evaluate;
+        evaluate
+          ? (this.orderList[2].text = `您有${evaluate}条订单信息`)
+          : (this.orderList[2].text = '暂无点赞回复');
+
+        this.orderList[3].numb = coupon;
+        coupon
+          ? (this.orderList[3].text = `您有${coupon}条订单信息`)
+          : (this.orderList[3].text = '暂无优惠福利通知');
+      });
+    },
+    changeInfo(index) {
+      this.current = index.index;
+      if (index == 0) {
+        this.handlerGetSystemNewInform();
+      }
+    },
+    notification() {
+      // uni.navigateTo({
+      //   url: `/pages/client/clientPackage/chatRoom/chat`,
+      // });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  min-height: 100vh;
+  background-color: #fff;
+
+  .img {
+    width: 90rpx;
+    height: 90rpx;
+    margin-right: 20rpx;
+    position: relative;
+
+    .dot {
+      // width: 16rpx;
+      height: 16rpx;
+      // background-color: red;
+      border-radius: 8rpx;
+      position: absolute;
+      top: -10rpx;
+      right: -10rpx;
+    }
+  }
+
+  .orderList {
+    display: flex;
+    padding: 30rpx 40rpx;
+    justify-content: space-between;
+    background-color: #fff;
+    .orderItem {
+      flex: 1;
+
+      .order1 {
+        font-size: 16px;
+        margin-bottom: 10rpx;
+        color: #232323;
+      }
+
+      .order2 {
+        font-size: 12px;
+        color: #9ca3af;
+      }
+    }
+  }
+
+  .message {
+    display: flex;
+    padding: 30rpx 40rpx;
+    justify-content: space-between;
+
+    .business {
+      flex: 1;
+
+      .businessItem {
+        font-size: 16px;
+        margin-bottom: 10rpx;
+        color: #232323;
+      }
+
+      .messages {
+        font-size: 12px;
+        color: #9ca3af;
+      }
+    }
+
+    .time {
+      .timeItem {
+        color: #9ca3af;
+        font-size: 14px;
+        margin-bottom: 8px;
+      }
+    }
+  }
+}
+</style>

src/pages/tabbar/message.vue

@@ -1,230 +1,104 @@
 <template>
-  <view class="container">
-    <view>
-      <u-navbar :autoBack="true" leftIconSize="0">
-        <view slot="center">
-          <u-tabs :list="list" lineWidth="60" :current="current" @change="changeInfo" />
-        </view>
-      </u-navbar>
-
-      <view :style="{ marginTop: totalHeight + 'px' }">
-        <view v-if="current == 0">
-          <view class="orderList" v-for="item in orderList" :key="item.id" @tap="$Router.push(item.url)">
-            <view class="img">
-              <image :src="item.img" style="width: 45px; height: 45px" />
-              <view class="dot">
-                <u-badge type="warning" max="99" :value="item.numb"></u-badge>
-              </view>
-            </view>
-            <view class="orderItem">
-              <view class="order1">{{ item.name }}</view>
-              <view class="order2">{{ item.text }}</view>
-            </view>
-            <u-icon name="arrow-right"></u-icon>
-          </view>
-        </view>
-
-        <!-- 消息通知 -->
-        <view v-if="current == 1">
-          <view class="message" @click="notification" v-for="item in 5" :key="item">
-            <view class="img">
-              <image src="/static/icon/tools.png" style="width: 45px; height: 45px" />
-            </view>
-            <view class="business">
-              <view class="businessItem">商家</view>
-              <view class="messages">您好，请问有什么需要帮助的吗？</view>
-            </view>
-            <view class="time">
-              <view class="timeItem">17:00</view>
-              <u-badge numberType="overflow" :type="type" max="99" :value="value" />
-            </view>
-          </view>
+  <view class="client-message">
+    <page-navbar :hasBack="false" bgColor="#fff" title="消息"></page-navbar>
+    <view
+      class="fl-flex fl-justify-between fl-align-center u-m-b-40"
+      v-for="(item, index) in orderList"
+      :key="index"
+      @tap="$Router.push(item.url)"
+    >
+      <view class="fl-flex fl-align-center">
+        <u--image
+          :src="`/static/pages/message/${item.img}.png`"
+          width="112rpx"
+          height="112rpx"
+        ></u--image>
+        <view class="u-m-l-16">
+          <view class="f-s-28 text-primary u-m-b-8">{{ item.title }}</view>
+          <view class="f-s-24 text-999">{{ item.text }}</view>
         </view>
       </view>
+      <u-icon name="arrow-right" color="#000000" size="18"></u-icon>
     </view>
-    <tabbar currentTab="clientMessage" />
   </view>
 </template>
 
 <script>
-  import { getIsHaveNewInform } from '@/api/client/message.js';
-  export default {
-    data() {
-      return {
-        list: [{
-            id: 1,
-            name: '系统通知',
-          }
-          // ,
-          // {
-          //   id: 2,
-          //   name: '消息通知',
-          //   badge: {
-          //     value: 5,
-          //   },
-          // },
-        ],
-        current: 0,
-        orderList: [{
-            id: '1',
-            img: '/static/icon/tools.png',
-            name: '订单通知',
-            text: '暂无订单通知。',
-            url: '/pagesMessage/orderNotify',
-            numb:0
-          },
-          // {
-          //   id: '3',
-          //   img: '/static/icon/tools.png',
-          //   name: '支付通知',
-          //   text: '暂无支付通知。',
-          //   url: '/pages/client/clientPackage/message/orderNotice/index',
-          //   numb:0
-          // },
-          {
-            id: '2',
-            img: '/static/icon/tools.png',
-            name: '评价通知',
-            text: '暂无评价通知。',
-            url: '/pagesMessage/commentNotify',
-            numb:0
-          },
-          {
-            id: '4',
-            img: '/static/icon/tools.png',
-            name: '点赞回复',
-            text: '暂无点赞回复。',
-            url: '/pagesMessage/kudosNotify',
-            numb:0
-          },
-          {
-            id: '5',
-            img: '/static/icon/tools.png',
-            name: '优惠福利',
-            text: '暂无优惠福利通知。',
-            url: '/pagesMessage/benefitsNotify',
-            numb:0
-          },
-        ],
-        type: 'warning',
-        value: 99999,
-        flag: true,
-      };
-    },
-    onShow() {
-      this.handlerGetSystemNewInform()
-    },
-    computed: {
-      totalHeight() {
-        return uni.getSystemInfoSync().statusBarHeight + 44;
-      },
-    },
-    methods: {
-      // 获取订单详细通知 是否有系统新消息
-      handlerGetSystemNewInform() {
-        getIsHaveNewInform().then(res => {
-		  let { order , comment , evaluate , coupon} = res.data
-          this.orderList[0].numb = order
-          order ? this.orderList[0].text = `您有${order}条订单信息` : this.orderList[0].text = '暂无订单通知'
-
-    //       this.orderList[1].numb = pay
-		  // pay ? this.orderList[1].text = `您有${pay}条订单信息` : this.orderList[1].text = '暂无支付通知'
-
-          this.orderList[1].numb = comment
-		  comment ? this.orderList[1].text = `您有${comment}条订单信息` : this.orderList[1].text = '暂无评价通知'
-
-          this.orderList[2].numb = evaluate
-		  evaluate ? this.orderList[2].text = `您有${evaluate}条订单信息` : this.orderList[2].text = '暂无点赞回复'
-
-          this.orderList[3].numb = coupon
-		  coupon ? this.orderList[3].text = `您有${coupon}条订单信息` : this.orderList[3].text = '暂无优惠福利通知'
-        })
-      },
-      changeInfo(index) {
-        this.current = index.index;
-        if(index == 0){
-          this.handlerGetSystemNewInform()
-        }
-      },
-      notification() {
-        // uni.navigateTo({
-        //   url: `/pages/client/clientPackage/chatRoom/chat`,
-        // });
-      },
+import { getIsHaveNewInform } from '@/api/client/message.js';
+export default {
+  data() {
+    return {
+      orderList: [
+        {
+          img: 'message-order',
+          title: '订单通知',
+          text: '暂无订单通知。',
+          url: '/pagesMessage/orderNotify',
+          numb: 0,
+        },
+        {
+          img: 'message-evaluate',
+          title: '评价通知',
+          text: '暂无评价通知。',
+          url: '/pagesMessage/commentNotify',
+        },
+        {
+          img: 'message-love',
+          title: '点赞回复',
+          text: '暂无点赞回复。',
+          url: '/pagesMessage/kudosNotify',
+        },
+        {
+          img: 'message-discounts',
+          title: '优惠福利',
+          text: '暂无优惠福利通知。',
+          url: '/pagesMessage/benefitsNotify',
+          numb: 0,
+        },
+      ],
+    };
+  },
+  onShow() {
+    this.handlerGetSystemNewInform();
+  },
+  methods: {
+    // 获取订单详细通知 是否有系统新消息
+    handlerGetSystemNewInform() {
+      getIsHaveNewInform().then(res => {
+        let { order, comment, evaluate, coupon } = res.data;
+        this.orderList[0].numb = order;
+        order
+          ? (this.orderList[0].text = `您有${order}条订单信息`)
+          : (this.orderList[0].text = '暂无订单通知');
+
+        // this.orderList[1].numb = pay
+        // pay ? this.orderList[1].text = `您有${pay}条订单信息` : this.orderList[1].text = '暂无支付通知'
+
+        this.orderList[1].numb = comment;
+        comment
+          ? (this.orderList[1].text = `您有${comment}条订单信息`)
+          : (this.orderList[1].text = '暂无评价通知');
+
+        this.orderList[2].numb = evaluate;
+        evaluate
+          ? (this.orderList[2].text = `您有${evaluate}条订单信息`)
+          : (this.orderList[2].text = '暂无点赞回复');
+
+        this.orderList[3].numb = coupon;
+        coupon
+          ? (this.orderList[3].text = `您有${coupon}条订单信息`)
+          : (this.orderList[3].text = '暂无优惠福利通知');
+      });
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .container {
-    min-height: 100vh;
-    background-color: #fff;
-
-    .img {
-      width: 90rpx;
-      height: 90rpx;
-      margin-right: 20rpx;
-      position: relative;
-
-      .dot {
-        // width: 16rpx;
-        height: 16rpx;
-        // background-color: red;
-        border-radius: 8rpx;
-        position: absolute;
-        top: -10rpx;
-        right: -10rpx;
-      }
-    }
-
-    .orderList {
-      display: flex;
-      padding: 30rpx 40rpx;
-      justify-content: space-between;
-      background-color: #fff;
-      .orderItem {
-        flex: 1;
-
-        .order1 {
-          font-size: 16px;
-          margin-bottom: 10rpx;
-          color: #232323;
-        }
-
-        .order2 {
-          font-size: 12px;
-          color: #9ca3af;
-        }
-      }
-    }
-
-    .message {
-      display: flex;
-      padding: 30rpx 40rpx;
-      justify-content: space-between;
-
-      .business {
-        flex: 1;
-
-        .businessItem {
-          font-size: 16px;
-          margin-bottom: 10rpx;
-          color: #232323;
-        }
-
-        .messages {
-          font-size: 12px;
-          color: #9ca3af;
-        }
-      }
-
-      .time {
-        .timeItem {
-          color: #9ca3af;
-          font-size: 14px;
-          margin-bottom: 8px;
-        }
-      }
-    }
-  }
+.client-message {
+  height: 100vh;
+  background-color: #fff;
+  padding: 32rpx;
+  box-sizing: border-box;
+}
 </style>

src/pages/tabbar/mine/index.vue

@@ -13,7 +13,7 @@
           <view class="f-s-36 u-font-600 u-m-l-30"> {{ nickname }} </view>
         </view>
         <u--image
-          src="/static/user/mine/icon_user_mine_setting.png"
+          src="/static/pages/mine/mine_setting.png"
           width="48rpx"
           height="48rpx"
           @tap="$Router.push('/PageMine/setting/index')"