重构：分销商升级条件 - 界面样式重构

添加：分销商升级条件 - 单个条件支持开关功能
添加：分销商升级条件 - 添加购买商品之一升级条件的相关设置及操作

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({

src/views/promoter/membershipLevel/index.vue

@@ -13,77 +13,43 @@
           </el-form>
         </div>
       </div>
-      <el-table
-        v-loading="listLoading"
-        :data="tableData.data"
-        style="width: 100%"
-        size="mini"
-        class="table"
-        highlight-current-row
-      >
-        <el-table-column
-          prop="user_brokerage_id"
-          label="ID"
-          width="60"
-        />
-        <el-table-column
-          label="图标"
-          min-width="80"
-        >
+      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini" class="table" highlight-current-row>
+        <el-table-column label="等级信息" prop="nickname" min-width="150" align="center">
           <template slot-scope="scope">
-            <div class="demo-image__preview">
-              <el-image
-                :src="scope.row.brokerage_icon || ''"
-                :preview-src-list="[scope.row.brokerage_icon || '']"
-              />
+            <div class="user-content">
+              <div class="user-avatar" v-if="scope.row.brokerage_icon">
+                <img :src="scope.row.brokerage_icon" />
+              </div>
+              <div class="user-info">
+                <div class="nickname">{{ scope.row.brokerage_name }}</div>
+                <div class="user-id">ID：{{ scope.row.user_brokerage_id }}</div>
+              </div>
             </div>
           </template>
         </el-table-column>
-        <el-table-column
-          prop="brokerage_name"
-          label="名称"
-          min-width="120"
-        />
-        <el-table-column
-          label="等级"
-          min-width="100"
-        >
+        <el-table-column label="等级权重" min-width="100" align="center">
           <template slot-scope="scope">
             <span>Lv {{scope.row.brokerage_level}}</span>
           </template>
         </el-table-column>
-        <el-table-column
-          label="任务描述"
-          min-width="160"
-        >
+        <el-table-column label="任务描述" min-width="200" align="center">
           <template slot-scope="scope">
             <div v-for="(item,index) in scope.row.brokerage_rule" :key="index">
-               <div v-if="item.num > 0">
+              <div v-if="item.is_open == 1">
                 <div v-if="index=='spread_user'">推广人数{{ item.num }}人</div>
                 <div v-if="index=='pay_num'">自身下单{{ item.num }}个</div>
                 <div v-if="index=='spread_money'">推广订单金额{{ item.num }}元</div>
                 <div v-if="index=='pay_money'">自身消费金额{{ item.num }}元</div>
                 <div v-if="index=='spread_pay_num'">推广订单{{ item.num }}个</div>
+                <div v-if="index=='many_goods'">购买指定商品之一</div>
               </div>
             </div>
           </template>
         </el-table-column>
-        <el-table-column
-          label="分销员人数"
-          min-width="100"
-          prop="user_num"
-        />
-        <el-table-column
-          prop="extension_one"
-          label="一级返佣上浮比例(%)"
-          min-width="120"
-        />
-        <el-table-column
-          prop="extension_two"
-          label="二级返佣上浮比例(%)"
-          min-width="120"
-        />
-        <el-table-column label="操作" min-width="150" fixed="right" align="center">
+        <el-table-column label="分销员人数" min-width="100" prop="user_num" align="center" />
+        <el-table-column prop="extension_one" label="一级返佣上浮比例(%)" min-width="120" align="center" />
+        <el-table-column prop="extension_two" label="二级返佣上浮比例(%)" min-width="120" align="center" />
+        <el-table-column label="操作" min-width="200" fixed="right" align="center">
           <template slot-scope="scope">
             <el-button type="text" size="small" class="mr10" @click="onDetail(scope.row.user_brokerage_id)">详情</el-button>
             <el-button type="text" size="small" class="mr10" @click="onEdit(scope.row.user_brokerage_id)">编辑</el-button>
@@ -105,17 +71,13 @@
     </el-card>
 
     <!--添加数据-->
-    <el-dialog
-      :title="isEdit ? '编辑分销员等级' : '添加分销员等级'"
-      :visible.sync="dialogVisible"
-      width="900px"
-      :before-close="handleClose"
-    >
+    <el-dialog :title="(isEdit ? '编辑' : '添加') + '分销员等级'" :visible.sync="dialogVisible" width="900px" top="5vh" :before-close="handleClose" :close-on-click-modal="false">
       <el-form ref="formValidate" :model="formValidate" :rules="rules" label-width="170px" v-loading="fullscreenLoading" class="demo-promoterForm">
-         <el-form-item label="等级名称：" required>
+        <el-divider content-position="left">基本设置</el-divider>
+        <el-form-item label="等级名称：" required prop="brokerage_name">
           <el-input v-model="formValidate.brokerage_name" placeholder="请输入等级名称"></el-input>
         </el-form-item>
-        <el-form-item label="等级：" prop="brokerage_level">
+        <el-form-item label="等级权重：" prop="brokerage_level">
           <el-input-number v-model="formValidate.brokerage_level" :min="0" placeholder="请输入任务数量"></el-input-number>
         </el-form-item>
         <el-form-item label="图标：" prop="image">
@@ -128,52 +90,6 @@
             </div>
           </div>
         </el-form-item>
-        <el-form-item label="邀请好友成为下线：">
-          <el-input v-model="formValidate.spread_user_name" placeholder="请输入任务名称"></el-input>
-        </el-form-item>
-        <el-form-item label="">
-          <el-input-number v-model="formValidate.spread_user_num" :min="0" placeholder="请输入任务数量"></el-input-number> 单位：人数
-        </el-form-item>
-        <el-form-item label="">
-          <el-input type="textarea" v-model="formValidate.spread_user_info" maxlength="150" placeholder="请输入任务描述"></el-input>
-        </el-form-item>
-        <el-form-item label="自身消费金额：">
-          <el-input v-model="formValidate.pay_money_name" placeholder="请输入任务名称"></el-input>
-        </el-form-item>
-        <el-form-item label="">
-          <el-input-number v-model="formValidate.pay_money_num" :min="0" placeholder="请输入任务数量"></el-input-number>  单位：元
-        </el-form-item>
-        <el-form-item label="">
-          <el-input type="textarea" v-model="formValidate.pay_money_info" maxlength="150" placeholder="请输入任务描述"></el-input>
-        </el-form-item>
-        <el-form-item label="自身消费订单数：">
-          <el-input v-model="formValidate.pay_num_name" placeholder="请输入任务名称"></el-input>
-        </el-form-item>
-        <el-form-item label="" prop="pay_num_num">
-          <el-input-number v-model="formValidate.pay_num_num" :min="0" :step="1" step-strictly placeholder="请输入任务数量"></el-input-number> 单位：个
-        </el-form-item>
-        <el-form-item label="">
-          <el-input type="textarea" v-model="formValidate.pay_num_info" maxlength="150" placeholder="请输入任务描述"></el-input>
-        </el-form-item>
-        <el-form-item label="下级消费金额：">
-          <el-input v-model="formValidate.spread_money_name" placeholder="请输入任务名称"></el-input>
-        </el-form-item>
-        <el-form-item label="">
-          <el-input-number v-model="formValidate.spread_money_num" :min="0" placeholder="请输入任务数量"></el-input-number> 单位：元
-        </el-form-item>
-        <el-form-item label="">
-          <el-input type="textarea" v-model="formValidate.spread_money_info" maxlength="150" placeholder="请输入任务描述"></el-input>
-        </el-form-item>
-        <el-form-item label="下级消费订单数：" prop="spread_pay_num_name">
-          <el-input v-model="formValidate.spread_pay_num_name" placeholder="请输入任务名称"></el-input>
-        </el-form-item>
-        <el-form-item label="">
-          <el-input-number v-model="formValidate.spread_pay_num_num" :min="0" placeholder="请输入任务数量"></el-input-number> 单位：个
-        </el-form-item>
-        <el-form-item label="">
-          <el-input type="textarea" v-model="formValidate.spread_pay_num_info" maxlength="150" placeholder="请输入任务描述"></el-input>
-        </el-form-item>
-
         <el-form-item prop="extension_one">
           <span slot="label">
             <span>一级返佣(上浮比例)：</span>
@@ -194,18 +110,116 @@
           <el-input-number v-model="formValidate.extension_two" :precision="2" :step="0.1" :min="0" :max="1000" class="selWidth"></el-input-number>
           <span>%</span>
         </el-form-item>
-        <el-form-item>
+        <!--升级任务-->
+        <el-divider content-position="left">升级条件</el-divider>
+        <el-tabs tab-position="left" style="margin-bottom: 22px;" v-model="activeName">
+          <el-tab-pane label="邀请好友成为下线">
+            <el-radio-group v-model.number="formValidate.spread_user.is_open">
+              <el-radio-button label="0">关闭</el-radio-button>
+              <el-radio-button label="1">开启</el-radio-button>
+            </el-radio-group>
+            <template v-if="formValidate.spread_user.is_open == 1">
+              <el-input class="margin-top-10" placeholder="邀请好友成为下线" v-model="formValidate.spread_user.name">
+                <template slot="prepend">任务名称</template>
+              </el-input>
+              <el-input class="margin-top-10" placeholder="请输入任务条件人数" v-model.number="formValidate.spread_user.num">
+                <template slot="prepend">任务条件</template>
+                <template slot="append">人</template>
+              </el-input>
+              <el-input class="margin-top-10" :rows="5" placeholder="任务描述" type="textarea" v-model="formValidate.spread_user.info" resize="none"></el-input>
+            </template>
+          </el-tab-pane>
+          <el-tab-pane label="自身消费金额">
+            <el-radio-group v-model.number="formValidate.pay_money.is_open">
+              <el-radio-button label="0">关闭</el-radio-button>
+              <el-radio-button label="1">开启</el-radio-button>
+            </el-radio-group>
+            <template v-if="formValidate.pay_money.is_open == 1">
+              <el-input class="margin-top-10" placeholder="自身消费金额" v-model="formValidate.pay_money.name">
+                <template slot="prepend">任务名称</template>
+              </el-input>
+              <el-input class="margin-top-10" placeholder="请输入任务条件金额" :step="0.01" v-model.number="formValidate.pay_money.num">
+                <template slot="prepend">任务条件</template>
+                <template slot="append">元</template>
+              </el-input>
+              <el-input class="margin-top-10" :rows="5" placeholder="任务描述" type="textarea" v-model="formValidate.pay_money.info" resize="none"></el-input>
+            </template>
+          </el-tab-pane>
+          <el-tab-pane label="自身消费订单数">
+            <el-radio-group v-model.number="formValidate.pay_num.is_open">
+              <el-radio-button label="0">关闭</el-radio-button>
+              <el-radio-button label="1">开启</el-radio-button>
+            </el-radio-group>
+            <template v-if="formValidate.pay_num.is_open == 1">
+              <el-input class="margin-top-10" placeholder="自身消费订单数" v-model="formValidate.pay_num.name">
+                <template slot="prepend">任务名称</template>
+              </el-input>
+              <el-input class="margin-top-10" placeholder="请输入任务条件数量" v-model.number="formValidate.pay_num.num">
+                <template slot="prepend">任务条件</template>
+                <template slot="append">个</template>
+              </el-input>
+              <el-input class="margin-top-10" :rows="5" placeholder="请输入任务描述" type="textarea" v-model="formValidate.pay_num.info" resize="none"></el-input>
+            </template>
+          </el-tab-pane>
+          <el-tab-pane label="下级消费金额">
+            <el-radio-group v-model.number="formValidate.spread_money.is_open">
+              <el-radio-button label="0">关闭</el-radio-button>
+              <el-radio-button label="1">开启</el-radio-button>
+            </el-radio-group>
+            <template v-if="formValidate.spread_money.is_open == 1">
+              <el-input class="margin-top-10" placeholder="下级消费金额" v-model="formValidate.spread_money.name">
+                <template slot="prepend">任务名称</template>
+              </el-input>
+              <el-input class="margin-top-10" placeholder="请输入任务条件金额" v-model.number="formValidate.spread_money.num">
+                <template slot="prepend">任务条件</template>
+                <template slot="append">元</template>
+              </el-input>
+              <el-input class="margin-top-10" :rows="5" placeholder="请输入任务描述" type="textarea" v-model="formValidate.spread_money.info" resize="none"></el-input>
+            </template>
+          </el-tab-pane>
+          <el-tab-pane label="下级消费订单数">
+            <el-radio-group v-model.number="formValidate.spread_pay_num.is_open">
+              <el-radio-button label="0">关闭</el-radio-button>
+              <el-radio-button label="1">开启</el-radio-button>
+            </el-radio-group>
+            <template v-if="formValidate.spread_pay_num.is_open == 1">
+              <el-input class="margin-top-10" placeholder="下级消费订单数" v-model="formValidate.spread_pay_num.name">
+                <template slot="prepend">任务名称</template>
+              </el-input>
+              <el-input class="margin-top-10" placeholder="请输入任务条件数量" v-model.number="formValidate.spread_pay_num.num">
+                <template slot="prepend">任务条件</template>
+                <template slot="append">个</template>
+              </el-input>
+              <el-input class="margin-top-10" :rows="5" placeholder="请输入任务描述" type="textarea" v-model="formValidate.spread_pay_num.info" resize="none"></el-input>
+            </template>
+          </el-tab-pane>
+          <el-tab-pane label="购买指定商品之一">
+            <el-radio-group v-model.number="formValidate.many_goods.is_open">
+              <el-radio-button label="0">关闭</el-radio-button>
+              <el-radio-button label="1">开启</el-radio-button>
+            </el-radio-group>
+            <template v-if="formValidate.many_goods.is_open == 1">
+              <el-button type="info" @click="addGoods">添加商品</el-button>
+              <div class="many-goods-content">
+                <div class="many-goods-block" v-for="(item,index) in many_goods_list" :key="index">
+                  <img class="many-goods-img" :src="item.image" />
+                  <div class="info">
+                    <div class="info-name">{{item.store_name}}</div>
+                    <div class="info-id">ID：{{item.product_id}}</div>
+                  </div>
+                  <el-button type="danger" icon="el-icon-delete" circle @click="delManyGoods(item)"></el-button>
+                </div>
+              </div>
+            </template>
+          </el-tab-pane>
+        </el-tabs>
+        <el-form-item prop="submit_validate">
           <el-button type="primary" :loading="loading" @click="submitForm('formValidate')">保存</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
     <!--详情-->
-    <el-dialog
-      title="查看详情"
-      :visible.sync="detailDialog"
-      width="700px"
-      :before-close="handleClose"
-    >
+    <el-dialog title="查看详情" :visible.sync="detailDialog" width="700px" :before-close="handleClose">
       <div v-loading="loading">
       <div class="box-container">
         <div class="acea-row">
@@ -215,46 +229,46 @@
         <div class="acea-row">
           <table class="detail-table">
             <tr>
-                <!-- <th>序号</th> -->
                 <th>任务类型</th>
                 <th>任务名称</th>
-                <th>任务数量</th>
+                <th>任务内容</th>
                 <th>任务描述</th>
             </tr>
-            <tr v-if="formValidate.spread_user_num > 0">
-                <!-- <td>1</td> -->
+            <tr v-if="formValidate.spread_user.is_open == 1">
                 <td>邀请好友成为下线</td>
                 <td>邀请好友</td>
-                <td>{{formValidate.spread_user_num}}人</td>
-                <td>{{formValidate.spread_user_info}}</td>
+                <td>下线满{{formValidate.spread_user.num}}人</td>
+                <td>{{formValidate.spread_user.info}}</td>
             </tr>
-            <tr v-if="formValidate.pay_money_num > 0">
-                <!-- <td>2</td> -->
+            <tr v-if="formValidate.pay_money.is_open == 1">
                 <td>自身消费金额</td>
                 <td>分销自购</td>
-                <td>{{formValidate.pay_money_num}}元</td>
-                <td>{{formValidate.pay_money_info}}</td>
+                <td>{{formValidate.pay_money.num}}元</td>
+                <td>{{formValidate.pay_money.info}}</td>
             </tr>
-            <tr v-if="formValidate.pay_num_num > 0">
-                <!-- <td>2</td> -->
+            <tr v-if="formValidate.pay_num.is_open == 1">
                 <td>自身消费订单数</td>
                 <td>分销自购</td>
-                <td>{{formValidate.pay_num_num}}个订单</td>
-                <td>{{formValidate.pay_num_info}}</td>
+                <td>{{formValidate.pay_num.num}}个订单</td>
+                <td>{{formValidate.pay_num.info}}</td>
             </tr>
-            <tr v-if="formValidate.spread_money_num > 0">
-                <!-- <td>2</td> -->
+            <tr v-if="formValidate.spread_money.is_open == 1">
                 <td>下级消费金额</td>
                 <td>推广订单金额</td>
-                <td>{{formValidate.spread_money_num}}元</td>
-                <td>{{formValidate.spread_money_info}}</td>
+                <td>{{formValidate.spread_money.num}}元</td>
+                <td>{{formValidate.spread_money.info}}</td>
             </tr>
-            <tr v-if="formValidate.spread_pay_num_num > 0">
-                <!-- <td>2</td> -->
+            <tr v-if="formValidate.spread_pay_num.is_open == 1">
                 <td>下级消费订单数</td>
                 <td>推广订单数</td>
-                <td>{{formValidate.spread_pay_num_num}}个订单</td>
-                <td>{{formValidate.spread_pay_num_info}}</td>
+                <td>{{formValidate.spread_pay_num.num}}个订单</td>
+                <td>{{formValidate.spread_pay_num.info}}</td>
+            </tr>
+            <tr v-if="formValidate.many_goods.is_open == 1">
+              <td>购买指定商品之一</td>
+              <td>购买商品</td>
+              <td>-</td>
+              <td>-</td>
             </tr>
           </table>
         </div>
@@ -272,18 +286,27 @@
         </div>
       </div>
     </div>
-
     </el-dialog>
+    <!--商品选择器-->
+    <goodsList ref="goodsList" @onSelectList="selectList" />
+
   </div>
 </template>
 
 <script>
-
-import { distributionLevelLst, membershipDataAddApi, distributionDetail, distributionUpdate, distributionDelete } from '@/api/promoter'
+import { distributionLevelLst, membershipDataAddApi, distributionDetail, distributionUpdate, distributionDelete } from '@/api/promoter';
+import goodsList from '@/views/marketing/atmosphere/atmosphereList/goodsList.vue';
+import { selectProductList } from '@/api/marketing'
+import path from 'path'
+import modules from '@/components/mobileConfig'
 export default {
   name: 'brokerageLevel',
+  components: {
+    goodsList,
+  },
   data() {
     return {
+      activeName: '0',
       fullscreenLoading: false,
       cardLists: [],
       isEdit: false,
@@ -305,42 +328,93 @@ export default {
       formValidate: {
         brokerage_name: '',
         brokerage_level: '',
-        spread_user_name: '',
-        spread_user_num: '',
-        spread_user_info: '',
-        pay_money_name: '',
-        pay_money_num: '',
-        pay_money_info: '',
-        pay_num_name: '',
-        pay_num_num: '',
-        pay_num_info: '',
-        spread_money_name: '',
-        spread_money_num: '',
-        spread_money_info: '',
-        spread_pay_num_name: '',
-        spread_pay_num_num: '',
-        spread_pay_num_info: '',
+        brokerage_icon: '',
         extension_one: 0,
-        extension_two: 0
+        extension_two: 0,
+        // 升级条件
+        spread_user: {
+          is_open: 0,
+          name: '',
+          num: '',
+          info: '',
+        },
+        pay_money: {
+          is_open: 0,
+          name: '',
+          num: '',
+          info: '',
+        },
+        pay_num: {
+          is_open: 0,
+          name: '',
+          num: '',
+          info: '',
+        },
+        spread_money: {
+          is_open: 0,
+          name: '',
+          num: '',
+          info: '',
+        },
+        spread_pay_num: {
+          is_open: 0,
+          name: '',
+          num: '',
+          info: '',
+        },
+        many_goods: {
+          is_open: 0,
+          ids: [],
+        },
       },
       rules: {
-        brokerage_name: [
-          { required: true, message: '请输入等级名称', trigger: 'blur' }
-        ],
+        brokerage_name: [{ required: true, message: '请输入等级名称', trigger: 'blur' }],
         brokerage_level: [
-          { required: true, message: '请输入等级', trigger: 'change' }
-        ],
-        brokerage_icon: [
-          { required: true, message: '请上传图标', trigger: 'change' }
-        ],
-        extension_one: [
-          { required: true, message: '请输入一级返佣比例', trigger: 'change' }
-        ],
-        extension_two: [
-          { required: true, message: '请输入二级返佣比例', trigger: 'change' }
-        ],
+          { required: true, message: '请输入等级权重', trigger: 'change' },
+          {
+            validator: (rule, value, callback) => {
+              if(value <= 0) callback(new Error('等级权重必须大于0!'));
 
+              callback()
+            }, trigger: 'blur'
           }
+        ],
+        brokerage_icon: [{ required: true, message: '请上传图标', trigger: 'change' }],
+        extension_one: [{ required: true, message: '请输入一级返佣比例', trigger: 'change' }],
+        extension_two: [{ required: true, message: '请输入二级返佣比例', trigger: 'change' }],
+        /*submit_validate: [{
+          validator: (rule, value, callback) => {
+            let formData = Object.assign({},this.formValidate);
+            // 判断：是否不存在升级条件
+            if (!formData.spread_user_num
+              && !formData.pay_money_num
+              && !formData.pay_num_num
+              && !formData.spread_money_num
+              && !formData.spread_pay_num_num
+              && Object.keys(formData.many_goods.ids).length <= 0) {
+              callback(new Error('请至少设置一个升级任务!'));
+            }
+            // 升级任务是否设置数量
+              if ((formData.spread_user_num && !formData.spread_user_name)
+                || (formData.pay_money_num && !formData.pay_money_name)
+                || (formData.pay_num_num && !formData.pay_num_name)
+                || (formData.spread_money_num && !formData.spread_money_name)
+                || (formData.spread_pay_num_num && !formData.spread_pay_num_name)
+                || (!formData.spread_user_num && formData.spread_user_name)
+                || (!formData.pay_money_num && formData.pay_money_name)
+                || (!formData.pay_num_num && formData.pay_num_name)
+                || (!formData.spread_money_num && formData.spread_money_name)
+                || (!formData.spread_pay_num_num && formData.spread_pay_num_name)) {
+                callback(new Error('请输入相对应的任务或数量'));
+              }
+
+            callback();
+          }, trigger: 'blur'
+        }]*/
+      },
+      // 购买指定商品之一 相关信息
+      many_goods_list: [],
+
     }
   },
   mounted() {
@@ -357,117 +431,110 @@ export default {
     },
     // 添加数据
     groupAdd() {
+      this.activeName = '0';
         this.dialogVisible = true;
         this.isEdit = false;
         this.id= ''
         this.resetData();
     },
     resetData(){
+
+
+
       this.formValidate = {
         brokerage_name: '',
         brokerage_level: '',
-            spread_user_name: '',
-            spread_user_num: '',
-            spread_user_info: '',
-            pay_money_name: '',
-            pay_money_num: '',
-            pay_money_info: '',
-            pay_num_name: '',
-            pay_num_num: '',
-            pay_num_info: '',
-            spread_money_name: '',
-            spread_money_num: '',
-            spread_money_info: '',
-            spread_pay_num_name: '',
-            spread_pay_num_num: '',
-            spread_pay_num_info: '',
         extension_one: 0,
-            extension_two: 0
+        extension_two: 0,
+        spread_user: {
+          is_open: 0,
+          name: '',
+          num: '',
+          info: '',
+        },
+        pay_money: {
+          is_open: 0,
+          name: '',
+          num: '',
+          info: '',
+        },
+        pay_num: {
+          is_open: 0,
+          name: '',
+          num: '',
+          info: '',
+        },
+        spread_money: {
+          is_open: 0,
+          name: '',
+          num: '',
+          info: '',
+        },
+        spread_pay_num: {
+          is_open: 0,
+          name: '',
+          num: '',
+          info: '',
+        },
+        many_goods: {
+          is_open: 0,
+          ids: [],
+        },
       }
     },
     submitForm(name) {
       let formData = this.formValidate
       this.$refs[name].validate(valid => {
         if (valid) {
-              if(!formData.brokerage_name){
-                    return this.$message.error('请输入等级名称！')
-                }
-                if(!formData.spread_user_num && !formData.pay_money_num && !formData.pay_num_num && !formData.spread_money_num && !formData.spread_pay_num_num){
-                    return this.$message.error('请至少输入一个等级任务！')
-                }
-                if((formData.spread_user_num && !formData.spread_user_name) ||
-                   (formData.pay_money_num && !formData.pay_money_name) ||
-                   (formData.pay_num_num && !formData.pay_num_name) ||
-                   (formData.spread_money_num && !formData.spread_money_name) ||
-                   (formData.spread_pay_num_num && !formData.spread_pay_num_name) ||
-                   (!formData.spread_user_num && formData.spread_user_name) ||
-                   (!formData.pay_money_num && formData.pay_money_name) ||
-                   (!formData.pay_num_num && formData.pay_num_name) ||
-                   (!formData.spread_money_num && formData.spread_money_name) ||
-                   (!formData.spread_pay_num_num && formData.spread_pay_num_name)){
-                    return this.$message.error('请输入相对应的任务或数量！')
-                }
-                this.loading = true;
-                let parmas = {
+          this.loading = true
+          let params = {
             brokerage_level: formData.brokerage_level,
             brokerage_name: formData.brokerage_name,
             brokerage_icon: formData.brokerage_icon,
-                    brokerage_rule: {
-                        spread_user:{
-                            name: formData.spread_user_name,
-                            num: formData.spread_user_num ? formData.spread_user_num : 0,
-                            info: formData.spread_user_info
-                        },
-                        pay_money:{
-                            name: formData.pay_money_name,
-                            num: formData.pay_money_num ? formData.pay_money_num : 0,
-                            info: formData.pay_money_info
-                        },
-                        pay_num:{
-                            name: formData.pay_num_name,
-                            num: formData.pay_num_num ? formData.pay_num_num : 0,
-                            info: formData.pay_num_info
-                        },
-                        spread_money:{
-                            name: formData.spread_money_name,
-                            num: formData.spread_money_num ? formData.spread_money_num : 0,
-                            info: formData.spread_money_info
-                        },
-                        spread_pay_num:{
-                            name: formData.spread_pay_num_name,
-                            num: formData.spread_pay_num_num ? formData.spread_pay_num_num : 0,
-                            info: formData.spread_pay_num_info
-                        }
-                    },
             extension_one: formData.extension_one,
-                    extension_two: formData.extension_two
+            extension_two: formData.extension_two,
+            brokerage_rule: {
+              spread_user: formData.spread_user || {},
+              pay_money: formData.pay_money || {},
+              pay_num: formData.pay_num || {},
+              spread_money: formData.spread_money || {},
+              spread_pay_num: formData.spread_pay_num || {},
+              many_goods: formData.many_goods || {},
             }
-                this.id ? distributionUpdate(this.id, parmas).then(res => {
+          };
+          // 提交内容
+          console.log('提交信息',params);
+          if(this.id){
+            // 修改数据
+            distributionUpdate(this.id, params).then(res => {
               this.loading = false
               this.$message.success(res.message)
-                     this.dialogVisible = false;
+              this.dialogVisible = false
               this.getList('')
-                     this.resetData();
+              this.resetData()
             }).catch((res) => {
               this.$message.error(res.message)
               this.loading = false
-                }) :
-                membershipDataAddApi(parmas).then(res => {
+            })
+          }else{
+            // 添加数据
+            membershipDataAddApi(params).then(res => {
               this.loading = false
               this.$message.success(res.message)
-                     this.dialogVisible = false;
+              this.dialogVisible = false
               this.getList('')
-                     this.resetData();
+              this.resetData()
             }).catch((res) => {
               this.$message.error(res.message)
               this.loading = false
             })
           }
-
+        }
       })
     },
     // 编辑
     onEdit(id) {
+      this.activeName = '0';
         this.id = id;
         this.isEdit = true;
         this.dialogVisible = true
@@ -475,30 +542,50 @@ export default {
     },
     getDetail(id){
       distributionDetail(id).then(res => {
-        this.loading = false;
-        let info = res.data;
+        this.loading = false
+        let info = res.data
         this.formValidate = {
-            brokerage_icon: info.brokerage_icon,
-            brokerage_level: info.brokerage_level,
           brokerage_name: info.brokerage_name,
+          brokerage_level: info.brokerage_level,
+          brokerage_icon: info.brokerage_icon,
           extension_one: info.extension_one,
           extension_two: info.extension_two,
-            pay_money_name: info.brokerage_rule.pay_money.name,
-            pay_money_num: info.brokerage_rule.pay_money.num,
-            pay_money_info: info.brokerage_rule.pay_money.info,
-            pay_num_name: info.brokerage_rule.pay_num.name,
-            pay_num_num: info.brokerage_rule.pay_num.num,
-            pay_num_info: info.brokerage_rule.pay_num.info,
-            spread_money_name: info.brokerage_rule.spread_money.name,
-            spread_money_num: info.brokerage_rule.spread_money.num,
-            spread_money_info: info.brokerage_rule.spread_money.info,
-            spread_pay_num_name: info.brokerage_rule.spread_pay_num.name,
-            spread_pay_num_num: info.brokerage_rule.spread_pay_num.num,
-            spread_pay_num_info: info.brokerage_rule.spread_pay_num.info,
-            spread_user_name: info.brokerage_rule.spread_user.name,
-            spread_user_num: info.brokerage_rule.spread_user.num,
-            spread_user_info: info.brokerage_rule.spread_user.info
+          pay_money: {
+            is_open: info.brokerage_rule.pay_money.is_open || 0,
+            name: info.brokerage_rule.pay_money.name || '',
+            num: info.brokerage_rule.pay_money.num || 0,
+            info: info.brokerage_rule.pay_money.info || '',
+          },
+          pay_num: {
+            is_open: info.brokerage_rule.pay_num.is_open || 0,
+            name: info.brokerage_rule.pay_num.name || '',
+            num: info.brokerage_rule.pay_num.num || 0,
+            info: info.brokerage_rule.pay_num.info || '',
+          },
+          spread_money: {
+            is_open: info.brokerage_rule.spread_money.is_open || 0,
+            name: info.brokerage_rule.spread_money.name || '',
+            num: info.brokerage_rule.spread_money.num || 0,
+            info: info.brokerage_rule.spread_money.info || '',
+          },
+          spread_pay_num: {
+            is_open: info.brokerage_rule.spread_pay_num.is_open || 0,
+            name: info.brokerage_rule.spread_pay_num.name || '',
+            num: info.brokerage_rule.spread_pay_num.num || 0,
+            info: info.brokerage_rule.spread_pay_num.info || '',
+          },
+          spread_user: {
+            is_open: info.brokerage_rule.spread_user.is_open || 0,
+            name: info.brokerage_rule.spread_user.name || '',
+            num: info.brokerage_rule.spread_user.num || 0,
+            info: info.brokerage_rule.spread_user.info || '',
+          },
+          many_goods: info.brokerage_rule.many_goods || {
+            is_open: info.brokerage_rule.spread_user.is_open || 0,
+            ids: [],
           }
+        }
+        if(Object.keys(this.formValidate.many_goods.ids).length > 0) this.getGoodsList();
       }).catch((res) => {
          this.$message.error(res.message)
          this.loading = false;
@@ -527,7 +614,6 @@ export default {
       this.dialogVisible = false
       this.detailDialog = false
     },
-
     selectChange(tab) {
       this.tableFrom.date = tab
       this.timeVal = []
@@ -561,7 +647,58 @@ export default {
     handleSizeChange(val) {
       this.tableFrom.limit = val
       this.getList('')
+    },
+    // 商品选择 - 显示弹框
+    addGoods() {
+      this.$refs.goodsList.dialogVisible = true;
+    },
+    // 商品选择 - 选择完商品确定方法
+    selectList(spu_ids) {
+      // 如果spu_ids有长度，就push商品id，并且去重以后重新请求列表
+      let manyGoodsIds = this.formValidate.many_goods.ids || [];
+      if (Object.keys(manyGoodsIds).length > 0) {
+        manyGoodsIds.push(...spu_ids);
+        manyGoodsIds = [...new Set(manyGoodsIds)];
+        this.formValidate.many_goods.ids = manyGoodsIds;
+      } else {
+        this.$set(this.formValidate.many_goods, 'ids', spu_ids);
       }
+      this.getGoodsList('');
+    },
+    // 商品选择 - 获取商品列表
+    getGoodsList() {
+      if(Object.keys(this.formValidate.many_goods.ids).length <= 0){
+        this.many_goods_list = {};
+        return false;
+      }
+      let params = {
+        spu_ids: this.formValidate.many_goods.ids,
+        page: 1,
+        limit: 999
+      };
+      selectProductList(params).then((res) => {
+        this.many_goods_list = res.data.list;
+      }).catch((res) => {
+        this.$message.error(res.message)
+      })
+    },
+    // 商品选择 - 删除商品
+    delManyGoods(item){
+      let ids = Object.assign({},this.formValidate.many_goods.ids);
+      Object.values(ids).some(function(v,k){
+        if(Number(v) === Number(item.spu_id)) {
+          delete ids[k];
+          return true;
+        }
+      });
+
+      this.formValidate.many_goods.ids = Object.values(ids);
+      this.getGoodsList();
+    },
+
+
+
+
   }
 }
 </script>
@@ -584,9 +721,11 @@ export default {
   line-height: 30px;
   border: 1px solid #e6ebf5;
   border-bottom: none;
+
   td, th {
     border-bottom: 1px solid #e6ebf5;
     border-right: 1px solid #e6ebf5;
+
     &:last-child {
       border-right: none;
     }
@@ -630,4 +769,89 @@ export default {
   font-weight: bold;
   padding-bottom: 2px;
 }
+.margin-top-10{
+  margin-top: 10px!important;
+}
+.many-goods-content{
+  width: 100%;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  align-items: flex-start;
+  .many-goods-block{
+    width: calc((100% - (20px * 2)) / 2);
+    margin: 10px;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);//rgba(0,0,0,.1)
+    padding: 10px;
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    .many-goods-img{
+      width: 80px;
+      height: 80px;
+    }
+    .info{
+      width: calc(100% - 90px);
+      font-size: 15px;
+      font-weight: bold;
+      padding: 0 10px;
+      .info-name{
+        height: 50px;
+        line-height: 25px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+      }
+      .info-id{}
+    }
+  }
+}
+.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{
+    height: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: flex-start;
+    .nickname{
+      font-size: 15px;
+      font-weight: bold;
+      line-height: calc(var(--user-content-height- * 65%));
+    }
+    .user-id{
+      font-size: 13px;
+      line-height: calc(var(--user-content-height- * 35%));
+    }
+  }
+}
 </style>