110 lines
3.1 KiB
Vue
110 lines
3.1 KiB
Vue
<template>
|
|
<div class='center'>
|
|
<el-row>
|
|
<el-col>
|
|
<el-form ref="form" :model="form" label-width="200px" label-position="top" style="width:900px;margin-left: 80px;">
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<el-form-item label="背景图">
|
|
<UploadImg @changeImgUrl="changeCoverImgUrl('backgroundImage',$event)" @onRemove="onRemoveImage('backgroundImage',$event)" :img="form.backgroundImage"></UploadImg>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
|
|
<el-form-item label="规则说明" prop="status">
|
|
<el-input type="textarea" placeholder="请输入规则说明" v-model="form.description" maxlength="500" show-word-limit style="width:500px"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="是否启用" prop="status">
|
|
<el-switch v-model="form.enable" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit">提交</el-button>
|
|
<el-button>取消</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getCheckingCg, updateCheckingCg } from '@/api/activity/checkinList.js'
|
|
import UploadImg from '@/components/UploadImg/index'
|
|
export default {
|
|
name: 'SystemConfig',
|
|
components: {
|
|
UploadImg,
|
|
},
|
|
data() {
|
|
return {
|
|
form: {
|
|
enable: false, // 是否启用
|
|
description: undefined, // 规则说明
|
|
backgroundImage: undefined, // 背景图
|
|
},
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
//TODO：请求抽奖配置列表数据
|
|
getData() {
|
|
getCheckingCg({}).then((res) => {
|
|
if (res.code === 200) {
|
|
this.form = res.data
|
|
} else {
|
|
this.$message.error('请求签到配置失败')
|
|
}
|
|
})
|
|
},
|
|
//TODO：提交抽奖配置列表数据
|
|
onSubmit() {
|
|
const data = JSON.parse(JSON.stringify(this.form))
|
|
updateCheckingCg(data).then((res) => {
|
|
if (res.code === 200) {
|
|
this.$message.success('配置成功')
|
|
} else {
|
|
this.$message.error('配置失败')
|
|
}
|
|
})
|
|
},
|
|
// 移除图片地址到form表单
|
|
onRemoveImage(key) {
|
|
this.form[key] = undefined
|
|
},
|
|
// 上传图片返回地址
|
|
changeCoverImgUrl(name, data) {
|
|
this.form[name] = data
|
|
},
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/styles/variables.scss';
|
|
.center {
|
|
width: 100%;
|
|
height: calc(100vh - 140px);
|
|
padding: 45px 0;
|
|
margin: 0 auto;
|
|
overflow: auto;
|
|
border-radius: 6px;
|
|
background-color: $themeBg;
|
|
.el-row{
|
|
.el-col {
|
|
margin-right: 70px;
|
|
}
|
|
}
|
|
.el-textarea{
|
|
::v-deep{
|
|
textarea{
|
|
min-height: 160px!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|