YY_MP_REFACTOR/src/pages-common/banner-detail/index.vue

<template>
  <page-meta :page-style="`overflow:${showContactPopup ? 'hidden' : 'visible'};`" />

  <view class="detail-page">
    <template v-if="currentDetail">
      <image
        class="detail-image"
        :class="{ 'has-fixed-action': currentDetail.buttonText }"
        :src="currentDetail.detailImage"
        :show-menu-by-longpress="true"
        mode="widthFix"
      />

      <view v-if="currentDetail.buttonText" class="fixed-action">
        <view class="action-button" @tap="showInfo">
          {{ currentDetail.buttonText }}
        </view>
      </view>
    </template>

    <view v-else class="empty-state">
      <text class="empty-title">暂无详情内容</text>
      <text class="empty-desc">当前轮播图详情不存在或参数异常</text>
    </view>

    <wd-popup
      v-model="showContactPopup"
      position="bottom"
      closable
      lock-scroll
      safe-area-inset-bottom
      custom-style="border-radius: 32rpx 32rpx 0 0;"
    >
      <view class="info-content">
        <view class="popup-handle" />

        <view class="info-title">联系方式</view>
        <view class="info-tips">可添加企业微信详细沟通</view>

        <view class="qrcode-card">
          <image
            src="https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/banner-ercode.jpg"
            class="er-code"
            :show-menu-by-longpress="true"
            mode="aspectFit"
          />
        </view>

        <view class="qrcode-tip">长按二维码保存或识别</view>
      </view>
    </wd-popup>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'

import { onLoad } from '@dcloudio/uni-app'

const detailId = ref('')
const showContactPopup = ref(false)

const detailList = [
  {
    id: 'banner-consult',
    title: '点击咨询',
    detailImage: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/banner01Detail.png',
    buttonText: '点击咨询',
  },
  {
    id: 'signup-consult',
    title: '报名咨询',
    detailImage: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/banner03Detail.jpg',
    buttonText: '报名咨询',
  },
  {
    id: 'ad-20230504',
    title: '广告详情',
    detailImage: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/ad20230504001.jpeg',
  },
  {
    id: 'academic-agent',
    title: '学术推广代理服务商',
    detailImage: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/ad20250317.png',
  },
  {
    id: 'tianshan-snow-lotus-cover-1',
    title: '天山雪莲单方制剂',
    detailImage:
      'https://yy-cloud-oss-public.oss-cn-beijing.aliyuncs.com/template/tianshanian-ad-conent1.jpg',
  },
  {
    id: 'tianshan-snow-lotus-cover-2',
    title: '天山雪莲推广图',
    detailImage:
      'https://yy-cloud-oss-public.oss-cn-beijing.aliyuncs.com/template/tianshanian-ad-conent2.jpg',
  },
  {
    id: 'jianping-jinxing',
    title: '健脾金杏',
    detailImage:
      'https://yy-cloud-oss-public.oss-cn-beijing.aliyuncs.com/image/jianpingjinxing.png',
  },
]

const currentDetail = computed(() => {
  return detailList.find((item) => item.id === detailId.value)
})

const showInfo = () => {
  showContactPopup.value = true
}

onLoad((options) => {
  detailId.value = decodeURIComponent(options?.id || '')
})
</script>

<style scoped lang="scss">
.detail-page {
  min-height: 100vh;
  background: #f7f8fa;
}

.detail-image {
  width: 750rpx;
  display: block;
  background: #fff;
}

.has-fixed-action {
  padding-bottom: 170rpx;
}

.fixed-action {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  box-sizing: border-box;
  padding: 22rpx 30rpx calc(22rpx + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -8rpx 28rpx rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12rpx);
}

.action-button {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999rpx;
  background: linear-gradient(135deg, #4db7ff 0%, #248cff 100%);
  box-shadow: 0 12rpx 26rpx rgba(36, 140, 255, 0.28);
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
}

.info-content {
  box-sizing: border-box;
  min-height: 560rpx;
  padding: 24rpx 40rpx 52rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 32rpx 32rpx 0 0;
}

.popup-handle {
  width: 72rpx;
  height: 8rpx;
  border-radius: 999rpx;
  background: #e5e5e5;
}

.info-title {
  margin-top: 38rpx;
  font-size: 38rpx;
  font-weight: 700;
  color: #222;
}

.info-tips {
  margin-top: 20rpx;
  font-size: 26rpx;
  color: #777;
}

.qrcode-card {
  margin-top: 34rpx;
  width: 392rpx;
  height: 392rpx;
  box-sizing: border-box;
  padding: 16rpx;
  border-radius: 28rpx;
  background: #fff;
  box-shadow:
    0 16rpx 42rpx rgba(0, 0, 0, 0.08),
    inset 0 0 0 1rpx #f0f0f0;
}

.er-code {
  width: 360rpx;
  height: 360rpx;
  display: block;
  border-radius: 18rpx;
}

.qrcode-tip {
  margin-top: 22rpx;
  font-size: 24rpx;
  color: #aaa;
}

.empty-state {
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 260rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
}

.empty-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.empty-desc {
  margin-top: 16rpx;
  font-size: 26rpx;
  color: #999;
}
</style>