Skip to content

E
ElectricitySheep
Commit f6a5003a authored by zhangjianguo's avatar zhangjianguo
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/huangyuanyuan/electricitysheep

parents ffb47658 f51c8b42
Hide whitespace changes
Inline Side-by-side
Showing with 1579 additions and 331 deletions
src/components/CommodityMan/goodsListEdit.vue 0 → 100644
View file @ f6a5003a
<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>
src/components/common/choiceFenlei.vue 0 → 100644
View file @ f6a5003a
<template>
<div>
<el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="ID">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column prop="name" label="名称">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [],
msg:{
Id:0,
Name:'',
Tier:0,
ParentId:0,
Enabled:1,
IsShow:1,
},
selectRow:[],
};
},
created() {},
methods: {
//获取所有菜单
getList() {
this.apipost("/api/product/GetProductCategoryTreeList", this.msg, res => {
if (res.data.resultCode == 1) {
var dataArray = res.data.data;
this.dataList=[];
if (dataArray && dataArray.length > 0) {
dataArray.forEach(x => {
this.dataList.push({
id: x.Id,
name: x.Name,
menuName: x.Name,
goodsNum: 30,
staticGoods: false,
goodsList: [],
})
if(x.ChildList&&x.ChildList.length>0){
x.ChildList.forEach(y=>{
this.dataList.push({
id: y.Id,
name: y.Name,
menuName: y.Name,
goodsNum: 30,
staticGoods: false,
goodsList: [],
})
if(y.ChildList&&y.ChildList.length>0){
y.ChildList.forEach(z=>{
this.dataList.push({
id: z.Id,
name: z.Name,
menuName: z.Name,
goodsNum: 30,
staticGoods: false,
goodsList: [],
})
})
}
})
}
});
}
} else {
this.Info(res.data.message);
}
})
},
handleSelectionChange(val){
this.selectRow=JSON.parse(JSON.stringify(val));
},
//父组件调用方法
getChoicedFenlei(){
return this.selectRow;
},
//清空多选方法
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
},
mounted() {
this.getList();
}
};
</script>
src/components/common/choiceGood.vue 0 → 100644
View file @ f6a5003a
<template>
<div>
<el-input size="mini" v-model="msg.Name" placeholder="根据名称搜索" :clearable="true"
@clear="getList" @keyup.enter.native="getList">
<el-button slot="append" @click="getList">搜索</el-button>
</el-input>
<el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50px">
</el-table-column>
<el-table-column label="ID" width="100px">
<template slot-scope="scope">{{ scope.row.Id }}</template>
</el-table-column>
<el-table-column prop="name" label="名称">
<template slot-scope="scope">
<div flex="cross:center dir:left">
<img style="width:50px;height:50px;margin-right:10px;" :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+scope.row.CoverImage"/>
<div>{{ scope.row.Name }}</div>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination style="text-align:right"
background
@current-change="handleCurrentChange"
:page-size="msg.pageSize"
layout="prev, pager, next"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [],
msg:{
pageIndex:1,
pageSize:15,
Name:'',
},
total:0,
selectRow:[],
};
},
created() {},
methods: {
//获取所有菜单
getList() {
this.apipost("/api/product/GetProductGoodsDialogList", this.msg, res => {
if (res.data.resultCode == 1) {
console.log(res,'res');
this.total=res.data.data.count;
this.dataList=res.data.data.pageData;
} else {
this.Info(res.data.message);
}
})
},
handleSelectionChange(val){
this.selectRow=JSON.parse(JSON.stringify(val));
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
//父组件调用方法
getChoicedGoods(){
return this.selectRow;
},
//清空多选方法
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
},
mounted() {
this.getList();
}
};
</script>
src/components/sallCenter/plugin/banner.vue
View file @ f6a5003a
......@@ -120,7 +120,7 @@
<template>
<div :class="{'active':banData.isCked}">
<div class="diy-component-options" v-if="banData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button>
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
<el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
<el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)" style="right: -25px; top: 0;"></el-button>
<el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)" style="right: -25px; top: 30px;"></el-button>
......@@ -273,6 +273,11 @@
resetSord(IsUp){
this.$emit('getSord', this.index,IsUp);
},
//点击触发父组件删除
delPlugin(){
this.$emit('comDelPlugin', this.index);
},
},
mounted() {
......
src/components/sallCenter/plugin/goods.vue
View file @ f6a5003a
......@@ -292,7 +292,7 @@
<template>
<div :class="{'active':goodData.isCked}">
<div class="diy-component-options" v-if="goodData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button>
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
<el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
<el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
style="right: -25px; top: 0;"></el-button>
......@@ -305,34 +305,34 @@
<div :flex="cCatFlex" class="cat-list"
v-if="data.showCat && (data.catPosition=='left'||(data.catPosition=='top'&&cCatList.length>1))"
:class="'cat-list-'+data.catPosition+' cat-style-'+data.catStyle">
<div class="cat-item" v-for="(item,index) in cCatList" :class="index===0?'active':''"
<div class="cat-item" v-for="(item,index) in cCatList" :class="index===0?'active':''" :key="index"
flex="main:center cross:center">
<div class="cat-name">{{item.menuName}}</div>
</div>
</div>
<div class="goods-list" :class="'goods-list-style-'+data.listStyle">
<div v-for="(cat,catIndex) in cCatList">
<div v-for="(cat,catIndex) in cCatList" :key="catIndex">
<div v-if="data.catPosition==='left'" style="color: #666666;margin: 24px 11px;font-size: 24px">
{{cat.menuName}}
</div>
<div :style="cGoodsListStyle" flex>
<div v-for="(goods,goodsIndex) in cCatGoodsList(cat, catIndex)" class="goods-item"
<div v-for="(goods,goodsIndex) in cCatGoodsList(cat, catIndex)" class="goods-item" :key="goodsIndex"
:class="data.catPosition==='left'?'goods-cat-list':''">
<div style="display: inline-block;" :style="cGoodsItemWidth">
<div :style="cGoodsItemStyle" :flex="cGoodsItemFlex" style="position: relative;">
<div class="goods-pic"
:class="'goods-pic-'+data.goodsCoverProportion+' goods-pic-fill-'+data.fill"
:style="'background-image: url('+goods.picUrl+')'">
:style="'background-image: url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+goods.CoverImage+')'">
<div v-if="data.showGoodsTag" class="goods-tag"
:style="'background-image: url('+ getIconLink(data.goodsTagPicUrl)+')'"></div>
</div>
<div :style="cGoodsItemInfoStyle">
<div class="goods-name" :class="data.listStyle===-1?'goods-name-static':''">
<template v-if="data.showGoodsName">{{goods.name}}</template>
<template v-if="data.showGoodsName">{{goods.Name}}</template>
</div>
<div flex="box:last">
<div class="goods-price">
<template v-if="data.showGoodsPrice">￥{{goods.price}}</template>
<template v-if="data.showGoodsPrice">￥{{goods.SellingPrice}}</template>
</div>
<div>
<template v-if="cShowBuyBtn">
......@@ -404,13 +404,13 @@
<div flex="box:first" v-if="cat.staticGoods">
<div class="diy-goods-label">商品列表</div>
<div>
<draggable v-model="cat.goodsList" flex class="goods-list">
<div class="goods-item" v-for="(goods,goodsIndex) in cat.goodsList">
<draggable v-model="cat.goodsList" class="goods-list" style="display:flex">
<div class="goods-item" v-for="(goods,goodsIndex) in cat.goodsList" :key="goodsIndex">
<el-tooltip effect="dark" content="移除商品" placement="top">
<el-button @click="deleteGoods(goodsIndex,catIndex)" circle class="goods-delete" type="danger"
icon="el-icon-close"></el-button>
</el-tooltip>
<div class="goods-pic" :style="'background-image:url('+goods.picUrl+')'"></div>
<div class="goods-pic" :style="'background-image:url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+goods.CoverImage+')'"></div>
</div>
</draggable>
<div class="goods-add">
......@@ -419,7 +419,7 @@
</div>
</div>
</div>
<el-button size="small" @click="catDialog.visible=true">添加分类</el-button>
<el-button size="small" @click="isFenlei=true">添加分类</el-button>
</el-form-item>
</template>
<template v-else>
......@@ -431,13 +431,13 @@
<el-input size="small" v-model.number="data.goodsLength" type="number"></el-input>
</el-form-item>
<el-form-item v-show="data.addGoodsType == 1" label="商品列表">
<draggable v-model="data.list" flex class="goods-list">
<div class="goods-item" v-for="(goods,goodsIndex) in data.list">
<draggable v-model="data.list" class="goods-list" style="display:flex;">
<div class="goods-item" v-for="(goods,goodsIndex) in data.list" :key="goodsIndex">
<el-tooltip effect="dark" content="移除商品" placement="top">
<el-button @click="deleteGoods(goodsIndex,null)" circle class="goods-delete" type="danger"
icon="el-icon-close"></el-button>
</el-tooltip>
<div class="goods-pic" :style="'background-image:url('+goods.picUrl+')'"></div>
<div class="goods-pic" :style="'background-image:url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+goods.CoverImage+')'"></div>
</div>
</draggable>
<div class="goods-add">
......@@ -524,17 +524,38 @@
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
<!-- 选择分类 -->
<el-dialog title="选择分类" :visible.sync="isFenlei" width="800px">
<ChooseFenlei ref="ChooseFenlei"></ChooseFenlei>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="quxiaoFenlei()">取 消</el-button>
<el-button size="small" type="danger" @click="getChoiceFenlei()">确 定</el-button>
</span>
</el-dialog>
<!-- 选择商品 -->
<el-dialog title="选择商品" :visible.sync="isShowGoods">
<choiceGood ref="choiceGood"></choiceGood>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="quxiaoGoods()">取 消</el-button>
<el-button size="small" type="danger" @click="getGoodsChoice()">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import draggable from "vuedraggable"
import ChooseImg from "@/components/global/ChooseImg.vue";
import ChooseFenlei from "../../common/choiceFenlei.vue";
import choiceGood from "../../common/choiceGood.vue";
export default {
props: ["goodData", "index", "dataLeng"],
components: {
draggable,
ChooseImg
ChooseImg,
ChooseFenlei,
choiceGood
},
data() {
return {
......@@ -542,25 +563,10 @@
position: 'center center',
repeat: 'no-repeat',
choicImg:false,
catDialog: {
visible: false,
page: 1,
loading: null,
pagination: null,
list: null,
selectedList: null,
},
goodsDialog: {
visible: false,
page: 1,
catIndex: null,
catId: null,
loading: null,
pagination: null,
list: null,
selectedList: null,
keyword: null
},
isFenlei:false,
isShowGoods:false,
//添加的下标
comIndex:-1,
goodsTags: [{
name: '热销',
picUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goods-tag-rx.png',
......@@ -588,6 +594,10 @@
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin(){
this.$emit('comDelPlugin', this.index);
},
cCatGoodsList(cat, catIndex) {
const goodsList = cat.goodsList;
let newList = [];
......@@ -599,9 +609,9 @@
} else {
const defaultGoodsItem = {
id: 0,
name: '商品名称',
Name: '商品名称',
picUrl: '',
price: '100.00',
SellingPrice: '100.00',
};
newList = new Array(cat.goodsNum).fill(defaultGoodsItem);
}
......@@ -621,129 +631,16 @@
this.data.goodsTagPicUrl = '';
this.data.customizeGoodsTag = true;
},
loadCatData() {
this.catDialog.loading = true;
this.catDialog.selectedList = null;
this.$request({
params: {
r: 'mall/cat/index',
page: this.catDialog.page,
}
}).then(response => {
this.catDialog.loading = false;
if (response.data.code === 0) {
let list = this.transCatList(response.data.data.list);
let newList = [];
for (let i in list) {
if (list[i].status == 1) {
newList.push(list[i]);
}
}
this.catDialog.list = newList;
// this.catDialog.pagination = response.data.data.pagination;
} else {}
}).catch(e => {});
},
transCatList(list) {
let newList = [];
for (let i in list) {
if (list[i].child && list[i].child.length) {
let listJ = list[i].child;
delete list[i].child;
newList.push(list[i]);
for (let j in listJ) {
if (listJ[j].child && listJ[j].child.length) {
let listK = listJ[j].child;
delete listJ[j].child;
newList.push(listJ[j]);
for (let k in listK) {
newList.push(listK[k]);
}
} else {
newList.push(listJ[j]);
}
}
} else {
newList.push(list[i]);
}
}
return newList;
},
catDialogPageChange(page) {
this.catDialog.page = page;
this.loadCatData();
},
catSelectionChange(e) {
this.catDialog.selectedList = e;
},
addCat() {
this.catDialog.visible = false;
for (let i in this.catDialog.selectedList) {
this.data.catList.push({
id: this.catDialog.selectedList[i].id,
name: this.catDialog.selectedList[i].name,
menuName: this.catDialog.selectedList[i].name,
goodsNum: 30,
staticGoods: false,
goodsList: [],
});
}
this.catDialog.selectedList = null;
},
deleteCat(index) {
this.data.catList.splice(index, 1);
},
loadGoodsData() {
this.goodsDialog.loading = true;
this.$request({
params: {
r: 'plugin/diy/mall/template/get-goods',
page: this.goodsDialog.page,
mch_id: 0,
cat_id: this.goodsDialog.catId,
keyword: this.goodsDialog.keyword
},
}).then(response => {
this.goodsDialog.loading = false;
if (response.data.code === 0) {
this.goodsDialog.list = response.data.data.list;
this.goodsDialog.pagination = response.data.data.pagination;
} else {}
}).catch(e => {});
},
goodsDialogPageChange(page) {
this.goodsDialog.page = page;
this.loadGoodsData();
},
showGoodsDialog(catIndex) {
if (catIndex !== null) {
this.goodsDialog.catIndex = catIndex;
this.goodsDialog.catId = this.data.catList[catIndex].id;
this.comIndex=catIndex
} else {
this.goodsDialog.catIndex = null;
this.goodsDialog.catId = null;
}
this.goodsDialog.visible = true;
},
goodsSelectionChange(e) {
this.goodsDialog.selectedList = e;
},
addGoods() {
this.goodsDialog.visible = false;
for (let i in this.goodsDialog.selectedList) {
console.log(this.goodsDialog.selectedList[i]);
const item = {
id: this.goodsDialog.selectedList[i].id,
name: this.goodsDialog.selectedList[i].name,
picUrl: this.goodsDialog.selectedList[i].cover_pic,
price: this.goodsDialog.selectedList[i].price,
};
if (this.goodsDialog.catIndex !== null) {
this.data.catList[this.goodsDialog.catIndex].goodsList.push(item);
} else {
this.data.list.push(item);
}
this.comIndex=null;
}
this.isShowGoods = true;
},
deleteGoods(goodsIndex, catIndex) {
if (catIndex !== null) {
......@@ -787,8 +684,36 @@
str= 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+url
}
return str;
}
},
//选择商品分类
getChoiceFenlei(){
var ckedArr=this.$refs.ChooseFenlei.getChoicedFenlei();
this.data.catList=this.data.catList.concat(ckedArr);
this.isFenlei=false;
this.$refs.ChooseFenlei.toggleSelection();
},
//取消商品分类选择
quxiaoFenlei(){
this.isFenlei=false;
this.$refs.ChooseFenlei.toggleSelection();
},
//选择商品
getGoodsChoice(){
var ckedArr = this.$refs.choiceGood.getChoicedGoods();
if(this.comIndex!==null){
this.data.catList[this.comIndex].goodsList=this.data.catList[this.comIndex].goodsList.concat(ckedArr);
}else{
this.data.list=this.data.list.concat(ckedArr);
}
this.isShowGoods=false;
this.$refs.choiceGood.toggleSelection();
},
//取消选择商品
quxiaoGoods(){
this.isShowGoods=false;
this.$refs.choiceGood.toggleSelection();
}
},
computed: {
cListStyle() {
......@@ -902,7 +827,6 @@
return 'width: 100%;';
},
cButtonStyle() {
console.log(this.data.buyBtnStyle);
let style =
`background: ${this.data.buttonColor};border-color: ${this.data.buttonColor};height:48px;line-height:46px;padding:0 20px;`;
if (this.data.buyBtnStyle === 3 || this.data.buyBtnStyle === 4) {
......
src/components/sallCenter/plugin/link.vue 0 → 100644
View file @ f6a5003a
<style>
.diy-link {
width: 100%;
padding: 30px 0;
position: relative;
}
.diy-link>div {
width: 100%;
}
.diy-link .title {
flex-grow: 1;
padding: 0 24px;
}
.diy-link .title>div {
display: inline-block;
vertical-align: middle;
}
.diy-link .arrow {
width: 12px;
height: 22px;
position: absolute;
right: 24px;
top: 50%;
margin-top: -6px;
}
.diy-component-edit .link-page .el-input-group__append {
background-color: #fff
}
.diy-link .big-style {
height: 50px;
line-height: 50px;
font-size: 36px;
}
.diy-link .big-style .title-icon {
width: 50px;
height: 50px;
margin-right: 16px;
vertical-align: middle;
}
.diy-link .medium-style {
height: 36px;
line-height: 36px;
font-size: 28px;
}
.diy-link .medium-style .title-icon {
width: 36px;
height: 36px;
margin-right: 16px;
vertical-align: middle;
}
.diy-link .small-style {
height: 28px;
line-height: 28px;
font-size: 24px;
}
.diy-link .small-style .title-icon {
width: 28px;
height: 28px;
margin-right: 16px;
vertical-align: middle;
}
.title-line {
width: 82px;
height: 5px;
vertical-align: middle;
margin: 0 20px;
}
.title-line.star {
height: 20px;
width: 28px;
}
.title-line.star .top-icon {
width: 28px;
height: 4px;
margin-bottom: 12px;
}
.title-line.star .bottom-icon {
width: 28px;
height: 4px;
}
.title-line.div {
width: 8px;
height: 28px;
margin: 0 10px 0 0;
}
.title-line.radius {
width: 28px;
height: 28px;
margin: 0 10px 0 0;
border-radius: 14px;
border: 2px solid #353535;
}
.link-gallery-item {
width: 100px;
height: 100px;
border: 1px solid #e3e3e3;
border-radius: 2px;
margin-right: 10px;
margin-bottom: 10px;
position: relative;
}
</style>
<template>
<div :class="{'active':linkData.isCked}">
<div class="diy-component-options" v-if="linkData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
<el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
<el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
style="right: -25px; top: 0;"></el-button>
<el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
style="right: -25px; top: 30px;"></el-button>
</div>
<div class="diy-component-preview">
<div class="diy-link" :style="cStyle" flex="cross:center">
<div :class="style" flex="dir:left cross:center">
<div v-if="data.style == 1" class="title" :style="{textAlign: data.position}">
<img v-if="data.picSwitch" class="title-icon" :src="data.picUrl" alt="">
<div style="font-weight: 600">{{data.title?data.title:'这里是标题示例'}}</div>
</div>
<div v-else-if="data.style == 2" class="title" style="text-align: center">
<img :style="{backgroundColor: data.styleColor}" class="title-line"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/line-style.png">
<div style="font-weight: 600">{{data.title?data.title:'这里是标题示例'}}</div>
<img :style="{backgroundColor: data.styleColor}" class="title-line"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/line-style.png">
</div>
<div v-else-if="data.style == 3" class="title" style="text-align: center">
<div class="title-line star">
<div :style="{backgroundColor: data.styleColor}" class="top-icon"></div>
<div :style="{backgroundColor: data.styleColor}" class="bottom-icon"></div>
</div>
<div style="font-weight: 600">{{data.title?data.title:'这里是标题示例'}}</div>
<div class="title-line star">
<div :style="{backgroundColor: data.styleColor}" class="top-icon"></div>
<div :style="{backgroundColor: data.styleColor}" class="bottom-icon"></div>
</div>
</div>
<div v-else-if="data.style == 4" class="title" style="text-align: left">
<img :style="{backgroundColor: data.styleColor}" class="title-line div"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/div-style.png">
<div style="font-weight: 600">{{data.title?data.title:'这里是标题示例'}}</div>
</div>
<div v-else-if="data.style == 5" class="title" style="text-align: left">
<div :style="[{'borderColor':data.styleColor,'backgroundColor':data.background}]" class="title-line radius">
</div>
<div style="font-weight: 600">{{data.title?data.title:'这里是标题示例'}}</div>
</div>
<img class="arrow" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-jiantou-r.png"
v-if="data.arrowsSwitch">
</div>
</div>
</div>
<div class="diy-component-edit" v-if="linkData.isCked">
<el-form label-width="100px" @submit.native.prevent>
<el-form-item label="标题">
<label slot="label">标题
<el-tooltip class="item" effect="dark" content="标题长度不超过10个字" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</label>
<el-input size="small" v-model="data.title" maxlength="10"></el-input>
</el-form-item>
<el-form-item label="字体大小">
<el-radio v-model="data.fontSize" label="36">大</el-radio>
<el-radio v-model="data.fontSize" label="28">中</el-radio>
<el-radio v-model="data.fontSize" label="24">小</el-radio>
</el-form-item>
<el-form-item label="文字颜色">
<el-color-picker size="small" v-model="data.color"></el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.color"></el-input>
</el-form-item>
<el-form-item label="背景颜色">
<el-color-picker size="small" v-model="data.background"></el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.background"></el-input>
</el-form-item>
<el-form-item label="标题样式">
<el-radio v-model="data.style" label="1">样式1</el-radio>
<el-radio v-model="data.style" label="2">样式2</el-radio>
<el-radio v-model="data.style" label="3">样式3</el-radio>
<el-radio v-model="data.style" label="4">样式4</el-radio>
<el-radio v-model="data.style" label="5">样式5</el-radio>
</el-form-item>
<el-form-item v-if="data.style == '1'" label="标题位置">
<el-radio v-model="data.position" label="left">居左</el-radio>
<el-radio v-model="data.position" label="center">居中</el-radio>
<el-radio v-model="data.position" label="right">居右</el-radio>
</el-form-item>
<el-form-item v-if="data.style != '1'" label="样式颜色">
<el-color-picker v-model="data.styleColor"></el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.styleColor"></el-input>
</el-form-item>
<el-form-item label="链接页面">
<el-input size="small" class="link-page" v-model="data.link.name" :disabled="true">
<template slot="append">
<el-button @click="isShowLink=true">选择链接</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item v-if="data.style == '1'" label="图标开关">
<el-switch v-model="data.picSwitch"></el-switch>
</el-form-item>
<template v-if="data.picSwitch">
<el-form-item label="图标">
<label slot="label">图标
<el-tooltip class="item" effect="dark" content="最大宽度750px，最大高度36px，图标等比例缩放" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</label>
<el-button size="mini" @click="choicImg=true">选择图标</el-button>
<div flex="main:center cross:center" class="link-gallery-item">
<img v-if="data.picUrl!=''" style="max-width:100%;max-height: 100%;" :src="getIconLink(data.picUrl)"/>
</div>
</el-form-item>
</template>
<el-form-item label="箭头开关">
<el-switch v-model="data.arrowsSwitch"></el-switch>
</el-form-item>
</el-form>
</div>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
<el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
<chooseMeun ref="chooseMeun"></chooseMeun>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowLink=false">取 消</el-button>
<el-button size="small" type="danger" @click="getChoiceLink()">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import ChooseImg from "@/components/global/ChooseImg.vue";
import chooseMeun from "../../common/chooseMeun.vue";
export default {
props: ["linkData", "index", "dataLeng"],
components: {
ChooseImg,
chooseMeun
},
data() {
return {
choicImg: false,
isShowLink: false,
data: this.linkData.data,
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
//选择图片
SelectId(msg) {
this.data.picUrl = msg.url;
this.choicImg = false;
},
//判断是否包含http
getIconLink(url) {
let str = ''
if (url.indexOf('http') != -1) {
str = url
} else {
str = 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + url
}
return str;
},
//获取选择链接
getChoiceLink() {
//调用子组件方法
var obj = this.$refs.chooseMeun.getChooseMenu();
this.data.link.name=obj.PageName;
this.isShowLink = false;
},
},
computed: {
cStyle() {
if (this.data.background) {
return `color: ${this.data.color};` +
`background: ${this.data.background};`
} else {
return `color: ${this.data.color};`
}
},
style() {
if (this.data.fontSize == '36') {
return `big-style`
} else if (this.data.fontSize == '28') {
return `medium-style`
} else {
return `small-style`;
}
}
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/navigationIcon.vue
View file @ f6a5003a
......@@ -143,7 +143,7 @@
<template>
<div :class="{'active':navData.isCked}">
<div class="diy-component-options" v-if="navData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button>
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
<el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
<el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)" style="right: -25px; top: 0;"></el-button>
<el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)" style="right: -25px; top: 30px;"></el-button>
......@@ -386,6 +386,10 @@
str= 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+url
}
return str;
},
//点击触发父组件删除
delPlugin(){
this.$emit('comDelPlugin', this.index);
}
},
mounted() {
......
src/components/sallCenter/plugin/notice.vue 0 → 100644
View file @ f6a5003a
<style>
.diy-notice {
width: 100%;
height: 80px;
padding: 0 24px;
justify-content: space-between;
}
.diy-notice .content {
flex-grow: 1;
}
.diy-notice .content div {
white-space: nowrap;
overflow-x: hidden;
}
.diy-notice-dialog {
min-width: 900px;
}
.diy-notice-dialog .left .phone {
width: 750px;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 80px;
zoom: 0.5;
font-size: 28px;
position: relative;
}
.diy-notice-dialog .left .notice-dialog {
width: 100%;
max-height: 800px;
background-color: #FFFFFF;
padding: 24px;
}
.notice-gallery-item {
width: 100px;
height: 100px;
border: 1px solid #e3e3e3;
border-radius: 2px;
margin-right: 10px;
margin-bottom: 10px;
position: relative;
}
.diy-notice-dialog .left .phone {
width: 750px;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 80px;
zoom: 0.5;
font-size: 28px;
position: relative;
}
</style>
<template>
<div :class="{'active':noticeData.isCked}">
<div class="diy-component-options" v-if="noticeData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
<el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
<el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
style="right: -25px; top: 0;"></el-button>
<el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
style="right: -25px; top: 30px;"></el-button>
</div>
<div class="diy-component-preview">
<div class="diy-notice" :style="cStyle" flex="dir:left cross:center">
<img :src="getIconLink(data.icon)" style="width: 36px;height: 36px;margin-right: 24px;">
<div class="content" flex="dir:left box:first">
<div style="min-width: 2rem;max-width: 7rem;">{{data.name}}</div>
<div style="margin: 0 12px;">{{data.content}}</div>
</div>
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-left-arrow.png"
style="width: 10px;height: 18px;">
</div>
</div>
<div class="diy-component-edit" v-if="noticeData.isCked">
<el-form label-width="100px" @submit.native.prevent>
<el-form-item label="公告名称">
<el-input v-model="data.name" max="8"></el-input>
</el-form-item>
<el-form-item label="公告内容">
<el-input type="textarea" :rows="3" v-model="data.content"></el-input>
</el-form-item>
<el-form-item label="公告图标">
<el-tooltip class="item" effect="dark" content="建议尺寸36*36" placement="top">
<el-button size="mini" @click="choicImg=true,checkIndex=1">选择图片</el-button>
</el-tooltip>
<div flex="main:center cross:center" class="notice-gallery-item">
<img :src="getIconLink(data.icon)" style="width:100%;height:100%;" class="app-gallery-img"
draggable="false">
</div>
</el-form-item>
<el-form-item label="文字颜色">
<el-color-picker size="small" v-model="data.textColor"></el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.textColor"></el-input>
</el-form-item>
<el-form-item label="背景颜色">
<el-color-picker size="small" v-model="data.background"></el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.background"></el-input>
</el-form-item>
<el-form-item label="弹窗设置">
<el-button @click="dialogVisible = !dialogVisible" size="small">弹窗设置</el-button>
</el-form-item>
</el-form>
</div>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
<!-- 公告弹窗 -->
<el-dialog title="弹窗设置" :visible.sync="dialogVisible" width="956px" custom-class="diy-notice-dialog">
<div flex="dir:left box:mean">
<div class="left" flex="main:center cross:center">
<div class="phone" flex="main:center cross:center">
<div style="width: 600px">
<img :src="getIconLink(data.headerUrl)" style="width: 600px;height: 150px;display: block">
<div class="notice-dialog">
<div style="margin-bottom: 24px;max-height: 600px;overflow-y: auto;">{{data.content}}</div>
<div flex="dir:left main:center">
<div :style="btnStyle" style="text-align: center;">{{data.btnText}}</div>
</div>
</div>
</div>
</div>
</div>
<div>
<el-form label-width="100px" @submit.native.prevent>
<el-form-item label="头部图片">
<el-tooltip class="item" effect="dark" content="建议尺寸600*150" placement="top">
<el-button size="mini" @click="choicImg=true,checkIndex=2">选择图片</el-button>
</el-tooltip>
<div flex="main:center cross:center" class="notice-gallery-item">
<img style="max-width:100%;max-height: 100%;" :src="getIconLink(data.headerUrl)" />
</div>
</el-form-item>
<el-form-item label="按钮颜色">
<el-color-picker v-model="data.btnColor"></el-color-picker>
</el-form-item>
<el-form-item label="按钮宽度">
<label slot="label">按钮宽度
<el-tooltip class="item" effect="dark" content="最大宽度500px" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</label>
<el-input v-model.number="data.btnWidth" type="number" max="500">
<template slot="append">
<span>px</span>
</template>
</el-input>
</el-form-item>
<el-form-item label="按钮高度">
<label slot="label">按钮高度
<el-tooltip class="item" effect="dark" content="最大高度80px" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</label>
<el-input v-model.number="data.btnHeight" type="number" max="80">
<template slot="append">
<span>px</span>
</template>
</el-input>
</el-form-item>
<el-form-item label="按钮圆角">
<label slot="label">按钮圆角
<el-tooltip class="item" effect="dark" content="最大圆角40px" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</label>
<el-input v-model.number="data.btnRadius" type="number" max="40">
<template slot="append">
<span>px</span>
</template>
</el-input>
</el-form-item>
<el-form-item label="按钮文本内容">
<el-input v-model="data.btnText"></el-input>
</el-form-item>
<el-form-item label="按钮文本颜色">
<el-color-picker v-model="data.btnTextColor"></el-color-picker>
</el-form-item>
</el-form>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="dialogVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import ChooseImg from "@/components/global/ChooseImg.vue";
export default {
props: ["noticeData", "index", "dataLeng"],
components: {
ChooseImg
},
data() {
return {
choicImg: false,
dialogVisible: false,
data: this.noticeData.data,
checkIndex: 0,
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
//选择图片
SelectId(msg) {
if (this.checkIndex == 1) {
this.data.icon = msg.url;
} else if (this.checkIndex == 2) {
this.data.headerUrl = msg.url;
}
this.choicImg = false;
},
//判断是否包含http
getIconLink(url) {
let str = ''
if (url.indexOf('http') != -1) {
str = url
} else {
str = 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + url
}
return str;
}
},
computed: {
cStyle() {
if (this.data.background) {
return `background: ${this.data.background};` +
`color: ${this.data.textColor};`
} else {
return `color: ${this.data.textColor};`
}
},
btnStyle() {
return `background: ${this.data.btnColor};` +
`color: ${this.data.btnTextColor};` +
`border-radius: ${this.data.btnRadius}px;` +
`width: ${this.data.btnWidth}px;` +
`height: ${this.data.btnHeight}px;` +
`line-height: ${this.data.btnHeight}px;`
}
},
mounted() {
}
};
</script>
src/components/sallCenter/plugin/rubik.vue
View file @ f6a5003a
......@@ -62,7 +62,7 @@
<template>
<div :class="{'active':rubData.isCked}">
<div class="diy-component-options" v-if="rubData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button>
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
<el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
<el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
style="right: -25px; top: 0;"></el-button>
......@@ -713,6 +713,10 @@
resetSord(IsUp){
this.$emit('getSord', this.index,IsUp);
},
//点击触发父组件删除
delPlugin(){
this.$emit('comDelPlugin', this.index);
}
},
updated() {
this.init = false;
......
src/components/sallCenter/plugin/search.vue
View file @ f6a5003a
<template>
<div :class="{'active':searchData.isCked}">
<div class="diy-component-options" v-if="searchData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button>
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
<el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
<el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)" style="right: -25px; top: 0;"></el-button>
<el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)" style="right: -25px; top: 30px;"></el-button>
......@@ -56,7 +56,12 @@
//向父组件传值 并调用排序
resetSord(IsUp){
this.$emit('getSord', this.index,IsUp);
}
},
//点击触发父组件删除
delPlugin(){
this.$emit('comDelPlugin', this.index);
},
},
mounted() {
}
......
src/components/sallCenter/plugin/video.vue 0 → 100644
View file @ f6a5003a
<style>
.diy-video {
width: 100%;
height: 400px;
background: #353535;
}
.diy-video .el-input-group__append {
background-color: #fff
}
.video-gallery-item {
width: 100px;
height: 100px;
border: 1px solid #e3e3e3;
border-radius: 2px;
margin-right: 10px;
margin-bottom: 10px;
position: relative;
}
</style>
<template>
<div :class="{'active':videoData.isCked}">
<div class="diy-component-options" v-if="videoData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
<el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
<el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
style="right: -25px; top: 0;"></el-button>
<el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
style="right: -25px; top: 30px;"></el-button>
</div>
<div class="diy-component-preview">
<div class="diy-video">
<img :src="getIconLink(data.pic_url)" style="width: 100%;height:100%;" v-if="data.pic_url">
</div>
</div>
<div class="diy-component-edit" v-if="videoData.isCked">
<el-form label-width="100px" @submit.native.prevent>
<el-form-item label="封面图片">
<el-tooltip class="item" effect="dark" content="建议尺寸750*400" placement="top">
<el-button size="mini" @click="choicImg=true">选择图片</el-button>
</el-tooltip>
<div flex="main:center cross:center" class="video-gallery-item">
<img v-if="data.pic_url!=''" style="max-width:100%;max-height: 100%;" :src="getIconLink(data.pic_url)" />
</div>
</el-form-item>
<el-form-item label="视频链接">
<label slot="label">视频链接
<el-tooltip class="item" effect="dark" content="支持格式mp4;支持编码H.264;视频大小不能超过50 MB" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</label>
<el-input size="small" v-model="data.url" placeholder="请输入视频原地址或选择上传视频">
<template slot="append">
<el-button size="mini" @click="choicImg=true">选择文件</el-button>
</template>
</el-input>
</el-form-item>
</el-form>
</div>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
</div>
</template>
<script>
import ChooseImg from "@/components/global/ChooseImg.vue";
export default {
props: ["videoData", "index", "dataLeng"],
components: {
ChooseImg
},
data() {
return {
choicImg: false,
data: this.videoData.data,
};
},
created() {
},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
},
//选择图片
SelectId(msg) {
this.data.pic_url = msg.url;
this.choicImg = false;
},
//判断是否包含http
getIconLink(url) {
let str = ''
if (url.indexOf('http') != -1) {
str = url
} else {
str = 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + url
}
return str;
}
},
computed: {
},
mounted() {
}
};
</script>
src/components/sallCenter/templateEdit.vue
View file @ f6a5003a
......@@ -66,9 +66,11 @@
height: 705px;
margin-left: 6px;
}
.mobile-framework{
.mobile-framework {
width: 375px;
}
.mobile-framework-header {
height: 60px;
line-height: 60px;
......@@ -87,68 +89,77 @@
background-position: left center;
}
.diy-component-preview {
cursor: pointer;
position: relative;
zoom: 0.5;
-moz-transform: scale(0.5);
-moz-transform-origin: top left;
font-size: 28px;
}
.diy-component-edit {
position: absolute;
top: 0;
bottom: 0;
left: 465px;
right: 0;
background: #fff;
padding: 20px;
overflow: auto;
min-width: 650px;
padding-right:20%;
}
.diy-component-options {
position: relative;
}
.active .diy-component-preview {
border: 2px dashed #409EFF;
left: -2px;
right: -2px;
width: calc(100% + 4px);
}
.diy-search {
padding: 24px;
cursor: pointer;
background: rgb(242, 242, 242);
}
.diy-component-options .el-button {
height: 25px;
line-height: 25px;
width: 25px;
padding: 0;
text-align: center;
border: none;
border-radius: 0;
position: absolute;
margin-left: 0;
}
.diy-search > div {
height: 60px;
line-height: 60px;
padding: 0 24px;
font-size: 28px;
}
.diy-component-edit .el-color-picker {
vertical-align: middle;
}
.tpEdit_btmMenu{
height: 54px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
.diy-component-preview {
cursor: pointer;
position: relative;
zoom: 0.5;
-moz-transform: scale(0.5);
-moz-transform-origin: top left;
font-size: 28px;
}
.diy-component-edit {
position: absolute;
top: 0;
bottom: 0;
left: 465px;
right: 0;
background: #fff;
padding: 20px;
overflow: auto;
min-width: 650px;
padding-right: 20%;
}
.diy-component-options {
position: relative;
}
.active .diy-component-preview {
border: 2px dashed #409EFF;
left: -2px;
right: -2px;
width: calc(100% + 4px);
}
.diy-search {
padding: 24px;
cursor: pointer;
background: rgb(242, 242, 242);
}
.diy-component-options .el-button {
height: 25px;
line-height: 25px;
width: 25px;
padding: 0;
text-align: center;
border: none;
border-radius: 0;
position: absolute;
margin-left: 0;
}
.diy-search>div {
height: 60px;
line-height: 60px;
padding: 0 24px;
font-size: 28px;
}
.diy-component-edit .el-color-picker {
vertical-align: middle;
}
.tpEdit_btmMenu {
height: 54px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
</style>
<template>
<div class="templateEdit">
......@@ -169,7 +180,8 @@
<div class="component-group" v-for="(item,index) in allComponents" :key="index">
<div class="component-group-name">{{item.GroupName}}</div>
<div flex class="component-list">
<div class="component-item" v-for="(subItem,subIndex) in item.SubList" @click="addPlugin(subItem.Id)" :key="subIndex">
<div class="component-item" v-for="(subItem,subIndex) in item.SubList" @click="addPlugin(subItem.Id)"
:key="subIndex">
<img :src="subItem.Icon" alt="" />
<div>{{subItem.Name}}</div>
</div>
......@@ -192,11 +204,22 @@
</div>
<!-- 为空的样式结束 -->
<div v-for="(item,index) in dataList" :key="index" @click="getItem(item)">
<search v-if="item.Id=='search'" :searchData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></search>
<navigationIcon v-if="item.Id=='nav'" :navData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></navigationIcon>
<banner v-if="item.Id=='banner'" :banData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></banner>
<rubik v-if="item.Id=='rubik'" :rubData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></rubik>
<goods v-if="item.Id=='goods'" :goodData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></goods>
<search v-if="item.Id=='search'" :searchData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></search>
<navigationIcon v-if="item.Id=='nav'" :navData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></navigationIcon>
<banner v-if="item.Id=='banner'" :banData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></banner>
<rubik v-if="item.Id=='rubik'" :rubData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></rubik>
<goods v-if="item.Id=='goods'" :goodData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></goods>
<notice v-if="item.Id=='notice'" :noticeData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></notice>
<mylink v-if="item.Id=='link'" :linkData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></mylink>
<myvideo v-if="item.Id=='video'" :videoData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
:index="index" :dataLeng="dataList.length"></myvideo>
</div>
</div>
</div>
......@@ -214,13 +237,16 @@
import banner from "../sallCenter/plugin/banner.vue"
import rubik from "../sallCenter/plugin/rubik.vue"
import goods from "../sallCenter/plugin/goods.vue"
import notice from "../sallCenter/plugin/notice.vue"
import mylink from "../sallCenter/plugin/link.vue"
import myvideo from "../sallCenter/plugin/video.vue"
export default {
data() {
return {
allComponents:[],
dataList:[],
allComponents: [],
dataList: [],
//是否为空
isEmpty:true,
isEmpty: true,
};
},
created() {
......@@ -232,13 +258,16 @@
banner,
rubik,
goods,
notice,
mylink,
myvideo
},
methods: {
//获取左侧菜单
GetPlugInList(){
GetPlugInList() {
this.apipost("/api/Tenant/GetPlugInList", {}, res => {
if (res.data.resultCode == 1) {
this.allComponents=res.data.data;
this.allComponents = res.data.data;
console.log(this.allComponents);
} else {
this.Info(res.data.message);
......@@ -246,143 +275,206 @@
})
},
//点击基础组件
addPlugin(Id){
this.isEmpty=false;
switch(Id.toString()) {
addPlugin(Id) {
this.isEmpty = false;
switch (Id.toString()) {
//搜索
case 'search':
let searchObj = {
Id:'search',
isCked:false,
data:{
color:'#FFFFFF',
background:'#f2f2f2',
radius:4,
placeholder:'搜索',
textColor:'#555555',
textPosition:"left"
}
let searchObj = {
Id: 'search',
isCked: false,
data: {
color: '#FFFFFF', //搜索框颜色
background: '#f2f2f2', //背景颜色
radius: 4, //圆角
placeholder: '搜索', //提示文字
textColor: '#555555', //文字颜色
textPosition: "left" //文字位置
}
this.dataList.push(searchObj);
break;
}
this.dataList.push(searchObj);
break;
//导航图标
case 'nav':
let navObj={
Id:'nav',
isCked:false,
data:{
color:'#353535',
rows:1,
columns:3,
scroll:true,
navs:[],
showImg:false,
backgroundColor:'#ffffff',
backgroundPicUrl:'',
position:5,
mode:1,
backgroundHeight:100,
backgroundWidth:100,
borderBackground:'#ffffff'
}
}
this.dataList.push(navObj);
break;
let navObj = {
Id: 'nav',
isCked: false,
data: {
color: '#353535',
rows: 1, //每页行数
columns: 3, //每行个数
scroll: true, //左右滑动
navs: [], //导航图标
showImg: false, //背景图片
backgroundColor: '#ffffff', //背景颜色
backgroundPicUrl: '', //背景链接
position: 5, //图片位置
mode: 1, //填充方式
backgroundHeight: 100, //背景图宽
backgroundWidth: 100, //背景图高
}
}
this.dataList.push(navObj);
break;
//轮播广告
case 'banner':
let banObj={
Id:"banner",
isCked:false,
data:{
style:1,
fill:1, //填充方式0-留白 1填充
height:450,
banners:[],
let banObj = {
Id: "banner",
isCked: false,
data: {
style: 1, //样式
fill: 1, //填充方式0-留白 1填充
height: 450, //默认高度
banners: [], //轮播图
}
}
this.dataList.push(banObj);
break;
//公告
case 'notice':
let noticeObj = {
Id: 'notice',
isCked: false,
data: {
name: '公告',
content: '',
icon: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-notice.png',
textColor: '#ffffff',
background: '#f67f79',
headerUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-notice-title.png',
btnColor: '#ff4544',
btnWidth: 500,
btnHeight: 80,
btnRadius: 40,
btnText: '我知道了',
btnTextColor: '#ffffff'
}
}
this.dataList.push(noticeObj);
break;
// 专题未做
//标题
case 'link':
let linkObj = {
Id: 'link',
isCked: false,
data: {
title: '', //标题
style: '1', //标题样式
fontSize: '36', //字体大小
position: 'left', //标题位置
styleColor: '#353535', //样式颜色
link: {}, //链接
picSwitch: false, //图标开关
arrowsSwitch: false, //箭头开关
picUrl: '', //图标地址
color: '#353535', //文字颜色
background: '#ffffff' //背景颜色
}
}
this.dataList.push(linkObj);
break;
//图片广告
case 'rubik':
let rubObj={
Id:'rubik',
isCked:false,
data:{
style:-1,
space:0,
height:0,
w:1,
h:1,
list:[],
hotspot:[]
let rubObj = {
Id: 'rubik',
isCked: false,
data: {
style: -1, //样式-选取几张图
space: 0, //图片件间隔
height: 0, //选中的第几张图 对应的style_list里的height
w: 1, //选中的第几张图 对应的style_list里的w
h: 1, //选中的第几张图 对应的style_list里的h
list: [], //选中的第几张图的小区域对应的数据
hotspot: [] //热区划分
}
}
this.dataList.push(rubObj);
break;
//视频
case 'video':
let videoObj = {
Id: 'video',
isCked: false,
data: {
pic_url: '', //图片地址
url: '' //视频地址
}
}
this.dataList.push(videoObj);
break;
//商品
case 'goods':
let goodsObj={
Id:'goods',
isCked:false,
data:{
showCat: false,
catPosition: 'top',
catStyle: 1,
catList: [],
list: [],
addGoodsType: 0,
goodsLength: 10,
listStyle: 1,
goodsCoverProportion: '1-1',
fill: 1,
goodsStyle: 1,
textStyle: 1,
showGoodsName: true,
showGoodsPrice: true,
showBuyBtn: true,
buyBtn: 'cart',
buyBtnStyle: 1,
buyBtnText: '购买',
buttonColor: '#ff4544',
showGoodsTag: false,
customizeGoodsTag: false,
goodsTagPicUrl: '',
showImg: false,
backgroundColor: '#fff',
backgroundPicUrl: '',
let goodsObj = {
Id: 'goods',
isCked: false,
data: {
showCat: false, //显示分类
catPosition: 'top', //分类栏位置
catStyle: 1, //分类样式
catList: [], //分类列表
list: [], //商品列表
addGoodsType: 0, //商品添加方式
goodsLength: 10, //商品数量
listStyle: 1, //列表样式
goodsCoverProportion: '1-1', //商品封面图宽高比例
fill: 1, //商品封面图填充
goodsStyle: 1, //商品样式
textStyle: 1, //文本样式
showGoodsName: true, //显示商品名称
showGoodsPrice: true, //显示商品价格
showBuyBtn: true, //显示购买按钮
buyBtn: 'cart', //购买按钮样式
buyBtnStyle: 1, //购买按钮文字样式
buyBtnText: '购买', //购买按钮文字
buttonColor: '#ff4544', //购买按钮颜色
showGoodsTag: false, //显示商品角标
customizeGoodsTag: false, //商品角标自定义
goodsTagPicUrl: '', //商品角标链接
showImg: false, //
backgroundColor: '#fff', //背景颜色
backgroundPicUrl: '', //背景链接
position: 5,
mode: 1,
backgroundHeight: 100,
backgroundWidth: 100,
backgroundHeight: 100, //背景高
backgroundWidth: 100, //背景宽
}
}
this.dataList.push(goodsObj);
break;
}
}
},
//给子组件调用 重新排序上移下移
getSord(index,IsUp){
getSord(index, IsUp) {
var currentItem = this.dataList[index];
if(IsUp==0){
if (IsUp == 0) {
if (index > 0) {
var upItem = this.dataList[index - 1];
this.$set(this.dataList, index - 1, currentItem);
this.$set(this.dataList, index, upItem);
}
}else{
if(index!=this.dataList.length-1){
} else {
if (index != this.dataList.length - 1) {
var downItem = this.dataList[index + 1];
this.$set(this.dataList, index + 1, currentItem);
this.$set(this.dataList, index, downItem);
}
}
},
//删除组件事件
comDelPlugin(index) {
this.dataList.splice(index, 1);
},
//点击选中
getItem(item){
this.dataList.forEach(x=>{
x.isCked=false;
getItem(item) {
this.dataList.forEach(x => {
x.isCked = false;
})
item.isCked=true;
item.isCked = true;
},
//点击保存
getAllData(){
console.log(this.dataList,'dataListtt');
getAllData() {
console.log(this.dataList, 'dataListtt');
}
},
mounted() {
......
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