CBB3/pages/user/order/index.vue

<template>
	<view>
		<view id="box">
			<view class="box-nav">
				<view class="bn fx-r">
					<view v-for="(item,index) of navList" :key="index" class="bn-item" @click="navClick(index,item.value)">
						<view class="bni" :class="[navIndex == index ? 'select':'']">{{item.name}}</view>
					</view>   
				</view>
			</view>
			<scroll-view scroll-y :style="'height:calc(100vh - ' + topViewHeight + 'px);' ">
				<view>
					<view class="order-box">
						<view v-for="(item,index) of orderList" :key="index" class="order-item">
							<view class="oi-top">
								<view class="oit-left fx-r fx-bc">
									<view class="l"></view>
									<text>订单编号：{{item.order_id}}</text>
								</view>
								<view class="oit-right">
									<text v-if="item.status == -1">订单已关闭</text>
									<text v-if="item.status == 0">未付款</text>
									<text v-if="item.status == 1">已付款/待商家发货</text>
									<text v-if="item.status == 2">待收货</text>
									<text v-if="item.status == 3">交易成功</text>
								</view>
							</view>
							<view @click="intoDetailClick(item.id)">
								<view class="pay-goods" v-for="(v,k) of item.info" :key="k">
									<view class="pg-left">
										<image :src="v.img" mode="aspectFill"></image>
									</view>
									<view class="pg-right">
										<view class="pgr-top">
											<text>{{v.title }}</text>
										</view>
										<view class="pro-tag" style="color: #AFAFAF;font-size: 12px;">{{v.sku_text}}</view>
										<view class="pgr-bot">
											<view class="pgrb-left">
												<view class="pgrbl-left">¥{{v.price}}</view>
												<view class="pgrbl-right">¥{{v.old_price}}</view>
											</view>
											<view class="pgrb-right">x{{v.count}}</view>
										</view>
									</view>
									
								</view>
							</view>
							
							<view v-if="item.balance > 0" class="new-money fx-r fx-ae fx-bc">
								<view class="tag">提货积分(抵扣):</view>
								<view class="price">{{item.balance}}</view>
							</view>
							
							
							
							<view class="new-money fx-r fx-ae fx-bc">
								<view class="tag">实付</view>
								<view class="price"><text>￥</text>{{item.pay_money}}<text class="small">(免运费)</text></view>
							</view>
							
							<view class="oi-btn">
								<view class="fx-r" v-if="item.status == 0">
									<text style="font-size: 12px;">失效时间:</text>
									<countdown  :startTime="utils.date('Y-m-d H:i:s')" :endTime="item.last_time" />
								</view>
								<view class="fx-g1"></view>
								<view class="oib-hui" v-if="item.status == 2" @click="flowClick(item.id,item.info[0].img)">查看物流</view>
								<view class="oib-hui" v-if="item.status == 3" @click="flowClick(item.id,item.info[0].img)">查看物流</view>
								<view class="oib-hui" v-if="item.status == 0" @click="tapCancel(item.id,index)">取消订单</view>
								<view class="oib-red" v-if="item.status == 2" @click="tapConfim(item.id,index)">确认收货</view>
								<view class="oib-red" v-if="item.status == 0" @click="toPayClick(item.order_id)">立即支付</view>
								<view class="oib-red" v-if="item.status == -1" @click="tapDel(item.id,index)">删除订单</view>
							</view>
						</view>
					</view>
							
					<view class="loading fx-r fx-ac fx-bc" v-if="page.isFrite && !page.isFoot">
						<image src="/static/img/xloading.png"></image>
						<text>正在载入更多...</text>
					</view>
					<view class="loading complete" :hidden="!page.isFoot">已加载全部</view>	
				</view>
			</scroll-view>
			
			
		
		</view>
		
		
			
	<ui-check-pay ref="checkpay"></ui-check-pay>
	</view>
</template>

<script>
	import uiCheckPay from '@/components/ui-pay/pay.vue';
	import {mapState,mapMutations } from 'vuex';
	import countdown from "@/components/cz-countdown/cz-countdown.vue"
	export default {
		computed: mapState(['user']),
		components: {
			uiCheckPay,
			countdown
		},
		data() {
			return {
				navList: [{
					name: "全部",
					value: "",
					type:""
				}, {
					name: "待发货",
					value: "payed",
					type:1
				}, {
					name: "待收货",
					value: "delivered",
					type:2
				}, {
					name: "已完成",
					value: "confirmed",
					type:3
				}],
				navIndex: 0,
				orderList: [],
				dClass:"",
				yPrice:"0.00",
				order_id:"",
				barHeight:0,
				topViewHeight:0,
				page:{
					isFirst:false,
					isLoad:false,
					isFoot:false,
					page:1
				}
			}
		},
		onLoad(option) {
			var type = option.type || '';
			if(type != '') {
				for(var i in this.navList) {
					if(type == this.navList[i].value) {
						this.navIndex = i;
					}
				}
			}
			uni.getSystemInfo({
				success:(res) => {
					this.barHeight = res.statusBarHeight;
					this.topViewHeight = this.barHeight + 50;
					// #ifdef H5
					this.topViewHeight += 46;
					// #endif
				}
			});
			//获取订单
			this.getData();
		},
		onReachBottom() {
			if(this.page.isFoot || this.page.isLoad) {
				return;
			}
			this.page.page ++;
			this.getData();			
		},
		onUnload() {
			this.$refs.checkpay.hide();
		},
		methods: {
			
			// tab点击
			navClick(index, value) {
				this.navIndex = index;
				this.getData(true);
			},
			getData:function(isPull = false){
				if(this.page.isLoad) return;
				this.page.isLoad = true;
				if(isPull) {
					this.page.page = 1;
					this.page.isLoad = false;
					this.page.isFoot = false;
				}
				uni.showLoading({ title: '获取数据中..' });
				var post = {};
				post.page = this.page.page;
				post.type = this.navList[this.navIndex].type;
				this
					.request
					.post("userOrder",post)
					.then(res => {
						uni.hideLoading();
						this.page.isFirst = true;
						this.page.isLoad = false;
						if(isPull) {
							this.orderList = res.data.list;
						} else {
							this.orderList = this.orderList.concat(res.data.list);
						}
						//是否到底
						if(res.data.list.length != res.data.pageSize) {
							this.page.isFoot = true;
						}   
						//that.CountDowm();
					})
					.catch(res=>{
						console.log(res);
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			},
			// 查看物流
			flowClick(id, path_img) {
				uni.navigateTo({
					url: `/pages/user/order/flow/flow?id=${id}&path_img=${path_img}`
				})
			},
			// 进入详情
			intoDetailClick(id) {
				uni.navigateTo({
					url: `/pages/user/order/detail/detail?id=${id}`
				})
			},
			/**
			 * 支付操作
			 */
			toPayClick:function(order_id){
				console.log(this.$refs);
				this.$refs.checkpay.show(order_id,()=>{
					this.$refs.checkpay.hide();
				});
			},
			/**
			 * 取消订单
			 * @param {Object} id
			 * @param {Object} index
			 */
			tapCancel(id, index) {
				this.utils.showModal("确认取消订单吗?",()=>{				
							this
								.request
								.post("orderCancel",{id:id})
								.then(res=>{
									uni.hideLoading();
									if(res.code == 200) {
										this.utils.showAlert({title: "取消成功",mask: true,icon: "none"});
										this.orderList[index].status = -1;
									} else {
										uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
									}
								})
								.catch(res=>{
									console.log(res);
									uni.hideLoading();
									uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
								});
					
					});
			},
			/**
			 * 删除订单
			 * @param {Object} id
			 * @param {Object} index
			 */
			tapDel(id, index) {
				
				this.utils.showModal("确认要删除订单吗?",()=>{			
							this
								.request
								.post("orderDel",{id:id})
								.then(res=>{
									uni.hideLoading();
									if(res.code == 200) {
										this.utils.showAlert({title: "删除成功",mask: true,icon: "none"});
										this.$delete(this.orderList,index);
									} else {
										uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
									}
								})
								.catch(res=>{
									console.log(res);
									uni.hideLoading();
									uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
								});
						});
			},
			tapConfim(id, index) {
			    this.utils.showModal("确认收货?",()=>{				
							this
								.request
								.post("orderConfim",{id:id})
								.then(res=>{
									uni.hideLoading();
									if(res.code == 200) {
										this.utils.showAlert({title: "收货成功",mask: true,icon: "none"});
										this.orderList[index].status = 3;
									} else {
										uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
									}
								})
								.catch(res=>{
									console.log(res);
									uni.hideLoading();
									uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
								});
						});
			},
			
			// 退款联系客服
			refundClick() {
				uni.navigateTo({
					url: `/pages/user/customer/customer`
				})
			},
		}
	}
</script>

<style>
	page{background:#F5F5F5}
	.bg-top{position: absolute;top: 0;width: 100%;}
	.bg-top image{width: 100%;}
	.box-nav{width:100%;height:50px;background-color:#fff;border-top:1px #f5f5f5 solid;}
	.bn{align-items:center;height:50px}
	.bn-item{width:25%;text-align:center}
	.bni{color:#3F3E3E;font-size:14px;box-sizing:border-box;position:relative}
	.select{width:100%;color:#ef4034}
	.select::after{content:"";position:absolute;bottom:-5px;left:50%;transform:translate(-50%,-50%);background:#ef4034;width:24px;height:2px}
	.order-box{min-height: 300px;margin: 10px;}
	.order-item{background-color:#fff;padding:10px 15px;margin-bottom: 10px;border-radius: 10px;}
	
	.new-money{}
	.new-money .tag{color: #333;font-size: 12px;font-weight: 400;}
	.new-money .price{color: #333;font-size: 14px;font-weight: 400;margin-left: 1px;}
	.new-money .price text{color: #333;font-size: 12px;}
	.new-money .price .small{color: #333;font-size: 10px;}
	
	.zfen-view{height: 18px;}
	.zfen-view .zfen{
		overflow: hidden;
		text-overflow:ellipsis;    
		white-space: nowrap;
		color: #ef4034;font-size: 10px;border: 1px solid #ef4034;padding: 0px 2px;display: inline-block;vertical-align:top;border-radius: 2px;}
	.zfen-view .zfen text{font-weight: bold;margin: 0px 1px;}
	
	
	.oi-top{display:flex;align-items:center}
	.oit-left{color:#AFAFAF;font-size:12px}
	.oit-left .l{background: #ef4034;width: 3px;height: 14px;border-radius: 6px;margin-right: 4px;}
	.oit-right{color:#ef4034;font-size:12px;margin-left:auto}
	.pay-goods{margin-top:10px;display:flex;align-items:center}
	.pg-left{width:90px;height:90px;margin-right:15px}
	.pg-left image{width:100%;height:100%;display:block;border-radius:10px}
	.pg-right{width:68%}
	.pgr-top{width:100%;color:#484747;font-size:14px;font-weight:500;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
	.pgr-middle{margin-top:5px}
	.pgrm-vip{width:88px;height:20px;background-color:#F3D9C3;text-align:center;line-height:20px;color:#f1851e;font-size:10px;border-radius:4px}
	.pgrm-gui{color:#7E7E7E;font-size:10px}
	.pgr-bot{display:flex;align-items:center;margin-top:5px}
	.pgrb-left{display:flex;align-items:center;}
	.pgrb-left .aicao{width: 18px;height: 18px;}
	
	.pgrbl-left{color:#f1851e;font-size:18px;font-weight:500}
	.pgrbl-right{color:#7E7E7E;font-size:10px;text-decoration:line-through;margin-left:5px}
	.pgrb-right{margin-left:auto;color:#7E7E7E;font-size:10px}
	.oi-btn{display:flex;align-items:center;justify-content:flex-end;margin-top:15px}
	.oib-hui{width:80px;height:24px;text-align:center;line-height:24px;color: #545454;border:1px #EEEEEE solid;border-radius:100px;font-size:12px}
	.oib-red{width:80px;height:24px;text-align:center;line-height:24px;color:#fff;border:1px #ef4034 solid;border-radius:100px;font-size:13px;background-color:#ef4034;margin-left:10px}
</style>