jiangchengfeiyi-xiaochengxu/pages/Shopping-cart/component/addProduct.vue

<template>
	<view class="flex-col page">
		<view class="flex-row group">
			<view class=" ">
				<image class="flex-col justify-start items-end shrink-0 self-start image-wrapper"
					:src="productBrief.goodImg.split(';')[0]" />
			</view>
			<view class="flex-row flex-1 ml-23">
				<view class="flex-col flex-1 self-start group_2">
					<view class="self-start group_3">
						<text class="text_2">￥</text>
						<text class="text">{{ productBrief.price }}</text>
					</view>
					<view class="mt-14 flex-col items-start self-stretch">
						<text class="text_3">{{productBrief.name}}</text>
					</view>
				</view>
				<view class="flex-col shrink-0 ml-5">
					<image class="self-end image"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FxSHTnKhk-close.png"
						@click="close()" />
					<view class="flex-row self-stretch mt-104">
						<view class="flex-col justify-start items-center image-wrapper_2">
							<image class="image_3"
								src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FFXJDkHOz-jian.png"
								@click="decrease" />
						</view>
						<view class="ml-2 flex-col justify-start items-center text-wrapper"><text
								class="text_5">{{ quantity }}</text></view>
						<view class="ml-2 flex-col justify-start items-center image-wrapper_3">
							<image class="image_3" 
								src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FYvlxXoMs-jia.png"
								@click="increase" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-col justify-start items-center text-wrapper_2" @click="addCart"><text class="text_6">加入购物车</text></view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		onUnmounted,
		ref
	} from 'vue';
	import emitter from '../../../utils/emitter';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import { getFonts } from '../../../common/globalFont';
	import {
		baseUrl
	} from '../../../api/request';
	import { dealResult } from '../../../common/globalFunction';
	const productBrief = ref({}) //商品简要对象
	const quantity = ref(1)
	const userInfo = ref({})
	
	const productHandler = (val) => {
		productBrief.value = val
	}
	
	onLoad(() => {
		getFonts()
	})
	
	onMounted(() => {
		emitter.on('product', productHandler)
	})
	
	onUnmounted(() => {
		emitter.off('product', productHandler)
	})
	
	onShow(() => {
		userInfo.value = wx.getStorageSync('userInfo') //获取用户信息
	})
	const close = () => {
		emitter.emit('close')
	}
	const addCart = async () => {
		console.log('商品brief-->', productBrief.value);
		console.log('用户信息-->', userInfo.value);
		const res = await uni.request({
			url: baseUrl + '/cart/add',
			method: 'POST',
			header: {
				cookie: wx.getStorageSync('cookie')
			},
			data: {
				goodId: productBrief.value.id,
				quantity: quantity.value
			}
		})
		if(!dealResult(res)) {
			return ;
		}
		if (res.data.code === 1) {
			uni.showToast({
				icon: 'success',
				title: "加入购物车成功"
			})
			close()
		} else {
			console.log('失败原因-->', res.data);
			uni.showToast({
				icon: 'error',
				title: res.data.message
			})
			return;
		}
	}
	//减少商品
	const decrease = () => {
		// console.log('index-->',index);
		if (quantity.value != 1) {
			quantity.value -= 1
		}
	}
	//这里应该结合库存有多少  11.8
	const increase = () => {
		if (quantity.value <= productBrief.value.inventory) {
			quantity.value += 1
		}
	}
</script>

<style lang="scss" scoped>
	.ml-23 {
		margin-left: 43.13rpx;
	}

	.mt-9 {
		margin-top: 16.88rpx;
	}

	.ml-5 {
		margin-left: 9.38rpx;
	}

	.mt-104 {
		margin-top: 195rpx;
	}

	.page {
		padding: 0 31.88rpx 31.88rpx 45rpx;
		background-color: #fffef8;
		border-radius: 37.5rpx 37.5rpx 0rpx 0rpx;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding: 28.13rpx 0 37.5rpx 11.25rpx;
	}

	.image-wrapper {
		margin-top: 76.88rpx;
		// padding-bottom: 151.88rpx;
		border-radius: 5.63rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 191.25rpx;
		height: 189.38rpx;
	}

	.image_2 {
		border-radius: 5.63rpx;
		width: 37.5rpx;
		height: 37.5rpx;
	}

	.group_2 {
		margin-top: 112.5rpx;
	}

	.group_3 {
		margin-left: 3.75rpx;
	}

	.text_2 {
		color: #ff0000;
		font-size: 26.25rpx;
		font-family: STZhongsong;
		line-height: 18.13rpx;
	}

	.text {
		color: #ff0000;
		font-size: 37.5rpx;
		font-family: STZhongsong;
		line-height: 26.92rpx;
	}

	.text_3 {
		color: #000000;
		font-size: 28.13rpx;
		font-family: FangZhengFonts;
		line-height: 26.21rpx;
	}

	.text_4 {
		color: #000000;
		font-size: 26.25rpx;
		font-family: FangZhengFonts;
		line-height: 24.34rpx;
	}

	.image {
		width: 52.5rpx;
		height: 52.5rpx;
	}

	.image-wrapper_2 {
		padding: 11.25rpx 0;
		background-color: #FBDEDF;
		border-radius: 5.63rpx 0rpx 0rpx 5.63rpx;
		width: 52.5rpx;
		height: 52.5rpx;
	}

	.image_3 {
		width: 33.75rpx;
		height: 33.75rpx;
	}

	.text-wrapper {
		padding: 15rpx 0 11.25rpx;
		background-color: #FBDEDF;
		width: 52.5rpx;
		height: 52.5rpx;
	}

	.text_5 {
		color: #000000;
		font-size: 30rpx;
		font-family: FangZhengFonts;
		line-height: 21.41rpx;
	}

	.image-wrapper_3 {
		padding: 11.25rpx 0;
		background-color: #FBDEDF;
		border-radius: 0rpx 5.63rpx 5.63rpx 0rpx;
		width: 52.5rpx;
		height: 52.5rpx;
	}

	.text-wrapper_2 {
		margin-right: 15rpx;
		padding: 22.5rpx 0;
		background-color: #E79EA1;
		border-radius: 93.75rpx;
	}

	.text_6 {
		color: #ffffff;
		font-size: 30rpx;
		font-family: Inter;
		font-weight: 700;
		line-height: 28.2rpx;
	}

	@import url(../../../common/css/global.css);
</style>