clearticket_ota/src/views/goodsCenter/priceList/PriceCalendar.vue

<template>
  <el-dialog
    :visible.sync="visible"
    title="价格方案"
    width="780px"
    append-to-body
    @close="handleCancel"
  >
    <div
      class="wrap"
      v-loading="loading">
      <div>
        <div class="block-title">
          基础价格
        </div>
        <el-input
          placeholder="请输入内容"
          v-model="basic_price"
          style="width: 160px">
        </el-input>
      </div>
      <div>
        <div class="block-title">
          周价格
        </div>
        <div
          class="weekWrap"
          style="margin-bottom:30px"
        >
          <div
            class="weekItem"
            v-for="(item,index) in weekDayPriceList"
            :key="index"
          >
            <label>{{ item.label }}</label>
            <el-input
              oninput="value=value.replace(/[^\d.]/g,'')"
              class="priceInput"
              v-model="item.value"
            />
          </div>
        </div>
      </div>

      <div>
        <div class="block-title">
          日期段价格（时间不可重叠）
          <el-button
            class="addBtn"
            type="primary"
            icon="el-icon-plus"
            @click="handleAdd"
            size="small"
          >
            新增
          </el-button>
        </div>
        <div
          class="noData"
          v-if="priceList.length===0"
        >
          暂无
        </div>
        <ul class="priceList">
          <li
            v-for="(item,index) in priceList"
            :key="index"
          >
            <el-date-picker
              class="calendarPicker"
              type="daterange"
              v-model="item.dateRange"
              @change="handleChange($event,item)"
            />
            <el-input-number
              class="priceInput"
              :controls="false"
              v-model="item.price"
            />

            <el-button
              type="danger"
              icon="el-icon-close"
              size="small"
              @click="handleDelete(index)"
            ></el-button>
          </li>
        </ul>
      </div>
      <div
        class="btn-wrap"
        slot="footer">
        <el-button
          size="small"
          @click="visible=false">
          取 消
        </el-button>
        <el-button
          :loading="confirmLoading"
          size="small"
          type="primary"
          @click="handleOk">
          保 存
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import moment from 'moment'

import { getPricePlan, setPricePlan } from '@/api/otaTicketSale'

const week = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

const stragegiesMap = {
  PERIOD: '日期段价格',
  WEEKDAY: '周价格',
  BASIC: '日常价格'
}

export default {
  data () {
    return {
      week,
      stragegiesMap,
      pricecode: '',
      loading: false,
      visible: false,
      confirmLoading: false,
      basic_price: '',
      priceList: [],
      weekDayPriceList: [],
      form: {
        period_price: {
          price: []
        },
        weekday_price: {
          price: {}
        },
        pricecode: 0
      }
    }
  },
  methods: {
    moment,
    show (id) {
      Object.assign(this.$data, this.$options.data())
      this.visible = true
      this.pricecode = id
      this.weekDayPriceList = week.map((val, index) => {
        return {
          label: val,
          value: null
        }
      })
      this.getPricePlan()
    },
    getPricePlan (e) {
      let params = { 'pricecode': this.pricecode }
      this.loading = true
      getPricePlan(params).then(res => {
        try {
          let basicPrice = res.find(v => v.type === 'basic')
          basicPrice && (this.basic_price = basicPrice.price_content)

          let priceList = res.find(v => v.type === 'period')
          priceList && (priceList = JSON.parse(priceList.price_content))
          priceList && priceList.forEach(item => {
            item.dateRange = [new Date(item.start), new Date(item.end)]
          })
          this.priceList = priceList || []

          let weekPrice = res.find(v => v.type === 'weekday')
          weekPrice && (weekPrice = JSON.parse(weekPrice.price_content).price)
          this.weekDayPriceList = week.map((val, index) => {
            return {
              label: val,
              value: (weekPrice && weekPrice[index]) || null
            }
          })
        } catch (e) {
          console.log(e)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleCancel () {
      this.visible = false
    },
    handleChange (event, item) {
      this.$set(item, 'start', moment(event[0]).format('YYYY-MM-DD'))
      this.$set(item, 'end', moment(event[1]).format('YYYY-MM-DD'))
    },
    handleDelete (index) {
      this.$confirm('确定删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.priceList.splice(index, 1)
      }).catch(() => {})
    },
    handleAdd () {
      let lastPrice

      if (this.priceList.length > 0) {
        lastPrice = JSON.parse(JSON.stringify(this.priceList[this.priceList.length - 1]))
      } else {
        lastPrice = { start: new Date(), end: new Date(), price: '' }
      }

      lastPrice.dateRange = [moment(lastPrice.start), moment(lastPrice.end)]

      this.priceList.push({
        ...lastPrice,
        isEdit: true
      })
    },
    handleOk () {
      this.confirmLoading = true
      let weekPrice = this.weekDayPriceList.map(i => i.value)
      weekPrice = Object.assign({}, weekPrice)
      let params = {}
      params = JSON.parse(JSON.stringify(this.form))
      params.period_price.price = this.priceList
      params.weekday_price.price = JSON.parse(JSON.stringify(weekPrice))
      params.pricecode = this.pricecode
      params.basic_price = this.basic_price
      setPricePlan(params).then(res => {
        this.$message.success('设置成功')
        this.handleCancel()
      }).finally(() => {
        this.confirmLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  padding: 20px;
}
.btn-wrap{
  text-align: right; margin-top: 20px;
}
.priceList {
  font-variant: tabular-nums;
  li {
    margin-bottom: 15px;
  }
  .calendarTxt {
    display: inline-block; width: 332px; box-sizing: border-box; padding-right: 30px;margin-right: 20px;text-align: center;
    span {
      display: inline-block; width: 135px;
    }
  }
  .priceTxt {
    display: inline-block; width: 200px; box-sizing: border-box; padding-left: 10px;margin-right: 20px;
    span {
      margin-right: 5px;
    }
  }
  .calendarPicker {
    margin-right: 20px;
  }
  .priceInput {
    display: inline-block; width: 200px; margin-right: 20px;
  }
}

.weekWrap {
  display: flex; justify-content: space-between;
  .weekItem{
    label{
      display: block; text-align: center; margin-bottom: 5px; font-weight: bold;
    }
  }
  .weekItem + .weekItem {
    margin-left: 10px;
  }
  .priceTxt{
    width: 88px; padding: 0 11px; display: inline-block;
    i{
      font-style: normal;
    }
  }
}
.addBtn {
  float: right; margin-bottom: 5px;
}
.noData {padding: 10px;
  text-align: center; border: 1px dashed #ddd;
}

</style>