Merge branch 'master' of http://git.ycjcjy.com/dianyang/colmo-h5

src/pages/signup.vue

@@ -15,11 +15,11 @@
       </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"/>
+        <input class="duiqi" type="text" :class="{placeHodler: userName}" 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"/>
+        <input class="duiqi" type="text" :class="{placeHodler: phone}" v-model="formData.phone" @focus="phoneFocus" @blur="phoneBlur"/>
       </div>
       <div class="formItem intendedProductdiv" @click="showPicker = true">
         <label>意向产品</label>
@@ -60,19 +60,19 @@ export default {
       Unchecked: `./images/signup/Unchecked.png`,
       ischecked: true,
       showPicker: false,
-      placeHolderPhone:'请输入手机号',
-      placeHolderName:'请输入姓名',
       formData: {
         role: '用户',
         userName: undefined,
-        phone: undefined,
+        phone: '请输入手机号',
         intendedProduct: undefined,
         address: undefined
       },
       productList: ['COLMO子母太空舱', 'COLMO星图干洗护理套装', 'COLMO星辰干洗护理套装', 'COLMO星际干洗护理套装', 'COLMO TURING套系智慧干洗护理空间站'],
       pickerVisibleProduct: false,
       intendedProduct: undefined,
-      address: undefined
+      address: undefined,
+      phone:true,
+      userName:true
     }
   },
 
@@ -114,7 +114,7 @@ export default {
       if (!this.formData.userName) {
         alert('请输入您的姓名')
         return false
-      } else if (!this.formData.phone) {
+      } else if (!this.formData.phone || this.formData.phone==='请输入手机号') {
         alert('请输入您的手机号')
         return false
       } else if (!this.formData.intendedProduct) {
@@ -129,16 +129,28 @@ export default {
       } else return true
     },
     nameFocus() {
-      this.placeHolderName=''
+      if (this.formData.userName === '请输入您的姓名') {
+        this.userName = false
+        this.formData.userName = ''
+      }
     },
     phoneFocus() {
-      this.placeHolderPhone=''
+      if (this.formData.phone === '请输入手机号') {
+        this.phone = false
+        this.formData.phone = ''
+      }
     },
     nameBlur() {
-      this.placeHolderName='请输入姓名'
+      if (this.formData.userName === '') {
+        this.userName = true
+        this.formData.userName = '请输入您的姓名'
+      }
     },
     phoneBlur() {
-      this.placeHolderPhone='请输入手机号'
+      if (this.formData.phone === '') {
+        this.phone = true
+        this.formData.phone = '请输入手机号'
+      }
     },
     sumbit() {
       if (this.verification()) {
@@ -234,6 +246,10 @@ export default {
     }
   }
 
+  .placeHodler {
+    color: #696f6e !important;
+  }
+
   .grey {
     color: #696969;
   }