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.
 
 
 
 
xuan-pay-cweb/pages/index/collectNotes/collectNotes.vue

421 lines
12 KiB

<template>
<view>
<view class="headsearch width94 mart15 paddtop5 paddbotm10 fotct">
<view class="mart10 width90 alijusstart">
<view class="fcorfff font14 margleri10 width60 fotlt">开始时间 :</view>
<picker mode="date" :value="startdate" :start="startDate" :end="endDate" @change="bindDateChange">
<view class="datetim fcorfff">{{startdate}}<i class="down"></i></view>
</picker>
</view>
<view class="mart10 width90 alijusstart">
<view class="fcorfff font14 margleri10 width60 fotlt">结束时间 :</view>
<picker mode="date" :value="enddate" :start="startDate" :end="endDate" @change="bindDateChange1">
<view class="datetim fcorfff">{{enddate}}<i class="down"></i></view>
</picker>
</view>
<view class="mart15 width90 alijusstart" v-if="userInfo.secUser.objectType == 2">
<view class="fcorfff font14 margleri10 width25 fotlt">业务员 :</view>
<picker mode="selector" class="width75" :range="salesmanList" range-key="name"
@change="bindDateChange4">
<view class="fcorfff fotrt font14" v-if="salesmanname">{{salesmanname}}<i class="down"></i></view>
<view class="fcorfff fotrt font14" v-else>请选择<i class="down"></i></view>
</picker>
</view>
<view class="mart15 width90 alijusstart"
v-if="userInfo.secUser.objectType == 2 || userInfo.secUser.objectType == 3">
<view class="fcorfff font14 margleri10 width25 fotlt">商户 :</view>
<picker mode="selector" class="width75" :range="merList" range-key="merName" @change="bindDateChange2">
<view class="fcorfff fotrt font14" v-if="merName">{{merName}}<i class="down"></i></view>
<view class="fcorfff fotrt font14" v-else>请选择<i class="down"></i></view>
</picker>
</view>
<view class="mart15 width90 alijusstart"
v-if="userInfo.secUser.objectType == 2 || userInfo.secUser.objectType == 3 || userInfo.secUser.objectType == 4">
<view class="fcorfff font14 margleri10 width25 fotlt">门店 :</view>
<picker mode="selector" class="width75" :range="storeListByMer" range-key="name"
@change="bindDateChange3">
<view class="fcorfff fotrt font14" v-if="storename">{{storename}}<i class="down"></i></view>
<view class="fcorfff fotrt font14" v-else>请选择<i class="down"></i></view>
</picker>
</view>
<view class="input-box">
<view class="icon search"></view>
<input placeholder="请输入订单编号" v-model="orderNo" placeholder-style="color:#c0c0c0;" @input="toSearch()" />
</view>
</view>
<view class="width100 height90 backcorfff marb5 mart15" style="border-radius: 22px 0 22px 0;">
<view class="width100 fotct height40p alijus font20 fcor333">
<view class="width50">
{{totalPrice}} 元
</view>
<view class="width50 ">
{{totalNum}} 笔
</view>
<!-- <view style="width: 1px;" class="height80 backcor6"></view> -->
</view>
<view class="width100 fotct height40p alijus font14 fcor333">
<view class="width50 ">
交易金额
</view>
<view class="width50">
交易笔数
</view>
</view>
</view>
<view v-if="notesList == ''" class="mart60 fotct font14 fcor666">
<image mode="widthFix" style="width: 70vw;" src="../../../static/img/noorder.png"></image>
</view>
<view class="width100 backcorfff" v-for="(item,index) in notesList" :key="index"
@click="jumpOderdetails(item.outTradeNo)">
<view class="width94 paddtop10 paddbotm10 alijusstart bor-botm1">
<view class="width15">
<image src="../../../static/img/wechat.png" mode="widthFix" class="iconw40"
v-if="item.payMode == 'WECHAT'"></image>
<image src="../../../static/img/alipay.png" mode="widthFix" class="iconw40"
v-if="item.payMode == 'ALIPAY'"></image>
</view>
<view class="width85">
<view class="font15 fcor666 width100">{{item.outTradeNo}}</view>
<view class="alijusstart font14 fcor999">
<view class="width50 text1">扫一扫</view>
<view class="width50 fotrt">{{statusList[item.status]}}</view>
</view>
<view class="alijusstart font14 paddtop5 fcor999">
<view class="width15 text1">{{item.salesmanName}}</view>
<view class="width85 fotrt">{{item.storeName}}</view>
</view>
<view class="alijusstart font14 paddtop5 fcor999">
<view class="width70">{{item.createTime | timeFormat('yyyy-mm-dd hh:mm:ss')}}
</view>
<view class="width30 fotrt">¥ {{item.tradeAmount}}</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
getTradeOrderList,
getMerList,
getStoreListByMer,
querySalesmanList
} from '../../../Utils/Api.js';
let app = getApp();
export default {
data() {
const currentDate = this.getDate({
format: true
})
return {
startdate: currentDate,
enddate: currentDate,
notesList: [],
statusList: {
1: "待支付",
2: "支付中",
3: "支付成功",
4: "支付失败",
5: "已取消",
6: "已退款"
},
pageNum: 1,
pageSize: 10,
isNoMoreData: false, //是否加载中
orderNo: '', //订单编号
totalPrice: 0, //总价格
totalNum: 0, //总笔数
userInfo: app.globalData.userInfo, //登录信息
merList: [], // 商户列表
merno: '', //商户编号
merName: '', //商户名称
storeListByMer: [], //门店列表
storeno: '', //门店编号
storename: '', //门店名称,
salesmanList: [], //业务员列表
salesmanid: '', //业务员id
salesmanname: '', //业务员名称
}
},
computed: {
startDate() {
return this.getDate('start');
},
endDate() {
return this.getDate('end');
}
},
onLoad() {
//代理商
if (this.userInfo.secUser.objectType == 2) {
this.querySalesmanList();
}
//业务员
if (this.userInfo.secUser.objectType == 3) {
this.getMerList(this.userInfo.secRole.id);
}
//商户
if (this.userInfo.secUser.objectType == 4) {
this.getStoreListByMer(this.userInfo.secUser.id);
}
this.getTradeOrderList();
},
onReachBottom() {
this.getTradeOrderList();
},
methods: {
//代理商查询业务员
querySalesmanList() {
let datas = {
pageNum: 1,
pageSize: 9999,
agentId: this.userInfo.agent.id
}
querySalesmanList(datas).then(res => {
if (res.return_code == '000000' && res.return_data.list != '') {
this.salesmanList = res.return_data.list;
// this.salesmanid = res.return_data.list[0].id;
// this.getStoreListByMer(res.return_data.list[0].id);
// this.salesmanname = res.return_data.list[0].name;
}
})
},
//业务员查询商户
getMerList(item) {
let datas = {
pageNum: 1,
pageSize: 9999,
salesmanId: item
}
getMerList(datas).then(res => {
if (res.return_code == '000000' && res.return_data.list != '') {
this.merList = res.return_data.list;
// this.merno = res.return_data.list[0].id;
// this.getStoreListByMer(res.return_data.list[0].id);
// this.merName = res.return_data.list[0].merName;
}
})
},
//商户查询门店
getStoreListByMer(item) {
let datas = {
pageNum: 1,
pageSize: 9999,
merId: item
}
getStoreListByMer(datas).then(res => {
if (res.return_code == '000000' && res.return_data.list != '') {
this.storeListByMer = res.return_data.list;
// this.storeno = res.return_data.list[0].id;
// this.storename = res.return_data.list[0].name;
}
})
},
//时间修改
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
},
//选择时间
bindDateChange(e) {
this.startdate = e.target.value;
this.pageNum = 1;
this.notesList = [];
this.isNoMoreData = false;
this.getTradeOrderList();
},
bindDateChange1(e) {
this.enddate = e.target.value;
this.pageNum = 1;
this.notesList = [];
this.isNoMoreData = false;
this.getTradeOrderList();
},
//业务员
bindDateChange4(e) {
this.salesmanid = this.salesmanList[e.target.value].id;
this.salesmanname = this.salesmanList[e.target.value].name;
this.getMerList(this.salesmanList[e.target.value].id);
this.pageNum = 1;
this.notesList = [];
this.isNoMoreData = false;
this.getTradeOrderList();
},
//商户
bindDateChange2(e) {
this.merno = this.merList[e.target.value].id;
this.merName = this.merList[e.target.value].merName;
this.getStoreListByMer(this.merList[e.target.value].id);
this.pageNum = 1;
this.notesList = [];
this.isNoMoreData = false;
this.getTradeOrderList();
},
//门店
bindDateChange3(e) {
this.storeno = this.storeListByMer[e.target.value].id;
this.storename = this.storeListByMer[e.target.value].name;
this.pageNum = 1;
this.notesList = [];
this.isNoMoreData = false;
this.getTradeOrderList();
},
toSearch() {
this.pageNum = 1;
this.notesList = [];
this.isNoMoreData = false;
this.getTradeOrderList();
},
//查询列表
getTradeOrderList() {
uni.showLoading({
title: '加载中...'
})
if (this.isNoMoreData) {
uni.hideLoading()
return false;
}
let a = new Date(this.startdate).getTime();
let b = new Date(this.enddate).getTime();
let startTime = a - 28800000;
let endTime = b + 57599000;
let pagenum = this.pageNum;
let datas = {
status: 3,
payTimeS: startTime,
payTimeE: endTime,
outTradeNo: this.orderNo,
pageNum: pagenum,
// salesmanId:this.salesmanid,
// merId: this.merno,
// storeId: this.storeno,
pageSize: this.pageSize
}
getTradeOrderList(datas).then(res => {
uni.hideLoading();
if (res.return_code == '000000' && res.return_data.pageInfo.list) {
this.totalPrice = res.return_data.totalPrice;
this.totalNum = res.return_data.totalNum;
this.isNoMoreData = res.return_data.pageInfo.list.length == this.pageSize ? false : true;
this.notesList = this.notesList.concat(res.return_data.pageInfo.list);
if (res.return_data.pageInfo.total == (this.pageNum * this.pageSize)) {
this.isNoMoreData = true;
}
this.pageNum = res.return_data.pageInfo.list.length == this.pageSize ? ++pagenum : pagenum;
} else {
this.notesList = [];
uni.showToast({
title: res.return_msg,
duration: 2000,
icon: 'none'
})
}
})
},
//跳转详情
jumpOderdetails(item) {
uni.navigateTo({
url: '/pages/index/order-list-details/order-list-details?orderid=' + item
})
}
}
}
</script>
<style lang="scss">
page {
background-color: #f8f9f9;
}
.input-box {
width: 90%;
margin-left: 5%;
margin-top: 15px;
margin-bottom: 15px;
height: 70rpx;
background-color: #f5f5f5;
border-radius: 10rpx;
position: relative;
display: flex;
align-items: center;
.icon {
display: flex;
align-items: center;
position: absolute;
top: 2px;
left: 5px;
width: 60upx;
height: 60upx;
font-size: 34upx;
color: #c0c0c0;
}
input {
padding-left: 50upx;
height: 28upx;
font-size: 28upx;
width: 100%;
}
}
i {
border: solid #ffffff;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
margin-left: 10px;
vertical-align: 3px;
}
.down {
-webkit-transform: rotate(45deg);
}
.font306adb {
color: #306adb;
}
.stus {
float: right;
margin-right: 20px;
}
.headsearch {
border-radius: 8px;
background-color: #4c7fe6;
}
.datetim {
width: 130px;
height: 30px;
line-height: 30px;
text-align: right;
border-radius: 15px;
}
</style>