Skip to content

E
ElectricitySheep
Commit 77e7abfd authored by Mac's avatar Mac
Browse files
Options

1

parent 536efbef
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 130 deletions
src/components/tradePavilion/addbrand.vue
View file @ 77e7abfd
...@@ -4,70 +4,154 @@ ...@@ -4,70 +4,154 @@
<span @click="CommonJump('lecturermanage')" class="blue point">品牌管理</span> / 编辑品牌管理 <span @click="CommonJump('lecturermanage')" class="blue point">品牌管理</span> / 编辑品牌管理
</div> </div>
<div class="content"> <div class="content">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px" style="width:50%"> <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px" style="width:70%">
<el-form-item label="品牌名称" prop="Name" class="is-required" size="small"> <el-form-item label="品牌分类" class="is-required" prop="BrandClassId">
<el-input v-model="addMsg.Name" placeholder="请输入品牌名称" /> <el-select class="w300" v-model="addMsg.BrandClassId" size="small" placeholder="请选择">
<el-option :key="0" label="请选择" :value="0"></el-option>
<el-option v-for="item in BrandClassList" :key="item.ID" :label="item.ClassName" :value="item.ID">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="品牌全名" prop="FullBrandName" class="is-required" size="small">
<el-input v-model="addMsg.FullBrandName" placeholder="请输入品牌全名" />
</el-form-item> </el-form-item>
<el-form-item label="头像" class="is-required" size="small"> <el-form-item label="品牌名" prop="BrandName" class="is-required" size="small">
<el-input v-model="addMsg.BrandName" placeholder="请输入品牌名" />
</el-form-item>
<el-form-item label="品牌视频" >
<el-input v-model="addMsg.VideoUrl" size="small" placeholder="请输入内容">
<el-button @click="changeState1 = true" slot="append">添加视频</el-button>
</el-input>
<a v-if="addMsg.VideoUrl != ''" class="blue noline" :href="addMsg.VideoUrl"
target="_blank">视频链接</a>
</el-form-item>
<el-form-item label="Logo" class="is-required" prop="Logo" size="small">
<el-button @click="openChangeDig(1)" size="small">选择文件</el-button> <el-button @click="openChangeDig(1)" size="small">选择文件</el-button>
<div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;"> <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;">
<img v-if="!addMsg.TeacherLogo || addMsg.TeacherLogo==''" src="../../assets/img/default.png" <img v-if="!addMsg.Logo || addMsg.Logo==''" src="../../assets/img/default.png"
style="width:80px;height:80px" alt=""> style="width:80px;height:80px" alt="">
<img v-else style="width:80px;height:80px" :src="addMsg.TeacherLogo" alt=""> <img v-else style="width:80px;height:80px" :src="addMsg.Logo" alt="">
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="关联用户" size="small"> <!-- <el-form-item label="品牌视频" size="small">-->
<el-select size="small" v-model="addMsg.UserId" filterable remote reserve-keyword placeholder="关联用户" <!-- <el-button @click="openChangeDig(1)" size="small">选择文件</el-button>-->
:remote-method="remoteMethod" :loading="loadingPeople"> <!-- <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;">-->
<el-option v-for="item in peopleData" :key="item.Id" :label="`${item.AliasName}`" :value="item.Id"> <!-- <img v-if="!addMsg.VideoUrl || addMsg.VideoUrl==''" src="../../assets/img/default.png"-->
</el-option> <!-- style="width:80px;height:80px" alt="">-->
</el-select> <!-- <img v-else style="width:80px;height:80px" :src="addMsg.VideoUrl" alt="">-->
<!-- </div>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="品牌介绍图" class="is-required" prop="BannerList" size="small">-->
<!-- <el-button @click="openChangeDig(1)" size="small">选择文件</el-button>-->
<!-- <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;">-->
<!-- <img v-if="!addMsg.BannerList || addMsg.BannerList==''" src="../../assets/img/default.png"-->
<!-- style="width:80px;height:80px" alt="">-->
<!-- <img v-else style="width:80px;height:80px" :src="addMsg.BannerList" alt="">-->
<!-- </div>-->
<!-- </el-form-item>-->
<el-form-item label="品牌介绍图">
<el-tooltip class="item" effect="dark" content="第一张图片为封面图" placement="top"
style="position: absolute;left: -22px;top:12px">
<i class="el-tooltip el-icon-info"></i>
</el-tooltip>
<p style="color:#c9c9c9;margin-bottom: 12px;">
第一张图片为缩略图,其它图片为轮播图,建议像素750*750,最多支持上传9张
</p>
<div class="nav_Main">
<div class="nav_IconContent">
<draggable v-model="addMsg.BannerList">
<div v-for="(item, index) in addMsg.BannerList" :key="index+'2'"
style="margin-right: 20px; position: relative; ">
<div class="colapp-image" :style="{
backgroundImage: 'url(' + item.Path + ')'
}"></div>
<el-button @click="ClearCarouse(index)" class="delBtn" type="danger" icon="el-icon-close"
circle></el-button>
</div>
</draggable>
</div>
<div @click="openChangeDig(2)" v-if="addMsg.BannerList.length<9"
class="add-image-btn 2222">
+ 添加图片
</div>
</div>
</el-form-item> </el-form-item>
<el-form-item label="电话" prop="Telephone" class="is-required" size="small">
<el-input v-model="addMsg.Telephone" placeholder="请输入电话" type="number" /> <el-form-item label="店铺数量" prop="ShopNum" class="is-required" size="small">
<el-input v-model="addMsg.ShopNum" placeholder="请输入店铺数量" type="number" />
</el-form-item> </el-form-item>
<el-form-item label="专业" prop="Major" class="is-required" size="small"> <el-form-item label="建筑面积" size="small">
<el-input v-model="addMsg.Major" placeholder="请输入专业" /> <el-input v-model="addMsg.BuiltUpArea" placeholder="请输入建筑面积" type="number" style="width: 40%;"/>
<span style="margin: 0 10px;">~</span>
<el-input v-model="addMsg.EndBuiltUpArea" placeholder="请输入建筑面积" type="number" style="width: 40%;"/>
</el-form-item> </el-form-item>
<el-form-item label="工作年限" prop="WorkYears" class="is-required" size="small"> <el-form-item label="需求面积" size="small">
<el-input v-model="addMsg.WorkYears" @keyup.native="checkInteger(addMsg,'WorkYears')" placeholder="请输入工作年限" /> <el-input v-model="addMsg.AreaRequirement" placeholder="请输入需求面积" type="number" style="width: 40%;"/>
<span style="margin: 0 10px;">~</span>
<el-input v-model="addMsg.EndAreaRequirement" placeholder="请输入需求面积" type="number" style="width: 40%;"/>
</el-form-item> </el-form-item>
<el-form-item label="品牌国籍" prop="Nationality" class="is-required" size="small"> <el-form-item label="客群定位" size="small">
<el-input v-model="addMsg.Nationality" /> <el-input v-model="addMsg.CustomerType" placeholder="请输入客群定位" />
</el-form-item> </el-form-item>
<el-form-item label="国旗" class="is-required" size="small"> <el-form-item label="品牌定位" size="small">
<el-button @click="openChangeDig(2)" size="small">选择文件</el-button> <el-input v-model="addMsg.BrandType" placeholder="请输入品牌定位" />
<div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;">
<img v-if="!addMsg.ForeignersUrl || addMsg.ForeignersUrl==''" src="../../assets/img/default.png"
style="width:80px;height:80px" alt="">
<img v-else style="width:80px;height:80px" :src="addMsg.ForeignersUrl" alt="">
</div>
</el-form-item> </el-form-item>
<el-form-item label="上架状态" size="small"> <el-form-item label="扩店区域" size="small">
<el-switch v-model="addMsg.TeacherStatus" active-color="#409EFF" :active-value="1" :inactive-value="2"> <el-input v-model="addMsg.StoreExpansion" placeholder="请输入扩店区域" />
</el-switch>
</el-form-item> </el-form-item>
<el-form-item label="标签" size="small"> <el-form-item label="商铺性质" size="small">
<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)"> <el-input v-model="addMsg.ProjectType" placeholder="请输入商铺性质" />
{{tag}} </el-form-item>
</el-tag> <el-form-item label="电量" prop="DianLiang" class="is-required" size="small">
<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" <el-input v-model="addMsg.DianLiang" placeholder="请输入电量" />
@keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 标签</el-button>
</el-form-item> </el-form-item>
<el-form-item label="擅长课程" size="small"> <!-- <el-form-item label="店铺开口尺寸" prop="ShopSize" class="is-required" size="small">-->
<el-tag :key="tag" v-for="tag in dynamicTags2" closable :disable-transitions="false" <!-- <el-input v-model="addMsg.ShopSize" placeholder="请输入店铺开口尺寸" />-->
@close="handleClose2(tag)"> <!-- </el-form-item>-->
{{tag}} <el-form-item label="上下水" class="is-required">
</el-tag> <el-radio v-model="addMsg.Plumbing" :label="1" >是</el-radio>
<el-input class="input-new-tag" v-if="inputVisible2" v-model="inputValue2" ref="saveTagInput2" size="small" <el-radio v-model="addMsg.Plumbing" :label="0" >否</el-radio>
@keyup.enter.native="handleInputConfirm2" @blur="handleInputConfirm2"> </el-form-item>
</el-input> <el-form-item label="管径" class="is-required">
<el-button v-else class="button-new-tag" size="small" @click="showInput2">+ 标签</el-button> <el-radio v-model="addMsg.Caliber" :label="1" >是</el-radio>
<el-radio v-model="addMsg.Caliber" :label="0" >否</el-radio>
</el-form-item>
<el-form-item label="排污" class="is-required">
<el-radio v-model="addMsg.Sewage" :label="1" >是</el-radio>
<el-radio v-model="addMsg.Sewage" :label="0" >否</el-radio>
</el-form-item>
<el-form-item label="燃气" class="is-required">
<el-radio v-model="addMsg.RanQi" :label="1" >是</el-radio>
<el-radio v-model="addMsg.RanQi" :label="0" >否</el-radio>
</el-form-item>
<el-form-item label="排烟量" class="is-required">
<el-radio v-model="addMsg.PaiYan" :label="1" >是</el-radio>
<el-radio v-model="addMsg.PaiYan" :label="0" >否</el-radio>
</el-form-item>
<el-form-item label="空调" class="is-required">
<el-radio v-model="addMsg.KongTiao" :label="1" >是</el-radio>
<el-radio v-model="addMsg.KongTiao" :label="0" >否</el-radio>
</el-form-item>
<el-form-item label="新风" class="is-required">
<el-radio v-model="addMsg.XinFeng" :label="1" >是</el-radio>
<el-radio v-model="addMsg.XinFeng" :label="0" >否</el-radio>
</el-form-item>
<el-form-item label="广告" class="ue-style">
<UE style="width:750px;" :defaultMsg="Advertising" :config="config" :IsMultiple="true" ref="ue"></UE>
</el-form-item> </el-form-item>
<el-form-item label="简介"> <el-form-item label="其他" class="ue-style">
<UE style="width:750px;" :defaultMsg="defaultMsg" :config="config" :IsMultiple="true" ref="ue"></UE> <UE style="width:750px;" :defaultMsg="Other" :config="config" :IsMultiple="true" ref="ueother"></UE>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -79,49 +163,54 @@ ...@@ -79,49 +163,54 @@
<el-dialog title="选择文件" :visible.sync="changeState" width="1240px"> <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg> <ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog> </el-dialog>
<!-- 选择视频 -->
<el-dialog title="选择文件" :visible.sync="changeState1" width="1240px">
<Choosevideo @Selectvideo="Selectvideo"></Choosevideo>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import ChooseImg from "@/components/global/ChooseImg.vue"; import ChooseImg from "@/components/global/ChooseImg.vue";
import UE from "@/components/global/UE.vue"; import UE from "@/components/global/UE.vue";
import Choosevideo from "@/components/global/Choosevideo.vue";
export default { export default {
components: { components: {
ChooseImg, ChooseImg,
UE UE,
Choosevideo
}, },
data() { data() {
return { return {
addMsg: { addMsg: {
addMsg: {
ID: 0, ID: 0,
Logo: "", // Logo: "", //
BannerList: [], //品牌介绍图 BannerList: [], //品牌介绍图
VideoUrl: "", //品牌视频 VideoUrl: "", //品牌视频
FullBrandName: "", //品牌全名 FullBrandName: "", //品牌全名
BrandName: 0, //品牌名 BrandName: '', //品牌名
ShopNum: "", //店铺数量 ShopNum: "", //店铺数量
BuiltUpArea: "", //建筑面积小 BuiltUpArea: "", //建筑面积小
EndBuiltUpArea: "", //建筑面积大 EndBuiltUpArea: "", //建筑面积大
CustomerType: 1, //客群定位 CustomerType: '', //客群定位
BrandType: 0, //品牌定位 BrandType: '', //品牌定位
StoreExpansion: 1, //扩店区域 StoreExpansion: '', //扩店区域
ProjectType: 1, //商铺性质 ProjectType: '', //商铺性质
AreaRequirement: 1, // AreaRequirement: 0, //
EndAreaRequirement: 1, // EndAreaRequirement: 0, //
Advertising: 1, //广告 Advertising: '', //广告
Other: 1, //其他 Other: '', //其他
ShopSize: 1, //店铺开口尺寸 ShopSize: 1, //店铺开口尺寸
Plumbing: 1, //上下水 Plumbing: 1, //上下水
Caliber: 1, //管径 Caliber: 1, //管径
Sewage: 1, //排污 Sewage: 1, //排污
RanQi: 1, //燃气 RanQi: 1, //燃气
DianLiang: 1, //电量 DianLiang:'', //电量
PaiYan: 1, //排烟量 PaiYan: 1, //排烟量
KongTiao: 1, //空调 KongTiao: 1, //空调
XinFeng: 1, //新风 XinFeng: 1, //新风
BrandClassId: 0, //品牌分类Id BrandClassId: 0, //品牌分类Id
},
}, },
loadingPeople: false, loadingPeople: false,
dynamicTags: [], dynamicTags: [],
...@@ -130,7 +219,8 @@ ...@@ -130,7 +219,8 @@
inputValue: '', inputValue: '',
inputVisible2: false, inputVisible2: false,
inputValue2: '', inputValue2: '',
defaultMsg: "", Advertising: "",
Other:'',
config: { config: {
initialFrameWidth: null, initialFrameWidth: null,
initialFrameHeight: 350 initialFrameHeight: 350
...@@ -138,57 +228,61 @@ ...@@ -138,57 +228,61 @@
Picindex: 0, Picindex: 0,
rules: { rules: {
Name: [{ FullBrandName: [{
required: true, required: true,
message: '请输入品牌名称', message: '请输入品牌全名',
trigger: 'blur' trigger: 'blur'
}], }],
Telephone: [{ BrandName: [{
required: true, required: true,
message: '请输入品牌电话', message: '请输入品牌名',
trigger: 'blur' trigger: 'blur'
}], }],
Introduction: [{ Logo: [{
required: true, required: true,
message: '请输入品牌简介', message: '请选择Logo',
trigger: 'blur' trigger: 'blur'
}], }],
Major: [{
required: true, ShopNum: [{
message: '请输入品牌专业',
trigger: 'blur'
}],
Nationality: [{
required: true, required: true,
message: '请输入品牌国籍', message: '请输入店铺数量',
trigger: 'blur' trigger: 'blur'
}], }],
WorkYears: [{ DianLiang: [{
required: true, required: true,
message: '请输入品牌年限', message: '请输入电量',
trigger: 'blur' trigger: 'blur'
}], }],
}, },
loading: false, loading: false,
changeState: false, changeState: false,
changeState1:false,
imgType: 0, imgType: 0,
peopleData: [], peopleData: [],
BrandClassList:[],
}; };
}, },
created() { created() {
if (this.$route.query.ID) { if (this.$route.query.ID) {
this.getData(this.$route.query.ID) this.getData(this.$route.query.ID)
} }
this.getBrandClassList()
},
ClearCarouse(index) {
this.addMsg.BannerList.splice(index, 1);
}, },
methods: { methods: {
SelectId(msg) { SelectId(msg) {
if (this.imgType == 1) { if (this.imgType == 1) {
let url = this.getIconLink(msg.url) let url = this.getIconLink(msg.url)
this.addMsg.TeacherLogo = url this.addMsg.Logo = url
} }
if (this.imgType == 2) { if (this.imgType == 2) {
let url = this.getIconLink(msg.url) console.log(msg)
this.addMsg.ForeignersUrl = url // let url = this.getIconLink(msg.url)
// this.addMsg.ForeignersUrl = url
} }
this.changeState = false; this.changeState = false;
}, },
...@@ -196,25 +290,31 @@ ...@@ -196,25 +290,31 @@
this.changeState = true; this.changeState = true;
this.imgType = num; this.imgType = num;
}, },
Selectvideo(val) {
this.addMsg.VideoUrl = val.Path;
this.changeState1 = false;
},
getBrandClassList(){
this.apipost(
"/api/Trade/GetBrandClassList", {},
res => {
if (res.data.resultCode == 1) {
this.BrandClassList = res.data.data;
} else {
this.Error(res.data.message);
}
},
);
},
Save(formName) { Save(formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
if (this.addMsg.TeacherLogo == '') {
this.Error('请上传品牌Logo')
return false
}
if (this.addMsg.ForeignersUrl == '') {
this.Error('请上传国家国旗')
return false
}
this.addMsg.LableNameList = this.dynamicTags
if (this.dynamicTags2.length == '' || this.dynamicTags2.length == 0) {
this.Error('请填写教师擅长课程')
return false
}
this.addMsg.GoodCourseList = this.dynamicTags2 this.addMsg.GoodCourseList = this.dynamicTags2
let content = this.$refs.ue.getUEContent(); let content = this.$refs.ue.getUEContent();
this.addMsg.Introduction = content; this.addMsg.Advertising = content;
let contento = this.$refs.ueother.getUEContent();
this.addMsg.Other = contento;
let msg = this.addMsg let msg = this.addMsg
if (msg.UserId == '') { if (msg.UserId == '') {
msg.UserId = 0 msg.UserId = 0
...@@ -232,40 +332,9 @@ ...@@ -232,40 +332,9 @@
} }
}); });
}, },
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
handleClose2(tag) {
this.dynamicTags2.splice(this.dynamicTags2.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
showInput2() {
this.inputVisible2 = true;
this.$nextTick(_ => {
this.$refs.saveTagInput2.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
},
handleInputConfirm2() {
let inputValue = this.inputValue2;
if (inputValue) {
this.dynamicTags2.push(inputValue);
}
this.inputVisible2 = false;
this.inputValue2 = '';
},
getData(ID) { getData(ID) {
this.loading = true; this.loading = true;
this.apipost("/api/Education/GetTeacherModel", { this.apipost("/api/Education/GetTeacherModel", {
...@@ -404,7 +473,7 @@ ...@@ -404,7 +473,7 @@
vertical-align: bottom; vertical-align: bottom;
} }
.addbrand .el-form-item__content { .addbrand .ue-style .el-form-item__content {
line-height: 0; line-height: 0;
} }
...@@ -412,4 +481,27 @@ ...@@ -412,4 +481,27 @@
border: none border: none
} }
.addbrand .nav_Main {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.addbrand .nav_IconContent {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.addbrand .nav_IconContent div>div {
display: inline-block;
}
.addbrand .colapp-image {
background-size: cover;
background-position: center center;
width: 100px;
height: 100px;
border-radius: 0%;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment