Skip to content

Commit 65fd024

Browse files
bailicangdubailicangdu
committed
update order
1 parent f947d6d commit 65fd024

File tree

9 files changed

+222
-20
lines changed

9 files changed

+222
-20
lines changed

‎README.md

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -66,18 +66,20 @@ vue2 + vue-rotuer2 + vuex + webpack + ES6/7 + fetch + sass + flex + svg + http-p
6666
| |-- city // 当前城市页
6767
| |-- food // 食品筛选排序页
6868
| |-- confirmOrder // 确认订单页
69+
| |--children
70+
| |--remark // 订单备注页
6971
| |-- forget // 忘记密码，修改密码页
7072
| |-- home // 首页
7173
| |-- login // 登陆注册页
7274
| |-- msite // 商铺列表页
7375
| |-- order // 订单列表页
7476
| |-- profile // 个人中心
7577
| |--children
76-
| |--balance //我的余额
77-
| |--benefit //我的优惠
78-
| |--info //帐户信息
79-
| |--points //我的积分
80-
| |--service //服务中心
78+
| |--balance // 我的余额
79+
| |--benefit // 我的优惠
80+
| |--info // 帐户信息
81+
| |--points // 我的积分
82+
| |--service // 服务中心
8183
| |-- search // 搜索页
8284
|       |-- shop                     // 商铺筛选页
8385
| |-- children
@@ -237,7 +239,4 @@ npm run build
237239
238240

239241

240-
241-
242-
243242
##### 如果觉得不错，请star一下吧 😊

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

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<template>
2+
<div class="rating_page">
3+
<section v-if="!showLoading">
4+
<head-top head-title="订单备注" go-back='true'></head-top>
5+
<section class="quick_remark" v-if="remarkList.remarks.length">
6+
<header class="header_style">快速备注</header>
7+
<ul class="remark_arr_list_ul">
8+
<li class="remark_arr_list_li" v-for="(item,index) in remarkList.remarks" :key="index">
9+
<span :class="{first: remarkIndex == 0, last: remarkIndex == item.length - 1, choosed: remarkText[index]&&(remarkText[index][0] == remarkIndex)}" class="remark_item_li" v-for="(remarkTtem, remarkIndex) in item" :key="remarkIndex" @click="chooseRemark(index, remarkIndex, remarkTtem)">{{remarkTtem}}</span>
10+
</li>
11+
</ul>
12+
</section>
13+
<section class="input_remark quick_remark">
14+
<header class="header_style">其他备注</header>
15+
<textarea class="input_text" v-model="inputText" placeholder="请输入备注内容(可不填)"></textarea>
16+
</section>
17+
<div class="determine" @click="confirmRemark">确定</div>
18+
</section>
19+
<loading v-if="showLoading"></loading>
20+
</div>
21+
</template>
22+
23+
<script>
24+
import headTop from '../../../components/header/head'
25+
import {getRemark} from '../../../service/getData'
26+
import loading from '../../../components/common/loading'
27+
import {mapMutations} from 'vuex'
28+
29+
export default {
30+
data(){
31+
return{
32+
id: null,
33+
sig: null,
34+
remarkList: null,
35+
showLoading: true,
36+
remarkText: {},
37+
inputText: null,
38+
}
39+
},
40+
created(){
41+
this.id = this.$route.query.id;
42+
this.sig = this.$route.query.sig;
43+
},
44+
mounted(){
45+
this.initData();
46+
},
47+
mixins: [],
48+
components: {
49+
headTop,
50+
loading,
51+
},
52+
props:[],
53+
methods: {
54+
...mapMutations([
55+
'CONFIRM_REMARK'
56+
]),
57+
async initData(){
58+
this.remarkList = await getRemark(this.id, this.sig);
59+
this.showLoading = false;
60+
},
61+
chooseRemark(index, remarkIndex, text){
62+
this.remarkText[index] = [remarkIndex, text];
63+
this.remarkText = Object.assign({}, this.remarkText);
64+
},
65+
confirmRemark(){
66+
this.CONFIRM_REMARK({remarkText: this.remarkText, inputText: this.inputText});
67+
this.$router.go(-1);
68+
}
69+
}
70+
}
71+
</script>
72+
73+
<style lang="scss" scoped>
74+
@import '../../../style/mixin';
75+
76+
.rating_page{
77+
position: fixed;
78+
top: 0;
79+
left: 0;
80+
right: 0;
81+
bottom: 0;
82+
background-color: #f5f5f5;
83+
z-index: 204;
84+
padding-top: 1.95rem;
85+
p, span{
86+
font-family: Helvetica Neue,Tahoma,Arial;
87+
}
88+
}
89+
.header_style{
90+
@include sc(.65rem, #333);
91+
line-height: 2rem;
92+
}
93+
.quick_remark{
94+
background-color: #fff;
95+
margin-top: .4rem;
96+
padding: 0 .6rem 1rem;
97+
ul{
98+
display: flex;
99+
flex-wrap: wrap;
100+
li{
101+
margin-right: .6rem;
102+
margin-bottom: .6rem;
103+
span{
104+
@include sc(.6rem, #333);
105+
padding: .3rem .6rem;
106+
border: 0.025rem solid #3190e8;
107+
border-left: 0;
108+
}
109+
.first{
110+
border-left: 0.025rem solid #3190e8;
111+
border-top-left-radius: .2rem;
112+
border-bottom-left-radius: .2rem;
113+
}
114+
.last{
115+
border-top-right-radius: .2rem;
116+
border-bottom-right-radius: .2rem;
117+
}
118+
.choosed{
119+
color: #fff;
120+
background-color: #3190e8;
121+
}
122+
}
123+
}
124+
}
125+
.input_remark{
126+
background-color: #fff;
127+
.input_text{
128+
width: 100%;
129+
background-color: #f9f9f9;
130+
border: 0.025rem solid #eee;
131+
resize: none;
132+
min-height: 4.5rem;
133+
border-radius: .2rem;
134+
@include sc(.6rem, #666);
135+
padding: .5rem;
136+
}
137+
}
138+
.determine{
139+
background-color: #4cd964;
140+
@include sc(.7rem, #fff);
141+
text-align: center;
142+
margin: 0 .7rem;
143+
line-height: 1.8rem;
144+
border-radius: 0.2rem;
145+
}
146+
147+
</style>

‎src/page/confirmOrder/confirmOrder.vue

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,15 @@
6565
</div>
6666
</section>
6767
<section class="pay_way container_style">
68-
<header class="header_style">
68+
<router-link :to='{path: "/confirmOrder/remark", query: {id: checkoutData.cart.id, sig: checkoutData.sig}}' class="header_style">
6969
<span>订单备注</span>
7070
<div class="more_type">
71-
<span>口味偏、好等</span>
71+
<span class="ellipsis">{{remarkText||inputText? remarklist: '口味偏、好等'}}</span>
7272
<svg class="address_empty_right">
7373
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
7474
</svg>
7575
</div>
76-
</header>
76+
</router-link>
7777
<section class="hongbo">
7878
<span>发票抬头</span>
7979
<span>商家不支持开发票</span>
@@ -100,7 +100,10 @@
100100
</div>
101101
</transition>
102102
</section>
103-
<loading v-if="showLoading"></loading>
103+
<loading v-if="showLoading"></loading>
104+
<transition name="router-slid">
105+
<router-view></router-view>
106+
</transition>
104107
</div>
105108
</template>
106109

@@ -143,8 +146,17 @@
143146
},
144147
computed: {
145148
...mapState([
146-
'cartList'
149+
'cartList', 'remarkText', 'inputText'
147150
]),
151+
remarklist: function (){
152+
if (this.remarkText&&this.inputText) {
153+
let str = new String;
154+
Object.values(this.remarkText).forEach(item => {
155+
str += item[1] + '，';
156+
})
157+
return str + this.inputText;
158+
}
159+
}
148160
},
149161
methods: {
150162
...mapMutations([
@@ -265,6 +277,10 @@
265277
.more_type{
266278
span:nth-of-type(1){
267279
@include sc(.6rem, #aaa);
280+
width: 10rem;
281+
display: inline-block;
282+
text-align: right;
283+
vertical-align: middle;
268284
}
269285
svg{
270286
@include wh(.5rem, .5rem);
@@ -399,4 +415,10 @@
399415
.slid_up-enter, .slid_up-leave-active {
400416
transform: translate3d(0,10rem,0)
401417
}
418+
.router-slid-enter-active, .router-slid-leave-active {
419+
transition: all .4s;
420+
}
421+
.router-slid-enter, .router-slid-leave-active {
422+
transform: translateX(100%);
423+
}
402424
</style>

‎src/router/router.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const order = r => require.ensure([], () => r(require('../page/order/order')), '
1212
const vipcard = r => require.ensure([], () => r(require('../page/vipcard/vipcard')), 'vipcard')
1313
const food = r => require.ensure([], () => r(require('../page/food/food')), 'food')
1414
const confirmOrder = r => require.ensure([], () => r(require('../page/confirmOrder/confirmOrder')), 'confirmOrder')
15+
const remark = r => require.ensure([], () => r(require('../page/confirmOrder/children/remark')), 'remark')
1516
const foodDetail = r => require.ensure([], () => r(require('../page/shop/children/foodDetail')), 'foodDetail')
1617
const shopDetail = r => require.ensure([], () => r(require('../page/shop/children/shopDetail')), 'shopDetail')
1718
const shopSafe = r => require.ensure([], () => r(require('../page/shop/children/shopSafe')), 'shopSafe')
@@ -68,7 +69,11 @@ export default [{
6869
}, //商铺详情页
6970
{
7071
path: '/confirmOrder',
71-
component: confirmOrder
72+
component: confirmOrder,
73+
children: [{
74+
path: 'remark',
75+
component: remark,
76+
}, ]
7277
}, //确认订单页
7378
{
7479
path: '/login',

‎src/service/getData.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,12 @@ export const getcaptchas = () => fetch('POST', '/v1/captchas', {});
195195
// geohash,
196196
// entities,
197197
// });
198+
/**
199+
* 获取快速备注列表
200+
*/
201+
// export const getRemark = (id, sig) => fetch('GET', '/v1/carts/' + id + '/remarks', {
202+
// sig
203+
// });
198204

199205

200206

@@ -229,4 +235,5 @@ export const sendLogin = (code, mobile, validate_token) => setpromise(login.user
229235
export const accountLogin = (username, password, captcha_code) => setpromise(login.userInfo);
230236
export const checkExsis = (checkNumber, type) => setpromise(login.checkExsis);
231237
export const sendMobile = (sendData, captcha_code, type, password) => setpromise(login.send);
232-
export const checkout = (geohash, entities) => setpromise(confirm.checkout);
238+
export const checkout = (geohash, entities) => setpromise(confirm.checkout);
239+
export const getRemark = (id, sig) => setpromise(confirm.remark);

‎src/service/tempdata/confirm.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1393,4 +1393,14 @@ export const checkout = {
13931393
"merchant_coupon": null
13941394
},
13951395
"is_support_ninja": 1
1396-
};
1396+
};
1397+
1398+
export const remark = {
1399+
"remarks": [
1400+
["\u4e0d\u8981\u8fa3", "\u5c11\u70b9\u8fa3", "\u591a\u70b9\u8fa3"],
1401+
["\u4e0d\u8981\u9999\u83dc"],
1402+
["\u4e0d\u8981\u6d0b\u8471"],
1403+
["\u591a\u70b9\u918b"],
1404+
["\u591a\u70b9\u8471"]
1405+
]
1406+
}

‎src/store/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ const state = {
1212
cartList: {}, // 加入购物车的商品列表
1313
shopDetail: null, //商家详情信息
1414
userInfo: null, //用户信息
15+
remarkText: null,
16+
inputText: null,
1517
}
1618

1719
export default new Vuex.Store({

‎src/store/mutation-types.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ export const INIT_BUYCART = 'INIT_BUYCART'
55
export const CLEAR_CART = 'CLEAR_CART'
66
export const RECORD_SHOPDETAIL = 'RECORD_SHOPDETAIL'
77
export const RECORD_USERINFO = 'RECORD_USERINFO'
8-
export const GET_USERINFO = 'GET_USERINFO'
8+
export const GET_USERINFO = 'GET_USERINFO'
9+
export const CONFIRM_REMARK = 'CONFIRM_REMARK'

‎src/store/mutations.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
RECORD_SHOPDETAIL,
88
RECORD_USERINFO,
99
GET_USERINFO,
10+
CONFIRM_REMARK,
1011
} from './mutation-types.js'
1112
import {
1213
setStore,
@@ -102,7 +103,7 @@ export default {
102103
food_id,
103104
name,
104105
price,
105-
specs
106+
specs,
106107
}) {
107108
let cart = state.cartList;
108109
if (cart[shopid] && cart[shopid][category_id] && cart[shopid][category_id][item_id] && cart[shopid][category_id][item_id][food_id]) {
@@ -131,16 +132,24 @@ export default {
131132
state.cartList = Object.assign({}, state.cartList);
132133
setStore('buyCart', state.cartList);
133134
},
134-
135+
// 记录用户信息
135136
[RECORD_USERINFO](state, info) {
136137
state.userInfo = info;
137138
setStore('useInfo', info);
138139
},
139-
140+
//从本地获取用户信息
140141
[GET_USERINFO](state) {
141142
let info = getStore('useInfo');
142143
if (info) {
143144
state.userInfo = JSON.parse(info);
144145
}
145146
},
147+
//记录订单页面用户选择的备注, 传递给订单确认页面
148+
[CONFIRM_REMARK](state, {
149+
remarkText,
150+
inputText
151+
}) {
152+
state.remarkText = remarkText;
153+
state.inputText = inputText;
154+
}
146155
}

0 commit comments

Comments
 (0)