优化页面

This commit is contained in:
pengxiaolong
2025-06-13 22:13:15 +08:00
parent de99d32c01
commit 0f2a48b450
86 changed files with 4383 additions and 671 deletions

View File

@@ -246,9 +246,9 @@ export default {
});
},
});
setTimeout(() => {
uni.switchTab({ url: "/pages/Home/Home" });
}, 1000);
// setTimeout(() => {
// uni.switchTab({ url: "/pages/Home/Home" });
// }, 1000);
},
methods: {
//关闭弹窗(取消)
@@ -563,6 +563,7 @@ export default {
font-size: 31rpx;
color: #161616;
line-height: 38rpx;
margin-bottom: 20rpx;
}
.Genderimg {
width: 15rpx;

View File

@@ -1,113 +1,183 @@
<template>
<view class="container">
<view class="bg">
<image class="bgImg" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png" mode="scaleToFill" />
</view>
<scroll-view scroll-y="true" class="scroll">
<view class="container">
<view class="bg">
<image
class="bgImg"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
mode="scaleToFill"
/>
</view>
<view class="PersonalInformation">
<view class="header">
<image :src="userinfo.headerIcon" style="width: 144.5rpx; height: 144.5rpx; border-radius: 72.25rpx;" mode="scaleToFill" class="headerIcon" />
<view class="PersonalInformation">
<view class="header">
<image
:src="userinfo.headerIcon"
style="width: 144.5rpx; height: 144.5rpx; border-radius: 72.25rpx"
mode="scaleToFill"
class="headerIcon"
/>
</view>
<view>
<view class="name">{{ userinfo.nickName }}</view>
</view>
<!-- 签到 -->
<view class="Sign" @click="sign" v-if="SignStatus === true">签到</view>
<view class="Sign" v-if="SignStatus === false">已签到</view>
<!-- -->
<view class="Settings" @click="goSetting">
<image
class="SettingsIcon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Settings.png"
mode="scaleToFill"
/>
</view>
</view>
<view>
<view class="name">{{ userinfo.nickName }}</view>
</view>
<view class="Settings" @click="goSetting">
<image class="SettingsIcon" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Settings.png" mode="scaleToFill" />
</view>
</view>
<!-- PK信息 -->
<view class="content">
<view class="PKInformation" >
<view class="title">
<view class="titleText">PK信息</view>
<view class="titleLine"></view>
<view class="titleMore"
@click="pkInformation"
>更多PK信息<image
style="width: 10.5rpx; height: 20.04rpx; margin-left: 10rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
mode="scaleToFill"
/>
<view class="content">
<!-- 主播库 -->
<view class="PKInformation">
<view class="title">
<view class="titleText">主播库</view>
<view class="titleLine"></view>
<view class="AnchorMore" @click="anchorLibrary"
>更多主播信息<image
style="width: 10.5rpx; height: 20.04rpx; margin-left: 10rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
mode="scaleToFill"
/>
</view>
</view>
<view class="card">
<view
class="cardContent"
v-for="(item, index) in AnchorList"
:key="index"
v-if="AnchorList.length !== 0"
>
<view class="cardImg">
<image
:src="item.headerIcon"
style="width: 80rpx; height: 80rpx; border-radius: 72.25rpx"
mode="scaleToFill"
/>
</view>
<view class="Time">{{ item.anchorId }}</view>
<view class="gold"> {{ item.country }}</view>
</view>
<view v-if="AnchorList.length === 0" class="no-content">暂无内容</view>
</view>
</view>
<!-- PK信息 -->
<view class="PKInformation">
<view class="title">
<view class="titleText">PK信息</view>
<view class="titleLine"></view>
<view class="titleMore" @click="pkInformation"
>更多PK信息<image
style="width: 10.5rpx; height: 20.04rpx; margin-left: 10rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
mode="scaleToFill"
/>
</view>
</view>
<view class="card">
<view
class="cardContent"
v-for="(item, index) in pkInformationdata"
:key="index"
v-if="pkInformationdata.length !== 0"
>
<view class="cardImg">
<image
:src="item.anchorIcon"
style="width: 80rpx; height: 80rpx; border-radius: 72.25rpx"
mode="scaleToFill"
/>
</view>
<view class="Time">{{ formatDate(item.pkTime) }}</view>
<view class="gold"> {{ item.coin }}K</view>
</view>
<view v-if="pkInformationdata.length === 0" class="no-content">暂无内容</view>
</view>
</view>
<!-- PK记录 -->
<view class="myPkRecord">
<view class="title">
<view class="titleText">我的PK记录</view>
<view class="titleLine"></view>
<view class="myPkRecordMore" @click="pkRecord"
>更多PK记录<image
style="width: 10.5rpx; height: 20.04rpx; margin-left: 10rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
mode="scaleToFill"
/>
</view>
</view>
<view class="card">
<view
class="cardContent"
v-for="(item, index) in myPkRecorddata"
:key="index"
v-if="myPkRecorddata.length !== 0"
>
<view class="cardImg">
<image
style="width: 80rpx; height: 80rpx; border-radius: 72.25rpx"
:src="item.anchorIconA"
mode="scaleToFill"
/>
</view>
<view class="Failure" v-if="item.winnerAnchorId !== item.anchorIdA && item.winnerAnchorId !== ''">
失败
</view>
<view class="Result" v-else-if="item.winnerAnchorId === item.anchorIdA">
胜利
</view>
<view class="Session"> {{ item.pkNumber }} </view>
<view class="Time">{{ TimeFormatting(item.pkTime) }}</view>
</view>
<view v-if="myPkRecorddata.length === 0" class="no-content">暂无内容</view>
</view>
</view>
<view class="PKInformation">
<view class="title">
<view class="titleText">专属客服</view>
<view class="titleLine"></view>
</view>
</view>
<view class="card">
<view class="cardContent" v-for="(item,index) in pkInformationdata" :key="index" v-if="pkInformationdata.length !== 0">
<view class="cardImg">
<image :src="item.anchorIcon" style="width: 80rpx; height: 80rpx; border-radius: 72.25rpx;" mode="scaleToFill" />
</view>
<view class="Time">{{ formatDate(item.pkTime) }}</view>
<view class="gold"> {{item.coin}}K</view>
</view>
<view v-if="pkInformationdata.length === 0" class="no-content">暂无内容</view>
</view>
</view>
<!-- PK记录 -->
<view class="myPkRecord" >
<view class="title">
<view class="titleText">我的PK记录</view>
<view class="titleLine"></view>
<view class="myPkRecordMore"
@click="pkRecord">更多PK记录<image
style="width: 10.5rpx; height: 20.04rpx; margin-left: 10rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/More.png"
<view class="service" @click="contact">
<image
style="width: 48.28rpx; height: 48.09rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/service.png"
mode="scaleToFill"
/>
<view class="cardtext">联系客服</view>
</view>
<view class="service" @click="serviceProtocol">
<image
style="width: 48.28rpx; height: 48.09rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Agreement.png"
mode="scaleToFill"
/>
<view class="cardtext">服务协议</view>
</view>
<view class="service" @click="logout">
<image
style="width: 48.28rpx; height: 48.09rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/logout.png"
mode="scaleToFill"
/>
<view class="cardtext">退出登录</view>
</view>
</view>
<view class="card">
<view class="cardContent"v-for="(item,index) in myPkRecorddata" :key="index" v-if="myPkRecorddata.length !== 0">
<view class="cardImg">
<image style="width: 80rpx; height: 80rpx;border-radius: 72.25rpx;" :src="item.anchorIconA" mode="scaleToFill" />
</view>
<view class="Failure"v-if="item.winnerAnchorId !== item.anchorIdA">
失败
</view>
<view class="Result" v-else-if="item.winnerAnchorId === item.anchorIdA"> 胜利 </view>
<view class="Session"> {{item.pkNumber}} </view>
<view class="Time">{{TimeFormatting(item.pkTime)}}</view>
</view>
<view v-if="myPkRecorddata.length === 0" class="no-content">暂无内容</view>
</view>
</view>
<view class="PKInformation">
<view class="title">
<view class="titleText">专属客服</view>
<view class="titleLine"></view>
</view>
</view>
<view class="card">
<view class="service" @click="contact">
<image
style="width: 48.28rpx; height: 48.09rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/service.png"
mode="scaleToFill"
/>
<view class="cardtext">联系客服</view>
</view>
<view class="service" @click="serviceProtocol">
<image
style="width: 48.28rpx; height: 48.09rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Agreement.png"
mode="scaleToFill"
/>
<view class="cardtext">服务协议</view>
</view>
<view class="service" @click="logout">
<image
style="width: 48.28rpx; height: 48.09rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/logout.png"
mode="scaleToFill"
/>
<view class="cardtext">退出登录</view>
</view>
</view>
<view class="copyright">版权所有 © 2025 ...................</view>
</view>
</view>
<view class="copyright">版权所有 © 2025 ...................</view>
</scroll-view>
<view class="tabBar">
<tabBar :tabIndex="4"></tabBar>
</view>
@@ -126,6 +196,8 @@ export default {
userinfo: {},
pkInformationdata: [],
myPkRecorddata: [],
SignStatus: null,
AnchorList: [],
};
},
onShow() {
@@ -136,52 +208,115 @@ export default {
console.log(this.userinfo);
this.getpkInformation();
this.getmyPkRecord();
this.getSignStatus();
this.getAnchorList();
},
});
},
methods: {
// 获取主播列表
getAnchorList() {
const res = request({
url: "anchor/list",
method: "POST",
data: {
id: this.userinfo.id,
},
userInfo: true,
}).then((res) => {
if (res.code == 200) {
this.AnchorList = res.data.slice(0, 4);
} else {
console.log(res.msg);
}
});
},
// 获取签到状态
getSignStatus() {
const res = request({
url: "user/checkSignStatus",
method: "GET",
data: {
userId: this.userinfo.id,
},
userInfo: true,
}).then((res) => {
if (res.code == 200) {
this.SignStatus = res.data;
} else {
console.log(res.msg);
}
});
},
//签到
sign() {
const res = request({
url: "user/signIn",
method: "POST",
data: {
userId: this.userinfo.id,
},
userInfo: true,
}).then((res) => {
if (res.code == 200) {
uni.showToast({
title: "签到成功",
icon: "none",
duration: 2000,
});
this.getSignStatus();
} else {
console.log(res.msg);
}
});
},
formatDate: formatDate,
TimeFormatting: TimeFormatting,
//获取pk信息
getpkInformation(){
getpkInformation() {
const res = request({
url: "user/queryMyAllPkData",
method: "POST",
data: {
userId: this.userinfo.id,
page:0,
size:4
},
userInfo: true,
}).then((res) => {
if (res.code == 200) {
url: "user/queryMyAllPkData",
method: "POST",
data: {
userId: this.userinfo.id,
page: 0,
size: 4,
},
userInfo: true,
}).then((res) => {
if (res.code == 200) {
this.pkInformationdata = res.data;
console.log(this.pkInformationdata);
}else {
} else {
console.log(res.msg);
}
});
}
});
},
//获取pk记录
getmyPkRecord(){
getmyPkRecord() {
const ress = request({
url: "user/handlePkInfo",
method: "POST",
data: {
type:1,
userId: this.userinfo.id,
page:0,
size:4
},
userInfo: false,
}).then((res) => {
if (res.code == 200) {
url: "user/handlePkInfo",
method: "POST",
data: {
type: 1,
userId: this.userinfo.id,
page: 0,
size: 4,
},
userInfo: false,
}).then((res) => {
if (res.code == 200) {
this.myPkRecorddata = res.data;
console.log(this.myPkRecorddata);
}else {
} else {
console.log(res.msg);
}
});
}
});
},
// 跳转到主播库页面
anchorLibrary() {
uni.navigateTo({
url: "/pages/Mine/minecomponents/anchorLibrary",
});
},
// 跳转到PK信息页面
pkInformation() {
@@ -214,8 +349,8 @@ export default {
});
},
// 退出登录
logout(){
uni.clearStorage()
logout() {
uni.clearStorage();
TUILogin.logout();
uni.reLaunch({
url: "/pages/login/login",
@@ -268,14 +403,25 @@ export default {
height: 100%;
}
.name {
width: 400rpx;
width: 280rpx;
font-size: 36.26rpx;
font-weight: 500;
color: #161616;
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出内容 */
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
}
.Sign {
width: 100rpx;
height: 50rpx;
background-color: #91e3e4;
border-radius: 20rpx;
font-size: 20rpx;
color: #fff;
text-align: center;
line-height: 50rpx;
margin-left: 30rpx;
}
.content {
position: absolute;
top: 294.5rpx;
@@ -286,6 +432,16 @@ export default {
flex-direction: column;
align-items: center;
}
.scroll {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.PKInformation {
margin-top: 48.5rpx;
}
@@ -311,13 +467,18 @@ export default {
border-radius: 7.16rpx 0rpx 7.16rpx 7.16rpx;
background-color: #91e3e48b;
}
.AnchorMore {
margin-left: 390rpx;
font-size: 28.63rpx;
color: #333333;
}
.titleMore {
margin-left: 400rpx;
font-size: 28.63rpx;
color: #333333;
}
.myPkRecordMore {
margin-left:330rpx;
margin-left: 330rpx;
font-size: 28.63rpx;
color: #333333;
}
@@ -404,17 +565,17 @@ export default {
color: #333333;
font-weight: 400;
}
.copyright{
.copyright {
font-size: 23rpx;
color: #929292;
text-align: center;
position: fixed;
bottom: 250rpx;
position: absolute;
bottom: 0rpx;
left: 0;
right: 0;
height: 50rpx;
}
.no-content{
.no-content {
width: 100%;
height: 100%;
display: flex;

View File

@@ -67,6 +67,10 @@
<scroll-view
scroll-y="true"
class="scroll"
refresher-enabled="true"
refresher-threshold="40"
@refresherrefresh="onRefresherRefresh"
:refresher-triggered="triggered"
>
<uni-card v-for="(items,index) in coinNumlist" :key="index">
<view class="contentcard">
@@ -81,7 +85,6 @@
</view>
</uni-card>
</scroll-view>
</view>
</view>
@@ -96,13 +99,8 @@ export default {
return {
title: "Hello",
item: {},
coinNumlist: [{
winnerAnchorId: 1,
anchorIdA: 1,
anchorIdB: 2,
anchorCoinA: 2,
anchorCoinB: 3,
}],
coinNumlist: [],
triggered: false,
};
},
onLoad(options) {
@@ -112,14 +110,20 @@ export default {
eventChannel.on("itemDetail", (data) => {
this.item = data.item; // 将接收到的数据赋值给item
console.log("接收到的数据:", this.item);
// this.getCoinNum(this.item)
this.getCoinNum(this.item)
});
},
methods: {
// 下拉刷新
onRefresherRefresh(){
this.triggered = true;
this.coinNumlist = [];
this.getCoinNum(this.item)
},
// 获取具体金币数量
getCoinNum(item) {
const res = request({
url: "user/pkRecordDetail",
url: "pk/fetchDetailPkDataWithId",
method: "POST",
data: {
id: item.id,
@@ -128,6 +132,7 @@ export default {
}).then((res) => {
if (res.code == 200) {
this.coinNumlist = res.data;
this.triggered = false;
}else{
console.log("获取金币数量失败")
}

View File

@@ -0,0 +1,458 @@
<template>
<view
v-if="Display"
:class="[Display ? 'create-module' : 'close-animation ', 'Mask']"
@click="open()"
>
<view @click.stop class="containers">
<view class="container">
<image
class="Fork"
@click="open()"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Fork.png"
mode="scaleToFill"
/>
<view class="Titlecss">
<view class="Star"></view>
<view class="Title">添加我的主播</view>
<view class="Star"></view>
</view>
<!-- <view class="Individual"> -->
<view class="NameAnchor">
<input
class="NameAnchorcss"
cursor-color="#666666"
placeholder-style="color:#666666"
@input="NameAnchor"
placeholder="主播名称"
@blur="blur"
/>
<view v-if="nameAnchor === '' && Hint === true" class="Hint"
>请检查主播名称是否正确</view
>
</view>
<!-- </view> -->
<view class="Accountnumber">
<view class="Coins country">
<wht-select
style="width: 350rpx"
backgroundColor="#ffffff"
placeholderColor="#666666"
textColor="#666666"
borderColor="#ffffff"
@change="country"
:options="Country"
:filterable="filterable"
placeholder="请选择国家"
/>
<view v-if="countrys === '' && Hint === true" class="Hint">请选择国家</view>
</view>
<view class="Gender">
<view class="Gendercs">
<view class="Gendercss">
<wht-select
style="width: 300rpx"
backgroundColor="#ffffff"
placeholderColor="#666666"
textColor="#666666"
borderColor="#ffffff"
@change="gender"
:options="Gender"
placeholder="性别"
/>
</view>
<view class="Gendericoncss">
<image
v-if="genders === 0"
class="Gendericon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/ask.png"
mode="scaleToFill"
/>
<image
v-if="genders === 1"
class="Gendericon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/man.png"
mode="scaleToFill"
/>
<image
v-if="genders === 2"
class="Gendericon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/girl.png"
mode="scaleToFill"
/>
</view>
</view>
<view v-if="genders === 0 && Hint === true" class="Hintcss">请选择性别</view>
</view>
</view>
<view class="Publish">
<button @click="Publish()" class="Publishcss">添加主播</button>
</view>
</view>
</view>
</view>
</template>
<script>
import optionsArray from "../../../../components/NationalDictionary.js";
import request from "../../../../components/request.js";
export default {
data() {
return {
genders: 0, //性别
Gender: [
{ label: "男", value: 1 },
{ label: "女", value: 2 },
],
Country: optionsArray,
countrys: "", //国家
nameAnchor: "", //主播名称
Display: false,
Hint: false,
id: null, //用户id
sendingTime: "", //发送时间
filterable: true, //是否可搜索
AnchorProfilePicture: "", //主播头像
};
},
mounted() {
uni.getStorage({
key: "userinfo",
success: (res) => {
this.id = res.data.id;
},
});
},
methods: {
//性别
gender(item) {
this.genders = item.value;
console.log(item);
},
//国家
country(item) {
this.countrys = item.value;
console.log(item);
},
handleOverlayClick(event) {
if (event.target === this.$el) {
this.Display = false;
this.Hint = false;
}
},
open() {
if (this.Display) {
this.Display = false;
this.Hint = false;
this.nameAnchor = "";
this.genders = 0;
this.countrys = "";
} else {
this.Display = true;
}
},
//获取主播名称以及头像地址
blur(event) {
if (this.nameAnchor !== event.target.value) {
this.nameAnchor = event.target.value;
uni.showLoading({
title: "正在验证主播",
mask: true,
});
uni.request({
url: "https://python.yolojt.com/api/" + this.nameAnchor,
success: (res) => {
if (res.data.code === 200) {
uni.hideLoading();
uni.showToast({
title: "查询成功",
icon: "none",
duration: 3000,
});
this.AnchorProfilePicture = res.data.data;
} else {
uni.hideLoading();
uni.showToast({
title: "未查询到该主播",
icon: "none",
duration: 3000,
});
}
},
fail: function (res) {
uni.hideLoading();
uni.showToast({
title: "网络请求失败",
icon: "none",
duration: 3000,
});
},
});
} else {
return;
}
},
async Publish() {
//判断是否为空
if (
this.nameAnchor === "" ||
this.genders === 0 ||
this.countrys === "" ||
this.AnchorProfilePicture === ""
) {
this.Hint = true;
return;
}
//发送请求
uni.showLoading({
title: "添加中...",
mask: true,
});
const res = await request({
url: "anchor/add",
method: "POST",
data: {
anchorId:this.nameAnchor,
headerIcon: this.AnchorProfilePicture,
gender:this.genders,
country:this.countrys,
createUserId: this.id,
},
userInfo: true,
}).then((res) => {
if (res.code === 200) {
this.Display = false;
this.Hint = false;
this.nameAnchor = "";
this.genders = 0;
this.AnchorProfilePicture = "";
uni.hideLoading();
uni.showToast({
title: "添加成功",
icon: "success",
duration: 2000,
});
this.$emit('Refresh');
} else {
uni.hideLoading();
uni.showToast({
title: "添加失败"+res.msg,
icon: "none",
duration: 2000,
});
}
});
},
},
};
</script>
<style scoped>
/* 定义动画 */
/* 原始进入动画 */
@keyframes slide-in {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* 进入动画类 */
.create-module {
animation: slide-in 0.3s ease-in-out;
}
.Mask {
width: 100vw;
height: 100vh;
background: #00000076;
display: flex;
flex-direction: column-reverse;
}
.Hint {
color: rgb(255, 0, 0);
font-size: 20rpx;
margin-left: 30rpx;
margin-top: 10rpx;
}
.Hintcss {
color: rgb(255, 0, 0);
font-size: 20rpx;
margin-left: 30rpx;
margin-top: 20rpx;
}
.containers {
background-color: #ffffff;
border-radius: 50rpx;
}
.container {
display: flex;
background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/bgv.png);
background-size: 100% 100%;
flex-direction: column;
width: 100%;
height: 1000rpx;
border-radius: 50rpx;
box-shadow: 0 0 10rpx #ccc;
}
.Fork {
width: 46rpx;
height: 46rpx;
margin-top: 20rpx;
/* margin-bottom: 40rpx; */
margin-left: 90%;
}
.Titlecss {
width: 100%;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
}
.Star {
width: 50rpx;
height: 50rpx;
background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/star.png);
background-size: 100% 100%;
}
.Title {
width: 430rpx;
height: 70rpx;
/* background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Publishpk.png); */
background-size: 100% 200%;
background-position: 0 100%;
margin-left: 26rpx;
margin-right: 26rpx;
font-size:50rpx;
line-height: 70rpx;
background: linear-gradient(135deg, #019fa1, #9ddbdc);
-webkit-background-clip: text; /* 兼容 WebKit 内核 */
background-clip: text;
color: transparent; /* 隐藏原文字颜色 */
-webkit-text-fill-color: transparent; /* Safari 兼容 */
font-weight: bold;
text-align: center;
font-style: italic;
}
.Individual {
display: flex;
/* justify-content: center; */
}
.NameAnchor {
width: 90%;
margin: 40rpx;
}
.time {
width: 90%;
margin-left: 5%;
margin-top: 50rpx;
}
.NameAnchorcss {
width: 99%;
height: 85rpx;
background-color: #ffffff;
border: 1rpx solid #bfbfbf;
border-radius: 10rpx;
text-align: center;
}
.Gender {
width: 310rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.Gendercs {
display: flex;
justify-content: center;
/* align-items: center; */
}
.Gendercss {
width: 200rpx;
height: 60rpx;
}
.Gendericoncss {
display: flex;
justify-content: center;
align-items: center;
width: 60rpx;
height: 60rpx;
border-radius: 50%;
border: 1rpx solid #ff9d0067;
margin-left: 20rpx;
margin-top: 10rpx;
}
.Gendericon {
width: 40rpx;
height: 40rpx;
/* margin-top: 10rpx;
margin-right: 40rpx; */
}
.Accountnumber {
display: flex;
justify-content: center;
margin-bottom: 60rpx;
margin-top: 50rpx;
}
.Coins {
width: 330rpx;
height: 65rpx;
/* display: flex; */
margin-right: 50rpx;
/* flex-direction: column; */
}
.country {
margin-left: 10rpx;
}
.goldCoin {
width: 100%;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
}
.number-box {
display: flex;
justify-content: center;
text-align: center;
}
.number-box-title {
color: #191919;
font-size: 30rpx;
margin-right: 22rpx;
margin-left: 17rpx;
}
.number-box-unit {
color: #03aba8;
width: 48rpx;
height: 48rpx;
border: 1rpx solid #03aba8;
border-radius: 50%;
line-height: 48rpx;
text-align: center;
/* color: #003cff5a; */
}
.Publish {
margin-top: 300rpx;
margin-bottom: 40rpx;
width: 90%;
margin-left: 5%;
}
.Publishcss {
background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
/* color: #33ff00; */
color: #ffffff;
font-weight: bold;
border-radius: 50rpx;
}
</style>

View File

@@ -0,0 +1,359 @@
<template>
<view class="anchor-library">
<view class="bg">
<image
class="bgImg"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
mode="scaleToFill"
/>
</view>
<view class="Return" @click="onBack">
<image
class="ReturnImg"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
mode="scaleToFill"
/>
</view>
<view class="title">主播库</view>
<view class="content">
<scroll-view
scroll-y="true"
class="scroll"
refresher-enabled="true"
refresher-threshold="40"
@refresherrefresh="onRefresherRefresh"
lower-threshold="100"
:refresher-triggered="triggered"
>
<uni-card class="card" v-for="(item, index) in AnchorList" :key="index">
<view class="Profile">
<image
:src="item.headerIcon"
style="width: 89.12rpx; height: 89.12rpx; border-radius: 72.25rpx"
mode="scaleToFill"
/>
</view>
<view class="Individual">
<view class="Name">{{ item.anchorId }}</view>
<view class="Label">
<view>
<view
:class="{
Gendermale: item.gender === 1,
Genderfemale: item.gender === 2,
}"
>
<image
v-if="item.gender === 2"
class="Genderimg"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/female.png"
mode="scaleToFill"
/>
<image
v-else
class="Genderimg"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/male.png"
mode="scaleToFill"
/>
<view class="age">{{ item.gender === 1 ? "男" : "女" }}</view>
</view>
</view>
<view class="state">{{ item.country }}</view>
</view>
</view>
<!-- <view class="handle"> -->
<view class="handle">
<view class="recompose" @click="onRecompose(item)">
<image
style="width: 46rpx; height: 46rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/recompose.png"
mode="scaleToFill"
/>
</view>
<view class="expurgate" @click="onExpurgate(item)">
<image
style="width: 46rpx; height: 46rpx"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/expurgate.png"
mode="scaleToFill"
/>
</view>
</view>
</uni-card>
</scroll-view>
</view>
<view class="addition" @click="openPopupQuantity()"> </view>
</view>
<anchorLibrary class="createModule" ref="createModule" @Refresh="getAnchorList"></anchorLibrary>
<modifyStreamer ref="modifyStreamer" class="createModule" :message="modifyStreamerMessage" @Refresh="getAnchorList"></modifyStreamer>
</template>
<script>
import request from "../../../components/request.js";
import anchorLibrary from "./addStreamer/addStreamer.vue";
import modifyStreamer from "./modifyStreamer/modifyStreamer.vue";
export default {
data() {
return {
userinfo: {},
AnchorList: [],
triggered: false,
modifyStreamerMessage: {},
};
},
onLoad() {
uni.getStorage({
key: "userinfo",
success: (res) => {
this.userinfo = res.data;
console.log(this.userinfo);
this.getAnchorList();
},
});
},
methods: {
// 重新编辑主播信息
onRecompose(item) {
this.modifyStreamerMessage = item;
this.$refs.modifyStreamer.open();
},
// 删除主播信息
onExpurgate(item) {
const res = request({
url: "anchor/deleteMyAnchor",
method: "POST",
data: {
id: item.id,
},
userInfo: true,
}).then((res) => {
this.triggered = false;
if (res.code == 200) {
uni.showToast({
title: "删除成功",
icon: "success",
duration: 2000,
});
this.getAnchorList();
} else {
uni.showToast({
title: res.msg,
icon: "success",
duration: 2000,
});
}
});
},
//获取主播列表
getAnchorList() {
const res = request({
url: "anchor/list",
method: "POST",
data: {
id: this.userinfo.id,
},
userInfo: true,
}).then((res) => {
this.triggered = false;
if (res.code == 200) {
this.AnchorList = res.data;
} else {
console.log(res.msg);
}
});
},
//打开弹窗,添加主播
openPopupQuantity() {
this.$refs.createModule.open();
},
// 下拉刷新
onRefresherRefresh() {
this.triggered = true;
this.getAnchorList();
},
// 返回上一页
onBack() {
wx.navigateBack({
delta: 1,
});
},
},
components: {
anchorLibrary,
modifyStreamer
},
};
</script>
<style scoped>
.bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.bgImg {
width: 100%;
height: 100%;
}
.Return {
position: absolute;
top: 110rpx;
left: 35rpx;
width: 46rpx;
height: 46rpx;
}
.title {
position: absolute;
top: 120rpx;
left: 315rpx;
font-size: 34rpx;
color: #100e0f;
font-weight: 500;
}
.ReturnImg {
width: 100%;
height: 100%;
}
.scroll {
position: absolute;
top: 200rpx;
left: 0;
right: 0;
height: 1300rpx;
width: 100%;
}
.card {
width: 695rpx;
height: 161rpx;
background: #ffffff;
border-radius: 15rpx;
display: flex;
align-items: center;
margin-left: 30rpx;
margin-top: 20rpx;
}
.Profile {
width: 89rpx;
height: 89rpx;
border-radius: 50rpx;
background-color: #cccccc;
margin-left: 27.5rpx;
}
.Gendermale {
background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/maleimg.png)
no-repeat center;
width: 56.3rpx;
height: 29.58rpx;
background-size: 100% 100%;
display: flex;
align-items: center;
margin-right: 10rpx;
}
.Genderfemale {
background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/femaleimg.png)
no-repeat center;
width: 56.3rpx;
height: 29.58rpx;
background-size: 100% 100%;
display: flex;
align-items: center;
margin-right: 10rpx;
}
.Individual {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 37rpx;
}
.Name {
width: 288.17rpx;
font-size: 30.53rpx;
color: #161616;
font-weight: 500;
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
}
.time {
margin-top: 13rpx;
font-size: 23rpx;
color: #a3a3a3;
}
.state {
width: 56.3rpx;
height: 30rpx;
background: #f6f6f6;
border-radius: 14rpx;
line-height: 30rpx;
font-size: 17rpx;
color: #666666;
padding: 0 15rpx;
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
text-align: center;
}
.Label {
margin-top: 15rpx;
display: flex;
}
.age {
font-size: 17rpx;
color: #ffffff;
margin-left: 10rpx;
}
.Genderimg {
width: 14.22rpx;
height: 14.22rpx;
margin-left: 10rpx;
}
.species {
display: flex;
margin-left: 10rpx;
}
.species-text {
font-size: 23rpx;
color: #a3a3a3;
}
.species-num {
font-size: 23rpx;
color: #161616;
font-weight: bold;
}
.handle {
display: flex;
}
.recompose {
width: 46rpx;
height: 46rpx;
margin-left: 90rpx;
}
.expurgate {
width: 46rpx;
height: 46rpx;
margin-left: 40rpx;
}
.createModule {
position: fixed;
bottom: 0;
right: 0;
z-index: 998;
width: 100vw;
}
.addition {
position: absolute;
bottom: 200rpx;
right: 100rpx;
width: 100rpx;
height: 100rpx;
z-index: 998;
border-radius: 50rpx;
/* background-color: #ffffff; */
background: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/addAnchor.png)
no-repeat center;
background-size: 100% 100%;
}
</style>

View File

@@ -0,0 +1,476 @@
<template>
<view
v-if="Display"
:class="[Display ? 'create-module' : 'close-animation ', 'Mask']"
@click="open()"
>
<view @click.stop class="containers">
<view class="container">
<image
class="Fork"
@click="open()"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Fork.png"
mode="scaleToFill"
/>
<view class="Titlecss">
<view class="Star"></view>
<view class="Title">修改我的主播</view>
<view class="Star"></view>
</view>
<!-- <view class="Individual"> -->
<view class="NameAnchor">
<input
class="NameAnchorcss"
cursor-color="#666666"
placeholder-style="color:#666666"
@input="NameAnchor"
placeholder="主播名称"
@blur="blur"
:value="nameAnchor"
/>
<view v-if="nameAnchor === '' && Hint === true" class="Hint"
>请检查主播名称是否正确</view
>
</view>
<!-- </view> -->
<view class="Accountnumber">
<view class="Coins country">
<wht-select
style="width: 350rpx"
backgroundColor="#ffffff"
placeholderColor="#666666"
textColor="#666666"
borderColor="#ffffff"
@change="country"
:options="Country"
:filterable="filterable"
placeholder="请选择国家"
:value="countrys"
/>
<view v-if="countrys === '' && Hint === true" class="Hint">请选择国家</view>
</view>
<view class="Gender">
<view class="Gendercs">
<view class="Gendercss">
<wht-select
style="width: 300rpx"
backgroundColor="#ffffff"
placeholderColor="#666666"
textColor="#666666"
borderColor="#ffffff"
@change="gender"
:options="Gender"
placeholder="性别"
:value="genders"
/>
</view>
<view class="Gendericoncss">
<image
v-if="genders === 0"
class="Gendericon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/ask.png"
mode="scaleToFill"
/>
<image
v-if="genders === 1"
class="Gendericon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/man.png"
mode="scaleToFill"
/>
<image
v-if="genders === 2"
class="Gendericon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/girl.png"
mode="scaleToFill"
/>
</view>
</view>
<view v-if="genders === 0 && Hint === true" class="Hintcss">请选择性别</view>
</view>
</view>
<view class="Publish">
<button @click="Publish()" class="Publishcss">修改主播信息</button>
</view>
</view>
</view>
</view>
</template>
<script>
import optionsArray from "../../../../components/NationalDictionary.js";
import request from "../../../../components/request.js";
export default {
data() {
return {
genders: 0, //性别
Gender: [
{ label: "男", value: 1 },
{ label: "女", value: 2 },
],
Country: optionsArray,
countrys: "", //国家
nameAnchor: "", //主播名称
Display: false,
Hint: false,
id: null, //用户id
filterable: true, //是否可搜索
AnchorProfilePicture: "", //主播头像
uid: null, //用户id
};
},
props: {
message: {
type: Object,
},
},
watch: {
message(newQuestion, oldQuestion) {
console.log(newQuestion);
this.id = newQuestion.id;
this.nameAnchor = newQuestion.anchorId;
this.genders = newQuestion.gender;
this.AnchorProfilePicture = newQuestion.headerIcon.split("/").pop();
this.countrys = newQuestion.country
},
},
mounted() {
uni.getStorage({
key: "userinfo",
success: (res) => {
this.uid = res.data.id;
},
});
},
methods: {
//性别
gender(item) {
this.genders = item.value;
console.log(item);
},
//国家
country(item) {
this.countrys = item.value;
console.log(item);
},
handleOverlayClick(event) {
if (event.target === this.$el) {
this.Display = false;
this.Hint = false;
}
},
open() {
if (this.Display) {
this.Display = false;
this.Hint = false;
this.nameAnchor = "";
this.genders = 0;
this.countrys = "";
} else {
this.Display = true;
}
},
//获取主播名称以及头像地址
blur(event) {
if (this.nameAnchor !== event.target.value) {
this.nameAnchor = event.target.value;
uni.showLoading({
title: "正在验证主播",
mask: true,
});
uni.request({
url: "https://python.yolojt.com/api/" + this.nameAnchor,
success: (res) => {
if (res.data.code === 200) {
uni.hideLoading();
uni.showToast({
title: "查询成功",
icon: "none",
duration: 3000,
});
this.AnchorProfilePicture = res.data.data;
} else {
uni.hideLoading();
uni.showToast({
title: "未查询到该主播",
icon: "none",
duration: 3000,
});
}
},
fail: function (res) {
uni.hideLoading();
uni.showToast({
title: "网络请求失败",
icon: "none",
duration: 3000,
});
},
});
} else {
return;
}
},
async Publish() {
//判断是否为空
if (
this.nameAnchor === "" ||
this.genders === 0 ||
this.countrys === "" ||
this.AnchorProfilePicture === ""
) {
this.Hint = true;
return;
}
//发送请求
uni.showLoading({
title: "修改中...",
mask: true,
});
const res = await request({
url: "anchor/updateAnchorInfo",
method: "POST",
data: {
id:this.id,
anchorId: this.nameAnchor,
headerIcon: this.AnchorProfilePicture,
gender: this.genders,
country: this.countrys,
createUserId: this.uid,
},
userInfo: true,
}).then((res) => {
if (res.code === 200) {
this.Display = false;
this.Hint = false;
this.nameAnchor = "";
this.genders = 0;
this.AnchorProfilePicture = "";
this.country = "";
uni.hideLoading();
uni.showToast({
title: "修改成功",
icon: "success",
duration: 2000,
});
this.$emit('Refresh');
} else {
uni.hideLoading();
uni.showToast({
title: "修改失败" + res.msg,
icon: "none",
duration: 2000,
});
}
});
},
},
};
</script>
<style scoped>
/* 定义动画 */
/* 原始进入动画 */
@keyframes slide-in {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* 进入动画类 */
.create-module {
animation: slide-in 0.3s ease-in-out;
}
.Mask {
width: 100vw;
height: 100vh;
background: #00000076;
display: flex;
flex-direction: column-reverse;
}
.Hint {
color: rgb(255, 0, 0);
font-size: 20rpx;
margin-left: 30rpx;
margin-top: 10rpx;
}
.Hintcss {
color: rgb(255, 0, 0);
font-size: 20rpx;
margin-left: 30rpx;
margin-top: 20rpx;
}
.containers {
background-color: #ffffff;
border-radius: 50rpx;
}
.container {
display: flex;
background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/bgv.png);
background-size: 100% 100%;
flex-direction: column;
width: 100%;
height: 1000rpx;
border-radius: 50rpx;
box-shadow: 0 0 10rpx #ccc;
}
.Fork {
width: 46rpx;
height: 46rpx;
margin-top: 20rpx;
/* margin-bottom: 40rpx; */
margin-left: 90%;
}
.Titlecss {
width: 100%;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
}
.Star {
width: 50rpx;
height: 50rpx;
background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/star.png);
background-size: 100% 100%;
}
.Title {
width: 430rpx;
height: 70rpx;
/* background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Publishpk.png); */
background-size: 100% 200%;
background-position: 0 100%;
margin-left: 26rpx;
margin-right: 26rpx;
font-size: 50rpx;
line-height: 70rpx;
background: linear-gradient(135deg, #019fa1, #9ddbdc);
-webkit-background-clip: text; /* 兼容 WebKit 内核 */
background-clip: text;
color: transparent; /* 隐藏原文字颜色 */
-webkit-text-fill-color: transparent; /* Safari 兼容 */
font-weight: bold;
text-align: center;
font-style: italic;
}
.Individual {
display: flex;
/* justify-content: center; */
}
.NameAnchor {
width: 90%;
margin: 40rpx;
}
.time {
width: 90%;
margin-left: 5%;
margin-top: 50rpx;
}
.NameAnchorcss {
width: 99%;
height: 85rpx;
background-color: #ffffff;
border: 1rpx solid #bfbfbf;
border-radius: 10rpx;
text-align: center;
}
.Gender {
width: 310rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.Gendercs {
display: flex;
justify-content: center;
/* align-items: center; */
}
.Gendercss {
width: 200rpx;
height: 60rpx;
}
.Gendericoncss {
display: flex;
justify-content: center;
align-items: center;
width: 60rpx;
height: 60rpx;
border-radius: 50%;
border: 1rpx solid #ff9d0067;
margin-left: 20rpx;
margin-top: 10rpx;
}
.Gendericon {
width: 40rpx;
height: 40rpx;
/* margin-top: 10rpx;
margin-right: 40rpx; */
}
.Accountnumber {
display: flex;
justify-content: center;
margin-bottom: 60rpx;
margin-top: 50rpx;
}
.Coins {
width: 330rpx;
height: 65rpx;
/* display: flex; */
margin-right: 50rpx;
/* flex-direction: column; */
}
.country {
margin-left: 10rpx;
}
.goldCoin {
width: 100%;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
}
.number-box {
display: flex;
justify-content: center;
text-align: center;
}
.number-box-title {
color: #191919;
font-size: 30rpx;
margin-right: 22rpx;
margin-left: 17rpx;
}
.number-box-unit {
color: #03aba8;
width: 48rpx;
height: 48rpx;
border: 1rpx solid #03aba8;
border-radius: 50%;
line-height: 48rpx;
text-align: center;
/* color: #003cff5a; */
}
.Publish {
margin-top: 300rpx;
margin-bottom: 40rpx;
width: 90%;
margin-left: 5%;
}
.Publishcss {
background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
/* color: #33ff00; */
color: #ffffff;
font-weight: bold;
border-radius: 50rpx;
}
</style>

View File

@@ -117,22 +117,27 @@ export default {
this.createModule = this.$refs.createModule; // 挂载后赋值
},
methods: {
// 刷新
onRefresherRefresh() {
this.page = 0;
this.pkList = [];
this.getpkList();
this.triggered = true;
},
// 下拉加载
onScrollToLower() {
this.page++;
this.getpkList();
},
// 返回
onBack() {
uni.navigateBack({
delta: 1,
});
},
//时间格式化
formatDate: formatDate,
// 获取pk列表
getpkList() {
const res = request({
url: "user/queryMyAllPkData",
@@ -153,10 +158,12 @@ export default {
}
});
},
// 打开修改窗口
onRecompose(item) {
this.parentMessage = item;
this.createModule.open();
},
// 删除pk
onExpurgate(item) {
const res = request({
url: "pk/deletePkDataWithId",
@@ -233,7 +240,7 @@ export default {
display: flex;
align-items: center;
margin-left: 30rpx;
margin-top: 11.5rpx;
margin-top: 20rpx;
}
.Profile {
width: 89rpx;

View File

@@ -127,8 +127,14 @@ export default {
},
methods: {
onRefresherRefresh() {
this.pkRecordlist = [];
this.triggered = true;
this.page = 0;
if (this.current === 1) {
this.pkmyRecordlist = [];
}else{
this.pkInvitationRecordlist = [];
}
this.getPkRecordList(this.current);
},
onScrollToLower() {
@@ -294,7 +300,7 @@ export default {
justify-content: center;
align-items: center;
margin-left: 28.55rpx;
margin-top: 12rpx;
margin-top: 20rpx;
}
.AnchorA {
display: flex;

View File

@@ -19,22 +19,23 @@
</view>
<!-- <view class="Individual"> -->
<view class="NameAnchor">
<input
class="NameAnchorcss"
cursor-color="#666666"
placeholder-style="color:#666666"
@input="NameAnchor"
placeholder="主播名称"
:value="nameAnchor"
/>
<view
v-if="nameAnchor === '' || (nameAnchor === null && Hint === true)"
class="Hint"
>填写主播名称</view
>
<view class="AnchorSelection">
<view class="NameAnchor">
<input
class="NameAnchorcss"
cursor-color="#666666"
placeholder-style="color:#666666"
@input="NameAnchor"
placeholder="主播名称"
@blur="blur"
:value="nameAnchor"
/>
<view v-if="nameAnchor === '' && Hint === true" class="Hint"
>检查主播名称是否正确</view
>
</view>
<view class="AnchorSelectioncss" @click="chooseMyStreamer">选择我的主播</view>
</view>
<!-- </view> -->
<view class="Accountnumber">
@@ -157,6 +158,43 @@
</view>
</view>
</view>
<!-- 弹窗 -->
<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
<view class="popup-container">
<view class="popup-title">选择我的主播</view>
<scroll-view scroll-y="true" class="scroll" v-if="AnchorList.length !== 0">
<!-- -->
<view class="card" v-for="(item, index) in AnchorList" :key="index">
<view
class="card-content"
@click="Select(item.id, item)"
:style="{
background: selectedId === item.id ? '#f6f6f6' : '#ffffff',
}"
>
<view class="Avatarimg">
<image class="avatar" :src="item.headerIcon" mode="scaleToFill" />
</view>
<view class="NameMoney">
<view class="TimeMoney">
<view class="NameMoney_Name">{{ item.anchorId }}</view>
</view>
<view class="TimeMoney">
<view class="TimeMoney_country">{{ item.country }}</view>
</view>
</view>
</view>
</view>
<!-- -->
</scroll-view>
<view v-if="AnchorList.length === 0" class="no-data"><view class="no-data-text">暂无数据</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>
import optionsArray from "../../../../components/NationalDictionary.js";
@@ -183,6 +221,9 @@ export default {
id: "", //用户id
sendingTime: "", //发送时间
filterable: true, //是否可搜索
AnchorList: [], //主播列表
selectedId: null, //选择的主播
selectedIddata: null, //选择的主播数据
};
},
props: {
@@ -211,6 +252,57 @@ export default {
});
},
methods: {
//关闭弹窗
close() {
this.$refs.popup.close();
},
//确认选择
invite(){
if (this.selectedId) {
this.nameAnchor = this.selectedIddata.anchorId;
this.AnchorProfilePicture = this.selectedIddata.headerIcon;
this.close();
} else {
uni.showToast({
title: "请选择主播",
icon: "none",
duration: 2000,
});
}
},
//选中的主播
Select(id, item) {
if (this.selectedId !== id) {
this.selectedId = id;
this.selectedIddata = item;
} else {
this.selectedId = null;
this.selectedIddata = null;
}
},
//获取主播列表
getAnchorList() {
const res = request({
url: "anchor/list",
method: "POST",
data: {
id: this.id,
},
userInfo: true,
}).then((res) => {
this.triggered = false;
if (res.code == 200) {
this.AnchorList = res.data;
} else {
console.log(res.msg);
}
});
},
//选择我的主播
chooseMyStreamer(){
this.$refs.popup.open("center");
this.getAnchorList()
},
//性别
gender(item) {
this.genders = item.value;
@@ -444,6 +536,10 @@ export default {
width: 90%;
margin: 40rpx;
}
.AnchorSelection {
display: flex;
align-items: center;
}
.time {
width: 90%;
margin-left: 5%;
@@ -457,6 +553,18 @@ export default {
border-radius: 10rpx;
text-align: center;
}
.AnchorSelectioncss {
width: 30%;
height: 60rpx;
margin: 40rpx;
background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
color: #ffffff;
font-weight: bold;
font-size: 18rpx;
text-align: center;
line-height: 60rpx;
border-radius: 20rpx;
}
.Gender {
width: 310rpx;
display: flex;
@@ -554,4 +662,125 @@ export default {
font-weight: bold;
border-radius: 50rpx;
}
.popup-container{
width: 600rpx;
height: 800rpx;
background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chard1.png);
background-position: center;
border-radius: 10px;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
align-items: center;
}
.popup-title{
color: #161616;
font-size: 36.26rpx;
font-weight: bold;
margin-bottom: 30rpx;
margin-top: 30rpx;
}
.scroll{
width: 90%;
height: 500rpx;
}
.card{
margin-top: 15rpx;
}
.card-content {
/* width: 445rpx; */
width: 100%;
height: 100rpx;
background-color: #ffffff;
/* border: 2px solid #afafaf; */
border-radius: 10rpx;
display: flex;
align-items: center;
font-size: 28rpx;
color: rgb(127, 127, 127);
}
.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_country{
margin-top: 10rpx;
width: 400rpx;
text-align: left;
font-size: 20rpx;
color: #666;
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
}
.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;
}
.no-data{
width: 90%;
height: 500rpx;
display: flex;
justify-content: center;
align-items: center;
}
.no-data-text{
color: #999;
font-size: 28rpx;
font-weight: bold;
}
</style>

View File

@@ -19,6 +19,7 @@
</view>
<!-- <view class="Individual"> -->
<view class="AnchorSelection">
<view class="NameAnchor">
<input
class="NameAnchorcss"
@@ -27,12 +28,14 @@
@input="NameAnchor"
placeholder="主播名称"
@blur="blur"
:value="nameAnchor"
/>
<view v-if="nameAnchor === '' && Hint === true" class="Hint"
>请检查主播名称是否正确</view
>
</view>
<view class="AnchorSelectioncss" @click="chooseMyStreamer">选择我的主播</view>
</view>
<!-- </view> -->
<view class="Accountnumber">
@@ -140,6 +143,43 @@
</view>
</view>
</view>
<!-- 弹窗 -->
<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
<view class="popup-container">
<view class="popup-title">选择我的主播</view>
<scroll-view scroll-y="true" class="scroll" v-if="AnchorList.length !== 0">
<!-- -->
<view class="card" v-for="(item, index) in AnchorList" :key="index">
<view
class="card-content"
@click="Select(item.id, item)"
:style="{
background: selectedId === item.id ? '#f6f6f6' : '#ffffff',
}"
>
<view class="Avatarimg">
<image class="avatar" :src="item.headerIcon" mode="scaleToFill" />
</view>
<view class="NameMoney">
<view class="TimeMoney">
<view class="NameMoney_Name">{{ item.anchorId }}</view>
</view>
<view class="TimeMoney">
<view class="TimeMoney_country">{{ item.country }}</view>
</view>
</view>
</view>
</view>
<!-- -->
</scroll-view>
<view v-if="AnchorList.length === 0" class="no-data"><view class="no-data-text">暂无数据</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>
import optionsArray from "../../components/NationalDictionary.js";
@@ -166,6 +206,9 @@ export default {
sendingTime: "", //发送时间
filterable: true, //是否可搜索
AnchorProfilePicture: "", //主播头像
AnchorList: [], //主播列表
selectedId: null, //选择的主播
selectedIddata: null, //选择的主播数据
};
},
mounted() {
@@ -177,6 +220,57 @@ export default {
});
},
methods: {
//关闭弹窗
close() {
this.$refs.popup.close();
},
//确认选择
invite(){
if (this.selectedId) {
this.nameAnchor = this.selectedIddata.anchorId;
this.AnchorProfilePicture = this.selectedIddata.headerIcon;
this.close();
} else {
uni.showToast({
title: "请选择主播",
icon: "none",
duration: 2000,
});
}
},
//选中的主播
Select(id, item) {
if (this.selectedId !== id) {
this.selectedId = id;
this.selectedIddata = item;
} else {
this.selectedId = null;
this.selectedIddata = null;
}
},
//获取主播列表
getAnchorList() {
const res = request({
url: "anchor/list",
method: "POST",
data: {
id: this.id,
},
userInfo: true,
}).then((res) => {
this.triggered = false;
if (res.code == 200) {
this.AnchorList = res.data;
} else {
console.log(res.msg);
}
});
},
//选择我的主播
chooseMyStreamer(){
this.$refs.popup.open("center");
this.getAnchorList()
},
//性别
gender(item) {
this.genders = item.value;
@@ -447,10 +541,14 @@ export default {
margin: 40rpx;
}
.time {
width: 90%;
width: 70%;
margin-left: 5%;
margin-top: 50rpx;
}
.AnchorSelection{
display: flex;
align-items: center;
}
.NameAnchorcss {
width: 99%;
height: 85rpx;
@@ -459,6 +557,18 @@ export default {
border-radius: 10rpx;
text-align: center;
}
.AnchorSelectioncss{
width: 30%;
height: 60rpx;
margin: 40rpx;
background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
color: #ffffff;
font-weight: bold;
font-size: 18rpx;
text-align: center;
line-height: 60rpx;
border-radius: 20rpx;
}
.Gender {
width: 310rpx;
display: flex;
@@ -556,4 +666,124 @@ export default {
font-weight: bold;
border-radius: 50rpx;
}
.popup-container{
width: 600rpx;
height: 800rpx;
background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chard1.png);
background-position: center;
border-radius: 10px;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
align-items: center;
}
.popup-title{
color: #161616;
font-size: 36.26rpx;
font-weight: bold;
margin-bottom: 30rpx;
margin-top: 30rpx;
}
.scroll{
width: 90%;
height: 500rpx;
}
.card{
margin-top: 15rpx;
}
.card-content {
/* width: 445rpx; */
width: 100%;
height: 100rpx;
background-color: #ffffff;
/* border: 2px solid #afafaf; */
border-radius: 10rpx;
display: flex;
align-items: center;
font-size: 28rpx;
color: rgb(127, 127, 127);
}
.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_country{
margin-top: 10rpx;
width: 400rpx;
text-align: left;
font-size: 20rpx;
color: #666;
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
}
.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;
}
.no-data{
width: 90%;
height: 500rpx;
display: flex;
justify-content: center;
align-items: center;
}
.no-data-text{
color: #999;
font-size: 28rpx;
font-weight: bold;
}
</style>

View File

@@ -9,7 +9,11 @@
</view>
<view class="Navigation">
<view class="Return" @click="Returnfunc">
<image class="Return" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png" mode="scaleToFill" />
<image
class="Return"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
mode="scaleToFill"
/>
</view>
</view>
<view class="Content">
@@ -30,7 +34,7 @@
mode="scaleToFill"
/>
</view>
<view class="age"> {{ item.sex === '1'? '男' : '女' }} </view>
<view class="age"></view>
</view>
<view class="female" v-else>
@@ -41,7 +45,7 @@
mode="scaleToFill"
/>
</view>
<view class="age">{{ item.sex === '2' ? '男' : '女' }}</view>
<view class="age"></view>
</view>
</view>
<view class="nation">{{ item.country }}</view>
@@ -55,7 +59,7 @@
mode="scaleToFill"
/>
<view class="goldcard">
<view class="goldnumber">{{ item.coin }}</view>
<view class="goldnumber">{{ item.coin }}K</view>
<view class="goldtext">金币</view>
</view>
</view>
@@ -74,13 +78,13 @@
</view>
<view class="remark">
<uni-easyinput
type="textarea"
v-model="item.remark"
placeholder="备注"
maxlength="-1"
disabled="true"
:style="style"
></uni-easyinput>
type="textarea"
v-model="item.remark"
placeholder="备注"
maxlength="-1"
disabled="true"
:style="style"
></uni-easyinput>
</view>
<view class="button" v-if="item.senderId !== id">
<button class="accept" @click="openChat()">聊了个天</button>
@@ -90,20 +94,18 @@
</view>
<!-- 弹窗 -->
<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
<view
class="popup-content"
>
<view class="popup-content">
<view class="popup-title">
<view class="popup-text">请选择您要参与的主播</view>
<view v-if="list.length !== 0">
<scroll-view 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 ? '#f6f6f6' : '#ffffff',
background: selectedId === item.id ? '#f6f6f6' : '#ffffff',
}"
>
<view class="Avatarimg">
@@ -114,14 +116,18 @@
<view class="NameMoney_Name">{{ item.anchorId }}</view>
</view>
<view class="TimeMoney_Time">
<view class="pkTimeimg"></view><view>{{ TimeFormatting(item.pkTime) }}</view>
<viewm class="goldnb"><view class="goldimg"></view>{{ item.coin }}K</viewm>
</view>
<view class="pkTimeimg"></view
><view>{{ TimeFormatting(item.pkTime) }}</view>
<viewm class="goldnb"
><view class="goldimg"></view>{{ item.coin }}K</viewm
>
</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>
@@ -158,7 +164,7 @@ export default {
// parentMessage: null,
style: {
backgroundColor: "#ffffff",
}
},
};
},
onLoad(options) {
@@ -259,7 +265,10 @@ export default {
this.list = res.data;
} else {
uni.hideLoading();
this.openPopupQuantity();
setTimeout(() => {
this.openPopupQuantity();
this.$refs.popup.close();
}, 2000);
}
} else {
uni.hideLoading();
@@ -408,8 +417,8 @@ export default {
font-weight: bold;
font-size: 27rpx;
color: #161616;
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出内容 */
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
}
.background {
@@ -481,8 +490,8 @@ export default {
.nation {
/* width: 56.3rpx; */
height: 29.58rpx;
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出内容 */
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 显示省略号 */
font-size: 17.18rpx;
color: #666666;
@@ -564,7 +573,7 @@ export default {
flex-direction: column;
align-items: center;
}
.remark{
.remark {
margin-top: 60rpx;
width: 90%;
}
@@ -595,4 +604,11 @@ export default {
font-size: 28.63rpx;
line-height: 77.29rpx;
}
.noData{
width: 500rpx;
height: 400rpx;
border-radius: 10px;
font-size: 30rpx;
color: #999;
}
</style>