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;margin-right: 3vw;" @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 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"
          @click="showPicker=true"
        />

        <van-popup
          ref="accountTypePopup"
          :lazy-render="false"
          v-model="showPicker"
          position="bottom"
        >
          <van-picker
            title="意向产品"
            show-toolbar
            :columns="productList"
            @confirm="onConfirm"
            @cancel="onCancel"
          />
        </van-popup>
      </div>

      <div class="formItem addressdiv" @click="showArea = true">
        <label>所在地区</label>
        <input class="address" type="text" placeholder="请选择" v-model="address" />
      </div>
      <img @click="sumbit" class="submit" src="../../public/images/signup/submit.png" width="45%" />
    </div>
    <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
      },
      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
      productList: [
        'COLMO子母太空舱',

        'COLMO星图干洗护理套装',

        'COLMO星辰干洗护理套装',

        'COLMO星际干洗护理套装',

        'COLMO TURING套系智慧干洗护理空间站'
      ],
      pickerVisibleProduct: false,
      address: undefined
    }
  },

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

    onCancel() {
      this.showPicker = false
    },
    getCity() {
      getCity().then((e) => {
        console.log(e)
      })
    },
    handleUser() {
      this.ischecked = true
      this.formData.role = 'user'
    },
    handleDesigner() {
      this.ischecked = false
      this.formData.role = 'designer'
    },
    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
          }
        })
        // const obj = JSON.stringify(arrNew)
        console.log(
          '🚀 ~ file: signup.vue ~ line 148 ~ sumbit ~ obj',
          this.formData
        )
        setRegister({
          areaCode: arrNew[2].areaCode,
          areaName: arrNew[2].areaName,
          name: userName,
          personType: role,
          phone: phone,
          interestTo: intendedProduct
        }).then((e) => {
          console.log(e)
        })
        this.$router.replace('/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: 82vw;
  margin: 6vw;
  padding: 3vw;
  text-align: left;
  border: 1px solid #4f5054;
  background-color: #212226;
}
.checkedImg {
  width: 16px;
  top: 2px;
  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;
}
.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;
}
.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;
}
.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;
}
.submit {
  margin: 93% 0 0 27.5vw;
}
</style>