|
|
<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:tag>
|
|
|
<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.tag" style="width: 300px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<template v-slot:type>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">活动的类型
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-radio-group v-model="detail.type">
|
|
|
<el-radio-button label="1">公众号</el-radio-button>
|
|
|
<el-radio-button label="2">小程序</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<template v-slot:datetimerange>
|
|
|
<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-date-picker v-model="detail.datetimerange" type="datetimerange" :picker-options="pickerOptions"
|
|
|
range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期"
|
|
|
align="right">
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<template v-slot:appid>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">公众号的APPID
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input clearable placeholder="请填写公众号的APPID" v-model="detail.appid" style="width: 300px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:appsecret>
|
|
|
<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.appsecret" style="width: 300px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:mch_id>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">微信商户的ID
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input clearable placeholder="请填写微信商户的ID" v-model="detail.mch_id" style="width: 300px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<template v-slot:small_logo_id>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">小的LOGO
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
|
<div v-if="detail.small_logo" style="position: relative;">
|
|
|
<img :src="detail.small_logo" class="avatar">
|
|
|
<Button shape="circle" icon="md-close" type="error" size="small" class="img__delete"
|
|
|
@click="detail.small_logo = '',detail.small_logo_id=''"></Button>
|
|
|
</div>
|
|
|
<el-upload v-else accept="picture" :limit="1" class="avatar-uploader" list-type="picture-card"
|
|
|
:action="action" :show-file-list="true" :on-error="uploadFail" :on-success="uploadSuccess"
|
|
|
:before-upload="uploadBefore">
|
|
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</el-upload>
|
|
|
尺寸要求：80*80
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<template v-slot:logo_id>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">LOGO
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
|
<div v-if="detail.logo" style="position: relative;">
|
|
|
<img :src="detail.logo" class="avatar">
|
|
|
<Button shape="circle" icon="md-close" type="error" size="small" class="img__delete"
|
|
|
@click="detail.logo = '',detail.logo_id=''"></Button>
|
|
|
</div>
|
|
|
<el-upload v-else accept="picture" :limit="1" class="avatar-uploader" list-type="picture-card"
|
|
|
:action="action" :show-file-list="true" :on-error="uploadFailLogo" :on-success="uploadSuccessLogo"
|
|
|
:before-upload="uploadBeforeLogo">
|
|
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</el-upload>
|
|
|
尺寸要求：320*72
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<template v-slot:key>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">微信商户的key
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-input clearable placeholder="请填写微信商户的key" v-model="detail.key" style="width: 300px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<template v-slot:domain>
|
|
|
<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.domain" style="width: 300px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<template v-slot:sys_name>
|
|
|
<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.sys_name" style="width: 300px;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<template v-slot:admin_id>
|
|
|
<div class="xy-table-item">
|
|
|
<div class="xy-table-item-label">管理人员
|
|
|
</div>
|
|
|
<div class="xy-table-item-content">
|
|
|
<el-autocomplete class="inline-input" v-model="detail.admin_name" :fetch-suggestions="querySearch"
|
|
|
placeholder="请输入管理人员" :trigger-on-focus="false" @select="handleSelectUser"></el-autocomplete>
|
|
|
</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/index";
|
|
|
import {
|
|
|
listuser
|
|
|
} from "@/api/system/user.js";
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
isShow: false,
|
|
|
id: "",
|
|
|
type: "add",
|
|
|
pickerOptions: {
|
|
|
shortcuts: [{
|
|
|
text: '最近一周',
|
|
|
onClick(picker) {
|
|
|
const end = new Date();
|
|
|
const start = new Date();
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
picker.$emit('pick', [start, end]);
|
|
|
}
|
|
|
}, {
|
|
|
text: '最近一个月',
|
|
|
onClick(picker) {
|
|
|
const end = new Date();
|
|
|
const start = new Date();
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
picker.$emit('pick', [start, end]);
|
|
|
}
|
|
|
}, {
|
|
|
text: '最近三个月',
|
|
|
onClick(picker) {
|
|
|
const end = new Date();
|
|
|
const start = new Date();
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
picker.$emit('pick', [start, end]);
|
|
|
}
|
|
|
}]
|
|
|
},
|
|
|
action: `${process.env.VUE_APP_BASE_API}/api/admin/upload-file`,
|
|
|
detail: {
|
|
|
name: "",
|
|
|
tag: "",
|
|
|
type: "1",
|
|
|
datetimerange: [],
|
|
|
start_time: "",
|
|
|
end_time: "",
|
|
|
appid: "",
|
|
|
appsecret: "",
|
|
|
mch_id: "",
|
|
|
key: "",
|
|
|
cert_pem: "",
|
|
|
key_pem: "",
|
|
|
status: 1,
|
|
|
domain: "",
|
|
|
sys_name: "",
|
|
|
admin_id: "",
|
|
|
admin_name: "",
|
|
|
logo_id: "",
|
|
|
logo: "",
|
|
|
small_logo_id: "",
|
|
|
small_logo: ""
|
|
|
},
|
|
|
rules: {
|
|
|
name: [{
|
|
|
required: true,
|
|
|
message: "活动名称必填"
|
|
|
}],
|
|
|
domain: [{
|
|
|
required: true,
|
|
|
message: "活动的域名必填"
|
|
|
}],
|
|
|
sys_name: [{
|
|
|
required: true,
|
|
|
message: "系统名称必填"
|
|
|
}],
|
|
|
tag: [{
|
|
|
required: true,
|
|
|
message: "活动的标识必填"
|
|
|
}],
|
|
|
datetimerange: [{
|
|
|
required: true,
|
|
|
message: "活动时间必须填写",
|
|
|
trigger: 'change'
|
|
|
}],
|
|
|
}
|
|
|
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
isShow(newVal) {
|
|
|
if (newVal) {
|
|
|
if (this.type === 'editor') {
|
|
|
this.getDetail()
|
|
|
}
|
|
|
} else {
|
|
|
this.id = ''
|
|
|
this.type = ''
|
|
|
this.$refs['addActivity'].reset()
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
|
//上传
|
|
|
uploadFailLogo(err) {
|
|
|
console.log(err)
|
|
|
},
|
|
|
uploadSuccessLogo(response) {
|
|
|
this.detail.logo = response.url
|
|
|
this.detail.logo_id = response.id
|
|
|
},
|
|
|
uploadBeforeLogo(file) {
|
|
|
if ((file.size / 1000) > 2024) {
|
|
|
Message({
|
|
|
type: 'warning',
|
|
|
message: '上传图片大小超过2M！'
|
|
|
})
|
|
|
return false
|
|
|
}
|
|
|
},
|
|
|
//上传
|
|
|
uploadFail(err) {
|
|
|
console.log(err)
|
|
|
},
|
|
|
uploadSuccess(response) {
|
|
|
this.detail.small_logo = response.url
|
|
|
this.detail.small_logo_id = response.id
|
|
|
},
|
|
|
uploadBefore(file) {
|
|
|
if ((file.size / 1000) > 2024) {
|
|
|
Message({
|
|
|
type: 'warning',
|
|
|
message: '上传图片大小超过2M！'
|
|
|
})
|
|
|
return false
|
|
|
}
|
|
|
},
|
|
|
querySearch(queryString, cb) {
|
|
|
listuser().then(response => {
|
|
|
var data = response.data;
|
|
|
for (var m of data) {
|
|
|
m.value = m.name;
|
|
|
}
|
|
|
cb(data)
|
|
|
}).catch(error => {
|
|
|
//reject(error)
|
|
|
})
|
|
|
},
|
|
|
handleSelectUser(item) {
|
|
|
this.detail.admin_id = item.id;
|
|
|
this.detail.admin_name = item.value;
|
|
|
|
|
|
},
|
|
|
async getDetail() {
|
|
|
let res = await show({
|
|
|
id: this.id
|
|
|
})
|
|
|
Object.assign(this.detail, res);
|
|
|
this.detail.logo=res.logo?res.logo.url:"";
|
|
|
this.detail.small_logo=res.small_logo?res.small_logo.url:"";
|
|
|
this.detail.datetimerange.push(this.$moment(res.start_time).format("YYYY-MM-DD HH:mm:ss"));
|
|
|
this.detail.datetimerange.push(this.$moment(res.end_time).format("YYYY-MM-DD HH:mm:ss"));
|
|
|
},
|
|
|
editor() {
|
|
|
this.detail.start_time = this.detail.datetimerange[0];
|
|
|
this.detail.end_time = this.detail.datetimerange[1];
|
|
|
save(this.detail).then(res => {
|
|
|
this.isShow = false
|
|
|
this.$Message.success("操作成功");
|
|
|
this.$emit('refresh')
|
|
|
})
|
|
|
},
|
|
|
|
|
|
},
|
|
|
computed: {
|
|
|
|
|
|
},
|
|
|
mounted() {
|
|
|
let that = this;
|
|
|
}
|
|
|
}
|
|
|
</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>
|
