From a2b8eabb7302601f975349d86b1b5b66179f369a Mon Sep 17 00:00:00 2001
From: wuhui_zzw <1760308791@qq.com>
Date: Tue, 6 Feb 2024 10:15:49 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=EF=BC=9A=E5=95=86=E6=88=B7?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E7=BC=96=E8=BE=91=E6=8B=9B=E5=95=86=E5=91=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../merchant/list/handle/merEditForm.vue      | 943 +++++++++++-------
 src/views/merchant/list/handle/merInfo.vue    |  77 +-
 src/views/merchant/list/index.vue             |  47 +-
 3 files changed, 705 insertions(+), 362 deletions(-)

diff --git a/src/views/merchant/list/handle/merEditForm.vue b/src/views/merchant/list/handle/merEditForm.vue
index 10a8204..d27da22 100644
--- a/src/views/merchant/list/handle/merEditForm.vue
+++ b/src/views/merchant/list/handle/merEditForm.vue
@@ -1,353 +1,434 @@
 <template>
-  <el-form
-    ref="merDataField"
-    size="small"
-    :rules="ruleValidate"
-    :model="merData"
-    label-width="130px"
-    @submit.native.prevent
+  <div>
+    <el-form
+      ref="merDataField"
+      size="small"
+      :rules="ruleValidate"
+      :model="merData"
+      label-width="130px"
+      @submit.native.prevent
     >
-    <el-tabs v-loading="loading" type="border-card" v-model="activeName">
-      <el-tab-pane label="基本信息" name="detail">
-        <div class="section">
-          <div class="title">基础信息</div>
-          <el-row :gutter="24" class="mt20">
-            <el-col :span="12">
-              <el-form-item label="商户名称：" prop="mer_name">
-                <el-input
-                  v-model="merData.mer_name"
-                  placeholder="请填写商户名称"
-                  class="selWidth"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="商户地址：" prop="mer_address">
-                <el-input
-                  v-model="merData.mer_address"
-                  placeholder="请填写详细地址"
-                  class="selWidth"
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="商户分类：" prop="category_id">
-               <el-select
-                  v-model="merData.category_id"
-                  placeholder="请选择"
-                  class="selWidth"
-                >
-                  <el-option
-                    v-for="item in merCateList"
-                    :key="item.merchant_category_id"
-                    :label="item.category_name"
-                    :value="item.merchant_category_id"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="商户类型：" prop="is_trader">
-                <el-radio-group
-                  v-model="merData.is_trader"
-                >
-                  <el-radio :label="1" class="radio">自营</el-radio>
-                  <el-radio :label="0">非自营</el-radio>
-                </el-radio-group>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="店铺类型：" prop="type_id">
-                <el-select
-                  v-model="merData.type_id"
-                  placeholder="请选择"
-                  class="selWidth"
-                >
-                  <el-option
-                    v-for="item in storeType"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="推荐商户：" prop="is_best">
-                <el-switch
-                  v-model="merData.is_best"
-                  :active-value="1"
-                  :inactive-value="0"
-                  :width="50"
-                  active-text="是"
-                  inactive-text="否"
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="排序：" prop="sort">
-                <el-input-number
-                  v-model="merData.sort"
-                  controls-position="right"
-                  placeholder="请输入排序"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="商户状态：" prop="status">
-                <el-switch
-                  v-model="merData.status"
-                  :active-value="1"
-                  :inactive-value="0"
-                  :width="55"
-                  active-text="开启"
-                  inactive-text="关闭"
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="备注：" prop="mark">
-                <el-input
-                type="textarea"
-                  v-model="merData.mark"
-                  placeholder="请填写备注"
-                  class="selWidth"
-                />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="24">
-            <el-col :span="12">
-              <el-form-item label="人均消费额：" prop="avg_consumption">
-                <el-input type="number" v-model="merData.avg_consumption" placeholder="请填写人均消费额" class="selWidth" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="商户标签：" prop="mer_label">
-                <el-input type="textarea" v-model="merData.mer_label" placeholder="请填写商户标签，多个以逗号隔开!" class="selWidth" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </div>
-      </el-tab-pane>
-      <el-tab-pane label="经营信息" name="operate">
-        <div class="section">
-          <div class="title">费用信息</div>
-          <el-row :gutter="24" class="mt20">
-            <el-col v-if="!isAdd" :span="24">
-              <el-form-item label="店铺保证金：" prop="ot_margin">
-                <span>{{merData.is_margin == 0 ? '无' : merData.ot_margin+'元'}}</span>
-              </el-form-item>
-            </el-col>
-            <el-col v-if="!isAdd && merData.is_margin != 0" :span="24">
-              <el-form-item label="保证金支付状态：">
-                <span>{{merData.is_margin == 1 ? '待缴' : merData.is_margin == 0 ? '无' : '已缴' }}</span>
-              </el-form-item>
-            </el-col>
-            <el-col v-if="!isAdd && merData.is_margin != 0" :span="24">
-              <el-form-item label="保证金余额：">
-                <span>{{merData.margin}}</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="商户手续费单独设置：" label-width="150px" prop="commission_rate">
-                <el-switch
-                  v-model="merData.commission_switch"
-                  :active-value="1"
-                  :inactive-value="0"
-                  :width="55"
-                  active-text="开启"
-                  inactive-text="关闭"
-                />
-                <span class="info info-red">(注：此处如未设置手续费，系统会自动读取商户分类下对应手续费；此处已设置，则优先以此处设置为准)</span>
-              </el-form-item>
-            </el-col>
-            <el-col v-if="merData.commission_switch" :span="24">
-              <el-form-item label="" prop="commission_rate">
-                <el-input-number
-                 :min="0"
-                  v-model="merData.commission_rate"
-                  controls-position="right"
-                  placeholder="请输入排序"
-                />%
-              </el-form-item>
-            </el-col>
-
-          </el-row>
-        </div>
-        <div class="section">
-          <div class="title">审核信息</div>
-           <el-row :gutter="24" class="mt20">
-            <el-col :span="8">
-              <el-form-item label="商品审核：" prop="is_audit">
-                <el-switch
-                  v-model="merData.is_audit"
-                  :active-value="1"
-                  :inactive-value="0"
-                  :width="50"
-                  active-text="是"
-                  inactive-text="否"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="直播间审核：" prop="is_bro_room">
-                <el-switch
-                  v-model="merData.is_bro_room"
-                  :active-value="1"
-                  :inactive-value="0"
-                  :width="50"
-                  active-text="是"
-                  inactive-text="否"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="直播间商品审核：" prop="is_bro_goods">
-                <el-switch
-                  v-model="merData.is_bro_goods"
-                  :active-value="1"
-                  :inactive-value="0"
-                  :width="50"
-                  active-text="是"
-                  inactive-text="否"
-                />
-              </el-form-item>
-            </el-col>
-           </el-row>
-        </div>
-        <div class="section">
-          <div class="title">其他信息</div>
-          <div class="mt20">
-            <el-row :gutter="24">
+      <el-tabs v-loading="loading" type="border-card" v-model="activeName">
+        <el-tab-pane label="基本信息" name="detail">
+          <div class="section">
+            <div class="title">基础信息</div>
+            <el-row :gutter="24" class="mt20">
               <el-col :span="12">
-                <el-form-item label="商户关键字：" prop="mer_keyword">
-                  <el-input v-model="merData.mer_keyword" placeholder="请填写商户关键字" class="selWidth" />
+                <el-form-item label="商户名称：" prop="mer_name">
+                  <el-input
+                    v-model="merData.mer_name"
+                    placeholder="请填写商户名称"
+                    class="selWidth"
+                  />
                 </el-form-item>
               </el-col>
-           </el-row>
-           <el-row v-if="!isAdd" :gutter="24">
-            <el-col :span="12" style="position: relative;">
-              <el-form-item label="商品采集数：">
-                <el-input v-model="merData.copy_product_num" disabled ></el-input>
-                <el-button type="text" @click="modifyCopy" style="margin-left: 10px;position:absolute;right: -30px;">修改</el-button>
+              <el-col :span="12">
+                <el-form-item label="商户地址：" prop="mer_address">
+                  <el-input
+                    v-model="merData.mer_address"
+                    placeholder="请填写详细地址"
+                    class="selWidth"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="商户分类：" prop="category_id">
+                  <el-select
+                    v-model="merData.category_id"
+                    placeholder="请选择"
+                    class="selWidth"
+                  >
+                    <el-option
+                      v-for="item in merCateList"
+                      :key="item.merchant_category_id"
+                      :label="item.category_name"
+                      :value="item.merchant_category_id"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="商户类型：" prop="is_trader">
+                  <el-radio-group
+                    v-model="merData.is_trader"
+                  >
+                    <el-radio :label="1" class="radio">自营</el-radio>
+                    <el-radio :label="0">非自营</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="店铺类型：" prop="type_id">
+                  <el-select
+                    v-model="merData.type_id"
+                    placeholder="请选择"
+                    class="selWidth"
+                  >
+                    <el-option
+                      v-for="item in storeType"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="推荐商户：" prop="is_best">
+                  <el-switch
+                    v-model="merData.is_best"
+                    :active-value="1"
+                    :inactive-value="0"
+                    :width="50"
+                    active-text="是"
+                    inactive-text="否"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="排序：" prop="sort">
+                  <el-input-number
+                    v-model="merData.sort"
+                    controls-position="right"
+                    placeholder="请输入排序"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="商户状态：" prop="status">
+                  <el-switch
+                    v-model="merData.status"
+                    :active-value="1"
+                    :inactive-value="0"
+                    :width="55"
+                    active-text="开启"
+                    inactive-text="关闭"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="备注：" prop="mark">
+                  <el-input
+                    type="textarea"
+                    v-model="merData.mark"
+                    placeholder="请填写备注"
+                    class="selWidth"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="24">
+              <el-col :span="12">
+                <el-form-item label="人均消费额：" prop="avg_consumption">
+                  <el-input type="number" v-model="merData.avg_consumption" placeholder="请填写人均消费额" class="selWidth" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="商户标签：" prop="mer_label">
+                  <el-input type="textarea" v-model="merData.mer_label" placeholder="请填写商户标签，多个以逗号隔开!" class="selWidth" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="经营信息" name="operate">
+          <div class="section">
+            <div class="title">费用信息</div>
+            <el-row :gutter="24" class="mt20">
+              <el-col v-if="!isAdd" :span="24">
+                <el-form-item label="店铺保证金：" prop="ot_margin">
+                  <span>{{ merData.is_margin == 0 ? '无' : merData.ot_margin + '元' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col v-if="!isAdd && merData.is_margin != 0" :span="24">
+                <el-form-item label="保证金支付状态：">
+                  <span>{{ merData.is_margin == 1 ? '待缴' : merData.is_margin == 0 ? '无' : '已缴' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col v-if="!isAdd && merData.is_margin != 0" :span="24">
+                <el-form-item label="保证金余额：">
+                  <span>{{ merData.margin }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="商户手续费单独设置：" label-width="150px" prop="commission_rate">
+                  <el-switch
+                    v-model="merData.commission_switch"
+                    :active-value="1"
+                    :inactive-value="0"
+                    :width="55"
+                    active-text="开启"
+                    inactive-text="关闭"
+                  />
+                  <span class="info info-red">(注：此处如未设置手续费，系统会自动读取商户分类下对应手续费；此处已设置，则优先以此处设置为准)</span>
+                </el-form-item>
+              </el-col>
+              <el-col v-if="merData.commission_switch" :span="24">
+                <el-form-item label="" prop="commission_rate">
+                  <el-input-number
+                    :min="0"
+                    v-model="merData.commission_rate"
+                    controls-position="right"
+                    placeholder="请输入排序"
+                  />
+                  %
+                </el-form-item>
+              </el-col>
+
+            </el-row>
+          </div>
+          <div class="section">
+            <div class="title">审核信息</div>
+            <el-row :gutter="24" class="mt20">
+              <el-col :span="8">
+                <el-form-item label="商品审核：" prop="is_audit">
+                  <el-switch
+                    v-model="merData.is_audit"
+                    :active-value="1"
+                    :inactive-value="0"
+                    :width="50"
+                    active-text="是"
+                    inactive-text="否"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="直播间审核：" prop="is_bro_room">
+                  <el-switch
+                    v-model="merData.is_bro_room"
+                    :active-value="1"
+                    :inactive-value="0"
+                    :width="50"
+                    active-text="是"
+                    inactive-text="否"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="直播间商品审核：" prop="is_bro_goods">
+                  <el-switch
+                    v-model="merData.is_bro_goods"
+                    :active-value="1"
+                    :inactive-value="0"
+                    :width="50"
+                    active-text="是"
+                    inactive-text="否"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+          <div class="section">
+            <div class="title">其他信息</div>
+            <div class="mt20">
+              <el-row :gutter="24">
+                <el-col :span="12">
+                  <el-form-item label="商户关键字：" prop="mer_keyword">
+                    <el-input v-model="merData.mer_keyword" placeholder="请填写商户关键字" class="selWidth" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row v-if="!isAdd" :gutter="24">
+                <el-col :span="12" style="position: relative;">
+                  <el-form-item label="商品采集数：">
+                    <el-input v-model="merData.copy_product_num" disabled></el-input>
+                    <el-button type="text" @click="modifyCopy" style="margin-left: 10px;position:absolute;right: -30px;">
+                      修改
+                    </el-button>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="账号信息" name="account">
+          <div class="section">
+            <div class="title">登录账号</div>
+            <el-row :gutter="24" class="mt20">
+              <el-col :span="12">
+                <el-form-item label="商户账号：" prop="mer_account">
+                  <el-input
+                    type="text"
+                    v-model="merData.mer_account"
+                    :disabled="!isAdd"
+                    class="selWidth"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="登陆密码：" prop="mer_password">
+                  <el-input
+                    type="password"
+                    v-model="merData.mer_password"
+                    :disabled="!isAdd"
+                    class="selWidth"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col v-if="!isAdd" :span="12">
+                <el-form-item label="联系人：" prop="real_name">
+                  <el-input
+                    type="text"
+                    placeholder="请填写联系人"
+                    v-model="merData.real_name"
+                    class="selWidth"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="联系电话：" prop="mer_phone">
+                  <el-input
+                    placeholder="请填写联系电话"
+                    v-model="merData.mer_phone"
+                    class="selWidth"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+          <div class="section">
+            <div class="title">财务帐号</div>
+            <el-row :gutter="24" class="mt20">
+              <el-col :span="12">
+                <el-form-item label="分账商户号：" prop="sub_mchid">
+                  <el-input
+                    placeholder="请填写分账商户号"
+                    v-model="merData.sub_mchid"
+                    class="selWidth"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <div class="info-red" style="margin-left: 120px;">当开启自动分账时，每个子商户在微信后台的分账商户号，即特约子商户号</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="其他设置" name="integral">
+          <!--<div class="section">
+            <div class="title">平台&商户积分设置</div>
+            <el-row :gutter="24" class="mt20">
+              <el-col :span="24">
+                <el-form-item label="商户积分兑换平台积分比例：" prop="mer_integral_platform_rate" label-width="200">
+                  <el-input-number v-model="merData.mer_integral_platform_rate" placeholder="请输入比例" />
+                  <div class="input-tips">例：设置为1.5，则1个本商户积分=1.5个平台积分</div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="平台积分转换商户积分比例：" prop="mer_integral_merchant_rate" label-width="200">
+                  <el-input-number v-model="merData.mer_integral_merchant_rate" placeholder="请输入比例" />
+                  <div class="input-tips">例：设置为0.8，则1个平台积分=0.8个本商户积分</div>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>-->
+          <div class="section">
+            <el-row :gutter="24" class="mt20">
+              <el-col :span="24">
+                <el-form-item label="平台抽成比例：" prop="platform_commission" label-width="200">
+                  <el-input-number v-model="merData.platform_commission" :step="0.01" :min="0" :max="100" placeholder="请输入比例" />
+                  %
+                  <div class="input-tips">例：设置20%；则 商品销售价格 中20%计算入平台抽成</div>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="24" class="mt20">
+              <el-col :span="24">
+                <el-form-item label="招商员：" prop="platform_commission" label-width="200">
+                  <div class="top-user">
+                    <div class="user-content" v-if="merData.spread">
+                      <div class="user-avatar">
+                        <img :src="merData.spread.avatar || moren" />
+                      </div>
+                      <div class="user-info">
+                        <div class="nickname">{{ merData.spread.nickname }}</div>
+                        <div class="user-id">{{ merData.spread.uid }}</div>
+                      </div>
+                    </div>
+                    <el-button size="small" type="warning" round @click="addChildren(1, true)">切换用户</el-button>
+                  </div>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-form>
+    <!--用户选择-->
+    <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-col>
-           </el-row>
+            </el-form>
           </div>
         </div>
-      </el-tab-pane>
-      <el-tab-pane label="账号信息" name="account">
-        <div class="section">
-          <div class="title">登录账号</div>
-           <el-row :gutter="24" class="mt20">
-            <el-col :span="12">
-              <el-form-item label="商户账号：" prop="mer_account">
-                <el-input
-                  type="text"
-                  v-model="merData.mer_account"
-                  :disabled="!isAdd"
-                  class="selWidth"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="登陆密码：" prop="mer_password">
-                <el-input
-                  type="password"
-                  v-model="merData.mer_password"
-                  :disabled="!isAdd"
-                  class="selWidth"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col v-if="!isAdd" :span="12">
-              <el-form-item label="联系人：" prop="real_name">
-                <el-input
-                  type="text"
-                  placeholder="请填写联系人"
-                  v-model="merData.real_name"
-                  class="selWidth"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="联系电话：" prop="mer_phone">
-                <el-input
-                  placeholder="请填写联系电话"
-                  v-model="merData.mer_phone"
-                  class="selWidth"
-                />
-              </el-form-item>
-            </el-col>
-           </el-row>
+        <!--表格信息-->
+        <el-table v-loading="userListLoading" :data="userTableData.data" 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 label="操作" min-width="150" align="center">
+            <template slot-scope="scope">
+              <el-button type="success" effect="dark" @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>
-        <div class="section">
-          <div class="title">财务帐号</div>
-           <el-row :gutter="24" class="mt20">
-            <el-col :span="12">
-              <el-form-item label="分账商户号：" prop="sub_mchid">
-                <el-input
-                  placeholder="请填写分账商户号"
-                  v-model="merData.sub_mchid"
-                  class="selWidth"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <div class="info-red" style="margin-left: 120px;">当开启自动分账时，每个子商户在微信后台的分账商户号，即特约子商户号</div>
-            </el-col>
-           </el-row>
-        </div>
-      </el-tab-pane>
-      <el-tab-pane label="其他设置" name="integral">
-        <!--<div class="section">
-          <div class="title">平台&商户积分设置</div>
-          <el-row :gutter="24" class="mt20">
-            <el-col :span="24">
-              <el-form-item label="商户积分兑换平台积分比例：" prop="mer_integral_platform_rate" label-width="200">
-                <el-input-number v-model="merData.mer_integral_platform_rate" placeholder="请输入比例" />
-                <div class="input-tips">例：设置为1.5，则1个本商户积分=1.5个平台积分</div>
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="平台积分转换商户积分比例：" prop="mer_integral_merchant_rate" label-width="200">
-                <el-input-number v-model="merData.mer_integral_merchant_rate" placeholder="请输入比例" />
-                <div class="input-tips">例：设置为0.8，则1个平台积分=0.8个本商户积分</div>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </div>-->
-        <div class="section">
-          <div class="title">平台抽成设置</div>
-          <el-row :gutter="24" class="mt20">
-            <el-col :span="24">
-              <el-form-item label="平台抽成比例：" prop="platform_commission" label-width="200">
-                <el-input-number v-model="merData.platform_commission" :step="0.01" :min="0" :max="100" placeholder="请输入比例" /> %
-                <div class="input-tips">例：设置20%；则 商品销售价格 中20%计算入平台抽成</div>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </div>
-      </el-tab-pane>
-  </el-tabs>
-</el-form>
-
+      </el-card>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="userSelectVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 <script>
 
 import { merCategoryListApi } from '@/api/product'
 import { getstoreTypeApi, merchantUpdate, merchantCreate } from "@/api/merchant";
+import {userLstApi} from "@/api/user";
+
 export default {
   props: {
     merData: {
@@ -370,6 +451,7 @@ export default {
       }
     }
     return {
+      moren: require("@/assets/images/f.png"),
       loading: false,
       merId: '',
       direction: 'rtl',
@@ -391,6 +473,20 @@ export default {
         ],
         mer_phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
       },
+      // 用户选择弹框
+      userSelectVisible: false,
+      userListLoading: true,
+      userTableFrom: {
+        page: 1,
+        limit: 20,
+        nickname: '',
+        phone: '',
+        uid: ''
+      },
+      userTableData: {
+        data: [],
+        total: 0,
+      }
     };
   },
   filters: {
@@ -408,7 +504,7 @@ export default {
         this.$message.error(res.message)
       })
     },
-    /**获取店铺类型 */
+    //获取店铺类型
     getStoreType(){
       getstoreTypeApi().then(res => {
         this.storeType = res.data
@@ -416,15 +512,15 @@ export default {
         this.$message.error(res.message)
       })
     },
-    /**修改采集次数 */
+    //修改采集次数
     modifyCopy() {
       this.$emit('modifyCopy')
     },
-    /**重置表单数据 */
+    //重置表单数据
     resetData(){
       this.$refs.merDataField.resetFields();
     },
-    /*提交信息*/
+    //提交信息
     onSubmit(id){
       this.$refs['merDataField'].validate(valid => {
         if (valid) {
@@ -442,7 +538,7 @@ export default {
         }
       });
     },
-    /**创建商户 */
+    //创建商户
     handleCreate(){
       this.$refs['merDataField'].validate((valid) => {
         if (valid) {
@@ -462,14 +558,64 @@ export default {
           if(!this.merData.mer_phone)return this.$message.error('请填写账号信息-联系电话');
         }
       });
-    }
+    },
+    // 用户选择器 - 弹框显示
+    addChildren(){
+      this.getUserList(1);
+      this.userSelectVisible = true;
+    },
+    // 用户选择器 - 弹框关闭
+    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){
+      this.merData.spread_uid = item.uid;
+      this.merData.spread = item;
+      this.closeStaff();
+      this.$forceUpdate();
+    },
+
+
+
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .selWidth{
   width: 100%;
 }
+.container{
+  .selWidth{
+    width: 300px!important;
+    margin-bottom: 10px;
+  }
+}
 .el-tabs--border-card {
   box-shadow: none;
   border-bottom: none;
@@ -548,4 +694,117 @@ export default {
   line-height: 20px;
   color: #9d9d9d;
 }
+.top-user{
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  .user-content{
+    --user-content-height-: 80px;
+
+    height: var(--user-content-height-);
+    width: 100%;
+    margin-right: 30px;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+
+    .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{}
+      .user-id{
+        color: #fff;
+        background-color: #409eff;
+        border-color: #409eff;
+        height: 18px;
+        line-height: 20px;
+        font-size: 13px;
+        padding: 0 5px;
+        border-radius: 5px;
+        width: max-content!important;
+      }
+      .user-id{
+        width: 100%;
+        text-align: left;
+        font-size: 13px;
+        line-height: calc(var(--user-content-height- * 35%));
+      }
+    }
+  }
+}
+.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/merchant/list/handle/merInfo.vue b/src/views/merchant/list/handle/merInfo.vue
index ba8a07a..f18881f 100644
--- a/src/views/merchant/list/handle/merInfo.vue
+++ b/src/views/merchant/list/handle/merInfo.vue
@@ -193,12 +193,27 @@
               <div class="value">{{merData.mer_integral_merchant_rate}} : 1</div>
             </li>
           </ul>-->
-          <div class="title">平台抽成设置</div>
           <ul class="list">
             <li class="item">
               <div>平台抽成比例：</div>
               <div class="value">{{merData.platform_commission}}%</div>
             </li>
+            <li class="item">
+              <div>招商员：</div>
+              <div class="value">
+                <div class="top-user">
+                  <div class="user-content" v-if="merData.spread">
+                    <div class="user-avatar">
+                      <img :src="merData.spread.avatar || moren" />
+                    </div>
+                    <div class="user-info">
+                      <div class="nickname">{{ merData.spread.nickname }}</div>
+                      <div class="user-id">{{ merData.spread.uid }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
           </ul>
         </div>
       </el-tab-pane>
@@ -313,5 +328,65 @@ export default {
 .gary {
   color: #aaa;
 }
+.top-user{
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  .user-content{
+    --user-content-height-: 80px;
 
+    height: var(--user-content-height-);
+    width: 100%;
+    margin-right: 30px;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+
+    .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{}
+      .user-id{
+        color: #fff;
+        background-color: #409eff;
+        border-color: #409eff;
+        height: 18px;
+        line-height: 20px;
+        font-size: 13px;
+        padding: 0 5px;
+        border-radius: 5px;
+        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/merchant/list/index.vue b/src/views/merchant/list/index.vue
index 2f8c787..e895d9e 100644
--- a/src/views/merchant/list/index.vue
+++ b/src/views/merchant/list/index.vue
@@ -108,9 +108,27 @@
       </div>
       <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="small" highlight-current-row class="switchTable">
         <el-table-column prop="mer_id" label="ID" min-width="60" align="center"/>
+        <el-table-column label="招商员" min-width="230" align="center">
+          <template slot-scope="scope">
+            <div class="user-content" v-if="scope.row.spread">
+              <div class="user-avatar">
+                <img :src="scope.row.spread.avatar || moren" />
+              </div>
+              <div class="user-info">
+                <div class="nickname">{{ scope.row.spread.nickname }}</div>
+                <div class="user-id">ID：{{ scope.row.spread.uid }}</div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column prop="mer_name" label="商户名称" min-width="150" align="center"/>
-        <el-table-column prop="real_name" label="商户姓名" min-width="150" align="center"/>
-        <el-table-column prop="status" label="推荐" min-width="100" align="center">
+        <el-table-column prop="real_name" label="联系人" min-width="100" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.real_name }}<br />
+            {{ scope.row.mer_phone }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="推荐" min-width="80" align="center">
           <template slot-scope="scope">
             <el-switch
               v-model="scope.row.is_best"
@@ -123,7 +141,7 @@
             />
           </template>
         </el-table-column>
-         <el-table-column prop="status" label="开启/关闭" min-width="100" align="center">
+        <el-table-column prop="status" label="开启/关闭" min-width="80" align="center">
           <template slot-scope="scope">
             <el-switch
               v-model="scope.row.status"
@@ -137,27 +155,14 @@
           </template>
         </el-table-column>
         <el-table-column prop="create_time" label="创建时间" min-width="150" align="center"/>
-        <el-table-column prop="margin" label="保证金" min-width="150" align="center">
+        <el-table-column prop="margin" label="保证金" min-width="100" align="center">
           <template slot-scope="scope">
             <span>{{scope.row.is_margin == 1 ? '未支付' : scope.row.is_margin == 0 ? '无' : '已支付'}}</span>
 
           </template>
         </el-table-column>
-        <el-table-column prop="sort" label="排序" min-width="100" align="center"/>
-        <el-table-column prop="mark" label="备注" min-width="200" align="center"/>
-        <el-table-column label="招商员" prop="nickname" min-width="280" align="center">
-          <template slot-scope="scope">
-            <div class="user-content" v-if="scope.row.spread">
-              <div class="user-avatar" v-if="scope.row.spread.avatar">
-                <img :src="scope.row.spread.avatar" />
-              </div>
-              <div class="user-info">
-                <div class="nickname">{{ scope.row.spread.nickname }}</div>
-                <div class="user-id">ID：{{ scope.row.spread.uid }}</div>
-              </div>
-            </div>
-          </template>
-        </el-table-column>
+        <el-table-column prop="sort" label="排序" min-width="80" align="center"/>
+        <!--<el-table-column prop="mark" label="备注" min-width="200" align="center"/>-->
         <el-table-column label="操作" min-width="150" fixed="right" align="center">
           <template slot-scope="scope">
             <!-- <router-link
@@ -240,6 +245,7 @@ export default {
   components: { merDetail },
   data() {
     return {
+      moren: require("@/assets/images/f.png"),
       fromList: fromList,
       roterPre: roterPre,
       isChecked: false,
@@ -475,4 +481,7 @@ export default {
     }
   }
 }
+.selWidth{
+  margin-bottom: 10px!important;
+}
 </style>