Merge branch 'yuan' of panhui/lasuo_nft_front into master

src/components/order/OrderInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <router-link
+    <!-- <router-link
         :to="{
             path: '/orderDetail',
             query: {
@@ -7,21 +7,39 @@
             }
         }"
         @click="click"
-    >
+    > -->
         <div class="list_display_con">
             <div class="list_display_top">
-                <div class="list_display_top_time">订单时间&nbsp;:&nbsp;{{info.createdAt}}</div>
+                <div class="list_display_top_time">订单编号&nbsp;:&nbsp;{{info.id}}</div>
                 <div class="transaction_status">{{ getLabelName(info.status, statusOptions) }}</div>
             </div>
-            <van-divider/>
+            <!-- <van-divider/> -->
             <div class="list_display_bottom">
                 <img :src="getImg(changeImgs(info.pic))" alt="" class="list_display_bottom_img">
                 <div class="product_details">
                     <div class="product_details_title">{{info.name}}</div>
-                    <div class="product_details_collection">{{info.category}}</div>
+                    <div class="product_details_collection">
+                        <div class="product_details_collection_title">限量</div>
+                        <div class="product_details_collection_value">{{info.total || '888'}}份</div>
+                    </div>
                     <div class="product_details_price"><span class="product_details_price_symbol">￥</span>{{info.price}}</div>
                 </div>
-                <div class="product_details_number">x1</div>
+                <!-- <div class="product_details_number">x1</div> -->
+            </div>
+            <div class="transaction_button">
+                <div class="transaction_button_left">
+                    <div v-if="info.status === 'CANCELLED'">下单时间：{{info.createdAt}}</div>
+                    <div v-else-if="info.status === 'FINISH'">完成时间：{{info.payTime}}</div>
+                    <!-- <div></div> -->
+                </div>
+                <div class="transaction_button_right">
+                    <!-- <div class="transaction_button_right_one">
+                        <div class="transaction_button_right_one_text1">取消订单</div>
+                        <div class="transaction_button_right_one_text2" @click="paymentOrder">付款</div>
+                    </div> -->
+                    <div class="transaction_button_right_two" @click="del" v-if="info.status === 'CANCELLED'">删除订单</div>
+                    <div class="transaction_button_right_two" @click="$router.push({ path: '/assetDetail', query: { id: info.collectionId } })" v-else-if="info.status === 'FINISH'">查看藏品</div>
+                </div>
             </div>
         </div>
         <!-- <div class="order-top">
@@ -49,12 +67,13 @@
         <div class="btns">
             <van-button color="#939599" @click.prevent="del" plain size="mini" round> 删除订单 </van-button>
         </div> -->
-    </router-link>
+    <!-- </router-link> -->
 </template>
 
 <script>
 import order from '../../mixins/order';
 import product from '../../mixins/product';
+import { Dialog } from 'vant';
 export default {
     props: {
         info: {
@@ -77,7 +96,7 @@ export default {
             this.$emit('delFn');
         },
         del() {
-            this.Dialog.confirm({
+            Dialog.confirm({
                 title: '确定删除吗？',
                 message: '删除此记录将消失'
             }).then(() => {
@@ -103,6 +122,15 @@ export default {
             //         }, 1000);
             //     });
         },
+        // 订单付款
+        paymentOrder(){
+            this.$router.push({
+                        path: '/submit',
+                        query: {
+                            id: this.info.collectionId
+                        }
+                    });
+        },
         likeProduct() {
             if (!this.info.liked) {
                 this.$http.get(`/collection/${this.info.id}/like`).then(() => {
@@ -131,73 +159,93 @@ export default {
 <style lang="less" scoped>
     .list_display_con{
             width: 100%;
-            background: #29293F;
-            border-radius: 8px;
-            margin-bottom: 16px;
-            padding: 10px;
+            background: #1E222C;
+            border-radius: 12px;
+            margin-bottom: 10px;
+            padding: 10px 15px 12px;
             box-sizing: border-box;
             .list_display_top{
                 display: flex;
                 justify-content: space-between;
-                margin-bottom: 8px;
+                margin-bottom: 14px;
                 .list_display_top_time{
-                    font-size: 12px;
+                    font-size: 16px;
                     font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
-                    color: #C8C9CC;
+                    color: #FFFFFF;
+                    line-height: 22px;
                 }
                 .transaction_status{
                     font-size: 14px;
                     font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
-                    color: #28B6FF;
+                    color: #FFFFFF;
+                    opacity: 0.3;
+                    line-height: 22px;
                 }
             }
             .list_display_bottom{
-                margin-top: 8px;
+                // margin-top: 8px;
                 display: flex;
-                position: relative;
+                // position: relative;
                 .list_display_bottom_img{
-                    width: 80px;
-                    height: 80px;
+                    width: 90px;
+                    height: 90px;
                     margin-right: 12px;
+                    border-radius: 12px;
+                }
+                .product_details{
+                    width: calc(100% - 110px);
                 }
                 .product_details_title{
-                    width: 215px;
+                    width: 100%;
                     font-size: 14px;
                     font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #FFFFFF;
-                    margin-bottom: 6px;
+                    line-height: 20px;
+                    margin-bottom: 8px;
+                    margin-top: 8px;
                     white-space:nowrap;
                     overflow:hidden;
                     text-overflow:ellipsis;
                 }
                 .product_details_collection{
-                    width: 56px;
-                    height: 22px;
-                    background: rgba(255, 255, 255, 0.1);
-                    border-radius: 4px;
-                    font-size: 12px;
+                    display: flex;
+                    margin-bottom: 8px;
+                    font-size: 11px;
                     font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
-                    color: #28B6FF;
-                    line-height: 22px;
-                    margin-bottom: 10px;
-                    text-align: center;
+                    color: #282D3A;
+                    line-height: 16px;
+                    .product_details_collection_title{
+                        width: 34px;
+                        height: 16px;
+                        background: #F9DDB3;
+                        border-radius: 3px 0px 0px 3px;
+                        text-align: center;
+                    }
+                    .product_details_collection_value{
+                        height: 16px;
+                        background: #323743;
+                        border-radius: 0px 3px 3px 0px;
+                        padding: 0px 6px;
+                        box-sizing: border-box;
+                        color: #F9DDB3;
+                    }
                 }
                 .product_details_price{
-                    margin-left: 10px;
-                    position: relative;
                     font-size: 16px;
-                    font-family: PingFangSC-Medium, PingFang SC;
-                    font-weight: 500;
-                    color: #28B6FF;
+                    font-family: PingFangSC-Semibold, PingFang SC;
+                    font-weight: 600;
+                    color: #FFFFFF;
+                    line-height: 24px;
                     .product_details_price_symbol{
-                        font-size: 10px;
-                        position: absolute;
-                        bottom: 1px;
-                        left: -10px;
+                        font-size: 14px;
+                        font-family: PingFangSC-Semibold, PingFang SC;
+                        font-weight: 600;
+                        color: #FFFFFF;
+                        line-height: 20px;
                     }
                 }
                 .product_details_number{
@@ -210,6 +258,61 @@ export default {
                     bottom: 0px;
                 }
             }
+            .transaction_button{
+                margin-top: 17px;
+                display: flex;
+                justify-content: space-between;
+                .transaction_button_left{
+                    font-size: 12px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #FFFFFF;
+                    line-height: 20px;
+                    opacity: 0.3;
+                    margin-top: 7px;
+                }
+                .transaction_button_right{
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    .transaction_button_right_two{
+                        height: 34px;
+                        padding: 0px 14px;
+                        border-radius: 17px;
+                        border: 1px solid #333845;
+                        box-sizing: border-box;
+                        line-height: 32px;
+                        color: #FFFFFF;
+                        opacity: 0.3;
+                        text-align: center;
+                    }
+                    .transaction_button_right_one{
+                        display: flex;
+                        .transaction_button_right_one_text1{
+                            width: 84px;
+                            height: 34px;
+                            border-radius: 17px;
+                            border: 1px solid #333845;
+                            box-sizing: border-box;
+                            line-height: 32px;
+                            text-align: center;
+                            margin-right: 12px;
+                            color: #FFFFFF;
+                            opacity: 0.3;
+                        }
+                        .transaction_button_right_one_text2{
+                            width: 84px;
+                            height: 34px;
+                            border-radius: 17px;
+                            border: 1px solid #F2D5B2;
+                            box-sizing: border-box;
+                            line-height: 32px;
+                            text-align: center;
+                            color: #F2D5B2;
+                        }
+                    }
+                }
+            }
         }
 /deep/ .van-divider::before{
     height: 1px;

src/router/index.js

@@ -410,7 +410,15 @@ const routes = [
         component: () => import('../views/asset/Consignment.vue'),
         meta: {
             pageType: Page.Every,
-            title: '拉索宇宙'
+            title: '挂售上架'
+        }
+    },
+    {
+        path: '/ConsignmentSuccess',
+        name: 'ConsignmentSuccess',
+        component: () => import('../views/asset/ConsignmentSuccess.vue'),
+        meta: {
+            pageType: Page.Every
         }
     },
     {
@@ -443,7 +451,7 @@ const routes = [
         name: 'submit',
         component: () => import('../views/Submit.vue'),
         meta: {
-            title: '拉索宇宙'
+            title: '我的订单'
         }
     },
     {
@@ -459,7 +467,7 @@ const routes = [
         name: 'givesubmit',
         component: () => import('../views/Givesubmit.vue'),
         meta: {
-            title: '拉索宇宙'
+            title: 'GAS费用'
         }
     },
     {
@@ -476,7 +484,7 @@ const routes = [
         name: 'orders',
         component: () => import('../views/order/Orders.vue'),
         meta: {
-            title: '拉索宇宙'
+            title: '我的订单'
         }
     },
     {
@@ -484,7 +492,7 @@ const routes = [
         name: 'orderDetail',
         component: () => import('../views/order/Detail.vue'),
         meta: {
-            title: '拉索宇宙'
+            title: '订单详情'
         }
     },
     {

src/views/Discover.vue

@@ -16,31 +16,27 @@
                     <span class="search_text">搜索你想要的</span>
                 </div>
             </div>
-        </van-sticky>
-        <!-- 商品展示 -->
-        <div class="commodity_display">
-            <!-- <van-swipe :loop="false" :width="94" :height="90" :show-indicators="false">
-                <van-swipe-item v-for="(item, index) in commodityDisplayList" :key="index">
-                    <van-image width="94px" height="90px" :src="getImg(item.pic)" fit="cover" />
-                </van-swipe-item>
-            </van-swipe> -->
-            <swiper v-if="commodityDisplayList.length > 0" slides-per-view="auto">
-                <swiper-slide class="setting" v-for="item in commodityDisplayList" :key="item.id" style="width: 64px">
-                    <van-image
-                        width="64px"
-                        height="64px"
-                        radius="33"
-                        :src="getImg(item.pic)"
-                        fit="cover"
-                        @click="goNext(item)"
-                    />
-                    <div class="setting_title">{{item.name}}</div>
-                </swiper-slide>
-            </swiper>
-        </div>
-        <div
-            class="explore_content"
-        >
+            <!-- 商品展示 -->
+            <div class="commodity_display">
+                <swiper v-if="commodityDisplayList.length > 0" slides-per-view="auto">
+                    <swiper-slide
+                        class="setting"
+                        v-for="item in commodityDisplayList"
+                        :key="item.id"
+                        style="width: 64px"
+                    >
+                        <van-image
+                            width="64px"
+                            height="64px"
+                            radius="33"
+                            :src="getImg(item.pic)"
+                            fit="cover"
+                            @click="goNext(item)"
+                        />
+                        <div class="setting_title">{{ item.name }}</div>
+                    </swiper-slide>
+                </swiper>
+            </div>
             <van-tabs
                 v-model:active="sort"
                 :ellipsis="false"
@@ -80,6 +76,13 @@
                     </template>
                 </van-tab>
             </van-tabs>
+        </van-sticky>
+        <!-- <van-swipe :loop="false" :width="94" :height="90" :show-indicators="false">
+                <van-swipe-item v-for="(item, index) in commodityDisplayList" :key="index">
+                    <van-image width="94px" height="90px" :src="getImg(item.pic)" fit="cover" />
+                </van-swipe-item>
+            </van-swipe> -->
+        <div class="explore_content">
             <!-- banner图展示 -->
             <!-- <div class="banner">
                 <div class="banner_con" v-for="(item, index) in bannerList" :key="index" @click="showJump(index)">
@@ -478,16 +481,16 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.scroll-wrapper{
-    background: #191D27 !important;
+.scroll-wrapper {
+    background: #191d27 !important;
 }
 .discover {
-    background: #191D27;
+    background: #191d27;
 }
 .search_con {
     padding: 9px 15px 20px 15px;
     box-sizing: border-box;
-    background: #191D27;
+    background: #191d27;
     // background: #191D27;
     .search {
         width: 100%;
@@ -545,22 +548,63 @@ export default {
     padding-left: 15px;
     box-sizing: border-box;
 }
+/deep/ .van-cell__title span {
+    color: #ffffff;
+}
+/deep/ .van-cell {
+    padding: 4px 0px 8px 2px;
+    box-sizing: border-box;
+}
+/deep/ .van-swipe__track {
+    width: 100%;
+}
+/deep/ .van-tabs--line .van-tabs__wrap {
+    height: 40px;
+    margin-bottom: 8px;
+    .van-tab--active {
+        font-weight: 500;
+        color: #f2d5b2 !important;
+    }
+    .van-tab {
+        // margin-right: 32px;
+        // width: 20%;
+        flex: 1 !important;
+    }
+    // .van-tab:nth-of-type(4){
+    //     margin-right: 0px;
+    // }
+    .tab {
+        position: relative;
+        padding-right: 14px;
+        box-sizing: border-box;
+        .van-icon {
+            position: absolute;
+            right: 0;
+
+            &.van-icon-arrow-down {
+                top: 8px;
+            }
+
+            &.van-icon-arrow-up {
+                bottom: 8px;
+            }
+        }
+    }
+}
+/deep/ .van-tabs__nav--line.van-tabs__nav--complete {
+    padding: 0 !important;
+    border: none !important;
+}
+/deep/ .van-tabs__line {
+    width: 0px !important;
+    height: 0px !important;
+}
 .explore_content {
     width: 100%;
-    background: #191D27;
+    background: #191d27;
     padding: 0px 15px 15px 15px;
     // margin-top: 44px;
     box-sizing: border-box;
-    /deep/ .van-cell__title span {
-        color: #ffffff;
-    }
-    /deep/ .van-cell {
-        padding: 4px 0px 8px 2px;
-        box-sizing: border-box;
-    }
-    /deep/ .van-swipe__track {
-        width: 100%;
-    }
     // .commodity_display {
     //     width: 100%;
     //     margin-bottom: 24px;
@@ -579,47 +623,7 @@ export default {
     //         margin-right: 50px;
     //     }
     // }
-    /deep/ .van-tabs--line .van-tabs__wrap {
-        height: 40px;
-        margin-bottom: 8px;
-        .van-tab--active{
-            font-weight: 500;
-            color: #F2D5B2 !important;
-        }
-        .van-tab {
-            margin-right: 32px;
-            // width: 20%;
-            flex: 1 !important;
-        }
-        // .van-tab:nth-of-type(4){
-        //     margin-right: 0px;
-        // }
-        .tab {
-            position: relative;
-            padding-right: 14px;
-            box-sizing: border-box;
-            .van-icon {
-                position: absolute;
-                right: 0;
-
-                &.van-icon-arrow-down {
-                    top: 8px;
-                }
 
-                &.van-icon-arrow-up {
-                    bottom: 8px;
-                }
-            }
-        }
-    }
-    /deep/ .van-tabs__nav--line.van-tabs__nav--complete {
-        padding: 0 !important;
-        border: none !important;
-    }
-    /deep/ .van-tabs__line {
-        width: 0px !important;
-        height: 0px !important;
-    }
     .banner {
         width: 100%;
         height: 74px;

src/views/Givesubmit.vue

@@ -1,19 +1,35 @@
 <template>
     <div class="content">
-        <div class="gift_confirmation">赠送确认</div>
-        <div class="gift_confirmation_tip">通过手机号码检索用户信息，确认赠送后该加密作品将会被转移</div>
+        <div class="gift_confirmation_top">
+            <div class="gift_confirmation_top_one">GAS费用</div>
+            <div class="gift_confirmation_top_two">
+                <div class="gift_confirmation_top_two_text1">¥</div>
+                <div class="gift_confirmation_top_two_text2">{{ gas }}</div>
+            </div>
+            <div class="gift_confirmation_top_three">
+                <div class="gift_confirmation_top_three_text1">{{ info.name }}</div>
+                <div class="gift_confirmation_top_three_text2">赠品详情</div>
+                <img :src="require('@assets/more@3x.png')" alt="" class="gift_confirmation_top_three_img" />
+            </div>
+        </div>
         <div class="gift_confirmation_information">
             <div class="gift_confirmation_information_title">用户信息</div>
-            <van-divider />
             <div class="gift_confirmation_information_con">
-                <van-image width="40px" height="40px" radius="65" :src="getImg(infos.avatar)" fit="cover" style="margin-right: 10px"/>
+                <van-image
+                    width="40px"
+                    height="40px"
+                    radius="65"
+                    :src="getImg(infos.avatar)"
+                    fit="cover"
+                    style="margin-right: 10px"
+                />
                 <div>
                     <div class="gift_confirmation_information_con_name">{{ infos.realName || '保密' }}</div>
                     <div class="gift_confirmation_information_con_phone">手机号码&nbsp;{{ infos.phone }}</div>
                 </div>
             </div>
         </div>
-        <div class="transaction_password">
+        <!-- <div class="transaction_password">
             <div class="transaction_password_one">
                 <div class="transaction_password_one_title">请输入交易密码</div>
                 <div class="transaction_password_forget" @click="$router.push('/tradingPassword')">
@@ -23,49 +39,59 @@
             </div>
             <van-divider />
             <div>
-                <!-- v-if="sets" -->
-                <!-- 密码输入框 -->
+                密码输入框
                 <van-password-input
-                :value="password"
-                :gutter="10"
-                :focused="showKeyboard"
-                @focus="showKeyboard = true"
+                    :value="password"
+                    :gutter="10"
+                    :focused="showKeyboard"
+                    @focus="showKeyboard = true"
                 />
-                <!-- 数字键盘 -->
+                数字键盘
                 <van-number-keyboard
-                v-model="password"
-                :show="showKeyboard"
-                @blur="showKeyboard = false"
-                maxlength="6"
-                theme="custom"
-                close-button-text="完成"
-                random-key-order
+                    v-model="password"
+                    :show="showKeyboard"
+                    @blur="showKeyboard = false"
+                    maxlength="6"
+                    theme="custom"
+                    close-button-text="完成"
+                    random-key-order
                 />
             </div>
-            <!-- <div v-else class="text3" @click="$router.push('/tradingPassword')">您当前没有交易密码，点击去设置</div> -->
-        </div>
-        <div class="additional_costs">
+            <div v-else class="text3" @click="$router.push('/tradingPassword')">您当前没有交易密码，点击去设置</div>
+        </div> -->
+        <!-- <div class="additional_costs">
             <div class="additional_costs_left">GAS费用</div>
             <div class="additional_costs_right">¥{{ gas }}</div>
-        </div>
+        </div> -->
         <div class="payment_method">
             <div class="payment_method_con" @click="payType = item.type" v-for="(item, index) in payInfos" :key="index">
-                <div class="payment_method_con_left">
-                    <img :src="item.icon" alt="" class="payment_method_img">
-                    <div class="payment_method_title">{{item.name}}</div>
+                <div class="payment_method_con_text">
+                    <div class="payment_method_con_left">
+                        <img :src="item.icon" alt="" class="payment_method_img" />
+                        <div class="payment_method_title">{{ item.name }}</div>
+                    </div>
+                    <!-- <van-radio-group v-model="payType">
+                        <van-radio :name="item.type" icon-size="24px" checked-color="#28B6FF"></van-radio>
+                    </van-radio-group> -->
+                    <img class="choose-icon" :src="payType === item.type ? icons[1] : icons[0]" alt="" />
+                </div>
+                <van-divider />
+            </div>
+            <div class="add_bank_card">
+                <div class="add_bank_card_con">
+                    <img :src="require('@assets/tianjia@3x.png')" alt="" class="add_bank_card_img_one" />
+                    <div class="add_bank_card_con_title">添加银行卡付款</div>
                 </div>
-                <van-radio-group v-model="payType">
-                    <van-radio :name="item.type" icon-size="24px" checked-color="#28B6FF"></van-radio>
-                </van-radio-group>
+                <img :src="require('@assets/gengduo@3x.png')" alt="" class="add_bank_card_img_two" />
             </div>
-        </div>  
+        </div>
     </div>
     <div class="gift_button">
-        <div class="gift_button_cancel" @click="$router.go(-1)">取消</div>
+        <!-- <div class="gift_button_cancel" @click="$router.go(-1)">取消</div> -->
         <div class="gift_button_payment" @click="submit">
             <a id="pay" :href="hrefUrl"></a>
-        确认支付</div>
-        
+            确认支付
+        </div>
     </div>
 </template>
 
@@ -87,7 +113,7 @@ export default {
     data() {
         return {
             info: {},
-            infos:{},
+            infos: {},
             message: '',
             password: '',
             enable_wx_lite: false,
@@ -96,12 +122,12 @@ export default {
             // payType: 'ALIPAY',
             payInfos: [
                 {
-                    icon: require('@assets/svgs/zhifubao.svg'),
+                    icon: require('@assets/zhifubao@3x.png'),
                     name: '支付宝',
                     type: 'ALIPAY'
                 },
                 {
-                    icon: require('@assets/svgs/wechat.svg'),
+                    icon: require('@assets/weixin@3x.png'),
                     name: '微信',
                     type: 'WEIXIN'
                 }
@@ -110,7 +136,7 @@ export default {
                 //   name: "DCEP",
                 // },
             ],
-            icons: [require('@assets/icon_gouxuan_huise.png'), require('@assets/icon_gouxuan_pre.png')],
+            icons: [require('@assets/xuanzhong@3x.png'), require('@assets/xuanzhong@3x.png')],
             bottom: null,
             orderId: 0,
             gas: 1,
@@ -133,7 +159,7 @@ export default {
         }
     },
     mounted() {
-        this.getGiverInformation()
+        this.getGiverInformation();
         this.$toast.loading({
             message: '加载中...',
             forbidClick: true
@@ -174,14 +200,14 @@ export default {
         });
     },
     methods: {
-        getGiverInformation(){
+        getGiverInformation() {
             this.$http
                 .post('/user/searchByPhone', {
                     phone: this.$route.query.phone
                 })
-                .then(res=>{
-                    this.infos = res
-                })
+                .then(res => {
+                    this.infos = res;
+                });
         },
         passFn() {
             this.$http
@@ -340,200 +366,303 @@ export default {
 </script>
 
 <style lang="less" scoped>
-    .content{
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        background: #0A0A1B;
-        padding: 16px;
+.content {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background: #191d27;
+    padding: 0px 15px;
+    box-sizing: border-box;
+    .gift_confirmation_top {
+        padding: 30px 0px;
         box-sizing: border-box;
-        .gift_confirmation{
-            font-size: 20px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            margin-bottom: 6px;
-            color: #FFFFFF;
-        }
-        .gift_confirmation_tip{
+        .gift_confirmation_top_one {
             font-size: 12px;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #939599;
-            margin-bottom: 20px;
+            color: #ffffff;
+            line-height: 18px;
+            opacity: 0.5;
+            margin-bottom: 4px;
+            text-align: center;
         }
-        .gift_confirmation_information{
-            width: 100%;
-            height: 103px;
-            background: #29293F;
-            border-radius: 8px;
-            padding: 10px;
-            box-sizing: border-box;
-            .gift_confirmation_information_title{
-                font-size: 14px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #FFFFFF;
-                line-height: 24px;
-                margin-bottom: 4px;
+        .gift_confirmation_top_two {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 6px;
+            .gift_confirmation_top_two_text1 {
+                font-size: 24px;
+                font-family: PingFangSC-Semibold, PingFang SC;
+                font-weight: 600;
+                color: #ffffff;
+                line-height: 30px;
+                margin-right: 4px;
+                margin-top: 10px;
             }
-            .gift_confirmation_information_con{
-                margin-top: 8px;
-                display: flex;
-                // .gift_confirmation_information_con_img{
-                //     width: 40px;
-                //     height: 40px;
-                //     border-radius: 65px;
-                //     margin-right: 10px;
-                // }
-                .gift_confirmation_information_con_name{
-                    font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #FFFFFF;
-                    line-height: 24px;
-                }
-                .gift_confirmation_information_con_phone{
-                    font-size: 12px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #939599;
-                    line-height: 17px;
-                }
+            .gift_confirmation_top_two_text2 {
+                font-size: 38px;
+                font-family: PingFangSC-Semibold, PingFang SC;
+                font-weight: 600;
+                color: #ffffff;
+                line-height: 40px;
             }
         }
-        .transaction_password{
-            width: 100%;
-            height: 103px;
-            background: #29293F;
-            border-radius: 8px;
-            padding: 10px;
-            box-sizing: border-box;
-            margin-top: 10px;
-            .transaction_password_one{
-                display: flex;
-                justify-content: space-between;
-                margin-bottom: 4px;
-                .transaction_password_one_title{
-                    font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #FFFFFF;
-                }
-                .transaction_password_forget{
-                    width: 48px;
-                    font-size: 12px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #939599;
-                }
+        .gift_confirmation_top_three {
+            display: flex;
+            justify-content: center;
+            font-size: 13px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 18px;
+            opacity: 0.5;
+            .gift_confirmation_top_three_text1 {
+                margin-right: 10px;
             }
-            /deep/ .van-password-input{
-                margin: 0;
-                margin-top: 8px;
-                .van-password-input__item{
-                    width: 44px;
-                    height: 44px;
-                    background: rgba(10, 10, 27, 0.3);
-                    border-radius: 8px;
-                }
+            .gift_confirmation_top_three_text2 {
+                margin-right: 5px;
+            }
+            .gift_confirmation_top_three_img{
+                width: 16px;
+                height: 16px;
+                margin-top: 2px;
             }
         }
-        .additional_costs{
-            width: 100%;
-            margin-top: 10px;
-            background: #29293F;
-            border-radius: 8px;
-            padding: 12px 10px;
+    }
+    .gift_confirmation {
+        font-size: 20px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        margin-bottom: 6px;
+        color: #ffffff;
+    }
+    .gift_confirmation_tip {
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #939599;
+        margin-bottom: 20px;
+    }
+    .gift_confirmation_information {
+        width: 100%;
+        height: 117px;
+        background: #1e222c;
+        border-radius: 4px;
+        padding: 15px;
+        box-sizing: border-box;
+        .gift_confirmation_information_title {
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 18px;
+            padding-bottom: 12px;
             box-sizing: border-box;
+            opacity: 0.6;
+            border-bottom: 1px solid rgba(151, 151, 151, 0.1);
+            margin-bottom: 15px;
+        }
+        .gift_confirmation_information_con {
+            // margin-top: 8px;
             display: flex;
-            justify-content: space-between;
-            .additional_costs_left{
+            // .gift_confirmation_information_con_img{
+            //     width: 40px;
+            //     height: 40px;
+            //     border-radius: 65px;
+            //     margin-right: 10px;
+            // }
+            .gift_confirmation_information_con_name {
                 font-size: 14px;
                 font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #FFFFFF;
-            }
-            .additional_costs_right{
-                font-size: 14px;
-                font-family: PingFangSC-Medium, PingFang SC;
                 font-weight: 500;
-                color: #28B6FF;
+                color: #ffffff;
+                line-height: 20px;
+                margin-bottom: 2px;
+            }
+            .gift_confirmation_information_con_phone {
+                font-size: 12px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #ffffff;
+                opacity: 0.3;
+                line-height: 16px;
             }
         }
-        .payment_method{
-            width: 100%;
-            background: #29293F;
-            border-radius: 8px;
-            padding: 12px 10px;
-            box-sizing: border-box;
-            margin-top: 10px;
-            .payment_method_con{
-                display: flex;
-                justify-content: space-between;
+    }
+    .transaction_password {
+        width: 100%;
+        height: 103px;
+        background: #29293f;
+        border-radius: 8px;
+        padding: 10px;
+        box-sizing: border-box;
+        margin-top: 10px;
+        .transaction_password_one {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 4px;
+            .transaction_password_one_title {
                 font-size: 14px;
-                font-family: PingFangSC-Medium, PingFang SC;
-                font-weight: 500;
-                color: #FFFFFF;
-                .payment_method_con_left{
-                    display: flex;
-                    .payment_method_title{
-                        margin-top: 2px;
-                    }
-                }
-                .payment_method_img{
-                    width: 24px;
-                    height: 24px;
-                    margin-right: 6px;
-                }
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #ffffff;
+            }
+            .transaction_password_forget {
+                width: 48px;
+                font-size: 12px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #939599;
             }
-            .payment_method_con:first-child{
-            margin-bottom: 10px;
-            border-bottom: 1px solid #5F646F;
-            padding-bottom: 10px;
-            box-sizing: border-box;
-        }
         }
-        .fee_details_divider{
-            margin: 10px 0;
+        /deep/ .van-password-input {
+            margin: 0;
+            margin-top: 8px;
+            .van-password-input__item {
+                width: 44px;
+                height: 44px;
+                background: rgba(10, 10, 27, 0.3);
+                border-radius: 8px;
+            }
         }
     }
-    .gift_button{
-        position: fixed;
-        bottom: 0;
+    .additional_costs {
         width: 100%;
-        height: 56px;
-        background: #15152D;
-        padding: 8px 16px;
+        margin-top: 10px;
+        background: #29293f;
+        border-radius: 8px;
+        padding: 12px 10px;
         box-sizing: border-box;
         display: flex;
         justify-content: space-between;
-        .gift_button_cancel{
-            width: 164px;
-            height: 40px;
-            border-radius: 8px;
-            border: 1px solid #28B6FF;
-            box-sizing: border-box;
-            line-height: 40px;
-            text-align: center;
-            font-size: 16px;
+        .additional_costs_left {
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ffffff;
+        }
+        .additional_costs_right {
+            font-size: 14px;
             font-family: PingFangSC-Medium, PingFang SC;
             font-weight: 500;
-            color: #28B6FF;
+            color: #28b6ff;
         }
-        .gift_button_payment{
-            width: 164px;
-            height: 40px;
-            background: #28B6FF;
-            border-radius: 8px;
-            font-size: 16px;
+    }
+    .payment_method {
+        width: 100%;
+        background: #1e222c;
+        border-radius: 12px;
+        padding: 20px 0px;
+        box-sizing: border-box;
+        margin-top: 10px;
+        .add_bank_card {
+            padding: 0px 15px;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            .add_bank_card_con {
+                display: flex;
+                .add_bank_card_con_title {
+                    font-size: 16px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #ffffff;
+                    line-height: 24px;
+                }
+                .add_bank_card_img_one{
+                    width: 24px;
+                    height: 24px;
+                    margin-right: 10px;
+                }
+            }
+            .add_bank_card_img_two{
+                    width: 22px;
+                    height: 22px;
+                }
+        }
+        .payment_method_con {
+            font-size: 14px;
             font-family: PingFangSC-Medium, PingFang SC;
             font-weight: 500;
-            color: #FFFFFF;
-            text-align: center;
-            line-height: 40px;
+            color: #ffffff;
+            .choose-icon{
+                width: 22px;
+                height: 22px;
+            }
+            .van-divider {
+                padding-left: 49px;
+                margin-top: 20px;
+                margin-bottom: 19px;
+            }
+            .van-divider::before {
+                height: 1px;
+                background: #979797;
+                opacity: 0.1;
+            }
+            .payment_method_con_text {
+                display: flex;
+                justify-content: space-between;
+                padding: 0px 15px;
+                box-sizing: border-box;
+            }
+            .payment_method_con_left {
+                display: flex;
+                .payment_method_title {
+                    margin-top: 2px;
+                }
+            }
+            .payment_method_img {
+                width: 24px;
+                height: 24px;
+                margin-right: 6px;
+            }
         }
+        // .payment_method_con:first-child {
+        //     margin-bottom: 10px;
+        //     border-bottom: 1px solid #5f646f;
+        //     padding-bottom: 10px;
+        //     box-sizing: border-box;
+        // }
+    }
+    .fee_details_divider {
+        margin: 10px 0;
     }
-    /deep/ .van-password-input__security i{
-        background-color: #fff !important;
+}
+.gift_button {
+    position: fixed;
+    bottom: 64px;
+    width: 100%;
+    height: 50px;
+    // background: #191D27;
+    padding: 0px 15px;
+    box-sizing: border-box;
+    .gift_button_cancel {
+        width: 164px;
+        height: 40px;
+        border-radius: 8px;
+        border: 1px solid #28b6ff;
+        box-sizing: border-box;
+        line-height: 40px;
+        text-align: center;
+        font-size: 16px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #28b6ff;
+    }
+    .gift_button_payment {
+        width: 100%;
+        height: 50px;
+        background: #f9ddb3;
+        border-radius: 8px;
+        font-size: 18px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #503a1e;
+        text-align: center;
+        line-height: 50px;
     }
+}
+/deep/ .van-password-input__security i {
+    background-color: #fff !important;
+}
 </style>

src/views/Store.vue

@@ -70,7 +70,7 @@
             </van-sticky>
             <div class="data_display">
                 <!-- 藏品展示 -->
-                <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getAllCollections">
+                <van-list v-model:loading="loading" :finished="finished" @load="getAllCollections">
                     <div class="data_display_fanter">
                         <template v-for="(item, index) in collections" :key="index">
                             <asset-info :info="item"></asset-info>

src/views/Submit.vue

@@ -1,7 +1,48 @@
 <template>
     <div class="page">
         <!-- <TopNavigation/> -->
-        <div class="confirm_order">
+        <div class="gift_confirmation_top">
+            <div class="gift_confirmation_top_one">支付剩余时间 12:30</div>
+            <div class="gift_confirmation_top_two">
+                <div class="gift_confirmation_top_two_text1">¥</div>
+                <div class="gift_confirmation_top_two_text2">{{ info.price }}</div>
+            </div>
+            <div class="gift_confirmation_top_three">
+                <div class="gift_confirmation_top_three_text1">{{ info.name }}</div>
+                <div class="gift_confirmation_top_three_text2">订单详情</div>
+                <img :src="require('@assets/more@3x.png')" alt="" class="gift_confirmation_top_three_img" />
+            </div>
+        </div>
+        <div class="payment_method">
+            <div class="payment_method_all">
+                <div
+                    class="payment_method_con"
+                    @click="payType = item.type"
+                    v-for="(item, index) in payInfos"
+                    :key="index"
+                >
+                    <div class="payment_method_con_text">
+                        <div class="payment_method_con_left">
+                            <img :src="item.icon" alt="" class="payment_method_img" />
+                            <div class="payment_method_title">{{ item.name }}</div>
+                        </div>
+                        <!-- <van-radio-group v-model="payType">
+                        <van-radio :name="item.type" icon-size="24px" checked-color="#28B6FF"></van-radio>
+                    </van-radio-group> -->
+                        <img class="choose-icon" :src="payType === item.type ? icons[1] : icons[0]" alt="" />
+                    </div>
+                    <van-divider />
+                </div>
+                <div class="add_bank_card">
+                    <div class="add_bank_card_con">
+                        <img :src="require('@assets/tianjia@3x.png')" alt="" class="add_bank_card_img_one" />
+                        <div class="add_bank_card_con_title">添加银行卡付款</div>
+                    </div>
+                    <img :src="require('@assets/gengduo@3x.png')" alt="" class="add_bank_card_img_two" />
+                </div>
+            </div>
+        </div>
+        <!-- <div class="confirm_order">
             <div class="confirm_order_top">
                 <img :src="require('@assets/icon_querendingdan.png')" alt="" class="confirm_order_top_img" />
                 <div class="confirm_order_top_text">确认订单</div>
@@ -52,10 +93,15 @@
                         <div class="immediate_payment_con" @click="submit" :disabled="!!orderId">立即支付</div>
                     </div>
                     <a id="pay" :href="hrefUrl"></a>
-                    <!-- <wx-open-launch-weapp id="launch-btn" :username="launchName" :path="launchPath"> </wx-open-launch-weapp> -->
+                    <wx-open-launch-weapp id="launch-btn" :username="launchName" :path="launchPath"> </wx-open-launch-weapp>
                 </div>
             </div>
-        </div>
+        </div> -->
+    </div>
+    <div class="gift_button">
+        <!-- <div class="gift_button_cancel" @click="$router.go(-1)">取消</div> -->
+        <div class="gift_button_payment" @click="submit" :disabled="!!orderId">确认支付</div>
+        <a id="pay" :href="hrefUrl"></a>
     </div>
 </template>
 
@@ -84,12 +130,12 @@ export default {
             payChannel: null,
             payInfos: [
                 {
-                    icon: require('@assets/svgs/zhifubao.svg'),
+                    icon: require('@assets/zhifubao@3x.png'),
                     name: '支付宝',
                     type: 'ALIPAY'
                 },
                 {
-                    icon: require('@assets/svgs/wechat.svg'),
+                    icon: require('@assets/weixin@3x.png'),
                     name: '微信',
                     type: 'WEIXIN'
                 }
@@ -98,7 +144,7 @@ export default {
                 //   name: "DCEP",
                 // },
             ],
-            icons: [require('@assets/svgs/icon_gouxuan_huise.svg'), require('@assets/icon_gouxuan_pre.png')],
+            icons: [require('@assets/xuanzhong@3x.png'), require('@assets/xuanzhong@3x.png')],
             bottom: null,
             orderId: 0,
             gas: 1,
@@ -549,7 +595,179 @@ export default {
 
 <style lang="less" scoped>
 .page {
-    background-color: @bg3;
+    background: #191d27;
+}
+.gift_confirmation_top {
+    padding: 30px 0px;
+    box-sizing: border-box;
+    .gift_confirmation_top_one {
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 18px;
+        opacity: 0.5;
+        margin-bottom: 4px;
+        text-align: center;
+    }
+    .gift_confirmation_top_two {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 6px;
+        .gift_confirmation_top_two_text1 {
+            font-size: 24px;
+            font-family: PingFangSC-Semibold, PingFang SC;
+            font-weight: 600;
+            color: #ffffff;
+            line-height: 30px;
+            margin-right: 4px;
+            margin-top: 10px;
+        }
+        .gift_confirmation_top_two_text2 {
+            font-size: 38px;
+            font-family: PingFangSC-Semibold, PingFang SC;
+            font-weight: 600;
+            color: #ffffff;
+            line-height: 40px;
+        }
+    }
+    .gift_confirmation_top_three {
+        display: flex;
+        justify-content: center;
+        font-size: 13px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 18px;
+        opacity: 0.5;
+        .gift_confirmation_top_three_text1 {
+            margin-right: 10px;
+        }
+        .gift_confirmation_top_three_text2 {
+            margin-right: 5px;
+        }
+        .gift_confirmation_top_three_img {
+            width: 16px;
+            height: 16px;
+            margin-top: 2px;
+        }
+    }
+}
+.payment_method {
+    width: 100%;
+    padding: 0px 15px;
+    box-sizing: border-box;
+    // margin-top: 10px;
+    .payment_method_all{
+        padding: 20px 0px;
+        background: #1E222C;
+        border-radius: 12px;
+    }
+    .add_bank_card {
+        padding: 0px 15px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        .add_bank_card_con {
+            display: flex;
+            .add_bank_card_con_title {
+                font-size: 16px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+            }
+            .add_bank_card_img_one {
+                width: 24px;
+                height: 24px;
+                margin-right: 10px;
+            }
+        }
+        .add_bank_card_img_two {
+            width: 22px;
+            height: 22px;
+        }
+    }
+    .payment_method_con {
+        font-size: 14px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+        .choose-icon {
+            width: 22px;
+            height: 22px;
+        }
+        .van-divider {
+            padding-left: 49px;
+            margin-top: 20px;
+            margin-bottom: 19px;
+        }
+        .van-divider::before {
+            height: 1px;
+            background: #979797;
+            opacity: 0.1;
+        }
+        .payment_method_con_text {
+            display: flex;
+            justify-content: space-between;
+            padding: 0px 15px;
+            box-sizing: border-box;
+        }
+        .payment_method_con_left {
+            display: flex;
+            .payment_method_title {
+                margin-top: 2px;
+            }
+        }
+        .payment_method_img {
+            width: 24px;
+            height: 24px;
+            margin-right: 6px;
+        }
+    }
+    // .payment_method_con:first-child {
+    //     margin-bottom: 10px;
+    //     border-bottom: 1px solid #5f646f;
+    //     padding-bottom: 10px;
+    //     box-sizing: border-box;
+    // }
+}
+.fee_details_divider {
+    margin: 10px 0;
+}
+.gift_button {
+    position: fixed;
+    bottom: 64px;
+    width: 100%;
+    height: 50px;
+    // background: #191D27;
+    padding: 0px 15px;
+    box-sizing: border-box;
+    .gift_button_cancel {
+        width: 164px;
+        height: 40px;
+        border-radius: 8px;
+        border: 1px solid #28b6ff;
+        box-sizing: border-box;
+        line-height: 40px;
+        text-align: center;
+        font-size: 16px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #28b6ff;
+    }
+    .gift_button_payment {
+        width: 100%;
+        height: 50px;
+        background: #f9ddb3;
+        border-radius: 8px;
+        font-size: 18px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #503a1e;
+        text-align: center;
+        line-height: 50px;
+    }
 }
 .submit {
     padding: 20px 16px;
@@ -844,7 +1062,7 @@ export default {
             font-family: PingFangSC-Medium, PingFang SC;
             font-weight: 500;
             color: #ffffff;
-            border-bottom: 1px solid rgba(94, 99, 110 ,.2);
+            border-bottom: 1px solid rgba(94, 99, 110, 0.2);
             padding-bottom: 10px;
             margin-bottom: 10px;
             box-sizing: border-box;
@@ -884,7 +1102,7 @@ export default {
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
-    .immediate_payment_left{
+    .immediate_payment_left {
         display: flex;
     }
     .immediate_payment_total {
@@ -923,9 +1141,9 @@ export default {
         text-align: center;
     }
 }
-/deep/ .van-divider::before{
-        height: 1px;
-        background: #5F646F;
-        opacity: 0.2;
-    }
+/deep/ .van-divider::before {
+    height: 1px;
+    background: #5f646f;
+    opacity: 0.2;
+}
 </style>

src/views/asset/Consignment.vue

@@ -1,55 +1,107 @@
 <template>
-    <TopNavigation/>
     <div class="content">
-        <div class="consignment_title">寄售上架</div>
-        <div class="consignment_tip">交易成功后该藏品将会被转移</div>
-        <div class="consignment_set_price">1.设置价格(元）</div>
-        <van-cell-group inset>
-            <van-field v-model="price" type="number" placeholder="请输入价格"/>
-        </van-cell-group>
-        <div class="transaction_password">
-            <div class="transaction_password_title">2.请输入交易密码</div>
-            <div class="transaction_password_forget">
-                忘记密码
-                <van-divider />
+        <div class="consignment_top">
+            <van-image width="120px" height="120px" radius="18" :src="Image" fit="cover" />
+            <div class="consignment_top_title">
+                <div class="consignment_top_title_one">{{ info.name }}</div>
+                <div class="consignment_top_title_two">
+                    <div class="consignment_top_title_two_text1">清乾隆</div>
+                    <div class="consignment_top_title_two_text2">{{ info.category }}</div>
+                </div>
+                <div class="consignment_top_title_three">
+                    <span class="consignment_top_title_three_text1">¥</span>{{ info.price || '100' }}
+                </div>
             </div>
+            <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture">
         </div>
-        <div>
-        <!-- v-if="sets" -->
-        <!-- 密码输入框 -->
-        <van-password-input
-        :value="password"
-        :focused="showKeyboard"
-        :gutter="16"
-        @focus="showKeyboard = true"
-        />
-        <!-- 数字键盘 -->
-        <van-number-keyboard
-        v-model="password"
-        :show="showKeyboard"
-        @blur="keyBlur"
-        :gutter="10"
-        maxlength="6"
-        theme="custom"
-        close-button-text="完成"
-        random-key-order
-        />
-        </div>
+        <!-- <div class="consignment_title">挂售上架</div>
+        <div class="consignment_tip">交易成功后该藏品将会被转移</div>
+        <div class="hanging_sale_list">
+            <div class="consignment_set_price">设置价格（元）</div>
+            <van-cell-group inset>
+                <van-field v-model="price" type="number" placeholder="请输入金额" />
+            </van-cell-group>
+            <div class="transaction_password">
+                <div class="transaction_password_title">输入交易密码</div>
+                <div class="transaction_password_forget" @click="$router.push('/tradingPassword')">忘记密码</div>
+            </div> -->
+            <!-- 密码输入框 -->
+            <!-- <van-password-inpu :value="password" :focused="showKeyboard" :gutter="16" @focus="showKeyboard = true" /> -->
+            <!-- 数字键盘 -->
+            <!-- <van-number-keyboard
+                v-model="password"
+                :show="showKeyboard"
+                @blur="keyBlur"
+                @close="submit"
+                :gutter="10"
+                maxlength="6"
+                theme="custom"
+                close-button-text="完成"
+            /> -->
+            <van-popup
+                class="popup-content"
+                style="background: #191d27"
+                v-model:show="showKeyboard"
+                teleport="body"
+                position="bottom"
+            >
+                <div class="popup">
+                    <!-- <div class="cancel" @click="showKeyboard = false">取消</div> -->
+                    <img :src="require('@assets/shanchu@3x.png')" alt="" @click="showKeyboard = false" class="cancel" />
+                    <div class="title">输入交易密码</div>
+                    <van-password-input :value="password" :gutter="8" />
+                    <div class="popup_password_forget" @click="$router.push('/tradingPassword')">忘记密码？</div>
+                    <!-- <van-password-input :value="form.code" :length="4" /> -->
+                    <!-- 数字键盘 -->
+                    <van-number-keyboard
+                        v-model="password"
+                        theme="custom"
+                        :show="showKeyboard"
+                        close-button-text="完成"
+                        @close="submit"
+                    />
+                </div>
+            </van-popup>
+        <!-- </div> -->
         <!-- <div v-else class="text3" @click="$router.push('/tradingPassword')">您当前没有交易密码，点击去设置</div> -->
     </div>
-    <div class="consignment_confirmation" ref="bottom">
+    <div class="consignment_content">
+        <div class="consignment_content_one">挂售价格</div>
+        <div class="consignment_content_two">
+            <div class="consignment_content_two_text">¥</div>
+            <van-field v-model="price" type="number"/>
+        </div>
+    </div>
+    <div class="consignment_cost">
+        <div class="consignment_cost_con">
+            <div class="consignment_cost_con_one">
+                <div class="consignment_cost_con_one_text1">版权使用费(5%)</div>
+                <div class="consignment_cost_con_one_text2">{{ price2 }} 元</div>
+            </div>
+            <div class="consignment_cost_con_one">
+                <div class="consignment_cost_con_one_text1">平台手续费(10%)</div>
+                <div class="consignment_cost_con_one_text2">{{ price3 }} 元</div>
+            </div>
+            <div class="consignment_cost_con_one">
+                <div class="consignment_cost_con_one_text1">售卖到手(85%)</div>
+                <div class="consignment_cost_con_one_text2">{{ price5 }} 元</div>
+            </div>
+        </div>
+    </div>
+    <div class="consignment_button">
+        <div class="consignment_button_con" @click="showKeyboard = true">确定</div>
+    </div>
+    <!-- <div class="consignment_confirmation" ref="bottom">
         <div class="consignment_confirmation_left" @click="$router.go(-1)">取消</div>
         <div class="consignment_confirmation_right" @click="submit">确认</div>
-    </div>
+    </div> -->
     <!-- <agreement ref="agree" :info="info" @agree="agree"></agreement> -->
 </template>
 
 <script>
 import { mapState } from 'vuex';
 // import Agreement from '../asset/Agreement.vue';
-import TopNavigation from "../../components/TopNavigation.vue"
 export default {
-    components: { TopNavigation },
     name: 'Top',
     inject: ['changeScroll'],
     data() {
@@ -76,7 +128,8 @@ export default {
                 }
             ],
             info: {},
-            agreement: false
+            agreement: false,
+            Image: ''
         };
     },
     computed: {
@@ -86,11 +139,11 @@ export default {
             return price.toFixed(2);
         },
         price2() {
-            let price = Math.floor(this.price * (this.info.royalties || 0)) / 100;
+            let price = Math.floor(this.price * 5) / 100;
             return price.toFixed(2);
         },
         price3() {
-            let price = Math.floor(this.price * 4) / 100;
+            let price = Math.floor(this.price * 10) / 100;
             return price.toFixed(2);
         },
         price4() {
@@ -98,7 +151,7 @@ export default {
             return price.toFixed(2);
         },
         price5() {
-            let price = Math.floor(this.price * (95 - (this.info.royalties || 0))) / 100;
+            let price = Math.floor(this.price * 85) / 100;
             return price.toFixed(2);
         }
     },
@@ -106,6 +159,7 @@ export default {
         this.passFn();
         this.$http.get('/asset/get/' + this.$route.query.id).then(res => {
             this.info = res;
+            this.Image = this.info.pic[0].url
         });
     },
     methods: {
@@ -128,6 +182,7 @@ export default {
             this.submit();
         },
         submit() {
+            // this.$router.push('/ConsignmentSuccess?id=' + this.info.id);
             if (Number(this.price) > 20000 && !this.agreement) {
                 this.$refs.agree.init();
             } else if (Number(this.price)) {
@@ -168,7 +223,8 @@ export default {
                     .then(res => {
                         this.$toast.success('寄售成功');
                         setTimeout(() => {
-                            this.$router.go(-1);
+                            this.$router.push('/ConsignmentSuccess?id=' + this.info.id);
+                            // this.$router.go(-1);
                         }, 1000);
                     })
                     .catch(e => {
@@ -194,105 +250,361 @@ export default {
 };
 </script>
 
-<style lang="less" scoped> 
-    .content{
-        margin-top: 44px;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        background: #0A0A1B;
-        padding: 16px;
-        box-sizing: border-box;
-        .consignment_title{
-            font-size: 20px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #FFFFFF;
-            margin-bottom: 6px;
+<style lang="less" scoped>
+.content {
+    width: 100%;
+    // height: 100%;
+    // position: absolute;
+    background: #191d27;
+    padding: 15px;
+    padding-bottom: 0px;
+    box-sizing: border-box;
+    .consignment_top {
+        background: #1e222c;
+        border-radius: 0px 18px 18px 0px;
+        display: flex;
+        position: relative;
+        .bottom_texture{
+            width: 115px;
+            height: 100px;
+            position: absolute;
+            right: 0;
+            bottom: 0;
         }
-        .consignment_tip{
-            font-size: 12px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #939599;
-            margin-bottom: 20px;
+        .consignment_top_title {
+            width: calc(100% - 150px);
+            margin-left: 12px;
+            padding: 16px 0px;
+            box-sizing: border-box;
+            .consignment_top_title_one {
+                width: 100%;
+                font-size: 16px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #ffffff;
+                line-height: 22px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                margin-bottom: 12px;
+            }
+            .consignment_top_title_two {
+                display: flex;
+                margin-bottom: 12px;
+                font-size: 12px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                .consignment_top_title_two_text1 {
+                    padding: 0px 6px;
+                    box-sizing: border-box;
+                    height: 18px;
+                    background: #f9ddb3;
+                    color: #282d3a;
+                    border-radius: 3px;
+                    line-height: 18px;
+                    margin-right: 6px;
+                }
+                .consignment_top_title_two_text2 {
+                    padding: 0px 6px;
+                    box-sizing: border-box;
+                    height: 18px;
+                    background: #323743;
+                    border-radius: 3px;
+                    color: #f9ddb3;
+                    line-height: 18px;
+                }
+            }
+            .consignment_top_title_three {
+                font-size: 18px;
+                font-family: PingFangSC-Semibold, PingFang SC;
+                font-weight: 600;
+                color: #ffffff;
+                line-height: 24px;
+                .consignment_top_title_three_text1{
+                    font-size: 16px;
+                    line-height: 22px;
+                }
+            }
         }
-        .consignment_set_price{
-            font-size: 14px;
+    }
+    .consignment_title {
+        font-size: 20px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 28px;
+        margin-bottom: 8px;
+    }
+    .consignment_tip {
+        font-size: 13px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 18px;
+        opacity: 0.5;
+        margin-bottom: 20px;
+    }
+    .hanging_sale_list {
+        width: 100%;
+        background: #1e222c;
+        border-radius: 12px;
+        padding: 20px 15px;
+        box-sizing: border-box;
+        .consignment_set_price {
+            font-size: 13px;
             font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
-            color: #FFFFFF;
-            margin-bottom: 10px;
+            color: #ffffff;
+            line-height: 18px;
+            margin-bottom: 8px;
         }
-        /deep/ .van-cell-group{
+        /deep/ .van-cell-group {
             margin: 0;
         }
-        /deep/ .van-cell{
-            background: #29293F;
-            border-radius: 8px;
+        /deep/ .van-cell {
+            border-radius: 4px;
+            border: 1px solid rgba(151, 151, 151, 0.1);
             margin-bottom: 20px;
-            .van-field__control{
+            .van-field__control {
                 color: #ffffff;
             }
         }
-        .transaction_password{
+        .transaction_password {
             display: flex;
             justify-content: space-between;
-            margin-bottom: 10px;
-            .transaction_password_title{
-                font-size: 14px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #FFFFFF;
+            margin-bottom: 8px;
+            font-size: 13px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            .transaction_password_title {
+                color: #ffffff;
+                line-height: 18px;
             }
-            .transaction_password_forget{
-                width: 48px;
-                font-size: 12px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #939599;
+            .transaction_password_forget {
+                color: #077dff;
+                line-height: 18px;
             }
         }
-        .van-password-input{
+        .van-password-input {
             margin: 0;
-            /deep/ .van-password-input__security li{
-                width: 44px;
-                height: 44px;
-                background: #29293F;
-                border-radius: 8px;
+            /deep/ .van-password-input__security li {
+                width: 45px;
+                height: 50px;
+                border-radius: 4px;
+                border: 1px solid rgba(151, 151, 151, 0.1);
                 color: #ffffff;
+                background: #1e222c;
             }
         }
     }
-    .consignment_confirmation{
-        width: 100%;
-        height: 56px;
-        background: #15152D;
-        position: fixed;
-        bottom: 0;
-        padding: 8px 16px;
-        box-sizing: border-box;
+}
+.consignment_content{
+    padding: 20px 30px;
+    box-sizing: border-box;
+    background: linear-gradient(360deg, #1E222C 0%, rgba(25, 29, 39, 0) 100%);
+    border-radius: 0px 0px 20px 20px;
+    .consignment_content_one{
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 20px;
+        margin-bottom: 24px;
+        opacity: 0.5;
+    }
+    .consignment_content_two{
         display: flex;
-        justify-content: space-between;
-        font-size: 16px;
+        padding-bottom: 16px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        font-size: 36px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #FFFFFF;
+        line-height: 40px;
+        .consignment_content_two_text{
+            margin-right: 10px;
+        }
+        .van-field{
+            padding-left: 10px;
+            font-size: 30px;
+            padding: 0;
+        }
+    }
+}
+.consignment_confirmation {
+    width: 100%;
+    height: 56px;
+    background: #15152d;
+    position: fixed;
+    bottom: 0;
+    padding: 8px 16px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    text-align: center;
+    .consignment_confirmation_left {
+        width: 164px;
+        height: 40px;
+        border-radius: 8px;
+        border: 1px solid #28b6ff;
+        color: #28b6ff;
+        line-height: 40px;
+    }
+    .consignment_confirmation_right {
+        width: 164px;
+        height: 40px;
+        background: #28b6ff;
+        border-radius: 8px;
+        color: #ffffff;
+        line-height: 40px;
+    }
+}
+.consignment_cost{
+    padding: 0px 15px;
+    box-sizing: border-box;
+    margin-top: 16px;
+    .consignment_cost_con{
+        padding: 18px 15px;
+        box-sizing: border-box;
+        background: #1E222C;
+        border-radius: 12px;
+        .consignment_cost_con_one{
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 14px;
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            line-height: 20px;
+            .consignment_cost_con_one_text1{
+                color: #FFFFFF;
+                opacity: 0.3;
+            }
+            .consignment_cost_con_one_text2{
+                color: #FFFFFF;
+            }
+        }
+        .consignment_cost_con_one:last-child{
+            margin-bottom: 0px;
+        }
+    }
+}
+.consignment_button{
+    width: 100%;
+    position: fixed;
+    bottom: 64px;
+    padding: 0px 82px;
+    box-sizing: border-box;
+    .consignment_button_con{
+        width: 100%;
+        height: 50px;
+        background: #F9DDB3;
+        border-radius: 8px;
+        text-align: center;
+        line-height: 50px;
+        font-size: 18px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #503A1E;
+    }
+}
+@bottom: 6px;
+@gray3: #f2f4f5;
+.popup {
+    color: #000;
+    position: relative;
+    padding-bottom: calc(@bottom+ constant(safe-area-inset-bottom));
+    padding-bottom: calc(@bottom + env(safe-area-inset-bottom));
+    padding-bottom: 280px;
+    .title {
+        text-align: center;
+        padding: 13px 0px;
+        font-size: 17px;
         font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 500;
-         text-align: center;
-        .consignment_confirmation_left{
-            width: 164px;
-            height: 40px;
-            border-radius: 8px;
-            border: 1px solid #28B6FF;
-            color: #28B6FF;
-            line-height: 40px;
+        color: #ffffff;
+        line-height: 24px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .popup_password_forget {
+        font-size: 13px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #077dff;
+        line-height: 18px;
+        position: absolute;
+        top: 132px;
+        right: 28px;
+    }
+    .van-password-input {
+        margin: 0 !important;
+        padding: 19px 32px 12px;
+        /deep/ .van-password-input__security li {
+            width: 45px;
+            height: 50px;
+            border-radius: 4px;
+            background: #1e222c;
+            color: #ffffff;
         }
-        .consignment_confirmation_right{
-            width: 164px;
-            height: 40px;
-            background: #28B6FF;
-            border-radius: 8px;
-            color: #FFFFFF;
-            line-height: 40px;
+    }
+    .cancel {
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        // font-size: 16px;
+        // font-family: PingFangSC-Regular, PingFang SC;
+        // font-weight: 400;
+        // color: #939599;
+        // line-height: 22px;
+        // padding: 21px 20px;
+        left: 10px;
+        top: 13px;
+    }
+
+    .phone {
+        padding: 12px 0 20px;
+        text-align: center;
+        font-size: 12px;
+        color: #aaabad;
+        line-height: 24px;
+    }
+
+    /deep/.van-password-input {
+        margin: 0 80px;
+    }
+
+    /deep/.van-key {
+        &:hover {
+            background-color: @gray3;
+        }
+        &:focus {
+            background-color: @gray3;
+        }
+        &:active {
+            background-color: @gray3;
         }
+        &:link {
+            background-color: @gray3;
+        }
+        &:visited {
+            background-color: @gray3;
+        }
+
+        &.van-key--active {
+            background-color: @gray3;
+        }
+    }
+
+    /deep/[class*='van-hairline']::after {
+        border-color: @gray3;
+    }
+
+    /deep/.van-key--blue {
+        background: linear-gradient(135deg, @prim 0%, @warn 100%);
+        color: @btnText;
     }
+}
 </style>

src/views/asset/ConsignmentSuccess.vue

@@ -0,0 +1,171 @@
+<template>
+    <div class="home">
+        <div class="home_top">
+            <img :src="require('@assets/jiaoyichenggong@3x.png')" alt="" class="home_top_img" />
+            <div class="home_top_title">
+                <div class="home_top_title_one">上架成功</div>
+                <div class="home_top_title_two">祝您早日成交</div>
+            </div>
+        </div>
+        <div class="home_content">
+            <div class="home_content_con">
+                <van-image width="120px" height="120px" radius="18" :src="Image" fit="cover" />
+                <div class="consignment_top_title">
+                    <div class="consignment_top_title_one">{{ info.name }}</div>
+                    <div class="consignment_top_title_two">
+                        <div class="consignment_top_title_two_text1">清乾隆</div>
+                        <div class="consignment_top_title_two_text2">{{ info.category }}</div>
+                    </div>
+                    <div class="consignment_top_title_three">
+                        <span class="consignment_top_title_three_text1">¥</span>{{ info.price || '100' }}
+                    </div>
+                </div>
+                <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture" />
+            </div>
+        </div>
+        <div class="home_button">
+            <div class="home_button_con" @click="$router.go(-2)">完成</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            info: {},
+            Image: ''
+        };
+    },
+    mounted() {
+        this.$http.get('/asset/get/' + this.$route.query.id).then(res => {
+            this.info = res;
+            this.Image = this.info.pic[0].url;
+        });
+    }
+};
+</script>
+<style lang="less" scoped>
+.home {
+    background: #191d27;
+    .home_top {
+        padding: 40px 0px 28px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: center;
+        .home_top_img {
+            width: 74px;
+            height: 60px;
+            margin-right: 5px;
+        }
+        .home_top_title_one {
+            font-size: 19px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+            line-height: 26px;
+            margin-bottom: 1px;
+            margin-top: 8px;
+        }
+        .home_top_title_two {
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 20px;
+            opacity: 0.5;
+        }
+    }
+    .home_content {
+        padding: 0px 15px;
+        box-sizing: border-box;
+        .home_content_con {
+            display: flex;
+            background: #1e222c;
+            border-radius: 0px 18px 18px 0px;
+            position: relative;
+            .bottom_texture {
+                width: 115px;
+                height: 100px;
+                position: absolute;
+                right: 0;
+                bottom: 0;
+            }
+            .consignment_top_title {
+                width: calc(100% - 150px);
+                margin-left: 12px;
+                padding: 16px 0px;
+                box-sizing: border-box;
+                .consignment_top_title_one {
+                    width: 100%;
+                    font-size: 16px;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #ffffff;
+                    line-height: 22px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    margin-bottom: 12px;
+                }
+                .consignment_top_title_two {
+                    display: flex;
+                    margin-bottom: 12px;
+                    font-size: 12px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    .consignment_top_title_two_text1 {
+                        padding: 0px 6px;
+                        box-sizing: border-box;
+                        height: 18px;
+                        background: #f9ddb3;
+                        color: #282d3a;
+                        border-radius: 3px;
+                        line-height: 18px;
+                        margin-right: 6px;
+                    }
+                    .consignment_top_title_two_text2 {
+                        padding: 0px 6px;
+                        box-sizing: border-box;
+                        height: 18px;
+                        background: #323743;
+                        border-radius: 3px;
+                        color: #f9ddb3;
+                        line-height: 18px;
+                    }
+                }
+                .consignment_top_title_three {
+                    font-size: 18px;
+                    font-family: PingFangSC-Semibold, PingFang SC;
+                    font-weight: 600;
+                    color: #ffffff;
+                    line-height: 24px;
+                    .consignment_top_title_three_text1 {
+                        font-size: 16px;
+                        line-height: 22px;
+                    }
+                }
+            }
+        }
+    }
+    .home_button{
+        width: 100%;
+        padding: 0px 82px;
+        box-sizing: border-box;
+        position: fixed;
+        bottom: 120px;
+        .home_button_con{
+            width: 100%;
+            height: 50px;
+            background: rgba(249, 221, 179, 0.1);
+            border-radius: 8px;
+            font-size: 18px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #FFFFFF;
+            text-align: center;
+            line-height: 50px;
+        }
+    }
+}
+</style>

src/views/asset/Detail.vue

@@ -75,7 +75,7 @@
                     </div>
                     <div class="collection_holder_one">
                         <div class="collection_holder_one_title">生成时间</div>
-                        <div class="collection_holder_one_time">2022-03-22 08:30:40</div>
+                        <div class="collection_holder_one_time">{{ info.createdAt }}</div>
                     </div>
                 </div>
             </div>
@@ -140,17 +140,18 @@
                     <div v-if="list.length > 0">
                         <div class="hold_privileges_list" v-for="item in list" :key="item.id">
                             <div class="hold_privileges_list_con">
-                                <div class="hold_privileges_list_con_one text1 van-ellipsis">
-                                    {{ item.fromUser || '保密' }}
+                                <div class="hold_privileges_list_con_left">
+                                    <div class="hold_privileges_list_con_text1">{{ item.toUser || '保密' }}</div>
+                                    <div class="hold_privileges_list_con_text2">{{ item.createdAt.substr(0, 16) }}</div>
                                 </div>
-                                <div class="hold_privileges_list_con_one text2" v-if="item.price">
-                                    {{ item.operation }}¥{{ item.price }}
+                                <div class="hold_privileges_list_con_right">
+                                    <div v-if="item.price">
+                                        <div class="hold_privileges_list_con_text1">¥{{ item.price }}</div>
+                                        <div class="hold_privileges_list_con_text2">{{ item.operation }}</div>
+                                    </div>
+                                    <div class="hold_privileges_list_con_text3" v-else>{{ item.operation }}</div>
+                                    <!-- <div class="hold_privileges_list_con_text1">仅展示</div> -->
                                 </div>
-                                <div class="hold_privileges_list_con_one text2" v-else>{{ item.operation }}</div>
-                                <div class="hold_privileges_list_con_one text3 van-ellipsis">
-                                    {{ item.toUser || '保密' }}
-                                </div>
-                                <div class="hold_privileges_list_con_one text4">{{ item.createdAt.substr(0, 16) }}</div>
                             </div>
                         </div>
                     </div>
@@ -224,25 +225,70 @@
         </div> -->
         <!-- </div> -->
         <!-- 购买之后交易按钮 -->
-        <div class="purchase_transaction_button">
+        <div class="purchase_transaction_button" v-if="startTime">
             <div class="purchase_transaction_button_con">
                 <div class="purchase_transaction_button_left">
-                    <div class="purchase_transaction_button_give" v-if="startTime">
+                    <div class="purchase_transaction_button_give">
                         <div class="purchase_transaction_button_give_one">赠送</div>
                         <div class="purchase_transaction_button_give_two">{{ startTime }}</div>
                     </div>
-                    <div class="purchase_transaction_button_give_con" @click="Add" v-else>赠送</div>
                 </div>
                 <div class="purchase_transaction_button_right">
                     <div class="public_display" @click="Exhibition">
                         {{ info.publicShow ? '取消展示' : '公开展示' }}
                     </div>
-                    <div class="purchase_transaction_button_deposit" v-if="startTime">
+                    <div class="purchase_transaction_button_deposit">
                         <div class="purchase_transaction_button_deposit_one">寄售倒计时</div>
                         <div class="purchase_transaction_button_deposit_two">{{ startTime }}</div>
                     </div>
-                    <div class="purchase_transaction_button_deposit_consignment" v-else @click="Consignment">
+                    <!-- <div class="purchase_transaction_button_deposit_consignment" v-else @click="Consignment">
                         {{ info.consignment ? '取消寄售' : '寄售上架' }}
+                    </div> -->
+                </div>
+            </div>
+        </div>
+        <div class="purchase_transaction_button_two" v-else>
+            <div class="purchase_transaction_button_two_con">
+                <div class="purchase_transaction_button_two_con_give">
+                    <img
+                        :src="require('@assets/zengsong@3x.png')"
+                        alt=""
+                        class="purchase_transaction_button_two_con_img"
+                    />
+                    <div class="purchase_transaction_button_two_con_text" @click="Add">赠送</div>
+                </div>
+                <div class="purchase_transaction_button_two_con_exhibition" @click="Exhibition">
+                    <img
+                        :src="info.publicShow ? publicDisplay : privateDisplay"
+                        alt=""
+                        class="purchase_transaction_button_two_con_img"
+                    />
+                    <div class="purchase_transaction_button_two_con_text">
+                        {{ info.publicShow ? '公开展示' : '私密展示' }}
+                    </div>
+                </div>
+                <div class="purchase_transaction_button_two_con_certificate">
+                    <img
+                        :src="require('@assets/zhengshu@3x.png')"
+                        alt=""
+                        class="purchase_transaction_button_two_con_img"
+                    />
+                    <div class="purchase_transaction_button_two_con_text">证书</div>
+                </div>
+                <van-icon name="ellipsis" size="20" @click="moreDisplay"/>
+                <div class="purchase_transaction_button_two_con_more_display" v-if="moreDisplayOne === true">
+                    <img
+                        :src="require('@assets/xingzhuanglianhe@3x.png')"
+                        alt=""
+                        class="purchase_transaction_button_two_con_more_display_img"
+                    />
+                    <div class="purchase_transaction_button_two_con_more_display_con" @click="Consignment">
+                        <img :src="require('@assets/guashou@3x.png')" alt="" class="purchase_transaction_button_two_con_more_display_con_img"/>
+                        <div class="purchase_transaction_button_two_con_more_display_con_title">挂售</div>
+                    </div>
+                    <div class="purchase_transaction_button_two_con_more_display_con">
+                        <img :src="require('@assets/fengxiang@3x.png')" alt="" class="purchase_transaction_button_two_con_more_display_con_img"/>
+                        <div class="purchase_transaction_button_two_con_more_display_con_title">分享</div>
                     </div>
                 </div>
             </div>
@@ -590,12 +636,15 @@ export default {
             init: [],
             init2: null,
             holdDays: 0,
+            moreDisplayOne: false,
             typeOptions: [
                 { label: '文本', value: 'text' },
                 { label: '二维码', value: 'qrcode' },
                 { label: '验证码', value: 'code' },
                 { label: '铸造', value: 'exchange' }
-            ]
+            ],
+            publicDisplay: require('@assets/publicDisplay@3x.png'),
+            privateDisplay: require('@assets/privateDisplay@3x.png')
         };
     },
     computed: {
@@ -620,6 +669,9 @@ export default {
         }, 1000);
     },
     methods: {
+        moreDisplay() {
+            this.moreDisplayOne = !this.moreDisplayOne
+        },
         allFn() {
             this.show = false;
             this.getProduct();
@@ -765,8 +817,8 @@ export default {
             // });
             if (!this.info.publicShow) {
                 Dialog.confirm({
-                    title: '公开展示',
-                    message: '藏品将公开展示，无报价'
+                    title: '公开展示确认',
+                    message: '藏品仅公开展示，无报价'
                 }).then(() => {
                     this.$toast.loading({
                         message: '加载中...',
@@ -1181,6 +1233,43 @@ export default {
                 .digital_equity_card_con:last-child {
                     margin-bottom: 0px;
                 }
+                .hold_privileges_list_con {
+                    display: flex;
+                    justify-content: space-between;
+                    margin-bottom: 14px;
+                    padding-bottom: 15px;
+                    box-sizing: border-box;
+                    border-bottom: 1px solid rgba(151, 151, 151, 0.1);
+                    .hold_privileges_list_con_text1 {
+                        font-size: 14px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: #ffffff;
+                        line-height: 22px;
+                        margin-bottom: 4px;
+                    }
+                    .hold_privileges_list_con_text2 {
+                        font-size: 12px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: #ffffff;
+                        line-height: 18px;
+                        opacity: 0.3;
+                    }
+                    .hold_privileges_list_con_text3 {
+                        font-size: 14px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: #ffffff;
+                        line-height: 22px;
+                        margin-top: 11px;
+                    }
+                }
+                .hold_privileges_list_con:last-child {
+                    margin-bottom: 0px;
+                    padding-bottom: 0px;
+                    border-bottom: none;
+                }
             }
         }
     }
@@ -1599,8 +1688,9 @@ export default {
     }
     .purchase_transaction_button {
         width: 100%;
-        height: 56px;
-        background: #15152d;
+        // height: 66px;
+        background: #161A24;
+        box-shadow: inset 0px 1px 0px 0px #292D36;
         position: fixed;
         bottom: 0;
         // justify-content: space-between;
@@ -1609,33 +1699,36 @@ export default {
         font-weight: 500;
         .purchase_transaction_button_con {
             display: flex;
-            padding: 8px 16px;
+            padding: 9px 15px;
             box-sizing: border-box;
             // justify-content: center;
         }
         .purchase_transaction_button_give {
-            width: 76px;
-            height: 40px;
+            width: 80px;
+            height: 44px;
             border-radius: 8px;
-            background: #29293f;
+            background: #313641;
             margin-right: 16px;
             // border: 1px solid #28b6ff;
             // box-sizing: border-box;
             // color: #28b6ff;
-            color: #939599;
             // line-height: 38px;
             text-align: center;
             .purchase_transaction_button_give_one {
-                font-size: 14px;
+                font-size: 16px;
                 font-family: PingFangSC-Medium, PingFang SC;
                 font-weight: 500;
-                line-height: 24px;
+                color: #FFFFFF;
+                opacity: 0.6;
+                line-height: 20px;
             }
             .purchase_transaction_button_give_two {
-                font-size: 10px;
+                font-size: 12px;
                 font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
-                line-height: 10px;
+                color: #FFFFFF;
+                opacity: 0.3;
+                line-height: 16px;
             }
         }
         .purchase_transaction_button_give_con {
@@ -1657,34 +1750,37 @@ export default {
         }
         .public_display {
             width: 50%;
-            height: 40px;
-            border-radius: 8px 0px 0px 8px;
-            border: 1px solid #28b6ff;
-            box-sizing: border-box;
-            color: #28b6ff;
-            line-height: 38px;
+            height: 44px;
+            border-radius: 8px;
+            background: #F9DDB3;
+            color: #725837;
+            line-height: 44px;
             text-align: center;
+            margin-right: 16px;
             // border-width: 0px;
         }
         .purchase_transaction_button_deposit {
             width: 50%;
-            height: 40px;
-            background: #29293f;
-            border-radius: 0px 8px 8px 0px;
-            color: #939599;
+            height: 44px;
+            background: #313641;
+            border-radius: 8px;
             // line-height: 40px;
             text-align: center;
             .purchase_transaction_button_deposit_one {
-                font-size: 14px;
+                font-size: 16px;
                 font-family: PingFangSC-Medium, PingFang SC;
                 font-weight: 500;
-                line-height: 24px;
+                color: #FFFFFF;
+                opacity: 0.6;
+                line-height: 20px;
             }
             .purchase_transaction_button_deposit_two {
-                font-size: 10px;
+                font-size: 12px;
                 font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
-                line-height: 10px;
+                color: #FFFFFF;
+                opacity: 0.3;
+                line-height: 16px;
             }
         }
         .purchase_transaction_button_deposit_consignment {
@@ -1721,5 +1817,84 @@ export default {
             text-align: center;
         }
     }
+    .purchase_transaction_button_two {
+        width: 100%;
+        height: 66px;
+        background: #161a24;
+        box-shadow: inset 0px 1px 0px 0px #292d36;
+        position: fixed;
+        bottom: 0;
+        .purchase_transaction_button_two_con {
+            padding: 17px 0px;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: center;
+            font-size: 12px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+            line-height: 17px;
+            // position: relative;
+            .purchase_transaction_button_two_con_more_display {
+                position: absolute;
+                bottom: 10px;
+                right: 15px;
+                .purchase_transaction_button_two_con_more_display_img{
+                    width: 137px;
+                    height: 102px;
+                }
+                .purchase_transaction_button_two_con_more_display_con{
+                    padding-left: 13px;
+                    box-sizing: border-box;
+                    display: flex;
+                    transform: translateY(-92px);
+                    .purchase_transaction_button_two_con_more_display_con_img{
+                        width: 28px;
+                        height: 28px;
+                        margin-right: 4px;
+                    }
+                    .purchase_transaction_button_two_con_more_display_con_title{
+                        font-size: 15px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: #FFFFFF;
+                        line-height: 22px;
+                        margin-top: 3px;
+                    }
+                }
+                .purchase_transaction_button_two_con_more_display_con:nth-of-type(2){
+                    transform: translateY(-80px);
+                }
+            }
+            .purchase_transaction_button_two_con_text {
+                margin-top: 7px;
+            }
+            .van-badge__wrapper {
+                width: 32px;
+                height: 32px;
+                padding-top: 7px;
+                box-sizing: border-box;
+                position: relative;
+                z-index: 1;
+            }
+            .purchase_transaction_button_two_con_give {
+                display: flex;
+                margin-right: 36px;
+            }
+            .purchase_transaction_button_two_con_exhibition {
+                display: flex;
+                margin-right: 36px;
+            }
+            .purchase_transaction_button_two_con_certificate {
+                display: flex;
+                margin-right: 38px;
+            }
+            .purchase_transaction_button_two_con_img {
+                width: 32px;
+                height: 32px;
+                margin-right: 1px;
+            }
+        }
+    }
 }
 </style>

src/views/asset/GiveSearch.vue

@@ -3,8 +3,9 @@
     <div class="content">
         <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? 46 : 0">
             <div class="content_title">赠送</div>
-            <div class="content_tip">通过手机号码检索用户信息，确认赠送后该加密作品将会被转移</div>
-            <van-search
+            <div class="content_tip">通过手机号码检索用户信息，确认赠送后该加密作品将会转移</div>
+            <van-search v-model="phone" placeholder="请输入用户手机号" @search="getSearch" />
+            <!-- <van-search
                 ref="top"
                 v-model="phone"
                 placeholder="请输入用户手机号"
@@ -12,16 +13,31 @@
                 autofocus
                 :left-icon="require('@assets/svgs/icon-sosuo.svg')"
                 @search="getSearch"
-            >
-                <template #action>
+            > -->
+            <!-- <template #action>
                     <div @click="getSearch">搜索</div>
-                </template>
-            </van-search>
+                </template> -->
+            <!-- </van-search> -->
         </van-sticky>
         <van-list class="list" :immediate-check="false" :finished="finished" finished-text="" @load="getData">
-            <div class="search_message" v-if="info.length != 0" @click="$router.push('/givesubmit?id=' + this.$route.query.id + '&toUserId=' + info.id + '&phone=' + this.phone)">
+            <div
+                class="search_message"
+                v-if="info.length != 0"
+                @click="
+                    $router.push(
+                        '/givesubmit?id=' + this.$route.query.id + '&toUserId=' + info.id + '&phone=' + this.phone
+                    )
+                "
+            >
                 <div class="search_message_left">
-                    <van-image width="40px" height="40px" radius="65" :src="getImg(info.avatar)" fit="cover" style="margin-right: 10px"/>
+                    <van-image
+                        width="40px"
+                        height="40px"
+                        radius="65"
+                        :src="getImg(info.avatar)"
+                        fit="cover"
+                        style="margin-right: 10px"
+                    />
                     <div>
                         <div class="search_message_left_title">{{ info.realName || '保密' }}</div>
                         <div class="search_message_left_phone">手机号码&nbsp;{{ info.phone }}</div>
@@ -30,11 +46,15 @@
                 <div class="search_message_right">赠送</div>
                 <!-- <linear-com class="search_message_right">赠送</linear-com> -->
             </div>
-            <van-empty
+            <van-empty v-if="empty" :image="require(`@assets/empty-collection.png`)" :image-size="`89`">
+                <div class="h44_tip_one">没有找到符合的用户</div>
+                <div class="h44_tip">请核对手机号或区块链地址</div>
+            </van-empty>
+            <!-- <van-empty
                 :image="require('@assets/kong_png_yongyoude  (1).png')"
                 v-if="empty"
                 description="没有任何藏品哦~"
-            />
+            /> -->
         </van-list>
     </div>
 </template>
@@ -94,120 +114,147 @@ export default {
 </script>
 
 <style lang="less" scoped>
-/deep/ .van-field__control{
-    color: #FFFFFF;
+/deep/ .van-field__control {
+    margin-top: 2px;
+    color: #ffffff;
 }
-/deep/ .van-search{
+/deep/ .van-search {
     padding: 0;
-    background: #0A0A1B;
+    background: #1e222c;
+    border-radius: 4px;
     width: 100%;
-    height: 32px;
-    .van-search__content{
+    height: 38px;
+    .van-search__content {
         width: 100%;
-        height: 32px;
+        height: 38px;
         padding-left: 16px;
+        background: #1e222c;
         // padding: 8px 0px 0px 16px;
         box-sizing: border-box;
-        background: #29293F;
-        border-radius: 4px;
+        line-height: 38px;
     }
-    .van-icon__image{
-        margin-top: 4px;
+    .van-field__left-icon {
+        width: 24px;
+        height: 24px;
+        margin-top: 3px;
         // margin-right: 10px;
     }
-    .van-search__action{
+    .van-search__action {
         width: 60px;
         height: 32px;
         border-radius: 4px;
-        border: 1px solid #28B6FF;
+        border: 1px solid #28b6ff;
         box-sizing: border-box;
         margin-left: 16px;
         padding: 0;
-        background: #0A0A1B;
+        background: #0a0a1b;
         font-size: 12px;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
-        color: #28B6FF;
+        color: #28b6ff;
         text-align: center;
         line-height: 32px;
     }
 }
-    .content{
+.content {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    // margin-top: 44px;
+    background: #191d27;
+    padding: 12px 15px;
+    box-sizing: border-box;
+    .content_title {
+        font-size: 20px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 28px;
+        margin-bottom: 8px;
+    }
+    .content_tip {
+        font-size: 13px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 18px;
+        margin-bottom: 20px;
+        opacity: 0.5;
+    }
+    .content_search {
+        display: flex;
+        justify-content: space-between;
+        /deep/ .van-search__content {
+            background: #29293f;
+            // border-radius: 4px;
+        }
+    }
+    .search_message {
         width: 100%;
-        height: 100%;
-        position: absolute;
-        // margin-top: 44px;
-        background: #0A0A1B;
-        padding: 16px;
+        height: 58px;
+        background: #1e222c;
+        border-radius: 4px;
+        margin-top: 12px;
+        padding: 9px 15px;
         box-sizing: border-box;
-        .content_title{
-            font-size: 20px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #FFFFFF;
-            margin-bottom: 6px;
-        }
-        .content_tip{
-            font-size: 12px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #939599;
-            margin-bottom: 20px;
-        }
-        .content_search{
+        display: flex;
+        justify-content: space-between;
+        .search_message_left {
             display: flex;
-            justify-content: space-between;
-            /deep/ .van-search__content{
-                background: #29293F;
-                // border-radius: 4px;
+            .search_message_left_img {
+                width: 40px;
+                height: 40px;
+                border-radius: 65px;
+                margin-right: 10px;
             }
-        }
-        .search_message{
-            width: 100%;
-            height: 72px;
-            background: #29293F;
-            border-radius: 8px;
-            margin-top: 20px;
-            padding: 16px 10px;
-            box-sizing: border-box;
-            display: flex;
-            justify-content: space-between;
-            .search_message_left{
-                display: flex;
-                .search_message_left_img{
-                    width: 40px;
-                    height: 40px;
-                    border-radius: 65px;
-                    margin-right: 10px;
-                }
-                .search_message_left_title{
-                    font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #FFFFFF;
-                    line-height: 24px;
-                }
-                .search_message_left_phone{
-                    font-size: 12px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #939599;
-                    line-height: 17px;
-                }
-            }
-            .search_message_right{
-                margin-top: 8px;
-                width: 68px;
-                height: 24px;
-                background: #28B6FF;
-                border-radius: 4px;
-                font-size: 12px;
+            .search_message_left_title {
+                font-size: 14px;
                 font-family: PingFangSC-Medium, PingFang SC;
                 font-weight: 500;
-                color: #FFFFFF;
-                text-align: center;
-                line-height: 24px;
+                color: #ffffff;
+                line-height: 20px;
+                margin-bottom: 2px;
+            }
+            .search_message_left_phone {
+                font-size: 12px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #ffffff;
+                opacity: 0.3;
+                line-height: 16px;
             }
         }
+        .search_message_right {
+            margin-top: 5px;
+            width: 72px;
+            height: 30px;
+            background: #f9ddb3;
+            border-radius: 4px;
+            font-size: 14px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 400;
+            color: #725837;
+            text-align: center;
+            line-height: 30px;
+        }
     }
+    .h44_tip_one {
+        margin-top: 20px;
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 22px;
+        text-align: center;
+        margin-bottom: 8px;
+    }
+    .h44_tip{
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 20px;
+        opacity: 0.3;
+    }
+}
 </style>

src/views/order/Detail.vue

@@ -1,39 +1,58 @@
 <template>
     <div class="confirm_order">
         <div class="confirm_order_top">
-            <img :src="info.status == 'PROCESSING'?require(`@/assets/icon_jiaoyizhong.png`):require(`@/assets/icon_yiwancheng@3x.png`)" alt="" class="confirm_order_top_img">
-            <div>{{ getLabelName(info.status, statusOptions) }}</div>
+            <!-- <img :src="info.status == 'PROCESSING'?require(`@/assets/icon_jiaoyizhong.png`):require(`@/assets/icon_yiwancheng@3x.png`)" alt="" class="confirm_order_top_img">
+            <div>{{ getLabelName(info.status, statusOptions) }}</div> -->
+            <img :src="require(`@/assets/jiaoyichenggong@3x.png`)" alt="" class="confirm_order_top_img">
+            <div class="confirm_order_top_title">
+                <div class="confirm_order_top_title_one">交易成功</div>
+                <div class="confirm_order_top_title_two">感谢您的购买</div>
+            </div>
         </div>
         <div class="order_information">
             <img :src="getImg(changeImgs(info.pic))" alt="" class="order_information_img">
             <div class="order_information_title">
                 <div class="order_information_title_one">{{info.name}}</div>
-                <div class="order_information_title_two">{{info.category}}</div>
-                <div class="order_information_title_number">x1</div>
+                <div class="order_information_title_two">
+                    <img :src="require('@/assets/blockchain@3x.png')" alt="" class="order_information_title_two_img">
+                    <div class="order_information_title_two_title">ac10781#03506/10000</div>
+                </div>
+                <!-- <div class="order_information_title_two">{{info.category}}</div> -->
+                <div class="order_information_title_number">{{info.minter}}</div>
             </div>
+            <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture">
         </div>
         <div class="fee_details">
             <div class="fee_details_con">
-                <div>商品费用</div>
-                <div class="fee_details_actual_payment">¥{{info.price}}</div>
+                <div class="fee_details_actual_payment">订单金额</div>
+                <div>{{info.price}}元</div>
             </div>
-            <van-divider class="fee_details_divider"/>
             <div class="fee_details_con">
-                <div>GAS费用</div>
-                <div class="fee_details_actual_payment">¥{{info.gasPrice}}</div>
+                <div class="fee_details_actual_payment">交易数量</div>
+                <div>1</div>
             </div>
-            <van-divider class="fee_details_divider"/>
             <div class="fee_details_con">
-                <div>实际支付</div>
-                <div class="fee_details_price">¥{{ info.couponId ? 0 : info.totalPrice }}</div>
+                <div class="fee_details_actual_payment">创建时间</div>
+                <div>{{ info.createdAt }}</div>
+            </div>
+            <div class="fee_details_con">
+                <div class="fee_details_actual_payment">付款时间</div>
+                <div>{{ info.payTime }}</div>
             </div>
-            <van-divider class="fee_details_divider"/>
             <div class="fee_details_con">
-                <div>支付方式</div>
-                <div class="fee_details_actual_payment">{{ getLabelName(info.payMethod, payMethodOptions) }}支付</div>
+                <div class="fee_details_actual_payment">订单编号</div>
+                <div>{{ info.id }}</div>
+            </div>
+            <div class="fee_details_con">
+                <div class="fee_details_actual_payment">支付方式</div>
+                <div>{{ getLabelName(info.payMethod, payMethodOptions) }}支付</div>
+            </div>
+            <div class="fee_details_con">
+                <div class="fee_details_actual_payment">支付流水号</div>
+                <div>2930010137474708</div>
             </div>
         </div>
-        <div class="fee_details">
+        <!-- <div class="fee_details">
             <div class="fee_details_con">
                 <div class="order_details">订单编号</div>
                 <div class="order_details_con">{{ info.id }}</div>
@@ -53,7 +72,7 @@
                 <div class="order_details">成交时间</div>
                 <div class="order_details_con">{{ info.payTime }}</div>
             </div>
-        </div>
+        </div> -->
     </div>
     <!-- <div class="order">
         <div class="order-content">
@@ -220,91 +239,140 @@ export default {
         width: 100%;
         height: 100%;
         position: absolute;
-        background: @bg;
+        background: #191D27;
         // margin-top: 44px;
-        padding: 10px 16px;
+        padding: 0px 15px;
         box-sizing: border-box;
         .confirm_order_top{
             width: 100%;
-            height: 44px;
-            background: #29293F;
-            border-radius: 8px;
-            padding: 10px;
+            padding: 36px 0px 39px;
             box-sizing: border-box;
-            font-size: 16px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #28B6FF;
             display: flex;
-            margin-bottom: 10px;
+            justify-content: center;
             .confirm_order_top_img{
-                width: 24px;
-                height: 24px;
-                margin-right: 8px;
+                width: 74px;
+                height: 60px;
+                margin-right: 5px;
+            }
+            .confirm_order_top_title_one{
+                font-size: 19px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #FFFFFF;
+                line-height: 26px;
+                margin-top: 8px;
+                margin-bottom: 1px;
+            }
+            .confirm_order_top_title_two{
+                font-size: 14px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #FFFFFF;
+                line-height: 20px;
+                opacity: 0.5;
             }
         }
         .order_information{
             width: 100%;
-            background: #29293F;
-            border-radius: 8px;
-            padding: 10px;
-            box-sizing: border-box;
+            background: #232731;
+            border-radius: 20px;
             display: flex;
-            margin-bottom: 10px;
+            position: relative;
+            .bottom_texture{
+                width: 140px;
+                height: 140px;
+                position: absolute;
+                right: 0;
+                bottom: 0;
+            }
             .order_information_img{
-                width: 80px;
-                height: 80px;
+                width: 140px;
+                height: 140px;
+                border-radius: 20px;
                 margin-right: 12px;
             }
-            .order_information_title_one{
-                width: 215px;
-                font-size: 14px;
-                font-family: PingFangSC-Medium, PingFang SC;
-                font-weight: 500;
-                color: #FFFFFF;
-                white-space:nowrap;
-                overflow:hidden;
-                text-overflow:ellipsis;
-                margin-bottom: 6px;
-            }
-            .order_information_title_two{
-                width: 56px;
-                height: 22px;
-                background: rgba(255, 255, 255, 0.1);
-                border-radius: 4px;
-                font-size: 12px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #28B6FF;
-                line-height: 22px;
-                text-align: center;
-                margin-bottom: 16px;
+            .order_information_title{
+                width: calc(100% - 180px);
+                padding: 28px 0px;
+                box-sizing: border-box;
+                .order_information_title_one{
+                    width: 100%;
+                    font-size: 16px;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #FFFFFF;
+                    line-height: 22px;
+                    white-space:nowrap;
+                    overflow:hidden;
+                    text-overflow:ellipsis;
+                    margin-bottom: 9px;
+                }
+                .order_information_title_two{
+                    display: flex;
+                    margin-bottom: 9px;
+                    .order_information_title_two_img{
+                        width: 26px;
+                        height: 26px;
+                        position: relative;
+                        z-index: 1;
+                    }
+                    .order_information_title_two_title{
+                        height: 18px;
+                        padding: 2px 8px;
+                        box-sizing: border-box;
+                        font-size: 9px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: #725837;
+                        line-height: 14px;
+                        background: linear-gradient(141deg, #FCDC99 0%, #FCE7C8 100%);
+                        border-radius: 4px;
+                        margin-left: -6px;
+                        margin-top: 4px;
+                    }
+                }
             }
+            // .order_information_title_two{
+            //     width: 56px;
+            //     height: 22px;
+            //     background: rgba(255, 255, 255, 0.1);
+            //     border-radius: 4px;
+            //     font-size: 12px;
+            //     font-family: PingFangSC-Regular, PingFang SC;
+            //     font-weight: 400;
+            //     color: #28B6FF;
+            //     line-height: 22px;
+            //     text-align: center;
+            //     margin-bottom: 16px;
+            // }
             .order_information_title_number{
+                width: 100%;
                 font-size: 12px;
                 font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
-                color: #C8C9CC;
+                color: #FFFFFF;
+                line-height: 18px;
+                opacity: 0.5;
+                white-space:nowrap;
+                overflow:hidden;
+                text-overflow:ellipsis;
             }
         }
         .fee_details{
             width: 100%;
-            background: #29293F;
-            border-radius: 8px;
-            padding: 12px 10px;
+            background: linear-gradient(360deg, #232731 0%, #191D27 100%);
+            border-radius: 0px 0px 20px 20px;
+            padding: 24px 15px;
             box-sizing: border-box;
-            margin-bottom: 10px;
             .fee_details_con{
                 font-size: 14px;
                 font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #FFFFFF;
+                line-height: 20px;
                 display: flex;
                 justify-content: space-between;
-                .fee_details_price{
-                    font-weight: 500;
-                    color: #28B6FF;
-                }
+                margin-bottom: 14px;
                 .order_details{
                     font-size: 12px;
                     font-family: PingFangSC-Regular, PingFang SC;
@@ -318,6 +386,9 @@ export default {
                     color: #FFFFFF;
                 }
             }
+            .fee_details_con:last-child{
+                margin-bottom: 0;
+            }
         }
         .fee_details_divider{
                 margin: 10px 0;
@@ -350,6 +421,7 @@ export default {
         }
         .fee_details_actual_payment{
             color: #FFFFFF;
+            opacity: 0.3;
         }
     }
    /deep/  .van-divider::before{

src/views/order/Orders.vue

@@ -9,10 +9,20 @@
         >
             <div class="content">
                 <van-sticky ref="top" :offset-top="bar.value && bar.value.show ? 46 : 0">
-                    <div class="my_list">
-                        <div class="my_list_con">我的订单</div>
+                    <!-- 标签页展示切换 -->
+                    <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="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')"
@@ -34,11 +44,11 @@
                             >
                                 已完成
                             </div>
-                        </div>
+                        </div> -->
                         <!-- <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>
+                    <!-- </div> -->
                 </van-sticky>
                 <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
                     <div class="list_display">
@@ -46,10 +56,11 @@
                     </div>
                     <van-empty
                         v-if="empty"
-                        description="你还有没有订单哦～"
-                        :image="require('@assets/navigation bar_lose.png')"
+                        description="你还没有相关订单"
+                        :image="require('@assets/dingdankong@3x.png')"
                     >
-                        <van-button class="h44" size="small" color="#28B6FF" :round="true" to="/">去逛逛</van-button>
+                        <!-- <van-button class="h44" size="small" color="#28B6FF" :round="true" to="/">去逛逛</van-button> -->
+                        <div class="h44">这里将展示你在拉索购买的数字藏品订单</div>
                     </van-empty>
                 </van-list>
             </div>
@@ -72,8 +83,26 @@ export default {
             tabLabel: 'whole',
             active: 'explore',
             stiky: null,
-            status: 'PROCESSING,FINISH',
+            status: 'CANCELLED,FINISH',
             list: [],
+            selectOptions: [
+                {
+                    label: '全部',
+                    value: 'whole'
+                },
+                // {
+                //     label: '待付款',
+                //     value: 'pendingPayment'
+                // },
+                {
+                    label: '已付款',
+                    value: 'paid'
+                },
+                {
+                    label: '已取消',
+                    value: 'cancelled'
+                }
+            ],
             // tabs: [
             //     {
             //         status: 'PROCESSING,FINISH',
@@ -114,17 +143,16 @@ export default {
             this.getData(true);
             this.beforeData();
         },
-        changeStatus(title) {
-            this.tabLabel = title;
-            switch (title) {
+        changeTab(e) {
+            switch (e.name) {
                 case 'whole':
-                    this.status = 'PROCESSING,FINISH';
+                    this.status = 'CANCELLED,FINISH';
                     break;
-                case 'inTransaction':
-                    this.status = 'PROCESSING';
+                case 'paid':
+                    this.status = 'FINISH';
                     break;
                 default:
-                    this.status = 'FINISH';
+                    this.status = 'CANCELLED';
             }
             this.$router.replace({
                 path: '/orders',
@@ -172,6 +200,29 @@ 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;
+            }
+        }
 .my_list {
     width: 100%;
     background: #15152d;
@@ -301,4 +352,12 @@ export default {
     // box-sizing: border-box;
     background: @bg;
 }
+.h44{
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 20px;
+    opacity: 0.3;
+}
 </style>

src/views/product/Detail.vue

@@ -557,7 +557,7 @@
                     </div>
                 </div>
                 <!-- 预约 -->
-                <!-- <div class="buy_now" @click="buyNow">
+                <!-- <div class="buy_now" @click="appointment">
                     <div class="buy_now_con">敬请期待</div>
                     <div class="buy_now_time">05.16 10:30 开放预约</div>
                 </div> -->
@@ -578,7 +578,7 @@
             </div>
         </div> -->
         <!-- 仅展示 -->
-        <div class="show_only" v-else>
+        <div class="show_only" v-else @click="buyNow">
             <div class="show_only_con">仅展示</div>
         </div>
     </div>
@@ -586,6 +586,7 @@
 
 <script>
 import { ImagePreview } from 'vant';
+import { Toast } from 'vant';
 import product from '../../mixins/product';
 import coupon from '../../mixins/coupon';
 // import HashCode from '../../components/product/HashCode.vue';
@@ -713,20 +714,35 @@ export default {
                 startPosition: index
             });
         },
+        // 藏品预约
         appointment() {
             if (this.info.appointment) {
                 return;
             }
-            this.$http
-                .post('/collection/appointment?id=' + this.info.id)
-                .then(res => {
-                    this.getProduct();
-                    this.$toast.success('预约成功');
+            Dialog.confirm({
+                title: '“拉索”想访问您的日历',
+                message: '用于设置提醒等功能',
+                confirmButtonText: '好',
+                confirmButtonColor: '#007AFF',
+                cancelButtonText: '不允许',
+                cancelButtonColor: '#007AFF'
+            })
+                .then(() => {
+                    this.$http
+                        .post('/collection/appointment?id=' + this.info.id)
+                        .then(res => {
+                            this.getProduct();
+                            this.$toast.success('预约成功');
+                        })
+                        .catch(e => {
+                            Toast(e.error);
+                            // if (e.error) {
+                            //     this.$toast.warning("1111",e.error);
+                            // }
+                        });
                 })
-                .catch(e => {
-                    if (e.error) {
-                        this.$toast.warning(e.error);
-                    }
+                .catch(() => {
+                    // on cancel
                 });
         },
         getProduct() {
@@ -1638,7 +1654,7 @@ export default {
     @bottom: 6px;
     .transaction_button {
         width: 100%;
-        background: #161A24;
+        background: #161a24;
         padding: 0 15px;
         box-sizing: border-box;
         display: flex;
@@ -1716,7 +1732,7 @@ export default {
             .buy_now {
                 width: 160px;
                 height: 46px;
-                background: #F9DDB3;
+                background: #f9ddb3;
                 border-radius: 8px;
                 padding-top: 6px;
                 box-sizing: border-box;
@@ -1727,7 +1743,7 @@ export default {
                     font-weight: 500;
                     color: #725837;
                 }
-                .buy_now_time{
+                .buy_now_time {
                     font-size: 10px;
                     font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
@@ -1747,7 +1763,7 @@ export default {
                     color: #725837;
                 }
             }
-            .cancel_reservation{
+            .cancel_reservation {
                 width: 160px;
                 height: 46px;
                 background: #313641;
@@ -1755,18 +1771,18 @@ export default {
                 padding-top: 6px;
                 box-sizing: border-box;
                 text-align: center;
-                .cancel_reservation_con{
+                .cancel_reservation_con {
                     font-size: 14px;
                     font-family: PingFangSC-Medium, PingFang SC;
                     font-weight: 500;
-                    color: #FFFFFF;
+                    color: #ffffff;
                     opacity: 0.6;
                 }
-                .cancel_reservation_time{
+                .cancel_reservation_time {
                     font-size: 10px;
                     font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
-                    color: #FFFFFF;
+                    color: #ffffff;
                     opacity: 0.3;
                 }
             }
@@ -1821,7 +1837,7 @@ export default {
     .show_only {
         width: 100%;
         height: 56px;
-        background: #161A24;
+        background: #161a24;
         padding: 8px 16px;
         box-sizing: border-box;
         position: fixed;