health-front/pages_order/center/accountCard.vue

<template>
  <view>

    <view class="flex card">
      <view class="flex label">
        <image class="icon" :src="configList.applet_logo" mode="scaleToFill"></image>
        <view>官方微信公众号</view>
      </view>
      <button class="flex btn" @click="openPopup">
        <view class="flex">
          <text class="btn-text">即刻关注</text>
          <uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon>
        </view>
      </button>
    </view>

    <popupQrCode ref="popup" :src="qrCodeUrl"></popupQrCode>
  </view>
</template>

<script>
	import { mapState } from 'vuex'

  import popupQrCode from './popupQrCode.vue';

  export default {
    components: {
      popupQrCode,
    },
		computed: {
			...mapState(['configList']),
      qrCodeUrl() {
        return this.configList['qrcode_wx_official_account']
      },
		},
    methods: {
      openPopup() {
        this.$refs.popup.open()
      },
    },
  }
</script>

<style scoped lang="scss">
@import './styles/card.scss';

.card {
  padding: 24rpx 32rpx;
  justify-content: space-between;
}

.icon {
  width: 64rpx;
  height: 64rpx;
}

.label {
  column-gap: 16rpx;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  line-height: 1;
  color: #252545;
}


.btn {
  min-height: 64rpx;
  font-family: PingFang SC;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 1.4;
  color: #A8A8A8;

  &-text {
    margin-right: 4rpx;
  }
}
</style>