优化页面

This commit is contained in:
pengxiaolong
2025-06-17 22:04:18 +08:00
parent 8ec7365e7c
commit e464d99af5
86 changed files with 627 additions and 178 deletions

View File

@@ -15,6 +15,7 @@
<view class="card">
<!-- 主播A -->
<view class="AnchorA">
<view class="Anchor">
<view class="AnchorAImg">
<!-- 头像 -->
<image class="AnchorAImgcss" :src="item.anchorIconA" mode="scaleToFill" />
@@ -26,10 +27,11 @@
mode="scaleToFill"
v-if="item.winnerAnchorId == item.anchorIdA"
/>
</view>
<view class="AnchorAinfo">
<view class="AnchorAname"> {{ item.anchorIdA }} </view>
<view class="AnchorATime">{{ formatDate(item.pkTime) }}</view>
<view class="AnchorAICon">
<view class="AnchorAICon" v-if="item.userACoins!==null">
<view class="AnchorAIContext">实际打金币:</view>
<view class="AnchorAIConNum">{{ item.userACoins }}K</view>
</view>
@@ -42,14 +44,7 @@
</view>
<!-- 主播B -->
<view class="AnchorB">
<view class="AnchorBinfo">
<view class="AnchorAname">{{ item.anchorIdB }} </view>
<view class="AnchorATime"> {{ formatDate(item.pkTime) }} </view>
<view class="AnchorAICon">
<view class="AnchorAIContext">实际打金币:</view>
<view class="AnchorAIConNum">{{ item.userBCoins }}K</view>
</view>
</view>
<view class="Anchor">
<view class="AnchorAImg">
<!-- 头像 -->
<image class="AnchorBImgcss" :src="item.anchorIconB" mode="scaleToFill" />
@@ -62,6 +57,15 @@
v-if="item.winnerAnchorId == item.anchorIdB"
/>
</view>
<view class="AnchorBinfo">
<view class="AnchorAname">{{ item.anchorIdB }} </view>
<view class="AnchorATime"> {{ formatDate(item.pkTime) }} </view>
<view class="AnchorAICon" v-if="item.userBCoins!==null">
<view class="AnchorAIContext">实际打金币:</view>
<view class="AnchorAIConNum">{{ item.userBCoins }}K</view>
</view>
</view>
</view>
</view>
<view class="pkrecords-content">
<scroll-view
@@ -99,8 +103,8 @@ export default {
data() {
return {
title: "Hello",
item: {},
coinNumlist: [],
item:{},
coinNumlist:[],
triggered: false,
};
},
@@ -191,20 +195,27 @@ export default {
}
/* 卡片 */
.card {
width: 694.66rpx;
height: 161.26rpx;
width: 750rpx;
height: 300rpx;
border-radius: 15rpx;
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
margin-left: 28.55rpx;
margin-top: 20rpx;
}
.AnchorA {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 30rpx;
}
.AnchorB {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 30rpx;
}
.Anchor{
display: flex;
align-items: center;
}
@@ -219,19 +230,23 @@ export default {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 20rpx;
width: 250rpx;
}
.AnchorBinfo {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 20rpx;
width: 250rpx;
}
.AnchorAname {
width: 250rpx;
font-weight: 500;
font-size: 31rpx;
color: #161616;
text-align: center;
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
}
.AnchorATime {
font-weight: 400;
@@ -288,18 +303,16 @@ export default {
color: #f0836c;
font-weight: bold;
font-style: italic;
margin-left: 26rpx;
}
.Stext {
font-size: 45.8rpx;
color: #58d8db;
font-weight: bold;
font-style: italic;
margin-right: 26rpx;
}
.pkrecords-content {
position: absolute;
top: 240rpx;
top: 300rpx;
left: 0;
right: 0;
display: flex;

View File

@@ -66,20 +66,20 @@
</view>
<!-- <view class="handle"> -->
<view class="handle" v-if="item.inviteStatus === 0">
<view class="recompose" @click="onTop(item)">
<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)">
<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.png"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/cancelPin.png"
mode="scaleToFill"
/>
</view> -->
</view>
<view class="expurgate" @click="onRecompose(item)">
<image
style="width: 40rpx; height: 40rpx"
@@ -100,12 +100,26 @@
</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-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>
</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 {
@@ -117,6 +131,10 @@ export default {
createModule: null,
parentMessage: null,
triggered: false,
pickerArray: [],
index:0,
topPinnedPersondata:{},
Topdate:0
};
},
onLoad() {
@@ -181,7 +199,74 @@ export default {
},
// 置顶
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() {
if(Math.ceil(Date.now() / 1000 + Number(this.pickerArray[this.index]) * 3600) <= this.topPinnedPersondata.pkTime){
this.Topdate = Math.ceil(Date.now() / 1000 + Number(this.pickerArray[this.index]) * 3600)
}else{
this.Topdate = this.topPinnedPersondata.pkTime
}
console.log(this.Topdate,this.topPinnedPersondata.id);
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.msg,
icon: "none",
duration: 3000,
});
this.closePopup()
} else {
uni.showToast({
title:res.msg,
icon: "none",
duration: 3000,
});
}
});
},
//取消置顶
onOutTop(item) {
request({
url: "user/cancelPin",
method: "POST",
data: {
articleId: item.id,
},
userInfo: true,
}).then((res) => {
if (res.code == 200) {
this.onRefresherRefresh();
uni.showToast({
title: res.data,
icon: "none",
duration: 3000,
});
} else {
console.log(res.msg);
}
});
},
// 删除pk
onExpurgate(item) {
@@ -368,4 +453,66 @@ export default {
z-index: 998;
width: 100vw;
}
.popup-container{
width: 500rpx;
height: 300rpx;
background-color: #ffffff;
border-radius: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.popup-title{
font-size: 30rpx;
color: #161616;
font-weight: bold;
margin-top: 30rpx;
}
.popup-picker{
margin-top: 30rpx;
width: 400rpx;
height: 50rpx;
border: #5bced1 solid 1rpx;
border-radius: 15rpx;
}
.uni-input{
font-size: 30rpx;
color: #ffffff;
width: 400rpx;
height: 50rpx;
text-align: center;
line-height: 50rpx;
background-color: #5bced1;
border-radius: 15rpx;
}
.popup-btn{
margin-top: 30rpx;
display: flex;
justify-content: center;
}
.uni-primary{
width: 150rpx;
height: 50rpx;
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: 50rpx;
margin-right: 20rpx;
}
.uni-default{
width: 150rpx;
height: 50rpx;
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: 50rpx;
}
</style>

View File

@@ -55,7 +55,7 @@
<view class="AnchorAinfo">
<view class="AnchorAname"> {{ item.anchorIdA }} </view>
<view class="AnchorATime">{{ formatDate(item.pkTime) }}</view>
<view class="AnchorAICon">
<view class="AnchorAICon" v-if="item.userACoins!== null">
<view class="AnchorAIContext">实际金币:</view>
<view class="AnchorAIConNum">{{ item.userACoins}}K</view>
</view>
@@ -71,7 +71,7 @@
<view class="AnchorBinfo">
<view class="AnchorAname">{{ item.anchorIdB }} </view>
<view class="AnchorATime"> {{ formatDate(item.pkTime) }} </view>
<view class="AnchorAICon">
<view class="AnchorAICon" v-if="item.userBCoins!== null">
<view class="AnchorAIContext">实际打金币:</view>
<view class="AnchorAIConNum">{{ item.userBCoins }}K</view>
</view>

View File

@@ -26,9 +26,8 @@
lower-threshold="100"
@scrolltolower="onScrollToLower"
:refresher-triggered="triggered"
enable-flex="true"
>
<uni-card class="card" v-for="(item, index) in pointslist" :key="index">
<uni-card class="card" v-for="(item, index) in pointslist" :key="index" >
<view
class="card-content"
:style="{ 'background-color': item.status == 0 ? '#11ff002b' : '#ff000011' }"
@@ -37,7 +36,7 @@
{{ formatDate(item.time) }}
</view>
<view class="info">{{ item.info }}</view>
<view class="num">{{ item.num }}</view>
<view class="num">{{ item.number }}</view>
</view>
</uni-card>
</scroll-view>
@@ -54,8 +53,8 @@ export default {
title: "Hello",
userinfo: {},
page: 0,
triggered: false,
pointslist: [],
triggered:false,
pointslist:[],
};
},
onLoad() {
@@ -63,7 +62,7 @@ export default {
key: "userinfo",
success: (res) => {
this.userinfo = res.data;
this.getPointsDetail();
this.onRefresherRefresh();
},
});
},
@@ -83,7 +82,7 @@ export default {
},
//获取积分详情
getPointsDetail() {
const res = request({
request({
url: "user/pointsDetail",
method: "POST",
data: {
@@ -94,8 +93,10 @@ export default {
userInfo: true,
}).then((res) => {
if (res.code === 200) {
this.triggered = false;
console.log(res.data);
this.pointslist.push(...res.data);
console.log("```````````````````", this.pointslist);
this.triggered = false;
} else {
console.log(res.msg);
}

View File

@@ -264,6 +264,8 @@ export default {
if (this.selectedId) {
this.nameAnchor = this.selectedIddata.anchorId;
this.AnchorProfilePicture = this.selectedIddata.headerIcon;
this.genders = this.selectedIddata.gender;
this.countrys = this.selectedIddata.country;
this.close();
} else {
uni.showToast({