applet/components/membershipCode/membershipCode.vue

<template>
  <uv-popup ref="popupRef" mode="center" bgColor="none">
    <view>
      <view class="membership-code">
        <view class="membership-code-view">
          <view class="membership-code-title">
            <HeadlineDecorate />
            <text class="text">{{
              props.type == 1 ? "会员码" : "店铺收款码"
            }}</text>
            <HeadlineDecorate reversal />
          </view>
          <view class="code-content" v-if="props.type == 1">
            <text class="code-text">{{ info.code || "--" }}</text>
            <text class="iconfont" v-if="info.code" @click.stop="handleCopy"
              >&#xe64f;</text
            >
          </view>
          <view class="QR-code">
            <image
              v-if="info.qrUrl || info.qrCode"
              class="QR-code-img"
              :src="info.qrUrl || info.qrCode"
              alt=""
            />
          </view>
          <view class="membership-code-prompt u-flex-center">
            <text v-if="props.type == 1"> 动态会员码，仅限单次核销使用 </text>
            <template v-else>
              <image class="shop-img" :src="info.image" mode="aspectFit"></image>
              <text class="text">由药品商城提供技术支持</text>
            </template>
          </view>
          <view
            class="u-btn-two membership-code-btn"
            @click.stop="getInfo(2)"
            v-if="props.type == 1"
          >
            重新获取二维码
          </view>
          <view
            class="u-btn-two membership-code-btn"
            @click.stop="downloadQrCode()"
            v-if="props.type == 2 && info.qrCode"
          >
            下载店铺收款码
          </view>
        </view>
      </view>
      <view class="close" @click="popupRef.close()">
        <uv-icon name="close-circle" color="#c4c4c4" size="50rpx"></uv-icon>
      </view>
    </view>
  </uv-popup>
</template>

<script setup name="membershipCode">
import { ref } from "vue";
import { getMemberCode_Api, refreshQrCode_Api } from "@/api/userInfo";
const props = defineProps({
  type: {
    type: Number,
    default: 1, // 1: 会员码使用, 2: 店铺码使用
  },
});

const popupRef = ref(null);
const info = ref({});

const handleCopy = () => {
  uni.setClipboardData({
    data: info.value.code || "",
    success: () => {
      uni.$uv.toast("复制成功");
    },
  });
};

const getInfo = async (type = 1) => {
  let url = type == 1 ? getMemberCode_Api : refreshQrCode_Api;
  uni.showLoading({ title: "加载中...", mask: true });
  await url()
    .then((res) => {
      uni.hideLoading();
      if (res && res.code == 200) {
        info.value = res.data || {};
      }
    })
    .catch((err) => {
      console.log(err);
      // uni.hideLoading();
    });
};

const open = async (form = {}) => {
  if (props.type == 1) {
    await getInfo(1);
  } else {
    info.value = form || {};
  }
  popupRef.value.open();
};

const downloadQrCode = () => {
  if (!info.value.qrCode) {
    uni.$uv.toast("未获取到店铺码");
    return
  }
  uni.showLoading({
    title: '下载中...',
    mask: true,
  });
  uni.downloadFile({
    url: info.value.qrCode,
    success: (res) => {
      if (res.statusCode === 200) {
        uni.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            uni.hideLoading();
            uni.$uv.toast("下载成功");
          },
          fail: () => {
            uni.hideLoading();
            uni.$uv.toast("保存失败");
          },
        });
      } else {
        uni.hideLoading();
        uni.$uv.toast("下载失败");
      }
    },
    fail: () => {
      uni.hideLoading();
      uni.$uv.toast("下载失败");
    },
  });
};

defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.membership-code {
  width: 507rpx;
  //   min-height: 744rpx;
  background: linear-gradient(180deg, #fcfdfd, #fdd8d3);
  border-radius: 20rpx;
  padding: 14rpx;
  box-sizing: border-box;
  .membership-code-view {
    width: 100%;
    // min-height: 716rpx;
    border: 1rpx solid #dbd2d1;
    border-radius: 20rpx;
    padding: 50rpx 0 43rpx 0;
    .membership-code-title {
      text-align: center;
      .text {
        font-size: 36rpx;
        font-weight: 600;
        color: #1a1a1a;
        margin: 0 10rpx;
      }
    }
    .code-content {
      margin: 10rpx 0 0 0;
      text-align: center;
      color: #fb2914;

      .code-text {
        font-size: 28rpx;
        font-weight: 400;
      }
      .iconfont {
        font-size: 36rpx;
        margin-left: 5rpx;
      }
    }
    .QR-code {
      width: 326rpx;
      height: 326rpx;
      border: 1rpx solid #dcbcb8;
      border-radius: 20rpx;
      padding: 25rpx;
      box-sizing: border-box;
      margin: auto;
      margin-top: 40rpx;
      .QR-code-img {
        width: 100%;
        height: 100%;
      }
    }

    .membership-code-prompt {
      font-size: 26rpx;
      font-weight: 400;
      text-align: center;
      color: #1a1a1a;
      margin: 30rpx 0 36rpx 0;
      justify-content: center;
      .shop-img {
        width: 41rpx;
        height: 41rpx;
        border-radius: 6rpx;
        flex-shrink: 0;
        margin-right: 10rpx;
      }
    }

    .membership-code-btn.u-btn-two {
      width: 345rpx;
      margin: 0 auto;
      font-size: 28rpx;
    }
  }
}
.close {
  width: 100%;
  margin-top: 44rpx;
  display: flex;
  justify-content: center;
}
</style>