tk-mini-program/pages/NewAddedPk/NewAddedPk.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 v-if="nameAnchor === '' && Hint === true" class="Hint"
              >请填写主播名称</view
            >
          </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="Accountnumber">
          <view class="Coins country">
            <wht-select
              style="width: 300rpx"
              @change="country"
              :options="Country"
              filterable
              placeholder="请选择国家"
            />
            <view v-if="countrys === '' && Hint === true" class="Hint">请选择国家</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 class="number-box-unit">K</view>
            </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="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 optionsArray from "../../components/NationalDictionary.js";
import request from "../../components/request.js";

export default {
  data() {
    return {
      genders: "", //性别
      Gender: [
        { label: "男", value: 1 },
        { label: "女", value: 2 },
      ],
      Country: optionsArray,
      countrys: "", //国家
      nameAnchor: "", //主播名称
      numberCoins: "", //金币数量
      remarks: "", //备注
      Display: false,
      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;
        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;
    },

    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 {
  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: 100%;
}
.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;
}
.time {
  width: 90%;
  margin-left: 5%;
}
.NameAnchorcss {
  width: 300rpx;
  height: 85rpx;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  text-align: center;
}
.Gender {
  width: 300rpx;
  height: 80rpx;
  margin: 40rpx;
}
.Accountnumber {
  display: flex;
}
.Coins {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  width: 400rpx;
  height: 65rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
}
.country{
  margin-left: 40rpx;
}
.number-box {
  display: flex;
  text-align: center;
}
.number-box-title {
  margin-right: 20rpx;
}
.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>