1 const Mock = require('mockjs');
 2 // 获取 mock.Random 对象
 3 const Random = Mock.Random;
 4 // mock一组数据
 5 const userInfoData = function() {
 6         let person = [
 7             {
 8                 label:'姓名',
 9                 text:Random.cname(),//随机生成中文名
10             },
11             {
12                 label:'身份证号',
13                 text:Random.id()//随机生成身份证
14             },
15             {
16                 label:'手机号',
17                 text:/^[1][3,4,5,7,8][0-9]{9}$/ //正则生成手机号
18             },
19             {
20                 label:'地址',
21                 text:Random.county(true) //随机生成地址
22             },
23             {
24                 label:'返佣银行卡号',
25                 text:/^([1-9]{1})(\d{14}|\d{18})$/
26             },
27             {
28                 label:'开户行',
29                 text:Random.cword(2,4)+'银行'
30             },
31         ]
32     return {
33         person: person
34     }
35 }
36
37 // Mock.mock( url, post/get , 返回的数据)；
38 Mock.mock('/user/index', 'post', userInfoData());
39
40
41
42 Mock.mock('user/ma','post',{
43     phone:/^[1][3,4,5,7,8][0-9]{9}$/,
44     photo:Random.dataImage('118x118', '居间协议')
45 });
46
47 Mock.mock('user/login','post',{
48     userId:'@natural(0,100)'
49 })
50
51 Mock.setup({
52     timeout:0-300
53 })

 1 import axios from 'axios'
 2 import vue from 'vue'
 3
 4 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
 5
 6 // 请求拦截器
 7 axios.interceptors.request.use(function(config) {
 8     return config;
 9   }, function(error) {
10     return Promise.reject(error);
11   })
12   // 响应拦截器
13 axios.interceptors.response.use(function(response) {
14   return response;
15 }, function(error) {
16   return Promise.reject(error);
17 })
18
19 // 封装axios的post请求
20 export function fetch(url, params) {
21   return new Promise((resolve, reject) => {
22     axios.post(url, params)
23       .then(response => {
24         resolve(response.data);
25       })
26       .catch((error) => {
27         reject(error);
28       })
29   })
30 }
31
32 export default {
33   JH_info(url, params) {
34     return fetch(url, params);
35   }
36 }

 1 import api from '../../axios/api.js'   //引入api
 2 export default {
 3
 4   data(){
 5     return {
 6       proStatue:'等待上传居间协议',
 7       proPhoto:require('../../assets/img/logo.png'),
 8       upload:'ok',
 9       imageUrl:'',
10       user:[
11        {
12         label:'姓名',
13         text:'小花'
14        },
15        {
16         label:'身份证号',
17         text:'467829299277718369'
18        },
19        {
20         label:'手机号',
21         text:'136890288802'
22        },
23        {
24         label:'开启时间',
25         text:'2018-05-01'
26        },
27        {
28         label:'来源',
29         text:'都某人'
30        },
31        {
32         label:'权益',
33         text:1000.00
34        },
35        {
36         label:'手续费',
37         text:1000.00
38        },
39
40       ],
41     }
42   },
43   created(){
44     this.setUserApi();//调用了定义的请求方法
45     api.JH_info('user/ma','123')//直接页面创建的时候请求接口
46     .then(res=>{
47       console.log('img',res);
48       this.imageUrl = res.photo;
49     })
50   },
51   methods:{
52     // 图片上传
53      handleAvatarSuccess(res, file) {
54       console.log('file',file);
55         this.imageUrl = URL.createObjectURL(file.raw);
56       },
57       beforeAvatarUpload(file) {
58         const isJPG = file.type === 'image/jpeg';
59         const isLt2M = file.size / 1024 / 1024 < 2;
60
61         if (!isJPG) {
62           this.$message.error('上传头像图片只能是 JPG 格式!');
63         }
64         if (!isLt2M) {
65           this.$message.error('上传头像图片大小不能超过 2MB!');
66         }
67         return isJPG && isLt2M;
68       },
69        //提交审核
70       checkInfo(){
71         this.upload = 'true';
72         this.proStatue = '等待审核';
73       },
74
75       setUserApi(){
76       api.JH_info('/user/index','123')
77       .then(res => {
78         console.log(res);
79         this.user = res.person;
80       });
81     },
82
83   }
84 }