w-front-end / select_good · Commits

Commit 11099cf2e80fe8542daf8810d6f366dec6fd1641

Authored by zhiyangdu
1 parent 44aec46d

收礼组件改版

Inline Side-by-side
Showing 2 changed files with 224 additions and 201 deletions
src/components/receivingGiftsItem/receivingGiftsItem.less
  View file @11099cf
@@ -8,6 +8,7 @@ @@ -8,6 +8,7 @@
8 margin: 43px auto 0 auto; 8 margin: 43px auto 0 auto;
9 padding: 25px; 9 padding: 25px;
10 .user_info { 10 .user_info {
  11 + height: 50px;
11 display: flex; 12 display: flex;
12 position: relative; 13 position: relative;
13 padding-bottom: 22px; 14 padding-bottom: 22px;
@@ -50,14 +51,56 @@ @@ -50,14 +51,56 @@
50 line-height: 40px; 51 line-height: 40px;
51 } 52 }
52 } 53 }
  54 + .shop_info {
  55 + display: flex;
  56 + height: 50px;
  57 + margin-top: 30px;
  58 + position: relative;
  59 + img {
  60 + width: 40px;
  61 + height: 40px;
  62 + border-radius: 40px;
  63 + }
  64 + .name {
  65 + height: 40px;
  66 + font-size: 28px;
  67 + font-weight: 400;
  68 + color: rgba(34, 40, 51, 1);
  69 + line-height: 40px;
  70 + margin-left: 30px;
  71 + }
  72 + .oredr_link_box {
  73 + position: absolute;
  74 + right: -60px;
  75 + top: 0;
  76 + display: flex;
  77 + width: 158px;
  78 + height: 50px;
  79 + background: rgba(208, 2, 27, 1);
  80 + border-radius: 100px 0px 0px 100px;
  81 + font-size: 26px;
  82 + font-weight: 500;
  83 + color: rgba(255, 255, 255, 1);
  84 + line-height: 52px;
  85 + z-index: 1000;
  86 + div {
  87 + margin-left: 18px;
  88 + }
  89 + .icon {
  90 + width: 20px;
  91 + height: 20px;
  92 + margin: 13px 0;
  93 + }
  94 + }
  95 + }
53 .item_info { 96 .item_info {
54 display: flex; 97 display: flex;
55 margin-top: 30px; 98 margin-top: 30px;
56 padding-bottom: 30px; 99 padding-bottom: 30px;
57 - border-bottom: solid 1px rgba(247, 247, 248, 1); 100 + // border-bottom: solid 1px rgba(247, 247, 248, 1);
58 img { 101 img {
59 - width: 159px;  
60 - height: 160px; 102 + width: 200px;
  103 + height: 200px;
61 border-radius: 10px; 104 border-radius: 10px;
62 } 105 }
63 .box { 106 .box {
@@ -68,6 +111,7 @@ @@ -68,6 +111,7 @@
68 font-size: 28px; 111 font-size: 28px;
69 font-weight: 400; 112 font-weight: 400;
70 color: rgba(51, 51, 51, 1); 113 color: rgba(51, 51, 51, 1);
  114 + height: 80px;
71 max-height: 80px; 115 max-height: 80px;
72 /*! autoprefixer: off */ 116 /*! autoprefixer: off */
73 -webkit-box-orient: vertical; 117 -webkit-box-orient: vertical;
@@ -77,13 +121,22 @@ @@ -77,13 +121,22 @@
77 overflow: hidden; 121 overflow: hidden;
78 white-space: normal; 122 white-space: normal;
79 } 123 }
  124 + .num_desc {
  125 + height: 33px;
  126 + font-size: 24px;
  127 + font-weight: 400;
  128 + color: rgba(153, 153, 153, 1);
  129 + line-height: 33px;
  130 + margin-top: 4px;
  131 + }
80 .pirce { 132 .pirce {
81 width: 100%; 133 width: 100%;
82 - position: absolute;  
83 - left: 0;  
84 - bottom: 0; 134 + // position: absolute;
  135 + // left: 0;
  136 + // bottom: 0;
85 display: flex; 137 display: flex;
86 justify-content: space-between; 138 justify-content: space-between;
  139 + margin-top: 34px;
87 .title { 140 .title {
88 span { 141 span {
89 width: 15px; 142 width: 15px;
@@ -108,113 +161,43 @@ @@ -108,113 +161,43 @@
108 text-align: center; 161 text-align: center;
109 font-size: 26px; 162 font-size: 26px;
110 color: rgba(208, 2, 27, 1); 163 color: rgba(208, 2, 27, 1);
  164 + // color: #999999;
111 } 165 }
112 } 166 }
113 } 167 }
114 } 168 }
115 - .steps_box {  
116 - margin-top: 58px;  
117 - .line_box {  
118 - display: flex;  
119 - margin: 0 38px;  
120 - .box {  
121 - height: 16px;  
122 - .item {  
123 - display: flex;  
124 - .img {  
125 - width: 16px;  
126 - height: 16px;  
127 - background: url("../../../static/img/spot.png")  
128 - no-repeat top;  
129 - background-size: 100%;  
130 - }  
131 - .line_box {  
132 - height: 19px;  
133 - display: flex;  
134 - align-items: center;  
135 - margin: 0 13px;  
136 - .line {  
137 - width: 140px;  
138 - height: 1px;  
139 - background: rgba(240, 240, 240, 1);  
140 - }  
141 - }  
142 - }  
143 - }  
144 - .active {  
145 - .item {  
146 - .img {  
147 - width: 16px;  
148 - height: 16px;  
149 - background: url("../../../static/img/spot_active.png")  
150 - no-repeat top;  
151 - background-size: 100%;  
152 - }  
153 - }  
154 - }  
155 - .active_line {  
156 - .item {  
157 - .line_box {  
158 - .line {  
159 - background: rgba(208, 2, 27, 1);  
160 - }  
161 - }  
162 - }  
163 - }  
164 - }  
165 - .desc_box { 169 + .fold_box {
  170 + width: 630px;
  171 + height: 80px;
  172 + line-height: 80px;
  173 + background: rgba(249, 249, 249, 1);
  174 + border-radius: 5px;
  175 + font-size: 24px;
  176 + color: #999;
  177 + text-align: center;
  178 + display: flex;
  179 + justify-content: center;
  180 + .fold{
166 display: flex; 181 display: flex;
167 - justify-content: space-between;  
168 - margin: 17px auto 0 auto;  
169 - .desc {  
170 - height: 30px;  
171 - font-size: 22px;  
172 - font-weight: 400;  
173 - color: rgba(202, 202, 202, 1);  
174 - line-height: 30px;  
175 - margin-top: 20px; 182 + .triangle_top {
  183 + width: 0px;
  184 + height: 0px;
  185 + border-width: 10px;
  186 + border-style: solid;
  187 + margin-top: 25px;
  188 + margin-left: 14px;
  189 + border-color: #fff #fff #999 #fff;
176 } 190 }
177 - .active {  
178 - color: #666666; 191 + .triangle_bottom {
  192 + width: 0px;
  193 + height: 0px;
  194 + border-width: 10px;
  195 + border-style: solid;
  196 + margin-top: 35px;
  197 + margin-left: 14px;
  198 + border-color: #999 #fff #fff #fff;
179 } 199 }
180 } 200 }
181 - .box:last-child {  
182 - .item .line_box {  
183 - display: none;  
184 - }  
185 - }  
186 - }  
187 - .text_tip {  
188 - margin-top: 58px;  
189 - display: flex;  
190 - justify-content: flex-end;  
191 - height: 40px;  
192 - font-size: 28px;  
193 - font-weight: 500;  
194 - color: rgba(51, 51, 51, 1);  
195 - line-height: 40px;  
196 - }  
197 - .oredr_link_box {  
198 - display: flex;  
199 - width: 158px;  
200 - height: 52px;  
201 - background: rgba(208, 2, 27, 1);  
202 - border-radius: 100px 0px 0px 100px;  
203 - font-size: 26px;  
204 - font-weight: 500;  
205 - color: rgba(255, 255, 255, 1);  
206 - line-height: 52px;  
207 - position: fixed;  
208 - right:0;  
209 - z-index: 1000;  
210 - div{  
211 - margin-left: 18px;  
212 - }  
213 - .icon{  
214 - width: 20px;  
215 - height: 20px;  
216 - margin: 13px 0;  
217 - }  
218 } 201 }
219 } 202 }
220 .noGift { 203 .noGift {
src/components/receivingGiftsItem/receivingGiftsItem.vue
  View file @11099cf
@@ -6,8 +6,7 @@ @@ -6,8 +6,7 @@
6 v-for="(item, index) in receivingGiftsInfo" 6 v-for="(item, index) in receivingGiftsInfo"
7 :key="index" 7 :key="index"
8 @click="onReceivingGifts(item)" 8 @click="onReceivingGifts(item)"
9 - v-if="item"  
10 - > 9 + v-if="item">
11 <!--用户信息--> 10 <!--用户信息-->
12 <div class="user_info"> 11 <div class="user_info">
13 <img 12 <img
@@ -26,6 +25,28 @@ @@ -26,6 +25,28 @@
26 </div> 25 </div>
27 <div class="gift_active"></div> 26 <div class="gift_active"></div>
28 </div> 27 </div>
  28 + <!-- 店铺信息 -->
  29 + <div class="shop_info">
  30 + <img
  31 + v-if="item && item.user && item.user.img"
  32 + v-on:click.stop="onUserInfo(item)"
  33 + v-lazy="item.user.img"
  34 + />
  35 + <div
  36 + v-if="item && item.user && item.user.username"
  37 + class="name"
  38 + >
  39 + 店铺名字
  40 + </div>
  41 + <!-- 商品订单按钮 -->
  42 + <div
  43 + @click="OrderLink"
  44 + v-if="index == 0"
  45 + class="oredr_link_box">
  46 + <div>商品订单</div>
  47 + <van-icon class="icon" name="arrow" />
  48 + </div>
  49 + </div>
29 <!--商品信息--> 50 <!--商品信息-->
30 <div class="item_info"> 51 <div class="item_info">
31 <img 52 <img
@@ -39,6 +60,8 @@ @@ -39,6 +60,8 @@
39 > 60 >
40 {{ item.goods.title }} 61 {{ item.goods.title }}
41 </div> 62 </div>
  63 + <!-- 每人多少件 -->
  64 + <div class="num_desc">每人 1 件</div>
42 <div class="pirce"> 65 <div class="pirce">
43 <div 66 <div
44 v-if="item && item.goods && item.goods.price" 67 v-if="item && item.goods && item.goods.price"
@@ -63,118 +86,128 @@ @@ -63,118 +86,128 @@
63 </div> 86 </div>
64 </div> 87 </div>
65 </div> 88 </div>
66 - <!--步骤条-->  
67 - <div class="steps_box" v-if="item.get_gift_state < 6">  
68 - <div class="line_box">  
69 - <div  
70 - :class="[  
71 - 'box',  
72 - item.get_gift_state > 2  
73 - ? item.get_gift_state > 3  
74 - ? 'active active_line'  
75 - : 'active'  
76 - : ''  
77 - ]"  
78 - >  
79 - <div class="item">  
80 - <div class="img"></div>  
81 - <div class="line_box">  
82 - <div class="line"></div>  
83 - </div>  
84 - </div>  
85 - </div> 89 + <div v-show="triangle" class="item_info">
  90 + <img
  91 + v-if="item && item.goods && item.goods.simg"
  92 + v-lazy="item.goods.simg"
  93 + />
  94 + <div class="box">
86 <div 95 <div
87 - :class="[  
88 - 'box',  
89 - item.get_gift_state > 3  
90 - ? item.get_gift_state > 4  
91 - ? 'active active_line'  
92 - : 'active'  
93 - : ''  
94 - ]" 96 + v-if="item && item.goods && item.goods.title"
  97 + class="name"
95 > 98 >
96 - <div class="item">  
97 - <div class="img"></div>  
98 - <div class="line_box">  
99 - <div class="line"></div>  
100 - </div>  
101 - </div> 99 + {{ item.goods.title }}
102 </div> 100 </div>
103 - <div  
104 - :class="[  
105 - 'box',  
106 - item.get_gift_state > 4  
107 - ? item.get_gift_state > 5  
108 - ? 'active active_line'  
109 - : 'active'  
110 - : ''  
111 - ]"  
112 - >  
113 - <div class="item">  
114 - <div class="img"></div>  
115 - <div class="line_box">  
116 - <div class="line"></div>  
117 - </div> 101 + <!-- 每人多少件 -->
  102 + <div class="num_desc">每人 1 件</div>
  103 + <div class="pirce">
  104 + <div
  105 + v-if="item && item.goods && item.goods.price"
  106 + class="title"
  107 + >
  108 + <span>￥</span>{{ item.goods.price }}
118 </div> 109 </div>
119 - </div>  
120 - <div  
121 - :class="[  
122 - 'box',  
123 - item.get_gift_state > 5  
124 - ? item.get_gift_state > 6  
125 - ? 'active active_line'  
126 - : 'active'  
127 - : ''  
128 - ]"  
129 - >  
130 - <div class="item">  
131 - <div class="img"></div>  
132 - <div class="line_box">  
133 - <div class="line"></div>  
134 - </div> 110 + <div v-if="item.get_gift_state < 6" class="btn">
  111 + <span v-if="item.get_gift_state < 3"
  112 + >点击收礼</span
  113 + >
  114 + <span v-else-if="item.get_gift_state == 3"
  115 + >填写地址</span
  116 + >
  117 + <span v-else-if="item.get_gift_state == 4"
  118 + >商家发货</span
  119 + >
  120 + <span v-else-if="item.get_gift_state == 5"
  121 + >确认收货</span
  122 + >
135 </div> 123 </div>
136 </div> 124 </div>
137 </div> 125 </div>
138 - <div class="desc_box"> 126 + </div>
  127 + <div v-show="triangle" class="item_info">
  128 + <img
  129 + v-if="item && item.goods && item.goods.simg"
  130 + v-lazy="item.goods.simg"
  131 + />
  132 + <div class="box">
139 <div 133 <div
140 - class="desc"  
141 - :class="{ active: item.get_gift_state > 2 }" 134 + v-if="item && item.goods && item.goods.title"
  135 + class="name"
142 > 136 >
143 - 点击收礼 137 + {{ item.goods.title }}
144 </div> 138 </div>
145 - <div  
146 - class="desc"  
147 - :class="{ active: item.get_gift_state > 3 }"  
148 - >  
149 - 填写地址 139 + <!-- 每人多少件 -->
  140 + <div class="num_desc">每人 1 件</div>
  141 + <div class="pirce">
  142 + <div
  143 + v-if="item && item.goods && item.goods.price"
  144 + class="title"
  145 + >
  146 + <span>￥</span>{{ item.goods.price }}
  147 + </div>
  148 + <div v-if="item.get_gift_state < 6" class="btn">
  149 + <span v-if="item.get_gift_state < 3"
  150 + >点击收礼</span
  151 + >
  152 + <span v-else-if="item.get_gift_state == 3"
  153 + >填写地址</span
  154 + >
  155 + <span v-else-if="item.get_gift_state == 4"
  156 + >商家发货</span
  157 + >
  158 + <span v-else-if="item.get_gift_state == 5"
  159 + >确认收货</span
  160 + >
  161 + </div>
150 </div> 162 </div>
  163 + </div>
  164 + </div>
  165 + <div v-show="triangle" class="item_info">
  166 + <img
  167 + v-if="item && item.goods && item.goods.simg"
  168 + v-lazy="item.goods.simg"
  169 + />
  170 + <div class="box">
151 <div 171 <div
152 - class="desc"  
153 - :class="{ active: item.get_gift_state > 4 }" 172 + v-if="item && item.goods && item.goods.title"
  173 + class="name"
154 > 174 >
155 - 商家发货 175 + {{ item.goods.title }}
156 </div> 176 </div>
157 - <div  
158 - class="desc"  
159 - :class="{ active: item.get_gift_state > 5 }"  
160 - >  
161 - 确认收货 177 + <!-- 每人多少件 -->
  178 + <div class="num_desc">每人 1 件</div>
  179 + <div class="pirce">
  180 + <div
  181 + v-if="item && item.goods && item.goods.price"
  182 + class="title"
  183 + >
  184 + <span>￥</span>{{ item.goods.price }}
  185 + </div>
  186 + <div v-if="item.get_gift_state < 6" class="btn">
  187 + <span v-if="item.get_gift_state < 3"
  188 + >点击收礼</span
  189 + >
  190 + <span v-else-if="item.get_gift_state == 3"
  191 + >填写地址</span
  192 + >
  193 + <span v-else-if="item.get_gift_state == 4"
  194 + >商家发货</span
  195 + >
  196 + <span v-else-if="item.get_gift_state == 5"
  197 + >确认收货</span
  198 + >
  199 + </div>
162 </div> 200 </div>
163 </div> 201 </div>
164 </div> 202 </div>
165 - <!-- 显示文字 -->  
166 - <div class="text_tip" v-else>完成</div>  
167 - <!-- 商品订单按钮 -->  
168 - <div  
169 - @click="OrderLink"  
170 - v-if="index == 0"  
171 - class="oredr_link_box"  
172 - :style="'top: ' + ($parent.$parent.top.value + 151) + 'px'"  
173 - >  
174 - <div>商品订单</div>  
175 - <van-icon class="icon" name="arrow" /> 203 + <!-- 展开和折叠按钮 -->
  204 + <div class="fold_box" @click="onLoginMore">
  205 + <div class="fold">
  206 + 共五件 <div :class="[triangle?'triangle_top':'triangle_bottom']"> </div>
  207 + </div>
176 </div> 208 </div>
177 </div> 209 </div>
  210 +
178 </div> 211 </div>
179 <!-- 您还未收到过礼物哦～--> 212 <!-- 您还未收到过礼物哦～-->
180 <div v-else class="noGift"> 213 <div v-else class="noGift">
@@ -194,7 +227,9 @@ @@ -194,7 +227,9 @@
194 export default { 227 export default {
195 name: "receivingGiftsInfo", 228 name: "receivingGiftsInfo",
196 data() { 229 data() {
197 - return {}; 230 + return {
  231 + triangle:false // 三角型号false向下true向上
  232 + };
198 }, 233 },
199 props: ["receivingGiftsInfo", "isData"], 234 props: ["receivingGiftsInfo", "isData"],
200 created() {}, 235 created() {},
@@ -214,6 +249,11 @@ export default { @@ -214,6 +249,11 @@ export default {
214 // 跳转到商品订单 249 // 跳转到商品订单
215 OrderLink() { 250 OrderLink() {
216 this.$emit("OrderLink"); 251 this.$emit("OrderLink");
  252 + },
  253 + // 展开加载更多
  254 + onLoginMore(){
  255 + this.triangle = !this.triangle;
  256 +
217 } 257 }
218 } 258 }
219 }; 259 };