fission-star-applet-250304/pages_order/components/popupQrCode.vue

<template>
  <uv-popup 
    ref="popup"
    :overlayOpacity="0.8"
    mode="bottom"
    round="20rpx"
  >
    <view class="flex qr-popup">
      <text class="tips">长按识别二维码，了解更多内容！</text>
      <image class="qr" :src="src" :show-menu-by-longpress="true"></image>
    </view>
  </uv-popup>
</template>

<script>
	export default {
    props: {
      src: {
        type: String,
        default: null
      }
    },
		data() {
			return {
      }
    },
    methods: {
      open() {
        this.$refs.popup.open();
      },
      close() {
        this.$refs.popup.close();
      },
    },
  }
</script>

<style scoped lang="scss">
.qr-popup {
  flex-direction: column;

  .tips {
    margin-top: 75rpx;
    color: #1B1B1B;
    font-size: 32rpx;
  }
  .qr {
    margin-top: 40rpx;
    width: 350rpx;
    height: 350rpx;
  }
}
</style>