suke-mp/src/components/official-account-dialog.vue
2024-03-14 22:58:38 +08:00

75 lines
1.4 KiB
Vue

<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>