nk-shop2.0/pages/newActivity/subsidy/subsidy.vue

<template>
  <view>
    <view style="height: var(--status-bar-height);background-color: #e54841;"></view>
    <view class="bg">
      <image class="bg_img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/subsidy.webp"></image>
      <image @click="back" class="bg_back" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/back.png"></image>
      <view class="bg_title">补贴记录</view>
      <view class="b_title">
        <view>总计获得</view> <view class="count">{{total_amount}}</view> <view>元补贴红包</view>
      </view>
      <view class="b_body">
        <image class="body_head_img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/srecord.webp"></image>
        <view class="b_head">
          <view class="head_title">消费金额</view>
          <view class="head_title">补贴金额</view>
          <view class="head_title2">红包获得时间</view>
        </view>
        <view class="b_content">
          <view class="content_list" v-for="(item, index) in list" :key="index">
            <view class="content_item">{{item.order_amount}}<text class="mall">元</text></view>
            <view class="content_item">{{item.coupon_price}}<text class="mall">元</text></view>
            <view class="content_item2"><text class="mall">{{item.create_time}}</text></view>
          </view>
          <view class="mall none" style="padding-top: 0;" v-if="list.length==0" @click="navTo">{{'暂无记录, 去消费领补贴 >>'}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { storeActivityRecord } from "@/api/activity.js"
import { Toast } from "../../../libs/uniApi";
import { getUserInfo } from '@/api/user.js';
export default {
  data() {
    return {
      total_amount: '0.00',
      list: []
    }
  },
  onLoad() {},
  onShow() {
    this.storeActivityRecord();
  },
  methods: {
    back(){
      uni.navigateBack()
    },
    storeActivityRecord(){
      storeActivityRecord().then(res=>{
        this.list = res.data.record;
        this.total_amount = res.data.total_amount || "0.00"
      })
    },
    navTo(){
      uni.switchTab({
        url:'/pages/index/index'
      })
    }
  },
  onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
page{
  background-color: #ffe3bd;
}
.bg{
  position: relative;
  height: auto;
  .bg_img{
    width: 750rpx;
    position: absolute;
    top: 0;
    left: 0;
  }
  .bg_back{
    height: 34rpx;
    width: 20rpx;
    position: absolute;
    top: 30rpx;
    left: 30rpx;
  }
  .bg_title{
    font-size: 32rpx;
    color: #fff;
    font-weight: 500;
    position: absolute;
    top: 30rpx;
    left: 50%;
    transform: translate(-50%);
  }
  .b_title{
    position: absolute;
    width: 100%;
    height: 70rpx;
    top: 225rpx;
    left: 0;
    text-align: center;
    font-size: 36rpx;
    color: #F1503F;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    .count{
      // height: 100%;
      font-size: 66rpx;
      font-weight: bold;
      margin: 10rpx 20rpx;
    }
  }
  .b_body{
    position: absolute;
    width: 710rpx;
    margin-left: 21rpx;
    margin-right: 19rpx;
    height: auto;
    background-color: #fff;
    top: 534rpx;
    left: 0;
    border-radius: 50rpx;
    padding: 28rpx;
    margin-bottom: 30rpx;
    display: flex;
    flex-direction: column;
    align-content: center;
    .body_head_img{
      width: 253rpx;
      margin: 0 auto;
    }
    .b_head{
      background-color: #FFF2E0;
      border-radius: 20rpx;
      color: #C44100;
      display: flex;
      margin-top: 28rpx;
      font-size: 28rpx;
      padding: 20rpx 0;
      .head_title{
        padding-left: 20rpx;
        width: 190rpx;
      }
      .head_title2{
        padding-left: 20rpx;
        width: 280rpx;
      }
    }
    .b_content{
      background-color: #fff2ed;
      border-radius: 20rpx;
      color: #FF5A3A;
      padding-top: 20rpx;
      margin-top: 28rpx;
      font-size: 32rpx;
      .mall{
        font-size: 26rpx;
      }
      .content_list{
        display: flex;
        padding-bottom: 20rpx;
        .content_item{
          padding-left: 20rpx;
          width: 190rpx;
        }
        .content_item2{
          padding-left: 20rpx;
          width: 280rpx;
        }
      }
      .none{
        text-align: center;
        padding: 20rpx;
      }
    }
  }
}

</style>