H5-ThreeDoorder/pages/goods/pay-success.vue

<template>
	<view class="min-body">
		<u-gap height="20rpx"></u-gap>
		<view class="flbtn search-btn">
			<u-search :showAction="false" v-model="order_sn" height="64rpx" bgColor="#fff" placeholder="输入订单编号">
			</u-search>
			<view @click="goSearch" class="action-btn">查找</view>
		</view>
		<u-gap height="20rpx"></u-gap>
		<view class="white-box">
			<view>
				<view class="big-333 bold">
					有效订单
				</view>
				<u-gap height="30rpx"></u-gap>
				<view class="flbtn" style="padding-bottom: 30rpx;">
					<view class="wb-box" @tap="filterFun(0)">
						<view class="big-666 ">
							待结算{{InforData['un_commission_total']}}单
						</view>
					</view>
					<view style="width: 30rpx;">
					</view>
					<view class="wb-box" @tap="filterFun(1)">
						<view class="big-666 ">
							已结算{{InforData['commission_total']}}单
						</view>
					</view>
				</view>
				<u-gap bgColor="#EDEDED" height="2rpx"></u-gap>
			</view>


			<view class="sp-box" v-for="(item,index) in InforList" :key="index" @click="copyThis(item.out_order_num)">
				<view class="flbtn" style="padding: 20rpx 0;">
					<view class="lit-666">
						下单时间：{{item.create_time}}
					</view>
					<view class="lit-333" style="color: #77CE40;">
						{{item['status_name']}}
					</view>
				</view>
				<view class="flex">
					<view class="">
						<u-text lines="1" color="#333" :text="item['type_name']?item['type_name']:'未知订单'"></u-text>
						<u-gap height="30rpx"></u-gap>
						<view class="lit-999">
							充值账号：{{item['account']}}
						</view>
						<view class="flex">
							<u-text lines="1" size="24rpx" color="#999" :text="'订单编号：'+item['out_order_num']"></u-text>
							<text class="iconfont icon-copy"
								style="margin-left: 10rpx; color: #999; font-size:26rpx;"></text>
						</view>
						<view class="lit-999">
							付款金额：￥{{RetainDecimalPoint(item['pay_price'])}}
						</view>
						<view class="lit-999">
							佣金状态：{{item['commission_name']}}
						</view>
					</view>
				</view>
				<view class="lit-333" style="color: red;padding: 20rpx 0;border-bottom: 2rpx solid #EDEDED;">
					预估佣金￥{{RetainDecimalPoint(item['self_commission'],false)}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	// import {
	// 	RechargeOrder
	// } from '@/common/api/order.js';
	// let self;
	// import mixin from '@/static/js//mixin.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				tabActive: {
					color: "#FF7700",
					'font-weight': 'bold',
					'font-size': '28rpx'
				},
				dtp: 0,
				orderList: [],
				lock: true,
				// 所输入订单号
				order_sn: '',
				// 分页
				page: 1,
				// 筛选条件
				// 1已结算
				// 0待结算
				commission_type: '',
				// 当前数据总条数
				total: 0,
				// 当前页面列表数据
				InforList: [],
				// 当前页面展示数据
				InforData: {}
			}
		},
		methods: {
			/**
			 * @复制
			 * */
			copyThis(str) {
				console.log(str)
				uni.setClipboardData({
					data: str, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: "复制成功"
						})
					},
					fail(e) {
						console.log(e)
					}
				});
			},

			/**
			 * @搜索
			 * */
			goSearch() {
				this['page'] = 1;
				this['commission_type'] = '';
				this.GetList();
			},
			/**
			 * @点击类型筛选
			 * */
			filterFun(type) {
				this['page'] = 1;
				this['commission_type'] = type;
				this.GetList();
			},
			/**
			 * @获取充值订单数据
			 * */

			GetList() {
				RechargeOrder({
					order_sn: this['order_sn'],
					page: this['page'],
					commission_type: this['commission_type']
				}).then(data => {
					let {
						un_commission_total,
						commission_total
					} = data;
					self['InforData'] = {
						un_commission_total,
						commission_total
					};
					if (this['page'] == 1) {
						self['InforList'] = [];
					}
					self['total'] = data['data']['total'];
					self['InforList'].push(...data['data']['data']);
					self['page'] += 1;
				})
			}
		},
		onReachBottom() {
			if (self['InforList']['length'] >= self['total']) return;
			this.GetList();
		},
		onLoad(option) {
			self = this;
			// 初始化调取数据
			this.GetList();
		}
	}
</script>
<style lang="scss">
	.white-box {
		min-height: 100vh;
		background-color: #fff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 30rpx;
	}

	.wb-box {
		width: 100%;
		text-align: center;
		border: 2rpx solid #999999;
		border-radius: 20rpx;
		padding: 40rpx 0;
	}

	.search-btn {
		background-color: #fff;
		margin: 20rpx 30rpx;
		border-radius: 40rpx;
		border: 2rpx solid #FE7F2F;

		.action-btn {
			line-height: 62rpx;
			height: 62rpx;
			background: linear-gradient(#FFAD03, #FD8F3B);
			padding: 0 30rpx;
			border-radius: 32rpx;
			color: #fff;
			margin: 2rpx;
		}
	}
</style>