lingfeng-c/src/packages/order/order-list.vue

<template>
	<view class="container">
		<Navbar title="订单" background-color="#fff" color="#333333"></Navbar>
		<view class="tabs">
			<view class="tab" :class="{active: item.value === active}" v-for="item in tabList"
				@click="changeTab(item.value)" :key="item.value">
				{{item.name}}
				<view class="bar"></view>
			</view>
		</view>
		<view class="no-data" v-if="!currentList.length">
			<NoData :show="!currentList.length" topNum="30" imgUrl="no-data.png" title="您还没有相关订单!"></NoData>
		</view>
		<view class="order-list">
			<view v-for="(item, i) in currentList" :key="i" class="order-item" @click="toDetail('normal', item.oid)">
				<view class="order-wrap">
					<view class="order-between">
						<text class="oid">订单号：{{ item.oid }}</text>
						<text class="status">{{ statusMap[item.status]}}</text>
					</view>
					<OrderItem :sku="item.skuList" :total="item.payment"></OrderItem>
					<view class="total">共{{item.skuList | numFormat}}件 合计：<text>￥{{ item.payment | moneyFormat }}</text>
					</view>
					<view class="btn-box" v-if="item.status === 2">
						<view class="btn btn2" @click.stop="cancelOrderModal(item.oid)">取消订单</view>
						<view class="btn" @click.stop="payPop(item)">付款</view>
					</view>
					<view class="btn-box" v-if="item.status === 8">
						<view class="btn btn2" @click.stop="handleRemind">提醒发货</view>
					</view>
					<view class="btn-box" v-if="item.status === 16">
						<!-- <view class="btn btn2" @click.stop="tologistics(item.oid)">查看物流</view> -->
						<view class="btn" @click.stop="confirmOrderModal(item.oid)">确认收货</view>
					</view>
				</view>
			</view>
			<view class="tips" v-if="currentList.length">
				<text v-if="finish[active]">没有更多了</text>
				<text v-else>加载更多</text>
			</view>
		</view>
		<uni-popup ref="payPopup" :safe-area="false">
			<view class="select-pay-type" @click.stop>
				<view class="title">选择支付方式</view>
				<view class="amount">{{payInfo.payment | moneyFormat}}元</view>
				<view class="time-tip">页面有效期10分钟</view>
				<view class="pay-item-box">
					<view class="pay-item" @click="selectPayType('wxPayMini')">
						<view class="item-left">
							<IconText :code="`\ue761`" color="#40BA49" class="icon" size="20"></IconText>
							微信支付
						</view>
						<view class="item-right">
							<IconText :code="`\ue77a`" :color="payType === 'wxPayMini' ? '#E32733' : '#DEDEDE'"
								class="icon" size="16">
							</IconText>
						</view>
					</view>
					<!-- <view class="pay-item" @click="selectPayType('aliPayApp')">
						<view class="item-left">
							<IconText :code="`\ue760`" color="#06B4FD" class="icon" size="20"></IconText>
							支付宝支付
						</view>
						<view class="item-right">
							<IconText :code="`\ue77a`" :color="payType === 'aliPayApp' ? '#E32733' : '#DEDEDE'"
								class="icon" size="16">
							</IconText>
						</view>
					</view>
					<view class="pay-item" @click="selectPayType('balance')">
						<view class="item-left">
							<IconText :code="`\ue747`" color="#E6456A" class="icon" size="16"></IconText>
							余额支付(余额:{{balanceInfo.balance | moneyFormat}})
						</view>
						<view class="item-right">
							<IconText :code="`\ue77a`" :color="payType === 'balance' ? '#E32733' : '#DEDEDE'"
								class="icon" size="16"></IconText>
						</view>
					</view> -->
				</view>
				<view class="popup-btn-box">
					<!-- <view class="cancel-btn btn" @click="closePay">取消</view> -->
					<view class="confirm-btn btn" @click="selectType">支付</view>
				</view>
			</view>
		</uni-popup>
		<Password ref="password" @finish="passwordFinish"></Password>
		<ShowModal ref="cancelOrder" title="提示" @submit="cancelOrder" leftBtnText="取消" content="确定要取消该订单吗"
			btnText="确认" />
		<ShowModal ref="confirmOrder" title="提示" @submit="confirmOrder" leftBtnText="取消" content="是否确定收货"
			btnText="确认" />
		<!-- <TabBar></TabBar> -->
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Vue,
	} from 'vue-property-decorator';
	// import {
	// 	APPID
	// } from '@/common/constants';
	import {
		types
	} from '@/common/store';
	import {
		namespace
	} from 'vuex-class';
	const baseModule = namespace('base');
	@Component({
		filters: {
			moneyFormat(val: any) {
				if (!+val) return '0.00';
				return (+val).toFixed(2);
			},
			numFormat(list: any) {
				return list.reduce((pre: any, cur: any) => {
					return pre + cur.num
				}, 0);
			}
		}
	})
	export default class OrderList extends Vue {
		@baseModule.Mutation(types.SET_TABBARINDEX) setTabBarIndex: any;
		tabList: any = [{
				name: '全部',
				value: 0
			},
			{
				name: '待付款',
				value: 2
			},
			{
				name: '待发货',
				value: 8
			},
			{
				name: '待收货',
				value: 16
			},
			{
				name: '已收货',
				value: 18
			}
		];
		statusMap: any = {
			2: '待付款',
			8: '待发货',
			16: '待收货',
			18: '已收货'
		};
		active: number = 0; // tab栏选中index
		size: number = 20;
		currentList: any[] = [];
		orderList: any = {
			0: [],
			2: [],
			8: [],
			16: [],
			18: []
		};
		page: any = {
			0: 1,
			2: 1,
			8: 1,
			16: 1,
			18: 1
		};
		isfirst: boolean = false;
		isLoading: boolean = false;
		finish: any = {
			0: false,
			2: false,
			8: false,
			16: false,
			18: false
		}; // 数据到底
		isGet: boolean = true; // 是否可以拉去数据
		oid: any = null;
		payType: string = 'wxPayMini';
		payInfo: any = {};
		balanceInfo: any = {};
		providerMap: any = {
			wxPayMini: 'wxpay',
			aliPayApp: 'alipay'
		}

		onLoad() {
			// let query = this.$Route.query;
			// this.active = +query.status || 0;
			// this.pullList();
		}
		onShow() {
			// if (this.isfirst) {
			// 	this.updateData()
			// } else {
			// 	this.isfirst = true
			// }
			//tabBar下标更改
			// this.setTabBarIndex(3);
			let query = this.$Route.query;
			this.active = +query.status || 0;
			this.resetData();
		}

		resetData() {
			console.log('reset');
			this.page = {
				0: 1,
				2: 1,
				8: 1,
				16: 1,
				18: 1
			};
			this.finish = {
				0: false,
				2: false,
				8: false,
				16: false,
				18: false
			};
			this.isGet = true;
			this.orderList = {
				0: [],
				2: [],
				8: [],
				16: [],
				18: []
			};
			this.currentList = []
			this.getList();
		};
		pullList() {
			this.getList();
		}

		changeTab(index: number) {
			// 如果请求未结束，禁止切换
			if (!this.isGet) {
				return false;
			}
			this.active = index;
			this.currentList = this.orderList[this.active]
			// 如果切换时未获取过数据，获取一次
			if (this.page[this.active] == 1) {
				this.pullList();
			}
		}
		onReachBottom() {
			this.getList();
		}
		updateData() {
			console.log('更新');
			this.page[this.active] = 1;
			this.finish[this.active] = false;
			this.isGet = true;
			this.orderList[this.active] = [];
			this.currentList = this.orderList[this.active]
			this.getList();
		}
		getList(): void | boolean {
			console.log('已更新数据');
			if (this.finish[this.active] || !this.isGet) {
				// 已经没有更多了或者上次请求未结束
				return false;
			}
			this.isGet = false;
			let data = {
				page: this.page[this.active],
				size: this.size,
				status: this.active,
			};
			// if (this.active == 0) {
			// 	delete data.status;
			// }
			uni.showLoading({
				title: '加载中'
			});
			this.isLoading = true;
			this.$http
				.get({
					url: this.$api.orderList,
					data: data
				})
				.then((res: any) => {
					res.list = res.list || [];
					uni.hideLoading();
					this.isLoading = false;
					if (this.page[this.active] == 1) {
						this.orderList[this.active] = [];
						this.currentList = this.orderList[this.active]
					}
					this.orderList[this.active].push(...res.list);
					this.currentList = this.orderList[this.active]
					console.log('真正拉数据', this.currentList)
					this.page[this.active]++;
					this.isGet = true;
					// 没有更多了
					if (res.list.length < this.size) {
						this.finish[this.active] = true;
					}
				})
				.catch((err: any) => {
					uni.hideLoading();
					this.isLoading = false;
					console.log(err);
				});
		}
		toDetail(type: string, id: number): void {
			this.$Router.push({
				path: '/packages/order/order-detail',
				query: {
					id: id
				}
			});
		}
		async payPop(info: any) {
			this.payInfo = info;
			// await this.getBalance();
			(this.$refs.payPopup as any).open('bottom');
		}
		
		getBalance() {
			uni.showLoading({
				title: '加载中'
			});
			return this.$http
				.get({
					url: this.$api.getBalance
				})
				.then((res: any) => {
					this.balanceInfo = res;
					uni.hideLoading();
				}, (err: any) => {
					console.log(err);
					uni.hideLoading();
				});
		}
		
		closePop(){
			(this.$refs.payPopup as any).close();
		}
		selectPayType(type: any) {
			this.payType = type;
		}
		passwordFinish(val: any) {
			this.getParmas(val);
		}
		selectType() {
			if (this.payType === 'wxPayMini' || this.payType === 'aliPayApp') {
				this.getParmas()
				return;
			};
			// if (this.payType === 'balance')(this.$refs.password as any).open();
			if (this.payType === 'balance') {
				if(!this.balanceInfo.setSafe){
					uni.showToast({
						title:"请设置支付密码",
						icon: 'none'
					})
					return;
				}
				(this.$refs.password as any).open();
			};
		}
		async getParmas(safe: any = {}) {
			let info = this.payInfo;
			// 拉取支付参数
			// this.canSubmit = false;
			uni.showLoading({
				title: '加载中'
			});
			let eve: any = {};
			// #ifdef MP-WEIXIN
			if (this.payType === 'wxPayMini') eve = await this.getCode();
			// #endif
			let mode = this.payType;
			// #ifdef APP-PLUS
			if (this.payType === 'wxPayMini') mode = 'wxPayApp';
			// #endif
			this.$http
				.post({
					url: this.$api.getPayParmas,
					data: {
						payBill: {
							// id: info.payBillId, //支付票据ID
							amount: info.payment, //支付金额
							oid: info.oid,
							payType: 2, //支付类型:2,订单支付;
							mode: mode
						},
						third: {
							code: eve.code,
						},
						safe: safe
					}
				})
				.then((res: any) => {
					if (this.payType === 'wxPayMini' || this.payType === 'aliPayApp') {
						this.moneyPay(res, info);
					} else {
						// this.canSubmit = true;
						// this.payBillId = null;
						uni.showToast({
							title: '支付成功！',
							icon: 'none',
							duration: 2000
						});
						this.$Router.replace({
							path: '/packages/order/pay-success',
							query: {
								oid: info.oid,
								payment: info.payment
							}
						});
					}
					uni.hideLoading();
				})
				.catch((err: any) => {
					console.log(err);
					// this.canSubmit = true;
					uni.hideLoading();
				});
		}
		getCode() {
			return new Promise((resolve: any, reject: any) => {
				uni.login({
					provider: 'weixin',
					success: (eve) => {
						resolve(eve);
					},
					fail: (err) => {
						console.log(err);
						reject();
						// this.canSubmit = true;
					}
				});
			})
		}
		moneyPay(pay_info: any, info: any): any {
			// 拉起微信支付
			let that: any = this;
			let option = {};
			// #ifdef MP-WEIXIN
			option = {
				timeStamp: pay_info.timeStamp,
				nonceStr: pay_info.nonceStr,
				package: pay_info.package,
				signType: pay_info.signType,
				paySign: pay_info.paySign,
			};
			// #endif
			// #ifdef APP-PLUS
			option = {
				appid: pay_info.appId,
				partnerid: pay_info.partnerid,
				prepayid: pay_info.prepay_id,
				sign: pay_info.paySign,
				timestamp: pay_info.timeStamp,
				noncestr: pay_info.nonceStr,
				package: pay_info.package,
			};
			// #endif
			let orderInfo: any = JSON.stringify(option);
			if (this.payType === 'aliPayApp') orderInfo = this.objToCookie(pay_info);
			// console.log(JSON.stringify(option), 121231)
			uni.requestPayment({
				"provider": this.providerMap[this.payType],
				...option,
				"orderInfo": orderInfo,
				success: function(result) {
					console.log('微信回调', result);
					if (result.errMsg == 'requestPayment:ok') {
						that.payBillId = null;
						// that.canSubmit = true;
						uni.showToast({
							title: '支付成功！',
							icon: 'none',
							duration: 2000
						});
						that.$Router.replace({
							path: '/packages/order/pay-success',
							query: {
								oid: info.oid,
								payment: info.payment
							}
						});
					} else {
						// that.canSubmit = true;
					}
				},
				fail: function(err: any) {
					console.log('微信支付失败', err);
					// that.canSubmit = true;
				}
			});
		}
		objToCookie(obj: any) {
			{
				if (obj.constructor == Object) {
					var cssStr = '';
					for (var key in obj) {
						cssStr += key + '=' + encodeURIComponent(obj[key]) + '&';
					}
					return cssStr.substring(0, cssStr.length - 1);
				}
			}
		}
		cancelOrderModal(oid: any) {
			this.oid = oid;
			(this.$refs.cancelOrder as any).open();
		}
		cancelOrder() {
			this.$http
				.put({
					url: this.$api.cancelOrder,
					data: {
						oid: this.oid
					}
				})
				.then((res: any) => {
					uni.showToast({
						title: '取消成功',
						icon: 'none'
					});
					this.resetData();
				})
		}
		tologistics(oid: any) {
			this.$Router.push({
				path: '/packages/order/logistics',
				query: {
					oid
				}
			});
		}
		confirmOrderModal(oid: any) {
			this.oid = oid;
			(this.$refs.confirmOrder as any).open();
		}
		confirmOrder() {
			this.$http
				.post({
					url: this.$api.confirmOrder,
					data: {
						oid: this.oid
					}
				})
				.then((res: any) => {
					uni.showToast({
						title: '已确认收货',
						icon: 'none'
					});
					this.resetData();
				})
		}
		handleRemind() {
			uni.showToast({
				title: '发货提醒已发送至商家',
				icon: 'none'
			});
		}
		closePay() {
			this.$http
				.post({
					url: this.$api.closePay,
					data: {
						// id: this.payBillId //支付票据ID
					}
				})
				.then((res: any) => {
					// this.canSubmit = true;
					uni.showToast({
						title: '支付失败！',
						icon: 'none',
						duration: 2000
					});
				})
				.catch((err: any) => {
					// this.canSubmit = true;
				});
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding-bottom: vw(80);
	}
	.word16 {
		@include word-vw(16, $gray9);
	}

	.word18 {
		@include word-vw(18, $gray3);
		font-weight: bold;
	}

	.word12 {
		@include word-vw(12, $gray9);
	}

	.noData {
		width: 100vw;
		margin-top: vw(90);
		@include flex-y(center, center);

		.image {
			width: vw(150);
		}

		.word16 {
			margin-left: vw(20);
		}
	}

	.tabs {
		background: #fff;
		@include flex-x();
		height: vw(40);
		width: 100%;
		margin-top: vw(1);

		.tab {
			flex: 1;
			text-align: center;
			@include word-vw(12, #999);
			height: vw(40);
			@include flex-y(center, center);

			&.active {
				@include word-vw(12, #333);
				font-weight: 450;
				position: relative;

				.bar {
					width: vw(25);
					height: vw(3);
					border-radius: vw(3);
					background: $btn-color;
					position: absolute;
					bottom: vw(3);
				}
			}
		}
	}

	.tips {
		width: 100vw;
		text-align: center;
		@include word-vw(12, $gray9);
		margin-top: 10px;
	}

	.order-list {
		width: 100%;
		@include flex-y();
		margin-bottom: vw(10);

		.order-item {
			margin-top: vw(10);
		}

		.order-wrap {
			width: 100%;

			.order-between {
				@include flex-x();
				padding: 0 vw(15);
				box-sizing: border-box;
				height: vw(40);
				background: #fff;
				// border-bottom: vw(1) solid #F1EDED;
			}

			.oid {
				flex: 4;
				box-sizing: border-box;
				@include word-vw(12);
			}

			.status {
				box-sizing: border-box;
				@include word-vw(14, #D6392D);
				padding: 0 vw(3);
				height: vw(18);
				line-height: vw(20);
				// border-bottom: 2px solid $btn-color;
				// font-weight: bold;
			}

			.oid-refund {
				flex: 3;
				padding: vw(15);
				box-sizing: border-box;
				text-align: right;
				@include word-vw(12, $gray9);
			}

			.status-red {
				flex: 2;
				text-align: left;
				padding: vw(15);
				box-sizing: border-box;
				@include word-vw(14, $main-color);
			}

			.total {
				width: 100%;
				height: vw(40);
				text-align: right;
				padding: 0 vw(15);
				box-sizing: border-box;
				@include flex-x(flex-end);
				background: #fff;
				@include word-vw(14, #999);

				text {
					@include word-vw(16, #333);
				}
			}

			.btn-box {
				height: vw(50);
				@include flex-x(flex-end);
				width: 100%;
				padding: 0 vw(15);
				box-sizing: border-box;
				background: #fff;
				border-top: vw(1) solid #F1EDED;

				.btn {
					height: vw(30);
					width: vw(90);
					line-height: vw(30);
					@include word-vw(12, #fff);
					background: $btn-color;
					border-radius: vw(15);
					margin-left: vw(10);
					text-align: center;
					box-sizing: border-box;
				}

				.btn2 {
					color: #333;
					border: vw(1) solid #BF2071;
					background: #FFEBF1;
				}
			}
		}
	}

	.select-pay-type {
		background: #FAFAFA;
		border-top-right-radius: vw(34);
		border-top-left-radius: vw(34);
		overflow: hidden;
		padding: vw(20) vw(10);
		box-sizing: border-box;
		@include flex-y();
	
		.title {
			@include word-vw(18, #333);
			font-weight: bold;
		}
	
		.time-tip {
			@include word-vw(10, #999);
			margin-top: vw(5);
		}
	
		.amount {
			@include word-vw(40, #000);
			font-weight: 450;
			margin-top: vw(20);
		}
	
		.price {
			@include word-vw(14, #999);
			margin-top: vw(3);
		}
	
		.pay-item-box {
			border-radius: vw(10);
			overflow: hidden;
			width: 100%;
			margin-top: vw(36);
		}
	
		.pay-item {
			background: #fff;
			// margin-bottom: vw(10);
			height: vw(70);
			line-height: vw(70);
			padding: 0 vw(18);
			// border-radius: vw(10);
			@include word-vw(16, #333);
			@include flex-x();
			overflow: hidden;
			margin-bottom: vw(1);
	
			.item-left {
				@include flex-x(flex-start);
			}
	
			.icon {
				margin-right: vw(10);
			}
	
			.item-right {
				.icon {
					margin: 0;
				}
			}
		}
	
		.popup-btn-box {
			width: 100%;
			@include flex-x();
			margin-top: vw(20);
			
			.btn {
				font-weight: bold;
				border-radius: vw(24);
				height: vw(48);
				@include flex-x(center);
			}
			
			.cancel-btn {
				width: vw(127);
				background: #fff;
				@include word-vw(16, $btn-color);
			
			}
			
			.confirm-btn {
				width: vw(355);
				background: $btn-color;
				@include word-vw(16, #fff);
			}
		}
	}
</style>