Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
S
sell
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
liumiss
sell
Commits
35d4fcdb
Commit
35d4fcdb
authored
Aug 30, 2019
by
liumiss
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
店铺首页bug
parent
fbc3b41c
Changes
27
Hide whitespace changes
Inline
Side-by-side
Showing
27 changed files
with
679 additions
and
274 deletions
+679
-274
index.html
public/index.html
+1
-1
App.vue
src/App.vue
+7
-1
serve.js
src/common/serve.js
+2
-1
base.styl
src/common/stylus/base.styl
+3
-0
index.styl
src/common/stylus/index.styl
+16
-4
variable.styl
src/common/stylus/variable.styl
+1
-0
confirm-foods-list.vue
src/components/confirm-foods-list.vue
+1
-1
footer.vue
src/components/footer.vue
+13
-3
order-card.vue
src/components/order-card.vue
+56
-9
pay.vue
src/components/pay.vue
+4
-4
shop-list.vue
src/components/shop-list.vue
+0
-4
shop-cart-sticky.vue
src/components/shopCart/shop-cart-sticky.vue
+5
-0
shop-cart.vue
src/components/shopCart/shop-cart.vue
+29
-6
register.js
src/register.js
+3
-1
router.js
src/router.js
+5
-2
index.js
src/store/index.js
+1
-0
mutations.js
src/store/mutations.js
+5
-1
select-address.vue
src/views/address/select-address.vue
+2
-2
index.vue
src/views/confirmOrder/index.vue
+16
-5
index.vue
src/views/home/index.vue
+61
-34
login.vue
src/views/login/login.vue
+25
-9
index.vue
src/views/mine/index.vue
+15
-7
index.vue
src/views/order/index.vue
+63
-51
order-detail.vue
src/views/order/order-detail.vue
+72
-16
header-detail.vue
src/views/shopItem/children/headerDetail/header-detail.vue
+131
-0
shop.vue
src/views/shopItem/children/shop.vue
+28
-33
index.vue
src/views/shopItem/index.vue
+114
-79
No files found.
public/index.html
View file @
35d4fcdb
...
...
@@ -4,7 +4,7 @@
<head>
<meta
charset=
"utf-8"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<meta
name=
"viewport"
content=
"width=device-width,initial-scale=1.0"
>
<meta
name=
"viewport"
content=
"width=device-width,initial-scale=1.0
,user-scalable=0
"
>
<link
rel=
"icon"
href=
"<%= BASE_URL %>favicon.ico"
>
<title>
sell
</title>
...
...
src/App.vue
View file @
35d4fcdb
<
template
>
<div
id=
"app"
>
<router-view
/>
<keep-alive>
<!--这里是会被缓存的组件-->
<router-view
v-if=
"this.$route.meta.keepAlive"
></router-view>
</keep-alive>
<router-view
v-if=
"!this.$route.meta.keepAlive"
></router-view>
<!--
<router-view
/>
-->
</div>
</
template
>
...
...
src/common/serve.js
View file @
35d4fcdb
...
...
@@ -68,11 +68,12 @@ export const preorder = (shop_id,price, address_id, goods_list) => request('shop
// delivery_fee: 0
});
// 店铺订单-下单
export
const
placeOrder
=
(
shop_id
,
price
,
address_id
,
goods_list
,
order_type
=
"
take_out
"
)
=>
request
(
'
shop/order
'
,
{
export
const
placeOrder
=
(
shop_id
,
price
,
address_id
,
goods_list
,
message
,
order_type
=
"
take_out
"
)
=>
request
(
'
shop/order
'
,
{
shop_id
,
price
,
address_id
,
goods_list
,
message
,
order_type
,
// take_out下单 recharge充值
});
...
...
src/common/stylus/base.styl
View file @
35d4fcdb
...
...
@@ -4,3 +4,6 @@ html, body
font-size:16px
background: #f7f8fa
strong{
font-weight: 600;
}
\ No newline at end of file
src/common/stylus/index.styl
View file @
35d4fcdb
...
...
@@ -9,14 +9,18 @@
.cube-form-item_required .cube-form-label::before
display:none
// 颜色
.text-primary{
color:$color-blue
}
.text-light-primary{
color:$color-light-blue
}
.text-light-grey{
color:$color-light-grey
}
// 大小
.text-extra-small{
font-size: $fontsize-small
}
...
...
@@ -33,6 +37,8 @@
font-size: $fontsize-large-xx
}
.bg-white{
background: #fff;
}
...
...
@@ -108,10 +114,16 @@
.van-search .van-icon{
font-size: 16px;
}
.van-tag{
// padding:1px 4px;
.tags .van-tag {
padding: 2px 4px;
margin-right: 6px;
line-height: 1;
}
.fontw .van-cell .van-cell__title span{
font-weight: 600;
}
\ No newline at end of file
}
.cell-hg .van-cell{
padding: 14px 15px;
}
\ No newline at end of file
src/common/stylus/variable.styl
View file @
35d4fcdb
...
...
@@ -2,6 +2,7 @@
$color-background = rgba(7, 17, 27, 1)
$color-primary = #1296fa;
$color-green = #07c160
$color-dark-green = #06ae57
...
...
src/components/confirm-foods-list.vue
View file @
35d4fcdb
...
...
@@ -13,7 +13,7 @@
</div>
<div
class=
"num_price"
>
<span>
x
{{
item
.
goods_quantity
}}
</span>
<s
pan>
¥
{{
item
.
goods_price
}}
</span
>
<s
trong>
¥
{{
item
.
goods_price
}}
</strong
>
</div>
</li>
</ul>
...
...
src/components/footer.vue
View file @
35d4fcdb
...
...
@@ -11,7 +11,7 @@
<
script
>
export
default
{
props
:
[
'
default
'
],
props
:
[
"
default
"
],
data
()
{
return
{
selectedLabelDefault
:
this
.
default
,
...
...
@@ -41,6 +41,12 @@ export default {
changeHandler
(
label
)
{
this
.
$router
.
push
({
name
:
label
});
}
},
// keep-alive搭配activated 页面需要重新刷新请求数据
activated
()
{
if
(
this
.
default
!==
this
.
selectedLabelDefault
)
{
this
.
selectedLabelDefault
=
this
.
default
;
}
}
};
</
script
>
...
...
@@ -51,7 +57,11 @@ export default {
width: 100%;
bottom: 0;
border-top: 1px solid #eee;
background-color:#fff;
z-index:99;
background-color: #fff;
z-index: 99;
.cube-tab_active {
color: $color-primary;
}
}
</
style
>
src/components/order-card.vue
View file @
35d4fcdb
...
...
@@ -9,7 +9,7 @@
</div>
<div
class=
"van-cell__value van-panel__header-value"
>
<span>
{{
order
.
order_status
==
'
preparing
'
?
'
配送中
'
:
'
已送达
'
}}
</span>
<span>
{{
order
|
orderStatus
}}
</span>
</div>
</div>
...
...
@@ -23,21 +23,39 @@
</span>
</van-cell>
<div
slot=
"footer"
>
<van-button
size=
"small"
color=
"#1f81be"
@
click=
"onMore(77,order.order_no)"
plain
>
再来一单
</van-button>
<van-button
v-if=
"order.order_status=='unpaid'"
size=
"small"
color=
"#1296fa"
@
click=
"onPay(77,order.order_no)"
plain
>
去支付
</van-button>
<van-button
v-if=
"order.order_status=='received'"
size=
"small"
color=
"#1296fa"
@
click=
"onMore(77,order.order_no)"
plain
>
再来一单
</van-button>
</div>
</van-panel>
<van-panel
v-else-if=
"order.order_type=='recharge'"
class=
"margin-bt-space"
>
<div
slot=
"header"
class=
"van-cell van-panel__header"
@
click=
"onShow(77)"
>
<van-panel
v-else-if=
"order.order_type=='recharge'"
class=
"margin-bt-space"
@
click=
"onSelect(order.order_type)"
>
<div
slot=
"header"
class=
"van-cell van-panel__header"
>
<div
class=
"van-cell__title"
>
<span>
充值订单
</span>
</div>
<div
class=
"van-cell__value van-panel__header-value"
>
<span>
充值成功
</span>
<span>
{{
order
|
orderStatus
}}
</span>
</div>
</div>
<van-cell
@
click=
"onSelect(order.order_type,order.order_no)"
>
<van-cell>
<div
slot=
"title"
>
<p
class=
"word-one"
>
{{
order
.
goods_name
}}
</p>
</div>
...
...
@@ -59,6 +77,29 @@ export default {
default
:
null
}
},
filters
:
{
orderStatus
(
value
)
{
let
status
=
""
;
if
(
value
.
order_type
==
"
take_out
"
)
{
if
(
value
.
order_status
==
"
unpaid
"
)
{
status
=
"
等待支付
"
;
}
else
if
(
value
.
order_status
==
"
preparing
"
)
{
status
=
"
配送中
"
;
}
else
if
(
value
.
order_status
==
"
received
"
)
{
status
=
"
已送达
"
;
}
else
{
status
=
"
配送中
"
;
}
}
else
if
(
value
.
order_type
==
"
recharge
"
)
{
if
(
value
.
order_status
==
"
unpaid
"
)
{
status
=
"
充值失败
"
;
}
else
{
status
=
"
充值成功
"
;
}
}
return
status
;
}
},
methods
:
{
onCallBack
(
order_no
)
{
this
.
$emit
(
"
select
"
,
order_no
);
...
...
@@ -66,6 +107,9 @@ export default {
onMore
(
shopId
,
order_no
)
{
this
.
$emit
(
"
more
"
,
shopId
,
order_no
);
},
onPay
(
shopId
,
order_no
)
{
this
.
$emit
(
"
pay
"
,
shopId
,
order_no
);
},
onSelect
(
order_type
,
order_no
)
{
if
(
order_type
==
"
recharge
"
)
{
this
.
$createToast
({
...
...
@@ -78,7 +122,8 @@ export default {
},
onShow
(
shopId
)
{
this
.
$emit
(
"
show
"
,
shopId
);
}
},
}
};
</
script
>
...
...
@@ -92,9 +137,11 @@ export default {
.van-panel {
margin-bottom: 10px;
padding-bottom: 10px;
&__header .van-cell__title span{
font-weight:600;
&__header .van-cell__title span {
font-weight: 600;
}
&__content {
padding-left: 12%;
}
...
...
src/components/pay.vue
View file @
35d4fcdb
...
...
@@ -22,10 +22,10 @@ export default {
type
:
"
wexin
"
,
name
:
"
微信支付
"
},
{
type
:
"
banlence
"
,
name
:
"
余额支付
"
},
//
{
//
type: "banlence",
//
name: "余额支付"
//
},
{
type
:
"
apliay
"
,
name
:
"
支付宝
"
...
...
src/components/shop-list.vue
View file @
35d4fcdb
...
...
@@ -101,10 +101,6 @@ export default {
.tags {
padding: 4px 0;
.van-tag {
margin-right: 6px;
}
}
}
</
style
>
src/components/shopCart/shop-cart-sticky.vue
View file @
35d4fcdb
...
...
@@ -8,6 +8,7 @@
:minPrice=
"minPrice"
:fold=
"fold"
:sticky=
"true"
:toggle=
'toggle'
></shop-cart>
</div>
</
template
>
...
...
@@ -45,6 +46,10 @@ export default {
type
:
Boolean
,
default
:
true
},
toggle
:
{
// 是否主动展示列表
type
:
Boolean
,
// default: false
},
list
:
{
type
:
Object
,
default
()
{
...
...
src/components/shopCart/shop-cart.vue
View file @
35d4fcdb
...
...
@@ -7,7 +7,7 @@
:class=
"
{cart_icon_activity: totalPrice > 0}"
ref="cartContainer"
>
<i
class=
"
cubeic-ale
rt cart_icon"
></i>
<i
class=
"
van-icon van-icon-shopping-ca
rt cart_icon"
></i>
<div
class=
"num"
>
<van-tag
v-show=
"totalCount>0"
round
type=
"danger"
>
{{
totalCount
}}
</van-tag>
</div>
...
...
@@ -42,11 +42,12 @@
</transition>
</div>
</div>
</div>
-->
</div>
-->
</div>
</
template
>
<
script
>
import
{
setTimeout
}
from
"
timers
"
;
// import Bubble from 'components/bubble/bubble'
const
BALL_LEN
=
10
;
...
...
@@ -85,9 +86,13 @@ export default {
type
:
Boolean
,
default
:
true
},
toggle
:
{
type
:
Boolean
,
default
:
false
},
shopId
:
{
type
:
String
}
,
}
},
data
()
{
return
{
...
...
@@ -98,6 +103,15 @@ export default {
created
()
{
this
.
dropBalls
=
[];
},
mounted
()
{
setTimeout
(()
=>
{
this
.
$nextTick
(()
=>
{
if
(
this
.
toggle
&&
this
.
totalCount
!=
0
)
{
this
.
toggleList
();
}
});
},
400
);
},
computed
:
{
totalPrice
()
{
let
total
=
0
;
...
...
@@ -150,14 +164,18 @@ export default {
if
(
this
.
totalPrice
<
this
.
minPrice
)
{
return
;
}
/* this.$createDialog({
/* this.$createDialog({
title: "支付",
content: `您需要支付${this.totalPrice}元`
}).show();
e.stopPropagation();
*/
let
geohash
=
this
.
$route
.
query
.
geohash
;
this
.
$router
.
push
({
name
:
'
confirmOrder
'
,
params
:{
shopId
:
this
.
shopId
},
query
:{
geohash
:
geohash
}});
this
.
$router
.
push
({
name
:
"
confirmOrder
"
,
params
:
{
shopId
:
this
.
shopId
},
query
:
{
geohash
:
geohash
}
});
},
drop
(
el
)
{
for
(
let
i
=
0
;
i
<
this
.
balls
.
length
;
i
++
)
{
...
...
@@ -269,9 +287,13 @@ export default {
.cart_icon_container {
position: absolute;
top: -20px;
left:2%;
wh(60px, 60px);
font-size: 60px;
.van-icon {
font-size: 40px;
}
.num {
position: absolute;
top: 0;
...
...
@@ -309,6 +331,7 @@ export default {
&.no-enough {
scw(12px, #fff);
}
&.enough {
background-color: #4cd964;
}
...
...
@@ -319,7 +342,7 @@ export default {
.ball {
left: 32px;
bottom: 22px;
wh(14px,14px);
wh(14px,
14px);
z-index: 200;
transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
...
...
src/register.js
View file @
35d4fcdb
...
...
@@ -5,8 +5,10 @@ import ShopCartList from 'components/shopCart/shop-cart-list'
import
ShopCartStikcy
from
'
components/shopCart/shop-cart-sticky
'
import
Food
from
"
./views/shopItem/children/food-detail
"
import
HeaderDetail
from
"
./views/shopItem/children/headerDetail/header-detail
"
createAPI
(
Vue
,
ShopCartList
)
createAPI
(
Vue
,
ShopCartStikcy
)
createAPI
(
Vue
,
Food
)
\ No newline at end of file
createAPI
(
Vue
,
Food
)
createAPI
(
Vue
,
HeaderDetail
)
\ No newline at end of file
src/router.js
View file @
35d4fcdb
...
...
@@ -45,16 +45,19 @@ export default new Router({
path
:
"
/
"
,
name
:
"
home
"
,
component
:
home
,
meta
:
{
title
:
''
,
keepAlive
:
false
}
},
{
path
:
"
/order
"
,
name
:
"
orderIndex
"
,
component
:
orderIndex
component
:
orderIndex
,
meta
:
{
title
:
''
,
keepAlive
:
false
}
},
{
path
:
"
/mine
"
,
name
:
"
mineIndex
"
,
component
:
mineIndex
component
:
mineIndex
,
meta
:
{
title
:
''
,
keepAlive
:
false
}
},
{
path
:
"
/address/select
"
,
...
...
src/store/index.js
View file @
35d4fcdb
...
...
@@ -7,6 +7,7 @@ Vue.use(Vuex)
const
state
=
{
login
:
false
,
rejectLogin
:
false
,
// 提示登录弹框是否显示
userInfo
:{},
location
:
{
lat
:
''
,
lng
:
''
,
formattedAddress
:
''
},
// 当前地图定位
choosed_address
:{
lat
:
''
,
lng
:
''
,
formattedAddress
:
''
},
// 当前定位使用的地址信息
...
...
src/store/mutations.js
View file @
35d4fcdb
...
...
@@ -146,5 +146,9 @@ export default {
OUT_LOGIN
(
state
)
{
state
.
userInfo
=
{};
state
.
login
=
false
;
},
},
// 首页已拒绝登录,则不再显示提示登录弹框
REJECT_LOGIN
(
state
){
state
.
rejectLogin
=
true
;
}
}
\ No newline at end of file
src/views/address/select-address.vue
View file @
35d4fcdb
...
...
@@ -15,7 +15,7 @@
</van-cell>
</section>
<section
class=
"section"
>
<section
v-if=
"addressList.length"
class=
"section"
>
<van-cell>
<span
slot=
"title"
class=
"text-extra-small text-light-grey"
>
收货地址
</span>
<span
slot=
"right-icon"
class=
"text-primary"
@
click=
"onLink('address')"
>
管理地址
</span>
...
...
@@ -32,7 +32,7 @@
<van-cell
title=
"新增地址"
is-link
class=
"text-primary"
class=
"text-
light-
primary"
@
click=
"onLink('addAddress')"
/>
</van-col>
...
...
src/views/confirmOrder/index.vue
View file @
35d4fcdb
...
...
@@ -71,7 +71,9 @@ import pay from "@/components/pay.vue";
import
confirmFoodsList
from
"
@/components/confirm-foods-list.vue
"
;
import
{
mapState
,
mapMutations
}
from
"
vuex
"
;
import
{
preorder
,
placeOrder
}
from
"
../../common/serve
"
;
import
{
preorder
,
placeOrder
,
weChatConfig
}
from
"
../../common/serve
"
;
import
payUtils
from
"
../../common/utils/pay
"
;
export
default
{
data
()
{
...
...
@@ -122,8 +124,8 @@ export default {
...
mapState
([
"
cartList
"
,
"
shopInfo
"
,
"
choosed_address
"
,
"
remarkText
"
,
"
choosed_address
"
,
// 收货地址
"
remarkText
"
,
// 备注
"
invoice
"
,
"
userInfo
"
...
...
@@ -160,6 +162,14 @@ export default {
this
.
checkoutData
=
msg
.
data
;
}
this
.
showLoading
=
false
;
// 2、微信初始化
if
(
/MicroMessenger/
.
test
(
window
.
navigator
.
userAgent
))
{
let
msg
=
await
weChatConfig
(
window
.
location
.
href
,
[
"
chooseWXPay
"
]);
if
(
msg
.
code
==
0
)
{
payUtils
.
WxConfig
(
msg
.
data
);
}
}
},
//获取地址信息,第一个地址为默认选择地址
/* async initAddress() {
...
...
@@ -187,14 +197,15 @@ export default {
this
.
shopId
,
this
.
checkoutData
.
price_final
,
this
.
choosed_address
.
id
,
this
.
needbuy
this
.
needbuy
,
this
.
remarkText
);
if
(
res
.
code
==
0
)
{
this
.
order_no
=
res
.
data
.
order_no
;
// 预下单商品检测成功后执行支付操作
this
.
showActionSheet
=
true
;
}
else
{
this
.
submitBarTip
=
res
.
message
this
.
submitBarTip
=
res
.
message
;
}
this
.
btnLoading
=
false
;
},
...
...
src/views/home/index.vue
View file @
35d4fcdb
...
...
@@ -18,7 +18,7 @@
<i
class=
"cubeic-location text-primary text-extra-large"
></i>
<span
class=
"text-medium"
>
{{
curLocation
.
formattedAddress
}}
</span>
<div
class=
"location-action"
>
<i
class=
"cubeic-select text-
extra-small
"
></i>
<i
class=
"cubeic-select text-
medium
"
></i>
</div>
<div
id=
"amap"
></div>
</div>
...
...
@@ -26,7 +26,11 @@
<!-- 搜索框 -->
<cube-sticky-ele
ele-key=
"11"
>
<ul
class=
"sticky-header"
>
<van-search
placeholder=
"请输入搜索关键词"
shape=
"round"
@
click=
"onRouterLink('homeSearch',
{geohash:curLocation.lat+','+curLocation.lng})">
</van-search>
<van-search
placeholder=
"请输入搜索关键词"
shape=
"round"
@
click=
"onRouterLink('homeSearch',
{geohash:curLocation.lat+','+curLocation.lng})"
>
</van-search>
</ul>
</cube-sticky-ele>
...
...
@@ -57,10 +61,13 @@
<!-- 附近商家 -->
<section
class=
"section"
>
<div
class=
"section-hd"
>
附
件
商家
</div>
<ul
class=
"cards"
>
<div
class=
"section-hd"
>
附
近
商家
</div>
<ul
v-if=
"shopsData.length"
class=
"cards"
>
<shop-list
:options=
"shopsData"
:location=
"curLocation"
></shop-list>
</ul>
<div
v-else
class=
"empty_tips"
>
<p>
附近暂无商家
</p>
</div>
</section>
</cube-scroll>
</cube-sticky>
...
...
@@ -167,7 +174,7 @@ export default {
this
.
initData
();
},
computed
:
{
...
mapState
([
"
location
"
,
"
choosed_address
"
]),
...
mapState
([
"
location
"
,
"
choosed_address
"
,
"
rejectLogin
"
]),
// 当前使用的定位
curLocation
()
{
console
.
log
(
this
.
location
);
...
...
@@ -191,20 +198,30 @@ export default {
let
p3
=
getUser
();
Promise
.
all
([
p1
,
p2
,
p3
])
.
then
(
result
=>
{
let
shopsData
=
result
[
0
].
data
;
shopsData
[
"
discount
"
]
=
[
{
rule_id
:
4
,
condition
:
"
20.00
"
,
amount
:
"
1.00
"
},
{
rule_id
:
4
,
condition
:
"
30.00
"
,
amount
:
"
5.00
"
}
];
this
.
shopsData
=
[
shopsData
];
// if (result[0].code == 1003) {
// this.loading = false;
// if (!this.rejectLogin) this.noLoginDialog();
// return;
// }
if
(
result
[
0
].
code
==
0
)
{
let
shopsData
=
result
[
0
].
data
;
shopsData
[
"
discount
"
]
=
[
{
rule_id
:
4
,
condition
:
"
20.00
"
,
amount
:
"
1.00
"
},
{
rule_id
:
4
,
condition
:
"
30.00
"
,
amount
:
"
5.00
"
}
];
this
.
shopsData
=
[
shopsData
];
}
else
{
this
.
options
.
pullUpLoad
=
false
}
let
addressData
=
result
[
1
].
data
;
...
...
@@ -221,7 +238,6 @@ export default {
scrollHandler
({
y
})
{
this
.
scrollY
=
-
y
;
},
onBtnClick
()
{},
onSlideEvent
(
item
,
index
)
{
console
.
log
(
item
,
index
);
...
...
@@ -233,20 +249,6 @@ export default {
}
this
.
$router
.
push
({
name
:
route
});
},
// 获取数据
loadData
()
{
return
;
api
.
allMsg
({})
.
then
(
res
=>
{
if
(
res
.
Code
==
200
)
{
this
.
msg
=
res
.
Response
;
}
})
.
catch
(
err
=>
{
console
.
log
(
err
);
});
},
// 触发下拉刷新
onPullingDown
()
{
console
.
log
(
"
下拉刷新
"
);
...
...
@@ -277,6 +279,26 @@ export default {
this
.
$refs
.
scroll
.
forceUpdate
();
}
},
1000
);
},
noLoginDialog
()
{
this
.
$createDialog
({
type
:
"
confirm
"
,
title
:
"
温馨提示
"
,
content
:
"
登录后可获取更多优质服务
"
,
confirmBtn
:
{
text
:
"
去登录
"
},
cancelBtn
:
{
text
:
"
取消
"
},
onConfirm
:
()
=>
{
this
.
$router
.
push
({
name
:
"
login
"
});
this
.
$store
.
commit
(
"
REJECT_LOGIN
"
);
},
onCancel
:
()
=>
{
this
.
$store
.
commit
(
"
REJECT_LOGIN
"
);
}
}).
show
();
}
}
};
...
...
@@ -298,6 +320,10 @@ export default {
top: 0;
left: 60%;
background-color: #fff;
.cubeic-select {
padding: 6px;
}
}
}
...
...
@@ -313,4 +339,5 @@ export default {
overflow: hidden;
background-color: #fff;
}
</
style
>
\ No newline at end of file
src/views/login/login.vue
View file @
35d4fcdb
<
template
>
<div>
<cube-form
:model=
"model"
@
validate=
"validateHandler"
skipValidate
>
<cube-form
:model=
"model"
@
validate=
"validateHandler"
>
<cube-form-group>
<cube-form-item
:field=
"fields[0]"
></cube-form-item>
<div
class=
"form-group"
>
<cube-form-item
:field=
"fields[1]"
></cube-form-item>
<van-button
type=
"primary"
size=
"mini"
type=
"primary"
size=
"small"
:disabled=
"disabled"
inline
class=
"field__button"
...
...
@@ -15,15 +16,15 @@
</div>
</cube-form-group>
<cube-form-group
class
>
<van-button
type=
"primary"
size=
"large"
@
click=
"submitHandler"
>
登录
</van-button>
<van-button
type=
"primary"
size=
"large"
@
click
.prevent
=
"submitHandler"
>
登录
</van-button>
</cube-form-group>
</cube-form>
</div>
</
template
>
<
script
>
import
{
getCode
,
loginByCode
}
from
"
../../common/serve.js
"
;
import
{
getCode
,
loginByCode
,
getUser
}
from
"
../../common/serve.js
"
;
import
{
sessionstorage
}
from
"
../../common/utils/mUtils
"
;
export
default
{
data
()
{
return
{
...
...
@@ -67,6 +68,13 @@ export default {
},
methods
:
{
async
onGetCode
()
{
if
(
this
.
inputValue
==
""
)
{
this
.
$createToast
({
txt
:
"
请输入正确的手机号
"
,
type
:
"
txt
"
}).
show
();
return
;
}
this
.
disabled
=
true
;
let
res
=
await
getCode
(
this
.
model
.
inputValue
);
if
(
res
.
code
==
0
)
{
...
...
@@ -86,7 +94,8 @@ export default {
async
toLogin
()
{
let
res
=
await
loginByCode
(
this
.
model
.
inputValue
,
this
.
model
.
codeValue
);
if
(
res
.
code
==
0
)
{
localStorage
.
setItem
(
"
isLogin
"
,
true
);
// sessionstorage.save("isLogin", true);
this
.
_getUserInfo
();
this
.
$createToast
({
txt
:
"
登录成功
"
,
time
:
1000
,
...
...
@@ -102,10 +111,18 @@ export default {
}
this
.
actBtnLoading
=
false
;
},
// 获取用户信息,存入vuex
async
_getUserInfo
()
{
let
res
=
await
getUser
();
if
(
res
.
code
==
0
)
{
this
.
$store
.
commit
(
"
RECORD_USERINFO
"
,
res
.
data
.
user_info
);
}
},
// 满足验证结果,则去登录
submitHandler
(
e
)
{
e
.
stopPropagation
()
this
.
toLogin
();
if
(
this
.
valid
)
this
.
toLogin
();
},
// 表单验证的结果
validateHandler
(
result
)
{
this
.
validity
=
result
.
validity
;
this
.
valid
=
result
.
valid
;
...
...
@@ -134,7 +151,6 @@ export default {
</
script
>
<
style
lang=
"stylus"
scoped
>
.form-group {
position: relative;
...
...
src/views/mine/index.vue
View file @
35d4fcdb
...
...
@@ -26,20 +26,25 @@
</van-col>
</van-row>
<van-row
class=
"section"
>
<van-row
class=
"section
cell-hg
"
>
<van-cell-group>
<van-cell
icon=
"points"
title=
"我的积分"
is-link
@
click=
"onRouterLink(cellRoute[0].routeName)"
/>
<van-cell
icon=
"points"
title=
"我的积分"
is-link
@
click=
"onRouterLink(cellRoute[0].routeName)"
/>
<van-cell
icon=
"gold-coin-o"
title=
"我的优惠券"
is-link
@
click=
"onRouterLink(cellRoute[1].routeName)"
/>
<van-cell
icon=
"question-o"
title=
"帮助"
@
click=
"onRouterLink(cellRoute[2].routeName)"
/>
<van-cell
icon=
"question-o"
title=
"帮助"
@
click=
"onRouterLink(cellRoute[2].routeName)"
/>
</van-cell-group>
</van-row>
<van-row
class=
"section"
>
<van-row
class=
"section
cell-hg
"
>
<van-cell-group>
<van-cell
icon=
"location-o"
...
...
@@ -50,7 +55,7 @@
</van-cell-group>
</van-row>
<van-row
class=
"section"
>
<van-row
class=
"section
cell-hg
"
>
<van-cell-group>
<van-cell
icon=
"setting-o"
title=
"账号设置"
@
click=
"onRouterLink(cellRoute[4].routeName)"
/>
</van-cell-group>
...
...
@@ -75,7 +80,7 @@ export default {
data
()
{
return
{
nologin
:
{
action
:
"
登录/注册
"
,
action
:
"
立即登录
"
,
avatar
:
"
https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561635028219&di=4da64de39130854765f4e0a33fca589d&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201704%2F27%2F20170427155254_Kctx8.jpeg
"
},
...
...
@@ -186,7 +191,10 @@ export default {
}
.van-cell {
font-weight: bolder;
font-size: $fontsize-large;
.van-cell__left-icon {
scw($fontsize-large-xx, $color-primary, 600);
}
}
</
style
>
src/views/order/index.vue
View file @
35d4fcdb
...
...
@@ -13,20 +13,20 @@
:data=
"orderList"
@
select=
"orderDetail"
@
show=
"linkShop"
@
more=
"anotherOrder "
@
more=
"anotherOrder"
@
pay=
"payEvent"
class=
"content"
></order-card>
</cube-scroll>
<van-row
v-else-if=
"!pageLoading"
type=
"flex"
justify=
"center"
class=
"bg-transparent nodata-tip"
>
<van-icon
name=
"bag-o"
size=
"60"
color=
"#7d7e80"
>
<van-row
v-else-if=
"!pageLoading"
type=
"flex"
justify=
"center"
class=
"empty_tips"
>
<div
v-if=
"!login"
>
<p>
登录后查看外卖订单
</p>
<van-button
size=
"small"
type=
"primary"
@
click=
"toLogin"
>
立即登录
</van-button>
</div>
<div
v-else-if=
"login"
>
<p
class=
"text-default"
>
暂无订单
</p>
</
van-icon
>
</
div
>
</van-row>
<footGuide
default=
"orderIndex"
></footGuide>
...
...
@@ -40,17 +40,28 @@ import { mapState } from "vuex";
export
default
{
data
()
{
return
{
empty
:
false
,
pageLoading
:
true
,
orderList
:
[],
pageNumber
:
1
,
last_page
:
1
/* loading: false, //控制上拉加载的加载动画
finished: false, //控制在页面往下移动到底部时是否调用接口获取数据
isLoading: false //控制下拉刷新的加载动画 */
last_page
:
1
,
options
:
{
pullDownRefresh
:
{
threshold
:
90
,
stop
:
40
},
pullUpLoad
:
{
threshold
:
0
,
txt
:
{
// more: "上拉加载更多",
// noMore: "没有更多数据"
}
}
}
};
},
computed
:
{
...
mapState
([
"
location
"
,
"
choosed_address
"
,
"
cartList
"
]),
...
mapState
([
"
lo
gin
"
,
"
lo
cation
"
,
"
choosed_address
"
,
"
cartList
"
]),
// 当前使用的定位
curLocation
()
{
return
this
.
choosed_address
.
lat
...
...
@@ -58,17 +69,6 @@ export default {
:
this
.
location
.
lat
?
this
.
location
:
"
定位中
"
;
},
options
()
{
return
{
pullDownRefresh
:
{
threshold
:
40
,
stop
:
40
,
},
pullUpLoad
:
{
threshold
:
20
,
}
};
}
},
components
:
{
...
...
@@ -76,14 +76,15 @@ export default {
footGuide
},
created
()
{
this
.
initData
();
if
(
this
.
login
)
{
this
.
initData
();
}
},
methods
:
{
initData
()
{
this
.
_getOrder
();
},
async
_getOrder
()
{
//获取不同类型的订单
const
orderType
=
"
all
"
;
let
res
=
await
getOrder
(
orderType
,
this
.
pageNumber
);
...
...
@@ -99,46 +100,34 @@ export default {
// 页面初始化是加载动画
if
(
this
.
pageNumber
<=
2
)
{
this
.
pageLoading
=
false
;
}
}
else
{
if
(
res
.
code
==
1003
)
{
this
.
pageLoading
=
false
;
return
;
}
// 如果没有新数据
this
.
$refs
.
scroll
.
forceUpdate
();
}
/* if (res.code == 0) {
this.orderList = this.orderList.concat(res.data.data);
this.loading = false; //停止加载状态
if (this.pageNumber > res.data.page.count) {
// 结束加载
this.finished = true;
}
this.pageNumber++;
} else {
this.finished = true;
}
// 页面初始化是加载动画
if (this.pageNumber <= 2) {
this.pageLoading = false;
}
this.loading = false; */
},
// 下拉加载
onPullingDown
()
{
this
.
pageNumber
=
1
;
this
.
pageNumber
=
1
;
this
.
orderList
=
[];
this
.
_getOrder
();
},
// 上拉刷新
onPullingUp
()
{
this
.
_getOrder
();
},
// 点击订单卡片商品列表,进入对应的订单详情
orderDetail
(
order_no
)
{
this
.
$router
.
push
({
name
:
"
orderDetails
"
,
params
:
{
order_no
:
order_no
}
});
},
// 点击订单卡片头部,进入对应的店铺
linkShop
(
shopId
)
{
this
.
$router
.
push
({
name
:
"
shop
"
,
...
...
@@ -146,6 +135,12 @@ export default {
query
:
{
geohash
:
this
.
curLocation
.
lat
+
"
,
"
+
this
.
curLocation
.
lng
}
});
},
// 未登录的情况
toLogin
()
{
this
.
$router
.
push
({
name
:
"
login
"
});
},
// 再来一单
anotherOrder
(
shopId
,
order_no
)
{
this
.
$router
.
push
({
...
...
@@ -156,16 +151,19 @@ export default {
order_no
:
order_no
}
});
},
payEvent
(
shop_id
,
order_no
)
{
this
.
$router
.
push
({
name
:
"
orderDetails
"
,
params
:
{
id
:
order_no
,
shopId
:
shop_id
}
});
}
}
,
watch
:
{
}
/*
watch: {
"$route.query": function(newVal, oldVal) {
if (newVal.type == "all") {
this.orderList = [];
this.initData();
}
}
}
}
*/
};
</
script
>
...
...
@@ -190,4 +188,18 @@ export default {
.van-panel__content .van-cell__value, .van-panel__footer {
text-align: right;
}
.empty_tips {
> div {
text-align: center;
}
p {
font-size: $fontsize-large;
}
.van-button {
margin-top: 10px;
}
}
</
style
>
src/views/order/order-detail.vue
View file @
35d4fcdb
<
template
>
<div
class=
"scroll-list-wrap"
>
<cube-scroll
ref=
"scroll"
>
<h1
class=
"page-title"
>
订单已送达
</h1>
<h1
class=
"page-title"
>
{{
order
.
order_status
|
orderStatus
}}
</h1>
<section
class=
"section"
>
<confirm-foods-list
:shopInfo=
"shopInfo"
:goods_list=
"order.goods"
></confirm-foods-list>
<van-cell
title=
"联系商家"
class=
"total"
>
<van-cell
class=
"total"
>
<span
slot=
"title"
class=
"text-primary"
@
click=
"callEvent"
>
联系商家
</span>
<span>
实付 ¥
<strong
class=
"text-medium"
>
{{
order
.
price_final
}}
</strong>
实付
<strong>
¥
<strong
class=
"text-medium"
>
{{
order
.
price_final
}}
</strong>
</strong>
</span>
</van-cell>
</section>
...
...
@@ -38,14 +42,18 @@
</div>
</van-panel>
</cube-scroll>
<pay
:order_no=
"order.order_no"
:showActionSheet=
"showActionSheet"
@
click=
"payAction"
></pay>
</div>
</
template
>
<
script
>
import
pay
from
"
@/components/pay.vue
"
;
import
confirmFoodsList
from
"
@/components/confirm-foods-list.vue
"
;
import
{
mapState
,
mapMutations
}
from
"
vuex
"
;
import
{
setTimeout
}
from
"
timers
"
;
import
{
getOrderDetail
}
from
"
../../common/serve
"
;
import
payUtils
from
"
../../common/utils/pay
"
;
export
default
{
data
()
{
return
{
...
...
@@ -53,19 +61,45 @@ export default {
order_status
:
""
,
goods
:
[]
},
orderAddress
:
{}
orderAddress
:
{},
shop_id
:
0
,
showActionSheet
:
false
};
},
components
:
{
pay
,
confirmFoodsList
},
computed
:
{
...
mapState
([
"
shopInfo
"
])
},
created
()
{
this
.
shop_id
=
this
.
$route
.
params
.
shopId
;
this
.
getOrderInfo
();
// 微信初始化
if
(
/MicroMessenger/
.
test
(
window
.
navigator
.
userAgent
))
{
weChatConfig
(
window
.
location
.
href
,
[
"
chooseWXPay
"
]).
then
(
res
=>
{
if
(
res
.
code
==
0
)
{
payUtils
.
WxConfig
(
res
.
data
);
}
});
}
},
filters
:
{
orderStatus
(
value
)
{
let
status
=
""
;
if
(
value
==
"
unpaid
"
)
{
status
=
"
等待支付
"
;
}
else
if
(
value
==
"
preparing
"
)
{
status
=
"
订单配送中
"
;
}
else
if
(
value
==
"
received
"
)
{
status
=
"
订单已送达
"
;
}
else
{
status
=
"
配送中
"
;
}
return
status
;
}
},
methods
:
{
async
getOrderInfo
()
{
//根据路由参数 获取不同类型的订单
...
...
@@ -74,12 +108,24 @@ export default {
if
(
res
.
code
==
0
)
{
let
data
=
res
.
data
;
this
.
order
=
res
.
data
;
this
.
orderAddress
=
res
.
data
.
user_address
this
.
orderAddress
=
res
.
data
.
user_address
;
}
else
{
// 显示错误页面
}
},
callEvent
()
{
this
.
toast
=
this
.
$createToast
({
txt
:
"
无商家信息
"
,
type
:
"
txt
"
}).
show
();
},
this
.
$toast
.
clear
();
// 支付
async
onSubmit
()
{
this
.
showActionSheet
=
true
;
},
payAction
()
{
this
.
showActionSheet
=
false
;
}
}
};
...
...
@@ -88,19 +134,29 @@ export default {
<
style
lang=
"stylus"
scoped
>
@import '~common/stylus/variable.styl';
.cube-scroll-list-wrapper{
background :transparent;}
.cube-scroll-list-wrapper {
background: transparent;
}
.page-title {
padding: 20px 10px;
}
.van-panel__header span{
font-weight:600;
.van-panel__header span {
font-weight: 600;
font-size: $fontsize-large;
}
.van-cell__value {
font-size: $fontsize-medium;
color: #6a6a6a;
.section {
.total .van-cell__value {
color: #323232;
}
.van-cell__value {
font-size: $fontsize-medium;
color: #6a6a6a;
}
}
</
style
>
src/views/shopItem/children/headerDetail/header-detail.vue
0 → 100644
View file @
35d4fcdb
<
template
>
<transition
name=
"fade"
>
<div
v-show=
"visible"
class=
"header-detail"
@
touchmove
.
stop
.
prevent
>
<div
class=
"detail-wrapper clear-fix"
>
<div
class=
"detail-main"
>
<h1
class=
"name"
>
{{
seller
.
name
}}
</h1>
<!--
<div
class=
"star-wrapper"
>
<star
:size=
"48"
:score=
"seller.score"
></star>
</div>
-->
<div
class=
"title"
>
<div
class=
"text"
>
优惠信息
</div>
</div>
<ul
v-if=
"seller.supports"
class=
"supports"
>
<li
class=
"support-item"
v-for=
"(item,index) in seller.supports"
:key=
"item.id"
>
<!--
<support-ico
:size=
2
:type=
"seller.supports[index].type"
></support-ico>
-->
<span
class=
"text"
>
{{
seller
.
supports
[
index
].
description
}}
</span>
</li>
</ul>
<div
class=
"title"
>
<div
class=
"text"
>
商家公告
</div>
</div>
<div
class=
"bulletin"
>
<p
class=
"content"
>
{{
seller
.
bulletin
}}
</p>
</div>
</div>
</div>
<div
class=
"detail-close"
@
click=
"hide"
>
<i
class=
"icon-close"
></i>
</div>
</div>
</transition>
</
template
>
<
script
>
import
popupMixin
from
'
../../../../common/mixins/popup
'
// import SupportIco from '../../../../components/support-ico/support-ico'
export
default
{
name
:
'
header-detail
'
,
mixins
:
[
popupMixin
],
props
:
{
seller
:
{
type
:
Object
,
default
()
{
return
{}
}
}
},
components
:
{
// SupportIco
}
}
</
script
>
<
style
lang=
"stylus"
scoped
>
// @import "~common/stylus/mixin"
// @import "~common/stylus/variable"
.header-detail
position: fixed
z-index: 999
top: 0
left: 0
width: 100%
height: 100%
overflow: auto
backdrop-filter: blur(2px)
opacity: 1
// color: $color-white
background: $color-white
&.fade-enter-active, &.fade-leave-active
transition: all 0.5s
&.fade-enter, &.fade-leave-active
opacity: 0
background: $color-background
.detail-wrapper
display: inline-block
width: 100%
min-height: 100%
.detail-main
margin-top: 64px
padding-bottom: 64px
.name
line-height: 16px
text-align: center
font-size: $fontsize-large
font-weight: 700
.star-wrapper
margin-top: 18px
padding: 2px 0
text-align: center
.title
display: flex
width: 80%
margin: 28px auto 24px auto
.text
padding: 0 12px
font-weight: 700
font-size: $fontsize-medium
.supports
width: 80%
margin: 0 auto
.support-item
display: flex
align-items: center
padding: 0 12px
margin-bottom: 12px
&:last-child
margin-bottom: 0
.support-ico
margin-right: 6px
.text
line-height: 16px
font-size: $fontsize-small
.bulletin
width: 80%
margin: 0 auto
.content
padding: 0 12px
line-height: 24px
font-size: $fontsize-small
.detail-close
position: relative
width: 30px
height: 30px
margin: -64px auto 0 auto
clear: both
font-size: $fontsize-large-xxxx
</
style
>
src/views/shopItem/children/shop.vue
View file @
35d4fcdb
...
...
@@ -96,7 +96,11 @@ export default {
computed
:
{
...
mapState
([
"
cartList
"
]),
seller
()
{
return
{
deliveryPrice
:
5
,
minPrice
:
20
};
return
{
deliveryPrice
:
0
,
minPrice
:
0
,
toggle
:
this
.
$route
.
query
.
order_no
?
true
:
false
};
},
//购物车中总共商品的数量
totalNum
:
function
()
{
...
...
@@ -160,25 +164,25 @@ export default {
data
=
msg
.
data
.
goods
;
let
shop
=
(
cart
[
this
.
shopId
]
=
{});
// if (cart && cart[this.shopId]) {
this
.
menuList
.
forEach
((
item
,
index
)
=>
{
item
.
goods_list
.
forEach
(
good
=>
{
data
.
forEach
(
food
=>
{
if
(
food
.
goods_id
==
good
.
id
)
{
let
category
=
(
shop
[
item
.
category_id
]
=
shop
[
item
.
category_id
]
||
{});
category
[
food
.
goods_id
]
=
{
goods_category_id
:
item
.
category_id
,
id
:
food
.
goods_id
,
name
:
food
.
goods_name
,
num
:
food
.
goods_quantity
,
price
:
food
.
goods_price
};
}
});
this
.
menuList
.
forEach
((
item
,
index
)
=>
{
item
.
goods_list
.
forEach
(
good
=>
{
data
.
forEach
(
food
=>
{
if
(
food
.
goods_id
==
good
.
id
)
{
let
category
=
(
shop
[
item
.
category_id
]
=
shop
[
item
.
category_id
]
||
{});
category
[
food
.
goods_id
]
=
{
goods_category_id
:
item
.
category_id
,
id
:
food
.
goods_id
,
name
:
food
.
goods_name
,
num
:
food
.
goods_quantity
,
price
:
food
.
goods_price
};
}
});
});
});
// }else{}
this
.
$store
.
commit
(
'
UPDATE_SHOP_CART
'
,
cart
)
this
.
$store
.
commit
(
"
UPDATE_SHOP_CART
"
,
cart
);
console
.
log
(
cart
);
}
}
...
...
@@ -216,7 +220,8 @@ export default {
shopId
:
this
.
shopId
.
toString
(),
deliveryPrice
:
this
.
seller
.
deliveryPrice
,
minPrice
:
this
.
seller
.
minPrice
,
fold
:
true
fold
:
true
,
toggle
:
this
.
seller
.
toggle
// 是否主动展示购物列表
}
});
this
.
shopCartStickyComp
.
show
();
...
...
@@ -273,15 +278,7 @@ export default {
}
},
watch
:
{
//showLoading变化时说明组件已经获取初始化数据,在下一帧nextTick进行后续操作
/* showLoading: function(value) {
if (!value) {
this.$nextTick(() => {
this.getFoodListHeight();
this.initCategoryNum();
});
}
},*/
shopCart
:
function
(
value
)
{
this
.
initCategoryNum
();
},
...
...
@@ -308,9 +305,12 @@ export default {
.cube-scroll-wrapper {
width: 100%;
.cube-scroll-nav-main{
padding-bottom:100px;
}
.cube-scroll-nav-bar-item {
position: relative;
padding: 20px 4px;
&_active {
background-color: #fff;
...
...
@@ -322,7 +322,6 @@ export default {
font-size: $fontsize-small;
.van-tag {
// padding: 2px 4px;
right: 0;
top: 10%;
}
...
...
@@ -335,10 +334,6 @@ export default {
background-color: #fff;
scw($fontsize-small, #6e6e6e, 600);
}
.cube-scroll-nav-bar-item {
padding: 20px 4px;
}
}
.van-card {
...
...
src/views/shopItem/index.vue
View file @
35d4fcdb
<
template
>
<div
class=
"scroll-list-wrap view-wrapper"
>
<cube-sticky
:pos=
"scrollY"
:check-top=
"checkTop"
fixed-show-ani=
"sticky-fixed-show"
@
diff-change=
"diffChange"
>
<cube-scroll
ref=
"scroll"
:scroll-events=
"scrollEvents"
:options=
"options"
@
scroll=
"scrollHandler"
>
<header
class=
"sticky-header"
slot=
"fixed"
ref=
"stickyHeader"
>
<van-search
placeholder=
"请输入搜索关键词"
/>
</header>
<section
ref=
"header"
class=
"page-hd"
>
<van-image
width=
"76"
height=
"76"
:src=
"$globalUrlFile+shopInfo.icon"
></van-image>
<div
class=
"prepend-content"
>
<h1>
{{
shopInfo
.
name
}}
</h1>
<p
class=
"text-light-grey text-extra-small"
>
评价4.2 月售 等描述
</p>
<!-- 优惠内容 -->
<div
class=
"tags"
>
<van-tag
v-for=
"tag in shopInfo.discount"
:key=
"tag.id"
color=
"#f44"
plain
size=
"10"
>
{{
parseInt
(
tag
.
condition
)
}}
减
{{
parseInt
(
tag
.
amount
)
}}
</van-tag>
<div
class=
"more text-extra-small text-light-grey"
>
{{
shopInfo
.
discount
.
length
}}
个优惠
<i
class=
"cubeic-select"
></i>
<div
class=
"scroll-list-wrap "
:class=
"
{'view-wrapper':!pageLoading}">
<cube-loading
v-if=
"pageLoading"
:size=
"40"
></cube-loading>
<cube-sticky
:pos=
"scrollY"
:check-top=
"checkTop"
fixed-show-ani=
"sticky-fixed-show"
>
<!--
<header
class=
"sticky-header cube-sticky-fixed"
>
<div
class=
"icons-box"
:style=
"
{opacity:1-opacity}">
<i
class=
"van-icon van-icon-search"
></i>
</div>
<van-search
:style=
"
{opacity:opacity}" shape="round" placeholder="请输入搜索关键词" />
</header>
-->
<cube-scroll
ref=
"scroll"
:scroll-events=
"scrollEvents"
:options=
"options"
@
scroll=
"scrollHandler"
>
<section
ref=
"header"
class=
"page-hd"
>
<van-image
width=
"76"
height=
"76"
:src=
"$globalUrlFile+shopInfo.icon"
></van-image>
<div
class=
"prepend-content"
>
<h1>
{{
shopInfo
.
name
}}
</h1>
<p
class=
"text-light-grey text-extra-small"
>
评价4.2 月售 等描述
</p>
<!-- 优惠内容 -->
<div
class=
"tags"
@
click=
"showHeaderDetail"
>
<van-tag
v-for=
"tag in shopInfo.discount"
:key=
"tag.id"
color=
"#f44"
plain
size=
"10"
>
{{
parseInt
(
tag
.
condition
)
}}
减
{{
parseInt
(
tag
.
amount
)
}}
</van-tag>
<div
class=
"more text-extra-small text-light-grey"
>
{{
shopInfo
.
discount
.
length
}}
个优惠
<i
class=
"cubeic-select"
></i>
</div>
</div>
</div>
</div>
</section>
<div
class=
"page-bd"
>
<cube-sticky-ele>
<cube-tab-bar
ref=
"tabBar"
v-model=
"currentTab"
show-slider
inline
@
change=
"changeHandler"
class=
"text-medium"
>
<cube-tab
v-for=
"item in tabs"
:label=
"item.name"
:key=
"item.name"
>
{{
item
.
name
}}
</cube-tab>
</cube-tab-bar>
</cube-sticky-ele>
</section>
<div
class=
"page-bd"
>
<cube-sticky-ele>
<cube-tab-bar
ref=
"tabBar"
v-model=
"currentTab"
show-slider
inline
@
change=
"changeHandler"
class=
"text-medium"
>
<cube-tab
v-for=
"item in tabs"
:label=
"item.name"
:key=
"item.name"
>
{{
item
.
name
}}
</cube-tab>
</cube-tab-bar>
</cube-sticky-ele>
<cube-tab-panels
v-model=
"currentTab"
ref=
"panel"
>
<cube-tab-panel
v-for=
"item in tabs"
:label=
"item.name"
:key=
"item.name"
>
<component
:is=
"item.is"
:disable=
"disable"
@
scroll0=
"scrollTop"
:style=
"
{height:contentH}"
>
</component>
</cube-tab-panel>
</cube-tab-panels>
</div>
</cube-scroll>
</cube-sticky>
<cube-tab-panels
v-model=
"currentTab"
ref=
"panel"
>
<cube-tab-panel
v-for=
"item in tabs"
:label=
"item.name"
:key=
"item.name"
>
<component
:is=
"item.is"
:disable=
"disable"
@
scroll0=
"scrollTop"
:style=
"
{height:contentH}"
>
</component>
</cube-tab-panel>
</cube-tab-panels>
</div>
</cube-scroll>
</cube-sticky>
</div>
</
template
>
...
...
@@ -96,6 +94,7 @@ export default {
tabBarH
:
0
,
//tabbar高度
data
:
goods
,
pageLoading
:
true
,
shopId
:
0
,
shopInfo
:
{},
currentTab
:
"
点餐
"
,
//当前导航 active 项的 key 值
...
...
@@ -119,16 +118,12 @@ export default {
},
contentH
()
{
return
document
.
body
.
clientHeight
-
this
.
tabBarH
+
"
px
"
;
},
opacity
()
{
let
opacity
=
0
;
return
(
opacity
=
this
.
scrollY
/
30
>
1
?
1
:
this
.
scrollY
/
30
);
}
},
mounted
()
{
this
.
$nextTick
(()
=>
{
this
.
headerH
=
this
.
$refs
.
header
.
offsetHeight
;
// 包含tabbar 在内的头部高度
this
.
tabBarH
=
this
.
$refs
.
tabBar
.
offsetHeight
;
// tabbar 高度
});
},
watch
:
{
disable
(
newVal
)
{
//控制外层的滚动
...
...
@@ -148,14 +143,6 @@ export default {
this
.
disable
=
true
;
}
},
diffChange
(
diff
,
height
)
{
console
.
log
(
diff
,
height
);
let
opacity
=
0
;
if
(
height
)
{
opacity
=
diff
/
height
;
}
this
.
$refs
.
stickyHeader
.
style
.
opacity
=
opacity
;
},
changeHandler
(
label
)
{
this
.
currentTab
=
label
;
console
.
log
(
"
changed to:
"
,
label
);
...
...
@@ -191,6 +178,8 @@ export default {
];
this
.
$store
.
commit
(
"
CURRENT_SHOPINFO
"
,
shopMsg
.
data
);
}
this
.
pageLoading
=
false
;
})
.
catch
(
error
=>
{});
},
...
...
@@ -199,6 +188,26 @@ export default {
},
disableFn
()
{
this
.
$refs
.
scroll
.
disable
();
},
showHeaderDetail
()
{
/* this.headerDetailComp =
this.headerDetailComp ||
this.$createHeaderDetail({
$props: {
seller: "shopInfo"
}
});
this.headerDetailComp.show(); */
}
},
//pageLoading变化时说明组件已经获取初始化数据,在下一帧nextTick进行后续操作
pageLoading
:
function
(
value
)
{
if
(
!
value
)
{
this
.
$nextTick
(()
=>
{
this
.
headerH
=
this
.
$refs
.
header
.
offsetHeight
;
// 包含tabbar 在内的头部高度
this
.
tabBarH
=
this
.
$refs
.
tabBar
.
offsetHeight
;
// tabbar 高度
});
}
}
};
...
...
@@ -207,7 +216,7 @@ export default {
<
style
lang=
"stylus"
>
.view-wrapper {
background: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3340225592,2502432116&fm=26&gp=0.jpg') no-repeat; // ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3340225592,2502432116&fm=26&gp=0.jpg) no-repeat;
background-size:
cover
;
background-size:
100%
;
}
.page-hd {
...
...
@@ -267,4 +276,30 @@ export default {
.cube-tab-panel {
background-color: #f8f8f8;
}
.sticky-header {
z-index: 999;
.icons-box {
position: fixed;
left: 0;
text-align: right;
padding: 10px 10px 0;
right: 0;
z-index: -1;
.van-icon {
color: $color-white;
}
}
.van-search {
// opacity: 0;
z-index: 99;
&__content {
flex: auto;
}
}
}
</
style
>
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment