mp-ui-pc/src/views/business/ticket/components/AwardForm.vue

<template>
  <div>
    <div class="prize">
      <div class="prize-top">
        <div>关联商品列表</div>
      </div>
      <div class="prize-table">
        <el-table :data="goodsList" class="el-table">
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <el-image
                style="width: 70px; height: 70px"
                :src="scope.row.picUrl"
                :preview-src-list="[scope.row.picUrl]"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="title" >
            <template slot-scope="{ row }">
              <div v-if="row.type == 'coin' && row.value >= 0">盲豆 x{{ row.value }}</div>
              <div v-else>{{ row.title }}</div>
            </template>
          </el-table-column>
          <el-table-column label="商品类型">
            <template slot-scope="scope">
              <div v-if="scope.row.type == 'goods'">商品</div>
              <div v-if="scope.row.type == 'coupon'">券</div>
              <div v-if="scope.row.type == 'coupon_pkg'">券包</div>
              <div v-if="scope.row.type == 'coin'">盲豆</div>
            </template>
          </el-table-column>
          <el-table-column label="商品价格">
            <template slot-scope="scope">
              <div v-if="scope.row.type == 'goods'">￥{{ $numberFormat(scope.row.value) }}</div>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="商品成本">
            <template slot-scope="scope">
              <div v-if="scope.row.type == 'goods'">￥{{ $numberFormat(scope.row.cost) }}</div>
              <span v-else>--</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleDel()"
              >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="prize-btn">
<!--          <el-button type="primary" :disabled="goodsList.length > 0" size="small" @click="goodsCommand('goods', 0)">-->
<!--            添加商品-->
<!--          </el-button>-->
        <el-dropdown @command="goodsCommand($event, 0)">
          <el-button type="primary" size="small"  :disabled="goodsList.length > 0">
            添加商品<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="goods">商品</el-dropdown-item>
            <el-dropdown-item command="coupon">券</el-dropdown-item>
            <el-dropdown-item command="coupon_pkg">券包</el-dropdown-item>
<!--            <el-dropdown-item command="coin">盲豆</el-dropdown-item>-->
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AwardForm",
  props: {
    value: {
      type: Array,
      default: () => []
    },
    id: {
      type: [String,Number],
      default: false,
    },
  }, data() {
    return {
      boxId: this.$route.query.id,
      awardsLabelList: [],//关联奖级列表
      prizeIndex: 0, // 奖级下标
      // 奖级列表
      goodsList: [],
      ticketType: '',
    };
  },
  created() {
  },
  methods: {
    // 添加奖品
    add(type,item) {
      this.goodsList = item
      this.$emit('input', this.goodsList)
      this.$emit('close')
    },

    // 选择奖品种类
    goodsCommand(e, index) {
      this.$emit('goodsCommand', e)
    },

    // 奖级商品删除
    handleDel(index, item) {
      this.goodsList = []
      this.$emit('input', this.goodsList)
    },
  },
};
</script>
<style lang="scss" scoped>
.prize {
  width: 100%;
  margin-bottom: 50px;
  background: #f9f9f9;
  border: 1px solid #bbbbbb;
  font-size: 14px;
  &-top {
    padding: 10px 20px;
    margin-bottom: 10px;

    border-bottom: 1px solid #bbbbbb;
    div {
      line-height: 36px;
    }
  }
  &-btn {
    border-top: 1px solid #bbbbbb;
    padding: 10px;
  }
}
</style>