Skip to content

Commit 229380c

Browse files
bailicangdubailicangdu
committed
add shopDetail
1 parent fd50781 commit 229380c

File tree

9 files changed

+318
-816
lines changed

9 files changed

+318
-816
lines changed

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ vue2 + vue-rotuer2 + vuex + webpack + ES6/7 + fetch + sass + flex + svg + http-p
3131
- [x] 发送短信、语音验证 -- 完成
3232
- [x] 下单功能 -- 完成 ✨✨🎉🎉
3333
- [x] 订单列表 -- 完成
34-
- [ ] 订单详情
34+
- [x] 订单详情 -- 完成
3535
- [ ] 帐户信息
3636
- [ ] 上传头像，修改用户名
3737
- [ ] 积分商城
@@ -100,6 +100,8 @@ vue2 + vue-rotuer2 + vuex + webpack + ES6/7 + fetch + sass + flex + svg + http-p
100100
| |-- login // 登陆注册页
101101
| |-- msite // 商铺列表页
102102
| |-- order // 订单列表页
103+
| |--children
104+
| |--orderDetail // 订单详情页
103105
| |-- profile // 个人中心
104106
| |--children
105107
| |--balance // 我的余额

‎src/page/order/children/orderDetail.vue

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
<template>
2+
<div class="order_detail_page">
3+
<section v-if="!showLoading">
4+
<head-top head-title="订单详情" go-back='true'></head-top>
5+
<section class="order_titel">
6+
<img :src="orderDetail.restaurant_image_url">
7+
<p>{{orderDetail.status_bar.title}}</p>
8+
<p>{{orderDetail.timeline_node.description}}</p>
9+
<router-link class="order_again" :to="{path: '/shop', query: {geohash, id: orderDetail.restaurant_id}}">再来一单</router-link>
10+
</section>
11+
<section class="food_list">
12+
<router-link class="food_list_header" :to="{path: '/shop', query: {geohash, id: orderDetail.restaurant_id}}">
13+
<div class="shop_name">
14+
<img :src="orderDetail.restaurant_image_url">
15+
<span>{{orderDetail.restaurant_name}}</span>
16+
</div>
17+
<svg fill="#333" class="arrow_right">
18+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
19+
</svg>
20+
</router-link>
21+
<ul class="food_list_ul">
22+
<li v-for="item in orderDetail.basket.group[0]">
23+
<p class="food_name ellipsis">{{item.name}}</p>
24+
<div class="quantity_price">
25+
<span>X{{item.quantity}}</span>
26+
<span>¥{{item.price}}</span>
27+
</div>
28+
</li>
29+
</ul>
30+
<div class="deliver_fee">
31+
<span>配送费</span>
32+
<span>{{orderDetail.basket.deliver_fee.price}}</span>
33+
</div>
34+
<div class="pay_ment">实付{{orderDetail.total_amount.toFixed(2)}}</div>
35+
</section>
36+
<section class="order_detail_style">
37+
<header>配送信息</header>
38+
<section class="item_style">
39+
<p class="item_left">送达时间：</p>
40+
<div class="item_right">
41+
<p>{{orderData.deliver_time}}</p>
42+
</div>
43+
</section>
44+
<section class="item_style">
45+
<p class="item_left">送货地址：</p>
46+
<div class="item_right">
47+
<p>{{orderData.consignee}}</p>
48+
<p>{{orderData.phone}}</p>
49+
<p>{{orderData.address}}</p>
50+
</div>
51+
</section>
52+
<section class="item_style">
53+
<p class="item_left">配送方式：</p>
54+
<div class="item_right">
55+
<p>蜂鸟专送</p>
56+
</div>
57+
</section>
58+
</section>
59+
<section class="order_detail_style">
60+
<header>订单信息</header>
61+
<section class="item_style">
62+
<p class="item_left">订单号：</p>
63+
<div class="item_right">
64+
<p>{{orderDetail.id}}</p>
65+
</div>
66+
</section>
67+
<section class="item_style">
68+
<p class="item_left">支付方式：</p>
69+
<div class="item_right">
70+
<p>在线支付</p>
71+
</div>
72+
</section>
73+
<section class="item_style">
74+
<p class="item_left">下单时间：</p>
75+
<div class="item_right">
76+
<p>{{orderDetail.formatted_created_at}}</p>
77+
</div>
78+
</section>
79+
</section>
80+
</section>
81+
<transition name="loading">
82+
<loading v-if="showLoading"></loading>
83+
</transition>
84+
</div>
85+
</template>
86+
87+
<script>
88+
import {mapState, mapMutations} from 'vuex'
89+
import headTop from '../../../components/header/head'
90+
import {getImgPath} from '../../../components/common/mixin'
91+
import {getOrderDetail} from '../../../service/getData'
92+
import loading from '../../../components/common/loading'
93+
94+
export default {
95+
data(){
96+
return{
97+
showLoading: true, //显示加载动画
98+
orderData: null,
99+
}
100+
},
101+
mounted(){
102+
this.initData();
103+
},
104+
mixins: [getImgPath],
105+
components: {
106+
headTop,
107+
loading,
108+
},
109+
computed: {
110+
...mapState([
111+
'orderDetail', 'geohash', 'userInfo'
112+
]),
113+
},
114+
methods: {
115+
async initData(){
116+
// this.orderData = await getOrderDetail(this.userInfo.user_id, this.orderDetail.id);
117+
this.orderData = await getOrderDetail(1, 1);
118+
this.showLoading = false;
119+
},
120+
}
121+
}
122+
</script>
123+
124+
<style lang="scss" scoped>
125+
@import '../../../style/mixin';
126+
127+
.order_detail_page{
128+
position: fixed;
129+
top: 0;
130+
left: 0;
131+
right: 0;
132+
bottom: 0;
133+
background-color: #f1f1f1;
134+
z-index: 202;
135+
padding-top: 1.95rem;
136+
overflow-y: auto;
137+
p, span{
138+
font-family: Helvetica Neue,Tahoma,Arial;
139+
}
140+
}
141+
.order_titel{
142+
display: flex;
143+
flex-direction: column;
144+
align-items: center;
145+
padding: .7rem;
146+
background-color: #fff;
147+
margin-bottom: 0.5rem;
148+
img{
149+
border: 0.4rem solid #f5f5f5;
150+
border-radius: 50%;
151+
@include wh(3rem, 3rem);
152+
}
153+
p:nth-of-type(1){
154+
@include sc(.9rem, #333);
155+
font-weight: bold;
156+
margin-top: .4rem;
157+
}
158+
p:nth-of-type(2){
159+
@include sc(.55rem, #999);
160+
width: 10rem;
161+
margin-top: .3rem;
162+
text-align: center;
163+
}
164+
.order_again{
165+
@include sc(.6rem, $blue);
166+
margin-top: .5rem;
167+
border: 0.025rem solid $blue;
168+
padding: .15rem .4rem;
169+
border-radius: .1rem;
170+
}
171+
}
172+
.food_list{
173+
background-color: #fff;
174+
.food_list_header{
175+
@include fj;
176+
align-items: center;
177+
padding: .2rem .5rem;
178+
border-bottom: 1px solid #f5f5f5;
179+
.shop_name{
180+
img{
181+
@include wh(1.2rem, 1.2rem);
182+
vertical-align: middle;
183+
margin-right: .2rem;
184+
}
185+
span{
186+
@include sc(.75rem, #333);
187+
font-weight: bold;
188+
}
189+
}
190+
svg{
191+
@include wh(.6rem, .6rem);
192+
fill: #666;
193+
}
194+
}
195+
.food_list_ul{
196+
li{
197+
@include fj;
198+
align-items: center;
199+
padding: 0 .5rem;
200+
line-height: 2rem;
201+
.food_name{
202+
@include sc(.6rem, #666);
203+
flex: 4;
204+
}
205+
.quantity_price{
206+
flex: 1;
207+
@include fj;
208+
align-items: center;
209+
span:nth-of-type(1){
210+
@include sc(.6rem, #ccc);
211+
}
212+
span:nth-of-type(2){
213+
@include sc(.6rem, #666);
214+
}
215+
}
216+
}
217+
}
218+
.deliver_fee{
219+
@include fj;
220+
align-items: center;
221+
padding: 0 .5rem;
222+
line-height: 2rem;
223+
border-top: 1px solid #f5f5f5;
224+
span{
225+
@include sc(.6rem, #666);
226+
}
227+
}
228+
.pay_ment{
229+
@include sc(.6rem, #fb6b23);
230+
border-top: 1px solid #f5f5f5;
231+
font-weight: bold;
232+
line-height: 2rem;
233+
text-align: right;
234+
padding-right: .5rem;
235+
}
236+
}
237+
.order_detail_style{
238+
background-color: #fff;
239+
margin-top: 0.5rem;
240+
header{
241+
@include sc(.75rem, #333);
242+
padding: .5rem;
243+
border-bottom: 1px solid #f5f5f5;
244+
}
245+
.item_style{
246+
display: flex;
247+
padding: .5rem;
248+
p{
249+
@include sc(.65rem, #666);
250+
line-height: 1rem;
251+
}
252+
}
253+
}
254+
.loading-enter-active, .loading-leave-active {
255+
transition: opacity .7s
256+
}
257+
.loading-enter, .loading-leave-active {
258+
opacity: 0
259+
}
260+
261+
</style>

‎src/page/order/order.vue

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<li class="order_list_li" v-for="item in orderList" :key="item.id">
66
<img :src="item.restaurant_image_url" class="restaurant_image">
77
<section class="order_item_right">
8-
<section>
8+
<section @click="showDetail(item)">
99
<header class="order_item_right_header">
1010
<section class="order_header">
1111
<h4 >
@@ -35,6 +35,9 @@
3535
<transition name="loading">
3636
<loading v-show="showLoading"></loading>
3737
</transition>
38+
<transition name="router-slid">
39+
<router-view></router-view>
40+
</transition>
3841
</div>
3942
</template>
4043

@@ -72,6 +75,9 @@
7275
]),
7376
},
7477
methods: {
78+
...mapMutations([
79+
'SAVE_ORDER'
80+
]),
7581
async initData(){
7682
this.orderList = await getOrderList(111, this.offset);
7783
this.showLoading = false;
@@ -87,7 +93,11 @@
8793
this.orderList = this.orderList.concat(this.orderList, res);
8894
this.preventRepeat = false;
8995
this.showLoading = false;
90-
}
96+
},
97+
showDetail(item){
98+
this.SAVE_ORDER(item);
99+
this.$router.push('/order/orderDetail');
100+
},
91101
}
92102
}
93103
</script>
@@ -176,4 +186,10 @@
176186
.loading-enter, .loading-leave-active {
177187
opacity: 0
178188
}
189+
.router-slid-enter-active, .router-slid-leave-active {
190+
transition: all .4s;
191+
}
192+
.router-slid-enter, .router-slid-leave-active {
193+
transform: translateX(100%);
194+
}
179195
</style>

‎src/router/router.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const login = r => require.ensure([], () => r(require('../page/login/login')), '
99
const profile = r => require.ensure([], () => r(require('../page/profile/profile')), 'profile')
1010
const forget = r => require.ensure([], () => r(require('../page/forget/forget')), 'forget')
1111
const order = r => require.ensure([], () => r(require('../page/order/order')), 'order')
12+
const orderDetail = r => require.ensure([], () => r(require('../page/order/children/orderDetail')), 'orderDetail')
1213
const vipcard = r => require.ensure([], () => r(require('../page/vipcard/vipcard')), 'vipcard')
1314
const food = r => require.ensure([], () => r(require('../page/food/food')), 'food')
1415
const confirmOrder = r => require.ensure([], () => r(require('../page/confirmOrder/confirmOrder')), 'confirmOrder')
@@ -144,7 +145,11 @@ export default [{
144145
//订单列表页
145146
{
146147
path: '/order',
147-
component: order
148+
component: order,
149+
children: [{
150+
path: 'orderDetail', //订单详情页
151+
component: orderDetail,
152+
}, ]
148153
},
149154
//vip卡页
150155
{

0 commit comments

Comments
 (0)