JM-MiniApp/components/goodsCartPay.vue

<script setup>
	// 引入依赖
	import { onLoad,onShow } from "@dcloudio/uni-app"
	import api from "@/api/index"
	import {ref,onMounted,nextTick,watch} from "vue"
	// import custom from "@/utils/index"
	import { useStore } from '@/store'
	const store = useStore()
	// import searchBox from "@/components/searchBox.vue"
	// import notice from "@/components/notice.vue"
	// import goodsInfo from "@/components/goodsInfo.vue"
	// import goodsSpecs from "@/components/goodsSpecs.vue"
	import goodsCart from "@/components/goodsCart.vue"
	const props = defineProps(['isShow']);
	const emits = defineEmits([])
	watch(() => {
		return props.isShow
	},(val1,val2) => {
		console.log(props.isShow)
	})
	// 变量
	const cart_show = ref(false)
	const current_ = ref(0)
	const choosed_list = ref([])
	const choosed_info_list = ref([])
	const totalprice = ref(0)
	const detail_info = ref(null)
	// 函数
	function showCart() { // 打开购物车
		cart_show.value = !cart_show.value
	}
	async function update_cart_func(params) {
		// console.log(params)
		const res = await api.updateCart({
			cart_id:params[0],
			num:params[1]
		})
		if(res.code === 1) {
			getCartList()
		}
	}
	const cart_list = ref(null)
	async function getCartList() { // 购物车列表
		const res = await api.getCartList()
		// console.log(res)
		if(res.code === 1) {
			// if(res.data.length >0) {
				cart_list.value = res.data
				// console.log(cart_list.value)
				totalprice.value = cart_list.value.reduce((total,item) => {
					return total + parseFloat(item.price)
				},0)
				// choosed_list.value.push(item.id)
				// totalprice.value += item.sell_price
				// choosed_info_list.value.push(item)
			// }
		}
	}
	async function toPay() { // 跳转支付
		// 获取默认地址，若无，则跳转地址设置界面
		 const res = await api.getDefaultAddress()
		 if(res.code ===1 ) {
			if(!res.data) { // 没有默认地址
				uni.showToast({
					title:"请设置默认地址",
					duration:1500,
					icon:'none'
				})
				setTimeout(() => {
					uni.navigateTo({
						url:'../address/index'
					})
				},1500)
			}
			else{
				uni.navigateTo({
					url:'../order/order_submit?info='+encodeURIComponent(JSON.stringify(cart_list.value))
				})
			}
		 }
	}
</script>
<template>
	<view class="goodsCartPayBox">
		<view class="checkoutBox" v-if="cart_list && cart_list.length>0" @tap="showCart">
			<!-- 结算信息 -->
			<view class="checkoutBox-left">
				<!-- 商品数量 -->
				<view class="goods-num">
					<image src="../..//static/cart2.png" mode=""></image>
					<view class="num-show">{{cart_list.length}}</view>
				</view>
				<!-- 价格信息以及配送费 -->
				<view class="goods-info">
					<view class="g-price">￥{{totalprice}}</view>
					<view class="g-price-o" >
						<!-- 另需配送费￥10 -->
					</view>
				</view>
			</view>
			<view class="checkoutBox-right">
				<view class="checkout-btn" @tap.stop="toPay">
					去结算
				</view>
			</view>
		</view>
		<goodsCart @del_cart="del_cart_func" @update_cart="update_cart_func" :cart_show="cart_show" :cart_list="cart_list"></goodsCart>
	</view>
</template>
<style scoped lang="scss">
	.goodsCartPayBox{
		
	}
	.checkoutBox-right{
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.checkout-btn{
			display: flex;
			height: 100%;
			background: #7cc4e8;
			padding: 0 20rpx;
			color: white;
			align-items: center;
			justify-content: center;
			width: 60%;
		}
	}
	.g-price{
		color: #FD5B4E;
		font-size: 36rpx;
		margin-right: 10rpx;
		font-weight: 600;
	}
	.g-price-o{
		color: gray;
		font-size: 28rpx;
		// text-decoration: line-through;
	}
	.checkoutBox{
		position: absolute;
		bottom: 0px;
		width: 100%;
		background: white;
		display: flex;
		.checkoutBox-left{
			padding: 20rpx;
			width: 50%;
			display: flex;
			.goods-num{
				margin-right: 40rpx;
				padding: 20rpx;
				background: #f8f8f8;
				border-radius: 50%;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>