junzitang/pagesT/order/orderT.vue

<template>
	<view :class="['qn-page-' + theme]" style="height: 100vh">
		<view class="content">
			<view class="navbar">
				<view v-for="(item, index) in navList" :key="index" class="nav-item"
					:class="[tabCurrentIndex === index ? 'current' : '']" @click="tabClick(item, index)">
					{{ item.text }}
					<view class="current-line primary-btn"></view>
				</view>
			</view>

			<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
				<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
					<scroll-view @scrolltolower="scrollBootom" scroll-y="true" style="height:100%">
						<u-empty v-if="tabItem.list.length == 0" mode="list"></u-empty>
						<view v-for="(item, index) in tabItem.list" :key="index" class="order-item">
							<view class="clearfix order-no-view">
								<text class="float_left order-no-text">{{ $_utils.formatDate(item.createTime) }}</text>
								<text class="float_right order-status-text">
									{{
										tabCurrentIndex === 0
											? '待付款'
											: tabCurrentIndex === 1
											? '已支付'
											: tabCurrentIndex === 2
											? '已完成'
											: ''
									}}
								</text>
							</view>
							<view class="goods-ul" style="display: flex;">
								<block v-for="(it, gindex) in item.project" :key="gindex">
									<view class="goods-li clearfix" v-if="gindex <= 4" style="flex-shrink: 0;">
										<image class="goods-img float_left" :src="it.image" mode="aspectFill"></image>
									</view>
									<view class="" style="padding-left: 10rpx;">
										{{item.project[0].name}}
									</view>
								</block>
							</view>
							<view class="money-view">
								总价:￥{{ item.to_price || '0.00' }}
								<view class="price">
									实付款:
									<text style="font-size: 20rpx;">¥</text>
									<view style="display: inline-block;font-size: 32rpx;">
										<rich-text :nodes="$_utils.splitPrice(item.pay_price)"></rich-text>
									</view>
								</view>
							</view>
							<view class="middle clearfix">
								<!-- #ifdef APP-PLUS||MP-WEIXIN -->
								<view class="btnSAdd float_right primary-btn" @click="goPay(item)"
									v-if="item.paid == 0">
									去付款
								</view>
								<view class="btnSAdd float_right primary-btn" @click="goQx(item)"
									v-if="item.status == 0">
									取消预约
								</view>
								<view class="btnSAdd float_right primary-btn" @click="goPage('/pagesT/unit/evaluate?uid=' + item.uid + '&order_id=' + item.id)"
									v-if="item.status == 1 && !item.is_evaluate">
									去评价
								</view>
								<!-- #endif -->
							</view>
						</view>
						<u-loadmore margin-top="20" v-if="tabItem.list.length" :status="tabItem.loadingType" />
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<u-popup v-model="payPop" mode="bottom" :border-radius="12">
			<view class="pay-pop-view">
				<view class="pay-sel-title clearfix">
					<text class="float_left">付款方式</text>
					<text class="float_right ibonfont ibonguanbi" @click="closePayPop"></text>
				</view>
				<view class="pay-ul">
					<view class="pay-li"  @click="pay_type = 1">
						<text class="ibonfont ibonhuodaofukuan"></text>
						<view class="pay-name clearfix"
							:class="[order_detail.pay_price*1 > Number(userInfo.memberBalance) ? 'balance-pay-name' : '']">
							<view class="float_left">
								<text>余额</text>
								<text class="balace-num">（余额:¥{{ Number(userInfo.memberBalance) }}）</text>
							</view>
							<text  class="float_right ibonfont  ibonxuanze1" v-if="pay_type == 1"></text>
							<text  class="float_right ibonfont  ibonxuanze1" style="color: #CCCCCC;" v-else></text>
						</view>
					</view>
					<view class="pay-li" @click="pay_type = 2" v-if="order_detail.pay_price*1 > 0">
						<text class="ibonfont ibonweixinzhifu"></text>
						<view class="pay-name clearfix ">
							<view class="float_left">
								<text>微信</text>
							</view>
							<text class="float_right ibonfont ibonxuanze1" v-if="pay_type == 2"></text>
							<text class="float_right ibonfont ibonxuanze1" style="color: #CCCCCC;" v-else></text>
						</view>
					</view>
				</view>
				<view class="pay-btn primary-btn" @click="submit">
					<text>确定</text>
				</view>
			</view>
		</u-popup>
		<u-modal :show-cancel-button="true" :confirm-color="primaryColor" v-model="modal_show" :content="content"
			@confirm="confirmEdit" @cancel="cancelEdit"></u-modal>
	</view>
</template>

<script>
	import CancelOrder from './CancelOrder.vue';
	export default {
		components: {
			CancelOrder
		},
		data() {
			return {
				pay_type: 1,
				order_detail: {},
				payPop: false,
				qx_item: {},
				content: '请确认是否要取消预约',
				modal_show: false,
				order_id: 0,
				order_status: '',
				pay_status: '',
				cancel_show: false,
				orderList: [],
				tabCurrentIndex: 0,
				state: 1,
				loading_status: 'loadmore',
				navList: [{
						state: 1,
						text: '待付款',
						loadingType: 'loadmore',
						page: 1,
						pageSize: 10,
						list: [],
						loaded: false
					},
					{
						state: 2,
						text: '已支付',
						loadingType: 'loadmore',
						page: 1,
						pageSize: 10,
						list: [],
						loaded: false
					},
					{
						state: 3,
						text: '已完成',
						loadingType: 'loadmore',
						page: 1,
						pageSize: 10,
						list: [],
						loaded: false
					}
				],
				page: 1,
				pageSize: 10,
				pageTotal: 0,
				tmplIds: [],
				userInfo: {},
			};
		},
		computed: {
			// 是否在发货前可以取消订单
			// isCancelOrder() {
			// 	return this.$store.state.baseSet.cancelOrder || 5;
			// }
			// userInfo() {
			// 	return this.$store.state.userStatus;
			// }
		},
		onLoad(opt) {
			if(opt.state) {
				this.tabCurrentIndex = opt.state
			}
			// #ifdef MP-WEIXIN
			// this.getSettingDataByMessageId();
			// #endif
		},
		onShow() {
			// this.getOrderSelect();
			this.getCustomerInfo()
		},
		methods: {
			closeCancel() {
				this.cancel_show = false;
			},
			// 点击支付
			goPay(item) {
				this.order_detail = item
				this.payPop = true
			},
			submit() {
				//
				let that = this
				if(that.pay_type == 1 && (that.order_detail.pay_price*1 > that.userInfo.memberBalance*1)) {
					return that.$u.toast('抱歉，您的可用余额不足');
				}
				that.$u.api.itemPayment({
					"id": that.order_detail.id, 
					"pay_type": that.pay_type, //1余额2微信3支付宝
					"source": that.pay_type == 2 ? 3: '',
				}).then(({data})=> {
					// 余额支付
					if(that.pay_type == 1) {
						console.log(data)
						if(data == '支付成功' || data.data == '支付成功') {
							that.payPop = false
							uni.showToast({
								title: '支付成功'
							});
							that.getOrderSelect('reload');
							that.getCustomerInfo()
						}
					}
					// 微信支付
					if(that.pay_type == 2) {
						// data.data
						let payInfo = data.data
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: payInfo.timeStamp, //当前时间
							nonceStr: payInfo.nonceStr, //随机字符串，长度在32一下
							package: payInfo.package, //统一单接口返回的prepay_id
							signType: payInfo.signType, //签名算法，目前支持MD5
							paySign: payInfo.paySign, //签名
							success: res => {
								uni.showToast({
									title: '支付成功'
								});
								that.payPop = false
								that.getOrderSelect('reload');
								that.getCustomerInfo()
							},
							fail: async err => {
								that.payPop = false
								that.$u.toast('支付失败');
								that.getOrderSelect('reload');
								that.getCustomerInfo()
							}
						});
						// #endif
					}
				})
			},
			goQx(item) {
				this.qx_item = item;
				this.modal_show = true
			},
			confirmEdit() {
				this.$u.api.itemCancel({
					id: this.qx_item.id
				}).then(res => {
					this.getOrderSelect('reload');
				})
				this.modal_show = false
			},
			cancelEdit() {
				this.qx_item = {}
				this.modal_show = false
			},
			scrollBootom() {
				this.getOrderSelect()
			},
			// 获取订单列表
			getOrderSelect(type) {
				let that = this
				let item = that.navList[that.tabCurrentIndex]
				if (type == 'reload' || type == 'tab') {
					item.loadingType = 'loadmore'
					item.list = []
					item.page = 1
				}
				// if (type == 'tab' && item.loaded) {
				// 	return
				// }
				if (item.loadingType == 'loading' || item.loadingType == 'nomore') {
					return
				}
				item.loadingType = 'loading'
				this.$u.api
					.getMyItem({
						page: item.page,
						pageSize: item.pageSize,
						name: '',
						type: item.state
					})
					.then(({data}) => {
						item.list = item.list.concat(data)
						item.page++
						if (item.pageSize == data.length) {
							item.loadingType = 'loadmore'
						} else {
							item.loadingType = 'nomore'
						}
						item.loaded = true
					});
			},
			//swiper 切换
			changeTab(e) {
				console.log('swiper拿去数据')
				this.tabCurrentIndex = e.target.current;
				this.getOrderSelect('tab');
			},
			//顶部tab点击
			tabClick(item, index) {
				this.tabCurrentIndex = index;
				// this.getOrderSelect('tab');
				// this.getOrderSelect()
			},
			// 获取用户信息
			getCustomerInfo() {
				this.$u.api.getCustomerInfo().then(({ data }) => {
					this.userInfo = data;
					this.$store.commit('commit_userStatus', data);
				});
			},
			// 获取消息模版ID 后台取消订单， 退款通知
			// getSettingDataByMessageId() {
			// 	this.$u.api
			// 		.getSettingDataByMessageId({
			// 			id: [5, 7]
			// 		})
			// 		.then(res => {
			// 			if (res.data.length > 0) {
			// 				this.tmplIds = res.data.map(item => {
			// 					return item.weixinTemplateId;
			// 				});
			// 			}
			// 		});
			// }
		}
	};
</script>

<style lang="scss">
	.order-item {
		margin: 24upx 0;
		padding-bottom: 24rpx;
		background-color: #fff;

		.order-no-view {
			font-size: 24upx;
			padding: 24upx 30upx;
			color: #666;
			font-weight: 300;
			border-bottom: 1upx solid #eee;

			.order-status-text {
				font-weight: 500;
			}
		}

		.goods-li:last-child {
			margin-bottom: 0;
		}

		.goods-ul {
			padding: 20rpx 10rpx 0;

			.goods-li {
				margin: 0 10rpx;
				display: inline-block;
				text-align: center;
				line-height: 100rpx;
				background: #eeeeee;
				border-radius: 16rpx;
				overflow: hidden;
				width: 100upx;
				height: 100upx;

				.goods-img {
					width: 100%;
					height: 100%;
				}

				position: relative;

				.buyNum {
					position: absolute;
					font-size: 20rpx;
					color: #ffffff;
					line-height: 32rpx;
					background-color: rgba($color: #000000, $alpha: 0.6);
					padding: 0 10rpx;
					right: 0;
					bottom: 0;
				}
			}
		}

		.goods-li {
			// background: #fafafa;
			// padding: 30upx 20upx;
			// margin-bottom: 20upx;
			// margin-right: 10rpx;

			.goods-right {
				width: 500upx;
				margin-left: 20upx;

				.goods-name {
					color: #333;
					font-size: 32upx;
					margin-bottom: 19upx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					line-clamp: 1;
					-webkit-box-orient: vertical;
				}

				.goods-descrip {
					font-size: 22upx;
					color: #999;
					margin-bottom: 28upx;
					// font-weight: 300;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					line-clamp: 1;
					-webkit-box-orient: vertical;
				}

				.goods-price {
					.price {
						color: $price-color;
						font-size: 40upx;
					}

					.sku {
						font-size: 22upx;
						font-weight: 300;
						color: #666;
					}

					.float_right {
						font-size: 24upx;
					}
				}
			}
		}
	}

	.money-view {
		color: #666666;
		text-align: right;
		font-size: 24upx;
		padding: 24upx 30upx;

		.price {
			font-size: 24upx;
			font-weight: bold;
			color: #000000;
			margin-left: 10rpx;
			display: inline-block;
		}
	}

	.middle {
		font-size: 24upx;
		position: relative;
		padding: 0 30upx;
	}

	.btnS {
		padding: 0 20upx;
		line-height: 50upx;
		color: #6e6e6e;
		font-size: 24upx;
		text-align: center;
		margin-left: 20upx;
		height: 50upx;
		background: rgba(241, 241, 241, 1);
		// box-shadow: 0px 2upx 14upx 0px rgba(0, 0, 0, 0.1);
		border-radius: 8upx;
	}

	.btnSAdd {
		padding: 0 20upx;
		line-height: 50upx;
		color: #ffffff;
		font-size: 24upx;
		text-align: center;
		height: 50upx;
		border-radius: 8upx;
		margin-left: 20rpx;
	}

	.content {
		background: $page-color-base;
		height: 100vh;
	}

	.swiper-box {
		height: calc(100% - 80upx);
	}

	.list-scroll-content {
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 88upx;
		background: #fff;
		position: relative;
		z-index: 10;
		border-bottom: 1upx solid #eee;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 28upx;
			color: #666666;
			position: relative;
			font-weight: 300;

			&.current {
				font-weight: 500;

				.current-line {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 10upx;
					transform: translateX(-50%);
					width: 40upx;
					height: 6upx;
					background: $base-btn-bg;
					border-radius: 6upx;
					/*border-bottom: 2px solid #F53C28;*/
				}
			}
		}
	}
	.pay-pop-view {
		background-color: #ffffff;
		border-top-left-radius: 12upx;
		border-top-right-radius: 12upx;
		font-size: 28upx;
	
		.pay-sel-title {
			padding: 0 30upx;
			line-height: 88upx;
			font-weight: bold;
			font-size: 32upx;
	
			.ibonfont {
				color: #999;
				font-weight: 400;
			}
		}
	
		.pay-btn {
			height: 90upx;
			line-height: 90upx;
			color: #000;
			font-size: 32upx;
			text-align: center;
			background-color: #108ee9;
		}
	
		.pay-ul {
			.pay-li {
				line-height: 100upx;
	
				.ibonfont {
					padding-left: 30upx;
					font-size: 46upx;
					vertical-align: middle;
					margin-right: 24upx;
				}
	
				.ibonweixinzhifu {
					color: #04be02;
				}
	
				.ibonumidd17 {
					color: #108ee9;
				}
	
				.ibonhuodaofukuan {
					color: #f2b844;
				}
	
				.pay-name {
					width: 650upx;
					display: inline-block;
					padding-right: 30upx;
					vertical-align: middle;
					border-bottom: 1px solid #f5f5f5;
	
					.ibonxuanze1,
					.ibonweixuanze {
						margin-right: 0;
						padding-left: 0;
						font-size: 38upx;
					}
	
					.balace-num {
						font-size: 24rpx;
						color: #6c6c6c;
					}
				}
	
				.balance-pay-name {
					position: relative;
					padding-bottom: 20rpx;
	
					.balance-tip {
						position: absolute;
						font-size: 22rpx;
						line-height: 36rpx;
						bottom: 10rpx;
						left: 0;
					}
				}
			}
		}
	}
</style>