Skip to content

E
ElectricitySheep
Commit 8b0bdc54 authored by zhengke's avatar zhengke
Browse files
Options

增加组件

parent 62832c9f
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1268 additions and 331 deletions
src/components/common/choiceFenlei.vue 0 → 100644
View file @ 8b0bdc54
<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 @ 8b0bdc54
<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 @ 8b0bdc54
......@@ -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 @ 8b0bdc54
This diff is collapsed.
src/components/sallCenter/plugin/link.vue 0 → 100644
View file @ 8b0bdc54
This diff is collapsed.
src/components/sallCenter/plugin/navigationIcon.vue
View file @ 8b0bdc54
......@@ -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 @ 8b0bdc54
<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 @ 8b0bdc54
......@@ -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 @ 8b0bdc54
<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 @ 8b0bdc54
<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 @ 8b0bdc54
This diff is collapsed.
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