Skip to content

Commit 9cde947

Browse files
webfrontzjwebfrontzj
committed
completed
1 parent dba3941 commit 9cde947

File tree

18 files changed

+4822
-141
lines changed

18 files changed

+4822
-141
lines changed

‎src/components/common/buyCart.vue

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<template>
2+
<section class="cart_module">
3+
<section v-if="!foods.specifications.length" class="cart_button">
4+
<transition name="showReduce">
5+
<span @click="removeOutCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock)" v-if="foodNum">
6+
<svg>
7+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
8+
</svg>
9+
</span>
10+
</transition>
11+
<transition name="fade">
12+
<span class="cart_num" v-if="foodNum">{{foodNum}}</span>
13+
</transition>
14+
<svg class="add_icon" @click="addToCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock, $event)">
15+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
16+
</svg>
17+
</section>
18+
<section v-else class="choose_specification">
19+
<section class="choose_icon_container">
20+
<transition name="showReduce">
21+
<svg class="specs_reduce_icon" v-if="foodNum" @click="showReduceTip">
22+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
23+
</svg>
24+
</transition>
25+
<transition name="fade">
26+
<span class="cart_num" v-if="foodNum">{{foodNum}}</span>
27+
</transition>
28+
<span class="show_chooselist" @click="showChooseList(foods)">选规格</span>
29+
</section>
30+
</section>
31+
</section>
32+
</template>
33+
34+
<script>
35+
import {mapState, mapMutations} from 'vuex'
36+
export default {
37+
data(){
38+
return{
39+
showMoveDot: [], //控制下落的小圆点显示隐藏
40+
}
41+
},
42+
mounted(){
43+
44+
},
45+
computed: {
46+
...mapState([
47+
'cartList'
48+
]),
49+
/**
50+
* 监听cartList变化，更新当前商铺的购物车信息shopCart，同时返回一个新的对象
51+
*/
52+
shopCart: function (){
53+
return Object.assign({},this.cartList[this.shopId]);
54+
},
55+
//shopCart变化的时候重新计算当前商品的数量
56+
foodNum: function (){
57+
let category_id = this.foods.category_id;
58+
let item_id = this.foods.item_id;
59+
if (this.shopCart&&this.shopCart[category_id]&&this.shopCart[category_id][item_id]) {
60+
let num = 0;
61+
Object.values(this.shopCart[category_id][item_id]).forEach((item,index) => {
62+
num += item.num;
63+
})
64+
return num;
65+
}else {
66+
return 0;
67+
}
68+
},
69+
},
70+
props:['foods', 'shopId'],
71+
methods: {
72+
...mapMutations([
73+
'ADD_CART','REDUCE_CART',
74+
]),
75+
//移出购物车
76+
removeOutCart(category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock){
77+
if (this.foodNum > 0) {
78+
this.REDUCE_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock});
79+
}
80+
},
81+
//加入购物车，计算按钮位置。
82+
addToCart(category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock, event){
83+
this.ADD_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock});
84+
let elLeft = event.target.getBoundingClientRect().left;
85+
let elBottom = event.target.getBoundingClientRect().bottom;
86+
this.showMoveDot.push(true);
87+
this.$emit('showMoveDot', this.showMoveDot, elLeft, elBottom);
88+
89+
},
90+
//显示规格列表
91+
showChooseList(foodScroll){
92+
this.$emit('showChooseList', foodScroll)
93+
},
94+
//点击多规格商品的减按钮，弹出提示
95+
showReduceTip(){
96+
this.$emit('showReduceTip')
97+
},
98+
99+
},
100+
}
101+
</script>
102+
103+
<style lang="scss" scoped>
104+
@import '../../style/mixin';
105+
.cart_module{
106+
.add_icon{
107+
position: relative;
108+
z-index: 999;
109+
}
110+
.cart_button{
111+
display: flex;
112+
align-items: center;
113+
}
114+
svg{
115+
@include wh(.9rem, .9rem);
116+
fill: #3190e8;
117+
}
118+
.specs_reduce_icon{
119+
fill: #999;
120+
}
121+
.cart_num{
122+
@include sc(.65rem, #666);
123+
min-width: 1rem;
124+
text-align: center;
125+
font-family: Helvetica Neue,Tahoma;
126+
}
127+
.choose_specification{
128+
.choose_icon_container{
129+
display: flex;
130+
align-items: center;
131+
.show_chooselist{
132+
display: block;
133+
@include sc(.55rem, #fff);
134+
padding: .1rem .2rem;
135+
background-color: $blue;
136+
border-radius: 0.2rem;
137+
border: 1px solid $blue;
138+
}
139+
}
140+
}
141+
}
142+
.showReduce-enter-active, .showReduce-leave-active {
143+
transition: all .3s ease-out;
144+
}
145+
.showReduce-enter, .showReduce-leave-active {
146+
opacity: 0;
147+
transform: translateX(1rem);
148+
}
149+
.fade-enter-active, .fade-leave-active {
150+
transition: all .3s;
151+
}
152+
.fade-enter, .fade-leave-active {
153+
opacity: 0;
154+
}
155+
.fadeBounce-enter-active, .fadeBounce-leave-active {
156+
transition: all .3s;
157+
}
158+
.fadeBounce-enter, .fadeBounce-leave-active {
159+
opacity: 0;
160+
transform: scale(.7);
161+
}
162+
163+
</style>
164+

‎src/config/env.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ export {
1313
baseUrl,
1414
routerMode,
1515
imgBaseUrl
16-
}
16+
}

‎src/page/confirmOrder/children/children/addAddress.vue

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
<template>
2+
<div class="address_page">
3+
<head-top head-title="添加地址" go-back='true'></head-top>
4+
<section class="page_text_container">
5+
<section class="section_list">
6+
<span class="section_left">联系人</span>
7+
<section class="section_right">
8+
<input type="text" name="name" placeholder="你的名字" v-model="name" class="input_style">
9+
<div class="choose_sex">
10+
<span class="choose_option">
11+
<svg class="address_empty_right" @click="chooseSex(1)" :class="{choosed: sex == 1}">
12+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use>
13+
</svg>
14+
<span>先生</span>
15+
</span>
16+
<span class="choose_option">
17+
<svg class="address_empty_right" @click="chooseSex(2)" :class="{choosed: sex == 2}">
18+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use>
19+
</svg>
20+
<span>女士</span>
21+
</span>
22+
</div>
23+
</section>
24+
</section>
25+
<section class="section_list">
26+
<span class="section_left">联系电话</span>
27+
<section class="section_right">
28+
<div class="phone_add">
29+
<input type="text" name="phone" placeholder="你的手机号" v-model="phone" class="input_style">
30+
<img src="../../../../images/add_phone.png" height="20" width="20" @click="phone_bk = true">
31+
</div>
32+
<input v-if="phone_bk" type="text" name="anntherPhoneNumber" placeholder="备选电话" v-model="anntherPhoneNumber" class="input_style phone_bk">
33+
</section>
34+
</section>
35+
<section class="section_list">
36+
<span class="section_left">送餐地址</span>
37+
<section class="section_right">
38+
<router-link to="/confirmOrder/chooseAddress/addAddress/searchAddress" tag="div" class="choose_address">{{searchAddress? searchAddress.name : '小区/写字楼/学校等'}}</router-link>
39+
<input type="text" name="address_detail" placeholder="详细地址（如门牌号等）" v-model="address_detail" class="input_style">
40+
41+
</section>
42+
</section>
43+
<section class="section_list">
44+
<span class="section_left">标签</span>
45+
<section class="section_right">
46+
<input type="text" name="tag" placeholder="无/家/学校/公司" v-model="tag" class="input_style">
47+
</section>
48+
</section>
49+
</section>
50+
<div class="determine" @click="addAddress">确定</div>
51+
<alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
52+
<transition name="router-slid" mode="out-in">
53+
<router-view></router-view>
54+
</transition>
55+
</div>
56+
</template>
57+
58+
<script>
59+
import headTop from '@/components/header/head'
60+
import {mapState, mapMutations} from 'vuex'
61+
import {getAddress, getUser, postAddAddress} from '@/service/getData'
62+
import alertTip from '@/components/common/alertTip'
63+
64+
export default {
65+
data(){
66+
return{
67+
name: null, //姓名
68+
sex: 1, //性别
69+
phone: null, //电话
70+
address_detail: null, //详细地址
71+
tag: '', //备注
72+
tag_type: 1, //备注类型
73+
phone_bk: false, //是否选择备注电话
74+
anntherPhoneNumber: '', //备注电话
75+
showAlert: false, //弹出框
76+
alertText: null, //弹出框信息
77+
poi_type: 0, //地址类型
78+
}
79+
},
80+
created(){
81+
82+
},
83+
components: {
84+
headTop,
85+
alertTip,
86+
},
87+
computed: {
88+
...mapState([
89+
'searchAddress', 'geohash', 'userInfo',
90+
]),
91+
},
92+
methods: {
93+
...mapMutations([
94+
'CONFIRM_ADDRESS'
95+
]),
96+
//选择性别
97+
chooseSex(sex){
98+
this.sex = sex;
99+
},
100+
//保存地址信息
101+
async addAddress(){
102+
if (!(this.userInfo && this.userInfo.user_id)) {
103+
this.showAlert = true;
104+
this.alertText = '请登录'
105+
}else if(!this.name){
106+
this.showAlert = true;
107+
this.alertText = '请输入姓名'
108+
}else if(!this.phone){
109+
this.showAlert = true;
110+
this.alertText = '请输入电话号码'
111+
}else if(!this.searchAddress){
112+
this.showAlert = true;
113+
this.alertText = '请选择地址'
114+
}else if(!this.address_detail){
115+
this.showAlert = true;
116+
this.alertText = '请输入详细地址'
117+
}
118+
if (this.tag == '家') {
119+
this.tag_type = 2;
120+
}else if(this.tag == '学校'){
121+
this.tag_type = 3;
122+
}else if(this.tag == '公司'){
123+
this.tag_type = 4;
124+
}
125+
let res = await postAddAddress(this.userInfo.user_id, this.searchAddress.name, this.address_detail, this.geohash, this.name, this.phone, this.anntherPhoneNumber, 0, this.sex, this.tag, this.tag_type);
126+
//保存成功返沪上一页，否则弹出提示框
127+
if (res.message) {
128+
this.showAlert = true;
129+
this.alertText = res.message;
130+
}else {
131+
this.CONFIRM_ADDRESS(1);
132+
this.$router.go(-1);
133+
}
134+
},
135+
}
136+
}
137+
</script>
138+
139+
<style lang="scss" scoped>
140+
@import 'src/style/mixin';
141+
142+
.address_page{
143+
position: fixed;
144+
top: 0;
145+
left: 0;
146+
right: 0;
147+
bottom: 0;
148+
background-color: #f5f5f5;
149+
z-index: 204;
150+
padding-top: 1.95rem;
151+
p, span, input{
152+
font-family: Helvetica Neue,Tahoma,Arial;
153+
}
154+
}
155+
.page_text_container{
156+
background-color: #fff;
157+
padding: 0 .7rem;
158+
}
159+
.section_list{
160+
display: flex;
161+
border-bottom: 0.025rem solid #f5f5f5;
162+
.section_left{
163+
@include sc(.7rem, #333);
164+
flex: 2;
165+
line-height: 2.5rem;
166+
}
167+
.section_right{
168+
flex: 5;
169+
.input_style{
170+
width: 100%;
171+
height: 2.5rem;
172+
@include sc(.7rem, #999);
173+
}
174+
.phone_bk{
175+
border-top: 0.025rem solid #f5f5f5;
176+
}
177+
.phone_add{
178+
@include fj;
179+
align-items: center;
180+
}
181+
.choose_sex{
182+
display: flex;
183+
line-height: 2.5rem;
184+
border-top: 0.025rem solid #f5f5f5;
185+
.choose_option{
186+
@include sc(.7rem, #333);
187+
display: flex;
188+
align-items: center;
189+
margin-right: .8rem;
190+
svg{
191+
margin-right: .3rem;
192+
@include wh(.8rem, .8rem);
193+
fill: #ccc;
194+
}
195+
.choosed{
196+
fill: #4cd964;
197+
}
198+
}
199+
}
200+
.choose_address{
201+
@include sc(.7rem, #999);
202+
line-height: 2.5rem;
203+
border-bottom: 0.025rem solid #f5f5f5;
204+
}
205+
}
206+
}
207+
.determine{
208+
background-color: #4cd964;
209+
@include sc(.7rem, #fff);
210+
text-align: center;
211+
margin: 0 .7rem;
212+
line-height: 1.8rem;
213+
border-radius: 0.2rem;
214+
margin-top: .6rem;
215+
}
216+
.router-slid-enter-active, .router-slid-leave-active {
217+
transition: all .4s;
218+
}
219+
.router-slid-enter, .router-slid-leave-active {
220+
transform: translate3d(2rem, 0, 0);
221+
opacity: 0;
222+
}
223+
</style>

0 commit comments

Comments
 (0)