372 lines
9.4 KiB
Vue
372 lines
9.4 KiB
Vue
<template>
|
||
<view>
|
||
<v-tabs
|
||
v-model="current"
|
||
:scroll="false"
|
||
:fixed="true"
|
||
field="name"
|
||
lineColor="#F8D247"
|
||
color="#999"
|
||
activeColor="#333"
|
||
height="90rpx"
|
||
:tabs="tabs"
|
||
@change="onClickItem">
|
||
</v-tabs>
|
||
<view v-for="(order, index) in list" :key="index" class="center-order" style="margin-bottom: 40upx;">
|
||
<view class="order-list flex">
|
||
<view class="order-left">
|
||
<text class="order-time" v-if="order.flowingType === 1" style="color: #df0d0d;">¥ -{{order.amount}}</text>
|
||
<text class="order-time" v-else style="color: #17ca03;">¥ +{{order.amount}}</text>
|
||
</view>
|
||
<view class="order-right">
|
||
<text class="order-price" v-if="order.flowingType === 1">支出</text>
|
||
<text class="order-price" v-else>收入</text>
|
||
</view>
|
||
</view>
|
||
<view class="order-store">
|
||
<view class="flex flex-between store-left">
|
||
<text class="store-name">单号: {{order.orderNumber}}</text>
|
||
<text class="font28 color-purple" @click="$onCopy(order.orderNumber)">复制</text>
|
||
</view>
|
||
<view class="store-address1">
|
||
类型: {{filterOperation(order.operationType)}}
|
||
</view>
|
||
<view class="store-address1">
|
||
钱包: {{order.walletType | filterWallet}}
|
||
</view>
|
||
<view class="store-address1">
|
||
余额: {{order.beforeOperationAmount}}
|
||
</view>
|
||
<view class="store-address1">
|
||
详情: {{order.details ? order.details:'无'}}
|
||
</view>
|
||
<view class="store-address1" style="padding: 20upx 0 20upx 0;text-align: right; margin-right: 30rpx;">
|
||
{{order.createTime}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<uni-load-more :status="loading"></uni-load-more>
|
||
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="flex flex-center more" @click="openMore">
|
||
<text class="iconfont font40"></text>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
<!-- 左侧菜单 -->
|
||
<uni-drawer ref="drawer" mode="right" :width="320">
|
||
<scroll-view scroll-y :style="{height: swiperHeight+'px'}">
|
||
<view class="drawer">
|
||
<view class="title">操作类型(可多选)</view>
|
||
<view class="grid">
|
||
<block v-for="(item, i) in operationList" :key="i">
|
||
<view class="grid-item" :class="{'active':item.select}" v-if="item.isShow" @click="tabsSelect('operation', i)">
|
||
<text>{{item.name}}</text>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view class="title">钱包类型(单选)</view>
|
||
<view class="grid">
|
||
<view class="grid-item" :class="{'active':walletIndex === i}" v-for="(item, i) in walletList" :key="i" @click="tabsSelect('wallet', i)">
|
||
<text>{{item.name}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex flex-between btns">
|
||
<view class="btn" @click="onCancel">取消</view>
|
||
<view class="btn right" @click="onSave">确定</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</uni-drawer>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import vTabs from "@/components/v-tabs/v-tabs.vue"
|
||
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
||
import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
|
||
import youScroll from '@/components/you-scroll'
|
||
import url from "@/common/http/url.js"
|
||
import selectOptions from "@/common/utils/selectOptions.js"
|
||
export default{
|
||
components: { vTabs, uniLoadMore, uniDrawer, youScroll },
|
||
data(){
|
||
return {
|
||
swiperHeight: 0,
|
||
userType: 1, // 1=用户，2=配送员，3=商家
|
||
current: 0,
|
||
tabs: [
|
||
{name: "全部", value: -1, pageSize: 1, loading: "loading", orderList: []},
|
||
{name: "支出", value: 1, pageSize: 1, loading: "loading", orderList: []},
|
||
{name: "收入", value: 2, pageSize: 1, loading: "loading", orderList: []}
|
||
],
|
||
list: [],
|
||
pageSize: 1,
|
||
loading: "loading",
|
||
walletList: [
|
||
{name: "全部", value: -1},
|
||
...selectOptions.walletType
|
||
],
|
||
walletIndex: 0,
|
||
operationList: [
|
||
{name: "全部", value: "", isShow: true, select: true},
|
||
{name: "支付商品抵扣积分", value: 1, isShow: true},
|
||
{name: "支付商品", value: 2, isShow: true},
|
||
{name: "商品退款", value: 3, isShow: true},
|
||
{name: "积分充值话费", value: 11, isShow: true},
|
||
{name: "积分充值油卡", value: 12, isShow: true},
|
||
{name: "积分还信用卡", value: 13, isShow: true},
|
||
{name: "消费卡奖励", value: 21, isShow: true},
|
||
{name: "红包福利", value: 41, isShow: true},
|
||
{name: "提现", value: 51, isShow: true},
|
||
{name: "积分奖励", value: 70, isShow: true},
|
||
{name: "一代奖励", value: 71, isShow: true},
|
||
{name: "二代奖励", value: 72, isShow: true},
|
||
{name: "配送员收入", value: 86, isShow: true},
|
||
{name: "商家收入", value: 87, isShow: true},
|
||
{name: "平台佣金", value: 89, isShow: true},
|
||
{name: "未分配奖励收入", value: 90, isShow: true},
|
||
{name: "平台操作", value: 99, isShow: true},
|
||
{name: "配送员交纳押金", value: 200, isShow: true},
|
||
{name: "扫码付款", value: 400, isShow: true},
|
||
{name: "店铺收款", value: 401, isShow: true}
|
||
]
|
||
}
|
||
},
|
||
filters:{
|
||
filterWallet(val){
|
||
let walletType = selectOptions.walletType
|
||
let value = "其他"
|
||
walletType.forEach((v) =>{
|
||
if (v.value === val) {
|
||
value = v.name
|
||
return value
|
||
}
|
||
})
|
||
return value
|
||
},
|
||
},
|
||
onNavigationBarButtonTap(){
|
||
this.openMore()
|
||
},
|
||
onReachBottom() {
|
||
this.loadData(false);
|
||
},
|
||
onPullDownRefresh() {
|
||
this.loadData(true);
|
||
},
|
||
onLoad(opt) {
|
||
if (opt.type){
|
||
this.userType = parseInt(opt.type)
|
||
}
|
||
this.swiperHeight = uni.getSystemInfoSync().windowHeight
|
||
//获取订单信息
|
||
this.loadData(false);
|
||
},
|
||
methods:{
|
||
async loadData(type){
|
||
if (type) {
|
||
this.pageSize = 1
|
||
this.list = []
|
||
} else {
|
||
if (this.loading === "nomore") return
|
||
}
|
||
this.loading = "loading"
|
||
let operationTypes = []
|
||
this.operationList.map(v=>{
|
||
if (v.select) {
|
||
operationTypes.push(v.value)
|
||
}
|
||
})
|
||
let params = {
|
||
pageSize: this.pageSize,
|
||
flowingType: this.tabs[this.current].value,
|
||
walletType: this.walletList[this.walletIndex].value,
|
||
operationTypes: operationTypes.join(","),
|
||
userType: this.userType
|
||
}
|
||
let res = await this.$http("GET", url.user.walletFlowing, params)
|
||
this.list = this.list.concat(res.data.records)
|
||
if (this.list.length < res.data.total) {
|
||
this.pageSize++
|
||
this.loading = "more"
|
||
} else {
|
||
this.loading = "nomore"
|
||
}
|
||
uni.stopPullDownRefresh()
|
||
},
|
||
filterOperation(val){
|
||
let value = "其他"
|
||
this.operationList.forEach((v) => {
|
||
if (v.value === val) {
|
||
value = v.name
|
||
return value
|
||
}
|
||
})
|
||
return value
|
||
},
|
||
onClickItem(val) {
|
||
this.current = val;
|
||
this.loadData(true);
|
||
},
|
||
scollSwiper(e) {
|
||
this.current = e.target.current;
|
||
this.loadData(true);
|
||
},
|
||
tabsSelect(name,i){
|
||
if (name === "operation"){
|
||
if (i === 0) {
|
||
this[name+"List"].map(v =>{
|
||
v.select = false
|
||
})
|
||
this[name+"List"][i].select = true
|
||
} else {
|
||
this[name+"List"][0].select = false
|
||
this[name+"List"][i].select = !this[name+"List"][i].select
|
||
}
|
||
} else {
|
||
this[name+"Index"] = i
|
||
this[name+"List"].map(v =>{
|
||
v.select = false
|
||
})
|
||
this[name+"List"][i].select = true
|
||
}
|
||
this.$forceUpdate()
|
||
},
|
||
onReset(){
|
||
this.walletIndex = 0
|
||
this.operationList.map((v, i)=>{
|
||
v.select = i === 0 ? true : false
|
||
})
|
||
},
|
||
onCancel(){
|
||
this.$refs.drawer.close()
|
||
},
|
||
onSave(){
|
||
this.onCancel()
|
||
this.loadData(true)
|
||
},
|
||
openMore(){
|
||
this.$refs.drawer.open()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
page {
|
||
height: 100%;
|
||
}
|
||
|
||
.center-order {
|
||
background-color: #fff;
|
||
margin: 20rpx;
|
||
border-radius: 10rpx 10rpx 0 0;
|
||
}
|
||
|
||
.order-list {
|
||
margin: 10rpx 30rpx 0 30rpx;
|
||
border-bottom: 1rpx dashed #e1e1f5;
|
||
height: 80upx;
|
||
}
|
||
|
||
.order-left {
|
||
height: 80upx;
|
||
line-height: 80rpx;
|
||
width: 50%;
|
||
}
|
||
|
||
.order-right {
|
||
height: 80rpx;
|
||
width: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
.order-price {
|
||
color: #444;
|
||
font-size: 38rpx;
|
||
font-weight: 200;
|
||
}
|
||
.store-left {
|
||
margin: 10rpx 30rpx 0;
|
||
}
|
||
.store-name {
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
}
|
||
.store-address1 {
|
||
color: #999;
|
||
margin-left: 30rpx;
|
||
font-size: 28rpx;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 10;
|
||
overflow: hidden;
|
||
padding-top: 10rpx;
|
||
}
|
||
|
||
.more{
|
||
background-color: white;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.1);
|
||
position: fixed;
|
||
right: 20rpx;
|
||
bottom: 20rpx;
|
||
}
|
||
|
||
.drawer{
|
||
// height: 100%;
|
||
padding: 0 30rpx;
|
||
.title{
|
||
font-size: 32rpx;
|
||
margin-top: 50rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.grid{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
&-item{
|
||
margin-right: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
width: 240rpx;
|
||
height: 70rpx;
|
||
border-radius: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
background-color: #f3f4f3;
|
||
color: #87878b;
|
||
}
|
||
.active{
|
||
background-color: rgba($color: #F8D247, $alpha: .3);
|
||
color: #F8D247;
|
||
}
|
||
}
|
||
.btns{
|
||
margin-top: 80rpx;
|
||
padding-bottom: 40rpx;
|
||
.btn{
|
||
width: 45%;
|
||
background-color: #f3f4f3;
|
||
color: #87878b;
|
||
font-size: 32rpx;
|
||
height: 80rpx;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
}
|
||
.right{
|
||
background-color: rgba($color: #F8D247, $alpha: .3);
|
||
color: #F8D247;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|