hlm_pl_mall_h5/pages/home/bonus/Detail.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <home-base :show="false" ><view class="div distributor-article-list">
    <title-header />
    <view class="div detail_bg" :style="'background-image:url('+detailbg+')'">
      <view class="div red_packet">
        <text class="span" :class="red_packet_bg"></text>
        <text class="button" @click="receiveBonus(bonus)" v-if="!message">领取红包</text>
        <view class="div red-jg" v-if="message">
          <text class="h1">恭喜您！</text>
          <text class="h5">{{ message }}</text>
        </view>
      </view>
      <view  class="p tips">领取的红包将转入到商城预存款</view>
      <view  class="p rule" @click="goMemberBonusreceive">查看领取记录</view>
        <view class="div bonus-info" v-if="bonus">
            <view class="p">红包名称：{{bonus.bonus_name}}</view>
            <view class="p">红包祝福语：{{bonus.bonus_blessing}}</view>
            <view class="p">红包有效时间：{{bonus.bonus_begintime_text}}至{{bonus.bonus_endtime_text}}</view>
        </view>
    </view>
  </view></home-base>
</template>

<script>
import {getFontSize} from '@/util/common'
  import TitleHeader from '../../TitleHeader'
import HomeBase from '../HomeBase'
import { env } from '../../../static/config'
import { getBonusDetail, receiveBonus } from '../../../api/homeBonus'
export default {
  name: 'Bonusdetail',
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      bonus: '',
      bonusreceive_list: '',
      message: '',
      red_packet_bg: 'bg-w', // 背景图
	  detailbg:env.SITE_URL+'/uploads/home/h5/home/home-bonus-bg.png'
    }
  },
  components:{
    TitleHeader,
    HomeBase,
  },
  onLoad: function (option) {
    let bonus_id = option.bonus_id
    getBonusDetail(bonus_id)
      .then(res => {
        this.bonus = res.result.bonus
        this.bonusreceive_list = res.result.bonusreceive_list
      })
      .catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
  },
  methods: {
    receiveBonus (bonus) {
      receiveBonus(bonus.bonus_id)
        .then(res => {
          this.message = res.message
          this.red_packet_bg = 'bg-y'
          // uni.showToast({icon:'none',title: res.message})
        })
        .catch(function (error) {
          uni.showToast({icon:'none',title: error.message})
        })
    },
    goMemberBonusreceive () {
      uni.navigateTo({url:'/pages/member/bonusreceive/Bonusreceive'})
    }
  }
}
</script>

<style scoped lang="scss">
.detail_bg {
  background-size: 100% 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.red_packet {
  margin: 2rem 20% 1rem 20%;
  width: 60%;
  position: relative;
  padding-top: 100%;
}
.red_packet .span {
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  position: absolute;
}
.red_packet .button {
  position: absolute;
  top: 38%;
  left: 30%;
  font-size:$subFontSize;
  display:flex;align-items:center;justify-content:center;
  width: 40%;
  height: 24%;
  border-radius: 100%;
  background: #fdc339;
  color: #fff;
  border: none;
}
.red_packet .red-jg {
  position: absolute;
  top: 40%;
  text-align: center;
  width: 100%;
}
.red_packet .red-jg > .h1 {
  font-size:$h1;
  color: #ffc000;
  line-height: 2rem;
}
.red_packet .red-jg > .h5 {
  color: #fff;
  font-size:$subFontSize;
}
.bg-w {
  background-image: url("../../../static/image/home/home-bonus-red-w.png");
}
.bg-y {
  background-image: url("../../../static/image/home/home-bonus-red-y.png");
}
.tips {
  font-size:$subFontSize;
  color: #bf6b1d;
  text-align: center;
}
.rule {
  font-size:$fontSize;
  color: #bf6b1d;
  text-align: center;
  margin-top: 0.4rem;
}
.bonus-info{color: #bf6b1d;padding:0 1rem;margin-top:1rem;font-size:$fontSize;line-height:1rem;}
.bonus-info .p{}

</style>