<template>
  <div class="p_all_20">
  <div class="">
        <div class="tit">新品/单品优惠券详情</div>
          <el-form class="form" :model="form" label-width="120px" ref="ruleForm">
            <el-form-item label="优惠券类型：">{{form.type==0?'新品券':'单品券'}}</el-form-item>
              <el-form-item label="发放总量：">{{form.totalNum}}张</el-form-item>
              <el-form-item label="品牌：">{{form.brandName}}</el-form-item>
              
              <el-form-item label="适用商品：">
                  <div class="table-box">                       
                    
                          <el-table :data="form.products" border style="width: 100%">
                              
                              <el-table-column
                                prop="productImg"
                                align="center"
                                label="主图"
                                width="80">
                                  <template slot-scope="scope">
                                  <img :src="scope.row.productImg + '?x-oss-process=image/format,jpg/resize,h_100,w_100'" alt="">
                                  </template>
                              </el-table-column>
                              <el-table-column
                                prop="productName"
                                align="center"
                                label="商品名称">
                              </el-table-column>
                              <el-table-column
                                prop="repertory"
                                align="center"
                                label="库存"
                                width="100">
                              </el-table-column>
                          </el-table>
                  
                  </div>
              </el-form-item>

              <el-form-item label="优惠力度：">打{{form.discount}}折</el-form-item>
            <!-- <%--   <el-form-item label="*是否叠加：">
                  <span v-if="form.useVipDiscount == 1">可以和铂金商品折扣叠加使用</span>
                  <span v-if="form.useVipDiscount == 0">不可以和铂金商品折扣叠加使用</span>
              </el-form-item>--%> -->
            
              <el-form-item label="有效期：">{{form.couponEffectDate}} - {{form.couponExpireDate}}</el-form-item>

              <el-form-item>
                  <el-button @click="goback" type="primary">返回</el-button>
              </el-form-item>
          </el-form>

    </div>
  </div>
</template>

<script>
export default {
  name: 'coupondetails',
  data () {
    return {
        form:{
            type:0,
            brandName:'',
            totalNum:"",
            products:[],
            discount:"",                    
            useVipDiscount:0,
            couponEffectDate:"",
            couponExpireDate:"",
        },      
        tableData:[],
        id:'',
    }
  },
      mounted(){
          this.id = this.$route.query.id;
          this.getDetails()
      },
      methods: {
            goback(){
            this.$router.back()
          },

          getDetails(){
  
              this.$axios.get('/coupons/queryByActId',{
                params:{
                  actId:this.id
                }
              })
              .then(res=> {
                  if(res.data && res.data.code == 200){
                      this.form = res.data.data
                  }
              })
          },
      },
  components:{
    // 传入组件

  }
}
</script>

<style lang="scss" scoped>
 
        .recommend_wrap {display: inline-block;box-shadow: 1px 0 5px #ccc;margin-left: 15px;width: 83%;background: #fff;color:#6B6B6B;}
        .big-tit{padding:10px;font-size: 16px;}
        .tit{padding:20px 10px 0 20px;font-size:16px;color:#6B6B6B;margin-bottom:20px;}
        .tit:before{content:'';display:inline-block;width:4px;height:24px;background:#FF6800;border-radius:2px;vertical-align:middle;margin-right:5px;}
        .table-box{text-align:center;}
        .layui-table th{text-align:center;}
        .table-box img{width:30px;height:30px;}
        [type="checkbox"] {width:15px;height:15px;vertical-align:middle;}
        .layui-input-block span{vertical-align:middle;}
        .layui-input-block{line-height:36px;}
        .form{width:900px;padding-left:20px;}
</style>
