初始化

src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="app">
     <router-view v-slot="{ Component }">
-      <transition name="fade" mode="out-in">
-          <component :is="Component" />
+      <transition mode="slide" :name="route.meta.transition">
+        <component :is="Component" />
       </transition>
     </router-view>
   </div>
@@ -11,24 +11,18 @@
 <script>
 export default {
   data () {
-    return {
-    }
+    return {}
   },
   watch: {
-    '$route' (to, from) {}
+    $route (to, from) {}
   },
   methods: {}
 }
 </script>
 
-<style>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
+<style lang="scss">
+#app {
+  background: #F5F5F5;
+  width: 100vw;
 }
 </style>

src/Layout/TabItem/index.vue

@@ -1,15 +1,31 @@
 <template>
-  <div>
-
+  <div class="tabbar">
+    <van-tabbar-item
+      :icon="menu.icon || 'home-o'"
+      v-for="(menu, index) in menuList"
+      :key="index"
+      @click.stop="$ApiRouter(`${menu.link}`)"
+      >{{ menu.name }}</van-tabbar-item>
   </div>
 </template>
 
 <script>
 export default {
-
+  props: {
+    menuList: {
+      type: Array,
+      default: () => []
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.tabbar {
+  width: 100%;
+  display: flex;
+}
+.van-tabbar-item--active {
+  color: #FF5B00;
+}
 </style>

src/Layout/Tabbar/index.vue

@@ -1,15 +1,24 @@
 <template>
-  <div>
-    <slot />
+  <div class="tabbar">
+    <van-tabbar v-model="active">
+      <slot />
+    </van-tabbar>
   </div>
 </template>
 
 <script>
 export default {
-
+  data () {
+    return {
+      active: 0
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.tabbar {
+  height: 13.1vw;
+  position: fixed;
+}
 </style>

src/Layout/index.vue

@@ -1,19 +1,36 @@
 <template>
   <div>
-    <Tabbar>
-      <tab-item></tab-item>
-    </Tabbar>
+    <router-view />
+    <tab-bar>
+      <tab-item :menu-list="menuList"></tab-item>
+    </tab-bar>
   </div>
 </template>
 
 <script>
-import Tabbar from './Tabbar/index'
+import TabBar from './Tabbar/index'
 import TabItem from './TabItem/index'
 
 export default {
   components: {
-    Tabbar,
+    TabBar,
     TabItem
+  },
+  data () {
+    return {
+      menuList: [
+        {
+          name: '商城',
+          icon: '',
+          link: '/shopping-mall'
+        },
+        {
+          name: '我的',
+          icon: '',
+          link: '/mine'
+        }
+      ]
+    }
   }
 }
 </script>

src/components/OrderTypeList.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="order_list" :style="{ top: ObjCell.top, borderRadius: ObjCell.isInset ? '8px' : '' }">
+    <van-cell-group :inset="ObjCell.isInset">
+      <van-cell
+        :title="item.title"
+        :value="item.value"
+        :is-link="item.isLink"
+        :icon="item.icon"
+        v-for="item,index in ObjCell.list"
+        :key="index"
+        :to="item.to"
+      />
+    </van-cell-group>
+    <div class="content">
+      <slot name="content"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    ObjCell: {
+      type: Object,
+      default: () => ({
+        list: [],
+        top: '',
+        isInset: ''
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.order_list {
+  position: fixed;
+  width: 91.4vw;
+  margin-left: 4.3vw;
+  overflow: hidden;
+  ::v-deep .van-cell-group--inset{
+    margin: 0;
+    border-radius: 0;
+  }
+  .content {
+    background: #fff;
+  }
+}
+</style>

src/components/index.js

@@ -0,0 +1,14 @@
+/**
+ * 自动导入组件
+ */
+
+import Vue from 'vue'
+
+import requireFile from '@/util/tools'
+
+const componentList = requireFile(require.context('@/components', true, /\.vue/))
+console.log(componentList)
+
+componentList.forEach(file => {
+  Vue.component(file.filename, file.fileComponent)
+})

src/components/nav-bar.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <van-nav-bar
+      :title="title"
+      left-arrow
+      @click-left="$emit('click-left')"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: () => ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .van-nav-bar {
+  position: sticky;
+  top: 0;
+}
+::v-deep .van-nav-bar .van-icon {
+  color: #333333;
+}
+</style>

src/components/overLay-loading.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <van-overlay :show="show">
+      <div class="content">
+        <van-loading type="spinner" color="#1989fa"/>
+      </div>
+    </van-overlay>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  data () {
+    return {}
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+</style>

src/components/store-card.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="card">
+    <van-image width="100%" :src="storeInfo.image" />
+    <div class="store-title">{{ storeInfo.title }}</div>
+    <div class="store-price">{{ storeInfo.price }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    storeInfo: {
+      type: Object,
+      default: () => ({
+        image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
+        title: 'Prostrolane Nature-B珀洛丽肽焕活修颜精华肽焕活修颜精华',
+        price: '￥990.00'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card {
+  width: 45.6vw;
+  height: 66.4vw;
+  background: #fff;
+  margin-bottom: 3.2vw;
+  box-sizing: border-box;
+  .van-image {
+    height: 46.5vw;
+  }
+  .store-title {
+    padding: 0 3.2vw;
+    box-sizing: border-box;
+    font-size: 3.7vw;
+    color: black;
+    height: 9.7vw;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .store-price {
+    padding: 1vw 3.2vw 3.2vw 2.3vw;
+    color: #F94B4B;
+    font-size: 3.5vw;
+  }
+}
+</style>

src/components/team-card.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="team_card">
+    <div class="name">赵铭</div>
+    <div class="phone">
+      <div class="phone_label">
+        <div>手机号：</div>
+        <div>15889586623</div>
+      </div>
+      <div>
+        <slot name="editor" :data="teamList"></slot>
+      </div>
+    </div>
+    <div class="phone">
+      <div class="phone_label">
+        <div>状态：</div>
+        <div>已上线</div>
+      </div>
+      <div>
+        <slot name="online" :data="teamList"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    teamList: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.team_card {
+  background: #fff;
+  border-radius: 1vw;
+  box-sizing: border-box;
+  padding: 0 3.2vw;
+  margin-bottom: 3.2vw;
+  .name {
+    border-bottom: 1px solid #E1E1E1;
+    height: 12vw;
+    line-height: 12vw;
+    font-size: 4.3vw;
+    color: #333;
+  }
+  .phone {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .phone_label {
+      display: flex;
+      align-items: center;
+      padding: 4vw 0;
+      font-size: 3.7vw;
+      div:nth-child(1) {
+        color: #999999;
+      }
+    }
+  }
+}
+</style>

src/main.js

@@ -3,9 +3,14 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import '@/plugin/vant'
-import './permission'
+import './permission' // 路由跳转
+import '@/components/index' // 自动导入公共组件
+import Toast from '@/plugin/toast'
 
 Vue.config.productionTip = false
+Vue.use(Toast)
+
+Vue.prototype.$ApiRouter = ($event) => router.push({ path: $event }, () => {}) // 重复点击路由报错
 
 new Vue({
   router,

src/permission.js

@@ -8,17 +8,20 @@ NProgress.configure({ showSpinner: false })
 // const whiteList = ['/login', '/pwlogin']
 
 router.beforeEach((to, from, next) => {
-  // NProgress.start()
-  next()
-  // if (to.path === '/login') {
-  //  next({ path: '/' })
-  //  NProgress.done()
-  // } else {
-  //  next()
-  //  NProgress.done()
-  // }
+  // to要去的页面 from从哪里来 next放行
+  NProgress.start()
+  if (to.meta.title) {
+    document.title = to.meta.title
+  }
+  if (to.path === '/login') {
+    next()
+    NProgress.done()
+  } else {
+    next()
+    NProgress.done()
+  }
 })
 
 router.afterEach(() => {
-  // NProgress.done()
+  NProgress.done()
 })

src/plugin/element.js

@@ -1,14 +1,8 @@
 import Vue from 'vue'
 import {
-  Button,
-  Icon,
-  Cell,
-  CellGroup,
-  Loading
+  Form as ElForm,
+  FormItem as ELFormItem
 } from 'element-ui'
 
-Vue.use(Button)
-Vue.use(Icon)
-Vue.use(Cell)
-Vue.use(CellGroup)
-Vue.use(Loading)
+Vue.use(ElForm)
+Vue.use(ELFormItem)

src/plugin/toast.js

@@ -0,0 +1,30 @@
+import overLayLoading from '@/components/overLay-loading'
+
+const loading = {}
+
+loading.install = (Vue, Options) => {
+  const ToastConstruct = Vue.extend(overLayLoading)
+  const toast = new ToastConstruct()
+  const tDiv = document.createElement('div')
+  document.body.appendChild(tDiv)
+  toast.$mount(tDiv)
+
+  // 添加全局方法
+  Vue.showLoading = function () {
+    toast.show = true
+  }
+  Vue.hiddenLoading = function () {
+    toast.show = false
+  }
+  // 添加实例方法
+  Vue.prototype.$showLoading = function () {
+    toast.show = true
+  }
+  Vue.prototype.$hiddenLoading = function () {
+    toast.show = false
+  }
+}
+
+export default {
+  loading
+}

src/plugin/vant.js

@@ -4,7 +4,20 @@ import {
   Icon,
   Cell,
   CellGroup,
-  Loading
+  Loading,
+  Tabbar,
+  TabbarItem,
+  Image as VanImage,
+  Overlay,
+  Form,
+  Field,
+  Lazyload,
+  Badge,
+  NavBar,
+  Popup,
+  Picker,
+  Tab,
+  Tabs
 } from 'vant'
 
 Vue.use(Button)
@@ -12,3 +25,16 @@ Vue.use(Icon)
 Vue.use(Cell)
 Vue.use(CellGroup)
 Vue.use(Loading)
+Vue.use(Tabbar)
+Vue.use(TabbarItem)
+Vue.use(VanImage)
+Vue.use(Overlay)
+Vue.use(Form)
+Vue.use(Field)
+Vue.use(Lazyload)
+Vue.use(Badge)
+Vue.use(NavBar)
+Vue.use(Popup)
+Vue.use(Picker)
+Vue.use(Tab)
+Vue.use(Tabs)

src/router/index.js

@@ -3,6 +3,8 @@ import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
 
+const Layout = () => import('@/Layout/index.vue')
+
 const routes = [
   {
     path: '/',
@@ -11,12 +13,89 @@ const routes = [
   {
     path: '/login',
     name: 'login',
-    component: () => import(/* webpackChunkName: "login" */ '@/views/login/login.vue')
+    component: () => import(/* webpackChunkName: "login" */ '@/views/login/login.vue'),
+    meta: {
+      transition: 'slide-left',
+      title: '登录'
+    }
   },
   {
     path: '/pwlogin',
     name: 'pwlogin',
-    component: () => import(/* webpackChunkName: "register" */ '@/views/pwlogin/pwlogin.vue')
+    component: () => import(/* webpackChunkName: "register" */ '@/views/login/pwlogin.vue'),
+    meta: {
+      transition: 'slide-right',
+      title: '登录'
+    }
+  },
+  {
+    path: '/forgotPW',
+    name: 'forgotPW',
+    component: () => import(/* webpackChunkName: "register" */ '@/views/login/forgotPW.vue'),
+    meta: {
+      transition: 'slide-right',
+      title: '修改密码'
+    }
+  },
+  {
+    path: '/shopping-mall',
+    name: 'shopping-mall',
+    component: Layout,
+    children: [
+      {
+        path: '/',
+        component: () => import('@/views/shopping-mall/index.vue'),
+        meta: {
+          title: '分销系统'
+        }
+      }
+    ]
+  },
+  {
+    path: '/mine',
+    name: 'mine',
+    component: Layout,
+    children: [
+      {
+        path: '/',
+        component: () => import('@/views/mine/index.vue'),
+        meta: {
+          title: '个人中心'
+        }
+      }
+    ]
+  },
+  {
+    path: '/goods-detail/:id',
+    name: 'goods-detail',
+    component: () => import('@/views/goods-detail/index.vue'),
+    meta: {
+      title: '商品详情'
+    }
+  },
+  {
+    path: '/myTeam',
+    name: 'myTeam',
+    component: () => import('@/views/myTeam/index.vue'),
+    meta: {
+      title: '团队成员'
+    }
+  },
+  {
+    path: '/addTeam',
+    name: 'addTeam',
+    component: () => import('@/views/myTeam/addTeam.vue'),
+    meta: {
+      title: '添加成员'
+    }
+  },
+  {
+    path: '/order-report',
+    name: 'order-report',
+    component: () => import('@/views/order-report/index.vue'),
+    meta: {
+      title: '订单报备佣金'
+    }
   }
 ]
 

src/util/tools.js

@@ -0,0 +1,18 @@
+/**
+ * 获取组件
+ * @param {string} allComponent require.context读取的文件
+ */
+
+const requireFile = (allComponent) => {
+  const requireComponent = allComponent.keys().map(file => {
+    if (file.indexOf('index') === -1) {
+      return {
+        filename: file.split('/')[1].split('.')[0],
+        fileComponent: allComponent(file).default || allComponent(file)
+      }
+    }
+  })
+  return requireComponent
+}
+
+export default requireFile

src/views/goods-detail/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    商品详情
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/login/forgotPW.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="forgotPW">
+    <van-form @submit="changePW">
+      <van-field
+        placeholder="请输入手机号"
+        v-model="formData.phone"
+        :rules="[{ required: true, message: '请输入手机号' }]"
+      />
+      <van-field
+        v-model="formData.code"
+        name="validator"
+        placeholder="请输入短信验证码"
+        :rules="[{ validator: validatorVerification, message: '请输入6位数验证码' }]"
+        type="digit"
+        maxlength="6"
+      >
+        <template #button>
+          <van-button size="small" type="primary" color="#FF5B00" @click="fetchVerification">获取验证码</van-button>
+        </template>
+      </van-field>
+      <van-field
+        type="password"
+        placeholder="请输入密码"
+        v-model="formData.password"
+        :rules="[{ required: true, message: '请填写密码' }]"
+      />
+      <van-field
+        type="password"
+        placeholder="请确认密码"
+        v-model="formData.newPassword"
+        :rules="[{ required: true, message: '请确认密码' }]"
+      />
+      <div class="change-btn">
+        <van-button :class="disabled ? 'login-btn-disable' : 'login-btn'" :disabled="disabled" native-type="submit">修改密码</van-button>
+      </div>
+    </van-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      formData: {
+        phone: '',
+        code: '',
+        password: '',
+        newPassword: ''
+      },
+      disabled: true
+    }
+  },
+  methods: {
+    changePW () {},
+    validatorVerification (val) {
+      return /\d{6}/.test(val)
+    },
+    fetchVerification () {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.forgotPW {
+  width: 100%;
+  height: 100vh;
+  background: #fff;
+  padding-top: 8.7vw;
+}
+.login-btn-disable {
+  margin-top: 16vw;
+  width: 80vw;
+  background: #FFDCC8;
+  color: #fff;
+}
+.login-btn {
+  margin-top: 16vw;
+  width: 80vw;
+  background: #FF5B00;
+  color: #fff;
+}
+.change-btn {
+  display: flex;
+  justify-content: center;
+}
+</style>

src/views/login/login.vue

@@ -1,28 +1,116 @@
 <template>
   <div class="login">
-    <van-loading type="spinner" color="blue"/>
-    <van-button type="primary" @click="$router.push('/pwlogin')">按钮</van-button>
+    <div class="login-icon"></div>
+    <van-form @submit="submitLogin">
+      <van-field
+        v-model="form.phone"
+        name="validator"
+        placeholder="请输入手机号"
+        :rules="[{ validator: validatorPhone, message: '请输入正确的手机号' }]"
+        label=""
+        type="digit"
+        maxlength="11"
+        left-icon="smile-o"
+      />
+      <van-field
+        v-model="form.password"
+        name="validator"
+        placeholder="请输入短信验证码"
+        :rules="[{ validator: validatorVerification, message: '请输入6位数验证码' }]"
+        type="digit"
+        left-icon="smile-o"
+        maxlength="6"
+      >
+        <template #button>
+          <van-button size="small" type="primary" color="#FF5B00" @click="fetchVerification">获取验证码</van-button>
+        </template>
+      </van-field>
+      <div class="pwLogin">
+        <div @click="$ApiRouter('/pwlogin')">密码登录</div>
+      </div>
+      <van-button :class="disabled ? 'login-btn-disable' : 'login-btn'" :disabled="disabled" native-type="submit">登录</van-button>
+    </van-form>
   </div>
 </template>
 
 <script>
+import { Toast } from 'vant'
+
 export default {
   name: 'login-index',
   data () {
-    return {}
+    return {
+      form: {
+        phone: '',
+        password: ''
+      },
+      disabled: false
+    }
   },
   mounted () {
-    console.log(process.env.NODE_ENV)
   },
   methods: {
+    validatorPhone (val) {
+      return /1\d{10}/.test(val)
+    },
+    validatorVerification (val) {
+      return /\d{6}/.test(val)
+    },
+    onFailed (errorInfo) {
+      console.log('failed', errorInfo)
+    },
+    fetchVerification () {
+      Toast.loading('验证码已发送')
+      setTimeout(() => {
+        Toast.clear()
+      }, 1000)
+    },
+    submitLogin ($event) {
+      console.log($event)
+      this.$ApiRouter('/shopping-mall')
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .login {
-  height: 100%;
+  height: 100vh;
   width: 100%;
-  background: yellow;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #fff;
+  .login-icon {
+    margin: 24.1vw 0 16vw 0;
+    width: 37.1vw;
+    height: 7vw;
+  }
+  .van-form {
+    width: 80vw;
+    .van-cell {
+      border-bottom: 1px solid #E1E1E1;
+    }
+  }
+  .pwLogin {
+    display: flex;
+    flex-direction: row-reverse;
+    font-size: 3.2vw;
+    color: #FF5B00;
+    margin-top: 2.3vw;
+    width: 80vw;
+  }
+  .login-btn-disable {
+    margin-top: 16vw;
+    width: 80vw;
+    background: #FFDCC8;
+    color: #fff;
+  }
+  .login-btn {
+    margin-top: 16vw;
+    width: 80vw;
+    background: #FF5B00;
+    color: #fff;
+  }
 }
 </style>

src/views/login/pwlogin.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="login">
+    <div class="login-icon"></div>
+    <van-form @submit="submitLogin">
+      <van-field
+        v-model="form.phone"
+        name="validator"
+        placeholder="请输入手机号"
+        :rules="[{ validator: validatorPhone, message: '请输入正确的手机号' }]"
+        label=""
+        type="digit"
+        maxlength="11"
+        left-icon="smile-o"
+      />
+      <van-field
+        v-model="form.password"
+        name="validator"
+        placeholder="请输入密码"
+        :rules="[{ validator: validatorVerification, message: '请输入密码' }]"
+        type="digit"
+        left-icon="smile-o"
+        maxlength="8"
+      />
+      <div class="pwLogin">
+        <div @click="$ApiRouter('/login')">验证码登录</div>
+      </div>
+      <van-button :class="disabled ? 'login-btn-disable' : 'login-btn'" :disabled="disabled" native-type="submit">登录</van-button>
+      <div class="forgotPW" @click="$ApiRouter('/forgotPW')">忘记密码？</div>
+    </van-form>
+  </div>
+</template>
+
+<script>
+import { Toast } from 'vant'
+
+export default {
+  name: 'login-index',
+  data () {
+    return {
+      form: {
+        phone: '',
+        password: ''
+      },
+      disabled: false
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    validatorPhone (val) {
+      return /1\d{10}/.test(val)
+    },
+    validatorVerification (val) {
+      return /\d{6}/.test(val)
+    },
+    onFailed (errorInfo) {
+      console.log('failed', errorInfo)
+    },
+    fetchVerification () {
+      Toast.loading('验证码已发送')
+      setTimeout(() => {
+        Toast.clear()
+      }, 1000)
+    },
+    submitLogin ($event) {
+      console.log($event)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.login {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #fff;
+  .login-icon {
+    margin: 24.1vw 0 16vw 0;
+    width: 37.1vw;
+    height: 7vw;
+  }
+  .van-form {
+    width: 80vw;
+    .van-cell {
+      border-bottom: 1px solid #E1E1E1;
+    }
+  }
+  .pwLogin {
+    display: flex;
+    flex-direction: row-reverse;
+    font-size: 3.2vw;
+    color: #FF5B00;
+    margin-top: 2.3vw;
+    width: 80vw;
+  }
+  .login-btn-disable {
+    margin-top: 16vw;
+    width: 80vw;
+    background: #FFDCC8;
+    color: #fff;
+  }
+  .login-btn {
+    margin-top: 16vw;
+    width: 80vw;
+    background: #FF5B00;
+    color: #fff;
+  }
+  .forgotPW {
+    color: #666666;
+    font-size: 3.2vw;
+    margin-top: 4.3vw;
+    text-align: center;
+  }
+}
+</style>

src/views/mine/index.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="mine">
+    <div class="mine-bg">
+      <div class="user_icon">
+        <van-image
+          lazy-load
+          round
+          src="https://img01.yzcdn.cn/vant/cat.jpeg"
+          fit="cover"
+        />
+        <div class="user_name">赵铭</div>
+      </div>
+    </div>
+    <order-type-list :obj-cell="ObjCell">
+      <template #content>
+        <div class="cell_content">
+          <van-badge
+            :content="item.content"
+            max="99"
+            v-for="item,index in orderLinks"
+            :key="index"
+            @click="$ApiRouter(`${item.link}`)"
+          >
+            <div class="child">
+              <img src="" alt="" />
+              <div>{{ item.name }}</div>
+            </div>
+          </van-badge>
+        </div>
+      </template>
+    </order-type-list>
+    <order-type-list :obj-cell="ObjCellLink" />
+    <div class="logo-bottom">
+      <img src="" alt="">
+      <div>由采美365网提供技术支持</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      ObjCell: {
+        list: [
+          {
+            isLink: true,
+            title: '我的订单',
+            value: '全部订单',
+            to: ''
+          }
+        ],
+        isInset: true,
+        top: '24.3vw'
+      },
+      ObjCellLink: {
+        list: [
+          {
+            isLink: true,
+            title: '机构意向订单报备',
+            value: '',
+            to: '',
+            icon: 'location-o'
+          },
+          {
+            isLink: true,
+            title: '我的团队',
+            value: '',
+            to: '/myTeam',
+            icon: 'location-o'
+          },
+          {
+            isLink: true,
+            title: '订单报备佣金',
+            value: '',
+            to: '/order-report',
+            icon: 'location-o'
+          },
+          {
+            isLink: true,
+            title: '订单销售佣金',
+            value: '',
+            to: '',
+            icon: 'location-o'
+          },
+          {
+            isLink: true,
+            title: '我的名片',
+            value: '',
+            to: '',
+            icon: 'location-o'
+          },
+          {
+            isLink: true,
+            title: '商品资料',
+            value: '',
+            to: '',
+            icon: 'location-o'
+          },
+          {
+            isLink: true,
+            title: '账户设置',
+            value: '',
+            to: '',
+            icon: 'location-o'
+          }
+        ],
+        isInset: true,
+        top: '62.7vw'
+      },
+      orderLinks: [
+        {
+          icon: '',
+          link: '',
+          content: 200,
+          name: '待确认'
+        },
+        {
+          icon: '',
+          link: '',
+          content: 200,
+          name: '待付款'
+        },
+        {
+          icon: '',
+          link: '',
+          content: 200,
+          name: '待发货'
+        },
+        {
+          icon: '',
+          link: '',
+          content: 200,
+          name: '已发货'
+        },
+        {
+          icon: '',
+          link: '',
+          content: 200,
+          name: '退货/款'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mine {
+  width: 100%;
+  height: 100vh;
+  background: #f5f5f5;
+  position: relative;
+  .mine-bg {
+    height: 29.3vw;
+    background: #ff5b00;
+    padding: 5.3vw 4.3vw;
+    .user_icon {
+      height: 15.7vw;
+      display: flex;
+      align-items: center;
+      ::v-deep .van-image__img {
+        width: 15.7vw;
+        height: 15.7vw;
+        margin-right: 5.3vw;
+      }
+      .user_name {
+        font-size: 4.3vw;
+        color: #fff;
+      }
+    }
+  }
+  .cell_content {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    height: 23.1vw;
+    .child {
+      width: 12vw;
+      height: 15vw;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      img {
+        width: 8.5vw;
+        height: 8.5vw;
+        object-fit: contain;
+      }
+      div {
+        color: #666666;
+        font-size: 3.5vw;
+      }
+    }
+  }
+  .logo-bottom {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 37.7vw;
+    margin: 0 auto;
+    position: absolute;
+    bottom: 15vw;
+    left: 50%;
+    height: 14vw;
+    transform: translateX(-50%);
+    img {
+      width: 9.3vw;
+      height: 9.1vw;
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        width: 12.8vw;
+        transform: translateY(-50%);
+        height: 2px;
+        background: #666666;
+        left: -14.8vw;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        width: 12.8vw;
+        transform: translateY(-50%);
+        right: -14.8vw;
+        height: 2px;
+        background: #666666;
+      }
+    }
+    div {
+      color: #999999;
+      font-size: 3.2vw;
+    }
+  }
+}
+</style>

src/views/myTeam/addTeam.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <van-nav-bar
+      title="团队成员"
+      left-arrow
+      @click-left="$router.back()"
+    />
+    <van-form>
+      <van-field
+        placeholder="请输入成员姓名"
+        v-model="formData.name"
+      />
+      <van-field
+        placeholder="请输入手机号"
+        v-model="formData.phone"
+        maxlength="11"
+      />
+      <van-field
+        readonly
+        clickable
+        name="picker"
+        :value="formData.state"
+        placeholder="状态"
+        @click="showPicker = true"
+      />
+    </van-form>
+    <van-popup v-model="showPicker" position="bottom">
+      <van-picker
+        show-toolbar
+        :columns="columns"
+        @confirm="onConfirm"
+        @cancel="showPicker = false"
+      />
+    </van-popup>
+    <div class="add_btn">
+      <van-button :disabled="disabled" :class="disabled ? 'add' : 'disabled'" @click="save">保存</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      disabled: false,
+      formData: {
+        phone: '',
+        name: '',
+        state: ''
+      },
+      columns: ['上线', '下线'],
+      showPicker: false
+    }
+  },
+  methods: {
+    save () {},
+    onConfirm ($event) {
+      this.showPicker = false
+      this.formData.state = $event
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add_btn {
+  height: 13.1vw;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  .add {
+    width: 80vw;
+    border-radius: 4px;
+    background: #FF5B00;
+    color: #fff;
+  }
+  .disabled {
+    width: 80vw;
+    border-radius: 4px;
+    background: #FFDCC8;
+    color: #fff;
+  }
+}
+::v-deep .van-nav-bar {
+  position: sticky;
+  top: 0;
+}
+::v-deep .van-nav-bar .van-icon {
+  color: #333333;
+}
+</style>

src/views/myTeam/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="myTeam">
+    <van-nav-bar
+      title="我的团队"
+      left-arrow
+      @click-left="$router.back()"
+    />
+    <div class="team_list" v-if="teamList.length > 0">
+      <team-card v-for="item,index in teamList" :key="index" :teamList="item">
+        <template #editor="{ data }">
+          <van-button size="small" color="#E4F4FF" class="editor" @click="editor(data)">编辑</van-button>
+        </template>
+        <template #online="{ data }">
+          <van-button size="small" color="#FFEEE4" class="online" @click="online(data)">上线</van-button>
+        </template>
+      </team-card>
+    </div>
+    <div class="empty" v-else>
+      暂无成员~
+    </div>
+    <div class="add_btn">
+      <van-button color="#FF5B00" class="add" @click="$ApiRouter('/addTeam')">添加成员</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      teamList: []
+    }
+  },
+  methods: {
+    editor ($event) {
+      console.log($event)
+    },
+    online ($event) {
+      console.log($event)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.myTeam {
+  width: 100%;
+  min-height: 100vh;
+  .empty {
+    text-align: center;
+    font-size: 4.3vw;
+    color: #999999;
+    margin-top: 47vw;
+  }
+  .team_list {
+    width: 100%;
+    padding: 3.3vw 3.2vw 13.1vw 3.2vw;
+    box-sizing: border-box;
+    ::v-deep .van-button {
+      width: 17.1vw;
+      height: 7.5vw;
+    }
+    .editor ::v-deep .van-button__text {
+      color: #1890F9;
+    }
+    .online ::v-deep .van-button__text {
+      color: #FF5B00;
+    }
+  }
+  .add_btn {
+    height: 13.1vw;
+    background: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    .add {
+      width: 80vw;
+      border-radius: 4px;
+    }
+  }
+}
+::v-deep .van-nav-bar {
+  position: sticky;
+  top: 0;
+}
+::v-deep .van-nav-bar .van-icon {
+  color: #333333;
+}
+</style>

src/views/order-report/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="order-report">
+    <nav-bar
+      title="订单报备佣金"
+      @click-left="$router.back()"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.order-report {
+  width: 100%;
+  min-height: 100vh;
+  background: #F5F5F5;
+}
+</style>

src/views/pwlogin/pwlogin.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="pwlogin">
-    <van-button type="primary" @click="$router.push('/login')">按钮</van-button>
-  </div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style lang="scss" scoped>
-.pwlogin {
-  height: 100%;
-  width: 100%;
-  background: red;
-}
-</style>

src/views/shopping-mall/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="shop-mall">
+    <store-card v-for="i in 10" :key="i"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      show: true
+    }
+  },
+  mounted () {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.shop-mall {
+  padding: 3.2vw 3.2vw 13.1vw 3.2vw;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+</style>