1107
This commit is contained in:
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
mode="form"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "添加分组",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "14vh",
|
||||
width: "450px"
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system_uni/uni-id-files/categories/sys/add",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
// 常用字段类型
|
||||
{ key: "name", title: "名称", type: "text" }
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '名称不能为空', trigger: 'change' },
|
||||
{ max: 16, message: '最多16字', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
labelWidth: "60px"
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item } = that.value;
|
||||
that.form1.data = {
|
||||
_id: item._id,
|
||||
name: item.name
|
||||
};
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess() {
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"value.show": {
|
||||
handler(newValue, oldValue) {
|
||||
let that = this;
|
||||
if (newValue) {
|
||||
that.onOpen();
|
||||
} else {
|
||||
that.onClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
:show-fullscreen="false"
|
||||
:show-header="false"
|
||||
:destroy-on-close="true"
|
||||
mode="form"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<image v-if="value.item.type === 'image'" :src="value.item.url" mode="widthFix" style="width: 100%;display: block;"></image>
|
||||
<view v-else-if="value.item.type === 'video' && value.show" :style="styleCom" style="margin: auto;">
|
||||
<video :src="value.item.url" autoplay object-fit="cover" style="width: 100%;height: 100%;display: block;"></video>
|
||||
</view>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "预览",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "2vh",
|
||||
width: "600px"
|
||||
},
|
||||
styleCom:{}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item } = that.value;
|
||||
let { width, height=700, type } = item;
|
||||
//if(type === "video"){
|
||||
let showWidth = width;
|
||||
let showHeight = height;
|
||||
let maxHeight = 700;
|
||||
if(height > maxHeight){
|
||||
showHeight = maxHeight;
|
||||
showWidth = width / height * maxHeight;
|
||||
}
|
||||
that.styleCom = {
|
||||
width : `${showWidth}px`,
|
||||
height : `${showHeight}px`
|
||||
};
|
||||
that.page.width = that.styleCom.width;
|
||||
that.$set(that.value.item,"play",true);
|
||||
//}
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
that.$set(that.value.item,"play",false);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"value.show": {
|
||||
handler(newValue, oldValue) {
|
||||
let that = this;
|
||||
if (newValue) {
|
||||
that.onOpen();
|
||||
} else {
|
||||
that.onClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
mode="form"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "修改分组名称",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "14vh",
|
||||
width: "450px"
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system_uni/uni-id-files/categories/sys/update",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
// 常用字段类型
|
||||
{ key: "name", title: "名称", type: "text" }
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '名称不能为空', trigger: 'change' },
|
||||
{ max: 16, message: '最多16字', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
labelWidth: "60px"
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item } = that.value;
|
||||
that.form1.data = {
|
||||
_id: item._id,
|
||||
name: item.name
|
||||
};
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
// that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess() {
|
||||
// 此代码用处是直接将修改结果显示到页面上，而不需要进行数据库查询。
|
||||
that.value.item.name = that.form1.data.name;
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"value.show": {
|
||||
handler(newValue, oldValue) {
|
||||
let that = this;
|
||||
if (newValue) {
|
||||
that.onOpen();
|
||||
} else {
|
||||
that.onClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
mode="form"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
>
|
||||
<template v-slot:category_id="{ form, keyName }">
|
||||
<vk-data-input-radio
|
||||
width="100%"
|
||||
v-model="form[keyName]"
|
||||
:localdata="value.list"
|
||||
:props="{ value:'_id', label:'name' }"
|
||||
placeholder="请选择分组"
|
||||
border
|
||||
:item-width="300"
|
||||
></vk-data-input-radio>
|
||||
</template>
|
||||
</vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {},
|
||||
list:[]
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "修改分组",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "14vh",
|
||||
width: "450px"
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system_uni/uni-id-files/files/kh/update",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{
|
||||
key:"category_id", title:"分组", type:"select", placeholder:"请选择分组",
|
||||
}
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {},
|
||||
labelWidth: "60px"
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item } = that.value;
|
||||
that.form1.data = {
|
||||
_id: item._id,
|
||||
category_id: item.category_id
|
||||
};
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
// that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess() {
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"value.show": {
|
||||
handler(newValue, oldValue) {
|
||||
let that = this;
|
||||
if (newValue) {
|
||||
that.onOpen();
|
||||
} else {
|
||||
that.onClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
mode="form"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "修改文件名称",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "14vh",
|
||||
width: "450px"
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system_uni/uni-id-files/files/kh/update",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{ key: "display_name", title: "名称", type: "text" },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
display_name: [
|
||||
{ required: true, message: '名称不能为空', trigger: 'change' },
|
||||
{ max: 32, message: '最多32字', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
labelWidth: "60px"
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item } = that.value;
|
||||
that.form1.data = {
|
||||
_id: item._id,
|
||||
display_name: item.display_name
|
||||
};
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
// that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess() {
|
||||
that.value.item.display_name = that.form1.data.display_name;
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"value.show": {
|
||||
handler(newValue, oldValue) {
|
||||
let that = this;
|
||||
if (newValue) {
|
||||
that.onOpen();
|
||||
} else {
|
||||
that.onClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="true"
|
||||
mode="form"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<vk-data-form
|
||||
ref="form1"
|
||||
v-model="form1.data"
|
||||
:form-type="value.mode"
|
||||
:rules="form1.props.rules"
|
||||
:action="form1.props.action"
|
||||
:columns="form1.props.columns"
|
||||
:loading.sync="form1.props.loading"
|
||||
:labelWidth="form1.props.labelWidth"
|
||||
:show-cancel="page.showCancel"
|
||||
:cancel-text="page.cancelText"
|
||||
:submit-text="page.submitText"
|
||||
@success="onFormSuccess"
|
||||
></vk-data-form>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "编辑视频信息",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "14vh",
|
||||
width: "450px"
|
||||
},
|
||||
form1: {
|
||||
// 表单请求数据，此处可以设置默认值
|
||||
data: {},
|
||||
// 表单属性
|
||||
props: {
|
||||
// 表单请求地址
|
||||
action: "admin/system_uni/uni-id-files/files/kh/update",
|
||||
// 表单字段显示规则
|
||||
columns: [
|
||||
{ key: "display_name", title: "名称", type: "text" },
|
||||
{ key: "cover_image", title: "封面图", type: "image", limit:1 },
|
||||
],
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
display_name: [
|
||||
{ required: true, message: '名称不能为空', trigger: 'change' },
|
||||
{ max: 32, message: '最多32字', trigger: 'change' }
|
||||
],
|
||||
},
|
||||
labelWidth: "60px"
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item } = that.value;
|
||||
that.form1.data = {
|
||||
_id: item._id,
|
||||
display_name: item.display_name,
|
||||
cover_image: item.cover_image
|
||||
};
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
// that.$refs.form1.resetForm(); // 关闭时，重置表单
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onFormSuccess() {
|
||||
that.$set(that.value.item,"display_name",that.form1.data.display_name);
|
||||
that.$set(that.value.item,"cover_image",that.form1.data.cover_image);
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"value.show": {
|
||||
handler(newValue, oldValue) {
|
||||
let that = this;
|
||||
if (newValue) {
|
||||
that.onOpen();
|
||||
} else {
|
||||
that.onClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 过滤器
|
||||
filters: {},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<vk-data-dialog
|
||||
v-model="value.show"
|
||||
:title="page.title"
|
||||
:top="page.top"
|
||||
:width="page.width"
|
||||
:close-on-click-modal="false"
|
||||
:show-fullscreen="false"
|
||||
:show-close="false"
|
||||
:destroy-on-close="true"
|
||||
mode="form"
|
||||
>
|
||||
<!-- 页面主体内容开始 -->
|
||||
<view class="body" v-if="total>1">
|
||||
<view>
|
||||
<text>总进度：{{ currentIndex+1 }} / {{ total }}</text>
|
||||
<el-progress :percentage="totalPercentage"></el-progress>
|
||||
</view>
|
||||
<view style="margin-top: 10px;">
|
||||
<text>文件{{currentIndex+1}}进度：</text>
|
||||
<el-progress :percentage="currentPercentage"></el-progress>
|
||||
</view>
|
||||
<view style="margin-top: 10px;text-align: center;">正在上传第 {{currentIndex+1}} 个文件</view>
|
||||
</view>
|
||||
<view class="body" v-else>
|
||||
<view style="text-align: center;">
|
||||
<el-progress :percentage="currentPercentage" type="circle"></el-progress>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 页面主体内容结束 -->
|
||||
</vk-data-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
Type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
show: false,
|
||||
mode: "",
|
||||
item: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
// 组件创建时,进行数据初始化
|
||||
return {
|
||||
page: {
|
||||
title: "上传进度",
|
||||
submitText: "确定",
|
||||
cancelText: "关闭",
|
||||
showCancel: true,
|
||||
top: "40vh",
|
||||
width: "500px"
|
||||
},
|
||||
total:0,
|
||||
totalPercentage: 0, // 总进度
|
||||
currentPercentage: 0, // 当前文件进度
|
||||
currentIndex: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
that = this;
|
||||
that.init();
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init() {
|
||||
let { value } = that;
|
||||
that.$emit("input", value);
|
||||
},
|
||||
// 监听 - 页面打开
|
||||
onOpen() {
|
||||
that = this;
|
||||
let { item={} } = that.value;
|
||||
that.upload(item);
|
||||
},
|
||||
// 监听 - 页面关闭
|
||||
onClose() {
|
||||
|
||||
},
|
||||
async upload(item){
|
||||
let that = this;
|
||||
let { vk } = that;
|
||||
let { tempFilePaths, tempFiles, categoryId, fileType } = item;
|
||||
that.total = tempFilePaths.length;
|
||||
that.totalPercentage = 0;
|
||||
for (let i = 0; i < tempFilePaths.length; i++) {
|
||||
that.currentPercentage = 0;
|
||||
that.currentIndex = i;
|
||||
let percentage = vk.pubfn.toDecimal((i+1) / tempFilePaths.length * 100, 0);
|
||||
try {
|
||||
await vk.uploadFile({
|
||||
filePath: tempFilePaths[i],
|
||||
file: tempFiles[i],
|
||||
needSave: true,
|
||||
fileType,
|
||||
category_id: categoryId,
|
||||
onUploadProgress:(progressRes) => {
|
||||
// 上传过程中
|
||||
that.currentPercentage = progressRes.progress;
|
||||
},
|
||||
});
|
||||
that.totalPercentage = percentage;
|
||||
} catch(err){
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
that.onSuccess();
|
||||
},
|
||||
// 监听 - 提交成功后
|
||||
onSuccess() {
|
||||
that.value.show = false; // 关闭页面
|
||||
that.$emit("success");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"value.show": {
|
||||
handler(newValue, oldValue) {
|
||||
let that = this;
|
||||
if (newValue) {
|
||||
that.onOpen();
|
||||
} else {
|
||||
that.onClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.body{
|
||||
padding: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,704 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<!-- 页面内容开始 -->
|
||||
<view class="header">
|
||||
<view class="header-item" style="margin-left:0;">
|
||||
<el-button type="primary" :round="false" size="small" icon="el-icon-plus upload-btn" @click="uploadFile" > 上传 </el-button>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<el-radio-group v-model="queryForm1.formData.type" size="small" @change="getList">
|
||||
<el-radio-button label="image">图片</el-radio-button>
|
||||
<el-radio-button label="video">视频</el-radio-button>
|
||||
<el-radio-button label="other">其他</el-radio-button>
|
||||
</el-radio-group>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<el-input class="search-input input-border-radius-4004" size="small" type="text" clearable placeholder="请输入名称搜索..." v-model="queryForm1.formData.display_name" @keyup.enter.native="getList" @clear="getList" />
|
||||
<el-button type="primary" :loading="loading.main" :round="false" size="small" icon="el-icon-search" @click.stop="getList" style="border-radius: 0 4px 4px 0;" ></el-button>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<el-input class="search-input input-border-radius-4004" size="small" type="text" clearable placeholder="请输入URL搜索..." v-model="queryForm1.formData.url" @keyup.enter.native="getList" @clear="getList" />
|
||||
<el-button type="primary" :loading="loading.main" :round="false" size="small" icon="el-icon-search" @click.stop="getList" style="border-radius: 0 4px 4px 0;" ></el-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav" v-loading="loading.nav">
|
||||
<view
|
||||
class="nav-list"
|
||||
v-for="(item, index) of data.navList" :key="index"
|
||||
:class="queryForm1.formData.category_id == item._id ? 'selected-nav' : ''"
|
||||
@click.stop="queryByCategory(item._id)"
|
||||
>
|
||||
<text class="nav-name text-one">{{ item.name }}</text>
|
||||
<view class="nav-btn">
|
||||
<view v-if="index > 1" class="btn el-icon-edit" @click.stop="vk.pubfn.openForm('updateCategory', { item })" ></view>
|
||||
<el-popconfirm v-if="index > 1" title="确定删除该分组吗？（组内图片不会删除）" @confirm="deleteCategory(item._id, index)" >
|
||||
<view slot="reference" class="btn el-icon-delete" @click.stop="stop"></view>
|
||||
</el-popconfirm>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="add-group" @click.stop="vk.pubfn.openForm('addCategory')">添加分组</view>
|
||||
</view>
|
||||
<view class="main" v-loading="loading.main">
|
||||
<!-- 内容详情 -->
|
||||
<view
|
||||
class="content-item"
|
||||
:class="[selectedIds.includes(item._id) ? 'choose-image' : '']"
|
||||
v-for="(item, index) in data.content.rows" :key="index"
|
||||
@click.stop="clickFile(item)"
|
||||
>
|
||||
<view class="item-file">
|
||||
<image :src="item.url" mode="aspectFit" v-if="item.type === 'image'"></image>
|
||||
<view class="vk-contents" v-else-if="item.type === 'video'">
|
||||
<image :src="item | coverImageFilter" mode="aspectFit"></image>
|
||||
<view class="duration">{{ item.duration | durationFilter }}</view>
|
||||
<view class="size">{{ item.size | sizeFilter(["B","KB","MB","GB"],1024,1,"MB") }}</view>
|
||||
<vk-data-icon :name="item.play ?'el-icon-video-pause':'el-icon-video-play'" size="40" color="#d9d9d9" class="video-play-btn" @click="preview(item)"></vk-data-icon>
|
||||
</view>
|
||||
|
||||
<view :src="item.url" class="other-icon" v-else>
|
||||
<vk-data-icon name="el-icon-document" size="80" color="#d5d5de"></vk-data-icon>
|
||||
<view class="size">{{ item.size | sizeFilter(["B","KB","MB","GB"],1024,1) }}</view>
|
||||
<view class="suffix">{{ item.original_name | suffixFilter }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips">
|
||||
<text class="title">{{ item.display_name }}</text>
|
||||
<text class="operation" v-if="item.type === 'video'" @click="vk.pubfn.openForm('updateVideo', { item })">编辑</text>
|
||||
<text class="operation" v-else @click="vk.pubfn.openForm('updateFileName', { item })">改名</text>
|
||||
<el-tooltip class="operation" placement="bottom">
|
||||
<text>链接</text>
|
||||
<view slot="content">
|
||||
<view style="text-align: center;">
|
||||
<el-button type="text" @click="copyFileUrl(item.url)" style="margin-left: 0px;"> 复制 </el-button>
|
||||
<el-button type="text" @click="preview(item)" style="margin-left: 30px;"> 预览 </el-button>
|
||||
</view>
|
||||
<view>{{ item.url }}</view>
|
||||
</view>
|
||||
</el-tooltip>
|
||||
<text class="operation" @click="vk.pubfn.openForm('updateFileCategory', { item, list: data.navList })" > 分组 </text>
|
||||
<el-popconfirm class="operation" title="确定删除吗？" @confirm="deleteFile(item._id)">
|
||||
<text slot="reference" @click.stop="stop">删除</text>
|
||||
</el-popconfirm>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 上传的按钮 -->
|
||||
<view class="update-img" @click.stop="uploadFile"></view>
|
||||
</view>
|
||||
<view class="footer" :class="selectedIds.length ? '' : 'no-selected'">
|
||||
<label :style="data.content.rows.length ? '' : 'pointer-events: none;'" class="footer-label" @click.stop="selectAll" >
|
||||
<checkbox style="transform: scale(0.6);" class="checkbox" :checked="selectedIds.length ? true : false" />
|
||||
<text>已选</text>
|
||||
<text class="num">{{ selectedIds.length }} / {{ data.content.rows.length }}</text>
|
||||
<text>项</text>
|
||||
</label>
|
||||
<text class="footer-item" @click.stop=" vk.pubfn.openForm('updateFileCategory', { item: { _id: selectedIds }, list: data.navList }) " >
|
||||
保存到组
|
||||
</text>
|
||||
<el-popconfirm class="footer-item" title="确定删除吗？" @confirm="deleteFile(selectedIds)" >
|
||||
<text slot="reference">删除</text>
|
||||
</el-popconfirm>
|
||||
<!-- 底部分页内容 -->
|
||||
<el-pagination
|
||||
class="paging"
|
||||
background
|
||||
:total="data.content.total"
|
||||
:current-page="queryForm1.pageIndex"
|
||||
:page-size="queryForm1.pageSize"
|
||||
:page-sizes="[30, 50, 100]"
|
||||
:pager-count="5"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change=" val => { queryForm1.pageSize = val; getList(); } "
|
||||
@current-change=" val => { queryForm1.pageIndex = val; getList(); } "
|
||||
></el-pagination>
|
||||
</view>
|
||||
<!-- 页面内容结束 -->
|
||||
|
||||
<!-- 弹窗列表 -->
|
||||
<addCategory v-model="formDatas.addCategory" @success="getNavList"></addCategory>
|
||||
<updateCategory v-model="formDatas.updateCategory"></updateCategory>
|
||||
<updateFileCategory v-model="formDatas.updateFileCategory" @success="getList();selectedIds = [];"></updateFileCategory>
|
||||
<updateFileName v-model="formDatas.updateFileName"></updateFileName>
|
||||
<updateVideo v-model="formDatas.updateVideo"></updateVideo>
|
||||
<preview v-model="formDatas.preview"></preview>
|
||||
<uploadProgress v-model="formDatas.uploadProgress" @success="getList();"></uploadProgress>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var that; // 当前页面对象
|
||||
var vk = uni.vk; // vk实例
|
||||
|
||||
import addCategory from "./form/addCategory";
|
||||
import updateCategory from "./form/updateCategory";
|
||||
import updateFileCategory from "./form/updateFileCategory";
|
||||
import updateFileName from "./form/updateFileName";
|
||||
import updateVideo from "./form/updateVideo";
|
||||
import preview from "./form/preview";
|
||||
import uploadProgress from "./form/uploadProgress";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
addCategory,
|
||||
updateCategory,
|
||||
updateFileCategory,
|
||||
updateFileName,
|
||||
updateVideo,
|
||||
preview,
|
||||
uploadProgress
|
||||
},
|
||||
data() {
|
||||
// 页面数据变量
|
||||
return {
|
||||
// 选中的
|
||||
selectedIds: [],
|
||||
// 页面是否请求中或加载中
|
||||
loading: {
|
||||
nav: false,
|
||||
main: false
|
||||
},
|
||||
// init请求返回的数据
|
||||
data: {
|
||||
// 分组列表
|
||||
navList: [],
|
||||
// 文件数据
|
||||
content: {
|
||||
rows: [],
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
// 查询表单
|
||||
queryForm1: {
|
||||
pageIndex: 1,
|
||||
pageSize: 30,
|
||||
formData: {
|
||||
display_name: "",
|
||||
category_id: "",
|
||||
type: "image"
|
||||
},
|
||||
columns: [
|
||||
{ key: "display_name", title: "名称", type: "text", mode: "%%" },
|
||||
{ key: "url", title: "URL", type: "text", mode: "=" },
|
||||
{ key: "category_id", title: "分类id", type: "text", mode: "=" },
|
||||
{ key: "type", title: "文件类型", type: "text", mode: "=" }
|
||||
]
|
||||
},
|
||||
formDatas: {}
|
||||
// 表单相关开始 -----------------------------------------------------------
|
||||
};
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
that = this;
|
||||
vk = that.vk;
|
||||
that.options = options;
|
||||
that.init(options);
|
||||
},
|
||||
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
||||
onReady() {},
|
||||
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
||||
onShow() {},
|
||||
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
||||
onHide() {},
|
||||
// 函数
|
||||
methods: {
|
||||
// 页面数据初始化函数
|
||||
init(options) {
|
||||
that.getNavList();
|
||||
that.getList();
|
||||
},
|
||||
// 获取文件列表
|
||||
getList() {
|
||||
let { queryForm1, selectedIds } = that;
|
||||
vk.callFunction({
|
||||
url: "admin/system_uni/uni-id-files/files/kh/getList",
|
||||
loading: { that, name: "loading.main" },
|
||||
data: queryForm1,
|
||||
success: function(data) {
|
||||
that.data.content = data;
|
||||
selectedIds.length = 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取分类列表
|
||||
getNavList() {
|
||||
vk.callFunction({
|
||||
url: "admin/system_uni/uni-id-files/categories/kh/getList",
|
||||
loading: { that, name: "loading.nav" },
|
||||
data: {
|
||||
pageIndex: 1,
|
||||
pageSize: 100
|
||||
},
|
||||
success: function(data) {
|
||||
that.data.navList = [
|
||||
{ _id: "", name: "全部" },
|
||||
{ _id: "null", name: "未分组" },
|
||||
...data.rows
|
||||
];
|
||||
}
|
||||
});
|
||||
},
|
||||
// 查询指定分类下的文件列表
|
||||
queryByCategory(category_id) {
|
||||
if (that.queryForm1.formData.category_id != category_id) {
|
||||
that.queryForm1.formData.category_id = category_id;
|
||||
that.getList();
|
||||
}
|
||||
},
|
||||
// 删除分组
|
||||
deleteCategory(_id, index) {
|
||||
vk.callFunction({
|
||||
url: "admin/system_uni/uni-id-files/categories/sys/delete",
|
||||
loading: { that, name: "loading.nav" },
|
||||
data: {
|
||||
_id
|
||||
},
|
||||
success: function(data) {
|
||||
that.data.navList.splice(index, 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
deleteFile(ids) {
|
||||
vk.callFunction({
|
||||
url: "admin/system_uni/uni-id-files/files/kh/delete",
|
||||
title:"请求中...",
|
||||
data: {
|
||||
_id: ids
|
||||
},
|
||||
success: function(data) {
|
||||
if(data.num>0){
|
||||
if (typeof ids !== "object") ids = [ids];
|
||||
ids.map(id => {
|
||||
let index = vk.pubfn.getListIndex(that.data.content.rows, "_id", id);
|
||||
if (index > -1) {
|
||||
that.data.content.rows.splice(index, 1);
|
||||
}
|
||||
});
|
||||
that.selectedIds = [];
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
uploadFile(){
|
||||
let type = that.queryForm1.formData.type;
|
||||
let fileType;
|
||||
let extension = [];
|
||||
if(type === "image"){
|
||||
extension = ["png", "jpg", "jpeg", "gif", "bmp", "svg", "webp", "jfif", "dpg"];
|
||||
fileType = "image";
|
||||
}else if(type === "video"){
|
||||
extension = ["avi", "mp3", "mp4", "3gp", "mov", "rmvb", "rm", "flv", "mkv", "wmv", "m3u8", "mpg", "mpeg", "dat", "asf"];
|
||||
fileType = "video";
|
||||
}else if(type === "other"){
|
||||
extension = ["txt","pdf","xls","xlsx","ppt","pptx","doc","docx","rar","zip"];
|
||||
}
|
||||
uni.chooseFile({
|
||||
extension,
|
||||
success: async res => {
|
||||
let item = {
|
||||
tempFilePaths: res.tempFilePaths,
|
||||
tempFiles: res.tempFiles,
|
||||
categoryId: that.queryForm1.formData.category_id,
|
||||
fileType,
|
||||
};
|
||||
vk.pubfn.openForm('uploadProgress', { item });
|
||||
// vk.showLoading("上传中...");
|
||||
// for (let i = 0; i < res.tempFilePaths.length; i++) {
|
||||
// let percentage = vk.pubfn.toDecimal((i+1) / res.tempFilePaths.length * 100, 0);
|
||||
// try {
|
||||
// await vk.uploadFile({
|
||||
// filePath: res.tempFilePaths[i],
|
||||
// file: res.tempFiles[i],
|
||||
// needSave: true,
|
||||
// fileType,
|
||||
// category_id: that.queryForm1.formData.category_id,
|
||||
// onUploadProgress:function(progressRes){
|
||||
// // 上传过程中
|
||||
// vk.showLoading(`文件${i+1}：${progressRes.progress}%\n`);
|
||||
// },
|
||||
// });
|
||||
// vk.showLoading(`总上传进度：${percentage}%`);
|
||||
// } catch(err){
|
||||
// console.error(err);
|
||||
// }
|
||||
// }
|
||||
// vk.hideLoading();
|
||||
// that.getList();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 复制文件的URL
|
||||
copyFileUrl(data) {
|
||||
uni.setClipboardData({
|
||||
data,
|
||||
success: res => {
|
||||
that.$message({
|
||||
message: "URL已复制",
|
||||
type: "success"
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 预览
|
||||
preview(item){
|
||||
let { type, url } = item;
|
||||
if(type === "image"){
|
||||
vk.pubfn.openForm('preview', { item })
|
||||
}else if(type === "video"){
|
||||
vk.pubfn.openForm('preview', { item })
|
||||
}else{
|
||||
vk.toast("暂不支持该类型文件的预览");
|
||||
}
|
||||
},
|
||||
// 点击了文件
|
||||
clickFile(item) {
|
||||
let index = that.selectedIds.indexOf(item._id);
|
||||
if (index > -1) {
|
||||
that.selectedIds.splice(index, 1);
|
||||
} else {
|
||||
that.selectedIds.push(item._id);
|
||||
}
|
||||
},
|
||||
// 全选
|
||||
selectAll() {
|
||||
if (that.selectedIds.length &&that.data.content.rows.length == that.selectedIds.length) {
|
||||
that.selectedIds = [];
|
||||
} else {
|
||||
that.data.content.rows.forEach((value, index, arr) => {
|
||||
if (!that.selectedIds.includes(value._id)) {
|
||||
that.selectedIds.push(value._id);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
stop() {}
|
||||
},
|
||||
watch: {},
|
||||
// 过滤器
|
||||
filters: {
|
||||
suffixFilter(name=""){
|
||||
let arr = name.split(".");
|
||||
return arr[arr.length-1];
|
||||
},
|
||||
coverImageFilter(item){
|
||||
let src = "";
|
||||
let { cover_image, url, width=600, height=600 } = item;
|
||||
if(cover_image){
|
||||
src = cover_image;
|
||||
}else{
|
||||
src = `${url}?x-oss-process=video/snapshot,t_1000,f_jpg,w_${width},h_${height},m_fast`;
|
||||
}
|
||||
console.log('src: ', src)
|
||||
return src;
|
||||
},
|
||||
durationFilter(value){
|
||||
let result = parseInt(value);
|
||||
let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
|
||||
let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
|
||||
let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
|
||||
return `${h}:${m}:${s}`;
|
||||
}
|
||||
},
|
||||
// 计算属性
|
||||
computed: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page,
|
||||
.page-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
// 页面主体内容区域
|
||||
.page-body {
|
||||
display: grid;
|
||||
grid-template-columns: 180px auto;
|
||||
grid-template-rows: 35px auto 40px;
|
||||
grid-gap: 8px 0px;
|
||||
position: relative;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-column: 1 / -1;
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
.el-button {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
// 搜索
|
||||
.header-item {
|
||||
margin-left: 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
.search-input {
|
||||
width: 200px;
|
||||
|
||||
}
|
||||
.el-button {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav {
|
||||
height: 100%;
|
||||
grid-row: 2 / -1;
|
||||
border: 1px solid #e4e2e2;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(auto-fill, 40px);
|
||||
color: #59607b;
|
||||
font-size: 12px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.nav-list {
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #e4e2e2;
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
background-color: #f6f4f4;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> i {
|
||||
font-size: 13px;
|
||||
place-self: center;
|
||||
}
|
||||
&:hover {
|
||||
color: #108ee9;
|
||||
}
|
||||
.nav-name {
|
||||
flex: 1;
|
||||
}
|
||||
.nav-btn {
|
||||
width: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.btn {
|
||||
width: 22px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选中的分栏
|
||||
.selected-nav {
|
||||
background-color: #ecf6fd !important;
|
||||
color: #108ee9 !important;
|
||||
}
|
||||
// 添加分组的按钮
|
||||
.add-group {
|
||||
width: 60%;
|
||||
margin: 5px auto;
|
||||
padding: 5px 0px;
|
||||
text-align: center;
|
||||
border: 1px dashed #108ee9;
|
||||
color: #108ee9;
|
||||
cursor: pointer;
|
||||
}
|
||||
.add-group:hover {
|
||||
background-color: #108ee9;
|
||||
color: #ffffff;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.add-group:active {
|
||||
background-color: #108ee9;
|
||||
color: #ffffff;
|
||||
}
|
||||
// 内容详情
|
||||
.main {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 135px);
|
||||
grid-template-rows: repeat(auto-fill, 180px);
|
||||
grid-gap: 20px;
|
||||
place-content: start center;
|
||||
overflow-y: auto;
|
||||
min-width: 700px;
|
||||
}
|
||||
.update-img,
|
||||
.content-item {
|
||||
width: 135px;
|
||||
height: 180px;
|
||||
border: 1px solid #e4e2e2;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
transition: all 0.25s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
// 被选中的
|
||||
.choose-image {
|
||||
background-color: #ecf6fd !important;
|
||||
border: 1px solid #daedff;
|
||||
.tips{
|
||||
background-color: #ecf6fd;
|
||||
}
|
||||
}
|
||||
.content-item:hover {
|
||||
background-color: #ecf6fd;
|
||||
border: 1px solid #daedff;
|
||||
}
|
||||
.item-file {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.suffix{
|
||||
position: absolute;
|
||||
top:2px;
|
||||
right: 6px;
|
||||
font-size: 12px;
|
||||
color: #a7a7a7;
|
||||
}
|
||||
.duration{
|
||||
position: absolute;
|
||||
bottom:0px;
|
||||
left: 0px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
background-color: #b2b2b2;
|
||||
padding: 0px 2px;
|
||||
}
|
||||
.size{
|
||||
position: absolute;
|
||||
bottom:0px;
|
||||
right: 0px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
background-color: #b2b2b2;
|
||||
padding: 0px 2px;
|
||||
}
|
||||
.video-play-btn{
|
||||
position: absolute;
|
||||
top:54px;
|
||||
left:47px;
|
||||
background-color: rgba(66,66,66,0.6);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.other-icon{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.content-item:hover > .tips {
|
||||
transform: translateY(0%) !important;
|
||||
}
|
||||
// 上传按钮
|
||||
.update-img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #d5d5de;
|
||||
&::before {
|
||||
line-height: 1;
|
||||
font-size: 45px;
|
||||
content: "+";
|
||||
}
|
||||
&::after {
|
||||
content: "上传";
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
position: absolute;
|
||||
height: 60px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
background-color: #fff;
|
||||
transition: all 0.4s;
|
||||
transform: translateY(50%);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-gap: 5px 0px;
|
||||
font-size: 13px;
|
||||
place-items: center;
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.operation {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:hover {
|
||||
color: #108ee9;
|
||||
}
|
||||
}
|
||||
// 保存到组、删除、下载链接
|
||||
.footer {
|
||||
background-color: #f4faff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #3091f2;
|
||||
}
|
||||
.paging {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.footer-item {
|
||||
padding: 2px 9px;
|
||||
border: 1px solid #3091f2;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.no-selected {
|
||||
.footer-item {
|
||||
pointer-events: none;
|
||||
color: #ced0d5;
|
||||
background-color: #fff;
|
||||
border-color: #ebeef5 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
color: #59607b;
|
||||
.checkbox {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.num {
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
margin: 0 10px;
|
||||
color: #3091f2;
|
||||
}
|
||||
::v-deep .input-border-radius-4004 .el-input__inner{
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user