Skip to content

Commit 908457c

Browse files
bailicangdubailicangdu
committed
update
1 parent bb184ec commit 908457c

File tree

2 files changed

+170
-155
lines changed

2 files changed

+170
-155
lines changed

‎src/components/common/buyCart.vue‎

Lines changed: 5 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -35,41 +35,7 @@
3535
<transition name="fade">
3636
<span class="cart_num" v-if="foodNum">{{foodNum}}</span>
3737
</transition>
38-
<transition name="fade">
39-
<p class="show_delete_tip" v-if="showDeleteTip">多规格商品只能去购物车删除哦</p>
40-
</transition>
41-
<span class="show_chooselist" @click="showChooseList">选规格</span>
42-
</section>
43-
<section>
44-
<transition name="fade">
45-
<div class="specs_cover" @click="showChooseList" v-if="showSpecs"></div>
46-
</transition>
47-
<transition name="fadeBounce">
48-
<div class="specs_list" v-if="showSpecs">
49-
<header class="specs_list_header">
50-
<h4 class="ellipsis">{{foods.name}}</h4>
51-
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" version="1.1"class="specs_cancel" @click="showChooseList">
52-
<line x1="0" y1="0" x2="16" y2="16" stroke="#666" stroke-width="1.2"/>
53-
<line x1="0" y1="16" x2="16" y2="0" stroke="#666" stroke-width="1.2"/>
54-
</svg>
55-
</header>
56-
<section class="specs_details">
57-
<h5 class="specs_details_title">{{foods.specifications[0].name}}</h5>
58-
<ul>
59-
<li v-for="(item, itemIndex) in foods.specifications[0].values" :class="{specs_activity: itemIndex == specsIndex}" @click="chooseSpecs(itemIndex)">
60-
{{item}}
61-
</li>
62-
</ul>
63-
</section>
64-
<footer class="specs_footer">
65-
<div class="specs_price">
66-
<span>¥ </span>
67-
<span>{{foods.specfoods[specsIndex].price}}</span>
68-
</div>
69-
<div class="specs_addto_cart" @click="addSpecs(foods.category_id, foods.item_id, foods.specfoods[specsIndex].food_id, foods.specfoods[specsIndex].name, foods.specfoods[specsIndex].price, foods.specifications[0].values[specsIndex], foods.specfoods[specsIndex].packing_fee, foods.specfoods[specsIndex].sku_id, foods.specfoods[specsIndex].stock)">加入购物车</div>
70-
</footer>
71-
</div>
72-
</transition>
38+
<span class="show_chooselist" @click="showChooseList(foods)">选规格</span>
7339
</section>
7440
</section>
7541
</section>
@@ -81,8 +47,7 @@
8147
data(){
8248
return{
8349
showSpecs: false,//控制显示食品规格
84-
specsIndex: 0, //当前选中的规格索引值
85-
showDeleteTip: false, //多规格商品点击减按钮，弹出提示框
50+
8651
showMoveDot: [], //控制下落的小圆点显示隐藏
8752
elLeft: 0, //当前点击加按钮在网页中的绝对top值
8853
elBottom: 0, //当前点击加按钮在网页中的绝对left值
@@ -137,27 +102,13 @@
137102
138103
},
139104
//显示规格列表
140-
showChooseList(){
105+
showChooseList(foodScroll){
141106
this.showSpecs = !this.showSpecs;
142-
this.specsIndex = 0;
143-
},
144-
//记录当前所选规格的索引值
145-
chooseSpecs(index){
146-
this.specsIndex = index;
147-
},
148-
//多规格商品加入购物车
149-
addSpecs(category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock){
150-
this.ADD_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock});
151-
this.showChooseList();
107+
this.$emit('showChooseList', foodScroll)
152108
},
153109
//点击多规格商品的减按钮，弹出提示
154110
showReduceTip(){
155-
this.showDeleteTip = true;
156-
clearTimeout(this.timer);
157-
this.timer = setTimeout(() => {
158-
clearTimeout(this.timer);
159-
this.showDeleteTip = false;
160-
}, 3000);
111+
this.$emit('showReduceTip')
161112
},
162113
beforeEnter(el){
163114
el.style.transform = `translate3d(0,${39 + this.elBottom - this.windowHeight}px,0)`;
@@ -217,105 +168,6 @@
217168
border-radius: 0.5rem;
218169
border: 1px solid $blue;
219170
}
220-
.show_delete_tip{
221-
position: fixed;
222-
top: 50%;
223-
left: 15%;
224-
width: 70%;
225-
transform: translateY(-50%);
226-
background-color: rgba(0,0,0,.8);
227-
z-index: 18;
228-
@include sc(.65rem, #fff);
229-
text-align: center;
230-
padding: .5rem 0;
231-
border: 1px;
232-
border-radius: 0.25rem;
233-
}
234-
}
235-
.specs_cover{
236-
position: fixed;
237-
top: 0;
238-
left: 0;
239-
right: 0;
240-
bottom: 0;
241-
background-color: rgba(0,0,0,.4);
242-
z-index: 17;
243-
}
244-
.specs_list{
245-
position: fixed;
246-
top: 35%;
247-
left: 15%;
248-
width: 70%;
249-
background-color: #fff;
250-
z-index: 18;
251-
border: 1px;
252-
border-radius: 0.2rem;
253-
.specs_list_header{
254-
h4{
255-
@include sc(.7rem, #222);
256-
font-weight: normal;
257-
text-align: center;
258-
padding: .5rem;
259-
}
260-
.specs_cancel{
261-
position: absolute;
262-
right: .5rem;
263-
top: .5rem;
264-
}
265-
}
266-
.specs_details{
267-
padding: .5rem;
268-
.specs_details_title{
269-
@include sc(.6rem, #666);
270-
}
271-
ul{
272-
display: flex;
273-
flex-wrap: wrap;
274-
padding: .4rem 0;
275-
li{
276-
font-size: .6rem;
277-
padding: .3rem .5rem;
278-
border: 0.025rem solid #ddd;
279-
border-radius: .2rem;
280-
margin-right: .5rem;
281-
}
282-
.specs_activity{
283-
border-color: #3199e8;
284-
color: #3199e8;
285-
}
286-
}
287-
}
288-
.specs_footer{
289-
@include fj;
290-
align-items: center;
291-
background-color: #f9f9f9;
292-
padding: 0.5rem;
293-
border: 1px;
294-
border-bottom-left-radius: .2rem;
295-
border-bottom-right-radius: .2rem;
296-
.specs_price{
297-
span{
298-
color: #ff6000;
299-
}
300-
span:nth-of-type(1){
301-
font-size: .5rem;
302-
}
303-
span:nth-of-type(2){
304-
font-size: .8rem;
305-
font-weight: bold;
306-
font-family: Helvetica Neue,Tahoma;
307-
}
308-
}
309-
.specs_addto_cart{
310-
@include wh(4rem, 1.3rem);
311-
background-color: #3199e8;
312-
border: 1px;
313-
border-radius: 0.15rem;
314-
@include sc(.6rem, #fff);
315-
text-align: center;
316-
line-height: 1.3rem;
317-
}
318-
}
319171
}
320172
}
321173
}

‎src/page/shop/shop.vue‎

Lines changed: 165 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@
121121
<span>{{foods.specfoods[0].price}}</span>
122122
<span v-if="foods.specifications.length">起</span>
123123
</section>
124-
<buy-cart :shopId='shopId' :foods='foods' @moveInCart="listenInCart"></buy-cart>
124+
<buy-cart :shopId='shopId' :foods='foods' @moveInCart="listenInCart" @showChooseList="showChooseList" @showReduceTip="showReduceTip"></buy-cart>
125125
</footer>
126126
</section>
127127
</li>
@@ -252,6 +252,40 @@
252252
</section>
253253
</transition>
254254
</section>
255+
<section>
256+
<transition name="fade">
257+
<div class="specs_cover" @click="showChooseList" v-if="showSpecs"></div>
258+
</transition>
259+
<transition name="fadeBounce">
260+
<div class="specs_list" v-if="showSpecs">
261+
<header class="specs_list_header">
262+
<h4 class="ellipsis">{{choosedFoods.name}}</h4>
263+
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" version="1.1"class="specs_cancel" @click="showChooseList">
264+
<line x1="0" y1="0" x2="16" y2="16" stroke="#666" stroke-width="1.2"/>
265+
<line x1="0" y1="16" x2="16" y2="0" stroke="#666" stroke-width="1.2"/>
266+
</svg>
267+
</header>
268+
<section class="specs_details">
269+
<h5 class="specs_details_title">{{choosedFoods.specifications[0].name}}</h5>
270+
<ul>
271+
<li v-for="(item, itemIndex) in choosedFoods.specifications[0].values" :class="{specs_activity: itemIndex == specsIndex}" @click="chooseSpecs(itemIndex)">
272+
{{item}}
273+
</li>
274+
</ul>
275+
</section>
276+
<footer class="specs_footer">
277+
<div class="specs_price">
278+
<span>¥ </span>
279+
<span>{{choosedFoods.specfoods[specsIndex].price}}</span>
280+
</div>
281+
<div class="specs_addto_cart" @click="addSpecs(choosedFoods.category_id, choosedFoods.item_id, choosedFoods.specfoods[specsIndex].food_id, choosedFoods.specfoods[specsIndex].name, choosedFoods.specfoods[specsIndex].price, choosedFoods.specifications[0].values[specsIndex], choosedFoods.specfoods[specsIndex].packing_fee, choosedFoods.specfoods[specsIndex].sku_id, choosedFoods.specfoods[specsIndex].stock)">加入购物车</div>
282+
</footer>
283+
</div>
284+
</transition>
285+
</section>
286+
<transition name="fade">
287+
<p class="show_delete_tip" v-if="showDeleteTip">多规格商品只能去购物车删除哦</p>
288+
</transition>
255289
<loading v-show="showLoading || loadRatings"></loading>
256290
<transition name="router-slid">
257291
<router-view></router-view>
@@ -296,6 +330,10 @@
296330
ratingTagName: '',//评论的类型
297331
loadRatings: false, //加载更多评论是显示加载组件
298332
foodScroll: null,
333+
showSpecs: false,//控制显示食品规格
334+
specsIndex: 0, //当前选中的规格索引值
335+
choosedFoods: null,
336+
showDeleteTip: false, //多规格商品点击减按钮，弹出提示框
299337
}
300338
},
301339
created(){
@@ -392,7 +430,7 @@
392430
this.foodScroll = new BScroll(element, {
393431
probeType: 3,
394432
click: true,
395-
deceleration: 0.002,
433+
deceleration: 0.001,
396434
probeType: 1,
397435
});
398436
@@ -526,6 +564,32 @@
526564
this.showLoading = false;
527565
}
528566
},
567+
//显示规格列表
568+
showChooseList(foods){
569+
if (foods) {
570+
this.choosedFoods = foods;
571+
}
572+
this.showSpecs = !this.showSpecs;
573+
this.specsIndex = 0;
574+
},
575+
//记录当前所选规格的索引值
576+
chooseSpecs(index){
577+
this.specsIndex = index;
578+
},
579+
//多规格商品加入购物车
580+
addSpecs(category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock){
581+
this.ADD_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock});
582+
this.showChooseList();
583+
},
584+
//点击多规格商品的减按钮，弹出提示
585+
showReduceTip(){
586+
this.showDeleteTip = true;
587+
clearTimeout(this.timer);
588+
this.timer = setTimeout(() => {
589+
clearTimeout(this.timer);
590+
this.showDeleteTip = false;
591+
}, 3000);
592+
},
529593
},
530594
watch: {
531595
//showLoading变化时说明组件已经获取初始化数据，在下一帧nextTick进行后续操作
@@ -1242,6 +1306,105 @@
12421306
}
12431307
}
12441308
}
1309+
.specs_cover{
1310+
position: fixed;
1311+
top: 0;
1312+
left: 0;
1313+
right: 0;
1314+
bottom: 0;
1315+
background-color: rgba(0,0,0,.4);
1316+
z-index: 17;
1317+
}
1318+
.specs_list{
1319+
position: fixed;
1320+
top: 35%;
1321+
left: 15%;
1322+
width: 70%;
1323+
background-color: #fff;
1324+
z-index: 18;
1325+
border: 1px;
1326+
border-radius: 0.2rem;
1327+
.specs_list_header{
1328+
h4{
1329+
@include sc(.7rem, #222);
1330+
font-weight: normal;
1331+
text-align: center;
1332+
padding: .5rem;
1333+
}
1334+
.specs_cancel{
1335+
position: absolute;
1336+
right: .5rem;
1337+
top: .5rem;
1338+
}
1339+
}
1340+
.specs_details{
1341+
padding: .5rem;
1342+
.specs_details_title{
1343+
@include sc(.6rem, #666);
1344+
}
1345+
ul{
1346+
display: flex;
1347+
flex-wrap: wrap;
1348+
padding: .4rem 0;
1349+
li{
1350+
font-size: .6rem;
1351+
padding: .3rem .5rem;
1352+
border: 0.025rem solid #ddd;
1353+
border-radius: .2rem;
1354+
margin-right: .5rem;
1355+
}
1356+
.specs_activity{
1357+
border-color: #3199e8;
1358+
color: #3199e8;
1359+
}
1360+
}
1361+
}
1362+
.specs_footer{
1363+
@include fj;
1364+
align-items: center;
1365+
background-color: #f9f9f9;
1366+
padding: 0.5rem;
1367+
border: 1px;
1368+
border-bottom-left-radius: .2rem;
1369+
border-bottom-right-radius: .2rem;
1370+
.specs_price{
1371+
span{
1372+
color: #ff6000;
1373+
}
1374+
span:nth-of-type(1){
1375+
font-size: .5rem;
1376+
}
1377+
span:nth-of-type(2){
1378+
font-size: .8rem;
1379+
font-weight: bold;
1380+
font-family: Helvetica Neue,Tahoma;
1381+
}
1382+
}
1383+
.specs_addto_cart{
1384+
@include wh(4rem, 1.3rem);
1385+
background-color: #3199e8;
1386+
border: 1px;
1387+
border-radius: 0.15rem;
1388+
@include sc(.6rem, #fff);
1389+
text-align: center;
1390+
line-height: 1.3rem;
1391+
}
1392+
}
1393+
}
1394+
.show_delete_tip{
1395+
position: fixed;
1396+
top: 50%;
1397+
left: 15%;
1398+
width: 70%;
1399+
transform: translateY(-50%);
1400+
background-color: rgba(0,0,0,.8);
1401+
z-index: 18;
1402+
@include sc(.65rem, #fff);
1403+
text-align: center;
1404+
padding: .5rem 0;
1405+
border: 1px;
1406+
border-radius: 0.25rem;
1407+
}
12451408
.fade-enter-active, .fade-leave-active {
12461409
transition: opacity .5s;
12471410
}

0 commit comments

Comments
 (0)