zhangjing/xuan_wechat
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[最新更新]

Browse Source
This commit is contained in:
张慢慢
2024-03-04 15:13:17 +08:00
parent 51a04d53ce
commit ee98f5921d
42 changed files with 1853 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
pages/empower/empowerOrder/empowerOrder.js Normal file
View File

@@ -0,0 +1,178 @@
/*
* 手太欠
* 愿这世界都如故事里一样 美好而动人~
*/
Page({
/**
* 页面的初始数据
*/
data: {
statusArr : [{ title: '全部订单', id: '' }],
empowerArr : [{ title: '全部课程', id: '' }],
statusIndex : 0,
empowerIndex: 0,
// 报名信息
users : [],
usersTotal : 0,
usersShow : false,
// 订单列表
orders : [],
// 分页
page : {}, // 分页信息
lodingStats : false,// 加载状态
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
wx.$api.empower.orderInit().then(res => {
let { status, empower } = res.data;
this.setData({
statusArr : status,
empowerArr : [...this.data.empowerArr, ...empower]
})
// 获取列表
this.getList()
}).catch(err => {})
},
// 筛选类型
onPickerChange(e){
this.setData({
statusIndex: e.detail.value
})
this.getList()
},
// 筛选类型-课程
onPickerClass(e){
this.setData({
empowerIndex: e.detail.value
})
this.getList()
},
/**
* 获取列表
*/
getList(page) {
wx.$api.empower.orderList({
page : page || 1,
status : this.data.statusArr[this.data.statusIndex].id,
empower : this.data.empowerArr[this.data.empowerIndex].id
}).then(res => {
let listArr = this.data.orders,
newData = []
if(page == 1 || page == undefined) listArr = []
newData = listArr.concat(res.data.data)
newData.map(val => {
val.is_show_type = false
})
this.setData({
orders : newData,
page : res.data.page,
lodingStats : false
})
wx.stopPullDownRefresh()
}).catch(err => {})
},
/**
* 课程数量
*/
typeTap(e) {
let index = e.currentTarget.dataset.index
this.setData({
[`orders[${index}].is_show_type`]: !this.data.orders[index].is_show_type
});
},
/**
* 报名信息
*/
onShowUsers(val) {
let { count, lists } = val.currentTarget.dataset.items
this.setData({
users : lists,
usersTotal : count,
usersShow : true
})
},
/**
* 报名信息弹出关闭
*/
usersHide() {
this.setData({
usersShow: false
})
},
/**
* 取消订单
*/
onCancel(e){
let id = e.currentTarget.dataset.id
wx.showModal({
title : '提示',
content : '取消订单后无法找回，确认取消吗？',
success : modalRes => {
if(modalRes.confirm){
wx.showLoading({
title: '加载中...',
mask : true
})
wx.$api.empower.orderCancel(id).then(res => {
wx.showToast({
title: '订单已取消',
icon : 'none'
})
this.getList()
}).catch(err => {})
}
}
})
},
/**
* 支付
*/
onPay(e){
let data = e.currentTarget.dataset.item
wx.redirectTo({
url: '/pages/pay/index?params=' + encodeURIComponent(JSON.stringify(data))
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
// 获取订单列表
this.getList()
},
/**
* 上拉加载
*/
onReachBottom(){
this.setData({
lodingStats: true
})
let pageNumber = this.data.page.current
if(this.data.page.has_more){
pageNumber++
// 获取订单列表
this.getList(pageNumber)
}
},
})

3
pages/empower/empowerOrder/empowerOrder.json Normal file
View File

@@ -0,0 +1,3 @@
{
"usingComponents": {}
}

98
pages/empower/empowerOrder/empowerOrder.wxml Normal file
View File

@@ -0,0 +1,98 @@
<view class="content">
<!-- tabs -->
<view class="screen-flex">
<view class="screen-picker">
<picker range="{{statusArr}}" range-key="title" value="{{statusIndex}}" bindchange="onPickerChange">
<view class="screen-text">
{{ statusArr[statusIndex].title }}<image class="screen-icon" src="/static/icons/empowerArrow.png"></image>
</view>
</picker>
</view>
<view class="screen-picker">
<picker range="{{empowerArr}}" range-key="title" value="{{empowerIndex}}" bindchange="onPickerClass">
<view class="screen-text">
{{ empowerArr[empowerIndex].title }}<image class="screen-icon" src="/static/icons/empowerArrow.png"></image>
</view>
</picker>
</view>
</view>
<!-- 订单管理列表 -->
<view class="orders" wx:if="{{orders.length > 0}}">
<view class="orders-item" wx:for="{{orders}}" wx:key="orders">
<view class="orders-flex">
<view class="no nowrap" bindtap="copyNo" data-no="item.order_no">
<text class="orders-tag" wx:if="{{!item.is_my}}">客户</text>
<text class="orders-tag order-tag-my" wx:else>个人</text>
{{item.order_no}}
</view>
<view class="state">{{item.status_text}}</view>
</view>
<view class="orders-content">
<view class="orders-content-item">
<label>课程名称</label>
<view class="nowrap orders-content-type">{{item.empower.title}}</view>
</view>
<view class="orders-content-item orders-content-bottom" bindtap="typeTap" data-index="{{index}}" data-type="{{item.is_show_type}}">
<label>课程数量</label>
<view class="nowrap orders-content-type">
×{{item.items.count}}<image class="orders-content-icon {{item.is_show_type ? 'active' : ''}}" src="/static/icons/arrow_more.png"></image>
</view>
</view>
<view class="orders-content-block" wx:if="{{item.is_show_type}}">
<view class="item-flex" wx:for="{{item.items.lists}}" wx:key="lists" wx:for-item="citem">
<view class="item-flex-title">{{citem.semester.subtitle}}({{citem.name}})</view>
<view class="item-flex-value">￥{{citem.price}}</view>
</view>
</view>
<view class="orders-content-item">
<label>支付金额</label>
<view class="nowrap">￥{{item.price}}</view>
</view>
<view class="orders-content-item">
<label>下单时间</label>
<view class="nowrap">{{item.created_at}}</view>
</view>
<view class="orders-content-item" wx:if="{{item.paid_at != ''}}">
<label>支付时间</label>
<view class="nowrap">{{item.paid_at}}</view>
</view>
</view>
<view class="orders-flex">
<view class="btns">
<view class="btns-item btns-border" wx:if="{{item.status == 0}}" bindtap="onCancel" data-id="{{item.order_id}}">取消</view>
<view class="btns-item btns-border" wx:if="{{item.status == 0}}" bindtap="onPay" data-item="{{item}}">支付</view>
<view class="btns-item" bindtap="onShowUsers" data-items="{{item.items}}">报名信息</view>
</view>
</view>
</view>
<view class="pagesLoding" wx:if="{{lodingStats}}">
<block wx:if="{{page.has_more}}">
<image class="pagesLoding-icon" src="/static/icons/refresh_loding.gif" mode="widthFix"></image>加载中...
</block>
<block wx:else>
没有更多了~
</block>
</view>
</view>
<view class="pack-center pages-hint" wx:else>
<image src="/static/imgs/text_null.png"></image>
<view>暂无数据</view>
</view>
<!-- 弹出报名人信息 -->
<view class="users-back {{usersShow ? 'active' : ''}}"></view>
<view class="users-content {{usersShow ? 'active' : ''}}">
<view class="users-title">报名信息<image class="users-content-icon" bindtap="usersHide" src="/static/icons/close.png"></image></view>
<view class="users-lists">
<view class="users-lists-item" wx:for="{{users}}" wx:key="index">
<view class="users-item nowrap"><label>报名姓名</label>{{item.name}}</view>
<view class="users-item nowrap"><label>报名手机</label>{{item.mobile}}</view>
<view class="users-item nowrap"><label>课程名称</label>{{item.semester.subtitle}}</view>
<view class="users-item nowrap"><label>签到状态</label><text class="bold">{{item.status_text}}</text></view>
<view class="users-item"><label>课程地址</label>{{item.semester.address}}</view>
</view>
</view>
</view>
</view>

271
pages/empower/empowerOrder/empowerOrder.wxss Normal file
View File

@@ -0,0 +1,271 @@
.content {
background: #f7f8f9;
min-height: calc(100vh - 44px);
}
/* 订单弹出层 */
.users-back {
position: fixed;
height: 100vh;
width: 100%;
left: 0;
bottom: 0;
z-index: 100;
background-color: rgba(0, 0, 0, .4);
display: none;
}
.users-back.active {
display: block;
}
.users-content {
position: fixed;
height: 80vh;
width: 100%;
left: 0;
bottom: 0;
z-index: 101;
background-color: white;
display: none;
}
.users-content.active {
display: block;
}
.users-title {
text-align: center;
font-weight: bold;
font-size: 40rpx;
color: #333;
height: 70rpx;
line-height: 70rpx;
padding: 30rpx;
position: relative;
}
.users-content-icon {
position: absolute;
right: 30rpx;
top: 44rpx;
width: 40rpx;
height: 40rpx;
}
.users-lists {
padding: 0 30rpx 50rpx;
max-height: 70vh;
overflow-y: scroll;
}
.users-lists-item {
background: #f7f8f9;
padding: 30rpx;
border-radius: 20rpx;
font-size: 30rpx;
margin-bottom: 30rpx;
}
.users-item {
position: relative;
line-height: 45rpx;
min-height: 45rpx;
padding-left: 160rpx;
margin: 5rpx 0;
text-align: right;
}
.users-item label {
position: absolute;
left: 0;
top: 0;
color: gray;
}
.users-item .bold {
font-weight: bold;
color: #da2b56;
}
/* 订单筛选 */
.screen-flex {
display: flex;
flex-wrap: wrap;
position: fixed;
width: 100%;
left: 0;
top: 0;
height: 90rpx;
background-color: white;
z-index: 99;
}
.screen-picker {
width: 50%;
text-align: center;
}
.screen-text {
line-height: 90rpx;
height: 90rpx;
display: inline-block;
font-size: 30rpx;
}
.screen-icon {
margin-left: 5rpx;
width: 34rpx;
height: 34rpx;
vertical-align: -6rpx;
}
/* 订单为空 */
.order-null {
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
}
/* 订单列表 */
.orders {
padding: 30rpx 0 10rpx;
margin-top: 90rpx;
}
.orders-item {
margin: 0 30rpx 20rpx;
background-color: white;
border-radius: 20rpx;
}
.orders-content {
padding: 20rpx 30rpx;
}
.orders-content-item {
line-height: 70rpx;
display: flex;
justify-content: space-between;
font-size: 30rpx;
color: #111111;
}
.orders-content-item label {
color: #999999;
}
.orders-content .orders-content-bottom {
padding-right: 30rpx;
position: relative;
}
.orders-content-type {
display: flex;
}
.orders-content-icon {
width: 20rpx;
height: 20rpx;
margin-top: 26rpx;
transition: .3s;
}
.orders-content-icon.active {
transform: rotate(90deg);
}
.orders-content-icon {
position: absolute;
right: 0;
top: 0;
}
.orders-content-block {
background: rgba(68, 110, 254, .03);
padding: 20rpx;
font-size: 28rpx;
border-radius: 10rpx;
margin: 10rpx 0;
}
.item-flex {
display: flex;
justify-content: space-between;
line-height: 50rpx;
}
.orders-flex {
border-bottom: solid 1rpx #F6F6F6;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 30rpx;
}
.orders-flex:last-child {
border-top: solid 1rpx #F6F6F6;
border-bottom: none;
}
.orders-tag {
display: inline-block;
background: #da2b56;
font-size: 26rpx;
color: white;
border-radius: 10rpx;
padding: 0 10rpx;
height: 40rpx;
line-height: 40rpx;
margin-right: 10rpx;
}
.orders-tag.order-tag-my {
background: #da2b56;
}
.no {
font-size: 30rpx;
color: #111;
line-height: 60rpx;
width: calc(100% - 150rpx);
}
.state {
color: #da2b56;
font-weight: bold;
font-size: 30rpx;
line-height: 60rpx;
width: 150rpx;
text-align: right;
}
.btns {
text-align: right;
width: 100%;
}
.btns-item {
display: inline-block;
height: 70rpx;
line-height: 70rpx;
background: #da2b56;
color: white;
border-radius: 35rpx;
padding: 0 30rpx;
font-size: 30rpx;
}
.btns-item.btns-border {
line-height: 68rpx;
box-sizing: border-box;
border: solid 1rpx #da2b56;
background: white;
color: #da2b56;
margin-right: 20rpx;
}
.pack-center {
z-index: 0;
}