You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
169 lines
4.2 KiB
Vue
169 lines
4.2 KiB
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> |