-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ data.name }}
-
-
-
-
-
-
-
-
-
-
-
-
-
- 上传{{ upload_type_name }}
- 删除{{ upload_type_name }}
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+ {{ data.name }}
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
@@ -146,8 +171,8 @@
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ item.original }}
-
-
-
+
+
+
+
+ 上传{{ upload_type_name }}
+ 删除{{ upload_type_name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.original }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+ {{ item.name }}
+
-
-
-
-
-
-
-
-
-
-
-
+ , default: [] });
+const model_value_upload = defineModel({ type: Array as PropType, default: [] });
const view_list_value = ref([]);
// 弹窗显示
@@ -266,16 +305,25 @@ watch(
const upload_model_visible = ref(false);
// 上传类型
const upload_type = ref(props.type);
+const const_upload_type = props.type;
const upload_size = computed(() => {
const size = props.size.toString();
return size.includes('%') ? size : size + 'px';
});
// 上传类型转换成name
const upload_type_name = computed(() => {
- return upload_type.value === 'img' ? '图片' : upload_type.value === 'video' ? '视频' : '文件';
+ switch (upload_type.value) {
+ case 'video':
+ return '视频';
+ case 'file':
+ return '文件';
+ default:
+ return '图片';
+ }
});
// 切换图片/视频/文件
const upload_type_change = (type: any) => {
+ if (type == 'icon') return false;
view_list_value.value = [];
get_attachment_list();
};
@@ -537,27 +585,47 @@ const transform_category_event = () => {
};
//#endregion 附件 ----------------------------------------------------------end
+
+//#region 图标 -------------------------------------------------------------start
+const icon_value = defineModel('iconValue', { type: String, default: '' });
+const temp_icon_value = ref('');
+const search_icon = ref('');
+const icon_list = computed(() => searchIcons.glyphs.filter((item) => item.name.includes(search_icon.value)));
+const icon_index = ref(0);
+const handle_select_icon = (item: any, index: number) => {
+ icon_index.value = index;
+ temp_icon_value.value = item.font_class;
+};
+const del_icon_event = () => {
+ icon_value.value = '';
+};
+//#endregion 图标 ----------------------------------------------------------end
+const emit = defineEmits(['update:icon']);
// 确认
const confirm_event = () => {
dialog_visible.value = false;
if (props.limit == 1) {
- modelValue.value = view_list_value.value;
+ model_value_upload.value = view_list_value.value;
} else {
if (is_replace.value) {
// 替换modelValue的replace下标下的文件
- modelValue.value.splice(replace_index.value, 1, view_list_value.value[0]);
+ model_value_upload.value.splice(replace_index.value, 1, view_list_value.value[0]);
} else {
- if (props.limit >= view_list_value.value.length + modelValue.value.length) {
+ if (props.limit >= view_list_value.value.length + model_value_upload.value.length) {
// 数组合并
- modelValue.value = modelValue.value.concat(view_list_value.value);
- // view_list_value.value.forEach((item: uploadList) => {
- // modelValue.value.push(item);
- // });
+ model_value_upload.value = model_value_upload.value.concat(view_list_value.value);
} else {
app?.appContext.config.globalProperties.$common.alert(`最多上传 ${props.limit} 个文件!`, 'warning');
}
}
}
+ if (view_list_value.value.length > 0) {
+ icon_value.value = '';
+ temp_icon_value.value = '';
+ icon_index.value = 0;
+ } else {
+ icon_value.value = JSON.parse(JSON.stringify(temp_icon_value.value));
+ }
view_list_value.value = [];
search_filter.value = '';
is_replace.value = false;
@@ -575,9 +643,9 @@ const replace_file_event = (index: number) => {
};
// 上传回显删除事件
const del_upload_event = (index: number) => {
- const new_model_val = JSON.parse(JSON.stringify(modelValue.value));
+ const new_model_val = JSON.parse(JSON.stringify(model_value_upload.value));
new_model_val.splice(index, 1);
- modelValue.value = new_model_val;
+ model_value_upload.value = new_model_val;
};
const handle_error = (index: number) => {
// 当视频加载失败时触发
@@ -594,15 +662,15 @@ const close_upload_model = (data: any) => {
url: data.web_image,
};
if (props.limit == 1) {
- modelValue.value = [new_web_file];
+ model_value_upload.value = [new_web_file];
} else {
if (is_replace.value) {
// 替换modelValue的replace下标下的文件
- modelValue.value.splice(replace_index.value, 1, new_web_file);
+ model_value_upload.value.splice(replace_index.value, 1, new_web_file);
} else {
- if (props.limit >= view_list_value.value.length + modelValue.value.length) {
+ if (props.limit >= view_list_value.value.length + model_value_upload.value.length) {
// 数组合并
- modelValue.value.push(new_web_file);
+ model_value_upload.value.push(new_web_file);
} else {
app?.appContext.config.globalProperties.$common.alert(`最多上传 ${props.limit} 个文件!`, 'warning');
}
diff --git a/src/components/common/upload/upload-icon.vue b/src/components/common/upload/upload-icon.vue
new file mode 100644
index 00000000..c0d63914
--- /dev/null
+++ b/src/components/common/upload/upload-icon.vue
@@ -0,0 +1,36 @@
+
+
+
@@ -191,11 +224,13 @@
import { ext_img_name_list, ext_video_name_list, ext_file_name_list, ext_file_name_list_map } from './index';
import UploadAPI, { Tree } from '@/api/upload';
import { uploadStore } from '@/store';
+import { isEmpty } from 'lodash';
+import searchIcons from '@/assets/search-icons/iconfont.json';
const upload_store = uploadStore();
const app = getCurrentInstance();
/**
* @description: 图片上传
- * @param modelValue{uploadList[]} 默认值
+ * @param model_value_upload{uploadList[]} 默认值
* @param visibleDialog{Boolean} 弹窗开启关闭
* @param type{String} 上传类型 默认图片 1.图片(img) 2.视频(video) 3.文件(file)
* @param isCustomDialog{Boolean} 是否自定义弹窗, 配置true后将不会显示上传按钮改为传v-model:visible-dialog=""来开启关闭弹窗，通过@update:v-model=""来获取最新数据
@@ -205,7 +240,7 @@ const app = getCurrentInstance();
* @param tipsText{String} 提示文字
* @param size{Number|String} 上传图片大小
* @param style{Number} 样式 0.默认样式 1.自定义样式1 2.自定义样式2
- * @return {*} update:modelValue
+ * @return {*} update:model_value_upload
*/
const props = defineProps({
type: {
@@ -240,9 +275,13 @@ const props = defineProps({
type: [Number, String],
default: 0,
},
+ isIcon: {
+ type: Boolean,
+ default: false,
+ },
});
-const modelValue = defineModel({ type: Array as PropType
@@ -175,10 +200,18 @@
- 替换
+
+
+
+
+
+ {{ tipsText }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/model-user-info/index.vue b/src/components/model-user-info/index.vue
index ec97a920..c84446c3 100644
--- a/src/components/model-user-info/index.vue
+++ b/src/components/model-user-info/index.vue
@@ -5,12 +5,15 @@
+
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
-
拓拔
- ID:32156743
+ 昵称
+ ID:88888888
- ![]()
+
+
@@ -36,20 +39,21 @@ const style = ref('');
const style_container = ref('');
const id_bool = ref(true);
const stats_list = reactive([
- { id: '1', name: '订单总数', value: '15' },
- { id: '2', name: '商品收藏', value: '3' },
- { id: '3', name: '我的足迹', value: '8' },
- { id: '4', name: '我的积分', value: '310' },
+ { id: '1', name: '订单总数', value: '100' },
+ { id: '2', name: '商品收藏', value: '10' },
+ { id: '3', name: '我的足迹', value: '1000' },
+ { id: '4', name: '我的积分', value: '10000' },
]);
interface icon_params {
id: string;
src: uploadList[];
+ icon: string;
href: string;
}
const user_info = ref(['1', '2', '3', '4']);
const icon_setting = ref([
- { id: '1', src: [], href: 'a' },
- { id: '2', src: [], href: 'a' },
+ { id: '1', src: [], icon: '', href: 'a' },
+ { id: '2', src: [], icon: '', href: 'a' },
]);
const base_data = reactive({
// 头像大小
@@ -61,7 +65,10 @@ const base_data = reactive({
// 用户名字号
user_name_size: 16,
// 用户ID颜色
- user_id_color_list: [{color: 'rgba(254, 184, 143, 1)', color_percentage: ''}, {color: 'rgba(255, 227, 220, 1)', color_percentage: ''}],
+ user_id_color_list: [
+ { color: 'rgba(254, 184, 143, 1)', color_percentage: '' },
+ { color: 'rgba(255, 227, 220, 1)', color_percentage: '' },
+ ],
// 用户ID颜色
user_id_color: 'rgba(0, 0, 0, 1)',
// 用户ID方向
diff --git a/src/components/model-user-info/model-user-info-content.vue b/src/components/model-user-info/model-user-info-content.vue
index c548d907..f664d6d9 100644
--- a/src/components/model-user-info/model-user-info-content.vue
+++ b/src/components/model-user-info/model-user-info-content.vue
@@ -15,7 +15,7 @@