charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

暂存code

Browse Source
This commit is contained in:
hejiangming
2025-05-07 09:54:33 +08:00
parent 78270eeda0
commit 007b002b81
403 changed files with 14507 additions and 6320 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/shopping_cart/shopping_cart.vue
+216 -161
View File
@@ -1,121 +1,127 @@
<template>
<view
:style="{'height':isDataNull ? 'calc(100vh - 134rpx)':'calc(100vh - 256rpx)'}"
class="shopping_cart_warp"
>
<view class="shopping_cart_header">
<view class="cart">购物车({{shoppingTotal}})</view>
<view class="enit_but" @click="isEdit = true">编辑</view>
</view>
<!-- 购物车列表 -->
<up-loading-page :loading="listLoading"></up-loading-page>
<view
class="shopping_cart_content"
<view>
<view
:style="{'height':isDataNull ? 'calc(100vh - 134rpx)':'calc(100vh - 410rpx)'}"
class="shopping_cart_warp"
>
<view v-if="!isDataNull" class="shopping_cart_content_item" v-for="(item,index) in shoppingList" :key="item.id" >
<!-- 头部 -->
<up-checkbox
:customStyle="{marginBottom: '8px'}"
name="isCheck"
usedAlone
v-model:checked="item.isCheck"
shape="circle"
activeColor="#FF7C41"
size="19"
iconSize="18"
@change="(event)=>shoppingChange(event,index)"
>
<template #label>
<view class="content_item_header">
<up-image :src="item.shopLogo ?item.shopLogo :'/static/shopping/store.png'" width="22" height="22" bgColor="#f1f6ff00" shape="circle"></up-image>
<view class="order_product_title">{{item.shopName}}{{item.id}}</view>
</view>
</template>
</up-checkbox>
<view >
<view class="content_item_info" v-for="(pItem,pIndex) in item.product" :key="pItem.id">
<up-checkbox
:customStyle="{marginBottom: '8px'}"
name="isCheck"
usedAlone
v-model:checked="pItem.isCheck"
shape="circle"
activeColor="#FF7C41"
size="19"
iconSize="18"
:disabled="!pItem.isAvail"
@change="(event)=>productChange(event,index,pIndex)"
>
</up-checkbox>
<view class="info_item" @click="jumpInfo(pItem)">
<up-image :src="pItem.mainGraph" width="100" height="100" bgColor="#f1f6ff00"></up-image>
<view class="content_info">
<view class="shopping_content_info_title">{{pItem.name}}</view>
<view class="content_info_description">
{{pItem.goodsSpece}}
</view>
<view class="shopping_info_amount">
<view>
<view style="color: #FF7C41FF;">
<text style="font-size: 22rpx;">￥</text>
<text style="font-size: 32rpx;">{{pItem.unitPrice}}</text>
</view>
<view class="shopping_info_amount_original">￥{{pItem.unitPrice}}</view>
<view class="shopping_cart_header">
<view class="cart">购物车({{shoppingTotal}})</view>
<view class="enit_but" @click="isEdit = true" v-if="!isEdit" v-show="!isDataNull">编辑</view>
<view class="enit_but" @click="isEdit = false" v-else v-show="isDataNull">取消</view>
</view>
<!-- 购物车列表 -->
<up-loading-page :loading="listLoading"></up-loading-page>
<view
class="shopping_cart_content"
>
<view v-if="!isDataNull" class="shopping_cart_content_item" v-for="(item,index) in shoppingList" :key="item.id" >
<!-- 店铺头部 -->
<up-checkbox
:customStyle="{marginBottom: '8px'}"
name="isCheck"
usedAlone
v-model:checked="item.isCheck"
shape="circle"
activeColor="#FF7C41"
size="19"
iconSize="18"
@change="(event)=>shoppingChange(event,index)"
>
<template #label>
<view class="content_item_header">
<up-image :src="item.shopLogo ?item.shopLogo :'/static/shopping/store.png'" width="22" height="22" bgColor="#f1f6ff00" shape="circle"></up-image>
<view class="order_product_title">{{item.shopName}}{{item.id}}</view>
</view>
</template>
</up-checkbox>
<view >
<view class="content_item_info" v-for="(pItem,pIndex) in item.product" :key="pItem.id">
<!-- 单个商品 -->
<up-checkbox
:customStyle="{marginBottom: '8px'}"
name="isCheck"
usedAlone
v-model:checked="pItem.isCheck"
shape="circle"
activeColor="#FF7C41"
size="19"
iconSize="18"
:disabled="!isEdit && [1,2].includes(pItem.goodsStatus)"
@change="(event)=>productChange(event,index,pIndex)"
>
</up-checkbox>
<view class="info_item" >
<up-image :src="pItem.mainGraph" width="100" height="100" bgColor="#f1f6ff00" @click="jumpInfo(pItem)"></up-image>
<view class="content_info">
<view class="shopping_content_info_title" @click="jumpInfo(pItem)">{{pItem.name}}</view>
<view class="content_info_description">
{{pItem.goodsSpece}}
</view>
<view>
<view class="shopping_info_quantity">
<view class="quantity_but" @click="quantityFun('minus',index,pIndex,pItem.id)">-</view>
<view class="quantity_value">{{pItem.buyNum}}</view>
<view class="quantity_but" @click="quantityFun('add',index,pIndex,pItem.id)">+</view>
<view class="shopping_info_amount">
<view>
<view style="color: #FF7C41;">
<text style="font-size: 22rpx;">￥</text>
<text style="font-size: 32rpx;">{{pItem.unitPrice}}</text>
</view>
<view class="shopping_info_amount_original">￥{{pItem.unitPrice}}</view>
</view>
<view>
<view class="shopping_info_quantity">
<view class="quantity_but" @click="quantityFun('minus',index,pIndex,pItem.id)">-</view>
<view class="quantity_value">{{pItem.buyNum}}</view>
<view class="quantity_but" @click="quantityFun('add',index,pIndex,pItem.id)">+</view>
</view>
<view v-if="[1].includes(pItem.goodsStatus)" class="insufficient_stock">库存不足</view>
<view v-if="[2].includes(pItem.goodsStatus)" class="insufficient_stock">商品已下架</view>
</view>
<view v-if="!pItem.isAvail" class="insufficient_stock">库存不足</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-else class="not_order_warp">
<up-image src="/static/common/not_shopping.png" width="80" height="80" bgColor="#f1f6ff00"></up-image>
<view class="not_order_msg_warp">购物车是空的</view>
</view>
<choiceness/>
</view>
<view v-else class="not_order_warp">
<up-image src="/static/common/not_shopping.png" width="80" height="80" bgColor="#f1f6ff00"></up-image>
<view class="not_order_msg_warp">购物车是空的</view>
<!-- 操作按钮 -->
<view v-if="!isDataNull">
<view class="shopping_cart_but">
<!-- 全选 -->
<view class="shopping_cart_but_total">
<up-checkbox
name="isAll"
usedAlone
v-model:checked="isAll"
shape="circle"
activeColor="#FF7C41"
size="19"
iconSize="18"
@change="isAllChange"
>
<template #label>
<text style="font-size: 26rpx;color: #444444;">全选</text>
</template>
</up-checkbox>
<text style="margin-left: 20rpx;font-size: 24rpx;color: #444444;" v-if="!isEdit">合计：</text>
<text style="font-size: 24rpx;" v-if="!isEdit">￥</text>
<text style="font-size: 32rpx;" v-if="!isEdit">{{total}}</text>
</view>
<view v-if="isEdit" class="delete_but_css" @click="deleteShopping">
删除({{count}})
</view>
<view v-else class="add_but_css" @click="settleShopping">
结算({{count}})
</view>
</view>
</view>
<choiceness/>
<up-toast ref="uToastRef"></up-toast>
</view>
<!-- 操作按钮 -->
<view v-if="!isDataNull">
<view class="shopping_cart_but">
<view class="shopping_cart_but_total">
<up-checkbox
name="isAll"
usedAlone
v-model:checked="isAll"
shape="circle"
activeColor="#FF7C41"
size="19"
iconSize="18"
@change="isAllChange"
>
<template #label>
<text style="font-size: 26rpx;color: #444444;">全选</text>
</template>
</up-checkbox>
<text style="margin-left: 20rpx;font-size: 24rpx;color: #444444;">合计：</text>
<text style="font-size: 24rpx;">￥</text>
<text style="font-size: 32rpx;">{{total}}</text>
</view>
<view v-if="isEdit" class="delete_but_css" @click="deleteShopping">
删除
</view>
<view v-else class="add_but_css" @click="settleShopping">
结算({{count}})
</view>
</view>
</view>
<up-toast ref="uToastRef"></up-toast>
<CustomTabBar :tabIndex="2"/>
</view>
</template>
@@ -123,9 +129,10 @@
import choiceness from '@/components/choiceness/choiceness.vue';
import { getCartList,updateGoodsNum,removeGoods } from '@/api/cart.js';
import CustomTabBar from '@/components/custom-tab-bar.vue';
export default {
components:{choiceness},
components:{choiceness,CustomTabBar},
data() {
return {
shoppingTotal:0,// 总条数
@@ -139,8 +146,16 @@
listLoading:false,
}
},
onLoad() {
onShow() {
/*#ifdef APP-PLUS*/
uni.hideTabBar({
animation: false
})
/*#endif*/
this.getCartList();
},
onLoad() {
},
methods: {
/**
@@ -148,19 +163,28 @@
*/
async getCartList(){
this.listLoading = true;
let result = [];
const resp = await getCartList();
if(resp && resp.bizcode === 100){
// 处理了后的数据
const data = this.transformedArray(resp.data);
this.shoppingTotal = resp.data.length;
this.shoppingList = data;
const data = resp.data || []
if(data && data.length!==0){
// 处理了后的数据
result = this.transformedArray(data);
}
this.shoppingTotal = data.length;
}
this.shoppingList = result;
this.listLoading = false;
this.total=0;// 总合计的金额
this.count=0;// 总条数
this.isDataNull = result.length === 0 ? true:false;
},
// 处理购物车的数据
transformedArray(originalArray){
const newOriginalArray = [];
if(!originalArray || originalArray.length === 0){
return newOriginalArray;
}
originalArray.map(curr=>{
const existingShop = newOriginalArray.find(shop => shop.shopId === curr.shopId && shop.shopName === curr.shopName);
if (existingShop) {
@@ -175,7 +199,7 @@
goodsSpece: curr.goodsSpece,// 规格
specsId: curr.specsId,// 规格Id
isCheck:false,// 用作于全选
isAvail:curr.isAvail,// 是否有库存
goodsStatus:curr.goodsStatus,//商品状态:0-可下单，1-库存不够，2-商品已下架
});
} else {
// 如果商店不存在，则创建一个新商店对象，并初始化 productObj 数组
@@ -195,7 +219,7 @@
goodsSpece: curr.goodsSpece,// 规格
specsId: curr.specsId,// 规格Id
isCheck:false,// 用作于全选
isAvail:curr.isAvail,// 是否有库存,用作于全选
goodsStatus:curr.goodsStatus,//商品状态:0-可下单，1-库存不够，2-商品已下架
}]
});
}
@@ -209,7 +233,14 @@
* @param {Object} cItem 需要修改的数据节点
*/
async quantityFun(type,index,pIndex,id){
// 选中的当前商品
const currentData = this.shoppingList[index].product[pIndex];
let currentQuantity = this.shoppingList[index].product[pIndex].buyNum;// 当前数量
let total = Number(this.total);
let count = Number(this.count);
const data = this.shoppingList[index].product[pIndex];
if(type === "minus"){
if(currentQuantity === 1){
this.$refs.uToastRef.show({
@@ -219,19 +250,26 @@
return;
}else{
currentQuantity = currentQuantity - 1;
total = total - data.unitPrice;
count = count - 1;
}
}else if(type === "add"){
// 需要判断一下库存
currentQuantity = currentQuantity + 1;
total = total + data.unitPrice;
count = count + 1;
}
const params={
id,
goodsNum:currentQuantity,
}
const result = await updateGoodsNum(params);
console.log("result",result);
if(result && result.bizcode === 100){
this.shoppingList[index].product[pIndex].buyNum = currentQuantity;
if(currentData.isCheck){
this.total = total.toFixed(2);
this.count = count;
}
}
},
/**
@@ -250,7 +288,6 @@
url:"/pages/order_submit/order_submit?ids="+deleteId.join(","),
})
this.isAll = false;
this.selectCheck(false);
},
/**
* 删除选中的
@@ -259,7 +296,7 @@
const then = this;
uni.showModal({
title: '提示',
content: '您确定要删除选中的所有商品吗？',
content: '您确定要删除选中的('+this.getCheckList().length+'件)商品吗？',
success: function (res) {
if (res.confirm) {
then.deleteShoppingFun();
@@ -283,8 +320,6 @@
const result = await removeGoods(params);
if(result && result.bizcode === 100){
this.isEdit = false;
this.isAll = false;
this.selectCheck(false);
this.$refs.uToastRef.show({
type: 'success',
message: "删除成功",
@@ -313,17 +348,11 @@
})
return deleteId;
},
// 全部选中 or 全部取消选中
isAllChange(val){
this.selectCheck(val);
},
/**
* 编辑是否选中
*/
selectCheck(isAll){
// 全部选中 or 全部取消选中
isAllChange(isAll){
const currentShoppingList = this.shoppingList;
currentShoppingList.map(item=>{
currentShoppingList.map((item,index)=>{
if(isAll){
item.isCheck = true;
}else{
@@ -337,7 +366,13 @@
}
}
})
this.shoppingList = currentShoppingList;
this.shoppingList = currentShoppingList;
if(isAll){
this.checkIsAll();
}else{
this.total = 0;
this.count = 0;
}
},
/**
@@ -345,7 +380,6 @@
* @param {Object} item
*/
jumpInfo(item){
console.log("item",item);
uni.navigateTo({
url:'/pages/productInfo/productInfo?id='+item.goodsId,
})
@@ -353,40 +387,61 @@
// 单个产品的单选按钮选中与取消选中
productChange(val,index,pIndex){
let total = this.total;
let count = this.count;
const data = this.shoppingList[index].product[pIndex];
if(val){
total = total + data.buyNum * data.unitPrice;
count = count + data.buyNum;
}else{
total = total - data.buyNum * data.unitPrice;
count = count - data.buyNum;
}
this.total = total;
this.count = count;
setTimeout(()=>{
// 检查全选按钮
this.checkIsAll();
},300);
},
// 单个店铺的单选按钮选中与取消选中
shoppingChange(val,index){
let total = this.total;
let count = this.count;
shoppingChange(isAll,index){
const data = this.shoppingList[index];
data.product.map(item=>{
if(val){
item.isCheck = true;
total = total + item.buyNum * item.unitPrice;
count = count + item.buyNum;
}else{
item.isCheck = false;
total = total - item.buyNum * item.unitPrice;
count = count - item.buyNum;
}
})
if(isAll){
data.product.forEach(o => o.isCheck=true);
}else{
data.product.forEach(o => o.isCheck=false);
}
this.shoppingList[index] = data;
this.total = total;
this.count = count;
setTimeout(()=>{
// 检查全选按钮
this.checkIsAll();
},300);
},
/**
* 检查是否全选
*/
checkIsAll(){
let total = 0;
let count = 0;
const shoppingList = this.shoppingList;
if(shoppingList && shoppingList.length !==0){
let sumFlag = false;
shoppingList.map(item=>{
let flag = true;
item.product.map(oItem=>{
if(oItem.isCheck){
total = total + oItem.buyNum * oItem.unitPrice;
count = count + oItem.buyNum;
}else{
flag = false;
}
})
if(flag){
item.isCheck = true;
sumFlag = true;
}else{
item.isCheck = false;
}
})
this.shoppingList = shoppingList;
this.isAll = sumFlag;
// 删除不需要显示价格
if(!this.isEdit){
this.total = total.toFixed(2);
}
this.count = count;
}
},
}
@@ -415,7 +470,7 @@
}
.shopping_cart_content{
margin-top: 30rpx;
height: calc(100vh - 304rpx);
height: calc(100vh - 456rpx);
overflow-y: auto;
.shopping_cart_content_item{
background-color: #FFFFFF;
@@ -468,7 +523,7 @@
.shopping_cart_but{
position: fixed;
bottom: 0;
bottom: 140rpx;
left: 0;
width: calc(100% - 40rpx);
background: #FFFFFF;