JM-MiniApp/components/goodsCart.vue

<script setup>
	// 引入
	import { onShow,onLoad,onHide } from "@dcloudio/uni-app"
	import {ref,onMounted,nextTick,reactive,watch} from "vue"
	import myButton from "@/components/myButton.vue"
	import { useStore } from '@/store'
	import api from "@/api/index"
	import goodsInfo from "@/components/goodsInfo.vue"
	const store = useStore()
	const props = defineProps(['cart_show','cart_list']);
	const emits = defineEmits(['del_cart'])
	onLoad((e) => {
		styleObject.value.height = store.systemInfo.screenHeight/1.8+'px'
		// console.log("组件:",props.goods_info)
		// getList()
	})
	watch(
	  () => props.cart_list,
	  (newVal, oldVal) => {
		// info.value = newVal
		list.value = newVal
		console.log("cart_list新值：",newVal)
		updateList()
	  }
	)
	watch(
	 ()=>props.cart_show,
	 (newVal, oldVal) => {
		 styleObject.value.height = store.systemInfo.screenHeight/1.8+'px'
		cart_popup.value.open('bottom')
    })
    //变量
	const list = ref([])
	const cart_popup = ref()
    const styleObject = ref({
	  height: '0px',
    })
	const total_num = ref(1)
	const current_ = ref(0)
	// 函数
	function updateList(){
		// console.log(list.value)
		if(list.value && list.value.length>0) {
			for(let item of list.value) {
				item.goods_image = item.goods.goods_image
				item.goods_name = item.goods.goods_name
				item.goods_id = item.goods.id
				item.sell_price = item.price * item.num
				item.single_price = item.price
				item.desc = item.spec.name+',￥'+item.spec.sell_price
			}
		}
	}
	async function getList() { // 获取购物车列表
		const res = await api.getCartList()
		if(res.code ===1) {
			list.value = res.data
		}
	}
	function changeNumFunc(value){
		setTimeout(() => {
			// console.log(value,current_.value)
			if(value>0) {
				list.value[current_.value].num = value
				list.value[current_.value].sell_price = list.value[current_.value].single_price * value
				// list.value[current_.value].price = value
				// 修改订单
				store.cartChange = !store.cartChange
				emits('update_cart',[list.value[current_.value].id,list.value[current_.value].num])
			}
			else if(value<1) { // 删除购物车
				// total_num.value = 1
				store.cartChange = !store.cartChange
				emits('del_cart',[list.value[current_.value].id])
			}
			else{ // 超过库存 
			}
		},0)
	}
	function lockItem(i) { // 锁定当前操作的索引
		current_.value = i
	}
	async function ofunc() { // 去结算
		if(list.value.length > 0) {
			uni.navigateTo({
				url:'../order/order_submit?type=cart&info='+encodeURIComponent(JSON.stringify(props.cart_list))
			})
		}
	}
	async function clearFunc() { // 清除购物车
		if(list.value.length<1) {
			uni.showToast({
				title:"没有商品哦~",
				icon:"none"
			})
			return
		}
	    uni.showModal({
	    	title:'清除提示',
			content:'确定要清除购物车吗?',
			success:(val)=>{
				console.log(val)
				if(val.confirm) {
					let arr = []
					for(let item of list.value) {
						arr.push(item.id)
					}
					store.cartChange = !store.cartChange
					emits('del_cart',arr)
				}
			}
	    })
	}
</script>
<template>
	<view class="goodsCartBox">
		<uni-popup ref="cart_popup" @change="change">
			<view class="popup-content" :style="styleObject" >
				<view class="pc-top">
					<view class="pc-top-left">
						已选商品
						<text style="color: gray;">(共{{list.length}}件)</text>
					</view>
					<view class="pc-top-right" style="color: gray;" @click="clearFunc">
						清空购物车
					</view>
				</view>
				<view class="pc-content">
					<view class="list-row" v-for="(item,i) in list" @tap="lockItem(i)">
						<goodsInfo :type="2" :info="item" >
							<template #btn>
								<uni-number-box :value="item.num"  @change="changeNumFunc" />
							</template>
						</goodsInfo>
					</view>
				</view>
				<view class="pc-bottom" style="padding: 40rpx 0 ;">
					<!-- 按钮 -->
					<myButton v-if="list.length>0" style="width: 100%;" class="op-right" :type="2" @tap="ofunc(3)">
						去结算
					</myButton> 
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<style scoped lang="scss">
	.pc-bottom{
		z-index: 100;
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: white;
	}
	.goodsCartBox{
		.popup-content{
			position: relative;
			padding-top: 40rpx;
			background-color: white;
			border-radius: 10px 10px 0 0;
			overflow: scroll;
			.pc-top{
				position: fixed;
				top: 34px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				box-sizing: border-box;
				padding: 40rpx;
				background-color: white;
				z-index: 10;
			}
			.pc-content{
				.list-row{
					padding: 20rpx;
				}
				margin-bottom: 260rpx;
				margin-top: 20rpx;
			}
			.pc-row{
				padding:0 40rpx;
				padding-bottom: 40rpx;
				.pcr-title{
					color: gray;
					font-size: 30rpx;
					padding: 20rpx 0;
				}
				.pc-choose-card-box{
					.pc-choose-card{
						display: inline-block;
						background: #f1f1f1;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
						// font-weight: bolder;
						font-size: 28rpx;
					}
				}
			}
			.main-info{
				display: flex;
				// align-items:;
				.pcr-left{
					margin-right: 40rpx;
					.pcrl-img-box{
						border: 2rpx solid #dadada;
						width: 180rpx;
						height: 180rpx;
						image{
							width: 180rpx;
							height: 180rpx;
						}
					}  
				}
				.pcr-right{
					.pcrr-row{
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>