|
|
@@ -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;
|
