udxcms 1.0.1

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

@@ -0,0 +1,543 @@
+Dapp.vue
+
+<!--
+ * @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 visible-pc">
+            <div class="cms-container section-one">
+                <div class="text-wrap">
+                <div class="text-title">{{$t('cms_dapp_home_title')}}</div>
+                <div class="text-content">
+                    {{$t('cms_dapp_home_description')}}
+                </div>
+                </div>
+                <div class="img-wrap">
+                <img :src="require('../../../assets/img/cms/dapps.png')" alt="" />
+                </div>
+            </div>
+            <div class='dapp-content-tags visible-pc'>
+                <div class='tags'>
+                    <span :class="['tag-item', activeTagNames.indexOf(item.name) != -1 && 'active']" v-for="(item, index) in tagList" :key='index' @click='dealTag(item, index)'>
+                        <span>{{item.name}}</span>
+                        <img :src="require('../../../assets/img/add-icon.svg')" alt="" v-if='activeTagNames.indexOf(item.name) == -1'/>
+                        <img :src="require('../../../assets/img/add-right-icon.svg')" alt="" v-else/>
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class='section-two-container visible-h5'>
+            <div class="text-title">{{$t('cms_dapp_home_title')}}</div>
+            <div class="text-content">
+                {{$t('cms_dapp_home_description')}}
+            </div>
+            <div class='tags'>
+                <span :class="['tag-item', activeTagNames.indexOf(item.name) != -1 && 'active']" v-for="(item, index) in tagList" :key='index' @click='dealTag(item, index)'>
+                    <span>{{item.name}}</span>
+                    <img :src="require('../../../assets/img/add-icon.svg')" alt="" v-if='activeTagNames.indexOf(item.name) == -1'/>
+                    <img :src="require('../../../assets/img/add-right-icon.svg')" alt="" v-else/>
+                </span>
+            </div>
+        </div>
+        <div class='dapp-content'>
+            <div class='dapp-items' v-if='storeList.length && !loading'>
+                <div v-for='(item, index) in storeList' :key='index' :class="['dapp-item']"  @click='goDetail(item)'>
+                    <div class='cover' :style="{'background-image': 'url(' + item.image_url + ')'}">
+                        <div class='dapp-item-tags'>
+                            <div class='tag' v-for='(tagItem, tagIndex) in item.tagList' :key='tagIndex'>
+                                <span>{{tagItem}}</span>
+                            </div>
+                            <div class='tag' v-if='blockOverview.average_APY'>
+                                <span>ROE:</span>
+                                <span class='red'>{{blockOverview.average_APY || '0%'}}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class='dapp-brief'>
+                        <div class='title'>{{item.title}}</div>
+                        <div class='brief'>{{item.brief}}</div>
+                    </div>
+                </div>
+            </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'
+    export default {
+        name: 'dapp',
+        data() {
+            return {
+                storeList: [],
+                storeInitList: [],
+                tags: [],
+                blockOverview: {},
+                isPhone: isPhone(),
+                loading: false,
+                activeTagIndex: -1,
+                activeText: '',
+                activeTagNames: [],
+                tagList: []
+            }
+        },
+        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)
+                })
+            }
+        },
+        methods: {
+            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)
+                        }
+                    })
+                    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)
+                }).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
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+.section-one {
+  padding-top: 60px;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+  align-items: center;
+  justify-items: stretch;
+  padding-bottom: 10px;
+  background: var(--text-color-six);
+  max-width: 100%;
+  .text-wrap {
+    padding: 30px 20px;
+    max-width: 100%;
+    .text-title {
+      font-size: 30px;
+      font-family: FontSemiBold;
+      color: white;
+      line-height: 36px;
+      margin-bottom: 12px;
+      max-width: 100%;
+    }
+    .text-content {
+      font-size: 18px;
+      font-family: Font;
+      color: white;
+      line-height: 26px;
+      margin-bottom: 18px;
+      max-width: 100%;
+    }
+  }
+  .img-wrap {
+    width: 100%;
+    padding: 30px;
+    max-width: 100%;
+    img {
+      width: 100%;
+      max-width: calc(100vw - 60px);
+    }
+  }
+}
+/* iphone6 7 8 */
+.dapp {
+    padding-bottom: 20px;
+    .section-one-container {
+        position: relative;
+        .dapp-content-tags {
+            position: absolute;
+            z-index: 2;
+            width: 100%;
+            bottom: 120px;
+            .tags {
+                margin-top: 48px;
+                text-align: center;
+                .tag-item {
+                    border-radius: 18px;
+                    padding: 8px 12px;
+                    background: white;
+                    color: #6C757D;
+                    font-family: Poppins;
+                    font-size: 14px;
+                    margin-right: 16px;
+                    margin-bottom: 16px;
+                    img {
+                        width: 12px;
+                        height: 12px;
+                        margin-left: 5px;
+                    }
+                    &.active {
+                        background: rgba(229, 8, 126, 1);
+                        color: white;
+                    }
+                }
+            }
+        }
+    }
+    .dapp-content {
+        .loading {
+            padding-top: 100px;
+        }
+        .dapp-items {
+            display: grid;
+            gap: 20px;
+            min-height: 200px;
+        }
+        .dapp-item {
+            margin: 0 20px;
+            border-radius: 12px;
+            overflow: hidden;
+            position: relative;
+            .cover {
+                padding-top: 50%;
+                // border-radius: 12px 12px 0 0;
+                // background-color: #eee;
+                background-position: center center;
+                background-repeat: no-repeat;
+                background-size: cover;
+            }
+        }
+    }
+    .dapp-item-box {
+        padding: 0 20px;
+        margin-bottom: 40px;
+    }
+    .dapp-logo {
+        text-align: center;
+        max-width: 100%;
+        img {
+            display: inline-block;
+            width: 30px;
+        }
+    }
+    .title {
+        max-width: 100%;
+        font-family: FontMedium;
+
+        text-align: center;
+    }
+    .dapp-logo-title {
+        margin-top: 24px;
+        font-size: 24px;
+        line-height: 36px;
+        color: var(--text-color);
+    }
+    .dapp-title {
+        margin-top: 16px;
+        font-size: 35px;
+        line-height: 52px;
+        color: #171718;
+        max-width: 100%;
+    }
+    .subtitle {
+        font-family: Font;
+        text-align: center;
+        color: #3d5066;
+        max-width: 100%;
+    }
+    .dapp-subtitle {
+        margin-top: 20px;
+        font-size: 15px;
+        line-height: 24px;
+        max-width: 100%;
+    }
+    .dapp-items {
+        display: grid;
+        margin-top: 48px;
+        grid-template-columns: repeat(1, minmax(300px, 1fr));
+        gap: 10px;
+        max-width: 100%;
+    }
+    .dapp-item {
+        position: relative;
+        // background: rgba(247,247,247,1);
+        border-radius: 12px;
+        min-height: 332px;
+        cursor: pointer;
+        margin-bottom: 20px;
+        max-width: 100%;
+        overflow: hidden;
+        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+        .dapp-item-bg {
+            height: 260px;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+        .dapp-item-tags {
+            position: absolute;
+            top:0;
+            width: 100%;
+            padding: 24px;
+            text-align: right;
+            display: flex;
+            justify-content: flex-end;
+            .tag {
+                margin-left: 12px;
+                font-size: 14px;
+                font-family: Font;
+                color: var(--text-color);
+                padding: 12px;
+                background: #ffffff;
+                border-radius: 18px;
+                border-radius: 19px;
+                word-break: keep-all;
+                .red {
+                    color: #f38fc5;
+                }
+            }
+        }
+    }
+    .dapp-item-none {
+        display: none;
+    }
+    .dapp-brief {
+        top: 0;
+        z-index: 2;
+        width: 100%;
+        height: 160px;
+        background: var(--white);
+        padding: 24px;
+        max-width: 100%;
+        .title {
+            font-size: 24px;
+            font-family: Font;
+            font-weight: 600;
+            color: var(--text-color);
+            text-align: left;
+            line-height: 36px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+        .brief {
+            margin-top: 4px;
+            font-size: 16px;
+            font-family: Font;
+            color: var(--text-color-third);
+            line-height: 24px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+        }
+    }
+    .dapp-item:hover .dapp-brief {
+        display: block;
+    }
+}
+.section-two-container {
+    width: 100%;
+    height: 476px;
+    background: linear-gradient(180.27deg, var(--text-color-six) 56.3%, #E5087E 210.85%);
+    padding: 88px 20px 0 20px;
+    .text-title {
+        font-family: Font;
+        font-weight: 600;
+        font-size: 35px;
+        line-height: 42px;
+        color: #FFFFFF;
+        text-align: center;
+    }
+    .text-content {
+        margin-top: 24px;
+        font-family: Font;
+        font-size: 15px;
+        line-height: 22px;
+        text-align: center;
+        color: #FFFFFF;
+    }
+    .tags {
+        margin-top: 48px;
+        text-align: center;
+        .tag-item {
+            border-radius: 18px;
+            padding: 8px 12px;
+            background: white;
+            color: #6C757D;
+            font-family: Poppins;
+            font-size: 14px;
+            margin-right: 16px;
+            margin-bottom: 16px;
+            display: inline-block;
+            img {
+                width: 12px;
+                height: 12px;
+                margin-left: 5px;
+            }
+            &.active {
+                background: rgba(229, 8, 126, 1);
+                color: white;
+            }
+        }
+    }
+}
+@media screen and (min-width: 1200px) {
+    .section-one {
+        padding: 50px 98px 0;
+        grid-template-columns: 1fr 1fr;
+        .text-wrap {
+            padding: 0;
+            .text-title {
+                font-size: 40px;
+            }
+        }
+        .img-wrap {
+            width: 100%;
+            text-align: center;
+            padding: 0;
+            img {
+                height: 552px;
+                width: auto;
+                max-width: auto;
+            }
+        }
+    }
+    .dapp {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        .dapp-content {
+            min-height: 420px;
+        }
+        .dapp-logo-title {
+            margin-top: 16px;
+        }
+        .dapp-title {
+            margin-top: 12px;
+            font-size: 40px;
+            line-height: 60px;
+        }
+        .dapp-subtitle {
+            margin-top: 12px;
+            font-size: 18px;
+            line-height: 24px;
+        }
+        .dapp-items {
+            width: 1280px;
+            margin: 48px auto 0;
+            display: grid;
+            grid-template-columns: repeat(3, minmax(420px, 1fr));
+            gap: 20px;
+            justify-content: center;
+            justify-items: center;
+        }
+        .dapp-item {
+            width: 100%;
+            margin: 0;
+            margin-bottom: 0px;
+        }
+    }
+}
+</style>