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 8 margin: 43px auto 0 auto;
9 9 padding: 25px;
10 10 .user_info {
  11 + height: 50px;
11 12 display: flex;
12 13 position: relative;
13 14 padding-bottom: 22px;
... ... @@ -50,14 +51,56 @@
50 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 96 .item_info {
54 97 display: flex;
55 98 margin-top: 30px;
56 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 101 img {
59   - width: 159px;
60   - height: 160px;
  102 + width: 200px;
  103 + height: 200px;
61 104 border-radius: 10px;
62 105 }
63 106 .box {
... ... @@ -68,6 +111,7 @@
68 111 font-size: 28px;
69 112 font-weight: 400;
70 113 color: rgba(51, 51, 51, 1);
  114 + height: 80px;
71 115 max-height: 80px;
72 116 /*! autoprefixer: off */
73 117 -webkit-box-orient: vertical;
... ... @@ -77,13 +121,22 @@
77 121 overflow: hidden;
78 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 132 .pirce {
81 133 width: 100%;
82   - position: absolute;
83   - left: 0;
84   - bottom: 0;
  134 + // position: absolute;
  135 + // left: 0;
  136 + // bottom: 0;
85 137 display: flex;
86 138 justify-content: space-between;
  139 + margin-top: 34px;
87 140 .title {
88 141 span {
89 142 width: 15px;
... ... @@ -108,113 +161,43 @@
108 161 text-align: center;
109 162 font-size: 26px;
110 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 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 203 .noGift {
... ...
src/components/receivingGiftsItem/receivingGiftsItem.vue
  View file @11099cf
... ... @@ -6,8 +6,7 @@
6 6 v-for="(item, index) in receivingGiftsInfo"
7 7 :key="index"
8 8 @click="onReceivingGifts(item)"
9   - v-if="item"
10   - >
  9 + v-if="item">
11 10 <!--用户信息-->
12 11 <div class="user_info">
13 12 <img
... ... @@ -26,6 +25,28 @@
26 25 </div>
27 26 <div class="gift_active"></div>
28 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 51 <div class="item_info">
31 52 <img
... ... @@ -39,6 +60,8 @@
39 60 >
40 61 {{ item.goods.title }}
41 62 </div>
  63 + <!-- 每人多少件 -->
  64 + <div class="num_desc">每人 1 件</div>
42 65 <div class="pirce">
43 66 <div
44 67 v-if="item && item.goods && item.goods.price"
... ... @@ -63,118 +86,128 @@
63 86 </div>
64 87 </div>
65 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 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 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 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 123 </div>
136 124 </div>
137 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 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 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 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 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 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 200 </div>
163 201 </div>
164 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 208 </div>
177 209 </div>
  210 +
178 211 </div>
179 212 <!-- 您还未收到过礼物哦～-->
180 213 <div v-else class="noGift">
... ... @@ -194,7 +227,9 @@
194 227 export default {
195 228 name: "receivingGiftsInfo",
196 229 data() {
197   - return {};
  230 + return {
  231 + triangle:false // 三角型号false向下true向上
  232 + };
198 233 },
199 234 props: ["receivingGiftsInfo", "isData"],
200 235 created() {},
... ... @@ -214,6 +249,11 @@ export default {
214 249 // 跳转到商品订单
215 250 OrderLink() {
216 251 this.$emit("OrderLink");
  252 + },
  253 + // 展开加载更多
  254 + onLoginMore(){
  255 + this.triangle = !this.triangle;
  256 +
217 257 }
218 258 }
219 259 };
... ...