添加：商户支持编辑招商员

src/views/merchant/list/handle/merEditForm.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <el-form
       ref="merDataField"
       size="small"
@@ -179,7 +180,8 @@
                     v-model="merData.commission_rate"
                     controls-position="right"
                     placeholder="请输入排序"
-                />%
+                  />
+                  %
                 </el-form-item>
               </el-col>
 
@@ -240,7 +242,9 @@
                 <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-button type="text" @click="modifyCopy" style="margin-left: 10px;position:absolute;right: -30px;">
+                      修改
+                    </el-button>
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -329,25 +333,102 @@
             </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="请输入比例" /> %
+                  <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-form>
+          </div>
+        </div>
+        <!--表格信息-->
+        <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>
+      </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>

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>

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="real_name" label="联系人" min-width="100" align="center">
-        <el-table-column prop="status" 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="sort" label="排序" min-width="80" align="center"/>
-        <el-table-column prop="mark" label="备注" min-width="200" 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 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>