接口

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_BASE_URL=https://test.raex.vip/
+VUE_APP_BASE_URL=https://nfttest.raex.vip/
 NODE_ENV=development
 VUE_APP_PUBLIC_PATH=/
 ASSETS_PATH=raex

src/components/auction/info.vue

@@ -1,14 +1,22 @@
 <template>
-    <div class="auction-info">
-        <van-image width="128" height="128" :src="require('../../assets/paimai.png')" fit="cover" />
+    <router-link
+        :to="{
+            path: '/auctionDetail',
+            query: {
+                id: info.id
+            }
+        }"
+        class="auction-info"
+    >
+        <van-image width="128" height="128" :src="getImg(changeImgs(info.pic, 600))" fit="cover" />
         <div class="content">
             <div class="text1 van-multi-ellipsis--l2">
-                北京荣宝网络文物拍卖拍卖拍卖最多展示两排北京荣宝网络文物拍卖拍卖拍卖最多展示两排北京荣宝网络文物拍卖拍卖拍卖最多展示两排北京荣宝网络文物拍卖拍卖拍卖最多展示两排…北京荣宝网络文物拍卖拍卖拍卖最多展示两排北京荣宝网络文物拍卖拍卖拍卖最多展示两排
+                {{ info.name }}
             </div>
             <div class="text2">
                 <div class="time">
                     <img src="../../assets/info_icon_time.png" alt="" />
-                    <span>距结束：11小时56分24秒</span>
+                    <span>距结束：<van-count-down :time="time" format="HH 小时 mm 分 ss 秒" /></span>
                 </div>
             </div>
 
@@ -16,16 +24,35 @@
                 <span class="text3-1">当前价</span>
                 <div class="price">
                     <img src="../../assets/icon_jiage_hei.png" alt="" />
-                    <span>320</span>
+                    <span>{{ info.startingPrice }}</span>
                 </div>
-                <span class="text3-3">出价164次</span>
+                <span class="text3-3">出价{{ info.bids }}次</span>
             </div>
         </div>
-    </div>
+    </router-link>
 </template>
 
 <script>
-export default {};
+import auction from '../../mixins/auction';
+export default {
+    data() {
+        return {
+            time: ''
+        };
+    },
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    mixins: [auction],
+    mounted() {
+        this.time = this.getTime(this.info.endTime);
+    }
+};
 </script>
 
 <style lang="less" scoped>
@@ -38,6 +65,7 @@ export default {};
     margin: 8px;
     align-items: stretch;
     box-sizing: border-box;
+    color: #000;
     .van-image {
         flex-shrink: 0;
     }
@@ -67,9 +95,16 @@ export default {};
                     height: 18px;
                 }
                 span {
+                    margin-left: 2px;
+                    .flex();
                     font-size: 12px;
                     color: #ff7f1f;
                     line-height: 22px;
+                    .van-count-down {
+                        font-size: 12px;
+                        color: #ff7f1f;
+                        line-height: 22px;
+                    }
                 }
             }
         }

src/mixins/auction.js

@@ -0,0 +1,11 @@
+import imgInfo from './imgInfo';
+export default {
+    mixins: [imgInfo],
+    methods: {
+        getTime(endTime) {
+            console.log(new Date(endTime).getTime());
+            let time = new Date(endTime).getTime() - new Date().getTime();
+            return time;
+        }
+    }
+};

src/mixins/imgInfo.js

@@ -0,0 +1,17 @@
+export default {
+    methods: {
+        changeImgs(list = []) {
+            // console.log(list);
+            return list.map(item => {
+                if (item.type === 'video/mp4') {
+                    return item.thumb;
+                } else {
+                    return item.url;
+                }
+            });
+        },
+        isVideo(info = {}) {
+            return info.type === 'video/mp4';
+        }
+    }
+};

src/mixins/product.js

@@ -1,5 +1,6 @@
 import { abs } from 'mathjs';
 import { mapState } from 'vuex';
+import imgInfo from './imgInfo';
 export default {
     data() {
         return {
@@ -44,6 +45,7 @@ export default {
             saleTime: ''
         };
     },
+    mixins: [imgInfo],
     computed: {
         ...mapState(['usedBuy']),
         bannerList() {

src/router/index.js

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

src/views/asset/AuctionPublish.vue

@@ -0,0 +1,590 @@
+<template>
+    <div class="top">
+        <div class="top-content">
+            <div class="title">拍卖说明</div>
+            <div class="name" v-for="(item, index) in list" :key="index">
+                <span>{{ item.title }}</span>
+                <span class="prim">{{ item.sub }}</span>
+                <span>{{ item.text1 }}</span>
+            </div>
+            <div class="border border1"></div>
+            <div class="box-content">
+                <div class="title">请选择拍卖模式</div>
+                <div class="box-select">
+                    <div class="select-item prim" @click="warning">
+                        <span>一口价模式</span>
+                        <img src="../../assets/icon_gouxuan_pre.png" alt="" />
+                    </div>
+                    <div class="select-item" @click="showStarting = !showStarting" :class="{ prim: showStarting }">
+                        <span>竞拍模式</span>
+                        <img v-if="showStarting" src="../../assets/icon_gouxuan_pre.png" alt="" />
+                        <img v-else src="../../assets/icon_gouxuan_huise.png" alt="" />
+                    </div>
+                </div>
+            </div>
+            <div>
+                <div class="box">
+                    <div class="content">
+                        <div class="title">一口价模式(元)<span>最高定价20000.00</span></div>
+                        <!-- <van-field type="number" input-align="center" placeholder="请输入价格" v-model="price" /> -->
+                        <van-stepper
+                            v-model="price"
+                            :default-value="''"
+                            :show-plus="false"
+                            :show-minus="false"
+                            :decimal-length="2"
+                            allow-empty
+                            min="0"
+                            max="20000"
+                            placeholder="请输入价格"
+                            @change="agreement = false"
+                        />
+                        <div class="title">预计收入(元）</div>
+                        <div class="info-item">
+                            <span>寄售定价</span>
+                            <span class="val">{{ price1 }}</span>
+                        </div>
+                        <div class="info-item">
+                            <span>版税({{ info.royalties || 0 }}%)</span>
+                            <span class="val">{{ price2 }}</span>
+                        </div>
+                        <div class="info-item">
+                            <span>技术服务费(4%) </span>
+                            <span class="val">{{ price3 }}</span>
+                        </div>
+                        <div class="info-item">
+                            <span>支付通道费(1%)</span>
+                            <span class="val">{{ price4 }}</span>
+                        </div>
+                        <div class="info-item">
+                            <span>最终收入</span>
+                            <span class="val prim">{{ price5 }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="box" v-if="showStarting">
+                    <div class="content">
+                        <div class="title">竞拍模式(元)<span>最高定价20000.00</span></div>
+                        <!-- <van-field type="number" input-align="center" placeholder="请输入价格" v-model="price" /> -->
+                        <van-stepper
+                            v-model="startingPrice"
+                            :default-value="''"
+                            :show-plus="false"
+                            :show-minus="false"
+                            :decimal-length="2"
+                            allow-empty
+                            min="0"
+                            max="20000"
+                            placeholder="请输入起拍价"
+                            @change="agreement = false"
+                        />
+                        <div class="title">竞拍说明</div>
+                        <div class="info-item">
+                            <span>拍卖类型</span>
+                            <span class="val">增价拍</span>
+                        </div>
+                        <div class="info-item">
+                            <span>加价幅度</span>
+                            <span class="val">¥100</span>
+                        </div>
+                        <div class="info-item">
+                            <span>保证金</span>
+                            <span class="val">¥100</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="border"></div>
+            <div class="input">
+                <div class="text1">请输入交易密码</div>
+                <div v-if="sets">
+                    <van-password-input :gutter="10" :value="password" :focused="showKeyboard" @focus="keyboardEnter" />
+                    <van-number-keyboard
+                        v-model="password"
+                        :show="showKeyboard"
+                        @blur="keyBlur"
+                        :gutter="10"
+                        maxlength="6"
+                        theme="custom"
+                        close-button-text="完成"
+                        random-key-order
+                    />
+                    <div class="text2-content">
+                        <div class="text2" @click="goRouter">忘记密码？</div>
+                    </div>
+                </div>
+                <div v-else class="text3" @click="$router.push('/tradingPassword')">您当前没有交易密码，点击去设置</div>
+            </div>
+        </div>
+        <div class="bottom van-safe-area-bottom" ref="bottom">
+            <van-notice-bar
+                :color="$colors.prim"
+                :background="$colors.prim"
+                text="出售成功的数字藏品将会携带数字藏品的所有信息转让于购买方，包括但不限于：权益的使用、数字藏品的区块信息等"
+            />
+            <div class="bottom-content">
+                <div class="btn1" @click="$router.go(-1)">取消</div>
+                <div class="btn2" @click="submit">确认拍卖</div>
+            </div>
+        </div>
+        <div class="border"></div>
+        <agreement ref="agree" :info="info" @agree="agree"></agreement>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import Agreement from './Agreement.vue';
+export default {
+    components: { Agreement },
+    name: 'Top',
+    inject: ['changeScroll'],
+    data() {
+        return {
+            price: '',
+            startingPrice: '',
+            showStarting: false,
+            showKeyboard: false,
+            password: '',
+            sets: false,
+            list: [
+                {
+                    title: '1. 拍卖时间默认为5天',
+                    sub: '（期间不可下架，修改）'
+                },
+                {
+                    title: '2 拍卖价格为单个作品价格'
+                },
+                {
+                    title: '3. 用户将会看到数字权益的使用情况'
+                },
+                {
+                    title: '4. 交易成功后数字藏品的点赞数量，拍卖纪录将会被清除'
+                },
+                {
+                    title: '5. 平台会收取作品出售价格的',
+                    sub: ' 5% ',
+                    text1: '作为服务费'
+                },
+                {
+                    title: '6. 因电子支付通道限制，单笔限额20000元'
+                }
+            ],
+            info: {},
+            agreement: false
+        };
+    },
+    computed: {
+        ...mapState(['userInfo']),
+        price1() {
+            let price = Math.floor(this.price * 100) / 100;
+            return price.toFixed(2);
+        },
+        price2() {
+            let price = Math.floor(this.price * (this.info.royalties || 0)) / 100;
+            return price.toFixed(2);
+        },
+        price3() {
+            let price = Math.floor(this.price * 4) / 100;
+            return price.toFixed(2);
+        },
+        price4() {
+            let price = Math.floor(this.price * 1) / 100;
+            return price.toFixed(2);
+        },
+        price5() {
+            let price = Math.floor(this.price * (95 - (this.info.royalties || 0))) / 100;
+            return price.toFixed(2);
+        }
+    },
+    mounted() {
+        this.passFn();
+        this.$http.get('/asset/get/' + this.$route.query.id).then(res => {
+            this.info = res;
+        });
+    },
+    methods: {
+        keyboardEnter() {
+            this.changeScroll(1000);
+            this.showKeyboard = true;
+        },
+        passFn() {
+            this.$http
+                .get('/user/tradeCodeStatus', {
+                    userId: this.userInfo.id
+                })
+                .then(res => {
+                    console.log(res);
+                    this.sets = res.set;
+                });
+        },
+        agree() {
+            this.agreement = true;
+            this.submit();
+        },
+        submit() {
+            if (this.showStarting && !Number(this.startingPrice)) {
+                this.$toast('请输入起拍价');
+                return;
+            }
+            if (Number(this.price)) {
+                this.$dialog
+                    .confirm({
+                        title: '寄售',
+                        message: `商品将以<span style='color:#ff4f50;font-weight:bold;font-size:18px;margin:0 5px'>${this.price}</span>的价格上架`,
+                        allowHtml: true
+                    })
+                    .then(() => {
+                        this.$toast.loading({
+                            message: '加载中...',
+                            forbidClick: true
+                        });
+                        return new Promise((resolve, reject) => {
+                            this.$http
+                                .post('/user/verifyTradeCode', {
+                                    tradeCode: this.password
+                                })
+                                .then(_ => resolve())
+                                .catch(e => {
+                                    reject({ error: '密码错误' });
+                                });
+                        });
+                    })
+                    .then(() => {
+                        return this.$http.post('/asset/consignment', {
+                            sellerId: this.userInfo.id
+                        });
+                    })
+                    .catch(e => {
+                        if (e.error) {
+                            this.$toast(e.error || '出现错误，请稍后再试');
+                        }
+                        return Promise.reject('cancel');
+                    })
+                    .then(res => {
+                        this.$toast.success('寄售成功');
+                        setTimeout(() => {
+                            this.$router.go(-1);
+                        }, 1000);
+                    })
+                    .catch(e => {
+                        if (e && e.error) {
+                            this.$toast(e.error);
+                        }
+                    });
+            } else {
+                this.$toast('请输入一口价');
+            }
+        },
+        goRouter() {
+            if (!this.showKeyboard) {
+                this.$router.push('/tradingPassword');
+            }
+        },
+        keyBlur() {
+            setTimeout(() => {
+                this.showKeyboard = false;
+            }, 100);
+        },
+        warning() {
+            this.$dialog.alert({
+                title: '提示',
+                message: '一口价模式为必选项，不可取消'
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .van-notice-bar {
+    background: rgba(255, 108, 0, 0.1) !important;
+}
+/deep/ .van-password-input {
+    margin: 0 0;
+    .van-password-input__security {
+        border: 1px solid @text3;
+        height: 42px;
+        border-radius: 2px;
+        li {
+            background-color: transparent;
+            &:not(:last-child) {
+                border-right: 1px solid @text3;
+            }
+            i {
+                // background-color: #fff;
+            }
+        }
+    }
+}
+/deep/.van-number-keyboard__body {
+    background-color: fade(#4a4a4a, 50%);
+    .van-key {
+        background-color: @bg;
+        &:active {
+            background-color: @bg3;
+        }
+    }
+}
+
+.input {
+    padding: 12px 0 20px;
+    .text1 {
+        font-size: @font2;
+        color: @text0;
+        line-height: 24px;
+        margin-bottom: 6px;
+    }
+}
+.top-content {
+    background-color: @bg;
+    padding-top: 10px;
+}
+.top {
+    background-color: @bg3;
+    /deep/ .van-password-input {
+        margin: 10px 0;
+        padding: 0 25px;
+        .van-password-input__security {
+            border-width: 0;
+            height: 42px;
+            border-radius: 2px;
+            li {
+                background-color: transparent;
+                &:not(:last-child) {
+                    border-right: 1px solid @text3;
+                }
+                border: 1px solid @text3;
+                i {
+                    // background-color: #fff;
+                }
+            }
+        }
+    }
+    /deep/ .van-cell {
+        padding-top: 20px;
+    }
+    /deep/.van-cell__title {
+        font-size: @font2;
+        font-weight: bold;
+        color: @text0;
+        line-height: 24px;
+    }
+    // background-color: @bg3;;
+    padding-bottom: 280px;
+    .title {
+        font-size: 14px;
+        color: @text0;
+        // line-height: 30px;
+        margin-top: 5px;
+        padding: 5px 16px 5px;
+        font-weight: bold;
+    }
+    .name {
+        padding-left: 16px;
+        span {
+            font-size: 12px;
+            font-weight: 400;
+            color: @text3;
+            line-height: 22px;
+
+            &.prim {
+                color: @prim;
+            }
+        }
+    }
+    .bottom {
+        position: fixed;
+        bottom: 0px;
+        left: 0;
+        right: 0;
+        background-color: @bg;
+        z-index: 20;
+        border-top: 1px solid @tabBorder;
+
+        .bottom-content {
+            padding: 6px 16px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .btn1 {
+                width: calc(50% - 10px);
+                height: 44px;
+                border-radius: 22px;
+                line-height: 44px;
+                color: @text3;
+                text-align: center;
+                border: 1px solid @text3;
+            }
+            .btn2 {
+                width: calc(50% - 10px);
+                height: 44px;
+                line-height: 44px;
+                text-align: center;
+
+                color: @btnText;
+                background: linear-gradient(135deg, @prim 0%, @warn 100%);
+                border-radius: 22px;
+            }
+            .van-button {
+                flex-grow: 1;
+                color: #333230 !important;
+                max-width: 210px;
+            }
+            .text {
+                font-size: @font2;
+                color: @text3;
+                line-height: 20px;
+                word-break: keep-all;
+            }
+        }
+    }
+    .border {
+        // width: 375px;
+        height: 5px;
+        background: @bg3;
+        &.border1 {
+            margin-top: 20px;
+        }
+    }
+    .box {
+        background-color: @bg;
+        padding: 16px 16px 0;
+        border-radius: 4px;
+        &:last-child {
+            padding-bottom: 16px;
+        }
+    }
+    .content {
+        // width: 375px;
+        background: @bg3;
+        padding-bottom: 12px;
+
+        .title {
+            padding-top: 16px;
+            .flex();
+            justify-content: space-between;
+            span {
+                font-size: 12px;
+                color: #ff4f50;
+                font-weight: normal;
+            }
+        }
+
+        .van-cell {
+            padding: 0 16px 0px;
+            margin: 10px 0 0;
+
+            /deep/.van-cell__value {
+                background-color: @bg;
+                padding: 8px;
+            }
+        }
+
+        .info-item {
+            padding: 0 16px;
+            .flex();
+            justify-content: space-between;
+            font-size: 12px;
+            color: #939599;
+            line-height: 24px;
+
+            .val {
+                border: 1px solid #f5f7fa;
+                box-sizing: border-box;
+                text-align: center;
+                min-width: 72px;
+                display: inline-block;
+
+                &.prim {
+                    color: @prim;
+                }
+            }
+        }
+    }
+    .input {
+        // margin-top: 20px;
+        width: 100%;
+        .text1 {
+            font-size: @font2;
+            color: @text0;
+            line-height: 24px;
+            margin-bottom: 6px;
+            padding: 0 16px;
+        }
+        .text2 {
+            font-size: @font2;
+            text-align: right;
+            font-weight: 400;
+            color: @text3;
+            line-height: 24px;
+            margin-right: 15px;
+        }
+        .text3 {
+            font-size: @font2;
+            color: #ff4f50;
+            line-height: 24px;
+            margin-top: 25px;
+            display: flex;
+            justify-content: center;
+        }
+    }
+}
+.text2-content {
+    .flex();
+    justify-content: flex-end;
+}
+/deep/.van-stepper {
+    padding: 10px 16px;
+    width: 100%;
+    box-sizing: border-box;
+    .van-stepper__input {
+        width: 100%;
+        height: 40px;
+        margin: 0 0;
+        background-color: @bg;
+    }
+}
+
+.van-notice-bar {
+    font-size: 12px;
+    height: 36px;
+    line-height: 36px;
+    background: fade(@prim, 10%) !important;
+}
+
+.box-select {
+    .flex();
+    padding: 10px 16px 0;
+    justify-content: space-between;
+    .select-item {
+        width: calc(50% - 10px);
+        .flex();
+        img {
+            width: 24px;
+            height: 24px;
+            margin-left: 4px;
+        }
+        height: 38px;
+        background: #f5f7fa;
+        border-radius: 2px;
+        border: 1px solid #c8c9cc;
+        justify-content: center;
+        span {
+            font-size: 14px;
+            color: #939599;
+            line-height: 24px;
+        }
+
+        &.prim {
+            span {
+                color: @prim;
+                font-weight: bold;
+            }
+            border-color: @prim;
+            background: rgba(58, 178, 0, 0.04);
+        }
+    }
+}
+</style>

src/views/asset/Detail.vue

@@ -154,7 +154,7 @@
                     <div class="prive" v-if="init.length > 0">
                         <div class="prive1" :class="{ opened: item.opened }" v-for="(item, index) in init" :key="index">
                             <img v-if="!item.opened" class="img" :src="item.icon[0]" alt="" />
-                            <div style="margin-top: 4px" v-if="item.icon[2]">
+                            <div style="margin-top: 4px;" v-if="item.icon[2]">
                                 <img v-if="item.opened" class="img" :src="item.icon[2]" alt="" />
                             </div>
                             <!-- <img class="img" v-else :src="item.icon[0]" alt="" /> -->
@@ -195,7 +195,7 @@
                             <div class="text4">{{ item.createdAt.substr(0, 16) }}</div>
                         </div>
                     </div>
-                    <div v-else style="display: flex; justify-content: center">暂无购买记录</div>
+                    <div v-else style="display: flex; justify-content: center;">暂无购买记录</div>
                 </van-collapse-item>
             </van-collapse>
 
@@ -212,10 +212,10 @@
         </div> -->
         <div class="btn van-safe-area-bottom" ref="btn" v-if="info.status === 'NORMAL'">
             <div class="btns1">
-                <div class="add" @click="Add">
+                <!-- <div class="add" @click="Add">
                     <img class="img" src="@assets/icon-dianzan.png" alt="" />
                     <div class="text2">赠送</div>
-                </div>
+                </div> -->
                 <van-button
                     v-if="!$store.state.reviewPay"
                     class="btn1"
@@ -230,13 +230,13 @@
                     <div>寄售倒计时</div>
                     <div>{{ startTime }}</div>
                 </van-button>
-
-                <van-button type="primary" v-else-if="!$store.state.reviewPay" block round @click="Consignment">
-                    <!-- <div>
-                        {{ startTime }}
-                    </div> -->
-                    {{ info.consignment ? '取消寄售' : '寄售上架' }}
+                <van-button color="#FF7F1F" v-else-if="!$store.state.reviewPay" block round @click="showAction = true">
+                    流转操作
+                    <!-- {{ info.consignment ? '取消寄售' : '寄售上架' }} -->
                 </van-button>
+                <!-- <van-button type="primary" v-else-if="!$store.state.reviewPay" block round @click="Consignment">
+                    {{ info.consignment ? '取消寄售' : '寄售上架' }}
+                </van-button> -->
             </div>
         </div>
         <div
@@ -246,69 +246,73 @@
         >
             <div class="status-text">{{ getLabelName(info.status, assetStatusOptions) }}</div>
         </div>
-        <van-popup v-model:show="show">
-            <div class="title2">
-                <div class="top">
-                    <img class="img" v-if="list2.icon[1]" :src="list2.icon[1]" alt="" />
-                    <img class="img" v-else :src="list2.icon[0]" alt="" />
-                    <div class="title3">{{ list2.name }}</div>
+        <div class="popup">
+            <van-popup v-model:show="show">
+                <div class="title2">
+                    <div class="top">
+                        <img class="img" v-if="list2.icon[1]" :src="list2.icon[1]" alt="" />
+                        <img class="img" v-else :src="list2.icon[0]" alt="" />
+                        <div class="title3">{{ list2.name }}</div>
+                    </div>
+                    <img @click="allFn" class="icon" :src="require('@assets/icon-dianzan.png')" alt="" />
                 </div>
-                <img @click="allFn" class="icon" :src="require('@assets/icon-dianzan.png')" alt="" />
-            </div>
-            <div class="border"></div>
-            <div class="name">{{ list2.description }}</div>
-            <div class="name1" v-if="list2.type === 'text'">
-                <!-- <div>{{ list2.detail }}</div> -->
-                <span>{{ list2.detail || '暂无' }}</span>
-            </div>
-            <div class="name1" v-if="list2.type === 'exchange'">
-                <span>{{ list2.detail }}</span>
-            </div>
-            <div class="name1" v-if="list2.type == 'qrcode'">
-                <img class="qrcodeImg" :src="list2.detail" alt="" />
-                <div class="qrcode1">扫描二维码进行票务核销</div>
-                <span>{{ list2.remark || '暂无' }}</span>
-            </div>
-            <div v-if="list2.type === 'code'">
-                <div class="copy">
-                    <div class="id">
-                        <!-- {{ list2.detail }} -->
-                        yshsbn
+                <div class="border"></div>
+                <div class="name">{{ list2.description }}</div>
+                <div class="name1" v-if="list2.type === 'text'">
+                    <!-- <div>{{ list2.detail }}</div> -->
+                    <span>{{ list2.detail || '暂无' }}</span>
+                </div>
+                <div class="name1" v-if="list2.type === 'exchange'">
+                    <span>{{ list2.detail }}</span>
+                </div>
+                <div class="name1" v-if="list2.type == 'qrcode'">
+                    <img class="qrcodeImg" :src="list2.detail" alt="" />
+                    <div class="qrcode1">扫描二维码进行票务核销</div>
+                    <span>{{ list2.remark || '暂无' }}</span>
+                </div>
+                <div v-if="list2.type === 'code'">
+                    <div class="copy">
+                        <div class="id">
+                            <!-- {{ list2.detail }} -->
+                            yshsbn
+                        </div>
+                        <img class="copyImg" @click="copy" src="@assets/svgs/copy_icon.svg" alt="" />
+                    </div>
+                    <span class="span">说明：</span> <span>{{ list2.remark || '暂无' }}</span>
+                    <div class="border"></div>
+                    <div class="code">每次交易都会产生校验码</div>
+                </div>
+                <div v-if="list2.openTime">
+                    <div v-if="list2.type == 'qrcode'" class="timename">
+                        <span class="time">截止时间：</span>{{ list2.openTime }}
+                    </div>
+                    <div v-else class="timename"><span class="time">打开时间：</span>{{ list2.openTime }}</div>
+                </div>
+            </van-popup>
+            <!-- 悄悄话 -->
+            <van-popup v-model:show="show3">
+                <div class="title2">
+                    <div class="top">
+                        <img class="img" :src="init2.icon[1]" alt="" />
+                        <div class="title3">{{ init2.name }}</div>
                     </div>
-                    <img class="copyImg" @click="copy" src="@assets/svgs/copy_icon.svg" alt="" />
+                    <img
+                        @click="allFn2"
+                        class="icon"
+                        src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-11-13-13-52-01rJiHiwBy.png"
+                        alt=""
+                    />
                 </div>
-                <span class="span">说明：</span> <span>{{ list2.remark || '暂无' }}</span>
                 <div class="border"></div>
-                <div class="code">每次交易都会产生校验码</div>
-            </div>
-            <div v-if="list2.openTime">
-                <div v-if="list2.type == 'qrcode'" class="timename">
-                    <span class="time">截止时间：</span>{{ list2.openTime }}
+                <div class="name">{{ init2.description }}</div>
+                <div class="name1">
+                    <span>{{ init2.detail || '暂无' }}</span>
                 </div>
-                <div v-else class="timename"><span class="time">打开时间：</span>{{ list2.openTime }}</div>
-            </div>
-        </van-popup>
-        <!-- 悄悄话 -->
-        <van-popup v-model:show="show3">
-            <div class="title2">
-                <div class="top">
-                    <img class="img" :src="init2.icon[1]" alt="" />
-                    <div class="title3">{{ init2.name }}</div>
+                <div v-if="init2.openTime" class="timename">
+                    <span class="time">开启时间：</span>{{ init2.openTime }}
                 </div>
-                <img
-                    @click="allFn2"
-                    class="icon"
-                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-11-13-13-52-01rJiHiwBy.png"
-                    alt=""
-                />
-            </div>
-            <div class="border"></div>
-            <div class="name">{{ init2.description }}</div>
-            <div class="name1">
-                <span>{{ init2.detail || '暂无' }}</span>
-            </div>
-            <div v-if="init2.openTime" class="timename"><span class="time">开启时间：</span>{{ init2.openTime }}</div>
-        </van-popup>
+            </van-popup>
+        </div>
         <!-- 悄悄话 -->
         <div class="whisper">
             <van-popup v-model:show="show2">
@@ -340,6 +344,17 @@
             :id="orderInfo.id"
             :imgSrc="getImg(changeImgs(info.pic))"
         ></order-open>
+        <div class="more-btns">
+            <van-action-sheet v-model:show="showAction">
+                <div class="more-btns-content">
+                    <van-button @click="Consignment" type="primary" block round>{{
+                        info.consignment ? '取消寄售' : '寄售上架'
+                    }}</van-button>
+                    <van-button @click="publish" color="#FF7F1F" block round>拍卖上架</van-button>
+                    <van-button @click="Add" color="#FFBF27" block round>赠送</van-button>
+                </div>
+            </van-action-sheet>
+        </div>
     </van-pull-refresh>
 </template>
 
@@ -381,7 +396,8 @@ export default {
                 { label: '二维码', value: 'qrcode' },
                 { label: '验证码', value: 'code' },
                 { label: '铸造', value: 'exchange' }
-            ]
+            ],
+            showAction: false
         };
     },
     computed: {
@@ -523,6 +539,38 @@ export default {
                     }
                 });
         },
+        publish() {
+            this.checkAuth()
+                .then(() => {
+                    return this.checkBank();
+                })
+                .then(() => {
+                    if (this.dayjs().diff(this.dayjs(this.info.createdAt), 'day') < this.holdDays) {
+                        this.$toast('持有满' + this.holdDays + '天才能上架');
+                    } else if (!this.info.publicCollectionId) {
+                        Dialog.confirm({
+                            title: '拍卖上架',
+                            message: '确定拍卖上架吗？'
+                        }).then(() => {
+                            this.$router.push('/auctionPublish?id=' + this.info.id);
+                        });
+                    } else {
+                        Dialog.confirm({
+                            title: '取消寄售',
+                            message: '确定取消寄售吗？'
+                        })
+                            .then(() => {
+                                return this.$http.post(`/asset/cancelConsignment?id=${this.info.id}`);
+                            })
+                            .then(res => {
+                                this.$toast.success('取消寄售');
+                                setTimeout(() => {
+                                    this.getProduct();
+                                }, 1000);
+                            });
+                    }
+                });
+        },
         Add() {
             if (this.userInfo.authStatus === 'PENDING' || this.userInfo.authStatus === 'FAIL') {
                 Dialog.confirm({
@@ -956,115 +1004,117 @@ export default {
         }
     }
 }
-
-/deep/ .van-popup {
-    width: 228px;
-    background: #ffffff;
-    padding: 0 16px;
-    border-radius: 8px;
-    .title2 {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding-top: 12px;
-        .top {
+.popup {
+    /deep/ .van-popup {
+        width: 228px;
+        background: #ffffff;
+        padding: 0 16px;
+        border-radius: 8px;
+        .title2 {
             display: flex;
             align-items: center;
-            .img {
+            justify-content: space-between;
+            padding-top: 12px;
+            .top {
+                display: flex;
+                align-items: center;
+                .img {
+                    width: 18px;
+                    height: 18px;
+                    color: #ff4f50;
+                    margin-right: 3px;
+                }
+                .title3 {
+                    font-size: @font2;
+                    font-weight: 400;
+                    color: #ff4f50;
+                    line-height: 24px;
+                }
+            }
+            .icon {
                 width: 18px;
                 height: 18px;
-                color: #ff4f50;
-                margin-right: 3px;
             }
-            .title3 {
-                font-size: @font2;
+        }
+        .border {
+            height: 1px;
+            background: #f2f3f5;
+            border-radius: 1px;
+            margin: 12px 0 6px;
+        }
+        .name1 {
+            width: 208px;
+            padding: 10px;
+            background: #f5f7fa;
+            border-radius: 4px;
+            color: @text3;
+            margin-bottom: 11px;
+            .qrcodeImg {
+                width: 93px;
+                height: 93px;
+                border-radius: 11px;
+                margin-left: 60px;
+            }
+            .qrcode1 {
+                font-size: @font1;
                 font-weight: 400;
-                color: #ff4f50;
-                line-height: 24px;
+                color: @text3;
+                line-height: 18px;
+                margin: 12px 0px 12px 44px;
             }
         }
-        .icon {
-            width: 18px;
-            height: 18px;
+        .timename {
+            color: #ff4f50;
+            font-size: @font1;
+            padding-bottom: 12px;
         }
-    }
-    .border {
-        height: 1px;
-        background: #f2f3f5;
-        border-radius: 1px;
-        margin: 12px 0 6px;
-    }
-    .name1 {
-        width: 208px;
-        padding: 10px;
-        background: #f5f7fa;
-        border-radius: 4px;
-        color: @text3;
-        margin-bottom: 11px;
-        .qrcodeImg {
-            width: 93px;
-            height: 93px;
-            border-radius: 11px;
-            margin-left: 60px;
+        .time {
+            color: @text3;
+            font-size: @font1;
+        }
+        .copy {
+            width: 220px;
+            height: 42px;
+            background: #f5f7fa;
+            border-radius: 24px;
+            margin-bottom: 16px;
+            justify-content: center;
+            display: flex;
+            align-items: center;
+            .id {
+                font-size: @font2;
+                color: #303133;
+            }
+            .copyImg {
+                width: 18px;
+                height: 18px;
+                margin-left: 6px;
+                cursor: pointer;
+            }
         }
-        .qrcode1 {
+        span {
+            color: #303133;
+        }
+        .span {
+            color: @text3;
+        }
+        .code {
             font-size: @font1;
             font-weight: 400;
             color: @text3;
             line-height: 18px;
-            margin: 12px 0px 12px 44px;
-        }
-    }
-    .timename {
-        color: #ff4f50;
-        font-size: @font1;
-        padding-bottom: 12px;
-    }
-    .time {
-        color: @text3;
-        font-size: @font1;
-    }
-    .copy {
-        width: 220px;
-        height: 42px;
-        background: #f5f7fa;
-        border-radius: 24px;
-        margin-bottom: 16px;
-        justify-content: center;
-        display: flex;
-        align-items: center;
-        .id {
-            font-size: @font2;
-            color: #303133;
+            padding-bottom: 12px;
         }
-        .copyImg {
-            width: 18px;
-            height: 18px;
-            margin-left: 6px;
-            cursor: pointer;
+        .name {
+            font-size: @font1;
+            font-weight: 400;
+            color: @text3;
+            line-height: 18px;
+            margin-bottom: 6px;
         }
     }
-    span {
-        color: #303133;
-    }
-    .span {
-        color: @text3;
-    }
-    .code {
-        font-size: @font1;
-        font-weight: 400;
-        color: @text3;
-        line-height: 18px;
-        padding-bottom: 12px;
-    }
-    .name {
-        font-size: @font1;
-        font-weight: 400;
-        color: @text3;
-        line-height: 18px;
-        margin-bottom: 6px;
-    }
 }
+
 .textName {
     font-size: @font2;
     font-weight: 400;
@@ -1293,6 +1343,8 @@ export default {
         justify-content: center;
         .btn1 {
             margin-right: 16px;
+            width: 35%;
+            flex-shrink: 0;
         }
         .img {
             width: 24px;
@@ -1603,4 +1655,20 @@ export default {
         border-top: 1px solid #202122;
     }
 }
+
+/deep/.more-btns {
+    .van-action-sheet {
+        background-color: #181818;
+        color: #fff;
+    }
+
+    .more-btns-content {
+        padding: 20px 48px;
+        .bottom(20px);
+
+        .van-button + .van-button {
+            margin-top: 20px;
+        }
+    }
+}
 </style>

src/views/auction/Detail.vue

@@ -112,7 +112,18 @@ export default {
         AuctionHelp,
         AuctionRule
     },
-    mounted() {},
+    data() {
+        return {
+            auctionId: 0,
+            info: {}
+        };
+    },
+    mounted() {
+        if (this.$route.query.id) {
+            this.auctionId = this.$route.query.id;
+        }
+        this.getDetail();
+    },
     beforeRouteLeave(to, from, next) {
         if (to.path === '/mineAddress') {
             this.setKeeps(['auctionDetail']);
@@ -124,6 +135,11 @@ export default {
     methods: {
         showHelp() {
             this.$refs.help.show = !this.$refs.help.show;
+        },
+        getDetail() {
+            this.$http.get('/auctionActivity/get/' + this.auctionId).then(res => {
+                this.info = res;
+            });
         }
     }
 };

src/views/auction/Home.vue

@@ -10,22 +10,14 @@
             </div>
         </van-sticky>
 
-        <swiper pagination :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }">
-            <swiper-slide>
+        <swiper v-if="banners.length > 0" pagination :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }">
+            <swiper-slide v-for="item in banners" :key="item.id">
                 <van-image
                     width="calc(100vw - 32px)"
                     height="calc(100vw - 32px)"
-                    :src="require('../../assets/paimai.png')"
-                    fit="cover"
-                    radius="16"
-                />
-            </swiper-slide>
-            <swiper-slide>
-                <van-image
-                    width="calc(100vw - 32px)"
-                    height="calc(100vw - 32px)"
-                    :src="require('../../assets/paimai.png')"
+                    :src="getImg(item.pic)"
                     fit="cover"
+                    @click="goNext(item)"
                     radius="16"
                 />
             </swiper-slide>
@@ -40,19 +32,13 @@
             <van-tab title="藏传文玩" name="id,desc"></van-tab>
             <van-tab title="数字艺术" name="like,desc"></van-tab>
         </van-tabs>
-        <van-list
-            :immediate-check="false"
-            v-model:loading="loading"
-            :finished="finished"
-            finished-text=""
-            @load="getData"
-        >
+        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
             <template v-for="(item, index) in list" :key="index">
                 <auction-info :info="item"></auction-info>
             </template>
-            <template v-for="i in 10" :key="i">
+            <!-- <template v-for="i in 10" :key="i">
                 <auction-info></auction-info>
-            </template>
+            </template> -->
 
             <van-empty
                 :image="require('@assets/kong_png_yongyoude  (1).png')"
@@ -75,8 +61,9 @@ import SwiperCore, { Pagination, Autoplay } from 'swiper';
 SwiperCore.use([Pagination, Autoplay]);
 import list from '../../mixins/list';
 import auctionInfo from '../../components/auction/info.vue';
+import banner from '../../mixins/banner';
 export default {
-    mixins: [list],
+    mixins: [list, banner],
     components: {
         Swiper,
         SwiperSlide,
@@ -85,9 +72,33 @@ export default {
     data() {
         return {
             sort: 'id,desc',
-            url: '',
-            list: []
+            url: '/auctionActivity/all',
+            list: [],
+            banners: []
         };
+    },
+    mounted() {
+        this.getBanner();
+    },
+    methods: {
+        getBanner() {
+            return this.$http
+                .post(
+                    '/banner/all',
+                    {
+                        query: {
+                            type: 'HOME',
+                            del: false
+                        },
+                        sort: 'sort,asc;createdAt,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.banners = res.content;
+                    this.$toast.clear();
+                });
+        }
     }
 };
 </script>
@@ -135,7 +146,7 @@ export default {
         .swiper-pagination-bullet {
             width: 16px;
             height: 4px;
-            border-radius: 2px;
+            // border-radius: 2px;
             margin: 0 0;
             background-color: #fff;
             opacity: 0.5;
@@ -144,6 +155,14 @@ export default {
                 background-color: @prim;
                 opacity: 1;
             }
+            border-radius: 0;
+
+            &:first-child {
+                border-radius: 2px 0 0 2px;
+            }
+            &:last-child {
+                border-radius: 0 2px 2px 0;
+            }
         }
     }
 }
@@ -201,5 +220,6 @@ export default {
 .van-list {
     padding: 8px;
     background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 40px, #f5f5f5 100%);
+    min-height: calc(100vh - 156px);
 }
 </style>