up

package-lock.json

@@ -8,6 +8,7 @@
       "name": "zifubao",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^0.27.2",
         "core-js": "^3.6.5",
         "element-ui": "^2.15.8",
         "vant": "^2.12.47",
@@ -3086,8 +3087,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/atob": {
       "version": "2.1.2",
@@ -3134,6 +3134,28 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
@@ -4305,7 +4327,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -5458,7 +5479,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -6544,7 +6564,6 @@
       "version": "1.14.9",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.9.tgz",
       "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       },
@@ -8658,7 +8677,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -8667,7 +8685,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -16807,8 +16824,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "atob": {
       "version": "2.1.2",
@@ -16843,6 +16859,27 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
@@ -17854,7 +17891,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -18795,8 +18831,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
     },
     "depd": {
       "version": "2.0.0",
@@ -19712,8 +19747,7 @@
     "follow-redirects": {
       "version": "1.14.9",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.14.9.tgz",
-      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
-      "dev": true
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -21414,14 +21448,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }

package.json

@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.8",
     "vant": "^2.12.47",

src/api/api.js

@@ -0,0 +1,9 @@
+import axios from './request'
+// 用户登录接口
+export const alipaySave = (data) => {
+  return axios({
+    method: 'post',
+    url: '/api/alipay/save',
+    data
+  })
+}

src/api/request.js

@@ -0,0 +1,38 @@
+import axios from 'axios'
+const service = axios.create({
+  baseURL: 'http://192.168.0.135:8109', // 本地调试
+  // baseURL: '', // 线上调试
+  // baseURL: '', // build
+  timeout: 5000
+})
+// // 请求拦截器
+// service.interceptors.request.use(function (config) {
+//   // console.log('触发拦截器')
+//   // 在发送请求之前做些什么：看看有没有token，如果有通过请求头的方式传递token
+//   const token = localStorage.getItem('CQLJXU_token')
+//   if (token) { // 判断是否有token,有，则
+//     // config.headers['Authorization'] = token
+//     config.headers.token = token
+//   }
+
+//   return config
+// }, function (error) {
+//   // 对请求错误做些什么
+//   return Promise.reject(error)
+// })
+
+// // 添加响应拦截器
+// service.interceptors.response.use(function (response) {
+//   // console.log('触发相应拦截器', response)
+//   // 对响应数据做点什么--response就是发送每个请求的返回值
+//   if (response.data.code === 5001 || response.data.code === 5002) {
+//     // Toast.fail('未登录，请先登录')
+//     localStorage.removeItem('CQLJXU_token')
+//   }
+//   return response.data
+// }, function (error) {
+//   // 对响应错误做点什么
+//   return Promise.reject(error)
+// })
+
+export default service

src/assets/base.css

@@ -57,8 +57,8 @@ img {
   margin-left: 0 !important;
 }
 .el-form-item__content{
-  height: 30px;
-  line-height: 30px;
+  height: 30px ;
+  /* line-height: 30px; */
 }
 .el-input{
   border: none;
@@ -95,4 +95,7 @@ img {
   width: 50px;
   height: 50px;
   background-color: transparent;
+}
+.el-message-box{
+  width: 100vw !important;
 }

src/views/Home.vue

@@ -36,13 +36,23 @@
           <el-input class="noneInp" placeholder="(展馆或者展品美照)"></el-input>
         </el-form-item>
         <div class="row">
+          <!-- 上传成功之后的图片列表 -->
+          <div class="imgList" v-for="item in imgList" :key="item">
+            <div class="smak el-icon-close" @click="delImg(item)"></div>
+            <img :src="baseUrl + item" alt="" />
+          </div>
           <el-upload
-            action="https://jsonplaceholder.typicode.com/posts/"
-            list-type="picture-card"
-            :on-preview="handlePictureCardPreview"
-            :on-remove="handleRemove"
+            v-if="imgList.length < 5"
+            ref="upload"
+            class="avatar-uploader"
+            :action="baseUrl + '/api/alipay/upload'"
+            :show-file-list="true"
+            :before-upload="beforethumbUpload"
+            :on-success="upload_thumb_success"
           >
-            <i class="el-icon-plus"></i>
+            <div class="upImg">
+              <i slot="default" class="el-icon-plus"></i>
+            </div>
           </el-upload>
         </div>
 
@@ -55,41 +65,42 @@
           ></el-input>
         </el-form-item>
       </el-form>
-      <div class="fiveBtn">提交申请</div>
+      <div class="fiveBtn" @click="submit">提交申请</div>
     </div>
     <div class="seven" @click="$router.push('/Recruiting')">
       <div>立 即 咨 询</div>
     </div>
-    <!-- 查看上传的图片 -->
-    <el-dialog :visible="dialogVisible">
-      <img width="100%" :src="dialogImageUrl" alt="" />
-    </el-dialog>
   </div>
 </template>
 
 <script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》 from '《组件路径》';
-
+import { alipaySave } from "../api/api";
 export default {
   name: "Home",
   components: {},
   data() {
     //这里存放数据
     return {
+      baseUrl: "http://192.168.0.135:8109",
       // 图片上传
-      dialogImageUrl: "",
-      dialogVisible: false,
-
+      imgList: [],
       ruleForm: {
         name: "",
         phone: "",
         unit: "",
         reason: "",
+        type: "model",
       },
       rules: {
         name: [{ required: true, message: "不能为空", trigger: "blur" }],
-        phone: [{ required: true, message: "不能为空", trigger: "blur" }],
+        phone: [
+          { required: true, message: "不能为空", trigger: "blur" },
+          {
+            pattern: /^1[3-9]\d{9}$/,
+            message: "请输入合法手机号",
+            trigger: "blur",
+          },
+        ],
         unit: [{ required: true, message: "不能为空", trigger: "blur" }],
         reason: [
           { required: true, message: "不能为空", trigger: "change" },
@@ -104,12 +115,70 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    handleRemove(file, fileList) {
-      console.log(file, fileList);
+    // 点击提交申请
+    async submit() {
+      if (this.imgList.length === 0) return this.$message.warning("请上传图片");
+      try {
+        await this.$refs.ruleForm.validate();
+        let temp = this.imgList.join(",");
+        let res = await alipaySave({ ...this.ruleForm, img: temp });
+        if (res.data.code === 0) {
+          this.$message.success("提交成功");
+          this.ruleForm = {
+            name: "",
+            phone: "",
+            unit: "",
+            reason: "",
+            type: "model",
+          };
+          this.imgList=[]
+          this.$refs.ruleForm.resetFields()
+        } else this.$message.error(res.data.msg);
+      } catch (error) {
+        console.log(error);
+      }
     },
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
+    // 删除照片
+    delImg(item) {
+      this.$confirm("确定删除吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.imgList = this.imgList.filter((v) => v !== item);
+          this.$message.success("删除成功");
+        })
+        .catch(() => {
+          this.$message.info("已取消");
+        });
+    },
+    // 上传图片
+    beforethumbUpload(file) {
+      // 限制图片大小和格式
+      const sizeOk = file.size / 1024 / 1024 < 10;
+      const typeOk =
+        file.type === "image/png" ||
+        (file.type === "image/jpeg" && !file.name.includes(".jfif")) ||
+        file.type === "image/gif";
+
+      return new Promise((resolve, reject) => {
+        if (!typeOk) {
+          this.$message.error("图片格式有误！");
+          reject(file);
+        } else if (!sizeOk) {
+          this.$message.error("图片大小超过10M！");
+          reject(file);
+        } else {
+          resolve(file);
+        }
+      });
+    },
+    async upload_thumb_success(data) {
+      this.$message.success("上传成功");
+      // console.log('图片上传成功', data)
+      this.imgList.push(data.data.filePath);
+      // this.imgListLook.push(this.baseURL + data.data.filePath);
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -206,7 +275,59 @@ export default {
     }
     .row {
       border-bottom: 1px solid #999;
+      display: flex;
       padding-bottom: 10px;
+      .imgList {
+        position: relative;
+        width: 50px;
+        height: 50px;
+        margin-right: 5px;
+        & > img {
+          width: 50px;
+          height: 50px;
+          object-fit: cover;
+        }
+        .smak {
+          position: absolute;
+          width: 100%;
+          height: 20px;
+          bottom: 0;
+          left: 0;
+          background-color: rgba(0, 0, 0, 0.5);
+          color: #fff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+      /deep/.avatar-uploader {
+        width: 50px;
+        height: 50px;
+      }
+      /deep/.el-upload-list__item-name {
+        display: none;
+      }
+      /deep/.el-icon-close {
+        display: none;
+      }
+      /deep/.el-upload-list__item-status-label {
+        display: none;
+      }
+      /deep/.el-upload-list__item .el-progress {
+        top: -12px;
+      }
+      /deep/.el-progress__text {
+        display: none;
+      }
+      /deep/.el-icon-plus {
+        font-size: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px dashed #ccc;
+        width: 50px;
+        height: 50px;
+      }
     }
     .fiveBtn {
       width: 160px;

src/views/Recruiting.vue

@@ -37,12 +37,13 @@
         </el-form-item>
       </el-form>
       <!-- 按钮 -->
-      <div class="btnn">提 交 申 请</div>
+      <div class="btnn" @click="submit">提 交 申 请</div>
     </div>
   </div>
 </template>
 
 <script>
+import { alipaySave } from "../api/api";
 export default {
   name: "Recruiting",
   components: {},
@@ -53,10 +54,18 @@ export default {
         name: "",
         phone: "",
         city: "",
+        type: "edu",
       },
       rules: {
         name: [{ required: true, message: "不能为空", trigger: "blur" }],
-        phone: [{ required: true, message: "不能为空", trigger: "blur" }],
+        phone: [
+          { required: true, message: "不能为空", trigger: "blur" },
+          {
+            pattern: /^1[3-9]\d{9}$/,
+            message: "请输入合法手机号",
+            trigger: "blur",
+          },
+        ],
         city: [{ required: true, message: "不能为空", trigger: "blur" }],
       },
     };
@@ -66,7 +75,26 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    // 点击提交
+    async submit() {
+      try {
+        await this.$refs.ruleForm.validate();
+        let res = await alipaySave(this.ruleForm);
+        if (res.data.code === 0) {
+          this.$message.success("提交成功");
+          this.ruleForm = {
+            name: "",
+            phone: "",
+            city: "",
+            type: "edu",
+          };
+        } else this.$message.error(res.data.msg);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
@@ -137,7 +165,7 @@ export default {
     /deep/.el-form-item {
       padding-bottom: 20px;
     }
-    .btnn{
+    .btnn {
       width: 202px;
       height: 40px;
       line-height: 40px;