12.2其他页面

vue/gold-system/src/views/consume/addConsume.vue

@@ -1,13 +1,331 @@
 <script setup>
+    import { reactive } from 'vue';
+    import { ref,computed,watch } from 'vue'
+    import { ElMessage } from 'element-plus'
+    import { Plus } from '@element-plus/icons-vue'
+    import axios from 'axios'
+    import { ElMessageBox } from 'element-plus'
 
+
+
+    
+
+
+
+// 这是添加充值信息的表单
+const addConsume = ref({
+
+ });
+// 这是添加充值信息的接口
+const add = async function () {
+    try {
+        // 发送POST请求
+        const result = await axios.post('http://192.168.8.93:10010/recharge/recharge/add', addConsume.value);
+
+        // 将响应结果存储到响应式数据中
+        console.log('请求成功', result);
+        // 存储表格数据
+        console.log('用户信息', user.value);
+    } catch (error) {
+        console.log('请求失败', error);
+        // 在这里可以处理错误逻辑，比如显示错误提示等
+    }
+}
+const addBefore = () => {
+  Ref.value.validate(async (valid) => {
+    if (valid) {
+    ElMessageBox.confirm('确认添加？').then(() => {
+      add();
+      console.log('添加成功');
+      imageUrl.value = '';
+      addConsume.value = {};
+    }).catch(() => {
+      console.log('取消添加');
+    }) } else {
+            //提示
+            ElMessage({
+                type: 'error',
+                message: '请检查输入内容',
+            })
+        }
+    })
+  }
+
+  // 表单验证
+// 开始时间改变时，重新验证结束时间
+const Ref = ref(null);
+const checkEndTime = function (rule, value, callback) {
+    if (value <= new Date()) {
+        callback(new Error('付款时间不能小于当前时间'))
+    } 
+}
+const rules = reactive({
+    homilyId: [{ required: true, message: '请输入精网号', trigger: 'blur' },],
+    refundGoods: [{ required: true, message: '请选择退款商品', trigger: 'blur' },],
+    taskCoin: [{ required: true, message: '请输入任务金币', trigger: 'blur' },],
+    freeCoin: [{ required: true, message: '请输入免费金币', trigger: 'blur' },],
+    rechargeCoin: [{ required: true, message: '请输入免费金币', trigger: 'blur' },],
+    allGold: [{ required: true, message: '请输入消费金币总数', trigger: 'blur' },],
+    
+   
+})
+
+// 查找客户信息的方法
+const user = ref({});
+const getUser = async function (homilyId) {
+    try {
+        // 发送POST请求
+        const result = await axios.post('http://192.168.8.93:10020/recharge/user', {homilyId: homilyId});
+
+        // 将响应结果存储到响应式数据中
+        console.log('请求成功', result);
+        // 存储表格数据
+        user.value = result.data.data[0];
+        console.log('用户信息', user.value);
+ 
+    } catch (error) {
+        console.log('请求失败', error);
+        // 在这里可以处理错误逻辑，比如显示错误提示等
+    }
+}
+
+// 这是查询活动的接口
+const activity = ref([]); 
+const getActivity = async function () {
+    try {
+        // 发送POST请求
+        const result = await axios.post('http://192.168.8.93:10010/recharge/activity/select', {});
+
+        // 将响应结果存储到响应式数据中
+        console.log('请求成功', result);
+        // 存储表格数据
+        activity.value = result.data.data;
+        console.log('活动信息', activity.value);
+    } catch (error) {
+        console.log('请求失败', error);
+        // 在这里可以处理错误逻辑，比如显示错误提示等
+    }
+}
+getActivity();
+
+// 这是查询货币的接口
+const currency = ref([]); 
+const getCurrency = async function () {
+    try {
+
+        // 发送POST请求
+        const result = await axios.post('http://192.168.8.174:10010/rates/search',{});
+
+        // 将响应结果存储到响应式数据中
+        console.log('货币请求成功', result);
+        // 存储表格数据
+        currency.value = result.data.data;
+        console.log('tableData', currency.value);
+        // 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等
+        
+    } catch (error) {
+        console.log('请求失败', error);
+        // 在这里可以处理错误逻辑，比如显示错误提示等
+    }
+}
+getCurrency();
+
+
+// 这是添加上传图片的接口
+const imageUrl = ref('')
+
+// 上传图片成功的回调函数
+const handleAvatarSuccess = (response, uploadFile) => {
+  imageUrl.value = URL.createObjectURL(uploadFile.raw);
+  console.log('图片上传成功', response, uploadFile);
+  addConsume.value.rechargeVoucher = 'http://192.168.8.93:10010/upload/' + response.data;
+  console.log('图片名称', addConsume.value.rechargeVoucher);
+};
+// 上传图片之前的校验函数
+const beforeAvatarUpload = (rawFile) => {
+  if (rawFile.type !== 'image/jpeg') {
+    ElMessage.error('Avatar picture must be JPG format!');
+    return false;
+  } else if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error('Avatar picture size can not exceed 2MB!');
+    return false;
+  }
+  return true;
+};
+
+//充值方式条目
+const options = [
+  {
+    value: '现金充值',
+    label: '现金充值',
+  },
+  {
+    value: '龙鳞卡',
+    label: '龙鳞卡',
+  },
+  {
+    value: '弘粉卡',
+    label: '弘粉卡',
+  },
+  
+]
+
+const calculatedFreeGold = computed(() => {
+  return addConsume.value.paidGold * addConsume.value.activityId;
+});
+
+watch(calculatedFreeGold, (newVal) => {
+  addConsume.value.freeGold = newVal;
+});
 </script>
 
 <template>
-    <div>
-        <h1>Add Consume</h1>
+  <div style="margin-bottom: 20px;">
+    新增消费
   </div>
+
+  <el-form :model="addConsume" ref="Ref" :rules="rules" label-width="auto" style="max-width: 750px">
+    <el-form-item prop="homilyId" label="精网号">
+      <el-input v-model="addConsume.homilyId" style="width: 220px;" />
+      <el-button type="primary" @click="getUser(addConsume.homilyId)" style="margin-left: 20px;">查询</el-button>
+    </el-form-item>
+    <el-form-item prop="goods" label="商品名称">
+      <el-select v-model="addConsume.goods" placeholder="请选择" style="width: 300px">
+        <el-option
+        v-for="item in activity"
+        :key="item.value"
+        :label="item.activityName"
+        :value="item.rechargeRatio"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item prop="allGold" label="消费金币总数">
+        <el-input v-model="addConsume.paidGold" style="width: 100px;"/>
+    </el-form-item>
+    <el-form-item prop="taskCoin" label="任务金币" style="float: left; ">
+        <el-input disabled v-model="addConsume.taskCoin" style="width: 100px;margin-left: -5px;"/>
+        <p style="margin-right: 0px;">个</p>
+      </el-form-item>
+      <el-form-item prop="freeCoin" label="免费金币" style="float: left;margin-left: -10px;margin-right: -10px;">
+          <el-input disabled v-model="addConsume.freeCoin" style="width: 100px;margin-left: -5px;"/>
+          <p style="margin-right: 0px;">个</p>
+      </el-form-item>
+      <el-form-item prop="rechargeCoin" label="充值金币" style="margin-left: -20px;">
+          <el-input disabled v-model="addConsume.rechargeCoin" style="width: 100px;margin-left: -5px;"/>
+          <p style="margin-right: 20px;">个</p>
+      </el-form-item>
+    <el-form-item prop="remark" label="备注">
+      <el-input
+    v-model="addConsume.remark"
+    style="width: 300px"
+    :rows="2"
+    maxlength="100"
+    show-word-limit
+    type="textarea"
+  />
+    </el-form-item>
+    <el-form-item prop="commitName" label="提交人">
+      <el-input style="width: 300px" value="张三" disabled placeholder="提交人姓名"/>
+    </el-form-item>
+  </el-form>
+  
+    <el-button @click="closeAddActivityVisible" style="margin-left: 280px;">取消</el-button>
+    <el-button type="primary" @click="addBefore">
+        提交
+    </el-button>
+
+   <!-- 客户信息栏 -->
+   <el-card style="width: 700px;float: right;margin-top: -330px;margin-right: 100px;">
+    <el-form :model="user" label-width="auto" style="max-width: 600px" label-position="left">
+     <el-text size="large" style="margin-left: 20px;">客户信息</el-text>
+      <el-row style="margin-top: 20px;">
+        <el-col :span="12">
+      <el-form-item label="姓名:" >
+          <p>{{user.name}}</p>
+      </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="历史金币总数" >
+          </el-form-item>
+            </el-col>
+        <el-col :span="12">
+      <el-form-item label="精网号" >
+        <p>{{user.homilyId}}</p>
+      </el-form-item>
+    </el-col>
+    <el-col :span="12">
+      <el-form-item label="当前金币总数" >
+      </el-form-item>
+        </el-col>
+    <el-col :span="12">
+      <el-form-item label="首次充值日期">
+      </el-form-item>
+    </el-col>
+    <el-col :span="12">
+      <el-form-item label="充值次数" >
+      </el-form-item>
+        </el-col>
+    <el-col :span="12">
+      <el-form-item label="负责客服" >
+      </el-form-item>
+    </el-col>
+    <el-col :span="12">
+      <el-form-item label="消费次数" >
+      </el-form-item>
+        </el-col>
+    <el-col :span="12">
+      <el-form-item label="所属门店" >
+      </el-form-item>
+    </el-col>
+    <el-col :span="12">
+      <el-form-item label="待审核" >
+      </el-form-item>
+        </el-col>
+    </el-row>
+
+     
+
+    </el-form>
+  </el-card>
 </template>
 
 <style scoped>
+  p{
+    margin: 0px;
+  }
+  .el-form-item {
+  margin-left: 50px;
+
+}
+
+/* 上传图片的格式 */
+.avatar-uploader .avatar {
+  width: 50px;
+  height: 50px;
+  display: block;
+}
+</style>
+
+<style>
+  .avatar-uploader .el-upload {
+    border: 1px dashed var(--el-border-color);
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: var(--el-transition-duration-fast);
+  }
+  
+  .avatar-uploader .el-upload:hover {
+    border-color: var(--el-color-primary);
+  }
+  
+  .el-icon.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 50px;
+    height: 50px;
+    text-align: center;
 
+  }
   </style>

vue/gold-system/src/views/consume/allConsume.vue

@@ -1,13 +1,424 @@
 <script setup>
+import { ref, onMounted, reactive, computed } from "vue";
+import ElementPlus from "element-plus";
+import { AiFillRead } from "vue-icons-plus/ai";
+import axios from "axios";
+// 变量
+// 充值明细表格
+const tableData = ref([]);
+// 搜索======================================
+// 搜索detailVo
+const detailVo = ref({});
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 5,
+});
+//分页总条目
+const total = ref(100);
+// 搜索对象时间
+const getTime = ref([]);
+// 搜索活动列表
+const activity = ref([]);
+// 所有信息
+const allData = ref([]);
+// 搜索地区列表
+const area = ref([]);
 
+//标签页默认高亮选项
+const activeName = ref("all");
+
+// 支付方式选项
+const payWay = [
+  {
+    value: "微信",
+    label: "微信",
+  },
+  {
+    value: "支付宝",
+    label: "支付宝",
+  },
+  {
+    value: "银联",
+    label: "银联",
+  },
+  {
+    value: "信用卡",
+    label: "信用卡",
+  },
+  {
+    value: "借记卡",
+    label: "借记卡",
+  },
+];
+
+//表格高度
+const tableHeight = computed(function () {
+  return (getObj.value.pageSize + 2) * 60 + "px";
+});
+
+// 方法
+// 搜索==============================================================
+// 搜索方法
+const get = async function (val) {
+  try {
+    // 搜索参数页码赋值
+    if (typeof val === "number") {
+      getObj.value.pageNum = val;
+    }
+    // 搜索参数时间赋值
+    if (getTime.value != null) {
+      if (getTime.value.startDate != "" && getTime.value.endDate != "") {
+        detailVo.value.startDate = getTime.value[0];
+        detailVo.value.endDate = getTime.value[1];
+      }
+    } else {
+      detailVo.value.startDate = "";
+      detailVo.value.endDate = "";
+    }
+    console.log("搜索参数", getObj.value);
+    // 发送POST请求
+    const result = await axios.post(
+      "http://192.168.8.147:10030/consume/select",
+      { ...getObj.value, detailVo: { ...detailVo.value } }
+    );
+
+    // 将响应结果存储到响应式数据中
+    console.log("请求成功", result);
+    // 存储表格数据
+    tableData.value = result.data.data.list;
+    console.log("tableData", tableData.value);
+    // 存储分页总数
+    total.value = result.data.data.total;
+    console.log("total", total.value);
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+// 重置
+const reset = function () {
+  detailVo.value.activityId = "";
+  detailVo.value.payWay = "";
+  detailVo.value.area = "";
+  detailVo.value.startDate = "";
+  detailVo.value.endDate = "";
+  get();
+};
+// 今天
+const getToday = function () {
+  const today = new Date();
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate()
+  );
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  );
+  getTime.value = [startDate, endDate];
+  console.log("getTime", getTime.value);
+  get();
+};
+// 昨天
+const getYesterday = function () {
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
+  const startDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate()
+  );
+  const endDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate() + 1
+  );
+  getTime.value = [startDate, endDate];
+  console.log("getTime", getTime.value);
+  get();
+};
+// 近7天
+const get7Days = function () {
+  const today = new Date();
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() - 6
+  );
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  );
+  getTime.value = [startDate, endDate];
+  console.log("getTime", getTime.value);
+  get();
+};
+//全部充值明细
+const adminAll = function () {
+  console.log("adminAll");
+  detailVo.value.status = "";
+  get();
+};
+//待审核充值明细
+const adminWait = function () {
+  detailVo.value.status = 0;
+  get();
+  console.log("adminWait");
+};
+//已通过充值明细
+const adminPass = function () {
+  detailVo.value.status = 1;
+  get();
+  console.log("adminPass");
+};
+//已驳回充值明细
+const adminReject = function () {
+  detailVo.value.status = 2;
+  get();
+  console.log("adminReject");
+};
+//点击标签页
+const handleClick = function (tab, event) {
+  if (tab.props.name === "all") {
+    adminAll();
+  } else if (tab.props.name === "wait") {
+    adminWait();
+  } else if (tab.props.name === "pass") {
+    adminPass();
+  } else if (tab.props.name === "reject") {
+    adminReject();
+  }
+};
+// 获取活动名称
+const getActivity = async function () {
+  try {
+    // 发送POST请求
+    const result = await axios.post(
+      "http://192.168.8.93:10010/recharge/activity/select",
+      {}
+    );
+
+    // 将响应结果存储到响应式数据中
+    console.log("请求成功", result);
+    // 存储表格数据
+    activity.value = result.data.data;
+    console.log("activity", activity.value);
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+// 获取地区
+const getArea = async function () {
+  try {
+    // 发送POST请求
+    const result = await axios.post(
+      "http://192.168.8.93:10010/recharge/recharge",
+      {}
+    );
+    // 将响应结果存储到响应式数据中
+    console.log("请求成功", result);
+    // 存储全部数据
+    allData.value = result.data.data;
+    console.log("allData", allData.value);
+    // 分离并去重地区列表
+    area.value = [...new Set(allData.value.map((item) => item.area))];
+    console.log("地区", area.value);
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+// 挂载
+onMounted(async function () {
+  await get();
+  getActivity();
+  await getArea();
+});
 </script>
 
 <template>
+  <el-row>
+    <el-col>
+      <el-card style="margin-bottom: 20px">
+        <el-row style="margin-bottom: 10px">
+          <el-col :span="8">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">商品名称：</el-text>
+              <el-select
+                v-model="detailVo.activityId"
+                placeholder="请选择活动名称"
+                size="large"
+                style="width: 240px"
+              >
+                <el-option
+                  v-for="item in activity"
+                  :key="item.activityId"
+                  :label="item.activityName"
+                  :value="item.activityId"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">消费平台：</el-text>
+              <el-select
+                v-model="detailVo.payWay"
+                placeholder="请选择支付方式"
+                size="large"
+                style="width: 240px"
+              >
+                <el-option
+                  v-for="item in payWay"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">消费类型：</el-text>
+              <el-select
+                v-model="detailVo.area"
+                placeholder="请选择所属地区"
+                size="large"
+                style="width: 240px"
+              >
+                <el-option
+                  v-for="item in area"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="21">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">充值时间：</el-text>
+              <el-date-picker
+                v-model="getTime"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="起始时间"
+                end-placeholder="结束时间"
+              />
+              <el-button style="margin-left: 10px" @click="getToday()"
+                >今</el-button
+              >
+              <el-button @click="getYesterday()">昨</el-button>
+              <el-button @click="get7Days()">近7天</el-button>
+            </div>
+          </el-col>
+          <el-col :span="3">
+            <div class="head-card-btn">
+              <el-button @click="reset()">重置</el-button>
+              <el-button type="primary" @click="get()">查询</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-card>
         <div>
-        <h1>All Consume</h1>
+          <el-table :data="tableData" :height="tableHeight" style="width: 100%">
+            <el-table-column prop="username" label="姓名" width="80px" />
+            <el-table-column prop="homilyId" label="精网号" width="180px" />
+            <el-table-column prop="area" label="所属地区" width="120px" />
+            <el-table-column prop="goods" label="商品名称" width="200px" />
+            <el-table-column
+              prop="consumPlatform"
+              label="消费平台"
+              width="120px"
+            />
+            <el-table-column
+              prop="consumeType"
+              label="消费类型"
+              width="120px"
+            />
+            <el-table-column
+              prop="rechargeTotal"
+              label="消费金币总数"
+              width="180px"
+            />
+            <el-table-column prop="taskCoin" label="任务金币" width="120px" />
+            <el-table-column prop="freeCoin" label="免费金币" width="120px" />
+            <el-table-column
+              prop="rechargeCoin"
+              label="充值金币"
+              width="120px"
+            />
+            <el-table-column
+              prop="remark"
+              label="备注"
+              width="200px"
+              show-overflow-tooltip
+            />
+            <el-table-column prop="conmmitName" label="提交人" width="120px" />
+            <el-table-column prop="createTime" label="消费时间" width="180px" />
+            <el-table-column prop="operation" label="操作">
+              <template #default="scope">
+                <el-popconfirm
+                  title="确定将此条活动删除吗？"
+                  @confirm="delConfirm"
+                >
+                  <template #reference>
+                    <el-button type="primary" text @click="del(scope.row)">
+                      删除
+                    </el-button>
+                  </template>
+                  <template #actions="{ confirm, cancel }">
+                    <el-button size="small" @click="cancel">取消</el-button>
+                    <el-button type="primary" size="small" @click="confirm">
+                      确定
+                    </el-button>
+                  </template>
+                </el-popconfirm>
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
+
+        <!-- 分页 -->
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="total"
+          :page-size="getObj.pageSize"
+          :current-page="getObj.pageNum"
+          @current-change="get"
+        />
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <style scoped>
+.status {
+  display: flex;
+}
+
+.head-card {
+  display: flex;
+}
+
+.head-card-element {
+  margin-right: 20px;
+}
 
+.head-card-btn {
+  margin-left: auto;
+}
 </style>

vue/gold-system/src/views/managerecharge/rate.vue

@@ -1,11 +1,11 @@
 <script setup>
-  import { ref, onMounted,computed,reactive} from 'vue'
-  import { ElMessageBox } from 'element-plus'
-  import axios from 'axios'
-  import { createApp } from 'vue';
+import { ref, onMounted, computed, reactive } from "vue";
+import { ElMessageBox } from "element-plus";
+import axios from "axios";
+import { createApp } from "vue";
 
-  const regeAdd = ref(false)
-  const regeEdit = ref(false)
+const regeAdd = ref(false);
+const regeEdit = ref(false);
 
 //汇率表格数据
 const tableData = ref([]);
@@ -13,134 +13,148 @@
 const getObj = ref({
   pageNum: 1,
   pageSize: 5,
-})
+});
 //分页总条目
 const get = async function () {
   try {
-        console.log('搜索参数', getObj.value);
+    console.log("搜索参数", getObj.value);
     // 发送POST请求
-        const result = await axios.post('http://192.168.8.174:10010/rates/search', {
+    const result = await axios.post("http://192.168.8.174:10010/rates/search", {
       ...getObj.value,
       rate: { ...value1.value },
     });
 
     // 将响应结果存储到响应式数据中
-        console.log('请求成功', result);
+    console.log("请求成功", result);
     // 存储表格数据
     tableData.value = result.data.data.list;
-        console.log('tableData', tableData.value);
+    console.log("tableData", tableData.value);
     // 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等
     getObj.value.pageNum = result.data.data.pageNum;
     getObj.value.pageSize = result.data.data.pageSize;
     getObj.value.total = result.data.data.total;
   } catch (error) {
-        console.log('请求失败', error);
+    console.log("请求失败", error);
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
-}
+};
 
 // 添加方法
-  const rateAdd = ref({})
+const rateAdd = ref({});
 const addRate = async function () {
-
   try {
-        console.log('搜索参数', getObj.value);
+    console.log("搜索参数", getObj.value);
     // 发送POST请求
-        const result = await axios.post('http://192.168.8.174:10010/rates/add', rateAdd.value);
+    const result = await axios.post(
+      "http://192.168.8.174:10010/rates/add",
+      rateAdd.value
+    );
 
     // 将响应结果存储到响应式数据中
-        console.log('请求成功', result);
+    console.log("请求成功", result);
     get();
   } catch (error) {
-        console.log('请求失败', error);
+    console.log("请求失败", error);
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
- 
-}
+};
 const add = () => {
   Ref.value.validate(async (valid) => {
     if (valid) {
-    ElMessageBox.confirm('确认添加？').then(() => {
+      ElMessageBox.confirm("确认添加？")
+        .then(() => {
           addRate();
-      rateAdd.value = {}
+          rateAdd.value = {};
           value1.value = {
-        startTime: '',
-        endTime: '',
+            startTime: "",
+            endTime: "",
           };
-      regeAdd.value = false
-    }).catch(() => {
-      regeAdd.value = false
-    }) } else {
+          regeAdd.value = false;
+        })
+        .catch(() => {
+          regeAdd.value = false;
+        });
+    } else {
       //提示
       ElMessage({
-                type: 'error',
-                message: '请检查输入内容',
-            })
-        }
-
-    })
+        type: "error",
+        message: "请检查输入内容",
+      });
     }
-
+  });
+};
 
 // 编辑方法
-const rateEdit = ref({})
+const rateEdit = ref({});
 //查询已有的数据
 const getEditData = async function (row) {
   try {
-        console.log('搜索参数', getObj.value);
+    console.log("搜索参数", getObj.value);
     // 发送POST请求
-        const result = await axios.post('http://192.168.8.174:10010/rates/search', {rate:{rateId:row.rateId}});
+    const result = await axios.post("http://192.168.8.174:10010/rates/search", {
+      rate: { rateId: row.rateId },
+    });
 
     // 将响应结果存储到响应式数据中
-        console.log('请求成功', result);
+    console.log("请求成功", result);
     // 存储表格数据
     rateEdit.value = result.data.data[0];
- 
   } catch (error) {
-        console.log('请求失败', error);
+    console.log("请求失败", error);
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
-}
+};
 const editRate = async function () {
   try {
-        console.log('搜索参数', rateEdit.value);
+    console.log("搜索参数", rateEdit.value);
     // 发送POST请求
-        const result = await axios.post('http://192.168.8.174:10010/rates/update', rateEdit.value);
+    const result = await axios.post(
+      "http://192.168.8.174:10010/rates/update",
+      rateEdit.value
+    );
     // 将响应结果存储到响应式数据中
-        console.log('请求成功', result);
+    console.log("请求成功", result);
     get();
   } catch (error) {
-        console.log('请求失败', error);
+    console.log("请求失败", error);
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
-}
+};
 const edit = () => {
-    ElMessageBox.confirm('确认修改？').then(() => {
+  ElMessageBox.confirm("确认修改？")
+    .then(() => {
       editRate();
-      regeEdit.value = false
-    }).catch(() => {
-      regeEdit.value = false
+      regeEdit.value = false;
     })
-  }
+    .catch(() => {
+      regeEdit.value = false;
+    });
+};
 
 // 删除方法
+const del = function (row) {
+  delObj.value.activityId = row.activityId;
+  console.log("delObj", delObj.value);
+};
 const deleteRate = async function (row) {
   try {
     // 发送POST请求
-        const result = await axios.post('http://192.168.8.174:10010/rates/delete/ '+ row.rateId);
+    const result = await axios.post(
+      "http://192.168.8.174:10010/rates/delete/ " + row.rateId
+    );
     // 将响应结果存储到响应式数据中
-        console.log('请求成功', result);
+    console.log("请求成功", result);
     get();
   } catch (error) {
-        console.log('请求失败', error);
+    console.log("请求失败", error);
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
-}
+};
 
 // 挂载
 onMounted(async function () {
   get();
-})
+});
 //分页
 function handlePageChange(currentPage, pageSize) {
   get();
@@ -148,94 +162,97 @@ function handlePageChange(currentPage,pageSize){
 //货币条目
 const options = [
   {
-    value: 'USD',
-    label: 'USD',
+    value: "USD",
+    label: "USD",
   },
   {
-    value: 'EUR',
-    label: 'EUR',
+    value: "EUR",
+    label: "EUR",
   },
   {
-    value: 'JPY',
-    label: 'JPY',
+    value: "JPY",
+    label: "JPY",
   },
   {
-    value: 'GBP',
-    label: 'GBP',
+    value: "GBP",
+    label: "GBP",
   },
   {
-    value: 'AUD',
-    label: 'AUD',
+    value: "AUD",
+    label: "AUD",
   },
-]
+];
 
 //时间选择器
 const value1 = ref({
-  startTime: '',
-  endTime: '',
+  startTime: "",
+  endTime: "",
 }); // 时间数组
 function handleDateChange(value) {
   if (value && value.length === 2) {
+    formatDate(value[0]);
+    formatDate(value[1]);
     value1.value.startTime = value[0]; // 开始日期
     value1.value.endTime = value[1]; // 结束日期
   }
   console.log(value1);
 }
 
-
 function formatDate(value) {
-    if (!value) return '';
+  if (!value) return "";
   const date = new Date(value);
   const year = date.getFullYear();
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const day = date.getDate().toString().padStart(2, '0');
-    const hours = date.getHours().toString().padStart(2, '0');
-    const minutes = date.getMinutes().toString().padStart(2, '0');
-    const seconds = date.getSeconds().toString().padStart(2, '0');
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  const day = date.getDate().toString().padStart(2, "0");
+  const hours = date.getHours().toString().padStart(2, "0");
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+  const seconds = date.getSeconds().toString().padStart(2, "0");
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 }
 
-
 //表格高度
 const tableHeight = computed(function () {
-    return (getObj.value.pageSize + 1) * 50 + 'px';
+  return (getObj.value.pageSize + 1) * 50 + "px";
 });
 
 // 新增数据规则
 // 表单验证ref
 const Ref = ref(null);
 const handleStartTimeChange = () => {
-    Ref.value.validateField('endTime');
+  Ref.value.validateField("endTime");
 };
 const checkStartTime = function (rule, value, callback) {
   if (value <= new Date()) {
-        callback(new Error('开始时间不能小于当前时间'))
+    callback(new Error("开始时间不能小于当前时间"));
   } else {
-        callback()
-    }
+    callback();
   }
+};
 const checkEndTime = function (rule, value, callback) {
   if (value <= new Date()) {
-        callback(new Error('结束时间不能小于当前时间'))
+    callback(new Error("结束时间不能小于当前时间"));
   } else if (value <= addObj.value.startTime) {
-        callback(new Error('结束时间不能小于开始时间'))
+    callback(new Error("结束时间不能小于开始时间"));
   } else {
-        callback()
-    }
+    callback();
   }
+};
 const rules = reactive({
-     currency: [{ required: true, message: '请选择货币名称', trigger: 'blur' },],
-     exchangeRate: [{ required: true, message: '请输入汇率', trigger: 'blur' },],
-     updateName: [{ required: true, message: '请输入添加人', trigger: 'blur' },],
+  currency: [{ required: true, message: "请选择货币名称", trigger: "blur" }],
+  exchangeRate: [{ required: true, message: "请输入汇率", trigger: "blur" }],
+  adminName: [{ required: true, message: "请输入添加人", trigger: "blur" }],
   startTime: [
-        { required: true, message: '请选择开始时间', trigger: 'blur' },
-        { validator: checkStartTime, trigger: 'blur' },
+    { required: true, message: "请选择开始时间", trigger: "blur" },
+    { validator: checkStartTime, trigger: "blur" },
   ],
   endTime: [
-        { required: true, message: '请选择结束时间', trigger: 'blur' },
-        { validator: checkEndTime, trigger: 'blur' },
+    { required: true, message: "请选择结束时间", trigger: "blur" },
+    { validator: checkEndTime, trigger: "blur" },
   ],
-})
+});
+function handledelete() {
+  value1.value = {};
+}
 </script>
 
 <template>
@@ -257,27 +274,49 @@ const rules = reactive({
             value-format="YYYY-MM-DD"
           />
           <!-- 按钮 -->
-              <el-button class="button-item" type="primary" style="float:right" @click="get">查询</el-button>
-              <el-button class="button-item"  style="float:right" @click="handledelete">重置</el-button>
+          <el-button
+            class="button-item"
+            type="primary"
+            style="float: right"
+            @click="get"
+            >查询</el-button
+          >
+          <el-button
+            class="button-item"
+            style="float: right"
+            @click="handledelete"
+            >重置</el-button
+          >
         </div>
       </el-card>
-
     </el-col>
   </el-row>
 
-
   <el-row>
     <el-col>
       <el-card class="box-card" style="max-width: 100%">
         <!-- 添加 -->
         <div class="add-item">
-              <el-button style="color: #048EFB; border:1px solid #048EFB" @click=" regeAdd = true">新增汇率</el-button>
+          <el-button
+            style="color: #048efb; border: 1px solid #048efb"
+            @click="regeAdd = true"
+            >新增汇率</el-button
+          >
         </div>
         <!-- 表格 -->
         <div>
-              <el-table :data="tableData" v-if="tableData.flag=1"  :height="tableHeight" style="width: 100%" >
+          <el-table
+            :data="tableData"
+            v-if="(tableData.flag = 1)"
+            :height="tableHeight"
+            style="width: 100%"
+          >
             <el-table-column prop="currency" label="货币名称" :span="3" />
-                <el-table-column prop="exchangeRate" label="汇率" :span="3"/>
+            <el-table-column prop="exchangeRate" label="汇率" :span="3">
+              <template #default="scope">
+                <span>{{ scope.row.exchangeRate }} : 1新币</span>
+              </template>
+            </el-table-column>
 
             <el-table-column prop="createTime" label="添加时间" :span="5">
               <template #default="scope">
@@ -289,35 +328,54 @@ const rules = reactive({
                 <span>{{ formatDate(scope.row.updateTime) }}</span>
               </template>
             </el-table-column>
-                <el-table-column prop="updateName" label="更新人" :span="4"/>
+            <el-table-column prop="adminName" label="更新人" :span="4" />
             <el-table-column label="操作" :span="4">
               <template #default="scope">
-                    <el-button type="text" @click="regeEdit=true; getEditData(scope.row)">编辑</el-button>
-                  <el-button type="text" @click="deleteRate(scope.row)">删除</el-button>
+                <el-button
+                  type="text"
+                  @click="
+                    regeEdit = true;
+                    getEditData(scope.row);
+                  "
+                  >编辑</el-button
+                >
+                <el-popconfirm
+                  title="确定将此条活动删除吗？"
+                  @confirm="deleteRate(scope.row)"
+                >
+                  <template #reference>
+                    <el-button type="primary" text @click="del(scope.row)">
+                      删除
+                    </el-button>
+                  </template>
+                  <template #actions="{ confirm, cancel }">
+                    <el-button size="small" @click="cancel">取消</el-button>
+                    <el-button type="primary" size="small" @click="confirm">
+                      确定
+                    </el-button>
+                  </template>
+                </el-popconfirm>
               </template>
-                  
             </el-table-column>
           </el-table>
         </div>
         <!-- 分页 -->
         <div class="pagination">
-              <el-pagination background layout="prev, pager, next" 
+          <el-pagination
+            background
+            layout="prev, pager, next"
             v-model:current-page="getObj.pageNum"
             v-model:page-size="getObj.pageSize"
             :total="getObj.total"
-              @change="handlePageChange" />
+            @change="handlePageChange"
+          />
         </div>
       </el-card>
-          
     </el-col>
   </el-row>
 
   <!-- 这是添加弹窗 -->
-      <el-dialog
-      v-model="regeAdd"
-      title="新增汇率"
-      width="500"
-    >
+  <el-dialog v-model="regeAdd" title="新增汇率" width="500">
     <template #footer>
       <el-form
         ref="Ref"
@@ -330,7 +388,11 @@ const rules = reactive({
         status-icon
       >
         <el-form-item prop="currency" label="货币名称:">
-          <el-select v-model.number="rateAdd.currency" placeholder="请选择" style="width: 240px">
+          <el-select
+            v-model.number="rateAdd.currency"
+            placeholder="请选择"
+            style="width: 240px"
+          >
             <el-option
               v-for="item in options"
               :key="item.value"
@@ -340,18 +402,19 @@ const rules = reactive({
           </el-select>
         </el-form-item>
         <el-form-item prop="exchangeRate" label="汇率:">
-          <el-input v-model="rateAdd.exchangeRate" style="width: 120px;"/><p class="unit">:1</p>
+          <el-input v-model="rateAdd.exchangeRate" style="width: 120px" />
+          <p class="unit">:1</p>
           <p>(提示：当前规则每 5 元人民币可兑换 1 新币)</p>
         </el-form-item>
-        <el-form-item prop="updateName" label="提交人:">
-          <el-input v-model="rateAdd.updateName" style="width: 240px;"/>
+        <el-form-item prop="adminName" label="提交人:">
+          <el-input v-model="rateAdd.adminName" style="width: 240px" />
         </el-form-item>
         <el-form-item prop="startTime" label="开始时间:">
           <el-date-picker
             v-model="rateAdd.startTime"
             type="date"
             placeholder="请选择时间"
-        :default-value="new Date"
+            :default-value="new Date()"
             @change="handleStartTimeChange"
             value-format="YYYY-MM-DD"
           />
@@ -361,7 +424,7 @@ const rules = reactive({
             v-model="rateAdd.endTime"
             type="date"
             placeholder="请选择时间"
-          :default-value="new Date"
+            :default-value="new Date()"
             value-format="YYYY-MM-DD"
           />
         </el-form-item>
@@ -376,11 +439,7 @@ const rules = reactive({
   </el-dialog>
 
   <!-- 这是编辑弹窗 -->
-     <el-dialog
-     v-model="regeEdit"
-     title="修改汇率"
-     width="500"
-   >
+  <el-dialog v-model="regeEdit" title="修改汇率" width="500">
     <template #footer>
       <el-form
         ref="ruleFormRef"
@@ -393,7 +452,11 @@ const rules = reactive({
         status-icon
       >
         <el-form-item label="货币名称:">
-         <el-select v-model="rateEdit.currency" placeholder="请选择" style="width: 240px">
+          <el-select
+            v-model="rateEdit.currency"
+            placeholder="请选择"
+            style="width: 240px"
+          >
             <el-option
               v-for="item in options"
               :key="item.value"
@@ -403,11 +466,12 @@ const rules = reactive({
           </el-select>
         </el-form-item>
         <el-form-item label="汇率:">
-         <el-input v-model="rateEdit.exchangeRate" style="width: 120px;"/><p class="unit">:1</p>
+          <el-input v-model="rateEdit.exchangeRate" style="width: 120px" />
+          <p class="unit">:1</p>
           <p>(提示：当前规则每 5 元人民币可兑换 1 新币)</p>
         </el-form-item>
         <el-form-item label="提交人:">
-         <el-input v-model="rateEdit.updateName" style="width: 240px;"/>
+          <el-input v-model="rateEdit.adminName" style="width: 240px" />
         </el-form-item>
         <el-form-item>
           <div class="dialog-footer">
@@ -418,20 +482,15 @@ const rules = reactive({
       </el-form>
     </template>
   </el-dialog>
-
-
 </template>
 
-
 <style scoped>
-
 p {
-  margin: 0px
+  margin: 0px;
 }
 
 .el-form-item {
   margin-left: 70px;
-
 }
 
 .ad {

vue/gold-system/src/views/recharge/addRecharge.vue

@@ -1,156 +1,162 @@
 <script setup>
-    import { reactive } from 'vue';
-    import { ref,computed,watch } from 'vue'
-    import { ElMessage } from 'element-plus'
-    import { Plus } from '@element-plus/icons-vue'
-    import axios from 'axios'
-    import { ElMessageBox } from 'element-plus'
-
-
-
-    
-
-
+import { reactive } from "vue";
+import { ref, computed, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { Plus } from "@element-plus/icons-vue";
+import axios from "axios";
+import { ElMessageBox } from "element-plus";
 
 // 这是添加充值信息的表单
 const addRecharge = ref({
-    rechargeVoucher: '',
-    rechargeWay: '客服充值'
-
+  rechargeVoucher: "",
+  rechargeWay: "客服充值",
 });
 // 这是添加充值信息的接口
 const add = async function () {
   try {
     // 发送POST请求
-        const result = await axios.post('http://192.168.8.93:10010/recharge/recharge/add', addRecharge.value);
+    const result = await axios.post(
+      "http://192.168.8.93:10010/recharge/recharge/add",
+      addRecharge.value
+    );
 
     // 将响应结果存储到响应式数据中
-        console.log('请求成功', result);
+    console.log("请求成功", result);
     // 存储表格数据
-        console.log('用户信息', user.value);
+    console.log("用户信息", user.value);
   } catch (error) {
-        console.log('请求失败', error);
+    console.log("请求失败", error);
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
-}
+};
 const addBefore = () => {
   Ref.value.validate(async (valid) => {
     if (valid) {
-    ElMessageBox.confirm('确认添加？').then(() => {
+      ElMessageBox.confirm("确认添加？")
+        .then(() => {
           add();
-      console.log('添加成功');
-      imageUrl.value = '';
+          console.log("添加成功");
+          imageUrl.value = "";
           addRecharge.value = {};
-    }).catch(() => {
-      console.log('取消添加');
-    }) } else {
+        })
+        .catch(() => {
+          console.log("取消添加");
+        });
+    } else {
       //提示
       ElMessage({
-                type: 'error',
-                message: '请检查输入内容',
-            })
-        }
-    })
+        type: "error",
+        message: "请检查输入内容",
+      });
     }
+  });
+};
 
 // 表单验证
 // 开始时间改变时，重新验证结束时间
 const Ref = ref(null);
 const checkEndTime = function (rule, value, callback) {
   if (value <= new Date()) {
-        callback(new Error('付款时间不能小于当前时间'))
-    } 
+    callback(new Error("付款时间不能小于当前时间"));
   }
+};
 const rules = reactive({
-    homilyId: [{ required: true, message: '请输入精网号', trigger: 'blur' },],
-    activityId: [{ required: true, message: '请选择活动名称', trigger: 'blur' },],
-    paidGold: [{ required: true, message: '请输入充值金币', trigger: 'blur' },],
-    rechargeGold: [{ required: true, message: '请输入充值金额', trigger: 'blur' },],
-    payWay: [{ required: true, message: '请选择付款方式', trigger: 'blur' },],
-    rechargeTime: [{ required: true, message: '请选择交款时间', trigger: 'blur' },
-    { validator: checkEndTime, trigger: 'blur' },
+  homilyId: [{ required: true, message: "请输入精网号", trigger: "blur" }],
+  activityId: [{ required: true, message: "请选择活动名称", trigger: "blur" }],
+  paidGold: [{ required: true, message: "请输入充值金币", trigger: "blur" }],
+  rechargeGold: [
+    { required: true, message: "请输入充值金额", trigger: "blur" },
   ],
-   
-})
+  payWay: [{ required: true, message: "请选择付款方式", trigger: "blur" }],
+  rechargeTime: [
+    { required: true, message: "请选择交款时间", trigger: "blur" },
+    { validator: checkEndTime, trigger: "blur" },
+  ],
+});
 
 // 查找客户信息的方法
 const user = ref({});
 const getUser = async function (homilyId) {
   try {
     // 发送POST请求
-        const result = await axios.post('http://192.168.8.93:10020/recharge/user', {homilyId: homilyId});
+    const result = await axios.post("http://192.168.8.93:10020/recharge/user", {
+      homilyId: homilyId,
+    });
 
     // 将响应结果存储到响应式数据中
-        console.log('请求成功', result);
+    console.log("请求成功", result);
     // 存储表格数据
     user.value = result.data.data[0];
-        console.log('用户信息', user.value);
- 
+    console.log("用户信息", user.value);
   } catch (error) {
-        console.log('请求失败', error);
+    console.log("请求失败", error);
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
-}
+};
 
 // 这是查询活动的接口
 const activity = ref([]);
 const getActivity = async function () {
   try {
     // 发送POST请求
-        const result = await axios.post('http://192.168.8.93:10010/recharge/activity/select', {});
+    const result = await axios.post(
+      "http://192.168.8.93:10010/recharge/activity/select",
+      {}
+    );
 
     // 将响应结果存储到响应式数据中
-        console.log('请求成功', result);
+    console.log("请求成功", result);
     // 存储表格数据
     activity.value = result.data.data;
-        console.log('活动信息', activity.value);
+    console.log("活动信息", activity.value);
   } catch (error) {
-        console.log('请求失败', error);
+    console.log("请求失败", error);
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
-}
+};
 getActivity();
 
 // 这是查询货币的接口
 const currency = ref([]);
 const getCurrency = async function () {
   try {
-
     // 发送POST请求
-        const result = await axios.post('http://192.168.8.174:10010/rates/search',{});
+    const result = await axios.post(
+      "http://192.168.8.174:10010/rates/search",
+      {}
+    );
 
     // 将响应结果存储到响应式数据中
-        console.log('货币请求成功', result);
+    console.log("货币请求成功", result);
     // 存储表格数据
     currency.value = result.data.data;
-        console.log('tableData', currency.value);
+    console.log("tableData", currency.value);
     // 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等
-        
   } catch (error) {
-        console.log('请求失败', error);
+    console.log("请求失败", error);
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
-}
+};
 getCurrency();
 
-
 // 这是添加上传图片的接口
-const imageUrl = ref('')
+const imageUrl = ref("");
 
 // 上传图片成功的回调函数
 const handleAvatarSuccess = (response, uploadFile) => {
   imageUrl.value = URL.createObjectURL(uploadFile.raw);
-  console.log('图片上传成功', response, uploadFile);
-  addRecharge.value.rechargeVoucher = 'http://192.168.8.93:10010/upload/' + response.data;
-  console.log('图片名称', addRecharge.value.rechargeVoucher);
+  console.log("图片上传成功", response, uploadFile);
+  addRecharge.value.rechargeVoucher =
+    "http://192.168.8.93:10010/upload/" + response.data;
+  console.log("图片名称", addRecharge.value.rechargeVoucher);
 };
 // 上传图片之前的校验函数
 const beforeAvatarUpload = (rawFile) => {
-  if (rawFile.type !== 'image/jpeg') {
-    ElMessage.error('Avatar picture must be JPG format!');
+  if (rawFile.type !== "image/jpeg") {
+    ElMessage.error("Avatar picture must be JPG format!");
     return false;
   } else if (rawFile.size / 1024 / 1024 > 2) {
-    ElMessage.error('Avatar picture size can not exceed 2MB!');
+    ElMessage.error("Avatar picture size can not exceed 2MB!");
     return false;
   }
   return true;
@@ -159,41 +165,56 @@ const beforeAvatarUpload = (rawFile) => {
 //充值方式条目
 const options = [
   {
-    value: '现金充值',
-    label: '现金充值',
+    value: "现金充值",
+    label: "现金充值",
   },
   {
-    value: '龙鳞卡',
-    label: '龙鳞卡',
+    value: "龙鳞卡",
+    label: "龙鳞卡",
   },
   {
-    value: '弘粉卡',
-    label: '弘粉卡',
+    value: "弘粉卡",
+    label: "弘粉卡",
   },
-  
-]
+];
 
 const calculatedFreeGold = computed(() => {
   return addRecharge.value.paidGold * addRecharge.value.activityId;
 });
-
-watch(calculatedFreeGold, (newVal) => {
+const calculatedRechargeGold = computed(() => {
+  addRecharge.value.paidGold * addRecharge.value.reteId;
+});
+watch(calculatedFreeGold, calculatedRechargeGold, (newVal) => {
   addRecharge.value.freeGold = newVal;
+  addRecharge.value.rechargeGold = newVal;
 });
 </script>
 
 <template>
-  <div>
-    新增充值
-  </div>
-
-  <el-form :model="addRecharge" ref="Ref" :rules="rules" label-width="auto" style="max-width: 600px">
+  <div>新增充值</div>
+
+  <el-form
+    :model="addRecharge"
+    ref="Ref"
+    :rules="rules"
+    label-width="auto"
+    style="max-width: 600px"
+  >
     <el-form-item prop="homilyId" label="精网号">
-      <el-input v-model="addRecharge.homilyId" style="width: 220px;" />
-      <el-button type="primary" @click="getUser(addRecharge.homilyId)" style="margin-left: 20px;">查询</el-button>
+      <el-input v-model="addRecharge.homilyId" style="width: 220px" />
+      <el-button
+        type="primary"
+        @click="getUser(addRecharge.homilyId)"
+        style="margin-left: 20px"
+        >查询</el-button
+      >
     </el-form-item>
     <el-form-item prop="activityId" label="活动名称">
-      <el-select v-model="addRecharge.activityId" placeholder="请选择" style="width: 300px">
+      <el-select
+        v-model="addRecharge.activityId"
+        placeholder="请选择"
+        style="width: 300px"
+      >
         <el-option
           v-for="item in activity"
           :key="item.value"
@@ -203,25 +224,43 @@ watch(calculatedFreeGold, (newVal) => {
       </el-select>
     </el-form-item>
     <el-form-item prop="paidGold" label="充值金币">
-      <el-input v-model="addRecharge.paidGold" style="width: 100px;"/>
-      <p style="margin-right: 20px;">个</p>
+      <el-input v-model="addRecharge.paidGold" style="width: 100px" />
+      <p style="margin-right: 20px">个</p>
       <p>免费金币</p>
-      <el-input v-model="addRecharge.freeGold" disabled :value="addRecharge.paidGold * addRecharge.activityId" style="width: 100px" />
+      <el-input
+        v-model="addRecharge.freeGold"
+        disabled
+        :value="addRecharge.paidGold * addRecharge.activityId"
+        style="width: 100px"
+      />
       <p>个</p>
     </el-form-item>
-    <el-form-item prop="rechargeGold" label="充值金额">
-      <el-select v-model="addRecharge.rateId" placeholder="货币名称" style="width: 95px;margin-right: 5px;">
+    <el-form-item label="充值金额">
+      <el-select
+        prop="rechargeGold"
+        v-model="addRecharge.rateId"
+        placeholder="货币名称"
+        style="width: 95px; margin-right: 5px"
+      >
         <el-option
           v-for="item in currency"
           :key="item.value"
           :label="item.currency"
-        :value="item.rateId"
+          :value="item.exchangeRate"
         />
       </el-select>
-      <el-input  v-model="addRecharge.rechargeGold" style="width: 200px;"/>
+      <el-input
+        disabled
+        :value="addRecharge.paidGold * addRecharge.rateId"
+        style="width: 200px"
+      />
     </el-form-item>
     <el-form-item prop="payWay" label="收款方式">
-      <el-select v-model="addRecharge.payWay" placeholder="请选择" style="width: 300px">
+      <el-select
+        v-model="addRecharge.payWay"
+        placeholder="请选择"
+        style="width: 300px"
+      >
         <el-option
           v-for="item in options"
           :key="item.value"
@@ -234,10 +273,14 @@ watch(calculatedFreeGold, (newVal) => {
       <el-date-picker
         v-model="addRecharge.rechargeTime"
         type="date"
-        style="width: 300px;"
+        style="width: 300px"
       />
     </el-form-item>
-    <el-form-item prop="rechargeVoucher" label="交款凭证" style="margin-bottom: 5px;">
+    <el-form-item
+      prop="rechargeVoucher"
+      label="交款凭证"
+      style="margin-bottom: 5px"
+    >
       <el-upload
         class="avatar-uploader"
         action="http://192.168.8.93:10010/upload"
@@ -248,7 +291,9 @@ watch(calculatedFreeGold, (newVal) => {
         <img v-if="imageUrl" :src="imageUrl" class="avatar" />
         <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
       </el-upload>
-    <p style="margin-left: 10px;color: rgb(177, 176, 176);">仅支持.jpg .png格式，文件≤1MB</p>
+      <p style="margin-left: 10px; color: rgb(177, 176, 176)">
+        仅支持.jpg .png格式，文件≤1MB
+      </p>
     </el-form-item>
     <el-form-item prop="remark" label="备注">
       <el-input
@@ -259,31 +304,41 @@ watch(calculatedFreeGold, (newVal) => {
         show-word-limit
         type="textarea"
       />
-      
     </el-form-item>
     <el-form-item prop="submitter" label="提交人">
-      <el-input style="width: 300px" value="张三" disabled placeholder="提交人姓名"/>
+      <el-input
+        style="width: 300px"
+        value="张三"
+        disabled
+        placeholder="提交人姓名"
+      />
     </el-form-item>
   </el-form>
 
-    <el-button @click="closeAddActivityVisible" style="margin-left: 280px;">取消</el-button>
-    <el-button type="primary" @click="addBefore">
-        提交
-    </el-button>
+  <el-button @click="closeAddActivityVisible" style="margin-left: 280px"
+    >取消</el-button
+  >
+  <el-button type="primary" @click="addBefore"> 提交 </el-button>
 
   <!-- 客户信息栏 -->
-   <el-card style="width: 700px;float: right;margin-top: -470px;margin-right: 100px;">
-    <el-form :model="user" label-width="auto" style="max-width: 600px" label-position="left">
-     <el-text size="large" style="margin-left: 20px;">客户信息</el-text>
-      <el-row style="margin-top: 20px;">
+  <el-card
+    style="width: 700px; float: right; margin-top: -470px; margin-right: 100px"
+  >
+    <el-form
+      :model="user"
+      label-width="auto"
+      style="max-width: 600px"
+      label-position="left"
+    >
+      <el-text size="large" style="margin-left: 20px">客户信息</el-text>
+      <el-row style="margin-top: 20px">
         <el-col :span="12">
           <el-form-item label="姓名:">
             <p>{{ user.name }}</p>
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="历史金币总数" >
-          </el-form-item>
+          <el-form-item label="历史金币总数"> </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="精网号">
@@ -291,37 +346,27 @@ watch(calculatedFreeGold, (newVal) => {
           </el-form-item>
         </el-col>
         <el-col :span="12">
-      <el-form-item label="当前金币总数" >
-      </el-form-item>
+          <el-form-item label="当前金币总数"> </el-form-item>
         </el-col>
         <el-col :span="12">
-      <el-form-item label="首次充值日期">
-      </el-form-item>
+          <el-form-item label="首次充值日期"> </el-form-item>
         </el-col>
         <el-col :span="12">
-      <el-form-item label="充值次数" >
-      </el-form-item>
+          <el-form-item label="充值次数"> </el-form-item>
         </el-col>
         <el-col :span="12">
-      <el-form-item label="负责客服" >
-      </el-form-item>
+          <el-form-item label="负责客服"> </el-form-item>
         </el-col>
         <el-col :span="12">
-      <el-form-item label="消费次数" >
-      </el-form-item>
+          <el-form-item label="消费次数"> </el-form-item>
         </el-col>
         <el-col :span="12">
-      <el-form-item label="所属门店" >
-      </el-form-item>
+          <el-form-item label="所属门店"> </el-form-item>
         </el-col>
         <el-col :span="12">
-      <el-form-item label="待审核" >
-      </el-form-item>
+          <el-form-item label="待审核"> </el-form-item>
         </el-col>
       </el-row>
-
-     
-
     </el-form>
   </el-card>
 </template>
@@ -332,7 +377,6 @@ watch(calculatedFreeGold, (newVal) => {
 }
 .el-form-item {
   margin-left: 50px;
-
 }
 
 /* 上传图片的格式 */
@@ -363,6 +407,5 @@ watch(calculatedFreeGold, (newVal) => {
   width: 50px;
   height: 50px;
   text-align: center;
-
 }
 </style>

vue/gold-system/src/views/refund/addRefund.vue

@@ -1,13 +1,316 @@
 <script setup>
+import { reactive } from "vue";
+import { ref, computed, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { Plus } from "@element-plus/icons-vue";
+import axios from "axios";
+import { ElMessageBox } from "element-plus";
 
+// 这是添加充值信息的表单
+const addRefund = ref({});
+// 这是添加充值信息的接口
+const add = async function () {
+  try {
+    // 发送POST请求
+    const result = await axios.post(
+      "http://192.168.8.93:10010/recharge/recharge/add",
+      addRefund.value
+    );
+
+    // 将响应结果存储到响应式数据中
+    console.log("请求成功", result);
+    // 存储表格数据
+    console.log("用户信息", user.value);
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+const addBefore = () => {
+  Ref.value.validate(async (valid) => {
+    if (valid) {
+      ElMessageBox.confirm("确认添加？")
+        .then(() => {
+          add();
+          console.log("添加成功");
+          imageUrl.value = "";
+          addRefund.value = {};
+        })
+        .catch(() => {
+          console.log("取消添加");
+        });
+    } else {
+      //提示
+      ElMessage({
+        type: "error",
+        message: "请检查输入内容",
+      });
+    }
+  });
+};
+
+// 表单验证
+// 开始时间改变时，重新验证结束时间
+const Ref = ref(null);
+const checkEndTime = function (rule, value, callback) {
+  if (value <= new Date()) {
+    callback(new Error("付款时间不能小于当前时间"));
+  }
+};
+const rules = reactive({
+  homilyId: [{ required: true, message: "请输入精网号", trigger: "blur" }],
+  refundType: [{ required: true, message: "请选择退款类型", trigger: "blur" }],
+  refundGoods: [{ required: true, message: "请选择退款商品", trigger: "blur" }],
+  taskCoin: [{ required: true, message: "请输入任务金币", trigger: "blur" }],
+  freeCoin: [{ required: true, message: "请输入免费金币", trigger: "blur" }],
+  rechargeCoin: [
+    { required: true, message: "请输入充值金币", trigger: "blur" },
+  ],
+  allCoin: [{ required: true, message: "请选择付款方式", trigger: "blur" }],
+});
+
+// 查找客户信息的方法
+const user = ref({});
+const getUser = async function (homilyId) {
+  try {
+    // 发送POST请求
+    const result = await axios.post("http://192.168.8.93:10020/recharge/user", {
+      homilyId: homilyId,
+    });
+
+    // 将响应结果存储到响应式数据中
+    console.log("请求成功", result);
+    // 存储表格数据
+    user.value = result.data.data[0];
+    console.log("用户信息", user.value);
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+
+// 这是查询货币的接口
+const currency = ref([]);
+const getCurrency = async function () {
+  try {
+    // 发送POST请求
+    const result = await axios.post(
+      "http://192.168.8.174:10010/rates/search",
+      {}
+    );
+
+    // 将响应结果存储到响应式数据中
+    console.log("货币请求成功", result);
+    // 存储表格数据
+    currency.value = result.data.data;
+    console.log("tableData", currency.value);
+    // 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+getCurrency();
+
+const calculatedFreeGold = computed(() => {
+  return addRefund.value.paidGold * addRefund.value.activityId;
+});
+
+watch(calculatedFreeGold, (newVal) => {
+  addRefund.value.freeGold = newVal;
+});
 </script>
 
 <template>
-    <div>
-        <h1>Add Refund</h1>
-    </div>
+  <div>新增退款</div>
+
+  <el-form
+    :model="addRefund"
+    ref="Ref"
+    :rules="rules"
+    label-width="auto"
+    style="max-width: 750px"
+  >
+    <el-form-item prop="homilyId" label="精网号">
+      <el-input v-model="addRefund.homilyId" style="width: 220px" />
+      <el-button
+        type="primary"
+        @click="getUser(addRefund.homilyId)"
+        style="margin-left: 20px"
+        >查询</el-button
+      >
+    </el-form-item>
+    <el-form-item prop="refundType" label="退款类型">
+      <el-select
+        v-model="addRefund.refundType"
+        placeholder="请选择"
+        style="width: 300px"
+      >
+        <el-option
+          v-for="item in activity"
+          :key="item.value"
+          :label="item.activityName"
+          :value="item.rechargeRatio"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item prop="refundGoods" label="退款商品">
+      <el-select
+        v-model="addRefund.refundGoods"
+        placeholder="请选择"
+        style="width: 300px"
+      >
+        <el-option
+          v-for="item in activity"
+          :key="item.value"
+          :label="item.activityName"
+          :value="item.rechargeRatio"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item prop="taskCoin" label="任务金币" style="float: left">
+      <el-input
+        v-model="addRefund.taskCoin"
+        style="width: 100px; margin-left: -5px"
+      />
+      <p style="margin-right: 0px">个</p>
+    </el-form-item>
+    <el-form-item
+      prop="freeCoin"
+      label="免费金币"
+      style="float: left; margin-left: -10px; margin-right: -10px"
+    >
+      <el-input
+        v-model="addRefund.freeCoin"
+        style="width: 100px; margin-left: -5px"
+      />
+      <p style="margin-right: 0px">个</p>
+    </el-form-item>
+    <el-form-item
+      prop="rechargeCoin"
+      label="充值金币"
+      style="margin-left: -20px"
+    >
+      <el-input
+        v-model="addRefund.rechargeCoin"
+        style="width: 100px; margin-left: -5px"
+      />
+      <p style="margin-right: 20px">个</p>
+    </el-form-item>
+    <el-form-item prop="allCoin" label="退款金币总数">
+      <el-input disabled v-model="addRefund.allCoin" style="width: 100px" />
+    </el-form-item>
+    <el-form-item prop="remark" label="备注">
+      <el-input
+        v-model="addRefund.remark"
+        style="width: 300px"
+        :rows="2"
+        maxlength="100"
+        show-word-limit
+        type="textarea"
+      />
+    </el-form-item>
+    <el-form-item prop="commitName" label="提交人">
+      <el-input
+        style="width: 300px"
+        value="张三"
+        disabled
+        placeholder="提交人姓名"
+      />
+    </el-form-item>
+  </el-form>
+
+  <el-button @click="closeAddActivityVisible" style="margin-left: 280px"
+    >取消</el-button
+  >
+  <el-button type="primary" @click="addBefore"> 提交 </el-button>
+
+  <!-- 客户信息栏 -->
+  <el-card
+    style="width: 700px; float: right; margin-top: -370px; margin-right: 100px"
+  >
+    <el-form
+      :model="user"
+      label-width="auto"
+      style="max-width: 600px"
+      label-position="left"
+    >
+      <el-text size="large" style="margin-left: 20px">客户信息</el-text>
+      <el-row style="margin-top: 20px">
+        <el-col :span="12">
+          <el-form-item label="姓名:">
+            <p>{{ user.name }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="历史金币总数"> </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="精网号">
+            <p>{{ user.homilyId }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="当前金币总数"> </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="首次充值日期"> </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="充值次数"> </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="负责客服"> </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="消费次数"> </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所属门店"> </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="待审核"> </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-card>
 </template>
 
 <style scoped>
+p {
+  margin: 0px;
+}
+.el-form-item {
+  margin-left: 50px;
+}
+
+/* 上传图片的格式 */
+.avatar-uploader .avatar {
+  width: 50px;
+  height: 50px;
+  display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
 
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+}
 </style>

vue/gold-system/src/views/refund/allRefund.vue

@@ -1,13 +1,469 @@
 <script setup>
+import { ref, onMounted, reactive, computed } from "vue";
+import ElementPlus from "element-plus";
+import { AiFillRead } from "vue-icons-plus/ai";
+import axios from "axios";
+// 变量
+// 充值明细表格
+const tableData = ref([]);
+// 搜索======================================
+// 搜索rechargeVo
+const rechargeVo = ref({});
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 5,
+});
+//分页总条目
+const total = ref(100);
+// 搜索对象时间
+const getTime = ref([]);
+// 搜索活动列表
+const activity = ref([]);
+// 所有信息
+const allData = ref([]);
+// 搜索地区列表
+const area = ref([]);
 
+//标签页默认高亮选项
+const activeName = ref("all");
+
+// 支付方式选项
+const payWay = [
+  {
+    value: "微信",
+    label: "微信",
+  },
+  {
+    value: "支付宝",
+    label: "支付宝",
+  },
+  {
+    value: "银联",
+    label: "银联",
+  },
+  {
+    value: "信用卡",
+    label: "信用卡",
+  },
+  {
+    value: "借记卡",
+    label: "借记卡",
+  },
+];
+
+//表格高度
+const tableHeight = computed(function () {
+  return (getObj.value.pageSize + 2) * 60 + "px";
+});
+
+// 方法
+// 搜索==============================================================
+// 搜索方法
+const get = async function (val) {
+  try {
+    // 搜索参数页码赋值
+    if (typeof val === "number") {
+      getObj.value.pageNum = val;
+    }
+    // 搜索参数时间赋值
+    if (getTime.value != null) {
+      if (getTime.value.startDate != "" && getTime.value.endDate != "") {
+        rechargeVo.value.startDate = getTime.value[0];
+        rechargeVo.value.endDate = getTime.value[1];
+      }
+    } else {
+      rechargeVo.value.startDate = "";
+      rechargeVo.value.endDate = "";
+    }
+    console.log("搜索参数", getObj.value);
+    // 发送POST请求
+    const result = await axios.post(
+      "http://192.168.8.93:10030/audit/audit/refund",
+      { ...getObj.value, rechargeVo: { ...rechargeVo.value } }
+    );
+
+    // 将响应结果存储到响应式数据中
+    console.log("请求成功", result);
+    // 存储表格数据
+    tableData.value = result.data.data.list;
+    console.log("tableData", tableData.value);
+    // 存储分页总数
+    total.value = result.data.data.total;
+    console.log("total", total.value);
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+// 重置
+const reset = function () {
+  rechargeVo.value.activityId = "";
+  rechargeVo.value.payWay = "";
+  rechargeVo.value.area = "";
+  rechargeVo.value.startDate = "";
+  rechargeVo.value.endDate = "";
+  get();
+};
+// 今天
+const getToday = function () {
+  const today = new Date();
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate()
+  );
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  );
+  getTime.value = [startDate, endDate];
+  console.log("getTime", getTime.value);
+  get();
+};
+// 昨天
+const getYesterday = function () {
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
+  const startDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate()
+  );
+  const endDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate() + 1
+  );
+  getTime.value = [startDate, endDate];
+  console.log("getTime", getTime.value);
+  get();
+};
+// 近7天
+const get7Days = function () {
+  const today = new Date();
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() - 6
+  );
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  );
+  getTime.value = [startDate, endDate];
+  console.log("getTime", getTime.value);
+  get();
+};
+//全部充值明细
+const adminAll = function () {
+  console.log("adminAll");
+  rechargeVo.value.status = "";
+  get();
+};
+//待审核充值明细
+const adminWait = function () {
+  rechargeVo.value.status = 0;
+  get();
+  console.log("adminWait");
+};
+//已通过充值明细
+const adminPass = function () {
+  rechargeVo.value.status = 1;
+  get();
+  console.log("adminPass");
+};
+//已驳回充值明细
+const adminReject = function () {
+  rechargeVo.value.status = 2;
+  get();
+  console.log("adminReject");
+};
+//点击标签页
+const handleClick = function (tab, event) {
+  if (tab.props.name === "all") {
+    adminAll();
+  } else if (tab.props.name === "wait") {
+    adminWait();
+  } else if (tab.props.name === "pass") {
+    adminPass();
+  } else if (tab.props.name === "reject") {
+    adminReject();
+  }
+};
+// 获取活动名称
+const getActivity = async function () {
+  try {
+    // 发送POST请求
+    const result = await axios.post(
+      "http://192.168.8.93:10010/recharge/activity/select",
+      {}
+    );
+
+    // 将响应结果存储到响应式数据中
+    console.log("请求成功", result);
+    // 存储表格数据
+    activity.value = result.data.data;
+    console.log("activity", activity.value);
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+// 获取地区
+const getArea = async function () {
+  try {
+    // 发送POST请求
+    const result = await axios.post(
+      "http://192.168.8.93:10010/recharge/recharge",
+      {}
+    );
+    // 将响应结果存储到响应式数据中
+    console.log("请求成功", result);
+    // 存储全部数据
+    allData.value = result.data.data;
+    console.log("allData", allData.value);
+    // 分离并去重地区列表
+    area.value = [...new Set(allData.value.map((item) => item.area))];
+    console.log("地区", area.value);
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+// 挂载
+onMounted(async function () {
+  await get();
+  getActivity();
+  await getArea();
+});
 </script>
 
 <template>
+  <el-row>
+    <el-col>
+      <el-card style="margin-bottom: 20px">
+        <el-row style="margin-bottom: 10px">
+          <el-col :span="8">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">活动名称：</el-text>
+              <el-select
+                v-model="rechargeVo.activityId"
+                placeholder="请选择活动名称"
+                size="large"
+                style="width: 240px"
+              >
+                <el-option
+                  v-for="item in activity"
+                  :key="item.activityId"
+                  :label="item.activityName"
+                  :value="item.activityId"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">支付方式：</el-text>
+              <el-select
+                v-model="rechargeVo.payWay"
+                placeholder="请选择支付方式"
+                size="large"
+                style="width: 240px"
+              >
+                <el-option
+                  v-for="item in payWay"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">所属地区：</el-text>
+              <el-select
+                v-model="rechargeVo.area"
+                placeholder="请选择所属地区"
+                size="large"
+                style="width: 240px"
+              >
+                <el-option
+                  v-for="item in area"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="21">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">充值时间：</el-text>
+              <el-date-picker
+                v-model="getTime"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="起始时间"
+                end-placeholder="结束时间"
+              />
+              <el-button style="margin-left: 10px" @click="getToday()"
+                >今</el-button
+              >
+              <el-button @click="getYesterday()">昨</el-button>
+              <el-button @click="get7Days()">近7天</el-button>
+            </div>
+          </el-col>
+          <el-col :span="3">
+            <div class="head-card-btn">
+              <el-button @click="reset()">重置</el-button>
+              <el-button type="primary" @click="get()">查询</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-card>
+        <el-tabs
+          v-model="activeName"
+          type="card"
+          class="demo-tabs"
+          @tab-click="handleClick"
+        >
+          <el-tab-pane label="全部" name="all"></el-tab-pane>
+          <el-tab-pane label="待审核" name="wait"></el-tab-pane>
+          <el-tab-pane label="已通过" name="pass"></el-tab-pane>
+          <el-tab-pane label="已驳回" name="reject"></el-tab-pane>
+        </el-tabs>
         <div>
-        <h1>allRefund</h1>
+          <el-table :data="tableData" :height="tableHeight" style="width: 100%">
+            <el-table-column prop="name" label="姓名" width="80px" />
+            <el-table-column prop="homilyId" label="精网号" width="180px" />
+            <el-table-column prop="area" label="所属地区" width="120px" />
+            <el-table-column prop="refundType" label="退款类型" width="180px" />
+            <el-table-column
+              prop="refundGoods"
+              label="退款商品"
+              width="120px"
+            />
+            <el-table-column label="退款金币数" width="120px">
+              <template #default="scope">
+                {{
+                  scope.row.rechargeCoin +
+                  scope.row.freeCoin +
+                  scope.row.taskCoin
+                }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="rechargeCoin"
+              label="充值金币"
+              width="100px"
+            />
+            <el-table-column prop="freeCoin" label="免费金币" width="100px" />
+            <el-table-column prop="taskCoin" label="任务金币" width="100px" />
+            <!-- 修改prop为taskGold -->
+            <el-table-column
+              prop="remark"
+              label="备注"
+              width="200px"
+              show-overflow-tooltip
+            />
+            <el-table-column prop="adminName" label="提交人" width="100px" />
+            <el-table-column prop="status" label="审核状态" width="120px">
+              <!-- 模板内容 -->
+              <template #default="scope">
+                <span v-if="scope.row.status === 1">
+                  <div class="status">
+                    <span class="green-dot"></span>
+                    <span>已通过</span>
                   </div>
+                </span>
+                <span v-if="scope.row.status === 0">
+                  <div class="status">
+                    <span class="grey-dot"></span>
+                    <span>待审核</span>
+                  </div>
+                </span>
+                <span v-if="scope.row.status === 2">
+                  <div class="status">
+                    <span class="red-dot"></span>
+                    <span>已驳回</span>
+                  </div>
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="reson"
+              label="驳回理由"
+              width="200px"
+              show-overflow-tooltip
+            />
+            <el-table-column prop="createTime" label="提交时间" width="180px" />
+            <el-table-column
+              prop="operation"
+              label="操作"
+              fixed="right"
+              width="120px"
+            >
+              <template #default="scope">
+                <el-popconfirm
+                  title="确定将此条活动删除吗？"
+                  @confirm="delConfirm"
+                >
+                  <template #reference>
+                    <el-button type="primary" text @click="del(scope.row)">
+                      删除
+                    </el-button>
+                  </template>
+                  <template #actions="{ confirm, cancel }">
+                    <el-button size="small" @click="cancel">取消</el-button>
+                    <el-button type="primary" size="small" @click="confirm">
+                      确定
+                    </el-button>
+                  </template>
+                </el-popconfirm>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <!-- 分页 -->
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="total"
+          :page-size="getObj.pageSize"
+          :current-page="getObj.pageNum"
+          @current-change="get"
+        />
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <style scoped>
+.status {
+  display: flex;
+}
+
+.head-card {
+  display: flex;
+}
+
+.head-card-element {
+  margin-right: 20px;
+}
 
+.head-card-btn {
+  margin-left: auto;
+}
 </style>