You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
4.2 KiB
128 lines
4.2 KiB
1 year ago
|
<template>
|
||
|
|
<view class="notice">
|
||
|
|
<!-- 导航条 -->
|
||
|
|
<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
|
||
|
|
<view class="cu-bar fixed bg-bgcolor" :style="{
|
||
|
|
height: $wanlshop.wanlsys().height + 'px',
|
||
|
|
paddingTop: $wanlshop.wanlsys().top + 'px'
|
||
|
|
}">
|
||
|
|
<view class="action">
|
||
|
|
<text class="wlIcon-fanhui1" style="margin-left: 0;" @tap="$wanlshop.back(1)"></text>
|
||
|
|
<!-- #ifdef MP -->
|
||
|
|
<text class="wlIcon-shezhi" @tap="$wanlshop.to('/pages/user/setting/notice')"></text>
|
||
|
|
<!-- #endif -->
|
||
|
|
</view>
|
||
|
|
<view class="content" :style="{top: $wanlshop.wanlsys().top + 'px'}">
|
||
|
|
消息中心
|
||
|
|
</view>
|
||
|
|
<!-- #ifndef MP -->
|
||
|
|
<view class="action" >
|
||
|
|
<text class="wlIcon-qingkong" @tap="empty()"></text>
|
||
|
|
<text class="wlIcon-shezhi" @tap="$wanlshop.to('/pages/user/setting/notice')"></text>
|
||
|
|
</view>
|
||
|
|
<!-- #endif -->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="wanl-notice bg-bgcolor">
|
||
|
|
<view class="tool">
|
||
|
|
<view class="text-sm margin-right" v-if="statistics.notice.chat > 0">{{statistics.notice.chat}}条 未读消息</view>
|
||
|
|
<view class="text-sm margin-right" v-else>没有未读消息</view>
|
||
|
|
<!-- #ifdef MP -->
|
||
|
|
<view class="text-sm" @tap="empty()"><view class="cu-tag round sm margin-right-xs wlIcon-qingkong"></view>全部已读</view>
|
||
|
|
<!-- #endif -->
|
||
|
|
</view>
|
||
|
|
<view class="mode padding-bj">
|
||
|
|
<view class="flex text-sm wanl-pip shadow-warp">
|
||
|
|
<view class="logistics" @tap="$wanlshop.auth('/pages/notice/logistics/logistics')">
|
||
|
|
<text class="wlIcon-wuliuqiache2"></text>
|
||
|
|
交易物流
|
||
|
|
<view class="cu-tag badge" v-if="statistics.notice.order != 0">{{statistics.notice.order}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="notice" @tap="$wanlshop.auth('/pages/notice/notify/notify')">
|
||
|
|
<text class="wlIcon-tongzhi"></text>
|
||
|
|
通知消息
|
||
|
|
<view class="cu-tag badge" v-if="statistics.notice.notice != 0">{{statistics.notice.notice}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="Interaction" @tap="$wanlshop.to('/pages/notice/system/system')">
|
||
|
|
<text class="wlIcon-liuyan-fill"></text>
|
||
|
|
系统消息
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="wanl-msg" v-if="chat.list.length != 0">
|
||
|
|
<view class="cu-list menu-avatar">
|
||
|
|
<view class="cu-item" v-for="(item, index) in chat.list" :key="index" @tap="toChat(item.id)" :class="modalName=='move-box-'+ item.id?'move-cur':''" @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + item.id">
|
||
|
|
<view class="cu-avatar round lg" :style="{ backgroundImage: 'url(' + $wanlshop.oss(item.avatar, 100, 100) + ')' }"></view>
|
||
|
|
<view class="content">
|
||
|
|
<view class="wanl-black">{{item.name}}</view>
|
||
|
|
<view class="wanl-gray text-sm flex">
|
||
|
|
<view class="text-cut wanl-gray-light">
|
||
|
|
{{item.content}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="action">
|
||
|
|
<view class="text-gray text-sm">{{$wanlshop.timeToChat(item.createtime)}}</view>
|
||
|
|
<view class="cu-tag bg-red" v-if="item.count > 0">{{item.count}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="move">
|
||
|
|
<view class="bg-red" @tap.stop="del(index)">删除本地</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<wanl-empty src="notice_default3x" text="还没有任何消息" v-else/>
|
||
|
|
<view class="edgeInsetBottom"></view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapState, mapActions } from 'vuex';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
modalName: null,
|
||
|
|
listTouchStart: 0,
|
||
|
|
listTouchDirection: null
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState(['chat','statistics'])
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions({
|
||
|
|
del: 'chat/del', // 删除消息记录
|
||
|
|
empty: 'chat/empty', // 清空角标
|
||
|
|
}),
|
||
|
|
ListTouchStart(e) {
|
||
|
|
this.listTouchStart = e.touches[0].pageX
|
||
|
|
},
|
||
|
|
ListTouchMove(e) {
|
||
|
|
this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
|
||
|
|
},
|
||
|
|
ListTouchEnd(e) {
|
||
|
|
if (this.listTouchDirection == 'left') {
|
||
|
|
this.modalName = e.currentTarget.dataset.target
|
||
|
|
} else {
|
||
|
|
this.modalName = null
|
||
|
|
}
|
||
|
|
this.listTouchDirection = null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.cu-bar .search-form{
|
||
|
|
background-color: #f2f2f2;
|
||
|
|
}
|
||
|
|
/* #ifdef MP */
|
||
|
|
.cu-bar .search-form{
|
||
|
|
margin: 0 0 0 25rpx;
|
||
|
|
}
|
||
|
|
/* #endif */
|
||
|
|
</style>
|