customerapp-H5/pages/Buy_soap_tape/purchase_history.vue

<template>
	<view class="page">
		<view v-if="showtape" class="topt flexB">
			<view :style="{color: params.type == 1 ? '#FB231F' : '#333'}" class="topt_item flexCC" @click="params.type = 1, cearBox()">
				<text>肥皂订单</text>
				<view :class="params.type == 1 ? 'checked_l' : 'nochecked_l'" />
			</view>
			<view class="topt_line" />
			<view :style="{color: params.type == 2 ? '#FB231F' : '#333'}" class="topt_item flexCC" @click="params.type = 2, cearBox()">
				<text>胶带订单</text>
				<view :class="params.type == 2 ? 'checked_l' : 'nochecked_l'" />
			</view>
		</view>
		<view :style="{'padding-top': showtape ?  '104rpx' : '24rpx'}">
			<view class="soapBox" v-for="(item, index) in list" :key="index" @click="getDetail(item)">
				<image :src="item.express_status == 2?statusImg[2]:item.express_status == 1?statusImg[1]: statusImg[0]" class="soapBox_statusImg"></image>
				<view class="soapBox_top">
					订单号：{{ item.order_num }}
				</view>
				<view class="soapBox_middle">
					<view class="flexC">
						<image :src="item.goods_type == 2 ? image[1] : image[0]" class="goodsImg"></image>
						<view class="middleFlex">
							<view class="middleFlex_title">
								{{ item.goods_type == 2 ? '【大卫博士健康内裤】专用打包胶带' : '【大卫博士健康内裤】专用洗涤皂' }}
							</view>
							<view class="middleFlex_dan">
								<view style="font-weight: bold;">
									￥{{ item.goods_type == 2 ? 20 : 8 }}
								</view>
								<view class="num">
									x{{ item.num }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="soapBox_bottom">
					<text class="text1">共{{ `${item.num + (item.goods_type == 2 ? '卷' : '块')}` }}，</text>
					<text>合计；</text>
					<text class="text2">￥</text>
					<text class="text3">{{ item.cost }}</text>
				</view>
			</view>
			<view class="noList"v-if="!showList">
				<image src="https://soap.cliu.cc/chumeng/no_record.png" mode="widthFix"></image>
			</view>
			<view style="margin: 30rpx auto 10rpx;text-align: center;" v-if="showList && showBottom">
				没有更多啦~
			</view>
		</view>
	</view>
</template>

<script>
	import { _API_GetSoapList } from '@/api/Buy_soap_tape.js'
	export default {
		data() {
			return {
				showList: true,
				showBottom: false,
				showtape: false,
				statusImg: [
					require('../../static/Buy_soap_tape/0.png'),
					require('../../static/Buy_soap_tape/1.png'),
					require('../../static/Buy_soap_tape/2.png')
				],
				image: [
					require('../../static/Buy_soap_tape/soap-s.png'),
					require('../../static/Buy_soap_tape/tape-s.png')
				],
				params: {
				    page_index: 1,
				    page_size: 7,
					type: 1
				},
				type: '',
				totalPage: 0,
				list: []
			}
		},
		onLoad(v) {
			if (v.type) {
				this.params.type = v.type == 0 ? 2 : 1
			}
			let userInfo  = uni.getStorageSync('userInfo')
			if (userInfo.level == 3) {
				this.showtape = true
			}
			this.getLowerAll()
		},
		onReachBottom() {
		    this.more()
		},
		methods: {
			cearBox() {
				this.page_index = 1
				this.getLowerAll()
			},
			//获取列表
			getLowerAll(isMore) {
				uni.showLoading({ title: '加载中', mask: true })
			    _API_GetSoapList(this.params).then(res => {
					uni.hideLoading()
			        if (res.code === 200) {
			            const { list, total } = res.data
			            if (list.length === 0) {
							this.list = []
							this.totalPage = 0
			                this.showList = false
			                return false
			            }
						 this.showList = true
			            this.totalPage = Math.ceil(Number(total) / 7)
			            this.list = isMore ? this.list.concat(list) : list
			        } else {
						uni.showToast({ title: res.message || '获取列表失败', icon: 'none' })
			        }
			    })
			},
			//加载获取更多
			more() {
				if (this.params.page_index >= this.totalPage) {
			        this.showBottom = true
			        return false
			    }
			    this.params.page_index++
			    this.getLowerAll(true)
			},
			getDetail(item) {
				uni.navigateTo({
					url: './orderDetail?data=' + encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	padding: 24rpx;
}
.noList {
	margin-top: 100rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	image {
		width: 500rpx;
		margin-bottom: 20rpx;
	}
	
}
.topt {
		width: 100%;
		padding: 30rpx 72rpx 24rpx 72rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10000;
			.checked_l {
				width: 32rpx;
				height: 4rpx;
				background: linear-gradient(180deg, #FF232C 0%, #FF571B 100%);
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				margin-top: 5rpx;
			}
			.nochecked_l {
				width: 32rpx;
				height: 4rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				margin-top: 5rpx;
			}
		&_line {
			height: 40rpx;
			border: 2rpx solid #F5F5F5;
		}
		&_item {
			margin-bottom: 5rpx;
			text {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
			}
		}
	}
.top {
	height: 104rpx;
	background: linear-gradient(90deg, #FF232C 0%, #FF571B 100%);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40rpx;
	text {
		font-size: 32rpx;
		color: #fff;
	}
	&_btn {
		color: #fff;
		width: 144rpx;
		height: 56rpx;
		background: #FFFFFF;
		background-color: #fff;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 32rpx;
		color: #FB231F;
		text-align: center;
		line-height: 56rpx;
	}
}
.soapBox {
	margin-bottom: 24rpx;
	padding: 24rpx;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	position: relative;
	&_statusImg {
		width: 148rpx;
		height: 68rpx;
		position: absolute;
		right: 24rpx;
		top: 16rpx;
	}
	&_top {
		font-size: 28rpx;
		padding: 3rpx 0 24rpx 0;
		border-bottom: 2rpx solid #E9E9E9;
	}
	&_middle {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 24rpx;
		.num {
			font-size: 28rpx;
			color: #999999;
		}
		.goodsImg {
			width: 175rpx;
			height: 142rpx;
		}
		.middleFlex {
			height: 130rpx;
			display: flex;
			justify-content: flex-start;
			flex-direction: column;
			&_title {
				font-size: 30rpx;
				font-weight: bold;
			}
			&_dan {
				margin-top: 24rpx;
				font-size: 28rpx;
				width: 472rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
	&_bottom {
		text-align: right;
		margin-top: 34rpx;
		font-weight: bold;
		font-size: 28rpx;
		.text1 {
			color: #999;
		}
		.text2 {
			color:  #FB231F;
		}
		.text3 {
			font-size: 44rpx;
			color:  #FB231F;
		}
	}
}
.fixed {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #f9f9fb;
	padding: 24rpx;
	z-index: 1000;
}
</style>