优化页面
This commit is contained in:
pengxiaolong
@@ -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("获取金币数量失败")
|
||||
}
|
||||
|
||||
458
pages/Mine/minecomponents/addStreamer/addStreamer.vue
Normal file
458
pages/Mine/minecomponents/addStreamer/addStreamer.vue
Normal 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>
|
||||
359
pages/Mine/minecomponents/anchorLibrary.vue
Normal file
359
pages/Mine/minecomponents/anchorLibrary.vue
Normal 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>
|
||||
476
pages/Mine/minecomponents/modifyStreamer/modifyStreamer.vue
Normal file
476
pages/Mine/minecomponents/modifyStreamer/modifyStreamer.vue
Normal 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>
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user