mnsx/pages/cart/cart.vue

<template>
	<view class="container">
		<view class="bg">
			<image src="https://zccy.liuniu946.com/static/img/cart-bg.png" mode=""></image>
		</view>
		<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%;
	}

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

		.bg {
			position: absolute;
			top: 0;
			width: 0;
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

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

			.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: #901b21;
				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>