udxcms 1.0.1

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

@@ -0,0 +1,570 @@
+<!--
+ * @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>