sales/todo-frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化所有页面UI设计：登录页、商品列表、订单列表、创建订单、库存管理

Browse Source
This commit is contained in:
Agent
2026-03-26 12:59:03 +00:00
parent fe35a48123
commit 3dfba3d804
4 changed files with 528 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/pages/order/create.vue
View File

@@ -1,8 +1,11 @@
<template> <template>
<view class="page"> <view class="page">
<!-- 客户信息 --> <!-- 客户信息 -->
<view class="section"> <view class="section card-section">
<view class="section-title">客户信息</view> <view class="section-header">
<text class="section-icon">👤</text>
<text class="section-title">客户信息</text>
</view>
<view class="form-item"> <view class="form-item">
<text class="label">客户</text> <text class="label">客户</text>
<picker <picker
@@ -13,14 +16,16 @@
> >
<view class="picker-value"> <view class="picker-value">
{{ selectedCustomer ? selectedCustomer.name : '请选择客户' }} {{ selectedCustomer ? selectedCustomer.name : '请选择客户' }}
<text class="arrow">›</text>
</view> </view>
</picker> </picker>
</view> </view>
</view> </view>
<!-- 商品选择 --> <!-- 商品选择 -->
<view class="section"> <view class="section card-section">
<view class="section-header"> <view class="section-header">
<text class="section-icon">📦</text>
<text class="section-title">商品明细</text> <text class="section-title">商品明细</text>
<text class="add-btn" @click="goToSelectProduct">+ 添加商品</text> <text class="add-btn" @click="goToSelectProduct">+ 添加商品</text>
</view> </view>
@@ -55,13 +60,17 @@
</view> </view>
<view v-if="orderItems.length === 0" class="empty-tip"> <view v-if="orderItems.length === 0" class="empty-tip">
请添加商品 <text class="empty-icon">🛒</text>
<text>请添加商品</text>
</view> </view>
</view> </view>
<!-- 优惠设置 --> <!-- 优惠设置 -->
<view class="section"> <view class="section card-section">
<view class="section-title">优惠设置</view> <view class="section-header">
<text class="section-icon">🎫</text>
<text class="section-title">优惠设置</text>
</view>
<view class="form-item"> <view class="form-item">
<text class="label">折扣率</text> <text class="label">折扣率</text>
<input <input
@@ -76,6 +85,10 @@
<!-- 订单金额 --> <!-- 订单金额 -->
<view class="section amount-section"> <view class="section amount-section">
<view class="amount-header">
<text class="amount-icon">💰</text>
<text class="amount-title">订单金额</text>
</view>
<view class="amount-row"> <view class="amount-row">
<text class="amount-label">原价合计</text> <text class="amount-label">原价合计</text>
<text class="amount-value">¥{{ totalAmount.toFixed(2) }}</text> <text class="amount-value">¥{{ totalAmount.toFixed(2) }}</text>
@@ -91,8 +104,11 @@
</view> </view>
<!-- 支付方式 --> <!-- 支付方式 -->
<view class="section"> <view class="section card-section">
<view class="section-title">支付方式</view> <view class="section-header">
<text class="section-icon">💳</text>
<text class="section-title">支付方式</text>
</view>
<view class="payment-methods"> <view class="payment-methods">
<view <view
class="method-item" class="method-item"
@@ -119,8 +135,11 @@
</view> </view>
<!-- 备注 --> <!-- 备注 -->
<view class="section"> <view class="section card-section">
<view class="section-title">备注</view> <view class="section-header">
<text class="section-icon">📝</text>
<text class="section-title">备注</text>
</view>
<textarea <textarea
class="remark-input" class="remark-input"
v-model="remark" v-model="remark"
@@ -307,44 +326,54 @@ export default {
</script> </script>
<style> <style>
/* 全局 */
.page { .page {
padding: 20rpx; padding: 20rpx;
padding-bottom: 160rpx; padding-bottom: 180rpx;
background: #f8f9fa;
} }
.section { /* 卡片区块 */
.card-section {
background: #fff; background: #fff;
border-radius: 16rpx; border-radius: 20rpx;
padding: 24rpx; padding: 24rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
} }
.section-header { .section-header {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.section-icon {
font-size: 32rpx;
margin-right: 12rpx;
}
.section-title { .section-title {
font-size: 28rpx; font-size: 28rpx;
font-weight: bold; font-weight: bold;
flex: 1;
} }
.add-btn { .add-btn {
color: #3cc51f; color: #667eea;
font-size: 26rpx; font-size: 26rpx;
font-weight: 500;
} }
.form-item { .form-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 16rpx 0; padding: 20rpx 0;
border-bottom: 1rpx solid #f5f5f5; border-bottom: 1rpx solid #f5f5f5;
} }
.label { .label {
width: 120rpx; width: 140rpx;
font-size: 28rpx; font-size: 28rpx;
color: #666; color: #666;
} }
@@ -352,17 +381,37 @@ export default {
.picker-value { .picker-value {
flex: 1; flex: 1;
font-size: 28rpx; font-size: 28rpx;
color: #333;
display: flex;
justify-content: space-between;
align-items: center;
}
.arrow {
font-size: 32rpx;
color: #ccc;
} }
.discount-input { .discount-input {
width: 120rpx; width: 120rpx;
text-align: right; text-align: right;
font-size: 28rpx;
padding: 10rpx;
background: #f5f5f5;
border-radius: 8rpx;
} }
.unit {
font-size: 28rpx;
color: #666;
margin-left: 10rpx;
}
/* 订单商品项 */
.order-item { .order-item {
padding: 20rpx; padding: 20rpx;
background: #f9f9f9; background: #f9f9f9;
border-radius: 8rpx; border-radius: 12rpx;
margin-bottom: 16rpx; margin-bottom: 16rpx;
} }
@@ -374,6 +423,7 @@ export default {
font-size: 28rpx; font-size: 28rpx;
font-weight: bold; font-weight: bold;
display: block; display: block;
color: #333;
} }
.item-spec { .item-spec {
@@ -392,7 +442,7 @@ export default {
margin-right: 20rpx; margin-right: 20rpx;
} }
.qty-label, .qty-label { .qty-label {
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #666;
margin-right: 8rpx; margin-right: 8rpx;
@@ -418,18 +468,48 @@ export default {
.delete-btn { .delete-btn {
margin-left: 20rpx; margin-left: 20rpx;
font-size: 36rpx; font-size: 40rpx;
color: #999; color: #999;
padding: 10rpx;
} }
.empty-tip { .empty-tip {
padding: 40rpx; padding: 40rpx;
text-align: center; text-align: center;
color: #999; color: #999;
display: flex;
flex-direction: column;
align-items: center;
} }
.empty-icon {
font-size: 60rpx;
margin-bottom: 10rpx;
}
/* 金额区域 */
.amount-section { .amount-section {
background: #fff7e6; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 20rpx;
}
.amount-header {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.amount-icon {
font-size: 32rpx;
margin-right: 12rpx;
}
.amount-title {
font-size: 28rpx;
font-weight: bold;
color: #fff;
} }
.amount-row { .amount-row {
@@ -440,30 +520,30 @@ export default {
.amount-label { .amount-label {
font-size: 26rpx; font-size: 26rpx;
color: #666; color: rgba(255, 255, 255, 0.8);
} }
.amount-value { .amount-value {
font-size: 26rpx; font-size: 26rpx;
color: #333; color: #fff;
} }
.amount-value.discount { .amount-value.discount {
color: #52c41a; color: #7dff7d;
} }
.amount-row.actual { .amount-row.actual {
border-top: 1rpx dashed #ddd; border-top: 1rpx solid rgba(255, 255, 255, 0.2);
padding-top: 20rpx; padding-top: 20rpx;
margin-top: 12rpx; margin-top: 12rpx;
} }
.amount-row.actual .amount-value { .amount-row.actual .amount-value {
font-size: 32rpx; font-size: 36rpx;
font-weight: bold; font-weight: bold;
color: #ff4d4f;
} }
/* 支付方式 */
.payment-methods { .payment-methods {
display: flex; display: flex;
gap: 20rpx; gap: 20rpx;
@@ -471,25 +551,32 @@ export default {
.method-item { .method-item {
flex: 1; flex: 1;
padding: 20rpx; padding: 24rpx;
text-align: center; text-align: center;
background: #f5f5f5; background: #f5f5f5;
border-radius: 8rpx; border-radius: 12rpx;
font-size: 26rpx; font-size: 26rpx;
transition: all 0.3s;
} }
.method-item.active { .method-item.active {
background: #e6f7ff; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #1890ff; color: #fff;
border: 1rpx solid #1890ff; box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);
} }
/* 备注 */
.remark-input { .remark-input {
width: 100%; width: 100%;
height: 120rpx; height: 120rpx;
font-size: 28rpx; font-size: 28rpx;
background: #f9f9f9;
border-radius: 12rpx;
padding: 20rpx;
box-sizing: border-box;
} }
/* 底部提交 */
.submit-bar { .submit-bar {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@@ -497,9 +584,9 @@ export default {
right: 0; right: 0;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 20rpx; padding: 20rpx 30rpx;
background: #fff; background: #fff;
box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1); box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
} }
.submit-info { .submit-info {
@@ -508,19 +595,21 @@ export default {
} }
.submit-amount { .submit-amount {
font-size: 36rpx; font-size: 40rpx;
font-weight: bold; font-weight: bold;
color: #ff4d4f; color: #ff4d4f;
} }
.submit-btn { .submit-btn {
width: 200rpx; width: 240rpx;
height: 80rpx; height: 88rpx;
line-height: 80rpx; line-height: 88rpx;
background: #3cc51f; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 40rpx; border-radius: 44rpx;
font-size: 28rpx; font-size: 30rpx;
font-weight: bold;
box-shadow: 0 8rpx 30rpx rgba(102, 126, 234, 0.4);
} }
</style> </style>

238
src/pages/order/list.vue
View File

@@ -40,52 +40,61 @@
class="order-card" class="order-card"
@click="viewDetail(order)" @click="viewDetail(order)"
> >
<view class="order-header"> <view class="card-header">
<text class="order-no">{{ order.orderNo }}</text> <view class="order-no-wrap">
<text class="order-icon">📋</text>
<text class="order-no">{{ order.orderNo }}</text>
</view>
<text class="order-status" :class="getStatusClass(order.status)"> <text class="order-status" :class="getStatusClass(order.status)">
{{ getStatusText(order.status) }} {{ getStatusText(order.status) }}
</text> </text>
</view> </view>
<view class="order-customer"> <view class="card-body">
<text class="customer-name">{{ order.customerName || '散客' }}</text> <view class="customer-row">
<text class="customer-phone">{{ order.customerPhone || '-' }}</text> <text class="customer-label">👤 客户</text>
</view> <text class="customer-name">{{ order.customerName || '散客' }}</text>
<text class="customer-phone">{{ order.customerPhone || '' }}</text>
<view class="order-items">
<text class="items-label">商品明细</text>
<text class="items-count">{{ getItemCount(order.orderId) }}种商品</text>
</view>
<view class="order-amount">
<view class="amount-row">
<text class="amount-label">原价</text>
<text class="amount-value">¥{{ order.totalAmount }}</text>
</view> </view>
<view class="amount-row">
<text class="amount-label">优惠</text> <view class="items-row">
<text class="amount-value discount">-¥{{ order.discountAmount }}</text> <text class="items-label">📦 商品</text>
</view> <text class="items-count">{{ getItemCount(order.orderId) }}种商品</text>
<view class="amount-row actual">
<text class="amount-label">实付</text>
<text class="amount-value">¥{{ order.actualAmount }}</text>
</view> </view>
</view> </view>
<view class="order-footer"> <view class="card-footer">
<text class="order-time">{{ formatTime(order.createdAt) }}</text> <view class="amount-info">
<view class="order-actions" v-if="order.status === 0"> <view class="amount-row">
<text class="action-btn confirm" @click.stop="confirmOrder(order)">确认</text> <text class="amount-label">原价</text>
<text class="action-btn cancel" @click.stop="cancelOrder(order)">取消</text> <text class="amount-value">¥{{ order.totalAmount }}</text>
<text class="action-btn edit" @click.stop="editOrder(order)">编辑</text> </view>
<view class="amount-row">
<text class="amount-label">优惠</text>
<text class="amount-value discount">-¥{{ order.discountAmount }}</text>
</view>
<view class="amount-row actual">
<text class="amount-label">实付</text>
<text class="amount-value">¥{{ order.actualAmount }}</text>
</view>
</view>
<view class="action-section">
<text class="order-time">{{ formatTime(order.createdAt) }}</text>
<view class="order-actions" v-if="order.status === 0">
<text class="action-btn confirm" @click.stop="confirmOrder(order)">确认</text>
<text class="action-btn cancel" @click.stop="cancelOrder(order)">取消</text>
<text class="action-btn edit" @click.stop="editOrder(order)">编辑</text>
</view>
<text class="operator" v-else>{{ order.operatorName }}</text>
</view> </view>
<text class="operator" v-else>{{ order.operatorName }}</text>
</view> </view>
</view> </view>
<!-- 空状态 --> <!-- 空状态 -->
<view v-if="orders.length === 0" class="empty"> <view v-if="orders.length === 0" class="empty">
<text>暂无订单</text> <text class="empty-icon">📭</text>
<text class="empty-text">暂无订单</text>
</view> </view>
</view> </view>
@@ -249,44 +258,69 @@ export default {
</script> </script>
<style> <style>
/* 全局 */
.page { .page {
min-height: 100vh;
background: #f8f9fa;
padding: 20rpx; padding: 20rpx;
} }
/* 筛选栏 */
.filter-bar { .filter-bar {
display: flex; display: flex;
background: #fff; background: #fff;
border-radius: 16rpx; border-radius: 16rpx;
padding: 16rpx; padding: 12rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
} }
.filter-item { .filter-item {
flex: 1; flex: 1;
text-align: center; text-align: center;
padding: 12rpx; padding: 16rpx;
font-size: 26rpx; font-size: 26rpx;
color: #666; color: #666;
border-radius: 8rpx; border-radius: 12rpx;
transition: all 0.3s;
} }
.filter-item.active { .filter-item.active {
background: #3cc51f; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff; color: #fff;
font-weight: bold;
}
/* 订单列表 */
.order-list {
padding-bottom: 20rpx;
} }
.order-card { .order-card {
background: #fff; background: #fff;
border-radius: 16rpx; border-radius: 20rpx;
padding: 24rpx; padding: 24rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
} }
.order-header { .card-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 16rpx; margin-bottom: 20rpx;
padding-bottom: 16rpx;
border-bottom: 1rpx solid #f5f5f5;
}
.order-no-wrap {
display: flex;
align-items: center;
}
.order-icon {
font-size: 28rpx;
margin-right: 10rpx;
} }
.order-no { .order-no {
@@ -296,78 +330,87 @@ export default {
} }
.order-status { .order-status {
font-size: 24rpx; font-size: 22rpx;
padding: 4rpx 12rpx; padding: 6rpx 16rpx;
border-radius: 4rpx; border-radius: 20rpx;
} }
.status-success { .status-success {
background: #f6ffed; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: #52c41a; color: #fff;
} }
.status-cancel { .status-cancel {
background: #fff1f0; background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
color: #ff4d4f; color: #fff;
} }
.status-refunding { .status-refunding {
background: #fff7e6; background: linear-gradient(135deg, #fa8c16 0%, #ffc069 100%);
color: #fa8c16; color: #fff;
} }
.status-refunded { .status-refunded {
background: #f9f0ff; background: linear-gradient(135deg, #722ed1 0%, #b37feb 100%);
color: #722ed1; color: #fff;
} }
.order-customer { /* 卡片主体 */
.card-body {
margin-bottom: 20rpx;
}
.customer-row, .items-row {
display: flex; display: flex;
justify-content: space-between; align-items: center;
margin-bottom: 16rpx; margin-bottom: 12rpx;
}
.customer-label, .items-label {
font-size: 24rpx;
color: #999;
width: 100rpx;
} }
.customer-name { .customer-name {
font-size: 26rpx; font-size: 26rpx;
color: #333; color: #333;
font-weight: 500;
} }
.customer-phone { .customer-phone {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #999;
} margin-left: 20rpx;
.order-items {
display: flex;
justify-content: space-between;
padding: 16rpx 0;
border-top: 1rpx solid #f5f5f5;
border-bottom: 1rpx solid #f5f5f5;
}
.items-label {
font-size: 24rpx;
color: #666;
} }
.items-count { .items-count {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #667eea;
font-weight: 500;
} }
.order-amount { /* 卡片底部 */
padding: 16rpx 0; .card-footer {
border-top: 1rpx solid #f5f5f5;
padding-top: 16rpx;
}
.amount-info {
display: flex;
justify-content: space-between;
margin-bottom: 16rpx;
} }
.amount-row { .amount-row {
display: flex; display: flex;
justify-content: space-between; align-items: center;
padding: 8rpx 0;
} }
.amount-label { .amount-label {
font-size: 24rpx; font-size: 22rpx;
color: #999; color: #999;
margin-right: 10rpx;
} }
.amount-value { .amount-value {
@@ -379,71 +422,74 @@ export default {
color: #52c41a; color: #52c41a;
} }
.amount-row.actual {
border-top: 1rpx dashed #ddd;
padding-top: 16rpx;
margin-top: 8rpx;
}
.amount-row.actual .amount-label {
font-weight: bold;
}
.amount-row.actual .amount-value { .amount-row.actual .amount-value {
font-size: 28rpx; font-size: 28rpx;
font-weight: bold; font-weight: bold;
color: #ff4d4f; color: #ff4d4f;
} }
.order-footer { /* 操作区域 */
.action-section {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-top: 16rpx; align-items: center;
border-top: 1rpx solid #f5f5f5;
} }
.order-time { .order-time {
font-size: 24rpx; font-size: 22rpx;
color: #999; color: #999;
} }
.operator { .operator {
font-size: 24rpx; font-size: 22rpx;
color: #999; color: #999;
} }
.order-actions { .order-actions {
display: flex; display: flex;
gap: 16rpx; gap: 12rpx;
} }
.action-btn { .action-btn {
font-size: 24rpx; font-size: 22rpx;
padding: 8rpx 16rpx; padding: 10rpx 20rpx;
border-radius: 4rpx; border-radius: 20rpx;
} }
.action-btn.confirm { .action-btn.confirm {
background: #3cc51f; background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: #fff; color: #fff;
} }
.action-btn.cancel { .action-btn.cancel {
background: #fff1f0; background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
color: #ff4d4f; color: #fff;
} }
.action-btn.edit { .action-btn.edit {
background: #e6f7ff; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #1890ff; color: #fff;
} }
/* 空状态 */
.empty { .empty {
padding: 100rpx; padding: 100rpx;
text-align: center; display: flex;
flex-direction: column;
align-items: center;
}
.empty-icon {
font-size: 100rpx;
margin-bottom: 20rpx;
}
.empty-text {
font-size: 28rpx;
color: #999; color: #999;
} }
/* 加载更多 */
.load-more { .load-more {
padding: 20rpx; padding: 20rpx;
text-align: center; text-align: center;

199
src/pages/product/list.vue
View File

@@ -1,14 +1,17 @@
<template> <template>
<view class="page"> <view class="page">
<!-- 搜索栏 --> <!-- 搜索栏 -->
<view class="search-bar"> <view class="search-section">
<input <view class="search-bar">
class="search-input" <text class="search-icon">🔍</text>
v-model="keyword" <input
placeholder="搜索商品名称" class="search-input"
@confirm="search" v-model="keyword"
/> placeholder="搜索商品名称"
<button class="search-btn" @click="search">搜索</button> placeholder-class="placeholder"
@confirm="search"
/>
</view>
</view> </view>
<!-- 分类筛选 --> <!-- 分类筛选 -->
@@ -36,26 +39,32 @@
<view <view
v-for="item in products" v-for="item in products"
:key="item.productId" :key="item.productId"
class="product-item" class="product-card"
@click="viewDetail(item)" @click="viewDetail(item)"
> >
<view class="product-info"> <view class="product-image">
<text class="product-emoji">📦</text>
</view>
<view class="product-content">
<text class="product-name">{{ item.name }}</text> <text class="product-name">{{ item.name }}</text>
<text class="product-spec">{{ item.spec || '-' }}</text> <text class="product-spec">{{ item.spec || '-' }}</text>
<view class="product-price"> <view class="product-footer">
<text class="price">¥{{ item.price }}</text> <view class="price-wrapper">
<text class="unit">/{{ item.unit }}</text> <text class="price">¥{{ item.price }}</text>
<text class="unit">/{{ item.unit }}</text>
</view>
<view class="stock-badge">
<text class="stock-label">库存</text>
<text class="stock-value">{{ getStock(item.productId) }}</text>
</view>
</view> </view>
</view> </view>
<view class="product-stock">
<text class="stock-label">库存</text>
<text class="stock-value">{{ getStock(item.productId) }}</text>
</view>
</view> </view>
<!-- 空状态 --> <!-- 空状态 -->
<view v-if="products.length === 0" class="empty"> <view v-if="products.length === 0" class="empty">
<text>暂无商品</text> <text class="empty-icon">📭</text>
<text class="empty-text">暂无商品</text>
</view> </view>
</view> </view>
@@ -147,76 +156,115 @@ export default {
</script> </script>
<style> <style>
/* 全局 */
.page { .page {
padding: 20rpx; min-height: 100vh;
background: #f8f9fa;
}
/* 搜索区域 */
.search-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 30rpx 30rpx 10rpx;
} }
.search-bar { .search-bar {
display: flex; display: flex;
margin-bottom: 20rpx; align-items: center;
background: rgba(255, 255, 255, 0.95);
border-radius: 50rpx;
padding: 0 30rpx;
height: 80rpx;
}
.search-icon {
font-size: 32rpx;
margin-right: 16rpx;
} }
.search-input { .search-input {
flex: 1; flex: 1;
height: 70rpx;
padding: 0 20rpx;
background: #fff;
border-radius: 8rpx;
font-size: 28rpx; font-size: 28rpx;
color: #333;
} }
.search-btn { .placeholder {
width: 120rpx; color: #999;
height: 70rpx;
line-height: 70rpx;
background: #3cc51f;
color: #fff;
border: none;
border-radius: 8rpx;
margin-left: 20rpx;
font-size: 28rpx;
} }
/* 分类筛选 */
.category-scroll { .category-scroll {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20rpx 30rpx 40rpx;
white-space: nowrap; white-space: nowrap;
margin-bottom: 20rpx;
} }
.category-item { .category-item {
display: inline-block; display: inline-block;
padding: 12rpx 24rpx; padding: 14rpx 32rpx;
margin-right: 16rpx; margin-right: 16rpx;
background: #fff; background: rgba(255, 255, 255, 0.2);
border-radius: 8rpx; border-radius: 30rpx;
font-size: 26rpx; font-size: 26rpx;
color: #666; color: rgba(255, 255, 255, 0.8);
transition: all 0.3s;
} }
.category-item.active { .category-item.active {
background: #3cc51f;
color: #fff;
}
.product-list {
background: #fff; background: #fff;
border-radius: 16rpx; color: #667eea;
font-weight: bold;
} }
.product-item { /* 商品列表 */
.product-list {
display: flex; display: flex;
justify-content: space-between; flex-wrap: wrap;
padding: 24rpx; padding: 20rpx;
border-bottom: 1rpx solid #f5f5f5;
} }
.product-info { .product-card {
flex: 1; width: 48%;
background: #fff;
border-radius: 20rpx;
margin-bottom: 20rpx;
overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
transition: all 0.3s;
}
.product-card:nth-child(odd) {
margin-right: 4%;
}
.product-card:active {
transform: scale(0.98);
}
.product-image {
height: 200rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
}
.product-emoji {
font-size: 80rpx;
}
.product-content {
padding: 20rpx;
} }
.product-name { .product-name {
font-size: 28rpx; font-size: 28rpx;
font-weight: bold; font-weight: bold;
color: #333;
display: block; display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.product-spec { .product-spec {
@@ -226,47 +274,72 @@ export default {
display: block; display: block;
} }
.product-price { .product-footer {
margin-top: 12rpx; display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16rpx;
}
.price-wrapper {
display: flex;
align-items: baseline;
} }
.price { .price {
color: #ff4d4f; color: #ff4d4f;
font-size: 28rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
} }
.unit { .unit {
color: #999; color: #999;
font-size: 24rpx; font-size: 22rpx;
margin-left: 4rpx;
} }
.product-stock { .stock-badge {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; background: #f0f0f0;
border-radius: 20rpx;
padding: 6rpx 16rpx;
} }
.stock-label { .stock-label {
font-size: 24rpx; font-size: 20rpx;
color: #999; color: #999;
margin-right: 6rpx;
} }
.stock-value { .stock-value {
font-size: 28rpx; font-size: 24rpx;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
} }
/* 空状态 */
.empty { .empty {
padding: 100rpx; width: 100%;
text-align: center; padding: 100rpx 0;
display: flex;
flex-direction: column;
align-items: center;
}
.empty-icon {
font-size: 100rpx;
margin-bottom: 20rpx;
}
.empty-text {
font-size: 28rpx;
color: #999; color: #999;
} }
/* 加载更多 */
.load-more { .load-more {
padding: 20rpx; padding: 30rpx;
text-align: center; text-align: center;
color: #999; color: #999;
font-size: 24rpx; font-size: 24rpx;

172
src/pages/stock/list.vue
View File

@@ -1,14 +1,17 @@
<template> <template>
<view class="stock-list"> <view class="stock-list">
<!-- 搜索栏 --> <!-- 搜索栏 -->
<view class="search-bar"> <view class="search-section">
<input <view class="search-bar">
class="search-input" <text class="search-icon">🔍</text>
v-model="keyword" <input
placeholder="搜索商品名称" class="search-input"
@confirm="search" v-model="keyword"
/> placeholder="搜索商品名称"
<button class="search-btn" @click="search">搜索</button> placeholder-class="placeholder"
@confirm="search"
/>
</view>
</view> </view>
<!-- 库存列表 --> <!-- 库存列表 -->
@@ -16,29 +19,35 @@
<view <view
v-for="item in stockList" v-for="item in stockList"
:key="item.stockId" :key="item.stockId"
class="stock-item" class="stock-card"
@click="goToDetail(item)" @click="goToDetail(item)"
> >
<view class="stock-info"> <view class="stock-left">
<text class="product-name">{{ item.productName || '商品' + item.productId }}</text> <view class="product-icon">📦</view>
<text class="warehouse">仓库: {{ item.warehouseId || '默认' }}</text> <view class="stock-info">
<text class="product-name">{{ item.productName || '商品' + item.productId }}</text>
<text class="warehouse">🏠 仓库: {{ item.warehouseId || '默认' }}</text>
</view>
</view> </view>
<view class="stock-num"> <view class="stock-right">
<text class="quantity">{{ item.quantity || 0 }}</text> <view class="stock-num">
<text class="label">库存</text> <text class="quantity">{{ item.quantity || 0 }}</text>
<text class="locked" v-if="item.lockedQuantity > 0">锁定: {{ item.lockedQuantity }}</text> <text class="label">库存</text>
</view>
<text class="locked" v-if="item.lockedQuantity > 0">🔒 锁定: {{ item.lockedQuantity }}</text>
</view> </view>
</view> </view>
<view v-if="stockList.length === 0" class="empty"> <view v-if="stockList.length === 0" class="empty">
<text>暂无库存数据</text> <text class="empty-icon">📭</text>
<text class="empty-text">暂无库存数据</text>
</view> </view>
</scroll-view> </scroll-view>
<!-- 底部操作 --> <!-- 底部操作 -->
<view class="bottom-action"> <view class="bottom-action">
<button class="action-btn primary" @click="goToIn">入库</button> <button class="action-btn primary" @click="goToIn">📥 入库</button>
<button class="action-btn" @click="goToFlow">流水</button> <button class="action-btn" @click="goToFlow">📊 流水</button>
</view> </view>
</view> </view>
</template> </template>
@@ -113,48 +122,81 @@ export default {
</script> </script>
<style scoped> <style scoped>
/* 全局 */
.stock-list { .stock-list {
min-height: 100vh; min-height: 100vh;
background: #f5f5f5; background: #f8f9fa;
padding-bottom: 100px; padding-bottom: 120rpx;
}
/* 搜索区域 */
.search-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 30rpx 30rpx 20rpx;
} }
.search-bar { .search-bar {
display: flex; display: flex;
padding: 20rpx; align-items: center;
background: #fff; background: rgba(255, 255, 255, 0.95);
border-radius: 50rpx;
padding: 0 30rpx;
height: 80rpx;
}
.search-icon {
font-size: 32rpx;
margin-right: 16rpx;
} }
.search-input { .search-input {
flex: 1; flex: 1;
height: 72rpx;
background: #f5f5f5;
border-radius: 8rpx;
padding: 0 20rpx;
font-size: 28rpx; font-size: 28rpx;
color: #333;
} }
.search-btn { .placeholder {
margin-left: 20rpx; color: #999;
height: 72rpx;
line-height: 72rpx;
font-size: 28rpx;
background: #3cc51f;
color: #fff;
} }
/* 库存列表 */
.stock-scroll { .stock-scroll {
height: calc(100vh - 280rpx); height: calc(100vh - 280rpx);
padding: 20rpx;
} }
.stock-item { .stock-card {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: 20rpx;
padding: 30rpx; padding: 30rpx;
background: #fff; background: #fff;
border-radius: 12rpx; border-radius: 20rpx;
margin-bottom: 20rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
transition: all 0.3s;
}
.stock-card:active {
transform: scale(0.98);
}
.stock-left {
display: flex;
align-items: center;
flex: 1;
}
.product-icon {
width: 90rpx;
height: 90rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 44rpx;
margin-right: 20rpx;
} }
.stock-info { .stock-info {
@@ -163,8 +205,9 @@ export default {
.product-name { .product-name {
display: block; display: block;
font-size: 30rpx; font-size: 28rpx;
font-weight: 500; font-weight: bold;
color: #333;
margin-bottom: 8rpx; margin-bottom: 8rpx;
} }
@@ -173,57 +216,82 @@ export default {
color: #999; color: #999;
} }
.stock-num { .stock-right {
text-align: right; text-align: right;
} }
.stock-num {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.quantity { .quantity {
display: block; display: block;
font-size: 40rpx; font-size: 44rpx;
font-weight: bold; font-weight: bold;
color: #3cc51f; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.label { .label {
font-size: 24rpx; font-size: 22rpx;
color: #999; color: #999;
} }
.locked { .locked {
display: block; display: block;
font-size: 24rpx; font-size: 22rpx;
color: #ff9900; color: #fa8c16;
margin-top: 8rpx; margin-top: 8rpx;
} }
/* 空状态 */
.empty { .empty {
text-align: center;
padding: 100rpx; padding: 100rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.empty-icon {
font-size: 100rpx;
margin-bottom: 20rpx;
}
.empty-text {
font-size: 28rpx;
color: #999; color: #999;
} }
/* 底部操作 */
.bottom-action { .bottom-action {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
display: flex; display: flex;
padding: 20rpx; padding: 20rpx 30rpx;
background: #fff; background: #fff;
box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1); box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
} }
.action-btn { .action-btn {
flex: 1; flex: 1;
height: 80rpx; height: 88rpx;
line-height: 80rpx; line-height: 88rpx;
font-size: 30rpx; font-size: 30rpx;
border-radius: 44rpx;
margin: 0 10rpx; margin: 0 10rpx;
border-radius: 8rpx; background: #f5f5f5;
color: #333;
font-weight: 500;
} }
.action-btn.primary { .action-btn.primary {
background: #3cc51f; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff; color: #fff;
box-shadow: 0 8rpx 30rpx rgba(102, 126, 234, 0.4);
} }
</style> </style>