( $ _ $ )

src/api/voucherManagement/businessRechargeAmounts.js

@@ -0,0 +1,43 @@
+import request from '@/utils/request'
+
+// /businessRechargeAmounts/save 自定义创建代金卷充值金额
+export const saveAcount = (data) => request({
+  url: '/businessRechargeAmounts/save',
+  method: 'post',
+  data
+})
+
+// /businessRechargeAmounts/update 改
+export const updateAcount = (data) => request({
+  url: '/businessRechargeAmounts/update',
+  method: 'post',
+  data
+})
+
+// /businessRechargeAmounts/delete 删
+export const deleteAcount = (data) => request({
+  url: '/businessRechargeAmounts/delete',
+  method: 'post',
+  data
+})
+
+// /businessRechargeAmounts/getAll 查
+export const getAllAcount = (data) => request({
+  url: '/businessRechargeAmounts/getAll',
+  method: 'post',
+  data
+})
+
+// /businessRechargeAmounts/getById 查详情
+export const getByIdAcount = (data) => request({
+  url: '/businessRechargeAmounts/getById',
+  method: 'post',
+  data
+})
+
+// /businessRechargeAmounts/disable 禁用
+export const disableAcount = (data) => request({
+  url: '/businessRechargeAmounts/disable',
+  method: 'post',
+  data
+})

src/views/voucherManagement/rechargeManagement/index.vue

@@ -11,34 +11,249 @@
           </el-form-item> -->
         <el-form-item>
           <!-- <el-button type="primary" plain @click="search">查询</el-button> -->
-          <el-button type="success" plain @click="isCreate = true">新增充值额度</el-button>
+          <el-button type="success" plain @click="isCreate = true;isUpdata = false">新增充值额度</el-button>
           <!-- <el-button type="info" plain @click="clear">重置</el-button> -->
         </el-form-item>
       </el-form>
     </div>
+    <!-- 表格 -->
+    <div class="tableBox">
+      <el-table
+        ref="multipleTable" :data="tableData" border center
+        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
+      >
+        <el-table-column label="ID" show-overflow-tooltip>
+          <template slot-scope="scope">{{ scope.row.amountId }}</template>
+        </el-table-column>
+        <el-table-column label="充值金额">
+          <template slot-scope="scope">{{ scope.row.rechargeAmount }}</template>
+        </el-table-column>
+        <el-table-column label="显示名称">
+          <template slot-scope="scope">{{ scope.row.displayName }}</template>
+        </el-table-column>
+        <el-table-column label="详细描述信息">
+          <template slot-scope="scope">{{ scope.row.description }}</template>
+        </el-table-column>
+        <el-table-column label="是否激活">
+          <template slot-scope="scope">
+            <div style="display: flex;justify-content: center;align-items: center;">
+              <el-switch
+                v-model.number="scope.row.isActive"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                :active-value="1"
+                :inactive-value="0"
+                @change="editOpen(scope.row)"
+              >
+              </el-switch>
+              <span style="line-height: 100%;margin-left: 10px;">{{ scope.row.isActive === 1 ? '开启' : '关闭' }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="详细描述信息">
+          <template slot-scope="scope">
+            <div class="btnList">
+              <el-button type="text" @click="edit(scope.row)">编辑</el-button>
+              <el-button v-show="isShowDelete" type="text" @click="deletes(scope.row)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="fenye">
+        <el-pagination
+          :current-page="querySelect.page" :page-sizes="[10, 20, 50, 100]" :page-size="querySelect.pageSize"
+          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+    <el-dialog
+      :title="!isUpdata ? '新增用户' : '修改用户'" :visible.sync="isCreate" width="30%" center
+      :close-on-click-modal="false"
+    >
+      <!-- 新增用户 -->
+      <div>
+        <el-form ref="ruleForm" :model="formData" label-width="80px" :rules="rules">
+          <el-form-item label="商家ID" prop="">
+            <el-input v-model="formData.shopId" disabled maxlength="20" />
+          </el-form-item>
+          <el-form-item label="充值金额" prop="rechargeAmount">
+            <!-- <el-input v-if="formData" maxlength="11" :value="hidden(addForm.phone, 3, 4)" @focus="focusPhoneInput" /> -->
+            <el-input v-model.number="formData.rechargeAmount" @change="getBonusAmount()" />
+          </el-form-item>
+          <el-form-item label="赠送金额" prop="bonusAmount">
+            <el-input v-model.number="formData.bonusAmount" disabled />
+            <!-- <el-input disabled v-text="bonusAmount" /> -->
+          </el-form-item>
+          <el-form-item label="显示名称" prop="displayName">
+            <el-input v-model="formData.displayName" placeholder="显示名称,例如: 50元充值" />
+          </el-form-item>
+          <el-form-item label="详情信息" prop="description">
+            <el-input v-model="formData.description" />
+          </el-form-item>
+          <el-form-item label="是否激活">
+            <el-radio-group v-model="formData.isActive">
+              <el-radio :label="1">是</el-radio>
+              <el-radio :label="0">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="isCreate = false">取 消</el-button>
+        <el-button v-if="!isUpdata" type="primary" @click="createdAcount('ruleForm')">
+          确 定
+        </el-button>
+        <el-button v-if="isUpdata" type="primary" @click="editAcount('ruleForm')">
+          保存
+        </el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import Cookies from 'js-cookie'
+import { saveAcount, updateAcount, deleteAcount, getAllAcount, getByIdAcount, disableAcount } from '@/api/voucherManagement/businessRechargeAmounts'
 export default {
   // eslint-disable-next-line vue/match-component-file-name
   name: 'RechargeManagement',
   data() {
     return {
+      isShowDelete: false,
       isCreate: false,
       querySelect: {
-        isActive: true,
-        displayName: ''
+        shopId: Cookies.get('shopID'),
+        page: 1,
+        pageSize: 10
       },
+      total: 0,
+      isUpdata: false,
+      updataId: '',
       formData: {
-
+        shopId: Cookies.get('shopID'),
+        rechargeAmount: '',
+        bonusAmount: '',
+        displayName: '',
+        description: '',
+        isActive: 1
+      },
+      userRules: {},
+      tableData: [],
+      rules: {
+        rechargeAmount: [{ required: true, message: '请输入充值金额', trigger: 'blur' }, { type: 'number', message: '充值金额必须为数字' }],
+        bonusAmount: [{ required: true, message: '请输入充值金额', trigger: 'change' }, { type: 'number', message: '充值金额必须为数字' }],
+        displayName: [ { required: true, message: '请输入显示名称', trigger: 'change' } ],
+        description: [ { required: true, message: '请输入详情信息', trigger: 'change' } ],
+        isActive: [ { required: true, message: '请选择是否激活', trigger: 'change' } ]
       }
     }
   },
+  created() {
+    // this.formData.shopId = Cookies.get('shopID')
+    this.getDataList()
+  },
   methods: {
-    // createlimit() {
-    //   this.isCreate = true
-    // }
+    getDataList() {
+      getAllAcount(this.querySelect).then((res) => {
+        // console.log(res)
+        this.tableData = res.data.records
+      })
+        .catch((err) => {
+          window.console.log(err)
+        })
+    },
+    createdAcount() {
+      this.$refs.ruleForm.validate((valid) => {
+        // console.log(valid)
+        // console.log(this.formData)
+        if (valid) {
+          saveAcount(this.formData).then((res) => {
+            // console.log(res)
+            this.$message({
+              message: '创建成功',
+              type: 'success'
+            })
+            this.isCreate = false
+            this.getDataList()
+          })
+            .catch((err) => {
+              window.console.log(err)
+            })
+        } else {
+          this.$message.error('请输入正确的信息')
+        }
+      })
+    },
+    getBonusAmount() {
+      this.formData.bonusAmount = this.formData.rechargeAmount * 2
+    },
+    edit(row) {
+      this.isCreate = true
+      this.isUpdata = true
+      this.updataId = row.amountId
+      for (const key in this.formData) {
+        this.formData[key] = row[key]
+      }
+    },
+    editAcount() {
+      this.$refs.ruleForm.validate((valid) => {
+        // console.log(valid)
+        // console.log(this.formData)
+        if (valid) {
+          updateAcount({ ...this.formData, amountId: this.updataId }).then((res) => {
+            // console.log(res)
+            this.$message({
+              message: '修改成功',
+              type: 'success'
+            })
+            this.isCreate = false
+            this.getDataList()
+          })
+            .catch((err) => {
+              window.console.log(err)
+            })
+        } else {
+          this.$message.error('请输入正确的信息')
+        }
+      })
+    },
+    editOpen(value) {
+      // console.log(value)
+      disableAcount({
+        amountId: value.amountId,
+        isActive: value.isActive
+      }).then((res) => {
+        // console.log(res)
+        this.$message({
+          message: '修改成功',
+          type: 'success'
+        })
+      })
+        .catch((err) => {
+          window.console.log(err)
+        })
+    },
+    handleSizeChange(val) {
+      this.querySelect.pageSize = val
+      this.getDataList(this.querySelect)
+    },
+    handleCurrentChange(val) {
+      this.querySelect.page = val
+      this.getDataList(this.querySelect)
+    },
+    deletes(value) {
+      deleteAcount({
+        amountId: value.amountId
+      }).then((res) => {
+        // console.log(res)
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        })
+        this.getDataList()
+      })
+    }
   }
 }
 </script>
@@ -47,4 +262,80 @@ export default {
 .cantainer {
 	padding: 20px;
 }
+@import url("../../../styles/elDialog.scss");
+
+.pending {
+	padding: 30px;
+}
+
+.fenye {
+	margin-top: 20px;
+}
+
+.clickMe {
+	color: #3a68f2;
+	cursor: pointer;
+}
+
+.uploadDialog {
+	// display: flex;
+	// flex-direction: column;
+	// justify-content: center;
+	>>>.el-upload__tip {
+		display: inline-block;
+		width: 360px;
+		margin: auto;
+	}
+}
+
+.vipDialog {
+	.priceTable {
+		table {
+			width: 100%;
+			text-align: center;
+			border-left: 1px solid #EBEEF5;
+			border-bottom: 1px solid #EBEEF5;
+			font-size: 14px;
+			color: #606266;
+			border-collapse: collapse;
+
+			tr {
+				border-top: 1px solid #EBEEF5;
+
+				th {
+					padding: 12px 0;
+					background: #EEF3FF;
+					color: #333;
+					border-right: 1px solid #EBEEF5;
+				}
+
+				td {
+					padding: 12px 0;
+					border-right: 1px solid #EBEEF5;
+
+					&.td-input {
+						.el-input {
+							width: 80px;
+							margin-right: 0;
+						}
+					}
+
+					&:nth-child(1),
+					&:nth-child(2) {
+						width: 80px;
+					}
+
+					.el-input {
+						width: 100px;
+						margin-right: 10px;
+					}
+				}
+			}
+		}
+	}
+
+	.clearBtn {
+		margin-top: 20px;
+	}
+}
 </style>