202 lines
3.6 KiB
Vue
202 lines
3.6 KiB
Vue
<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 class="NameAnchor">
|
|
<input class="NameAnchorcss" @input="NameAnchor" placeholder="主播名称" />
|
|
</view>
|
|
|
|
<view class="Gender">
|
|
<uni-combox
|
|
class="Gendercss"
|
|
:candidates="Gender"
|
|
placeholder="请选择性别"
|
|
v-model="gender"
|
|
></uni-combox>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
<view class="Accountnumber">
|
|
|
|
<wht-select v-model="country" :options="options" placeholder="请选择国家" />
|
|
|
|
|
|
<view class="Coins">
|
|
<uni-number-box class="number-box" v-model="numberCoins"></uni-number-box>
|
|
</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"
|
|
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
gender: "",
|
|
Gender: ["男", "女"],
|
|
Country:countryNamesArray,
|
|
country: "",
|
|
nameAnchor: "",
|
|
numberCoins: "",
|
|
remarks: "",
|
|
Display: false,
|
|
options: [
|
|
{ label: '选项一', value: '1' },
|
|
{ label: '选项二', value: '2' },
|
|
{ label: '选项三', value: '3' }
|
|
]
|
|
};
|
|
},
|
|
onLoad() {
|
|
uni.getStorage({
|
|
key: "userinfo",
|
|
success: (res) => {
|
|
|
|
},
|
|
});
|
|
},
|
|
methods: {
|
|
handleOverlayClick(event) {
|
|
if (event.target === this.$el) {
|
|
this.Display = false;
|
|
}
|
|
},
|
|
open(){
|
|
if (this.Display) {
|
|
this.Display = false;
|
|
} 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);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.Mask{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: #00000076;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
background-color: #fff;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 900rpx;
|
|
}
|
|
.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;
|
|
}
|
|
.Individual{
|
|
display: flex;
|
|
/* justify-content: center; */
|
|
}
|
|
.NameAnchor{
|
|
margin: 40rpx;
|
|
}
|
|
.NameAnchorcss{
|
|
width: 300rpx;
|
|
height: 85rpx;
|
|
border: 1rpx solid #ccc;
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
}
|
|
.Gender{
|
|
margin: 40rpx;
|
|
}
|
|
.Gendercss{
|
|
width: 300rpx;
|
|
height: 80rpx;
|
|
text-align: center;
|
|
}
|
|
.Accountnumber{
|
|
display: flex;
|
|
}
|
|
.Country{
|
|
|
|
}
|
|
.Countrycss{
|
|
margin: 40rpx;
|
|
width: 300rpx;
|
|
height: 65rpx;
|
|
text-align: center;
|
|
}
|
|
.Coins{
|
|
margin: 40rpx;
|
|
width: 300rpx;
|
|
height: 65rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.number-box {
|
|
text-align: center;
|
|
}
|
|
.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;
|
|
}
|
|
</style>
|