admin/qingcheng-xiaochengxu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

美化了样式

Browse Source
This commit is contained in:
chen-xin-zhi
2025-08-15 00:36:04 +08:00
parent 5fc1378051
commit 1b4d3e310b
63 changed files with 2735 additions and 2411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages/dashboardModule/userOrderPerformance/userOrderPerformance.js
View File

@ -1,4 +1,5 @@
import { baseUrl } from "../../../request";
const { notLogin } = require('../../../utils/util')
// pages/dashboardModule/userOrderPerformance/userOrderPerformance.js
Page({
@ -90,11 +91,8 @@ Page({
OrderItems: res.data.data
});
} else {
wx.showToast({
title: res.data.message || '未找到订单',
icon: 'none'
});
this.setData({ OrderItems: [] });
notLogin(res.data.message)
}
},
fail: () => {

111
pages/dashboardModule/userOrderPerformance/userOrderPerformance.wxml
View File

@ -1,93 +1,92 @@
<!-- pages/dashboardModule/userOrderPerformance/userOrderPerformance.wxml -->
<view class="flex-col page">
<text class="self-center text">客户订单明细</text>
<view class="page">
<!-- 标题 -->
<view class="page-title">
<text class="title">客户订单明细</text>
</view>
<view class="flex-col self-stretch mt-19">
<view class="flex-col section">
<view class="flex-col group">
<text class="self-start font text_2">订单号</text>
<view class="flex-col justify-start items-start self-stretch text-wrapper">
<scroll-view scroll-y class="content no-scrollbar">
<!-- 搜索表单 -->
<view class="card form-card">
<view class="field">
<text class="field-label">订单号</text>
<view class="input-box">
<input
class="text_3 font text_1"
class="input"
placeholder="请输入订单号"
value="{{orderNumber}}"
placeholder-class="ph"
value="{{ orderNumber }}"
type="number"
bindinput="onOrderNumberInput"
/>
</view>
</view>
<view
class="flex-col justify-start items-center text-wrapper_3"
bindtap="searchOrder"
>
<text class="font_2 text_7">搜索</text>
</view>
<view class="btn btn-primary" bindtap="searchOrder">搜索</view>
</view>
<view class="flex-col mt-35">
<!-- 有数据时渲染列表 -->
<block wx:if="{{OrderItems.length}}">
<!-- 结果列表 -->
<view class="result-wrap">
<!-- 有数据 -->
<block wx:if="{{ OrderItems.length }}">
<view
class="flex-col list-item mt-22"
wx:for="{{OrderItems}}"
wx:for="{{ OrderItems }}"
wx:for-item="item"
wx:for-index="index"
wx:key="id"
class="card order-card"
>
<view class="flex-row items-baseline" style="display: flex; justify-content: space-between;">
<text class="font_2 text_8">订单号：</text>
<text class="font_3">{{item.orderNumber}}</text>
<!-- 顶部：订单号 + 状态徽标 -->
<view class="topline">
<view class="row-left">
<text class="label">订单号</text>
<text class="mono">{{ item.orderNumber }}</text>
</view>
<view class="badge {{ item.orderStatus === '待支付' ? 'badge-pending' : (item.orderStatus === '已支付' || item.orderStatus === '交易成功' ? 'badge-success' : 'badge-default') }}">
<text class="badge-text">{{ item.orderStatus }}</text>
</view>
</view>
<view class="flex-row justify-between mt-19">
<text class="font_2 text_9">用户：</text>
<text class="font_4 text_10">{{item.nickName}}</text>
<!-- 键值对信息 -->
<view class="kv">
<text class="kv-key">用户</text>
<text class="kv-val">{{ item.nickName }}</text>
</view>
<view class="flex-row justify-between items-center mt-19">
<text class="font_2 text_11">手机号：</text>
<text class="font_3 text_12">{{item.phoneNumber}}</text>
<view class="kv">
<text class="kv-key">手机号</text>
<text class="kv-val">{{ item.phoneNumber }}</text>
</view>
<view class="flex-row justify-between items-center mt-19">
<text class="font_2 text_13">金额：</text>
<text class="font_3 text_24">￥{{item.totalAmount}}</text>
<view class="kv">
<text class="kv-key">金额</text>
<text class="kv-val money">￥{{ item.totalAmount }}</text>
</view>
<view class="flex-row justify-between items-center mt-19">
<text class="font_2 text_15">状态：</text>
<text class="font_4 text_16">{{item.orderStatus}}</text>
<view class="kv">
<text class="kv-key">抽成</text>
<text class="kv-val">主管：{{ item.firstRate * 100 }}%，员工：{{ item.secondRate * 100 }}%</text>
</view>
<view class="flex-row justify-between items-center mt-19">
<text class="font_2 text_17">抽成：</text>
<text class="font_4 text_18">主管：{{item.firstRate * 100}}%，员工：{{item.secondRate * 100}}%
</text>
<view class="kv">
<text class="kv-key">奖励</text>
<text class="kv-val">主管：¥{{ item.firstReward }}，员工：¥{{ item.secondReward }}</text>
</view>
<view class="flex-row justify-between items-center mt-19">
<text class="font_2 text_19">奖励：</text>
<text class="font_4 text_20">主管：¥{{item.firstReward}}，员工：¥{{item.secondReward}}
</text>
<view class="kv">
<text class="kv-key">提成状态</text>
<text class="kv-val">{{ item.commissionStatus }}</text>
</view>
<view class="flex-row justify-between mt-19">
<text class="font_2 text_21">提成状态：</text>
<text class="font_4 text_23">{{item.commissionStatus}}</text>
</view>
<!-- <view class="flex-row justify-between mt-19">
<text class="font_2 text_4">创建时间：</text>
<text class="font_3 text_5">{{item.createTime}}</text>
</view> -->
</view>
</block>
<!-- 无数据时提示 -->
<!-- 无数据 -->
<block wx:else>
<text class="self-center font text_4">暂无数据</text>
<view class="empty">
<image class="empty-img" src="/assets/empty-list.png" mode="aspectFit" />
<text class="empty-text">暂无数据</text>
</view>
</block>
</view>
</view>
</scroll-view>
</view>

273
pages/dashboardModule/userOrderPerformance/userOrderPerformance.wxss
View File

@ -1,176 +1,133 @@
.mt-19 {
margin-top: 35.63rpx;
}
.mt-35 {
margin-top: 65.63rpx;
}
/* ===== 页面与滚动 ===== */
.page {
padding: 70.84rpx 42.19rpx 152.81rpx 44.06rpx;
background-color: #fefbf6;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
width: 100%;
position: fixed;
bottom: 0;
overflow: auto;
height: calc(100vh - 1rpx);
background: #fefbf6; /* 与你项目的暖米黄保持一致 */
min-height: 100vh;
display: flex;
flex-direction: column;
}
.text {
color: #e67e22;
font-size: 45rpx;
font-family: SourceHanSansCN;
.page-title { padding: 24rpx 24rpx 0; }
.title {
color: #e67e22; /* 暖橙主色 */
font-size: 40rpx;
font-weight: 700;
line-height: 43.16rpx;
}
.section {
padding: 0 35.76rpx 47.94rpx 41.12rpx;
background-color: #ffffff;
border-radius: 18.75rpx;
border: solid 1.88rpx #ffeaa7;
.content {
flex: 1;
padding: 24rpx;
box-sizing: border-box;
}
.group {
padding: 47.87rpx 0 51.56rpx;
.no-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* ===== 卡片 ===== */
.card {
background: #ffffff;
border-radius: 18rpx;
padding: 24rpx;
border: 2rpx solid #ffeaa7; /* 浅橙描边，延续你原风格 */
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.05);
}
.text-wrapper {
margin-right: 3.77rpx;
margin-top: 14.55rpx;
padding: 17.66rpx 0 14.68rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
border: solid 1.88rpx #ffeaa7;
.card + .card { margin-top: 20rpx; }
/* ===== 表单 ===== */
.form-card .field + .field { margin-top: 20rpx; }
.field-label {
font-size: 28rpx;
color: #555555;
margin-bottom: 12rpx;
display: block;
}
.text_3 {
margin-left: 15.19rpx;
width: 500rpx;
.input-box {
height: 84rpx;
border-radius: 12rpx;
border: 2rpx solid #ffeaa7;
background: #ffffff;
padding: 0 20rpx;
display: flex;
align-items: center;
}
.font {
.input {
flex: 1;
font-size: 28rpx;
color: #1f1f1f;
}
.ph { color: #b8b8b8; }
.btn {
height: 88rpx;
border-radius: 999rpx;
margin-top: 24rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 28.54rpx;
color: #66666b;
font-weight: 600;
}
.text_2 {
margin-left: 2.44rpx;
line-height: 27.45rpx;
}
.text_1 {
line-height: 27.66rpx;
}
.text_4 {
margin-left: 4.31rpx;
margin-top: 36.64rpx;
line-height: 27.6rpx;
}
.group_2 {
margin-top: 16.39rpx;
}
.text-wrapper_2 {
padding: 19.13rpx 0 11.68rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
width: 258.75rpx;
height: 63.75rpx;
border: solid 1.88rpx #ffeaa7;
}
.text_5 {
margin-left: 17.01rpx;
line-height: 29.19rpx;
}
.text_6 {
margin-left: 20.42rpx;
margin-bottom: 26.04rpx;
color: #000000;
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 1.63rpx;
}
.view {
margin-left: 9.58rpx;
}
.text-wrapper_3 {
margin-left: 2.81rpx;
margin-right: 15.94rpx;
padding: 26.29rpx 0 21.02rpx;
background-color: #ffa400;
border-radius: 9.38rpx;
}
.font_2 {
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 28.54rpx;
color: #ffa500;
}
.text_7 {
.btn-primary {
background: linear-gradient(180deg, #ffa400 0%, #e67e22 100%);
color: #ffffff;
line-height: 27.69rpx;
box-shadow: 0 6rpx 14rpx rgba(230,126,34,0.30);
}
.list-item {
padding: 44.94rpx 7.14rpx 41.46rpx 29.68rpx;
background-color: #ffffff;
border-radius: 11.89rpx;
border: solid 1.88rpx #ffeaa7;
/* ===== 列表容器 ===== */
.result-wrap { margin-top: 20rpx; }
/* 顶部行：订单号 + 状态徽标 */
.topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16rpx;
margin-bottom: 6rpx;
}
.list-item:first-child {
margin-top: 0;
.row-left {
display: flex;
align-items: baseline;
gap: 12rpx;
flex-wrap: wrap;
}
.text_8 {
line-height: 27.66rpx;
.label { font-size: 26rpx; color: #666666; }
.mono { font-size: 28rpx; color: #1f1f1f; font-family: monospace; letter-spacing: 1rpx; }
.badge {
height: 40rpx;
padding: 0 16rpx;
border-radius: 999rpx;
display: inline-flex;
align-items: center;
justify-content: center;
}
.font_3 {
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 22.76rpx;
margin-right: 15rpx;
color: #444444;
.badge-text { font-size: 22rpx; font-weight: 600; }
.badge-pending{ background: #fff6e6; color: #ff8d1a; border: 1rpx solid #ffd6b3; }
.badge-success{ background: #e9fbef; color: #12b05b; border: 1rpx solid #b9f0cf; }
.badge-default{ background: #f0f0f0; color: #666666; border: 1rpx solid #e6e6e6; }
/* 键值行 */
.kv {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12rpx 0;
border-top: 1rpx dashed #f0f0f0;
}
.text_9 {
line-height: 28.24rpx;
.kv:first-of-type { border-top: 0; }
.kv-key { font-size: 26rpx; color: #666666; }
.kv-val {
font-size: 28rpx;
color: #1f1f1f;
text-align: right;
max-width: 70%;
word-break: break-all;
}
.font_4 {
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 28.54rpx;
color: #444444;
.money { color: #e67e22; font-weight: 700; }
/* 空状态 */
.empty {
padding: 120rpx 0 40rpx;
display: flex;
flex-direction: column;
align-items: center;
color: #999999;
}
.text_10 {
margin-right: 15rpx;
line-height: 27.84rpx;
}
.text_11 {
line-height: 27.81rpx;
}
.text_12 {
margin-right: 15rpx;
}
.text_13 {
line-height: 28.29rpx;
}
.text_24 {
margin-right: 15rpx;
}
.text_15 {
line-height: 28.01rpx;
}
.text_16 {
margin-right: 15rpx;
line-height: 28.09rpx;
}
.text_17 {
line-height: 28.16rpx;
}
.text_18 {
margin-right: 15rpx;
}
.text_19 {
line-height: 28.2rpx;
}
.text_20 {
margin-right: 15rpx;
}
.text_21 {
line-height: 28.31rpx;
}
.text_23 {
margin-right: 15rpx;
margin-bottom: 2.04rpx;
line-height: 27.79rpx;
}
.empty-img { width: 300rpx; height: 300rpx; margin-bottom: 16rpx; }
.empty-text { font-size: 26rpx; }