Skip to content

Commit 0c30bec

Browse files
bailicangdubailicangdu
committed
update
1 parent 679c0d4 commit 0c30bec

6 files changed

Lines changed: 47 additions & 8 deletions

File tree

‎README.md‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@
22

33
初学vue时曾在网上搜索vue的实战项目源码，无奈大部分都是简单的demo，对于深究vue没有太大的帮助，剩下的一些大部分都是像音乐播放器，知乎论坛之类的展示类项目，交互没有预期那么复杂。但我们实际在工作中，经常会遇到有购物车的项目，这类项目因为涉及到money，所以对逻辑严谨度要求高，页面之间交互复杂，又会伴随着登陆、注册、用户信息等等，常常会让我们很头疼。既然还没人用vue写过这样的项目，那不如我来写，开源出来对能看到的人也会有帮助。
44

5-
这种功能性的项目很实用但是往往也很枯燥，没有音乐播放器那么看起来绚丽，思来想去发现饿了么是一个不错的素材，一来它足够复杂，开放的外卖平台比一般的公司独有商铺更加复杂。二来 见到那么多美食，大家也不会感觉到厌烦。我会用反向代理来解决跨域问题，直接使用饿了么的官方数据，而不是本地模拟数据，不过必须在pc端打开。
5+
这种功能性的项目很实用但是往往也很枯燥，没有音乐播放器那么看起来绚丽，思来想去发现饿了么是一个不错的素材，一来它足够复杂，开放的外卖平台比一般的公司独有商铺更加复杂。二来 见到那么多美食，大家也不会感觉到厌烦。
66

77
此项目大大小小共 40 多个页面，涉及注册、登陆、商品展示、购物车、下单等等，是一个完整的流程。一般公司即便是官网的单页面项目都没这么复杂，如果这个项目能驾驭的了，相信大部分公司的其他单页面应用也就不在话下，即便更复杂，也不会比这个高到哪里去。
88

99
因为利用业余时间来做，周期有点长，从项目从零布局到现在的35个页面共用了2个多月的时间，目前项目慢慢接近尾声，同时也在进行一些优化和bug的解决。
1010

1111
另外，这个项目和慕课网视频的那个饿了么没有任何关系，慕课网的项目只有一个页面，我在看完vue的官方文档后直接写了这个项目，没有参照任何人的代码，请大家不要混为一谈。
1212

13-
__注：此项目纯属个人瞎搞，正常下单请选择饿了么官方客户端。__
13+
__注：__
14+
__ 1、此项目纯属个人瞎搞，正常下单请选择饿了么官方客户端。__
15+
__ 2、项目已在各大论坛发表，仅供大家学习参考，请不要用于商业活动，或者私人用途，如面试、毕业设计等等，希望大家配合，谢谢。__
1416

1517

1618

@@ -139,7 +141,9 @@ npm run build
139141
| |-- mUtils.js // 常用的js方法
140142
| |-- rem.js // px转换rem
141143
| |-- images // 公共图片
142-
| |-- pages
144+
| |-- pages
145+
| |-- balance // 余额页
146+
| |-- benefit // 红包页
143147
| |-- city // 当前城市页
144148
| |-- food // 食品筛选排序页
145149
| |-- confirmOrder // 确认订单页
@@ -162,6 +166,7 @@ npm run build
162166
| |-- order // 订单列表页
163167
| |--children
164168
| |--orderDetail // 订单详情页
169+
| |-- points // 积分页
165170
| |-- profile // 个人中心
166171
| |--children
167172
| |--balance // 我的余额

‎config/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ module.exports = {
3434
'/v4',
3535
'/bos',
3636
'/member',
37+
'/promotion',
3738
],
3839
proxypath: 'https://mainsite-restapi.ele.me',
3940
// CSS Sourcemaps off by default because relative paths are "buggy"

‎src/page/benefit/benefit.vue‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<template>
22
<div class="rating_page">
33
<head-top head-title="我的优惠" go-back='true'></head-top>
4-
<section>我的余额</section>
4+
<section v-if="!showLoading">
5+
<section class="category_title">
6+
<span :class="{choosed: categoryType === 1}">红包</span>
7+
<span>商家代金券</span>
8+
</section>
9+
</section>
510
<alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
611
<loading v-show="showLoading"></loading>
712
</div>
@@ -10,7 +15,7 @@
1015
<script>
1116
import headTop from 'src/components/header/head'
1217
import {mapState, mapMutations} from 'vuex'
13-
import {payRequest} from 'src/service/getData'
18+
import {getHongbaoNum} from 'src/service/getData'
1419
import alertTip from 'src/components/common/alertTip'
1520
import loading from 'src/components/common/loading'
1621
@@ -20,6 +25,9 @@
2025
showAlert: false,
2126
alertText: null,
2227
showLoading: true,
28+
hongbao: null,
29+
categoryType: 1,
30+
2331
}
2432
},
2533
mounted(){
@@ -40,7 +48,8 @@
4048
'CLEAR_CART'
4149
]),
4250
async initData(){
43-
51+
this.hongbao = await getHongbaoNum(this.userInfo.user_id);
52+
this.showLoading = false;
4453
}
4554
}
4655
}
@@ -55,5 +64,21 @@
5564
font-family: Helvetica Neue,Tahoma,Arial;
5665
}
5766
}
67+
.category_title{
68+
display: flex;
69+
justify-content: space-around;
70+
align-items: center;
71+
height: 2rem;
72+
background-color: #fff;
73+
span{
74+
text-align: center;
75+
@include sc(.65rem, #333);
76+
padding-bottom: .2rem;
77+
}
78+
.choosed{
79+
border-bottom: 0.1rem solid $blue;
80+
color: $blue;
81+
}
82+
}
5883
5984
</style>

‎src/service/getData.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import * as service from './tempdata/service'
1212
import * as addDetail from './tempdata/addDetail'
1313
import * as addresspart from './tempdata/address'
1414
import * as vip from './tempdata/vip'
15+
import * as hongbao from './tempdata/hongbao'
1516

1617
// /**
1718
// * 获取首页默认地址
@@ -442,6 +443,12 @@ import * as vip from './tempdata/vip'
442443
// password
443444
// })
444445

446+
/**
447+
* 获取红包数量
448+
*/
449+
// export const getHongbaoNum= id => fetch('GET','/promotion/v2/users/' + id + '/hongbaos',{});
450+
451+
445452

446453

447454
/**
@@ -496,7 +503,7 @@ export const validateOrders = ({
496503
export const payRequest = (merchantOrderNo, userId) => setpromise(confirm.payDetail);
497504
export const getService = () => setpromise(service.serviceData);
498505
export const vipCart= (id, number, password) => setpromise(vip.vipcart);
499-
506+
export const getHongbaoNum= id => setpromise(hongbao.dataList);
500507

501508

502509

‎src/service/tempdata/hongbao.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/style/common.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ textarea { -webkit-appearance: none;}
4848
html,body{
4949
height: 100%;
5050
width: 100%;
51-
background-color: #f2f2f2;
51+
background-color: #F5F5F5;
5252
}
5353

5454

0 commit comments

Comments
 (0)