135 lines
3.3 KiB
Vue
135 lines
3.3 KiB
Vue
<template>
|
|
<el-dialog
|
|
:title="title"
|
|
width="500px"
|
|
:visible.sync="dialogVisible"
|
|
@close="diaClose"
|
|
:close-on-click-modal="true"
|
|
>
|
|
<el-form :model="form" label-width="100px">
|
|
<el-form-item label="名称" required>
|
|
<el-input v-model="form.name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="类型" required>
|
|
<el-radio-group v-model="form.type">
|
|
<el-radio :label="1">谢谢惠顾</el-radio>
|
|
<el-radio :label="2">红包</el-radio>
|
|
<el-radio :label="3">物品</el-radio>
|
|
<!-- <el-radio label="9">其他</el-radio> -->
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="中奖概率" required>
|
|
<el-input-number :min="0" :max="100" v-model="form.odds"></el-input-number>
|
|
<span>%</span>
|
|
</el-form-item>
|
|
<el-form-item label="图片上传">
|
|
<el-upload
|
|
class="avatar-uploader"
|
|
v-model="form.url"
|
|
:action="$http.adornUrlUp('alioss/upload')"
|
|
:show-file-list="false"
|
|
:on-success="uploadSuccess"
|
|
>
|
|
<div class="upload-file-box">
|
|
<img v-if="form.url" :src="form.url" class="avatar" />
|
|
<i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
|
|
</div>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div class="dialog-footer">
|
|
<el-button @click="diaClose">取 消</el-button>
|
|
<el-button type="primary" @click="confirm">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import $disc from "@/api/disc-spinning.js";
|
|
|
|
export default {
|
|
props: {
|
|
source:{
|
|
type:[String,Number],
|
|
default:1
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
title: "编辑转盘",
|
|
form: {
|
|
name: "",
|
|
url: "",
|
|
type: 1,
|
|
odds: 0,
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
uploadSuccess(file) {
|
|
this.form.url = file.data;
|
|
console.log(file.data);
|
|
console.log(this.form.url);
|
|
},
|
|
open(item) {
|
|
console.log(item);
|
|
this.dialogVisible = true;
|
|
this.item = item;
|
|
Object.assign(this.form, item);
|
|
},
|
|
diaClose() {
|
|
this.dialogVisible = false;
|
|
this.form = {
|
|
name: "",
|
|
url: "",
|
|
type: 1,
|
|
odds: 0,
|
|
};
|
|
},
|
|
async confirm() {
|
|
if (!this.form.name) {
|
|
return this.$message.error("名称不能为空");
|
|
}
|
|
if (this.form.odds === "") {
|
|
return this.$message.error("中奖概率不能为空！");
|
|
}
|
|
const { name, url, type, odds, id } = this.form;
|
|
const submitForm={ name, url, type, odds, discType:this.source };
|
|
const { data } =id? await $disc.update({...submitForm,id }) : await $disc.add({ ...submitForm});
|
|
if (data.code == 0) {
|
|
this.$message.success(id?"修改成功":'添加成功');
|
|
this.$emit("refresh");
|
|
this.diaClose();
|
|
}else{
|
|
this.$message.error(data.msg);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.el-form-item__label {
|
|
text-align: left;
|
|
}
|
|
::v-deep .el-form-item__label {
|
|
text-align: left;
|
|
}
|
|
.upload-file-box {
|
|
border-radius: 6px;
|
|
width: 148px;
|
|
height: 148px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
border: 1px solid #c0c4cc;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
</style> |