YXGJ/packageCase/product/detail.vue

<template>
  <view>
    <swiper
      class="swiper"
      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.mainclassnames }}
        </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.name }}</view>
      <view class="subtitle">型号：{{ detail.model || "--" }}</view>
      <view class="subtitle">尺寸：{{ detail.spec || "--" }}</view>
      <view class="subtitle">价格：{{ CNY(detail.price) || "--" }}</view>
    </view>
    <view class="introduce">
      <block v-if="detail.content">
        <view class="introduce-title"> 产品介绍 </view>
        <view class="introduce-text">
          <u-parse :content="detail.content" />
        </view>
      </block>
    </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.name" />
          </l-painter-view>
        </l-painter-view>
      </l-painter>
    </view>
    <bottomForm
      :shareuserid="shareUserid"
      type="产品"
      ownertable="sa_fad"
      :ownerid="sa_fadid"
    />
  </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 {
      sa_fadid: null,
      detail: {},
      slides: [],
      collectLoading: false,
      shareUserid: 0,
    };
  },
  onLoad(options) {
    this.sa_fadid = options.id;
    this.isInitializeLogin(render.bind(this));
    function render() {
      this.getDetail(true);
      this.shareUserid = winTheCustomer(options.shareUserid || 0, "单品", {
        ownertable: "sa_fad",
        ownerid: this.sa_fadid,
      });
    }
  },
  methods: {
    getDetail(init = false) {
      if (!init) return;
      this.$Http
        .basic({
          id: 20240418141002,
          content: {
            sa_fadid: this.sa_fadid,
          },
        })
        .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.name,
          });
        });
    },
    handleCollect(iscollect) {
      this.collectLoading = true;
      this.$Http
        .basic({
          id: 20240416133702,
          content: {
            ownertable: "sa_fad",
            ownerid: this.detail.sa_fadid,
            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.name, // 标题
        path:
          "/packageCase/product/detail?id=" +
          detail.sa_fadid +
          "&shareUserid=" +
          this.shareUserid, // 分享路径
        imageUrl:
          this.detail.attinfos.find((v) => v.usetype == "sa_fad").url || "", // 分享图
      };
    },
  },
  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;

  .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;
    margin-top: 5px;
  }
}

.introduce {
  background: #fff;
  margin-top: 10px;
  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>