link-wechat-web-pc/src/views/application/lottery/list.vue

<template>
    <div>
        <el-form ref="LotteryForm" :inline="true" :model="lotteryForm" class="top-search">
            <el-form-item label="类型" prop="type">
                <el-select v-model="lotteryForm.actType" clearable>
                    <el-option value="1" label="抽奖"></el-option>
                    <el-option value="2" label="转盘"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" :loading="loading" @click="initList">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="g-card">
            <div class="mid-action">
                <el-button type="primary" @click="addLottery">新增活动</el-button>
            </div>
            <el-table
                :data="tableData"
            >
                <el-table-column type="index" label="序号" width="55"></el-table-column>
                <el-table-column prop="actName" label="活动名称"></el-table-column>
                <el-table-column prop="createTime" label="新建时间"></el-table-column>
                <el-table-column prop="actType" label="活动类型">
                    <template slot-scope="scope">
                        {{ scope.row.actType == '1'?'抽奖':scope.row.actType == '2'?'转盘':'' }}
                    </template>
                </el-table-column>
                <el-table-column prop="a" label="奖品"></el-table-column>
                <el-table-column prop="a" label="参与用户"></el-table-column>
                <el-table-column label="活动时间" width="160">
                    <template slot-scope="scope">
                        {{ scope.row.actStartTime&&scope.row.actEndTime?`${scope.row.actStartTime}-${scope.row.actEndTime}`:'' }}
                    </template>
                </el-table-column>
                <el-table-column prop="winNum" label="中奖人数">
                    <template slot-scope="scope">
                        <el-button type="text" @click="showNumber(scope.row)">{{ scope.row.winNum?scope.row.winNum:0 }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="actStatus" label="状态">
                    <template slot-scope="scope">
                        {{ scope.row.actStatus == '1'?'开启':scope.row.actStatus == '2'?'关闭':'' }}
                    </template>
                </el-table-column>
                <el-table-column prop="updateBy" label="操作人"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleClose(scope.row)">关闭</el-button>
                        <el-button type="text" @click="handleStart(scope.row)">开启</el-button>
                        <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="text" @click="handleShare(scope.row)">转发企微</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="lotteryForm.pageNum"
                :limit.sync="lotteryForm.pageSize"
                @pagination="initList"
            />
        </div>
        <el-dialog
            :visible.sync="numberShow"
            width="400"
        >
            <el-table
                :data="numbersData"
            >
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="用户名称" prop="userNickName"></el-table-column>
                <el-table-column label="手机号" prop="userPhone"></el-table-column>
            </el-table>
        </el-dialog>
        <pagination
            v-show="total1 > 0"
            :total="total1"
            :page.sync="numberForm.pageNum"
            :limit.sync="numberForm.pageSize"
            @pagination="getWinningRecord"
        />
    </div>
</template>

<script>
import * as api from '@/api/lottery'
import {getWinningRecord} from "@/api/lottery";
export default {
    name: "lotteryList",
    data() {
        return {
            lotteryForm: {
                actType: '',
                pageNum: 1,
                pageSize: 10
            },
            total: 1,
            loading: false,
            tableData: [],
            numberShow: false,
            numbersData: [],
            total1: 0,
            numberForm: {
                pageNum: 1,
                pageSize: 10
            },
            numberId: ''
        }
    },
    created() {
        this.initList();
    },
    methods: {
        initList() {
            this.loading = true
            api.listActivity({
                actTypeList: this.lotteryForm.actType?[this.lotteryForm.actType]:['1','2'],
                pageNum: this.lotteryForm.pageNum,
                pageSize: this.lotteryForm.pageSize
            }).then(res => {
                this.loading = false
                if(res.code == 200) {
                    this.tableData = res.rows
                    this.total = Number(res.total)
                } else {
                    this.tableData = []
                    this.total = 0
                    this.$message.error(res.msg)
                }
            })
        },
        addLottery() {
            this.$router.push({
                path: 'add'
            })
        },
        showNumber(row) {
            // if(row.winNum) {
            //     this.numberShow = true
            // }
            this.numberShow = true
            this.numberId = row.actId
            this.getWinningRecord()
        },
        getWinningRecord() {
            api.getWinningRecord({
                actId: this.numberId,
                ...this.numberForm
            }).then(res => {
                if(res.code == 200) {
                    this.numbersData = res.rows
                    this.total1 = res.total
                }
            })
        },
        handleClose(row) {
            api.editActivityStatus({
                actId: row.actId,
                actStatus: 2
            }).then(res => {
                if(res.code == 200) {
                    this.$message.success(res.msg)
                    this.initList()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        handleStart(row) {
            api.editActivityStatus({
                actId: row.actId,
                actStatus: 1
            }).then(res => {
                if(res.code == 200) {
                    this.$message.success(res.msg)
                    this.initList()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        handleEdit(row) {
            this.$router.push({
                path: `add?id=${row.actId}`
            })
        },
        handleShare(row) {
            let inputs=document.createElement("input")     //创建节点
            inputs.value = row.actType == 1?`https://test.baoxianzhanggui.com/custh5/#/packageB/pages/activity/act-nineGrid?id=${row.actId}`: row.actType == 2?`https://test.baoxianzhanggui.com/custh5/#/packageB/pages/activity/act-wheel?id=${row.actId}`: '' //给节点赋值
            document.body.appendChild(inputs) //渲染节点(要不然不起作用,可以添加隐藏属性)
            inputs.select() //选中节点
            let  actions =  document.execCommand("Copy") //指定复制命令(返回的是一个boolean类型)
            if(actions) {
                this.$message.success('复制成功！')
            }
        }
    }
}
</script>

<style scoped>

</style>