warm_man/pages/Join/index.vue

<template>
  <view class="body-background"></view>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#ffffff"
  ></u-navbar>
  <view class="app-wallpaper">
    <u-row :custom-style="{
      backgroundColor:'#fff',
      borderRadius:'10rpx',
      alignItems:'flex-start'
    }">
      <u-col :custom-style="{padding:'30rpx 40rpx',height:size.height+'px'}">
        <u-form
            errorType="toast"
            labelPosition="left"
            :model="model"
            :rules="rules"
            ref="userInfo"
            labelWidth="200rpx"
        >
          <u-form-item
              :custom-style="{
                  padding:'34rpx 0'
              }"
              label="姓名"
              prop="userInfo.name"
              borderBottom

          >
            <u-input
                type="nickname"
                fontSize="28"
                placeholder="请填写您的真实姓名"
                v-model="model.userInfo.name"
                border="none"
            ></u-input>
          </u-form-item>
          <u-form-item
              :custom-style="{
                  padding:'36rpx 0'
              }"
              label="性别"
              prop="userInfo.sex"
              borderBottom
          >
            <u-radio-group
                v-model="model.userInfo.sex"
                placement="row"
            >
              <u-radio
                  size="32"
                  labelSize="32"
                  icon-size="24"
                  activeColor="#FF9545"
                  :customStyle="{marginRight: '40px'}"
                  v-for="(item, index) in sexList"
                  :key="index"
                  :label="item.name"
                  :name="item.id"
              >
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item
              :custom-style="{
                  padding:'36rpx 0'
              }"
              label="年龄"
              prop="userInfo.age"
              borderBottom
          >
            <u-input
                fontSize="28"
                placeholder="请输入"
                v-model="model.userInfo.age"
                border="none"
            ></u-input>
          </u-form-item>
          <u-form-item
              :custom-style="{
                  padding:'34rpx 0'
              }"
              label="手机号码"
              prop="userInfo.phone"
              borderBottom

          >
            <u-input
                fontSize="28"
                placeholder="请输入"
                v-model="model.userInfo.phone"
                border="none"
            ></u-input>
          </u-form-item>
          <u-form-item
              :custom-style="{
                  padding:'34rpx 0'
              }"
              label="现住地"
              prop="userInfo.address"
              borderBottom

          >
            <u-input
                fontSize="28"
                placeholder="请输入"
                v-model="model.userInfo.address"
                border="none"
            ></u-input>
          </u-form-item>

        </u-form>
        <view class="tips">
          <view class="title">
            <u-text text="报名须知" color="#020B18" size="28"></u-text>
          </view>
          <view class="content">
            <view class="item">
              <u-text text="1.这里是报名须知这里是报名须知" color="#90A0AF" size="28" line-height="54"></u-text>
            </view>
            <view class="item">
              <u-text text="2.这里是报名须知这里是报名须知" color="#90A0AF" size="28" line-height="54"></u-text>
            </view>
            <view class="item">
              <u-text text="3.这里是报名须知这里是报名须知" color="#90A0AF" size="28" line-height="54"></u-text>
            </view>
          </view>
        </view>
      </u-col>
    </u-row>
  </view>
  <view class="foot-button border-box">
    <u-button
        type="primary"
        text="立即报名"
        shape="circle"
        :custom-style="{
              color:'#020B18',
              backgroundColor:'#FF9545',
              border:'none',
              fontSize:'36',
              fontWeight:'400',
              height:'80rpx'
            }"
        @click="submit"
    ></u-button>
  </view>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import MzSubsection from '@/components/MzSubsection/Index.vue';
import api from '@/utils/functions.js';
import {userDetail} from "@/api/user";
import { userJoin} from "@/api/other";

export default {
  components: {
    MzSubsection
  },
  data() {
    return {
      companyTip: [],
      tipShow: false,
      tips: [],
      model: {
        userInfo: {
          relevancy_type:1,
          relevancy_id:1,
          user_type:1,
          name: '',
          phone: '',
          sex: 1,
          age: '',
          address: '',
        },
      },
      sexList: [
        {
          id: 1,
          name: '男',
        },
        {
          id: 2,
          name: '女',
        },
      ],
      current: 1,
      title: '立即报名',
      loading: true,
      staticImage: {
        bg: imghost + '/BG.png',
        newIcon: imghost + '/new-icon.png',
      },
      size: {
        height: 500,
      },
      streetList: [],
      communityList: [],
      positionList: [],
    }
  },
  onLoad(option) {
    this.model.userInfo.relevancy_type = option.relevancy_type || 1;
    this.model.userInfo.user_type = option.user_type ||1;
    this.model.userInfo.relevancy_id = option.id;
  },
  onReady() {
    let that = this;
    let height = api.wxSystemInfo().system.windowHeight;
    let headerHeight = uni.getStorageSync('sysInfo').sysAndMenuHeight;

    let info = uni.createSelectorQuery().in(this).select('.foot-button');
    info.boundingClientRect(function (data) {
      that.size.height = that.size.height = height - headerHeight - data.height - uni.$u.getPx('40rpx');
    }).exec(function (res) {

    });
  },
  computed: {
    api() {
      return api
    },
    sectionStyle() {
      const style = {};
      style.padding = '0 26rpx';
      style.position = 'sticky';
      style.zIndex = '9999';
      style.top = api.navHeight().systemBarHeight + 'px'
      return style;
    },
    listHeight() {
      let that = this;
      let height;
      let info = uni.createSelectorQuery().in(this).select('.subsection');
      info.boundingClientRect(function (data) {
        that.size.height = data.height;
      }).exec(function (res) {

      });
      // that.size.height = (api.navHeight().windowHeight - height);
    }
  },
  mounted() {
    this.initForm();
  },
  methods: {
    initForm() {
      let user = {};
      if (uni.getStorageSync('user')) {
          user = uni.getStorageSync('user');
      } else {
        userDetail().then((res) => {
          user = res.data;
        })
      }
      this.model.userInfo.name = user.name;
      this.model.userInfo.phone = user.phone;
    },
    submit() {
      // this.$refs.userInfo.validate().then(res => {
        userJoin(this.model.userInfo).then((res) => {
          if (res.code === 200) {
            uni.$u.toast('报名成功')
            // userDetail().then((res) => {
            //   uni.setStorageSync('user', res.data);
            //   this.$store.commit('userInfo', res.data);
              uni.navigateBack({delta: 1})
            // });
          } else {
            uni.$u.toast(res.msg)
          }
        })
      // }).catch(errors => {
      //   uni.$u.toast(errors[0].message)
      // })
    },
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }
  },
  created() {

  },

}
</script>

<style lang="scss">
@import './components/index.scss';
</style>