Skip to content

E
ElectricitySheep
Commit 053409d9 authored by zhengke's avatar zhengke
Browse files
Options

曾加图片魔方

parent 575c7adb
Hide whitespace changes
Inline Side-by-side
Showing with 412 additions and 0 deletions
src/assets/img/storeDesign/select.png 0 → 100644
View file @ 053409d9
src/assets/img/storeDesign/select.png

2.77 KB

src/components/StoreDesign/imgCube.vue 0 → 100644
View file @ 053409d9
<template>
<div class="imgCube">
<template v-if="imgCubeAdd">
<div class="head-title">
图片魔方列表
<el-button @click="imgCubeAdd=false,clearInfo()" style="float:right;margin-top: -5px;" size="small"
type="primary">
添加图片魔方
</el-button>
</div>
<div class="content">
<div>
<div class="searchInput">
<el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入搜索内容" v-model="msg.RoleName"
size="small" clearable @keyup.enter.native="msg.pageIndex=1,getList()">
</el-input>
<span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"
@click="msg.pageIndex=1,getList()"> </span>
</div>
</div>
<el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0">
<el-table-column prop="Id" label="ID" width="150">
</el-table-column>
<el-table-column prop="Name" label="名称">
</el-table-column>
<el-table-column prop="createTime" label="创建日期" width="450">
</el-table-column>
<el-table-column label="操作" width="220">
<template slot-scope="scope">
<img @click="EditRole(scope.row)" src="../../assets/img/userman/edit.png" alt="">
<img @click="RemmoveRole(scope.row)" style="margin-left:10px;" src="../../assets/img/userman/del.png"
alt="">
</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>
<template v-else>
<div class="head-title">
<span @click="imgCubeAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">图片魔方列表</span><span
style="margin:0 9px;color:#C0C4CC">/</span><span>图片魔方编辑</span>
</div>
<div class="content">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="魔方名称" prop="Name">
<el-input v-model="addMsg.Name" placeholder="请输入魔方名称" size="small" maxlength="20" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="样式选择">
<div class="block-box" v-for="(item,index) in styleList" :key="index" :class="isActive==index?'active':''"
@click="getStyleType(index,item.Style)">
<img src="../../assets/img/storeDesign/select.png" class="Cubeselect" alt="" />
<div class="opacity"></div>
<el-button class="choose-button" type="primary">启用该样式</el-button>
<img :src="item.imgUrl" class="cube_blockImg" alt="">
</div>
</el-form-item>
<el-form-item label="模板设置" >
<template v-if="addMsg.MagicData.length==0">
<el-tag type="danger">请先选择样式</el-tag>
</template>
<template v-else>
<el-row style="margin-bottom:15px;" v-for="(subItem,subIndex) in addMsg.MagicData" :key="subIndex">
<el-col :span="4">
<el-tooltip class="item" effect="dark" content="建议尺寸：750*360" placement="top">
<el-button size="mini" @click="choicImg=true,commonIndex=subIndex">选择图片</el-button>
</el-tooltip>
<div class="customize-share-title">
<div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(subItem.imgUrl) + ')'}">
<i v-if="subItem.imgUrl==''" class="el-icon-picture-outline"></i>
</div>
</div>
</el-col>
<el-col :span="10">
<div style="display:flex;" flex="box:last">
<el-input type="text" v-model="subItem.Link" :disabled="true" size="small">
</el-input>
<div>
<el-button size="mini" @click="isShowLink=true,commonIndex=subIndex">选择链接</el-button>
</div>
</div>
</el-col>
</el-row>
</template>
</el-form-item>
</el-form>
</div>
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存
</el-button>
</template>
<!-- 选择图片文件 -->
<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 {
data() {
return {
loading: false,
isActive: -1,
choicImg:false,
isShowLink:false,
commonIndex:-1,
dataList: [{
Id: 1,
Name: '123',
createTime: '2020'
}],
msg: {
pageIndex: 1,
pageSize: 15,
Name: "",
},
total: 0,
imgCubeAdd: true,
addMsg: {
Id: 0, //魔方Id
Name: '', //魔方名称
Style: 0, //魔方样式
MagicData: []
},
defaultMsg:[{
imgUrl:'',
Link:''
},{
imgUrl:'',
Link:''
},{
imgUrl:'',
Link:''
},{
imgUrl:'',
Link:''
}],
//样式选择枚举
styleList: [{
Style: 1,
imgUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/cube1-1.png'
}, {
Style: 2,
imgUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/cube1-2.png'
}, {
Style: 3,
imgUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/cube1-3.png'
}, {
Style: 4,
imgUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/cube1-4.png'
}, {
Style: 2,
imgUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/cube2-1.png'
}, {
Style: 3,
imgUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/cube2-2.png'
}, {
Style: 4,
imgUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/cube2-3.png'
}, {
Style: 4,
imgUrl: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/cube3-1.png'
}],
rules: {
Name: [{
required: true,
message: "请输入魔方名称",
trigger: "blur"
}]
},
};
},
created() {
},
components: {
ChooseImg,
chooseMeun
},
methods: {
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
getList() {
this.apipost("/api/Employee/GetRolePageList", this.msg, res => {
if (res.data.resultCode == 1) {
this.dataList = res.data.data.pageData;
this.total = res.data.data.count;
} else {
this.Info(res.data.message);
}
})
},
submitform(addMsg) {
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
this.saveMsg();
} else {
return false;
}
});
},
//保存
saveMsg() {
var ckedKeys = this.$refs.tree.getCheckedKeys();
this.addMsg.RoleAuth = ckedKeys.join(',');
this.apipost("/api/Employee/SetRole", this.addMsg, res => {
if (res.data.resultCode == 1) {
this.getList();
this.clearInfo();
this.imgCubeAdd = true;
} else {
this.Info(res.data.message);
}
})
},
//清空
clearInfo() {
this.addMsg.RoleId = 0;
this.addMsg.RoleName = '';
this.addMsg.RoleIntro = '';
this.addMsg.RoleAuth = '';
},
//修改
EditRole(item) {
this.apipost("/api/Employee/GetRole", {
RoleId: item.RoleId
}, res => {
if (res.data.resultCode == 1) {
this.addMsg = res.data.data;
this.imgCubeAdd = false;
let newArr = this.addMsg.RoleAuth.split(',');
setTimeout(() => {
this.$refs.tree.setCheckedKeys(newArr);
}, 10)
} else {
this.Info(res.data.message);
}
})
},
//删除
RemmoveRole(item) {
var that = this;
that.Confirm("是否要删除?", function () {
that.apipost("/api/Employee/RemoveRole", {
RoleId: item.RoleId
}, res => {
if (res.data.resultCode == 1) {
that.getList();
} else {
that.Info(res.data.message);
}
})
})
},
//点击选择样式
getStyleType(index, Style) {
this.isActive = index;
this.addMsg.MagicData=[];
for(var i=0;i<Style;i++){
this.addMsg.MagicData.push(this.defaultMsg[i]);
}
},
//选择图片
SelectId(msg) {
if(this.commonIndex>-1){
this.defaultMsg[this.commonIndex].imgUrl = msg.url;
}
this.choicImg = false;
},
//获取选择链接
getChoiceLink() {
//调用子组件方法
var obj = this.$refs.chooseMeun.getChooseMenu();
if(this.commonIndex>-1){
this.defaultMsg[this.commonIndex].Link = obj.PageUrl;
}
this.isShowLink = false;
},
},
mounted() {
// this.getList();
}
};
</script>
<style>
.imgCube .content .searchInput {
border: 1px solid #DCDFE6;
border-radius: 4px;
}
.imgCube .content .searchInput .el-input__inner {
border: none;
outline: none;
height: 30px;
line-height: 30px;
}
.imgCube .content .searchInput {
line-height: normal;
display: inline-table;
width: 100%;
border-collapse: separate;
border-spacing: 0;
width: 250px;
margin-right: 20px;
}
.imgCube .content {
background: #fff;
margin-top: 10px;
padding: 20px;
box-sizing: border-box;
}
.imgCube .block-box {
color: #ffffff;
cursor: pointer;
display: inline-block;
margin-right: 25px;
height: 280px;
width: 300px;
border: 1px solid #D4D4D4;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
position: relative;
}
.block-box:hover .opacity {
display: block;
}
.block-box:hover .choose-button {
display: block;
}
.block-box .Cubeselect {
display: none;
}
.choose-button {
position: absolute;
height: 30px;
width: 80px;
padding: 0;
text-align: center;
background-color: #409EFF;
top: 50%;
left: 0;
right: 0;
margin: -15px auto 0;
z-index: 10;
display: none;
}
.imgCube .opacity {
position: absolute;
height: 250px;
width: 280px;
bottom: 0;
left: 10px;
z-index: 5;
background-color: rgba(0, 0, 0, .3);
display: none;
}
.cube_blockImg {
width: 280px;
height: 250px;
position: absolute;
bottom: 0px;
left: 10px;
}
.active .Cubeselect {
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
display: block;
z-index: 10;
}
</style>
src/router/index.js
View file @ 053409d9
......@@ -309,6 +309,12 @@ export default new Router({
name: 'storeStyle',
component: resolve => require(['@/components/StoreDesign/storeStyle'], resolve),
},
//店铺管理 图片魔方
{
path: '/imgCube',
name: 'imgCube',
component: resolve => require(['@/components/StoreDesign/imgCube'], resolve),
},
//店铺管理 标签栏
{
path: '/labelBar',
......
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