BJ_web_developers / wxgzh

  <template>
    <div style="background: #fff;width: 100%;height: 100%">
      <h3 style="padding: 10px 10px;border-bottom: 5px solid #f5f5f5">
        车牌号码：

        <b style="color:#2282C5">{{$route.query.carNumber}}</b>

      </h3>
  
      <div style="padding: 10px 10px">
  

        <van-uploader style="width: 100%" :after-read="afterRead" v-model="fileList" :max-count="1" preview-size="350">

          <div class="uploadBg"></div>

          <!--<van-image  style="width: 100%;height: 200px;"-->

          <!--:src="require('../../../assets/images/myCars/fornt.png')" />-->

        </van-uploader>
  
        <!--<div class="uploadBg">-->

        <!---->

        <!--</div>-->
  
  

        <h4 style="padding-top: 30px;">

          照片须符合如下条件:
        </h4>
        <h6>
          1、行驶证正面
        </h6>
        <h6>
          2、信息清晰显示真实有效
        </h6>
  
        <van-button type="info" round block style="margin-top: 40px;" @click="toMyCarsPage">立即验证</van-button>

      </div>
  

    </div>
  
  </template>
  
  <script>

  import axios from 'axios'
  import { uploadPic, userCarsInfoEdit } from "@/api/myCars/myCars";

  export default {
    name: "rzCarNumber",
    data() {
      return {
        fileList: [],

        path:'',
        picSrc:'',

      };
    },

    created() {
      console.log(this.$route.query);
    },
    methods: {

      afterRead(file) {
        // 此时可以自行将文件上传至服务器

        // console.log(file);
        // console.log(file.content)
        // this.picSrc = file.content

        // this.path = file.content
        this.uploadPic(file)

      },
      toMyCarsPage() {

        console.log(this.fileList);
        console.log(this.fileList.length);
        // this.$router.push({
        //     name: "myCars"
        //   }
        // );
  
        if(this.fileList.length==0){
          this.$toast('请先上传图片')
        }else{

          let jsondata = {}
          let arr = [];
          let carlist = {
            carNumber: this.$route.query.carNumber,
            cerPicturePath: this.path,
            carNumberColor: this.$route.query.carNumberColor,
            id: this.$route.query.id
          };
          arr.push(carlist);
          // 状态；1-已使用，0-未使用， 2-已使用+未使用
          jsondata.optType = "02";
          jsondata.carNumbers = JSON.stringify(arr);
          jsondata.sign = this.$utils.signObject(jsondata);
          userCarsInfoEdit(jsondata).then(response => {
            console.log(response);
            if(response.code==0){
              this.$router.push({
                  name: "myCars"
                }
              );
            }
          });

        }
      },

      uploadPic(file) {
  

        let data = new FormData();
        data.append('picFile', file.file);
        data.append('fileType', '11');
        data.append('token', this.$utils.userToken);
        let config = {
          headers: { //添加请求头
            "Content-Type": "multipart/form-data"
          }
        };
        // jsondata.sign = this.$utils.signObject(jsondata)
        //上传图片
        axios.post("https://pay.ccccitd.cc/pic/uploadPic",data, config).then(res => {
          console.log(res.data);
          console.log(res.data.data);
          this.path = res.data.data
          // console.log(this.path);
        })
  

        // params.sign = this.$utils.signObject(params);

        //uploafile为自定义上传路径，记得引入

        // var jsondata = {
        //   fileType: '11',
        //   picFile: file.content
        // }
        // jsondata.sign = this.$utils.signObject(jsondata);

        // let formData=new FormData();
        // formData.append('picFile',file);
        // formData.append('fileType','11');
        // formData.append("token", this.$utils.userToken)
        // console.log(this.$utils.userToken)

        // var jsondata = {
        //   fileType: '11',
        //   picFile: file[0]
        // }
        // uploadPic({
        //   filePath: file[0],
        //   name: "picFile",
        //
        //   formData: this.$utils.signObject(jsondata)
        // }).then((res) => {
        //
        //   //上传成功返回结果
        //   console.log(res);
        // });

  
  
  
  
        // 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'){
        //
        //   }
        // });

      }
    }
  };
  </script>
  
  <style scoped>

    .uploadBg {
      width: 100%;
      height: 200px;
      background: #eee url("../../../assets/images/myCars/fornt.png") no-repeat;
      background-size: 100% 100%;

    }

  
    >>> .van-uploader__input-wrapper{
      width: 100%;
    }

  </style>