1

MrShi

2025-03-18 a836f03a5d1fbfa81e147d09ffdfa87ba3975c13

 admin/src/views/combo/components/Edit.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,264 @@
<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>