colmo-h5/src/pages/signup.vue

<template>
  <div>
    <img class="bgi" src="../../public/images/signup/bgi.jpg" width="100%" />
    <div class="form">
      <div class="formItem">
        <label>身&nbsp;&nbsp;&nbsp;&nbsp;份</label>
        <div style="margin: 0 10vw 0 20vw; display: inline" @click="handleUser">
          <img class="checkedImg" :src="ischecked ? checked : Unchecked" />
          <label for="huey">用户</label>
        </div>
        <div style="display: inline" @click="handleDesigner">
          <img class="checkedImg" :src="ischecked ? Unchecked : checked" />
          <label for="dewey">设计师</label>
        </div>
      </div>
      <div class="formItem name">
        <label>姓&nbsp;&nbsp;&nbsp;&nbsp;名</label>
        <input
          class="userName"
          type="text"
          placeholder="请输入姓名"
          v-model="formData.userName"
        />
      </div>
      <div class="formItem phonediv">
        <label>手&nbsp;机&nbsp;号</label>
        <input
          class="phone"
          type="text"
          placeholder="请输入手机号"
          v-model="formData.phone"
        />
      </div>
      <div class="formItem phonediv">
        <label>手&nbsp;机&nbsp;号</label>
        <input
          class="phone"
          type="text"
          placeholder="请输入手机号"
          v-model="formData.phone"
        />
      </div>
      <div class="formItem intendedProductdiv">
        <label>意向产品</label>
        <input
          class="intendedProduct"
          type="text"
          placeholder="请选择"
          v-model="formData.intendedProduct"
        />
      </div>
      <div class="formItem addressdiv">
        <label>所在地区</label>
        <input
          class="address"
          type="text"
          placeholder="请选择"
          v-model="formData.address"
        />
      </div>
      <img
        @click="sumbit"
        class="submit"
        src="../../public/images/signup/submit.png"
        width="45%"
      />
    </div>
  </div>
</template>
<script>
import checked from '../../public/images/signup/checked.png'
import Unchecked from '../../public/images/signup/Unchecked.png'
export default {
  data() {
    return {
      checked,
      Unchecked,
      ischecked: true,
      formData: {
        role: 'user',
        userName: undefined,
        phone: undefined,
        intendedProduct: undefined,
        address: undefined
      },
      productList: [
        [
          {
            label: 'COLMO子母太空舱',
            value: 'COLMO子母太空舱'
          },
          {
            label: 'COLMO星图干洗护理套装',
            value: 'COLMO星图干洗护理套装'
          },
          {
            label: 'COLMO星辰干洗护理套装',
            value: 'COLMO星辰干洗护理套装'
          },
          {
            label: 'COLMO星际干洗护理套装',
            value: 'COLMO星际干洗护理套装'
          },
          {
            label: 'COLMO TURING套系智慧干洗护理空间站',
            value: 'COLMO TURING套系智慧干洗护理空间站'
          }
        ]
      ],
      pickerVisibleProduct: false
    }
  },
  methods: {
    handleUser() {
      this.ischecked = true
      this.formData.role = 'user'
    },
    handleDesigner() {
      this.ischecked = false
      this.formData.role = 'designer'
    },
    // showProduct() {
    //   this.pickerVisibleProduct = true
    // },
    // cancelProduct() {
    //   this.pickerVisibleProduct = false
    // },
    // confirmProduct(res) {
    //   this.formData.intendedProduct = res[0].label
    // },
    verification() {
      if (!this.formData.userName) {
        alert('请输入您的姓名')
        return false
      } else if (!this.formData.phone) {
        alert('请输入您的手机号')
        return false
      } else if (!this.formData.intendedProduct) {
        alert('请选择您的意向产品')
        return false
      } else if (!this.formData.address) {
        alert('请选择您所在的地区')
        return false
      } else if (!this.formData.phone.match(/^1[0-9]{10}/)) {
        alert('请输入正确的手机号哦')
        return false
      } else return true
    },
    sumbit() {
      if (this.verification()) {
        console.log(this.formData)
        this.$router.push('/resultPage')
      }
    }
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.bgi {
  z-index: -1;
  position: absolute;
}
.form {
  width: 100%;
  color: #a6b1ab;
  position: absolute;
  margin-top: 18%;
}
.formItem {
  position: absolute;
  width: 80vw;
  margin: 6vw;
  padding: 3vw;
  text-align: center;
  border: 1px solid #4f5054;
  background-color: #212226;
}
.checkedImg {
  width: 16px;
  top: 2px;
  position: relative;
}
.name {
  margin-top: 23%;
}
.userName {
  width: 80%;
  background-color: #212226;
  outline: none;
  border: none;
  color: white;
  text-align: right;
  height: 100%;
  font-size: 16px;
  color: #a6b1ab;
}
.phonediv {
  margin-top: 40%;
}
.phone {
  width: 79%;
  background-color: #212226;
  outline: none;
  border: none;
  color: white;
  text-align: right;
  height: 100%;
  font-size: 16px;
  color: #a6b1ab;
}
.intendedProductdiv {
  margin-top: 57%;
}
.intendedProduct {
  width: 77%;
  background-color: #212226;
  outline: none;
  border: none;
  color: white;
  text-align: right;
  height: 100%;
  font-size: 16px;
  color: #a6b1ab;
}
.addressdiv {
  margin-top: 74%;
}
.address {
  width: 77%;
  background-color: #212226;
  outline: none;
  border: none;
  color: white;
  text-align: right;
  height: 100%;
  font-size: 16px;
  color: #a6b1ab;
}
.submit {
  margin: 93% 0 0 27.5vw;
}
</style>