Skip to content

E
ElectricitySheep
Commit f51c8b42 authored by 黄媛媛's avatar 黄媛媛
Browse files
Options

11

parent 8b0bdc54
Hide whitespace changes
Inline Side-by-side
Showing with 311 additions and 0 deletions
src/components/CommodityMan/goodsListEdit.vue 0 → 100644
View file @ f51c8b42
<template>
<div class="goodsListEdit">
<div class="head-title">
<span @click="CommonJump('goodsList')" class="blue point">商品列表</span> / 添加商品
</div>
<div style="background:#fff;margin-top:10px;padding:10px 20px 20px">
<el-form class="app-batch" :model="addMsg" :rules="rules" ref="addMsg" label-width="180px">
<el-tabs v-model="activeName">
<el-tab-pane label="商品设置" name="first">
<el-card shadow="never">
<div slot="header" class="clearfix">
<span>选择分类</span>
</div>
<el-row>
<el-col :span="12">
<el-form-item label="商品分类">
<template v-if="addMsg.CategoryList && addMsg.CategoryList.length>0">
<el-tag type="warning" style="margin-right:10px;" @close="exitCheck(item,index)" v-for="(item,index) in addMsg.CategoryList" :key="index" closable>{{item.Name}}</el-tag>
</template>
<el-button type="primary" @click="flDig=true,keepCategoryList=addMsg.CategoryList" style="margin:0 10px;" size="small">选择分类</el-button>
<span @click="CommonJump('addGoodsClass')" class="blue point">添加分类</span>
</el-form-item>
</el-col>
</el-row>
</el-card>
<el-card shadow="never">
<div slot="header" class="clearfix">
<span>基本信息</span>
</div>
<el-row>
<el-col :span="12">
<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>
<el-input v-model="addMsg.Id" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select">
<el-button slot="append">获取</el-button>
</el-input>
</el-form-item>
<el-form-item label="商品名称" prop="Name">
<el-input v-model="addMsg.Name" size="small" placeholder="请输入内容" maxlength="100" show-word-limit>
</el-input>
</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 flex="dir:left">
<div flex="dir:left">
<div style="margin-right: 20px; position: relative; ">
<div class="colapp-image" style="background-image: url(https://cdnimg.iotweixin.com/uploads/mall1285/20200508/dcd7c4f5a4c25ea6edfe38c1f8a68769.png); "></div>
<el-button class="delBtn" type="danger" icon="el-icon-close" circle></el-button>
</div>
<div class="add-image-btn">
+ 添加图片
</div>
</div>
</div>
</el-form-item>
<el-form-item label="商品视频">
<el-input v-model="addMsg.Id" size="small" placeholder="请输入内容">
<el-button slot="append">添加视频</el-button>
</el-input>
</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>
<el-input v-model="addMsg.Id" type="number" min="1" size="small" placeholder="请输入内容" class="input-with-select"></el-input>
<p class="blue point" @click="imgDig=true">查看图例</p>
</el-form-item>
</el-col>
</el-row>
</el-card>
</el-tab-pane>
<el-tab-pane label="分销价设置" name="second">配置管理</el-tab-pane>
<el-tab-pane label="会员价设置" name="third">角色管理</el-tab-pane>
</el-tabs>
</el-form>
<div class="bottom-div" style="margin-top:20px">
<el-button size="small" type="primary" @click="Save">保存</el-button>
<el-button size="small">预览</el-button>
</div>
</div>
<!-- 选择分类 -->
<el-dialog custom-class="app-add-cat" title="选择分类" :visible.sync="flDig" width="1100px">
<el-row>
<el-col :span="8" style="padding:0 10px;box-sizing:border-box">
<h3 style="padding:15px 0">一级分类</h3>
<div class="app-goods-cat-list active">
<el-checkbox-group v-model="addMsg.CategoryList" @change="handleCheckChange">
<div v-for="(item,index) in fenleiData" :key="index" flex="dir:left box:first" class="cat-item">
<el-checkbox :label="item">
<span style="display: none;">{{item.Name}}</span>
</el-checkbox>
<div flex="box:last cross:center">
<span>{{item.Name}}</span>
<i v-if="item.ChildList.length>0" @click="getChild2(item.ChildList)" class="el-icon-arrow-right"></i>
</div>
</div>
</el-checkbox-group>
</div>
</el-col>
<el-col v-show="childList2.length>0" :span="8" style="padding:0 10px;box-sizing:border-box">
<h3 style="padding:15px 0">二级分类</h3>
<div class="app-goods-cat-list active">
<el-checkbox-group v-model="addMsg.CategoryList">
<div v-for="(item,index) in childList2" :key="index" flex="dir:left box:first" class="cat-item">
<el-checkbox :label="item">
<span style="display: none;">{{item.Name}}</span>
</el-checkbox>
<div flex="box:last cross:center">
<span>{{item.Name}}</span>
<i v-if="item.ChildList.length>0" @click="getChild3(item.ChildList)" class="el-icon-arrow-right"></i>
</div>
</div>
</el-checkbox-group>
</div>
</el-col>
<el-col v-show="childList3.length>0" :span="8" style="padding:0 10px;box-sizing:border-box">
<h3 style="padding:15px 0">三级分类</h3>
<div class="app-goods-cat-list active">
<el-checkbox-group v-model="addMsg.CategoryList">
<div v-for="(item,index) in childList3" :key="index" flex="dir:left box:first" class="cat-item">
<el-checkbox :label="item">
<span style="display: none;">{{item.Name}}</span>
</el-checkbox>
<div flex="box:last cross:center">
<span>{{item.Name}}</span>
<i class="el-icon-arrow-right"></i>
</div>
</div>
</el-checkbox-group>
</div>
</el-col>
</el-row>
<div class="tag-box">
<el-tag @close="exitCheck(item)" v-for="(item,index) in addMsg.CategoryList" :key="index" type="warning" closable style="margin-right:5px">{{item.Name}}</el-tag>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="flDig=false,addMsg.CategoryList=keepCategoryList">取 消</el-button>
<el-button @click="flDig = false" size="small" type="primary">确 定</el-button>
</span>
</el-dialog>
<!-- 查看图例 -->
<el-dialog title="查看自定义分享图片图例" :visible.sync="imgDig" width="30%">
<div class="center">
<img style=" width: 310px;height: 360px;" src="../../assets/img/userman/app-share-name.png" alt="">
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="imgDig = false" size="small" type="primary">我知道了</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
imgDig:false,
activeName:'first',
flDig:false,
addMsg:{
Id:0,
CategoryList:[],
Name:'',
},
fenleiData:[],
checkList:[],
childList2:[],
childList3:[],
keepCategoryList:[],
rules:{
CategoryIdNew: [
{ required: true, message: '分类不能为空', trigger: 'change' }
],
Name: [
{ required: true, message: '请输入商品名称', trigger: 'blur' }
],
},
};
},
created() {
if(this.$route.query.UserId){
this.UserId=this.$route.query.UserId;
// this.getData()
}
this.getTree();
},
methods: {
Save(){},
getChild3(ChildList){
this.childList3=ChildList;
},
getChild2(ChildList){
this.childList2=ChildList;
},
handleCheckChange(){},
exitCheck(item,index){
this.addMsg.CategoryList.forEach((list,k)=>{
if(list.Id==item.Id){
this.addMsg.CategoryList.splice(k,1);
}
})
},
getTree(){
let msg1={
Id:0,
Name:'',
Tier:0,
ParentId:0,
Enabled:1,
IsShow:1,
}
this.apipost("/api/product/GetProductCategoryTreeList", msg1, res => {
if(res.data.resultCode==1){
let pageData=res.data.data;
this.fenleiData=pageData;
}
})
},
getData(){
this.apipost("/api/user/GetMemberUserInfo",{UserId:this.UserId}, res => {
this.userInfo=res.data.data;
})
},
},
mounted() {
}
};
</script>
<style>
.goodsListEdit .delBtn{
position: absolute;
right: -8px;
top: -8px;
padding: 4px 4px;
}
.goodsListEdit .add-image-btn {
width: 100px;
height: 100px;
line-height: 100px;
color: #419EFB;
border: 1px solid #e2e2e2;
cursor: pointer;
text-align: center;
}
.goodsListEdit .colapp-image{
background-size: cover;
background-position: center center;
width: 100px; height: 100px;
border-radius: 0%;
}
.goodsListEdit .el-form-item__label{
padding-right:26px;
}
.app-add-cat .el-checkbox-group{
font-size: 14px!important;
}
.app-add-cat .el-checkbox {
margin-right: 0;
}
.app-add-cat .el-dialog__body{
padding:10px 20px!important;
}
.app-add-cat .tag-box .tag-item {
margin-right: 5px;
}
.app-add-cat .tag-box {
margin: 20px 0;
}
.app-add-cat .app-goods-cat-list .active {
background: #FAFAFA;
}
.app-add-cat .app-goods-cat-list .cat-item {
cursor: pointer;
padding: 5px 10px;
}
.app-add-cat .app-goods-cat-list {
border: 1px solid #E8EAEE;
border-radius: 5px;
margin-top: -5px;
padding: 10px 0;
overflow: scroll;
height: 400px;
}
.goodsListEdit .bottom-div {
border-top: 1px solid #E3E3E3;
position: fixed;
bottom: 0;
background-color: #ffffff;
z-index: 999;
padding: 10px;
width: 80%;
}
</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