弹窗
This commit is contained in:
pengxiaolong
@@ -78,7 +78,8 @@ export default {
|
||||
position: fixed;
|
||||
top: 400rpx;
|
||||
left: 0;
|
||||
bottom: 50rpx;
|
||||
width: 100%;
|
||||
height: 1300rpx;
|
||||
/* height: 1300rpx; */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,201 +1,309 @@
|
||||
<template>
|
||||
<view v-if="Display" class="Mask" @click="open()">
|
||||
<view @click.stop>
|
||||
<view class="container" >
|
||||
<image
|
||||
class="Fork"
|
||||
@click="open()"
|
||||
src="../../static/Fork.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="Title">发布新PK</view>
|
||||
<view class="Individual">
|
||||
<view @click.stop>
|
||||
<view class="container">
|
||||
<image
|
||||
class="Fork"
|
||||
@click="open()"
|
||||
src="../../static/Fork.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="Title">发布新PK</view>
|
||||
<view class="Individual">
|
||||
<view class="NameAnchor">
|
||||
<input class="NameAnchorcss" @input="NameAnchor" placeholder="主播名称" />
|
||||
<view v-if="nameAnchor === '' && Hint === true" class="Hint"
|
||||
>请填写主播名称</view
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="NameAnchor">
|
||||
<input class="NameAnchorcss" @input="NameAnchor" placeholder="主播名称" />
|
||||
</view>
|
||||
<view class="Gender">
|
||||
<wht-select
|
||||
style="width: 300rpx"
|
||||
@change="gender"
|
||||
:options="Gender"
|
||||
placeholder="性别"
|
||||
/>
|
||||
<view v-if="genders === '' && Hint === true" class="Hint">请选择性别</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="Gender">
|
||||
<uni-combox
|
||||
class="Gendercss"
|
||||
:candidates="Gender"
|
||||
placeholder="请选择性别"
|
||||
v-model="gender"
|
||||
></uni-combox>
|
||||
</view>
|
||||
<view class="Accountnumber">
|
||||
<view class="Coins">
|
||||
<wht-select
|
||||
style="width: 300rpx"
|
||||
@change="country"
|
||||
:options="Country"
|
||||
filterable
|
||||
placeholder="请选择国家"
|
||||
/>
|
||||
<view v-if="countrys === '' && Hint === true" class="Hint">请选择国家</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="Coins">
|
||||
<view class="number-box">
|
||||
<view class="number-box-title">金币:</view>
|
||||
<uni-number-box v-model="numberCoins"></uni-number-box>
|
||||
</view>
|
||||
<view v-if="numberCoins === '' && Hint === true" class="Hint"
|
||||
>请填写金币数量</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="time">
|
||||
<uni-datetime-picker
|
||||
type="datetime"
|
||||
v-model="datetimesingle"
|
||||
@change="changeLog"
|
||||
/>
|
||||
<view v-if="datetimesingle === '' && Hint === true" class="Hint"
|
||||
>请选择日期</view
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="Accountnumber">
|
||||
<view class="Remarkscss">
|
||||
<uni-easyinput
|
||||
type="textarea"
|
||||
v-model="remarks"
|
||||
placeholder="备注"
|
||||
></uni-easyinput>
|
||||
</view>
|
||||
|
||||
<wht-select v-model="country" :options="options" placeholder="请选择国家" />
|
||||
|
||||
|
||||
<view class="Coins">
|
||||
<uni-number-box class="number-box" v-model="numberCoins"></uni-number-box>
|
||||
<view class="Publish">
|
||||
<button @click="Publish()" class="Publishcss">发布</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="Remarkscss" >
|
||||
<uni-easyinput type="textarea" v-model="remarks" placeholder="备注"></uni-easyinput>
|
||||
</view>
|
||||
|
||||
<view class="Publish">
|
||||
<button @click="Publish()" class="Publishcss">发布</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import countryNamesArray from "../../components/NationalDictionary.js"
|
||||
|
||||
import optionsArray from "../../components/NationalDictionary.js";
|
||||
import request from "../../components/request.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
gender: "",
|
||||
Gender: ["男", "女"],
|
||||
Country:countryNamesArray,
|
||||
country: "",
|
||||
nameAnchor: "",
|
||||
numberCoins: "",
|
||||
remarks: "",
|
||||
genders: "", //性别
|
||||
Gender: [
|
||||
{ label: "男", value: 1 },
|
||||
{ label: "女", value: 2 },
|
||||
],
|
||||
Country: optionsArray,
|
||||
countrys: "", //国家
|
||||
nameAnchor: "", //主播名称
|
||||
numberCoins: "", //金币数量
|
||||
remarks: "", //备注
|
||||
Display: false,
|
||||
options: [
|
||||
{ label: '选项一', value: '1' },
|
||||
{ label: '选项二', value: '2' },
|
||||
{ label: '选项三', value: '3' }
|
||||
]
|
||||
Hint: false,
|
||||
datetimesingle: "",//日期
|
||||
id: null, //用户id
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
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;
|
||||
} else {
|
||||
this.Display = true;
|
||||
}
|
||||
open() {
|
||||
if (this.Display) {
|
||||
this.Display = false;
|
||||
this.Hint = false;
|
||||
this.nameAnchor = "";
|
||||
this.genders = "";
|
||||
this.numberCoins = "";
|
||||
this.remarks = "";
|
||||
this.datetimesingle = "";
|
||||
this.countrys = "";
|
||||
} else {
|
||||
this.Display = true;
|
||||
}
|
||||
},
|
||||
//获取主播名称
|
||||
NameAnchor: function (event) {
|
||||
this.nameAnchor = event.target.value;
|
||||
},
|
||||
|
||||
Publish(){
|
||||
console.log( this.nameAnchor, this.gender,this.country, this.numberCoins, this.remarks);
|
||||
}
|
||||
|
||||
async Publish() {
|
||||
//判断是否为空
|
||||
if (
|
||||
this.nameAnchor === "" ||
|
||||
this.genders === "" ||
|
||||
this.numberCoins === "" ||
|
||||
this.countrys === "" ||
|
||||
this.datetimesingle === ""
|
||||
) {
|
||||
this.Hint = true;
|
||||
return;
|
||||
}
|
||||
//格式化日期
|
||||
const isoString = this.datetimesingle.replace(" ", "T");
|
||||
const timestamp = Date.parse(isoString);
|
||||
if (isNaN(timestamp)) {
|
||||
throw new Error(`Invalid date format: ${this.datetimesingle}`);
|
||||
}
|
||||
this.datetimesingle = Math.floor(timestamp / 1000);
|
||||
//发送请求
|
||||
uni.showLoading({
|
||||
title: "发布中...",
|
||||
mask: true,
|
||||
});
|
||||
const res = await request({
|
||||
url: "pk/addPkData",
|
||||
method: "POST",
|
||||
data: {
|
||||
anchorId: this.nameAnchor,
|
||||
pk_time: this.datetimesingle,
|
||||
sex: this.genders,
|
||||
country: this.countrys,
|
||||
coin: this.numberCoins,
|
||||
remark: this.remarks,
|
||||
status: 0,
|
||||
sender_id: this.id,
|
||||
anchorIcon: "",
|
||||
},
|
||||
userInfo: true,
|
||||
});
|
||||
if (res.code === 200) {
|
||||
this.Display = false;
|
||||
this.Hint = false;
|
||||
this.nameAnchor = "";
|
||||
this.genders = "";
|
||||
this.numberCoins = "";
|
||||
this.remarks = "";
|
||||
this.datetimesingle = "";
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: "发布成功",
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: "发布失败",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.Mask{
|
||||
.Mask {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #00000076;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.Hint {
|
||||
color: red;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 900rpx;
|
||||
height: 100%;
|
||||
}
|
||||
.Fork{
|
||||
.Fork {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-top: 20rpx;
|
||||
/* margin-bottom: 40rpx; */
|
||||
margin-left: 90%;
|
||||
}
|
||||
.Title{
|
||||
width: 100%;
|
||||
height: 30rpx;
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
.Title {
|
||||
width: 100%;
|
||||
height: 30rpx;
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
.Individual{
|
||||
display: flex;
|
||||
/* justify-content: center; */
|
||||
.Individual {
|
||||
display: flex;
|
||||
/* justify-content: center; */
|
||||
}
|
||||
.NameAnchor{
|
||||
.NameAnchor {
|
||||
margin: 40rpx;
|
||||
}
|
||||
.NameAnchorcss{
|
||||
width: 300rpx;
|
||||
height: 85rpx;
|
||||
border: 1rpx solid #ccc;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
.time {
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
.Gender{
|
||||
.NameAnchorcss {
|
||||
width: 300rpx;
|
||||
height: 85rpx;
|
||||
border: 1rpx solid #ccc;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.Gender {
|
||||
width: 300rpx;
|
||||
height: 80rpx;
|
||||
margin: 40rpx;
|
||||
}
|
||||
.Gendercss{
|
||||
width: 300rpx;
|
||||
height: 80rpx;
|
||||
text-align: center;
|
||||
.Accountnumber {
|
||||
display: flex;
|
||||
}
|
||||
.Accountnumber{
|
||||
display: flex;
|
||||
}
|
||||
.Country{
|
||||
|
||||
}
|
||||
.Countrycss{
|
||||
margin: 40rpx;
|
||||
width: 300rpx;
|
||||
height: 65rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.Coins{
|
||||
.Coins {
|
||||
margin: 40rpx;
|
||||
width: 300rpx;
|
||||
height: 65rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* align-items: center; */
|
||||
}
|
||||
.number-box {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
.Remarkscss{
|
||||
width: 90%;
|
||||
margin-top: 30rpx;
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
margin-bottom: 50rpx;
|
||||
border-radius: 10rpx;
|
||||
.number-box-title {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.Publish{
|
||||
.Remarkscss {
|
||||
width: 90%;
|
||||
margin-top: 30rpx;
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
margin-bottom: 50rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.Publish {
|
||||
margin-bottom: 50rpx;
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
.Publishcss{
|
||||
background-color: #0048ff94;
|
||||
.Publishcss {
|
||||
background-color: #0048ff94;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user