送礼人列表页

zhiyangdu
1 parent feb4fc70
Showing 2 changed files with 153 additions and 11 deletions
src/components/giftGivingItem/giftGivingItem.less
src/components/giftGivingItem/giftGivingItem.vue
@@ -11,7 +11,7 @@
         justify-content: space-between;
         position: relative;
         padding-bottom: 22px;
-        border-bottom: solid 1px rgba(247, 247, 248, 1);
+        // border-bottom: solid 1px rgba(247, 247, 248, 1);
         .name {
             height: 50px;
             font-size: 28px;
@@ -44,14 +44,76 @@
             line-height: 40px;
         }
     }
+    .shop_info {
+        display: flex;
+        height: 50px;
+        margin-top: 30px;
+        position: relative;
+        img {
+            width: 40px;
+            height: 40px;
+            border-radius: 40px;
+        }
+        .name {
+            height: 40px;
+            font-size: 28px;
+            font-weight: 400;
+            color: rgba(34, 40, 51, 1);
+            line-height: 40px;
+            margin-left: 30px;
+        }
+        .oredr_link_box {
+            position: absolute;
+            right: -60px;
+            top: 0;
+            display: flex;
+            width: 158px;
+            height: 50px;
+            background: rgba(208, 2, 27, 1);
+            border-radius: 100px 0px 0px 100px;
+            font-size: 26px;
+            font-weight: 500;
+            color: rgba(255, 255, 255, 1);
+            line-height: 52px;
+            z-index: 1000;
+            div {
+                margin-left: 18px;
+            }
+            .icon {
+                width: 20px;
+                height: 20px;
+                margin: 13px 0;
+            }
+        }
+    }
+    .statu_list {
+        width: auto;
+        height: auto;
+        margin-top: 20px;
+        display: flex;
+        flex-wrap:wrap;
+        align-content: flex-start;
+        .btn {
+            min-width: 78px;
+            height: 52px;
+            color: #999999;
+            background-color: #f9f9f9;
+            border-radius: 8px;
+            padding: 0 20px;
+            font-size: 26px;
+            line-height: 52px;
+            text-align: center;
+            margin: 10px;
+        }
+    }
     .item_info {
         display: flex;
         margin-top: 30px;
         padding-bottom: 30px;
         border-bottom: solid 1px rgba(247, 247, 248, 1);
         img {
-            width: 159px;
-            height: 160px;
+            width: 200px;
+            height: 200px;
             border-radius: 10px;
         }
         .box {
@@ -62,6 +124,7 @@
                 font-size: 28px;
                 font-weight: 400;
                 color: rgba(51, 51, 51, 1);
+                height: 80px;
                 max-height: 80px;
                 /*! autoprefixer: off */
                 -webkit-box-orient: vertical;
@@ -71,11 +134,20 @@
                 overflow: hidden;
                 white-space: normal;
             }
+            .num_desc {
+                height: 33px;
+                font-size: 24px;
+                font-weight: 400;
+                color: rgba(153, 153, 153, 1);
+                line-height: 33px;
+                margin-top: 4px;
+            }
             .pirce {
                 width: 100%;
-                position: absolute;
-                left: 0;
-                bottom: 0;
+                // position: absolute;
+                // left: 0;
+                // bottom: 0;
+                margin-top: 34px;
                 display: flex;
                 justify-content: space-between;
                 .title {
@@ -103,6 +175,39 @@
             }
         }
     }
+    .fold_box {
+        width: 630px;
+        height: 80px;
+        line-height: 80px;
+        background: rgba(249, 249, 249, 1);
+        border-radius: 5px;
+        font-size: 24px;
+        color: #999;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        .fold {
+            display: flex;
+            .triangle_top {
+                width: 0px;
+                height: 0px;
+                border-width: 10px;
+                border-style: solid;
+                margin-top: 25px;
+                margin-left: 14px;
+                border-color: #fff #fff #999 #fff;
+            }
+            .triangle_bottom {
+                width: 0px;
+                height: 0px;
+                border-width: 10px;
+                border-style: solid;
+                margin-top: 35px;
+                margin-left: 14px;
+                border-color: #999 #fff #fff #fff;
+            }
+        }
+    }
     .text_tip {
         height: 40px;
         font-size: 28px;
@@ -29,6 +29,27 @@
                         <span v-else-if="item && item.status == 6">退款中</span>
                     </div>
                 </div>
+                <!-- 店铺信息 -->
+                <div class="shop_info">
+                    <img
+                        v-on:click.stop="onUserInfo(item)"
+                        src="static/img/1.png"/>
+                    <div class="name">
+                        店铺名字
+                    </div>
+                    <!-- 商品订单按钮 -->
+                <div
+                    @click="OrderLink"
+                    v-if="index == 0"
+                    class="oredr_link_box">
+                    <div>商品订单</div>
+                    <van-icon class="icon" name="arrow" />
+                </div>
+                </div>
+                 <!-- 订单状态集合 -->
+                <div class="statu_list">
+                    <div class="btn">可分享</div>
+                </div>
                 <!--商品信息-->
                 <div class="item_info">
                     <img
@@ -38,10 +59,11 @@
                     <div class="box">
                         <div
                             v-if="item && item.goods && item.goods.title"
-                            class="name"
-                        >
+                            class="name">
                             {{ item.goods.title }}
                         </div>
+                         <!-- 每人多少件 -->
+                        <div class="num_desc">每人 1 件</div>
                         <div class="pirce">
                             <div
                                 v-if="item && item.goods && item.goods.price"
@@ -58,8 +80,14 @@
                         </div>
                     </div>
                 </div>
+                <!-- 展开和折叠按钮 -->
+                <div class="fold_box" @click="onLoginMore">
+                    <div class="fold">
+                    共五件 <div :class="[triangle?'triangle_top':'triangle_bottom']"> </div> 
+                    </div>
+                </div>
                 <!-- 显示文字 -->
-                <div class="text_tip">
+                <div v-show="item.status != 3" class="text_tip">
                     <span v-show="item && item.total_num && item.status ==1"
                         >可分享<span>{{ item.total_num }}</span
                         >人<span v-show="item && item.give_num || item.no_address_num|| item.refund_num">,</span></span
@@ -77,7 +105,7 @@
                     >
                 </div>
                 <!-- 按钮 -->
-                <div  class="btn_list">
+                <div v-show="item.status != 3"  class="btn_list">
                     <div v-show="item.status == 0" class="box">
                         <div
                             v-on:click.stop="onCancelPayment(item)"
@@ -118,7 +146,7 @@
 export default {
     name: "giftGivingItem",
     data() {
-        return {};
+        return {triangle:false};
     },
     props: ["giftGivingItem", "isData"],
     created() {},
@@ -138,6 +166,15 @@ export default {
         // 分享礼物
         giftToShare(item){
             this.$emit("giftToShare", item);
+        },
+         // 跳转到商品订单
+        OrderLink() {
+            this.$emit("OrderLink");
+        },
+        // 展开加载更多
+        onLoginMore(){
+            this.triangle = !this.triangle;
+
         }
     }
 };