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
      show-scrollbar="false"
        scroll-y="true"
        class="scroll"
        refresher-enabled="true"
        refresher-threshold="40"
        @refresherrefresh="onRefresherRefresh"
        lower-threshold="100"
        @scrolltolower="onScrollToLower"
        :refresher-triggered="triggered"
        v-if="pkList.length !== 0"
      >
        <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="onTop(item)" v-if="item.isPin === false">
              <image
                style="width: 40rpx; height: 40rpx"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/pin.png"
                mode="scaleToFill"
              />
            </view>
            <view class="recompose" @click="onOutTop(item)" v-if="item.isPin === true">
              <image
                style="width: 40rpx; height: 40rpx"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/cancelPin.png"
                mode="scaleToFill"
              />
            </view>
            <view class="expurgate" @click="onRecompose(item)">
              <image
                style="width: 40rpx; height: 40rpx"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/recompose.png"
                mode="scaleToFill"
              />
            </view>
            <view class="expurgate" @click="onExpurgate(item)">
              <image
                style="width: 40rpx; height: 40rpx"
                src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/expurgate.png"
                mode="scaleToFill"
              />
            </view>
          </view>
        </uni-card>
      </scroll-view>
      <view v-if="pkList.length === 0" class="no-data">暂无内容</view>
    </view>
  </view>
  <Recompose ref="createModule" class="createModule" :message="parentMessage" @Refresh="onRefresherRefresh"></Recompose>
  <!-- 置顶弹窗 -->
  <uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
    <view class="popup-container">
      <view class="popup-title">选择置顶时长</view>
      <view class="popup-text"> 置顶后，该用户将在首页置顶，并在指定时长内享有置顶特权。置顶时长不足 1 小时，系统将按 1 小时计算积分扣除。请选择置顶时长：</view>
      <view class="popup-picker">
        <picker mode = "selector" :range="pickerArray" :value="index" @change="bindPickerChange">
						<view class="uni-input">{{pickerArray[index]}}小时</view>
        </picker>
      </view>
      <view class="popup-btn">
        <view class="uni-primary" @click="onTopConfirm">确定</view>
        <view class="uni-default" @click="closePopup">取消</view>
      </view>
    </view>
  </uni-popup>
  <!-- 取消置顶弹窗 -->
  <uni-popup ref="popupOut" type="center" border-radius="10px 10px 0 0">
    <view class="popup-container-out">
      <view class="popup-title">您确定要取消置顶吗？</view>
      <view class="popup-text"> 取消置顶后，该用户将不再享有置顶特权，但仍可继续参与 PK 挑战。若置顶时长不足 1 小时，系统将按 1 小时计算积分扣除，并于取消后按实际使用时长比例返还剩余积分。是否确认执行此操作？</view>
      <view class="popup-btn">
        <view class="uni-primary" @click="onOutTopConfirm">确定</view>
        <view class="uni-default" @click="closePopupOut">取消</view>
      </view>
    </view>
  </uni-popup>
  <!-- 删除弹窗 -->
  <uni-popup ref="popupExpurgate" type="center" border-radius="10px 10px 0 0">
    <view class="popup-container-expurgate">
      <view class="popup-title">您确定要删除该PK吗？</view>
      <view class="popup-text"> 删除后，该用户将无法再参与该 PK 挑战。是否确认执行此操作？</view>
      <view class="popup-btn">
        <view class="uni-primary" @click="onExpurgateConfirm">确定</view>
        <view class="uni-default" @click="closePopupExpurgate">取消</view>
      </view>
    </view>
  </uni-popup>
</template>

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

export default {
  data() {
    return {
      pkList: [],
      userinfo: {},
      page: 0,
      createModule: null,
      parentMessage: null,
      triggered: false,
      pickerArray: [],
      index:0,
      topPinnedPersondata:{},
      Topdate:0,
      popupOutdata:{},
      popupExpurgatedata:{},
    };
  },
  onLoad() {
    uni.getStorage({
      key: "userinfo",
      success: (res) => {
        this.userinfo = res.data;
        this.getpkList();
      },
    });
  },
  mounted() {
    this.createModule = this.$refs.createModule; // 挂载后赋值
  },
  onShareAppMessage(res) {
    if (res.from === 'menu') {
      return {
        title: '分享',
        path: "/pages/Home/Home"
      }
    }
  },
  methods: {
    // 刷新
    onRefresherRefresh() {
      this.page = 0;
      this.pkList = [];
      this.getpkList();
      this.triggered = true;
    },
    // 下拉加载
    onScrollToLower() {
      this.page++;
      this.getpkList();
    },
    // 返回
    onBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    //时间格式化
    formatDate: formatDate,
    // 获取pk列表
    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);
          this.triggered = false;
        } else {
          console.log(res.msg);
        }
      });
    },
    // 打开修改窗口
    onRecompose(item) {
      this.parentMessage = item;
      this.createModule.open();
    },
    // 置顶
    onTop(item) {
      this.pickerArray = DifferenceArray(item.pkTime)
      this.$refs.popup.open("center");
      this.topPinnedPersondata = item
    },
    bindPickerChange(e){
      this.index = e.detail.value
    },
    closePopup() {
      this.$refs.popup.close();
      this.index = 0
      this.pickerArray = []
      this.topPinnedPersondata = {}
    },
    onTopConfirm() {
      this.Topdate = Math.ceil(Date.now() / 1000 + Number(this.pickerArray[this.index]) * 3600)
      request({
        url: "user/pinToTop",
        method: "POST",
        data: {
          articleId: this.topPinnedPersondata.id,
          pinExpireTime: this.Topdate,
        },
        userInfo: true,
      }).then((res) => {
        if (res.code == 200) {
          this.onRefresherRefresh();
          uni.showToast({
            title:res.data,
            icon: "none",
            duration: 3000,
          });
          this.closePopup()
        } else {
          uni.showToast({
            title:res.msg,
            icon: "none",
            duration: 3000,
          });
        }
      });
    },
    //取消置顶
    onOutTop(item) {
      this.$refs.popupOut.open("center");
      this.popupOutdata = item
    },
    // 确认取消置顶
    onOutTopConfirm() {
      request({
        url: "user/cancelPin",
        method: "POST",
        data: {
          articleId: this.popupOutdata.id,
        },
        userInfo: true,
      }).then((res) => {
        if (res.code == 200) {
          this.closePopupOut();
          this.onRefresherRefresh()
          uni.showToast({
            title: res.data,
            icon: "none",
            duration: 3000,
          });
        } else {
          console.log(res.msg);
        }
      });
    },
    // 取消取消置顶
    closePopupOut() {
      this.$refs.popupOut.close();
      this.popupOutdata = {}
    },
    // 删除pk
    onExpurgate(item) {
      this.$refs.popupExpurgate.open("center");
      this.popupExpurgatedata = item
    },
    // 确认删除pk
    onExpurgateConfirm() {
      const res = request({
        url: "pk/deletePkDataWithId",
        method: "POST",
        data: {
          id: this.popupExpurgatedata.id,
        },
        userInfo: true,
      }).then((res) => {
        if (res.code == 200) {
          this.onRefresherRefresh();
          this.closePopupExpurgate();
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000,
          });
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000,
          });
        }
      });
    },
    // 关闭删除弹窗
    closePopupExpurgate() {
      this.$refs.popupExpurgate.close();
      this.popupExpurgatedata = {}
    },
    //
  },
  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: 335rpx;
  font-size: 34rpx;
  color: #100e0f;
  font-weight: bold;
}
.ReturnImg {
  width: 100%;
  height: 100%;
}
.scroll {
  position: absolute;
  top: 200rpx;
  left: 0;
  right: 0;
  height: 1300rpx;
  width: 100%;
}
.scroll ::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}
.no-data{
  position: absolute;
  top: 200rpx;
  left: 0;
  right: 0;
  height: 1300rpx;
  width: 100%;
  line-height: 1300rpx;
  text-align: center;
  font-size: 30rpx;
  color: #959595;
}
.card {
  width: 695rpx;
  height: 180rpx;
  background: #ffffff;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  margin-top: 20rpx;
}
.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: 80rpx;
}
.expurgate {
  width: 46rpx;
  height: 46rpx;
  margin-left: 10rpx;
}
.createModule {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 998;
  width: 100vw;
}
.popup-container{
  width: 500rpx;
  height: 500rpx;
  background-color: #ffffff;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx;
}
.popup-container-out{
  width: 500rpx;
  height: 400rpx;
  background-color: #ffffff;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx;
}
.popup-container-expurgate{
  width: 500rpx;
  height: 300rpx;
  background-color: #ffffff;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx;
}
.popup-title{
  font-size: 30rpx;
  color: #161616;
  font-weight: bold;
  margin-top: 30rpx;
}
.popup-text{
  font-size: 25rpx;
  color: #959595;
  margin-top: 30rpx;
  width: 400rpx;
}
.popup-picker{
  margin-top: 60rpx;
  width: 450rpx;
  height: 60rpx;
  border: #5bced1 solid 1rpx;
  border-radius: 15rpx;
}
.uni-input{
  font-size: 30rpx;
  color: #ffffff;
  width: 450rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  background-color: #5bced1;
  border-radius: 15rpx;
}
.popup-btn{
  margin-top: 60rpx;
  display: flex;
  justify-content: center;
}
.uni-primary{
  width: 200rpx;
  height: 60rpx;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
  font-size: 25rpx;
  color: #ffffff;
  text-align: center;
  line-height: 60rpx;
  margin-right: 30rpx;
}
.uni-default{
  width: 200rpx;
  height: 60rpx;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  background-image: linear-gradient(135deg, #cecece, #ffffff);
  font-size: 25rpx;
  color: #161616;
  text-align: center;
  line-height: 60rpx;
}
</style>