Skip to content

V
vue2-elm

m0_60613409 / vue2-elm
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
V
vue2-elm

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

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

upata

上级 b66bb244
隐藏空白更改
内联 并排
Showing with 288 addition and 178 deletion
README.md
浏览文件 @ f822a3df
......@@ -23,7 +23,7 @@ vue2 + vue-rotuer2 + vuex2 + webpack + ES6/7 + fetch + sass + flex + svg + http-
- [x] 餐馆食品列表页 -- 完成
- [x] 购物车功能 -- 完成
- [x] 店铺评价页面 -- 完成
- [ ] 单个食品详情页面
- [x] 单个食品详情页面 -- 完成
- [ ] 商家详情页
- [ ] 登陆、注册
- [ ] 修改密码
......@@ -190,4 +190,4 @@ npm run build
如果觉得不错，请star一下吧 😊
如果觉得不错，请给个star吧 😊
src/components/common/buyCart.vue
浏览文件 @ f822a3df
......@@ -76,6 +76,7 @@
</template>
<script>
import {mapState, mapMutations} from 'vuex'
export default {
data(){
return{
......@@ -92,6 +93,15 @@
this.windowHeight = window.innerHeight;
},
computed: {
...mapState([
'cartList'
]),
/**
* 监听cartList变化，更新当前商铺的购物车信息shopCart，同时返回一个新的对象
*/
shopCart: function (){
return Object.assign({},this.cartList[this.shopId]);
},
//shopCart变化的时候重新计算当前商品的数量
foodNum: function (){
let category_id = this.foods.category_id;
......@@ -105,19 +115,22 @@
}else {
return 0;
}
}
},
},
props:['foods', 'shopCart'],
props:['foods', 'shopId'],
methods: {
...mapMutations([
'ADD_CART','REDUCE_CART',
]),
//移出购物车
removeOutCart(category_id, item_id, food_id, name, price, specs){
if (this.foodNum > 0) {
this.$emit('reduce', category_id, item_id, food_id, name, price, specs);
this.REDUCE_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs});
}
},
//加入购物车，计算按钮位置。
addToCart(category_id, item_id, food_id, name, price, specs, event){
this.$emit('add', category_id, item_id, food_id, name, price, specs);
this.ADD_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs});
this.elLeft = event.target.getBoundingClientRect().left;
this.elBottom = event.target.getBoundingClientRect().bottom;
this.showMoveDot.push(true);
......@@ -134,7 +147,7 @@
},
//多规格商品加入购物车
addSpecs(category_id, item_id, food_id, name, price, specs){
this.$emit('add', category_id, item_id, food_id, name, price, specs);
this.ADD_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs});
this.showChooseList();
},
//点击多规格商品的减按钮，弹出提示
......
src/page/shop/children/foodDetail.vue
浏览文件 @ f822a3df
<template>
<div class="rating_page">
<head-top head-title="评论" go-back='true'></head-top>
<head-top :head-title="name" go-back='true'></head-top>
<section class="header_img">
<img :src="getImgPath(image_path)" class="food_img">
<div class="cover"></div>
<p class="description">{{description}}</p>
</section>
<section class="detail_container">
<section class="detail_left">
<p>{{name}}</p>
<div class="rating_sale">
<rating-star :rating='rating'></rating-star>
<span>{{rating}}</span>
<span>月售 {{month_sales}}单</span>
</div>
<p>
<span>评论数 {{rating_count}}</span>
<span>好评率 {{satisfy_rate}}%</span>
</p>
</section>
<buy-cart :shopId='shopId' :foods='foods' @moveInCart="$emit('moveInCart')"></buy-cart>
</section>
</div>
</template>
<script>
import headTop from '../../../components/header/head'
import {getImgPath} from '../../../components/common/mixin'
import ratingStar from '../../../components/common/ratingStar'
import buyCart from '../../../components/common/buyCart'
export default {
data(){
return{
image_path: null,
description: null,
month_sales: null,
name: null,
rating: null,
rating_count: null,
satisfy_rate: null,
foods: null,
shopId: null,
}
},
mounted(){
created(){
this.image_path = this.$route.query.image_path;
this.description = this.$route.query.description;
this.month_sales = this.$route.query.month_sales;
this.name = this.$route.query.name;
this.rating = this.$route.query.rating;
this.rating_count = this.$route.query.rating_count;
this.satisfy_rate = this.$route.query.satisfy_rate;
this.foods = this.$route.query.foods;
this.shopId = this.$route.query.shopId;
},
mixins: [getImgPath],
components: {
headTop,
ratingStar,
buyCart,
},
props:[],
methods: {
}
}
</script>
......@@ -28,11 +74,64 @@
.rating_page{
position: absolute;
top: 0;
top: 1.95rem;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 18;
z-index: 10;
p, span{
font-family: Helvetica Neue,Tahoma,Arial;
}
}
.header_img{
position: relative;
.food_img{
width: 100%;
display: block;
}
.cover{
box-shadow: 0px -74px 100px #ddd inset;
position: absolute;
@include wh(100%, 100%);
top: 0;
left: 0;
}
.description{
position: absolute;
@include sc(.6rem, #666);
line-height: .8rem;
bottom: .2rem;
padding: 0 .4rem;
}
}
.detail_container{
padding: .5rem;
@include fj;
align-items: center;
.detail_left{
p:nth-of-type(1){
@include sc(.7rem, #333);
margin-bottom: .2rem;
}
.rating_sale{
display: flex;
align-items: center;
span:nth-of-type(1){
@include sc(.55rem, #f60);
margin-left: .2rem;
}
span:nth-of-type(2){
@include sc(.6rem, #666);
margin-left: .4rem;
}
}
p:nth-of-type(2){
span{
@include sc(.6rem, #666);
}
}
}
}
</style>
src/page/shop/shop.vue
浏览文件 @ f822a3df
......@@ -84,7 +84,7 @@
</p>
</header>
<section v-for="(foods,foodindex) in item.foods" :key="foodindex" class="menu_detail_list">
<router-link to="/shop/rating" tag="div" class="menu_detail_link">
<router-link :to="{path: 'shop/foodDetail', query:{image_path:foods.image_path, description: foods.description, month_sales: foods.month_sales, name: foods.name, rating: foods.rating, rating_count: foods.rating_count, satisfy_rate: foods.satisfy_rate, foods, shopId}}" tag="div" class="menu_detail_link">
<section class="menu_food_img">
<img :src="getImgPath(foods.image_path)">
</section>
......@@ -114,7 +114,7 @@
<span>{{foods.specfoods[0].price}}</span>
<span v-if="foods.specifications.length">起</span>
</section>
<buy-cart :foods='foods' :shopCart='shopCart' @add="addToCart" @reduce="removeOutCart" @moveInCart="listenInCart"></buy-cart>
<buy-cart :shopId='shopId' :foods='foods' @moveInCart="listenInCart"></buy-cart>
</footer>
</section>
</li>
......@@ -560,165 +560,6 @@
75% { transform: scale(.9) }
100% { transform: scale(1) }
}
.change_show_type{
display: flex;
background-color: #fff;
padding: .3rem 0 .6rem;
border-bottom: 1px solid #ebebeb;
div{
flex: 1;
text-align: center;
span{
@include sc(.65rem, #666);
padding: .2rem .1rem;
border-bottom: 0.12rem solid #fff;
}
.activity_show{
color: #3190e8;
border-color: #3190e8;
}
}
}
.rating_container{
flex: 1;
overflow-y: auto;
flex-direction: column;
p, span, li, time{
font-family: Helvetica Neue,Tahoma,Arial;
}
.rating_header{
display: flex;
background-color: #fff;
padding: .8rem .5rem;
margin-bottom: 0.5rem;
.rating_header_left{
flex: 3;
text-align: center;
p:nth-of-type(1){
@include sc(1.2rem, #f60);
}
p:nth-of-type(2){
@include sc(.65rem, #666);
margin-bottom: .1rem;
}
p:nth-of-type(3){
@include sc(.4rem, #999);
}
}
.rating_header_right{
flex: 4;
p{
font-size: .65rem;
line-height: 1rem;
display: flex;
align-items: center;
justify-content: flex-start;
span:nth-of-type(1){
color: #666;
margin-right: .5rem;
}
.rating_num{
width: 3rem;
@include sc(.55rem, #f60);
}
.delivery_time{
@include sc(.4rem, #999);
}
}
}
}
.tag_list_ul{
display: flex;
flex-wrap: wrap;
background-color: #fff;
padding: .5rem;
li{
@include sc(.6rem, #6d7885);
padding: .3rem .3rem;
background-color: #ebf5ff;
border-radius: 0.2rem;
border: 1px;
margin: 0 .4rem .2rem 0;
}
.unsatisfied{
background-color: #f5f5f5;
color: #aaa;
}
.tagActivity{
background-color: #3190e8;
color: #fff;
}
}
.rating_list_ul{
background-color: #fff;
padding: 0 .5rem;
.rating_list_li{
border-top: 1px solid #f1f1f1;
display: flex;
padding: .6rem 0;
.user_avatar{
@include wh(1.5rem, 1.5rem);
border: 0.025rem;
border-radius: 50%;
margin-right: .8rem;
}
.rating_list_details{
flex: 1;
header{
display: flex;
flex: 1;
justify-content: space-between;
margin-bottom: .3rem;
.username_star{
@include sc(.55rem, #666);
.username{
color: #666;
margin-bottom: .2rem;
}
.star_desc{
display: flex;
align-items: center;
.time_spent_desc{
@include sc(.55rem, #666)
margin-left: .15rem;
}
}
}
.rated_at{
@include sc(.4rem, #999);
}
}
.food_img_ul{
display: flex;
flex-wrap: wrap;
margin-bottom: .4rem;
li{
img{
@include wh(3rem, 3rem);
margin-right: .4rem;
display: block;
}
}
}
.food_name_ul{
display: flex;
flex-wrap: wrap;
li{
@include sc(.55rem, #999);
width: 2.2rem;
padding: .2rem;
border: 0.025rem solid #ebebeb;
border-radius: 0.15rem;
margin-right: .3rem;
margin-bottom: 4px;
}
}
}
}
}
}
.shop_container{
display: flex;
......@@ -1233,6 +1074,163 @@
background-color: rgba(0,0,0,.3);
z-index: 11;
}
.change_show_type{
display: flex;
background-color: #fff;
padding: .3rem 0 .6rem;
border-bottom: 1px solid #ebebeb;
div{
flex: 1;
text-align: center;
span{
@include sc(.65rem, #666);
padding: .2rem .1rem;
border-bottom: 0.12rem solid #fff;
}
.activity_show{
color: #3190e8;
border-color: #3190e8;
}
}
}
.rating_container{
flex: 1;
overflow-y: auto;
flex-direction: column;
p, span, li, time{
font-family: Helvetica Neue,Tahoma,Arial;
}
.rating_header{
display: flex;
background-color: #fff;
padding: .8rem .5rem;
margin-bottom: 0.5rem;
.rating_header_left{
flex: 3;
text-align: center;
p:nth-of-type(1){
@include sc(1.2rem, #f60);
}
p:nth-of-type(2){
@include sc(.65rem, #666);
margin-bottom: .1rem;
}
p:nth-of-type(3){
@include sc(.4rem, #999);
}
}
.rating_header_right{
flex: 4;
p{
font-size: .65rem;
line-height: 1rem;
display: flex;
align-items: center;
justify-content: flex-start;
span:nth-of-type(1){
color: #666;
margin-right: .5rem;
}
.rating_num{
width: 3rem;
@include sc(.55rem, #f60);
}
.delivery_time{
@include sc(.4rem, #999);
}
}
}
}
.tag_list_ul{
display: flex;
flex-wrap: wrap;
background-color: #fff;
padding: .5rem;
li{
@include sc(.6rem, #6d7885);
padding: .3rem .3rem;
background-color: #ebf5ff;
border-radius: 0.2rem;
border: 1px;
margin: 0 .4rem .2rem 0;
}
.unsatisfied{
background-color: #f5f5f5;
color: #aaa;
}
.tagActivity{
background-color: #3190e8;
color: #fff;
}
}
.rating_list_ul{
background-color: #fff;
padding: 0 .5rem;
.rating_list_li{
border-top: 1px solid #f1f1f1;
display: flex;
padding: .6rem 0;
.user_avatar{
@include wh(1.5rem, 1.5rem);
border: 0.025rem;
border-radius: 50%;
margin-right: .8rem;
}
.rating_list_details{
flex: 1;
header{
display: flex;
flex: 1;
justify-content: space-between;
margin-bottom: .3rem;
.username_star{
@include sc(.55rem, #666);
.username{
color: #666;
margin-bottom: .2rem;
}
.star_desc{
display: flex;
align-items: center;
.time_spent_desc{
@include sc(.55rem, #666)
margin-left: .15rem;
}
}
}
.rated_at{
@include sc(.4rem, #999);
}
}
.food_img_ul{
display: flex;
flex-wrap: wrap;
margin-bottom: .4rem;
li{
img{
@include wh(3rem, 3rem);
margin-right: .4rem;
display: block;
}
}
}
.food_name_ul{
display: flex;
flex-wrap: wrap;
li{
@include sc(.55rem, #999);
width: 2.2rem;
padding: .2rem;
border: 0.025rem solid #ebebeb;
border-radius: 0.15rem;
margin-right: .3rem;
margin-bottom: 4px;
}
}
}
}
}
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
......
src/service/getData.js
浏览文件 @ f822a3df
......@@ -78,11 +78,11 @@ export const foodActivity = (latitude, longitude) => fetch('GET', '/shopping/v1/
/**
* 获取shop页面商铺详情
*/
export const shopDetails = (shopid, latitude, longitude) => fetch('GET', '/shopping/restaurant/' + shopid, {latitude, longitude:longitude + '&extras[]=activities&extras[]=album&extras[]=license&extras[]=identification&extras[]=statistics'});
//export const shopDetails = (shopid, latitude, longitude) => fetch('GET', '/shopping/restaurant/' + shopid, {latitude, longitude:longitude + '&extras[]=activities&extras[]=album&extras[]=license&extras[]=identification&extras[]=statistics'});
/**
* 获取food页面的商家属性活动列表
*/
export const foodMenu = restaurant_id => fetch('GET', '/shopping/v2/menu', {restaurant_id});
//export const foodMenu = restaurant_id => fetch('GET', '/shopping/v2/menu', {restaurant_id});
/**
* 获取商铺评价列表
*/
......@@ -118,8 +118,8 @@ const setpromise = data => {
// export const foodCategory = (latitude, longitude) => setpromise(food.category);
// export const foodDelivery = (latitude, longitude) => setpromise(food.delivery);
// export const foodActivity = (latitude, longitude) => setpromise(food.activity);
// export const shopDetails = (shopid, latitude, longitude) => setpromise(shop.shopDetails);
// export const foodMenu = restaurant_id => setpromise(shop.shopMenu);
export const shopDetails = (shopid, latitude, longitude) => setpromise(shop.shopDetails);
export const foodMenu = restaurant_id => setpromise(shop.shopMenu);
// export const getRatingList = (offset, tag_name = '') => setpromise(shop.ratingList);
// export const ratingScores = shopid => setpromise(shop.scores);
// export const ratingTags = shopid => setpromise(shop.tage);
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或