applet/pages/user/eventDetails.vue

<template>
  <view class="event-details">
    <view class="middle">
      <view v-if="type == 1">
        <view
          class="item"
          v-for="(item, index) in msgList"
          :key="index"
          @click="goToGbOrderDetails(item)"
        >
          <view v-if="item.messageBody.products.length > 1">
            <view class="box">
              <view class="time">
                {{ item.createTime }}
              </view>
            </view>
            <view class="content" style="padding: 44rpx 0">
              <view class="title" style="padding: 0 30rpx"> 订单已支付 </view>
              <view class="single-data">
                <view class="img-box u-border-one" style="display: flex">
                  <view
                    v-for="(i, v) in item.messageBody.products"
                    :key="v"
                    class="single-img"
                  >
                    <image
                      class="goods-img"
                      :src="i.productImg"
                      v-if="v < 3"
                    ></image>
                  </view>
                </view>
                <view class="single-bottom">
                  <text
                    >共{{ item.messageBody.productNum }}件商品，实付金额
                  </text>
                  <!-- item.messageBody.goods_num -->
                  <view class="money">
                    <rich-text
                      :nodes="$mUtil.priceBigSmall(item.messageBody.money)"
                    >
                    </rich-text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-else>
            <view class="box">
              <view class="time u-text2">
                {{ item.createTime }}
              </view>
            </view>
            <view class="content">
              <view class="title"> 订单已支付 </view>
              <view class="small-box">
                <view v-if="item.messageBody.productType == 4">
                  <view class="small-left">
                    <image
                      :src="imgUrl + '/delImg/recharge.png'"
                      mode=""
                    ></image>
                  </view>
                </view>
                <view v-else>
                  <view class="small-left">
                    <image
                      :src="item.messageBody.products[0].productImg"
                      mode=""
                    ></image>
                  </view>
                </view>

                <view v-if="item.messageBody.productType == 3">
                  <view class="small-right">
                    <view class="small-top u-text2">
                      {{ item.messageBody.products[0].productName }}
                    </view>
                    <view class="specifications u-mt50">
                      规格：<text>{{
                        item.messageBody.products[0].productSpec
                      }}</text>
                    </view>
                    <view class="price">
                      积分
                      {{ item.messageBody.totalPoint }}
                    </view>
                  </view>
                </view>
                <view v-else>
                  <view class="small-right">
                    <view class="small-top u-text2">
                      {{ item.messageBody.products[0].productName }}
                    </view>
                    <view
                      class="specifications u-mt50"
                      v-if="item.messageBody.products[0].productSpec"
                    >
                      规格：<text>{{
                        item.messageBody.products[0].productSpec
                      }}</text>
                    </view>
                    <view class="price">
                      <text style="font-size: 26rpx; color: #1a1a1a"
                        >￥{{
                          item.messageBody.money % 1 == 0
                            ? item.messageBody.money + ".00"
                            : item.messageBody.money
                        }}</text
                      >

                      <text style="margin-left: 13rpx; color: #999999"
                        >x {{ item.messageBody.productNum }}</text
                      >
                    </view>
                  </view>
                </view>
              </view>
              <view v-if="item.messageBody.productType == 3">
                <view class="bottom-box">
                  共{{ item.messageBody.productNum }}件商品，实付积分<text>{{
                    item.messageBody.totalPoint
                  }}</text>
                  <view
                    v-if="item.messageBody.totalAmount"
                    style="margin-left: 4rpx"
                    >含运费<text style="margin-left: 4rpx"
                      >{{ item.messageBody.totalAmount }}元</text
                    ></view
                  >
                </view>
              </view>
              <view v-else>
                <view class="bottom-box">
                  <text
                    >共{{ item.messageBody.productNum }}件商品，实付金额
                  </text>
                  <view class="money">
                    <rich-text
                      :nodes="
                        $mUtil.priceBigSmall(item.messageBody.totalAmount)
                      "
                    >
                    </rich-text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <loadMore v-if="msgList.length > 0" :status="status"></loadMore>
      </view>
      <view v-if="type == 2">
        <view v-if="msgList.length > 0">
          <view
            class="item"
            v-for="(item, index) in msgList"
            :key="index"
            @click="goToGbOrderDetails(item)"
          >
            <view class="box">
              <view class="time">
                {{ item.createTime }}
              </view>
            </view>
            <view class="content">
              <view v-if="item.messageBody.logisticsStatus == 0 && item.messageBody.logisticCode">
                <view class="logistics-top"> 订单已发货 </view>
              </view>
              <view v-else>
                <view class="logistics-top"> 订单已备货 </view>
              </view>
              <view v-if="item.messageBody.logisticsStatus == 1">
                <view class="logistics-top"> 订单已收货 </view>
              </view>
              <view v-for="(v, index) in item.messageBody.products || []" :key="index">
                <view class="logistics-box" v-if="v.productNum">
                  <view class="logistics-left">
                    <image
                      :src="v.productImg"
                      mode=""
                    ></image>
                  </view>
                  <view class="logistics-right">
                    <view class="logistics-right-top u-text2">
                      {{ v.productName }}
                    </view>
                    <!-- 修改积分字段 -->
                    <!-- <view v-if="item.messageBody.exchange == true">
                      <view class="logistics-right-content">
                        ￥{{ item.messageBody.money }}元 +
                        {{ item.messageBody.totalPoint }}积分
                        <text>x{{ item.messageBody.productNum }}</text>
                      </view>
                    </view>
                    <view v-if="item.messageBody.exchange == false">
                      <view class="logistics-right-content">
                        ￥{{ item.messageBody.money }}
                        <text>x{{ item.messageBody.goodsNum }}</text>
                      </view>
                    </view> -->

                    <view class="logistics-right-bottom" v-if="item.messageBody.logisticCode">
                      物流单号：{{ item.messageBody.logisticCode }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <loadMore v-if="msgList.length > 0" :status="status"></loadMore>
        </view>
        <noData v-else :config="{ top: 20, content: '暂无消息~' }"></noData>
      </view>
      <view v-if="type == 3">
        <view v-if="msgList.length >= 0">
          <view
            class="after-sales"
            v-for="(item, index) in msgList"
            :key="index"
            @click="goToGbOrderDetails(item)"
          >
            <view v-if="item.messageBody.products.length">
              <view class="box">
                <view class="time">
                  {{ item.createTime }}
                </view>
              </view>
              <view class="after-sales-msg">
                <view class="title" v-if="item.messageBody.rightsMsgStatus == 0">
                  商家已同意
                </view>
                <view class="title" v-if="item.messageBody.rightsMsgStatus == 1">
                  商家拒绝维权
                </view>
                <view class="title" v-if="item.messageBody.rightsMsgStatus == 2">
                  商家已收货
                </view>
                <view class="title" v-if="item.messageBody.rightsMsgStatus == 3">
                  商家已退款
                </view>
                <view class="title" v-if="item.messageBody.rightsMsgStatus == 4">
                  商家发起自动退款
                </view>

                <view class="multigraph">
                  <view v-for="(x, y) in item.messageBody.products" :key="y">
                    <image :src="x.productImg" v-if="y < 3" mode=""></image>
                  </view>
                </view>

                <view class="refund-amount">
                  退款金额￥{{ item.messageBody.money
                  }}<text v-if="item.messageBody.refundPoint > 0"
                    >, 退款积分{{ item.messageBody.refundPoint }}</text
                  >
                </view>
              </view>
            </view>
          </view>
          <loadMore v-if="msgList.length > 0" :status="status"></loadMore>
        </view>
        <noData v-else :config="{ top: 20, content: '暂无消息~' }"></noData>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { messageList_Api, messageReadType_Api } from "@/api/userInfo.js";

// 定义响应式数据
const status = ref("more");
const params = reactive({
  //分页
  pageNum: 1,
  pageSize: 10,
});
const type = ref(null);
const msgList = ref([]);
const imgUrl = ref(null);

// 初始化数据
onLoad((options) => {
  uni.setNavigationBarTitle({ title: options.name });
  getType(options.type);
  type.value = options.type;
  delMsg(options.type);
  // 设置页面标题
});

// 上拉加载
onReachBottom(() => {
  if (status.value === "noMore") {
    status.value = "noMore";
  } else {
    status.value = "more";
    params.pageNum++;
    getType(type.value);
  }
});

// 下拉刷新
onPullDownRefresh(() => {
  rest();
  getType(type.value);
});

// 跳转到订单详情
const goToGbOrderDetails = (item) => {
  console.log(item);
  //1:支付消息,2:物流消息
  if (type.value == 1 || type.value == 2) {
    let id = item.messageBody.orderId;
    uni.navigateTo({
      url: `/pages/order/orderDetails?orderId=${id}`,
    });
  }
  //售后消息
  if (type.value == 3) {
    let id = item.messageBody.rightsOrderId;
    uni.navigateTo({
      url: "/pages/order/orderblackDetails?id=" + id,
    });
  }
};

// 获取数据
const getType = (type) => {
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  messageList_Api({
    ...params,
    type: type,
  })
    .then((res) => {
      uni.hideLoading();
      if (res && res.code == 200) {
        uni.stopPullDownRefresh();
        res.rows = res.rows.map((item) => {
          if (item.messageBody == null) item.messageBody = {};
          return item;
        });
        msgList.value = msgList.value.concat(res.rows);
        console.log(msgList.value);
        if (res.total <= msgList.value.length) {
          status.value = "noMore";
        } else {
          status.value = "more";
        }
      }
    })
    .catch((err) => {
      uni.hideLoading();
    });
};

// 重置数据
const rest = () => {
  params.pageNum = 1;
  msgList.value = [];
};

// 删除页面的未读消息
const delMsg = (type) => {
  if (type != null) {
    messageReadType_Api({
      type: type,
    }).then((res) => {});
  }
};
</script>

<style>
page {
  background-color: #f5f5f5;
}
</style>

<style scoped lang="scss">
// .height76{
// 	height: 76rpx;
// }
.after-sales {
  .after-sales-msg {
    background-color: #ffffff;
    border-radius: 18rpx;

    .article {
      display: flex;

      .article-left {
        padding-left: 30rpx;
        padding-bottom: 62rpx;

        image {
          width: 165rpx;
          height: 156rpx;
          border-radius: 18rpx;
          overflow: hidden;
        }
      }

      .article-right {
        margin-left: 30rpx;
        padding-right: 30rpx;
        display: flex;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 70rpx;

        .msg-title {
          color: #1a1a1a;
          font-weight: 400;
          font-size: 24rpx;
        }

        .specifications {
          font-size: 22rpx;
          color: #999999;
          font-weight: 400;
          line-height: 24rpx;
          margin-top: 4rpx;
        }

        .refund {
          color: #1a1a1a;
          font-size: 26rpx;
          font-weight: 400;
          margin-top: 16rpx;
        }
      }
    }

    .multigraph {
      display: flex;

      image {
        margin-left: 20rpx;
        width: 200rpx;
        height: 200rpx;
        border-radius: 18rpx;
      }
    }

    .refund-amount {
      text-align: right;
      margin-top: 60rpx;
      padding-bottom: 34rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #1a1a1a;
      margin-right: 30rpx;
    }

    .title {
      padding: 44rpx 30rpx 22rpx 30rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #1a1a1a;
    }
  }

  .box {
    display: flex;
    justify-content: center;

    .time {
      font-size: 22rpx;
      font-weight: 400;
      color: #666666;
      line-height: 30rpx;
      padding: 10rpx 20rpx;
      margin: 40rpx 0;
      border-radius: 24rpx;
      background-color: #e3e3e3;
    }
  }
}

.middle {
  padding: 0 30rpx;

  .item {
    .box {
      display: flex;
      justify-content: center;

      .time {
        font-size: 22rpx;
        color: #666666;
        font-weight: 400;
        background-color: #e3e3e3;
        padding: 10rpx 20rpx;
        border-radius: 24rpx;
        margin: 40rpx 0;
      }
    }

    .content {
      overflow: hidden;
      padding: 44rpx 30rpx;
      // padding: 44rpx 0;
      background-color: #ffffff;
      border-radius: 18rpx;

      .bottom-time {
        font-size: 24rpx;
        color: #999999;
        font-weight: 400;
      }

      .logistics-top {
        font-size: 28rpx;
        color: #1a1a1a;
        font-weight: 400;
      }

      .logistics-box {
        margin-top: 22rpx;
        display: flex;

        .logistics-left {
          image {
            border-radius: 8rpx;
            width: 156rpx;
            height: 156rpx;
          }
        }

        .logistics-right {
          margin-left: 32rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .logistics-right-content {
            color: #1a1a1a;
            font-size: 26rpx;
            font-weight: 400;
            margin-bottom: 8rpx;

            text {
              color: #999999;
              margin-left: 16rpx;
            }
          }

          .logistics-right-bottom {
            font-size: 22rpx;
            color: #999999;
            font-weight: 400;
          }
        }
      }

      .bottom-box {
        text-align: right;
        display: flex;
        align-items: flex-end;
        float: right;

        .money {
          color: #ff0000;
          font-size: 32rpx;
          font-weight: Bold;
        }
      }

      .title {
        font-size: 28rpx;
        color: #1a1a1a;
        font-weight: 400;
        margin-bottom: 26rpx;
      }

      .label {
        font-weight: 700;
      }

      .small-box {
        margin-bottom: 60rpx;
        display: flex;

        .small-left {
          overflow: hidden;

          image {
            border-radius: 10rpx;
            width: 200rpx;
            height: 200rpx;
          }
        }

        .small-right {
          display: flex;
          flex-direction: column;
          height: 100%;
          justify-content: space-between;
          margin-left: 30rpx;

          .small-top {
            // flex: 1;
            font-size: 28rpx;
            line-height: 40rpx;
            color: #1a1a1a;
            font-weight: 400;
          }

          .specifications {
            font-size: 22rpx;
            color: #999999;
            font-weight: 400;
            margin-bottom: 14rpx;
          }

          .price {
            display: flex;
            color: #1a1a1a;
            font-size: 26rpx;
            font-weight: 400;
          }
        }
      }

      .single-data {
        overflow: hidden;

        .img-box {
          height: 230rpx;
          padding: 0 30rpx;
        }

        .single-img {
          display: flex;
          flex-wrap: nowrap;
          overflow: hidden;
          margin-left: 15rpx;

          .goods-img {
            width: 200rpx;
            height: 200rpx;
            // padding: 0 5rpx;
            border-radius: 10rpx;
            // margin-left: 10rpx;
          }
        }

        .single-img:first-child {
          margin-left: 0;
        }

        .single-bottom {
          float: right;
          text-align: right;
          margin-right: 40rpx;
          margin-top: 60rpx;
          display: flex;
          align-items: baseline;

          .money {
            color: #ff0000;
            font-size: 32rpx;
            font-weight: bold;
          }
        }
      }

      .image {
        image {
          width: 630rpx;
          height: 250rpx;
          border-radius: 15rpx;
        }
      }
    }
  }
}
.event-details {
  background-color: #f5f5f5;
}
</style>