|
|
|
|
|
<template>
|
|
|
<div>
|
|
|
<!-- 编辑-->
|
|
|
<xy-dialog :is-show.sync="isShow" title="抽奖奖项编辑" type="form" :form="detail" :rules="rules" @submit="editor"
|
|
|
ref="addActivity">
|
|
|
|
|
|
<template v-slot:name>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>奖品名字
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input clearable placeholder="请填写奖品名字" v-model="detail.name" style="width: 300px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:price_item>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
奖项
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input clearable placeholder="请填写奖项" v-model="detail.price_item" style="width: 300px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:apply>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
赞助商
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input clearable placeholder="请填写赞助商" v-model="detail.apply" style="width: 300px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:is_occupy>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
类型
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<div style="width: 300px;" >
|
|
|
<el-radio v-model="detail.is_occupy" :label="1">大奖</el-radio>
|
|
|
<el-radio v-model="detail.is_occupy" :label="0">小奖</el-radio>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:user_type>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
中奖用户类型
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<div style="width: 300px;" >
|
|
|
<el-input clearable placeholder="请填写中奖用户类型" v-model="detail.user_type" style="width: 300px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:rate>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>概率
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input clearable placeholder="请填写概率" v-model="detail.rate" style="width: 100px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:total>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>总数
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input clearable placeholder="请填写总数" v-model="detail.total" style="width: 100px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</template> <template v-slot:sort>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>排序
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input clearable placeholder="请填写排序" v-model="detail.sort" style="width: 100px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:money>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>金额
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input clearable placeholder="请填写金额" v-model="detail.money" style="width: 100px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:has_total>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>剩余数量
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input clearable placeholder="请填写剩余数量" v-model="detail.has_total" style="width: 100px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:image_id>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
图像：
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<div v-if="detail.image_id_url" style="position: relative;">
|
|
|
<img :src="detail.image_id_url" class="avatar">
|
|
|
<Button class="img__delete" icon="md-close" shape="circle" size="small" type="error"
|
|
|
@click="detail.image_id_url = '',detail.image_id = ''"></Button>
|
|
|
</div>
|
|
|
<el-upload v-else :action="action" :before-upload="uploadBefore" :limit="1" :on-error="uploadFail"
|
|
|
:on-success="uploadSuccess" :show-file-list="true" accept="picture" class="avatar-uploader"
|
|
|
list-type="picture-card">
|
|
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:activity_list_id>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>相关项目
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-select clearable v-model="detail.activity_list_id" :disabled="false">
|
|
|
<el-option v-for="(item,index) of listActivity" :key="item.id" :value="item.id" :label="item.name">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<template v-slot:status>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">状态
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-select clearable v-model="detail.status">
|
|
|
<el-option :value="1" label="启用"></el-option>
|
|
|
<el-option :value="0" label="禁用"></el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
</xy-dialog>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
save,
|
|
|
show
|
|
|
} from "@/api/activity/drawPrize";
|
|
|
|
|
|
export default {
|
|
|
props: {
|
|
|
listActivity: Array
|
|
|
},
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
sysInfo: '',
|
|
|
isShow: false,
|
|
|
id: "",
|
|
|
type: "add",
|
|
|
|
|
|
detail: {
|
|
|
activity_list_id: "",
|
|
|
rate: 0,
|
|
|
name: "",
|
|
|
price_item: '',
|
|
|
apply: "",
|
|
|
status: 1,
|
|
|
image_id: "",
|
|
|
total: 0,
|
|
|
user_type: "",
|
|
|
has_total: 0,
|
|
|
image_id_url: "",
|
|
|
sort:1,
|
|
|
money: 0,
|
|
|
is_occupy: 0
|
|
|
},
|
|
|
action: process.env.VUE_APP_UPLOAD_API,
|
|
|
rules: {
|
|
|
name: [{
|
|
|
required: true,
|
|
|
message: "奖品名字必填写"
|
|
|
}],
|
|
|
activity_list_id: [{
|
|
|
required: true,
|
|
|
message: "项目必须选择"
|
|
|
}],
|
|
|
}
|
|
|
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
isShow(newVal) {
|
|
|
if (newVal) {
|
|
|
if (this.type === 'editor') {
|
|
|
this.getDetail()
|
|
|
}
|
|
|
} else {
|
|
|
this.id = ''
|
|
|
this.type = '';
|
|
|
this.detail.id='';
|
|
|
this.detail.image_id='';
|
|
|
this.detail.image_id_url='';
|
|
|
|
|
|
|
|
|
this.$refs['addActivity'].reset()
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
//上传
|
|
|
uploadFail(err) {
|
|
|
console.log(err)
|
|
|
},
|
|
|
uploadSuccess(response) {
|
|
|
console.log(response)
|
|
|
this.detail.image_id = response.id
|
|
|
this.detail.image_id_url = response.url
|
|
|
|
|
|
},
|
|
|
uploadBefore(file) {
|
|
|
console.log(file)
|
|
|
if ((file.size / 1000) > 2024) {
|
|
|
this.$message({
|
|
|
type: 'warning',
|
|
|
message: '上传图片大小超过2M！'
|
|
|
})
|
|
|
return false
|
|
|
}
|
|
|
},
|
|
|
async getDetail() {
|
|
|
let res = await show({
|
|
|
id: this.id
|
|
|
})
|
|
|
Object.assign(this.detail, res);
|
|
|
this.detail.activity_list_id = parseInt(res.activity_list_id)
|
|
|
this.detail.image_id = res.image_id;
|
|
|
this.detail.image_id_url = res.image_file.url;
|
|
|
},
|
|
|
editor() {
|
|
|
save(this.detail).then(res => {
|
|
|
this.isShow = false
|
|
|
this.$Message.success("操作成功");
|
|
|
this.$emit('refresh')
|
|
|
})
|
|
|
},
|
|
|
|
|
|
},
|
|
|
computed: {
|
|
|
|
|
|
},
|
|
|
created() {
|
|
|
let that = this;
|
|
|
let sysInfo = sessionStorage.getItem('sys_info');
|
|
|
console.log(sysInfo)
|
|
|
if (sysInfo && sysInfo != "") {
|
|
|
let _sys = JSON.parse(sysInfo);
|
|
|
if(_sys.tag!='h5'){
|
|
|
that.select.activity_list_id = _sys.id;
|
|
|
that.sysInfo=_sys;
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.contract-add-plan {
|
|
|
min-height: 30px;
|
|
|
border: 1px solid #dcdee2;
|
|
|
border-radius: 4px;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
align-content: center;
|
|
|
|
|
|
padding: 0 8px;
|
|
|
|
|
|
&-no-plan {
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
color: #CDD0D5;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.xy-table-item-label {
|
|
|
width: 140px;
|
|
|
}
|
|
|
|
|
|
.xy-table-item-price {
|
|
|
position: relative;
|
|
|
|
|
|
&::after {
|
|
|
z-index: 1;
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
content: '（元）'
|
|
|
}
|
|
|
|
|
|
::v-deep .el-input__clear {
|
|
|
position: relative;
|
|
|
right: 30px;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.xy-table-item-price-wan {
|
|
|
position: relative;
|
|
|
|
|
|
&::after {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
content: '（万元）'
|
|
|
}
|
|
|
|
|
|
::v-deep .el-input__clear {
|
|
|
position: relative;
|
|
|
right: 46px;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
