gold_vue/gold-system/src/views/managerecharge/activity.vue

<script setup>
import { ref, onMounted, reactive, computed } from 'vue'
import ElementPlus from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import moment from 'moment'
import API from '../../api/index.js'
import _ from 'lodash'
import request from '@/util/http'

//这是获取用户信息的接口
const adminData = ref({})
const getAdminData = async function () {
  try {
    const result = await request({
      url: '/admin/userinfo',
      data: {}
    })
    adminData.value = result
    addObj.value.adminId = adminData.value.adminId
    console.log('请求成功', result)
    console.log('用户信息', adminData.value)
  } catch (error) {
    console.log('请求失败', error)
  }
}

//活动表格数据
const tableData = ref([])
//分页总条目
const total = ref(100)
// 搜索对象时间
const getTime = ref([])
// 搜索对象活动
const activity = ref({})
//搜索对象
const getObj = ref({
  pageNum: 1,
  pageSize: 10
})
// 添加对象
const addObj = ref({
  add: ''
})
// 删除对象
const delObj = ref({})

// 搜索方法
const get = async function (val) {
  try {
    // 搜索参数页码赋值
    if (typeof val === 'number') {
      getObj.value.pageNum = val
    }
    // 搜索参数时间赋值
    if (getTime.value.length === 2) {
      activity.value.startDate = getTime.value[0]
      activity.value.endDate = getTime.value[1]
    } else {
      activity.value.startDate = null
      activity.value.endDate = null
    }

    console.log('搜索参数', getObj.value)
    // 发送POST请求
    const result = await request({
      url: '/recharge/activity/select',
      method: 'post',
      data: {
        pageNum: getObj.value.pageNum,
        pageSize: getObj.value.pageSize,
        activity: { 
          ...activity.value,
          activityName: activity.value.activityName,
          status: activity.value.status
        }
      }
    })

    // 将响应结果存储到响应式数据中
    console.log('请求成功', result)
    // 存储表格数据
    tableData.value = result.data.list
    console.log('tableData', tableData.value)
    // 存储分页总条目
    total.value = result.data.total
    console.log('total', total.value)
  } catch (error) {
    console.log('请求失败', error)
ElMessage.error('请求失败')
  }
}
// 搜索
const search = function () {
  getObj.value.pageNum = 1
  get()
}
// 重置
const reset = function () {
  getObj.value = {
    pageNum: 1,
    pageSize: 10
  }
  getTime.value = []
  activity.value = {}
}

// 挂载
onMounted(async function () {
  await getAdminData()
  get()
})
// 定义控制对话框显示的变量，并初始化为 false
const addActivityVisible = ref(false)

// 定义 addActivity 方法
const addActivity = () => {
  console.log('点击了新增活动按钮');
  // 更新 addActivityVisible 的值为 true，显示对话框
  addActivityVisible.value = true; 
};

// 关闭对话框的方法
const closeAddActivityVisible = () => {
  addActivityVisible.value = false;
};

// 处理每页显示数量变化
const handlePageSizeChange = function (val) {
  getObj.value.pageSize = val
  get()
}

// 处理当前页码变化
const handleCurrentChange = function (val) {
  getObj.value.pageNum = val
  get()
}

// 定义提交方法
const throttledAdd = async () => {
  try {
    // 过滤掉 'add' 字段
    const { add, ...validData } = addObj.value;

    // 发送 POST 请求提交表单数据
    const result = await request({
      url: '/recharge/activity/add', // 假设这是新增活动的接口
      method: 'post',
      data: validData
    })
    console.log('新增活动成功', result)
    ElMessage.success('新增活动成功')
    // 关闭对话框
    closeAddActivityVisible()
    // 重新获取数据
    get()
  } catch (error) {
    console.log('新增活动失败', error)
    ElMessage.error('新增活动失败')
  }
}
</script>

<template>
  <el-row>
    <el-col>
      <el-card style="margin-bottom: 20px">
        <div class="head-card">
          <div class="head-card-element">
            <el-text class="mx-1" size="large">活动名称：</el-text>
            <el-input
              v-model="activity.activityName"
              style="width: 240px"
              placeholder="请输入活动名称"
              clearable
            />
          </div>
          <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="结束时间"
            />
          </div>
          <div class="head-card-btn">
            <el-button @click="reset()">重置</el-button>
            <el-button type="primary" @click="search()">查询</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row>
    <el-col>
      <el-card>
        <div>
          <el-button
            plain
            @click="addActivity()" 
            style="color: #048efb; border: 1px solid #048efb"
            >新增活动</el-button
          >
        </div>
        <div>
          <el-table :data="tableData" :height="tableHeight" style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="100px"
              fixed="left"
            >
              <template #default="scope">
                <span>{{
                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="activityName" label="活动名称" />
            <el-table-column prop="startTime" label="开始时间">
              <template #default="scope">
                {{ moment(scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') }}
              </template>
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间">
              <template #default="scope">
                {{ moment(scope.row.endTime).format('YYYY-MM-DD HH:mm:ss') }}
              </template>
            </el-table-column>
            <el-table-column prop="rechargeRatio" label="免费兑换比">
              <template #default="scope">
                <span>{{ scope.row.rechargeRatio }}:1</span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <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="red-dot"></span>
                    <span>未开始</span>
                  </div>
                </span>
                <span v-if="scope.row.status === 2">
                  <div class="status">
                    <span class="grey-dot"></span>
                    <span>已结束</span>
                  </div>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="添加人" />
            <el-table-column prop="createTime" label="添加时间">
              <template #default="scope">
                {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
              </template>
            </el-table-column>
            <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>

        <!-- 分页 -->
        <div class="pagination" style="margin-top: 20px">
          <el-pagination
            background
            :page-size="getObj.pageSize"
            :page-sizes="[5, 10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <el-dialog
    v-model="addActivityVisible"
    title="新增活动"
    width="500"
    :before-close="closeAddActivityVisible"
    :close-on-click-modal="false"
  >
    <template #footer>
      <el-form
        ref="Ref"
        :model="addObj"
        :rules="rules"
        label-width="auto"
        style="max-width: 600px"
      >
        <el-form-item prop="activityName" label="活动名称:">
          <el-input
            v-model="addObj.activityName"
            placeholder="请输入活动名称"
            style="width: 220px"
          />
        </el-form-item>

        <el-form-item prop="freeGold" label="免费金币:">
          <el-radio-group v-model="addObj.freeGold">
            <el-radio value="0" @change="addObj.rechargeRatio = '0'"
              >无赠送</el-radio
            >
            <el-radio value="1">有赠送</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="rechargeRatio" label="免费金币兑换比:">
          <el-input
            v-model="addObj.rechargeRatio"
            :disabled="addObj.freeGold === '0' ? true : false"
            placeholder="请输入"
            style="width: 80px"
          />：1
          <div style="color: grey">
            (提示：当前规则每{{ addObj.rechargeRatio }}新币可兑换1免费金币)
          </div>
        </el-form-item>

        <el-form-item prop="startTime" label="开始时间:">
          <el-date-picker
            v-model="addObj.startTime"
            type="datetime"
            placeholder="请选择开始时间"
            @change="handleStartTimeChange"
          />
        </el-form-item>

        <el-form-item prop="endTime" label="结束时间:">
          <el-date-picker
            v-model="addObj.endTime"
            type="datetime"
            placeholder="请选择结束时间"
          />
        </el-form-item>

        <el-form-item label="添加人:">
          <el-input v-model="adminData.name" disabled style="width: 220px" />
        </el-form-item>
      </el-form>

      <div class="dialog-footer">
        <el-button @click="closeAddActivityVisible">取消</el-button>
        <el-button type="primary" @click="throttledAdd"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.pagination {
  display: flex;
}

.status {
  display: flex;
}

.head-card {
  display: flex;
}

.head-card-element {
  margin-right: 20px;
}

.head-card-btn {
  margin-left: auto;
}
</style>