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

<script>
import {getSeason, getSeasonPoster} from '@/api/product'
import cookie from '@/utils/store/cookie'
import {getUrlParam} from '@/utils/common.js'
import { pageListenMixins } from '@/mixins/pageListenMixins'

export default {
  mixins: [pageListenMixins],
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      id: null,
      partnerId: null,
      info: null,
      current: 0,
      showShare: false,
      posterUrl: '', // 分享海报
      pageKeyId: ''
    }
  },
  onLoad(options) {
    const id = options.id
    if (id) {
      this.id = id || null
      this.pageKeyId = `seasonalFoodContent_id_${id}`
      this.partnerId = options.partnerId || null
    } else {
      const 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: {
    changeShare() {
      this.showShare = !this.showShare
    },
    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) {
        this.current = this.info.swiper.length - 1;
        return
      }
      this.current--;
    },
    tapRight() {
      if (this.current + 1 === this.info.swiper.length) {
        this.current = 0;
        return
      }
      this.current++;
    },

    saveImg() {
      let that = this;

      uni.getSetting({
        success: getRes => {
          if (getRes.authSetting["scope.writePhotosAlbum"]) {
            that.downloadImage();
          } else {
            uni.authorize({
              scope: "scope.writePhotosAlbum",
              success: () => {
                that.downloadImage();
              },
              fail: () => {
                console.log("authorize fail")
                uni.openSetting({
                  success: openRes => {
                    console.log(typeof openRes, openRes)
                  },
                  fail: () => {
                    uni.showToast({
                      title: "请在设置中打开对应权限",
                      icon: "none"
                    })
                  }
                })
              }
            })
          }
        },
        fail: (err) => {
          console.log(err, 2)
        }
      })
    },

    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"
          })
        }
      })
    },
    goGoods(id) {
      uni.navigateTo({
        url: `/pages/shop/GoodsCon/index?id=${id}&from=season`
      })
    }
  }
}
</script>

<template>
  <view class="product-season">
    <template v-if="info">
      <image class="img-top" :src="info.topImage" mode="widthFix"/>
      <view class="share-label flex jc-center ai-center" @click="changeShare" v-if="posterUrl.length>0">
        <image class="icon-share" :src="webUrl+'/20230911105727684131.png'" mode="scaleToFill"/>
        分享好友
      </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="changeShare"/>
            <image
              :src="posterUrl"
              mode="widthFix"
              class="main-img"
            />
          </view>
          <image
            :src="webUrl+'/20230608112210135038.png'"
            mode="widthFix"
            class="btn"
            @click="saveImg"
          />
        </view>
      </u-popup>

      <view class="scroll-item">
        <u-swiper :autoplay="true" circular :current="current" :list="info.swiper" height="1200rpx" radius="0"
                  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">
        <image class="bg-img" :src="info.productImage" mode="widthFix"/>
        <!--        <scroll-view scroll-y class="product-list" :style="{backgroundImage:'url(' + info.productImage + ')'}">-->
        <scroll-view scroll-y class="product-list">
          <image class="item" :src="item.image" mode="widthFix" @click="goGoods(item.id)"
                 v-for="(item,index) in info.products" :key="index"/>
        </scroll-view>
      </view>
    </template>
  </view>
</template>

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

.product-season {
  width: 100vw;
  overflow-x: hidden;

  image {
    vertical-align: middle;
  }

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

  .img-top {
    display: block;
    width: 100vw;
  }

  .share-label {
    position: fixed;
    top: 50%;
    right: 0;
    width: 200rpx;
    height: 56rpx;
    background: rgba(255, 255, 255, 0.39);
    border-radius: 8rpx;
    color: #333333;
    font-size: 28rpx;
    z-index: 99;

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

  .box-share {
    .box-img {
      width: 500rpx;
      height: 889.5rpx;
    }

    .main-img {
      width: 500rpx;
      height: 889.5rpx;
    }
  }

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

  .icon-left {
    left: 32rpx;
  }

  .icon-right {
    right: 32rpx;
  }

  .product-list {
    position: absolute;
    top: 0;
    left: 0;
    padding: 280rpx 32rpx 0;

    .item {
      width: 686rpx;
      margin-bottom: 46rpx;
    }
  }

  .bg-img {
    width: 100vw;
  }
}
</style>