项目初始化

src/components/mine-card.vue

@@ -0,0 +1,140 @@
+<template>
+  <div
+    class="card"
+    :style="{ backgroundImage: `url(${imgUrl})`, backgroundSize: '100% 100%' }"
+  >
+    <div class="logo">
+      <van-image
+        src="https://static.caimei365.com/app/img/icon/logo-fanbai.png"
+        mode=""
+        class="titleImgUrl"
+      ></van-image>
+    </div>
+    <div class="card-contain">
+      <div style="display: flex">
+        <div class="card-head">
+          <van-image
+            :src="
+              userInfo.image && userInfo.image.length > 12
+                ? userInfo.image
+                : 'https://static.caimei365.com/app/img/icon/default-head-new.png'
+            "
+            mode=""
+            class="head"
+          ></van-image>
+        </div>
+        <div class="card-info">
+          <div class="card-info-head">
+            <div class="card-name">
+              {{ userInfo.linkMan }}
+            </div>
+            <div class="card-info-tab">客户经理</div>
+          </div>
+          <div class="card-info-iphone">
+            {{
+              userInfo.contractMobile
+                ? userInfo.contractMobile.replace(/(?=(\d{4})+$)/g, "-")
+                : ""
+            }}
+          </div>
+        </div>
+      </div>
+      <div class="card-qrcode">
+        <div class="qrcode-message">
+          <van-image :src="userInfo.qrCode || ''" class="qrcode" mode=""></van-image>
+        </div>
+        <div class="tips">长按或扫二维码—-联系我-—</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    userInfo: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      imgUrl: 'https://static.caimei365.com/app/img/icon/bg-card.png'
+    }
+  },
+  mounted () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.card {
+  width: 93.6vw;
+  height: 45.3vw;
+  background: #ff5b00;
+  border-radius: 2.1vw;
+  opacity: 1;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 6.5vw 3.2vw;
+  .titleImgUrl {
+    width: 32.8vw;
+    height: 8.8vw;
+  }
+  .card-contain {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .head {
+      width: 17.1vw;
+      height: 17.1vw;
+      border-radius: 50%;
+      object-fit: contain;
+    }
+    .card-info {
+      margin-left: 4vw;
+    }
+    .card-info-head {
+      display: flex;
+      align-items: center;
+      margin-bottom: 1.7vw;
+      .card-name {
+        color: #ffffff;
+        font-size: 5.3vw;
+        font-weight: bold;
+      }
+      .card-info-tab {
+        width: 13.9vw;
+        height: 4.3vw;
+        background-color: #ffbb00;
+        color: #fff;
+        font-size: 2.9vw;
+        padding: 0 1vw;
+        margin-left: 1.3vw;
+      }
+    }
+    .card-info-iphone {
+      color: #ffffff;
+      font-size: 3.7vw;
+    }
+    .card-qrcode {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .qrcode {
+        width: 16vw;
+        height: 16vw;
+        object-fit: contain;
+        margin-bottom: 0.8vw;
+      }
+      .tips {
+        font-size: 1vw;
+        color: #fff;
+        text-align: center;
+        width: 22.8vw;
+        line-height: 3.2vw;
+      }
+    }
+  }
+}
+</style>

src/components/order-report-card.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="reportCard">
+    <div class="title">科医人医疗激光设备贸易公司</div>
+    <div class="item">
+      <div>联系人：</div>
+      <div>name</div>
+    </div>
+    <div class="item">
+      <div>手机号：</div>
+      <div>165464664</div>
+    </div>
+    <div class="goods">
+      <div class="text">意向商品：</div>
+      <div class="goodsInfo">
+        <div class="img"></div>
+        <div class="content">
+          <div class="goods_title">科医人医疗激光</div>
+          <div class="name">
+            供应商：<span>医科人</span>
+          </div>
+          <div class="price">￥6800.00</div>
+        </div>
+      </div>
+    </div>
+    <div class="line"></div>
+    <slot name="card-foot"></slot>
+    <van-image class="image" v-if="isTabImg"></van-image>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isTabImg: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.reportCard {
+  padding: 5.3vw 3.2vw;
+  background: #fff;
+  position: relative;
+  .title {
+    color: #333333;
+    font-size: 4.3vw;
+    font-weight: 600;
+    margin-bottom: 3.2vw;
+  }
+  .item {
+    font-size: 3.7vw;
+    color: #999999;
+    display: flex;
+    align-items: center;
+    margin-bottom: 2.1vw;
+    div:nth-child(2) {
+      color: #333333;
+    }
+  }
+  .goods {
+    .text {
+      font-size: 3.7vw;
+      color: #999;
+      margin-bottom: 2.1vw;
+    }
+    .goodsInfo {
+      background: #F7F7F7;
+      display: flex;
+      align-items: center;
+      padding: 3.5vw;
+      border-radius: 1.1vw;
+      .img {
+        width: 17.1vw;
+        height: 17.1vw;
+        border-radius: 0.5vw;
+        border: 1px solid;
+        margin-right: 3.2vw;
+      }
+      .content {
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        height: 17.1vw;
+        .goods_title {
+          color: #333333;
+          font-weight: 600;
+          font-size: 3.7vw;
+        }
+        .name {
+          font-size: 3.2vw;
+          color: #999999;
+          span {
+            color: #333333;
+          }
+        }
+        .price {
+          color: #F94B4B;
+          font-size: 3.2vw;
+        }
+      }
+    }
+  }
+  .line {
+    margin: 4.5vw 0;
+    height: 1px;
+    background: #E1E1E1;
+  }
+  .image {
+    top: 4.3vw;
+    right: 4.3vw;
+    position: absolute;
+    width: 21.3vw;
+    height: 21.3vw;
+    border: 1px solid;
+  }
+}
+</style>

src/components/order-report-search.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="report-search">
+    <van-form @submit="search">
+       <van-field placeholder="请输入成员姓名" v-model="formData.name" />
+       <van-field placeholder="请输入手机号" maxlength="11" v-model="formData.phone" />
+       <div class="search_btn">
+        <van-button color="#FF5B00" native-type="submit">搜索</van-button>
+       </div>
+    </van-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      formData: {
+        name: '',
+        phone: ''
+      }
+    }
+  },
+  methods: {
+    search () {
+      this.$emit('search', this.formData)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.van-form {
+  background: #fff;
+}
+::v-deep .van-field__control {
+  font-size: 3.7vw;
+  color: #B2B2B2;
+  border: 1px solid #B2B2B2;
+  border-radius: 1vw;
+  padding: 3.3vw;
+}
+.search_btn {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.van-button {
+  width: 56vw;
+  height: 12vw;
+  border-radius: 1.1vw;
+}
+</style>

src/components/sales-card-list.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="card-list">
+    <van-checkbox-group v-model="result" ref="checkboxGroup">
+      <div class="card_item">
+        <van-checkbox shape="square" checked-color="#FF5B00" v-if="isChecked" />
+        <div class="item">
+          <div class="label">下单编号：<span>X125623645215</span></div>
+          <div class="label">佣金：<span>300</span></div>
+          <div class="label">下单时间号：<span>X125623645215</span></div>
+          <div class="label">下单时间号：<span>X125623645215</span></div>
+        </div>
+      </div>
+    </van-checkbox-group>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tabList: {
+      type: Array,
+      default: () => ([])
+    },
+    isChecked: {
+      type: Boolean,
+      default: () => true
+    }
+  },
+  data () {
+    return {
+      result: []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card-list {
+  background: #fff;
+  padding: 5.3vw 5vw;
+  .card_item {
+    display: flex;
+    align-items: flex-start;
+    ::v-deep .van-checkbox {
+      width: 4.8vw;
+      height: 4.8vw;
+    }
+    ::v-deep .van-checkbox {
+      ::v-deep .van-checkbox__icon {
+        font-size: 4.8vw;
+      }
+    }
+  }
+  .item {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+</style>

src/plugin/vant.js

@@ -17,7 +17,11 @@ import {
   Popup,
   Picker,
   Tab,
-  Tabs
+  Tabs,
+  ActionSheet,
+  DatetimePicker,
+  Checkbox,
+  CheckboxGroup
 } from 'vant'
 
 Vue.use(Button)
@@ -38,3 +42,7 @@ Vue.use(Popup)
 Vue.use(Picker)
 Vue.use(Tab)
 Vue.use(Tabs)
+Vue.use(ActionSheet)
+Vue.use(DatetimePicker)
+Vue.use(Checkbox)
+Vue.use(CheckboxGroup)

src/router/index.js

@@ -74,9 +74,9 @@ const routes = [
     }
   },
   {
-    path: '/myTeam',
-    name: 'myTeam',
-    component: () => import('@/views/myTeam/index.vue'),
+    path: '/my-team',
+    name: 'my-team',
+    component: () => import('@/views/my-team/index.vue'),
     meta: {
       title: '团队成员'
     }
@@ -84,7 +84,7 @@ const routes = [
   {
     path: '/addTeam',
     name: 'addTeam',
-    component: () => import('@/views/myTeam/addTeam.vue'),
+    component: () => import('@/views/my-team/addTeam.vue'),
     meta: {
       title: '添加成员'
     }
@@ -96,6 +96,62 @@ const routes = [
     meta: {
       title: '订单报备佣金'
     }
+  },
+  {
+    path: '/order-report-detail',
+    name: 'order-report-detail',
+    component: () => import('@/views/order-report/detail.vue'),
+    meta: {
+      title: '订单报备佣金详情'
+    }
+  },
+  {
+    path: '/mine-card',
+    name: 'mine-card',
+    component: () => import('@/views/mine-card/index.vue'),
+    meta: {
+      title: '我的名片'
+    }
+  },
+  {
+    path: '/mine-qrcode',
+    name: 'mine-qrcode',
+    component: () => import('@/views/mine-card/qrcode.vue'),
+    meta: {
+      title: '我的名片'
+    }
+  },
+  {
+    path: '/save-card',
+    name: 'save-card',
+    component: () => import('@/views/mine-card/save-card.vue'),
+    meta: {
+      title: '我的名片'
+    }
+  },
+  {
+    path: '/account-settings',
+    name: 'account-settings',
+    component: () => import('@/views/login/account-settings.vue'),
+    meta: {
+      title: '账户设置'
+    }
+  },
+  {
+    path: '/order-sales',
+    name: 'order-sales',
+    component: () => import('@/views/order-sales/index.vue'),
+    meta: {
+      title: '订单销售佣金'
+    }
+  },
+  {
+    path: '/order-sales-detail',
+    name: 'order-sales-detail',
+    component: () => import('@/views/order-sales/detail.vue'),
+    meta: {
+      title: '订单销售佣金详情'
+    }
   }
 ]
 

src/views/login/account-settings.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <nav-bar title="账户设置" @click-left="$router.back()"/>
+    <order-type-list :obj-cell="ObjCellLink" />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      ObjCellLink: {
+        list: [
+          {
+            isLink: true,
+            title: '修改密码',
+            value: '',
+            to: '/forgotPW'
+          }
+        ],
+        isInset: false,
+        top: '15vw'
+      }
+    }
+  }
+}
+</script>

src/views/login/forgotPW.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="forgotPW">
+    <nav-bar title="修改密码" @click-left="$router.back()"/>
     <van-form @submit="changePW">
       <van-field
         placeholder="请输入手机号"
@@ -65,7 +66,6 @@ export default {
   width: 100%;
   height: 100vh;
   background: #fff;
-  padding-top: 8.7vw;
 }
 .login-btn-disable {
   margin-top: 16vw;

src/views/mine-card/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="mine-card">
+    <nav-bar title="我的名片" @click-left="$router.back()"/>
+    <div class="card-item" @click="show = true">
+      <div>头像</div>
+      <div class="card-img">
+        <van-image src=""></van-image>
+      </div>
+      <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
+    </div>
+    <div class="card-item" @click="$router.push('/mine-qrcode')">
+      <div>二维码</div>
+      <div class="card-img">
+        <van-image src=""></van-image>
+      </div>
+      <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
+    </div>
+    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      actions: [{ name: '手机相册', id: 1 }, { name: '取消', id: 2 }],
+      show: false
+    }
+  },
+  methods: {
+    onSelect ($event) {
+      if ($event.id === 2) {
+        this.show = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mine-card {
+  background: #fff;
+  padding: 4.3vw;
+  .card-item {
+    padding: 2vw 6vw 2vw 2.1vw;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #E1E1E1;
+    ::v-deep .van-icon {
+      position: absolute;
+      right: 0;
+    }
+    div:nth-child(1) {
+      font-size: 3.7vw;
+      color: #666666;
+    }
+    .card-img {
+      width: 12vw;
+      height: 12vw;
+      border-radius: 50%;
+      overflow: hidden;
+      ::v-deep .van-image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

src/views/mine-card/qrcode.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <nav-bar title="我的名片" @click-left="$router.back()"/>
+    <div class="qrcode">
+      <div class="upload">
+        <div>点击上传二维码</div>
+      </div>
+      <van-button color="#FF5B00">上传二维码</van-button>
+      <van-button color="#FF5B00" @click="$router.push('/save-card')">保存</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.qrcode {
+ padding-top: 12vw;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background: #fff;
+  .upload {
+    width: 53.3vw;
+    height: 53.3vw;
+    border-radius: 1.1vw;
+    border: 1px dotted #B2B2B2;
+    margin-bottom: 13.5vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    div {
+      color: #B2B2B2;
+      font-size: 3.2vw;
+    }
+  }
+}
+::v-deep .van-button {
+  width: 80vw;
+  height: 12vw;
+  border-radius: 1.1vw;
+  margin-bottom: 4vw;
+}
+</style>

src/views/mine-card/save-card.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <nav-bar title="我的名片" @click-left="$router.back()"/>
+    <div class="mineCard">
+      <mine-card></mine-card>
+      <div class="tip">商城名片（方便买家在商城联系您）</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.mineCard {
+  padding-top: 6.5vw;
+  background: #fff;
+  .tip {
+    margin-top: 2.7vw;
+    padding: 0 3.2vw;
+    color: #999999;
+    font-size: 3.2vw;
+  }
+}
+</style>

src/views/mine/index.vue

@@ -80,14 +80,14 @@ export default {
             isLink: true,
             title: '订单销售佣金',
             value: '',
-            to: '',
+            to: '/order-sales',
             icon: 'location-o'
           },
           {
             isLink: true,
             title: '我的名片',
             value: '',
-            to: '',
+            to: '/mine-card',
             icon: 'location-o'
           },
           {
@@ -101,7 +101,7 @@ export default {
             isLink: true,
             title: '账户设置',
             value: '',
-            to: '',
+            to: '/account-settings',
             icon: 'location-o'
           }
         ],

src/views/order-report/detail.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="report-detail">
+    <div style="position: sticky;top: 0;z-index: 999;">
+      <nav-bar title="订单报备佣金详情" @click-left="$router.back()"/>
+      <div class="report-card">
+        <div class="card-item">
+          <div>成员姓名：<span>李琪琪123</span></div>
+        </div>
+        <div class="card-item">
+          <div>手机号：<span>15889586623</span></div>
+        </div>
+        <div class="card-item">
+          <div>订单数量：<span>23</span></div>
+        </div>
+        <div class="card-item">
+          <div>佣金：<span>1588</span></div>
+        </div>
+      </div>
+      <van-form @submit="searchNum">
+         <van-field placeholder="请输入订单编号" v-model="formData.number"/>
+         <div class="search-btn">
+          <van-button color="#FF5B00" native-type="submit">搜索</van-button>
+         </div>
+      </van-form>
+    </div>
+    <div class="report-card-list">
+      <order-report-card>
+        <template #card-foot>
+          <div class="foot">
+            <div class="commission">
+              <div>佣金：</div>
+              <div>￥6800.00</div>
+            </div>
+          </div>
+          <div class="foot">
+            <div class="time">
+              <div>结算时间：</div>
+              <div>2023-09-18  10:37:31</div>
+            </div>
+          </div>
+          <div class="compile">
+            <van-button @click="compile">确认结算</van-button>
+          </div>
+        </template>
+      </order-report-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      formData: {
+        number: ''
+      }
+    }
+  },
+  methods: {
+    searchNum () {},
+    compile () {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-detail {
+  .report-card-list {
+    padding: 3.2vw;
+    ::v-deep .reportCard {
+      border-radius: 1.1vw;
+    }
+  }
+  ::v-deep .van-form {
+    padding-bottom: 6.4vw;
+    background: #fff;
+  }
+}
+.report-card {
+  padding: 7vw 3.2vw 3vw 3.2vw;
+  display: grid;
+  height: 24.5vw;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  background: #fff;
+  .card-item {
+    font-size: 3.7vw;
+    color: #999999;
+    span {
+      color: #333333;
+    }
+  }
+}
+::v-deep .van-field__control {
+  height: 12vw;
+  border: 1px solid #B2B2B2;
+  border-radius: 1.1vw;
+  font-size: 3.7vw;
+  color: #B2B2B2;
+  padding-left: 3.2vw;
+}
+.search-btn {
+  background: #fff;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  ::v-deep .van-button {
+    width: 56vw;
+    height: 12vw;
+  }
+}
+.foot {
+  .commission {
+    display: flex;
+    align-items: center;
+    margin-bottom: 3.2vw;
+    div:nth-child(1) {
+      font-size: 3.7vw;
+      color: #333333;
+      font-weight: 600;
+    }
+    div:nth-child(2) {
+      font-size: 3.7vw;
+      color: #F94B4B;
+    }
+  }
+  .time {
+    display: flex;
+    align-items: center;
+    div{
+      font-size: 3.7vw;
+      color: #333333;
+      font-weight: 600;
+    }
+  }
+}
+.compile {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 6.5vw;
+  ::v-deep .van-button {
+    width: 80vw;
+    height: 12vw;
+    border-radius: 1.1vw;
+  }
+}
+</style>

src/views/order-report/index.vue

@@ -1,15 +1,82 @@
 <template>
   <div class="order-report">
-    <nav-bar
-      title="订单报备佣金"
-      @click-left="$router.back()"
-    />
+    <div style="position: sticky;top: 0;z-index: 999;">
+      <nav-bar title="订单报备佣金" @click-left="$router.back()" />
+      <van-tabs v-model="activeName">
+        <van-tab
+          :title="item.title"
+          :name="item.name"
+          v-for="item in orderStatusType"
+          :key="item.name"
+        />
+      </van-tabs>
+      <div style="height: 3.2vw;background: #F5F5F5"></div>
+      <div class="allSub" v-if="activeName == '1'">
+        <div class="order-sum" v-for="item,index in allSub" :key="index">
+          <div>{{ item.title }}</div>
+          <div>{{ item.sum }}</div>
+        </div>
+      </div>
+      <order-report-search @search="searchType"/>
+    </div>
+    <div class="order-report-list">
+      <div class="report-card" v-for="i in 10" :key="i" @click="$ApiRouter('/order-report-detail')">
+        <div class="card-item">
+          <div>成员姓名：<span>李琪琪123</span></div>
+        </div>
+        <div class="card-item">
+          <div>手机号：<span>15889586623</span></div>
+        </div>
+        <div class="card-item">
+          <div>订单数量：<span>23</span></div>
+        </div>
+        <div class="card-item">
+          <div>佣金：<span>1588</span></div>
+        </div>
+        <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import OrderReportSearch from '../../components/order-report-search'
 export default {
-
+  components: { OrderReportSearch },
+  data () {
+    return {
+      orderStatusType: [
+        {
+          title: '待结算',
+          name: '1'
+        },
+        {
+          title: '待确认',
+          name: '2'
+        },
+        {
+          title: '已结算',
+          name: '3'
+        }
+      ],
+      activeName: '2',
+      allSub: [
+        {
+          title: '订单数量',
+          sum: 60
+        },
+        {
+          title: '佣金',
+          sum: 3000
+        }
+      ]
+    }
+  },
+  methods: {
+    searchType ($event) {
+      console.log($event)
+    }
+  }
 }
 </script>
 
@@ -17,6 +84,63 @@ export default {
 .order-report {
   width: 100%;
   min-height: 100vh;
-  background: #F5F5F5;
+  background: #f5f5f5;
+}
+::v-deep .van-tab--active {
+  color: #ff5b00;
+}
+::v-deep .van-tabs__line {
+  background-color: #ff5b00;
+}
+.allSub {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background: #fff;
+  padding: 6.4vw 0;
+  .order-sum {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    div:nth-child(1) {
+      color: #666666;
+      font-size: 3.7vw;
+    }
+    div:nth-child(2) {
+      margin-top: 4vw;
+      color: #333333;
+      font-size: 5.3vw;
+      font-weight: 600;
+    }
+  }
+}
+.order-report-list {
+  background: #fff;
+  padding: 8vw 3.2vw 0 3.2vw;
+  box-sizing: border-box;
+  height: calc(100vh - 78vw);
+  overflow: auto;
+  .report-card {
+    padding: 3vw 0;
+    display: grid;
+    height: 22.5vw;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    align-items: center;
+    border-bottom: 1px solid #E1E1E1;
+    box-sizing: border-box;
+    position: relative;
+    i {
+      position: absolute;
+      right: 0;
+    }
+    .card-item {
+      font-size: 3.7vw;
+      color: #999999;
+      span {
+        color: #333333;
+      }
+    }
+  }
 }
 </style>

src/views/order-sales/detail.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="report-detail">
+    <div style="position: sticky; top: 0; z-index: 999">
+      <nav-bar title="订单报备佣金详情" @click-left="$router.back()" />
+      <div class="report-card">
+        <div class="card-item">
+          <div>成员姓名：<span>李琪琪123</span></div>
+        </div>
+        <div class="card-item">
+          <div>手机号：<span>15889586623</span></div>
+        </div>
+        <div class="card-item">
+          <div>订单数量：<span>23</span></div>
+        </div>
+        <div class="card-item">
+          <div>佣金：<span>1588</span></div>
+        </div>
+      </div>
+      <van-form @submit="searchNum">
+        <van-field placeholder="请输入订单编号" v-model="formData.number" />
+        <div class="chang-time">
+          <van-field
+            placeholder="开始时间"
+            readonly
+            clickable
+            name="date"
+            v-model="formData.starTime"
+            @click="showStartPicker = true"
+          />
+          至
+          <van-field
+            placeholder="结束时间"
+            readonly
+            clickable
+            v-model="formData.endTime"
+            @click="showEndPicker = true"
+          />
+        </div>
+        <div class="search-btn">
+          <van-button color="#FF5B00" native-type="submit">搜索</van-button>
+        </div>
+      </van-form>
+      <div class="line"></div>
+    </div>
+    <sales-card-list></sales-card-list>
+    <van-popup v-model="showStartPicker" position="bottom">
+      <van-datetime-picker
+        type="date"
+        title="选择年月日"
+        v-model="date"
+        :min-date="minDate"
+        :max-date="maxDate"
+        @confirm="onConfirm($event, 1)"
+        @cancel="showStartPicker = false"
+      />
+    </van-popup>
+    <van-popup v-model="showEndPicker" position="bottom">
+      <van-datetime-picker
+        type="date"
+        title="选择年月日"
+        v-model="date"
+        :min-date="minDate"
+        :max-date="maxDate"
+        @confirm="onConfirm($event, 2)"
+        @cancel="showEndPicker = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      formData: {
+        number: '',
+        starTime: '',
+        endTime: ''
+      },
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+      currentDate: new Date(2021, 0, 17),
+      showStartPicker: false,
+      showEndPicker: false,
+      date: ''
+    }
+  },
+  methods: {
+    formatter (time) {
+      const year = time.getFullYear()
+      const month = time.getMonth() + 1
+      const day = time.getDate()
+      return year + '年' + month + '月' + day + '日'
+    },
+    searchNum () {
+      console.log(this.formData)
+    },
+    onConfirm ($event, type) {
+      if (type === 1) {
+        this.formData.starTime = this.formatter($event)
+      } else {
+        this.formData.endTime = this.formatter($event)
+      }
+      this.showStartPicker = false
+      this.showEndPicker = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-detail {
+  .report-card-list {
+    padding: 3.2vw;
+  }
+  .line {
+    height: 3.2vw;
+    background: #EDEDED;
+  }
+  ::v-deep .van-form {
+    padding-bottom: 6.4vw;
+    background: #fff;
+  }
+}
+.report-card {
+  padding: 7vw 3.2vw 3vw 3.2vw;
+  display: grid;
+  height: 24.5vw;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  background: #fff;
+  .card-item {
+    font-size: 3.7vw;
+    color: #999999;
+    span {
+      color: #333333;
+    }
+  }
+}
+.chang-time {
+  display: flex;
+  align-items: center;
+}
+::v-deep .van-field__control {
+  height: 12vw;
+  border: 1px solid #b2b2b2;
+  border-radius: 1.1vw;
+  font-size: 3.7vw;
+  color: #b2b2b2;
+  padding-left: 3.2vw;
+}
+.search-btn {
+  background: #fff;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  ::v-deep .van-button {
+    width: 56vw;
+    height: 12vw;
+  }
+}
+</style>

src/views/order-sales/index.vue

@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <div style="position:sticky;top: 0;z-index: 999;">
+      <nav-bar title="订单销售佣金" @click-left="$router.back()"/>
+      <van-tabs v-model="activeName">
+        <van-tab v-for="item in tabList" :key="item.id" :title="item.title" :name="item.name"/>
+      </van-tabs>
+      <div class="tabsList">
+        <van-button class="tab-btn" :class="activeTypeName == item.name ? 'active' : ''" v-for="item in tabTypeList" :key="item.id" @click="handlerTabs(item)">{{ item.title }}</van-button>
+      </div>
+      <div class="allSub" v-if="activeTypeName == '1'">
+        <div class="order-sum" v-for="item,index in allSub" :key="index">
+          <div>{{ item.title }}</div>
+          <div>{{ item.sum }}</div>
+        </div>
+      </div>
+      <order-report-search @search="searchType"/>
+    </div>
+    <div class="sales-list">
+      <div class="report-card" v-for="i in 10" :key="i" @click="$ApiRouter('/order-sales-detail')">
+        <div class="card-item">
+          <div>成员姓名：<span>李琪琪123</span></div>
+        </div>
+        <div class="card-item">
+          <div>手机号：<span>15889586623</span></div>
+        </div>
+        <div class="card-item">
+          <div>订单数量：<span>23</span></div>
+        </div>
+        <div class="card-item">
+          <div>佣金：<span>1588</span></div>
+        </div>
+        <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      activeName: '1',
+      activeTypeName: '1',
+      tabList: [
+        {
+          id: 1,
+          title: '线上支付订单',
+          name: '1'
+        },
+        {
+          id: 2,
+          title: '线下支付订单',
+          name: '2'
+        }
+      ],
+      tabTypeList: [
+        {
+          id: 1,
+          title: '待结算',
+          name: '1'
+        },
+        {
+          id: 2,
+          title: '待确认',
+          name: '2'
+        },
+        {
+          id: 3,
+          title: '已结算',
+          name: '3'
+        }
+      ],
+      allSub: [
+        {
+          title: '订单数量',
+          sum: 60
+        },
+        {
+          title: '佣金',
+          sum: 3000
+        }
+      ]
+    }
+  },
+  methods: {
+    handlerTabs ($event) {
+      this.activeTypeName = $event.name
+    },
+    searchType ($event) {
+      console.log($event)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tabsList {
+  height: 18.1vw;
+  background: #F5F5F5;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  width: 100vw;
+  white-space: nowrap;
+  .tab-btn {
+    width: 32vw;
+    height: 9.6vw;
+    margin-right: 3.2vw;
+    border-radius: 1.1vw;
+    &.active {
+      background: #FF5B00;
+      color: #fff;
+    }
+  }
+  .tab-btn:nth-child(1) {
+    margin-left: 6.4vw;
+  }
+}
+.allSub {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background: #fff;
+  padding: 6.4vw 0;
+  .order-sum {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    div:nth-child(1) {
+      color: #666666;
+      font-size: 3.7vw;
+    }
+    div:nth-child(2) {
+      margin-top: 4vw;
+      color: #333333;
+      font-size: 5.3vw;
+      font-weight: 600;
+    }
+  }
+}
+.sales-list {
+  background: #fff;
+  padding: 8vw 3.2vw 0 3.2vw;
+  box-sizing: border-box;
+  height: calc(100vh - 78vw);
+  overflow: auto;
+  .report-card {
+    padding: 3vw 0;
+    display: grid;
+    height: 22.5vw;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    align-items: center;
+    border-bottom: 1px solid #E1E1E1;
+    box-sizing: border-box;
+    position: relative;
+    i {
+      position: absolute;
+      right: 0;
+    }
+    .card-item {
+      font-size: 3.7vw;
+      color: #999999;
+      span {
+        color: #333333;
+      }
+    }
+  }
+}
+</style>