弹窗

pages/NewAddedPk/NewAddedPk.vue

@@ -0,0 +1,201 @@
+<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>