mp_exhibitor_miniprog/pages/checkIn/index.vue

<template>
  <page-layout>
    <nav-bar title="福利嘉年华" @init="onInitNavbar"></nav-bar>
    <u-scroll-view :tabbar-conflict="false">
      <view class="outter">
        <view class="body">
          <view class="main-title">
            <image mode="aspectFill" class="image"
                   src="https://www.productronicachina.com.cn/resources/files/0221/67b7db116d845/主画面.png"></image>
          </view>
          <view class="theme-title">
            <text class="title">{{ activityInfo.name }}</text>
            <image mode="aspectFit" class="title-bg"
                   src="https://www.productronicachina.com.cn/resources/files/0221/67b7dd27b30b7/标题星星.png"></image>
          </view>
          <view class="theme-box">
            <view class="track-list">
              <view class="track">
                <view class="num">1</view>
                <view class="text">{{ activityInfo.content.step1 }}</view>
              </view>
              <view class="iconfont icon-Left-1"></view>
              <view class="track">
                <view class="num">2</view>
                <view class="text">{{ activityInfo.content.step2 }}</view>
              </view>
              <view class="iconfont icon-Left-1"></view>
              <view class="track">
                <view class="num">3</view>
                <view class="text">{{ activityInfo.content.step3 }}</view>
              </view>
            </view>
            <view class="way-grid">
              <view @click="gotoRoute()" class="way-item" v-for="item in activityInfo.content.card_image_text">
                <image mode="aspectFill" :src="item.img_url"></image>
                <view class="text">
                  <view class="way">
                    <!--挑战<text class="num">6</text>条路线-->
                    {{ item.title }}
                  </view>
                  <view class="button">{{ item.btn_text }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="side-button">
          <view @click="gotoPrizes()" class="button">
            <text style="font-size: 50rpx;" class="iconfont icon-jiangpin"></text>
            <text class="title">我的奖品</text>
          </view>
          <view @click="gotoRule()" class="button">
            <text class="iconfont icon-xiaochengxu-canguandengjiicon"></text>
            <text class="title">活动规则</text>
          </view>
          <view class="button">
            <button open-type="share"></button>
            <text style="font-size: 56rpx;" class="iconfont icon-zhuanfa"></text>
            <text class="title">分享</text>
          </view>
        </view>
      </view>
    </u-scroll-view>
  </page-layout>

</template>

<script>
import {getActivityInfo} from '@/api/checkIn';
import PageLayout from "@/components/layout/page-layout";
import NavBar from "@/components/layout/nav-bar";
import UScrollView from "@/components/common/u-scroll-view";

export default {
  components: {
    PageLayout,
    NavBar,
    UScrollView
  },
  data() {
    return {
      routeInfo: {},
      activityInfo: {}
    };
  },
  mounted() {
    this.getActivityInfoEvent()
  },
  methods: {
    getActivityInfoEvent() {
      this.showLoading()
      getActivityInfo().then(res => {
          this.activityInfo = res.data
        this.hideLoading()
      })
    },
    gotoRoute(id) {
      uni.navigateTo({url: '/pages/checkIn/checkInRoute?id=' + id})
    },
    onShareAppMessage() {
      return {
        title: '逛展会，领福利！',
        path: '/pages/checkIn/index',
        imageUrl: 'https://www.productronicachina.com.cn/resources/files/0221/67b7e5190bd22/share.png'
      }
    },
    gotoRule() {
      uni.navigateTo({
        // 此页面带参rule落地展示活动规则
        url: '/pages/checkIn/checkInRoute?rule=true',
      })
    },
    gotoPrizes() {
      uni.navigateTo({
        url: '/pages/user/award'
      })
    }
  },
  onLoad() {

  }
}
</script>

<style lang="scss">
.outter {
  height: 100%;
  position: relative;

  .head_title {
    width: 100%;
    background: linear-gradient(270deg, #332968 9%, #435797 44%, #382E73 92%), rgba(0, 0, 0, 0.2);
    padding-bottom: 15px;
    display: flex;
    align-items: flex-end;
    padding-left: 28rpx;
    transition: .3s ease-in-out;
    .title {
      display: flex;
      align-items: center;
      color: white;
      font-size: 32rpx;

      .iconfont {
        font-size: 36rpx;
        margin-right: 8rpx;
      }
    }
  }

  .body {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    background: linear-gradient(180deg, #015A92 0%, #56A3E9 24%, #106591 98%);
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .theme-box {
      margin: 32rpx;
      background-color: white;
      border-radius: 30rpx;
      padding: 40rpx 28rpx;

      .way-grid {
        display: grid;
        grid-gap: 25rpx 34rpx;
        grid-template-columns: 1fr 1fr;

        .way-item {
          aspect-ratio: 8/5;
          position: relative;
          border-radius: 10rpx;
          overflow: hidden;

          .text {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 18rpx 26rpx;
            background: linear-gradient(131deg, #3788D4 46%, rgba(145, 196, 244, 0) 97%);
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;

            .way {
              text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.42);
              color: white;
              font-size: 32rpx;
              font-weight: bold;

              .num {
                margin: 0 4rpx;
                font-size: 45rpx;
              }
            }

            .button {
              width: fit-content;
              font-weight: bold;
              font-size: 18rpx;
              background-color: white;
              color: #4085C7;
              padding: 10rpx 17rpx;
              border-radius: 40rpx;
            }
          }
        }
      }

      .track-list {
        margin-bottom: 40rpx;
        display: flex;
        grid-gap: 10rpx;
        align-items: center;

        .iconfont {
          color: #015A92;
          font-size: 40rpx;
        }

        .track {
          flex: 1;
          display: flex;

          .text {
            font-weight: bold;
            font-size: 24rpx;
            color: #015A92;
            flex: 1;
          }

          .num {
            margin-right: 14rpx;
            width: 60rpx;
            height: 60rpx;
            background: linear-gradient(132deg, #B0E8FF 21%, #F5F5F5 100%);
            color: #015A92;
            font-size: 40rpx;
            align-items: center;
            justify-content: center;
            display: flex;
            border-radius: 50%;
            font-weight: bold;
          }
        }
      }
    }

    .theme-title {
      margin-top: -60rpx;
      position: relative;
      height: 130rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .title {
        color: white;
        font-size: 55rpx;
        font-weight: bold;
      }

      .title-bg {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
      }

    }

    .main-title {
      width: 100%;

      .image {
        width: 100%;
        aspect-ratio: 3/2;
      }
    }
  }

  .side-button {
    position: absolute;
    right: 32rpx;
    bottom: 32rpx;
    display: flex;
    flex-direction: column;
    grid-gap: 17rpx;

    .button {
      background-color: white;
      width: 125rpx;
      height: 125rpx;
      border-radius: 50%;
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      grid-gap: 6rpx;
      padding-bottom: 6rpx;
      position: relative;

      button {
        width: 100%;
        height: 100%;
        opacity: 0;
        left: 0;
        top: 0;
        position: absolute;
      }

      .title {
        color: #94A3B8;
        font-size: 24rpx;
      }

      .iconfont {
        font-size: 60rpx;
        color: #016BF3;
      }
    }
  }
}
</style>