From 5ba8e8e07ba009a2fd322c149f1e27010a9923e4 Mon Sep 17 00:00:00 2001
From: wuhui_zzw <1760308791@qq.com>
Date: Wed, 27 Mar 2024 15:38:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E5=88=86=E9=94=80?=
 =?UTF-8?q?=E5=95=86=E7=AD=89=E7=BA=A7=E7=BC=96=E8=BE=91=E3=80=81=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E8=B4=AD=E4=B9=B0=E6=8C=87=E5=AE=9A=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E4=B9=8B=E4=B8=80=E6=88=90=E4=B8=BA=E5=88=86=E9=94=80=E5=95=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/promoter/membershipLevel/index.vue | 1034 +++++++++++-------
 1 file changed, 629 insertions(+), 405 deletions(-)

diff --git a/src/views/promoter/membershipLevel/index.vue b/src/views/promoter/membershipLevel/index.vue
index 72af809..9c65ea7 100644
--- a/src/views/promoter/membershipLevel/index.vue
+++ b/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"
-        >
-        <template slot-scope="scope">
-           <span>Lv {{scope.row.brokerage_level}}</span>
+        <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"
-        >
-         <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="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>
+        <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.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,75 +71,25 @@
     </el-card>
 
     <!--添加数据-->
-    <el-dialog
-      :title="isEdit ? '编辑分销员等级' : '添加分销员等级'"
-      :visible.sync="dialogVisible"
-      width="900px"
-      :before-close="handleClose"
-    >
-     <el-form ref="formValidate" :model="formValidate" :rules="rules" label-width="170px" v-loading="fullscreenLoading" class="demo-promoterForm">
-         <el-form-item label="等级名称：" required>
+    <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-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">
-            <div class="upLoadPicBox" @click="modalPicTap('1')">
-                <div v-if="formValidate.brokerage_icon" class="pictrue">
-                    <img :src="formValidate.brokerage_icon">
-                </div>
-                <div v-else class="upLoad">
-                    <i class="el-icon-camera cameraIconfont" />
-                </div>
+          <div class="upLoadPicBox" @click="modalPicTap('1')">
+            <div v-if="formValidate.brokerage_icon" class="pictrue">
+              <img :src="formValidate.brokerage_icon">
             </div>
+            <div v-else class="upLoad">
+              <i class="el-icon-camera cameraIconfont" />
+            </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,96 +110,203 @@
           <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">
-          <div class="list sp"><label class="name">等级名称：</label>{{ formValidate.brokerage_name }}</div>
-        </div>
-        <div class="title" style="margin-top: 20px;">分销任务：</div>
-        <div class="acea-row">
-          <table class="detail-table">
-            <tr>
-                <!-- <th>序号</th> -->
+        <div class="box-container">
+          <div class="acea-row">
+            <div class="list sp"><label class="name">等级名称：</label>{{ formValidate.brokerage_name }}</div>
+          </div>
+          <div class="title" style="margin-top: 20px;">分销任务：</div>
+          <div class="acea-row">
+            <table class="detail-table">
+              <tr>
                 <th>任务类型</th>
                 <th>任务名称</th>
-                <th>任务数量</th>
+                <th>任务内容</th>
                 <th>任务描述</th>
-            </tr>
-            <tr v-if="formValidate.spread_user_num > 0">
-                <!-- <td>1</td> -->
+              </tr>
+              <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>
-            </tr>
-            <tr v-if="formValidate.pay_money_num > 0">
-                <!-- <td>2</td> -->
+                <td>下线满{{formValidate.spread_user.num}}人</td>
+                <td>{{formValidate.spread_user.info}}</td>
+              </tr>
+              <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>
-            </tr>
-            <tr v-if="formValidate.pay_num_num > 0">
-                <!-- <td>2</td> -->
+                <td>{{formValidate.pay_money.num}}元</td>
+                <td>{{formValidate.pay_money.info}}</td>
+              </tr>
+              <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>
-            </tr>
-            <tr v-if="formValidate.spread_money_num > 0">
-                <!-- <td>2</td> -->
+                <td>{{formValidate.pay_num.num}}个订单</td>
+                <td>{{formValidate.pay_num.info}}</td>
+              </tr>
+              <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>
-            </tr>
-            <tr v-if="formValidate.spread_pay_num_num > 0">
-                <!-- <td>2</td> -->
+                <td>{{formValidate.spread_money.num}}元</td>
+                <td>{{formValidate.spread_money.info}}</td>
+              </tr>
+              <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>
-            </tr>
-          </table>
-        </div>
-        <div class="acea-row">
-          <div class="list sp"><label class="name">等级：</label>{{ formValidate.brokerage_level }}级</div>
-          <div class="list sp100 image">
-            <label class="name">图标：</label>
-            <img
-              style="max-width: 150px; height: 80px;"
-              :src="formValidate.brokerage_icon"
-            />
+                <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>
+          <div class="acea-row">
+            <div class="list sp"><label class="name">等级：</label>{{ formValidate.brokerage_level }}级</div>
+            <div class="list sp100 image">
+              <label class="name">图标：</label>
+              <img
+                style="max-width: 150px; height: 80px;"
+                :src="formValidate.brokerage_icon"
+              />
+            </div>
+            <div class="list sp100"><label class="name">一级返佣(上浮比例)：</label>{{ formValidate.extension_one }}%</div>
+            <div class="list sp100"><label class="name">二级返佣(上浮比例)：</label>{{ formValidate.extension_two }}%</div>
           </div>
-          <div class="list sp100"><label class="name">一级返佣(上浮比例)：</label>{{ formValidate.extension_one }}%</div>
-          <div class="list sp100"><label class="name">二级返佣(上浮比例)：</label>{{ formValidate.extension_two }}%</div>
         </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,151 +431,164 @@ export default {
     },
     // 添加数据
     groupAdd() {
-        this.dialogVisible = true;
-        this.isEdit = false;
-        this.id= ''
-        this.resetData();
+      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
+
+
+
+      this.formValidate = {
+        brokerage_name: '',
+        brokerage_level: '',
+        extension_one: 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 = {
-                    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
-                }
-                this.id ? distributionUpdate(this.id, parmas).then(res => {
-                     this.loading = false
-                     this.$message.success(res.message)
-                     this.dialogVisible = false;
-                     this.getList('')
-                     this.resetData();
-                }).catch((res) => {
-                    this.$message.error(res.message)
-                    this.loading = false
-                }) :
-                membershipDataAddApi(parmas).then(res => {
-                    this.loading = false
-                     this.$message.success(res.message)
-                     this.dialogVisible = false;
-                     this.getList('')
-                     this.resetData();
-                }).catch((res) => {
-                    this.$message.error(res.message)
-                    this.loading = false
-                })
+    submitForm(name) {
+      let formData = this.formValidate
+      this.$refs[name].validate(valid => {
+        if (valid) {
+          this.loading = true
+          let params = {
+            brokerage_level: formData.brokerage_level,
+            brokerage_name: formData.brokerage_name,
+            brokerage_icon: formData.brokerage_icon,
+            extension_one: formData.extension_one,
+            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 || {},
             }
-
-        })
+          };
+          // 提交内容
+          console.log('提交信息',params);
+          if(this.id){
+            // 修改数据
+            distributionUpdate(this.id, params).then(res => {
+              this.loading = false
+              this.$message.success(res.message)
+              this.dialogVisible = false
+              this.getList('')
+              this.resetData()
+            }).catch((res) => {
+              this.$message.error(res.message)
+              this.loading = false
+            })
+          }else{
+            // 添加数据
+            membershipDataAddApi(params).then(res => {
+              this.loading = false
+              this.$message.success(res.message)
+              this.dialogVisible = false
+              this.getList('')
+              this.resetData()
+            }).catch((res) => {
+              this.$message.error(res.message)
+              this.loading = false
+            })
+          }
+        }
+      })
     },
     // 编辑
     onEdit(id) {
-        this.id = id;
-        this.isEdit = true;
-        this.dialogVisible = true
-        this.getDetail(id);
+      this.activeName = '0';
+      this.id = id;
+      this.isEdit = true;
+      this.dialogVisible = true
+      this.getDetail(id);
     },
     getDetail(id){
-        distributionDetail(id).then(res => {
-        this.loading = false;
-        let info = res.data;
+      distributionDetail(id).then(res => {
+        this.loading = false
+        let info = res.data
         this.formValidate = {
-            brokerage_icon: info.brokerage_icon,
-            brokerage_level: info.brokerage_level,
-            brokerage_name: info.brokerage_name,
-            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
+          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: {
+            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;
+        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,73 +647,211 @@ 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>
 
 <style scoped lang="scss">
-  .selWidth{
-    width: 300px;
+.selWidth {
+  width: 300px;
+}
+.el-dropdown-link {
+  cursor: pointer;
+  color: #409EFF;
+  font-size: 12px;
+}
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+.detail-table {
+  width: 500px;
+  text-align: center;
+  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;
+    }
   }
-  .el-dropdown-link {
-    cursor: pointer;
-    color: #409EFF;
-    font-size: 12px;
-  }
-  .el-icon-arrow-down {
-    font-size: 12px;
-  }
-  .detail-table{
-      width: 500px;
-      text-align: center;
-      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;
-        }
+}
+.box-container {
+  overflow: hidden;
+}
+.box-container .list {
+  float: left;
+  line-height: 40px;
+}
+.box-container .sp {
+  width: 50%;
+}
+.box-container .sp3 {
+  width: 33.3333%;
+}
+.box-container .sp100 {
+  width: 100%;
+}
+.box-container .list .name {
+  display: inline-block;
+  color: #606266;
+}
+.box-container .list .blue {
+  color: #437FFD;
+}
+.box-container .list.image {
+  margin: 20px 0;
+  position: relative;
+}
+.box-container .list.image img {
+  position: absolute;
+  top: -20px;
+}
+.title {
+  margin-bottom: 16px;
+  color: #606266;
+  font-size: 14px;
+  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{}
+    }
   }
-  .box-container {
-    overflow: hidden;
+}
+.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;
+    }
   }
-   .box-container .list {
-    float: left;
-    line-height: 40px;
+  .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%));
     }
-    .box-container .sp {
-    width: 50%;
-    }
-    .box-container .sp3 {
-    width: 33.3333%;
-    }
-    .box-container .sp100 {
-    width: 100%;
-    }
-    .box-container .list .name {
-    display: inline-block;
-    color: #606266;
-    }
-    .box-container .list .blue {
-    color: #437FFD;
-    }
-    .box-container .list.image {
-    margin: 20px 0;
-    position: relative;
-    }
-    .box-container .list.image img {
-    position: absolute;
-    top: -20px;
-    }
-    .title{
-    margin-bottom: 16px;
-    color: #606266;
-    font-size: 14px;
-    font-weight: bold;
-    padding-bottom: 2px;
+    .user-id{
+      font-size: 13px;
+      line-height: calc(var(--user-content-height- * 35%));
     }
+  }
+}
 </style>