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"
				/>
	    </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>
	          <!-- <text class="text_4 mt-9">{{已选：蓝色发簪}}</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%2FosWvYyNx-short1.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%2FGbdSQDul-add1.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 , ref } from 'vue';
import emitter from '../../../utils/emitter';
import { onLoad , onShow } from "@dcloudio/uni-app"; 
import { baseUrl , testUrl ,suiUrl} from '../../../api/request';
const productBrief = ref({}) //商品简要对象
const quantity = ref(1)
const userInfo = ref({})
onMounted(()=>{
	emitter.on('product',(val)=>{
		// console.log(val);
		productBrief.value = val
	})
})
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: {
			userId: userInfo.value.id,
			goodId: productBrief.value.id,
			quantity: quantity.value,
			subtotal: productBrief.value.price * quantity.value,
			isGoodType: productBrief.value.isGoodType
		}
	})
	if(res.data.code === 1) {
		uni.showToast({
			icon: 'success',
			title: "加入购物车成功"
		})
		close()
	}else{
		console.log('失败原因-->',res.data);
		uni.showToast({
			icon: 'error',
			title: "请求失败"
		})
		return;
	}
}
//减少商品
const decrease =()=>{
	// console.log('index-->',index);
	if(quantity.value > 0) {
		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: Open Sans;
  line-height: 26.21rpx;
}
.text_4 {
  color: #000000;
  font-size: 26.25rpx;
  font-family: Open Sans;
  line-height: 24.34rpx;
}
.image {
  width: 52.5rpx;
  height: 52.5rpx;
}
.image-wrapper_2 {
  padding: 11.25rpx 0;
  background-color: #f5f5dc;
  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: #f5f5dc;
  width: 52.5rpx;
  height: 52.5rpx;
}
.text_5 {
  color: #000000;
  font-size: 30rpx;
  font-family: Open Sans;
  line-height: 21.41rpx;
}
.image-wrapper_3 {
  padding: 11.25rpx 0;
  background-color: #f5f5dc;
  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: #ffd45a;
  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>