优化返回页面

pages/pkDetail/pkDetail.vue

@@ -1,21 +1,56 @@
 <template>
-    <view class="container">
+  <view class="Navigation">
+    <image
+      src="../../static/Navigationimg.png"
+      mode="scaleToFill"
+      class="Navigationimg"
+    />
+    <image
+      @click="Returnfunc"
+      src="../../static/Return.png"
+      mode="scaleToFill"
+      class="Return"
+    />
+  </view>
+  <view class="container">
+    <view class="individual">
+      <view class="anchor">
         <!-- <image
             src="{{item.anchorIcon}}"
             mode="scaleToFill"
         /> -->
-        <view >主播名称{{item.anchorId}}</view>
-        <view>主播性别{{item.sex === 1?"男":"女"}}</view>
-        <view> 国家{{item.country}}</view>
-        <view>金币{{item.coin}}</view>
-        <view>主播备注{{item.remark}}</view>
-        <view>PK时间{{item.pkTime}}</view>
+      </view>
+      <view>
+        <view>主播名称{{ item.anchorId }}</view>
+        <view>主播性别{{ item.sex === 1 ? "男" : "女" }}</view>
+        <view> 国家{{ item.country }}</view>
+      </view>
     </view>
 
+    <view>金币{{ item.coin }}</view>
+    <view>PK时间{{ formatDate(item.pkTime) }}</view>
+
+    <view>主播备注{{ item.remark }}</view>
+    <button @click="openChat()">聊了个天</button>
+    <button @click="open()">立即邀请PK</button>
+  </view>
+  <!-- 弹窗 -->
+  <uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
+    <view class="popup-content">
+      <view class="popup-title">您确定要邀请主播PK吗？</view>
+      <view class="popup-btn">
+        <button class="invite" type="primary" @click="invite()">邀请</button>
+        <button class="cancel" type="default" @click="close()">取消</button>
+      </view>
+    </view>
+  </uni-popup>
 </template>
 
 <script>
+import formatDate from "../../components/formatDate.js";
+import VerifyLogin from "../../components/VerifyLogin.js";
 export default {
+  inject: ['$global'],
   data() {
     return {
       item: {},
@@ -29,11 +64,110 @@ export default {
       this.item = data.item; // 将接收到的数据赋值给item
       console.log("接收到的数据:", this.item);
     });
+    
+  },
+  methods: {
+    formatDate: formatDate,
+    Returnfunc() {
+      uni.navigateBack({
+        delta: 1,
+      });
+    },
+    open() {
+      this.$refs.popup.open("center");
+    },
+    invite() {
+      // 发送邀请消息
+    },
+    close() {
+      this.$refs.popup.close();
+    },
+    openChat() {
+      //判断用户是否登录
+      VerifyLogin().then(() => {
+        // 打开聊天页面
+        const conversationID = `C2C${this.item.senderId}`;
+        uni.redirectTo({
+          url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}`,
+        });
+      });
+    },
   },
-  methods: {},
 };
 </script>
 
 <style scoped>
 /* 样式定义 */
+.Navigation {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 200rpx;
+}
+.Navigationimg {
+  width: 100%;
+  height: 100%;
+}
+.Return {
+  position: absolute;
+  left: 60rpx;
+  bottom: 40rpx;
+  width: 60rpx;
+  height: 60rpx;
+}
+.container {
+  position: absolute;
+  top: 200rpx;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.individual {
+  display: flex;
+  /* justify-content: center; */
+  margin-top: 50rpx;
+}
+.anchor {
+  width: 200rpx;
+  height: 200rpx;
+  background-color: rgba(0, 0, 255, 0.369);
+  border-radius: 50%;
+}
+.popup-content {
+  width: 500rpx;
+  height: 300rpx;
+  background-color: #fff;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.popup-title {
+  font-size: 30rpx;
+  margin-top: 50rpx;
+  text-align: center;
+}
+.popup-btn {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 50rpx;
+}
+.invite {
+  width: 200rpx;
+  height: 80rpx;
+  font-size: 30rpx;
+  line-height: 80rpx;
+  border-radius: 20rpx;
+  background-color: #1aff0087;
+}
+.cancel {
+  width: 200rpx;
+  height: 80rpx;
+  font-size: 30rpx;
+  line-height: 80rpx;
+  margin-left: 30rpx;
+  border-radius: 20rpx;
+}
 </style>