Skip to content

V
vue2-elm

momo的小宝贝 / vue2-elm
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vue2-elm

体验新版 GitCode，发现更多精彩内容 >>

提交 e4aebfe4 编写于 作者: M maguohua
浏览文件
操作

updata shpp

上级 714ae8e0
隐藏空白更改
内联 并排
Showing with 236 addition and 147 deletion
README.md
浏览文件 @ e4aebfe4
......@@ -19,7 +19,7 @@ vue2 + vue-rotuer2 + vuex2 + webpack + ES6/7 + fetch + sass + flex + svg + http-
- [x] 展示所选地址附近商家列表 -- 完成
- [x] 搜索美食，餐馆 -- 完成
- [x] 根据距离、销量、评分、特色菜、配送方式等进行排序和筛选 -- 完成
- [ ] 餐馆详细页面
- [x] 餐馆详细页面 -- 完成
- [ ] 商品评价页面
- [ ] 购物车功能
- [ ] 登陆、注册
......
src/App.vue
浏览文件 @ e4aebfe4
......@@ -86,6 +86,14 @@
<symbol viewBox="0 0 14 16" id="cart">
<path fill="#FFF" fill-rule="evenodd" d="M12.364 2.998H2.088L1.816.687a.455.455 0 0 0-.478-.431L.431.303A.454.454 0 0 0 0 .78l1.256 10.893c.006.293.011 1.325.933 1.325h9.546a.455.455 0 0 0 .455-.454v-.881a.454.454 0 0 0-.455-.455H3.05l-.11-.937h8.606c.998 0 1.889-.724 1.989-1.616l.455-4.04c.1-.893-.628-1.617-1.626-1.617zm-.45 4.245c-.075.669-.317 1.212-1.066 1.212H2.727L2.3 4.812h8.821c.749 0 1.065.543.99 1.212l-.197 1.219zM2.416 15.79a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm9.092 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
</symbol>
<symbol viewBox="0 0 58 58" id="cart-icon">
<defs>
<filter id="a" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feOffset in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><path id="b" d="M7.614 4.051c-1.066.086-1.452-.398-1.752-1.584C5.562 1.28.33 5.88.33 5.88l3.71 19.476c0 .148-1.56 7.515-1.56 7.515-.489 2.19.292 4.27 3.56 4.32 0 0 36.917.017 36.92.047 1.979-.012 2.981-.995 3.013-3.039.03-2.043-1.045-2.978-2.987-2.993L8.83 31.192s.86-3.865 1.077-3.865c0 0-5.788.122 32.065-1.956.606-.033 2.018-.764 2.298-1.848 1.113-4.317 4.008-13.26 4.458-15.64.932-4.925 2.061-8.558-4.28-7.405 0 0-35.768 3.487-36.833 3.573z"/>
</defs>
<g fill="none" fill-rule="evenodd" filter="url(#a)" transform="translate(3 2)">
<g transform="translate(5.038 7.808)"><mask id="c" fill="#fff"><use xlink:href="#b"/></mask><use fill="#FFF" xlink:href="#b"/><path fill="#2073C1" d="M53.962 7.774l-5.701 19.305-40.78 1.574z" opacity=".1" mask="url(#c)"/></g><path stroke="#FFF" stroke-width="6" d="M9.374 18.722S7.868 11.283 7.323 8.71C6.778 6.136 5.86 5.33 3.978 4.52 2.096 3.713.367 2.286.367 2.286" stroke-linecap="round"/><circle cx="46" cy="51" r="4" fill="#FFF"/><circle cx="12" cy="51" r="4" fill="#FFF"/>
</g>
</symbol>
</defs>
</svg>
<transition name="router-fade" mode="out-in">
......
src/config/mUtils.js
浏览文件 @ e4aebfe4
......@@ -241,10 +241,10 @@ export const animate = (element, target, duration = 400, mode = 'ease-out', call
status = iCurrent != target[attr];
break;
case 'linear':
status = Math.abs(Math.abs(iCurrent) - Math.abs(target[attr])) > Math.abs(iSpeed)
status = Math.abs(Math.abs(iCurrent) - Math.abs(target[attr])) > Math.abs(iSpeed);
break;
case 'ease-in':
status = Math.abs(Math.abs(iCurrent) - Math.abs(target[attr])) > Math.abs(iSpeed)
status = Math.abs(Math.abs(iCurrent) - Math.abs(target[attr])) > Math.abs(iSpeed);
break;
default:
status = iCurrent != target[attr];
......
src/page/shop/shop.vue
浏览文件 @ e4aebfe4
......@@ -123,6 +123,20 @@
</li>
</ul>
</section>
<section class="buy_cart_container">
<section class="cart_icon_container">
<svg class="cart_icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-icon"></use>
</svg>
</section>
<section class="cart_num">
<div>¥ 0</div>
<div>配送费¥{{deliveryFee}}</div>
</section>
<section class="gotopay">
<span>还差¥{{minimumOrderAmount}}起送</span>
</section>
</section>
<loading v-if="showLoading"></loading>
<transition name="router-slid">
<router-view></router-view>
......@@ -149,7 +163,7 @@
showActivities: false, //是否显示活动详情
menuList: [], //食品列表
menuIndex: 0, //已选菜单索引值，默认为0
menuIndexChange: false,//解决选中index时，scroll监听事件重复判断设置index的bug
menuIndexChange: true,//解决选中index时，scroll监听事件重复判断设置index的bug
shopListTop: [], //商品列表的高度集合
TitleDetailIndex: null, //点击展示列表头部详情
}
......@@ -170,6 +184,20 @@
...mapState([
'latitude','longitude','cartList'
]),
deliveryFee: function () {
if (this.shopDetailData) {
return this.shopDetailData.float_delivery_fee;
}else{
return null;
}
},
minimumOrderAmount: function () {
if (this.shopDetailData) {
return this.shopDetailData.float_minimum_order_amount;
}else{
return null;
}
},
},
methods: {
...mapMutations([
......@@ -266,6 +294,60 @@
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.buy_cart_container{
position: absolute;
background-color: #3d3d3f;
bottom: 0;
left: 0;
@include wh(100%, 2rem);
.cart_icon_container{
background-color: #3d3d3f;
position: absolute;
padding: .4rem;
border: 0.25rem solid #444;
border-radius: 50%;
left: .5rem;
top: -.7rem;
.cart_icon{
@include wh(1.2rem, 1.2rem);
}
}
.cart_num{
@include ct;
left: 3.5rem;
div{
color: #fff;
}
div:nth-of-type(1){
font-size: .8rem;
font-weight: bold;
margin-bottom: .1rem;
}
div:nth-of-type(2){
font-size: .4rem;
}
}
.gotopay{
position: absolute;
right: 0;
background-color: #535356;
@include wh(5rem, 100%);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
span{
@include sc(.65rem, #fff);
font-weight: bold;
}
}
}
.shop_container{
display: flex;
flex-direction: column;
......@@ -276,6 +358,147 @@
overflow: hidden;
padding-bottom: 2rem;
}
.shop_detail_header{
overflow: hidden;
position: relative;
.header_cover_img{
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9;
filter: blur(10px);
}
.description_header{
position: relative;
z-index: 10;
background-color: rgba(119,103,137,.43);
padding: 0.4rem 0 0.4rem 0.4rem;
width: 100%;
overflow: hidden;
.description_top{
display: flex;
.description_left{
margin-right: 0.3rem;
img{
@include wh(2.9rem, 2.9rem);
display: block;
border-radius: 0.15rem;
}
}
.description_right{
flex: 1;
.description_title{
@include sc(.8rem, #fff);
font-weight: bold;
width: 100%;
margin-bottom: 0.3rem;
}
.description_text{
@include sc(.5rem, #fff);
margin-bottom: 0.3rem;
}
.description_promotion{
@include sc(.5rem, #fff);
width: 12.5rem;
}
}
.description_arrow{
@include ct;
right: 0.3rem;
z-index: 11;
}
}
.description_footer{
@include fj;
margin-top: 0.5rem;
padding-right: .4rem;
p{
@include sc(.5rem, #fff);
span{
color: #fff;
}
.tip_icon{
padding: .01rem;
border: 0.025rem solid #fff;
border-radius: 0.1rem;
display: inline-block;
}
}
.ellipsis{
width: 87%;
}
}
.activities_details{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #262626;
z-index: 12;
padding: 1.25rem;
.activities_shoptitle{
text-align: center;
@include sc(.8rem, #fff);
}
.activities_ratingstar{
display: flex;
justify-content: center;
transform: scale(2.2);
margin-top: .7rem;
}
.activities_list{
margin-top: 1.5rem;
margin-bottom: 1rem;
@include sc(.5rem, #fff);
li{
margin-bottom: .2rem;
.activities_icon{
padding: .01rem;
border: 0.025rem solid #fff;
border-radius: 0.1rem;
}
span{
color: #fff;
line-height: .6rem;
}
}
}
.activities_shopinfo{
p{
line-height: .7rem;
@include sc(.5rem, #fff);
}
}
.activities_title_style{
text-align: center;
margin-bottom: 1rem;
span{
@include sc(.5rem, #fff);
border: 0.025rem solid #555;
padding: .2rem .4rem;
border-radius: 0.5rem;
}
}
.close_activities{
position: absolute;
bottom: 1rem;
@include cl;
}
}
.fadeactivities-enter-active, .fadeactivities-leave-active {
transition: opacity .5s;
}
.fadeactivities-enter, .fadeactivities-leave-active {
opacity: 0;
}
}
}
.menu_container{
display: flex;
flex: 1;
......@@ -283,7 +506,7 @@
.menu_left{
background-color: #f8f8f8;
overflow-y: auto;
width: 3.4rem;
width: 3.8rem;
.menu_left_li{
padding: .7rem .3rem;
border-bottom: 0.025rem solid #ededed;
......@@ -495,148 +718,6 @@
}
}
}
.shop_detail_header{
overflow: hidden;
position: relative;
.header_cover_img{
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9;
filter: blur(10px);
}
.description_header{
position: relative;
z-index: 10;
background-color: rgba(119,103,137,.43);
padding: 0.4rem 0 0.4rem 0.4rem;
width: 100%;
overflow: hidden;
.description_top{
display: flex;
.description_left{
margin-right: 0.3rem;
img{
@include wh(2.9rem, 2.9rem);
display: block;
border-radius: 0.15rem;
}
}
.description_right{
flex: 1;
.description_title{
@include sc(.8rem, #fff);
font-weight: bold;
width: 100%;
margin-bottom: 0.3rem;
}
.description_text{
@include sc(.5rem, #fff);
margin-bottom: 0.3rem;
}
.description_promotion{
@include sc(.5rem, #fff);
width: 12.5rem;
}
}
.description_arrow{
@include ct;
right: 0.3rem;
z-index: 11;
}
}
.description_footer{
@include fj;
margin-top: 0.5rem;
padding-right: .4rem;
p{
@include sc(.5rem, #fff);
span{
color: #fff;
}
.tip_icon{
padding: .01rem;
border: 0.025rem solid #fff;
border-radius: 0.1rem;
display: inline-block;
}
}
.ellipsis{
width: 87%;
}
}
.activities_details{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #262626;
z-index: 12;
padding: 1.25rem;
.activities_shoptitle{
text-align: center;
@include sc(.8rem, #fff);
}
.activities_ratingstar{
display: flex;
justify-content: center;
transform: scale(2.2);
margin-top: .7rem;
}
.activities_list{
margin-top: 1.5rem;
margin-bottom: 1rem;
@include sc(.5rem, #fff);
li{
margin-bottom: .2rem;
.activities_icon{
padding: .01rem;
border: 0.025rem solid #fff;
border-radius: 0.1rem;
}
span{
color: #fff;
line-height: .6rem;
}
}
}
.activities_shopinfo{
p{
line-height: .7rem;
@include sc(.5rem, #fff);
}
}
.activities_title_style{
text-align: center;
margin-bottom: 1rem;
span{
@include sc(.5rem, #fff);
border: 0.025rem solid #555;
padding: .2rem .4rem;
border-radius: 0.5rem;
}
}
.close_activities{
position: absolute;
bottom: 1rem;
@include cl;
}
}
.fadeactivities-enter-active, .fadeactivities-leave-active {
transition: opacity .5s;
}
.fadeactivities-enter, .fadeactivities-leave-active {
opacity: 0;
}
}
}
.router-slid-enter-active, .router-slid-leave-active {
transition: all .4s;
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或