sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.diy---- 文章选项卡开发

master
sws 2024-09-11 15:24:51 +08:00
parent 8191054ab6
commit 5eca36f886
7 changed files with 91 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
common/css/lib.css
View File

@ -945,6 +945,10 @@
/**
* gap
*/
.gap-4 {
gap: 8rpx;
}
.gap-5 {
gap: 10rpx;
}

30
common/js/common/common.js
View File

@ -8,7 +8,7 @@
* @param obj 要检查的对象。可以是任何类型的对象，包括数组。
* @returns 如果对象为空，则返回true；否则返回false。
*/
export function is_obj_empty(obj) {
export function is_obj_empty (obj) {
return Object.keys(obj).length === 0;
}
/**
@ -22,7 +22,7 @@ export function is_obj_empty(obj) {
* @param obj 未知类型的参数，待检查是否为对象
* @returns 如果参数是对象，则返回 true；否则返回 false
*/
export function is_obj(obj) {
export function is_obj (obj) {
// 特殊处理 null值，因为 typeof null 返回 "object"，但 null 并不是我们要检查的对象
if (obj === null) return false;
// 使用 typeof 排除非对象类型
@ -37,7 +37,7 @@ export function is_obj(obj) {
* @param {string[], string} path
* @returns {string}
*/
export function gradient_computer(new_style, is_return_all = true) {
export function gradient_computer (new_style, is_return_all = true) {
let color_list = new_style.color_list;
let direction = new_style.direction;
return gradient_handle(color_list, direction, is_return_all);
@ -50,7 +50,7 @@ export function gradient_computer(new_style, is_return_all = true) {
* @param is_return_all 是否返回所有样式，包括渐变类型、颜色列表和方向。默认为false，只返回渐变样式。
* @returns 返回一个字符串，包含生成的线性渐变样式。
*/
export function gradient_handle(color_list, direction, is_return_all = true) {
export function gradient_handle (color_list, direction, is_return_all = true) {
let container_common_styles = ``;
if (color_list && color_list.length > 0) {
if (is_return_all) {
@ -93,8 +93,8 @@ export function gradient_handle(color_list, direction, is_return_all = true) {
* @param {string[], string} path
* @returns {string}
*/
export function padding_computer(new_style) {
return `padding: ${new_style.padding_top*2 || 0}rpx ${new_style.padding_right*2 || 0}rpx ${new_style.padding_bottom*2 || 0}rpx ${new_style.padding_left*2 || 0}rpx;`;
export function padding_computer (new_style) {
return `padding: ${new_style.padding_top * 2 || 0}rpx ${new_style.padding_right * 2 || 0}rpx ${new_style.padding_bottom * 2 || 0}rpx ${new_style.padding_left * 2 || 0}rpx;`;
}
/**
* 设置外边距的方法
@ -102,8 +102,8 @@ export function padding_computer(new_style) {
* @param {string[], string} path
* @returns {string}
*/
export function margin_computer(new_style) {
return `margin: ${new_style.margin_top*2 || 0}rpx ${new_style.margin_right*2 || 0}rpx ${new_style.margin_bottom*2 || 0}rpx ${new_style.margin_left*2 || 0}rpx;`;
export function margin_computer (new_style) {
return `margin: ${new_style.margin_top * 2 || 0}rpx ${new_style.margin_right * 2 || 0}rpx ${new_style.margin_bottom * 2 || 0}rpx ${new_style.margin_left * 2 || 0}rpx;`;
}
/**
* 设置圆角的方法
@ -111,8 +111,8 @@ export function margin_computer(new_style) {
* @param {string[], string} path
* @returns {string}
*/
export function radius_computer(new_style) {
return `border-radius: ${new_style.radius_top_left*2 || 0}rpx ${new_style.radius_top_right*2 || 0}rpx ${new_style.radius_bottom_right*2 || 0}rpx ${new_style.radius_bottom_left*2 || 0}rpx;`;
export function radius_computer (new_style) {
return `border-radius: ${new_style.radius_top_left * 2 || 0}rpx ${new_style.radius_top_right * 2 || 0}rpx ${new_style.radius_bottom_right * 2 || 0}rpx ${new_style.radius_bottom_left * 2 || 0}rpx;`;
}
/**
* 设置阴影样式
@ -120,8 +120,8 @@ export function radius_computer(new_style) {
* @param {string[], string} path
* @returns {string}
*/
export function box_shadow_computer(new_style) {
return `box-shadow: ${new_style.box_shadow_x*2 || 0}rpx ${new_style.box_shadow_y*2 || 0}rpx ${new_style.box_shadow_blur*2 || 0}rpx ${new_style.box_shadow_spread*2 || 0}rpx ${new_style.box_shadow_color || 'rgba(0,0,0,0)'};`;
export function box_shadow_computer (new_style) {
return `box-shadow: ${new_style.box_shadow_x * 2 || 0}rpx ${new_style.box_shadow_y * 2 || 0}rpx ${new_style.box_shadow_blur * 2 || 0}rpx ${new_style.box_shadow_spread * 2 || 0}rpx ${new_style.box_shadow_color || 'rgba(0,0,0,0)'};`;
}
/**
* 设置阴影样式
@ -129,7 +129,7 @@ export function box_shadow_computer(new_style) {
* @param {string[], string} path
* @returns {string}
*/
export function background_computer(new_style) {
export function background_computer (new_style) {
if (new_style.background_img.length > 0) {
let url_styke = '';
if (new_style.background_img_style == 1) {
@ -153,14 +153,14 @@ export function background_computer(new_style) {
* @param new_style 组件的新样式对象，包含了需要计算的样式属性。
* @returns 返回一个字符串，包含了计算后的样式定义，可以被直接应用于组件的样式属性。
*/
export function common_styles_computer(new_style) {
export function common_styles_computer (new_style) {
return gradient_computer(new_style) + padding_computer(new_style) + margin_computer(new_style) + radius_computer(new_style) + box_shadow_computer(new_style) + background_computer(new_style) + `overflow:hidden;`;
}
/**
* 生成一个随机数学字符串。
* @returns {string} 一个6位的36进制随机字符串。
*/
export function get_math() {
export function get_math () {
// 通过Math.random()生成随机数，并转换为36进制的字符串
let randomString = Math.random().toString(36);
// 确保随机字符串至少有6位，因为substring(2)可能会使短于6位的字符串产生错误。

5
components/diy/article-list.vue
View File

@ -57,7 +57,7 @@
</template>
<script>
import { common_styles_computer, padding_computer, radius_computer, is_obj_empty } from '@/common/js/common/common.js';
import { common_styles_computer, padding_computer, radius_computer } from '@/common/js/common/common.js';
export default {
props: {
value: {
@ -121,6 +121,7 @@
},
methods: {
init() {
console.log(this.value);
const new_content = this.value.content || {};
const new_style = this.value.style || {};
// 判断是自动还是手动
@ -196,7 +197,7 @@
this.article_carousel_list = [{ carousel_list: cloneList }];
}
}
if (new_style.common_style && this.isCommonStyle) {
if (this.isCommonStyle) {
this.style_container = common_styles_computer(new_style.common_style);
}
},

33
components/diy/article-tabs.vue
View File

@ -1,16 +1,17 @@
<template>
<!-- 文章列表 -->
<view :style="style_container">
<componentDiyModulesTabsView :value="article_tabs"></componentDiyModulesTabsView>
<view class="pt-10">
<componentDiyArticleList :value="article_tabs" :is-common-style="false"></componentDiyArticleList>
<componentDiyModulesTabsView :value="article_tabs" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<view class="padding-top">
<componentDiyArticleList :key="key" :value="article_tabs" :is-common-style="false"></componentDiyArticleList>
</view>
</view>
</template>
<script>
import { common_styles_computer } from '@/common/js/common/common.js';
import { common_styles_computer, get_math } from '@/common/js/common/common.js';
import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
import componentDiyArticleList from '@/components/diy/article-list';
export default {
props: {
value: {
@ -24,15 +25,17 @@
},
components: {
componentDiyModulesTabsView,
componentDiyArticleList,
},
data() {
return {
style_container: '',
style: '',
article_tabs: {},
key: 1,
};
},
mounted() {
created() {
this.init();
},
methods: {
@ -50,8 +53,24 @@
new_data.content.sort_rules = new_data.content.tabs_list[0].sort_rules;
new_data.content.field_show = new_data.content.field_show;
new_data.content.is_cover = new_data.content.tabs_list[0].is_cover;
article_tabs = new_data;
style_container += common_styles_computer(new_style.common_style);
this.article_tabs = new_data;
this.style_container = common_styles_computer(new_style.common_style);
},
tabs_click_event(index) {
let new_data = JSON.parse(JSON.stringify(this.value));
new_data.content.data_type = new_data.content.tabs_list[index].data_type;
new_data.content.category = new_data.content.tabs_list[index].category;
new_data.content.carousel_col = new_data.content.article_carousel_col;
new_data.content.data_list = new_data.content.tabs_list[index].data_list;
new_data.content.data_ids = new_data.content.tabs_list[index].data_ids;
new_data.content.number = new_data.content.tabs_list[index].number;
new_data.content.sort = new_data.content.tabs_list[index].sort;
new_data.content.sort_rules = new_data.content.tabs_list[index].sort_rules;
new_data.content.field_show = new_data.content.field_show;
new_data.content.is_cover = new_data.content.tabs_list[index].is_cover;
this.article_tabs = new_data;
this.key = get_math();
console.log(this.article_tabs);
},
},
};

73
components/diy/modules/tabs-views.vue → components/diy/modules/tabs-view.vue
View File

@ -1,15 +1,13 @@
<template>
<!-- 文章列表 -->
<view class="tabs flex-row oh" :style="`column-gap: ${new_style.tabs_spacing}px;`">
<template v-for="(item, index) in form.tabs_list" :key="index">
<view class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == 0 ? ' active' : '')">
<image :src="item.img[0].url" class="img" mode="scaleToFill" />
<view class="title" :style="title_style(index)">{{ item.title }}</view>
<view class="desc" :style="tabs_theme_index == '1' && index == 0 ? tabs_check : ''">{{ item.desc }}</view>
<iconfont name="icon-checked-1" class="icon" :style="tabs_theme_index == '3' ? icon_tabs_check() : ''"></iconfont>
<view class="bottom_line" :style="tabs_check"></view>
</view>
</template>
<view class="tabs flex-row oh" :style="'column-gap: ' + tabs_spacing + 'px;'">
<view v-for="(item, index) in tabs_list" :key="index" class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == active_index ? ' active' : '')" :data-index="index" @click="handle_event">
<image v-if="item.img" :src="item.img[0].url" class="img" mode="scaleToFill" />
<view class="title" :style="title_style(index)">{{ item.title }}</view>
<view class="desc" :style="tabs_theme_index == '1' && index == active_index ? tabs_check : ''">{{ item.desc }}</view>
<iconfont name="icon-checked-1" class="icon" :style="tabs_theme_index == '3' ? icon_tabs_check : ''"></iconfont>
<view class="bottom_line" :style="tabs_check"></view>
</view>
</view>
</template>
@ -24,13 +22,14 @@
},
data() {
return {
style_container: '',
style: '',
tabs_theme_index: '',
tabs_theme: '',
tabs_check: '',
title_style: '',
// title_style: '',
icon_tabs_check: '',
tabs_spacing: '',
tabs_list: [],
active_index: 0,
};
},
mounted() {
@ -40,6 +39,8 @@
init() {
const new_content = this.value.content || {};
const new_style = this.value.style || {};
this.tabs_spacing = new_style.tabs_spacing;
this.tabs_list = new_content.tabs_list;
// 选项卡主题
this.tabs_theme = this.get_tabs_theme(new_content);
this.tabs_theme_index = new_content.tabs_theme;
@ -87,15 +88,23 @@
}
return style;
},
// 事件
// tabs切换事件
handle_event(e) {
const index = e.currentTarget.dataset.index;
this.active_index = index;
this.$emit('tabs-click', index);
},
},
};
</script>
<style lang="scss" scoped>
.tabs {
max-width: 39rem;
max-width: 780rpx;
overflow: auto;
.item {
padding: 0 0 0.5rem 0;
// margin: 0 1rem;
padding: 0 0 10rpx 0;
position: relative;
&:first-of-type {
margin-left: 0;
@ -104,19 +113,19 @@
margin-right: 0;
}
.title {
font-size: 1.4rem;
font-size: 28rpx;
text-align: center;
}
.desc {
font-size: 1.1rem;
font-size: 22rpx;
color: #999;
text-align: center;
display: none;
}
.bottom_line {
width: 100%;
height: 0.3rem;
border-radius: 1rem;
height: 6rpx;
border-radius: 20rpx;
background-color: red;
position: absolute;
left: 0;
@ -130,14 +139,14 @@
right: 0;
bottom: 0;
text-align: center;
font-size: 2rem;
font-size: 40rpx;
display: none;
}
.img {
width: 3.9rem;
height: 3.9rem;
width: 78rpx;
height: 78rpx;
border-radius: 100%;
border: 0.1rem solid transparent;
border: 2rpx solid transparent;
display: none;
}
&.tabs-style-1 {
@ -155,8 +164,8 @@
}
}
.desc {
border-radius: 2rem;
padding: 0.2rem 0.6rem;
border-radius: 40rpx;
padding: 4rpx 12rpx;
display: inline-block;
}
}
@ -164,14 +173,14 @@
&.active {
.title {
background: #ff2222;
border-radius: 2rem;
padding: 0.2rem 1.2rem;
border-radius: 40rpx;
padding: 4rpx 24rpx;
color: #fff;
}
}
}
&.tabs-style-4 {
padding-bottom: 1.8rem;
padding-bottom: 36rpx;
&.active {
.title {
color: #ff2222;
@ -186,10 +195,10 @@
align-items: center;
&.active {
.title {
font-size: 1.1rem;
font-size: 22rpx;
background: #ff5e5e;
border-radius: 2rem;
padding: 0.2rem 0.7rem;
border-radius: 40rpx;
padding: 4rpx 14rpx;
color: #fff;
}
.img {

1
components/diy/video.vue
View File

@ -41,7 +41,6 @@
get_video_height(data) {
uni.getSystemInfo({
success: (res) => {
console.log(res);
let video_ratio = ``;
const width = res.windowWidth;
if (data == '4:3') {

4
components/iconfont/iconfont.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="dis-inline-block" :class="propClass">
<view class="dis-inline-block" :class="propClass">
<text class="iconfont" :class="name" :style="[{ color: color }, { 'font-size': size }]" @tap="$emit('click', $event)"></text>
</div>
</view>
</template>
<script>