Merge branch 'yuan' of panhui/lasuo_nft_front into dev

src/components/CollectionList.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="current_recommendation_con" :key="index" @click="goDetail">
         <!-- <img :src="info.pic[0].url" alt="" class="current_recommendation_img"> -->
-        <van-image width="100%" height="165px" :radius="18" :src="getImg(info.pic[0].url)" fit="cover" />
+        <van-image width="100%" height="calc(100vw/2 - 22.2px)" :radius="18" :src="getImg(info.pic[0].url)" fit="cover" />
         <!-- <van-image width="100%" height="calc(50vw - 24px)" :src="getImg(changeImgs(info.pic, 600))" fit="cover" class="current_recommendation_img"/> -->
         <div class="current_recommendation_title">{{ info.name }}</div>
         <div class="information_display">
@@ -13,7 +13,7 @@
                 <div v-else class="showOnly">仅展示</div>
             </div>
             <div class="information_display_con">
-                <span>{{ Math.max(Math.min(info.sale, info.total), 0) }}</span>&nbsp;/&nbsp;<span>{{ info.total }}</span>
+                <span>{{ Math.max(Math.min(info.sale, info.total), 0) }}</span>&nbsp;/&nbsp;<span>{{ info.total }}</span> 
             </div>
         </div>
         <div class="current_recommendation_bottom">

src/components/Post.vue

@@ -56,7 +56,8 @@
                             <div class="minter_con">
                                 <div>
                                     <div class="minter_con_one">
-                                        <div class="minter_con_one_text1">拉索</div>
+                                        <img :src="require('@assets/icon@3x.png')" alt="" class="minter_con_one_text1">
+                                        <!-- <div class="minter_con_one_text1">拉索</div> -->
                                         <div class="minter_con_one_text2" v-if="info.category">{{ info.category }}</div>
                                     </div>
                                     <div class="minter_con_two">扫码打开拉索app，发现有趣数字藏品</div>
@@ -351,9 +352,11 @@ export default {
             padding: 12px 0px 6px 15px;
             box-sizing: border-box;
             .minter_con_one_text1 {
-                font-size: 20px;
-                color: #eacc9b;
-                margin-right: 7px;
+                width: 60px;
+                height: 32px;
+                // margin-right: 7px;
+                // font-size: 20px;
+                // color: #eacc9b;
             }
             .minter_con_one_text2 {
                 height: 20px;
@@ -366,7 +369,7 @@ export default {
                 font-family: PingFangSC-Light, PingFang SC;
                 font-weight: 300;
                 color: #F9DDB3;
-                line-height: 18px;
+                line-height: 14px;
                 // line-height: 16px;
             }
         }

src/components/asset/assetInfo.vue

@@ -14,7 +14,7 @@
         <!-- <img :src="getImg(changeImgs(info.pic))" alt="" class="data_display_con_img"> -->
         <van-image
             width="100%"
-            height="165px"
+            height="calc(100vw/2 - 22.2px)"
             radius="18"
             :src="getImg(changeImgs(info.pic))"
             fit="cover"

src/components/product/HashCode.vue

@@ -10,7 +10,7 @@
                 </div>
                 <img
                     @click="copy(info.txHash || 'b3af1f7e02633960365ddf532a4008ed' + info.id)"
-                    src="@assets/svgs/copy_icon.svg"
+                    src="@assets/copy_icon.png"
                     alt=""
                     class="information_on_the_chain_content_img"
                 />
@@ -28,7 +28,7 @@
                 </div>
                 <img
                     @click="copy(info.txHash || '3d21c7cc9c4fae809857aba0464f3461876f640d6ffb91927b3db12d86449345' + info.id)"
-                    src="@assets/svgs/copy_icon.svg"
+                    src="@assets/copy_icon.png"
                     alt=""
                     class="information_on_the_chain_content_img"
                 />
@@ -138,7 +138,7 @@ export default {
         color: #ffffff;
         line-height: 18px;
         margin-right: 4px;
-        margin-top: 2px;
+        margin-top: 3px;
         overflow: hidden; //超出的文本隐藏
         text-overflow: ellipsis; //溢出用省略号显示
         white-space: nowrap; //溢出则不换行

src/components/product/productLarge.vue

@@ -10,18 +10,18 @@
         <div class="shop_list">
             <!-- 未售完 -->
             <div class="not_sold_out" v-if="time && info.scheduleSale">
-                <img :src="require('@assets/info_icon_shijian.png')" alt="" class="not_sold_out_img" />
+                <img :src="require('@assets/presale-con@3x.png')" alt="" class="not_sold_out_img" />
                 <div>即将开售: {{ startTime || time }}</div>
             </div>
             <!-- 已售完 -->
             <div class="shop_sold_out" v-if="isSolded">
-                <img :src="require('@assets/shop_sold_out.png')" alt="" class="shop_sold_out_img" />
+                <img :src="require('@assets/sold-out@3x.png')" alt="" class="shop_sold_out_img" />
                 <div>已售罄</div>
             </div>
             <!-- 即将售罄 -->
             <div class="shop_sold_out_two" v-else-if="isSold">即将售罄</div>
             <!-- <img :src="getImg(changeImgs(info.pic, 600))" alt="" class="commodity_map" /> -->
-            <van-image width="100%" height="345px" :radius="30" :src="getImg(changeImgs(info.pic))" fit="cover" />
+            <van-image width="100%" height="calc(100vw - 30px)" :radius="30" :src="getImg(changeImgs(info.pic))" fit="cover" />
             <div class="shop_title">
                 <div>{{ info.name }}</div>
                 <img v-if="!!info.model3d" :src="require('@assets/3d@3x.png')" alt="" class="shop_title_img" />
@@ -135,7 +135,7 @@ export default {
         height: 25px;
         background: #000000;
         border-radius: 15px;
-        line-height: 17px;
+        line-height: 16px;
         font-size: 13px;
         padding: 4px 6px;
         box-sizing: border-box;
@@ -166,7 +166,7 @@ export default {
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #ffffff;
-        line-height: 17px;
+        line-height: 16px;
         position: absolute;
         top: 16px;
         left: 16px;
@@ -188,7 +188,7 @@ export default {
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #ffffff;
-        line-height: 17px;
+        line-height: 16px;
         position: absolute;
         top: 16px;
         left: 16px;

src/components/product/recentSale.vue

@@ -1,23 +1,24 @@
 <template>
     <router-link
+        v-for="(item, index) in arr" :key="index"
         :to="{
             path: '/productDetail',
             query: {
-                collectionId: info.id
+                collectionId: item.id
             }
         }"
     >
         <div class="recent_sale_list">
-            <img :src="require('@assets/commodity-background-map.png')" alt="" class="recent_sale_list_three_img" />
+            <img :src="getImg(item.pic[0].url)" alt="" class="recent_sale_list_three_img" />
             <div class="recent_sale_list_three_con">
-                <div class="title">古董_百度图片搜索</div>
+                <div class="title">{{item.name}}</div>
                 <div class="limit">
                     <div class="limit_tip">限量</div>
-                    <div class="limit_number">888份</div>
+                    <div class="limit_number">{{item.total}}份</div>
                 </div>
                 <div class="price">
                     <div class="price_tip">¥</div>
-                    <div class="price_number">28.00</div>
+                    <div class="price_number">{{item.price}}</div>
                 </div>
             </div>
             <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture">
@@ -28,10 +29,10 @@
 <script>
 export default {
     props: {
-        info: {
-            type: Object,
+        arr: {
+            type: Array,
             default: () => {
-                return {};
+                return [];
             }
         },
         type: {

src/mixins/product.js

@@ -68,6 +68,13 @@ export default {
                 return false;
             }
         },
+        appointmentEnd(){
+            if (this.info.endTime) {
+                return this.dayjs().isBefore(this.dayjs(this.info.endTime));
+            } else {
+                return false;
+            }
+        },
         isSale() {
             if (this.info.saleTime) {
                 return this.dayjs().isBefore(this.dayjs(this.info.saleTime));

src/views/Discover.vue

@@ -2,17 +2,17 @@
     <!-- 顶部导航栏 -->
     <!-- <TopNavigation/> -->
     <!-- 搜素 -->
-    <van-pull-refresh
+    <!-- <van-pull-refresh
         success-text="加载成功"
         success-duration="1000"
         class="discover"
         v-model="isLoading"
         @refresh="onRefresh"
-    >
+    > -->
         <van-sticky :offset-top="0">
             <div class="search_con">
                 <div class="search" @click="$router.push('/productSearch')">
-                    <img src="@assets/icon-sosuo.png" alt="" class="search_img" />
+                    <img src="@assets/search-con@3x.png" alt="" class="search_img" />
                     <span class="search_text">搜索你想要的</span>
                 </div>
             </div>
@@ -122,7 +122,7 @@
                 </div> -->
             </div>
         </div>
-    </van-pull-refresh>
+    <!-- </van-pull-refresh> -->
 </template>
 
 <script>
@@ -519,11 +519,11 @@ export default {
         position: relative;
         line-height: 24px;
         .search_img {
-            width: 20px;
-            height: 20px;
+            width: 24px;
+            height: 24px;
             position: absolute;
             left: 10px;
-            top: 9px;
+            top: 7px;
         }
         .search_text {
             font-size: 14px;
@@ -587,6 +587,8 @@ export default {
         // margin-right: 32px;
         // width: 20%;
         flex: 0 !important;
+        font-size: 16px;
+        color: rgba(255, 255, 255, 0.5);
     }
     // .van-tab:nth-of-type(4){
     //     margin-right: 0px;
@@ -610,7 +612,7 @@ export default {
     }
 }
 /deep/ .van-tabs__nav--line.van-tabs__nav--complete {
-    padding: 0px  20px !important;
+    padding: 0px  15px !important;
     border: none !important;
     justify-content: space-between;
 }

src/views/Home.vue

@@ -24,7 +24,7 @@
                 <!-- 藏品切换 -->
                 <div class="tabs">
                     <div class="tab" :class="{ active: active === 0 }" @click="active = 0">推荐藏品</div>
-                    <!-- <div class="tab" :class="{ active: active === 1 }" @click="active = 1">发售预告</div> -->
+                    <div class="tab" :class="{ active: active === 1 }" @click="offeringNotice">发售预告</div>
                 </div>
                 <!-- <swiper
             pagination
@@ -53,28 +53,31 @@
                 <div class="collection_list" v-else>
                     <div class="advance_notice_sale">
                         <!-- <div class="advance_notice_sale_left">近期发售计划</div> -->
-                        <img :src="require('@assets/offering-plan@3x.png')" alt="" class="advance_notice_sale_left">
+                        <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
-                                :class="reserve ? 'advance_notice_sale_right_one' : 'advance_notice_sale_right_two'"
+                                :class="
+                                    scheduledStatus.length == 0
+                                        ? 'advance_notice_sale_right_one'
+                                        : 'advance_notice_sale_right_two'
+                                "
                                 @click="reserveButton"
                             >
-                                {{ reserve ? '已预定' : '预定' }}
+                                {{ scheduledStatus.length == 0 ? '已预定' : '预定' }}
                             </div>
                         </div>
                     </div>
+                    <!-- <van-list v-model:loading="loading" :finished="finished" @load="offeringNotice"> -->
                     <div class="collection_list_con" v-for="(item, index) in saleList" :key="index">
-                        <div class="collection_list_con_month">{{ item.month }}</div>
-                        <div class="collection_list_con_time" v-for="(item, index) in item.children" :key="index">
-                            <div class="collection_list_con_time_con">{{ item.time }}</div>
-                            <RecentSale
-                                v-for="(item, index) in item.saleChildren"
-                                :key="index"
-                                v-model:info="item[index]"
-                            ></RecentSale>
+                        <div class="collection_list_con_month">
+                            {{ item.dateTime.slice(5, 7) }}月{{ item.dateTime.slice(8, 10) }}日
                         </div>
+                        <div class="collection_list_con_time_con">{{ item.dateTime.slice(11, 16) }}开售</div>
+                        <RecentSale v-model:arr="item.collectionDTOS"></RecentSale>
                     </div>
+                    <!-- </van-list> -->
+                    <div v-if="saleList.length == 0" class="empty_two">暂无近期发售计划</div>
                 </div>
             </div>
             <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
@@ -145,10 +148,12 @@
 </template>
 <script>
 import product from '../mixins/product';
+import common from '../mixins/common';
 import ProductLarge from '../components/product/productLarge.vue';
 import banner from '../mixins/banner';
 import RecentSale from '../components/product/recentSale.vue';
 import { Toast } from 'vant';
+import { mapState } from 'vuex';
 // import ProductSmall from '../components/product/productSmall.vue';
 export default {
     data() {
@@ -162,38 +167,35 @@ export default {
             isLoading: true,
             active: 0,
             reserve: false,
-            saleList: [
-                {
-                    month: '03月21日',
-                    children: [
-                        {
-                            time: '10:00开售',
-                            saleChildren: [{ name: '11111' }]
-                        },
-                        {
-                            time: '12:00开售',
-                            saleChildren: [{ name: '11111' }]
-                        }
-                    ]
-                },
-                {
-                    month: '03月22日',
-                    children: [
-                        {
-                            time: '10:00开售',
-                            saleChildren: [{ name: '11111' }, { name: '11111' }, { name: '11111' }]
-                        }
-                    ]
-                }
-            ]
+            saleList: [],
+            scheduledStatus: []
         };
     },
-    mixins: [product, banner],
+    mixins: [product, banner, common],
     components: {
         ProductLarge,
         RecentSale
         // ProductSmall
     },
+    computed: {
+        ...mapState(['userInfo']),
+        getMonth() {
+            if (this.saleList.length != 0) {
+                this.saleList.map(item => {
+                    return item.dateTime.slice(5, 10);
+                });
+            }
+            return '';
+        },
+        getTime() {
+            if (this.saleList.length != 0) {
+                this.saleList.map(item => {
+                    return item.dateTime.slice(11, 16);
+                });
+            }
+            return '';
+        }
+    },
     methods: {
         // 获取藏品列表
         getList() {
@@ -212,6 +214,23 @@ export default {
                 this.$toast.clear();
             });
         },
+        // 发售预告
+        offeringNotice() {
+            this.active = 1;
+            // this.finished = false;
+            return this.$http.get('collection/subscribeList').then(res => {
+                // if (res.first) {
+                //     this.saleList = [];
+                // }
+                this.saleList = res.subList;
+                this.scheduledStatus = res.notSubscribedIds;
+                // this.loading = false;
+                // this.finished = res.last;
+                // if (!this.finished) {
+                //     this.page = this.page + 1;
+                // }
+            });
+        },
         // 获取首页轮播
         getBanner() {
             this.$http
@@ -241,10 +260,30 @@ export default {
         },
         // 预定
         reserveButton() {
-            Toast({
-                message: '已订阅',
-                icon: require('@assets/yudingwancheng@3x.png')
-            });
+            if (!this.isLogin) {
+                this.checkLogin();
+                return;
+            }
+            if (this.scheduledStatus.length != 0) {
+                this.scheduledStatus.forEach(item => {
+                    this.$http
+                        .get('/subscribe/makeAnAppointment', {
+                            collectionId: item,
+                            userId: this.userInfo.id
+                        })
+                        .then(res => {
+                            // Toast.success('预定成功');
+                            Toast({
+                                message: '已订阅',
+                                icon: require('@assets/yudingwancheng@3x.png')
+                            });
+                            this.offeringNotice();
+                        })
+                        .catch(e => {
+                            Toast(e.error);
+                        });
+                });
+            }
         }
     },
     mounted() {
@@ -450,6 +489,15 @@ export default {
 .home_refresh {
     background: #191d27;
 }
+.empty_two {
+    margin-top: 90px;
+    font-size: 16px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+    opacity: 0.3;
+    text-align: center;
+}
 .scroll-content {
     background: #191d27;
 }
@@ -554,5 +602,11 @@ export default {
             }
         }
     }
+    /deep/ .van-popup {
+        background: #444955 !important;
+    }
+    /deep/ .van-toast {
+        background: #444955 !important;
+    }
 }
 </style>

src/views/Store.vue

@@ -349,6 +349,7 @@ export default {
             .van-tab {
                 flex: 0 !important;
                 margin-right: 0px !important;
+                padding: 0px !important;
             }
             .van-tabs__line {
                 bottom: 0;
@@ -359,6 +360,9 @@ export default {
                 font-weight: 500;
                 color: #ffffff !important;
             }
+            .van-tab--line{
+                font-size: 16px;
+            }
         }
     }
     .label_tabs {
@@ -391,7 +395,7 @@ export default {
         }
     }
     .data_display {
-        padding: 0px 16px 16px;
+        padding: 0px 15px 16px;
         box-sizing: border-box;
         // background: #0F0F27;
         .data_display_fanter {

src/views/Submit.vue

@@ -144,7 +144,7 @@ export default {
                 //   name: "DCEP",
                 // },
             ],
-            icons: [require('@assets/xuanzhong@3x.png'), require('@assets/xuanzhong@3x.png')],
+            icons: [require('@assets/weixuanzhong@3.png'), require('@assets/xuanzhong@3x.png')],
             bottom: null,
             orderId: 0,
             gas: 1,

src/views/account/Login.vue

@@ -25,6 +25,7 @@
                     name="验证码"
                     placeholder="请输入验证码"
                     v-model="form.code"
+                    maxlength = '4'
                     :rules="[{ required: true, message: '请输入验证码' }]"
                 >
                     <template #button>
@@ -58,18 +59,25 @@
                 >
             </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>
+    <!-- 协议弹出框 -->
+    <van-overlay :show="protocol" @click="protocol = false">
+        <div class="wrapper" @click.stop>
+            <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>
-    </div>
+    </van-overlay>
 </template>
 
 <script>
@@ -113,7 +121,7 @@ export default {
         submit() {
             if (!this.checked) {
                 // this.$toast('请先阅读并同意隐私政策');
-                this.protocol = true
+                this.protocol = true;
                 return;
             }
             this.$toast.loading({
@@ -138,11 +146,11 @@ export default {
                 }, 1500);
             });
         },
-        agreement(value){
-            if(value){
-                this.checked = true
+        agreement(value) {
+            if (value) {
+                this.checked = true;
             }
-            this.protocol = false
+            this.protocol = false;
         },
         check() {
             if (this.active === 'phone') {
@@ -179,6 +187,13 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 90px 35px 0px;
+}
 .protocol_tips {
     transform: translateY(-150px);
     width: 100%;

src/views/account/Setting.vue

@@ -7,7 +7,7 @@
                         round
                         width="40"
                         height="40"
-                        :src="userInfo.avatar || require('@assets/svgs/img_default_photo.svg')"
+                        :src="userInfo.avatar || require('@assets/png-moren-touxiang.png')"
                         fit="cover"
                     />
                     <van-uploader class="avatar" :after-read="afterRead" result-type="file" />

src/views/asset/Detail.vue

@@ -87,7 +87,7 @@
                             <div class="collection_holder_one_time_con">{{ info.tokenId }}</div>
                             <img
                                 @click="copyOne(info.tokenId)"
-                                src="@assets/svgs/copy_icon.svg"
+                                src="@assets/copy_icon.png"
                                 alt=""
                                 class="collection_holder_one_time_con_img"
                             />

src/views/creator/Detail.vue

@@ -41,7 +41,7 @@
                 </div>
 
                 <div class="sub" :class="{ 'van-multi-ellipsis--l2': !showMore }">
-                    {{ info.intro || '他还没有介绍哦～' }}
+                    {{ introValue || '他还没有介绍哦～' }}
                 </div>
                 <!-- <div class="sub-right" v-if="info.intro && info.intro.length > 50">
                     <div @click="showMore = !showMore">{{ showMore ? '收起' : '展开' }}</div>
@@ -180,12 +180,15 @@ export default {
                 return 'TRANSFER';
             }
         },
-        intro() {
-            // console.log(this.info.intro.length)
+        introValue() {
             if (this.info.intro) {
-                return this.info.intro.substring(0, 50) + '...';
+                if(this.info.intro.length > 50){
+                    return this.info.intro.slice(0, 50) + '...';
+                }else{
+                    return this.info.intro
+                }
             } else {
-                return this.info.intro;
+                return ''
             }
         }
     },

src/views/order/Orders.vue

@@ -21,8 +21,8 @@
                     </van-tabs>
                     <!-- <div class="my_list">
                         <div class="my_list_con">我的订单</div> -->
-                        <!-- 标签页展示切换 -->
-                        <!-- <div class="label_tabs">
+                    <!-- 标签页展示切换 -->
+                    <!-- <div class="label_tabs">
                             <div
                                 :class="tabLabel == 'whole' ? 'label_selected' : 'label_not_selected'"
                                 @click="changeStatus('whole')"
@@ -45,7 +45,7 @@
                                 已完成
                             </div>
                         </div> -->
-                        <!-- <van-tabs v-model:active="status" :ellipsis="false" line-width="16" line-height="2" @click="changeStatus">
+                    <!-- <van-tabs v-model:active="status" :ellipsis="false" line-width="16" line-height="2" @click="changeStatus">
                 <van-tab v-for="(item, index) in tabs" :key="index" :title="item.name" :name="item.status"></van-tab>
                 </van-tabs> -->
                     <!-- </div> -->
@@ -200,29 +200,33 @@ export default {
     // margin-top: 44px;
     background: @bg;
 }
-   /deep/ .van-tabs__wrap {
-            height: 36px;
-            padding: 12px 0px 15px;
-            .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-tabs__wrap {
+    height: 36px;
+    padding: 12px 0px 15px;
+    .van-tabs__nav--line {
+        padding: 0  25px !important;
+        border-top: none;
+        background: #191d27;
+        justify-content: space-between;
+    }
+    .van-tab {
+        flex: 0 !important;
+        margin-right: 0px !important;
+        padding: 0px !important;
+    }
+    .van-tabs__line {
+        bottom: 0;
+        background: #d8d8d8;
+    }
+    .van-tab--active {
+        font-size: 16px;
+        font-weight: 500;
+        color: #ffffff !important;
+    }
+    .van-tab--line {
+        font-size: 16px;
+    }
+}
 .my_list {
     width: 100%;
     background: #15152d;
@@ -352,11 +356,11 @@ export default {
     // box-sizing: border-box;
     background: @bg;
 }
-.h44{
+.h44 {
     font-size: 14px;
     font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
-    color: #FFFFFF;
+    color: #ffffff;
     line-height: 20px;
     opacity: 0.3;
 }

src/views/product/Detail.vue

@@ -342,14 +342,14 @@
                     <div class="collection_author_right" @click="follow">{{ info.follow ? '已关注' : '关注' }}</div>
                 </div>
             </div>
-            <!-- <div class="appointment_process">
+            <div class="appointment_process" v-if="info.hasSubscribe">
                 <div class="appointment_process_con">
                     <div class="appointment_process_title">预约流程</div>
                     <van-divider />
                     <van-steps :active="active" active-color="#F3E0BC">
                         <van-step>开放预约</van-step>
                         <van-step>预约结束</van-step>
-                        <van-step>抽签及付款</van-step>
+                        <van-step>预约公布</van-step>
                         <van-step>开放购买</van-step>
                     </van-steps>
                     <div class="appointment_process_time">
@@ -373,7 +373,7 @@
                         </div>
                     </div>
                 </div>
-            </div> -->
+            </div>
             <div class="work_story">
                 <div class="work_story_con">
                     <div class="work_story_title">作品故事</div>
@@ -532,13 +532,14 @@
                 </div>
             </div>
             <div class="transaction_button_right">
-                <div class="coming_on_sale" v-if="isAppointmenta" block round>
+                <!-- <div class="coming_on_sale" v-if="isAppointmenta" block round>
                     <div class="coming_on_sale_con">即将开售</div>
-                    <div class="coming_on_sale_time">{{ startTime }}</div>
-                    <!-- <van-count-down :time="time" format="DD天 HH:mm:ss" class="coming_on_sale_time" /> -->
-                </div>
+                    <div class="coming_on_sale_time">{{ startTime }}</div> -->
+                <!-- <van-count-down :time="time" format="DD天 HH:mm:ss" class="coming_on_sale_time" /> -->
+                <!-- </div> -->
                 <!-- 预约 -->
-                <div class="buy_now" v-if="isAppointment" block round>
+                <div class="buy_now" v-if="info.subscribeStatus == 'NOT_STARTED' && info.hasSubscribe">
+                    <!-- v-if="isAppointment" block round -->
                     <div class="buy_now_con">敬请期待</div>
                     <div class="buy_now_time">{{ comingSoonTime }} 开放预约</div>
                 </div>
@@ -552,28 +553,56 @@
                 </div>
             </div>
             <div class="transaction_button_right">
-                <div class="coming_on_sale" v-if="isAppointmenta" block round>
+                <!-- <div class="coming_on_sale" v-if="isAppointmenta" block round>
                     <div class="coming_on_sale_con">即将开售</div>
                     <div class="coming_on_sale_time">{{ startTime }}</div>
-                </div>
-                <div class="sold_out" v-else-if="isSolded" block round>已售罄</div>
-                <div class="sold_out" v-else-if="isSold" block round>即将售罄</div>
-                <div class="sold_out" v-else-if="limit.limit > 0 && limit.count >= limit.limit" block round>
+                </div> -->
+                <div class="sold_out" v-if="isSolded" block round>已售罄</div>
+                <div class="sold_out" v-if="isSold" block round>即将售罄</div>
+                <div class="sold_out" v-if="limit.limit > 0 && limit.count >= limit.limit" block round>
                     限购{{ limit.limit }}件
                 </div>
                 <!-- 预约 -->
-                <div class="buy_now" v-if="isAppointment" block round>
+                <div class="buy_now" v-if="info.subscribeStatus == 'NOT_STARTED' && info.hasSubscribe">
+                    <!-- v-if="isAppointment" block round -->
                     <div class="buy_now_con">敬请期待</div>
                     <div class="buy_now_time">{{ comingSoonTime }} 开放预约</div>
                 </div>
-                <!-- <div v-else class="buy_now" @click="appointment">
-                    <div class="buy_now_con_two">立即预约</div>
-                </div> -->
-                <div class="buy_now" v-else @click="buyNow">
-                    <div class="buy_now_con">立即购买</div>
-                    <div>
-                        <span class="purchase_sold">已售&nbsp;{{ info.sale }}</span>
-                        <span class="Purchase_surplus">剩余{{ info.stock }}</span>
+                <div v-else-if="info.subscribeStatus == 'ONGOING' && info.hasSubscribe">
+                    <div class="buy_now" @click="appointment" v-if="!info.subscribed">
+                        <div class="buy_now_con_two">立即预约</div>
+                    </div>
+                    <div class="sold_out" v-else>已预约</div>
+                </div>
+                <div class="sold_out" v-else-if="info.subscribeStatus == 'SUBSCRIBE_ENDING' && info.hasSubscribe">
+                    <!-- v-if="!isAppointment && info.state == 'CLOSESUBSCRIBE'" -->
+                    预约结束
+                </div>
+                <div v-else-if="info.subscribeStatus == 'ANNOUNCING' && info.hasSubscribe">
+                    <!-- v-if="!isAppointment && info.state == 'PUBLISH'" class="button_three" -->
+                    <div class="buy_now" v-if="info.purchaseQualifications">
+                        <div class="buy_now_con_two">已获取购买资格</div>
+                    </div>
+                    <div class="sold_out" v-else>未获取购买资格</div>
+                </div>
+                <div v-else-if="info.subscribeStatus == 'ON_SALE' && info.hasSubscribe">
+                    <!-- v-if="!isAppointment && info.state == 'PURCHASE'" -->
+                    <div class="buy_now" @click="buyNow" v-if="info.purchaseQualifications">
+                        <div class="buy_now_con">立即购买</div>
+                        <div>
+                            <span class="purchase_sold">已售&nbsp;{{ info.sale }}</span>
+                            <span class="Purchase_surplus">剩余{{ info.stock }}</span>
+                        </div>
+                    </div>
+                    <div v-else class="sold_out">已售罄</div>
+                </div>
+                <div v-else-if="!info.hasSubscribe">
+                    <div class="buy_now" @click="buyNow">
+                        <div class="buy_now_con">立即购买</div>
+                        <div>
+                            <span class="purchase_sold">已售&nbsp;{{ info.sale }}</span>
+                            <span class="Purchase_surplus">剩余{{ info.stock }}</span>
+                        </div>
                     </div>
                 </div>
                 <!-- 预约 -->
@@ -609,6 +638,7 @@ import { ImagePreview } from 'vant';
 import { Toast } from 'vant';
 import product from '../../mixins/product';
 import coupon from '../../mixins/coupon';
+import common from '../../mixins/common';
 // import HashCode from '../../components/product/HashCode.vue';
 // import ProductTitle from '../../components/product/ProductTitle.vue';
 // import { Swiper, SwiperSlide } from 'swiper/vue';
@@ -631,10 +661,6 @@ import HashCode from '../../components/product/HashCode.vue';
 // import HashCode from '../../components/product/HashCode.vue';
 import { ref } from 'vue';
 export default {
-    setup() {
-        const active = ref(1);
-        return { active };
-    },
     components: {
         // HashCode,
         // ProductTitle,
@@ -647,12 +673,19 @@ export default {
         // Tasks,
         // TopNavigation
     },
-    mixins: [product, coupon],
+    mixins: [product, coupon, common],
     name: 'productDetail',
     data() {
         return {
             activeName: '1',
             info: {},
+            timeNode: 0,
+            appointmentStartTime: 0,
+            endTime: 0,
+            publishTime: 0,
+            purchaseTime: 0,
+            activeValue: 0,
+            millisecond: 0,
             liked: false,
             btn: null,
             blindBoxItems: [],
@@ -674,9 +707,14 @@ export default {
             deposit: false,
             showOnly: false,
             noLikes: require('@assets/icon-dianzan.png'),
-            likes: require('@assets/icon-dianzan@2x.png')
+            likes: require('@assets/icon-dianzan@2x.png'),
+            startTime: null
         };
     },
+    setup() {
+        const active = ref(0);
+        return { active };
+    },
     computed: {
         ...mapState(['userInfo']),
         banners() {
@@ -761,6 +799,7 @@ export default {
             this.limit = res;
         });
         this.getProduct();
+        this.timer();
         // if (this.isLogin) {
         //     this.$http
         //         .post(
@@ -781,6 +820,11 @@ export default {
         //         });
         // }
     },
+    beforeUnmount() {
+        if (this.startTime) {
+            clearTimeout(this.startTime);
+        }
+    },
     methods: {
         preview(index = 0, list = []) {
             ImagePreview({
@@ -790,8 +834,76 @@ export default {
                 startPosition: index
             });
         },
+        // 时间赋值
+        // timeAssignment() {
+        //     this.timeNode = parseFloat(new Date(this.info.startTime).getTime());
+        //     if (this.info.state == 'OPENSUBSCRIBE') {
+        //         this.timeNode = new Date(this.info.startTime).getTime();
+        //     } else if (this.info.state == 'CLOSESUBSCRIBE') {
+        //         this.timeNode = new Date(this.info.endTime).getTime();
+        //     } else if (this.info.state == 'PUBLISH') {
+        //         this.timeNode = new Date(this.info.publishTime).getTime();
+        //     } else if (this.info.state == 'PURCHASE') {
+        //         this.timeNode = new Date(this.info.purchaseTime).getTime();
+        //     }
+        // },
+        // 定时器
+        timer() {
+            console.log("qddddddag",this.millisecond)
+            if (this.startTime) {
+                clearTimeout(this.startTime);
+            }
+            this.startTime = setTimeout(() => {
+                this.getProduct();
+            }, this.millisecond);
+        },
+        // timer() {
+        //     let startTime = setInterval(() => {
+        //         let currentTime = new Date().getTime();
+        //         if (currentTime < this.appointmentStartTime) {
+        //             let beforeAppointment = this.$refs.beforeAppointment
+        //             beforeAppointment.style.display = 'block';
+        //         } else if (this.appointmentStartTime <= currentTime && currentTime < this.endTime) {
+        //             let beforeAppointment = this.$refs.beforeAppointment
+        //             let buttonOne = this.$refs.appointmentStartTime;
+        //             beforeAppointment.style.display = 'none';
+        //             buttonOne.style.display = 'block';
+        //             this.active = 0;
+        //         } else if (this.endTime <= currentTime && currentTime < this.publishTime) {
+        //             let buttonOne = this.$refs.appointmentStartTime;
+        //             let buttonTwo = this.$refs.endTime;
+        //             buttonOne.style.display = 'none';
+        //             buttonTwo.style.display = 'block';
+        //             this.active = 1;
+        //         } else if (this.publishTime <= currentTime && currentTime < this.purchaseTime) {
+        //             let buttonTwo = this.$refs.endTime;
+        //             let buttonThree = this.$refs.publishTime;
+        //             buttonTwo.style.display = 'none';
+        //             buttonThree.style.display = 'block';
+        //             this.active = 2;
+        //         } else if (this.purchaseTime <= currentTime) {
+        //             let buttonThree = this.$refs.publishTime;
+        //             let buttonFour = this.$refs.purchaseTime;
+        //             buttonThree.style.display = 'none';
+        //             buttonFour.style.display = 'block';
+        //             this.active = 3;
+        //             console.log("122123154134")
+        //             // if (this.isSolded || this.isSold) {
+        //             //     let buttonFour = this.$refs.purchaseTime;
+        //             //     buttonFour.style.display = 'none';
+        //             // }
+        //         }
+        //     }, 500);
+        //     // if(startTime){
+        //     //     clearTimeout(startTime)
+        //     // }
+        // },
         // 关注
         follow() {
+            if (!this.isLogin) {
+                this.checkLogin();
+                return;
+            }
             if (!this.info.follow) {
                 this.$http.get(`/user/${this.info.id}/follow`).then(res => {
                     this.getInfo();
@@ -806,11 +918,19 @@ export default {
         },
         // 藏品预约
         appointment() {
-            console.log('121212', typeof this.info.id);
-            let data = {collectionId: this.info.id, userId: this.userInfo.id};
+            if (!this.isLogin) {
+                this.checkLogin();
+                return;
+            }
             this.$http
-                .post('subscribe/makeAnAppointment', data)
-                .then(res => {})
+                .get('/subscribe/makeAnAppointment', {
+                    collectionId: this.info.id,
+                    userId: this.userInfo.id
+                })
+                .then(res => {
+                    Toast.success('预约成功');
+                    this.getProduct();
+                })
                 .catch(e => {
                     Toast(e.error);
                     // if (e.error) {
@@ -835,10 +955,10 @@ export default {
         //         this.getData(true);
         //     });
         getProduct() {
-            this.$toast.loading({
-                message: '加载中...',
-                forbidClick: true
-            });
+            // this.$toast.loading({
+            //     message: '加载中...',
+            //     forbidClick: true
+            // });
             this.$http
                 .get('/collection/get/' + this.collectionId)
                 .then(res => {
@@ -846,8 +966,43 @@ export default {
                         res.onShelf = true;
                         this.checkLogin();
                     }
-                    console.log(res);
+                    // console.log(res);
                     this.info = res;
+                    // this.appointmentStartTime = new Date(this.info.startTime).getTime();
+                    // this.endTime = new Date(this.info.endTime).getTime();
+                    // this.publishTime = new Date(this.info.publishTime).getTime();
+                    // this.purchaseTime = new Date(this.info.purchaseTime).getTime();
+                    if (res.subscribeStatus == 'NOT_STARTED') {
+                        this.millisecond = this.dayjs(res.startTime, 'YYYY-MM-DD HH:mm:ss').diff(
+                            this.dayjs(),
+                            'Millisecond'
+                        );
+                    }
+                    if (res.subscribeStatus == 'ONGOING') {
+                        this.millisecond = this.dayjs(res.endTime, 'YYYY-MM-DD HH:mm:ss').diff(
+                            this.dayjs(),
+                            'Millisecond'
+                        );
+                        this.active = 0;
+                        // this.timeNode = new Date(this.info.startTime).getTime();
+                    } else if (res.subscribeStatus == 'SUBSCRIBE_ENDING') {
+                        this.millisecond = this.dayjs(res.publishTime, 'YYYY-MM-DD HH:mm:ss').diff(
+                            this.dayjs(),
+                            'Millisecond'
+                        );
+                        this.active = 1;
+                        // this.timeNode = new Date(this.info.endTime).getTime();
+                    } else if (res.subscribeStatus == 'ANNOUNCING') {
+                        this.millisecond = this.dayjs(res.purchaseTime, 'YYYY-MM-DD HH:mm:ss').diff(
+                            this.dayjs(),
+                            'Millisecond'
+                        );
+                        this.active = 2;
+                        // this.timeNode = new Date(this.info.publishTime).getTime();
+                    } else if (res.subscribeStatus == 'ON_SALE') {
+                        this.active = 3;
+                        // this.timeNode = new Date(this.info.purchaseTime).getTime();
+                    }
                     //优惠券
                     if (res.couponPayment) {
                         this.getCouponList();
@@ -903,7 +1058,7 @@ export default {
                             this.btn = this.$refs.btn;
                         }
                     });
-                    this.$toast.clear();
+                    // this.$toast.clear();
 
                     if (res.type === 'BLIND_BOX') {
                         return this.$http.post(
@@ -1034,6 +1189,21 @@ export default {
     width: 100%;
     height: 44px;
 }
+.buttonOne {
+    display: none;
+}
+.button_two {
+    display: none;
+}
+.button_three {
+    display: none;
+}
+.button_four {
+    display: none;
+}
+.beforeAppointment_con {
+    display: none;
+}
 .detail_content {
     width: 100%;
     background: #191d27;

src/views/product/Search.vue

@@ -271,7 +271,7 @@ export default {
     font-weight: 400;
 }
 /deep/ .van-sticky {
-    padding: 12px 0px 10px;
+    padding: 12px 0px 0px;
     box-sizing: border-box;
     background: #191d27;
 }
@@ -354,7 +354,7 @@ export default {
     justify-content: space-between;
     flex-wrap: wrap;
     padding: 16px;
-    padding-top: 0px;
+    padding-top: 8px;
     box-sizing: border-box;
 }
 .hot-content {

src/views/user/Exchange.vue

@@ -387,14 +387,15 @@ export default {
 /deep/ .van-tabs__wrap {
     height: 36px;
     .van-tabs__nav--line {
-        padding-left: 0 !important;
+        padding: 0  34px !important;
         border-top: none;
         background: #191d27;
-        padding-bottom: 0px;
+        justify-content: space-between;
     }
     .van-tab {
-        flex: 1 !important;
+        flex: 0 !important;
         margin-right: 0px !important;
+        padding: 0px !important;
     }
     .van-tabs__line {
         bottom: 0;
@@ -405,8 +406,11 @@ export default {
         font-weight: 500;
         color: #ffffff !important;
     }
+    .van-tab--line {
+        font-size: 16px;
+    }
 }
-/deep/ .van-empty{
+/deep/ .van-empty {
     margin-top: 60px;
 }
 .empty_two {