pxl/tk-mini-program
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化页面

Browse Source
This commit is contained in:
pengxiaolong
2025-06-20 14:11:55 +08:00
parent bcaa54bec8
commit fa745b73c2
8 changed files with 268 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
TUIKit/components/TUIChat/message-input-toolbar/evaluate/CustomMessage.vue
View File

@@ -27,59 +27,6 @@
<button class="send-btn" @click="submitEvaluate">发送邀请</button>
</div>
</ToolbarItemContainer>
<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
<view class="popup-content">
<view class="popup-title">
<view class="popup-text">点击选择您要参与的主播</view>
<view v-if="list.length !== 0">
<scroll-view show-scrollbar="false" scroll-y="true" class="scroll">
<view class="card" v-for="(item, index) in list" :key="index">
<view
class="card-content"
@click="Select(item.id, index)"
:style="{
background: selectedId === item.id ? '#b8ff8c74' : '#ffffff',
}"
>
<view class="Avatarimg">
<image class="avatar" :src="item.anchorIcon" mode="scaleToFill" />
</view>
<view class="NameMoney">
<view class="TimeMoney">
<view class="NameMoney_Name">{{ item.anchorId }}</view>
</view>
<view class="TimeMoney_Time">
<view class="pkTimeimg">
<image
style="width:31.49rpx; height:31.49rpx;margin-top:3rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/time.png"
mode="scaleToFill"
/>
</view>
<!-- <view>{{ TimeFormatting(item.pkTime) }}</view> -->
<view class="goldimg">
<image
style="width:31.49rpx; height:31.49rpx;margin-top:4rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/species.png"
mode="scaleToFill"
/>
</view>
<view class="goldnb">{{ item.coin }}K</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="noData" v-if="list.length === 0">您还没有可参与的主播PK，快去新建一个吧！</view>
</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 setup>
@@ -162,12 +109,7 @@ const selectedId = ref(null);
function Select(item ,index){
selectedId.value = item;
};
//确定邀请
function invite(){}
//关闭弹窗
function close(){
popup.value.close();
}
///``````````````````````````````````````标记3``````````````````````````````````````````````
const submitEvaluate = () => {
@@ -207,6 +149,9 @@ const submitEvaluate = () => {
</script>
<style scoped>
.popupcss {
}
.popup{
height: 750rpx;
background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chard1.png);
@@ -313,6 +258,66 @@ const submitEvaluate = () => {
color: rgb(127, 127, 127);
margin-top: 20rpx;
}
.Avatarimg {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
background-color: #dddddd;
margin-right: 20rpx;
margin-left: 20rpx;
}
.avatar {
width: 100%;
height: 100%;
border-radius: 50%;
}
.NameMoney {
display: flex;
flex-direction: column;
}
.TimeMoney {
width: 300rpx;
display: flex;
font-weight: bold;
font-size: 27rpx;
color: #161616;
}
.NameMoney_Name {
width: 400rpx;
text-align: left;
font-weight: bold;
font-size: 27rpx;
color: #161616;
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
}
.TimeMoney_Time {
display: flex;
align-items: center;
margin-top: 10rpx;
}
.pkTimeimg {
width: 31.49rpx;
height: 31.49rpx;
margin-right: 10rpx;
}
.goldimg {
width: 31.49rpx;
height: 35rpx;
margin-left: 40rpx;
}
.goldnb {
display: flex;
margin-left: 5rpx;
}
.noData{
width: 500rpx;
height: 400rpx;
border-radius: 10px;
font-size: 30rpx;
color: #999;
}
.scroll {
width: 500rpx;
height: 400rpx;
@@ -345,4 +350,31 @@ const submitEvaluate = () => {
z-index: 998;
width: 100vw;
}
.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>

81
TUIKit/components/TUIChat/message-input-toolbar/evaluate/popupinvite.vue Normal file
View File

@@ -0,0 +1,81 @@
<template>
<uni-popup class="popupcss" ref="popup" type="center" border-radius="10px 10px 0 0">
<view class="popup-content">
<view class="popup-title">
<view class="popup-text">点击选择您要参与的主播</view>
<view v-if="list.length !== 0">
<scroll-view show-scrollbar="false" scroll-y="true" class="scroll">
<view class="card" v-for="(item, index) in list" :key="index">
<view
class="card-content"
@click="Select(item.id, index)"
:style="{
background: selectedId === item.id ? '#b8ff8c74' : '#ffffff',
}"
>
<view class="Avatarimg">
<image class="avatar" :src="item.anchorIcon" mode="scaleToFill" />
</view>
<view class="NameMoney">
<view class="TimeMoney">
<view class="NameMoney_Name">{{ item.anchorId }}</view>
</view>
<view class="TimeMoney_Time">
<view class="pkTimeimg">
<image
style="width: 31.49rpx; height: 31.49rpx; margin-top: 3rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/time.png"
mode="scaleToFill"
/>
</view>
<!-- <view>{{ TimeFormatting(item.pkTime) }}</view> -->
<view class="goldimg">
<image
style="width: 31.49rpx; height: 31.49rpx; margin-top: 4rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/species.png"
mode="scaleToFill"
/>
</view>
<view class="goldnb">{{ item.coin }}K</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="noData" v-if="list.length === 0"
>您还没有可参与的主播PK，快去新建一个吧！</view
>
</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>
export default {
data() {
return {
title: "Hello",
};
},
onLoad() {
// 页面加载时执行
},
methods: {
//确定邀请
invite() {},
//关闭弹窗
close() {
popup.value.close();
},
},
};
</script>
<style scoped>
/* 样式定义 */
</style>