|
@@ -0,0 +1,369 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="edit_add_page">
|
|
|
|
+ <div class="content">
|
|
|
|
+ <el-form ref="form" :model="form" label-width="100px" :rules="formRules">
|
|
|
|
+ <h2>基础信息</h2>
|
|
|
|
+ <br>
|
|
|
|
+ <el-form-item label="活动名称:" prop="currencyName">
|
|
|
|
+ <el-input v-model="form.currencyName" maxlength="20" placeholder="请输入活动名称" :disabled="unStart" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="备注:" prop="remark">
|
|
|
|
+ <el-input v-model="form.remark" maxlength="255" type="textarea" placeholder="请输入活动介绍"
|
|
|
|
+ :disabled="unStart" style="width: 400px;" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <!-- :picker-options="pickerOptions" -->
|
|
|
|
+ <el-form-item label="报名时间:" prop="signTime">
|
|
|
|
+ <el-date-picker v-model="date2" type="datetimerange" range-separator="至" start-placeholder="开始时间"
|
|
|
|
+ end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" :disabled="applyEnd" />
|
|
|
|
+ <p class="timeInfo">报名时间不能交叉且报名时间不能大于活动时间</p>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="活动时间:" prop="activityTime">
|
|
|
|
+ <el-date-picker v-model="date1" type="datetimerange" range-separator="至" start-placeholder="开始时间"
|
|
|
|
+ end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" :disabled="applyEnd" />
|
|
|
|
+ <p class="timeInfo">平台活动时间不能交叉并且活动时间不能小于报名时间</p>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="活动保证金:">
|
|
|
|
+ <el-radio-group v-model="form.ifBond">
|
|
|
|
+ <el-radio :label="1" :disabled="unStart">需要</el-radio>
|
|
|
|
+ <el-radio :label="0" :disabled="unStart">不需要</el-radio>
|
|
|
|
+ </el-radio-group>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item v-if="form.ifBond === 1" label="保证金金额:">
|
|
|
|
+ <el-input v-model="form.bondMoney" maxlength="9" placeholder="请输入活动保证金金额" :disabled="unStart" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <h2>优惠规则</h2>
|
|
|
|
+ <br>
|
|
|
|
+ <el-form-item label="设置规则:">
|
|
|
|
+ <el-radio-group v-model="form.setRules" @input="setRulesChange">
|
|
|
|
+ <el-radio :label="1" :disabled="unStart">比例金额</el-radio>
|
|
|
|
+ <el-radio :label="2" :disabled="unStart">固定金额</el-radio>
|
|
|
|
+ </el-radio-group>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="优惠比例:" prop="currencyMoney">
|
|
|
|
+ <el-input-number v-model="form.currencyMoney" :disabled="unStart" :min="0"
|
|
|
|
+ :max="form.setRules === 1 ? 100 : 9999"></el-input-number>
|
|
|
|
+ <span style="margin-left: 20px; font-size: 16px;" v-if="form.setRules === 1">单位为%</span>
|
|
|
|
+ <span style="margin-left: 20px; font-size: 16px;" v-if="form.setRules === 2">单位为元</span>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="是否限购:">
|
|
|
|
+ <el-radio-group v-model="form.ifLimit">
|
|
|
|
+ <el-radio :label="2" :disabled="unStart">限购</el-radio>
|
|
|
|
+ <el-radio :label="1" :disabled="unStart">不限购</el-radio>
|
|
|
|
+ </el-radio-group>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item v-if="form.ifLimit === 2" label="限购(件/人):">
|
|
|
|
+ <el-input v-model="form.limitNumber" maxlength="9" placeholder="请输入限购数量" :disabled="unStart" />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="优惠券叠加:">
|
|
|
|
+ <el-radio-group v-model="form.ifAdd">
|
|
|
|
+ <el-radio :label="1" :disabled="unStart">叠加</el-radio>
|
|
|
|
+ <el-radio :label="0" :disabled="unStart">不叠加</el-radio>
|
|
|
|
+ </el-radio-group>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="footer">
|
|
|
|
+ <div class="btn_list">
|
|
|
|
+ <span @click="cancel">取消</span>
|
|
|
|
+ <span @click="save">保存</span>
|
|
|
|
+ <span @click="reset">重置</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+// import { activeAdd, activeUpdate, activeGetById } from '@/api/active'
|
|
|
|
+// import {
|
|
|
|
+// getSeckillDetail,
|
|
|
|
+// editSeckillData,
|
|
|
|
+// addSeckillData
|
|
|
|
+// } from '@/api/active/active_seckill.js'
|
|
|
|
+
|
|
|
|
+import { addBee,getBeeInfo,editBee } from '@/api/active/active_bee.js'
|
|
|
|
+import Form from '../module'
|
|
|
|
+export default {
|
|
|
|
+ props: {
|
|
|
|
+ activityForm: {
|
|
|
|
+ type: Object,
|
|
|
|
+ default: () => { }
|
|
|
|
+ },
|
|
|
|
+ isEdit: {
|
|
|
|
+ type: Number,
|
|
|
|
+ default: 0
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ const validateSignTime = (rule, value, callback) => {
|
|
|
|
+ if (!(this.date2 && this.date2.length === 2)) {
|
|
|
|
+ callback(new Error('请选择报名时间'))
|
|
|
|
+ } else {
|
|
|
|
+ callback()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ const validateActivityTime = (rule, value, callback) => {
|
|
|
|
+ if (!(this.date1 && this.date1.length === 2)) {
|
|
|
|
+ callback(new Error('请选择活动时间'))
|
|
|
|
+ } else {
|
|
|
|
+ callback()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return {
|
|
|
|
+ form: new Form(),
|
|
|
|
+ date1: [], // 活动时间
|
|
|
|
+ date2: [], // 报名时间
|
|
|
|
+ type: false,
|
|
|
|
+ title: '',
|
|
|
|
+ formRules: {
|
|
|
|
+ remark: [
|
|
|
|
+ { max: 255, message: '长度在 255 个字符内', trigger: 'blur' }
|
|
|
|
+ ],
|
|
|
|
+ currencyName: [
|
|
|
|
+ { required: true, message: '请输入活动名称', trigger: 'blur' }
|
|
|
|
+ ],
|
|
|
|
+ signTime: [
|
|
|
|
+ { validator: validateSignTime, required: true, trigger: 'blur' }
|
|
|
|
+ ],
|
|
|
|
+ activityTime: [
|
|
|
|
+ { validator: validateActivityTime, required: true, trigger: 'blur' }
|
|
|
|
+ ],
|
|
|
|
+ currencyMoney: [
|
|
|
|
+ { required: true, message: '请输入金额', trigger: 'blur' }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ // 其他修改
|
|
|
|
+ unStart() {
|
|
|
|
+ const t = this.isEdit ? this.activityForm : null
|
|
|
|
+ console.log(t)
|
|
|
|
+ return t && !(t.state === 0)
|
|
|
|
+ },
|
|
|
|
+ // 时间修改
|
|
|
|
+ applyEnd() {
|
|
|
|
+ const t = this.isEdit ? this.activityForm : null
|
|
|
|
+ return t && (t.state === 3 || t.state === 4)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ isEdit: {
|
|
|
|
+ handler(nVal, oVal) {
|
|
|
|
+ if (nVal) {
|
|
|
|
+ this.getDetails()
|
|
|
|
+ } else {
|
|
|
|
+ this.reset()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ deep: true
|
|
|
|
+ },
|
|
|
|
+ activityForm: {
|
|
|
|
+ handler(nVal, oVal) {
|
|
|
|
+ if (nVal) {
|
|
|
|
+ this.getDetails()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ if (this.isEdit) { // 初始化watch无法监听isEdit,手动获取数据
|
|
|
|
+ this.getDetails()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 设置规则切换函数
|
|
|
|
+ setRulesChange(e){
|
|
|
|
+ if(e == 1 && this.form.currencyMoney > 100){
|
|
|
|
+ this.form.currencyMoney = 100
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 查询详情请
|
|
|
|
+ async getDetails() {
|
|
|
|
+ const res = await getBeeInfo(this.activityForm.currencyId)
|
|
|
|
+ if (JSON.stringify(res.data) !== '{}') {
|
|
|
|
+ this.form = res.data
|
|
|
|
+ this.date1 = [res.data.startTime, res.data.endTime]
|
|
|
|
+ this.date2 = [res.data.signStartTime, res.data.signEndTime]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ cancel() { this.$emit('cancel') },
|
|
|
|
+ refersh() { this.$emit('refersh') },
|
|
|
|
+ async save() {
|
|
|
|
+ this.$refs.form.validate(async (valid) => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ console.log('表单校验成功')
|
|
|
|
+ const params = Object.assign({}, this.form, {
|
|
|
|
+ startTime: this.date1[0] || '',
|
|
|
|
+ endTime: this.date1[1] || '',
|
|
|
|
+ signStartTime: this.date2[0] || '',
|
|
|
|
+ signEndTime: this.date2[1] || '',
|
|
|
|
+ bondMoney: this.form.bondMoney * 1
|
|
|
|
+ })
|
|
|
|
+ let errMsg = ''
|
|
|
|
+ if (params.currencyName === '') {
|
|
|
|
+ errMsg += ' 活动名称 '
|
|
|
|
+ }
|
|
|
|
+ if (params.signStartTime === '' || params.signEndTime === '') {
|
|
|
|
+ errMsg += ' 报名时间 '
|
|
|
|
+ }
|
|
|
|
+ if (params.startTime === '' || params.endTime === '') {
|
|
|
|
+ errMsg += ' 活动时间 '
|
|
|
|
+ }
|
|
|
|
+ if (errMsg.length !== 0) {
|
|
|
|
+ this.$message.error(`请输入${errMsg}`)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if (this.isEdit) {
|
|
|
|
+ // 修改
|
|
|
|
+ return editBee(Object.assign(params)).then((res) => {
|
|
|
|
+ if (res.code === '') {
|
|
|
|
+ this.$message({
|
|
|
|
+ message: '修改成功',
|
|
|
|
+ type: 'success'
|
|
|
|
+ })
|
|
|
|
+ this.reset()
|
|
|
|
+ this.refersh()
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ if(params.setRules == 1) params.currencyMoney = params.currencyMoney / 100
|
|
|
|
+ // console.log(params)
|
|
|
|
+ let res2 = await addBee(params)
|
|
|
|
+ if (res2.code === '') {
|
|
|
|
+ this.$message({
|
|
|
|
+ message: '新增成功',
|
|
|
|
+ type: 'success'
|
|
|
|
+ })
|
|
|
|
+ this.reset()
|
|
|
|
+ this.refersh()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // 添加
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ reset() {
|
|
|
|
+ this.form = new Form()
|
|
|
|
+ this.date1 = []
|
|
|
|
+ this.date2 = []
|
|
|
|
+ },
|
|
|
|
+ checkMoney(e) {
|
|
|
|
+ this.form.currencyMoney = e.match(/^\d*(\.?\d{0,2})/g)[0] || null
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang='scss' scoped>
|
|
|
|
+.edit_add_page {
|
|
|
|
+ padding: 20px;
|
|
|
|
+
|
|
|
|
+ h2 {
|
|
|
|
+ font-size: 24px;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ &::before {
|
|
|
|
+ content: "";
|
|
|
|
+ height: 24px;
|
|
|
|
+ width: 4px;
|
|
|
|
+ background-color: #3a68f2;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: -10px;
|
|
|
|
+ top: 2px;
|
|
|
|
+ display: block;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .content {
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ padding: 0 50px 20px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+
|
|
|
|
+ .el-form {
|
|
|
|
+ .el-form-item {
|
|
|
|
+ label.el-form-item__label {
|
|
|
|
+ font-size: 16px !important;
|
|
|
|
+ color: red !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .photo {
|
|
|
|
+ padding: 70px 100px;
|
|
|
|
+
|
|
|
|
+ .avatar-uploader {
|
|
|
|
+ width: 180px;
|
|
|
|
+
|
|
|
|
+ .el-icon-plus,
|
|
|
|
+ img {
|
|
|
|
+ width: 180px;
|
|
|
|
+ height: 180px;
|
|
|
|
+ line-height: 180px;
|
|
|
|
+ border: 1px #bbb solid;
|
|
|
|
+ border-radius: 4px 4px 0px 4px;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ img {
|
|
|
|
+ border: none;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .footer {
|
|
|
|
+ height: 100px;
|
|
|
|
+ line-height: 100px;
|
|
|
|
+ font-size: 24px;
|
|
|
|
+ position: relative;
|
|
|
|
+ border-top: 1px solid #e0e5eb;
|
|
|
|
+
|
|
|
|
+ .btn_list {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 0;
|
|
|
|
+ top: 0;
|
|
|
|
+ height: 50px;
|
|
|
|
+
|
|
|
|
+ span {
|
|
|
|
+ padding: 0;
|
|
|
|
+ margin: 0;
|
|
|
|
+ width: 100px;
|
|
|
|
+ height: 50px;
|
|
|
|
+ line-height: 50px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+
|
|
|
|
+ &:hover {
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &:nth-child(1) {
|
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
|
+ order: 1px solid rgba(224, 229, 235, 1);
|
|
|
|
+ margin-right: 20px;
|
|
|
|
+ border: 1px solid rgba(224, 229, 235, 1);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &:nth-child(2) {
|
|
|
|
+ background: rgba(58, 104, 242, 1);
|
|
|
|
+ color: #fff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .timeInfo {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #999999;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .el-input {
|
|
|
|
+ width: 400px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|