udxcms 1.0.1

package/dist/components/businessComponents/CountryList.vue

@@ -0,0 +1,252 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2020-10-28 10:16:20
+ * @LastEditTime: 2021-08-02 17:30:40
+ * @LastEditors: Lewis
+ * @Description:
+-->
+<template>
+    <div class="list" v-if="value">
+        <div class="input">
+            <input type="text" class="query" v-model="queryWord"/>
+            <svg-icon class="search-icon" icon-class="search"></svg-icon>
+        </div>
+        <div class='CountryBox'>
+            <listTag :List='countryListNew' :itemContentH='44' itemTagFunc='tagCallback' @tagCallback='tagCallback' itemTagStyle='itemTag'>
+                <ul class='ivu-scroll'>
+                    <li v-for="item in countryListNew" :key="item.enName">
+                        <div :id='item.letter'></div>
+                        <div class='li-box'>
+                            <div class='li' v-for="phone in item.code_list" :key='phone.phone_code' @click="select(phone)">
+                                <span class='li-flag'>
+                                    <Flag class="flag" :name="phone.country" :sort='phone.icon' v-if='!phone.icon_url'/>
+                                    <img :src='phone.icon_url' class='flag' v-else/>
+                                </span>
+                                <span class='li-country'>{{phone.country}}</span>
+                                <span class="li-code">+{{phone.phone_code}}</span>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </listTag>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getPhoneCode } from "../../api/common"
+import { isJSON } from "../../utils/parse";
+let closeFn;
+export default {
+    props: {
+        value: {
+            type:Boolean,
+            default: false,
+        }
+    },
+    data() {
+        return {
+            countryList: [
+            ],
+            countryListNew: [],
+            queryWord: "",
+        }
+    },
+    watch: {
+        value: function(val,oldValue) {
+            if(val) {
+                this.queryWord = "";
+            }else {
+                document.removeEventListener('click',closeFn)
+            }
+            closeFn = (e)=>{
+                if(!this.$el.contains(e.target) && !document.querySelector("#areacode").contains(e.target)){
+                    this.$emit('input',false)
+                }
+            }
+            this.$nextTick(()=>{
+                if(val) {
+                    document.addEventListener('click',closeFn)
+                }else {
+                    document.removeEventListener('click',closeFn)
+                }
+            })
+        },
+        queryWord(val) {
+            this.query(val)
+        }
+    },
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            // this.countryList = localStorage.getItem('COUNTRYCODE') && JSON.parse(localStorage.getItem('COUNTRYCODE')) || []
+            this.countryList = []
+            const localCountryCode = localStorage.getItem('COUNTRYCODE');
+            // 判断是否是JSON 字符串
+            if (localCountryCode && isJSON(localCountryCode)) {
+                const res = JSON.parse(localCountryCode);
+                if (Array.isArray(res)) {
+                    this.countryList = res;
+                }
+            }
+            if (this.countryList && this.countryList.length) {
+                localStorage.setItem('COUNTRYCODE', JSON.stringify(this.countryList))
+                this.countryListNew = this.countryList
+                this.sendCountry()
+            }
+            // 不管有没有缓存，都要更新到最新版本数据，避免后台发数据了还是使用缓存
+            getPhoneCode({}).then(res=> {
+                if(res.code==200) {
+                    this.countryList = Object.assign([], res.data);
+                    this.countryListNew = Object.assign([], this.countryList)
+                    localStorage.setItem('COUNTRYCODE', JSON.stringify(this.countryList))
+                    this.sendCountry()
+                    console.log('countryListNew-f:', this.countryListNew)
+                }
+            }).catch(e => e);
+        },
+        tagCallback(val) {
+            console.log('tagCallBack', val)
+        },
+        sendCountry() {
+           if(!this.$store.state.common.countryList.length && this.countryList.constructor.name == 'Array') {
+               let countryList = this.countryList.map(v =>  v.code_list.map(_v => _v.country))
+               this.$store.commit('setCountry', [].concat.apply([], countryList))
+           }
+        },
+        select(item) {
+            this.$emit("on-change",item)
+            this.$emit('input',false)
+        },
+        query(val) {
+            if(!val) {
+                this.countryListNew = this.countryList;
+            }else {
+                let word = val.toLowerCase();
+                let countryList = Object.assign([], this.countryList)
+                this.countryListNew = []
+                countryList.map(item => {
+                    let code_list = item.code_list.filter((_item, index) => {
+                        let resFilter = _item.country.toLowerCase().startsWith(word) || String(_item.phone_code).startsWith(word)
+                        return resFilter
+                    })
+                    if (code_list.length) {
+                        this.countryListNew.push(Object.assign({}, item, {code_list}))
+                    }
+                })
+                // console.log(countryList, this.countryList)
+            }
+        },
+    },
+    beforeDestroy() {
+        document.removeEventListener('click',closeFn)
+    }
+}
+</script>
+
+<style lang="less" scoped>
+    .list {
+        position: absolute;
+        width: 100%;
+        top: 60px;
+        z-index: 10;
+        // height: 383px;
+        // overflow-y: scroll;
+        background: #ffffff;
+        border-radius: 6px;
+        box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.08);
+        padding-bottom: 20px;
+        .input {
+            position: relative;
+            margin-top:10px;
+            width: 100%;
+            box-sizing: border-box;
+            padding: 0 10px;
+            input {
+                display: block;
+                outline: none;
+                width: 100%;
+                height: 48px;
+                padding-left: 50px;
+                box-sizing: border-box;
+                background: #ffffff;
+                border: 1px solid var(--border-color-base);
+                border-radius: 6px;
+                font-size: 16px;
+                font-family: Font;
+                text-align: left;
+                color:var(--text-color);
+                line-height: 48px;
+                letter-spacing: 0px;
+            }
+            input:hover {
+                border: 1px solid var(--primary-color);
+            }
+            .search-icon {
+                width: 17px;
+                height: 17px;
+                position: absolute;
+                color:  rgb(153, 153, 153);
+                left: 24px;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+        .CountryBox {
+            margin-top: 20px;
+            height: 260px;
+        }
+        ul {
+            min-height: 20px;
+            max-height: 220px;
+            .li-box {
+                width: 100%;
+                max-height: 220px;
+                overflow: hidden;
+            }
+            .li {
+                height: 44px;
+                line-height: 24px;
+                padding-bottom: 20px;
+                font-size: 16px;
+                font-family: Font;
+                text-align: left;
+                color: #303133;
+                letter-spacing: 0px;
+                display: flex;
+                align-items: center;
+                flex-wrap: nowrap;
+                cursor: pointer;
+            }
+            .li:hover {
+                color: var(--primary-color);
+            }
+            .flag {
+                width: 18px;
+                height: 18px;
+                border-radius: 50%;
+                margin-left: 16px;
+                margin-right: 20px;
+            }
+            .li-flag {
+                display: inline-block;
+            }
+            .li .li-country {
+                flex: 1;
+                text-align: left;
+            }
+            .li-code {
+                display: inline-block;
+                width: 90px;
+                padding-right: 60px;
+                font-size: 16px;
+            }
+
+        }
+        /deep/ .itemTag {
+            transform: scale(.8);
+        }
+    }
+</style>

package/dist/components/businessComponents/Currency.vue

@@ -0,0 +1,347 @@
+<!--
+ * @Author:
+ * @Date: 2020-11-19 12:38:02
+ * @LastEditTime: 2021-12-16 23:42:13
+ * @LastEditors: Lewis
+ * @Description:
+-->
+
+<template>
+    <div :class="['current-panel', !showCurrency ? 'current-panel-lang' : '']" :style="{top: top + 'px', right: right + 'px', left: left + 'px', position: active ? 'fixed': 'absolute'}" v-if='value'>
+        <div class='current-box'>
+            <div class="current-title">{{$t('index_header_menu_language')}}</div>
+            <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 class='current-box' v-if='showCurrency'>
+            <div class="current-title">{{$t('index_header_menu_currency')}}</div>
+            <div class='current-content current-content-right'>
+                <div :class="['current-item', {'active': currency.name === item.name}]" v-for="item in currencyList" :key="item.id" @click='setCurrencyFunc(item)'>
+                    {{ item.name }}
+                </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'
+    import * as axiosManuel from 'axios';
+    import conf from '@/config/index';
+    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
+            },
+            defaultCurrency: {
+                type: String,
+                default: ''
+            },
+            showCurrency: {
+                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 => console.log(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 = this.defaultCurrency || '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)
+                }
+                this.resetNavigation(lang);
+            },
+            resetNavigation(language) {
+                const hostname = window.location.hostname;
+                axiosManuel(`${conf.sitePath}config/${hostname}/nav_pc-web_${language}.json`).then(res => {
+                    const navRes = res.data;
+                    this.$store.commit('setNavigation', {
+                        header: navRes.nav_common_header_navigation_bar,
+                        footer: navRes.nav_common_footer_navigation_bar,
+                        user: navRes.nav_common_user_navigation_bar,
+                        portfolio: navRes.nav_common_portfolio_navigation_bar
+                    });
+                }).catch(e => e)
+            },
+            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: 362px;
+        box-sizing: border-box;
+        background: var(--popup-bg);
+        z-index: 999;
+        border-radius: var(--border-radius-base);
+        overflow: hidden;
+        // border: 1px solid var(--border-color-base);
+        box-shadow: var(--box-shadow-base);
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        &.current-panel-lang {
+            width: 120px;
+            height: auto;
+            grid-template-columns: 1fr;
+            .current-content {
+                height: auto;
+            }
+        }
+    }
+    .current-title {
+        height: 42px;
+        line-height: 42px;
+        border-bottom: 1px solid var(--border-color-base);
+        padding-left: 14px;
+    }
+    .current-content {
+        height: 320px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        border-right: 1px solid var(--border-color-base);
+    }
+    .current-content-right{
+        // margin-right: 10px;
+    }
+    .current-item {
+        font-size:14px;
+        height: 40px;
+        line-height: 40px;
+        padding-left: 14px;
+        cursor: pointer;
+    }
+    .current-item:hover {
+        background-color: var(--select-item-bg);
+    }
+    .current-item.active {
+        color: var(--link-color);
+        background-color: var(--select-item-bg);
+    }
+    .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: #999;
+        }
+
+        ::-webkit-scrollbar, ::-webkit-scrollbar-track {
+            background-color:  var(--border-color-base);;
+        }
+    }
+</style>