b1882f1f11
Strip CRMEB/crmeb from user-visible copy on auth, kefu, supplier login, setting guides, storage docs, mobile page mocks, and system maintain file editor. Replace external crmeb.com URLs with syj.fsgx.cn (sms console iframe and license-protected file headers/comments left untouched). Default brand_name on wechat membership card switches to "芍药居". Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
796 lines
18 KiB
Vue
796 lines
18 KiB
Vue
<template>
|
||
<div
|
||
class="community"
|
||
:style="{
|
||
background: bottomBgColor,
|
||
marginTop: mTop + 'px',
|
||
paddingTop: topConfig + 'px',
|
||
paddingBottom: bottomConfig + 'px',
|
||
paddingLeft: prConfig + 'px',
|
||
paddingRight: prConfig + 'px',
|
||
}"
|
||
>
|
||
<div
|
||
class="nav acea-row row-between-wrapper"
|
||
:style="{
|
||
background: `linear-gradient(90deg,${headerBgColorLeft} 0%,${headerBgColorRight} 100%)`,
|
||
borderRadius: bgRadius,
|
||
}"
|
||
>
|
||
<div
|
||
class="title"
|
||
v-if="titleConfig"
|
||
:style="
|
||
(titleTabVal == 2 ? 'fontStyle:' : 'fontWeight:') +
|
||
titleText +
|
||
';color:' +
|
||
titleColor +
|
||
';fontSize:' +
|
||
titleNumber +
|
||
'px;'
|
||
"
|
||
>
|
||
{{ titleTxtConfig }}
|
||
</div>
|
||
<img v-else :src="imgUrl" alt="" />
|
||
<div
|
||
class="more"
|
||
:style="{
|
||
color: headerBntColor,
|
||
fontSize: bntNumber + 'px',
|
||
}"
|
||
>
|
||
{{ rightBntConfig
|
||
}}<span
|
||
class="iconfont iconjinru"
|
||
:style="{
|
||
fontSize: bntNumber + 'px',
|
||
}"
|
||
></span>
|
||
</div>
|
||
<img class="clover" src="@/assets/images/clover.png" />
|
||
</div>
|
||
<div
|
||
v-if="!styleConfig"
|
||
class="list on acea-row row-middle"
|
||
:style="{
|
||
background: bgColor,
|
||
borderRadius: bgRadius2,
|
||
}"
|
||
>
|
||
<div
|
||
class="item"
|
||
:style="{
|
||
marginRight: videoSpace2 + 'px',
|
||
}"
|
||
v-for="(item, index) in videoList"
|
||
:key="index"
|
||
>
|
||
<div class="pictrue">
|
||
<img
|
||
:style="{
|
||
borderRadius: imgRadius,
|
||
}"
|
||
v-if="item.image"
|
||
:src="item.image"
|
||
/>
|
||
<div
|
||
v-else
|
||
class="empty-box"
|
||
:style="{
|
||
borderRadius: imgRadius,
|
||
}"
|
||
>
|
||
<img src="../../assets/images/shan.png" />
|
||
</div>
|
||
<div class="mask" :style="{ borderRadius: imgRadius }"></div>
|
||
<div class="bottom">
|
||
<div class="title line1">{{ item.desc }}</div>
|
||
<div class="acea-row row-middle mt5">
|
||
<div class="user">
|
||
<img src="@/assets/images/f.png" />
|
||
</div>
|
||
<div class="name line1">{{ item.type_name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-else
|
||
class="list acea-row row-between"
|
||
:style="{
|
||
background: bgColor,
|
||
borderRadius: bgRadius2,
|
||
}"
|
||
>
|
||
<div
|
||
class="item"
|
||
:style="{
|
||
marginBottom: videoSpace + 'px',
|
||
}"
|
||
v-for="(item, index) in videoList"
|
||
:key="index"
|
||
>
|
||
<div class="pictrue">
|
||
<img
|
||
:style="{
|
||
borderRadius: imgRadius,
|
||
}"
|
||
v-if="item.image"
|
||
:src="item.image"
|
||
/>
|
||
<div
|
||
v-else
|
||
class="empty-box"
|
||
:style="{
|
||
borderRadius: imgRadius,
|
||
}"
|
||
>
|
||
<img src="../../assets/images/shan.png" />
|
||
</div>
|
||
</div>
|
||
<div class="info">
|
||
<div class="title">{{ item.desc }}</div>
|
||
<div class="txtPic acea-row row-between-wrapper">
|
||
<div class="acea-row row-middle">
|
||
<div class="user">
|
||
<img src="@/assets/images/f.png" />
|
||
</div>
|
||
<div class="name line1">{{ item.type_name }}</div>
|
||
</div>
|
||
<div class="num">
|
||
<span
|
||
class="iconfont iconic_Like"
|
||
:style="{
|
||
color: toneConfig
|
||
? `${likeSuccessColor}`
|
||
: `${colorStyle.theme}`,
|
||
}"
|
||
></span
|
||
>212
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState, mapMutations } from "vuex";
|
||
import { videoList } from "@/api/marketing";
|
||
|
||
export default {
|
||
name: "home_community",
|
||
cname: "种草社区",
|
||
configName: "c_community",
|
||
icon: "#iconzujian-zhongcaoshequ",
|
||
type: 1, // 0 基础组件 1 营销组件 2工具组件
|
||
defaultName: "community", // 外面匹配名称
|
||
props: {
|
||
index: {
|
||
type: null,
|
||
},
|
||
num: {
|
||
type: null,
|
||
},
|
||
colorStyle: {
|
||
type: null,
|
||
},
|
||
},
|
||
computed: {
|
||
...mapState("admin/mobildConfig", ["defaultArray"]),
|
||
},
|
||
watch: {
|
||
pageData: {
|
||
handler(nVal, oVal) {
|
||
this.setConfig(nVal, 1);
|
||
},
|
||
deep: true,
|
||
},
|
||
num: {
|
||
handler(nVal, oVal) {
|
||
let data = this.$store.state.admin.mobildConfig.defaultArray[nVal];
|
||
this.setConfig(data);
|
||
},
|
||
deep: true,
|
||
},
|
||
defaultArray: {
|
||
handler(nVal, oVal) {
|
||
let data = this.$store.state.admin.mobildConfig.defaultArray[this.num];
|
||
this.setConfig(data, 1);
|
||
},
|
||
deep: true,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
// 默认初始化数据禁止修改
|
||
defaultConfig: {
|
||
cname: "种草社区",
|
||
name: "community",
|
||
timestamp: this.num,
|
||
isHide: false,
|
||
setUp: {
|
||
tabVal: 0,
|
||
},
|
||
titleLeft: "内容设置",
|
||
titleHead: "头部设置",
|
||
titleContent: "内容展示",
|
||
titleRight: "头部样式",
|
||
titleVideoStyle: "内容样式",
|
||
titleCurrency: "通用样式",
|
||
styleConfig: {
|
||
title: "选择风格",
|
||
tabVal: 0,
|
||
tabList: [
|
||
{
|
||
name: "左右滑动展示",
|
||
},
|
||
{
|
||
name: "两列展示（纵向）",
|
||
},
|
||
],
|
||
},
|
||
titleConfig: {
|
||
title: "标题类型",
|
||
tabVal: 0,
|
||
tabList: [
|
||
{
|
||
name: "图片",
|
||
},
|
||
{
|
||
name: "文字",
|
||
},
|
||
],
|
||
},
|
||
imgConfig: {
|
||
info: "建议：128px * 32px",
|
||
url: require("@/assets/images/community.png"),
|
||
type: "code",
|
||
delType: 0,
|
||
name: "上传图片",
|
||
},
|
||
titleTxtConfig: {
|
||
title: "标题文字",
|
||
value: "种草社区",
|
||
place: "请输入标题文字",
|
||
max: 6,
|
||
},
|
||
rightBntConfig: {
|
||
title: "右侧文字",
|
||
value: "好物分享",
|
||
place: "请输入右侧文字",
|
||
max: 6,
|
||
},
|
||
numberConfig: {
|
||
title: "内容数量",
|
||
val: 3,
|
||
min: 1,
|
||
},
|
||
selectConfig: {
|
||
title: "内容话题",
|
||
activeValue: "",
|
||
list: [
|
||
{
|
||
activeValue: "",
|
||
title: "",
|
||
},
|
||
{
|
||
activeValue: "",
|
||
title: "",
|
||
},
|
||
],
|
||
},
|
||
headerBgColor: {
|
||
title: "背景颜色",
|
||
name: "headerBgColor",
|
||
default: [
|
||
{
|
||
item: "#E93323",
|
||
},
|
||
{
|
||
item: "#FF7931",
|
||
},
|
||
],
|
||
color: [
|
||
{
|
||
item: "#E93323",
|
||
},
|
||
{
|
||
item: "#FF7931",
|
||
},
|
||
],
|
||
},
|
||
titleText: {
|
||
title: "标题文字",
|
||
tabVal: 0,
|
||
tabList: [
|
||
{
|
||
name: "加粗",
|
||
style: "bold",
|
||
},
|
||
{
|
||
name: "正常",
|
||
style: "normal",
|
||
},
|
||
{
|
||
name: "倾斜",
|
||
style: "italic",
|
||
},
|
||
],
|
||
},
|
||
titleColor: {
|
||
title: "标题颜色",
|
||
name: "titleColor",
|
||
default: [
|
||
{
|
||
item: "#fff",
|
||
},
|
||
],
|
||
color: [
|
||
{
|
||
item: "#fff",
|
||
},
|
||
],
|
||
},
|
||
titleNumber: {
|
||
title: "标题字号",
|
||
val: 16,
|
||
min: 0,
|
||
},
|
||
headerBntColor: {
|
||
title: "按钮文字",
|
||
name: "headerBntColor",
|
||
default: [
|
||
{
|
||
item: "#fff",
|
||
},
|
||
],
|
||
color: [
|
||
{
|
||
item: "#fff",
|
||
},
|
||
],
|
||
},
|
||
bntNumber: {
|
||
title: "按钮大小",
|
||
val: 12,
|
||
min: 0,
|
||
},
|
||
videoSpace: {
|
||
title: "内容间距",
|
||
val: 20,
|
||
min: 0,
|
||
},
|
||
videoSpace2: {
|
||
title: "内容间距",
|
||
val: 10,
|
||
min: 0,
|
||
},
|
||
filletImg: {
|
||
title: "内容圆角",
|
||
type: 0,
|
||
list: [
|
||
{
|
||
val: "全部",
|
||
icon: "iconcaozuo-zhengti",
|
||
},
|
||
{
|
||
val: "单个",
|
||
icon: "iconcaozuo-bianjiao",
|
||
},
|
||
],
|
||
valName: "圆角值",
|
||
val: 8,
|
||
min: 0,
|
||
valList: [{ val: 0 }, { val: 0 }, { val: 0 }, { val: 0 }],
|
||
},
|
||
toneConfig: {
|
||
title: "色调",
|
||
tabVal: 0,
|
||
tabList: [
|
||
{
|
||
name: "跟随主题风格",
|
||
},
|
||
{
|
||
name: "自定义",
|
||
},
|
||
],
|
||
},
|
||
likeSuccessColor: {
|
||
title: "点赞成功",
|
||
default: [
|
||
{
|
||
item: "#E93323",
|
||
},
|
||
],
|
||
color: [
|
||
{
|
||
item: "#E93323",
|
||
},
|
||
],
|
||
},
|
||
moduleColor: {
|
||
title: "组件背景",
|
||
default: [
|
||
{
|
||
item: "#fff",
|
||
},
|
||
{
|
||
item: "#fff",
|
||
},
|
||
],
|
||
color: [
|
||
{
|
||
item: "#fff",
|
||
},
|
||
{
|
||
item: "#fff",
|
||
},
|
||
],
|
||
},
|
||
bottomBgColor: {
|
||
title: "底部背景",
|
||
default: [
|
||
{
|
||
item: "#f5f5f5",
|
||
},
|
||
],
|
||
color: [
|
||
{
|
||
item: "#f5f5f5",
|
||
},
|
||
],
|
||
},
|
||
topConfig: {
|
||
title: "上边距",
|
||
val: 0,
|
||
min: 0,
|
||
},
|
||
bottomConfig: {
|
||
title: "下边距",
|
||
val: 0,
|
||
min: 0,
|
||
},
|
||
prConfig: {
|
||
title: "左右边距",
|
||
val: 10,
|
||
min: 0,
|
||
},
|
||
mbConfig: {
|
||
title: "页面上间距",
|
||
val: 0,
|
||
min: 0,
|
||
},
|
||
fillet: {
|
||
title: "背景圆角",
|
||
type: 0,
|
||
list: [
|
||
{
|
||
val: "全部",
|
||
icon: "iconcaozuo-zhengti",
|
||
},
|
||
{
|
||
val: "单个",
|
||
icon: "iconcaozuo-bianjiao",
|
||
},
|
||
],
|
||
valName: "圆角值",
|
||
val: 8,
|
||
min: 0,
|
||
valList: [{ val: 0 }, { val: 0 }, { val: 0 }, { val: 0 }],
|
||
},
|
||
},
|
||
pageData: {},
|
||
videoList: [],
|
||
numberConfig: 0,
|
||
headerBgColorLeft: "",
|
||
headerBgColorRight: "",
|
||
styleConfig: 0,
|
||
titleConfig: 0,
|
||
imgUrl: "",
|
||
headerBntColor: "",
|
||
rightBntConfig: "",
|
||
titleTxtConfig: "",
|
||
numberConfig: 0,
|
||
titleText: 0,
|
||
titleColor: "",
|
||
titleNumber: 0,
|
||
videoSpace: 0,
|
||
videoSpace2: 0,
|
||
imgRadius: 0,
|
||
bgColor: "",
|
||
bgRadius: 0,
|
||
bgRadius2: 0,
|
||
bottomBgColor: "",
|
||
mTop: 0,
|
||
topConfig: 0,
|
||
bottomConfig: 0,
|
||
prConfig: 0,
|
||
bntNumber: 0,
|
||
toneConfig: 0,
|
||
likeSuccessColor: "",
|
||
};
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.pageData =
|
||
this.$store.state.admin.mobildConfig.defaultArray[this.num];
|
||
this.setConfig(this.pageData);
|
||
});
|
||
},
|
||
methods: {
|
||
getVideoList(limit) {
|
||
this.videoList = [
|
||
{
|
||
image: require("@/assets/images/shequ_1.png"),
|
||
like_num: 120,
|
||
type_image: require("@/assets/images/yonghu.png"),
|
||
type_name: "浅笑回眸",
|
||
desc: "啊啊啊啊啊啊啊！！就这条吊带裙绝了！",
|
||
product_num: 3,
|
||
},
|
||
{
|
||
image: require("@/assets/images/shequ_2.png"),
|
||
like_num: 120,
|
||
type_image: require("@/assets/images/yonghu.png"),
|
||
type_name: "国宝小熊猫",
|
||
desc: "像我这种梨形身材又不想露腿的 就喜欢这种裙摆...",
|
||
product_num: 3,
|
||
},
|
||
{
|
||
image: require("@/assets/images/shequ_4.png"),
|
||
like_num: 120,
|
||
type_image: require("@/assets/images/yonghu.png"),
|
||
type_name: "阿秋",
|
||
desc: "观看视频更多好礼等你来抢，每天都有哟～ 更多好礼请联…",
|
||
product_num: 3,
|
||
},
|
||
];
|
||
},
|
||
setConfig(data, num) {
|
||
if (!data) return;
|
||
if (data.mbConfig) {
|
||
this.headerBgColorLeft = data.headerBgColor.color[0].item;
|
||
this.headerBgColorRight = data.headerBgColor.color[1].item;
|
||
this.styleConfig = data.styleConfig.tabVal;
|
||
this.titleConfig = data.titleConfig.tabVal;
|
||
this.imgUrl = data.imgConfig.url;
|
||
this.headerBntColor = data.headerBntColor.color[0].item;
|
||
this.rightBntConfig = data.rightBntConfig.value;
|
||
this.titleTxtConfig = data.titleTxtConfig.value;
|
||
this.numberConfig = data.numberConfig.val;
|
||
this.bntNumber = data.bntNumber.val;
|
||
let tabVal = data.titleText.tabVal;
|
||
this.titleTabVal = tabVal;
|
||
this.titleText = data.titleText.tabList[tabVal].style;
|
||
this.titleColor = data.titleColor.color[0].item;
|
||
this.titleNumber = data.titleNumber.val;
|
||
this.videoSpace = data.videoSpace.val;
|
||
this.videoSpace2 = data.videoSpace2.val;
|
||
this.toneConfig = data.toneConfig.tabVal;
|
||
this.likeSuccessColor = data.likeSuccessColor.color[0].item;
|
||
let filletImg = data.filletImg.type;
|
||
let filletValImg = data.filletImg.val;
|
||
let valListImg = data.filletImg.valList;
|
||
this.imgRadius = filletImg
|
||
? valListImg[0].val +
|
||
"px " +
|
||
valListImg[1].val +
|
||
"px " +
|
||
valListImg[3].val +
|
||
"px " +
|
||
valListImg[2].val +
|
||
"px"
|
||
: filletValImg + "px";
|
||
let bgColorLeft = data.moduleColor.color[0].item;
|
||
let bgColorRight = data.moduleColor.color[1].item;
|
||
this.bgColor = `linear-gradient(90deg,${bgColorLeft} 0%,${bgColorRight} 100%)`;
|
||
let fillet = data.fillet.type;
|
||
let filletVal = data.fillet.val;
|
||
let valList = data.fillet.valList;
|
||
this.bgRadius = fillet
|
||
? valList[0].val + "px " + valList[1].val + "px 0 0"
|
||
: filletVal + "px " + filletVal + "px 0 0";
|
||
this.bgRadius2 = fillet
|
||
? "0 0 " + valList[3].val + "px " + valList[2].val + "px"
|
||
: "0 0 " + filletVal + "px " + filletVal + "px";
|
||
this.bottomBgColor = data.bottomBgColor.color[0].item;
|
||
this.mTop = data.mbConfig.val;
|
||
this.topConfig = data.topConfig.val;
|
||
this.bottomConfig = data.bottomConfig.val;
|
||
this.prConfig = data.prConfig.val;
|
||
if (num) {
|
||
this.getVideoList(this.numberConfig);
|
||
}
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.community {
|
||
.nav {
|
||
width: 100%;
|
||
height: 48px;
|
||
padding: 0 12px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
img {
|
||
width: 64px;
|
||
height: 16px;
|
||
display: block;
|
||
}
|
||
|
||
.clover {
|
||
width: 52px;
|
||
height: 54px;
|
||
display: block;
|
||
position: absolute;
|
||
top: 9px;
|
||
right: 91px;
|
||
}
|
||
|
||
.title {
|
||
color: #333333;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.more {
|
||
font-weight: 400;
|
||
color: #999999;
|
||
font-size: 12px;
|
||
|
||
.iconfont {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list {
|
||
padding: 12px 10px;
|
||
|
||
&.on {
|
||
flex-wrap: nowrap;
|
||
overflow: hidden;
|
||
|
||
.item {
|
||
width: 140px;
|
||
margin-right: 10px;
|
||
margin-bottom: 0;
|
||
|
||
.pictrue {
|
||
width: 140px;
|
||
height: 175px;
|
||
border-radius: 8px;
|
||
|
||
.bottom {
|
||
color: #fff;
|
||
font-weight: 400;
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
padding: 6px 8px;
|
||
z-index: 10;
|
||
|
||
.title {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.name {
|
||
font-size: 9px;
|
||
width: 100px;
|
||
}
|
||
|
||
.user {
|
||
width: 17px;
|
||
height: 17px;
|
||
border-radius: 50%;
|
||
margin-right: 4px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mask {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 10;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(0, 0, 0, 0) 0%,
|
||
rgba(0, 0, 0, 0.4) 100%
|
||
);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.item {
|
||
width: 48%;
|
||
margin-bottom: 20px;
|
||
|
||
&:nth-last-child(1) {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.pictrue {
|
||
width: 100%;
|
||
height: 241px;
|
||
position: relative;
|
||
margin-right: unset;
|
||
margin-bottom: unset;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
// object-fit: cover;
|
||
}
|
||
|
||
.empty-box {
|
||
background-color: #f3f9ff;
|
||
|
||
img {
|
||
width: 65px;
|
||
height: 50px;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info {
|
||
font-weight: 400;
|
||
width: 100%;
|
||
|
||
.title {
|
||
font-size: 13px;
|
||
color: #333333;
|
||
}
|
||
|
||
.num {
|
||
font-size: 10px;
|
||
color: #999999;
|
||
|
||
.iconfont {
|
||
margin-right: 5px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.txtPic {
|
||
margin-top: 11px;
|
||
|
||
.user {
|
||
width: 16px;
|
||
height: 16px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
font-size: 10px;
|
||
color: #999999;
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|