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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      src/views/Order/Index.vue
  2. 2
      src/views/User/OrderList.vue
  3. 323
      src/views/User/ShoppingCart.vue

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save