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

Compare commits

base: admin:d1b4fa8ca3846df8ce1997ec3fb65265605588c7
Branches Tags
admin:dev
admin:青橙1.0.0
...
compare: admin:dev
Branches Tags
admin:dev
admin:青橙1.0.0

20 Commits
d1b4fa8ca3 ... dev

Author SHA1 Message Date
chen-xin-zhi
a3ffe71ccb ------1.0.2----- 2025-08-15 15:34:05 +08:00
chen-xin-zhi
342e97d5d6 小程序1.0.2 2025-08-15 15:19:05 +08:00
chen-xin-zhi
e0684ec229 Merge remote-tracking branch 'origin/dev' into dev 
# Conflicts:
#	pages/dashboardModule/performanceRanking/performanceRanking.wxss
#	pages/personCenter/resetPwd/resetPwd.js
 2025-08-15 14:17:17 +08:00
chen-xin-zhi
f47e375bfa 美化了样式3.0 2025-08-15 14:15:10 +08:00
chen-xin-zhi
23ab2798d8 美化了样式2.0 2025-08-15 11:14:42 +08:00
chen-xin-zhi
1b4d3e310b 美化了样式 2025-08-15 00:36:04 +08:00
yuanteng
2b48faf50d Merge branch 'yt' into dev 2025-08-13 10:52:19 +08:00
yuanteng
fab8d88faf 小程序修改代码 2025-08-13 10:52:02 +08:00
chen-xin-zhi
5fc1378051 -------- 2025-08-12 19:36:03 +08:00
chen-xin-zhi
12480f3706 Merge remote-tracking branch 'origin/dev' into dev 2025-08-10 16:22:31 +08:00
chen-xin-zhi
05af3d221c 修复了验证码bug 2025-08-10 16:22:02 +08:00
yuanteng
f17226cc97 小程序修改代码 2025-08-10 11:43:30 +08:00
yuanteng
d5e4f0d7eb 小程序修改代码 2025-08-10 11:28:38 +08:00
chen-xin-zhi
d17f6f09c5 修复了验证码bug 2025-08-10 11:25:09 +08:00
chen-xin-zhi
8a085da7dc 修复了验证码bug 2025-08-09 22:30:47 +08:00
chen-xin-zhi
f871831cbc 修复了禅道的一系列bug 2025-08-09 01:21:59 +08:00
chen-xin-zhi
c1817b6255 模拟了微信支付功能 2025-08-08 19:21:04 +08:00
chen-xin-zhi
85df7bfc4e 添加了修改头像的功能 2025-08-08 13:48:37 +08:00
chen-xin-zhi
990f1850b1 加入了搜索功能 2025-08-07 20:18:00 +08:00
chen-xin-zhi
c7dd90f669 修改部分bug 2025-08-07 19:56:53 +08:00
116 changed files with 4839 additions and 3639 deletions
Expand all files Collapse all files

2
app.js
View File

@ -1,6 +1,6 @@
const { checkLogin } = require('./utils/logcheck'); const { checkLogin } = require('./utils/logcheck');
App({ App({
onLaunch: function () { onLaunch: function () {
// checkLogin()
} }
}); });

10
app.json
View File

@ -6,7 +6,6 @@
"pages/loginModule/agreement/agreement", "pages/loginModule/agreement/agreement",
"pages/loginModule/privacyPolicy/privacyPolicy", "pages/loginModule/privacyPolicy/privacyPolicy",
"pages/personCenter/subCommissionSetting/subCommissionSetting", "pages/personCenter/subCommissionSetting/subCommissionSetting",
"pages/test/testVideo/testVideo",
"pages/personCenter/withdrawal/withdrawal", "pages/personCenter/withdrawal/withdrawal",
"pages/personCenter/withdrawalAccount/withdrawalAccount", "pages/personCenter/withdrawalAccount/withdrawalAccount",
"pages/personCenter/accountSetting/accountSetting", "pages/personCenter/accountSetting/accountSetting",
@ -43,7 +42,8 @@
"pages/dashboardModule/supervisorPerformance/supervisorPerformance", "pages/dashboardModule/supervisorPerformance/supervisorPerformance",
"pages/dashboardModule/staffPerformance/staffPerformance", "pages/dashboardModule/staffPerformance/staffPerformance",
"pages/dashboardModule/userOrderPerformance/userOrderPerformance", "pages/dashboardModule/userOrderPerformance/userOrderPerformance",
"pages/dashboardModule/performanceRanking/performanceRanking" "pages/dashboardModule/performanceRanking/performanceRanking",
"pages/personCenter/component/modifyNamePop/modifyNamePop"
], ],
"window": { "window": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
@ -62,9 +62,9 @@
"list": [ "list": [
{ {
"pagePath": "pages/course/homepage/homepage", "pagePath": "pages/course/homepage/homepage",
"text": "课程", "text": "主页",
"iconPath": "/static/course.png", "iconPath": "/static/kc1.png",
"selectedIconPath": "/static/courseselected.png" "selectedIconPath": "/static/kc2.png"
}, },
{ {
"pagePath": "pages/personCenter/mine/mine", "pagePath": "pages/personCenter/mine/mine",

4
pages/course/courseDetail/courseDetail.js
View File

@ -1,5 +1,7 @@
import { baseUrl, globalImgUrl } from "../../../request"; import { baseUrl, globalImgUrl } from "../../../request";
import { decodeBase64 } from "../../../utils/decodebase64"; import { decodeBase64 } from "../../../utils/decodebase64";
const { notLogin } = require('../../../utils/util')
// pages/course/courseDetail/courseDetail.js // pages/course/courseDetail/courseDetail.js
Page({ Page({
@ -31,6 +33,8 @@ Page({
courseObj: res.data.data, courseObj: res.data.data,
richText: decodeBase64(res.data.data.detail) richText: decodeBase64(res.data.data.detail)
}) })
} else {
notLogin(res.data.message)
} }
} }
}) })

65
pages/course/courseDetail/courseDetail.wxml
View File

@ -1,36 +1,47 @@
<view class="flex-col page"> <!-- pages/course/courseDetail/courseDetail.wxml -->
<view class="flex-col"> <view class="page">
<view class="flex-col"> <!-- 滚动内容 -->
<image class="image" src="{{ globalImgUrl + courseObj.image }}" /> <scroll-view scroll-y class="content no-scrollbar">
<view class="flex-col section"> <!-- 顶部主图 -->
<view class="flex-row items-center group"> <view class="hero">
<view class="shrink-0 group_2"> <image class="hero-img" src="{{ globalImgUrl + courseObj.image }}" mode="aspectFill" lazy-load="true" />
<text class="text">{{ courseObj.discountPrice }}</text> </view>
<text class="font text_2">元券后价</text>
</view> <!-- 价格 + 标题 -->
<view class="ml-4 flex-col justify-start items-start shrink-0 relative group_3"> <view class="card">
<text class="font text_3">{{ courseObj.originPrice }}元</text> <view class="price-row">
<view class="divider pos"></view> <view class="price-now">
</view> <text class="price-num">{{ courseObj.discountPrice }}</text>
<text class="price-suffix">元券后价</text>
</view>
<view class="price-origin">
<text class="origin-text">{{ courseObj.originPrice }}元</text>
</view> </view>
<text class="group text_4 mt-9">{{ courseObj.name }}</text>
</view> </view>
<text class="title">{{ courseObj.name }}</text>
</view> </view>
<view class="mt-26 flex-col section_2">
<view class="flex-row items-center group_4"> <!-- 课程概述 -->
<image class="image_2" src="./image/cal.png" /> <view class="card">
<text class="ml-6 font text_5">课程概述</text> <view class="card-head">
<image class="head-icon" src="./image/cal.png" mode="aspectFit" />
<text class="head-text">课程概述</text>
</view> </view>
<rich-text class="section_3" nodes="{{ richText }}"></rich-text> <rich-text class="rt" nodes="{{ richText }}"></rich-text>
</view> </view>
</view>
<view class="flex-row justify-between items-center section_4 mt-37"> <!-- 占位，避免被底部栏遮挡 -->
<view class="flex-col items-center"> <view class="bottom-gap"></view>
<image class="image_3" src="./image/messge.png" /> </scroll-view>
<text class="text_7 mt-1">咨询</text>
<!-- 固定底部购买栏 -->
<view class="buy-bar">
<view class="buy-left">
<image class="consult-icon" src="./image/messge.png" mode="aspectFit" />
<text class="consult-text">咨询</text>
</view> </view>
<view class="flex-col justify-start items-center text-wrapper" bind:tap="gotoCourseOrder" data-id="{{ courseObj.id }}"> <view class="buy-btn" bindtap="gotoCourseOrder" data-id="{{ courseObj.id }}">
<text class="text_6">立即购买</text> <text class="buy-btn-text">立即购买</text>
</view> </view>
</view> </view>
</view> </view>

264
pages/course/courseDetail/courseDetail.wxss
View File

@ -1,130 +1,148 @@
.mt-9 { /* pages/course/courseDetail/courseDetail.wxss */
margin-top: 16.88rpx;
} /* ===== 页面骨架：整页固定、内容滚动、底部栏固定 ===== */
.mt-37 {
margin-top: 69.38rpx;
}
.mt-1 {
margin-top: 1.88rpx;
}
.page { .page {
background-color: #f6f7f9; height: 100vh;
padding-bottom: 100rpx; display: flex;
width: 100%; flex-direction: column;
overflow-y: auto; background: #f6f7f9;
overflow-x: hidden; overflow: auto; /* 禁止整页滚动 */
height: 100%; box-sizing: border-box;
} font-family: SourceHanSansCN, PingFang SC, Microsoft YaHei, system-ui, -apple-system, sans-serif;
.image {
width: 100vw;
height: 54.75vw;
}
.section {
padding: 37.5rpx 11.25rpx 30rpx 18.75rpx;
background-color: #ffffff;
}
.group {
padding: 0 3.75rpx;
}
.group_2 {
line-height: 28.8rpx;
height: 30.58rpx;
}
.text {
color: #f84947;
font-size: 37.5rpx;
font-family: SourceHanSansCN;
font-weight: 700;
line-height: 28.8rpx;
}
.group_3 {
margin-right: 453.75rpx;
width: 75.02rpx;
}
.divider {
background-color: #8c8c8c;
width: 75.02rpx;
height: 1.88rpx;
}
.pos {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.text_4 {
color: #000000;
font-size: 33.75rpx;
font-family: SourceHanSansCN;
line-height: 41.25rpx;
}
.section_2 {
padding: 0 30rpx 52.5rpx;
background-color: #ffffff;
}
.group_4 {
padding: 26.25rpx 0;
}
.image_2 {
width: 39.38rpx;
height: 39.38rpx;
}
.font {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 25.97rpx;
}
.text_3 {
width: 100rpx;
color: #8c8c8c;
line-height: 31.88rpx;
word-break: break-all;
}
.text_2 {
color: #f84947;
line-height: 24.43rpx;
}
.text_5 {
color: #000000;
font-size: 28.13rpx;
}
.section_3 {
height: 791.25rpx;
/* 以下是新增 */
white-space: normal; /* 允许换行 */
word-break: break-all; /* 在任意字符处断行，数字也会换行 */
}
.section_4 {
padding: 15rpx 26.25rpx;
background-color: #ffffff;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 999; /* 确保它在最上层 */
} }
.image_3 { /* 独立滚动内容区（隐藏滚动条） */
width: 52.5rpx; .content {
height: 52.5rpx; flex: 1;
-webkit-overflow-scrolling: touch;
} }
.text_7 { .no-scrollbar::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }
color: #000000; .no-scrollbar { scrollbar-width: none; }
font-size: 22.5rpx;
font-family: SourceHanSansCN; /* ===== 顶部主图（自适应圆角阴影） ===== */
line-height: 20.94rpx; .hero {
padding: 24rpx 24rpx 0;
box-sizing: border-box;
} }
.text-wrapper { .hero-img {
padding: 22.5rpx 0 18.75rpx; width: 100%;
background-color: #ff8d1a; height: 420rpx; /* 沉浸横幅高度 */
border-radius: 75rpx; border-radius: 20rpx;
width: 268.13rpx; object-fit: cover;
height: 71.25rpx; box-shadow: 0 12rpx 30rpx rgba(0,0,0,0.06);
} }
.text_6 {
color: #ffffff; /* ===== 通用卡片容器 ===== */
font-size: 30rpx; .card {
font-family: SourceHanSansCN; margin: 20rpx 24rpx 0;
line-height: 28.11rpx; padding: 22rpx;
border-radius: 20rpx;
background: #ffffff;
box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.05);
box-sizing: border-box;
}
/* ===== 价格区：券后价 + 原价 ===== */
.price-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.price-now { display: inline-flex; align-items: baseline; gap: 8rpx; }
.price-num {
font-size: 44rpx;
line-height: 1;
color: #ff6a00; /* 主题橙 */
font-weight: 700;
}
.price-suffix { font-size: 24rpx; color: #ff6a00; opacity: .9; }
.price-origin .origin-text { font-size: 24rpx; color: #9aa0a6; text-decoration: line-through; }
/* 课程标题 */
.title {
display: block;
margin-top: 14rpx;
font-size: 32rpx;
line-height: 46rpx;
color: #111;
font-weight: 600;
word-break: break-word;
}
/* ===== 概述标题行 ===== */
.card-head {
display: flex;
align-items: center;
gap: 12rpx;
margin-bottom: 12rpx;
}
.head-icon { width: 34rpx; height: 34rpx; }
.head-text { font-size: 28rpx; color: #111; font-weight: 600; }
/* rich-text 内容排版（图片适配） */
.rt {
font-size: 26rpx;
line-height: 42rpx;
color: #333;
white-space: normal;
word-break: break-word;
}
.rt p { margin: 8rpx 0; }
.rt img { max-width: 100%; height: auto !important; border-radius: 12rpx; }
/* 底部占位，避免被购买栏遮挡 */
.bottom-gap {
height: calc(env(safe-area-inset-bottom));
}
/* ===== 固定底部购买栏（含安全区） ===== */
.buy-bar {
position: sticky;
bottom: 0; left: 0; right: 0;
display: flex; align-items: center; justify-content: space-between;
gap: 20rpx;
padding: 12rpx 24rpx calc(12rpx + env(safe-area-inset-bottom));
background: #ffffff;
box-shadow: 0 -8rpx 20rpx rgba(0,0,0,0.06);
z-index: 10;
}
/* 左侧咨询 */
.buy-left {
display: inline-flex; align-items: center; gap: 10rpx;
padding: 12rpx 16rpx;
border-radius: 16rpx;
background: #f0f2f5;
}
.consult-icon { width: 36rpx; height: 36rpx; }
.consult-text { font-size: 24rpx; color: #333; }
/* 右侧按钮 */
.buy-btn {
flex: 1;
height: 72rpx;
border-radius: 9999rpx;
background: linear-gradient(90deg, #ff6a00, #ff8a2a);
box-shadow: 0 10rpx 24rpx rgba(255,106,0,0.26);
display: flex; align-items: center; justify-content: center;
}
.buy-btn-text {
font-size: 28rpx;
color: #fff;
font-weight: 700;
letter-spacing: 1rpx;
}
/* ===== 小的间距工具（保留你原有语义） ===== */
.mt-9 { margin-top: 16rpx; }
.mt-37 { margin-top: 68rpx; }
.mt-1 { margin-top: 2rpx; }
/* 你之前的 class 若仍在别处使用，可继续保留或删去：
.image, .section, .group, .group_2, .group_3, .divider, .pos, .text_4, .section_2, .group_4, .image_2, .font, .text_3, .text_2, .text_5, .section_3, .section_4, .image_3, .text_7, .text-wrapper, .text_6
当前新版未依赖它们。 */
::-webkit-scrollbar {
width: 0;
height: 0;
background: transparent;
} }

28
pages/course/courseList/courseList.js
View File

@ -1,4 +1,5 @@
import { baseUrl, globalImgUrl } from "../../../request"; import { baseUrl, globalImgUrl } from "../../../request";
const { notLogin } = require('../../../utils/util')
// pages/course/courseList/courseList.js // pages/course/courseList/courseList.js
Page({ Page({
@ -10,6 +11,8 @@ Page({
courseList:[], // 课程列表 courseList:[], // 课程列表
courseType: '', // 课程类别 courseType: '', // 课程类别
globalImgUrl, globalImgUrl,
tempCourseList: [],
searchKeyword: ''
}, },
// 跳转课程详情页面 // 跳转课程详情页面
@ -22,6 +25,23 @@ Page({
}) })
}, },
onSearchInput(e) {
const keyword = (e.detail.value || '').trim();
this.setData({ searchKeyword: keyword });
},
// 键盘“搜索/回车”触发：立即搜索
onSearch() {
const { tempCourseList } = this.data
const keyword = (this.data.searchKeyword || '').trim();
if (!keyword) {
this.setData({courseList: tempCourseList})
return;
}
// 模糊匹配 name
const filtered = this.data.courseList.filter(item => item.name.includes(keyword)
);
this.setData({ courseList: filtered });
},
/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
@ -48,13 +68,11 @@ Page({
console.log('课程列表',res.data.data); console.log('课程列表',res.data.data);
if (res.data.code === 1) { if (res.data.code === 1) {
this.setData({ this.setData({
courseList: res.data.data courseList: res.data.data,
tempCourseList: res.data.data
}); });
} else { } else {
wx.showToast({ notLogin(res.data.message)
icon: 'none',
title: res.data.message || '获取课程失败',
});
} }
}, },
fail: err => { fail: err => {

65
pages/course/courseList/courseList.wxml
View File

@ -1,39 +1,38 @@
<view class="flex-col page"> <!-- pages/course/searchCourses/searchCourses.wxml -->
<text class="self-center text">{{ courseType }}</text> <view class="page">
<image class="shrink-0 self-start image image_2" src="./image/line.png" />
<image class="shrink-0 self-end image image_3" src="./image/line.png" />
<view class="flex-col self-stretch list"> <!-- 顶部搜索条（固定） -->
<!-- 遍历接口返回的 items 数组 --> <view class="search-bar" hover-class="hover">
<view <image class="search-icon" src="./image/sousuo.png" mode="aspectFit"/>
class="flex-col list-item" <input
wx:for="{{courseList}}" class="search-input"
wx:for-item="item" placeholder="搜索更多好课"
wx:for-index="index" placeholder-class="search-ph"
wx:key="id" bindinput="onSearchInput"
> confirm-type="search"
<view bindconfirm="onSearch"
class="flex-row items-center relative group" />
bindtap="gotoCourseDetail" </view>
data-id="{{item.id}}"
> <!-- 搜索结果（独立滚动 & 隐藏滚动条） -->
<!-- 课程封面 --> <scroll-view scroll-y class="list no-scrollbar">
<image <block wx:for="{{courseList}}" wx:for-item="item" wx:key="item.id">
class="shrink-0 image_4" <view class="course-card" bindtap="gotoCourseDetail" data-id="{{item.id}}" hover-class="hover">
src="{{ globalImgUrl + item.image}}" <image class="cover" src="{{ globalImgUrl + item.image }}" mode="aspectFill" lazy-load="true"/>
mode="aspectFill" <view class="info">
/> <text class="title">{{item.name}}</text>
<view class="flex-col flex-1 ml-12"> <view class="meta">
<!-- 课程名称 --> <text class="price-pill">券后{{item.discountPrice}}元起</text>
<text class="font">{{item.name}}</text> <text class="people">{{item.orderCount}}人学习</text>
<view class="flex-row justify-between items-baseline mt-17">
<!-- 卷后价格 -->
<text class="font_2">券后{{item.discountPrice}}元起</text>
<!-- 已有下单人数 -->
<text class="font_3">{{item.orderCount}}人学习</text>
</view>
</view> </view>
</view> </view>
</view> </view>
</block>
<!-- 空状态（可选） -->
<view wx:if="{{!courseList || courseList.length === 0}}" class="empty">
<image class="empty-icon" src="/static/empty.png" mode="aspectFit"/>
<text class="empty-text">没找到相关课程，换个关键词试试～</text>
</view> </view>
</scroll-view>
</view> </view>

168
pages/course/courseList/courseList.wxss
View File

@ -1,63 +1,131 @@
/* pages/course/courseList/courseList.wxss */ /* pages/course/searchCourses/searchCourses.wxss */
.mt-17 {
margin-top: 31.88rpx; /* ===== 页面骨架：整页固定，列表单独滚动 ===== */
}
.page { .page {
/* padding: 38.53rpx 0 ; */ height: 100vh;
background-color: #ffffff; display: flex;
height: 100%; flex-direction: column;
width: 100%; background: #ffffff;
overflow-y: auto; overflow: hidden; /* 禁止整页滚动 */
overflow-x: hidden; box-sizing: border-box;
font-family: SourceHanSansCN, PingFang SC, Microsoft YaHei, system-ui, -apple-system, sans-serif;
} }
.text {
color: #000000; ::-webkit-scrollbar {
font-size: 30rpx; width: 0;
font-family: SourceHanSansCN; height: 0;
line-height: 27.64rpx; background: transparent;
} }
.image {
width: 255rpx;
height: 1.88rpx; /* 轻触反馈 */
.hover { opacity: .86; transition: opacity .18s ease; }
/* ===== 顶部搜索条（固定） ===== */
.search-bar {
padding: 24rpx 28rpx;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 16rpx;
background: #fff;
} }
.image_2 { .search-icon { width: 36rpx; height: 36rpx; opacity: .9; }
margin-left: 40.78rpx;
margin-top: -14.7rpx; /* 胶囊输入框 */
} .search-input {
.image_3 { flex: 1;
margin-right: 37.97rpx; height: 72rpx;
padding: 0 26rpx;
border-radius: 9999rpx;
background: #f5f6f7;
font-size: 26rpx;
color: #111;
line-height: 72rpx;
box-shadow: inset 0 0 0 1rpx rgba(0,0,0,.04);
} }
.search-ph { color: #a8a8a8; font-size: 26rpx; }
/* ===== 列表：占满剩余高度，单独滚动，隐藏滚动条 ===== */
.list { .list {
padding-top: 20.21rpx; flex: 1;
padding: 0 24rpx 28rpx;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
background: #fff;
} }
.list-item { .no-scrollbar::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }
height: 178.13rpx; .no-scrollbar { scrollbar-width: none; }
/* ===== 课程卡片（左图右文） ===== */
.course-card {
display: flex;
gap: 22rpx;
padding: 20rpx;
margin-top: 20rpx;
background: #ffffff;
border-radius: 20rpx;
border: 1rpx solid #f1f1f1;
box-shadow: 0 8rpx 24rpx rgba(0,0,0,.05);
} }
.group { .cover {
margin: -18.24rpx 29.46rpx 0 35.63rpx; width: 280rpx; /* 3:2 比例更舒服 */
padding: 57.19rpx 0 26.27rpx; height: 186rpx;
border-bottom: solid 1.88rpx #d6d6d6; flex: 0 0 280rpx;
border-radius: 14rpx;
object-fit: cover;
} }
.image_4 { .info {
border-radius: 9.38rpx; flex: 1;
width: 208.13rpx; min-width: 0; /* 防文字溢出 */
height: 133.13rpx; display: flex;
flex-direction: column;
justify-content: space-between;
} }
.font { .title {
font-size: 26.25rpx; font-size: 28rpx;
font-family: SourceHanSansCN; line-height: 40rpx;
line-height: 31.88rpx; color: #111;
color: #000000; font-weight: 600;
display: -webkit-box;
-webkit-line-clamp: 2; /* 两行省略 */
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
} }
.font_2 { .meta {
font-size: 26.25rpx; margin-top: 12rpx;
font-family: AlibabaPuHuiTi; display: flex;
line-height: 24.15rpx; align-items: baseline;
color: #ff5733; justify-content: space-between;
} }
.font_3 { .price-pill {
font-size: 22.5rpx; padding: 6rpx 14rpx;
font-family: AlibabaPuHuiTi; font-size: 24rpx;
line-height: 20.34rpx; color: #fff;
color: #a6a6a6; border-radius: 9999rpx;
background: linear-gradient(90deg, #ff6a00, #ff8a2a);
box-shadow: 0 6rpx 16rpx rgba(255,106,0,.22);
white-space: nowrap;
} }
.people {
font-size: 22rpx;
color: #9aa0a6;
white-space: nowrap;
}
/* ===== 空状态 ===== */
.empty {
padding: 120rpx 0 80rpx;
display: flex;
flex-direction: column;
align-items: center;
gap: 18rpx;
color: #9aa0a6;
}
.empty-icon { width: 240rpx; height: 240rpx; opacity: .7; }
.empty-text { font-size: 24rpx; line-height: 34rpx; }
/* ===== 兼容你项目里可能已有的工具类（可留可删） ===== */
.ml-3 { margin-left: 6rpx; }
.mt-17 { margin-top: 12rpx; }

BIN
pages/course/courseList/image/line.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 124 B

BIN
pages/course/courseList/image/sousuo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 812 B

73
pages/course/courseOrderList/courseOrderList.js
View File

@ -1,10 +1,12 @@
import { baseUrl } from "../../../request"; import { baseUrl } from "../../../request";
const { notLogin } = require('../../../utils/util')
// pages/course/courseOrderList/courseOrderList.js // pages/course/courseOrderList/courseOrderList.js
Page({ Page({
data: { data: {
orderList: [], // 后端返回的订单列表 orderList: [], // 后端返回的订单列表
hasModalShown: false, // 弹框只显示一次 hasModalShown: false, // 弹框只显示一次
isMaskVisible: false
}, },
onLoad(options) { onLoad(options) {
@ -35,7 +37,7 @@ Page({
let list = res.data.data.map(item => { let list = res.data.data.map(item => {
// 计算从 createTime 到 now 剩余秒数 // 计算从 createTime 到 now 剩余秒数
const createMs = new Date(item.createTime.replace(/-/g,'/')).getTime(); const createMs = new Date(item.createTime.replace(/-/g,'/')).getTime();
let diff = Math.floor((createMs + 30*60*1000 - now) / 1000); let diff = Math.floor((createMs + 15*60*1000 - now) / 1000);
// 只有“待支付”才需要倒计时、过期置“交易取消” // 只有“待支付”才需要倒计时、过期置“交易取消”
if (item.orderStatus === '待支付') { if (item.orderStatus === '待支付') {
@ -69,7 +71,7 @@ Page({
}); });
} else { } else {
wx.showToast({ title: res.data.message || '获取失败', icon: 'none' }); notLogin(res.data.message)
} }
}, },
fail: () => { fail: () => {
@ -80,6 +82,10 @@ Page({
// 每秒更新所有待支付订单的倒计时 // 每秒更新所有待支付订单的倒计时
startTimer() { startTimer() {
// ← 新增：如果已有定时器，先清掉它
if (this._timer) {
clearInterval(this._timer);
}
this._timer = setInterval(() => { this._timer = setInterval(() => {
const updated = this.data.orderList.map(item => { const updated = this.data.orderList.map(item => {
if (item.orderStatus === '待支付' && item.countDown > 0) { if (item.orderStatus === '待支付' && item.countDown > 0) {
@ -108,6 +114,62 @@ Page({
}, 1000); }, 1000);
}, },
showIsPayModal(e) {
const orderId = e.currentTarget.dataset.orderId;
wx.showModal({
title: '下单成功',
content: '您确定要支付吗？',
cancelText: '取消',
confirmText: '确定',
success: (res) => {
if (res.confirm) {
this.payOrder(orderId);
} else if (res.cancel) {
this.setData({ isMaskVisible: false });
}
},
fail: () => {
wx.hideLoading();
wx.showToast({
title: '网络错误，下单失败',
icon: 'none'
});
}
});
},
payOrder(orderId) {
// 同样先显示遮罩
this.setData({ isMaskVisible: true });
wx.showLoading({ title: '支付中...'});
wx.request({
url: baseUrl + '/courseOrder/payment',
method: 'POST',
header: { Authorization: wx.getStorageSync('token') },
data: { id: orderId},
success: res => {
wx.hideLoading();
if (res.data.code === 1) {
// 支付成功，跳转详情页
wx.redirectTo({
url: `/pages/course/orderDetail/orderDetail?id=${orderId}`,
success: res => {
// 先把遮罩关掉
this.setData({ isMaskVisible: false });
}
});
} else {
this.setData({ isMaskVisible: false });
wx.showToast({ title: res.data.message || '支付失败', icon: 'none' });
}
},
fail: () => {
wx.hideLoading();
this.setData({ isMaskVisible: false });
wx.showToast({ title: '网络错误，支付失败', icon: 'none' });
}
});
},
// 跳转订单详情 // 跳转订单详情
gotoOrderDetail(e) { gotoOrderDetail(e) {
const orderId = e.currentTarget.dataset.id; const orderId = e.currentTarget.dataset.id;
@ -135,11 +197,6 @@ Page({
} }
} }
}); });
}, }
// 支付订单
payOrder() {
// wx.navigateTo({ url: `/pages/pay/pay?orderId=${this.data.orderId}` });
wx.showToast({ title: '支付功能稍后开放', icon: 'none' });
},
}); });

77
pages/course/courseOrderList/courseOrderList.wxml
View File

@ -1,40 +1,55 @@
<!-- pages/course/courseOrderList/courseOrderList.wxml --> <!-- pages/course/courseOrderList/courseOrderList.wxml -->
<view class="flex-col justify-start page"> <view class="page">
<view class="flex-col group_1">
<view <!-- 列表滚动区 -->
class="flex-col list-item mt-17" <scroll-view scroll-y class="content no-scrollbar">
wx:for="{{orderList}}"
wx:for-item="item" <!-- 空状态（可选） -->
wx:for-index="index" <view wx:if="{{ !orderList || orderList.length === 0 }}" class="empty">
wx:key="item" <image class="empty-img" src="./image/empty.png" mode="aspectFit" />
bind:tap="gotoOrderDetail" <text class="empty-text">暂无订单</text>
data-id="{{ item.id }}" </view>
>
<view class="flex-row self-stretch group"> <!-- 订单卡片列表 -->
<text class="font text">订单号：{{item.orderNumber}}</text> <view wx:for="{{ orderList }}"
<text class="font_2 ml-37">{{ item.orderStatus }}</text> wx:for-item="item"
wx:for-index="index"
wx:key="item.id"
class="card order-item"
bind:tap="gotoOrderDetail"
data-id="{{ item.id }}">
<!-- 顶部：订单号 + 状态徽标 -->
<view class="topline">
<text class="order-no">订单号：{{ item.orderNumber }}</text>
<view class="status-badge {{ item.orderStatus === '待支付' ? 'status-pending' : (item.orderStatus === '已支付' || item.orderStatus === '交易成功' ? 'status-success' : 'status-default') }}">
<text class="status-text">{{ item.orderStatus }}</text>
</view> </view>
</view>
<text class="self-stretch font_3 text_2">{{ item.name }}</text> <!-- 课程名称 -->
<text class="self-end font_4 text_3">￥{{ item.totalAmount }}</text> <text class="course-name ellipsis-2">{{ item.name }}</text>
<!-- 倒计时，只在“待支付”时显示 --> <!-- 价格 + 倒计时（仅待支付显示） -->
<text wx:if="{{ item.orderStatus === '待支付' }}" class="self-end font_5 text_4"> <view class="price-line">
请在 {{ item.countDownStr }} 内完成支付 <text class="amount">￥{{ item.totalAmount }}</text>
</text> <view wx:if="{{ item.orderStatus === '待支付' }}" class="countdown-pill">
<text class="countdown-text">请在 {{ item.countDownStr }} 内完成支付</text>
</view>
</view>
<view class="flex-row justify-between items-center self-stretch group_2"> <!-- 底部：下单时间 + 操作按钮（仅待支付显示） -->
<text class="font_6 text_5">{{ item.createTime }}</text> <view class="bottomline">
<view class="flex-row"> <text class="ctime">{{ item.createTime }}</text>
<!-- 仅待支付时可操作 --> <view class="actions" wx:if="{{ item.orderStatus === '待支付' }}">
<view wx:if="{{ item.orderStatus === '待支付' }}" class="flex-col justify-start items-center text-wrapper" catch:tap="cancelOrder" data-id="{{ item.id }}"> <view class="btn btn-ghost" catch:tap="cancelOrder" data-id="{{ item.id }}">取消订单</view>
<text class="font_7">取消订单</text> <view class="btn btn-primary" catch:tap="showIsPayModal" data-order-id="{{ item.id }}">支付</view>
</view>
<view wx:if="{{ item.orderStatus === '待支付' }}" class="flex-col justify-start items-center text-wrapper_2 ml-11" catch:tap="payOrder">
<text class="font_8">支付</text>
</view>
</view>
</view> </view>
</view> </view>
</view> </view>
</scroll-view>
<!-- 遮罩 -->
<view wx:if="{{ isMaskVisible }}" class="page-mask"></view>
</view> </view>

248
pages/course/courseOrderList/courseOrderList.wxss
View File

@ -1,125 +1,169 @@
/* pages/course/courseOrderList/courseOrderList.wxss */ /* ===== 页面与滚动 ===== */
.mt-17 {
margin-top: 31.88rpx;
}
.ml-37 {
margin-left: 92.38rpx;
}
.ml-11 {
margin-left: 20.63rpx;
}
.page { .page {
padding: 26.25rpx 0 50.63rpx; background: #f7f7f7;
background-color: #f8f8f8; min-height: 100vh;
width: 100%; display: flex;
overflow-y: auto; flex-direction: column;
overflow-x: hidden;
height: 100%;
} }
.group_1 {
margin-left: 20.63rpx; .content {
margin-right: 18.77rpx; flex: 1;
padding: 24rpx 24rpx; /* 统一外边距 */
box-sizing: border-box;
} }
.list-item {
padding-left: 22.5rpx; .no-scrollbar::-webkit-scrollbar {
padding-right: 3.51rpx; width: 0;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040); height: 0;
background-color: #ffffff; display: none;
border-radius: 9.66rpx;
} }
.list-item:first-child {
margin-top: 0; /* 遮罩 */
.page-mask {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.35);
z-index: 9999;
} }
.group {
padding: 32.51rpx 0 25.82rpx; /* ===== 空状态 ===== */
border-bottom: solid 1.88rpx #e3e3e3; .empty {
padding: 100rpx 0;
display: flex;
flex-direction: column;
align-items: center;
color: #999999;
} }
.font { .empty-img { width: 280rpx; height: 280rpx; margin-bottom: 20rpx; }
font-size: 26.25rpx; .empty-text { font-size: 28rpx; }
font-family: SourceHanSansCN;
line-height: 24.17rpx; /* ===== 卡片通用 ===== */
color: #696969; .card {
background: #ffffff;
border-radius: 16rpx;
padding: 24rpx;
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.05);
} }
.text { .card + .card { margin-top: 20rpx; }
line-height: 24.02rpx;
/* ===== 列表项排版 ===== */
.order-item {
display: flex;
flex-direction: column;
gap: 16rpx;
} }
.font_2 {
font-size: 26.25rpx; /* 顶部行：订单号 + 状态 */
font-family: SourceHanSansCN; .topline {
line-height: 24.17rpx; display: flex;
color: #f84947; align-items: center;
justify-content: space-between;
gap: 16rpx;
} }
.font_3 { .order-no {
font-size: 26rpx;
color: #666666;
}
.status-badge {
height: 40rpx;
padding: 0 18rpx;
border-radius: 999rpx;
display: inline-flex;
align-items: center;
justify-content: center;
}
.status-text {
font-size: 24rpx;
font-weight: 600;
}
.status-pending { background: #fff6e6; color: #ff8d1a; } /* 待支付：主题橙 */
.status-success { background: #e9fbef; color: #12b05b; } /* 已/成功：绿色 */
.status-default { background: #f0f0f0; color: #666666; } /* 其他：灰 */
/* 课程名称 */
.course-name {
font-size: 30rpx; font-size: 30rpx;
font-family: SourceHanSansCN; font-weight: 600;
line-height: 35.63rpx; color: #1f1f1f;
color: #000000; line-height: 44rpx;
} }
.text_2 { .ellipsis-2 {
margin-top: 25.69rpx; display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} }
.font_4 {
font-size: 30rpx; /* 价格 + 倒计时 */
font-family: SourceHanSansCN; .price-line {
line-height: 24.17rpx; display: flex;
color: #3d3d3d; align-items: center;
justify-content: space-between;
gap: 16rpx;
} }
.text_3 { .amount {
margin-top: 58.09rpx; font-size: 34rpx;
line-height: 22.76rpx; color: #ff5a1a; /* 与你的小程序橙色系统一 */
margin-right: 22rpx; /* 向左移动：增加右侧间距 */ font-weight: 700;
} }
.font_5 {
font-size: 26.25rpx; .countdown-pill {
font-family: SourceHanSansCN; background: #fff4f2;
line-height: 26.32rpx; border: 1rpx solid #ffd6cc;
color: #f84947; padding: 0 16rpx;
height: 40rpx;
border-radius: 999rpx;
display: inline-flex;
align-items: center;
} }
.text_4 { .countdown-text {
margin-right: 7.13rpx; font-size: 22rpx;
margin-top: 34.91rpx; color: #ff5a1a;
font-size: 28.13rpx;
} }
.group_2 {
margin-right: 20.87rpx; /* 底部行：时间 + 操作区 */
margin-top: 30.30rpx; .bottomline {
padding: 15.94rpx 0 17.81rpx; display: flex;
border-top: solid 1.88rpx #e3e3e3; align-items: center;
justify-content: space-between;
gap: 16rpx;
padding-top: 8rpx;
border-top: 1rpx dashed #f0f0f0;
} }
.font_6 { .ctime {
font-size: 22.5rpx; font-size: 24rpx;
font-family: SourceHanSansCN; color: #888888;
line-height: 26.25rpx;
color: #a1a1a1;
} }
/* .text_5 {
width: 206.25rpx; .actions {
} */ display: flex;
.text-wrapper { align-items: center;
padding: 10.8rpx 0 8.16rpx; gap: 16rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
width: 142.5rpx;
height: 46.88rpx;
border: solid 1.88rpx #ff8d1a;
} }
.font_7 {
font-size: 26.25rpx; /* 按钮 */
font-family: SourceHanSansCN; .btn {
line-height: 24.17rpx; height: 64rpx;
color: #ff8d1a; min-width: 180rpx;
padding: 0 24rpx;
border-radius: 999rpx;
font-size: 26rpx;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
} }
.text-wrapper_2 { .btn-ghost {
padding: 11.89rpx 0 8.94rpx; background: #ffffff;
background-color: #ff8d1a; color: #333333;
border-radius: 9.38rpx; border: 2rpx solid #e6e6e6;
width: 140.63rpx;
height: 45rpx;
} }
.font_8 { .btn-primary {
font-size: 26.25rpx; background: linear-gradient(180deg, #ffa64a 0%, #ff8d1a 100%);
font-family: SourceHanSansCN;
line-height: 24.17rpx;
color: #ffffff; color: #ffffff;
box-shadow: 0 6rpx 14rpx rgba(255, 141, 26, 0.25);
} }
/* ===== 迁移提示：以下旧的散装类可删除（如无外部依赖） ===== */
/* .mt-17, .ml-37, .ml-11, .group_1, .list-item, .group, .font*, .text* 等 */

BIN
pages/course/courseOrderList/image/empty.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

133
pages/course/createCourseOrder/createCourseOrder.js
View File

@ -1,4 +1,7 @@
import { baseUrl, globalImgUrl } from "../../../request"; import { baseUrl, globalImgUrl } from "../../../request";
const { notLogin } = require('../../../utils/util')
import { decodeBase64 } from "../../../utils/decodebase64";
// pages/course/createCourseOrder/createCourseOrder.js // pages/course/createCourseOrder/createCourseOrder.js
Page({ Page({
@ -9,11 +12,29 @@ Page({
courseId: 0, // 课程id courseId: 0, // 课程id
courseObj: '', // 课程对象 courseObj: '', // 课程对象
globalImgUrl, // 全局图片 globalImgUrl, // 全局图片
isMaskVisible: false,
isNoticeVisible: true,
noticeHtml: '',
}, },
// 打开/关闭弹窗
openNotice() {
this.setData({ isNoticeVisible: true });
},
closeNotice() {
this.setData({ isNoticeVisible: false });
},
// 阻止冒泡/滚动穿透的空函数
noop() {},
// 创建订单方法 // 创建订单方法
createOrder() { createOrder() {
const { courseId } = this.data; const { courseId } = this.data;
// 1. 显示遮罩，阻止二次点击
this.setData({ isMaskVisible: true });
wx.showLoading({ title: '正在创建订单...' });
let orderId ; let orderId ;
wx.request({ wx.request({
url: baseUrl + '/courseOrder/add', url: baseUrl + '/courseOrder/add',
@ -25,16 +46,88 @@ Page({
Authorization :wx.getStorageSync('token'), Authorization :wx.getStorageSync('token'),
}, },
success : res => { success : res => {
console.log(res); orderId = res.data.data
this.setData({ this.setData({ orderId })
orderId: res.data.data wx.hideLoading();
}) if (res.data.code === 1) {
wx.navigateTo({ this.showIsPayModal(orderId)
url: `/pages/course/orderDetail/orderDetail?id=${this.data.orderId}`, } else {
}) // 下单失败，关闭遮罩
this.setData({ isMaskVisible: false });
wx.showModal({
title: '下单失败',
content: res.data.message || '下单失败',
showCancel: false,
confirmText: '知道了'
});
}
},
fail: () => {
wx.hideLoading();
this.setData({ isMaskVisible: false });
wx.showToast({ title: '网络错误，下单失败', icon: 'none' });
} }
}) })
},
showIsPayModal(orderId) {
wx.showModal({
title: '下单成功',
content: '您确定要支付吗？',
cancelText: '取消',
confirmText: '确定',
success: (res) => {
if (res.confirm) {
this.payOrder(orderId);
} else if (res.cancel) {
wx.navigateTo({
url: `/pages/course/orderDetail/orderDetail?id=${orderId}`,
success: res => {
// 先把遮罩关掉
this.setData({ isMaskVisible: false });
}
});
}
},
fail: () => {
wx.hideLoading();
wx.showToast({
title: '网络错误，下单失败',
icon: 'none'
});
}
});
},
payOrder(orderId) {
// 同样先显示遮罩
this.setData({ isMaskVisible: true });
wx.showLoading({ title: '支付中...'});
wx.request({
url: baseUrl + '/courseOrder/payment',
method: 'POST',
header: { Authorization: wx.getStorageSync('token') },
data: { id: orderId },
success: res => {
wx.hideLoading();
if (res.data.code === 1) {
// 支付成功，跳转详情页
wx.navigateTo({
url: `/pages/course/orderDetail/orderDetail?id=${orderId}`,
success: res => {
// 先把遮罩关掉
this.setData({ isMaskVisible: false });
}
});
} else {
this.setData({ isMaskVisible: false });
wx.showToast({ title: res.data.message || '支付失败', icon: 'none' });
}
},
fail: () => {
wx.hideLoading();
this.setData({ isMaskVisible: false });
wx.showToast({ title: '网络错误，支付失败', icon: 'none' });
}
});
}, },
// 获取课程详情 // 获取课程详情
@ -55,7 +148,30 @@ Page({
this.setData({ this.setData({
courseObj: res.data.data, courseObj: res.data.data,
}) })
} else {
notLogin(res.data.message)
} }
},
fail: () => {
wx.showToast({ title: '网络错误', icon: 'none' });
}
})
},
getCourseDesc() {
wx.request({
url: baseUrl + '/userInfo/query/courseDesc',
method: 'POST',
success: res => {
console.log('====>购买须知', res.data)
if (res.data.code === 1) {
this.setData({noticeHtml: decodeBase64(res.data.data)})
} else {
notLogin(res.data.message)
}
},
fail: () => {
wx.showToast({ title: '网络错误', icon: 'none' });
} }
}) })
}, },
@ -69,6 +185,7 @@ Page({
courseId: options.id, courseId: options.id,
}) })
this.getCourseDetail() this.getCourseDetail()
this.getCourseDesc()
}, },
/** /**

93
pages/course/createCourseOrder/createCourseOrder.wxml
View File

@ -1,46 +1,77 @@
<!-- pages/course/createCourseOrder/createCourseOrder.wxml --> <!-- pages/course/createCourseOrder/createCourseOrder.wxml -->
<view class="flex-col page"> <view class="page">
<view class="flex-col content">
<view class="flex-row items-center section"> <!-- 可滚动内容区：为固定底部预留内边距，避免遮挡 -->
<scroll-view scroll-y class="content no-scrollbar">
<!-- 商品信息卡片 -->
<view class="card product">
<image <image
class="shrink-0 image" class="cover"
src="{{ globalImgUrl + courseObj.image }}" src="{{ globalImgUrl + courseObj.image }}"
mode="aspectFill"
lazy-load="true"
/> />
<view class="flex-col flex-1 ml-11"> <view class="info">
<text class="self-start text">{{ courseObj.name }}</text> <text class="title ellipsis-2">{{ courseObj.name }}</text>
<view class="flex-row items-center self-stretch group mt-15"> <view class="price-line">
<text class="text_2">￥{{ courseObj.discountPrice }}</text> <text class="price-now">￥{{ courseObj.discountPrice }}</text>
<view class="flex-col justify-start relative ml-1"> <text class="price-origin">￥{{ courseObj.originPrice }}</text>
<text class="text_3">￥{{ courseObj.originPrice }}</text>
<view class="divider pos"></view>
</view>
</view> </view>
</view> </view>
</view> </view>
<view class="flex-row justify-between items-center section_2 mt-14">
<text class="font">商品价格</text> <!-- 商品价格行 -->
<text class="font text_4">￥{{ courseObj.discountPrice }}</text> <view class="card row">
<text class="row-left">商品价格</text>
<text class="row-right accent">￥{{ courseObj.discountPrice }}</text>
</view> </view>
<view class="flex-row justify-between items-center section_3 mt-14">
<view class="flex-row items-center"> <!-- 支付方式 -->
<image <view class="card pay">
class="shrink-0 image_2" <view class="pay-left">
src="./image/wxpay.png" <image class="pay-icon" src="./image/wxpay.png" mode="aspectFit" />
/> <text class="pay-text">微信支付</text>
<text class="font ml-12">微信支付</text>
</view> </view>
<radio-group class="image_3"> <radio-group class="pay-right" bindchange="onPayMethodChange">
<radio checked="true"></radio> <radio value="wxpay" checked></radio>
</radio-group> </radio-group>
</view> </view>
</view>
<!-- 固定在底部的区域 --> </scroll-view>
<!-- 固定底部结算栏 -->
<view class="footer"> <view class="footer">
<view class="flex-row justify-between items-center section_4"> <view class="footer-inner">
<text class="font text_5">应付￥{{ courseObj.discountPrice }}</text> <text class="to-pay">应付 <text class="to-pay-amount">￥{{ courseObj.discountPrice }}</text></text>
<view class="flex-col justify-center items-center text-wrapper" bind:tap="createOrder"> <view class="btn-pay" bindtap="createOrder">立即支付</view>
<text class="font text_6">立即支付</text> </view>
</view> </view>
<!-- 遮罩 -->
<view wx:if="{{isMaskVisible}}" class="page-mask"></view>
</view>
<!-- ===== 购买须知弹窗（富文本） ===== -->
<view wx:if="{{isNoticeVisible}}" class="modal-mask" catchtouchmove="noop">
<view class="modal" catchtap="noop">
<view class="modal-title">课程购买须知</view>
<!-- 富文本内容：支持 p/h1-h6/strong/em/ul/ol/a 等常见标签 -->
<scroll-view scroll-y class="modal-body">
<rich-text nodes="{{noticeHtml}}"></rich-text>
</scroll-view>
<view class="modal-actions">
<button class="btn-primary" bindtap="closeNotice">我知道了</button>
</view> </view>
</view> </view>
</view> </view>
<!-- 右上角购买须知按钮 -->
<view class="notice-icon" bindtap="openNotice">
<image src="./image/info.png" mode="aspectFit" class="notice-icon-img" />
<text class="notice-icon-text">购买须知</text>
</view>

408
pages/course/createCourseOrder/createCourseOrder.wxss
View File

@ -1,118 +1,320 @@
.ml-11 { /* 页面与滚动容器 */
margin-left: 20.63rpx;
}
.mt-15 {
margin-top: 28.13rpx;
}
.ml-1 {
margin-left: 1.88rpx;
}
.page { .page {
background-color: #f7f7f7; background-color: #f7f7f7;
width: 100%; width: 100%;
height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.content { .content {
flex: 1; flex: 1;
overflow-y: auto; padding: 24rpx 24rpx 160rpx; /* bottom 预留给固定底部栏 */
} box-sizing: border-box;
.section {
padding: 20.63rpx 22.5rpx 27.58rpx;
background-color: #ffffff;
border-radius: 3.94rpx;
}
.image {
border-radius: 9.38rpx;
width: 208.13rpx;
height: 133.13rpx;
}
.text {
color: #000000;
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 35.63rpx;
width: 429.38rpx;
}
.group {
padding: 0 4.29rpx;
}
.text_2 {
color: #f84947;
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 22.76rpx;
}
.text_3 {
color: #8c8c8c;
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 19.93rpx;
}
.divider {
background-color: #8c8c8c;
width: 69.56rpx;
height: 1.88rpx;
}
.pos {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.section_2 {
padding: 48.69rpx 29.21rpx 43.35rpx 44.96rpx;
background-color: #ffffff;
}
.font {
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 27.96rpx;
color: #323232;
}
.text_4 {
line-height: 22.91rpx;
}
.section_3 {
padding: 39.38rpx 46.88rpx 897.38rpx 48.75rpx;
background-color: #ffffff;
}
.image_2 {
width: 52.5rpx;
height: 52.5rpx;
}
.image_3 {
width: 41.25rpx;
height: 41.25rpx;
}
.section_4 {
padding: 16.88rpx 24.38rpx 16.88rpx 31.09rpx;
background-color: #ffffff;
}
.text_5 {
color: #000000;
line-height: 28.05rpx;
}
.text-wrapper {
padding: 14.07rpx 0 19.07rpx;
background-color: #ff8d1a;
border-radius: 75rpx;
width: 268.13rpx;
height: 71.25rpx;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
} }
.text_6 { .no-scrollbar::-webkit-scrollbar {
color: #ffffff; width: 0;
line-height: 28.11rpx; height: 0;
display: none;
} }
/* 通用卡片 */
.card {
background-color: #ffffff;
border-radius: 16rpx;
padding: 24rpx;
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.04);
}
.card + .card {
margin-top: 20rpx;
}
/* 商品信息卡片 */
.product {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 20rpx;
}
.cover {
width: 260rpx;
height: 180rpx;
border-radius: 12rpx;
flex-shrink: 0;
background: #f2f2f2;
}
.info {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
min-width: 0; /* 使多行省略生效 */
}
.title {
font-size: 32rpx;
font-weight: 600;
color: #1f1f1f;
line-height: 48rpx;
}
.ellipsis-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.price-line {
display: flex;
align-items: baseline;
gap: 12rpx;
margin-top: 8rpx;
}
.price-now {
font-size: 36rpx;
font-weight: 700;
color: #ff5a1a; /* 与主题橙统一 */
line-height: 1;
}
.price-origin {
font-size: 26rpx;
color: #9f9f9f;
text-decoration: line-through; /* 用样式处理中划线 */
}
/* 通用行（键值对） */
.row {
display: flex;
align-items: center;
justify-content: space-between;
}
.row-left {
font-size: 30rpx;
color: #4a4a4a;
}
.row-right {
font-size: 30rpx;
color: #1f1f1f;
}
.accent {
color: #ff5a1a;
font-weight: 600;
}
/* 支付方式 */
.pay {
display: flex;
align-items: center;
justify-content: space-between;
}
.pay-left {
display: flex;
align-items: center;
gap: 16rpx;
}
.pay-icon {
width: 56rpx;
height: 56rpx;
border-radius: 8rpx;
}
.pay-text {
font-size: 30rpx;
color: #333333;
}
.pay-right {
display: flex;
align-items: center;
}
/* 固定底部 */
.footer { .footer {
margin-top: auto;
width: 100%;
position: fixed; position: fixed;
bottom: 0;
left: 0; left: 0;
right: 0;
bottom: 0;
background: #ffffff;
box-shadow: 0 -6rpx 20rpx rgba(0,0,0,0.06);
padding-bottom: env(safe-area-inset-bottom);
/* 兼容旧版 iOS */
padding-bottom: constant(safe-area-inset-bottom);
} }
.footer-inner {
height: 120rpx;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24rpx;
padding: 0 24rpx;
box-sizing: border-box;
}
.to-pay {
font-size: 28rpx;
color: #666666;
}
.to-pay-amount {
font-size: 36rpx;
color: #ff5a1a;
font-weight: 700;
margin-left: 8rpx;
}
/* 支付按钮：使用 view，自定义橙色主题 */
.btn-pay {
min-width: 260rpx;
height: 88rpx;
border-radius: 999rpx;
background: linear-gradient(180deg, #ffa64a 0%, #ff8d1a 100%);
color: #ffffff;
font-size: 30rpx;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6rpx 14rpx rgba(255, 141, 26, 0.35);
active-opacity: 0.85;
}
/* 遮罩层 */
.page-mask {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.35);
z-index: 9999;
}
/* 旧样式中可能用到的零散类，若无依赖可移除 */
.ml-11 { margin-left: 20rpx; }
.mt-15 { margin-top: 28rpx; }
.ml-1 { margin-left: 2rpx; }
/* 入口小字 */
.notice-entry {
margin-right: 16rpx;
font-size: 24rpx;
color: #8a8a8a;
text-decoration: underline;
}
/* 弹窗遮罩 */
.modal-mask {
position: fixed;
z-index: 999; /* 确保在你的 .footer 与其他遮罩之上 */
inset: 0;
background: rgba(0,0,0,0.45);
display: flex;
justify-content: center;
align-items: center;
padding: 40rpx;
}
/* 弹窗容器 */
.modal {
width: 86%;
max-width: 640rpx;
max-height: 70vh;
background: #fff;
border-radius: 24rpx;
overflow: hidden;
box-shadow: 0 12rpx 40rpx rgba(0,0,0,0.18);
}
/* 标题 */
.modal-title {
padding: 28rpx 32rpx 12rpx;
font-size: 32rpx;
font-weight: 600;
color: #222;
}
/* 内容区滚动 */
.modal-body {
max-height: 48vh;
padding: 8rpx 32rpx 24rpx;
}
rich-text {
padding-bottom: 32rpx;
}
/* 富文本默认样式优化 */
.modal-body rich-text {
display: block;
font-size: 26rpx;
line-height: 1.75;
color: #444;
}
.modal-body h3 { font-size: 28rpx; margin: 18rpx 0 8rpx; color: #222; }
.modal-body p { margin: 10rpx 0; }
.modal-body ul, .modal-body ol { margin: 10rpx 0 10rpx 28rpx; }
.modal-body a { color: #1677ff; word-break: break-all; }
/* 底部按钮区 */
.modal-actions {
padding: 20rpx 24rpx 28rpx;
}
.btn-primary {
width: 100%;
height: 84rpx;
line-height: 84rpx;
text-align: center;
border-radius: 16rpx;
background: #ff8a00; /* 你的主色调（可换成项目变量） */
color: #fff;
font-size: 30rpx;
font-weight: 600;
}
.btn-primary:active {
opacity: 0.85;
}
.notice-icon {
position: absolute;
top: 20rpx;
right: 20rpx;
z-index: 10;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.92);
border-radius: 30rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
padding: 6rpx 14rpx;
}
.notice-icon-img {
width: 34rpx;
height: 34rpx;
margin-right: 8rpx;
}
.notice-icon-text {
font-size: 24rpx;
color: #333;
}
.notice-icon:active {
opacity: 0.85;
}
::-webkit-scrollbar {
width: 0;
height: 0;
background: transparent;
}

BIN
pages/course/createCourseOrder/image/info.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

43
pages/course/homepage/homepage.js
View File

@ -1,18 +1,13 @@
import { baseUrl } from "../../../request"; import { baseUrl } from "../../../request";
const { globalImgUrl } = require("../../../request") const { globalImgUrl } = require("../../../request")
const { notLogin } = require('../../../utils/util')
// pages/course/homepage/homepage.js // pages/course/homepage/homepage.js
Page({ Page({
data: { data: {
// 初始时置空，待接口返回后再渲染
banners: [
'./image/banner.png',
'./image/banner.png',
'./image/banner.png',
'./image/banner.png'
],
courseList: [], courseList: [],
bannerList: [],
globalImgUrl globalImgUrl
}, },
@ -57,10 +52,7 @@ Page({
courseList: res.data.data courseList: res.data.data
}); });
} else { } else {
wx.showToast({ notLogin(res.data.message)
title: res.data.message || '获取课程数据失败',
icon: 'none'
});
} }
}, },
fail: () => { fail: () => {
@ -72,10 +64,37 @@ Page({
}); });
}, },
getBannerList() {
const token = wx.getStorageSync('token')
wx.request({
url: baseUrl + '/banner/mini/list',
method: 'GET',
header: {
'Authorization': token
},
success: res => {
if (res.data.code === 1) {
this.setData({
bannerList: res.data.data
});
} else {
notLogin(res.data.message)
}
},
fail: () => {
wx.showToast({
title: '网络异常，请稍后重试',
icon: 'none'
});
}
})
},
/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad(options) { onLoad() {
this.getBannerList()
this.getCourseList() this.getCourseList()
}, },

100
pages/course/homepage/homepage.wxml
View File

@ -1,50 +1,64 @@
<view class="flex-col page"> <view class="page">
<view class="flex-col self-stretch group">
<view class="flex-row justify-center items-center section" bind:tap="gotoSearch"> <!-- 顶部内容：搜索 + 轮播 -->
<image class="image" src="./image/sousuo.png" /> <view class="top">
<text class="text ml-3">搜索更多好课</text> <view class="search-bar" bindtap="gotoSearch" hover-class="hover">
</view> <image class="search-icon" src="./image/sousuo.png" mode="aspectFit"/>
<swiper class="swiper" autoplay="true" circular="true" interval="3000" circular="true"> <text class="search-text">搜索更多好课</text>
<block wx:for="{{banners}}" wx:for-item="img" wx:key="index">
<swiper-item>
<image src="{{img}}" class="swiper-image" mode="aspectFill" />
</swiper-item>
</block>
</swiper>
</view> </view>
<view class="flex-row equal-division">
<view class="flex-col items-center group_2 group_1" bind:tap="gotoCourseList" data-type="{{ '考研' }}"> <swiper class="swiper" autoplay="true" interval="3000" circular="true" indicator-dots="true" indicator-active-color="#ff6a00">
<image class="image_3" src="./image/kgky.png" /> <block wx:for="{{bannerList}}" wx:for-item="img" wx:key="index">
<text class="font text_1 mt-12">考研</text> <swiper-item>
</view> <image src="{{globalImgUrl + img}}" class="swiper-image" mode="aspectFill" lazy-load="true"/>
<view class="flex-col items-center group_2 group_3" bind:tap="gotoCourseList" data-type="{{ '考公' }}"> </swiper-item>
<image class="image_3" src="./image/zmt.png" /> </block>
<text class="font text_3 mt-12">考公</text> </swiper>
</view> </view>
<view class="flex-col items-center group_2 group_4" bind:tap="gotoCourseList" data-type="{{ '考证' }}">
<image class="image_3" src="./image/cj.png" /> <!-- 三分类 -->
<text class="font text_4 mt-12">考证</text> <view class="category-row">
</view> <view class="category-card" bindtap="gotoCourseList" data-type="考编" hover-class="hover">
<image class="category-icon" src="./image/考编.png" mode="aspectFit" lazy-load="true"/>
<text class="category-text">考编</text>
</view> </view>
<text class="self-start text_2">热门课程</text> <view class="category-card" bindtap="gotoCourseList" data-type="考公" hover-class="hover">
<view class="flex-col self-stretch list"> <image class="category-icon" src="./image/考公.png" mode="aspectFit" lazy-load="true"/>
<!-- items 数组循环 --> <text class="category-text">考公</text>
<view class="flex-row relative group_5" wx:for="{{courseList}}" wx:for-item="item" wx:for-index="index" wx:key="item.id"> </view>
<view bind:tap="gotoCourseDetail" data-id="{{item.id}}"> <view class="category-card" bindtap="gotoCourseList" data-type="考证" hover-class="hover">
<view class="list-divider pos_3"></view> <image class="category-icon" src="./image/考证.png" mode="aspectFit" lazy-load="true"/>
<!-- 绑定课程封面图 --> <text class="category-text">考证</text>
<image class="image_4 pos" src="{{ globalImgUrl + item.image}}" /> </view>
<view class="flex-col group_6 pos_2"> </view>
<!-- 绑定课程名称 -->
<text class="font_2">{{item.name}}</text> <!-- 热门课程标题 -->
<view class="flex-row justify-between items-baseline mt-17"> <view class="section-head">
<!-- 绑定卷后价格 --> <text class="section-title">热门课程</text>
<text class="font_3">券后{{item.discountPrice}}元起</text> </view>
<!-- 绑定下单/学习人数 -->
<text class="font_4">{{item.orderCount}}人学习</text> <!-- 热门课程两列宫格 -->
<scroll-view scroll-y class="list no-scrollbar">
<view class="grid">
<block wx:for="{{courseList}}" wx:key="item.id" wx:for-item="item">
<view class="grid-item" bindtap="gotoCourseDetail" data-id="{{item.id}}" hover-class="hover">
<image class="grid-cover" src="{{ globalImgUrl + item.image }}" mode="aspectFill" lazy-load="true"/>
<view class="grid-info">
<text class="grid-title">{{item.name}}</text>
<view class="grid-meta">
<text class="grid-price">¥{{item.discountPrice}}</text>
<text class="grid-people">{{item.orderCount}}人学习</text>
</view> </view>
</view> </view>
</view> </view>
</view> </block>
</view> </view>
<!-- 空状态 -->
<view wx:if="{{!courseList || courseList.length == 0}}" class="empty">
<image class="empty-icon" src="/static/empty.png" mode="aspectFit"/>
<text class="empty-text">暂无课程，去看看其他分类吧～</text>
</view>
</scroll-view>
</view> </view>

243
pages/course/homepage/homepage.wxss
View File

@ -1,142 +1,115 @@
.ml-3 {
margin-left: 5.63rpx;
}
.mt-17 {
margin-top: 31.88rpx;
}
.page { .page {
padding: 0rpx 0 10.88rpx; height: 100vh;
background-color: #ffffff; display: flex;
width: 100%; flex-direction: column;
overflow-y: auto; background: #ffffff;
overflow-x: hidden; overflow: hidden;
height: 100%; font-family: SourceHanSansCN, PingFang SC, Microsoft YaHei, system-ui, -apple-system, sans-serif;
} }
.group { .hover { opacity: 0.8; transition: opacity .2s ease; }
padding-left: 30rpx;
padding-right: 28.13rpx; ::-webkit-scrollbar {
width: 0;
height: 0;
background: transparent;
} }
.section {
padding: 11.25rpx 0;
background-color: #f2f2f2; /* 顶部 */
border-radius: 93.75rpx; .top { padding: 30rpx; }
} .search-bar {
.image { display: flex; align-items: center; gap: 14rpx;
width: 35.63rpx; padding: 18rpx 22rpx; border-radius: 9999rpx;
height: 35.63rpx; background: #f5f6f7;
}
.text {
color: #a8a8a8;
font-size: 22.5rpx;
font-family: SourceHanSerifCN;
line-height: 20.83rpx;
}
.equal-division {
align-self: stretch;
margin: 21.88rpx 31.46rpx 0 29.48rpx;
}
.group_2 {
flex: 1 1 229.69rpx;
}
.group_1 {
padding: 13.56rpx 0 9.99rpx;
}
.image_3 {
width: 96rpx;
height: 96rpx;
}
.font {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 24.15rpx;
color: #000000;
}
.text_1 {
line-height: 24.26rpx;
}
.group_3 {
padding: 13.56rpx 0 10.09rpx;
}
.text_3 {
line-height: 24.23rpx;
}
.group_4 {
padding: 13.56rpx 0 10.13rpx;
}
.text_4 {
line-height: 24.13rpx;
}
.text_2 {
margin-left: 35.04rpx;
margin-top: 38.16rpx;
color: #000000;
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 27.75rpx;
}
.list {
margin-top: 9.56rpx;
}
.group_5 {
padding: 18.75rpx 29.46rpx 0 35.63rpx;
height: 180rpx;
}
.list-divider {
background-color: #d6d6d6;
height: 1.88rpx;
}
.pos_3 {
position: absolute;
left: 35.63rpx;
right: 33.81rpx;
top: 178.13rpx;
}
.image_4 {
border-radius: 9.38rpx;
width: 208.13rpx;
height: 133.13rpx;
}
.pos {
position: absolute;
left: 35.63rpx;
top: 50%;
transform: translateY(-50%);
}
.group_6 {
width: 453.49rpx;
}
.pos_2 {
position: absolute;
right: 29.46rpx;
top: 50%;
transform: translateY(-50%);
}
.font_2 {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 31.88rpx;
color: #000000;
}
.font_3 {
font-size: 26.25rpx;
font-family: AlibabaPuHuiTi;
line-height: 24.15rpx;
color: #ff5733;
}
.font_4 {
font-size: 22.5rpx;
font-family: AlibabaPuHuiTi;
line-height: 20.34rpx;
color: #a6a6a6;
} }
.search-icon { width: 36rpx; height: 36rpx; }
.search-text { font-size: 26rpx; color: #a8a8a8; }
.swiper { .swiper {
border-radius: 9.38rpx; width: 100%; height: 324rpx; margin-top: 24rpx;
width: 691.88rpx; border-radius: 16rpx; overflow: hidden;
height: 324.38rpx;
margin-top: 22.5rpx;
} }
/* 轮播图图片 */ .swiper-image { width: 100%; height: 100%; }
.swiper-image {
width: 100%; /* 分类 */
height: 100%; .category-row {
display: flex; gap: 24rpx; padding: 0 30rpx; margin-top: 22rpx;
} }
.category-card {
flex: 1; background: #fff; border-radius: 20rpx;
padding: 22rpx 0 18rpx;
display: flex; flex-direction: column; align-items: center; gap: 12rpx;
box-shadow: 0 6rpx 24rpx rgba(0,0,0,0.06);
}
.category-icon { width: 96rpx; height: 96rpx; }
.category-text { font-size: 26rpx; color: #111; }
/* 标题 */
.section-head { padding: 28rpx 30rpx 16rpx; }
.section-title { font-size: 30rpx; font-weight: 600; }
/* 列表（滚动） */
.list {
flex: 1;
padding: 0 20rpx 20rpx;
-webkit-overflow-scrolling: touch;
overflow: auto;
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
/* 宫格布局 */
.grid {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
}
.grid-item {
width: 345rpx;
background: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
}
.grid-cover {
width: 100%; height: 200rpx;
object-fit: cover;
}
.grid-info {
padding: 14rpx;
display: flex;
flex-direction: column;
gap: 6rpx;
}
.grid-title {
font-size: 26rpx;
color: #111;
line-height: 36rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.grid-meta {
display: flex; justify-content: space-between; align-items: center;
}
.grid-price {
font-size: 26rpx;
font-weight: 600;
color: #ff6a00;
}
.grid-people {
font-size: 22rpx;
color: #9aa0a6;
}
/* 空状态 */
.empty {
padding: 80rpx 0 60rpx;
display: flex; flex-direction: column; align-items: center; gap: 18rpx;
color: #9aa0a6;
}
.empty-icon { width: 220rpx; height: 220rpx; opacity: 0.7; }
.empty-text { font-size: 24rpx; }

BIN
pages/course/homepage/image/banner.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 145 KiB

BIN
pages/course/homepage/image/cj.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.4 KiB

BIN
pages/course/homepage/image/kgky.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.3 KiB

BIN
pages/course/homepage/image/zmt.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
pages/course/homepage/image/考公.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
pages/course/homepage/image/考编.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
pages/course/homepage/image/考证.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

59
pages/course/orderDetail/orderDetail.js
View File

@ -8,6 +8,7 @@ Page({
_secondsRemaining: 0, // 内部倒计时秒数 _secondsRemaining: 0, // 内部倒计时秒数
_hasShownTimeout: false, // 是否已弹过“超时未支付”弹窗 _hasShownTimeout: false, // 是否已弹过“超时未支付”弹窗
globalImgUrl, globalImgUrl,
isMaskVisible: false
}, },
onLoad(options) { onLoad(options) {
@ -15,7 +16,61 @@ Page({
this.setData({ orderId: options.id }); this.setData({ orderId: options.id });
this.getOrderDetail(); this.getOrderDetail();
}, },
showIsPayModal() {
const {orderId} = this.data
wx.showModal({
title: '下单成功',
content: '您确定要支付吗？',
cancelText: '取消',
confirmText: '确定',
success: (res) => {
if (res.confirm) {
this.payOrder(orderId);
} else if (res.cancel) {
this.setData({ isMaskVisible: false });
}
},
fail: () => {
wx.hideLoading();
wx.showToast({
title: '网络错误，下单失败',
icon: 'none'
});
}
});
},
payOrder(orderId) {
// 同样先显示遮罩
this.setData({ isMaskVisible: true });
wx.showLoading({ title: '支付中...'});
wx.request({
url: baseUrl + '/courseOrder/payment',
method: 'POST',
header: { Authorization: wx.getStorageSync('token') },
data: { id: orderId},
success: res => {
wx.hideLoading();
if (res.data.code === 1) {
// 支付成功，跳转详情页
wx.redirectTo({
url: `/pages/course/orderDetail/orderDetail?id=${orderId}`,
success: res => {
// 先把遮罩关掉
this.setData({ isMaskVisible: false });
}
});
} else {
this.setData({ isMaskVisible: false });
wx.showToast({ title: res.data.message || '支付失败', icon: 'none' });
}
},
fail: () => {
wx.hideLoading();
this.setData({ isMaskVisible: false });
wx.showToast({ title: '网络错误，支付失败', icon: 'none' });
}
});
},
onUnload() { onUnload() {
clearInterval(this._timer); clearInterval(this._timer);
}, },
@ -48,7 +103,7 @@ Page({
// 将 "2025-07-13 12:38:17" → 时间戳 // 将 "2025-07-13 12:38:17" → 时间戳
const createMs = new Date(createTime.replace(/-/g, '/')).getTime(); const createMs = new Date(createTime.replace(/-/g, '/')).getTime();
const now = Date.now(); const now = Date.now();
let diff = Math.floor((createMs + 30 * 60 * 1000 - now) / 1000); let diff = Math.floor((createMs + 15 * 60 * 1000 - now) / 1000);
if (diff <= 0) { if (diff <= 0) {
// 已超时 // 已超时

156
pages/course/orderDetail/orderDetail.wxml
View File

@ -1,87 +1,101 @@
<view class="flex-col page"> <!-- pages/order/orderDetail.wxml -->
<view class="flex-col group"> <view class="page">
<view class="flex-col section">
<!-- 订单状态 + 倒计时 -->
<view class="flex-row justify-between self-stretch group_2">
<text class="font">订单状态</text>
<view class="flex-row group_3">
<text class="font_2 text" wx:if="{{ orderObj.orderStatus === '待支付' }}">请在{{countdown}}内完成支付</text>
<text class="font_2 text_2 ml-37">{{ orderObj.orderStatus }}</text>
</view>
</view>
<!-- 课程信息 -->
<view class="flex-row self-stretch group_4 mt-15">
<image
class="shrink-0 image"
src="{{ globalImgUrl + orderObj.image }}"
/>
<text class="flex-1 self-start font_3 text_3 ml-7">
{{ orderObj.name }}
</text>
</view>
<!-- 课程价格 -->
<text class="self-end font_3 text_4 mt-15">￥{{ orderObj.originPrice }}</text>
</view>
<!-- 订单详情 --> <!-- 中间内容滚动，底部按钮固定，所以这里预留底部内边距 -->
<view class="mt-16 flex-col section_2"> <scroll-view scroll-y class="content no-scrollbar">
<view class="self-start group_5">
<text class="font text_5">订单编号：</text> <!-- 订单状态 + 倒计时 + 课程信息 -->
<text class="font_4">{{ orderObj.orderNumber }}</text> <view class="card header-card">
<!-- 状态与倒计时 -->
<view class="status-line">
<view class="status-badge {{ orderObj.orderStatus === '待支付' ? 'status-pending' : (orderObj.orderStatus === '已支付' || orderObj.orderStatus === '交易成功' ? 'status-success' : 'status-default') }}">
<text class="status-text">{{ orderObj.orderStatus }}</text>
</view> </view>
<view class="flex-row items-baseline self-start group_6"> <view wx:if="{{ orderObj.orderStatus === '待支付' }}" class="countdown-pill">
<text class="shrink-0 font text_6">下单时间：</text> <text class="countdown-text">请在 {{ countdown }} 内完成支付</text>
<text class="flex-1 font_5 ml-3">{{ orderObj.createTime }}</text>
</view>
<view class="flex-col justify-start self-stretch relative group_7">
<view class="flex-col section_3">
<view class="self-stretch divider"></view>
<view class="flex-row self-stretch group_8 mt-17">
<text class="font text_7">支付方式：</text>
<text class="ml-8 font text_8">微信支付</text>
</view>
<view class="flex-row items-center self-stretch mt-17">
<text class="font text_9">交易号：</text>
<!-- TODO -->
<text class="font_4 ml-23">4002506191307440406460485418</text>
</view>
<text class="self-start font text_10 mt-17" wx:if="{{ orderObj.orderStatus === '交易成功' }}">交付时间：</text>
</view>
<text class="font_5 text_11 pos" wx:if="{{ orderObj.orderStatus === '交易成功' }}">{{ orderObj.updateTime }}</text>
</view> </view>
</view> </view>
<!-- 价格明细 --> <!-- 课程信息 -->
<view class="mt-16 flex-col section_4"> <view class="course-line">
<view class="flex-row justify-between items-center"> <image class="cover" src="{{ globalImgUrl + orderObj.image }}" mode="aspectFill" lazy-load="true" />
<text class="font text_12">课程价格</text> <view class="course-info">
<text class="font_4">￥{{ orderObj.originPrice }}</text> <text class="course-title ellipsis-2">{{ orderObj.name }}</text>
</view> <view class="price-line">
<view class="flex-row justify-between items-center mt-11"> <text class="price-origin">￥{{ orderObj.originPrice }}</text>
<text class="font text_13">价格折扣</text> <text class="price-amount">应付：￥{{ orderObj.totalAmount }}</text>
<text class="font_4 text_14">-￥{{ orderObj.originPrice - orderObj.totalAmount }}</text> </view>
</view>
<view class="flex-row justify-between items-center group_9 mt-11">
<text class="font_2 text_15">订单金额</text>
<text class="font_4 text_16">￥{{ orderObj.totalAmount }}</text>
</view> </view>
</view> </view>
</view> </view>
<!-- 底部按钮：待支付 --> <!-- 订单详情 -->
<view class="flex-row bottom-buttons" wx:if="{{ orderObj.orderStatus === '待支付' }}"> <view class="card">
<view class="flex-col justify-start items-center text-wrapper" bindtap="cancelOrder"> <view class="kv">
<text class="font_3 text_17">取消</text> <text class="kv-key">订单编号</text>
<text class="kv-val selectable">{{ orderObj.orderNumber }}</text>
</view> </view>
<view class="flex-col justify-start items-center text-wrapper_2" bindtap="goPay">
<text class="font_3 text_18">立即支付</text> <view class="kv">
<text class="kv-key">下单时间</text>
<text class="kv-val">{{ orderObj.createTime }}</text>
</view>
<view class="divider"></view>
<view class="kv">
<text class="kv-key">支付方式</text>
<text class="kv-val">微信支付</text>
</view>
<view class="kv">
<text class="kv-key">交易号</text>
<!-- 这里可替换为真实字段 -->
<text class="kv-val selectable">4002506191307440406460485418</text>
</view>
<view wx:if="{{ orderObj.orderStatus === '交易成功' }}" class="kv">
<text class="kv-key">交付时间</text>
<text class="kv-val">{{ orderObj.updateTime }}</text>
</view> </view>
</view> </view>
<!-- 底部按钮：已支付 --> <!-- 价格明细 -->
<view class="flex-row bottom-buttons" wx:if="{{ orderObj.orderStatus === '已支付' }}"> <view class="card">
<view class="flex-col justify-start items-center text-wrapper_2" bindtap="refundOrder"> <view class="kv">
<text class="font_3 text_18">退款</text> <text class="kv-key">课程价格</text>
<text class="kv-val">￥{{ orderObj.originPrice }}</text>
</view> </view>
<view class="kv">
<text class="kv-key">价格折扣</text>
<text class="kv-val discount">-￥{{ (orderObj.originPrice - orderObj.totalAmount) >= 0 ? (orderObj.originPrice - orderObj.totalAmount) : 0 }}
</text>
</view>
<view class="kv total">
<text class="kv-key total-key">订单金额</text>
<text class="kv-val total-val">￥{{ orderObj.totalAmount }}</text>
</view>
</view>
</scroll-view>
<!-- 底部按钮：待支付 -->
<view class="footer" wx:if="{{ orderObj.orderStatus === '待支付' }}">
<view class="footer-inner two-btns">
<view class="btn btn-ghost" bindtap="cancelOrder">取消</view>
<view class="btn btn-primary" bindtap="showIsPayModal">立即支付</view>
</view> </view>
</view> </view>
<!-- 底部按钮：已支付 -->
<view class="footer" wx:if="{{ orderObj.orderStatus === '已支付' }}">
<view class="footer-inner one-btn">
<view class="btn btn-primary" bindtap="refundOrder">退款</view>
</view>
</view>
<!-- 遮罩 -->
<view wx:if="{{ isMaskVisible }}" class="page-mask"></view>
</view>

466
pages/course/orderDetail/orderDetail.wxss
View File

@ -1,217 +1,255 @@
.ml-37 { /* ===== 页面框架 ===== */
margin-left: 69.38rpx;
}
.ml-7 {
margin-left: 13.13rpx;
}
.mt-15 {
margin-top: 28.13rpx;
}
.ml-3 {
margin-left: 5.63rpx;
}
.ml-23 {
margin-left: 40.13rpx;
}
.mt-17 {
margin-top: 31.88rpx;
}
.mt-11 {
margin-top: 20.63rpx;
}
.mt-389 {
margin-top: 729.38rpx;
}
/* 整体布局 */
.page { .page {
padding-top: 26.25rpx; background: #f7f7f7;
background-color: #f8f8f8; min-height: 100vh;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.group {
padding: 0 18.75rpx;
}
/* 调整首屏 section 右边内边距，不让价格太贴边 */
.section {
padding: 0 22.5rpx 33.75rpx 22.5rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 7.22rpx;
}
/* 订单详情区 */
.group_2 {
padding: 33.75rpx 0 26.25rpx;
border-bottom: solid 1.88rpx #e3e3e3;
}
.group_3 {
margin-right: 18.75rpx;
}
.font_2 {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 24.23rpx;
color: #f84947;
}
.text {
line-height: 24.56rpx;
}
.text_2 {
line-height: 24.17rpx;
}
.group_4 {
margin-right: 33.75rpx;
}
.image {
border-radius: 9.38rpx;
width: 208.13rpx;
height: 133.13rpx;
}
.font_3 {
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 27.64rpx;
}
.text_3 {
color: #000000;
line-height: 35.63rpx;
}
.text_4 {
color: #3d3d3d;
line-height: 22.76rpx;
}
/* 订单详情二级区 */
.section_2 {
padding: 33.75rpx 22.5rpx 0;
background-color: #ffffff;
border-radius: 7.39rpx;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
}
.group_5 {
line-height: 24.28rpx;
}
.font_4 {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 19.93rpx;
color: #323232;
}
.group_6 {
margin-top: 30rpx;
width: 369.94rpx;
}
.font_5 {
font-size: 26.25rpx;
line-height: 31.88rpx;
color: #323232;
}
.group_7 {
margin-top: 11.25rpx;
padding-bottom: 26.25rpx;
}
.section_3 {
padding-top: 9.38rpx;
background-color: #ffffff;
}
.divider {
background-color: #cccccc;
height: 1.88rpx;
}
.group_8 {
padding: 0 3.75rpx;
}
.font {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 24.23rpx;
color: #696969;
}
.text_7 {
line-height: 24.36rpx;
}
.text_6 {
line-height: 31.88rpx;
}
.text_5 {
line-height: 24.28rpx;
}
.text_8 {
color: #323232;
}
.text_9 {
line-height: 24.52rpx;
}
.text_10 {
line-height: 24.43rpx;
}
.text_11 {
width: 270rpx;
}
.pos {
position: absolute;
left: 141.05rpx;
top: 142.92rpx;
}
/* 调整价格明细区右边内边距 */
.section_4 {
padding: 22.5rpx 22.5rpx 0 22.5rpx;
background-color: #ffffff;
border-radius: 4.01rpx;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
}
.text_12 {
line-height: 24.41rpx;
}
.text_13 {
line-height: 24.41rpx;
}
.text_14 {
/* margin-right: 15rpx; */
}
.group_9 {
padding: 22.5rpx 0 18.75rpx;
border-top: solid 1.88rpx #e3e3e3;
}
.text_15 {
line-height: 24.49rpx;
}
.text_16 {
color: #f84947;
}
/* 底部按钮 */
.text-wrapper {
padding: 37.5rpx 0;
flex: 1 1 375rpx;
background-color: #ffffff;
height: 105rpx;
}
.text-wrapper_2 {
padding: 37.5rpx 0;
flex: 1 1 375rpx;
background-color: #ff8d1a;
height: 105rpx;
}
.text_17 {
color: #323232;
}
.text_18 {
color: #ffffff;
line-height: 27.81rpx;
}
.bottom-buttons {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
background-color: #ffffff; /* 可以根据需要设置背景色 */
} }
.content {
flex: 1;
padding: 24rpx 24rpx 200rpx; /* 为底部固定按钮预留空间 */
box-sizing: border-box;
}
.no-scrollbar::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
/* 遮罩 */
.page-mask {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.35);
z-index: 9999;
}
/* ===== 卡片通用 ===== */
.card {
background: #ffffff;
border-radius: 16rpx;
padding: 24rpx;
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.05);
}
.card + .card {
margin-top: 20rpx;
}
/* ===== 顶部卡片：状态 + 倒计时 + 课程 ===== */
.header-card .status-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16rpx;
margin-bottom: 16rpx;
}
.status-badge {
height: 48rpx;
padding: 0 20rpx;
border-radius: 999rpx;
display: inline-flex;
align-items: center;
justify-content: center;
}
.status-text {
font-size: 26rpx;
font-weight: 600;
}
.status-pending {
background: #fff6e6;
color: #ff8d1a;
}
.status-success {
background: #e9fbef;
color: #12b05b;
}
.status-default {
background: #f0f0f0;
color: #666666;
}
.countdown-pill {
background: #fff4f2;
border: 1rpx solid #ffd6cc;
padding: 0 18rpx;
height: 48rpx;
border-radius: 999rpx;
display: inline-flex;
align-items: center;
}
.countdown-text {
font-size: 24rpx;
color: #ff5a1a;
}
/* 课程行 */
.course-line {
display: flex;
gap: 20rpx;
align-items: stretch;
}
.cover {
width: 240rpx;
height: 160rpx;
border-radius: 12rpx;
background: #f2f2f2;
flex-shrink: 0;
}
.course-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.course-title {
font-size: 32rpx;
font-weight: 600;
color: #1f1f1f;
line-height: 44rpx;
}
.ellipsis-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.price-line {
display: flex;
align-items: baseline;
gap: 16rpx;
margin-top: 8rpx;
}
.price-origin {
font-size: 28rpx;
color: #9f9f9f;
text-decoration: line-through;
}
.price-amount {
font-size: 30rpx;
color: #ff5a1a;
font-weight: 700;
}
/* ===== 键值对（订单详情 / 价格明细） ===== */
.kv {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12rpx 0;
}
.kv + .kv {
border-top: 1rpx dashed #f0f0f0;
}
.kv-key {
font-size: 28rpx;
color: #666666;
}
.kv-val {
font-size: 28rpx;
color: #1f1f1f;
max-width: 70%;
text-align: right;
word-break: break-all;
}
.selectable {
user-select: text;
}
.divider {
height: 1rpx;
background: #f2f2f2;
margin: 8rpx 0 12rpx;
}
.discount {
color: #12b05b;
font-weight: 600;
}
.total {
border-top: 1rpx solid #f2f2f2;
margin-top: 8rpx;
padding-top: 16rpx;
}
.total-key {
font-size: 30rpx;
color: #333333;
font-weight: 600;
}
.total-val {
font-size: 34rpx;
color: #ff5a1a;
font-weight: 700;
}
/* ===== 底部操作栏 ===== */
.footer {
position: fixed;
left: 0; right: 0; bottom: 0;
background: #ffffff;
box-shadow: 0 -6rpx 20rpx rgba(0,0,0,0.06);
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: constant(safe-area-inset-bottom);
}
.footer-inner {
height: 120rpx;
display: flex;
align-items: center;
justify-content: center;
gap: 24rpx;
padding: 0 24rpx;
box-sizing: border-box;
}
.footer-inner.two-btns { justify-content: space-between; }
.footer-inner.one-btn { justify-content: flex-end; }
.btn {
height: 88rpx;
min-width: 260rpx;
border-radius: 999rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
font-weight: 600;
}
.btn-ghost {
background: #ffffff;
color: #333333;
border: 2rpx solid #e6e6e6;
}
.btn-primary {
background: linear-gradient(180deg, #ffa64a 0%, #ff8d1a 100%);
color: #ffffff;
box-shadow: 0 6rpx 14rpx rgba(255, 141, 26, 0.35);
}
/* ===== 迁移提示：以下旧的散装类建议删除（如无外部依赖） ===== */
/* .ml-37, .ml-7, .mt-15, .ml-3, .ml-23, .mt-17, .mt-11, .mt-389 等 */

36
pages/course/searchCourses/searchCourses.js
View File

@ -1,13 +1,45 @@
// pages/course/searchCourses/searchCourses.js // pages/course/searchCourses/searchCourses.js
import { baseUrl, globalImgUrl } from "../../../request";
Page({ Page({
/** /**
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
courseList: [],
searchKeyword: '',
globalImgUrl,
}, },
// 每次用户输入都会进这里
onSearchInput(e) {
this.setData({
searchKeyword: e.detail.value
});
},
gotoCourseDetail(e) {
const courseId = e.currentTarget.dataset.id;
wx.navigateTo({
url: `/pages/course/courseDetail/courseDetail?id=${courseId}`,
});
},
onSearch() {
const token = wx.getStorageSync('token')
const { searchKeyword } = this.data
wx.request({
url: baseUrl + '/course/query/keyword',
header: {
Authorization: token
},
method: 'POST',
data: {
templateString: searchKeyword
},
success: res => {
let result = res.data.data
this.setData({courseList: result})
}
})
},
/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */

58
pages/course/searchCourses/searchCourses.wxml
View File

@ -1,26 +1,42 @@
<!--pages/course/searchCourses/searchCourses.wxml--> <!-- pages/course/searchCourses/searchCourses.wxml -->
<view class="flex-col page"> <view class="page">
<view class="flex-row items-center section">
<image <!-- 顶部搜索条（固定） -->
class="image" <view class="search-bar" hover-class="hover">
src="./images/sousuo.png" <image class="search-icon" src="./images/sousuo.png" mode="aspectFit"/>
/> <input
<input class="text ml-3" placeholder="搜索更多好课" /> class="search-input"
</view> placeholder="搜索更多好课"
<view class="flex-col list mt-17"> placeholder-class="search-ph"
<view class="flex-row relative list-item" wx:for="{{items}}" wx:for-item="item" wx:for-index="index" wx:key="index"> bindinput="onSearchInput"
<view class="list-divider pos_3"></view> confirm-type="search"
<image bindconfirm="onSearch"
class="image_2 pos" />
src="https://ide.code.fun/api/image?token=6854f3c94ae84d0012332367&name=9c2a22f14e2bd768cbd40d939693e4a8.png" </view>
/>
<view class="flex-col group_2 pos_2"> <!-- 搜索结果（独立滚动，隐藏滚动条） -->
<text class="font">区块链和加密数字货币（随报随学认证班）</text> <scroll-view scroll-y class="list no-scrollbar">
<view class="flex-row justify-between items-baseline mt-17"> <block wx:for="{{courseList}}" wx:key="item.id" wx:for-item="item">
<text class="font_2">券后99元起</text> <view class="course-card" bindtap="gotoCourseDetail" data-id="{{item.id}}" hover-class="hover">
<text class="font_3">18523人学习</text> <!-- 封面 -->
<image class="cover" src="{{globalImgUrl + item.image}}" mode="aspectFill" lazy-load="true"/>
<!-- 文案 -->
<view class="info">
<text class="title">{{item.name}}</text>
<view class="meta">
<text class="price-pill">券后{{item.discountPrice}}元起</text>
<text class="people">{{item.orderCount}}人学习</text>
</view> </view>
</view> </view>
</view> </view>
</block>
<!-- 空状态（可选） -->
<view wx:if="{{!courseList || courseList.length === 0}}" class="empty">
<image class="empty-icon" src="/static/empty.png" mode="aspectFit"/>
<text class="empty-text">没找到相关课程，换个关键词试试～</text>
</view> </view>
</scroll-view>
</view> </view>

189
pages/course/searchCourses/searchCourses.wxss
View File

@ -1,89 +1,132 @@
/* pages/course/searchCourses/searchCourses.wxss */ /* pages/course/searchCourses/searchCourses.wxss */
.ml-3 { /* ===== 页面骨架：整页固定，仅列表滚动 ===== */
margin-left: 5.63rpx;
}
.mt-17 {
margin-top: 31.88rpx;
}
.page { .page {
padding: 26.25rpx 0 918.73rpx; height: 100vh;
background-color: #ffffff; display: flex;
width: 100%; flex-direction: column;
overflow-y: auto; background: #ffffff;
overflow-x: hidden; overflow: hidden; /* 禁止整页滚动 */
height: 100%; box-sizing: border-box;
font-family: SourceHanSansCN, PingFang SC, Microsoft YaHei, system-ui, -apple-system, sans-serif;
} }
.section {
margin-left: 28.13rpx; /* 触摸反馈 */
margin-right: 26.27rpx; .hover { opacity: .86; transition: opacity .18s ease; }
padding: 11.25rpx 24.38rpx;
background-color: #f2f2f2; /* ===== 顶部搜索条（固定） ===== */
border-radius: 93.75rpx; .search-bar {
padding: 24rpx 28rpx;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 16rpx;
background: #fff;
} }
.image { .search-icon { width: 36rpx; height: 36rpx; opacity: .9; }
width: 35.63rpx;
height: 35.63rpx; /* 胶囊输入框 */
} .search-input {
.text { flex: 1;
color: #a8a8a8; height: 72rpx;
font-size: 22.5rpx; padding: 0 26rpx;
font-family: SourceHanSerifCN; border-radius: 9999rpx;
line-height: 20.83rpx; background: #f5f6f7;
font-size: 26rpx;
color: #111;
line-height: 72rpx;
box-shadow: inset 0 0 0 1rpx rgba(0,0,0,.04);
} }
.search-ph { color: #a8a8a8; font-size: 26rpx; }
/* ===== 列表：占满剩余高度，独立滚动，隐藏滚动条 ===== */
.list { .list {
padding-top: 11.25rpx; flex: 1;
border-top: solid 1.88rpx #d1d1d1; padding: 0 24rpx 28rpx;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
background: #fff;
} }
.list-item { .no-scrollbar::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }
padding: 28.13rpx 29.46rpx 0 35.63rpx; .no-scrollbar { scrollbar-width: none; }
height: 189.39rpx;
/* ===== 课程卡片（左图右文，更工整） ===== */
.course-card {
display: flex;
gap: 22rpx;
padding: 20rpx;
margin-top: 20rpx;
background: #ffffff;
border-radius: 20rpx;
border: 1rpx solid #f1f1f1;
box-shadow: 0 8rpx 24rpx rgba(0,0,0,.05);
} }
.list-divider {
background-color: #d6d6d6; /* 封面：3:2 比例，圆角 */
height: 1.88rpx; .cover {
width: 280rpx;
height: 186rpx;
flex: 0 0 280rpx;
border-radius: 14rpx;
object-fit: cover;
} }
.pos_3 {
position: absolute; /* 信息区 */
left: 35.63rpx; .info {
right: 33.81rpx; flex: 1;
top: 187.52rpx; min-width: 0; /* 防文字溢出 */
display: flex;
flex-direction: column;
justify-content: space-between;
} }
.image_2 {
border-radius: 9.38rpx; /* 标题：两行省略 */
width: 208.13rpx; .title {
height: 133.13rpx; font-size: 28rpx;
line-height: 40rpx;
color: #111;
font-weight: 600;
display: -webkit-box;
-webkit-line-clamp: 2; /* 两行省略 */
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
} }
.pos {
position: absolute; /* 元信息：价格胶囊 + 学习人数 */
left: 35.63rpx; .meta {
top: 50%; margin-top: 12rpx;
transform: translateY(-50%); display: flex;
align-items: baseline;
justify-content: space-between;
} }
.group_2 { .price-pill {
width: 453.49rpx; padding: 6rpx 14rpx;
font-size: 24rpx;
color: #fff;
border-radius: 9999rpx;
background: linear-gradient(90deg, #ff6a00, #ff8a2a);
box-shadow: 0 6rpx 16rpx rgba(255,106,0,.22);
white-space: nowrap;
} }
.pos_2 { .people {
position: absolute; font-size: 22rpx;
right: 29.46rpx; color: #9aa0a6;
top: 50%; white-space: nowrap;
transform: translateY(-50%);
} }
.font {
font-size: 26.25rpx; /* ===== 空状态 ===== */
font-family: SourceHanSansCN; .empty {
line-height: 31.88rpx; padding: 120rpx 0 80rpx;
color: #000000; display: flex;
} flex-direction: column;
.font_2 { align-items: center;
font-size: 26.25rpx; gap: 18rpx;
font-family: AlibabaPuHuiTi; color: #9aa0a6;
line-height: 24.15rpx;
color: #ff5733;
}
.font_3 {
font-size: 22.5rpx;
font-family: AlibabaPuHuiTi;
line-height: 20.34rpx;
color: #a6a6a6;
} }
.empty-icon { width: 240rpx; height: 240rpx; opacity: .7; }
.empty-text { font-size: 24rpx; line-height: 34rpx; }
/* ===== 如你项目里已有的工具类，可保留或删除 ===== */
.ml-3 { margin-left: 6rpx; }
.mt-17 { margin-top: 12rpx; }

15
pages/dashboardModule/overviewPerformance/overviewPerformance.js
View File

@ -1,4 +1,5 @@
import { baseUrl } from "../../../request"; import { baseUrl } from "../../../request";
const { notLogin } = require('../../../utils/util')
// pages/dashboardModule/overviewPerformance/overviewPerformance.js // pages/dashboardModule/overviewPerformance/overviewPerformance.js
Page({ Page({
@ -24,6 +25,8 @@ Page({
monthRefundAmount: 0, // 本月退款总金额 monthRefundAmount: 0, // 本月退款总金额
monthPromotionCount: 0, // 本月推广数量 monthPromotionCount: 0, // 本月推广数量
userRole: '', // 用户角色 userRole: '', // 用户角色
isShowArr: [],
widthRate: '30%'
}, },
onLoad(options) { onLoad(options) {
@ -45,6 +48,13 @@ Page({
break; break;
} }
this.setData({ showRole }); this.setData({ showRole });
if (options.role === 'manager') this.setData({isShowArr: [true, true, true]})
else if (options.role === 'supervisor') this.setData({isShowArr: [false, true, true]})
else if (options.role === 'staff') this.setData({isShowArr: [false, false, true]})
const trueCount = this.data.isShowArr.filter(v => v === true).length;
if (trueCount === 3) this.setData({widthRate: '30%'})
else if (trueCount === 2) this.setData({widthRate: '47.5%'})
else if (trueCount === 1) this.setData({widthRate: '100%'})
}, },
fetchPerformance() { fetchPerformance() {
@ -59,10 +69,7 @@ Page({
// 直接把后端 data 对象铺平到页面 data // 直接把后端 data 对象铺平到页面 data
this.setData(res.data.data); this.setData(res.data.data);
} else { } else {
wx.showToast({ notLogin(res.data.message)
title: res.data.message || '获取数据失败',
icon: 'none'
});
} }
}, },
fail: () => { fail: () => {

19
pages/dashboardModule/overviewPerformance/overviewPerformance.wxml
View File

@ -61,31 +61,36 @@
</view> </view>
<!-- 底部网格 --> <!-- 底部网格 -->
<view class="grid pos"> <view class="pos">
<view class="flex-col items-center grid-item"> <view class="flex-row" style="justify-content: space-between;">
<view style="width: {{widthRate}};" class="flex-col items-center grid-item" wx:if="{{isShowArr[0]}}">
<text class="font text_2">主管数量</text> <text class="font text_2">主管数量</text>
<text class="mt-20 font_2">{{superCount}}</text> <text class="mt-20 font_2">{{superCount}}</text>
</view> </view>
<view class="flex-col items-center grid-item"> <view style="width: {{widthRate}};" class="flex-col items-center grid-item" wx:if="{{isShowArr[1]}}">
<text class="font text_3">员工数量</text> <text class="font text_3">员工数量</text>
<text class="mt-20 font_2">{{empCount}}</text> <text class="mt-20 font_2">{{empCount}}</text>
</view> </view>
<view class="flex-col items-center grid-item"> <view style="width: {{widthRate}};" class="flex-col items-center grid-item" wx:if="{{isShowArr[2]}}">
<text class="font text_4">客户数量</text> <text class="font text_4">客户数量</text>
<text class="mt-20 font_2">{{promoCount}}</text> <text class="mt-20 font_2">{{promoCount}}</text>
</view> </view>
<view class="flex-col items-center grid-item_2"> </view>
<view class="flex-row" style="justify-content: space-between;">
<view class="flex-col items-center grid-item_2" style="margin-right: 10rpx">
<text class="font text_5">订单总金额</text> <text class="font text_5">订单总金额</text>
<text class="mt-20 font_2">￥{{totalAmount}}</text> <text class="mt-20 font_2">￥{{totalAmount}}</text>
</view> </view>
<view class="flex-col items-center grid-item_2"> <view class="flex-col items-center grid-item_2" style="margin: 40rpx 10rpx 0">
<text class="font text_6">订单净成交</text> <text class="font text_6">订单净成交</text>
<text class="mt-20 font_2">￥{{netAmount}}</text> <text class="mt-20 font_2">￥{{netAmount}}</text>
</view> </view>
<view class="flex-col items-center grid-item_2"> <view class="flex-col items-center grid-item_2" style="margin-left: 10rpx">
<text class="font text_7">下单数量</text> <text class="font text_7">下单数量</text>
<text class="mt-20 font_2">{{orderCount}}</text> <text class="mt-20 font_2">{{orderCount}}</text>
</view> </view>
</view>
</view> </view>
</view> </view>
</view> </view>

2
pages/dashboardModule/overviewPerformance/overviewPerformance.wxss
View File

@ -232,6 +232,8 @@
line-height: 24.54rpx; line-height: 24.54rpx;
} }
.grid-item_2 { .grid-item_2 {
width: 30%;
margin-top: 40rpx;
padding: 22.5rpx 0; padding: 22.5rpx 0;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040); filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff; background-color: #ffffff;

17
pages/dashboardModule/performanceRanking/performanceRanking.js
View File

@ -1,4 +1,5 @@
import { baseUrl } from "../../../request"; import { baseUrl } from "../../../request";
const { notLogin } = require('../../../utils/util')
Page({ Page({
data: { data: {
@ -12,6 +13,7 @@ Page({
sortOrders: ['升序', '降序'], sortOrders: ['升序', '降序'],
items: [], // 用于存储查询结果 items: [], // 用于存储查询结果
role: '', // 假设初始为主管角色，可以根据实际情况动态设置 role: '', // 假设初始为主管角色，可以根据实际情况动态设置
k: 1
}, },
// 主管名称输入 // 主管名称输入
@ -44,6 +46,7 @@ Page({
selectedSortField: selectedField, selectedSortField: selectedField,
sortField: sortFieldsMap[selectedField], // 默认是 id sortField: sortFieldsMap[selectedField], // 默认是 id
}); });
this.onSearch()
}, },
// 选择排序顺序 // 选择排序顺序
@ -53,6 +56,7 @@ Page({
selectedSortOrder: selectedOrder === 'ascend' ? '升序' : '降序', selectedSortOrder: selectedOrder === 'ascend' ? '升序' : '降序',
sortOrder: selectedOrder, sortOrder: selectedOrder,
}); });
this.onSearch()
}, },
// 搜索按钮点击 // 搜索按钮点击
@ -119,23 +123,20 @@ Page({
items: res.data.data items: res.data.data
}); });
} else { } else {
wx.showToast({ notLogin(res.data.message)
title: '没有数据',
icon: 'none'
});
} }
}, },
fail: () => { fail: () => {
// 请求失败后，隐藏loading // 请求失败后，隐藏loading
wx.hideLoading(); wx.hideLoading();
console.log('111');
wx.showToast({ wx.showToast({
title: '请求失败', title: '请求失败',
icon: 'none' icon: 'none'
}); });
} }
}); });
} else if( role === 'supervisor' ) { } else if( role === 'supervisor' || role === 'staff') {
wx.request({ wx.request({
url: baseUrl + '/perform/rank/staff', // 替换为实际API地址 url: baseUrl + '/perform/rank/staff', // 替换为实际API地址
method: 'POST', method: 'POST',
@ -175,6 +176,8 @@ Page({
onLoad(options) { onLoad(options) {
// 根据身份确定角色 // 根据身份确定角色
const role = options.role; const role = options.role;
this.setData({k: options.k})
if (role === 'staff') this.setData({selectedSortField: '推广人数'})
console.log('角色---->',options.role); console.log('角色---->',options.role);
this.setData({ role }); this.setData({ role });
let showRole = ''; let showRole = '';
@ -185,6 +188,8 @@ Page({
case 'supervisor': case 'supervisor':
showRole = '员工'; showRole = '员工';
break; break;
case 'staff':
showRole = '员工'
} }
this.setData({ showRole }); this.setData({ showRole });
this.onSearch() this.onSearch()

193
pages/dashboardModule/performanceRanking/performanceRanking.wxml
View File

@ -1,96 +1,127 @@
<view class="flex-col page"> <!-- pages/dashboardModule/ranking/ranking.wxml（按你的实际路径命名） -->
<view class="page">
<!-- 页面标题 --> <!-- 页面标题 -->
<text class="self-center text">{{ showRole }}绩效排名</text> <view class="page-title">
<text class="title">{{ showRole }}绩效排名</text>
</view>
<!-- 表单区域 --> <scroll-view scroll-y class="content no-scrollbar">
<view class="flex-col self-stretch mt-27"> <!-- 表单卡片 -->
<view class="flex-col section"> <view class="card form-card">
<!-- 名称 -->
<!-- 主管名称 --> <view class="field">
<text class="self-start font text_2">{{ showRole }}名称</text> <text class="field-label">{{ showRole }}名称</text>
<view class="flex-col justify-start items-start self-start text-wrapper"> <view class="input-box">
<input class="text_3 font text_4" placeholder="请输入{{ showRole }}名称" bindinput="onNameInput"/> <input
class="input"
placeholder="请输入{{ showRole }}名称"
bindinput="onNameInput"
/>
</view>
</view> </view>
<!-- 手机号 --> <!-- 手机号 -->
<text class="self-start font text_5">手机号</text> <view class="field">
<view class="flex-col justify-start items-start self-start text-wrapper_1"> <text class="field-label">手机号</text>
<input class="text_3 font text_6" placeholder="请输入手机号" bindinput="onPhoneInput"/> <view class="input-box">
<input
class="input"
placeholder="请输入手机号"
bindinput="onPhoneInput"
maxlength="11"
type="number"
/>
</view>
</view> </view>
<!-- 排序条件选择 --> <!-- 排序条件 -->
<text class="self-start font text_7">排序条件</text> <view class="field">
<view class="flex-row equal-division"> <text class="field-label">排序条件</text>
<view class="flex-row justify-between section_2 section_1"> <view class="picker-row">
<picker wx:if="{{ role === 'manager' }}" mode="selector" range="{{sortFieldsByManager}}" bindchange="onSortFieldChange"> <!-- 排序字段 -->
<view class="flex-row justify-between section_2"> <view class="picker-box">
<text class="font text_1">{{selectedSortField}}</text> <picker wx:if="{{ role === 'manager' }}"
<image class="image" src="./images/bottom.png"/> mode="selector"
</view> range="{{ sortFieldsByManager }}"
</picker> bindchange="onSortFieldChange">
<picker mode="selector" wx:if="{{ role === 'supervisor' }}" range="{{sortFieldsBySupervisor}}" bindchange="onSortFieldChange"> <view class="picker-inner">
<view class="flex-row justify-between section_2"> <text class="picker-text">{{ selectedSortField }}</text>
<text class="font text_1">{{selectedSortField}}</text> <image class="arrow" src="./images/bottom.png" />
<image class="image" src="./images/bottom.png"/> </view>
</view> </picker>
</picker>
</view>
<!-- 排序顺序 --> <picker wx:if="{{ role === 'supervisor' || role === 'staff' }}"
<view class="flex-row justify-between section_2 section_3 ml-16"> mode="selector"
<picker mode="selector" range="{{sortOrders}}" bindchange="onSortOrderChange"> range="{{ sortFieldsBySupervisor }}"
<view class="flex-row justify-between section_2"> bindchange="onSortFieldChange">
<text class="font text_16">{{selectedSortOrder}}</text> <view class="picker-inner">
<image class="image" src="./images/bottom.png"/> <text class="picker-text">{{ selectedSortField }}</text>
</view> <image class="arrow" src="./images/bottom.png" />
</picker> </view>
</picker>
</view>
<!-- 排序顺序 -->
<view class="picker-box">
<picker mode="selector"
range="{{ sortOrders }}"
bindchange="onSortOrderChange">
<view class="picker-inner">
<text class="picker-text">{{ selectedSortOrder }}</text>
<image class="arrow" src="./images/bottom.png" />
</view>
</picker>
</view>
</view> </view>
</view> </view>
<!-- 搜索按钮 --> <!-- 搜索按钮 -->
<view class="flex-col justify-start items-center self-stretch text-wrapper_2" bindtap="onSearch"> <view class="btn btn-primary" bindtap="onSearch">搜索</view>
<text class="font text_8" >搜索</text> </view>
<!-- 结果列表 -->
<view class="result-wrap">
<view class="card item-card"
wx:for="{{ items }}"
wx:for-item="item"
wx:for-index="index"
wx:key="index">
<!-- 头部：排名 + 基本信息 -->
<view class="item-head">
<view class="rank-badge {{ index < 3 ? 'rank-top' : '' }}">
<text class="rank-text">{{ index + 1 }}</text>
</view>
<view class="person-line">
<text class="name">{{ item.nickName }}</text>
<text class="phone">{{ item.phoneNumber }}</text>
</view>
</view>
<!-- 指标 chips -->
<view class="chips">
<view wx:if="{{ k === '1' }}" class="chip">员工：{{ item.empCount }}</view>
<view class="chip">推广：{{ item.promoCount }}</view>
<view class="chip">下单：{{ item.orderCount }}</view>
</view>
<!-- 金额类键值行 -->
<view class="kv">
<text class="kv-key">总额</text>
<text class="kv-val money">￥{{ item.totalAmount }}</text>
</view>
<view class="kv">
<text class="kv-key">净成交</text>
<text class="kv-val money">￥{{ item.netAmount }}</text>
</view>
</view>
<!-- 空状态 -->
<view wx:if="{{ !items || !items.length }}" class="empty">
<image class="empty-img" src="/assets/empty-list.png" mode="aspectFit" />
<text class="empty-text">暂无数据</text>
</view> </view>
</view> </view>
</view> </scroll-view>
<!-- 查询结果展示 -->
<view class="flex-col mt-26">
<view class="flex-col list-item mt-19" wx:for="{{items}}" wx:for-item="item" wx:for-index="index" wx:key="index">
<!-- 排名 -->
<view class="flex-row">
<view class="flex-col justify-start items-center text-wrapper_4">
<text class="font_2 text_9">{{index + 1}}</text>
</view>
<!-- 主管信息 -->
<view class="flex-row items-center self-start group ml-20">
<text class="font_3">{{item.nickName}}</text>
<text class="font_4 ml-7">{{item.phoneNumber}}</text>
</view>
</view>
<!-- 绩效数据 -->
<view class="flex-row mt-14">
<view class="flex-col justify-start items-center text-wrapper_5">
<text class="font_5 text_11">员工：{{item.empCount}}</text>
</view>
<view class="flex-col justify-start items-center text-wrapper_6 ml-8">
<text class="font_5 text_12">推广：{{item.promoCount}}</text>
</view>
<view class="flex-col justify-start items-center text-wrapper_7 ml-8">
<text class="font_5">下单：{{item.orderCount}}</text>
</view>
</view>
<!-- 订单金额 -->
<view class="flex-row mt-14">
<view class="flex-col justify-start text-wrapper_8">
<text class="font_5 text_13">总额：￥{{item.totalAmount}}</text>
</view>
<view class="flex-col justify-start text-wrapper_9 ml-16">
<text class="font_5 text_14">净成交：￥{{item.netAmount}}</text>
</view>
</view>
</view>
</view>
</view> </view>

374
pages/dashboardModule/performanceRanking/performanceRanking.wxss
View File

@ -1,220 +1,188 @@
.mt-27 { /* ===== 页面框架 ===== */
margin-top: 50.63rpx;
}
.mt-19 {
margin-top: 35.63rpx;
}
.ml-7 {
margin-left: 13.13rpx;
}
.page { .page {
padding: 71.06rpx 42.19rpx 199.69rpx 44.06rpx; background: #fefbf6;
background-color: #fefbf6; min-height: 100vh;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040; display: flex;
flex-direction: column;
}
.page-title {
padding: 24rpx 24rpx 0;
}
.title {
font-size: 40rpx;
font-weight: 700;
color: #ff8a00; /* 主色：亮橙 */
}
.content {
flex: 1;
padding: 24rpx;
box-sizing: border-box;
}
/* 隐藏滚动条 */
.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);
}
.card + .card { margin-top: 20rpx; }
/* ===== 表单区 ===== */
.form-card .field + .field { margin-top: 20rpx; }
.field-label {
font-size: 28rpx;
color: #555555;
margin-bottom: 12rpx;
display: block;
}
/* 输入框 */
.input-box {
height: 84rpx;
border-radius: 12rpx;
border: 2rpx solid #ffeaa7;
background: #ffffff;
padding: 0 20rpx;
display: flex;
align-items: center;
}
.input {
flex: 1;
font-size: 28rpx;
color: #1f1f1f;
}
/* 选择器行 */
.picker-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16rpx;
}
.picker-box {
height: 84rpx;
border-radius: 12rpx;
border: 2rpx solid #ffeaa7;
background: #ffffff;
display: flex;
align-items: center;
}
.picker-inner {
padding: 0 20rpx;
width: 100%; width: 100%;
overflow-y: auto; height: 84rpx;
overflow-x: hidden; display: flex;
height: 100%; align-items: center;
justify-content: space-between;
} }
.text { .picker-text { font-size: 28rpx; color: #1f1f1f; }
color: #e67e22; .arrow { width: 28rpx; height: 28rpx; }
font-size: 45rpx;
font-family: SourceHanSansCN; /* 搜索按钮 */
font-weight: 700; .btn {
line-height: 42.84rpx; height: 88rpx;
} border-radius: 999rpx;
.section { display: flex;
padding: 45.75rpx 42.99rpx 34.82rpx; align-items: center;
background-color: #ffffff; justify-content: center;
border-radius: 23.47rpx;
border: solid 1.88rpx #ffeaa7;
}
.text-wrapper {
margin-top: 14.49rpx;
padding: 17.63rpx 0 14.63rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
width: 403.13rpx;
border: solid 1.88rpx #ffeaa7;
}
.text_3 {
margin-left: 15.19rpx;
}
.font {
font-size: 30rpx; font-size: 30rpx;
font-family: SourceHanSansCN; font-weight: 600;
line-height: 28.14rpx; margin-top: 24rpx;
color: #66666b;
} }
.text_2 { .btn-primary {
margin-left: 2.63rpx; background: linear-gradient(180deg, #ffa400 0%, #ff8a00 100%);
line-height: 27.75rpx;
}
.text_4 {
line-height: 27.75rpx;
}
.text_5 {
margin-left: 2.44rpx;
margin-top: 41.32rpx;
line-height: 27.6rpx;
}
.text-wrapper_1 {
margin-top: 14.51rpx;
padding: 17.66rpx 0 14.64rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
width: 403.13rpx;
border: solid 1.88rpx #ffeaa7;
}
.text_6 {
line-height: 27.69rpx;
}
.text_7 {
margin-left: 2.19rpx;
margin-top: 41.18rpx;
line-height: 27.84rpx;
}
.equal-division {
align-self: stretch;
margin-right: 4.01rpx;
margin-top: 16.29rpx;
}
.section_2 {
flex: 1 1 270rpx;
}
.section_1 {
padding: 17.68rpx 14.19rpx 14.34rpx 14.89rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
height: 63.75rpx;
border: solid 1.88rpx #ffeaa7;
}
.text_1 {
line-height: 27.94rpx;
}
.image {
width: 26.25rpx;
height: 26.25rpx;
}
.section_3 {
padding: 17.61rpx 16.27rpx 14.55rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
height: 63.75rpx;
border: solid 1.88rpx #ffeaa7;
}
.text_16 {
line-height: 27.84rpx;
}
.text-wrapper_2 {
margin: 32.81rpx 4.97rpx 0 4.69rpx;
padding: 26.29rpx 0 21.02rpx;
background-color: #ffa400;
border-radius: 9.38rpx;
}
.text_8 {
color: #ffffff; color: #ffffff;
line-height: 27.69rpx; box-shadow: 0 6rpx 14rpx rgba(255,138,0,0.30);
} }
.list-item {
padding: 29.89rpx 29.87rpx 31.99rpx 33.62rpx; /* ===== 列表与条目 ===== */
background-color: #ffffff; .result-wrap { margin-top: 20rpx; }
border-radius: 18.75rpx;
border: solid 1.88rpx #ffeaa7; .item-card { padding-top: 20rpx; }
/* 顶部信息 */
.item-head {
display: flex;
align-items: center;
gap: 16rpx;
margin-bottom: 8rpx;
} }
.list-item:first-child { .rank-badge {
margin-top: 0; width: 64rpx;
height: 64rpx;
border-radius: 999rpx;
background: #f0f0f0;
border: 2rpx solid #e6e6e6;
display: flex;
align-items: center;
justify-content: center;
} }
.text-wrapper_4 { .rank-top {
padding: 17.93rpx 0 12.34rpx; background: #fff6e6;
background-color: #ffffff; border-color: #ffd6b3;
border-radius: 9.38rpx;
width: 52.5rpx;
height: 56.25rpx;
border: solid 1.88rpx #ffa400;
} }
.font_2 { .rank-text {
font-size: 30rpx; font-size: 28rpx;
font-family: SourceHanSansCN;
line-height: 24.02rpx;
font-weight: 700; font-weight: 700;
color: #ffa400; color: #ff8a00; /* 改为亮橙 */
} }
.text_9 {
line-height: 22.24rpx; .person-line {
display: flex;
align-items: baseline;
gap: 12rpx;
flex-wrap: wrap;
} }
.group { .name { font-size: 30rpx; font-weight: 600; color: #1f1f1f; }
margin-top: 22.18rpx; .phone { font-size: 26rpx; color: #666666; }
/* 指标 Chips */
.chips {
display: flex;
gap: 12rpx;
flex-wrap: wrap;
margin: 8rpx 0 4rpx;
} }
.font_3 { .chip {
font-size: 30rpx; padding: 10rpx 16rpx;
font-family: SourceHanSansCN; background: #f7f9fc;
line-height: 28.14rpx; color: #3d4f6e;
color: #000000; border: 1rpx solid #e6edf7;
border-radius: 12rpx;
font-size: 24rpx;
} }
.font_4 {
font-size: 26.25rpx; /* 金额类键值行 */
font-family: SourceHanSansCN; .kv {
line-height: 19.93rpx; display: flex;
color: #66666b; align-items: center;
justify-content: space-between;
padding: 12rpx 0;
border-top: 1rpx dashed #f0f0f0;
} }
.text-wrapper_5 { .kv:first-of-type { border-top: 0; }
padding: 16.71rpx 0 12.71rpx; .kv-key { font-size: 26rpx; color: #666666; }
background-color: #ffffff; .kv-val { font-size: 28rpx; color: #1f1f1f; }
border-radius: 28.13rpx; .money { color: #ff8a00; font-weight: 700; }
width: 146.25rpx;
height: 56.25rpx; /* ===== 空状态 ===== */
border: solid 1.88rpx #ffa400; .empty {
} padding: 120rpx 0 40rpx;
.font_5 { display: flex;
font-size: 26.25rpx; flex-direction: column;
font-family: SourceHanSansCN; align-items: center;
line-height: 24.02rpx; color: #999999;
color: #000000;
}
.text_11 {
line-height: 23.08rpx;
}
.text-wrapper_6 {
padding: 15.51rpx 0 12.56rpx;
background-color: #ffffff;
border-radius: 28.13rpx;
width: 146.25rpx;
height: 56.25rpx;
border: solid 1.88rpx #ffa400;
}
.text_12 {
line-height: 24.43rpx;
}
.text-wrapper_7 {
padding: 15.62rpx 0 12.86rpx;
background-color: #ffffff;
border-radius: 28.13rpx;
width: 146.25rpx;
height: 56.25rpx;
border: solid 1.88rpx #ffa400;
}
.text-wrapper_8 {
padding: 14.87rpx 0 13.41rpx;
background-color: #ffffff;
border-radius: 28.13rpx;
height: 56.25rpx;
border: solid 1.88rpx #ffa400;
}
.text_13 {
margin-left: 16.86rpx;
margin-right: 11.27rpx;
line-height: 24.23rpx;
}
.text-wrapper_9 {
padding: 14.61rpx 0 13.33rpx;
background-color: #ffffff;
border-radius: 28.13rpx;
height: 56.25rpx;
border: solid 1.88rpx #ffa400;
}
.text_14 {
margin-left: 18.86rpx;
margin-right: 9.26rpx;
line-height: 24.56rpx;
} }
.empty-img { width: 300rpx; height: 300rpx; margin-bottom: 16rpx; }
.empty-text { font-size: 26rpx; }

4
pages/dashboardModule/staffPerformance/staffPerformance.js
View File

@ -1,4 +1,5 @@
import { baseUrl } from "../../../request"; import { baseUrl } from "../../../request";
const { notLogin } = require('../../../utils/util')
// pages/dashboardModule/supervisorPerformance/supervisorPerformance.js // pages/dashboardModule/supervisorPerformance/supervisorPerformance.js
Page({ Page({
@ -45,7 +46,7 @@ Page({
this.setData({ performanceList: listWithRate }); this.setData({ performanceList: listWithRate });
this.setData({ showList: true }); this.setData({ showList: true });
} else { } else {
wx.showToast({ title: res.data.message || '查询失败', icon: 'none' }); notLogin(res.data.message)
} }
}, },
fail: () => { fail: () => {
@ -98,6 +99,7 @@ Page({
}, },
onLoad(options) { onLoad(options) {
console.log('========>', options)
this.setData({ this.setData({
supervisorUserId: options.supId, supervisorUserId: options.supId,
}) })

201
pages/dashboardModule/staffPerformance/staffPerformance.wxml
View File

@ -1,131 +1,128 @@
<!-- pages/dashboardModule/supervisorPerformance/supervisorPerformance.wxml --> <!-- pages/dashboardModule/supervisorPerformance/supervisorPerformance.wxml -->
<view class="flex-col page"> <view class="page">
<!-- 标题 --> <!-- 标题 -->
<text class="self-center text">员工业绩报表</text> <view class="page-title">
<text class="title">员工业绩报表</text>
</view>
<!-- 搜索表单 --> <scroll-view scroll-y class="content no-scrollbar">
<view class="flex-col self-stretch mt-19"> <!-- 搜索表单 -->
<view class="flex-col section"> <view class="card form-card">
<!-- 主管名称 --> <!-- 员工名称 -->
<view class="flex-col items-start"> <view class="field">
<text class="font text_2">员工名称</text> <text class="field-label">员工名称</text>
<view class="flex-col justify-start items-start text-wrapper mt-7"> <view class="input-box">
<input <input
class="text_3 font text_4" class="input"
placeholder="请输入员工名称" placeholder="请输入员工名称"
placeholder-class="ph"
bindinput="onNameInput" bindinput="onNameInput"
value="{{nickName}}" value="{{ nickName }}"
/> />
</view> </view>
</view> </view>
<!-- 手机号 --> <!-- 手机号 -->
<view class="flex-col items-start mt-24"> <view class="field">
<text class="font text_1">手机号</text> <text class="field-label">手机号</text>
<view class="flex-col justify-start items-start text-wrapper_1 mt-8"> <view class="input-box">
<input <input
class="text_3 font text_5" class="input"
placeholder="请输入手机号" placeholder="请输入手机号"
placeholder-class="ph"
bindinput="onPhoneInput" bindinput="onPhoneInput"
value="{{phoneNumber}}" value="{{ phoneNumber }}"
maxLength="11" type="number"
maxlength="11"
/> />
</view> </view>
</view> </view>
<!-- 搜索按钮 --> <!-- 搜索 -->
<view <view class="btn btn-primary" bindtap="onSearch">搜索</view>
class="flex-col justify-start items-center text-wrapper_2 mt-24"
bindtap="onSearch"
>
<text class="font text_6">搜索</text>
</view>
</view> </view>
</view>
<!-- 业绩列表，未搜索前不显示 --> <!-- 业绩列表 -->
<block wx:if="{{showList}}"> <block wx:if="{{ showList }}">
<view class="flex-col justify-start mt-28"> <!-- 空状态（可选） -->
<view class="flex-col"> <view wx:if="{{ !performanceList || performanceList.length === 0 }}" class="empty">
<view <image class="empty-img" src="/assets/empty-list.png" mode="aspectFit" />
class="flex-col list-item mt-25" <text class="empty-text">暂无数据</text>
wx:for="{{performanceList}}" </view>
wx:for-item="item"
wx:for-index="index" <!-- 列表卡片 -->
wx:key="item.id" <view wx:for="{{ performanceList }}"
> wx:key="item.id"
<!-- 基本信息 --> wx:for-item="item"
<view class="flex-row justify-between self-stretch group"> wx:for-index="index"
<view class="flex-col items-start self-center"> class="card perf-card">
<text class="font_2">编号：{{index + 1}}</text>
<text class="font text_8 mt-13">员工：{{item.nickName}}</text> <!-- 顶部：编号 + 员工 + 跳转 -->
</view> <view class="topline">
<view class="flex-col justify-start self-start text-wrapper_4" bind:tap="gotoUser" data-id="{{ item.userId }}"> <view class="id-and-name">
<text class="font_3 text_7">客户订单明细>></text> <text class="no">编号：{{ index + 1 }}</text>
</view> <text class="name">员工：{{ item.nickName }}</text>
</view> </view>
<view class="link-btn" bind:tap="gotoUser" data-id="{{ item.userId }}">
<!-- 手机号 & 复制 --> <text class="link-text">客户订单明细 >></text>
<view class="flex-row self-start section_3">
<text class="font_4">手机号：{{item.phoneNumber}}</text>
<text
class="font_3 text_9"
bindtap="onCopyPhone"
data-phone="{{item.phoneNumber}}"
>复制</text>
</view> </view>
</view>
<!-- 员工数 & 抽成比例 --> <!-- 手机号 + 复制 -->
<view class="flex-row self-stretch group_2"> <view class="row">
<view class="flex-col justify-start text-wrapper_5"> <text class="row-key">手机号</text>
<text class="font_4 text_10">客户数：{{item.empCount}}</text> <view class="row-val">
</view> <text class="mono">{{ item.phoneNumber }}</text>
<view class="flex-col justify-start text-wrapper_6 ml-10"> <text class="copy" bindtap="onCopyPhone" data-phone="{{ item.phoneNumber }}">复制</text>
<text class="font_4 text_11">比例：{{item.ratePercent}}%</text>
</view>
</view> </view>
</view>
<!-- 业绩网格 --> <!-- 客户数 + 抽成比例（徽章） -->
<view class="self-stretch group_3"> <view class="chips">
<view class="flex-col items-start grid-item"> <view class="chip">客户数：{{ item.empCount }}</view>
<text class="font_5 text_12">下单量</text> <view class="chip">比例：{{ item.ratePercent }}%</view>
<text class="font_6 mt-18">{{item.orderCount}}</text> </view>
</view>
<view class="flex-col items-start grid-item_2"> <!-- 业绩九宫格 -->
<text class="font_5 text_13">总订单</text> <view class="grid">
<text class="font_6 text_15 mt-18">￥{{item.totalAmount}}</text> <view class="grid-item">
</view> <text class="gi-label">下单量</text>
<view class="flex-col items-start grid-item_3"> <text class="gi-value">{{ item.orderCount }}</text>
<text class="font_5 text_14">净成交</text> </view>
<text class="font_6 text_16 mt-17">￥{{item.netAmount}}</text> <view class="grid-item">
</view> <text class="gi-label">总订单</text>
<view class="flex-col items-start grid-item_4"> <text class="gi-value money">￥{{ item.totalAmount }}</text>
<text class="font_5 text_17">待释放</text> </view>
<text class="font_6 text_18 mt-18">￥{{item.toRelease}}</text> <view class="grid-item">
</view> <text class="gi-label">净成交</text>
<view class="flex-col items-start grid-item_5"> <text class="gi-value money">￥{{ item.netAmount }}</text>
<text class="font_5">可结算</text> </view>
<text class="font_6 mt-18">{{item.toSettle}}</text> <view class="grid-item">
</view> <text class="gi-label">待释放</text>
<view class="flex-col items-start grid-item_6"> <text class="gi-value money">￥{{ item.toRelease }}</text>
<text class="font_5">已结算</text> </view>
<text class="font_6 text_19 mt-18">￥{{item.settled}}</text> <view class="grid-item">
</view> <text class="gi-label">可结算</text>
<view class="flex-col items-start grid-item_7"> <text class="gi-value">{{ item.toSettle }}</text>
<text class="font_5 text_20">推广数</text> </view>
<text class="font_6 mt-17">{{item.promoCount}}</text> <view class="grid-item">
</view> <text class="gi-label">已结算</text>
<view class="flex-col items-start grid-item_8"> <text class="gi-value money">￥{{ item.settled }}</text>
<text class="font_5 text_21">退款</text> </view>
<text class="font_6 text_23 mt-18">￥{{item.refunded}}</text> <view class="grid-item">
</view> <text class="gi-label">推广数</text>
<view class="flex-col items-start grid-item_9"> <text class="gi-value">{{ item.promoCount }}</text>
<text class="font_5 text_22">已回退</text> </view>
<text class="font_6 text_24 mt-18">￥0</text> <view class="grid-item">
</view> <text class="gi-label">退款</text>
<text class="gi-value money">￥{{ item.refunded }}</text>
</view>
<view class="grid-item">
<text class="gi-label">已回退</text>
<text class="gi-value money">￥0</text>
</view> </view>
</view> </view>
</view> </view>
</view> </block>
</block> </scroll-view>
</view> </view>

419
pages/dashboardModule/staffPerformance/staffPerformance.wxss
View File

@ -1,289 +1,176 @@
.mt-19 { /* 基础 */
margin-top: 35.63rpx;
}
.mt-7 {
margin-top: 13.13rpx;
}
.mt-25 {
margin-top: 46.88rpx;
}
.mt-13 {
margin-top: 24.38rpx;
}
.mt-17 {
margin-top: 31.88rpx;
}
.page { .page {
padding: 71.06rpx 42.19rpx 117.19rpx 43.99rpx; background: #fefbf6; /* 暖米黄背景 */
background-color: #fefbf6; min-height: 100vh;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040; display: flex;
width: 100%; flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
} }
.text {
color: #e67e22; .page-title { padding: 24rpx 24rpx 0; }
font-size: 45rpx; .title {
font-family: SourceHanSansCN; color: #ff8a00; /* 主标题亮橙 */
font-size: 40rpx;
font-weight: 700; font-weight: 700;
line-height: 42.75rpx;
} }
.section {
padding: 45.75rpx 39.26rpx 47.94rpx 42.99rpx; .content {
background-color: #ffffff; flex: 1;
border-radius: 18.75rpx; padding: 24rpx;
border: solid 1.88rpx #ffeaa7; box-sizing: border-box;
} }
.text-wrapper {
padding: 17.63rpx 0 14.63rpx; /* 隐藏滚动条 */
background-color: #ffffff; .no-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; }
border-radius: 9.38rpx;
width: 403.13rpx; /* 卡片 */
border: solid 1.88rpx #ffeaa7; .card {
background: #ffffff;
border-radius: 18rpx;
padding: 24rpx;
border: 2rpx solid #ffeaa7; /* 浅橙描边 */
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.05);
} }
.text_3 { .card + .card { margin-top: 20rpx; }
margin-left: 15.19rpx;
/* 表单 */
.form-card .field + .field { margin-top: 20rpx; }
.field-label {
font-size: 28rpx;
color: #555555;
margin-bottom: 12rpx;
display: block;
} }
.font {
.input-box {
background: #ffffff;
border: 2rpx solid #ffeaa7;
border-radius: 12rpx;
padding: 0 20rpx;
height: 84rpx;
display: flex;
align-items: center;
}
.input {
flex: 1;
font-size: 28rpx;
color: #1f1f1f;
}
.ph { color: #b8b8b8; }
/* 按钮 */
.btn {
height: 88rpx;
border-radius: 999rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx; font-size: 30rpx;
font-family: SourceHanSansCN; font-weight: 600;
line-height: 27.6rpx; margin-top: 24rpx;
color: #66666b;
} }
.text_2 { .btn-primary {
margin-left: 2.63rpx; background: linear-gradient(180deg, #ffa400 0%, #ff8a00 100%);
line-height: 27.75rpx;
}
.text_4 {
line-height: 27.75rpx;
}
.text_1 {
margin-left: 2.44rpx;
}
.text-wrapper_1 {
padding: 17.66rpx 0 14.64rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
width: 403.13rpx;
border: solid 1.88rpx #ffeaa7;
}
.text_5 {
line-height: 27.69rpx;
}
.text-wrapper_2 {
margin-right: 12.43rpx;
padding: 26.29rpx 0 21.02rpx;
background-color: #ffa400;
border-radius: 9.38rpx;
}
.text_6 {
color: #ffffff; color: #ffffff;
line-height: 27.69rpx; box-shadow: 0 6rpx 14rpx rgba(255,138,0,0.30);
} }
.list-item {
padding-bottom: 38.57rpx; /* 空状态 */
background-color: #ffffff; .empty {
border-radius: 16.48rpx; padding: 120rpx 0 40rpx;
border: solid 1.88rpx #ffeaa7; display: flex;
flex-direction: column;
align-items: center;
color: #999999;
} }
.list-item:first-child { .empty-img { width: 300rpx; height: 300rpx; margin-bottom: 16rpx; }
margin-top: 0; .empty-text { font-size: 26rpx; }
/* 列表头部行 */
.topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16rpx;
margin-bottom: 8rpx;
} }
.group { .id-and-name {
padding: 33.62rpx 32.01rpx 31.22rpx 35.33rpx; display: flex;
align-items: baseline;
gap: 16rpx;
flex-wrap: wrap;
} }
.font_2 { .no { font-size: 24rpx; color: #666666; }
font-size: 33.75rpx; .name { font-size: 28rpx; color: #1f1f1f; font-weight: 600; }
font-family: SourceHanSansCN;
line-height: 31.82rpx; .link-btn {
font-weight: 700; height: 56rpx;
color: #e88b38; padding: 0 18rpx;
border-radius: 999rpx;
background: #fff6e6;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1rpx solid #ffd6b3;
} }
.text_8 { .link-text { font-size: 24rpx; color: #ff8a00; font-weight: 600; }
line-height: 27.86rpx;
/* 键值行 */
.row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12rpx 0;
border-top: 1rpx dashed #f0f0f0;
} }
.text-wrapper_4 { .row-key { font-size: 26rpx; color: #666666; }
padding: 18.51rpx 0 15.28rpx; .row-val { display: flex; align-items: center; gap: 16rpx; }
background-color: #fefbf6; .mono { font-size: 28rpx; color: #1f1f1f; font-family: monospace; letter-spacing: 1rpx; }
border-radius: 9.38rpx; .copy {
height: 61.88rpx; font-size: 24rpx;
border: solid 1.88rpx #ffeaa7; color: #ff8a00;
padding: 8rpx 14rpx;
border-radius: 12rpx;
background: #fff4f2;
border: 1rpx solid #ffd6cc;
} }
.font_3 {
font-size: 26.25rpx; /* 徽章 Chips */
font-family: SourceHanSansCN; .chips { display: flex; gap: 12rpx; flex-wrap: wrap; margin: 12rpx 0 4rpx; }
line-height: 24.3rpx; .chip {
color: #e88b38; padding: 10rpx 16rpx;
background: #f7f9fc;
color: #3d4f6e;
border: 1rpx solid #e6edf7;
border-radius: 12rpx;
font-size: 24rpx;
} }
.text_7 {
margin-left: 19.41rpx; /* 九宫格 */
margin-right: 10.59rpx; .grid {
line-height: 24.34rpx; margin-top: 8rpx;
} margin-left: -10rpx;
.section_3 { margin-right: -10rpx;
margin-left: 33.62rpx; display: flex;
padding: 17.76rpx 16.14rpx 14.64rpx 17.61rpx; flex-wrap: wrap;
background-color: #fefbf6;
border-radius: 9.38rpx;
border: solid 1.88rpx #ffeaa7;
}
.font_4 {
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 27.6rpx;
color: #333333;
}
.text_9 {
line-height: 24.15rpx;
margin-left: 20rpx;
}
.group_2 {
padding: 24.38rpx 33.75rpx 26.25rpx;
border-bottom: solid 1.88rpx #e88b38;
}
.text-wrapper_5 {
padding: 17.72rpx 0 14.53rpx;
background-color: #fefbf6;
border-radius: 9.38rpx;
height: 63.75rpx;
border: solid 1.88rpx #ffeaa7;
}
.text_10 {
margin-left: 17.08rpx;
margin-right: 7.29rpx;
line-height: 27.75rpx;
}
.text-wrapper_6 {
padding: 17.78rpx 0 14.63rpx;
background-color: #fefbf6;
border-radius: 9.38rpx;
height: 63.75rpx;
border: solid 1.88rpx #ffeaa7;
}
.text_11 {
margin-left: 13.93rpx;
}
.group_3 {
margin: 32.81rpx 29.19rpx 0 32.68rpx;
height: 487.5rpx;
display: grid;
grid-template-rows: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 29.19rpx;
column-gap: 31.07rpx;
} }
.grid-item { .grid-item {
padding: 32.49rpx 18.19rpx 31.44rpx; width: 33.3333%;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040); padding: 14rpx 10rpx;
background-color: #ffffff; box-sizing: border-box;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
} }
.font_5 { .gi-label { font-size: 24rpx; color: #666666; }
font-size: 26.25rpx; .gi-value {
font-family: SourceHanSansCN; display: block;
line-height: 24.3rpx; margin-top: 10rpx;
color: #66666b; font-size: 30rpx;
font-weight: 700;
color: #1f1f1f;
} }
.text_12 { .gi-value.money { color: #ff8a00; }
line-height: 24.02rpx;
} /* 小屏两列适配 */
.font_6 { @media (max-width: 360px) {
font-size: 26.25rpx; .grid-item { width: 50%; }
font-family: SourceHanSansCN;
line-height: 20.06rpx;
color: #e88b38;
}
.grid-item_2 {
padding: 32.42rpx 17.87rpx 31.18rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
}
.text_13 {
line-height: 24.09rpx;
}
.text_15 {
margin-left: 4.39rpx;
}
.grid-item_3 {
padding: 32.16rpx 18rpx 31.44rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
}
.text_14 {
line-height: 24.56rpx;
}
.text_16 {
margin-left: 3.32rpx;
}
.grid-item_4 {
padding: 32.34rpx 17.51rpx 31.44rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
}
.text_17 {
line-height: 24.26rpx;
}
.text_18 {
margin-left: 3.81rpx;
}
.grid-item_5 {
padding: 32.25rpx 18.21rpx 31.18rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
}
.grid-item_6 {
padding: 32.25rpx 19.18rpx 31.44rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
}
.text_19 {
margin-left: 2.14rpx;
}
.grid-item_7 {
padding: 32.36rpx 17.59rpx 31.44rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
}
.text_20 {
line-height: 24.43rpx;
}
.grid-item_8 {
padding: 32.38rpx 17.81rpx 31.18rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
}
.text_21 {
line-height: 24.17rpx;
}
.text_23 {
margin-left: 4.44rpx;
}
.grid-item_9 {
padding: 33.43rpx 19.18rpx 31.44rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
}
.text_22 {
line-height: 23.08rpx;
}
.text_24 {
margin-left: 2.14rpx;
} }

3
pages/dashboardModule/supervisorPerformance/supervisorPerformance.js
View File

@ -1,4 +1,5 @@
import { baseUrl } from "../../../request"; import { baseUrl } from "../../../request";
const { notLogin } = require('../../../utils/util')
// pages/dashboardModule/supervisorPerformance/supervisorPerformance.js // pages/dashboardModule/supervisorPerformance/supervisorPerformance.js
Page({ Page({
@ -44,7 +45,7 @@ Page({
this.setData({ performanceList: listWithRate }); this.setData({ performanceList: listWithRate });
this.setData({ showList: true }); this.setData({ showList: true });
} else { } else {
wx.showToast({ title: res.data.message || '查询失败', icon: 'none' }); notLogin(res.data.message)
} }
}, },
fail: () => { fail: () => {

197
pages/dashboardModule/supervisorPerformance/supervisorPerformance.wxml
View File

@ -1,131 +1,128 @@
<!-- pages/dashboardModule/supervisorPerformance/supervisorPerformance.wxml --> <!-- pages/dashboardModule/supervisorPerformance/supervisorPerformance.wxml -->
<view class="flex-col page"> <view class="page">
<!-- 标题 --> <!-- 标题 -->
<text class="self-center text">{{ showRole }}业绩报表</text> <view class="page-title">
<text class="title">{{ showRole }}业绩报表</text>
</view>
<!-- 搜索表单 --> <scroll-view scroll-y class="content no-scrollbar">
<view class="flex-col self-stretch mt-19"> <!-- 搜索表单 -->
<view class="flex-col section"> <view class="card form-card">
<!-- 主管名称 --> <!-- 主管名称 -->
<view class="flex-col items-start"> <view class="field">
<text class="font text_2">{{ showRole }}名称</text> <text class="field-label">{{ showRole }}名称</text>
<view class="flex-col justify-start items-start text-wrapper mt-7"> <view class="input-box">
<input <input
class="text_3 font text_4" class="input"
placeholder="请输入{{ showRole }}名称" placeholder="请输入{{ showRole }}名称"
placeholder-class="ph"
bindinput="onNameInput" bindinput="onNameInput"
value="{{nickName}}" value="{{ nickName }}"
/> />
</view> </view>
</view> </view>
<!-- 手机号 --> <!-- 手机号 -->
<view class="flex-col items-start mt-24"> <view class="field">
<text class="font text_1">手机号</text> <text class="field-label">手机号</text>
<view class="flex-col justify-start items-start text-wrapper_1 mt-8"> <view class="input-box">
<input <input
class="text_3 font text_5" class="input"
placeholder="请输入手机号" placeholder="请输入手机号"
placeholder-class="ph"
bindinput="onPhoneInput" bindinput="onPhoneInput"
value="{{phoneNumber}}" value="{{ phoneNumber }}"
maxLength="11" type="number"
maxlength="11"
/> />
</view> </view>
</view> </view>
<!-- 搜索按钮 --> <!-- 搜索按钮 -->
<view <view class="btn btn-primary" bindtap="onSearch">搜索</view>
class="flex-col justify-start items-center text-wrapper_2 mt-24"
bindtap="onSearch"
>
<text class="font text_6">搜索</text>
</view>
</view> </view>
</view>
<!-- 业绩列表，未搜索前不显示 --> <!-- 业绩列表（按需显示） -->
<block wx:if="{{showList}}"> <block wx:if="{{ showList }}">
<view class="flex-col justify-start mt-28"> <!-- 空状态（可选） -->
<view class="flex-col"> <view wx:if="{{ !performanceList || performanceList.length === 0 }}" class="empty">
<view <image class="empty-img" src="/assets/empty-list.png" mode="aspectFit" />
class="flex-col list-item mt-25" <text class="empty-text">暂无数据</text>
wx:for="{{performanceList}}" </view>
wx:for-item="item"
wx:for-index="index" <!-- 列表卡片 -->
wx:key="item.id" <view wx:for="{{ performanceList }}"
> wx:for-item="item"
<!-- 基本信息 --> wx:for-index="index"
<view class="flex-row justify-between self-stretch group"> wx:key="item.id"
<view class="flex-col items-start self-center"> class="card perf-card">
<text class="font_2">编号：{{index + 1}}</text>
<text class="font text_8 mt-13">主管：{{item.nickName}}</text> <!-- 顶部：编号 + 主管 + 跳转员工绩效 -->
</view> <view class="topline">
<view class="flex-col justify-start self-start text-wrapper_4" bind:tap="changeStaff" data-id="{{ item.userId }}"> <view class="id-and-name">
<text class="font_3 text_7">员工绩效排名>></text> <text class="no">编号：{{ index + 1 }}</text>
</view> <text class="name">主管：{{ item.nickName }}</text>
</view> </view>
<view class="link-btn" bind:tap="changeStaff" data-id="{{ item.userId }}">
<!-- 手机号 & 复制 --> <text class="link-text">员工绩效排名 >></text>
<view class="flex-row self-start section_3">
<text class="font_4">手机号：{{item.phoneNumber}}</text>
<text
class="font_3 text_9"
bindtap="onCopyPhone"
data-phone="{{item.phoneNumber}}"
>复制</text>
</view> </view>
</view>
<!-- 员工数 & 抽成比例 --> <!-- 手机号 + 复制 -->
<view class="flex-row self-stretch group_2"> <view class="row">
<view class="flex-col justify-start text-wrapper_5"> <text class="row-key">手机号</text>
<text class="font_4 text_10">员工数：{{item.empCount}}</text> <view class="row-val">
</view> <text class="mono">{{ item.phoneNumber }}</text>
<view class="flex-col justify-start text-wrapper_6 ml-10"> <text class="copy" bindtap="onCopyPhone" data-phone="{{ item.phoneNumber }}">复制</text>
<text class="font_4 text_11">比例：{{item.ratePercent}}%</text>
</view>
</view> </view>
</view>
<!-- 业绩网格 --> <!-- 员工数 + 抽成比例（徽标 chip） -->
<view class="self-stretch group_3"> <view class="chips">
<view class="flex-col items-start grid-item"> <view class="chip">员工数：{{ item.empCount }}</view>
<text class="font_5 text_12">下单量</text> <view class="chip">比例：{{ item.ratePercent }}%</view>
<text class="font_6 mt-18">{{item.orderCount}}</text> </view>
</view>
<view class="flex-col items-start grid-item_2"> <!-- 业绩九宫格 -->
<text class="font_5 text_13">总订单</text> <view class="grid">
<text class="font_6 text_15 mt-18">￥{{item.totalAmount}}</text> <view class="grid-item">
</view> <text class="gi-label">下单量</text>
<view class="flex-col items-start grid-item_3"> <text class="gi-value">{{ item.orderCount }}</text>
<text class="font_5 text_14">净成交</text> </view>
<text class="font_6 text_16 mt-17">￥{{item.netAmount}}</text> <view class="grid-item">
</view> <text class="gi-label">总订单</text>
<view class="flex-col items-start grid-item_4"> <text class="gi-value">￥{{ item.totalAmount }}</text>
<text class="font_5 text_17">待释放</text> </view>
<text class="font_6 text_18 mt-18">￥{{item.toRelease}}</text> <view class="grid-item">
</view> <text class="gi-label">净成交</text>
<view class="flex-col items-start grid-item_5"> <text class="gi-value">￥{{ item.netAmount }}</text>
<text class="font_5">可结算</text> </view>
<text class="font_6 mt-18">{{item.toSettle}}</text> <view class="grid-item">
</view> <text class="gi-label">待释放</text>
<view class="flex-col items-start grid-item_6"> <text class="gi-value">￥{{ item.toRelease }}</text>
<text class="font_5">已结算</text> </view>
<text class="font_6 text_19 mt-18">￥{{item.settled}}</text> <view class="grid-item">
</view> <text class="gi-label">可结算</text>
<view class="flex-col items-start grid-item_7"> <text class="gi-value">{{ item.toSettle }}</text>
<text class="font_5 text_20">推广数</text> </view>
<text class="font_6 mt-17">{{item.promoCount}}</text> <view class="grid-item">
</view> <text class="gi-label">已结算</text>
<view class="flex-col items-start grid-item_8"> <text class="gi-value">￥{{ item.settled }}</text>
<text class="font_5 text_21">退款</text> </view>
<text class="font_6 text_23 mt-18">￥{{item.refunded}}</text> <view class="grid-item">
</view> <text class="gi-label">推广数</text>
<view class="flex-col items-start grid-item_9"> <text class="gi-value">{{ item.promoCount }}</text>
<text class="font_5 text_22">已回退</text> </view>
<text class="font_6 text_24 mt-18">￥0</text> <view class="grid-item">
</view> <text class="gi-label">退款</text>
<text class="gi-value">￥{{ item.refunded }}</text>
</view>
<view class="grid-item">
<text class="gi-label">已回退</text>
<text class="gi-value">￥0</text>
</view> </view>
</view> </view>
</view> </view>
</view> </block>
</block> </scroll-view>
</view> </view>

462
pages/dashboardModule/supervisorPerformance/supervisorPerformance.wxss
View File

@ -1,289 +1,237 @@
.mt-19 { /* ===== 页面与滚动 ===== */
margin-top: 35.63rpx;
}
.mt-7 {
margin-top: 13.13rpx;
}
.mt-25 {
margin-top: 46.88rpx;
}
.mt-13 {
margin-top: 24.38rpx;
}
.mt-17 {
margin-top: 31.88rpx;
}
.page { .page {
padding: 71.06rpx 42.19rpx 117.19rpx 43.99rpx; background: #fefbf6;
background-color: #fefbf6; min-height: 100vh;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040; display: flex;
width: 100%; flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
} }
.text {
color: #e67e22; .page-title {
font-size: 45rpx; padding: 24rpx 24rpx 0;
font-family: SourceHanSansCN; }
.title {
color: #ff8a00; /* 主标题亮橙 */
font-size: 40rpx;
font-weight: 700; font-weight: 700;
line-height: 42.75rpx;
} }
.section {
padding: 45.75rpx 39.26rpx 47.94rpx 42.99rpx; .content {
background-color: #ffffff; flex: 1;
border-radius: 18.75rpx; padding: 24rpx;
border: solid 1.88rpx #ffeaa7; box-sizing: border-box;
} }
.text-wrapper {
padding: 17.63rpx 0 14.63rpx; .no-scrollbar::-webkit-scrollbar {
background-color: #ffffff; width: 0;
border-radius: 9.38rpx; height: 0;
width: 403.13rpx; display: none;
border: solid 1.88rpx #ffeaa7;
} }
.text_3 {
margin-left: 15.19rpx; /* ===== 卡片通用 ===== */
.card {
background: #ffffff;
border-radius: 18rpx;
padding: 24rpx;
border: 2rpx solid #ffeaa7; /* 浅橙描边 */
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.05);
} }
.font { .card + .card { margin-top: 20rpx; }
/* ===== 表单 ===== */
.form-card .field + .field { margin-top: 20rpx; }
.field-label {
font-size: 28rpx;
color: #555555;
margin-bottom: 12rpx;
display: block;
}
.input-box {
background: #ffffff;
border: 2rpx solid #ffeaa7;
border-radius: 12rpx;
padding: 0 20rpx;
height: 84rpx;
display: flex;
align-items: center;
}
.input {
flex: 1;
font-size: 28rpx;
color: #1f1f1f;
}
.ph {
color: #b8b8b8;
}
/* 按钮 */
.btn {
height: 88rpx;
border-radius: 999rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx; font-size: 30rpx;
font-family: SourceHanSansCN; font-weight: 600;
line-height: 27.6rpx; margin-top: 24rpx;
color: #66666b;
} }
.text_2 {
margin-left: 2.63rpx; .btn-primary {
line-height: 27.75rpx; background: linear-gradient(180deg, #ffa400 0%, #ff8a00 100%);
}
.text_4 {
line-height: 27.75rpx;
}
.text_1 {
margin-left: 2.44rpx;
}
.text-wrapper_1 {
padding: 17.66rpx 0 14.64rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
width: 403.13rpx;
border: solid 1.88rpx #ffeaa7;
}
.text_5 {
line-height: 27.69rpx;
}
.text-wrapper_2 {
margin-right: 12.43rpx;
padding: 26.29rpx 0 21.02rpx;
background-color: #ffa400;
border-radius: 9.38rpx;
}
.text_6 {
color: #ffffff; color: #ffffff;
line-height: 27.69rpx; box-shadow: 0 6rpx 14rpx rgba(255, 138, 0, 0.30);
} }
.list-item {
padding-bottom: 38.57rpx; /* ===== 空状态 ===== */
background-color: #ffffff; .empty {
border-radius: 16.48rpx; padding: 120rpx 0 40rpx;
border: solid 1.88rpx #ffeaa7; display: flex;
flex-direction: column;
align-items: center;
color: #999999;
} }
.list-item:first-child { .empty-img { width: 300rpx; height: 300rpx; margin-bottom: 16rpx; }
margin-top: 0; .empty-text { font-size: 26rpx; }
/* ===== 业绩卡片 ===== */
.topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16rpx;
margin-bottom: 8rpx;
} }
.group {
padding: 33.62rpx 32.01rpx 31.22rpx 35.33rpx; .id-and-name {
display: flex;
align-items: baseline;
gap: 16rpx;
flex-wrap: wrap;
} }
.font_2 {
font-size: 33.75rpx; .no {
font-family: SourceHanSansCN; font-size: 24rpx;
line-height: 31.82rpx; color: #666666;
font-weight: 700;
color: #e88b38;
} }
.text_8 {
line-height: 27.86rpx; .name {
font-size: 28rpx;
color: #1f1f1f;
font-weight: 600;
} }
.text-wrapper_4 {
padding: 18.51rpx 0 15.28rpx; .link-btn {
background-color: #fefbf6; height: 56rpx;
border-radius: 9.38rpx; padding: 0 18rpx;
height: 61.88rpx; border-radius: 999rpx;
border: solid 1.88rpx #ffeaa7; background: #fff6e6;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1rpx solid #ffd6b3;
} }
.font_3 {
font-size: 26.25rpx; .link-text {
font-family: SourceHanSansCN; font-size: 24rpx;
line-height: 24.3rpx; color: #ff8a00;
color: #e88b38; font-weight: 600;
} }
.text_7 {
margin-left: 19.41rpx; /* 行：键值对 */
margin-right: 10.59rpx; .row {
line-height: 24.34rpx; display: flex;
align-items: center;
justify-content: space-between;
padding: 12rpx 0;
border-top: 1rpx dashed #f0f0f0;
} }
.section_3 {
margin-left: 33.62rpx; .row-key {
padding: 17.76rpx 16.14rpx 14.64rpx 17.61rpx; font-size: 26rpx;
background-color: #fefbf6; color: #666666;
border-radius: 9.38rpx;
border: solid 1.88rpx #ffeaa7;
} }
.font_4 {
font-size: 30rpx; .row-val {
font-family: SourceHanSansCN; display: flex;
line-height: 27.6rpx; align-items: center;
color: #333333; gap: 16rpx;
} }
.text_9 {
line-height: 24.15rpx; .mono {
margin-left: 20rpx; font-size: 28rpx;
color: #1f1f1f;
font-family: monospace;
letter-spacing: 1rpx;
} }
.group_2 {
padding: 24.38rpx 33.75rpx 26.25rpx; .copy {
border-bottom: solid 1.88rpx #e88b38; font-size: 24rpx;
color: #ff8a00;
padding: 8rpx 14rpx;
border-radius: 12rpx;
background: #fff4f2;
border: 1rpx solid #ffd6cc;
} }
.text-wrapper_5 {
padding: 17.72rpx 0 14.53rpx; /* 徽标 chips */
background-color: #fefbf6; .chips {
border-radius: 9.38rpx; display: flex;
height: 63.75rpx; gap: 12rpx;
border: solid 1.88rpx #ffeaa7; flex-wrap: wrap;
margin: 12rpx 0 4rpx;
} }
.text_10 {
margin-left: 17.08rpx; .chip {
margin-right: 7.29rpx; padding: 10rpx 16rpx;
line-height: 27.75rpx; background: #f7f9fc;
color: #3d4f6e;
border: 1rpx solid #e6edf7;
border-radius: 12rpx;
font-size: 24rpx;
} }
.text-wrapper_6 {
padding: 17.78rpx 0 14.63rpx; /* 九宫格：3 列自适应 */
background-color: #fefbf6; .grid {
border-radius: 9.38rpx; margin-top: 8rpx;
height: 63.75rpx; margin-left: -10rpx;
border: solid 1.88rpx #ffeaa7; margin-right: -10rpx;
} display: flex;
.text_11 { flex-wrap: wrap;
margin-left: 13.93rpx;
}
.group_3 {
margin: 32.81rpx 29.19rpx 0 32.68rpx;
height: 487.5rpx;
display: grid;
grid-template-rows: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 29.19rpx;
column-gap: 31.07rpx;
} }
.grid-item { .grid-item {
padding: 32.49rpx 18.19rpx 31.44rpx; width: 33.3333%;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040); padding: 14rpx 10rpx;
background-color: #ffffff; box-sizing: border-box;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
} }
.font_5 {
font-size: 26.25rpx; .gi-label {
font-family: SourceHanSansCN; font-size: 24rpx;
line-height: 24.3rpx; color: #666666;
color: #66666b;
} }
.text_12 {
line-height: 24.02rpx; .gi-value {
display: block;
margin-top: 10rpx;
font-size: 30rpx;
font-weight: 700;
color: #1f1f1f;
} }
.font_6 {
font-size: 26.25rpx; /* 金额类，用主题橙强调 */
font-family: SourceHanSansCN; .grid-item:nth-child(2) .gi-value,
line-height: 20.06rpx; .grid-item:nth-child(3) .gi-value,
color: #e88b38; .grid-item:nth-child(4) .gi-value,
.grid-item:nth-child(6) .gi-value,
.grid-item:nth-child(8) .gi-value,
.grid-item:nth-child(9) .gi-value {
color: #ff8a00;
} }
.grid-item_2 {
padding: 32.42rpx 17.87rpx 31.18rpx; /* 小屏两列适配 */
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040); @media (max-width: 360px) {
background-color: #ffffff; .grid-item { width: 50%; }
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
}
.text_13 {
line-height: 24.09rpx;
}
.text_15 {
margin-left: 4.39rpx;
}
.grid-item_3 {
padding: 32.16rpx 18rpx 31.44rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
}
.text_14 {
line-height: 24.56rpx;
}
.text_16 {
margin-left: 3.32rpx;
}
.grid-item_4 {
padding: 32.34rpx 17.51rpx 31.44rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
}
.text_17 {
line-height: 24.26rpx;
}
.text_18 {
margin-left: 3.81rpx;
}
.grid-item_5 {
padding: 32.25rpx 18.21rpx 31.18rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
}
.grid-item_6 {
padding: 32.25rpx 19.18rpx 31.44rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
}
.text_19 {
margin-left: 2.14rpx;
}
.grid-item_7 {
padding: 32.36rpx 17.59rpx 31.44rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
}
.text_20 {
line-height: 24.43rpx;
}
.grid-item_8 {
padding: 32.38rpx 17.81rpx 31.18rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
}
.text_21 {
line-height: 24.17rpx;
}
.text_23 {
margin-left: 4.44rpx;
}
.grid-item_9 {
padding: 33.43rpx 19.18rpx 31.44rpx;
filter: drop-shadow(0rpx 3.75rpx 3.75rpx #00000040);
background-color: #ffffff;
border-radius: 9.38rpx;
border: solid 1.88rpx #f1c40f;
}
.text_22 {
line-height: 23.08rpx;
}
.text_24 {
margin-left: 2.14rpx;
} }

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

@ -1,4 +1,5 @@
import { baseUrl } from "../../../request"; import { baseUrl } from "../../../request";
const { notLogin } = require('../../../utils/util')
// pages/dashboardModule/userOrderPerformance/userOrderPerformance.js // pages/dashboardModule/userOrderPerformance/userOrderPerformance.js
Page({ Page({
@ -28,12 +29,12 @@ Page({
const { orderNumber, staffUserId } = this.data; const { orderNumber, staffUserId } = this.data;
// 简单校验：非空 // 简单校验：非空
if (!orderNumber) { // if (!orderNumber) {
return wx.showToast({ // return wx.showToast({
title: '请输入订单号', // title: '请输入订单号',
icon: 'none' // icon: 'none'
}); // });
} // }
// 发起 POST 请求 // 发起 POST 请求
wx.request({ wx.request({
@ -90,11 +91,8 @@ Page({
OrderItems: res.data.data OrderItems: res.data.data
}); });
} else { } else {
wx.showToast({
title: res.data.message || '未找到订单',
icon: 'none'
});
this.setData({ OrderItems: [] }); this.setData({ OrderItems: [] });
notLogin(res.data.message)
} }
}, },
fail: () => { fail: () => {

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

@ -1,94 +1,92 @@
<!-- pages/dashboardModule/userOrderPerformance/userOrderPerformance.wxml --> <!-- pages/dashboardModule/userOrderPerformance/userOrderPerformance.wxml -->
<view class="flex-col page"> <view class="page">
<text class="self-center text">客户订单明细</text> <!-- 标题 -->
<view class="page-title">
<text class="title">客户订单明细</text>
</view>
<view class="flex-col self-stretch mt-19"> <scroll-view scroll-y class="content no-scrollbar">
<view class="flex-col section"> <!-- 搜索表单 -->
<view class="flex-col group"> <view class="card form-card">
<text class="self-start font text_2">订单号</text> <view class="field">
<view class="flex-col justify-start items-start self-stretch text-wrapper"> <text class="field-label">订单号</text>
<view class="input-box">
<input <input
class="text_3 font text_1" class="input"
placeholder="请输入订单号" placeholder="请输入订单号"
value="{{orderNumber}}" placeholder-class="ph"
value="{{ orderNumber }}"
type="number"
bindinput="onOrderNumberInput" bindinput="onOrderNumberInput"
/> />
</view> </view>
</view> </view>
<view <view class="btn btn-primary" bindtap="searchOrder">搜索</view>
class="flex-col justify-start items-center text-wrapper_3"
bindtap="searchOrder"
>
<text class="font_2 text_7">搜索</text>
</view>
</view> </view>
<view class="flex-col mt-35"> <!-- 结果列表 -->
<!-- 有数据时渲染列表 --> <view class="result-wrap">
<block wx:if="{{OrderItems.length}}"> <!-- 有数据 -->
<block wx:if="{{ OrderItems.length }}">
<view <view
class="flex-col list-item mt-22" wx:for="{{ OrderItems }}"
wx:for="{{OrderItems}}"
wx:for-item="item" wx:for-item="item"
wx:for-index="index" wx:for-index="index"
wx:key="id" wx:key="id"
class="card order-card"
> >
<view class="flex-row items-baseline"> <!-- 顶部：订单号 + 状态徽标 -->
<text class="font_2 text_8">订单号：</text> <view class="topline">
<text class="font_3 ml-26">{{item.orderNumber}}</text> <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>
<view class="flex-row justify-between mt-19"> <!-- 键值对信息 -->
<text class="font_2 text_9">用户：</text> <view class="kv">
<text class="font_4 text_10">{{item.nickName}}</text> <text class="kv-key">用户</text>
<text class="kv-val">{{ item.nickName }}</text>
</view> </view>
<view class="flex-row justify-between items-center mt-19"> <view class="kv">
<text class="font_2 text_11">手机号：</text> <text class="kv-key">手机号</text>
<text class="font_3 text_12">{{item.phoneNumber}}</text> <text class="kv-val">{{ item.phoneNumber }}</text>
</view> </view>
<view class="flex-row justify-between items-center mt-19"> <view class="kv">
<text class="font_2 text_13">金额：</text> <text class="kv-key">金额</text>
<text class="font_3 text_24">￥{{item.totalAmount}}</text> <text class="kv-val money">￥{{ item.totalAmount }}</text>
</view> </view>
<view class="flex-row justify-between mt-19"> <view class="kv">
<text class="font_2 text_15">状态：</text> <text class="kv-key">抽成</text>
<text class="font_4 text_16">{{item.orderStatus}}</text> <text class="kv-val">主管：{{ item.firstRate * 100 }}%，员工：{{ item.secondRate * 100 }}%</text>
</view> </view>
<view class="flex-row justify-between mt-19"> <view class="kv">
<text class="font_2 text_17">抽成：</text> <text class="kv-key">奖励</text>
<text class="font_4 text_18"> <text class="kv-val">主管：¥{{ item.firstReward }}，员工：¥{{ item.secondReward }}</text>
主管：{{item.firstRate * 100}}%，员工：{{item.secondRate * 100}}%
</text>
</view> </view>
<view class="flex-row justify-between mt-19"> <view class="kv">
<text class="font_2 text_19">奖励：</text> <text class="kv-key">提成状态</text>
<text class="font_4 text_20"> <text class="kv-val">{{ item.commissionStatus }}</text>
主管：¥{{item.firstReward}}，员工：¥{{item.secondReward}}
</text>
</view> </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> </view>
</block> </block>
<!-- 无数据时提示 --> <!-- 无数据 -->
<block wx:else> <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> </block>
</view> </view>
</view> </scroll-view>
</view> </view>

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

@ -1,174 +1,133 @@
.mt-19 { /* ===== 页面与滚动 ===== */
margin-top: 35.63rpx;
}
.mt-35 {
margin-top: 65.63rpx;
}
.page { .page {
padding: 70.84rpx 42.19rpx 152.81rpx 44.06rpx; background: #fefbf6; /* 与你项目的暖米黄保持一致 */
background-color: #fefbf6; min-height: 100vh;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040; display: flex;
width: 100%; flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
} }
.text { .page-title { padding: 24rpx 24rpx 0; }
color: #e67e22; .title {
font-size: 45rpx; color: #ff8a00; /* 亮橙主色 */
font-family: SourceHanSansCN; font-size: 40rpx;
font-weight: 700; font-weight: 700;
line-height: 43.16rpx;
} }
.section {
padding: 0 35.76rpx 47.94rpx 41.12rpx; .content {
background-color: #ffffff; flex: 1;
border-radius: 18.75rpx; padding: 24rpx;
border: solid 1.88rpx #ffeaa7; box-sizing: border-box;
} }
.group { .no-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; }
padding: 47.87rpx 0 51.56rpx;
/* ===== 卡片 ===== */
.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 { .card + .card { margin-top: 20rpx; }
margin-right: 3.77rpx;
margin-top: 14.55rpx; /* ===== 表单 ===== */
padding: 17.66rpx 0 14.68rpx; .form-card .field + .field { margin-top: 20rpx; }
background-color: #ffffff; .field-label {
border-radius: 9.38rpx; font-size: 28rpx;
border: solid 1.88rpx #ffeaa7; color: #555555;
margin-bottom: 12rpx;
display: block;
} }
.text_3 { .input-box {
margin-left: 15.19rpx; height: 84rpx;
width: 500rpx; 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-size: 30rpx;
font-family: SourceHanSansCN; font-weight: 600;
line-height: 28.54rpx;
color: #66666b;
} }
.text_2 { .btn-primary {
margin-left: 2.44rpx; background: linear-gradient(180deg, #ffa400 0%, #ff8a00 100%);
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 {
color: #ffffff; color: #ffffff;
line-height: 27.69rpx; box-shadow: 0 6rpx 14rpx rgba(255,138,0,0.30);
} }
.list-item {
padding: 44.94rpx 7.14rpx 41.46rpx 29.68rpx; /* ===== 列表容器 ===== */
background-color: #ffffff; .result-wrap { margin-top: 20rpx; }
border-radius: 11.89rpx;
border: solid 1.88rpx #ffeaa7; /* 顶部行：订单号 + 状态徽标 */
.topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16rpx;
margin-bottom: 6rpx;
} }
.list-item:first-child { .row-left {
margin-top: 0; display: flex;
align-items: baseline;
gap: 12rpx;
flex-wrap: wrap;
} }
.text_8 { .label { font-size: 26rpx; color: #666666; }
line-height: 27.66rpx; .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 { .badge-text { font-size: 22rpx; font-weight: 600; }
font-size: 30rpx; .badge-pending{ background: #fff6e6; color: #ff8d1a; border: 1rpx solid #ffd6b3; }
font-family: SourceHanSansCN; .badge-success{ background: #e9fbef; color: #12b05b; border: 1rpx solid #b9f0cf; }
line-height: 22.76rpx; .badge-default{ background: #f0f0f0; color: #666666; border: 1rpx solid #e6e6e6; }
color: #444444;
/* 键值行 */
.kv {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12rpx 0;
border-top: 1rpx dashed #f0f0f0;
} }
.text_9 { .kv:first-of-type { border-top: 0; }
line-height: 28.24rpx; .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 { .money { color: #ff8a00; font-weight: 700; }
font-size: 30rpx;
font-family: SourceHanSansCN; /* 空状态 */
line-height: 28.54rpx; .empty {
color: #444444; padding: 120rpx 0 40rpx;
} display: flex;
.text_10 { flex-direction: column;
margin-right: 19.69rpx; align-items: center;
line-height: 27.84rpx; color: #999999;
}
.text_11 {
line-height: 27.81rpx;
}
.text_12 {
margin-right: 15.06rpx;
}
.text_13 {
line-height: 28.29rpx;
}
.text_24 {
margin-right: 6.41rpx;
}
.text_15 {
line-height: 28.01rpx;
}
.text_16 {
margin-right: 18.77rpx;
line-height: 28.09rpx;
}
.text_17 {
line-height: 28.16rpx;
}
.text_18 {
margin-right: 11.44rpx;
}
.text_19 {
line-height: 28.2rpx;
}
.text_20 {
margin-right: 7.76rpx;
}
.text_21 {
line-height: 28.31rpx;
}
.text_23 {
margin-right: 19.31rpx;
margin-bottom: 2.04rpx;
line-height: 27.79rpx;
} }
.empty-img { width: 300rpx; height: 300rpx; margin-bottom: 16rpx; }
.empty-text { font-size: 26rpx; }

21
pages/loginModule/employeeAccountApply/employeeAccountApply.js
View File

@ -40,9 +40,12 @@ Page({
// 3. 发送验证码请求 // 3. 发送验证码请求
wx.request({ wx.request({
url: baseUrl + '/userInfo/code/pwd', url: baseUrl + '/userInfo/code/register',
method: 'POST', method: 'POST',
data: { templateString: phone }, data: {
phoneNumber: phone,
userRole: 'staff'
},
success: (res) => { success: (res) => {
console.log('验证码发送--->',res.data); console.log('验证码发送--->',res.data);
if (res.data.code === 1) { if (res.data.code === 1) {
@ -158,6 +161,16 @@ Page({
return; return;
} }
// 校验身份证号
const idCardReg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
if (!idCardReg.test(idcard)) {
wx.showToast({
title: '身份证号格式不正确',
icon: 'none'
})
return ;
}
// 提交表单数据到后端 // 提交表单数据到后端
wx.request({ wx.request({
url: baseUrl + '/advancementApply/add', url: baseUrl + '/advancementApply/add',
@ -175,7 +188,7 @@ Page({
success: res => { success: res => {
console.log('后端返回的申请---->', res); console.log('后端返回的申请---->', res);
if (res.data.code === 1) { if (res.data.code === 1) {
wx.showToast({ title: '验证通过，提交成功', icon: 'success' }); wx.showToast({ title: '提交成功', icon: 'success' });
// 清空表单内容 // 清空表单内容
this.setData({ this.setData({
@ -189,7 +202,7 @@ Page({
credential: '' // 清空凭证 credential: '' // 清空凭证
}); });
} else { } else {
wx.showToast({ title: '系统错误', icon: 'error' }); wx.showToast({ title: res.data.message, icon: 'none' });
} }
} }
}); });

199
pages/loginModule/employeeAccountApply/employeeAccountApply.wxml
View File

@ -1,103 +1,108 @@
<view class="flex-col page"> <view class="page">
<!-- 遮罩层（上传时显示） -->
<view wx:if="{{isUploading}}" class="mask"> <!-- 遮罩层（上传时显示） -->
<text class="loading-text">上传中...</text> <view wx:if="{{isUploading}}" class="mask">
<text class="loading-text">上传中...</text>
</view>
<!-- 顶部 Logo / 标题 -->
<image class="logo" src="/static/logo.jpg" mode="aspectFit" />
<text class="page-title">员工申请 - 丁香校园</text>
<!-- 主卡片 -->
<view class="card">
<!-- 标题 + 须知入口 -->
<view class="card-head">
<text class="card-title">员工账号申请</text>
<view class="head-link" bind:tap="gotoNotice">
<text class="head-link-text">员工账号申请须知</text>
<image class="head-link-icon" src="./images/right.png" mode="aspectFit" />
</view>
</view> </view>
<image <!-- 表单 -->
class="self-center image" <view class="form">
src="./images/logo.png"
/> <!-- 姓名 -->
<text class="self-center text">欢迎登陆—青橙校园</text> <view class="field">
<view class="flex-col self-stretch group"> <input
<view class="flex-col"> class="field-input"
<view class="flex-row justify-between group_1"> placeholder="请输入姓名"
<text class="font text_2">员工账号申请</text> placeholder-class="ph"
<view class="flex-row items-center group_2" bind:tap="gotoNotice"> maxlength="8"
<image bindinput="onInput"
class="shrink-0 image_2 image_3" data-field="name"
src="./images/right.png" value="{{name}}"
/>
<text class="font_2 text_3">员工账号申请须知</text>
</view>
</view>
<view class="flex-col mt-15">
<!-- 姓名输入 -->
<view class="flex-col justify-start section">
<input
class="flex-col justify-start items-start text-wrapper view input"
placeholder="请输入姓名"
maxlength="8"
bindinput="onInput"
data-field="name"
value="{{name}}"
/>
</view>
<!-- 手机号输入 -->
<view class="flex-col justify-start section_1 mt-21">
<input
class="flex-col justify-start items-start text-wrapper text-wrapper_1 input_1"
placeholder="请输入手机号"
maxlength="11"
type="number"
bindinput="onInput"
data-field="phone"
value="{{phone}}"
/>
</view>
<!-- 验证码输入 + 发送按钮 -->
<view class="flex-row items-center section_3 mt-21">
<input
class="flex-col justify-start items-start text-wrapper_2 view_3 input_2"
placeholder="请输入验证码"
type="number"
bindinput="onInput"
data-field="code"
value="{{code}}"
/>
<view
class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-16"
bindtap="getSmsCode"
>
<text class="text_8">
{{ codeButtonText }}
</text>
</view>
</view>
<!-- 身份证号输入 -->
<view class="flex-col justify-start items-start section_2 mt-21">
<input
class="flex-col justify-start items-start text-wrapper_4 view_4 input_3"
placeholder="请输入身份证号"
type="idcard"
bindinput="onInput"
data-field="idcard"
maxlength="18"
value="{{idcard}}"
/>
</view>
<!-- 上传简历 -->
<view class="flex-col items-center section_4 mt-21" bindtap="chooseResume">
<image
class="image_4"
src="./images/resume.png"
/>
<text class="{{resumeUploaded?'upload-success-text':'font_2 text_10 mt-12'}}">
{{ resumeUploaded ? '简历上传成功！' : '点击上传简历' }}
</text>
</view>
<!-- 提交按钮 -->
<view class="flex-col justify-start items-center text-wrapper_5 mt-21" bindtap="handleSubmit">
<text class="text_11">提交申请</text>
</view>
</view>
</view>
<view class="flex-row justify-center items-center relative group_4 mt-28" bind:tap="gotoQuery">
<image
class="image_2 pos"
src="./images/right.png"
/> />
<text class="font_2 text_12">我的申请记录</text>
</view> </view>
<!-- 手机号 -->
<view class="field">
<input
class="field-input"
placeholder="请输入手机号"
placeholder-class="ph"
maxlength="11"
type="number"
bindinput="onInput"
data-field="phone"
value="{{phone}}"
/>
</view>
<!-- 验证码 + 发送 -->
<view class="field field-row">
<input
class="field-input flex-1"
placeholder="请输入验证码"
placeholder-class="ph"
type="number"
maxlength="6"
bindinput="onInput"
data-field="code"
value="{{code}}"
/>
<view
class="code-btn"
bindtap="getSmsCode"
>
<text class="code-btn-text">{{ codeButtonText }}</text>
</view>
</view>
<!-- 身份证号 -->
<view class="field">
<input
class="field-input"
placeholder="请输入身份证号"
placeholder-class="ph"
type="idcard"
maxlength="18"
bindinput="onInput"
data-field="idcard"
value="{{idcard}}"
/>
</view>
<!-- 上传简历 -->
<view class="upload-box" bindtap="chooseResume">
<image class="upload-icon" src="./images/resume.png" mode="aspectFit" />
<text class="{{ resumeUploaded ? 'upload-success-text' : 'upload-tip' }}">{{ resumeUploaded ? '简历上传成功！' : '点击上传简历' }}
</text>
</view>
<!-- 提交按钮 -->
<view class="btn-primary" bindtap="handleSubmit">
<text class="btn-primary-text">提交申请</text>
</view>
</view>
<!-- 我的申请记录 -->
<view class="record" bind:tap="gotoQuery">
<text class="record-text">我的申请记录</text>
<image class="record-icon" src="./images/right.png" mode="aspectFit" />
</view> </view>
</view> </view>
</view>

379
pages/loginModule/employeeAccountApply/employeeAccountApply.wxss
View File

@ -1,203 +1,208 @@
/* pages/loginModule/employeeAccountApply/employeeAccountApply.wxss */ /* ===== 页面与顶区 ===== */
.mt-15 {
margin-top: 28.13rpx;
}
.mt-21 {
margin-top: 39.38rpx;
}
.page { .page {
padding: 67.5rpx 49.69rpx 84.38rpx 51.56rpx; box-sizing: border-box;
background-color: #ffffff; min-height: 100vh;
width: 100%; padding: 56rpx 32rpx 40rpx;
overflow-y: auto; background-image: linear-gradient(180deg, #ffe3c4 0%, #fff 38%);
overflow-x: hidden; display: flex;
height: 100%; flex-direction: column;
align-items: center;
position: relative;
} }
.image {
width: 232.5rpx; .logo {
height: 232.5rpx; width: 180rpx;
height: 180rpx;
border-radius: 24rpx;
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06);
} }
.text {
margin-top: 35.14rpx; .page-title {
margin-top: 12rpx;
font-size: 34rpx;
color: #1c2023; color: #1c2023;
font-size: 37.5rpx; font-weight: 700;
font-family: AlibabaPuHuiTi;
line-height: 35.21rpx;
} }
.group {
margin-top: 62.77rpx; /* ===== 遮罩（上传中） ===== */
}
.group_1 {
padding-left: 2.77rpx;
}
.font {
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 27.79rpx;
color: #b3b3b3;
}
.text_2 {
color: #1c2023;
line-height: 28.01rpx;
}
.group_2 {
width: 236.4rpx;
}
.image_2 {
width: 30rpx;
height: 30rpx;
}
.image_3 {
margin-left: 206.4rpx;
}
.font_2 {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 24.3rpx;
color: #ff8d1a;
}
.text_3 {
margin-left: -236.4rpx;
}
.section {
padding: 20.63rpx 0 18.75rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
box-shadow: 0rpx 3.75rpx 11.25rpx #00000040;
}
.text-wrapper {
margin-left: 16.88rpx;
margin-right: 16.88rpx;
}
.view {
padding: 15.92rpx 0 12.67rpx;
background-color: #ffffff00;
}
.section_1 {
padding: 20.16rpx 0 19.22rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
}
.text-wrapper_1 {
padding: 12.64rpx 0 15.92rpx;
background-color: #ffffff00;
}
.section_3 {
padding: 19.69rpx 16.88rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
}
.text-wrapper_2 {
flex: 1 1 0;
}
.view_3 {
padding: 16.73rpx 0 11.74rpx;
background-color: #ffffff00;
height: 56.25rpx;
}
.text-wrapper_3 {
margin-right: 15rpx;
/* padding: 13.16rpx 0 10.93rpx; */
background-color: #ff8d1a;
border-radius: 9.38rpx;
width: 157.5rpx;
height: 45rpx;
}
.text_8 {
color: #ffffff;
font-size: 22.5rpx;
font-family: AlibabaPuHuiTi;
line-height: 15.91rpx;
}
.section_2 {
padding: 19.69rpx 0;
background-color: #ffffff;
border-radius: 9.38rpx;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
}
.text-wrapper_4 {
margin-left: 16.88rpx;
}
.view_4 {
padding: 16.86rpx 0 11.46rpx;
background-color: #ffffff00;
width: 510.63rpx;
}
.section_4 {
padding: 30.81rpx 0 38.16rpx;
background-color: #ff8d1a1a;
border-radius: 9.38rpx;
border: dotted 1.88rpx #ff8d1a;
}
.image_4 {
width: 127.5rpx;
height: 127.5rpx;
}
.text_10 {
color: #000000;
line-height: 24.23rpx;
}
.text-wrapper_5 {
padding: 36.43rpx 0 33.58rpx;
background-color: #ff8d1a;
border-radius: 9.38rpx;
}
.text_11 {
color: #ffffff;
font-size: 30rpx;
font-family: AlibabaPuHuiTi;
line-height: 27.49rpx;
}
.group_4 {
padding: 2.66rpx 0 3rpx;
}
.pos {
position: absolute;
left: 402.19rpx;
top: 50%;
transform: translateY(-50%);
}
.text_12 {
line-height: 24.34rpx;
}
.input {
padding: 15rpx 16.26rpx 13.13rpx 16.26rpx;
}
.input_1 {
padding: 13.13rpx 16.26rpx 15rpx 16.26rpx;
}
.input_2 {
padding: 16.88rpx 16.26rpx 11.25rpx 16.26rpx;
}
.input_3 {
padding: 16.88rpx 16.26rpx 11.25rpx 16.26rpx;
}
/* 遮罩层 */
.mask { .mask {
position: fixed; position: fixed;
top: 0; inset: 0;
left: 0; background: rgba(0,0,0,0.35);
right: 0; backdrop-filter: blur(2rpx);
bottom: 0; z-index: 99;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
justify-content: center;
} }
/* 加载中文本 */
.loading-text { .loading-text {
color: #ffffff; padding: 20rpx 28rpx;
font-size: 34rpx; background: #000000cc;
font-family: AlibabaPuHuiTi; color: #fff;
border-radius: 16rpx;
font-size: 28rpx;
} }
/* 上传成功文字样式 */ /* ===== 主卡片 ===== */
.upload-success-text { .card {
width: 100%;
margin-top: 24rpx;
background: #fff;
border-radius: 24rpx;
box-shadow: 0 12rpx 36rpx rgba(0,0,0,0.08);
padding: 24rpx 24rpx 16rpx;
}
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 12rpx;
border-bottom: 1rpx solid #f1f1f1;
}
.card-title {
font-size: 30rpx; font-size: 30rpx;
font-weight: bold; font-weight: 700;
color: #1c2023;
}
/* 须知入口 */
.head-link {
display: flex;
align-items: center;
gap: 8rpx;
}
.head-link-icon {
width: 28rpx;
height: 28rpx;
}
.head-link-text {
font-size: 26rpx;
color: #ff8d1a; color: #ff8d1a;
} }
/* ===== 表单 ===== */
.form { padding-top: 16rpx; }
.field {
background: #fff;
border: 1rpx solid #e9e9ec;
border-radius: 16rpx;
padding: 18rpx 22rpx;
box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.04);
margin-top: 18rpx;
}
.field:focus-within {
border-color: #ff8d1a;
box-shadow: 0 10rpx 24rpx rgba(255,141,26,0.14);
}
.field-input {
width: 100%;
font-size: 30rpx;
color: #1c2023;
line-height: 44rpx;
}
.ph { color: #9aa0a6; }
/* 验证码行 */
.field-row {
display: flex;
align-items: center;
gap: 16rpx;
padding-right: 16rpx;
}
.flex-1 { flex: 1; }
.code-btn {
height: 44rpx;
padding: 0 22rpx;
background: #ff8d1a;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
box-shadow: 0 8rpx 18rpx rgba(255,141,26,0.25);
transition: transform .08s ease-in-out, opacity .2s;
}
.code-btn:active { transform: scale(0.98); }
.code-btn-text {
color: #fff;
font-size: 24rpx;
font-weight: 600;
}
/* ===== 上传简历 ===== */
.upload-box {
margin-top: 18rpx;
border: 1rpx dashed #ffb66a;
background: #fffaf4;
border-radius: 16rpx;
padding: 28rpx 22rpx;
display: flex;
align-items: center;
gap: 16rpx;
transition: transform .06s ease-in-out, background .2s;
}
.upload-box:active { transform: scale(0.992); }
.upload-icon {
width: 56rpx;
height: 56rpx;
}
.upload-tip {
font-size: 26rpx;
color: #666a73;
}
.upload-success-text {
font-size: 26rpx;
color: #13b26b;
font-weight: 600;
}
/* ===== 提交按钮 ===== */
.btn-primary {
margin-top: 22rpx;
height: 96rpx;
border-radius: 48rpx; /* 胶囊 */
background: linear-gradient(180deg, #ff9a2d 0%, #ff8d1a 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 14rpx 28rpx rgba(255,141,26,0.28);
transition: transform .06s ease-in-out;
}
.btn-primary:active { transform: scale(0.985); }
.btn-primary-text {
color: #ffffff;
font-size: 32rpx;
font-weight: 700;
}
/* ===== 记录入口 ===== */
.record {
margin-top: 12rpx;
padding: 16rpx 8rpx 4rpx;
display: flex;
align-items: center;
gap: 10rpx;
justify-content: center;
}
.record-icon { width: 28rpx; height: 28rpx; }
.record-text { font-size: 26rpx; color: #1c2023; }
/* ===== 复用的工具类（与原项目兼容） ===== */
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }
.relative { position: relative; }
.shrink-0 { flex-shrink: 0; }
.mt-15 { margin-top: 30rpx; }
.mt-21 { margin-top: 42rpx; }
.mt-28 { margin-top: 56rpx; }
.ml-16 { margin-left: 32rpx; }

BIN
pages/loginModule/employeeAccountApply/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 69 KiB

26
pages/loginModule/employeeAccountNotice/employeeAccountNotice.js
View File

@ -1,18 +1,36 @@
// pages/loginModule/employeeAccountNotice/employeeAccountNotice.js import { baseUrl } from "../../../request";
import { decodeBase64 } from "../../../utils/decodebase64";
Page({ Page({
/** /**
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
applyDesc: '',
}, },
/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad(options) { getApplyDesc() {
wx.request({
url: baseUrl + '/userInfo/query/applyNotice',
method: 'POST',
success: res => {
if (res.data.code === 1) {
this.setData({ applyDesc: decodeBase64(res.data.data) })
} else {
wx.showToast({ title: res.data.message, icon: 'none' });
}
},
fail: () => {
wx.showToast({ title: '网络错误', icon: 'none' });
}
})
},
onLoad() {
this.getApplyDesc()
}, },
/** /**

2
pages/loginModule/employeeAccountNotice/employeeAccountNotice.wxml
View File

@ -1,5 +1,5 @@
<!--pages/loginModule/employeeAccountNotice/employeeAccountNotice.wxml--> <!--pages/loginModule/employeeAccountNotice/employeeAccountNotice.wxml-->
<view class="flex-col page"> <view class="flex-col page">
<text class="self-center text">员工账号申请须知</text> <text class="self-center text">员工账号申请须知</text>
<rich-text class="section view mt-20"></rich-text> <rich-text nodes="{{ applyDesc }}" class="section view mt-20"></rich-text>
</view> </view>

14
pages/loginModule/employeeAccountNotice/employeeAccountNotice.wxss
View File

@ -1,15 +1,15 @@
/* pages/loginModule/employeeAccountNotice/employeeAccountNotice.wxss */ /* pages/loginModule/employeeAccountNotice/employeeAccountNotice.wxss */
.page { .page {
padding: 65.08rpx 42.19rpx 145.31rpx 44.06rpx; padding: 65.08rpx 42.19rpx 150rpx 44.06rpx;
background-color: #ffffff; background-color: #ffffff;
width: 100%; width: 100%;
overflow-y: auto; overflow: auto;
overflow-x: hidden;
height: 100%; height: 100%;
} }
.text { .text {
color: #000000; color: #000000;
font-size: 33.75rpx; font-size: 33.75rpx;
font-weight: bold;
font-family: SourceHanSansCN; font-family: SourceHanSansCN;
line-height: 31.26rpx; line-height: 31.26rpx;
} }
@ -18,6 +18,10 @@
} }
.view { .view {
background-color: #ffffff; background-color: #ffffff;
height: 1301.25rpx; }
border: solid 1.88rpx #000000;
::-webkit-scrollbar {
width: 0;
height: 0;
background: transparent;
} }

1
pages/loginModule/employeeApplyQuery/employeeApplyQuery.wxss
View File

@ -43,6 +43,7 @@
.text { .text {
color: #919191; color: #919191;
line-height: 27.75rpx; line-height: 27.75rpx;
width: 90%;
} }
.section_2 { .section_2 {
padding: 33.75rpx 28.13rpx 35.63rpx; padding: 33.75rpx 28.13rpx 35.63rpx;

7
pages/loginModule/forgetPwd/forgetPwd.js
View File

@ -40,7 +40,7 @@ Page({
// 发送验证码 // 发送验证码
getSmsCode() { getSmsCode() {
const { phone } = this.data; const { phone, role } = this.data;
// 1. 非空 // 1. 非空
if (!validate(this.data, { phone: '请输入手机号' })) return; if (!validate(this.data, { phone: '请输入手机号' })) return;
// 2. 格式 // 2. 格式
@ -51,7 +51,7 @@ Page({
wx.request({ wx.request({
url: baseUrl + '/userInfo/code/pwd', url: baseUrl + '/userInfo/code/pwd',
method: 'POST', method: 'POST',
data: { templateString: phone }, data: { phoneNumber: phone, userRole: role },
success: (res) => { success: (res) => {
if (res.data.code === 1) { if (res.data.code === 1) {
wx.showToast({ title: '验证码已发送', icon: 'none' }); wx.showToast({ title: '验证码已发送', icon: 'none' });
@ -125,8 +125,7 @@ Page({
verificationCode: code, verificationCode: code,
userPassword: newPwd, userPassword: newPwd,
userConfirmPassword: confirmPwd, userConfirmPassword: confirmPwd,
sourceToken: null, userRole: role
role: role
}, },
success: res => { success: res => {
if (res.data.code === 1) { if (res.data.code === 1) {

120
pages/loginModule/forgetPwd/forgetPwd.wxml
View File

@ -1,18 +1,21 @@
<view class="flex-col page"> <view class="page">
<image
class="self-center image"
src="./images/logo.png"
/>
<text class="self-center text">欢迎登陆—青橙校园</text>
<view class="flex-col self-stretch group"> <!-- 顶部 Logo 与标题 -->
<text class="self-start font text_2">忘记密码</text> <image class="logo" src="/static/logo.jpg" mode="aspectFit" />
<text class="page-title">欢迎登录 — 丁香校园</text>
<!-- 重置密码卡片 -->
<view class="card">
<text class="card-title">忘记密码</text>
<view class="form">
<!-- 手机号 --> <!-- 手机号 -->
<view class="flex-col justify-start self-stretch relative section mt-20"> <view class="field">
<input <input
class="flex-col justify-start items-start text-wrapper view input" class="field-input"
placeholder="请输入手机号" placeholder="请输入手机号"
placeholder-class="ph"
maxlength="11" maxlength="11"
type="number" type="number"
model:value="{{phone}}" model:value="{{phone}}"
@ -20,58 +23,55 @@
/> />
</view> </view>
<view class="flex-col self-stretch group_2 mt-20"> <!-- 验证码 + 发送 -->
<!-- 验证码 + 发送 --> <view class="field field-row">
<view class="flex-row items-center self-stretch relative section_2"> <input
<input class="field-input flex-1"
class="flex-col justify-start items-start text-wrapper_2 view_2 input_1" placeholder="请输入验证码"
placeholder="请输入验证码" placeholder-class="ph"
maxlength="6" maxlength="6"
type="number" type="number"
model:value="{{code}}" model:value="{{code}}"
bindinput="onCodeInput" bindinput="onCodeInput"
/> />
<text
class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-12 text_6 send-code {{ countdown>0 ? 'disabled' : '' }}"
bindtap="{{ countdown>0 ? '' : 'getSmsCode' }}"
>{{ codeButtonText }}</text>
</view>
<!-- 新密码 -->
<view class="flex-col justify-start self-stretch relative section_1 mt-22">
<input
class="flex-col justify-start items-start text-wrapper text-wrapper_1 input_2"
placeholder="请输入密码"
password="true"
model:value="{{newPwd}}"
bindinput="onNewPwdInput"
/>
</view>
<!-- 确认密码 -->
<view class="flex-col justify-start self-stretch relative section_3 mt-22">
<input
class="flex-col justify-start items-start text-wrapper text-wrapper_5 input_3"
placeholder="请再次输入密码"
password="true"
model:value="{{confirmPwd}}"
bindinput="onConfirmPwdInput"
/>
</view>
<!-- 登录账号 -->
<text <text
class="self-end text_9 mt-22 link" class="code-btn {{ countdown>0 ? 'disabled' : '' }}"
bindtap="gotoLogin" bindtap="{{ countdown>0 ? '' : 'getSmsCode' }}"
>登录账号</text> >{{ codeButtonText }}
</text>
</view>
<!-- 重置密码 按钮 --> <!-- 新密码 -->
<view <view class="field">
class="flex-col justify-start items-center self-stretch text-wrapper_4 mt-22 reset-button" <input
bindtap="resetPassword" class="field-input"
> placeholder="请输入密码"
<text class="text_10">重置密码</text> placeholder-class="ph"
</view> password="true"
model:value="{{newPwd}}"
bindinput="onNewPwdInput"
/>
</view>
<!-- 确认密码 -->
<view class="field field-last">
<input
class="field-input"
placeholder="请再次输入密码"
placeholder-class="ph"
password="true"
model:value="{{confirmPwd}}"
bindinput="onConfirmPwdInput"
/>
</view>
<!-- 登录账号 -->
<text class="link-right" bindtap="gotoLogin">登录账号</text>
<!-- 重置密码 按钮 -->
<view class="btn-primary reset-button" bindtap="resetPassword">
<text class="btn-primary-text">重置密码</text>
</view> </view>
</view> </view>
</view> </view>
</view>

238
pages/loginModule/forgetPwd/forgetPwd.wxss
View File

@ -1,131 +1,141 @@
/* ===== 页面基础 ===== */
.page { .page {
padding: 86.25rpx 46.2rpx 326.25rpx 49.89rpx; box-sizing: border-box;
background-color: #ffffff; min-height: 100vh;
padding: 64rpx 32rpx 48rpx;
background: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
width: 200rpx;
height: 200rpx;
border-radius: 24rpx;
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06);
}
.page-title {
margin-top: 16rpx;
font-size: 36rpx;
color: #1c2023;
font-weight: 700;
}
/* ===== 卡片容器 ===== */
.card {
width: 100%; width: 100%;
overflow: hidden; margin-top: 28rpx;
height: 100%; background: #fff;
border-radius: 24rpx;
box-shadow: 0 10rpx 28rpx rgba(0,0,0,0.06);
padding: 28rpx;
} }
.image {
width: 232.5rpx; .card-title {
height: 232.5rpx; font-size: 32rpx;
}
.text {
margin-top: 37.8rpx;
color: #1c2023; color: #1c2023;
font-size: 37.5rpx; font-weight: 700;
font-family: SourceHanSansCN; padding-bottom: 12rpx;
line-height: 35.18rpx; border-bottom: 1rpx solid #f1f1f1;
} }
.group {
margin-top: 86.14rpx; /* ===== 表单 ===== */
.form { padding-top: 20rpx; }
.field {
background: #fff;
border: 1rpx solid #e9e9ec;
border-radius: 16rpx;
padding: 20rpx 24rpx;
box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.04);
margin-top: 18rpx;
} }
.font { .field:focus-within {
border-color: #ff8d1a;
box-shadow: 0 8rpx 24rpx rgba(255,141,26,0.12);
}
.field-input {
width: 100%;
font-size: 30rpx; font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 27.79rpx;
color: #b3b3b3;
}
.text_2 {
color: #1c2023; color: #1c2023;
line-height: 28.09rpx; line-height: 44rpx;
} }
.section { .ph { color: #9aa0a6; }
margin-left: 2.61rpx;
margin-right: 4.42rpx; /* 输入 + 发送验证码 并排 */
padding: 20.63rpx 0 18.75rpx; .field-row {
background-color: #ffffff; display: flex;
border-radius: 9.38rpx; align-items: center;
box-shadow: 0rpx 3.75rpx 11.25rpx #00000040; gap: 16rpx;
padding-right: 16rpx;
} }
.text-wrapper { .flex-1 { flex: 1; }
margin-left: 16.88rpx;
margin-right: 16.88rpx; .field-last {
margin-bottom: 26rpx;
} }
.view {
padding: 15.92rpx 0 12.64rpx; /* ===== 发送验证码按钮（用 text 作为按钮） ===== */
background-color: #ffffff00; .code-btn {
height: 44rpx;
padding: 0 24rpx;
background: #ff8d1a;
border-radius: 14rpx;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
box-shadow: 0 8rpx 18rpx rgba(255,141,26,0.25);
color: #fff;
font-size: 24rpx;
font-weight: 600;
transition: transform .08s ease-in-out, opacity .2s;
} }
.group_2 { .code-btn:active { transform: scale(0.98); }
padding-left: 2.61rpx; .code-btn.disabled {
opacity: 0.55;
box-shadow: none;
} }
.section_2 {
margin-right: 4.42rpx; /* ===== 右侧链接 ===== */
padding: 25.16rpx 16.88rpx 24.22rpx; .link-right {
background-color: #ffffff; margin-top: 14rpx;
border-radius: 9.38rpx; font-size: 26rpx;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040; color: #666a73;
align-self: flex-end;
} }
.text-wrapper_2 {
flex: 1 1 0; /* ===== 主按钮 ===== */
.btn-primary {
margin-top: 28rpx;
height: 96rpx;
border-radius: 18rpx;
background: linear-gradient(180deg, #ff9a2d 0%, #ff8d1a 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 14rpx 28rpx rgba(255,141,26,0.28);
transition: transform .06s ease-in-out;
} }
.view_2 { .btn-primary:active { transform: scale(0.985); }
padding: 12.51rpx 0 15.96rpx; .btn-primary-text {
background-color: #ffffff00;
height: 66.25rpx;
}
.text-wrapper_3 {
margin-right: 18.77rpx;
padding: 13.16rpx 0 10.93rpx;
background-color: #ff8d1a;
border-radius: 9.38rpx;
width: 157.5rpx;
height: 45rpx;
}
.text_6 {
color: #ffffff; color: #ffffff;
font-size: 22.5rpx; font-size: 32rpx;
font-family: AlibabaPuHuiTi; font-weight: 700;
line-height: 20.91rpx;
}
.section_1 {
margin-right: 4.42rpx;
padding: 21.56rpx 0 17.81rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
}
.text-wrapper_1 {
padding: 13.84rpx 0 14.55rpx;
background-color: #ffffff00;
}
.section_3 {
margin-right: 4.42rpx;
padding: 19.22rpx 0 20.16rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
}
.text-wrapper_5 {
padding: 13.37rpx 0 14.87rpx;
background-color: #ffffff00;
}
.text_9 {
color: #1c2023;
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 24.23rpx;
}
.text-wrapper_4 {
margin-right: 4.42rpx;
padding: 36.04rpx 0 34.01rpx;
background-color: #ff8d1a;
border-radius: 9.38rpx;
}
.text_10 {
color: #ffffff;
font-size: 30rpx;
font-family: AlibabaPuHuiTi;
line-height: 27.45rpx;
}
.input {
padding: 15rpx 16.26rpx 13.13rpx 16.26rpx;
}
.input_1 {
padding: 13.13rpx 16.26rpx 16.88rpx 16.26rpx;
}
.input_2 {
padding: 13.13rpx 16.26rpx 15rpx 16.26rpx;
}
.input_3 {
padding: 13.13rpx 16.26rpx 15rpx 16.26rpx;
} }
/* ===== 可选：保留一些你原先可能依赖的工具类，避免其它页面受影响 ===== */
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.items-center { align-items: center; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }
.self-start { align-self: flex-start; }
.relative { position: relative; }
.shrink-0 { flex-shrink: 0; }
.mt-20 { margin-top: 40rpx; }
.mt-22 { margin-top: 44rpx; }
.ml-12 { margin-left: 24rpx; }

BIN
pages/loginModule/forgetPwd/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 56 KiB

BIN
pages/loginModule/pwdLogin/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 56 KiB

11
pages/loginModule/pwdLogin/pwdLogin.js
View File

@ -68,7 +68,7 @@ Page({
// 获取验证码（仅校验手机号） // 获取验证码（仅校验手机号）
getSmsCode() { getSmsCode() {
const { phone } = this.data; const { phone, role } = this.data;
// 1. 非空校验 // 1. 非空校验
if (!validate(this.data, { phone: '请输入手机号' })) { if (!validate(this.data, { phone: '请输入手机号' })) {
@ -83,7 +83,10 @@ Page({
wx.request({ wx.request({
url: baseUrl + '/userInfo/code/pwd', url: baseUrl + '/userInfo/code/pwd',
method: 'POST', method: 'POST',
data: { templateString: phone }, data: {
phoneNumber: phone,
userRole: role
},
success: (res) => { success: (res) => {
console.log('验证码发送--->',res.data); console.log('验证码发送--->',res.data);
if (res.data.code === 1) { if (res.data.code === 1) {
@ -163,7 +166,7 @@ Page({
: baseUrl + '/userInfo/mini/vcd/login'; : baseUrl + '/userInfo/mini/vcd/login';
const payload = loginType === 'password' const payload = loginType === 'password'
? { phoneNumber: phone, userPassword: credential, userRole: role } ? { phoneNumber: phone, userPassword: credential, userRole: role }
: { phoneNumber: phone, verificationCode: credential }; : { phoneNumber: phone, verificationCode: credential, userRole: role };
wx.request({ wx.request({
url, url,
@ -176,7 +179,7 @@ Page({
const token = res.data.data.token || res.data.data; const token = res.data.data.token || res.data.data;
// ← 新增：将 token 存到本地缓存 // ← 新增：将 token 存到本地缓存
wx.setStorageSync('token', token); wx.setStorageSync('token', token);
wx.setStorageSync('role', role)
wx.showToast({ wx.showToast({
title: '登录成功', title: '登录成功',
icon: 'success', icon: 'success',

193
pages/loginModule/pwdLogin/pwdLogin.wxml
View File

@ -1,106 +1,113 @@
<view class="flex-col page"> <view class="page">
<image class="self-center image" src="./images/logo.png" />
<view class="flex-col items-center self-stretch group"> <!-- 顶部 Logo -->
<!-- 加上 bold-text --> <image class="logo" src="/static/logo.jpg" mode="aspectFit" />
<text class="font text bold-text">欢迎登陆—青橙校园</text>
<text class="font mt-12">（{{ showRole }}端）</text> <!-- 标题与角色 -->
<view class="title-wrap">
<text class="title bold-text">欢迎登录 — 丁香校园</text>
<text class="subtitle">（{{ showRole }}端）</text>
</view>
<!-- 登录卡片 -->
<view class="card">
<!-- 登录方式切换 -->
<view class="tabs">
<text
class="tab {{loginType==='password' ? 'active' : ''}}"
bindtap="switchToPassword"
>密码登录</text>
<text
class="tab {{loginType==='sms' ? 'active' : ''}}"
bindtap="switchToSms"
wx:if="{{ role === 'user' }}"
>验证码登录</text>
</view> </view>
<view class="flex-col self-stretch group_2"> <!-- 表单 -->
<view class="flex-row"> <view class="form">
<!-- 密码登录 -->
<text
class="font_2 toggle-text {{loginType==='password'?'active':''}}"
bindtap="switchToPassword"
>密码登录</text>
<!-- 验证码登录 --> <!-- 手机号 -->
<text <view class="field">
class="font_2 ml-8 toggle-text {{loginType==='sms'?'active':''}}" <input
bindtap="switchToSms" wx:if="{{ role === 'user' }}" class="field-input"
>验证码登录</text> placeholder="请输入手机号"
placeholder-class="ph"
value="{{phone}}"
bindinput="onPhoneInput"
maxlength="11"
type="number"
/>
</view> </view>
<view class="flex-col group_1 mt-20"> <!-- 密码 / 验证码 -->
<!-- 手机号 输入框，保持原 .text-wrapper 样式 --> <view class="field field-row">
<view class="flex-col self-stretch"> <input
<view class="flex-col justify-start relative section"> class="field-input flex-1"
<input placeholder="{{ loginType==='password' ? '请输入密码' : '请输入验证码' }}"
class="text-wrapper" placeholder-class="ph"
placeholder="请输入手机号" value="{{credential}}"
value="{{phone}}" bindinput="onCredentialInput"
bindinput="onPhoneInput" password="{{ loginType==='password' }}"
maxlength="11" type="{{ loginType==='sms' ? 'number' : 'text' }}"
type="number" />
/> <!-- 验证码按钮（仅验证码登录显示） -->
</view>
</view>
<!-- 密码/验证码 输入框，保持原 .text-wrapper_2 样式 -->
<view class="flex-row items-center section_2 mt-21">
<input
class="text-wrapper"
placeholder="{{ loginType==='password' ? '请输入密码' : '请输入验证码' }}"
value="{{credential}}"
bindinput="onCredentialInput"
password="{{ loginType==='password' }}"
type="{{ loginType==='sms' ? 'number' : 'text' }}"
/>
<!-- 仅验证码登录时显示倒计时按钮 -->
<view
class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-2"
bindtap="getSmsCode"
wx:if="{{ loginType==='sms' }}"
>
<text class="text_6">{{ codeButtonText }}</text>
</view>
</view>
<!-- 忘记密码，仅密码登录时显示 -->
<text
class="self-end font_4 text_7"
bindtap="gotoForgetPwd"
wx:if="{{ loginType==='password' }}"
>忘记密码</text>
<!-- 登录按钮 -->
<view <view
class="flex-col justify-start items-center self-stretch text-wrapper_4" class="code-btn"
bindtap="onLogin" bindtap="getSmsCode"
wx:if="{{ loginType==='sms' }}"
> >
<text class="text_8">登录</text> <text class="code-btn-text">{{ codeButtonText }}</text>
</view>
<!-- 协议勾选 -->
<view class="flex-row items-center self-stretch group_3">
<checkbox-group bindchange="onAgreeChange">
<checkbox
class="checkbox"
value="agree"
checked="{{ isAgree }}"
color="#FF8D1A"
/>
</checkbox-group>
<view class="group_4 ml-12">
<text class="font_5 text_9">登录代表您已同意</text>
<text class="font_5" bindtap="gotoAgreement">《用户协议》</text>
<text class="text_10">&</text>
<text class="font_5" bindtap="gotoPolicy">《隐私协议》</text>
</view>
</view>
<!-- 去注册 -->
<view class="self-center group_5" wx:if="{{isShowRegister}}">
<text class="font_4 text_11">没有账号？</text>
<text class="font_5 text_12" bindtap="gotoRegister">去注册→</text>
</view> </view>
</view> </view>
</view>
<view class="flex-row justify-evenly items-center self-end section_3" bind:tap="joinUs" wx:if="{{ role === 'user' }}"> <!-- 忘记密码（仅密码登录） -->
<text class="font_2 text_13">加入我们</text> <text
<image class="image_3" src="./images/joinus.png" /> class="link-right"
bindtap="gotoForgetPwd"
wx:if="{{ loginType==='password' }}"
>忘记密码</text>
<!-- 登录按钮 -->
<view
class="btn-primary"
bindtap="onLogin"
>
<text class="btn-primary-text">登录</text>
</view>
<!-- 协议 -->
<view class="agreements">
<checkbox-group bindchange="onAgreeChange">
<checkbox
class="checkbox"
value="agree"
checked="{{ isAgree }}"
color="#FF8D1A"
/>
</checkbox-group>
<view class="agreements-text">
<text class="muted">登录代表您已同意</text>
<text class="link" bindtap="gotoAgreement">《用户协议》</text>
<text class="muted">&</text>
<text class="link" bindtap="gotoPolicy">《隐私协议》</text>
</view>
</view>
<!-- 去注册 -->
<view class="register" wx:if="{{isShowRegister}}">
<text class="muted">没有账号？</text>
<text class="link-strong" bindtap="gotoRegister">去注册 →</text>
</view>
</view> </view>
</view> </view>
<!-- 加入我们（仅 user 端） -->
<view class="cta-join" bind:tap="joinUs" wx:if="{{ role === 'user' }}">
<text class="cta-join-text">加入我们</text>
<image class="cta-join-img" src="./images/joinus.png" mode="aspectFit" />
</view>
</view>

413
pages/loginModule/pwdLogin/pwdLogin.wxss
View File

@ -1,190 +1,241 @@
.mt-21 { /* ========== 基础 ========== */
margin-top: 39.38rpx;
}
.page { .page {
padding: 105rpx 36.56rpx 40.31rpx 49.76rpx; box-sizing: border-box;
padding: 72rpx 32rpx 48rpx;
background-color: #ffffff; background-color: #ffffff;
width: 100%; min-height: 100vh;
overflow-y: auto; display: flex;
overflow-x: hidden; flex-direction: column;
height: 100%; align-items: center;
}
.image {
width: 232.5rpx;
height: 232.5rpx;
}
.group {
margin-top: 35.14rpx;
}
.font {
font-size: 37.5rpx;
font-family: AlibabaPuHuiTi;
line-height: 34.73rpx;
color: #1c2023;
}
.text {
line-height: 35.21rpx;
}
.group_2 {
margin-top: 87.15rpx;
}
.font_2 {
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 27.69rpx;
color: #1c2023;
}
.text_2 {
line-height: 28.29rpx;
}
.text_3 {
line-height: 28.2rpx;
}
.group_1 {
padding-left: 2.74rpx;
padding-right: 2.74rpx;
}
.section {
margin-right: 11.32rpx;
padding: 20.63rpx 16.88rpx 18.75rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
box-shadow: 0rpx 3.75rpx 11.25rpx #00000040;
}
.text-wrapper {
margin-left: 16.88rpx;
margin-right: 16.88rpx;
padding: 15.92rpx 0 12.64rpx;
background-color: #ffffff00;
margin-right: 100rpx;
}
.font_3 {
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 27.69rpx;
color: #b3b3b3;
}
.text_4 {
margin-left: 16.26rpx;
}
.section_2 {
margin-right: 11.32rpx;
padding: 20.63rpx 16.88rpx 18.75rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
}
.text_5 {
margin-left: 16.26rpx;
line-height: 27.86rpx;
}
.text-wrapper_3 {
margin-right: 5.63rpx;
padding: 13.16rpx 0 10.93rpx;
background-color: #ff8d1a;
border-radius: 9.38rpx;
width: 157.5rpx;
height: 45rpx;
}
.text_6 {
color: #ffffff;
font-size: 22.5rpx;
font-family: AlibabaPuHuiTi;
line-height: 20.91rpx;
}
.font_4 {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 24.49rpx;
color: #383838;
}
.text_7 {
margin-right: 6.39rpx;
margin-top: 28.76rpx;
line-height: 24.36rpx;
}
.text-wrapper_4 {
margin-right: 11.32rpx;
margin-top: 46.26rpx;
padding: 36.73rpx 0 34.16rpx;
background-color: #ff8d1a;
border-radius: 9.38rpx;
}
.text_8 {
color: #ffffff;
font-size: 30rpx;
font-family: AlibabaPuHuiTi;
line-height: 26.61rpx;
}
.group_3 {
margin-top: 48.75rpx;
}
.image_2 {
flex-shrink: 0;
}
.image_1 {
width: 37.5rpx;
height: 37.5rpx;
}
.group_4 {
line-height: 24.49rpx;
height: 24.56rpx;
}
.font_5 {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 24.49rpx;
color: #ff5e00;
}
.text_9 {
color: #1c2023;
line-height: 24.43rpx;
}
.text_10 {
color: #1c2023;
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 19.93rpx;
}
.group_5 {
margin-top: 43.91rpx;
line-height: 24.41rpx;
}
.text_11 {
line-height: 24.28rpx;
}
.text_12 {
line-height: 24.41rpx;
}
.section_3 {
margin-top: 100.11rpx;
padding: 12.06rpx 21.69rpx 12.32rpx 24.15rpx;
background-color: #ffffff;
border-radius: 9.38rpx;
width: 215.63rpx;
border: solid 1.88rpx #ff8d1a;
}
.text_13 {
color: #ff8d1a;
line-height: 27.66rpx;
}
.image_3 {
width: 41.25rpx;
height: 41.25rpx;
} }
/* 欢迎文本加粗 */ .logo {
.bold-text { width: 220rpx;
font-weight: bold; height: 220rpx;
border-radius: 24rpx;
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06);
} }
/* 切换按钮默认样式，保持原 font_2 大小；active 时放大加粗 */ .title-wrap {
.toggle-text { margin-top: 24rpx;
align-items: center;
text-align: center;
}
.title {
font-size: 40rpx;
line-height: 1.2;
color: #1c2023;
}
.subtitle {
margin-top: 12rpx;
font-size: 28rpx; font-size: 28rpx;
font-weight: normal; color: #666a73;
transition: font-size 0.2s;
} }
.toggle-text.active {
font-size: 36rpx; .bold-text { font-weight: 700; }
font-weight: bold;
/* ========== 卡片容器 ========== */
.card {
width: 100%;
margin-top: 32rpx;
background: #fff;
border-radius: 24rpx;
box-shadow: 0 10rpx 28rpx rgba(0,0,0,0.06);
padding: 28rpx;
} }
/* ========== 标签切换 ========== */
.tabs {
display: flex;
align-items: center;
gap: 32rpx;
padding: 8rpx 4rpx 20rpx;
border-bottom: 1rpx solid #f1f1f1;
}
.tab {
font-size: 28rpx;
color: #666a73;
padding: 8rpx 6rpx;
position: relative;
transition: color .2s, transform .2s;
}
.tab.active {
color: #1c2023;
font-weight: 700;
transform: translateY(-1rpx);
}
.tab.active::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -12rpx;
height: 6rpx;
background: #ff8d1a;
border-radius: 6rpx;
}
/* ========== 表单区 ========== */
.form { padding-top: 24rpx; }
.field {
background: #fff;
border: 1rpx solid #e9e9ec;
border-radius: 16rpx;
padding: 20rpx 24rpx;
box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.04);
margin-top: 20rpx;
}
.field-input {
width: 100%;
font-size: 30rpx;
color: #1c2023;
line-height: 44rpx;
}
.field-input:focus {
outline: none;
border: none;
}
.field:focus-within {
border-color: #ff8d1a;
box-shadow: 0 8rpx 24rpx rgba(255,141,26,0.12);
}
.ph { color: #9aa0a6; }
/* 输入+验证码并排 */
.field-row {
display: flex;
align-items: center;
gap: 16rpx;
padding-right: 16rpx;
margin-bottom: 26rpx;
}
.flex-1 { flex: 1; }
/* 验证码按钮 */
.code-btn {
height: 44rpx;
padding: 0 24rpx;
background: #ff8d1a;
border-radius: 14rpx;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
box-shadow: 0 8rpx 18rpx rgba(255,141,26,0.25);
active-opacity: 0.85;
}
.code-btn:active { transform: scale(0.98); }
.code-btn-text {
color: #fff;
font-size: 24rpx;
font-weight: 600;
}
/* 忘记密码链接 */
.link-right {
margin-top: 16rpx;
font-size: 26rpx;
color: #666a73;
align-self: flex-end;
}
/* 登录按钮 */
.btn-primary {
margin-top: 32rpx;
height: 96rpx;
border-radius: 18rpx;
background: linear-gradient(180deg, #ff9a2d 0%, #ff8d1a 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 14rpx 28rpx rgba(255,141,26,0.28);
transition: transform .06s ease-in-out;
}
.btn-primary:active { transform: scale(0.985); }
.btn-primary-text {
color: #ffffff;
font-size: 32rpx;
font-weight: 700;
}
/* 协议区 */
.agreements {
margin-top: 28rpx;
display: flex;
align-items: center;
gap: 16rpx;
}
.checkbox { transform: scale(0.92); }
.agreements-text {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8rpx;
line-height: 1.4;
}
.muted { color: #666a73; font-size: 26rpx; }
.link { color: #ff5e00; font-size: 26rpx; }
.link-strong { color: #ff5e00; font-size: 28rpx; font-weight: 700; }
/* 注册区 */
.register {
margin-top: 24rpx;
text-align: center;
display: flex;
justify-content: center;
gap: 8rpx;
}
/* 加入我们 CTA */
.cta-join {
margin-top: 48rpx;
padding: 16rpx 22rpx;
border: 1rpx solid #ff8d1a;
border-radius: 14rpx;
display: flex;
align-items: center;
gap: 12rpx;
}
.cta-join-text { color: #ff8d1a; font-size: 28rpx; }
.cta-join-img { width: 44rpx; height: 44rpx; }
/* ========== 兼容你原先用到的类名（可选保留） ========== */
.font { font-size: 37.5rpx; color: #1c2023; }
.font_2 { font-size: 30rpx; color: #1c2023; }
.font_4 { font-size: 26rpx; color: #383838; }
.font_5 { font-size: 26rpx; color: #ff5e00; }
.toggle-text { font-size: 28rpx; transition: font-size .2s; }
.toggle-text.active { font-size: 36rpx; font-weight: 700; }
/* 简易工具类（若你全局已有可删除） */
.items-center { align-items: center; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.justify-evenly { justify-content: space-evenly; }
.relative { position: relative; }
.shrink-0 { flex-shrink: 0; }
.ml-2 { margin-left: 16rpx; }
.ml-8 { margin-left: 32rpx; }
.ml-12 { margin-left: 48rpx; }
.mt-12 { margin-top: 24rpx; }
.mt-20 { margin-top: 40rpx; }

BIN
pages/loginModule/register/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 56 KiB

34
pages/loginModule/register/register.js
View File

@ -18,7 +18,17 @@ Page({
this.setData({ this.setData({
role: options.role role: options.role
}) })
if (options.role === 'supervisor') { const scene = decodeURIComponent(options.scene)
if (scene !== 'undefined') {
let [key, value] = scene.split('=');
console.log(key, value)
if (value === 'manager') value = 'supervisor'
else if (value === 'supervisor') value = 'staff'
else if (value === 'staff') value = 'user'
this.setData({inviteCode: key, role: value})
}
if (this.data.role === 'supervisor') {
this.setData({ this.setData({
placeholder: '请输入学校名称' placeholder: '请输入学校名称'
}) })
@ -27,9 +37,6 @@ Page({
placeholder : '请输入昵称' placeholder : '请输入昵称'
}) })
} }
const scene = decodeURIComponent(options.scene)
let [key, value] = scene.split('=');
this.setData({inviteCode: value})
}, },
/** /**
@ -47,7 +54,7 @@ Page({
}, },
sendSmsCode() { sendSmsCode() {
const { phone } = this.data; const { phone, role } = this.data;
if (!phone.trim()) { if (!phone.trim()) {
wx.showToast({ title: '请输入手机号', icon: 'none' }); wx.showToast({ title: '请输入手机号', icon: 'none' });
return; return;
@ -61,7 +68,8 @@ Page({
method: 'POST', method: 'POST',
header: { 'content-type': 'application/json' }, header: { 'content-type': 'application/json' },
data: { data: {
templateString: phone phoneNumber: phone,
userRole: role
}, },
success: res => { success: res => {
// 假设后端返回 { success: true, ... } // 假设后端返回 { success: true, ... }
@ -156,8 +164,7 @@ Page({
}) })
const { role } = this.data; const { role } = this.data;
const res = await requestAsync({
const res = await requestAsync({
url: baseUrl + '/userInfo/register', url: baseUrl + '/userInfo/register',
method: 'POST', method: 'POST',
header: { 'content-type': 'application/json' }, header: { 'content-type': 'application/json' },
@ -177,21 +184,22 @@ Page({
icon: 'success', icon: 'success',
duration: 1000, duration: 1000,
}); });
wx.hideLoading()
setTimeout(() => { setTimeout(() => {
wx.navigateBack()({ wx.navigateTo({
// url: '/pages/loginModule/pwdLogin/pwdLogin', url: `/pages/loginModule/pwdLogin/pwdLogin?role=${role}`,
success: () => { success: () => {
this.setData({ nickname:'', phone:'', captcha:'', inviteCode:'', password:'', agree:false }); this.setData({ nickname:'', phone:'', captcha:'', inviteCode:'', password:'', agree:false });
} }
}); });
}, 1000); }, 1000);
} else { } else {
console.log(res.data)
wx.showToast({ wx.showToast({
title: res.data.message || '注册失败', title: res.data.message || '注册失败',
icon: 'none' icon: 'none',
duration: 1000
}); });
wx.hideLoading() // wx.hideLoading()
} }
}, },

167
pages/loginModule/register/register.wxml
View File

@ -1,78 +1,107 @@
<view class="flex-col page"> <view class="page">
<image
class="self-center image" <!-- 顶部 Logo 与标题 -->
src="./images/logo.png" <image class="logo" src="/static/logo.jpg" mode="aspectFit" />
/> <text class="page-title">欢迎登录 — 丁香校园</text>
<text class="self-center text">欢迎登陆—青橙校园</text>
<view class="flex-col self-stretch group"> <!-- 注册卡片 -->
<view class="flex-col register"> <view class="card">
<text class="self-start font text_2">账号注册</text>
<view class="flex-col self-stretch group_6 mt-20"> <view class="card-head">
<view class="flex-col"> <text class="card-title">账号注册</text>
<view class="flex-col justify-start relative section"> </view>
<input class="flex-col justify-start items-start text-wrapper_5 view input"
placeholder="{{ placeholder }}" <!-- 表单 -->
maxlength="18" <view class="form">
bindinput="onInput" data-field="nickname" value="{{nickname}}"
/> <!-- 昵称 -->
</view> <view class="field">
<view class="flex-col justify-start section_1 mt-22"> <input
<input class="field-input"
class="flex-col justify-start items-start text-wrapper_5 text-wrapper_1 input_1" placeholder="{{ placeholder }}"
placeholder="请输入手机号" placeholder-class="ph"
maxlength="11" maxlength="18"
type="number" bindinput="onInput" data-field="nickname" value="{{nickname}}"
bindinput="onInput" data-field="phone" value="{{phone}}" />
/> </view>
</view>
</view> <!-- 手机号 -->
<view class="flex-row items-center relative section_3 mt-22"> <view class="field">
<input <input
class="flex-col justify-start items-start text-wrapper_2 view_6 input_2" class="field-input"
placeholder="请输入验证码" placeholder="请输入手机号"
maxlength="6" placeholder-class="ph"
bindinput="onInput" data-field="captcha" value="{{captcha}}" maxlength="11"
/> type="number"
<view bindtap="{{sending ? '' : 'sendSmsCode'}}" class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-18"> bindinput="onInput" data-field="phone" value="{{phone}}"
<text class="text_7">{{ sending ? count + 's后重发' : '发送验证码' }}</text> />
</view> </view>
</view>
<view class="flex-col mt-22"> <!-- 验证码（输入 + 发送） -->
<view class="flex-col justify-start relative section_2"> <view class="field field-row">
<input <input
class="flex-col justify-start items-start text-wrapper_5 view_1 input_3" class="field-input flex-1"
placeholder="请输入邀请码" placeholder="请输入验证码"
maxlength="6" placeholder-class="ph"
bindinput="onInput" data-field="inviteCode" value="{{inviteCode}}" maxlength="6"
/> bindinput="onInput" data-field="captcha" value="{{captcha}}"
</view> />
<view class="flex-col justify-start section_2 mt-22"> <view
<input class="flex-col justify-start items-start text-wrapper_5 view_3 input_4" bindtap="{{sending ? '' : 'sendSmsCode'}}"
placeholder="请输入密码" class="code-btn {{sending ? 'disabled' : ''}}"
password="true" >
maxlength="11" <text class="code-btn-text">{{ sending ? count + 's后重发' : '发送验证码' }}
bindinput="onInput" data-field="password" value="{{password}}" </text>
/>
</view>
</view>
</view> </view>
</view> </view>
<view class="flex-row items-center group_1 mt-26">
<!-- 复选框 --> <!-- 邀请码 -->
<view class="field">
<input
class="field-input"
placeholder="请输入邀请码"
placeholder-class="ph"
maxlength="6"
bindinput="onInput" data-field="inviteCode" value="{{inviteCode}}"
/>
</view>
<!-- 密码 -->
<view class="field">
<input
class="field-input"
placeholder="请输入密码"
placeholder-class="ph"
password="true"
maxlength="18"
bindinput="onInput" data-field="password" value="{{password}}"
/>
</view>
<!-- 协议勾选 -->
<view class="agreements">
<checkbox-group bindchange="onCheckboxChange"> <checkbox-group bindchange="onCheckboxChange">
<checkbox value="agree" checked="{{agree}}" color="#FF8D1A" /> <checkbox value="agree" checked="{{agree}}" color="#FF8D1A" />
</checkbox-group> </checkbox-group>
<view class="group_2 ml-13"> <view class="agreements-text">
<text class="font_2 text_10">我已阅读并同意</text> <text class="muted">我已阅读并同意</text>
<text class="font_2" bind:tap="gotoAgreement">《用户协议》</text> <text class="link" bind:tap="gotoAgreement">《用户协议》</text>
<text class="text_11">&</text> <text class="muted">&</text>
<text class="font_2" bind:tap="gotoPolicy">《隐私协议》</text> <text class="link" bind:tap="gotoPolicy">《隐私协议》</text>
</view> </view>
</view> </view>
<view bindtap="onRegister" class="flex-col justify-start items-center text-wrapper_6 mt-26"><text class="font text_12">注册</text></view>
</view> <!-- 注册按钮 -->
<view class="self-center group_3"> <view class="btn-primary" bindtap="onRegister">
<text class="font_2 text_13">已有账号？</text> <text class="btn-primary-text">注册</text>
<text bindtap="gotoLogin" class="font_2 text_14" >立即登录→</text> </view>
</view> </view>
</view> </view>
<!-- 登录引导 -->
<view class="footer-tip">
<text class="muted">已有账号？</text>
<text class="link-strong" bindtap="gotoLogin">立即登录 →</text>
</view>
</view>

314
pages/loginModule/register/register.wxss
View File

@ -1,172 +1,182 @@
.ml-13 { /* ===== 基础布局 ===== */
margin-left: 24.38rpx;
}
.page { .page {
padding: 0rpx 49.74rpx 79.82rpx 49.74rpx; box-sizing: border-box;
background-color: #ffffff; min-height: 100vh;
padding: 64rpx 32rpx 48rpx;
background: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
width: 200rpx;
height: 200rpx;
border-radius: 24rpx;
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06);
}
.page-title {
margin-top: 16rpx;
font-size: 36rpx;
color: #1c2023;
font-weight: 700;
}
/* ===== 卡片 ===== */
.card {
width: 100%; width: 100%;
overflow: hidden; margin-top: 28rpx;
height: 100%; background: #fff;
border-radius: 24rpx;
box-shadow: 0 10rpx 28rpx rgba(0,0,0,0.06);
padding: 28rpx;
} }
.register {
margin-top: -30rpx; .card-head {
padding-bottom: 12rpx;
border-bottom: 1rpx solid #f1f1f1;
} }
.image {
width: 232.5rpx; .card-title {
height: 232.5rpx; font-size: 32rpx;
}
.text {
margin-top: 37.8rpx;
color: #1c2023; color: #1c2023;
font-size: 37.5rpx; font-weight: 700;
font-family: SourceHanSansCN;
line-height: 35.18rpx;
} }
.group {
margin-top: 86.36rpx; .form {
padding-top: 20rpx;
} }
.font {
/* ===== 表单字段 ===== */
.field {
background: #fff;
border: 1rpx solid #e9e9ec;
border-radius: 16rpx;
padding: 20rpx 24rpx;
box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.04);
margin-top: 18rpx;
}
.field:focus-within {
border-color: #ff8d1a;
box-shadow: 0 8rpx 24rpx rgba(255,141,26,0.12);
}
.field-input {
width: 100%;
font-size: 30rpx; font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 27.79rpx;
color: #b3b3b3;
}
.text_2 {
color: #1c2023; color: #1c2023;
line-height: 28.2rpx; line-height: 44rpx;
} }
.group_6 {
padding-left: 2.76rpx; .ph { color: #9aa0a6; }
.field-row {
display: flex;
align-items: center;
gap: 16rpx;
padding-right: 16rpx;
} }
.section {
padding: 20.63rpx 0 18.75rpx; .flex-1 { flex: 1; }
background-color: #ffffff;
border-radius: 9.38rpx; /* ===== 验证码按钮 ===== */
box-shadow: 0rpx 3.75rpx 11.25rpx #00000040; .code-btn {
height: 44rpx;
padding: 0 24rpx;
background: #ff8d1a;
border-radius: 14rpx;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
box-shadow: 0 8rpx 18rpx rgba(255,141,26,0.25);
transition: transform .08s ease-in-out, opacity .2s;
} }
.text-wrapper_5 {
margin-left: 16.88rpx; .code-btn:active { transform: scale(0.98); }
margin-right: 16.88rpx;
.code-btn.disabled {
opacity: 0.55;
box-shadow: none;
} }
.view {
padding: 15.92rpx 0 12.62rpx; .code-btn-text {
background-color: #ffffff00; color: #fff;
font-size: 24rpx;
font-weight: 600;
} }
.section_1 {
padding: 20.16rpx 0 19.22rpx; /* ===== 协议区 ===== */
background-color: #ffffff; .agreements {
border-radius: 9.38rpx; margin-top: 22rpx;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040; display: flex;
align-items: center;
gap: 14rpx;
} }
.text-wrapper_1 {
padding: 12.64rpx 0 15.92rpx; .agreements-text {
background-color: #ffffff00; display: flex;
align-items: center;
gap: 8rpx;
flex-wrap: wrap;
} }
.section_3 {
padding: 25.63rpx 16.88rpx 28.75rpx; .muted { color: #666a73; font-size: 26rpx; }
background-color: #ffffff; .link { color: #ff5e00; font-size: 26rpx; }
border-radius: 9.38rpx; .link-strong { color: #ff5e00; font-size: 28rpx; font-weight: 700; }
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040;
/* ===== 主按钮 ===== */
.btn-primary {
margin-top: 28rpx;
height: 96rpx;
border-radius: 18rpx;
background: linear-gradient(180deg, #ff9a2d 0%, #ff8d1a 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 14rpx 28rpx rgba(255,141,26,0.28);
transition: transform .06s ease-in-out;
} }
.text-wrapper_2 {
flex: 1 1 0; .btn-primary:active { transform: scale(0.985); }
}
.view_6 { .btn-primary-text {
padding: 16.73rpx 0 11.74rpx;
background-color: #ffffff00;
height: 66.25rpx;
}
.text-wrapper_3 {
margin-right: 15rpx;
padding: 13.16rpx 0 10.93rpx;
background-color: #ff8d1a;
border-radius: 9.38rpx;
width: 157.5rpx;
height: 45rpx;
}
.text_7 {
color: #ffffff; color: #ffffff;
font-size: 22.5rpx; font-size: 32rpx;
font-family: AlibabaPuHuiTi; font-weight: 700;
line-height: 20.91rpx;
} }
.section_2 {
padding: 20.63rpx 0 18.75rpx; /* ===== 底部引导 ===== */
background-color: #ffffff; .footer-tip {
border-radius: 9.38rpx; margin-top: 28rpx;
box-shadow: 0rpx 3.75rpx 7.5rpx #00000040; display: flex;
} align-items: center;
.view_1 { gap: 8rpx;
padding: 11.7rpx 0 16.89rpx;
background-color: #ffffff00;
}
.view_3 {
padding: 11.96rpx 0 16.29rpx;
background-color: #ffffff00;
}
.group_1 {
padding: 0 2.76rpx;
}
.group_2 {
line-height: 24.56rpx;
height: 24.56rpx;
}
.font_2 {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 24.49rpx;
color: #ff5e00;
}
.text_10 {
color: #1c2023;
line-height: 24.56rpx;
}
.text_11 {
color: #1c2023;
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 19.93rpx;
}
.text-wrapper_6 {
margin-left: 2.76rpx;
padding: 37.63rpx 0 32.27rpx;
background-color: #ff8d1a;
border-radius: 9.38rpx;
}
.text_12 {
color: #ffffff;
line-height: 27.6rpx;
}
.group_3 {
margin-top: 37rpx;
line-height: 24.36rpx;
}
.text_13 {
color: #383838;
line-height: 24.28rpx;
}
.text_14 {
line-height: 24.36rpx;
}
.input {
padding: 13.13rpx 16.26rpx 15rpx 16.26rpx;
}
.input_1 {
padding: 13.13rpx 16.26rpx 15rpx 16.26rpx;
}
.input_2 {
padding: 13.13rpx 16.26rpx 15rpx 16.26rpx;
}
.input_3 {
padding: 13.13rpx 16.26rpx 15rpx 16.26rpx;
}
.input_4 {
padding: 13.13rpx 16.26rpx 15rpx 16.26rpx;
}
.checkbox {
flex-shrink: 0;
}
.checkbox .wx-checkbox-input {
width: 37.5rpx;
height: 37.5rpx;
} }
/* ===== 兼容你原先的类名（可选保留，避免影响其他样式） ===== */
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.items-center { align-items: center; }
.self-center { align-self: center; }
.self-start { align-self: flex-start; }
.self-stretch { align-self: stretch; }
.relative { position: relative; }
.shrink-0 { flex-shrink: 0; }
.mt-20 { margin-top: 40rpx; }
.mt-22 { margin-top: 44rpx; } /* 你原文件的 mt-22 语义留存 */
.mt-26 { margin-top: 52rpx; }
.ml-13 { margin-left: 26rpx; }
.ml-18 { margin-left: 36rpx; }
/* 旧色彩类（若其他页面使用到，可保留） */
.text { color: #1c2023; }
.font { font-size: 36rpx; }
.font_2 { font-size: 26rpx; color: #1c2023; }
.text_10, .text_11 { font-size: 26rpx; }
/* 你原先的按钮类名占位（防止引用处报错） */
.text-wrapper_6 { }

19
pages/personCenter/accountSetting/accountSetting.js
View File

@ -1,5 +1,7 @@
// pages/personCenter/accountSetting/accountSetting.js // pages/personCenter/accountSetting/accountSetting.js
const { baseUrl } = require("../../../request"); const { baseUrl, globalImgUrl } = require("../../../request");
const { notLogin } = require('../../../utils/util')
Page({ Page({
@ -9,12 +11,15 @@ Page({
data: { data: {
nickName: "", nickName: "",
userAvatar: "", userAvatar: "",
phoneNumber: "" phoneNumber: "",
globalImgUrl,
role: '',
}, },
gotoResetPwd() { gotoResetPwd() {
const { role } = this.data;
wx.navigateTo({ wx.navigateTo({
url: '/pages/personCenter/resetPwd/resetPwd', url: `/pages/personCenter/resetPwd/resetPwd?role=${ role }`,
}) })
}, },
@ -32,6 +37,7 @@ Page({
icon: 'success' icon: 'success'
}) })
wx.removeStorageSync('token') wx.removeStorageSync('token')
wx.removeStorageSync('role')
setTimeout(() => { setTimeout(() => {
wx.reLaunch({ wx.reLaunch({
url: '/pages/welcome/homePage/homePage', url: '/pages/welcome/homePage/homePage',
@ -63,14 +69,17 @@ Page({
Authorization: token Authorization: token
}, },
success: res => { success: res => {
console.log('用户信息---->',res.data.data);
if (res.data.code === 1) { if (res.data.code === 1) {
this.setData({ this.setData({
nickName: res.data.data.nickName, nickName: res.data.data.nickName,
// TODO 头像未连接
userAvatar: res.data.data.userAvatar, userAvatar: res.data.data.userAvatar,
phoneNumber: res.data.data.phoneNumber, phoneNumber: res.data.data.phoneNumber,
userAccount: res.data.data.userAccount userAccount: res.data.data.userAccount,
role:res.data.data.userRole,
}) })
} else {
notLogin(res.data.message)
} }
}, },
fail: () => { fail: () => {

4
pages/personCenter/accountSetting/accountSetting.wxml
View File

@ -3,9 +3,9 @@
<view class="flex-row self-stretch section"> <view class="flex-row self-stretch section">
<image <image
class="self-center image" class="self-center image"
src="./images/logo.png" src="{{globalImgUrl + userAvatar}}"
/> />
<view class="flex-col items-start flex-1 self-start group_2 ml-8"> <view class="flex-col items-start flex-1 self-start group_2 ml-16">
<text class="text">{{ nickName }}</text> <text class="text">{{ nickName }}</text>
<text class="font text_2 mt-28">{{ phoneNumber }}</text> <text class="font text_2 mt-28">{{ phoneNumber }}</text>
</view> </view>

1
pages/personCenter/accountSetting/accountSetting.wxss
View File

@ -20,6 +20,7 @@
.image { .image {
width: 121.88rpx; width: 121.88rpx;
height: 121.88rpx; height: 121.88rpx;
border-radius: 30rpx;
} }
.group_2 { .group_2 {
margin-top: 21.84rpx; margin-top: 21.84rpx;

BIN
pages/personCenter/accountSetting/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 56 KiB

BIN
pages/personCenter/commissionSetting/images/xmtp.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

49
pages/personCenter/component/modifyNamePop/modifyNamePop.js Normal file
View File

@ -0,0 +1,49 @@
Component({
properties: {
show: {
type: Boolean,
value: false
},
nickname: {
type: String,
value: ''
}
},
data: {
inputVal: ''
},
methods: {
onInput(e) {
this.setData({
inputVal: e.detail.value
});
},
onCancel() {
this.triggerEvent('cancel');
},
onConfirm() {
const newName = this.data.inputVal.trim();
if (!newName) {
wx.showToast({
title: '昵称不能为空',
icon: 'none'
});
return;
}
if (newName.length > 20) {
wx.showToast({
title: '昵称最长不超过20个字符',
icon: 'none'
})
return ;
}
this.triggerEvent('confirm', { nickname: newName });
}
},
observers: {
nickname(val) {
this.setData({ inputVal: val });
}
}
});

0
pages/test/testVideo/testVideo.json → pages/personCenter/component/modifyNamePop/modifyNamePop.json
View File

15
pages/personCenter/component/modifyNamePop/modifyNamePop.wxml Normal file
View File

@ -0,0 +1,15 @@
<view wx:if="{{show}}" class="popup-mask">
<view class="popup-container">
<text class="popup-title">修改昵称</text>
<input
class="popup-input"
placeholder="请输入新的昵称"
value="{{nickname}}"
bindinput="onInput"
/>
<view class="popup-btns">
<button class="btn cancel-btn" bindtap="onCancel">取消</button>
<button class="btn confirm-btn" bindtap="onConfirm">确定</button>
</view>
</view>
</view>

57
pages/personCenter/component/modifyNamePop/modifyNamePop.wxss Normal file
View File

@ -0,0 +1,57 @@
.popup-mask {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.popup-container {
width: 80%;
background: #fff;
border-radius: 10px;
padding: 20rpx;
box-sizing: border-box;
}
.popup-title {
display: block;
font-size: 32rpx;
font-weight: bold;
text-align: center;
margin-bottom: 20rpx;
}
.popup-input {
width: 100%;
border: 1px solid #ddd;
border-radius: 6rpx;
padding: 10rpx;
box-sizing: border-box;
font-size: 28rpx;
}
.popup-btns {
display: flex;
justify-content: space-around;
margin-top: 20rpx;
}
.btn {
flex: 1;
margin: 0 10rpx;
padding: 12rpx 0;
border-radius: 6rpx;
}
.cancel-btn {
background: #f5f5f5;
color: #333;
}
.confirm-btn {
background: #f5f5f5;
color: #ff8d1a;
}

BIN
pages/personCenter/contactSuper/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 56 KiB

BIN
pages/personCenter/mine/images/dash.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
pages/personCenter/mine/images/dash2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
pages/personCenter/mine/images/jixiao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
pages/personCenter/mine/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 56 KiB

BIN
pages/personCenter/mine/images/order.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
pages/personCenter/mine/images/setting.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
pages/personCenter/mine/images/ygpm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
pages/personCenter/mine/images/zgpm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

147
pages/personCenter/mine/mine.js
View File

@ -1,6 +1,8 @@
// pages/personCenter/mine/mine.js // pages/personCenter/mine/mine.js
const { baseUrl } = require("../../../request"); const { baseUrl } = require("../../../request");
const { globalImgUrl } = require("../../../request") const { globalImgUrl } = require("../../../request")
const { notLogin } = require('../../../utils/util')
Page({ Page({
@ -8,7 +10,6 @@ Page({
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
items: [null,null,null],
nickName: "", nickName: "",
userAvatar: "", userAvatar: "",
phoneNumber: "", phoneNumber: "",
@ -18,16 +19,70 @@ Page({
isShowOrder: true, isShowOrder: true,
qrcode: "", // 设置二维码图片的路径 qrcode: "", // 设置二维码图片的路径
userRole: "", userRole: "",
title: '查看绩效',
id: 0, id: 0,
globalImgUrl,
showNicknamePopup: false
}, },
// 跳转课程订单页面 // 跳转课程订单页面
courseOrder() { courseOrder() {
wx.navigateTo({ wx.navigateTo({
url: '/pages/course/courseOrderList/courseOrderList', url: '/pages/course/courseOrderList/courseOrderList',
}) })
}, },
updateAvatar(e) {
const { avatarUrl } = e.detail
this.uploadAvatar(avatarUrl)
},
uploadAvatar(filePath) {
wx.showLoading({ title: '上传中...' });
wx.uploadFile({
url: baseUrl + '/file/upload',
filePath,
name: 'file',
formData: {
biz: 'default'
},
success: res => {
wx.hideLoading();
let result = JSON.parse(res.data);
console.log(result)
if (result.code === 1) {
this.setData({userAvatar: result.data})
this.updateUserInfo(result.data)
} else {
wx.showToast({
title: result.message || '上传失败',
icon: 'none'
});
}
},
fail: err => {
wx.hideLoading();
console.error('uploadFile fail', err);
wx.showToast({ title: '网络错误，上传失败', icon: 'none' });
}
});
},
updateUserInfo(view) {
const token = wx.getStorageSync('token')
wx.request({
url: baseUrl + '/userInfo/modify/avatar',
method: 'POST',
header: {
Authorization: token
},
data: {
templateString: view
},
success: res => {
console.log(res.data)
},
fail: err => {
wx.showToast({ title: '用户头像更新失败', icon: 'none' });
}
})
},
// 跳转结算记录页面 // 跳转结算记录页面
gotoSettlementRecord() { gotoSettlementRecord() {
wx.navigateTo({ wx.navigateTo({
@ -117,10 +172,7 @@ Page({
qrcode: globalImgUrl + result.inviteQrCode qrcode: globalImgUrl + result.inviteQrCode
}) })
} else { } else {
wx.showToast({ notLogin(res.data.message)
title: '获取个人信息失败',
icon: 'none'
})
} }
}, },
fail: () => { fail: () => {
@ -141,7 +193,6 @@ Page({
let result = res.data.data let result = res.data.data
this.setData({ this.setData({
nickName: result.nickName, nickName: result.nickName,
// TODO 头像未连接
userAvatar: result.userAvatar, userAvatar: result.userAvatar,
phoneNumber: result.phoneNumber, phoneNumber: result.phoneNumber,
userAccount: result.userAccount, userAccount: result.userAccount,
@ -149,7 +200,9 @@ Page({
userRole: result.userRole, userRole: result.userRole,
id: result.id, id: result.id,
}) })
if (result.userRole !== 'user') this.setData({ isShowOrder: false }); console.log(result.userRole)
if (result.userRole !== 'user') this.setData({ isShowOrder: false});
if (result.userRole === 'staff') this.setData({title: '客户订单'});
} }
} }
}) })
@ -198,22 +251,86 @@ Page({
wx.navigateTo({ wx.navigateTo({
url: `/pages/dashboardModule/supervisorPerformance/supervisorPerformance?role=${userRole}&id=${id}`, url: `/pages/dashboardModule/supervisorPerformance/supervisorPerformance?role=${userRole}&id=${id}`,
}) })
} else if (userRole === 'staff') {
wx.navigateTo({
url: `/pages/dashboardModule/userOrderPerformance/userOrderPerformance?userId=${id}`,
})
} else { } else {
wx.navigateTo({ wx.navigateTo({
url: `/pages/dashboardModule/staffPerformance/staffPerformance?role=${userRole}&id=${id}`, url: `/pages/dashboardModule/staffPerformance/staffPerformance?role=${userRole}&supId=${id}`,
}) })
} }
}, },
// 跳转排名 // 跳转主管排名
gotoRank(e) { gotoSupervisorRank(e) {
console.log(e); console.log(e)
const userRole = e.currentTarget.dataset.userrole; const {userRole} = this.data
console.log('===========>', userRole)
if (userRole === 'staff') {
wx.showToast({
title: '无权限',
icon: 'error'
})
return ;
}
wx.navigateTo({ wx.navigateTo({
url: `/pages/dashboardModule/performanceRanking/performanceRanking?role=${userRole}`, url: `/pages/dashboardModule/performanceRanking/performanceRanking?role=manager&k=1`,
}) })
}, },
// 跳转员工排名
gotoStaffRank(e) {
console.log(e);
const {userRole} = this.data
console.log('===========>', userRole)
if (userRole === 'user') {
wx.showToast({
title: '无权限',
icon: 'error'
})
return ;
}
wx.navigateTo({
url: `/pages/dashboardModule/performanceRanking/performanceRanking?role=staff&k=0`,
})
},
openNicknamePopup() {
this.setData({ showNicknamePopup: true });
},
closeNicknamePopup() {
this.setData({ showNicknamePopup: false });
},
updateNickname(e) {
const { nickname } = e.detail;
const token = wx.getStorageSync('token');
wx.request({
url: baseUrl + '/userInfo/modify/nickname',
method: 'POST',
header: {
Authorization: token
},
data: { templateString: nickname },
success: res => {
if (res.data.code === 1) {
wx.showToast({ title: '修改成功', icon: 'success' });
this.setData({
nickName: nickname,
showNicknamePopup: false
});
} else {
wx.showToast({ title: res.data.message || '修改失败', icon: 'none' });
}
},
fail: () => {
wx.showToast({ title: '网络错误', icon: 'none' });
}
});
},
/** /**
* 生命周期函数--监听页面初次渲染完成 * 生命周期函数--监听页面初次渲染完成
*/ */

3
pages/personCenter/mine/mine.json
View File

@ -1,5 +1,6 @@
{ {
"usingComponents": { "usingComponents": {
"InvitationCodePop": "/pages/personCenter/component/InvitationCodePop/InvitationCodePop" "InvitationCodePop": "/pages/personCenter/component/InvitationCodePop/InvitationCodePop",
"EditNicknamePopup": "/pages/personCenter/component/modifyNamePop/modifyNamePop"
} }
} }

53
pages/personCenter/mine/mine.wxml
View File

@ -212,13 +212,19 @@
<view class="flex-col page"> <view class="flex-col page">
<view class="flex-row justify-between section"> <view class="flex-row justify-between section">
<view class="flex-row items-center self-center"> <view class="flex-row items-center self-center">
<button open-type="chooseAvatar" bind:chooseavatar="updateAvatar">
<image <image
class="image" class="image"
src="./images/logo.png" src="{{globalImgUrl + userAvatar}}"
mode="aspectFill"
/> />
</button>
<view class="flex-col ml-6"> <view class="flex-col ml-6">
<text class="self-start font text">{{ nickName }}</text> <view class="flex-row items-center justify-between" style="width: 250rpx;">
<view class="flex-row items-center self-stretch group_2 mt-9" bind:tap="gotoCall"> <text class="self-start font text nickname-wrap">{{ nickName }}</text>
<text class="self-start font text_2 ml-16" bindtap="openNicknamePopup">修改</text>
</view>
<view class="flex-row items-center self-stretch group_2 mt-9" bindtap="gotoCall">
<image <image
class="image_3" class="image_3"
src="./images/dianhua.png" src="./images/dianhua.png"
@ -248,62 +254,62 @@
</view> </view>
<view class="flex-col mt-22" > <view class="flex-col mt-22" >
<view class="flex-row items-start equal-division section_3" wx:if="{{ userRole != 'user' }}"> <view class="flex-row items-start equal-division section_3" wx:if="{{ userRole != 'user' }}">
<view class="flex-col items-center equal-division-item_1 group_3" bind:tap="checkPerformance"> <view class="flex-col items-center equal-division-item_1 group_3" bindtap="checkPerformance">
<image <image
class="image_5" class="image_5"
src="./images/zhijinxiangqing.png" src="./images/jixiao.png"
/> />
<text class="font text_5 mt-6">查看绩效</text> <text class="font text_5 mt-6">{{title}}</text>
</view> </view>
<view class="flex-col items-center equal-division-item_2 equal-division-item" bind:tap="gotoRank" data-userRole="{{ 'manager' }}"> <view class="flex-col items-center equal-division-item_2 equal-division-item" bindtap="gotoSupervisorRank" data-userRole="{{ 'manager' }}">
<image <image
class="image_5" class="image_5"
src="./images/tixianzhanghu.png" src="./images/zgpm.png"
/> />
<text class="font text_6 mt-6">主管排名</text> <text class="font text_6 mt-6">主管排名</text>
</view> </view>
<view class="flex-col items-center equal-division-item_3 group_5" bind:tap="gotoRank" data-userRole="{{ 'supervisor' }}"> <view class="flex-col items-center equal-division-item_3 group_5" bindtap="gotoStaffRank" data-userRole="{{ 'supervisor' }}">
<image <image
class="image_5" class="image_5"
src="./images/tixianjilu.png" src="./images/ygpm.png"
/> />
<text class="font mt-6">员工排名</text> <text class="font mt-6">员工排名</text>
</view> </view>
</view> </view>
<view class="flex-col list"> <view class="flex-col list">
<view class="flex-row justify-between items-center section_4" wx:if="{{isShowOrder}}"> <view class="flex-row justify-between items-center section_4" wx:if="{{isShowOrder}}" bindtap="courseOrder">
<view class="flex-row items-center" bind:tap="courseOrder"> <view class="flex-row items-center">
<image <image
class="shrink-0 image_6" class="shrink-0 image_6"
src="./images/zhanghaoshezhi.png" src="./images/order.png"
/> />
<text class="font ml-5">我的订单</text> <text class="font ml-8">我的订单</text>
</view> </view>
<image <image
class="image_7" class="image_7"
src="./images/xiajiantou.png" src="./images/xiajiantou.png"
/> />
</view> </view>
<view class="flex-row justify-between items-center section_4 mt-11" bind:tap="gotoDashboard"> <view class="flex-row justify-between items-center section_4 mt-11" bindtap="gotoDashboard" wx:if="{{ userRole !== 'user' }}">
<view class="flex-row items-center"> <view class="flex-row items-center">
<image <image
class="shrink-0 image_6" class="shrink-0 image_6"
src="./images/zhanghaoshezhi.png" src="./images/dash.png"
/> />
<text class="font text_7 ml-5">仪表盘</text> <text class="font text_7 ml-8">仪表盘</text>
</view> </view>
<image <image
class="image_7" class="image_7"
src="./images/xiajiantou.png" src="./images/xiajiantou.png"
/> />
</view> </view>
<view class="flex-row justify-between items-center section_4 mt-11" bind:tap="zhshezhi"> <view class="flex-row justify-between items-center section_4 mt-11" bindtap="zhshezhi">
<view class="flex-row items-center"> <view class="flex-row items-center">
<image <image
class="shrink-0 image_6" class="shrink-0 image_6"
src="./images/zhanghaoshezhi.png" src="./images/setting.png"
/> />
<text class="font text_8 ml-5">账号设置</text> <text class="font text_8 ml-8">账号设置</text>
</view> </view>
<image <image
class="image_7" class="image_7"
@ -316,3 +322,10 @@
<!-- 调用弹窗组件 --> <!-- 调用弹窗组件 -->
<InvitationCodePop show="{{showPopup}}" bind:close="closePopup" qrcode="{{qrcode}}"/> <InvitationCodePop show="{{showPopup}}" bind:close="closePopup" qrcode="{{qrcode}}"/>
<EditNicknamePopup
show="{{showNicknamePopup}}"
nickname="{{nickName}}"
bind:cancel="closeNicknamePopup"
bind:confirm="updateNickname"
/>

35
pages/personCenter/mine/mine.wxss
View File

@ -11,7 +11,7 @@
margin-left: 9.38rpx; margin-left: 9.38rpx;
} }
.page { .page {
padding: 65.63rpx 28.13rpx 780rpx; padding: 65.63rpx 28.13rpx 0;
background-image: linear-gradient(180deg, #ff8d1a -7.3%, #ffffff00 92.1%); background-image: linear-gradient(180deg, #ff8d1a -7.3%, #ffffff00 92.1%);
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
@ -19,13 +19,26 @@
height: 100%; height: 100%;
} }
.section { .section {
padding: 15rpx 13.13rpx 26.25rpx; padding: 15rpx 13.13rpx;
background-color: #ffffff; background-color: #ffffff;
border-radius: 8.33rpx; border-radius: 8.33rpx;
} }
.image { .image {
width: 161.25rpx; margin: 20rpx;
height: 161.25rpx; width: 141.25rpx;
height: 141.25rpx;
border-radius: 30rpx;
}
button {
/* 去掉默认最小宽度 */
min-width: 0 !important;
/* 确保宽度随内容自适应 */
width: auto !important;
/* 下面是其他重置，保证“隐形” */
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
} }
.font { .font {
font-size: 26.25rpx; font-size: 26.25rpx;
@ -51,9 +64,10 @@
} }
.text_2 { .text_2 {
color: #808080; color: #808080;
line-height: 17.08rpx; line-height: 1.4;
} }
.section_2 { .section_2 {
width: 230rpx;
padding: 7.5rpx 13.13rpx 5.63rpx 14.03rpx; padding: 7.5rpx 13.13rpx 5.63rpx 14.03rpx;
background-color: #fff6de; background-color: #fff6de;
border-radius: 31.26rpx; border-radius: 31.26rpx;
@ -67,7 +81,7 @@
} }
.group { .group {
margin-top: 33.75rpx; margin-top: 33.75rpx;
width: 163.72rpx; width: 133.72rpx;
} }
.image_2 { .image_2 {
margin-left: 17.48rpx; margin-left: 17.48rpx;
@ -123,7 +137,7 @@
width: 224.59rpx; width: 224.59rpx;
} }
.list { .list {
padding-top: 39.38rpx; padding-top: 19.38rpx;
} }
.section_4 { .section_4 {
padding: 31.88rpx 31.88rpx 30rpx 33.75rpx; padding: 31.88rpx 31.88rpx 30rpx 33.75rpx;
@ -145,3 +159,10 @@
.text_8 { .text_8 {
line-height: 23.81rpx; line-height: 23.81rpx;
} }
.nickname-wrap {
display: block; /* 让它单独占一行 */
max-width: 250rpx; /* 不超过容器宽度 */
white-space: normal; /* 允许正常换行 */
word-break: break-all; /* 长字符串也能断行 */
line-height: 1.4;
}

23
pages/personCenter/resetPwd/resetPwd.js
View File

@ -1,5 +1,6 @@
import { baseUrl } from "../../../request"; import { baseUrl } from "../../../request";
import { formatPassword } from "../../../utils/util" import { formatPassword } from "../../../utils/util"
const { notLogin } = require('../../../utils/util')
// pages/personCenter/resetPwd/resetPwd.js // pages/personCenter/resetPwd/resetPwd.js
Page({ Page({
@ -13,11 +14,12 @@ Page({
count: 60, count: 60,
password: '', // 第一次输入的密码 password: '', // 第一次输入的密码
currentPwd: '', // 再次确认密码 currentPwd: '', // 再次确认密码
verificationCode: '' // 验证码 verificationCode: '', // 验证码
role: '',
}, },
resetPwd() { resetPwd() {
const { phone, verificationCode, password, currentPwd } = this.data; const { phone, verificationCode, password, currentPwd, role } = this.data;
if( !formatPassword(password,currentPwd) ) { if( !formatPassword(password,currentPwd) ) {
return; return;
} }
@ -32,7 +34,8 @@ Page({
verificationCode: verificationCode, verificationCode: verificationCode,
userPassword: password, userPassword: password,
userConfirmPassword: currentPwd, userConfirmPassword: currentPwd,
sourceToken: wx.getStorageSync('token') sourceToken: wx.getStorageSync('token'),
userRole: role,
}, },
success: res => { success: res => {
console.log('修改密码--->',res); console.log('修改密码--->',res);
@ -43,15 +46,12 @@ Page({
}) })
setTimeout(() => { setTimeout(() => {
wx.reLaunch({ wx.reLaunch({
url: '/pages/loginModule/pwdLogin/pwdLogin', url: `/pages/loginModule/pwdLogin/pwdLogin?role=${role}`,
}) })
}, 1000); // 1000ms = 1秒 }, 1000); // 1000ms = 1秒
} else { } else {
wx.showModal({ notLogin(res.data.message)
title: '提示',
content: res.data.message
})
} }
} }
}) })
@ -67,7 +67,8 @@ Page({
Authorization: wx.getStorageSync('token') Authorization: wx.getStorageSync('token')
}, },
data: { data: {
templateString: phone phoneNumber: phone,
userRole: wx.getStorageSync('role')
}, },
success: res => { success: res => {
if (res.data.code === 1) { if (res.data.code === 1) {
@ -111,6 +112,10 @@ Page({
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad(options) { onLoad(options) {
console.log('---->',options);
this.setData({
role: options.role
})
// 获取用户信息 —— 用于渲染手机号 // 获取用户信息 —— 用于渲染手机号
wx.request({ wx.request({
url: baseUrl + '/userInfo/get/jwt', url: baseUrl + '/userInfo/get/jwt',

76
pages/personCenter/resetPwd/resetPwd.wxml
View File

@ -1,33 +1,63 @@
<view class="flex-col page"> <view class="page">
<view class="flex-col section">
<view class="self-start font text">{{ phone }}</view> <!-- 表单卡片 -->
<view class="flex-row justify-between self-stretch group"> <view class="card section">
<input <!-- 顶部手机号 -->
class="font text_2" <text class="phone font text">{{ phone }}</text>
placeholder="验证码"
bindinput="onInput" <!-- 验证码行：输入 + 发送 -->
data-field="verificationCode" <view class="field field-row group">
value="{{ verificationCode }}"
/>
<view bind:tap="{{ sending ? '' : 'getVerificationCode' }}">
<text class="font text_3">{{ sending ? count + 's后重发' : '发送验证码' }}</text>
</view>
</view>
<input <input
class="text_1 font" class="field-input flex-1 font"
placeholder="密码" placeholder="请输入验证码"
placeholder-class="ph"
bindinput="onInput"
data-field="verificationCode"
value="{{ verificationCode }}"
type="number"
maxlength="6"
/>
<text style="font-size: 22.5rpx;"
class="code-btn font text_3 {{ sending ? 'disabled' : '' }}"
bindtap="{{ sending ? '' : 'getVerificationCode' }}"
>{{ sending ? count + 's后重发' : '发送验证码' }}
</text>
</view>
<!-- 新密码 -->
<view class="field">
<input
class="field-input font"
placeholder="请输入新密码"
placeholder-class="ph"
bindinput="onInput" bindinput="onInput"
data-field="password" data-field="password"
value="{{ password }}" value="{{ password }}"
/> password="true"
<view class="self-stretch divider"></view> maxlength="18"
/>
</view>
<view class="divider"></view>
<!-- 再次输入新密码 -->
<view class="field mt-16">
<input <input
class="text_8 font text_4" class="field-input font"
placeholder="再输入密码" placeholder="请再次输入新密码"
placeholder-class="ph"
bindinput="onInput" bindinput="onInput"
data-field="currentPwd" data-field="currentPwd"
value="{{ currentPwd }}" value="{{ currentPwd }}"
/> password="true"
maxlength="18"
/>
</view>
<!-- 提交按钮 -->
<view class="btn-primary text-wrapper mt-20" bindtap="resetPwd">
<text class="btn-primary-text text_5">重置密码</text>
</view> </view>
<view class="flex-col justify-start items-center text-wrapper mt-20" bind:tap="resetPwd"><text class="font text_5">重置密码</text></view> </view>
</view> </view>

157
pages/personCenter/resetPwd/resetPwd.wxss
View File

@ -1,62 +1,131 @@
/* ===== 背景与页面 ===== */
.page { .page {
padding: 68.7rpx 47.71rpx 977.1rpx 47.71rpx; box-sizing: border-box;
min-height: 100vh;
padding: 68.7rpx 47.71rpx 80rpx;
background-image: linear-gradient(180deg, #ffa64d 0%, #f5f5f5 30.1%); background-image: linear-gradient(180deg, #ffa64d 0%, #f5f5f5 30.1%);
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
height: 100%;
} }
.section {
padding: 42.06rpx 32.44rpx 31.89rpx 32.44rpx; /* ===== 卡片容器 ===== */
.section,
.card {
background-color: #ffffff; background-color: #ffffff;
border-radius: 19.08rpx; border-radius: 24rpx; /* 略大圆角更现代 */
padding: 42rpx 32rpx 32rpx;
box-shadow: 0 12rpx 36rpx rgba(0,0,0,0.08);
} }
.group {
margin-top: 28.28rpx; /* 顶部手机号 */
padding: 29.43rpx 0 26.18rpx; .phone {
border-top: solid 1.91rpx #e3e3e3;
border-bottom: solid 1.91rpx #e3e3e3;
}
.text_1 {
align-self: flex-start; align-self: flex-start;
margin-top: 31.26rpx; margin-bottom: 8rpx;
color: #323232;
} }
/* ===== 表单字段 ===== */
.field {
background: #fff;
border: 1rpx solid #e9e9ec;
border-radius: 16rpx;
padding: 20rpx 24rpx;
box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.04);
margin-top: 22rpx;
}
.field:focus-within {
border-color: #ff8d1a;
box-shadow: 0 10rpx 24rpx rgba(255,141,26,0.14);
}
.field-row {
display: flex;
align-items: center;
gap: 16rpx;
padding-right: 16rpx;
border-top: none; /* 覆盖你原 group 的上下边线视觉，改用阴影与留白 */
border-bottom: none;
}
.field-input {
width: 100%;
font-size: 30rpx;
color: #1c2023;
line-height: 44rpx;
}
.ph { color: #9aa0a6; }
/* ===== 发送验证码按钮（text 充当按钮） ===== */
.code-btn {
height: 44rpx;
padding: 0 24rpx;
background: #ff8d1a;
border-radius: 14rpx;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
color: #fff;
font-size: 26rpx;
font-weight: 600;
box-shadow: 0 8rpx 18rpx rgba(255,141,26,0.25);
transition: transform .08s ease-in-out, opacity .2s;
}
.code-btn:active { transform: scale(0.98); }
.code-btn.disabled {
opacity: 0.55;
box-shadow: none;
}
/* ===== 分隔线 ===== */
.divider { .divider {
margin-top: 28.19rpx; margin-top: 20rpx;
background-color: #e3e3e3; background-color: #eaeaea;
height: 1.91rpx; height: 2rpx;
border-radius: 2rpx;
} }
.text_8 {
align-self: flex-start; /* ===== 主按钮 ===== */
margin-top: 27.44rpx; .text-wrapper,
.btn-primary {
height: 96rpx;
border-radius: 48rpx; /* 胶囊按钮 */
background: linear-gradient(180deg, #ff9a2d 0%, #ff8d1a 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 14rpx 28rpx rgba(255,141,26,0.28);
transition: transform .06s ease-in-out;
} }
.text-wrapper:active,
.btn-primary:active { transform: scale(0.985); }
.btn-primary-text,
.text_5 {
color: #ffffff;
font-size: 32rpx;
font-weight: 700;
}
/* ===== 字体与基础色（沿用你原有 font 类命名） ===== */
.font { .font {
font-size: 30.53rpx; font-size: 30.53rpx;
font-family: SourceHanSansCN; font-family: SourceHanSansCN;
line-height: 28.34rpx; line-height: 1.45;
color: #323232; color: #323232;
} }
.text_3 {
color: #ff8d1a; /* 你原有的一些类做柔性兼容（可保留以免他处引用报错） */
line-height: 28.36rpx; .group { margin-top: 20rpx; } /* 原本有上下边线，已在 field-row 中弱化处理 */
} .text_1 { align-self: flex-start; margin-top: 16rpx; }
.text_2 { .text_2 { line-height: 1.3; }
line-height: 28.13rpx; .text_3 { color: #fff; }
} .text { margin-left: 0; line-height: 1.2; }
.text { .text_4 { line-height: 1.3; }
margin-left: 2.69rpx; .text_8 { align-self: flex-start; margin-top: 16rpx; }
line-height: 23.17rpx;
} /* ===== 工具类 ===== */
.text_4 { .mt-16 { margin-top: 32rpx; }
line-height: 28.45rpx; .mt-20 { margin-top: 40rpx; }
} .flex-1 { flex: 1; }
.text-wrapper {
margin-left: 45.8rpx;
margin-right: 43.89rpx;
padding: 24.58rpx 0 19.6rpx;
background-color: #ff8d1a;
border-radius: 67.46rpx;
}
.text_5 {
color: #ffffff;
}

BIN
pages/projectModule/projectList/images/banner.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 145 KiB

41
pages/test/testVideo/testVideo.js
View File

@ -1,41 +0,0 @@
Page({
/**
* 页面的初始数据
*/
data: {
},
videoPlay(){
this.videoContext.play()
},
videoPause() {
this.videoContext.pause()
},
videoPlayBackRate() {
this.videoContext.playbackRate(1.5)
},
videorequestFullScreen() {
this.videoContext.requestFullScreen()
},
videoSeek0() {
this.videoContext.seek(0)
},
bindInputBlur: function (e) {
this.inputValue = e.detail.value
},
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,
color:"#FFFFF"
})
},
onReady: function () {
this.videoContext = wx.createVideoContext('Video')
}
})

8
pages/test/testVideo/testVideo.wxml
View File

@ -1,8 +0,0 @@
<video src="http://1.94.237.210:8848/test.mp4" id="Video" danmu-btn enable-danmu></video>
<input placeholder="在这里输入你要发送的弹幕内容" bindblur="bindInputBlur"/>
<button type="warn" bindtap="bindSendDanmu">发送弹幕</button>
<button type="primary" size="mini" bindtap="videoPlay">播放</button>
<button type="primary" size="mini" bindtap="videoPause">暂停</button>
<button type="primary" size="mini" bindtap="videoPlayBackRate">1.25倍快进</button>
<button type="primary" size="mini" bindtap="videorequestFullScreen">全屏</button>
<button type="primary" size="mini" bindtap="videoSeek0">重新播放</button>

1
pages/test/testVideo/testVideo.wxss
View File

@ -1 +0,0 @@
/* pages/test/testVideo/testVideo.wxss */

23
pages/welcome/homePage/homePage.js
View File

@ -20,13 +20,24 @@ Page({
/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad(options) { onLoad() {
let token = wx.getStorageSync('token') let token = wx.getStorageSync('token')
if (token) { if (!token) return ;
wx.switchTab({ wx.request({
url: '/pages/course/homepage/homepage' url: baseUrl + '/userInfo/verify/token',
}) method: 'POST',
} header: {
'Authorization': token
},
success: res => {
console.log(res.data)
if (res.data.code === 1) {
wx.switchTab({
url: '/pages/course/homepage/homepage'
})
}
}
})
}, },
/** /**

61
pages/welcome/homePage/homePage.wxml
View File

@ -1,20 +1,51 @@
<view class="flex-col justify-start items-center page"> <view class="page">
<view class="flex-col section"> <view class="section">
<view class="flex-col items-center"> <!-- 顶部 Logo 与标题 -->
<image <view class="logo-area">
class="image" <image class="logo" src="/static/logo.jpg" mode="aspectFill" />
src="./images/logo.png" <text class="title">欢迎进入丁香校园</text>
/>
<text class="mt-12 text">欢迎进入青橙校园</text>
</view> </view>
<view class="mt-38 flex-col">
<view class="flex-col justify-start items-center text-wrapper" bind:tap="userLogin" data-role="{{ 'user' }}"><text class="font text_2">我是用户</text></view> <!-- 身份选择按钮组 -->
<view class="flex-col justify-start items-center text-wrapper_2 mt-9" bind:tap="userLogin" data-role="{{ 'supervisor' }}"><text class="font">我是主管</text></view> <view class="btn-group">
<view class="flex-col justify-start items-center text-wrapper_2 mt-9" bind:tap="userLogin" data-role="{{ 'staff' }}"> <view
<text class="font text_3">我是员工</text> class="btn btn--primary"
hover-class="btn--hover"
hover-stay-time="80"
bind:tap="userLogin"
data-role="{{ 'user' }}"
>
<text class="btn-text btn-text--light">我是用户</text>
</view> </view>
<view class="flex-col justify-start items-center text-wrapper_2 mt-9" bind:tap="userLogin" data-role="{{ 'manager' }}">
<text class="font text_3">我是经理</text> <view
class="btn btn--outline"
hover-class="btn--hover"
hover-stay-time="80"
bind:tap="userLogin"
data-role="{{ 'staff' }}"
>
<text class="btn-text">我是员工</text>
</view>
<view
class="btn btn--outline"
hover-class="btn--hover"
hover-stay-time="80"
bind:tap="userLogin"
data-role="{{ 'supervisor' }}"
>
<text class="btn-text">我是主管</text>
</view>
<view
class="btn btn--outline"
hover-class="btn--hover"
hover-stay-time="80"
bind:tap="userLogin"
data-role="{{ 'manager' }}"
>
<text class="btn-text">我是经理</text>
</view> </view>
</view> </view>
</view> </view>

Some files were not shown because too many files have changed in this diff Show More