ec.uniapp-master/pages/order/index/onlineorder.vue

<template>
	<view>
		<lf-nav :spreadOut="true" :showIcon="true" bgColor="white" title="在线商城订单" @changeHeight="e => nav_height = e"></lf-nav>
		<view class="lf-row-between lf-bg-white" style="padding: 0 32rpx;">
			<view class="online-tab" :class="online_tab==0?'online-active':''" @click="changeTab(0)">线上订单</view>
			<view class="online-tab" :class="online_tab==1?'online-active':''" @click="changeTab(1)">线下订单</view>
		</view>
		<view v-if="online_tab == 0">
			<view class="special_tab">
				<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
			</view>
			<view class="lf-p-30 lf-flex lf-w-100 lf-bg-white lf-m-b-30">
				<!-- <u-icon name="search" class="search-icon"></u-icon>
				<input class="rom-search" type="text" placeholder="请输入商品名称" /> -->
				<u-search placeholder="请输入商品名称" bg-color="#F4F8F8" :show-action="false" style="width: 100%;"></u-search>
			</view>
			<swiper :style="{height: autoHeight, width: '750rpx'}" :current="current" @change="swiperChange">
				<swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex">
					<scroll-view :style="{height: autoHeight}" class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="tabItem.isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
						
						<view v-for="(item2,index2) of tabItem.list" :key="index2" class="online-card" @click="$url('/pages/order/newdetail/newdetail?order_id='+item2.order_no)">
							<view class="lf-font-24 lf-color-777">
								订单编号{{item2.order_no}}
							</view>
							<view class="lf-m-t-30">
								<text class="lf-iconfont icon-Group- lf-font-28"></text>
								<text class="lf-color-black lf-font-28 lf-font-bold lf-m-l-10">{{item2.from}}</text>
								<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text>
							</view>
							<view v-for="(i,index3) of item2.items" :key="index3">
								<view class="lf-m-t-30" style="display: flex;">
									<image class="content-img" :src="i.item_meta.image" mode="aspectFill"></image>
									<view class="lf-m-l-15">
										<view class="lf-color-333 lf-font-26 lf-line-2" style="max-width: 480rpx;">{{i.item_name}}</view>
										<view class="lf-font-24 lf-color-777 lf-m-t-14 lf-row-between">
											<view>{{i.item_meta.specs_text}}</view>
											<view class="lf-font-32 lf-color-price">￥{{item2.items_total_yuan}}</view>
										</view>
									</view>
								</view>
								<view class="lf-row-between lf-m-t-30 lf-m-b-50">
									<view class="lf-font-24 lf-color-777">{{item2.status_text}}</view>
									<!-- <view class="lf-color-price lf-font-24">删除订单</view> -->
								</view>
							</view>
						</view>
						
						<view class="loading-more lf-m-b-10">
							<text :class="{'loading-more-text': tabItem.loadingClass}" v-if="tabItem.list.length">{{tabItem.loadingText}}</text>
							<lf-nocontent v-else></lf-nocontent>
						<!-- 	<view> 
								{{tabItem.list.length}}
							</view> -->
						</view>
						
						
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view v-else>
			<!-- <view class="special_tab">
				<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
			</view> -->
			<scroll-view :style="{height: autoHeightTwo}" class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
				
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="lf-row-between">
						<text class="lf-font-36 lf-color-black lf-font-bold lf-color-price">{{item.balance.balance}}</text>
						<text class="lf-font-24 lf-color-555">{{item.balance.note}}</text>
					</view>
					<view class="lf-row-between lf-m-t-20">
						<text class="lf-font-24 lf-color-555">¥{{item.balance.current}}</text>
						<text class="lf-font-24 lf-color-777">{{item.created_at}}</text>
					</view>
				</view>
				
				<view class="loading-more lf-m-b-10">
					<text :class="{'loading-more-text': loadingClass}" v-if="list.length">{{loadingText}}</text>
					<lf-nocontent v-else></lf-nocontent>
				</view>
				
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				online_tab: 0,
				tab_list: [
					{
						id: 1,
						name: '全部',
						type: '',
						list: [],
						isRefresher: false,
						loadingClass: false,
						loadingText: '正在加载中',
						page: 1,
						isPage: true
					},
					{
						id: 2,
						name: '代付款',
						type: 1,
						list: [],
						isRefresher: false,
						loadingClass: true,
						loadingText: '正在加载中',
						page: 1,
						isPage: true
					},
					{
						id: 3,
						name: '待发货',
						type: 2,
						list: [],
						isRefresher: false,
						loadingClass: true,
						loadingText: '正在加载中',
						page: 1,
						isPage: true
					},
					{
						id: 4,
						name: '待收货',
						type: 3,
						list: [],
						isRefresher: false,
						loadingClass: true,
						loadingText: '正在加载中',
						page: 1,
						isPage: true
					},
					{
						id: 5,
						name: '已完成',
						type: 4,
						list: [],
						isRefresher: false,
						loadingClass: true,
						loadingText: '正在加载中',
						page: 1,
						isPage: true
					}
				],
				list: [],
				current: 0,
				windowHeight: 0,
				loadingClass: false,
				loadingText: '没有更多数据啦~',
				scrollH: '',
				nav_height: '',
				isRefresher: false,
				page: 1
			}
		},
		computed: {
			autoHeight(){
				return `calc(${this.scrollH}px - ${this.nav_height}px - 86rpx - 120rpx - 120rpx)`;
			},
			autoHeightTwo(){
				return `calc(${this.scrollH}px - ${this.nav_height}px - 90rpx)`;
			}
		},
		onLoad(){
			let info = uni.getSystemInfoSync();
			this.scrollH = info.screenHeight;
			this.getData()
		},
		methods: {
			changeTab(index) {
				this.online_tab = index
				if(this.online_tab == 0) {
					this.getData();
				}else {
					this.getUploadList();
				}
			},
			getUploadList(options={}) {
				this.$http
				    .post({
				        api: 'api/offline/order',
						data:{
							page:this.page
						},
						header: {
						    Authorization: `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjVkYTY5YjM5NWFhYzM5NzVmMzI3ZTEwZDEyMzAzZjI5MzE4ZmU2OGE2Njg0MTU0MWVjMjQ2NWM4ZWJkYjRlMTUwMmY1NWM0NDlkOTcxZDdjIn0.eyJhdWQiOiIzIiwianRpIjoiNWRhNjliMzk1YWFjMzk3NWYzMjdlMTBkMTIzMDNmMjkzMThmZTY4YTY2ODQxNTQxZWMyNDY1YzhlYmRiNGUxNTAyZjU1YzQ0OWQ5NzFkN2MiLCJpYXQiOjE2MzIzODY3NDAsIm5iZiI6MTYzMjM4Njc0MCwiZXhwIjoxNjYzOTIyNzQwLCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.am-szF_sZcjtyOnEJT1DHMnr1hjAZ90MJc1Pc3AD3FrcQU5xb-u43ddL70ZmM3OxxLTZlmrB8OA3XJYREMtcz26MzwOMfopB9A5AH1EjHiFCV_368cq4ZpXNFi_Sn_LrY9Wje0-WMvkznF8tbrdCNrZn5YyIV47cwEnUNQrrREX4OhcgrSfNvwnh8_O_fueBwws9yY3tTlvVB7-AvG2urFI5XCzygsE3llE0wxF5ZJO1T5QRYLDse2BQ3d9feFzO5_7FiVspKr8DrJUlZP-Zz02UgIDIA_PX0UO2M0KeBwqPYq2d5uEnXT8or7K9coSnHRqbbr4qn6iczxDu4ofM58oCcaPycbtI3RvP2SMZuWmX8fXw-T99XltK_uJEU_wlIkrjvabzyo3tkrxRrwmzJEb3Yf4Lbah_xtfi24Nsu9SRjdw8YoiF6YhuuU5YaOn-wLltgmugfYpkFpEOneVAxoMjkm5IxZAJYMXF-DeSpdOoiTmuIRZYX4GDa55s_31r0YMyF6IIQNUvOjHHk-sJSHG0kPd5QivLP7dxE5XndwyFKAOeM97X2TjdYMhJz0EBCyS4Y_pI6AFWsxJkKsa0aqvBAeJyOV9k8kbYwtPeeBhBNsDWSlGBEZYMcoAv-C-IBZzd7gu2Ceh_MJPItrnsvj8W43Cv1TwxD26bJyt9EUY`
						},
				    })
				    .then(res => {
				       if (res.data.status) {
				       	let isPage =  res.data.per_page == 15?true:false;
				       	this.isPage = isPage;
				       	if(!isPage) {
				       		this.loadingClass = false;
				       		this.loadingText = '没有更多数据啦~';
				       	}
				       	if(options.type == 'pageRefresh') {
				       		uni.stopPullDownRefresh();
				       	}else if(options.type == 'scrollRefresh') {
				       		this.isRefresher = false;
				       	}
				       	if(this.page == 1) {
				       		this.list = res.data.data.data;
				       	}else {
				       		this.list.push(...res.data.data.data);
				       	}
				          console.log('数组列表',this.list)
				       } else {
				           wx.showModal({
				               content: res.message || '请下拉页面刷新重试',
				               showCancel: false
				           });
				       }
				        wx.hideLoading();
				    })
				    .catch(() => {
				        wx.hideLoading();
				        wx.showModal({
				            content: '请求失败',
				            showCancel: false
				        });
				    });
			},
			tabChange(index){
				this.current = index;
				this.getData();
			},
			getData(options ={}) {
				let tab_item = this.tab_list[this.current];
				console.log('=====adada===',tab_item)
				this.$http
				    .get({
				        api: 'api/order/list',
						data:{
							status: tab_item.type,
							page: tab_item.page,
							type: 0,
							channel: ''
						},
						header: {
						    Authorization: this.$cookieStorage.get('user_token')
						},
				    })
				    .then(res => {
				       if (res.data.status) {
				       	let isPage =  tab_item.page < res.data.meta.pagination.total_pages?true:false;
				       	tab_item.isPage = isPage;
				       	if(!isPage) {
				       		tab_item.loadingClass = false;
				       		tab_item.loadingText = '没有更多数据啦~';
				       	}
				       	if(options.type == 'pageRefresh') {
				       		uni.stopPullDownRefresh();
				       	}else if(options.type == 'scrollRefresh') {
				       		tab_item.isRefresher = false;
				       	}
				       	if(tab_item.page == 1) {
				       		tab_item.list = res.data.data;
				       	}else {
				       		tab_item.list.push(...res.data.data);
				       	}
				          console.log('数组列表',tab_item.list)
				       } else {
				           wx.showModal({
				               content: res.message || '请下拉页面刷新重试',
				               showCancel: false
				           });
				       }
				        wx.hideLoading();
				    })
				    .catch(() => {
				        wx.hideLoading();
				        wx.showModal({
				            content: '请求失败',
				            showCancel: false
				        });
				    });
			},
			// 滑块下标值变化
			swiperChange(event){
				this.current = event.detail.current;
				if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
				this.getData();
			},
			// 页面触底，加载下一页
			onScrolltolower(){
				let tab_item = this.tab_list[this.current];
				if(tab_item.isPage){
					tab_item.page = tab_item.page + 1;
					this.getData();
				}
				if(this.isPage) {
					this.page = this.page + 1;
					this.getUploadList()
				}
			},
			// scroll-view 下拉刷新
			onRefresherrefresh(){
				this.$u.throttle(() => {
					this.refreshFn({type: 'scrollRefresh'});
				}, 200);
			},
			// 下拉刷新处理
			refreshFn(options){
				let tab_item = this.tab_list[this.current];
				tab_item.page = 1;
				tab_item.isPage = true;
				tab_item.loadingClass = true;
				tab_item.list = [];
				tab_item.isRefresher = true;
				tab_item.loadingText = '正在加载中';
				this.getData(options);
				this.page = 1;
				this.isPage = true;
				this.loadingClass = true;
				this.list = [];
				this.isRefresher = true;
				this.loadingText = '正在加载中';
				this.getUploadList(options);
			},
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>

<style scoped lang="scss">
	.content-img {
		width: 130rpx;
		height: 130rpx;
		border-radius: 5rpx;
	}
	.online-card {
		width: 686rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;
	}
	.online-tab {
		width: 375rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #555555;
		font-size: 32rpx;
	}
	.online-active {
		background: #15716E;
		color: #FFFFFF;
		border-radius: 45rpx 45rpx 0rpx 0rpx;
	}
	//tab相关
	
	.search-icon {
		position: relative;
		bottom: 0;
		left: 54rpx;
	}
	/deep/.input-placeholder{
		color: #777;
		font-size: 28rpx;
	}
	.rom-search {
		width: 686rpx;
		height: 60rpx;
		background: #F4F8F8;
		border-radius: 30rpx;
		padding-left: 74rpx;
		font-size: 28rpx;
	}
	.goods-rom {
		border-radius: 20rpx;
		width: 333rpx;
		height: 497rpx;
		background-color: white;
		box-shadow: 0px 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
		&:nth-child(2n) {
			margin-right: 0;
		}
		&:nth-child(n + 3) {
			margin-top: 20rpx;
		}
	}
	.introduct {
		padding: 0 0 30rpx 32rpx;
	}
	.com{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 0rpx 28rpx;
	}
	.shop-head {
		width: 100%;
		height: 400rpx;
		position: relative;
	}
	.shop-flex {
		display: flex;
		padding: 30rpx;
	}
	.shop-title {
		width: 686rpx;
		height: 274rpx;
		border-radius: 20rpx;
		background-color: white;
		box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
		margin: 0 auto;
		position: relative;
		top: -32rpx;
	}
	.shop-img {
		width: 90rpx;
		height: 90rpx;
		margin-right: 15rpx;
	}
	.shop-function {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		font-size: 40rpx;
	}
	.function-total {
		display: flex;
		justify-content: space-between;
		padding: 0 65rpx 0 65rpx;
	}
	
	.item{
		width: 686rpx;
		height: max-content;
		background: #F4F8F8;
		border-radius: 10rpx;
		// margin-bottom: 30rpx;
		margin-top: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
		line-height: 1;
	}
	
	/deep/.u-scroll-box {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
		background-color: #15716E!important;
		width: 80rpx!important;
		position: absolute;
		height: 10rpx;
		left: 0;
		border-radius: 8rpx 8rpx 0px 0px!important;
		bottom: -12rpx;
	}
	
	/deep/ .u-tab-item {
		font-size: 28rpx!important;
	}
	
	
	//价格筛选伪类
	// /deep/.special_tab .u-tab-item:nth-child(4n) ::after{
	// 	font-size: 48rpx!important;
	// 	content: '';
		
	// 	color: red;
	// }
	
	// loading加载
	.loading-more {
		align-items: center;
		justify-content: center;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
		font-size: 28rpx;
		color: #999;
	}
	.loading-more-text::before {
		content: '';
		width: 20px;
		height: 20px;
		display: inline-block;
		vertical-align: middle;
		-webkit-animation: weuiLoading 1s steps(12, end) infinite;
		animation: weuiLoading 1s steps(12, end) infinite;
		background-repeat: no-repeat;
		background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
		background-size: 100%;
	}
	@keyframes weuiLoading {
		0% {
			transform: rotate3d(0, 0, 1, 0deg);
		}
		100% {
			transform: rotate3d(0, 0, 1, 360deg);
		}
	}
	
	
	.list-warter {
		border-radius: 20rpx;
		margin: 10px 5px;
		margin-top: 0px;
		background-color: #ffffff;
		// padding: 8px;
		position: relative;
		overflow: hidden;
		box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.list-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.list-title {
		font-size: 28rpx;
		font-weight: bold;
		color: $u-main-color;
	}
	
	.list-label{
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: rgba(0,0,0,0.5);
		width: 140rpx;
		height: 48rpx;
		border-radius: 20rpx 0rpx 0rpx 0rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
	}
	
	.list-tag {
		display: flex;
		margin-top: 5px;
	}
	
	.list-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.list-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.list-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
		display: flex;
		align-items: center;
	}
</style>