lanan-repair/pages/home/active.vue

<template>
  <view class="container">
    <v-navigation-bar title-color="#333" background-color="#fff" title="活动列表">
    </v-navigation-bar>
    <view class="body">
      <view class="cardItem">
        <view class="cardItemTop" v-for="item in activeList">
          <view class="cardInfo">
            <view class="cardName">{{ item.name }}</view>
            <view class="cardName">{{ item.remark }}</view>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
import VNavigationBar from '@/components/VNavigationBar.vue'
import request from "@/utils/request";
import {getUserInfoRequest} from "@/utils/common.js";
import {getToken,setUserInfo} from '@/utils/auth.js'
export default {
  components: {
    VNavigationBar,
  },
  data() {
    return {

      customInfo: {},
      activeList: [],
      tabList: [{
        value: 0,
        title: '礼包券'
      },
        {
          value: 1,
          title: '卡包'
        }
      ],
      activeKey: 0
    };
  },
  onShow(data) {
    if(!getToken()){
      uni.reLaunch({
        url: '/pages/login/login'
      })
    }else{
      console.log("已登录")
      this.getUserInfos()
    }
    this.customInfo = JSON.parse(uni.getStorageSync('customerInfo'))
	  this.getActive()
  },
  onLoad(data) {
    this.getActive()
  },
  methods: {
    //获取当前登录用户信息
    async getUserInfos() {
      getUserInfoRequest()
    },
    //查询营销活动列表
    async getActive() {
      let customInfo = JSON.parse(uni.getStorageSync('customerInfo'))
      const data = {
        cusId: customInfo.id
      }
      await request({
        url: '/userClient/customer/activeList',
        method: 'get',
        params:data
      }).then((res) => {
        this.activeList = res.data
      })

    }

    //参与营销活动


  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background-color: #F0F1F5;

  display: flex;
  flex-direction: column;

  .body {
    flex: 1;
    height: 0;
    box-sizing: border-box;
    padding: 30 rpx 0;
    margin: 0 32 rpx;

    display: flex;
    flex-direction: column;
    row-gap: 20 rpx;

    overflow: auto;


    .cardItem {
      background: #FFFFFF;
      border-radius: 16 rpx 16 rpx 16 rpx 16 rpx;
      padding: 30 rpx;
    }

    .cardItemTop {
      display: flex;
      align-items: center;
      column-gap: 16 rpx;
      padding-bottom: 32 rpx;
      border-bottom: 1px solid #ddd;
    }

    .cardImg {
      width: 136 rpx;
      height: 100 rpx;
      background-color: #efefef;

      display: flex;
      align-items: center;
      justify-content: center;

      position: relative;

      .cardImgText {
        color: #fff;
        font-size: 24 rpx;
        position: relative;
        z-index: 2;
      }

      .cardImgBg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
      }
    }

    .cardInfo {
      flex: 1;
      width: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      padding: 6 rpx 0;

      .cardName {
        font-size: 32 rpx;
        color: #333333;
      }

      .cardEndDate {
        font-size: 24 rpx;
        color: #999999;
      }
    }

    .cardInfoRight {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24 rpx;
      color: #FC4D4A;

      .cardNumValue {
        font-size: 64 rpx;
      }

      .cardLabel {
        color: #999999;
      }
    }
  }

  .cardItemBottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30 rpx 0 0;

    .useSm {
      font-size: 24 rpx;
      color: #999999;
    }

    .useBtn {
      width: 144 rpx;
      height: 60 rpx;
      border-radius: 30 rpx 30 rpx 30 rpx 30 rpx;
      border: 1 rpx solid #FC4D4A;
      font-size: 28 rpx;
      color: #FC4D4A;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.tabbar {
  background-color: #fff;
  display: flex;
  align-items: center;

  .tabItem {
    flex: 1;
    width: 0;

    display: flex;
    justify-content: center;
    padding: 30 rpx 0;

    position: relative;
  }

  .activeLine {
    width: 52 rpx;
    height: 8 rpx;
    background: #009EDA;
    border-radius: 4 rpx 4 rpx 4 rpx 4 rpx;

    position: absolute;
    left: 50%;
    bottom: 2 rpx;
    transform: translate(-50%, 0);
  }
}
</style>