503 lines
16 KiB
Vue
503 lines
16 KiB
Vue
<template>
|
||
<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
|
||
<view class="main">
|
||
<!-- 头部区域 -->
|
||
<view class="head" :style="{'padding-top':headerHeight+'px'}" >
|
||
<view class="head_location" :class="storeName?'head_location_active':''" @click="location()"><text class="location_title">{{storeName||'正在获取定位'}}</text></view>
|
||
<view class="head_ul">
|
||
<view class="head_l">
|
||
<view class="head_q">购物车</view>
|
||
<view class="head_w">我常买</view>
|
||
</view>
|
||
<view class="head_r">
|
||
<view class="head_li" @click.stop="OpenCoupon()">优惠券(3）</view>
|
||
<view class="head_li" :class="showEdit?'head_edit':''" @click.stop="edit">{{showEdit?'退出管理':'管理'}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cont">
|
||
<view class="head_fixed" :style="{'height':75+headerHeight+'px'}">下拉刷新...</view>
|
||
<view class="cart">
|
||
<view style="height: 10rpx;"></view>
|
||
<template v-if="cartList.length">
|
||
<uni-swipe-action>
|
||
<uni-swipe-action-item v-for="(item,index) in cartList" :key="index" :right-options="options" @click="removeCart(1,item)">
|
||
<view class="cart_item">
|
||
<view class="cart_selected" @click="checkedShop(item)">
|
||
<view :class="item.isSelect === 1?'cart_selected_true':'cart_selected_false'">
|
||
<image v-if="item.isSelect" src="../../static/selected.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="cart_shop">
|
||
<image class="cart_shop_img" :src="item.image" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_shop_cont">
|
||
<view class="cart_title"><text class="cart_text">{{item.storeName}}</text></view>
|
||
<view class="cart_desc">{{item.desc}}</view>
|
||
<view class="cart_bottom">
|
||
<view class="cart_price price">{{item.price}}<!--<text class="market_name prices">59.9</text>--></view>
|
||
<view class="cart_counter" v-if="showEdit" @click="removeCart(1,item)">
|
||
<view class="cart_remove">删除</view>
|
||
</view>
|
||
<view class="cart_counter" v-else>
|
||
<view class="cart_counter_btn border_l" @click="editAmount(1,item)">
|
||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_counter_center">{{item.cartNum}}</view>
|
||
<view class="cart_counter_btn border_r" @click="editAmount(2,item)">
|
||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="cart_items" v-if="item.type == 2">
|
||
<view class="cart_t">
|
||
<view class="cart_selected">
|
||
<view :class="item.isSelect?'cart_selected_true':'cart_selected_false'">
|
||
<image v-if="item.isSelect" src="../../static/selected.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="cart_view_scroll">
|
||
<view class="cart_scroll">
|
||
<scroll-view class="cart_scroll_ul" :scroll-with-animation="true" :enhanced="true" :show-scrollbar="false" scroll-x="true">
|
||
<view class="cart_scroll_li" v-for="(i,index) in item.list">
|
||
<view class="cart_scroll_img">
|
||
<image class="cart_scroll_img_url" :src="i.imgUrl" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_scroll_title">{{i.title}}</view>
|
||
<view class="cart_scroll_price price">{{i.price}}<text class="market_name prices">59.9</text></view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
</view>
|
||
<view class="cart_bottom">
|
||
<view class=""></view>
|
||
<view class="cart_counter" v-if="showEdit" @click="removeCart(1,item)">
|
||
<view class="cart_remove">删除</view>
|
||
</view>
|
||
<view class="cart_counter" v-else>
|
||
<view class="cart_counter_btn border_l">
|
||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_counter_center">1</view>
|
||
<view class="cart_counter_btn border_r">
|
||
<image class="cart_counter_btn_img" src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</uni-swipe-action-item>
|
||
</uni-swipe-action>
|
||
</template>
|
||
<!-- 失效商品 -->
|
||
<view class="cart_lose" v-if="cartList_invalid.length">
|
||
<view class="cart_lose_top">
|
||
<view class="cart_lose_top_l">共{{cartList_invalid.length}}款失效商品</view>
|
||
<view class="cart_lose_top_r">一键清空</view>
|
||
</view>
|
||
<view class="cart_lose_bottom" v-for="(item,index) in cartList_invalid" :key="index">
|
||
<view class="cart_lose_img">
|
||
<view class="cart_lose_bcg">
|
||
<view class="cart_lose_text">商品已下架</view>
|
||
</view>
|
||
<image class="cart_lose_img_url" :src="item.image" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cart_lose_ly">
|
||
<view class="cart_lose_title">{{item.storeName}}</view>
|
||
<view class="cart_lose_desc">商品下架了</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="empty" v-if="iscartShow && !cartList.length && !cartList_invalid.length">
|
||
<view class="empty_cont">
|
||
<image class="empty_cont_img" src="../../static/Empty/cart.png" mode="widthFix"></image>
|
||
<view class="empty_cont_title">购物车还是空的，快去加购吧</view>
|
||
<view class="empty_cont_btn">去逛逛</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template>
|
||
<recomGoods v-if="iscartListLoaded" :apiType="5" @updatecart="cartType"></recomGoods>
|
||
</template>
|
||
<view style="height: 200rpx;"></view>
|
||
<view class="footer" v-if="cartList.length">
|
||
<view class="footer_l">
|
||
<view class="footer_selected" @click="allChecked">
|
||
<view :class="allCheckedShow?'footer_selected_true':'footer_selected_false'">
|
||
<image v-if="allCheckedShow" src="../../static/selected.png"></image>
|
||
</view>
|
||
<view class="footer_text">全选</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer_r">
|
||
<view class="footer_edit" v-if="showEdit">
|
||
<view class="footer_edit_li footer_edit_li_border" @click="removeCart(2)">一键清空</view>
|
||
<view class="footer_edit_li" @click="removeCart(3)">删除</view>
|
||
</view>
|
||
<block v-else>
|
||
<view class="footer_v">
|
||
<view class="footer_text">合计:</view>
|
||
<view class="footer_price">{{totalPrice}}</view>
|
||
</view>
|
||
<view class="footer_btn" :class="!totalPrice?'opy':''" @click="orderConfirm">去结算</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="couponPopup" type="bottom" @change="changeCoupon">
|
||
<view class="shop_open shop_open_bcg">
|
||
<view class="shop_open_title">优惠券<view class="shop_open_close" @click="OpenCoupon()"><image src="../../static/order/close.png" mode="widthFix"></image></view></view>
|
||
<view class="shop_open_desc">可使用券(2)</view>
|
||
<view class="coupon_cont">
|
||
<view class="coupon_item">
|
||
<view class="coupon_item_l">
|
||
<view class="coupon_item_absolute"></view>
|
||
<view class="coupon_item_v">
|
||
<view class="coupon_item_price">5</view>
|
||
<view class="coupon_item_desc">满39可用</view>
|
||
</view>
|
||
</view>
|
||
<view class="coupon_item_border"></view>
|
||
<view class="coupon_item_r">
|
||
<view class="coupon_item_r_l">
|
||
<view class="coupon_item_name">新人限时券</view>
|
||
<view class="coupon_item_time">今日23:59到期</view>
|
||
</view>
|
||
<view class="coupon_item_r_r">领取</view>
|
||
</view>
|
||
</view>
|
||
<view class="coupon_item">
|
||
<view class="coupon_item_l">
|
||
<view class="coupon_item_absolute"></view>
|
||
<view class="coupon_item_v">
|
||
<view class="coupon_item_price">10</view>
|
||
<view class="coupon_item_desc">满59可用</view>
|
||
</view>
|
||
</view>
|
||
<view class="coupon_item_border"></view>
|
||
<view class="coupon_item_r">
|
||
<view class="coupon_item_r_l">
|
||
<view class="coupon_item_name">新人限时券</view>
|
||
<view class="coupon_item_time">今日23:59到期</view>
|
||
</view>
|
||
<view class="coupon_item_r_r">领取</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<!-- 获取定位失败小组件提示 -->
|
||
<locationOpen></locationOpen>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import NP from 'number-precision';
|
||
import { loads } from '@/utils/index.js'
|
||
import recomGoods from '@/components/recomGoods/recomGoods.vue';
|
||
import { ref,computed } from 'vue';
|
||
import { useCounterStore } from '@/store/counter'; // 引入Pinia Store
|
||
import { storeToRefs } from 'pinia';//实现解构付值
|
||
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
|
||
import { cartlist,cartnum,cartdelete,preorder,optForCart } from "@/server/api.js"
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const {statusHeight,headerHeight,token,storeName,storeId,latitude,longitude,locationShow } = storeToRefs(counterStore);
|
||
const couponPopup = ref(null);
|
||
const couponShow = ref(false);
|
||
const show = ref(false);
|
||
const showEdit = ref(false);
|
||
const cartList = ref([]);
|
||
const cartList_invalid = ref([]);
|
||
const allCheckedShow = ref(false)
|
||
const cartpages = ref(0);
|
||
const cartdecs = ref("");
|
||
const iscartListLoaded = ref(false)
|
||
const iscartShow = ref(false);
|
||
const carttotal = ref(0)
|
||
const options = ref([
|
||
{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#FD4955'
|
||
}
|
||
}
|
||
]);
|
||
const OpenCoupon =() =>{
|
||
couponShow.value ? couponPopup.value.close():couponPopup.value.open()
|
||
};
|
||
const changeCoupon = (e)=>{
|
||
couponShow.value = e.show;
|
||
show.value = e.show;
|
||
};
|
||
const edit = (e)=>{
|
||
showEdit.value ? showEdit.value = false:showEdit.value = true;
|
||
};
|
||
const cartType = (type)=>{
|
||
api_cartlist(true);
|
||
}
|
||
const goDetail= ()=>{
|
||
uni.navigateTo({
|
||
url:`/shopProDetail/detail/detail`
|
||
})
|
||
}
|
||
|
||
//购物车有效商品
|
||
const api_cartlist = (e) =>{
|
||
if(e){
|
||
// cartList.value = [];
|
||
// cartdecs.value = '';
|
||
// cartpages.value = 0;
|
||
iscartShow.value = false;
|
||
}
|
||
cartdecs.value = "—— 加载中... ——";
|
||
// cartpages.value = cartpages.value + 1;
|
||
loads('', true)
|
||
const params = {isValid:"1",page:'1',limit:'100'}
|
||
return cartlist(params).then(({data})=>{
|
||
uni.hideLoading()
|
||
cartdecs.value = '—— 上拉加载更多 ——'
|
||
if(data.list.length < 10){
|
||
cartdecs.value = '—— 嗷呜，已经到底啦 ——';
|
||
}
|
||
//更改全选状态
|
||
const allSelected = data.list.every(item => item.isSelect === 1);
|
||
if(allSelected){
|
||
allCheckedShow.value = true;
|
||
}else{
|
||
allCheckedShow.value = false;
|
||
}
|
||
cartList.value = data.list;
|
||
carttotal.value = data.total;
|
||
})
|
||
.then(()=>{
|
||
if(e){api_cartlist_invalid(true)}
|
||
})
|
||
.catch(({message}) => {
|
||
uni.hideLoading()
|
||
img_err.value = "../../static/Empty/err.png"
|
||
cartdecs.value = `—— ${message||'网络异常'} ——`;
|
||
})
|
||
}
|
||
//购物车无效商品
|
||
const api_cartlist_invalid = (empty) =>{
|
||
// if(empty){
|
||
// cartList_invalid.value = [];
|
||
// }
|
||
const params = {isValid:"0",page:'1',limit:'50'}
|
||
return cartlist(params).then(({data})=>{
|
||
uni.hideLoading()
|
||
cartList_invalid.value = data.list;
|
||
iscartListLoaded.value = true
|
||
iscartShow.value = true
|
||
})
|
||
.catch(({message}) => {
|
||
uni.hideLoading()
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
//编辑购物车商品数量
|
||
const editAmount=(type,data)=>{
|
||
console.log('data',data);
|
||
let { id,cartNum } = data;
|
||
//加/减数量
|
||
if(cartNum == 1 && type == 1) return false;
|
||
let number = type == 1 ? cartNum - 1 : cartNum + 1;
|
||
loads('', true)
|
||
return cartnum(id,number).then(({message})=>{
|
||
uni.hideLoading()
|
||
cartList.value.forEach(item=>{
|
||
if(id == item.id){
|
||
item.cartNum = type == 1 ? item.cartNum - 1 : item.cartNum + 1;
|
||
}
|
||
})
|
||
}).catch(({message}) => {
|
||
uni.hideLoading()
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
};
|
||
//全选
|
||
const allChecked=()=>{
|
||
let cartType = "";
|
||
if(allCheckedShow.value){
|
||
cartType = "no"
|
||
}else{
|
||
cartType = "yes"
|
||
}
|
||
api_optForCart(2,0,cartType);
|
||
};
|
||
//商品选中未选中
|
||
const checkedShop=(e)=>{
|
||
let cartType = ""
|
||
if(e.isSelect){
|
||
cartType = "no"
|
||
}else{
|
||
cartType = "yes"
|
||
}
|
||
api_optForCart(1,e.id,cartType);
|
||
};
|
||
const api_optForCart=(type,cartIds,cartType)=>{
|
||
const params = {cartType}
|
||
if(type == 1){
|
||
params.cartIds = cartIds
|
||
}
|
||
loads('', true)
|
||
return optForCart(params).then(({data})=>{
|
||
uni.hideLoading()
|
||
if(type == 1){
|
||
//更改单商品选中状态
|
||
cartList.value.forEach((item,index)=>{
|
||
if(cartIds == item.id){
|
||
item.isSelect = item.isSelect === 1 ? 0 : 1
|
||
}
|
||
})
|
||
//更改全选状态
|
||
const allSelected = cartList.value.every(item => item.isSelect === 1);
|
||
allCheckedShow.value =allSelected ? true : false;
|
||
}else{
|
||
allCheckedShow.value = cartType == "yes" ? true : false;
|
||
cartList.value.forEach((item,index)=>{
|
||
item.isSelect = cartType == "yes" ? 1 : 0;
|
||
})
|
||
}
|
||
})
|
||
.catch(({message}) => {
|
||
uni.hideLoading()
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
//计算总价
|
||
const totalPrice = computed(() => {
|
||
//过滤出选中的对象
|
||
const selectedItems = cartList.value.filter(item => item.isSelect === 1);
|
||
//计算总价（考虑数量）
|
||
return selectedItems.reduce((sum, item) => NP.round(NP.plus(sum,NP.times(item.price,item.cartNum)),2), 0);
|
||
});
|
||
//选中多少数件
|
||
const selectedAmount = computed(() => {
|
||
//过滤出选中的对象
|
||
const selectedItems = cartList.value.filter(item => item.isSelect === 1);
|
||
return selectedItems.length
|
||
});
|
||
const removeCart=(type,item)=>{
|
||
let content = '';
|
||
if(type == 1){
|
||
content = "确定要删除此商品吗?"
|
||
}else if(type == 2){
|
||
content = "确定要清空购物车所有商品吗?"
|
||
}else{
|
||
content = `确定要删除购物车选中的${selectedAmount.value}种商品吗?`
|
||
}
|
||
uni.showModal({
|
||
content:content,
|
||
confirmText:type == 2?'清空':'删除',
|
||
confirmColor:'#F14D48',
|
||
success: ({confirm}) => {
|
||
if (confirm) {
|
||
if(type == 1){
|
||
api_cartdelete(type,item.id);
|
||
}else if(type == 2){
|
||
const ids = cartList.value.map(item => item.id);
|
||
api_cartdelete(type,ids)
|
||
}else{
|
||
//过滤出选中的对象
|
||
const ids = cartList.value.filter(item => item.isSelect === 1).map(item => item.id);
|
||
api_cartdelete(type,ids)
|
||
}
|
||
}
|
||
}
|
||
})
|
||
};
|
||
const api_cartdelete = (type,ids) => {
|
||
loads('', true)
|
||
return cartdelete(ids).then(({message})=>{
|
||
uni.hideLoading()
|
||
if(type == 1){
|
||
cartList.value = cartList.value.filter(item => item.id !== ids);
|
||
}else{
|
||
cartList.value = cartList.value.filter(item => !ids.includes(item.id));
|
||
}
|
||
if(showEdit.value){ showEdit.value = false }
|
||
})
|
||
.catch(({message}) => {
|
||
uni.hideLoading()
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
//预下单
|
||
const orderConfirm = () => {
|
||
const orderDetails = cartList.value.filter(item => item.isSelect === 1).map(item => ({shoppingCartId:item.id}));
|
||
if(!orderDetails.length){
|
||
uni.showToast({
|
||
title:'请选中商品后，在结算',
|
||
icon:'none'
|
||
})
|
||
return false
|
||
}
|
||
loads('', true)
|
||
let params = {
|
||
merId:storeId.value,
|
||
orderDetails,
|
||
preOrderType:'shoppingCart'
|
||
};
|
||
return preorder(params).then(({data})=>{
|
||
uni.hideLoading();
|
||
uni.navigateTo({
|
||
url:`/order/orderConfirm/orderConfirm?preOrderNo=${data.preOrderNo}`
|
||
})
|
||
})
|
||
.catch(({message}) => {
|
||
uni.hideLoading()
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
|
||
const location=()=>{
|
||
if(locationShow.value) return false;
|
||
uni.navigateTo({
|
||
url:`/userserve/location/location`
|
||
})
|
||
}
|
||
//使用 uni.onLoad 监听页面加载
|
||
onLoad((options) => {});
|
||
onShow(() => {
|
||
api_cartlist(true);
|
||
});
|
||
onPullDownRefresh(()=>{
|
||
api_cartlist(true);
|
||
uni.stopPullDownRefresh();
|
||
})
|
||
onReachBottom(()=>{
|
||
// api_cartlist(false);
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
.uni-swipe{
|
||
margin: 0rpx 20rpx 0rpx 20rpx !important;
|
||
margin-bottom: 20rpx !important;
|
||
border-radius: 25rpx !important;
|
||
background-color: #fff !important;
|
||
}
|
||
</style> |