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

<template>
  <div>
    <div class="prize" v-for="(item, index) in awardsList" :key="index">
        <div class="prize-top">
          <div>奖级名称：{{ item.name }}</div>
          <div>奖级：{{ item.sort }}</div>
          <div>
            关联奖级：<el-select v-model="item.awardsLabel" style="width: 120px;">
            <el-option v-for="(item,index) in awardsLabelList"  :label="item.dictLabel" :value="item.dictLabel" :key="index"/>
          </el-select>
          </div>
          <div v-if="ticketType == 'offline'">
            奖级数量：
            <el-input-number
              v-model="item.quantity"
              controls-position="right"
              @change="handleChangeAll($event, item)"
              :min="0"
              size="small"
              :disabled="item.isEdit"
            ></el-input-number>
          </div>
          <div v-else>奖级数量：{{ item.quantity }}</div>
        </div>
        <div class="prize-table">
          <el-table :data="item.prizeList" 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.prizeType == '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.prizeType == 'goods'">商品</div>
                <div v-if="scope.row.prizeType == 'coupon'">券</div>
                <div v-if="scope.row.prizeType == 'coupon_pkg'">券包</div>
                <div v-if="scope.row.prizeType == 'coin'">盲豆</div>
              </template>
            </el-table-column>
            <el-table-column label="商品价格">
              <template slot-scope="scope">
                <div v-if="scope.row.prizeType == '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.prizeType == 'goods'">￥{{ $numberFormat(scope.row.cost) }}</div>
                 <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column label="奖品数量" prop="quantity" v-if="ticketType != 'offline'" align="center">
              <template slot-scope="scope">
                <div>
                  <el-input-number
                    v-model="scope.row.quantity"
                    controls-position="right"
                    @change="handleChange($event, index)"
                    :min="1"
                    size="small"
                  ></el-input-number>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="排序" prop="sortWeight" align="center">
              <template slot-scope="scope">
                <div>
                  <el-input-number
                    v-model="scope.row.sortWeight"
                    controls-position="right"
                    :min="0"
                    size="small"
                  ></el-input-number>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDel(scope.$index, item)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="prize-btn">
          <el-dropdown @command="handleCommand($event, index)">
            <el-button type="primary" size="small">
              添加奖品<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: "AwardList",
  props: {
    value: {
      type: Array,
      default: () => []
    },
    id: {
      type: [String,Number],
      default: false,
    },
  },
  data() {
    return {
      awardsLabelList: [],//关联奖级列表
      prizeIndex: 0, // 奖级下标
      // 奖级列表
      awardsList: [
        {
          name: "奖品一",
          sort: 1,
          quantity: 0,
          prizeList: [],
        },
        {
          name: "奖品二",
          sort: 2,
          quantity: 0,
          prizeList: [],
        },
        {
          name: "奖品三",
          sort: 3,
          quantity: 0,
          prizeList: [],
        },
        {
          name: "奖品四",
          sort: 4,
          quantity: 0,
          prizeList: [],
        },
        {
          name: "奖品五",
          sort: 5,
          quantity: 0,
          prizeList: [],
        },
        {
          name: "奖品六",
          sort: 6,
          quantity: 0,
          prizeList: [],
        },
        {
          name: "奖品七",
          sort: 7,
          quantity: 0,
          prizeList: [],
        },
        {
          name: "奖品八",
          sort: 8,
          quantity: 0,
          prizeList: [],
        },
        {
          name: "奖品九",
          sort: 9,
          quantity: 0,
          prizeList: [],
        },
        {
          name: "奖品十",
          sort: 10,
          quantity: 0,
          prizeList: [],
        },
        {
          name: "奖品十一",
          sort: 11,
          quantity: 0,
          prizeList: [],
        },
        {
          name: "奖品十二",
          sort: 12,
          quantity: 0,
          prizeList: [],
        },
      ],
      ticketType: '',
    };
  },
  created() {
    this.getAwardsLabelList()
  },
  methods: {
    //获取关联奖级
    getAwardsLabelList(){
      this.getDicts('awards_label').then(res=>{
        this.awardsLabelList = res.data
      })
    },
    // 添加奖品
    add(type, item) {
      if(type == 1) {
        this.awardsList[this.prizeIndex].prizeList = this.awardsList[this.prizeIndex].prizeList.concat(item);
      } else if (type == 2) {
        this.awardsList[this.prizeIndex].prizeList.push(item);
      } else if (type == 3) {
        this.awardsList = item
      }
      this.$emit('input', this.awardsList)
      this.$emit('close')
      if (this.ticketType != 'offline' && this.id == 0) {
        this.getQuantity();
      }
    },

    changetype(e) {
      this.ticketType = e
    },

    // 选择奖品种类
    handleCommand(e, index) {
      this.prizeIndex = index;
      this.$emit('handleCommand', e)
    },

    // 改变奖级数量
    handleChangeAll(e, item) {
      this.$set(item, "quantity", e);
      this.$forceUpdate();
      if (this.ticketType != 'offline' && this.id == 0) {
        this.getQuantity();
      }
    },

    // 改变奖品数量
    handleChange(e, index) {
      this.prizeIndex = index;
      this.$forceUpdate();
      if (this.ticketType != 'offline' && this.id == 0) {
        this.getQuantity();
      }
    },

    // 奖级商品删除
    handleDel(index, item) {
      this.prizeIndex = item.sort - 1;
      let list = item.prizeList;
      list.splice(index, 1);
      this.$set(item, "prizeList", list);
      if (this.ticketType != 'offline' && this.id == 0) {
        this.getQuantity();
      }
    },

    // 计算奖级数量
    getQuantity() {
      let num = 0;
        this.awardsList[this.prizeIndex].prizeList.forEach((item) => {
          num += item.quantity;
        });
        this.awardsList[this.prizeIndex].quantity = num;
    },
  },
};
</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;
    display: flex;
    align-content: center;
    justify-content: space-around;
    border-bottom: 1px solid #bbbbbb;
    div {
      line-height: 36px;
    }
  }
  &-btn {
    border-top: 1px solid #bbbbbb;
    padding: 10px;
  }
}
</style>