|
@@ -0,0 +1,333 @@
|
|
|
+<template>
|
|
|
+ <view class="message-page">
|
|
|
+ <van-sticky>
|
|
|
+ <view class="flex headar">
|
|
|
+ <view class="flex tab">
|
|
|
+ <view
|
|
|
+ :class="['tab-item',{act: default_tab === tab.type}]"
|
|
|
+ v-for="tab in tabs"
|
|
|
+ :key="tab.type"
|
|
|
+ @click="switchTabHandle(tab.type)"
|
|
|
+ >
|
|
|
+ {{ tab.label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="right-txt" v-if="messageList.length" @click="allReadHandle">一键已读</text>
|
|
|
+ </view>
|
|
|
+ </van-sticky>
|
|
|
+ <view class="messlist-cont" v-if="messageList.length">
|
|
|
+ <view
|
|
|
+ class="message-item"
|
|
|
+ @touchstart="drawStart(item,$event)"
|
|
|
+ @touchmove="drawMove"
|
|
|
+ @touchend="drawEnd"
|
|
|
+ v-for="(item,index) in messageList"
|
|
|
+ :key="item.msg_id"
|
|
|
+ :data-index="index"
|
|
|
+ :style="'right:'+item.right+'rpx'"
|
|
|
+ >
|
|
|
+ <view class="info">
|
|
|
+ <view class="left flex">
|
|
|
+ <image :src="item.img" mode="" class="avatar"/>
|
|
|
+ <view class="content">
|
|
|
+ <view class="text_oneLine" style="width: 500rpx">{{item.content_first}}</view>
|
|
|
+ <view class="msg text_oneLine">{{item.content_second}}</view>
|
|
|
+ <view class="time">
|
|
|
+ {{item.create_time | formatTime}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="read-ico" v-if="!item.is_read"/>
|
|
|
+ <view class="detail-ico" @click="toReportDetail(item)">
|
|
|
+ 查看详情<van-icon name="arrow"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="action" @click.stop="delMessageHandle(item,index)">删除</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="nodata" v-else>
|
|
|
+ <image src="@/static/nodata.png" mode="" class="nodata-img"/>
|
|
|
+ <view>暂时没有新的消息哦</view>
|
|
|
+ <view>快去留言试试吧~</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as $message from '@/api/message.js'
|
|
|
+ const moment = require('../utils/moment-with-locales.min.js');
|
|
|
+ moment.locale('zh-cn');
|
|
|
+ export default {
|
|
|
+ filters: {
|
|
|
+ formatTime(val) {
|
|
|
+ const time = new Date(val);
|
|
|
+ const now = new Date();
|
|
|
+ const infer_time = parseInt((now.getTime() - time.getTime())/1000/60/60/24);//时间差
|
|
|
+ const infer_year = parseInt(now.getFullYear() - time.getFullYear());// 年限差
|
|
|
+
|
|
|
+ //当天
|
|
|
+ if(infer_time === 0) {
|
|
|
+ return moment(time).format('HH:mm:ss')
|
|
|
+ } else if(infer_time === 1) {
|
|
|
+ return `昨天 ${moment(time).format('HH:mm:ss')}`
|
|
|
+ } else if(infer_time === 2) {
|
|
|
+ return `前天 ${moment(time).format('HH:mm:ss')}`
|
|
|
+ } else if( infer_time >=3 && infer_time <=7 ) { //周内
|
|
|
+ return moment(time).format('ddd HH:mm:ss')
|
|
|
+ } else if(infer_year === 0) {
|
|
|
+ return moment(time).format('MM-DD HH:mm:ss')
|
|
|
+ } else {
|
|
|
+ return moment(time).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ default_tab: 0,
|
|
|
+ tabs: [
|
|
|
+ {
|
|
|
+ label: '全部消息',
|
|
|
+ type: 0
|
|
|
+ },{
|
|
|
+ label: '回复',
|
|
|
+ type: 1
|
|
|
+ },{
|
|
|
+ label: '精选',
|
|
|
+ type: 2
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ page_no: 1,
|
|
|
+ messageList: [],
|
|
|
+ isHaveMore: true,
|
|
|
+ delBtnWidth: 176,
|
|
|
+ startX: 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /* 切换tab */
|
|
|
+ switchTabHandle(type) {
|
|
|
+ this.default_tab = type;
|
|
|
+ this.page_no = 1;
|
|
|
+ this.getMessageList();
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 获取列表 */
|
|
|
+ async getMessageList() {
|
|
|
+ const { code,data } = await $message.apiMessageList({
|
|
|
+ type: this.default_tab,
|
|
|
+ current_index: this.page_no,
|
|
|
+ page_size: 20
|
|
|
+ })
|
|
|
+ if( code!==200 ) return
|
|
|
+
|
|
|
+ const { list,paging } = data;
|
|
|
+
|
|
|
+ this.isHaveMore = this.page_no >= paging.pages ? false : true;
|
|
|
+ this.messageList = this.page_no === 1 ? (list || []) : [...this.messageList,...list];
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 一键已读 */
|
|
|
+ async allReadHandle() {
|
|
|
+ const { code } = await $message.apiReadAll({ type: this.default_tab })
|
|
|
+ if( code!==200 ) return
|
|
|
+
|
|
|
+ this.page_no = 1;
|
|
|
+ this.getMessageList();
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 删除消息 */
|
|
|
+ delMessageHandle({msg_id},index) {
|
|
|
+ const _this = this;
|
|
|
+ uni.showModal({
|
|
|
+ title: "",
|
|
|
+ content: "确定要删除该留言吗?",
|
|
|
+ confirmColor: "#6784A7",
|
|
|
+ success: async function(res) {
|
|
|
+ if(res.confirm) {
|
|
|
+ const { code } = await $message.apiDelMessage({ msg_id })
|
|
|
+ if( code!==200 ) return
|
|
|
+
|
|
|
+ uni.showToast({
|
|
|
+ title: '删除成功',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ _this.messageList.splice(index,1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ onPullDownRefresh() {
|
|
|
+ this.page_no = 1;
|
|
|
+ this.getMessageList()
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ }, 1500)
|
|
|
+ },
|
|
|
+
|
|
|
+ onReachBottom() {
|
|
|
+ if (!this.isHaveMore) return
|
|
|
+ this.page_no++
|
|
|
+ this.getMessageList()
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 到报告详情 */
|
|
|
+ async toReportDetail( item ) {
|
|
|
+ const { report_chapter_id,report_id,is_read,msg_id } = item;
|
|
|
+ if(!is_read) {
|
|
|
+ const { code } = await $message.apiReadOneMessage({ msg_id })
|
|
|
+ item.is_read = 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ report_chapter_id
|
|
|
+ ? uni.navigateTo({url: `/pages-report/chapterDetail?chapterId=${report_chapter_id}&fromPage=message`})
|
|
|
+ : uni.navigateTo({url:`/pages-report/reportDetail?reportId=${report_id}&fromPage=message`})
|
|
|
+ },
|
|
|
+
|
|
|
+ async drawStart(item,e) {
|
|
|
+ let touch = e.touches[0];
|
|
|
+ this.startX = touch.clientX;
|
|
|
+ },
|
|
|
+ //触摸滑动
|
|
|
+ drawMove(e) {
|
|
|
+ // console.log("滑动");
|
|
|
+ for (let index in this.messageList) {
|
|
|
+ this.$set(this.messageList[index],'right',0);
|
|
|
+ }
|
|
|
+ let touch = e.touches[0];
|
|
|
+ let item = this.messageList[e.currentTarget.dataset.index];
|
|
|
+ let disX = this.startX - touch.clientX;
|
|
|
+ if (disX >= 20) {
|
|
|
+ if (disX > this.delBtnWidth) {
|
|
|
+ disX = this.delBtnWidth;
|
|
|
+ }
|
|
|
+ this.$set(this.messageList[e.currentTarget.dataset.index],'right',disX);
|
|
|
+ } else {
|
|
|
+ this.$set(this.messageList[e.currentTarget.dataset.index],'right',0);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //触摸滑动结束
|
|
|
+ drawEnd(e) {
|
|
|
+ let item = this.messageList[e.currentTarget.dataset.index];
|
|
|
+ if (item.right >= this.delBtnWidth / 2) {
|
|
|
+ this.$set(this.messageList[e.currentTarget.dataset.index],'right',this.delBtnWidth);
|
|
|
+ } else {
|
|
|
+ this.$set(this.messageList[e.currentTarget.dataset.index],'right',0);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getMessageList()
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.message-page {
|
|
|
+ padding: 40rpx 0;
|
|
|
+ width: 750rpx;
|
|
|
+ overflow-x: hidden;
|
|
|
+ .headar {
|
|
|
+ padding: 0 34rpx 20rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #E3B377;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .right-txt {
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ .tab-item {
|
|
|
+ color: #333;
|
|
|
+ margin-right: 50rpx;
|
|
|
+ &.act {
|
|
|
+ color: #E3B377;
|
|
|
+ position: relative;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: -20rpx;
|
|
|
+ left: 20%;
|
|
|
+ width: 50%;
|
|
|
+ height: 4rpx;
|
|
|
+ background-color: #E3B377;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .messlist-cont {
|
|
|
+ .message-item {
|
|
|
+ position: relative;
|
|
|
+ margin: 30rpx 0;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ .info {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ .avatar {
|
|
|
+ width: 65rpx;
|
|
|
+ height: 65rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ color: #666;
|
|
|
+ font-size: 28rpx;
|
|
|
+ flex: 1;
|
|
|
+ .msg {
|
|
|
+ width: 500rpx;
|
|
|
+ color: #333;
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ color: #999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .read-ico {
|
|
|
+ width: 26rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ background-color: #D62020;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-ico {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action {
|
|
|
+ width: 176rpx;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #E86F6F;
|
|
|
+ color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ right: -176rpx;
|
|
|
+ top: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nodata {
|
|
|
+ color: #999;
|
|
|
+ font-size: 34rpx;
|
|
|
+ text-align: center;
|
|
|
+ .nodata-img {
|
|
|
+ margin: 100rpx auto 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|