From fe4d54440ea688d395973376b7d3c2a469910f10 Mon Sep 17 00:00:00 2001
From: GaoHao <1210693421@qq.com>
Date: Sat, 23 Nov 2024 10:03:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E6=83=A0=E5=88=B8=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   4 +-
 src/api/credit.js                             |  77 ++++++
 src/router/routers.js                         |   6 +
 src/views/home/components/credit_add.vue      | 238 ++++++++++++++++++
 .../home/components/credit_repayment.vue      | 236 +++++++++++++++++
 src/views/home/data_credit.vue                | 198 +++++++++++++++
 6 files changed, 757 insertions(+), 2 deletions(-)
 create mode 100644 src/api/credit.js
 create mode 100644 src/views/home/components/credit_add.vue
 create mode 100644 src/views/home/components/credit_repayment.vue
 create mode 100644 src/views/home/data_credit.vue

diff --git a/.env.development b/.env.development
index 98c3e63..fdeba2f 100644
--- a/.env.development
+++ b/.env.development
@@ -5,9 +5,9 @@ ENV = 'development'
 # VUE_APP_BASE_API  = 'http://192.168.2.42:8000'
 # VUE_APP_BASE_API  = 'http://192.168.2.133:8000'
 # 测试
-# VUE_APP_BASE_API  = 'https://admintestpapi.sxczgkj.cn'
+VUE_APP_BASE_API  = 'https://admintestpapi.sxczgkj.cn'
 #预发布
-VUE_APP_BASE_API  = 'https://pre-cashieradmin.sxczgkj.cn'
+# VUE_APP_BASE_API  = 'https://pre-cashieradmin.sxczgkj.cn'
 
 # 生产
 # VUE_APP_BASE_API  = 'https://cashieradmin.sxczgkj.cn'
diff --git a/src/api/credit.js b/src/api/credit.js
new file mode 100644
index 0000000..42dce94
--- /dev/null
+++ b/src/api/credit.js
@@ -0,0 +1,77 @@
+import request from '@/utils/request'
+
+/**
+ * 获取挂账列表
+ * @returns
+ */
+export function getTbShopCoupon(params) {
+  return request({
+    url: '/api/credit/buyer/page',
+    method: 'get',
+    params: {
+      ...params
+    }
+  })
+}
+
+/**
+ * 获取优惠券详情
+ * @returns
+ */
+export function getTbShopCouponInfo(id) {
+  return request({
+    url: '/api/tbShopCoupon/' + id,
+    method: 'get',
+    params: {}
+  })
+}
+
+/**
+ * 增加挂账人
+ * @returns
+ */
+export function addCreditBuyer(data) {
+  return request({
+    url: '/api/credit/buyer',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 删除优惠券
+ * @returns
+ */
+export function delTbShopCoupon(params) {
+  return request({
+    url: '/api/tbShopCoupon',
+    method: 'delete',
+    data: params
+  })
+}
+
+/**
+ * 获取领取列表
+ * @returns
+ */
+export function queryReceive(params) {
+  return request({
+    url: '/api/tbShopCoupon/queryReceive',
+    method: 'post',
+    data: {
+      ...params
+    }
+  })
+}
+
+/**
+ * 获取领取列表
+ * @returns
+ */
+export function delReceive(params) {
+  return request({
+    url: '/api/tbShopCoupon/receive',
+    method: 'delete',
+    data: params
+  })
+}
diff --git a/src/router/routers.js b/src/router/routers.js
index 05c29e5..729d7fd 100644
--- a/src/router/routers.js
+++ b/src/router/routers.js
@@ -59,6 +59,12 @@ export const constantRouterMap = [
         name: 'data_tables',
         meta: { title: '桌台统计' }
       },
+      {
+        path: 'data_credit',
+        component: (resolve) => require(['@/views/home/data_credit'], resolve),
+        name: 'data_credit',
+        meta: { title: '挂账管理' }
+      },
       {
         path: 'data_record',
         component: (resolve) => require(['@/views/home/data_record'], resolve),
diff --git a/src/views/home/components/credit_add.vue b/src/views/home/components/credit_add.vue
new file mode 100644
index 0000000..6bc9a4e
--- /dev/null
+++ b/src/views/home/components/credit_add.vue
@@ -0,0 +1,238 @@
+<template>
+  <div>
+    <el-dialog
+      title="创建挂账人"
+      :visible.sync="addDialogVisible"
+      width="30%"
+      center
+    >
+      <div class="content">
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+          <el-form-item label="状态" prop="status" style="width: 100%;">
+            <el-switch
+              v-model="form.status"
+              active-value="1"
+              inactive-value="0"
+            />
+          </el-form-item>
+          <el-form-item label="挂账人" prop="debtor" style="width: 100%;">
+            <el-input v-model="form.debtor" placeholder="请输入挂账人名称" />
+          </el-form-item>
+          <el-form-item label="手机号" prop="mobile" style="width: 100%;">
+            <el-input v-model="form.mobile" placeholder="请输入手机号" oninput="value= value.replace(/[^1-9]/g, '')" maxlength="11" />
+          </el-form-item>
+          <el-form-item label="职位" prop="position" style="width: 100%;">
+            <el-input v-model="form.position" placeholder="请输入职位" />
+          </el-form-item>
+          <el-form-item label="挂账额度" prop="creditAmount" style="width: 100%;">
+            <el-input v-model="form.creditAmount" placeholder="" oninput="value= value.replace(/[^\d|\.]/g, '')">
+              <template slot="prepend">￥</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="还款方式" style="width: 100%;">
+            <el-radio-group v-model="form.repaymentMethod" :disabled="isExist(form.id)">
+              <el-radio v-for="item in repaymentMethodList" :key="item.value" :label="item.value">
+                {{ item.label }}
+              </el-radio>
+            </el-radio-group>
+            <div style="font-size: 12px;color: #999;">一经创建无法更改还款方式</div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="addDialogVisible = false">取 消</el-button>
+        <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { addCreditBuyer } from '@/api/coupon'
+
+export default {
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['couponId'],
+  data() {
+    return {
+      addDialogVisible: false,
+      loading: false,
+      repaymentMethodList: [
+        { label: '按总金额还款', value: 'total' },
+        { label: '按订单还款', value: 'order' }
+      ],
+      form: {
+        id: '',
+        shopId: '',
+        status: '1',
+        debtor: '',
+        mobile: '',
+        position: '',
+        creditAmount: '',
+        repaymentMethod: 'total'
+      },
+      rules: {
+        debtor: [
+          {
+            required: true,
+            message: '请输入挂账人名称',
+            trigger: 'blur'
+          }
+        ],
+        mobile: [
+          {
+            required: true,
+            message: '请输入手机号',
+            trigger: 'blur'
+          }
+        ],
+        position: [
+          {
+            required: true,
+            message: '请输入职位',
+            trigger: 'blur'
+          }
+        ],
+        creditAmount: [
+          {
+            required: true,
+            message: '请输入挂账额度',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    /**
+     * 校验是否存在
+     */
+    isExist(val) {
+      if (val) {
+        return true
+      } else {
+        return false
+      }
+    },
+
+    /**
+     * 确定
+     */
+    async onSubmitHandle() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            this.loading = true
+            if (!this.form.shopId) { this.form.shopId = localStorage.getItem('shopId') }
+            // eslint-disable-next-line no-unused-vars, prefer-const
+            let res = await addCreditBuyer(this.form)
+            this.$notify({
+              title: '成功',
+              message: `${this.form.id ? '编辑' : '添加'}成功`,
+              type: 'success'
+            })
+            this.addDialogVisible = false
+            this.loading = false
+          } catch (error) {
+            this.loading = false
+            console.log(error)
+          }
+        }
+      })
+    },
+
+    /**
+     * 打开详情
+     * @param obj
+     */
+    show(obj) {
+      console.log(obj)
+      this.addDialogVisible = true
+      this.getTableData()
+    },
+
+    /**
+     * 关闭
+     */
+    close() {
+      this.addDialogVisible = false
+    },
+
+    reset() {
+      this.query = { ...this.resetQuery }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.shop_list {
+    display: flex;
+    flex-wrap: wrap;
+
+    .item_wrap {
+        $size: 80px;
+
+        .item {
+            $radius: 4px;
+            width: $size;
+            height: $size;
+            border-radius: $radius;
+            overflow: hidden;
+            position: relative;
+            margin-right: 10px;
+            margin-top: 10px;
+
+            &:hover {
+                cursor: pointer;
+            }
+
+            &::after {
+                content: attr(data-index);
+                font-size: 12px;
+                height: 20px;
+                display: flex;
+                padding: 0 10px;
+                border-radius: 0 0 $radius 0;
+                align-items: center;
+                background-color: rgba(0, 0, 0, 0.3);
+                backdrop-filter: blur(10px);
+                color: #fff;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 10;
+            }
+
+            &::before {
+                content: '删除';
+                font-size: 12px;
+                width: 100%;
+                height: 20px;
+                display: flex;
+                padding: 0 10px;
+                align-items: center;
+                justify-content: center;
+                background-color: rgba(0, 0, 0, 0.3);
+                backdrop-filter: blur(10px);
+                color: #fff;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                z-index: 10;
+                transition: all .1s ease-in-out;
+            }
+        }
+
+        .name {
+            width: $size;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}
+</style>
diff --git a/src/views/home/components/credit_repayment.vue b/src/views/home/components/credit_repayment.vue
new file mode 100644
index 0000000..a9ee59f
--- /dev/null
+++ b/src/views/home/components/credit_repayment.vue
@@ -0,0 +1,236 @@
+<template>
+  <div>
+    <el-dialog
+      title="挂账还款"
+      :visible.sync="addDialogVisible"
+      width="30%"
+      center
+    >
+      <div class="content">
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+          <el-form-item label="还款方式" style="width: 100%;">
+            <el-radio-group v-model="form.repaymentMethod" :disabled="isExist(form.id)">
+              <el-radio v-for="item in repaymentMethodList" :key="item.value" :label="item.value">
+                {{ item.label }}
+              </el-radio>
+            </el-radio-group>
+            <div style="font-size: 12px;color: #999;">一经创建无法更改还款方式</div>
+          </el-form-item>
+          <el-form-item label="还款金额" prop="creditAmount" style="width: 100%;">
+            <el-input v-model="form.creditAmount" placeholder="" oninput="value= value.replace(/[^\d|\.]/g, '')">
+              <template slot="prepend">￥</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="支付方式" prop="debtor" style="width: 100%;">
+            <el-input v-model="form.debtor" placeholder="请输入支付方式" />
+          </el-form-item>
+          <el-form-item label="备注" prop="debtor" style="width: 100%;">
+            <el-input v-model="form.debtor" placeholder="请输入备注" />
+          </el-form-item>
+          <el-form-item label="还款方式" style="width: 100%;">
+            <el-radio-group v-model="form.repaymentMethod" :disabled="isExist(form.id)">
+              <el-radio v-for="item in repaymentMethodList" :key="item.value" :label="item.value">
+                {{ item.label }}
+              </el-radio>
+            </el-radio-group>
+            <div style="font-size: 12px;color: #999;">一经创建无法更改还款方式</div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="addDialogVisible = false">取 消</el-button>
+        <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { addCreditBuyer } from '@/api/coupon'
+
+export default {
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['couponId'],
+  data() {
+    return {
+      addDialogVisible: false,
+      loading: false,
+      repaymentMethodList: [
+        { label: '按总金额还款', value: 'total' },
+        { label: '按订单还款', value: 'order' }
+      ],
+      form: {
+        id: '',
+        shopId: '',
+        status: '1',
+        debtor: '',
+        mobile: '',
+        position: '',
+        creditAmount: '',
+        repaymentMethod: 'total'
+      },
+      rules: {
+        debtor: [
+          {
+            required: true,
+            message: '请输入挂账人名称',
+            trigger: 'blur'
+          }
+        ],
+        mobile: [
+          {
+            required: true,
+            message: '请输入手机号',
+            trigger: 'blur'
+          }
+        ],
+        position: [
+          {
+            required: true,
+            message: '请输入职位',
+            trigger: 'blur'
+          }
+        ],
+        creditAmount: [
+          {
+            required: true,
+            message: '请输入挂账额度',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    /**
+     * 校验是否存在
+     */
+    isExist(val) {
+      if (val) {
+        return true
+      } else {
+        return false
+      }
+    },
+
+    /**
+     * 确定
+     */
+    async onSubmitHandle() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            this.loading = true
+            if (!this.form.shopId) { this.form.shopId = localStorage.getItem('shopId') }
+            // eslint-disable-next-line no-unused-vars, prefer-const
+            let res = await addCreditBuyer(this.form)
+            this.$notify({
+              title: '成功',
+              message: `${this.form.id ? '编辑' : '添加'}成功`,
+              type: 'success'
+            })
+            this.addDialogVisible = false
+            this.loading = false
+          } catch (error) {
+            this.loading = false
+            console.log(error)
+          }
+        }
+      })
+    },
+
+    /**
+     * 打开详情
+     * @param obj
+     */
+    show(obj) {
+      console.log(obj)
+      this.addDialogVisible = true
+      this.getTableData()
+    },
+
+    /**
+     * 关闭
+     */
+    close() {
+      this.addDialogVisible = false
+    },
+
+    reset() {
+      this.query = { ...this.resetQuery }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.shop_list {
+    display: flex;
+    flex-wrap: wrap;
+
+    .item_wrap {
+        $size: 80px;
+
+        .item {
+            $radius: 4px;
+            width: $size;
+            height: $size;
+            border-radius: $radius;
+            overflow: hidden;
+            position: relative;
+            margin-right: 10px;
+            margin-top: 10px;
+
+            &:hover {
+                cursor: pointer;
+            }
+
+            &::after {
+                content: attr(data-index);
+                font-size: 12px;
+                height: 20px;
+                display: flex;
+                padding: 0 10px;
+                border-radius: 0 0 $radius 0;
+                align-items: center;
+                background-color: rgba(0, 0, 0, 0.3);
+                backdrop-filter: blur(10px);
+                color: #fff;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 10;
+            }
+
+            &::before {
+                content: '删除';
+                font-size: 12px;
+                width: 100%;
+                height: 20px;
+                display: flex;
+                padding: 0 10px;
+                align-items: center;
+                justify-content: center;
+                background-color: rgba(0, 0, 0, 0.3);
+                backdrop-filter: blur(10px);
+                color: #fff;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                z-index: 10;
+                transition: all .1s ease-in-out;
+            }
+        }
+
+        .name {
+            width: $size;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}
+</style>
diff --git a/src/views/home/data_credit.vue b/src/views/home/data_credit.vue
new file mode 100644
index 0000000..1cf71ac
--- /dev/null
+++ b/src/views/home/data_credit.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="app-container">
+    <div class="head-container title">
+      挂账管理
+    </div>
+    <div class="head-container filtration">
+      <div class="l">
+        <el-button type="primary" icon="el-icon-plus" @click="addCredit">
+          创建挂账人
+        </el-button>
+      </div>
+      <div class="r">
+        <el-input v-model="tableData.keywords" placeholder="按挂账人或手机号" style="width: 138px;" />
+        <el-select v-model="tableData.status" placeholder="全部状态" clearable style="width: 123px;">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+    </div>
+    <div class="content">
+      <el-table v-loading="tableData.loading" :data="tableData.data">
+        <el-table-column label="挂账编码" prop="id" />
+        <el-table-column label="状态">
+          <template v-slot="scope">
+            {{ scope.row.status == '1' ? '启用' : '停用' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="挂账人" prop="debtor" />
+        <el-table-column label="手机号" prop="mobile" />
+        <el-table-column label="挂账额度(元)" prop="creditAmount" />
+        <el-table-column label="已挂账金额(元)" prop="owedAmount" />
+        <el-table-column label="剩余挂账额度(元)" prop="remainingAmount" />
+        <!-- <el-table-column label="账户余额" prop="title" /> -->
+        <el-table-column label="适用门店" prop="shopName" />
+        <el-table-column label="操作" width="150">
+          <template v-slot="scope">
+            <el-button type="text" icon="el-icon-edit" @click="$router.push({name: 'add_coupon', query: {type:scope.row.type ,id: scope.row.id}} )">查看明细</el-button>
+            <el-button type="text" icon="el-icon-edit" @click="$router.push({name: 'add_coupon', query: {type:scope.row.type ,id: scope.row.id}} )">编辑</el-button>
+            <el-button type="text" icon="el-icon-edit" @click="$router.push({name: 'add_coupon', query: {type:scope.row.type ,id: scope.row.id}} )">还款</el-button>
+            <el-button type="text" icon="el-icon-edit" @click="$router.push({name: 'add_coupon', query: {type:scope.row.type ,id: scope.row.id}} )">还款记录</el-button>
+            <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
+              <el-button
+                slot="reference"
+                type="text"
+                icon="el-icon-delete"
+                style="margin-left: 20px !important;"
+              >删除</el-button>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="head-container">
+      <el-pagination
+        :total="tableData.total"
+        :current-page="tableData.page"
+        :page-size="tableData.size"
+        layout="total, sizes, prev, pager, next, jumper"
+        @current-change="paginationChange"
+        @size-change="sizeChange"
+      />
+    </div>
+
+    <!-- 创建挂账人 -->
+    <creditAdd ref="creditAdd" />
+
+    <!-- 还款 -->
+    <creditRepayment ref="creditRepayment" />
+
+  </div>
+</template>
+
+<script>
+import creditAdd from './components/credit_add.vue'
+import creditRepayment from './components/credit_repayment.vue'
+import { getTbShopCoupon, delTbShopCoupon } from '@/api/credit'
+export default {
+  // eslint-disable-next-line vue/no-unused-components
+  components: { creditAdd, creditRepayment },
+  filters: {
+
+    typeFilter(value) {
+      // eslint-disable-next-line eqeqeq
+    },
+    effectTypeFilter(value) {
+      // eslint-disable-next-line eqeqeq
+    }
+  },
+  data() {
+    return {
+      options: [
+        {
+          value: '启用',
+          label: '1'
+        },
+        {
+          value: '停用',
+          label: '0'
+        }
+      ],
+      tableData: {
+        keywords: '',
+        status: '',
+        data: [],
+        page: 1,
+        size: 10,
+        loading: false,
+        total: 0
+      },
+      couponId: null
+    }
+  },
+  mounted() {
+    this.getTableData()
+  },
+  methods: {
+    /**
+     * 创建挂账人
+     */
+    addCredit() {
+      // this.$refs.creditAdd.show()
+      this.$refs.creditRepayment.show()
+    },
+
+    // 重置查询
+    resetHandle() {
+      this.page = 1
+      this.getTableData()
+    },
+    // 分页大小改变
+    sizeChange(e) {
+      this.tableData.size = e
+      this.getTableData()
+    },
+    // 分页回调
+    paginationChange(e) {
+      console.log(e)
+      this.tableData.page = e
+      this.getTableData()
+    },
+    // 获取挂账列表
+    async getTableData() {
+      this.tableData.loading = true
+      try {
+        const res = await getTbShopCoupon({
+          page: this.tableData.page,
+          size: this.tableData.size,
+          shopId: localStorage.getItem('shopId')
+        })
+        this.tableData.loading = false
+        this.tableData.data = res.content
+        this.tableData.total = res.totalElements
+        console.log(this.tableData)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    /**
+     * 查看领取详情
+     */
+    couponDetailsOpen(row) {
+      this.$refs.couponDetails.show(row)
+      this.couponId = row.id
+    },
+
+    /**
+     * 删除优惠券
+     * @param id
+     */
+    async delTableHandle(id) {
+      const delRes = await delTbShopCoupon(id)
+      console.log(delRes)
+      this.getTableData()
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+  .title{
+    font-weight: bold;
+    font-size: 16px;
+    color: #333333;
+  }
+  .filtration{
+    overflow: hidden;
+    .l{
+      float: left;
+    }
+    .r{
+      float: right;
+    }
+  }
+</style>