wardrobe/pages/dingdan/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }"
		:class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-menubars title="我的订单" :shadow="0" :showback="true"></tm-menubars>
		<tm-tabs align="split" class="qiehuan1" v-model="activeIndex" :list="list2" range-key="title" @change="changeTab"></tm-tabs>
		<div class="zhuti shangpin">
			<tm-sheet class="jiaoxi" style="" v-for="item in test">
				<tm-cartCellListFood class="shuliang" :typeclick="typeclick" :mdata="item" v-on:sure="goSure(item.id)" v-on:Eval="goEval(item.id)" @shanchu="goShanChu(item.id)" :cart-num.sync="item.buy"></tm-cartCellListFood>
			</tm-sheet>
		</div>
		<view class="empty" v-if="isEmpty">
			暂无内容~
		</view>
		<view class="bottom" v-if="isBottom">
			没有更多了~
		</view>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>	
<script>
import{myRequest} from '@/api/request.js'
export default {
	data() {
		return {
			list2:[ '全部','待付款','已付款','已完成'],
			activeIndex:0,
			test: [
			// 	{
			// 	img: '../../static/img/83.png',
			// 	title: '丝缎质感纹理风衣',
			// 	label: '黑色 - 6518/320',
			// 	size:'S',
			// 	price: '1299',
			// 	id: 3,
			// 	buy: 0,
			// 	itemId: 0,
			// 	checked:false,
			// 	status:0
			// },
			],
			typeclick:4,//1加入购物车，2购物车
			page:1,
			pagesize:5,
			total:0,
			isBottom:false,
			isEmpty:false,
			sel:-1
		};
	},
	onLoad() {
		
	},
	created() {
		if(!uni.getStorageSync("token")){
			uni.navigateTo({
				url: "/pages/login/index",
			})
		}
		this.sys = uni.getSystemInfoSync();
		this.getOrderList(-1);
	},
	onReachBottom() {
		this.loadMore(this.sel)
	},
	methods: {
		changeTab(e){ // 切换tab
			this.activeIndex=e;
			if(e==0){
				this.sel=-1;
			}else if(e==1){
				this.sel=0;
			}else if(e==2){
				this.sel=1;
			}else if(e==3){
				this.sel=2;
			}
			this.getOrderList(this.sel)	
		},
		// 获取订单列表
		getOrderList(index){
			this.page=1;
			this.pagesize=5;
			this.isBottom=false;
			let that=this;
			myRequest({
				url:'/api/Order/orderList',
				method:'post',
				data:{type:this.sel,page:that.page,pagesize:that.pagesize}
			}).then(res=>{
					if (res.data.code == 200) {
						that.total=res.data.data.total;
						if (res.data.data.length != 0) {
							that.isEmpty=false;
							that.test = [];
							for (let i = 0; i < res.data.data.data.length; i++) {
								var obj = {
									img: res.data.data.data[i].orderGoods.goods_img,
									title: res.data.data.data[i].orderGoods.goods_name,
									// label: '黑色 - 6518/320',
									// size:'S',
									price: res.data.data.data[i].pay_money,
									id: res.data.data.data[i].id,
									buy: res.data.data.data[i].goods_num,
									itemId: res.data.data.data[i].id,
									checked: false,
									goods_id:res.data.data.data[i].goods_id,
									orderStatus:res.data.data.data[i].order_status,
									orderNo:res.data.data.data[i].order_sn,
									isEval:res.data.data.data[i].is_evaluate
								};
								that.test.push(obj)
							}
						}else {
						that.test = [];
						that.isEmpty=true;
						that.isBottom=false;
						}
					} 
					console.log(res.data.data.data,'订单列表');
			})
		},
	  goShanChu(ids){
			let that=this;
			myRequest({
			url:'/api/order/deleteOrder',
			method:'post',
			data:{
				id:ids
			}
			}).then(res=>{
				if(res.data.code==200){
					that.$refs.toast.show({
						model: 'success',
						label: res.data.msg
					})
					that.getOrderList()
				}else{
					that.$refs.toast.show({
						model: 'error',
						label: res.data.msg
					})
				}
			})
		},
		goSure(ids){
	  	let that=this;
	  	myRequest({
	  	url:'/api/Order/receipt',
	  	method:'post',
	  	data:{
	  		id:ids
	  	}
	  	}).then(res=>{
	  		if(res.data.code==200){
	  			that.$refs.toast.show({
	  				model: 'success',
	  				label: res.data.msg
	  			})
	  		}else{
	  			that.$refs.toast.show({
	  				model: 'error',
	  				label: res.data.msg
	  			})
	  		}
	  	})
	  },
	  goEval(ids){
			uni.navigateTo({
				url:'/pages/pingjia/index?id='+ids
				})		
		},
		loadMore(){ //加载更多
			if(this.isBottom) return;
			this.page++;
			let that=this;
			myRequest({
				url:'/api/Order/orderList',
				method:'post',
				data:{type:this.sel,page:that.page,pagesize:that.pagesize}
			}).then(res=>{
					if (res.data.code == 200) {
						if(that.test.length < res.data.data.total){
							let newList=[];
							for (let i = 0; i < res.data.data.data.length; i++) {
								var obj = {
									img: res.data.data.data[i].orderGoods.goods_img,
									title: res.data.data.data[i].orderGoods.goods_name,
									// label: '黑色 - 6518/320',
									// size:'S',
									price: res.data.data.data[i].pay_money,
									id: res.data.data.data[i].id,
									buy: res.data.data.data[i].goods_num,
									itemId: res.data.data.data[i].id,
									checked: false,
									goods_id:res.data.data.data[i].goods_id,
									orderStatus:res.data.data.data[i].order_status,
									orderNo:res.data.data.data[i].order_sn,
									isEval:res.data.data.data[i].is_evaluate
								};
								newList.push(obj)
							}
							that.test=that.test.concat(newList)
						} else {
						that.isBottom=true;
						that.page--;
						console.log(that.page);
						}
					} else {
						that.isBottom=true;
						that.page--;
					}
			})
		}
	},
}
</script>

<style lang="scss">
	/deep/ .tm-menubars .body{background-color: #1b1b1b !important;}
	/deep/ .qiehuan1 .text-primary{color: white !important;}
	/deep/ .qiehuan1 .tm-tabs-wk{border-top: 1px solid #262628;}
	/deep/ .shuliang .text-size-n{color: white !important;}
	/deep/ .shangpin .white.bk{background-color:#1b1b1b!important;}
	/deep/ .shangpin .tm-cartCellListFood{padding: 0px 0px 15px 0px !important;
	margin-top: 5px !important;margin-bottom: 20px !important;
	border-bottom: 1px solid #1B1B1B;}
	/deep/ .shangpin .border-t-1.bk{border-top:1px solid #1b1b1b!important;}
	/deep/ .shangpin .title{color: white !important;}
	/deep/ .shangpin .text-red{color: white !important;}
	/deep/ .shangpin .round-3{width:90px !important;height:90px !important;}
	/deep/ .shangpin .tm-cartCellListFood-img{width:90px !important;height:90px !important;}
	/deep/ .shuliang .text-size-n{color: white !important;}
	/deep/ .jiaoxi{margin:0 !important;padding: 8px !important;margin-top: 10px !important;}
	.empty,.bottom{display: flex;justify-content:center;align-items: center;color: #AAAAAA;}
	.empty{padding-top: 100px;}
	.bottom{padding-bottom: 10px;height: 30px;width: 100%;}
</style>