接入登陆/客户详情/修改客户信息接口

src/api/customer.js

+// import apis from './apis'
+import req from './request'
+// import qs from 'qs'
+// import utils from '@/utils/index.js'
+
+let api = {}
+// 体检客户详情
+api.getCustomerDetail = function (data) {
+  return req.post('/api/mn/mobile/getCustomerDetail', data)
+}
+// 修改客户信息
+api.improveInformation = function (data) {
+  return req.post('/api/mn/mobile/improveInformation', data)
+}
+export default api

src/utils/options.js

+export default {
+  idType: [
+    {
+      name: '身份证',
+      value: '1',
+    },
+    {
+      name: '护照',
+      value: '2',
+    },
+    {
+      name: '军人证',
+      value: '3',
+    },
+    {
+      name: '港澳通行证',
+      value: '4',
+    },
+    {
+      name: '驾驶证',
+      value: '5',
+    },
+    {
+      name: '港澳回乡证或台胞证',
+      value: '6',
+    },
+    {
+      name: '临时身份证',
+      value: '7',
+    },
+    {
+      name: '出生证 ',
+      value: '8',
+    },
+    {
+      name: '台湾通行证',
+      value: '9',
+    },
+    {
+      name: '其它 ',
+      value: '99',
+    },
+  ],
+  maritalStatus: [
+    {
+      name: '已婚',
+      value: '1',
+    },
+    {
+      name: '未婚',
+      value: '2',
+    },
+  ],
+  sex: [
+    {
+      name: '男',
+      value: 'M',
+    },
+    {
+      name: '女',
+      value: 'F',
+    },
+  ],
+}

src/views/index/components/form.vue

@@ -12,31 +12,54 @@
           v-model="form.name"
           @blur="
             () => {
-              $refs.name.onFieldBlur();
+              $refs.name.onFieldBlur()
             }
           "
         />
       </a-form-model-item>
-      <a-form-model-item label="证件类型" prop="card">
-        <a-input v-model="form.card" :readonly="true" />
+      <a-form-model-item ref="idType" label="证件类型" prop="idType">
+        <a-select
+          default-value="1"
+          style="width: 100%"
+          @change="handleChange"
+          v-model="form.idType"
+        >
+          <a-select-option
+            :value="item.value"
+            v-for="(item, index) in this.options.idType"
+            :key="index"
+          >
+            {{ item.name }}
+          </a-select-option>
+        </a-select>
       </a-form-model-item>
-      <a-form-model-item label="性别" prop="gender">
-        <a-radio-group v-model="form.gender">
-          <a-radio value="1"> 男 </a-radio>
-          <a-radio value="2"> 女</a-radio>
+      <a-form-model-item ref="idNo" label="证件号" prop="idNo">
+        <a-input
+          v-model="form.idNo"
+          @blur="
+            () => {
+              $refs.idNo.onFieldBlur()
+            }
+          "
+        />
+      </a-form-model-item>
+      <a-form-model-item label="性别" prop="sex">
+        <a-radio-group v-model="form.sex">
+          <a-radio value="M"> 男 </a-radio>
+          <a-radio value="F"> 女</a-radio>
         </a-radio-group>
       </a-form-model-item>
-      <a-form-model-item label="生日日期" required prop="date">
+      <a-form-model-item label="生日日期" prop="birthDate">
         <a-date-picker
-          v-model="form.date"
-          show-time
+          v-model="form.birthDate"
+          @change="onChange"
           type="date"
           placeholder="选择生日"
           style="width: 100%"
         />
       </a-form-model-item>
-      <a-form-model-item label="婚姻状况" prop="marriage">
-        <a-radio-group v-model="form.gender">
+      <a-form-model-item label="婚姻状况" prop="maritalStatus">
+        <a-radio-group v-model="form.maritalStatus">
           <a-radio value="1">未婚 </a-radio>
           <a-radio value="2">已婚</a-radio>
         </a-radio-group>
@@ -46,7 +69,7 @@
           v-model="form.phone"
           @blur="
             () => {
-              $refs.name.onFieldBlur();
+              $refs.name.onFieldBlur()
             }
           "
         />
@@ -59,61 +82,108 @@
 </template>
 
 <script>
+import api from '@/api/customer'
+import options from '@/utils/options'
 export default {
-  name: "self-form",
+  name: 'self-form',
   components: {},
   data() {
     return {
+      options: {},
       labelCol: { span: 4 },
       wrapperCol: { span: 14 },
-      other: "",
+      other: '',
       form: {
-        name: "",
-        card: "身份证",
-        date: undefined,
-        gender: "1",
-        marriage: "1",
-        phone: "",
+        id: '',
+        name: '', //名字
+        idType: '1', //证件类型,默认身份证件
+        idNo: '', //证件号
+        sex: 'M', //性别 M男 F女
+        phone: '', //电话
+        birthDate: '', //生日
+        maritalStatus: '1', //婚姻 01:未婚，02:已婚, 03:未知
       },
       rules: {
         name: [
           {
             required: true,
-            message: "请输入姓名",
-            trigger: "blur",
+            message: '请输入姓名',
+            trigger: 'blur',
           },
           {
             max: 5,
-            message: "姓名长度不低于3",
-            trigger: "blur",
+            message: '姓名长度不低于3',
+            trigger: 'blur',
+          },
+        ],
+        idType: [
+          {
+            required: true,
+            message: '请选择证件类型',
+            trigger: 'change',
+          },
+        ],
+        idNo: [
+          {
+            required: true,
+            message: '请输入证件号',
+            trigger: 'blur',
           },
         ],
         phone: [
           {
             required: true,
-            message: "请输入手机号吗",
-            trigger: "blur",
+            message: '请输入手机号吗',
+            trigger: 'blur',
           },
         ],
-
-        date: [{ required: true, message: "请选择日期", trigger: "change" }],
       },
-    };
+    }
+  },
+  created() {
+    const { id } = this.$route.query
+    this.form.id = id ? id : ''
+    this.options = options //下拉选项数据集合:包括证件类型/婚姻状况/性别等
   },
   computed: {},
   methods: {
+    // 立即预约
     onSubmit() {
       this.$refs.ruleForm.validate((valid) => {
         if (valid) {
-          alert("submit!");
+          console.log('立即预约submit', this.form)
+          const query = {
+            ...this.form,
+          }
+          api.improveInformation(query).then((res) => {
+            console.log('提交用户信息res', res)
+            if (res.returnCode == '0000') {
+              this.$message.success('个人信息提交成功')
+              // 提交成功之后,关闭"个人信息填写弹窗",并刷新当前页面
+              setTimeout(() => {
+                this.$emit('hideModal')
+              }, 1500)
+            } else {
+              this.$message.error(res.returnMsg)
+            }
+          })
         } else {
-          console.log("error submit!!");
-          return false;
+          console.log('error submit!!')
+          return false
         }
-      });
+      })
+    },
+    // 下拉选项
+    handleChange(value) {
+      console.log(`selected ${value}`)
+    },
+    // 选择生日
+    onChange(date, dateString) {
+      this.form.birthDate = dateString
+      console.log(date, dateString)
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>

src/views/index/index.vue

@@ -16,87 +16,108 @@
     <a-modal
       v-model="visible"
       title="个人基本信息填写"
-      @ok="handleOk"
+      @ok="handleHideModal"
       :footer="null"
     >
-      <Form />
+      <Form @hideModal="handleHideModal"/>
     </a-modal>
   </div>
 </template>
 
 <script>
-import Item from "./components/item.vue";
-import Form from "./components/form.vue";
+import Item from './components/item.vue'
+import Form from './components/form.vue'
+import api from '@/api/customer'
 export default {
   components: { Item, Form },
   data() {
     return {
-      visible: true,
-
+      id:'',
+      visible: true, //是否显示"个人基本信息填写"弹窗
       items: [
         {
-          name: "体检套餐名称-某某单位-某某套餐",
-          detailUrl: "http://baidu.com",
+          name: '体检套餐名称-某某单位-某某套餐',
+          detailUrl: 'http://baidu.com',
           type: 1,
-          date: "2021-11-18",
+          date: '2021-11-18',
         },
         {
-          name: "体检套餐名称-某某单位-某某套餐",
-          detailUrl: "http://baidu.com",
+          name: '体检套餐名称-某某单位-某某套餐',
+          detailUrl: 'http://baidu.com',
           type: 1,
-          date: "2021-11-18",
+          date: '2021-11-18',
         },
         {
-          name: "体检套餐名称-某某单位-某某套餐",
-          detailUrl: "http://baidu.com",
+          name: '体检套餐名称-某某单位-某某套餐',
+          detailUrl: 'http://baidu.com',
           type: 1,
-          date: "2021-11-18",
+          date: '2021-11-18',
         },
         {
-          name: "体检套餐名称-某某单位-某某套餐",
-          detailUrl: "http://baidu.com",
+          name: '体检套餐名称-某某单位-某某套餐',
+          detailUrl: 'http://baidu.com',
           type: 1,
-          date: "2021-11-18",
+          date: '2021-11-18',
         },
       ],
       itemb: [
         {
-          name: "体检套餐名称-某某单位-某某套餐",
-          detailUrl: "http://baidu.com",
+          name: '体检套餐名称-某某单位-某某套餐',
+          detailUrl: 'http://baidu.com',
           type: 2,
-          date: "2021-11-18",
+          date: '2021-11-18',
         },
         {
-          name: "体检套餐名称-某某单位-某某套餐",
-          detailUrl: "http://baidu.com",
+          name: '体检套餐名称-某某单位-某某套餐',
+          detailUrl: 'http://baidu.com',
           type: 2,
-          date: "2021-11-18",
+          date: '2021-11-18',
         },
         {
-          name: "体检套餐名称-某某单位-某某套餐",
-          detailUrl: "http://baidu.com",
+          name: '体检套餐名称-某某单位-某某套餐',
+          detailUrl: 'http://baidu.com',
           type: 2,
-          date: "2021-11-18",
+          date: '2021-11-18',
         },
         {
-          name: "体检套餐名称-某某单位-某某套餐",
-          detailUrl: "http://baidu.com",
+          name: '体检套餐名称-某某单位-某某套餐',
+          detailUrl: 'http://baidu.com',
           type: 2,
-          date: "2021-11-18",
+          date: '2021-11-18',
         },
       ],
-    };
+    }
+  },
+  created() {
+    const {id}= this.$route.query
+    this.id = id
+    this.getCustomerDetail()
   },
   methods: {
     showModal() {
-      this.visible = true;
+      this.visible = true
     },
-    handleOk(e) {
-      console.log(e);
-      this.visible = false;
+    handleHideModal(e) {
+      console.log(e)
+      this.visible = false
+    },
+    // 获取客户详情
+    getCustomerDetail() {
+      console.log('this.id=',this.id,typeof(this.id),typeof(parseInt(this.id)));
+      api.getCustomerDetail({ id: parseInt(this.id) }).then((res) => {
+        if (res.returnCode == '0000') {
+          // 根据information是否显示'个人基本信息填写'弹窗(01:完善 02:不完善)
+          console.log('获取客户详情information',res.content.information )
+          // res.content.information == '02'
+          //   ? (this.visible = true)
+          //   : (this.visible = false)
+        } else {
+          this.$message.error(res.returnMsg)
+        }
+      })
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>

src/views/login/index.vue

@@ -95,6 +95,7 @@ export default {
       logo: require("../../assets/imgs/login/logo.png"),
       left: require("../../assets/imgs/login/left-bg.png"),
       isSub: true,
+      loading: false,//是否显示loading
     };
   },
   beforeCreate() {
@@ -110,16 +111,32 @@ export default {
       e.preventDefault();
       this.form.validateFields((err, values) => {
         if (!err) {
-          console.log('登陆')
+          console.log('登陆values=',values);
           const query = {
-            id: "1009",
+            id: "1002",//使用"体检卡口令"登陆,id必须是'1002',目前只有一种登陆方式,是写死的,后边会使用配置
             fields:[
-              {fieldName: "卡号", value: "199009211233", field: "medical_test_word"},
-              {fieldName: "卡密", value: "0001", field: "job_num"}
+              {fieldName: "体检卡口令", value: values.userName, field: "medical_test_word"},
+              {fieldName: "体检卡密码", value: values.password, field: "job_num"}
             ]
           }
           api.userLogin(query).then((res)=>{
             console.log(res);
+            if(res.returnCode == '0000'){
+              console.log("登陆成功");
+              // 显示登陆成功-并跳转到index页面
+              this.$message.success('登陆成功');
+              setTimeout(() => {
+              // 需要获取用户id
+              this.$router.push({
+                name:'Index',
+                query:{
+                  id:res.content.id
+                }
+              })
+              }, 1500);
+            }else{
+              this.$message.error(res.returnMsg);
+            }
           })
           console.log("Received values of form: ", values);
         }