添加：酒道馆、烟酒馆、超市、省公司门店、联盟商家支持在管理后台绑定资源股东

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

@@ -1,12 +1,6 @@
 <template>
-  <el-form
+  <div>
-    ref="merDataField"
+    <el-form ref="merDataField" size="small" :rules="ruleValidate" :model="merData" label-width="130px" @submit.native.prevent>
-    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">
@@ -153,17 +147,17 @@
             <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>
+                  <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>
+                  <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>
+                  <span>{{ merData.margin }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="24">
@@ -186,7 +180,8 @@
                     v-model="merData.commission_rate"
                     controls-position="right"
                     placeholder="请输入排序"
-                />%
+                  />
+                  %
                 </el-form-item>
               </el-col>
 
@@ -246,8 +241,10 @@
               <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-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>
@@ -339,6 +336,7 @@
                     <el-option label="供应商" :value="2" />
                     <el-option label="烟酒店" :value="3" />
                     <el-option label="超市" :value="4" />
+                    <el-option label="省公司门店" :value="5" />
                   </el-select>
                 </el-form-item>
               </el-col>
@@ -356,6 +354,26 @@
                 </el-form-item>
               </el-col>
             </el-row>
+            <el-row :gutter="24" class="mt20" v-if="defaultMerchantType != 2">
+              <el-col :span="24">
+                <el-form-item label="资源股东：" label-width="200">
+                  <div class="top-user">
+                    <div class="user-content" v-if="merData.shareholders">
+                      <div class="user-avatar">
+                        <img :src="merData.shareholders.avatar || moren" />
+                      </div>
+                      <div class="user-info">
+                        <div class="nickname">{{ merData.shareholders.nickname }}</div>
+                        <div class="user-id">{{ merData.shareholders.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>
+
+
             <!--<el-row :gutter="24" class="mt20">
               <el-col :span="24">
                 <el-form-item label="商户积分兑换平台积分比例：" prop="mer_integral_platform_rate" label-width="200">
@@ -373,13 +391,71 @@
           </div>
         </el-tab-pane>
       </el-tabs>
-</el-form>
+    </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>
 
+<script>
 import { merCategoryListApi } from '@/api/product'
 import {getstoreTypeApi, merchantUpdate, merchantCreate, merchantListApi, brandListApi} from "@/api/merchant";
+import { userLstApi } from '@/api/user'
 export default {
   props: {
     merData: {
@@ -406,6 +482,7 @@ export default {
       }
     }
     return {
+      moren: require("@/assets/images/f.png"),
       brand_list: {},
       mer_list: {},
       mar_type_name: '商户',
@@ -430,6 +507,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: {},
@@ -555,15 +646,61 @@ export default {
       }).catch(res => {
         this.$message.error(res.message);
       });
-    }
+    },
-
+    // 用户选择器 - 弹框显示
+    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.resource_shareholders_uid = item.uid;
+      this.merData.shareholders = 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;
@@ -642,4 +779,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

@@ -195,11 +195,30 @@
               <div class="value" v-else-if="merData.merchant_type == 2">供应商</div>
               <div class="value" v-else-if="merData.merchant_type == 3">烟酒店</div>
               <div class="value" v-else-if="merData.merchant_type == 4">超市</div>
+              <div class="value" v-else-if="merData.merchant_type == 4">省公司门店</div>
             </li>
             <li class="item" v-if="defaultMerchantType == 1">
               <div>关联商户：</div>
               <div class="value">{{ merData.merShop ? (merData.merShop.mer_name || '') : ''}}</div>
             </li>
+            <li class="item" v-if="defaultMerchantType != 2">
+              <div>资源股东：</div>
+              <div class="value">
+                <div class="top-user">
+                  <div class="user-content" v-if="merData.shareholders">
+                    <div class="user-avatar">
+                      <img :src="merData.shareholders.avatar || moren" />
+                    </div>
+                    <div class="user-info">
+                      <div class="nickname">{{ merData.shareholders.nickname }}</div>
+                      <div class="user-id">{{ merData.shareholders.uid }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
+
+
             <!--<li class="item">
               <div>商户积分兑换平台积分比例：</div>
               <div class="value">
@@ -234,6 +253,7 @@ export default {
   },
   data() {
     return {
+      moren: require("@/assets/images/f.png"),
       mar_type_name: '',
       loading: true,
       merId: '',
@@ -343,5 +363,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>