BJ_web_developers / wxgzh

Blame view

src/views/mySelf/myCars/rzCarNumber.vue 2.77 KB
Edit Raw Normal View History
5e52ed7c   刘淇   个人中心 
1
2
3
4
 
  <template>
    <div style="background: #fff;width: 100%;height: 100%">
      <h3 style="padding: 10px 10px;border-bottom: 5px solid #f5f5f5">
        车牌号码：
176eff96   刘淇   添加车牌 
5
 
        <b style="color:#2282C5">{{$route.query.carNumber}}</b>
5e52ed7c   刘淇   个人中心 
6
7
8
9
10
11
12
13
 
      </h3>
  
      <div style="padding: 10px 10px">
  
        <van-uploader style="width: 100%" :after-read="afterRead" v-model="fileList" :max-count="1" preview-size="200">
  
          <!--&lt;!&ndash;<div class="uploadBg"></div>&ndash;&gt;-->
          <!--<van-image  style="width: 100%;height: 200px;"-->
176eff96   刘淇   添加车牌 
14
 
          <!--:src="require('../../../assets/images/myCars/fornt.png')" />-->
5e52ed7c   刘淇   个人中心 
15
16
17
 
        </van-uploader>
  
        <!--<div class="uploadBg">-->
176eff96   刘淇   添加车牌 
18
 
        <!---->
5e52ed7c   刘淇   个人中心 
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
        <!--</div>-->
  
  
        <h4>
          照片须符合如下条件:
        </h4>
        <h6>
          1、行驶证正面
        </h6>
        <h6>
          2、信息清晰显示真实有效
        </h6>
  
        <van-button type="info" round block style="margin-top: 40px;" @click="toMyCarsPage">立即验证</van-button>
5e52ed7c   刘淇   个人中心 
34
35
 
      </div>
5e52ed7c   刘淇   个人中心 
36
37
38
39
40
 
    </div>
  
  </template>
  
  <script>
176eff96   刘淇   添加车牌 
41
 
  import { uploadPic } from "@/api/myCars/myCars";
5e52ed7c   刘淇   个人中心 
42
43
44
45
46
 
  export default {
    name: "rzCarNumber",
    data() {
      return {
        fileList: [],
176eff96   刘淇   添加车牌 
47
 
        path:''
5e52ed7c   刘淇   个人中心 
48
49
 
      };
    },
176eff96   刘淇   添加车牌 
50
51
52
53
 
    created() {
      console.log(this.$route.query);
    },
    methods: {
5e52ed7c   刘淇   个人中心 
54
55
 
      afterRead(file) {
        // 此时可以自行将文件上传至服务器
d3808923   刘淇   停车记录 
56
57
58
 
        console.log(file);
        // this.path = file.content
        this.uploadPic(file)
5e52ed7c   刘淇   个人中心 
59
60
 
      },
      toMyCarsPage() {
176eff96   刘淇   添加车牌 
61
62
63
64
65
66
67
68
69
70
71
72
73
 
        console.log(this.fileList);
        console.log(this.fileList.length);
        // this.$router.push({
        //     name: "myCars"
        //   }
        // );
  
        if(this.fileList.length==0){
          this.$toast('请先上传图片')
        }else{
  
        }
      },
d3808923   刘淇   停车记录 
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
      uploadPic(file) {
  
  
  
  
        let params=new FormData();
        params.append('file',file.file);
        params.append('fileType','11');
        params.sign = this.$utils.signObject(params);
        //uploafile为自定义上传路径，记得引入
  
        uploadPic({
          filePath: file.content,
          name: "picFile",
          formData: params,
        }).then((res) => {
  
          //上传成功返回结果
          console.log(res);
176eff96   刘淇   添加车牌 
93
 
        });
d3808923   刘淇   停车记录 
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
  
  
  
  
        // let jsondata = {
        //   fileType: '11',
        //   picFile:file.file
        // };
        // // jsondata.sign = this.$utils.signObject(jsondata);
        // //通过formData上传文件
        // let formData = new FormData();
        // formData.append("file", file)
        // formData.append("fileType", '11')
        // uploadPic(jsondata).then(response => {
        //   console.log(jsondata)
        //   if(response.code=='0'){
        //
        //   }
        // });
5e52ed7c   刘淇   个人中心 
113
114
115
116
117
118
 
      }
    }
  };
  </script>
  
  <style scoped>
176eff96   刘淇   添加车牌 
119
120
121
122
123
 
    .uploadBg {
      width: 100%;
      height: 200px;
      background: #eee url("../../../assets/images/myCars/fornt.png") no-repeat;
      background-size: 100% 100%;
5e52ed7c   刘淇   个人中心 
124
176eff96   刘淇   添加车牌 
125
 
    }
5e52ed7c   刘淇   个人中心 
126
 
  </style>