<template>

  <uni-popup type='bottom' ref='popupRef'>
    <view class='popup-content c-flex-column'>
      <view class='c-flex-row'>
        <text>关注公众号</text>
        <image :src='assetsUrl("ic_close.png")' @click.stop='close' />
      </view>

      <image class='qrcode' :src='assetsUrl("official_account_qrcode.png")' show-menu-by-longpress />
      <text class='tips'>长按关注会员中心公众号\n
        获得更多优惠和服务信息
      </text>
    </view>
  </uni-popup>
</template>

<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';

const popupRef = ref();
const show = () => {
  popupRef.value.open();
};

const close = () => {
  popupRef.value.close();
};

defineExpose({ show });

</script>

<style lang='scss' scoped>
.popup-content {
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 0 0;
  padding: 38rpx;
  align-items: center;
  position: relative;

  view:nth-of-type(1) {
    image {
      width: 35rpx;
      height: 35rpx;
      align-self: flex-end;
      position: absolute;
      right: 38rpx;
    }

    text {
      font-weight: bold;
      font-size: 30rpx;
      color: #333333;
      align-self: center;
    }
  }

  .qrcode {
    width: 377rpx;
    height: 377rpx;
    margin-top: 50rpx;
    align-self: center;
  }

  .tips {
    font-weight: bold;
    font-size: 30rpx;
    color: #333333;
    align-self: center;
    margin-top: 10rpx;
  }
}
</style>
