<template>
|
<GlobalWindow :title="param.id ? '编辑套餐' : '新建套餐'" :visible.sync="isShowModal" :confirm-working="isLoading"
|
width="900px" @close="close" @confirm="confirm">
|
<el-form :model="param" label-width="100px" ref="form" :rules="rules">
|
<div class="form_title">基本信息</div>
|
<el-form-item label="套餐名称" prop="name">
|
<el-input class="w200" v-model="param.name" placeholder="请输入套餐名称" v-trim />
|
</el-form-item>
|
<el-form-item label="类型" prop="type">
|
<el-select class="w200" :disabled="true" v-model="param.type">
|
<el-option label="期限卡" :value="0"></el-option>
|
<el-option label="次卡" :value="1"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="每日骑行限制">
|
<div class="df_ac">
|
<div class="mr10">
|
<el-radio @change="changeType" v-model="param.limitType" :label="0">不限制</el-radio>
|
<el-radio @change="changeType" v-model="param.limitType" :label="1">限制时长</el-radio>
|
</div>
|
<el-input v-if="param.limitType == 1" class="w200" v-model="param.limitTime" v-trim />
|
<span v-if="param.limitType == 1" class="ml10">分钟</span>
|
</div>
|
</el-form-item>
|
<el-form-item label="销售价" prop="price">
|
<el-input class="w200"
|
oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
|
v-model="param.price" placeholder="请输入价格" v-trim />
|
</el-form-item>
|
<el-form-item label="划线价">
|
<el-input class="w200" v-model="param.linePrice"
|
oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
|
placeholder="请输入展示的划线价" v-trim />
|
</el-form-item>
|
<el-form-item label="销售渠道" prop="channel">
|
<el-checkbox v-model="param.channel" disabled :true-label="0" :false-label="1">小程序端</el-checkbox>
|
</el-form-item>
|
<el-form-item label="套餐图片">
|
<div class="df_ac">
|
<UploadAvatarImage :file="{ 'imgurlfull': param.fileFullUrl, 'imgurl': param.fileUrl }"
|
:uploadData="{ folder: 'DISCOUNT/' }" @uploadSuccess="uploadAvatarSuccess" @uploadEnd="isUploading = false"
|
@uploadBegin="isUploading = true" />
|
<div class="img_place">
|
<div>上传图片不允许涉及政治敏感与色情;</div>
|
<div>图片格式必须为：png,PNG,jpeg,jpg,JPG；不可大于2M；建议使用</div>
|
<div>ng格式图片，以保持最佳效果；建议图片尺寸为144px*144px</div>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="套餐简介">
|
<el-input class="w400" v-model="param.descs" placeholder="请输入套餐简介" v-trim />
|
</el-form-item>
|
<el-form-item label="套餐描述">
|
<RichEditor :content="{ content: param.content }" @edit="param.content = $event"></RichEditor>
|
</el-form-item>
|
<div class="form_title">
|
<div>适用规则</div>
|
<div class="placeholder9">销售时间、使用时间等设置</div>
|
</div>
|
<el-form-item label="销售时段" prop="saleDate">
|
<el-date-picker class="w400" v-model="param.saleDate" value-format="yyyy-MM-dd" type="daterange"
|
range-separator=" ~ " />
|
</el-form-item>
|
<div class="df_ac">
|
<el-form-item prop="useType" label="使用时间" class="mr16">
|
<el-select @change="changeUseDate" v-model="param.useType" style="width: 140px;">
|
<el-option label="固定日期" :value="0"></el-option>
|
<el-option label="购买后生效" :value="1"></el-option>
|
<el-option label="指定日期生效" :value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="param.useType == 0" label-width="80px" label="固定日期">
|
<el-date-picker v-model="param.useDate" value-format="yyyy-MM-dd" type="daterange" range-separator=" ~ " />
|
</el-form-item>
|
<el-form-item v-if="param.useType == 1" label-width="60px" label="有效期">
|
<el-input style="width: 130px;" oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 8)"
|
v-model="param.useDays" placeholder="请输入有效天数" v-trim />
|
<span class="ml10">天</span>
|
</el-form-item>
|
<el-form-item v-if="param.useType == 2" label-width="0px">
|
<div class="df_ac">
|
<el-date-picker class="w200" v-model="param.useStartDate" value-format="yyyy-MM-dd" type="date" />
|
<span class="ml10 mr10">开始生效，有效期</span>
|
<el-input style="width: 130px;" v-model="param.useDays"
|
oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 8)" placeholder="请输入有效天数" v-trim />
|
<span class="ml10">天</span>
|
</div>
|
</el-form-item>
|
</div>
|
<el-form-item :prop="param.useWorkday == 1 ? 'useWorkday' : 'useHoliday'" label="适用范围">
|
<div class="df_ac">
|
<el-checkbox v-model="param.useWorkday" :true-label="1" :false-label="0" label="工作日"></el-checkbox>
|
<el-checkbox v-model="param.useHoliday" :true-label="1" :false-label="0" label="节假日"></el-checkbox>
|
</div>
|
</el-form-item>
|
<el-form-item :prop="param.isbike == 1 ? 'isbike' : 'iselecbike'" label="适用项目">
|
<div class="df_ac">
|
<el-checkbox v-model="param.isbike" :true-label="1" :false-label="0" label="自行车"></el-checkbox>
|
<el-checkbox v-model="param.iselecbike" :true-label="1" :false-label="0" label="电动车"></el-checkbox>
|
</div>
|
</el-form-item>
|
<el-form-item label="总限额">
|
<el-input class="w400" v-model="param.saleLimit" oninput="value=value.replace(/^(-1+)|[^\d]+/g, '').slice(0, 12)"
|
placeholder="请输入总发售数量" v-trim />
|
<div class="placeholder9">请输入总发售数量，销量大于该数量后，不再支持销售；为空表示不限制</div>
|
</el-form-item>
|
<el-form-item label="日限额">
|
<el-input class="w400" v-model="param.saleDayLimit"
|
oninput="value=value.replace(/^(-1+)|[^\d]+/g, '').slice(0, 12)" placeholder="请输入单日发售数量" v-trim />
|
<div class="placeholder9">请输入日发售数量，当日销量大于该数量后，不再支持销售；为空表示不限制</div>
|
</el-form-item>
|
|
|
|
</el-form>
|
<!-- -->
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { comboAddPost, comboEditPost, comboDetailPost } from '@/api/business/combo.js'
|
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
|
import { rulesCombo } from './config'
|
import { Message } from 'element-ui'
|
import RichEditor from '@/components/common/RichEditor'
|
// import dayjs from 'dayjs'
|
export default {
|
name: 'OperaCategoryWindow',
|
components: { GlobalWindow, UploadAvatarImage, RichEditor },
|
data() {
|
return {
|
// 表单数据
|
param: {
|
type: 0,
|
limitType: 0,
|
channel: 0,
|
useType: 0,
|
useWorkday: 1,
|
useHoliday: 0,
|
iselecbike: 0,
|
isbike: 1,
|
|
checkList: [],
|
content: ''
|
},
|
isShowModal: false,
|
isShowSel: false,
|
isLoading: false,
|
isUploading: false,
|
// 验证规则
|
rules: rulesCombo,
|
storeList: [],
|
list: [],
|
StoreTypeOps: [],
|
|
dataList: [],
|
}
|
},
|
created() {
|
// this.initData()
|
|
},
|
methods: {
|
confirm() {
|
const { param } = this
|
this.$refs['form'].validate((valid) => {
|
if (valid) {
|
if (param.useDate && param.useDate.length > 0) {
|
param.useStartDate = param.useDate[0]
|
param.useEndDate = param.useDate[1]
|
} else {
|
param.useStartDate = param.useType == 2 ? param.useStartDate : null
|
param.useEndDate = null
|
}
|
if (param.saleDate && param.saleDate.length > 0) {
|
param.startDate = param.saleDate[0]
|
param.endDate = param.saleDate[1]
|
} else {
|
param.startDate = null
|
param.endDate = null
|
}
|
this.isLoading = true
|
let fn = param.id ? comboEditPost : comboAddPost
|
fn({
|
...param
|
}).then(res => {
|
this.isLoading = false
|
if (res) {
|
Message.success('提交成功')
|
this.$emit('success')
|
this.close()
|
}
|
}, () => {
|
this.isLoading = false
|
})
|
}
|
})
|
},
|
changeType() {
|
this.$set(this.param, 'limitTime', null)
|
},
|
changeUseDate() {
|
this.$set(this.param, 'useDate', null)
|
this.$set(this.param, 'useDays', null)
|
this.$set(this.param, 'useStartDate', null)
|
this.$set(this.param, 'useEndDate', null)
|
},
|
uploadAvatarSuccess(file) {
|
this.$set(this.param, 'fileUrl', file.imgurl)
|
this.$set(this.param, 'fileFullUrl', file.imgurlfull)
|
},
|
handleOpenMaterial() {
|
this.isShowSel = true
|
this.$nextTick(() => {
|
this.$refs.AssetSelRef.isShowModal = true
|
this.$refs.AssetSelRef.getList()
|
})
|
},
|
close() {
|
console.log('------');
|
|
this.isShowModal = false
|
this.$emit('close')
|
},
|
getDetail(id, type) {
|
comboDetailPost(id).then(res => {
|
this.param = res
|
this.$set(this.param, 'saleDate', [res.startDate, res.endDate])
|
if (res.useStartDate && res.useEndDate && res.useType != 2) {
|
this.$set(this.param, 'useDate', [res.useStartDate, res.useEndDate])
|
}
|
this.$set(this.param, 'id', type == 'copy' ? null : this.param.id)
|
})
|
},
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
@import "@/assets/style/variables.scss";
|
|
.form_title {
|
display: flex;
|
align-items: center;
|
color: $primary-color;
|
margin-bottom: 16px;
|
|
.placeholder9 {
|
color: #999999;
|
font-size: 12px;
|
margin-left: 12px;
|
}
|
}
|
|
.img_place {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
margin-left: 12px;
|
color: #999999;
|
font-size: 12px;
|
padding: 8px 0;
|
}
|
</style>
|
