Merge branch 'master' of http://159.75.201.17:3000/zwq/tuanfeng-pc-mer

src/views/active/index.vue

@@ -2,7 +2,19 @@
   <div class="app-container">
     <!-- 查询和其他操作 -->
     <div class="filter-container">
-      <el-radio-group v-model="listQuery.type" class="filter-item" size="mini" @input="handleSearch">
+      <span class="filter-item">
+        商家类型：
+        <span v-if="storeDetails.platformShopCheck.shopType === 1">商城</span>
+        <span v-else-if="storeDetails.platformShopCheck.shopType === 2">商圈</span>
+        <span v-else>--</span>
+      </span>
+      <span class="filter-item" style="margin-left:10px;">
+        所属区域ID：{{ storeDetails.platformShopCheck.areaId || '--' }}
+      </span>
+      <el-radio-group
+        v-model="listQuery.type" class="filter-item" style="margin-left:10px;"
+        size="mini" @input="handleSearch"
+      >
         <el-radio-button :label="1">全部</el-radio-button>
         <el-radio-button :label="2">我参与的</el-radio-button>
       </el-radio-group>
@@ -88,36 +100,37 @@
         </el-table-column>
         <el-table-column align="center" label="操作" width="260" fixed="right" class-name="small-padding fixed-width">
           <template slot-scope="{ row }">
-            <el-button
-              v-if="row.operation === 1" type="primary" size="mini"
-              @click="$refs.SignActivity && $refs.SignActivity.handleOpen(row)"
-            >
-              立即报名
-            </el-button>
-            <el-button
-              v-if="row.operation === 2" type="primary" size="mini" disabled
-              @click="$refs.SignActivity && $refs.SignActivity.handleOpen(row)"
-            >
-              立即报名
-            </el-button>
-            <el-button
-              v-if="row.operation === 3" type="warning" size="mini"
-              @click="$refs.ActivityDetail && $refs.ActivityDetail.handleOpen(row)"
-            >
-              活动数据
-            </el-button>
-            <el-button
-              v-if="row.operation === 4" type="primary" size="mini"
-              @click="$refs.SignActivity && $refs.SignActivity.handleOpen(row)"
-            >
-              重新报名
-            </el-button>
-            <el-button
-              v-if="row.operation === 5" type="primary" size="mini"
-              @click="$refs.SignActivity && $refs.SignActivity.handleOpen(row)"
-            >
-              继续报名
-            </el-button>
+            <div v-if="!listLoading">
+              <el-button
+                v-if="row.operation === 1" type="primary" size="mini"
+                @click="$refs.SignActivity && $refs.SignActivity.handleOpen(row)"
+              >
+                立即报名
+              </el-button>
+              <el-button
+                v-if="row.operation === 2" type="success" size="mini" disabled
+              >
+                立即报名
+              </el-button>
+              <el-button
+                v-if="row.operation === 3" type="warning" size="mini"
+                @click="$refs.ActivityDetail && $refs.ActivityDetail.handleOpen(row)"
+              >
+                活动数据
+              </el-button>
+              <el-button
+                v-if="row.operation === 4" type="primary" size="mini"
+                @click="$refs.SignActivity && $refs.SignActivity.handleOpen(row)"
+              >
+                重新报名
+              </el-button>
+              <el-button
+                v-if="row.operation === 5" type="primary" size="mini"
+                @click="$refs.SignActivity && $refs.SignActivity.handleOpen(row)"
+              >
+                继续报名
+              </el-button>
+            </div>
           </template>
         </el-table-column>
       </el-table>
@@ -143,6 +156,7 @@
 import SignActivity from './components/SignActivity'
 import ActivityDetail from './components/ActivityDetail'
 
+import { shopSysGetById } from '@/api/shopSys'
 import { activityGetAll } from '@/api/active'
 export default {
   name: 'Active',
@@ -162,18 +176,24 @@ export default {
         activityName: '', // 活动名称
         state: '',
         examineState: '',
-        signType: 1
+        signType: 1,
+        regionId: ''
+      },
+      storeDetails: {
+        platformShopCheck: {}
       }
     }
   },
-  created() {
+  async created() {
+    const res = await shopSysGetById({})
+    this.storeDetails = { ...res.data, platformShopCheck: res.data.platformShopCheck || { areaId: '', shopType: '' } }
     this.getList()
   },
   methods: {
     async getList() {
       this.listLoading = true
       try {
-        const res = await activityGetAll(this.listQuery)
+        const res = await activityGetAll({ ...this.listQuery, regionId: this.storeDetails.platformShopCheck.shopType === 1 ? null : this.storeDetails.platformShopCheck.areaId })
         this.list = res.data.list
         this.total = res.data.total
       } finally {

src/views/commodity/commoditySystem/index.vue

@@ -243,7 +243,7 @@ export default {
   },
   created() {
     getVoucher().then((res) => { // 获取可选的代金券，用于创建和修改商品时定义代金券的使用规则
-      this.voucherList = res.data
+      this.voucherList = Array.isArray(res.data) ? res.data : typeof res.data === 'number' && res.data ? [ { id: res.data, voucherName: res.data } ] : []
       this.voucherList.push({
         voucherName: '不使用代金券',
         updateTime: '123123123123',

src/views/customer/clusteringList/index.vue

@@ -91,17 +91,18 @@
       </div>
     </el-dialog>
     <AddClustering ref="addClustering" @reset="reset" />
-    <CustomerDetail ref="customerDetail"></CustomerDetail>
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
   </div>
 </template>
 
 <script>
 import { getUsers, getCrowd, deleteCrowd } from '@/api/customer'
 import AddClustering from '@/views/customer/addClustering'
-import CustomerDetail from '@/views/customer/customerList/customerDetail'
+import DetailModal from '@/views/customer/customerList/components/DetailModal'
 export default {
   name: 'TagList',
-  components: { CustomerDetail, AddClustering },
+  components: { DetailModal, AddClustering },
   data() {
     return {
       formInline: {
@@ -227,7 +228,7 @@ export default {
     },
     showDetail(id) {
       // this.$router.push({ name: 'customerDetail', query: { buyerUserId: id }})
-      this.$refs.customerDetail.show(id)
+      this.$refs.DetailModal.show({ buyerUserId: id })
     },
     reset() {
       this.getCrowdAll(this.formInline)

src/views/customer/customerList/components/DetailModal.vue

@@ -0,0 +1,141 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      size="mini"
+      label-position="left"
+      label-suffix=":"
+      label-width="200px"
+    >
+      <!-- 客户信息 -->
+      <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
+        <div
+          style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
+        >
+        </div>
+        <div>基本信息</div>
+      </div>
+      <el-form-item label="客户手机号" prop="phone">
+        {{ formData.phone || '--' }}
+      </el-form-item>
+      <el-form-item label="客户昵称" prop="name">
+        {{ formData.name || '--' }}
+      </el-form-item>
+      <el-form-item label="成为客户时间" prop="time">
+        {{ formData.time || '--' }}
+      </el-form-item>
+      <el-form-item label="来源方式" prop="source">
+        {{ formData.source || '--' }}
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        {{ formData.sex || '--' }}
+      </el-form-item>
+      <el-form-item label="客户标签" prop="labelName">
+        {{ formData.labelName || '--' }}
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        {{ formData.remark || '--' }}
+      </el-form-item>
+
+      <div style="display: flex;padding-bottom: 14px;font-size: 16px;font-weight: bold;">
+        <div
+          style="width: 4px;height: 14px;margin-left: 6px;margin-right: 6px;background-color: #0519D4;border-radius: 2px;"
+        >
+        </div>
+        <div>交易信息</div>
+      </div>
+      <el-form-item label="累积消费金额（元）" prop="total">
+        {{ formData.total || 0 }}
+      </el-form-item>
+      <el-form-item label="累计消费订单数" prop="frequency">
+        {{ formData.frequency || 0 }}
+      </el-form-item>
+      <el-form-item label="最近下单时间" prop="lastTime">
+        {{ formData.lastTime || '--' }}
+      </el-form-item>
+      <el-form-item label="累计退款金额" prop="refundMoney">
+        {{ formData.refundMoney || 0 }}
+      </el-form-item>
+      <el-form-item label="累计退款订单数" prop="refunds">
+        {{ formData.refunds || 0 }}
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import { getCustomerDetail } from '@/api/customer'
+
+export default {
+  name: 'DetailModal',
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '800px',
+        title: '查看客户详情'
+      },
+      visible: false,
+      formData: {
+        buyerUserId: '',
+        phone: '',
+        name: '',
+        time: '',
+        source: '',
+        sex: '',
+        birthday: '',
+        remark: '',
+        total: '',
+        frequency: '',
+        lastTime: '',
+        refundMoney: '',
+        refunds: '',
+        labelName: '',
+        ids: []
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    handleOpen(params = {}) {
+      this.formData = Object.assign(this.$options.data().formData, params)
+      if (params.buyerUserId) {
+        this.getInfo(params.buyerUserId)
+      }
+      this.visible = true
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await getCustomerDetail({ buyerUserId: id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+          buyerUserId: res.data.buyerUserId || '',
+          phone: res.data.phone || '',
+          name: res.data.name || '',
+          time: res.data.time || '',
+          source: res.data.source || '',
+          sex: res.data.sex,
+          birthday: res.data.birthday || '',
+          remark: res.data.remark || '',
+          total: res.data.total,
+          frequency: res.data.frequency,
+          lastTime: res.data.lastTime || '',
+          refundMoney: res.data.refundMoney,
+          refunds: res.data.refunds,
+          labelName: res.data.labelName || '',
+          ids: res.data.ids || []
+        })
+      } finally {
+        loading.close()
+      }
+    }
+  }
+}
+</script>
+

src/views/customer/customerList/components/EditModal.vue

@@ -0,0 +1,190 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      :rules="formRules"
+      size="mini"
+      label-suffix=":"
+      label-width="150px"
+    >
+      <el-form-item label="客户手机号" prop="phone">
+        <el-input v-model="formData.phone" :disabled="!!formData.buyerUserId" maxlength="11" clearable />
+      </el-form-item>
+      <el-form-item label="客户昵称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入客户昵称" maxlength="10" show-word-limit />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-radio-group v-model="formData.sex">
+          <el-radio label="男">男</el-radio>
+          <el-radio label="女">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="生日" prop="birthday">
+        <el-date-picker
+          v-model="formData.birthday"
+          size="medium"
+          type="date"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item label="标签" prop="ids">
+        <el-select v-model="formData.ids" multiple size="mini" placeholder="请选择标签">
+          <el-option v-for="item in tagList" :key="item.labelId" :label="item.labelName" :value="item.labelId" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" maxlength="520" :rows="3" show-word-limit />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="mini" @click="handleClose">取 消</el-button>
+      <el-button type="primary" size="mini" @click="handleSubmit">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { addCustomer, updateCustomer, getCustomerDetail, getLabelData } from '@/api/customer'
+
+export default {
+  name: 'EditModal',
+  components: {
+  },
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '820px',
+        title: ''
+      },
+      visible: false,
+      formData: {
+        buyerUserId: '',
+        phone: '',
+        name: '',
+        time: '',
+        source: '',
+        sex: '',
+        birthday: '',
+        remark: '',
+        total: '',
+        frequency: '',
+        lastTime: '',
+        refundMoney: '',
+        refunds: '',
+        labelName: '',
+        ids: []
+      },
+      formRules: {
+        phone: [
+          { required: true, message: '缺少客户手机号' },
+          { pattern: /^1[3456789]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
+        ],
+        name: [
+          { required: true, message: '请输入客户昵称' }
+        ]
+      },
+      tagList: []
+    }
+  },
+  watch: {
+    'formData.buyerUserId': {
+      deep: true,
+      handler(val) {
+        if (val) {
+          this.formRules.phone = [
+            { required: true, message: '缺少客户手机号' }
+          ]
+        } else {
+          this.formRules.phone = [
+            { required: true, message: '缺少客户手机号' },
+            { pattern: /^1[3456789]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
+          ]
+        }
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    async getTagList() {
+      const res = await getLabelData()
+      this.tagList = res.data
+    },
+    initList() {
+      this.getTagList()
+    },
+    handleOpen(params = {}) {
+      this.modalOptions.title = params.buyerUserId ? '编辑客户基本信息' : '添加客户基本信息'
+      this.formData = Object.assign(this.$options.data().formData, params)
+      this.visible = true
+      this.initList()
+      if (params.buyerUserId) {
+        this.getInfo(params.buyerUserId)
+      } else {
+        this.$refs.formData && this.$refs.formData.resetFields()
+      }
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await getCustomerDetail({ buyerUserId: id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+          buyerUserId: res.data.buyerUserId || '',
+          phone: res.data.phone || '',
+          name: res.data.name || '',
+          time: res.data.time || '',
+          source: res.data.source || '',
+          sex: res.data.sex,
+          birthday: res.data.birthday || '',
+          remark: res.data.remark || '',
+          total: res.data.total,
+          frequency: res.data.frequency,
+          lastTime: res.data.lastTime || '',
+          refundMoney: res.data.refundMoney,
+          refunds: res.data.refunds,
+          labelName: res.data.labelName || '',
+          ids: res.data.ids || []
+        })
+        this.$nextTick(() => {
+          this.$refs.formData && this.$refs.formData.validate()
+        })
+      } finally {
+        loading.close()
+      }
+    },
+    handleSubmit() {
+      this.$refs.formData.validate(async (valid) => {
+        if (valid) {
+          const loading = this.$loading({ text: '提交中，请稍候……' })
+          try {
+            const { ...otps } = this.formData
+            const params = {
+              ...otps
+            }
+            this.formData.buyerUserId ? await updateCustomer(params) : await addCustomer(params)
+            loading.close()
+            this.$message({ message: `${this.formData.buyerUserId ? '编辑' : '添加'}成功!`, type: 'success' })
+            this.$emit('success')
+            this.visible = false
+          } catch (e) {
+            loading.close()
+          } finally {
+            loading.close()
+          }
+        } else {
+          this.$message({ message: '请输入相关信息', type: 'warning' })
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+

src/views/customer/customerList/components/TagAdd.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+    append-to-body
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      :rules="formRules"
+      size="mini"
+      label-suffix=":"
+      label-width="150px"
+    >
+      <el-form-item label="客户ID" prop="buyerUserId">
+        <el-input
+          v-model="formData.buyerUserId" maxlength="20" placeholder="客户ID" disabled
+        />
+      </el-form-item>
+      <el-form-item label="标签" prop="labelIds">
+        <el-select v-model="formData.labelIds" multiple size="mini" placeholder="请选择标签">
+          <el-option v-for="item in tagList" :key="item.labelId" :label="item.labelName" :value="item.labelId" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button size="mini" @click="handleClose">取 消</el-button>
+        <el-button type="primary" size="mini" @click="handleSubmit">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { buyerSaveLabel, getLabelData } from '@/api/customer'
+
+export default {
+  name: 'TagAdd',
+  components: {
+  },
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '620px',
+        title: ''
+      },
+      visible: false,
+      formData: {
+        buyerUserId: '',
+        labelIds: []
+      },
+      formRules: {
+        buyerUserId: [
+          { required: true, message: '缺少客户信息' }
+        ],
+        labelIds: [
+          { type: 'array', required: true, message: '请选择标签' }
+        ]
+      },
+      tagList: []
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    async getTagList() {
+      const res = await getLabelData()
+      this.tagList = res.data
+    },
+    initList() {
+      this.getTagList()
+    },
+    handleOpen(params = {}) {
+      this.modalOptions.title = '添加标签'
+      this.formData.buyerUserId = params.buyerUserId
+      // this.formData = Object.assign(this.$options.data().formData, params)
+      this.visible = true
+      this.initList()
+      this.$refs.formData && this.$refs.formData.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.formData.validate(async (valid) => {
+        if (valid) {
+          const loading = this.$loading({ text: '加载中' })
+          try {
+            const { ...otps } = this.formData
+            const params = {
+              ...otps
+            }
+            await buyerSaveLabel(params)
+            loading.close()
+            this.$message({ message: `添加成功!`, type: 'success' })
+            this.$emit('success')
+            this.visible = false
+          } catch (e) {
+            loading.close()
+          } finally {
+            loading.close()
+          }
+        } else {
+          this.$message({ message: '请输入相关信息', type: 'warning' })
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+

src/views/customer/customerList/components/VoucherTransfer.vue

@@ -0,0 +1,118 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+    append-to-body
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      :rules="formRules"
+      size="mini"
+      label-suffix=":"
+      label-width="150px"
+    >
+      <el-form-item label="客户ID" prop="buyerUserId">
+        <el-input
+          v-model="formData.buyerUserId" maxlength="20" placeholder="客户ID" disabled
+        />
+      </el-form-item>
+      <el-form-item label="代金券类型" prop="shelveState">
+        <el-radio-group v-model="formData.voucherType">
+          <el-radio label="1">充值代金券</el-radio>
+          <el-radio label="2">兑换代金券</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="数量" prop="number">
+        <el-input
+          v-model="formData.number" clearable size="mini" type="number"
+          style="width: 200px;"
+          placeholder="请输入代金券数量"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button size="mini" @click="handleClose">取 消</el-button>
+        <el-button type="primary" size="mini" @click="handleSubmit">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { updateTransferRechargeShopVoucher, updateTransferExchangeShopVoucher } from '@/api/voucherManagement/voucherOperation'
+
+export default {
+  name: 'VoucherTransfer',
+  components: {
+  },
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '620px',
+        title: ''
+      },
+      visible: false,
+      formData: {
+        voucherType: '1',
+        buyerUserId: '',
+        number: ''
+      },
+      formRules: {
+        voucherType: [ { required: true, message: '请选择代金券类型' } ],
+        buyerUserId: [ { required: true, message: '被赠与方id不能为空', trigger: 'blur' } ],
+        number: [ { required: true, message: '数量不能为空', trigger: 'blur' } ]
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    initList() {
+    },
+    handleOpen(params = {}) {
+      this.modalOptions.title = '代金券转赠'
+      this.formData.buyerUserId = params.buyerUserId
+      // this.formData = Object.assign(this.$options.data().formData, params)
+      this.visible = true
+      this.initList()
+      this.$refs.formData && this.$refs.formData.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.formData.validate(async (valid) => {
+        if (valid) {
+          const loading = this.$loading({ text: '加载中' })
+          try {
+            const { ...otps } = this.formData
+            const params = {
+              ...otps
+            }
+            let _url
+            if (this.formData.voucherType === '1') {
+              _url = updateTransferRechargeShopVoucher
+            } else if (this.formData.voucherType === '2') {
+              _url = updateTransferExchangeShopVoucher
+            }
+            await _url(params)
+            loading.close()
+            this.$message({ message: `操作成功!`, type: 'success' })
+            this.$emit('success')
+            this.visible = false
+          } catch (e) {
+            loading.close()
+          } finally {
+            loading.close()
+          }
+        } else {
+          this.$message({ message: '请输入相关信息', type: 'warning' })
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+

src/views/customer/customerList/customerDetail.vue

@@ -1,278 +0,0 @@
-<template>
-  <el-dialog :close-on-click-modal="false" title="客户详情" width="80%" :visible.sync="visible">
-    <div class="customerDetail">
-      <div class="detailBox">
-        <div class="infoTit">基本信息 <i class="el-icon-edit" @click="changeInfo" /></div>
-        <div class="itemBox">
-          <div class="itemInfo"><label>客户手机号：</label>{{ customerInfo.phone }}</div>
-          <div class="itemInfo"><label>客户昵称：</label>{{ customerInfo.name }}</div>
-          <div class="itemInfo"><label>成为客户时间：</label>{{ customerInfo.time }}</div>
-        </div>
-        <div class="itemBox">
-          <div class="itemInfo"><label>来源方式：</label>{{ customerInfo.source }}</div>
-          <div class="itemInfo"><label>性别：</label>{{ customerInfo.sex }}</div>
-          <div class="itemInfo"><label>生日：</label>{{ customerInfo.birthday ? customerInfo.birthday : '—' }}</div>
-        </div>
-        <div class="itemBox">
-          <div class="itemInfo"><label>客户标签：</label>{{ customerInfo.labelName ? customerInfo.labelName : '—' }}</div>
-          <div class="itemInfo"><label>备注：</label>{{ customerInfo.remark ? customerInfo.remark : '无' }}</div>
-        </div>
-        <div class="tradeInfoTit">交易信息</div>
-        <div class="tradeInfo">
-          <div class="tradeItem">
-            <div class="tradeTit">累积消费金额（元）</div>
-            <div class="tradeValue">{{ customerInfo.total ? customerInfo.total : '0' }}</div>
-          </div>
-          <div class="tradeItem">
-            <div class="tradeTit">累计消费订单数</div>
-            <div class="tradeValue">{{ customerInfo.frequency ? customerInfo.frequency : '0' }}</div>
-          </div>
-          <div class="tradeItem">
-            <div class="tradeTit">最近下单时间</div>
-            <div class="tradeValue">{{ customerInfo.lastTime ? customerInfo.lastTime : '—' }}</div>
-          </div>
-          <div class="tradeItem">
-            <div class="tradeTit">累计退款金额</div>
-            <div class="tradeValue">{{ customerInfo.refundMoney ? customerInfo.refundMoney : '0' }}</div>
-          </div>
-          <div class="tradeItem">
-            <div class="tradeTit">累计退款订单数</div>
-            <div class="tradeValue">{{ customerInfo.refunds ? customerInfo.refunds : '0' }}</div>
-          </div>
-        </div>
-      </div>
-      <!-- 详情弹窗 -->
-      <el-dialog
-        title="修改客户基本信息" :visible.sync="isDataVisible" width="30%" top="50px"
-        class="group-dialog"
-        :close-on-click-modal="false" :modal-append-to-body="false" :modal="false"
-      >
-        <div class="changeCustomer">
-          <el-form ref="form" :model="basicInfo" label-width="100px">
-            <el-form-item label="客户手机号">
-              <span>{{ basicInfo.phone }}</span>
-            </el-form-item>
-            <el-form-item class="inputWide" label="客户昵称">
-              <el-input
-                v-model="basicInfo.name" placeholder="请输入内容" maxlength="10"
-                onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')" show-word-limit
-              />
-            </el-form-item>
-            <el-form-item class="inputWide" label="性别">
-              <el-radio v-model="basicInfo.sex" label="男">男</el-radio>
-              <el-radio v-model="basicInfo.sex" label="女">女</el-radio>
-            </el-form-item>
-            <el-form-item class="inputWide" label="生日">
-              <el-date-picker
-                v-model="basicInfo.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
-                style="width: 100%;"
-              />
-            </el-form-item>
-            <el-form-item class="inputWide" label="标签">
-              <el-select v-model="basicInfo.ids" multiple collapse-tags placeholder="请选择" style="width: 100%;">
-                <el-option v-for="item in tagList" :key="item.labelId" :label="item.labelName" :value="item.labelId" />
-              </el-select>
-            </el-form-item>
-            <el-form-item class="inputWide" label="备注">
-              <el-input v-model="basicInfo.remark" maxlength="200" type="textarea" :rows="4" placeholder="请输入内容" />
-            </el-form-item>
-          </el-form>
-        </div>
-        <span slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="saveChangeCustomer">保 存</el-button>
-          <el-button @click="closeChange">取 消</el-button>
-        </span>
-      </el-dialog>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import { updateCustomer, getCustomerDetail, getLabelData } from '@/api/customer'
-function InitUserInfo() {
-  this.birthday = ''
-  this.buyerUserId = ''
-  this.ids = []
-  this.name = ''
-  this.phone = ''
-  this.remark = ''
-  this.sex = ''
-}
-export default {
-  name: 'CustomerDetail',
-  data() {
-    return {
-      visible: false,
-      isDataVisible: false,
-      userId: 0,
-      customerInfo: {}, // 客户详情
-      basicInfo: new InitUserInfo(),
-      tagList: [] // 标签列表
-    }
-  },
-  methods: {
-    show(id) {
-      this.visible = true
-      if (id) {
-        this.userId = id
-        this.getCustomerInfo()
-        this.getTagList()
-      } else {
-        this.customerInfo = {}
-        this.basicInfo = new InitUserInfo()
-      }
-    },
-    // 修改基本信息
-    changeInfo() {
-      this.isDataVisible = true
-    },
-    getCustomerInfo() {
-      getCustomerDetail({ buyerUserId: this.userId }).then((res) => {
-        if (res.code === '') {
-          this.customerInfo = res.data
-          this.basicInfo.birthday = this.customerInfo.birthday
-          this.basicInfo.buyerUserId = this.customerInfo.buyerUserId
-          this.basicInfo.ids = this.customerInfo.ids
-          this.basicInfo.name = this.customerInfo.name
-          this.basicInfo.phone = this.customerInfo.phone
-          this.basicInfo.remark = this.customerInfo.remark
-          this.basicInfo.sex = this.customerInfo.sex
-        } else {
-          this.$message({
-            message: res.message,
-            type: 'error'
-          })
-        }
-      })
-    },
-    async getTagList() {
-      const res = await getLabelData()
-      if (res.code === '') {
-        this.tagList = res.data
-        console.log(this.tagList, 'taglist')
-      } else {
-        this.$message({
-          message: res.message,
-          type: 'error'
-        })
-      }
-    },
-    saveChangeCustomer() {
-      updateCustomer(this.basicInfo).then((res) => {
-        if (res.code === '') {
-          this.$message({
-            message: '修改成功',
-            type: 'success'
-          })
-          this.getCustomerInfo()
-          this.isDataVisible = false
-        } else {
-          this.$message({
-            message: res.message,
-            type: 'error'
-          })
-        }
-      })
-    },
-    closeChange() {
-      this.isDataVisible = false
-    }
-  }
-}
-</script>
-
-<style lang='scss' scoped>
-//@import url(); 引入公共css类
-@import url("../../../styles/elDialog.scss");
-
-.pending {
-	margin: 20px;
-}
-
-.customerDetail {
-	padding: 0px 0px 100px 0px;
-	background: #FFFFFF;
-	height: 100%;
-
-	.title {
-		font-size: 24px;
-		font-weight: 500;
-		color: #333333;
-	}
-
-	.detailBox {
-		.infoTit {
-			margin: 30px 0;
-			font-size: 20px;
-			color: #333333;
-			height: 50px;
-			line-height: 50px;
-
-			i {
-				cursor: pointer;
-			}
-		}
-
-		.tradeInfoTit {
-			margin: 50px 0 30px 0;
-			font-size: 20px;
-			color: #333333;
-			height: 50px;
-			line-height: 50px;
-		}
-
-		.itemBox {
-			display: flex;
-			margin-bottom: 30px;
-
-			.itemInfo {
-				width: 350px;
-				display: flex;
-				color: #666666;
-				font-size: 16px;
-
-				label {
-					width: 120px;
-					text-align: right;
-					display: block;
-					color: #333333;
-				}
-			}
-		}
-
-		.tradeInfo {
-			display: flex;
-
-			.tradeItem {
-				width: 250px;
-				text-align: center;
-
-				.tradeTit {
-					font-size: 16px;
-					margin-bottom: 25px;
-				}
-
-				.tradeValue {
-					font-size: 16px;
-				}
-			}
-		}
-	}
-}
-</style>
-
-<style scoped>
-/* .changeCustomer .inputWide /deep/ .el-form-item__content {
-  width: 280px;
-}
-.changeCustomer .inputWide /deep/ .el-select {
-  width: 280px;
-} */
-.customerDetail /deep/ .el-dialog__headerbtn .el-dialog__close {
-	color: #FFFFFF;
-}
-
-/* .changeCustomer /deep/ .el-date-editor--date {
-  width: 280px;
-} */
-</style>

src/views/customer/customerList/index.vue

@@ -1,269 +1,180 @@
 <template>
-  <div class="pending">
-    <div class="formSearch">
-      <el-form :inline="true" :model="formInline" class="demo-form-inline">
-        <el-form-item label="上次消费时间">
-          <div class="dateBox">
-            <el-form-item>
-              <el-date-picker
-                v-model="formInline.lastTimes" type="datetimerange" range-separator="至"
-                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
-              />
-            </el-form-item>
-          </div>
-        </el-form-item>
-        <el-form-item label="成为客户时间">
-          <div class="dateBox">
-            <el-form-item>
-              <el-date-picker
-                v-model="formInline.dates" type="datetimerange" range-separator="至" start-placeholder="开始日期"
-                end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
-              />
-            </el-form-item>
-          </div>
-        </el-form-item>
-        <el-form-item class="inputWide" label="手机号">
-          <el-input v-model="formInline.phone" maxlength="11" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item class="inputWide" label="客户标签">
-          <el-select v-model="formInline.labelId" placeholder="客户标签" clearable>
-            <el-option v-for="item in tagList" :key="item.labelId" :label="item.labelName" :value="item.labelId" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" plain @click="search">查询</el-button>
-          <el-button type="primary" plain @click="clear">重置</el-button>
-          <!--          <el-button type="primary" plain @click="addTag">添加标签</el-button> -->
-          <el-button type="primary" plain @click="addCustomer">添加客户</el-button>
-          <el-button type="success" plain @click="userDataExport">导出</el-button>
-        </el-form-item>
-      </el-form>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-date-picker
+        v-model="listQuery.lastTimes" type="datetimerange" range-separator="至"
+        start-placeholder="上次消费开始时间" end-placeholder="上次消费结束时间" size="mini"
+        class="filter-item" style="line-height: 1;" value-format="yyyy-MM-dd HH:mm:ss"
+      />
+      <el-date-picker
+        v-model="listQuery.dates" type="datetimerange" range-separator="至"
+        start-placeholder="成为客户开始时间" end-placeholder="成为客户结束时间" size="mini"
+        class="filter-item" style="margin-left: 10px;line-height: 1;" value-format="yyyy-MM-dd HH:mm:ss"
+      />
+      <el-input
+        v-model="listQuery.phone" clearable size="mini" class="filter-item"
+        maxlength="11" style="width: 200px;margin-left: 10px;" placeholder="请输入手机号"
+      />
+      <el-select
+        v-model="listQuery.state" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请选择客户标签"
+      >
+        <el-option v-for="item in tagList" :key="item.labelId" :label="item.labelName" :value="item.labelId" />
+      </el-select>
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+      <el-button size="mini" type="info" class="filter-item" @click="handleReset">
+        重置
+      </el-button>
+      <br />
+      <el-button
+        size="mini" type="primary" icon="el-icon-plus"
+        @click="$refs.EditModal && $refs.EditModal.handleOpen({ buyerUserId: '' })"
+      >
+        添加
+      </el-button>
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleDataExport">
+        导出客户
+      </el-button>
     </div>
-    <!-- 表格 -->
-    <div class="tableBox">
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
       <el-table
-        ref="multipleTable" :data="tableData" border
-        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
-        @selection-change="handleSelectionChange"
+        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
       >
-        <el-table-column type="selection" width="55" />
-        <el-table-column prop="buyerUserId" width="80" label="客户ID" show-overflow-tooltip />
+        <el-table-column align="center" width="100" label="客户ID" prop="buyerUserId" fixed="left" />
         <el-table-column prop="name" label="客户昵称" width="120" show-overflow-tooltip />
         <el-table-column prop="phone" label="手机号" show-overflow-tooltip />
         <el-table-column prop="frequency" label="消费次数" show-overflow-tooltip />
         <el-table-column prop="total" label="累计消费金额（元）" show-overflow-tooltip />
         <el-table-column prop="lastTime" label="上次消费时间" show-overflow-tooltip />
         <el-table-column prop="time" label="成为客户时间" show-overflow-tooltip />
-        <el-table-column :formatter="row => row.registerIp ? row.registerIp : '-'" label="注册IP" show-overflow-tooltip />
-        <el-table-column
-          :formatter="row => row.lastLoginIp ? row.lastLoginIp : '-'" prop="time" label="最后登录IP"
-          show-overflow-tooltip
-        />
+        <el-table-column align="center" width="150" label="注册IP" prop="registerIp" show-overflow-tooltip />
+        <el-table-column align="center" width="150" label="最后登录IP" prop="lastLoginIp" show-overflow-tooltip />
         <el-table-column prop="labelName" label="客户标签" show-overflow-tooltip />
         <el-table-column prop="userGrade" label="客户等级" show-overflow-tooltip />
-        <el-table-column label="操作" show-overflow-tooltip fixed="right" width="200">
-          <template slot-scope="scope">
-            <div class="btnList">
-              <el-button type="text" @click="edit(scope.row)">加标签</el-button>
-              <el-button type="text" @click="showDetail(scope.row.buyerUserId)">详情</el-button>
-              <el-button type="text" @click="gift(scope.row)">代金券转增</el-button>
-              <!-- <el-popconfirm title="确定删除此标签？" @onConfirm="deleteTagFn(scope.row.labelId)">
-                <el-button slot="reference" class="delCls" type="text">删除</el-button>
-                </el-popconfirm> -->
-            </div>
+        <el-table-column align="center" label="操作" width="300" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button type="warning" size="mini" @click="handleDetail(row)">
+              详情
+            </el-button>
+            <el-button type="success" size="mini" @click="$refs.TagAdd && $refs.TagAdd.handleOpen(row)">
+              加标签
+            </el-button>
+            <el-button size="mini" @click="handleEdit(row)">
+              编辑
+            </el-button>
+            <el-button type="danger" size="mini" @click="$refs.VoucherTransfer && $refs.VoucherTransfer.handleOpen(row)">
+              代金券转赠
+            </el-button>
+            <!-- <el-popconfirm title="确定删除此标签？" @onConfirm="deleteTagFn(scope.row.labelId)">
+              <el-button slot="reference" type="text">删除</el-button>
+              </el-popconfirm> -->
           </template>
         </el-table-column>
       </el-table>
-      <div class="fenye">
-        <el-pagination
-          :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
-          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
-      </div>
     </div>
-    <!-- 转增代金券数额 -->
-    <el-dialog
-      title="请输入需要转增的代金券数额"
-      :visible.sync="voucherShow"
-      width="30%"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-    >
-      <el-input v-model="giftNumber" autocomplete="off"></el-input>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="voucherShow = false">取 消</el-button>
-        <el-button type="primary" @click="giftVoucher">确 定</el-button>
-      </span>
-    </el-dialog>
-    <!-- 添加客户 -->
-    <el-dialog
-      :close-on-click-modal="false" title="添加客户" :visible.sync="isDataVisible" width="560px"
-      top="50px"
-      class="group-dialog"
-    >
-      <div class="changeCustomer">
-        <el-form ref="ruleForm" :model="basicInfo" label-width="150px" :rules="basicInfoRules">
-          <el-form-item class="inputWide" label="客户手机号" prop="phone">
-            <el-input
-              v-model="basicInfo.phone" placeholder="请输入客户手机号" maxlength="11" show-word-limit
-              oninput="value=value.replace(/[^\d]/g,'')"
-            />
-          </el-form-item>
-          <el-form-item class="inputWide" label="客户昵称">
-            <el-input
-              v-model="basicInfo.name" placeholder="请输入客户昵称" maxlength="10"
-              onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')" show-word-limit
-            />
-          </el-form-item>
-          <el-form-item class="inputWide" label="性别">
-            <el-radio v-model="basicInfo.sex" label="男">男</el-radio>
-            <el-radio v-model="basicInfo.sex" label="女">女</el-radio>
-          </el-form-item>
-          <el-form-item class="inputWide" label="生日">
-            <el-date-picker v-model="basicInfo.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
-          </el-form-item>
-          <el-form-item class="inputWide" label="标签">
-            <el-select v-model="basicInfo.ids" multiple collapse-tags placeholder="请选择">
-              <el-option v-for="item in tagList" :key="item.labelId" :label="item.labelName" :value="item.labelId" />
-            </el-select>
-          </el-form-item>
-          <el-form-item class="inputWide" label="备注">
-            <el-input v-model="basicInfo.remark" maxlength="200" type="textarea" :rows="4" placeholder="请输入内容" />
-          </el-form-item>
-        </el-form>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="saveCustomer('ruleForm')">保 存</el-button>
-        <el-button @click="closeAddCustomer">取 消</el-button>
-      </span>
-    </el-dialog>
-    <!-- 添加标签 -->
-    <el-dialog
-      :close-on-click-modal="false" title="添加标签" :visible.sync="isTagListVisible" width="500px"
-      top="50px"
-      class="group-dialog"
-    >
-      <div class="changeCustomer">
-        <el-form ref="ruleForm" label-width="150px">
-          <el-form-item class="inputWide" label="标签">
-            <el-select v-model="currentIds" multiple collapse-tags placeholder="请选择">
-              <el-option v-for="item in tagList" :key="item.labelId" :label="item.labelName" :value="item.labelId" />
-            </el-select>
-          </el-form-item>
-        </el-form>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="saveCustomerTag">保 存</el-button>
-        <el-button @click="closeAddTag">取 消</el-button>
-      </span>
-    </el-dialog>
 
-    <!-- 详情弹窗 -->
-    <CustomerDetail ref="customerDetail" />
+    <div>
+      <el-pagination
+        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+        @current-change="(val) => ((listQuery.page = val) && getList())"
+      />
+    </div>
+
+    <!-- 加标签 -->
+    <TagAdd ref="TagAdd" @success="getList() && getTagList()" />
+    <!-- 代金券转赠 -->
+    <VoucherTransfer ref="VoucherTransfer" @success="getList() && getTagList()" />
+    <!-- 新增编辑 -->
+    <EditModal ref="EditModal" @success="getList() && getTagList()" />
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
   </div>
 </template>
 
 <script>
-import CustomerDetail from '@/views/customer/customerList/customerDetail.vue'
-import { voucherShopHold } from '@/api/volumeManagement'
-import { getCustomerList, getLabelData, addCustomer, deleteLabel, buyerSaveLabel, userExport } from '@/api/customer'
+import TagAdd from './components/TagAdd'
+import VoucherTransfer from './components/VoucherTransfer'
+import EditModal from './components/EditModal'
+import DetailModal from './components/DetailModal'
+import { getCustomerList, getLabelData, deleteLabel, userExport } from '@/api/customer'
 export default {
-  name: 'TagList',
+  name: 'CustomerList',
   components: {
-    CustomerDetail
+    TagAdd,
+    VoucherTransfer,
+    EditModal,
+    DetailModal
   },
   data() {
     return {
-      voucherShow: false,
-      clientId: '',
-      giftNumber: 0,
-      formInline: {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
         dates: [], // 成为客户时间数组
         lastTimes: [], // 上次消费时间
         phone: '', // 手机号
         page: 1, // 当前页
-        pageSize: 10, // 每页数
+        pageSize: 20, // 每页数
         labelId: null
       },
-      basicInfo: {
-        birthday: '',
-        buyerUserId: '',
-        ids: [],
-        name: '',
-        phone: '',
-        remark: '',
-        sex: ''
-      },
-      currentIds: [], // 当前选择标签
-      customerInfo: {}, // 客户详情
-      tagList: [],
-      isDataVisible: false, // 数据效果展示
-      isTagListVisible: false, // 标签展示
-      total: 1,
-      currentId: '', // 当前标签ID
-      tableData: [],
-      currentPage: 1,
-      multipleSelection: [],
-      basicInfoRules: {
-        phone: [
-          { required: true, message: '请输入客户手机号', trigger: 'blur' }
-        ]
-      }
+      tagList: []
     }
   },
-  mounted() {
-    this.getCustomerAll(this.formInline)
+  created() {
+    this.getList()
     this.getTagList()
   },
   methods: {
-    //  查询
-    search() {
-      this.total = 1
-      this.formInline.page = 1
-      this.getCustomerAll(this.formInline)
-    },
-    // 清除
-    clear() {
-      this.formInline = {
-        labelName: '', // 标签名称
-        dates: [], // 成为客户时间数组
-        lastTimes: [], // 上次消费时间
-        phone: '', // 手机号
-        page: 1, // 当前页
-        pageSize: 10, // 每页数
-        labelId: null
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await getCustomerList(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
       }
-      this.getCustomerAll(this.formInline)
     },
-    handleSizeChange(val) {
-      this.formInline.pageSize = val
-      this.getCustomerAll(this.formInline)
+    async getTagList() {
+      const res = await getLabelData()
+      this.tagList = res.data
+    },
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
     },
-    handleCurrentChange(val) {
-      this.formInline.page = val
-      this.getCustomerAll(this.formInline)
+    handleReset() {
+      this.listQuery = { dates: [], lastTimes: [], phone: '', page: 1, pageSize: 10, labelId: null }
+      this.getList()
     },
-    // 客户详情
-    showDetail(id) {
-      this.$refs.customerDetail.show(id)
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
     },
-    // 编辑
-    edit(item) {
-      this.currentIds = item.labelIds
-      this.currentId = item.buyerUserId
-      this.isTagListVisible = true
+    handleEdit(row) {
+      this.$refs.EditModal && this.$refs.EditModal.handleOpen(row)
     },
-    saveCustomerTag() {
-      buyerSaveLabel({ buyerUserId: this.currentId, labelIds: this.currentIds }).then((res) => {
+    deleteTagFn(id) {
+      deleteLabel({ labelId: id }).then((res) => {
         if (res.code === '') {
           this.$message({
-            message: '添加成功',
+            message: '删除成功',
             type: 'success'
           })
-          this.getCustomerAll(this.formInline)
-          this.getTagList()
-          this.isTagListVisible = false
+          this.listQuery.page = 1
+          this.getList()
         } else {
           this.$message({
             message: res.message,
@@ -272,21 +183,13 @@ export default {
         }
       })
     },
-    closeAddTag() {
-      this.isTagListVisible = false
-      this.currentIds = []
-    },
-    addCustomer() {
-      this.isDataVisible = true
-    },
     // 导出用户
-    async userDataExport() {
+    async handleDataExport() {
       this.$message({
         message: '数据导出中，请勿重复操作！',
         type: 'success'
       })
-      console.log(this.formInline, 'this.formInline')
-      const res = await userExport(this.formInline)
+      const res = await userExport(this.listQuery)
       if (!res) {
         return
       }
@@ -306,173 +209,36 @@ export default {
         // IE10+下载
         navigator.msSaveBlob(blob, fileName)
       }
-    },
-    saveCustomer(ruleForm) {
-      this.$refs[ruleForm].validate((valid) => {
-        if (valid) {
-          const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
-          if (!reg.test(this.basicInfo.phone)) {
-            this.$message({
-              message: '请输入正确的手机号',
-              type: 'warning'
-            })
-            return false
-          }
-          addCustomer(this.basicInfo).then((res) => {
-            if (res.code === '') {
-              this.$message({
-                message: '添加成功',
-                type: 'success'
-              })
-              this.formInline.page = 1
-              this.getCustomerAll(this.formInline)
-              this.basicInfo = {}
-              this.isDataVisible = false
-            } else {
-              this.$message({
-                message: res.message,
-                type: 'error'
-              })
-            }
-          })
-        }
-      })
-    },
-    closeAddCustomer() {
-      this.isDataVisible = false
-    },
-    // 初始化查询所有数据
-    async getCustomerAll(formInline) {
-      const res = await getCustomerList(formInline)
-      this.total = res.data.total
-      this.tableData = res.data.list
-    },
-    async getTagList() {
-      const res = await getLabelData()
-      if (res.code === '') {
-        this.tagList = res.data
-        console.log(this.tagList, 'taglist')
-      } else {
-        this.$message({
-          message: res.message,
-          type: 'error'
-        })
-      }
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val
-    },
-    deleteTagFn(id) {
-      deleteLabel({ labelId: id }).then((res) => {
-        if (res.code === '') {
-          this.$message({
-            message: '删除成功',
-            type: 'success'
-          })
-          this.formInline.page = 1
-          this.getCustomerAll(this.formInline)
-        } else {
-          this.$message({
-            message: res.message,
-            type: 'error'
-          })
-        }
-      })
-    },
-    gift(row) {
-      this.clientId = row.buyerUserId
-      this.voucherShow = true
-    },
-    giftVoucher() {
-      voucherShopHold({
-        buyerUserId: this.clientId,
-        voucherNum: this.giftNumber
-      }).then((res) => {
-        console.log(res)
-        this.voucherShow = false
-        this.giftNumber = 0
-      })
-        .catch((err) => {
-          console.log(err)
-        })
     }
   }
 }
 </script>
 
-<style lang='scss' scoped>
-//@import url(); 引入公共css类
-@import url("../../../styles/elDialog.scss");
-
-.pending {
-	padding: 30px;
-}
-
-.fenye {
-	margin-top: 20px;
-}
-
-.dataEffect {
-	.couponTit {
-		margin: 20px 0;
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
 	}
 
-	.dataListBox {
-		display: flex;
-		justify-content: center;
-		margin: 30px 0;
-
-		.dataItem {
-			width: 220px;
-			height: 120px;
-			border-radius: 8px;
-			border: 1px solid #999999;
-			text-align: center;
-			margin: 0 10px;
-
-			span {
-				display: block;
-				margin-top: 35px;
-			}
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
 		}
 	}
 
-	.tabListInfo {
-		margin: 20px 0;
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
 	}
 }
 </style>
-
-<style scoped>
-.btnList /deep/ .delCls {
-	margin-left: 10px;
-}
-
-.group-dialog /deep/ .el-dialog__headerbtn .el-dialog__close {
-	color: #FFFFFF;
-}
-
-.inputWide /deep/ .el-form-item__content {
-	width: 260px;
-}
-
-.inputWide /deep/ .el-select {
-	width: 100%;
-}
-
-.changeCustomer .inputWide /deep/ .el-form-item__content {
-	width: 280px;
-}
-
-.changeCustomer .inputWide /deep/ .el-select {
-	width: 280px;
-}
-
-.customerDetail /deep/ .el-dialog__headerbtn .el-dialog__close {
-	color: #FFFFFF;
-}
-
-.changeCustomer /deep/ .el-date-editor--date {
-	width: 280px;
-}
-</style>

src/views/finance/account/bankCode.json

@@ -0,0 +1,146 @@
+{
+	"data":[
+		{ "id": "0102", "name": "中国工商银行" },
+		{ "id": "0103", "name": "中国农业银行" },
+		{ "id": "0104", "name": "中国银行" },
+		{ "id": "0105", "name": "中国建设银行" },
+		{ "id": "0201", "name": "国家开发银行" },
+		{ "id": "0202", "name": "中国进出口银行" },
+		{ "id": "0203", "name": "中国农业发展银行" },
+		{ "id": "0301", "name": "交通银行" },
+		{ "id": "0302", "name": "中信银行" },
+		{ "id": "0303", "name": "中国光大银行" },
+		{ "id": "0304", "name": "华夏银行" },
+		{ "id": "0305", "name": "中国民生银行" },
+		{ "id": "0306", "name": "广东发展银行" },
+		{ "id": "0307", "name": "平安银行" },
+		{ "id": "0308", "name": "招商银行" },
+		{ "id": "0309", "name": "兴业银行" },
+		{ "id": "0310", "name": "上海浦东发展银行" },
+		{ "id": "0313", "name": "城市商业银行" },
+		{ "id": "03131610", "name": "晋商银行" },
+		{ "id": "03132210", "name": "盛京银行" },
+		{ "id": "05083000", "name": "江苏银行" },
+		{ "id": "04233310", "name": "杭州银行" },
+		{ "id": "03133450", "name": "浙江泰隆商业银行" },
+		{ "id": "03134510", "name": "齐鲁银行" },
+		{ "id": "03134530", "name": "齐商银行" },
+		{ "id": "03134580", "name": "潍坊银行" },
+		{ "id": "03134680", "name": "德州银行" },
+		{ "id": "03135210", "name": "汉口银行" },
+		{ "id": "03135220", "name": "黄石银行" },
+		{ "id": "03136110", "name": "广西北部湾银行" },
+		{ "id": "03136620", "name": "遂宁银行" },
+		{ "id": "03136730", "name": "南充银行" },
+		{ "id": "03143020", "name": "江苏锡州农村商业银行" },
+		{ "id": "03143040", "name": "江苏江南农村商业银行" },
+		{ "id": "03143055", "name": "江苏常熟农村商业银行" },
+		{ "id": "0315", "name": "恒丰银行" },
+		{ "id": "0316", "name": "浙商银行" },
+		{ "id": "0317", "name": "农村合作银行" },
+		{ "id": "0318", "name": "渤海银行" },
+		{ "id": "0319", "name": "徽商银行" },
+		{ "id": "0320", "name": "镇银行有限责任公司" },
+		{ "id": "0401", "name": "城市信用社" },
+		{ "id": "04012900", "name": "上海银行" },
+		{ "id": "0402", "name": "农信银" },
+		{ "id": "04021000", "name": "北京农商行" },
+		{ "id": "04021770", "name": "尧都农信社" },
+		{ "id": "04023010", "name": "南京市区农村信用社" },
+		{ "id": "04023310", "name": "杭州联合银行" },
+		{ "id": "04023320", "name": "宁波市农村合作信用联社" },
+		{ "id": "04023610", "name": "合肥科技农村商业银行" },
+		{ "id": "04023620", "name": "芜湖扬子农村商业银行" },
+		{ "id": "04024210", "name": "江西农信社" },
+		{ "id": "04024211", "name": "南昌洪都农村商业银行营业部" },
+		{ "id": "04024560", "name": "烟台市芝罘区农村信用社" },
+		{ "id": "04024750", "name": "菏泽市牡丹区城区农村信用社" },
+		{ "id": "04025210", "name": "武汉农村商业银行" },
+		{ "id": "04025840", "name": "深圳农村商业银行" },
+		{ "id": "04025880", "name": "顺德农村商业银行" },
+		{ "id": "04026530", "name": "重庆农商行" },
+		{ "id": "0403", "name": "中国邮政储蓄银行" },
+		{ "id": "04031000", "name": "北京银行" },
+		{ "id": "04035810", "name": "广东邮政储蓄银行" },
+		{ "id": "04053910", "name": "福州银行" },
+		{ "id": "04083320", "name": "宁波银行" },
+		{ "id": "04123330", "name": "温州银行" },
+		{ "id": "04135810", "name": "广州银行" },
+		{ "id": "04202220", "name": "大连银行" },
+		{ "id": "04243010", "name": "南京银行" },
+		{ "id": "04256020", "name": "东莞银行" },
+		{ "id": "04296510", "name": "成都银行" },
+		{ "id": "04422610", "name": "哈尔滨银行" },
+		{ "id": "04447910", "name": "西安银行" },
+		{ "id": "04484220", "name": "南昌银行" },
+		{ "id": "04504520", "name": "青岛银行" },
+		{ "id": "04554732", "name": "日照银行" },
+		{ "id": "04615510", "name": "长沙银行" },
+		{ "id": "04643970", "name": "泉州银行" },
+		{ "id": "04652280", "name": "营口银行" },
+		{ "id": "04814650", "name": "威海商业银行" },
+		{ "id": "0501", "name": "汇丰银行" },
+		{ "id": "0502", "name": "东亚银行" },
+		{ "id": "0503", "name": "南洋商业银行" },
+		{ "id": "0504", "name": "恒生银行(中国)有限公司" },
+		{ "id": "0505", "name": "中国银行(香港)有限公司" },
+		{ "id": "0506", "name": "集友银行有限公司" },
+		{ "id": "0507", "name": "创兴银行有限公司" },
+		{ "id": "0509", "name": "星展银行(中国)有限公司" },
+		{ "id": "0510", "name": "永亨银行(中国)有限公司" },
+		{ "id": "0512", "name": "永隆银行" },
+		{ "id": "0531", "name": "花旗银行(中国)有限公司" },
+		{ "id": "0532", "name": "美国银行有限公司" },
+		{ "id": "0533", "name": "摩根大通银行(中国)有限公司" },
+		{ "id": "0561", "name": "三菱东京日联银行(中国)有限公司" },
+		{ "id": "0563", "name": "日本三井住友银行股份有限公司" },
+		{ "id": "0564", "name": "瑞穗实业银行(中国)有限公司" },
+		{ "id": "0565", "name": "日本山口银行股份有限公司" },
+		{ "id": "0591", "name": "韩国外换银行股份有限公司" },
+		{ "id": "0593", "name": "友利银行(中国)有限公司" },
+		{ "id": "0594", "name": "韩国产业银行" },
+		{ "id": "0595", "name": "新韩银行(中国)有限公司" },
+		{ "id": "0596", "name": "韩国中小企业银行有限公司" },
+		{ "id": "0597", "name": "韩亚银行(中国)有限公司" },
+		{ "id": "0621", "name": "华侨银行(中国)有限公司" },
+		{ "id": "0622", "name": "大华银行(中国)有限公司" },
+		{ "id": "0623", "name": "星展银行(中国)有限公司" },
+		{ "id": "0631", "name": "泰国盘谷银行(大众有限公司)" },
+		{ "id": "0641", "name": "奥地利中央合作银行股份有限公司" },
+		{ "id": "0651", "name": "比利时联合银行股份有限公司" },
+		{ "id": "0652", "name": "比利时富通银行有限公司" },
+		{ "id": "0661", "name": "荷兰银行" },
+		{ "id": "0662", "name": "荷兰安智银行股份有限公司" },
+		{ "id": "0671", "name": "渣打银行" },
+		{ "id": "0672", "name": "英国苏格兰皇家银行公众有限公司" },
+		{ "id": "0691", "name": "法国兴业银行(中国)有限公司" },
+		{ "id": "0694", "name": "法国东方汇理银行股份有限公司" },
+		{ "id": "0695", "name": "法国外贸银行股份有限公司" },
+		{ "id": "0711", "name": "德国德累斯登银行股份公司" },
+		{ "id": "0712", "name": "德意志银行(中国)有限公司" },
+		{ "id": "0713", "name": "德国商业银行股份有限公司" },
+		{ "id": "0714", "name": "德国西德银行股份有限公司" },
+		{ "id": "0715", "name": "德国巴伐利亚州银行" },
+		{ "id": "0716", "name": "德国北德意志州银行" },
+		{ "id": "0732", "name": "意大利联合圣保罗银行股份有限公司" },
+		{ "id": "0741", "name": "瑞士信贷银行股份有限公司" },
+		{ "id": "0742", "name": "瑞士银行" },
+		{ "id": "0751", "name": "加拿大丰业银行有限公司" },
+		{ "id": "0752", "name": "加拿大蒙特利尔银行有限公司" },
+		{ "id": "0761", "name": "澳大利亚和新西兰银行集团有限公司" },
+		{ "id": "0771", "name": "摩根士丹利国际银行(中国)有限公司" },
+		{ "id": "0775", "name": "联合银行(中国)有限公司" },
+		{ "id": "0776", "name": "荷兰合作银行有限公司" },
+		{ "id": "0781", "name": "厦门国际银行" },
+		{ "id": "0782", "name": "法国巴黎银行(中国)有限公司" },
+		{ "id": "0785", "name": "华商银行" },
+		{ "id": "0787", "name": "华一银行" },
+		{ "id": "0969", "name": "(澳门地区)银行" },
+		{ "id": "0989", "name": "(香港地区)银行" },
+		{ "id": "14055810", "name": "广州市农村信用社" },
+		{ "id": "14075882", "name": "南海市农村信用社" },
+		{ "id": "04025210", "name": "武汉农商银行" },
+		{ "id": "14156020", "name": "东莞农商银行" },
+		{ "id": "40258801", "name": "佛山市禅城区农村信用" }
+	]
+}

src/views/finance/account/components/EditModal.vue

@@ -0,0 +1,280 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      :rules="formRules"
+      size="mini"
+      label-suffix=":"
+      label-width="150px"
+    >
+      <!-- <p class="card">原绑定信息</p>
+        <el-form-item label="原持卡人姓名" prop="cardName">
+        <el-input v-model="formData.cardName" />
+        </el-form-item>
+        <el-form-item label="原银行卡号" prop="oldCardNumber">
+        <el-input v-model="formData.oldCardNumber" />
+        </el-form-item>
+        <p class="card">新绑定信息</p> -->
+      <el-form-item label="账户类型" prop="bankType">
+        <el-radio-group v-model="formData.bankType">
+          <el-radio :label="1">对公</el-radio>
+          <el-radio :label="2">对私</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="持卡人姓名" prop="cardName">
+        <el-input
+          v-model="formData.cardName" maxlength="20"
+          @blur="(e) => e.target.value.replace(cardNameReg, '')"
+        />
+      </el-form-item>
+      <el-form-item label="卡号" prop="cardNumber">
+        <el-input v-model="formData.cardNumber" maxlength="19" />
+      </el-form-item>
+      <el-form-item label="银行" prop="bank">
+        <el-select v-model="formData.bank" filterable placeholder="请选择所属银行">
+          <el-option v-for="item in bankList" :key="item.dictName" :label="item.dictName" :value="item.dictId" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="注册手机号" prop="phone">
+        <el-input v-model="formData.phone" maxlength="11" style="width: 120px;" />
+        <el-button style="margin-left: 10px;" type="primary" :loading="codeLoading" @click="handleSendCode(formData.phone)">
+          <span v-if="!codeLoading">获取验证码</span>
+          <span v-else>{{ codeCount }} s</span>
+        </el-button>
+      </el-form-item>
+      <el-form-item label="验证码" prop="code">
+        <el-input
+          v-model="formData.code" oninput="value=value.replace(/[^\d]/g,'')" maxlength="6"
+          style="width: 120px;"
+        />
+      </el-form-item>
+      <el-form-item v-if="formData.bankType === 1" label="开户行所在省市" prop="city">
+        <el-cascader
+          v-model="regionArrDialog" :props="regionProps" size="large" placeholder="请选择区域"
+          @change="((formData.province = regionArrDialog[0]) || true) && (formData.city = regionArrDialog[1])"
+        ></el-cascader>
+        <!-- <div v-if="formData.areaId">已选ID：{{ formData.areaId }}</div> -->
+      </el-form-item>
+      <el-form-item v-if="formData.bankType === 1" label="开户行详细名称" prop="bankName">
+        <el-input v-model="formData.bankName" placeholder="请输入开户行详细名称" />
+      </el-form-item>
+      <el-form-item v-if="formData.bankType === 1" label="开户行的联行号" prop="unionBank">
+        <el-input v-model="formData.unionBank" placeholder="请输入支付行号" />
+      </el-form-item>
+      <el-form-item v-if="formData.bankType === 1" label="银行代码" prop="bankCode">
+        <el-select v-model="formData.bankCode" size="mini" placeholder="请选择银行代码">
+          <el-option v-for="(item, index) in bankCodeList" :key="index" :label="`${item.id}（${item.name}）`" :value="item.id" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="mini" @click="handleClose">取 消</el-button>
+      <el-button type="primary" size="mini" @click="handleSubmit">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getSelect, getCode, bankUpdate, bankAdd } from '@/api/account'
+import { searchParentId } from '@/api/threeSelection'
+import bankCodeData from '../bankCode.json'
+
+export default {
+  name: 'EditModal',
+  components: {
+  },
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '820px',
+        title: ''
+      },
+      visible: false,
+      formData: {
+        id: '',
+        // oldCardNumber: '',
+        // oldPhone: '',
+        cardName: '',
+        cardNumber: '',
+        bank: '',
+        phone: '',
+        code: '',
+        bankType: '',
+        province: '',
+        city: '',
+        bankName: '',
+        unionBank: '',
+        bankCode: ''
+      },
+      formRules: {
+        cardName: [
+          { required: true, message: '请输入持卡人姓名', trigger: 'blur' }
+        ],
+        cardNumber: [
+          { required: true, message: '请输入正确银行卡号，卡号必须为以数字开头，10~19位的卡号！！！', trigger: 'blur' }
+        ],
+        phone: [ { required: true, message: '请输入手机号', trigger: 'blur' } ],
+        code: [ { required: true, message: '请输入验证码', trigger: 'blur' } ],
+        bank: [ { required: true, message: '请输入选择银行', trigger: 'blur' } ],
+        // oldCardNumber: [
+        //   { required: true, message: '请输入原银行卡号', trigger: 'blur' }
+        // ],
+        bankType: [ { required: true, message: '请选择账户类型' } ],
+        city: [ { required: true, message: '请选择开户行所在省市' } ],
+        bankName: [ { required: true, message: '请输入开户行详细名称' } ],
+        unionBank: [ { required: true, message: '请输入开户行的联行号' } ],
+        bankCode: [ { required: true, message: '请输入银行代码' } ]
+      },
+      cardNameReg: /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、' ']/g,
+      bankList: [],
+      codeTimer: '',
+      codeLoading: false,
+      codeCount: '',
+      regionArrDialog: [],
+      regionProps: {
+        lazy: true,
+        label: 'name',
+        value: 'shortName',
+        lazyLoad(node, resolve) {
+          const { level, value, data } = node
+          if (level === 0) {
+            searchParentId({ parentId: 0 }).then((res) => {
+              resolve(res.data)
+            })
+          } else if (level != 0) {
+            searchParentId({ parentId: data.id }).then((res) => {
+              resolve(res.data.map((item) => {
+                item.leaf = level === 1
+                return item
+              }))
+            })
+          }
+        }
+      },
+      bankCodeList: bankCodeData.data
+    }
+  },
+  watch: {
+    'formData.bankType': {
+      deep: true,
+      handler(val) {
+        if (val === 1) {
+          this.formRules.city = [ { required: true, message: '请选择开户行所在省市' } ]
+          this.formRules.bankName = [ { required: true, message: '请输入开户行详细名称' } ]
+          this.formRules.unionBank = [ { required: true, message: '请输入开户行的联行号' } ]
+          this.formRules.bankCode = [ { required: true, message: '请输入银行代码' } ]
+        } else {
+          this.formRules.city = []
+          this.formRules.bankName = []
+          this.formRules.unionBank = []
+          this.formRules.bankCode = []
+        }
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    // 获取验证码
+    async handleSendCode(phone) {
+      if (phone === '') {
+        this.$message.error('请填写电话号码')
+        return
+      } else if (!/^1[3-9]\d{9}$/.test(phone)) {
+        this.$message({
+          message: '请输入正确手机号',
+          type: 'warning'
+        })
+        return false
+      }
+      if (!this.codeTimer) {
+        const res = await getCode({ phone })
+        if (res.code === '') {
+          this.$message({
+            message: '发送成功，请注意查看手机短信',
+            type: 'success'
+          })
+        }
+        this.codeLoading = true
+        this.codeCount = 60
+        this.codeTimer = setInterval(() => {
+          if (this.codeCount > 0 && this.codeCount <= 60) {
+            this.codeCount--
+          } else {
+            clearInterval(this.codeTimer) // 清除定时器
+            this.codeTimer = null
+            this.codeLoading = false
+          }
+        }, 1000)
+      }
+    },
+    async getBankList() {
+      const res = await getSelect({ dictName: '所属银行' })
+      this.bankList = res.data
+    },
+    initList() {
+      this.getBankList()
+    },
+    handleOpen(params = {}) {
+      this.modalOptions.title = params.id ? '更换银行卡' : '绑定银行卡'
+      this.formData = Object.assign(this.$options.data().formData, params)
+      if (this.formData.province && this.formData.city) this.regionArrDialog = [this.formData.province, this.formData.city]
+      else if (this.formData.province) this.regionArrDialog = [this.formData.province, '']
+      this.visible = true
+      this.initList()
+      if (params.id) { // 关联店铺Id
+        // this.getInfo(params.id)
+      } else {
+        this.$refs.formData && this.$refs.formData.resetFields()
+      }
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await xxx({ id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+          id: res.data.id || ''
+        })
+        this.$nextTick(() => {
+          this.$refs.formData && this.$refs.formData.validate()
+        })
+      } finally {
+        loading.close()
+      }
+    },
+    handleSubmit() {
+      console.log(this.formData)
+      this.$refs.formData.validate(async (valid) => {
+        if (valid) {
+          const loading = this.$loading({ text: '提交中，请稍候……' })
+          try {
+            const { ...otps } = this.formData
+            const params = {
+              ...otps
+            }
+            this.formData.id ? await bankUpdate(params) : await bankAdd(params)
+            loading.close()
+            this.$message({ message: `${this.formData.id ? '编辑' : '添加'}成功!`, type: 'success' })
+            this.$emit('success')
+            this.visible = false
+          } catch (e) {
+            loading.close()
+          } finally {
+            loading.close()
+          }
+        } else {
+          this.$message({ message: '请输入相关信息', type: 'warning' })
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+

src/views/finance/account/components/UnBindBank.vue

@@ -0,0 +1,141 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+    append-to-body
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      :rules="formRules"
+      size="mini"
+      label-suffix=":"
+      label-width="150px"
+    >
+      <el-form-item label="注册手机号" prop="phone">
+        <el-input v-model="formData.phone" maxlength="11" placeholder="注册手机号" disabled style="width: 120px;" />
+        <el-button style="margin-left: 10px;" type="primary" :loading="codeLoading" @click="handleSendCode(formData.phone)">
+          <span v-if="!codeLoading">获取验证码</span>
+          <span v-else>{{ codeCount }} s</span>
+        </el-button>
+      </el-form-item>
+      <el-form-item label="验证码" prop="code">
+        <el-input
+          v-model="formData.code" oninput="value=value.replace(/[^\d]/g,'')" maxlength="6"
+          style="width: 120px;"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button size="mini" @click="handleClose">取 消</el-button>
+        <el-button type="primary" size="mini" @click="handleSubmit">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { getCode, bankDelete } from '@/api/account'
+
+export default {
+  name: 'UnBindBank',
+  components: {
+  },
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '620px',
+        title: ''
+      },
+      visible: false,
+      formData: {
+        phone: '',
+        code: ''
+      },
+      formRules: {
+        phone: [ { required: true, message: '缺少注册手机号' } ],
+        code: [ { required: true, message: '请输入验证码' } ]
+      },
+      codeTimer: '',
+      codeLoading: false,
+      codeCount: ''
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    // 获取验证码
+    async handleSendCode(phone) {
+      if (phone === '') {
+        this.$message.error('请填写电话号码')
+        return
+      } else if (!/^1[3-9]\d{9}$/.test(phone)) {
+        this.$message({
+          message: '请输入正确手机号',
+          type: 'warning'
+        })
+        return false
+      }
+      if (!this.codeTimer) {
+        const res = await getCode({ phone })
+        if (res.code === '') {
+          this.$message({
+            message: '发送成功，请注意查看手机短信',
+            type: 'success'
+          })
+        }
+        this.codeLoading = true
+        this.codeCount = 60
+        this.codeTimer = setInterval(() => {
+          if (this.codeCount > 0 && this.codeCount <= 60) {
+            this.codeCount--
+          } else {
+            clearInterval(this.codeTimer) // 清除定时器
+            this.codeTimer = null
+            this.codeLoading = false
+          }
+        }, 1000)
+      }
+    },
+    initList() {
+    },
+    handleOpen(params = {}) {
+      this.modalOptions.title = '解绑银行卡'
+      this.formData.phone = params.phone
+      // this.formData = Object.assign(this.$options.data().formData, params)
+      this.visible = true
+      this.initList()
+      this.$refs.formData && this.$refs.formData.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.formData.validate(async (valid) => {
+        if (valid) {
+          const loading = this.$loading({ text: '加载中' })
+          try {
+            const { ...otps } = this.formData
+            const params = {
+              ...otps
+            }
+            await bankDelete(params)
+            loading.close()
+            this.$message({ message: `解绑成功!`, type: 'success' })
+            this.$emit('success')
+            this.visible = false
+          } catch (e) {
+            loading.close()
+          } finally {
+            loading.close()
+          }
+        } else {
+          this.$message({ message: '请输入相关信息', type: 'warning' })
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+

src/views/finance/account/index.vue

@@ -25,8 +25,8 @@
           </div>
           <!-- 按钮 -->
           <div class="btnList">
-            <div class="cutBank" @click="delBank(2)">解绑</div>
-            <div class="changeBank" @click="replaceCard(3)">更换</div>
+            <div class="cutBank" @click="$refs.UnBindBank && $refs.UnBindBank.handleOpen(bankArr)">解绑</div>
+            <div class="changeBank" @click="$refs.EditModal && $refs.EditModal.handleOpen({ ...bankArr, id: bankArr.shopId })">更换</div>
           </div>
         </div>
       </div>
@@ -47,345 +47,47 @@
           </div>
           <!-- 按钮 -->
           <div class="btnList">
-            <div class="changeBank" @click="bindCard(1)">立即绑定</div>
+            <div class="changeBank" @click="$refs.EditModal && $refs.EditModal.handleOpen({ id: '' })">立即绑定</div>
           </div>
         </div>
       </div>
     </el-card>
 
-    <!-- 弹框开始 -->
-    <el-dialog
-      :title="dialogData.title" :visible.sync="dialogData.isVisible" width="500px" :close-on-click-modal="false"
-      center @close="closeDialog"
-    >
-      <!-- 绑定银行卡 -->
-      <el-form v-if="dialogData.type === 1" ref="form" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="持卡人姓名" prop="cardName">
-          <el-input v-model="form.cardName" maxlength="20" @onblur="btKeyUp" />
-        </el-form-item>
-        <el-form-item label="卡号" prop="cardNumber">
-          <el-input v-model="form.cardNumber" maxlength="19" oninput="value=value.replace(/[^\d]/g,'')" />
-        </el-form-item>
-        <el-form-item label="银行" prop="bank">
-          <el-select v-model="form.bank" filterable placeholder="请选择所属银行">
-            <el-option v-for="item in options" :key="item.dictName" :label="item.dictName" :value="item.dictId" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="注册手机号" prop="phone">
-          <el-input
-            v-model="form.phone" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11"
-            style="width: 120px;"
-          />
-          <el-button class="sendCode" type="primary" :loading="codeloading" @click="sendCode(form.phone)">
-            <span v-if="!codeloading">获取验证码</span>
-            <span v-else>{{ count }} s</span>
-          </el-button>
-        </el-form-item>
-        <el-form-item label="验证码" prop="code">
-          <el-input v-model="form.code" style="width: 120px;" oninput="value=value.replace(/[^\d]/g,'')" maxlength="6" />
-        </el-form-item>
-      </el-form>
-      <!-- 解绑 -->
-      <el-form v-if="dialogData.type === 2" ref="unbind" :model="unbinds" :rules="rules" label-width="120px">
-        <el-form-item label="注册手机号" prop="phone">
-          <el-input v-model="unbinds.phone" maxlength="11" style="width: 120px;" />
-          <el-button class="sendCode" type="primary" :loading="codeloading" @click="sendCode(unbinds.phone)">
-            <span v-if="!codeloading">获取验证码</span>
-            <span v-else>{{ count }} s</span>
-          </el-button>
-        </el-form-item>
-        <el-form-item label="验证码" prop="code">
-          <el-input v-model="unbinds.code" style="width: 120px;" />
-        </el-form-item>
-      </el-form>
-      <!-- 更换银行卡 -->
-      <el-form v-if="dialogData.type === 3" ref="card" :model="card" :rules="rules" label-width="120px">
-        <!-- <p class="card">原绑定信息</p>
-          <el-form-item label="原持卡人姓名" prop="cardName">
-          <el-input v-model="card.cardName" />
-          </el-form-item>
-          <el-form-item label="原银行卡号" prop="oldCardNumber">
-          <el-input v-model="card.oldCardNumber" />
-          </el-form-item>
-          <p class="card">新绑定信息</p> -->
-        <el-form-item label="持卡人姓名" prop="cardName">
-          <el-input v-model="card.cardName" maxlength="20" @onblur="btKeyUp" />
-        </el-form-item>
-        <el-form-item label="卡号" prop="cardNumber">
-          <el-input
-            v-if="cardNumberShow" :value="hidden(card.cardNumber, 3, 4)" oninput="value=value.replace(/[^\d]/g,'')"
-            maxlength="19" @focus="focusCardNunberInput"
-          />
-          <el-input v-else v-model="card.cardNumber" maxlength="19" oninput="value=value.replace(/[^\d]/g,'')" />
-        </el-form-item>
-        <el-form-item label="银行" prop="bank">
-          <el-select v-model="card.bank" filterable placeholder="请选择所属银行">
-            <el-option v-for="item in options" :key="item.dictName" :label="item.dictName" :value="item.dictId" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="注册手机号" prop="phone">
-          <el-input
-            v-if="phoneShow" :value="hidden(card.phone, 3, 4)" oninput="value=value.replace(/[^\d]/g,'')"
-            maxlength="11" style="width: 120px;" @focus="focusPhoneInput"
-          />
-          <el-input
-            v-else v-model="card.phone" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11"
-            style="width: 120px;"
-          />
-          <el-button class="sendCode" type="primary" :loading="codeloading" @click="sendCode(card.phone)">
-            <span v-if="!codeloading">获取验证码</span>
-            <span v-else>{{ count }} s</span>
-          </el-button>
-        </el-form-item>
-        <el-form-item label="验证码" prop="code">
-          <el-input v-model="card.code" oninput="value=value.replace(/[^\d]/g,'')" maxlength="6" style="width: 120px;" />
-        </el-form-item>
-      </el-form>
-      <p slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="confirm(formList[dialogData.type])">{{ dialogData.confirm || '确定' }}</el-button>
-        <el-button @click="dialogData.isVisible = false">取 消</el-button>
-      </p>
-    </el-dialog>
+    <!-- 新增编辑 -->
+    <EditModal ref="EditModal" @success="getList" />
+    <!-- 解绑银行卡 -->
+    <UnBindBank ref="UnBindBank" @success="getList" />
   </div>
 </template>
 
 <script>
-import {
-  accountGetById,
-  getSelect,
-  bankDelete,
-  bankUpdate,
-  bankAdd,
-  getCode
-} from '@/api/account'
+import EditModal from './components/EditModal'
+import UnBindBank from './components/UnBindBank'
+import { accountGetById } from '@/api/account'
 import defaultBank from '@/assets/images/bank/default_bank_3x.png'
-const TIME_COUNT = 60 // 更改倒计时时间
+
 export default {
+  name: 'Account',
+  components: {
+    EditModal,
+    UnBindBank
+  },
   data() {
     return {
       err: '账&#12288;号：',
-      bankArr: '',
+      bankArr: {},
       show: true,
-      codeloading: false,
-      dialogData: {},
-      count: '',
-      mobile: '13444444444',
-      options: [],
-      formList: {
-        1: 'form',
-        2: 'unbind',
-        3: 'card'
-      },
-      // 绑定银行卡
-      form: {
-        cardName: '',
-        cardNumber: '',
-        bank: '',
-        phone: '',
-        code: ''
-      },
-      // 解绑
-      unbinds: {
-        phone: '',
-        code: ''
-      },
-      // 更换
-      card: {
-        cardName: '',
-        cardNumber: '',
-        bank: '',
-        phone: '',
-        code: ''
-      },
-      rules: {
-        cardName: [
-          { required: true, message: '请输入持卡人姓名', trigger: 'blur' }
-        ],
-        cardNumber: [
-          { required: true, message: '请输入银行卡号', trigger: 'blur' }
-        ],
-        phone: [ { required: true, message: '请输入手机号', trigger: 'blur' } ],
-        code: [ { required: true, message: '请输入验证码', trigger: 'blur' } ],
-        bank: [ { required: true, message: '请输入选择银行', trigger: 'blur' } ],
-        oldCardNumber: [
-          { required: true, message: '请输入原银行卡号', trigger: 'blur' }
-        ]
-      },
       privacyTime: 0,
-      cardNumberShow: true, // 是否显示卡号脱敏
-      phoneShow: true, // 是否显示手机号脱敏
-      oldCardNumber: '',
-      oldPhone: '',
       defaultBank
     }
   },
   created() {
-    this.bankDetails()
-    this.bankName()
+    this.getList()
     this.privacyTime = localStorage.getItem('privacyTime')
-    console.log(this.privacyTime)
   },
   methods: {
-    closeDialog() {
-      this.card.cardNumber = this.card.cardNumber ? this.card.cardNumber : this.oldCardNumber
-      this.card.phone = this.card.phone ? this.card.phone : this.oldPhone
-    },
-    focusPhoneInput() {
-      this.phoneShow = false,
-      this.card.phone = ''
-    },
-    focusCardNunberInput() {
-      this.cardNumberShow = false
-      this.card.cardNumber = ''
-    },
-    // 获取验证码
-    async sendCode(phone) {
-      var myreg = /^1[3-9]\d{9}$/
-      if (phone === '') {
-        this.$message.error('请填写电话号码')
-        return
-      } else if (!myreg.test(phone)) {
-        this.$message({
-          message: '请输入正确手机号',
-          type: 'warning'
-        })
-        return false
-      }
-      if (!this.timer) {
-        const res = await getCode({ phone })
-        if (res.code === '') {
-          this.$message({
-            message: '发送成功，请注意查看手机短信',
-            type: 'success'
-          })
-        }
-        this.codeloading = true
-        this.count = TIME_COUNT
-        this.timer = setInterval(() => {
-          if (this.count > 0 && this.count <= TIME_COUNT) {
-            this.count--
-          } else {
-            this.show = true
-            clearInterval(this.timer) // 清除定时器
-            this.timer = null
-            this.codeloading = false
-          }
-        }, 1000)
-      }
-    },
-    btKeyUp(e) {
-      e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、' ']/g, '')
-    },
-    // 解绑
-    async unbind(v) {
-      const res = await bankDelete(this.unbinds)
-      if (res.code === '') {
-        this.$message({
-          message: '解绑成功',
-          type: 'success'
-        })
-        this.bankDetails()
-        this.dialogData.isVisible = false
-      }
-    },
-    // 更换银行卡
-    replaceCard(v) {
-      this.dialogData = {
-        title: '更换银行卡',
-        isVisible: true,
-        confirm: '更换',
-        type: v
-      }
-      this.card = this.bankArr
-      this.cardNumberShow = true
-      this.oldCardNumber = this.card.cardNumber
-      this.oldPhone = this.card.phone
-    },
-    // 绑定银行卡
-    bindCard(v) {
-      this.dialogData = {
-        title: '绑定银行卡',
-        isVisible: true,
-        confirm: '绑定',
-        type: v
-      }
-      this.card = {
-        cardName: '',
-        cardNumber: '',
-        bank: '',
-        phone: '',
-        code: ''
-      }
-    },
-    // 解绑银行卡
-    delBank(v) {
-      this.dialogData = {
-        title: '解绑银行卡',
-        isVisible: true,
-        confirm: '解绑',
-        type: v
-      }
-    },
-    // 确认
-    confirm(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          console.log(formName)
-          if (formName === 'card') {
-            this.changeBank()
-          } else if (formName === 'form') {
-            this.addBank()
-          } else if (formName === 'unbind') {
-            this.unbind()
-          }
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    },
-    // 更换账户
-    async changeBank() {
-      var regExp = /^([1-9]{1})(\d{8,17})$/
-      if (!regExp.test(this.card.cardNumber)) {
-        this.$message({
-          message: '请输入正确银行卡号，卡号必须为以数字开头，10~19位的卡号！！！',
-          type: 'warning'
-        })
-        return false
-      }
-      const res = await bankUpdate(this.card)
-      if (res.code === '') {
-        this.$message({
-          message: '更换成功',
-          type: 'success'
-        })
-        this.bankDetails()
-        this.dialogData.isVisible = false
-      }
-    },
-    // 绑定账户
-    async addBank() {
-      var regExp = /^([1-9]{1})(\d{8,17})$/
-      if (!regExp.test(this.form.cardNumber)) {
-        this.$message({
-          message: '请输入正确银行卡号，卡号必须为以数字开头，10~19位的卡号！！！',
-          type: 'warning'
-        })
-        return false
-      }
-      const res = await bankAdd(this.form)
-      if (res.code === '') {
-        this.$message({
-          message: '绑定成功',
-          type: 'success'
-        })
-        this.bankDetails()
-        this.dialogData.isVisible = false
-      }
-    },
     // 查询账户
-    async bankDetails() {
+    async getList() {
       const res = await accountGetById({})
       if (res.code === '') {
         console.log(JSON.stringify(res.data))
@@ -398,11 +100,6 @@ export default {
         console.log(this.show)
       }
     },
-    async bankName() {
-      const res = await getSelect({ dictName: '所属银行' })
-      this.options = res.data
-      console.log(this.options)
-    },
     // 中间部分
     hidden(str, frontLen, endLen) {
       if (str && frontLen && endLen) {

src/views/selectionCenter/distributionPricingPlan/components/DetailModal.vue

@@ -11,7 +11,7 @@
       label-suffix=":"
       label-width="200px"
     >
-      <!-- 定时任务信息 -->
+      <!-- 定价方案信息 -->
       <el-form-item label="定价方案ID" prop="priceId">
         {{ formData.priceId || '--' }}
       </el-form-item>

src/views/selectionCenter/distributionPricingPlan/components/EditModal.vue

@@ -137,6 +137,7 @@ export default {
     },
     handleOpen(params = {}) {
       this.modalOptions.title = params.priceId ? '编辑定价方案' : '添加定价方案'
+      this.formData = Object.assign(this.$options.data().formData, params)
       this.visible = true
       this.initList()
       if (params.priceId) {

src/views/selectionCenter/productSelectionList/components/SelectionAddModal.vue

@@ -107,6 +107,7 @@ export default {
       this.getGroupDataList()
       this.formData.productId = params.productId
       this.formData.shopParentId = params.shopId
+      // this.formData = Object.assign(this.$options.data().formData, params)
       this.visible = true
       this.$refs.formData && this.$refs.formData.resetFields()
     },

vue.config.js

@@ -51,6 +51,7 @@ module.exports = {
       '/canvasApi': {
         // target: 'http://192.168.0.91:9104', // 测试
         target: 'https://nsbusinessapitest.tuanfengkeji.cn',
+        // target: 'https://nsbusinessapi.tuanfengkeji.cn',
         changeOrigin: true,
         pathRewrite: {
           '^/canvasApi': ''