cashier_wx/distribution/shop-detail/components/share-popup.vue

<template>
  <view class="">
    <view class="w-qrcode">
      <w-qrcode
        :options="codeOptions"
        :opacity="0"
        ref="wQrcode"
        @generate="(e) => qrcodeResult(e)"
      ></w-qrcode>
    </view>

    <up-popup
      :show="show"
      bgColor="transparent"
      :safeAreaInsetBottom="false"
      :closeOnClickOverlay="true"
      @close="close"
      mode="center"
    >
      <view class="box">
        <view class="info">
          <view class="u-flex justify-center">
            <up-avatar size="214rpx" :src="shopUserInfo.headImg"></up-avatar>
          </view>
          <view
            class="u-m-t-48 font-14 font-700 color-333 text-center line-height-54"
          >
            <view>{{ shopUserInfo.nickName }} </view>
            <view>{{ desensitizePhone(shopUserInfo.phone) }}</view>
          </view>
          <view class="u-m-t-16 font-14 line-height-54 text-center">
            <text class="color-666">邀请码</text>
            <text class="u-m-l-16 u-m-r-16 color-333 font-16 font-700">{{
              inviteCode
            }}</text>
            <text class="" style="color: #fe6d11" @click="copyCode">复制</text>
          </view>
          <view class="u-flex justify-center" style="margin-top: 90rpx">
            <!-- <w-qrcode
              :options="codeOptions"
              :opacity="1"
              ref="wQrcode"
              @generate="(e) => qrcodeResult(e)"
            ></w-qrcode> -->
            <up-image width="322rpx" height="322rpx" :src="code"></up-image>
          </view>

          <view class="u-m-t-60 u-flex u-col-center justify-center">
            <view class="confirm" @click="save">保存图片</view>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>
    
    <script setup>
import wQrcode from "@/uni_modules/wmf-code/components/w-qrcode/w-qrcode.vue";
import {desensitizePhone} from "@/utils/util.js";
import { ref } from "vue";
const props = defineProps({
  inviteCode: {
    type: String,
    default: "",
  },
  shopUserInfo: {
    type: Object,
    default: () => {},
  },
});
const codeOptions = ref({
  size: 200,
  code: props.inviteCode,
});
function copyCode() {
  uni.setClipboardData({
    data: props.inviteCode,
    success: function () {
      console.log("success");
    },
  });
}
const code = ref("");

function qrcodeResult(e) {
  console.log("qrcodeResult", e);
  code.value = e.img.tempFilePath;
  console.log("code", code.value);
}

const show = defineModel({
  type: Boolean,
  default: false,
});
const emits = defineEmits(["cancel", "confirm"]);
function close() {
  show.value = false;
  emits("cancel");
}
function save() {
  show.value = false;

  // 保存图片到相册
  uni.saveImageToPhotosAlbum({
    filePath: code.value,
    success: function () {
      uni.showToast({
        title: "保存成功",
        icon: 'none'
      });
    },
    fail: function (err) {
      console.log('保存失败原因：', err);
      // 判断是否为授权拒绝（微信小程序授权拒绝的特征）
      if (err.errMsg.includes('auth deny') || err.errMsg.includes('authorize fail')) {
        // 弹出提示引导用户去设置页开启授权
        uni.showModal({
          title: '授权提示',
          content: '保存图片需要授权访问相册，请前往设置开启授权',
          showCancel: true,
          cancelText: '取消',
          confirmText: '去设置',
          success: function (res) {
            if (res.confirm) {
              // 跳转到微信小程序的授权设置页
              uni.openSetting({
                success: function (settingRes) {
                  // 检查用户是否开启了相册授权
                  if (settingRes.authSetting['scope.writePhotosAlbum']) {
                    uni.showToast({
                      title: '授权成功，可重新保存',
                      icon: 'none'
                    });
                  } else {
                    uni.showToast({
                      title: '未开启授权，保存失败',
                      icon: 'none'
                    });
                  }
                },
                fail: function () {
                  uni.showToast({
                    title: '打开设置失败',
                    icon: 'none'
                  });
                }
              });
            }
          }
        });
      } else {
        // 非授权问题的保存失败（如文件路径错误、系统问题等）
        uni.showToast({
          title: "保存失败",
          icon: 'none'
        });
      }
    },
  });

  emits("confirm", code.value);
}
</script>

<style lang="scss" scoped>
:deep(.info .canvas) {
  opacity: 1;
}
.border {
  border: 2rpx solid #d9d9d9;
  padding: 18rpx;
  border-radius: 4rpx;
}
.box {
  width: 638rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  .title {
    color: #000000;
    font-size: 32rpx;
    font-weight: 700;
  }
  .top {
    border-bottom: 2rpx solid #ededed;
  }
  .info {
    padding: 96rpx 40rpx 96rpx 40rpx;
    font-size: 28rpx;
  }
  .small-title {
    min-width: 84rpx;
    text-align: right;
  }
}

.cancel {
  padding: 14rpx 76rpx;
  border-radius: 36rpx;
  border: 2rpx solid #e8ad7b;
  color: #e8ad7b;
  font-size: 32rpx;
  font-weight: 400;
  white-space: nowrap;
  line-height: 48rpx;
}
.confirm {
  padding: 14rpx 76rpx;
  border-radius: 16rpx;
  background-color: #e8ad7b;
  border: 2rpx solid #e8ad7b;
  color: #fff;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 48rpx;
  white-space: nowrap;
}
.line-height-54 {
  line-height: 54rpx;
}
.w-qrcode {
  position: fixed;
  left: -9999px;
  top: -9999px;
  z-index: -1;
}
</style>