mnsx/pages/cart/cart.vue

<template>
	<view class="container">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" @click="navChoose(index)" :class="{ navC: index == navIc }">{{ item.text }}</view>
		</view>
		<!-- 订单列表 -->
		<swiper :current="navIc" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view scroll-y="true" class="scroll-y">
					<view class="order-item" @click="goToOrderDetail(i)" v-for="i in tabItem.orderList" :key="i.id">
						<view class="i-td">
							<view class="td-left">订单编号：{{ i.order_id }}</view>
							<view class="td-right">{{ i.stateTip }}</view>
						</view>
						<view class="goods-box" v-for="(item, index) in i.cartInfo">
							<view class="goods-left flex">
								<image class="goods-img" :src="item.productInfo.image || '../../static/error/errorImage.jpg'"></image>
								<view class="goods-name">
									<view class="p clamp2">{{ item.productInfo.store_name }}</view>
									<view class="span">{{ i.shipping_type == 1 ? '送货上门' : '到店自提' }}</view>
								</view>
							</view>
							<view class="goods-price">
								<view class="">￥{{ price(item.productInfo.attrInfo.price) }}</view>
								<view class="num">x{{ item.cart_num }}</view>
								<br />
							</view>
						</view>
						<view class="i-td">
							<view class="td-left"></view>
							<view class="i-bottom">
								共计{{ i.total_num }}件商品
								<text>合计 ￥{{ i.pay_price }}</text>
								( {{ i.pay_postage * 1 + i.pay_postage_sh * 1 > 0 ? '含物流费用￥' + (i.pay_postage * 1 + i.pay_postage_sh * 1) + '，' : '免邮，' }} 不含押金)
							</view>
						</view>
						<view class="btn-box" v-if="tabItem.state == 0">
							<view class="btn" @click.stop="qxzf(i)">取消支付</view>
							<view class="btn" @click.stop="ljzf(i)">立即支付</view>
						</view>
						<view class="btn-box" v-if="tabItem.state == 1">
							<view class="btn" @click.stop="sqth(i)" v-if="i.store_id != 0">申请退款</view>
							<view class="btn" @click.stop="sqth(i)" v-if="i.store_id == 0 && i.gift_uid == 0">申请退款</view>
							<view v-if="i.shipping_type == 2">
								<view class="btn" @click.stop="showCode(i)" v-if="i.gift_uid == 0 || i.gift_uid == userInfo.uid">查看券码</view>
							</view>
						</view>
						<view class="btn-box" v-if="tabItem.state == 2">
							<!-- <view v-if="i.shipping_type == 1" class="btn-look">查看物流</view> -->
							<view v-if="i.shipping_type == 1" class="btn" @click.stop="orderTake(i, index)">确认收货</view>
							<view v-if="i.shipping_type == 2">
								<view class="btn" @click.stop="showCode(i)" v-if="i.gift_uid == 0 || i.gift_uid == userInfo.uid">查看券码</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { orderList, orderCancel, orderDel, orderTake } from '@/api/order.js';
import { mapState, mapMutations } from 'vuex';
export default {
	computed: {
		...mapState('user', ['userInfo'])
	},
	data() {
		return {
			navIc: 0,
			navList: [
				{
					state: 0,
					text: '待付款',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 1,
					text: '待发货',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 2,
					text: '待收货',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 3,
					text: '已完成',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				}
			]
		};
	},
	onShow() {
		this.navList = [
			{
				state: 0,
				text: '待付款',
				loadingType: 'more',
				orderList: [],
				page: 1, //当前页数
				limit: 10 //每次信息条数
			},
			{
				state: 1,
				text: '待发货',
				loadingType: 'more',
				orderList: [],
				page: 1, //当前页数
				limit: 10 //每次信息条数
			},
			{
				state: 2,
				text: '待收货',
				loadingType: 'more',
				orderList: [],
				page: 1, //当前页数
				limit: 10 //每次信息条数
			},
			{
				state: 3,
				text: '已完成',
				loadingType: 'more',
				orderList: [],
				page: 1, //当前页数
				limit: 10 //每次信息条数
			}
		];
		this.loadData();
	},
	methods: {
		navChoose(index) {
			this.navIc = index;
			this.loadData();
		},
		price(price) {
			return (price * 1).toFixed(2);
		},
		//swiper 切换
		changeTab(e) {
			this.navIc = e.target.current;
			this.loadData('tabChange');
		},
		//获取订单列表
		loadData(source) {
			//这里是将订单挂载到tab列表下
			let index = this.navIc;
			let navItem = this.navList[index];
			let state = navItem.state;
			if (source === 'tabChange' && navItem.loaded === true) {
				//tab切换只有第一次需要加载数据
				return;
			}
			if (navItem.loadingType === 'loading') {
				//防止重复加载
				return;
			}
			if (navItem.loadingType === 'noMore') {
				//防止重复加载
				return;
			}
			// 修改当前对象状态为加载中
			navItem.loadingType = 'loading';
			orderList({
				type: state,
				page: navItem.page,
				limit: navItem.limit
			})
				.then(({ data }) => {
					console.log(data);
					let arr = data.map(e => {
						console.log(e, 123456);
						let b = this.orderStateExp(e.status);
						e.stateTip = b.stateTip;
						e.stateTipColor = b.stateTipColor;
						return e;
					});
					navItem.orderList = navItem.orderList.concat(arr);
					navItem.page++;
					if (navItem.limit == data.length) {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						navItem.loadingType = 'more';
						return;
					} else {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						navItem.loadingType = 'noMore';
					}
					uni.hideLoading();
					this.$set(navItem, 'loaded', true);
				})
				.catch(e => {
					console.log(e);
				});
		},
		orderTake(item, index) {
			let obj = this;
			uni.showModal({
				title: '是否确认收货？',
				success: res => {
					if (res.confirm) {
						orderTake({
							uni: item.order_id
						})
							.then(e => {
								obj.navList[obj.navIc].orderList.splice(index, 1);
								uni.showToast({
									title: '收货成功'
								});
							})
							.catch(e => {
								console.log(e);
							});
					} else if (res.cancel) {
						console.log('取消');
					}
				}
			});
		},
		//跳转到订单详情
		goToOrderDetail(e) {
			uni.navigateTo({
				url: '/pages/order/orderDetail?id=' + e.order_id
			});
		},
		showCode(e) {
			uni.navigateTo({
				url: '/pages/order/verifyCode?id=' + e.order_id
			});
		},
		orderStateExp(state) {
			let stateTip = '',
				stateTipColor = '#fa436a';
			switch (+state) {
				case 0:
					stateTip = '待发货';
					break;
				case 1:
					stateTip = '待收货';
					break;
				case 2:
					stateTip = '已完成';
					break;
				case 3:
					stateTip = '待评价';
					break;
				case 4:
					stateTip = '已完成';
					stateTipColor = '#901b21';
					break;
				case 9:
					stateTip = '订单已关闭';
					stateTipColor = '#909399';
					break;

				//更多自定义
			}
			return {
				stateTip,
				stateTipColor
			};
		},
		qxzf(item) {
			uni.showModal({
				title: '订单取消',
				content: '是否取消订单？',
				success: e => {
					if (e.confirm) {
						uni.showLoading({
							title: '请稍后'
						});
						orderCancel({ id: item.order_id })
							.then(e => {
								uni.showToast({
									title: '取消成功',
									duration: 2000,
									position: 'top'
								});
							})
							.catch(e => {
								console.log(e);
							});
						//取消订单后删除待付款中该项
						let list = this.navList[this.navIc].orderList;
						let index = list.findIndex(val => val.id === item.id);
						index !== -1 && list.splice(index, 1);
						uni.hideLoading();
					}
				}
			});
		},
		ljzf(e) {
			let yajin = 0;
			e.cartInfo.forEach(item => {
				console.log(item.deposit);
				yajin += item.deposit * 1;
			});
			console.log(yajin);
			uni.navigateTo({
				url: '/pages/money/pay?type=1&ordid=' + e.order_id + '&money=' + (e.pay_price * 1 + yajin)
			});
		},
		sqth(i) {
			uni.navigateTo({
				url: '/pages/order/orderRefund?id=' + i.order_id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	height: 100%;

	background: #f8f1f2;
}

.container {
	width: 100%;
	height: 100%;
	position: fixed;

	.navbar {
		position: relative;
		z-index: 10;
		margin: 20rpx;
		display: flex;
		border-radius: 40rpx;
		background-color: #ee2f72;

		.nav-item {
			margin: 0 10rpx;
			text-align: center;
			flex: 1;
			color: #ffffff;
			font-size: 28rpx;
			margin: 10rpx;
			line-height: 60rpx;
		}

		.navC {
			background-color: #ffffff;
			color: #ee2f72;
			line-height: 60rpx;
			border-radius: 50rpx;
		}
	}

	.swiper-box,
	.tab-content,
	.scroll-y {
		height: calc(100vh - 44px);
	}

	.order-item {
		display: grid;
		margin-bottom: 20rpx;
	}

	.btn-box {
		border-top: 1px solid #f2f2f2;
		height: 100rpx;
		width: 100%;
		padding-right: 20rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.btn {
			margin-left: 10rpx;
			width: 144rpx;
			height: 55rpx;
			border: 1px solid #901b21;
			border-radius: 28rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #901b21;
			line-height: 55rpx;
			text-align: center;
		}

		.btn-look {
			margin-left: 10rpx;
			width: 144rpx;
			height: 55rpx;
			border: 1px solid #ebebeb;
			border-radius: 28rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 55rpx;
			text-align: center;
		}
	}

	.i-td {
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
		padding: 20rpx;
		color: #999999;
		font-size: 25rpx;

		.i-bottom {
			span {
				margin: 0 10rpx;

				b {
					font-size: 28rpx;
					color: #4f4f4f;
				}
			}
		}
	}

	.goods-box {
		height: 100%;
		display: flex;
		justify-content: space-between;
		background-color: #f7f7f7;
		padding: 20rpx;

		.goods-left {
			align-items: flex-start;

			.goods-img {
				width: 160rpx;
				height: 160rpx;
			}

			.goods-name {
				margin: 10rpx 40rpx;
				color: #666666;
				font-size: 30rpx;

				.p {
					max-width: 300rpx;
					margin-bottom: 10rpx;
				}

				.span {
					width: 120rpx;
					background-color: #ffeae5;
					color: #fd5b23;
					text-align: center;
					font-size: 24rpx;
					padding: 5rpx;
					border-radius: 5rpx;
				}
			}
		}

		.goods-price {
			margin: 10rpx 0;
			text-align: right;
			display: grid;
			color: #999999;
			font-size: 24rpx;
			position: relative;

			b {
				color: #901b21;
				font-size: 35rpx;
			}

			.num {
				position: absolute;
				bottom: 20rpx;
				right: 10rpx;
			}
		}
	}
}
</style>