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

<template>
  <view class="pk-information">
    <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="content">
      <scroll-view
        scroll-y="true"
        class="scroll"
        refresher-enabled="true"
        refresher-threshold="40"
        @refresherrefresh="onRefresherRefresh"
        lower-threshold="100"
        @scrolltolower="onScrollToLower"
        :refresher-triggered="triggered"
      >
        <uni-card class="card" v-for="(item, index) in pkList" :key="index">
          <view class="Profile">
            <image :src="item.anchorIcon" style="width: 89.12rpx; height: 89.12rpx;border-radius: 72.25rpx;" mode="scaleToFill" />
          </view>
          <view class="Individual">
            <view class="Name">{{ item.anchorId }}</view>

            <view class="Label">
              <view>
                <view
                  :class="{
                    Gendermale: item.sex === '1',
                    Genderfemale: item.sex === '2',
                  }"
                >
                  <image
                    v-if="item.sex === '2'"
                    class="Genderimg"
                    src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/female.png"
                    mode="scaleToFill"
                  />
                  <image
                    v-else
                    class="Genderimg"
                    src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/male.png"
                    mode="scaleToFill"
                  />
                  <view class="age">{{ item.sex === "1" ? "男" : "女" }}</view>
                </view>
              </view>

              <view class="state">{{ item.country }}</view>

              <view class="species">
                <image
                  style="width: 28.63rpx; height: 28.63rpx"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/species.png"
                  mode="scaleToFill"
                />
                <view class="species-text">金币:</view>
                <view class="species-num">{{ item.coin }}K</view>
              </view>
            </view>
            <view class="time">PK时间:{{ formatDate(item.pkTime) }}</view>
          </view>
          <!-- <view class="handle"> -->
            <view class="handle" v-if="item.inviteStatus === 0">
            <view class="recompose" @click="onRecompose(item)">
              <image
                style="width: 46rpx; height: 46rpx"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/recompose.png"
                mode="scaleToFill"
              />
            </view>
            <view class="expurgate" @click="onExpurgate(item)">
              <image
                style="width: 46rpx; height: 46rpx"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/expurgate.png"
                mode="scaleToFill"
              />
            </view>
          </view>
        </uni-card>
      </scroll-view>
    </view>
  </view>
  <Recompose ref="createModule" class="createModule" :message="parentMessage"></Recompose>
</template>

<script>
import request from "../../../components/request.js";
import formatDate from "../../../components/formatDate.js";
import Recompose from "../minecomponents/recompose/recompose.vue";

export default {
  data() {
    return {
      pkList: [],
      userinfo: {},
      page: 0,
      createModule: null,
      parentMessage: null,
      triggered: false,
    };
  },
  onLoad() {
    uni.getStorage({
      key: "userinfo",
      success: (res) => {
        this.userinfo = res.data;
        console.log(this.userinfo);
        this.getpkList();
      },
    });
  },
  mounted() {
    this.createModule = this.$refs.createModule; // 挂载后赋值
  },
  methods: {
    onRefresherRefresh() {
      this.page = 0;
      this.pkList = [];
      this.getpkList();
      this.triggered = true;
    },
    onScrollToLower() {
      this.page++;
      this.getpkList();
    },
    onBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    formatDate: formatDate,
    getpkList() {
      const res = request({
        url: "user/queryMyAllPkData",
        method: "POST",
        data: {
          userId: this.userinfo.id,
          page: this.page,
          size: 10,
        },
        userInfo: true,
      }).then((res) => {
        if (res.code == 200) {
          this.pkList.push(...res.data);
          console.log(this.pkList);
          this.triggered = false;
        } else {
          console.log(res.msg);
        }
      });
    },
    onRecompose(item) {
      this.parentMessage = item;
      this.createModule.open();
    },
    onExpurgate(item) {
      const res = request({
        url: "pk/deletePkDataWithId",
        method: "POST",
        data: {
          id: item.id,
        },
        userInfo: true,
      }).then((res) => {
        if (res.code == 200) {
          this.onRefresherRefresh();
          uni.showToast({
            title: "删除成功",
            icon: "none",
            duration: 2000,
          });
        } else {
          console.log(res.msg);
        }
      });
    },
  },
  components: {
    Recompose,
  },
};
</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: 315rpx;
  font-size: 34rpx;
  color: #100e0f;
  font-weight: 500;
}
.ReturnImg {
  width: 100%;
  height: 100%;
}
.scroll {
  position: absolute;
  top: 200rpx;
  left: 0;
  right: 0;
  height: 1300rpx;
  width: 100%;
}
.card {
  width: 695rpx;
  height: 161rpx;
  background: #ffffff;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  margin-top: 11.5rpx;
}
.Profile {
  width: 89rpx;
  height: 89rpx;
  border-radius: 50rpx;
  background-color: #cccccc;
  margin-left: 27.5rpx;
}
.Gendermale {
  background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/maleimg.png) no-repeat center;
  width: 56.3rpx;
  height: 29.58rpx;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  margin-right: 10rpx;
}
.Genderfemale {
  background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/femaleimg.png) no-repeat center;
  width: 56.3rpx;
  height: 29.58rpx;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  margin-right: 10rpx;
}
.Individual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 37rpx;
}
.Name {
  width: 288.17rpx;
  font-size: 30.53rpx;
  color: #161616;
  font-weight: 500;
  white-space: nowrap;   /* 防止换行 */
  overflow: hidden;      /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.time {
  margin-top: 13rpx;
  font-size: 23rpx;
  color: #a3a3a3;
}
.state {
  width: 56.3rpx;
  height: 30rpx;
  background: #f6f6f6;
  border-radius: 14rpx;
  line-height: 30rpx;
  font-size: 17rpx;
  color: #666666;
  padding: 0 15rpx;
  white-space: nowrap;   /* 防止换行 */
  overflow: hidden;      /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  text-align: center;
}
.Label {
  margin-top: 15rpx;
  display: flex;
}
.age {
  font-size: 17rpx;
  color: #ffffff;
  margin-left: 10rpx;
}
.Genderimg {
  width: 14.22rpx;
  height: 14.22rpx;
  margin-left: 10rpx;
}
.species {
  display: flex;
  margin-left: 10rpx;
}
.species-text {
  font-size: 23rpx;
  color: #a3a3a3;
}
.species-num {
  font-size: 23rpx;
  color: #161616;
  font-weight: bold;
}
.handle {
  display: flex;
}
.recompose {
  width: 46rpx;
  height: 46rpx;
  margin-left: 90rpx;
}
.expurgate {
  width: 46rpx;
  height: 46rpx;
  margin-left: 40rpx;
}
.createModule {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 998;
  width: 100vw;
}
</style>