hwnc/pagesA/pages/subrecord/subrecord.vue

<template>
	<view :class="[AppTheme]" class="content">

		<!-- #ifdef APP-PLUS||MP-WEIXIN -->
		<u-sticky offsetTop="0" style="z-index: 10;">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-sticky offsetTop="-44" style="z-index: 10;">
				<!-- #endif -->
				<view class="navbar">
					<u-tabs ref="uTabs" :list="navLists" :activeStyle="{
			        color: primary,
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: '#606266',
			        transform: 'scale(1)'
			    }" lineWidth="30" :scrollable="false" :lineColor="primary" :current="tabCurrentIndex" @click="tabClick">
					</u-tabs>
				</view>
			</u-sticky>

			<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
				<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex" @touchmove.stop="">
					<scroll-view  class="list-scroll-content" scroll-y @scrolltolower="handle"
						:refresher-enabled="refresherEnabled" @refresherrefresh="refresh"
						@refresherpulling="onPulling" :refresher-triggered="triggered" @refresherabort="onAbort"
						@scroll="roll" @refresherrestore="onRestore">
						<view>
							<view class="notes-con" v-for="(item, index) in renGou" :key="index">
								<view class="total-share" @click.stop="goDetails(item.id)">
									<view class="ts-left">
										<view class="ts-h">
											<view class="ts-bg bg-primary"><text class="all-p ">农场认养</text></view>
											<text class="expect">{{ item.goodsid }}期{{ item.name }}</text>
										</view>
										<view class="ts-f">
											<view>
												<view class="num">{{ item.totalprice }}</view>
												<view class="sam zi">元/{{ item.unit }}</view>
											</view>
											<view>
												<view class="num">{{ item.cycle }}</view>
												<view class="sam zi">周期/天</view>
											</view>
											<view>
												<view class="num">{{ item.num }}</view>
												<view class="sam zi">剩余 ({{ item.unit }})</view>
											</view>
										</view>
									</view>
									<view class="ts-right">
										<view :id="step(item.id)"></view>
										<view class="abso  border-primary">
											<image :src="settingFile.root_img+'/static/app/imgs/mine/17.png'" mode="" />
											<view class="now  text-primary" v-if="item.status == 0">已取消</view>
											<view class="now  text-primary" v-if="item.status == 1"
												@click.stop="goPay(item.status, item.id)">
												去付款</view>
											<view class="now  text-primary" v-if="item.status == 2">认养中</view>
											<view class="now  text-explain" v-if="item.status == 3">已完成</view>
											<view class="now" v-if="item.status == 4">已发货</view>
											<view class="now  text-neutral" v-if="item.status == 8">退款中</view>
											<view class="now  text-explain" v-if="item.status == 11">退款完成</view>
										</view>
									</view>
								</view>
								<view class="action-box b-t">
									<button class="action-btn recom  text-primary border-primary"
										@click="cancelOrder(item)" v-if="item.status == 1">取消订单</button>
									<button class="action-btn recom  text-primary border-primary"
										v-if="item.status == 2&&item.t_status==1" @click.stop="refund(item.id)">退款</button>
									<button class="action-btn recom  text-primary border-primary"
										v-if="item.status != 1" @click.stop="goDetails(item.id)">查看认养</button>
									<button class="action-btn recom  text-primary border-primary"
										@click="goPay(item.status, item.id)" v-if="item.status == 1">付款</button>
									<button class="action-btn recom  text-primary border-primary"
										v-if="item.status == 3">已完成</button>
									<button class="action-btn recom  text-primary border-primary"
										v-if="item.status == 4">已发货</button>
								</view>
							</view>
						</view>
						<u-modal :showCancelButton="true" :title="title" :content="content" :show="flag"
							@confirm="confirm" @cancel="cancel"></u-modal>
						<u-loadmore :line="true" :status="loadingType" />
					</scroll-view >
				</swiper-item>
			</swiper>
	</view>
</template>

<script>
	import mineApi from '@/api/mine/index.js';
	export default {
		data() {
			return {
			 
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				navLists: [{
						name: '全部'
					},
					{
						name: '待付款'
					},
					{
						name: '认养中'
					},
					{
						name: '已完成'
					},
				],
				navList: [{
						state: 0,
						text: '全部',
						loadingType: 'more'
					},
					{
						state: 1,
						text: '待付款',
						loadingType: 'more'
					},
					{
						state: 2,
						text: '认养中',
						loadingType: 'more'
					},
					{
						state: 3,
						text: '已完成',
						loadingType: 'more'
					}
				],
				tabCurrentIndex: 0,
				loadingType: 'more',

				flag: false,
				title: '温馨提示',
				content: '取消认养订单',
				p: 1,
				renGou: [],
				name: '上拉加载更多',
				nowTime: 0,
				cancelid: '',
				refresherEnabled: true,
				triggered: true, //设置当前下拉刷新的状态
				_freshing: false
			};
		},
		onLoad() {
			this._freshing = false;
		},
		
		// onPullDownRefresh() {
		// 	console.log('下拉刷新了')
		// 	if (this._freshing) return;
		// 	this._freshing = true;
		// 	// this.renGou = [];
		// 	this.p = 1;
		// 	this.getJiLu(this.tabCurrentIndex, 1);
		// 	//调用获取数据的函数
		// 	// this.getData();
		// 	if (!this.triggered)
		// 		//界面下拉触发，triggered可能不是true，要设为true
		// 		this.triggered = true;
		// 	setTimeout(() => {
		// 		this.triggered = false;
		// 		this._freshing = false;
		// 		uni.stopPullDownRefresh()
		// 	}, 2000);
		// },
		onReachBottom() {
			console.log('上拉加载 了')
			this.loadingType = 'loading';
			this.p++;
			this.$u.throttle(this.getJiLu(this.tabCurrentIndex));
		},
		
	 
		methods: {
			refresh() { //自定义下拉刷新
				console.log('下拉刷新了neihei')
				if (this._freshing) return;
				this._freshing = true;
			
				//调用获取数据的函数
				this.getJiLu(this.tabCurrentIndex,1)
				if (!this.triggered)
					//界面下拉触发，triggered可能不是true，要设为true
					this.triggered = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
					uni.stopPullDownRefresh()
				}, 2000);
			},
			
			refund(id) { //认养退款
			
			let that = this;
			let tmplIdsone = that.$config.temlist;
						
			if (tmplIdsone) {
					 
				that.$until.requestSubscribeMessage([tmplIdsone['returnReminder']], tmplIdsone, function() {
					 
					mineApi.finaceTuikuan({
						id
					}).then(res => {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						that.renGou = [];
						that.getJiLu()
					})
				});
			}else
			{
				mineApi.finaceTuikuan({
					id
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					that.renGou = [];
					that.getJiLu()
				})
			}
				
			},
			onRefresh() {

			},
			onRestore() {
				console.log('结束');
				// this.triggered = 'restore'; // 需要重置
			},
			onAbort() {
				this.triggered = false;
			},
			onPulling(e) {},
			roll(res) {
				if (res.target.scrollTop >= 20) {
					this.refresherEnabled = false;
				} else {
					this.refresherEnabled = true;
				}
			},

			changeTab(e) {
				this.p = 1;
				this.renGou = [];
				this.tabCurrentIndex = e.target.current;
				this.getJiLu(e.target.current, 1);
			},
			//顶部tab点击
			tabClick(e) {
				this.p = 1;
				this.tabCurrentIndex = e.index;
			},

			confirm(val1, val2) {
				mineApi.cancelOrder({
					orderid: this.cancelid
				}).then(res => {
					this.$api.msg(res.msg);
					if (res.status == 200) {
						this.p = 1;
						this.renGou = [];
						this.flag = false;
						this.getJiLu(this.tabCurrentIndex);
					}
				});
			},
			cancel() {
				this.flag = false;
			},
			cancelOrder(item) {
				this.cancelid = item.id;
				this.flag = true;
			},
			step: function(i) {
				var id = 'progress' + i;
				return id;
			},
			goPay(status, id) {
				console.log(status)
				if (status == 1) {
					uni.navigateTo({
						url: `/pagesC/pages/index/farmorder/farmorder?id=${id}`
					});
				}
			},
			goDetails: function(index) {
				uni.navigateTo({
					url: `/pagesA/pages/subrecord/financedetail?id=${index}`
				});
			},
			getJiLu(i, refresh = 0) {
				let data = {
					p: this.p,
					pagesize: 10
				};
				mineApi.buyOrderList(data).then(res => {
					if (refresh) {
						this.renGou = res.data;
					} else {
						this.renGou = this.renGou.concat(res.data);
					}
					console.log(11111);
					if (res.data.length == 0 || res.data.length < 10) {
						this.loadingType = 'nomore';
					} else {
						this.loadingType = 'more';
					}
					if (i == 1) {
						this.renGou = this.renGou.filter(item => item.status == 1);
					} else if (i == 2) {
						this.renGou = this.renGou.filter(item => item.status == 2);
					} else if (i == 3) {
						this.renGou = this.renGou.filter(item => item.status == 3);
					}
				});
			},
			
			
			
			handle() {
				console.log('上拉加载了')
				this.loadingType = 'loading';
				this.p++;
				this.$u.throttle(this.getJiLu(this.tabCurrentIndex));
			},
		},
		mounted() {
			this.time = Date.parse(new Date());
			this.getJiLu();
		},
       // onReachBottom() {
       // 	console.log('到底了');
       // },
       // onPullDownRefresh() {
       // 	this.orderList = [];
       // 	this.page = 1;
       // 	this.orderType(this.tabCurrentIndex);
       // 	setTimeout(() => {
       // 		uni.stopPullDownRefresh();
       // 	}, 600);
       // }
		
	};
</script>
<style lang="scss">
	page{
		height: 101%;
	}
	.content {
		background: $page-color-base;
		height:100%;
		box-sizing: border-box;
	}

	.swiper-box {
		height: calc(100vh - 44px);
	}

	.list-scroll-content {
		height: 100%;
		overflow-y: auto;
	}

	.navbar {
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		width: 100%;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			position: relative;

			&.current {

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom-width: 2px;
					border-bottom-style: solid;
				}
			}
		}
	}

	.uni-swiper-item {
		height: auto;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin-top: 16upx;

		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right: 30upx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;

			.time {
				flex: 1;
			}

			.state {
				color: $base-color;
			}

			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 160upx;
			padding: 20upx 0;
			white-space: nowrap;

			.goods-item {
				width: 120upx;
				height: 120upx;
				display: inline-block;
				margin-right: 24upx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20upx 0;

			.goods-img {
				display: block;
				width: 120upx;
				height: 120upx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30upx 0 24upx;
				overflow: hidden;

				.title {
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					line-height: 1;
				}

				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 12upx;
				}

				.price {
					font-size: $font-base + 2upx;
					color: $font-color-dark;

					&:before {
						content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20upx 30upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.num {
				margin: 0 8upx;
				color: $font-color-dark;
			}

			.price {
				font-size: $font-lg;
				color: $font-color-dark;

				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2upx 0 8upx;
				}
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding-right: 30upx;
		}

		.action-btn {
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: $font-sm + 2upx;
			background: #fff;
			border-radius: 100px;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: #fff9f9;
			}
		}
	}

	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center;
	}

	.uni-load-more__text {
		font-size: 28upx;
		color: #999;
	}

	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px;
	}

	.uni-load-more__img>view {
		position: absolute;
	}

	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: 0.2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite;
	}

	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px;
	}

	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0;
	}

	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px;
	}

	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0;
	}

	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px;
	}

	.load2 {
		transform: rotate(30deg);
	}

	.load3 {
		transform: rotate(60deg);
	}

	.load1 view:nth-child(1) {
		animation-delay: 0s;
	}

	.load2 view:nth-child(1) {
		animation-delay: 0.13s;
	}

	.load3 view:nth-child(1) {
		animation-delay: 0.26s;
	}

	.load1 view:nth-child(2) {
		animation-delay: 0.39s;
	}

	.load2 view:nth-child(2) {
		animation-delay: 0.52s;
	}

	.load3 view:nth-child(2) {
		animation-delay: 0.65s;
	}

	.load1 view:nth-child(3) {
		animation-delay: 0.78s;
	}

	.load2 view:nth-child(3) {
		animation-delay: 0.91s;
	}

	.load3 view:nth-child(3) {
		animation-delay: 1.04s;
	}

	.load1 view:nth-child(4) {
		animation-delay: 1.17s;
	}

	.load2 view:nth-child(4) {
		animation-delay: 1.3s;
	}

	.load3 view:nth-child(4) {
		animation-delay: 1.43s;
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0.2;
		}
	}
</style>
<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	// .subrecord {
	// width: 100%;
	// min-height: 100%;
	// padding-top: 0.1rpx;
	// padding-bottom: 20rpx;
	// background: #f1f1f1;
	// position: relative;
	.no-data {
		width: 160rpx;
		height: 160rpx;
		position: absolute;
		top: 35%;
		left: 50%;
		margin-left: -80rpx;
	}

	.no-data image {
		width: 100%;
		height: 100%;
	}

	.notes-con {
		width: calc(100% - 40rpx);
		margin: 0 auto;
		border-radius: 20rpx;
		background-color: #ffffff;
	}

	.total-share {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		margin: 20rpx auto;
	}

	.action-box {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 100upx;
		position: relative;
		padding-right: 30upx;
	}

	.action-btn {
		width: 160upx;
		height: 60upx;
		margin: 0;
		margin-left: 24upx;
		padding: 0;
		text-align: center;
		line-height: 60upx;
		font-size: $font-sm + 2upx;
		background: #fff;
		border-radius: 100px;

		&:after {
			border-radius: 100px;
		}

		&.recom {
			background: #fff9f9;
			border-width: 1rpx;
			border-style: solid;
		}
	}

	.ts-left {
		margin-top: 16rpx;
		margin-left: 20rpx;
	}

	.total-share .ts-h,
	.ts-f {
		width: 472rpx;
	}

	.ts-f {
		margin-top: -14rpx;
	}

	.total-share .ts-h {
		height: 70rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 50rpx;
		margin-top: 10rpx;
	}

	.total-share .ts-h .ts-bg {
		width: 74rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16rpx;
		background-size: 100%;
		margin-right: 16rpx;
		text-align: center;
	}

	.total-share .ts-h .all-p {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(255, 255, 255, 1);
		letter-spacing: 6rpx;
		margin-left: 5rpx;
		margin-top: -8rpx;
	}

	.total-share .ts-h .expect {
		display: inline-block;
		width: 360rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 31rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(0, 0, 0, 1);
	}

	.ts-f {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.ts-f .red-pre {
		font-size: 52rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(255, 31, 31, 1);
	}

	.ts-f .num {
		position: relative;
		top: 14rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(0, 0, 0, 1);
		text-align: center;
	}

	.ts-f .sam {
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}

	.ts-f .sam.zi {
		margin-top: 24rpx;
	}

	.ts-right {
		margin-left: 10rpx;
		/*float: right;*/
		position: relative;
		margin-top: 40rpx;
	}

	.ts-right .abso {
		width: 140rpx;
		height: 140rpx;
		position: absolute;
		font-size: 24rpx;
		left: 46rpx;
		border-width: 4rpx;
		border-style: solid;
		border-radius: 50%;
		text-align: center;
		padding-top: 26rpx;
		box-sizing: border-box;

		image {
			width: 45rpx;
			height: 51rpx;
		}
	}

	.abso .yet {
		margin-left: 16rpx;
		width: 46rpx;
		height: 52rpx;
	}

	.abso .now {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
	}

	// }
</style>