tk-mini-program/pages/PKMessageprocessing/PKMessageprocessing.vue

<template>
  <view class="container">
    <view class="background">
      <image
        style="width: 100%; height: 100%"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
        mode="scaleToFill"
      />
    </view>
    <view class="Navigation">
      <view class="Return" @click="goBack">
        <image
          class="Return"
          src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
          mode="scaleToFill"
        />
      </view>
    </view>
    <view class="Content">
      <!-- 发布者 -->
      <view class="sender">
        <view class="sengderIcon">
          <image class="Icon" :src="SenderData.anchorIcon" mode="scaleToFill" />
        </view>

        <view class="Individual">
          <view class="name">{{ SenderData.disPlayId }}</view>

          <view class="GenderAndAge">
            <view class="male" v-if="SenderData.sex === '1'">
              <view>
                <image
                  style="width: 20rpx; height: 20rpx"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/male.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="age"> {{ SenderData.sex == 1 ? "男" : "女" }} </view>
            </view>

            <view class="female" v-else>
              <view>
                <image
                  style="width: 20rpx; height: 20rpx"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/female.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="age">{{ SenderData.sex == 1 ? "男" : "女" }}</view>
            </view>
          </view>
          <view class="nation">{{ SenderData.country }}</view>
        </view>
        <view class="Time">PK时间:{{ formatDate(SenderData.pkTime) }}</view>
        <view class="SessionAndGoldCoin">
          <view class="goldCoin">
            <image
              style="width: 72rpx; height: 72rpx; margin-left: 36rpx; margin-right: 32rpx"
              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
              mode="scaleToFill"
            />
            <view class="goldcard">
              <view class="goldnumber">{{ SenderData.coin }}</view>
              <view class="goldtext">金币</view>
            </view>
          </view>
          <view class="Session">
            <image
              style="width: 72rpx; height: 72rpx; margin-left: 36rpx; margin-right: 32rpx"
              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
              mode="scaleToFill"
            />
            <view class="goldcard">
              <view class="goldnumber">{{ SenderData.pkNumber }}</view>
              <view class="goldtext">PK场数</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 被邀请者 -->
      <view class="sender">
        <view class="sengderIcon">
          <image class="Icon" :src="ReceiverData.anchorIcon" mode="scaleToFill" />
        </view>

        <view class="Individual">
          <view class="name">{{ ReceiverData.disPlayId }}</view>

          <view class="GenderAndAge">
            <view class="male" v-if="ReceiverData.sex === '1'">
              <view>
                <image
                  style="width: 20rpx; height: 20rpx"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/male.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="age"> {{ ReceiverData.sex == 1 ? "男" : "女" }} </view>
            </view>

            <view class="female" v-else>
              <view>
                <image
                  style="width: 20rpx; height: 20rpx"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/female.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="age">{{ ReceiverData.sex == 1 ? "男" : "女" }}</view>
            </view>
          </view>
          <view class="nation">{{ ReceiverData.country }}</view>
        </view>
        <view class="Time">PK时间:{{ formatDate(ReceiverData.pkTime) }}</view>
        <view class="SessionAndGoldCoin">
          <view class="goldCoin">
            <image
              style="width: 72rpx; height: 72rpx; margin-left: 36rpx; margin-right: 32rpx"
              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
              mode="scaleToFill"
            />
            <view>
              <view class="goldnumber">{{ ReceiverData.coin }}</view>
              <view class="goldtext">金币</view>
            </view>
          </view>
          <view class="Session">
            <image
              style="width: 72rpx; height: 72rpx; margin-left: 36rpx; margin-right: 32rpx"
              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
              mode="scaleToFill"
            />
            <view>
              <view class="goldnumber">{{ ReceiverData.pkNumber }}</view>
              <view class="goldtext">PK场数</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 邀请信息 -->
      <view class="flex">
      <view
        class="button"
        v-if="PkIDInfodata.pkStatus === 0 && ReceiverData.senderId !== id"
      >
        <button class="accept" @click="AcceptHint()">接受邀请</button>
        <button class="reject" @click="RefuseHint()">拒绝邀请</button>
      </view>
    </view>
    <view class="flex">
      <view
        v-if="ReceiverData.senderId === id && PkIDInfodata.pkStatus === 0"
        class="button buttontext"
        >等待对方接受邀请</view
      >
    </view>
    <view class="flex">
      <view v-if="PkIDInfodata.pkStatus === 1" class="button buttontext">已接受邀请</view>
    </view>
      <view class="flex">
      <view v-if="PkIDInfodata.pkStatus === 2" class="button buttontext">已拒绝邀请</view>
    </view>
    </view>
  </view>

  <uni-popup ref="popups" type="center" border-radius="10px 10px 0 0">
    <view class="popup-Hintcontent">
      <view class="popup-text">提示</view>
      <view class="popup-texts">邀请成功后的pk不可修改，不可删除，请谨慎操作！</view>
      <view class="popup-btn">
        <button class="invite" type="primary" @click="operation(1)">确认</button>
        <button class="cancel" type="default" @click="closeHint()">取消</button>
      </view>
    </view>
  </uni-popup>
  <uni-popup ref="Refusepopup" type="center" border-radius="10px 10px 0 0">
    <view class="popup-Hintcontent">
      <view class="popup-text">提示</view>
      <view class="popup-texts">您确定要拒绝该邀请吗？</view>
      <view class="popup-btn">
        <button class="invite" type="primary" @click="operation(2)">确认</button>
        <button class="cancel" type="default" @click="RefuseHintcloseHint()">取消</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import request from "../../components/request.js";
import formatDate from "../../components/formatDate.js";
export default {
  data() {
    return {
      customData: {},
      SenderData: {},
      ReceiverData: {},
      PkIDInfodata: {},
      id: "",
    };
  },
  onLoad(options) {
    uni.getStorage({
      key: "userinfo",
      success: (res) => {
        this.id = res.data.id;
      },
    });
    this.customData = JSON.parse(options.customData);
    setTimeout(() => {
      this.getPkIDInfo();
      this.getPkyourInfo();
      this.getPkmineInfo();
    }, 1000);
  },
  onShareAppMessage(res) {
    if (res.from === "menu") {
      return {
        title: "分享",
        path: `${
          getCurrentPages()[getCurrentPages().length - 1].route
        }?customData=${JSON.stringify(this.customData)}`,
      };
    }
  },
  methods: {
    //根据当前消息ID查询pk信息
    async getPkIDInfo() {
      const res = await request({
        url: "pk/singleRecord",
        method: "POST",
        data: {
          id: this.customData.id,
        },
        userInfo: true,
      }).then((res) => {
        console.log(res.data);
        this.PkIDInfodata = res.data;
      });
    },
    //发布者
    async getPkyourInfo() {
      const res = await request({
        url: "pk/pkInfoDetail",
        method: "POST",
        data: {
          id: this.customData.pkIdA,
          userId: this.id,
          from: 2,
        },
        userInfo: false,
      }).then((res) => {
        console.log(res);
        if (res.code === 200) {
          console.log(res.data);
          this.SenderData = res.data;
        }else{
          wx.showToast({
            title: "获取发布者信息失败",
            icon: "none",
            duration: 2000,
          });
        }
      });
    },
    //被邀请者
    async getPkmineInfo() {
      const res = await request({
        url: "pk/pkInfoDetail",
        method: "POST",
        data: {
          id: this.customData.pkIdB,
          userId: this.id,
          from: 2,
        },
        userInfo: false,
      }).then((res) => {
        if (res.code === 200) {
        console.log(res.data);
        this.ReceiverData = res.data;
        }else{
          wx.showToast({
            title: "获取被邀请者信息失败",
            icon: "none",
            duration: 2000,
          });
        }
      });
    },
    //返回上一页
    goBack() {
      wx.navigateBack({
        delta: 1,
      });
    },
    formatDate: formatDate,
    //接受邀请提示
    AcceptHint() {
      this.$refs.popups.open("center");
    },
    closeHint() {
      this.$refs.popups.close();
    },
    //拒绝邀请提示
    RefuseHint() {
      this.$refs.Refusepopup.open("center");
    },
    RefuseHintcloseHint() {
      this.$refs.Refusepopup.close();
    },
    //操作
    async operation(status) {
      const res = await request({
        url: "pk/updatePkStatus",
        method: "POST",
        data: {
          id: this.customData.id,
          pkStatus: status,
        },
        userInfo: true,
      }).then((res) => {
        const Hinttext = status === 1 ? "接受邀请成功" : "拒绝邀请成功";
        if (res.code === 200) {
          this.getPkIDInfo();
          this.$refs.popups.close();
          this.$refs.Refusepopup.close();
          wx.showToast({
            title: Hinttext,
            icon: "success",
            duration: 2000,
          });
          wx.navigateBack({
            delta: 1,
          });
        } else {
          wx.showToast({
            title: "操作失败",
            icon: "none",
            duration: 2000,
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.Navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 200rpx;
  display: flex;
  align-items: center;
  padding: 0 60rpx;
  z-index: 1;
}
.Return {
  width: 60rpx;
  height: 60rpx;
  margin-top: 20rpx;
}
.Content {
  position: absolute;
  top: 200rpx;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sender {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10rpx;
}
.sengderIcon {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.Individual {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 34.35rpx;
}
.name {
  font-size: 30.53rpx;
  color: #161616;
  margin-right: 16.22rpx;
}
.nation {
  width: 56.3rpx;
  height: 29.58rpx;
  font-size: 17.18rpx;
  color: #666666;
  text-align: center;
  line-height: 29.58rpx;
  background-color: #fff;
  border-radius: 50rpx;
  padding: 6rpx 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.male {
  width: 56.3rpx;
  height: 29.58rpx;
  background-color: #5bced1;
  border-radius: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6rpx 12rpx;
  margin-right: 12rpx;
}
.female {
  width: 56.3rpx;
  height: 29.58rpx;
  background-color: #f3876f;
  border-radius: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6rpx 12rpx;
  margin-right: 12rpx;
}
.age {
  font-size: 17.18rpx;
  color: #fff;
  margin-left: 4rpx;
}
.Time {
  color: #666666;
  font-size: 26.72rpx;
  margin-top: 48.7rpx;
}
.goldCoin {
  background-image: url("https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Backgroundofgoldcoins.png");
  width: 334.83rpx;
  height: 124.05rpx;
  margin-right: 21rpx;
  display: flex;
  align-items: center;
}
.Session {
  background-image: url("https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Fieldnumberbackground.png");
  width: 334.83rpx;
  height: 124.05rpx;
  display: flex;
  align-items: center;
}
.SessionAndGoldCoin {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60rpx;
  display: flex;
  justify-content: center;
}
.goldtext {
  font-size: 28.63rpx;
  color: #929292;
}
.goldnumber {
  font-size: 34.35rpx;
  color: #161616;
  font-weight: bold;
}
.goldcard {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flex{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 15px;  
}
.button {
  display: flex;
  justify-content: center;
  align-items: center;
}
.buttontext {
  font-size: 40rpx;
  color: #666666;
  font-weight: bold;
}
.accept {
  width: 325.38rpx;
  height: 77.29rpx;
  margin-right: 35.5rpx;
  border-radius: 50rpx;
  background-color: #fff;
  border: 1rpx solid #03aba8;
  color: #03aba8;
  font-size: 28.63rpx;
  line-height: 77.29rpx;
}
.reject {
  width: 325.38rpx;
  height: 77.29rpx;
  border-radius: 50rpx;
  background-color: #03aba8;
  border: 1rpx solid #03aba8;
  color: #fff;
  font-size: 28.63rpx;
  line-height: 77.29rpx;
}
.popup-Hintcontent {
  width: 600rpx;
  height: 500rpx;
  background-repeat: no-repeat;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chard1.png);
  background-position: center;
}
.popup-text {
  color: #161616;
  font-size: 36.26rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}
.popup-texts {
  margin-left: 50rpx;
  color: #7e7e7e;
  font-size: 26rpx;
  margin-right: 50rpx;
  margin-top: 70rpx;
  margin-bottom: 70rpx;
}
.popup-btn {
  display: flex;
  justify-content: space-around;
  margin-top: 50rpx;
}
.invite {
  width: 225.19rpx;
  height: 78.24rpx;
  font-size: 28.63rpx;
  line-height: 80rpx;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
}
.cancel {
  width: 225.19rpx;
  height: 78.24rpx;
  font-size: 28.63rpx;
  line-height: 80rpx;
  margin-left: 30rpx;
  color: #03aba8;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  border: 1rpx solid #03aba8;
}
</style>