vue+cube 評價/意見反饋頁面

寶兒的程式生涯發表於2019-03-27

2020.3.31
在這裡插入圖片描述

1 星星

在這裡插入圖片描述

<!--星星  -->
<div class="star-wrapper"
     style="margin-top: 40px">
  <span class="star">機艙環境</span>
  <cube-rate v-model="value1"></cube-rate>
</div>
<div class="star-wrapper">
  <span class="star">服務態度</span>
  <cube-rate v-model="value2"></cube-rate>
</div>
<div class="star-wrapper">
  <span class="star">整體印象</span>
  <cube-rate v-model="value4"></cube-rate>
</div>

data () {
    return {
      value1: 0, // 環境
      value2: 0, // 態度
      value4: 0 // 印象
    }
  },

<style lang="stylus" scoped type="text/css">
>>> .cube-rate {
  max-width: 60%;
}
.star {
  color: #95a9bf;
  display: inline-flex;
  margin-right: 10px;
}
.star-wrapper {
  font-size: 12px;
  width: 180px;
  margin-top: 0px;
  margin-left: 30px;
  margin-right: 30px;
  font-weight: 200;
  padding: 3px 0;
  text-align: left;
  line-height: 20px;
  .cube-rate-item {
    width: 25px;
    height: auto;
    background-size: 50%;
    background-color: grey;
    .cube-rate-item.active, .rate-item {
      background-color: orange;
    }
  }
}
</style>

星星變顏色
在這裡插入圖片描述
在這裡插入圖片描述在這裡插入圖片描述
就這幾行css就讓星星變顏色了,太神奇了叭,

<style type="text/css">
li.cube-rate-item.cube-rate-item_active div.cube-rate-item-def {
  background-image: url("../assets/images/system/start_red.png");
}
li.cube-rate-item div.cube-rate-item-def {
  /*background: url("..");*/
  background-repeat: no-repeat;
  background-position: 50%;
  background-image: url("../assets/images/system/start_unacive.png");
}
</style>

2 意見反饋與上傳圖片

在這裡插入圖片描述
改造,這裡限制最多九張圖
在這裡插入圖片描述在這裡插入圖片描述

<template>
  <div class="opinion-content">
    <Nav></Nav>
    <div class="info">
      <!--建議 -->
      <div class="suggest">
        <cube-textarea indicator="indicator"
                       v-model="value3"
                       placeholder="請輸入您的意見或建議"
                       style="border: none"></cube-textarea>
        <div class="selectPic">
          <!-- <input multiple
                 type="file"
                 ref="file"
                 id="uploadFile"> -->
          <!--  multiple:是否支援多選
                  max:最多上傳幾張
                  list:編輯反顯使用 -->
          <updatefile v-on:fileChange="fileChange"
                      :multiple="true"
                      :list="imgList"
                      ref="upload"
                      v-model='upload'></updatefile>
        </div>
      </div>
      <br>
    </div>
  </div>
</template>
<script>
import registryToast from '../components/common/toast/index'
import Nav from '../components/common/Nav.vue'
import uploadImages from '../components/opinion/uploadImages'
export default {
  components: {
    updatefile: uploadImages,
    Nav: Nav
  },
  data () {
    return {
      value1: 0, // 環境
      value2: 0, // 態度
      value4: 0, // 印象
      value3: '', // 意見
      indicator: {
        negative: true,
        remain: true
      },
      imgList: [],
      upload: []
    }
  },
  created: function () {
  },
  methods: {
    fileChange (data) {
      this.imgdata = data
    },
    back2: function () {
      if (this.value3.length > 1 || this.imgdata.length > 0 || this.phone.length > 0) {
        if (confirm('是否確認退出?')) {
          this.$router.go(-1) // 返回上一層
        }
      } else {
        this.$router.go(-1) // 返回上一層
      }
    }
  }
}
</script>

<style type="text/css">
/* 星星 */
li.cube-rate-item.cube-rate-item_active div.cube-rate-item-def {
  background-image: url("../assets/images/system/start_red.png");
}
li.cube-rate-item div.cube-rate-item-def {
  /*background: url("..");*/
  background-repeat: no-repeat;
  background-position: 50%;
  background-image: url("../assets/images/system/start_unacive.png");
}
/* 意見不加邊框 */
/* 輸入框固定 */
textarea::-webkit-input-placeholder {
  color: #cad5e2;
  font-weight: 200;
}

.cube-textarea-wrapper {
  height: 75px;
}

div.cube-textarea-wrapper:after {
  border: none;
}

textarea:-moz-placeholder {
  color: #cad5e2;
  font-weight: 200;
}

textarea:-ms-input-placeholder {
  color: #cad5e2;
  font-weight: 200;
}
/* 上傳圖片的X號邊框 */
i.iconfont.icon-chahao.upload_warp_img_div_del {
  border: none;
}

.opinion-content {
  /* background-color: rgba(247, 249, 252, 1); */
}
</style>
<style lang="stylus" scoped>
/* 星星 */
>>> .cube-rate {
  max-width: 60%;
}
.star {
  color: #95a9bf;
  display: inline-flex;
  margin-right: 10px;
}
.star-wrapper {
  font-size: 12px;
  width: 180px;
  margin-top: 0px;
  margin-left: 30px;
  margin-right: 30px;
  font-weight: 200;
  padding: 3px 0;
  text-align: left;
  line-height: 20px;
  .cube-rate-item {
    width: 25px;
    height: auto;
    background-size: 50%;
    background-color: grey;
    .cube-rate-item.active, .rate-item {
      background-color: orange;
    }
  }
}
// 意見
.info {
  margin: 0 30px;
  margin-bottom: 0px;
}
.selectPic {
  width: 100%;
}
.suggest {
  margin: 8px 0px;
  border: 1px solid #95a9bf;
  border-radius: 5px;
}
</style>

在這裡插入圖片描述
uploadImages.vue
這裡遺留了一個小bug就是,右上角的小叉號顯示不出來

3 匿名

在這裡插入圖片描述

<!-- 匿名 -->
<div style="width:200px;font-size:13px;">
  <!--<cube-checkbox v-model="checked" style="color:#95a9bf;">匿名評價</cube-checkbox>
  -->
  <div class="box box-active"
       @click="selCheck()"
       v-if="checked">
    匿名評價
  </div>
  <div class="box"
       @click="selCheck()"
       v-if="!checked">
    匿名評價
  </div>
  <input type="checkbox"
         style="display: none;"
         :checked="checked" />
</div>
      
data() {
	return {
		checked: true
	}
}
methods: {
    selCheck () {
      if (!this.checked) {
        this.checked = true
      } else {
        this.checked = false
      }
    },
}
/* 匿名評價 */
.box {
  height: 30px;
  width: 200px;
  line-height: 30px;
  padding-left: 24px;
}

.box-active {
  background: url("../assets/images/system/check_box.png") no-repeat;
  background-size: 15px 15px;
  background-position: left center;
}

.box-unactive {
  background: url("../assets/images/system/check_box.png") no-repeat;
  background-size: 15px 15px;
  background-position: left center;
}

在這裡插入圖片描述


原始碼:

//opinion.vue
<template>
  <div class="opinion-content">
    <Nav></Nav>
    <!--星星  -->
    <div class="star-wrapper"
         style="margin-top: 40px">
      <span class="star">機艙環境</span>
      <cube-rate v-model="value1"></cube-rate>
    </div>
    <div class="star-wrapper">
      <span class="star">服務態度</span>
      <cube-rate v-model="value2"></cube-rate>
    </div>
    <div class="star-wrapper">
      <span class="star">整體印象</span>
      <cube-rate v-model="value4"></cube-rate>
    </div>
    <div class="info">
      <!--建議 -->
      <div class="suggest">
        <cube-textarea indicator="indicator"
                       v-model="value3"
                       placeholder="請輸入您的意見或建議"
                       style="border: none"></cube-textarea>
        <div class="selectPic">
          <!-- <input multiple
                 type="file"
                 ref="file"
                 id="uploadFile"> -->
          <!--  multiple:是否支援多選
                  max:最多上傳幾張
                  list:編輯反顯使用 -->
          <updatefile v-on:fileChange="fileChange"
                      :multiple="true"
                      :list="imgList"
                      ref="upload"
                      v-model='upload'></updatefile>
        </div>
      </div>
      <!-- 匿名 -->
      <div style="width:200px;font-size:13px;">
        <!--<cube-checkbox v-model="checked" style="color:#95a9bf;">匿名評價</cube-checkbox>
        -->
        <div class="box box-active"
             @click="selCheck()"
             v-if="checked">
          匿名評價
        </div>
        <div class="box"
             @click="selCheck()"
             v-if="!checked">
          匿名評價
        </div>
        <input type="checkbox"
               style="display: none;"
               :checked="checked" />
      </div>
      <!-- 手機 -->
      <cube-input ref="cubeinput"
                  v-model="phone"
                  placeholder="請輸入您的手機號"></cube-input>
      <br>
      <!--<p v-if="errors.length">
      <ul>
        <li class="error"
            v-for="error in errors"
            :key="error">{{ error }}
        </li>
      </ul>
      </p>-->
    </div>
    <div class="opinion-footer">
      <cube-button type="submit"
                   style="    background: linear-gradient(180deg,#349ffd,#027eea);"
                   @click="submitBtn">提 交
      </cube-button>
    </div>
  </div>
</template>
<script>
import registryToast from '../components/common/toast/index'
import Nav from '../components/common/Nav.vue'
import uploadImages from '../components/opinion/uploadImages'
export default {
  components: {
    updatefile: uploadImages,
    Nav: Nav
  },
  data () {
    return {
      value1: 0, // 環境
      value2: 0, // 態度
      value4: 0, // 印象
      value3: '', // 意見
      indicator: {
        negative: true,
        remain: true
      },
      imgList: [],
      upload: [],
      checked: true,
      phone: '',
      imgdata: '',
      flightDetail: [],
      orderNum: 0
    }
  },
  methods: {
    fileChange (data) {
      this.imgdata = data
    },
    back2: function () {
      if (this.value3.length > 1 || this.imgdata.length > 0 || this.phone.length > 0) {
        if (confirm('是否確認退出?')) {
          this.$router.go(-1) // 返回上一層
        }
      } else {
        this.$router.go(-1) // 返回上一層
      }
    },
    selCheck () {
      if (!this.checked) {
        this.checked = true
      } else {
        this.checked = false
      }
    },
    submitBtn (e) {
      this.errors = []
      var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/ // 驗證是不是以13,15,18,17開頭的數字
      if (this.value1 === 0) {
        this.errors.push('請對機艙環境作出評價!')
      } else if (this.value2 === 0) {
        this.errors.push('請對服務態度作出評價!')
      } else if (this.value4 === 0) {
        this.errors.push('請對整體印象作出評價!')
      } else if (this.upload === '') {
        this.errors.push('請選擇至少一張圖片!')
      } else if (this.phone === '') {
        this.errors.push('請輸入手機號!')
      } else if (this.phone.length !== 11) {
        this.errors.push('請輸入11位的手機號碼!')
      } else if (!myreg.test(this.phone)) {
        this.errors.push('請輸入有效的手機號碼!')
      } else {
        e.preventDefault()
        this.postData()
        // this.$router.push('/main')
        // console.log('submit', e)
      }
      this.$refs.cubeinput.style = 'solid 1px red'
      if (this.errors.length > 0) {
        registryToast.showToast(this.errors[0])
      }
    },
    postData () {
      var newcheck = 1
      if (this.checked === true) {
        newcheck = 1 // 1是不匿名
      } else {
        newcheck = 2 // 2匿名
      }
      const teldata = new FormData()
      teldata.append('environment', this.value1) // 環境
      teldata.append('service', this.value2) // 服務態度
      teldata.append('detail', this.value3) // 詳情描述
      teldata.append('comprehensive', this.value4) // 整體印象
      teldata.append('anonymous', newcheck) // 是否匿名
      teldata.append('mobile', this.phone) // 手機號
      for (let i = 0; i < this.imgdata.length; i++) {
        teldata.append('inputFile', this.imgdata[i].file)
      }
      const that = this
      var userInfo = localStorage.getItem('userInfo')
      this.userInfo = JSON.parse(userInfo)
      const instans = this.axios.create({
        withCredentials: true,
        headers: {
          'Content-Type': 'multipart/form-data',
          token: this.userInfo.token
        }
      })
      const toast = this.$createToast({
        txt: '正在提交請稍後',
        mask: true
      })
      toast.show()
      instans.post('/api/feedback/submit', teldata).then(
        function (res) {
          toast.hide()
          // console.log(res)
          if (res.data.status === 200) {
            registryToast.showToast('提交成功')
            that.$router.push('/main')
          } else {
            registryToast.showToast('提交失敗,請重試!')
          }
        },
        function (error) {
          toast.hide()
          console.log('請求出錯', error)
        }
      )
    }
  }
}
</script>

<style type="text/css">
/* 星星 */
li.cube-rate-item.cube-rate-item_active div.cube-rate-item-def {
  background-image: url("../assets/images/system/start_red.png");
}
li.cube-rate-item div.cube-rate-item-def {
  /*background: url("..");*/
  background-repeat: no-repeat;
  background-position: 50%;
  background-image: url("../assets/images/system/start_unacive.png");
}
/* 意見不加邊框 */
/* 輸入框固定 */
textarea::-webkit-input-placeholder {
  color: #cad5e2;
  font-weight: 200;
}

.cube-textarea-wrapper {
  height: 75px;
}

div.cube-textarea-wrapper:after {
  border: none;
}

textarea:-moz-placeholder {
  color: #cad5e2;
  font-weight: 200;
}

textarea:-ms-input-placeholder {
  color: #cad5e2;
  font-weight: 200;
}
/* 上傳圖片的X號邊框 */
i.iconfont.icon-chahao.upload_warp_img_div_del {
  border: none;
}
/* 匿名評價 */
.box {
  height: 30px;
  width: 200px;
  line-height: 30px;
  padding-left: 24px;
}

.box-active {
  background: url("../assets/images/system/check_box.png") no-repeat;
  background-size: 15px 15px;
  background-position: left center;
}

.box-unactive {
  background: url("../assets/images/system/check_box.png") no-repeat;
  background-size: 15px 15px;
  background-position: left center;
}
input {
  border: 1px solid #c3c3c3;
}
/*
.cube-input-field {
  width: 50%;
}

.cube-input-field.error {
  border: solid 1px red;
}

.cube-input {
  width: 200px;
  background: rgba(247, 249, 252, 1);
}

.opinion-footer {
  position: relative;
  bottom: 10px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;

}
.opinion-footer .cube-btn {
  width: 90%;
}
.cube-scroll-nav-panel {
  margin: 10px auto;
}
.cube-upload-def .cube-upload-btn, .cube-upload-def .cube-upload-file {
  padding: 10px;
}
*/
.opinion-content {
  /* background-color: rgba(247, 249, 252, 1); */
}
</style>
<style lang="stylus" scoped>
/* 星星 */
>>> .cube-rate {
  max-width: 60%;
}
.star {
  color: #95a9bf;
  display: inline-flex;
  margin-right: 10px;
}
.star-wrapper {
  font-size: 12px;
  width: 180px;
  margin-top: 0px;
  margin-left: 30px;
  margin-right: 30px;
  font-weight: 200;
  padding: 3px 0;
  text-align: left;
  line-height: 20px;
  .cube-rate-item {
    width: 25px;
    height: auto;
    background-size: 50%;
    background-color: grey;
    .cube-rate-item.active, .rate-item {
      background-color: orange;
    }
  }
}
// 意見
.info {
  margin: 0 30px;
  margin-bottom: 0px;
}
.selectPic {
  width: 100%;
}
.suggest {
  margin: 8px 0px;
  border: 1px solid #95a9bf;
  border-radius: 5px;
}
</style>

//uponloadImages.vue
<template>
  <div class="hello">
    <div class="upload">
      <input @change="fileChange($event)"
             type="file"
             id="upload_file"
             multiple
             accept="image/*"
             style="display: none"
             ref="file">
      <div class="upload_warp_img"
           v-show="imgList.length!=0">
        <div class="upload_warp_img_div"
             v-for="(item,index) in imgList"
             :key="index">
          <div class="upload_warp_img_div_top">
            <div class="upload_warp_img_div_text">{{item.file.name}}</div>
            <i class="iconfont icon-chahao upload_warp_img_div_del"
               @click="fileDel(index)"></i>
          </div>
          <img :src="item.file.src">
        </div>
      </div>
      <div class="upload_warp">
        <div class="upload_warp_left"
             @click="fileClick">
          <div class="img"></div>
        </div>
      </div>
      <!-- <div class="upload_warp_text">選中{{imgList.length}}個檔案,共{{bytesToSize(this.size)}}</div> -->
    </div>

    <!-- <div
      v-for="(item,index) in imgList"
      style="text-align: left"
      v-bind:key="index"
    >{{index}}{{item.file.name}}</div>-->
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      imgList: [],
      formData: new FormData(), // 上傳用列表
      size: 0,
      limit: 9
    }
  },
  methods: {
    // 設定
    fileClick () {
      document.getElementById('upload_file').click()
    },
    fileChange (el) {
      // console.log(el) // input整個標籤
      if (!el.target.files[0].size) return
      this.fileList(el.target)
      el.target.value = ''

      /* 通過FormData物件可以組裝一組用 XMLHttpRequest傳送請求的鍵/值對。
        它可以更靈活方便的傳送表單資料,因為可以獨立於表單使用。如果你把表單
        的編碼型別設定為multipart/form-data ,則通過FormData傳輸的資料格式
        和表單通過submit() 方法傳輸的資料格式相同 */
      // 你可以自己建立一個FormData物件,然後通過呼叫它的append()方法新增欄位,就像這樣:
      /*
       let formData = new FormData()
       formData.append('thumb', this.imgList)
       console.log(formData, 'wsd')
       */
      // 向父元件傳遞引數,事件為fileChange,引數為formData物件
      this.$emit('fileChange', this.imgList)
    },
    fileList (fileList) {
      const files = fileList.files
      // console.log(files)
      for (let i = 0; i < files.length; i++) {
        // 判斷是否為資料夾
        // eslint-disable-next-line eqeqeq
        if (files[i].type != '') {
          this.fileAdd(files[i])
        } else {
          // 資料夾處理
          this.folders(fileList.items[i])
        }
      }
    },
    // 資料夾處理
    folders (files) {
      const _this = this
      // 判斷是否為原生file
      if (files.kind) {
        files = files.webkitGetAsEntry()
      }
      files.createReader().readEntries(function (file) {
        for (let i = 0; i < file.length; i++) {
          if (file[i].isFile) {
            _this.foldersAdd(file[i])
          } else {
            _this.folders(file[i])
          }
        }
      })
    },
    foldersAdd (entry) {
      const _this = this
      entry.file(function (file) {
        _this.fileAdd(file)
      })
    },
    fileAdd (file) {
      if (this.limit !== undefined) this.limit--
      if (this.limit !== undefined && this.limit < 0) return
      // 總大小
      this.size = this.size + file.size
      // 判斷是否為圖片檔案
      // eslint-disable-next-line eqeqeq
      if (file.type.indexOf('image') == -1) {
        file.src = 'wenjian.png'
        this.imgList.push({
          file
        })
      } else {
        const reader = new FileReader()
        const image = new Image()
        const _this = this
        reader.readAsDataURL(file)
        reader.onload = function () {
          file.src = this.result
          image.onload = function () {
            const width = image.width
            const height = image.height
            file.width = width
            file.height = height
            _this.imgList.push({
              file
            })
            // console.log(_this.imgList)
          }
          image.src = file.src
        }
      }
    },
    fileDel (index) {
      this.size = this.size - this.imgList[index].file.size // 總大小
      this.imgList.splice(index, 1)
      if (this.limit !== undefined) this.limit = 9 - this.imgList.length
    },
    bytesToSize (bytes) {
      if (bytes === 0) return '0 B'
      const k = 1000 // or 1024
      const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]
    }
  }
}
</script>
<style scoped>
.upload_warp_img_div_del {
  position: absolute;
  top: -2px;
  width: 16px;
  right: 4px;
}

.upload_warp_img_div_top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.4);
  line-height: 30px;
  text-align: left;
  color: #fff;
  font-size: 12px;
  text-indent: 4px;
}

.upload_warp_img_div_text {
  white-space: nowrap;
  font-size: 12px;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload_warp_img_div img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  vertical-align: middle;
}

/* 上傳的圖片展示 */
.upload_warp_img_div {
  position: relative;
  height: 70px;
  width: 28%;
  /*border: 1px solid #ccc;*/
  margin: 10px 5px;
  float: left;
  line-height: 100px;
  display: table-cell;
  text-align: center;
  background-color: rgb(236, 228, 228);
  cursor: pointer;
}

.upload_warp_img {
  /*border-top: 1px solid #d2d2d2;*/
  padding: 10px;
  overflow: hidden;
}

.upload_warp_text {
  text-align: left;
  margin-bottom: 10px;
  padding-top: 10px;
  text-indent: 14px;
  border-top: 1px solid #ccc;
  font-size: 14px;
}

.upload_warp_left .img {
  margin: 1px;
  width: 60px;
  height: 60px;
  background: url("./upload.png") no-repeat center center;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}

.upload_warp_left {
  float: left;
  /* width: 80px;
    height: 100px; */
  /*border: 1px dashed #999;*/
  border-radius: 4px;
  cursor: pointer;
}

.upload_warp {
  padding: 7px 14px;
  height: 65px;
}

.upload {
  /* border: 1px solid #ccc; */
  background-color: #fff;
  width: 100%;
  /* box-shadow: 0px 1px 0px #ccc; */
  border-radius: 4px;
}

.hello {
  width: 100%;
}
</style>


2019年03月27日
在這裡插入圖片描述

<template>
  <div>
    <Nav></Nav>
    <!-- model 就是整個表單需要的資料來源,schema 就是生成表單所定義的模式,immediate-validate 如果為 true 則初始時立即做校驗,options 則是配置選項。submit 校驗成功後提交事件,validate 每次有資料校驗更新的事件,reset 則是重置事件。 -->
    <cube-form
      :model="model"
      :schema="schema"
      :immediate-validate="false"
      :options="options"
      @validate="validateHandler"
      @submit="submitHandler"
      @reset="resetHandler"
    ></cube-form>
    <!-- <div class="star-wrapper">
      <span>機艙環境</span>
      <cube-rate v-model="value">
        <cube-rate-item v-for="n in max" :key="n" :value="value1" :index="n">
          <div class="rate-item"></div>
        </cube-rate-item>
      </cube-rate>
    </div>
    <div class="star-wrapper">
      <span>服務態度</span>
      <cube-rate v-model="value2"></cube-rate>
    </div>
    <div class="info">
      <div style=" margin:30px 5px 20px; border:1px solid #999;">
        <cube-textarea indicator="indicator" placeholder="請輸入您的意見或建議"></cube-textarea>
        div
        <cube-upload
          ref="upload"
          :action="action"
          :simultaneous-uploads="1"
          :process-file="processFile"
          @file-submitted="fileSubmitted"
        />
      </div>
      <cube-radio-group v-model="selected" :options="options"/>
      <cube-input v-model="text" placeholder="請輸入您的手機號"></cube-input>
      <br>
      <cube-button type="submit" @click="submitBtn">提 交</cube-button>
    </div>-->
  </div>
</template>
<script>
import Nav from '../components/common/Nav.vue'

export default {
  components: {
    Nav
  },
  data() {
    return {
      value: '',
      value1: '',
      value2: '',
      selected: '',
      options: ['匿名評價'],
      action: {
        target: '//jsonplaceholder.typicode.com/photos/',
        prop: 'base64Value'
      },
      validity: {},
      valid: undefined,
      model: {
        checkboxValue: false,
        checkboxGroupValue: [],
        inputValue: '',
        radioValue: '',
        rateValue: 0,
        selectValue: 2018,
        switchValue: true,
        textareaValue: '',
        uploadValue: []
      },
      schema: {
        groups: [
          {
            legend: '',
            fields: [
              {
                type: 'rate',
                modelKey: 'rateValue',
                label: '機艙環境',
                rules: {
                  required: true
                }
              },
              {
                type: 'rate',
                modelKey: 'rateValue2',
                label: '服務態度',
                rules: {
                  required: true
                }
              }
            ]
          },
          {
            legend: '',
            fields: [
                {
                type: 'textarea',
                modelKey: 'textareaValue',
                label: '意見或建議',
                rules: {
                  required: true
                },
                // debounce validate
                // if set to true, the default debounce time will be 200(ms)
                debounce: 100
              },
              {
                type: 'upload',
                modelKey: 'uploadValue',
                label: '上傳圖片',
                events: {
                  'file-removed': (...args) => {
                    console.log('file removed', args)
                  }
                },
                rules: {
                  required: true,
                  uploaded: (val, config) => {
                    return Promise.all(
                      val.map((file, i) => {
                        return new Promise((resolve, reject) => {
                          if (file.uploadedUrl) {
                            return resolve()
                          }
                          // fake request
                          setTimeout(() => {
                            if (i % 2) {
                              reject(new Error())
                            } else {
                              file.uploadedUrl = 'uploaded/url'
                              resolve()
                            }
                          }, 1000)
                        })
                      })
                    ).then(() => {
                      return true
                    })
                  }
                },
                messages: {
                  uploaded: '上傳失敗'
                }
              },
              {
                type: 'checkbox',
                modelKey: 'checkboxValue',
                props: {
                  option: {
                    label: '匿名',
                    value: true
                  }
                },
                rules: {
                  required: false
                },
                messages: {
                  required: 'Please check this field'
                }
              },
              {
                type: 'input',
                modelKey: 'inputValue',
                label: '手機號',
                props: {
                  placeholder: '請輸入您的聯絡方式'
                },
                rules: {
                  required: true
                },
                // validating when blur
                trigger: 'blur'
              }

            ]
          },
          {
            fields: [
              {
                type: 'submit',
                label: '提交'
              },
              {
                type: 'reset',
                label: '重置'
              }
            ]
          }
        ]
      },
      options: {
        // [x:string]: 1;
        scrollToInvalidField: true,
        layout: 'standard' // classic fresh
      }
    }
  },
  methods: {
    submitHandler(e) {
      let teldata = new FormData()
      teldata.append('mobile', this.loginForm.tel) // 手機號
      teldata.append('environment', this.loginForm.tel) // 環境
      teldata.append('service', this.loginForm.tel) // 服務態度
      teldata.append('detail', this.loginForm.tel) // 詳情描述
      teldata.append('IsAnonymous', this.loginForm.tel) // 是否匿名
      teldata.append('inputFile', this.loginForm.tel) // 上傳圖片 不是必須
      this.axios.post('/api/sms/send', teldata)
      .then(function (res) {
        console.log(res)
        if (res.data.status === 200) {

        } else {
          console.log('請求失敗')
        }
      }, function (error) {
        console.log('請求出錯', error)
      })
      this.$router.push('/main')
      e.preventDefault()
      console.log('submit', e)
    },
    validateHandler(result) {
      this.validity = result.validity
      this.valid = result.valid
      console.log(
        'validity',
        result.validity,
        result.valid,
        result.dirty,
        result.firstInvalidFieldIndex
      )
    },
    resetHandler(e) {
      console.log('reset', e)
    }
  }
}
</script>

<style lang="stylus" scoped>
.star-wrapper {
  margin-top: 10px;
  margin-left: 20px;
  padding: 2px 0;
  text-align: left;
  line-height: 40px;

  .rate-item {
    width: 50%;
    height: 50%;
    background-size: 50%;
    background-color: grey;

    .cube-rate-item.active, .rate-item {
      background-color: orange;
    }
  }
}

.info {
  margin: 0 20px;
}
</style>

相關文章