chenkainan
2 months ago
8 changed files with 1514 additions and 16 deletions
@ -0,0 +1,93 @@ |
|||
<template> |
|||
<div class="bg"> |
|||
<div class="left-container"> |
|||
|
|||
<router-link :class="['route-item',selectIndex==i?'active':'']" v-for="(item,i) in navList" :key="i" :to="item.path">{{ item.title }}</router-link> |
|||
|
|||
</div> |
|||
<div class="right-container"> |
|||
<router-view></router-view> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
selectIndex: 0, |
|||
navList: [ |
|||
{title: "个人中心",path:"/User/UserCenter"}, |
|||
{title: '我的购物车',path:"" }, |
|||
{title: '我的订单',path:"/User/OrderList" }, |
|||
{title: '评价管理',path:"" }, |
|||
{title: '我的发票',path:"" }, |
|||
{title: '我的收藏' ,path:""}, |
|||
{title: '我的足迹',path:"/User/ViewHistory" }, |
|||
{title: '个人信息',path:"/User/UserInfo" }, |
|||
{title: '账号设置',path:"" }, |
|||
{title: '我的收货地址',path:"" } |
|||
] |
|||
} |
|||
}, |
|||
watch: { |
|||
// 监听 $route 对象的变化 |
|||
$route(to, from) { |
|||
let toPath = to.path.toLocaleLowerCase() |
|||
let index = this.navList.findIndex(x=>x.path.toLocaleLowerCase()== toPath) |
|||
if (index>=0) { |
|||
this.selectIndex = index |
|||
} |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
|
|||
}, |
|||
created() { |
|||
let path = this.$route.path.toLocaleLowerCase() |
|||
let index = this.navList.findIndex(x=>x.path.toLocaleLowerCase()== path) |
|||
if (index>=0) { |
|||
this.selectIndex = index |
|||
} |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg{ |
|||
display: flex; |
|||
} |
|||
.left-container{ |
|||
width: 150px; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: fit-content; |
|||
background-color: #fff; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
|||
overflow: hidden; |
|||
.route-item{ |
|||
padding: 10px; |
|||
cursor: pointer; |
|||
font-size: 14px; |
|||
&:hover{ |
|||
background-color: #f9f9f9; |
|||
} |
|||
&.active{ |
|||
background-color: #6a8a27; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
.right-container{ |
|||
flex: 1; |
|||
width: 1px; |
|||
padding-left: 20px; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,272 @@ |
|||
<template> |
|||
<div class="bg"> |
|||
<!-- 订单状态时间线 --> |
|||
<div class="normal-margin-bottom"> |
|||
<el-breadcrumb separator-class="el-icon-arrow-right"> |
|||
<el-breadcrumb-item :to="{ path: '/User/UserCenter' }">个人中心</el-breadcrumb-item> |
|||
<el-breadcrumb-item :to="{ path: '/User/OrderList' }">我的订单</el-breadcrumb-item> |
|||
<el-breadcrumb-item> 订单详情</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
</div> |
|||
|
|||
<div class="common-card normal-margin-bottom" style="padding: 20px 0;display: flex;"> |
|||
<div class="order-status"> |
|||
<div class="order-no">订单号: 209907091214560078 <el-button style="color: #999;" type="text" icon="el-icon-document-copy"></el-button></div> |
|||
<div class="status-title"> |
|||
<i class="el-icon-time" style="color: #ff9800;font-size: 32px;"></i> |
|||
<span style="height: 24px;line-height: 24px;padding-left: 5px;">订单状态: 待付款</span> |
|||
</div> |
|||
|
|||
<el-button type="primary" size="medium">在线付款</el-button> |
|||
<el-button type="text" size="small" style="padding: 0;">打印订单</el-button> |
|||
|
|||
</div> |
|||
<div class="order-step"> |
|||
<el-steps :active="2" align-center style="width: 100%;"> |
|||
<el-step v-for="(item,i) in activities" :key="i"> |
|||
<div class="process-title" slot="title">{{ item.status }}</div> |
|||
<div slot="icon"> |
|||
<span v-if="i>=2">{{i+1}}</span> |
|||
<i v-else style="color: #fff;" class="el-icon-check"></i> |
|||
</div> |
|||
<div class="process-description" slot="description">{{ item.timestamp }}</div> |
|||
</el-step> |
|||
|
|||
</el-steps> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- 订单信息卡片 --> |
|||
<div class="common-card normal-margin-bottom order-info-card" style="display: flex;padding: 20px 0;"> |
|||
<el-descriptions title="订单信息" :column="1"> |
|||
<el-descriptions-item label="订单号">{{ orderInfo.orderNumber }}</el-descriptions-item> |
|||
<el-descriptions-item label="订单状态">{{ orderInfo.status }}</el-descriptions-item> |
|||
<el-descriptions-item label="下单时间">{{ orderInfo.orderTime }}</el-descriptions-item> |
|||
</el-descriptions> |
|||
<el-descriptions title="配送信息" :column="1"> |
|||
<el-descriptions-item label="收货人">{{ deliveryInfo.receiver }}</el-descriptions-item> |
|||
<el-descriptions-item label="地址">{{ deliveryInfo.address }}</el-descriptions-item> |
|||
<el-descriptions-item label="手机号码">{{ deliveryInfo.phone }}</el-descriptions-item> |
|||
<el-descriptions-item label="配送方式">{{ deliveryInfo.deliveryMethod }}</el-descriptions-item> |
|||
<el-descriptions-item label="期望送达时间">{{ deliveryInfo.expectedDeliveryTime }}</el-descriptions-item> |
|||
</el-descriptions> |
|||
<el-descriptions title="支付信息" :column="1" style="border: none;"> |
|||
<el-descriptions-item label="支付方式">{{ paymentInfo.paymentMethod }}</el-descriptions-item> |
|||
<el-descriptions-item label="支付状态">{{ paymentInfo.paymentStatus }}</el-descriptions-item> |
|||
<el-descriptions-item label="支付时间">{{ paymentInfo.paymentTime }}</el-descriptions-item> |
|||
</el-descriptions> |
|||
</div> |
|||
|
|||
|
|||
<!-- 商品列表 --> |
|||
|
|||
<el-table :data="productList" style="width: 100%"> |
|||
<el-table-column prop="name" label="商品名称" align="center"> |
|||
<template slot-scope="{row}"> |
|||
<div style="display: flex;align-items: center;"> |
|||
<img :src="row.image" class="product-image" :alt="row.name"/> |
|||
<div>{{ row.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="spec" label="规格" align="center"></el-table-column> |
|||
<el-table-column prop="price" label="单价(元)" align="center" width="200"></el-table-column> |
|||
<el-table-column prop="quantity" label="数量" align="center" width="100"></el-table-column> |
|||
<el-table-column prop="subtotal" label="小计(元)" align="center" width="200"> |
|||
<template slot-scope="{row}"> |
|||
<div style="color: #ff1111;">￥{{ row.subtotal }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
|
|||
<!-- 订单总价 --> |
|||
<div class="common-card normal-margin-bottom total-card"> |
|||
<el-descriptions :column="1"> |
|||
<el-descriptions-item label="商品总价">￥{{ totalPrice.productTotal }}</el-descriptions-item> |
|||
<el-descriptions-item label="运费">￥{{ totalPrice.shippingFee }}</el-descriptions-item> |
|||
<el-descriptions-item label="实付款"> |
|||
<span style="font-size: 16px;font-weight: bold;color: #ff1111;">￥{{ totalPrice.actualPayment }}</span> |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'OrderDetail', |
|||
data() { |
|||
return { |
|||
activities: [ |
|||
{ status: '提交订单', timestamp: '2025-08-01 15:30:00' }, |
|||
{ status: '支付成功', timestamp: '2025-08-01 15:35:00' }, |
|||
{ status: '商家接单', timestamp: '2025-08-01 15:40:00' }, |
|||
{ status: '商品出库', timestamp: '2025-08-01 16:00:00' }, |
|||
{ status: '配送中', timestamp: '2025-08-01 16:30:00' }, |
|||
{ status: '已完成', timestamp: '2025-08-01 17:00:00' } |
|||
], |
|||
orderInfo: { |
|||
orderNumber: '20250801123456', |
|||
status: '已完成', |
|||
orderTime: '2025-08-01 15:30:00' |
|||
}, |
|||
deliveryInfo: { |
|||
receiver: '张三', |
|||
address: '北京市海淀区xxx街道xxx小区', |
|||
phone: '13800138000', |
|||
deliveryMethod: '快递', |
|||
expectedDeliveryTime: '2025-08-02' |
|||
}, |
|||
paymentInfo: { |
|||
paymentMethod: '支付宝', |
|||
paymentStatus: '已支付', |
|||
paymentTime: '2025-08-01 15:35:00' |
|||
}, |
|||
productList: [ |
|||
{ name: '商品1', spec: '规格1', price: 100, quantity: 1, subtotal: 100,image: 'https://picsum.photos/200/200?random=1', }, |
|||
{ name: '商品2', spec: '规格2', price: 200, quantity: 2, subtotal: 400,image: 'https://picsum.photos/200/200?random=1', } |
|||
], |
|||
totalPrice: { |
|||
productTotal: 500, |
|||
shippingFee: 0, |
|||
actualPayment: 500 |
|||
} |
|||
}; |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
font-size: 14px; |
|||
} |
|||
.common-card{ |
|||
width: 100%; |
|||
background-color: white; |
|||
padding: 20px; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); |
|||
} |
|||
.order-status { |
|||
border-right: 1px solid #eee; |
|||
width: 350px; |
|||
height: 220px; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.order-no{ |
|||
color: #999; |
|||
.el-button{ |
|||
width: fit-content; |
|||
margin: 0; |
|||
display: inline-block; |
|||
padding: 0; |
|||
} |
|||
} |
|||
.status-title { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.status-title i { |
|||
font-size: 24px; |
|||
} |
|||
|
|||
.el-button { |
|||
width: 120px; |
|||
display: block; |
|||
margin: 0 auto; |
|||
|
|||
} |
|||
} |
|||
.order-step{ |
|||
flex: 1; |
|||
width: 1px; |
|||
padding: 0 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
::v-deep .el-step__icon.is-text{ |
|||
border: none; |
|||
width: 30px; |
|||
height: 30px; |
|||
border-radius: 50%; |
|||
background: #C0C4CC; |
|||
color: white; |
|||
} |
|||
::v-deep .el-step__line{ |
|||
top: 13px; |
|||
} |
|||
::v-deep .el-step__line-inner{ |
|||
border-color: #C0C4CC; |
|||
} |
|||
.process-title{ |
|||
color:#666; |
|||
font-weight: bold; |
|||
font-size:14px; |
|||
margin-top: -70px; |
|||
} |
|||
.process-description{ |
|||
color:#666; |
|||
font-size:12px; |
|||
margin-top: 45px; |
|||
} |
|||
::v-deep .is-finish .el-step__icon{ |
|||
background: #67C23A; |
|||
} |
|||
} |
|||
|
|||
.order-info-card{ |
|||
display: flex; |
|||
::v-deep .el-descriptions{ |
|||
flex: 1; |
|||
flex-shrink: 0; |
|||
border-right: 1px solid rgba(153,153,153, 0.1); |
|||
padding: 0 20px; |
|||
.el-descriptions-item__label{ |
|||
width: 90px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.product-image { |
|||
width: 80px; |
|||
height: 80px; |
|||
object-fit: cover; |
|||
margin-right: 15px; |
|||
border-radius: 4px; |
|||
} |
|||
.total-card{ |
|||
margin-top: 20px; |
|||
background: #fafafa; |
|||
box-shadow: none; |
|||
::v-deep .el-descriptions__body{ |
|||
background: none; |
|||
text-align: right; |
|||
|
|||
.el-descriptions-item__label{ |
|||
width: 90%; |
|||
text-align: right; |
|||
justify-content: flex-end; |
|||
} |
|||
.el-descriptions-item__content{ |
|||
justify-content: flex-end; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
|
|||
|
|||
@ -0,0 +1,558 @@ |
|||
<template> |
|||
<div class="bg"> |
|||
|
|||
<el-tabs v-model="activeTab"> |
|||
<el-tab-pane label="所有订单" name="all"></el-tab-pane> |
|||
<el-tab-pane label="待付款" name="pendingPayment"></el-tab-pane> |
|||
<el-tab-pane label="待发货" name="pendingDelivery"></el-tab-pane> |
|||
<el-tab-pane label="配送中" name="delivering"></el-tab-pane> |
|||
<el-tab-pane label="待评价" name="pendingReview"></el-tab-pane> |
|||
</el-tabs> |
|||
|
|||
<div class="filter-bar"> |
|||
<el-form :inline="true" :model="filterForm" size="small"> |
|||
<el-form-item label="商品名称"> |
|||
<el-input v-model="filterForm.goodsName" placeholder="请输入商品名称"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="订单编号"> |
|||
<el-input v-model="filterForm.orderNo" placeholder="请输入订单编号"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="下单时间"> |
|||
<el-date-picker v-model="filterForm.createTime" type="daterange" range-separator="至" start-placeholder="开始日期" |
|||
end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="商家名称"> |
|||
<el-input v-model="filterForm.merchantName" placeholder="请输入商家名称"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="交易状态"> |
|||
<el-select v-model="filterForm.tradeStatus" placeholder="请选择" style="width: 200px;"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option label="待付款" value="pendingPayment"></el-option> |
|||
<el-option label="待发货" value="pendingDelivery"></el-option> |
|||
<el-option label="配送中" value="delivering"></el-option> |
|||
<el-option label="已完成" value="completed"></el-option> |
|||
<el-option label="已取消" value="cancelled"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="完成时间"> |
|||
<el-date-picker v-model="filterForm.createTime" type="daterange" range-separator="至" start-placeholder="开始日期" |
|||
end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button style="background:#6a8a27;border: none;" type="primary" @click="search">搜索</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button @click="reset">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</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 class="product-item" > |
|||
<div class="product-details"> |
|||
<div class="product-name">商品信息</div> |
|||
</div> |
|||
<div class="product-price">单价(元)</div> |
|||
<div class="product-quantity">数量</div> |
|||
<div class="product-total">小计(元)</div> |
|||
<!-- <div class="product-status"> |
|||
<el-tag :type="getStatusTagType(product.status)" size="small">{{ getStatusText(product.status) }}</el-tag> |
|||
</div> --> |
|||
<div class="product-actions"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 订单卡片 - 按商家合并商品 --> |
|||
<div class="order-card" v-for="order in filteredOrders" :key="order.id"> |
|||
<!-- 订单头部 - 包含商家信息 --> |
|||
<div class="order-header flex-between"> |
|||
<div style="display: flex;"> |
|||
<div >订单号: {{ order.orderNo }}</div> |
|||
<div style="padding-left: 60px;">下单时间：{{ order.createTime }}</div> |
|||
</div> |
|||
<div class="product-status"> |
|||
<el-tag :type="getStatusTagType(order.status)" size="small">{{ getStatusText(order.status) }}</el-tag> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 订单商品列表 --> |
|||
<div class="order-products"> |
|||
<div class="product-item" v-for="product in order.products" :key="product.id"> |
|||
<img :src="product.image" class="product-image" :alt="product.name"> |
|||
<div class="product-details"> |
|||
<div class="product-name">{{ product.name }}</div> |
|||
<div class="product-spec">{{ product.spec }}</div> |
|||
</div> |
|||
<div class="product-price">¥{{ product.price.toFixed(2) }}</div> |
|||
<div class="product-quantity">x{{ product.quantity }}</div> |
|||
<div class="product-total">¥{{ (product.price * product.quantity).toFixed(2) }}</div> |
|||
<!-- <div class="product-status"> |
|||
<el-tag :type="getStatusTagType(product.status)" size="small">{{ getStatusText(product.status) }}</el-tag> |
|||
</div> --> |
|||
<div class="product-actions"> |
|||
<el-button type="text" size="mini"> 商品详情</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 订单底部 - 金额和操作 --> |
|||
<div class="order-footer"> |
|||
<div class="order-summary"> |
|||
<div class="order-amount"> |
|||
合计: <strong>¥{{ order.totalAmount.toFixed(2) }}</strong> (含运费 ¥{{ order.freight.toFixed(2) }}) |
|||
</div> |
|||
<!-- <div class="order-tips"> |
|||
{{ order.products.length }}件商品 |
|||
</div> --> |
|||
</div> |
|||
<div class="order-actions"> |
|||
<el-button |
|||
type="text" |
|||
size="mini" |
|||
@click="viewOrderDetail(order.id)" |
|||
>订单详情</el-button> |
|||
<el-button |
|||
v-if="order.status === 'pendingPayment'" |
|||
type="primary" |
|||
size="mini" |
|||
@click="payOrder(order.id)" |
|||
>去付款</el-button> |
|||
<el-button |
|||
v-if="order.status === 'pendingDelivery'" |
|||
type="text" |
|||
size="mini" |
|||
@click="remindDelivery(order.id)" |
|||
>提醒发货</el-button> |
|||
<el-button |
|||
v-if="order.status === 'delivering'" |
|||
type="text" |
|||
size="mini" |
|||
@click="checkLogistics(order.id)" |
|||
>查看物流</el-button> |
|||
<el-button |
|||
v-if="order.status === 'completed' && !order.isReviewed" |
|||
type="text" |
|||
size="mini" |
|||
@click="gotoReview(order.id)" |
|||
>去评价</el-button> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<el-empty description="暂无订单" v-if="filteredOrders.length<=0"></el-empty> |
|||
|
|||
<!-- 分页 --> |
|||
<div style="text-align: right; margin-top: 20px;"> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="currentPage" |
|||
:page-sizes="[5, 10, 20]" |
|||
:page-size="pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="filteredOrders.length" |
|||
></el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'OrderList', |
|||
data () { |
|||
return { |
|||
activeTab: 'all', |
|||
currentPage: 1, |
|||
pageSize: 10, |
|||
filterForm: { |
|||
goodsName: '', |
|||
orderNo: '', |
|||
createTime: '', |
|||
merchantName: '', |
|||
tradeStatus: '' |
|||
}, |
|||
// 订单数据 - 按商家合并商品 |
|||
orders: [ |
|||
{ |
|||
id: 1, |
|||
orderNo: '209907091214560078', |
|||
createTime: '2099-07-09 10:47:49', |
|||
status: 'pendingPayment', |
|||
totalAmount: 937, |
|||
freight: 15, |
|||
isReviewed: false, |
|||
merchant: { |
|||
id: 101, |
|||
name: '花艺生活馆', |
|||
isOfficial: true |
|||
}, |
|||
products: [ |
|||
{ |
|||
id: 1001, |
|||
name: '深情挚爱/卡罗拉玫瑰', |
|||
image: 'https://picsum.photos/200/200?random=1', |
|||
spec: '卡罗拉玫瑰33枝', |
|||
price: 349, |
|||
quantity: 1, |
|||
status: 'pendingPayment' |
|||
}, |
|||
{ |
|||
id: 1002, |
|||
name: '精美包装纸', |
|||
image: 'https://picsum.photos/200/200?random=4', |
|||
spec: '粉色', |
|||
price: 38, |
|||
quantity: 2, |
|||
status: 'pendingPayment' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
id: 2, |
|||
orderNo: '209907091214560079', |
|||
createTime: '2099-07-09 10:48:49', |
|||
status: 'pendingDelivery', |
|||
totalAmount: 199, |
|||
freight: 0, |
|||
isReviewed: false, |
|||
merchant: { |
|||
id: 102, |
|||
name: '北欧家居旗舰店', |
|||
isOfficial: true |
|||
}, |
|||
products: [ |
|||
{ |
|||
id: 2001, |
|||
name: '北欧花艺素雅仿真花', |
|||
image: 'https://picsum.photos/200/200?random=2', |
|||
spec: '白色', |
|||
price: 199, |
|||
quantity: 1, |
|||
status: 'pendingDelivery' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
id: 3, |
|||
orderNo: '209907091214560080', |
|||
createTime: '2099-07-09 10:49:49', |
|||
status: 'delivering', |
|||
totalAmount: 389, |
|||
freight: 10, |
|||
isReviewed: false, |
|||
merchant: { |
|||
id: 101, |
|||
name: '花艺生活馆', |
|||
isOfficial: true |
|||
}, |
|||
products: [ |
|||
{ |
|||
id: 3001, |
|||
name: '香槟玫瑰+白玫瑰混搭', |
|||
image: 'https://picsum.photos/200/200?random=3', |
|||
spec: '混搭', |
|||
price: 389, |
|||
quantity: 1, |
|||
status: 'delivering' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
// 过滤后的订单列表 |
|||
filteredOrders() { |
|||
let result = [...this.orders]; |
|||
|
|||
// 根据当前标签页过滤 |
|||
if (this.activeTab !== 'all') { |
|||
result = result.filter(order => order.status === this.activeTab); |
|||
} |
|||
|
|||
// 根据商品名称过滤 |
|||
if (this.filterForm.goodsName) { |
|||
const keyword = this.filterForm.goodsName.toLowerCase(); |
|||
result = result.filter(order => { |
|||
return order.products.some(product => |
|||
product.name.toLowerCase().includes(keyword) |
|||
); |
|||
}); |
|||
} |
|||
|
|||
// 根据订单编号过滤 |
|||
if (this.filterForm.orderNo) { |
|||
result = result.filter(order => |
|||
order.orderNo.includes(this.filterForm.orderNo) |
|||
); |
|||
} |
|||
|
|||
// 根据商家名称过滤 |
|||
if (this.filterForm.merchantName) { |
|||
const keyword = this.filterForm.merchantName.toLowerCase(); |
|||
result = result.filter(order => |
|||
order.merchant.name.toLowerCase().includes(keyword) |
|||
); |
|||
} |
|||
|
|||
// 根据交易状态过滤 |
|||
if (this.filterForm.tradeStatus) { |
|||
result = result.filter(order => |
|||
order.status === this.filterForm.tradeStatus |
|||
); |
|||
} |
|||
|
|||
return result; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 搜索 |
|||
search() { |
|||
this.currentPage = 1; // 重置到第一页 |
|||
this.$message({ |
|||
message: '搜索条件已应用', |
|||
type: 'info' |
|||
}); |
|||
}, |
|||
|
|||
// 重置 |
|||
reset() { |
|||
this.filterForm = { |
|||
goodsName: '', |
|||
orderNo: '', |
|||
createTime: '', |
|||
merchantName: '', |
|||
tradeStatus: '' |
|||
}; |
|||
this.activeTab = 'all'; |
|||
this.currentPage = 1; |
|||
}, |
|||
|
|||
// 分页大小改变 |
|||
handleSizeChange(val) { |
|||
this.pageSize = val; |
|||
}, |
|||
|
|||
// 当前页改变 |
|||
handleCurrentChange(val) { |
|||
this.currentPage = val; |
|||
}, |
|||
|
|||
// 获取状态显示文本 |
|||
getStatusText(status) { |
|||
const statusMap = { |
|||
pendingPayment: '待付款', |
|||
pendingDelivery: '待发货', |
|||
delivering: '配送中', |
|||
completed: '已完成', |
|||
cancelled: '已取消' |
|||
}; |
|||
return statusMap[status] || status; |
|||
}, |
|||
|
|||
// 获取状态标签类型 |
|||
getStatusTagType(status) { |
|||
const typeMap = { |
|||
pendingPayment: 'warning', |
|||
pendingDelivery: 'info', |
|||
delivering: 'primary', |
|||
completed: 'success', |
|||
cancelled: 'danger' |
|||
}; |
|||
return typeMap[status] || 'default'; |
|||
}, |
|||
|
|||
// 去付款 |
|||
payOrder(orderId) { |
|||
this.$message({ |
|||
message: `订单 ${orderId} 去付款`, |
|||
type: 'info' |
|||
}); |
|||
}, |
|||
|
|||
// 提醒发货 |
|||
remindDelivery(orderId) { |
|||
this.$message({ |
|||
message: `已提醒订单 ${orderId} 发货`, |
|||
type: 'success' |
|||
}); |
|||
}, |
|||
|
|||
// 查看物流 |
|||
checkLogistics(orderId) { |
|||
this.$message({ |
|||
message: `查看订单 ${orderId} 物流`, |
|||
type: 'info' |
|||
}); |
|||
}, |
|||
|
|||
// 去评价 |
|||
gotoReview(orderId) { |
|||
this.$message({ |
|||
message: `去评价订单 ${orderId}`, |
|||
type: 'info' |
|||
}); |
|||
}, |
|||
|
|||
// 查看订单详情 |
|||
viewOrderDetail(orderId) { |
|||
this.$message({ |
|||
message: `查看订单 ${orderId} 详情`, |
|||
type: 'info' |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
::v-deep .el-button--text { |
|||
color: #6a8a27; |
|||
} |
|||
::v-deep .el-tabs__item.is-active{ |
|||
color: #6a8a27; |
|||
} |
|||
::v-deep .el-tabs__active-bar{ |
|||
background-color: #6a8a27 |
|||
} |
|||
::v-deep .el-tabs__item:hover{ |
|||
color: #6a8a27; |
|||
} |
|||
} |
|||
.filter-bar { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
|
|||
/* 订单卡片样式 */ |
|||
.order-card { |
|||
border: 1px solid #eee; |
|||
border-radius: 4px; |
|||
margin-bottom: 20px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/* 订单头部 - 包含商家信息 */ |
|||
.order-header { |
|||
background-color: #f8f9fa; |
|||
padding: 12px 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
border-bottom: 1px solid #eee; |
|||
color: #666; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
|
|||
|
|||
/* 订单商品列表 */ |
|||
.order-products { |
|||
padding: 10px 20px; |
|||
} |
|||
|
|||
.product-item { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 15px 0; |
|||
border-bottom: 1px dashed #eee; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.product-item:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.product-image { |
|||
width: 80px; |
|||
height: 80px; |
|||
object-fit: cover; |
|||
margin-right: 15px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.product-details { |
|||
flex: 1; |
|||
} |
|||
|
|||
.product-name { |
|||
color: #333; |
|||
margin-bottom: 5px; |
|||
} |
|||
|
|||
.product-spec { |
|||
color: #999; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.product-price { |
|||
width: 120px; |
|||
text-align: center; |
|||
color: #333; |
|||
} |
|||
|
|||
.product-quantity { |
|||
width: 100px; |
|||
text-align: center; |
|||
color: #666; |
|||
} |
|||
|
|||
.product-total { |
|||
width: 120px; |
|||
text-align: center; |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.product-status { |
|||
width: 150px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.product-actions { |
|||
width: 150px; |
|||
text-align: center; |
|||
} |
|||
|
|||
/* 订单底部 - 金额和操作 */ |
|||
.order-footer { |
|||
background-color: #f8f9fa; |
|||
padding: 15px 20px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
border-top: 1px solid #eee; |
|||
} |
|||
|
|||
.order-summary { |
|||
text-align: right; |
|||
} |
|||
|
|||
.order-amount { |
|||
color: #333; |
|||
margin-bottom: 5px; |
|||
} |
|||
|
|||
.order-amount strong { |
|||
color: #ff4d4f; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.order-tips { |
|||
font-size: 12px; |
|||
color: #999; |
|||
} |
|||
|
|||
.order-actions { |
|||
display: flex; |
|||
gap: 10px; |
|||
} |
|||
</style> |
|||
|
|||
|
|||
|
|||
@ -0,0 +1,309 @@ |
|||
<template> |
|||
<div class="bg"> |
|||
<div class="notice-bar" v-if="showNotice"> |
|||
<div class="notice-bar__content"> |
|||
<i class="el-icon-lightbulb"></i> |
|||
尊敬的采购人，欢迎来到xxx平台！您可以先完成下方的基础设置，方便您更高效的采购。 |
|||
</div> |
|||
<div class="notice-bar__close" @click="showNotice = false"> |
|||
<i class="el-icon-close"></i> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 快速设置卡片 --> |
|||
<el-card> |
|||
<el-row :gutter="20"> |
|||
<el-col :xs="24" :sm="8" :md="8" v-for="(item,i) in headFun" :key="i"> |
|||
<div class="feature-item" > |
|||
<div class="feature-icon"> |
|||
<i :class="item.icon"></i> |
|||
</div> |
|||
<span class="feature-name">{{ item.title }}</span> |
|||
<el-button type="text" size="mini" style="margin-top: 5px;">去设置</el-button> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
|
|||
<!-- 个人信息卡片 --> |
|||
<el-card> |
|||
<div slot="header">个人信息</div> |
|||
<div class="user-info"> |
|||
<img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="user-avatar"> |
|||
<div class="user-details"> |
|||
<div> |
|||
<div class="user-name">张三哥</div> |
|||
<div class="user-other-info"> |
|||
ID: 200901071124 |
|||
<el-button type="text" size="mini" @click="copyId">复制</el-button> |
|||
</div> |
|||
<div class="user-other-info">手机号: 138****5678</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="login-info"> |
|||
<div class="login-section"> |
|||
<div class="login-section-title">当前登录信息</div> |
|||
<div class="login-detail">登录设备: Edge浏览器</div> |
|||
<div class="login-detail">登录地点: 中国广东深圳</div> |
|||
<div class="login-detail">登录时间: 2099-02-23 10:09:50</div> |
|||
</div> |
|||
<div class="login-section"> |
|||
<div class="login-section-title">上次登录信息</div> |
|||
<div class="login-detail">登录设备: 微信小程序</div> |
|||
<div class="login-detail">登录地点: 中国广东深圳</div> |
|||
<div class="login-detail">登录时间: 2099-02-05 10:46:45</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<el-button type="primary" size="mini" style="background-color: #6a8a27;border: none;"> |
|||
<i class="el-icon-edit"></i> 编辑个人信息 |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</el-card> |
|||
|
|||
<!-- 订单管理卡片 --> |
|||
<div class="flex-center"> |
|||
<el-card style="flex: 1;"> |
|||
<div slot="header">我的议价</div> |
|||
<div class="feature-grid" > |
|||
<div class="feature-item" v-for="(item,i) in bargaining" :key="i"> |
|||
<el-badge v-if="item.value" :value="item.value" type="danger" > |
|||
<div class="feature-icon"><i :class="item.icon"></i></div> |
|||
</el-badge> |
|||
<div v-else class="feature-icon"><i :class="item.icon"></i></div> |
|||
<span class="feature-name">{{ item.title }}</span> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
<div style="width: 20px;flex-shrink: 0;"></div> |
|||
<el-card style="flex: 1;"> |
|||
<div slot="header">我的订单</div> |
|||
<div class="feature-grid" > |
|||
<div class="feature-item" v-for="(item,i) in order" :key="i"> |
|||
<el-badge v-if="item.value" :value="item.value" type="danger" > |
|||
<div class="feature-icon"><i :class="item.icon"></i></div> |
|||
</el-badge> |
|||
<div v-else class="feature-icon"><i :class="item.icon"></i></div> |
|||
<span class="feature-name">{{ item.title }}</span> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
|
|||
|
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'UserCenter', |
|||
data() { |
|||
return { |
|||
showNotice: true, |
|||
userId: '200901071124', |
|||
headFun: [ |
|||
{icon: "el-icon-location", title: "设置收货地址", path: ""}, |
|||
{icon: "el-icon-document", title: "设置发票抬头", path: ""}, |
|||
{icon: "el-icon-user", title: "设置采购人信息", path: ""}, |
|||
], |
|||
bargaining: [ |
|||
{icon: "el-icon-time", title: "待回复", path: "", value: 2}, |
|||
{icon: "el-icon-truck", title: "已取消", path: "", value: 2}, |
|||
{icon: "el-icon-menu", title: "已成交", path: "", value: 2}, |
|||
], |
|||
order: [ |
|||
{icon: "el-icon-time", title: "待付款", path: "", value: 2}, |
|||
{icon: "el-icon-truck", title: "未发货", path: "", value: 2}, |
|||
{icon: "el-icon-menu", title: "全部订单", path: "", value: 2}, |
|||
] |
|||
|
|||
|
|||
} |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
// 复制用户ID |
|||
copyId() { |
|||
const input = document.createElement('input'); |
|||
input.value = this.userId; |
|||
document.body.appendChild(input); |
|||
input.select(); |
|||
document.execCommand('copy'); |
|||
document.body.removeChild(input); |
|||
|
|||
this.$message({ |
|||
message: 'ID已复制', |
|||
type: 'success' |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.bg{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
::v-deep .el-button--text { |
|||
color: #6a8a27; |
|||
} |
|||
} |
|||
/* 卡片通用样式 */ |
|||
.el-card { |
|||
margin-bottom: 20px; |
|||
border-radius: 6px; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); |
|||
border: none; |
|||
} |
|||
|
|||
.el-card__header { |
|||
padding: 16px 20px; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
background-color: #fff; |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.el-card__body { |
|||
padding: 20px; |
|||
} |
|||
|
|||
/* 通知栏样式 */ |
|||
.notice-bar { |
|||
background-color: #fffbe6; |
|||
border: 1px solid #ffe58f; |
|||
padding: 12px 16px; |
|||
border-radius: 4px; |
|||
margin-bottom: 20px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
color: #fa8c16; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.notice-bar__content { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.notice-bar__content i { |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.notice-bar__close { |
|||
cursor: pointer; |
|||
transition: color 0.2s; |
|||
} |
|||
|
|||
.notice-bar__close:hover { |
|||
color: #fa8c16; |
|||
} |
|||
|
|||
/* 用户信息样式 */ |
|||
.user-info { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
padding: 10px 0; |
|||
} |
|||
|
|||
.user-avatar { |
|||
width: 100px; |
|||
height: 100px; |
|||
border-radius: 50%; |
|||
margin-right: 20px; |
|||
border: 4px solid #f5f7fa; |
|||
} |
|||
|
|||
.user-details { |
|||
flex: 1; |
|||
} |
|||
|
|||
.user-name { |
|||
font-size: 20px; |
|||
font-weight: 500; |
|||
margin-bottom: 10px; |
|||
color: #1f2329; |
|||
} |
|||
|
|||
.user-other-info { |
|||
color: #4e5969; |
|||
margin-bottom: 6px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/* 登录信息样式 */ |
|||
.login-info { |
|||
display: flex; |
|||
padding-top: 20px; |
|||
} |
|||
|
|||
.login-section { |
|||
flex: 1; |
|||
} |
|||
|
|||
.login-section-title { |
|||
font-weight: 500; |
|||
margin-bottom: 10px; |
|||
color: #1f2329; |
|||
font-size: 15px; |
|||
} |
|||
|
|||
.login-detail { |
|||
color: #4e5969; |
|||
font-size: 14px; |
|||
margin-bottom: 6px; |
|||
} |
|||
|
|||
/* 功能图标区域 */ |
|||
.feature-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 15px; |
|||
margin-top: 15px; |
|||
} |
|||
|
|||
.feature-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
padding: 15px 10px; |
|||
border-radius: 6px; |
|||
transition: all 0.2s; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.feature-item:hover { |
|||
background-color: #f5f7fa; |
|||
} |
|||
|
|||
.feature-icon { |
|||
width: 48px; |
|||
height: 48px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 50%; |
|||
margin-bottom: 10px; |
|||
font-size: 20px; |
|||
color: #6a8a27; |
|||
background-color: rgba(106, 138, 39, 0.1); |
|||
} |
|||
|
|||
.feature-name { |
|||
font-size: 14px; |
|||
color: #4e5969; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,131 @@ |
|||
<template> |
|||
<div class="bg"> |
|||
<el-card style="width: 100%;"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>个人信息</span> |
|||
</div> |
|||
<div style="padding-right: 200px;"> |
|||
<el-form :model="user" label-width="100px" size="small"> |
|||
<el-form-item label="用户头像"> |
|||
<el-upload class="avatar-uploader" action="#" :auto-upload="false" |
|||
:on-change="handleAvatarChange" :show-file-list="false"> |
|||
<div style="position: relative;" v-if="user.avatar"> |
|||
<img :src="user.avatar" class="avatar"> |
|||
<div class="hover-tip">修改头像</div> |
|||
</div> |
|||
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|||
</el-upload> |
|||
</el-form-item> |
|||
<el-form-item label="*昵称"> |
|||
<el-input v-model="user.nickname" placeholder="请输入昵称"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="用户ID"> |
|||
<el-input v-model="user.id" disabled> |
|||
<template slot="append"> |
|||
<el-button @click="copyId">复制</el-button> |
|||
</template> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="性别"> |
|||
<el-radio-group v-model="user.gender"> |
|||
<el-radio label="male">男性</el-radio> |
|||
<el-radio label="female">女性</el-radio> |
|||
<el-radio label="secret">保密</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item label="生日"> |
|||
<el-date-picker type="date" placeholder="选择日期" v-model="user.birthday" |
|||
style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item class="form-actions"> |
|||
<el-button type="primary" @click="saveUser">保存</el-button> |
|||
<el-button @click="close">关闭</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'UserInfo', |
|||
data() { |
|||
return { |
|||
user: { |
|||
avatar: '', |
|||
nickname: '张三哥', |
|||
id: '209901071124', |
|||
gender: 'male', |
|||
birthday: '' |
|||
} |
|||
} |
|||
}, |
|||
methods:{ |
|||
handleAvatarChange(file) { |
|||
this.user.avatar = URL.createObjectURL(file.raw); |
|||
}, |
|||
copyId() { |
|||
const input = document.createElement('input'); |
|||
input.value = this.user.id; |
|||
document.body.appendChild(input); |
|||
input.select(); |
|||
document.execCommand('copy'); |
|||
document.body.removeChild(input); |
|||
this.$message({ |
|||
message: '用户ID已复制', |
|||
type: 'success' |
|||
}); |
|||
}, |
|||
saveUser() { |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success' |
|||
}); |
|||
}, |
|||
close() { |
|||
this.$message({ |
|||
message: '已关闭', |
|||
type: 'info' |
|||
}); |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.avatar-uploader-icon { |
|||
font-size: 28px; |
|||
color: #8c939d; |
|||
width: 100px; |
|||
height: 100px; |
|||
line-height: 100px; |
|||
text-align: center; |
|||
} |
|||
::v-deep .avatar-uploader .el-upload { |
|||
border: 1px dashed #d9d9d9; |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.avatar { |
|||
width: 100px; |
|||
height: 100px; |
|||
display: block; |
|||
} |
|||
.hover-tip{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
width: 100%; |
|||
height: 20px; |
|||
text-align: center; |
|||
line-height: 20px; |
|||
font-size: 14px; |
|||
color: #fff; |
|||
background: rgba(0,0,0,0.5); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,112 @@ |
|||
<template> |
|||
<div class="bg"> |
|||
<el-card style="width: 100%;"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>个人信息</span> |
|||
<el-button style="float: right;color: #999;" type="text" icon="el-icon-delete">批量删除</el-button> |
|||
</div> |
|||
|
|||
|
|||
<el-checkbox-group v-model="checkList"> |
|||
<div class="date-container" v-for="(item,i) in historyData" :key="i"> |
|||
<div class="head-date"> |
|||
{{ item.date }} |
|||
<span class="goods-num">{{item.goods.length}}件商品</span> |
|||
</div> |
|||
<div class="goods-container"> |
|||
<div class="goods-item" v-for="(goods,itemI) in 15" :key="itemI"> |
|||
<!-- <img class="goods-img" :src="goods.image"> |
|||
<div class="goods-content"> |
|||
<div class="price">{{ goods.price }}</div> |
|||
<div class="text-overflowRows">{{ goods.name }}</div> |
|||
</div> --> |
|||
<img class="goods-img" :src="item.goods[0].image"> |
|||
<div class="goods-content"> |
|||
<div class="price">{{ item.goods[0].price }}</div> |
|||
<div class="text-overflowRows">{{ item.goods[0].name }}</div> |
|||
</div> |
|||
|
|||
<!-- <el-checkbox class="select-item" :label="itemI"></el-checkbox> --> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-checkbox-group> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'UserInfo', |
|||
data() { |
|||
return { |
|||
historyData: [ |
|||
{ |
|||
date: "06.10", |
|||
goods: [{image: 'https://picsum.photos/300/200?random=1',price: 359,name: '产品标题产品标题'}], |
|||
} |
|||
], |
|||
checkList: [], |
|||
} |
|||
}, |
|||
methods:{ |
|||
|
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.date-container{ |
|||
font-size: 14px; |
|||
} |
|||
.head-date{ |
|||
font-size: 30px; |
|||
border-bottom: 1px solid #ddd; |
|||
padding-bottom: 10px; |
|||
// font-weight: bold; |
|||
.goods-num{ |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
padding-left: 5px; |
|||
} |
|||
} |
|||
.goods-container{ |
|||
padding: 20px 0; |
|||
display: grid; |
|||
grid-template-columns: repeat(4, 1fr); |
|||
gap: 20px; |
|||
.goods-item{ |
|||
width: 220px; |
|||
position: relative; |
|||
|
|||
.goods-img{ |
|||
height: 260px; |
|||
width: 100%; |
|||
border-radius: 4px; |
|||
object-fit: cover; |
|||
} |
|||
.goods-content{ |
|||
padding: 10px 0; |
|||
height: 80px; |
|||
} |
|||
.price{ |
|||
color: #ff1111; |
|||
font-size: 16px; |
|||
padding-bottom: 3px; |
|||
&::before{ |
|||
content: "￥"; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.select-item{ |
|||
position: absolute; |
|||
top: 5px; |
|||
left: 5px; |
|||
::v-deep .el-checkbox__label{ |
|||
display: none; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue