tk-mini-program/pages/Mine/minecomponents/pkRecord.vue

<template>
  <view class="pkRecord">
    <view class="bg">
      <image class="bgImg" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png" mode="scaleToFill" />
    </view>
    <view class="Return" @click="onBack">
      <image class="ReturnImg" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png" mode="scaleToFill" />
    </view>
    <view class="title">PK记录</view>
    <!-- 导航栏 -->
    <view class="navigation">
      <view class="navigationItem">
        <view
          class="navigationItemTitle"
          @click="toggleActive(1)"
          :class="{ active: current === 1 }"
          >我发布的PK</view
        >
        <view
          class="navigationItemTitle"
          @click="toggleActive(2)"
          :class="{ active: current === 2 }"
          >我邀请的PK</view
        >
      </view>
      <view
        class="slide"
        :style="{ left: sliderPosition + 'rpx', transition: 'left 0.3s ease-in-out' }"
        >{{ slidetext }}</view
      >
    </view>
    <!-- 内容 -->
    <view class="content">
      <scroll-view
      show-scrollbar="false"
        scroll-y="true"
        class="scroll"
        refresher-enabled="true"
        refresher-threshold="40"
        @refresherrefresh="onRefresherRefresh"
        lower-threshold="100"
        @scrolltolower="onScrollToLower"
        :refresher-triggered="triggered"
      >
        <uni-card  v-for="(item, index) in pkRecordlist" :key="index" >
        <view class="card" @click="onItemClick(item)">
          <!-- 主播A -->
          <view class="AnchorA">
            <view class="AnchorAImg">
              <!-- 头像 -->
              <image class="AnchorAImgcss" :src="item.anchorIconA" mode="scaleToFill" />
            </view>
             <!-- 皇冠 -->
             <image class="Crown" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Crown.png" mode="scaleToFill" v-if="item.winnerAnchorId == item.anchorIdA"/>
            <view class="AnchorAinfo">
              <view class="AnchorAname"> {{ item.anchorIdA }} </view>
              <view class="AnchorATime">{{ formatDate(item.pkTime) }}</view>
              <view class="AnchorAICon">
                <view class="AnchorAIContext">实际金币:</view>
                <view class="AnchorAIConNum">{{ item.userACoins}}K</view>
              </view>
            </view>
          </view>
          <!-- 图标 -->
          <view class="vstext">
            <view class="Vtext">V</view>
            <view class="Stext">S</view>
          </view>
          <!-- 主播B -->
          <view class="AnchorB">
            <view class="AnchorBinfo">
              <view class="AnchorAname">{{ item.anchorIdB }} </view>
              <view class="AnchorATime"> {{ formatDate(item.pkTime) }} </view>
              <view class="AnchorAICon">
                <view class="AnchorAIContext">实际打金币:</view>
                <view class="AnchorAIConNum">{{ item.userBCoins }}K</view>
              </view>
            </view>
            <view class="AnchorAImg">
              <!-- 头像 -->
              <image class="AnchorBImgcss" :src="item.anchorIconB" mode="scaleToFill" />
            </view>
            <!-- 皇冠 -->
            <image class="Crown" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Crown.png" mode="scaleToFill" v-if="item.winnerAnchorId == item.anchorIdB"/>
          </view>
        </view>
        </uni-card>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import request from "../../../components/request.js";
import formatDate from "../../../components/formatDate.js";
export default {
  data() {
    return {
      triggered: false, // 下拉刷新状态
      current: 1, // 初始激活状态
      buttonWidth: 238.55, // 按钮宽度
      gap: 0, // 按钮间距
      slidetext: "我发布的PK", // 导航栏文字
      pkmyRecordlist: [], // PK记录列表
      pkInvitationRecordlist: [], // PK记录列表
      pkRecordlist: [], // PK记录列表
      userinfo: {}, // 用户信息
      page: 0, // 页码
    };
  },
  onLoad() {
    uni.getStorage({
        key: "userinfo",
        success: (res) => {
            this.userinfo = res.data;
          this.getPkRecordList(1);
          this.getPkRecordList(2);
        },
      });
  },
  computed: {
    sliderPosition() {
      const { current, buttonWidth, gap } = this;
      const containerPadding = 0; // 容器内边距
      const offset = (buttonWidth + gap) * (current - 1);
      return containerPadding + offset + 375;
    },
  },
  methods: {
    onRefresherRefresh() {
      this.pkRecordlist = [];
      this.triggered = true;
      this.page = 0;
      if (this.current === 1) {
        this.pkmyRecordlist = [];
      }else{
        this.pkInvitationRecordlist = [];
      }
      this.getPkRecordList(this.current);
    },
    onScrollToLower() {
      this.page++;
      this.getPkRecordList(this.current);
    },
    onItemClick(item) {
        uni.navigateTo({
            url: "/pages/Mine/minecomponents/DetailsPKRecords/DetailsPKRecords",
            success: (res) => {
              res.eventChannel.emit("itemDetail", {
                item: item,
              });
            },
          });
    },
    onBack() {
      uni.navigateBack(
        {
          delta: 1,
        }
      );
    },
    formatDate: formatDate,
    //获取我发布的PK记录列表
    getPkRecordList(type) {
      const res = request({
        url: "user/handlePkInfo",
        method: "POST",
        data: {
          type: type,
          userId: this.userinfo.id,
          page: this.page,
          size: 10,
        },
        userInfo: true,
      }).then((res) => {
        if (res.code === 200) {
          this.triggered = false;
            if (type === 1) {
              this.pkmyRecordlist.push(...res.data);
              if (this.current === 1) {
                this.pkRecordlist = this.pkmyRecordlist;
                console.log(this.pkmyRecordlist);
              }
            } else {
              this.pkInvitationRecordlist.push(...res.data);
              console.log(this.pkInvitationRecordlist);
              if (this.current === 2) {
                this.pkRecordlist = this.pkInvitationRecordlist;
                console.log(this.pkInvitationRecordlist);
              }
            }
        } else {
          console.log(res.msg);
        }
      });
    },
    //按钮点击
    toggleActive(val) {
      this.current = val;
      this.slidetext = val === 1 ? "我发布的PK" : "我邀请的PK";
      if (val === 1) {
        this.pkRecordlist = this.pkmyRecordlist;
      }else{
        this.pkRecordlist = this.pkInvitationRecordlist;
      }
    },
  },
};
</script>

<style scoped>
.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.bgImg {
  width: 100%;
  height: 100%;
}
.Return {
  position: absolute;
  top: 110rpx;
  left: 35rpx;
  width: 46rpx;
  height: 46rpx;
}
.title {
  position: absolute;
  top: 120rpx;
  left: 335rpx;
  font-size: 34rpx;
  color: #100e0f;
  font-weight: bold;
}
.ReturnImg {
  width: 100%;
  height: 100%;
}
/* 导航栏 */
.navigation {
  position: absolute;
  top: 200rpx;
  left: 0rpx;
  right: 0rpx;
  height: 68.7rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.navigationItem {
  width: 477.1rpx;
  height: 68.7rpx;
  border-radius: 50rpx;
  background-color: #4fcacd;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.navigationItemTitle {
  font-weight: 500;
  font-size: 31rpx;
  color: #ffffff;
}
.slide {
  position: absolute;
  width: 238.55rpx;
  height: 68.7rpx;
  background-image: linear-gradient(135deg, #e4ffff, #ffffff);
  border-radius: 50rpx;
  text-align: center;
  line-height: 68.7rpx;
  font-weight: 500;
  font-size: 31rpx;
  color: #4fcacd;
  margin-left: -238.55rpx;
}
.content {
  position: absolute;
  top: 300rpx;
  left: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
}
.scroll {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 卡片 */
.card {
  width: 694.66rpx;
  height: 200rpx;
  background-color: #ffffff;
  border-radius: 15rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 28.55rpx;
  margin-top: 20rpx;
  border: 1rpx solid #c9f6f6;
}
.AnchorA {
  display: flex;
  align-items: center;
}
.AnchorB {
  display: flex;
  align-items: center;
}
.AnchorAImg {
  width: 100rpx;
  height: 100rpx;
  border-radius: 100rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  background-color: #b1b1b1;
  display: flex;
}
.AnchorAinfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.AnchorBinfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.AnchorAname {
  width: 161.26rpx;
  font-weight: 500;
  font-size: 31rpx;
  color: #58d8db;
  text-align: center;
  font-weight: bold;
  white-space: nowrap;   /* 防止换行 */
  overflow: hidden;      /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.AnchorATime {
  font-weight: 400;
  font-size: 23rpx;
  color: #a3a3a3;
  margin-top: 8rpx;
  text-align: center;
}
.AnchorAICon {
  display: flex;
  flex-direction: column;
  margin-top: 8rpx;
  text-align: center;
}
.AnchorAIContext {
  font-weight: 400;
  font-size: 23rpx;
  color: #a3a3a3;
}
.AnchorAIConNum {
  font-weight: bold;
  font-size: 23rpx;
  color: #161616;
}
.AnchorAImgcss {
  width: 100rpx;
  height: 100rpx;
  border-radius: 100rpx;
  border-top: #f7da60 solid 2rpx;
  border-left: #ffeeab solid 2rpx;
  border-bottom: #ffeeab solid 2rpx;
  border-right: #f7da60 solid 2rpx;
}
.AnchorBImgcss {
  width: 100rpx;
  height: 100rpx;
  border-radius: 100rpx;
  border-top: #ffc6ba solid 2rpx;
  border-left: #ffc6ba solid 2rpx;
  border-bottom: #5ddadd solid 2rpx;
  border-right: #5ddadd solid 2rpx;
}
.Crown{
    width: 45.8rpx;
    height: 39.12rpx;
    margin-left: -40rpx;
    margin-top: -100rpx;
}
.vstext {
  display: flex;
}
.Vtext {
  font-size: 45.8rpx;
  color: #f0836c;
  font-weight: bold;
  font-style: italic;
  margin-left: 26rpx;
}
.Stext {
  font-size: 45.8rpx;
  color: #58d8db;
  font-weight: bold;
  font-style: italic;
  margin-right: 26rpx;
}

</style>