detail.vue

<template>
  <div class="contain">
    <div class="box">
      <div class="yhq"> 
        <div class="left">
          <div class="price">¥{{ form.unit }}</div>
        </div>
        <div class="right">
          <div>满{{ form.salesUnit }}元可用</div>
          <div>
            <div>有效期:</div>
            <div>
              <span>{{ form.begin_date }}</span>~
              <span>{{ form.end_date }}</span>
            </div>            
          </div>
          <div>全店通用</div>
        </div>
        <i></i>
      </div>
      <div class="txt">{{ form.type }}</div>
      <div class="txt">此优惠券仅限于 <span>{{ store }}</span> 使用</div>
    </div>
  </div>
</template>

<script>
import { getCouponList } from "@/api/sidebar/voucher"
export default {
  data() {
    return {
      form: {
        unit: '100',
        type: '老用户回馈券',
        usageAmount: '500',
        begin_date: '2020/2/3',
        end_date: '2020/4/5'
      },
      store: '',
      id: '',
      deptId: ''
    }
  },
  mounted() {
    this.deptId = sessionStorage.getItem('oyStallCode')
    // this.deptId = 3
    this.id = this.$route.query.id
    console.log(this.id);
    
    this.getList()
  },
  methods: {
    getList() {
      let params = {
        deptId: this.deptId
      }
      getCouponList(params).then(res => {
        res.data.forEach(item => {
          item.begin_date = item.begin_date.substr(0,4)+'-'+item.begin_date.substr(4,2)+'-'+item.begin_date.substr(6,2)
          item.end_date = item.end_date.substr(0,4)+'-'+item.end_date.substr(4,2)+'-'+item.end_date.substr(6,2)
        })
        let obj = res.data.find(x => {
          console.log(x,'x')
          return x.id === this.id
        })
        console.log(obj,'obj')       
        this.form = obj
        this.store = sessionStorage.getItem("barName")
      })
    },
  }
}
</script>

<style  scoped>
.contain {
  background-color: rgb(237, 239, 243);
  height: 100%;
  justify-content: center;
}
.box {
  margin-top: 18px;
  height: 50%;
  background-color: #fff;
  width: 90%;
  padding: 50px 20px;
}
.yhq {
  background-color: #F39B00;
  height: 60%;
  display: flex;
  padding: 20px;
  align-items: center;
  margin-bottom: 38px;
}
.yhq:before {
	content: '';
	position: absolute;
	top:0;
	bottom:0;
	left:10px;
	right:10px;
	z-index: -1;
}
.yhq i {
	position: absolute;
	left: 20%;
	top: 45px;
	height: 190px;
	width: 390px;
	background-color: rgba(255, 255, 255, .15);
	transform: rotate(-30deg);
}
.left,.right {
  font-size: 16px;
  color:rgb(255,255,255);
}
.txt {
  font-size: 18px;
  text-align: center;
  margin-top: 14px;
}
.left {
  display: flex;
  align-items: center;
  width: 35%;
  height: 100%;
  border-right: 1px dashed #f0f0f0;
}
.price {
  font-size: 32px;
  font-weight: 800;
}
.right {
  width: 65%;  
  height: 100%;
  padding: 10px 0 10px 10px;
}

</style>