|
|
@@ -0,0 +1,250 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>故障维修</title>
|
|
|
+ <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
|
+ <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
|
+
|
|
|
+ <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css">
|
|
|
+ <script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
|
|
|
+ <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
|
|
|
+ <style>
|
|
|
+ *{
|
|
|
+ margin:0;
|
|
|
+ padding:0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ body,html{
|
|
|
+ background:#F4F8FB;
|
|
|
+ }
|
|
|
+ .container{
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ background:#F4F8FB;
|
|
|
+ background:url('/images/custom/bg.png') no-repeat top;
|
|
|
+ background-size:100%;
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ padding:15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ background:white;
|
|
|
+ width:100%;
|
|
|
+ border-radius: 20px;
|
|
|
+ margin-top:180px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding:20px;
|
|
|
+ padding-bottom:10px;
|
|
|
+ }
|
|
|
+ .submit{
|
|
|
+ background:#3F6FFF;
|
|
|
+ border-radius: 30px;
|
|
|
+ width:100%;
|
|
|
+ color:white;
|
|
|
+ border:none;
|
|
|
+ margin:20px 0;
|
|
|
+ padding:10px;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ padding-bottom:10px;
|
|
|
+ border-bottom: 1px solid #F0F0F0;
|
|
|
+ background:white;
|
|
|
+ margin-bottom:20px;
|
|
|
+ }
|
|
|
+ .border_none{
|
|
|
+ border:none;
|
|
|
+ margin-bottom:0;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ display:flex;
|
|
|
+ align-items: center;
|
|
|
+ background:white;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ margin-top:0;
|
|
|
+ color:red;
|
|
|
+ background:white;
|
|
|
+ width:7px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ font-size:13px;
|
|
|
+ background:white;
|
|
|
+ }
|
|
|
+ input{
|
|
|
+ font-size:14px;
|
|
|
+ margin-top:0px;
|
|
|
+ padding:5px 7px;
|
|
|
+ width:100%;
|
|
|
+ border:none;
|
|
|
+ background:white;
|
|
|
+ }
|
|
|
+ .file{
|
|
|
+ margin-top:5px;
|
|
|
+ margin-left:7px;
|
|
|
+ }
|
|
|
+ .van-toast{
|
|
|
+ background:black;
|
|
|
+ }
|
|
|
+ .nav {
|
|
|
+ text-align: center;
|
|
|
+ margin: 8px auto;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+<div id="app">
|
|
|
+ <div class="container">
|
|
|
+ <div class="nav">故障记录</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="item">
|
|
|
+ <div class="title">
|
|
|
+ <span>*</span>
|
|
|
+ <p>故障地点及状态描述</p>
|
|
|
+ </div>
|
|
|
+ <input type="text" placeholder="请填写响应内容" v-model="describe">
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="title">
|
|
|
+ <span>*</span>
|
|
|
+ <p>申诉人</p>
|
|
|
+ </div>
|
|
|
+ <input type="text" placeholder="请填写申诉人姓名" v-model="people">
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="title">
|
|
|
+ <span>*</span>
|
|
|
+ <p>申诉电话</p>
|
|
|
+ </div>
|
|
|
+ <input type="text" placeholder="请填写相关电话" v-model="phone">
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="title">
|
|
|
+ <span></span>
|
|
|
+ <p>其他事项</p>
|
|
|
+ </div>
|
|
|
+ <input type="text" placeholder="请填写其他事项" v-model="other">
|
|
|
+ </div>
|
|
|
+ <div class="item border_none">
|
|
|
+ <div class="title">
|
|
|
+ <span>*</span>
|
|
|
+ <p>现场照片</p>
|
|
|
+ </div>
|
|
|
+ <van-uploader v-model="picture" :after-read="uploadImage" :deletable="false" multiple :max-count="9" class="file">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button class="submit" @click="submit">提交</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ // import { showToast } from 'vant';
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ new Vue({
|
|
|
+ el:'#app',
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ describe:'',
|
|
|
+ people:'',
|
|
|
+ phone:'',
|
|
|
+ other:'',
|
|
|
+ picture:[],
|
|
|
+ id_list:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ submit(){
|
|
|
+ if(this.describe == ''){
|
|
|
+ vant.Toast('故障地点及状态描述不能为空');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(this.people == ''){
|
|
|
+ vant.Toast('申诉人不能为空');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(this.phone == ''){
|
|
|
+ vant.Toast('申诉电话不能为空');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let reg = /^1[3456789][0-9]{9}$/
|
|
|
+ if (!reg.test(this.phone)) {
|
|
|
+ vant.Toast('手机号码格式不正确');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.picture.length == 0){
|
|
|
+ vant.Toast('请上传现场照片');
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const data = {
|
|
|
+ site:this.describe,
|
|
|
+ reporter:this.people,
|
|
|
+ mobile:this.phone,
|
|
|
+ other_info:this.other,
|
|
|
+ pic:this.id_list
|
|
|
+ }
|
|
|
+ console.log(data)
|
|
|
+
|
|
|
+ // const formData = new FormData();
|
|
|
+ // formData.append('site', this.describe);
|
|
|
+ // formData.append('reporter', this.people);
|
|
|
+ // formData.append('mobile', this.phone);
|
|
|
+ // formData.append('other_info', this.other);
|
|
|
+ // formData.append('pic', this.id_list);
|
|
|
+
|
|
|
+ // axios.post('http://oa.test/api.php?m=openRepairFault&a=add&openkey=d9302364e2a2d9fdcab2707a46fbab5a',data)
|
|
|
+
|
|
|
+ axios({
|
|
|
+ method: 'post',
|
|
|
+ url: 'http://zq.oa.nxjiewei.com:8011/api.php?m=openRepairFault&a=add&openkey=d9302364e2a2d9fdcab2707a46fbab5a',
|
|
|
+ data: JSON.stringify(data),
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'multipart/form-data'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(function (res) {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ .catch(function (error) {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ uploadImage(file) {
|
|
|
+ const files = file.file;
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', files);
|
|
|
+
|
|
|
+ axios({
|
|
|
+ method: 'post',
|
|
|
+ url: 'http://zq.oa.nxjiewei.com:8011/api.php?m=openupfile&a=upfile&openkey=d9302364e2a2d9fdcab2707a46fbab5a',
|
|
|
+ data: formData,
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'multipart/form-data'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ console.log('上传成功:', response);
|
|
|
+ this.id_list.push(response.data.id)
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.error('上传失败:', error);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
