完成C端模块

src/pages/agent/customer/index.css

@@ -0,0 +1,37 @@
+.text-normal {
+  color: #6A6A6A;
+}
+
+.profit_container {
+  margin: 30px 0px 0px;
+}
+
+.bg_action {
+  width: 118px;
+  height: 77px;
+  background-image: url("https://img.shuimuai.com/web/frame_xuanzhongkehu.png");
+
+  font-size: 15px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #FFFFFF;
+  line-height: 24px;
+}
+
+.bg_normal {
+  font-size: 15px;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #6C6C6C;
+  line-height: 24px;
+
+  width: 118px;
+  height: 68px;
+  background-image: url("https://img.shuimuai.com/web/frame_weixianzhongkehu.png");
+}
+
+.bg {
+  text-align: center;
+  background-size: 100% 100%;
+  background-position: center;
+}

src/pages/agent/customer/index.vue

@@ -1,21 +1,184 @@
 <template>
-  <div id="agent_index_container">
+  <div id="agent_customer_container">
+    <!--    筛选模块-->
+    <div class="filter_container margin-xs flex">
+      <view class='cu-tag round padding' v-for="(filter,index) in filter_list" :key="index"
+            :class="{'bg-orange':filter_action==filter.id,'bg-white':filter_action != filter.id}"
+            @click="change_filter(filter.id)"
+      >
+        {{ filter.name }}
+      </view>
+
+      <button class="cu-btn" @click="show_datetime_picker">自定义时间
+        <text class="cuIcon-unfold"></text>
+      </button>
+    </div>
+
+
+    <!--      收益模块-->
+    <div class="profit_container">
+      <van-row>
+        <van-col span="8" v-for="(type,index) in customer_types" :key="index"
+                 @click="toggle_type(type.id)"
+        >
+          <div class="bg " :class="[type.id == customer_type_action?'bg_action':'bg_normal']">
+            <view class="padding-top-lg">
+              <text>{{ type.name }}</text>
+            </view>
+          </div>
+        </van-col>
+      </van-row>
+      <view>
+
+
+      </view>
+    </div>
+
+    <!--    小title-->
+    <div class="line_container padding">
+      <div>
+        <text class="text-sm text-gray">共{{ customer_count }}个客户</text>
+        <van-divider customStyle="border:.1px solid;margin:0px;"/>
+      </div>
+    </div>
+    <!--  列表-->
+    <view class="solid-bottom padding-lr-sm" v-for="item in customer_count" :key="item">
+      <van-card>
+        <view slot="thumb" class="cu-avatar lg round margin-left"
+              style="background-image:url(https://img.shuimuai.com/web/icon_dingdan.png);"></view>
+        <view slot="title" class="flex justify-between">
+          <view>
+            <text class="text-sm">摄影大师陈冠希</text>
+          </view>
+          <view>
+            <text class="text-normal">最后下单时间&emsp;</text>
+            <text class="text-gray text-sm">2018/09/24 10:44</text>
+          </view>
+        </view>
+
+        <view slot="num" class="flex justify-end">
+          <view>
+            <text class="text-normal text-sm margin-right-lg">成交额</text>
+            <text class="text-xxl">39.00</text>
+          </view>
+        </view>
+        <view slot="price">
+          <view>
+            <text class="text-normal text-sm">订单数 1</text>
+          </view>
+        </view>
+      </van-card>
+    </view>
+
+    <van-calendar
+      :show="calendar_show"
+      type="range"
+      @close="do_calendar_close"
+      @confirm="do_calendar_confirm"
+    ></van-calendar>
+
+
   </div>
 </template>
 
 <script>
 
-
+var $this
 export default {
-  name: "agent_index_container",
+  name: "agent_customer_container",
   components: {},
   data() {
     return {
+      //筛选列表
+      filter_list: [
+        {
+          id: 1,
+          name: "全部"
+        },
+        {
+          id: 2,
+          name: "今日"
+        },
+        {
+          id: 3,
+          name: "昨日"
+        },
+        {
+          id: 4,
+          name: "近七日"
+        }
+      ],
+      // 筛选选中项
+      filter_action: 1,
+      userinfo: {
+        //累计收益
+        profit: 16824.50,
+        //含待结算
+        unsettle_account: 65.00,
+      },
+      //客户数量
+      customer_count: 3,
+      calendar_show: false,
+      start_time: "",
+      end_time: "",
+      filter_date: "",
+      //最小日期应该为用户使用的第一个月开始
+      min_date: false,
+      //客户类型
+      customer_types: [
+        {
+          id: 1,
+          name: "全部客户"
+        },
+        {
+          id: 2,
+          name: "一级客户"
+        },
+        {
+          id: 3,
+          name: "二级客户"
+        },
+      ],
+      customer_type_action: 1
     }
   },
   methods: {
+    //修改筛选时间
+    change_filter($id) {
+      $this.filter_date = ""
+      $this.filter_action = $id
+    },
+    //  自定义筛选时间
+    show_datetime_picker() {
+      $this.filter_action = 0
+      $this.calendar_show = true
+    },
+    //  关闭日历选择
+    do_calendar_close() {
+      $this.calendar_show = false
+    },
+    formatDate(date) {
+      date = new Date(date);
+      return `${date.getMonth() + 1}/${date.getDate()}`;
+    },
+    //  选择日历后
+    do_calendar_confirm($event) {
+      let [start, end] = $event.mp.detail;
+      $this.filter_date = $this.formatDate(start) + '-' + $this.formatDate(end)
+      $this.start_time = Math.round(new Date(start).getTime() / 1000)
+      $this.end_time = Math.round(new Date(end).getTime() / 1000)
+      $this.calendar_show = false
+    },
+    //  切换客户类型筛选
+    toggle_type($id) {
+      $this.customer_type_action = $id
+    }
   },
   mounted() {
+    $this.min_date = new Date(2020, 1, 1).getTime()
+  },
+  created() {
+    $this = this
   }
 }
 </script>

src/pages/agent/customer/main.json

@@ -1,4 +1,9 @@
 {
   "usingComponents": {
+    "van-divider": "../../../static/vant/divider/index",
+    "van-card": "../../../static/vant/card/index",
+    "van-calendar": "../../../static/vant/calendar/index",
+    "van-row": "../../../static/vant/row/index",
+    "van-col": "../../../static/vant/col/index"
   }
 }

src/pages/agent/extend/detail/index.css

@@ -0,0 +1,7 @@
+page{
+  background-color: #fff;
+}
+.not_show{
+  opacity: 0;
+}
+

src/pages/agent/extend/detail/index.vue

@@ -1,5 +1,23 @@
 <template>
-  <div id="agent_index_container">
+  <div id="agent_order_detail_container">
+    <van-cell title="订单编号" value="E20200928143900200001" :border="false"></van-cell>
+    <van-cell title="消费产品" value="次卡" :border="false"></van-cell>
+    <van-cell title="下单时间" value="2020.9.27  10:31:35" :border='false'></van-cell>
+    <van-cell title="买家" value="摄影大师陈冠希" :border="false"></van-cell>
+    <van-cell title="卖家等级" value="一级消费" :border="false"></van-cell>
+
+    <van-row class="">
+      <van-col span="10">
+        <van-cell title="佣金收益" value="￥15.00" :border="false" custom-class="not_show"></van-cell>
+        <van-cell title="结算状态" value="未结算" :border="false"></van-cell>
+      </van-col>
+      <van-col span="10" offset="4">
+        <van-cell title="佣金收益" value="￥15.00" :border="false"></van-cell>
+        <van-cell title="订单总价" value="￥39.00" :border="false"></van-cell>
+      </van-col>
+    </van-row>
+
+
   </div>
 </template>
 
@@ -7,14 +25,12 @@
 
 
 export default {
-  name: "agent_index_container",
+  name: "agent_order_detail_container",
   components: {},
   data() {
-    return {
-    }
-  },
-  methods: {
+    return {}
   },
+  methods: {},
   mounted() {
   }
 }

src/pages/agent/extend/detail/main.json

@@ -1,4 +1,7 @@
 {
   "usingComponents": {
+    "van-cell": "../../../../static/vant/cell/index",
+    "van-row": "../../../../static/vant/row/index",
+    "van-col": "../../../../static/vant/col/index"
   }
 }

src/pages/agent/extend/orders/index.css

@@ -0,0 +1,6 @@
+.text-normal{
+  color: #6A6A6A;
+}
+.profit_container{
+  margin: 30px 0px;
+}

src/pages/agent/extend/orders/index.vue

@@ -1,21 +1,165 @@
 <template>
-  <div id="agent_index_container">
+  <div id="agent_income_container">
+    <!--    筛选模块-->
+    <div class="filter_container margin-xs flex">
+      <view class='cu-tag round padding' v-for="(filter,index) in filter_list" :key="index"
+            :class="{'bg-orange':filter_action==filter.id,'bg-white':filter_action != filter.id}"
+            @click="change_filter(filter.id)"
+      >
+        {{ filter.name }}
+      </view>
+
+      <button class="cu-btn" @click="show_datetime_picker">自定义时间
+        <text class="cuIcon-unfold"></text>
+      </button>
+    </div>
+
+
+    <!--      全部累计订单模块-->
+    <div class="profit_container text-center">
+      <view>
+        <text class="text-normal margin-xl">
+          <template v-if="filter_date">{{ filter_date }}</template>
+          <template v-else>{{ filter_list[filter_action - 1].name }}</template>
+          累计订单
+        </text>
+      </view>
+      <view>
+        <text class="text-bold text-sl text-price">{{ userinfo.order_counts }}</text>
+      </view>
+    </div>
+
+    <!--    小title-->
+    <div class="line_container padding">
+      <div>
+        <text class="text-sm text-gray">订单记录</text>
+        <van-divider customStyle="border:.1px solid;margin:0px;"/>
+      </div>
+    </div>
+    <!--  列表-->
+    <view class="solid-bottom padding-lr-sm" v-for="item in 3" :key="item">
+      <van-card>
+        <view slot="thumb" class="cu-avatar lg round margin-left"
+              style="background-image:url(https://img.shuimuai.com/web/icon_dingdan.png);"></view>
+        <view slot="title" class="flex justify-between">
+          <view>
+            <text class="text-normal">消费产品 &emsp;</text>
+            <text>黄金会员卡</text>
+          </view>
+          <view>
+            <text class="text-normal text-sm under_line" @click="to_detail(item)">订单详情</text>
+          </view>
+        </view>
+
+        <view slot="num" class="flex justify-between align-end">
+          <view>
+            <view>
+              <text class="text-sm text-normal">买家&emsp;</text>
+              <text class="text-sm text-normal">Only is lonly</text>
+            </view>
+            <text class="text-gray text-sm">2018/09/24 10:44</text>
+          </view>
+          <view>
+            <text class="text-normal text-sm margin-right">订单总价</text>
+            <text class="text-xxl">39.00</text>
+          </view>
+
+
+        </view>
+      </van-card>
+    </view>
+
+    <van-calendar
+      :show="calendar_show"
+      type="range"
+      @close="do_calendar_close"
+      @confirm="do_calendar_confirm"
+    ></van-calendar>
+
+
   </div>
 </template>
 
 <script>
 
-
+var $this
 export default {
-  name: "agent_index_container",
+  name: "agent_income_container",
   components: {},
   data() {
     return {
+      filter_list: [
+        {
+          id: 1,
+          name: "全部"
+        },
+        {
+          id: 2,
+          name: "今日"
+        },
+        {
+          id: 3,
+          name: "昨日"
+        },
+        {
+          id: 4,
+          name: "近七日"
+        }
+      ],
+      filter_action: 1,
+      userinfo: {
+        //累计收益
+        order_counts: 14,
+        //含待结算
+        unsettle_account: 65.00,
+      },
+      calendar_show: false,
+      start_time: "",
+      end_time: "",
+      filter_date: "",
+      //最小日期应该为用户使用的第一个月开始
+      min_date: false,
     }
   },
   methods: {
+    //修改筛选时间
+    change_filter($id) {
+      $this.filter_date = ""
+      $this.filter_action = $id
+    },
+    //  自定义筛选时间
+    show_datetime_picker() {
+      $this.filter_action = 0
+      $this.calendar_show = true
+    },
+    //  关闭日历选择
+    do_calendar_close() {
+      $this.calendar_show = false
+    },
+    formatDate(date) {
+      date = new Date(date);
+      return `${date.getMonth() + 1}/${date.getDate()}`;
+    },
+    //  选择日历后
+    do_calendar_confirm($event) {
+      let [start, end] = $event.mp.detail;
+      $this.filter_date = $this.formatDate(start) + '-' + $this.formatDate(end)
+      $this.start_time = Math.round(new Date(start).getTime() / 1000)
+      $this.end_time = Math.round(new Date(end).getTime() / 1000)
+      $this.calendar_show = false
+    },
+    //  跳转订单详情
+    to_detail($index) {
+      mpvue.navigateTo({
+        url:"/pages/agent/extend/detail/main"
+      })
+    }
   },
   mounted() {
+    $this.min_date = new Date(2020, 1, 1).getTime()
+  },
+  created() {
+    $this = this
   }
 }
 </script>

src/pages/agent/extend/orders/main.json

@@ -1,4 +1,7 @@
 {
   "usingComponents": {
+    "van-divider": "../../../../static/vant/divider/index",
+    "van-card": "../../../../static/vant/card/index",
+    "van-calendar": "../../../../static/vant/calendar/index"
   }
 }

src/pages/agent/income_cal/index.css

@@ -0,0 +1,6 @@
+.text-normal{
+  color: #6A6A6A;
+}
+.profit_container{
+  margin: 30px 0px;
+}

src/pages/agent/income_cal/index.vue

@@ -1,21 +1,152 @@
 <template>
-  <div id="agent_index_container">
+  <div id="agent_income_container">
+    <!--    筛选模块-->
+    <div class="filter_container margin-xs flex">
+      <view class='cu-tag round padding' v-for="(filter,index) in filter_list" :key="index"
+            :class="{'bg-orange':filter_action==filter.id,'bg-white':filter_action != filter.id}"
+            @click="change_filter(filter.id)"
+      >
+        {{ filter.name }}
+      </view>
+
+      <button class="cu-btn" @click="show_datetime_picker">自定义时间
+        <text class="cuIcon-unfold"></text>
+      </button>
+    </div>
+
+
+    <!--      收益模块-->
+    <div class="profit_container text-center">
+      <view>
+        <text class="text-normal margin-xl"><template v-if="filter_date">{{filter_date}}</template><template v-else>{{ filter_list[filter_action - 1].name }}</template>累计收益</text>
+      </view>
+      <view>
+        <text class="text-bold text-sl text-price">{{ userinfo.profit }}</text>
+      </view>
+      <view>
+        <text class="text-normal ">含待结算
+          <text class="text-price">{{ userinfo.unsettle_account }}</text>
+          元
+        </text>
+      </view>
+    </div>
+
+    <!--    小title-->
+    <div class="line_container padding">
+      <div>
+        <text class="text-sm text-gray">收益记录</text>
+        <van-divider customStyle="border:.1px solid;margin:0px;"/>
+      </div>
+    </div>
+    <!--  列表-->
+    <view class="solid-bottom padding-lr-sm" v-for="item in 3" :key="item">
+      <van-card>
+        <view slot="thumb" class="cu-avatar lg round margin-left"
+              style="background-image:url(https://img.shuimuai.com/web/icon_dingdan.png);"></view>
+        <view slot="title" class="flex justify-between">
+          <view>
+            <text class="text-normal">产品&emsp;</text>
+            <text>次卡</text>
+          </view>
+          <view>
+            <text class="text-gray text-sm">2018/09/24 10:44</text>
+          </view>
+        </view>
+
+        <view slot="num" class="flex justify-end">
+          <view>
+            <text class="text-normal text-sm margin-right-lg">收益</text>
+            <text class="text-xxl">+39.00</text>
+          </view>
+        </view>
+      </van-card>
+    </view>
+
+    <van-calendar
+      :show="calendar_show"
+      type="range"
+      @close="do_calendar_close"
+      @confirm="do_calendar_confirm"
+    ></van-calendar>
+
+
   </div>
 </template>
 
 <script>
 
-
+var $this
 export default {
-  name: "agent_index_container",
+  name: "agent_income_container",
   components: {},
   data() {
     return {
+      filter_list: [
+        {
+          id: 1,
+          name: "全部"
+        },
+        {
+          id: 2,
+          name: "今日"
+        },
+        {
+          id: 3,
+          name: "昨日"
+        },
+        {
+          id: 4,
+          name: "近七日"
+        }
+      ],
+      filter_action: 1,
+      userinfo: {
+        //累计收益
+        profit: 16824.50,
+        //含待结算
+        unsettle_account: 65.00,
+      },
+      calendar_show: false,
+      start_time: "",
+      end_time: "",
+      filter_date: "",
+      //最小日期应该为用户使用的第一个月开始
+      min_date:false,
     }
   },
   methods: {
+    //修改筛选时间
+    change_filter($id) {
+      $this.filter_date = ""
+      $this.filter_action = $id
+    },
+    //  自定义筛选时间
+    show_datetime_picker() {
+      $this.filter_action = 0
+      $this.calendar_show = true
+    },
+    //  关闭日历选择
+    do_calendar_close() {
+      $this.calendar_show = false
+    },
+    formatDate(date) {
+      date = new Date(date);
+      return `${date.getMonth() + 1}/${date.getDate()}`;
+    },
+    //  选择日历后
+    do_calendar_confirm($event) {
+      let [start, end] = $event.mp.detail;
+      $this.filter_date = $this.formatDate(start) + '-' + $this.formatDate(end)
+      $this.start_time = Math.round(new Date(start).getTime() / 1000)
+      $this.end_time = Math.round(new Date(end).getTime() / 1000)
+      $this.calendar_show = false
+    }
   },
   mounted() {
+    $this.min_date = new Date(2020,1,1).getTime()
+  },
+  created() {
+    $this = this
   }
 }
 </script>

src/pages/agent/income_cal/main.json

@@ -1,4 +1,7 @@
 {
   "usingComponents": {
+    "van-divider": "../../../static/vant/divider/index",
+    "van-card": "../../../static/vant/card/index",
+    "van-calendar": "../../../static/vant/calendar/index"
   }
 }

src/pages/agent/index/index.css

@@ -0,0 +1,27 @@
+.header {
+  background-image: url("https://img.shuimuai.com/web/bg_dailishang.png");
+  background-position: center;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 235px;
+}
+
+.text-normal {
+  color: #97B2DE;
+}
+
+.profit_detail_contaienr {
+}
+
+
+.withdraw_container {
+  background-image: url("https://img.shuimuai.com/web/frame_dailishang_tixian.png");
+  background-position: center;
+  background-size: 100% 100%;
+    width: 353px;
+    height: 65px;
+    margin: 10px auto;
+}
+.withdraw_money{
+  font-size: 24px;
+}

src/pages/agent/index/index.vue

@@ -1,5 +1,102 @@
 <template>
   <div id="agent_index_container">
+    <div class="header">
+
+      <!--      用户信息模块-->
+      <van-row>
+
+        <div class="userinfo padding-tb-sm">
+          <van-col span="3" offset="2">
+            <view class="cu-avatar lg"
+                  :style="'background-image:url('+userinfo.avatar+');'"></view>
+          </van-col>
+
+          <van-col span="6" offset="1">
+            <view class="label">
+              <view class="text-bold">
+                <text class="text-white text-lg">{{ userinfo.nickname }}</text>
+              </view>
+              <view class="padding-tb-sm">
+                <text class="text-white text-sm">{{ userinfo.agent_name }}</text>
+              </view>
+            </view>
+          </van-col>
+
+
+        </div>
+      </van-row>
+
+      <!--      收益模块-->
+      <div class="profit_container text-center">
+        <view>
+          <text class="text-normal padding">累计收益(元)</text>
+        </view>
+        <view>
+          <text class="text-white text-bold text-sl text-price">{{ userinfo.profit }}</text>
+        </view>
+        <view>
+          <text class="text-normal ">含待结算
+            <text class="text-price">{{ userinfo.unsettle_account }}</text>
+            元
+          </text>
+        </view>
+      </div>
+
+
+      <!--      订单、客户、邀请卡粗图-->
+      <div class="profit_detail_contaienr text-center padding-top-lg">
+        <van-row gutter="40">
+          <van-col span="6" offset="3" @click="to_extend_order">
+            <view>
+              <text class="text-xxl text-white">{{ userinfo.orders_count }}</text>
+            </view>
+            <view>
+              <text class="text-normal text-sm">累计订单</text>
+            </view>
+          </van-col>
+          <van-col span="6" @click="to_customer">
+            <view>
+              <text class="text-xxl text-white">{{ userinfo.customer_count }}</text>
+            </view>
+            <view>
+              <text class="text-normal text-sm">累计客户</text>
+            </view>
+          </van-col>
+          <van-col span="6" @click="to_agent_invite_card">
+            <view>
+              <text class="text-xxl text-white">{{ userinfo.invite_card_count }}</text>
+            </view>
+            <view>
+              <text class="text-normal text-sm">邀请卡库存</text>
+            </view>
+
+          </van-col>
+        </van-row>
+      </div>
+          </div>
+
+
+      <!--      提现金额-->
+      <div class="withdraw_container flex justify-between align-center padding-lr" @click="to_agent_cal_center">
+        <text class="text-white">可提现金额(元)</text>
+        <text class="text-white withdraw_money">{{ userinfo.withdraw_money }}.00</text>
+      </div>
+
+      <!--      菜单列表-->
+      <div class="menu">
+        <van-cell title="今日收益(元)" value="0.98" is-link url="/pages/agent/income_cal/main">
+          <van-icon name="balance-o" slot="icon" color="#4B3AB0" class="margin-lr-sm" size="20px"></van-icon>
+        </van-cell>
+
+        <van-cell title="今日订单" value="1" is-link>
+          <van-icon name="notes-o" slot="icon" color="#4B3AB0" class="margin-lr-sm" size="20px"></van-icon>
+        </van-cell>
+
+        <van-cell title="今日新增客户" value="0.5" is-link>
+          <van-icon name="contact" slot="icon" color="#4B3AB0" class="margin-lr-sm" size="20px"></van-icon>
+        </van-cell>
+
+      </div>
   </div>
 </template>
 
@@ -8,12 +105,57 @@
 
 export default {
   name: "agent_index_container",
+  filter: {},
   components: {},
   data() {
     return {
+      userinfo: {
+        //头像
+        avatar: "https://img.shuimuai.com/weixintouxiang.png",
+        //昵称
+        nickname: "小疯兔屁屁",
+        //代理商名称
+        agent_name: "区域代理商",
+        //累计收益
+        profit: 16824.50,
+        //含待结算
+        unsettle_account: 65.00,
+        //  累计订单数量
+        orders_count: 720,
+        //  累计客户数量
+        customer_count: 6,
+        //  邀请卡库存
+        invite_card_count: 2,
+        //  提现金额
+        withdraw_money: 328215.00
+      },
     }
   },
   methods: {
+    //  跳转推广订单
+    to_extend_order() {
+      mpvue.navigateTo({
+        url: "/pages/agent/extend/orders/main"
+      })
+    },
+    //  跳转推广客户
+    to_customer() {
+      mpvue.navigateTo({
+        url: "/pages/agent/customer/main"
+      })
+    },
+    //  跳转代理商结算中心
+    to_agent_cal_center() {
+      mpvue.navigateTo({
+        url: "/pages/agent/settlement_center/index/main"
+      })
+    },
+    //  邀请卡库存
+    to_agent_invite_card() {
+      mpvue.navigateTo({
+        url: "/pages/agent/invite_card_inventory/main"
+      })
+    }
   },
   mounted() {
   }

src/pages/agent/index/main.json

@@ -1,4 +1,8 @@
 {
   "usingComponents": {
+    "van-row": "../../../static/vant/row/index",
+    "van-col": "../../../static/vant/col/index",
+    "van-cell": "../../../static/vant/cell/index",
+    "van-icon": "../../../static/vant/icon/index"
   }
 }

src/pages/agent/invite_card_inventory/index.css

@@ -0,0 +1,17 @@
+.list-item {
+  margin: 10px 0px;
+}
+
+.process_text {
+  font-size: 36px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #FF9C00;
+  line-height: 24px;
+}
+.color-primary{
+  color: #FF9C00;
+}
+.slot_text{
+  font-size: 9px;
+}

src/pages/agent/invite_card_inventory/index.vue

@@ -1,21 +1,114 @@
 <template>
-  <div id="agent_index_container">
+  <div id="agent_invite_card_inventory_container">
+
+    <div class="header flex justify-around text-center align-end margin-tb-xl">
+      <view>
+        <view>
+          <text class="text-xxl text-bold">269</text>
+        </view>
+        <view>
+          <text class="text-sm text-gray slot_text">总卡数</text>
+        </view>
+      </view>
+
+      <!--      进度条-->
+      <van-circle
+        :value="percent"
+        stroke-width="15"
+        color="#FFB400"
+        layer-color="#CDCDCD"
+        :clockwise="false"
+        :size="150"
+      >
+        <view>
+          <text class="process_text">{{ total_count }}</text>
+        </view>
+        <view class="flex justify-center">
+          <text class="cuIcon-title color-primary"></text>
+          <text class="text-sm text-gray slot_text">库存卡数</text>
+        </view>
+      </van-circle>
+
+
+      <view>
+        <view>
+          <text class="text-xxl text-bold">269</text>
+        </view>
+        <view class="flex">
+          <text class="cuIcon-title text-gray"></text>
+          <text class="text-sm text-gray slot_text">已邀卡数</text>
+        </view>
+      </view>
+    </div>
+
+
+    <!--    小title-->
+    <div class="line_container padding">
+      <div>
+        <text class="text-sm text-gray">订单记录</text>
+        <van-divider customStyle="border:.1px solid;margin:0px;"/>
+      </div>
+    </div>
+    <!--  列表-->
+    <view class="solid-bottom padding-lr-sm list-item" v-for="item in customer_count" :key="item">
+      <van-card>
+        <view slot="thumb" class="cu-avatar lg round margin-left"
+              style="background-image:url(https://img.shuimuai.com/web/icon_dingdan.png);"></view>
+        <view slot="title" class="flex justify-between">
+          <view>
+            <text class="text-sm">摄影大师陈冠希</text>
+          </view>
+          <view>
+            <text class="text-gray text-sm">2018/09/24 10:44</text>
+          </view>
+        </view>
+
+        <view slot="num">
+          <view>
+            <text class="text-gray text-sm margin-right-lg">卡号</text>
+            <text class="text-sm text-gray">ED12344829519982</text>
+          </view>
+        </view>
+      </van-card>
+    </view>
+
+    <van-calendar
+      :show="calendar_show"
+      type="range"
+      @close="do_calendar_close"
+      @confirm="do_calendar_confirm"
+    ></van-calendar>
+
+
   </div>
 </template>
 
 <script>
 
-
+var $this
 export default {
-  name: "agent_index_container",
+  name: "agent_invite_card_inventory_container",
   components: {},
   data() {
     return {
+      userinfo: {
+        //累计收益
+        profit: 16824.50,
+        //含待结算
+        unsettle_account: 65.00,
+      },
+      total_count:269,
+      percent:0,
+      //客户数量
+      customer_count: 3,
     }
   },
-  methods: {
-  },
+  methods: {},
   mounted() {
+    $this.percent = ($this.total_count / 500 ).toFixed(2) * 100
+  },
+  created() {
+    $this = this
   }
 }
 </script>

src/pages/agent/invite_card_inventory/main.json

@@ -1,4 +1,7 @@
 {
   "usingComponents": {
+      "van-circle": "../../../static/vant/circle/index",
+    "van-divider": "../../../static/vant/divider/index",
+    "van-card": "../../../static/vant/card/index"
   }
 }

src/pages/agent/settlement_center/index/index.css

@@ -0,0 +1,24 @@
+.header {
+  background-image: url("https://img.shuimuai.com/web/bg_dailishang.png");
+  background-position: center;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 235px;
+}
+
+.main_icon {
+  width: 121px;
+  height: 126px;
+  margin: 10px auto;
+}
+
+.text-primary {
+  color: #4B3AB0;
+}
+
+.bottom_text {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  bottom: 50px;
+}

src/pages/agent/settlement_center/index/index.vue

@@ -1,5 +1,51 @@
 <template>
-  <div id="agent_index_container">
+  <div id="agent_settlement_center_index_container">
+
+    <!--    头部-->
+    <div class="header text-center">
+      <img src="https://img.shuimuai.com/web/happy_shuimu.png" class="main_icon" alt="">
+      <view>
+        <text class="text-white text-sm">可提现金额(元)</text>
+      </view>
+      <view>
+        <text class="text-white text-bold text-sl">{{ total_price }}.00</text>
+      </view>
+    </div>
+
+    <view class="cu-bar">
+      <view class="action">
+        <text class="text-sm ">提现到微信钱包</text>
+      </view>
+    </view>
+    <!--    提现金额输入框-->
+    <van-field
+      :value='price'
+      placeholder="输入提现金额"
+      :custom-style='custom_style'
+      center
+      clearable
+    >
+      <text class="text-xxl" slot="label">&yen;</text>
+      <view slot="button" @click="price=total_price">
+        <text class="under_line text-sm text-orange">全部提现</text>
+      </view>
+    </van-field>
+
+    <view class="cu-bar">
+      <view class="action">
+        <text class="text-xs text-gray">提现单笔手续费1%，预计1个工作日内到账</text>
+      </view>
+    </view>
+
+    <!--    提现按钮-->
+    <div class="padding-lr margin-top-xl">
+      <van-button type="primary" size="large" color="#FFB400" @click="do_submit">立即提现</van-button>
+    </div>
+
+    <!--    提现规则-->
+    <view class="bottom_text">
+      <text class="text-gray under_line text-sm" @click="to_rule">提现规则</text>
+    </view>
   </div>
 </template>
 
@@ -7,13 +53,30 @@
 
 
 export default {
-  name: "agent_index_container",
+  name: "agent_settlement_center_index_container",
   components: {},
   data() {
     return {
+      price: "",
+      total_price: 15,
+      custom_style: `width: 330px;
+            height: 49px;
+            background: #F2F3FF;
+            box-shadow: 0px 3px 7px 0px rgba(159, 159, 159, 0.84);
+            border-radius: 10px;
+            margin: 20px auto 0px;
+      `,
     }
   },
   methods: {
+    //  跳转规则
+    to_rule() {
+
+    },
+    //  提交提现的功能
+    do_submit() {
+
+    }
   },
   mounted() {
   }

src/pages/agent/settlement_center/index/main.json

@@ -1,4 +1,8 @@
 {
   "usingComponents": {
+    "van-cell": "../../../../static/vant/cell/index",
+    "van-field": "../../../../static/vant/field/index",
+    "van-icon": "../../../../static/vant/icon/index",
+    "van-button": "../../../../static/vant/button/index"
   }
 }

src/pages/index/index.vue

@@ -53,7 +53,7 @@ export default {
     return {
       // 三种状态 扫码scan 注册regist 登录login
       status: "regist",
-      is_login: true
+      is_login: false
     }
   },
   methods: {