qingyuyiliao/pages/mine/record.vue

<!-- 吸氢记录 -->
<template>
	<view class="record-home">
		<view class="top-bar">
			<view class="bar-item" :class="currentBar==-1 ? 'activeBar' : ''" @click="changeBar(-1)">
				全部
			</view>
			<view class="bar-item" :class="currentBar==2? 'activeBar' : ''" @click="changeBar(2)">
				进行中
			</view>
			<!-- <view class="bar-item" :class="currentBar==0 ? 'activeBar' : ''" @click="changeBar(0)">
				已关闭
			</view> -->
			<view class="bar-item" :class="currentBar==4 ? 'activeBar' : ''" @click="changeBar(4)">
				已暂停
			</view>
			<view class="bar-item" :class="currentBar==3? 'activeBar' : ''" @click="changeBar(3)">
				已完成
			</view>
			<view class="bar-item" :class="currentBar==1 ? 'activeBar' : ''" @click="changeBar(1)">
				待支付
			</view>
			<!-- <view class="bar-item" :class="currentBar==2 ? 'activeBar' : ''" @click="changeBar(2)">
				已完成
			</view>
			<view class="bar-item" :class="currentBar==3 ? 'activeBar' : ''" @click="changeBar(3)">
				已关闭
			</view> -->
		</view>
		<view class="list" v-for="(item,index) in orderList" :key='index'>
			<view class="list-title" @click="skipDeyail(item)">
				<text>订单编号：{{item.no}}</text><text class="iconfont icon-iconfontjiantou2"></text>
			</view>
			<view class="list-content">
				<image src="../../static/image/shop.png" mode=""></image>
				<view class="right">
					<view class="shop-name">
						{{item.shop.name}}
					</view>
					<view class="time">
						吸氢{{item.work_time}}分钟
					</view>
					<!-- <view class="time">
						{{item.updated_at}}
					</view> -->
					<view class="day">
						<text>{{item.created_at}}</text>
					</view>
					<view class="pay" v-if="item.status==1" @click="payImmediately(item)">
						立即支付
					</view>
					<view class="pay1" v-if="item.status==3" style="color: $mine-background-color;">
						已完成
					</view>
					<view class="pay1" v-if="item.status==0" style="color: #716c6a;">
						已关闭
					</view>
					<view class="pay1" v-if="item.status==2" style="color: #ff5e49;">
						进行中
					</view>
					<view class="pay1" v-if="item.status==4" style="color: #ff5e49;">
						已暂停
					</view>
				</view>
			</view>
		</view>
		<view class="null" v-if="orderList.length==0">
			<image src="../../static/image/null.png" mode=""></image>
			<view class="null-text">
				暂无记录！
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				currentBar: -1,
				list: [1],
				orderList: [],
				page: 1,
				links: ''
			}
		},
		onLoad() {
			if (this.currentBar == -1) {
				let params = {
					page: this.page
				}
				this.getOrderList(params)
			} else {
				let params = {
					status: this.currentBar,
					page: this.page
				}
				this.getOrderList(params)
			}
		},
		onReachBottom() {
			let params
			if (this.links.next) {
				uni.showLoading()
				this.page++

			} else {
				uni.showToast({
					title: '到底了~',
					icon: 'none'
				})
				return
			}
			if (this.currentBar == -1) {
				params = {
					page: this.page
				}
			} else {
				params = {
					status: this.currentBar,
					page: this.page
				}
			}
			app.request('/orders', params, 'get').then(res => {
				let dataList = res.data.data.data
				uni.hideLoading()
				this.orderList = this.orderList.concat(dataList)
				this.links = res.data.data.meta.pagination.links
			})
		},
		methods: {
			//订单列表
			getOrderList: function(params) {
				uni.showLoading()
				app.request('/orders', params, 'get').then(res => {
					if (res.statusCode == 200) {
						let data = res.data.data.data
						this.orderList = this.orderList.concat(data)
						this.links = res.data.data.meta.pagination.links
					}
					uni.hideLoading()
				})
			},
			//跳转详情
			skipDeyail: function(e) {
				if (e.status == 2 || e.status == 4) {
					uni.setStorageSync('order_no', e.no)
					uni.setStorageSync('work_time', e.work_time)
					uni.navigateTo({
						url: '../index/order?order_no=' + e.no,
					})
				} else {
					uni.navigateTo({
						url: './orderDetail?order_no=' + e.no
					})
				}
			},
			//立即支付
			payImmediately: function(e) {
				uni.setStorageSync('work_time', e.work_time)
				let params = {
					no: e.no
				}
				app.request('/order/pay', params, 'post').then(res => {
					console.log(res)
					// let params=res.data.data
					let order_no = res.data.data.order_no
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.data.timeStamp,
						nonceStr: res.data.data.nonceStr,
						package: res.data.data.package,
						signType: res.data.data.signType,
						paySign: res.data.data.paySign,
						appId: res.data.data.appId,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							uni.navigateTo({
								url: '../index/surePay?order_no=' + order_no
								// url: './?order_no=' + order_no
							})
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
							console.log(typeof(res.data.data.package))
						}
					});

				})
			},

			changeBar(e) {
				this.currentBar = e
				this.orderList = []
				this.page = 1
				if (this.currentBar == -1) {
					let params = {
						page: this.page
					}
					this.getOrderList(params)
				} else {
					let params = {
						status: this.currentBar,
						page: this.page
					}
					this.getOrderList(params)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.record-home {
		// background-color: #EEEEEE;
		// height: 100%;
		padding-bottom: 50upx;
		padding-top: 100upx;

		.top-bar {
			position: fixed;
			z-index: 9999;
			top: 0;
			display: flex;
			width: 100%;
			height: 80upx;
			line-height: 80upx;
			background-color: #FFFFFF;

			.bar-item {
				margin: 0 30upx;
				flex: 1;
				text-align: center;
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #B6B6B6;
				// padding: 7upx 0;
			}

			.activeBar {
				border-bottom: solid 6upx $mine-background-color;
				font-weight: 500;
				font-size: 28upx;
				color: $mine-background-color;
			}
		}

		.list {
			background: #FFFFFF;
			margin: 30upx 30upx 30upx;

			padding: 30upx;
			border-radius: 12upx;

			.list-title {
				padding-bottom: 20upx;
				font-size: 26upx;
				font-family: PingFang SC;
				// font-weight: bold;
				color: #000000;
				border-bottom: solid 1upx #e4e3e8;

				.icon-iconfontjiantou2 {
					float: right;
				}
			}

			.list-content {
				display: flex;
				margin-top: 20upx;

				image {
					flex: 0 0 155upx;
					height: 155upx;
					margin-right: 15upx;
				}

				.right {
					flex: 1;
					position: relative;

					.shop-name {
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
						line-height: 70upx;
					}

					.time {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 300;
						margin-top: 10upx;
						color: #B6B6B6;
					}

					.day {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 300;
						color: #B6B6B6;
						margin-top: 5upx;
					}

					.pay {
						position: absolute;
						bottom: 0upx;
						right: 0;
						height: 50upx;
						line-height: 50upx;
						z-index: 9;
						background-color: #d95e4e;
						color: #FFFFFF;
						border-radius: 12upx;
						// width: 100upx;
						text-align: center;
						font-size: 20upx;
						padding: 0 20upx;
					}

					.pay1 {
						position: absolute;
						bottom: 0upx;
						right: 0;
						height: 50upx;
						line-height: 50upx;
						z-index: 9;
						// // background-color: #d95e4e;
						// color: #FFFFFF;
						border-radius: 12upx;
						// width: 100upx;
						text-align: center;
						font-size: 24upx;
						padding: 0 20upx;
					}
				}
			}
		}

		.null {
			margin: 0 auto;
			width: 350upx;

			// padding-top: 30%;
			image {
				width: 350upx;
				height: 300upx;
				margin-top: 55%;
			}

			.null-text {
				text-align: center;
				font-size: 37upx;
				font-weight: 400;
				color: #515151;
				margin-top: 85upx;
				padding-left: 35upx;
			}
		}
	}
</style>