经销商管理

doum

5 天以前 c25fecae568a074e338bce625a92960aca859fb8

 admin/src/components/business/OperaMemberCouponWindow.vue

@@ -1,92 +1,58 @@
<template>
  <GlobalWindow
      :title="title"
      width="80%"
      width="60%"
      :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="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" >
        <div class="coupon-rule">
          <div class="discrep">订单满</div>
          <el-input v-model="form.limitPrice"   placeholder="请输入"     @input="inputAction(form, 'limitPrice')"
          >
            <template slot="append">元</template>
          </el-input>
          <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="info">
        <el-input type="textarea" v-model="form.info" placeholder="请输入优惠券说明"  v-trim/>
      </el-form-item>
      <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-form-item label="发放对象" prop="applyType">
        <el-radio-group v-model="form.addType">
          <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 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"
          ></el-date-picker>
        </div>
      </el-form-item>
      <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')"
      <el-form-item v-if="form.addType===0" label="选择用户" prop="addMemberIds" >
          <el-select  v-model="form.addMemberIds" placeholder="请输入会员昵称/手机号，再选择" clearable     filterable    remote  reserve-keyword    :remote-method="remoteMethod"
              :loading="searchLoading"
                      style="width: 400px;"
          >
            <template slot="append">天</template>
          </el-input>
          <div class="discrep">有效</div>
        </div>
            <el-option
                v-for="item in users"
                :key="item.id"
                :label="item.nickname+'  '+(item.phone||'')"
                :value="item.id">
            </el-option>
          </el-select>
      </el-form-item>
      <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 v-if="form.addType===1" label="指定手机号" prop="addMemberPhones" >
        <el-input  style="width: 400px;"  type="textarea"   v-model="form.addMemberPhones"   placeholder="请输入手机号"   v-trim/>
        <p class="tip-warn" style="margin-bottom: 1px;"><i class="el-icon-warning"></i>提醒：多个手机号，请换行输入</p>
      </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>
      <el-form-item label="发放内容" prop="num">
        <div  style="border: 1px solid #f2f2f2">
          <el-table style="width: 600px;"  :data="form.addCouponList">
            <el-table-column prop="name" label="优惠券" min-width="300px" align="center">
              <template slot-scope="{row}" >
                <el-select v-model="row.couponId" style="width: 200px;margin: 0px 20px" clearable filterable   placeholder="请选择优惠券"  >
                  <el-option v-for="item in couponList"   :label="item.name"  :value="item.id">  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="num" label="数量" min-width="200px" align="center">
              <template slot-scope="{row}" >
                <el-input  style="width: 150px;margin: 0px 20px" type="number"   v-model="row.num"   placeholder="请输入数量"   v-trim/>
              </template>
            </el-table-column>
            <el-table-column  label="操作" min-width="100px" align="center">
              <template slot-scope="scope" >
                <el-button style="color: red;border: none;" @click="delCoupon( scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button s type="primary" icon="el-icon-plus" @click="addCoupon()" style="height: 30px;margin: 10px;">添加</el-button>
        </div>
      </el-form-item>
    </el-form>
@@ -96,226 +62,103 @@

<script>
import BaseOpera from '@/components/base/BaseOpera'
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'
import { allList } from '@/api/business/coupon'
import { findAll, findAll as memberlist } from '@/api/business/member'
export default {
  name: 'OperaCouponWindow',
  extends: BaseOpera,
  components: { GlobalWindow,OperaCouponGoodsWindow },
  components: { GlobalWindow, OperaCouponGoodsWindow },
  data () {
    const couponRules = (rule, value, callback) => {
      if (!this.form.limitPrice) {
        callback(new Error('请输入满额'))
      } else if (!this.form.price) {
        callback(new Error('请完善优惠规则'))
      if (!this.form.addCouponList || !this.form.addCouponList.length) {
        callback(new Error('请选择优惠券信息'))
      } else {
        callback()
      }
    }
    const getDateRules = (rule, value, callback) => {
      if (!this.form.startDate) {
        callback(new Error('请选择开始时间'))
      } else if (!this.form.endDate) {
        callback(new Error('请输入结束时间'))
      } else {
        callback()
      }
    }
    const numRule = (rule, value, callBack) => {
      if (value < 0) {
        callBack(new Error())
      } else {
        callBack()
        var r = true
        this.form.addCouponList.forEach(item => {
          if (!item.id || !item.num) {
            r = false
          }
        })
        if (!r) {
          callback(new Error('请完善优惠券信息'))
        } else {
          callback()
        }
      }
    }
    return {
      searchLoading: false,
      getDate: [],
      applyDataList:[],
      showGoods:false,
      couponList: [],
      users: [],
      // 表单数据
      form: {
        id: null,
        name: '',
        couponType: 0,
        applyType: 0,
        useType: 0,
        shopId: '',
        applyIdList: [],
        applyCateIdList: [],
        type: 0,
        limitPrice: '',
        price: '',
        startDate: '',
        endDate: '',
        applyIds: '',
        validDays: '',
        getMethod: '',
        integral: '',
        status: '',
        num: '',
        info: ''
        addType: 0,
        addMemberIds: null,
        addMemberPhones: null,
        addCouponList: [{ id: null, num: null }]
      },
      shops: [],
      categorys: [],
      // 验证规则
      rules: {
        name: [
          { required: true, message: '请输入优惠券名称', tigger: 'blur' }
        addType: [
          { required: true, message: '请选择发放对象' }
        ],
        couponRule: [
        addCouponList: [
          { 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' }
        ],
        /*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' }
        // ]
        ]
      }
    }
  },
  created () {
    this.config({
      api: '/business/coupon',
      api: '/business/memberCoupon',
      'field.id': 'id'
    })
  },
  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)
          this.form[this.configData['field.id']] = null
        })
        return
      }
      // 编辑
      this.$nextTick(() => {
        for (const key in this.form) {
          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) {
      this.form.startDate = value[0]
      this.form.endDate = value[1]
    },
    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, '')
      }
    },
    remoteMethod (query) {
      if (query !== '') {
        this.searchLoading = true
        const action = this.form.type == 2 ? activityList : shopList
        action({
        findAll({
          capacity: 999,
          model: {
            name: query
            nickname: query,
            status: 0
          }
        })
          .then(res => {
            this.shops = res.records
            this.users = res
          })
          .finally(() => {
            this.searchLoading = false
          })
      }
    },
    getCouponList () {
      allList({status:0})
        .then(res => {
          if (res) {
            this.couponList = res || []
          }
        })
    },
    delCoupon (index) {
      this.form.addCouponList.splice(index, 1)
    },
    addCoupon (type) {
      this.form.addCouponList.push({ id: null, num: null })
    },
    open (title, target, type) {
      this.title = title
      this.visible = true
      this.form.addMemberIds=null
      this.form.addMemberPhones=null
      this.form.addType = 0
      this.form.addCouponList = [{id:null,num:null}]
      this.getCouponList()
    }
  }
}