addCoupon.vue

<template>
  <div class="container">
    <div>
      <div class="title bTitle">优惠券配置</div>
      <van-cell-group class="all">
        <van-cell title="欧亚活动编码" style="font-size:14px;">
          <template slot="default">
            <div class="npbr">
              <van-field
                :value="addForm.cxcode"
                placeholder="请输入欧亚活动编码"
                class="right"
                readonly
                style="font-size:14px;"
                @touchstart.native.stop="codeShow = true"
              /> 
              <van-number-keyboard
                v-model="addForm.cxcode"
                :show="codeShow"
                @blur="codeShow = false"
              />
          </div>
        </template>          
        </van-cell>
        <van-cell title="商户类型" style="font-size:14px;"> 
          <template slot="default">
            <div class="npbr">
              <van-field
                class="right"
                v-model="cxsh"
                placeholder="选择商户类型"
                readonly="readonly"               
                @click="cxshShow = true"
              />
              <van-popup v-model="cxshShow" position="bottom" :overlay="true">
                <van-picker
                  show-toolbar
                  title="商户类型"
                  :columns="storeList"
                  @cancel="cxshShow = false"
                  @confirm="onConfirms"
                  @change="handleStoreTypeChange"
                />
              </van-popup>
            </div>
          </template>
        </van-cell>
        <van-cell title="优惠券名称" style="font-size:14px;">
          <template slot="default">
            <van-field
              v-model="addForm.name"
              placeholder="请输入优惠券名称"
              class="right"
              style="font-size:14px;"
            />
          </template>
        </van-cell>
        <van-cell title="优惠券类型" style="font-size:14px;"> 
          <template slot="default">
            <div class="npbr">
              <van-field
                class="right"
                v-model="addForm.type"
                placeholder="选择优惠券类型"
                readonly="readonly"
                @click="typeShow = true"
              />
              <van-popup v-model="typeShow" position="bottom" :overlay="true">
                <van-picker
                  show-toolbar
                  title="标题"
                  :columns="typeList"
                  @cancel="typeShow = false"
                  @confirm="onConfirm"
                />
              </van-popup>
            </div>
          </template>
        </van-cell>
        <van-cell title="金额" style="font-size:14px;" class="js">
          <template slot="default">
            <van-stepper v-model="addForm.unit" step="1" :show-plus="false" :show-minus="false" />
          </template>
        </van-cell>
        <van-cell title="开始时间" style="font-size:14px;">
          <template slot="default">
            <div class="npbr">
              <van-field
                class="right"
                v-model="beginDate"
                placeholder="选择开始时间"
                readonly="readonly"
                @click="startShow = true"
              />
              <van-popup v-model="startShow" position="bottom" :overlay="true">
                <van-datetime-picker
                  v-model="startTime"
                  type="date"
                  :min-date="minStartDate"
                  @cancel="startShow = false"
                  @confirm="handleStartTime"
                  @change="startTimeChange"
                />
              </van-popup>
            </div>
          </template>
        </van-cell>
        <van-cell title="结束时间" style="font-size:14px;">
          <template slot="default">
            <div class="npbr">
              <van-field
                class="right"
                v-model="endDate"
                placeholder="选择结束时间"
                readonly="readonly"
                @click="endShow = true"
              />
              <van-popup v-model="endShow" position="bottom" :overlay="true">
                <van-datetime-picker
                  v-model="endTime"
                  type="date"
                  :min-date="minEndDate"
                  @cancel="endShow = false"
                  @confirm="handleEndTime"
                  @change="endTimeChange"
                />
              </van-popup>
            </div>
          </template>
        </van-cell>
        <van-cell title="使用说明" style="font-size:14px;">
          <template slot="default">
            <van-field
              v-model="addForm.instruction"
              placeholder="请输入使用说明"
              class="right"
              style="font-size:14px;"
            />
          </template>
        </van-cell>
        <van-cell title="优惠券ID" style="font-size:14px;">
          <template slot="default">
            <div class="npbr">
              <van-field
                class="right noborder"
                readonly
                clickable
                :value="addForm.couponIds"
                placeholder="请输入优惠券ID"
                @touchstart.native.stop="unitShow = true"
              />
              <van-number-keyboard
                v-model="addForm.couponIds "
                :show="unitShow"
                @blur="unitShow = false"
              />
            </div>  
          </template>
        </van-cell>
        <van-cell title="总限制次数" style="font-size:14px;" class="js">
          <van-stepper v-model="addForm.limitOfUse" step="1"  :show-plus="false" :show-minus="false" />
        </van-cell>
        <van-cell title="总限制提示" style="font-size:14px;">
          <template slot="default">
            <van-field
              v-model="addForm.remind"
              placeholder="请输入总限制提示"
              class="right"
              style="font-size:14px;"
            />
          </template>
        </van-cell>
        <van-cell title="编码券使用上限（次）" style="font-size:14px;" class="js" >
          <van-stepper v-model="addForm.usageMax" step="1" :show-plus="false" :show-minus="false" />
        </van-cell>
      </van-cell-group>
      <div class="title">编码券使用规则明细</div>
      <van-cell-group class="all">
        <van-cell title="销售金额" style="font-size:14px;" class="js">
          <van-stepper v-model="addForm.salesAmount" step="1" :min="addForm.usageAmount"  :show-plus="false" :show-minus="false" />
        </van-cell>
        <van-cell title="用券金额" style="font-size:14px;" class="js">
          <van-stepper v-model="addForm.usageAmount" step="1"  :show-plus="false" :show-minus="false" />
        </van-cell>
      </van-cell-group>
    </div>

    <div class="creat">
      <div class="btn-l" @click="handleCancel">取消</div>
      <div class="btn-y" @click="handleSave">保存</div>
    </div>
  </div>
</template>

<script>
import { addCoupon } from "@/api/sidebar/voucher"
export default { 
  data() {
    return {
      minStartDate: null,
      minEndDate: null,
      allLimitShow: false,
      show: false,
      show2: false,
      startTime: new Date(),
      startTime1: "",
      endTime: new Date(),
      endTime1: "",
      startShow: false,
      endShow: false,
      typeShow: false,
      salesAmountShow: false,
      usageAmountShow:false,
      unitShow: false,
      beginDate: '',     
      endDate: '',
      cxsh: '',
      cxshShow: false,
      codeShow: false,
      //
      addForm: {
        cxcode: '',
        cxsh: '',
        name: "",
        begin_date: '',
        end_date: '',     
        type: '',
        unit: '',
        instruction: '',
        limitOfUse: '',
        couponIds: '',
        remind: '',
        usageMax: '',
        salesAmount: '',
        usageAmount: '',
        deptId: '',
        cxcode: '',
        couponId: 126
      },
      typeList: ['现金券'],
      storeList: [       
	      {"keyId":'CS',"text":"超市"},
	      {"keyId":'BG',"text":"百购"},
	      {"keyId":'BH',"text":"百货"}      
      ]
    };
  },
  mounted() {
    this.addForm.deptId = sessionStorage.getItem("oyStallCode")
    this.minStartDate = new Date((new Date()/1000+3600)*1000)
    this.minEndDate = new Date((new Date()/1000+86400)*1000)
  },
  methods: {
    timeFormat(time) {
      let year = 1900 + time.getYear();
      let month = "0" + (time.getMonth() + 1);
      let date = "0" + time.getDate();
      let hour = time.getHours()
      let minute =  time.getMinutes()
      return (
        year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
      );
    },
    startTimeChange(e) {
      let startTimeArr = e.getValues();      
      console.log(startTimeArr,'startTimeArr') 
      this.beginDate = `${startTimeArr[0]}-${startTimeArr[1]}-${startTimeArr[2]}`; 
      this.addForm.begin_date =  this.beginDate     
    },
    handleStartTime(value) {
      this.addForm.begin_date = this.beginDate = this.timeFormat(value)
      this.startShow = false;
    },
    handleEndTime(value) {
      this.addForm.end_date = this.endDate = this.timeFormat(value);
      this.endShow = false;
    },
    endTimeChange(e) {     
      let endTimeArr = e.getValues();
      this.addForm.end_date = this.endDate = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}`
    },
    onConfirm(val,index) {      
      this.typeShow = false
      this.addForm.type = val      
    },
    // 商户类型确定
    onConfirms(val,index) {           
      this.cxshShow = false
      this.cxsh = val.text
      this.addForm.cxsh = val.keyId      
    },
    // 商户类型修改
    handleStoreTypeChange(picker, value, index) {
      this.cxshShow = false
      this.cxsh = value.text
      this.addForm.cxsh = value.keyId
    },
    handleCancel() {
      this.$router.push('coupon')
    },
    handleSave() {
       if(!this.addForm.cxcode ){
          this.$toast("请输入欧亚活动编码")
          return false
        }
      if(!this.addForm.cxsh){
        this.$toast("请选择商户类型")
        return false
      } 
      if(!this.addForm.name ){
          this.$toast("请输入优惠券名称")
          return false
        }
      if(!this.addForm.type){
        this.$toast("请选择优惠券类型")
        return false
      } 
      if(!this.addForm.unit){
        this.$toast("请输入优惠券金额")
        return false
      } 
      if(!this.beginDate){
        this.$toast("请输入开始时间")
        return false
      }
       if(!this.endDate){
        this.$toast("请输入结束时间")
        return false
      }
      if(!this.addForm.couponIds){
          this.$toast("请输入优惠券ID")
          return false
        }
      
      if(!this.addForm.limitOfUse){
        this.$toast("请输入总限制次数")
        return false
      }             
      if(!this.addForm.remind ){
        this.$toast("请输入限制提示")
        return false
      } 
      if(!this.addForm.usageMax){
        this.$toast("请输入编码券使用上限")
        return false
      } 
      if(!this.addForm.salesAmount){
        this.$toast("请输入销售金额")
        return false
      }      
      if(!this.addForm.usageAmount){
        this.$toast("请输入用券金额")
        return false
      } 
      addCoupon(this.addForm).then(res => {
        console.log(res,'res')
        if(res.errorCode == "fail") {
          this.$toast("活动创建失败!")
          }else {
            this.$router.push('coupon')
          }
      })
    }
  }
  
};
</script>
<style></style>

<style scoped>
.js >>> .van-stepper {
  text-align: right;
}
.js >>> .van-stepper__input {
  text-align: center;
  width: 60%;
}
.condition {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.phone {
  margin-right: 10px;
}
.all >>> input {
  text-align: right;
}
.noborder >>> .van-cell:not(:last-child)::after {
  display: none !important;
}
.npbr .van-cell:not(:last-child)::after {
  display: none !important;
}
.creat {
  width: 100%;
  display: flex;
  height: 40px;
  background: rgba(117, 178, 253, 1);
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}
.btn-l,.btn-y {
  display: flex;
  align-items: center;
  height: 100%;
  width: 50%;
  justify-content: center;
}
.btn-l {
  background-color: #fff;
  color: #000;
}
.container {
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background: rgba(248, 248, 248, 1);
  min-height: 100%;
}
.area >>> .van-field__control {
  background: #f8f8f8;
  padding: 12px;
}
.des {
  padding: 5px 18px 0px;
  font-size: 14px;
  color: #2d476a;
}

.title {
  background-color: #f8f8f8;
  height: 36px;
  line-height: 36px;
  font-size: 12px;
  padding-left: 16px;
  color: #2d476a;
}
[data-v-08d4afe1] .van-cell {
  height: 100%;
  font-size: 14px;
}
.right {
  padding: 0;
}
.van-cell__title {
  color: #2d476a !important;
}
.bTitle {
  height: 60px;
  font-size: 18px;
  line-height: 60px;
}
</style>