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-11 22:16:44 +08:00
parent 3c2d7e5959
commit 931d867c09
806 changed files with 87462 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
pages/Mine/minecomponents/recompose/recompose.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
@@ -24,105 +28,121 @@
placeholder="主播名称"
:value="nameAnchor"
/>
<view v-if="nameAnchor === ''|| nameAnchor === null && Hint === true" class="Hint"
<view
v-if="nameAnchor === '' || (nameAnchor === null && 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="请选择国家"
:value="countrys"
/>
<view v-if="countrys === ''|| countrys===null && 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="message.sex === '1'?1:2"
/>
</view>
<view class="Gendericoncss">
<image
v-if="genders === 0 || message.sex === '0'"
class="Gendericon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/ask.png"
mode="scaleToFill"
/>
<image
v-if="genders === 1||message.sex === '1'"
class="Gendericon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/man.png"
mode="scaleToFill"
/>
<image
v-if="genders === 2||message.sex === '2'"
class="Gendericon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/girl.png"
mode="scaleToFill"
/>
</view>
</view>
<view v-if="genders === 0 || genders===null && 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 === ''|| numberCoins === null && Hint === true" class="Hint"
>请填写金币数量</view
<view
v-if="countrys === '' || (countrys === null && 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="message.sex === '1' ? 1 : 2"
/>
</view>
<view class="Gendericoncss">
<image
v-if="genders === 0 || message.sex === '0'"
class="Gendericon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/ask.png"
mode="scaleToFill"
/>
<image
v-if="genders === 1 || message.sex === '1'"
class="Gendericon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/man.png"
mode="scaleToFill"
/>
<image
v-if="genders === 2 || message.sex === '2'"
class="Gendericon"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/girl.png"
mode="scaleToFill"
/>
</view>
</view>
<view
v-if="genders === 0 || (genders === null && 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 === '' || (numberCoins === null && Hint === true)"
class="Hint"
>请填写金币数量</view
>
</view>
<view class="time">
<uni-datetime-picker
type="datetime"
hide-second="true"
v-model="datetimesingle"
/>
<view v-if="datetimesingle === ''|| datetimesingle === null && Hint === true" class="Hint"
<view
v-if="datetimesingle === '' || (datetimesingle === null && Hint === true)"
class="Hint"
>请选择日期</view
>
</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 === ''|| session === null && 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 === '' || (session === null && Hint === true)" class="Hint"
>请填写场数</view
>
</view>
<!-- ··························································································· -->
<view class="Remarkscss">
<uni-easyinput
type="textarea"
@@ -139,12 +159,10 @@
</view>
</template>
<script>
import optionsArray from "../../../../components/NationalDictionary.js";
import request from "../../../../components/request.js";
import formatDate from "../../../../components/formatDate.js";
export default {
data() {
return {
@@ -157,20 +175,20 @@ export default {
countrys: "", //国家
nameAnchor: "", //主播名称
numberCoins: "", //金币数量
session: '', //场数
remarks: '', //备注
session: "", //场数
remarks: "", //备注
Display: false,
Hint: false,
datetimesingle: '', //日期
datetimesingle: "", //日期
id: "", //用户id
sendingTime: "", //发送时间
filterable: true, //是否可搜索
};
},
props: {
message:{
message: {
type: Object,
}
},
},
watch: {
message(newQuestion, oldQuestion) {
@@ -182,7 +200,7 @@ export default {
this.nameAnchor = newQuestion.anchorId;
this.countrys = newQuestion.country;
this.genders = newQuestion.sex === "1" ? 1 : 2;
}
},
},
mounted() {
uni.getStorage({
@@ -233,17 +251,26 @@ export default {
async Publish() {
//判断是否为空
if (
this.nameAnchor == "" && this.nameAnchor == null ||
this.genders == 0 && this.genders == null ||
this.numberCoins =="" && this.numberCoins == null ||
this.datetimesingle == "" && this.datetimesingle == null ||
this.countrys == "" && his.countrys == null ||
this.datetimesingle == "" && this.datetimesingle == null ||
this.session == "" && this.session == null
(this.nameAnchor == "" && this.nameAnchor == null) ||
(this.genders == 0 && this.genders == null) ||
(this.numberCoins == "" && this.numberCoins == null) ||
(this.datetimesingle == "" && this.datetimesingle == null) ||
(this.countrys == "" && his.countrys == null) ||
(this.datetimesingle == "" && this.datetimesingle == null) ||
(this.session == "" && this.session == null)
) {
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);
@@ -315,14 +342,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;
}
}
/* 进入动画类 */
@@ -348,7 +387,7 @@ export default {
margin-left: 30rpx;
margin-top: 10rpx;
}
.Hintcss{
.Hintcss {
color: rgb(255, 0, 0);
font-size: 20rpx;
margin-left: 30rpx;
@@ -375,14 +414,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(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/star.png);
@@ -414,7 +453,7 @@ export default {
width: 99%;
height: 85rpx;
background-color: #ffffff;
border: 1rpx solid #BFBFBF;
border: 1rpx solid #bfbfbf;
border-radius: 10rpx;
text-align: center;
}
@@ -424,16 +463,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;
@@ -444,7 +483,7 @@ export default {
margin-left: 20rpx;
margin-top: 10rpx;
}
.Gendericon{
.Gendericon {
width: 40rpx;
height: 40rpx;
/* margin-top: 10rpx;
@@ -464,7 +503,7 @@ export default {
/* flex-direction: column; */
}
.country {
margin-left:10rpx;
margin-left: 10rpx;
}
.goldCoin {
width: 100%;
@@ -485,10 +524,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;
@@ -509,7 +548,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;