sailun-tbr-web/pages/me/Write-off-management/index.vue

<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box" style="width:100%">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="handleFilterBrand"></u-tabs>
			</view>
			<view class="page-box" v-if="pages!=0">
				<view class="order" v-for="(res,index) in orderList" :key="index">
					<view class="order-one">
					</view>
					<text class="order-one-text">{{ $t('auditManagement.money') }}：￥{{res.amount}}</text>
					<view class="order-one-view">
						{{b2bStatus}}
					</view>
					<view class="order-one-xian">
					</view>
					<view class="order-two">
						<view class="">
							{{ $t('auditManagement.createTime') }}
						</view>
						<view class="">
							{{res.createTime}}
						</view>
					</view>
					<view class="order-two" v-if="res.agentAuditTime != null">
						<view class="">
							{{ $t('auditManagement.auditTime') }}
						</view>
						<view class="">
							{{res.agentAuditTime}}
						</view>
					</view>
					<view class="order-two">
						<view class="">
							{{res.brandName}}{{ $t('auditManagement.tire') }}
						</view>
						<view class="">
							￥{{res.amount}}
						</view>
					</view>
					<view class="order-two">
						<view class="">
							{{ $t('auditManagement.currentStatus') }}
						</view>
						<view v-if="res.status == 0">
							{{ $t('auditManagement.waitingForAudit') }}
						</view>
						<view v-else-if="res.status == 1">
							{{ $t('auditManagement.noPass') }}
						</view>
						<view v-else-if="res.status == 2">
							{{ $t('auditManagement.pass') }}
						</view>
						<view v-else-if="res.status == 3">
							{{ $t('auditManagement.expired') }}
						</view>
						<view v-else-if="res.status == 4">
							{{ $t('auditManagement.audited') }}
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
			<view v-else style="margin-top: 100rpx;">
				<u-empty :text="$t('unified.nodata')" mode="list"></u-empty>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		request
	} from '../../../common/request/request'
	require("promise.prototype.finally").shim()
	export default {
		data() {
			return {
				orderList: [

				],
				length: '',
				status: '没',
				pages: '',
				b2bStatus: '',
				list: [{
					name: this.$t('auditManagement.waitingForAudit')

				}, {
					name: this.$t('auditManagement.audited')

				}, {
					name: this.$t('auditManagement.invaild')

				}],
				current: 0,
				current3: 0,
				current2: 1
			};
		},
		onLoad() {},
		created() {
			uni.setNavigationBarTitle({
			    title: this.$t('auditManagement.title')
			});
			this.getDate()
		},
		methods: {
			// 获取列表数据
			getDate() {
				uni.showLoading({
					title: '加载中...'
				});
				request({
						url: '/myapp/storeSelectCoupon',
						method: 'post',
						data: {
							storeId: this.$store.state.storeInfo.storeId,
							"size": 10, //门店0
							"current": this.current2,
							"status": this.current3,
							'userId': this.$store.state.storeInfo.userId
						}
					}).then(res => {
						this.orderList = this.orderList.concat(res.data.data.records)
						// 页数
						this.pages = res.data.data.pages
						
						this.orderList = this.orderList.concat(res.data.data.records)
						for (let i = 0; i < res.data.data.records.length; i++) {
							if (res.data.data.records[i].status == 0) {
								this.b2bStatus = this.$t('auditManagement.waitingForAudit')
							} else if (res.data.data.records[i].status == 2) {
								this.b2bStatus = this.$t('auditManagement.audited')
							} else {
								this.b2bStatus = this.$t('auditManagement.invaild')
							}
						}

					}).catch(err => {
						
					})
					.finally(() => {
						setTimeout(() => {
							uni.hideLoading();
							this.loading = false;
						}, 300)
					})
			},
			
			handleFilterBrand: function(v2) {
				this.current = v2
				if (v2 == 0) {
					this.current1 = 0
					this.current3 = 0
				} else if (v2 == 1) {
					this.current1 = 4
					this.current3 = 4
				} else {
					this.current1 = 3
					this.current3 = 3
				}
				this.current2 = 1

				request({
						url: '/myapp/storeSelectCoupon',
						method: 'post',
						data: {
							storeId: this.$store.state.storeInfo.storeId,
							"size": 10, //门店0
							"current": this.current2,
							"status": this.current1,
							'userId': this.$store.state.storeInfo.userId
						}
					}).then(res => {
						this.orderList = res.data.data.records
						// 页数
						this.pages = res.data.data.pages
						// this.orderList = this.orderList.concat(res.data.data.records)
						for (let i = 0; i < res.data.data.records.length; i++) {
							
							if (res.data.data.records[i].status == 0) {
								this.b2bStatus = this.$t('auditManagement.waitingForAudit')
							} else if (res.data.data.records[i].status == 2) {
								this.b2bStatus = this.$t('auditManagement.audited')
							} else {
								this.b2bStatus = this.$t('auditManagement.invaild')
							}
						}
					}).catch(err => {
						
					})
					.finally(() => {
						setTimeout(() => {
							uni.hideLoading();
							this.loading = false;
						}, 300)
					})

			}
		},
		onReachBottom() {
			setTimeout(() => {
				if (this.current2 > this.pages) {
					this.status = 'nomore'
				} else {
					this.current2 = ++this.current2;
					this.status = 'loading';
					this.getDate()
				}
			}, 2000)

		}

	}
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.u-tabs-box {
		width: 100%;
		// padding-left:30rpx;
	}

	.order-one-view {
		width: 120rpx;
		line-height: 40rpx;
		background-color: #0094FE;
		position: relative;
		left: 575rpx;
		top: -35rpx;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
	}

	// 插件代码
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {
				color: $u-type-warning-dark;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;

			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
			}

			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	// 手敲代码
	.order-one {
		width: 6rpx;
		height: 30rpx;
		margin-top: 5rpx;
		margin-right: 30rpx;
		background-color: #0292FD;
		float: left;
	}

	.order-two {
		display: flex;
		justify-content: space-between;
		margin-top: 15rpx;
		font-size: 24rpx;
		color: #6A6A6A;
	}

	// 线
	.order-one-xian {
		width: 642rpx;
		height: 1rpx;
		border-bottom: 1rpx solid #E7E8EA;
		margin: 0 auto;
		margin-top: -20rpx;
		margin-bottom: 30rpx;
	}

	.order-one-text {
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
	}
</style>