From 5e3caa157331324be4771658bdadd0dfd2ab21a2 Mon Sep 17 00:00:00 2001
From: THK3121 <thk121969318@163.com>
Date: Mon, 5 Jun 2023 18:19:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=9C=88=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/merchant/list/index.vue | 893 +++++++++++++++++-------------
 1 file changed, 505 insertions(+), 388 deletions(-)

diff --git a/src/views/merchant/list/index.vue b/src/views/merchant/list/index.vue
index 38d6804..3aef72d 100644
--- a/src/views/merchant/list/index.vue
+++ b/src/views/merchant/list/index.vue
@@ -35,7 +35,12 @@
                 placeholder="请输入店铺关键字/店铺名/联系电话"
                 class="selWidth"
               >
-                <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" />
+                <el-button
+                  slot="append"
+                  icon="el-icon-search"
+                  class="el-button-solt"
+                  @click="getList(1)"
+                />
               </el-input>
             </el-form-item>
             <el-form-item label="商户类别：">
@@ -50,19 +55,19 @@
                 <el-option label="非自营" value="0" />
               </el-select>
             </el-form-item>
-             <el-form-item label="商户分类：">
-                <el-select
+            <el-form-item label="商户分类：">
+              <el-select
                 v-model="tableFrom.category_id"
                 clearable
                 placeholder="请选择"
                 class="selWidth"
                 @change="getList(1)"
               >
-                 <el-option
-                    v-for="item in merCateList"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
+                <el-option
+                  v-for="item in merCateList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
                 />
               </el-select>
             </el-form-item>
@@ -74,15 +79,37 @@
                 class="selWidth"
                 @change="getList(1)"
               >
-                 <el-option
-                    v-for="item in storeType"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
+                <el-option
+                  v-for="item in storeType"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
                 />
               </el-select>
             </el-form-item>
-            <el-tabs v-if="headeNum.length > 0" v-model="tableFrom.status" @tab-click="getList(1),getHeadNum()">
+            <el-form-item label="店铺商圈：">
+              <!-- <el-select
+                v-model="tableFrom.type_id"
+                clearable
+                placeholder="请选择"
+                class="selWidth"
+                @change="getList(1)"
+              >
+                <el-option
+                  v-for="item in form.options"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select> -->
+              <el-cascader    v-model="tableFrom.area_id" :options="form.options" @change="getList(1),handleChange1"></el-cascader>
+              <el-cascader    v-model="tableFrom.street_id" :options="form.options1" @change="getList(1),handleChange2"></el-cascader>
+            </el-form-item>
+            <el-tabs
+              v-if="headeNum.length > 0"
+              v-model="tableFrom.status"
+              @tab-click="getList(1),getHeadNum()"
+            >
               <el-tab-pane
                 v-for="(item,index) in headeNum"
                 :key="index"
@@ -140,11 +167,10 @@
         <el-table-column prop="margin" label="保证金" min-width="150">
           <template slot-scope="scope">
             <span>{{scope.row.is_margin == 1 ? '未支付' : scope.row.is_margin == 0 ? '无' : '已支付'}}</span>
-            
           </template>
         </el-table-column>
         <el-table-column prop="sort" label="排序" min-width="100" />
-        
+
         <el-table-column prop="status" label="开启/关闭" min-width="100">
           <template slot-scope="scope">
             <el-switch
@@ -165,7 +191,7 @@
               :to="{path: roterPre+ '/merchant/list/reconciliation/' + scope.row.mer_id + '/1' }"
             >
               <el-button type="text" size="small" class="mr10">对账</el-button>
-            </router-link> -->
+            </router-link>-->
             <el-button
               v-if="tableFrom.status === '1'"
               type="text"
@@ -196,7 +222,7 @@
               type="text"
               size="small"
               @click="onDeduct(scope.row.mer_id)"
-            >扣除保证金</el-button> -->
+            >扣除保证金</el-button>-->
           </template>
         </el-table-column>
       </el-table>
@@ -214,88 +240,170 @@
     </el-card>
     <!-- 添加商户弹出层 -->
     <el-dialog title="添加商品" :visible.sync="popFormVisible" @close="close('form')">
-  <el-form :model="form" :rules="rules" ref="form">
-    <el-form-item label="商户名称" :label-width="formLabelWidth" prop="mer_name">
-      <el-input v-model="form.mer_name" autocomplete="off" placeholder="请输入商户名称"></el-input>
-    </el-form-item>
-    <el-form-item label="商户分类" :label-width="formLabelWidth" prop="category_id">
-      <el-select v-model="form.category_id" placeholder="请选择商户分类">
-        <el-option :label="item.label" :value="item.value" v-for="item in merCateList" :key="item.value"></el-option>
-      </el-select>
-    </el-form-item>
-    <el-form-item label="店铺类型" :label-width="formLabelWidth" prop="type_id">
-      <el-select v-model="form.type_id" placeholder="请选择店铺类型">
-        <el-option :label="item.label" :value="item.value" v-for="item in storeType" :key="item.value"></el-option>
-      </el-select>
-    </el-form-item>
-    <el-form-item label="商圈" :label-width="formLabelWidth" >
-        <el-cascader v-model="form.info"  :options="form.options"  @change="handleChange1" ></el-cascader>
-        <el-cascader v-model="form.info1" :options="form.options1"   @change="handleChange2" ></el-cascader>
-        <el-cascader v-model="form.info2  "  :options="form.options2"  @change="handleChange3($event,form.options2)"  ></el-cascader>
-    </el-form-item>
-    <el-form-item label="商户账号" :label-width="formLabelWidth" prop="mer_account">
-      <el-input v-model="form.mer_account" autocomplete="off" placeholder="请输入商户账号" :disabled="!add"></el-input>
-    </el-form-item>
-    <el-form-item label="登陆密码" :label-width="formLabelWidth" prop="mer_password">
-      <el-input v-model="form.mer_password" autocomplete="off" placeholder="请输入登陆密码" :disabled="!add"></el-input>
-    </el-form-item>
-    <div class="dis">
-    <el-form-item label="已支付的保证金" :label-width="formLabelWidth" class="mer_phone">
-      <el-input v-model="form.paid_margin" style="width:200px"  autocomplete="off" placeholder="请输入已支付的保证金"></el-input>
-    </el-form-item>
-    <el-form-item label="自动扣除保证金比例" :label-width="formLabelWidth" prop="commission_rate">
-      <el-input v-model="form.auto_margin_rate" style="width:200px"  autocomplete="off" ></el-input>
-    </el-form-item>
-   </div>
-    <el-form-item label="商户姓名" :label-width="formLabelWidth" prop="real_name">
-      <el-input v-model="form.real_name" autocomplete="off" placeholder="请输入商户姓名"></el-input>
-    </el-form-item>
-   <div class="dis">
-    <el-form-item label="商户手机号" :label-width="formLabelWidth" prop="mer_phone" class="mer_phone">
-      <el-input v-model="form.mer_phone"  autocomplete="off" placeholder="请输入商户手机号"></el-input>
-    </el-form-item>
-    <el-form-item label="手续费(%)" :label-width="formLabelWidth" prop="commission_rate">
-      <el-input-number v-model="form.commission_rate" @change="handleChange" :min="0" :max="10" label="描述文字" aria-placeholder="请输入手续费" ></el-input-number>
-    </el-form-item>
-   </div>
-    <el-form-item label="商户关键字" :label-width="formLabelWidth" prop="mer_keyword">
-      <el-input v-model="form.mer_keyword" autocomplete="off" placeholder="请输入商户关键字"></el-input>
-    </el-form-item>
-    <el-form-item label="商户地址" :label-width="formLabelWidth" prop="mer_address">
-      <el-input v-model="form.mer_address" autocomplete="off" placeholder="请输入商户地址"></el-input>  
-    </el-form-item>
-    <el-form-item label="微信分账商户号" :label-width="formLabelWidth" prop="sub_mchid">
-      <el-input v-model="form.sub_mchid" autocomplete="off" placeholder="请输入微信分账商户号"></el-input>
-    </el-form-item>
-    <el-form-item label="备注" :label-width="formLabelWidth" prop="mark">
-      <el-input  type="textarea" placeholder="请输入备注"  maxlength="130" v-model="form.mark" autocomplete="off"></el-input>
-    </el-form-item>
-    <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
-      <el-input-number v-model="form.sort" @change="handleChange" :min="0" :max="10"  ></el-input-number>
-    </el-form-item>
-   <div class="switch_btn">
-    <el-form-item class="mini_btn" label="直播间审核"  prop="value1" :label-width="formLabelWidth">
-      <el-switch v-model="form.value1" active-color='#3390ff' active-text="开" inactive-text="关" inactive-color="#DCDFE6" > </el-switch>
-    </el-form-item>
-    <el-form-item class="mini_btn" label="产品审核" prop="value2" :label-width="formLabelWidth">
-      <el-switch v-model="form.value2" active-color='#3390ff' active-text="开" inactive-text="关" inactive-color="#DCDFE6" > </el-switch>
-    </el-form-item>
-    <el-form-item class="mini_btn" label="直播间商品审核" prop="value3" :label-width="formLabelWidth">
-      <el-switch v-model="form.value3" active-color='#3390ff' active-text="开" inactive-text="关" inactive-color="#DCDFE6"> </el-switch>
-    </el-form-item>
-    <el-form-item class="mini_btn" label="是否推荐" prop="value4" :label-width="formLabelWidth">
-      <el-switch v-model="form.value4" active-color='#3390ff' active-text="开" inactive-text="关" inactive-color="#DCDFE6"> </el-switch>
-    </el-form-item>
-    <el-form-item class="mini_btn" label="是否自营" prop="value5" :label-width="formLabelWidth">
-      <el-switch v-model="form.value5" active-color='#3390ff' active-text="开" inactive-text="关" inactive-color="#DCDFE6"> </el-switch>
-    </el-form-item>
-   </div>
-  </el-form>
-  <div slot="footer" class="dialog-footer">
-    <el-button @click="resetForm('form')" v-if="add">重 置</el-button>
-    <el-button type="primary" @click="submitForm('form')">确 定</el-button>
-  </div>
-</el-dialog>
+      <el-form :model="form" :rules="rules" ref="form">
+        <el-form-item label="商户名称" :label-width="formLabelWidth" prop="mer_name">
+          <el-input v-model="form.mer_name" autocomplete="off" placeholder="请输入商户名称"></el-input>
+        </el-form-item>
+        <el-form-item label="商户分类" :label-width="formLabelWidth" prop="category_id">
+          <el-select v-model="form.category_id" placeholder="请选择商户分类">
+            <el-option
+              :label="item.label"
+              :value="item.value"
+              v-for="item in merCateList"
+              :key="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="店铺类型" :label-width="formLabelWidth" prop="type_id">
+          <el-select v-model="form.type_id" placeholder="请选择店铺类型">
+            <el-option
+              :label="item.label"
+              :value="item.value"
+              v-for="item in storeType"
+              :key="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商圈" :label-width="formLabelWidth">
+          <el-cascader v-model="form.info" :options="form.options" @change="handleChange1"></el-cascader>
+          <el-cascader v-model="form.info1" :options="form.options1" @change="handleChange2"></el-cascader>
+          <el-cascader
+            v-model="form.info2  "
+            :options="form.options2"
+            @change="handleChange3($event,form.options2)"
+          ></el-cascader>
+        </el-form-item>
+        <el-form-item label="商户账号" :label-width="formLabelWidth" prop="mer_account">
+          <el-input
+            v-model="form.mer_account"
+            autocomplete="off"
+            placeholder="请输入商户账号"
+            :disabled="!add"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="登陆密码" :label-width="formLabelWidth" prop="mer_password">
+          <el-input
+            v-model="form.mer_password"
+            autocomplete="off"
+            placeholder="请输入登陆密码"
+            :disabled="!add"
+          ></el-input>
+        </el-form-item>
+        <div class="dis">
+          <el-form-item label="已支付的保证金" :label-width="formLabelWidth" class="mer_phone">
+            <el-input
+              v-model="form.paid_margin"
+              style="width:200px"
+              autocomplete="off"
+              placeholder="请输入已支付的保证金"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="自动扣除保证金比例" :label-width="formLabelWidth" prop="commission_rate">
+            <el-input v-model="form.auto_margin_rate" style="width:200px" autocomplete="off"></el-input>
+          </el-form-item>
+        </div>
+        <el-form-item label="商户姓名" :label-width="formLabelWidth" prop="real_name">
+          <el-input v-model="form.real_name" autocomplete="off" placeholder="请输入商户姓名"></el-input>
+        </el-form-item>
+        <div class="dis">
+          <el-form-item
+            label="商户手机号"
+            :label-width="formLabelWidth"
+            prop="mer_phone"
+            class="mer_phone"
+          >
+            <el-input v-model="form.mer_phone" autocomplete="off" placeholder="请输入商户手机号"></el-input>
+          </el-form-item>
+          <el-form-item label="手续费(%)" :label-width="formLabelWidth" prop="commission_rate">
+            <el-input-number
+              v-model="form.commission_rate"
+              @change="handleChange"
+              :min="0"
+              :max="10"
+              label="描述文字"
+              aria-placeholder="请输入手续费"
+            ></el-input-number>
+          </el-form-item>
+        </div>
+        <el-form-item label="商户关键字" :label-width="formLabelWidth" prop="mer_keyword">
+          <el-input v-model="form.mer_keyword" autocomplete="off" placeholder="请输入商户关键字"></el-input>
+        </el-form-item>
+        <el-form-item label="商户地址" :label-width="formLabelWidth" prop="mer_address">
+          <el-input v-model="form.mer_address" autocomplete="off" placeholder="请输入商户地址"></el-input>
+        </el-form-item>
+        <el-form-item label="微信分账商户号" :label-width="formLabelWidth" prop="sub_mchid">
+          <el-input v-model="form.sub_mchid" autocomplete="off" placeholder="请输入微信分账商户号"></el-input>
+        </el-form-item>
+        <el-form-item label="备注" :label-width="formLabelWidth" prop="mark">
+          <el-input
+            type="textarea"
+            placeholder="请输入备注"
+            maxlength="130"
+            v-model="form.mark"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
+          <el-input-number v-model="form.sort" @change="handleChange" :min="0" :max="10"></el-input-number>
+        </el-form-item>
+        <div class="switch_btn">
+          <el-form-item class="mini_btn" label="直播间审核" prop="value1" :label-width="formLabelWidth">
+            <el-switch
+              v-model="form.value1"
+              active-color="#3390ff"
+              active-text="开"
+              inactive-text="关"
+              inactive-color="#DCDFE6"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item class="mini_btn" label="产品审核" prop="value2" :label-width="formLabelWidth">
+            <el-switch
+              v-model="form.value2"
+              active-color="#3390ff"
+              active-text="开"
+              inactive-text="关"
+              inactive-color="#DCDFE6"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item
+            class="mini_btn"
+            label="直播间商品审核"
+            prop="value3"
+            :label-width="formLabelWidth"
+          >
+            <el-switch
+              v-model="form.value3"
+              active-color="#3390ff"
+              active-text="开"
+              inactive-text="关"
+              inactive-color="#DCDFE6"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item class="mini_btn" label="是否推荐" prop="value4" :label-width="formLabelWidth">
+            <el-switch
+              v-model="form.value4"
+              active-color="#3390ff"
+              active-text="开"
+              inactive-text="关"
+              inactive-color="#DCDFE6"
+            ></el-switch>
+          </el-form-item>
+          <el-form-item class="mini_btn" label="是否自营" prop="value5" :label-width="formLabelWidth">
+            <el-switch
+              v-model="form.value5"
+              active-color="#3390ff"
+              active-text="开"
+              inactive-text="关"
+              inactive-color="#DCDFE6"
+            ></el-switch>
+          </el-form-item>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('form')" v-if="add">重 置</el-button>
+        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -322,9 +430,14 @@ import {
   merchantCountApi,
   merchantIsCloseApi,
   getstoreTypeApi,
-  getMerCateApi, marginDeductionForm,
+  getMerCateApi,
+  marginDeductionForm
 } from "@/api/merchant";
-import {getShopAddressApi,getShopAddressApi_two,getShopAddressApi_three} from '@/api/shoplist'
+import {
+  getShopAddressApi,
+  getShopAddressApi_two,
+  getShopAddressApi_three
+} from "@/api/shoplist";
 import { fromList } from "@/libs/constants.js";
 import { roterPre } from "@/settings";
 import SettingMer from "@/libs/settingMer";
@@ -333,80 +446,80 @@ export default {
   name: "MerchantList",
   data() {
     return {
-      add:true,
+      add: true,
       // 添加商户弹出层
-      popFormVisible:false,
-      merid:'',
+      popFormVisible: false,
+      merid: "",
       form: {
-          mer_name: '',//店铺名称
-          category_id:'',//商品分类
-          type_id: '',
-          info:'', //区
-          info1:'', //街道
-          info2:'', //村
-          area_id:'',//区code
-          street_id:'',//街道code
-          village_id:'',//村id
-          paid_margin:'',//已支付的保证金
-          auto_margin_rate:'', //自动扣除保证金比例
-          options:[],
-          options1:[],
-          options2:[],
-          mer_account:'',
-          mer_password:'',
-          real_name:'',
-          mer_phone:'',
-          commission_rate:'0',//手续费
-          mer_keyword:'',          
-          mer_address:'',
-          sub_mchid:'',
-          mark:'',
-          sort:'',
-          value1:'关',
-          value2:'关',
-          value3:'关',
-          value4:'关',
-          value5:'关',
-        },
-        formLabelWidth: '130px',
-        //表单验证规则
-        rules:{
-          mer_name:[
-            { required: true, message: '请输入商户名称', trigger: 'blur' },
-            { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
-          ],
-          category_id:[
-            { required: true, message: '请选择商户分类', trigger: 'change' },
-          ],
-          type_id:[
-            { required: true, message: '请选择商户类型', trigger: 'change' },
-          ],
-          mer_account:[
-            { required: true, message: '请输入商户账号', trigger: 'change' },
-            // { type: 'number', message: '手机号必须为数字'}
-          ],
-          mer_password:[
-            { required: true, message: '请输入登陆密码', trigger: 'blur' },
-          ],
-          mer_phone:[
-            { required: true, message: '请输入商户手机号', trigger: 'blur' },
-          ],
+        mer_name: "", //店铺名称
+        category_id: "", //商品分类
+        type_id: "",
+        info: "", //区
+        info1: "", //街道
+        info2: "", //村
+        area_id: "", //区code
+        street_id: "", //街道code
+        village_id: "", //村id
+        paid_margin: "", //已支付的保证金
+        auto_margin_rate: "", //自动扣除保证金比例
+        options: [],
+        options1: [],
+        options2: [],
+        mer_account: "",
+        mer_password: "",
+        real_name: "",
+        mer_phone: "",
+        commission_rate: "0", //手续费
+        mer_keyword: "",
+        mer_address: "",
+        sub_mchid: "",
+        mark: "",
+        sort: "",
+        value1: "关",
+        value2: "关",
+        value3: "关",
+        value4: "关",
+        value5: "关"
+      },
+      formLabelWidth: "130px",
+      //表单验证规则
+      rules: {
+        mer_name: [
+          { required: true, message: "请输入商户名称", trigger: "blur" },
+          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
+        ],
+        category_id: [
+          { required: true, message: "请选择商户分类", trigger: "change" }
+        ],
+        type_id: [
+          { required: true, message: "请选择商户类型", trigger: "change" }
+        ],
+        mer_account: [
+          { required: true, message: "请输入商户账号", trigger: "change" }
+          // { type: 'number', message: '手机号必须为数字'}
+        ],
+        mer_password: [
+          { required: true, message: "请输入登陆密码", trigger: "blur" }
+        ],
+        mer_phone: [
+          { required: true, message: "请输入商户手机号", trigger: "blur" }
+        ]
       },
       fromList: fromList,
       roterPre: roterPre,
       isChecked: false,
       listLoading: true,
-      merCateList: [],//商户分类
-      storeType: [],//店铺类型
-      shopArea:[],//商圈
+      merCateList: [], //商户分类
+      storeType: [], //店铺类型
+      shopArea: [], //商圈
       headeNum: [
         {
-          count: '',
+          count: "",
           type: "1",
           title: "正常开启的商户"
         },
         {
-          count: '',
+          count: "",
           type: "0",
           title: "已关闭商户"
         }
@@ -422,19 +535,20 @@ export default {
         status: "1",
         keyword: "",
         is_trader: "",
-        category_id: '',
-        type_id: ""
+        category_id: "",
+        type_id: "",
+        area_id:'',
+        street_id:''
       },
       autoUpdate: true,
-      timeVal: []
+      timeVal: [],
     };
-  },
-   created(){
-    this.getshopList()
-  },
-  beforeMount(){
     
   },
+  created() {
+    this.getshopList();
+  },
+  beforeMount() {},
   mounted() {
     this.getHeadNum();
     this.getMerCategory();
@@ -442,170 +556,167 @@ export default {
     this.getList("");
   },
   methods: {
-    close(formName){
-      this.resetForm(formName)
+    close(formName) {
+      this.resetForm(formName);
     },
     handleChange(value) {
-        // console.log(value);
-      },
-     async handleChange1(value){
+      // console.log(value);
+    },
+    async handleChange1(value) {
       console.log(value);
-        const data = {area_code:value[0]}
-        const promise =  await getShopAddressApi_two(data)
-        console.log(promise.data)
-        for(let item of promise.data){
-            this.$set(item,'label',item.name)
-            this.$set(item,'value',Number(item.code))
-            this.form.options1 = promise.data
-          }
-          console.log(this.form.info1)
-      },
-      async handleChange2(value,ID){
-        console.log(value,ID);
-        if(value!==value){
-          this.form.info2=0
-        }
-          const data = {street_code:value[0]}
-          const promise =  await getShopAddressApi_three(data)
-          for(let item of promise.data){
-              this.$set(item,'label',item.name)
-              this.$set(item,'value',item.id)
-            }
-          this.form.options2 = promise.data
-        },
-      handleChange3(e,val){
-        // let id=''
-        // for(let item of val){
-        //   if(item.code==e){
-        //     id = item.id
-        //   }
-        // }
-        console.log(e);
-        if(this.form.info instanceof Array){
-          this.form.area_id = this.form.info[0]
-        }else{
-          this.form.area_id = this.form.info
-        }
-        if(this.form.info1 instanceof Array){
-          this.form.street_id = this.form.info1[0]
-        }else{ 
-          this.form.street_id = this.form.info1
-        }
-        if(this.form.info2 instanceof Array){
-          this.form.village_id = this.form.info2[0]
-        }else{
-          this.form.village_id = this.form.info2[14]
-        }
-        // this.form.street_id = this.form.info1[0]
-        // this.form.village_id = id
-      },
-      open4(err) {
-        this.$message.error(err);
-      },
-      open2(sus) {
-        this.$message({
-          message: sus,
-          type: 'success'
-        });
-      },
+      const data = { area_code: value[0] };
+      const promise = await getShopAddressApi_two(data);
+      console.log(promise.data);
+      for (let item of promise.data) {
+        this.$set(item, "label", item.name);
+        this.$set(item, "value", Number(item.code));
+        this.form.options1 = promise.data;
+      }
+      console.log(this.form.info1);
+    },
+    async handleChange2(value, ID) {
+      console.log(value, ID);
+      if (value !== value) {
+        this.form.info2 = 0;
+      }
+      const data = { street_code: value[0] };
+      const promise = await getShopAddressApi_three(data);
+      for (let item of promise.data) {
+        this.$set(item, "label", item.name);
+        this.$set(item, "value", item.id);
+      }
+      this.form.options2 = promise.data;
+    },
+    handleChange3(e, val) {
+      // let id=''
+      // for(let item of val){
+      //   if(item.code==e){
+      //     id = item.id
+      //   }
+      // }
+      console.log(e);
+      if (this.form.info instanceof Array) {
+        this.form.area_id = this.form.info[0];
+      } else {
+        this.form.area_id = this.form.info;
+      }
+      if (this.form.info1 instanceof Array) {
+        this.form.street_id = this.form.info1[0];
+      } else {
+        this.form.street_id = this.form.info1;
+      }
+      if (this.form.info2 instanceof Array) {
+        this.form.village_id = this.form.info2[0];
+      } else {
+        this.form.village_id = this.form.info2[14];
+      }
+      // this.form.street_id = this.form.info1[0]
+      // this.form.village_id = id
+    },
+    open4(err) {
+      this.$message.error(err);
+    },
+    open2(sus) {
+      this.$message({
+        message: sus,
+        type: "success"
+      });
+    },
     //提交和重置
     submitForm(formName) {
-      console.log('1------------------1');
-        this.$refs[formName].validate(async (valid) => {
-          if (valid) {
-            //true=1 false=0
-            if(this.form.value2==false){
-              this.form.is_audit='0'
-            }else{
-              this.form.is_audit='1'
-            }
-            if(this.form.value1==false){
-              this.form.is_bro_room='0'
-            }else{
-              this.form.is_bro_room='1'
-            }
-            if(this.form.value3==false){
-              this.form.is_bro_goods='0'
-            }else{
-              this.form.is_bro_goods='1'
-            }
-            if(this.form.value4==false){
-              this.form.is_best='0'
-            }else{
-              this.form.is_best='1'
-            }
-            if(this.form.value5==false){
-              this.form.is_trader='0'
-            }else{
-              this.form.is_trader='1'
-            }
-           //判断是新增还是编辑
-           if(this.add){
+      console.log("1------------------1");
+      this.$refs[formName].validate(async valid => {
+        if (valid) {
+          //true=1 false=0
+          if (this.form.value2 == false) {
+            this.form.is_audit = "0";
+          } else {
+            this.form.is_audit = "1";
+          }
+          if (this.form.value1 == false) {
+            this.form.is_bro_room = "0";
+          } else {
+            this.form.is_bro_room = "1";
+          }
+          if (this.form.value3 == false) {
+            this.form.is_bro_goods = "0";
+          } else {
+            this.form.is_bro_goods = "1";
+          }
+          if (this.form.value4 == false) {
+            this.form.is_best = "0";
+          } else {
+            this.form.is_best = "1";
+          }
+          if (this.form.value5 == false) {
+            this.form.is_trader = "0";
+          } else {
+            this.form.is_trader = "1";
+          }
+          //判断是新增还是编辑
+          if (this.add) {
             //新增商户--merchantCreate
             try {
-              const res = await merchantCreate(this.form)
-              console.log('res',res);
-              if(res.status==200){
-                this.open2(res.message)
+              const res = await merchantCreate(this.form);
+              console.log("res", res);
+              if (res.status == 200) {
+                this.open2(res.message);
                 //添加弹出层
-                this.popFormVisible=false
+                this.popFormVisible = false;
               }
             } catch (error) {
-              this.open4(error.message)
+              this.open4(error.message);
             }
-           }else{
+          } else {
             try {
               console.log(this.form);
-              console.log('id',this.merid);
-              const res = await merchantUpdateA(this.merid,this.form)
-              console.log('res',res);
-              if(res.status==200){
-                this.open2(res.message)
+              console.log("id", this.merid);
+              const res = await merchantUpdateA(this.merid, this.form);
+              console.log("res", res);
+              if (res.status == 200) {
+                this.open2(res.message);
                 //编辑弹出层
-                this.popFormVisible=false
-                
+                this.popFormVisible = false;
               }
             } catch (error) {
-              this.open4(error.message)
+              this.open4(error.message);
             }
-           }
-            
-          } else {
-            console.log('error submit!!');
-            return false;
           }
-        });
-      },
-      //重置
-      resetForm(formName) {
-        this.$nextTick(()=> {
-            this.$refs[formName].resetFields();
-          })
-        // this.$refs[formName].resetFields();
-      },
-      //计数器
-      handleChange(value) {
-        console.log(value);
-      },
-      //获取商户分类
-      getShopClassify(){
-
-      },
-      //获取商圈
-      async getshopList(){
-        const data = {city_code:'510500'}
-        const promise = await getShopAddressApi(data).then((res)=>{
-          for(let item of res.data){
-            this.$set(item,'label',item.name)
-            this.$set(item,'value',Number(item.code))
-            this.form.options.push(item)
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //重置
+    resetForm(formName) {
+      this.$nextTick(() => {
+        this.$refs[formName].resetFields();
+      });
+      // this.$refs[formName].resetFields();
+    },
+    //计数器
+    handleChange(value) {
+      console.log(value);
+    },
+    //获取商户分类
+    getShopClassify() {},
+    //获取商圈
+    async getshopList() {
+      const data = { city_code: "510500" };
+      const promise = await getShopAddressApi(data).then(
+        res => {
+          for (let item of res.data) {
+            this.$set(item, "label", item.name);
+            this.$set(item, "value", Number(item.code));
+            this.form.options.push(item);
           }
-          
-        },(rej)=>{
-          console.log('错误',rej);
-        })
-        
-      },
+        },
+        rej => {
+          console.log("错误", rej);
+        }
+      );
+    },
     onLogo(id) {
       merchantLoginApi(id)
         .then(res => {
@@ -641,23 +752,30 @@ export default {
     },
     // 商户分类；
     getMerCategory() {
-        getMerCateApi().then(res => {
-            this.merCateList = res.data
-        }).catch(res => {
-            this.$message.error(res.message)
+      getMerCateApi()
+        .then(res => {
+          this.merCateList = res.data;
         })
+        .catch(res => {
+          this.$message.error(res.message);
+        });
     },
-    getStoreType(){
-        getstoreTypeApi().then(res => {
-            this.storeType = res.data
-        }).catch(res => {
-            this.$message.error(res.message)
+    getStoreType() {
+      getstoreTypeApi()
+        .then(res => {
+          this.storeType = res.data;
         })
+        .catch(res => {
+          this.$message.error(res.message);
+        });
     },
     // 列表
     getList(num) {
+      console.log(this.tableFrom);
       this.listLoading = true;
       this.tableFrom.page = num ? num : this.tableFrom.page;
+      this.tableFrom.area_id = this.tableFrom.area_id[0]
+      this.tableFrom.street_id = this.tableFrom.street_id[0]
       merchantListApi(this.tableFrom)
         .then(res => {
           this.tableData.data = res.data.list;
@@ -704,77 +822,76 @@ export default {
     },
     // 添加
     onAdd() {
-      this.add = true
-      this.popFormVisible =  true
+      this.add = true;
+      this.popFormVisible = true;
       // this.$modalForm(merchantCreateApi()).then(() => this.getList(""));
     },
     // 编辑
     async onEdit(id) {
       //调用获取商圈
-      this.popFormVisible =  true  //开启编辑表单
-      this.add =false
-      const promise = await merchantUpdateApi(id)
-      console.log('promise',promise);
+      this.popFormVisible = true; //开启编辑表单
+      this.add = false;
+      const promise = await merchantUpdateApi(id);
+      console.log("promise", promise);
       console.log(this.form);
-      const res = promise.data
-      this.merid = res.mer_id
-      this.form.mer_name = res.mer_name //商户名称
-      this.form.category_id = res.category_id
-      this.form.type_id = res.type_id
-      this.form.mer_account = res.mer_account
-      this.form.mer_password = res.mer_password
-      this.form.real_name = res.real_name
-      this.form.mer_phone = res.mer_phone
-      this.form.auto_margin_rate=res.auto_margin_rate//扣除
-      this.form.paid_margin=res.paid_margin//支付的保证金
-      this.form.area_id = res.geo_address.area_id
-      this.form.street_id = res.geo_address.street_id
-      this.form.village_id = res.geo_address.village_id
+      const res = promise.data;
+      this.merid = res.mer_id;
+      this.form.mer_name = res.mer_name; //商户名称
+      this.form.category_id = res.category_id;
+      this.form.type_id = res.type_id;
+      this.form.mer_account = res.mer_account;
+      this.form.mer_password = res.mer_password;
+      this.form.real_name = res.real_name;
+      this.form.mer_phone = res.mer_phone;
+      this.form.auto_margin_rate = res.auto_margin_rate; //扣除
+      this.form.paid_margin = res.paid_margin; //支付的保证金
+      this.form.area_id = res.geo_address.area_id;
+      this.form.street_id = res.geo_address.street_id;
+      this.form.village_id = res.geo_address.village_id;
 
-      this.form.info = res.geo_address.area_id //code
-      let val = []
-      val.push(res.geo_address.area_id)
-      this.handleChange1(val)
-      this.form.info1 = res.geo_address.street_id //code
-      this.form.info2 = res.geo_address.village_id //id
-      let vala = []
-      let ID=res.geo_address.street_id
-      vala.push(res.geo_address.street_id)
-      this.handleChange2(vala,ID) 
-      this.form.commission_rate = res.commission_rate
-      this.form.mer_keyword = res.mer_keyword
-      this.form.mer_address = res.mer_address
-      this.form.sub_mchid = res.sub_mchid
-      this.form.mark = res.mark
-      this.form.sort = res.sort
-      if(res.is_bro_room==1){
-        this.form.value1 = true 
-      }else{
-        this.form.value1 = false 
+      this.form.info = res.geo_address.area_id; //code
+      let val = [];
+      val.push(res.geo_address.area_id);
+      this.handleChange1(val);
+      this.form.info1 = res.geo_address.street_id; //code
+      this.form.info2 = res.geo_address.village_id; //id
+      let vala = [];
+      let ID = res.geo_address.street_id;
+      vala.push(res.geo_address.street_id);
+      this.handleChange2(vala, ID);
+      this.form.commission_rate = res.commission_rate;
+      this.form.mer_keyword = res.mer_keyword;
+      this.form.mer_address = res.mer_address;
+      this.form.sub_mchid = res.sub_mchid;
+      this.form.mark = res.mark;
+      this.form.sort = res.sort;
+      if (res.is_bro_room == 1) {
+        this.form.value1 = true;
+      } else {
+        this.form.value1 = false;
       }
-      if(res.is_audit==1){
-        this.form.value2 = true 
-      }else{
-        this.form.value2 = false 
+      if (res.is_audit == 1) {
+        this.form.value2 = true;
+      } else {
+        this.form.value2 = false;
       }
-      if(res.is_bro_goods==1){
-        this.form.value3 = true 
-      }else{
-        this.form.value3 = false 
+      if (res.is_bro_goods == 1) {
+        this.form.value3 = true;
+      } else {
+        this.form.value3 = false;
       }
-      if(res.is_best==1){
-        this.form.value4 = true 
-      }else{
-        this.form.value4 = false 
+      if (res.is_best == 1) {
+        this.form.value4 = true;
+      } else {
+        this.form.value4 = false;
       }
-      if(res.is_trader==1){
-        this.form.value5 = true 
-      }else{
-        this.form.value5 = false 
+      if (res.is_trader == 1) {
+        this.form.value5 = true;
+      } else {
+        this.form.value5 = false;
       }
-      
+
       //  this.$modalForm(merchantUpdateApi(id)).then(() => this.getList(""));
-      
     },
     // 删除
     handleDelete(id) {
@@ -810,21 +927,21 @@ export default {
 </script>
 
 <style scoped lang="scss">
-/deep/.el-dialog{
+/deep/.el-dialog {
   margin-top: 0 !important;
   width: 840px;
 }
-.mer_phone{
+.mer_phone {
   width: 400px;
   // float: left;
 }
-.dis{
+.dis {
   display: flex;
 }
-.switch_btn{
+.switch_btn {
   display: flex;
   flex-wrap: wrap;
-  .mini_btn{
+  .mini_btn {
     width: 390px !important;
   }
 }