YXGJ/packageCase/imgs/detail.vue

<template>
  <view>
    <swiper
      class="swiper"
      circular
      v-if="slides.length"
      :indicator-dots="slides.length > 1"
      indicator-color="#DC808B"
      indicator-active-color="#C30D23"
    >
      <swiper-item class="swiper-item" v-for="item in slides" :key="item.url">
        <image
          class="image"
          :src="item.cover"
          mode="aspectFill"
          lazy-load="true"
        />
        <view class="qrcode" @click="saveQrcode">
          <text class="iconfont icon-xiazai" />
          二维码
        </view>
      </swiper-item>
    </swiper>
    <view class="head">
      <view class="line1">
        <view class="left">
          <text class="iconfont icon-biaoqian" />
          {{ detail.renderingstype }}
        </view>
        <view
          class="right"
          hover-class="navigator-hover"
          @click="collectLoading ? '' : handleCollect(detail.iscollect)"
        >
          <u-loading-icon v-if="collectLoading" size="20" />
          <block v-else>
            <text
              v-if="detail.iscollect == 0"
              class="iconfont icon-weishoucang"
            />
            <text
              v-else
              class="iconfont icon-yishoucang"
              style="color: #ffc300"
            />
            收藏
          </block>
        </view>
      </view>
      <view class="title">{{ detail.title }}</view>
      <view class="subtitle" v-if="detail.subtitle">{{ detail.subtitle }}</view>
    </view>

    <scroll-view
      v-if="productList.length"
      class="product-list"
      scroll-x
      lower-threshold="200"
      enable-flex
      @scrolltolower="scrolltolower"
    >
      <navigator
        class="product"
        v-for="item in productList"
        :key="item.sa_fadid"
        :url="'/packageCase/product/detail?id=' + item.sa_fadid"
        hover-class="navigator-hover"
      >
        <u--image
          :src="item.cover"
          :lazy-load="true"
          :width="tovw(112)"
          :height="tovw(112)"
          radius="5"
        >
          <template v-slot:loading>
            <u-loading-icon color="red"></u-loading-icon>
          </template>
        </u--image>
        <view class="label u-line-1">
          {{ item.name }}
        </view>
      </navigator>
    </scroll-view>

    <view class="introduce" v-if="detail.notes">
      <view class="introduce-title"> 产品介绍 </view>
      <view class="introduce-text">
        {{ detail.notes }}
      </view>
    </view>
    <storeInfo />
    <view style="position: absolute; z-index: -999; top: 0">
      <l-painter
        ref="painter"
        hidden
        css="padding:10px;background:#fff;width: 148px;"
      >
        <l-painter-view>
          <l-painter-view css="margin: 0 auto;width: 128px;">
            <l-painter-qrcode
              :text="detail.appleturl"
              css="width: 128px; height: 128px;color:#000;"
            />
          </l-painter-view>
          <l-painter-view
            css="width: 108px;text-align: center;margin: 10px auto 0;"
          >
            <l-painter-text :text="detail.title" />
          </l-painter-view>
        </l-painter-view>
      </l-painter>
    </view>
    <bottomForm
      type="效果图"
      :shareuserid="shareUserid"
      ownertable="sat_sharematerial"
      :ownerid="sat_sharematerialid"
    />
  </view>
</template>

<script>
import { winTheCustomer } from "../../utils/share";
import lPainter from "../../uni_modules/lime-painter/components/l-painter/l-painter.vue";
import lPainterText from "../../uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue";
import lPainterView from "../../uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue";
import lPainterQrcode from "../../uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue";
export default {
  components: { lPainter, lPainterQrcode, lPainterText, lPainterView },
  data() {
    return {
      sat_sharematerialid: null,
      detail: {},
      slides: [],
      collectLoading: false,
      content: {
        pageNumber: 1,
        pageTotal: 1,
        pageSize: 20,
        where: {
          condition: "",
        },
      },
      productList: [],
      shareUserid: 0,
    };
  },
  onLoad(options) {
    this.sat_sharematerialid = options.id;
    this.isInitializeLogin(render.bind(this));
    function render() {
      this.getDetail(true);
      this.scrolltolower();
      this.shareUserid = winTheCustomer(options.shareUserid || 0, "效果图", {
        ownertable: "sat_sharematerial",
        ownerid: this.sat_sharematerialid,
      });
    }
  },
  methods: {
    getDetail(init = false) {
      if (!init) return;
      this.$Http
        .basic({
          id: 20240415164302,
          content: {
            sat_sharematerialid: this.sat_sharematerialid,
          },
        })
        .then((res) => {
          console.log("获取效果图详情", res);
          if (this.cutoff(res.msg)) return;
          this.detail = res.data;
          this.slides = res.data.attinfos_pic.map((v) => {
            return {
              cover: this.getSpecifiedImage(v.attinfos[0], "compressed"),
              url: v.attinfos[0].url,
            };
          });
          uni.setNavigationBarTitle({
            title: res.data.title,
          });
        });
    },
    handleCollect(iscollect) {
      this.collectLoading = true;
      this.$Http
        .basic({
          id: 20240416133702,
          content: {
            ownertable: "sat_sharematerial",
            ownerid: this.detail.sat_sharematerialid,
            type: 1,
          },
        })
        .then((res) => {
          console.log("收藏", res);
          this.collectLoading = false;
          if (this.cutoff(res.msg)) return;
          this.detail.iscollect = iscollect ? 0 : 1;
        });
    },
    saveQrcode() {
      let that = this;
      that.$refs.painter.canvasToTempFilePathSync({
        fileType: "jpg",
        // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
        pathType: "url",
        quality: 1,
        success: (res) => {
          console.log(res.tempFilePath);
          // 非H5 保存到相册
          // H5 提示用户长按图另存
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function (e) {
              uni.showModal({
                title: "提示",
                content: "图片已保存到系统相册",
                showCancel: false,
              });
              that.loading = false;
            },
            fail: ({ errMsg }) => {
              if (errMsg == "saveImageToPhotosAlbum:fail auth deny") {
                uni.showModal({
                  title: "提示",
                  content: "请授权添加到相册权限后再试！",
                  showCancel: false,
                  complete: (complete) => {
                    uni.openSetting({
                      success: (res) => {
                        that.loading = false;
                        if (res.authSetting["scope.writePhotosAlbum"]) {
                          this.saveTheImage();
                        } else {
                          uni.showModal({
                            title: "提示",
                            content: "未获取授权！已取消保存",
                            showCancel: false,
                          });
                        }
                      },
                    });
                  },
                });
              } else {
                that.loading = false;
                uni.showModal({
                  title: "提示",
                  content: "已取消保存",
                  showCancel: false,
                });
              }
            },
          });
        },
      });
    },
    getSheraDate() {
      let detail = this.detail;
      return {
        title: detail.title, // 标题
        path:
          "/packageCase/imgs/detail?id=" +
          detail.sat_sharematerialid +
          "&shareUserid=" +
          this.shareUserid, // 分享路径
        imageUrl:
          this.detail.attinfos.find((v) => v.usetype == "sat_sharematerial")
            .url || "", // 分享图
      };
    },
    scrolltolower() {
      let content = this.content;
      content.sat_sharematerialid = this.sat_sharematerialid;
      if (content.pageNumber > content.pageTotal)
        return console.log("已加载全部单品");
      this.$Http
        .basic({
          id: 20240419135802,
          content,
        })
        .then((res) => {
          console.log("关联单品", res);
          if (this.cutoff(res.msg)) return;
          res.data = res.data.map((v) => {
            v.cover = v.attinfos.length
              ? this.getSpecifiedImage(
                  v.attinfos.find((s) => s.usetype == "sa_fad") || v.attinfos[0]
                )
              : uni.getStorageSync("site").logo || "";
            return v;
          });
          this.productList =
            res.pageNumber == 1 ? res.data : this.productList.concat(res.data);
          content.pageNumber = res.pageNumber + 1;
          content.pageTotal = res.pageTotal;
        });
    },
  },
  onShareAppMessage(res) {
    return this.getSheraDate();
  },
  onShareTimeline() {
    return this.getSheraDate();
  },
};
</script>

<style lang="scss">
.swiper {
  width: 375px;
  height: 231px;
  background: #f5f5f5;
  border-radius: 5px;
  box-sizing: border-box;

  .swiper-item {
    position: relative;
    width: 100%;
    height: 100%;

    .image {
      width: 100%;
      height: 100%;
    }

    .qrcode {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 10px;
      right: 10px;
      width: 70px;
      height: 25px;
      background: rgba($color: #333333, $alpha: 0.5);
      font-size: 12px;
      color: #ffffff;

      .iconfont {
        margin-right: 4px;
      }
    }
  }
}

.head {
  background: #fff;
  padding: 8px 10px 15px;
  margin-bottom: 10px;

  .line1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .left {
      .iconfont {
        margin-right: 4px;
        font-size: 12px;
      }

      line-height: 17px;
      font-size: 12px;
      color: #999999;
    }

    .right {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 24px;
      border-radius: 12px;
      border: 1px solid #cccccc;
      font-family: PingFang SC, PingFang SC;
      font-size: 12px;
      color: #333333;

      .iconfont {
        margin-right: 5px;
      }
    }
  }

  .title {
    line-height: 20px;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 14px;
    color: #333333;
    margin: 10px 0;
  }

  .subtitle {
    line-height: 17px;
    font-family: PingFang SC, PingFang SC;
    font-size: 12px;
    color: #666666;
  }
}

.product-list {
  display: flex;
  width: 100vw;
  height: 162px;
  white-space: nowrap;
  box-sizing: border-box;
  padding-top: 10px;
  background: #fff;
  margin-bottom: 10px;

  .product {
    width: 112px;
    height: 142px;
    margin-left: 10px;
    flex-shrink: 0;
    background: #fff;

    .label {
      width: 112px;
      line-height: 20px;
      font-family: PingFang SC, PingFang SC;
      font-size: 14px;
      color: #333333;
      margin-top: 10px;
      white-space: Normal;
    }
  }
}

.introduce {
  background: #fff;
  padding: 0 10px;

  &-title {
    line-height: 45px;
    background: #ffffff;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
  }

  &-text {
    line-height: 20px;
    font-family: PingFang SC, PingFang SC;
    font-size: 14px;
    color: #333333;
    padding-bottom: 10px;
  }
}
</style>