sailun-tbr-web/pages/msg/index.vue

<template>
  <view>
    <view class="u-page" v-if="orderList.length!=0">
     <u-swipe-action :show="item.show" :index="index" v-for="(item, index) in orderList" :key="index" @click="click(item.sendUserId)"
			 @content-click="inSystem" @open="open(index)" :options="options">
        <navigator
          :url="'./System-message/index?sendUserId=' + item.sendUserId"
          class="item u-border-bottom"
        >
          <image
            mode="aspectFill"
            src="../../static/sailun/xiaoxi.png"
          />
          <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
          <view class="title-wrap">
            <text class="title u-line-2">{{ item.msgTitle }}</text>
            <view class="title-wrap-one"> 【{{ item.sendUserName }} 】 </view>
          </view>
          <view class="title-wrap-two">
            <view>
              {{ item.gatTime | formatDate }}
              <!-- 12.25 -->
            </view>

            <view v-if="item.unread === 0"> </view>
            <view v-else>
              <view class="title-wrap-two-one">
                {{ item.unread }}
              </view>
            </view>
          </view>
        </navigator>
      </u-swipe-action>
    </view>
	<u-empty style="margin-top: 100rpx;" v-else text="暂无数据" mode="list"></u-empty>
    <!-- <u-tabbar v-model="current" :list="list"></u-tabbar> -->
  </view>
</template>

<script>
import { request } from "../../common/request/request";
require("promise.prototype.finally").shim();
export default {
  data() {
    return {
      currentdate: "",
      orderList: [],
      disabled: false,
      btnWidth: 180,
      show: false,
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
    };
  },
  created() {},
  onShow() {
    this.getDate();
  },
  filters: {
    formatDate: function (time) {
      var now = new Date();
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var day = now.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      let nowDay = year + "-" + month + "-" + day;
      if (nowDay != time.substring(0, 10)) {
        return time.substring(0, 10);
      } else {
        return time.substring(11, 19);
      }
    },
  },
  methods: {
    getDate() {
		uni.showLoading({
			title: '加载中...'
		});
      request({
        url: "/appMessage/getMessageCategory",
        method: "post",
        data: {
          acceptUserId:this.$store.state.storeInfo.storeId,
          userId:this.$store.state.storeInfo.userId,
        },
      })
        .then((res) => {
          this.orderList = res.data.category;
          for (let i = 0; i < this.orderList.length; i++) {
            this.gatTime = this.orderList[i].gatTime;
          }
        })
        .catch((err) => {
        })
        .finally(() => {
          setTimeout(() => {
            uni.hideLoading();
            this.loading = false;
          }, 300);
        });
    },
    inSystem(index) {
    },
    click(index) {
      request({
        url: "/appMessage/deleteMessage",
        method: "post",
        data: {
          acceptUserId:this.$store.state.storeInfo.storeId,
          sendUserId: index,
          userId:this.$store.state.storeInfo.userId,
        },
      })
        .then((res) => {
          this.$u.toast(`删除成功`);
          this.getDate();
        })
        .catch((err) => {
        })
        .finally(() => {
          setTimeout(() => {
            uni.hideLoading();
            this.loading = false;
          }, 300);
        });
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      this.orderList[index].show = true;
      this.orderList.map((val, idx) => {
        if (index != idx) this.orderList[idx].show = false;
      });
      // })
    },
  },
};
</script>

<style lang="scss" scoped>
.u-page {
  margin-bottom: 100rpx;
}

.item {
  display: flex;
  padding: 20rpx;
}

image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}

.title {
  text-align: left;
  font-size: 34rpx;
  color: #333333;
  font-weight: bold;
  margin-top: 20rpx;
}

.title-wrap {
  width: 280rpx;
  margin-left: 30rpx;
}

.title-wrap-one {
  margin-top: 10rpx;
  font-size: 23rpx;
  color: #999999;
}

.title-wrap-two {
  margin-left: 130rpx;
  margin-top: 20rpx;
}

.title-wrap-two > view:nth-child(1) {
  font-size: 19rpx;
  color: #999999;
}

.title-wrap-two-one {
  width: 35rpx;
  height: 35rpx;
  background: #fc3228;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  font-size: 19rpx;
  margin: 0 auto;
  margin-top: 15rpx;
}
</style>