|
|
@@ -1,92 +1,125 @@
|
|
|
<template>
|
|
|
<div class="m-container">
|
|
|
<h2>
|
|
|
- <el-page-header @back="onCancel" :content="(pageType == 'create' ? '添加时间充值活动' : '查看时间充值活动')"></el-page-header>
|
|
|
+ <el-page-header @back="onCancel"
|
|
|
+ :content="(pageType == 'create' ? '添加时间充值活动' : '查看时间充值活动')"></el-page-header>
|
|
|
</h2>
|
|
|
|
|
|
<div class="m-core">
|
|
|
- <el-form :model="form" :rules="rules" ref="form" label-width="120px" style="width: 100%">
|
|
|
- <el-form-item label="活动名称" prop="name">
|
|
|
- <el-input v-model.trim="form.name" placeholder="请输入活动名称" :disabled="pageType=='create'?false:true"></el-input>
|
|
|
+ <el-form :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ ref="form"
|
|
|
+ label-width="120px"
|
|
|
+ style="width: 100%">
|
|
|
+ <el-form-item label="活动名称"
|
|
|
+ prop="name">
|
|
|
+ <el-input v-model.trim="form.name"
|
|
|
+ placeholder="请输入活动名称"
|
|
|
+ :disabled="pageType=='create'?false:true"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="适用范围" prop="suitableUser">
|
|
|
- <el-select v-model="form.suitableUser" :disabled="pageType=='create'?false:true" placeholder="请选择适用范围">
|
|
|
- <el-option label="全部" value="ALL"></el-option>
|
|
|
- <el-option label="新用户" value="NEW"></el-option>
|
|
|
+ <el-form-item label="适用范围"
|
|
|
+ prop="suitableUser">
|
|
|
+ <el-select v-model="form.suitableUser"
|
|
|
+ :disabled="pageType=='create'?false:true"
|
|
|
+ placeholder="请选择适用范围">
|
|
|
+ <el-option label="全部"
|
|
|
+ value="ALL"></el-option>
|
|
|
+ <el-option label="新用户"
|
|
|
+ value="NEW"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="有效期" prop="date">
|
|
|
+ <el-form-item label="有效期"
|
|
|
+ prop="date">
|
|
|
<!-- <el-input v-model="form.memo"></el-input> -->
|
|
|
- <el-date-picker
|
|
|
- :disabled="pageType=='create'?false:true"
|
|
|
- v-model="form.date"
|
|
|
- type="datetimerange"
|
|
|
- align="right"
|
|
|
- unlink-panels
|
|
|
- value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- ></el-date-picker>
|
|
|
+ <el-date-picker :disabled="pageType=='create'?false:true"
|
|
|
+ v-model="form.date"
|
|
|
+ type="datetimerange"
|
|
|
+ :picker-options="{
|
|
|
+ firstDayOfWeek:1
|
|
|
+ }"
|
|
|
+ align="right"
|
|
|
+ unlink-panels
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"></el-date-picker>
|
|
|
</el-form-item>
|
|
|
<!-- -->
|
|
|
- <el-form-item label="价格" prop="totalPrice">
|
|
|
- <el-input type="number" @mousewheel.native.prevent v-model.trim="form.totalPrice" placeholder="请输入价格" :disabled="pageType=='create'?false:true"></el-input>
|
|
|
+ <el-form-item label="价格"
|
|
|
+ prop="totalPrice">
|
|
|
+ <el-input type="number"
|
|
|
+ @mousewheel.native.prevent
|
|
|
+ v-model.trim="form.totalPrice"
|
|
|
+ placeholder="请输入价格"
|
|
|
+ :disabled="pageType=='create'?false:true"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="折扣价" prop="discountPrice">
|
|
|
- <el-input type="number" @mousewheel.native.prevent v-model.trim="form.discountPrice" placeholder="请输入折价格" :disabled="pageType=='create'?false:true"></el-input>
|
|
|
+ <el-form-item label="折扣价"
|
|
|
+ prop="discountPrice">
|
|
|
+ <el-input type="number"
|
|
|
+ @mousewheel.native.prevent
|
|
|
+ v-model.trim="form.discountPrice"
|
|
|
+ placeholder="请输入折价格"
|
|
|
+ :disabled="pageType=='create'?false:true"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="购买分钟数" prop="purchaseMinutes">
|
|
|
- <el-input type="number" @mousewheel.native.prevent v-model.trim="form.purchaseMinutes" placeholder="请输入购买分钟" :disabled="pageType=='create'?false:true"></el-input>
|
|
|
+ <el-form-item label="购买分钟数"
|
|
|
+ prop="purchaseMinutes">
|
|
|
+ <el-input type="number"
|
|
|
+ @mousewheel.native.prevent
|
|
|
+ v-model.trim="form.purchaseMinutes"
|
|
|
+ placeholder="请输入购买分钟"
|
|
|
+ :disabled="pageType=='create'?false:true"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="赠送分钟数" prop="giveMinutes">
|
|
|
- <el-input type="number" @mousewheel.native.prevent v-model.trim="form.giveMinutes" placeholder="请输入赠送分钟" :disabled="pageType=='create'?false:true"></el-input>
|
|
|
+ <el-form-item label="赠送分钟数"
|
|
|
+ prop="giveMinutes">
|
|
|
+ <el-input type="number"
|
|
|
+ @mousewheel.native.prevent
|
|
|
+ v-model.trim="form.giveMinutes"
|
|
|
+ placeholder="请输入赠送分钟"
|
|
|
+ :disabled="pageType=='create'?false:true"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="活动图" prop="coverImg">
|
|
|
- <el-upload
|
|
|
- class="avatar-uploader"
|
|
|
- action="/api-web/uploadFile"
|
|
|
- :disabled="pageType=='create'?false:true"
|
|
|
- :headers="headers"
|
|
|
- :show-file-list="false"
|
|
|
- accept=".jpg, .jpeg, .png"
|
|
|
- :on-success="handleAvatarSuccess"
|
|
|
- :before-upload="beforeAvatarUpload"
|
|
|
- >
|
|
|
- <img v-if="form.coverImg" :src="form.coverImg" class="avatar" />
|
|
|
- <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ <el-form-item label="活动图"
|
|
|
+ prop="coverImg">
|
|
|
+ <el-upload class="avatar-uploader"
|
|
|
+ action="/api-web/uploadFile"
|
|
|
+ :disabled="pageType=='create'?false:true"
|
|
|
+ :headers="headers"
|
|
|
+ :show-file-list="false"
|
|
|
+ accept=".jpg, .jpeg, .png"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
+ <img v-if="form.coverImg"
|
|
|
+ :src="form.coverImg"
|
|
|
+ class="avatar" />
|
|
|
+ <i v-else
|
|
|
+ class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</el-upload>
|
|
|
- <p class="imageSize" v-if="imageSize">上传图片尺寸为：{{ imageSize }}</p>
|
|
|
+ <p class="imageSize"
|
|
|
+ v-if="imageSize">上传图片尺寸为：{{ imageSize }}</p>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="活动详情" prop="detail">
|
|
|
+ <el-form-item label="活动详情"
|
|
|
+ prop="detail">
|
|
|
<!-- bidirectional data binding（双向数据绑定） -->
|
|
|
- <quill-editor
|
|
|
- class="ql-editor"
|
|
|
- :disabled="pageType=='create'?false:true"
|
|
|
- v-model="form.detail"
|
|
|
- ref="myQuillEditor"
|
|
|
- :options="editorOption"
|
|
|
- @change="onEditorChange($event)"
|
|
|
- ></quill-editor>
|
|
|
+ <quill-editor class="ql-editor"
|
|
|
+ :disabled="pageType=='create'?false:true"
|
|
|
+ v-model="form.detail"
|
|
|
+ ref="myQuillEditor"
|
|
|
+ :options="editorOption"
|
|
|
+ @change="onEditorChange($event)"></quill-editor>
|
|
|
|
|
|
- <el-upload
|
|
|
- class="ivu-upload"
|
|
|
- :show-upload-list="false"
|
|
|
- :headers="headers"
|
|
|
- :on-success="handleSuccess"
|
|
|
- accept=".jpg, .jpeg, .png"
|
|
|
- :max-size="2048"
|
|
|
- multiple
|
|
|
- action="/api-web/uploadFile"
|
|
|
- >
|
|
|
+ <el-upload class="ivu-upload"
|
|
|
+ :show-upload-list="false"
|
|
|
+ :headers="headers"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ accept=".jpg, .jpeg, .png"
|
|
|
+ :max-size="2048"
|
|
|
+ multiple
|
|
|
+ action="/api-web/uploadFile">
|
|
|
<Button icon="ios-cloud-upload-outline"></Button>
|
|
|
</el-upload>
|
|
|
</el-form-item>
|
|
|
<el-form-item v-if="pageType == 'create'">
|
|
|
- <el-button
|
|
|
- @click="onSubmit('form')"
|
|
|
- type="primary"
|
|
|
- >立即{{ pageType == "create" ? '创建' : '修改' }}</el-button>
|
|
|
+ <el-button @click="onSubmit('form')"
|
|
|
+ type="primary">立即{{ pageType == "create" ? '创建' : '修改' }}</el-button>
|
|
|
<el-button @click="onReSet('form')">重置</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
@@ -180,7 +213,7 @@ export default {
|
|
|
components: {
|
|
|
quillEditor
|
|
|
},
|
|
|
- data() {
|
|
|
+ data () {
|
|
|
let that = this;
|
|
|
return {
|
|
|
categoryList: [],
|
|
|
@@ -196,7 +229,7 @@ export default {
|
|
|
toolbar: {
|
|
|
container: toolbarOptions,
|
|
|
handlers: {
|
|
|
- image: function(value) {
|
|
|
+ image: function (value) {
|
|
|
if (value) {
|
|
|
// 调用iview图片上传
|
|
|
document.querySelector(".ivu-upload .el-upload").click();
|
|
|
@@ -240,11 +273,11 @@ export default {
|
|
|
imageSize: null
|
|
|
};
|
|
|
},
|
|
|
- created() {},
|
|
|
- mounted() {
|
|
|
+ created () { },
|
|
|
+ mounted () {
|
|
|
this.init();
|
|
|
},
|
|
|
- activated() {
|
|
|
+ activated () {
|
|
|
if (this.$route.query.type == "create") {
|
|
|
this.form = {
|
|
|
name: null,
|
|
|
@@ -265,9 +298,9 @@ export default {
|
|
|
this.init();
|
|
|
},
|
|
|
methods: {
|
|
|
- init() {
|
|
|
+ init () {
|
|
|
this.getList();
|
|
|
-
|
|
|
+
|
|
|
this.addQuillTitle();
|
|
|
|
|
|
// this.form.type
|
|
|
@@ -279,11 +312,11 @@ export default {
|
|
|
};
|
|
|
this.imageSize = tempTitle[this.form.type];
|
|
|
},
|
|
|
- addQuillTitle() {
|
|
|
+ addQuillTitle () {
|
|
|
const oToolBar = document.querySelector(".ql-toolbar"),
|
|
|
aButton = oToolBar.querySelectorAll("button"),
|
|
|
aSelect = oToolBar.querySelectorAll("select");
|
|
|
- aButton.forEach(function(item) {
|
|
|
+ aButton.forEach(function (item) {
|
|
|
if (item.className === "ql-script") {
|
|
|
item.value === "sub" ? (item.title = "下标") : (item.title = "上标");
|
|
|
} else if (item.className === "ql-indent") {
|
|
|
@@ -294,11 +327,11 @@ export default {
|
|
|
item.title = titleConfig[item.classList[0]];
|
|
|
}
|
|
|
});
|
|
|
- aSelect.forEach(function(item) {
|
|
|
+ aSelect.forEach(function (item) {
|
|
|
item.parentNode.title = titleConfig[item.classList[0]];
|
|
|
});
|
|
|
},
|
|
|
- onSubmit(formName) {
|
|
|
+ onSubmit (formName) {
|
|
|
this.$refs[formName].validate(valid => {
|
|
|
if (valid) {
|
|
|
if (this.pageType == "create") {
|
|
|
@@ -326,7 +359,7 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- messageTips(title, res) {
|
|
|
+ messageTips (title, res) {
|
|
|
if (res.code == 200) {
|
|
|
this.$message.success(title + "成功");
|
|
|
this.$router.push({
|
|
|
@@ -336,12 +369,12 @@ export default {
|
|
|
this.$message.error(res.msg);
|
|
|
}
|
|
|
},
|
|
|
- onCancel() {
|
|
|
+ onCancel () {
|
|
|
this.$router.push({
|
|
|
path: "/insideSetting/entryActivities"
|
|
|
});
|
|
|
},
|
|
|
- handleSuccess(res) {
|
|
|
+ handleSuccess (res) {
|
|
|
// 获取富文本组件实例
|
|
|
let quill = this.editor;
|
|
|
// 如果上传成功
|
|
|
@@ -357,10 +390,10 @@ export default {
|
|
|
this.$message.error("图片插入失败");
|
|
|
}
|
|
|
},
|
|
|
- onReSet(formName) {
|
|
|
+ onReSet (formName) {
|
|
|
this.$refs[formName].resetFields();
|
|
|
},
|
|
|
- getList() {
|
|
|
+ getList () {
|
|
|
if (this.pageType == "create") {
|
|
|
return;
|
|
|
} else {
|
|
|
@@ -385,11 +418,11 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
- handleAvatarSuccess(res, file) {
|
|
|
+ handleAvatarSuccess (res, file) {
|
|
|
load.endLoading()
|
|
|
this.form.coverImg = res.data.url;
|
|
|
},
|
|
|
- beforeAvatarUpload(file) {
|
|
|
+ beforeAvatarUpload (file) {
|
|
|
const imageType = {
|
|
|
"image/png": true,
|
|
|
"image/jpeg": true
|
|
|
@@ -403,17 +436,17 @@ export default {
|
|
|
if (!isLt2M) {
|
|
|
this.$message.error("上传头像图片大小不能超过 2MB!");
|
|
|
}
|
|
|
- if(isImage && isLt2M) { // 判断是否满足条件
|
|
|
+ if (isImage && isLt2M) { // 判断是否满足条件
|
|
|
load.startLoading()
|
|
|
}
|
|
|
return isImage && isLt2M;
|
|
|
},
|
|
|
- onEditorChange({ quill, html, text }) {
|
|
|
+ onEditorChange ({ quill, html, text }) {
|
|
|
this.form.detail = html;
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- editor() {
|
|
|
+ editor () {
|
|
|
return this.$refs.myQuillEditor.quill;
|
|
|
}
|
|
|
}
|
|
|
@@ -430,7 +463,7 @@ export default {
|
|
|
min-height: 300px;
|
|
|
padding: 0;
|
|
|
}
|
|
|
-/deep/.ql-container .ql-editor{
|
|
|
+/deep/.ql-container .ql-editor {
|
|
|
max-height: 500px;
|
|
|
}
|
|
|
.el-button--primary {
|
