martial-arts/pagesA/my-order/my-order.vue

<template>
	<view>
		<status-container titlet="我的订单" returnc="#FFFFFF">
			<view slot="content" style="margin-top: -20rpx;">
				<view class="posi-sticky" :style="{top:newtop+'px'}">
					<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
				</view>
				<view class="bacf mar-s20 pad-x20" v-if="orderList.length">
					<view @tap="getOrderDetail(item.id)" class="bbot disac pad30 col26" v-for="(item,index) in orderList" :key="index">
						<image class="flexs mar-y20" :src="item.skus[0].spu_cover" style="width: 192rpx;height: 134rpx;" mode="aspectFill" lazy-load></image>
						<view class="fon24 width100 disjbac fc" style="height: 134rpx;">
							<view class="dis width100">
								<view class="clips2 width100">{{item.skus[0].spu_name}}</view>
								<view class="mar-z50">x{{item.skus[0].num}}</view>
							</view>
							<view class="disjbac width100">
								<view class="">实付：￥{{item.price}}</view>
								<view class="disac">
									<view v-if="item.status=='waiting'" @tap.stop="goPay(index)" class="fon22 radius26 disjcac" style="background-color:#f37717;border: 2rpx solid #f37717;color: #FFFFFF;width: 134rpx;height: 50rpx;">去付款</view>
									<!-- <view v-if="item.status!='waiting' && item.status!='completed'" @tap.stop="clickBtn(index)" class="fon22 radius26 disjcac" style="border: 2rpx solid #c9c9c9;color: #969696;width: 134rpx;height: 50rpx;">查看物流</view> -->
									<view v-if="item.status=='shipped'" @tap.stop="checkWL(index)" class="fon22 radius26 disjcac" style="border: 2rpx solid #c9c9c9;color: #969696;width: 134rpx;height: 50rpx;">查看物流</view>
									<view v-if="item.status=='paid' || item.status=='shipped'" @tap.stop="confirmReceipt(item.id)" class="fon22 radius26 disjcac mar-z10" style="border: 2rpx solid #f37717;color: #f37717;border-color:#f37717;width: 134rpx;height: 50rpx;">确认收货</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" v-if="loading">
					<pitera :textStr="`${noMore && total > dataList.length?'上滑加载更多':'到底了'}~~`" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
				</view>
			</view>
		</status-container>
		<dynamic-frame ref="refFrame" :showType="showType" :tipsTitle="tipsTitle"></dynamic-frame>
	</view>
</template>

<script>
	import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
	import pitera from '@/components/nothing/pitera.vue';
	import dynamicFrame from '@/components/dynamic-frame.vue';
	export default {
		components:{swiperTab,pitera,dynamicFrame},
		data() {
			return {
				newtop:uni.getSystemInfoSync().statusBarHeight + 42,
				// newtop:uni.getSystemInfoSync().statusBarHeight + (140 / 750 * uni.getSystemInfoSync().windowWidth),
				current:0,
				dataList:[
					{title:'全部'},
					{title:'待付款'},
					{title:'待收货'},
					{title:'已完成'},
				],
				showType:-1,
				tipsTitle:'提示信息',
				page:1,
				size:20,
				tag:'',
				total:0,
				noMore:false,
				orderList:[],
				flag:true,
				loading:false
			}
		},
		onShow() {
			uni.removeStorageSync('orderDetail');
			this.getOrderList();
		},
		onLoad() {
			
		},
		onReachBottom() {
			if(this.total!=this.orderList.length){
				this.page++;
				this.getOrderList();
			}
		},
		methods: {
			// tab点击事件
			clickTab(index){
				this.current = index;
				this.page = 1;
				this.orderList = [];
				this.noMore = false;
				this.tag = ['','waiting','accept','completed'][this.current];
				this.getOrderList();
			},
			// 按钮点击
			clickBtn(index){
				this.tipsTitle = index==2?'物流信息':'提示信息';
				this.showType = [2,3,1][index];
				this.$refs.refFrame.ifLogistics = true;
				this.$refs.refFrame.ifAnimated = true;
			},
			// 查看物流
			checkWL(index){
				this.$refs.refFrame.logisticsObj = {
					express_name:this.orderList[index].express_name,
					express_number:this.orderList[index].express_number
				}
				this.clickBtn(2);
			},
			// 获取我的订单列表
			getOrderList(){
				this.loading = false;
				let params = {
					page:this.page,
					size:this.size,
					tag:this.tag
				}
				if(this.page==1) this.orderList = [];
				this.$requst.get('/api/user/order',params).then(res=>{
					if(res.code==0){
						this.total = res.data.total;
						this.orderList = [...this.orderList,...res.data.list];
						if(this.total==this.orderList.length && this.page!=1){
							this.noMore = true;
						}
						this.loading = true;
					}
				})
			},
			// 获取订单详情
			getOrderDetail(id){
				this.$toolAll.tools.goPage(`/pagesB/order-detail/order-detail?id=${id}`)
			},
			// 确认收货
			confirmReceipt(id){
				this.$requst.post('/api/order/accepted',{order_id:id}).then(res=>{
					if(res.code==0){
						this.clickBtn(0);
						this.getOrderList();
					}
				})
			},
			// 去支付
			goPay(index){
				if(this.flag){
					this.flag = false;
					this.$requst.post('/api/order/pay',{order_coding:this.orderList[index].coding}).then(res=>{
						if(res.code==0){
							let info = res.data;
							if(info.status!='completed'){
								uni.requestPayment({
									provider: 'wxpay',
									appId:info.payment_params.appId,//appId
									timeStamp: info.payment_params.timeStamp,//时间戳
									nonceStr: info.payment_params.nonceStr,//随机字符串
									package: info.payment_params.package,//package
									signType: info.payment_params.signType,//MD5
									paySign: info.payment_params.sign,//签名
									success:(result)=> {
										this.$requst.post('/api/order/paid',{order_coding:this.orderList[index].coding}).then(res=>{
											if(res.code==0){
												this.clickBtn(1);
												this.getOrderList();
											} else this.$toolAll.tools.showToast(res.msg);
										})
									},
									fail:()=> {
										this.$toolAll.tools.showToast('支付已取消o(╥﹏╥)o');
									},
									complete:()=> {
										this.flag = true;
									}
								});
							} else {
								this.$toolAll.tools.showToast('支付成功(*^▽^*)');
								setTimeout(()=>{
									uni.navigateTo({
										url:'/pagesA/my-order/my-order'
									})
								},1000)
							}
						} else {
							this.flag = true;
						}
					})
				}
			}
		}
	}
</script>

<style></style>