liyinSakura

稻花香里说丰年，听取人生经验。

Vue简单评星效果与单张图片上传

• 标签: vue

html结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form class="" id="pj-frm">
      <div class="assess-header">
        <span class="star-text">评分</span>
        <span class="star-item" :class="[item<=curId?'on':'']" v-for="item in stararr" @click="setStar(item)"></span>
        <input type="hidden" name="star" v-model="curId">
        <input type="hidden" name="order_id" v-model="con.id">
        <input type="hidden" name="purl" v-model="dataUrl">
      </div>
        <div class="assess-textarea-w">
          <textarea name="content" class="assess-textarea" placeholder="请写下您真实的评价" v-model="content"></textarea>
        </div>
        <div class="assess-pic-wrapper" @click="AssessPic();">
            <img :src="dataUrl" alt="" class="assess-picShow"  ref="PicView">
            <input type="file" name="" value="" class="asspicup" @change="handleFileChange"  ref="flieupload" id="flieupload">
        </div>
</form>

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
new Vue({
  el: '#app',
  data() {
    return {
      con: {},
      stararr: [1,2,3,4,5],
      curId:0,
      dataUrl: '背景图片的地址',
      content: '',
      errmsg:''
    };
  },
  components: {
  },
  created() {
    this.getOrdDetail()
  },
  methods: {
    getOrdDetail() {
      var that = this;
      var id = GetQueryString('id');
      // console.log(id);
      $.post('/url',{id:id},function(datas){
          var state = datas.sign;
          // console.log(datas);
          if (state === ERROK) {
          that.con =  datas.data;
          // console.log(that.con);
          } else {
          }
      },'json')
    },
    setStar(id) {
      // console.log(id);
      this.curId = id;
    },
    AssessPic() {
      this.$refs.flieupload.click();
    },
    handleFileChange () {
      var that = this;
      var status = this.checkImgType('#flieupload');
      var file = this.$refs.flieupload.files[0];
      if (status) {
        var fd = new FormData();
        fd.append("upload", 1);
        fd.append("upfile", file);
        $.ajax({
            url: "。。。",
            type: "POST",
            dataType:'json',
            processData: false,
            contentType: false,
            data: fd,
            success: function(d) {
                // $('#selfsubmitBtn').attr('disabled',false);
                // $('#headPortrait').val(d.data)
                that.dataUrl = d.data;
                // that.saveAvatar();
            }
        });
      } else {
      }
    },
    checkImgType(ths) {
      try {
      var obj_file = $(ths).get(0).files;
      for(var i=0;i<obj_file.length;i++){
      if (!/\.(JPEG|BMP|GIF|JPG|PNG)$/.test(obj_file[i].name.toUpperCase())) {
      alert("仅支持JPG、GIF、PNG、JPEG、BMP格式");
      $(ths).val("");
      return false;
               }
            }
         } catch (e) {
         }
      return true;
    },
    onSubmit() {
      if (this.curId===0) {
          this.errmsg = '请先选择星级！';
          return;
      }else {
        this.errmsg = '';
      }
      if (this.content==='') {
        this.errmsg = '评价内容不能为空！';
        return;
      }else {
        this.errmsg = '';
      }
      console.log($('#pj-frm').serialize());
      $.post('。。。',$('#pj-frm').serialize(),function(datas){
              if(datas.sign == 1){
                  location.href = '/';
              }else{
                  alert(datas.msg);
                  return false;
              }
          },'json')
    }
  }
})