竞价拍卖

.env.development

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

src/components/auction/asset.vue

@@ -1,6 +1,67 @@
 <template>
     <div class="goods">
         <van-collapse v-model="activeNames">
+            <van-collapse-item name="star" class="goods-info">
+                <template #title>
+                    <div class="page-title"><img src="@assets/icon-quanyi.png" alt="" />权益星级</div>
+                </template>
+                <div class="quanyi">
+                    <div class="text">
+                        每个拍品叫价次数越多，权益星级越高，每成功10次叫价，解锁一个星级，满星为3星，具体星级对应权益请查看拍品详情。
+                    </div>
+                    <div class="stars">
+                        <div class="star">
+                            <img src="@assets/star-no.png" alt="" />
+                            <span>出价10次</span>
+                        </div>
+                        <div class="star">
+                            <img src="@assets/star-no.png" alt="" />
+                            <span>出价20次</span>
+                        </div>
+                        <div class="star">
+                            <img src="@assets/star-no.png" alt="" />
+                            <span>出价30次</span>
+                        </div>
+                    </div>
+                </div>
+            </van-collapse-item>
+
+            <van-collapse-item name="info" class="goods-info">
+                <template #title>
+                    <div class="page-title"><img src="@assets/icon-paipingxinxi-bai.png" alt="" />拍品信息</div>
+                </template>
+
+                <div class="card-content">
+                    <div class="card-info">
+                        <span class="text1">拍卖类型</span>
+                        <span class="text2">增价拍</span>
+                        <div class="card-right">
+                            <span class="text1">起拍价</span>
+                            <span class="text2">¥{{ auctionInfo.price }}</span>
+                        </div>
+                    </div>
+                    <div class="card-info">
+                        <span class="text1">加价幅度</span>
+                        <span class="text2">当前价的{{ auctionInfo.increasePer }}%</span>
+                        <div class="card-right">
+                            <span class="text1">预估价</span>
+                            <span class="text2">¥{{ auctionInfo.nextPrice }}</span>
+                        </div>
+                    </div>
+                    <div class="card-info">
+                        <span class="text1">竞价手续费</span>
+                        <span class="text2">(当前价-起拍价)+叫价*3%</span>
+                    </div>
+                    <div class="card-info">
+                        <span class="text1">出局补偿</span>
+                        <span class="text2">本日叫价-起拍价</span>
+                    </div>
+                    <div class="card-info">
+                        <span class="text1">竞价周期</span>
+                        <span class="text2">24小时</span>
+                    </div>
+                </div>
+            </van-collapse-item>
             <van-collapse-item name="1" class="goods-info">
                 <template #title>
                     <div class="page-title">
@@ -181,6 +242,12 @@ export default {
             default: () => {
                 return {};
             }
+        },
+        auctionInfo: {
+            type: Object,
+            default: () => {
+                return {};
+            }
         }
     },
     components: {
@@ -198,7 +265,7 @@ export default {
             init: [],
             init2: null,
             list: [],
-            activeNames: ['1', '2', '3', '4', '5', '6', 'hashCode', 'hchashCode', '8'],
+            activeNames: ['star', 'info', '1', '2', '3', '4', '5', '6', 'hashCode', 'hchashCode', '8'],
             inWeixin,
             limit: {},
             couponList: [],
@@ -224,6 +291,9 @@ export default {
             return list.map(item => {
                 return this.changeImgs(item.pic);
             });
+        },
+        estPrice() {
+            return this.accMul(this.auctionInfo.currentPrice || this.auctionInfo.price || 0, 1.06);
         }
     },
     methods: {
@@ -1184,4 +1254,78 @@ export default {
         width: 130px;
     }
 }
+.quanyi {
+    .text {
+        font-size: 12px;
+        color: #8c8e93;
+        line-height: 17px;
+    }
+
+    .stars {
+        .flex();
+        margin-top: 14px;
+        .star {
+            .flex();
+            padding: 4px 10px;
+            background: #27272b;
+            border-radius: 8px;
+            flex-grow: 1;
+            img {
+                width: 28px;
+                height: 28px;
+            }
+            span {
+                font-size: 10px;
+                color: #939599;
+                line-height: 10px;
+                margin-left: 6px;
+            }
+        }
+        .star + .star {
+            margin-left: 15px;
+        }
+    }
+}
+
+.card-content {
+    padding: 0 0 16px;
+
+    .card-info {
+        .flex();
+        .text1 {
+            font-size: 12px;
+            color: #939599;
+            line-height: 17px;
+            display: inline-block;
+            min-width: 60px;
+        }
+        .text2 {
+            font-size: 12px;
+            color: #fff;
+            line-height: 17px;
+            margin-left: 10px;
+            flex-grow: 1;
+        }
+
+        .card-right {
+            .flex();
+            width: 100px;
+            .text1 {
+                min-width: 36px;
+            }
+        }
+    }
+
+    .card-info + .card-info {
+        margin-top: 6px;
+    }
+
+    /deep/&.card-detail {
+        img {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+    }
+}
 </style>

src/components/auction/deposit.vue

@@ -1,43 +1,17 @@
 <template>
-    <van-action-sheet v-model:show="show" title="参拍详情">
+    <van-action-sheet v-model:show="show" title="出价订单">
         <div class="content">
-            <div class="collection">
-                <van-image width="80" height="80" radius="8" :src="getImg(changeImgs(info.pic, 600))" fit="cover" />
-                <div class="collection-info">
-                    <div class="name">{{ info.name }}</div>
-                    <div class="time">
-                        <img src="../../assets/info_icon_time.png" alt="" />
-                        <span>{{ timeText }}：<van-count-down :time="time" format="HH 时 mm 分 ss 秒" /></span>
-                    </div>
-                </div>
-            </div>
-
             <div class="price">
-                <div class="text1">保证金</div>
-                <img src="../../assets/jiage_huang.png" alt="" />
-                <div class="text2">{{ info.deposit }}</div>
+                <div class="text1">手续费(元)</div>
+                <div class="text2">{{ info.commission }}</div>
             </div>
-            <div class="tips">若竞拍不成功,保证金将原路退回</div>
-
-            <div v-if="!isNFT" class="address" @click="onAdd">
-                <div class="address-info" v-if="addressInfo.id">
-                    <div class="text1">
-                        <span>收货人</span>
-                        <span>{{ addressInfo.name }} {{ addressInfo.phone }}</span>
-                    </div>
-
-                    <div class="text1">
-                        <span>收货地址</span>
-                        <span
-                            >{{ addressInfo.provinceName }} {{ addressInfo.cityName }} {{ addressInfo.districtName }}
-                            {{ addressInfo.address }}</span
-                        >
-                    </div>
-                </div>
-                <span class="address-info address-info-text" v-else> 选择收货地址 </span>
-                <img src="../../assets/icon_inter.png" alt="" />
+            <div class="tips">
+                <span class="text1"> 若叫价失败，将原路退给您出局补偿。 </span>
+                <span class="text2">¥{{ info.earning }}</span>
             </div>
-
+            <!-- <van-cell-group :border="false">
+                <van-cell title="若叫价失败，将原路退给您出局补偿。" :value="`¥${info.earning}`" :border="false" />
+            </van-cell-group> -->
             <div class="pay">
                 <!-- <div class="pay-item" @click="payType = item.type" v-for="(item, index) in payInfos" :key="index">
                     <img class="icon" :src="item.icon" alt="" />
@@ -688,27 +662,23 @@ export default {
 }
 
 .price {
-    .flex();
-    align-items: flex-end;
-    padding-top: 16px;
+    .flex-col();
+    align-items: center;
+    padding: 18px 0;
+    background: #f5f7fa;
+    border-radius: 4px;
     .text1 {
         font-size: 14px;
-        color: #000000;
+        color: #939599;
         line-height: 14px;
-        font-weight: bold;
-    }
-
-    img {
-        width: 10px;
-        height: 11px;
-        margin-left: 10px;
     }
     .text2 {
         font-size: 32px;
         font-family: OSP-DIN, OSP;
         font-weight: normal;
-        color: #3ab200;
-        line-height: 20px;
+        color: #000;
+        line-height: 36px;
+        margin-top: 7px;
     }
 }
 .tips {

src/components/auction/info.vue

@@ -16,7 +16,7 @@
             </div>
             <div class="text2">
                 <div class="time" v-if="!isEnd">
-                    <img src="../../assets/info_icon_time.png" alt="" />
+                    <img v-if="!isDark" src="@assets/info_icon_time.png" alt="" />
                     <span
                         >{{ timeText }}：<van-count-down @finish="finish" :time="time" format="HH 小时 mm 分 ss 秒"
                     /></span>
@@ -29,12 +29,13 @@
             </div>
 
             <div class="text3">
-                <span class="text3-1">{{ priceText }}</span>
+                <span class="text3-1">当前价</span>
                 <div class="price">
-                    <img src="../../assets/icon_jiage_hei.png" alt="" />
+                    <img v-if="isDark" src="../../assets/icon_jiage_bai.png" alt="" />
+                    <img v-else src="../../assets/icon_jiage_hei.png" alt="" />
                     <span>{{ showPrice }}</span>
                 </div>
-                <span class="text3-3">出价{{ info.bids }}次</span>
+                <span class="text3-3">预估价 ¥{{ info.nextPrice }}</span>
             </div>
         </div>
     </router-link>
@@ -79,7 +80,7 @@ export default {
             if (this.info.status === 'NOTSTARTED') {
                 time = this.getTime(this.info.startTime);
             } else {
-                time = this.getTime(this.info.endTime);
+                time = this.getTime(this.info.currentEndTime);
             }
             if (time > 0) {
                 this.time = time;
@@ -136,10 +137,10 @@ export default {
             .time {
                 .flex();
                 height: 22px;
-                background: #fff7f2;
                 border-radius: 4px;
                 display: inline-flex;
                 padding: 0 4px;
+                background-color: #fff7f2;
                 img {
                     width: 18px;
                     height: 18px;
@@ -208,6 +209,17 @@ export default {
     &.isDark {
         background-color: #000000;
         color: #fff;
+
+        .time {
+            span {
+                background-color: transparent;
+                border: 1px solid #ffe196;
+                color: #ffe196;
+                .van-count-down {
+                    color: #ffe196;
+                }
+            }
+        }
     }
 }
 </style>

src/mixins/auction.js

@@ -29,11 +29,12 @@ export default {
         timeText() {
             if (this.info.status === 'NOTSTARTED') {
                 return '距开始';
-            } else if (this.info.status === 'ONGOING') {
+            }
+            if (this.info.status === 'ONGOING') {
                 return '距结束';
-            } else {
-                return '已结束';
             }
+
+            return '已结束';
         },
         //是否结束
         isEnd() {
@@ -58,13 +59,16 @@ export default {
             }
         },
         showPrice() {
-            return this.info.purchasePrice || this.info.startingPrice || this.info.fixedPrice || 0;
+            return this.info.currentPrice || this.info.price || 0;
         },
         isLeader() {
             return this.isLogin && this.info.purchaserId === this.$store.state.userInfo.id;
         },
         isbidder() {
             return this.isLeader && this.info.status === 'PURCHASED';
+        },
+        estPrice() {
+            return this.accMul(this.showPrice, 1.06);
         }
     },
     methods: {

src/router/index.js

@@ -401,7 +401,8 @@ const routes = [
         component: () => import('../views/auction/Detail.vue'),
         meta: {
             pageType: Page.Every,
-            title: '拍卖'
+            title: '拍卖',
+            tabColor: '#0f0f0f'
         }
     },
     {

src/views/auction/Detail.vue

@@ -2,17 +2,17 @@
     <van-pull-refresh
         success-text="加载成功"
         success-duration="1000"
-        class="detail"
-        :class="{ dark: isNFT, isEnd: isEnd }"
+        class="detail dark"
+        :class="{ isEnd: isEnd }"
         v-model="isLoading"
         @refresh="onRefresh"
-        :pageType="isNFT ? 'dark' : 'light'"
+        pageType="dark"
     >
         <div class="top">
             <auction-banner :info="info" :assetInfo="assetInfo" @getProduct="getDetail"></auction-banner>
             <div class="price-bar" v-if="isEnd">
                 <div class="price-left">
-                    <div class="text1">{{ priceText }}</div>
+                    <div class="text1">当前价</div>
                     <div class="text2">
                         <img src="../../assets/icon_jiage_bai.png" alt="" />
                         <span>{{ showPrice }}</span>
@@ -26,7 +26,7 @@
             </div>
             <div class="price-bar" v-else>
                 <div class="price-left">
-                    <div class="text1">{{ priceText }}</div>
+                    <div class="text1">当前价</div>
                     <div class="text2">
                         <img src="../../assets/icon_jiage_bai.png" alt="" />
                         <span>{{ showPrice }}</span>
@@ -44,15 +44,11 @@
                 </div>
             </div>
             <div class="title">{{ info.name }}</div>
-            <div class="title-sub">
-                <span class="text1">出价{{ info.bids }}次</span>
-            </div>
         </div>
 
         <div class="card" v-if="recordNum > 0">
             <div class="card-title" @click="showRecord">
-                <img src="../../assets/icon-paimaijilu-bai.png" v-if="isNFT" alt="" />
-                <img src="../../assets/icon-paimaijilu.png" alt="" v-else />
+                <img src="../../assets/icon-paimaijilu-bai.png" alt="" />
                 <span class="flex1">拍卖纪录</span>
                 <div class="card-title-r">
                     <span>共{{ recordNum }}条</span>
@@ -68,49 +64,7 @@
                 </div>
             </div>
         </div>
-        <div class="card">
-            <div class="card-title">
-                <img src="../../assets/icon-paipingxinxi-bai.png" v-if="isNFT" alt="" />
-                <img src="../../assets/auction1.png" alt="" v-else />
-                <span>拍品信息</span>
-            </div>
-            <div class="card-content">
-                <div class="card-info">
-                    <span class="text1">增价拍</span>
-                    <span class="text2">{{ info.startingPrice ? '竞拍价' : '一口价' }}</span>
-                    <div class="card-right" v-if="info.startingPrice">
-                        <span class="text1">起拍价</span>
-                        <span class="text2">¥{{ info.startingPrice }}</span>
-                    </div>
-                </div>
-                <div class="card-info" v-if="info.startingPrice">
-                    <span class="text1">加价幅度</span>
-                    <span class="text2">¥{{ info.increment }}</span>
-                    <div class="card-right">
-                        <span class="text1">保证金</span>
-                        <span class="text2">¥{{ info.deposit }}</span>
-                    </div>
-                </div>
-                <div class="card-info">
-                    <span class="text1">开拍时间</span>
-                    <span class="text2">{{ info.startTime }}</span>
-                </div>
-                <div class="card-info">
-                    <span class="text1">结束时间</span>
-                    <span class="text2">{{ info.endTime }}</span>
-                </div>
-            </div>
-        </div>
-        <auction-asset v-if="isNFT" :info="assetInfo"></auction-asset>
-        <div class="card" v-else>
-            <div class="card-title">
-                <img src="../../assets/icon-paipingxinxi-bai.png" v-if="isNFT" alt="" />
-                <img src="../../assets/auction2.png" v-else alt="" />
-                <span>拍品描述</span>
-            </div>
-            <div v-if="info.detail" class="card-content card-detail" v-html="info.detail"></div>
-        </div>
-
+        <auction-asset :info="assetInfo" :auctionInfo="info"></auction-asset>
         <div class="btn-bottom van-safe-area-bottom" :class="{ showPopup: showPopup }">
             <div class="fixed-list">
                 <div class="help" @click="showHelp">
@@ -151,21 +105,10 @@
                 </div>
 
                 <template v-else-if="info.status === 'ONGOING' || info.status === 'FIXED_PRICE_PURCHASED'">
-                    <div class="btn-list" v-if="!info.startingPrice">
-                        <van-button
-                            type="primary"
-                            :disabled="info.status === 'FIXED_PRICE_PURCHASED'"
-                            block
-                            round
-                            @click="goBuy"
-                            >立即支付</van-button
-                        >
-                    </div>
-
-                    <div class="btn-list" v-else>
+                    <div class="btn-list">
                         <van-button type="primary" @click="goBuy" block plain>
-                            <div>直接购买</div>
-                            <div class="sub">¥{{ info.fixedPrice }}</div>
+                            <div>一口价购买</div>
+                            <div class="sub">获得权益</div>
                         </van-button>
                         <van-button type="primary" block v-if="isLeader">
                             <div>竞价中</div>
@@ -180,8 +123,8 @@
                             >去出价</van-button
                         >
                         <van-button type="primary" v-else block @click="goDeposit">
-                            <div>立即参拍</div>
-                            <div class="sub">（保证金 ¥{{ info.deposit }}）</div>
+                            <div>立即竞价</div>
+                            <div class="sub">解锁权益</div>
                             <!-- <div class="sub">
                                 (请在
                                 <van-count-down
@@ -325,7 +268,7 @@ export default {
             if (this.info.status === 'NOTSTARTED') {
                 time = this.dayjs(this.info.startTime).diff(this.dayjs());
             } else if (this.info.status === 'ONGOING') {
-                time = this.dayjs(this.info.endTime).diff(this.dayjs());
+                time = this.dayjs(this.info.currentEndTime).diff(this.dayjs());
             }
             if (!this.isEnd) {
                 if (time > 0) {
@@ -337,13 +280,13 @@ export default {
             }
         },
         getRecord() {
-            this.$http.get('/auctionRecord/hasPayDeposit?auctionId=' + this.auctionId).then(res => {
+            this.$http.get('/tradeAuctionRecord/hasPayDeposit?auctionId=' + this.auctionId).then(res => {
                 this.recordInfo = res;
             });
 
             this.$http
                 .post(
-                    '/auctionRecord/all',
+                    '/tradeAuctionRecord/all',
                     {
                         query: {
                             auctionId: this.auctionId,
@@ -367,7 +310,7 @@ export default {
                 forbidClick: true
             });
             return this.$http
-                .get('/auctionActivity/get/' + this.auctionId)
+                .get('/tradeAuction/get/' + this.auctionId)
                 .then(res => {
                     // res.model3d = {
                     //     name: '99.FBX',
@@ -381,9 +324,6 @@ export default {
                     this.getRecord();
                     //改变头部颜色
                     this.$nextTick(() => {
-                        if (this.isNFT) {
-                            this.changeTab('#0f0f0f');
-                        }
                         if (this.isbidder) {
                             this.$http.get('/sysConfig/get/auction_cancel_time').then(res => {
                                 let date1 = this.dayjs(this.info.endTime).add(Number(res.value), 'minute');

src/views/auction/Home.vue

@@ -37,8 +37,7 @@
         </van-tabs>
         <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
             <template v-for="(item, index) in list" :key="index">
-                <auction-info-large v-model:info="list[index]" v-if="auctionType === 'OFFICIAL'"></auction-info-large>
-                <auction-info isDark v-model:info="list[index]" v-else></auction-info>
+                <auction-info isDark v-model:info="list[index]"></auction-info>
             </template>
             <!-- <template v-for="i in 10" :key="i">
                 <auction-info></auction-info>
@@ -65,7 +64,6 @@ import SwiperCore, { Pagination, Autoplay } from 'swiper';
 SwiperCore.use([Pagination, Autoplay]);
 import list from '../../mixins/list';
 import auctionInfo from '../../components/auction/info.vue';
-import auctionInfoLarge from '../../components/auction/infoLarge.vue';
 import banner from '../../mixins/banner';
 export default {
     name: 'auctionHome',
@@ -74,13 +72,12 @@ export default {
     components: {
         Swiper,
         SwiperSlide,
-        auctionInfo,
-        auctionInfoLarge
+        auctionInfo
     },
     data() {
         return {
             auctionType: 'OFFICIAL',
-            url: '/auctionActivity/all',
+            url: '/tradeAuction/all',
             list: [],
             banners: [],
             scrollTop: 0

src/views/auction/Offer.vue

@@ -10,9 +10,6 @@
             <div class="panel">
                 <div class="panel-title">你的出价金额(元)</div>
                 <van-stepper
-                    :step="info.increment"
-                    :min="min"
-                    :max="max"
                     v-model="value"
                     theme="round"
                     button-size="22"
@@ -21,11 +18,12 @@
                     :show-plus="false"
                     :show-minus="false"
                     :default-value="defValue"
+                    disable-input
                 />
-                <div class="panel-tips">加价幅度¥{{ info.increment }}</div>
+                <div class="panel-tips">加价幅度为当前价的{{ info.increasePer }}%</div>
                 <van-cell-group class="panel-info">
-                    <van-cell title="竞价手续费" value="¥31.80" />
-                    <van-cell title="出局补偿" value="¥60" :border="false">
+                    <van-cell title="竞价手续费" :value="`¥${info.commission}`" />
+                    <van-cell title="出局补偿" :value="`¥${info.earning}`" :border="false">
                         <template #label>
                             <div class="panel-label">
                                 <img src="@assets/icon_xiangqingye_tips.png" alt="" />
@@ -77,11 +75,8 @@ export default {
         };
     },
     computed: {
-        min() {
-            return (this.info.purchasePrice || this.info.startingPrice || 0) + (this.info.increment || 0);
-        },
         defValue() {
-            return this.min;
+            return this.info.nextPrice;
         }
     },
     components: {
@@ -102,9 +97,10 @@ export default {
                 forbidClick: true
             });
             this.$http
-                .get('/auctionActivity/get/' + this.auctionId)
+                .get('/tradeAuction/get/' + this.auctionId)
                 .then(res => {
                     this.info = res;
+                    this.value = res.nextPrice;
                     // this.startCount();
                     this.$nextTick(() => {
                         this.$refs.info.setTime();
@@ -128,7 +124,7 @@ export default {
                 });
         },
         getRecord() {
-            this.$http.get('/auctionRecord/hasPayDeposit?auctionId=' + this.auctionId).then(res => {
+            this.$http.get('/tradeAuctionOrder/hasPayDeposit?auctionId=' + this.auctionId).then(res => {
                 this.recordInfo = res;
             });
         },