174 lines
3.7 KiB
Vue
174 lines
3.7 KiB
Vue
<template>
|
||
<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>
|
||
<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: {},
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
// 获取源页面的eventChannel对象
|
||
const eventChannel = this.getOpenerEventChannel();
|
||
// 监听itemDetail事件
|
||
eventChannel.on("itemDetail", (data) => {
|
||
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}`,
|
||
});
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</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>
|