|
|
@@ -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>
|
