updata shop

src/App.vue

@@ -72,9 +72,23 @@
 				<symbol viewBox="0 0 32 32" id="speed">
 					<path fill="#37c7b7" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16zm0-2C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14z"></path><path fill="#37c7b7" d="M15 7v11.002l5.678 4.882 1.304-1.517-5.33-4.583.348.758V6.999h-2z"></path>
 				</symbol>
+				<symbol viewBox="0 0 44 44" id="cart-minus">
+					<path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm0 42C11 42 2 33 2 22S11 2 22 2s20 9 20 20-9 20-20 20z" clip-rule="evenodd"></path>
+					<path fill-rule="evenodd" d="M32 20c1.1 0 2 .9 2 2s-.9 2-2 2H12c-1.1 0-2-.9-2-2s.9-2 2-2h20z" clip-rule="evenodd"></path>
+				</symbol>
+				<symbol viewBox="0 0 44 44" id="cart-add">
+					<path fill="none" d="M0 0h44v44H0z"></path>
+					<path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z" clip-rule="evenodd"></path>
+				</symbol>
+				<symbol viewBox="0 0 24 32" id="cart-remove">
+					<path fill="#bbb" fill-rule="evenodd" d="M21.5 10h-19c-1.1 0-1.918.896-1.819 1.992l1.638 18.016C2.419 31.104 3.4 32 4.5 32h15c1.1 0 2.081-.896 2.182-1.992l1.637-18.016A1.798 1.798 0 0 0 21.5 10zM8 28H5L4 14h4v14zm6 0h-4V14h4v14zm5 0h-3V14h4l-1 14zm2-24h-2.941l-.353-2.514C17.592.669 16.823 0 15.998 0H8c-.825 0-1.593.668-1.708 1.486L5.94 4H3a3 3 0 0 0-3 3v1h24V7a3 3 0 0 0-3-3zM8.24 2h7.52l.279 2H7.96l.28-2z"></path>
+				</symbol>
+				<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>
 			</defs>
 		</svg>
-		<transition name="router-fade">
+		<transition name="router-fade" mode="out-in">
     		<router-view></router-view>
     	</transition>
     </div>
@@ -91,7 +105,7 @@
 <style lang="scss">
   	@import './style/common.scss';
 	.router-fade-enter-active, .router-fade-leave-active {
-	  	transition: opacity .6s;
+	  	transition: opacity .4s;
 	}
 	.router-fade-enter, .router-fade-leave-active {
 	  	opacity: 0;

src/components/common/mixin.js

@@ -13,6 +13,9 @@ export const loadMore = {
 			    let requestFram;
 			    let oldScrollTop;
 
+			    document.addEventListener('scroll',() => {
+			       loadMore();
+			    },false)
 				el.addEventListener('touchstart',() => {
 			        height = el.offsetHeight;
 			        setTop = el.offsetTop;

src/components/common/shoplist.vue

@@ -129,7 +129,7 @@ export default {
 			this.showLoading = false;
 		}
 	},
-	watch:{
+	watch: {
 		//监听父级传来的restaurantCategoryIds，当值发生变化的时候重新获取餐馆数据，作用于排序和筛选
 		restaurantCategoryIds: function (value){
 			this.listenPropChange();

src/config/mUtils.js

@@ -54,6 +54,9 @@ export const loadMore = (element, callback) => {
     let requestFram;
     let oldScrollTop;
 
+    element.addEventListener('scroll',() => {
+       loadMore();
+    }, false)
     //运动开始时获取元素 高度 和 offseTop, pading, margin
 	element.addEventListener('touchstart',() => {
         height = element.offsetHeight;
@@ -62,7 +65,7 @@ export const loadMore = (element, callback) => {
         marginBottom = getStyle(element,'marginBottom');
     },{passive: true})
 
-    //运动过程中保持坚挺 scrollTop 的值判断是否到达底部
+    //运动过程中保持监听 scrollTop 的值判断是否到达底部
     element.addEventListener('touchmove',() => {
        loadMore();
     },{passive: true})
@@ -102,6 +105,9 @@ export const showBack = callback => {
     let requestFram;
     let oldScrollTop;
 
+    document.addEventListener('scroll',() => {
+       showBackFun();
+    }, false)
     document.addEventListener('touchstart',() => {
        showBackFun();
     },{passive: true})

src/page/food/food.vue

@@ -198,35 +198,8 @@ export default {
             confirmStatus: false, // 确认选择
         }
     },
-    async created(){
-    	//获取从msite页面传递过来的参数
-		this.geohash = this.$route.query.geohash;
-		this.headTitle = this.$route.query.title;
-		this.foodTitle = this.headTitle;
-		this.restaurant_category_id = this.$route.query.restaurant_category_id;
-		//防止刷新页面时，vuex状态丢失，经度纬度需要重新获取，并存入vuex	
-		if (!this.latitude) {
-	    	//获取位置信息
-	    	let res = await msiteAdress(this.geohash);
-	    	// 记录当前经度纬度进入vuex
-		    this.RECORD_ADDRESS(res);
-		}
-	    //获取category分类左侧数据
-    	this.category = await foodCategory(this.latitude, this.longitude);
-    	//初始化时定位当前category分类左侧默认选择项，在右侧展示出其sub_categories列表
-		this.category.forEach(item => {
-			if (this.restaurant_category_id == item.id) {
-				this.categoryDetail = item.sub_categories;
-			}
-		});
-		//获取筛选列表的配送方式
-		this.Delivery = await foodDelivery(this.latitude, this.longitude);
-		//获取筛选列表的商铺活动
-    	this.Activity = await foodActivity(this.latitude, this.longitude);
-    	//记录support_ids的状态，默认不选中，点击状态取反，status为true时为选中状态
-    	this.Activity.forEach((item, index) => {
-    		this.support_ids[index] = {status: false, id: item.id};
-    	})
+    created(){
+    	this.initData();
     },
     mixins: [getImgPath],
     components: {
@@ -242,6 +215,37 @@ export default {
     	...mapMutations([
     		'RECORD_ADDRESS'
     	]),
+    	//初始化获取数据
+        async initData(){
+        	//获取从msite页面传递过来的参数
+			this.geohash = this.$route.query.geohash;
+			this.headTitle = this.$route.query.title;
+			this.foodTitle = this.headTitle;
+			this.restaurant_category_id = this.$route.query.restaurant_category_id;
+			//防止刷新页面时，vuex状态丢失，经度纬度需要重新获取，并存入vuex	
+			if (!this.latitude) {
+		    	//获取位置信息
+		    	let res = await msiteAdress(this.geohash);
+		    	// 记录当前经度纬度进入vuex
+			    this.RECORD_ADDRESS(res);
+			}
+		    //获取category分类左侧数据
+	    	this.category = await foodCategory(this.latitude, this.longitude);
+	    	//初始化时定位当前category分类左侧默认选择项，在右侧展示出其sub_categories列表
+			this.category.forEach(item => {
+				if (this.restaurant_category_id == item.id) {
+					this.categoryDetail = item.sub_categories;
+				}
+			});
+			//获取筛选列表的配送方式
+			this.Delivery = await foodDelivery(this.latitude, this.longitude);
+			//获取筛选列表的商铺活动
+	    	this.Activity = await foodActivity(this.latitude, this.longitude);
+	    	//记录support_ids的状态，默认不选中，点击状态取反，status为true时为选中状态
+	    	this.Activity.forEach((item, index) => {
+	    		this.support_ids[index] = {status: false, id: item.id};
+	    	})
+        },
     	// 点击顶部三个选项，展示不同的列表，选中当前选项进行展示，同时收回其他选项
     	async chooseType(type){
     		if (this.sortBy !== type) {

src/page/msite/msite.vue

@@ -79,6 +79,7 @@ export default {
     		}
     		this.foodTypes = foodArr;
         }).then(() => {
+        	//初始化swiper
         	new Swiper('.swiper-container', {
 		        pagination: '.swiper-pagination',
 		        loop: true

src/page/shop/children/rating.vue

+ <template>
+	<div class="rating_page">
+       <head-top head-title="评论" go-back='true'></head-top>
+    </div>
+</template>
+
+<script>
+	import headTop from '../../../components/header/head'
+
+    export default {
+    	data(){
+            return{
+               
+            }
+        },
+        mounted(){
+        	
+        },
+        components: {
+        	headTop,
+        },
+        props:[],
+    }
+</script>
+	
+<style lang="scss" scoped>
+    @import '../../../style/mixin.scss';
+	
+	.rating_page{
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: #fff;
+		z-index: 18;
+	}
+</style>

src/router/router.js

@@ -12,6 +12,7 @@ const checkout = r => require.ensure([], () => r(require('../page/checkout/check
 const order = r => require.ensure([], () => r(require('../page/order/order')), 'order')
 const vipcard = r => require.ensure([], () => r(require('../page/vipcard/vipcard')), 'vipcard')
 const food = r => require.ensure([], () => r(require('../page/food/food')), 'food')
+const rating = r => require.ensure([], () => r(require('../page/shop/children/rating')), 'rating')
 
 
 export default [{
@@ -23,8 +24,15 @@ export default [{
         { path: '/city/:cityid', component: city },    //当前选择城市页
         { path: '/msite', component: msite, },         //所有商铺列表页
         { path: '/food', component: food },            //特色商铺列表页
-        { path: '/search/:geohash', component: search },        //搜索页
-        { path: '/shop', component: shop },            //商铺详情页
+        { path: '/search/:geohash', component: search },   //搜索页
+        { path: '/shop', component: shop ,
+            children: [
+                {
+                    path: 'rating',
+                    component: rating,
+                }
+            ]
+        },            //商铺详情页
         { path: '/login', component: login },          //登陆注册页
         { path: '/profile', component: profile },      //个人信息页
         { path: '/forget', component: forget },        //修改密码页

src/service/getData.js

@@ -5,34 +5,42 @@ import * as msite from './tempdata/msite'
 import * as search from './tempdata/search'
 import * as food from './tempdata/food'
 import * as shop from './tempdata/shop'
+
 /**
  * 获取首页默认地址
  */
 export const cityGuess = () => fetch('GET', '/v1/cities', {type: 'guess'});
+
 /**
  * 获取首页热门城市
  */
 export const hotcity = () => fetch('GET', '/v1/cities', {type: 'hot'});
+
 /**
  * 获取首页所有城市
  */
 export const groupcity = () => fetch('GET', '/v1/cities', {type: 'group'});
+
 /**
  * 获取当前所在城市
  */
 export const currentcity = number => fetch('GET', '/v1/cities/' + number, {});
+
  /**
  * 获取搜索地址
  */
 export const searchplace = (cityid, value) => fetch('GET', '/v1/pois', {type: 'search', city_id: cityid, keyword: value});
+
 /**
  * 获取msite页面地址信息
  */
 export const msiteAdress = geohash => fetch('GET', '/v2/pois/' + geohash, {});
+
 /**
  * 获取msite页面食品分类列表
  */
 export const msiteFoodTypes = geohash => fetch('GET', '/v2/index_entry', {geohash, group_type:'1', 'flags[]':'F'});
+
 /**
  * 获取msite商铺列表
  */
@@ -45,28 +53,36 @@ export const shopList = (latitude, longitude, offset, restaurant_category_id = '
 	});
 	let data = {latitude, longitude, offset, limit: '20', 'extras[]':'activities', keyword: '', restaurant_category_id, 'restaurant_category_ids[]': restaurant_category_ids, order_by, 'delivery_mode[]':delivery_mode + supportStr};
 	return fetch('GET', '/shopping/restaurants', data);
-} 
+}; 
+
 /**
  * 获取search页面搜索结果
  */
 export const searchRestaurant = (geohash, keyword) => fetch('GET', '/v4/restaurants', {'extras[]':'restaurant_activity', geohash, keyword, type: 'search'});
+
 /**
  * 获取food页面的 category 种类列表
  */
 export const foodCategory = (latitude, longitude) => fetch('GET', '/shopping/v2/restaurant/category', {latitude, longitude});
+
 /**
  * 获取food页面的配送方式
  */
 export const foodDelivery = (latitude, longitude) => fetch('GET', '/shopping/v1/restaurants/delivery_modes', {latitude, longitude, kw: ''});
+
 /**
  * 获取food页面的商家属性活动列表
  */
 export const foodActivity = (latitude, longitude) => fetch('GET', '/shopping/v1/restaurants/activity_attributes', {latitude, longitude, kw: ''});
+
 /**
  * 获取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'});
-
+/**
+ * 获取food页面的商家属性活动列表
+ */
+//export const foodMenu = restaurant_id => fetch('GET', '/shopping/v2/menu', {restaurant_id});
 
 
 /**
@@ -91,3 +107,4 @@ const setpromise = data => {
 // 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);

src/store/index.js

@@ -8,7 +8,8 @@ Vue.use(Vuex)
 
 const state = {
 	latitude: '', // 当前位置纬度
-	longitude: '', // 当前位置经度 
+	longitude: '', // 当前位置经度
+	cartList: [], // 加入购物车的商品列表
 }
 
 export default new Vuex.Store({

src/style/common.scss

@@ -7,7 +7,6 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l
     border: none;
     color: #333;
     box-sizing: border-box;
-    font-weight: lighter;
     font-family: "Microsoft Yahei",sans-serif;
     -webkit-tap-highlight-color:transparent;
     -webkit-font-smoothing: antialiased;
@@ -16,6 +15,30 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l
     }
 }
 
+/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
+::-webkit-scrollbar  
+{  
+    width: 0px;  
+    height: 0px;  
+    background-color: #F5F5F5;  
+}  
+  
+/*定义滚动条轨道 内阴影+圆角*/  
+::-webkit-scrollbar-track  
+{  
+    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);  
+    border-radius: 10px;  
+    background-color: #F5F5F5;  
+}  
+  
+/*定义滑块 内阴影+圆角*/  
+::-webkit-scrollbar-thumb  
+{  
+    border-radius: 10px;  
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
+    background-color: #555;  
+}  
+
 input[type="button"], input[type="submit"], input[type="search"], input[type="reset"] {
     -webkit-appearance: none;
 }