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

<template>
    <div>
        <div class="g-card">
            <h4 class="g-card-title">{{ title }}</h4>
            <el-form ref="LotteryAdd" :model="addForm" :rules="addRules" label-position="left">
                <el-form-item label="活动名称" prop="actName">
                    <el-input v-model="addForm.actName" placeholder="请输入活动名称"></el-input>
                </el-form-item>
                <el-form-item label="活动类型" prop="actType">
                    <el-select v-model="addForm.actType" placeholder="请选择活动类型">
                        <el-option value="1" label="抽奖"></el-option>
                        <el-option value="2" label="转盘"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间" prop="actTime">
                    <el-date-picker
                        type="datetimerange"
                        v-model="addForm.actTime"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right"
                        value-format="yyyy-MM-dd hh:mm:ss"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="奖品设置" prop="actPrizeSet">
                    <el-button type="primary" @click="addPrize">新增</el-button>
                </el-form-item>
                <el-table
                    :data="addForm.prizeList"
                >
                    <el-table-column prop="prizeName" label="奖品名称"></el-table-column>
                    <el-table-column prop="winPercent" label="奖品概率"></el-table-column>
                    <el-table-column prop="prizeNum" label="奖品数量"></el-table-column>
                    <el-table-column prop="prizeType" label="活动奖品"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="prizeEdit(scope)">编辑</el-button>
                            <el-button type="text" @click="prizeDel(scope)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </div>
        <div class="g-footer-sticky" style="text-align: center;">
            <el-button plain @click="$router.go(-1)">取消</el-button>
            <el-button type="primary" @click="handleSubmit">提交</el-button>
        </div>
        <el-dialog
            :visible.sync="addPrizeShow"
            width="600"
        >
            <el-form :model="addPrizeForm" label-position="left">
                <el-form-item prop="prizeName" label="奖品名称">
                    <el-input v-model="addPrizeForm.prizeName" placeholder="请输入奖品名称"></el-input>
                </el-form-item>
                <el-form-item prop="winPercent" label="奖品概率">
                    <el-input v-model="addPrizeForm.winPercent" placeholder="请输入奖品概率"></el-input>
                </el-form-item>
                <el-form-item prop="prizeNum" label="奖品数量">
                    <el-input v-model="addPrizeForm.prizeNum" placeholder="请输入奖品数量"></el-input>
                </el-form-item>
                <el-form-item label="活动奖品">
                    <div style="display: flex">
                        <div style="width: 100%">
                            <div>
                                <el-radio-group v-model="addPrizeForm.prizeType">
                                    <el-radio label="1">优惠券</el-radio>
                                    <el-radio label="2">积分</el-radio>
                                    <el-radio label="3">平台会员</el-radio>
                                    <el-radio label="4" v-if="addForm.actType === '2' ">谢谢参与</el-radio>
                                </el-radio-group>
                            </div>
                            <div v-if="addPrizeForm.prizeType === '1' ">
                                <el-select v-model="addPrizeForm.prizeContent" filterable placeholder="请选择优惠券">
                                    <el-option :label="item.rightsName" :value="item.id" v-for="(item, index) in coupon" :key="item.id"></el-option>
                                </el-select>
                            </div>
                            <div v-else-if="addPrizeForm.prizeType === '2' || addPrizeForm.prizeType === '3'">
                                <el-input v-model="addPrizeForm.prizeContent" :placeholder="addPrizeForm.prizeType === '2'?'请输入积分':addPrizeForm.prizeType === '3'?'请输入天数':''"></el-input>
                            </div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button plain @click="addPrizeCancel">取消</el-button>
                <el-button type="primary" @click="addPrizeSubmit">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import * as api from '@/api/lottery'
import {getEquityCoupon} from "@/api/lottery";
export default {
    name: "lotteryAdd",
    data() {
        return {
            title: '新增',
            addForm: {
                actName: '',
                actType: '1',
                actTime: [],
                prizeList: []
            },
            addRules: {
                actName: [ { required: true, message: '请输入活动名称', trigger: 'blur' } ],
                actType: [ { required: true, message: '请选择活动类型', trigger: 'change' } ],
                actTime: [ { required: true, message: '请选择活动时间', trigger: 'change' } ],
                actPrizeSet: [ { required: true, message: '请选择活动设置', trigger: 'change' } ]
            },
            addPrizeShow: false,
            addPrizeForm: {
                prizeName: '',
                winPercent: '',
                prizeNum: 0,
                prizeType: '1',
                prizeContent: ''
            },
            coupon: [],
            isEdit: false,
            editIndex: null
        }
    },
    created() {
        this.isEdit = false
        if(this.$route.query.id) {
            this.title = '编辑'
            this.isEdit = true
            this.getActivity()
        }
        this.getEquityCoupon();
    },
    methods: {
        getEquityCoupon() {
            api.getEquityCoupon().then(res => {
                if(res.code == 200) {
                    this.coupon = res.data
                }
            })
        },
        getActivity() {
            api.getActivity({
                actId: this.$route.query.id
            }).then(res => {
                if(res.code == 200) {
                    let obj = {...res.data}
                    this.addForm = {
                        actName: obj.actName,
                        actType: `${obj.actType}`,
                        actTime: [obj.actStartTime, obj.actEndTime],
                        actPrizeSet: `${obj.actPrizeSet}`,
                        prizeList: obj.prizeList?obj.prizeList:[]
                    }
                }
            })
        },
        addPrize() {
            if(this.addForm.actType == '1') {
                if(this.addForm.prizeList&&this.addForm.prizeList.length>=8) {
                    this.$message.error('活动类型为抽奖时，奖品设置数量最多为8条！')
                    return
                }
            } else if(this.addForm.actType == '2') {
                if(this.addForm.prizeList&&this.addForm.prizeList.length>=6) {
                    this.$message.error('活动类型为转盘时，奖品设置数量最多为6条！')
                    return
                }
            }
            this.isEdit = false
            this.addPrizeShow = true
            let num = 0
            this.addForm.prizeList.forEach(item => {
                num += Number(item.winPercent)
            })
            this.addPrizeForm = {
                prizeName: '',
                winPercent: 100 - num,
                prizeNum: 0,
                prizeType: '1',
                prizeContent: ''
            }
        },
        prizeEdit(scope) {
            this.addPrizeShow = true
            this.addPrizeForm = scope.row
            this.isEdit = true
            this.editIndex = scope.$index
        },
        prizeDel(scope) {
            this.addForm.prizeList.splice(scope.$index, 1)
        },
        addPrizeCancel() {
            this.addPrizeShow = false
            this.addPrizeForm = {
                prizeName: '',
                winPercent: '',
                prizeNum: 0,
                prizeType: '1',
                prizeContent: ''
            }
        },
        addPrizeSubmit() {
            this.addPrizeShow = false
            if(this.isEdit) {

            } else {
                this.addForm.prizeList.push({
                    ...this.addPrizeForm
                })
            }
        },
        handleSubmit() {
            this.addForm.prizeList.forEach(item => {
                item.prizeType = `${item.prizeType}`
            })
            let params = {
                actName: this.addForm.actName,
                actType: this.addForm.actType,
                actStartTime: this.addForm.actTime[0],
                actEndTime: this.addForm.actTime[1],
                actPrizeList: this.addForm.prizeList,
            }
            if(this.$route.query.id) {
                api.editActivity({
                    actId: this.$route.query.id,
                    ...params
                }).then(res => {
                    if(res.code == 200) {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        })
                        this.$router.push({
                            path: 'list'
                        })
                    }
                })
            } else {
                api.add({...params}).then(res => {
                    console.log(123123, res)
                    if(res.code == 200) {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        })
                        this.$router.push({
                            path: 'list'
                        })
                    }
                })
            }
        }
    },
}
</script>

<style scoped>

</style>