health-front/components/config/popupQrCode.vue

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

<script>
  import { mapState } from 'vuex'

	export default {
    props: {
      src: {
        type: String,
        default: null
      }
    },
		data() {
			return {
        key: '',
      }
    },
    computed : {
      ...mapState(['configList'])
    },
    methods: {
      open(key) {
        this.key = key
        this.$refs.popup.open();
      },
      close() {
        this.$refs.popup.close();
      },
    },
  }
</script>

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

  padding-bottom: 104rpx;

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