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

优化页面

Browse Source
This commit is contained in:
pengxiaolong
2025-06-06 22:36:41 +08:00
parent f4901f1312
commit d30589fd05
99 changed files with 1091 additions and 1310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
pages/NewAddedPk/NewAddedPk.vue
View File

@@ -1,5 +1,9 @@
<template><view v-if="Display" :class="[Display ? 'create-module' : 'close-animation ', 'Mask']" @click="open()">
<template>
<view
v-if="Display"
:class="[Display ? 'create-module' : 'close-animation ', 'Mask']"
@click="open()"
>
<view @click.stop class="containers">
<view class="container">
<image
@@ -9,11 +13,11 @@
mode="scaleToFill"
/>
<view class="Titlecss">
<view class="Star"></view>
<view class="Star"></view>
<view class="Title"></view>
<view class="Star"></view>
</view>
<!-- <view class="Individual"> -->
<view class="NameAnchor">
<input
@@ -22,82 +26,81 @@
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"
style="width: 350rpx"
backgroundColor="#ffffff"
placeholderColor="#666666"
textColor="#666666"
borderColor="#ffffff"
@change="country"
:options="Country"
:filterable = "filterable"
: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="../../static/ask.png"
mode="scaleToFill"
/>
<image
v-if="genders === 1"
class="Gendericon"
src="../../static/man.png"
mode="scaleToFill"
/>
<image
v-if="genders === 2"
class="Gendericon"
src="../../static/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 background="#03ABA8" v-model="numberCoins"></uni-number-box>
<view class="number-box-title">单位:</view>
<view class="number-box-unit">K</view>
<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="../../static/ask.png"
mode="scaleToFill"
/>
<image
v-if="genders === 1"
class="Gendericon"
src="../../static/man.png"
mode="scaleToFill"
/>
<image
v-if="genders === 2"
class="Gendericon"
src="../../static/girl.png"
mode="scaleToFill"
/>
</view>
</view>
<view v-if="numberCoins === '' && Hint === true" class="Hint"
>请填写金币数量</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 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"
@@ -110,16 +113,14 @@
</view>
<!-- ···············································标记2············································ -->
<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 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"
@@ -159,6 +160,7 @@ export default {
id: null, //用户id
sendingTime: "", //发送时间
filterable: true, //是否可搜索
AnchorProfilePicture: "", //主播头像
};
},
mounted() {
@@ -191,7 +193,7 @@ export default {
this.Display = false;
this.Hint = false;
this.nameAnchor = "";
this.genders = "";
this.genders = 0;
this.numberCoins = "";
this.remarks = "";
this.datetimesingle = "";
@@ -201,19 +203,39 @@ export default {
this.Display = true;
}
},
//获取主播名称
NameAnchor: function (event) {
this.nameAnchor = event.target.value;
//获取主播名称以及头像地址
blur(event){
if(this.nameAnchor !== event.target.value){
this.nameAnchor = event.target.value;
uni.request({
url: "http://47.79.98.113:6600/"+this.nameAnchor,
success:(res)=>{
if (res.data.code === 200) {
this.AnchorProfilePicture = res.data.data;
}else {
uni.showToast({
title: "主播不存在请确认主播名称",
icon: "none",
duration: 2000,
})
}
},
fail: function (res) {
console.log("请求失败", res.data);
},
});
}else{
return;
}
},
async Publish() {
//判断是否为空
if (
this.nameAnchor === "" ||
this.genders === "" ||
this.genders === 0 ||
this.numberCoins === "" ||
this.countrys === "" ||
this.datetimesingle === ""||
this.datetimesingle === "" ||
this.session === ""
) {
this.Hint = true;
@@ -251,9 +273,8 @@ export default {
country: this.countrys,
coin: this.numberCoins,
remark: this.remarks,
status: 0,
senderId: this.id,
anchorIcon: "",
anchorIcon: this.AnchorProfilePicture,
pkNumber: this.session,
},
userInfo: true,
@@ -290,14 +311,26 @@ export default {
/* 定义动画 */
/* 原始进入动画 */
@keyframes slide-in {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
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; }
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(-100%);
opacity: 0;
}
}
/* 进入动画类 */
@@ -323,7 +356,7 @@ export default {
margin-left: 30rpx;
margin-top: 10rpx;
}
.Hintcss{
.Hintcss {
color: rgb(255, 0, 0);
font-size: 20rpx;
margin-left: 30rpx;
@@ -350,14 +383,14 @@ export default {
/* margin-bottom: 40rpx; */
margin-left: 90%;
}
.Titlecss{
.Titlecss {
width: 100%;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
}
.Star{
.Star {
width: 50rpx;
height: 50rpx;
background-image: url(../../static/star.png);
@@ -389,7 +422,7 @@ export default {
width: 99%;
height: 85rpx;
background-color: #ffffff;
border: 1rpx solid #BFBFBF;
border: 1rpx solid #bfbfbf;
border-radius: 10rpx;
text-align: center;
}
@@ -399,16 +432,16 @@ export default {
flex-direction: column;
justify-content: center;
}
.Gendercs{
.Gendercs {
display: flex;
justify-content: center;
/* align-items: center; */
}
.Gendercss{
.Gendercss {
width: 200rpx;
height: 60rpx;
}
.Gendericoncss{
.Gendericoncss {
display: flex;
justify-content: center;
align-items: center;
@@ -419,7 +452,7 @@ export default {
margin-left: 20rpx;
margin-top: 10rpx;
}
.Gendericon{
.Gendericon {
width: 40rpx;
height: 40rpx;
/* margin-top: 10rpx;
@@ -439,7 +472,7 @@ export default {
/* flex-direction: column; */
}
.country {
margin-left:10rpx;
margin-left: 10rpx;
}
.goldCoin {
width: 100%;
@@ -460,10 +493,10 @@ export default {
margin-left: 17rpx;
}
.number-box-unit {
color: #03ABA8;
color: #03aba8;
width: 48rpx;
height: 48rpx;
border: 1rpx solid #03ABA8;
border: 1rpx solid #03aba8;
border-radius: 50%;
line-height: 48rpx;
text-align: center;
@@ -484,7 +517,7 @@ export default {
margin-left: 5%;
}
.Publishcss {
background-image: linear-gradient(135deg, #4FCACD, #5FDBDE);
background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
/* color: #33ff00; */
color: #ffffff;
font-weight: bold;