1.导入新增模版弹窗

src/api/diy.ts

@@ -1,4 +1,3 @@
-import { id } from 'element-plus/es/locale';
 import request from '@/utils/request';
 
 class DiyAPI {
@@ -18,6 +17,14 @@ class DiyAPI {
             data,
         });
     }
+    /** diy导入--获取列表 */
+    static getImportList(data: any) {
+        return request({
+            url: `diyapi/diymarket`,
+            method: 'post',
+            data,
+        });
+    }
     /** diy导入 */
     static import(data: FormData) {
         return request({
@@ -29,6 +36,14 @@ class DiyAPI {
             },
         });
     }
+    /** diy导入 -- 安装 */
+    static install(data: diy) {
+        return request({
+            url: `diyapi/diyinstall`,
+            method: 'post',
+            data,
+        });
+    }
     /** diy导出 */
     static export(data: diy) {
         return request({

src/components/common/template-import/index.vue

@@ -10,33 +10,92 @@
             <el-tabs v-model="temp_active" class="wh flex-1">
                 <el-tab-pane label="本地导入" name="1" class="h flex-row jc-c align-c">
                     <div class="import-content">
-                        <el-upload action="#" :accept="exts_text" :show-file-list="false" :auto-upload="false" :on-change="upload_change">
+                        <el-upload v-model:file-list="file_list" action="#" :accept="exts_text" :show-file-list="false" :auto-upload="false" :on-change="upload_change">
                             <template #trigger>
                                 <div class="import-btn">
-                                    <icon name="upload" color="error"></icon>
+                                    <icon name="upload-file" color="error"></icon>
                                 </div>
                             </template>
                         </el-upload>
-                        <div class="cr-c size-12 flex-col gap-10 mt-20">
+                        <div v-if="file_list.length > 0" class="upload-file-tips mt-5 size-12 flex-row gap-5 jc-c align-e">
+                            <span class="fw">{{ upload_file.name }}</span>
+                            <span class="cr-9">({{ annex_size_to_unit(upload_file.size) }})</span>
+                        </div>
+                        <div class="cr-c size-12 flex-col gap-10 mt-10">
                             <p>1. 选择已下载的diy设计zip包</p>
                             <p>2. 导入将自动新增一条数据</p>
                         </div>
                     </div>
                 </el-tab-pane>
-                <el-tab-pane label="模版市场" name="2"> </el-tab-pane>
+                <el-tab-pane label="模版市场" name="2" class="h flex-col gap-16">
+                    <div v-loading="loading && { text: Loading_text }" :element-loading-text="Loading_text" element-loading-background="rgba(122, 122, 122, 0.8)" class="flex-1 flex-col gap-16">
+                        <div class="temp-search flex-row jc-sb align-c w">
+                            <div class="flex-row gap-10 align-c search-content">
+                                <el-input v-model="form.keywords" class="flex-1" placeholder="搜索关键字" @keyup.enter="get_import_list('1')" />
+                                <el-button type="primary" @click="get_import_list('1')">
+                                    <view class="flex-row jc-c gap-4">
+                                        <icon name="search"></icon>
+                                        <text>搜索</text>
+                                    </view>
+                                </el-button>
+                                <el-checkbox v-model="form.status" @change="status_change">我已购买</el-checkbox>
+                            </div>
+                            <el-link type="primary" href="#" target="_blank" :underline="false">
+                                <icon name="download-btn"></icon>
+                                <text>更多diy模版下载</text>
+                            </el-link>
+                        </div>
+                        <el-scrollbar>
+                            <div class="temp-content flex-1">
+                                <div class="flex-row flex-wrap gap-16">
+                                    <div v-for="item in data_list" :key="item.id" class="item flex-col br-f5">
+                                        <div class="re img-content">
+                                            <image-empty v-model="item.images" class="img" error-img-style="width:5rem;height:5rem;"></image-empty>
+                                            <!-- 鼠标滑入，显示详情 -->
+                                            <div class="mask"></div>
+                                            <div class="middle detail">
+                                                <el-link class="detail-content plr-20 ptb-6 bg-f cr-3 round" type="primary" :href="item.goods_url" :underline="false" target="_blank">
+                                                    <div class="flex-row align-c gap-4">
+                                                        <icon name="eye"></icon>
+                                                        <text>查看</text>
+                                                    </div>
+                                                </el-link>
+                                            </div>
+                                        </div>
+                                        <div class="flex-1 flex-col pa-10 gap-10">
+                                            <div class="title text-line-2">{{ item.title }}</div>
+                                            <div class="flex-row jc-sb align-c gap-3">
+                                                <p class="cr-error fw size-14">{{ item.price_data.value }}</p>
+                                                <el-button v-if="item.buy_data.status == 1" :type="item.buy_data.status == 1 ? 'primary' : item.buy_data.status == 2 ? 'default' : 'danger'" :disabled="item.buy_data.status == 0" @click="buy_event(item, item.buy_data.status)">{{ item.buy_data.title }}</el-button>
+                                            </div>
+                                            <div class="cr-9 size-12">{{ item.version_apply.name }}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </el-scrollbar>
+                    </div>
+                </el-tab-pane>
             </el-tabs>
         </div>
-        <template v-if="temp_active == '1'" #footer>
+        <template #footer>
             <span class="dialog-footer">
-                <el-button class="plr-28 ptb-10" @click="close_event">取消</el-button>
+                <div v-if="temp_active == '1'">
-                <el-button class="plr-28 ptb-10" type="primary" @click="confirm_event">确定</el-button>
+                    <el-button class="plr-28 ptb-10" @click="close_event">取消</el-button>
+                    <el-button class="plr-28 ptb-10" type="primary" @click="confirm_event">确定</el-button>
+                </div>
+                <div v-else class="flex-row jc-e">
+                    <el-pagination :current-page="form.page" background :page-size="form.page_size" :pager-count="5" layout="prev, pager, next" :total="form.data_total" @current-change="current_page_change" />
+                </div>
             </span>
         </template>
     </el-dialog>
 </template>
 
 <script lang="ts" setup>
-import type { UploadFile, UploadFiles } from 'element-plus';
+import type { UploadFile } from 'element-plus';
+import { annex_size_to_unit } from '@/utils';
+import DiyAPI from '@/api/diy';
 const app = getCurrentInstance();
 /**
  * @description: 模版导入
@@ -56,17 +115,168 @@ const temp_active = ref('1');
 
 //导入
 const exts_text = ref('.zip');
+const upload_file = ref({
+    name: '',
+    size: 0,
+});
+const file_list = ref<UploadFile[]>([]);
 // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
 const upload_change = async (uploadFile: UploadFile) => {
     console.log('文件状态改变时的钩子', uploadFile);
+    upload_file.value.name = uploadFile.name || '';
+    upload_file.value.size = uploadFile.size || 0;
+    file_list.value = [uploadFile];
 };
+
+watch(
+    () => temp_active.value,
+    (val) => {
+        if (val === '2') {
+            // 获取附件列表
+            get_import_list('1');
+        }
+    }
+);
+
+const init = () => {
+    get_import_list('1');
+};
+const data_list = ref<arrayIndex[]>([]);
+const form = ref({
+    keywords: '',
+    status: false,
+    page: 1,
+    page_size: 10,
+    data_total: 0,
+});
+const loading = ref(false);
+const Loading_text = ref(' ');
+const get_import_list = (type?: string) => {
+    if (type) {
+        form.value.page = 1;
+    }
+    loading.value = true;
+    DiyAPI.getImportList(form.value)
+        .then((res: any) => {
+            const data = res.data;
+            form.value.data_total = data.data_total;
+            data_list.value = data.data_list;
+            loading.value = false;
+        })
+        .catch(() => {
+            form.value.data_total = 0;
+            data_list.value = [];
+            loading.value = false;
+        });
+};
+const status_change = (val: any) => {
+    get_import_list('1');
+};
+// 分页查询
+const current_page_change = (val: number) => {
+    form.value.page = val;
+    init();
+};
+// 购买事件
+const buy_event = (item: any, status: number) => {
+    if (status == 0) {
+        // 跳转链接
+        window.open(item.goods_url, '_blank');
+    } else if (status == 1) {
+        // 执行导入
+        const new_data: install_data = {
+            id: item.id,
+            data_id: get_id(),
+            opt: 'url',
+            key: '',
+        };
+        loading.value = true;
+        Loading_text.value = '正在获取中...';
+        install(new_data);
+        console.log(1);
+    }
+};
+interface install_data {
+    id: string;
+    data_id: string;
+    opt: string;
+    key: string;
+}
+const install = async (item: install_data) => {
+    let new_data = item;
+    DiyAPI.install(item)
+        .then((res: any) => {
+            switch (item.opt) {
+                case 'url':
+                    new_data['key'] = res.data;
+                    new_data['opt'] = 'download';
+                    Loading_text.value = '正在下载中...';
+                    install(new_data);
+                    break;
+                case 'download':
+                    new_data['key'] = res.data;
+                    new_data['opt'] = 'install';
+                    Loading_text.value = '正在安装中...';
+                    install(new_data);
+                    break;
+                case 'install':
+                    ElMessage.success('安装成功');
+                    history.pushState({}, '', '?s=diy/saveinfo/id/' + res.data + '.html');
+                    Loading_text.value = '';
+                    loading.value = false;
+                    close_event();
+                    emit('confirm');
+                    break;
+            }
+        })
+        .catch((err) => {
+            loading.value = false;
+            Loading_text.value = '';
+        });
+};
+
 // 取消回调
-const emit = defineEmits(['close']);
+const emit = defineEmits(['confirm']);
 const close_event = () => {
     dialogVisible.value = false;
+    upload_file.value.name = '';
+    upload_file.value.size = 0;
+    file_list.value = [];
 };
 // 确认回调
-const confirm_event = () => {};
+const confirm_event = () => {
+    if (file_list.value.length > 0) {
+        const form_data = new FormData();
+        if (get_id()) {
+            form_data.append('data_id', get_id());
+        }
+        if (file_list.value && file_list.value[0].raw) {
+            form_data.append('file', file_list.value[0]?.raw);
+        }
+        DiyAPI.import(form_data).then((res: any) => {
+            ElMessage.success(res.msg);
+            history.pushState({}, '', '?s=diy/saveinfo/id/' + res.data + '.html');
+            close_event();
+            emit('confirm');
+        });
+    }
+};
+
+// 截取document.location.search字符串内id/后面的所有字段
+const get_id = () => {
+    let new_id = '';
+    if (document.location.search.indexOf('id/') != -1) {
+        new_id = document.location.search.substring(document.location.search.indexOf('id/') + 3);
+        // 去除字符串的.html
+        let html_index = new_id.indexOf('.html');
+        if (html_index != -1) {
+            new_id = new_id.substring(0, html_index);
+        }
+        return new_id;
+    } else {
+        return new_id;
+    }
+};
 </script>
 <style lang="scss" scoped>
 .url-value-content {
@@ -87,4 +297,74 @@ const confirm_event = () => {};
         border: 0.1rem dashed $cr-primary;
     }
 }
+.temp-search {
+    .search-content {
+        width: 50rem;
+    }
+}
+.temp-content {
+    .item {
+        width: calc(100% / 5 - (1.6rem * 4 / 5));
+        border-radius: 0.8rem;
+        transition: all 0.3s;
+        overflow: hidden;
+        .img-content {
+            .img {
+                width: 100%;
+                height: 20rem;
+                transition: all 0.3s;
+            }
+            .detail {
+                opacity: 0;
+                transition: all 0.3s;
+                .detail-content {
+                    transition: all 0.3s;
+                    margin-top: 3rem;
+                }
+                &:hover {
+                    .detail-content {
+                        color: $cr-primary;
+                    }
+                }
+            }
+            .mask {
+                position: absolute;
+                inset: 0;
+                background-color: rgba(0, 0, 0, 0.5);
+                opacity: 0;
+                transition: all 0.3s;
+            }
+            &:hover {
+                .img {
+                    transform: scale(1.05);
+                }
+                .mask {
+                    background: rgba(0, 0, 0, 0.4);
+                }
+                .detail {
+                    opacity: 1;
+                }
+
+                .detail-content {
+                    margin-top: 0rem;
+                }
+                .mask {
+                    opacity: 0.8;
+                }
+            }
+        }
+        .title {
+            height: 4rem;
+        }
+    }
+}
+:deep(.el-tabs__nav-wrap) {
+    &::after {
+        height: 0.1rem;
+    }
+}
+:deep(.el-tabs__item) {
+    /* 修改为您想要的文字大小 */
+    font-size: 1.4rem !important;
+}
 </style>

src/views/layout/index.vue

@@ -18,7 +18,6 @@
 </template>
 
 <script setup lang="ts">
-import type { UploadFile } from 'element-plus';
 import { is_obj } from '@/utils';
 import { Settings, AppMain } from './components/index';
 import defaultSettings from './components/main/index';
@@ -101,25 +100,12 @@ const right_update = (item: any, diy: [Array<any>], header: headerAndFooter, foo
 };
 const import_temp_visible_dialog = ref(false);
 // 导入数据
-const import_data_event = (uploadFile: UploadFile) => {
+const import_data_event = () => {
-    // // 截取document.location.search字符串内id/后面的所有字段
-    // const form_data = new FormData();
-    // if (get_id()) {
-    //     form_data.append('id', get_id());
-    // }
-    // if (uploadFile && uploadFile.raw) {
-    //     form_data.append('file', uploadFile?.raw);
-    // }
-    // DiyAPI.import(form_data).then((res: any) => {
-    //     ElMessage.success(res.msg);
-    //     history.pushState({}, '', '?s=diy/saveinfo/id/' + res.data + '.html');
-    //     init();
-    // });
     import_temp_visible_dialog.value = true;
 };
 const handleImportConfirm = () => {
     // 导入成功
-    console.log('handleImportConfirm');
+    init();
 };
 // 导出数据
 const export_data_event = () => {