hwnc/pagesB/pages/myland/myland.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="navList" :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">
						<view>
							<view class="notes-con" v-for="(item, index) in orderlist" :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.id }}</text>
										</view>
										<view class="ts-f">
											<view>
												<view class="num">{{ item.payprice }}</view>
												<view class="sam zi">元</view>
											</view>
											<view>
												<view class="num">3</view>
												<view class="sam zi">年</view>
											</view>
											<view>
												<view class="num">{{ item.soil_number }}</view>
												<view class="sam zi">平方米</view>
											</view>
										</view>
									</view>
									<view class="ts-right">
										<view class="abso  border-primary">
											<image :src="settingFile.root_img+'/static/app/imgs/mine/17.png'" mode="" />
											<view class="now  text-primary" v-if="swiperCurrent == 1">已到期</view>
											<view class="now  text-primary" v-if="swiperCurrent == 0">托管中</view>
										</view>
									</view>
								</view>
								<view class="action-box b-t">
									<button class="action-btn recom  text-primary border-primary"
										@click="goOrderDetail(item)" >查看订单</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 Landapi from '@/api/land/index.js';
	import Mallapi from '@/api/mall/index.js';
	export default {
		data() {
			return {
				triggered: true, //设置当前下拉刷新的状态
				refresherEnabled: true,
				tabCurrentIndex: 0,
				status: 'loadmore',
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				// 当前排序方式视图
				nowsetyindex: 1,
				// 订单列表
				orderlist: [],
				//顶部距离
				scrollTop: 0,
				modalshow: false,
				content: '该订单还未支付,是否先支付?',
				seorder: {},
				nowindex: 1, //当前列表分页
				customstyle: {
					background: '#F4F6F8'
				},
				navList: [{
						name: '全部',
						loadingType: 'more'
					},
					{
						name: '租赁中',
						loadingType: 'more'
					}
				],
				loadingType: 'more',
				
				flag: false,
				title: '温馨提示',
				current: 0,
				swiperCurrent: 0,
				nomorelist: false,
				_freshing: false
			};
		},
		onLoad() {
			this.getorderlist(this.swiperCurrent, this.nowindex);
			this._freshing = false;
		},
		onPullDownRefresh() {
			console.log('下拉刷新了')
			this.nowindex = 1
			console.log(this.swiperCurrent,'this.swiperCurrent')
			this.getorderlist(this.swiperCurrent+1, this.nowindex);
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		onReachBottom() {
			console.log('上拉加载了')
			this.nowindex++
			let parms = {
				p: this.nowindex,
				type: this.swiperCurrent
			};
			this.status = 'loading'
			Landapi.getlandorder(parms).then(res => {
				if (res.status == 1) {
					if (res.data !== null && res.data !== undefined && res.data.length > 0) {
						// 获取服务套餐详情集合
						this.status = 'nomore'
						res.data.forEach(item => {
							that.orderlist.push(item);
						});
						if (res.data.length == 10) {
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
					}
				} else {
					this.nowindex--
					this.status = "nomore"
				}
			})
		},
		onShow() {},
		methods: {
			tabClick(e) {
				this.p = 1;
				this.tabCurrentIndex = e.index;
				this.tabsChange(e)
			},
			goOrderDetail(item) {
				uni.navigateTo({
					url: `/pagesD/pages/order/orderDetail?sid=${item.sid}&id=${item.id}`
				});
			},
			step: function(i) {
				var id = 'progress' + i;
				return id;
			},
			refund(id, index) {
				var that = this;
				let tmplIdsone = that.$config.temlist;
				if (tmplIdsone) {
					that.$until.requestSubscribeMessage([tmplIdsone['returnReminder']], tmplIdsone, function() {
						that.refund2(id, index)
					});
				} else {
					that.refund2(id, index)
				}
			},
			refund2(id, index) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '请确认是否申请土地订单退款！',
					success: function(res) {
						if (res.confirm) {
							Landapi.soilTuikuan({
								id
							}).then(res => {
								if (res.status == 1) {
									that.orderlist[index].isback = 0
									that.orderlist[index].status_period = 3
									uni.showToast({
										title: res.msg,
										icon: "success"
									})
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});


			},
			// tabs通知swiper切换
			tabsChange(e) {
				this.nomorelist = false;
				this.nowindex = 1;
				if (this.swiperCurrent === e.index) {
					return;
				} else {
					this.swiperCurrent = e.index;
					this.orderlist = [];
					this.getorderlistcase(this.swiperCurrent + 1, this.nowindex);
				}
			},
			//发起根据id查看订单信息请求
			lookorderbyid(order) {
				let that = this;
				that.modalshow = true;
				that.seorder = order;
			},
			//获取订单列表
			getorderlist(type, p) {
				var that = this;
				let parms = {
					p: p,
					type: type
				};
				if (!this.nomorelist) {
					Landapi.getlandorder(parms).then(res => {
						if (res.status == 1) {
							if (res.data !== null && res.data !== undefined && res.data.length > 0) {
								// 获取服务套餐详情集合
								this.orderlist = []
								res.data.forEach(item => {
									that.orderlist.push(item);
								});
								this.nowindex = p;
								this.status = 'nomore'
								if (res.data.length == 10) {
									this.status = 'loadmore'
								} else {
									this.status = 'nomore'
								}
							}
						} else {
							this.status = 'nomore'
							this.nomorelist = true;
						}
					});
				}
			},
			//获取订单列表
			getorderlistcase(type, p) {
				var that = this;
				let parms = {
					p: p,
					type: type
				};
				if (!this.nomorelist) {
					Landapi.getlandorder(parms).then(res => {
						if (res.status == 1) {
							if (res.data !== null && res.data !== undefined && res.data.length > 0) {
								// 获取服务套餐详情集合
								that.orderlist = res.data;
								this.nowindex = p;
							}
						} else {
							this.nomorelist = true;
						}
					});
				}
			},
			//修改订单
			uporderdata(item) {
				var that = this;
				let tmplIdsone = that.$config.temlist;
				if (tmplIdsone) {
					that.$until.requestSubscribeMessage([tmplIdsone['orderSuccess'], tmplIdsone['orderDelivery'],
						tmplIdsone['returnReminder']
					], tmplIdsone, function() {
						that.uporderdata2(item)
					});
				} else {
					that.uporderdata2(item)
				}
			},
			uporderdata2(item) {
				let that = this;
				//发送订单id获取订单总金额,在执行成功的回调函数发起支付请求
				Landapi.lookorderbyid({
					id: item.id
				}).then(res => {
					if (res.status == 1) {
						let seeds = [];
						res.data.seeds.forEach((item, index) => {
							seeds.push({
								seed_id: item.seed_id,
								seed_num: item.seed_num
							})
						})
						let parms = {
							id: item.id,
							seeds: JSON.stringify(seeds),
							money: res.data.order_money
						};

						that.$refs.payment.payopen(parms);
					} else {
						that.$api.msg(res.msg);
					}
				});
			},
			//查看信息弹出框确定操作
			modalconfirm() {
				this.nowpay(this.seorder);
			},
			//追加种子
			appseed(item) {
				let that = this;
				let parms = {
					id: item.id
				};
				Landapi.lookorderbyid(parms).then(res => {
					if (res.status == 1) {
						let params2 = {
							id: item.id,
							seeds: res.data.seeds,
							subdivision_area: item.subdivision_area
						};
						//传导种子集合，选择完毕后更新种子值
						uni.navigateTo({
							url: '/pagesB/pages/chooseland/seed/appseed/appseed?params=' + JSON.stringify(
								params2)
						});
					} else {
						that.$api.msg(res.msg);
					}
				});
			},
			//查看信息弹出框取消操作
			modalcancel() {
				uni.navigateTo({
					url: '/pagesB/pagesD/pages/orderdeleti/orderdeleti?orderid=' + this.seorder.id
				});
			},
			navTo(url) {
				this.$until.toUrl(url);
			},

		}
	};
</script>

<style lang="scss" scoped>
	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>