[view-source:https://www.17sucai.com/preview/17147/2020-05-29/vue%E9%97%AE%E9%A2%98%E5%8F%8D%E9%A6%88/index.html](view-source:https://www.17sucai.com/preview/17147/2020-05-29/vue%E9%97%AE%E9%A2%98%E5%8F%8D%E9%A6%88/index.html)
| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> |
| | <meta http-equiv="X-UA-Compatible" content="ie=edge"> |
| | <title>问题反馈</title> |
| | <link rel="stylesheet" href="[css/style.css](https://www.17sucai.com/preview/17147/2020-05-29/vue%E9%97%AE%E9%A2%98%E5%8F%8D%E9%A6%88/css/style.css)"> |
| | <link rel="stylesheet" type="text/css" href="[css/common.css](https://www.17sucai.com/preview/17147/2020-05-29/vue%E9%97%AE%E9%A2%98%E5%8F%8D%E9%A6%88/css/common.css)" /> |
| | <link rel="stylesheet" type="text/css" href="[css/index.css](https://www.17sucai.com/preview/17147/2020-05-29/vue%E9%97%AE%E9%A2%98%E5%8F%8D%E9%A6%88/css/index.css)" /> |
| | </head> |
| | <body> |
| | <div class="vueBox" v-cloak id="app"> |
| | <div class="page-box"> |
| | <div class="suggest-title"> |
| | <span class="text-star">*</span> |
| | <span>问题类型</span> |
| | </div> |
| | <input @click="showProblemName" class="input-box" :value="problem_name" readonly="" type="text" placeholder="请选择问题类型"> |
| | <div class="suggest-title"> |
| | <span class="text-star">*</span> |
| | <span>问题描述</span> |
| | </div> |
| | <div class="area-box"> |
| | <textarea class="textarea-box" placeholder="请输入您的问题或建议" v-model="comment" :maxlength="maxlen"></textarea> |
| | <div class="amount-box"> |
| | <p class="amount-txt" v-text="lens"></p> |
| | <p class="amount-txt">/</p> |
| | <p class="amount-txt" v-text="maxlen"></p> |
| | </div> |
| | </div> |
| | <div class="suggest-title suggest-upload"> |
| | <p> |
| | <span>上传图片</span> |
| | <span class="text-tip" v-text="'（'+imgList.length+'/3）'"></span> |
| | </p> |
| | </div> |
| | <ul class="upload_warp_imgs"> |
| | <li v-for="(item,index) of imgList"> |
| | <img class="upload_img" :src="item.file.src" alt=""> |
| | <img :src="ico_del" class="upload_img_del" @click="fileDel(index)"> |
| | </li> |
| | <li class="upload_warp_btn" v-show="imgList.length<3"> |
| | <img class="ico-plus" :src="ico_plus"> |
| | <input id="file" @change="fileChange($event)" type="file" accept="image/*" class="upload_file" /> |
| | </li> |
| | </ul> |
| | <div class="suggest-title"> |
| | <span class="text-star">*</span> |
| | <span>联系方式</span> |
| | </div> |
| | <input class="input-box" maxlength="11" type="text" placeholder="请输入手机号" v-model="mobile"> |
| | <div class="btn-box"> |
| | <div :class="[is_can?'btn-submit':'btn-submit-opacity']" @click="submitMsg">确认提交</div> |
| | </div> |
| | </div> |
| | |
| | |
| | <mt-popup v-model="problemVisible" position="bottom"> |
| | <ul class="mint-popup-head"> |
| | <li @click="selectProblem(0)">取消</li> |
| | <li @click="selectProblem(1)">确认</li> |
| | </ul> |
| | <mt-picker :slots="problem_list" @change="problemChange" value-key="name"> </mt-picker> |
| | </mt-popup> |
| | </div> |
| | </body> |
| | <!-- 引入组件库 --> |
| | <script src="[js/vue.js](https://www.17sucai.com/preview/17147/2020-05-29/vue%E9%97%AE%E9%A2%98%E5%8F%8D%E9%A6%88/js/vue.js)"></script> |
| | <script src="[js/axios.min.js](https://www.17sucai.com/preview/17147/2020-05-29/vue%E9%97%AE%E9%A2%98%E5%8F%8D%E9%A6%88/js/axios.min.js)"></script> |
| | <script src="[js/index.js](https://www.17sucai.com/preview/17147/2020-05-29/vue%E9%97%AE%E9%A2%98%E5%8F%8D%E9%A6%88/js/index.js)"></script> |
| | <script src="[js/resize.js](https://www.17sucai.com/preview/17147/2020-05-29/vue%E9%97%AE%E9%A2%98%E5%8F%8D%E9%A6%88/js/resize.js)"></script> |
| | <script type="text/javascript"> |
| | var vm = new Vue({ |
| | el: '#app', |
| | data: { |
| | // 选择类型 |
| | problem_name: '', |
| | problemVisible: false, |
| | problem_list: [{ |
| | flex: 1, |
| | values: [{ |
| | "id": 11, |
| | "name": "类型一" |
| | }, { |
| | "id": 21, |
| | "name": "类型二" |
| | }, { |
| | "id": 21, |
| | "name": "类型三" |
| | }, { |
| | "id": 41, |
| | "name": "类型四" |
| | }, { |
| | "id": 51, |
| | "name": "类型五" |
| | }], |
| | textAlign: 'center' |
| | }], |
| | ico_plus: 'images/ico-plus.png', |
| | ico_del: 'images/ico-del.png', |
| | sid: '123', |
| | comment: '', |
| | maxlen: 200, |
| | mobile: '', |
| | imgList: [], |
| | is_submit: false |
| | }, |
| | computed: { |
| | lens: function() { |
| | var lens = 0; // 中文算2个字 |
| | for (i = 0; i < this.comment.length; i++) { |
| | if ((this.comment.charCodeAt(i) >= 0) && (this.comment.charCodeAt(i) <= 255)) |
| | lens = lens + 1; |
| | else |
| | lens = lens + 2; |
| | } |
| | return lens; |
| | }, |
| | is_can: function() { //控制提交按钮 |
| | return (this.comment && this.mobile && this.mobile.length >= 11) |
| | } |
| | }, |
| | created: function() { |
| | if (localStorage.getItem('mobile')) { |
| | this.mobile = localStorage.getItem('mobile') |
| | } |
| | }, |
| | methods: { |
| | // 类型弹窗 |
| | showProblemName: function() { |
| | this.problemVisible = true; |
| | if (!this.problem_temp) { |
| | this.problem_temp = this.problem_list[0].values[0].name; |
| | } |
| | }, |
| | problemChange: function(picker, values) { |
| | if (picker.getSlotValue(0)) { |
| | this.problem_temp = picker.getSlotValue(0).name |
| | } |
| | }, |
| | selectProblem: function(bool) { |
| | // bool 判断 触发的是取消还是确认按钮 |
| | this.problem_name = bool ? this.problem_temp : this.problem_name; |
| | this.problemVisible = false |
| | }, |
| | // 图片上传 |
| | fileChange: function(el) { |
| | if (!el.target.files[0].size) return; |
| | this.fileList(el.target.files); |
| | el.target.value = ''; |
| | }, |
| | fileList: function(files) { |
| | for (var i = 0; i < files.length; i++) { |
| | this.fileAdd(files[i]); |
| | } |
| | }, |
| | fileAdd: function(file) { |
| | var that = this; |
| | var reader = new FileReader(); |
| | reader.readAsDataURL(file); |
| | reader.onload = function() { |
| | file.src = reader.result; |
| | that.imgList.push({ |
| | file: file |
| | }); |
| | } |
| | }, |
| | fileDel: function(index) { |
| | this.imgList.splice(index, 1); |
| | }, |
| | //提交数据 |
| | submitMsg: function() { |
| | if (this.instance) { |
| | this.instance.close() |
| | } |
| | if (!this.problem_name) { |
| | this.instance = this.$toast({ |
| | message: '请选择问题类型！', |
| | duration: 1000 |
| | }); |
| | return |
| | } |
| | if (!this.comment) { |
| | this.instance = this.$toast({ |
| | message: '请输入您的问题或建议！', |
| | duration: 1000 |
| | }); |
| | return |
| | } |
| | if (this.mobile.length < 11) { |
| | this.instance = this.$toast({ |
| | message: '请输入正确的手机号码', |
| | duration: 1000 |
| | }); |
| | return |
| | } |
| | if (this.is_submit) { |
| | return false |
| | } |
| | this.is_submit = true; |
| | localStorage.setItem('mobile', this.mobile); |
| | // 整合数据 |
| | var formData = new FormData(); |
| | formData.append("platform", this.platform); |
| | formData.append("sid", this.sid); |
| | formData.append("mobile", this.mobile); |
| | formData.append("comment", this.comment); |
| | for (var i = 0; i < this.imgList.length; i++) { |
| | formData.append("imgs", this.imgList[i].file); |
| | } |
| | // 测试打印数据 |
| | console.log('mobile', formData.get('mobile')); |
| | console.log('comment', formData.get('comment')); |
| | console.log('imgs', formData.getAll('imgs')); |
| | |
| | var url = ''; |
| | var that = this; |
| | // 模拟提交 |
| | axios.post(url, formData) |
| | .then(function(resp) { |
| | if (resp.error_code == 0) { |
| | setTimeout(function() { |
| | that.is_submit = false; |
| | }, 1200) |
| | } else { |
| | that.is_submit = true; |
| | } |
| | }) |
| | .catch(function(er) { |
| | that.is_submit = false; |
| | }) |
| | } |
| | } |
| | }); |
| | </script> |
| | </html> |
| | |
网友评论