udxcms 1.0.1

package/dist/components/businessComponents/Language.vue

@@ -0,0 +1,308 @@
+<!--
+ * @Author:
+ * @Date: 2020-11-19 12:38:02
+ * @LastEditTime: 2021-12-16 23:42:13
+ * @LastEditors: Lewis
+ * @Description:
+-->
+
+<template>
+    <div class='current-panel' :style="{top: top + 'px', right: right + 'px', left: left + 'px', position: active ? 'fixed': 'absolute'}" v-if='value'>
+        <div class='current-box'>
+            <div class='current-content'>
+                <div :class="['current-item', {'active': item.lang === lang}]" v-for="item in langList" :key="item.id" @click='setCurrencyLang(item)'>
+                    {{ item.langName }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { mapState } from 'vuex'
+    import { getCurrency, setCurrency, setLanguage, getLanguages } from '../../api/common'
+    import { refreshEvents } from '../../utils/index'
+    import { getLanguagesPk, updateSiteIcon } from '@/lang'
+    let closeFn
+    export default {
+        name: "currency",
+        props: {
+            top: {
+                type: String,
+                default: '0'
+            },
+            right: {
+                type: String | Number,
+                default: '0'
+            },
+            left: {
+                type: String | Number,
+                default: '0'
+            },
+            value: {
+                type:Boolean,
+                default: false
+            },
+            active: {
+                type:Boolean,
+                default: false
+            },
+            role: {
+                type: String,
+                default: ''
+            },
+            isClickstatus: {
+                type: Boolean,
+                default: true
+            }
+        },
+        computed: {
+            ...mapState('user', ['currency', 'userInfo']),
+            currencyList() {
+                return this.$store.state.cmsstore.currencyList || []
+            }
+        },
+        data() {
+            return {
+                clickCount: 0,
+                langList: [],
+                lang: localStorage.getItem('language')
+            }
+        },
+        created() {
+            if (!this.currencyList.length) {
+                getCurrency().then(res => {
+                    if (res.code == 200) {
+                        let resData = res.data
+                        let currencyList = resData && resData.map(v => v.currency_list)
+                        this.$store.commit('setCurrencyList', [].concat.apply([], currencyList))
+                        this.initCurreny()
+                    }
+                }).catch(e => e)
+            } else {
+                this.initCurreny()
+            }
+            this.getLangList()
+            this.$nextTick(() => {
+                $Vue.$bus.$on('setLang', () => {
+                    this.setLang()
+                })
+            })
+
+        },
+        watch: {
+            value: function(val,oldValue) {
+                if (!val) {
+                    document.removeEventListener('click',closeFn)
+                }
+                let that = this
+                let clickCount = 0
+                closeFn = (e)=>{
+                    let { role } = e.target.dataset
+                    if(role ===  that.role && clickCount % 2 || role != that.role) {
+                        this.closeCallBack()
+                    }
+                    clickCount++
+                }
+                this.$nextTick(()=>{
+                    if(val) {
+                        document.addEventListener('click',closeFn)
+                    }else {
+                        clickCount = 0
+                        document.removeEventListener('click',closeFn)
+                    }
+                })
+            },
+        },
+        methods: {
+            initCurreny(list) {
+                let currenyList = list || this.currencyList
+                let defaultCurreny = 'USD'
+                let detailCurreny = {}
+                if (!Object.keys(this.currency).length) {
+                    detailCurreny = currenyList.find(v => v.name == defaultCurreny)
+                    detailCurreny && this.$store.commit('user/setCurrency', detailCurreny)
+                    let currency = this.currency.name
+                    this.$store.dispatch('getCurrencyDataByTime', currency)
+                    this.$emit('input', false)
+                    this.isClickstatus = false
+                }
+            },
+            setCurrencyFunc(item) {
+                if (!this.userInfo.id) {
+                    this.$store.commit('user/setCurrency', item)
+                    let currency = item.name
+                    // if (this.isClickstatus) this.$emit('input', false)
+                    this.$store.dispatch('getCurrencyDataByTime', currency)
+                    this.$emit('input', false)
+                    this.isClickstatus = false
+                    refreshEvents(['currency'])
+                } else {
+                    let currency = item.name
+                    setCurrency(currency).then(res => {
+                        if (res.code == 200) {
+                            this.$store.commit('user/setCurrency', item)
+                            // if (this.isClickstatus) this.$emit('input', false)
+                            this.$store.dispatch('getCurrencyDataByTime', currency)
+                            refreshEvents(['currency'])
+                            this.$emit('input', false)
+                            this.isClickstatus = false
+                        }
+                    }).catch(err => {
+                        // let msg = err.message
+                        // this.$Powx.toast.show(msg)
+                    })
+                }
+            },
+            closeCallBack() {
+                if (this.isClickstatus) this.$emit('input', false)
+            },
+            setCurrencyLang(item) {
+                let lang = item.lang
+                if (this.lang === lang) return
+                if (this.userInfo.id) {
+                    this.setLang(lang).then(res => {
+                        this.setLangFun(lang)
+                    }).catch(e => e)
+                } else {
+                    localStorage.setItem('language', lang)
+                    localStorage.setItem('updateLanguage', 1)
+                    this.setLangFun(lang)
+                }
+            },
+            setLangFun(lang) {
+                let toName = this.$route.fullPath.split('/')[1]
+                this.lang = lang
+                let i18nArr = ['pc-web']
+                getLanguagesPk(i18nArr,()=>{
+                    let langObj = this.langList.filter(v => v.lang === this.lang)[0] || {}
+                    updateSiteIcon()
+                    this.$emit('setLang', langObj.langName || this.lang)
+                    if (toName.length) {
+                        window.location.reload()
+                    } else {
+                        $Vue.$bus.$emit('refreshIndex')
+                        this.$nextTick(() => {
+                            $Vue.$bus.$emit('updateNavList')
+                        })
+                    }
+                })
+            },
+            setLang(lang) {
+                let local_lang = lang || localStorage.getItem('language')
+                return new Promise((resolve, reject) => {
+                    setLanguage({language: local_lang}).then(res => {
+                        if (res.code == 200) {
+                            localStorage.removeItem('updateLanguage')
+                            localStorage.setItem('language', local_lang)
+                            resolve(res)
+                        } else {
+                            reject(0)
+                        }
+                    }, ref => {
+                        reject(0)
+                    }).catch(err => reject(0))
+                })
+            },
+            async getLangList() {
+                try {
+                    let langList = JSON.parse(sessionStorage.getItem('languageList')) || []
+                    this.langList = langList
+                } catch (error) {
+                    this.langList = []
+                }
+                this.langList = window['site_config']['languages'] || []
+                sessionStorage.setItem('languageList', JSON.stringify(this.langList))
+                // if (!this.langList.length) {
+                //     await getLanguages().then(res => {
+                //         if (res.code == 200) {
+                //             sessionStorage.setItem('languageList', JSON.stringify(res.data))
+                //             this.langList = res.data;
+                //         } else {
+                //             this.langList = []
+                //         }
+                //     }).catch(err => {
+                //         this.langList = []
+                //     })
+                // }
+                this.lang = localStorage.getItem('language')
+                if (!this.lang) {
+                    let langObj = this.langList.filter(v => v.baseLang)[0] || {}
+                    this.lang = langObj.lang
+                    this.$emit('setLang', langObj.langName)
+                } else {
+                    let langObj = this.langList.filter(v => v.lang === this.lang)[0] || {}
+                    this.$emit('setLang', langObj.langName || this.lang)
+                }
+            }
+        },
+        beforeDestroy() {
+            document.removeEventListener('click',closeFn)
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .current-panel {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 320px;
+        // height: 385px;
+        box-sizing: border-box;
+        background: #21262C;
+        z-index: 999;
+        border-radius: 6px;
+        // border: 1px solid var(--border-color-base);
+        // box-shadow: 0px 4px 12px 0px rgba(17,51,83,0.02);
+        // display: flex;
+    }
+    .current-content {
+        max-height: 320px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        // width: 150px;
+        // padding-top: 20px;
+        margin: 20px 20px 20px 30px;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        column-gap: 20px;
+    }
+    .current-title {
+        height: 42px;
+        line-height: 42px;
+        color: #1F2126;
+        border-bottom: 1px solid var(--border-color-base);
+    }
+    .current-item {
+        font-size:14px;
+        height: 32px;
+        line-height: 32px;
+        font-family: Font;
+        // margin-bottom: 18px;
+        color: #fff;
+        cursor: pointer;
+    }
+    .current-item:hover {
+        color: rgba(255, 255, 255, 0.82);
+    }
+    .current-item.active {
+        color: rgba(255, 255, 255, 0.82);
+    }
+    .current-panel {
+        ::-webkit-scrollbar {
+            width: 4px;
+            height: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            border-radius: 2px;
+            // box-shadow: inset 0 0 2px rgba(0,0,0,.2)
+            background-color: var(--primary-color);
+        }
+
+        ::-webkit-scrollbar, ::-webkit-scrollbar-track {
+            background-color:  var(--border-color-base);;
+        }
+    }
+</style>

package/dist/components/businessComponents/List.vue

@@ -0,0 +1,177 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2020-11-06 10:08:52
+ * @LastEditTime: 2022-07-15 15:13:00
+ * @LastEditors: Lewis
+ * @Description:
+-->
+<template>
+    <div class="table-content">
+        <!-- Table:max-height="data.length && height || ''" -->
+        <a-table
+            :class="{'emptyTable': data.length==0, }"
+            size="small"
+            :columns="newCol"
+            :pagination="false"
+            :rowKey="(record) => (record.id || record.txid)"
+            :dataSource="newData"
+            no-data-text=''
+            :show-header='!hideHead'
+        >
+        </a-table>
+        <div class="empty" v-show="data.length==0">
+            <img :src="require('../../assets/img/empty.png')" alt="">
+            <p>{{$t('common_base_no_record_found')}}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        data: {
+            type: Array,
+            default: function() {
+                return [];
+            }
+        },
+        columns:{
+            type: Array,
+            default: function() {
+                return [];
+            }
+        },
+        limit: {
+            type: Number,
+            default: 0
+        },
+        hideHead: {
+            type: Boolean,
+            default: false
+        },
+        height: {
+            type: String | Number,
+            default: ''
+        }
+    },
+    computed: {
+        newCol: function() {
+            return this.columns;
+        },
+        newData() {
+            return this.limit && this.data.slice(0, this.limit) || this.data
+        }
+    },
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+    .table-content {
+        /deep/ .ant-table-wrapper {
+            border-radius: 6px;
+            border-color: var(--border-color-base);
+        }
+        /deep/ th .ant-table-cell {
+            line-height: 16px;
+        }
+        /deep/ .ant-table:before,/deep/ .ant-table:after {
+            background-color:var(--border-color-base);
+        }
+        /deep/ .ant-table-body tr td {
+            padding: 0;
+        }
+        /deep/ .ant-table-body tr td {
+            padding: 28px 0;
+        }
+        /deep/ .ant-table-small th {
+            height: 42px;
+            font-size: 14px;
+            font-family: Font;
+            color: var(--text-color-placeholder);
+            line-height: 18px;
+        }
+        /deep/ .ant-table-small th:first-child .ivu-table-cell {
+            padding-left: 40px;
+        }
+        /deep/ .ant-table td,/deep/ .ant-table th {
+            border-color:var(--border-color-base);
+        }
+        /deep/ .ant-table td.tableMore, /deep/ .ant-table th.tableMore {
+            display: none;
+        }
+        /deep/ .ant-table-small td {
+            padding:28px 0;
+            font-size: 16px;
+            font-family: Font;
+            color: var(--text-color);
+            line-height: 18px;
+        }
+        /deep/ .ant-table-small tr:last-child td:first-child {
+            border-radius: 0 0 0 6px;
+        }
+        /deep/ .ant-table-small tr:last-child td:last-child {
+            border-radius: 0 0 6px 0;
+        }
+        /deep/ .ant-table-small td:first-child .ant-table-cell {
+            padding-left: 40px;
+        }
+        /deep/ .ant-table-small tr:hover td{
+            background: var(--card-bg-color);
+        }
+    }
+    .emptyTable {
+        /deep/ .ant-table-tip {
+            display: none;
+        }
+    }
+    .empty {
+        margin-top: 80px;
+        text-align: center;
+        img {
+            width: 100px;
+            height: 100px;
+        }
+        p {
+            text-align: center;
+            margin-top: 12px;
+            font-size: 16px;
+            font-family: Font;
+            color: #c0c3cc;
+            line-height: 16px;
+        }
+    }
+    /deep/ .action~.action {
+        margin-top: 10px;
+    }
+    /deep/ .action {
+        display: flex;
+        span:first-child {
+            display:inline-block;
+            text-align: right;
+            margin-right: 30px;
+            width: 125px;
+            font-size: 16px;
+            font-family: Font;
+            color: var(--text-color-placeholder);
+            line-height: 16px;
+            flex: 0 0 auto;
+        }
+    }
+    /deep/ .status .processing {
+        margin-top: 6px;
+        font-size: 16px;
+        font-family: Font;
+        text-align: center;
+        color: var(--text-color-placeholder);
+        line-height: 16px;
+        .already {
+            color: var(--text-color);
+        }
+    }
+</style>

package/dist/components/businessComponents/ListSelect.vue

@@ -0,0 +1,164 @@
+<template>
+    <div class='list-select'>
+        <div class="select" @click="changeItemBox = true" :style="styleConf">
+            <span class="select-name" v-if='!showSlot'>{{value}}</span>
+            <span v-if='showSlot'>
+                <slot></slot>
+            </span>
+            <svg-icon :class="{'icon-down':true, active: changeItemBox}" icon-class="arrow-down-w"></svg-icon>
+        </div>
+        <div :class="'drop-down'" :style="styleDropDownConf" v-if="changeItemBox">
+            <ul>
+                <li v-for="(item, index) in list" :key="index" :class="{'active': item.value == value}" @click="select(item)">
+                    <span class="name">{{item.label}}</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    let closeFn
+    export default {
+        name: 'listSelect',
+        props: {
+            value: {
+                type: String | Number,
+                default: ''
+            },
+            list: {
+                type: Array,
+                default: function() {
+                    return []
+                }
+            },
+            styleConf: {
+                type: Object,
+                defualt: () => {
+                    return {
+                        minWidth: '100px',
+                        height: '40px',
+                        borderColor: '',
+                        borderRadius: '6px',
+                    }
+                }
+            },
+            styleDropDownConf: {
+                type: Object,
+                default: () => {
+                    return {
+                        minWidth: '100px',
+                        borderRadius: '6px',
+                        // background: 'var(--trade-border-color-base)'
+                    }
+                }
+            },
+            showSlot: {
+                type: Boolean,
+                default: false
+            }
+        },
+        watch: {
+            changeItemBox: function(val) {
+                if(val) {
+                } else {
+                    document.removeEventListener('click', closeFn)
+                }
+                closeFn = (e)=>{
+                    if(!this.$el.contains(e.target)){
+                        this.changeItemBox = false
+                    }
+                }
+                this.$nextTick(()=>{
+                    if (val) {
+                        document.addEventListener('click',closeFn)
+                    } else {
+                        document.removeEventListener('click',closeFn)
+                    }
+                })
+            }
+        },
+        data() {
+            return {
+                changeItemBox: false
+            }
+        },
+        methods: {
+            select(item) {
+                this.changeItemBox = false
+                this.$emit('input', item.value)
+                this.$emit('change', item)
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .list-select {
+        position: relative;
+    }
+    .select {
+        cursor: pointer;
+        border: 1px solid transparent;
+        display: flex;
+        align-items: center;
+        .select-name {
+            white-space: nowrap;
+        }
+        span {
+            font-size: 12px;
+            font-family: Font;
+            text-align: left;
+            color: var(--text-color);
+        }
+        
+        .icon-down {
+            width: 18px;
+            height: 18px;
+            margin-left: auto;
+            transition: .3s;
+            transform-origin: center center;
+            color: var(--text-color);
+        }
+        .icon-down.active {
+            transform: rotate(180deg);
+        }
+    }
+    .drop-down {
+        padding: 4px 0; 
+        position: absolute;
+        z-index: 9;
+        top: 110%;
+        background: var(--popup-bg);
+        ul {
+            li {
+                height: 28px;
+                padding: 8px 12px;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                .name {
+                    white-space: nowrap;
+                }
+                span {
+                    font-size: 14px;
+                    font-family: Font;
+                    text-align: left;
+                    color: var(--text-color-placeholder);
+                    line-height: 1;
+                }
+            }
+            li:hover {
+                span {
+                   color: var(--text-color-secondary);
+                }
+            }
+            li.active {
+                background: var(--trade-border-color-base);
+                span {
+                    color: var(--text-color);
+                }
+            }
+        }
+    }
+</style>