mp-ui-pc/src/views/business/couponPkg/create.vue

<template>
  <div class="app-container coupon-add">
    <el-row  style="width: 700px">
        <el-form ref="addItem" :model="addData" :rules="rules" label-width="100px">
          <el-form-item label="券包名称:" prop="title">
            <el-input v-model="addData.title" :readonly="readonly" placeholder="请输入券包名称" :maxlength="32" show-word-limit />
          </el-form-item>
        </el-form>
    </el-row>
    <br>
    <el-button v-if="!readonly" type="primary" size="small" plain @click="$refs.select.show()">添加优惠券</el-button>
    <br>
    <br>
    <span style="font-size: 14px; line-height: 40px">面值总额：￥{{ addData.ticketBoxList.length }}</span>
    <span style="margin-left: 80px;font-size: 14px; line-height: 40px">优惠券数量：{{ addData.ticketBoxList.length }}</span>
    <el-table v-if="addData.useArea === 5" :data="addData.ticketBoxList">
      <el-table-column label="券编号" prop="" align="center" />
      <el-table-column label="券名称" prop="title" />
      <el-table-column label="券金额" prop="facePrice" />
      <el-table-column label="使用场景" prop="type">
        <template slot-scope="{row}">
          {{ JSON.parse(row.type).desc }}
        </template>
      </el-table-column>
      <el-table-column label="数量" prop="title" />
      <el-table-column label="有效期限" prop="status">
        <template slot-scope="{row}">
          <el-tag :type="JSON.parse(row.status).value === 'on' ? 'success' : 'info'">{{ JSON.parse(row.status).desc }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="!readonly" prop="date" label="操作">
        <template slot-scope="{ $index }">
          <el-button type="text" class="del" @click="addData.ticketBoxList.splice($index, 1)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-row v-if="!readonly">
      <el-col :span="23" style="text-align: right">
        <el-button type="info" @click="$router.go(-1)">取消</el-button>
        <el-button :loading="addIng" type="primary" @click="update()">保存</el-button>
      </el-col>
    </el-row>
    <!-- 弹出层 -->
    <SelectTicket ref="select" v-model="addData.ticketBoxList" />
  </div>
</template>
<script>
import Upload from '@/components/ImageUpload'
import SelectTicket from '../couponPkg/components/selectTicket'
import { publicFileGetUrl } from '@/api/common'
import { getCouponDetail, addCoupon } from '@/api/business/coupon'
import { accDiv, accMul } from '@/utils/util'
import {addData} from "../../../api/system/dict/data";
export default {
  components: {
    Upload,
    SelectTicket
  },
  data() {
    return {
      IMG_URL: publicFileGetUrl,
      id: this.$route.query.id,
      readonly: this.$route.name === 'CouponPkgQuery',
      addData: {
        ticketBoxList:[],
        useArea: 5,
        type: 2,
      },
      addIng: false,
      rules: {
        title: [{ required: true, message: '请输入券包名称', trigger: 'blur' }]
      }

    };
  },
  methods: {},
};
</script>
<style>
</style>