|
|
@@ -1,60 +1,118 @@
|
|
|
<template>
|
|
|
<view class="page">
|
|
|
-
|
|
|
+ <u-sticky :disabled="isSticky">
|
|
|
+ <View class=" tabs">
|
|
|
+ <u-tabs :list="tabList" :scrollable="false"
|
|
|
+ lineWidth="30"
|
|
|
+ lineColor="#FFE05C"
|
|
|
+ :activeStyle="{
|
|
|
+ color: '#333333',
|
|
|
+ fontWeight: 'bold',
|
|
|
+ transform: 'scale(1.05)'
|
|
|
+ }"
|
|
|
+ :current="tabIndex" @click="clickTab"></u-tabs>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <view class="statistics flex-row justify-between ">
|
|
|
+ <view class="left flex-row" @click="showDate">
|
|
|
+ <text>{{dataTime || '全部'}}</text>
|
|
|
+ <image class="xialaImage" src="/static/transaction/u5.png"></image>
|
|
|
+ </view>
|
|
|
+ <view class="right flex-row justify-around">
|
|
|
+ <text>储值￥{{tranFlowstatistic.rechargeAmount || 0}}</text>
|
|
|
+ <text>消费-￥{{tranFlowstatistic.consumeAmount || 0 }}</text>
|
|
|
+ <text>退款-￥{{tranFlowstatistic.refundAmount || 0 }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </u-sticky>
|
|
|
+
|
|
|
+ <!-- 订单列表 -->
|
|
|
+ <view :style="{'height':windowHeight}" >
|
|
|
+ <swiper :style="{'height':windowHeight}" :current="tabIndex" @change="swiperChange">
|
|
|
+ <swiper-item class="swiperItem" v-for="(item,index) in tabList" :key="index" >
|
|
|
+ <view>
|
|
|
+ <mescroll-item ref="MescrollItem" :i="index" :index="tabIndex" :dataTime="dataTime" :tabs="tabList" :height="windowHeight">
|
|
|
+ </mescroll-item>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <u-datetime-picker
|
|
|
+ :show="serviceTimeShow"
|
|
|
+ v-model="value1"
|
|
|
+ mode="year-month"
|
|
|
+ :closeOnClickOverlay="true"
|
|
|
+ @confirm="sureChooseDate()"
|
|
|
+ ></u-datetime-picker>
|
|
|
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
+ import MescrollItem from "./module/mescrollUni-item.vue";
|
|
|
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ MescrollItem
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
+ windowHeight:'',
|
|
|
+ tabIndex:0,
|
|
|
+ tabList: [{
|
|
|
+ name: '全部',
|
|
|
+ }, {
|
|
|
+ name: '消费'
|
|
|
+ }, {
|
|
|
+ name: '储值',
|
|
|
+ }, {
|
|
|
+ name: '退款'
|
|
|
+ }],
|
|
|
+
|
|
|
showDataLoading: false,
|
|
|
serviceTimeShow: false,
|
|
|
show: false,
|
|
|
mode: 'single',
|
|
|
- currentTab: 'tab1', // 当前选中的 Tab
|
|
|
- currentServiceTab: 'orderTab1', // 当前选中的 Tab
|
|
|
searchTime: '2023-8-9',
|
|
|
- reqParm: {
|
|
|
- auth: true,
|
|
|
- pageSize: 20,
|
|
|
- pageNum: 1,
|
|
|
- dataTime: null,
|
|
|
- },
|
|
|
value1: '',
|
|
|
+ dataTime:'',
|
|
|
tranRecordsList: [],
|
|
|
tranFlowstatistic: {}
|
|
|
};
|
|
|
},
|
|
|
onLoad() {
|
|
|
- // 查询交易列表
|
|
|
- this.transactionRecordsList();
|
|
|
+ let sysInfo = uni.getSystemInfoSync()
|
|
|
+ this.windowHeight =sysInfo.windowHeight-94+'px'//除标题栏栏外的屏幕可用高度
|
|
|
+
|
|
|
this.value1 = Date.now();
|
|
|
// 查询交流流水统计
|
|
|
this.transactionFlowstatistic();
|
|
|
},
|
|
|
methods: {
|
|
|
+
|
|
|
+ clickTab(e){
|
|
|
+ this.tabIndex = e.index
|
|
|
+ },
|
|
|
+ swiperChange(e){
|
|
|
+ this.tabIndex = e.detail.current
|
|
|
+ // if (this.$refs.MescrollItem[e.detail.current].orderList.length>0){
|
|
|
+ // this.$refs.MescrollItem[e.detail.current].downCallback()
|
|
|
+ // }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
// 确定选择的服务日期
|
|
|
- sureChooseDate(){
|
|
|
+ sureChooseDate(e){
|
|
|
this.serviceTimeShow = false;
|
|
|
- // this.reqParm.startTime = uni.$u.timeFormat(this.value1, 'yyyy-mm-dd hh:MM:ss');
|
|
|
- this.reqParm.dataTime = uni.$u.timeFormat(this.value1, 'yyyy-mm');
|
|
|
+ this.dataTime = uni.$u.timeFormat(e.value, 'yyyy-mm');
|
|
|
+ this.$refs.MescrollItem[this.tabIndex].downCallback()
|
|
|
+
|
|
|
},
|
|
|
// 交易列表
|
|
|
- transactionRecordsList(){
|
|
|
- let that = this;
|
|
|
- that.showDataLoading = true;
|
|
|
- this.$api.transactionRecordsList({data:this.reqParm}).then((res)=>{
|
|
|
- that.tranRecordsList = res.data.rows;
|
|
|
- that.showDataLoading = false;
|
|
|
- }).catch(() =>{
|
|
|
- uni.showToast({
|
|
|
- title: "操作失败"
|
|
|
- })
|
|
|
- });
|
|
|
- },
|
|
|
+
|
|
|
// 查询交易流水统计
|
|
|
transactionFlowstatistic(){
|
|
|
let that = this;
|
|
|
@@ -68,28 +126,6 @@
|
|
|
})
|
|
|
});
|
|
|
},
|
|
|
- // 服务订单
|
|
|
- changeServiceTab(tab){
|
|
|
- // 交易号类型(订单号、退款单号):1 消费 2 充值 3退款
|
|
|
- if(tab == 'orderTab1'){
|
|
|
- delete this.reqParm.tradeNoType;
|
|
|
- } else if(tab == 'orderTab2'){
|
|
|
- this.reqParm.tradeNoType = '2';
|
|
|
- } else if(tab == 'orderTab3'){
|
|
|
- this.reqParm.tradeNoType = '1';
|
|
|
- } else if(tab == 'orderTab4'){
|
|
|
- this.reqParm.tradeNoType = '3';
|
|
|
- }
|
|
|
- // 处理查询参数
|
|
|
- if(!this.reqParm.dataTime){
|
|
|
- let time = this.reqParm.dataTime;
|
|
|
- this.reqParm.beginTime = time+'-01 00:00:00';
|
|
|
- this.reqParm.endTime = this.maxDate(this.reqParm.beginTime);
|
|
|
- }
|
|
|
- this.transactionFlowstatistic();
|
|
|
- this.transactionRecordsList();
|
|
|
- this.currentServiceTab = tab;
|
|
|
- },
|
|
|
|
|
|
// 详情
|
|
|
orderDetail(item){
|
|
|
@@ -133,150 +169,6 @@
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-
|
|
|
- /* 服务订单内容*/
|
|
|
- .service-order-tab-bar{
|
|
|
- background: #fff;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- height: 50px;
|
|
|
- background-color: #f5f5f5;
|
|
|
- .service-order-tab-item{
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- line-height: 26px;
|
|
|
- }
|
|
|
- .service-order-tab-item.active {
|
|
|
- color: #ff0000;
|
|
|
- }
|
|
|
-
|
|
|
- .underline {
|
|
|
- border-bottom: 2px solid #ff0000;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .h-search{
|
|
|
- font-size: 14px;
|
|
|
- display: flex;
|
|
|
- padding-left: 12px;
|
|
|
- padding-top: 12px;
|
|
|
- padding-right: 12px;
|
|
|
- .h-time{
|
|
|
- width: 30%;
|
|
|
- display: flex;
|
|
|
- color: #333333;
|
|
|
- .time{
|
|
|
- padding-right: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
- .h-name{
|
|
|
- width: 70%;
|
|
|
- text-align: right;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- color: #999999;
|
|
|
- .name{
|
|
|
- padding-right: 6px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .service-order{
|
|
|
- background: #fff;
|
|
|
- margin-top: 12px;
|
|
|
- padding-top: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 门店列表 */
|
|
|
- .store-wrap{
|
|
|
- border-radius: 2px;
|
|
|
- .row-list{
|
|
|
- padding-bottom: 12px;
|
|
|
- padding-left: 12px;
|
|
|
- padding-right: 12px;
|
|
|
- .store-content{
|
|
|
- display: flex;
|
|
|
- padding-bottom: 12px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- .store-img{
|
|
|
- width: 60px;
|
|
|
- .title-name{
|
|
|
- width: 42px;
|
|
|
- height: 42px;
|
|
|
- color: #fff;
|
|
|
- border-radius: 25px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .orange{
|
|
|
- background: #93D21A;
|
|
|
- }
|
|
|
- .skyblue{
|
|
|
- background: #ED569F;
|
|
|
- }
|
|
|
- .pink{
|
|
|
- background: #FFAF36;
|
|
|
- }
|
|
|
- }
|
|
|
- .content{
|
|
|
- width: 100%;
|
|
|
- padding-left: 8px;
|
|
|
- padding-top: 2px;
|
|
|
- .title-price{
|
|
|
- display: flex;
|
|
|
- .title{
|
|
|
- width: 60%;
|
|
|
- font-family: "黑体", sans-serif;
|
|
|
- }
|
|
|
- .price{
|
|
|
- text-align: right;
|
|
|
- width: 40%;
|
|
|
- color: #333333;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .desc{
|
|
|
- display: flex;
|
|
|
- font-size: 12px;
|
|
|
- .time{
|
|
|
- color: #999999;
|
|
|
- width: 60%;
|
|
|
- }
|
|
|
- .balance{
|
|
|
- text-align: right;
|
|
|
- width: 40%;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /* 产品订单 */
|
|
|
- .product-order{
|
|
|
- margin-top: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 底部 */
|
|
|
- .footer{
|
|
|
- margin-top: 30px;
|
|
|
- height: 120px;
|
|
|
- font-size: 12px;
|
|
|
- text-align: center;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
+ @import '/common/css/common.css';
|
|
|
+ @import './index.rpx.css';
|
|
|
</style>
|
zhanghui
