经销商管理

doum

8 天以前 d8689abdb2378bdd1c97317ca881173eca26283c

 admin/src/components/business/OperaCouponWindow.vue

@@ -1,116 +1,121 @@
<template>
  <GlobalAlertWindow
    :title="title"
    :visible.sync="visible"
    :confirm-working="isWorking"
    @confirm="confirm"
  <GlobalWindow
      :title="title"
      width="80%"
      :visible.sync="visible"
      :confirm-working="isWorking"
      @confirm="confirm"
  >
    <el-form :model="form" ref="form" :rules="rules" label-width="120px" label-suffix="：" inline>
      <p class="tip-header" >基本属性</p>
      <el-form-item label="优惠券名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入优惠券名称" :maxlength="12" v-trim/>
      </el-form-item>
      <el-form-item label="优惠券说明" prop="info">
        <el-input v-model="form.info" placeholder="请输入优惠券说明" :maxlength="30" v-trim/>
      <el-form-item label="类型" prop="couponType">
          <el-radio-group v-model="form.couponType">
            <el-radio :label="0" >满减券</el-radio>
            <el-radio :label="1">折扣券</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="优惠规则" prop="couponRule">
      <el-form-item label="优惠规则" prop="couponRule" >
        <div class="coupon-rule">
          <div class="discrep">订单满</div>
          <el-input
            v-model="form.limitPrice"
            placeholder="请输入"
            @input="inputAction(form, 'limitPrice')"
          <el-input v-model="form.limitPrice"   placeholder="请输入"     @input="inputAction(form, 'limitPrice')"
          >
            <template slot="append">元</template>
          </el-input>
          <div class="discrep">减</div>
          <el-input
            v-model="form.price"
            placeholder="请输入"
            @input="inputAction(form, 'price')"
          >
            <template slot="append">元</template>
          <div class="discrep" >{{form.couponType === 1?'，享':'，减'}}</div>
          <el-input  v-model="form.price"     placeholder="请输入"    @input="inputAction(form, 'price')"  >
            <template slot="append" >{{form.couponType ===1?'折':'元'}}</template>
          </el-input>
        </div>
      </el-form-item>
      <el-form-item label="发放总量" prop="num">
        <div class="num-style">
          <el-input-number step-strictly v-model="form.num" :controls="false" :min="1" :max="99999" placeholder="请输入发放总量(1~99999)" v-trim></el-input-number>
        </div>
      <el-form-item label="优惠券说明" prop="info">
        <el-input type="textarea" v-model="form.info" placeholder="请输入优惠券说明"  v-trim/>
      </el-form-item>
      <el-form-item v-if="form.type==1" label="兑换条件" prop="integral">
        <el-input-number step-strictly v-model="form.integral" :controls="false" :min="1" :max="99999" placeholder="请输入" v-trim/> 咖豆兑换一张优惠券
      <p class="tip-header" >使用限制</p>
      <el-form-item label="有效期" prop="useType">
        <el-radio-group v-model="form.useType">
          <el-radio :label="0">固定时段</el-radio>
          <el-radio :label="1">固定时长</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="可领取时间" prop="getDate">
      <el-form-item label="使用时段" prop="getDate" v-if="form.useType===0">
        <div class="date-style">
          <el-date-picker
            v-model="getDate"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="selectDate"
              v-model="getDate"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="selectDate"
          ></el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="可用时间" prop="validDays">
        <!-- <el-input v-model="form.validDays" placeholder="请输入领取后有效天数" v-trim/> -->
      <el-form-item label="固定时长" prop="validDays" v-if="form.useType===1">
        <div class="coupon-rule">
          <div class="discrep">领劵后</div>
          <el-input
            v-model="form.validDays"
            placeholder="请输入"
            @input="inputAction(form, 'validDays')"
              v-model="form.validDays"
              placeholder="请输入"
              @input="inputAction(form, 'validDays')"
          >
            <template slot="append">天</template>
          </el-input>
          <div class="discrep">内有效，领取后立即生效</div>
          <div class="discrep">有效</div>
        </div>
      </el-form-item>
      <el-form-item v-if="form.type==0" label="关联店铺" prop="shopId">
        <el-select
          v-model="form.shopId"
          placeholder="请输入店铺名称，再选择"
          filterable
          remote
          reserve-keyword
          :remote-method="remoteMethod"
          :loading="searchLoading"

        >
          <el-option
            v-for="item in shops"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
      <el-form-item label="适用对象" prop="applyType">
        <el-radio-group v-model="form.applyType">
          <el-radio :label="0">全场通用</el-radio>
          <el-radio :label="1">按品类</el-radio>
          <el-radio :label="2">指定商品</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.applyType===1" label="选择品类" prop="applyCateIdList" >
        <el-select v-model="form.applyCateIdList"  placeholder="请选择,支持多选" filterable multiple clearable >
          <el-option  v-for="item in categorys" :key="'optCate'+item.id"  :label="item.name"  :value="item.id">  </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.applyType===2" label="选择商品" prop="applyIdList" style="display: flex">
          <span style="font-size: 12px;color: #216EEE"   @click="selectGoods">已指定【 {{applyDataList.length}} 】件商品</span>
        <el-button style="margin-left:30px;display: inline-block;width: 80px;" type="primary"  @click="selectGoods">去选择 </el-button>
      </el-form-item>
      <p class="tip-header" >发放规则</p>
      <el-form-item label="发放总量" prop="num">
        <div class="num-style">
          <el-input-number  v-model="form.num" :controls="false" :min="1" :max="99999" placeholder="请输入发放总量(1~99999)" v-trim></el-input-number>
        </div>
      </el-form-item>
    </el-form>
  </GlobalAlertWindow>
    <OperaCouponGoodsWindow ref="OperaCouponGoodsWindow" @success="doSelect"/>
  </GlobalWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalAlertWindow from '@/components/common/GlobalAlertWindow'
import { fetchList as shopList } from '@/api/business/shop'
import GlobalWindow from '@/components/common/GlobalWindow'
import { findAll as labelList } from '@/api/business/labels'
import { allList as goodsList} from '@/api/business/goods'
import OperaCouponGoodsWindow from '@/components/business/OperaCouponGoodsWindow'
export default {
  name: 'OperaCouponWindow',
  extends: BaseOpera,
  components: { GlobalAlertWindow },
  components: { GlobalWindow,OperaCouponGoodsWindow },
  data () {
    let couponRules = (rule, value, callback) => {
    const couponRules = (rule, value, callback) => {
      if (!this.form.limitPrice) {
        callback(new Error('请输入满额'))
      } else if (!this.form.price) {
        callback(new Error('请输入优惠金额'))
        callback(new Error('请完善优惠规则'))
      } else {
        callback()
      }
    }
    let getDateRules = (rule, value, callback) => {
    const getDateRules = (rule, value, callback) => {
      if (!this.form.startDate) {
        callback(new Error('请选择开始时间'))
      } else if (!this.form.endDate) {
@@ -119,7 +124,7 @@
        callback()
      }
    }
    let numRule = (rule, value, callBack) => {
    const numRule = (rule, value, callBack) => {
      if (value < 0) {
        callBack(new Error())
      } else {
@@ -129,16 +134,24 @@
    return {
      searchLoading: false,
      getDate: [],
      applyDataList:[],
      showGoods:false,
      // 表单数据
      form: {
        id: null,
        name: '',
        couponType: 0,
        applyType: 0,
        useType: 0,
        shopId: '',
        type: '',
        applyIdList: [],
        applyCateIdList: [],
        type: 0,
        limitPrice: '',
        price: '',
        startDate: '',
        endDate: '',
        applyIds: '',
        validDays: '',
        getMethod: '',
        integral: '',
@@ -147,29 +160,39 @@
        info: ''
      },
      shops: [],
      categorys: [],
      // 验证规则
      rules: {
        name: [
          { required: true, message: '请输入优惠券名称', tigger: 'blur' }
        ],
        couponRule: [
          { required: true, validator: couponRules, tigger: 'blur'}
          { required: true, validator: couponRules, tigger: 'blur' }
        ],
        useType: [
          { required: true, message: '请选择有效期方式' }
        ],
        couponType: [
          { required: true, message: '请选择类型' }
        ],
        applyType: [
          { required: true, message: '请选择适用对象类型' }
        ],
        num: [
          { required: true, validator: numRule, message: '请输入发放总数', tigger: 'blur'}
          { required: true, validator: numRule, message: '请输入发放总数', tigger: 'blur' }
        ],
        integral: [
          { required: true, validator: numRule, message: '请输入兑换条件', tigger: 'blur'}
        ],
        validDays: [
          { required: true, message: '请输入可用时间', tigger: 'blur'}
        ],
        getDate: [
          { required: true, validator: getDateRules, tigger: 'change'}
        ],
        shopId: [
          { required: true, validator: numRule, message: '请选择关联店铺', tigger: 'change'}
        ],
        /*integral: [
          { required: true, validator: numRule, message: '请输入兑换条件', tigger: 'blur' }
        ],*/
        // validDays: [
        //   { required: true, message: '请输入可用时间', tigger: 'blur' }
        // ],
        // getDate: [
        //   { required: true, validator: getDateRules, tigger: 'change' }
        // ],
        // shopId: [
        //   { required: true, validator: numRule, message: '请选择关联店铺', tigger: 'change' }
        // ]
      }
    }
  },
@@ -180,21 +203,62 @@
    })
  },
  methods: {
    selectGoods(){
      this.$refs.OperaCouponGoodsWindow.open('选择商品', this.applyDataList)
    },
    loadLabels(){
      labelList({
        type: 0 // 商品分类
      }).then(res => {
        this.categorys = res || []
      })
    },
    loadSelectGoods(){
      console.log(this.form.applyIdList)
      if(!this.form.applyIdList || !this.form.applyIdList.length){
        return
      }
      goodsList({
        idList: this.form.applyIdList // 商品分类
      }).then(res => {
        this.applyDataList = res || []
      })
    },
    doSelect(rows){
      console.log(rows,this.applyDataList)
      this.applyDataList =[]
      this.form.applyIdList=[]
      if(rows && rows.length){
        rows.forEach(item => {
          this.applyDataList.push(item)
          this.form.applyIdList.push(item.id)
        })
      }
    },
    open (title, target, type) {
      this.showGoods=false
      this.title = title
      this.visible = true
      this.form.type = type
      this.getDate = []
      this.form.startDate = ''
      this.form.endDate = ''
      this.applyDataList=[]
      this.form.applyIdList=[]
      this.form.applyCateIdList=[]
      this.loadLabels()
      this.form.limitPrice=null
      this.form.price=null
      this.form.startDate=null
      this.form.endDate=null
      this.form.num=1
      // 新建
      if (target == null) {
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          console.log(this.form);
          console.log(this.form)
          this.form[this.configData['field.id']] = null
        })

        return
      }
      // 编辑
@@ -203,29 +267,42 @@
          this.form[key] = target[key]
        }
        this.getDate = [target.startDate, target.endDate]
        if(this.form.applyType === 1){
          this.form.applyCateIdList =[]
          var ta = this.form.applyIds.split(',')
          if(ta && ta.length){
            ta.forEach(tt =>{
              this.form.applyCateIdList.push(parseInt(tt))
            })
          }
        }
        if(this.form.applyType === 2){
          this.form.applyIdList = this.form.applyIds.split(',')
          this.loadSelectGoods()
        }
      })
    },
    selectDate(value) {
    selectDate (value) {
      this.form.startDate = value[0]
      this.form.endDate = value[1]
    },
    inputAction(item, key) {
      if(item[key]<0) {
    inputAction (item, key) {
      if (item[key] < 0) {
        item[key] = ''
      } else {
        item[key] = item[key].replace(/[^\d.]/g, '')
                      .replace(/\.{2,}/g, '.')
                      .replace('.', '$#$')
                      .replace(/\./g, '')
                      .replace('$#$', '.')
                      .replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
                      .replace(/^\./g, '')
          .replace(/\.{2,}/g, '.')
          .replace('.', '$#$')
          .replace(/\./g, '')
          .replace('$#$', '.')
          .replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
          .replace(/^\./g, '')
      }
    },
    remoteMethod(query) {
    remoteMethod (query) {
      if (query !== '') {
        this.searchLoading = true
        let action = this.form.type==2 ? activityList : shopList
        const action = this.form.type == 2 ? activityList : shopList
        action({
          capacity: 999,
          model: {
@@ -239,8 +316,8 @@
            this.searchLoading = false
          })
      }
    },
  },
    }
  }
}
</script>