142 lines
2.8 KiB
Vue
142 lines
2.8 KiB
Vue
<!-- 私域引流 -->
|
||
<template>
|
||
<u-popup :show="show" mode="center" :safeAreaInsetBottom="false">
|
||
<view class="new_preview">
|
||
<view class="header">{{ shopInfo.shopName }}</view>
|
||
<view class="content">
|
||
<view class="title">{{ group.title }}</view>
|
||
<view class="img_wrap">
|
||
<image class="img" :show-menu-by-longpress="true" :src="group.groupUrl" @click=""></image>
|
||
</view>
|
||
<view class="intro">
|
||
{{ group.content }}
|
||
</view>
|
||
<view class="foot">
|
||
如果长按不能识别，可截图或保存二维码图片至相册，通过微信扫码入群。
|
||
</view>
|
||
</view>
|
||
<view class="close" @click="closeHandle">
|
||
<u-icon name="close" color="#fff" size="14"></u-icon>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import dayjs from 'dayjs';
|
||
import { ref, onMounted } from 'vue';
|
||
import { centerConfig,distributionEditIn } from '@/common/api/market/distribution.js';
|
||
import { checkArrayElementsExist } from '@/utils/util.js';
|
||
|
||
const shopInfo = ref('');
|
||
|
||
const props = defineProps({
|
||
type: {
|
||
type: String,
|
||
default: 'home' // 调用的位置 home首页 order支付成功后
|
||
},
|
||
group:{
|
||
type:Object,
|
||
default:()=>{}
|
||
}
|
||
});
|
||
|
||
const show = defineModel(false) ;
|
||
function closeHandle() {
|
||
const shopUserInfo=uni.cache.get('shopUserInfo')
|
||
distributionEditIn({
|
||
shopUserId:shopUserInfo.id
|
||
})
|
||
show.value = false;
|
||
}
|
||
|
||
|
||
|
||
|
||
onMounted(() => {
|
||
shopInfo.value = uni.cache.get('shopInfo');
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.new_preview {
|
||
--bg: #3f3b37;
|
||
--color: #f6dfc4;
|
||
--borderColor: #f6dfc45b;
|
||
width: 90vw;
|
||
background-color: var(--bg);
|
||
border-radius: 4px;
|
||
position: relative;
|
||
.close {
|
||
--size: 70upx;
|
||
width: var(--size);
|
||
height: var(--size);
|
||
border-radius: 50%;
|
||
background-color: var(--bg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
bottom: calc(var(--size) * -1 - 20upx);
|
||
left: 50%;
|
||
margin-left: calc(var(--size) / 2 * -1);
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
color: var(--color);
|
||
height: 50px;
|
||
border-bottom: 1px dashed var(--borderColor);
|
||
}
|
||
|
||
.content {
|
||
padding-bottom: 14px;
|
||
|
||
.title {
|
||
font-size: 14px;
|
||
color: var(--color);
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.img_wrap {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.img {
|
||
--size: 220px;
|
||
width: var(--size);
|
||
height: var(--size);
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
|
||
.intro {
|
||
height: 40px;
|
||
font-size: 14px;
|
||
color: var(--color);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 14px;
|
||
}
|
||
|
||
.foot {
|
||
height: 40px;
|
||
color: var(--borderColor);
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 14px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
</style>
|