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

<template>
  <view>
    <view class="u-page">
     <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="https://cdn.uviewui.com/uview/common/logo.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-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();
    // this.addDate()
  },
  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() {
      request({
        url: "/appMessage/getMessageCategory",
        method: "post",
        data: {
          acceptUserId:this.$store.state.storeInfo.storeId,
          userId:this.$store.state.storeInfo.userId,
        },
      })
        .then((res) => {
          console.log(res);
          this.orderList = res.data.category;

          for (let i = 0; i < res.data.data.category.length; i++) {
            // this.orderList = res.data.data.category[i]
            this.gatTime = res.data.data.category[i].gatTime;
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          setTimeout(() => {
            uni.hideLoading();
            this.loading = false;
          }, 300);
        });
    },
    inSystem(index) {
      console.log(index);
      // console.log(index)
      // this.$u.route({
      // 	url: 'pages/msg/System-message/index',

      // })
    },
    click(index) {
      console.log(index);

      // this.orderList.splice(index, 1);

      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(`删除了第${index}个cell`);
          this.getDate();
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          setTimeout(() => {
            uni.hideLoading();
            this.loading = false;
          }, 300);
        });
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      console.log(index);
      // console.log(this.orderList[index].show)
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      // this.orderList[index].show = true;
      console.log(this.orderList[index].show);
      // this.orderList.map((val, idx) => {
      // 	console.log(index)
      // 	console.log(idx)
      // if (index != idx) this.orderList[index].show = false;
      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: 29rpx;
  color: #333333;
  font-weight: bold;
  margin-top: 20rpx;
}

.title-wrap {
  width: 280rpx;
}

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

.title-wrap-two {
  margin-left: 150rpx;
  margin-top: 10rpx;
}

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