You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
765 lines
20 KiB
765 lines
20 KiB
<!--订单列表-列表-->
|
|
<template>
|
|
<view class="main_box">
|
|
|
|
<view class="main_section">
|
|
<scroll-view
|
|
class="section_1"
|
|
scroll-y="true"
|
|
:lower-threshold="lowerThreshold"
|
|
@scrolltolower="loadMoreData"
|
|
style="height: 83vh;"
|
|
>
|
|
<view
|
|
class="item"
|
|
v-for="(v,k) in tableList"
|
|
:key="k"
|
|
>
|
|
<view class="top">
|
|
<view class="title">订单状态：{{v.order_status == 'pending' ? '待支付':'已支付' }}</view>
|
|
<!-- <view class="btn" @click="downloadFile($util.img(v.file_data))">下载合同 <fui-icon name="arrowright" color="#A4ADB3" size="35"></fui-icon></view>-->
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="box">
|
|
<view class="title">客户姓名：</view>
|
|
<view class="content">{{ v.resource_id_name || ''}}</view>
|
|
</view>
|
|
|
|
<view class="box">
|
|
<view class="title">付款类型：</view>
|
|
<view class="content">
|
|
{{ v.payment_type === 'cash' ? '现金支付' : v.payment_type === 'scan_code' ? '扫码支付' : '订阅支付' }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="box">
|
|
<view class="title">订单金额：</view>
|
|
<view class="content">￥{{ v.order_amount || ''}}</view>
|
|
</view>
|
|
|
|
<view class="box">
|
|
<view class="title">课程：</view>
|
|
<view class="content">{{ v.course_id_name || ''}}</view>
|
|
</view>
|
|
|
|
<view class="box">
|
|
<view class="title">班级：</view>
|
|
<view class="content">{{ v.class_id_name }}</view>
|
|
</view>
|
|
|
|
<view class="box">
|
|
<view class="title">人员：</view>
|
|
<view class="content">{{ v.staff_id_name || ''}}</view>
|
|
</view>
|
|
|
|
<view class="box">
|
|
<view class="title">支付时间：</view>
|
|
<view class="content">{{ v.payment_time || '' }}</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</scroll-view>
|
|
<!-- <view class="btn_section">-->
|
|
<!-- <view class="btn" style="background-color:#29d3b4;" @click="openOrderShow()">创建订单</view>-->
|
|
<!-- </view>-->
|
|
</view>
|
|
|
|
<!--创建订单弹出层-->
|
|
<fui-modal class="order_modal" :buttons="[]" width="600" :show="order_show">
|
|
<text class="fui-title">创建订单</text>
|
|
<text class="fui-descr"></text>
|
|
<fui-form class="form-section" ref="form" top="0" :model="formData" :show="false">
|
|
<view class="input-style">
|
|
<!--客户名称-->
|
|
<fui-form-item
|
|
label="客户名称"
|
|
labelSize='26'
|
|
prop=""
|
|
background='#fff'
|
|
labelColor='#000'
|
|
:bottomBorder='true'
|
|
>
|
|
<view class="input-title" style="margin-right:14rpx;">
|
|
<fui-input
|
|
:disabled="true"
|
|
:borderBottom="false"
|
|
:padding="[0]"
|
|
placeholder="请输入客户名称"
|
|
v-model="formData.resource_id_name"
|
|
backgroundColor="#fff"
|
|
size="26"
|
|
color="#000"
|
|
></fui-input>
|
|
</view>
|
|
</fui-form-item>
|
|
|
|
<!--付款类型-->
|
|
<fui-form-item
|
|
label="选择付款类型"
|
|
asterisk
|
|
asteriskPosition="right"
|
|
labelSize='26'
|
|
prop=""
|
|
background='#fff'
|
|
labelColor='#000'
|
|
:bottomBorder='true'
|
|
>
|
|
<view class="input-title" style="margin-right:14rpx;">
|
|
<view
|
|
class="input-title"
|
|
style="margin-right:14rpx;"
|
|
@click="openPaymentType()">
|
|
{{ (formData.payment_type) ? formData.payment_type_name : '点击选择' }}
|
|
</view>
|
|
</view>
|
|
<fui-picker
|
|
:linkage='true'
|
|
:options="payment_type_options"
|
|
:layer="1"
|
|
:show="payment_type_show"
|
|
@change="changePaymentType"
|
|
@cancel="cancelPaymentType">
|
|
</fui-picker>
|
|
</fui-form-item>
|
|
|
|
<!--课程-->
|
|
<fui-form-item
|
|
label="选择课程"
|
|
asterisk
|
|
asteriskPosition="right"
|
|
labelSize='26'
|
|
prop=""
|
|
background='#fff'
|
|
labelColor='#000'
|
|
:bottomBorder='true'
|
|
>
|
|
<view class="input-title" style="margin-right:14rpx;">
|
|
<view
|
|
class="input-title"
|
|
style="margin-right:14rpx;"
|
|
@click="openCourseId()">
|
|
{{ (formData.course_id) ? formData.course_id_name : '点击选择' }}
|
|
</view>
|
|
</view>
|
|
<fui-picker
|
|
:linkage='true'
|
|
:options="course_id_options"
|
|
:layer="1"
|
|
:show="course_id_show"
|
|
@change="changeCourseId"
|
|
@cancel="cancelCourseId">
|
|
</fui-picker>
|
|
</fui-form-item>
|
|
|
|
<!--班级-->
|
|
<fui-form-item
|
|
label="选择班级"
|
|
asterisk
|
|
asteriskPosition="right"
|
|
labelSize='26'
|
|
prop=""
|
|
background='#fff'
|
|
labelColor='#000'
|
|
:bottomBorder='true'
|
|
>
|
|
<view class="input-title" style="margin-right:14rpx;">
|
|
<view
|
|
class="input-title"
|
|
style="margin-right:14rpx;"
|
|
@click="openClassId()">
|
|
{{ (formData.class_id) ? formData.class_id_name : '点击选择' }}
|
|
</view>
|
|
</view>
|
|
<fui-picker
|
|
:linkage='true'
|
|
:options="class_id_options"
|
|
:layer="1"
|
|
:show="class_id_show"
|
|
@change="changeClassId"
|
|
@cancel="cancelClassId">
|
|
</fui-picker>
|
|
</fui-form-item>
|
|
|
|
<!--订单金额-->
|
|
<fui-form-item
|
|
label="订单金额"
|
|
labelSize='26'
|
|
prop=""
|
|
background='#fff'
|
|
labelColor='#000'
|
|
:bottomBorder='true'
|
|
>
|
|
<view class="input-title" style="margin-right:14rpx;">
|
|
<fui-input
|
|
:disabled="true"
|
|
:borderBottom="false"
|
|
:padding="[0]"
|
|
placeholder="订单金额"
|
|
v-model="formData.money"
|
|
backgroundColor="#fff"
|
|
size="26"
|
|
color="#000"
|
|
></fui-input>
|
|
</view>
|
|
</fui-form-item>
|
|
</view>
|
|
<view class="button_box">
|
|
<fui-button background="#fff" color="#414141" borderColor="#465CFF" btnSize="small" @click="closeOrderShow">取消</fui-button>
|
|
<fui-button background="#fff" color="#465CFF" borderColor="#465CFF" btnSize="small" @click="clickOrder({index:1})">确定</fui-button>
|
|
|
|
</view>
|
|
</fui-form>
|
|
<view class="fui-icon__close" @tap="closeOrderShow">
|
|
<fui-icon name="close" color="#B2B2B2" :size="48"></fui-icon>
|
|
</view>
|
|
</fui-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import apiRoute from '@/api/apiRoute.js';
|
|
|
|
export default {
|
|
components: {
|
|
},
|
|
data() {
|
|
return {
|
|
loading:false,//加载状态
|
|
lowerThreshold: 100,//距离底部多远触发
|
|
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载
|
|
|
|
//筛选条件
|
|
filteredData:{
|
|
page:1,//当前页码
|
|
limit:10,//每页返回数据条数
|
|
total:10,//数据总条数
|
|
resource_id:'',//客户资源表id
|
|
},
|
|
tableList:[],//聊天数据列表
|
|
|
|
//订单表单
|
|
formData:{
|
|
payment_type:'',//付款类型必填验证
|
|
payment_type_name:'',//付款类型必填验证
|
|
|
|
course_id:'',//课程ID必填验证
|
|
course_id_name:'',//课程ID必填验证
|
|
|
|
class_id:'',//班级ID必填验证
|
|
class_id_name:'',//班级ID必填验证
|
|
|
|
staff_id:'',//员工ID必填验证
|
|
staff_id_name:'',//员工ID必填验证
|
|
|
|
resource_id:'',//客户资源表ID必填验证
|
|
resource_id_name:'',//客户资源表ID必填验证
|
|
|
|
money:'',//金额|这个不入库就展示先
|
|
},
|
|
|
|
order_show:false,//创建订单弹出层是否显示|true=显示,false=隐藏
|
|
|
|
//付款类型-下拉选择器相关
|
|
payment_type_options:[
|
|
// {
|
|
// text:'张三',
|
|
// value:'1'
|
|
// },
|
|
],//可选值列表
|
|
payment_type_show:false,//下拉选择器是否展示
|
|
|
|
//课程-下拉选择器相关
|
|
course_id_options:[
|
|
// {
|
|
// text:'张三',
|
|
// value:'1',
|
|
// price:'1'//课程价格
|
|
// },
|
|
],//可选值列表
|
|
course_id_show:false,//下拉选择器是否展示
|
|
|
|
//班级-下拉选择器相关
|
|
class_id_options:[
|
|
// {
|
|
// text:'张三',
|
|
// value:'1'
|
|
// },
|
|
],//可选值列表
|
|
class_id_show:false,//下拉选择器是否展示
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.filteredData.resource_id = options.resource_id//客户资源表id
|
|
|
|
this.formData.resource_id = options.resource_id//客户资源表id
|
|
this.formData.resource_id_name = options.resource_name//客户资源表id姓名
|
|
|
|
|
|
this.formData.staff_id = options.staff_id//员工资源表id姓名
|
|
this.formData.staff_id_name = options.staff_id_name//员工资源表id姓名
|
|
},
|
|
onShow(){
|
|
this.init()
|
|
},
|
|
//下拉刷新
|
|
async onPullDownRefresh() {
|
|
//重置为第一页
|
|
await this.resetFilteredData()
|
|
await this.getList()
|
|
},
|
|
methods: {
|
|
//初始化
|
|
async init(){
|
|
//获取付款类型
|
|
await this.getPaymentTypeList()
|
|
//获取课程列表
|
|
await this.getCourseList()
|
|
//获取班级列表
|
|
await this.getClassList()
|
|
|
|
//获取列表
|
|
await this.getList();
|
|
},
|
|
|
|
//加载更多(下一页)
|
|
loadMoreData() {
|
|
//判断是否加载
|
|
if (!this.isReachedBottom) {
|
|
this.isReachedBottom = true;//设置为不可请求状态
|
|
this.getList();
|
|
}
|
|
},
|
|
//重置为第一页
|
|
async resetFilteredData() {
|
|
this.isReachedBottom = false; // 重置状态，以便下次触发加载更多
|
|
|
|
this.filteredData.page = 1//当前页码
|
|
this.filteredData.limit = 10//每页返回数据条数
|
|
this.filteredData.total = 10//数据总条数
|
|
},
|
|
|
|
//获取合同列表
|
|
async getList(){
|
|
this.loading = true
|
|
|
|
let params = {...this.filteredData}
|
|
|
|
//判断是否还有数据
|
|
if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) {
|
|
this.loading = false
|
|
uni.showToast({
|
|
title: '暂无更多',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if(params.page == 1){
|
|
this.tableList = []
|
|
}
|
|
|
|
let res = await apiRoute.xy_orderTableList(params)//获取订单列表
|
|
this.loading = false
|
|
this.isReachedBottom = false;
|
|
if (res.code != 1){
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中
|
|
// this.tableList.unshift(...res.data.data); // 将新数据插入到数组头部
|
|
|
|
console.log('列表',this.tableList)
|
|
this.filteredData.total = res.data.total
|
|
this.filteredData.page++
|
|
},
|
|
|
|
//获取付款类型
|
|
async getPaymentTypeList(){
|
|
let res = await apiRoute.common_Dictionary({key:'payment_type'})
|
|
if(res.code != 1){
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
let dictionary = res.data.dictionary
|
|
let arr = []
|
|
dictionary.forEach((v,k)=>{
|
|
arr.push({
|
|
text: v.name,
|
|
value: v.value,
|
|
})
|
|
})
|
|
this.payment_type_options = arr
|
|
console.log('付款类型',this.payment_type_options)
|
|
},
|
|
//获取课程列表
|
|
async getCourseList(){
|
|
let params = {}
|
|
|
|
let res = await apiRoute.common_getCourseAll(params)
|
|
if(res.code != 1){
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
|
|
let arr = []
|
|
res.data.forEach((v,k)=>{
|
|
arr.push({
|
|
text: `${v.course_name}`,
|
|
value: v.id,
|
|
price: v.price,
|
|
})
|
|
})
|
|
this.course_id_options = arr
|
|
console.log('课程列表',this.course_id_options)
|
|
|
|
},
|
|
//获取班级列表
|
|
async getClassList(){
|
|
let params = {
|
|
status:1,//班级状态(1开启 2关闭)
|
|
}
|
|
|
|
let res = await apiRoute.common_getClassAll(params)
|
|
if(res.code != 1){
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
console.log('班级列表',res.data)
|
|
let arr = []
|
|
res.data.forEach((v,k)=>{
|
|
arr.push({
|
|
text: `${v.campus_name}-${v.class_name}`,
|
|
value: v.id,
|
|
})
|
|
})
|
|
this.class_id_options = arr
|
|
},
|
|
|
|
|
|
|
|
|
|
//创建订单相关
|
|
//显示创建订单弹窗
|
|
openOrderShow(){
|
|
//重置的数据
|
|
this.formData.payment_type = ''//付款类型必填验证
|
|
this.formData.payment_type_name = ''//付款类型必填验证
|
|
|
|
this.formData.course_id = ''//课程ID必填验证
|
|
this.formData.course_id_name = ''//课程ID必填验证
|
|
|
|
this.formData.class_id = ''//班级ID必填验证
|
|
this.formData.class_id_name = ''//班级ID必填验证
|
|
|
|
this.formData.money = ''//金额|这个不入库就展示先
|
|
|
|
this.order_show = true//展示弹层
|
|
},
|
|
//关闭打卡弹窗
|
|
closeOrderShow(){
|
|
this.order_show = false
|
|
},
|
|
//监听-打卡签到回调
|
|
async clickOrder(e){
|
|
if(e.index == 0){
|
|
//取消按钮
|
|
this.closeOrderShow()
|
|
}else{
|
|
console.log('提交',this.formData)
|
|
await this.submitFormData()
|
|
}
|
|
},
|
|
//提交表单
|
|
async submitFormData() {
|
|
let param = {...this.formData}
|
|
//表单验证
|
|
//...
|
|
if(!param.class_id){
|
|
uni.showToast({
|
|
title: '请选择班级',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if(!param.course_id){
|
|
uni.showToast({
|
|
title: '请选择课程',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if(!param.payment_type){
|
|
uni.showToast({
|
|
title: '请选择付款类型',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
console.log('提交xxx',param)
|
|
this.closeOrderShow()
|
|
|
|
let res = await apiRoute.xy_orderTableAdd(param)
|
|
if (res.code != 1) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.showToast({
|
|
title: '操作成功',
|
|
icon: 'success'
|
|
})
|
|
|
|
//延迟1s执行
|
|
setTimeout(() => {
|
|
this.resetFilteredData()//重置表单
|
|
this.getList();//刷新列表
|
|
}, 1500)
|
|
},
|
|
|
|
|
|
//下拉选择器相关-付款类型
|
|
//监听-付款类型
|
|
changePaymentType(e){
|
|
this.formData.payment_type = e.value
|
|
this.formData.payment_type_name = e.text
|
|
this.cancelPaymentType()
|
|
},
|
|
//打开选择器-付款类型
|
|
openPaymentType(){
|
|
this.payment_type_show = true
|
|
},
|
|
//关闭选择器-付款类型
|
|
cancelPaymentType(){
|
|
this.payment_type_show = false
|
|
},
|
|
|
|
//下拉选择器相关-课程
|
|
//监听-课程
|
|
changeCourseId(e){
|
|
console.log('课程',e)
|
|
this.formData.course_id = e.value
|
|
this.formData.course_id_name = e.text
|
|
|
|
this.formData.money = this.course_id_options.find(v=>v.value == e.value).price
|
|
|
|
// console.log('课程formData',this.formData)
|
|
this.cancelCourseId()
|
|
},
|
|
//打开选择器-课程
|
|
openCourseId(){
|
|
this.course_id_show = true
|
|
},
|
|
//关闭选择器-课程
|
|
cancelCourseId(){
|
|
this.course_id_show = false
|
|
},
|
|
|
|
//下拉选择器相关-班级
|
|
//监听-班级
|
|
changeClassId(e){
|
|
this.formData.class_id = e.value
|
|
this.formData.class_id_name = e.text
|
|
this.cancelClassId()
|
|
},
|
|
//打开选择器-班级
|
|
openClassId(){
|
|
this.class_id_show = true
|
|
},
|
|
//关闭选择器-班级
|
|
cancelClassId(){
|
|
this.class_id_show = false
|
|
},
|
|
|
|
//下载文件
|
|
async downloadFile(fileUrl) {
|
|
if (!fileUrl) {
|
|
this.$util.showToast({
|
|
title: '暂无电子发票'
|
|
});
|
|
return false;
|
|
}
|
|
|
|
uni.downloadFile({
|
|
url: fileUrl,
|
|
success: function (res) {
|
|
console.log('下载成功');
|
|
// uni.openDocument({
|
|
// filePath: res.tempFilePath,
|
|
// fileType: 'pdf',
|
|
// success: function (res) {
|
|
// console.log('打开文档成功');
|
|
// }
|
|
// });
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.main_box {
|
|
background: #292929;
|
|
}
|
|
|
|
//自定义导航栏
|
|
.navbar_section {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #29d3b4;
|
|
|
|
.title {
|
|
padding: 20rpx 0;
|
|
font-size: 30rpx;
|
|
color: #315d55;
|
|
}
|
|
}
|
|
|
|
.main_section {
|
|
min-height: 100vh;
|
|
background: #292929 100%;
|
|
padding: 0 0rpx;
|
|
padding-top: 32rpx;
|
|
padding-bottom: 150rpx;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
|
|
.section {
|
|
background-color: #434544;
|
|
padding: 40rpx 40rpx;
|
|
}
|
|
|
|
.section_1{
|
|
padding: 0 24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.item{
|
|
margin-bottom: 38rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 32rpx 24rpx;
|
|
border-radius: 14rpx;
|
|
background-color: #434544;
|
|
color: #fff;
|
|
.top{
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.title{
|
|
font-size: 30rpx;
|
|
}
|
|
.btn{
|
|
display: flex;
|
|
align-items: center;
|
|
color: #29D3B4;
|
|
}
|
|
}
|
|
.bottom{
|
|
font-size: 26rpx;
|
|
margin-top: 25rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15rpx;
|
|
.box{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.title{
|
|
width: 180rpx;
|
|
}
|
|
.content{
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.btn_section{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.btn{
|
|
border-radius: 10rpx;
|
|
padding: 15rpx 0;
|
|
width: 70%;
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.describe {
|
|
color: #999999;
|
|
padding-left: 30rpx;
|
|
}
|
|
|
|
|
|
//创建订单弹出层
|
|
.order_modal{
|
|
.fui-title {
|
|
font-size: 32rpx;
|
|
padding-top: 24rpx;
|
|
}
|
|
|
|
.fui-descr {
|
|
font-size: 24rpx;
|
|
color: #B2B2B2;
|
|
padding-top: 12rpx;
|
|
padding-bottom: 48rpx;
|
|
}
|
|
|
|
.fui-icon__close {
|
|
position: absolute;
|
|
right: 24rpx;
|
|
top: 20rpx;
|
|
}
|
|
|
|
.form-section{
|
|
|
|
.input-style {
|
|
text-align: right !important;
|
|
.input-title{}
|
|
}
|
|
.button_box{
|
|
margin-top: 30rpx;
|
|
padding: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|