medicine_app/pages/component/commonComponents/advertisement.vue

<template>
  <view
    class="container commonPageBox commonDetailPage"
    style="height: auto !important; padding-bottom: 0 !important"
  >
    <u-popup :show="show" v-if="show" mode="center" class="popup_box">
      <div class="product_image" scroll-y="true" style="position: relative">
       
        <swiper
          :style="{ height: fullHeight }"
          class="swiper-tall"
          :indicator-dots="indicatorDots"
          :autoplay="autoplay"
          :previous-margin="previousMargin"
          :next-margin="nextMargin"
          :circular="circular"
          @change="change"
          :current="swiperCurrentIndex"
        >
          <swiper-item
            class="swiper-container"
            v-for="(img, index) in list"
            :key="index"
            :item-id="index"
            :data-year="index"
          >
            <view
            @click="gotoDetail(img)"
              class="swiper-item"
              :style="{
                background: img ? 'url(' + img.icon + ') center no-repeat' : '',
                backgroundSize: '100% 100%',
              }"
              :animation="animationData[index]"
            >
            </view>
          </swiper-item>
        </swiper>
        <view style="display: flex;align-items: center;justify-content: center;">
           <view @click="close" style="font-weight: bold;background-color: rgba(255, 255, 255, 0.8); color: #333;padding:20rpx 10rpx;width: 200rpx;font-size: 30rpx;border-radius: 40rpx;text-align: center;letter-spacing: 0.5rpx;">
        关闭
      </view>
        </view>
     
      
      </div>
    </u-popup></view
  >
</template>

<script>
const stopPenetrate = () => {
  return;
};
import { mapState } from "vuex";
export default {
  props: ["list"],
  data() {
    return {
      screenHeight: 0,
      animationData: {
        0: {},
        1: {},
        2: {},
      },
      title: "0",
      indicatorDots: false,
      autoplay: false,
      previousMargin: uni.upx2px(82) + "px",
      nextMargin: uni.upx2px(82) + "px",
      circular: true,
      zoomParam: 1.1,
      swiperCurrentIndex: 0,
      data: [],
      max: 0,
      show: false,
    };
  },
  onShow() {
    this.show = false;
  },
  onLoad() {},
  onHide() {
    // this.showSearchList = false
    // this.searchList = []
  },
  computed: {
    ...mapState(["userInfo"]),

    fullHeight() {
      const res = uni.getSystemInfoSync();
      return (
        res.windowHeight - uni.upx2px(60) - (res.statusBarHeight + 44) + "px"
      );
    },
  },
  methods: {
    gotoDetail(v) {
      console.log("v at line 58:", v);
      if (v.relationId) {
        if (v.type == 0) {
          if (v.shopProduct) {
            uni.navigateTo({
              url: `/pages/goods/index/index?navTitle=''&isMiaosha=0&title=''&id=${v.shopProduct.productId}`,
            });
          }
        }
      }
      if (v.type == 1) {
        uni.navigateTo({
          url: `/pages/mine/wallet/recharge/index`,
        });
      }
      if (v.type == 2) {
        uni.navigateTo({
          url: `/pages/mine/vip/index`,
        });
      }

      this.show = false;
    },
    // 放大图片
    previewImage(url) {
      console.log(url);
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["很抱歉，暂不支持保存图片到本地"],
          success: function (res) {
            // console.log(res,'+++++')
          },
        },
      });
    },
    change(e) {
      this.swiperCurrentIndex = e.detail.current;
      this.title = e.detail.currentItemId;
      for (let key in this.animationData) {
        if (e.detail.currentItemId == key) {
          this.animation.scale(this.zoomParam).step();
          this.animationData[key] = this.animation.export();
        } else {
          this.animation.scale(1.0).step();
          this.animationData[key] = this.animation.export();
        }
      }
    },
    close() {
      this.show = false;
    },
    selectGoods(data) {
      this.$emit("selectGoods", data);
    },
    open() {
      this.animation = uni.createAnimation();
      this.animation.scale(this.zoomParam).step();
      this.animationData[0] = this.animation.export();
      this.show = true;
    },

    onHandleClickBuy() {
      this.$emit("selectGoodsData", this.selectGoodsData);
      this.$emit("onHandleClickBuy");
    },
  },
  onBackPress() {
    // #ifdef APP-PLUS
    plus.key.hideSoftKeybord();
    // #endif
  },

  components: {},
};
</script>

<style lang="scss" scoped>
@import "@/style/mixin.scss";

.goods_image {
  width: 70vw;
}

.popup_box {
  padding-top: 30rpx;

  background-color: transparent;

  .popup_content {
    padding-bottom: 140rpx;
  }
  /deep/.list_item {
    // border-bottom: none;

    border: none !important;
    box-shadow: none !important;
  }

  .product_image {
    width: 100vw;

    max-height: 90vh;
  }
}
/deep/.u-popup__content {
  background-color: transparent !important;
}
/deep/.u-popup__content__close {
  color: #fff !important;
}
.title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0;
  .title_price {
    color: #ef1224;
    font-size: 40rpx;
    font-weight: 700;
  }
}
.swiper-container {
  display: flex;
  align-items: center;
}

.swiper-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  height: 858upx;
  width: 530upx;
  line-height: 300upx;
  text-align: center;
  broder-radius: 6upx;
  margin-bottom: 50upx;
}

.swiper-tall {
  display: flex;
  align-items: center;
}

.swiper-title {
  width: 750upx;
  text-align: center;
}
</style>