colmo-h5/src/pages/signup.vue

<template>
  <div class="signup-box">
    <img class="bgi" src="../../public/images/signup/bgi.jpg" />
    <div class="form">
      <div class="formItem">
        <label>身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份</label>
        <div style="float: right;" @click="handleDesigner">
          <img class="checkedImg" :src="ischecked ? Unchecked : checked" />
          <label for="dewey">设计师</label>
        </div>
        <div style="float: right;margin-right: 7vw;" @click="handleUser">
          <img class="checkedImg" :src="ischecked ? checked : Unchecked" />
          <label for="huey">用户</label>
        </div>
      </div>
      <div class="formItem name">
        <label>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
        <input class="duiqi" type="text" :placeholder="placeHolderName" v-model="formData.userName" @focus="nameFocus" @blur="nameBlur"/>
      </div>
      <div class="formItem phonediv">
        <label>手&nbsp;机&nbsp;号</label>
        <input class="duiqi" type="text" :placeholder="placeHolderPhone" v-model="formData.phone" @focus="phoneFocus" @blur="phoneBlur"/>
      </div>
      <div class="formItem intendedProductdiv" @click="showPicker = true">
        <label>意向产品</label>
        <div class="duiqi" :class="{grey: !intendedProduct}">{{formData.intendedProduct || "请选择"}}</div>
      </div>
      <div class="formItem addressdiv" @click="showArea = true">
        <label>所在地区</label>
        <div class="duiqi" :class="{grey: !address}">{{address || "请选择"}}</div>
      </div>
      <img @click="sumbit" class="submit" src="../../public/images/signup/submit.png" width="45%" />
    </div>
    <van-popup
      v-model="showPicker"
      position="bottom"
    >
      <van-picker
        title="意向产品"
        show-toolbar
        :columns="productList"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
    <area-picker :show.sync="showArea" @change="handleArea" @cancel='showArea=false'></area-picker>
  </div>
</template>
<script>

import { setRegister, getCity } from '../utils/api'
export default {
  components: {
    AreaPicker: () => import('@/components/AreaPicker')
  },
  data() {
    return {
      showArea: false,
      checked: `./images/signup/checked.png`,
      Unchecked: `./images/signup/Unchecked.png`,
      ischecked: true,
      showPicker: false,
      placeHolderPhone:'请输入手机号',
      placeHolderName:'请输入姓名',
      formData: {
        role: '用户',
        userName: undefined,
        phone: undefined,
        intendedProduct: undefined,
        address: undefined
      },
      productList: ['COLMO子母太空舱', 'COLMO星图干洗护理套装', 'COLMO星辰干洗护理套装', 'COLMO星际干洗护理套装', 'COLMO TURING套系智慧干洗护理空间站'],
      pickerVisibleProduct: false,
      intendedProduct: undefined,
      address: undefined
    }
  },

  mounted() {
    this.getCity()
  },
  methods: {
    onConfirm(value, index) {
      this.intendedProduct = value
      this.formData.intendedProduct = value
      this.onCancel()
    },

    onCancel() {
      this.showPicker = false
    },
    getCity() {
      getCity().then((e) => {
        console.log(e)
      })
    },
    handleUser() {
      this.ischecked = true
      this.formData.role = '用户'
    },
    handleDesigner() {
      this.ischecked = false
      this.formData.role = '设计师'
    },
    handleArea(val) {
      this.showArea = false
      this.formData.address = val
      this.address =
        this.formData.address[0].name +
        this.formData.address[1].name +
        this.formData.address[2].name
    },
    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 (!/^1[0-9]{10}$/.test(this.formData.phone)) {
        alert('请输入正确的手机号哦')
        return false
      } else return true
    },
    nameFocus() {
      this.placeHolderName=''
    },
    phoneFocus() {
      this.placeHolderPhone=''
    },
    nameBlur() {
      this.placeHolderName='请输入姓名'
    },
    phoneBlur() {
      this.placeHolderPhone='请输入手机号'
    },
    sumbit() {
      if (this.verification()) {
        const { userName, phone, intendedProduct, address, role } =
          this.formData
        let arrNew = address.map((item) => {
          return {
            areaCode: item.code,
            areaName: item.name
          }
        })
        setRegister({
          areaCode: arrNew[2].areaCode,
          areaName: arrNew[2].areaName,
          name: userName,
          personType: role,
          phone: phone,
          interestTo: intendedProduct
        }).then((e) => {
          this.$router.replace('/resultPage')
          console.log(e)
        }).catch(e => {
          alert(e.message)
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// * {
//   margin: 0;
//   padding: 0;
// }

.signup-box {
  overflow: hidden;
  height: 100%;
}

.bgi {
  width: 100%;
  position: absolute;
}
.form {
  position: relative;
  color: #a6b1ab;
  margin-top: 80px;
  padding: 0 8vw;
  box-sizing: border-box;


  .formItem {
    width: 100%;
    font-size: 16px;
    line-height: 2.6em;
    padding: 0 1em;
    border: 1px solid #4f5054;
    background-color: #212226;
    box-sizing: border-box;

    & + .formItem {
      margin-top: 1.2em;
    }

    & > label {
      display: inline-block;
      width: 4.5em;
    }
    
    .duiqi {
      display: inline-block;
      background-color: transparent;
      border: none;
      text-align: right;
      width: calc(100% - 4.5em);
      height: 2.6em;
      line-height: 2.6em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
      padding: 0;
      margin: 0;
      outline: none;
    }

    .checkedImg {
      width: 16px;
      top: 2px;
      right: 8px;
      position: relative;
    }
  }

  .grey {
    color: #696969;
  }

  .submit {
    display: block;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
  }
}
</style>