diff --git a/manager/src/views/page-decoration/wap/config.js b/manager/src/views/page-decoration/wap/config.js index ecc79cd3..ce2c5b13 100644 --- a/manager/src/views/page-decoration/wap/config.js +++ b/manager/src/views/page-decoration/wap/config.js @@ -660,5 +660,45 @@ export const modelData = [ options: { list: [] } + }, + { + type: "video", + name: "视频", + img: "md-image", + notAdd: true, + notImg: true, + notLink: true, + notTitle: true, + options: { + list: [ + { + videoUrl: "", + poster: "", + autoplay: false, + aspectRatio: "16:9", + style: { + bgType: "color", + bgColorStart: "#F5F5F5", + bgColorEnd: "#F5F5F5", + bgGradientDir: "horizontal", + bgRadius: 0, + bottomBgColor: "#F5F5F5", + bgImage: "", + margin: 0, + padding: 0, + borderShow: false, + borderStyle: "solid", + borderWidth: 1, + borderColor: "#e5e5e5", + shadowShow: false, + shadowColor: "rgba(0,0,0,0.1)", + shadowX: 0, + shadowY: 0, + shadowBlur: 10, + shadowSpread: 0, + }, + }, + ], + } } ]; diff --git a/manager/src/views/page-decoration/wap/decorate.scss b/manager/src/views/page-decoration/wap/decorate.scss index b3e4b6ef..24471ea4 100644 --- a/manager/src/views/page-decoration/wap/decorate.scss +++ b/manager/src/views/page-decoration/wap/decorate.scss @@ -51,15 +51,15 @@ width: 100%; display: flex; flex-wrap: wrap; + gap: 14px; >.drawer-item { cursor: pointer; border: 1px solid #ededed; background: #f9f0ff; - width: 170px; - margin-right: 14px; + width: calc(50% - 7px); + box-sizing: border-box; color: #9254de; - margin-bottom: 14px; border-radius: 0.8em; height: 60px; display: flex; diff --git a/manager/src/views/page-decoration/wap/decorate.vue b/manager/src/views/page-decoration/wap/decorate.vue index 55b94f03..6e49123c 100644 --- a/manager/src/views/page-decoration/wap/decorate.vue +++ b/manager/src/views/page-decoration/wap/decorate.vue @@ -107,7 +107,7 @@ v-for="(item, index) in res.options.list" :key="index" > -
+
卡片
+ + +
@@ -531,12 +538,14 @@ import { modelData } from "./config"; import hotzone from "@/components/hotzone"; import ways from "@/components/lili-dialog/wap.js"; import categoryTemplate from "@/components/lili-dialog/template/category"; +import VideoConfig from "./video-config"; export default { components: { ossManage, hotzone, categoryTemplate, CircleClose, + VideoConfig, }, data() { return { @@ -556,6 +565,7 @@ export default { enableSelectCategory: false, //商品是否绑定分类 pendingCategory: null, // 选择分类弹窗草稿 goodsSelectedIndex: 0, //绑定商品分类的索引 + pictureField: "img", //图片选择器回写的字段 }; }, watch: { @@ -800,16 +810,30 @@ export default { callbackSelected(val) { this.picModelFlag = false; if (!val?.url) return; - this.selectedGoods.img = val.url; + if (this.pictureField === "bgImage") { + if (!this.selectedGoods.style) { + this.selectedGoods.style = {}; + } + this.selectedGoods.style.bgImage = val.url; + return; + } + this.selectedGoods[this.pictureField] = val.url; }, // 点击选择图片 - handleClickFile(item, index) { + handleClickFile(item, index, field = "img") { + this.pictureField = field; this.selectedGoods = item; this.picModelFlag = true; this.$nextTick(() => { - if (this.$refs.ossManage) { - this.$refs.ossManage.selectImage = true; + const oss = this.$refs.ossManage; + if (!oss) return; + oss.selectImage = true; + if (field === "videoUrl") { + oss.fileType = "video"; + } else { + oss.fileType = "pic"; } + oss.changeFileType(); }); }, removeNotice(index) { diff --git a/manager/src/views/page-decoration/wap/template/index.js b/manager/src/views/page-decoration/wap/template/index.js index 03d4dc8f..89f29451 100644 --- a/manager/src/views/page-decoration/wap/template/index.js +++ b/manager/src/views/page-decoration/wap/template/index.js @@ -19,6 +19,7 @@ import tpl_group from "./tpl_group"; import tpl_ad_list from "./tpl_view_list"; import tpl_activity_list from './tpl_view_list'; // import tpl_hot_area from './tpl_hot_area'; +import tpl_video from "./tpl_video"; import tpl_goods from "./tpl_goods"; import tpl_notice from "./tpl_notice"; import tpl_promotions from "./tpl_promotions"; @@ -45,6 +46,7 @@ export default { spike: tpl_spike, group: tpl_group, // hotArea: tpl_hot_area, + video: tpl_video, tpl_ad_list, promotions: tpl_promotions, tpl_activity_list, diff --git a/manager/src/views/page-decoration/wap/template/tpl_hot_area.vue b/manager/src/views/page-decoration/wap/template/tpl_hot_area.vue index 7eb2da6a..4f490165 100644 --- a/manager/src/views/page-decoration/wap/template/tpl_hot_area.vue +++ b/manager/src/views/page-decoration/wap/template/tpl_hot_area.vue @@ -2,7 +2,7 @@
- +
@@ -16,10 +16,7 @@ export default { props: ["res"], methods: { changeHotzone(info) { - console.log(info); - console.log(this.res); - this.res.zoneInfo = info; - // this.$emit("change", res); + this.res.list[0].zoneInfo = info; }, }, }; diff --git a/manager/src/views/page-decoration/wap/template/tpl_join_group.vue b/manager/src/views/page-decoration/wap/template/tpl_join_group.vue deleted file mode 100644 index 3b60a09f..00000000 --- a/manager/src/views/page-decoration/wap/template/tpl_join_group.vue +++ /dev/null @@ -1,89 +0,0 @@ - - - \ No newline at end of file diff --git a/manager/src/views/page-decoration/wap/template/tpl_video.vue b/manager/src/views/page-decoration/wap/template/tpl_video.vue new file mode 100644 index 00000000..50800035 --- /dev/null +++ b/manager/src/views/page-decoration/wap/template/tpl_video.vue @@ -0,0 +1,115 @@ + + + diff --git a/manager/src/views/page-decoration/wap/video-config.vue b/manager/src/views/page-decoration/wap/video-config.vue new file mode 100644 index 00000000..106c3f68 --- /dev/null +++ b/manager/src/views/page-decoration/wap/video-config.vue @@ -0,0 +1,392 @@ + + + + + diff --git a/manager/src/views/page-decoration/wap/video-style.js b/manager/src/views/page-decoration/wap/video-style.js new file mode 100644 index 00000000..be295575 --- /dev/null +++ b/manager/src/views/page-decoration/wap/video-style.js @@ -0,0 +1,102 @@ +export const DEFAULT_VIDEO_STYLE = { + bgType: "color", + bgColorStart: "#F5F5F5", + bgColorEnd: "#F5F5F5", + bgGradientDir: "horizontal", + bgRadius: 0, + bottomBgColor: "#F5F5F5", + bgImage: "", + margin: 0, + padding: 0, + borderShow: false, + borderStyle: "solid", + borderWidth: 1, + borderColor: "#e5e5e5", + shadowShow: false, + shadowColor: "rgba(0,0,0,0.1)", + shadowX: 0, + shadowY: 0, + shadowBlur: 10, + shadowSpread: 0, +}; + +export const ASPECT_RATIO_MAP = { + "16:9": 56.25, + "4:3": 75, + "1:1": 100, +}; + +export function ensureVideoItem(item) { + if (!item.aspectRatio) item.aspectRatio = "16:9"; + if (!item.style) { + item.style = { ...DEFAULT_VIDEO_STYLE }; + return; + } + Object.keys(DEFAULT_VIDEO_STYLE).forEach((key) => { + if (item.style[key] === undefined) { + item.style[key] = DEFAULT_VIDEO_STYLE[key]; + } + }); +} + +export function getVideoGradient(style) { + const start = style.bgColorStart || "#F5F5F5"; + const end = style.bgColorEnd || start; + const colors = `${start}, ${end}`; + const dirMap = { + horizontal: `linear-gradient(to right, ${colors})`, + vertical: `linear-gradient(to bottom, ${colors})`, + skewLeft: `linear-gradient(135deg, ${colors})`, + skewRight: `linear-gradient(45deg, ${colors})`, + }; + return dirMap[style.bgGradientDir] || dirMap.horizontal; +} + +export function getVideoWrapperStyle(item) { + ensureVideoItem(item); + const style = item.style; + const wrapper = { + margin: `${style.margin || 0}px`, + padding: `${style.padding || 0}px`, + background: style.bottomBgColor || "#F5F5F5", + boxSizing: "border-box", + }; + return wrapper; +} + +export function getVideoBoxStyle(item) { + ensureVideoItem(item); + const style = item.style; + const box = { + borderRadius: `${style.bgRadius || 0}px`, + overflow: "hidden", + position: "relative", + width: "100%", + }; + + if (style.bgType === "image" && style.bgImage) { + box.backgroundImage = `url(${style.bgImage})`; + box.backgroundSize = "cover"; + box.backgroundPosition = "center"; + } else { + box.background = getVideoGradient(style); + } + + if (style.borderShow) { + box.border = `${style.borderWidth || 1}px ${style.borderStyle || "solid"} ${ + style.borderColor || "#e5e5e5" + }`; + } + + if (style.shadowShow) { + box.boxShadow = `${style.shadowX || 0}px ${style.shadowY || 0}px ${ + style.shadowBlur || 10 + }px ${style.shadowSpread || 0}px ${style.shadowColor || "rgba(0,0,0,0.1)"}`; + } + + return box; +} + +export function getAspectPadding(ratio) { + return ASPECT_RATIO_MAP[ratio] || ASPECT_RATIO_MAP["16:9"]; +} diff --git a/manager/src/views/sys/oss-manage/ossManage.scss b/manager/src/views/sys/oss-manage/ossManage.scss index 03e40f2c..65281b13 100644 --- a/manager/src/views/sys/oss-manage/ossManage.scss +++ b/manager/src/views/sys/oss-manage/ossManage.scss @@ -140,7 +140,7 @@ height: 100%; box-sizing: border-box; border-right: 1px solid #e5e6eb; - padding: 16px 0 24px; + padding: 20px 12px 28px; } .pic-list { height: 100%; @@ -172,11 +172,21 @@ overflow: hidden; box-sizing: border-box; position: relative; - img { + img, + .card-media { width: 100%; height: 100%; object-fit: cover; } + .card-file { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: #f5f7fa; + color: #909399; + } .card-checkbox { position: absolute; top: 8px; diff --git a/manager/src/views/sys/oss-manage/ossManage.vue b/manager/src/views/sys/oss-manage/ossManage.vue index 4a22fb65..d21c36a1 100644 --- a/manager/src/views/sys/oss-manage/ossManage.vue +++ b/manager/src/views/sys/oss-manage/ossManage.vue @@ -2,9 +2,9 @@ @import "./ossManage.scss"; .group-row { - padding-top: 10px; + padding-top: 16px; + margin-top: 8px; border-top: 1px solid #ededed; - margin-top: 10px; display: flex; align-items: center; justify-content: center; @@ -54,28 +54,60 @@ margin-bottom: 16px; } +.oss-group-tree { + padding: 4px 8px 0; + + :deep(.el-tree-node__expand-icon) { + display: none; + } + + :deep(.el-tree-node) { + margin-bottom: 6px; + } + + :deep(.el-tree-node__content) { + padding: 0 10px !important; + height: 42px; + border-radius: 6px; + font-size: 15px; + line-height: 42px; + } + + :deep(.el-tree-node__content:hover) { + background: #f5f7fa; + } + + :deep(.el-tree-node.is-current > .el-tree-node__content) { + background: #ecf5ff; + color: #409eff; + font-weight: 500; + } +} + .oss-tree-node { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; - padding-right: 8px; + padding-right: 4px; + font-size: 15px; } .oss-tree-more { cursor: pointer; color: #909399; padding: 0 4px; + font-size: 16px; } -.oss-manage-date-popper { - z-index: 4000 !important; +.category-tabs-card { + margin-bottom: 0; }