udxcms 1.0.9 → 1.0.10

package/dist/components/cmsComponents/dapps/Dapp.vue

@@ -1,570 +0,0 @@
-<!--
- * @Descripttion:
- * @version:
- * @Author:
- * @Date: 2021-08-09 17:53:35
- * @LastEditors: Lewis
- * @LastEditTime: 2022-03-22 16:15:57
--->
-<template>
-    <div class='dapp'>
-        <div class="section-one-container">
-            <div class="section-one">
-                <div class="cms-container">
-                    <div class="text-title">{{$t('cms_dapp_home_title')}}</div>
-                    <div class="text-content">{{$t('cms_dapp_home_subtitle')}}</div>
-                </div>
-                <div class='dapp-content-search'>
-                    <a-input ref="search" v-model="dappSearch" placeholder="Search">
-                        <a-icon slot="prefix" type="search" />
-                    </a-input>
-                </div>
-            </div>
-            <img :src="isPhone ? require('../../../assets/h5.png') : require('../../../assets/img-bg.png')" alt="" class='img'/>
-        </div>
-        <div class="section-two-container">
-            <div class='apps-items my-apps'>
-                <dapp-list :showCount='baseShow' :total="myDappsTest.length > baseShow ? myDappsTest.length : baseShow" :dataList='myDappsTest' class='apps-items-list' :title="$t('cms_dapp_my_dapps')" @changeItem='changeItem' @delItem='delItem' :showDel='true'></dapp-list>
-            </div>
-            <div class='apps-items hot-apps'>
-                <dapp-list :showCount='baseShow' :total="hotDapplist.length > baseShow ? hotDapplist.length : baseShow" :dataList='hotDapplist' class='apps-items-list' :title="$t('cms_dapp_hot_dapps')"></dapp-list>
-            </div>
-        </div>
-        <div class="section-three-container">
-            <a-tabs v-model="tagId" @change="changeTag">
-                <a-tab-pane :key="item.name" :tab="item.name" v-for='(item) in tagList'>
-                </a-tab-pane>
-            </a-tabs>
-        </div>
-        <div class='dapp-content'>
-            <div v-if='!loading' class='content'>
-                <div class='dapp-items' v-if='dappsList.length'>
-                    <div v-for='(item, index) in dappsList' :key='index' :class="['dapp-item']"  @click='goDetail(item)'>
-                        <div class='img-b'>
-                            <img :src="item.image_url" alt="" />
-                        </div>
-                        <div class='dapp-brief'>
-                            <div class='title'>{{item.title}}</div>
-                            <div class='brief'>{{item.brief}}</div>
-                        </div>
-                    </div>
-                </div>
-                <List :hideHead='true' :height='300' :data=[] v-if='!dappsList.length'></List>
-            </div>
-
-            <div v-else class='loading'>
-                <SiteLoading v-show='loading' />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import { loadImportScript, isPhone, isInIsWalletApp } from '../../../utils/index'
-    import conf from '../../../config/index'
-    import { getBlocksOverview } from '../../../api/common'
-    import DappList from './Dapplist.vue'
-    export default {
-        name: 'dapp',
-        components: {
-            DappList
-        },
-        data() {
-            return {
-                storeList: [],
-                storeInitList: [],
-                tags: [],
-                tagId: '',
-
-                blockOverview: {},
-                dappSearch:  '',
-                isPhone: isPhone(),
-                loading: false,
-                activeTagIndex: -1,
-                activeText: '',
-                activeTagNames: [],
-                tagList: [],
-                myDappsList: [],
-                hotDappsList: [],
-                baseShow: 4,
-                myDappsTest: []
-            }
-        },
-        computed: {
-            myDapplist() {
-                return this.myDappsList.filter(v => {
-                    return v.title.includes(this.dappSearch) || !this.dappSearch
-                })
-            },
-            hotDapplist() {
-                return this.hotDappsList.filter(v => {
-                    return v.title.includes(this.dappSearch) || !this.dappSearch
-                })
-            },
-            dappsList() {
-                return this.storeList.filter(v => {
-                    let tags = v.tags.map(tag => tag.name)
-                    return (v.title.includes(this.dappSearch) || !this.dappSearch) && tags.includes(this.tagId)
-                })
-            },
-            // baseShow(){
-            //     let innerWidth = window.innerWidth;
-            //     let showAccount = 4
-            //     showAccount += Math.round((innerWidth - 768) / 160)
-            //     return  showAccount
-            // }
-        },
-        created() {
-            window.addEventListener("resize", () => {
-				let baseShow = 4 + Math.round((innerWidth - 768) / 160)
-                this.baseShow = baseShow < 4 ? 4 : baseShow
-			});
-            this.initNavList()
-        },
-        mounted() {
-            this.getDappList()
-            this.getTaglist()
-            // this.getBlocksOverview()
-        },
-        watch: {
-            activeTagNames(val) {
-                if (!(val.length)) this.storeList = this.storeInitList
-                else this.storeList = this.storeInitList.filter(v => {
-                    return this.isSameItem(val, v.tagList)
-                })
-            },
-            myDapplist() {
-                this.initNavList()
-            },
-            dappSearch() {
-                this.initNavList()
-            }
-        },
-        methods: {
-            changeItem(changeData) {
-                let {item, index} = changeData
-                item.imgIndex++
-                item.image_url = item.imgArr[item.imgIndex]
-                if (item.image_url) this.$set(this.myDappsTest, index, item)
-            },
-            initNavList() {
-                let links = this.myDapplist.map(v => v.link).filter(v => v) || []
-                let favList = window.__mmFavorites || []
-                let myDappsTest = [].concat(this.myDapplist, favList.filter(v => !links.includes(v.url)))
-                this.myDappsTest = myDappsTest.map(v => {
-                    v.url =  v.url || v.link
-                    let hostname = v.url && (new URL(v.url)).hostname || ''
-                    let siteName = hostname.split('.')[1]
-                    v.imgArr = [v.url + '/favicon.ico']
-                    v.imgArr.push(require('../../../assets/default-site-icon.png'))
-                    v.imgIndex = 0
-                    v.image_url = v.image_url || v.imgArr[0]
-                    v.name = (v.name.includes('https') || v.name.includes('http')) ? siteName : v.name
-                    v.title = v.title || v.name
-                    return v
-                }).filter(v => {
-                    return (v.name.includes(this.dappSearch) || v.title.includes(this.dappSearch) || !this.dappSearch)
-                })
-                console.log('this.myDappsTest:', this.myDappsTest)
-            },
-            getDappList() {
-                // let hostname = window.mainHostname;
-                let hostname = location.hostname
-                let lang = localStorage.getItem('language')
-                let src = `${conf.sitePath}${hostname}/${lang}/app_store/all/classify_tree.js`
-                this.loading = true
-                let timeDate = new Date()
-                let time = '' + timeDate.getFullYear() + timeDate.getMonth() + timeDate.getDate()
-                loadImportScript(`${conf.sitePath}${hostname}/${lang}/app_store/all/classify_tree.js?time=${time}`, null, 'message').then(res => {
-                    console.log('message', res)
-                    let dappsList = res || []
-                    let storeList = []
-                    let tags = []
-                    dappsList.map(v => {
-                        if (v.content) {
-                            storeList = storeList.concat(v.content)
-                        }
-                        if (v.name == 'mydapps') {
-                            this.myDappsList = v.content || []
-                        } else if (v.name == 'hotdapp') {
-                            this.hotDappsList = v.content || []
-                        }
-                    })
-                    this.storeList = storeList.map(v => {
-                        v.tagList = v.tags && v.tags.map(tag => {
-                            return tag.name
-                        }) || []
-                        if (v.tagList.length) tags = tags.concat(v.tagList)
-                        return v
-                    })
-                    this.storeInitList = Object.assign([], this.storeList)
-                    this.tags = Array.from(new Set(tags))
-                    console.log('this.storeList', this.storeList, this.tags)
-                    this.loading = false
-                }).catch(e => e)
-            },
-            getTaglist() {
-                let hostname = window.location.hostname
-                let src = `${conf.sitePath}${hostname}/all/app_store/all/all_tag.js`
-                loadImportScript(src, null, 'message').then(res => {
-                    console.log('getTaglist', res)
-                    this.tagList = Object.assign([], res).sort((a, b) => a.sort - b.sort)
-                    this.tagId = this.tagList[0].name
-                }).catch(e => e)
-            },
-            dealTag(item, index) {
-                this.activeTagIndex = index
-                let dealIndex = this.activeTagNames.indexOf(item.name)
-                if (dealIndex >= 0) {
-                    this.activeTagNames.splice(dealIndex, 1)
-                } else {
-                    this.activeTagNames.push(item.name)
-                }
-            },
-            showItemFunc(item) {
-                let tagsName = item.tags.map(v => v.name)
-                let res = false
-                this.activeTagNames.map(v => {
-                    if (tagsName.includes(v)) {
-                        res = true
-                    }
-                })
-                return res
-            },
-            goDetail(dappItem, item) {
-                if (dappItem.link) {
-                    if(isInIsWalletApp()) {
-                        window.location.href = dappItem.link
-                    } else {
-                        window.open(dappItem.link,  '_blank')
-                    }
-                }
-            },
-            // getBlocksOverview() {
-            //     let currency_symbol, currency_name
-            //     if (this.isPhone) {
-            //         let userCurrency = this.$store.state.user.currency || {}
-            //         if (Object.keys(userCurrency).length) {
-            //             let { name, symbol } = userCurrency
-            //             currency_symbol = symbol || '$'
-            //             currency_name = name || 'USD'
-            //         } else {
-            //             currency_symbol = this.$store.state.selCurrencySymbol
-            //             currency_name = this.$store.state.selCurrency
-            //         }
-            //     } else {
-            //         let userCurrency = this.$store.state.user.currency || {}
-            //         let { name, symbol } = userCurrency
-            //         currency_symbol = symbol || '$'
-            //         currency_name = name || 'USD'
-            //     }
-
-            //     getBlocksOverview({currency_symbol:currency_symbol, currency_name:currency_name}).then(res => {
-            //         if (res.code == 200) {
-            //             this.blockOverview = res.data || {}
-            //             console.log('blockOverview', blockOverview)
-            //         }
-            //     }).catch(e => e)
-            // },
-            isSameItem(arr, dealArr) {
-                let resArr = arr.concat(dealArr)
-                let dealResArr = Array.from(new Set(resArr))
-                return resArr.length !== dealResArr.length
-            },
-            async delItem(index) {
-                this.myDappsTest.splice(index, 1)
-                window.__mmFavorites = this.myDappsTest
-                var delFavorite = await window.ethereum.request({
-                    method: 'iswallet_removeFavorite'
-                })
-                console.log('delfavorite:', delFavorite)
-                return
-            },
-            changeTag() {
-
-            }
-        }
-    }
-</script>
-
-<style lang="less" scoped>
-/* iphone6 7 8 */
-.dapp {
-    padding-bottom: 20px;
-    .section-one-container {
-        position: relative;
-        width: 100%;
-        padding-top: 88%;
-        background: linear-gradient(180.27deg, black 56.3%, #E5087E 210.85%);
-        // overflow: hidden;
-        .img {
-            position: absolute;
-            z-index: 1;
-            width: calc(100vw - 40px);
-            height: auto;
-            margin-top: 0;
-            transform: translateX(-50%);
-            bottom: 0;
-            left: 50%;
-        }
-        .section-one {
-            position: absolute;
-            z-index: 2;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            display: grid;
-            justify-content: center;
-            align-content: flex-start;
-            .cms-container {
-                margin-top: 60px;
-                width: 100%;
-                text-align: center;
-                padding: 20px;
-                .text-title  {
-                    font-size: 36px;
-                    line-height: 54px;
-                    font-weight: 600;
-                    color: white;
-                    font-family: Font;
-                }
-                .text-content {
-                    margin-top: 16px;
-                    line-height: 24px;
-                    font-size: 16px;
-                    font-family: Font;
-                    color: white;
-                    word-break: break-word;
-                }
-            }
-            .dapp-content-search {
-                width: 100%;
-                position: absolute;
-                bottom: -24px;
-                padding: 0 20px;
-                /deep/ .ant-input-affix-wrapper {
-                    height: 48px;
-                    background: white;
-                    border-radius: 66px;
-                    border: 1px solid white;
-                    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
-                    .ant-input-prefix {
-                        color: #3D5066;
-                        font-size: 16px;
-                    }
-                    .ant-input {
-                        background: white;
-                        height: 48px;
-                        color: #3D5066;
-                        font-size: 16px;
-                        border-radius: 24px;
-                    }
-                }
-            }
-        }
-    }
-}
-.section-two-container {
-    width: 100%;
-    padding: 0 20px;
-    margin-top: 40px;
-    .apps-items {
-        width: 100%;
-        margin-top: 20px;
-    }
-}
-
-.section-three-container {
-    width: 100%;
-    padding: 0 0px;
-    margin-top: 20px;
-    /deep/ .ant-tabs {
-        max-width: 100vw;
-    }
-    /deep/ .ant-tabs-bar {
-        border-bottom: none;
-        margin: 0;
-        border-bottom: 1px solid transparent;
-    }
-
-    /deep/ .ant-tabs-nav .ant-tabs-tab {
-        color: #6C757D;
-        padding: 8px 0px;
-        font-size: 16px;
-        margin-right: 46px;
-    }
-    /deep/ .ant-tabs-nav .ant-tabs-tab-active {
-        color: var(--primary-color);
-    }
-    /deep/ .ant-tabs-ink-bar {
-        background-color: var(--primary-color);
-        height: 3px;
-    }
-}
-
-.dapp-content {
-    width: 100%;
-    padding: 0px 20px;
-    margin-top: 16px;
-    margin-bottom: 100px;
-    .content {
-        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
-        border-radius: 12px;
-        min-height: 300px;
-        padding: 20px;
-    }
-    .dapp-items {
-        display: grid;
-        gap: 20px;
-        grid-template-columns: repeat(1,  1fr);
-        justify-content: flex-start;
-        justify-items: flex-start;
-        .dapp-item {
-            display: flex;
-            align-items: flex-start;
-            justify-content: flex-start;
-            .img-b {
-                width: 60px;
-                height: 60px;
-                // padding: 8px;
-                border-radius: 16px;
-                // border: 1px solid #F1F1F1;
-                box-shadow: 1px 1px 4px #dfdfdf;
-                img {
-                    width: 60px;
-                    height: 60px;
-                }
-            }
-            .dapp-brief {
-                padding-left: 10px;
-                padding-bottom: 25px;
-                border-bottom: 1px solid #F1F1F1;
-                .title {
-                    margin-top: 5px;
-                    font-size: 16px;
-                    line-height: 24px;
-                    color: var(--text-color);
-                    font-family: FontMedium;
-                }
-                .brief {
-                    margin-top: 4px;
-                    font-size: 14px;
-                    line-height: 20px;
-                    color: #6C757D;
-                }
-            }
-        }
-    }
-}
-@media screen and (min-width: 1080px) {
-    .dapp {
-        .section-one-container {
-            padding-top: 22%;
-            overflow: hidden;
-            .img {
-                width: auto;
-                height: calc(100% + 20px);
-                margin-top: -20px;
-            }
-            .section-one {
-                align-content: center;
-                .cms-container {
-                    margin-top: 0;
-                    width: 650px;
-                    padding: 0px;
-                }
-                .dapp-content-search {
-                    width: 650px;
-                    margin-top: 24px;
-                    position: relative;
-                    padding: 0;
-                    /deep/ .ant-input-affix-wrapper {
-                        box-shadow: none;
-                        background: none;
-                        .ant-input-prefix {
-                            color: white;
-                        }
-                        .ant-input {
-                            background: none;
-                            color: white;
-                        }
-                    }
-                }
-            }
-        }
-    }
-    .section-two-container {
-        padding: 0 120px;
-        margin-top: 0;
-        .apps-items {
-            margin-top: 28px;
-        }
-    }
-
-    .section-three-container {
-        padding: 0 120px;
-        margin-top: 28px;
-    }
-
-    .dapp-content {
-        padding: 0px 120px;
-        margin-bottom: 300px;
-        .content {
-            padding: 32px;
-        }
-        .dapp-items {
-            gap: 24px;
-            grid-template-columns: repeat(3, minmax(300px, 1fr));
-            .dapp-item {
-                display: flex;
-                .img-b {
-                    width: 80px;
-                    height: 80px;
-                    // padding: 8px;
-                    border-radius: 16px;
-                    // border: 1px solid #F1F1F1;
-                    box-shadow: 1px 1px 4px #dfdfdf;
-                    img {
-                        width: 80px;
-                        height: 80px;
-                    }
-                }
-            }
-        }
-    }
-}
-@media screen and (min-width: 1440px) {
-    /* iphone6 7 8 */
-    .dapp {
-        .section-one-container {
-            padding-top: 0;
-            height: 320px;
-            overflow: hidden;
-        }
-    }
-
-
-    .dapp-content {
-        .dapp-items {
-            gap: 28px;
-            grid-template-columns: repeat(3, minmax(360px, 1fr));
-            .dapp-item {
-                display: flex;
-            }
-        }
-    }
-}
-
-@media screen and (min-width: 1560px) {
-    .dapp-content {
-        .dapp-items {
-            gap: 32px;
-            grid-template-columns: repeat(3, minmax(400px, 1fr));
-            .dapp-item {
-                display: flex;
-            }
-        }
-    }
-}
-</style>