|
@@ -0,0 +1,201 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class='app-container'>
|
|
|
|
+ <el-form :model="form" ref="form" :rules="rules" label-width="100px" :disabled="disabled">
|
|
|
|
+ <el-form-item label="弹窗名称:" prop="name">
|
|
|
|
+ <el-input v-model="form.name" placeholder="请输入弹窗名称" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="弹窗图片:" prop="pic">
|
|
|
|
+ <Upload listType="picture-card" :url="form.pic" @upload="upload($event, 'pic')" :disabled="disabled" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="跳转类型:" prop="forwardType">
|
|
|
|
+ <el-select v-model="form.forwardType" placeholder="请选择跳转类型">
|
|
|
|
+ <el-option v-for="item in forwardTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item v-if="form.forwardType" label="跳转地址:" prop="forwardUrl">
|
|
|
|
+ <el-input v-model="form.forwardUrl" placeholder="请输入跳转地址" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="推送类型:" prop="pushType">
|
|
|
|
+ <el-select v-model="form.pushType" placeholder="请选择推送类型" @change="handleChangePushType">
|
|
|
|
+ <el-option v-for="item in pushTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item v-if="form.pushType === 1" label="用户列表:" prop="user">
|
|
|
|
+ <el-input v-model="form.user" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" placeholder="请输入内容" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item v-if="form.pushType === 2" label="用户列表:" prop="fileUrl">
|
|
|
|
+ <el-input v-model="form.fileUrl" readonly style="width: calc(100% - 120px) ;margin-right: 20px" />
|
|
|
|
+ <Upload @upload="upload($event, 'fileUrl')" :disabled="disabled" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="弹窗类型:" prop="type">
|
|
|
|
+ <el-select v-model="form.type" placeholder="请选择弹窗类型">
|
|
|
|
+ <el-option v-for="item in dialogTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item prop="level">
|
|
|
|
+ <template slot="label">
|
|
|
|
+ <el-popover placement="top-start" width="200" trigger="hover" content="注:主要是针对同一时间设置多个弹窗的场景(1级-10级)">
|
|
|
|
+ <el-link :underline="false" icon="el-icon-question" slot="reference" placement="left" />
|
|
|
|
+ </el-popover>
|
|
|
|
+ <span>
|
|
|
|
+ 优先级:
|
|
|
|
+ </span>
|
|
|
|
+ </template>
|
|
|
|
+ <el-input-number v-model="form.level" :min="1" :max="10" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="生效时间:" prop="listDate">
|
|
|
|
+ <el-date-picker v-model="form.listDate" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
|
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+ <div class="form-btn">
|
|
|
|
+ <el-button @click="cancel">取消</el-button>
|
|
|
|
+ <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { submit, detail } from '@/api/push/dialog'
|
|
|
|
+export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ // 表单
|
|
|
|
+ form: {},
|
|
|
|
+ // 跳转类型
|
|
|
|
+ forwardTypeOptions: [{
|
|
|
|
+ value: 5,
|
|
|
|
+ label: 'H5内链'
|
|
|
|
+ }, {
|
|
|
|
+ value: 6,
|
|
|
|
+ label: 'H5外链'
|
|
|
|
+ }],
|
|
|
|
+ // 推送类型
|
|
|
|
+ pushTypeOptions: [{
|
|
|
|
+ value: 0,
|
|
|
|
+ label: '全部用户'
|
|
|
|
+ }, {
|
|
|
|
+ value: 1,
|
|
|
|
+ label: '指定用户-输入'
|
|
|
|
+ }, {
|
|
|
|
+ value: 2,
|
|
|
|
+ label: '指定用户-上传'
|
|
|
|
+ }],
|
|
|
|
+ // 弹窗类型
|
|
|
|
+ dialogTypeOptions: [{
|
|
|
|
+ value: 0,
|
|
|
|
+ label: '当天弹窗'
|
|
|
|
+ }, {
|
|
|
|
+ value: 1,
|
|
|
|
+ label: '启动弹窗'
|
|
|
|
+ }, {
|
|
|
|
+ value: 2,
|
|
|
|
+ label: '新用户弹窗'
|
|
|
|
+ }],
|
|
|
|
+ // 只读
|
|
|
|
+ disabled: false,
|
|
|
|
+ // 校验
|
|
|
|
+ rules: {
|
|
|
|
+ name: [{
|
|
|
|
+ required: true, message: '请输入弹窗名称', trigger: 'blur'
|
|
|
|
+ }],
|
|
|
|
+ pic: [{
|
|
|
|
+ required: true, message: '请上传弹窗图片', trigger: 'change'
|
|
|
|
+ }],
|
|
|
|
+ forwardType: [{
|
|
|
|
+ required: true, message: '请选择跳转类型', trigger: 'change'
|
|
|
|
+ }],
|
|
|
|
+ forwardUrl: [{
|
|
|
|
+ required: true, message: '请输入跳转地址', trigger: 'blur'
|
|
|
|
+ }],
|
|
|
|
+ pushType: [{
|
|
|
|
+ required: true, message: '请选择推送类型', trigger: 'change'
|
|
|
|
+ }],
|
|
|
|
+ user: [{
|
|
|
|
+ required: true, message: '请输入用户Id', trigger: 'blur'
|
|
|
|
+ }],
|
|
|
|
+ fileUrl: [{
|
|
|
|
+ required: true, message: '请上传用户Id文件', trigger: 'change'
|
|
|
|
+ }],
|
|
|
|
+ type: [{
|
|
|
|
+ required: true, message: '请选择弹窗类型', trigger: 'change'
|
|
|
|
+ }],
|
|
|
|
+ level: [{
|
|
|
|
+ required: true, message: '请选择优先级', trigger: 'change'
|
|
|
|
+ }],
|
|
|
|
+ listDate: [{
|
|
|
|
+ required: true, message: '请选择生效时间', trigger: 'change'
|
|
|
|
+ }]
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ if (this.$route.query.id) {
|
|
|
|
+ this.getDetail()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 详情
|
|
|
|
+ getDetail() {
|
|
|
|
+ this.disabled = Boolean(this.$route.query.boolean)
|
|
|
|
+ detail(this.$route.query.id).then(res => {
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ this.form = res.data
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 推送类型改变
|
|
|
|
+ handleChangePushType(val) {
|
|
|
|
+ if (val === 0) {
|
|
|
|
+ delete this.form.user
|
|
|
|
+ delete this.form.fileUrl
|
|
|
|
+ } else if (val === 1) {
|
|
|
|
+ delete this.form.fileUrl
|
|
|
|
+ } else {
|
|
|
|
+ delete this.form.user
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 上传
|
|
|
|
+ upload(e, key) {
|
|
|
|
+ this.form[key] = e.file
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 取消
|
|
|
|
+ cancel() {
|
|
|
|
+ this.$tab.closeOpenPage("/push/pushDialog");
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 提交
|
|
|
|
+ getSubmit() {
|
|
|
|
+ submit(this.form).then(res => {
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ this.$message.success('提交成功!')
|
|
|
|
+ this.cancel()
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.el-form-item {
|
|
|
|
+ width: 500px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+::v-deep .el-input-number {
|
|
|
|
+ .el-input {
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ &::after {
|
|
|
|
+ content: '级';
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 46px;
|
|
|
|
+ line-height: 36px;
|
|
|
|
+ color: #999;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|