From 5610e9dd6e7513fc2891093065424a18a0772673 Mon Sep 17 00:00:00 2001
From: wuhui_zzw <1760308791@qq.com>
Date: Thu, 25 Jan 2024 19:11:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=EF=BC=9A=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=90=8E=E5=8F=B0=20-=20=E4=BB=A3=E7=90=86=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=20-=20=E4=BB=A3=E7=90=86=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/marketing.js                          |  30 +
 src/libs/notice.js                            |   2 +-
 src/router/modules/marketing.js               |  23 +-
 src/views/marketing/agent/agent/index.vue     | 280 ++++++
 .../marketing/agent/agent/template/area.vue   |  71 ++
 .../marketing/agent/agent/template/edit.vue   | 924 ++++++++++++++++++
 .../marketing/agent/agent/template/mer.vue    | 100 ++
 src/views/marketing/agent/index.vue           |   3 +
 8 files changed, 1430 insertions(+), 3 deletions(-)
 create mode 100644 src/views/marketing/agent/agent/index.vue
 create mode 100644 src/views/marketing/agent/agent/template/area.vue
 create mode 100644 src/views/marketing/agent/agent/template/edit.vue
 create mode 100644 src/views/marketing/agent/agent/template/mer.vue
 create mode 100644 src/views/marketing/agent/index.vue

diff --git a/src/api/marketing.js b/src/api/marketing.js
index 1c603c3..604574e 100644
--- a/src/api/marketing.js
+++ b/src/api/marketing.js
@@ -756,4 +756,34 @@ export function pickupPointInfo(id) {
   return request.get(`user/exchange_quota/pickup_point_info/${id}`)
 }
 
+// 代理中心 - 提交编辑
+export function submitEditInfo(data) {
+  return request.post(`marketing/agent/edit_info`,data)
+}
+// 代理中心 - 获取需要编辑的信息
+export function getEditInfo(data) {
+  return request.get(`marketing/agent/get_edit_info`,data)
+}
+// 代理中心 - 代理列表
+export function agentList(data) {
+  return request.get(`marketing/agent/list`,data)
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
diff --git a/src/libs/notice.js b/src/libs/notice.js
index 198da50..0318069 100644
--- a/src/libs/notice.js
+++ b/src/libs/notice.js
@@ -38,7 +38,7 @@ function notice(token) {
     if (data.status === 200) {
       vm.$emit(data.data.status, data.data.result)
     }
-    console.log(res)
+    // console.log(res)
     if (data.type === 'notice') {
         const h = vm.$createElement
         ElementUI.Notification({
diff --git a/src/router/modules/marketing.js b/src/router/modules/marketing.js
index 1f5a879..50e76f7 100644
--- a/src/router/modules/marketing.js
+++ b/src/router/modules/marketing.js
@@ -484,7 +484,27 @@ const marketingRouter =
             },
             component: () => import('@/views/marketing/exchange/pickupPoint/index')
           },
-
+        ]
+      },
+      {
+        path: 'agent',
+        name: 'Agent',
+        meta: {
+          title: '代理中心',
+          noCache: true
+        },
+        redirect: 'noRedirect',
+        component: () => import('@/views/marketing/agent/index'),
+        children: [
+          {
+            path: 'list',
+            name: `agentList`,
+            meta: {
+              title: '代理管理',
+              noCache: true
+            },
+            component: () => import('@/views/marketing/agent/agent/index')
+          },
 
 
 
@@ -493,7 +513,6 @@ const marketingRouter =
 
 
 
-
     ],
 
   }
diff --git a/src/views/marketing/agent/agent/index.vue b/src/views/marketing/agent/agent/index.vue
new file mode 100644
index 0000000..0b18c49
--- /dev/null
+++ b/src/views/marketing/agent/agent/index.vue
@@ -0,0 +1,280 @@
+<template>
+  <div class="divBox">
+    <!--主要内容-->
+    <el-card class="box-card">
+      <!--顶部搜索栏-->
+      <div slot="header" class="clearfix">
+        <div class="container">
+          <el-form inline size="small" label-width="80px">
+            <el-form-item label="">
+              <el-input v-model="tableFrom.uid" placeholder="请输入用户ID" class="selWidth" clearable />
+              <el-input v-model="tableFrom.contact_name" placeholder="请输入联系人姓名" class="selWidth" clearable />
+              <el-input v-model="tableFrom.contact_phone" placeholder="请输入联系人电话" class="selWidth" clearable />
+              <el-select v-model="tableFrom.agent_type" class="selWidth" >
+                <el-option label="发起人" :value="1"></el-option>
+                <el-option label="省公司" :value="2"></el-option>
+                <el-option label="省合伙人(外勤)" :value="3"></el-option>
+                <el-option label="省合伙人(内勤)" :value="4"></el-option>
+                <el-option label="区县运营商" :value="5"></el-option>
+                <el-option label="区县合伙人" :value="6"></el-option>
+                <el-option label="餐厅" :value="7"></el-option>
+                <el-option label="配送商" :value="8"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <el-button size="small" type="primary" @click="getAgentList(1)">搜索</el-button>
+          <el-button size="small" type="success" @click="showEditInfoPopup(0)">发起人管理</el-button>
+        </div>
+      </div>
+      <!--表格信息-->
+      <el-table v-loading="userListLoading" :data="tableData.data" style="width: 100%" size="mini">
+        <el-table-column label="用户信息" min-width="280" align="center">
+          <template slot-scope="scope">
+            <div class="user-content">
+              <div class="user-avatar">
+                <img :src="scope.row.user.avatar || moren" />
+              </div>
+              <div class="user-info">
+                <div class="nickname">
+                  {{ scope.row.user.nickname }}
+                  <div class="user-id">{{ scope.row.user.uid }}</div>
+                </div>
+                <div class="agent-type-text">
+                  <!--角色信息-->
+                  <el-tag v-if="Number(scope.row.agent_type) == 1" type="info" effect="dark" size="small">发起人</el-tag>
+                  <el-tag v-if="Number(scope.row.agent_type) == 2" type="info" effect="dark" size="small">省公司</el-tag>
+                  <el-tag v-if="Number(scope.row.agent_type) == 3" type="info" effect="dark" size="small">省合伙人(外勤)</el-tag>
+                  <el-tag v-if="Number(scope.row.agent_type) == 4" type="info" effect="dark" size="small">省合伙人(内勤)</el-tag>
+                  <el-tag v-if="Number(scope.row.agent_type) == 5" type="info" effect="dark" size="small">区县运营商</el-tag>
+                  <el-tag v-if="Number(scope.row.agent_type) == 6" type="info" effect="dark" size="small">区县合伙人</el-tag>
+                  <template v-if="Number(scope.row.agent_type) == 7">
+                    <el-tag type="info" effect="dark" size="small">餐厅</el-tag>
+                    <el-tag v-if="scope.row.mer" type="success" effect="dark" size="small">{{ scope.row.mer.mer_name }}</el-tag>
+                  </template>
+                  <template v-if="Number(scope.row.agent_type) == 8">
+                    <el-tag type="info" effect="dark" size="small">配送商</el-tag>
+                    <el-tag v-if="Object.values(scope.row.merList).length > 0" type="success" effect="dark" size="small">
+                      {{ scope.row.merList[0].mer_name }}
+                      {{ Object.values(scope.row.merList).length > 1 ? '+'+Object.values(scope.row.merList).length : '' }}
+                    </el-tag>
+                  </template>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="归属" min-width="280" align="center">
+          <template slot-scope="scope">
+            <div class="user-content" v-if="scope.row.pid > 0">
+              <div class="user-avatar">
+                <img :src="scope.row.parent.avatar || moren" />
+              </div>
+              <div class="user-info">
+                <div class="nickname">
+                  {{ scope.row.parent.nickname }}
+                  <div class="user-id">{{ scope.row.parent.uid }}</div>
+                </div>
+                <div class="agent-type-text">
+                  <el-tag v-if="Number(scope.row.parent.agent_type) == 1" type="info" effect="dark" size="small">发起人</el-tag>
+                  <el-tag v-if="Number(scope.row.parent.agent_type) == 2" type="info" effect="dark" size="small">省公司</el-tag>
+                  <el-tag v-if="Number(scope.row.parent.agent_type) == 3" type="info" effect="dark" size="small">省合伙人(外勤)</el-tag>
+                  <el-tag v-if="Number(scope.row.parent.agent_type) == 4" type="info" effect="dark" size="small">省合伙人(内勤)</el-tag>
+                  <el-tag v-if="Number(scope.row.parent.agent_type) == 5" type="info" effect="dark" size="small">区县运营商</el-tag>
+                  <el-tag v-if="Number(scope.row.parent.agent_type) == 6" type="info" effect="dark" size="small">区县合伙人</el-tag>
+                  <el-tag v-if="Number(scope.row.parent.agent_type) == 7" type="info" effect="dark" size="small">餐厅</el-tag>
+                  <el-tag v-if="Number(scope.row.parent.agent_type) == 8" type="info" effect="dark" size="small">配送商</el-tag>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="联系人" min-width="100" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.contact_name }}<br />
+            {{ scope.row.contact_phone }}
+          </template>
+        </el-table-column>
+        <el-table-column label="地址" min-width="200" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.province_name }}{{ scope.row.city_name }}{{ scope.row.area_name }}{{ scope.row.street_name }}<br />
+            {{ scope.row.address }}
+          </template>
+        </el-table-column>
+        <el-table-column label="添加时间" prop="create_time" min-width="130" align="center"/>
+        <el-table-column label="操作" min-width="120" align="center">
+          <template slot-scope="scope">
+            <el-button type="primary" size="small" effect="dark" @click="showEditInfoPopup(scope.row.agent_type,scope.row.id)">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页-->
+      <div class="block">
+        <el-pagination
+          :page-sizes="[20, 40, 60, 80]"
+          :page-size="tableFrom.limit"
+          :current-page="tableFrom.page"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="tableData.total"
+          @size-change="handleUserSizeChange"
+          @current-change="pageUserChange"
+        />
+      </div>
+    </el-card>
+    <!--编辑弹框-->
+    <edit-info ref="editInfo" :agent_type="agent_type" :agent_id="agent_id" :drawer_show="drawer_show" @closeEdit="closeEditInfoPopup"></edit-info>
+  </div>
+</template>
+
+<script>
+import editInfo from './template/edit';
+import {agentList} from "@/api/marketing";
+export default {
+  name: "preSaleProductList",
+  components: {
+    editInfo
+  },
+  data() {
+    return {
+      moren: require("@/assets/images/f.png"),
+      // 编辑弹框
+      drawer_show: false,
+      agent_type: 0,
+      agent_id: 0,
+      // 列表
+      userListLoading: false,
+      tableFrom: {
+        page: 1,
+        limit: 20,
+        uid: '',
+        contact_name: '',
+        contact_phone: '',
+        agent_type: '',
+
+      },
+      tableData: {
+        data: [],
+        total: 0,
+      },
+    };
+  },
+  watch: {},
+  mounted() {
+    this.getAgentList();
+  },
+  methods: {
+    // 代理编辑 - 弹出弹框
+    showEditInfoPopup(agent_type,agent_id = 0){
+      // 类型：1=发起人,2=省公司,3=省合伙人(外勤),4=省合伙人(内勤),5=区县运营商,6=区县合伙人,7=餐厅,8=配送商
+      this.agent_type = agent_type || 0;
+      this.agent_id = agent_id || 0;
+      this.drawer_show = true;
+    },
+    // 代理编辑 - 关闭弹框
+    closeEditInfoPopup() {
+      this.drawer_show = false;
+      this.getAgentList('');
+    },
+    // 代理列表
+    getAgentList(num){
+      let _this = this;
+      _this.userListLoading = true;
+      _this.tableFrom.page = num ? num : _this.tableFrom.page;
+      agentList(_this.tableFrom)
+        .then((res) => {
+          _this.tableData.data = res.data.list;
+          _this.tableData.total = res.data.count;
+          _this.userListLoading = false;
+        })
+        .catch((res) => {
+          _this.userListLoading = false;
+          _this.$message.error(res.message);
+        });
+    },
+    pageUserChange(page) {
+      this.tableFrom.page = page;
+      this.getUserList('');
+    },
+    handleUserSizeChange(val) {
+      this.tableFrom.limit = val;
+      this.getUserList('');
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+/deep/ .el-table .cell{
+  padding: 0!important;
+}
+.selWidth{
+  margin-bottom: 10px!important;
+}
+.user-content{
+  --user-content-height-: 80px;
+
+  height: var(--user-content-height-);
+  width: 100%;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  .user-avatar{
+    height: var(--user-content-height-);
+    width: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    img{
+      height: 80%!important;
+      width: 80%!important;
+      border-radius: 50% !important;
+    }
+  }
+  .user-info{
+    max-width: calc(100% - var(--user-content-height-));
+    height: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: flex-start;
+    .nickname{
+      width: 100%;
+      height: 25px;
+      line-height: 25px;
+      text-align: left;
+      font-size: 15px;
+      font-weight: bold;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+      .user-id{
+        color: #fff;
+        background-color: #409eff;
+        border-color: #409eff;
+        height: 18px;
+        line-height: 20px;
+        font-size: 13px;
+        padding: 0 5px;
+        border-radius: 5px;
+        margin-left: 10px;
+        width: max-content!important;
+      }
+    }
+    .user-id{
+      width: 100%;
+      text-align: left;
+      font-size: 13px;
+      line-height: calc(var(--user-content-height- * 35%));
+    }
+  }
+}
+</style>
diff --git a/src/views/marketing/agent/agent/template/area.vue b/src/views/marketing/agent/agent/template/area.vue
new file mode 100644
index 0000000..10b5a0f
--- /dev/null
+++ b/src/views/marketing/agent/agent/template/area.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="mainContent">
+    <el-select @change="changeCity" :value="Number(area_id) > 0 ? area_id : ''" placeholder="请选择">
+      <el-option v-for="(item,index) in list" :key="index" :label="item.name" :value="item.id"></el-option>
+    </el-select>
+  </div>
+</template>
+
+<script>
+import {cityDataLst} from "@/api/system";
+
+export default {
+  props: {
+    pid:{
+      type: String|Number,
+      default: 0
+    },
+    area_id: {
+      type: String|Number,
+      default: 0
+    },
+  },
+  data() {
+    return {
+      list: {},
+    };
+  },
+  watch: {
+    pid: {
+      handler: function () {
+        // 信息初始化
+        this.getCityAreaList(this.pid);
+      },
+      deep: true,
+      immediate: true
+    },
+  },
+  mounted() {},
+  methods: {
+    // 地区选择器 - 获取地区列表
+    getCityAreaList(id) {
+      let _this = this;
+      cityDataLst(id).then((res) => {
+        if(res.status == 200){
+          _this.list = res.data || {};
+        }
+      }).catch((res) => {
+        this.$message.error(res.message);
+      });
+    },
+    // 地区选择器 - 地区选中
+    changeCity(event){
+      // 获取选择的内容
+      let list = Object.assign({},this.list);
+      let info = {};
+      Object.values(list).some((item) => {
+        if(item.id == event){
+          info = item;
+          return true;
+        }
+      });
+
+      this.$emit('change', info);
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/marketing/agent/agent/template/edit.vue b/src/views/marketing/agent/agent/template/edit.vue
new file mode 100644
index 0000000..e41ed0a
--- /dev/null
+++ b/src/views/marketing/agent/agent/template/edit.vue
@@ -0,0 +1,924 @@
+<template>
+  <div class="mainContent">
+    <el-drawer :with-header="false" :size="1000" :visible.sync="drawer_show" direction="rtl" :before-close="closeEditInfo">
+      <!-- 顶部标题 -->
+      <div class="title">{{ page_title }}</div>
+      <!-- 当前用户信息 -->
+      <div class="current-user-info" v-if="info.uid > 0">
+        <div class="top-user">
+          <div class="user-content">
+            <div class="user-avatar">
+              <img :src="info.user.avatar || moren" />
+            </div>
+            <div class="user-info">
+              <div class="nickname">
+                {{ info.user.nickname }}
+                <div class="user-id">{{info.uid}}</div>
+              </div>
+              <div class="user-address">
+                <!--{{ info.province_name }}{{ info.city_name }}{{ info.area_name }}{{ info.street_name }}{{ info.address }}-->
+              </div>
+            </div>
+          </div>
+          <el-button size="small" type="warning" round @click="addChildren(1, true)">切换用户</el-button>
+        </div>
+        <div class="info-list">
+          <el-form ref="editInfoField" size="small" :model="info" label-width="130px" @submit.native.prevent>
+            <el-row>
+              <!--公共内容-->
+              <el-col :span="12">
+                <el-form-item label="联系人姓名：" prop="contact_name">
+                  <el-input v-model="info.contact_name" placeholder="请填写联系人姓名" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="联系人电话：" prop="contact_phone">
+                  <el-input v-model="info.contact_phone" placeholder="请填写联系人电话" />
+                </el-form-item>
+              </el-col>
+              <!--仅发起人-->
+              <el-col :span="12" v-if="info.agent_type == 1">
+                <el-form-item label="股份：">
+                  <el-tooltip class="item" effect="dark" content="请在发起人管理中编辑股份信息！" placement="right">
+                    <el-input :value="info.agent_stock" type="text" readonly />
+                  </el-tooltip>
+                </el-form-item>
+              </el-col>
+              <!-- 地区选择，仅需要的显示  类型：1=发起人,2=省公司,3=省合伙人(外勤),4=省合伙人(内勤),5=区县运营商,6=区县合伙人,7=餐厅,8=配送商 -->
+              <el-col :span="24" v-if="['2','3','4','5','6','7'].includes(String(info.agent_type))">
+                <el-form-item label="地区：">
+                  <div class="selected-city">
+                    <!--省选择-->
+                    <area-info :area_id="info.province_id" class="selected-city-item" @change="changeAreaInfo($event,-1)"></area-info>
+                    <!--市选择-->
+                    <area-info
+                      :area_id="info.city_id"
+                      :pid="info.province_id"
+                      class="selected-city-item"
+                      v-if="['5','6','7'].includes(String(info.agent_type)) && Number(info.province_id) > 0"
+                      @change="changeAreaInfo($event,-1)"
+                    ></area-info>
+                    <!--区/县选择-->
+                    <area-info
+                      :area_id="info.area_id"
+                      :pid="info.city_id"
+                      class="selected-city-item"
+                      v-if="['5','6','7'].includes(String(info.agent_type)) && Number(info.city_id) > 0"
+                      @change="changeAreaInfo($event,-1)"
+                    ></area-info>
+                    <!--镇/街道-->
+                    <area-info
+                      :area_id="info.street_id"
+                      :pid="info.area_id"
+                      class="selected-city-item"
+                      v-if="['7'].includes(String(info.agent_type)) && Number(info.area_id) > 0"
+                      @change="changeAreaInfo($event,-1)"
+                    ></area-info>
+                  </div>
+                </el-form-item>
+              </el-col>
+              <!-- 仅餐厅 显示详细地址、定位、商户关联（单个） -->
+              <template v-if="info.agent_type == 7">
+                <el-col :span="24">
+                  <el-form-item label="经纬度：" prop="lat">
+                    <el-input :value="(info.lat || '') + ',' + (info.lng || '')" readonly enter-button="查找位置" style="width: 100%;" placeholder="请点击查找位置选择位置">
+                      <el-button slot="append" type="primary" @click="searchPosition(-1)">查找位置</el-button>
+                    </el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="详细地址：">
+                    <el-input v-model="info.address" placeholder="请填写详细地址" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="关联商户：">
+                    <search-mer :mer_id="info.mer_id" @change="changeMer($event,-1)"></search-mer>
+                  </el-form-item>
+                </el-col>
+              </template>
+              <!-- 仅配送商  显示商户关联（多个）-->
+              <el-col :span="24" v-if="info.agent_type == 8">
+                <el-form-item label="关联商户：">
+                  <search-mer :mer_id="info.mer_id_list" @change="changeMer($event,-1)" :is_multiple="true"></search-mer>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+      </div>
+      <!-- 下级信息/发起人信息 -->
+      <div class="sub-list">
+        <!-- 操作按钮 -->
+        <el-button v-if="Number(agent_type) === 0" size="small" type="primary" @click="addChildren(1)">添加发起人</el-button>
+        <el-button v-if="Number(agent_type) === 1" size="small" type="primary" @click="addChildren(2)">添加省公司</el-button>
+        <el-button v-if="Number(agent_type) === 2" size="small" type="primary" @click="addChildren(3)">添加省合伙人(外勤)</el-button>
+        <el-button v-if="Number(agent_type) === 2" size="small" type="primary" @click="addChildren(4)">添加省合伙人(内勤)</el-button>
+        <el-button v-if="Number(agent_type) === 3" size="small" type="primary" @click="addChildren(5)">添加区县运营商</el-button>
+        <el-button v-if="Number(agent_type) === 5" size="small" type="primary" @click="addChildren(6)">添加区县合伙人</el-button>
+        <el-button v-if="Number(agent_type) === 6" size="small" type="primary" @click="addChildren(7)">添加餐厅</el-button>
+        <el-button v-if="![0,4,7,8].includes(Number(agent_type))" size="small" type="warning" @click="addChildren(8)">添加配送商</el-button>
+        <el-button size="small" type="success" @click="submitEditInfo">提交编辑</el-button>
+        <el-button size="small" @click="closeEditInfo">取消编辑</el-button>
+        <!-- 角色列表 -->
+        <div class="role-list">
+          <div class="role-block" v-for="(item,index) in children_list" :key="index">
+            <div class="top-user-content">
+              <div class="user-content">
+                <div class="user-avatar">
+                  <img :src="item.user.avatar || moren" />
+                </div>
+                <div class="user-info">
+                  <div class="nickname">
+                    {{ item.user.nickname }}
+                    <div class="user-id">{{ item.user.uid }}</div>
+                  </div>
+                  <div class="agent-type-text">
+                    <el-tag v-if="Number(item.agent_type) == 1" type="info" effect="dark" size="small">发起人</el-tag>
+                    <el-tag v-if="Number(item.agent_type) == 2" type="info" effect="dark" size="small">省公司</el-tag>
+                    <el-tag v-if="Number(item.agent_type) == 3" type="info" effect="dark" size="small">省合伙人(外勤)</el-tag>
+                    <el-tag v-if="Number(item.agent_type) == 4" type="info" effect="dark" size="small">省合伙人(内勤)</el-tag>
+                    <el-tag v-if="Number(item.agent_type) == 5" type="info" effect="dark" size="small">区县运营商</el-tag>
+                    <el-tag v-if="Number(item.agent_type) == 6" type="info" effect="dark" size="small">区县合伙人</el-tag>
+                    <el-tag v-if="Number(item.agent_type) == 7" type="info" effect="dark" size="small">餐厅</el-tag>
+                    <el-tag v-if="Number(item.agent_type) == 8" type="info" effect="dark" size="small">配送商</el-tag>
+                  </div>
+                </div>
+              </div>
+              <div class="user-del-btn">
+                <el-button type="danger" icon="el-icon-delete" circle @click="closeStaffConfirm(item.uid, item.agent_type)"></el-button>
+              </div>
+            </div>
+            <div class="bottom-form-content">
+              <el-form ref="editInfoField" size="small" :model="children_list" label-width="130px" @submit.native.prevent>
+                <el-row>
+                  <!-- 公共表单内容 -->
+                  <el-col :span="12">
+                    <el-form-item label="联系人姓名：" prop="contact_name">
+                      <el-input v-model="children_list[index].contact_name" placeholder="请填写联系人姓名" />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="联系人电话：" prop="contact_phone">
+                      <el-input v-model="children_list[index].contact_phone" placeholder="请填写联系人电话" />
+                    </el-form-item>
+                  </el-col>
+                  <!-- 仅发起人显示 -->
+                  <el-col :span="12" v-if="children_list[index].agent_type == 1">
+                    <el-form-item label="股份：" prop="agent_stock">
+                      <el-input v-model.number="children_list[index].agent_stock" type="number" step="0.01" placeholder="请填写该发起人股份" />
+                    </el-form-item>
+                  </el-col>
+                  <!-- 地区选择，仅需要的显示  类型：1=发起人,2=省公司,3=省合伙人(外勤),4=省合伙人(内勤),5=区县运营商,6=区县合伙人,7=餐厅,8=配送商 -->
+                  <el-col :span="24" v-if="['2','3','4','5','6','7'].includes(String(children_list[index].agent_type))">
+                    <el-form-item label="地区：">
+                      <div class="selected-city">
+                        <!--省选择-->
+                        <area-info
+                          :area_id="children_list[index].province_id"
+                          class="selected-city-item"
+                          @change="changeAreaInfo($event,index)"
+                        ></area-info>
+                        <!--市选择-->
+                        <area-info
+                          :area_id="children_list[index].city_id"
+                          :pid="children_list[index].province_id"
+                          class="selected-city-item"
+                          v-if="['5','6','7'].includes(String(children_list[index].agent_type)) && Number(children_list[index].province_id) > 0"
+                          @change="changeAreaInfo($event,index)"
+                        ></area-info>
+                        <!--区/县选择-->
+                        <area-info
+                          :area_id="children_list[index].area_id"
+                          :pid="children_list[index].city_id"
+                          class="selected-city-item"
+                          v-if="['5','6','7'].includes(String(children_list[index].agent_type)) && Number(children_list[index].city_id) > 0"
+                          @change="changeAreaInfo($event,index)"
+                        ></area-info>
+                        <!--镇/街道-->
+                        <area-info
+                          :area_id="children_list[index].street_id"
+                          :pid="children_list[index].area_id"
+                          class="selected-city-item"
+                          v-if="['7'].includes(String(children_list[index].agent_type)) && Number(children_list[index].area_id) > 0"
+                          @change="changeAreaInfo($event,index)"
+                        ></area-info>
+                      </div>
+                    </el-form-item>
+                  </el-col>
+                  <!-- 仅餐厅 显示详细地址、定位、商户关联（单个） -->
+                  <template v-if="children_list[index].agent_type == 7">
+                    <el-col :span="24">
+                      <el-form-item label="经纬度：" prop="lat">
+                        <el-input :value="(children_list[index].lat || '') + ',' + (children_list[index].lng || '')" readonly enter-button="查找位置" style="width: 100%;" placeholder="请点击查找位置选择位置">
+                          <el-button slot="append" type="primary" @click="searchPosition(index)">查找位置</el-button>
+                        </el-input>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                      <el-form-item label="详细地址：">
+                        <el-input v-model="children_list[index].address" placeholder="请填写详细地址" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                      <el-form-item label="关联商户：">
+                        <search-mer :mer_id="children_list[index].mer_id" @change="changeMer($event,index)"></search-mer>
+                      </el-form-item>
+                    </el-col>
+                  </template>
+                  <!-- 仅配送商  显示商户关联（多个）-->
+                  <el-col :span="24" v-if="children_list[index].agent_type == 8">
+                    <el-form-item label="关联商户：">
+                      <search-mer :mer_id="children_list[index].mer_id_list" @change="changeMer($event,index)" :is_multiple="true"></search-mer>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+    <!------ 公共内容 ----------------------------------------------------->
+    <!--用户选择-->
+    <el-dialog title="负责人选择" :visible.sync="userSelectVisible" width="80%" :before-close="closeStaff" :append-to-body="true">
+      <el-card class="box-card">
+        <!--顶部搜索栏-->
+        <div slot="header" class="clearfix">
+          <div class="container">
+            <el-form inline size="small" label-width="80px">
+              <el-form-item label="">
+                <el-input v-model="userTableFrom.nickname" placeholder="请输入用户昵称" class="selWidth" clearable />
+                <el-input v-model="userTableFrom.phone" placeholder="请输入用户手机号" class="selWidth" clearable />
+                <el-input v-model="userTableFrom.uid" placeholder="请输入用户ID" class="selWidth" clearable>
+                  <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getUserList(1)" />
+                </el-input>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+        <!--表格信息-->
+        <el-table v-loading="userListLoading" :data="userTableData.data" :key="Object.values(children_uid_list).toString()" style="width: 100%" size="mini">
+          <el-table-column label="用户信息" prop="nickname" min-width="300" align="center">
+            <template slot-scope="scope">
+              <div class="user-content">
+                <div class="user-avatar">
+                  <img :src="scope.row.avatar || moren" />
+                </div>
+                <div class="user-info">
+                  <div class="nickname">{{ scope.row.nickname }}</div>
+                  <div class="user-id">ID：{{ scope.row.uid }}</div>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="联系电话" prop="phone" min-width="150" align="center"/>
+          <!--根据添加编辑类型 显示不同的内容-->
+          <el-table-column v-if="Number(create_role_type) === 1" label="是否已成为发起人" min-width="200" align="center">
+            <template slot-scope="scope">
+              <el-tag type="success" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" effect="dark">是</el-tag>
+              <el-tag type="info" v-else effect="dark">不是</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="Number(create_role_type) === 2" label="是否已成为省公司" min-width="200" align="center">
+            <template slot-scope="scope">
+              <el-tag type="success" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" effect="dark">是</el-tag>
+              <el-tag type="info" v-else effect="dark">不是</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="Number(create_role_type) === 3" label="是否已成为省合伙人(外勤)" min-width="200" align="center">
+            <template slot-scope="scope">
+              <el-tag type="success" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" effect="dark">是</el-tag>
+              <el-tag type="info" v-else effect="dark">不是</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="Number(create_role_type) === 4" label="是否已成为省合伙人(内勤)" min-width="200" align="center">
+            <template slot-scope="scope">
+              <el-tag type="success" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" effect="dark">是</el-tag>
+              <el-tag type="info" v-else effect="dark">不是</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="Number(create_role_type) === 5" label="是否已成为区县运营商" min-width="200" align="center">
+            <template slot-scope="scope">
+              <el-tag type="success" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" effect="dark">是</el-tag>
+              <el-tag type="info" v-else effect="dark">不是</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="Number(create_role_type) === 6" label="是否已成为区县合伙人" min-width="200" align="center">
+            <template slot-scope="scope">
+              <el-tag type="success" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" effect="dark">是</el-tag>
+              <el-tag type="info" v-else effect="dark">不是</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="Number(create_role_type) === 7" label="是否已成为餐厅" min-width="200" align="center">
+            <template slot-scope="scope">
+              <el-tag type="success" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" effect="dark">是</el-tag>
+              <el-tag type="info" v-else effect="dark">不是</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="Number(create_role_type) === 8" label="是否已成为配送商" min-width="200" align="center">
+            <template slot-scope="scope">
+              <el-tag type="success" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" effect="dark">是</el-tag>
+              <el-tag type="info" v-else effect="dark">不是</el-tag>
+            </template>
+          </el-table-column>
+          <!--操作按钮-->
+          <el-table-column label="操作" min-width="150" align="center">
+            <template slot-scope="scope">
+              <el-button type="danger"  effect="dark" v-if="Object.values(children_uid_list).includes((String(scope.row.uid)+'_'+String(create_role_type)))" @click="closeStaffConfirm(scope.row.uid, create_role_type)">取消</el-button>
+              <el-button type="success" effect="dark" v-else @click="addStaffConfirm(scope.row)">添加</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!--分页-->
+        <div class="block">
+          <el-pagination
+            :page-sizes="[20, 40, 60, 80]"
+            :page-size="userTableFrom.limit"
+            :current-page="userTableFrom.page"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="userTableData.total"
+            @size-change="handleUserSizeChange"
+            @current-change="pageUserChange"
+          />
+        </div>
+      </el-card>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="userSelectVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
+    <!--地图定位-->
+    <el-dialog
+      v-if="modalMap"
+      v-model="modalMap"
+      :visible.sync="modalMap"
+      title="选择位置"
+      close-on-click-modal
+      class="mapBox"
+      custom-class="dialog-scustom"
+      :append-to-body='true'
+      width="80%"
+      top="20px"
+    >
+      <iframe id="mapPage" width="100%" height="700px" frameborder="0" :src="keyUrl" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import areaInfo from './area';
+import searchMer from './mer';
+import {userLstApi} from "@/api/user";
+import {getEditInfo, submitEditInfo} from "@/api/marketing";
+import {configApi} from "@/api/system";
+
+export default {
+  props: {
+    agent_type: {
+      type: Number,
+      default: 0
+    },
+    drawer_show: {
+      type: Boolean,
+      default: false
+    },
+    agent_id: {
+      type: Number,
+      default: 0
+    },
+  },
+  components: {
+    areaInfo,
+    searchMer
+  },
+  data() {
+    return {
+      moren: require("@/assets/images/f.png"),
+      page_title: '编辑信息',
+      // 信息管理相关
+      info: {},
+      children_list: {},
+      children_uid_list: {},
+      // 用户选择弹框
+      userSelectVisible: false,
+      userListLoading: true,
+      userTableFrom: {
+        page: 1,
+        limit: 20,
+        nickname: '',
+        phone: '',
+        uid: ''
+      },
+      userTableData: {
+        data: [],
+        total: 0,
+      },
+      create_role_type: 0,
+      is_change_user: false,
+      // 定位相关
+      modalMap: false,
+      mapKey: '',
+      keyUrl: '',
+      delivery_type: '',
+      current_handle_index: '',
+      // 商户选择
+      mer_loading: false,
+      mer_list: {},
+
+
+
+
+    };
+  },
+  watch: {
+    drawer_show: {
+      handler: function () {
+        // 信息初始化
+        this.info = {};
+        this.children_list = {};
+        this.children_uid_list = {};
+        if(this.drawer_show) this.getAgentEditInfo();
+      },
+    },
+    agent_type: {
+      handler: function () {
+        // 类型：1=发起人,2=省公司,3=省合伙人(外勤),4=省合伙人(内勤),5=区县运营商,6=区县合伙人,7=餐厅,8=配送商
+        switch (Number(this.agent_type)) {
+          case 0:
+            this.page_title = '发起人管理';
+            break;
+          case 1:
+            this.page_title = '发起人信息编辑';
+            break;
+          case 2:
+            this.page_title = '省公司信息编辑';
+            break;
+          case 3:
+            this.page_title = '省合伙人(外勤)信息编辑';
+            break;
+          case 4:
+            this.page_title = '省合伙人(内勤)信息编辑';
+            break;
+          case 5:
+            this.page_title = '区县运营商信息编辑';
+            break;
+          case 6:
+            this.page_title = '区县合伙人信息编辑';
+            break;
+          case 7:
+            this.page_title = '餐厅信息编辑';
+            break;
+          case 8:
+            this.page_title = '配送商信息编辑';
+            break;
+        }
+      },
+      immediate: true
+    },
+    children_list: {
+      handler: function () {
+        this.children_uid_list = Object.values(this.children_list).map((item) => {
+          return String(item.uid) + '_' + String(item.agent_type);
+        });
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted() {
+    window.addEventListener(
+      'message',
+      function(event) {
+        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
+        var loc = event.data
+        if (loc && loc.module === 'locationPicker') {
+          // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
+          window.parent.selectAddress(loc)
+        }
+      },
+      false
+    )
+    window.selectAddress = this.selectAddress
+    this.getMapKey();
+  },
+  methods: {
+    // 初始化 - 获取当前需要修改的信息
+    getAgentEditInfo(){
+      let _this = this;
+      let params = {
+        agent_id: _this.agent_id,
+      };
+      getEditInfo(params).then((res) => {
+        if(res.status == 200){
+          _this.info = Object.assign({},res.data.info || {});
+          _this.children_list = Object.assign({},res.data.children_list || {});
+        }
+      }).catch((res) => {
+        _this.$message.error(res.message)
+      })
+    },
+    // 用户选择器 - 弹框显示
+    addChildren(create_role_type,is_change_user = false){
+      this.getUserList(1);
+      this.userSelectVisible = true;
+      this.is_change_user = is_change_user;
+      // 添加角色类型
+      this.create_role_type = create_role_type || 0;
+    },
+    // 用户选择器 - 弹框关闭
+    closeStaff() {
+      this.userSelectVisible = false;
+    },
+    // 用户选择器 - 获取用户列表及分页相关
+    getUserList(num) {
+      let _this = this;
+      this.userListLoading = true;
+      this.userTableFrom.page = num ? num : this.userTableFrom.page;
+      userLstApi(this.userTableFrom)
+        .then((res) => {
+          this.userTableData.data = res.data.list;
+          this.userTableData.total = res.data.count;
+          this.userListLoading = false;
+        })
+        .catch((res) => {
+          this.userListLoading = false;
+          this.$message.error(res.message);
+        });
+    },
+    pageUserChange(page) {
+      this.userTableFrom.page = page;
+      this.getUserList('');
+    },
+    handleUserSizeChange(val) {
+      this.userTableFrom.limit = val;
+      this.getUserList('');
+    },
+    // 用户选择器 - 选中用户
+    addStaffConfirm(item){
+      if(this.is_change_user){
+        this.info.uid = item.uid;
+        this.info.user = item;
+        this.closeStaff();
+      }else{
+        let key = String(item.uid) + '_' + String(this.create_role_type);
+        this.children_list[key] = {
+          uid: item.uid,
+          pid: this.info.id || 0,
+          agent_type: this.create_role_type,
+          agent_stock: 0,
+          contact_name: '',
+          contact_phone: '',
+          province_id: 0,
+          city_id: 0,
+          area_id: 0,
+          street_id: 0,
+          address: '',
+          lat: '',
+          lng: '',
+          mer_id: '',
+          mer_id_list: [],
+          user: item,
+        };
+        this.children_list = Object.assign({}, this.children_list);
+      }
+
+      this.$forceUpdate();
+    },
+    // 用户选择器 - 删除用户
+    closeStaffConfirm(uid, agent_type){
+      let key = String(uid) + '_' + String(agent_type);
+      // 判断：是否允许删除
+      let childrenCount =  this.children_list[key].children_count || 0;
+      if(Number(childrenCount) > 0){
+        this.$message.error("存在下级信息，禁止删除！");
+        return false;
+      }
+      // 删除操作
+      delete this.children_list[key];
+      this.children_list = Object.assign({}, this.children_list);
+      this.$forceUpdate();
+    },
+    // 操作 - 取消编辑
+    closeEditInfo(){
+      this.$emit('closeEdit')
+    },
+    // 操作 - 提交编辑
+    submitEditInfo(){
+      let _this = this;
+      let editInfo = Object.assign({},_this.info);
+      editInfo.children_list = Object.assign({}, _this.children_list);
+      let editInfoId = Number(editInfo.id || 0);
+      let childrenListLen = Object.values(editInfo.children_list).length || 0;
+      // 判断：如果 agent_type == 0 且children_list为空 则不允许提交，因为这时没有信息需要编辑
+      if(Number(_this.agent_type) === 0 && childrenListLen <= 0){
+        _this.$message.error("请至少添加一个发起人！")
+        return false;
+      }
+      // 判断：editInfo不为空 且isSubmit=true   可以提交
+      if((editInfoId > 0) || (editInfoId <= 0 && childrenListLen > 0)){
+        submitEditInfo(editInfo).then((res) => {
+          if(res.status == 200){
+            _this.$message.success('操作成功');
+            _this.closeEditInfo();
+            _this.$forceUpdate();
+          }
+        }).catch((res) => {
+          _this.$message.error(res.message)
+        })
+      }
+    },
+    // 地区选择器 - 切换地区
+    changeAreaInfo(event,index){
+      let _this = this;
+      switch (event.type){
+        case 'province':
+          if(index == -1){
+            _this.info.province_id = event.id;
+            _this.info.city_id = 0;
+            _this.info.area_id = 0;
+            _this.info.street_id = 0;
+          }else{
+            _this.children_list[index].province_id = event.id;
+            _this.children_list[index].city_id = 0;
+            _this.children_list[index].area_id = 0;
+            _this.children_list[index].street_id = 0;
+          }
+          break;
+        case 'city':
+          if(index == -1){
+            _this.info.city_id = event.id;
+            _this.info.area_id = 0;
+            _this.info.street_id = 0;
+          }else {
+            _this.children_list[index].city_id = event.id;
+            _this.children_list[index].area_id = 0;
+            _this.children_list[index].street_id = 0;
+          }
+          break;
+        case 'area':
+          if(index == -1){
+            _this.info.area_id = event.id;
+            _this.info.street_id = 0;
+          }else {
+            _this.children_list[index].area_id = event.id;
+            _this.children_list[index].street_id = 0;
+          }
+          break;
+        case 'street':
+          if(index == -1){
+            _this.info.street_id = event.id;
+          }else {
+            _this.children_list[index].street_id = event.id;
+          }
+        break;
+      }
+      _this.$forceUpdate();
+    },
+    // 定位处理 - 获取地图key
+    getMapKey() {
+      configApi().then(res => {
+        this.mapKey = res.data.tx_map_key
+        const keys = res.data.tx_map_key
+        this.keyUrl = `https://apis.map.qq.com/tools/locpicker?type=1&key=${keys}&referer=myapp`
+        this.delivery_type = res.data.delivery_type
+      }).catch(res => {
+        this.$message.error(res.message)
+      })
+    },
+    // 定位处理 - 定位处理
+    searchPosition(index) {
+      this.current_handle_index = index;
+      if (!this.mapKey || this.mapKey == '') this.$message.error('平台未配置腾讯地图KEY')
+      else this.modalMap = true
+    },
+    // 定位处理 - 选择经纬度
+    selectAddress(data) {
+      let index = this.current_handle_index;
+      if(index == -1){
+        this.info.lat = data.latlng.lat
+        this.info.lng = data.latlng.lng
+        this.info.address = data.poiaddress || ''
+      }else{
+        this.children_list[index].lat = data.latlng.lat
+        this.children_list[index].lng = data.latlng.lng
+        this.children_list[index].address = data.poiaddress || ''
+      }
+
+      this.modalMap = false
+      this.$forceUpdate();
+    },
+    // 选择商户 - 商户改变
+    changeMer(event,index){
+      let _this = this;
+      if(index == -1){
+        let agent_type = _this.info.agent_type;
+        if(agent_type == 7) _this.info.mer_id = event.mer_id;
+        else if(agent_type == 8) _this.info.mer_id_list = event.event || [];
+      }else{
+        let agent_type = _this.children_list[index].agent_type;
+        if(agent_type == 7) _this.children_list[index].mer_id = event.mer_id;
+        else if(agent_type == 8) _this.children_list[index].mer_id_list = event.event || [];
+      }
+
+
+
+
+
+      _this.$forceUpdate();
+    }
+
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mainContent{
+  // 顶部标题
+  .title{
+    padding: 20px 20px 10px;
+    font-weight: 700;
+    background-color: #f5f7fa;
+    border-bottom: 1px solid #dfe4ed;
+  }
+  // 当前用户信息
+  .current-user-info{
+    padding: 20px;
+    border-bottom: 1px solid #dfe4ed;
+    .top-user{
+      display: inline-flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      .user-content{
+        margin-right: 30px;
+        .nickname{
+          height: 25px;
+          line-height: 25px;
+          font-size: 16px;
+          color: #282828;
+          display: inline-flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          justify-content: flex-start;
+          align-items: center;
+          .user-id{
+            color: #fff;
+            background-color: #409eff;
+            border-color: #409eff;
+            height: 18px;
+            line-height: 20px;
+            font-size: 13px;
+            padding: 0 5px;
+            border-radius: 5px;
+            margin-left: 10px;
+            width: max-content!important;
+          }
+        }
+        .user-address{
+          height: 25px;
+          line-height: 25px;
+          width: 100%;
+          font-size: 13px;
+          color: #606266;
+        }
+      }
+    }
+  }
+  // 下级信息/发起人信息
+  .sub-list{
+    padding: 20px;
+    .role-list{
+      width: 100%;
+      padding: 15px 0;
+      display: inline-flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      align-items: flex-start;
+      justify-content: center;
+      .role-block{
+        border: 1px solid #dfe4ed;
+        width: 100%;
+        border-radius: 5px;
+        padding: 10px;
+        .top-user-content{
+          width: 100%;
+          display: inline-flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          justify-content: space-between;
+          align-items: center;
+          .user-content{
+            width: 300px;
+            height: 80px!important;
+            .user-info{
+              height: 80px;
+              display: inline-flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              align-items: flex-start;
+              justify-content: space-evenly;
+              .nickname{
+                height: 25px;
+                line-height: 25px;
+                font-size: 16px;
+                color: #282828;
+                display: inline-flex;
+                flex-direction: row;
+                flex-wrap: nowrap;
+                justify-content: flex-start;
+                align-items: center;
+                .user-id{
+                  color: #fff;
+                  background-color: #409eff;
+                  border-color: #409eff;
+                  height: 18px;
+                  line-height: 20px;
+                  font-size: 13px;
+                  padding: 0 5px;
+                  border-radius: 5px;
+                  margin-left: 10px;
+                  width: max-content!important;
+                }
+              }
+            }
+          }
+          .user-del-btn{}
+        }
+        .bottom-form-content{
+          margin-top: 10px;
+          width: 100%;
+        }
+      }
+      .role-block:not(:last-child){
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
+.selected-city{
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  width: 100%;
+  .selected-city-item{
+    width: calc((100% - 20px) / 3);
+  }
+  .selected-city-item:not(:last-child){
+    margin-right: 10px;
+  }
+}
+.user-content{
+  --user-content-height-: 80px;
+
+  height: var(--user-content-height-);
+  width: 100%;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  .user-avatar{
+    height: var(--user-content-height-);
+    width: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    img{
+      height: 80%!important;
+      width: 80%!important;
+      border-radius: 50% !important;
+    }
+  }
+  .user-info{
+    width: calc(100% - var(--user-content-height-));
+    height: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: flex-start;
+    .nickname{
+      width: 100%;
+      height: 25px;
+      line-height: 25px;
+      text-align: left;
+      font-size: 15px;
+      font-weight: bold;
+      line-height: calc(var(--user-content-height- * 65%));
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .user-id{
+      width: 100%;
+      text-align: left;
+      font-size: 13px;
+      line-height: calc(var(--user-content-height- * 35%));
+    }
+  }
+}
+</style>
diff --git a/src/views/marketing/agent/agent/template/mer.vue b/src/views/marketing/agent/agent/template/mer.vue
new file mode 100644
index 0000000..8db8cd5
--- /dev/null
+++ b/src/views/marketing/agent/agent/template/mer.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="mainContent">
+    <el-select @change="changeMer" :value="mer_id ? mer_id : '' " :multiple="is_multiple" filterable remote reserve-keyword placeholder="请输入关键词搜索商户" :remote-method="searchMer" :loading="loading">
+      <el-option v-for="(item,index) in list" :key="index" :label="item.mer_name" :value="item.mer_id"></el-option>
+    </el-select>
+  </div>
+</template>
+
+<script>
+import {merchantListApi} from "@/api/merchant";
+
+export default {
+  props: {
+    mer_id:{
+      type: String|Number|Object|Array,
+      default: 0
+    },
+    is_multiple: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      list: {},
+    };
+  },
+  watch: {
+    mer_id: {
+      handler: function () {
+        if(Object.values(this.list).length <= 0){
+          this.getMer(this.mer_id);
+        }
+      },
+      immediate: true
+    },
+  },
+  mounted() {},
+  methods: {
+    // 搜索商户
+    searchMer(event) {
+      let _this = this;
+      this.loading = true;
+      let params = {
+        keyword: event,
+      };
+      merchantListApi(params).then((res) => {
+        if(res.status == 200){
+          this.list = res.data.list;
+        }
+        this.loading = false;
+      }).catch((res) => {
+        this.loading = false;
+        this.$message.error(res.message);
+      });
+    },
+    // 获取商户
+    getMer(mer_id) {
+      let _this = this;
+      this.loading = true;
+      let type = typeof mer_id;
+      let params = {};
+      if(type === 'object'){
+        params.mer_id_list = mer_id;
+      }else{
+        params.mer_id = mer_id;
+      }
+      merchantListApi(params).then((res) => {
+        if(res.status == 200){
+          _this.list = res.data.list;
+        }
+        _this.loading = false;
+      }).catch((res) => {
+        _this.loading = false;
+        _this.$message.error(res.message);
+      });
+    },
+    // 商户选中
+    changeMer(event){
+      // 获取选择的内容
+      let list = Object.assign({},this.list);
+      let info = {};
+      Object.values(list).some((item) => {
+        if(item.mer_id == event){
+          info = item;
+          return true;
+        }
+      });
+      info.event = event;
+
+      this.$emit('change', info);
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/marketing/agent/index.vue b/src/views/marketing/agent/index.vue
new file mode 100644
index 0000000..98240ae
--- /dev/null
+++ b/src/views/marketing/agent/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>