纪录

src/components/auction/info.vue

@@ -23,10 +23,10 @@
             </div>
 
             <div class="text3">
-                <span class="text3-1">当前价</span>
+                <span class="text3-1">{{ priceText }}</span>
                 <div class="price">
                     <img src="../../assets/icon_jiage_hei.png" alt="" />
-                    <span>{{ info.startingPrice || info.fixedPrice || 0 }}</span>
+                    <span>{{ showPrice }}</span>
                 </div>
                 <span class="text3-3">出价{{ info.bids }}次</span>
             </div>

src/components/auction/records.vue

@@ -0,0 +1,65 @@
+<template>
+    <van-overlay :show="show" @click="show = false">
+        <div class="wrapper" @click.stop>
+            <div class="block">
+                <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
+                    <template v-for="(item, index) in list" :key="index">
+                        <product-info v-model:info="list[index]" @update:info="init"></product-info>
+                    </template>
+                    <van-empty
+                        v-if="empty"
+                        description="什么都没有搜到哦~"
+                        :image="require('@assets/kong_png_wusousuo.png')"
+                    />
+                </van-list>
+            </div>
+        </div>
+    </van-overlay>
+</template>
+
+<script>
+import list from '../../mixins/list';
+
+export default {
+    props: {
+        auctionId: {
+            type: Number,
+            default: 0
+        }
+    },
+    mixins: [list],
+    data() {
+        return {
+            show: true,
+            url: '/auctionRecord/all'
+        };
+    },
+    methods: {
+        beforeData() {
+            return {
+                query: {
+                    auctionId: this.auctionId,
+                    type: 'BIDDER',
+                    del: false
+                },
+                sort: 'id,desc'
+            };
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.block {
+    width: 120px;
+    height: 120px;
+    background-color: #fff;
+}
+</style>

src/mixins/auction.js

@@ -41,6 +41,18 @@ export default {
                 return true;
             }
             return false;
+        },
+        priceText() {
+            if (this.info.purchasePrice) {
+                return '当前价';
+            } else if (this.info.startingPrice) {
+                return '起拍价';
+            } else {
+                return '一口价';
+            }
+        },
+        showPrice() {
+            return this.info.purchasePrice || this.info.startingPrice || this.info.fixedPrice || 0;
         }
     },
     methods: {
@@ -48,6 +60,9 @@ export default {
             console.log(new Date(endTime).getTime());
             let time = new Date(endTime).getTime() - new Date().getTime();
             return time;
+        },
+        showTime(time) {
+            return this.dayjs(time, 'YYYY-MM-DD HH:mm:ss').format('MM-DD');
         }
     }
 };

src/views/auction/Detail.vue

@@ -4,10 +4,10 @@
             <auction-banner :info="info" :assetInfo="assetInfo" @getProduct="getDetail"></auction-banner>
             <div class="price-bar" v-if="isEnd">
                 <div class="price-left">
-                    <div class="text1">成交价</div>
+                    <div class="text1">{{ priceText }}</div>
                     <div class="text2">
                         <img src="../../assets/icon_jiage_bai.png" alt="" />
-                        <span>{{ info.startingPrice || info.fixedPrice || 0 }}</span>
+                        <span>{{ showPrice }}</span>
                     </div>
                     <i class="font_family icon-sanjiao"></i>
                 </div>
@@ -18,10 +18,10 @@
             </div>
             <div class="price-bar" v-else>
                 <div class="price-left">
-                    <div class="text1">{{ info.startingPrice ? '起拍价' : '一口价' }}</div>
+                    <div class="text1">{{ priceText }}</div>
                     <div class="text2">
                         <img src="../../assets/icon_jiage_bai.png" alt="" />
-                        <span>{{ info.startingPrice || info.fixedPrice || 0 }}</span>
+                        <span>{{ showPrice }}</span>
                     </div>
                     <i class="font_family icon-sanjiao"></i>
                 </div>
@@ -45,7 +45,19 @@
             <div class="card-title">
                 <img src="../../assets/icon-paimaijilu-bai.png" v-if="isNFT" alt="" />
                 <img src="../../assets/icon-paimaijilu.png" alt="" v-else />
-                <span>拍卖纪录</span>
+                <span class="flex1">拍卖纪录</span>
+                <div class="card-title-r">
+                    <span>共{{ recordNum }}条</span>
+                    <img src="../../assets/icon_inter1.png" alt="" />
+                </div>
+            </div>
+            <div class="card-content">
+                <div class="record-item" v-for="(item, index) in records" :key="index">
+                    <span>{{ item.user }}</span>
+                    <span>{{ index === 0 ? '领先' : '出局' }}</span>
+                    <span>¥{{ item.bidderPrice || 0 }}</span>
+                    <span>{{ item.createdAt }}</span>
+                </div>
             </div>
         </div>
         <div class="card">
@@ -140,6 +152,7 @@
 
         <auction-help ref="help" @changePopup="changePopup"></auction-help>
         <auction-rule ref="rule" @changePopup="changePopup"></auction-rule>
+        <auction-records :auctionId="auctionId"></auction-records>
     </div>
 </template>
 
@@ -155,6 +168,7 @@ import AuctionHelp from '../../components/auction/help.vue';
 import AuctionRule from '../../components/auction/rule.vue';
 import AuctionBanner from '../../components/auction/banner.vue';
 import AuctionAsset from '../../components/auction/asset.vue';
+import AuctionRecords from '../../components/auction/records.vue';
 import { useCountDown, useToggle } from '@vant/use';
 import auction from '../../mixins/auction';
 export default {
@@ -180,7 +194,8 @@ export default {
         AuctionHelp,
         AuctionRule,
         AuctionBanner,
-        AuctionAsset
+        AuctionAsset,
+        AuctionRecords
     },
     data() {
         return {
@@ -189,7 +204,9 @@ export default {
             assetInfo: {},
             showPopup: false,
             time: '',
-            recordInfo: {}
+            recordInfo: {},
+            records: [],
+            recordNum: 0
         };
     },
     watch: {
@@ -246,6 +263,26 @@ export default {
             this.$http.get('/auctionRecord/hasPayDeposit?auctionId=' + this.auctionId).then(res => {
                 this.recordInfo = res;
             });
+
+            this.$http
+                .post(
+                    '/auctionRecord/all',
+                    {
+                        query: {
+                            auctionId: this.auctionId,
+                            type: 'BIDDER',
+                            del: false
+                        },
+                        size: 2,
+                        page: 0,
+                        sort: 'id,desc'
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.records = res.content;
+                    this.recordNum = res.totalPages;
+                });
         },
         getDetail() {
             this.$toast.loading({
@@ -463,6 +500,21 @@ export default {
             line-height: 24px;
             margin-left: 10px;
         }
+        .flex1 {
+            flex-grow: 1;
+        }
+        .card-title-r {
+            .flex();
+            span {
+                font-size: 12px;
+                color: #939599;
+                line-height: 17px;
+            }
+            img {
+                width: 24px;
+                height: 24px;
+            }
+        }
     }
 
     .card-content {
@@ -556,6 +608,8 @@ export default {
                 font-weight: normal;
                 transform: scale(0.83);
             }
+            outline: none;
+            border-radius: 0;
         }
         border-radius: 100px;
         overflow: hidden;
@@ -573,6 +627,36 @@ export default {
     }
 }
 
+.record-item {
+    .flex();
+    font-size: 12px;
+    color: #939599;
+    line-height: 17px;
+    margin-top: 10px;
+
+    span {
+        &:first-child {
+            width: 20%;
+            overflow: hidden; //溢出隐藏
+            white-space: nowrap; //禁止换行
+            text-overflow: ellipsis;
+            display: inline-block;
+        }
+
+        &:nth-child(3) {
+            flex-grow: 1;
+        }
+    }
+
+    span + span {
+        margin-left: 18px;
+    }
+
+    &:first-child {
+        color: @prim;
+    }
+}
+
 .dark {
     background-color: #0f0f0f;
     .fixed-list {

src/views/auction/Offer.vue

@@ -32,7 +32,7 @@
                         <span>{{ item.user }}</span>
                         <span>{{ item.createdAt }}</span>
                         <span>{{ index === 0 ? '领先' : '出局' }}</span>
-                        <span>¥{{ info.bidderPrice || 0 }}</span>
+                        <span>¥{{ item.bidderPrice || 0 }}</span>
                     </div>
                 </div>
             </div>
@@ -54,10 +54,10 @@ export default {
     },
     computed: {
         min() {
-            return (this.info.startingPrice || 0) + (this.info.increment || 0);
+            return (this.info.purchasePrice || this.info.startingPrice || 0) + (this.info.increment || 0);
         },
         defValue() {
-            return (this.info.startingPrice || 0) + (this.info.increment || 0);
+            return this.min;
         }
     },
     components: {
@@ -104,8 +104,9 @@ export default {
                     '/auctionRecord/all',
                     {
                         query: {
-                            auctionId: this.auctionId
-                            // type: 'BIDDER'
+                            auctionId: this.auctionId,
+                            type: 'BIDDER',
+                            del: false
                         },
                         size: 3,
                         page: 0,
@@ -121,10 +122,27 @@ export default {
             });
         },
         submit() {
-            this.$http.post('/auctionRecord/created', {
-                auctionId: this.auctionId,
-                amount: this.value
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
             });
+            this.$http
+                .post('/auctionRecord/create', {
+                    auctionId: this.auctionId,
+                    amount: this.value
+                })
+                .then(res => {
+                    this.$toast.success('出价成功');
+                    setTimeout(() => {
+                        history.back();
+                    }, 1000);
+                })
+                .catch(e => {
+                    this.$toast.clear();
+                    if (e && e.error) {
+                        this.$toast(e.error);
+                    }
+                });
         }
     }
 };