wangyifang
/
h5-service-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

Browse Source
master
刘翔宇-旅管家 2 years ago
parent ffba5902ee 001a0f11fc
commit dbf5ecfd81
1 changed files with 323 additions and 309 deletions
Show Stats Download Patch File Download Diff File

632
src/views/activity/components/addDrawPrize.vue
Unescape View File

@ -1,310 +1,324 @@
<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: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: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="!sysInfo">
<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: null,
isShow: false,
id: "",
type: "add",
detail: {
activity_list_id: "",
rate: 0,
name: "",
apply: "",
status: 1,
image_id: "",
total: 0,
has_total: 0,
image_id_url: "",
sort: 1,
money: 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.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: {
},
mounted() {
let that = this;
let sysInfo = sessionStorage.getItem('sys_info');
console.log(sysInfo)
if (sysInfo && sysInfo != "") {
let _sys = JSON.parse(sysInfo);
that.detail.activity_list_id = _sys.id;
}
}
}
</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;
}
}
<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: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: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="!sysInfo">
<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 {
isShow: false,
id: "",
type: "add",
detail: {
activity_list_id: "",
rate: 0,
name: "",
apply: "",
status: 1,
image_id: "",
total: 0,
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.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: {
},
mounted() {
let that = this;
let sysInfo = sessionStorage.getItem('sys_info');
console.log(sysInfo)
if (sysInfo && sysInfo != "") {
let _sys = JSON.parse(sysInfo);
that.detail.activity_list_id = _sys.id;
}
}
}
</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>

Write Preview
Loading…
Cancel
Save