update

src/Layout/index.vue

+<template>
+  <div class="app-wrapper">
+    <app-main />
+    <van-tabbar v-model="tabActive" @change="tabChange" route>
+      <van-tabbar-item icon="home-o" to="/shop">商品</van-tabbar-item>
+      <van-tabbar-item icon="search" to="/my">我的</van-tabbar-item>
+    </van-tabbar>
+  </div>
+</template>
+<script>
+import AppMain from './main'
+export default {
+  data() {
+    return {
+      tabActive: '/shop'
+    }
+  },
+  components: { AppMain },
+  methods: {
+    tabChange() {
+      // const query = {}
+      if (this.tabActive === '/shop') {
+        // 设置shop_id
+      }
+      // this.$router.push({ path: this.tabActive, query })
+    }
+  }
+}
+</script>
+<style scoped>
+</style>
\ No newline at end of file

src/Layout/main.vue

+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <router-view :key="key" />
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key () {
+      return this.$route.path
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/pages/buy/components/BuyPopup.vue

@@ -28,11 +28,18 @@
         <van-button type="primary" round block color="#C01540" size="small">下一步</van-button>
       </div>
     </van-form>
+    <van-dialog v-model="dialogVisiable" title="请选择支付方式" show-cancel-button @confirm="handleDialogConfirm">
+      <van-radio-group v-model="payType">
+        <van-radio name="ali">支付宝支付</van-radio>
+        <van-radio name="wx">微信支付</van-radio>
+      </van-radio-group>
+    </van-dialog>
   </van-popup>
 </template>
 <script>
 import TagSelection from '@/components/TagSelection.vue'
 import { getGoodsSpecs } from '@/api/common'
+import { mapGetters } from 'vuex'
 export default {
   components: { TagSelection },
   props: {
@@ -72,10 +79,13 @@ export default {
           if (val === '') return true
           return /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val) || /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/.test(val)
         }
-      }
+      },
+      dialogVisiable: false,
+      payType: 'ali'
     }
   },
   computed: {
+    ...mapGetters(['isPhone', 'isWxBrowser']),
     query() {
       return this.$route.query
     },
@@ -119,6 +129,12 @@ export default {
       this.spec = val.value
     },
     handleSuccess(val) {
+      this.dialogVisiable = true
+    },
+    handleDialogConfirm() {
+      console.log('关闭弹窗')
+    },
+    formParams(val) {
       const fields = []
       for (const key in val) {
         if (val[key] && key.includes('field')) {
@@ -233,4 +249,10 @@ export default {
     margin-top:8px;
   }
 }
+.van-radio-group{
+  padding:0.4rem;
+  .van-radio{
+    padding:0.2rem;
+  }
+}
 </style>
\ No newline at end of file

src/pages/buy/index.vue

@@ -38,7 +38,7 @@
         </template>
       </van-cell>
     </div>
-    <div class="bottom-bar" v-if="details.sales_type === '3'">
+    <div class="bottom-bar" v-if="details.sales_type === '1'">
       <van-button type="primary" round block color="#C01540" size="small" @click="handleBuy">{{details.buy_button_text || '立即购买'}}</van-button>
     </div>
     <buy-popup v-model="popupVisiable" :options="popupOptions" @placeOrder="handlePlaceOrder"/>
@@ -109,9 +109,6 @@ export default {
     }
   },
   methods: {
-    handleSwipeChange(val) {
-      console.log(val)
-    },
     handleVideoClick() {
       const video = this.$refs.video
       if (this.videoPlay) {

src/pages/home/index.vue

@@ -114,7 +114,7 @@ export default {
   background:#fff;
   position:relative;
   box-sizing:border-box;
-  padding:0.2rem 0 0.2rem 2.1rem;
+  padding:0.2rem 0 0.2rem 2rem;
   height:2rem;
   margin-bottom:0.3rem;
   border-radius:0.06rem;

src/pages/my/index.vue

@@ -5,38 +5,67 @@
         round
         width="25vw"
         height="25vw"
-        src="https://img01.yzcdn.cn/vant/cat.jpeg"
+        :src="user.avatar"
       />
-      <span>某某某</span>
+      <span>{{user.realname || user.nickname}}</span>
     </div>
     <div class="order-cont">
-      <van-cell title="我的订单" class="van-cell--borderless" is-link value="查看全部" />
+      <van-cell title="我的订单" class="van-cell--borderless" is-link value="查看全部" @click="handleNavOrder('all')"/>
       <ul>
-        <li>
+        <li @click="handleNavOrder('1')">
           <img class="error-404" src="@/assets/images/icon_wait_pay.png" alt="页面未找到" />
           <p>待付款</p>
         </li>
-        <li>
+        <li @click="handleNavOrder('2')">
           <img class="error-404" src="@/assets/images/icon_wait_delivery.png" alt="页面未找到" />
           <p>待发货</p>
         </li>
-        <li>
+        <li @click="handleNavOrder('4')">
           <img class="error-404" src="@/assets/images/icon_completed.png" alt="页面未找到" />
           <p>已完成</p>
         </li>
-        <li>
+        <li @click="handleNavOrder('5')">
           <img class="error-404" src="@/assets/images/icon_closed.png" alt="页面未找到" />
           <p>已关闭</p>
         </li>
       </ul>
     </div>
-    <van-button type="default" block>退出登录</van-button>
+    <van-button type="default" block @click="logout" v-if="user.id">退出登录</van-button>
+    <div class="bottom-bar" v-else>
+      <van-button type="primary" round block color="#C01540" size="small" @click="loginPopupVisiable = true">登 录</van-button>
+    </div>
+    <phone-code-login-popup v-model="loginPopupVisiable" @loginSuccess="loginSuccess"/>
   </div>
 </template>
 <script>
+import PhoneCodeLoginPopup from '@/components/PhoneCodeLoginPopup.vue'
+import { mapGetters } from 'vuex'
+import { Toast } from 'vant'
 export default {
+  components: { PhoneCodeLoginPopup },
   data() {
-    return {}
+    return {
+      loginPopupVisiable: false
+    }
+  },
+  computed: {
+    ...mapGetters(['user'])
+  },
+  methods: {
+    handleNavOrder(type) {
+      if (this.user.id) {
+        this.$router.push({ path: '/order', query: { type } })
+      } else {
+        Toast.success('请先登录再查看订单')
+      }
+    },
+    async logout() {
+      await this.$store.dispatch('logout')
+      Toast.success('退出登录成功')
+    },
+    loginSuccess() {
+      Toast.success('登录成功')
+    }
   }
 }
 </script>
@@ -72,4 +101,13 @@ export default {
     }
   }
 }
+.bottom-bar{
+  padding:0.2rem 0.8rem;
+  background:#fff;
+  .van-button{
+    height:0.64rem;
+    line-height:0.64rem;
+    font-size:0.24rem;
+  }
+}
 </style>
\ No newline at end of file

src/router/index.js

@@ -4,12 +4,25 @@ import routes from './routes'
 
 Vue.use(Router)
 
-export default new Router({
-  routes,
-  mode: 'history', // 还有一个 hash 默认
-  fallback: true, // 浏览器不支持 history时，自动改成 hash方式
-  scrollBehavior(to, from, savedPosition) {
-    // 每次打开，滚动到 最顶端
-    return { x: 0, y: 0 }
-  }
+const originalPush = Router.prototype.push
+Router.prototype.push = function push(location, onResolve, onReject) {
+  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
+  return originalPush.call(this, location).catch(err => err)
+}
+
+export const asyncRoutes = [...routes]
+const createRouter = () => new Router({
+  mode: 'history', // require service support
+  scrollBehavior: () => ({ y: 0 }),
+  routes: routes
 })
+
+const router = createRouter()
+
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+export function resetRouter() {
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher // reset router
+}
+
+export default router

src/router/routes.js

+import Layout from '@/Layout/index.vue'
 export default [
   { path: '/', redirect: '/index' },
   /* 首页 */
   {
     path: '/index',
-    name: 'Index',
-    component: () => import('../pages/home/index.vue')
+    component: Layout,
+    children: [
+      {
+        path: '',
+        name: 'home',
+        component: () => import('../pages/home/index.vue')
+      }
+    ]
   },
   /* 店铺 */
   {
     path: '/shop',
-    name: 'Shop',
-    component: () => import('../pages/home/index.vue')
+    component: Layout,
+    children: [
+      {
+        path: '',
+        name: 'Shop',
+        component: () => import('../pages/home/index.vue')
+      }
+    ]
+  },
+  /* 个人中心 */
+  {
+    path: '/my',
+    component: Layout,
+    children: [
+      {
+        path: '',
+        name: 'My',
+        component: () => import('../pages/my/index.vue')
+      }
+    ]
   },
   /* 商品购买页 */
   {
@@ -18,12 +43,6 @@ export default [
     name: 'Buy',
     component: () => import('../pages/buy/index.vue')
   },
-  /* 个人中心 */
-  {
-    path: '/my',
-    name: 'My',
-    component: () => import('../pages/my/index.vue')
-  },
   /* 订单列表 */
   {
     path: '/order',

src/store/getters.js

 const getters = {
   user: state => state.user.user,
-  isWxBrowser: state => state.user.isWxBrowser
+  isWxBrowser: state => state.user.isWxBrowser,
+  isAliBrowser: state => state.user.isAliBrowser,
+  isPhone: state => state.user.isPhone
 }
 export default getters

src/store/modules/user.js

@@ -4,7 +4,8 @@ const user = {
     user: {},
     isLogin: false,
     isPhone: /android|iphone|ipad|ipod/i.test(navigator.userAgent),
-    isWxBrowser: /micromessenger/i.test(navigator.userAgent) && /android|iphone|ipad|ipod/i.test(navigator.userAgent)
+    isWxBrowser: /MicroMessenger/i.test(navigator.userAgent),
+    isAliBrowser: /AlipayClient/i.test(navigator.userAgent)
   },
 
   mutations: {

src/style.scss

@@ -90,7 +90,7 @@ body {
   background-color: #f7f7f7;
 }
 .main-container {
-  margin: 0 0.3rem;
+  margin: 0 0.2rem;
   padding-bottom: env(safe-area-inset-bottom);
 }
 .main-tabs .van-tab {