Files
tk-mini-program/pages/NewAddedPk/NewAddedPk.vue
pengxiaolong 7116e57fc3 优化
2025-07-21 22:10:59 +08:00

797 lines
19 KiB
Vue

<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="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">
<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="goldCoin">
<view class="number-box">
<view class="number-box-title">金币数量:</view>
<uni-number-box
:max="9999999999"
background="#03ABA8"
v-model="numberCoins"
></uni-number-box>
<view class="number-box-title">单位:</view>
<view class="number-box-unit">K</view>
</view>
<view v-if="numberCoins === '' && Hint === true" class="Hint"
>请填写金币数量</view
>
</view>
<view class="time">
<uni-datetime-picker
type="datetime"
hide-second="true"
v-model="datetimesingle"
/>
<view v-if="datetimesingle === '' && Hint === true" class="Hint"
>请选择日期</view
>
</view>
<view class="goldCoin">
<view class="number-box">
<view class="number-box-title">选择场数:</view>
<uni-number-box background="#03ABA8" v-model="session"></uni-number-box>
<view class="number-box-title"></view>
</view>
<view v-if="session === '' && Hint === true" class="Hint">请填写场数</view>
</view>
<view class="Remarkscss">
<uni-easyinput
type="textarea"
v-model="remarks"
placeholder="备注"
maxlength="-1"
></uni-easyinput>
</view>
<view class="Publish">
<button @click="Publish()" class="Publishcss">发布</button>
</view>
</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 show-scrollbar="false" 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 ? '#b8ff8c74' : '#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";
import request from "../../components/request.js";
export default {
data() {
return {
genders: 0, //性别
Gender: [
{ label: "男", value: 1 },
{ label: "女", value: 2 },
],
Country: optionsArray,
countrys: "", //国家
nameAnchor: "", //主播名称
numberCoins: "", //金币数量
session: "", //场数
remarks: "", //备注
Display: false,
Hint: false,
datetimesingle: "", //日期
id: null, //用户id
sendingTime: "", //发送时间
filterable: true, //是否可搜索
AnchorProfilePicture: "", //主播头像
AnchorList: [], //主播列表
selectedId: null, //选择的主播
selectedIddata: null, //选择的主播数据
};
},
mounted() {
uni.getStorage({
key: "userinfo",
success: (res) => {
this.id = res.data.id;
},
});
},
methods: {
//关闭弹窗
close() {
this.$refs.popup.close();
},
//确认选择
invite(){
if (this.selectedId) {
this.nameAnchor = this.selectedIddata.anchorId;
this.AnchorProfilePicture = this.selectedIddata.headerIcon.split("/").pop();
this.genders = this.selectedIddata.gender;
this.countrys = this.selectedIddata.country;
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;
},
//国家
country(item) {
this.countrys = item.value;
},
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.numberCoins = "";
this.remarks = "";
this.datetimesingle = "";
this.countrys = "";
this.session = "";
} 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.numberCoins === "" ||
this.countrys === "" ||
this.datetimesingle === "" ||
this.session === "" ||
this.AnchorProfilePicture === ""
) {
this.Hint = true;
return;
}
//判断备注中是否有特殊字符
if (this.remarks.includes(this.nameAnchor)) {
uni.showToast({
title: "备注中不能包含主播昵称",
icon: "none",
duration: 2000,
});
return;
}
//格式化日期
const isoString = this.datetimesingle.replace(" ", "T");
const timestamp = Date.parse(isoString);
if (isNaN(timestamp)) {
throw new Error(`Invalid date format: ${this.datetimesingle}`);
}
this.sendingTime = Math.floor(timestamp / 1000);
const secondsTimestamp = Math.floor(Date.now() / 1000);
if (this.sendingTime < secondsTimestamp) {
uni.showToast({
title: "日期不能早于当前时间",
icon: "none",
duration: 2000,
});
return;
}
//发送请求
uni.showLoading({
title: "发布中...",
mask: true,
});
const res = await request({
url: "pk/addPkData",
method: "POST",
data: {
anchorId: this.nameAnchor,
pkTime: this.sendingTime,
sex: this.genders,
country: this.countrys,
coin: this.numberCoins,
remark: this.remarks,
senderId: this.id,
anchorIcon: this.AnchorProfilePicture,
pkNumber: this.session,
},
userInfo: true,
});
if (res.code === 200) {
this.Display = false;
this.Hint = false;
this.nameAnchor = "";
this.genders = 0;
this.numberCoins = "";
this.remarks = "";
this.datetimesingle = "";
this.session = "";
this.AnchorProfilePicture = "";
uni.hideLoading();
uni.showToast({
title: "发布成功",
icon: "success",
duration: 2000,
});
this.$emit('publishSuccess');
} 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;
}
}
/* 新增关闭动画 */
@keyframes slide-out {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(-100%);
opacity: 0;
}
}
/* 进入动画类 */
.create-module {
animation: slide-in 0.3s ease-in-out;
}
/* 关闭动画类 */
.close-animation {
animation: slide-out 0.3s ease-in-out forwards;
}
.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: 1300rpx;
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;
}
.Individual {
display: flex;
/* justify-content: center; */
}
.NameAnchor {
width: 90%;
margin: 40rpx;
}
.time {
width: 90%;
margin-left: 5%;
margin-top: 50rpx;
}
.AnchorSelection{
display: flex;
align-items: center;
}
.NameAnchorcss {
width: 99%;
height: 85rpx;
background-color: #ffffff;
border: 1rpx solid #bfbfbf;
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;
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: 400rpx;
height: 65rpx;
/* display: flex; */
margin-right: 10rpx;
/* 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; */
}
.Remarkscss {
width: 90%;
margin-top: 30rpx;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 50rpx;
border-radius: 10rpx;
}
.Publish {
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;
}
.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;
}
.scroll ::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
.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>