94 lines
2.2 KiB
Vue
94 lines
2.2 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 私域引流 -->
|
|
<up-popup :show="show" mode="center" round="16rpx" closeOnClickOverlay @close="close" :safeAreaInsetBottom="false">
|
|
<view class="preview-box">
|
|
<view class="u-flex" style="align-items: stretch">
|
|
<view class="u-flex-1 u-p-r-24 u-flex u-flex-col" style="align-items: start; justify-content: space-between">
|
|
<view>
|
|
<view class="font-14 font-bold color-333">{{ drainageConfig.title }}</view>
|
|
<view class="u-m-t-16 font-12 color-666">{{ drainageConfig.content }}</view>
|
|
</view>
|
|
|
|
<view class="color-999 font-12 u-m-t-16">{{ drainageConfig.note }}</view>
|
|
</view>
|
|
|
|
<image :show-menu-by-longpress="true" :src="drainageConfig.qrCode" style="width: 240rpx; height: 240rpx" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<view class="close" @click="close">
|
|
<up-icon name="close-circle" size="34" color="#fff"></up-icon>
|
|
</view>
|
|
</view>
|
|
</up-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import * as drainageConfigApi from '@/common/api/market/drainageConfig.js';
|
|
import { ref, reactive, computed, watch, onMounted } from 'vue';
|
|
|
|
const showPreview = defineModel({
|
|
type: Boolean,
|
|
default: false
|
|
});
|
|
|
|
const show = ref(false);
|
|
const emit = defineEmits(['close']);
|
|
|
|
function close() {
|
|
show.value = false;
|
|
emit('close');
|
|
}
|
|
const drainageConfig = ref({});
|
|
async function getDrainageConfig() {
|
|
const shopId = uni.cache.get('shopId');
|
|
const drainageConfigRes = await drainageConfigApi.config({
|
|
shopId: shopId
|
|
});
|
|
drainageConfig.value = drainageConfigRes;
|
|
if (drainageConfig.value.isEnable) {
|
|
show.value = true;
|
|
} else {
|
|
close();
|
|
}
|
|
}
|
|
// onMounted(() => {
|
|
// getDrainageConfig();
|
|
// });
|
|
watch(
|
|
() => showPreview.value,
|
|
(newVal) => {
|
|
if (newVal) {
|
|
getDrainageConfig();
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.u-flex-col {
|
|
flex-direction: column;
|
|
}
|
|
.preview {
|
|
padding: 8rpx 32rpx;
|
|
border-radius: 12rpx;
|
|
background: $my-main-color;
|
|
color: #ffffff;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
line-height: 40rpx;
|
|
}
|
|
.preview-box {
|
|
width: 700rpx;
|
|
padding: 32rpx 28rpx;
|
|
position: relative;
|
|
.close {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -100rpx;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
</style>
|