Skip to content

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

修改

parent 7b39d937
Hide whitespace changes
Inline Side-by-side
Showing with 309 additions and 289 deletions
src/components/StoreDesign/videoManage.vue
View file @ ee399755
...@@ -73,9 +73,11 @@ ...@@ -73,9 +73,11 @@
<el-button size="mini" @click="choicImg=true">选择图片</el-button> <el-button size="mini" @click="choicImg=true">选择图片</el-button>
</el-tooltip> </el-tooltip>
<div class="customize-share-title"> <div class="customize-share-title">
<div class="zk_pic_box" flex="main:center cross:center" <div class="zk_pic_box" @click="choicImg=true" flex="main:center cross:center" style="width:80px;height:80px;"
:style="{backgroundImage:'url(' + getIconLink(addMsg.VedioCoverImg) + ')'}"> :style="{backgroundImage:'url(' + getIconLink(addMsg.VedioCoverImg) + ')'}">
<i v-if="addMsg.VedioCoverImg==''" class="el-icon-picture-outline"></i> <i v-if="addMsg.VedioCoverImg==''" class="el-icon-picture-outline"></i>
<el-button type="danger" v-if="addMsg.VedioCoverImg!=''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="addMsg.VedioCoverImg=''" circle></el-button>
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
......
src/components/global/ChooseImg.vue
View file @ ee399755
...@@ -41,12 +41,12 @@ ...@@ -41,12 +41,12 @@
</div> </div>
<div class="basefix app-attachment-list"> <div class="basefix app-attachment-list">
<div class="app-attachment-item app-attachment-upload"> <div class="app-attachment-item app-attachment-upload">
<div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 100px;"> <el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
<el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
:show-file-list="false" :http-request="UploadImage"> :show-file-list="false" :http-request="UploadImage">
<i class="el-icon-upload"></i> <div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 100px;">
</el-upload> <i class="el-icon-upload"></i>
</div> </div>
</el-upload>
</div> </div>
<el-tooltip v-for="(item,index) in PageList" :key="index" class="item" effect="dark" :content="'双击选中【'+item.Name+'】'" <el-tooltip v-for="(item,index) in PageList" :key="index" class="item" effect="dark" :content="'双击选中【'+item.Name+'】'"
placement="top-start"> placement="top-start">
......
src/components/global/Choosevideo.vue
View file @ ee399755
<template> <template>
<div class="ChooseImg Choosevideo"> <div class="ChooseImg Choosevideo">
<el-row v-loading="loading" style="border: 1px solid rgb(227, 227, 227);"> <el-row v-loading="loading" style="border: 1px solid rgb(227, 227, 227);">
<el-col :span="6" style="border-right: 1px solid rgb(227, 227, 227);"> <el-col :span="6" style="border-right: 1px solid rgb(227, 227, 227);">
<el-button @click="addGroup" style="margin-top: 12px;margin-left: 5%;" type="primary" size="small">添加分组</el-button> <el-button @click="addGroup" style="margin-top: 12px;margin-left: 5%;" type="primary" size="small">添加分组
<div style="margin:20px 0"> </el-button>
<el-input v-model="searchVal" style="width:90%;margin:0 5%" placeholder="请输入分类名称搜索" size="small"></el-input> <div style="margin:20px 0">
</div> <el-input v-model="searchVal" style="width:90%;margin:0 5%" placeholder="请输入分类名称搜索" size="small"></el-input>
<div class="el-scrollbar" style="height: 450px; width: 100%;"> </div>
<div class="el-scrollbar__wrap" style="margin-bottom: -8px; margin-right: -8px;"> <div class="el-scrollbar" style="height: 450px; width: 100%;">
<div class="el-scrollbar__view"> <div class="el-scrollbar__wrap" style="margin-bottom: -8px; margin-right: -8px;">
<li :class="PageMsg.GroupId==0?'selectActive' : ''" @click="SelectGroup(0)" class="el-menu-item" style="padding-left: 10px;padding-right: 10px;"> <div class="el-scrollbar__view">
<i class="el-icon-tickets"></i> <li :class="PageMsg.GroupId==0?'selectActive' : ''" @click="SelectGroup(0)" class="el-menu-item"
<span >全部</span> style="padding-left: 10px;padding-right: 10px;">
</li> <i class="el-icon-tickets"></i>
<li :class="PageMsg.GroupId==item.Id?'selectActive' : ''" @click="SelectGroup(item.Id)" v-for="(item,index) in NewItems" :key="index" class="el-menu-item" style="padding-left: 10px;padding-right: 10px;"> <span>全部</span>
<div flex="dir:left box:last"> </li>
<el-col :span="18" style="overflow: hidden; text-overflow: ellipsis;"> <li :class="PageMsg.GroupId==item.Id?'selectActive' : ''" @click="SelectGroup(item.Id)"
<i class="el-icon-tickets"></i> v-for="(item,index) in NewItems" :key="index" class="el-menu-item"
<span>{{item.Name}}</span> style="padding-left: 10px;padding-right: 10px;">
</el-col> <div flex="dir:left box:last">
<el-col class="blue" :span="6"> <el-col :span="18" style="overflow: hidden; text-overflow: ellipsis;">
<span v-if="scgroupMsg.Recycled==1" @click.prevent="EditGroup(item)">编辑</span> <i class="el-icon-tickets"></i>
| <span v-if="scgroupMsg.Recycled==1" @click.prevent="HsGroup(item)">删除</span> <span>{{item.Name}}</span>
</el-col> </el-col>
</div> <el-col class="blue" :span="6">
</li> <span v-if="scgroupMsg.Recycled==1" @click.prevent="EditGroup(item)">编辑</span>
</div> | <span v-if="scgroupMsg.Recycled==1" @click.prevent="HsGroup(item)">删除</span>
</div> </el-col>
</div> </div>
</el-col> </li>
<el-col :span="18"> </div>
<div style="margin-top: 10px;margin-left: 20px;" class="appendInput"> </div>
<el-input size="small" style="width:250px" placeholder="请输入内容" v-model="PageMsg.Name"> </div>
<el-button @click="GetPageList" slot="append" icon="el-icon-search"></el-button> </el-col>
</el-input> <el-col :span="18">
</div> <div style="margin-top: 10px;margin-left: 20px;" class="appendInput">
<div class="basefix app-attachment-list"> <el-input size="small" style="width:250px" placeholder="请输入内容" v-model="PageMsg.Name">
<div class="material-item material-upload"> <el-button @click="GetPageList" slot="append" icon="el-icon-search"></el-button>
<div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 100px;"> </el-input>
<el-upload class="avatar-uploader" action="" </div>
accept="video/mp4,video/ogg,video/webm" <div class="basefix app-attachment-list">
:show-file-list="false" :http-request="UploadImage"> <div class="material-item material-upload">
<i class="el-icon-upload"></i> <el-upload class="avatar-uploader" action="" accept="video/mp4,video/ogg,video/webm" :show-file-list="false"
</el-upload> :http-request="UploadImage">
</div> <div class="app-upload" flex="main:center cross:center" style="width: 100px; height: 100px;">
</div> <i class="el-icon-upload"></i>
<el-tooltip v-for="(item,index) in PageList" :key="index" class="item" effect="dark" :content="item.Name" placement="top-start"> </div>
<div @click="PageSelect(item,index)" :class="selectId==item.Id ? 'selected' :''" class="el-tooltip item material-item "> </el-upload>
<img :src="getIconLink(item.Path)+'?x-oss-process=video/snapshot,t_9,f_jpg,w_299,h_0,m_fast'" class="material-img" style="width: 100px; height: 100px;"> </div>
<div class="material-video-info"><i class="el-icon-video-play"></i> <span>{{item.VideoTime}}</span></div> <el-tooltip v-for="(item,index) in PageList" :key="index" class="item" effect="dark" :content="item.Name"
<div flex="dir:left" style="margin-top: 5px;"> placement="top-start">
<div class="material-name">{{item.Name}}</div> <div @click="PageSelect(item,index)" :class="selectId==item.Id ? 'selected' :''"
<!-- <div style="margin: 0px 5px;">|</div> class="el-tooltip item material-item ">
<img :src="getIconLink(item.Path)+'?x-oss-process=video/snapshot,t_9,f_jpg,w_299,h_0,m_fast'"
class="material-img" style="width: 100px; height: 100px;">
<div class="material-video-info"><i class="el-icon-video-play"></i> <span>{{item.VideoTime}}</span></div>
<div flex="dir:left" style="margin-top: 5px;">
<div class="material-name">{{item.Name}}</div>
<!-- <div style="margin: 0px 5px;">|</div>
<div> <div>
<button type="button" class="el-button el-button--text" style="padding: 0px;"> <button type="button" class="el-button el-button--text" style="padding: 0px;">
<span @click="EditPage(item)">编辑</span> <span @click="EditPage(item)">编辑</span>
</button> </button>
</div> --> </div> -->
</div> </div>
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div style="padding-right:10px"> <div style="padding-right:10px">
<el-pagination style="text-align:right" <el-pagination style="text-align:right" background :current-page="currentPage4"
background @current-change="handleCurrentChange" :page-size="msg.pageSize" layout="prev, pager, next,jumper"
:current-page="currentPage4" :total="total">
@current-change="handleCurrentChange" </el-pagination>
:page-size="msg.pageSize" </div>
layout="prev, pager, next,jumper" </el-col>
:total="total"> </el-row>
</el-pagination> <div style="margin-top:20px;text-align:right">
</div> <el-button size="small" type="primary" @click="SelectImgId">选定</el-button>
</el-col> </div>
</el-row> <!-- 新增分组 -->
<div style="margin-top:20px;text-align:right">
<el-button size="small" type="primary" @click="SelectImgId">选定</el-button>
</div>
<!-- 新增分组 -->
<el-dialog :modal="false" :modal-append-to-body='false' title="分组管理" :visible.sync="addGroupMsgDig" width="400px"> <el-dialog :modal="false" :modal-append-to-body='false' title="分组管理" :visible.sync="addGroupMsgDig" width="400px">
<el-form :model="addGroupMsg" :rules="addGroupMsgrules" ref="addGroupMsg" label-width="100px"> <el-form :model="addGroupMsg" :rules="addGroupMsgrules" ref="addGroupMsg" label-width="100px">
<el-form-item label="分组名称" prop="Name"> <el-form-item label="分组名称" prop="Name">
<el-input <el-input size="small" type="text" placeholder="请输入内容" v-model="addGroupMsg.Name" maxlength="8"
size="small" show-word-limit>
type="text" </el-input>
placeholder="请输入内容"
v-model="addGroupMsg.Name"
maxlength="8"
show-word-limit
>
</el-input>
</el-form-item> </el-form-item>
<!-- <el-form-item label="排序" prop="Sort"> <!-- <el-form-item label="排序" prop="Sort">
<el-input @keyup.native="checkInteger(addGroupMsg,'Sort')" size="small" v-model="addGroupMsg.Sort"></el-input> <el-input @keyup.native="checkInteger(addGroupMsg,'Sort')" size="small" v-model="addGroupMsg.Sort"></el-input>
...@@ -104,223 +100,226 @@ ...@@ -104,223 +100,226 @@
</template> </template>
<script> <script>
export default { export default {
name: 'ChooseImg', name: 'ChooseImg',
data(){ data() {
return{ return {
czType:0, czType: 0,
searchVal:'', searchVal: '',
val:'', val: '',
Id:'', Id: '',
currentPage4:1, currentPage4: 1,
msg:{ msg: {
pageIndex:1, pageIndex: 1,
pageSize:15, pageSize: 15,
}, },
total:0, total: 0,
loading:false, loading: false,
scgroupMsg:{ scgroupMsg: {
Id:0, Id: 0,
Name:'', Name: '',
Type:2, Type: 2,
Recycled:1, Recycled: 1,
}, },
groupList:[], groupList: [],
PageMsg:{ PageMsg: {
Id:0, Id: 0,
Name:'', Name: '',
Type:2, Type: 2,
Recycled:1, Recycled: 1,
pageIndex:1, pageIndex: 1,
pageSize:15, pageSize: 15,
GroupId:0, GroupId: 0,
}, },
PageList:[], PageList: [],
addGroupMsgDig:false, addGroupMsgDig: false,
pageMsgDig:false, pageMsgDig: false,
addGroupMsg:{ addGroupMsg: {
Id:0, Id: 0,
Name:'', Name: '',
Type:'', Type: '',
Sort:'', Sort: '',
}, },
addGroupMsgrules:{ addGroupMsgrules: {
Name: [{ Name: [{
required: true, required: true,
message: '请填写分组名称', message: '请填写分组名称',
trigger: 'blur' trigger: 'blur'
}], }],
Sort: [{ Sort: [{
required: true, required: true,
message: '请填写排序', message: '请填写排序',
trigger: 'blur' trigger: 'blur'
}], }],
}, },
addpageMsg:{ addpageMsg: {
Id:0, Id: 0,
Name:'', Name: '',
Type:2, Type: 2,
GroupId:0, GroupId: 0,
Path:'', Path: '',
Image:'', Image: '',
VideoTime:0, VideoTime: 0,
WithHeight:0, WithHeight: 0,
}, },
selectId:-1, selectId: -1,
emitmsg:{}, emitmsg: {},
} }
}, },
created(){ created() {
}, },
computed: { computed: {
NewItems() { NewItems() {
var _this = this; var _this = this;
var NewItems = []; var NewItems = [];
this.groupList.map(function(item) { this.groupList.map(function (item) {
if (item.Name.search(_this.searchVal) != -1) { if (item.Name.search(_this.searchVal) != -1) {
NewItems.push(item); NewItems.push(item);
} }
}); });
return NewItems; return NewItems;
} }
}, },
mounted(){ mounted() {
this.GetMemberGradeList(); this.GetMemberGradeList();
this.GetPageList(); this.GetPageList();
},
methods:{
InitData(Type){
this.czType=Type;
this.selectId=-1;
}, },
SelectImgId(){ methods: {
this.$emit('Selectvideo',this.emitmsg) InitData(Type) {
this.selectId=-1; this.czType = Type;
}, this.selectId = -1;
UploadImage(file) {
},
SelectImgId() {
this.$emit('Selectvideo', this.emitmsg)
this.selectId = -1;
},
UploadImage(file) {
this.UploadFileToTencent(this.FileType().GoodsImg, file.file, res => { this.UploadFileToTencent(this.FileType().GoodsImg, file.file, res => {
if (res.resultCode == 1) { if (res.resultCode == 1) {
this.addpageMsg.Path = res.FileUrl; this.addpageMsg.Path = res.FileUrl;
this.addpageMsg.Name = res.FileName; this.addpageMsg.Name = res.FileName;
this.addPageList(); this.addPageList();
} }
}) })
}, },
// 新增素材信息 // 新增素材信息
addPageList(){ addPageList() {
this.apipost("/api/product/SetMaterialInfo",this.addpageMsg, res => { this.apipost("/api/product/SetMaterialInfo", this.addpageMsg, res => {
if(res.data.resultCode==1){ if (res.data.resultCode == 1) {
this.GetPageList(); this.GetPageList();
} }
}) })
}, },
PageSelect(item){ PageSelect(item) {
this.emitmsg={ this.emitmsg = {
Path:this.domainManager().ImageUrl+item.Path, Path: this.domainManager().ImageUrl + item.Path,
Id:item.Id Id: item.Id
} }
this.selectId=item.Id; this.selectId = item.Id;
}, },
addGroup(){ addGroup() {
this.addGroupMsgDig=true; this.addGroupMsgDig = true;
this.addGroupMsg={ this.addGroupMsg = {
Id:0, Id: 0,
Name:'', Name: '',
Type:2, Type: 2,
Sort:'', Sort: '',
} }
}, },
HsGroup(item){ HsGroup(item) {
let that=this; let that = this;
that.$confirm('是否删除?', '提示', { that.$confirm('是否删除?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.apipost('/api/product/SetMaterialGroupRecycled',{GroupId:item.Id}, this.apipost('/api/product/SetMaterialGroupRecycled', {
res => { GroupId: item.Id
if (res.data.resultCode === 1) { },
this.GetMemberGradeList(); res => {
this.Success(res.data.message) if (res.data.resultCode === 1) {
this.GetMemberGradeList();
this.Success(res.data.message)
} else { } else {
this.Error(res.data.message); this.Error(res.data.message);
} }
}, },
null null
); );
}).catch(() => { }).catch(() => {
}); });
}, },
EditGroup(item){ EditGroup(item) {
this.addGroupMsgDig=true; this.addGroupMsgDig = true;
this.addGroupMsg={ this.addGroupMsg = {
Id:item.Id, Id: item.Id,
Name:item.Name, Name: item.Name,
Type:item.Type, Type: item.Type,
Sort:item.Sort, Sort: item.Sort,
} }
}, },
GroupsubmitForm (formName) { GroupsubmitForm(formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
this.apipost('/api/product/SetMaterialGroupInfo',this.addGroupMsg, this.apipost('/api/product/SetMaterialGroupInfo', this.addGroupMsg,
res => { res => {
if (res.data.resultCode === 1) { if (res.data.resultCode === 1) {
this.GetMemberGradeList(); this.GetMemberGradeList();
this.Success(res.data.message) this.Success(res.data.message)
this.addGroupMsgDig=false; this.addGroupMsgDig = false;
} else { } else {
this.Error(res.data.message); this.Error(res.data.message);
} }
}, },
null null
); );
} else { } else {
return false; return false;
} }
}); });
}, },
SelectGroup(id){ SelectGroup(id) {
this.PageMsg.GroupId=id; this.PageMsg.GroupId = id;
this.GetPageList(); this.GetPageList();
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.msg.pageIndex = val; this.msg.pageIndex = val;
this.GetPageList(); this.GetPageList();
}, },
GetMemberGradeList(){ GetMemberGradeList() {
this.loading=true; this.loading = true;
this.apipost("/api/product/GetMaterialGroupList",this.scgroupMsg, res => { this.apipost("/api/product/GetMaterialGroupList", this.scgroupMsg, res => {
this.loading=false; this.loading = false;
this.groupList=res.data.data; this.groupList = res.data.data;
}) })
}, },
GetPageList(){ GetPageList() {
this.loading=true; this.loading = true;
this.apipost("/api/product/GetMaterialInfoPageList",this.PageMsg, res => { this.apipost("/api/product/GetMaterialInfoPageList", this.PageMsg, res => {
this.loading=false; this.loading = false;
this.total=res.data.data.count; this.total = res.data.data.count;
let data=res.data.data.pageData; let data = res.data.data.pageData;
this.PageList=data; this.PageList = data;
}) })
},
}, },
}
},
}
</script> </script>
<style> <style>
.Choosevideo .material-name { .Choosevideo .material-name {
color: #666666; color: #666666;
font-size: 13px; font-size: 13px;
margin-top: 0px; margin-top: 0px;
...@@ -331,8 +330,9 @@ export default { ...@@ -331,8 +330,9 @@ export default {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
overflow: hidden; overflow: hidden;
} }
.Choosevideo .material-video-info {
.Choosevideo .material-video-info {
background: rgba(0, 0, 0, .35); background: rgba(0, 0, 0, .35);
color: #fff; color: #fff;
position: absolute; position: absolute;
...@@ -340,12 +340,14 @@ export default { ...@@ -340,12 +340,14 @@ export default {
bottom: 31px; bottom: 31px;
padding: 1px 3px; padding: 1px 3px;
font-size: 14px; font-size: 14px;
} }
.Choosevideo .material-upload i {
.Choosevideo .material-upload i {
font-size: 30px; font-size: 30px;
color: #909399; color: #909399;
} }
.Choosevideo .material-item {
.Choosevideo .material-item {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
...@@ -355,30 +357,37 @@ export default { ...@@ -355,30 +357,37 @@ export default {
margin: 7.5px; margin: 7.5px;
text-align: center; text-align: center;
padding: 10px 10px 0; padding: 10px 10px 0;
} }
.Choosevideo .material-upload {
.Choosevideo .material-upload {
box-shadow: none; box-shadow: none;
border: 1px dashed #b2b6bd; border: 1px dashed #b2b6bd;
height: 100px; height: 100px;
width: 100px; width: 100px;
margin: 17.5px; margin: 17.5px;
padding: 0; padding: 0;
} }
.ChooseImg .el-input.is-active .el-input__inner, .ChooseImg .el-input__inner:focus{
.ChooseImg .el-input.is-active .el-input__inner,
.ChooseImg .el-input__inner:focus {
border-color: #DCDFE6; border-color: #DCDFE6;
} }
.ChooseImg .app-attachment-list .selected {
.ChooseImg .app-attachment-list .selected {
box-shadow: 0 0 0 1px #1ed0ff; box-shadow: 0 0 0 1px #1ed0ff;
background: #daf5ff; background: #daf5ff;
border-radius: 5px; border-radius: 5px;
} }
.ChooseImg .selectActive .el-icon-tickets{
.ChooseImg .selectActive .el-icon-tickets {
color: #409EFF; color: #409EFF;
} }
.ChooseImg .selectActive{
.ChooseImg .selectActive {
color: #409EFF; color: #409EFF;
} }
.ChooseImg .app-attachment-name {
.ChooseImg .app-attachment-name {
color: #666666; color: #666666;
margin-top: 5px; margin-top: 5px;
font-size: 13px; font-size: 13px;
...@@ -388,15 +397,18 @@ export default { ...@@ -388,15 +397,18 @@ export default {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
overflow: hidden; overflow: hidden;
} }
.ChooseImg .app-attachment-item .app-attachment-img {
.ChooseImg .app-attachment-item .app-attachment-img {
display: block; display: block;
} }
.ChooseImg .app-attachment-upload i {
.ChooseImg .app-attachment-upload i {
font-size: 30px; font-size: 30px;
color: #909399; color: #909399;
} }
.ChooseImg .app-attachment-item {
.ChooseImg .app-attachment-item {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
...@@ -406,25 +418,31 @@ export default { ...@@ -406,25 +418,31 @@ export default {
margin: 7.5px; margin: 7.5px;
text-align: center; text-align: center;
padding: 10px 10px 0; padding: 10px 10px 0;
} }
.ChooseImg .app-attachment-upload {
.ChooseImg .app-attachment-upload {
box-shadow: none; box-shadow: none;
border: 1px dashed #b2b6bd; border: 1px dashed #b2b6bd;
height: 100px; height: 100px;
width: 100px; width: 100px;
margin: 17.5px; margin: 17.5px;
padding: 0; padding: 0;
} }
.ChooseImg .app-attachment-list{
.ChooseImg .app-attachment-list {
padding: 5px; padding: 5px;
} min-height: 475px;
.ChooseImg .appendInput .el-input__inner{ }
.ChooseImg .appendInput .el-input__inner {
border-right: none; border-right: none;
} }
.ChooseImg .appendInput .el-input-group__append{
background-color: #fff!important; .ChooseImg .appendInput .el-input-group__append {
background-color: #fff !important;
border-left: none; border-left: none;
padding: 0 15px; padding: 0 15px;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment