寄售页面

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

@@ -244,6 +244,15 @@ const routes = [
             title: '第九空间'
         }
     },
+    {
+        path: '/Consignment',
+        name: 'Consignment',
+        component: () => import('../views/asset/Consignment.vue'),
+        meta: {
+            pageType: Page.Every,
+            title: '第九空间'
+        }
+    },
     {
         path: '/assetSearch',
         name: 'assetSearch',

src/main/nine-space/src/views/asset/Consignment.vue

@@ -0,0 +1,192 @@
+<template>
+    <div class="top">
+        <div class="title">寄售说明</div>
+        <div class="name" v-for="(item, index) in list" :key="index">
+            <span>{{ item.title }}</span>
+        </div>
+        <div class="border border1"></div>
+        <div class="content">
+            <van-field type="number" label="寄售价格(元)" placeholder="请设置寄售价格" v-model="message" />
+        </div>
+        <div class="border"></div>
+        <div class="input">
+            <div class="text1">请输入交易密码，验证信息</div>
+            <van-password-input :value="password" :focused="showKeyboard" @focus="showKeyboard = true" />
+            <!-- 数字键盘 -->
+            <van-number-keyboard v-model="password" :show="showKeyboard" @blur="showKeyboard = false" maxlength="6" />
+            <div class="text2">忘记密码？</div>
+        </div>
+        <div class="bottom van-safe-area-bottom" ref="bottom">
+            <van-notice-bar
+                color="#FDFB60"
+                background="#ff6c0016"
+                text="出售成功的加密作品将会携带加密作品的所有信息转让于购买方，包括但不限于：加 密空间、权益的使用、加密作品的区块信息等"
+            />
+            <div class="bottom-content">
+                <div class="btn1">
+                    取消
+                    <!-- <van-button @click="submit" :disabled="orderId"> 取消 </van-button> -->
+                </div>
+                <div class="btn2" @click="submit">确认寄售</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Top',
+    data() {
+        return {
+            list: [
+                {
+                    title: '1. 作品寄售为单个作品价格?'
+                },
+                {
+                    title: '2. 用户将会看到加密作品的权益、加密空间的使用情况'
+                },
+                {
+                    title: '3. 交易成功后加密作品的点赞数量将会被清除'
+                },
+                {
+                    title: '4. 平台会收取作品出售价格的 5% 作为服务费'
+                },
+                {
+                    title: '5. 因电子支付通道限制，单笔限额20000元'
+                }
+            ]
+        };
+    },
+    methods: {}
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+    /deep/ .van-password-input {
+        margin: 10px 0;
+        padding: 0 25px;
+        .van-password-input__security {
+            border: 1px solid #939599;
+            height: 42px;
+            border-radius: 2px;
+            li {
+                background-color: transparent;
+                &:not(:last-child) {
+                    border-right: 1px solid #939599;
+                }
+                i {
+                    background-color: #fff;
+                }
+            }
+        }
+    }
+    /deep/ .van-cell {
+        padding-top: 20px;
+    }
+    /deep/.van-cell__title {
+        font-size: 14px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 24px;
+    }
+    // background-color: #0f0f0f;
+    padding-bottom: 100px;
+    .title {
+        font-size: 20px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 30px;
+        margin-top: 5px;
+        padding-left: 16px;
+    }
+    .name {
+        padding-left: 16px;
+        span {
+            font-size: 12px;
+            font-weight: 400;
+            color: #939599;
+            line-height: 22px;
+        }
+    }
+    .bottom {
+        position: fixed;
+        bottom: 0px;
+        left: 0;
+        right: 0;
+        background-color: @bg;
+        z-index: 20;
+        border-top: 1px solid #313233;
+
+        .bottom-content {
+            padding: 6px 16px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .btn1 {
+                width: 161px;
+                height: 44px;
+                border-radius: 22px;
+                line-height: 44px;
+                color: #939599;
+                text-align: center;
+                border: 1px solid #939599;
+            }
+            .btn2 {
+                width: 162px;
+                height: 44px;
+                line-height: 44px;
+                text-align: center;
+
+                color: #333230;
+                background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+                border-radius: 22px;
+            }
+            .van-button {
+                flex-grow: 1;
+                color: #333230 !important;
+                max-width: 210px;
+            }
+            .text {
+                font-size: 14px;
+                color: #939599;
+                line-height: 20px;
+                word-break: keep-all;
+            }
+        }
+    }
+    .border {
+        width: 375px;
+        height: 5px;
+        background: #202122;
+    }
+    .content {
+        width: 375px;
+        height: 70px;
+        line-height: 70px;
+        background: #19191b;
+        &.border1 {
+            margin-top: 20px;
+        }
+    }
+    .input {
+        margin-top: 20px;
+        .text1 {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 24px;
+            margin-bottom: 6px;
+            text-align: center;
+        }
+        .text2 {
+            font-size: 14px;
+            text-align: right;
+            font-weight: 400;
+            color: #939599;
+            line-height: 24px;
+            margin-right: 15px;
+        }
+    }
+}
+</style>

src/main/nine-space/src/views/asset/Detail.vue

@@ -127,8 +127,8 @@
                     />
                     <div class="text2">赠送</div>
                 </div>
-                <van-button class="btn1" type="primary" block round @click="buy">公开展示</van-button>
-                <van-button type="primary" block round>寄售上架</van-button>
+                <van-button class="btn1" type="primary" block round @click="Exhibition">公开展示</van-button>
+                <van-button type="primary" block round @click="$router.push('/Consignment')">寄售上架</van-button>
             </div>
         </div>
 
@@ -158,7 +158,8 @@ import asset from '../../mixins/asset';
 import product from '../../mixins/product';
 import { mapState } from 'vuex';
 import { ImagePreview } from 'vant';
-
+import Vue from 'vue';
+import { Dialog } from 'vant';
 // install Swiper modules
 SwiperCore.use([Pagination]);
 
@@ -194,6 +195,18 @@ export default {
         this.getProduct();
     },
     methods: {
+        Exhibition() {
+            Dialog.confirm({
+                title: '公开展示',
+                message: '藏品将公开展示，无报价'
+            })
+                .then(() => {
+                    // on confirm
+                })
+                .catch(() => {
+                    // on cancel
+                });
+        },
         preview(index = 0, list = []) {
             ImagePreview({
                 images: [...list],