lishan

src/views/file.vue

@@ -11,35 +11,53 @@
           :path="require('@/assets/icons/search.png')"                                                                                                                                                                                                                                                                                 
         />
       </template> -->
-      <div class="px-4 space-y-6 pt-14">
+      <div class="px-4 pt-14 ">
         <!-- 姓名/职位 -->          
-        <van-cell-group >    
-          <van-field label="真实姓名"  :required="true" :value="remnant1+'/10'"  input-align="right" disabled />                            
-          <van-field type="text"  @input ="descInput1" v-model="desc1" maxlength=10 placeholder="请在这里输入你的真实姓名" />
-        </van-cell-group>
-          <van-cell-group>              
-            <van-field label="职位" :value="remnant2+'/10'"  input-align="right" disabled class="h-30pt"/>
-            <van-field type="text" @input ="descInput2" v-model="desc2" maxlength=10 placeholder="请在这里输入你的职位"/>
-          </van-cell-group>
-        <van-cell-group >    
-          <!-- 手机号/员工编号/入职时间-->
-          <van-field dot label="手机号" v-model="tel" type="tel" input-align="right"  placeholder="请输入手机号"/>
-          <van-field  label="员工编号" v-model="digit" type="digit" input-align="right"  placeholder="请输入员工编号"/>
-          <van-field  label="入职时间" v-model="date" :value="date" 
-                      input-align="right" @click="show = true" 
-                      :right-icon="require('@/assets/icons/dot.png')" placeholder="请选择入职时间"/>              
+        <input-cell
+          v-model="name"
+          required
+          :limit="10"
+          label="真实姓名"
+          placeholder="请输入姓名"
+          error-msg="姓名不能为空"
+        />
+        <input-cell
+          v-model="position"
+          :limit="10"
+          label="职位"
+          placeholder="请输入职位"
+          class="mt-4"
+        />                    
+        <!-- 手机号/员工编号/入职时间  -->    
+        <c-cell
+          title="手机号"
+          v-model="tel"
+          :content="tel"
+          class="mt-4"
+        />
+        <c-cell
+          title="员工编号"
+          v-model="digit"
+          :content="digit"
+        />
+        <c-cell
+          dot
+          v-model="date"
+          title="入职时间"
+          :content="date"
+          @click="show = true"
+        />
         <van-calendar  v-model="show" :round="false" @confirm="onConfirm" :show-confirm="false" :style="{ height:'100%'}" />  
-        </van-cell-group>
-        <van-cell-group >             
-          <van-field label="所属部门" :right-icon="require('@/assets/icons/dot.png')" disabled class="h-100pt "/>
-          <van-field placeholder="请选择总部门"/>
-          <van-field placeholder="请选择子部门"/>         
-        </van-cell-group>
+        <!-- 选择部门 --> 
+        <group-cell class="mt-4" title="所属部门">
+          <c-cell title="产品设计部(主要部门)" />
+          <c-cell title="设计部(子部门)" />
+        </group-cell>
+        <!--按钮--> 
         <c-button
-        
           round         
+          class="mt-10"
           buttonBg="bg-color-primary"
-          class="mt-16 "         
           @click="$router.push('/two-code')"
         >
           生成邀请二维码
@@ -52,40 +70,28 @@
 <script lang="ts">
 
 import Vue from 'vue'
-
-import { Field, Toast } from 'vant';
 import { Calendar } from 'vant';
-import { Popup } from 'vant';
-import { Icon } from 'vant';
-import { Cell, CellGroup } from 'vant';
-
-Vue.use(Cell);
-Vue.use(CellGroup);
-Vue.use(Icon);
-Vue.use(Popup);
 Vue.use(Calendar);
-Vue.use(Field);
-
 export default Vue.extend({  
   name: 'File',
   components: {
     'main-page': () => import('@/layout/main-page.vue'),
-    'c-button': () => import('./components/c-button.vue')
+    'input-cell': () => import('./components/input-cell.vue'),
+    'c-cell': () => import('./components/c-cell.vue'),
+    'c-button': () => import('./components/c-button.vue'),
+    'group-cell': () => import('./components/group-cell.vue')
   },
   created() {
     // console.log(Mock, 'mock')
   },
   data() {
     return {
-      realname: '',//姓名
-      remnant1:0,//字数
-      desc1:'',
-      remnant2:0,//字数
-      desc2:'',
-      job:'',//职位
-      tel: '',//电话号码     
-      digit: '',//员工编号  
-      date: '',//入职时间
+      name: '',//姓名
+      position:'',
+      
+      tel: '请输入电话号码',//电话号码     
+      digit: '请输入员工编号',//员工编号  
+      date: '请选择入职时间',//入职时间
       show:false,//日期弹窗    
     }
   },
@@ -93,16 +99,6 @@ export default Vue.extend({
     handleClickLeft() {
       this.$router.go(-1)
     },
-    descInput1(){
-    //获取字数
-      var txtVal1 = this.desc1.length;
-      this.remnant1 = txtVal1;
-    },
-    descInput2(){
-    //获取字数
-      var txtVal2 = this.desc2.length;
-      this.remnant2 = txtVal2;
-    },
     formatDate(date:Date) {
       //获取日期
       return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;