udxcms 1.0.1

package/dist/components/h5Components/NoticeModule.vue

@@ -0,0 +1,83 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2020-12-15 09:49:41
+ * @LastEditTime: 2021-11-17 01:57:59
+ * @LastEditors: Lewis
+ * @Description:
+-->
+<template>
+    <div v-show="show" class="NoticeModule" @click="close">
+        <div class="notice-box">
+            <div class="notice-box-header">
+                <div class="notice-title">{{title}}</div>
+                <div @click="close" v-if="cancel" class="notice-cancel">{{$t('user_common_cancel')}}</div>
+            </div>
+            <div class="notice-content">
+                <slot name="content">notice</slot>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: "NoticeModule",
+    props: {
+        show: {
+            type: Boolean,
+            default: false
+        },
+        cancel: {
+            type: Boolean,
+            default: false
+        },
+        title: {
+            type:String,
+            default: "Notice"
+        }
+    },
+    methods: {
+        close () {
+            this.$emit("close");
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    .NoticeModule {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        left: 0;
+        top: 0;
+        background: var(--pop-mask-background-color-light);
+        z-index: 50002;
+        .notice-box {
+            width: 300px;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -60%);
+            background: var(--popup-bg);
+            border-radius: 6px;
+            padding: 18px 14px 24px;
+            .notice-box-header {
+                display: flex;
+                flex-flow: row nowrap;
+                align-items: center;
+                justify-content: space-between;
+                margin-bottom: 15px;
+                .notice-title {
+                    font-size: 17px;
+                    color: var(--text-color);
+                    // color: var(--text-color);
+                }
+                .notice-cancel {
+                    font-size: 17px;
+                    font-family: Font;
+                    color: var(--text-color-secondary);
+                    // color: var(--text-color);
+                }
+            }
+        }
+    }
+</style>

package/dist/components/h5Components/OtherNav.vue

@@ -0,0 +1,115 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2020-11-27 17:24:34
+ * @LastEditTime: 2021-12-22 22:21:27
+ * @LastEditors: Lewis
+ * @Description:
+-->
+<template>
+    <div v-if="!isInIsWalletApp" class="other-container">
+        <Top class="top" :type="navType" v-if="navType"/>
+        <div :class="type" class="nav" :style="{marginBottom: bottom + 'px'}">
+            <!-- 通用导航 一 -->
+            <GoHistory :type="type" :color="color" :go="go" />
+            <div class="title" :style="{color: color}">
+                <slot name="default"></slot>
+            </div>
+            <!-- 占位符 -->
+            <div class="right-btn" :style="{color: color}">
+                <slot name="right-btn"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { isInIsWalletApp } from './../../utils'
+export default {
+    name: 'OtherNav',
+    props: {
+        go: {
+            type: [Number, String, Object,Function],
+            default: -1
+        },
+        color: {
+            type: String,
+            default: 'var(--text-color-four)'
+        },
+        type: {
+            type: String,
+            default: "",
+        },
+        navType: {
+            type: String,
+            default: "",
+        },
+        bottom: {
+            type: String,
+            default: ""
+        }
+    },
+    data() {
+        return {
+			isInIsWalletApp: isInIsWalletApp(), // 在 iswallet app 中。
+        }
+    },
+}
+</script>
+<style lang="less" scoped>
+    .other-container {
+        position: relative;
+    }
+    .top {
+        // width: 100vw;
+        width: 100%;
+        height: 54px;
+        flex: 0 0 auto;
+        width: 100%;
+    }
+    .nav {
+        height: 44px;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        align-items: center;
+        position: relative;
+        .title {
+            padding-right: 22px;
+            flex: 1 1 auto;
+            text-align: center;
+            font-size: 17px;
+
+        }
+        .right-btn {
+            position: absolute;
+            right: 20px;
+            font-size: 14px;
+            font-family: Font;
+
+            span {
+                color: inherit;
+            }
+        }
+    }
+    .nav.default {
+        padding: 0 20px;
+        left: 0px;
+        right: 0px;
+        position: fixed;
+        z-index: 200;
+        // top: 0;
+        // width: 100%;
+        background: var(--app-bg-color);
+    }
+    .nav.blue {
+        padding: 0 20px;
+        left: 0px;
+        right: 0px;
+        position: fixed;
+        z-index: 200;
+        top: 0;
+        background: var(--primary-bg-color);
+        .title {
+            color: var(--white) !important;
+        }
+    }
+</style>

package/dist/components/h5Components/PopList.vue

@@ -0,0 +1,82 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author:
+ * @Date: 2021-03-18 23:52:36
+ * @LastEditors: Lewis
+ * @LastEditTime: 2022-08-03 20:05:25
+-->
+<template>
+    <div class='list'>
+        <div :class="['item', itemClass, {'itemActive theme-color': activeI == index}]" v-for='(item, index) in list' :key='index' @click='choose(index)'>
+            {{item}}
+        </div>
+        <div class='cancel-btn' @click="$emit('close')">Cancel</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'pop-list',
+        props: {
+            itemClass: {
+                type: String,
+                default: ''
+            },
+            cancelBtn: {
+                type: Boolean,
+                default: true
+            },
+            list: {
+                type: Array,
+                default: function(){
+                    return []
+                }
+            },
+            activeI: {
+                type: String | Number,
+                default: 0
+            }
+        },
+        data() {
+            return {
+
+            }
+        },
+        methods: {
+            choose(index) {
+                this.$emit('choose', index)
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .list {
+        .item {
+            height: 50px;
+            line-height: 50px;
+            text-align: center;
+            font-size: 16px;
+            font-family: Font;
+            font-weight: 400;
+            text-align: center;
+            color: #708599;
+            box-shadow: 0px -1px 0px 0px #f5f5f5 inset;
+        }
+        .itemActive {
+            color: var(--primary-color);
+        }
+        .cancel-btn {
+            height: 56px;
+            line-height: 56px;
+            border-top: 6px solid #F5F5F5;
+            font-size: 16px;
+            font-family: Font;
+            font-weight: 400;
+            text-align: left;
+            color: #708599;
+            text-align: center;
+        }
+    }
+</style>

package/dist/components/h5Components/SearchInput.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="search_box">
+        <svg-icon @click="search" class="search_icon" icon-class="search"></svg-icon>
+        <input
+            :value="value"
+            @input="$emit('input', $event.target.value)"
+            class="search_input"
+            v-bind="$attrs"
+        >
+    </div>
+</template>
+<script>
+export default {
+    name: "SearchInput",
+    props: {
+        value: String
+    },
+    methods: {
+        search () {
+            this.$emit('search')
+        }
+    },
+}
+</script>
+<style lang="less" scoped>
+    .search_box {
+        height: 36px;
+        border-radius: 18px;
+        background: #F7F7F7;
+        padding: 0 15px;
+        width: 100%;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+        align-items: center;
+        .search_icon {
+            width: 16px;
+            height: 16px;
+            margin-right: 12px;
+            flex: 0 1 auto;
+        }
+        .search_input {
+            flex: 1 1 auto;
+            border: none;
+            background: none;
+            outline: none;
+            height: 20px;
+            line-height: 26px;
+            font-size: 14px;
+            color: #333;
+            font-family: Font;
+        }
+    }
+</style>

package/dist/components/h5Components/SvgCircle.vue

@@ -0,0 +1,104 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: 
+ * @Date: 2021-03-02 17:56:51
+ * @LastEditors: Lewis
+ * @LastEditTime: 2021-03-04 00:34:13
+-->
+<template>
+
+    <div :style='{width: width, height: height}' class='svg-circle'>
+        <svg :width="width" :height="height" class="svg">
+            <circle :r="r" :cy="cy" :cx="cx" :stroke-width="strokeW" :stroke="strokeC" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
+            <circle :r="r" :cy="cy" :cx="cx" :stroke-width="strokeW" :stroke="strokeAc" stroke-linejoin="round" stroke-linecap="round" fill="none" :stroke-dashoffset="dashoffset"  :stroke-dasharray="strokeDashArray" />
+        </svg>
+        <div class='svg-text' :style='{color: strokeAc}'>{{content}}%</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            width: {
+                type: String,
+                default: '150px'
+            },
+            height: {
+                type: String,
+                default: '150px'
+            },
+            r: {
+                type: Number | String,
+                default: 70
+            },
+            cy: {
+                type: Number | String,
+                default: 75                
+            },
+            cx: {
+                type: Number | String,
+                default: 75                
+            },
+            strokeW: {
+                type: Number | String,
+                default: 8
+            },
+            strokeC: {
+                type: String,
+                default: '#EAEFF4'
+            },
+            strokeAc: {
+                type: String,
+                default: '#1593FF'
+            },
+            content: {
+                type: Number,
+                default: 25
+            }
+        },
+        computed: {
+            dashoffset() {
+                return (1- this.content / 100) * Math.PI * 2 * this.r
+            },
+            strokeDashArray() {
+                return Math.PI * 2 * this.r
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    svg {
+        transform: rotate(-90deg);
+    }
+    .progress {
+        animation: rotate 1500ms linear;
+    }
+    @keyframes rotate {
+        from {
+            stroke-dashoffset: 90px;
+        }
+        to {
+            stroke-dashoffset: 0px;
+        }
+    }
+
+    .svg-circle {
+        position: relative;
+        .svg-text {
+            position: absolute;
+            z-index: 2;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 10px;
+            font-family:Font;
+            transform: scale(.8);
+        }
+    }
+</style>