水稻开屏页

src/components/creator/CreatorInfoList.vue

@@ -0,0 +1,167 @@
+<template>
+    <router-link
+        :to="{
+            path: '/creatorDetail',
+            query: {
+                id: info.id
+            }
+        }"
+        class="info"
+    >
+        <van-image :width="60" :height="60" :src="getImg(info.avatar)" fit="cover" radius="100" />
+
+        <div class="content">
+            <div class="text1 van-ellipsis">{{ info.nickname }}</div>
+            <div class="text2 van-ellipsis">
+                {{ info.intro }}
+            </div>
+            <div class="flex1"></div>
+
+            <div class="text3">
+                <div class="text4">
+                    <span>粉丝</span>
+                    <span>{{ info.followers }}</span>
+                </div>
+            </div>
+        </div>
+    </router-link>
+</template>
+
+<script>
+export default {
+    props: {
+        rank: {
+            type: Number,
+            default: 0
+        },
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        isFollow: {
+            type: Boolean,
+            default: false
+        },
+        size: {
+            type: String,
+            default: 'normal'
+        }
+    },
+    computed: {
+        NOInfo() {
+            if (this.rank) {
+                const colors = ['#FF8E12', '#C37BFF', '#3ACEFF'];
+                return {
+                    img1: require(`@assets/NO${this.rank}.png`),
+                    img2: require(`@assets/svgs/NOicon${this.rank}.svg`),
+                    color: colors[this.rank - 1]
+                };
+            }
+            return {};
+        }
+    },
+    methods: {
+        follow() {
+            this.checkLogin().then(() => {
+                if (!this.info.follow) {
+                    this.$http.get(`/user/${this.info.id}/follow`).then(res => {
+                        this.$emit('update:info', {
+                            ...this.info,
+                            follow: true,
+                            followers: this.info.followers + 1
+                        });
+                        this.$toast.success('关注成功');
+                    });
+                } else {
+                    this.$http.get(`/user/${this.info.id}/unfollow`).then(() => {
+                        this.$emit('update:info', {
+                            ...this.info,
+                            follow: false,
+                            followers: this.info.followers - 1
+                        });
+                        this.$toast.success('取消关注');
+                    });
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+    display: flex;
+    padding: 10px 13px;
+    position: relative;
+    align-items: center;
+    background: #2b2b2c;
+
+    .content {
+        flex-grow: 1;
+        padding-left: 10px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        height: 64px;
+
+        .text1 {
+            font-size: 14px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 24px;
+        }
+
+        .text2 {
+            font-size: 12px;
+            color: #939599;
+            line-height: 17px;
+        }
+
+        .text3 {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .text4 {
+                span {
+                    font-size: 12px;
+                    color: #939599;
+                    line-height: 17px;
+                    &:nth-child(2) {
+                        color: #fff;
+                        margin-left: 2px;
+                    }
+                }
+            }
+        }
+    }
+
+    .van-image {
+        flex-shrink: 0;
+    }
+
+    .NOImg {
+        position: absolute;
+        width: 80px;
+        height: 90px;
+        display: block;
+        left: 12px;
+        top: 15px;
+    }
+}
+
+.info + .info {
+    position: relative;
+    &::before {
+        content: '';
+        position: absolute;
+        left: 20px;
+        right: 20px;
+        top: 0;
+        height: 1px;
+        background-color: rgba(255, 255, 255, 0.08);
+    }
+}
+</style>

src/views/Discover.vue

@@ -18,7 +18,7 @@
                 <div class="top">
                     <img src="@assets/nav_logo.png" class="logo" alt="" />
 
-                    <div class="search" @click="$router.push('/productSearch')">
+                    <div class="search" @click="$router.push('/searchAll')">
                         <img src="@assets/icon-sosuo.png" alt="" />
                         <span> 搜索你要的精彩 </span>
                     </div>

src/views/Home.vue

@@ -21,6 +21,7 @@
                 :class="{ activeAvatar: isLogin && userInfo.useCollectionPic }"
                 :src="isLogin ? userInfo.avatar : require('@assets/img_default_photo.png')"
             >
+            
             </van-image>
         </div>
 

src/views/search/SearchAll.vue

@@ -9,6 +9,7 @@
                 v-model="search"
                 placeholder="绿洲宇宙全域搜索，请输入"
                 @keyup="onKey"
+                @click-right-icon="clickRight"
             >
                 <template #right-icon>
                     <img class="search-right" src="@assets/search_sosuo.png" alt="" />
@@ -29,6 +30,7 @@
                 <span v-for="(item, index) in historys" :key="index" @click="getSearch(item)">{{ item }}</span>
             </div>
         </div>
+        <div style="height: 40px" v-else></div>
 
         <div class="news-content">
             <div class="title">绿洲宇宙全域公告</div>
@@ -68,9 +70,21 @@ export default {
         fromRoute = from;
     },
     methods: {
+        clear() {
+            this.$dialog
+                .confirm({
+                    message: '确定要清除全部搜索记录吗?'
+                })
+                .then(() => {
+                    this.clearHistory();
+                });
+        },
         getSearch(item) {
             this.$router.push('/searchResult?search=' + item);
         },
+        clickRight() {
+            this.getSearch(this.search);
+        },
         onKey(e) {
             console.log(e.keyCode);
             if (e.keyCode === 13) {

src/views/search/SearchResult.vue

@@ -1,17 +1,48 @@
 <template>
     <div class="page" :style="{ backgroundImage: `url(${require('@/assets/searchBg.jpg')})` }">
         <van-sticky :offset-top="topHeight + 46">
-            <van-search clearable shape="round" left-icon="" v-model="search" placeholder="请输入搜索关键词" />
+            <van-search
+                clearable
+                shape="round"
+                left-icon=""
+                v-model="search"
+                placeholder="请输入搜索关键词"
+                @search="getSearch"
+            />
         </van-sticky>
 
-        <van-tabs v-model:active="active" scrollspy sticky :offset-top="topHeight + 106">
-            <van-tab v-for="(item, index) in options" :key="index" :title="item.label">
-                <div class="tab-title">{{ item.label }}</div>
-                <div class="van-list">
-                    <component :is="item.com" dark :info="info"></component>
-                </div>
-            </van-tab>
-        </van-tabs>
+        <div class="content">
+            <van-tabs v-if="!loading" ref="tabs" v-model:active="active" scrollspy sticky :offset-top="topHeight + 106">
+                <van-tab
+                    v-for="(item, index) in options"
+                    :title-class="item.listKey && searchInfo[item.listKey].length <= 0 ? 'hideTab' : ''"
+                    :key="searchKey + index"
+                    :title="item.label"
+                >
+                    <div class="tab-title" v-if="item.listKey && searchInfo[item.listKey].length > 0">
+                        {{ item.label }}
+                    </div>
+                    <div
+                        class="van-list"
+                        :class="{
+                            list:
+                                item.listKey === 'news' || item.listKey === 'mintActivities' || item.listKey === 'users'
+                        }"
+                    >
+                        <template v-if="item.listKey">
+                            <component
+                                :is="item.com"
+                                dark
+                                v-model:info="searchInfo[item.listKey][infoIndex]"
+                                v-for="(info, infoIndex) in searchInfo[item.listKey]"
+                                :key="infoIndex"
+                                list
+                            ></component>
+                        </template>
+                    </div>
+                </van-tab>
+            </van-tabs>
+        </div>
     </div>
 </template>
 
@@ -21,46 +52,69 @@ import NewsRecord from '@/components/product/NewsRecord.vue';
 import ActivityRecord from '@/components/product/ActivityRecord.vue';
 import ShowInfo from '@/components/asset/showInfo.vue';
 import CreatorSmall from '@/components/creator/CreatorSmall.vue';
+import CreatorInfo from '@/components/creator/CreatorInfoList.vue';
+
 export default {
+    name: 'searchResult',
     inject: ['setKeeps', 'scrollWrapper', 'changeScroll', 'bodyScroll', 'safeTop'],
     data() {
         return {
             search: '',
+            searchKey: '',
             active: 0,
+            loading: true,
             options: [
                 {
                     label: '数字商品',
-                    com: 'ProductInfo'
+                    com: 'ProductInfo',
+                    listKey: 'collections'
                 },
                 {
                     label: '元域名',
-                    com: 'ProductInfo'
+                    com: 'ProductInfo',
+                    listKey: 'domains'
                 },
                 {
                     label: '个人作品',
-                    com: 'ProductInfo'
+                    com: 'ProductInfo',
+                    listKey: 'pictures'
                 },
                 {
                     label: '新闻头条',
-                    com: 'NewsRecord'
+                    com: 'NewsRecord',
+                    listKey: 'news'
                 },
                 {
                     label: '铸造中心',
-                    com: 'ActivityRecord'
+                    com: 'ActivityRecord',
+                    listKey: 'mintActivities'
                 },
                 {
                     label: '艺术机构',
-                    com: 'ShowInfo'
+                    com: 'CreatorSmall',
+                    listKey: 'minters'
                 },
                 {
                     label: '个人用户',
-                    com: 'CreatorSmall'
+                    com: 'CreatorInfo',
+                    listKey: 'users'
                 },
                 {
                     label: '数字展览',
-                    com: 'ProductInfo'
+                    com: 'ShowInfo',
+                    listKey: 'showrooms'
                 }
-            ]
+            ],
+            searchInfo: {
+                collections: [],
+                domains: [],
+                pictures: [],
+                news: [],
+                mintActivities: [],
+                minters: [],
+                users: []
+            },
+            scrollTop: 0
         };
     },
     components: {
@@ -68,18 +122,75 @@ export default {
         ActivityRecord,
         ProductInfo,
         ShowInfo,
-        CreatorSmall
+        CreatorSmall,
+        CreatorInfo
     },
     computed: {
         topHeight() {
             let safeTop = this.safeTop.replace(/px/, '');
             return Number(safeTop);
+        },
+        showOptions() {
+            let options = [...this.options];
+            return options.filter(item => {
+                return this.searchInfo[item.listKey] && this.searchInfo[item.listKey].length > 0;
+            });
         }
     },
     mounted() {
         if (this.$route.query.search) {
             this.search = this.$route.query.search;
         }
+        this.getSearch();
+    },
+    methods: {
+        getSearch() {
+            this.loading = true;
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.searchKey = this.search;
+            this.$http
+                .post('/statistic/globalSearch', {
+                    search: this.search
+                })
+                .then(res => {
+                    this.loading = false;
+                    this.$toast.clear();
+                    this.searchInfo = res;
+                    this.$nextTick(() => {
+                        this.$forceUpdate();
+                    });
+                });
+        }
+    },
+    activated() {
+        this.$nextTick(() => {
+            this.changeScroll(this.scrollTop);
+
+            // setTimeout(() => {
+            //     this.sort = this.beforeSort;
+            // }, 1000);
+        });
+    },
+    beforeRouteLeave(to, from, next) {
+        if (
+            to.name === 'productDetail' ||
+            to.path === '/newsDetail' ||
+            to.path === '/activityDetail' ||
+            to.path === '/creatorDetail' ||
+            to.path === '/hall'
+        ) {
+            this.beforeSort = this.sort;
+            this.scrollTop = this.scrollWrapper.scrollTop;
+            this.setKeeps(['searchResult']);
+        } else {
+            this.beforeSort = '';
+            this.scrollTop = 0;
+            this.setKeeps(['searchResult'], false);
+        }
+        next();
     }
 };
 </script>
@@ -114,11 +225,28 @@ export default {
     background-color: #000;
 }
 
+/deep/.van-tabs__nav {
+    --van-tabs-nav-background-color: transparent;
+}
+
+/deep/.hideTab {
+    display: none;
+}
+
+/deep/.van-tabs__nav {
+    padding-left: 16px;
+    padding-right: 16px;
+}
+
 .tab-title {
     font-size: 14px;
     color: #ffffff;
     line-height: 24px;
     padding: 10px 16px 7px;
+    // position: sticky;
+    // z-index: 20;
+    // top: calc(var(--safe-top) + 148px);
+    // background-color: #000;
 }
 
 .block {
@@ -128,5 +256,28 @@ export default {
 
 .van-list {
     padding: 8px;
+    --bg2: #2b2b2c;
+    --text0: #fff;
+    --btnplaintBg: rgba(255, 255, 255, 0.08);
+    --btnplaintBorder: rgba(255, 255, 255, 0.08);
+    --border: rgba(255, 255, 255, 0.08);
+    .news-record {
+        border-radius: 0;
+    }
+    .showInfo {
+        background-color: #2b2b2c;
+        border-radius: 12px;
+        margin: 0 8px;
+    }
+    .showInfo + .showInfo {
+        margin-top: 16px;
+    }
+}
+
+.list {
+    margin: 16px 16px 0;
+    padding: 0;
+    border-radius: 8px;
+    overflow: hidden;
 }
 </style>

src/views/user/Rice.vue

@@ -13,7 +13,12 @@
             frameborder="0"
             id="game"
         ></iframe>
-        <img v-if="isLoading" src="@assets/riceOpen.jpeg" class="riceOpen" alt="" />
+        <img
+            v-if="isLoading"
+            src="https://cdn.raex.vip/image/2023-04-07-16-22-13bJEfLCgG.jpg"
+            class="riceOpen"
+            alt=""
+        />
 
         <rice-task @send="send" @share="share" ref="task"></rice-task>
         <rice-share ref="share" @refreashTask="refreashTask"></rice-share>