jiazhipeng
/
flavorOfTimeSzMall
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
chenkainan 4 weeks ago
parent
f00797ffe7
commit
790510b4f1
3 changed files with 298 additions and 201 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 42
      src/views/Order/Index.vue
  2. 2
      src/views/User/OrderList.vue
  3. 449
      src/views/User/ShoppingCart.vue

42
src/views/Order/Index.vue
View File

@ -318,6 +318,7 @@ export default {
},
// 格式化商品数据（统一价格单位、计算小计等）
formatItems(items) {
console.log(items, 13213);
return items.map((item) => ({
id: item.sku.id,
productId: item.product.id,
@ -328,6 +329,7 @@ export default {
quantity: item.quantity,
freight: "0.00", // 暂固定，实际项目可从接口获取
deliveryType: "邮寄",
type: item.product.type,
// 原逻辑：仅计算商品金额
// subtotal: ((item.sku.price / 100) * item.quantity).toFixed(2),
@ -401,7 +403,7 @@ export default {
let total = 0;
this.orderGroups.forEach((group) => {
group.items.forEach((item) => {
console.log(item)
console.log(item);
total += parseFloat(item.freight);
});
});
@ -421,10 +423,12 @@ export default {
this.totalGoodsCount = totalCount;
this.totalGoodsAmount = totalAmount.toFixed(2);
this.totalPayAmount = totalAmount.toFixed(2);
// 使用最新计算的总运费
this.totalPayAmount = (
totalAmount + parseFloat(this.totalFreight)
).toFixed(2);
// this.totalPayAmount = (
// totalAmount + parseFloat(this.totalFreight)
// ).toFixed(2);
},
// 处理保存地址
handleSaveAddress(formData) {
@ -477,9 +481,33 @@ export default {
this.$message.warning("请先选择收货地址");
return;
}
this.$message.success("订单提交成功！");
// 实际项目中可跳转至订单详情页
// this.$router.push('/order/detail');
let goods = [];
this.orderGroups.forEach((group, groupIndex) => {
group.items.forEach((item, itemIndex) => {
console.log(item);
goods.push({
type: item.type,
product_id: item.productId,
sku_id: item.id,
product_num: item.quantity,
post: this.selectedAddress.id,
remark: group.remark || "",
});
});
});
console.log(goods);
this.post(
{
data: JSON.stringify({ product_list: goods }),
},
"/api/order/create"
).then((res) => {
if (res.code == 1) {
this.$message.success("订单提交成功！");
this.$router.push("/User/OrderList");
}
});
},
},
};

2
src/views/User/OrderList.vue
View File

@ -190,7 +190,7 @@ export default {
getList() {
this.post({
...this.filterForm,
offset:this.filterForm.currentPage*this.filterForm.limit,
offset:(this.filterForm.currentPage-1)*this.filterForm.limit,
customBaseURL:"/api",
},'/api/order/list').then(res=>{
this.orders = res.data.list

449
src/views/User/ShoppingCart.vue
View File

@ -1,67 +1,89 @@
<template>
<div class="bg">
<div>
<div class="order-products" style="padding:0 20px;background: #f8f9fa; border-top: 1px solid #eee; border-bottom: 1px solid #eee;margin-bottom: 20px;">
<div class="product-item" >
<div class="product-select">
<el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
</div>
<div class="product-details">
<div class="product-name">商品</div>
</div>
<div class="product-box">单价(元)</div>
<div class="product-quantity">数量</div>
<div class="product-box">收货方式</div>
<div class="product-box">小计(元)</div>
<div class="product-box">操作</div>
<div
class="order-products"
style="
padding: 0 20px;
background: #f8f9fa;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
margin-bottom: 20px;
"
>
<div class="product-item">
<div class="product-select">
<el-checkbox v-model="selectAll" @change="handleSelectAll"
>全选</el-checkbox
>
</div>
<div class="product-details">
<div class="product-name">商品</div>
</div>
<div class="product-box">单价(元)</div>
<div class="product-quantity">数量</div>
<div class="product-box">收货方式</div>
<div class="product-box">小计(元)</div>
<div class="product-box">操作</div>
</div>
</div>
<!-- 订单卡片 - 按商家合并商品 -->
<div class="order-card" v-for="shop in list" :key="shop.id">
<!-- 订单头部 - 包含商家信息 -->
<div class="order-header flex-between">
<div class="product-select">
<el-checkbox v-model="shop.selected" @change="handleSelectShop(shop)"><span style="opacity: 0;">全选</span></el-checkbox>
</div>
<div class="product-details">
<div class="product-name">供应商名称：{{ shop.shop_name }}</div>
</div>
<div class="product-select">
<el-checkbox
v-model="shop.selected"
@change="handleSelectShop(shop)"
><span style="opacity: 0">全选</span></el-checkbox
>
</div>
<div class="product-details">
<div class="product-name">供应商名称：{{ shop.shop_name }}</div>
</div>
</div>
<!-- 订单商品列表 -->
<div class="order-products">
<div class="product-item" v-for="goods in shop.goods" :key="goods.id">
<div class="product-select">
<el-checkbox v-model="goods.selected" @change="handleSelect"><span style="opacity: 0;">全选</span></el-checkbox>
<el-checkbox v-model="goods.selected" @change="handleSelect"
><span style="opacity: 0">全选</span></el-checkbox
>
</div>
<div class="product-details flex-between">
<img :src="goods.product.headimg" class="product-image">
<img :src="goods.product.headimg" class="product-image" />
<div class="product-details">
<div class="product-name">{{ goods.product.title }}</div>
<div class="product-spec">{{ goods.sku.sku_name }}</div>
</div>
</div>
<div class="product-box ">¥{{ (goods.sku.price/100).toFixed(2) }}</div>
<div class="product-box">
¥{{ (goods.sku.price / 100).toFixed(2) }}
</div>
<div class="product-quantity">
<el-input-number size="small" v-model="goods.num" @change="handleNumChange(goods)" :min="1" :step="1"/>
<el-input-number
size="small"
v-model="goods.num"
@change="handleNumChange(goods)"
:min="1"
:step="1"
/>
</div>
<div class="product-box">邮寄</div>
<div class="product-box product-price">¥{{ (goods.num * goods.sku.price/100).toFixed(2) }}</div>
<div class="product-box product-price">
¥{{ ((goods.num * goods.sku.price) / 100).toFixed(2) }}
</div>
<div class="product-box">
<el-button type="text" size="mini" @click="delItem(goods)">删除</el-button>
<el-button type="text" size="mini" @click="delItem(goods)"
>删除</el-button
>
</div>
</div>
</div>
</div>
<el-empty description="暂无数据" v-if="list.length<=0"></el-empty>
<el-empty description="暂无数据" v-if="list.length <= 0"></el-empty>
<!-- 分页 -->
<!-- <div style="text-align: right; margin-top: 20px;">
@ -76,196 +98,247 @@
></el-pagination>
</div> -->
<div class="cart-footer">
<el-button :disabled="selectedRows.length === 0" type="text" size="mini" @click="deleteSelected">
<el-button
:disabled="selectedRows.length === 0"
type="text"
size="mini"
@click="deleteSelected"
>
删除选中商品
</el-button>
<div class="flex-between">
<div class="selected-info">
已选商品 <span class="import-text">{{ selectedRows.length }}</span> 件
　　
总价: <span class="import-text total-price">{{ totalPrice }}</span> (不含运费)
</div>
<el-button type="primary" @click="handleCheckout" :disabled="selectedRows.length === 0">去结算</el-button>
</div>
<div class="selected-info">
已选商品
<span class="import-text">{{ selectedRows.length }}</span> 件 　　
总价:
<span class="import-text total-price">{{ totalPrice }}</span>
(不含运费)
</div>
<el-button
type="primary"
@click="handleCheckout"
:disabled="selectedRows.length === 0"
>去结算</el-button
>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
name: 'OrderList',
data () {
return {
activeTab: 'all',
currentPage: 1,
pageSize: 10,
// 订单数据 - 按商家合并商品
list: [],
selectAll: false,
}
name: "OrderList",
data() {
return {
activeTab: "all",
currentPage: 1,
pageSize: 10,
// 订单数据 - 按商家合并商品
list: [],
selectAll: false,
};
},
mounted() {
this.getList();
},
computed: {
selectedRows() {
let rows = [];
this.list.forEach((v) => {
v.goods.forEach((goods) => {
if (goods.selected) {
rows.push(goods);
}
});
});
return rows;
},
mounted() {
this.getList()
totalPrice() {
let price = 0;
this.selectedRows.forEach((v) => {
price += (v.num * v.sku.price) / 100;
});
return price.toFixed(2);
},
computed: {
selectedRows() {
let rows = []
this.list.forEach(v=>{
v.goods.forEach(goods=>{
if (goods.selected) {
rows.push(goods)
}
})
})
return rows
},
methods: {
...mapActions(["submitOrderData"]),
// 去结算
handleCheckout() {
// 构建参数数组（多个商品）
const orderItems = this.selectedRows.map((goods) => ({
product: {
id: goods.product.id,
title: goods.product.title,
headimg: goods.product.headimg,
supplier_name: goods.shop_name, // 购物车中供应商信息在shop_name
supplier_address: goods.product.supplier_address, // 从商品信息取发货地
},
sku: {
id: goods.sku.id,
sku_name: goods.sku.sku_name,
price: goods.sku.price, // 原始价格（分）
start_number: goods.sku.start_number || 1,
},
totalPrice() {
let price = 0
this.selectedRows.forEach(v=>{
price += v.num * v.sku.price/100
})
return price.toFixed(2)
quantity: goods.num, // 购买数量（购物车中数量字段为num）
}));
// 按供应商分组（下单页需要按供应商展示）
const supplierGroups = {};
orderItems.forEach((item) => {
const supplier = item.product.supplier_name;
if (!supplierGroups[supplier]) {
supplierGroups[supplier] = [];
}
supplierGroups[supplier].push(item);
});
// Vuex传递
this.submitOrderData({
from: "cart",
groups: supplierGroups, // 按供应商分组的商品数组
});
this.$router.push("/Order");
},
methods: {
getList(){
this.post({customBaseURL:"/api"},"/api/cart/get_list",true).then(res=>{
let resData = (res.data ||[])
let currentSelectGoodsIds = this.selectedRows.map(v=>v.id)
resData.forEach(item=>{
item.selected = false
item.goods.forEach(goods=>{
goods.selected = currentSelectGoodsIds.includes(goods.id)
})
})
this.list = resData
this.judgeSelectAll()
})
},
handleSelectAll(val) {
if (val) {
this.list.forEach(t=>{
t.goods.forEach(v=>{
if (v && v.product &&v.sku && v.sku.flag== "off") {
v.selected = false
} else {
v.selected = true
}
})
})
} else {
this.cartList.forEach(t=>{
t.selected = false
})
}
this.judgeSelectAll()
},
handleSelectShop(shop) {
if (shop.selected) {
shop.goods.forEach(v=>{
if (v && v.product &&v.sku && v.sku.flag== "off") {
v.selected = false
} else {
v.selected = true
}
})
getList() {
this.post({ customBaseURL: "/api" }, "/api/cart/get_list", true).then(
(res) => {
let resData = res.data || [];
let currentSelectGoodsIds = this.selectedRows.map((v) => v.id);
resData.forEach((item) => {
item.selected = false;
item.goods.forEach((goods) => {
goods.selected = currentSelectGoodsIds.includes(goods.id);
});
});
this.list = resData;
this.judgeSelectAll();
}
this.judgeSelectAll()
},
handleSelect() {
this.judgeSelectAll()
},
// 判断全选
judgeSelectAll() {
this.selectedRows = []
this.list.forEach(v=>{
if (v.goods.some(x=>x.sku.flag=='on')) {
if(v.goods.some(x=>x.sku.flag=="on"&&!x.selected) ) {
v.selected = false;
} else {
v.selected = true;
}
);
},
handleSelectAll(val) {
if (val) {
this.list.forEach((t) => {
t.goods.forEach((v) => {
if (v && v.product && v.sku && v.sku.flag == "off") {
v.selected = false;
} else {
v.selected = false
v.selected = true;
}
})
if (this.list.every(v=>v.selected) && this.list.length>0) {
this.selectAll = true
});
});
} else {
this.cartList.forEach((t) => {
t.selected = false;
});
}
this.judgeSelectAll();
},
handleSelectShop(shop) {
if (shop.selected) {
shop.goods.forEach((v) => {
if (v && v.product && v.sku && v.sku.flag == "off") {
v.selected = false;
} else {
this.selectAll = false
v.selected = true;
}
},
// 购物车加减
handleNumChange(goods) {
this.post({id: goods.id, num: goods.num,customBaseURL:"/api"},'/api/cart/update_sku').then(res =>{
})
},
delItem(item){
this.post({id: item.id,customBaseURL:"/api"},'/api/cart/del_sku').then(res =>{
this.getList()
})
},
deleteSelected() {
let ids = this.selectedRows.map(v=>v.id).join(',')
this.post({ids: ids,customBaseURL:"/api"},'/api/cart/del_skus').then(res =>{
this.getList()
})
},
});
}
this.judgeSelectAll();
},
handleSelect() {
this.judgeSelectAll();
},
// 判断全选
judgeSelectAll() {
this.selectedRows = [];
this.list.forEach((v) => {
if (v.goods.some((x) => x.sku.flag == "on")) {
if (v.goods.some((x) => x.sku.flag == "on" && !x.selected)) {
v.selected = false;
} else {
v.selected = true;
}
} else {
v.selected = false;
}
});
if (this.list.every((v) => v.selected) && this.list.length > 0) {
this.selectAll = true;
} else {
this.selectAll = false;
}
},
// 购物车加减
handleNumChange(goods) {
this.post(
{ id: goods.id, num: goods.num, customBaseURL: "/api" },
"/api/cart/update_sku"
).then((res) => {});
},
delItem(item) {
this.post(
{ id: item.id, customBaseURL: "/api" },
"/api/cart/del_sku"
).then((res) => {
this.getList();
});
},
deleteSelected() {
let ids = this.selectedRows.map((v) => v.id).join(",");
this.post({ ids: ids, customBaseURL: "/api" }, "/api/cart/del_skus").then(
(res) => {
this.getList();
}
);
},
// 分页大小改变
handleSizeChange(val) {
this.pageSize = val;
this.pageSize = val;
},
// 当前页改变
handleCurrentChange(val) {
this.currentPage = val;
this.currentPage = val;
},
// 去付款
payOrder(orderId) {
this.$message({
this.$message({
message: `订单 ${orderId} 去付款`,
type: 'info'
});
type: "info",
});
},
}
}
},
};
</script>
<style lang="scss" scoped>
.bg{
.bg {
display: flex;
flex-direction: column;
::v-deep .el-button--text {
color: #6a8a27;
}
::v-deep .el-tabs__item.is-active{
::v-deep .el-tabs__item.is-active {
color: #6a8a27;
}
::v-deep .el-tabs__active-bar{
background-color: #6a8a27
::v-deep .el-tabs__active-bar {
background-color: #6a8a27;
}
::v-deep .el-tabs__item:hover{
::v-deep .el-tabs__item:hover {
color: #6a8a27;
}
}
/* 订单卡片样式 */
.order-card {
border-radius: 4px;
@ -283,8 +356,6 @@ export default {
font-size: 14px;
}
/* 订单商品列表 */
.order-products {
padding: 10px 20px;
@ -323,14 +394,12 @@ export default {
font-size: 12px;
}
.product-box {
width: 100px;
text-align: center;
color: #333;
}
.product-quantity{
.product-quantity {
width: 160px;
text-align: center;
color: #333;
@ -340,31 +409,31 @@ export default {
width: 80px;
color: #333;
}
.product-price{
.product-price {
color: #ff5252;
}
.cart-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
padding: 15px;
background-color: #f5f7fa;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
padding: 15px;
background-color: #f5f7fa;
border-radius: 4px;
}
.selected-info {
color: #666;
font-size: 14px;
padding-right: 50px;
color: #666;
font-size: 14px;
padding-right: 50px;
}
.import-text{
.import-text {
color: #c7020b;
font-size: 20px;
font-weight: bold;
}
.total-price{
&::before{
.total-price {
&::before {
content: "¥";
margin-right: 5px;
font-size: 12px;

Write Preview
Loading…
Cancel
Save