优化

MrShi

昨天 4eac422e52a4d28fb651b75d0f054697c7a2c0fa

 admin/src/components/business/OperaMemberCouponWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,208 @@
<template>
  <GlobalWindow
      :title="title"
      width="60%"
      :visible.sync="visible"
      :confirm-working="isWorking"
      @confirm="confirm"
  >
    <p class="tip-warn" style="margin: 30px;"><i class="el-icon-warning"></i>操作说明：定向发放不受发放总数限制，定向发放优惠券不计入优惠券已发放统计</p>
    <el-form :model="form" ref="form" :rules="rules" label-width="120px" label-suffix="：" inline>
      <el-form-item label="发放对象" prop="addType" >
        <el-radio-group v-model="form.addType" @change="changeType">
          <el-radio :label="0">指定会员</el-radio>
          <el-radio :label="1">指定手机号</el-radio>
          <el-radio :label="2">全部会员</el-radio>
        </el-radio-group>
      </el-form-item>
      <div  v-if="form.addType===0" id="bbb">
      <el-form-item label="选择用户" prop="addMemberIds" >
          <el-select  v-model="form.addMemberIds" placeholder="请输入会员昵称/手机号，再选择" clearable     filterable    remote  reserve-keyword    :remote-method="remoteMethod"
              :loading="searchLoading"
                      style="width: 400px;"
          >
            <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>
      </div>
      <div  v-if="form.addType===1" id="aaaa">
      <el-form-item  label="手 æœº å·" prop="addMemberPhones" >
        <el-input  style="width: 400px;"  type="textarea"   v-model="form.addMemberPhones"   placeholder="请输入手机号"   v-trim/>
        <p class="tip-warn" style="margin-bottom: 2px;"><i class="el-icon-warning"></i>提醒：多个手机号，请换行输入</p>
      </el-form-item>
      </div>
      <el-form-item label="发放内容" prop="addCouponList" style="margin-top: 20px" >
        <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.id" 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>
  </GlobalWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import { allList } from '@/api/business/coupon'
import { findAll as memberlist } from '@/api/business/member'
export default {
  name: 'OperaCouponWindow',
  extends: BaseOpera,
  components: { GlobalWindow },
  data () {
    const couponRules = (rule, value, callback) => {
      if (!this.form.addCouponList || !this.form.addCouponList.length) {
        callback(new Error('请选择优惠券信息'))
      } else {
        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,
      couponList: [],
      users: [],
      // è¡¨å•æ•°æ®
      form: {
        addType: 0,
        addMemberIds: null,
        addMemberPhones: null,
        addCouponList: [{ id: null, num: null }]
      },
      shops: [],
      categorys: [],
      // éªŒè¯è§„则
      rules: {
        addType: [
          { required: true, message: '请选择发放对象' }
        ],
        addMemberIds: [
          { required: true, message: '请选中人员信息' }
        ],
        addMemberPhones: [
          { required: true, message: '请指定人员手机号' }
        ],
        addCouponList: [
          { required: true, validator: couponRules, tigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.config({
      api: '/business/memberCoupon',
      'field.id': 'id'
    })
  },
  methods: {
    changeType(t){
      this.$refs.form.validate()
    },
    remoteMethod (query) {
      if (query !== '') {
        this.searchLoading = true
        memberlist({
          capacity: 999,
          model: {
            nickname: query,
            status: 0
          }
        })
          .then(res => {
            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()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/style/alertstyle.scss';

.coupon-rule {
  display: flex;
  .discrep {
    padding: 0 10px;
  }
  ::v-deep .el-input {
    width: 160px;
  }
}
.num-style {
  ::v-deep .el-input-number {
    width: 60%;
  }
}
.date-style {
  ::v-deep input {
    text-align: center !important;
  }
}
::v-deep .el-select {
  width: 100%;
  .el-input__inner {
    width: 100%;
  }
}

</style>