ui-process-h5 2.0.7-beta → 2.1.0-beta

package/src/packages/viewAttchList/index.js

@@ -0,0 +1,138 @@
+import { defineComponent } from "vue-demi";
+import dsBridge from "dsbridge";
+
+import PreView from "../preview/index.vue";
+import TopPopup from "../popup/index.vue";
+import PreviewImage from "../previewImage/index.vue";
+
+import del from "@/assets/img/del.png";
+import doc from "@/assets/img/doc.png";
+import file from "@/assets/img/file.png";
+import image from "@/assets/img/image.png";
+import pdf from "@/assets/img/pdf.png";
+import xls from "@/assets/img/xls.png";
+import zip from "@/assets/img/zip.png";
+
+export default defineComponent({
+    name: "ViewAttchList",
+    components: {
+        PreView,
+        TopPopup,
+        PreviewImage,
+    },
+    computed: {
+        del() {
+            return del;
+        },
+        doc() {
+            return doc;
+        },
+        file() {
+            return file;
+        },
+        image() {
+            return image;
+        },
+        pdf() {
+            return pdf;
+        },
+        xls() {
+            return xls;
+        },
+        zip() {
+            return zip;
+        },
+    },
+    props: {
+        inList: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    data() {
+        return {
+            listData: [],
+            imgIcon: ["jpg", "jpge", "png", "gif"],
+            docIcon: ["doc", "docx"],
+            xlsIcon: ["xls", "xlsx"],
+            zipIcon: ["zip", "rar", "7z"],
+            preList: [],
+            fileUrl: "",
+            visible: false,
+
+            visibleImg: false,
+            lists: [],
+            indexd: 0,
+        };
+    },
+    watch: {
+        inList: {
+            handler(val, preVal) {
+                if (val.length) {
+                    this.listData = val;
+
+                    this.lists = [];
+                    let arr = [];
+                    val.map((v, i) => {
+                        if (
+                            this.imgIcon.includes(
+                                v.name
+                                    .substring(v.name.lastIndexOf(".") + 1)
+                                    .toLowerCase()
+                            )
+                        ) {
+                        }
+                    });
+                    arr = val.filter((value) => {
+                        return this.imgIcon.includes(
+                            value.name
+                                .substring(value.name.lastIndexOf(".") + 1)
+                                .toLowerCase()
+                        );
+                    });
+                    arr.forEach((v, i) => {
+                        this.lists.push(v.url);
+                    });
+                }
+            },
+            immediate: true,
+            deep: true,
+        },
+    },
+    methods: {
+        viewFile(val) {
+            if (
+                this.imgIcon.includes(
+                    val.url
+                        .substring(val.url.lastIndexOf(".") + 1)
+                        .toLowerCase()
+                )
+            ) {
+                this.visibleImg = true;
+                this.indexd = this.lists.indexOf(val.url);
+            } else {
+                this.fileUrl = val.url;
+                this.visible = true;
+            }
+        },
+        loadFile(val) {
+            // console.log("loadFile", val);
+
+            if (dsBridge.hasNativeMethod("vueUpLoadFile")) {
+                let res = dsBridge.call("vueUpLoadFile", val.url);
+            } else {
+                if (
+                    "undefined" != typeof nativeMethod &&
+                    nativeMethod?.vueUpLoadFile
+                ) {
+                    nativeMethod.vueUpLoadFile(val.url);
+                    return false;
+                }
+                const a = document.createElement("a");
+                a.download = val.url?.match(/([^\/]+)$/g)[0];
+                a.href = val.url;
+                a.click();
+            }
+        },
+    },
+});

package/src/packages/viewAttchList/index.scss

@@ -0,0 +1,76 @@
+.wrap-header {
+    height: 40px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+}
+.wrap-header-back {
+    transform: rotateY(180deg);
+    width: 18px;
+    height: 18px;
+    
+}
+.wrap-header-back img {
+        width: 100%;
+        height: 100%;
+    }
+.wrap-header-title {
+    padding-left: calc(50% - 54px);
+    font-size: 18px;
+    color: #333;
+}
+
+.attch-list {
+    width: 100%;
+}
+.list-items {
+    display: flex;
+    margin-top: 18px;
+    padding: 0 20px 0 10px;
+}
+
+.list-items-icon {
+    width: 36px;
+    height: 40px;
+    margin-right: 10px;
+    line-height: 44px;
+}
+.list-items-icon .icon-img {
+    width: 100%;
+    height: 100%;
+}
+
+.list-items-info {
+    width: 225px;
+}
+
+.info-name {
+    font-size: 15px;
+    color: #333;
+    overflow-wrap: break-word;
+}
+.info-attribute {
+    color: #999;
+    font-size: 13px;
+    margin-top: 4px;
+}
+.info-attribute-time {
+    margin-right: 10px;
+}
+
+.list-items-download {
+    width: 26px;
+    margin-left: auto;
+    color: #1389ff;
+    font-size: 13px;
+    line-height: 44px;
+    white-space: nowrap;
+}
+
+.attch-list--white {
+    text-align: center;
+    margin-top: 50%;
+    font-size: 15px;
+    color: #333;
+}

package/src/packages/viewAttchList/index.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="process-wrap">
+        <div class="attch-list" v-if="listData.length > 0">
+            <div v-for="(v, i) of listData" :key="v.id" class="list-items">
+                <div class="list-items-icon">
+                    <img
+                        v-if="
+                            xlsIcon.includes(
+                                v.name
+                                    .substring(v.name.lastIndexOf('.') + 1)
+                                    .toLowerCase()
+                            )
+                        "
+                        class="icon-img"
+                        :src="xls"
+                    />
+                    <img
+                        v-else-if="
+                            imgIcon.includes(
+                                v.name
+                                    .substring(v.name.lastIndexOf('.') + 1)
+                                    .toLowerCase()
+                            )
+                        "
+                        class="icon-img"
+                        :src="image"
+                    />
+                    <img
+                        v-else-if="
+                            v.name
+                                .substring(v.name.lastIndexOf('.') + 1)
+                                .toLowerCase() == 'pdf'
+                        "
+                        class="icon-img"
+                        :src="pdf"
+                    />
+                    <img
+                        v-else-if="
+                            docIcon.includes(
+                                v.name
+                                    .substring(v.name.lastIndexOf('.') + 1)
+                                    .toLowerCase()
+                            )
+                        "
+                        class="icon-img"
+                        :src="doc"
+                    />
+                    <img
+                        v-else-if="
+                            zipIcon.includes(
+                                v.name
+                                    .substring(v.name.lastIndexOf('.') + 1)
+                                    .toLowerCase()
+                            )
+                        "
+                        class="icon-img"
+                        :src="zip"
+                    />
+                    <img v-else class="icon-img" :src="file" />
+                </div>
+                <div class="list-items-info" @click="viewFile(v)">
+                    <div class="info-name">
+                        <span class="info-name-text">{{ v.name }}</span>
+                    </div>
+                    <div class="info-attribute">
+                        <span class="info-attribute-time">{{
+                            v.uploadTime
+                        }}</span>
+
+                        <span class="info-attribute-size"
+                            >{{
+                                v.size < 1024
+                                    ? v.size
+                                    : v.size / 1024 > 1024
+                                    ? parseFloat(
+                                          (v.size / 1024 / 1024).toFixed(2)
+                                      )
+                                    : parseFloat((v.size / 1024).toFixed(2))
+                            }}{{
+                                v.size < 1024
+                                    ? "b"
+                                    : parseFloat((v.size / 1024).toFixed(2)) <
+                                      1024
+                                    ? "kb"
+                                    : "M"
+                            }}
+                        </span>
+                    </div>
+                </div>
+                <div class="list-items-download" @click="loadFile(v)">
+                    <span class="download-text">下载</span>
+                </div>
+            </div>
+        </div>
+        <div class="attch-list" v-else>
+            <div class="attch-list--white">
+                <div class="attch-list--label">暂无附件</div>
+            </div>
+        </div>
+        <TopPopup
+            v-bind:visible="visible"
+            v-on:update:visible="(val) => (visible = val)"
+            ref="TopPopup"
+            titleText="附件预览"
+            isDrawer
+            :isIndex="99"
+        >
+            <PreView :file="fileUrl" />
+        </TopPopup>
+        <PreviewImage
+            :images="lists"
+            v-bind:visible="visibleImg"
+            v-on:update:visible="(val) => (visibleImg = val)"
+            :indexd="indexd"
+        />
+    </div>
+</template>
+<script src="./index.js"></script>
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

package/src/style.css

@@ -0,0 +1,80 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/vite.config.ts

@@ -0,0 +1,118 @@
+import { defineConfig } from "vite";
+import { createVuePlugin } from "vite-plugin-vue2";
+import * as compiler from "@vue/compiler-sfc";
+import vue3 from "@vitejs/plugin-vue";
+import path from "path";
+import { getLibDir } from "./build/scripts/utils.mjs";
+import { isVue2, version } from "vue-demi";
+import { baseConfig } from "./src/assets/js/utils.js";
+import copy from "rollup-plugin-copy";
+import relaxedUnit from "postcss-relaxed-unit";
+
+
+console.log("version", { version });
+const resolve = (str) => {
+    return path.resolve(__dirname, str);
+};
+let isVueCode = 1;
+if (version.startsWith("2.7.")) isVueCode = 2;
+else if (version.startsWith("2.")) isVueCode = 1;
+else isVueCode = 3;
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    resolve: {
+        alias: {
+            "@": resolve("src"),
+            vue:
+                isVueCode === 1
+                    ? path.resolve("./node_modules/vue2")
+                    : isVueCode === 2
+                        ? path.resolve("./node_modules/vue2.7")
+                        : path.resolve("./node_modules/vue3"),
+            "@vue/composition-api": resolve(
+                "./node_modules/@vue/composition-api"
+            ),
+            // "checked-pick-app":
+            //     isVueCode === 1
+            //         ? path.resolve(
+            //             "./node_modules/checked-pick-app/v2/checked-pick-app.umd.cjs"
+            //         )
+            //         : isVueCode === 2
+            //             ? path.resolve(
+            //                 "./node_modules/checked-pick-app/v2.7/checked-pick-app.umd.cjs"
+            //             )
+            //             : path.resolve(
+            //                 "./node_modules/checked-pick-app/v3/checked-pick-app.umd.cjs"
+            //             ),
+            // "checked-pick-app-style":
+            //     isVueCode === 1
+            //         ? path.resolve(
+            //             "./node_modules/checked-pick-app/v2/style.css"
+            //         )
+            //         : isVueCode === 2
+            //             ? path.resolve(
+            //                 "./node_modules/checked-pick-app/v2.7/style.css"
+            //             )
+            //             : path.resolve(
+            //                 "./node_modules/checked-pick-app/v3/style.css"
+            // ),
+            // dsbridge: path.resolve("./node_modules/dsbridge"),
+        },
+    },
+    build: {
+        lib: {
+            entry: resolve("./src/packages/index.js"),
+            name: "ui-process-h5",
+            fileName: "ui-process-h5",
+        },
+        cssTarget: "chrome61",
+        rollupOptions: {
+            // external: ['vue-demi', 'vue'],
+            external: ['vue', 'checked-pick-app', 'dsbridge'],
+            output: {
+                dir: getLibDir(version),
+                globals: {
+                    vue: "Vue",
+                    "checked-pick-app": "checked-pick-app",
+                    dsbridge: "dsbridge"
+                },
+            },
+        },
+        terserOptions: {
+            compress: {
+                drop_console: true,
+                drop_debugger: true,
+            },
+        },
+    },
+    optimizeDeps: {
+        // exclude: ['vue-demi']
+    },
+    plugins: [
+        isVue2 ? createVuePlugin() : vue3({ compiler: compiler }),
+        copy({
+            targets: [
+                { src: "./build/configure/*", dest: "./ui-process-h5" },
+                { src: "./build/scripts/*", dest: "./ui-process-h5/scripts" },
+            ],
+        }),
+
+
+    ],
+    css: {
+        postcss: {
+            // 配置自定义组件插件
+            plugins: [relaxedUnit({ rules: { rpx: "div(2).unit(px)" } })],
+        },
+    },
+    server: {
+        proxy: {
+            [baseConfig.apiUrl]: {
+                target: process.env.domain || `http://59.53.91.231:2100`,
+                changeOrigin: true,
+                //rewrite: (path) => path.replace(/^\/api/, ""),
+            },
+        },
+    },
+});