|
@@ -28,7 +28,7 @@
|
|
|
]"
|
|
|
>
|
|
|
<div style="width: 300px !important">
|
|
|
- <el-upload
|
|
|
+ <!-- <el-upload
|
|
|
class="avatar-uploader"
|
|
|
action="/api-web/uploadFile"
|
|
|
accept=".png"
|
|
@@ -40,27 +40,17 @@
|
|
|
>
|
|
|
<img v-if="form.logo" :src="form.logo" class="avatar" />
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
- </el-upload>
|
|
|
- <!-- <image-cropper :options="cropperOptions" :imgSize="3" :imgType="imgType" :imageUrl="imgUrl" @crop-upload-close="cropClose" @crop-upload-success="cropSuccess" /> -->
|
|
|
+ </el-upload> -->
|
|
|
+ <image-cropper :options="cropperOptions" :disabled="isDisabled" :imgSize="2" :accept="acceptUpload" :imageUrl="form.logo" @crop-upload-close="cropClose" @crop-upload-success="cropSuccess" />
|
|
|
<div
|
|
|
class="tips"
|
|
|
v-show="!isDisabled"
|
|
|
style="line-height: 1;color: red;"
|
|
|
>
|
|
|
- 仅支持图片尺寸:72x72;格式:png;
|
|
|
+ 仅支持图片格式:png,大小:2MB;
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="机构简介" prop="remark">
|
|
|
- <el-input
|
|
|
- type="textarea"
|
|
|
- show-word-limit
|
|
|
- :max="200"
|
|
|
- :disabled="isDisabled"
|
|
|
- v-model.trim="form.remark"
|
|
|
- placeholder="请输入机构简介"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
<!-- <el-form-item label="主题" v-if="tenantInfo == 'SETTING'" prop="theme" :rules="[{ required: true, message: '请选择主题', trigger: 'change' }]">
|
|
|
<el-select
|
|
|
v-model="form.theme"
|
|
@@ -72,6 +62,92 @@
|
|
|
</el-select>
|
|
|
</el-form-item> -->
|
|
|
<el-form-item
|
|
|
+ label="企业公章"
|
|
|
+ prop="corporateChops"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请上企业公章',
|
|
|
+ trigger: 'blur, change'
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <div style="width: 300px !important" class="ant-upload-preview">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ :class="[isDisabled || tenantInfo == 'SETTING' ? 'uploadDisabled' : null]"
|
|
|
+ action="/api-web/uploadFile"
|
|
|
+ accept=".png"
|
|
|
+ :headers="headers"
|
|
|
+ :show-file-list="false"
|
|
|
+ :disabled="isDisabled || tenantInfo == 'SETTING'"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ >
|
|
|
+ <img v-if="form.corporateChops" :src="form.corporateChops" class="avatar" />
|
|
|
+ <span v-else>
|
|
|
+ <i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ <span class="upload-desc">添加上传图片</span>
|
|
|
+ </span>
|
|
|
+ </el-upload>
|
|
|
+ <div
|
|
|
+ class="tips"
|
|
|
+ v-show="!isDisabled && tenantInfo != 'SETTING'"
|
|
|
+ style="line-height: 1;color: red;"
|
|
|
+ >
|
|
|
+ 仅支持图片格式:png,大小:2MB;
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="企业财务公章"
|
|
|
+ prop="corporateFinanceChops"
|
|
|
+ :rules="[
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请上传企业财务公章',
|
|
|
+ trigger: 'blur, change'
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <div style="width: 300px !important" class="ant-upload-preview">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ :class="[isDisabled || tenantInfo == 'SETTING' ? 'uploadDisabled' : null]"
|
|
|
+ action="/api-web/uploadFile"
|
|
|
+ accept=".png"
|
|
|
+ :headers="headers"
|
|
|
+ :show-file-list="false"
|
|
|
+ :disabled="isDisabled || tenantInfo == 'SETTING'"
|
|
|
+ :on-success="handleAvatarSuccess2"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ >
|
|
|
+ <img v-if="form.corporateFinanceChops" :src="form.corporateFinanceChops" class="avatar" />
|
|
|
+ <span v-else>
|
|
|
+ <i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ <span class="upload-desc">添加上传图片</span>
|
|
|
+ </span>
|
|
|
+ </el-upload>
|
|
|
+ <div
|
|
|
+ class="tips"
|
|
|
+ v-show="!isDisabled && tenantInfo != 'SETTING'"
|
|
|
+ style="line-height: 1;color: red;"
|
|
|
+ >
|
|
|
+ 仅支持图片格式:png,大小:2MB;
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="机构简介" prop="remark">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ show-word-limit
|
|
|
+ :max="200"
|
|
|
+ :disabled="isDisabled"
|
|
|
+ v-model.trim="form.remark"
|
|
|
+ placeholder="请输入机构简介"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
label="主题"
|
|
|
v-if="tenantInfo == 'SETTING'"
|
|
|
prop="theme"
|
|
@@ -332,7 +408,9 @@ export default {
|
|
|
customerServicePhone: null,
|
|
|
remark: null,
|
|
|
theme: "adenGreen",
|
|
|
- themeColor: "#00A79D"
|
|
|
+ themeColor: "#00A79D",
|
|
|
+ corporateChops: null,
|
|
|
+ corporateFinanceChops: null,
|
|
|
},
|
|
|
errorPhone: null, // 手机号存在错误信息
|
|
|
payState: null,
|
|
@@ -342,14 +420,13 @@ export default {
|
|
|
cityList: [],
|
|
|
cropperOptions: {
|
|
|
autoCrop: true, //是否默认生成截图框
|
|
|
- autoCropWidth: 200, //默认生成截图框宽度
|
|
|
- autoCropHeight: 200, //默认生成截图框高度
|
|
|
- fixedBox: false, //是否固定截图框大小 不允许改变
|
|
|
+ autoCropWidth: 72, //默认生成截图框宽度
|
|
|
+ autoCropHeight: 72, //默认生成截图框高度
|
|
|
+ fixedBox: true, //是否固定截图框大小 不允许改变
|
|
|
previewsCircle: false, //预览图是否是圆形
|
|
|
- title: '上传广告图片' //模态框上显示的标题
|
|
|
+ title: '上传机构LOGO', //模态框上显示的标题
|
|
|
},
|
|
|
- imgType: 'testUp', //图片存储在oss上的上级目录名
|
|
|
- imgUrl: '', //上传图片所得到的地址
|
|
|
+ acceptUpload: '.png', // 上传支持格式
|
|
|
};
|
|
|
},
|
|
|
async mounted() {
|
|
@@ -401,8 +478,9 @@ export default {
|
|
|
},
|
|
|
//上传图片成功
|
|
|
cropSuccess(data) {
|
|
|
- this.imgUrl = data.data.avatar
|
|
|
- console.log(this.imgUrl)
|
|
|
+ // this.imgUrl = data.data.avatar
|
|
|
+ this.form.logo = data.data.url;
|
|
|
+ console.log(this.form.logo)
|
|
|
},
|
|
|
themeChange(item) {
|
|
|
// 切换主题时设置跟主题对应的主题色
|
|
@@ -480,7 +558,10 @@ export default {
|
|
|
return this.form;
|
|
|
},
|
|
|
handleAvatarSuccess(res) {
|
|
|
- this.form.logo = res.data.url;
|
|
|
+ this.form.corporateChops = res.data.url;
|
|
|
+ },
|
|
|
+ handleAvatarSuccess2(res) {
|
|
|
+ this.form.corporateFinanceChops = res.data.url;
|
|
|
},
|
|
|
// handleAvatarSuccess(res, file, fileList) {
|
|
|
// //上传成功后将图片地址赋值给裁剪框显示图片
|
|
@@ -512,40 +593,7 @@ export default {
|
|
|
this.$message.error("上传头像图片大小不能超过 2MB!");
|
|
|
return false;
|
|
|
}
|
|
|
- const imageWidth = this.imageWidthM;
|
|
|
- const imageHeigh = this.imageHeightM;
|
|
|
- const _URL = window.URL || window.webkitURL;
|
|
|
- const isSize = new Promise((resolve, reject) => {
|
|
|
- const img = new Image();
|
|
|
- img.onload = function() {
|
|
|
- if (imageWidth && imageHeigh) {
|
|
|
- this.width === imageWidth && this.height === imageHeigh
|
|
|
- ? resolve()
|
|
|
- : reject(`请上传${imageWidth}x${imageHeigh}尺寸图片`);
|
|
|
- } else if (imageWidth && !imageHeigh) {
|
|
|
- this.width === imageWidth
|
|
|
- ? resolve()
|
|
|
- : reject(`请上传宽为${imageWidth}的图片`);
|
|
|
- } else if (!imageWidth && imageHeigh) {
|
|
|
- this.height === imageHeigh
|
|
|
- ? resolve()
|
|
|
- : reject(`请上传高为${imageHeigh}的图片`);
|
|
|
- } else {
|
|
|
- resolve();
|
|
|
- }
|
|
|
- };
|
|
|
- img.src = _URL.createObjectURL(file);
|
|
|
- }).then(
|
|
|
- () => {
|
|
|
- return file;
|
|
|
- },
|
|
|
- src => {
|
|
|
- this.$message.error(src);
|
|
|
- this.uploadImgLoading = false;
|
|
|
- return Promise.reject();
|
|
|
- }
|
|
|
- );
|
|
|
- return isImage && isLt2M && isSize;
|
|
|
+ return isImage && isLt2M;
|
|
|
},
|
|
|
validatePhone(rule, value, callback) {
|
|
|
if (this.errorPhone) {
|
|
@@ -558,33 +606,62 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-/deep/.avatar-uploader .el-upload {
|
|
|
+.ant-upload-preview {
|
|
|
+ background-color: #fff;
|
|
|
+ .avatar-uploader {
|
|
|
+ .upload-desc {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ color: #ccc;
|
|
|
+ font-size: 8px;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep .avatar-uploader .el-upload--text {
|
|
|
border: 1px dashed #d9d9d9;
|
|
|
border-radius: 6px;
|
|
|
+ margin-right: 20px;
|
|
|
cursor: pointer;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
- background: #e7e7e7;
|
|
|
}
|
|
|
-.avatar-uploader-icon {
|
|
|
- font-size: 28px;
|
|
|
- color: #8c939d;
|
|
|
- width: 72px;
|
|
|
- height: 72px;
|
|
|
- line-height: 72px;
|
|
|
+::v-deep .avatar-uploader.uploadDisabled {
|
|
|
+ .el-upload--text {
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ .el-upload:hover {
|
|
|
+ border-color: #d9d9d9;
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep .avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+::v-deep .avatar-uploader-icon {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #ccc;
|
|
|
+ width: 108px;
|
|
|
+ height: 108px;
|
|
|
+ line-height: 108px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+::v-deep.avatar {
|
|
|
+ width: 108px;
|
|
|
+ height: 108px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
|
|
|
.el-input,
|
|
|
.el-select,
|
|
|
.el-textarea {
|
|
|
width: 300px !important;
|
|
|
}
|
|
|
-.avatar {
|
|
|
- width: 72px;
|
|
|
- height: 72px;
|
|
|
- display: block;
|
|
|
-}
|
|
|
+// .avatar {
|
|
|
+// width: 72px;
|
|
|
+// height: 72px;
|
|
|
+// display: block;
|
|
|
+// }
|
|
|
.themeColor-block {
|
|
|
width: 30px;
|
|
|
height: 30px;
|