Browse Source

Merge branch 'yuan' of panhui/lasuo_nft_front into dev

yuanyuan 3 years ago
parent
commit
b0f658dd80

BIN
src/assets/collection-record@3x.png


BIN
src/assets/collection-records@3x.png


BIN
src/assets/head-portrait@3x.png


BIN
src/assets/offering-plan@3x.png


+ 13 - 10
src/components/Post.vue

@@ -25,7 +25,7 @@
                                 <span v-if="info.category">{{ info.category }}</span>
                                 <span v-if="info.number">编号{{ info.number }}</span>
                             </div> -->
-                            <template v-if="pageUrl !== 'assetDetail'">
+                            <!-- <template v-if="pageUrl !== 'assetDetail'">
                                 <div class="text" v-if="isBuy">
                                     <div class="price">
                                         <img src="@assets/jiage_huang.png" alt="" />
@@ -38,8 +38,8 @@
                                 </div>
 
                                 <div class="status" v-if="!info.salable">仅展示</div>
-                            </template>
-                            <template v-else>
+                            </template> -->
+                            <!-- <template v-else>
                                 <div class="text" v-if="info.consignment">
                                     <div class="price">
                                         <img src="@assets/jiage_huang.png" alt="" />
@@ -50,7 +50,7 @@
                                 <div class="status" v-else-if="info.status == 'NORMAL'">
                                     {{ info.publicShow ? '仅展示' : '未展示' }}
                                 </div>
-                            </template>
+                            </template> -->
                         </div>
                         <div class="minter">
                             <div class="minter_con">
@@ -61,7 +61,9 @@
                                     </div>
                                     <div class="minter_con_two">扫码打开拉索app,发现有趣数字藏品</div>
                                 </div>
-                                <vue-qrcode :value="url" :options="{ width: 70, margin: 3 }" class="code"></vue-qrcode>
+                                <div>
+                                    <vue-qrcode :value="url" :options="{ width: 70, margin: 3 }" class="code"></vue-qrcode>
+                                </div>
                             </div>
                             <!-- <div class="minter-content">
                                 <van-image width="26" height="26" round :src="userImg" fit="cover" />
@@ -69,10 +71,10 @@
                                 <div class="text2">铸造者</div>
                             </div> -->
                         </div>
-                        <div class="sold xianliang" v-if="time">
+                        <!-- <div class="sold xianliang" v-if="time">
                             <img src="@assets/shizhong.png" alt="" />
                             <span>即将开售:{{ time }}</span>
-                        </div>
+                        </div> -->
                     </div>
                 </template>
 
@@ -333,15 +335,16 @@ export default {
 
 .minter {
     width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    // display: flex;
+    // justify-content: space-between;
+    // align-items: center;
     padding: 0px 10px 20px;
     box-sizing: border-box;
     margin-top: 24px;
     .minter_con {
         width: 100%;
         display: flex;
+        justify-content: space-between;
         background: #1E222C;
         border-radius: 8px;
         .minter_con_one {

+ 30 - 10
src/components/creator/CreatorInfo.vue

@@ -8,7 +8,7 @@
         }"
         class="info"
     > -->
-    <div class="info">
+    <div class="info" @click="$router.push({ path: '/creatorDetail', query: { id: info.id } })">
         <van-image :width="66" :height="66" :src="getImg(info.avatar)" fit="cover" radius="33" />
         <!-- <img v-if="rank" class="NOImg" :src="NOInfo.img1" alt="" /> -->
         <div class="content">
@@ -32,8 +32,8 @@
         </div>
 
         <van-button
-            @click.prevent="follow"
-            :class="{ follow: info.follow }"
+            @click.stop="follow"
+            :class="info.follow ? (isFollow ? '.followedtwo' : 'followedtwo') : 'followedthree'"
             :plain="info.follow"
             type="primary"
             size="mini"
@@ -125,7 +125,7 @@ export default {
             font-size: 16px;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #FFFFFF;
+            color: #ffffff;
             line-height: 22px;
             margin-bottom: 2px;
         }
@@ -133,7 +133,7 @@ export default {
             font-size: 14px;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #8C8E93;
+            color: #8c8e93;
             line-height: 20px;
             margin-bottom: 2px;
         }
@@ -175,14 +175,14 @@ export default {
                 }
             }
         }
-        .text4{
+        .text4 {
             font-size: 12px;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #8C8E93;
+            color: #8c8e93;
             line-height: 18px;
-            .text4_two{
-                color: #FFFFFF;
+            .text4_two {
+                color: #ffffff;
                 margin-left: 5px;
             }
         }
@@ -215,7 +215,27 @@ export default {
         }
     }
 }
-
+.followedthree {
+    width: 60px;
+    height: 28px;
+    background: #f9ddb3;
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #503a1e;
+    line-height: 20px;
+    text-align: center;
+}
+.followedtwo {
+    border: 1px solid #222630 !important;
+    box-sizing: border-box;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.3);
+    line-height: 18px;
+}
 .info + .info {
     position: relative;
     &::before {

+ 1 - 1
src/components/product/productLarge.vue

@@ -24,7 +24,7 @@
             <van-image width="100%" height="345px" :radius="30" :src="getImg(changeImgs(info.pic))" fit="cover" />
             <div class="shop_title">
                 <div>{{ info.name }}</div>
-                <img :src="!!info.model3d ? require('@assets/3d@3x.png') : require('@assets/tupian@3x.png')" alt="" class="shop_title_img" />
+                <img v-if="!!info.model3d" :src="require('@assets/3d@3x.png')" alt="" class="shop_title_img" />
             </div>
             <div class="shop_number">
                 <div class="shop_number_con" v-if="info.collectionCategory">{{info.collectionCategory}}</div>

+ 1 - 1
src/router/index.js

@@ -623,7 +623,7 @@ const routes = [
         name: 'mineExchange',
         component: () => import('../views/user/Exchange.vue'),
         meta: {
-            title: '拉索宇宙'
+            title: '藏品记录'
         }
     },
     {

+ 29 - 6
src/views/Discover.vue

@@ -43,6 +43,7 @@
                 line-width="16"
                 line-height="2"
                 @click-tab="changeTab"
+                @change="changeSort"
                 :class="{ trans: source == 'TRANSFER' }"
             >
                 <van-tab
@@ -67,13 +68,13 @@
                             <van-icon size="8" name="arrow-down" />
                         </div>
                     </template>
-                    <template v-if="item.type === 'views'" #title2>
+                    <!-- <template v-if="item.type === 'views'" #title2>
                         <div class="tab">
                             <span>{{ item.label }}</span>
                             <van-icon size="8" name="arrow-up" />
                             <van-icon size="8" name="arrow-down" />
                         </div>
-                    </template>
+                    </template> -->
                 </van-tab>
             </van-tabs>
         </van-sticky>
@@ -188,7 +189,7 @@ export default {
                 },
                 {
                     label: '销量',
-                    value: 'likes,desc',
+                    value: 'likes',
                     type: 'select'
                 },
                 {
@@ -208,7 +209,9 @@ export default {
             list: [],
             // 最HOT收藏品
             hotCollectionList: [],
-            url: '/collection/all'
+            url: '/collection/all',
+            sortDes: 'asc',
+            sortPre: ''
         };
     },
     mounted() {
@@ -235,11 +238,23 @@ export default {
         //     let currentRecommendationList = this.currentRecommendationList
         //     currentRecommendationList[index].liked = !currentRecommendationList[index].liked
         // },
+        changeSort(name) {
+            // if(name!='price'&&name!='likes'){
+            //     this.sortDes = 'asc'
+            // }
+        },
         changeTab(info) {
+            if (this.sortPre != info.name) {
+                this.sortDes = 'asc';
+            }
+            this.sortPre = info.name;
             this.$nextTick(() => {
                 if (info.name === 'price') {
                     this.sortDes = this.sortDes == 'desc' ? 'asc' : 'desc';
                 }
+                if (info.name === 'likes') {
+                    this.sortDes = this.sortDes == 'desc' ? 'asc' : 'desc';
+                }
                 this.getData(true);
             });
         },
@@ -248,6 +263,9 @@ export default {
             if (sort == 'price') {
                 sort = 'price,' + this.sortDes;
             }
+            if (sort == 'likes') {
+                sort = 'likes,' + this.sortDes;
+            }
             return {
                 query: {
                     onShelf: true,
@@ -532,6 +550,7 @@ export default {
         color: #ffffff;
         line-height: 20px;
         text-align: center;
+        opacity: 0.5;
     }
 }
 .setting:last-child {
@@ -567,7 +586,7 @@ export default {
     .van-tab {
         // margin-right: 32px;
         // width: 20%;
-        flex: 1 !important;
+        flex: 0 !important;
     }
     // .van-tab:nth-of-type(4){
     //     margin-right: 0px;
@@ -591,13 +610,17 @@ export default {
     }
 }
 /deep/ .van-tabs__nav--line.van-tabs__nav--complete {
-    padding: 0 !important;
+    padding: 0px  20px !important;
     border: none !important;
+    justify-content: space-between;
 }
 /deep/ .van-tabs__line {
     width: 0px !important;
     height: 0px !important;
 }
+/deep/ .van-tab--grow{
+    padding: 0px !important;
+}
 .explore_content {
     width: 100%;
     background: #191d27;

+ 6 - 7
src/views/Home.vue

@@ -52,7 +52,8 @@
                 </div>
                 <div class="collection_list" v-else>
                     <div class="advance_notice_sale">
-                        <div class="advance_notice_sale_left">近期发售计划</div>
+                        <!-- <div class="advance_notice_sale_left">近期发售计划</div> -->
+                        <img :src="require('@assets/offering-plan@3x.png')" alt="" class="advance_notice_sale_left">
                         <div class="advance_notice_sale_right">
                             <!-- <div class="advance_notice_sale_right_one">已预定</div> -->
                             <div
@@ -160,7 +161,7 @@ export default {
             page: 0,
             isLoading: true,
             active: 0,
-            reserve: true,
+            reserve: false,
             saleList: [
                 {
                     month: '03月21日',
@@ -493,12 +494,9 @@ export default {
                 justify-content: space-between;
                 margin-bottom: 15px;
                 .advance_notice_sale_left {
+                    width: 116px;
+                    height: 18px;
                     margin-top: 5px;
-                    font-size: 20px;
-                    font-family: PingFangSC-Semibold, PingFang SC;
-                    font-weight: 600;
-                    color: #f2d5b2;
-                    line-height: 26px;
                 }
                 .advance_notice_sale_right {
                     font-size: 14px;
@@ -551,6 +549,7 @@ export default {
                     color: #ffffff;
                     line-height: 22px;
                     margin-bottom: 8px;
+                    opacity: 0.6;
                 }
             }
         }

+ 9 - 8
src/views/Mine.vue

@@ -14,7 +14,7 @@
                         width="64px"
                         height="64px"
                         radius="40"
-                        :src="userInfo.avatar || require('@assets/img_default_photo.png')"
+                        :src="userInfo.avatar || require('@assets/png-moren-touxiang.png')"
                         fit="cover"
                         style="margin-right: 10px;"
                     />
@@ -67,7 +67,7 @@
                                     >注册</span
                                 >
                             </div>
-                            <div class="not_logged_tip">立即登录获取精彩服务</div>
+                            <div class="not_logged_tip">登录后可查看您的数字藏品</div>
                         </div>
                         <!-- <img :src="require('@assets/icon_inter.png')" alt="" class="not_logged_img" /> -->
                     </div>
@@ -86,7 +86,7 @@
                     <div class="text1">我的订单</div>
                 </div>
                 <div class="order-info" @click="$router.push('/mineExchange')">
-                    <img src="@assets/menu2.png" alt="" />
+                    <img src="@assets/collection-records@3x.png" alt="" />
                     <div class="text1">藏品记录</div>
                 </div>
                 <div class="order-info" @click="$router.push('/mineBanks')">
@@ -356,7 +356,7 @@ export default {
         border-radius: 1px;
     }
     .authentication_img {
-        margin-top: 2px;
+        margin-top: 5px;
         width: 18px;
         height: 18px;
     }
@@ -411,6 +411,7 @@ export default {
                         font-size: 13px;
                         color: #ffffff;
                         line-height: 18px;
+                        opacity: 0.5;
                     }
                     .not_logged_img {
                         width: 24px;
@@ -459,11 +460,11 @@ export default {
                     // padding-left: 8px;
                     box-sizing: border-box;
                     .self_introduction_name {
-                        font-size: 16px;
+                        font-size: 20px;
                         font-family: PingFangSC-Medium, PingFang SC;
                         font-weight: 500;
                         color: #ffffff;
-                        line-height: 24px;
+                        line-height: 28px;
                         margin-right: 6px;
                     }
                     .self_introduction_authentication {
@@ -476,7 +477,7 @@ export default {
                 margin-top: 5px;
                 display: flex;
                 .self_introduction_top_con_id {
-                    font-size: 12px;
+                    font-size: 13px;
                     font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #949699;
@@ -606,7 +607,7 @@ export default {
     color: #ffffff;
     opacity: 0.3;
     line-height: 18px;
-    padding: 0 16px;
+    // padding: 0 16px;
     .user-text {
         width: 33%;
         text-align: center;

+ 2 - 1
src/views/Store.vue

@@ -344,9 +344,10 @@ export default {
                 border-top: none;
                 background: #191d27;
                 padding-bottom: 0px;
+                justify-content: space-between;
             }
             .van-tab {
-                flex: 1 !important;
+                flex: 0 !important;
                 margin-right: 0px !important;
             }
             .van-tabs__line {

+ 7 - 0
src/views/account/About.vue

@@ -96,6 +96,12 @@ export default {
 .van-cell {
     padding: 23px 16px;
     background-color: @bg2;
+    border-radius: 12px;
+    font-size: 16px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 22px;
 }
 .van-cell + .van-cell {
     margin-top: 10px;
@@ -131,6 +137,7 @@ export default {
     .text2 {
         font-size: 14px;
         color: #ffffff;
+        opacity: 0.5;
         line-height: 20px;
         margin-top: 6px;
         margin-bottom: 34px;

+ 77 - 8
src/views/account/Login.vue

@@ -20,7 +20,6 @@
                     ]"
                 >
                 </van-field>
-
                 <van-field
                     type="code"
                     name="验证码"
@@ -59,6 +58,17 @@
                 >
             </div>
         </van-form>
+        <!-- 协议弹出框 -->
+        <div class="protocol_tips" v-if="protocol === true">
+            <div class="protocol_tips_top">
+                请您已阅读<span class="protocol_tips_top_con" @click.stop="$router.push('/agreement')">《用户隐私政策》</span
+                ><span class="protocol_tips_top_con" @click.stop="$router.push('/agreement?page=service')">《服务协议》</span>的全部条款,接受后可开始使用我们的服务
+            </div>
+            <div class="protocol_tips_bottom">
+                <div class="protocol_tips_bottom_one" @click="agreement(false)">不同意</div>
+                <div class="protocol_tips_bottom_two" @click="agreement(true)">同意</div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -76,7 +86,8 @@ export default {
                 password: '',
                 code: ''
             },
-            checked: localStorage.getItem('agreeTerm') === 'true'
+            checked: localStorage.getItem('agreeTerm') === 'true',
+            protocol: false
         };
     },
     computed: {
@@ -101,7 +112,8 @@ export default {
         },
         submit() {
             if (!this.checked) {
-                this.$toast('请先阅读并同意隐私政策');
+                // this.$toast('请先阅读并同意隐私政策');
+                this.protocol = true
                 return;
             }
             this.$toast.loading({
@@ -126,6 +138,12 @@ export default {
                 }, 1500);
             });
         },
+        agreement(value){
+            if(value){
+                this.checked = true
+            }
+            this.protocol = false
+        },
         check() {
             if (this.active === 'phone') {
                 return this.loginByPhone(this.form.phone, this.form.password);
@@ -161,6 +179,53 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.protocol_tips {
+    transform: translateY(-150px);
+    width: 100%;
+    background: #ffffff;
+    border-radius: 12px;
+    padding: 22px 25px 26px;
+    box-sizing: border-box;
+    .protocol_tips_top {
+        font-size: 15px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #666666;
+        line-height: 26px;
+        text-align: center;
+        .protocol_tips_top_con {
+            color: #816232;
+        }
+    }
+    .protocol_tips_bottom {
+        margin-top: 20px;
+        display: flex;
+        justify-content: center;
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #202020;
+        .protocol_tips_bottom_one {
+            flex: 1;
+            height: 42px;
+            border-radius: 4px;
+            border: 1px solid #dedede;
+            box-sizing: border-box;
+            text-align: center;
+            line-height: 40px;
+            margin-right: 15px;
+        }
+        .protocol_tips_bottom_two {
+            flex: 1;
+            height: 42px;
+            background: #f9ddb3;
+            color: #503a1e;
+            border-radius: 4px;
+            text-align: center;
+            line-height: 42px;
+        }
+    }
+}
 .login {
     padding: 10px 40px 100px;
     background-repeat: no-repeat;
@@ -177,7 +242,7 @@ export default {
         font-size: 16px;
         color: #ffffff;
         line-height: 22px;
-        opacity: 0.8;
+        opacity: 0.6;
         margin-top: 10px;
     }
 }
@@ -191,7 +256,7 @@ export default {
 }
 /deep/.van-field__control {
     color: #fff;
-    font-size: 14px;
+    font-size: 16px;
 }
 .logo {
     width: 94px;
@@ -268,6 +333,7 @@ export default {
     }
 
     .sure {
+        font-size: 18px;
         color: #000000 !important;
         height: 60px;
     }
@@ -281,6 +347,7 @@ export default {
 .sub-code {
     padding-right: 0;
     border-width: 0;
+    font-size: 14px;
 }
 
 .forget {
@@ -316,17 +383,19 @@ export default {
 // }
 
 /deep/.van-checkbox__icon--checked .van-icon {
-    background: @prim;
+    // background: @prim;
+    background-color: #fff;
+    color: #333333;
     border-width: 0;
     font-size: @font1;
     width: 14px;
     height: 14px;
 }
-/deep/ .van-checkbox__icon--round{
+/deep/ .van-checkbox__icon--round {
     padding-top: 3px;
     box-sizing: border-box;
 }
-/deep/ .van-icon-success{
+/deep/ .van-icon-success {
     width: 14px;
     height: 14px;
 }

+ 3 - 3
src/views/account/Setting.vue

@@ -24,8 +24,7 @@
                 :class="[userInfo.intro ? 'intro' : 'not']"
                 @click="$router.push('/changeText?type=intro')"
                 is-link
-                :border="false"
-                :value="userInfo.intro || 'TA还什么都没有留下~'"
+                :value="userInfo.intro || 'TA还什么都没有留下'"
             />
             <van-cell title="背景图片" is-link>
                 <template #value>
@@ -36,6 +35,7 @@
                         :src="userInfo.bg || require('@assets/bg.png')"
                         fit="cover"
                     />
+                    <van-uploader class="avatar" :after-read="afterRead2" result-type="file" />
                 </template>
             </van-cell>
         </van-cell-group>
@@ -247,7 +247,7 @@ export default {
     border-color: #97979710;
 }
 /deep/ .van-cell__title {
-    width: 120px;
+    width: 100px;
 }
 /deep/ .van-cell {
     align-items: center;

+ 111 - 67
src/views/creator/Detail.vue

@@ -5,48 +5,47 @@
                 width="100%"
                 height="35vw"
                 loading-icon=""
-                :src="info.bg || require('@assets/creatorBg.png')"
+                :src="info.bg || require('@assets/bg.png')"
                 fit="cover"
                 class="top-img"
             />
-            <div
+            <!-- <div
                 class="history"
                 v-if="isMinter"
                 @click="$router.push(`/productList?minterId=${info.id}&source=TRANSFER`)"
             >
                 历史创作
-            </div>
+            </div> -->
             <div class="userInfo-content">
                 <div class="userInfo-top">
                     <van-image
                         round
                         :class="{ rank: rankInfo.img1 }"
-                        width="70"
-                        height="70"
+                        width="80"
+                        height="80"
                         :src="info.avatar || require('@assets/svgs/img_default_photo.svg')"
                         fit="cover"
                     />
-                    <img class="rank-icon" :src="rankInfo.img1" v-if="rankInfo.img1" alt="" />
-
+                    <!-- <img class="rank-icon" :src="rankInfo.img1" v-if="rankInfo.img1" alt="" /> -->
                     <div class="text">
-                        <div class="text1">
+                        {{ info.nickname }}
+                        <!-- <div class="text1">
                             <span class="van-ellipsis">{{ info.nickname }}</span>
                             <img v-if="info.authStatus === 'SUCCESS'" src="@assets/renzheng_icon_pre.png" alt="" />
-                        </div>
-                        <div class="text2">
+                        </div> -->
+                        <!-- <div class="text2">
                             <span>用户ID:{{ info.id }}</span>
                             <img @click="copy" src="@assets/svgs/copy_icon.svg" alt="" />
-                        </div>
+                        </div> -->
                     </div>
                 </div>
 
                 <div class="sub" :class="{ 'van-multi-ellipsis--l2': !showMore }">
                     {{ info.intro || '他还没有介绍哦~' }}
                 </div>
-                <div class="sub-right" v-if="info.intro && info.intro.length > 50">
+                <!-- <div class="sub-right" v-if="info.intro && info.intro.length > 50">
                     <div @click="showMore = !showMore">{{ showMore ? '收起' : '展开' }}</div>
-                </div>
-
+                </div> -->
                 <div class="btns">
                     <div class="collect">
                         <div class="text1">{{ info.follows }}</div>
@@ -79,15 +78,15 @@
                 </div>
             </div>
         </div>
-
         <van-sticky ref="top" :offset-top="46">
-            <div class="menu" v-if="isMinter">
+            <div class="menu">
                 <div class="menu-item" @click="changeMenu('DEFAULT')" :class="{ active: type === 'DEFAULT' }">
                     藏品类目
+                    <div class="menu-item-con"></div>
                 </div>
-                <div class="menu-item" @click="changeMenu('BLIND_BOX')" :class="{ active: type === 'BLIND_BOX' }">
+                <!-- <div class="menu-item" @click="changeMenu('BLIND_BOX')" :class="{ active: type === 'BLIND_BOX' }">
                     盲盒类目
-                </div>
+                </div> -->
                 <div class="flex1"></div>
                 <van-checkbox @change="getData(true)" class="sala" v-model="salable">仅看在售</van-checkbox>
                 <div
@@ -98,11 +97,11 @@
                         )
                     "
                 >
-                    <img src="@assets/icon-sosuo.png" alt="" />
+                    <img src="@assets/sousuo@3x.png" alt="" />
                 </div>
             </div>
 
-            <van-tabs
+            <!-- <van-tabs
                 v-else
                 v-model:active="salable"
                 :ellipsis="false"
@@ -113,7 +112,7 @@
                 <van-tab title="全部" name=""></van-tab>
                 <van-tab title="寄售" :name="true"></van-tab>
                 <van-tab title="仅展示" :name="false"></van-tab>
-            </van-tabs>
+            </van-tabs> -->
         </van-sticky>
         <van-list
             style="padding-bottom: 100px"
@@ -125,23 +124,38 @@
             @load="getData"
         >
             <template v-for="(item, index) in list" :key="item.id">
-                <product-info v-model:info="list[index]"></product-info>
+                <CollectionList v-model:info="list[index]"></CollectionList>
             </template>
-            <van-empty
-                v-if="empty"
-                :image="require('@assets/kong_png_yongyoude  (1).png')"
-                description="没有任何收藏品哦~"
-            />
         </van-list>
+        <van-empty
+        v-if="empty"
+            class="empty"
+            :image="require(`@assets/empty-collection.png`)"
+            description="还没有相关藏品"
+        />
     </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
-import productInfo from '../../components/product/productInfo.vue';
+import CollectionList from '../../components/CollectionList.vue';
 import list from '../../mixins/list';
 export default {
-    components: { productInfo },
+    components: { CollectionList },
+    data() {
+        return {
+            info: {},
+            type: 'DEFAULT',
+            salable: '',
+            stiky: null,
+            list: [],
+            empty: false,
+            hots: [],
+            url: '/collection/all',
+            isMinter: true,
+            showMore: false
+        };
+    },
     computed: {
         ...mapState(['userInfo']),
         rankInfo() {
@@ -165,24 +179,18 @@ export default {
             } else {
                 return 'TRANSFER';
             }
+        },
+        intro() {
+            // console.log(this.info.intro.length)
+            if (this.info.intro) {
+                return this.info.intro.substring(0, 50) + '...';
+            } else {
+                return this.info.intro;
+            }
         }
     },
     inject: ['bar'],
     mixins: [list],
-    data() {
-        return {
-            info: {},
-            type: 'DEFAULT',
-            salable: '',
-            stiky: null,
-            list: [],
-            empty: false,
-            hots: [],
-            url: '/collection/all',
-            isMinter: true,
-            showMore: false
-        };
-    },
     mounted() {
         if (this.$route.query.type) {
             this.isMinter = false;
@@ -284,7 +292,7 @@ export default {
     margin-right: 26px !important;
 }
 .mine {
-    background-color: @bg3;
+    background: #191D27;
 }
 .userInfo {
     padding-top: 35vw;
@@ -325,7 +333,7 @@ export default {
         font-size: 12px;
         color: @text3;
         line-height: 22px;
-        padding: 6px 0 0;
+        padding: 7px 0 0;
     }
 
     .sub-right {
@@ -379,15 +387,32 @@ export default {
         }
 
         .follow {
-            border: solid 0px transparent;
-            padding: 1px;
-            background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @prim, @warn);
-            background-origin: border-box;
-            box-sizing: border-box;
-            background-clip: content-box, border-box;
+            width: 60px;
+            height: 28px;
+            background: #f9ddb3;
+            border-radius: 4px;
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #503a1e;
+            line-height: 28px;
+
+            // border: solid 0px transparent;
+            // padding: 1px;
+            // background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @prim, @warn);
+            // background-origin: border-box;
+            // box-sizing: border-box;
+            // background-clip: content-box, border-box;
             &.followed {
-                background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @text3, @text3);
-                color: @text3;
+                width: 60px;
+                height: 28px;
+                border-radius: 4px;
+                border: 1px solid #222630;
+                background: #191d27;
+                color: rgba(255, 255, 255, 0.3);
+                line-height: 26px;
+                // background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @text3, @text3);
+                // color: @text3;
             }
         }
     }
@@ -418,8 +443,13 @@ export default {
     }
 
     .text {
-        margin: 0 40px 0 12px;
+        margin-left: 15px;
+        font-size: 20px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #ffffff;
         overflow: hidden;
+        line-height: 90px;
         .text1 {
             font-size: @font3;
             font-weight: bold;
@@ -449,26 +479,30 @@ export default {
 }
 .menu {
     display: flex;
-    height: 50px;
+    height: 36px;
     align-items: center;
     padding: 0 16px;
     // border-bottom: 1px solid #202122;
     background-color: @bg;
     .menu-item {
         font-size: 16px;
-        color: @text3;
-        line-height: 24px;
-        margin-right: 30px;
-        &.active {
-            color: @prim;
-            font-weight: bold;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 22px;
+        position: relative;
+        .menu-item-con {
+            width: 32px;
+            height: 2px;
+            background: #d8d8d8;
+            position: absolute;
+            left: 16px;
+            bottom: -4px;
         }
     }
-
     .search {
         img {
-            width: 24px;
-            height: 24px;
+            width: 32px;
+            height: 32px;
             display: block;
         }
     }
@@ -482,7 +516,13 @@ export default {
 }
 
 .list {
-    padding: 8px 8px 100px;
+    padding: 15px 15px 100px;
+    box-sizing: border-box;
+    background: #191d27;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
 }
 
 /deep/.sala {
@@ -498,9 +538,9 @@ export default {
         &.van-checkbox__icon--checked {
             .van-icon {
                 border-width: 0;
-                .linear();
+                background-color: #fff;
                 &::before {
-                    color: #fff;
+                    color: #333333;
                 }
             }
         }
@@ -511,4 +551,8 @@ export default {
         font-size: @font1;
     }
 }
+.empty {
+    margin-top: 80px;
+    background: #191d27;
+}
 </style>

+ 11 - 2
src/views/creator/List.vue

@@ -117,9 +117,10 @@ export default {
     z-index: 99;
 }
 /deep/.van-tabs__nav--line.van-tabs__nav--complete {
-    padding: 0px !important;
+    padding: 0px 15px !important;
     border-top: none;
     border-color: @tabBorder;
+    justify-content: space-between;
 }
 /deep/ .van-tabs__line{
     z-index: -1;
@@ -162,7 +163,15 @@ export default {
         }
     }
 }
-
+.van-tab--active.asc .tab .van-icon-arrow-up{
+    color: #ffffff;
+}
+/deep/ .van-tab{
+    flex: 0 !important;
+}
+/deep/ .van-tab--grow{
+    padding: 0px !important;
+}
 .van-tabs {
     background-color: @bg;
 }

+ 2 - 1
src/views/product/Detail.vue

@@ -1058,6 +1058,7 @@ export default {
                         margin-right: 6px;
                     }
                     .limited_label_category {
+                        border-radius: 3px;
                         padding: 0px 6px;
                         box-sizing: border-box;
                         height: 16px;
@@ -1866,7 +1867,7 @@ export default {
         .show_only_con {
             width: 100%;
             height: 40px;
-            background: #29293f;
+            // background: #29293f;
             border-radius: 8px;
             font-size: 16px;
             font-family: PingFangSC-Medium, PingFang SC;

+ 44 - 27
src/views/product/Search.vue

@@ -10,11 +10,10 @@
                 @search="getSearch"
             >
                 <template #action>
-                    <div v-if="!isSearch" @click="getSearch(search)">搜索</div>
-                    <div v-else @click="onCancel">取消</div>
+                    <div v-if="!isSearch" @click="getSearch(search)" class="search_con">搜索</div>
+                    <div v-else @click="onCancel" class="search_con">取消</div>
                 </template>
             </van-search>
-            <div class="search_filter" v-if="isSearch">
                 <van-tabs
                     v-model:active="sort"
                     :ellipsis="false"
@@ -22,6 +21,8 @@
                     line-height="2"
                     @click-tab="changeTab"
                     :class="{ trans: source == 'TRANSFER' }"
+                    class="search_filter"
+                    v-if="isSearch"
                 >
                     <van-tab
                         :title="item.label"
@@ -40,7 +41,7 @@
                         </template>
                     </van-tab>
                 </van-tabs>
-                <van-button
+                <!-- <van-button
                     v-if="isSearch && source == 'TRANSFER' && !title"
                     @click="changeSort"
                     color="#29293F"
@@ -49,8 +50,7 @@
                     icon="arrow-down"
                     icon-position="right"
                     >{{ salable ? '在售中' : salable === false ? '仅展示' : '综合排序' }}</van-button
-                >
-            </div>
+                > -->
             <!-- <van-checkbox
                 v-if="isSearch && source == 'TRANSFER' && !title"
                 @change="getData(true)"
@@ -77,11 +77,16 @@
             v-if="isSearch"
         >
             <div class="current_recommendation">
-                 <template v-for="(item, index) in list" :key="index">
+                <template v-for="(item, index) in list" :key="index">
                     <CollectionList v-model:info="list[index]" @update:info="init"></CollectionList>
                 </template>
             </div>
-            <van-empty v-if="empty" description="什么都没有搜到哦~" :image="require(`@assets/empty-collection.png`)" :image-size="`172`"/>
+            <van-empty
+                v-if="empty"
+                description="什么都没有搜到哦~"
+                :image="require(`@assets/empty-collection.png`)"
+                :image-size="`172`"
+            />
         </van-list>
         <div class="search-content" v-else>
             <div class="hot-content" v-if="historys.length > 0">
@@ -101,7 +106,7 @@
 </template>
 
 <script>
-import CollectionList from '../../components/CollectionList.vue'
+import CollectionList from '../../components/CollectionList.vue';
 import product from '../../mixins/product';
 import list from '../../mixins/list';
 import search from '../../mixins/search';
@@ -257,22 +262,27 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.search{
+.search {
     background: @bg;
 }
-/deep/ .van-sticky{
+.search_con {
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+}
+/deep/ .van-sticky {
     padding: 12px 0px 10px;
     box-sizing: border-box;
-    background: #191D27;
+    background: #191d27;
 }
 /deep/ .van-search {
     padding: 0px 16px;
-    background: #191D27;
+    background: #191d27;
     box-sizing: border-box;
     // margin-bottom: 6px;
     .van-search__content {
         padding-left: 16px;
-        background: #1E222C;
+        background: #1e222c;
         box-sizing: border-box;
     }
     .van-search__content--round {
@@ -281,9 +291,9 @@ export default {
     .van-search__action {
         padding-right: 0;
         padding-left: 12px;
-        color: #077DFF;
+        color: #077dff;
         box-sizing: border-box;
-        background: #191D27;
+        background: #191d27;
     }
     .van-field__control {
         color: #ffffff;
@@ -292,18 +302,18 @@ export default {
         padding-top: 4px;
     }
 }
-.search_filter{
+.search_filter {
     // height: 44px;
     padding: 16px 16px 10px;
     box-sizing: border-box;
-    display: flex;
-    background: #191D27;
-    justify-content: space-between;
+    // display: flex;
+    background: #191d27;
+    // justify-content: space-between;
 }
 /deep/ .van-tabs--line .van-tabs__wrap {
     height: 24px;
     .van-tab {
-        margin-right: 30px;
+        flex: 0 !important;
     }
     .tab {
         position: relative;
@@ -323,14 +333,21 @@ export default {
         }
     }
 }
+.van-tab--active.asc .tab .van-icon-arrow-up{
+    color: #ffffff;
+}
 /deep/ .van-tabs__nav--line.van-tabs__nav--complete {
-        padding: 0 !important;
-        border: none !important;
-    }
+    padding: 0 !important;
+    border: none !important;
+    justify-content: space-between;
+}
 /deep/ .van-tabs__line {
     width: 0px !important;
     height: 0px !important;
-    }
+}
+/deep/ .van-tab--grow{
+    padding: 0px !important;
+}
 .current_recommendation {
     width: 100%;
     display: flex;
@@ -346,7 +363,7 @@ export default {
         font-size: 16px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
-        color: #FFFFFF;
+        color: #ffffff;
         line-height: 22px;
         margin-bottom: 10px;
     }
@@ -368,7 +385,7 @@ export default {
 /deep/.sala {
     width: 86px;
     height: 24px;
-    background: #29293F;
+    background: #29293f;
     border-radius: 12px;
     color: #939599 !important;
     // background: #29293F !important;

+ 214 - 76
src/views/user/Exchange.vue

@@ -1,10 +1,24 @@
 <template>
     <div class="home">
         <van-sticky :offset-top="46">
-            <div class="transaction_record">
+            <van-tabs v-model:active="sort" line-width="32" line-height="2" @click-tab="changeTab">
+                <van-tab :title="item.label" :name="item.value" :key="index" v-for="(item, index) in selectOptions">
+                </van-tab>
+            </van-tabs>
+            <!-- <div class="transaction_record">
                 <div class="transaction_record_one">交易记录</div>
-                <div class="transaction_record_two"  @click="changeSort">
-                    <div class="transaction_record_two_con">{{ salable === '' ? '全部状态' : salable === 'purchase' ? '买入' : salable === 'sellOut' ? '卖出' : '赠送'}}</div>
+                <div class="transaction_record_two" @click="changeSort">
+                    <div class="transaction_record_two_con">
+                        {{
+                            salable === ''
+                                ? '全部状态'
+                                : salable === 'purchase'
+                                ? '买入'
+                                : salable === 'sellOut'
+                                ? '卖出'
+                                : '赠送'
+                        }}
+                    </div>
                     <img
                         :src="require('@assets/icon_shaixuan_sanjiao@3x.png')"
                         alt=""
@@ -13,37 +27,62 @@
                 </div>
             </div>
             <van-action-sheet
-            v-model:show="showAction"
-            @select="selectAction"
-            :actions="actions"
-            cancel-text="取消"
-            close-on-click-action
-        />
+                v-model:show="showAction"
+                @select="selectAction"
+                :actions="actions"
+                cancel-text="取消"
+                close-on-click-action
+            /> -->
         </van-sticky>
         <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
             <template v-for="(item, index) in list" :key="index">
                 <div class="exchange">
                     <div class="exchange_top">
-                        <div class="text1">{{ item.description }}</div>
-                        <div :class="isLogin && item.toUserId == $store.state.userInfo.id ? 'priceone' : 'pricetwo'">
-                            {{ isLogin && item.toUserId == $store.state.userInfo.id ? '-' : '+' }}{{ item.price || 0 }}
+                        <div class="exchange_top_con">
+                            <van-image
+                                width="90"
+                                height="90"
+                                radius="12"
+                                :src="getImg(changeImgs(item.pic))"
+                                fit="cover"
+                            />
+                            <div class="exchange_top_con_content">
+                                <div class="exchange_top_con_content_assetName">{{ item.assetName }}</div>
+                                <!-- <div class="exchange_top_con_content_stock">
+                                    <div class="exchange_top_con_content_stock_one">库存</div>
+                                    <div class="exchange_top_con_content_stock_two">100/300份</div>
+                                </div> -->
+                                <div class="exchange_top_con_content_price">
+                                    ¥&nbsp;<span>{{ item.price || 0 }}</span>
+                                </div>
+                            </div>
                         </div>
+                        <div class="exchange_top_text1">{{ item.description }}</div>
                     </div>
                     <div class="product">
-                        <van-image width="32" height="32" radius="4" :src="getImg(changeImgs(item.pic))" fit="cover" />
-                        <div class="flex1">
-                            <div class="text2">{{ item.assetName }}</div>
-                            <div class="text2">
-                                <span>{{ item.createdAt }}</span>
-                            </div>
+                        <div class="product_con">
+                            <div class="product_con_one">成交时间</div>
+                            <div class="product_con_two">{{ item.createdAt }}</div>
+                        </div>
+                        <div class="product_con">
+                            <div class="product_con_one">订单编号</div>
+                            <div class="product_con_two">{{ item.id }}</div>
                         </div>
                     </div>
-                    <div class="text3">
-                        <span>来源:{{ item.fromUser }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>去向 :{{ item.toUser }}</span>
-                    </div>
+                    <!-- <div class="text3">
+                        <span>来源:{{ item.fromUser }}</span
+                        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>去向 :{{ item.toUser }}</span>
+                    </div> -->
                 </div>
             </template>
-            <van-empty v-if="empty" description="暂无交易历史哦~" :image="require('@assets/storage_room_icon_01.png')" />
+            <van-empty
+                v-if="empty"
+                description="你还没有相关记录"
+                :image="require('@assets/collection-record@3x.png')"
+                class="empty_one"
+            >
+                <div class="empty_two">这里将展示你在拉索的数字藏品流转记录</div>
+            </van-empty>
         </van-list>
     </div>
     <!-- <div class="search">
@@ -80,8 +119,30 @@ export default {
             isBuy: false,
             info: {},
             showAction: false,
-            salable: '',
-            operation: ''
+            salable: 'whole',
+            operation: '',
+            selectOptions: [
+                {
+                    label: '全部',
+                    value: 'whole'
+                },
+                // {
+                //     label: '待付款',
+                //     value: 'pendingPayment'
+                // },
+                {
+                    label: '已购买',
+                    value: 'paid'
+                },
+                {
+                    label: '已出售',
+                    value: 'cancelled'
+                },
+                {
+                    label: '已赠送',
+                    value: 'give'
+                }
+            ]
         };
     },
     computed: {
@@ -113,59 +174,56 @@ export default {
             this.showAction = true;
         },
         selectAction(action) {
-             if (action.name == '全部状态') {
+            if (action.name == '全部状态') {
                 this.salable = '';
             }
             if (action.name == '买入') {
                 this.salable = 'purchase';
-                this.operation = '买入'
+                this.operation = '买入';
             }
             if (action.name == '卖出') {
                 this.salable = 'sellOut';
-                this.operation = '卖出'
+                this.operation = '卖出';
             }
             if (action.name == '赠送') {
                 this.salable = 'give';
-                this.operation = '赠送'
+                this.operation = '赠送';
             }
             this.getData(true);
         },
         changeBuy() {
             this.getData(true);
         },
+        changeTab(e) {
+            this.salable = e.name;
+            this.getData(true);
+        },
         beforeData() {
-            if(this.salable === ''){
-                return {
-                    // query: {
-                    //     toUserId: this.$store.state.userInfo.id  
-                    // }
-                };
-            }else if(this.salable == 'purchase'){
+            if (this.salable === 'whole') {
+                return;
+            } else if (this.salable == 'paid') {
                 return {
                     query: {
-                        toUserId: this.$store.state.userInfo.id,
-                        operation: this.operation
+                        toUserId: this.$store.state.userInfo.id
                     }
                 };
-            }else if(this.salable == 'sellOut'){
+            } else if (this.salable == 'cancelled') {
                 return {
                     query: {
-                        fromUserId: this.$store.state.userInfo.id,
-                        operation: this.operation
+                        fromUserId: this.$store.state.userInfo.id
                     }
                 };
-            }else if(this.salable == 'give'){
+            } else if (this.salable == 'give') {
                 return {
                     query: {
-                        // fromUserId: this.$store.state.userInfo.id,
-                        operation: this.operation
+                        fromUserId: this.$store.state.userInfo.id
                     }
                 };
             }
             // if (this.isBuy) {
             //     return {
             //         query: {
-            //             toUserId: this.$store.state.userInfo.id  
+            //             toUserId: this.$store.state.userInfo.id
             //         }
             //     };
             // } else {
@@ -182,7 +240,7 @@ export default {
 
 <style lang="less" scoped>
 .home {
-    background: #15152d;
+    background: #191d27;
     .transaction_record {
         height: 56px;
         padding: 12px 16px;
@@ -199,7 +257,7 @@ export default {
             line-height: 24px;
         }
         .transaction_record_two {
-            width: 100px; 
+            width: 100px;
             height: 32px;
             background: #29293f;
             border-radius: 4px;
@@ -212,7 +270,7 @@ export default {
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
             color: #939599;
-            .transaction_record_two_con{
+            .transaction_record_two_con {
                 width: 52px;
                 text-align: center;
             }
@@ -224,48 +282,96 @@ export default {
     }
     /deep/ .van-list {
         width: 100%;
-        padding: 0px 11px 0px 21px;
+        padding: 15px;
         box-sizing: border-box;
+        background: #191d27;
         .exchange {
             width: 100%;
-            padding: 8px 0px;
+            padding: 15px;
             box-sizing: border-box;
-            border-bottom: 1px solid rgba(95, 100, 111, 0.2);
+            background: #1e222c;
             .exchange_top {
                 display: flex;
                 justify-content: space-between;
-                font-size: 14px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #ffffff;
-                line-height: 24px;
-                .priceone {
-                    font-size: 16px;
-                    font-weight: 500;
+                padding-bottom: 10px;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+                .exchange_top_con {
+                    display: flex;
+                    .exchange_top_con_content {
+                        margin-left: 12px;
+                        padding-top: 18px;
+                        .exchange_top_con_content_assetName {
+                            width: calc(100% + 70px);
+                            font-size: 14px;
+                            font-family: PingFangSC-Regular, PingFang SC;
+                            font-weight: 400;
+                            color: #ffffff;
+                            line-height: 20px;
+                            margin-bottom: 8px;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                        }
+                        .exchange_top_con_content_stock {
+                            display: flex;
+                            font-size: 11px;
+                            font-family: PingFangSC-Regular, PingFang SC;
+                            font-weight: 400;
+                            margin-bottom: 8px;
+                            .exchange_top_con_content_stock_one {
+                                width: 34px;
+                                height: 16px;
+                                background: #f9ddb3;
+                                border-radius: 3px 0px 0px 3px;
+                                color: #282d3a;
+                                line-height: 16px;
+                                text-align: center;
+                            }
+                            .exchange_top_con_content_stock_two {
+                                height: 16px;
+                                background: #323743;
+                                border-radius: 0px 3px 3px 0px;
+                                color: #f9ddb3;
+                                line-height: 16px;
+                                padding: 0 6px;
+                                box-sizing: border-box;
+                            }
+                        }
+                        .exchange_top_con_content_price {
+                            font-size: 16px;
+                            font-family: PingFangSC-Semibold, PingFang SC;
+                            font-weight: 600;
+                            color: #ffffff;
+                            line-height: 24px;
+                        }
+                    }
                 }
-                .pricetwo {
-                    font-size: 16px;
-                    font-weight: 500;
-                    color: #ffcb2f;
+                .exchange_top_text1 {
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #ffffff;
+                    line-height: 20px;
+                    margin-top: 8px;
+                    opacity: 0.3;
                 }
             }
             .product {
-                margin-top: 2px;
-                margin-bottom: 6px;
-                display: flex;
-                .flex1 {
-                    margin-left: 6px;
-                    font-size: 12px;
+                .product_con {
+                    margin-top: 14px;
+                    display: flex;
+                    justify-content: space-between;
+                    font-size: 14px;
                     font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
-                    color: #939599;
-                    .text2 {
-                        width: 292px;
-                        line-height: 17px;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                    }
+                    line-height: 20px;
+                }
+                .product_con_one {
+                    color: #ffffff;
+                    opacity: 0.3;
+                }
+                .product_con_two {
+                    color: #ffffff;
                 }
             }
             .text3 {
@@ -278,6 +384,38 @@ export default {
         }
     }
 }
+/deep/ .van-tabs__wrap {
+    height: 36px;
+    .van-tabs__nav--line {
+        padding-left: 0 !important;
+        border-top: none;
+        background: #191d27;
+        padding-bottom: 0px;
+    }
+    .van-tab {
+        flex: 1 !important;
+        margin-right: 0px !important;
+    }
+    .van-tabs__line {
+        bottom: 0;
+        background: #d8d8d8;
+    }
+    .van-tab--active {
+        font-size: 16px;
+        font-weight: 500;
+        color: #ffffff !important;
+    }
+}
+/deep/ .van-empty{
+    margin-top: 60px;
+}
+.empty_two {
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+    opacity: 0.3;
+}
 // .exchange {
 //     padding: 14px 16px 15px;
 //     position: relative;