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;&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="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 intendedProductdiv" @click="showPicker = true">
        <label>意向产品</label>
        <div class="intendedProduct" :class="{grey: !address}">{{formData.intendedProduct || "请选择"}}</div>
      </div>

      <div class="formItem addressdiv" @click="showArea = true">
        <label>所在地区</label>
        <div class="address" :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,
      formData: {
        role: 'user',
        userName: undefined,
        phone: undefined,
        intendedProduct: undefined,
        address: undefined
      },
      productList: ['COLMO子母太空舱', 'COLMO星图干洗护理套装', 'COLMO星辰干洗护理套装', 'COLMO星际干洗护理套装', 'COLMO TURING套系智慧干洗护理空间站'],
      pickerVisibleProduct: false,
      address: undefined
    }
  },

  mounted() {
    this.getCity()
  },
  methods: {
    onConfirm(value, index) {
      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 (!this.formData.phone.match(/^1[0-9]{10}/)) {
        alert('请输入正确的手机号哦')
        return false
      } else return true
    },
    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 scoped>
* {
  margin: 0;
  padding: 0;
}
.bgi {
  z-index: 1;
  position: absolute;
}
.form {
  width: 100%;
  color: #a6b1ab;
  position: absolute;
  margin-top: 18%;
  z-index: 2;
}
.formItem {
  position: absolute;
  width: 82vw;
  margin: 6vw;
  padding: 3vw;
  text-align: left;
  border: 1px solid #4f5054;
  background-color: #212226;
}
.checkedImg {
  width: 16px;
  top: 2px;
  right: 8px;
  position: relative;
}
.name {
  margin-top: 23%;
}
.userName {
  width: 74%;
  background-color: #212226;
  outline: none;
  border: none;
  color: white;
  text-align: right;
  height: 100%;
  font-size: 16px;
  color: #a6b1ab;
  float: right;
}
.phonediv {
  margin-top: 40%;
}
.phone {
  width: 74%;
  background-color: #212226;
  outline: none;
  border: none;
  color: white;
  text-align: right;
  height: 100%;
  font-size: 16px;
  color: #a6b1ab;
  float: right;
}
.intendedProductdiv {
  margin-top: 57%;
}
.intendedProduct {
  width: 73%;
  background-color: #212226;
  outline: none;
  border: none;
  color: white;
  text-align: right;
  height: 100%;
  font-size: 16px;
  color: #a6b1ab;
  float: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}
.addressdiv {
  margin-top: 74%;
}
.address {
  width: 72%;
  background-color: #212226;
  outline: none;
  border: none;
  color: white;
  text-align: right;
  height: 100%;
  font-size: 16px;
  color: #a6b1ab;
  float: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
}

.grey {
  color: #696f69;
}

.submit {
  margin: 93% 0 0 27.5vw;
}
</style>