Merge branch 'master' of http://git.izouma.com/xiongzhu/raex_front into 拍卖

src/App.vue

@@ -5,6 +5,7 @@
         id="scroll-wrapper"
         ref="scroll"
         @scroll="scrollEvent"
+        v-if="setting == false"
     >
         <app-bar ref="bar"></app-bar>
         <router-view v-slot="{ Component }">
@@ -22,22 +23,67 @@
                 :autoplay="{ delay: 3000, disableOnInteraction: false }"
             >
                 <swiper-slide>
-                    <img src="@assets/splash1.jpg" alt="" />
+                    <img src="https://cdn.raex.vip/image/splash1.jpg" alt="" />
                 </swiper-slide>
                 <swiper-slide>
-                    <img src="@assets/splash2.jpg" alt="" />
+                    <img src="https://cdn.raex.vip/image/splash2.jpg" alt="" />
                 </swiper-slide>
                 <swiper-slide>
-                    <img src="@assets/splash3.jpg" alt="" />
+                    <img src="https://cdn.raex.vip/image/splash3.jpg" alt="" />
                 </swiper-slide>
                 <swiper-slide>
-                    <img src="@assets/splash4.jpg" alt="" />
+                    <img src="https://cdn.raex.vip/image/splash4.jpg" alt="" />
                 </swiper-slide>
                 <swiper-slide>
-                    <img src="@assets/splash5.jpg" alt="" />
+                    <img src="https://cdn.raex.vip/image/splash5.jpg" alt="" />
                 </swiper-slide>
                 <swiper-slide>
-                    <img src="@assets/splash6.jpg" alt="" />
+                    <img src="https://cdn.raex.vip/image/splash6.jpg" alt="" />
+                </swiper-slide>
+                <div class="tiaozhuan" @click="goApp">跳过</div>
+            </swiper>
+        </Transition>
+    </div>
+    <div
+        class="scroll-wrapper scroll-wrappers"
+        :class="{ darkTheme: darkTheme }"
+        id="scroll-wrapper"
+        ref="scroll"
+        @scroll="scrollEvent"
+        v-else-if="setting == true"
+    >
+        <app-bar ref="bar"></app-bar>
+        <router-view v-slot="{ Component }">
+            <keep-alive :include="keeps">
+                <component :is="Component" class="scroll-content" ref="content" :style="scrollStyle" />
+            </keep-alive>
+        </router-view>
+        <phone-ver></phone-ver>
+        <Transition>
+            <swiper
+                v-if="showSplash"
+                pagination
+                @reachEnd="reachEnd"
+                class="appSwiper"
+                :autoplay="{ delay: 3000, disableOnInteraction: false }"
+            >
+                <swiper-slide>
+                    <img src="https://cdn.raex.vip/image/splash1.jpg" alt="" />
+                </swiper-slide>
+                <swiper-slide>
+                    <img src="https://cdn.raex.vip/image/splash2.jpg" alt="" />
+                </swiper-slide>
+                <swiper-slide>
+                    <img src="https://cdn.raex.vip/image/splash3.jpg" alt="" />
+                </swiper-slide>
+                <swiper-slide>
+                    <img src="https://cdn.raex.vip/image/splash4.jpg" alt="" />
+                </swiper-slide>
+                <swiper-slide>
+                    <img src="https://cdn.raex.vip/image/splash5.jpg" alt="" />
+                </swiper-slide>
+                <swiper-slide>
+                    <img src="https://cdn.raex.vip/image/splash6.jpg" alt="" />
                 </swiper-slide>
                 <div class="tiaozhuan" @click="goApp">跳过</div>
             </swiper>
@@ -92,7 +138,8 @@ export default {
             checkEvent: null,
             keeps: [],
             bodyScroll: 0,
-            showSplash: true
+            showSplash: true,
+            setting: false
         };
     },
     watch: {
@@ -100,6 +147,14 @@ export default {
             this.$nextTick(() => {
                 this.$el.scrollTop = 0;
             });
+            if(
+                this.$route.name == 'userSettingComplete' ||
+                this.$route.name == 'userSetting'
+            ){
+                this.setting = true
+            }else{
+                this.setting = false
+            }
         }
     },
     methods: {
@@ -158,7 +213,9 @@ export default {
 .scroll-wrapper {
     background-color: @bg;
 }
-
+.scroll-wrappers{
+    background-color: #272b2e;
+}
 .appSwiper {
     position: fixed;
     width: 100vw;

src/components/TuanRank.vue

@@ -5,8 +5,9 @@
             <img class="fire2" src="@assets/fire2.gif" alt="" />
 
             <div class="content">
-                <img :src="activityIcon" alt="" />
-                <span>团灭大战</span>
+                <img src="@assets/png-xiaohui.png" alt="" />
+                <!-- <img :src="activityIcon" alt="" />
+                <span>团灭大战</span> -->
             </div>
         </div>
     </div>
@@ -28,7 +29,7 @@ export default {
     },
     methods: {
         goActivityRank() {
-            this.$router.push('/activityRank');
+            this.$router.push('/activityRank2');
         }
     }
 };
@@ -46,16 +47,21 @@ export default {
 .fire1 {
     width: 42px;
     display: block;
-    transform: translateY(12px);
+    transform: translateY(13px);
+    position: relative;
+    z-index: 1;
 }
 .fire2 {
     width: 40px;
-    height: 120px;
+    height: 134px;
     display: block;
+    position: relative;
+    z-index: 1;
 }
 .fire2bg {
-    background: linear-gradient(142deg, #8622b2 0%, #b730dc 47%, #8422b1 100%);
+    // background: linear-gradient(142deg, #8622b2 0%, #b730dc 47%, #8422b1 100%);
     position: relative;
+    z-index: 0;
 }
 .content {
     position: absolute;
@@ -66,21 +72,22 @@ export default {
     left: 0;
     right: 0;
     bottom: 0;
+    z-index: 0;
     img {
-        width: 26px;
-        height: 26px;
-    }
-    span {
-        width: 18px;
-        font-size: 18px;
-        font-weight: bold;
-        color: #ffffff;
-        line-height: 20px;
-        background: linear-gradient(140deg, #fcfe1e 0%, #feffa3 48%, #fcfd1d 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        word-wrap: break-word;
-        margin-top: 3px;
+        width: 40px;
+        height: 134px;
     }
+    // span {
+    //     width: 18px;
+    //     font-size: 18px;
+    //     font-weight: bold;
+    //     color: #ffffff;
+    //     line-height: 20px;
+    //     background: linear-gradient(140deg, #fcfe1e 0%, #feffa3 48%, #fcfd1d 100%);
+    //     -webkit-background-clip: text;
+    //     -webkit-text-fill-color: transparent;
+    //     word-wrap: break-word;
+    //     margin-top: 3px;
+    // }
 }
 </style>

src/components/level/Level.vue

@@ -34,7 +34,7 @@
         </div>
         <div class="medal-text">
             <div
-                class="text1"
+                class="text1 medal-text1"
                 :style="{
                     color: levelInfo.color1 || levelInfo.color,
                     backgroundColor: (levelInfo.color1 || levelInfo.color) + '33'
@@ -219,6 +219,12 @@ export default {
                 background-color: #fff;
             }
         }
+        .medal-text1 {
+            display: block;
+            width: 60px;
+            flex-shrink: 0;
+            white-space: nowrap;
+        }
     }
 }
 .van-overlay {

src/components/product/ActivityRecord.vue

@@ -0,0 +1,311 @@
+<template>
+    <router-link
+        :to="{
+            path: '/activityDetail',
+            query: {
+                id: info.id
+            }
+        }"
+        class="news-record"
+        :class="{ isLight: type === 'light' }"
+    >
+        <van-badge :content="badgeContent" :offset="[-5, 2]">
+            <van-image :src="getImg(info.cover)" :radius="8" width="46" height="46" fit="cover" />
+        </van-badge>
+        <div class="content">
+            <div class="name van-ellipsis">{{ info.name }}</div>
+            <div class="sales-list">
+                <div class="sales">
+                    <span>限量{{ info.total }}份</span>
+                </div>
+            </div>
+            <!-- <div class="bottom">
+                <div class="miner">
+                    <span style="margin-left: 0">{{ time }}</span>
+                </div>
+            </div> -->
+        </div>
+        <van-button type="primary" size="mini" round plain>{{ isGoning ? '进行中' : '查看' }}</van-button>
+    </router-link>
+</template>
+
+<script>
+import product from '../../mixins/product';
+export default {
+    mixins: [product],
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        type: {
+            type: String,
+            default: 'dark'
+        }
+    },
+    computed: {
+        time() {
+            if (this.info.startTime) {
+                return this.dayjs(this.info.startTime).format('YYYY-MM-DD HH:mm');
+            }
+            if (this.info.createdAt) {
+                return this.dayjs(this.info.createdAt).format('YYYY-MM-DD HH:mm');
+            }
+
+            return '';
+        },
+        isNew() {
+            if (this.info.createdAt) {
+                let time = this.dayjs(this.info.startTime || this.info.createdAt).add(1, 'day');
+                return this.dayjs().isBefore(time);
+            } else {
+                return false;
+            }
+        },
+        badgeContent() {
+            if (this.isNew) {
+                return 'NEW';
+            } else {
+                return '';
+            }
+        },
+        isGoning() {
+            if (this.info.onShelf) {
+                if (
+                    (this.info.scheduleSale && this.dayjs().isAfter(this.dayjs(this.info.startTime))) ||
+                    !this.info.scheduleSale
+                ) {
+                    return this.info.stock && this.info.stock > 0;
+                }
+            }
+            return false;
+        }
+    },
+    mounted() {
+        if (this.info.startTime) {
+            var x = this.dayjs(this.info.startTime, 'YYYY-MM-DD HH:mm:ss');
+            var y = this.dayjs();
+            let d = this.dayjs.duration(x.diff(y));
+            let day = parseInt(d.asDays());
+            if (day <= 0) {
+                this.getTime(this.info.startTime);
+            }
+        }
+    },
+    methods: {
+        likeProduct() {
+            if (!this.info.liked) {
+                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: true,
+                        likes: this.info.likes + 1
+                    });
+                    this.$toast.success('收藏成功');
+                });
+            } else {
+                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: false,
+                        likes: this.info.likes - 1
+                    });
+                    this.$toast.success('取消收藏');
+                });
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.van-badge {
+    z-index: 20;
+
+    --van-badge-font-size: 8px;
+    &.van-badge--dot {
+        border: 1px solid #ffffff;
+        --van-badge-dot-size: 10px;
+    }
+}
+.news-record {
+    position: relative;
+    background-color: var(--bg2);
+    display: inline-block;
+    border-radius: 12px;
+    overflow: hidden;
+    padding: 12px 16px;
+    overflow: hidden;
+    .flex();
+
+    .bg {
+        position: absolute;
+        width: 92px;
+        height: 116px;
+        right: 0;
+        bottom: 0;
+        z-index: 0;
+    }
+
+    .van-image {
+        flex-shrink: 0;
+    }
+
+    .xianliang {
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        font-size: @font1;
+        color: @prim;
+        display: flex;
+        align-items: center;
+        // border-radius: 13px !important;
+        z-index: 4;
+        padding: 0 10px !important;
+
+        img {
+            width: 18px;
+            height: 18px;
+            margin-right: 3px;
+        }
+    }
+
+    .van-image {
+        display: block;
+        position: relative;
+        z-index: 2;
+    }
+    .content {
+        margin-left: 12px;
+        align-self: stretch;
+        .flex-col();
+        justify-content: space-between;
+        flex-grow: 1;
+        overflow: hidden;
+        margin-right: 12px;
+        .name {
+            font-size: 14px;
+            font-weight: bold;
+            color: var(--text0);
+            line-height: 24px;
+        }
+
+        .sales-list {
+            margin-top: 8px;
+            .flex();
+        }
+
+        .sales {
+            overflow: hidden;
+            font-size: @font1;
+            border-radius: 4px;
+
+            span {
+                padding: 0 10px;
+                line-height: 20px;
+                height: 20px;
+                display: inline-block;
+                background-color: @bg3;
+                color: #8a8a8e;
+            }
+        }
+        .sales + .sales {
+            margin-left: 14px;
+        }
+
+        .bottom {
+            display: flex;
+            // margin-top: 14px;
+            align-items: center;
+
+            .miner {
+                display: flex;
+                align-items: center;
+
+                span {
+                    color: @text3;
+                    font-size: @font1;
+                    margin-left: 6px;
+                }
+            }
+
+            .price {
+                font-size: @font4;
+                color: @text0;
+                line-height: 20px;
+                font-family: OSP;
+                img {
+                    width: 8px;
+                    display: inline-block;
+                }
+            }
+        }
+    }
+
+    .text {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .top-bg {
+        width: 100%;
+        display: block;
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+    }
+
+    // &.isLight {
+    //     .content {
+    //         .name {
+    //             color: #000000;
+    //         }
+    //         .bottom {
+    //             .miner {
+    //                 color: #939599;
+    //             }
+    //         }
+    //     }
+    // }
+
+    &:not(:last-child) {
+        &::after {
+            content: '';
+            height: 1px;
+            background-color: var(--border);
+            position: absolute;
+            left: 74px;
+            right: 16px;
+            bottom: 0;
+        }
+    }
+}
+
+.status {
+    font-size: @font2;
+    color: @text0;
+}
+.sold {
+    background-color: @bg2;
+    font-size: @font1;
+    color: @text3;
+    padding: 0 17px;
+    border-radius: 13px;
+    line-height: 24px;
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    z-index: 3;
+}
+.van-button {
+    background: var(--btnplaintBg);
+    border: 1px solid var(--btnplaintBorder);
+    min-width: 68px;
+    font-size: 16px;
+    font-weight: bold;
+}
+</style>

src/components/product/productSelect.vue

@@ -0,0 +1,298 @@
+<template>
+    <van-popup v-model:show="show" position="right">
+        <div class="select-right padding-safe-top">
+            <div class="select-content">
+                <div class="select-title">
+                    <img src="@assets/png-zhutifenlei.png" alt="" />
+                    <span>主题分类</span>
+                </div>
+                <div class="select-list">
+                    <div
+                        class="select-info"
+                        :class="{ prim: settingId === item.id }"
+                        v-for="(item, index) in settings"
+                        :key="index"
+                        @click="showBanner(item.id)"
+                    >
+                        {{ item.name }}
+                    </div>
+                </div>
+            </div>
+            <div class="select-content" v-if="settingId">
+                <div class="select-title">
+                    <img src="@assets/png-xiliefenlei.png" alt="" />
+                    <span>系列分类</span>
+                </div>
+                <div class="select-list">
+                    <div
+                        class="select-info"
+                        :class="{ prim: bannerName === item.linkContent }"
+                        @click="chooseBanner(item.linkContent)"
+                        v-for="(item, index) in banners"
+                        :key="index"
+                    >
+                        {{ item.name }}
+                    </div>
+                </div>
+            </div>
+            <div class="select-content" v-if="classification">
+                <div class="select-title">
+                    <img src="@assets/png-xiliefenlei.png" alt="" />
+                    <span>稀有度分类</span>
+                </div>
+                <div class="select-list">
+                    <div
+                        class="select-info"
+                        :class="{ prim: rarityLabel === item.value }"
+                        @click="changeLabel(item.value)"
+                        v-for="(item, index) in selectOptions"
+                        :key="index"
+                    >
+                        {{ item.name }}
+                    </div>
+                </div>
+            </div>
+            <div class="select-content" v-if="bannerName && !empty">
+                <div class="select-title">
+                    <img src="@assets/png-mingcheng.png" alt="" />
+                    <span>名称分类</span>
+                </div>
+                <van-list
+                    v-model:loading="loading"
+                    :finished="finished"
+                    finished-text=""
+                    :immediate-check="false"
+                    @load="getData"
+                    class="select-list"
+                >
+                    <div
+                        class="select-info product"
+                        :class="{ prim: productId === item.id }"
+                        v-for="(item, index) in list"
+                        :key="index"
+                        @click="productId = item.id"
+                    >
+                        {{ item.name }}
+                    </div>
+                </van-list>
+            </div>
+
+            <div class="select-btns">
+                <van-button type="primary" plain round @click="refreash">重置</van-button>
+                <van-button type="primary" round @click="submit">确认筛选</van-button>
+            </div>
+        </div>
+    </van-popup>
+</template>
+
+<script>
+import list from '../../mixins/list';
+export default {
+    data() {
+        return {
+            show: false,
+            settings: [],
+            settingId: 0,
+            banners: [],
+            url: '/collection/all',
+            bannerName: '',
+            selectOptions: [],
+            classification: false,
+            rarityLabel: '',
+            productId: ''
+        };
+    },
+    mixins: [list],
+    mounted() {
+        this.$http
+            .post('/setting/byFlag', { flag: 1 })
+            .then(res => {
+                this.settings = res.filter(item => {
+                    return item.pic;
+                });
+                if (this.settings.length > 0) {
+                    this.showBanner(this.settings[0].id);
+                }
+            })
+            .catch(e => {
+                console.log(e);
+                this.$message.error(e.error);
+            });
+    },
+    methods: {
+        refreash() {
+            this.settingId = 0;
+            this.bannerName = '';
+            this.classification = false;
+            this.rarityLabel = '';
+            this.productId = '';
+        },
+        chooseBanner(name) {
+            this.bannerName = name;
+            this.getLabel();
+        },
+        getLabel() {
+            this.$http.get('/rarityLabel/label/' + this.bannerName).then(res => {
+                this.selectOptions = Object.values(res);
+                if (Object.values(res).length > 0) {
+                    this.classification = true;
+                    this.rarityLabel = Object.values(res)[0].value;
+                } else {
+                    this.classification = false;
+                    this.rarityLabel = '';
+                }
+                this.getData(true);
+            });
+        },
+        changeLabel(label) {
+            this.rarityLabel = label;
+
+            this.getData(true);
+        },
+        beforeData() {
+            return {
+                query: {
+                    del: false,
+                    onShelf: true,
+                    rarityLabel: this.rarityLabel,
+                    salable: true,
+                    distinct: true
+                },
+                sort: 'id,desc',
+                search: this.bannerName
+            };
+        },
+        showBanner(settingId) {
+            this.settingId = settingId;
+            this.bannerName = '';
+            this.rarityLabel = '';
+            this.productId = '';
+            this.$http
+                .post(
+                    '/banner/all',
+                    {
+                        query: {
+                            type: 'MARKET',
+                            del: false,
+                            settingId: settingId
+                        },
+                        size: 99,
+                        sort: 'sort,asc;createdAt,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.banners = res.content;
+                });
+        },
+        submit() {
+            if (this.settingId && !this.bannerName) {
+                this.$toast('请选择系列');
+                return;
+            }
+            let info = [...this.list].find(item => {
+                return item.id === this.productId;
+            });
+            let setting = [...this.settings].find(item => {
+                return item.id === this.settingId;
+            });
+            this.show = false;
+            this.$emit('select', {
+                setting: setting,
+                search: this.bannerName,
+                rarityLabel: this.rarityLabel,
+                productName: info ? info.name : ''
+            });
+        },
+        init() {
+            this.show = true;
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.select-right {
+    width: 80vw;
+    height: var(--app-height);
+    background: #222426;
+    box-sizing: border-box;
+    overflow: auto;
+    .bottom(100px);
+    position: relative;
+}
+
+.select-btns {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    padding: 9px 16px;
+    background: #222426;
+    .bottom(9px);
+    box-sizing: border-box;
+    .flex();
+    z-index: 20;
+    .van-button {
+        --van-button-primary-background-color: #3ab200;
+        &:nth-child(1) {
+            width: 100px;
+            border: 1px solid #43ce00;
+        }
+        &:nth-child(2) {
+            flex-grow: 1;
+            margin-left: 10px;
+        }
+    }
+}
+
+.select-content {
+    .select-title {
+        .flex();
+        padding: 18px 12px 0px;
+        img {
+            width: 24px;
+            height: 24px;
+            display: block;
+        }
+
+        span {
+            font-size: 16px;
+            color: #ffffff;
+            line-height: 24px;
+            margin-left: 6px;
+        }
+    }
+
+    .select-list {
+        padding: 12px 6px 6px;
+        .select-info {
+            display: inline-block;
+            width: calc(50% - 12px);
+            padding: 0 10px;
+            box-sizing: border-box;
+            margin: 6px;
+            font-size: 13px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #939599;
+            line-height: 36px;
+            background: #383a3c;
+            text-align: center;
+            border-radius: 4px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            &.prim {
+                color: @prim;
+                background-color: #222426;
+                border: 1px solid @prim;
+            }
+
+            &.product {
+                width: calc(100% - 12px);
+            }
+        }
+    }
+}
+</style>

src/main.js

@@ -142,8 +142,10 @@ store.commit('setFrom', 'scanCode');
 if (query.inviteCode) {
     store.commit('setInviteCode', query.inviteCode);
 }
-if (query.review === 'true' || query.review === true) {
+console.log('review', query.review === 'true' || query.review === true);
+if (query.review === 'true' || query.review === true || sessionStorage.getItem('review')) {
     store.commit('setReview', true);
+    sessionStorage.setItem('review', true);
 }
 if (query.starPage === 'true' || query.starPage === true || sessionStorage.getItem('starPage')) {
     store.commit('setStarPage', true);
@@ -207,7 +209,7 @@ if (navigator.userAgent.includes('#cordova#')) {
             StatusBar.overlaysWebView(true);
             if ('1' === window.localStorage.getItem('AppTips')) {
                 try {
-                    window.cordova.plugins.UmengPlugin.initPush(deviceToken => {
+                    window.cordova.plugins.UmengPlugin.init(deviceToken => {
                         console.log('deviceToken=' + deviceToken);
                     });
                 } catch (e) {}

src/router/index.js

@@ -234,7 +234,18 @@ const routes = [
     {
         path: '/setting',
         name: 'userSetting',
-        component: () => import('../views/account/Setting.vue')
+        component: () => import('../views/account/Setting.vue'),
+        meta: {
+            menuPage: true
+        }
+    },
+    {
+        path: '/SettingComplete',
+        name: 'userSettingComplete',
+        component: () => import('../views/account/SettingComplete.vue'),
+        meta: {
+            menuPage: true
+        }
     },
     {
         path: '/changeText',
@@ -720,6 +731,12 @@ const routes = [
         component: () => import('../views/user/ActivityRank.vue'),
         meta: {}
     },
+    {
+        path: '/activityRank2',
+        name: 'activityRank2',
+        component: () => import('../views/user/ActivityRank2.vue'),
+        meta: {}
+    },
     {
         path: '/balanceRecord',
         name: 'balanceRecord',

src/styles/font.less

@@ -25,6 +25,11 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+.font_family-icon-shaixuan1:before{
+    content: "\e773";
+    font-size: 18px;
+}
+
 .font_family-icon-a-iconarrowdown1:before {
     content: '\e64c';
 }

src/views/Discover.vue

@@ -45,7 +45,7 @@
                 <img src="../assets/discover/yishuzhanlan-diwen.png" alt="" class="menu-bg" />
             </div>
             <div class="menu-right">
-                <div class="menu-item" @click="$router.push('/hopeMarket')">
+                <div class="menu-item" @click="$router.push('/hopeMarket')" v-if="!$store.state.review">
                     <div class="text1">
                         <img src="../assets/discover/info_icon_banquanshichang.png" alt="" />
                         <span>版权市场</span>

src/views/Home.vue

@@ -67,6 +67,22 @@
             ></news-record>
         </div>
 
+        <div class="card news">
+            <div class="news-title" @click="$router.push('/activityList')">
+                <div class="news-left">
+                    <div class="text1">铸造中心</div>
+                    <div class="text2">让你的数字商品更有价值</div>
+                </div>
+                <img class="more" src="@assets/icon_inter.png" alt="" />
+            </div>
+            <activity-record
+                v-for="(item, index) in acitivities"
+                :key="index"
+                v-model:info="acitivities[index]"
+                type="light"
+            ></activity-record>
+        </div>
+
         <div class="card-list">
             <div
                 class="card card-hot"
@@ -85,7 +101,7 @@
                     <div class="text2">{{ item.remark }}</div>
                 </div>
             </div>
-            <div class="card news" style="order: 2" v-if="HotCollects.length > 0">
+            <div class="card news" style="order: 2" v-if="HotCollects.length > 0 && !$store.state.reviewPay">
                 <div class="news-title">
                     <div class="news-left">
                         <div class="text1">热力IP</div>
@@ -192,6 +208,7 @@ import ProductLarge from '../components/product/productLarge.vue';
 import ProductSmall from '../components/product/productSmall.vue';
 import { mapState } from 'vuex';
 import NewsRecord from '../components/product/NewsRecord.vue';
+import ActivityRecord from '../components/product/ActivityRecord.vue';
 import RankInfo from '../components/creator/RankInfo.vue';
 import HotCollect from '../components/product/HotCollect.vue';
 
@@ -206,7 +223,8 @@ export default {
         ProductSmall,
         NewsRecord,
         RankInfo,
-        HotCollect
+        HotCollect,
+        ActivityRecord
     },
     computed: {
         ...mapState(['userInfo']),
@@ -252,7 +270,8 @@ export default {
             riskShow: false,
             hideMore: false,
             hotUsers: [],
-            HotCollects: []
+            HotCollects: [],
+            acitivities: []
         };
     },
     mounted() {
@@ -304,7 +323,7 @@ export default {
                         window.localStorage.setItem('AppTips', '1');
                         this.showRisk();
                         try {
-                            window.cordova.plugins.UmengPlugin.initPush(deviceToken => {
+                            window.cordova.plugins.UmengPlugin.init(deviceToken => {
                                 console.log('deviceToken=' + deviceToken);
                             });
                         } catch (e) {}
@@ -334,7 +353,7 @@ export default {
                         window.localStorage.setItem('AppTips', '1');
                         this.showRisk();
                         try {
-                            window.cordova.plugins.UmengPlugin.initPush(deviceToken => {
+                            window.cordova.plugins.UmengPlugin.init(deviceToken => {
                                 console.log('deviceToken=' + deviceToken);
                             });
                         } catch (e) {}
@@ -357,16 +376,41 @@ export default {
             }
         },
         getInit() {
-            this.$toast.loading({
-                message: '加载中...',
-                forbidClick: true
-            });
-            return Promise.all([this.getBanner(), this.getProduct(), this.getHot(), this.getTop()]).then(() => {
+            // this.$toast.loading({
+            //     message: '加载中...',
+            //     forbidClick: true
+            // });
+            return Promise.all([
+                this.getBanner(),
+                this.getProduct(),
+                this.getActivity(),
+                this.getHot(),
+                this.getTop()
+            ]).then(() => {
                 this.$toast.clear();
                 return Promise.resolve();
             });
             // this.getNews();
         },
+        getActivity() {
+            return this.$http
+                .post(
+                    '/mintActivity/all',
+                    {
+                        query: {
+                            del: false,
+                            companyId: 1
+                        },
+                        size: 5,
+                        sort: 'id,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.acitivities = res.content;
+                    return Promise.resolve();
+                });
+        },
         getHot() {
             return this.$http.get('/user/topTen').then(res => {
                 this.hotUsers = res.slice(0, 5);

src/views/Mine.vue

@@ -10,25 +10,25 @@
             <van-image
                 width="100%"
                 height="52vw"
-                :src="userInfo.bg ? userInfo.bg + '?r=' + refreshFlag : require('@assets/creatorBg.png')"
+                :src="userInfo.bg ? userInfo.bg : require('@assets/creatorBg.png')"
                 loading-icon=""
                 fit="cover"
                 class="top-img"
             />
             <template v-if="publishShow">
-                <div class="yinsi" v-if="userInfo.isPublicShow" @click="changeShow(false)">
-                    <img src="@assets/icon-kaiqiyinsi.png" alt="" />
-                    <span>开启隐私</span>
+                <div class="yinsi" v-if="userInfo.isPublicShow" @click="turnOffPrivacy = true">
+                    <img src="@assets/icon-kaiqiyinsi@3x.png" alt="" />
+                    <!-- <span>开启隐私</span> -->
                 </div>
-                <div class="yinsi not" v-else @click="changeShow(true)">
-                    <img src="@assets/icon-guanbiyinsi.png" alt="" />
-                    <span>关闭隐私</span>
+                <div class="yinsi" v-else @click="turnPrivacy = true">
+                    <img src="@assets/icon-guanbiyinsi@3x.png" alt="" />
+                    <!-- <span>关闭隐私</span> -->
                 </div>
             </template>
 
             <div class="edit-btn" @click="$router.push('/setting')">
-                <img src="../assets/icon-bianji1.png" alt="" />
-                <span>编辑</span>
+                <img src="../assets/icon-bi@3x.png" alt="" />
+                <!-- <span>编辑</span> -->
             </div>
             <div class="userInfo-content">
                 <div class="userInfo-top">
@@ -36,14 +36,10 @@
                         radius="100"
                         width="150"
                         height="150"
-                        :src="
-                            userInfo.avatar
-                                ? userInfo.avatar + '?r=' + refreshFlag
-                                : require('@assets/img_default_photo.png')
-                        "
+                        :src="userInfo.avatar ? userInfo.avatar : require('@assets/img_default_photo.png')"
                         fit="cover"
                         :class="{ activeAvatar: isLogin && userInfo.useCollectionPic }"
-                        @click="$router.push('/setting')"
+                        @click="$router.push('/SettingComplete')"
                     />
                     <div class="text">
                         <div class="text1">
@@ -53,23 +49,37 @@
                             <span> 用户ID:{{ userInfo.id }} </span>
                             <img @click="copy" src="@assets/svgs/copy_icon.svg" alt="" />
                         </div>
-                        <div class="icons" @click="goAuth">
-                            <div class="auth-imgs" v-if="authStatus !== '已认证'">
+                        <div class="icons">
+                            <div class="auth-imgs authed_con" v-if="authStatus !== '已认证'" @click="goAuth">
                                 <img src="../assets/renzheng_icon.png" alt="" />
                                 <span>未实名认证</span>
                             </div>
                             <div class="auth-imgs authed" @click="goAuth" v-else>
-                                <img src="../assets/yirenzhng-geren-icon.png" alt="" />
+                                <img :src="require('@assets/icon-yirenzheng@3x.png')" alt="" />
                                 <span>个人已认证</span>
                             </div>
-
+                            <div class="auth-imgs autheds" @click="illuminateShow = true" v-if="light == false">
+                                <img :src="require('@assets/icon-weidianliang@3x.png')" alt="" />
+                                <span>
+                                    去点亮
+                                    <img
+                                        :src="require('@assets/icon-xialajiantou@3x (1).png')"
+                                        alt=""
+                                        class="autheds_img"
+                                    />
+                                </span>
+                            </div>
+                            <div class="auth-imgs autheds_con" v-else>
+                                <img :src="require('@assets/icon-yidianliang@3x.png')" alt="" />
+                                <span>元宇宙身份</span>
+                            </div>
                             <level ref="level"></level>
                         </div>
                     </div>
                 </div>
 
                 <div class="sub" :class="{ 'van-multi-ellipsis--l2': !showMore }">
-                    {{ userInfo.intro }}
+                    {{ info.autograph }}
                 </div>
                 <div class="sub-right" v-if="userInfo && userInfo.intro && userInfo.intro.length > 50">
                     <img
@@ -213,6 +223,81 @@
         <post ref="post" :info="shareProduct" noButton></post>
         <tuan-rank></tuan-rank>
     </van-pull-refresh>
+    <van-dialog v-model:show="illuminateShow" theme="round-button" className="risk">
+        <div class="risk-box">
+            <img :src="require('@assets/png-bg@3x.png')" alt="" class="toiIlluminate_imgOne" />
+            <img :src="require('@assets/png-bg@3x (1).png')" alt="" class="toiIlluminate_imgTwo" />
+            <div class="risk-box_id">
+                <div class="risk-box_id_one">元宇宙身份证</div>
+                <div class="risk-box_id_two"></div>
+            </div>
+            <div class="risk-box_tip">元宇宙身份证是什么？</div>
+            <div class="risk-box_title">
+                <div class="risk-box_title_con">元宇宙身份证，是绿洲宇宙的探索者在元宇宙中的唯一身份标识</div>
+            </div>
+            <div class="risk-box_title">
+                <div class="risk-box_title_con">
+                    RAEX绿洲与OASISMETA绿洲元宇宙将会共享您的身份信息，让您在绿洲元宇宙中的探索更加有趣及有价值
+                </div>
+            </div>
+            <div class="to_illuminate">
+                <div class="to_illuminate_con" @click="$router.push('/setting')">去点亮</div>
+            </div>
+            <div class="perfect_tip">完善资料信息，点亮图标</div>
+        </div>
+        <template #footer>
+            <div class="toiIlluminate_Three">
+                <img
+                    :src="require('@assets/icon_fenxiang_close@3x.png')"
+                    alt=""
+                    class="toiIlluminate_imgThree"
+                    @click="illuminateShow = false"
+                />
+            </div>
+        </template>
+    </van-dialog>
+    <van-dialog :show="turnPrivacy" theme="round-button" className="risk">
+        <div class="wrapper">
+            <img
+                :src="require('@assets/icon_close@3x.png')"
+                alt=""
+                class="privacy_off_img"
+                @click="turnPrivacy = false"
+            />
+            <div class="wrapper_img">
+                <img :src="require('@assets/icon-wufachakan.png')" alt="" class="privacy_img" />
+            </div>
+            <div class="wrapper_title">隐私设置</div>
+            <div class="wrapper_tip">当前关闭状态，他人将无法查看你主页的任何信息。</div>
+            <div class="wrapper_division"></div>
+            <div class="wrapper_btn">
+                <div class="wrapper_btn_left" @click="turnPrivacy = false">保持关闭</div>
+                <div class="wrapper_btn_right" @click="changeShow(true)">开启主页</div>
+            </div>
+        </div>
+        <template #footer> </template>
+    </van-dialog>
+    <van-dialog :show="turnOffPrivacy" theme="round-button" className="risk">
+        <div class="wrapper">
+            <img
+                :src="require('@assets/icon_close@3x.png')"
+                alt=""
+                class="privacy_off_img"
+                @click="turnOffPrivacy = false"
+            />
+            <div class="wrapper_img">
+                <img :src="require('@assets/icon-kechakan@3x.png')" alt="" class="privacy_img" />
+            </div>
+            <div class="wrapper_title">隐私设置</div>
+            <div class="wrapper_tip">关闭后，他人将无法查看你主页的任何信息。</div>
+            <div class="wrapper_division"></div>
+            <div class="wrapper_btn">
+                <div class="wrapper_btn_left" @click="changeShow(false)">关闭主页</div>
+                <div class="wrapper_btn_right" @click="turnOffPrivacy = false">保持开启</div>
+            </div>
+        </div>
+        <template #footer> </template>
+    </van-dialog>
 </template>
 
 <script>
@@ -233,7 +318,12 @@ export default {
             refreshFlag: Number(localStorage.getItem('refreshFlag') || '0'),
             enableWallet: false,
             faceAuth: false,
-            publishShow: false
+            publishShow: false,
+            illuminateShow: false,
+            info: {},
+            turnPrivacy: false,
+            turnOffPrivacy: false,
+            light: null
         };
     },
     components: { Level, Post, TuanRank },
@@ -243,6 +333,16 @@ export default {
     created() {
         this.getInit();
     },
+    mounted() {
+        if (this.isLogin) {
+            this.$http.get('/userDetail/get/' + this.userInfo.id).then(res => {
+                this.info = res;
+            });
+            this.$http.get('/userDetail/light/' + this.userInfo.id).then(res => {
+                this.light = res;
+            });
+        }
+    },
     methods: {
         getInit(refresh) {
             if (this.isLogin) {
@@ -367,20 +467,217 @@ export default {
                 });
         },
         changeShow(isPublicShow) {
-            this.$dialog
-                .confirm({
-                    title: isPublicShow ? '关闭隐私' : '开启隐私',
-                    message: isPublicShow ? '关闭后，他人将看到你的主页信息' : '开启后，他人将无法查看你的主页信息'
-                })
-                .then(() => {
-                    this.updateUser({ isPublicShow: isPublicShow });
-                });
+            console.log('qeeqwe', isPublicShow);
+            this.turnPrivacy = false;
+            this.turnOffPrivacy = false;
+            this.updateUser({ isPublicShow: isPublicShow });
+            // this.$dialog
+            //     .confirm({
+            //         title: isPublicShow ? '关闭隐私' : '开启隐私',
+            //         message: isPublicShow ? '关闭后，他人将看到你的主页信息' : '开启后，他人将无法查看你的主页信息'
+            //     })
+            //     .then(() => {
+
+            //     });
         }
     }
 };
 </script>
 
 <style lang="less" scoped>
+.risk-box {
+    width: calc(100vw - 95px);
+    background: #ffffff;
+    position: relative;
+    border-radius: 8px;
+    .toiIlluminate_imgOne {
+        width: 96px;
+        height: 100px;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+    }
+    .toiIlluminate_imgTwo {
+        width: 40px;
+        height: 129px;
+        position: absolute;
+        left: 0px;
+        bottom: 0px;
+    }
+    .risk-box_id {
+        padding-top: 30px;
+        padding-left: 20px;
+        font-size: 24px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: bold;
+        color: #000000;
+        line-height: 34px;
+        position: relative;
+        .risk-box_id_one {
+            position: relative;
+            z-index: 2002;
+            margin-bottom: 30px;
+        }
+        .risk-box_id_two {
+            width: 84px;
+            height: 14px;
+            background: #48d802;
+            border-radius: 7px;
+            position: absolute;
+            left: 20px;
+            bottom: 0px;
+        }
+    }
+    .risk-box_tip {
+        padding-left: 20px;
+        margin-bottom: 12px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #939599;
+        line-height: 20px;
+    }
+    .risk-box_title {
+        margin-bottom: 10px;
+    }
+    .risk-box_title_con {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #1b1b1b;
+        line-height: 20px;
+        padding-left: 30px;
+        padding-right: 20px;
+        position: relative;
+    }
+    .risk-box_title_con::after {
+        content: '';
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #3ab200;
+        position: absolute;
+        top: 6px;
+        left: 18px;
+    }
+    .to_illuminate {
+        margin-top: 40px;
+        padding: 0px 20px;
+        margin-bottom: 10px;
+        position: relative;
+        z-index: 2002;
+        .to_illuminate_con {
+            height: 38px;
+            background: #3ab200;
+            border-radius: 19px;
+            font-size: 16px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 38px;
+            text-align: center;
+        }
+    }
+    .perfect_tip {
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #939599;
+        line-height: 17px;
+        text-align: center;
+        padding-bottom: 14px;
+    }
+}
+.wrapper {
+    height: 260px;
+    width: calc(100vw - 115px);
+    // width: calc(100vw);
+    background: #ffffff;
+    border-radius: 16px 16px 0px 0px;
+    position: relative;
+    .privacy_off_img {
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        top: 16px;
+        right: 16px;
+    }
+    .wrapper_img {
+        display: flex;
+        justify-content: center;
+        .privacy_img {
+            width: 64px;
+            height: 64px;
+            padding-top: 22px;
+        }
+    }
+    .wrapper_title {
+        font-size: 16px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: bold;
+        color: #000000;
+        line-height: 24px;
+        margin-top: 4px;
+        margin-bottom: 8px;
+        text-align: center;
+    }
+    .wrapper_tip {
+        padding: 0px 16px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #939599;
+        line-height: 20px;
+        text-align: center;
+        margin-bottom: 28px;
+    }
+    .wrapper_division {
+        width: 100%;
+        height: 1px;
+        background: #f2f4f5;
+        margin-bottom: 9px;
+    }
+    .wrapper_btn {
+        padding: 0px 16px;
+        display: flex;
+        justify-content: space-between;
+        .wrapper_btn_left {
+            width: calc(50vw - 83.5px);
+            height: 38px;
+            border-radius: 22px;
+            border: 1px solid #939599;
+            box-sizing: border-box;
+            font-size: 16px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: bold;
+            color: #939599;
+            line-height: 38px;
+            text-align: center;
+        }
+        .wrapper_btn_right {
+            width: calc(50vw - 83.5px);
+            height: 38px;
+            background: #3ab200;
+            border-radius: 22px;
+            font-size: 16px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+            line-height: 38px;
+            text-align: center;
+        }
+    }
+}
+.toiIlluminate_Three {
+    display: flex;
+    justify-content: center;
+    padding-top: 70px;
+    // transform: translateY(70px);
+    .toiIlluminate_imgThree {
+        width: 40px;
+        height: 40px;
+    }
+}
 .mine {
     background-color: #272b2e;
     padding-top: 0 !important;
@@ -631,11 +928,12 @@ export default {
         top: 0;
         left: 0;
         z-index: 1;
+        overflow: visible;
         &::after {
             content: '';
             position: absolute;
             left: 0;
-            bottom: 0;
+            bottom: -3px;
             height: 90px;
             right: 0;
             z-index: 1;
@@ -652,7 +950,7 @@ export default {
         font-size: 12px;
         color: @text3;
         line-height: 17px;
-        padding: 2px 0 0;
+        padding: 8px 0 0;
         text-align: center;
     }
 
@@ -762,22 +1060,66 @@ export default {
                     z-index: 1;
                 }
                 span {
+                    display: block;
+                    width: 60px;
                     font-size: 12px;
                     color: @text3;
                     line-height: 18px;
                     background: #373b3e;
                     border-radius: 2px;
                     padding: 0 4px 0 10px;
-                    transform: scale(0.8) translateX(-24px);
+                    transform: scale(0.8) translateX(-20px);
                     position: relative;
                     z-index: 0;
+                    flex-shrink: 0;
+                    white-space: nowrap;
+                }
+                &.authed_con{
+                    width: 90px;
                 }
-
                 &.authed {
+                    width: 90px;
+                    span {
+                        color: #418bff;
+                        background: #e8f3ff;
+                        position: relative;
+                        flex-shrink: 0;
+                        white-space: nowrap;
+                    }
+                }
+                &.autheds {
+                    position: relative;
+                    width: 90px;
+                    margin-right: 5px;
+                    span {
+                        display: block;
+                        width: 50px;
+                        color: #939599;
+                        background: #373b3e;
+                        position: relative;
+                        transform: scale(0.8) translateX(-15px);
+                        margin-right: 15px;
+                        flex-shrink: 0;
+                        white-space: nowrap;
+                    }
+                    .autheds_img {
+                        position: absolute;
+                        right: 0px;
+                        top: 1px;
+                        align-items: center;
+                        width: 16px;
+                        height: 16px;
+                    }
+                }
+                &.autheds_con {
+                     width: 90px;
+                    margin-right: 10px;
                     span {
-                        color: #ff8f3e;
-                        background-color: #ffefe8;
+                        color: #39af00;
+                        background: #f3ffed;
                         position: relative;
+                        flex-shrink: 0;
+                        white-space: nowrap;
                     }
                 }
             }
@@ -846,8 +1188,8 @@ export default {
     .flex();
     z-index: 20;
     img {
-        width: 18px;
-        height: 18px;
+        width: 20px;
+        height: 20px;
     }
     span {
         font-size: 12px;
@@ -855,26 +1197,26 @@ export default {
         line-height: 12px;
         margin-left: 4px;
     }
-    width: 72px;
-    height: 24px;
-    background: #272b2e;
-    border-radius: 4px;
+    // width: 72px;
+    // height: 24px;
+    // background: #272b2e;
+    // border-radius: 4px;
     justify-content: center;
 }
 
 .yinsi {
     position: absolute;
-    background: #3ab200;
-    border-radius: 4px;
+    // background: #3ab200;
+    // border-radius: 4px;
     top: calc(var(--safe-top) + 16px);
-    left: 16px;
+    right: 52px;
     z-index: 3;
-    padding: 0 11px;
-    height: 24px;
+    // padding: 0 11px;
+    // height: 24px;
     .flex();
     img {
-        width: 18px;
-        height: 18px;
+        width: 20px;
+        height: 20px;
     }
     span {
         font-size: 12px;

src/views/StarMap.vue

@@ -9,7 +9,7 @@
         pageType="light"
     >
         <div class="bg">
-            <img src="@assets/png-xingtu-bg.png" alt="" />
+            <img src="https://cdn.raex.vip/image/png-xingtu-bg.png" alt="" />
         </div>
         <div class="top">
             <div class="text1">欢迎您！探索者！</div>

src/views/Store.vue

@@ -569,7 +569,8 @@ export default {
                 sort: this.sort === 'price' ? this.sort + this.sortDes : this.sort,
                 query: {
                     userId: this.$store.state.userInfo.id,
-                    ...this.beforeQuery()
+                    ...this.beforeQuery(),
+                    companyId: 1
                 }
             };
             if (this.type === 'xingtu') {

src/views/account/ChangeText.vue

@@ -1,12 +1,12 @@
 <template>
-    <div class="change">
-        <div class="title">{{ type === 'nickname' ? '昵称' : '简介' }}</div>
+    <div class="change" v-if="type === 'nickname'">
+        <div class="title">昵称</div>
         <van-field
             v-model="message"
-            :rows="type === 'nickname' ? 1 : 4"
+            :rows="1"
             type="textarea"
-            :maxlength="type === 'nickname' ? 10 : 50"
-            :placeholder="type === 'nickname' ? '请输入昵称' : '请添加介绍，让大家了解你'"
+            :maxlength="10"
+            :placeholder="'请输入昵称'"
             show-word-limit
             clearable
         />
@@ -15,11 +15,126 @@
                 type="primary"
                 block
                 round
-                :disabled="!message"
                 :color="`linear-gradient(to right, ${$colors.prim}, ${$colors.warn})`"
                 @click="save"
-                >保存</van-button
             >
+                保存
+            </van-button>
+        </div>
+    </div>
+    <div class="change" v-else-if="type === 'intro'">
+        <div class="title">简介</div>
+        <van-field
+            v-model="info.autograph"
+            :rows="4"
+            type="textarea"
+            :maxlength="50"
+            :placeholder="'请添加介绍,让大家了解你'"
+            show-word-limit
+            clearable
+        />
+        <div class="btn">
+            <van-button
+                type="primary"
+                block
+                round
+                :color="`linear-gradient(to right, ${$colors.prim}, ${$colors.warn})`"
+                @click="save"
+            >
+                保存
+            </van-button>
+        </div>
+    </div>
+    <div class="change" v-else-if="type === 'school'">
+        <div class="title">学校</div>
+        <van-field
+            v-model="info.school"
+            :rows="1"
+            type="textarea"
+            :maxlength="20"
+            :placeholder="'请输入学校'"
+            show-word-limit
+            clearable
+        />
+        <div class="btn">
+            <van-button
+                type="primary"
+                block
+                round
+                :color="`linear-gradient(to right, ${$colors.prim}, ${$colors.warn})`"
+                @click="save"
+            >
+                保存
+            </van-button>
+        </div>
+    </div>
+    <div class="change" v-else-if="type === 'occupation'">
+        <div class="title">职业</div>
+        <van-field
+            v-model="info.occupation"
+            :rows="1"
+            type="textarea"
+            :maxlength="20"
+            :placeholder="'请输入职业'"
+            show-word-limit
+            clearable
+        />
+        <div class="btn">
+            <van-button
+                type="primary"
+                block
+                round
+                :color="`linear-gradient(to right, ${$colors.prim}, ${$colors.warn})`"
+                @click="save"
+            >
+                保存
+            </van-button>
+        </div>
+    </div>
+    <div class="change" v-else-if="type === 'company'">
+        <div class="title">公司</div>
+        <van-field
+            v-model="info.company"
+            :rows="1"
+            type="textarea"
+            :maxlength="20"
+            :placeholder="'请输入公司'"
+            show-word-limit
+            clearable
+        />
+        <div class="btn">
+            <van-button
+                type="primary"
+                block
+                round
+                :color="`linear-gradient(to right, ${$colors.prim}, ${$colors.warn})`"
+                @click="save"
+            >
+                保存
+            </van-button>
+        </div>
+    </div>
+    <div class="change" v-else-if="type === 'mailbox'">
+        <div class="title">邮箱</div>
+        <van-field
+            v-model="info.mail"
+            :rows="1"
+            type="textarea"
+            :maxlength="40"
+            :placeholder="'请输入邮箱'"
+            show-word-limit
+            clearable
+        />
+        <div class="btn">
+            <van-button
+                type="primary"
+                block
+                round
+                :color="`linear-gradient(to right, ${$colors.prim}, ${$colors.warn})`"
+                @click="save"
+            >
+                保存
+            </van-button>
         </div>
     </div>
 </template>
@@ -33,22 +148,51 @@ export default {
     data() {
         return {
             type: 'nickname',
-            message: ''
+            message: '',
+            // briefIntroduction: '',
+            // school: '',
+            // occupation: "",
+            // company: '',
+            // mailbox: '',
+            info: {}
         };
     },
     mounted() {
         this.type = this.$route.query.type;
-        this.message = this.userInfo[this.type];
+        this.message = this.userInfo.nickname;
+        this.getInformation();
     },
     methods: {
+        getInformation() {
+            this.$http.get('/userDetail/get/' + this.userInfo.id).then(res => {
+                this.info = res;
+            });
+        },
         save() {
-            if (this.message) {
-                this.updateUser({ [this.type]: this.message }).then(() => {
-                    setTimeout(() => {
-                        this.$router.back();
-                    }, 1500);
-                });
+            let data = {
+                userId: this.userInfo.id,
+                ...this.info,
+                nickname: this.message
+            };
+            this.$http.post('/userDetail/save', data, { body: 'json' }).then(() => {
+                this.$toast.success('更新成功');
+                setTimeout(() => {
+                    this.$router.back();
+                }, 1500);
+            });
+            if (this.type === 'nickname') {
+                this.updateUser({ [this.type]: this.message }).then(() => {});
+            } else if (this.type === 'intro') {
+                this.updateUser({ [this.type]: this.info.autograph }).then(() => {});
             }
+            // /userDetail/save
+            // if (this.message) {
+            //     this.updateUser({ [this.type]: this.message }).then(() => {
+            //         setTimeout(() => {
+            //             this.$router.back();
+            //         }, 1500);
+            //     });
+            // }
         }
     }
 };

src/views/account/Setting.vue

@@ -1,8 +1,175 @@
 <template>
     <div class="setting">
-        <div class="tabs">编辑资料</div>
-
-        <van-cell-group :border="false">
+        <div class="setting_top">
+            <div class="setting_top_left" @click="toMine">
+                <img :src="require('@assets/icon_fanhui@3x.png')" alt="" class="setting_top_left_img" />
+            </div>
+            <van-image
+                width="100%"
+                height="52vw"
+                :src="userInfo.bg ? userInfo.bg : require('@assets/creatorBg.png')"
+                loading-icon=""
+                fit="cover"
+                class="top-img"
+            />
+            <div class="setting_top_right">
+                <img :src="require('@assets/icon_touxiang@3x.png')" alt="" class="setting_top_right_img" />
+                <div>更换背景</div>
+                <van-uploader class="avatar" :after-read="afterRead2" result-type="file" />
+            </div>
+        </div>
+        <div class="setting_list">
+            <div class="setting_listOne">
+                <div class="setting_listOne_top">
+                    <van-image
+                        radius="50%"
+                        width="100"
+                        height="100"
+                        :src="userInfo.avatar || require('@assets/svgs/img_default_photo.svg')"
+                        fit="cover"
+                        class="setting_listOne_imgTwo"
+                    />
+                    <div class="setting_listOne_top_con">
+                        <img
+                            :src="require('@assets/icon_touxiang@3x (1).png')"
+                            alt=""
+                            class="setting_listOne_top_con_img"
+                        />
+                    </div>
+                    <van-uploader class="avatar" :after-read="afterRead" result-type="file" />
+                </div>
+                <div class="setting_listOne_text2">
+                    <span @click="showConsoleEve">ID:{{ userInfo.id }}</span>
+                    <img @click="copy" src="@assets/svgs/copy_icon.svg" alt="" style="margin-left: 2px" />
+                </div>
+                <div class="setting_list_con" @click="$router.push('/changeText?type=nickname')">
+                    <div class="setting_list_con_left">
+                        <img :src="require('@assets/fenxiang-icon@3x.png')" alt="" class="setting_list_con_left_img" />
+                        <van-field
+                            label="昵称"
+                            :model-value="info.nickname || userInfo.nickname"
+                            placeholder="你的昵称"
+                            readonly
+                        />
+                    </div>
+                    <img :src="require('@assets/icon_inter@3x.png')" alt="" class="setting_list_con_right" />
+                </div>
+                <div class="setting_list_con" @click="$router.push('/changeText?type=intro')">
+                    <div class="setting_list_con_left">
+                        <img :src="require('@assets/icon-jianjie@3x.png')" alt="" class="setting_list_con_left_img" />
+                        <van-field
+                            label="简介"
+                            :model-value="info.autograph"
+                            placeholder="有趣的介绍可以吸引更多粉丝"
+                            readonly
+                        />
+                    </div>
+                    <img :src="require('@assets/icon_inter@3x.png')" alt="" class="setting_list_con_right" />
+                </div>
+                <div class="setting_list_con" v-if="authStatus !== '已认证'" @click="goAuth">
+                    <div class="setting_list_con_left">
+                        <img :src="require('@assets/icon-renzheng@3x.png')" alt="" class="setting_list_con_left_img" />
+                        <van-field label="实名认证" model-value="未认证" placeholder="" readonly />
+                    </div>
+                    <img :src="require('@assets/icon_inter@3x.png')" alt="" class="setting_list_con_right" />
+                </div>
+                <div class="setting_list_con" v-else>
+                    <div class="setting_list_con_left">
+                        <img :src="require('@assets/icon-renzheng@3x.png')" alt="" class="setting_list_con_left_img" />
+                        <van-field label="实名认证" model-value="个人已认证" placeholder="" readonly />
+                    </div>
+                    <img :src="require('@assets/icon_inter@3x.png')" alt="" class="setting_list_con_right" />
+                </div>
+            </div>
+            <div class="setting_listTwo">
+                <div class="setting_list_con" @click="choice((title = 'gender'))">
+                    <div class="setting_list_con_left">
+                        <img :src="require('@assets/icon-xingbie@3x.png')" alt="" class="setting_list_con_left_img" />
+                        <van-field label="性别" :model-value="info.sex" placeholder="选择你的性别" readonly />
+                    </div>
+                    <img :src="require('@assets/icon_inter@3x.png')" alt="" class="setting_list_con_right" />
+                </div>
+                <div class="setting_list_con" @click="showTime = true">
+                    <div class="setting_list_con_left">
+                        <img :src="require('@assets/icon-shengri@3x.png')" alt="" class="setting_list_con_left_img" />
+                        <van-field label="生日" :model-value="info.birthday" placeholder="选择你的生日" readonly />
+                    </div>
+                    <img :src="require('@assets/icon_inter@3x.png')" alt="" class="setting_list_con_right" />
+                </div>
+                <div class="setting_list_con" @click="choice((title = 'blood'))">
+                    <div class="setting_list_con_left">
+                        <img :src="require('@assets/icon-xuexing@3x.png')" alt="" class="setting_list_con_left_img" />
+                        <van-field label="血型" :model-value="info.blood" placeholder="选择你的血型" readonly />
+                    </div>
+                    <img :src="require('@assets/icon_inter@3x.png')" alt="" class="setting_list_con_right" />
+                </div>
+                <div class="setting_list_con" @click="choice((title = 'constellation'))">
+                    <div class="setting_list_con_left">
+                        <img :src="require('@assets/icon-xingzuo@3x.png')" alt="" class="setting_list_con_left_img" />
+                        <van-field label="星座" :model-value="info.constellation" placeholder="选择你的星座" readonly />
+                    </div>
+                    <img :src="require('@assets/icon_inter@3x.png')" alt="" class="setting_list_con_right" />
+                </div>
+                <div class="setting_list_con" @click="shows = true">
+                    <div class="setting_list_con_left">
+                        <img :src="require('@assets/icon-diqu@3x.png')" alt="" class="setting_list_con_left_img" />
+                        <van-field label="地区" :model-value="info.home" placeholder="选择你所在的地区" readonly />
+                    </div>
+                    <img :src="require('@assets/icon_inter@3x.png')" alt="" class="setting_list_con_right" />
+                </div>
+                <div class="setting_list_con" @click="$router.push('/changeText?type=school')">
+                    <div class="setting_list_con_left">
+                        <img :src="require('@assets/icon-xuexiao@3x.png')" alt="" class="setting_list_con_left_img" />
+                        <van-field label="学校" :model-value="info.school" placeholder="你的学校" readonly />
+                    </div>
+                    <img :src="require('@assets/icon_inter@3x.png')" alt="" class="setting_list_con_right" />
+                </div>
+            </div>
+            <div class="setting_listThree">
+                <div class="setting_list_con" @click="$router.push('/changeText?type=occupation')">
+                    <div class="setting_list_con_left">
+                        <img :src="require('@assets/icon-zhiye@3x.png')" alt="" class="setting_list_con_left_img" />
+                        <van-field label="职业" :model-value="info.occupation" placeholder="你的职业" readonly />
+                    </div>
+                    <img :src="require('@assets/icon_inter@3x.png')" alt="" class="setting_list_con_right" />
+                </div>
+                <div class="setting_list_con" @click="$router.push('/changeText?type=company')">
+                    <div class="setting_list_con_left">
+                        <img :src="require('@assets/icon-gongsi@3x.png')" alt="" class="setting_list_con_left_img" />
+                        <van-field label="公司" :model-value="info.company" placeholder="你的公司" readonly />
+                    </div>
+                    <img :src="require('@assets/icon_inter@3x.png')" alt="" class="setting_list_con_right" />
+                </div>
+                <div class="setting_list_con" @click="$router.push('/changeText?type=mailbox')">
+                    <div class="setting_list_con_left">
+                        <img :src="require('@assets/icon-youxiang@3x.png')" alt="" class="setting_list_con_left_img" />
+                        <van-field label="邮箱" :model-value="info.mail" placeholder="你的邮箱" readonly />
+                    </div>
+                    <img :src="require('@assets/icon_inter@3x.png')" alt="" class="setting_list_con_right" />
+                </div>
+            </div>
+            <div class="setting_listThree" v-if="showConsole">
+                <div class="setting_list_con" v-if="showConsole" @click="goReview">
+                    <div class="setting_list_con_left">
+                        <img
+                            :src="require('@assets/icon-shenghebanben@3x.png')"
+                            alt=""
+                            class="setting_list_con_left_img"
+                        />
+                        <van-field label="审核版本" readonly />
+                    </div>
+                    <img :src="require('@assets/icon_inter@3x.png')" alt="" class="setting_list_con_right" />
+                </div>
+                <div class="setting_list_con" v-if="showConsole" @click="goTest">
+                    <div class="setting_list_con_left">
+                        <img :src="require('@assets/icon-ceshiapp@3x.png')" alt="" class="setting_list_con_left_img" />
+                        <van-field label="测试app" readonly />
+                    </div>
+                    <img :src="require('@assets/icon_inter@3x.png')" alt="" class="setting_list_con_right" />
+                </div>
+            </div>
+        </div>
+        <!-- <van-cell-group :border="false">
             <van-cell title="头像" is-link>
                 <template #value>
                     <van-image
@@ -47,6 +214,13 @@
             <van-cell class="not" v-if="showConsole" title="测试app" is-link @click="goTest" />
         </van-cell-group>
 
+        <van-action-sheet
+            v-model:show="show"
+            :actions="actions"
+            cancel-text="取消"
+            close-on-click-action
+            @select="chooseSex"
+        /> -->
         <van-action-sheet
             v-model:show="show"
             :actions="actions"
@@ -54,11 +228,26 @@
             close-on-click-action
             @select="chooseSex"
         />
+        <van-popup v-model:show="shows" position="bottom" :style="{ height: '30%' }">
+            <van-area :area-list="areaList" @cancel="cancel" @confirm="confirm" />
+        </van-popup>
+        <van-popup v-model:show="showTime" position="bottom" :style="{ height: '30%' }">
+            <van-datetime-picker
+                v-model="currentDate"
+                type="date"
+                title="选择年月日"
+                :min-date="minDate"
+                :max-date="maxDate"
+                @cancel="cancelTime"
+                @confirm="confirmTime"
+            />
+        </van-popup>
     </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
+import { areaList } from '@vant/area-data';
 import { ref } from 'vue';
 import eruda from 'eruda';
 export default {
@@ -67,24 +256,169 @@ export default {
     },
     data() {
         return {
-            showTest: false
+            showTest: false,
+            region: '',
+            info: {},
+            title: ''
         };
     },
     setup() {
         //性别
         const show = ref(false);
-        const actions = [{ name: '男' }, { name: '女' }];
-
+        const actions = [];
+        const shows = ref(false);
+        const showTime = ref(false);
+        const currentDate = ref(new Date(2021, 0, 1));
         return {
             show,
+            shows,
+            showTime,
             actions,
             clickNum: 0,
-            timeout: null
+            timeout: null,
+            areaList,
+            minDate: new Date(1970, 0, 1),
+            maxDate: new Date(2025, 10, 1),
+            currentDate
         };
     },
+    mounted() {
+        this.getInformation();
+        this.$http.get('/sysConfig/get/share_lvzhoushi_num,enable_wallet,enable_face_auth').then(res => {
+            if (res['share_lvzhoushi_num'] && res['share_lvzhoushi_num'].value) {
+                this.shareMoney = Number(res['share_lvzhoushi_num'].value);
+            }
+            this.enableWallet = res['enable_wallet'].value === '1';
+            this.faceAuth = res['enable_face_auth'].value === '1';
+        });
+    },
     methods: {
+        getInformation() {
+            this.$http.get('/userDetail/get/' + this.userInfo.id).then(res => {
+                this.info = res;
+            });
+        },
+        toMine() {
+            this.$router.push('/mine');
+        },
+        goAuth() {
+            if (this.authStatus === '认证中' || this.authStatus === '认证失败') {
+                this.$router.push('/waiting');
+            } else if (this.authStatus === '未认证') {
+                if (this.faceAuth) {
+                    this.$router.push('/faceAuth');
+                } else {
+                    this.$router.push('/verified');
+                }
+            }
+        },
+        choice(title) {
+            this.title = title;
+            this.show = true;
+            if (title == 'gender') {
+                this.actions = [{ name: '男' }, { name: '女' }];
+            } else if (title == 'blood') {
+                this.actions = [{ name: 'A' }, { name: 'B' }, { name: 'O' }, { name: 'AB' }, { name: 'RH' }];
+            } else if (title == 'constellation') {
+                this.actions = [
+                    { name: '白羊座' },
+                    { name: '金牛座' },
+                    { name: '双子座' },
+                    { name: '巨蟹座' },
+                    { name: '狮子座' },
+                    { name: '处女座' },
+                    { name: '天秤座' },
+                    { name: '天蝎座' },
+                    { name: '射手座' },
+                    { name: '摩羯座' },
+                    { name: '水瓶座' },
+                    { name: '双鱼座' }
+                ];
+            }
+        },
+        copy() {
+            this.$copyText(this.userInfo.id).then(
+                e => {
+                    this.$toast.success('复制成功');
+                    console.log(e);
+                },
+                e => {
+                    this.$toast('复制失败');
+                    console.log(e);
+                }
+            );
+        },
+        cancel() {
+            this.shows = false;
+        },
+        confirm(ConfirmResult) {
+            this.shows = false;
+            if (ConfirmResult[0].name === '北京市') {
+                this.region = ConfirmResult[1].name + ConfirmResult[2].name;
+            } else if (ConfirmResult[0].name === '天津市') {
+                this.region = ConfirmResult[1].name + ConfirmResult[2].name;
+            } else if (ConfirmResult[0].name === '上海市') {
+                this.region = ConfirmResult[1].name + ConfirmResult[2].name;
+            } else if (ConfirmResult[1].name === '重庆市') {
+                this.region = ConfirmResult[1].name + ConfirmResult[2].name;
+            } else if (ConfirmResult[1].name === '县') {
+                this.region = ConfirmResult[0].name + ConfirmResult[2].name;
+            } else {
+                this.region = ConfirmResult[0].name + ConfirmResult[1].name + ConfirmResult[2].name;
+            }
+            let data = {
+                userId: this.userInfo.id,
+                ...this.info,
+                home: this.region
+            };
+            this.$http.post('/userDetail/save', data, { body: 'json' }).then(() => {
+                this.$toast.success('更新成功');
+                this.getInformation();
+            });
+        },
+        cancelTime() {
+            this.showTime = false;
+        },
+        confirmTime() {
+            this.showTime = false;
+            this.currentDate = this.dayjs(this.currentDate).format('YYYY.MM.DD');
+            let data = {
+                userId: this.userInfo.id,
+                ...this.info,
+                birthday: this.currentDate
+            };
+            this.$http.post('/userDetail/save', data, { body: 'json' }).then(() => {
+                this.$toast.success('更新成功');
+                this.getInformation();
+            });
+        },
         chooseSex(val) {
-            this.updateUser({ sex: val.name });
+            let data = {
+                userId: this.userInfo.id
+            };
+            if (this.title == 'gender') {
+                data = {
+                    ...data,
+                    ...this.info,
+                    sex: val.name
+                };
+            } else if (this.title == 'blood') {
+                data = {
+                    ...data,
+                    ...this.info,
+                    blood: val.name
+                };
+            } else if (this.title == 'constellation') {
+                data = {
+                    ...data,
+                    ...this.info,
+                    constellation: val.name
+                };
+            }
+            this.$http.post('/userDetail/save', data, { body: 'json' }).then(() => {
+                this.$toast.success('更新成功');
+                this.getInformation();
+            });
         },
         afterRead(e) {
             this.$toast.loading({
@@ -92,6 +426,16 @@ export default {
                 forbidClick: true
             });
             this.updateFile(e, 'avatar', 300).then(img => {
+                let data = {
+                    userId: this.userInfo.id,
+                    ...this.info,
+                    pic: img
+                };
+                this.$http.post('/userDetail/save', data, { body: 'json' }).then(() => {
+                    this.$toast.clear();
+                    this.$toast.success('更新成功');
+                    this.getInformation();
+                });
                 this.updateUser({ avatar: img, useCollectionPic: false }).then(res => {
                     this.$toast.clear();
                 });
@@ -103,6 +447,16 @@ export default {
                 forbidClick: true
             });
             this.updateFile(e, 'bg', 1200).then(img => {
+                let data = {
+                    userId: this.userInfo.id,
+                    ...this.info,
+                    bgpic: img
+                };
+                this.$http.post('/userDetail/save', data, { body: 'json' }).then(() => {
+                    this.$toast.clear();
+                    this.$toast.success('更新成功');
+                    this.getInformation();
+                });
                 this.updateUser({ bg: img }).then(res => {
                     this.$toast.clear();
                 });
@@ -138,9 +492,175 @@ export default {
 
 <style lang="less" scoped>
 .setting {
-    padding: 10px 0 100px;
+    // padding: 10px 0 100px;
+    padding-top: var(--safe-top);
+    background: #272b2e;
+    min-height: 100vh;
+    // padding-bottom: 100px;
+    .setting_top {
+        position: relative;
+    }
+    .top-img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        overflow: visible;
+        &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: -3px;
+            height: 90px;
+            right: 0;
+            z-index: 1;
+            background: linear-gradient(180deg, rgba(39, 43, 46, 0) 0%, #272b2e 100%);
+        }
+    }
+    .setting_top_left {
+        position: absolute;
+        left: 16px;
+        top: 20px;
+        width: 32px;
+        height: 32px;
+        background: rgba(255, 255, 255, 0.1);
+        z-index: 99;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .setting_top_left_img {
+            width: 18px;
+            height: 18px;
+        }
+    }
+    .setting_top_right {
+        width: 88px;
+        height: 32px;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-left: 10px;
+        padding-right: 8px;
+        box-sizing: border-box;
+        position: absolute;
+        right: 16px;
+        top: 20px;
+        z-index: 99;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        flex-shrink: 0;
+        white-space: nowrap;
+        .setting_top_right_img {
+            width: 18px;
+            height: 18px;
+        }
+    }
+    .setting_list {
+        padding: 0px 16px;
+        transform: translateY(45vw);
+        position: relative;
+        z-index: 2;
+        padding-bottom: 100px;
+        .setting_list_con {
+            width: 100%;
+            height: 52px;
+            background: #373b3e;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 15px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #c3c4c5;
+            line-height: 24px;
+            .setting_list_con_left {
+                display: flex;
+                align-items: center;
+                .setting_list_con_left_img {
+                    width: 18px;
+                    height: 18px;
+                    margin-right: 6px;
+                }
+            }
+            .setting_list_con_right {
+                width: 24px;
+                height: 24px;
+            }
+        }
+        .setting_listOne {
+            background: #373b3e;
+            border-radius: 12px;
+            padding: 0px 12px 10px;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            transform: translateY(-40px);
+            .setting_listOne_top {
+                position: relative;
+                border-radius: 50%;
+                overflow: hidden;
+                transform: translateY(-60px);
+                -webkit-backface-visibility: hidden;
+                -webkit-transform: translate3d(0, 0, 0);
+                -webkit-mask-image: -webkit-radial-gradient(white, black);
+                -webkit-transform: translateY(-60px);
+                .setting_listOne_imgTwo {
+                    vertical-align: bottom;
+                }
+                .setting_listOne_top_con {
+                    position: absolute;
+                    left: 0px;
+                    bottom: 0px;
+                    width: 100px;
+                    height: 24px;
+                    background: rgba(0, 0, 0, 0.4);
+                    display: flex;
+                    justify-content: center;
+                    overflow: hidden;
+                    -webkit-backface-visibility: hidden;
+                    -webkit-transform: translate3d(0, 0, 0);
+                    .setting_listOne_top_con_img {
+                        width: 18px;
+                        height: 18px;
+                    }
+                }
+            }
+            .setting_listOne_text2 {
+                font-size: 14px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #939599;
+                line-height: 24px;
+                display: flex;
+                align-items: center;
+                margin-top: 6px;
+                margin-top: -50px;
+            }
+        }
+        .setting_listTwo {
+            margin-top: -28px;
+            background: #373b3e;
+            border-radius: 12px;
+            padding: 10px 12px;
+        }
+        .setting_listThree {
+            background: #373b3e;
+            border-radius: 12px;
+            padding: 10px 12px;
+            margin-top: 12px;
+        }
+    }
+}
+/deep/ .van-field__control {
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 24px;
 }
-
 .tabs {
     font-size: 20px;
     font-weight: bold;
@@ -159,8 +679,11 @@ export default {
 
 /deep/ .van-cell {
     align-items: center;
-    height: 70px;
     position: relative;
+    padding: 0px !important;
+    .van-field__label {
+        margin-right: -10px !important;
+    }
     .van-cell__title {
         span {
             font-weight: bold;
@@ -169,6 +692,10 @@ export default {
     }
 
     .van-cell__value {
+        width: calc(100vw - 200px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
         span {
             font-size: 16px;
             color: @text0;

src/views/account/SettingComplete.vue

@@ -0,0 +1,714 @@
+<template>
+    <div class="setting">
+        <div class="setting_top">
+            <div class="setting_top_left" @click="toMine">
+                <img :src="require('@assets/icon_fanhui@3x.png')" alt="" class="setting_top_left_img" />
+            </div>
+            <van-image
+                width="100%"
+                height="52vw"
+                :src="userInfo.bg ? userInfo.bg : require('@assets/creatorBg.png')"
+                loading-icon=""
+                fit="cover"
+                class="top-img"
+            />
+            <!-- <div class="setting_top_right">
+                <img :src="require('@assets/icon_touxiang@3x.png')" alt="" class="setting_top_right_img" />
+                <div>更换背景</div>
+                <van-uploader class="avatar" :after-read="afterRead2" result-type="file" />
+            </div> -->
+        </div>
+        <div class="setting_list">
+            <div class="setting_listOne">
+                <img
+                    :src="require('@assets/icon-bianji@3x.png')"
+                    alt=""
+                    class="setting_listOne_img"
+                    @click="$router.push('/setting')"
+                />
+                <van-image
+                    radius="50"
+                    width="100"
+                    height="100"
+                    :src="userInfo.avatar || require('@assets/svgs/img_default_photo.svg')"
+                    fit="cover"
+                    class="setting_listOne_imgTwo"
+                />
+                <div class="setting_listOne_text1">
+                    <span class="van-ellipsis" style="max-width: 120px">{{ info.nickname }}</span>
+                </div>
+                <div class="setting_listOne_text2">
+                    <span>ID:{{ info.userId }}</span>
+                    <img @click="copy" src="@assets/svgs/copy_icon.svg" alt="" style="margin-left: 2px" />
+                </div>
+                <div class="icons">
+                    <div class="auth-imgs authed_con" v-if="authStatus != '已认证'">
+                        <img :src="require('@assets/renzheng_icon.png')" alt="" />
+                        <span>未实名认证</span>
+                    </div>
+                    <div class="auth-imgs authed" v-else>
+                        <img :src="require('@assets/icon-yirenzheng@3x.png')" alt="" />
+                        <span>个人已认证</span>
+                    </div>
+                    <div class="auth-imgs autheds_one" @click="illuminateShow = true" v-if="light == false">
+                        <img :src="require('@assets/icon-weidianliang@3x.png')" alt="" class="autheds_one_img" />
+                        <span>
+                            去点亮
+                            <img :src="require('@assets/icon-xialajiantou@3x (1).png')" alt="" class="autheds_img" />
+                        </span>
+                    </div>
+                    <div class="auth-imgs autheds" v-else>
+                        <img :src="require('@assets/icon-yidianliang@3x.png')" alt="" />
+                        <span>元宇宙身份</span>
+                    </div>
+                    <level ref="level"></level>
+                </div>
+                <div class="personal_signature">{{ info.autograph }}</div>
+            </div>
+            <div class="setting_listTwo">
+                <div class="setting_listTwo_con">
+                    <div class="setting_listTwo_con_num">{{ info.nftCount || 0 }}</div>
+                    <div class="setting_listTwo_con_title">持有总量</div>
+                </div>
+                <div class="setting_listTwo_con">
+                    <div class="setting_listTwo_con_num">{{ info.buildCount || 0 }}</div>
+                    <div class="setting_listTwo_con_title">建筑总量</div>
+                </div>
+                <div class="setting_listTwo_con">
+                    <div class="setting_listTwo_con_num">{{ info.plotCount || 0 }}</div>
+                    <div class="setting_listTwo_con_title">地块总量</div>
+                </div>
+                <div class="setting_listTwo_con">
+                    <div class="setting_listTwo_con_num">{{ info.fansCount || 0 }}</div>
+                    <div class="setting_listTwo_con_title">粉丝总量</div>
+                </div>
+                <div class="setting_listTwo_con">
+                    <div class="setting_listTwo_con_num">{{ info.reikiCount || 0 }}</div>
+                    <div class="setting_listTwo_con_title">灵气总量</div>
+                </div>
+                <div class="setting_listTwo_con">
+                    <div class="setting_listTwo_con_num">{{ info.medalCount || 0 }}</div>
+                    <div class="setting_listTwo_con_title">徽章总量</div>
+                </div>
+                <div class="setting_listTwo_con">
+                    <div class="setting_listTwo_con_num">{{ info.personalheatCount || 0 }}</div>
+                    <div class="setting_listTwo_con_title">个人热力值</div>
+                </div>
+            </div>
+            <div class="setting_listThree">
+                <div class="setting_listThree_con">
+                    <div class="setting_listThree_con_left">
+                        <img
+                            :src="require('@assets/icon-xingbie@3x.png')"
+                            alt=""
+                            class="setting_listThree_con_left_img"
+                        />
+                        <div class="setting_listThree_con_left_title">性别</div>
+                    </div>
+                    <div class="setting_listThree_con_right">{{ info.sex || '暂未设置' }}</div>
+                </div>
+                <div class="setting_listThree_con">
+                    <div class="setting_listThree_con_left">
+                        <img
+                            :src="require('@assets/icon-shengri@3x.png')"
+                            alt=""
+                            class="setting_listThree_con_left_img"
+                        />
+                        <div class="setting_listThree_con_left_title">生日</div>
+                    </div>
+                    <div class="setting_listThree_con_right">{{ info.birthday || '暂未设置' }}</div>
+                </div>
+                <div class="setting_listThree_con">
+                    <div class="setting_listThree_con_left">
+                        <img
+                            :src="require('@assets/icon-xuexing@3x.png')"
+                            alt=""
+                            class="setting_listThree_con_left_img"
+                        />
+                        <div class="setting_listThree_con_left_title">血型</div>
+                    </div>
+                    <div class="setting_listThree_con_right">{{ info.blood || '暂未设置' }}</div>
+                </div>
+                <div class="setting_listThree_con">
+                    <div class="setting_listThree_con_left">
+                        <img
+                            :src="require('@assets/icon-xingzuo@3x.png')"
+                            alt=""
+                            class="setting_listThree_con_left_img"
+                        />
+                        <div class="setting_listThree_con_left_title">星座</div>
+                    </div>
+                    <div class="setting_listThree_con_right">{{ info.constellation || '暂未设置' }}</div>
+                </div>
+                <div class="setting_listThree_con">
+                    <div class="setting_listThree_con_left">
+                        <img :src="require('@assets/icon-diqu@3x.png')" alt="" class="setting_listThree_con_left_img" />
+                        <div class="setting_listThree_con_left_title">地区</div>
+                    </div>
+                    <div class="setting_listThree_con_right">{{ info.home || '暂未设置' }}</div>
+                </div>
+                <div class="setting_listThree_con">
+                    <div class="setting_listThree_con_left">
+                        <img
+                            :src="require('@assets/icon-xuexiao@3x.png')"
+                            alt=""
+                            class="setting_listThree_con_left_img"
+                        />
+                        <div class="setting_listThree_con_left_title">学校</div>
+                    </div>
+                    <div class="setting_listThree_con_right">{{ info.school || '暂未设置' }}</div>
+                </div>
+            </div>
+            <div class="setting_listThree">
+                <div class="setting_listThree_con">
+                    <div class="setting_listThree_con_left">
+                        <img
+                            :src="require('@assets/icon-zhiye@3x.png')"
+                            alt=""
+                            class="setting_listThree_con_left_img"
+                        />
+                        <div class="setting_listThree_con_left_title">职业</div>
+                    </div>
+                    <div class="setting_listThree_con_right">{{ info.occupation || '暂未设置' }}</div>
+                </div>
+                <div class="setting_listThree_con">
+                    <div class="setting_listThree_con_left">
+                        <img
+                            :src="require('@assets/icon-gongsi@3x.png')"
+                            alt=""
+                            class="setting_listThree_con_left_img"
+                        />
+                        <div class="setting_listThree_con_left_title">公司</div>
+                    </div>
+                    <div class="setting_listThree_con_right">{{ info.company || '暂未设置' }}</div>
+                </div>
+                <div class="setting_listThree_con">
+                    <div class="setting_listThree_con_left">
+                        <img
+                            :src="require('@assets/icon-youxiang@3x.png')"
+                            alt=""
+                            class="setting_listThree_con_left_img"
+                        />
+                        <div class="setting_listThree_con_left_title">邮箱</div>
+                    </div>
+                    <div class="setting_listThree_con_right">{{ info.mail || '暂未设置' }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <van-dialog v-model:show="illuminateShow" theme="round-button" className="risk">
+        <div class="risk-box">
+            <img :src="require('@assets/png-bg@3x.png')" alt="" class="toiIlluminate_imgOne" />
+            <img :src="require('@assets/png-bg@3x (1).png')" alt="" class="toiIlluminate_imgTwo" />
+            <div class="risk-box_id">
+                <div class="risk-box_id_one">元宇宙身份证</div>
+                <div class="risk-box_id_two"></div>
+            </div>
+            <div class="risk-box_tip">元宇宙身份证是什么？</div>
+            <div class="risk-box_title">
+                <div class="risk-box_title_con">元宇宙身份证，是绿洲宇宙的探索者在元宇宙中的唯一身份标识</div>
+            </div>
+            <div class="risk-box_title">
+                <div class="risk-box_title_con">
+                    RAEX绿洲与OASISMETA绿洲元宇宙将会共享您的身份信息，让您在绿洲元宇宙中的探索更加有趣及有价值
+                </div>
+            </div>
+            <div class="to_illuminate">
+                <div class="to_illuminate_con" @click="$router.push('/setting')">去点亮</div>
+            </div>
+            <div class="perfect_tip">完善资料信息，点亮图标</div>
+        </div>
+        <template #footer>
+            <div class="toiIlluminate_Three">
+                <img
+                    :src="require('@assets/icon_fenxiang_close@3x.png')"
+                    alt=""
+                    class="toiIlluminate_imgThree"
+                    @click="illuminateShow = false"
+                />
+            </div>
+        </template>
+    </van-dialog>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import { ref } from 'vue';
+import eruda from 'eruda';
+import Level from '../../components/level/Level.vue';
+export default {
+    computed: {
+        ...mapState(['userInfo', 'showConsole'])
+    },
+    components: { Level },
+    data() {
+        return {
+            showTest: false,
+            info: {},
+            light: null,
+            illuminateShow: false
+        };
+    },
+    mounted() {
+        this.$http.get('/userDetail/get/' + this.userInfo.id).then(res => {
+            this.info = res;
+        });
+        this.$http.get('/userDetail/light/' + this.userInfo.id).then(res => {
+            this.light = res;
+        });
+    },
+    methods: {
+        copy() {
+            this.$copyText(this.userInfo.id).then(
+                e => {
+                    this.$toast.success('复制成功');
+                    console.log(e);
+                },
+                e => {
+                    this.$toast('复制失败');
+                    console.log(e);
+                }
+            );
+        },
+        toMine() {
+            this.$router.push('/mine');
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .van-image{
+    // overflow: visible;
+}
+.risk-box {
+    width: calc(100vw - 95px);
+    background: #ffffff;
+    position: relative;
+    border-radius: 8px;
+    .toiIlluminate_imgOne {
+        width: 96px;
+        height: 100px;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+    }
+    .toiIlluminate_imgTwo {
+        width: 40px;
+        height: 129px;
+        position: absolute;
+        left: 0px;
+        bottom: 0px;
+    }
+    .risk-box_id {
+        padding-top: 30px;
+        padding-left: 20px;
+        font-size: 24px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: bold;
+        color: #000000;
+        line-height: 34px;
+        position: relative;
+        .risk-box_id_one {
+            position: relative;
+            z-index: 2002;
+            margin-bottom: 30px;
+        }
+        .risk-box_id_two {
+            width: 84px;
+            height: 14px;
+            background: #48d802;
+            border-radius: 7px;
+            position: absolute;
+            left: 20px;
+            bottom: 0px;
+        }
+    }
+    .risk-box_tip {
+        padding-left: 20px;
+        margin-bottom: 12px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #939599;
+        line-height: 20px;
+    }
+    .risk-box_title {
+        margin-bottom: 10px;
+    }
+    .risk-box_title_con {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #1b1b1b;
+        line-height: 20px;
+        padding-left: 30px;
+        padding-right: 20px;
+        position: relative;
+    }
+    .risk-box_title_con::after {
+        content: '';
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #3ab200;
+        position: absolute;
+        top: 6px;
+        left: 18px;
+    }
+    .to_illuminate {
+        margin-top: 40px;
+        padding: 0px 20px;
+        margin-bottom: 10px;
+        position: relative;
+        z-index: 2002;
+        .to_illuminate_con {
+            height: 38px;
+            background: #3ab200;
+            border-radius: 19px;
+            font-size: 16px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 38px;
+            text-align: center;
+        }
+    }
+    .perfect_tip {
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #939599;
+        line-height: 17px;
+        text-align: center;
+        padding-bottom: 14px;
+    }
+}
+.toiIlluminate_Three {
+    display: flex;
+    justify-content: center;
+    padding-top: 70px;
+    // transform: translateY(70px);
+    .toiIlluminate_imgThree {
+        width: 40px;
+        height: 40px;
+    }
+}
+.setting {
+    padding-top: var(--safe-top);
+    background: #272b2e;
+    min-height: 100vh;
+    // padding-bottom: 100px;
+    .setting_top {
+        position: relative;
+        .top-img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 1;
+            overflow: visible;
+            &::after {
+                content: '';
+                position: absolute;
+                left: 0;
+                bottom: -3px;
+                height: 90px;
+                right: 0;
+                z-index: 1;
+                background: linear-gradient(180deg, rgba(39, 43, 46, 0) 0%, #272b2e 100%);
+            }
+        }
+    }
+    .setting_top_left {
+        position: absolute;
+        left: 16px;
+        top: 20px;
+        width: 32px;
+        height: 32px;
+        background: rgba(255, 255, 255, 0.1);
+        z-index: 99;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .setting_top_left_img {
+            width: 18px;
+            height: 18px;
+        }
+    }
+    .setting_top_right {
+        width: 88px;
+        height: 32px;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-left: 10px;
+        padding-right: 8px;
+        box-sizing: border-box;
+        position: absolute;
+        right: 16px;
+        top: 20px;
+        z-index: 99;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        .setting_top_right_img {
+            width: 18px;
+            height: 18px;
+        }
+    }
+    .setting_list {
+        padding: 0px 16px;
+        transform: translateY(45vw);
+        position: relative;
+        z-index: 2;
+        padding-bottom: 100px;
+        .setting_listOne {
+            background: #373b3e;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            transform: translateY(-50px);
+            padding: 0px 12px 16px;
+            box-sizing: border-box;
+            position: relative;
+            .setting_listOne_img {
+                width: 24px;
+                height: 24px;
+                position: absolute;
+                top: 16px;
+                right: 16px;
+            }
+            .setting_listOne_imgTwo {
+                transform: translateY(-50px);
+            }
+            .setting_listOne_text1 {
+                font-size: 24px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: bold;
+                color: #ffffff;
+                line-height: 24px;
+                margin-top: -34px;
+            }
+            .setting_listOne_text2 {
+                font-size: 14px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #939599;
+                line-height: 24px;
+                display: flex;
+                align-items: center;
+                margin-top: 6px;
+            }
+            .icons {
+                margin-top: 4px;
+                display: flex;
+                // .flex();
+                .auth-imgs {
+                    .flex();
+                    transform: translateX(15px);
+                    img {
+                        width: 28px;
+                        height: 28px;
+                        position: relative;
+                        z-index: 1;
+                    }
+                    span {
+                        display: block;
+                        width: 60px;
+                        font-size: 12px;
+                        color: @text3;
+                        line-height: 18px;
+                        background-color: rgba(113, 113, 113, 0.2);
+                        border-radius: 2px;
+                        padding: 0 4px 0 10px;
+                        transform: scale(0.8) translateX(-20px);
+                        position: relative;
+                        z-index: 0;
+                        flex-shrink: 0;
+                        white-space: nowrap;
+                    }
+                    &.authed_con{
+                        width: 90px;
+                    }
+                    &.authed {
+                        width: 90px;
+                        span {
+                            color: #418bff;
+                            background: #e8f3ff;
+                            position: relative;
+                            flex-shrink: 0;
+                            white-space: nowrap;
+                        }
+                    }
+                    &.autheds {
+                        width: 90px;
+                        margin-right: 10px;
+                        span {
+                            color: #39af00;
+                            background: #f3ffed;
+                            position: relative;
+                            flex-shrink: 0;
+                            white-space: nowrap;
+                        }
+                    }
+                    &.autheds_one {
+                        position: relative;
+                        width: 90px;
+                        margin-right: 5px;
+                        span {
+                            display: block;
+                            width: 50px;
+                            color: #939599;
+                            background: rgba(113, 113, 113, 0.2);
+                            position: relative;
+                            transform: scale(0.8) translateX(-15px);
+                            margin-right: 15px;
+                            flex-shrink: 0;
+                            white-space: nowrap;
+                        }
+                        .autheds_img {
+                            position: absolute;
+                            right: 0px;
+                            top: 1px;
+                            align-items: center;
+                            width: 16px;
+                            height: 16px;
+                        }
+                    }
+                }
+            }
+            .personal_signature {
+                margin-top: 12px;
+                font-size: 13px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 18px;
+            }
+        }
+        .setting_listTwo {
+            margin-top: -39px;
+            padding: 16px 10px 6px;
+            background: #373b3e;
+            border-radius: 12px;
+            display: flex;
+            flex-wrap: wrap;
+            .setting_listTwo_con {
+                width: calc(25vw - 22px);
+                height: 54px;
+                text-align: center;
+                margin-right: 12px;
+                margin-bottom: 10px;
+                position: relative;
+                padding-top: 8px;
+                box-sizing: border-box;
+                .setting_listTwo_con_num {
+                    font-size: 18px;
+                    font-weight: bold;
+                    color: #ffffff;
+                    line-height: 24px;
+                }
+                .setting_listTwo_con_title {
+                    font-size: 12px;
+                    font-weight: 400;
+                    color: #c3c4c5;
+                    line-height: 17px;
+                }
+            }
+            .setting_listTwo_con:nth-of-type(4) {
+                margin-right: 0px;
+            }
+            .setting_listTwo_con:nth-of-type(1)::after {
+                content: '';
+                width: 1px;
+                height: 30px;
+                background: rgba(255, 255, 255, 0.1);
+                position: absolute;
+                right: -6px;
+                top: 12px;
+            }
+            .setting_listTwo_con:nth-of-type(2)::after {
+                content: '';
+                width: 1px;
+                height: 30px;
+                background: rgba(255, 255, 255, 0.1);
+                position: absolute;
+                right: -6px;
+                top: 12px;
+            }
+            .setting_listTwo_con:nth-of-type(3)::after {
+                content: '';
+                width: 1px;
+                height: 30px;
+                background: rgba(255, 255, 255, 0.1);
+                position: absolute;
+                right: -6px;
+                top: 12px;
+            }
+            .setting_listTwo_con:nth-of-type(5)::after {
+                content: '';
+                width: 1px;
+                height: 30px;
+                background: rgba(255, 255, 255, 0.1);
+                position: absolute;
+                right: -6px;
+                top: 12px;
+            }
+            .setting_listTwo_con:nth-of-type(6)::after {
+                content: '';
+                width: 1px;
+                height: 30px;
+                background: rgba(255, 255, 255, 0.1);
+                position: absolute;
+                right: -6px;
+                top: 12px;
+            }
+        }
+        .setting_listThree {
+            padding: 10px 0px;
+            background: #373b3e;
+            border-radius: 12px;
+            margin-top: 12px;
+            .setting_listThree_con {
+                height: 52px;
+                display: flex;
+                padding: 0px 12px;
+                align-items: center;
+                .setting_listThree_con_left {
+                    display: flex;
+                    margin-right: 44px;
+                    align-items: center;
+                    .setting_listThree_con_left_img {
+                        width: 18px;
+                        height: 18px;
+                        margin-right: 6px;
+                    }
+                    .setting_listThree_con_left_title {
+                        font-size: 15px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: #c3c4c5;
+                        line-height: 24px;
+                    }
+                }
+                .setting_listThree_con_right {
+                    width: calc(50vw);
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    font-size: 15px;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: bold;
+                    color: #ffffff;
+                    line-height: 24px;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/activity/ChooseProduct.vue

@@ -30,49 +30,109 @@
             />
 
             <div class="list">
-                <div
-                    class="product"
-                    :class="{ active: chooseIds.includes(item.id) }"
-                    v-for="item in collections"
-                    :key="item.id"
-                    @click="choose(item.id, item)"
-                >
-                    <img
-                        class="icon"
-                        :src="
-                            chooseIds.includes(item.id)
-                                ? require('../../assets/icon_gouxuan_pre.png')
-                                : require('../../assets/icon_gouxuan_huise.png')
-                        "
-                        alt=""
-                    />
-                    <div class="product-content">
-                        <van-image
-                            width="60"
-                            height="60"
-                            radius="6"
-                            :src="getImg(changeImgs(item.pic, 600))"
-                            fit="contain"
-                        />
-                        <div class="product-info">
-                            <div class="text1 van-ellipsis">{{ item.name }}</div>
-                            <div class="flex1"></div>
-                            <div class="text2" v-if="item.category">{{ item.category }}</div>
-                            <div class="text2" v-if="item.number">编号：{{ item.number }}</div>
+                <template v-for="item in collections" :key="item.id">
+                    <div class="product-list" v-if="item.collectionInfos">
+                        <div
+                            class="product product-top"
+                            :class="{ active: chooseIds.includes(item.id) }"
+                            @click="item.showMore = !item.showMore"
+                        >
+                            <div class="product-content">
+                                <van-image
+                                    width="60"
+                                    height="60"
+                                    radius="6"
+                                    :src="getImg(changeImgs(item.pic, 600))"
+                                    fit="contain"
+                                />
+                                <div class="product-info">
+                                    <div class="text1 van-ellipsis">{{ item.name }}</div>
+                                    <div class="flex1"></div>
+                                    <div class="text2" v-if="item.category">{{ item.category }}</div>
+                                </div>
+                            </div>
+                            <div class="product-desc" v-if="getChooseNum(item.collectionInfos)">
+                                已选{{ getChooseNum(item.collectionInfos) }}个
+                            </div>
+                            <img class="more" :class="{ open: item.showMore }" src="@assets/icon_inter.png" alt="" />
                         </div>
+                        <template v-if="item.showMore">
+                            <div
+                                class="product product-small"
+                                v-for="(pro, proIndex) in item.collectionInfos"
+                                :key="proIndex"
+                                :class="{ active: chooseIds.includes(pro.id) }"
+                                @click="choose(pro.id, item)"
+                            >
+                                <img
+                                    class="icon"
+                                    :src="
+                                        chooseIds.includes(pro.id)
+                                            ? require('../../assets/icon_gouxuan_pre.png')
+                                            : require('../../assets/icon_gouxuan_huise.png')
+                                    "
+                                    alt=""
+                                />
+                                <div class="product-content">
+                                    <van-image
+                                        width="45"
+                                        height="45"
+                                        radius="6"
+                                        :src="getImg(changeImgs(pro.pic, 600))"
+                                        fit="contain"
+                                    />
+                                    <div class="product-info">
+                                        <div class="text1 van-ellipsis">{{ pro.name }}</div>
+                                        <div class="flex1"></div>
+                                        <div class="text2" v-if="item.number">编号：{{ pro.number }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
                     </div>
-                    <div class="num-right" @click.stop="" v-if="item.collections">
-                        <van-stepper
-                            v-model="item.num"
-                            :name="item.id"
-                            :min="0"
-                            :max="item.collections.length"
-                            @change="changeStepper"
-                            size="mini"
+                    <div
+                        class="product"
+                        :class="{ active: chooseIds.includes(item.id) }"
+                        @click="choose(item.id, item)"
+                        v-else
+                    >
+                        <img
+                            class="icon"
+                            :src="
+                                chooseIds.includes(item.id)
+                                    ? require('../../assets/icon_gouxuan_pre.png')
+                                    : require('../../assets/icon_gouxuan_huise.png')
+                            "
+                            alt=""
                         />
-                        <div class="num-text">共{{ item.collections.length }}个</div>
+                        <div class="product-content">
+                            <van-image
+                                width="60"
+                                height="60"
+                                radius="6"
+                                :src="getImg(changeImgs(item.pic, 600))"
+                                fit="contain"
+                            />
+                            <div class="product-info">
+                                <div class="text1 van-ellipsis">{{ item.name }}</div>
+                                <div class="flex1"></div>
+                                <div class="text2" v-if="item.category">{{ item.category }}</div>
+                                <div class="text2" v-if="item.number">编号：{{ item.number }}</div>
+                            </div>
+                        </div>
+                        <div class="num-right" @click.stop="" v-if="item.collections">
+                            <van-stepper
+                                v-model="item.num"
+                                :name="item.id"
+                                :min="0"
+                                :max="item.collections.length"
+                                @change="changeStepper"
+                                size="mini"
+                            />
+                            <div class="num-text">共{{ item.collections.length }}个</div>
+                        </div>
                     </div>
-                </div>
+                </template>
             </div>
         </van-pull-refresh>
 
@@ -107,15 +167,68 @@ export default {
     watch: {
         showList() {
             let list = [...this.showList];
-            this.collections = list.map(item => {
-                return {
-                    ...item,
-                    num: 0
-                };
-            });
+            const getSort = info => {
+                if (info.collections) {
+                    return 2;
+                } else if (info.collectionInfos) {
+                    return 1;
+                } else {
+                    return 0;
+                }
+            };
+            this.collections = list
+                .map(item => {
+                    if (item.collectionInfos && item.collectionInfos.length > 1) {
+                        if (!this.info.audit) {
+                            let tags = [...this.rule.keys()];
+                            let need = 0;
+                            tags.forEach(tag => {
+                                if (item.name.indexOf(tag) !== -1) {
+                                    need = this.rule.get(tag);
+                                }
+                            });
+                            return {
+                                ...item,
+                                num: 0,
+                                showMore: false,
+                                need
+                            };
+                        }
+                        return {
+                            ...item,
+                            num: 0,
+                            showMore: false
+                        };
+                    } else {
+                        let info = { ...item };
+                        delete info.collectionInfos;
+                        return {
+                            ...info,
+                            num: 0
+                        };
+                    }
+                })
+                .sort((a, b) => {
+                    return getSort(b) - getSort(a);
+                });
         }
     },
     computed: {
+        rule() {
+            let rule = { ...this.info.rule };
+            let tags = new Map();
+            if (!this.info.audit) {
+                rule.and.forEach(item => {
+                    let num = 0;
+                    if (tags.has(item.detail.tag.name)) {
+                        num = tags.get(item.detail.tag.name);
+                    }
+                    num += item.detail.num;
+                    tags.set(item.detail.tag.name, num);
+                });
+            }
+            return tags;
+        },
         canNext() {
             return this.needChoose === 0 || this.chooseIds.length === this.needChoose;
         },
@@ -141,14 +254,21 @@ export default {
                         flag = false;
                     }
                 });
-                if (flag) {
-                    _map.set(item.id, item);
-                } else {
-                    let name= item.name.split("#")[0];
-                    if (_map.has(name)) {
-                        let info = _map.get(name);
+                let name = item.name.split('#')[0];
+                if (_map.has(name)) {
+                    let info = _map.get(name);
+                    if (flag) {
+                        info.collectionInfos.push(item);
+                    } else {
                         info.collections.push(item.id);
-                        _map.set(name, info);
+                    }
+                    _map.set(name, info);
+                } else {
+                    if (flag) {
+                        _map.set(name, {
+                            ...item,
+                            collectionInfos: [item]
+                        });
                     } else {
                         _map.set(name, {
                             ...item,
@@ -180,6 +300,7 @@ export default {
         if (this.$route.query.name) {
             this.search = this.$route.query.name;
         }
+
         this.$toast.loading({
             message: '加载中...',
             forbidClick: true
@@ -201,6 +322,13 @@ export default {
         }
     },
     methods: {
+        getChooseNum(collectionInfos) {
+            let chooseIds = [...this.chooseIds];
+            let collects = collectionInfos.filter(item => {
+                return chooseIds.includes(item.id);
+            });
+            return collects.length;
+        },
         changeStepper(value, detail) {
             console.log(value);
             let collectIndex = [...this.collections].findIndex(item => {
@@ -270,7 +398,9 @@ export default {
                     chooseIds.splice(index, 1);
                 }
             } else if (this.needNum > 0 || this.needChoose === 0) {
-                if (info.collections) {
+                if (info.need && this.getChooseNum(info.collectionInfos) >= info.need) {
+                    this.$toast(`该藏品只能选择${info.need}个`);
+                } else if (info.collections) {
                     info.num = this.needNum;
                     chooseIds = [...chooseIds, ...info.collections.slice(0, info.num)];
                 } else {
@@ -308,13 +438,17 @@ export default {
         },
         submit() {
             this.checkTips().then(() => {
+                let query = {
+                    assets: this.chooseIds.join(','),
+                    activityId: this.activityId,
+                    numList: this.numList.join(',')
+                };
+                if (this.$route.query.test) {
+                    query.test = true;
+                }
                 this.$router.push({
                     path: '/activitySubmit',
-                    query: {
-                        assets: this.chooseIds.join(','),
-                        activityId: this.activityId,
-                        numList: this.numList.join(',')
-                    }
+                    query
                 });
             });
         },
@@ -453,4 +587,30 @@ export default {
         margin-top: 6px;
     }
 }
+.product-list {
+    background-color: #fff;
+    overflow: hidden;
+    margin: 10px 10px;
+    border-radius: 12px;
+    transition: height ease-in-out 0.3s;
+    .product {
+        margin: 0 0;
+        &.product-top {
+            padding-left: 34px;
+        }
+    }
+
+    .product-desc {
+        font-size: 12px;
+        color: @prim;
+    }
+    .more {
+        width: 24px;
+        height: 24px;
+        transition: transform ease-in-out 0.3s;
+        &.open {
+            transform: rotate(90deg);
+        }
+    }
+}
 </style>

src/views/activity/Detail1.vue

@@ -127,6 +127,7 @@ export default {
     overflow: hidden;
     background-color: #27272b;
     margin-right: 10px;
+    flex-shrink: 0;
 
     div {
         font-size: 12px;
@@ -156,7 +157,8 @@ export default {
     .bottom(9px);
 
     /deep/.van-button {
-        width: 132px;
+        max-width: 132px;
+        flex-grow: 1;
         &.van-button--disabled {
             background: #303133;
             color: @text3;

src/views/activity/Submit.vue

@@ -250,19 +250,44 @@ export default {
             }
             this.$toast.loading('请不要离开当前页面');
 
-            return this.$http
-                .post('/mintOrder/create', {
-                    assets: this.assets,
-                    mintActivityId: this.activityId,
-                    addressId: this.addressInfo.id,
-                    invitor: sessionStorage.getItem('invitor')
-                })
-                .then(res => {
-                    return Promise.resolve(res);
-                })
-                .catch(e => {
-                    return Promise.reject(e);
-                });
+            if (this.$route.query.test) {
+                return this.$http
+                    .post('/mintOrder/testCreate', {
+                        assets: this.assets,
+                        mintActivityId: this.activityId,
+                        addressId: this.addressInfo.id,
+                        invitor: sessionStorage.getItem('invitor')
+                    })
+                    .then(res => {
+                        this.$toast.clear();
+                        this.$dialog
+                            .alert({
+                                message: res
+                            })
+                            .then(() => {
+                                this.$router.back();
+                            });
+                        return Promise.reject();
+                    })
+                    .catch(e => {
+                        this.$toast.clear();
+                        return Promise.reject(e);
+                    });
+            } else {
+                return this.$http
+                    .post('/mintOrder/create', {
+                        assets: this.assets,
+                        mintActivityId: this.activityId,
+                        addressId: this.addressInfo.id,
+                        invitor: sessionStorage.getItem('invitor')
+                    })
+                    .then(res => {
+                        return Promise.resolve(res);
+                    })
+                    .catch(e => {
+                        return Promise.reject(e);
+                    });
+            }
         },
         submit() {
             if (!this.payType) {

src/views/asset/Detail.vue

@@ -489,10 +489,10 @@
                 </div>
 
                 <div class="more-btns-content" v-else>
-                    <van-button @click="Consignment" type="primary" block round>{{
+                    <van-button v-if="!isOlder" @click="Consignment" type="primary" block round>{{
                         info.consignment ? '取消一口价' : '一口价拍卖'
                     }}</van-button>
-                    <van-button @click="publish" color="#FF7F1F" block round>竞价拍卖</van-button>
+                    <van-button v-if="!isOlder" @click="publish" color="#FF7F1F" block round>竞价拍卖</van-button>
                     <van-button @click="Add" color="#FFBF27" block round>赠送</van-button>
                     <van-button @click="showLock = true" color="#515976" block round>封存</van-button>
                     <van-button @click="starCreate" v-if="canStar" color="#5D7DFF" block round> 铸造星图</van-button>
@@ -584,7 +584,8 @@ export default {
             lockTime: 0,
             transactionPassword: '',
             destroyCartridge: false,
-            nots: []
+            nots: [],
+            olders: []
         };
     },
     computed: {
@@ -610,6 +611,13 @@ export default {
                 }
             });
             return flag;
+        },
+        isOlder() {
+            let olders = [...this.olders];
+            let info = olders.find(item => {
+                return this.info.name.indexOf(item) !== -1;
+            });
+            return !!info;
         }
     },
     mounted() {
@@ -626,9 +634,12 @@ export default {
             columns.push(i + 1 + '月');
         }
         this.columns = columns;
-        this.$http.get('/sysConfig/get/xingtu_not').then(res => {
-            if (res.value) {
-                this.nots = res.value.split(',');
+        this.$http.get('/sysConfig/get/xingtu_not,older_collections').then(res => {
+            if (res.xingtu_not.value) {
+                this.nots = res.xingtu_not.value.split(',');
+            }
+            if (res.older_collections) {
+                this.olders = res.older_collections.value.split(',');
             }
         });
     },

src/views/product/Detail.vue

@@ -381,7 +381,7 @@
             </div>
         </div>
 
-        <div class="btn van-safe-area-bottom" ref="btn" v-if="canSale && totalSales > 0">
+        <div class="btn van-safe-area-bottom" ref="btn" v-if="canSale && totalSales > 0 && !$store.state.reviewPay">
             <div class="btn-list btn-only">
                 <van-button type="primary" @click="showSale" block round>我想要</van-button>
             </div>

src/views/product/HopeMarket.vue

@@ -70,17 +70,24 @@
                         </template>
                     </van-tab>
                 </van-tabs>
-                <div class="allCategories" @click="categorySelections">
+                <div class="allCategories" :class="{ prim: search }" @click="categorySelections">
                     <div class="allCategories_con" :class="categorySelection ? 'allCategories_con_one' : ''">
                         全部类目
                     </div>
-                    <img
-                        src="@assets/icon-quanbuleimu@3x.png"
-                        alt=""
-                        class="allCategories_img"
-                        v-if="categorySelection == false"
-                    />
-                    <img src="@assets/icon-quanbuleimuone@3x.png" alt="" class="allCategories_img" v-else />
+                    <img class="allCategories_img" src="@assets/shaixuan_pre.png" v-if="search" alt="" />
+                    <img class="allCategories_img" src="@assets/shaixuan.png" v-else alt="" />
+                    <!-- <van-icon name="icon-shaixuan1" class-prefix="font_family" /> -->
+                </div>
+            </div>
+            <div class="selects" v-if="search" :class="{ select_three: rarityLabel }">
+                <div class="select-info">
+                    {{ setting.name }}
+                </div>
+                <div class="select-info" v-if="search">
+                    {{ search }}
+                </div>
+                <div class="select-info" v-if="rarityLabel">
+                    {{ rarityLabel }}
                 </div>
             </div>
             <div class="series_selection" v-if="categorySelection == true">
@@ -148,6 +155,8 @@
             cancel-text="取消"
             close-on-click-action
         /> -->
+
+        <product-select ref="select" @select="selectEvent"></product-select>
         <van-overlay :show="show" @click="(show = false), (categorySelection = false)"></van-overlay>
         <van-pull-refresh
             success-text="加载成功"
@@ -167,7 +176,11 @@
                     <product-info dark v-model:info="list[index]" @update:info="init"></product-info>
                 </template>
 
-                <van-empty :image="require('@assets/empty_img_asset.png')" v-if="empty" description="没有任何藏品哦~" />
+                <van-empty
+                    :image="require('@assets/empty_img_asset_dark.png')"
+                    v-if="empty"
+                    description="没有任何藏品哦~"
+                />
             </van-list>
         </van-pull-refresh>
     </div>
@@ -184,13 +197,14 @@ import SwiperCore, { Pagination, Autoplay } from 'swiper';
 // install Swiper modules
 SwiperCore.use([Pagination, Autoplay]);
 import ProductInfo from '../../components/product/productInfo.vue';
+import productSelect from '../../components/product/productSelect.vue';
 import product from '../../mixins/product';
 import list from '../../mixins/list';
 import banner from '../../mixins/banner';
 import { useWindowSize } from '@vant/use';
 export default {
     name: 'productList',
-    components: { ProductInfo },
+    components: { ProductInfo, productSelect },
     inject: ['setKeeps', 'scrollWrapper', 'changeScroll', 'barHeight'],
     mixins: [product, list, banner],
     setup() {
@@ -236,6 +250,7 @@ export default {
             settings: [],
             normalHeight: 0,
             settingId: 0,
+            setting: {},
             showSetting: false,
             barShow: false,
             notLike: '',
@@ -244,7 +259,10 @@ export default {
             activeSettingIndex: '',
             activeSettingIndexOne: '',
             offsetWidth: 0,
-            show: false
+            show: false,
+            productName: '',
+            rarityLabel: '',
+            search: ''
         };
     },
     computed: {
@@ -351,6 +369,13 @@ export default {
         });
     },
     methods: {
+        selectEvent(info) {
+            this.setting = info.setting;
+            this.search = info.search;
+            this.rarityLabel = info.rarityLabel;
+            this.productName = info.productName;
+            this.getData(true);
+        },
         onRefresh() {
             this.getData(true).then(() => {
                 this.isLoading = false;
@@ -388,7 +413,7 @@ export default {
                     });
                     setTimeout(() => {
                         this.$nextTick(() => {
-                            this.normalHeight = this.$refs.top.$el.offsetHeight;
+                            // this.normalHeight = this.$refs.top.$el.offsetHeight;
                         });
                     }, 500);
                 })
@@ -438,15 +463,16 @@ export default {
             }, 300);
         },
         categorySelections() {
-            this.categorySelection = !this.categorySelection;
-            if (this.categorySelection == true) {
-                this.$nextTick(() => {
-                    this.show = true;
-                    this.offsetWidth = this.$refs.zombie[0].offsetWidth;
-                });
-            } else {
-                this.show = false;
-            }
+            this.$refs.select.init();
+            // this.categorySelection = !this.categorySelection;
+            // if (this.categorySelection == true) {
+            //     this.$nextTick(() => {
+            //         this.show = true;
+            //         this.offsetWidth = this.$refs.zombie[0].offsetWidth;
+            //     });
+            // } else {
+            //     this.show = false;
+            // }
         },
         changeSort() {
             this.showAction = true;
@@ -491,8 +517,11 @@ export default {
                     minterId: this.minterId,
                     salable: this.salable,
                     minPrice: 0,
-                    notLike: this.notLike
+                    notLike: this.notLike,
+                    rarityLabel: this.rarityLabel,
+                    name: this.productName
                 },
+                search: this.search,
                 sort: this.sort === 'id,desc' ? this.sortOptions[this.title] || sort : sort
             };
         },
@@ -618,6 +647,7 @@ export default {
         justify-content: space-between;
         .allCategories {
             display: flex;
+            align-items: center;
             .allCategories_con {
                 font-size: 14px;
                 font-family: PingFangSC-Regular, PingFang SC;
@@ -629,11 +659,24 @@ export default {
                 font-weight: bold;
                 color: #43ce00;
             }
+            .font_family {
+                color: #939599;
+                margin-left: 2px;
+            }
             .allCategories_img {
                 width: 18px;
                 height: 18px;
                 margin-left: 2px;
-                padding-top: 3px;
+            }
+
+            &.prim {
+                .allCategories_con {
+                    color: #43ce00;
+                }
+
+                .font_family {
+                    color: #43ce00;
+                }
             }
         }
     }
@@ -817,4 +860,35 @@ export default {
 /deep/ .van-overlay {
     z-index: 6;
 }
+
+.selects {
+    .flex();
+    padding: 0 16px 12px;
+    background-color: #222426;
+    overflow: hidden;
+    .select-info {
+        font-size: 12px;
+        color: #43ce00;
+        line-height: 28px;
+        border-radius: 4px;
+        border: 1px solid #43ce00;
+        flex-grow: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding: 0 12px;
+        text-align: center;
+        width: 50%;
+    }
+
+    .select-info + .select-info {
+        margin-left: 10px;
+    }
+
+    &.select_three {
+        .select-info {
+            width: 33%;
+        }
+    }
+}
 </style>

src/views/user/ActivityRank2.vue

@@ -0,0 +1,278 @@
+<template>
+    <div class="rank">
+        <img src="../../assets/acitivityRank2.png" class="top-img" alt="" />
+        <div class="rank-content">
+            <div class="tr">
+                <div class="th">排行</div>
+                <div class="th">用户头像</div>
+                <div class="th">合成数量</div>
+            </div>
+            <div class="tr" v-for="(item, index) in list" :key="index">
+                <div class="td">
+                    <van-image
+                        v-if="index < 3"
+                        width="38"
+                        height="38"
+                        :src="require(`../../assets/info_icon_no${index + 1}.png`)"
+                    />
+                    <span v-else>{{ index + 1 }}</span>
+                </div>
+                <div class="td">
+                    <van-image width="28" height="28" radius="38" :src="item.avatar" />
+                    <span>{{ item.nickname }}</span>
+                </div>
+                <div class="td">
+                    {{ item.num }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            list: [],
+            time: '',
+            rare: 'SSR'
+        };
+    },
+    mounted() {
+        this.getList();
+    },
+    methods: {
+        getList() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
+            this.$http.get('/mintOrder/mintRank').then(res => {
+                this.$toast.clear();
+                this.list = res.slice(0, 50);
+            });
+        },
+        changeRare(rare) {
+            this.rare = rare;
+            this.getList();
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.rank {
+    background: #070707;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    .top-img {
+        width: 100%;
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 0;
+    }
+    padding: 40vw 10px 0;
+
+    .top-text {
+        position: absolute;
+        top: 36px;
+        left: 20px;
+        color: #fff;
+
+        .text1 {
+            font-size: 36px;
+            font-family: 'ZhenyanGB';
+        }
+        .text2 {
+            font-size: 28px;
+            font-family: 'ZhenyanGB';
+            margin-top: 10px;
+        }
+    }
+
+    .time {
+        position: absolute;
+        left: 0px;
+        top: calc(48vw - 40px);
+        font-size: 12px;
+        color: #ffffff88;
+        line-height: 12px;
+        transform: scale(0.83) translateX(6px);
+        .text2 {
+            margin-top: 2px;
+        }
+    }
+}
+
+.rank-content {
+    height: 100%;
+    background-color: #fff;
+    border-radius: 16px 16px 0 0;
+    flex-grow: 1;
+    position: relative;
+    z-index: 1;
+    .bottom(15px);
+    overflow: hidden;
+    .tr {
+        overflow: hidden;
+        position: relative;
+        padding: 0 30px;
+        .flex();
+        .th {
+            font-size: 12px;
+            color: @text3;
+            line-height: 17px;
+            padding: 15px 0;
+
+            &:nth-child(1) {
+                width: 38px;
+                text-align: center;
+            }
+
+            &:nth-child(2) {
+                margin-left: 37px;
+                flex-grow: 1;
+            }
+        }
+
+        &:not(:first-child) {
+            &::after {
+                content: '';
+                bottom: 0;
+                left: 85px;
+                right: 0;
+                height: 1px;
+                background-color: #f5f7fa;
+                position: absolute;
+            }
+        }
+    }
+
+    .td {
+        padding: 10px 0;
+        flex-shrink: 0;
+        &:nth-child(2) {
+            margin: 0 10px 0 37px;
+            flex-grow: 1;
+            overflow: hidden;
+            .flex();
+            .van-image {
+                display: block;
+            }
+            span {
+                font-size: 14px;
+                color: #000000;
+                line-height: 24px;
+                margin-left: 6px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                max-width: 127px;
+            }
+        }
+
+        &:nth-child(3) {
+            overflow: hidden;
+            span {
+                width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        &:nth-child(1) {
+            text-align: center;
+            width: 38px;
+            font-size: 20px;
+            font-family: 'AlibabaPuHuiTi';
+            color: @text3;
+            font-weight: bold;
+            line-height: 20px;
+        }
+    }
+}
+.tr-tab {
+    .flex();
+    background: rgba(0, 0, 0, 0.1);
+    .tab-item {
+        width: 33.33%;
+        position: relative;
+        height: 49px;
+        .bg {
+            position: absolute;
+            top: 0;
+            width: 140px;
+            height: 50px;
+            z-index: 0;
+        }
+        .text {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1;
+            .flex();
+            align-items: flex-end;
+            justify-content: center;
+            color: #939599;
+            i {
+                font-size: 22px;
+                display: block;
+            }
+            span {
+                font-size: 10px;
+                transform: translateX(-13px);
+            }
+        }
+        &:nth-child(1) {
+            .bg {
+                left: 0;
+            }
+        }
+        &:nth-child(2) {
+            .bg {
+                left: 50%;
+                transform: translateX(-50%);
+            }
+            .text {
+                span {
+                    transform: translateX(-20px);
+                }
+            }
+        }
+
+        &:nth-child(3) {
+            .bg {
+                right: 0;
+            }
+            .text {
+                span {
+                    transform: translateX(-26px);
+                }
+            }
+        }
+        &.prim {
+            &:nth-child(1) {
+                .text {
+                    color: #411c83;
+                }
+            }
+            &:nth-child(2) {
+                .text {
+                    color: #a34800;
+                }
+            }
+            &:nth-child(3) {
+                .text {
+                    color: #d37c3c;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/user/Rank.vue

@@ -32,7 +32,7 @@
                 </div>
                 <div class="td">
                     <van-image width="38" height="38" radius="38" :src="item.avatar" />
-                    <img class="renzhengIocn" src="../../assets/yirenzhng-geren-icon.png" alt="" />
+                    <img class="renzhengIocn" src="@assets/icon-yirenzheng.png" alt="" />
                 </div>
                 <div class="td">
                     <span>{{ item.nickname }}</span>
@@ -169,6 +169,7 @@ export default {
     .bottom(15px);
     overflow: hidden;
     padding-top: 6px;
+    transform: translateY(-6px);
     .tr {
         overflow: hidden;
         position: relative;
@@ -220,8 +221,8 @@ export default {
                 position: absolute;
                 width: 16px;
                 height: 16px;
-                right: 3px;
-                bottom: 10px;
+                right: -1px;
+                bottom: 8px;
             }
         }