点餐页增加轮播图点击图片进入具体页面，点击分享正常分享，在对应的页面增加分享弹窗组件

2026-01-28 18:09:47 +08:00
parent 93d3f9196c
commit 37fe706d6a
19 changed files with 1913 additions and 1227 deletions
--- a/components/popup-distribution-group-code.vue
+++ b/components/popup-distribution-group-code.vue
@@ -0,0 +1,141 @@
+<!-- 私域引流 -->
+<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>