mp-ui-pc/src/views/business/ticket/detail.vue

<template>
  <div class="app-container">
    <div class="base-info">
      <div class="base-info-title">基础信息</div>
      <el-form label-width="100px">
        <el-form-item label="盲票类型:">
          <span :class="loading ? 'el-icon-loading' : ''"></span>
          {{ info && info.type && info.type.desc }}
        </el-form-item>
        <el-form-item label="盲票组名称:">
          <span :class="loading ? 'el-icon-loading' : ''"></span>
          {{ info && info.title }}
        </el-form-item>
        <el-form-item label="图片:">
          <div class="picUrl">
            <div class="picUrl-item" v-for="(item,index) in info.picUrl" :key="index">
              <el-image style="width: 70px; height: 80px" :src="item" :preview-src-list="info.picUrl"/>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="面值:">
          <span :class="loading ? 'el-icon-loading' : ''"></span>
          {{ info && info.facePrice && $numberFormat(info.facePrice) }}元
        </el-form-item>
        <el-form-item label="售价:">
          <span :class="loading ? 'el-icon-loading' : ''"></span>
          {{ info && info.salePrice && $numberFormat(info.salePrice) }}元
        </el-form-item>
        <el-form-item label="预付售票价:">
          <span :class="loading ? 'el-icon-loading' : ''"></span>
          {{ info && info.prePrice && $numberFormat(info.prePrice) }}元/张
        </el-form-item>
        <el-form-item label="划线价:" v-if="info && info.type && info.type.value == 'online'">
          <span :class="loading ? 'el-icon-loading' : ''"></span>
          {{ info && info.originPrice && $numberFormat(info.originPrice) }}元
        </el-form-item>
        <el-form-item label="盲票总数:">
          <span :class="loading ? 'el-icon-loading' : ''"></span>
          {{ info && info.quantity }}张
        </el-form-item>
        <el-form-item label="每包张数:">
          <span :class="loading ? 'el-icon-loading' : ''"></span>
          {{ info && info.pkgUnit }}张
        </el-form-item>
        <el-form-item label="采购单价:" v-if="info && info.type && info.type.value == 'offline'">
          <span :class="loading ? 'el-icon-loading' : ''"></span>
          {{ info && info.pkgSalePrice && $numberFormat(info.pkgSalePrice) }}元
        </el-form-item>
        <el-form-item label="佣金系数:">
          <span :class="loading ? 'el-icon-loading' : ''"></span>
          {{ info && info.saleCommRate }}%
        </el-form-item>
        <el-form-item label="序列号:">
          <span :class="loading ? 'el-icon-loading' : ''"></span>
          {{ info && info.boxNo }}
        </el-form-item>
        <el-form-item label="销售范围:">
          <span :class="loading ? 'el-icon-loading' : ''"></span>
          <span v-if="info.saleChannelType == 1">所有渠道</span>
          <span v-else>{{ info.channelTitle }}</span>
        </el-form-item>
      </el-form>
      <div class="base-info-title" v-if="goodsList.length > 0">商品设置（购买即可提货）</div>
      <!-- 关联商品设置-->
      <el-row :gutter="10" v-if="goodsList.length > 0">
        <el-col :span="20" :offset="2">
          <div class="prize">
            <div class="prize-toptwo">
              <div>关联商品列表</div>
            </div>
            <div class="prize-table">
              <el-table :data="goodsList" class="el-table">
                <el-table-column label="商品图片">
                  <template slot-scope="{ row }">
                    <el-image
                      style="width: 70px; height: 70px"
                      :src="row.picUrl"
                      :preview-src-list="[row.picUrl]"
                    >
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column label="商品名称" prop="title">
                  <template slot-scope="{ row }">
                    <div v-if="row.prizeType == 'coin'">盲豆 x{{ row.value }}</div>
                    <div v-else>{{ row.title }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="商品类型" align="center">
                  <template slot-scope="{ row }">
                    <div v-if="row.prizeType == 'goods'">商品</div>
                    <div v-if="row.prizeType == 'coupon'">券</div>
                    <div v-if="row.prizeType == 'coupon_pkg'">券包</div>
                    <div v-if="row.prizeType == 'coin'">盲豆</div>
                  </template>
                </el-table-column>
                <el-table-column label="商品价格">
                  <template slot-scope="{ row }">
                    <div v-if="row.prizeType == 'goods'">￥{{ $numberFormat(row.value) }}</div>
                    <span v-else>--</span>
                  </template>
                </el-table-column>
                <el-table-column label="商品成本">
                  <template slot-scope="{ row }">
                    <div v-if="row.prizeType == 'goods'">￥{{ $numberFormat(row.cost) }}</div>
                    <span v-else>--</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="base-info-title">奖级设置</div>
      <!-- 奖级设置 -->
      <el-row :gutter="10">
       <el-col :span="20" :offset="2">
         <div class="prize" v-for="(item, index) in awardsList" :key="index">
           <div class="prize-top">
             <div>奖级名称：{{ item.name }}</div>
             <div>奖级：{{ item.sort }}</div>
<!--             <div>关联奖级：{{ item.awardsLabel || '-' }}</div>-->
             <div>奖级数量：{{ item.quantity }}</div>
           </div>
           <div class="prize-table">
             <el-table :data="item.prizeList" class="el-table">
               <el-table-column label="奖品图片">
                 <template slot-scope="{ row }">
                   <el-image
                     style="width: 70px; height: 70px"
                     :src="row.picUrl"
                     :preview-src-list="[row.picUrl]"
                   >
                   </el-image>
                 </template>
               </el-table-column>
               <el-table-column label="奖品名称" prop="title">
                 <template slot-scope="{ row }">
                   <div v-if="row.prizeType.value == 'coin'">盲豆 x{{ row.value }}</div>
                   <div v-else>{{ row.title }}</div>
                 </template>
               </el-table-column>
               <el-table-column label="奖品类型" align="center">
                 <template slot-scope="{ row }">
                   <div v-if="row.prizeType.value == 'goods'">商品</div>
                   <div v-if="row.prizeType.value == 'coupon'">券</div>
                   <div v-if="row.prizeType.value == 'coupon_pkg'">券包</div>
                   <div v-if="row.prizeType.value == 'coin'">盲豆</div>
                 </template>
               </el-table-column>
              <el-table-column label="商品价格">
                <template slot-scope="{ row }">
                  <div v-if="row.prizeType.value == 'goods'">￥{{ $numberFormat(row.value) }}</div>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="商品成本">
                <template slot-scope="{ row }">
                  <div v-if="row.prizeType.value == 'goods'">￥{{ $numberFormat(row.cost) }}</div>
                  <span v-else>--</span>
                </template>
              </el-table-column>
<!--               <el-table-column v-if="info && info.type && info.type.value == 'online'" label="奖品数量" prop="quantity" align="center">-->
<!--                 <template slot-scope="{ row }">-->
<!--                   <div>{{ row.quantity }}</div>-->
<!--                 </template>-->
<!--               </el-table-column>-->
               <el-table-column label="已兑数量" prop="cashedQty" align="center" />
               <el-table-column label="排序" prop="sortWeight" align="center">
                 <template slot-scope="{ row }">
                   <div>{{ row.sortWeight }}</div>
                 </template>
               </el-table-column>
             </el-table>
           </div>
         </div>
       </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { publicFileGetUrl } from "@/api/common";
import { ticketBoxDetail } from "@/api/business/ticket";
export default {
  name: "TicketDetail",
  components: {},
  data() {
    return {
      loading: false,
      // 盲票组ID
      boxId: "",
      // 盲票组详情
      info: {},
      // 奖品
      awardsList: [],
      //商品
      goodsList:[{
        picUrl: '',//商品图片
        title: '',//商品名称
        prizeType: {
          value: '',//商品类型
          tape: '',
        },
        value: '',//价格
        cost: '',//成本
      },]
    };
  },
  created() {
    this.boxId = this.$route.query.id;
    this.getDetail();
  },
  methods: {
    // 获取详情
    getDetail() {
      this.loading = true;
      ticketBoxDetail({ boxId: this.boxId })
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            let data = res.data;

            let picUrl = []
            data.picUrl.split(",").forEach(res=>{
              picUrl.push(publicFileGetUrl + res)
            })
            this.info = {
              ...data,
              type: JSON.parse(data.type),
              picUrl: picUrl,
              channelTitle: data.channelList.map(item => item.name).join('，')
            };
            data.awardsList.forEach((item) => {
              item.prizeList.forEach((ele) => {
                (ele.picUrl = publicFileGetUrl + ele.picUrl.split(',')[0]),
                  (ele.prizeType = JSON.parse(ele.prizeType));
              });
            });
            data.goodsList.forEach(item=>{
              (item.picUrl = publicFileGetUrl + item.picUrl.split(',')[0]),
                // (item.prizeType = JSON.parse(item.prizeType).value);
                (item.prizeType = 'goods');
            })
            this.awardsList = data.awardsList;
            this.goodsList = data.goodsList;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.base-info-title {
  padding: 10px;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 20px;
}
.tip {
  padding-left: 100px;
  height: 32px;
  margin-bottom: 20px;
  color: #828282;
  font-size: 14px;
}
.save-btn {
  display: flex;
  align-content: center;
  justify-content: center;
  margin-bottom: 100px;
  .ge {
    width: 100px;
  }
}
.prize {
  width: 100%;
  margin-bottom: 50px;
  background: #f9f9f9;
  border: 1px solid #bbbbbb;
  font-size: 14px;
  &-toptwo {
    padding: 10px 20px;
    margin-bottom: 10px;
    //display: flex;
    //align-content: center;
    //justify-content: space-around;
    border-bottom: 1px solid #bbbbbb;
    div {
      line-height: 36px;
    }
  }
  &-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;
    }
  }
}

.picUrl {
  display: flex;
  &-item {
    margin-right: 40px;
  }
}
</style>