<template>

  <uni-popup type='bottom' ref='popupRef' :mask-click='false' @touchmove.stop.prevent=''>
    <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("test_bg.png")' />

      <text class='tips'>长按关注会员中心公众号
        获得更多优惠和服务信息
      </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 45rpx 140rpx 45rpx;

  view:nth-of-type(1) {
    display: flex;
    margin-bottom: 70rpx;
    position: relative;

    image {
      width: 35rpx;
      height: 35rpx;
      align-self: flex-start;
    }

    text {
      font-weight: bold;
      font-size: 30rpx;
      color: #333333;
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
    }
  }

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

  .tips {
    font-weight: bold;
    font-size: 30rpx;
    color: #333333;
    margin-top: 10rpx;
    margin-bottom: 104rpx;
  }

}
</style>
