medicine-xcx/pages/my/order/index.vue

<template>
	<view>
		<u-sticky>
			<u-tabs :list="nav_list" :is-scroll="false" :current="status" @change="getInfo" bar-width="80" active-color="#01AEEA" font-size="34"></u-tabs>
		</u-sticky>
		<!-- 待收货 -->
		<view class="item" v-for="(item,index) in orderList" :key="item.id">
			<view class="time">
				<text class="time_text">{{item.createTime}}</text>
				<text class="phone" @click="call">{{nav_list[status].name}}</text>
			</view>
			<u-read-more :toggle="true" showHeight="900" color="#6C6C6C" textIndent="0" fontSize="24rpx" closeText="展开(共5件)" openText="收起">
				<view class="goods_item" v-for="item2 in item.orderDetailList" @click="toGoodsInfo(item2)">
					<image :src="item2.goodPic2" mode="widthFix"></image>
					<view class="right_box">
						<text class="title">{{item2.goodName}}</text>
						<text class="title" v-if="item2.prescriptionId!=null">【处方药】</text>
						<view class="center_box">
							<view class="money_box">
								<!-- <text class="min red"></text> -->
								<text class="bigs red" v-if="item.payFlag !== 2">￥{{item2.goodPrice}}</text>
								<text class="bigs red" v-else>{{item2.goodPrice}}兑购</text>
							</view>
							<text class="back_money" v-if="item2.couponPrice!==0 && item2.couponPrice">再返消费金￥{{item2.couponPrice}}</text>
							<text class="back_iconx">×{{item2.goodNum}}</text>
						</view>
						<text>{{item2.goodSku}}</text>
					</view>
				</view>
			</u-read-more>
			<!-- 0要显示  订单为消费金支付是不显示 -->
			<text class="sum_back_momey m-l-30" v-show="item.name !== '普通订单消费金支付'">总返消费金￥{{item.giveMoneySum}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.giveIntegerSum==0 ? '':'兑购金'+item.giveIntegerSum+"元"}}</text>
			<view class="total_box" v-if="item.payFlag == 2 && !!item.giveIntegerSum"> <!--item.payFlag 兑购支付为2 -->
				<text class="text_price">合计</text>
				<text class="price font-42">{{item.giveIntegerSum}}元</text>
				<text class="text_price">兑购金</text>
			</view>
			
			<view class="total_box" v-else-if="!!item.giveMoneySum" >
				
				<text class="text_price">合计</text>
				<text class="price font-42">￥{{item.payMoney}}</text>
			</view>
			
			<!-- 待付款的按钮 -->
			<view class="btn_box" v-if="orderList.length>0">
				<!-- 普通订单 -->
				<text class="order_name" v-if="item.name == '普通订单'">{{item.payFlag == 1? '普通订单消费金支付': '普通订单微信支付'}} </text>
				<text class="order_name" v-else>{{item.name}}</text>
				<view class="btn_order">
					<button v-if="status==0" class="gather cancel" @click="close(item.id,index)">取消订单</button>
					<button v-if="status==0" class="gather" @click="payMoney(item.id,index,item)">立即支付</button>
					<!-- 待发货的按钮 售后/退换的按钮 -->
					<button v-if="status==1 || status==3 || status==4" class="gather" @click="toDetails(item.id)">订单详情</button>
					<!-- 已完成的按钮 -->
					<button v-if="status==2" class="gather cancel" @click="toAfterSales(item.id,index)">申请售后</button>
					<button v-if="status==2" class="gather" @click="toConfirmOrderById(item.id,index)">确认收货</button>
				</view>
				
			</view>
		</view>
		
		<view class="empty_box" v-if="orderList.length==0">
			<image :src="IMG_URL+'empty.png'" alt=""></image>
			<text class="text_">暂无订单记录</text>
		</view>
		
	</view>
</template>

<script>
	import { IMG_URL } from '@/env.js'
	export default {
		data() {
			return {
				IMG_URL,
				status: null,
				pageNo: 1,
				pageSize: 10,
				total: null,
				isLock: true,
				nav_list: [
					{
						name: "待付款"
					},
					{
						name: "待发货"
					},
					{
						name: "待收货"
					},
					{
						name: "已完成"
					},
					{
						name: "售后/退换"
					}
				],
				orderList: []
			}
		},
		onUnload() {
			uni.switchTab({
				url: '/pages/my/my'
			})
		},
		onLoad(options) {
			this.status = options.status
			console.log(this.status)
			this.getUserOrder(this.status);
		},
		onPullDownRefresh() {
			this.orderList = [];
			this.pageNo = 1;
			this.total = null;
			this.isLock = true;
			this.getUserOrder(this.status)
		},
		onReachBottom() {
			if(this.isLock){
				this.isLock = false;
				if(this.total !== null && this.pageNo * this.pageSize >= this.total){
					this.$Toast('没有更多数据了哦！');
					setTimeout(()=>{
						this.isLock = true;
					},3000)
					return
				}
				this.pageNo+=1;
				this.getUserOrder(this.status);
			}
		},
		computed: {
			gridData () {
				return this.$store.state.gridData
			}
		},
		methods: {
			// 打电话
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success(res) {
						
					},
					fail(err) {
						
					}
				})
			},
			toGoodsInfo (item) {
				let idx = this.gridData.findIndex(obj => obj.id === item.bottonId)
				let key = idx > -1 ? this.gridData[idx].key : 'home'
				
				this.$tools.navigateTo({
					url: `/pagesC/goodsInfo/goodsInfo?id=${item.goodId}&type=${key}`
				})
			},
			// 详情
			toDetails(id) {
				uni.navigateTo({
					url: `./details/index?id=${id}&status=${this.status}`
				})
			},
			// 获取订单数据
			getUserOrder(type,pageSize) {
				uni.showLoading();
				const params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					type
				}
				this.$api('getOrderList',params).then(res => {
					let { code, result, message} = res;
					if(code == 200) {
						if(this.total == null) {
							this.total = result.total;
						}
						// 处理 图片
						result.records.forEach(item => {
							item.orderDetailList.forEach(item2 =>{
								item2.goodPic2 = item2.goodPic ==null ? '': item2.goodPic.split(',')[0]
							})
						})
						this.orderList = [];
						this.orderList = this.orderList.concat(result.records)
						console.log(result);
					}else {
						this.$Toast(message);
					}
					uni.hideLoading()
					uni.stopPullDownRefresh()
					this.isLock = true;
				}).catch(err => {
					uni.hideLoading()
					this.isLock = true;
					uni.stopPullDownRefresh()
					this.$Toast(err.message);
				})
			},
			// 取消订单
			close(id,index){
				const that = this
				uni.showModal({
					title: "确定取消该订单吗？",
					success(res) {
						if(res.confirm) {
							that.$api('deleteOrderById',{id}).then(res => {
								let { code, result, message} = res;
								if(code == 200) {
									that.$Toast(result);
									that.orderList.splice(index,1)
									// 删除该条数据
								}else {
									that.$Toast(message);
								}
							}).catch(err => {
								that.$Toast(err.message);
							})
						}else if(res.cancel){
							// this.$Toast('您取消了')
						}
					}
				})
			},
			// 立即支付
			payMoney(id,index,item){
				const that = this
				var type = item.payFlag
				if(this.orderList[index].name == '兑购订单') {
					this.payMoneyTeamCreateOrderPay(id,item.payFlag,item.addressId);
				}
				if(this.orderList[index].name == '拼团订单') {
					this.payMoneyTeamCreateOrderPay(id,item.payFlag,item.addressId);
				}else  {
					const that = this
					// 消费金支付
					uni.showActionSheet({
						itemList: ['微信支付', '消费金支付'],
						success: function (res) {
							if (res.tapIndex + 1 == 1) {
								// 微信支付
								that.ImmediatePayment(id,type,index)
							}else {
								that.ImmediatePayment(id,1,index)
							}
						},
						fail: function (res) {
							console.log(res.errMsg);
						}
					});
					
				}
				
			},
			// 立即支付
			ImmediatePayment(id,type,index) {
				const that = this
				that.$api('submitOrderById',{id,type}).then(res => {
					let { code, result, message} = res;
					if(code == 200) {
						// that.$Toast(result); type = 3  为兑购
						if(type==3) {
							that.$Toast(result);
						  that.orderList.splice(index,1);
						}else if(type == 1) {
							this.$Toast(result);
							that.orderList.splice(index,1);
						} else{
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: result.timeStamp,
								nonceStr: result.nonceStr,
								package: result.packageValue,
								signType: result.signType,
								paySign: result.paySign,
								success: res => {
									this.$Toast('支付成功');
									that.orderList.splice(index,1);
								},
								fail:error=>{
									this.$Toast('取消支付');
									this.getUserOrder(this.status);
								}
							})
						}
						
						// 删除该条数据
					}else {
						that.$Toast(message);
					}
				}).catch(err => {
					that.$Toast(err.message);
				})
			},
			
			payMoneyTeamCreateOrderPay(id,type,addressId){
				const that = this
				that.$api('teamCreateOrderPay',{id,type,addressId}).then(res => {
					let { code, result, message} = res;
					if(code == 200) {
						// that.$Toast(result);
						if(type==3) {
							that.$Toast(result);
							that.orderList.splice(index,1);
						}else{
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: result.timeStamp,
								nonceStr: result.nonceStr,
								package: result.packageValue,
								signType: result.signType,
								paySign: result.paySign,
								success: res => {
									this.$Toast('支付成功');
									that.orderList.splice(index,1);
								},
								fail:error=>{
									this.$Toast('取消支付')
								}
							})
						}
					}
				}).catch(err => {
						that.$Toast(err.message);
					})
			},
			// 确认收货
			toConfirmOrderById(id,index){
				const that = this
				uni.showModal({
					title: "确定该商品收货吗？",
					success(res) {
						if(res.confirm) {
							that.$api('confirmOrderById',{id}).then(res => {
								let { code, result, message} = res;
								if(code == 200) {
									that.$Toast(result);
									that.orderList.splice(index,1);
									// 删除该条数据
								}else {
									that.$Toast(message);
								}
							}).catch(err => {
								that.$Toast(err.message);
							})
						}else if(res.cancel){
							// this.$Toast('您取消了')
						}
					}
				})
			},
			// 申请售后
			toAfterSales(id,index){
				const that = this
				this.$tools.navigateTo({
					url: '/pagesA/my_other_list/after_sale_order/after_sale_order?id='+id 
				});
				
			},
			getInfo(e) {
				this.status = e;
				this.orderList = [];
				this.pageNo = 1;
				this.total = null;
				this.isLock = true;
				this.getUserOrder(this.status)
				console.log("获取新数据",e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.empty_box{
		width: 100%;
		height: 80vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image{
			width: 371rpx;
			height: 371rpx;
	
		}
		.text_{
			margin-top: 10rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #01AEEA;
		}
	}
 .item {
 	width: 711rpx;
 	margin: 0 auto;
	margin-top: 10rpx;
 	border-radius: 24rpx;
 	padding-bottom: 21rpx;
 	box-shadow: 0 3rpx 6rpx 0 rgba(0, 0, 0, 0.16);
 	
 	.time{
 		width: 648rpx;
 		margin: 0 auto;
		margin-top: 30rpx;
 		padding-top: 34rpx;
 		padding-bottom: 15rpx;
 		border-bottom: 1px solid rgba(112,112,112,0.2);
 		display: flex;
 		justify-content: space-between;
 		font-size: 36rpx;
 		.time_text {
 			color: #333;
 		}
 		.phone{
 			color: #333333;
 		}
 	}
 	.goods_item{
 		display: flex;
 		width: 648rpx;
 		margin: 0 auto;
 		margin-top: 22rpx;
 		padding-bottom: 26rpx;
 		border-bottom: 1px solid rgba(112,112,112,0.2);
 		&:last-child{
 			border-bottom: none;
 		}
 		image{
 			width: 200rpx;
 			height: 200rpx;
 			border-radius: 20rpx;
 		}
 		.right_box{
 			display: flex;
 			flex-direction: column;
 			font-size: 36rpx;
 			margin-left: 25rpx;
 			.title{
 				color: #000;
				width: 440rpx;
				font-size: 36rpx;
				line-height: 39rpx;
 			}
 			.center_box{
 				display: flex;
 				justify-content: space-between;
				align-items: center;
 				color: #01AEEA;
 				font-size: 36rpx;
 				.money_box{
 					.red{
 						color: #DB0618;
 					}
 					.min{
 						font-size: 20rpx;
 					}
 					.bigs{
 						font-size: 36rpx;
 					}
 				}
				.back_money{
					color: #fff;
					background-color: #FFA952;
					border-radius: 15rpx;
					height: 47rpx;
					line-height: 47rpx;
					box-sizing: border-box;
					font-size: 36rpx;
					padding-left: 15rpx;
					padding-right: 15rpx;
				}
				.back_iconx{
					font-size: 38rpx;
				}
 			}
 		}
 	}
	.sum_back_momey{
		height: 47rpx;
		line-height: 47rpx;
		border-radius: 10rpx;
		padding: 6rpx 14rpx;
		margin-right: 45rpx;
		color: #fff;
		background-color: #FFA952;
		font-size: 36rpx;
	}
 	.total_box{
 		display: flex;
 		width: 648rpx;
 		margin: 0 auto;
 		justify-content: flex-end;
 		font-size: 36rpx;
 		margin-top: 6rpx;
 		padding-bottom: 16rpx;
 		border-bottom: 1px solid rgba(112,112,112,0.2);
		
		.text_price{
			font-size: 34rpx;
		}
		.price{
			font-size: 36rpx;
			color: #DB0618;
		}
 		text{
 			&:last-child{
 			}
 		}
 	}
	.btn_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.order_name{
			margin-left: 30rpx;
			margin-top: 20rpx;
			font-size: 36rpx;
			width: 30%;
		}
		.btn_order{
			width: 70%;
			display: flex;
			height: 100%;
		}
		.gather{
			height: 60rpx;
			margin-top: 23rpx;
			margin-left: 0;
			margin-right: 21rpx;
			border: 1rpx solid #01AEEA;
			color: #01AEEA;
			font-size: 32rpx;
			border-radius: 30rpx;
			line-height: 60rpx;
		}
		.cancel{
			border: 1rpx solid #6C6C6C;
			font-size: 36rpx;
			color: #6C6C6C;
		}
	}
 	
 }
 
</style>