jiuyiUniapp/jiuyi2/components/index/proDetailAlt.vue

<script setup>
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance,
		defineExpose,
		computed,
		onBeforeUnmount,
		defineProps,
		defineEmits,
	} from 'vue';
	// 工具库
	import util from '@/common/js/util.js'
	// api
	import api from '@/api/index.js'
	// 产品详情
	import proDetail from '@/components/shop/detail/detail'
	//底部
	import footerMenu from '@/components/shop/detail/footerMenu';

	const {
		proxy
	} = getCurrentInstance()

	const props = defineProps({
		// 
	})
	// 
	const emit = defineEmits(['buy'])
	// 商品id
	const proId = ref('42')
	// 详情
	const detail = reactive({})
	// 用户信息
	const userinfo = computed(() => uni.$store.state.userinfo || {})

	/**
	 * 初始化
	 * @param {Object} productId 产品id
	 */
	function init(productId) {
		if (productId) proId.value = productId
		// 打开
		open()
		// 获取详情
		getDetail()
		// 添加商品浏览记录
		addBrowsing()
	}

	// 获取详情
	function getDetail() {
		api.shop.productDetail({
			query: {
				userId: userinfo.value.id || '',
				// 产品id
				productionId: proId.value
			}
		}).then(rs => {
			if (rs.code == 200) {
				Object.assign(detail, {}, rs.data)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 添加商品浏览记录
	function addBrowsing() {
		// 验证登录
		util.isLogin(() => {
			// 添加浏览记录
			api.shop.addBrowsing({
				data: {
					userId: userinfo.value.id,
					goodsId: proId.value
				},
			}).then(rs => {
				if (rs.code != 200) console.log('addbrows err', rs.msg)
			})
		})
	}

	// 购买
	function handleBuy() {
		emit('buy', detail)
	}

	/**
	 * 详情
	 * @param {Object} ev 修改的详情
	 */
	function handleDetail(ev) {
		Object.assign(detail, {}, ev)
	}

	// 打开弹窗
	function open() {
		proxy.$refs.detailAlt.open()
	}

	// 关闭弹窗
	function close() {
		proxy.$refs.detailAlt.close()
	}

	defineExpose({
		init,
		open,
		close,
	})
</script>

<template>
	<uni-popup ref="detailAlt" type="bottom">
		<view class="container popBot">
			<view class="header">
				<image @click="close" class="back wh55" src="/static/back.png" />
			</view>

			<scroll-view class="scroll" :scroll-y="true">
				<view class="main">
					<!-- 获取详情 -->
					<proDetail :id="proId" :detail="detail" />

					<!-- 填充 -->
					<view class="fill" style="height: 180rpx;"></view>
				</view>
			</scroll-view>

			<!-- 底部 -->
			<view class="footerMenu pt30">
				<view class="content ptb30 plr20 bfff">
					<footerMenu :detail="detail" @update="handleDetail" @buy="handleBuy" />
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<style lang="scss">
	// 详情
	.container {
		position: relative;
		height: 1300rpx;
		background-color: #f8f8f8;

		// 头
		.header {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 10;
		}

		.scroll {
			flex: 1;
		}

		// 阴影盒子底部
		.footerMenu {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;

			// 
			.content {
				box-shadow: 0 0rpx 10rpx rgba(102, 102, 102, 0.3);
			}
		}
	}
</style>