yicangzongtai_app_240321/pages/order/gbOrder/gbOrderList.vue

<template>
	<view class="container">
		<navbar :config="config" backColor="#666"></navbar>
		<view class="topview" :style="{ top: tabTop + 'px' }">
			<!--订单类型选择-->
			<scroll-view scroll-x="true" class="scrollbox">
				<view class="order-type u-flex-center">
					<view class="type-name u-font26 u-181818" :class="{ active: isChange == index }"
						v-for="(item, index) in orderType" :key="index" @click="clickBtn(index)">
						{{ item }}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="plrbottom">
			<!--订单列表-->
			<view class="order-list" v-for="item in orderList" :key="item.id">
				<view class="u-bg-fff order-item" @click="goGbOrderDetails(item)">
					<view class="u-shop-teile-pd">
						<view class="u-text1 viewWidthTitle">
							<text class="iconfont2 u-font34 u-bold " style="color: #FA6138;">&#xe611;</text>
							<text class="u-1A1A1A u-font30 u-ml15">{{ item.shop_name }}</text>
							<text class="u-CCC right-icon iconfont">&#xe6c7;</text>
						</view>

						<text class="u-FF0000 u-font28" v-if="item.pay_status == 0">待付款</text>

						<text class="u-FF0000 u-font28" v-if="
                item.pay_status == 5 && (item.status == 0 || item.status == 1)
              ">待成团</text>
						<text class="u-FF0000 u-font28" v-if="item.pay_status == 5 && item.status == 2">组团成功</text>
						<text class="u-FF0000 u-font28" v-if="item.status == 3 || item.status == 4">组团失败</text>
					</view>

					<view class="u-border-one-one"></view>
					<view v-if="orderList.length>0">
						<!-- <ldgoods :value="item" :isGroup="true" @click.native="goProductDetails(item)"></ldgoods> -->
					
							
						
						<view class="details-top">
							<view class="details-left">
								<image :src="item.goods_cover"  v-if="item.goods_cover" class="u-goods200 u-ml15" mode=""></image>
								<image :src="item.goods_img" v-if="item.goods_img" class="u-goods200 u-ml15" mode=""></image>
							</view>
							<view class="details-right">
								<view class="right-top">
									{{item.goods_title}}
								</view>
								<view class="specifications">
									规格：{{item.sku_set_name}}
								</view>
								<view class="amount-of-money">
									<view style="font-size: 26rpx;" v-if="item.real_price%1===0">
										￥{{item.real_price}}.00
									</view>
									<view style="font-size: 26rpx;" v-else>
										￥{{item.real_price}}0
									</view>
									<text class="group">{{item.group_people_num}}人拼</text>
								</view>
							</view>
						</view>
						
						
						
						<view class="u-text-right u-plr30 u-mt20">

							<view class="u-flex" style="justify-content: flex-end;">
								<view class="u-text-right">
									共{{item.number}}件商品, 总金额
								</view>
								<view class="u-FF0000">
								 <rich-text :nodes="$mUtil.priceBigSmall(item.total_amount)"></rich-text>
								 </view>
								 <text v-if="item.total_point>0">，总积分：{{item.total_point}}</text>
							</view>
							
							
							<view class="u-mt10">含运费￥{{ item.real_freight }}</view>
							<view class="u-flex-column-end u-mt30">
								<view class="u-flex">
									<!--去付款-->
									<view class="u-flex-center">
										<view v-if="item.pay_status == 0"> <text class="iconfont">&#xe681;</text> 支付剩余（{{item|dateFilter}})</view>
										<view class="btn-item u-text-center u-FF0000 br-FF0000"
											v-if="item.pay_status == 0" @click="goGbOrderDetails(item)">去付款</view>
										<view class="btn-item u-text-center u-060606 br-999" v-if="item.pay_status!=0"
											@click="goGbOrderDetails(item)">查看详情</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<loadMore v-if="orderList.length>0" :status="status"></loadMore>
			<nodata v-else :config="{ top: 15, content: '暂无订单~' }"></nodata>
		</view>
		<!--页面加载动画-->
		<ldLoading isFullScreen :active="loading"></ldLoading>
	</view>
</template>

<script>
	import ldgoodsbalck from "../../../components/ld-goods/ld-goods-black.vue";
	import ldgoods from "../../../components/ld-goods/ld-goods.vue";
	import ldshop from "../../../components/ld-shop/ld-shop.vue";
	import loadMore from "../../../components/uni-load-more/uni-load-more.vue"
	var app = getApp();
		let vObj
	export default {
		components: {
			ldgoodsbalck,
			ldgoods,
			ldshop,
		},
		beforeCreate() {
			vObj = this
		},
		data() {
			return {
				list: 1,
				config: {
					back: true, //false是tolbar页面 是则不写
					title: "全部订单",
					color: "#1a1a1a",
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: "#1A1A1A",
					backPage: '/pages/index/personal'
					// backTabPage: '/pages/index/personal'
				},
				isChange: 0,
				timeCount:0,
				timer:null,
				orderType: ["全部订单", "待付款", "待成团", "组团成功", "组团失败"],
				shopStatus: true, //发货状态
				loading: true,
				orderList: [], //全部订单，待支付
				orderListOther: [], //待发货,待收货,待评价
				orderListblack: [],
				status: "more", //more|loading|noMore
				noData: false,
				parmas: {
					page: 1,
					limit: 10,
				},

				orderid: null,
				currentKey: null,
				tabTop: 0,
			};
		},
		onUnload() {
			console.log(66666666)
			// uni.switchTab({
			// 	url:"../../index/personal"
			// })
		},

		onReachBottom(e) {
			this.status = "loading";
			this.parmas.page++;
			this.getOrderList();
		},
		onPullDownRefresh() {
			this.rest();
			this.getOrderList();
		},
		onLoad(options) {
			let that = this
			that.timer = setInterval(()=>{
				that.timeCount++
			},1000)

			this.tabTop = app.globalData.barHeight + 44;

			if (options.keys) {}
			this.getOrderList();
		},
		beforeDestroy(){
			clearInterval(this.timer)
		},
		filters: {

			dateFilter(item){
				// console.log(item.expired_pay_time)
				let time = item.pay_expire_time - item.now_millis - vObj.timeCount*1000;
					
				
				let str = vObj.$mUtil.countDownClock(time)
				
				return str
			},
			
			payStatus(val) {
				switch (val) {
					case 0:
						return "待支付";
						break;
					case 1:
						return "待发货";
						break;
					case 2:
						return "部分发货";
						break;
					case 3:
						return "待收货";
						break;
					case 4:
						return "已收货";
						break;
					case 5:
						return "待评价";
						break;
					case 6:
						return "关闭";
						break;
					default:
						break;
				}
			},
			payStatusRight(val) {
				//退款
				//维权订单操作状态（0申请，1同意，2买家已发货，3商家已收到退货商品,4商家发起退款支付，5已支付退款,6拒绝，7自动关闭,8主动撤消
				switch (val) {
					case 0:
						return "申请退款中";
						break;
					case 1:
						return "商家同意";
						break;
					case 4:
						return "商家发起退款支付";
						break;
					case 5:
						return "退款成功";
						break;
					case 6:
						return "商家拒绝";
						break;
					default:
						break;
				}
			},
			payStatusRights(val) {
				//退款退货
				//维权订单操作状态（0申请，1同意，2买家已发货，3商家已收到退货商品,4商家发起退款支付，5已支付退款,6拒绝，7自动关闭,8主动撤消
				switch (val) {
					case 0:
						return "申请退款/退货中";
						break;
					case 1:
						return "等待买家发货";
						break;
					case 2:
						return "待商家收货";
						break;
					case 3:
						return "商家已收货";
						break;
					case 4:
						return "商家待打款";
						break;
					case 5:
						return "退款/退货成功";
						break;
					case 6:
						return "商家拒绝";
						break;
					case 7:
						return "自动关闭";
						break;
					case 8:
						return "撤销";
						break;
					default:
						break;
				}
			},
		},
		methods: {
			goGbOrderDetails(item) {
				if (item.pay_status == 0) {
					uni.navigateTo({
						url: `./gbOrderDetails?id=${item.pay_order_id}&status=waitpay`,
					});
				} else {
					uni.navigateTo({
						url: `./gbOrderDetails?id=${item.order_id}&groupId=${item.id}&status=pay`,
					});
				}
			},
			goProductDetails(item) {
				uni.navigateTo({
					url: "/pages/product/goods/puzzleGoods?id=" + item.group_buy_goods_id,
				});
			},
			goPhone(phone) {
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone, //仅为示例
					});
				}
			},
			// 物流//type：1普通订单，2维权订单
			lookLoginsList(orderid, num, img, type) {
				uni.navigateTo({
					url: "../logistics?id=" +
						orderid +
						"&num=" +
						num +
						"&img=" +
						img +
						"&type=" +
						type,
				});
			},
			//申请售后
			goRefundType(i, code, time, list, orderid, childid) {
				//i:1未发货，退款，2收到货退款/退货
				uni.setStorageSync("blackgoodsList", list);
				if (i == 1) {
					uni.navigateTo({
						url: "applicationDrawback?keystatus=" +
							i +
							"&title=申请退款" +
							"&orderid=" +
							orderid,
					});
				} else {
					uni.navigateTo({
						url: "refundType?order_code=" +
							code +
							"&format_order_time=" +
							time +
							"&keystatus=" +
							i +
							"&orderid=" +
							orderid +
							"&childid=" +
							childid,
					});
				}
			},
			//确认收货
			sureGetOrder(id, k) {
				uni.showModal({
					title: "提示",
					content: "确定已经收到了该商品？",
					success: (res) => {
						if (res.confirm) {
							this.$http.post("/order/receipt", {
								order_id: id
							}).then((res) => {
								if (res && res.code == 200) {
									this.$mUtil.toast("收货成功");
									this.rest();
									if (k == 1) {
										this.getOrderList();
									} else if (k == 2) {
										this.otherPay(this.currentKey);
									}
								}
							});
						} else if (res.cancel) {}
					},
				});
			},
			//选完地址回选
			otherFun(object) {
				if (!!object) {
					console.log(object.addressid);
					this.$http
						.put("/order/update-receipt/" + this.orderid + "/" + object.addressid)
						.then((res) => {
							if (res && res.code == 200) {
								this.$mUtil.toast("修改成功");
							}
						});
				}
			},
			//修改地址
			changeAddress(id) {
				this.orderid = id;
				uni.navigateTo({
					url: "/pages/user/address/addressList",
				});
			},
			rest() {
				this.parmas.page = 1;

				this.orderList = [];
			},
			getOrderList() {
				this.$http.get("/groupbuy/team/my", this.parmas).then((res) => {
					this.loading = false;
					if (res && res.code == 200) {
						uni.stopPullDownRefresh();
						this.orderList = this.orderList.concat(res.page.list);
						if (this.orderList.length == 0) {
							this.noData = true;
						} else {
							this.noData = false;
						}
						if (res.page.totalPage <= res.page.currPage) {
							this.status = "noMore";
						} else {
							this.status = "more";
						}
					}
				});
			},

			clickBtn(index) {
				this.rest();
				this.isChange = index;
				//维权订单操作状态（0申请，1同意，2买家已发货，3商家已收到退货商品,4商家发起退款支付，5已支付退款,6拒绝，7自动关闭,8主动撤消
				if (index > 0) {
					this.parmas.status = index;
				} else {
					delete this.parmas.status;
				}

				this.getOrderList();
			},
			//支付
			waitpayOrder(id, total_amount, expired_pay_time) {
				uni.navigateTo({
					url: "../../order/pay?id=" +
						id +
						"&total_amount=" +
						total_amount +
						"&expired_pay_time=" +
						expired_pay_time,
				});
			},
			//详情页
			goOrderDetails(id) {
				uni.navigateTo({
					url: "orderDetails?id=" + id + "&status=pay",
				});
			},
			gotoBalckDetail(id, shopid, type, status) {
				uni.navigateTo({
					url: "orderblackDetails?id=" +
						id +
						"&shopid=" +
						shopid +
						"&type=" +
						type +
						"&status=" +
						status,
				});
			},

			//支付订单
			goOrderDetailsPay(id) {
				uni.navigateTo({
					url: "orderDetails?id=" + id + "&status=waitpay",
				});
			},
		},
	};
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.u-border-one-one{
		border-top: 3rpx solid #e7e7e7;
		margin-bottom: 30rpx;
	}
	.right-icon {
		font-size: 25rpx;
	}
	.details-top{
		display: flex;
		.details-right{
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.right-top{
				font-size: 28rpx;
				color: #1A1A1A;
				font-weight: 400;
			}
			.specifications{
				font-size: 22rpx;
				color: #999999;
				font-weight: 400;
				margin-top: 40rpx;
				margin-left: 2rpx;
			}
			.amount-of-money{
				display: flex;
				font-size: 26rpx;
				color: #1A1A1A;
				font-weight: 400;
				.group{
					margin-left: 20rpx;
					color: #999999;
					font-weight: 400;
					font-size: 26rpx;
				}
			}
		}
	}
	
	.shop-icon{
		font-size: 40rpx;
		color: #0B844A;
	}
	.order-list {
		margin-bottom: 30rpx;
	}

	.order-list .order-item {
		padding-bottom: 20px;
	}

	.u-shop-teile-pd {
		display: flex;
		justify-content: space-between;
	}

	.plrbottom {
		padding: 110rpx 30rpx 0;
	}

	.topview {
		background-color: #f5f5f5;
		height: 110rpx;
		width: 100%;
		position: fixed;
		left: 0;
		box-sizing: border-box;
		padding: 0 30rpx;
		z-index: 66;
	}

	.scrollbox {
		white-space: nowrap;
	}

	.pt-pb {
		padding: 30rpx;
	}

	.pt15-pb24 {
		padding-top: 24rpx;
		padding-bottom: 24rpx;
	}

	.br-FF0000 {
		border: 1px solid #ff0000;
	}

	.br-999 {
		border: 1px solid #999999;
	}

	.order-type {
		margin-top: 30rpx;
		margin-bottom: 26rpx;
		display: inline-block;

		.active {
			background: #FA6138;
			color: #ffffff;
		}

		.type-name {
			border-radius: 30px;
			padding: 12rpx 18rpx;
			display: inline-block;
		}
	}

	.listImg {
		padding: 20rpx 0 0 16rpx;
	}

	.listimgGroup {
		width: 200rpx;
		height: 200rpx;
		margin: 0 25rpx 25rpx 0;
	}

	.order-item {
		.btn-type {
			padding-bottom: 25rpx;

			.pay-time {
				line-height: 70rpx;
				margin-left: auto;
			}
		}

		.btn-item {
			width: 200rpx;
			height: 70rpx;
			line-height: 68rpx;
			border-radius: 35px;
			margin-left: 22rpx;
		}
	}

	.childBox {
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}
</style>