zhengbasai/pages/gift/record.vue

<template>
	<div class="exchange">
		<div class="top">
			<div class="card">
				<!-- 	<div class="card_item">
					<div class="my_nums">消耗积分：<span class="num">30000</span></div>
					<div class="my_nums">已兑换数量：<span class="num">200</span></div>
				</div> -->
				<div class="card_item">
					<div class="my_nums">还剩积分：<span class="num">{{useInfo.jifen}}</span></div>
				</div>
				<image src="@/static/images/gift/gift.png" mode="" class="icon_6"></image>
			</div>
		</div>
		<div class='record'>
			<div class="tabs">
				<u-tabs ref="tabs" :list="tabList" active-color="#F5222D" :current="current" :show-bar="false"
					@change="changeTab"></u-tabs>
			</div>
			<div class="list" v-if="list.length>0">
				<div class="item" @click="RecordDetail(item.id)" v-for="item in list" :key="item.id">
					<div class="time">{{item.order_time}}</div>
					<div class="goods">
						<div class="icon">
							<image v-if="item.goods && item.goods.good" :src="item.goods.good.cover" mode="" class="icon"></image>
						</div>
						<div class="right">
							<div class="name">{{item.goods? item.goods.good.name:'--'}}</div>
							<div class="btn">
								<div class="num">数量：{{item.nums}}</div>
								<div class="jifen">-{{item.jifen}}<span style="font-size: 12px;">积分</span></div>
							</div>
						</div>
					</div>
					<div class="tag zuofei" v-if="item.status==0">已作废</div>
					<div class="tag wait" v-if="item.status==1">待审核</div>
					<div class="tag wait_fh" v-if="item.status==2">待发货</div>
					<div class="tag all_fh" v-if="item.status==3">待收货</div>
					<div class="tag complate" v-if="item.status==4">已完成</div>
					<image v-if="item.status==0" src="../../static/images/gift/zf.png" mode="" class="zf_icon"></image>

				</div>
			</div>
			<div class="empty_image" v-else>
				<u-empty text="暂无兑换记录!"></u-empty>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '全部',
					id: ''
				}, {
					name: '待审核',
					id: 1
				}, {
					name: '待发货',
					id: 2

				}, {
					name: '待收货',
					id: 3

				}, {
					name: '已完成',
					id: 4

				}, {
					name: '已作废',
					id: 0

				}],
				list: [],
				current: 0,
				status: '',
				useInfo: {}
			}
		},
		onShow() {
			this.useInfo = this.vuex_user
			this.page = 1
			this.last = false
			this.list = []
			this.getList()
		},
		onReachBottom() {
			if (!this.last) {
				this.page++
			}
			this.getList()
		},
		methods: {

			RecordDetail(id) {
				uni.navigateTo({
					url: '/pages/gift/record_detail?id=' + id
				})
			
			},
			//重置列表请求
			resetList() {
				this.page = 1
				this.last = false
				this.list = []
				this.getList()
			},
			//切换分类
			changeTab(index) {
				this.current = index;
				if (index == 0) this.status = ''
				else this.status = this.tabList[index].id
				this.resetList()
			},
			getList() {
				this.$u.get('/dwbs/shop/orders', {
					page: this.page,
					user_id: this.vuex_user.id,
					status: this.status
				}).then(res => {
					console.log(res, 'list')
					let data = res.data.data
					if (this.page > 1 && data.length == 0) {
						uni.showToast({
							title: '暂无更多',
							icon: 'none'
						})
						this.last = true
					} else {
						this.list = this.list.concat(data)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
		padding-bottom: 16px;
	}

	.exchange {
		.top {
			background-color: #fff;
			padding: 12px;

			.card {
				padding: 20px;
				position: relative;
				background: linear-gradient(270deg, #FF571B 0%, #F5222D 100%);
				border-radius: 10px;

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

					.my_nums {
						font-weight: 400;
						font-size: 18px;
						color: #fff;
						flex: 1;
						text-align: left;

						.num {
							font-size: 20px;
						}
					}


				}

				.icon_6 {
					position: absolute;
					width: 37px;
					height: 37px;
					bottom: 0;
					right: 18px;
				}

			}
		}

		.record {
			padding: 10px;
			background-color: #fff;
			margin-top: 14px;
			border-radius: 10px;

			.list {
				.item {
					border-radius: 10px;
					background: #F9F9F9;
					padding: 4px 14px 14px;
					margin-bottom: 18px;
					position: relative;

					.time {
						color: #878787;
						font-size: 14px;

					}

					.goods {
						display: flex;
						margin-top: 8px;

						.icon {
							background-color: #fff;
							width: 80px;
							height: 64px;
							margin-right: 12px;
							border: solid 1px #fff;
							border-radius: 10px;
							overflow: hidden;

						}

						.right {
							flex: 1;
							align-items: center;
							position: relative;
							z-index: 2;

							.name {
								font-size: 18px;
								color: #333333;
							}

							.btn {
								margin-top: 22px;
								display: flex;

								.num {
									flex: 1;
									font-size: 16px;
									color: #6F6F6F;
								}

								.jifen {
									font-size: 20px;
									color: #FF0000;
								}
							}
						}
					}

					.zf_icon {
						position: absolute;
						width: 83px;
						height: 83px;
						right: 26px;
						bottom: 16px;
						z-index: 0;
					}

					.tag {
						position: absolute;
						width: 53px;
						height: 20px;
						line-height: 20px;
						text-align: center;
						top: 0;
						right: 0;
						border-radius: 0px 10px 0px 10px;
						opacity: 1;

						color: #FFFFFF;
						font-size: 12px;
					}

					.wait {
						background: #FAC858;
					}

					.zuofei {
						background: #A458FA;
					}

					.wait_fh {
						background: #FA9B58;
					}

					.all_fh {
						background: #586EFA;
					}

					.complate {
						background: #FF0000;
					}
				}


			}
		}

	}
</style>