ui-process-h5 2.1.0-beta → 2.1.1-beta

package/src/packages/downSelect/index.js

@@ -1,119 +0,0 @@
-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

@@ -1,88 +0,0 @@
-.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

@@ -1,62 +0,0 @@
-<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

@@ -1,6 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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

@@ -1,178 +0,0 @@
-.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

@@ -1,80 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-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,
-        },
-    },
-});