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

1.代码优化

v1.0.0
sws 2024-09-10 14:30:49 +08:00
parent da02b2ec31
commit e09a293aa2
5 changed files with 45 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/components/model-video/video.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.9 KiB

52
src/components/model-user-info/index.vue
View File

@ -6,7 +6,7 @@
<img class="round" src="@/assets/images/components/model-user-info/avatar.png" :width="base_data.user_avatar_size" :height="base_data.user_avatar_size" />
<div class="flex-col gap-8">
<div class="size-16 fw" :style="user_name_style">昵称</div>
<div v-if="id_bool" class="plr-6 ptb-1 radius-sm" :style="user_id_style">ID:88888888</div>
<div v-if="id_bool" class="plr-6 ptb-1 radius-sm" :style="number_code_style">ID:88888888</div>
</div>
</div>
<div class="flex-row align-c" :class="'gap-' + base_data.img_space">
@ -18,7 +18,7 @@
</div>
<div class="flex-row jc-sa align-c">
<template v-for="(item, index) in stats_list" :key="index">
<div v-if="user_info.includes(item.id)" class="tc">
<div v-if="config.includes(item.id)" class="tc">
<div class="size-16 fw mb-6" :style="stats_number_style">{{ item.value }}</div>
<div class="size-12" :style="stats_name_style">{{ item.name }}</div>
</div>
@ -39,21 +39,21 @@ const style = ref('');
const style_container = ref('');
const id_bool = ref(true);
const stats_list = reactive([
{ id: '1', name: '订单总数', value: '100' },
{ id: '2', name: '商品收藏', value: '10' },
{ id: '3', name: '我的足迹', value: '1000' },
{ id: '4', name: '我的积分', value: '10000' },
{ id: 'order_count', name: '订单总数', value: '100' },
{ id: 'goods_favor_count', name: '商品收藏', value: '10' },
{ id: 'goods_browse_count', name: '我的足迹', value: '1000' },
{ id: 'integral_number', name: '我的积分', value: '10000' },
]);
interface icon_params {
id: string;
img: uploadList[];
icon: string;
link: string;
link: pageLinkList;
}
const user_info = ref<string[]>(['1', '2', '3', '4']);
const config = ref<string[]>(['order_count', 'goods_favor_count', 'goods_browse_count', 'integral_number']);
const icon_setting = ref<icon_params[]>([
{ id: '1', img: [], icon: '', link: 'a' },
{ id: '2', img: [], icon: '', link: 'a' },
{ id: '1', img: [], icon: '', link: {} },
{ id: '2', img: [], icon: '', link: {} },
]);
const base_data = reactive({
// 头像大小
@ -65,18 +65,18 @@ const base_data = reactive({
// 用户名字号
user_name_size: 16,
// 用户ID颜色
user_id_color_list: [
number_code_color_list: [
{ color: 'rgba(254, 184, 143, 1)', color_percentage: undefined },
{ color: 'rgba(255, 227, 220, 1)', color_percentage: undefined },
],
// 用户ID颜色
user_id_color: 'rgba(0, 0, 0, 1)',
number_code_color: 'rgba(0, 0, 0, 1)',
// 用户ID方向
user_id_direction: '90deg',
number_code_direction: '90deg',
// 用户ID样式
user_id_weight: '400',
number_code_weight: '400',
// 用户ID字号
user_id_size: 10,
number_code_size: 10,
// 图片大小
img_size: '23',
// 图片间距
@ -96,7 +96,7 @@ const base_data = reactive({
});
// 样式
const user_name_style = ref('');
const user_id_style = ref('');
const number_code_style = ref('');
const stats_name_style = ref('');
const stats_number_style = ref('');
watch(
@ -105,9 +105,9 @@ watch(
const content = newVal?.content;
const new_style = newVal?.style;
if (content) {
user_info.value = content?.user_info;
config.value = content?.config;
icon_setting.value = content?.icon_setting;
id_bool.value = user_info.value ? user_info.value.includes('5') : true;
id_bool.value = config.value ? config.value.includes('5') : true;
}
if (new_style) {
// 头像
@ -117,11 +117,11 @@ watch(
base_data.user_name_weight = new_style.user_name_weight;
base_data.user_name_size = new_style.user_name_size;
// id
base_data.user_id_color_list = new_style.user_id_color_list;
base_data.user_id_color = new_style.user_id_color;
base_data.user_id_direction = new_style.user_id_direction;
base_data.user_id_weight = new_style.user_id_weight;
base_data.user_id_size = new_style.user_id_size;
base_data.number_code_color_list = new_style.number_code_color_list;
base_data.number_code_color = new_style.number_code_color;
base_data.number_code_direction = new_style.number_code_direction;
base_data.number_code_weight = new_style.number_code_weight;
base_data.number_code_size = new_style.number_code_size;
// 图标设置
base_data.img_size = new_style.img_size;
base_data.img_space = new_style.img_space;
@ -139,10 +139,10 @@ watch(
// id样式
const new_gradient_obj = {
color_list: base_data.user_id_color_list,
direction: base_data.user_id_direction,
color_list: base_data.number_code_color_list,
direction: base_data.number_code_direction,
};
user_id_style.value = gradient_computer(new_gradient_obj) + 'color:' + base_data.user_id_color + ';' + 'font-size:' + base_data.user_id_size + 'px;' + 'font-weight:' + base_data.user_id_weight + ';';
number_code_style.value = gradient_computer(new_gradient_obj) + 'color:' + base_data.number_code_color + ';' + 'font-size:' + base_data.number_code_size + 'px;' + 'font-weight:' + base_data.number_code_weight + ';';
// 统计名称样式
stats_name_style.value = 'color:' + base_data.stats_name_color + ';' + 'font-size:' + base_data.stats_name_size + 'px;' + 'font-weight:' + base_data.stats_name_weight + ';';

2
src/components/model-user-info/model-user-info-content.vue
View File

@ -4,7 +4,7 @@
<card-container class="mb-8">
<div class="mb-12">展示设置</div>
<el-form-item label="是否展示">
<el-checkbox-group v-model="form.user_info">
<el-checkbox-group v-model="form.config">
<el-checkbox v-for="(item, index) in base_info_list" :key="index" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>

12
src/components/model-user-info/model-user-info-styles.vue
View File

@ -33,19 +33,19 @@
<el-form-item label="底部背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.user_id_color_list" :type="form.user_id_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<mult-color-picker :value="form.number_code_color_list" :type="form.number_code_direction" @update:value="mult_color_picker_event"></mult-color-picker>
</div>
</el-form-item>
<el-form-item label="id颜色">
<color-picker v-model="form.user_id_color"></color-picker>
<color-picker v-model="form.number_code_color"></color-picker>
</el-form-item>
<el-form-item label="名称样式">
<el-radio-group v-model="form.user_id_weight">
<el-radio-group v-model="form.number_code_weight">
<el-radio v-for="item in font_weight" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="字号">
<slider v-model="form.user_id_size"></slider>
<slider v-model="form.number_code_size"></slider>
</el-form-item>
</card-container>
@ -113,8 +113,8 @@ const font_weight = reactive([
// 默认值
let form = ref(props.value);
const mult_color_picker_event = (arry: string[], type: number) => {
form.value.user_id_color_list = arry;
form.value.user_id_direction = type.toString();
form.value.number_code_color_list = arry;
form.value.number_code_direction = type.toString();
};
const common_styles_update = (val: Object) => {
form.value.common_style = val;

24
src/views/layout/components/main/default/user-info.ts
View File

@ -1,7 +1,7 @@
import defaultCommon from './index';
interface DefaultUserInfo {
content: {
user_info: string[];
config: string[];
icon_setting: { id: string; img: uploadList[]; link: object; icon: string }[];
};
style: {
@ -9,11 +9,11 @@ interface DefaultUserInfo {
user_name_color: string;
user_name_weight: string;
user_name_size: number;
user_id_color_list: color_list[];
user_id_color: string;
user_id_direction: string;
user_id_weight: string;
user_id_size: number;
number_code_color_list: color_list[];
number_code_color: string;
number_code_direction: string;
number_code_weight: string;
number_code_size: number;
img_size: string;
img_space: string;
stats_name_color: string;
@ -27,7 +27,7 @@ interface DefaultUserInfo {
}
const defaultUserInfo: DefaultUserInfo = {
content: {
user_info: ['1', '2', '3', '4', '5'],
config: ['order_count', 'goods_favor_count', 'goods_browse_count', 'integral_number'],
icon_setting: [
{ id: '1', img: [], icon: 'applet-me-settings-acquiesce', link: {} },
{ id: '2', img: [], icon: 'applet-me-message-acquiesce', link: {} },
@ -38,14 +38,14 @@ const defaultUserInfo: DefaultUserInfo = {
user_name_color: 'rgba(0, 0, 0, 1)',
user_name_weight: '500',
user_name_size: 16,
user_id_color_list: [
number_code_color_list: [
{ color: 'rgba(254, 184, 143, 1)', color_percentage: undefined },
{ color: 'rgba(255, 227, 220, 1)', color_percentage: undefined },
],
user_id_color: 'rgba(0, 0, 0, 1)',
user_id_direction: '90deg',
user_id_weight: '400',
user_id_size: 10,
number_code_color: 'rgba(0, 0, 0, 1)',
number_code_direction: '90deg',
number_code_weight: '400',
number_code_size: 10,
img_size: '23',
img_space: '25',
stats_name_color: 'rgba(0, 0, 0, 1)',