Merge branch 'master' of http://git.izouma.com/xiongzhu/9th

src/main/nine-space/src/components/product/productInfo.vue

@@ -8,19 +8,29 @@
         }"
         class="product"
     >
-        <van-image width="100%" height="calc(45vw - 21.6px)" :src="getImg(changeImgs(info.pic, 600))" fit="cover" />
+        <van-image width="100%" height="calc(50vw - 24px)" :src="getImg(changeImgs(info.pic, 600))" fit="cover" />
 
         <div class="content">
             <div class="name van-ellipsis">
                 {{ info.name }}
             </div>
-            <div class="price" v-if="info.salable"><i class="font_family icon-icon_jiage"></i>{{ info.price }}</div>
-            <div class="status" v-else>仅展示</div>
-            <div class="text">
-                <div class="text1" v-if="info.salable">
+            <div class="price-content" v-if="info.salable">
+                <div class="price">
+                    <img src="../../assets/jiage_huang.png" alt="" />
+                    <span>{{ info.price }}</span>
+                </div>
+                <div class="flex1"></div>
+                <div class="text1">
                     <span>{{ info.sale }}/</span>
                     <span>{{ info.total }}</span>
                 </div>
+            </div>
+            <div class="status" v-else>仅展示</div>
+            <div class="text">
+                <div class="minter">
+                    <van-image width="18" height="18" radius="18" :src="info.minterAvatar" fit="cover" />
+                    <span>{{ info.minter }}</span>
+                </div>
                 <div class="flex1"></div>
                 <like-button :isLike="info.liked" @click="likeProduct">
                     {{ info.likes }}
@@ -82,7 +92,7 @@ export default {
         display: block;
     }
     .content {
-        padding: 10px;
+        padding: 6px 10px 8px;
 
         .name {
             font-size: @font2;
@@ -92,20 +102,20 @@ export default {
         }
 
         .price {
-            font-size: 24px;
+            font-size: @font4;
             font-family: OSP;
             color: @prim;
-            line-height: 22px;
-            padding: 7px 0;
+            line-height: 18px;
+            padding: 12px 0;
 
-            i {
-                vertical-align: text-bottom;
-                font-size: 10px;
+            img {
+                display: inline-block;
+                width: 8px;
             }
         }
         .status {
             line-height: 22px;
-            padding: 7px 0;
+            padding: 10px 0 8px;
             color: @text3;
             font-size: @font1;
         }
@@ -128,4 +138,24 @@ export default {
         }
     }
 }
+.price-content {
+    display: flex;
+    align-items: center;
+    .text1 {
+        font-size: @font1;
+        color: @text3;
+        line-height: 12px;
+    }
+}
+
+.minter {
+    display: flex;
+    font-size: @font1;
+    color: @text3;
+    line-height: 22px;
+    align-items: center;
+    span {
+        margin-left: 4px;
+    }
+}
 </style>

src/main/nine-space/src/components/product/productLarge.vue

@@ -8,7 +8,13 @@
         }"
         class="product"
     >
-        <van-image width="100%" height="calc(100vw - 32px)" :src="getImg(changeImgs(info.pic))" fit="cover" />
+        <van-image
+            :radius="30"
+            width="100%"
+            height="calc(100vw - 32px)"
+            :src="getImg(changeImgs(info.pic))"
+            fit="cover"
+        />
 
         <div class="content">
             <div class="name van-ellipsis">{{ info.name }}</div>
@@ -23,16 +29,19 @@
                 </div>
                 <div class="flex1"></div>
                 <div class="price">
-                    <i class="font_family icon-icon_jiage"></i>
+                    <img src="../../assets/icon_jiage.png" alt="" />
                     <span> {{ info.price }}</span>
                 </div>
             </div>
         </div>
 
-        <div class="xianliang" v-if="startTime">
+        <div class="xianliang" v-if="time">
             <img src="../../assets/shizhong.png" alt="" />
-            <span>即将开售：{{ startTime }}</span>
+            <span>即将开售：{{ time }}</span>
         </div>
+
+        <img class="bg" src="../../assets/png-diwen.png" alt="" />
+        <img class="top-bg" src="../../assets/collecbg.png" alt="" />
     </router-link>
 </template>
 
@@ -52,7 +61,7 @@ export default {
         }
     },
     computed: {
-        startTime() {
+        time() {
             if (this.info.startTime) {
                 if (dayjs().isSameOrBefore(this.info.startTime)) {
                     return dayjs(this.info.startTime).format('MM月DD日');
@@ -95,9 +104,18 @@ export default {
     position: relative;
     background-color: #1c1e25;
     display: inline-block;
-    border-radius: 12px;
+    border-radius: 30px;
     overflow: hidden;
 
+    .bg {
+        position: absolute;
+        width: 100px;
+        height: 182px;
+        right: 0;
+        bottom: 0;
+        z-index: 0;
+    }
+
     .xianliang {
         position: absolute;
         top: 16px;
@@ -106,6 +124,7 @@ export default {
         color: @prim;
         display: flex;
         align-items: center;
+        z-index: 4;
         img {
             width: 18px;
             height: 18px;
@@ -116,18 +135,10 @@ export default {
     .van-image {
         display: block;
         position: relative;
-        &::after {
-            content: '';
-            position: absolute;
-            background-color: #00000030;
-            top: 0;
-            right: 0;
-            left: 0;
-            bottom: 0;
-        }
+        z-index: 2;
     }
     .content {
-        padding: 10px;
+        padding: 10px 16px 18px;
         .name {
             font-size: @font2;
             font-weight: bold;
@@ -136,10 +147,9 @@ export default {
         }
 
         .sales {
-            border-radius: 4px;
             overflow: hidden;
             font-size: @font1;
-            margin-top: 10px;
+            margin-top: 8px;
 
             span {
                 padding: 0 10px;
@@ -149,17 +159,20 @@ export default {
                 &:first-child {
                     background: @prim;
                     color: @bg;
+                    border-radius: 4px 0 0 4px;
                 }
                 &:last-child {
                     background-color: #3d3d3a;
                     color: @prim;
+                    border-radius: 0 4px 4px 0;
                 }
             }
         }
 
         .bottom {
             display: flex;
-            margin-top: 10px;
+            margin-top: 14px;
+            align-items: center;
 
             .miner {
                 display: flex;
@@ -173,15 +186,13 @@ export default {
             }
 
             .price {
-                font-size: 24px;
+                font-size: @font4;
                 color: #fff;
-                line-height: 22px;
+                line-height: 20px;
                 font-family: OSP;
-                font-weight: bold;
-                .font_family {
-                    font-size: 11px;
-                    margin-bottom: 3px;
-                    vertical-align: middle;
+                img {
+                    width: 8px;
+                    display: inline-block;
                 }
             }
         }
@@ -192,5 +203,14 @@ export default {
         justify-content: space-between;
         align-items: center;
     }
+
+    .top-bg {
+        width: 100%;
+        display: block;
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+    }
 }
 </style>

src/main/nine-space/src/components/product/productSmall.vue

@@ -0,0 +1,91 @@
+<template>
+    <router-link
+        :to="{
+            path: '/productDetail',
+            query: {
+                id: info.id
+            }
+        }"
+        class="product"
+    >
+        <van-image width="100%" height="140px" :radius="30" :src="getImg(changeImgs(info.pic))" fit="cover" />
+
+        <div class="content">
+            <div class="name van-ellipsis">
+                {{ info.name }}
+            </div>
+            <div class="text van-ellipsis">
+                {{ info.name }}
+            </div>
+        </div>
+    </router-link>
+</template>
+
+<script>
+import product from '../../mixins/product';
+export default {
+    mixins: [product],
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    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>
+.product {
+    width: 255px;
+    // margin: 8px;
+    background-color: @bg2;
+    display: inline-block;
+    border-radius: 30px;
+    overflow: hidden;
+
+    .van-image {
+        overflow: hidden;
+        display: block;
+    }
+    .content {
+        padding: 6px 16px 10px;
+
+        .name {
+            font-size: @font2;
+            color: #ffffff;
+            line-height: 24px;
+        }
+
+        .text {
+            font-size: @font1;
+            color: @text3;
+            line-height: 20px;
+        }
+    }
+}
+</style>

src/main/nine-space/src/router/index.js

@@ -186,6 +186,16 @@ const routes = [
         name: 'security',
         component: () => import('../views/account/Security.vue')
     },
+    {
+        path: '/about',
+        name: 'about',
+        component: () => import('../views/account/About.vue')
+    },
+    {
+        path: '/connect',
+        name: 'connect',
+        component: () => import('../views/account/Connect.vue')
+    },
     {
         path: '/tradingPassword',
         name: 'tradingPassword',

src/main/nine-space/src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-    <div class="about">
-        <h1>This is an about page</h1>
-    </div>
-</template>

src/main/nine-space/src/views/Discover.vue

@@ -76,13 +76,13 @@
             </van-grid-item>
         </van-grid>
 
-        <div class="box">
+        <div class="box" v-if="box.length > 0">
             <page-title title="精选盲盒" :to="{ path: '/productList', query: { type: 'BLIND_BOX' } }"></page-title>
             <div class="box-list">
                 <product-info v-for="(item, index) in box" :key="item.id" v-model:info="box[index]"></product-info>
             </div>
         </div>
-        <div class="box">
+        <div class="box" v-if="products.length > 0">
             <page-title title="本期推荐" :to="{ path: '/productList' }"></page-title>
             <div class="box-list">
                 <template v-for="(item, index) in products" :key="item.id">
@@ -90,7 +90,7 @@
                 ></template>
             </div>
         </div>
-        <div class="box">
+        <div class="box" v-if="hots.length > 0">
             <page-title title="最HOT收藏品" :to="{ path: '/productList', query: { type: 'DEFAULT' } }"></page-title>
             <div class="box-list">
                 <template v-for="(item, index) in hots" :key="item.id">
@@ -99,7 +99,7 @@
             </div>
         </div>
 
-        <div class="casting">
+        <div class="casting" v-if="miners.length > 0">
             <page-title title="最受欢迎铸造者" :to="{ path: '/creatorList' }"></page-title>
             <template v-for="(item, index) in miners" :key="index">
                 <creator-info

src/main/nine-space/src/views/Home.vue

@@ -1,8 +1,15 @@
 <template>
     <div class="home">
-        <swiper pagination class="mySwiper" :autoplay="{ delay: 3500 }" v-if="banners.length > 0">
-            <swiper-slide v-for="item in banners" :key="item.id">
-                <img :src="item.pic" @click="goNext(item)" />
+        <swiper
+            pagination
+            class="mySwiper"
+            :slidesPerView="'auto'"
+            :spaceBetween="20"
+            :autoplay="{ delay: 3500 }"
+            v-if="banners.length > 0"
+        >
+            <swiper-slide v-for="item in products" :key="item.id">
+                <product-small :info="item"></product-small>
             </swiper-slide>
         </swiper>
 
@@ -29,6 +36,7 @@ SwiperCore.use([Pagination, Autoplay]);
 
 import banner from '../mixins/banner';
 import ProductLarge from '../components/product/productLarge.vue';
+import ProductSmall from '../components/product/productSmall.vue';
 
 export default {
     name: 'home',
@@ -37,7 +45,8 @@ export default {
     components: {
         Swiper,
         SwiperSlide,
-        ProductLarge
+        ProductLarge,
+        ProductSmall
     },
     data() {
         return {
@@ -184,55 +193,32 @@ export default {
 }
 
 ::v-deep(.mySwiper) {
-    width: calc(100vw - 32px);
-    height: calc(40vw - 12.8px);
+    height: 255px;
     padding-top: 16px;
+    padding-left: 16px;
+    box-sizing: border-box;
 
     .swiper-pagination {
-        bottom: 6px;
+        bottom: 13px;
     }
 
     .swiper-pagination-bullet {
-        width: 6px;
-        height: 2px;
-        border-radius: 1px;
-        background: #d7d7d7;
-        margin: 0 3px;
+        width: 5px;
+        height: 5px;
+        border-radius: 5px;
+        background: @text3;
+        margin: 0 4px;
     }
 
     .swiper-pagination-bullet-active {
-        background: @prim;
+        background: #fff;
     }
 }
-
-.list {
-    padding: 12px 0 100px;
-}
-
 .swiper-slide {
-    text-align: center;
-    font-size: 18px;
-
-    /* Center slide text vertically */
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    -webkit-align-items: center;
-    align-items: center;
+    width: 255px;
 }
 
-.swiper-slide img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 12px;
+.list {
+    padding: 12px 0 100px;
 }
 </style>

src/main/nine-space/src/views/Mine.vue

@@ -152,7 +152,7 @@
                     <van-icon :name="require('../assets/icon_liaojiegengduo.png')" class="search-icon" />
                 </template>
             </van-cell>
-            <van-cell title="关于我们" is-link @click="wait">
+            <van-cell title="关于我们" is-link :to="{ path: '/about' }">
                 <template #icon>
                     <van-icon :name="require('../assets/icon-guanyuwomen.png')" class="search-icon" />
                 </template>

src/main/nine-space/src/views/Store.vue

@@ -281,16 +281,15 @@ export default {
     .top-btn {
         flex-grow: 1;
         .btn {
-            font-size: 16px;
+            font-size: @font3;
             line-height: 26px;
             display: inline-block;
             vertical-align: text-bottom;
 
             &.active {
                 color: @prim;
-                font-size: 20px;
+                font-size: @font3;
                 font-weight: bold;
-                line-height: 30px;
             }
         }
 

src/main/nine-space/src/views/account/About.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="page">
+        <div class="title">关于我们</div>
+        <van-cell-group>
+            <van-cell title="联系客服" @click="show = true" is-link />
+        </van-cell-group>
+
+        <van-overlay :show="show" @click="show = false">
+            <div class="code-img" @click.stop>
+                <van-image class="code" width="70vw" :src="codeImg" fit="scale-down" />
+            </div>
+        </van-overlay>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            codeImg: '',
+            show: false
+        };
+    },
+    mounted() {
+        this.$http.get('/sysConfig/get/customer_group').then(res => {
+            this.codeImg = res.value;
+        });
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.title {
+    background-color: #181818;
+    padding: 10px 16px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 30px;
+}
+.page {
+    background-color: #0f0f0f;
+}
+
+.van-cell-group {
+    background-color: #181818;
+}
+.van-cell {
+    padding: 23px 16px;
+}
+.logout {
+    padding: 50px 30px 50px;
+}
+.code-img {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+</style>

src/main/nine-space/src/views/account/Connect.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="page">
+        <div class="title">联系客服</div>
+
+        <van-image class="code" width="calc(100vw - 32px)" :src="codeImg" fit="scale-down" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            codeImg: ''
+        };
+    },
+    mounted() {
+        this.$http.get('/sysConfig/get/customer_group').then(res => {
+            this.codeImg = res.value;
+        });
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.title {
+    background-color: #181818;
+    padding: 10px 16px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 30px;
+}
+.page {
+    background-color: #0f0f0f;
+}
+
+.van-cell-group {
+    background-color: #181818;
+}
+.van-cell {
+    padding: 23px 16px;
+}
+.logout {
+    padding: 50px 30px 50px;
+}
+.code {
+    margin: 16px 16px;
+}
+</style>