java-mall-app/components/share-box-mp.vue

<template name="share-box-mp">
  <view :class="['shareMsk', isShare ? '' : 'hide']">
    <view
      :class="[
        'sharebox',
        isShareBox ? 'bounceInUp animated' : 'bounceOutDown animated',
      ]"
    >
      <view class="shareList g-flex">
        <!-- #ifdef MP-WEIXIN -->
        <view class="shareItem g-flex-item">
          <view class="shareBtn">
            <button open-type="share" style="line-height: 0" hover-class="none">
              <image
                src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/images/friend.png"
                style="width: 100rpx; height: 100rpx; margin-bottom: 6rpx"
              ></image>
            </button>
            <label>{{ __("分享给朋友") }}</label>
          </view>
        </view>
        <!-- #endif -->
        <view class="shareItem g-flex-item">
          <view class="shareBtn" @click="shareQRCode">
            <image
              src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/images/allfriend.png"
              style="width: 100rpx; height: 100rpx"
            ></image>
            <label>{{ __("生成海报") }}</label>
          </view>
        </view>
      </view>
      <view class="cancelShare" @click="cancelShare">{{ __("取消") }}</view>
    </view>
    <view :class="['shareCodeImg', IsJT ? '' : 'hide']">
      <uni-icons
        class="uni-icon uni-icon-clear mp-clean-icon hide"
        type="clear"
        size="20"
        @click="cancelShare"
        v-if="false"
      />
      <view
        class="uni-icon uni-icon-clear mp-clean-icon"
        @click="cancelShare"
      ></view>
      <view @click="showCodeImg">
        <image mode="widthFix" :src="Path"></image>
      </view>
      <label>{{ __("保存至相册 生成海报") }}</label>
      <button type="primary" size="mini" @click="saveImg">
        {{ __("保存图片") }}
      </button>
    </view>
  </view>
</template>


<script>
export default {
  name: "share-box-mp",
  props: {
    shareDataDefault: {
      type: Object,
      default() {
        return {
          shareTitle: "",
          shareText: "",
          href: "",
          image: "",
          price: 0,
        };
      },
    },
  },
  data() {
    return {
      IsJT: false,
      Path: "",
      isShare: false,
      isShareBox: false,
    };
  },
  methods: {
    cancel() {
      this.isShareBox = false;
      this.isShare = false;
      this.$emit("onCancel");
    },
    show() {
      this.isShareBox = true;
      this.isShare = true;
    },

    cancelShare: function () {
      this.isShareBox = false;
      this.isShare = false;
      this.IsJT = false;

      this.$emit("cancelShare");
    },
    shareQRCode: function (e) {
      var that = this;
      var params = {
        MainPrice: this.shareDataDefault.price,

        summary: this.shareDataDefault.shareText,
        MainImg: this.shareDataDefault.image,
        MainTitle: this.shareDataDefault.shareTitle,
        Path: this.shareDataDefault.href,
        source_from: "wxminiapp",

        poster_name: this.shareDataDefault.shareText,
        path: this.shareDataDefault.href,
      };

      let url = that.cf.URL.wx.getMiniAppQRCodeUnlimitPoster;

      if (this.shareDataDefault.price > 0) {
        // #ifdef H5
        url = that.cf.URL.fx.poster;
        params["poster_type"] = 1;
        // #endif
        // #ifdef MP-WEIXIN
        params["poster_type"] = 2;
        // #endif
        // #ifdef APP-PLUS
        params["poster_type"] = 1;
        // #endif
      } else {
        url = that.cf.URL.fx.poster;

        // #ifdef H5
        params["poster_type"] = 1;
        // #endif
        // #ifdef MP-WEIXIN
        params["poster_type"] = 2;
        // #endif
        // #ifdef APP-PLUS
        params["poster_type"] = 1;
        // #endif
      }

      //生成二维码并返回地址。 - 需要修改调整为小程序地址
      that.$.request({
        url: url,
        data: params,
        method: "POST",
        success: function (data, status, msg, code) {
          that.setData({
            Path: data.url || data.poster_url,
            isShare: true,
            isShareBox: false,
            IsJT: true,
          });
        },
      });

      this.$emit("shareQRCode");
    },
    saveImg: function (e) {
      var that = this;
      // #ifdef MP-WEIXIN
      // 在合适的位置调用该方法，请求用户授权
      uni.authorize({
        scope: "scope.writePhotosAlbum",
        success() {
          // 用户同意授权，可以进行图片下载操作
          that.saveImgFun();
        },
        fail() {
          // 用户拒绝授权，可以提示用户重新授权
          uni.showModal({
            title: "授权提示",
            content: "您拒绝了授权，如需下载图片，请点击下方按钮重新授权。",
            confirmText: "重新授权",
            success(res) {
              if (res.confirm) {
                // 用户点击重新授权，再次请求授权
                uni.openSetting({
                  success(res) {
                    if (res.authSetting["scope.writePhotosAlbum"]) {
                      // 用户同意授权，可以进行图片下载操作
                      that.saveImgFun();
                    } else {
                      // 用户再次拒绝授权，可以提示用户授权失败
                      uni.showToast({
                        title: "授权失败",
                        icon: "none",
                      });
                    }
                  },
                });
              }
            },
          });
        },
      });
      // #endif
      // #ifndef MP-WEIXIN
      this.saveImgFun();
      // #endif
    },
    saveImgFun: function (e) {
      var that = this;
      that.$.showLoading();
      that.$.downloadFile({
        url: that.Path,
        success: function (t) {
          that.$.hideLoading();
          that.$.saveImageToPhotosAlbum({
            filePath: t.tempFilePath,
            success: function () {
              that.setData({
                Path: "",
                isShare: false,
                isShareBox: false,
                IsJT: false,
              }),
                that.$.alert("保存图片成功！");
            },
            fail: function (e) {
              that.$.hideLoading();
            },
          });
        },
        fail: function (e) {
          that.$.hideLoading();
        },
      });

      that.$.hideLoading();

      this.$emit("saveImg");
    },
    showCodeImg: function () {
      let that = this;
      that.$.previewImage({
        current: that.Path,
        urls: [that.Path],
      });

      this.$emit("showCodeImg");
    },
  },
};
</script>


<style>
.mp-clean-icon {
  position: absolute;
  right: 8rpx;
  top: 8rpx;
  color: #999999;
}
</style>