Z: Dot: new commission layout.

ybf_wx/src/views/profit/index.vue

 <template>
   <div class="container">
-    <div class="top">
-      <div class="left">
-        <img src="../../../public/img/money.png" alt="" />
-        <p>佣金收益</p>
-        <div class="money">21321.00</div>
-        <div class="detail">查看明细</div>
+    <div class="titleBars">
+
+        <img class="titleBar-icon" :src="menuBarInfo.icon.now['3']" />
+
+      <div class="titleBar-title">
+      收益
       </div>
-      <div class="right">
-        <img src="../../../public/img/task.png" alt="" />
-        <p>任务达成</p>
-        <div class="money">5/10</div>
-        <div class="detail">查看明细</div>
+    </div>
+    <div class="top">
+      <div class="">
+        佣金总收益
       </div>
     </div>
     <div class="list">
@@ -352,7 +351,8 @@ export default {
   justify-content: flex-start;
 }
 .top {
-  height: 160px;
+  /* border: 1px solid blue; */
+  height: 120px;
   background: #fff;
   box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
   padding: 24px;
@@ -407,4 +407,30 @@ export default {
 .menuBar-title-ac {
   color: rgba(67, 119, 188, 1);
 }
+
+.titleBars{
+  height: 32px;
+  width: 100%;
+  /* border: 2px solid red; */
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
+  margin-bottom: 4px;
+}
+.titleBar-icon {
+  height: 28px;
+  width: 28px;
+  /* border: 2px solid orange; */
+}
+.titleBar-title{
+  height: 100%;
+  width: auto;
+  /* border: 2px solid green; */
+  font-size: 18px;
+  line-height: 32px;
+  text-align: center;
+}
 </style>

ybf_wx/src/views/profit/index_bk_20200111105900.vue

+<template>
+  <div class="container">
+    <div class="top">
+      <div class="left">
+        <img src="../../../public/img/money.png" alt="" />
+        <p>佣金收益</p>
+        <div class="money">21321.00</div>
+        <div class="detail">查看明细</div>
+      </div>
+      <div class="right">
+        <img src="../../../public/img/task.png" alt="" />
+        <p>任务达成</p>
+        <div class="money">5/10</div>
+        <div class="detail">查看明细</div>
+      </div>
+    </div>
+    <div class="list">
+      <!-- 搜索框 -->
+      <van-search
+        v-model="inputValue"
+        :placeholder="time"
+        shape="round"
+        @search="onSearch"
+        right-icon="notes-o"
+        left-icon="none"
+        @click="timeShow = true"
+        readonly
+      >
+      </van-search>
+      <van-popup v-model="timeShow" position="bottom" :overlay="true">
+        <van-datetime-picker
+          v-model="oldTime"
+          type="date"
+          @cancel="timeShow = false"
+          @confirm="handleOldTime"
+          @change="timeChange"
+        />
+      </van-popup>
+      <!-- 任务列表 -->
+      <van-tabs
+        type="card"
+        @click="onClick"
+        title-active-color="#fff"
+        title-inactive-color="#2D476A"
+        class="tab"
+        background="#F8F8F8"
+      >
+        <van-tab title="优惠券核销" @click="getList">
+          <van-list v-model="writeOff" :finished="finished" @load="onLoad">
+            <van-cell
+              :value="item.action"
+              class="content"
+              v-for="(item, index) in writeOffList"
+              :key="index"
+            >
+              <template slot="title">
+                <img src="../../../public/img/photo.png" alt="" />
+                <span class="custom-title">{{ item.name }}</span>
+              </template>
+            </van-cell>
+          </van-list>
+        </van-tab>
+        <van-tab title="商品购买" @click="getGoodsList">
+          <van-list v-model="writeOff" :finished="finished" @load="onLoad">
+            <van-cell
+              :value="item.action"
+              class="content"
+              v-for="(item, index) in ShoppingList"
+              :key="index"
+            >
+              <template slot="title">
+                <img src="../../../public/img/photo.png" alt="" />
+                <span class="custom-title">{{ item.name }}</span>
+              </template>
+            </van-cell>
+          </van-list>
+        </van-tab>
+        <van-tab title="拉新会员" @click="getNewMemberList">
+          <van-list v-model="writeOff" :finished="finished" @load="onLoad">
+            <van-cell
+              :value="item.action"
+              class="content"
+              v-for="(item, index) in newMemberList"
+              :key="index"
+            >
+              <template slot="title">
+                <img src="../../../public/img/photo.png" alt="" />
+                <span class="custom-title">{{ item.name }}</span>
+              </template>
+            </van-cell>
+          </van-list>
+        </van-tab>
+      </van-tabs>
+    </div>
+    <div class="main-menuBar">
+      <div class="menuBar-menu" @click="menuBarClick('MainSale')">
+        <img class="menuBar-icon" :src="menuBarInfo.icon.now['1']" />
+        <div class="menuBar-title">活动</div>
+      </div>
+      <div class="menuBar-menu" @click="menuCase()">
+        <img class="menuBar-icon" :src="menuBarInfo.icon.now['2']" />
+        <div class="menuBar-title">案例</div>
+      </div>
+      <div class="menuBar-menu" @click="menuProfit()">
+        <img class="menuBar-icon" :src="menuBarInfo.icon.now['3']" />
+        <div class="menuBar-title  menuBar-title-ac">收益</div>
+      </div>
+      <div class="menuBar-menu" @click="menuTask()">
+        <img class="menuBar-icon" :src="menuBarInfo.icon.now['4']" />
+        <div class="menuBar-title">任务</div>
+      </div>
+      <div class="menuBar-menu" @click="menuBarClick('Me')">
+        <img class="menuBar-icon" :src="menuBarInfo.icon.now['5']" />
+        <div class="menuBar-title">我的</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getProfitList,getGoodsList,getNewMemberList } from '@/api/test/active'
+export default {
+  data() {
+    return {
+      time: new Date(),
+      inputValue: "",
+      timeShow: false,
+      oldTime: new Date(),
+      writeOff: false,
+      finished: false,
+      writeOffList: [
+        {
+          action: "现金券核销",
+          src: "",
+          name: "Solomon"
+        }
+      ],
+      ShoppingList: [
+        {
+          action: "商品购买",
+          src: "",
+          name: "Solomon"
+        }
+      ],
+      newMemberList: [
+        {
+          action: "拉新会员",
+          src: "",
+          name: "Solomon"
+        }
+      ],
+      // 图标
+      menuBarInfo: {
+        list: {
+          main: [
+            {
+              name: "",
+              iconUaUrl: "",
+              iconAcUrl: ""
+            }
+          ]
+        },
+        icon: {
+          now: {
+            "1": "",
+            "2": "",
+            "3": "",
+            "4": "",
+            "5": ""
+          },
+          ua: {
+            "1": "/mainSale/icon-menuBar-1-ua.png",
+            "2": "/mainSale/icon-menuBar-2-ua.png",
+            "3": "/mainSale/icon-menuBar-3-ua.png",
+            "4": "/mainSale/icon-menuBar-4-ua.png",
+            "5": "/mainSale/icon-menuBar-5-ua.png"
+          },
+          ac: {
+            "1": "/mainSale/icon-menuBar-1-ac.png",
+            "2": "/mainSale/icon-menuBar-2-ac.png",
+            "3": "/mainSale/icon-menuBar-3-ac.png",
+            "4": "/mainSale/icon-menuBar-4-ac.png",
+            "5": "/mainSale/icon-menuBar-5-ac.png"
+          }
+        }
+      }
+    };
+  },
+  created() {
+    this.checkNowMenuBar();
+    this.getList()
+  },
+  methods: {
+    getList() {
+      let data = {
+
+      }
+      getProfitList(data).then(res => {
+        console.log(res,"收益列表");      
+      })
+    },
+    getGoodsList() {
+     let data = {
+
+      }
+      getGoodsList(data).then(res => {
+        console.log(res,"商品购买列表");      
+      }) 
+    },
+    getNewMemberList() {
+     let data = {
+
+      }
+      getNewMemberList(data).then(res => {
+        console.log(res,"拉新会员列表");      
+      }) 
+    },
+    onSearch() {},
+    timeFormat(time) {
+      let year = 1900 + time.getYear();
+      let month = "0" + (time.getMonth() + 1);
+      let date = "0" + time.getDate();
+      return year + "-" + month.substring(month.length-2, month.length)  + "-" + date.substring(date.length-2, date.length)
+       + " "
+    },
+    timeChange(e) {
+      let newTime = e.getValues();
+      this.inputValue = `${newTime[0]}-${newTime[1]}-${newTime[2]}`;
+    },
+    onClick(name, title) {
+      this.$toast(title);
+    },
+    onLoad() {
+      // fetchSomeThing().catch(() => {
+      this.writeOff = false;
+      // })
+    },
+    menuCase() {
+      this.$router.push({ path: "/case" });
+    },
+    menuProfit() {
+      this.$router.push({ path: "/profitList" });
+    },
+    // 导航
+    checkNowMenuBar() {
+      let inData = "3";
+      this.menuBarInfo.icon.now = this.menuBarInfo.icon.ua;
+      this.menuBarInfo.icon.now[inData] = this.menuBarInfo.icon.ac[inData];
+    },
+    menuBarClick(inData) {
+      this.$router.push(inData);
+    },
+    listTaskClick() {
+      this.$router.push("Task");
+    },
+    menuTask() {
+      this.$router.push({ path: "/taskList" });
+    },
+    handleOldTime(value) {
+      this.inputValue = this.timeFormat(value)
+      this.timeShow = false
+    }
+  },
+  mounted() {
+    this.time = this.timeFormat(this.time);   
+  }
+};
+</script>
+
+<style scoped>
+.container >>> .van-tabs__wrap,
+.van-tabs__wrap--scrollable {
+  height: 40px;
+}
+.container >>> .van-tab,
+.van-tab--active,
+.van-ellipsis {
+  line-height: 40px;
+}
+.tab {
+  box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1);
+}
+.content >>> .van-cell__value {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(45, 71, 106, 1);
+  line-height: 44px;
+}
+.custom-title {
+  margin-left: 12px;
+  font-size: 16px;
+  font-weight: bold;
+  color: rgba(45, 71, 106, 1);
+}
+.content img {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+.tab >>> .van-tabs__nav--card .van-tab {
+  border-right: none;
+}
+.tab >>> .van-tab.van-tab--active {
+  background-color: #75b2fd;
+}
+.tab >>> .van-tabs__nav--card {
+  margin: 0;
+  border: none;
+  height: 40px;
+}
+.list >>> .van-icon,
+.van-icon-notes-o {
+  color: #2d476a;
+}
+.list {
+  height: 469px;
+  background: rgba(255, 255, 255, 1);
+  margin-top: 12px;
+}
+.money {
+  width: 120px;
+  height: 32px;
+  line-height: 32px;
+  background: rgba(248, 248, 248, 1);
+  border-radius: 16px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold;
+  color: rgba(208, 2, 27, 1);
+  margin: 0 auto;
+  margin-top: 8px;
+}
+.detail {
+  font-size: 10px;
+  color: rgba(117, 178, 253, 1);
+  margin-top: 8px;
+}
+.top p {
+  color: rgba(45, 71, 106, 1);
+  font-size: 12px;
+}
+.top img {
+  width: 32px;
+  height: 32px;
+}
+.container {
+  height: auto;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.top {
+  height: 160px;
+  background: #fff;
+  box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
+  padding: 24px;
+  display: flex;
+}
+.left,
+.right {
+  flex: 1;
+  width: 100%;
+  text-align: center;
+}
+.right {
+  border-left: 1px solid #eee;
+}
+.main-menuBar {
+  /*border: 1px solid darkviolet;*/
+  box-shadow: inset 0px 1px 2px 0px rgba(221, 221, 221, 1);
+  width: 100%;
+  height: 82px;
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  background-color: #fafafa;
+  padding: 0px 14px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.menuBar-menu {
+  /*background-color: greenyellow;*/
+  width: 48px;
+  height: 47px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+}
+.menuBar-icon {
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+}
+.menuBar-title {
+  width: auto;
+  height: 12px;
+  font-size: 10px;
+  font-weight: bold;
+  color: rgba(67, 119, 188, 0.4);
+  text-align: center;
+}
+.menuBar-title-ac {
+  color: rgba(67, 119, 188, 1);
+}
+</style>