订单

src/components/asset/assetInfo.vue

@@ -29,6 +29,12 @@
                 src="../../assets/png-jinzhanshi.png"
                 alt=""
             />
+            <img
+                v-else-if="info.status === 'AUCTIONING'"
+                class="status-img"
+                src="../../assets/png-paimaizhong.png"
+                alt=""
+            />
             <!-- <img v-if="info.consignment" class="status-img" src="../../assets/png-jishouzhong.png" alt="" />
             <div class="status" v-else-if="info.status === 'NORMAL'">
                 {{ info.publicShow ? '仅展示' : '未展示' }}

src/components/auction/deposit.vue

@@ -4,7 +4,7 @@
             <div class="collection">
                 <van-image width="80" height="80" radius="8" :src="require('../../assets/paimai.png')" fit="cover" />
                 <div class="collection-info">
-                    <div class="name">北京荣宝网络文物拍卖拍卖拍名称名称名称名称名称名称名称名称</div>
+                    <div class="name">{{ info.name }}</div>
                     <div class="time">
                         <img src="../../assets/info_icon_time.png" alt="" />
                         <span>距结束：<van-count-down :time="time" format="HH 时 mm 分 ss 秒" /></span>
@@ -15,11 +15,11 @@
             <div class="price">
                 <div class="text1">保证金</div>
                 <img src="../../assets/jiage_huang.png" alt="" />
-                <div class="text2">100</div>
+                <div class="text2">{{ info.deposit }}</div>
             </div>
             <div class="tips">若竞拍不成功,保证金将原路退回</div>
 
-            <div class="address" @click="onAdd">
+            <div v-if="!isNFT" class="address" @click="onAdd">
                 <div class="address-info">
                     <div class="text1">
                         <span>收货人</span>
@@ -37,15 +37,26 @@
                 <img src="../../assets/icon_inter.png" alt="" />
             </div>
         </div>
-        <div class="agreement">竞拍需要同意协议<span>《拍卖服务协议》</span></div>
+        <div class="agreement" @click="showRule">竞拍需要同意协议<span>《拍卖服务协议》</span></div>
         <div class="btn">
-            <van-button type="primary" block round @click="pay">同意协议并支付</van-button>
+            <van-button type="primary" block round @click="submit">同意协议并支付</van-button>
         </div>
     </van-action-sheet>
 </template>
 
 <script>
+import auction from '../../mixins/auction';
+import resolveUrl from 'resolve-url';
 export default {
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    mixins: [auction],
     data() {
         return {
             show: false,
@@ -53,6 +64,11 @@ export default {
             addressInfo: {}
         };
     },
+    computed: {
+        isNFT() {
+            return this.info.auctionType === 'NFT';
+        }
+    },
     mounted() {
         if (this.isLogin) {
             this.emitter.on('updateChoose', info => {
@@ -85,6 +101,33 @@ export default {
         },
         pay() {
             this.$router.push('/auctionOffer');
+        },
+        init() {
+            this.time = this.getTime(this.info.endTime);
+            this.show = true;
+        },
+        showRule() {
+            this.$emit('showRule');
+        },
+        submit() {
+            if (!this.isNFT && !this.addressInfo.id) {
+                this.$toast('请选择收货地址');
+                return;
+            }
+
+            let form = { userId: this.$store.state.userInfo.id, auctionId: this.info.id, type: 'DEPOSIT' };
+            if (!this.isNFT) {
+                form.addressId = this.addressInfo.id;
+            }
+
+            this.$http
+                .post('/auctionOrder/createDeposit', form)
+                .then(res => {
+                    document.location.href = resolveUrl(this.$baseUrl, '/payOrder/v2/mint/sandQuick?id=' + res.id);
+                })
+                .catch(e => {
+                    this.$toast(e.error);
+                });
         }
     }
 };

src/components/auction/info.vue

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

src/mixins/auction.js

@@ -11,6 +11,7 @@ export default {
                 { label: '未开始', value: 'NOTSTARTED' },
                 { label: '进行中', value: 'ONGOING' },
                 { label: '成交', value: 'PURCHASED' },
+                { label: '一口价成交', value: 'FIXED_PRICE_PURCHASED' },
                 { label: '流拍', value: 'PASS' },
                 { label: '完成', value: 'FINISH' }
             ],

src/mixins/auctionOrder.js

@@ -0,0 +1,32 @@
+export default {
+    data() {
+        return {
+            typeOptions: [
+                { label: '默认', value: 'DEFAULT' },
+                { label: '盲盒', value: 'BLIND_BOX' },
+                { label: '拍卖', value: 'AUCTION' },
+                { label: '展厅', value: 'SHOWROOM' }
+            ],
+            sourceOptions: [
+                { label: '官方拍卖', value: 'OFFICIAL' },
+                { label: '转让拍卖', value: 'TRANSFER' }
+            ],
+            paymentTypeOptions: [
+                { label: '保证金', value: 'deposit' },
+                { label: '成交金', value: 'purchase_price' },
+                { label: '一口价', value: 'FIXED_PRICE' }
+            ],
+            statusOptions: [
+                { label: '未支付', value: 'NOT_PAID' },
+                { label: '已支付，处理中', value: 'PROCESSING' },
+                { label: '已完成', value: 'FINISH' },
+                { label: '已取消', value: 'CANCELLED' }
+            ],
+            payMethodOptions: [
+                { label: '微信', value: 'WEIXIN' },
+                { label: '支付宝', value: 'ALIPAY' },
+                { label: '无GAS费', value: 'FREE' }
+            ]
+        };
+    }
+};

src/mixins/common.js

@@ -224,6 +224,13 @@ export default {
         },
         goWin(next) {
             window.location.href = next;
+        },
+        getNum(num = 0) {
+            if (num < 10) {
+                return '0' + num;
+            } else {
+                return num;
+            }
         }
     }
 };

src/views/auction/Detail.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="detail" :class="{ dark: isNFT }">
+    <div class="detail" :class="{ dark: isNFT, isEnd: isEnd }">
         <div class="top">
             <auction-banner :info="info"></auction-banner>
 
             <div class="price-bar">
-                <div class="price-left">
+                <div class="price-left" v-if="!isEnd">
                     <div class="text1">{{ info.startingPrice ? '起拍价' : '一口价' }}</div>
                     <div class="text2">
                         <img src="../../assets/icon_jiage_bai.png" alt="" />
@@ -12,13 +12,21 @@
                     </div>
                     <i class="font_family icon-sanjiao"></i>
                 </div>
+                <div class="price-left" v-else>
+                    <div class="text1">成交价</div>
+                    <div class="text2">
+                        <img src="../../assets/icon_jiage_bai.png" alt="" />
+                        <span>{{ info.startingPrice || info.fixedPrice || 0 }}</span>
+                    </div>
+                    <i class="font_family icon-sanjiao"></i>
+                </div>
                 <div class="price-right">
                     <span>{{ timeText }}</span>
-                    <span class="time">{{ hours }}</span>
+                    <span class="time">{{ getNum(hours) }}</span>
                     <span>小时</span>
-                    <span class="time">{{ minutes }}</span>
+                    <span class="time">{{ getNum(current.minutes || 0) }}</span>
                     <span>分</span>
-                    <span class="time">{{ seconds }}</span>
+                    <span class="time">{{ getNum(current.seconds || 0) }}</span>
                     <span>秒</span>
                 </div>
             </div>
@@ -83,28 +91,39 @@
                     <van-button disabled block round>未开始</van-button>
                 </div>
 
+                <template v-else-if="info.status === 'ONGOING'">
+                    <div class="btn-list" v-if="!info.startingPrice">
+                        <van-button type="primary" block round @click="goBuy">立即支付</van-button>
+                    </div>
+
+                    <div class="btn-list" v-else>
+                        <van-button type="primary" @click="goBuy" block plain>
+                            <div>直接购买</div>
+                            <div class="sub">¥{{ info.fixedPrice }}</div>
+                        </van-button>
+                        <van-button type="primary" block @click="goDeposit">
+                            <div>立即参拍</div>
+                            <div class="sub">（保证金 ¥{{ info.deposit }}）</div>
+                        </van-button>
+                        <!-- <van-button type="primary" block>去出价</van-button> -->
+                    </div>
+                </template>
+
                 <!-- <div class="btn-list">
                     <van-button type="primary" block round>立即支付</van-button>
                 </div> -->
-
-                <div class="btn-list" v-else>
-                    <van-button type="primary" block plain>
-                        <div>直接购买</div>
-                        <div class="sub">¥{{ info.fixedPrice }}</div>
-                    </van-button>
-                    <van-button type="primary" block>
-                        <div>立即参拍</div>
-                        <div class="sub">（保证金 ¥{{ info.deposit }}）</div>
-                    </van-button>
-                    <!-- <van-button type="primary" block>去出价</van-button> -->
-                </div>
             </div>
         </div>
 
-        <auction-deposit @changePopup="changePopup"></auction-deposit>
+        <auction-deposit
+            @showRule="$refs.rule.show = true"
+            ref="deposit"
+            :info="info"
+            @changePopup="changePopup"
+        ></auction-deposit>
 
         <auction-help ref="help" @changePopup="changePopup"></auction-help>
-        <auction-rule @changePopup="changePopup"></auction-rule>
+        <auction-rule ref="rule" @changePopup="changePopup"></auction-rule>
     </div>
 </template>
 
@@ -120,10 +139,24 @@ 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 { useCountDown, useToggle } from '@vant/use';
 export default {
     name: 'auctionDetail',
     inject: ['setKeeps'],
+    setup() {
+        const [timeDown, toggleTime] = useToggle(false);
+        const countDown = useCountDown({
+            onFinish: () => {
+                toggleTime(true);
+            }
+        });
+
+        return {
+            current: countDown.current,
+            countDown: countDown,
+            timeDown: timeDown
+        };
+    },
     components: {
         AuctionDeposit,
         AuctionHelp,
@@ -136,12 +169,14 @@ export default {
             auctionId: 0,
             info: {},
             assetInfo: {},
-            hours: 0,
-            minutes: 0,
-            seconds: 0,
             showPopup: false
         };
     },
+    watch: {
+        timeDown() {
+            this.getDetail();
+        }
+    },
     computed: {
         isNFT() {
             return this.info.auctionType === 'NFT';
@@ -154,6 +189,20 @@ export default {
             } else {
                 return '已结束';
             }
+        },
+        hours() {
+            let hours = 0;
+            if (this.current.days) {
+                hours += this.current.days * 24;
+            }
+            hours += this.current.hours || 0;
+            return hours;
+        },
+        isEnd() {
+            if (this.info.status !== 'NOTSTARTED' && this.info.status !== 'ONGOING') {
+                return true;
+            }
+            return false;
         }
     },
     mounted() {
@@ -178,18 +227,63 @@ export default {
         changePopup(flag = false) {
             this.showPopup = flag;
         },
+        startCount(time = 24 * 3600 * 1000) {
+            if (this.info.status === 'NOTSTARTED') {
+                time = new Date(this.info.startTime).getTime() - new Date().getTime();
+            } else if (this.info.status === 'ONGOING') {
+                time = new Date(this.info.endTime).getTime() - new Date().getTime();
+            }
+            this.countDown.reset(time);
+            this.countDown.start();
+        },
         getDetail() {
+            this.$toast.loading({
+                message: '加载中...',
+                forbidClick: true
+            });
             this.$http
                 .get('/auctionActivity/get/' + this.auctionId)
                 .then(res => {
                     this.info = res;
+                    this.startCount();
 
-                    return this.$http.get('/asset/get/' + res.assetId);
+                    if (res.auctionType === 'NFT') {
+                        return this.$http.get('/asset/get/' + res.assetId);
+                    } else {
+                        return Promise.reject();
+                    }
                 })
                 .then(res => {
                     console.log(res);
+                    this.$toast.clear();
                     this.assetInfo = res;
+                })
+                .catch(e => {
+                    this.$toast.clear();
+                    if (e && e.error) {
+                        this.$dialog
+                            .alert({
+                                title: '提示',
+                                message: e.error
+                            })
+                            .then(res => {
+                                this.$router.back();
+                            });
+                    }
+                });
+        },
+        goBuy() {
+            this.checkLogin().then(() => {
+                this.$router.push({
+                    name: 'auctionSubmit',
+                    query: {
+                        auctionId: this.info.id
+                    }
                 });
+            });
+        },
+        goDeposit() {
+            this.$refs.deposit.init();
         }
     }
 };
@@ -492,4 +586,19 @@ export default {
         }
     }
 }
+
+.isEnd {
+    .price-bar {
+        background: #939599;
+        .price-left .icon-sanjiao {
+            color: #f6f7fa;
+        }
+        .price-right {
+            background: #f6f7fa;
+            span {
+                color: #939599;
+            }
+        }
+    }
+}
 </style>

src/views/auction/Submit.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="submit">
-        <div class="address" v-if="!info.airDrop">
+        <van-notice-bar text="一口价支付" background="#FF7F1F" color="#fff" />
+        <div class="address" v-if="!isNFT">
             <div class="van-address-item van-contact-card" @click="onAdd">
                 <div class="van-cell van-cell--borderless">
                     <div class="van-cell__value van-cell__value--alone van-address-item__value">
@@ -17,22 +18,40 @@
             </div>
         </div>
         <div class="assets">
-            <div class="assets-title">
-                <div class="text1">{{ info.name }}</div>
-                <div class="text2" v-if="info.airDrop">商品的铸造将会销毁对应藏品，请谨慎选择</div>
-            </div>
-
-            <div class="assets-product" v-for="item in list" :key="item.id">
-                <van-image width="60" height="60" radius="6" :src="getImg(changeImgs(item.pic))" fit="cover" />
+            <div class="assets-product">
+                <van-image width="80" height="80" radius="6" :src="getImg(changeImgs(info.pic))" fit="cover" />
                 <div class="assets-info">
-                    <div class="text1">{{ item.name }}</div>
+                    <div class="text1">{{ info.name }}</div>
                     <div class="flex1"></div>
-                    <div class="text2" v-if="item.category">类型：{{ item.category }}</div>
-                    <div class="text2" v-if="item.number">编号：{{ item.number }}</div>
+
+                    <div class="text2">
+                        <div class="time">
+                            <img src="../../assets/info_icon_time.png" alt="" />
+                            <span>距结束：<van-count-down :time="time" format="HH 小时 mm 分 ss 秒" /></span>
+                        </div>
+                    </div>
+                    <!-- <div class="text2" v-if="info.category">类型：{{ info.category }}</div>
+                    <div class="text2" v-if="info.number">编号：{{ info.number }}</div> -->
                 </div>
             </div>
         </div>
 
+        <div class="text-list">
+            <div class="text-info">
+                <span class="text1">一口价</span>
+                <span class="text2">¥{{ info.fixedPrice }}</span>
+            </div>
+
+            <div class="text-info">
+                <span class="text1">GAS费用</span>
+                <span class="text2">¥{{ gas }}</span>
+            </div>
+            <div class="text-info">
+                <span class="text1">实际支付</span>
+                <span class="text2 prim">¥{{ money }}</span>
+            </div>
+        </div>
+
         <div class="pay" v-if="!$store.state.review">
             <div class="pay-item" @click="payType = item.type" v-for="(item, index) in payInfos" :key="index">
                 <img class="icon" :src="item.icon" alt="" />
@@ -43,8 +62,8 @@
 
         <div class="bottom van-safe-area-bottom" ref="bottom">
             <div class="bottom-content">
-                <span class="text">GAS费</span>
-                <span class="price"> <img src="@assets/jiage_huang.png" alt="" />{{ gas }} </span>
+                <span class="text">实际支付</span>
+                <span class="price"> <img src="@assets/jiage_huang.png" alt="" />{{ money }} </span>
                 <div class="btn">
                     <van-button
                         round
@@ -64,15 +83,16 @@
 
 <script>
 import asset from '../../mixins/asset';
-import product from '../../mixins/product';
+import imgInfo from '../../mixins/imgInfo';
 import resolveUrl from 'resolve-url';
 let inWeixin = /micromessenger/i.test(navigator.userAgent);
 let inApp = /#cordova#/i.test(navigator.userAgent);
 let inIos = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+import auctionOrder from '../../mixins/auctionOrder';
 export default {
     name: 'activitySubmit',
     inject: ['setKeeps'],
-    mixins: [asset, product],
+    mixins: [asset, imgInfo, auctionOrder],
     data() {
         return {
             addressInfo: {},
@@ -103,14 +123,30 @@ export default {
             enable_wx_lite: false,
             enable_wx_pub: false,
             assets: '',
-            activityId: 0,
+            auctionId: 0,
             orderId: 0,
             hrefUrl: '',
             timer: null,
-            info: {}
+            info: {},
+            time: '',
+            payMentType: 'FIXED_PRICE'
         };
     },
     computed: {
+        money() {
+            let money = 0;
+            if (this.info.fixedPrice) {
+                money = this.accAdd(this.info.fixedPrice, money);
+            }
+            if (this.gas) {
+                money = this.accAdd(money, this.gas);
+            }
+
+            return money;
+        },
+        isNFT() {
+            return this.info.auctionType === 'NFT';
+        },
         showAddress() {
             if (this.addressInfo.id) {
                 return {
@@ -130,14 +166,18 @@ export default {
             // console.log(id);
             this.addressInfo = info;
         });
-
-        if (this.$route.query.assets) {
-            this.assets = this.$route.query.assets;
-            this.activityId = this.$route.query.activityId;
-            this.getProduct(this.$route.query.assets.split(','));
-            this.$http.get('/mintActivity/get/' + this.activityId).then(res => {
+        this.$http.get('/sysConfig/get/gas_fee').then(res => {
+            this.gas = res.value;
+            if (window.cordova && window.cordova.platformId === 'ios' && this.$store.state.review) {
+                this.gas = 0;
+            }
+        });
+        if (this.$route.query.auctionId) {
+            this.auctionId = this.$route.query.auctionId;
+            this.$http.get('/auctionActivity/get/' + this.auctionId).then(res => {
                 this.info = res;
-                this.gas = res.gasPrice;
+                this.time = this.getTime(res.endTime);
+                // this.gas = res.gasPrice;
                 this.$http
                     .post(
                         '/userAddress/all',
@@ -198,6 +238,11 @@ export default {
         });
     },
     methods: {
+        getTime(endTime) {
+            console.log(new Date(endTime).getTime());
+            let time = new Date(endTime).getTime() - new Date().getTime();
+            return time;
+        },
         onAdd() {
             this.$router.push('/mineAddress?page=submit&chooseId=' + this.addressInfo.id);
         },
@@ -230,17 +275,8 @@ export default {
                 }
             });
         },
-        getProduct(list = [], index = 0) {
-            if (index >= list.length) {
-                return;
-            }
-            this.$http.get('/asset/get/' + list[index]).then(res => {
-                this.list.push(res);
-                this.getProduct(list, index + 1);
-            });
-        },
         createOrder() {
-            if (!this.addressInfo.id && !this.info.airDrop) {
+            if (!this.addressInfo.id && !this.isNFT) {
                 this.$toast('请选择收货地址');
                 return;
             }
@@ -250,13 +286,18 @@ export default {
             }
             this.$toast.loading('请不要离开当前页面');
 
+            let form = {
+                userId: this.$store.state.userInfo.id,
+                auctionId: this.auctionId,
+                type: this.payMentType
+            };
+
+            if (!this.isNFT) {
+                form.addressId = this.addressInfo.id;
+            }
+
             return this.$http
-                .post('/mintOrder/create', {
-                    assets: this.assets,
-                    mintActivityId: this.activityId,
-                    addressId: this.addressInfo.id,
-                    invitor: sessionStorage.getItem('invitor')
-                })
+                .post('/auctionOrder/createFixPrice', form)
                 .then(res => {
                     return Promise.resolve(res);
                 })
@@ -371,7 +412,7 @@ export default {
                             } else if (this.payType === 'H5PAY') {
                                 document.location.href = resolveUrl(
                                     this.$baseUrl,
-                                    '/payOrder/v2/mint/sandQuick?id=' + this.orderId
+                                    '/payOrder/v2/payAuctionOrder?id=' + this.orderId
                                 );
                             }
                         });
@@ -459,9 +500,10 @@ export default {
         flex-grow: 1;
         margin-left: 12px;
         .text1 {
-            font-size: 12px;
+            font-size: 14px;
             color: #000000;
             line-height: 24px;
+            font-weight: bold;
         }
 
         .text2 {
@@ -480,7 +522,7 @@ export default {
     display: flex;
     align-items: center;
     height: 48px;
-    border-bottom: 1px solid @tabBorder;
+    border-top: 1px solid @tabBorder;
     .icon {
         height: 24px;
         display: block;
@@ -558,4 +600,58 @@ export default {
         }
     }
 }
+.text-list {
+    padding: 0 16px;
+    background-color: #fff;
+}
+.text-info {
+    .flex();
+    height: 48px;
+    font-size: 14px;
+    color: #000000;
+    line-height: 24px;
+    justify-content: space-between;
+
+    .text2 {
+        font-weight: bold;
+    }
+    .prim {
+        color: @prim;
+    }
+
+    border-top: 1px solid #f5f7fa;
+}
+
+.van-notice-bar {
+    height: 28px;
+    /deep/.van-notice-bar__wrap {
+        justify-content: center;
+    }
+}
+
+.time {
+    .flex();
+    height: 22px;
+    background: #fff7f2;
+    border-radius: 4px;
+    display: inline-flex;
+    padding: 0 4px;
+    margin-bottom: 10px;
+    img {
+        width: 18px;
+        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;
+        }
+    }
+}
 </style>