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

.env.development

@@ -7,7 +7,9 @@ VUE_APP_BASE_API = '/dev-api'
 # 开发环境
 # VUE_APP_DOMAIN_PREFIX = 'http://192.168.0.91:9003'
 # 线上
+VUE_APP_DOMAIN_TUAN = 'https://www.tuanfengkeji.cn:9527/dts-app-api'
 VUE_APP_DOMAIN_PREFIX = 'https://nsadminapi.tuanfengkeji.cn'
 # 演示环境
 # VUE_APP_DOMAIN_PREFIX = 'http://192.168.0.91:9003'
+VUE_APP_DOMAIN_TUAN = '/tuan'
 VUE_APP_DOMAIN_PREFIX = '/api'

.env.production

@@ -4,4 +4,5 @@ ENV = 'production'
 # base api
 VUE_APP_BASE_API = '/prod-api'
 
+VUE_APP_DOMAIN_TUAN = 'https://www.tuanfengkeji.cn:9527/dts-app-api'
 VUE_APP_DOMAIN_PREFIX = 'https://nsadminapi.tuanfengkeji.cn'

.env.staging

@@ -9,4 +9,5 @@ VUE_APP_BASE_API = '/stage-api'
 # 线上
 # VUE_APP_DOMAIN_PREFIX = 'https://nsadminapi.tuanfengkeji.cn'
 # 测试
+VUE_APP_DOMAIN_TUAN = 'https://test.tuanfengkeji.cn:9527/dts-app-api'
 VUE_APP_DOMAIN_PREFIX = 'https://nsadminapitest.tuanfengkeji.cn'

.gitignore

@@ -13,3 +13,4 @@ tests/**/coverage/
 *.njsproj
 *.sln
 dist/
+.prettierrc

package-lock.json

@@ -27719,6 +27719,11 @@
         "parse-json": "^4.0.0"
       }
     },
+    "countup.js": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.8.0.tgz",
+      "integrity": "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ=="
+    },
     "create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -28475,7 +28480,7 @@
       "dependencies": {
         "entities": {
           "version": "2.2.0",
-          "resolved": "https://registry.npmmirror.com/entities/-/entities-2.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
           "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
           "dev": true
         }
@@ -29910,7 +29915,7 @@
       "dependencies": {
         "debug": {
           "version": "2.6.9",
-          "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "dev": true,
           "requires": {
@@ -36504,7 +36509,7 @@
       "dependencies": {
         "debug": {
           "version": "2.6.9",
-          "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "dev": true,
           "requires": {
@@ -38893,6 +38898,11 @@
       "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ==",
       "requires": {}
     },
+    "vue-countup-v2": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/vue-countup-v2/-/vue-countup-v2-4.0.0.tgz",
+      "integrity": "sha512-XjKeHo1ndRlJtXvHd6B1eWOpbrJDdNU3rdYZwVPv2YlUXbvthsBT4kms5Fc/mn9RdXPrMX2H/ktAAQtKjWFisw=="
+    },
     "vue-eslint-parser": {
       "version": "9.4.2",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz",

package.json

@@ -17,6 +17,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "axios": "0.18.1",
     "core-js": "3.6.5",
+    "countup.js": "^2.8.0",
     "echarts": "^4.9.0",
     "element-ui": "^2.15.12",
     "es6-promise": "^4.2.8",
@@ -32,6 +33,7 @@
     "swiper": "^5.4.5",
     "vue": "^2.6.14",
     "vue-awesome-swiper": "^4.1.1",
+    "vue-countup-v2": "^4.0.0",
     "vue-lang": "^0.2.5",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.6",

src/api/active/combinationActivities.js

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import tuanRequest from '@/utils/tuanRequest'
 
 // 分页查询平台组合活动配置
 export function getPlatformComposeConfigPage(data) {
@@ -117,3 +118,12 @@ export function getPlatformComposeData(data) {
   })
 }
 
+// 分页查询平台组合活动配置
+export function getCommunityServerInfoList(data) {
+  return tuanRequest({
+    url: '/third/community/serverInfoList',
+    method: 'post',
+    data
+  })
+}
+

src/api/home.js

@@ -25,3 +25,14 @@ export function homeGetFormData() {
     method: 'post'
   })
 }
+
+
+/**
+ * @description 获取首页统计信息
+ */
+export function getHomeStatisticsData() {
+  return request({
+    url: '/home/statistics',
+    method: 'get'
+  })
+}

src/api/lotteryManagement/LotteryAwards.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+// 分页查询抽奖奖项
+export function getPageLotteryItem(params) {
+  return request({
+    url: '/lotteryItem/page',
+    method: 'get',
+    params
+  })
+}
+
+// 查询抽奖奖项
+export function getByIdLotteryItem(params) {
+  return request({
+    url: '/lotteryItem/getById',
+    method: 'get',
+    params
+  })
+}
+
+// 新增抽奖奖项
+export function saveLotteryItem(data) {
+  return request({
+    url: '/lotteryItem/save',
+    method: 'post',
+    data
+  })
+}
+
+// 修改抽奖奖项
+export function updateLotteryItem(data) {
+  return request({
+    url: '/lotteryItem/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除抽奖奖项
+export function deleteByIdLotteryItem(params) {
+  return request({
+    url: '/lotteryItem/deleteById',
+    method: 'delete',
+    params
+  })
+}

src/api/lotteryManagement/LotteryPrizes.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+// 分页查询抽奖奖品
+export function getPageLotteryPrize(params) {
+  return request({
+    url: '/lotteryPrize/page',
+    method: 'get',
+    params
+  })
+}
+
+// 查询抽奖奖品
+export function getByIdLotteryPrize(params) {
+  return request({
+    url: '/lotteryPrize/getById',
+    method: 'get',
+    params
+  })
+}
+
+// 新增抽奖奖品
+export function saveLotteryPrize(data) {
+  return request({
+    url: '/lotteryPrize/save',
+    method: 'post',
+    data
+  })
+}
+
+// 修改抽奖奖品
+export function updateLotteryPrize(data) {
+  return request({
+    url: '/lotteryPrize/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除抽奖奖品
+export function deleteByIdLotteryPrize(params) {
+  return request({
+    url: '/lotteryPrize/deleteById',
+    method: 'delete',
+    params
+  })
+}

src/api/lotteryManagement/LotteryRecords.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+// 分页查询抽奖记录
+export function getPageLotteryRecord(params) {
+  return request({
+    url: '/lotteryRecord/page',
+    method: 'get',
+    params
+  })
+}
+
+// 查询抽奖记录
+export function getByIdLotteryRecord(params) {
+  return request({
+    url: '/lotteryRecord/getById',
+    method: 'get',
+    params
+  })
+}
+
+// 新增抽奖记录
+export function saveLotteryRecord(data) {
+  return request({
+    url: '/lotteryRecord/save',
+    method: 'post',
+    data
+  })
+}
+
+// 修改抽奖记录
+export function updateLotteryRecord(data) {
+  return request({
+    url: '/lotteryRecord/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除抽奖记录
+export function deleteByIdLotteryRecord(params) {
+  return request({
+    url: '/lotteryRecord/deleteById',
+    method: 'delete',
+    params
+  })
+}

src/api/lotteryManagement/lotteryActivities.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+// 分页查询抽奖活动
+export function getPageLotteryActivities(params) {
+  return request({
+    url: '/lottery/page',
+    method: 'get',
+    params
+  })
+}
+
+// 查询抽奖活动
+export function getByIdLotteryActivities(params) {
+  return request({
+    url: '/lottery/getById',
+    method: 'get',
+    params
+  })
+}
+
+// 新增抽奖活动
+export function saveLotteryActivities(data) {
+  return request({
+    url: '/lottery/save',
+    method: 'post',
+    data
+  })
+}
+
+// 修改抽奖活动
+export function updateLotteryActivities(data) {
+  return request({
+    url: '/lottery/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除抽奖活动
+export function deleteByIdLotteryActivities(params) {
+  return request({
+    url: '/lottery/deleteById',
+    method: 'delete',
+    params
+  })
+}

src/api/withdrawal.js

@@ -54,3 +54,21 @@ export function getPaymentNumber(data) {
     data
   })
 }
+
+// 商家提现处理通联查询
+export function updateWithdrawalByAllinpay(data) {
+  return request({
+    url: '/withdrawal/getByAllinpay',
+    method: 'post',
+    data
+  })
+}
+
+// 查看订单分佣列表
+export function getWithdrawalCommissionList(data) {
+  return request({
+    url: '/withdrawal/commissionList',
+    method: 'post',
+    data
+  })
+}

src/styles/element-ui.scss

@@ -61,3 +61,61 @@
     height: 32px !important;
   }
 }
+
+.dashboardPage {
+  .el-table {
+    &::before {
+      display: none !important;
+    }
+  }
+
+  .cell {
+    height: 40px !important;
+    line-height: 40px;
+    // display: flex;
+    // align-items: center;
+  }
+
+  .el-table__cell {
+    padding: 0 !important;
+    border-bottom: none !important;
+  }
+  .el-table__header-wrapper {
+    .el-table__cell {
+      background-color: #f7f8fa !important;
+      border-radius: 4px;
+    }
+  }
+
+  .el-tabs__item {
+    height: 62px !important;
+    line-height: 62px !important;
+    color: #8c8c8c;
+    font-size: 20px;
+
+    &.is-active {
+      font-weight: 600;
+      color: #3d3d3d;
+    }
+  }
+
+  .el-tabs__active-bar {
+    width: 24px !important;
+    margin-left: 18px;
+    height: 4px;
+    background-color: #495fff;
+  }
+
+  .el-tabs__nav-wrap {
+    &::after {
+      height: 1px !important;
+    }
+  }
+
+  .el-select {
+    .el-input__inner {
+      background-color: #F7F8FA;
+      border: none;
+    }
+  }
+}

src/utils/tuanRequest.js

@@ -0,0 +1,98 @@
+import Vue from 'vue'
+import axios from 'axios'
+import {
+  MessageBox,
+  Message
+} from 'element-ui'
+import store from '@/store'
+import router from '@/router'
+import {
+  getToken, removeToken
+} from '@/utils/auth'
+
+const baseURL = process.env.VUE_APP_DOMAIN_TUAN
+// create an axios instance
+Vue.prototype.axios = axios
+axios.defaults.timeout = 30000
+const service = axios.create({
+  baseURL, // url = base url + request url
+  // withCredentials: true, // send cookies when cross-domain requests
+  timeout: 30000 // request timeout
+})
+
+export const token = getToken()
+
+// request interceptor
+service.interceptors.request.use(
+  (config) => {
+    // console.log(config)
+    if (store.getters.token) {
+      config.headers['Authorization-admin'] = getToken()
+      config.headers['Content-Type'] = 'application/json; charset=UTF-8'
+      config.headers['TK-token'] = getToken()
+    }
+    return config
+  },
+  (error) => {
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// response interceptor
+service.interceptors.response.use((response) => {
+  const res = response.data
+  // console.log(res)
+  if (res.erron && res.erron === 780) {
+    Message({
+      message: '服务器内部错误' || 'Error',
+      type: 'error',
+      duration: 5 * 1000
+    })
+  } else {
+    // if the custom code is not 20000, it is judged as an error.
+    if (res.statusCode !== 20000) {
+      Message({
+        message: res.statusMsg || 'Error',
+        type: 'error',
+        duration: 5 * 1000
+      })
+
+      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+      if (
+        res.statusCode === 50008 ||
+        res.statusCode === 50012 ||
+        res.statusCode === 50014
+      ) {
+        // to re-login
+        MessageBox.confirm(
+          'You have been logged out, you can cancel to stay on this page, or log in again',
+          'Confirm logout',
+          {
+            confirmButtonText: 'Re-Login',
+            cancelButtonText: 'Cancel',
+            type: 'warning'
+          }
+        ).then(() => {
+          store.dispatch('user/resetToken').then(() => {
+            location.reload()
+          })
+        })
+      }
+      return Promise.reject(new Error(res.statusMsg || res.errmsg || 'Error'))
+      // return res;
+    }
+    return res
+  }
+  return res
+}, (error) => {
+  console.log('err' + error)// for debug
+  Message({
+    message: '登录连接超时（后台不能连接，请联系系统管理员）',
+    type: 'error',
+    duration: 5 * 1000
+  })
+  return Promise.reject(error)
+})
+
+export default service

src/views/active/combinationActivities/components/EditModal.vue

@@ -8,6 +8,13 @@
           :disabled="formData.state === 0"
         />
       </el-form-item>
+      <el-form-item label="请选择区域" prop="regionId">
+        <el-cascader
+          v-model="regionArrDialog" :props="regionProps" size="large" placeholder="请选择区域"
+          @change="formData.regionId = [ ...new Set(regionArrDialog.map(i => i[i.length - 1])) ].join(',')"
+        ></el-cascader>
+        <div v-if="String(formData.regionId)">已选ID：{{ formData.regionId }}</div>
+      </el-form-item>
       <el-form-item label="备注" prop="remark">
         <el-input
           v-model="formData.remark" maxlength="255" type="textarea" placeholder="请输入活动介绍"
@@ -70,6 +77,7 @@
 
 <script>
 import { getPlatformComposeById, savePlatformComposeActivity, updatePlatformComposeActivity } from '@/api/active/combinationActivities'
+import { getProvinceList, getChildAreaList } from '@/api/address'
 
 export default {
   name: 'EditModal',
@@ -87,6 +95,7 @@ export default {
         dateTime1: [], // 后端不接收
         dateTime2: [], // 后端不接收
         composeId: '',
+        regionId: '',
         composeName: '',
         remark: '',
         signStartTime: '',
@@ -109,6 +118,7 @@ export default {
         composeName: [
           { required: true, message: '请输入活动名称', trigger: 'blur' }
         ],
+        regionId: [ { required: true, message: '请选择地址', trigger: 'blur' } ],
         dateTime1: [
           { type: 'array', required: true, message: '请选择报名时间' }
         ],
@@ -116,6 +126,31 @@ export default {
           { type: 'array', required: true, message: '请选择活动时间' }
         ],
         bondMoney: []
+      },
+      regionArrDialog: [],
+      regionProps: {
+        checkStrictly: true,
+        multiple: true,
+        lazy: true,
+        label: 'name',
+        value: 'id',
+        lazyLoad(node, resolve) {
+          const { level, value } = node
+          if (level === 0) {
+            resolve([ { id: 0, parentId: 0, name: '全中国', shortName: '全国', longitude: '108.55', latitude: '34.32', level: 1, sort: 1, status: true } ])
+          } else if (level === 1) {
+            getProvinceList().then((res) => {
+              resolve(res.data)
+            })
+          } else if ((level != 0) && (level != 1)) {
+            getChildAreaList(value).then((res) => {
+              resolve(res.data.map((item) => {
+                item.leaf = level === 4
+                return item
+              }))
+            })
+          }
+        }
       }
     }
   },
@@ -146,6 +181,7 @@ export default {
         dateTime1: params.signTime ? params.signTime.split('~') : '',
         dateTime2: params.time ? params.time.split('~') : ''
       })
+      if (this.formData.regionId) this.regionArrDialog = this.formData.regionId.split(',').map((i) => [ i ])
       this.visible = true
       this.initList()
       if (params.composeId) {
@@ -178,6 +214,7 @@ export default {
           dateTime1: res.data.signStartTime || res.data.signEndTime ? [res.data.signStartTime, res.data.signEndTime] : '',
           dateTime2: res.data.startTime || res.data.endTime ? [res.data.startTime, res.data.endTime] : ''
         })
+        if (this.formData.regionId) this.regionArrDialog = this.formData.regionId.split(',').map((i) => [ i ])
         this.$nextTick(() => {
           this.$refs.formData && this.$refs.formData.validate()
         })

src/views/active/combinationActivities/components/RegistrationReview.vue

@@ -12,6 +12,11 @@
       label-suffix=":"
       label-width="150px"
     >
+      <el-form-item label="报名ID" prop="signId">
+        <el-input
+          v-model="formData.signId" maxlength="20" placeholder="报名ID" disabled
+        />
+      </el-form-item>
       <el-form-item label="审核状态" prop="state">
         <el-radio-group v-model="formData.state">
           <el-radio label="1">报名成功</el-radio>
@@ -71,28 +76,12 @@ export default {
     initList() {
     },
     handleOpen(params = {}) {
-      this.modalOptions.title = params.signId ? '店铺的报名审核' : '--'
+      this.modalOptions.title = '店铺的报名审核'
+      this.formData.signId = params.signId
+      // this.formData = Object.assign(this.$options.data().formData, params)
       this.visible = true
       this.initList()
-      if (params.signId) {
-        // this.getInfo(params.signId)
-      } 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, {
-          signId: res.data.signId || ''
-        })
-        this.$nextTick(() => {
-          this.$refs.formData && this.$refs.formData.validate()
-        })
-      } finally {
-        loading.close()
-      }
+      this.$refs.formData && this.$refs.formData.resetFields()
     },
     handleSubmit() {
       this.$refs.formData.validate(async (valid) => {

src/views/active/combinationActivityConfiguration/components/DetailModal.vue

@@ -29,11 +29,16 @@
         </div>
       </el-form-item>
       <el-form-item label="活动配置类型" prop="configType">
-        <span v-if="formData.configType === 1">升级角色</span>
-        <span v-else-if="formData.configType === 2">分佣</span>
-        <span v-else-if="formData.configType === 3">社区服务</span>
-        <span v-else-if="formData.configType === 4">赠送代金券</span>
-        <span v-else-if="formData.configType === 5">赠送消费金</span>
+        <span v-if="formData.configType === 1">升级活动</span>
+        <span v-else-if="formData.configType === 2">分佣活动</span>
+        <span v-else-if="formData.configType === 3">社区活动</span>
+        <span v-else-if="formData.configType === 4">赠券活动</span>
+        <span v-else-if="formData.configType === 5">赠金活动</span>
+        <span v-else-if="formData.configType === 6">商圈订单</span>
+        <span v-else-if="formData.configType === 7">爆品家具</span>
+        <span v-else-if="formData.configType === 8">社区订单</span>
+        <span v-else-if="formData.configType === 9">用户代金券转增</span>
+        <span v-else-if="formData.configType === 10">商家代金券转赠</span>
         <span v-else>--</span>
       </el-form-item>
       <el-form-item label="是否参与" prop="joinRole">

src/views/active/combinationActivityConfiguration/components/EditModal.vue

@@ -11,14 +11,20 @@
       </el-form-item>
       <el-form-item label="活动配置类型" prop="configType">
         <el-select
-          v-model="formData.configType" clearable size="mini" placeholder="请选择活动类型"
-          @change="formData.roleType = formData.ruleId = formData.joinRule = formData.joinMoney = ''"
+          v-model="formData.configType" clearable size="mini" placeholder="请选择活动配置类型"
+          @change="formData.roleType = formData.ruleId = formData.joinRule = formData.joinMoney = formData.isCardHolder = formData.serverId = ''"
         >
-          <el-option label="升级角色" :value="1" />
-          <el-option label="分佣" :value="2" />
-          <el-option label="社区服务" :value="3" />
-          <el-option label="赠送代金券" :value="4" />
-          <el-option label="赠送消费金" :value="5" />
+          <el-option label="升级活动" :value="1" />
+          <el-option label="分佣活动" :value="2" />
+          <el-option label="社区活动" :value="3" />
+          <el-option label="赠券活动" :value="4" />
+          <el-option label="赠金活动" :value="5" />
+          <el-option label="商圈订单" :value="6" />
+          <el-option label="爆品家具" :value="7" />
+          <el-option label="社区订单" :value="8" />
+          <el-option label="用户代金券转增" :value="9" />
+          <el-option label="商家代金券转赠" :value="10" />
+          <el-option label="同城联盟卡" :value="11" />
         </el-select>
       </el-form-item>
       <el-form-item label="是否参与" prop="joinRole">
@@ -40,8 +46,8 @@
         </el-select>
       </el-form-item>
       <el-form-item
-        v-if="[1, 2].includes(formData.configType) && (formData.joinRole === 1)" label="关联佣金配置"
-        prop="ruleId"
+        v-if="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(formData.configType) && (formData.joinRole === 1)"
+        label="关联佣金配置" prop="ruleId"
       >
         <el-select v-model="formData.ruleId" clearable size="mini" placeholder="请选择关联佣金配置" filterable>
           <el-option
@@ -51,25 +57,137 @@
         </el-select>
       </el-form-item>
       <el-form-item
-        v-if="[2, 3, 4, 5].includes(formData.configType) && (formData.joinRole === 1)" label="规则"
+        v-if="[1, 2, 3, 4, 5, 6, 7].includes(formData.configType) && (formData.joinRole === 1)" label="规则"
         prop="joinRule"
       >
         <el-select v-model="formData.joinRule" clearable size="mini" placeholder="请选择规则">
-          <el-option label="金额" :value="1" />
-          <el-option label="比例" :value="2" />
+          <el-option label="固定金额活动" :value="1" />
+          <el-option label="商品价格比例" :value="2" />
         </el-select>
       </el-form-item>
       <el-form-item
-        v-if="[2, 3, 4, 5].includes(formData.configType) && (formData.joinRole === 1)" label="参与值"
+        v-if="[1, 2, 3, 4, 5, 6, 7].includes(formData.configType) && (formData.joinRole === 1) && (formData.joinRule === 1)"
+        label="固定分配佣金总额" prop="commissionPrice"
+      >
+        <el-input v-model="formData.commissionPrice" placeholder="请输入固定分配佣金总额" style="width: 250px;">
+          <template #append>
+            <div>元</div>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item
+        v-if="[1, 2, 3, 4, 5, 6, 7].includes(formData.configType) && (formData.joinRole === 1)" label="参与值"
         prop="joinMoney"
       >
-        <el-input v-model="formData.joinMoney" placeholder="请输入参与值" style="width: 250px;">
+        <el-input v-model="formData.joinMoney" placeholder="请输入商家参与活动金额或价格比例" style="width: 250px;">
           <template #append>
             <div v-if="formData.joinRule === 1">元</div>
             <div v-else-if="formData.joinRule === 2">%</div>
           </template>
         </el-input>
       </el-form-item>
+      <el-form-item
+        v-if="[ 3 ].includes(formData.configType) && (formData.joinRole === 1)" label="社区服务"
+        prop="serverId"
+      >
+        <el-select v-model="formData.serverId" clearable size="mini" placeholder="请选择社区服务" filterable>
+          <el-option
+            v-for="(item, index) in communityList" :key="item.id"
+            :label="`${item.serverInfoName || '--'}（${item.id}）`" :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(formData.configType) && (formData.joinRole === 1)"
+        label="是否发送卡包" prop="isCardHolder"
+      >
+        <el-radio-group v-model="formData.isCardHolder">
+          <el-radio :label="true">是</el-radio>
+          <el-radio :label="false">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        v-if="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(formData.configType) && (formData.joinRole === 1) && formData.isCardHolder"
+        label="卡券类型" prop="cardType"
+      >
+        <el-select v-model="formData.cardType" clearable size="mini" placeholder="请选择卡券类型">
+          <el-option label="社区" :value="1" />
+          <el-option label="商圈" :value="2" />
+          <el-option label="商城" :value="3" />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(formData.configType) && (formData.joinRole === 1) && formData.isCardHolder"
+        label="卡券类型规则" prop="cardRule"
+      >
+        <el-radio-group v-model="formData.cardRule">
+          <el-radio :label="1">满减券</el-radio>
+          <el-radio :label="2">折扣券</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        v-if="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(formData.configType) && (formData.joinRole === 1) && formData.isCardHolder"
+        label="卡包价格规则" prop="cardMoney"
+      >
+        <el-input v-model="formData.cardMoney" placeholder="请输入卡包价格规则" style="width: 250px;">
+          <template #prepend>
+            <div v-if="formData.cardRule === 1">减</div>
+            <div v-else-if="formData.cardRule === 2">打</div>
+          </template>
+          <template #append>
+            <div v-if="formData.cardRule === 1">元</div>
+            <div v-else-if="formData.cardRule === 2">折</div>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item
+        v-if="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(formData.configType) && (formData.joinRole === 1) && formData.isCardHolder"
+        label="卡券发放数量" prop="cardNum"
+      >
+        <el-input v-model="formData.cardNum" placeholder="请输入卡券发放数量" style="width: 200px;">
+          <template #append>
+            <div>天</div>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item
+        v-if="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(formData.configType) && (formData.joinRole === 1) && formData.isCardHolder"
+        label="卡券有效期" prop="cardEffectiveTime"
+      >
+        <el-input v-model="formData.cardEffectiveTime" placeholder="请输入卡券有效期" style="width: 200px;">
+          <template #append>
+            <div>天</div>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item
+        v-if="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(formData.configType) && (formData.joinRole === 1) && formData.isCardHolder"
+        label="卡券使用范围" prop="cardRange"
+      >
+        <el-select v-model="formData.cardRange" clearable size="mini" placeholder="请选择卡券使用范围">
+          <el-option label="指定" :value="1" />
+          <el-option label="全部" :value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(formData.configType) && (formData.joinRole === 1) && formData.isCardHolder && (formData.cardRange === 1)"
+        label="卡券指定区域" prop="cardRange"
+      >
+        <el-cascader
+          v-model="regionArrDialog" :props="regionProps" size="large" placeholder="请选择区域"
+          @change="formData.cardJson = [ ...new Set(regionArrDialog.map(i => i[i.length - 1])) ].join(',')"
+        ></el-cascader>
+        <div v-if="String(formData.cardJson)">已选ID：{{ formData.cardJson }}</div>
+      </el-form-item>
+      <el-form-item
+        v-if="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(formData.configType) && (formData.joinRole === 1) && formData.isCardHolder"
+        label="业务json字段" prop="cardBusinessFields"
+      >
+        <el-input
+          v-model="formData.cardBusinessFields" maxlength="255" type="textarea" placeholder="请输入封装第三方业务的JSON字符串"
+          style="width: 400px;"
+        />
+      </el-form-item>
     </el-form>
     <template #footer>
       <span class="dialog-footer">
@@ -81,8 +199,9 @@
 </template>
 
 <script>
-import { savePlatformComposeConfig, updatePlatformComposeConfig, getPlatformComposeConfigById, getPlatformComposePage } from '@/api/active/combinationActivities'
+import { savePlatformComposeConfig, updatePlatformComposeConfig, getPlatformComposeConfigById, getPlatformComposePage, getCommunityServerInfoList } from '@/api/active/combinationActivities'
 import { getAllPlatformBeeRule } from '@/api/commissionAllocation/gradeCommission'
+import { getProvinceList, getChildAreaList } from '@/api/address'
 
 export default {
   name: 'EditModal',
@@ -104,7 +223,18 @@ export default {
         joinRule: '',
         roleType: '',
         joinMoney: '',
-        ruleId: ''
+        commissionPrice: '',
+        ruleId: '',
+        isCardHolder: '',
+        cardType: '',
+        cardRule: '',
+        cardMoney: '',
+        cardNum: '',
+        cardEffectiveTime: '',
+        cardRange: '',
+        cardJson: '',
+        cardBusinessFields: '',
+        serverId: ''
       },
       formRules: {
         composeId: [
@@ -116,10 +246,51 @@ export default {
         joinMoney: [
           { required: false, message: '请输入参与值' },
           { pattern: /^0\.\d{0,2}$|^[1-9]\d*\.\d{0,2}$|^[1-9]\d*$/, message: '数值有误' }
-        ]
+        ],
+        commissionPrice: [
+          { required: false, message: '请输入固定分配佣金总额' },
+          { pattern: /^0\.\d{0,2}$|^[1-9]\d*\.\d{0,2}$|^[1-9]\d*$/, message: '数值有误' }
+        ],
+        cardRule: [
+          { required: false, message: '请输入卡包价格规则' },
+          { pattern: /^0\.\d{0,2}$|^[1-9]\d*\.\d{0,2}$|^[1-9]\d*$/, message: '数值有误' }
+        ],
+        cardNum: [
+          { required: false, message: '请输入卡券发放数量' },
+          { pattern: /^(0|[1-9][0-9]*)$/, message: '请输入正整数' }
+        ],
+        cardEffectiveTime: [
+          { required: false, message: '请输入卡券有效期' },
+          { pattern: /^(0|[1-9][0-9]*)$/, message: '请输入正整数' }
+        ],
+        isCardHolder: [ { required: true, message: '请选择是否发送卡包' } ]
       },
       activityList: [],
-      ruleList: []
+      ruleList: [],
+      communityList: [],
+      regionArrDialog: [],
+      regionProps: {
+        checkStrictly: true,
+        multiple: true,
+        lazy: true,
+        label: 'name',
+        value: 'id',
+        lazyLoad(node, resolve) {
+          const { level, value } = node
+          if (level === 0) {
+            getProvinceList().then((res) => {
+              resolve(res.data)
+            })
+          } else if (level != 0) {
+            getChildAreaList(value).then((res) => {
+              resolve(res.data.map((item) => {
+                item.leaf = level === 3
+                return item
+              }))
+            })
+          }
+        }
+      }
     }
   },
   methods: {
@@ -131,12 +302,15 @@ export default {
       this.activityList = res1.data.list
       const res2 = await getAllPlatformBeeRule({ page: 1, pageSize: 9999 })
       this.ruleList = res2.data.list
+      const res3 = await getCommunityServerInfoList({ pageNo: 1, pageSize: 9999 })
+      this.communityList = res3.data.records
     },
     handleOpen(params = {}) {
       this.modalOptions.title = params.configId ? '编辑组合活动配置' : '添加组合活动配置'
       this.formData = Object.assign(this.$options.data().formData, params, {
         joinMoney: (params.joinRule === 2) && (typeof params.joinMoney === 'number') ? params.joinMoney * 100 : params.joinMoney
       })
+      if (this.formData.cardJson) this.regionArrDialog = this.formData.cardJson.split(',').map((i) => [ i ])
       this.visible = true
       this.initList()
       if (params.configId) {
@@ -157,8 +331,20 @@ export default {
           joinRule: res.data.joinRule || '',
           roleType: res.data.roleType || '',
           joinMoney: (res.data.joinRule === 2) && (typeof res.data.joinMoney === 'number') ? res.data.joinMoney * 100 : res.data.joinMoney,
-          ruleId: res.data.ruleId || ''
+          commissionPrice: res.data.commissionPrice || '',
+          ruleId: res.data.ruleId || '',
+          isCardHolder: res.data.isCardHolder,
+          cardType: res.data.cardType || '',
+          cardRule: res.data.cardRule || '',
+          cardMoney: res.data.cardMoney || '',
+          cardNum: res.data.cardNum || '',
+          cardEffectiveTime: res.data.cardEffectiveTime || '',
+          cardRange: res.data.cardRange || '',
+          cardJson: res.data.cardJson || '',
+          cardBusinessFields: res.data.cardBusinessFields || '',
+          serverId: res.data.serverId || ''
         })
+        if (this.formData.cardJson) this.regionArrDialog = this.formData.cardJson.split(',').map((i) => [ i ])
         this.$nextTick(() => {
           this.$refs.formData && this.$refs.formData.validate()
         })

src/views/active/combinationActivityConfiguration/index.vue

@@ -6,11 +6,16 @@
         v-model="listQuery.configType" clearable size="mini" class="filter-item"
         style="width: 200px;" placeholder="请选择活动配置类型"
       >
-        <el-option label="升级角色" :value="1" />
-        <el-option label="分佣" :value="2" />
-        <el-option label="社区服务" :value="3" />
-        <el-option label="赠送代金券" :value="4" />
-        <el-option label="赠送消费金" :value="5" />
+        <el-option label="升级活动" :value="1" />
+        <el-option label="分佣活动" :value="2" />
+        <el-option label="社区活动" :value="3" />
+        <el-option label="赠券活动" :value="4" />
+        <el-option label="赠金活动" :value="5" />
+        <el-option label="商圈订单" :value="6" />
+        <el-option label="爆品家具" :value="7" />
+        <el-option label="社区订单" :value="8" />
+        <el-option label="用户代金券转增" :value="9" />
+        <el-option label="商家代金券转赠" :value="10" />
       </el-select>
       <el-button
         size="mini" class="filter-item" type="primary" icon="el-icon-search"
@@ -51,11 +56,16 @@
         </el-table-column>
         <el-table-column align="center" width="110" label="活动配置类型" prop="configType">
           <template slot-scope="{ row }">
-            <el-tag v-if="row.configType === 1" effect="plain">升级角色</el-tag>
-            <el-tag v-else-if="row.configType === 2" effect="plain">分佣</el-tag>
-            <el-tag v-else-if="row.configType === 3" effect="plain">社区服务</el-tag>
-            <el-tag v-else-if="row.configType === 4" effect="plain">赠送代金券</el-tag>
-            <el-tag v-else-if="row.configType === 5" effect="plain">赠送消费金</el-tag>
+            <el-tag v-if="row.configType === 1" effect="plain">升级活动</el-tag>
+            <el-tag v-else-if="row.configType === 2" effect="plain">分佣活动</el-tag>
+            <el-tag v-else-if="row.configType === 3" effect="plain">社区活动</el-tag>
+            <el-tag v-else-if="row.configType === 4" effect="plain">赠券活动</el-tag>
+            <el-tag v-else-if="row.configType === 5" effect="plain">赠金活动</el-tag>
+            <el-tag v-else-if="row.configType === 6" effect="plain">商圈订单</el-tag>
+            <el-tag v-else-if="row.configType === 7" effect="plain">爆品家具</el-tag>
+            <el-tag v-else-if="row.configType === 8" effect="plain">社区订单</el-tag>
+            <el-tag v-else-if="row.configType === 9" effect="plain">用户代金券转增</el-tag>
+            <el-tag v-else-if="row.configType === 10" effect="plain">商家代金券转赠</el-tag>
             <span v-else>--</span>
           </template>
         </el-table-column>

src/views/brandFactory/settlement/addSettlement.vue

@@ -1,448 +0,0 @@
-<template>
-  <div class="">
-    <!-- 卡片 -->
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span v-if="shopDetails.checkState === 2" class="leftTitle">已拒绝</span>
-        <span v-if="shopDetails.checkState === 1" class="leftTitle">已通过</span>
-        <span v-if="shopDetails.checkState === 0" class="leftTitle">未处理</span>
-        <div class="girhtBtn">
-          <el-button class="" @click="back">
-            取消
-          </el-button>
-          <el-button v-if="shopDetails.checkState === 0" type="primary" @click="handle">
-            处理
-          </el-button>
-        </div>
-      </div>
-      <!--  卡片内容-->
-      <div>
-        <div class="msgDetail">
-          <div class="detail">
-            <div class="shop_info">
-              <p class="detail_title">店铺信息</p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>店铺名称：
-                </span>
-                <span>{{ shopDetails.shopName }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>店铺类型：
-                </span>
-                <span v-if="shopDetails.authenType == 1">个人</span>
-                <span v-if="shopDetails.authenType == 2">个体工商户</span>
-                <span v-if="shopDetails.authenType == 3">企业</span>
-                <span v-if="shopDetails.authenType == 4">其他组织</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>
-                  客服电话：
-                </span>
-                <span>{{ shopDetails.shopPhone }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>店铺负责人：
-                </span>
-                <span>{{ shopDetails.chargePersonName }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>负责人电话：
-                </span>
-                <span>{{ shopDetails.chargePersonPhone }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>店铺地址：
-                </span>
-                <span>{{ shopDetails.shopAdress }}</span>
-              </p>
-            </div>
-            <div class="person_info">
-              <p class="detail_title">个人信息</p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>名称：
-                </span>
-                <span>{{ shopDetails.name }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>证件信息：
-                </span>
-                <span>{{ shopDetails.cardTypeName }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>身份证号码：
-                </span>
-                <span>{{ shopDetails.idCard }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>身份证有效期：
-                </span>
-                <span>{{ shopDetails.cardTime }}</span>
-              </p>
-              <p class="detail_img">
-                <span>
-                  <font>*</font>证件照片:
-                </span>
-                <el-image
-                  v-for="(src, index) in idCardCopyFilePath" :key="'id' + index" class="img_box"
-                  :preview-src-list="idCardCopyFilePath" :src="src" :preview="2" alt=""
-                />
-              </p>
-              <p v-if="shopDetails && shopDetails.authenType === 1" class="detail_img">
-                <span>
-                  <font>*</font>手持证件照:
-                </span>
-                <el-image class="img_box" :src="shopDetails.cardHand" :preview-src-list="[ shopDetails.cardHand ]" />
-              </p>
-            </div>
-            <!-- +++++++++++++++++++++ 主体信息 ++++++++++++++++++++++++++++++++++++++++++++++++ -->
-            <div v-if="shopDetails.authenType !== 1" class="person_info">
-              <p class="detail_title">主体信息</p>
-              <p class="detail_text">
-                <span v-if="shopDetails.authenType == 2">
-                  <font>*</font> 商户名称：
-                </span>
-                <span v-if="shopDetails.authenType == 3">
-                  <font>*</font> 企业名称：
-                </span>
-                <span v-if="shopDetails.authenType == 4">
-                  <font>*</font> 组织名称：
-                </span>
-                <span>{{ shopDetails.subjectName }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font> {{ shopDetails.authenType == 4 ? '组织机构代码' : '社会信用代码' }}：
-                </span>
-                <span>{{ shopDetails.subjectCode }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>注册地址
-                </span>
-                <span>{{ shopDetails.subjectAdress }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>营业期限
-                </span>
-                <span>{{ shopDetails.subjectStartTime }} - {{ shopDetails.subjectEndTime }}</span>
-              </p>
-              <p class="detail_img">
-                <span>
-                  <font>*</font>{{ shopDetails.authenType == 4 ? '机构证明材料' : '营业执照' }}：
-                </span>
-                <img
-                  v-for="(src, index) in shopDetails.subjectLicense" :key="'id' + index" :src="src" :preview="2"
-                  alt=""
-                >
-              </p>
-            </div>
-            <div class="person_info">
-              <p class="detail_title">授权信息</p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>生效日期：
-                </span>
-                <span>{{ shopDetails.effectiveDate }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>生效时限：
-                </span>
-                <span>{{ shopDetails.effectiveYear }}</span>
-                <span v-if="shopDetails.effectiveYear">年</span>
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </el-card>
-
-    <!-- *************对话框开始************* -->
-    <el-dialog
-      title="处理申请" :visible.sync="addFormDialog" width="30%" center
-      :show-close="false"
-      :close-on-click-modal="false" :modal-append-to-body="false" :modal="false"
-    >
-      <div>
-        <el-form ref="ruleForm" :model="addForm" label-width="80px">
-          <el-form-item label="入驻处理">
-            <el-radio-group v-model="addForm.checkHandle" @change="selectChoose">
-              <el-radio label="1">同意入驻</el-radio>
-              <el-radio label="0">拒绝入驻</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item v-if="addForm.checkHandle == 0" label="拒绝原因">
-            <el-input v-model="addForm.reason" maxlength="200" type="textarea" />
-          </el-form-item>
-          <el-form-item v-if="addForm.checkHandle == 1" label="生效日期">
-            <el-radio-group v-model="addForm.effectiveDate">
-              <el-radio label="null">即时生效</el-radio>
-              <el-radio label="0">指定日期</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item v-if="addForm.effectiveDate == 0 && addForm.checkHandle == 1">
-            <el-date-picker v-model="chooseDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
-          </el-form-item>
-          <el-form-item v-if="addForm.checkHandle == 1" label="生效时间">
-            <el-input
-              v-model="addForm.effectiveYear" maxlength="4" oninput="value=value.replace(/[^\d]/g,'')"
-              class="spanIpt"
-            />
-            <span class="riSpan">年</span>
-          </el-form-item>
-        </el-form>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="addFormDialog = false">取 消</el-button>
-        <el-button type="primary" @click="handle_save">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { settlementHandle } from '@/api/business'
-import { hidden } from '@/utils'
-
-export default {
-  props: {
-    businessData: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    // 这里存放数据
-    return {
-      shopId: '',
-      shopDetails: {},
-      addFormDialog: false,
-      idCardCopyFilePath: [],
-      chooseDate: '',
-      addForm: {
-        shopId: '', // 店铺id
-        checkHandle: '', // 1-同意入驻 0-拒绝入驻
-        effectiveDate: '', // 生效日期  null-即时生效 有值-指定日期生效
-        effectiveYear: '', // 生效时限（年）
-        reason: '' // 处理原因
-      }
-    }
-  },
-  watch: {
-    businessData: {
-      handler(nVal, oVal) {
-        this.shopDetails = {}
-        this.idCardCopyFilePath = []
-        this.shopId = nVal.shopId
-        this.shopDetails = nVal
-        this.shopDetails.idCard = hidden(this.shopDetails.idCard, 4, 4)
-        this.idCardCopyFilePath.push(nVal.cardPositive)
-        this.idCardCopyFilePath.push(nVal.cardSide)
-      }
-    }
-  },
-  created() {
-    this.shopDetails = {}
-    this.idCardCopyFilePath = []
-    this.shopId = this.businessData.shopId
-    this.shopDetails = this.businessData
-    this.shopDetails.idCard = hidden(this.shopDetails.idCard, 4, 4)
-    this.idCardCopyFilePath.push(this.businessData.cardPositive)
-    this.idCardCopyFilePath.push(this.businessData.cardSide)
-  },
-  // 方法集合
-  methods: {
-    // 处理
-    handle() {
-      this.addFormDialog = true
-    },
-    // 返回
-    back() {
-      this.$emit('cancel')
-    },
-    // selectChoose
-    selectChoose(index) {
-      if (index !== 1) {
-        this.addForm.effectiveDate = ''
-        this.addForm.effectiveYear = ''
-        this.chooseDate = ''
-      }
-    },
-    clearAddForm() {
-      this.addForm = {
-        shopId: '', // 店铺id
-        checkHandle: '', // 1-同意入驻 0-拒绝入驻
-        effectiveDate: '', // 生效日期  null-即时生效 有值-指定日期生效
-        effectiveYear: '', // 生效时限（年）
-        reason: '' // 处理原因
-      }
-    },
-    // 处理申请确定
-    async handle_save() {
-      if (this.addForm.checkHandle === '') {
-        this.$message.error('请选择入驻处理')
-        return
-      }
-      if (this.addForm.effectiveDate === '' && this.addForm.checkHandle === 1) {
-        this.$message.error('请选择生效日期')
-        return
-      }
-      if (this.addForm.effectiveYear === '' && this.addForm.checkHandle === 1) {
-        this.$message.error('请输入生效时间')
-        return
-      }
-      if (this.addForm.effectiveDate !== 'null') {
-        this.addForm.effectiveDate = this.chooseDate
-      } else {
-        this.addForm.effectiveDate = 'null'
-      }
-      this.addForm.shopId = this.shopId
-      const loading = this.$loading({
-        lock: true,
-        text: '处理中请稍后...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      const res = await settlementHandle(this.addForm)
-      this.addFormDialog = false
-      if (res.code === '') {
-        this.shopDetails = {}
-        this.idCardCopyFilePath = []
-        this.$message({
-          message: '处理成功',
-          type: 'success'
-        })
-        this.clearAddForm()
-        this.$emit('cancel')
-        this.$emit('search')
-      } else {
-        console.log('error')
-      }
-      loading.close()
-    }
-  }
-}
-</script>
-
-<style
-  lang="scss"
-  scoped
->
-//@import url(); 引入公共css类
-.clearfix {
-	.leftTitle {
-		font-size: 24px;
-		color: #333333;
-	}
-
-	.girhtBtn {
-		float: right;
-	}
-}
-
-.detail {
-	min-height: 500px;
-	background: rgba(255, 255, 255, 1);
-	box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.15);
-	border-radius: 4px;
-	padding: 1px 50px 20px;
-	margin-top: 15px;
-
-	.detail_title {
-		font-size: 24px;
-		color: #333333;
-		position: relative;
-		margin: 50px 20px 20px;
-
-		font {
-			color: #ff7911;
-		}
-
-		&:before {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 5px;
-			left: -20px;
-			width: 4px;
-			height: 24px;
-			background-color: #3a68f2;
-		}
-	}
-
-	.detail_text {
-		line-height: 40px;
-
-		span {
-			display: inline-block;
-			color: #333333;
-			font-size: 16px;
-
-			&:nth-child(1) {
-				width: 150px;
-				text-indent: 20px;
-
-				font {
-					color: red;
-				}
-			}
-
-			&:nth-child(2) {
-				color: #666666;
-			}
-		}
-	}
-
-	.detail_img {
-		position: relative;
-		line-height: 40px;
-		margin-bottom: 30px;
-		overflow: hidden;
-
-		span {
-			position: absolute;
-			top: 0;
-			left: 0;
-			display: inline-block;
-			color: #333333;
-			font-size: 16px;
-			width: 150px;
-			text-indent: 20px;
-
-			font {
-				color: #ff7911;
-			}
-		}
-
-		.img_box {
-			width: 265px;
-			height: 170px;
-			border-radius: 4px;
-			float: left;
-
-			&:nth-of-type(1) {
-				margin: 0 30px 0 150px;
-			}
-		}
-	}
-}
-
-.spanIpt {
-	width: 60%;
-}
-
-.riSpan {
-	margin-left: 10px;
-}
-</style>

src/views/brandFactory/settlement/index.vue

@@ -1,190 +1,202 @@
 <template>
-  <div class="pdl">
-    <!-- 选项卡 -->
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="待处理" name="0" />
-      <el-tab-pane label="已通过" name="1" />
-      <el-tab-pane label="已拒绝" name="2" />
-    </el-tabs>
-    <!-- 搜索 -->
-    <div class="formSearch">
-      <el-form :inline="true" :model="formInline">
-        <el-form-item label="商家名称">
-          <el-input v-model="formInline.shopName" maxlength="20" placeholder="请输入商家名称" />
-        </el-form-item>
-        <el-form-item label="注册手机号">
-          <el-input v-model="formInline.shopPhone" maxlength="11" placeholder="请输入注册手机号" />
-        </el-form-item>
-        <el-form-item label="店铺类型">
-          <el-select v-model="formInline.authenType" clearable placeholder="请选择">
-            <el-option label="个人" value="1" />
-            <el-option label="个体工商户" value="2" />
-            <el-option label="企业" value="3" />
-            <el-option label="其他组织" value="4" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="申请时间">
-          <el-date-picker v-model="formInline.dates" type="datetimerange" value-format="yyyy-MM-dd" range-separator="至"
-            start-placeholder="开始日期" end-placeholder="结束日期" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" plain @click="search">查询</el-button>
-        </el-form-item>
-      </el-form>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-select
+        v-model="listQuery.checkState" clearable size="mini" class="filter-item"
+        style="width: 200px;" placeholder="请选择审核状态"
+      >
+        <el-option label="待处理" :value="0" />
+        <el-option label="已通过" :value="1" />
+        <el-option label="已拒绝" :value="2" />
+      </el-select>
+      <el-input
+        v-model="listQuery.shopName" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入商家名称"
+      />
+      <el-input
+        v-model="listQuery.shopPhone" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入注册手机号"
+      />
+      <el-select
+        v-model="listQuery.authenType" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请选择店铺类型"
+      >
+        <el-option label="个人" :value="1" />
+        <el-option label="个体工商户" :value="2" />
+        <el-option label="企业" :value="3" />
+        <el-option label="其他组织" :value="4" />
+      </el-select>
+      <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"
+      />
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+      <br />
+      <el-button
+        size="mini" type="primary" icon="el-icon-plus"
+        @click="$refs.EditModal && $refs.EditModal.handleOpen({ shopId: '' })"
+      >
+        添加
+      </el-button>
     </div>
-    <!-- 表格 -->
-    <div class="tableBox">
-      <el-table ref="multipleTable" :data="tableData" border
-        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%">
-        <el-table-column label="商家名称" width="220">
-          <template slot-scope="scope">{{ scope.row.shopName }}</template>
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
+      <el-table
+        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 align="center" width="100" label="商家ID" prop="shopId" fixed="left" />
+        <el-table-column align="center" label="商家名称" prop="shopName">
+          <template slot-scope="{ row }">
+            <span>{{ row.shopName || '--' }}</span>
+          </template>
         </el-table-column>
-        <el-table-column label="店铺类型">
-          <template slot-scope="scope">
-            <span v-if="scope.row.authenType == 1">个人</span>
-            <span v-if="scope.row.authenType == 2">个体工商户</span>
-            <span v-if="scope.row.authenType == 3">企业</span>
-            <span v-if="scope.row.authenType == 4">其他组织</span>
+        <el-table-column align="center" label="店铺类型" prop="authenType">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.authenType === 1" effect="plain">个人</el-tag>
+            <el-tag v-else-if="row.authenType === 2" effect="plain">个体工商户</el-tag>
+            <el-tag v-else-if="row.authenType === 3" effect="plain">企业</el-tag>
+            <el-tag v-else-if="row.authenType === 4" effect="plain">其他组织</el-tag>
+            <span v-else>--</span>
           </template>
         </el-table-column>
-        <el-table-column prop="shopPhone" label="注册手机号" />
-        <el-table-column prop="createTime" label="申请时间" />
-        <el-table-column label="操作" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <div class="btnList">
-              <el-button v-if="activeName == 0" type="text" @click="handleDel(scope.row)">
-                处理
-              </el-button>
-              <el-button v-if="activeName == 1 || activeName == 2" type="text" @click="handleDel(scope.row)">
-                查看
-              </el-button>
-              <el-button v-if="activeName == 1 || activeName == 2" type="text" @click="delet(scope.row)">
-                删除
-              </el-button>
-            </div>
+        <el-table-column align="center" width="120" label="注册手机号" prop="shopPhone" show-overflow-tooltip />
+        <el-table-column align="center" width="150" label="创建时间" prop="createTime" />
+        <el-table-column align="center" label="操作" width="220" 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
+              v-if="listQuery.checkState === 0" size="mini"
+              @click="$refs.ApplicationProcessing && $refs.ApplicationProcessing.handleOpen(row)"
+            >
+              处理
+            </el-button>
+            <el-button
+              v-if="(listQuery.checkState === 1) || (listQuery.checkState === 2)" type="danger"
+              size="mini" @click="handleDelete(row)"
+            >
+              删除
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
-      <div class="fenye">
-        <el-pagination :current-page="formInline.page" :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="addVisible" top="5vh" width="70%" center :show-close="false"
-      :close-on-click-modal="false">
-      <AddSettlement v-loading="loading" :business-data="form" @cancel="cleanForm" @search="search" />
-    </el-dialog>
+    <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>
+
+    <!-- 提现处理 -->
+    <ApplicationProcessing ref="ApplicationProcessing" @success="getList" />
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
   </div>
 </template>
 
 <script>
-import AddSettlement from '@/views/business/settlement/addSettlement'
 
-import {
-  settlementGetAll,
-  settlementDelete
-} from '@/api/business'
-import {
-  settlementGetById
-} from '@/api/business'
+import ApplicationProcessing from '../../business/settlement/components/ApplicationProcessing'
+import DetailModal from '../../business/settlement/components/DetailModal'
+import { settlementGetAll, settlementDelete } from '@/api/business'
 
 export default {
+  name: 'Settlement',
   components: {
-    AddSettlement
+    ApplicationProcessing,
+    DetailModal
   },
   data() {
-    // 这里存放数据
     return {
-      activeName: '0',
-      formInline: {
-        shopName: '', // 商家名称
-        shopPhone: '', // 注册手机号
-        authenType: '', // 店铺类型 1-个人 2-个体工商户 3-企业 4-其他组织
-        dates: [], // 时间数组
-        checkState: '0', // 入驻处理状态 0-未处理 1-通过 2-拒绝
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        shopName: '',
+        shopPhone: '',
+        authenType: '',
+        dates: [],
+        checkState: 0,
         page: 1,
-        pageSize: 10,
+        pageSize: 20,
         shopType: 1
-      },
-      total: 10,
-      tableData: [],
-      addVisible: false,
-      loading: false,
-      form: {}
+      }
     }
   },
-  mounted() {
-    this.getAll(this.formInline)
+  created() {
+    this.getList()
   },
-  // 方法集合
   methods: {
-    handleSizeChange(val) {
-      this.formInline.pageSize = val
-      this.getAll(this.formInline)
-    },
-    handleCurrentChange(val) {
-      this.formInline.page = val
-      this.getAll(this.formInline)
-    },
-    handleClick(tab, event) {
-      this.formInline.checkState = tab.index
-      this.getAll(this.formInline)
-    },
-    // 查询
-    search() {
-      this.total = 1
-      this.formInline.page = 1
-      this.getAll(this.formInline)
-    },
-    // 处理
-    handleDel(row) {
-      this.addVisible = true
-      this.getFormData(row.shopId)
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await settlementGetAll(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
+      }
     },
-    getFormData(shopId) {
-      this.loading = true
-      // 查询店铺详情
-      settlementGetById({ shopId })
-        .then((res) => {
-          this.loading = false
-          this.form = res.data
-        })
-        .catch((err) => {
-          this.loading = false
-          console.log(err)
-        })
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
     },
-    cleanForm() {
-      this.addVisible = false
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
     },
-    // 删除
-    async delet(row) {
-      const res = await settlementDelete({ checkId: row.checkId })
-      if (res.code === '') {
-        this.$message({
-          message: '删除成功',
-          type: 'success'
+    handleDelete(row) {
+      this.$confirm('确定删除此项？')
+        .then(async () => {
+          await settlementDelete({ checkId: row.checkId })
+          this.$message({ message: '删除成功！', type: 'success' })
+          this.handleSearch()
         })
-        this.getAll(this.formInline)
-      }
-    },
-    // 初始化查询所有数据
-    async getAll(formInline) {
-      const res = await settlementGetAll(formInline)
-      this.tableData = res.data.list
-      this.total = res.data.total
+        .catch(() => {})
     }
   }
 }
 </script>
 
-<style lang='scss' scoped>
-//@import url(); 引入公共css类
-@import url("../../../styles/elDialog.scss");
+<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;
+		}
+	}
+
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
 
-.pdl {
-  padding-left: 20px;
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
 }
 </style>

src/views/business/businessList/components/DetailModal.vue

@@ -1,45 +1,117 @@
 <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"
-    >
-      <!-- 定时任务信息 -->
-      <el-form-item label="ID" prop="jobId">
-        {{ formData.jobId || '--' }}
-      </el-form-item>
-      <el-form-item label="定时器名称" prop="jobName">
-        {{ formData.jobName || '--' }}
-      </el-form-item>
-      <el-form-item label="spring bean 名称" prop="beanName">
-        {{ formData.beanName || '--' }}
-      </el-form-item>
-      <el-form-item label="方法名" prop="methodName">
-        {{ formData.methodName || '--' }}
-      </el-form-item>
-      <el-form-item label="参数" prop="params">
-        {{ formData.params || '--' }}
-      </el-form-item>
-      <el-form-item label="cron表达式" prop="cronExpression">
-        {{ formData.cronExpression || '--' }}
-      </el-form-item>
-      <el-form-item label="任务状态" prop="status">
-        <span v-if="formData.status === 0">正常</span>
-        <span v-else-if="formData.status === 1">暂停</span>
+  <el-dialog :visible.sync="visible" v-bind="modalOptions">
+    <el-form ref="formData" :model="formData" size="mini" label-position="left" label-suffix=":" label-width="200px">
+      <!-- 商家任务信息 -->
+      <el-form-item label="商家ID" prop="shopId">
+        {{ formData.shopId || '--' }}
+      </el-form-item>
+      <el-form-item label="店铺名称" prop="shopName">
+        {{ formData.shopName || '--' }}
+      </el-form-item>
+      <el-form-item label="是否支持消费金" prop="isBeeCoin">
+        <span v-if="formData.isBeeCoin === 1">支持</span>
+        <span v-else-if="formData.isBeeCoin === 2">不支持</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="商家消费金提现比例" prop="beeCoinRatio">
+        {{ formData.beeCoinRatio || '--' }}
+      </el-form-item>
+      <el-form-item label="店铺负责人" prop="chargePersonName">
+        {{ formData.chargePersonName || '--' }}
+      </el-form-item>
+      <el-form-item label="负责人电话" prop="chargePersonPhone">
+        {{ formData.chargePersonPhone || '--' }}
+      </el-form-item>
+      <el-form-item label="区域ID" prop="areaId">
+        {{ formData.areaId || '--' }}
+      </el-form-item>
+      <el-form-item label="官方分类名">
+        <span v-if="categoryList && categoryList.length">{{ getCategoryItem() && getCategoryItem().storeName }}</span>
+      </el-form-item>
+      <el-form-item label="店铺地址" prop="shopAdress">
+        {{ formData.shopAdress || '--' }}
+      </el-form-item>
+      <el-form-item label="经度" prop="longitude">
+        {{ formData.longitude || '--' }}
+      </el-form-item>
+      <el-form-item label="纬度" prop="latitude">
+        {{ formData.latitude || '--' }}
+      </el-form-item>
+      <el-form-item label="生效日期" prop="effectiveDate">
+        {{ formData.effectiveDate || '--' }}
+      </el-form-item>
+      <el-form-item label="生效年限" prop="effectiveYear">
+        {{ formData.effectiveYear || '--' }}
+      </el-form-item>
+      <el-form-item label="合同状态" prop="contractState">
+        <span v-if="formData.contractState === 0">无效</span>
+        <span v-else-if="formData.contractState === 1">有效</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="店铺类型" prop="shopType">
+        <span v-if="formData.shopType === 1">品牌厂家</span>
+        <span v-else-if="formData.shopType === 2">本地</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="营业开始时间" prop="startTime">
+        {{ formData.startTime || '--' }}
+      </el-form-item>
+      <el-form-item label="营业结束时间" prop="endTime">
+        {{ formData.endTime || '--' }}
+      </el-form-item>
+      <el-form-item label="店铺类型" prop="shopType">
+        <span v-if="formData.shopType === 1">品牌厂家</span>
+        <span v-else-if="formData.shopType === 2">本地</span>
         <span v-else>--</span>
       </el-form-item>
-      <el-form-item label="任务类型" prop="taskType">
-        {{ formData.taskType || '--' }}
+      <el-form-item label="是否支持代金券" prop="isVoucher">
+        <span v-if="formData.isVoucher === 1">允许</span>
+        <span v-else-if="formData.isVoucher === 2">拒绝</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="请输入代金券返还比例" prop="voucherReturn">
+        {{ formData.voucherReturn || '--' }}%
+      </el-form-item>
+      <el-form-item label="惠市宝商家编号" prop="hsbMrchId">
+        {{ formData.hsbMrchId || '--' }}
+      </el-form-item>
+      <el-form-item label="直播间审核" prop="auditLive">
+        <span v-if="formData.auditLive === 0">关闭</span>
+        <span v-else-if="formData.auditLive === 1">开启</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="直播间商品审核" prop="auditLiveProduct">
+        <span v-if="formData.auditLiveProduct === 0">关闭</span>
+        <span v-else-if="formData.auditLiveProduct === 1">开启</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="评分" prop="score">
+        {{ formData.score || '--' }}
+      </el-form-item>
+      <el-form-item label="商家月售额" prop="monthlySales">
+        {{ formData.monthlySales || '--' }}
+      </el-form-item>
+      <el-form-item label="人均消费额" prop="perCapita">
+        {{ formData.perCapita || '--' }}
       </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        {{ formData.remark || '--' }}
+      <el-form-item label="商家简介" prop="shopBrief">
+        {{ formData.shopBrief || '--' }}
+      </el-form-item>
+      <el-form-item label="广告图" prop="advertisement">
+        <div v-if="formData.advertisement && formData.advertisement.length">
+          <el-image
+            v-for="(item, index) in formData.advertisement" :key="index" :src="item"
+            style="width:80px;height:80px;margin-right: 10px;" fit="cover"
+            :preview-src-list="formData.advertisement"
+          />
+        </div>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="账号" prop="shopPhone">
+        {{ formData.shopPhone || '--' }}
+      </el-form-item>
+      <el-form-item label="密码" prop="shopPassword">
+        {{ formData.shopPassword || '--' }}
       </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
         {{ formData.createTime || '--' }}
@@ -49,7 +121,8 @@
 </template>
 
 <script>
-import { getIdQuartzJob } from '@/api/timedTasksManagement/timedTasksList'
+import { businessListGetById, businessClassList } from '@/api/business'
+import XeUtils from 'xe-utils'
 
 export default {
   name: 'DetailModal',
@@ -58,49 +131,82 @@ export default {
       modalOptions: {
         closeOnClickModal: false,
         width: '800px',
-        title: '查看定时任务详情'
+        title: '查看商家详情'
       },
       visible: false,
       formData: {
-        jobId: '',
-        jobName: '',
-        beanName: '',
-        methodName: '',
-        params: '',
-        cronExpression: '',
-        status: '',
-        taskType: '',
-        remark: '',
+        shopId: '',
+        shopName: '', // 店铺名称
+        isBeeCoin: '', // 是否支持消费金
+        beeCoinRatio: '', // 商家消费金提现比例
+        chargePersonName: '', // 店铺负责人
+        chargePersonPhone: '', // 负责人电话
+        shopAdress: '', // 地址
+        effectiveDate: '', // 生效日期
+        effectiveYear: '', // 生效年限
+        shopType: 2, // 商家类型 1 商家 2 本地
+        isVoucher: 1, // 是否支持代金卷 1 true 2 false
+        voucherReturn: '',
+        contractState: 1, // 合同状态 1-有效 0-无效
+        auditLive: 1,
+        auditLiveProduct: 1,
+        shopPhone: '', // 账号
+        shopPassword: '', // 密码
+        perCapita: '', // 人均
+        score: '', // 评分
+        advertisement: [], // 广告图
+        areaId: '', // 区域id
+        hsbMrchId: '', // 惠市宝商家编号，不是必填
+        longitude: '', // 经纬度
+        latitude: '', // 经纬度
+        classificationId: '', // 商家分类id
+        classificationName: '', // 非后端参数
+        startTime: '',
+        endTime: '',
+        shopBrief: '', // 商家简介
+        monthlySales: '',
         createTime: ''
-      }
+      },
+      categoryList: []
     }
   },
+  created() {
+    this.getCategoryTreeList()
+  },
   methods: {
     handleClose() {
       this.visible = false
     },
+    async getCategoryTreeList() {
+      const res = await businessClassList({ page: 1, pageSize: 9999 })
+      XeUtils.eachTree(res.data.records, (item) => {
+        if (Array.isArray(item.childs) && item.childs.length === 0) {
+          item.childs = undefined
+        }
+      }, { children: 'childs' })
+      this.categoryList = res.data.records
+    },
+    getCategoryItem() {
+      const { classificationId } = this.formData
+      const categoryItem = XeUtils.findTree(this.categoryList, (item) => item.id === classificationId)
+      return categoryItem ? categoryItem.item : {}
+    },
     handleOpen(params = {}) {
-      this.formData = Object.assign(this.$options.data().formData, params)
-      if (params.jobId) {
-        this.getInfo(params.jobId)
+      this.formData = Object.assign(this.$options.data().formData, params, {
+        advertisement: params.advertisement ? params.advertisement.split(',') : []
+      })
+      if (params.shopId) {
+        this.getInfo(params.shopId)
       }
       this.visible = true
     },
     async getInfo(id) {
       const loading = this.$loading({ text: '加载中' })
       try {
-        const res = await getIdQuartzJob({ id })
+        const res = await businessListGetById({ shopId: id })
         this.formData = Object.assign(this.$options.data().formData, res.data, {
-          jobId: res.data.jobId || '',
-          jobName: res.data.jobName || '',
-          beanName: res.data.beanName || '',
-          methodName: res.data.methodName || '',
-          params: res.data.params || '',
-          cronExpression: res.data.cronExpression || '',
-          status: res.data.status,
-          taskType: res.data.taskType || '',
-          remark: res.data.remark || '',
-          createTime: res.data.createTime || ''
+          shopId: res.data.shopId || '',
+          advertisement: res.data.advertisement ? res.data.advertisement.split(',') : []
         })
       } finally {
         loading.close()
@@ -109,4 +215,3 @@ export default {
   }
 }
 </script>
-

src/views/business/businessList/components/EditModal.vue

@@ -1,220 +1,219 @@
 <template>
-  <el-dialog :visible.sync="visible" v-bind="modalOptions">
-    <div>
-      <el-form ref="formData" :model="formData" :rules="formRules" size="mini" label-suffix=":" label-width="150px">
-        <div>
-          <el-tabs v-model="activeName">
-            <el-tab-pane label="授权信息" name="first">
-              <el-form-item label="店铺名称" prop="shopName">
-                <el-input v-model="ruleForm.shopName" maxlength="20" />
-              </el-form-item>
-              <el-form-item label="是否支持消费金" prop="isBeeCoin">
-                <el-radio-group v-model="ruleForm.isBeeCoin">
-                  <el-radio :label="1">支持</el-radio>
-                  <el-radio :label="2">不支持</el-radio>
-                </el-radio-group>
-              </el-form-item>
-              <el-form-item v-if="ruleForm.isBeeCoin === 1" label="商家消费金提现比例" prop="beeCoinRatio">
-                <el-input-number v-model="ruleForm.beeCoinRatio" :precision="2" :step="0.01" :max="1"></el-input-number>
-                <span style="margin-left: 10px;">比例*100</span>
-              </el-form-item>
-              <el-form-item label="店铺负责人" prop="chargePersonName">
-                <el-input v-model="ruleForm.chargePersonName" maxlength="20" />
-              </el-form-item>
-              <el-form-item label="负责人电话" prop="chargePersonPhone">
-                <!-- .replace(/(\d{3})\d+(\d{4})$/, '$1****$2') -->
-                <el-input v-model="ruleForm.chargePersonPhone" maxlength="11" clearable />
-              </el-form-item>
-              <el-form-item label="请选择区域" prop="areaId">
-                <el-cascader
-                  v-if="!isEdit" ref="cascaderRef" :props="areaData"
-                  @change="handleCascaderChange"
-                ></el-cascader>
-                <div v-else>
-                  {{ ruleForm.areaId }}
-                  <el-button size="mini" type="primary" style="margin-left: 15px;" @click="isEdit = !isEdit">
-                    {{ isEdit ? '修改' : '取消' }}
-                  </el-button>
-                </div>
-              </el-form-item>
-              <el-form-item label="官方分类" prop="classifyId">
-                <el-cascader
-                  v-model="ruleForm.classificationArr" placeholder="请选择官方分类" :options="categoryList"
-                  :props="{ checkStrictly: false, expandTrigger: 'hover', label: 'storeName', value: 'id', children: 'childs' }"
-                  clearable
-                />
-              </el-form-item>
-              <el-form-item label="店铺地址" prop="shopAdress">
-                <el-input v-model="ruleForm.shopAdress" maxlength="60" />
-              </el-form-item>
-              <el-form-item label="店铺经纬度" prop="longitude">
-                <div>
-                  <span v-if="ruleForm.longitude">
-                    {{ ruleForm.longitude }} - {{ ruleForm.latitude }}
-                  </span>
-                  <el-button
-                    size="mini" type="primary" style="margin-left: 20px;"
-                    @click="$refs.selectAddressMapRef && $refs.selectAddressMapRef.show()"
+  <div>
+    <el-dialog :visible.sync="visible" v-bind="modalOptions">
+      <div>
+        <el-form ref="formData" :model="formData" :rules="formRules" size="mini" label-suffix=":" label-width="150px">
+          <div>
+            <el-tabs v-model="activeName">
+              <el-tab-pane label="授权信息" name="first">
+                <el-form-item label="店铺名称" prop="shopName">
+                  <el-input v-model="formData.shopName" maxlength="20" />
+                </el-form-item>
+                <el-form-item label="是否支持消费金" prop="isBeeCoin">
+                  <el-radio-group v-model="formData.isBeeCoin">
+                    <el-radio :label="1">支持</el-radio>
+                    <el-radio :label="2">不支持</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item v-if="formData.isBeeCoin === 1" label="商家消费金提现比例" prop="beeCoinRatio">
+                  <el-input-number v-model="formData.beeCoinRatio" :precision="2" :step="0.01" :max="1"></el-input-number>
+                  <span style="margin-left: 10px;">比例*100</span>
+                </el-form-item>
+                <el-form-item label="店铺负责人" prop="chargePersonName">
+                  <el-input v-model="formData.chargePersonName" maxlength="20" />
+                </el-form-item>
+                <el-form-item label="负责人电话" prop="chargePersonPhone">
+                  <!-- .replace(/(\d{3})\d+(\d{4})$/, '$1****$2') -->
+                  <el-input v-model="formData.chargePersonPhone" maxlength="11" clearable />
+                </el-form-item>
+                <el-form-item label="请选择区域" prop="areaId">
+                  <el-cascader
+                    v-model="regionArrDialog" :props="regionProps" size="large" placeholder="请选择区域"
+                    @change="formData.areaId = regionArrDialog[regionArrDialog.length - 1]"
+                  ></el-cascader>
+                  <div v-if="formData.areaId">已选ID：{{ formData.areaId }}</div>
+                </el-form-item>
+                <el-form-item label="官方分类" prop="classifyId">
+                  <el-cascader
+                    v-model="formData.classificationArr" placeholder="请选择官方分类" :options="categoryList"
+                    :props="{ checkStrictly: false, expandTrigger: 'hover', label: 'storeName', value: 'id', children: 'childs' }"
+                    clearable
+                  />
+                </el-form-item>
+                <el-form-item label="店铺地址" prop="shopAdress">
+                  <el-input v-model="formData.shopAdress" maxlength="60" />
+                </el-form-item>
+                <el-form-item label="店铺经纬度" prop="longitude">
+                  <div>
+                    <span v-if="formData.longitude">
+                      {{ formData.longitude }} - {{ formData.latitude }}
+                    </span>
+                    <el-button
+                      size="mini" type="primary" style="margin-left: 20px;"
+                      @click="$refs.selectAddressMapRef && $refs.selectAddressMapRef.show()"
+                    >
+                      {{ formData.longitude ? '修改' : '选择' }}
+                    </el-button>
+                  </div>
+                </el-form-item>
+                <el-form-item label="生效日期" prop="effectiveDate">
+                  <el-date-picker
+                    v-model="formData.effectiveDate" value-format="yyyy-MM-dd" type="date"
+                    placeholder="选择日期"
+                  />
+                </el-form-item>
+                <el-form-item label="生效年限" prop="effectiveYear">
+                  <el-input
+                    v-model="formData.effectiveYear" type="text" placeholder="请输入内容" maxlength="4"
+                    class="elipt"
+                    style="width: 50%" show-word-limit
+                  />
+                  <span class="elspan">年</span>
+                </el-form-item>
+                <el-form-item label="合同状态" prop="contractState">
+                  <el-radio-group v-model="formData.contractState">
+                    <el-radio :label="1">
+                      有效
+                    </el-radio>
+                    <el-radio :label="0">
+                      无效
+                    </el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item label="店铺类型" prop="shopType">
+                  <el-radio-group v-model="formData.shopType">
+                    <!-- <el-radio :label="1">品牌厂家</el-radio> -->
+                    <el-radio :label="2">本地</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  v-if="formData.shopType === 2" prop="startTime" label="营业开始时间" :rules="[
+                    { required: true, message: '请选择营业开始时间', trigger: 'blur' }
+                  ]"
+                >
+                  <el-time-select
+                    v-model="formData.startTime" placeholder="起始时间"
+                    :picker-options="{ start: '00:00', step: '00:05' }"
                   >
-                    {{ ruleForm.longitude ? '修改' : '选择' }}
-                  </el-button>
-                </div>
-              </el-form-item>
-              <el-form-item label="生效日期" prop="effectiveDate">
-                <el-date-picker
-                  v-model="ruleForm.effectiveDate" value-format="yyyy-MM-dd" type="date"
-                  placeholder="选择日期"
-                />
-              </el-form-item>
-              <el-form-item label="生效年限" prop="effectiveYear">
-                <el-input
-                  v-model="ruleForm.effectiveYear" type="text" placeholder="请输入内容" maxlength="4"
-                  class="elipt"
-                  style="width: 50%" show-word-limit
-                />
-                <span class="elspan">年</span>
-              </el-form-item>
-              <el-form-item label="合同状态" prop="contractState">
-                <el-radio-group v-model="ruleForm.contractState">
-                  <el-radio :label="1">
-                    有效
-                  </el-radio>
-                  <el-radio :label="0">
-                    无效
-                  </el-radio>
-                </el-radio-group>
-              </el-form-item>
-              <el-form-item label="店铺类型" prop="shopType">
-                <el-radio-group v-model="ruleForm.shopType">
-                  <!-- <el-radio :label="1">品牌厂家</el-radio> -->
-                  <el-radio :label="2">本地</el-radio>
-                </el-radio-group>
-              </el-form-item>
-              <el-form-item
-                v-if="ruleForm.shopType === 2" prop="startTime" label="营业开始时间" :rules="[
-                  { required: true, message: '请选择营业开始时间', trigger: 'blur' }
-                ]"
-              >
-                <el-time-select
-                  v-model="ruleForm.startTime" placeholder="起始时间"
-                  :picker-options="{ start: '00:00', step: '00:05' }"
+                  </el-time-select>
+                </el-form-item>
+                <el-form-item
+                  v-if="formData.shopType === 2" prop="endTime" label="营业结束时间" :rules="[
+                    { required: true, message: '请选择营业结束时间', trigger: 'blur' }
+                  ]"
                 >
-                </el-time-select>
-              </el-form-item>
-              <el-form-item
-                v-if="ruleForm.shopType === 2" prop="endTime" label="营业结束时间" :rules="[
-                  { required: true, message: '请选择营业结束时间', trigger: 'blur' }
-                ]"
-              >
-                <el-time-select
-                  v-model="ruleForm.endTime" placeholder="营业结束时间"
-                  :picker-options="{ start: '00:00', step: '00:05', end: '24:00' }"
+                  <el-time-select
+                    v-model="formData.endTime" placeholder="营业结束时间"
+                    :picker-options="{ start: '00:00', step: '00:05', end: '24:00' }"
+                  >
+                  </el-time-select>
+                </el-form-item>
+                <el-form-item label="是否支持代金券" prop="isVoucher">
+                  <el-radio-group v-model="formData.isVoucher">
+                    <el-radio :label="1">
+                      允许
+                    </el-radio>
+                    <el-radio :label="2">
+                      拒绝
+                    </el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  v-if="formData.isVoucher === 1" :rules="[
+                    { required: true, message: '请输入代金券返还比例', trigger: 'blur' },
+                    { type: 'number', max: 100, min: 0, message: '请输入正确的代金券返还比例，0 ~ 100', trigger: ['blur', 'change'] }
+                  ]" label="代金券返还比例" prop="voucherReturn"
                 >
-                </el-time-select>
-              </el-form-item>
-              <el-form-item label="是否支持代金券" prop="isVoucher">
-                <el-radio-group v-model="ruleForm.isVoucher">
-                  <el-radio :label="1">
-                    允许
-                  </el-radio>
-                  <el-radio :label="2">
-                    拒绝
-                  </el-radio>
-                </el-radio-group>
-              </el-form-item>
-              <el-form-item
-                v-if="ruleForm.isVoucher === 1" :rules="[
-                  { required: true, message: '请输入代金券返还比例', trigger: 'blur' },
-                  { type: 'number', max: 100, min: 0, message: '请输入正确的代金券返还比例，0 ~ 100', trigger: ['blur', 'change'] }
-                ]" label="代金券返还比例" prop="voucherReturn"
-              >
-                <el-input v-model.number="ruleForm.voucherReturn" placeholder="请填写代金券返还比例，范围0 ~ 100">
-                  <template #append>%</template>
-                </el-input>
-              </el-form-item>
-              <el-form-item label="惠市宝商家编号">
-                <el-input v-model="ruleForm.hsbMrchId" maxlength="60" />
-              </el-form-item>
-              <el-form-item label="直播间审核" prop="auditLive">
-                <el-radio-group v-model="ruleForm.auditLive">
-                  <el-radio :label="1">开启</el-radio>
-                  <el-radio :label="0">关闭</el-radio>
-                </el-radio-group>
-              </el-form-item>
-              <el-form-item label="直播间商品审核" prop="auditLiveProduct">
-                <el-radio-group v-model="ruleForm.auditLiveProduct">
-                  <el-radio :label="1">
-                    开启
-                  </el-radio>
-                  <el-radio :label="0">
-                    关闭
-                  </el-radio>
-                </el-radio-group>
-              </el-form-item>
+                  <el-input v-model.number="formData.voucherReturn" placeholder="请填写代金券返还比例，范围0 ~ 100">
+                    <template #append>%</template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="惠市宝商家编号">
+                  <el-input v-model="formData.hsbMrchId" maxlength="60" />
+                </el-form-item>
+                <el-form-item label="直播间审核" prop="auditLive">
+                  <el-radio-group v-model="formData.auditLive">
+                    <el-radio :label="1">开启</el-radio>
+                    <el-radio :label="0">关闭</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item label="直播间商品审核" prop="auditLiveProduct">
+                  <el-radio-group v-model="formData.auditLiveProduct">
+                    <el-radio :label="1">
+                      开启
+                    </el-radio>
+                    <el-radio :label="0">
+                      关闭
+                    </el-radio>
+                  </el-radio-group>
+                </el-form-item>
 
-              <el-form-item class="b-shop-rate" prop="score" label="评分">
-                <el-rate v-model="ruleForm.score"></el-rate>
-              </el-form-item>
+                <el-form-item class="b-shop-rate" prop="score" label="评分">
+                  <el-rate v-model="formData.score"></el-rate>
+                </el-form-item>
 
-              <el-form-item prop="monthlySales" label="月售">
-                <el-input v-model.number="ruleForm.monthlySales" placeholder="请输入商家月售额" type="number"></el-input>
-              </el-form-item>
+                <el-form-item prop="monthlySales" label="月售">
+                  <el-input v-model.number="formData.monthlySales" placeholder="请输入商家月售额" type="number"></el-input>
+                </el-form-item>
 
-              <el-form-item prop="perCapita" label="人均">
-                <el-input v-model.number="ruleForm.perCapita" type="number" placeholder="请输入人均消费额" closeable></el-input>
-              </el-form-item>
+                <el-form-item prop="perCapita" label="人均">
+                  <el-input v-model.number="formData.perCapita" type="number" placeholder="请输入人均消费额" closeable></el-input>
+                </el-form-item>
 
-              <el-form-item prop="shopBrief" label="商家简介">
-                <el-input
-                  v-model="ruleForm.shopBrief" autosize maxlength="250" show-word-limit
-                  type="textarea"
-                  placeholder="请输入商家简介" closeable
-                ></el-input>
-              </el-form-item>
+                <el-form-item prop="shopBrief" label="商家简介">
+                  <el-input
+                    v-model="formData.shopBrief" autosize maxlength="250" show-word-limit
+                    type="textarea"
+                    placeholder="请输入商家简介" closeable
+                  ></el-input>
+                </el-form-item>
 
-              <el-form-item prop="advertisement" label="广告图">
-                <el-upload
-                  class="avatar-uploader" list-type="picture-card" :file-list="formData.advertisement"
-                  :action="uploadUrl"
-                  :on-success="(r) => formData.advertisement.push({ url: r.url, uid: r.url + Math.random() + Date.now() })"
-                  :on-remove="(e) => formData.advertisement.filter((item) => item.uid !== e.uid)"
-                >
-                  <i class="el-icon-plus avatar-uploader-icon" />
-                </el-upload>
-              </el-form-item>
-            </el-tab-pane>
-            <el-tab-pane label="客户信息" name="second">
-              <el-form-item label="账号" prop="shopPhone" maxlength="20" />
-              </el-form-item>
-              <el-form-item label="密码" prop="shopPassword">
-                <el-input v-model="ruleForm.shopPassword" type="password" maxlength="16" />
-              </el-form-item>
-            </el-tab-pane>
-          </el-tabs>
-        </div>
-      </el-form>
+                <el-form-item prop="advertisement" label="广告图">
+                  <el-upload
+                    class="avatar-uploader" list-type="picture-card" :file-list="formData.advertisement"
+                    :action="uploadUrl"
+                    :on-success="(r) => formData.advertisement.push({ url: r.url, uid: r.url + Math.random() + Date.now() })"
+                    :on-remove="(e) => formData.advertisement.filter((item) => item.uid !== e.uid)"
+                  >
+                    <i class="el-icon-plus avatar-uploader-icon" />
+                  </el-upload>
+                </el-form-item>
+              </el-tab-pane>
+              <el-tab-pane label="客户信息" name="second">
+                <el-form-item label="账号" prop="shopPhone" maxlength="20">
+                  <el-input ref="shopPhoneCls" v-model="formData.shopPhone" maxlength="20" />
+                </el-form-item>
+                <el-form-item label="密码" prop="shopPassword">
+                  <el-input v-model="formData.shopPassword" type="password" maxlength="16" />
+                </el-form-item>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-form>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button size="mini" @click="handleClose">取 消</el-button>
+          <el-button v-if="activeName === 'first'" type="primary" size="mini" @click="activeName = 'second'">
+            下一步
+          </el-button>
+          <el-button v-else-if="activeName === 'second'" type="primary" size="mini" @click="handleSubmit">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
 
-      <!-- 选择经纬度 -->
-      <SelectAddressMap
-        ref="selectAddressMapRef"
-        @select="(ruleForm.longitude = address[0]) && (ruleForm.latitude = address[1])"
-      ></SelectAddressMap>
-    </div>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button size="mini" @click="handleClose">取 消</el-button>
-        <el-button v-if="activeName === 'first'" type="primary" size="mini" @click="activeName = 'second'">
-          下一步
-        </el-button>
-        <el-button v-else-if="activeName === 'second'" type="primary" size="mini" @click="handleSubmit">确 定</el-button>
-      </span>
-    </template>
-  </el-dialog>
+    <!-- 选择经纬度 -->
+    <SelectAddressMap
+      ref="selectAddressMapRef"
+      @select="(address) => (formData.longitude = address[0]) && (formData.latitude = address[1])"
+    ></SelectAddressMap>
+  </div>
 </template>
 
 <script>
 import SelectAddressMap from './SelectAddressMap'
 import { businessListGetById, businessListUpdate, businessListSave, businessClassList } from '@/api/business'
+import { getProvinceList, getChildAreaList } from '@/api/address'
 import { uploadUrl } from '@/utils/request'
 import XeUtils from 'xe-utils'
 
@@ -243,13 +242,14 @@ export default {
         effectiveYear: '', // 生效年限
         shopType: 2, // 商家类型 1 商家 2 本地
         isVoucher: 1, // 是否支持代金卷 1 true 2 false
+        voucherReturn: '',
         contractState: 1, // 合同状态 1-有效 0-无效
         auditLive: 1,
         auditLiveProduct: 1,
         shopPhone: '', // 账号
         shopPassword: '', // 密码
         perCapita: '', // 人均
-        score: 5, // 评分
+        score: '', // 评分
         advertisement: [], // 广告图
         areaId: '', // 区域id
         hsbMrchId: '', // 惠市宝商家编号，不是必填
@@ -280,13 +280,43 @@ export default {
         auditLive: [ { required: true, message: '请选择状态', trigger: 'change' } ],
         auditLiveProduct: [ { required: true, message: '请选择状态', trigger: 'change' } ],
         score: [ { required: true, message: '请选择商家评分', trigger: 'change' } ],
-        monthlySales: [ { required: true, message: '请输入商家月售额', trigger: 'trigger' } ],
+        monthlySales: [ { required: true, message: '请输入商家月售额', trigger: 'blur' } ],
         // advertisement: [ { required: true, message: '请上传广告图', trigger: 'trigger' } ],
         // classificationArr: [ { required: true, type: 'array', message: '请选择分类' } ],
         areaId: [ { required: true, message: '请选择地址', trigger: 'blur' } ],
         longitude: [ { required: true, message: '请选择商家经纬度', trigger: 'blur' } ],
         isBeeCoin: [ { required: true, message: '请选择是否支持消费金' } ],
-        beeCoinRatio: []
+        beeCoinRatio: [],
+        shopPhone: [
+          { required: true, message: '请输入账号', trigger: 'blur' },
+          { pattern: /^1[3456789]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
+        ],
+        shopPassword: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+          { pattern: /^[~!@#$%^&*\-+=_.0-9a-zA-Z]{8,16}$/, message: '8-16密码数字英文混合' }
+        ]
+      },
+      activeName: 'first',
+      regionArrDialog: [],
+      regionProps: {
+        lazy: true,
+        label: 'name',
+        value: 'id',
+        lazyLoad(node, resolve) {
+          const { level, value } = node
+          if (level === 0) {
+            getProvinceList().then((res) => {
+              resolve(res.data)
+            })
+          } else if (level != 0) {
+            getChildAreaList(value).then((res) => {
+              resolve(res.data.map((item) => {
+                item.leaf = level === 3
+                return item
+              }))
+            })
+          }
+        }
       },
       uploadUrl,
       categoryList: []
@@ -316,12 +346,12 @@ export default {
     },
     async getCategoryTreeList() {
       const res = await businessClassList({ page: 1, pageSize: 9999 })
-      XeUtils.eachTree(res.data, (item) => {
+      XeUtils.eachTree(res.data.records, (item) => {
         if (Array.isArray(item.childs) && item.childs.length === 0) {
           item.childs = undefined
         }
       }, { children: 'childs' })
-      this.categoryList = res.data
+      this.categoryList = res.data.records
     },
     initList() {
     },
@@ -334,6 +364,7 @@ export default {
       if (categoryItem && Array.isArray(categoryItem.nodes)) {
         this.formData.classificationArr = categoryItem.nodes.map((v) => v.id)
       }
+      if (this.formData.areaId) this.regionArrDialog = [ this.formData.areaId ]
       this.visible = true
       this.initList()
       if (params.shopId) {
@@ -354,6 +385,7 @@ export default {
         if (categoryItem && Array.isArray(categoryItem.nodes)) {
           this.formData.classificationArr = categoryItem.nodes.map((v) => v.id)
         }
+        if (this.formData.areaId) this.regionArrDialog = [ this.formData.areaId ]
         this.$nextTick(() => {
           this.$refs.formData && this.$refs.formData.validate()
         })

src/views/business/businessList/index copy.vue

@@ -1,348 +0,0 @@
-<!--  -->
-<template>
-  <div class="app-container">
-    <!-- 查询和其他操作 -->
-    <div class="filter-container">
-      <el-input
-        v-model="listQuery.shopName" clearable size="mini" class="filter-item"
-        style="width: 200px;"
-        placeholder="请输入店铺名称"
-      />
-      <el-input
-        v-model="listQuery.shopCode" clearable size="mini" class="filter-item"
-        style="width: 200px;margin-left: 10px;" placeholder="请输入店铺编码"
-      />
-      <el-input
-        v-model="listQuery.chargePersonName" clearable size="mini" class="filter-item"
-        style="width: 200px;margin-left: 10px;" placeholder="请输入负责人"
-      />
-      <el-select
-        v-model="listQuery.contractState" clearable size="mini" class="filter-item"
-        style="width: 200px;margin-left: 10px;" placeholder="请选择合同状态"
-      >
-        <el-option label="有效" :value="1" />
-        <el-option label="无效" :value="0" />
-      </el-select>
-      <el-button
-        size="mini" class="filter-item" type="primary" icon="el-icon-search"
-        style="margin-left:10px;"
-        @click="handleSearch"
-      >
-        查找
-      </el-button>
-      <br />
-      <el-button
-        size="mini" type="primary" icon="el-icon-plus"
-        @click="$refs.EditModal && $refs.EditModal.handleOpen({ shopId: '' })"
-      >
-        新建商家
-      </el-button>
-    </div>
-
-    <!-- 查询结果 -->
-    <div v-tableHeight>
-      <el-table
-        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 label="店铺名称" width="220">
-          <template slot-scope="scope">{{ scope.row.shopName }}</template>
-        </el-table-column>
-        <el-table-column prop="shopCode" label="店铺编码" />
-        <el-table-column label="是否支持消费金">
-          <template slot-scope="scope">
-            <span v-if="scope.row.isBeeCoin === 1">支持</span>
-            <span v-else-if="scope.row.isBeeCoin === 2">不支持</span>
-            <span v-else>--</span>
-          </template>
-        </el-table-column>
-        <!-- <el-table-column align="center" min-width="120" label="商家消费金提现比例" prop="beecoinRatio">
-          <template slot-scope="{ row }">
-          <span v-if="row.beeCoinRatio">{{ row.beeCoinRatio }}：1</span>
-          <span v-else>--</span>
-          </template>
-          </el-table-column> -->
-        <el-table-column prop="chargePersonName" label="负责人" />
-        <el-table-column prop="chargePersonPhone" label="联系电话" />
-        <el-table-column label="合同状态">
-          <template slot-scope="scope">
-            <span v-if="scope.row.contractState === 0">无效</span>
-            <span v-if="scope.row.contractState === 1">有效</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createTime" label="创建时间" />
-        <el-table-column label="操作" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <div class="btnList">
-              <el-button type="text" @click="seeMore(scope.row)">
-                查看
-              </el-button>
-              <el-button type="text" @click="edit(scope.row)">
-                编辑
-              </el-button>
-              <el-button v-if="scope.row.state == 1" type="text" @click="del(scope.row)">
-                禁用
-              </el-button>
-              <el-button v-else type="text" @click="del(scope.row)">
-                启用
-              </el-button>
-              <el-button type="text" @click="delBusiness(scope.row)">
-                删除
-              </el-button>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-
-    <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>
-
-    <!-- 新增编辑 -->
-    <EditModal ref="EditModal" @success="getList" />
-    <!-- 查看详情 -->
-    <DetailModal ref="DetailModal" />
-  </div>
-</template>
-
-<script>
-import EditModal from './components/EditModal'
-import DetailModal from './components/DetailModal'
-import {
-  businessListGetAll,
-  businessListGetById,
-  businessListStart,
-  delBusinessById
-} from '@/api/business'
-import { getProvinceList, getChildAreaList } from '@/api/address'
-
-export default {
-  name: 'BusinessList',
-  components: {
-    EditModal,
-    DetailModal
-  },
-  data() {
-    // 这里存放数据
-    return {
-      list: [],
-      total: 0,
-      listLoading: true,
-      listQuery: {
-        page: 1,
-        pageSize: 20,
-        shopName: '', // 店铺名称
-        shopCode: '', // 店铺编码
-        chargePersonName: '', // 店铺负责人
-        contractState: '', // 合同状态 1-有效 0-无效
-        shopType: 2
-      },
-      areaData: {
-        lazy: true,
-        label: 'name',
-        value: 'id',
-        lazyLoad(node, resolve) {
-          const { level, value } = node
-          if (level === 0) {
-            getProvinceList().then((res) => {
-              resolve(res.data)
-            })
-          } else if (level != 0) {
-            getChildAreaList(value).then((res) => {
-              resolve(res.data.map((item) => {
-                item.leaf = level === 3
-                return item
-              }))
-            })
-          }
-        }
-      },
-      // 新建商家弹框
-      dialogVisible: false,
-      isEdit: false, // 是否是编辑
-      activeName: 'first',
-      disabled: false,
-      ruleForm: {
-        shopName: '', // 店铺名称
-        isBeeCoin: '', // 是否支持消费金
-        beeCoinRatio: '', // 商家消费金提现比例
-        chargePersonName: '', // 店铺负责人
-        chargePersonPhone: '', // 负责人电话
-        shopType: 2, // 店铺类型 1商城 2本地
-        isVoucher: 1, // 是否支持代金卷 1 true 2 false
-        shopAdress: '', // 地址
-        effectiveDate: '', // 生效日期
-        effectiveYear: '', // 生效年限
-        contractState: 1, // 合同状态 1-有效 0-无效
-        hsbMrchId: '',  // 惠市宝商家编号，不是必填
-        auditLive: 1,
-        auditLiveProduct: 1,
-        shopPhone: '', // 账号
-        shopPassword: '', // 密码
-        perCapita: '', // 人均
-        score: 5, // 评分
-        advertisement: '',
-        classificationId: null, // 商家分类id
-        startTime: '',
-        endTime: '',
-        shopBrief: '' // 商家簡介
-      },
-      rules: {
-        shopPhone: [
-          { required: true, message: '请输入账号', trigger: 'blur' },
-          { pattern: /^1[3456789]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
-        ],
-        shopPassword: [
-          { required: true, message: '请输入密码', trigger: 'blur' },
-          { pattern: /^[~!@#$%^&*\-+=_.0-9a-zA-Z]{8,16}$/, message: '8-16密码数字英文混合' }
-        ]
-      },
-      currentPage: 1,
-      userState: 1
-    }
-  },
-  created() {
-    this.getList()
-  },
-  methods: {
-    async getList() {
-      this.listLoading = true
-      try {
-        const res = await businessListGetAll(this.listQuery)
-        this.list = res.data.list
-        this.total = res.data.total
-      } finally {
-        this.listLoading = false
-      }
-    },
-    handleSearch() {
-      this.listQuery.page = 1
-      this.getList()
-    },
-    // 查看
-    async seeMore(row) {
-      const res = await businessListGetById({ shopId: row.shopId })
-      if (res.code === '') {
-        this.userState = 3
-        this.disabled = true
-        this.ruleForm = res.data
-        this.dialogVisible = true
-        this.initShopClassPath(this.ruleForm.classificationId)
-        this.ruleForm.voucherReturn *= 1
-        const advertisementStr = this.ruleForm.advertisement
-        if (advertisementStr && typeof advertisementStr === 'string') {
-          this.advertisementList = advertisementStr.split(',').map((item) => ({
-            url: item,
-            uid: item + Math.random() + new Date()
-          }))
-        }
-      }
-    },
-    // 删除
-    async del(row) {
-      console.log(row)
-      if (row.state === 1) {
-        const res = await businessListStart({
-          shopName: row.shopName,
-          state: 0,
-          shopId: row.shopId
-        })
-        if (res.code === '') {
-          this.$message({
-            message: '停用成功',
-            type: 'success'
-          })
-          this.getList()
-        }
-      } else {
-        const res = await businessListStart({
-          shopName: row.shopName,
-          state: 1,
-          shopId: row.shopId
-        })
-        if (res.code === '') {
-          this.$message({
-            message: '启用成功',
-            type: 'success'
-          })
-          this.getList()
-        }
-      }
-    },
-    delBusiness(row) {
-      this.$confirm('此操作将永久删除该商家, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(async () => {
-        const res = await delBusinessById({
-          shopId: row.shopId
-        })
-        if (res.code === '') {
-          this.$message({
-            message: '操作成功',
-            type: 'success'
-          })
-          this.getList()
-        }
-      })
-    },
-
-    // 获取省数据
-    handleCascaderChange() {
-      const checkedNode = this.$refs.cascaderRef.getCheckedNodes()
-      const nodeData = checkedNode[0].data
-      this.ruleForm.areaId = nodeData.id
-    },
-
-    // 获取路径信息
-    initShopClassPath(classId) {
-      const allLevelThereList = []
-      this.allShopCategoryList.forEach((item) => {
-        item.childs.forEach((item1) => {
-          allLevelThereList.push(...item1.childs)
-        })
-      })
-      const currentClassInfo = allLevelThereList.find((item) => item.levelId.includes(classId))
-      if (currentClassInfo) {
-        this.ruleForm.classificationId = currentClassInfo.levelId.slice(1).split('/')
-      }
-    }
-  }
-}
-</script>
-
-<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;
-		}
-	}
-
-	.small-padding {
-		.cell {
-			padding-left: 5px;
-			padding-right: 5px;
-		}
-	}
-
-	.fixed-width {
-		.el-button--mini {
-			padding: 7px 10px;
-		}
-	}
-}
-</style>

src/views/business/businessList/index.vue

@@ -1,869 +1,225 @@
-<!--  -->
 <template>
-  <div>
-    <div class="pending">
-      <!-- 搜索 -->
-      <div class="formSearch">
-        <el-form :inline="true" :model="formInline">
-          <el-form-item label="店铺名称">
-            <el-input v-model="formInline.shopName" maxlength="20" placeholder="请输入店铺名称" />
-          </el-form-item>
-          <el-form-item label="店铺编码">
-            <el-input v-model="formInline.shopCode" maxlength="20" placeholder="请输入店铺编码" />
-          </el-form-item>
-          <el-form-item label="负责人">
-            <el-input v-model="formInline.chargePersonName" maxlength="20" placeholder="请输入负责人" />
-          </el-form-item>
-          <el-form-item label="合同状态">
-            <el-select v-model="formInline.contractState" placeholder="请选择">
-              <el-option label="有效" value="1" />
-              <el-option label="无效" value="0" />
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" plain @click="onSubmit">
-              查询
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-input
+        v-model="listQuery.shopName" clearable size="mini" class="filter-item"
+        style="width: 200px;"
+        placeholder="请输入店铺名称"
+      />
+      <el-input
+        v-model="listQuery.shopCode" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入店铺编码"
+      />
+      <el-input
+        v-model="listQuery.chargePersonName" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入负责人"
+      />
+      <el-select
+        v-model="listQuery.contractState" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请选择合同状态"
+      >
+        <el-option label="有效" :value="1" />
+        <el-option label="无效" :value="0" />
+      </el-select>
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+      <br />
+      <el-button
+        size="mini" type="primary" icon="el-icon-plus"
+        @click="$refs.EditModal && $refs.EditModal.handleOpen({ shopId: '' })"
+      >
+        新建商家
+      </el-button>
+    </div>
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
+      <el-table
+        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 label="店铺名称" width="220">
+          <template slot-scope="scope">{{ scope.row.shopName }}</template>
+        </el-table-column>
+        <el-table-column prop="shopCode" label="店铺编码" />
+        <el-table-column label="是否支持消费金">
+          <template slot-scope="scope">
+            <span v-if="scope.row.isBeeCoin === 1">支持</span>
+            <span v-else-if="scope.row.isBeeCoin === 2">不支持</span>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column align="center" min-width="120" label="商家消费金提现比例" prop="beecoinRatio">
+          <template slot-scope="{ row }">
+          <span v-if="row.beeCoinRatio">{{ row.beeCoinRatio }}：1</span>
+          <span v-else>--</span>
+          </template>
+          </el-table-column> -->
+        <el-table-column prop="chargePersonName" label="负责人" />
+        <el-table-column prop="chargePersonPhone" label="联系电话" />
+        <el-table-column label="合同状态">
+          <template slot-scope="scope">
+            <span v-if="scope.row.contractState === 0">无效</span>
+            <span v-if="scope.row.contractState === 1">有效</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" />
+        <el-table-column align="center" label="操作" width="280" 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" plain @click="addbuss">
-              新建商家
+            <el-button size="mini" @click="handleEdit(row)">
+              编辑
             </el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-      <!-- 表格 -->
-      <div class="tableBox">
-        <el-table ref="multipleTable" :data="tableData" border
-          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%">
-          <el-table-column label="店铺名称" width="220">
-            <template slot-scope="scope">{{ scope.row.shopName }}</template>
-          </el-table-column>
-          <el-table-column prop="shopCode" label="店铺编码" />
-          <el-table-column label="是否支持消费金">
-            <template slot-scope="scope">
-              <span v-if="scope.row.isBeeCoin === 1">支持</span>
-              <span v-else-if="scope.row.isBeeCoin === 2">不支持</span>
-              <span v-else>--</span>
-            </template>
-          </el-table-column>
-					<!-- <el-table-column align="center" min-width="120" label="商家消费金提现比例" prop="beecoinRatio">
-						<template slot-scope="{ row }">
-							<span v-if="row.beeCoinRatio">{{ row.beeCoinRatio }}：1</span>
-							<span v-else>--</span>
-						</template>
-					</el-table-column> -->
-          <el-table-column prop="chargePersonName" label="负责人" />
-          <el-table-column prop="chargePersonPhone" label="联系电话" />
-          <el-table-column label="合同状态">
-            <template slot-scope="scope">
-              <span v-if="scope.row.contractState === 0">无效</span>
-              <span v-if="scope.row.contractState === 1">有效</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="createTime" label="创建时间" />
-          <el-table-column label="操作" show-overflow-tooltip>
-            <template slot-scope="scope">
-              <div class="btnList">
-                <el-button type="text" @click="seeMore(scope.row)">
-                  查看
-                </el-button>
-                <el-button type="text" @click="edit(scope.row)">
-                  编辑
-                </el-button>
-                <el-button v-if="scope.row.state == 1" type="text" @click="del(scope.row)">
-                  禁用
-                </el-button>
-                <el-button v-else type="text" @click="del(scope.row)">
-                  启用
-                </el-button>
-                <el-button type="text" @click="delBusiness(scope.row)">
-                  删除
-                </el-button>
-              </div>
-            </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="userState === 0
-        ? '新增商家'
-        : userState === 1
-          ? '修改商家'
-          : '查看商家'
-        " :visible.sync="dialogVisible" width="50%" center :before-close="closeFn" :close-on-click-modal="false">
-        <div>
-          <el-tabs v-model="activeName" @tab-click="handleClick">
-            <el-tab-pane label="授权信息" name="first">
-              <el-form ref="ruleFormInfo" :model="ruleForm" :rules="rulesInfo" label-width="150px">
-                <el-form-item label="店铺名称" prop="shopName">
-                  <el-input v-model="ruleForm.shopName" maxlength="20" :disabled="disabled" />
-                </el-form-item>
-                <el-form-item label="是否支持消费金" prop="isBeeCoin">
-                  <el-radio-group v-model="ruleForm.isBeeCoin">
-                    <el-radio :disabled="disabled" :label="1">
-                      支持
-                    </el-radio>
-                    <el-radio :disabled="disabled" :label="2">
-                      不支持
-                    </el-radio>
-                  </el-radio-group>
-                </el-form-item>
-                <el-form-item label="商家消费金提现比例" prop="beeCoinRatio">
-                  <!-- <el-input v-model="ruleForm.beeCoinRatio" type="text" :disabled="disabled" placeholder="商家消费金提现比例"
-                    style="width: 50%" /> -->
-                    <el-input-number v-model="ruleForm.beeCoinRatio" :precision="2" :step="0.01" :max="1"></el-input-number>
-                  <span style="margin-left: 10px;">比例*100</span>
-                  </el-form-item>
-                <el-form-item v-if="ruleForm.isBeeCoin === 1" label="商家消费金提现比例" prop="beeCoinRatio">
-                  <el-input v-model="ruleForm.beeCoinRatio" type="text" :disabled="disabled" placeholder="商家消费金提现比例"
-                    style="width: 50%" />
-                  <span style="margin-left: 10px;">：1</span>
-                </el-form-item>
-                <el-form-item label="店铺负责人" prop="chargePersonName">
-                  <el-input v-model="ruleForm.chargePersonName" maxlength="20" :disabled="disabled" />
-                </el-form-item>
-                <el-form-item label="负责人电话" prop="chargePersonPhone">
-                  <el-input v-if="cpPhoneShow" :value="hidden(ruleForm.chargePersonPhone, 3, 4)" maxlength="11"
-                    :disabled="disabled" @focus="focuscpPhoneInput" />
-                  <el-input v-else ref="cpPhoneCls" v-model="ruleForm.chargePersonPhone" maxlength="11" clearable
-                    :disabled="disabled" @change="changecpPhoneInput" />
-                </el-form-item>
-                <el-form-item label="请选择区域" prop="areaId">
-                  <el-cascader v-if="!isEdit" :disabled="disabled" :props="areaData" ref="cascaderRef"
-                    @change="handleCascaderChange"></el-cascader>
-                  <div v-else>
-                    {{ ruleForm.areaId }}
-                    <el-button :disabled="disabled" size="mini" type="primary" style="margin-left: 15px;"
-                      @click="isEdit = !isEdit">{{ isEdit ? '修改' : '取消' }}</el-button>
-                  </div>
-                </el-form-item>
-
-                <el-form-item label="请选择门店分类" prop="classificationId">
-                  <el-cascader :disabled="disabled" v-model="ruleForm.classificationId" :options="allShopCategoryList"
-                    :props="{ label: 'storeName', value: 'id', children: 'childs' }"></el-cascader>
-                </el-form-item>
-                <el-form-item label="店铺地址" prop="shopAdress">
-                  <el-input ref="addressCls" v-model="ruleForm.shopAdress" maxlength="60" :disabled="disabled" />
-                  <!-- <div v-else @click="inputAddress">
-                    <el-input :value="hidden(ruleForm.shopAdress, 1, 1)" :disabled="disabled" />
-                  </div> -->
-                </el-form-item>
-                <el-form-item label="店铺经纬度" prop="longitude">
-                  <div>
-                    <span v-if="ruleForm.longitude">
-                      {{ ruleForm.longitude }} - {{ ruleForm.latitude }}
-                    </span>
-                    <el-button size="mini" type="primary" style="margin-left: 20px;"
-                      @click="$refs.selectAddressMapRef && $refs.selectAddressMapRef.show()">{{ ruleForm.longitude ? '修改'
-                        :
-                        '选择' }}</el-button>
-                  </div>
-                </el-form-item>
-                <el-form-item label="生效日期" prop="effectiveDate">
-                  <el-date-picker v-model="ruleForm.effectiveDate" :disabled="disabled" value-format="yyyy-MM-dd"
-                    type="date" placeholder="选择日期" />
-                </el-form-item>
-                <el-form-item label="生效年限" prop="effectiveYear">
-                  <el-input v-model="ruleForm.effectiveYear" type="text" :disabled="disabled" placeholder="请输入内容"
-                    maxlength="4" class="elipt" style="width: 50%" show-word-limit />
-                  <span class="elspan">年</span>
-                </el-form-item>
-                <el-form-item label="合同状态" prop="contractState">
-                  <el-radio-group v-model="ruleForm.contractState">
-                    <el-radio :disabled="disabled" :label="1">
-                      有效
-                    </el-radio>
-                    <el-radio :disabled="disabled" :label="0">
-                      无效
-                    </el-radio>
-                  </el-radio-group>
-                </el-form-item>
-                <el-form-item label="店铺类型" prop="shopType">
-                  <el-radio-group v-model="ruleForm.shopType">
-                    <!-- <el-radio :disabled="disabled" :label="1">
-                      品牌厂家
-                    </el-radio> -->
-                    <el-radio :disabled="disabled" :label="2">
-                      本地
-                    </el-radio>
-                  </el-radio-group>
-                </el-form-item>
-
-                <el-form-item v-if="ruleForm.shopType === 2" prop="startTime" label="营业开始时间" :rules="[
-                  { required: true, message: '请选择营业开始时间', trigger: 'blur' }]">
-
-                  <el-time-select :disabled="disabled" placeholder="起始时间" v-model="ruleForm.startTime" :picker-options="{
-                    start: '00:00',
-                    step: '00:05',
-                  }">
-                  </el-time-select>
-
-                </el-form-item>
-
-                <el-form-item v-if="ruleForm.shopType === 2" prop="endTime" label="营业结束时间" :rules="[
-                  { required: true, message: '请选择营业结束时间', trigger: 'blur' }]">
-
-                  <el-time-select :disabled="disabled" placeholder="营业结束时间" v-model="ruleForm.endTime" :picker-options="{
-                    start: '00:00',
-                    step: '00:05',
-                    end: '24:00',
-                  }">
-                  </el-time-select>
-                </el-form-item>
-
-                <el-form-item label="是否支持代金券" prop="isVoucher">
-                  <el-radio-group v-model="ruleForm.isVoucher">
-                    <el-radio :disabled="disabled" :label="1">
-                      允许
-                    </el-radio>
-                    <el-radio :disabled="disabled" :label="2">
-                      拒绝
-                    </el-radio>
-                  </el-radio-group>
-                </el-form-item>
-                <el-form-item v-if="ruleForm.isVoucher === 1" :rules="[
-                  { required: true, message: '请输入代金券返还比例', trigger: 'blur' },
-                  { type: 'number', max: 100, min: 0, message: '请输入正确的代金券返还比例，0 ~ 100', trigger: ['blur', 'change'] }
-                ]" label="代金券返还比例" prop="voucherReturn">
-                  <el-input :disabled="disabled" placeholder="请填写代金券返还比例，范围0 ~ 100"
-                    v-model.number="ruleForm.voucherReturn">
-                    <template slot="append">%</template>
-                  </el-input>
-                </el-form-item>
-                <el-form-item label="惠市宝商家编号">
-                  <el-input ref="addressCls" v-model="ruleForm.hsbMrchId" maxlength="60" :disabled="disabled" />
-                </el-form-item>
-                <el-form-item label="直播间审核" prop="auditLive">
-                  <el-radio-group v-model="ruleForm.auditLive">
-                    <el-radio :disabled="disabled" :label="1">
-                      开启
-                    </el-radio>
-                    <el-radio :disabled="disabled" :label="0">
-                      关闭
-                    </el-radio>
-                  </el-radio-group>
-                </el-form-item>
-                <el-form-item label="直播间商品审核" prop="auditLiveProduct">
-                  <el-radio-group v-model="ruleForm.auditLiveProduct">
-                    <el-radio :disabled="disabled" :label="1">
-                      开启
-                    </el-radio>
-                    <el-radio :disabled="disabled" :label="0">
-                      关闭
-                    </el-radio>
-                  </el-radio-group>
-                </el-form-item>
-
-                <el-form-item class="b-shop-rate" prop="score" label="评分">
-                  <el-rate :disabled="disabled" v-model="ruleForm.score"></el-rate>
-                </el-form-item>
-
-                <el-form-item prop="monthlySales" label="月售">
-                  <el-input :disabled="disabled" placeholder="请输入商家月售额" v-model.number="ruleForm.monthlySales"
-                    type="number"></el-input>
-                </el-form-item>
-
-                <el-form-item prop="perCapita" label="人均">
-                  <el-input :disabled="disabled" type="number" placeholder="请输入人均消费额" v-model.number="ruleForm.perCapita"
-                    closeable></el-input>
-                </el-form-item>
-
-                <el-form-item prop="shopBrief" label="商家简介">
-                  <el-input :disabled="disabled" autosize maxlength="250" show-word-limit type="textarea"
-                    placeholder="请输入商家简介" v-model="ruleForm.shopBrief" closeable></el-input>
-                </el-form-item>
+            <el-button v-if="row.state == 1" type="text" @click="handleDisabled(row)">
+              禁用
+            </el-button>
+            <el-button v-else type="text" @click="handleEnable(row)">
+              启用
+            </el-button>
+            <el-button type="danger" size="mini" @click="handleDelete(row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
 
-                <el-form-item prop="advertisement" label="广告图">
-                  <el-upload :disabled="disabled" class="avatar-uploader" list-type="picture-card"
-                    :file-list="advertisementList" :action="action" :on-success="handleAvatarSuccess"
-                    :on-remove="handleRemovePic">
-                    <i class="el-icon-plus avatar-uploader-icon" />
-                  </el-upload>
-                </el-form-item>
-              </el-form>
-            </el-tab-pane>
-            <el-tab-pane label="客户信息" name="second">
-              <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
-                <el-form-item label="账号" prop="shopPhone">
-                  <el-input v-if="shopPhoneShow" :value="hidden(ruleForm.shopPhone, 3, 4)" :disabled="disabled"
-                    maxlength="20" @focus="focusShopPhoneInput" />
-                  <el-input v-else ref="shopPhoneCls" v-model="ruleForm.shopPhone" :disabled="disabled" maxlength="20" />
-                </el-form-item>
-                <el-form-item label="密码" prop="shopPassword">
-                  <el-input v-model="ruleForm.shopPassword" type="password" :disabled="disabled" maxlength="16" />
-                </el-form-item>
-              </el-form>
-            </el-tab-pane>
-          </el-tabs>
-        </div>
-        <span slot="footer" class="dialog-footer">
-          <el-button @click="closeFn">取 消</el-button>
-          <el-button v-if="activeName == 'first'" type="primary" @click="next">下一步</el-button>
-          <el-button v-else type="primary" @click="addCheck('ruleForm')">确 定</el-button>
-        </span>
-      </el-dialog>
+    <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>
 
-    <!-- 选择经纬度 -->
-    <SelectAddressMap ref="selectAddressMapRef" @select="handleSelectLngAndLat"></SelectAddressMap>
+    <!-- 新增编辑 -->
+    <EditModal ref="EditModal" @success="getList" />
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
   </div>
 </template>
 
 <script>
+import EditModal from './components/EditModal'
+import DetailModal from './components/DetailModal'
 import {
   businessListGetAll,
-  businessListSave,
-  businessListGetById,
-  businessListUpdate,
   businessListStart,
-  delBusinessById,
+  delBusinessById
 } from '@/api/business'
-import { uploadUrl } from '@/utils/request'
-import { getProvinceList, getChildAreaList } from '@/api/address'
-import { businessClassList } from '@/api/business'
-import SelectAddressMap from './components/SelectAddressMap'
 
 export default {
   name: 'BusinessList',
-  components: { SelectAddressMap },
+  components: {
+    EditModal,
+    DetailModal
+  },
   data() {
     // 这里存放数据
     return {
-      action: uploadUrl,
-      advertisementList: [],
-      allShopCategoryList: [],
-      areaData: {
-        lazy: true,
-        label: 'name',
-        value: 'id',
-        lazyLoad(node, resolve) {
-          const { level, value } = node;
-          if (level === 0) {
-            getProvinceList().then(res => {
-              resolve(res.data)
-            })
-          } else if (level != 0) {
-            getChildAreaList(value).then(res => {
-              resolve(res.data.map(item => {
-                item.leaf = level === 3
-                return item
-              }))
-            })
-          }
-        }
-      },
-      // 新建商家弹框
-      dialogVisible: false,
-      isEdit: false, // 是否是编辑
-      originShopDetailInfo: null, // 点击编辑上架2详情原始数据
-      activeName: 'first',
-      formInline: {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        pageSize: 20,
         shopName: '', // 店铺名称
         shopCode: '', // 店铺编码
         chargePersonName: '', // 店铺负责人
         contractState: '', // 合同状态 1-有效 0-无效
-        page: '1', // 当前页
-        pageSize: '10', // 每页记录数
         shopType: 2
-      },
-      disabled: false,
-      ruleForm: {
-        shopName: '', // 店铺名称
-        isBeeCoin: '', // 是否支持消费金
-        beeCoinRatio: '', // 商家消费金提现比例
-        chargePersonName: '', // 店铺负责人
-        chargePersonPhone: '', // 负责人电话
-        shopType: 2, // 店铺类型 1商城 2本地
-        isVoucher: 1, // 是否支持代金卷 1 true 2 false
-        shopAdress: '', // 地址
-        effectiveDate: '', // 生效日期
-        effectiveYear: '', // 生效年限
-        contractState: 1, // 合同状态 1-有效 0-无效
-        hsbMrchId:'',  // 惠市宝商家编号，不是必填
-        auditLive: 1,
-        isBeeCoin:2,
-        auditLiveProduct: 1,
-        shopPhone: '', // 账号
-        shopPassword: '', // 密码
-        perCapita: "", //人均
-        score: 5, // 评分
-        advertisement: '',
-        classificationId: null, // 商家分类id
-        startTime: "",
-        endTime: "",
-        shopBrief: '', // 商家簡介
-      },
-      showPhone: false,
-      showAddress: false,
-      userPhone: '',
-      showUserPhone: false,
-      newAddress: '',
-      personPhone: '',
-
-      rulesInfo: {
-        beeCoinRatio: [
-          { required: true, message: '请输入商家消费金提现比例', trigger: 'blur' },
-          
-        ],
-        effectiveYear: [
-          { required: true, message: '请输入生效时限', trigger: 'blur' }
-        ],
-        shopName: [
-          { required: true, message: '请输入店铺名称', trigger: 'blur' }
-        ],
-        chargePersonName: [
-          { required: true, message: '请输入店铺负责人', trigger: 'blur' }
-        ],
-        isBeeCoin: [
-          { required: true, message: '请选择是否支持消费金', trigger: 'blur' }
-        ],
-        isBeeCoin: [ { required: true, message: '请选择是否支持消费金', trigger: 'change' } ],
-        // beeCoinRatio: [ { required: true, message: '请输入商家消费金提现比例', trigger: 'blur' }],
-        effectiveYear: [ { required: true, message: '请输入生效时限', trigger: 'blur' } ],
-        shopName: [ { required: true, message: '请输入店铺名称', trigger: 'blur' } ],
-        chargePersonName: [ { required: true, message: '请输入店铺负责人', trigger: 'blur' } ],
-        chargePersonPhone: [
-          { required: true, message: '请输入负责人电话', trigger: 'blur' },
-          { pattern: /^1[3456789]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
-        ],
-        shopAdress: [ { required: true, message: '请输入地址', trigger: 'blur' } ],
-        contractState: [ { required: true, message: '请选择合同状态', trigger: 'change' } ],
-        shopType: [ { required: true, message: '请选择店铺类型', trigger: 'change' } ],
-        perCapita: [ { required: true, message: "请输入人均消费额", trigger: "blur" } ],
-        shopBrief: [ { required: true, message: "请填写商家介绍", trigger: "blur" } ],
-        isVoucher: [ { required: true, message: '请选择是否允许使用代金卷', trigger: 'change' } ], // 是否支持代金卷 1 true 2 false
-        auditLive: [ { required: true, message: '请选择状态', trigger: 'change' } ],
-        auditLiveProduct: [ { required: true, message: '请选择状态', trigger: 'change' } ],
-        effectiveDate: [ { required: true, message: '请选择日期', trigger: 'change' } ],
-        score: [ { required: true, message: '请选择商家评分', trigger: 'change' } ],
-        monthlySales: [ { required: true, message: '请输入商家月售额', trigger: 'trigger' } ],
-        // advertisement: [ { required: true, message: '请上传广告图', trigger: 'trigger' } ],
-        areaId: [ { required: true, message: "请选择地址", trigger: 'blur' } ],
-        longitude: [ { required: true, message: "请选择商家经纬度", trigger: 'blur' } ]
-      },
-      rules: {
-        shopPhone: [
-          { required: true, message: '请输入账号', trigger: 'blur' },
-          { pattern: /^1[3456789]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
-        ],
-        shopPassword: [
-          { required: true, message: '请输入密码', trigger: 'blur' },
-          { pattern: /^[~!@#$%^&*\-+=_.0-9a-zA-Z]{8,16}$/, message: '8-16密码数字英文混合' }
-        ]
-      },
-      total: 1,
-      tableData: [],
-      currentPage: 1,
-      userState: 1,
-      privacyTime: 0,
-      cpPhoneShow: true, // 是否显示脱敏负责人手机号
-      shopPhoneShow: true // 是否显示脱敏账号
+      }
     }
   },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 生命周期 - 创建完成（可以访问当前this实例）
   created() {
-
-  },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    this.getAll(this.formInline)
-    this.getCategoryList()
-    this.privacyTime = localStorage.getItem('privacyTime')
-    console.log(this.privacyTime)
+    this.getList()
   },
-  // 方法集合
   methods: {
-    focusShopPhoneInput() {
-      this.shopPhoneShow = false
-      this.ruleForm.shopPhone = ''
-      // 自动获取焦点
-      this.$nextTick(() => {
-        this.$refs.shopPhoneCls.focus()
-      })
-    },
-    focuscpPhoneInput() {
-      this.cpPhoneShow = false
-      this.ruleForm.chargePersonPhone = ''
-      // 自动获取焦点
-      this.$nextTick(() => {
-        this.$refs.cpPhoneCls.focus()
-      })
-    },
-    changecpPhoneInput() {
-    },
-    handleSizeChange(val) {
-      this.formInline.pageSize = val
-      this.getAll(this.formInline)
-    },
-    handleCurrentChange(val) {
-      this.formInline.page = val
-      this.getAll(this.formInline)
-    },
-    handleClick(tab, event) {
-      console.log(tab, event)
-    },
-    onSubmit() {
-      this.getAll(this.formInline)
-    },
-    // 新建商家
-    addbuss() {
-      this.userState = 0
-      this.disabled = false
-      this.newAddress = ''
-      this.personPhone = ''
-      this.ruleForm = {
-        shopName: '', // 店铺名称
-        isBeeCoin: '', // 是否支持消费金
-        beeCoinRatio: '', // 商家消费金提现比例
-        chargePersonName: '', // 店铺负责人
-        chargePersonPhone: '', // 负责人电话
-        shopAdress: '', // 地址
-        effectiveDate: '', // 生效日期
-        effectiveYear: '', // 生效年限
-        shopType: 2, // 商家类型 1 商家 2 本地
-        isVoucher: 1, // 是否支持代金卷 1 true 2 false
-        contractState: 1, // 合同状态 1-有效 0-无效
-        auditLive: 1,
-        isBeeCoin:2,
-        auditLiveProduct: 1,
-        shopPhone: '', // 账号
-        shopPassword: '', // 密码
-        advertisement: '', // 广告图
-        areaId: '', // 区域id
-        hsbMrchId:'',
-        longitude: '', // 经纬度
-        latitude: '', // 经纬度
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await businessListGetAll(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
       }
-      this.dialogVisible = true
-      this.advertisementList = []
-    },
-    next() {
-      this.activeName = 'second'
-    },
-    closeFn() {
-      this.$nextTick(() => {
-        this.$refs.ruleForm.resetFields()
-        this.$refs.ruleForm.clearValidate()
-        this.$refs.ruleFormInfo.clearValidate()
-        this.dialogVisible = false
-      })
-    },
-    // 新建商家确定
-    addCheck() {
-      const submitData = JSON.parse(JSON.stringify(this.ruleForm))
-      submitData.advertisement = this.advertisementList.map(item => item.url).join(',')
-      console.log(submitData)
-
-      this.$refs['ruleFormInfo'].validate((valid) => {
-        if (valid) {
-          console.log(this.userState)
-          if (this.personPhone !== '') {
-            submitData.chargePersonPhone = this.personPhone
-          }
-          if (this.newAddress !== '') {
-            submitData.shopAdress = this.newAddress
-          }
-          if (this.userPhone !== '') {
-            submitData.shopPhone = this.userPhone
-          }
-          if (submitData.shopName === '') {
-            this.$message.error('请输入店铺名称')
-            return
-          }
-          if (submitData.effectiveDate === '') {
-            this.$message.error('请输入生效日期')
-            return
-          }
-          if (!(typeof submitData.isBeeCoin === 'number')) {
-						console.log(submitData)
-            this.$message.error('请选择是否支持消费金')
-            return
-          }
-          if ((submitData.isBeeCoin === 1) && !submitData.beeCoinRatio) {
-            this.$message.error('请输入商家消费金提现比例')
-            return
-          }
-          if (submitData.effectiveYear === '') {
-            this.$message.error('请输入生效年限')
-            return
-          }
-
-          submitData.classificationId = submitData.classificationId[2]
-          if (!this.userState) {
-            businessListSave(submitData).then((res) => {
-              console.log(res)
-              if (res.code === '') {
-                this.$message({
-                  message: '新增成功',
-                  type: 'success'
-                })
-              }
-              this.getAll(this.formInline)
-              this.dialogVisible = false
-              this.$refs.ruleForm.clearValidate()
-            })
-          } else {
-            businessListUpdate(submitData).then((res) => {
-              console.log(res)
-              if (res.code === '') {
-                this.$message({
-                  message: '修改成功',
-                  type: 'success'
-                })
-                this.$refs.ruleForm.clearValidate()
-              }
-              this.getAll(this.formInline)
-              this.dialogVisible = false
-            })
-          }
-        } else {
-          console.log('error submit!!')
-          this.$message.error('请输入完整信息')
-          return false
-        }
-      })
     },
-    // 查看
-    async seeMore(row) {
-      this.showPhone = false
-      this.cpPhoneShow = true
-      this.shopPhoneShow = true
-      const res = await businessListGetById({ shopId: row.shopId })
-      if (res.code === '') {
-        this.userState = 3
-        this.disabled = true
-        this.ruleForm = res.data
-        this.dialogVisible = true
-        this.initShopClassPath(this.ruleForm.classificationId)
-        this.ruleForm.voucherReturn *= 1
-        const advertisementStr = this.ruleForm.advertisement
-        if (advertisementStr && typeof advertisementStr === 'string') {
-          this.advertisementList = advertisementStr.split(',').map(item => {
-            return {
-              url: item,
-              uid: item + Math.random() + new Date()
-            }
-          })
-        }
-      }
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
     },
-    // 编辑
-    async edit(row) {
-      this.showPhone = false
-      this.personPhone = ''
-      this.userState = 1
-      this.disabled = false
-      this.cpPhoneShow = true
-      const res = await businessListGetById({ shopId: row.shopId })
-      this.ruleForm = res.data
-      this.dialogVisible = true
-      this.isEdit = true
-      this.originShopDetailInfo = JSON.parse(JSON.stringify(res.data))
-      this.initShopClassPath(this.ruleForm.classificationId)
-      this.ruleForm.voucherReturn *= 1
-      const advertisementStr = this.ruleForm.advertisement
-      if (advertisementStr && typeof advertisementStr === 'string') {
-        this.advertisementList = advertisementStr.split(',').map(item => {
-          return {
-            url: item,
-            uid: item + Math.random() + new Date()
-          }
-        })
-      }
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
     },
-    // 删除
-    async del(row) {
-      console.log(row)
-      if (row.state === 1) {
-        const res = await businessListStart({
-          shopName: row.shopName,
-          state: 0,
-          shopId: row.shopId
-        })
-        if (res.code === '') {
-          this.$message({
-            message: '停用成功',
-            type: 'success'
-          })
-          this.getAll(this.formInline)
-        }
-      } else {
-        const res = await businessListStart({
-          shopName: row.shopName,
-          state: 1,
-          shopId: row.shopId
-        })
-        if (res.code === '') {
-          this.$message({
-            message: '启用成功',
-            type: 'success'
-          })
-          this.getAll(this.formInline)
-        }
-      }
+    handleEdit(row) {
+      this.$refs.EditModal && this.$refs.EditModal.handleOpen(row)
     },
-    delBusiness(row) {
-      // todo 判断商家状态
-      this.$confirm('此操作将永久删除该商家, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(async () => {
-        const res = await delBusinessById({
-          shopId: row.shopId
+    handleDelete(row) {
+      this.$confirm('确定删除此项？')
+        .then(async () => {
+          await delBusinessById({ shopId: row.shopId })
+          this.$message({ message: '删除成功！', type: 'success' })
+          this.handleSearch()
         })
-        if (res.code === '') {
-          this.$message({
-            message: '操作成功',
-            type: 'success'
-          })
-          this.getAll(this.formInline)
-        }
-      })
-        .catch(() => {
-
+        .catch(() => {})
+    },
+    handleDisabled(row) {
+      this.$confirm('确定停用此项？')
+        .then(async () => {
+          await businessListStart({ shopName: row.shopName, state: 0, shopId: row.shopId })
+          this.$message({ message: '停用成功！', type: 'success' })
+          this.handleSearch()
         })
-    },
-    // businessListGetAll
-    // 初始化查询所有数据
-    async getAll(formInline) {
-      const res = await businessListGetAll(formInline)
-      this.total = res.data.total
-      this.tableData = res.data.list
-    },
-    // 编辑号码
-    inputPhone() {
-      this.showPhone = true
-      this.personPhone = ''
-      this.$nextTick(() => {
-        this.$refs.phoneCls.focus()
-      })
-    },
-    // 编辑地址
-    inputAddress() {
-      this.showAddress = true
-      this.newAddress = ''
-      this.$nextTick(() => {
-        this.$refs.addressCls.focus()
-      })
-    },
-    // 编辑客户信息
-    inputUserPhone() {
-      this.showUserPhone = true
-      this.userPhone = ''
-      this.$nextTick(() => {
-        this.$refs.userPhoneCls.focus()
-      })
-    },
-    // 中间部分
-    hidden(str, frontLen, endLen) {
-      let endLenData = 0
-      if (str.length !== 2) {
-        endLenData = endLen
-      }
-      const len = str.length - frontLen - endLenData
-      let xing = ''
-      for (let i = 0; i < len; i++) {
-        xing += '*'
-      }
-      return (
-        str.substring(0, frontLen) + xing + str.substring(str.length - endLenData)
-      )
-    },
-
-    handleAvatarSuccess(response) {
-      const { url } = response.data
-      this.advertisementList.push({
-        url, uid: url + Math.random() + Date.now()
-      })
-    },
-
-    handleRemovePic(e) {
-      const { uid } = e
-      this.advertisementList = this.advertisementList.filter(item => item.uid !== uid)
-    },
-
-    // 获取省数据
-    handleCascaderChange() {
-      const checkedNode = this.$refs.cascaderRef.getCheckedNodes()
-      const nodeData = checkedNode[0].data
-      this.ruleForm.areaId = nodeData.id
-    },
-
-    // 获取所有商家分类
-    async getCategoryList() {
-      const res = await businessClassList({
-        page: 1,
-        pageSize: 100
-      })
-
-      this.allShopCategoryList = res.data.records.map(item => {
-        item.childs.map(item2 => {
-          item2.childs.map(item3 => {
-            delete item3.childs
-            return item3
-          })
-          return item2
-        })
-        return item
-      })
-    },
-
-    // 获取路径信息
-    initShopClassPath(classId) {
-      const allLevelThereList = []
-      this.allShopCategoryList.forEach(item => {
-        item.childs.forEach(item1 => {
-          allLevelThereList.push(...item1.childs)
+        .catch(() => {})
+    },
+    handleEnable(row) {
+      this.$confirm('确定启用此项？')
+        .then(async () => {
+          await businessListStart({ shopName: row.shopName, state: 1, shopId: row.shopId })
+          this.$message({ message: '启用成功！', type: 'success' })
+          this.handleSearch()
         })
-      })
-
-      const currentClassInfo = allLevelThereList.find(item => {
-        return item.levelId.includes(classId)
-      })
-
-      if (currentClassInfo) {
-        this.ruleForm.classificationId = currentClassInfo.levelId.slice(1).split('/')
-      }
-    },
-
-    // 选择经纬
-    handleSelectLngAndLat(address) {
-      this.ruleForm.longitude = address[0]
-      this.ruleForm.latitude = address[1]
+        .catch(() => {})
     }
   }
 }
 </script>
 
-<style
-  lang="scss"
-  scoped
->
-@import url("../../../styles/elDialog.scss");
-
-.pending {
-  padding: 30px;
-}
-
-.fenye {
-  margin-top: 20px;
-}
-
-.elipt {
-  width: 50%;
-}
-
-.elspan {
-  margin-left: 10px;
+<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;
+		}
+	}
+
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
+
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
 }
 </style>

src/views/business/settlement/addSettlement.vue

@@ -1,448 +0,0 @@
-<template>
-  <div class="">
-    <!-- 卡片 -->
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span v-if="shopDetails.checkState === 2" class="leftTitle">已拒绝</span>
-        <span v-if="shopDetails.checkState === 1" class="leftTitle">已通过</span>
-        <span v-if="shopDetails.checkState === 0" class="leftTitle">未处理</span>
-        <div class="girhtBtn">
-          <el-button class="" @click="back">
-            取消
-          </el-button>
-          <el-button v-if="shopDetails.checkState === 0" type="primary" @click="handle">
-            处理
-          </el-button>
-        </div>
-      </div>
-      <!--  卡片内容-->
-      <div>
-        <div class="msgDetail">
-          <div class="detail">
-            <div class="shop_info">
-              <p class="detail_title">店铺信息</p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>店铺名称：
-                </span>
-                <span>{{ shopDetails.shopName }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>店铺类型：
-                </span>
-                <span v-if="shopDetails.authenType == 1">个人</span>
-                <span v-if="shopDetails.authenType == 2">个体工商户</span>
-                <span v-if="shopDetails.authenType == 3">企业</span>
-                <span v-if="shopDetails.authenType == 4">其他组织</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>
-                  客服电话：
-                </span>
-                <span>{{ shopDetails.shopPhone }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>店铺负责人：
-                </span>
-                <span>{{ shopDetails.chargePersonName }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>负责人电话：
-                </span>
-                <span>{{ shopDetails.chargePersonPhone }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>店铺地址：
-                </span>
-                <span>{{ shopDetails.shopAdress }}</span>
-              </p>
-            </div>
-            <div class="person_info">
-              <p class="detail_title">个人信息</p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>名称：
-                </span>
-                <span>{{ shopDetails.name }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>证件信息：
-                </span>
-                <span>{{ shopDetails.cardTypeName }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>身份证号码：
-                </span>
-                <span>{{ shopDetails.idCard }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>身份证有效期：
-                </span>
-                <span>{{ shopDetails.cardTime }}</span>
-              </p>
-              <p class="detail_img">
-                <span>
-                  <font>*</font>证件照片:
-                </span>
-                <el-image
-                  v-for="(src, index) in idCardCopyFilePath" :key="'id' + index" class="img_box"
-                  :preview-src-list="idCardCopyFilePath" :src="src" :preview="2" alt=""
-                />
-              </p>
-              <p v-if="shopDetails && shopDetails.authenType === 1" class="detail_img">
-                <span>
-                  <font>*</font>手持证件照:
-                </span>
-                <el-image class="img_box" :src="shopDetails.cardHand" :preview-src-list="[ shopDetails.cardHand ]" />
-              </p>
-            </div>
-            <!-- +++++++++++++++++++++ 主体信息 ++++++++++++++++++++++++++++++++++++++++++++++++ -->
-            <div v-if="shopDetails.authenType !== 1" class="person_info">
-              <p class="detail_title">主体信息</p>
-              <p class="detail_text">
-                <span v-if="shopDetails.authenType == 2">
-                  <font>*</font> 商户名称：
-                </span>
-                <span v-if="shopDetails.authenType == 3">
-                  <font>*</font> 企业名称：
-                </span>
-                <span v-if="shopDetails.authenType == 4">
-                  <font>*</font> 组织名称：
-                </span>
-                <span>{{ shopDetails.subjectName }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font> {{ shopDetails.authenType == 4 ? '组织机构代码' : '社会信用代码' }}：
-                </span>
-                <span>{{ shopDetails.subjectCode }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>注册地址
-                </span>
-                <span>{{ shopDetails.subjectAdress }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>营业期限
-                </span>
-                <span>{{ shopDetails.subjectStartTime }} - {{ shopDetails.subjectEndTime }}</span>
-              </p>
-              <p class="detail_img">
-                <span>
-                  <font>*</font>{{ shopDetails.authenType == 4 ? '机构证明材料' : '营业执照' }}：
-                </span>
-                <img
-                  v-for="(src, index) in shopDetails.subjectLicense" :key="'id' + index" :src="src" :preview="2"
-                  alt=""
-                >
-              </p>
-            </div>
-            <div class="person_info">
-              <p class="detail_title">授权信息</p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>生效日期：
-                </span>
-                <span>{{ shopDetails.effectiveDate }}</span>
-              </p>
-              <p class="detail_text">
-                <span>
-                  <font>*</font>生效时限：
-                </span>
-                <span>{{ shopDetails.effectiveYear }}</span>
-                <span v-if="shopDetails.effectiveYear">年</span>
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </el-card>
-
-    <!-- *************对话框开始************* -->
-    <el-dialog
-      title="处理申请" :visible.sync="addFormDialog" width="30%" center
-      :show-close="false"
-      :close-on-click-modal="false" :modal-append-to-body="false" :modal="false"
-    >
-      <div>
-        <el-form ref="ruleForm" :model="addForm" label-width="80px">
-          <el-form-item label="入驻处理">
-            <el-radio-group v-model="addForm.checkHandle" @change="selectChoose">
-              <el-radio label="1">同意入驻</el-radio>
-              <el-radio label="0">拒绝入驻</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item v-if="addForm.checkHandle == 0" label="拒绝原因">
-            <el-input v-model="addForm.reason" maxlength="200" type="textarea" />
-          </el-form-item>
-          <el-form-item v-if="addForm.checkHandle == 1" label="生效日期">
-            <el-radio-group v-model="addForm.effectiveDate">
-              <el-radio label="null">即时生效</el-radio>
-              <el-radio label="0">指定日期</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item v-if="addForm.effectiveDate == 0 && addForm.checkHandle == 1">
-            <el-date-picker v-model="chooseDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
-          </el-form-item>
-          <el-form-item v-if="addForm.checkHandle == 1" label="生效时间">
-            <el-input
-              v-model="addForm.effectiveYear" maxlength="4" oninput="value=value.replace(/[^\d]/g,'')"
-              class="spanIpt"
-            />
-            <span class="riSpan">年</span>
-          </el-form-item>
-        </el-form>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="addFormDialog = false">取 消</el-button>
-        <el-button type="primary" @click="handle_save">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { settlementHandle } from '@/api/business'
-import { hidden } from '@/utils'
-
-export default {
-  props: {
-    businessData: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    // 这里存放数据
-    return {
-      shopId: '',
-      shopDetails: {},
-      addFormDialog: false,
-      idCardCopyFilePath: [],
-      chooseDate: '',
-      addForm: {
-        shopId: '', // 店铺id
-        checkHandle: '', // 1-同意入驻 0-拒绝入驻
-        effectiveDate: '', // 生效日期  null-即时生效 有值-指定日期生效
-        effectiveYear: '', // 生效时限（年）
-        reason: '' // 处理原因
-      }
-    }
-  },
-  watch: {
-    businessData: {
-      handler(nVal, oVal) {
-        this.shopDetails = {}
-        this.idCardCopyFilePath = []
-        this.shopId = nVal.shopId
-        this.shopDetails = nVal
-        this.shopDetails.idCard = hidden(this.shopDetails.idCard, 4, 4)
-        this.idCardCopyFilePath.push(nVal.cardPositive)
-        this.idCardCopyFilePath.push(nVal.cardSide)
-      }
-    }
-  },
-  created() {
-    this.shopDetails = {}
-    this.idCardCopyFilePath = []
-    this.shopId = this.businessData.shopId
-    this.shopDetails = this.businessData
-    this.shopDetails.idCard = hidden(this.shopDetails.idCard, 4, 4)
-    this.idCardCopyFilePath.push(this.businessData.cardPositive)
-    this.idCardCopyFilePath.push(this.businessData.cardSide)
-  },
-  // 方法集合
-  methods: {
-    // 处理
-    handle() {
-      this.addFormDialog = true
-    },
-    // 返回
-    back() {
-      this.$emit('cancel')
-    },
-    // selectChoose
-    selectChoose(index) {
-      if (index !== 1) {
-        this.addForm.effectiveDate = ''
-        this.addForm.effectiveYear = ''
-        this.chooseDate = ''
-      }
-    },
-    clearAddForm() {
-      this.addForm = {
-        shopId: '', // 店铺id
-        checkHandle: '', // 1-同意入驻 0-拒绝入驻
-        effectiveDate: '', // 生效日期  null-即时生效 有值-指定日期生效
-        effectiveYear: '', // 生效时限（年）
-        reason: '' // 处理原因
-      }
-    },
-    // 处理申请确定
-    async handle_save() {
-      if (this.addForm.checkHandle === '') {
-        this.$message.error('请选择入驻处理')
-        return
-      }
-      if (this.addForm.effectiveDate === '' && this.addForm.checkHandle === 1) {
-        this.$message.error('请选择生效日期')
-        return
-      }
-      if (this.addForm.effectiveYear === '' && this.addForm.checkHandle === 1) {
-        this.$message.error('请输入生效时间')
-        return
-      }
-      if (this.addForm.effectiveDate !== 'null') {
-        this.addForm.effectiveDate = this.chooseDate
-      } else {
-        this.addForm.effectiveDate = 'null'
-      }
-      this.addForm.shopId = this.shopId
-      const loading = this.$loading({
-        lock: true,
-        text: '处理中请稍后...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      const res = await settlementHandle(this.addForm)
-      this.addFormDialog = false
-      if (res.code === '') {
-        this.shopDetails = {}
-        this.idCardCopyFilePath = []
-        this.$message({
-          message: '处理成功',
-          type: 'success'
-        })
-        this.clearAddForm()
-        this.$emit('cancel')
-        this.$emit('search')
-      } else {
-        console.log('error')
-      }
-      loading.close()
-    }
-  }
-}
-</script>
-
-<style
-  lang="scss"
-  scoped
->
-//@import url(); 引入公共css类
-.clearfix {
-	.leftTitle {
-		font-size: 24px;
-		color: #333333;
-	}
-
-	.girhtBtn {
-		float: right;
-	}
-}
-
-.detail {
-	min-height: 500px;
-	background: rgba(255, 255, 255, 1);
-	box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.15);
-	border-radius: 4px;
-	padding: 1px 50px 20px;
-	margin-top: 15px;
-
-	.detail_title {
-		font-size: 24px;
-		color: #333333;
-		position: relative;
-		margin: 50px 20px 20px;
-
-		font {
-			color: #ff7911;
-		}
-
-		&:before {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 5px;
-			left: -20px;
-			width: 4px;
-			height: 24px;
-			background-color: #3a68f2;
-		}
-	}
-
-	.detail_text {
-		line-height: 40px;
-
-		span {
-			display: inline-block;
-			color: #333333;
-			font-size: 16px;
-
-			&:nth-child(1) {
-				width: 150px;
-				text-indent: 20px;
-
-				font {
-					color: red;
-				}
-			}
-
-			&:nth-child(2) {
-				color: #666666;
-			}
-		}
-	}
-
-	.detail_img {
-		position: relative;
-		line-height: 40px;
-		margin-bottom: 30px;
-		overflow: hidden;
-
-		span {
-			position: absolute;
-			top: 0;
-			left: 0;
-			display: inline-block;
-			color: #333333;
-			font-size: 16px;
-			width: 150px;
-			text-indent: 20px;
-
-			font {
-				color: #ff7911;
-			}
-		}
-
-		.img_box {
-			width: 265px;
-			height: 170px;
-			border-radius: 4px;
-			float: left;
-
-			&:nth-of-type(1) {
-				margin: 0 30px 0 150px;
-			}
-		}
-	}
-}
-
-.spanIpt {
-	width: 60%;
-}
-
-.riSpan {
-	margin-left: 10px;
-}
-</style>

src/views/business/settlement/components/ApplicationProcessing.vue

@@ -0,0 +1,166 @@
+<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="商家ID" prop="shopId">
+        <el-input
+          v-model="formData.shopId" maxlength="20" placeholder="商家ID" disabled
+        />
+      </el-form-item>
+      <el-form-item label="入驻处理" prop="checkHandle">
+        <el-radio-group
+          v-model="formData.checkHandle"
+          @input="(e) => e === 0 ? (formData.effectiveDate = formData.dateType = formData.effectiveYear = '') : ''"
+        >
+          <el-radio :label="1">同意入驻</el-radio>
+          <el-radio :label="0">拒绝入驻</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formData.checkHandle === 0" label="拒绝原因" prop="reason">
+        <el-input v-model="formData.reason" type="textarea" placeholder="请输入拒绝原因" maxlength="520" :rows="3" show-word-limit />
+      </el-form-item>
+      <el-form-item v-if="formData.checkHandle === 1" label="日期类型" prop="dateType">
+        <el-radio-group v-model="formData.dateType">
+          <el-radio :label="1">即时生效</el-radio>
+          <el-radio :label="2">指定日期</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="(formData.checkHandle === 1) && (formData.dateType === 2)" label="选择日期" prop="effectiveDate">
+        <el-date-picker
+          v-model="formData.effectiveDate"
+          size="medium"
+          type="date"
+          placeholder="选择日期"
+          value-format="yyyy-MM-dd"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item
+        v-if="(formData.checkHandle === 1) && (formData.dateType === 2)"
+        label="生效时间" prop="effectiveYear"
+      >
+        <el-input v-model="formData.effectiveYear" placeholder="请输入生效时间" style="width: 200px;">
+          <template #append>
+            <div>年</div>
+          </template>
+        </el-input>
+      </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 { settlementHandle } from '@/api/business'
+
+export default {
+  name: 'ApplicationProcessing',
+  components: {
+  },
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '820px',
+        title: ''
+      },
+      visible: false,
+      activityList: [],
+      formData: {
+        shopId: '', // 店铺id
+        checkHandle: '', // 1-同意入驻 0-拒绝入驻
+        dateType: '', // 非后端参数
+        effectiveDate: '', // 生效日期  null-即时生效 有值-指定日期生效
+        effectiveYear: '', // 生效时限（年）
+        reason: '' // 处理原因
+      },
+      formRules: {
+        shopId: [
+          { required: true, message: '缺少商家ID' }
+        ],
+        checkHandle: [
+          { required: true, message: '请选择入驻处理' }
+        ],
+        dateType: [],
+        effectiveDate: [],
+        effectiveYear: []
+      }
+    }
+  },
+  watch: {
+    'formData.checkHandle': {
+      deep: true,
+      handler(val) {
+        if (val === 1) {
+          this.formRules.dateType = [
+            { required: true, message: '请选择日期类型' }
+          ]
+        } else {
+          this.formRules.dateType = []
+        }
+      }
+    },
+    'formData.dateType': {
+      deep: true,
+      handler(val) {
+        if (val === 2) {
+          this.formRules.effectiveDate = [
+            { required: true, message: '请选择生效日期' }
+          ]
+          this.formRules.effectiveYear = [
+            { required: true, message: '请输入生效时间' },
+            { pattern: /^(0|[1-9][0-9]*)$/, message: '请输入正整数' }
+          ]
+        } else {
+          this.formRules.effectiveDate = []
+          this.formRules.effectiveYear = []
+        }
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    initList() {
+    },
+    handleOpen(params = {}) {
+      this.modalOptions.title = '申请处理'
+      // this.formData = Object.assign(this.$options.data().formData, params)
+      this.formData.shopId = params.shopId
+      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 { dateType, effectiveDate, ...otps } = this.formData
+            const params = {
+              ...otps,
+              effectiveDate: dateType === 1 ? 'null' : dateType === 2 ? effectiveDate : ''
+            }
+            await settlementHandle(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/business/settlement/components/DetailModal.vue

@@ -0,0 +1,227 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+    append-to-body
+  >
+    <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="商家ID" prop="shopId">
+        {{ formData.shopId || '--' }}
+      </el-form-item>
+      <el-form-item label="店铺名称" prop="shopName">
+        {{ formData.shopName || '--' }}
+      </el-form-item>
+      <el-form-item label="店铺类型" prop="authenType">
+        <span v-if="formData.authenType === 1">个人</span>
+        <span v-else-if="formData.authenType === 2">个体工商户</span>
+        <span v-else-if="formData.authenType === 3">企业</span>
+        <span v-else-if="formData.authenType === 4">其他组织</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="客服电话" prop="shopPhone">
+        {{ formData.shopPhone || '--' }}
+      </el-form-item>
+      <el-form-item label="店铺负责人" prop="chargePersonName">
+        {{ formData.chargePersonName || '--' }}
+      </el-form-item>
+      <el-form-item label="负责人电话" prop="chargePersonPhone">
+        {{ formData.chargePersonPhone || '--' }}
+      </el-form-item>
+      <el-form-item label="店铺地址" prop="shopAdress">
+        {{ formData.shopAdress || '--' }}
+      </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="name">
+        {{ formData.name || '--' }}
+      </el-form-item>
+      <el-form-item label="证件信息" prop="cardTypeName">
+        {{ formData.cardTypeName || '--' }}
+      </el-form-item>
+      <el-form-item label="身份证号码" prop="idCard">
+        {{ formData.idCard || '--' }}
+      </el-form-item>
+      <el-form-item label="身份证有效期" prop="cardTime">
+        {{ formData.cardTime || '--' }}
+      </el-form-item>
+      <el-form-item label="证件照片正面" prop="cardPositive">
+        <el-image
+          v-if="formData.cardPositive" :src="formData.cardPositive" style="width:80px;height:80px"
+          fit="cover" :preview-src-list="[ formData.cardPositive ]"
+        />
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="证件照片反面" prop="cardSide">
+        <el-image
+          v-if="formData.cardSide" :src="formData.cardSide" style="width:80px;height:80px"
+          fit="cover" :preview-src-list="[ formData.cardSide ]"
+        />
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="手持证件照" prop="cardHand">
+        <el-image
+          v-if="formData.cardHand" :src="formData.cardHand" style="width:80px;height:80px"
+          fit="cover" :preview-src-list="[ formData.cardHand ]"
+        />
+        <span v-else>--</span>
+      </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="subjectName">
+        {{ formData.subjectName || '--' }}
+      </el-form-item>
+      <el-form-item label="主体代码" prop="subjectCode">
+        <!-- 4组织机构代码，123社会信用代码 -->
+        {{ formData.subjectCode || '--' }}
+      </el-form-item>
+      <el-form-item label="注册地址" prop="subjectAdress">
+        {{ formData.subjectAdress || '--' }}
+      </el-form-item>
+      <el-form-item label="营业期限开始时间" prop="subjectStartTime">
+        {{ formData.subjectStartTime || '--' }}
+      </el-form-item>
+      <el-form-item label="营业期限结束时间" prop="subjectEndTime">
+        {{ formData.subjectEndTime || '--' }}
+      </el-form-item>
+      <el-form-item label="主体证件照" prop="subjectLicense">
+        <!-- 4机构证明材料，营业执照 -->
+        <div v-if="formData.subjectLicense && formData.subjectLicense.length">
+          <el-image
+            v-for="(item, index) in formData.subjectLicense" :key="index" :src="item"
+            style="width:80px;height:80px;margin-right: 10px;" fit="cover"
+            :preview-src-list="formData.subjectLicense"
+          />
+        </div>
+        <span v-else>--</span>
+      </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="effectiveDate">
+        {{ formData.effectiveDate || '--' }}
+      </el-form-item>
+      <el-form-item label="生效时限" prop="effectiveYear">
+        {{ formData.effectiveYear || '--' }}
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import { settlementGetById } from '@/api/business'
+
+export default {
+  name: 'DetailModal',
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '800px',
+        title: '申请详情'
+      },
+      visible: false,
+      formData: {
+        shopId: '',
+        shopName: '',
+        authenType: '',
+        shopPhone: '',
+        chargePersonName: '',
+        chargePersonPhone: '',
+        shopAdress: '',
+        name: '',
+        cardTypeName: '',
+        idCard: '',
+        cardTime: '',
+        cardPositive: '',
+        cardSide: '',
+        cardHand: '',
+        subjectName: '',
+        subjectCode: '',
+        subjectAdress: '',
+        subjectStartTime: '',
+        subjectEndTime: '',
+        subjectLicense: '',
+        effectiveDate: '',
+        effectiveYear: ''
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    handleOpen(params = {}) {
+      this.formData = Object.assign(this.$options.data().formData, params)
+      if (params.shopId) {
+        this.getInfo(params.shopId)
+      }
+      this.visible = true
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await settlementGetById({ shopId: id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+          shopId: res.data.shopId || '',
+          shopName: res.data.shopName || '',
+          authenType: res.data.authenType,
+          shopPhone: res.data.shopPhone || '',
+          chargePersonName: res.data.chargePersonName || '',
+          chargePersonPhone: res.data.chargePersonPhone || '',
+          shopAdress: res.data.shopAdress || '',
+          name: res.data.name || '',
+          cardTypeName: res.data.cardTypeName || '',
+          idCard: res.data.idCard || '',
+          cardTime: res.data.cardTime || '',
+          cardPositive: res.data.cardPositive || '',
+          cardSide: res.data.cardSide || '',
+          cardHand: res.data.cardHand || '',
+          subjectName: res.data.subjectName || '',
+          subjectCode: res.data.subjectCode || '',
+          subjectAdress: res.data.subjectAdress || '',
+          subjectStartTime: res.data.subjectStartTime || '',
+          subjectEndTime: res.data.subjectEndTime || '',
+          subjectLicense: res.data.subjectLicense || '',
+          effectiveDate: res.data.effectiveDate || '',
+          effectiveYear: res.data.effectiveYear || ''
+        })
+      } finally {
+        loading.close()
+      }
+    }
+  }
+}
+</script>
+

src/views/business/settlement/index.vue

@@ -1,199 +1,202 @@
 <template>
-  <div class="pdl">
-    <!-- 选项卡 -->
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="待处理" name="0" />
-      <el-tab-pane label="已通过" name="1" />
-      <el-tab-pane label="已拒绝" name="2" />
-    </el-tabs>
-    <!-- 搜索 -->
-    <div class="formSearch">
-      <el-form :inline="true" :model="formInline">
-        <el-form-item label="商家名称">
-          <el-input v-model="formInline.shopName" maxlength="20" placeholder="请输入商家名称" />
-        </el-form-item>
-        <el-form-item label="注册手机号">
-          <el-input v-model="formInline.shopPhone" maxlength="11" placeholder="请输入注册手机号" />
-        </el-form-item>
-        <el-form-item label="店铺类型">
-          <el-select v-model="formInline.authenType" clearable placeholder="请选择">
-            <el-option label="个人" value="1" />
-            <el-option label="个体工商户" value="2" />
-            <el-option label="企业" value="3" />
-            <el-option label="其他组织" value="4" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="申请时间">
-          <el-date-picker
-            v-model="formInline.dates" type="datetimerange" value-format="yyyy-MM-dd" range-separator="至"
-            start-placeholder="开始日期" end-placeholder="结束日期"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" plain @click="search">查询</el-button>
-        </el-form-item>
-      </el-form>
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-select
+        v-model="listQuery.checkState" clearable size="mini" class="filter-item"
+        style="width: 200px;" placeholder="请选择审核状态"
+      >
+        <el-option label="待处理" :value="0" />
+        <el-option label="已通过" :value="1" />
+        <el-option label="已拒绝" :value="2" />
+      </el-select>
+      <el-input
+        v-model="listQuery.shopName" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入商家名称"
+      />
+      <el-input
+        v-model="listQuery.shopPhone" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请输入注册手机号"
+      />
+      <el-select
+        v-model="listQuery.authenType" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请选择店铺类型"
+      >
+        <el-option label="个人" :value="1" />
+        <el-option label="个体工商户" :value="2" />
+        <el-option label="企业" :value="3" />
+        <el-option label="其他组织" :value="4" />
+      </el-select>
+      <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"
+      />
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+      <br />
+      <el-button
+        size="mini" type="primary" icon="el-icon-plus"
+        @click="$refs.EditModal && $refs.EditModal.handleOpen({ shopId: '' })"
+      >
+        添加
+      </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%"
+        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 label="商家名称" width="220">
-          <template slot-scope="scope">{{ scope.row.shopName }}</template>
+        <el-table-column align="center" width="100" label="商家ID" prop="shopId" fixed="left" />
+        <el-table-column align="center" label="商家名称" prop="shopName">
+          <template slot-scope="{ row }">
+            <span>{{ row.shopName || '--' }}</span>
+          </template>
         </el-table-column>
-        <el-table-column label="店铺类型">
-          <template slot-scope="scope">
-            <span v-if="scope.row.authenType == 1">个人</span>
-            <span v-if="scope.row.authenType == 2">个体工商户</span>
-            <span v-if="scope.row.authenType == 3">企业</span>
-            <span v-if="scope.row.authenType == 4">其他组织</span>
+        <el-table-column align="center" label="店铺类型" prop="authenType">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.authenType === 1" effect="plain">个人</el-tag>
+            <el-tag v-else-if="row.authenType === 2" effect="plain">个体工商户</el-tag>
+            <el-tag v-else-if="row.authenType === 3" effect="plain">企业</el-tag>
+            <el-tag v-else-if="row.authenType === 4" effect="plain">其他组织</el-tag>
+            <span v-else>--</span>
           </template>
         </el-table-column>
-        <el-table-column prop="shopPhone" label="注册手机号" />
-        <el-table-column prop="createTime" label="申请时间" />
-        <el-table-column label="操作" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <div class="btnList">
-              <el-button v-if="activeName == 0" type="text" @click="handleDel(scope.row)">
-                处理
-              </el-button>
-              <el-button v-if="activeName == 1 || activeName == 2" type="text" @click="handleDel(scope.row)">
-                查看
-              </el-button>
-              <el-button v-if="activeName == 1 || activeName == 2" type="text" @click="delet(scope.row)">
-                删除
-              </el-button>
-            </div>
+        <el-table-column align="center" width="120" label="注册手机号" prop="shopPhone" show-overflow-tooltip />
+        <el-table-column align="center" width="150" label="创建时间" prop="createTime" />
+        <el-table-column align="center" label="操作" width="220" 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
+              v-if="listQuery.checkState === 0" size="mini"
+              @click="$refs.ApplicationProcessing && $refs.ApplicationProcessing.handleOpen(row)"
+            >
+              处理
+            </el-button>
+            <el-button
+              v-if="(listQuery.checkState === 1) || (listQuery.checkState === 2)" type="danger"
+              size="mini" @click="handleDelete(row)"
+            >
+              删除
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
-      <div class="fenye">
-        <el-pagination
-          :current-page="formInline.page" :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="addVisible" top="5vh" width="70%"
-      center :show-close="false"
-      :close-on-click-modal="false"
-    >
-      <AddSettlement v-loading="loading" :business-data="form" @cancel="cleanForm" @search="search" />
-    </el-dialog>
+    <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>
+
+    <!-- 提现处理 -->
+    <ApplicationProcessing ref="ApplicationProcessing" @success="getList" />
+    <!-- 查看详情 -->
+    <DetailModal ref="DetailModal" />
   </div>
 </template>
 
 <script>
-import AddSettlement from '@/views/business/settlement/addSettlement'
 
-import {
-  settlementGetAll,
-  settlementDelete
-} from '@/api/business'
-import {
-  settlementGetById
-} from '@/api/business'
+import ApplicationProcessing from './components/ApplicationProcessing'
+import DetailModal from './components/DetailModal'
+import { settlementGetAll, settlementDelete } from '@/api/business'
 
 export default {
+  name: 'Settlement',
   components: {
-    AddSettlement
+    ApplicationProcessing,
+    DetailModal
   },
   data() {
-    // 这里存放数据
     return {
-      activeName: '0',
-      formInline: {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
         shopName: '', // 商家名称
         shopPhone: '', // 注册手机号
         authenType: '', // 店铺类型 1-个人 2-个体工商户 3-企业 4-其他组织
         dates: [], // 时间数组
-        checkState: '0', // 入驻处理状态 0-未处理 1-通过 2-拒绝
+        checkState: 0, // 入驻处理状态 0-未处理 1-通过 2-拒绝
         page: 1,
-        pageSize: 10,
+        pageSize: 20,
         shopType: 2
-      },
-      total: 10,
-      tableData: [],
-      addVisible: false,
-      loading: false,
-      form: {}
+      }
     }
   },
-  mounted() {
-    this.getAll(this.formInline)
+  created() {
+    this.getList()
   },
-  // 方法集合
   methods: {
-    handleSizeChange(val) {
-      this.formInline.pageSize = val
-      this.getAll(this.formInline)
-    },
-    handleCurrentChange(val) {
-      this.formInline.page = val
-      this.getAll(this.formInline)
-    },
-    handleClick(tab, event) {
-      this.formInline.checkState = tab.index
-      this.getAll(this.formInline)
-    },
-    // 查询
-    search() {
-      this.total = 1
-      this.formInline.page = 1
-      this.getAll(this.formInline)
-    },
-    // 处理
-    handleDel(row) {
-      this.addVisible = true
-      this.getFormData(row.shopId)
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await settlementGetAll(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
+      }
     },
-    getFormData(shopId) {
-      this.loading = true
-      // 查询店铺详情
-      settlementGetById({ shopId })
-        .then((res) => {
-          this.loading = false
-          this.form = res.data
-        })
-        .catch((err) => {
-          this.loading = false
-          console.log(err)
-        })
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
     },
-    cleanForm() {
-      this.addVisible = false
+    handleDetail(row) {
+      this.$refs.DetailModal && this.$refs.DetailModal.handleOpen(row)
     },
-    // 删除
-    async delet(row) {
-      const res = await settlementDelete({ checkId: row.checkId })
-      if (res.code === '') {
-        this.$message({
-          message: '删除成功',
-          type: 'success'
+    handleDelete(row) {
+      this.$confirm('确定删除此项？')
+        .then(async () => {
+          await settlementDelete({ checkId: row.checkId })
+          this.$message({ message: '删除成功！', type: 'success' })
+          this.handleSearch()
         })
-        this.getAll(this.formInline)
-      }
-    },
-    // 初始化查询所有数据
-    async getAll(formInline) {
-      const res = await settlementGetAll(formInline)
-      this.tableData = res.data.list
-      this.total = res.data.total
+        .catch(() => {})
     }
   }
 }
 </script>
 
-<style lang='scss' scoped>
-//@import url(); 引入公共css类
-@import url("../../../styles/elDialog.scss");
+<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;
+		}
+	}
+
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
+		}
+	}
 
-.pdl {
-	padding-left: 20px;
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
+	}
 }
 </style>

src/views/commissionAllocation/gradeCommission/components/DetailModal.vue

@@ -23,10 +23,8 @@
         {{ formData.activityName || '--' }}
       </el-form-item>
       <el-form-item label="活动类型" prop="activityType">
-        <span v-if="formData.activityType === 1">499</span>
-        <span v-else-if="formData.activityType === 2">商圈</span>
-        <span v-else-if="formData.activityType === 3">爆品</span>
-        <span v-else-if="formData.activityType === 4">消费金</span>
+        <span v-if="formData.activityType === 5">消费金</span>
+        <span v-else-if="formData.activityType === 6">组合活动</span>
         <span v-else>--</span>
       </el-form-item>
       <el-form-item label="团长规则" prop="leadersRule">
@@ -51,6 +49,22 @@
       <el-form-item label="间接合伙人规则" prop="partnerInMoney">
         {{ formData.partnerInMoney }}
       </el-form-item>
+      <el-form-item label="加盟商规则" prop="franchiseeRule">
+        <span v-if="formData.franchiseeRule === 1">比例</span>
+        <span v-else-if="formData.franchiseeRule === 2">金额</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="加盟商佣金规则" prop="franchiseeMoney">
+        {{ formData.franchiseeMoney }}
+      </el-form-item>
+      <el-form-item label="社区店规则" prop="communityRule">
+        <span v-if="formData.communityRule === 1">比例</span>
+        <span v-else-if="formData.communityRule === 2">金额</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="社区店佣金规则" prop="communityMoney">
+        {{ formData.communityMoney }}
+      </el-form-item>
       <el-form-item label="分佣来源" prop="sourceType">
         <span v-if="formData.sourceType === 1">订单金额</span>
         <span v-else-if="formData.sourceType === 2">赠送代金券</span>
@@ -91,6 +105,10 @@ export default {
         partnerRule: '',
         partnerMoney: '',
         partnerInMoney: '',
+        franchiseeRule: '',
+        franchiseeMoney: '',
+        communityRule: '',
+        communityMoney: '',
         sourceType: '',
         createTime: '',
         updateTime: ''
@@ -123,6 +141,10 @@ export default {
           partnerRule: res.data.partnerRule || '',
           partnerMoney: res.data.partnerMoney,
           partnerInMoney: res.data.partnerInMoney,
+          franchiseeRule: res.data.franchiseeRule || '',
+          franchiseeMoney: res.data.franchiseeMoney,
+          communityRule: res.data.communityRule || '',
+          communityMoney: res.data.communityMoney,
           sourceType: res.data.sourceType || '',
           createTime: res.data.createTime || '',
           updateTime: res.data.updateTime || ''

src/views/commissionAllocation/gradeCommission/components/EditModal.vue

@@ -14,10 +14,8 @@
       </el-form-item>
       <el-form-item label="活动类型" prop="activityType">
         <el-select v-model="formData.activityType" size="mini" placeholder="请选择活动类型">
-          <el-option label="499" :value="1" />
-          <el-option label="商圈" :value="2" />
-          <el-option label="爆品" :value="3" />
-          <el-option label="消费金" :value="4" />
+          <el-option label="消费金" :value="5" />
+          <el-option label="组合活动" :value="6" />
         </el-select>
       </el-form-item>
       <el-form-item label="团长规则" prop="leadersRule">
@@ -26,16 +24,16 @@
           <el-option label="金额" :value="2" />
         </el-select>
       </el-form-item>
-      <el-form-item label="直接团长规则" prop="leadersMoney">
-        <el-input v-model="formData.leadersMoney" placeholder="请输入直接团长规则" style="width: 150px;">
+      <el-form-item v-if="formData.leadersRule" label="直接团长规则" prop="leadersMoney">
+        <el-input v-model="formData.leadersMoney" placeholder="请输入直接团长规则" style="width: 250px;">
           <template #append>
             <div v-if="formData.leadersRule === 1">%</div>
             <div v-else-if="formData.leadersRule === 2">元</div>
           </template>
         </el-input>
       </el-form-item>
-      <el-form-item label="间接团长规则" prop="leadersInMoney">
-        <el-input v-model="formData.leadersInMoney" placeholder="请输入间接团长规则" style="width: 150px;">
+      <el-form-item v-if="formData.leadersRule" label="间接团长规则" prop="leadersInMoney">
+        <el-input v-model="formData.leadersInMoney" placeholder="请输入间接团长规则" style="width: 250px;">
           <template #append>
             <div v-if="formData.leadersRule === 1">%</div>
             <div v-else-if="formData.leadersRule === 2">元</div>
@@ -48,22 +46,50 @@
           <el-option label="金额" :value="2" />
         </el-select>
       </el-form-item>
-      <el-form-item label="直接合伙人规则" prop="partnerMoney">
-        <el-input v-model="formData.partnerMoney" placeholder="请输入直接合伙人规则" style="width: 150px;">
+      <el-form-item v-if="formData.partnerRule" label="直接合伙人规则" prop="partnerMoney">
+        <el-input v-model="formData.partnerMoney" placeholder="请输入直接合伙人规则" style="width: 250px;">
           <template #append>
             <div v-if="formData.partnerRule === 1">%</div>
             <div v-else-if="formData.partnerRule === 2">元</div>
           </template>
         </el-input>
       </el-form-item>
-      <el-form-item label="间接合伙人规则" prop="partnerInMoney">
-        <el-input v-model="formData.partnerInMoney" placeholder="请输入间接合伙人规则" style="width: 150px;">
+      <el-form-item v-if="formData.partnerRule" label="间接合伙人规则" prop="partnerInMoney">
+        <el-input v-model="formData.partnerInMoney" placeholder="请输入间接合伙人规则" style="width: 250px;">
           <template #append>
             <div v-if="formData.partnerRule === 1">%</div>
             <div v-else-if="formData.partnerRule === 2">元</div>
           </template>
         </el-input>
       </el-form-item>
+      <el-form-item label="加盟商规则" prop="franchiseeRule">
+        <el-select v-model="formData.franchiseeRule" size="mini" placeholder="请选择加盟商规则">
+          <el-option label="比例" :value="1" />
+          <el-option label="金额" :value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="formData.franchiseeRule" label="加盟商佣金规则" prop="franchiseeMoney">
+        <el-input v-model="formData.franchiseeMoney" placeholder="请输入加盟商佣金规则" style="width: 250px;">
+          <template #append>
+            <div v-if="formData.franchiseeRule === 1">%</div>
+            <div v-else-if="formData.franchiseeRule === 2">元</div>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="社区店规则" prop="communityRule">
+        <el-select v-model="formData.communityRule" size="mini" placeholder="请选择社区店规则">
+          <el-option label="比例" :value="1" />
+          <el-option label="金额" :value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="formData.communityRule" label="社区店佣金规则" prop="communityMoney">
+        <el-input v-model="formData.communityMoney" placeholder="请输入社区店佣金规则" style="width: 250px;">
+          <template #append>
+            <div v-if="formData.communityRule === 1">%</div>
+            <div v-else-if="formData.communityRule === 2">元</div>
+          </template>
+        </el-input>
+      </el-form-item>
       <el-form-item label="分佣来源" prop="sourceType">
         <el-select v-model="formData.sourceType" size="mini" placeholder="请选择分佣来源">
           <el-option label="订单金额" :value="1" />
@@ -107,6 +133,10 @@ export default {
         partnerRule: '',
         partnerMoney: '',
         partnerInMoney: '',
+        franchiseeRule: '',
+        franchiseeMoney: '',
+        communityRule: '',
+        communityMoney: '',
         sourceType: ''
       },
       formRules: {
@@ -138,6 +168,14 @@ export default {
           { required: false, message: '请输入间接合伙人规则' },
           { pattern: /^0\.\d{0,2}$|^[1-9]\d*\.\d{0,2}$|^[1-9]\d*$/, message: '数值有误' }
         ],
+        franchiseeMoney: [
+          { required: false, message: '请输入间接合伙人规则' },
+          { pattern: /^0\.\d{0,2}$|^[1-9]\d*\.\d{0,2}$|^[1-9]\d*$/, message: '数值有误' }
+        ],
+        communityMoney: [
+          { required: false, message: '请输入间接合伙人规则' },
+          { pattern: /^0\.\d{0,2}$|^[1-9]\d*\.\d{0,2}$|^[1-9]\d*$/, message: '数值有误' }
+        ],
         sourceType: [
           { required: true, message: '请选择分佣来源' }
         ]
@@ -165,6 +203,10 @@ export default {
         partnerRule: params.partnerRule || '',
         partnerMoney: (params.partnerRule === 1) && (typeof params.partnerMoney === 'number') ? params.partnerMoney * 100 : params.partnerMoney,
         partnerInMoney: (params.partnerRule === 1) && (typeof params.partnerInMoney === 'number') ? params.partnerInMoney * 100 : params.partnerInMoney,
+        franchiseeRule: params.franchiseeRule || '',
+        franchiseeMoney: (params.franchiseeRule === 1) && (typeof params.franchiseeMoney === 'number') ? params.franchiseeMoney * 100 : params.franchiseeMoney,
+        communityRule: params.communityRule || '',
+        communityMoney: (params.communityRule === 1) && (typeof params.communityMoney === 'number') ? params.communityMoney * 100 : params.communityMoney,
         sourceType: params.sourceType || ''
       })
       this.visible = true
@@ -190,6 +232,10 @@ export default {
           partnerRule: res.data.partnerRule || '',
           partnerMoney: (res.data.partnerRule === 1) && (typeof res.data.partnerMoney === 'number') ? res.data.partnerMoney * 100 : res.data.partnerMoney,
           partnerInMoney: (res.data.partnerRule === 1) && (typeof res.data.partnerInMoney === 'number') ? res.data.partnerInMoney * 100 : res.data.partnerInMoney,
+          franchiseeRule: res.data.franchiseeRule || '',
+          franchiseeMoney: (res.data.franchiseeRule === 1) && (typeof res.data.franchiseeMoney === 'number') ? res.data.franchiseeMoney * 100 : res.data.franchiseeMoney,
+          communityRule: res.data.communityRule || '',
+          communityMoney: (res.data.communityRule === 1) && (typeof res.data.communityMoney === 'number') ? res.data.communityMoney * 100 : res.data.communityMoney,
           sourceType: res.data.sourceType || ''
         })
         this.$nextTick(() => {
@@ -204,13 +250,19 @@ export default {
         if (valid) {
           const loading = this.$loading({ text: '提交中，请稍候……' })
           try {
-            const { leadersRule, partnerRule, leadersMoney, leadersInMoney, partnerMoney, partnerInMoney, ...otps } = this.formData
+            const { leadersRule, partnerRule, leadersMoney, leadersInMoney, partnerMoney, partnerInMoney, franchiseeRule, communityRule, franchiseeMoney, communityMoney, ...otps } = this.formData
             const params = {
+              ...otps,
               leadersMoney: leadersRule === 1 ? leadersMoney / 100 : leadersMoney,
               leadersInMoney: leadersRule === 1 ? leadersInMoney / 100 : leadersInMoney,
               partnerMoney: partnerRule === 1 ? partnerMoney / 100 : partnerMoney,
               partnerInMoney: partnerRule === 1 ? partnerInMoney / 100 : partnerInMoney,
-              ...otps
+              franchiseeMoney: franchiseeRule === 1 ? franchiseeMoney / 100 : franchiseeMoney,
+              communityMoney: communityRule === 1 ? communityMoney / 100 : communityMoney,
+              leadersRule,
+              partnerRule,
+              franchiseeRule,
+              communityRule
             }
             this.formData.ruleId ? await priceControlUpdatePlan(params) : await savePlatformBeeRule(params)
             loading.close()

src/views/commissionAllocation/gradeCommission/index.vue

@@ -38,10 +38,8 @@
         <el-table-column align="center" width="100" label="关联活动" prop="activityName" fixed="left" show-overflow-tooltip />
         <el-table-column align="center" label="活动类型" prop="activityType">
           <template slot-scope="{ row }">
-            <el-tag v-if="row.activityType === 1" effect="plain">499</el-tag>
-            <el-tag v-else-if="row.activityType === 2" effect="plain">商圈</el-tag>
-            <el-tag v-else-if="row.activityType === 3" effect="plain">爆品</el-tag>
-            <el-tag v-else-if="row.activityType === 4" effect="plain">消费金</el-tag>
+            <el-tag v-if="row.activityType === 5" effect="plain">消费金</el-tag>
+            <el-tag v-else-if="row.activityType === 6" effect="plain">组合活动</el-tag>
             <span v-else>--</span>
           </template>
         </el-table-column>
@@ -63,6 +61,22 @@
         </el-table-column>
         <el-table-column align="center" width="120" label="直接合伙人规则" prop="partnerMoney" show-overflow-tooltip />
         <el-table-column align="center" width="120" label="间接合伙人规则" prop="partnerInMoney" show-overflow-tooltip />
+        <el-table-column align="center" label="加盟商规则" prop="franchiseeRule">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.franchiseeRule === 1" type="success">比例</el-tag>
+            <el-tag v-else-if="row.franchiseeRule === 2" type="warning">金额</el-tag>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" width="120" label="加盟商佣金规则" prop="franchiseeMoney" show-overflow-tooltip />
+        <el-table-column align="center" label="社区店规则" prop="communityRule">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.communityRule === 1" type="success">比例</el-tag>
+            <el-tag v-else-if="row.communityRule === 2" type="warning">金额</el-tag>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" width="120" label="社区店佣金规则" prop="communityMoney" show-overflow-tooltip />
         <el-table-column align="center" label="分佣来源" prop="sourceType">
           <template slot-scope="{ row }">
             <el-tag v-if="row.sourceType === 1">订单金额</el-tag>

src/views/dashboard/components/Counter.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="counter-wrapper">
+    <div class="count">
+      <CountUp ref="countUpRef" :endVal="info.count || 0" :options="countUpOptions" />
+      <div class="trend">
+        <img v-if="[TREND_CONFIG.UP, TREND_CONFIG.DOWN].includes(trend)" :src="require(`../../../assets/images/dashboard/t-${trend}.png`)" alt="" />
+        <span v-if="trend === TREND_CONFIG.STABILIZATION" style="color: #d8d8d8; font-weight: normal">--</span>
+      </div>
+    </div>
+    <div class="tip">{{ tip }}</div>
+  </div>
+</template>
+
+<script>
+import CountUp from 'vue-countup-v2'
+import { TREND } from '../config'
+import { formatBigNumber } from '../utils'
+
+export default {
+  props: {
+    count: { type: Number, default: 0 },
+    tip: { type: String, required: true },
+    trend: { type: String, default: '' } // up/down/stabilization
+  },
+
+  components: { CountUp },
+
+  data() {
+    return {
+      TREND_CONFIG: Object.freeze(TREND),
+
+      info: { count: 0, unit: '' },
+      countUpOptions: null,
+      showCountUp: false
+    }
+  },
+
+  watch: {
+    count: {
+      handler(newCount) {
+        if (newCount > 0) {
+          const res = formatBigNumber(newCount)
+          this.info.count = res.count * 1
+
+          this.countUpOptions = {
+            useEasing: true,
+            useGrouping: true,
+            separator: ',',
+            decimal: '.',
+            prefix: '',
+            suffix: res.unit || '',
+            decimalPlaces: newCount * 1 > 10000 ? 2 : 0
+          }
+        } else {
+          this.info.count = 0
+        }
+
+        // vue-countup-v2什么傻逼组件
+        this.$nextTick(() => {
+          if (this.$refs.countUpRef) {
+            this.$refs.countUpRef.instance.options.suffix = this.countUpOptions.suffix
+            this.$refs.countUpRef.instance.options.decimalPlaces = this.countUpOptions.decimalPlaces
+          }
+        })
+      },
+      immediate: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.counter-wrapper {
+  width: 100%;
+
+  .count {
+    line-height: 1.2;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    font-size: 32px;
+    font-weight: bold;
+
+    .trend {
+      margin-left: 16px;
+
+      img {
+        position: relative;
+        top: -2px;
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  .tip {
+    color: #a4a4a4;
+    font-size: 16px;
+  }
+}
+</style>

src/views/dashboard/components/DiagramsChart.vue

@@ -0,0 +1,161 @@
+<template>
+  <div ref="chartsWrapperRef" class="diagrams-chart-container" :style="{ width: containerWidth }"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    statisticalData: { type: Object, default: () => {} },
+    chartTitle: { type: String, default: '' }
+  },
+  data() {
+    return {
+      instance: null,
+      chartData: {},
+      containerWidth: 700
+    }
+  },
+  mounted() {
+    this.init()
+  },
+
+  watch: {
+    statisticalData: {
+      handler(newValue) {
+        this.chartData = newValue
+        this.updataCharData()
+      },
+      immediate: true,
+      deep: true
+    },
+
+    containerWidth: {
+      handler() {
+        if (this.instance) {
+          this.resize()
+        }
+      },
+
+      immediate: true
+    }
+  },
+
+  methods: {
+    init() {
+      this.instance = echarts.init(this.$refs.chartsWrapperRef)
+      this.instance.setOption({
+        title: { subtext: this.chartTitle },
+        grid: { left: '7%', right: '3%', top: '20%', bottom: '9%' },
+        tooltip: {
+          trigger: 'axis',
+          showDelay: 10,
+          padding: 0,
+          axisPointer: {
+            type: 'shadow',
+            shadowStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(225, 228, 255, 0)' },
+                { offset: 1, color: '#E1E4FF' }
+              ])
+            }
+          },
+          formatter(options) {
+            return `
+              <div style="
+              padding: 0;
+              border: 1px solid #f4f8ff;
+              padding: 8px 16px;
+              background:  linear-gradient(180deg, rgba(238, 245, 255, 0.6) 0%, rgba(219, 233, 253, 0.6) 100%);
+              border-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) 1;
+              border-radius: 4px;
+              color: #3d3d3d;
+              font-size: 16px;
+              font-weight: bold
+             ">${options[0].value}</div>
+            `
+          }
+        },
+        xAxis: {
+          offset: 5,
+          axisTick: { show: false },
+          axisLine: { show: false },
+          axisLabel: { color: '#A4A4A4', fontSize: 14 },
+          data: []
+        },
+        yAxis: {
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: { color: '#A4A4A4', fontSize: 14 },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              color: "#F3F4F8"
+            }
+          }
+        },
+        series: [
+          {
+            zlevel: 100,
+            name: '销量',
+            type: 'bar',
+            data: [],
+            barWidth: '24px',
+            itemStyle: {
+              borderRadius: 5,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#188df0' },
+                { offset: 1, color: '#495FFF' }
+              ])
+            }
+          }
+        ]
+      })
+    },
+
+    updataCharData(xData1, yData1) {
+      if (!this.instance || !this.instance.setOption || typeof this.chartData !== 'object') {
+        return
+      }
+      const xData = xData1 || Object.keys(this.chartData)
+      const yData = yData1 || Object.values(this.chartData)
+      this.instance.setOption({
+        xAxis: {
+          data: xData
+        },
+        series: [
+          {
+            zlevel: 100,
+            name: '销量',
+            type: 'bar',
+            data: yData,
+            barWidth: '24px',
+            itemStyle: {
+              borderRadius: 5,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#188df0' },
+                { offset: 1, color: '#495FFF' }
+              ])
+            }
+          }
+        ]
+      })
+    },
+
+    resize() {
+      this.containerWidth = this.$parent.$el.clientWidth
+      this.updataCharData()
+      this.instance.resize()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.diagrams-chart-container {
+  /* width: 700px; */
+  height: 265px;
+}
+</style>

src/views/dashboard/components/GoodsRanking.vue

@@ -0,0 +1,115 @@
+<template>
+  <div ref="chartsWrapperRef" class="diagrams-chart-container"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    rankingData: { type: Array, default: () => [] },
+    categoryAlias: { type: String, default: 'productName' },
+    valueAlias: { type: String, default: 'productTransactionTotal' },
+    animate: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      instance: null,
+      chartData: {},
+      animateTimer: null,
+      startIndex: 0
+    }
+  },
+  watch: {
+    rankingData: {
+      handler(newData) {
+        this.chartData = newData
+        this.updateChartData()
+      },
+
+      immediate: true,
+      deep: true
+    }
+  },
+  mounted() {
+    this.init()
+  },
+
+  methods: {
+    init() {
+      this.instance = echarts.init(this.$refs.chartsWrapperRef)
+      this.instance.setOption({
+        grid: { left: '12%', right: '3%', top: '2%', bottom: '9%' },
+        xAxis: { type: 'value', show: false },
+        yAxis: {
+          type: 'category',
+          axisLine: { show: false },
+          axisTick: { show: false }
+        }
+      })
+      this.updateChartData()
+    },
+
+    updateChartData() {
+      if (!this.instance || !this.instance.setOption) {
+        return
+      }
+      this.instance.setOption({
+        yAxis: {
+          data: this.chartData.map((item) => item[this.categoryAlias]).slice(this.startIndex, this.startIndex + 5).reverse(),
+          axisLabel: {
+            color: '#A4A4A4',
+            fontSize: 14,
+            formatter(value) {
+              const valueStr = value.length > 5 ? value.slice(0, 5) + '...' : value
+              return '{lineHeight|' + valueStr + '}'
+            },
+            rich: { lineHeight: { lineHeight: 18, color: '#A4A4A4', fontSize: 14 } }
+          }
+        },
+        series: [
+          {
+            zlevel: 100,
+            name: '销量',
+            type: 'bar',
+            data: this.chartData.map((item) => item[this.valueAlias]).slice(this.startIndex, this.startIndex + 5).reverse(),
+            barWidth: '16px',
+            itemStyle: { borderRadius: 5, color: '#00CE7F' },
+            label: { show: true, precision: 1, position: 'right', valueAnimation: true, fontFamily: 'monospace', color: '#3d3d3d' }
+          }
+        ]
+      })
+      this.animate && this.startAnimate()
+    },
+
+    startAnimate() {
+      if (this.animateTimer) {
+        this.stopAnimate()
+      }
+      this.animateTimer = setInterval(() => {
+        if (this.startIndex >= 15) {
+          this.startIndex = -1
+        }
+        this.startIndex += 1
+        this.updateChartData()
+      }, 1000)
+    },
+
+    stopAnimate() {
+      clearInterval(this.animateTimer)
+      this.animateTimer = null
+    },
+
+    resize() {
+      this.instance.resize()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.diagrams-chart-container {
+  width: 729px;
+  height: 265px;
+}
+</style>

src/views/dashboard/components/HomeCard.vue

@@ -1,165 +0,0 @@
-<template>
-  <div ref="cardComponent" class="homeCardComponent">
-    <div class="top">
-      <span class="fs22" :style="{ color: `${color}` }">{{ title }}</span>
-      <span class="today" :style="{ color: `${color}`, borderColor: `${todayColor}` }">今日</span>
-    </div>
-    <div class="nums" :style="{ color: `${color}` }">{{ cardData.nums }}</div>
-    <div class="footer">
-      <div class="item">
-        <div class="precent">
-          周环比
-          <span
-            class="precent" :class="{
-              redP: cardData.precent > 0,
-              greenP: cardData.precent < 0
-            }"
-          >
-            {{ cardData.precent || 0 }}%
-          </span>
-          <span v-if="cardData.precent > 0" class="triangle up"></span>
-          <span v-if="cardData.precent < 0" class="triangle down"></span>
-        </div>
-      </div>
-      <div class="item">
-        <span>昨日数据</span>
-        <span>{{ cardData.lastNums }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    cardData: {
-      type: Object,
-      default: () => ({
-        nums: '',
-        precent: 0,
-        lastNums: ''
-      })
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    nums: {
-      type: Number,
-      default: 0
-    },
-    precent: {
-      type: Number,
-      default: 0
-    },
-    lastNums: {
-      type: Number,
-      default: 0
-    },
-    color: {
-      type: String,
-      default: null
-    },
-    backgroundColor: {
-      type: String,
-      default: null
-    },
-    todayColor: {
-      type: String,
-      default: null
-    }
-  },
-  mounted() {
-    this.$refs.cardComponent.style.backgroundColor = this.backgroundColor
-  }
-}
-</script>
-
-<style lang="scss">
-.homeCardComponent {
-	padding: 15px;
-	display: inline-flex;
-	flex-direction: column;
-	min-width: 200px;
-	min-height: 200px;
-	border-radius: 16px;
-
-	.top {
-		font-size: 22px;
-		margin: 12px 0 12px 12px;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-
-		.today {
-			font-size: 14px;
-			padding: 8px 16px;
-			border: 1px solid;
-			border-radius: 4px;
-		}
-	}
-
-	.nums {
-		margin: 8px;
-		font-size: 48px;
-	}
-
-	.footer {
-		height: 115px;
-		font-size: 16px;
-		padding: 12px 0;
-		border-radius: 8px;
-		background-color: rgba($color: #FFF, $alpha: .8);
-		box-shadow: 0px 10px 20px 1px rgba(27, 85, 175, 0.05000000074505806);
-		display: flex;
-		flex-direction: column;
-		justify-content: space-around;
-
-		.item {
-			margin: 0 12px;
-			// line-height: 40px;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			color: #333;
-
-			// opacity: .5;
-			.precent {
-				$red: #D04A41;
-				$green: #427A0A;
-
-				span {
-					margin-left: 18px;
-					// opacity: 1;
-				}
-
-				.redP {
-					color: $red;
-				}
-
-				.greenP {
-					color: $green;
-				}
-
-				.triangle {
-					width: 0;
-					height: 0;
-					position: relative;
-					border: 8px solid;
-				}
-
-				.up {
-					position: relative;
-					top: -12px;
-					border-color: transparent transparent $red transparent;
-				}
-
-				.down {
-					position: relative;
-					top: 12px;
-					border-color: $green transparent transparent transparent;
-				}
-			}
-		}
-	}
-}</style>

src/views/dashboard/components/NetworkDistribution.vue

@@ -0,0 +1,100 @@
+<template>
+  <div style="width: 100%; height: 100%" class="com-chart" ref="chartsWrapperRef"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import chinaJson from '../data/map/china.json'
+import { getMapDataItem } from '../utils'
+
+export default {
+  props: {
+    sitesData: { type: Array, required: true }
+  },
+  watch: {
+    sitesData: {
+      handler(newValue) {
+        if (this.instance) {
+          this.instance.setOption({
+            series: [
+              {
+                type: 'map',
+                mapType: 'china', // 使用中国地图
+                data: newValue.map((item) => {
+                  return {
+                    name: item.provinces,
+                    value: JSON.stringify(item.nationalMapDataList)
+                  }
+                }),
+                label: { show: true, color: '#fff' },
+                itemStyle: {
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  normal: { areaColor: '#249eff', borderColor: '#fff' },
+                  emphasis: { areaColor: '#0f57ff', label: { color: '#fff' } }
+                }
+              }
+            ]
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      instance: null
+    }
+  },
+  methods: {
+    async initCharts() {
+      this.instance = echarts.init(this.$refs.chartsWrapperRef)
+      echarts.registerMap('china', chinaJson)
+      this.instance.setOption({
+        title: {
+          text: '| 全国网点分布图',
+          left: 20,
+          top: 20
+        },
+        tooltip: {
+          padding: 0,
+          trigger: 'item',
+          formatter: function (params) {
+            let currentData = params.data
+            if (currentData && typeof currentData.value === 'string') {
+              currentData = JSON.parse(currentData.value)
+            } else {
+              currentData = [{}, {}, {}, {}]
+            }
+            return `
+            <div style="padding: 8px 10px 10px; background: linear-gradient(180deg, rgba(238, 245, 255, 0.9) 0%, rgba(219, 233, 253, 0.9) 100%);
+              border-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) 1;  border: 1px solid #fff;  border-radius: 4px">
+              <h1 style="color: #3D3D3D; font-size: 14px; line-height: 1.5; font-weight: bold">${params.name}</h1>
+              <ul>
+                  ${getMapDataItem(currentData[0].dataType || '', currentData[0].dataNumber || 0)}
+                  ${getMapDataItem(currentData[1].dataType || '', currentData[1].dataNumber) || 0}
+                  ${getMapDataItem(currentData[2].dataType || '', currentData[2].dataNumber) || 0}
+                  ${getMapDataItem(currentData[3].dataType || '', currentData[3].dataNumber) || 0}
+                </ul>
+              </div>
+            `
+          }
+        },
+        geo: {
+          type: 'map',
+          mapType: 'china'
+        }
+      })
+    },
+
+    resize() {
+      this.instance.resize()
+    }
+  },
+  mounted() {
+    this.initCharts()
+  }
+}
+</script>

src/views/dashboard/components/RankingTable.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column prop="date" label="排名" width="60" align="center">
+      <template slot-scope="scope">
+        <div class="ranking" :style="getRankingStyle(scope.row.date)">
+          {{ scope.row.date }}
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="name" label="商家名称" width="154" align="left"></el-table-column>
+    <el-table-column prop="address" label="分账金额" align="right">
+      <template slot-scope="scope">
+        <span>{{ scope.row.address }} 元</span>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import { getRankingStyle } from '../utils'
+export default {
+  data() {
+    return {
+      tableData: [
+        { date: '1', name: '大石桥市鹰纪有限公司', address: '123' },
+        { date: '2', name: '大石桥市鹰纪有限公司', address: '1234' },
+        { date: '3', name: '大石桥市鹰纪有限公司', address: '1234' },
+        { date: '4', name: '大石桥市鹰纪有限公司', address: '12345' },
+        { date: '5', name: '大石桥市鹰纪有限公司', address: '12345' }
+      ]
+    }
+  },
+  methods: {
+    getRankingStyle
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ranking {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 14px;
+  color: #8f9aab;
+  background-color: #f7f8fa;
+  border-radius: 50%;
+  margin-top: 7px;
+  margin-left: 10px;
+}
+</style>

src/views/dashboard/components/SectionBlock.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="section-block-container">
+    <div class="title-wrapper">
+      {{ title }}
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: { type: String, default: "" },
+    selectList: { type: Array, default: () => [] },
+    showIcon: { type: Boolean, default: false },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.section-block-container {
+  .title-wrapper {
+    display: flex;
+    align-items: center;
+    position: relative;
+    font-size: 24px;
+    font-weight: bold;
+    color: #3d3d3d;
+    line-height: 1.5;
+    padding-left: 23px;
+    margin-bottom: 8px;
+
+    &::after {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      display: block;
+      content: "";
+      width: 9px;
+      height: 20px;
+      background: url("../../../assets/images/dashboard/scetion-title-icon.png")
+        no-repeat;
+      background-size: cover;
+    }
+  }
+}
+</style>

src/views/dashboard/components/SelectionPane.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="section-pane-container" :style="{ padding: padding }">
+    <slot name="title">
+      <div class="title" v-if="title">{{ title }}</div>
+    </slot>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: { type: String,default: '' },
+    padding: { type: String, default: "0 16px 24px" },
+    titleHeight: { type: String, default: "" },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.section-pane-container {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0px 2px 6px 0px rgba(73, 78, 97, 0.05);
+  box-sizing: border-box;
+  .title {
+    font-size: 20px;
+    color: #3d3d3d;
+    height: 62px;
+    margin-bottom: 12px;
+    line-height: 62px;
+    font-weight: 600;
+    border-bottom: 1px solid #e4e5e8;
+  }
+}
+</style>

src/views/dashboard/components/StatisticsPanel1.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="statistics-panel-1">
+    <img :style="{ 'box-shadow': iconShadow }" :src="icon" class="pane-icon" alt="" />
+    <Counter :count="amount" :tip="tip"></Counter>
+  </div>
+</template>
+
+<script>
+import Counter from './Counter.vue'
+export default {
+  components: { Counter },
+  props: {
+    icon: { type: String, required: true },
+    amount: { type: Number, default: 0 },
+    tip: { type: String, default: '' },
+    iconShadow: {
+      type: String,
+      default: '0px 7px 6px -6px rgba(1, 85, 221, 0.42), 0px 6px 10px 0px rgba(1, 85, 221, 0.24)'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.statistics-panel-1 {
+  padding-left: 30px;
+  padding-top: 44px;
+  width: 456px;
+  height: 152px;
+  background-color: #fff;
+  display: flex;
+  border-radius: 8px;
+  box-shadow: 0px 2px 6px 0px rgba(73, 78, 97, 0.05);
+
+  .pane-icon {
+    width: 64px;
+    height: 64px;
+    flex-shrink: 0;
+    border-radius: 8px;
+    margin-right: 24px;
+  }
+}
+</style>

src/views/dashboard/components/TotalShopChart.vue

@@ -0,0 +1,105 @@
+<template>
+  <div ref="chartsWrapperRef" class="diagrams-chart-container"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    siteData: { type: Object, default: () => {} }
+  },
+  data() {
+    return { instance: null }
+  },
+  mounted() {
+    this.init()
+  },
+
+  watch: {
+    siteData: {
+      handler(newData) {
+        const { communityShopQuantity = 0, businessDistrictShopQuantity = 0, mallShopQuantity = 0, allStoresTotal = 0 } = newData || {}
+        this.updateData(allStoresTotal, communityShopQuantity, businessDistrictShopQuantity, mallShopQuantity)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+
+  methods: {
+    init() {
+      this.instance = echarts.init(this.$refs.chartsWrapperRef)
+      this.instance.setOption({
+        tooltip: { trigger: 'item' },
+        legend: { top: 'center', right: '20%', orient: 'vertical' },
+        label: { show: true }
+      })
+    },
+
+    updateData(allStoresTotal, communityShopQuantity, businessDistrictShopQuantity, mallShopQuantity) {
+      if (!this.instance || !this.instance.setOption) {
+        return
+      }
+      this.instance.setOption({
+        series: [
+          {
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: true,
+            labelLine: { show: true },
+            center: ['30%', '50%'],
+            clockwise: false,
+            label: {
+              normal: {
+                position: 'outside',
+                formatter: '{b}\n{c} ({d}%)'
+              }
+            },
+            data: [
+              { value: communityShopQuantity, name: '社区店总量', label: { color: '#21CCFF' } },
+              { value: businessDistrictShopQuantity, name: '商圈商家总量', label: { color: '#249EFF' } },
+              { value: mallShopQuantity, name: '商城工厂总量', label: { color: '#495FFF' } }
+            ],
+            itemStyle: {
+              emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' },
+              normal: {
+                color: (params) => ['#21CCFF', '#249EFF', '#495FFF'][params.dataIndex],
+                label: { show: true }
+              }
+            }
+          }
+        ]
+        // graphic: [
+        //   {
+        //     type: 'text',
+        //     position: 'center',
+        //     style: {
+        //       text: `总数`,
+        //       textAlign: 'center',
+        //       fill: '#333',
+        //       fontSize: 14
+        //     }
+        //   }
+        // ]
+      })
+
+      // let model  = this.instance.getModel().getSeriesByIndex(0).getData()._itemLayouts;
+
+      //         console.log('model',model);
+    },
+
+    resize() {
+      this.instance.resize()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.diagrams-chart-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/dashboard/components/miniCard.vue

@@ -1,92 +0,0 @@
-<template>
-  <div class="miniCardComponents">
-    <span class="title">{{ title }}</span>
-    <h2>{{ nums }}</h2>
-    <span class="gray">{{ precent }}：</span>
-    <span
-      class="precent" :class="{
-        redP: precentData > 0,
-        greenP: precentData < 0
-      }"
-    >
-      {{ precentData || 0 }}%
-    </span>
-    <span v-if="precentData > 0" class="triangle up"></span>
-    <span v-if="precentData < 0" class="triangle down"></span>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    precent: {
-      type: String,
-      default: ''
-    },
-    nums: {
-      type: Number,
-      default: 0
-    },
-    precentData: {
-      type: Number,
-      default: 0
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.miniCardComponents {
-	$red: #D04A41;
-	$green: #427A0A;
-	margin-right: 50px;
-
-	h2 {
-		margin: 12px 0;
-		font-weight: bold;
-	}
-
-	.title {
-		font-size: 16px;
-		font-weight: 700;
-	}
-
-	.gray {
-		color: #929292;
-	}
-
-	.precent {
-		margin: 0 8px;
-	}
-
-	.redP {
-		color: $red;
-	}
-
-	.greenP {
-		color: $green;
-	}
-
-	.triangle {
-		width: 0;
-		height: 0;
-		position: relative;
-		border: 8px solid;
-	}
-
-	.up {
-		position: relative;
-		top: -12px;
-		border-color: transparent transparent $red transparent;
-	}
-
-	.down {
-		position: relative;
-		top: 12px;
-		border-color: $green transparent transparent transparent;
-	}
-}</style>

src/views/dashboard/config.js

@@ -0,0 +1,38 @@
+export const TREND = { UP: 'up', DOWN: 'down', STABILIZATION: 'stabilization' }
+
+// 统计区
+export const statisticalArea = [
+  {
+    name: '会员统计',
+    list: [
+      { name: '会员总数', trend: '', field: 'memberStatistics.memberTotal' },
+      { name: '普通会员统计', trend: '', field: 'memberStatistics.normalMemberTotal' },
+      { name: '团长数量', trend: '', field: 'memberStatistics.headquarterTotal' },
+      { name: '合伙人数量', trend: '', field: 'memberStatistics.partnerTotal' }
+    ]
+  },
+  {
+    name: '订单统计',
+    list: [
+      { name: '订单总量', trend: '', field: 'orderStatistics.orderTotal' },
+      { name: '今日单量', trend: '', field: 'orderStatistics.todayOrderTotal' },
+      { name: '今日完成订单', trend: '', field: 'orderStatistics.todayFinishOrderTotal' }
+    ]
+  },
+  {
+    name: '财务统计',
+    list: [
+      { decimalPlaces: 2, name: '总交易额', trend: '', field: 'financeStatistics.totalTransactionAmount' },
+      { decimalPlaces: 2, name: '代金券总支出', field: 'financeStatistics.totalCouponAmount' },
+      { decimalPlaces: 2, name: '今日交易额', trend: '', field: 'financeStatistics.todayTransactionAmount' },
+      { decimalPlaces: 2, name: '今日代金券支出', trend: '', field: 'financeStatistics.todayCouponAmount' }
+    ]
+  }
+]
+
+export const partnerTotalConfig = [
+  { name: '师傅数量', trend: '', field: 'masterWorkerQuantity' },
+  { name: '会员总量', trend: '', field: 'memberTotal' },
+  { name: '团长总量', trend: '', field: 'headquarterTotal' },
+  { name: '合伙人总量', trend: '', field: 'partnerTotal' }
+]

src/views/dashboard/data/map/province/aomen.json

@@ -0,0 +1 @@
+{"type":"FeatureCollection","features":[{"id":"820001","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@LADC^umZ@DONWE@DALBBF@H@DFBBTC"],["@@P@LC@AGM@OECMBABBTCD@DDH"]],"encodeOffsets":[[[116285,22746]],[[116303,22746]]]},"properties":{"cp":[113.552965,22.207882],"name":"花地玛堂区","childNum":2}},{"id":"820002","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@MK@CA@AAGDEB@NVFJG"],"encodeOffsets":[[116281,22734]]},"properties":{"cp":[113.549052,22.199175],"name":"花王堂区","childNum":1}},{"id":"820003","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@EGOB@DNLHE@C"],"encodeOffsets":[[116285,22729]]},"properties":{"cp":[113.550252,22.193791],"name":"望德堂区","childNum":1}},{"id":"820004","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@ŸYMVAN@BFCBBDAFHDBBFDHIJJEFDPCHHlYJQ"],"encodeOffsets":[[116313,22707]]},"properties":{"cp":[113.55374,22.188119],"name":"大堂区","childNum":1}},{"id":"820005","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@JICGAECACGEBAAEDBFNXB@"],"encodeOffsets":[[116266,22728]]},"properties":{"cp":[113.54167,22.187778],"name":"风顺堂区","childNum":1}},{"id":"820006","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@ ZNWRquZCBCC@AEA@@ADCDCAACEAGBQ@INEL"],"encodeOffsets":[[116265,22694]]},"properties":{"cp":[113.558783,22.154124],"name":"嘉模堂区","childNum":1}},{"id":"820007","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@MOIAIEI@@GE@AAUCBdCFIFR@HAFBBDDBDCBC@@FB@BDDDA\\M"],"encodeOffsets":[[116316,22676]]},"properties":{"cp":[113.56925,22.136546],"name":"路凼填海区","childNum":1}},{"id":"820008","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@DKMMa_GC_COD@dVDBBF@@HJ@JFJBNPZK"],"encodeOffsets":[[116329,22670]]},"properties":{"cp":[113.559954,22.124049],"name":"圣方济各堂区","childNum":1}}],"UTF8Encoding":true}

src/views/dashboard/index.vue

@@ -1,282 +1,420 @@
 <template>
-  <div class="dashboardPage">
-    <div class="top">
-      <CardBox
-        v-for="item in cardList" :key="item.value" :card-data="item" :title="item.title"
-        :color="item.color"
-        :background-color="item.background" :today-color="item.todayColor" class="cardbox"
-      />
+  <div class="dashboardPage" ref="dashboardPageRef">
+    <!-- 建行交易统计 -->
+    <!-- <SectionBlock title="建行交易统计">
+      <div class="content-1">
+        <div class="statistics-wrapper">
+          <StatisticsPanel1 :icon="require('../../assets/images/dashboard/total-amount-received.png')" tip="团蜂收款总额（元）" :amount="0"></StatisticsPanel1>
+          <StatisticsPanel1
+            iconShadow="0px 7px 6px -6px rgba(1, 184, 221, 0.42),0px 6px 10px 0px rgba(1, 184, 221, 0.24)"
+            tip="商家交易总额（元）"
+            :icon="require('../../assets/images/dashboard/ttaom.png')"
+            :amount="0"
+          ></StatisticsPanel1>
+        </div>
+
+        <SelectionPane style="height: 328px" title="交易商家明细" padding="0 32px">
+          <div style="display: flex; justify-content: space-between">
+            <RankingTable style="margin-right: 24px"></RankingTable>
+            <RankingTable></RankingTable>
+          </div>
+        </SelectionPane>
+      </div>
+    </SectionBlock> -->
+
+    <!-- 统计区 -->
+    <SectionBlock title="统计区" style="margin-top: 32px">
+      <div class="s-container" style="display: flex">
+        <SelectionPane
+          style="min-height: 278px"
+          :title="item.name"
+          padding="0 24px"
+          v-for="(item, index1) in statisticalArea"
+          :key="item.name"
+          :style="{
+            'margin-left': index1 === 1 ? '20px' : '',
+            'margin-right': index1 === 1 ? '20px' : ''
+          }"
+        >
+          <div class="statistical-wrapper">
+            <Counter
+              style="width: 50%"
+              :style="{
+                'margin-bottom': index <= 2 ? '24px' : 0,
+                'margin-top': index <= 2 ? '14px' : 0
+              }"
+              v-for="(item2, index) in item.list"
+              :key="item2.name"
+              :count="getData(item2.field)"
+              :tip="item2.name"
+              :trend="item2.trend"
+              :decimalPlaces="item2.decimalPlaces || 0"
+            ></Counter>
+          </div>
+        </SelectionPane>
+      </div>
+    </SectionBlock>
+
+    <!-- 分析图 & 商品排名 -->
+    <div style="margin-top: 32px; display: flex">
+      <SectionBlock title="分析图" style="flex: 3; margin-right: 24px; flex-shrink: 0">
+        <SelectionPane style="height: 360px" padding="0 24px">
+          <el-tabs v-model="activeName" @tab-click="handleChangeTabPane">
+            <el-tab-pane label="交易额" name="transactionAmountRef">
+              <DiagramsChart chartTitle="交易总额(元)" ref="transactionAmountRef" :statisticalData="diagramsLeftData.transactionAmount"></DiagramsChart>
+            </el-tab-pane>
+            <el-tab-pane label="订单量" name="orderQuantityRef">
+              <DiagramsChart chartTitle="订单量(单)" ref="orderQuantityRef" :statisticalData="diagramsLeftData.orderQuantity"></DiagramsChart>
+            </el-tab-pane>
+            <el-tab-pane label="会员量" name="memberQuantityRef">
+              <DiagramsChart chartTitle="会员量(个)" ref="memberQuantityRef" :statisticalData="diagramsLeftData.memberQuantity"></DiagramsChart>
+            </el-tab-pane>
+          </el-tabs>
+        </SelectionPane>
+      </SectionBlock>
+
+      <SectionBlock title="商品排名" style="flex: 2; flex-shrink: 0">
+        <SelectionPane style="height: 360px" padding="0 24px">
+          <el-tabs v-model="activeName2" @tab-click="handleChangeTabPane1">
+            <el-tab-pane label="社区" name="community">
+              <div class="btns-container">
+                <button @click="rankingData.community.activeName = 'transactionVolume'" :class="{ active: rankingData.community.activeName === 'transactionVolume' }">商品交易量</button>
+                <button @click="rankingData.community.activeName = 'aTurnover'" :class="{ active: rankingData.community.activeName === 'aTurnover' }">交易金额</button>
+              </div>
+              <GoodsRanking
+                ref="community"
+                :animate="activeName2 === 'community'"
+                :rankingData="communityRankData"
+                :valueAlias="rankingData.community.activeName === 'transactionVolume' ? 'productTransactionTotal' : 'productTransactionAmount'"
+              ></GoodsRanking>
+            </el-tab-pane>
+            <el-tab-pane label="商圈" name="businessDistrict">
+              <div class="btns-container">
+                <button @click="rankingData.businessDistrict.activeName = 'transactionVolume'" :class="{ active: rankingData.businessDistrict.activeName === 'transactionVolume' }">商品交易量</button>
+                <button @click="rankingData.businessDistrict.activeName = 'aTurnover'" :class="{ active: rankingData.businessDistrict.activeName === 'aTurnover' }">交易金额</button>
+              </div>
+              <GoodsRanking
+                ref="businessDistrict"
+                :animate="activeName2 === 'businessDistrict'"
+                :rankingData="businessDistrictRankData"
+                :valueAlias="rankingData.businessDistrict.activeName === 'transactionVolume' ? 'productTransactionTotal' : 'productTransactionAmount'"
+              ></GoodsRanking>
+            </el-tab-pane>
+            <el-tab-pane label="商城" name="shop">
+              <div class="btns-container">
+                <button @click="rankingData.shop.activeName = 'transactionVolume'" :class="{ active: rankingData.shop.activeName === 'transactionVolume' }">商品交易量</button>
+                <button @click="rankingData.shop.activeName = 'aTurnover'" :class="{ active: rankingData.shop.activeName === 'aTurnover' }">交易金额</button>
+              </div>
+              <GoodsRanking
+                ref="shop"
+                :animate="activeName2 === 'shop'"
+                :rankingData="shopRankData"
+                :valueAlias="rankingData.shop.activeName === 'transactionVolume' ? 'productTransactionTotal' : 'productTransactionAmount'"
+              ></GoodsRanking>
+            </el-tab-pane>
+          </el-tabs>
+        </SelectionPane>
+      </SectionBlock>
     </div>
-    <div class="chartContainer">
-      <h2>当日订单金额</h2>
-      <div ref="chartMoney" class="chartMoney"></div>
-      <h2>数据统计</h2>
-      <div class="chartCard">
-        <div class="dailyCard">
-          <div class="cardContainer">
-            <MiniCard :title="'当日订单数'" :precent="'日同比'" :nums="orderData.dayNum" :precent-data="orderData.dayPrecent" />
-            <MiniCard
-              :title="'当月订单数'" :precent="'月同比'" :nums="orderData.mounthNum"
-              :precent-data="orderData.mounthPrecent"
-            />
+
+    <!-- 网点统计 -->
+    <!-- 统计区 -->
+    <SectionBlock title="网点统计" style="margin-top: 32px">
+      <div class="total-site">
+        <div class="left-wrapper">
+          <div class="total-partner">
+            <el-select v-model="selects.sites">
+              <el-option label="全国" :value="1"></el-option>
+            </el-select>
+            <div class="wrapper">
+              <Counter style="flex: 1" :count="branchStatisticsData[item.field] || 0" :tip="item.name" :trend="item.trend" v-for="item in partnerTotalConfig" :key="item.name"></Counter>
+            </div>
           </div>
-          <div ref="orderTotal" class="chart"></div>
-        </div>
-        <div class="dailyCard">
-          <div class="cardContainer">
-            <MiniCard :title="'当日支付人数'" :precent="'日同比'" :nums="payData.dayNum" :precent-data="payData.dayPrecent" />
-            <MiniCard
-              :title="'当月支付人数'" :precent="'月同比'" :nums="payData.mounthNum"
-              :precent-data="payData.mounthPrecent"
-            />
+          <div class="total-shop">
+            <TotalShopChartVue ref="totalShopChartVueRef" :siteData="allData.dotStatistics"></TotalShopChartVue>
           </div>
-          <div ref="orderPeople" class="chart"></div>
+        </div>
+        <div class="right-wrapper">
+          <NetworkDistribution :sites-data="allData.nationalMapList || []" ref="networkDistributionRef"></NetworkDistribution>
         </div>
       </div>
-    </div>
+    </SectionBlock>
   </div>
 </template>
 
 <script>
-import CardBox from '@/views/dashboard/components/HomeCard.vue'
-import MiniCard from '@/views/dashboard/components/miniCard.vue'
-import {
-  homeGetChartData,
-  homeGetFormData
-} from '@/api/home.js'
-function ChartObj(ref, title) {
-  this.name = ref
-  this.chart = null
-  this.title = title
-  this.xAxis = []
-  this.yAxis = []
-  this.series = []
-}
-function CardData() {
-  this.dayNum = 0
-  this.dayPrecent = 0
-  this.mounthNum = 0
-  this.mounthPrecent = 0
-}
+import * as _ from 'lodash'
+import { getHomeStatisticsData } from '@/api/home'
+import SectionBlock from './components/SectionBlock.vue'
+import StatisticsPanel1 from './components/StatisticsPanel1.vue'
+import RankingTable from './components/RankingTable.vue'
+import SelectionPane from './components/SelectionPane.vue'
+import { statisticalArea, partnerTotalConfig } from './config'
+import Counter from './components/Counter.vue'
+import DiagramsChart from './components/DiagramsChart.vue'
+import GoodsRanking from './components/GoodsRanking.vue'
+import TotalShopChartVue from './components/TotalShopChart.vue'
+import NetworkDistribution from './components/NetworkDistribution.vue'
+
 export default {
   components: {
-    CardBox,
-    MiniCard
+    SectionBlock,
+    StatisticsPanel1,
+    RankingTable,
+    SelectionPane,
+    Counter,
+    DiagramsChart,
+    GoodsRanking,
+    TotalShopChartVue,
+    NetworkDistribution
   },
   data() {
     return {
-      cardList: [
-        {
-          title: '新增用户',
-          color: '#1B55AF',
-          background: '#F4F7FB',
-          todayColor: '#C9D7EC',
-          nums: '',
-          precent: '',
-          lastNums: '',
-          value: 1
-        },
-        {
-          title: '新增店铺',
-          color: '#F45F20',
-          background: '#FEF7F4',
-          todayColor: '#FCD9CA',
-          nums: '',
-          precent: '',
-          lastNums: '',
-          value: 2
+      statisticalArea: Object.freeze(statisticalArea),
+      partnerTotalConfig: Object.freeze(partnerTotalConfig),
+      activeName: 'transactionAmountRef',
+      activeName2: 'community',
+      allData: {},
+      branchStatisticsData: {}, // 网点统计表格数据
+      diagramsLeftData: {}, // 分析图左侧柱状图数据
+      rankingData: {
+        community: {
+          activeName: 'transactionVolume',
+          transactionVolume: [], // 交易量
+          aTurnover: [] // 交易额
         },
-        {
-          title: '访客',
-          color: '#427A0A',
-          background: '#F2F6EE',
-          todayColor: '#CFDDC0',
-          nums: '',
-          precent: '',
-          lastNums: '',
-          value: 3
+        shop: {
+          activeName: 'transactionVolume',
+          transactionVolume: [], // 交易量
+          aTurnover: [] // 交易额
         },
-        {
-          title: '浏览量',
-          color: '#623CE7',
-          background: '#F4F1FD',
-          todayColor: '#D7CDF9',
-          nums: '',
-          precent: '',
-          lastNums: '',
-          value: 4
+        businessDistrict: {
+          activeName: 'transactionVolume',
+          transactionVolume: [], // 交易量
+          aTurnover: [] // 交易额
         }
-      ],
-      chart: [
-        new ChartObj('chartMoney', '订单金额'),
-        new ChartObj('orderTotal', '订单数'),
-        new ChartObj('orderPeople', '订单支付人数')
-      ],
-      orderData: new CardData(),
-      payData: new CardData()
+      },
+      selects: { sites: 1 }
     }
   },
   created() {
-    this.getFormData()
-    this.getChartData()
+    this.getHomeStatisticsData()
   },
   mounted() {
-    this.chart.forEach((item) => {
-      this.initChart(item)
-    })
+    const observer = new ResizeObserver(
+      _.debounce(() => {
+        this.$refs[this.activeName].resize()
+        this.$refs.networkDistributionRef.resize()
+        this.$refs.totalShopChartVueRef.resize()
+      }, 200)
+    )
+    observer.observe(this.$refs.dashboardPageRef)
   },
   methods: {
-    async getFormData() {
-      const res = await homeGetFormData()
-      this.cardList[0] = Object.assign(this.cardList[0], {
-        nums: res.data.todayNewUser,
-        precent: res.data.weekRelativeRatioNewUser,
-        lastNums: res.data.yesterdayNewUser
-      })
-      this.cardList[1] = Object.assign(this.cardList[1], {
-        nums: res.data.todayShopCount,
-        precent: res.data.weekRelativeRatioShopCount,
-        lastNums: res.data.yesterdayShopCount
-      })
-      this.cardList[2] = Object.assign(this.cardList[2], {
-        nums: res.data.todayVisitUser,
-        precent: res.data.weekRelativeRatioVisitUser,
-        lastNums: res.data.yesterdayVisitUser
-      })
-      this.cardList[3] = Object.assign(this.cardList[3], {
-        nums: res.data.todayVisitCount,
-        precent: res.data.weekRelativeRatioVisitCount,
-        lastNums: res.data.yesterdayVisitCount
-      })
-    },
-    async getChartData() {
-      const res = await homeGetChartData()
-      // 过去一个月订单金额列表
-      res.data.orderAmountList.forEach((item) => {
-        if (!item.statsDate.split) { return }
-        const xAxis = `${item.statsDate.split('-')[1]}.${item.statsDate.split('-')[2]}`
-        this.chart[0].xAxis.push(xAxis)
-        this.chart[0].series.push(item.amount)
-      })
-      // 过去一个月订单量
-      res.data.orderCountList.forEach((item) => {
-        if (!item.statsDate.split) { return }
-        const xAxis = `${item.statsDate.split('-')[1]}.${item.statsDate.split('-')[2]}`
-        this.chart[1].xAxis.push(xAxis)
-        this.chart[1].series.push(item.totalCount)
-      })
-      // 过去一个月支付人数
-      res.data.payUserCountList.forEach((item) => {
-        if (!item.statsDate.split) { return }
-        const xAxis = `${item.statsDate.split('-')[1]}.${item.statsDate.split('-')[2]}`
-        this.chart[2].xAxis.push(xAxis)
-        this.chart[2].series.push(item.totalCount)
-      })
-      this.orderData = {
-        dayNum: res.data.todayOrderCount || 0,
-        dayPrecent: res.data.dayToDayOrderCountRelativeRate || 0,
-        mounthNum: res.data.curMonthOrderCount || 0,
-        mounthPrecent: res.data.monthToMonthOrderCountRelativeRate || 0
-      }
-      this.payData = {
-        dayNum: res.data.todayPayUserCount || 0,
-        dayPrecent: res.data.dayToDayPayUserCountRelativeRate || 0,
-        mounthNum: res.data.curMonthPayUserCount || 0,
-        mounthPrecent: res.data.monthToMonthPayUserCountRelativeRate || 0
+    async getHomeStatisticsData() {
+      const res = await getHomeStatisticsData()
+      if (res.code == 200) {
+        this.allData = res.data
+
+        const { dotStatistics = {}, analysisChartStatistics = {}, goodsSortStatistics = {} } = this.allData
+        this.updateBranchStatisticsData(
+          dotStatistics.masterWorkerQuantity,
+          this.getData('memberStatistics.memberTotal'),
+          this.getData('memberStatistics.headquarterTotal'),
+          this.getData('memberStatistics.partnerTotal')
+        )
+        this.updateDiagramsLeftData(analysisChartStatistics)
+        this.updateRankingData(goodsSortStatistics)
       }
-      this.paintLineChart(this.chart[0])
-      this.paintLineChart(this.chart[1])
-      this.paintLineChart(this.chart[2])
     },
-    initChart(chartObj) {
-      chartObj.chart = this.$echarts.init(this.$refs[chartObj.name])
-      chartObj.chart.setOption({
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b}: {c}',
-          axisPointer: {
-            type: 'cross'
-          }
+
+    getData(path) {
+      if (!path) return 0
+      const keys = path.split('.')
+      let result = this.allData
+      for (let key of keys) {
+        if (result == null || result == undefined) {
+          return 0
         }
-      })
+        result = result[key]
+      }
+      return result == null || result == undefined ? 0 : result
     },
-    paintLineChart(chartObj) {
-      chartObj.chart.setOption({
-        color: [ '#5470c6' ],
-        xAxis: {
-          type: 'category',
-          axis: 'auto',
-          data: chartObj.xAxis
-        },
-        yAxis: {
-          type: 'value',
-          axisPointer: {
-            snap: true
-          }
-        },
-        series: [
-          {
-            name: chartObj.title,
-            data: chartObj.series,
-            type: 'line',
-            smooth: true // 是否平滑
-          }
-        ]
-      })
+
+    handleChangeTabPane() {
+      this.$refs[this.activeName].resize()
+    },
+
+    handleChangeTabPane1() {
+      this.$refs[this.activeName2].startAnimate()
+    },
+
+    // 监听容器宽度变化
+    startWatchContainerSize() {},
+
+    /**
+     * 设置网点统计表格数据
+     * @param {number} masterWorkerQuantity 师傅数量
+     * @param {number} memberTotal 会员总数
+     * @param {number} headquarterTotal 团长数量
+     * @param {number} partnerTotal 合伙人数量
+     */
+    updateBranchStatisticsData(masterWorkerQuantity = 0, memberTotal = 0, headquarterTotal = 0, partnerTotal = 0) {
+      this.branchStatisticsData.masterWorkerQuantity = masterWorkerQuantity
+      this.branchStatisticsData.memberTotal = memberTotal
+      this.branchStatisticsData.headquarterTotal = headquarterTotal
+      this.branchStatisticsData.partnerTotal = partnerTotal
+    },
+
+    /**
+     * 更新分析图左侧数据，交易额/订单量/会员量
+     */
+    updateDiagramsLeftData(data) {
+      this.diagramsLeftData = data || {}
+    },
+
+    /**
+     * 更新商品排名数据集
+     */
+    updateRankingData(data) {
+      this.rankingData.community.aTurnover = data.communityProductStatisticsAmountList
+      this.rankingData.community.transactionVolume = data.communityProductStatisticsTotalList
+
+      this.rankingData.shop.aTurnover = data.mallProductStatisticsAmountList
+      this.rankingData.shop.transactionVolume = data.mallProductStatisticsTotalList
+
+      this.rankingData.businessDistrict.aTurnover = data.businessDistrictProductStatisticsAmountList
+      this.rankingData.businessDistrict.transactionVolume = data.businessDistrictProductStatisticsTotalList
+    }
+  },
+
+  computed: {
+    communityRankData() {
+      return this.rankingData.community.activeName === 'transactionVolume' ? this.rankingData.community.transactionVolume : this.rankingData.community.aTurnover
+    },
+    shopRankData() {
+      return this.rankingData.shop.activeName === 'transactionVolume' ? this.rankingData.shop.transactionVolume : this.rankingData.shop.aTurnover
+    },
+    businessDistrictRankData() {
+      return this.rankingData.businessDistrict.activeName === 'transactionVolume' ? this.rankingData.businessDistrict.transactionVolume : this.rankingData.businessDistrict.aTurnover
     }
+  },
+
+
+  destroyed(){
+    
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .dashboardPage {
-	width: 100%;
-
-	.top {
-		padding: 28px 10px;
-		background-color: #FFF;
-		display: flex;
-		justify-content: space-between;
-
-		.cardbox {
-			margin: 0 10px;
-			cursor: default;
-			flex: 1;
-		}
-	}
-
-	.chartContainer {
-		margin: 20px;
-		padding: 20px;
-		background-color: #FFF;
-
-		h2 {
-			margin: 12px 0;
-			font-weight: bold;
-		}
-
-		.chartMoney {
-			width: 100%;
-			height: 400px;
-		}
-
-		.chartCard {
-			min-height: 300px;
-			display: flex;
-
-			.dailyCard {
-				flex: 1;
-				padding: 12px 20px;
-
-				.cardContainer {
-					display: flex;
-				}
-
-				.chart {
-					min-height: 300px;
-				}
-			}
-		}
-	}
+  width: 100%;
+  min-height: calc(100vh - 50px);
+  background-color: #f7f8fa;
+  padding: 16px 24px;
+  box-sizing: border-box;
+  overflow: scroll;
+
+  .content-1 {
+    height: 328px;
+    display: flex;
+    align-items: center;
+
+    .statistics-wrapper {
+      height: 328px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      /* box-shadow: 0px 2px 6px 0px rgba(73, 78, 97, 0.05); */
+      border-radius: 8px;
+      margin-right: 24px;
+    }
+
+    .ranking-table-wrapper {
+      flex: 1;
+    }
+  }
+
+  .btns-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+
+    button {
+      padding: 6px 8px;
+      font-size: 14px;
+      border-radius: 4px;
+      background-color: #f7f8fa;
+      margin-right: 14px;
+      cursor: pointer;
+      transition: all 350ms;
+
+      &:active {
+        opacity: 0.8;
+      }
+
+      &.active {
+        color: #fff;
+        background-color: #495fff;
+      }
+    }
+  }
+
+  .total-site {
+    display: flex;
+    align-items: center;
+    height: 496px;
+
+    .left-wrapper {
+      flex: 1;
+      margin-right: 24px;
+      height: 496px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .total-partner {
+        height: 184px;
+        width: 100%;
+        background-color: #fff;
+        box-shadow: 0px 2px 6px 0px rgba(73, 78, 97, 0.05);
+        border-radius: 8px;
+        padding: 24px 32px 32px 24px;
+
+        .wrapper {
+          display: flex;
+          align-items: center;
+          margin-top: 24px;
+        }
+      }
+
+      .total-shop {
+        height: 288px;
+        width: 100%;
+        background-color: #fff;
+        box-shadow: 0px 2px 6px 0px rgba(73, 78, 97, 0.05);
+        border-radius: 8px;
+      }
+    }
+
+    .right-wrapper {
+      flex: 1;
+      height: 496px;
+      background-color: #fff;
+      box-shadow: 0px 2px 6px 0px rgba(73, 78, 97, 0.05);
+      border-radius: 8px;
+    }
+  }
+
+  .s-container {
+    width: 100%;
+
+    .statistical-wrapper {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+  }
 }
 </style>

src/views/dashboard/utils.js

@@ -0,0 +1,45 @@
+export const getRankingStyle = (number) => {
+  if (number <= 3) {
+    return {
+      1: 'background: linear-gradient(180deg, #D40E0E 0%, #FF4D4D 100%);color: #fff',
+      2: 'background: linear-gradient(180deg, #FFBA2F 0%, #FFD47F 100%);color: #fff',
+      3: 'background: linear-gradient(180deg, #495FFF 0%, #9DA9FF 100%);color: #fff'
+    }[number]
+  }
+}
+
+export const getMapDataItem = (title, value = 0) => {
+  return `
+            <li style="width: 114px; height: 24px; background: #fff; margin-top: 8px; padding: 2px 8px; background: rgba(255, 255, 255, 0.9); border-radius: 2px; display: flex; justify-content: space-between" >
+              <span style="color: #4E5969; font-size: 12px">${title}</span>
+              <span style="color: #4E5969; font-size: 14px; font-weight: bold">${value}</span>
+            </li>
+         `
+}
+
+/**
+ * 大数转换
+ * @param {number} 要转换的数字
+ */
+export const formatBigNumber = (number, decimalPlaces = 2) => {
+  if (typeof number !== 'number' && typeof number !== 'string') {
+    return console.warn(`Input must be a number or a string representation of a number. but get ${typeof number}`)
+  }
+  number = parseFloat(number)
+  if (Math.abs(number) < 10000) {
+    return { count: number.toFixed(decimalPlaces), unit: '' }
+  }
+  const units = ['', '万', '亿']
+  const unitIndex = Math.floor((parseInt(number).toString().length - 1) / 4)
+  const unit = units[Math.min(unitIndex, 2)]
+  let result
+  if (unitIndex > 0) {
+    result = (number / Math.pow(10, unitIndex * 4)).toFixed(decimalPlaces)
+  } else {
+    result = number.toFixed(decimalPlaces)
+  }
+  return {
+    count: result,
+    unit
+  }
+}

src/views/dashboard/utils/echarts.js

@@ -0,0 +1,3 @@
+export const initEcharts = (el) => {
+  
+}

src/views/finance/application/index.vue

@@ -16,9 +16,11 @@
               <el-option label="全部" :value="null" />
               <el-option label="待审核" value="0" />
               <el-option label="打款中" value="1" />
+              <el-option label="通过" value="1" />
               <el-option label="拒绝" value="2" />
               <el-option label="打款成功" value="3" />
               <el-option label="打款失败" value="4" />
+              <el-option label="待确认" value="5" />
             </el-select>
           </el-form-item>
           <el-form-item label-width="0">
@@ -41,10 +43,12 @@
             <el-table-column label="处理状态">
               <template slot-scope="scope">
                 <span v-if="scope.row.state == 0">审核中</span>
-                <span v-if="scope.row.state == 1">打款中</span>
+                <!-- <span v-if="scope.row.state == 1">打款中</span> -->
+                <span v-if="scope.row.state == 1">通过</span>
                 <span v-if="scope.row.state == 2">拒绝</span>
                 <span v-if="scope.row.state == 3">打款成功</span>
                 <span v-if="scope.row.state == 4">打款失败</span>
+                <span v-if="scope.row.state == 5">待确认</span>
               </template>
             </el-table-column>
             <el-table-column prop="applyTime" label="申请时间"></el-table-column>

src/views/finance/withdrawal/components/ClearingDetails.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+    append-to-body
+  >
+    <div>
+      <el-table
+        v-loading="!formData.Clrglist || !formData.Clrglist.length" height="60vh" element-loading-text="暂无清算明细数据"
+        :data="formData.Clrglist"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column align="center" min-width="80" prop="Sub_Ordr_Id" label="子订单编号" />
+        <el-table-column align="center" min-width="100" prop="Seq_No" label="顺序号" show-overflow-tooltip />
+        <el-table-column align="center" min-width="120" prop="Rcv_Prt_Mkt_Mrch_ID" label="收款商家编号" show-overflow-tooltip />
+        <el-table-column align="center" min-width="120" prop="Clrg_Dt" label="分账日期" show-overflow-tooltip />
+        <el-table-column align="center" min-width="120" label="分账状态" prop="Clrg_Stcd">
+          <template slot-scope="{ row }">
+            <span v-if="row.Clrg_Stcd === '0'">初始（未进行分账处理）</span>
+            <span v-else-if="row.Clrg_Stcd === '1'">未清算（生成分账信息中）</span>
+            <span v-else-if="row.Clrg_Stcd === '2'">已清算（已分账成功）</span>
+            <span v-else-if="row.Clrg_Stcd === '3'">无需清算（该笔订单已全额退，不需要分账）</span>
+            <span v-else-if="row.Clrg_Stcd === '4'">清算异常（分账出现异常）</span>
+            <span v-else-if="row.Clrg_Stcd === '6'">清算中（分账处理中）</span>
+            <span v-else-if="row.Clrg_Stcd === 'b'">待清算（未到分账日期）</span>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" min-width="100" prop="Clrg_Amt" label="收款方实际（应）分账金额" show-overflow-tooltip />
+        <el-table-column align="center" min-width="100" prop="Clrg_Txn_Srl_No" label="清算交易流水号" show-overflow-tooltip />
+      </el-table>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: 'ClearingDetails',
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '1100px',
+        title: '查看清算明细'
+      },
+      visible: false,
+      formData: {
+        Clrglist: []
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    initList() {
+    },
+    handleOpen(params = {}) {
+      this.formData = Object.assign(this.$options.data().formData, params)
+      this.initList()
+      if (params.id) {
+        // this.getInfo(params.id)
+      }
+      this.visible = true
+    },
+    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 || ''
+        })
+      } finally {
+        loading.close()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.small-padding {
+	.cell {
+		padding-left: 5px;
+		padding-right: 5px;
+	}
+}
+
+.fixed-width {
+	.el-button--mini {
+		padding: 7px 10px;
+	}
+}
+</style>
+

src/views/finance/withdrawal/components/DetailModal.vue

@@ -20,15 +20,46 @@
         <el-descriptions-item label="提现金额：">
           {{ formData.withdrawalMoney }}
         </el-descriptions-item>
+        <el-descriptions-item label="处理编号：">
+          {{ formData.handleSn }}
+        </el-descriptions-item>
         <el-descriptions-item label="申请时间：">
           {{ formData.applyTime }}
         </el-descriptions-item>
         <el-descriptions-item v-if="formData.handleTime" label="处理时间：">
           {{ formData.handleTime }}
         </el-descriptions-item>
+        <el-descriptions-item label="审核状态">
+          <div>
+            <span v-if="formData.state === 0">待处理</span>
+            <span v-else-if="formData.state === 1">已处理</span>
+            <span v-else-if="formData.state === 2">通过</span>
+            <span v-else-if="formData.state === 3">拒绝</span>
+            <span v-else-if="formData.state === 4">待确认</span>
+            <span v-else>--</span>
+          </div>
+        </el-descriptions-item>
         <el-descriptions-item label="备注：">
           {{ formData.cause || '--' }}
         </el-descriptions-item>
+        <el-descriptions-item label="惠市宝订单的分账状态：">
+          <div>
+            <span v-if="formData.summaryHsbSplitState === -1">无需分账</span>
+            <span v-else-if="formData.summaryHsbSplitState === 0">未分账</span>
+            <span v-else-if="formData.summaryHsbSplitState === 1">部分分账</span>
+            <span v-else-if="formData.summaryHsbSplitState === 2">已分账</span>
+            <span v-else>--</span>
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="惠市宝已分账金额：">
+          {{ formData.summaryHsbSplitedAmount }}
+        </el-descriptions-item>
+        <el-descriptions-item label="惠市宝剩余分账金额：">
+          {{ formData.summaryHsbSplitRemainAmount }}
+        </el-descriptions-item>
+        <el-descriptions-item label="非惠市宝订单的相关提现金额：">
+          {{ formData.summaryNotHsbAmount }}
+        </el-descriptions-item>
       </el-descriptions>
     </div>
 
@@ -123,6 +154,7 @@ export default {
         bankCard: '',
         collectionName: '',
         withdrawalMoney: '',
+        handleSn: '',
         applyTime: '',
         handleTime: '',
         state: '',
@@ -131,7 +163,11 @@ export default {
         relatedOrders: {}, // 相关订单
         relatedPresenterVoucherLogs: {}, // 代金券记录
         relatedCommissionLogs: {}, // 佣金记录
-        relatedBuyerUsers: [] // 用户列表
+        relatedBuyerUsers: [], // 用户列表
+        summaryHsbSplitState: '',
+        summaryHsbSplitedAmount: '',
+        summaryHsbSplitRemainAmount: '',
+        summaryNotHsbAmount: ''
       }
     }
   },
@@ -158,6 +194,7 @@ export default {
           bankCard: res.data.bankCard || '',
           collectionName: res.data.collectionName || '',
           withdrawalMoney: res.data.withdrawalMoney || 0,
+          handleSn: res.data.handleSn || '',
           applyTime: res.data.applyTime || '',
           handleTime: res.data.handleTime || '',
           state: res.data.state || 0,
@@ -166,7 +203,11 @@ export default {
           relatedOrders: res.data.relatedOrders || {},
           relatedPresenterVoucherLogs: res.data.relatedPresenterVoucherLogs || {},
           relatedCommissionLogs: res.data.relatedCommissionLogs || {},
-          relatedBuyerUsers: res.data.relatedBuyerUsers || []
+          relatedBuyerUsers: res.data.relatedBuyerUsers || [],
+          summaryHsbSplitState: res.data.summaryHsbSplitState,
+          summaryHsbSplitedAmount: res.data.summaryHsbSplitedAmount,
+          summaryHsbSplitRemainAmount: res.data.summaryHsbSplitRemainAmount,
+          summaryNotHsbAmount: res.data.summaryNotHsbAmount
         })
       } finally {
         loading.close()

src/views/finance/withdrawal/components/LedgerInformation.vue

@@ -6,8 +6,10 @@
   >
     <div>
       <div style="display: flex;justify-content: flex-end;padding: 0 0 10px;">
+        <!-- v-if="formData.relatedOrders[orderSn] && formData.relatedOrders[orderSn].some(i => i.cerePayLog.Sub_Acc_Stcd === '01')" -->
         <el-button
-          v-if="formData.relatedOrders[orderSn] && formData.relatedOrders[orderSn].some(i => i.cerePayLog.Sub_Acc_Stcd === '01')"
+          v-if="formData.relatedOrders[orderSn] &&
+            (formData.relatedOrders[orderSn].some(i => ['0', '3'].includes(i.cerePayLog.hsbSplitState)) || formData.relatedOrders[orderSn].some(i => i.cerePayLog.Sub_Acc_Stcd === '01'))"
           type="danger" size="medium"
           @click="handleConfirmSn()"
         >
@@ -21,8 +23,17 @@
           v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
         >
           <el-table-column align="center" min-width="80" prop="orderId" label="订单ID" />
+          <el-table-column align="center" min-width="120" label="分账处理状态" prop="cerePayLog.hsbSplitState">
+            <template slot-scope="{ row }">
+              <span v-if="row.cerePayLog.hsbSplitState === '0'">未分账</span>
+              <span v-else-if="row.cerePayLog.hsbSplitState === '1'">分账中</span>
+              <span v-else-if="row.cerePayLog.hsbSplitState === '2'">已分账</span>
+              <span v-else-if="row.cerePayLog.hsbSplitState === '3'">分账失败</span>
+              <span v-else>--</span>
+            </template>
+          </el-table-column>
           <el-table-column align="center" min-width="100" prop="cerePayLog.transactionId" label="三方交易流水号" show-overflow-tooltip />
-          <el-table-column align="center" min-width="120" label="分账处理状态" prop="cerePayLog.Sub_Acc_Stcd">
+          <el-table-column align="center" min-width="120" label="分账指令发送状态" prop="cerePayLog.Sub_Acc_Stcd">
             <template slot-scope="{ row }">
               <span v-if="row.cerePayLog.Sub_Acc_Stcd === '00'">成功</span>
               <span v-else-if="row.cerePayLog.Sub_Acc_Stcd === '01'">失败</span>
@@ -30,17 +41,34 @@
             </template>
           </el-table-column>
           <el-table-column align="center" min-width="100" prop="cerePayLog.Err_Inf" label="错误信息" show-overflow-tooltip />
+          <el-table-column label="操作" width="140" fixed="right" class-name="small-padding fixed-width">
+            <template slot-scope="{ row }">
+              <el-button
+                v-if="row.cerePayLog.Clrglist && row.cerePayLog.Clrglist.length"
+                type="warning" size="mini" @click="$refs.ClearingDetails && $refs.ClearingDetails.handleOpen(row.cerePayLog)"
+              >
+                清算明细列表
+              </el-button>
+            </template>
+          </el-table-column>
         </el-table>
       </div>
+
+      <!-- 清算明细 -->
+      <ClearingDetails ref="ClearingDetails" />
     </div>
   </el-dialog>
 </template>
 
 <script>
+import ClearingDetails from './ClearingDetails'
 import { getWithdrawalHsbOrderDistribution, updateWithdrawalTryConfirmSn } from '@/api/withdrawal'
 
 export default {
   name: 'LedgerInformation',
+  components: {
+    ClearingDetails
+  },
   data() {
     return {
       modalOptions: {
@@ -85,6 +113,7 @@ export default {
           hsbSplitState: '',
           hsbHandlingFee: ''
         }, item.cerePayLog || {}, {
+          Clrglist: [],
           Sign_Inf: '',
           Rsp_Inf: '',
           Svc_Rsp_Cd: '',
@@ -100,19 +129,22 @@ export default {
       const loading = this.$loading({ text: '加载中' })
       try {
         for (let index = 0; index < this.formData.relatedOrders[this.orderSn].length; index++) {
-          await getWithdrawalHsbOrderDistribution({
-            transactionId: this.formData.relatedOrders[this.orderSn][index].cerePayLog.transactionId
-          }).then((res) => {
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Sign_Inf = res.data.Sign_Inf
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Rsp_Inf = res.data.Rsp_Inf
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Svc_Rsp_Cd = res.data.Svc_Rsp_Cd
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Svc_Rsp_St = res.data.Svc_Rsp_St
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Py_Trn_No = res.data.Py_Trn_No
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Sub_Acc_Stcd = res.data.Sub_Acc_Stcd
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Ittparty_Tms = res.data.Ittparty_Tms
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Ittparty_Jrnl_No = res.data.Ittparty_Jrnl_No
-            this.formData.relatedOrders[this.orderSn][index].cerePayLog.Err_Inf = res.data.Err_Inf
-          })
+          if (['1', '2'].includes(this.formData.relatedOrders[this.orderSn][index].cerePayLog.hsbSplitState)) {
+            await getWithdrawalHsbOrderDistribution({
+              transactionId: this.formData.relatedOrders[this.orderSn][index].cerePayLog.transactionId
+            }).then((res) => {
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Clrglist = res.data.Clrglist || []
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Sign_Inf = res.data.Sign_Inf
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Rsp_Inf = res.data.Rsp_Inf
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Svc_Rsp_Cd = res.data.Svc_Rsp_Cd
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Svc_Rsp_St = res.data.Svc_Rsp_St
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Py_Trn_No = res.data.Py_Trn_No
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Sub_Acc_Stcd = res.data.Sub_Acc_Stcd
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Ittparty_Tms = res.data.Ittparty_Tms
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Ittparty_Jrnl_No = res.data.Ittparty_Jrnl_No
+              this.formData.relatedOrders[this.orderSn][index].cerePayLog.Err_Inf = res.data.Err_Inf
+            })
+          }
         }
         console.log(this.formData.relatedOrders[this.orderSn])
       } finally {
@@ -143,7 +175,7 @@ export default {
     handleConfirmSn() {
       this.$confirm('确定尝试三方订单确认？', '确认收货')
         .then(async () => {
-          await updateWithdrawalTryConfirmSn({ sn: this.orderSn })
+          await updateWithdrawalTryConfirmSn({ settlementSn: this.orderSn })
           this.$message({ message: '操作成功！', type: 'success' })
           this.$emit('success')
           this.visible = false
@@ -167,5 +199,18 @@ export default {
 		padding: 7px 10px;
 	}
 }
+
+.small-padding {
+	.cell {
+		padding-left: 5px;
+		padding-right: 5px;
+	}
+}
+
+.fixed-width {
+	.el-button--mini {
+		padding: 7px 10px;
+	}
+}
 </style>
 

src/views/finance/withdrawal/components/OrderCommission.vue

@@ -0,0 +1,136 @@
+<template>
+  <el-dialog :visible.sync="visible" v-bind="modalOptions" append-to-body>
+    <!-- 查询结果 -->
+    <div style="position: relative;padding: 0 0 10px;">
+      <el-table
+        v-loading="listLoading" max-height="600" element-loading-text="正在查询中。。。" :data="list"
+        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+      >
+        <el-table-column align="center" width="100" label="ID" prop="id" fixed="left" />
+        <el-table-column align="center" width="150" label="用户名称" prop="name" fixed="left" show-overflow-tooltip />
+        <el-table-column align="center" min-width="120" label="入账用户ID" prop="buyerUserId">
+          <template slot-scope="{ row }">
+            <div>
+              <span>{{ row.buyerUserId }}</span>
+              <el-button
+                v-if="row.buyerUserId"
+                style="margin-left: 14px;" type="warning" size="mini"
+                @click="$refs.DetailModal1 && $refs.DetailModal1.handleOpen(row)"
+              >
+                详情
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="来源类型" prop="sourceType">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.sourceType === 1" effect="plain">平台</el-tag>
+            <el-tag v-else-if="row.sourceType === 2" effect="plain">商圈</el-tag>
+            <el-tag v-else-if="row.sourceType === 3" effect="plain">用户</el-tag>
+            <el-tag v-else-if="row.sourceType === 4" effect="plain">社区</el-tag>
+            <el-tag v-else-if="row.sourceType === 5" effect="plain">商城</el-tag>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" width="120" label="来源ID" prop="sourceId" />
+        <el-table-column align="center" width="150" label="来源订单编号" prop="orderFormid" />
+        <el-table-column align="center" width="120" label="入账数量" prop="commissionNumber" />
+        <el-table-column align="center" label="来源类型" prop="waterType">
+          <template slot-scope="{ row }">
+            <el-tag v-if="row.waterType === 1" effect="plain">订单退款</el-tag>
+            <el-tag v-else-if="row.waterType === 2" effect="plain">升级活动</el-tag>
+            <el-tag v-else-if="row.waterType === 3" effect="plain">社区活动</el-tag>
+            <span v-else>--</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" width="150" label="有效时间" prop="effectiveTime" />
+        <el-table-column align="center" width="150" label="创建时间" prop="createTime" />
+      </el-table>
+      <div style="position: sticky;bottom: -5px;z-index: 1;padding: 10px;background-color: #eeeeee;">
+        <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>
+
+      <!-- 用户详情 -->
+      <DetailModal1 ref="DetailModal1" @success="getList" />
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button size="mini" @click="handleClose">关 闭</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import DetailModal1 from '../../../member/memberList/components/UserDetails'
+import { getWithdrawalCommissionList } from '@/api/withdrawal'
+
+export default {
+  name: 'OrderCommission',
+  components: {
+    DetailModal1
+  },
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '1000px',
+        title: '查看订单分佣列表'
+      },
+      visible: false,
+      formData: {
+        orderFormid: ''
+      },
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        pageSize: 20,
+        orderFormid: ''
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    handleOpen(params = {}) {
+      this.formData = Object.assign(this.$options.data().formData, params)
+      this.listQuery.orderFormid = params.orderFormid
+      if (params.orderFormid) {
+        // this.getInfo(params.orderFormid)
+        this.getList()
+      }
+      this.visible = true
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await xxx({ id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+          xxx: res.data.xxx || ''
+        })
+      } finally {
+        loading.close()
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await getWithdrawalCommissionList(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>

src/views/finance/withdrawal/components/RelatedOrders.vue

@@ -87,10 +87,16 @@
         <el-table-column align="center" min-width="150" prop="receivePhone" label="收货人手机号" show-overflow-tooltip />
         <el-table-column align="center" min-width="150" prop="address" label="详细地址" show-overflow-tooltip />
         <el-table-column align="center" min-width="120" prop="shopId" label="关联店铺ID" show-overflow-tooltip />
-        <el-table-column label="操作" width="200" fixed="right" class-name="small-padding fixed-width">
+        <el-table-column label="操作" width="260" fixed="right" class-name="small-padding fixed-width">
           <template slot-scope="{ row }">
             <el-button
               v-if="formData.relatedPresenterVoucherLogs[row.orderFormid]" type="success" size="mini"
+              @click="$refs.OrderCommission && $refs.OrderCommission.handleOpen(row)"
+            >
+              查看分佣
+            </el-button>
+            <el-button
+              v-if="formData.relatedPresenterVoucherLogs[row.orderFormid]" type="success" size="mini"
               @click="$refs.RelatedVoucherLogs && $refs.RelatedVoucherLogs.handleOpen(formData.relatedPresenterVoucherLogs[row.orderFormid], { userList: formData.relatedBuyerUsers })"
             >
               代金券记录
@@ -105,6 +111,8 @@
         </el-table-column>
       </el-table>
 
+      <!-- 订单分佣 -->
+      <OrderCommission ref="OrderCommission" />
       <!-- 代金券记录 -->
       <RelatedVoucherLogs ref="RelatedVoucherLogs" />
       <!-- 佣金记录 -->
@@ -121,6 +129,7 @@
 </template>
 
 <script>
+import OrderCommission from './OrderCommission'
 import RelatedVoucherLogs from './RelatedVoucherLogs'
 import RelatedCommissionLogs from './RelatedCommissionLogs'
 import UserDetails from './UserDetails'
@@ -128,6 +137,7 @@ import UserDetails from './UserDetails'
 export default {
   name: 'RelatedOrders',
   components: {
+    OrderCommission,
     RelatedVoucherLogs,
     RelatedCommissionLogs,
     UserDetails

src/views/finance/withdrawal/components/WithdrawalProcessing.vue

@@ -23,15 +23,49 @@
         <el-descriptions-item label="提现金额：">
           {{ formData.withdrawalMoney }}
         </el-descriptions-item>
+        <el-descriptions-item label="处理编号：">
+          {{ formData.handleSn }}
+        </el-descriptions-item>
         <el-descriptions-item label="申请时间：">
           {{ formData.applyTime }}
         </el-descriptions-item>
         <el-descriptions-item v-if="formData.handleTime" label="处理时间：">
           {{ formData.handleTime }}
         </el-descriptions-item>
+        <el-descriptions-item label="审核状态">
+          <div>
+            <span v-if="formData.state === 0">待处理</span>
+            <span v-else-if="formData.state === 1">已处理</span>
+            <span v-else-if="formData.state === 2">通过</span>
+            <span v-else-if="formData.state === 3">拒绝</span>
+            <span v-else-if="formData.state === 4">待确认</span>
+            <span v-else>--</span>
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="备注：">
+          {{ formData.cause || '--' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="惠市宝订单的分账状态：">
+          <div>
+            <span v-if="formData.summaryHsbSplitState === -1">无需分账</span>
+            <span v-else-if="formData.summaryHsbSplitState === 0">未分账</span>
+            <span v-else-if="formData.summaryHsbSplitState === 1">部分分账</span>
+            <span v-else-if="formData.summaryHsbSplitState === 2">已分账</span>
+            <span v-else>--</span>
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="惠市宝已分账金额：">
+          {{ formData.summaryHsbSplitedAmount }}
+        </el-descriptions-item>
+        <el-descriptions-item label="惠市宝剩余分账金额：">
+          {{ formData.summaryHsbSplitRemainAmount }}
+        </el-descriptions-item>
+        <el-descriptions-item label="非惠市宝订单的相关提现金额：">
+          {{ formData.summaryNotHsbAmount }}
+        </el-descriptions-item>
       </el-descriptions>
     </div>
-    <div style="color: red;font-size: 16px;text-align: center;">* 请确认您已转账成功，再点击确认</div>
+    <div style="color: red;font-size: 16px;text-align: center;">* 请确认您已转账成功，再点击确认。说明：分账金额代表已打款，T+1到账</div>
     <el-input v-show="formData.state == 3" v-model="formData.cause" type="textarea" autosize placeholder="请输入拒绝打款理由">
     </el-input>
     <div v-show="formData.state == 2" style="margin-top: 30px;">
@@ -73,11 +107,16 @@ export default {
         bankCard: '',
         collectionName: '',
         withdrawalMoney: '',
+        handleSn: '',
         applyTime: '',
         handleTime: '',
         state: '',
         type: '', // 支付方式选择
-        cause: '' // 拒绝理由
+        cause: '', // 拒绝理由
+        summaryHsbSplitState: '',
+        summaryHsbSplitedAmount: '',
+        summaryHsbSplitRemainAmount: '',
+        summaryNotHsbAmount: ''
       },
       formRules: {
       }
@@ -110,10 +149,16 @@ export default {
           bankCard: res.data.bankCard || '',
           collectionName: res.data.collectionName || '',
           withdrawalMoney: res.data.withdrawalMoney || 0,
+          handleSn: res.data.handleSn || '',
           applyTime: res.data.applyTime || '',
           handleTime: res.data.handleTime || '',
           state: res.data.state || 0,
-          type: res.data.type || ''
+          type: res.data.type || '',
+          cause: res.data.cause || '',
+          summaryHsbSplitState: res.data.summaryHsbSplitState,
+          summaryHsbSplitedAmount: res.data.summaryHsbSplitedAmount,
+          summaryHsbSplitRemainAmount: res.data.summaryHsbSplitRemainAmount,
+          summaryNotHsbAmount: res.data.summaryNotHsbAmount
         })
         this.$nextTick(() => {
           this.$refs.formData && this.$refs.formData.validate()

src/views/finance/withdrawal/index.vue

@@ -24,7 +24,7 @@
         <el-option label="已处理" value="1" />
         <el-option label="通过" value="2" />
         <el-option label="拒绝" value="3" />
-        <el-option label="打款失败" value="4" />
+        <el-option label="待确认" value="4" />
       </el-select>
       <el-button
         size="mini" class="filter-item" type="primary" icon="el-icon-search"
@@ -53,7 +53,7 @@
             <el-tag v-else-if="row.state === 1" effect="plain" type="success">已处理</el-tag>
             <el-tag v-else-if="row.state === 2" effect="plain">通过</el-tag>
             <el-tag v-else-if="row.state === 3" effect="plain" type="warning">拒绝</el-tag>
-            <el-tag v-else-if="row.state === 4" effect="plain" type="danger">打款失败</el-tag>
+            <el-tag v-else-if="row.state === 4" effect="plain" type="danger">待确认</el-tag>
             <span v-else>--</span>
           </template>
         </el-table-column>
@@ -66,6 +66,9 @@
             <el-button v-if="(row.state == 0) || (row.state == 2)" size="mini" @click="handleResolve(row)">
               处理
             </el-button>
+            <el-button v-if="row.state == 4" type="text" @click="handleConfirmTong(row)">
+              通联确认
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -91,7 +94,7 @@
 
 import WithdrawalProcessing from './components/WithdrawalProcessing'
 import DetailModal from './components/DetailModal'
-import { withdrawalGetAll } from '@/api/withdrawal'
+import { withdrawalGetAll, updateWithdrawalByAllinpay } from '@/api/withdrawal'
 export default {
   name: 'Withdrawal',
   components: {
@@ -140,6 +143,15 @@ export default {
     },
     handleResolve(row) {
       this.$refs.WithdrawalProcessing && this.$refs.WithdrawalProcessing.handleOpen(row)
+    },
+    handleConfirmTong(row) {
+      this.$confirm('确定此项通联确认？')
+        .then(async () => {
+          await updateWithdrawalByAllinpay({ handleSn: row.handleSn, withdrawalId: row.withdrawalId })
+          this.$message({ message: '操作成功！', type: 'success' })
+          this.handleSearch()
+        })
+        .catch(() => {})
     }
   }
 }

src/views/lotteryManagement/LotteryAwards/components/DetailModal.vue

@@ -0,0 +1,132 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    v-bind="modalOptions"
+    append-to-body
+  >
+    <el-form
+      ref="formData"
+      :model="formData"
+      size="mini"
+      label-position="left"
+      label-suffix=":"
+      label-width="200px"
+    >
+      <!-- 抽奖奖项信息 -->
+      <el-form-item label="ID" prop="id">
+        {{ formData.id || '--' }}
+      </el-form-item>
+      <el-form-item label="关联抽奖活动ID" prop="lotteryId">
+        <div style="display: flex;align-items: center;">
+          <span>{{ formData.lotteryId || '--' }}</span>
+          <el-button
+            v-if="formData.lotteryId"
+            style="margin-left: 14px;" type="warning" size="mini"
+            @click="$refs.DetailModal1 && $refs.DetailModal1.handleOpen({ id: formData.lotteryId })"
+          >
+            详情
+          </el-button>
+        </div>
+      </el-form-item>
+      <el-form-item label="奖项名称" prop="itemName">
+        {{ formData.itemName || '--' }}
+      </el-form-item>
+      <el-form-item label="奖项等级" prop="level">
+        {{ typeof formData.level === 'number' ? formData.level : '--' }}
+      </el-form-item>
+      <el-form-item label="奖项概率" prop="percent">
+        {{ typeof formData.percent === 'number' ? formData.percent : '--' }}
+      </el-form-item>
+      <el-form-item label="关联抽奖奖品ID" prop="prizeId">
+        <div style="display: flex;align-items: center;">
+          <span>{{ formData.prizeId || '--' }}</span>
+          <el-button
+            v-if="formData.prizeId"
+            style="margin-left: 14px;" type="warning" size="mini"
+            @click="$refs.DetailModal2 && $refs.DetailModal2.handleOpen({ id: formData.prizeId })"
+          >
+            详情
+          </el-button>
+        </div>
+      </el-form-item>
+      <el-form-item label="是否默认" prop="defaultItem">
+        <span v-if="formData.defaultItem === 0">不是</span>
+        <span v-else-if="formData.defaultItem === 1">是</span>
+        <span v-else>--</span>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        {{ formData.createTime || '--' }}
+      </el-form-item>
+    </el-form>
+
+    <!-- 活动详情 -->
+    <DetailModal1 ref="DetailModal1" />
+    <!-- 奖品详情 -->
+    <DetailModal2 ref="DetailModal2" />
+  </el-dialog>
+</template>
+
+<script>
+import { getByIdLotteryItem } from '@/api/lotteryManagement/LotteryAwards'
+import DetailModal1 from '../../lotteryActivities/components/DetailModal'
+import DetailModal2 from '../../LotteryPrizes/components/DetailModal'
+
+export default {
+  name: 'DetailModal',
+  components: {
+    DetailModal1,
+    DetailModal2
+  },
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '800px',
+        title: '查看抽奖奖项详情'
+      },
+      visible: false,
+      formData: {
+        id: '',
+        lotteryId: '',
+        itemName: '',
+        level: '',
+        percent: '',
+        prizeId: '',
+        defaultItem: '',
+        createTime: ''
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    handleOpen(params = {}) {
+      this.formData = Object.assign(this.$options.data().formData, params)
+      if (params.id) {
+        this.getInfo(params.id)
+      }
+      this.visible = true
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await getByIdLotteryItem({ id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+          id: res.data.id || '',
+          lotteryId: res.data.lotteryId || '',
+          itemName: res.data.itemName || '',
+          level: res.data.level,
+          percent: res.data.percent,
+          prizeId: res.data.prizeId || '',
+          defaultItem: res.data.defaultItem,
+          createTime: res.data.createTime || ''
+        })
+      } finally {
+        loading.close()
+      }
+    }
+  }
+}
+</script>
+