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

package/src/packages/downSelect/index.js

@@ -0,0 +1,119 @@
+import { defineComponent } from "vue-demi";
+import arrow from "@/assets/img/arrow.png";
+import check from "@/assets/img/check.png";
+
+export default defineComponent({
+    name: "TopDownSelect",
+    props: {
+        // 传入数组 控制当前选项
+        option: {
+            type: Array,
+            default: [],
+        },
+        // 样式控制
+        optionStyle: {
+            type: String,
+            default: "",
+        },
+        // 蒙层显示
+        maskShow: {
+            type: Boolean,
+            default: true,
+        },
+        // 边框显示
+        border: {
+            type: Boolean,
+            default: false,
+        },
+        // 默认选择
+        defaultValue: {
+            type: String,
+            default: "",
+        },
+        // 提示
+        placeholder: {
+            type: String,
+            default: "请选择",
+        },
+        // isSlots
+        isSlots: {
+            type: Boolean,
+            default: false,
+        },
+        disibled: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            value: {
+                id: "",
+                text: "",
+            },
+            lists: [],
+            expand: false,
+            active: "",
+            activeItem: {
+                name:''
+            },
+        };
+    },
+    watch: {
+        // 监听渲染
+        option: {
+            handler(val, preVal) {
+                if (val && val.length) {
+                    this.lists = val;
+                    console.log("select::::", val, this.lists);
+                }
+            },
+            immediate: true,
+            deep: true,
+        },
+        defaultValue: {
+            immediate: true,
+            deep: true,
+            handler(val, preVal) {
+                this.active = val;
+                let list = JSON.parse(JSON.stringify(this.option))
+                let data = list.filter((v, i) => {
+                    return v.id == val;
+                });
+                this.activeItem = data[0];
+                if (this.activeItem) this.$emit("change", this.activeItem);
+            },
+        },
+    },
+    computed: {
+        arrow() {
+            return arrow;
+        },
+        check() {
+            return check;
+        },
+    },
+    methods: {
+        // 展开当前下拉
+        handleExpand() {
+            if (this.disibled) return;
+            this.expand ? (this.expand = false) : (this.expand = true);
+            // console.log("handleExpand", this.expand);
+        },
+
+        // 点击选择
+        handleClick(item, index) {
+            // console.log("当前选择:::", item, index);
+            if (this.active == item.id) return;
+            this.active = item.id;
+            this.activeItem = item;
+            this.expand = false;
+            this.$emit("change", this.activeItem, this.lists);
+        },
+
+        // 关闭
+        handleClose() {
+            this.expand = false;
+        },
+    },
+});

package/src/packages/downSelect/index.scss

@@ -0,0 +1,88 @@
+.top-select {
+    width: 100%;
+    position: relative;
+    background-color: #fff;
+
+    &-menu {
+        width: 100%;
+        height: 48px;
+        font-size: 15px;
+        display: flex;
+        justify-content: end;
+        align-items: center;
+        position: relative;
+        z-index: 80;
+        background-color: #fff;
+        box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
+
+        &-border {
+            box-shadow: none;
+        }
+
+        &-placeholder {
+            color: #888;
+        }
+
+        &--arrow {
+            width: 10px;
+            height: 10px;
+            transition: transform 0.3s ease;
+            margin-left: 8px;
+            transform: rotate(0);
+        }
+
+        .arrow-active {
+            transform: rotate(180deg);
+        }
+    }
+
+    &-option {
+        width: 100%;
+        // height: 100%;
+        max-height: 262px;
+        overflow-y: auto;
+        position: fixed;
+        z-index: 79;
+        // top: 48px;
+        left: 0;
+        transition: transform 0.3s ease;
+
+        &-border {
+            box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
+        }
+
+        .option-items {
+            padding: 10px 16px;
+            height: 44px;
+            box-sizing: border-box;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            position: relative;
+            z-index: 70;
+            background-color: #fff;
+            justify-content: space-between;
+
+            &-active {
+                color: #3c9cff;
+                font-weight: 600;
+            }
+
+            &-check {
+                width: 20px;
+                height: 20px;
+            }
+        }
+        &-mask {
+            background-color: #000;
+            opacity: 0.7;
+            width: 100%;
+            height: 100vh;
+            position: fixed;
+            z-index: 69;
+            transition: all 0.3s ease;
+            top: 0;
+            left: 0;
+        }
+    }
+}

package/src/packages/downSelect/index.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="top-select">
+        <div v-if="isSlots" style="position: relative; z-index: 80;">
+            <slot name="header" :data="{ ...activeItem, placeholder }"></slot>
+        </div>
+        <div
+            v-else
+            class="top-select-menu"
+            @click="handleExpand"
+            :class="[
+                border && 'top-select-menu-border',
+                !activeItem && 'top-select-menu-placeholder',
+            ]"
+        >
+            {{ activeItem ? activeItem.name : placeholder }}
+            <img
+                v-if="!disibled"
+                class="top-select-menu--arrow"
+                :src="arrow"
+                :class="[expand ? 'arrow-active' : '']"
+            />
+        </div>
+        <div
+            v-if="maskShow"
+            class="top-select-option-mask"
+            :style="
+                expand
+                    ? 'visibility: visible; opacity: .7;'
+                    : 'visibility: hidden; opacity: 0;'
+            "
+        ></div>
+        <div
+            v-if="lists && lists.length"
+            class="top-select-option"
+            :class="[border && 'top-select-option-border']"
+            :style="`${
+                expand
+                    ? 'transform: translateY(2%);visibility: visible; opacity: 1;'
+                    : 'transform: translateY(-50%);visibility: hidden; opacity: 0'
+            };${optionStyle ? optionStyle : ''}`"
+        >
+            <div
+                class="option-items"
+                v-for="(v, i) in lists"
+                :key="v.id"
+                @click="handleClick(v, i)"
+                :class="[active == v.id ? 'option-items-active' : '']"
+            >
+                {{ v.name }}
+                <img
+                    class="option-items-check"
+                    v-if="active == v.id"
+                    :src="check"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+<script src="./index.js"></script>
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

package/src/packages/index.js

@@ -0,0 +1,6 @@
+import TopProcess from "./process/index.vue";
+import attchViews from "./attchUpload/index.vue";
+import ViewAttchList from "./viewAttchList/index.vue";
+import TopSumbitPopup from "./submitPopup/index.vue";
+
+export { TopProcess, attchViews, TopSumbitPopup, ViewAttchList };

package/src/packages/popup/index.js

@@ -0,0 +1,125 @@
+import { defineComponent } from "vue-demi";
+
+export default defineComponent({
+    name: "TopPopup",
+    props: {
+        titleText: { default: "top-popup", type: String }, // 标题文本
+        context: { default: "内容", type: String }, // 内容文本
+        cancelText: { default: "取消", type: String }, // 取消按钮文案
+        comfigText: { default: "确定", type: String }, // 确定按钮文案
+        comfig: { default: null, type: Function }, // 确定方法
+        cancel: { default: null, type: Function }, // 取消方法
+        isMask: { default: true, type: Boolean }, // 是否开启蒙版
+        isMaskClose: { default: true, type: Boolean }, // 蒙版关闭功能
+        isTips: { default: false, type: Boolean }, //判断当前是否为dialog,
+        isDrawer: { default: false, type: Boolean }, // 抽屉模式
+        visible: { default: false, type: Boolean }, // 展示
+        isIndex: { type: Number }, // 层级
+        width: { type: String, default: "95vw" },
+        className: { type: String, default: "" },
+
+        appendClass:{ type: String, default: "" }, // 挂载节点class
+    },
+    data() {
+        return {
+            show: false,
+            top: 0,
+            useHidden: false,
+        };
+    },
+    watch: {
+        visible: {
+            handler(val, preVal) {
+                if (val) {
+                    this.show = val;
+
+                    if (
+                        document.body.style.position == "fixed" &&
+                        document.body.style.overflow == "hidden"
+                    ) {
+                        this.useHidden = true;
+                    } else {
+                        this.useHidden = false;
+                    }
+
+                    this.top = window.scrollY;
+                    document.body.style.position = "fixed";
+                    document.body.style.top = `${-top}px`;
+                    document.body.style.overflow = "hidden";
+                } else {
+                    if (this.useHidden) {
+                        this.show = val;
+                        this.$emit("update:visible", false);
+                        return;
+                    } else {
+                        document.body.style.position = "";
+                        document.body.style.top = "";
+                        document.body.style.overflow = "visible";
+                        window.scrollTo(0, this.top);
+                    }
+                    this.show = val;
+                    this.$emit("update:visible", false);
+                }
+            },
+            immediate: true,
+        },
+    },
+
+    methods: {
+        handleOpen() {
+            this.show = true;
+            this.top = window.scrollY;
+            document.body.style.position = "fixed";
+            document.body.style.top = -this.top + "px";
+        },
+        handleClose() {
+            document.body.style.position = "";
+            document.body.style.top = "";
+            window.scrollTo(0, this.top);
+            this.show = false;
+            this.$emit("update:visible", false);
+
+            // this.$destroy();
+        },
+        handleCancel() {
+            typeof this.cancel === "function" && this.cancel();
+            this.handleClose();
+        },
+        handleComfig() {
+            typeof this.comfig === "function" && this.comfig();
+        },
+        isIOS() {
+            let isIphone = navigator.userAgent.includes("iPhone");
+
+            let isIpad = navigator.userAgent.includes("iPad");
+
+            return isIphone || isIpad;
+        },
+    },
+    mounted() {
+        // 渲染组件到body
+        this.$nextTick(() => {
+            /* document.body.style.width = "100%";
+            document.body.style.height = "100%"; */
+            const body = document.getElementsByClassName("process-warp")[0]
+                ? document.getElementsByClassName("process-warp")[0]
+                : document
+                      .getElementsByClassName("sumbmitPopup-index-sumbit")[0]
+                      .getElementsByClassName("top-popup")[0];
+            if (body.append) {
+                body.append(this.$el);
+            } else {
+                body.appendChild(this.$el);
+            }
+            const top =
+                document.documentElement.scrollTop || document.body.scrollTop;
+            /* if (this.isIOS()) {
+                document.body.addEventListener("focusin", () => {
+                    document.body.style.position = "fixed";
+                    document.body.style.left = "0";
+                    document.body.style.top = `${-top}px`;
+                });
+            } */
+        });
+    },
+});

package/src/packages/popup/index.scss

@@ -0,0 +1,178 @@
+.top-popup-zindex{
+    position: relative;
+    z-index: 2;
+}
+
+.top-popup {
+    width: 100%;
+    position: fixed;
+    left: 0;
+    background-color: #fff;
+    border-radius: 20px 20px 0 0;
+    padding: 0 20px;
+    box-sizing: border-box;
+    transition: transform 0.45s ease;
+    bottom: 0;
+}
+.top-popup-mask {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    background-color: #000;
+    opacity: 0.7;
+    top: 0;
+    left: 0;
+    transition: all 0.3s ease;
+}
+.top-popup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0;
+    font-size: 15px;
+    background-color: #fff;
+    position: relative;
+    height: 62px;
+    box-sizing: border-box;
+}
+
+.top-popup-header .header-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: #333;
+}
+
+.top-popup-header .header-cancel {
+    color: #333;
+}
+.top-popup-header .header-comfig {
+    color: #1389ff;
+}
+
+.top-popup-body {
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 80vh;
+    min-height: 65vh;
+    padding-bottom: 20px;
+    box-sizing: border-box;
+}
+
+.top-tips {
+    width: 80vw;
+    /* height: 200px; */
+    border-radius: 11px;
+    background-color: #fff;
+    position: fixed;
+    top: calc(50% - 100px);
+    left: calc(50% - 40vw);
+    box-sizing: border-box;
+    transition: all 0.3s ease;
+}
+
+.top-tips-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding-top: 25px;
+    font-size: 15px;
+    color: #323233;
+    background-color: #fff;
+    border-radius: 11px;
+}
+
+.top-tips-body {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    padding-top: 8px;
+    font-size: 14px;
+    color: #6c6c6c;
+}
+
+.top-tips-footer {
+    display: flex;
+    flex-direction: row;
+    border-top-color: #f5f5f5;
+    border-top-style: solid;
+    border-top-width: 1px;
+    position: relative;
+}
+.top-tips-footer::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 0.5px;
+    top: 0;
+    left: 0;
+    background-color: #f2f2f2;
+}
+
+.top-tips-btn {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 45px;
+    position: relative;
+    font-size: 16px;
+    color: #333;
+}
+
+.top-tips-btn:last-child {
+    color: #ee0a24;
+}
+
+.top-tips-btn:last-child::before {
+    content: "";
+    position: absolute;
+    width: 1px;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: #f2f2f2;
+}
+
+.top-popup-drawer {
+    width: 95vw;
+    height: 100vh;
+    position: fixed;
+    right: 0;
+    background-color: #f2f3ff;
+    box-sizing: border-box;
+    transition: transform 0.45s ease;
+    bottom: 0;
+    transform: translateX(150%);
+}
+.top-popup-drawer--active {
+    transform: translateX(0);
+}
+
+.top-popup-drawer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    font-size: 15px;
+    position: relative;
+    background-color: #fff;
+    z-index: 100;
+}
+
+.top-popup-drawer-header::after{
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    background-color: #f2f2f2;
+}
+
+.top-popup-drawer--body {
+    height: calc(100% - 40px);
+    overflow-y: auto;
+}

package/src/packages/popup/index.vue

@@ -0,0 +1,80 @@
+<template>
+    <div
+        class="top-popup-zindex"
+        :style="`${isIndex ? `z-index:${isIndex}` : ''}`"
+        :class="className"
+    >
+        <div
+            class="top-popup-mask"
+            :style="
+                show && isMask
+                    ? 'visibility: visible; opacity: .7;'
+                    : 'visibility: hidden; opacity: 0;'
+            "
+            @click="isMaskClose && handleClose()"
+        ></div>
+        <div
+            v-if="!isTips && !isDrawer"
+            class="top-popup"
+            :style="
+                show
+                    ? 'transform: translateY(0)'
+                    : 'transform: translateY(150%)'
+            "
+        >
+            <div class="top-popup-header">
+                <div class="header-cancel" @click="handleCancel">
+                    {{ cancelText }}
+                </div>
+                <div class="header-title">{{ titleText }}</div>
+                <div class="header-comfig" @click="handleComfig">
+                    {{ comfigText }}
+                </div>
+            </div>
+            <div class="top-popup-body">
+                <slot name="default"></slot>
+            </div>
+        </div>
+        <div
+            v-else-if="!isTips && isDrawer"
+            class="top-popup-drawer"
+            :class="show ? 'top-popup-drawer--active' : ''"
+            :style="width ? `width:${width};` : ''"
+        >
+            <div class="top-popup-drawer-header">
+                <div class="header-cancel" @click="handleCancel">
+                    关闭
+                </div>
+                <div class="header-title">{{ titleText }}</div>
+                <div class="header-comfig" style="width: 20px;"></div>
+            </div>
+            <div class="top-popup-drawer--body">
+                <slot name="default"></slot>
+            </div>
+        </div>
+        <div
+            class="top-tips"
+            v-else-if="isTips && !isDrawer"
+            :style="
+                show
+                    ? 'visibility: visible; opacity: 1; transform: scale(1)'
+                    : 'visibility: hidden; opacity: 0; transform: scale(1.2)'
+            "
+        >
+            <div class="top-tips-header">{{ titleText }}</div>
+            <div class="top-tips-body">{{ context }}</div>
+            <div class="top-tips-footer">
+                <div class="top-tips-btn" @click="handleCancel">
+                    {{ cancelText }}
+                </div>
+                <div class="top-tips-btn" @click="handleComfig">
+                    {{ comfigText }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script src="./index.js"></script>
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

package/src/packages/preview/index.js

@@ -0,0 +1,40 @@
+import { defineComponent } from "vue-demi";
+
+export default defineComponent({
+    name: "PreView",
+    props: {
+        file: {
+            type: String,
+            default: "",
+        },
+    },
+    data() {
+        return {
+            url: "",
+            video: ["mp4", "avi", "rmvb"],
+            videoShow: false,
+        };
+    },
+    watch: {
+        file: {
+            handler(val, preVal) {
+                if (val) {
+                    if (
+                        this.video.includes(
+                            val.substring(val.lastIndexOf(".") + 1)
+                        )
+                    ) {
+                        this.videoShow = true;
+                        this.url = val;
+                    } else {
+                        this.videoShow = false;
+                        let ssl = val.indexOf("https://") == -1 ? 0 : 1;
+                        this.url = `https://wdyl.ddzg.cn:8089/?ssl=${ssl}&furl=${val}`;
+                    }
+                }
+            },
+            immediate: true,
+            deep: true,
+        },
+    },
+});