添加：运营中心 - 我的邀请（店铺）

api/agent.js

@@ -8,6 +8,10 @@ export function myAgentList(data) {
 export function inviteSupplierJoinQrCode(data) {
 	return request.get('agent/qr_code_invite',data);
 }
+// 代理中心 - 我的邀请
+export function getMyInvite(data) {
+	return request.get(`agent/my_invite`, data);
+}
 // 代理加入 - 提交申请信息
 export function submitAgentApplyInfo(data) {
 	return request.post('agent/agent_apply',data);

pages/agent/centerV2.vue

@@ -157,7 +157,7 @@ export default {
           title: '我的邀请',
           type: 'link',
           url: '/pages/agent/invite/my_invite',
-          icon: 'icon-yaoqing1',
+          icon: 'icon-wodetuandui',
         });
       }
 

pages/agent/invite/my_invite.vue

@@ -1,10 +1,39 @@
 <template>
 	<view class="main-content">
-
+    <!--顶部内容-->
-
+    <view class="top">
-    我的邀请
+      <view class="top-title">我邀请的店铺</view>
-
+      <image mode="heightFix" class="top-icon" :src="top_icon" />
-
+    </view>
+    <!--主要内容-->
+    <view class="main-box">
+      <!--选项卡-->
+      <view class="tabs">
+        <view :class="['tab',{'tab-active': merchant_type == 0}]" @click="changeTab(0)">普通商户</view>
+        <view :class="['tab',{'tab-active': merchant_type == 1}]" @click="changeTab(1)">酒道馆</view>
+        <view :class="['tab',{'tab-active': merchant_type == 2}]" @click="changeTab(2)">供应商</view>
+        <view :class="['tab',{'tab-active': merchant_type == 3}]" @click="changeTab(3)">烟酒店</view>
+      </view>
+      <!--列表信息-->
+      <view class="_list">
+        <template v-if="Object.values(list).length > 0">
+          <view class="item-box" v-for="(item,index) in list" :key="index">
+            <view class="left">
+              <view class="name">{{ item.mer_name || '' }}</view>
+              <view class="left-info">
+                <image mode="widthFix" class="mer-logo" :src="item.mer_avatar" />
+                <view class="contacts">
+                  <view class="contacts-line">负责人：{{ item.real_name || '' }}</view>
+                  <view class="contacts-line">电话：{{ item.mer_phone || '' }}</view>
+                </view>
+              </view>
+            </view>
+            <!--<text class="right-icon iconfont icon-xiangyou"></text>-->
+          </view>
+        </template>
+        <emptyPage v-else title="暂无邀请店铺～"></emptyPage>
+      </view>
+    </view>
     <!-- 授权登录 -->
     <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
 	</view>
@@ -13,26 +42,36 @@
 <script>
 import {mapGetters} from "vuex";
 import authorize from '@/components/Authorize';
+import { HTTP_REQUEST_URL } from '@/config/app.js';
+import emptyPage from '@/components/emptyPage.vue'
+import {getMyInvite} from "@/api/agent";
 
 export default {
   name: 'business',
   components: {
-    authorize
+    authorize,
+    emptyPage
   },
   computed: {
     ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
   },
   data() {
     return {
+      top_icon: '',
       // 登录相关
       isAuto: false, //没有授权的不会自动授权
       isShowAuth: false,//是否隐藏授权
-
+      // 选项卡
-
+      merchant_type: 3,// 商户类别：0=普通商户，1=酒道馆，2=供应商，3=烟酒店
+      // 列表相关
+      agent_id: 0,
+      list: [],
+      page: 1,
     }
   },
   onLoad(options) {
     let _this = this;
+    _this.agent_id = options.agent_id || 0;
     // 判断：是否登录
     if (!this.isLogin) {
       // 未登录  授权登录
@@ -43,6 +82,9 @@ export default {
       this.init();
     }
   },
+  onReady() {
+    this.top_icon = `${HTTP_REQUEST_URL}/static/images/mer/my_invite_top_icon.png`;
+  },
   methods: {
     // 授权回调
     onLoadFun() {
@@ -57,15 +99,43 @@ export default {
     },
     // 授权成功 初始化
     init () {
-
+      this.getList();
-
     },
+    // 获取列表
+    getList() {
+      let _this = this;
+      let params = {
+        page: _this.page,
+        merchant_type: _this.merchant_type,
+        invite_agent_id: _this.agent_id
+      }
+      // 发起请求
+      getMyInvite(params).then(res => {
+        let list = res.data.list || {};
+        if (Object.values(list).length > 0) {
+          _this.list = _this.$util.SplitArray(list, _this.list);
+          _this.$set(_this, 'list', _this.list);
+          _this.page++;
+        }
+      }).catch(err => {
+        this.$util.Tips({title: err});
+      });
+    },
+    // 改变tab
+    changeTab(merchantType){
+      this.merchant_type = merchantType || 0;
+      this.page = 1;
+      this.list = [];
+      this.getList();
+    }
 
 
 
-
+  },
-
+  // 滚动到底部
-  }
+  onReachBottom() {
+    this.getList();
+  },
 }
 </script>
 
@@ -73,12 +143,123 @@ export default {
 .main-content{
   width: 100vw!important;
   min-height: 100vh!important;
-  background: orange;
+  background: #f6f6f6;
-
+  // 顶部内容
-
+  .top{
-
+    width: 100vw;
-
+    height: 300rpx;
-
+    position: relative;
-
+    background: #be0000;
+    .top-title{
+      position: absolute;
+      top: 60rpx;
+      left: 60rpx;
+      z-index: 10;
+      height: 150rpx!important;
+      line-height: 150rpx!important;
+      color: #ffffff;
+      font-size: 50rpx;
+      font-weight: bold;
+    }
+    .top-icon{
+      position: absolute;
+      top: 60rpx;
+      right: 60rpx;
+      z-index: 10;
+      height: 150rpx !important;
+    }
+  }
+  // 主要内容
+  .main-box{
+    width: 100vw;
+    background: #f6f6f6;
+    padding: 25rpx;
+    border-top-left-radius: 30rpx;
+    border-top-right-radius: 30rpx;
+    position: relative;
+    top: -91rpx;
+    .tabs{
+      width: 100%;
+      display: inline-flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: center;
+      border-radius: 20rpx;
+      overflow: hidden;
+      margin-bottom: 25rpx;
+      .tab{
+        color: #be0000;
+        width: calc(100% / 4);
+        height: 70rpx;
+        line-height: 70rpx;
+        text-align: center;
+        font-size: 30rpx;
+        background: #ffffff;
+      }
+      .tab-active{
+        background: #be0000;
+        color: #ffffff;
+      }
+    }
+    ._list{
+      .item-box{
+        width: 100%;
+        padding: 20rpx;
+        background: #ffffff;
+        border-radius: 20rpx;
+        margin-bottom: 25rpx;
+        display: inline-flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: space-between;
+        .left{
+          width: calc(100% - 60rpx);
+          .name{
+            font-weight: bold;
+            font-size: 30rpx;
+            width: 100%;
+            height: 50rpx;
+            line-height: 50rpx;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          .left-info{
+            display: inline-flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: flex-start;
+            margin-top: 10rpx;
+            .mer-logo{
+              height: calc(45rpx * 2) !important;
+              width: calc(45rpx * 2) !important;
+              border-radius: 10rpx!important;
+            }
+            .contacts{
+              width: calc(100% - calc(45rpx * 2));
+              padding-left: 15rpx;
+              .contacts-line{
+                height: 45rpx;
+                line-height: 45rpx;
+                font-size: 28rpx;
+                color: #949494;
+              }
+            }
+          }
+        }
+        .right-icon{
+          width: 60rpx;
+          display: inline-flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          align-items: center;
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
 }
 </style>