| | |
| | | <template> |
| | | <GlobalWindow :title="param.id ? '编辑套餐' : '新建套餐'" :visible.sync="isShowModal" :confirm-working="isLoading" |
| | | width="1000px" @close="close" @confirm="confirm"> |
| | | 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="类型"> |
| | | <el-select class="w200" :disabled="true" v-model="param.warehouseId"> |
| | | <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> |
| | | <el-radio v-model="param.aa" label="1">不限制</el-radio> |
| | | <el-radio v-model="param.aa" label="2">限制时长</el-radio> |
| | | <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="销售价"> |
| | | <el-input class="w200" v-model="param.name" placeholder="请输入价格" v-trim /> |
| | | <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.name" placeholder="请输入展示的划线价" v-trim /> |
| | | <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="销售渠道"> |
| | | <el-checkbox v-model="param.ada">小程序端</el-checkbox> |
| | | <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: 'ywPatrol/' }" @uploadSuccess="uploadAvatarSuccess" @uploadEnd="isUploading = false" |
| | | :uploadData="{ folder: 'DISCOUNT/' }" @uploadSuccess="uploadAvatarSuccess" @uploadEnd="isUploading = false" |
| | | @uploadBegin="isUploading = true" /> |
| | | <div class="img_place"> |
| | | <div>上传图片不允许涉及政治敏感与色情;</div> |
| | |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item label="套餐简介"> |
| | | <el-input class="w400" v-model="param.name" placeholder="请输入套餐简介" v-trim /> |
| | | <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> |
| | |
| | | <div>适用规则</div> |
| | | <div class="placeholder9">销售时间、使用时间等设置</div> |
| | | </div> |
| | | <el-form-item label="销售时段"> |
| | | <el-date-picker class="w400" v-model="param.value1" value-format="yyyy-MM-dd" type="daterange" range-separator=" ~ " /> |
| | | <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 label="使用时间" class="mr16"> |
| | | <el-select v-model="param.aaadd" style="width: 140px;"> |
| | | <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="1"></el-option> |
| | | <el-option label="指定日期生效" :value="2"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- <el-form-item label-width="80px" label="固定日期"> |
| | | <el-date-picker v-model="param.value1" value-format="yyyy-MM-dd" type="daterange" range-separator=" ~ " /> |
| | | </el-form-item> --> |
| | | <!-- <el-form-item label-width="60px" label="有效期"> |
| | | <el-input style="width: 130px;" v-model="param.name" placeholder="请输入有效天数" v-trim /> |
| | | </el-form-item> --> |
| | | <el-form-item label-width="0px"> |
| | | <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.dasdas" value-format="yyyy-MM-dd" type="date" /> |
| | | <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.name" placeholder="请输入有效天数" v-trim /> |
| | | <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 label="适用范围"> |
| | | <el-checkbox-group v-model="param.checkList"> |
| | | <el-checkbox label="工作日"></el-checkbox> |
| | | <el-checkbox label="节假日"></el-checkbox> |
| | | </el-checkbox-group> |
| | | <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 label="适用项目"> |
| | | <el-checkbox-group v-model="param.checkList"> |
| | | <el-checkbox label="自行车"></el-checkbox> |
| | | <el-checkbox label="电动车"></el-checkbox> |
| | | </el-checkbox-group> |
| | | <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.name" placeholder="请输入总发售数量" v-trim /> |
| | | <el-input class="w400" v-model="param.saleLimit" oninput="value=value.replace(/^(0+)|[^\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.name" placeholder="请输入单日发售数量" v-trim /> |
| | | <el-input class="w400" v-model="param.saleDayLimit" |
| | | oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 12)" placeholder="请输入单日发售数量" v-trim /> |
| | | <div class="placeholder9">请输入日发售数量,当日销量大于该数量后,不再支持销售;为空表示不限制</div> |
| | | </el-form-item> |
| | | |
| | |
| | | |
| | | <script> |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | // import { fetchList as getStoreList } from '@/api/ywWarehouse' |
| | | // import { ywOutinboundCreate } from '@/api/store/index' |
| | | import { comboAddPost, comboEditPost, comboDetailPost } from '@/api/business/combo.js' |
| | | import UploadAvatarImage from '@/components/common/UploadAvatarImage' |
| | | import { StoreTypeOps, rules } from './config' |
| | | import { rulesCombo } from './config' |
| | | import { Message } from 'element-ui' |
| | | import RichEditor from '@/components/common/RichEditor' |
| | | // import dayjs from 'dayjs' |
| | |
| | | data() { |
| | | return { |
| | | // 表单数据 |
| | | param: { checkList: [], content: '' }, |
| | | 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, |
| | | rules: rulesCombo, |
| | | storeList: [], |
| | | list: [], |
| | | StoreTypeOps: [], |
| | |
| | | }, |
| | | methods: { |
| | | confirm() { |
| | | const { param } = this |
| | | this.$refs['form'].validate((valid) => { |
| | | if (valid) { |
| | | const { param, list } = this |
| | | if (list.length == 0) return Message.warning('请先选择物料信息') |
| | | let count = 0 // 入库数量必填 |
| | | list.forEach(item => { |
| | | if (!item.stock) count++ |
| | | }) |
| | | if (count > 0) return Message.warning('请输入正确的入库数量') |
| | | 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 |
| | | ywOutinboundCreate({ |
| | | ...param, |
| | | recordList: list |
| | | 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 |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | initData() { |
| | | this.$set(this.param, 'doneDate', dayjs().format('YYYY-MM-DD')) |
| | | getStoreList({ capacity: 9999, page: 1, model: { status: 0 } }).then(res => { |
| | | this.storeList = res.records || [] |
| | | }) |
| | | changeType() { |
| | | this.$set(this.param, 'limitTime', null) |
| | | }, |
| | | changeSel(val) { |
| | | const list = val |
| | | list.forEach(item => { |
| | | const index = this.list.findIndex(i => i.id == item.id) |
| | | if (index == -1) { |
| | | item.materialId = item.id |
| | | item.multifile = null |
| | | item.createDate = null |
| | | this.list.push(item) |
| | | } |
| | | }) |
| | | 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) |
| | |
| | | }) |
| | | }, |
| | | close() { |
| | | console.log('------'); |
| | | |
| | | this.isShowModal = false |
| | | this.$emit('close') |
| | | }, |
| | | getDetail(id) { |
| | | getInfoById(id).then(res => { |
| | | getDetail(id, type) { |
| | | comboDetailPost(id).then(res => { |
| | | this.param = res |
| | | this.$set(this.param, 'saleDate', [res.startDate, res.endDate]) |
| | | if (res.useStartDate && res.useEndDate) { |
| | | this.$set(this.param, 'useDate', [res.useStartDate, res.useEndDate]) |
| | | } |
| | | this.$set(this.param, id, type == 'copy' ? null : this.param.id) |
| | | }) |
| | | }, |
| | | } |
| | |
| | | margin-left: 12px; |
| | | } |
| | | } |
| | | |
| | | .img_place{ |
| | | display: flex; |
| | | flex-direction: column; |