program/src/pages/user_center/discountCard/index.vue

<template>
    <div>
        <div class="quan_list">

          <div class="quan_container shadow bg-white" v-for="(item,index) in couponData" :key="index">
            
              <van-row gutter="9">
              <van-col span="12" offset="1">
                <div class="padding-top-sm">
                  <text class="title text-lg text-bold">{{ item.name }}</text>
                </div>
                
                <view class="padding-top-xs" v-if="item.type==2">
                  <text class="text-sm">满{{ item.full }}可用</text>
                </view>

                <view :class="item.type==2?'padding-top-xs':'padding-top-xl'">
                  <text class="text-xs">有效期：{{item.start_time}}~{{item.end_time}}</text>
                </view>
              </van-col>

              <van-col span="9" offset="1" >
                  <div class="padding-top-sm text-lg padding-bottom-xl margin-bottom-xs">
                      <view class="subtitle text-bold">可抵扣&nbsp;
                        <text class="text-red">￥{{ item.reduce }}</text>
                      </view>
                 </div>
                  
              </van-col>
             
             
                <div class="cartLeft"></div>
                <van-row gutter="9">
                    <van-col span="12" offset="1">
                        
                    </van-col>      
                    <van-col span="9" offset="1" >
                      <text class="text-sm text-grey rule">使用规则</text>
                    </van-col>  
                </van-row>
             
            </van-row>
          
        </div>


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

<script>
import { formatTimeAnother } from "../../../utils/index.js";
export default {
    data() {
      return {
        couponData: {},
        deliver:{}
      };
    },
    onLoad(options) {
       let $params = JSON.parse(options.deliver);
       console.log("参数",$params)
       this.$fly.get("https://testapi.shuimuai.com/coupon/choose-coupon?price=" +$params.price+"&goods_id=" +$params.goods_id)
           .then((res)=>{
               console.log('优惠券',res.data.data)
               let $data = res.data.data
               this.couponData = $data
               this.couponData.forEach(($val, $index) => {
                    $val['start_time'] = formatTimeAnother($val['start_time'])
                    $val['end_time'] = formatTimeAnother($val['end_time'])
                    if($val['type']==3){
                        $val["reduce"] = Math.round(($params.price-$params.price*$val["discount"])*100)/100
                    }else if($val['type']==2){
                        $val["reduce"] = $val["reduce"]
                    }else if($val['type']==4){
                        $val["reduce"] = $val["random"]
                    }
               })
           })
           .catch((err)=>{
               console.log(err)
           })
  },
}
</script>

<style scoped>
.quan_container {
  background-image: url("https://img.shuimuai.com/pic_payCoupon.png");
  background-position: center;
  background-size: 100% 100%;
  width: 340px;
  height: 115px;
  margin: 10px auto;
}
.cartLeft{
width: 85%;
margin: 10px auto;
height: 82px;
border-bottom: 1rpx dashed #a7a8a8;

}
.rule{
    text-decoration: underline;
}
</style>