Skip to content

P
pica.cloud.web-education-admin
提交 92e0140d 编写于 作者: alex.zhang's avatar alex.zhang
浏览文件
操作

Merge branch 'dev-yqLive-20200611' of... 

Merge branch 'dev-yqLive-20200611' of 192.168.110.53:com.pica.cloud.education.frontend/pica.cloud.web-education-admin into dev-yqLive-20200611
上级 23c3faab 441fbe18
隐藏空白字符变更
内嵌 并排
正在显示 包含 419 行增加 和 386 行删除
src/components/yqrange/baseinfo.vue 0 → 100644
浏览文件 @ 92e0140d
<template>
<el-form ref="formData" :model="formData" :rules="rules" label-width="150px" label-suffix="：" class="basic-form">
<el-form-item label="圈子名称" prop="projectName">
<el-col :span="13">
<el-input size="small" v-model="formData.projectName" placeholder="请输入圈子名称" style="width:70%;"></el-input>
<span class="word-num">{{(formData.projectName).replace(/\s+/g,"").length}}/24</span>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="圈子头像" class="required-label">
<el-upload v-model="formData.imgUrl1" class="bg-uploader" action="#" :show-file-list="false"
:before-upload="beforeUploadPic1">
<img v-if="formData.imgUrl1" :src="formData.imgUrl1" @mouseover.stop="imgMouseOver1=true" class="bg-img" />
<img v-if="!formData.imgUrl1" class="bg-img" src="../../assets/image/small.png" />
<div class="img-delete" v-show="imgMouseOver1" @click.stop="deleteImg(1)"
@mouseout.stop="imgMouseOver1=false">
<i class="el-icon-delete"></i>
</div>
<div class="limit-text">
<p>尺寸:48*48</p>
<p>限制大小: 500kb</p>
<p>支持.jpg,.png格式</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage1">请选择圈子头像</p>
</div>
<div class="basic-item-icon">
<el-form-item label="圈子封面" class="required-label">
<el-upload v-model="formData.imgUrl2" class="bg-uploader" action="#" :show-file-list="false"
:before-upload="beforeUploadPic2">
<img v-if="formData.imgUrl2" :src="formData.imgUrl2" @mouseover.stop="imgMouseOver2=true" class="bg-img" />
<img v-if="!formData.imgUrl2" class="bg-img" src="../../assets/image/small.png" />
<div class="img-delete" v-show="imgMouseOver2" @click.stop="deleteImg(2)"
@mouseout.stop="imgMouseOver2=false">
<i class="el-icon-delete"></i>
</div>
<div class="limit-text">
<p>尺寸:750*420</p>
<p>限制大小: 2Mb</p>
<p>支持.jpg,.png格式</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage2">请选择圈子头像</p>
</div>
<el-form-item label="圈子介绍" prop="introduce">
<el-col :span="13">
<el-input size="small" v-model="formData.introduce" placeholder="请输入圈子介绍" @change="returnTypeData('introduce')" style="width:70%;"></el-input>
<span class="word-num">{{(formData.introduce).replace(/\s+/g,"").length}}/24</span>
</el-col>
</el-form-item>
<el-form-item label="内容发布权限" prop="contentRole">
<el-select v-model="formData.contentRole" @change="returnTypeData('contentRole')" placeholder="请选择发布权限" size="small" clearable>
<el-option v-for="item in contentList" :key="item.value" :label="item.label" :value="item.label">
</el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
import { openLoading, closeLoading } from "../../utils/utils";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
export default {
name: "baseinfo",
props: {
formData: {
type: Object,
default: () => {
return {}
}
}
},
data() {
let checkProjectStr = (rule, value, callback) => {
if (value.indexOf("\\") != -1) {
//存在
callback(new Error("请勿输入字符“ \\ ”"));
} else if (value.indexOf(".") != -1) {
callback(new Error("请勿输入字符“ . ”"));
} else {
callback();
}
};
return {
rules: {
projectName: [
{ required: true, message: "请输入圈子名称", trigger: "blur" },
{
min: 2,
max: 24,
message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
trigger: "blur"
},
{ validator: checkProjectStr, trigger: "blur" }
],
introduce: [
{ required: true, message: "请输入圈子名称", trigger: "blur" },
{
min: 2,
max: 24,
message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
trigger: "blur"
},
{ validator: checkProjectStr, trigger: "blur" }
],
contentRole: [
{ required: true, message: "请选择内容发布权限", trigger: "blur" },
]
},
imgMouseOver1: false,
uploadImgMessage1: false,//未上传图片，校验提示语
imgMouseOver2: false,
uploadImgMessage2: false,
contentList: [
{
value: '1',
label: '所有人可发布动态'
}, {
value: '2',
label: '嘉宾可发布动态'
},
],
}
},
methods: {
returnTypeData(name) {
this.$emit('returnTypeData', {
name: name,
val: this.formData[name]
})}
,
//上传圈子头像
beforeUploadPic1(file) {
let fileLimit = {
width: 48,
height: 48,
size: 0.5,
sizeText: "500K",
key: "imgUrl1",
more: "imgUrl1More",
show: "uploadImgMessage1"
};
this.beforeUpload(file, fileLimit);
},
beforeUploadPic2(file) {
let fileLimit = {
width: 750,
height: 420,
size: 2,
sizeText: "2Mb",
key: "imgUrl2",
more: "imgUrl2More",
show: "uploadImgMessage2"
};
this.beforeUpload(file, fileLimit);
},
//上传图片
beforeUpload(file, fileLimit) {
let vm = this;
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
if (!isJPG && !isPNG) {
vm.$message.error("图片格式不符合规范，请根据规范上传图片");
// return;
}
if (!isLt2M) {
vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
// return;
}
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function (theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function () {
let _this = this;
if (_this.width != fileLimit.width || _this.height != fileLimit.height) {
vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
} else {
openLoading(vm);
doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function (path) {
closeLoading(vm);
console.log('上传成功后路径', path);
if (fileLimit.show == "uploadImgMessage1") {
vm.uploadImgMessage1 = false;
} else if (fileLimit.show == "uploadImgMessage2") {
vm.uploadImgMessage2 = false;
}
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size
};
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M;
},
//删除图片
deleteImg(type) {
if (type == 1) {
vm.formData.imgUrl1 = "";
vm.imgMouseOver1 = false;
}
}
}
}
</script>
<style lang="less">
.first-step {
margin-top: 20px;
.p-title {
padding-left: 10px;
margin-bottom: 15px;
}
.basic-item-icon {
position: relative;
.require {
position: absolute;
left: 67px;
top: 11px;
color: #f56c6c;
}
.upload-message {
position: absolute;
left: 160px;
top: 105px;
font-size: 12px;
color: #f56c6c;
}
.img-delete {
position: absolute;
left: 0px;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.line {
margin-left: 10px;
width: 20px;
}
.bg-uploader {
.bg-img {
float: left;
width: 84px;
height: 100px;
}
.limit-text {
float: left;
margin-left: 10px;
margin-top: -10px;
p {
font-size: 12px;
color: #999;
}
}
}
.el-upload__tip {
position: absolute;
top: -6px;
left: 130px;
}
}
.required-label .el-form-item__label::before {
content: '*';
color: #F56C6C;
margin-right: 4px;
}
</style>
\ No newline at end of file
src/router/range.js 0 → 100644
浏览文件 @ 92e0140d
<!-- 圈子router -->
\ No newline at end of file
src/views/yqrange/create-range.vue
浏览文件 @ 92e0140d
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<span class="step-num" :class="{ 'on-step': stepData[0] }">1</span> <span class="step-num" :class="{ 'on-step': stepData[0] }">1</span>
<el-step title="基础信息"></el-step> <el-step title="基础信息"></el-step>
<span class="step-num" :class="{ 'on-step': stepData[1] }">2</span> <span class="step-num" :class="{ 'on-step': stepData[1] }">2</span>
<el-step title="选择范围">2</el-step> <el-step title="选择成员">2</el-step>
</el-steps> </el-steps>
</el-col> </el-col>
<el-col :span="5" :offset="5"> <el-col :span="5" :offset="5">
...@@ -19,407 +19,129 @@ ...@@ -19,407 +19,129 @@
</el-row> </el-row>
<div class="first-step" v-if="active == 0"> <div class="first-step" v-if="active == 0">
<p class="p-title">基础信息</p> <p class="p-title">基础信息</p>
<el-form
ref="formData" <base-info :formData="formData" @returnTypeData="returnTypeData">
:model="formData" </base-info>
:rules="rules"
label-width="150px"
label-suffix="："
class="basic-form"
>
<el-form-item label="圈子名称" prop="projectName">
<el-col :span="13">
<el-input
size="small"
v-model="formData.projectName"
placeholder="请输入圈子名称"
style="width:70%;"
></el-input>
<span class="word-num">{{(formData.projectName).replace(/\s+/g,"").length}}/24</span>
</el-col>
</el-form-item>
<div class="basic-item-icon">
<el-form-item label="圈子头像" class="required-label">
<el-upload
v-model="formData.imgUrl1"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadPic1"
>
<img
v-if="formData.imgUrl1"
:src="formData.imgUrl1"
@mouseover.stop="imgMouseOver1=true"
class="bg-img"
/>
<img v-if="!formData.imgUrl1" class="bg-img" src="../../assets/image/small.png" />
<div
class="img-delete"
v-show="imgMouseOver1"
@click.stop="deleteImg(1)"
@mouseout.stop="imgMouseOver1=false"
>
<i class="el-icon-delete"></i>
</div>
<div class="limit-text">
<p>尺寸:48*48</p>
<p>限制大小: 500kb</p>
<p>支持.jpg,.png格式</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage1">请选择圈子头像</p>
</div>
<div class="basic-item-icon">
<el-form-item label="圈子封面" class="required-label">
<el-upload
v-model="formData.imgUrl2"
class="bg-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeUploadPic2"
>
<img
v-if="formData.imgUrl2"
:src="formData.imgUrl2"
@mouseover.stop="imgMouseOver2=true"
class="bg-img"
/>
<img v-if="!formData.imgUrl2" class="bg-img" src="../../assets/image/small.png" />
<div
class="img-delete"
v-show="imgMouseOver2"
@click.stop="deleteImg(2)"
@mouseout.stop="imgMouseOver2=false"
>
<i class="el-icon-delete"></i>
</div>
<div class="limit-text">
<p>尺寸:750*420</p>
<p>限制大小: 2Mb</p>
<p>支持.jpg,.png格式</p>
</div>
</el-upload>
</el-form-item>
<p class="upload-message" v-if="uploadImgMessage2">请选择圈子头像</p>
</div>
<el-form-item label="圈子介绍" prop="introduce">
<el-col :span="13">
<el-input
size="small"
v-model="formData.introduce"
placeholder="请输入圈子介绍"
style="width:70%;"
></el-input>
<span class="word-num">{{(formData.introduce).replace(/\s+/g,"").length}}/24</span>
</el-col>
</el-form-item>
<el-form-item label="内容发布权限" prop="contentRole">
<el-select v-model="formData.contentRole" placeholder="请选择发布权限" size="small" clearable>
<el-option
v-for="item in contentList"
:key="item.value"
:label="item.label"
:value="item.label"
></el-option>
</el-select>
</el-form-item>
</el-form>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import BreadCrumb from "@/components/breadcrumb.vue"; import BreadCrumb from "@/components/breadcrumb.vue";
import { openLoading, closeLoading } from "../../utils/utils"; import BaseInfo from '@/components/yqrange/baseinfo.vue';
import { doUpload, getFilePath } from "../../utils/qiniu-util"; export default {
export default { name: "create-range",
components: { components: {
BreadCrumb BreadCrumb,
}, BaseInfo
data() {
let checkProjectStr = (rule, value, callback) => {
if (value.indexOf("\\") != -1) {
//存在
callback(new Error("请勿输入字符“ \\ ”"));
} else if (value.indexOf(".") != -1) {
callback(new Error("请勿输入字符“ . ”"));
} else {
callback();
}
};
return {
curmbFirst: "云鹊小圈",
curmbSecond: "新建小圈",
active: 0,
//页面展示位置
stepData: [true, false, false],
showStorage: true,
formData: {
projectName: "",
imgUrl1: "",
imgUrl1More: {},
imgUrl2: "",
imgUrl2More: {},
introduce: "",
contentRole: ""
},
imgMouseOver1: false,
uploadImgMessage1: false, //未上传图片，校验提示语
imgMouseOver2: false,
uploadImgMessage2: false,
contentList: [
{
value: "1",
label: "所有人可发布动态"
},
{
value: "2",
label: "嘉宾可发布动态"
}
],
rules: {
projectName: [
{ required: true, message: "请输入圈子名称", trigger: "blur" },
{
min: 2,
max: 24,
message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
trigger: "blur"
},
{ validator: checkProjectStr, trigger: "blur" }
],
introduce: [
{ required: true, message: "请输入圈子名称", trigger: "blur" },
{
min: 2,
max: 24,
message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
trigger: "blur"
},
{ validator: checkProjectStr, trigger: "blur" }
],
contentRole: [
{ required: true, message: "请选择内容发布权限", trigger: "blur" }
]
}
};
},
methods: {
//上传圈子头像
beforeUploadPic1(file) {
let fileLimit = {
width: 48,
height: 48,
size: 0.5,
sizeText: "500K",
key: "imgUrl1",
more: "imgUrl1More",
show: "uploadImgMessage1"
};
this.beforeUpload(file, fileLimit);
},
beforeUploadPic2(file) {
let fileLimit = {
width: 750,
height: 420,
size: 2,
sizeText: "2Mb",
key: "imgUrl2",
more: "imgUrl2More",
show: "uploadImgMessage2"
};
this.beforeUpload(file, fileLimit);
}, },
//上传图片 data() {
beforeUpload(file, fileLimit) { return {
let vm = this; id: null,
const isJPG = file.type === "image/jpeg"; enterType: 1,//1.creat 2.edit
const isPNG = file.type === "image/png"; curmbFirst: '云鹊小圈',
const isLt2M = file.size / 1024 / 1024 < fileLimit.size; curmbSecond: '新建小圈',
if (!isJPG && !isPNG) { active: 0,
vm.$message.error("图片格式不符合规范，请根据规范上传图片"); //页面展示位置
// return; stepData: [true, false, false],
} showStorage: true,
if (!isLt2M) { formData: {
vm.$message.error("图片大小不符合规范，请根据规范上传图片 "); projectName: '',
// return; imgUrl1: '',
imgUrl1More: {},
imgUrl2: '',
imgUrl2More: {},
introduce: '',
contentRole: '',
}
} }
let _img = new FileReader();
_img.readAsDataURL(file);
_img.onload = function(theFile) {
let image = new Image();
image.src = theFile.target.result;
image.onload = function() {
let _this = this;
if (
_this.width != fileLimit.width ||
_this.height != fileLimit.height
) {
vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
} else {
openLoading(vm);
doUpload(
vm,
file,
getFilePath(file, null),
"preview4",
"progress1",
1
).then(function(path) {
closeLoading(vm);
console.log("上传成功后路径", path);
if (fileLimit.show == "uploadImgMessage1") {
vm.uploadImgMessage1 = false;
} else if (fileLimit.show == "uploadImgMessage2") {
vm.uploadImgMessage2 = false;
}
vm.formData[fileLimit.key] = path.fullPath;
vm.formData[fileLimit.more] = {
attachmentName: path.name,
attachmentExt: path.ext,
attachmentSize: path.size
};
vm.$message.success("上传成功");
});
}
};
};
return isJPG && isLt2M;
}, },
//删除图片 created() {
deleteImg(type) { // 根据ID是否有值判断编辑还是create
if (type == 1) { // debugger
vm.formData.imgUrl1 = ""; const { enterType, id } = this.$route.query;
vm.imgMouseOver1 = false; this.id = id;
this.enterType = enterType;
if (enterType == 1) {
//edit
console.log("add");
} else {
console.log("edit");
} }
}, },
//暂存 methods: {
storage() {}, //暂存
//下一步 storage() { },
nextStep() {}, //下一步
//完成 nextStep() {
complete() {} // debugger
if (this.enterType == 1) {
//edit
console.log("add");
} else {
console.log("edit");
}
},
//完成
complete() { },
returnTypeData(item) {
this.formData[item.name] = item.val
},
}
} }
};
</script> </script>
<style lang="scss"> <style lang="scss">
.yqrange-index-wrapper { .yqrange-index-wrapper {
.yqrange-index-content { .yqrange-index-content {
background: #fff; background: #fff;
padding: 10px; padding: 10px;
.step-content {
overflow: hidden; .step-content {
height: 60px; overflow: hidden;
padding: 15px 0 50px 0; height: 60px;
border-bottom: 1px solid #efefef; padding: 15px 0 50px 0;
.is-text { border-bottom: 1px solid #efefef;
display: none;
} .is-text {
.el-steps--simple { display: none;
background: #fff; }
padding: 10px 8%;
} .el-steps--simple {
.step-num { background: #fff;
display: block; padding: 10px 8%;
margin-top: 1.5px;
font-size: 12px;
border: 1px solid #999 !important;
border-radius: 50%;
width: 25px;
height: 18px;
line-height: 15px;
text-align: center;
color: #999;
}
.el-step__title.is-wait {
color: #999;
}
.el-step__title.is-process {
color: #449284;
}
.is-finish {
color: #999 !important;
}
.on-step {
color: #449284;
border: 1px solid #449284 !important;
}
}
.first-step {
margin-top: 20px;
.p-title {
padding-left: 10px;
margin-bottom: 15px;
}
.basic-item-icon {
position: relative;
.require {
position: absolute;
left: 67px;
top: 11px;
color: #f56c6c;
} }
.upload-message {
position: absolute; .step-num {
left: 160px; display: block;
top: 105px; margin-top: 1.5px;
font-size: 12px; font-size: 12px;
color: #f56c6c; border: 1px solid #999 !important;
border-radius: 50%;
width: 25px;
height: 18px;
line-height: 15px;
text-align: center;
color: #999;
} }
.img-delete {
position: absolute; .el-step__title.is-wait {
left: 0px; color: #999;
top: 0px;
width: 84px;
height: 100px;
background: #000;
opacity: 0.7;
z-index: 999;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
}
} }
}
.word-num { .el-step__title.is-process {
font-size: 12px; color: #449284;
color: #999;
padding-top: 5px;
}
.line {
margin-left: 10px;
width: 20px;
}
.bg-uploader {
.bg-img {
float: left;
width: 84px;
height: 100px;
} }
.limit-text {
float: left; .is-finish {
margin-left: 10px; color: #999 !important;
margin-top: -10px; }
p {
font-size: 12px; .on-step {
color: #999; color: #449284;
} border: 1px solid #449284 !important;
} }
}
.el-upload__tip {
position: absolute;
top: -6px;
left: 130px;
} }
} }
} }
} </style>
.required-label .el-form-item__label::before { \ No newline at end of file
content: "*";
color: #f56c6c;
margin-right: 4px;
}
</style>
src/views/yqrange/yq-range.vue
浏览文件 @ 92e0140d
...@@ -106,8 +106,9 @@ export default { ...@@ -106,8 +106,9 @@ export default {
}, },
//新建小圈 //新建小圈
createRange() { createRange() {
let enterType = 1;//1:add 2 edit
this.$router.push({ this.$router.push({
path: '/create-range', path: `/create-range?enterType=${enterType}`
}) })
}, },
//上线 //上线
...@@ -152,8 +153,13 @@ export default { ...@@ -152,8 +153,13 @@ export default {
}, },
//编辑 //编辑
editRange(row) { editRange(row) {
this.$router.push( { let enterType = 2;//1:add 2 edit
path: '/edit-range', this.$router.push({
path: `/create-range?enterType`,
query:{
id:row.id,
enterType:enterType
}
}) })
}, },
//解散圈子 //解散圈子
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或