update

README.md

@@ -66,6 +66,7 @@ npm run build
 - [x] 下单功能 -- 完成 ✨✨🎉🎉
 - [x] 订单列表 -- 完成
 - [x] 订单详情 -- 完成
+- [x] 下载App -- 完成
 - [ ] 帐户信息
 - [ ] 上传头像，修改用户名
 - [ ] 积分商城
@@ -111,6 +112,7 @@ npm run build
 |				|--addAddress        //	添加地址页
 |				  |--children
 |					|--searchAddress // 搜索地址页
+|       |-- download                 // 下载App
 |       |-- find                     // 发现页
 |       |-- forget                   // 忘记密码，修改密码页
 |       |-- home                     // 首页
@@ -125,8 +127,9 @@ npm run build
 |				|--benefit			 // 我的优惠
 |				|--info				 // 帐户信息
 |				|--points			 // 我的积分
-|				|--service			 // 服务中心
+
 |       |-- search                   // 搜索页
+|		|--service			         // 服务中心
 |       |-- shop                     // 商铺筛选页
 |			|-- children             
 |			  	|-- foodDetail       // 商铺信息页     

build/dev-server.js

@@ -49,6 +49,11 @@ server.use(proxyMiddleware('/payapi', {
     target: 'https://pay.ele.me',
     changeOrigin: true,
 }))
+server.use(proxyMiddleware('/m.ele.me@json', {
+    target: 'https://crayfish.elemecdn.com',
+    changeOrigin: true,
+}))
+
 
 
 // handle fallback for HTML5 history API

index.html

@@ -123,6 +123,8 @@
           <symbol viewBox="0 0 120 120" id="select"><circle cx="60" cy="60" r="60"></circle><path fill="#FFF" d="M63.84 84.678a1.976 1.976 0 0 1-.387.545l-7.975 7.976a1.996 1.996 0 0 1-2.829-.005L24.172 64.716a2.005 2.005 0 0 1-.005-2.828l7.976-7.976a1.996 1.996 0 0 1 2.828.005l19.015 19.015L91.498 35.42a1.991 1.991 0 0 1 2.823 0l7.976 7.977c.784.784.78 2.043 0 2.823L63.84 84.678z"></path></symbol>
           <symbol xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72" id="sdk_icon_zhifubao@2x"><defs><path d="M36 72c19.882 0 36-16.118 36-36S55.882 0 36 0 0 16.118 0 36s16.118 36 36 36z" id="sdk_icon_zhifubao@2x_a"></path></defs><g fill="none" fill-rule="evenodd"><mask id="sdk_icon_zhifubao@2x_b" fill="#fff"><use xlink:href="#sdk_icon_zhifubao@2x_a"></use></mask><use fill="#00A1E9" xlink:href="#sdk_icon_zhifubao@2x_a"></use><path d="M33 21v-5h7v5h14v3H40v4h12c-.202.048-.408 3.223-2 7-1.32 4.134-2.683 6.15-2 6l23.6 8c-.2-.285-.848 2.3-2 4-.775 2.013-2 5-2 5L44 46c.237.162-3.79 4.674-8 7-4.002 1.645-8.717 2.88-14 1-4.93-.56-8.554-3.867-8-10 .693-6.083 7.138-8.19 13-8 4.739-.19 14.796 3.29 15 3-.204.29.642-1.628 2-4 .283-2.015.518-3.777 0-4H22v-3h11v-4H20v-3h13zm-7 30c-7.407 0-9-3.593-9-6 0-2.761 1.576-5.57 8-6 6.484-.383 15.2 4.436 15 4 .2.436-6.238 8-14 8z" fill="#FFF" mask="url(#sdk_icon_zhifubao@2x_b)"></path></g></symbol>
           <symbol viewBox="0 0 72 72" id="weixin"><g fill="none" fill-rule="evenodd"><path d="M36 72c19.882 0 36-16.118 36-36S55.882 0 36 0 0 16.118 0 36s16.118 36 36 36z" fill="#45C144"></path><path d="M29 40l-4-8c-.262-.292-.288-.398 0-1 .594-.228.743-.174 1 0l4 4c1.5 1.098 1.5 1.098 3 0l21-10c-3.668-4.964-10.11-8-17-8-12.33 0-22 8.12-22 18 0 5.6 2.91 10.518 7 14 1 .8 1.068.537 1 1 .068.185-.954 4.042-1 4-.027.316-.097.495 0 1-.097.075.225.4 1 0-.22.4 5-3 5-3 1.4.6 5.8 1 9 1 11.533 0 21.2-7.85 21-18 .2-2.899-.692-5.756-2-8L31 41c-1.5.5-2-1-2-1z" fill="#FFF"></path></g></symbol>
+          <symbol viewBox="0 0 46 46" id="human"><path fill="#ff7b52" d="M33.291 37.774c-.25.097-.504.175-.765.233-6.427 1.444-5.954-3.968-6-3.953 10.457-5.053 10.348-13.466 10-16.216-16.15-.041-22.943-7.063-22.943-7.063s-.176 1.733-2.933 4.996c-2.756 3.262-5.236 4.09-5.132 4.113.54 13.9 12.246 14.242 12.246 14.242-.762 4.662-4.357 4.33-4.357 4.33s-6.38.213-11.173-7.446c-.85-1.359-1.02-2.864-1.166-4.579-.217-2.542.14-4.643.312-7.2.271-4.064.96-6.269.96-6.269S7.13 0 21.4 0s17.828 12.508 17.828 12.508l-.035.074c.533.763.984 1.997 1.356 3.36A3.483 3.483 0 0 1 45 19.281v7.257a3.484 3.484 0 0 1-3.325 3.472c-2.009 4.537-6.657 12.185-15.241 12.457C26.023 44.485 24.269 46 22.168 46c-2.407 0-4.357-1.988-4.357-4.44 0-2.453 1.95-4.44 4.357-4.44 1.955 0 3.609 1.311 4.16 3.118 1.447.13 4.044-.094 6.963-2.464zM18.216 27.018s.99 3.08 3.705 3.08 3.807-1.875 3.807-2.906c.467-1.135 1.348-.541 1.482-.071.134.47-.763 4.67-5.24 4.67s-5.205-4.358-5.205-4.358.033-.97.702-.97c.669 0 .749.555.749.555zm10.052-2.332c.963 0 1.743-1.192 1.743-2.664 0-1.471-.78-2.664-1.743-2.664-.963 0-1.743 1.193-1.743 2.664 0 1.472.78 2.664 1.743 2.664zm-12.723 0c.962 0 1.743-1.192 1.743-2.664 0-1.471-.78-2.664-1.743-2.664-.963 0-1.743 1.193-1.743 2.664 0 1.472.78 2.664 1.743 2.664z"></path></symbol>
+          <symbol viewBox="0 0 46 46" id="phone"><path fill="#6ac20b" d="M15.433 30.568c9.342 9.342 17.708 12.15 18.871 12.316 1.163.167 3.07.542 5.837-2.225 3.24-3.24 3.566-4.94 1.783-6.724-1.783-1.783-6.212-4.48-7.416-5.176-1.206-.696-2.228-.472-3.097.133-.868.605-1.87 1.375-2.798 2.047-.927.671-2.087.955-3.332.167-1.245-.79-3.35-2.27-5.735-4.652-2.384-2.384-3.863-4.49-4.651-5.735-.789-1.245-.505-2.405.167-3.332.671-.928 1.441-1.93 2.046-2.798.605-.869.828-1.89.134-3.097-.696-1.204-3.394-5.633-5.177-7.416-1.783-1.783-3.484-1.457-6.724 1.783-2.766 2.766-2.391 4.674-2.226 5.837.167 1.164 2.976 9.53 12.318 18.872"></path></symbol>
       </svg>
     	<router-view></router-view>
     </div>

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "fastclick": "^1.0.6",
+    "showdown": "^1.6.4",
     "vue": "^2.1.0",
     "vue-router": "^2.1.1",
     "vuex": "^2.0.0"

src/components/header/head.vue

@@ -69,7 +69,8 @@
     .head_goback{
         left: 0.4rem;
         @include wh(0.6rem, 0.8rem);
-        @include ct;
+        line-height: 2.2rem;
+        margin-left: .4rem;
     }
     .head_login{
         right: 0.55rem;

src/page/checkout/checkout.vue

-<template>
-  	<ul>
-    	<router-link tag='li' to='home'>首页</router-link>
-    	<router-link tag='li' to='city'>城市页面</router-link>
-    	<router-link tag='li' to='msite'>商店列表</router-link>
-    	<router-link tag='li' to='shop'>商铺详情</router-link>
-    	<router-link tag='li' to='search'>搜索</router-link>
-    	<router-link tag='li' to='login'>登陆</router-link>
-    	<router-link tag='li' to='checkout'>确认订单</router-link>
-    	<router-link tag='li' to='forget'>忘记密码</router-link>
-    	<router-link tag='li' to='profile'>个人信息</router-link>
-    	<router-link tag='li' to='order'>订单列表</router-link>
-    	<router-link tag='li' to='vipcard'>会员卡</router-link>
-  	</ul>
-</template>
-
-<script>
-
-export default {
-	
-}
-
-</script>
-
-<style lang="scss" scoped>
-    
-</style>

src/page/download/download.vue

+ <template>
+  <div class="download_page">
+        <head-top head-title="下载" go-back='true'></head-top>
+        <section class="dowload_container">
+            <img src='../../images/elmlogo.jpeg' class="logo_img">
+            <p>下载饿了么APP</p>
+            <div class="determine" @click="download">下载</div>
+        </section>
+        <alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
+    </div>
+</template>
+
+<script>
+    import headTop from 'src/components/header/head'
+    import alertTip from 'src/components/common/alertTip'
+
+    export default {
+      data(){
+            return{
+                system: null,
+                showAlert: false,
+                alertText: null,
+            }
+        },
+        created(){
+            let u = navigator.userAgent;
+            let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
+            let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+            if (isAndroid) {
+                this.system = 'Android';
+            } else if (isIOS) {
+                this.system = 'IOS';
+            } else {
+                this.system = 'pc';
+            }
+        },
+        mixins: [],
+        components: {
+            headTop,
+            alertTip,
+        },
+        props:[],
+        methods: {
+            download(){
+                if( this.system == 'IOS'){
+                    this.showAlert = true;
+                    this.alertText = 'IOS用户请前往AppStore下载'
+                }else{
+                    try {
+                        let elemIF = document.createElement("iframe");
+                        elemIF.src = 'http://static10.elemecdn.com/uploads/androidapp/eleme6_4_1476672934695.apk';
+                        elemIF.style.display = "none";
+                        document.body.appendChild(elemIF);
+                    } catch (e) {
+                        alert('下载失败')
+                    }
+                }
+            }
+        }
+    }
+</script>
+  
+<style lang="scss" scoped>
+    @import 'src/style/mixin';
+  
+    .download_page{
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #fff;
+        z-index: 202;
+        padding-top: 1.95rem;
+        p, span{
+            font-family: Helvetica Neue,Tahoma,Arial;
+        }
+    }
+    .dowload_container{
+        text-align: center;
+        .logo_img{
+           border-radius: 1rem;
+            margin-top: 1rem;
+        }
+        p{
+            @include sc(.8rem, #666);
+            margin-bottom: 1rem;
+        }
+        .determine{
+            background-color: #4cd964;
+            @include sc(.7rem, #fff);
+            text-align: center;
+            margin: 0 .7rem;
+            line-height: 1.8rem;
+            border-radius: 0.2rem;
+            margin-top: 0.5rem;
+        }
+    }
+</style>

src/page/profile/profile.vue

@@ -95,7 +95,7 @@
         </section>
         <section class="profile-1reTe">
             <!-- 服务中心 -->
-            <router-link to='/profile/service' class="myorder">
+            <router-link to='/service' class="myorder">
                 <aside>
                     <svg fill="#4aa5f0">
                         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#service"></use>
@@ -111,7 +111,7 @@
                 </div>
             </router-link>
             <!-- 下载饿了么APP -->
-            <router-link to='/profile/service' class="myorder">
+            <router-link to='/download' class="myorder">
                 <aside>
                     <svg fill="#3cabff">
                         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"></use>
@@ -178,7 +178,7 @@ export default {
     },
 
     computed:{
-         ...mapState([
+        ...mapState([
             'userInfo', 
         ]),
         imgpath:function () {

src/page/profile/children/service.vue → src/page/service/children/questionDetail.vue

- <template>
-  <div class="rating_page">
-        <head-top head-title="我的积分" go-back='true'></head-top>
-        <section>我的积分</section>
-    </div>
-</template>
-
-<script>
-    import headTop from '../../../components/header/head'
-    import {getImgPath} from '../../../components/common/mixin'
-
-    export default {
-      data(){
-            return{
-    
-            }
-        },
-        created(){
-
-        },
-        mixins: [getImgPath],
-        components: {
-            headTop,
-
-        },
-        props:[],
-        methods: {
-            
-        }
-    }
-</script>
-  
-<style lang="scss" scoped>
-    @import '../../../style/mixin';
-  
-    .rating_page{
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: #fff;
-        z-index: 202;
-        padding-top: 1.95rem;
-        p, span{
-            font-family: Helvetica Neue,Tahoma,Arial;
-        }
-    }
-    
-</style>
+ <template>
+  <div class="detail_page">
+        <head-top :head-title="question.title" go-back='true'></head-top>
+        <section v-html="markdownText" class="detail_dom"></section>
+    </div>
+</template>
+
+<script>
+    import headTop from 'src/components/header/head'
+    import {mapState, mapMutations} from 'vuex'
+    import showdown from 'showdown'
+
+    export default {
+      data(){
+            return{
+    			
+            }
+        },
+        components: {
+            headTop,
+        },
+        computed: {
+        	...mapState([
+	            'question', 
+	        ]),
+	        markdownText: function (){
+	        	let converter = new showdown.Converter();  
+	            return converter.makeHtml(this.question.detail);  
+	        }
+        },
+        methods: {
+            
+        }
+    }
+</script>
+  
+<style lang="scss" scoped>
+    @import 'src/style/mixin';
+  
+    .detail_page{
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #fff;
+        z-index: 202;
+        padding-top: 1.95rem;
+        overflow-y: auto;
+        p, span{
+            font-family: Helvetica Neue,Tahoma,Arial;
+        }
+        .detail_dom{
+        	font-size: .7rem;
+        	padding: 0 .7rem;
+        	*{
+        		width: 100%;
+        		margin-bottom: 0.25rem;
+        	}
+		    img{
+		    	width: 100%;
+		    }
+		    li{
+		    	@include sc(.7rem, #666);
+		    }
+        }
+    }
+</style>

src/page/service/service.vue

+ <template>
+  <div class="rating_page">
+        <head-top head-title="服务中心" go-back='true'></head-top>
+        <section class="service_connect">
+            <a href="https://ecs-im.ele.me/" class="service_left">
+                <svg>
+                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#human"></use>
+                </svg>
+                <span>在线客服</span>
+            </a>
+            <a href="tel:10105757" class="service_right">
+                <svg>
+                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#phone"></use>
+                </svg>
+                <span>在线客服</span>
+            </a>
+        </section>
+        <section class="hot_questions" v-if="serviceData">
+            <h4 class="qustion_header">热门问题</h4>
+            <ul>
+                <li v-for="(item, index) in questionTitle" :key="index" class="question_title" @click="toQuestionDetail(item, index)">
+                    <span>{{item}}</span>
+                     <svg class="arrow-svg" fill="#999">
+                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
+                    </svg>
+                </li>
+            </ul>
+        </section>
+        <transition name="router-slid">
+            <router-view></router-view>
+        </transition>
+    </div>
+</template>
+
+<script>
+    import headTop from 'src/components/header/head'
+    import {getService} from 'src/service/getData'
+    import {mapMutations} from 'vuex'
+
+    export default {
+      data(){
+            return{
+                serviceData: null,
+                questionTitle: [],
+                questionDetail: [],
+            }
+        },
+
+        mounted(){
+            this.initData();
+        },
+        mixins: [],
+        components: {
+            headTop,
+        },
+        props:[],
+        methods: {
+            ...mapMutations([
+                'SAVE_QUESTION'
+            ]),
+            async initData(){
+                this.serviceData = await getService();
+                Object.keys(this.serviceData).forEach(item => {
+                    let avoidRepeat = false;
+                    this.questionTitle.forEach((insertItem) => {
+                        if (insertItem == this.serviceData[item]) {
+                            avoidRepeat = true;
+                        }
+                    })
+                    if (item.indexOf('Caption') !== -1 && !avoidRepeat) {
+                            this.questionTitle.push(this.serviceData[item]);
+                    }else if(!avoidRepeat){
+                        this.questionDetail.push(this.serviceData[item]);
+                    }
+                })
+            },
+            toQuestionDetail(title, index){
+                this.SAVE_QUESTION({title, detail: this.questionDetail[index]});
+                this.$router.push('/service/questionDetail');
+            },
+        }
+    }
+</script>
+  
+<style lang="scss" scoped>
+    @import 'src/style/mixin';
+  
+    .rating_page{
+        background-color: #fff;
+        padding-top: 1.95rem;
+        p, span{
+            font-family: Helvetica Neue,Tahoma,Arial;
+        }
+    }
+    .service_connect{
+        @include fj;
+        a{
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 4rem;
+            border-bottom: 1px solid #f5f5f5;
+            svg{
+                @include wh(1rem, 1rem);
+            }
+            span{
+                margin-top: .4rem;
+                @include sc(.6rem, #666);
+            }
+        }
+        .service_left{
+            border-right: 1px solid #f5f5f5;
+        }
+    }
+    .hot_questions{
+        .qustion_header{
+            @include sc(.75rem, #333);
+            line-height: 3rem;
+            border-bottom: 1px solid #f5f5f5;
+            padding-left: .7rem;
+        }
+        .question_title{
+            padding: 0 .7rem;
+            line-height: 2rem;
+            border-bottom: 1px solid #f5f5f5;
+            @include fj;
+            align-items: center;
+            span{
+                @include sc(.6rem, #666);
+            }
+            svg{
+                @include wh(.6rem, .6rem);
+            }
+        }
+    }
+    .router-slid-enter-active, .router-slid-leave-active {
+        transition: all .4s;
+    }
+    .router-slid-enter, .router-slid-leave-active {
+        transform: translateX(100%);
+    }
+</style>

src/router/router.js

@@ -30,8 +30,11 @@ const add = r => require.ensure([], () => r(require('../page/profile/children/ch
 const balance = r => require.ensure([], () => r(require('../page/profile/children/balance')), 'balance')
 const benefit = r => require.ensure([], () => r(require('../page/profile/children/benefit')), 'benefit')
 const points = r => require.ensure([], () => r(require('../page/profile/children/points')), 'points')
-const service = r => require.ensure([], () => r(require('../page/profile/children/service')), 'service')
+const service = r => require.ensure([], () => r(require('../page/service/service')), 'service')
+const questionDetail = r => require.ensure([], () => r(require('../page/service/children/questionDetail')), 'questionDetail')
 const find = r => require.ensure([], () => r(require('../page/find/find')), 'find')
+const download = r => require.ensure([], () => r(require('../page/download/download')), 'download')
+
 
 
 
@@ -177,5 +180,19 @@ export default [{
             path: '/find',
             component: find
         },
+        //下载页
+        {
+            path: '/download',
+            component: download
+        },
+        //服务中心
+        {
+            path: '/service',
+            component: service,
+             children: [{
+                path: 'questionDetail', //订单详情页
+                component: questionDetail,
+            }, ]
+        },
     ]
 }]
\ No newline at end of file

src/service/getData.js

@@ -8,6 +8,8 @@ import * as shop from './tempdata/shop'
 import * as login from './tempdata/login'
 import * as confirm from './tempdata/confirm'
 import * as order from './tempdata/order'
+import * as service from './tempdata/service'
+
 
 
 // /**
@@ -384,6 +386,21 @@ import * as order from './tempdata/order'
 // });
 
 
+
+// /**
+//  * 获取服务中心信息
+//  */
+
+// export const getService = () => fetch('GET', '/m.ele.me@json/profile/explain', {});
+
+
+
+
+
+
+
+
+
 // /**
 //  * 获取订单列表
 //  */
@@ -402,6 +419,9 @@ import * as order from './tempdata/order'
 
 
 
+
+
+
 /**
  * 以下是临时数据
  */
@@ -452,6 +472,9 @@ export const validateOrders = ({
 	validation_token
 }) => setpromise(confirm.orderSuccess);
 export const payRequest = (merchantOrderNo, userId) => setpromise(confirm.payDetail);
+export const getService = () => setpromise(service.serviceData);
+
+
 
 
 

src/store/index.js

@@ -12,23 +12,24 @@ const state = {
 	cartList: {}, // 加入购物车的商品列表
 	shopDetail: null, //商家详情信息
 	userInfo: null, //用户信息
-	shopid: null,
-	remarkText: null,
-	inputText: '',
-	invoice: false,
-	searchAddress: null,
-	geohash: null,
-	choosedAddress: null,
-	addressIndex: null,
-	needValidation: null,
-	cartId: null,
-	sig: null,
-	orderParam: null,
-	orderMessage: null,
-	orderDetail: null,
-	login: true,
-	imgPath:null,
-	removeAddress:[],
+	shopid: null,//商铺id
+	remarkText: null,//可选备注内容
+	inputText: '',//输入备注内容
+	invoice: false,//开发票
+	searchAddress: null,//搜索并选择的地址
+	geohash: null,//地址geohash值
+	choosedAddress: null,//选择地址
+	addressIndex: null,//选择地址的索引值
+	needValidation: null,//确认订单时是否需要验证
+	cartId: null, //购物车id
+	sig: null,//购物车sig
+	orderParam: null,//订单的参数
+	orderMessage: null, //订单返回的信息
+	orderDetail: null, //订单详情
+	login: true,//是否登陆
+	imgPath:null,//头像地址
+	removeAddress:[],//移除地址
+	question: null,//问题详情
 }
 
 export default new Vuex.Store({

src/store/mutation-types.js

@@ -21,4 +21,5 @@ export const SAVE_ORDER = 'SAVE_ORDER'
 export const OUT_LOGIN = 'OUT_LOGIN'
 export const RETSET_NAME = 'RETSET_NAME'
 export const SAVE_AVANDER = 'SAVE_AVANDER'
-export const SAVE_ADDRESS= 'SAVE_ADDRESS'
+export const SAVE_ADDRESS= 'SAVE_ADDRESS'
\ No newline at end of file
+export const SAVE_QUESTION= 'SAVE_QUESTION'
\ No newline at end of file

src/store/mutations.js

@@ -23,6 +23,7 @@ import {
 	RETSET_NAME,
 	SAVE_AVANDER,
 	SAVE_ADDRESS,
+	SAVE_QUESTION,
 } from './mutation-types.js'
 import {
 	setStore,
@@ -248,4 +249,8 @@ export default {
 	[SAVE_ADDRESS](state, newAdress) {
 		state.removeAddress = newAdress
 	},
+	//保存所选问题标题和详情
+	[SAVE_QUESTION](state, question) {
+		state.question = {...question};
+	},
 }
\ No newline at end of file