cashier_wx/components/ymf-components/ymf-share-popup.vue

<template>
	<view class="ynf-share">
		<up-popup :show="show" mode="center" bg-color="transparent">
			<view >
				<view class="bg" v-if="config.sharerCoupon" :style="returnBg('bg')">
					<view class="title">邀请奖励</view>
					<view class="desc">邀请1人，即可得超值优惠券{{config.sharerCouponNum}}张</view>
					<view class="u-flex u-row-center">
						<view class="coupon" :style="returnBg('coupon')">
							<template v-if="config.sharerCoupon.couponType==1">
								<view class="font-bold text-center color">
									<text class="fuhao">¥</text>
									<text>{{config.sharerCoupon.fullAmount}}-{{config.sharerCoupon.discountAmount}}</text>
								</view>
							</template>
							<template v-if="config.sharerCoupon.couponType==2">
								<view class="font-bold text-center color">
									<text>{{config.sharerCoupon.discountNum}}件</text>
								</view>
							</template>
							<template v-if="config.sharerCoupon.couponType==3">
								<view class="font-bold text-center color">
									<text>{{config.sharerCoupon.discountRate/10}}折</text>
								</view>
							</template>
							<template v-if="config.sharerCoupon.couponType==3">
								<view class="font-bold text-center color">
									<text>{{config.sharerCoupon.discountRate/10}}折</text>
								</view>
							</template>
							<template v-if="config.sharerCoupon.couponType==4">
								<view class="font-bold text-center color">
									<text>第二件半价</text>
								</view>
							</template>
							<template v-if="config.sharerCoupon.couponType==6">
								<view class="font-bold text-center color">
									<text>买一送一</text>
								</view>
							</template>
							<view class="font-bold name">{{config.sharerCoupon.title}}</view>
						</view>
					</view>
					<view class="u-flex u-row-center u-m-t-44">
						<ymf-share>
							<view class="share-btn" :style="returnBg('btn')"></view>
						</ymf-share>
					</view>
				</view>
				<view class="u-flex u-row-center u-m-t-30">
					<view class="close-box u-flex u-col-center u-row-center" @click="close">
						<up-icon name="close" size="36rpx" color="#000" :bold="true"></up-icon>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>

	import {
		shareConfig,
	} from '@/common/api/market/share.js'
	import {returnPageTags} from '@/utils/share.js'
	
	import {
		productStore
	} from '@/stores/user.js';
	
	const userStore = productStore();

	
	const show = defineModel(false)
	const imgs = {
		btn: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/14ca8d88516b4739b4020b10d95a33c2.png',
		coupon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/4ccffb7cf8414cd19f0a10c6cf45b45b.png',
		bg: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/1ac6490c4efd4290abe7ca7f6d8e6eb2.png'
	}

	function returnBg(key) {
		return {
			backgroundImage: 'url(' + imgs[key] + ')'
		}
	}
	// watch(() => show.value, (newval)=>{
	// 	if(newval){
	// 		getData()
	// 	}
	// })

	function close() {
		show.value = false
	}
	const config = reactive({})
	async function getData(id) {
		const shopId = id||uni.cache.get('shopId')
		if (!shopId) {
			return
		}
		shareConfig({
			shopId
		}).then(res => {
			if(res){
				Object.assign(config,res)
				if(res.sharedUserCouponId&&res.sharedUserCouponNum&&res.isSharedUserPopup){
					const pages = getCurrentPages();
					const currentPage = pages[pages.length - 1];
					const currentPath = currentPage.route;
					const currentOptions = currentPage.options;
					const  path = `/${currentPath}`;
					
					const pTag = returnPageTags(path)
					if(pTag&&currentOptions.fromUserId){
						show.value=true
					}
					
				}
			}
		})
	}
	
	watch(()=>userStore.shopInfo.id,(newval)=>{
		if(newval){
			shareConfig({
				shopId:newval
			}).then(res => {
				if(res){
					Object.assign(config,res)
				}
			})
		}
	})
	onMounted(() => {
		console.log('分享组件挂载完毕！');
		getData()
	})
</script>

<style lang="scss">
	.bg {
		width: 710rpx;
		background-size: cover;
		min-height: 820rpx;
		padding-top: 260rpx;
		background-color: transparent;
		padding-left: 26rpx;

		.title {
			font-weight: 700;
			font-size: 74rpx;
			text-align: center;
			background-image: linear-gradient(to bottom, #FF7E2D, #FF270E);
			/* 定义渐变色 */
			-webkit-background-clip: text;
			/* Webkit 浏览器前缀 */
			background-clip: text;
			/* 标准属性 */
			color: transparent;
			/* 使文本透明，显示背景渐变 */
		}

		.desc {
			margin-top: 20rpx;
			font-size: 28rpx;
			font-weight: 700;
			text-align: center;
			color: #FF280F;
		}

	}

	.coupon {
		margin-top: 30rpx;
		width: 436rpx;
		height: 182rpx;
		background-size: cover;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 54rpx;
		text-align: center;


		.color {
			background-image: linear-gradient(to bottom, #FFFFFB, #FFEBB0);
			/* 定义渐变色 */
			-webkit-background-clip: text;
			/* Webkit 浏览器前缀 */
			background-clip: text;
			/* 标准属性 */
			color: transparent;
			/* 使文本透明，显示背景渐变 */
		}

		.fuhao {
			font-size: 32rpx;
		}

		.name {
			font-size: 36rpx;
			color: #FFFFFB;
		}
	}

	.close-box {
		width: 74rpx;
		height: 74rpx;
		opacity: 0.82;
		border-radius: 50%;
		background: #fff;
	}

	.share-btn {
		width: 262rpx;
		height: 72rpx;
		background-size: cover;
	}
</style>