src/api/rm-bank/index.js

@@ -146,3 +146,56 @@ export function getClubIdentityListApi(params) {
     params
   })
 }
+
+// 设置联盟卡为俱乐部默认卡
+export function setOrCancelAllianceCardIsClubApi(data) {
+  return request({
+    url: '/alliance-card/setOrCancelAllianceCardIsClub',
+    method: 'POST',
+    data
+  })
+}
+// 商家分红列表
+export function getShopDividendSettingsAllApi(params) {
+  return request({
+    url: '/people-bank-shop-dividend-settings/getShopDividendSettingsAll',
+    method: 'GET',
+    params
+  })
+}
+
+// 创建分红
+export function postShopDividendSettingsApi(data) {
+  return request({
+    url: '/people-bank-shop-dividend-settings/postShopDividendSettings',
+    method: 'POST',
+    data
+  })
+}
+
+// 编辑商家分红
+export function patchShopDividendSettingsByIdApi(data) {
+  return request({
+    url: '/people-bank-shop-dividend-settings/patchShopDividendSettingsById',
+    method: 'POST',
+    data
+  })
+}
+
+// 删除商家分红
+export function deleteShopDividendSettingsByIdApi(params) {
+  return request({
+    url: '/people-bank-shop-dividend-settings/deleteShopDividendSettingsById',
+    method: 'DELETE',
+    params
+  })
+}
+
+// 获取商家分红详情
+export function getShopDividendSettingsByIdApi(params) {
+  return request({
+    url: '/people-bank-shop-dividend-settings/getShopDividendSettingsById',
+    method: 'GET',
+    params
+  })
+}

src/views/404.vue

@@ -1,257 +1,257 @@
-<template>
-  <div class="wscn-http404-container">
-    <div class="wscn-http404">
-      <div class="pic-404">
-        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
-        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
-        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
-        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
-      </div>
-      <div class="bullshit">
-        <div class="bullshit__oops">OOPS!</div>
-        <div class="bullshit__info">
-          All rights reserved
-          <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
-        </div>
-        <div class="bullshit__headline">{{ message }}</div>
-        <div class="bullshit__info">
-          Please check that the URL you entered is correct, or click the button below to return
-          to the homepage.
-        </div>
-        <a href="" class="bullshit__return-home">Back to home</a>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'Page404',
-  computed: {
-    message() {
-      return 'The webmaster said that you can not enter this page...'
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.wscn-http404-container {
-	transform: translate(-50%, -50%);
-	position: absolute;
-	top: 40%;
-	left: 50%;
-}
-
-.wscn-http404 {
-	position: relative;
-	width: 1200px;
-	padding: 0 50px;
-	overflow: hidden;
-
-	.pic-404 {
-		position: relative;
-		float: left;
-		width: 600px;
-		overflow: hidden;
-
-		&__parent {
-			width: 100%;
-		}
-
-		&__child {
-			position: absolute;
-
-			&.left {
-				width: 80px;
-				top: 17px;
-				left: 220px;
-				opacity: 0;
-				animation-name: cloudLeft;
-				animation-duration: 2s;
-				animation-timing-function: linear;
-				animation-fill-mode: forwards;
-				animation-delay: 1s;
-			}
-
-			&.mid {
-				width: 46px;
-				top: 10px;
-				left: 420px;
-				opacity: 0;
-				animation-name: cloudMid;
-				animation-duration: 2s;
-				animation-timing-function: linear;
-				animation-fill-mode: forwards;
-				animation-delay: 1.2s;
-			}
-
-			&.right {
-				width: 62px;
-				top: 100px;
-				left: 500px;
-				opacity: 0;
-				animation-name: cloudRight;
-				animation-duration: 2s;
-				animation-timing-function: linear;
-				animation-fill-mode: forwards;
-				animation-delay: 1s;
-			}
-
-			@keyframes cloudLeft {
-				0% {
-					top: 17px;
-					left: 220px;
-					opacity: 0;
-				}
-
-				20% {
-					top: 33px;
-					left: 188px;
-					opacity: 1;
-				}
-
-				80% {
-					top: 81px;
-					left: 92px;
-					opacity: 1;
-				}
-
-				100% {
-					top: 97px;
-					left: 60px;
-					opacity: 0;
-				}
-			}
-
-			@keyframes cloudMid {
-				0% {
-					top: 10px;
-					left: 420px;
-					opacity: 0;
-				}
-
-				20% {
-					top: 40px;
-					left: 360px;
-					opacity: 1;
-				}
-
-				70% {
-					top: 130px;
-					left: 180px;
-					opacity: 1;
-				}
-
-				100% {
-					top: 160px;
-					left: 120px;
-					opacity: 0;
-				}
-			}
-
-			@keyframes cloudRight {
-				0% {
-					top: 100px;
-					left: 500px;
-					opacity: 0;
-				}
-
-				20% {
-					top: 120px;
-					left: 460px;
-					opacity: 1;
-				}
-
-				80% {
-					top: 180px;
-					left: 340px;
-					opacity: 1;
-				}
-
-				100% {
-					top: 200px;
-					left: 300px;
-					opacity: 0;
-				}
-			}
-		}
-	}
-
-	.bullshit {
-		position: relative;
-		float: left;
-		width: 300px;
-		padding: 30px 0;
-		overflow: hidden;
-
-		&__oops {
-			font-size: 32px;
-			font-weight: bold;
-			line-height: 40px;
-			color: #1482f0;
-			opacity: 0;
-			margin-bottom: 20px;
-			animation-name: slideUp;
-			animation-duration: 0.5s;
-			animation-fill-mode: forwards;
-		}
-
-		&__headline {
-			font-size: 20px;
-			line-height: 24px;
-			color: #222;
-			font-weight: bold;
-			opacity: 0;
-			margin-bottom: 10px;
-			animation-name: slideUp;
-			animation-duration: 0.5s;
-			animation-delay: 0.1s;
-			animation-fill-mode: forwards;
-		}
-
-		&__info {
-			font-size: 13px;
-			line-height: 21px;
-			color: grey;
-			opacity: 0;
-			margin-bottom: 30px;
-			animation-name: slideUp;
-			animation-duration: 0.5s;
-			animation-delay: 0.2s;
-			animation-fill-mode: forwards;
-		}
-
-		&__return-home {
-			display: block;
-			float: left;
-			width: 110px;
-			height: 36px;
-			background: #1482f0;
-			border-radius: 100px;
-			text-align: center;
-			color: #ffffff;
-			opacity: 0;
-			font-size: 14px;
-			line-height: 36px;
-			cursor: pointer;
-			animation-name: slideUp;
-			animation-duration: 0.5s;
-			animation-delay: 0.3s;
-			animation-fill-mode: forwards;
-		}
-
-		@keyframes slideUp {
-			0% {
-				transform: translateY(60px);
-				opacity: 0;
-			}
-
-			100% {
-				transform: translateY(0);
-				opacity: 1;
-			}
-		}
-	}
-}</style>
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__info">
+          All rights reserved
+          <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
+        </div>
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="bullshit__info">
+          Please check that the URL you entered is correct, or click the button below to return
+          to the homepage.
+        </div>
+        <a href="" class="bullshit__return-home">Back to home</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Page404',
+  computed: {
+    message() {
+      return 'The webmaster said that you can not enter this page...'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404-container {
+	transform: translate(-50%, -50%);
+	position: absolute;
+	top: 40%;
+	left: 50%;
+}
+
+.wscn-http404 {
+	position: relative;
+	width: 1200px;
+	padding: 0 50px;
+	overflow: hidden;
+
+	.pic-404 {
+		position: relative;
+		float: left;
+		width: 600px;
+		overflow: hidden;
+
+		&__parent {
+			width: 100%;
+		}
+
+		&__child {
+			position: absolute;
+
+			&.left {
+				width: 80px;
+				top: 17px;
+				left: 220px;
+				opacity: 0;
+				animation-name: cloudLeft;
+				animation-duration: 2s;
+				animation-timing-function: linear;
+				animation-fill-mode: forwards;
+				animation-delay: 1s;
+			}
+
+			&.mid {
+				width: 46px;
+				top: 10px;
+				left: 420px;
+				opacity: 0;
+				animation-name: cloudMid;
+				animation-duration: 2s;
+				animation-timing-function: linear;
+				animation-fill-mode: forwards;
+				animation-delay: 1.2s;
+			}
+
+			&.right {
+				width: 62px;
+				top: 100px;
+				left: 500px;
+				opacity: 0;
+				animation-name: cloudRight;
+				animation-duration: 2s;
+				animation-timing-function: linear;
+				animation-fill-mode: forwards;
+				animation-delay: 1s;
+			}
+
+			@keyframes cloudLeft {
+				0% {
+					top: 17px;
+					left: 220px;
+					opacity: 0;
+				}
+
+				20% {
+					top: 33px;
+					left: 188px;
+					opacity: 1;
+				}
+
+				80% {
+					top: 81px;
+					left: 92px;
+					opacity: 1;
+				}
+
+				100% {
+					top: 97px;
+					left: 60px;
+					opacity: 0;
+				}
+			}
+
+			@keyframes cloudMid {
+				0% {
+					top: 10px;
+					left: 420px;
+					opacity: 0;
+				}
+
+				20% {
+					top: 40px;
+					left: 360px;
+					opacity: 1;
+				}
+
+				70% {
+					top: 130px;
+					left: 180px;
+					opacity: 1;
+				}
+
+				100% {
+					top: 160px;
+					left: 120px;
+					opacity: 0;
+				}
+			}
+
+			@keyframes cloudRight {
+				0% {
+					top: 100px;
+					left: 500px;
+					opacity: 0;
+				}
+
+				20% {
+					top: 120px;
+					left: 460px;
+					opacity: 1;
+				}
+
+				80% {
+					top: 180px;
+					left: 340px;
+					opacity: 1;
+				}
+
+				100% {
+					top: 200px;
+					left: 300px;
+					opacity: 0;
+				}
+			}
+		}
+	}
+
+	.bullshit {
+		position: relative;
+		float: left;
+		width: 300px;
+		padding: 30px 0;
+		overflow: hidden;
+
+		&__oops {
+			font-size: 32px;
+			font-weight: bold;
+			line-height: 40px;
+			color: #1482f0;
+			opacity: 0;
+			margin-bottom: 20px;
+			animation-name: slideUp;
+			animation-duration: 0.5s;
+			animation-fill-mode: forwards;
+		}
+
+		&__headline {
+			font-size: 20px;
+			line-height: 24px;
+			color: #222;
+			font-weight: bold;
+			opacity: 0;
+			margin-bottom: 10px;
+			animation-name: slideUp;
+			animation-duration: 0.5s;
+			animation-delay: 0.1s;
+			animation-fill-mode: forwards;
+		}
+
+		&__info {
+			font-size: 13px;
+			line-height: 21px;
+			color: grey;
+			opacity: 0;
+			margin-bottom: 30px;
+			animation-name: slideUp;
+			animation-duration: 0.5s;
+			animation-delay: 0.2s;
+			animation-fill-mode: forwards;
+		}
+
+		&__return-home {
+			display: block;
+			float: left;
+			width: 110px;
+			height: 36px;
+			background: #1482f0;
+			border-radius: 100px;
+			text-align: center;
+			color: #ffffff;
+			opacity: 0;
+			font-size: 14px;
+			line-height: 36px;
+			cursor: pointer;
+			animation-name: slideUp;
+			animation-duration: 0.5s;
+			animation-delay: 0.3s;
+			animation-fill-mode: forwards;
+		}
+
+		@keyframes slideUp {
+			0% {
+				transform: translateY(60px);
+				opacity: 0;
+			}
+
+			100% {
+				transform: translateY(0);
+				opacity: 1;
+			}
+		}
+	}
+}</style>

src/views/business/alliance/index.vue

@@ -34,6 +34,13 @@
             </el-tag>
           </template>
         </el-table-column>
+        <el-table-column prop="isClub" label="是否俱乐部默认卡" width="120" align="center">
+          <template slot-scope="scope">
+            <el-tag :type="Number(scope.row.isClub) === 1 ? 'success' : 'info'" size="small">
+              {{ Number(scope.row.isClub) === 1 ? '是' : '否' }}
+            </el-tag>
+          </template>
+        </el-table-column>
         <el-table-column prop="coverUrl" label="联盟卡封面" width="180" align="center">
           <template slot-scope="scope">
             <el-image :src="scope.row.coverUrl" style="width: 50px"></el-image>
@@ -74,6 +81,13 @@
           <template slot-scope="{ row }">
             <el-button @click="$refs.checkDialogRef && $refs.checkDialogRef.handleOpen(row)" :disabled="row.state !== 1" type="warning" size="mini">审核</el-button>
             <el-button type="primary" size="mini" @click="$refs.detailDialogRef && $refs.detailDialogRef.handleOpen(row)">详情</el-button>
+            <el-button
+              :type="Number(row.isClub) === 1 ? 'danger' : 'success'"
+              size="mini"
+              @click="handleSetDefaultCard(row)"
+            >
+              {{ Number(row.isClub) === 1 ? '取消俱乐部默认卡' : '设为俱乐部默认卡' }}
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -100,6 +114,7 @@
 
 <script>
 import { getAllianceCardListApi } from '@/api/business'
+import { setOrCancelAllianceCardIsClubApi } from '@/api/rm-bank'
 import DetailDialog from './components/DetailDialog'
 import CheckDialog from './components/CheckDialog'
 
@@ -161,6 +176,31 @@ export default {
       this.listQuery.search = ''
       this.listQuery.state = ''
       this.handleSearch()
+    },
+
+    handleSetDefaultCard(row) {
+      const isSet = Number(row.isClub) !== 1
+      const tipText = isSet ? '设置为俱乐部默认卡' : '取消俱乐部默认卡'
+      
+      this.$confirm(`是否要${tipText}？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        try {
+          await setOrCancelAllianceCardIsClubApi({
+            allianceCardId: row.id,
+            state: isSet ? '1' : '0'
+          })
+          this.$message.success(`${tipText}成功`)
+          this.getList() // 刷新列表
+        } catch (error) {
+          console.error(error)
+          this.$message.error(`${tipText}失败`)
+        }
+      }).catch(() => {
+        this.$message.info('已取消操作')
+      })
     }
   }
 }

src/views/rm-bank/merchant-dividends/components/MerchantDividendsDeatil.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <el-dialog title="分红信息" :visible.sync="merchantDividendsDeatilVisible" width="40%">
+      <el-descriptions title="分红信息" :column="2" border>
+        <el-descriptions-item label="商家ID">{{ form.shopId }}</el-descriptions-item>
+        <el-descriptions-item label="利润分红比例">{{ form.profitRate * 100 + '%' }}</el-descriptions-item>
+        <el-descriptions-item label="赠送总份额">{{ form.totalQuota || 0 }}</el-descriptions-item>
+        <el-descriptions-item label="实际达成目标">{{ form.actualAmount || 0 }}</el-descriptions-item>
+        <el-descriptions-item label="年度运营目标">{{ form.targetAmount || 0 }}</el-descriptions-item>
+        <el-descriptions-item label="分红平衡点">{{ form.balancePoint || 0 }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{ form.createTime }}</el-descriptions-item>
+      </el-descriptions>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getShopDividendSettingsByIdApi } from '@/api/rm-bank'
+export default {
+  data() {
+    return {
+      merchantDividendsDeatilVisible: false,
+      form: {}
+    }
+  },
+
+  methods: {
+    show(id) {
+      if (!id) {
+        return this.$message.error('数据错误')
+      }
+      getShopDividendSettingsByIdApi({
+        'shopDividendSettings.id': id
+      }).then((res) => {
+        this.form = res.data.shopDividendSettings
+      })
+      this.merchantDividendsDeatilVisible = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-descriptions-item__cell {
+  width: 30px;
+}
+</style>

src/views/rm-bank/merchant-dividends/components/MerchantDividendsModal.vue

@@ -0,0 +1,196 @@
+<template>
+  <el-dialog :visible.sync="merchantDividendsModalVisible" v-bind="dialogConfig">
+    <el-form ref="formRef" :rules="merchantDividendsRules" :model="merchantDividendsForm" label-width="120px">
+      <el-form-item label="商家" prop="shopId">
+        <!-- 可搜索 -->
+        <el-select
+          :disabled="!!merchantDividendsForm.id"
+          filterable
+          remote
+          reserve-keyword
+          style="width: 100%"
+          :remote-method="handleSearchMerchant"
+          :loading="searchMerchantLoading"
+          v-model="merchantDividendsForm.shopId"
+          placeholder="请选择商家"
+          value-key="shopId"
+        >
+          <el-option v-for="item in merchantList" :key="item.shopId" :label="item.shopName" :value="item.shopId" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="利润分红比例" prop="profitRate">
+        <el-input v-model="merchantDividendsForm.profitRate" placeholder="请输入利润分红比例" />
+        <div class="tip">范围0-1,精确到小数点后2位, 多于两位默认会保留2位</div>
+      </el-form-item>
+      <el-form-item label="赠送总份额" prop="totalQuota">
+        <el-input v-model="merchantDividendsForm.totalQuota" placeholder="请输入赠送总份额" />
+      </el-form-item>
+      <el-form-item label="年度运营目标" prop="targetAmount">
+        <el-input v-model="merchantDividendsForm.targetAmount" placeholder="请输入年度运营目标" />
+      </el-form-item>
+      <el-form-item label="分红平衡点" prop="balancePoint">
+        <el-input v-model="merchantDividendsForm.balancePoint" placeholder="请输入分红平衡点" />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="handleConfirm" :loading="isLoading">确认{{ merchantDividendsForm.id ? '编辑' : '创建' }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { postShopDividendSettingsApi, patchShopDividendSettingsByIdApi } from '@/api/rm-bank'
+import { businessListGetAll } from '@/api/business'
+
+
+const validateNumber = (label) => {
+  return (_, value, cb) => {
+    const num = value * 1
+    if (typeof num !== 'number' || Number.isNaN(num)) {
+      cb(new Error(`${label}必须是一个数字`))
+    }
+    if (num < 0) {
+      cb(new Error(`${label}必须大于等于零`))
+    }
+    cb()
+  }
+}
+
+export default {
+  data() {
+    return {
+      searchMerchantLoading: false,
+      isLoading: false,
+      merchantDividendsModalVisible: false,
+      merchantList: [],
+      merchantDividendsForm: {
+        id: undefined,
+        shopId: 498, // 商家ID
+        profitRate: 0.4, // 利润分红比例, 必须是一个数字 范围0-1，精确到小数点后2位
+        totalQuota: 1000, // 赠送总份额， 必须是一个数字
+        targetAmount: 2000000, // 年度运营目标， 必须是一个数字
+        balancePoint: 1500000 // 分红平衡点， 必须是一个数字
+      },
+      merchantDividendsRules: {
+        shopId: [{ required: true, message: '请选择商家', trigger: 'change' }],
+        profitRate: [
+          { required: true, message: '请输入利润分红比例', trigger: 'blur' },
+          { validator: validateNumber('利润分红比例'), trigger: 'blur' },
+          {
+            validator: (_, value, cb) => {
+              if (value < 0 || value > 1) {
+                cb(new Error('利润分红比例必须在0-1之间'))
+              } else {
+                cb()
+              }
+            },
+            trigger: 'blur'
+          }
+        ],
+        totalQuota: [
+          { required: true, message: '请输入赠送总份额', trigger: 'blur' },
+          { validator: validateNumber('赠送总份额'), trigger: 'blur' }
+        ],
+        targetAmount: [
+          { required: true, message: '请输入年度运营目标', trigger: 'blur' },
+          { validator: validateNumber('年度运营目标'), trigger: 'blur' }
+        ],
+        balancePoint: [
+          { required: true, message: '请输入分红平衡点', trigger: 'blur' },
+          { validator: validateNumber('分红平衡点'), trigger: 'blur' }
+        ]
+      },
+      dialogConfig: { title: '创建商家分红', width: '30%', 'close-on-click-modal': false }
+    }
+  },
+
+  mounted() {
+    // 获取商家列表
+    this.getMerchantList()
+  },
+
+  methods: {
+    show(row) {
+      this.resetDialog()
+      if (row) {
+        // 编辑
+        this.dialogConfig.title = '编辑商家分红'
+        this.merchantDividendsForm = Object.assign(this.merchantDividendsForm, row)
+      }
+      this.merchantDividendsModalVisible = true
+    },
+
+    close() {
+      this.merchantDividendsModalVisible = false
+    },
+
+    // 获取商家列表
+    async getMerchantList() {
+      const res = await businessListGetAll({
+        page: 1,
+        pageSize: 100,
+        shopType: 2,
+        shopName: ''
+      })
+      this.merchantList = res.data.list
+    },
+
+    // 点击编辑
+    handleConfirm() {
+      try {
+        this.isLoading = true
+        this.$refs.formRef.validate(async (valid) => {
+          if (valid) {
+            // 将数据转换成数字类型
+            const submitData = JSON.parse(JSON.stringify(this.merchantDividendsForm))
+            const api = submitData.id ? patchShopDividendSettingsByIdApi : postShopDividendSettingsApi
+            submitData.profitRate = submitData.profitRate * 1
+            submitData.totalQuota = submitData.totalQuota * 1
+            submitData.targetAmount = submitData.targetAmount * 1
+            submitData.balancePoint = submitData.balancePoint * 1
+            const res = await api({ shopDividendSettings: { ...submitData } })
+            if (res.code === '200') {
+              this.$message.success(submitData ? '编辑成功' : '创建成功')
+              this.$emit('refresh')
+              this.close()
+            }
+          }
+        })
+      } catch (error) {
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    // 重置
+    resetDialog() {
+      this.merchantDividendsForm = { id: undefined, shopId: undefined, profitRate: undefined, totalQuota: undefined, targetAmount: undefined, balancePoint: undefined }
+    },
+
+    // 搜索商家
+    async handleSearchMerchant(query) {
+      if (query) {
+        this.searchMerchantLoading = true
+        const res = await businessListGetAll({
+          page: 1,
+          pageSize: 100,
+          shopType: 2,
+          shopName: query
+        })
+        this.merchantList = res.data.list
+        this.searchMerchantLoading = false
+      } else {
+        this.merchantList = []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tip {
+  font-size: 12px;
+  color: #999;
+}
+</style>

src/views/rm-bank/merchant-dividends/index.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="payreturnPage">
+    <!-- 搜索 -->
+    <div class="formSearch">
+      <!-- 搜索条件 -->
+      <el-form inline :model="query" class="demo-form-inline">
+        <el-form-item>
+          <el-button type="primary" plain @click="search">查询</el-button>
+          <el-button plain @click="clear">重置</el-button>
+          <el-button type="primary" plain @click="$refs.merchantDividendsModalRef && $refs.merchantDividendsModalRef.show()">新增俱乐部</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 align="center" type="index" label="#" width="55"></el-table-column>
+        <el-table-column prop="shopId" label="商家ID" align="center" width="220" />
+
+        <el-table-column prop="profitRate" label="利润分红比例" align="center">
+          <template slot-scope="scope">
+            <el-tag size="mini">{{ scope.row.profitRate * 100 + '%' }} </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="totalQuota" label="赠送总份额" align="center">
+          <template slot-scope="scope">
+            <el-tag type="success" size="mini">{{ scope.row.totalQuota || '0' }}</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="targetAmount" label="年度运营目标" align="center">
+          <template slot-scope="scope">
+            <el-tag type="warning" size="mini">{{ scope.row.targetAmount || '0' }}</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="actualAmount" label="实际达成目标" align="center">
+          <template slot-scope="scope">
+            <el-tag type="success" size="mini">{{ scope.row.actualAmount || '0' }}</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="balancePoint" label="利润分红点" align="center">
+          <template slot-scope="scope">
+            <el-tag type="danger" size="mini">{{ scope.row.balancePoint || '0' }}</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="createTime" label="创建时间" align="center" width="220" />
+        <el-table-column width="280" label="操作" align="center" show-overflow-tooltip fixed="right">
+          <template slot-scope="scope">
+            <div class="btnList">
+              <el-button type="text" @click="$refs.merchantDividendsModalRef && $refs.merchantDividendsModalRef.show(scope.row)">编辑</el-button>
+              <el-button type="text" @click="$refs.detailModalRef && $refs.detailModalRef.show(scope.row.id)">详情</el-button>
+              <el-button type="text" style="color: #f56c6c" @click="handleDelete(scope.row)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="fenye">
+        <el-pagination
+          :current-page="query.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>
+
+    <!-- 编辑新增 -->
+    <MerchantDividendsModal @refresh="getAll" ref="merchantDividendsModalRef"></MerchantDividendsModal>
+    <MerchantDividendsDeatil ref="detailModalRef"></MerchantDividendsDeatil>
+  </div>
+</template>
+
+<script>
+import { getShopDividendSettingsAllApi, deleteShopDividendSettingsByIdApi } from '@/api/rm-bank'
+import MerchantDividendsModal from './components/MerchantDividendsModal.vue'
+import MerchantDividendsDeatil from './components/MerchantDividendsDeatil.vue'
+
+export default {
+  name: 'MerchantDividendsList',
+  components: {MerchantDividendsModal,MerchantDividendsDeatil},
+  data() {
+    return {
+      query: {
+        page: 1,
+        pageSize: 10,
+        name: void 0,
+        areaCode: []
+      },
+      total: 1,
+      tableData: []
+    }
+  },
+  created() {
+    this.getAll()
+  },
+  methods: {
+    async getAll() {
+      const queryParams = JSON.parse(JSON.stringify(this.query))
+
+      const res = await getShopDividendSettingsAllApi(queryParams)
+      this.tableData = res.data.list
+      this.total = res.data.total
+    },
+    handleSizeChange(val) {
+      this.query.pageSize = val
+      this.getAll()
+    },
+    handleCurrentChange(val) {
+      this.query.page = val
+      this.getAll()
+    },
+    search() {
+      this.total = 1
+      this.query.page = 1
+      this.getAll()
+    },
+    clear() {
+      this.query = {
+        page: 1,
+        pageSize: 10,
+        name: '',
+        areaCode: []
+      }
+      this.getAll()
+    },
+
+    // 删除
+    handleDelete(row) {
+      this.$confirm(`是否删除【${row.shopId}】这条商家分红吗?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          const res = await deleteShopDividendSettingsByIdApi({ 'shopDividendSettings.id': row.id })
+          if (res.code === '200') {
+            this.$message.success('删除成功')
+            this.getAll()
+          }
+        })
+        .catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.payreturnPage {
+  padding: 30px;
+
+  .tableBox {
+    .fenye {
+      margin: 20px;
+    }
+  }
+}
+</style>