client_iot-daoshi-template-v/src/components/ActivityDetail/ActivityDetail.vue

<template>
  <Dialog @close="back">
    <div class="content">
      <div class="carousel">
        <EffectFade :list="[activity.fileUrl, activity.fileUrl]">
          <template v-slot="{ item }">
            <div class="banner-wrapper">
              <img :src="config.sourceUrl + item" alt="" class="banner" />
            </div>
          </template>
        </EffectFade>
      </div>
      <div class="intro-content">
        <h1 class="name pos">{{ switchLanguage(activity, 'activityName') }}</h1>
        <ScrollView class="content-scroll" scrollbar>
          <p class="intro pos">{{ switchLanguage(activity, 'activityContent') }}</p>
        </ScrollView>
        <div class="time-wrapper pos">
          <p class="common first">{{ $t('ActivityTime') }}：{{ activity.startDate }} {{ $t('zhi') + activity.endDate }}</p>
          <p class="common">{{ $t('activityAddress') }}：{{ switchLanguage(activity, 'activityAddress') }}</p>
        </div>
        <Go class="detail-go" v-if="activity.shopId || activity.point" @click="handleActivity" />
      </div>
      <Button class="btn" @click="back" />
      <ThumbQRCode class="thumbs" :title="$t('yuyue')" />
    </div>
  </Dialog>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useStore } from '@/store/root'
import Dialog from '@/layouts/Dialog.vue'
import Button from '@/base/Button/Button.vue'
import EffectFade from '@/components/EffectFade/EffectFade.vue'
import ScrollView from '@/base/ScrollView/ScrollView.vue'
import Go from '@/base/Go/Go.vue'
import ThumbQRCode from '@/base/ThumbQRCode/ThumbQRCode.vue'
import Shop from '@/utils/Class/Shop'

const MALL_TYPE = 1 //商场活动
const BRAND_TYPE = 2 //品牌活动
const MEMBER_TYPE = 3 //会员活动

const props = defineProps({
  activity: Object,
  config: Object
})

const router = useRouter()
const store = useStore()

function handleActivity() {
  let shop
  if (props.activity.activityType === BRAND_TYPE) {
    shop = store.shopList.find(item => item.shopId === props.activity.shopId)
  }
  if (props.activity.activityType === MALL_TYPE || props.activity.activityType === MEMBER_TYPE) {
    const { floorOrder, floor, activityName, fileUrl, point } = props.activity
    shop = new Shop(activityName, floorOrder, floor, fileUrl, point)
  }

  if (!shop) {
    return
  }
  store.SET_SHOP(shop)
  router.push('/nav')
}

const emits = defineEmits(['close'])
function back() {
  emits('close')
}
</script>

<style lang="scss" scoped>
.pos {
  position: relative;
  z-index: 5;
}
.content {
  position: relative;
  width: 700px;
  margin: 0 auto;
  margin-top: 350px;
  z-index: 2;
  .thumbs {
    position: absolute;
    top: 120px;
    right: -156px;
  }
  &::before {
    content: '';
    position: absolute;
    top: 373px;
    left: 0;
    z-index: 2;
    width: 700px;
    height: 420px;
    background: #ffffff;
    border-radius: 12px;
  }
  .intro-content {
    position: relative;
    height: 420px;
    .name {
      padding: 28px 56px 32px 56px;
      font-weight: 700;
      font-size: 24px;
      font-family: 'font_bold';
      color: rgba(0, 0, 0, 0.8);
    }
  }
  .common {
    font-weight: 700;
    font-size: 14px;
    font-family: 'font_bold';
    color: rgba(0, 0, 0, 0.6);
    margin-left: 56px;
    &.first {
      padding-bottom: 8px;
    }
  }
  .content-scroll {
    position: relative;
    height: 140px;
    overflow: hidden;
    margin: 0 34px 64px 56px;
    padding-right: 16px;
    :deep(.bscroll-vertical-scrollbar) {
      width: 6px !important;
      background: rgba(0, 0, 0, 0.02) !important;
      border-radius: 6px !important;
      opacity: 1 !important;
      .bscroll-indicator {
        width: 6px !important;
        background: rgba(0, 0, 0, 0.1) !important;
        border-radius: 6px !important;
        border: none !important;
      }
    }
    .intro {
      font-weight: 400;
      font-size: 14px;
      line-height: 200%;
      text-align: justify;
      color: rgba(0, 0, 0, 0.6);
      margin-bottom: 64px;
    }
  }

  .detail-go {
    bottom: -70px;
  }

  .carousel {
    width: 700px;
    height: 393px;

    :deep(.swiper) {
      overflow: visible !important;
      z-index: auto;
    }
    :deep(.swiper-pagination) {
      right: 32px;
      left: auto;
      bottom: 5px;
      width: auto;
    }
    :deep(.swiper-pagination-bullet) {
      width: 16px !important;
      height: 3px !important;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 3px !important;
      opacity: inherit !important;
      &.swiper-pagination-bullet-active {
        background: #f1b33e;
        border-radius: 3px !important;
      }
    }
  }
  .banner-wrapper {
    width: 700px;
    height: 393px;
    border-radius: 12px;
    .banner {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
    }
  }

  .btn {
    position: absolute;
    top: 0;
    right: -120px;
  }
}
</style>