xdd-uniapp-new/pkg_product/views/season-bak.vue

<script setup>
import {getSeason, getSeasonPoster} from "@/api/product";
import cookie from "@/utils/store/cookie";

export default {
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      id: null,
      partnerId: null,
      info: null,
      current: 0,
      showShare: false,
      posterUrl: "", // 分享海报
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id || null;
      this.partnerId = options.partnerId || null;
    } else {
      let obj = uni.getEnterOptionsSync();
      if (options.scene || obj.query.scene) {
        let query = options ? decodeURIComponent(options.scene) : decodeURIComponent(obj.query.scene);
        this.id = getUrlParam(query, "id") || null;
        this.partnerId = getUrlParam(query, "partnerId") || null;
      }
    }
    if (this.partnerId) cookie.set("spread", this.partnerId);

    this.init();
  },
  methods: {
    init() {
      getSeason(this.id).then(({data}) => {
        if (data.sliderImages) data.swiper = data.sliderImages.split(",");
        this.info = data;
      });

      getSeasonPoster(this.id).then(({data}) => this.posterUrl = data);
    },
    tapLeft() {
      if (this.current === 0) return;
      this.current--;
    },
    tapRight() {
      if (this.current + 1 === this.info.swiper.length) return;
      this.current++;
    },

    downloadImage() {
      let that = this;
      const randomID = () => Math.random().toString(36).substring(2);

      uni.downloadFile({
        url: this.posterUrl, //网络图片的地址
        filePath: wx.env.USER_DATA_PATH + "/share_" + randomID() + ".png",  //指定的本地文件路径
        success: downRes => {
          console.log(typeof downRes, downRes, "down")

          uni.saveImageToPhotosAlbum({
            filePath: downRes.filePath, //临时文件地址
            success: function () {
              uni.showToast({
                title: "保存成功",
                icon: "success",
                success() {
                  that.showShare = false;
                }
              })
            },
            fail: function (err) {
              uni.showToast({
                title: err,
                icon: "none"
              })
            }
          })
        },
        fail: function (err) {
          uni.showToast({
            title: err.errMsg,
            icon: "error"
          })
        }
      })
    },
  },
}
</script>

<template>
  <view class="product-season">
    <template v-if="info">
      <view class="scroll-item section">
        <image class="section" :src="info.topImage" mode="scaleToFill"/>
        <view class="share-label flex jc-center ai-center" @click="showShare=true" v-if="posterUrl.length>0">
          <image class="icon-share" :src="webUrl+'/20230911105727684131.png'" mode="scaleToFill"/>
          分享好友
        </view>
      </view>

      <u-popup :show="showShare" mode="center" bgColor="transparent">
        <view class="box-share">
          <view class="box-img">
            <image class="icon" :src="webUrl+'/20230608112219219303.png'" @click="showShare=false"/>
            <image class="main-img" :src="posterUrl"/>
          </view>
          <image class="btn" :src="webUrl+'/20230608112210135038.png'" @click="saveImg"/>
        </view>
      </u-popup>

      <view class="scroll-item section">
        <u-swiper :autoplay="false" :current="current" :list="info.swiper" height="100vh" indicator
                  imgMode="scaleToFill"></u-swiper>
        <image class="icon-direction icon-left" :src="webUrl+'/20230911105736198247.png'" mode="scaleToFill"
               @click="tapLeft"/>
        <image class="icon-direction icon-right" :src="webUrl+'/20230911105742958676.png'" mode="scaleToFill"
               @click="tapRight"/>
      </view>

      <view class="scroll-item">
        <scroll-view scroll-y class="product-list" :style="{backgroundImage:'url(' + info.productImage + ')'}">
          <view class="item" v-for="(item,index) in info.products" :key="index">
            <image class="item-img" :src="item.image" mode="widthFix"/>
            <view class="content">
              <view class="name bold one-t">{{ item.storeName }}</view>
              <view class="flex jc-between ai-end">
                <view class="price">活动价:￥
                  <text class="bold">{{ item.price }}</text>
                </view>
                <image class="btn-done" :src="webUrl+'/20230911105720914329.png'" mode="scaleToFill"
                       @click="$global.navToGoods(item.id)"/>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </template>
  </view>
</template>

<style scoped lang="less">
@import "@/assets/css/store.less";

.product-season {
  width: 100vw;
  height: 100vh;
  overflow: hidden scroll;
  scroll-snap-type: y mandatory;

  image {
    vertical-align: middle;
  }

  .scroll-item {
    position: relative;
    box-sizing: border-box;
    scroll-snap-align: start;
  }

  .section {
    width: 100vw;
    height: 100vh;
  }

  .share-label {
    position: absolute;
    top: 674rpx;
    right: 32rpx;
    width: 200rpx;
    height: 56rpx;
    background: rgba(255, 255, 255, 0.39);
    border-radius: 8rpx;
    color: #333333;
    font-size: 28rpx;

    .icon-share {
      width: 32rpx;
      height: 32rpx;
      margin-right: 4rpx;
    }
  }

  .icon-direction {
    position: absolute;
    top: 50%;
    width: 40rpx;
    height: 74rpx;
  }

  .icon-left {
    left: 32rpx;
  }

  .icon-right {
    right: 32rpx;
  }

  .product-list {
    padding: 200rpx 32rpx 0;
    background-size: 100vw auto;

    .item {
      position: relative;
      width: 686rpx;
      margin-bottom: 46rpx;
      border-radius: 40rpx;
      overflow: hidden;

      .item-img {
        width: 686rpx;
      }

      .content {
        position: absolute;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 32rpx 40rpx;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
        color: #FFFFFF;
        line-height: 64rpx;


        .name {
          font-size: 44rpx;
        }

        .price {
          font-size: 32rpx;

          text {
            font-size: 60rpx;
          }
        }

        .btn-done {
          width: 220rpx;
          height: 64rpx;
        }
      }
    }
  }
}
</style>