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