JM-MiniApp/components/goodsCard.vue

<script setup>
	import { ref} from "vue"
	// type：category-分类 ； list：内容列表
	const props = defineProps(['info','type','list','title','buy_type']);
	import goodsInfo from "@/components/goodsInfo.vue"
	import goodsSpecs from "@/components/goodsSpecs.vue"
	// import goodsCartPay from "@/components/goodsCartPay.vue"
	import api from "@/api/index"
	// 变量
	const detail_info = ref(null)
	const show_state = ref(false)
	// const isShow = ref(false)
	// 函数
	function toDetail(item) { // 商品详情
		let url = ''
		// if(props.buy_type == 'group') { // 团购
		// 	url = '/pages/goods/goodsDetail?info='+encodeURIComponent(JSON.stringify(item))+"&buy_type="+props.buy_type
		// }
		// else if(props.buy_type == 'limited'){ // 限时秒杀
			
		// }
		// else{ // 开学季尊享活动
		// 	url = '/pages/goods/goodsDetail?info='+encodeURIComponent(JSON.stringify(item))+"&buy_type="+props.buy_type
		// }
		url = '/pages/goods/goodsDetail?id='+item.id+'&info='+encodeURIComponent(JSON.stringify(item))+"&buy_type="+props.buy_type
		uni.navigateTo({
			url
		})
	}
	function toPlate() { //前往板块区域，比如限时秒杀
		let url = ''
		// if(props.buy_type == 'group') { // 团购
		// 	 url = "/pages/goods/goodsPlate?info="+JSON.stringify(props.info)
		// }
		// else{
		// 	return
		// }
		url = "/pages/goods/goodsPlate?info="+encodeURIComponent(JSON.stringify(props.info))+"&buy_type="+props.buy_type
		uni.navigateTo({
			url
		})
	}
	function addToCart(item) { // 加入购物车
		getGoodsDetail(item.id)
		return 
		// uni.showToast({
		// 	title: '已加入购物车！',
		// 	icon:'success',
		// 	duration: 2000,
		// 	// mask:true
		// });
	}
	async function getGoodsDetail(id) {// 获取商品详情 为了打开规格选项
		const res = await api.getGoodsDetail({
			id
		})
		if(res.code === 1) {
			detail_info.value = res.data
			detail_info.value = res.data
			// 解析轮播图
			if(detail_info.value.goods_images) {
				detail_info.value.goods_images = detail_info.value.goods_images.split(",")
				detail_info.value.goods_images = detail_info.value.goods_images.map((item,i) => {
					 let o = {
						image:item,
						skip_url:'',
						skip_url_type:2
					}
					return item = o
				})
			}
			// 详情
			// console.log(detail_info.value)
			show_state.value = !show_state.value
		}
	}
	function afterChoose(params) { // 确定加入购物车
		if(params.state === 1) {
			// current_info.value.id
			// getCartList() // 获取最新购物车
			uni.showToast({
				title: '已加入购物车！',
				icon:'success',
				duration: 2000,
				// mask:true
			});
			// isShow.value = true
		}
	}
	// function closedFunc() {
	// 	isShow.value = false
	// }
</script>
<template>
	<view class="goods-card-box">
		<!-- 展示分类 -->
		<view class="category-box" v-if="type === 'category'">
			<view class="gcb-title" style="justify-content: center;">
				{{title}}
			</view>
			<view class="gcb-list">
				<view class="gcb-list-card" v-for="(item,i) in list">
					<!-- <img style="width:100%;border:1px solid #f1f1f1;border-radius: 5px;" :src="item.cover" alt=""> -->
					<image style="width: 100%;border-radius: 5px;" :style="{ height: item.goods_image?'':'100rpx'}" :src="item.goods_image" mode="widthFix"></image>
					<view class="g-show-name text-ellipsis-1">{{item.goods_name}}</view>
				</view>
			</view>
		</view>
		<!-- 商品分组 方式1-->
		<view class="goods-box" v-if="type === 'goods'">
			<view class="gcb-title" @tap="toPlate">
				<view class="title-wrap">
					{{title}}
				</view>
				<uni-icons class="toCss" type="right" color="white" size="16"></uni-icons>
			</view>
			<view class="gcb-list">
				<view class="gcb-list-card" v-for="(item,i) in list">
					<goodsInfo @tap="toDetail(item)" type=1 :info="item" >
						<template v-if="buy_type=='activity'" #btn>
						    <view class="g-cart" @tap.stop="addToCart(item)">
						    	<image src="@/static/cart.png" mode="widthFix" ></image>
						    </view>
						</template>
					</goodsInfo>
				</view>
			</view>
		</view>
		<goodsSpecs :goods_info="detail_info" @choosedOk="afterChoose" :show_state="show_state"></goodsSpecs>
		<!-- <goodsCartPay :isShow="isShow" @closedState="closedFunc"></goodsCartPay> -->
	</view>
</template>
<style lang="scss">
	.gcb-title{
		display: flex;
		align-items: center;
	}
	.toCss{
		    position: absolute;
		    right: 10px;
		// position: absolute; right: 10px; top: 30%;
	}
	.title-wrap{
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
	}
	.g-cart{
		image{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.g-buy-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.g-price-box{
			color: #FD5B4E;
			display: flex;
			align-items: end;
			.g-price{
				font-size: 18px;
				margin-right: 10rpx;
				font-weight: 600;
			}
			.g-price-o{
				color: gray;
				font-size: 28rpx;
				text-decoration: line-through;
			}
		}
	}
	
	.g-desc{
		color: gray;
		font-size: 28rpx;
		margin: 10px 0;
	}
	.g-show-name{
		margin-top: 20rpx;
		font-weight: bolder;
	}
	.gcb-title{
		position: relative;
		background: linear-gradient(0deg, #82c8ea, #abdef4);
		color: white;
		padding: 16rpx 0;
		font-size: 36rpx;
		font-weight: 600;
		text-align: center;
	}
	.gcb-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20rpx;
		.gcb-list-card{
			// padding: 20rpx;
			width: 48%;
			margin: 20rpx 0;
		}
	}
	.goods-card-box{
		background: white;
		border: 1px solid #82c8ea;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 40rpx;
	    border-top: unset;
		.category-box{
			text-align: center;
			
			
		}
	}
</style>