Просмотр исходного кода

Merge branch 'dev' of http://git.izouma.com/xiongzhu/raex_front into dev

panhui 3 лет назад
Родитель
Сommit
f10fb1ede4
2 измененных файлов с 340 добавлено и 41 удалено
  1. 260 0
      src/components/order/BidOrderInfo.vue
  2. 80 41
      src/views/user/ShoppingCart.vue

+ 260 - 0
src/components/order/BidOrderInfo.vue

@@ -0,0 +1,260 @@
+<template>
+    <div class="orderInfo" @click="pay(info.orderStatus)">
+        <div class="orderInfo_top">
+            <div class="orderInfo_top_left">
+                {{ info.nickname }}
+            </div>
+            <div class="orderInfo_top_right">
+                {{ getLabelName(info.status, statusOfferPrice) }}
+            </div>
+        </div>
+        <div class="orderInfo_information">
+            <van-image :radius="6" width="80" height="80" :src="getImg(changeImgs(info.pic))" fit="cover" />
+            <div class="orderInfo_information_con">
+                <div class="orderInfo_information_con_name">{{ info.name }}</div>
+                <div class="orderInfo_information_con_time">剩余时长:{{ endTime }}</div>
+            </div>
+        </div>
+        <!-- <div class="order">
+            <van-image :radius="6" width="80" height="80" :src="getImg(changeImgs(info.pic))" fit="cover" />
+
+            <div class="content">
+                <div class="name van-multi-ellipsis--l2">
+                    {{ info.name }}
+                </div>
+                <div class="text" v-if="info.number">编号:{{ info.number }}</div>
+                <div class="flex1"></div>
+                <div class="price">¥{{ info.price }}</div>
+            </div>
+        </div> -->
+        <div class="total-price">
+            <div class="total-price_left">{{ info.createdAt }}</div>
+            <div class="total-price_right">
+                <div class="total-price_right_one">实际支付</div>
+                <div class="total-price_right_two">¥{{ info.price }}</div>
+            </div>
+        </div>
+        <div class="orderInfo_btn" v-if="info.status == 'ASKING'">
+            <!-- <div class="orderInfo_btn_one">23:59后可取消出价</div> -->
+            <div class="orderInfo_btn_two">不想买了</div>
+        </div>
+        <!-- 
+        <div class="btns">
+            <van-button color="@text3" @click.prevent="del" plain size="mini" round> 删除订单 </van-button>
+        </div> -->
+    </div>
+</template>
+<script>
+import order from '../../mixins/order';
+import product from '../../mixins/product';
+export default {
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            orderStatus: 'NOT_PAID'
+        };
+    },
+    // setup() {
+    //     const click = function () {
+    //         // console.log('wyt6w');
+    //     };
+
+    //     return { click };
+    // },
+    mixins: [order, product],
+    computed: {
+        endTime() {
+            let newEndTime = this.dayjs(this.info.endTime).diff(this.dayjs(), 'second');
+            newEndTime =
+                Math.floor(newEndTime / 24 / 3600) +
+                '天' +
+                this.pad(parseInt(newEndTime / 3600) % 24, 2) +
+                '时' +
+                this.pad(parseInt(newEndTime / 60) % 60, 2) +
+                '分';
+            return newEndTime;
+        }
+    },
+    methods: {
+        pad(n, width, z) {
+            z = z || '0';
+            n = n + '';
+            return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
+        },
+        pay(orderStatus) {
+            if (orderStatus == this.orderStatus) {
+                this.$router.push({
+                    path: '/domainSubmit',
+                    query: {
+                        domain: this.info.domainName,
+                        pay: '1',
+                        id: this.info.id,
+                        price: this.info.price
+                    }
+                });
+            }
+        },
+        delInit() {
+            this.$emit('delFn');
+        },
+        del() {
+            this.Dialog.confirm({
+                title: '确定删除吗?',
+                message: '删除此记录将消失'
+            }).then(() => {
+                this.$http
+                    .post('/order/hide/', {
+                        id: this.info.id
+                    })
+                    .then(() => {
+                        this.$toast.success('删除成功');
+                        setTimeout(() => {
+                            this.delInit();
+                        }, 1000);
+                    });
+            });
+            // this.$http
+            //     .post('/order/hide/', {
+            //         id: this.info.id
+            //     })
+            //     .then(() => {
+            //         this.$toast.success('删除成功');
+            //         setTimeout(() => {
+            //             this.delInit();
+            //         }, 1000);
+            //     });
+        },
+        likeProduct() {
+            if (!this.info.liked) {
+                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: true,
+                        likes: this.info.likes + 1
+                    });
+                    this.$toast.success('收藏成功');
+                });
+            } else {
+                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: false,
+                        likes: this.info.likes - 1
+                    });
+                    this.$toast.success('取消收藏');
+                });
+            }
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.orderInfo {
+    background: @bg;
+    border-radius: 12px;
+    color: @text0;
+    padding: 12px 10px;
+    margin: 16px 16px 0;
+    display: block;
+
+    .orderInfo_top {
+        display: flex;
+        justify-content: space-between;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 24px;
+        margin-bottom: 8px;
+        color: #000000;
+
+        .status {
+            color: #3ab200;
+        }
+    }
+
+    .orderInfo_information {
+        display: flex;
+        margin-bottom: 16px;
+
+        .orderInfo_information_con {
+            margin-left: 10px;
+            font-size: 14px;
+            line-height: 24px;
+
+            .orderInfo_information_con_name {
+                color: #000000;
+                font-weight: bold;
+                margin-bottom: 4px;
+            }
+
+            .orderInfo_information_con_time {
+                font-weight: 400;
+                color: #939599;
+            }
+        }
+    }
+}
+
+.total-price {
+    height: 24px;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    .total-price_left {
+        font-size: 12px;
+        font-weight: 400;
+        color: #c8c9cc;
+        line-height: 24px;
+    }
+
+    .total-price_right {
+        display: flex;
+
+        .total-price_right_one {
+            font-size: 14px;
+            font-weight: bold;
+            color: #000000;
+            line-height: 24px;
+            margin-right: 10px;
+        }
+
+        .total-price_right_two {
+            font-size: 16px;
+            font-weight: bold;
+            color: #3ab200;
+            line-height: 24px;
+        }
+    }
+}
+
+.orderInfo_btn {
+    display: flex;
+    justify-content: flex-end;
+    font-size: 14px;
+    font-weight: 400;
+    text-align: center;
+    line-height: 32px;
+
+    .orderInfo_btn_one {
+        width: 162px;
+        height: 32px;
+        background: rgba(0, 0, 0, 0.1);
+        border-radius: 16px;
+        color: #939599;
+    }
+
+    .orderInfo_btn_two {
+        width: 100px;
+        height: 32px;
+        background: #000000;
+        border-radius: 16px;
+        color: #ffffff;
+    }
+}
+</style>

+ 80 - 41
src/views/user/ShoppingCart.vue

@@ -65,13 +65,16 @@
                         @click="settle(index)"
                     >
                         <img :src="item.check ? select : unchecked" alt="" class="box-list_con_check" />
-                        <van-image
-                            width="80"
-                            height="80"
-                            :src="getImg(changeImgs(item.picFile))"
-                            fit="contain"
-                            radius="8"
-                        />
+                        <div class="cart_img">
+                            <van-image
+                                width="80"
+                                height="80"
+                                :src="getImg(changeImgs(item.picFile))"
+                                fit="contain"
+                                radius="8"
+                            />
+                            <div class="cart_img_tip" v-if="item.inPaying == true">支付中</div>
+                        </div>
                         <div v-if="item.type == 'DOMAIN'" class="box-list_con_right">
                             <div class="box-list_con_right_top">
                                 <img
@@ -278,6 +281,9 @@ export default {
             if (this.active == 'SELLOUT' && !this.showDelete) {
                 return;
             }
+            // if (this.collectionList[index].inPaying || this.collectionList[index].enabled == false) {
+            //     return;
+            // }
             this.collectionList[index].check = !this.collectionList[index].check;
             let newCollectionList = this.collectionList.filter(item => item.check == true);
             this.collectionListSelected = newCollectionList;
@@ -311,46 +317,60 @@ export default {
                 return;
             } else {
                 let newEnabled = '';
+                let newEnableds = '';
                 newEnabled = [...this.collectionListSelected].find(item => {
                     return item.enabled == false;
                 });
+                newEnableds = [...this.collectionListSelected].find(item => {
+                    return item.inPaying == true;
+                });
                 this.collectionListSelected.forEach(item => {
-                    if (newEnabled) {
+                    if (newEnableds) {
                         Dialog.confirm({
-                            title: '有藏品已售罄,无法购买!',
-                            confirmButtonText: '一键删除',
-                            cancelButtonText: '再想想',
-                            confirmButtonColor: '#FF4F50',
-                            cancelButtonColor: '#626366'
+                            title: '有未支付藏品,无法购买!',
+                            confirmButtonText: '确定',
+                            confirmButtonColor: '#FF4F50'
                         })
-                            .then(() => {
-                                this.collectionListSelected.forEach(item => {
-                                    if (item.enabled == true) {
-                                        item.check = false;
-                                        this.checkAllStatus = false;
-                                    }
-                                });
-                                this.collectionListSelected = this.collectionListSelected.filter(
-                                    item => item.enabled == false
-                                );
-                                this.totalSettlement = this.collectionListSelected.length;
-                                this.price = 0;
-                                this.del();
-                            })
+                            .then(() => {})
                             .catch(() => {});
                     } else {
-                        let cartIds = [];
-                        this.collectionListSelected.forEach(item => {
-                            cartIds.push(Number(item.collectionId));
-                        });
-                        cartIds = cartIds.join(',');
-                        this.$router.push({
-                            path: '/shoppingCartSubmit',
-                            query: {
-                                id: cartIds,
-                                priceSum: this.price
-                            }
-                        });
+                        if (newEnabled) {
+                            Dialog.confirm({
+                                title: '有藏品已售罄,无法购买!',
+                                confirmButtonText: '一键删除',
+                                cancelButtonText: '再想想',
+                                confirmButtonColor: '#FF4F50',
+                                cancelButtonColor: '#626366'
+                            })
+                                .then(() => {
+                                    this.collectionListSelected.forEach(item => {
+                                        if (item.enabled == true) {
+                                            item.check = false;
+                                            this.checkAllStatus = false;
+                                        }
+                                    });
+                                    this.collectionListSelected = this.collectionListSelected.filter(
+                                        item => item.enabled == false
+                                    );
+                                    this.totalSettlement = this.collectionListSelected.length;
+                                    this.price = 0;
+                                    this.del();
+                                })
+                                .catch(() => {});
+                        } else {
+                            let cartIds = [];
+                            this.collectionListSelected.forEach(item => {
+                                cartIds.push(Number(item.collectionId));
+                            });
+                            cartIds = cartIds.join(',');
+                            this.$router.push({
+                                path: '/shoppingCartSubmit',
+                                query: {
+                                    id: cartIds,
+                                    priceSum: this.price
+                                }
+                            });
+                        }
                     }
                 });
             }
@@ -415,8 +435,7 @@ export default {
                 };
             } else {
                 query = {
-                    ...query,
-                    enabled: true
+                    ...query
                 };
             }
             let sort = 'createdAt,desc';
@@ -498,6 +517,26 @@ export default {
         background-repeat: no-repeat;
     }
 }
+.cart_img {
+    width: 80px;
+    height: 80px;
+    position: relative;
+    .cart_img_tip {
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 12px;
+        backdrop-filter: blur(1px);
+        width: 56px;
+        height: 20px;
+        font-size: 12px;
+        text-align: center;
+        color: #ffffff;
+        line-height: 20px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
 /deep/ .van-dialog__header {
     padding-top: 24px !important;
 }