mall-laonong/pagesA/order/order.vue

<template>
	<view v-if="isLoading">
		<status-nav :ifReturn="true" navBarTitle="订单管理" :marginBottom="0"></status-nav>
		<!-- 订单搜索 -->
		<view class="order-search">
			<input class="input font30 pad-zy40 color-66 radius20 border-box" v-model="order_coding" type="text" placeholder="请输入订单编号" confirm-type="search" @confirm="doSearch" placeholder-style="color:#666666">
		</view>
		<!-- 订单导航 -->
		<view class="order-nav-bg mar-s30" :style="{top:newTop+'px'}">
			<scroll-view scroll-x="true" :scroll-left="tabsScrollLeft" @scroll="scroll">
				<view class="order-nav flex" id="tab_list" :style="{width:navWidth}">
					<view id="tab_item" class="item font30 color-8c radius20" :class="activeIndex == index?'cur':''" v-for="(item,index) in orderNav" @tap="changeNav(index,item.tag)">{{item.title}}</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 订单列表 -->
		<view class="order-list">
			<view class="order-item" @tap.stop="toDetail(item.id)" v-for="(item,index) in orderList" :key="index">
				<view class="order-code flex">
					<text>订单号：{{item.coding}}</text>
					<text class="status color-red" v-if="item.status=='waiting'">{{item.status_text}}</text>
					<text class="status" style="color: #02d20b;" v-if="item.status=='paid' || item.status=='shipped'">{{item.status_text}}</text>
					<text class="status color-99" v-if="item.status=='completed' || item.status=='closed'">{{item.status_text}}</text>
				</view>
				<view class="item-bg">
					<view class="item flex" v-for="(item1,index1) in item.skus" :key="index1">
						<view class="img"><image :src="item1.spu_cover" mode="widthFix"></image></view>
						<view class="txt">
							<view class="title clips1">{{item1.spu_name}}</view>
							<view class="specs clips2">规格：{{item1.sku_name}}</view>
							<view class="price flex">
								<text>￥{{item1.price}}</text>
								<view><text>x</text>{{item1.num}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="total-price flex">
					<text>合计：￥{{item.price}}</text>
					<view class="btns flex" v-if="item.status == 'waiting'">
						<view class="btn border-box" @tap.stop="cancleEv(item.coding)">取消订单</view>
						<view class="btn btn-01 border-box" @tap.stop="payEv(item.coding)">立即支付</view>
					</view>
					<view class="btns flex" v-if="item.status == 'paid'">
						<view class="btn border-box" @tap.stop="cancleEv(item.coding)">取消订单</view>
					</view>
					<view class="btns flex" v-if="item.status == 'shipped'">
						<view class="btn btn-02 border-box background-orange" @tap.stop="affirmEv(item.id)">确认收货</view>
					</view>
					<view class="btns flex" v-if="item.status == 'completed' || item.status == 'closed'">
						<view class="btn border-box" @tap.stop="buyAgain(index)">再次购买</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 到底啦 -->
		<view class="no-more font24" style="margin: 0;padding: 25rpx 0;" v-if="total!==0&&totalAll==total"><text>—— 到底啦 ——</text></view>
		<!-- 没有内容 -->
		<nothing-page v-if="total==0&&totalAll == total" content="还没有相关订单哟(*^▽^*)"></nothing-page>
	</view>
</template>

<script>
	import {getCartInfo} from '@/jsFile/public-api.js';
	import {mapState} from 'vuex'//引入mapState
	export default {
		data() {
			return {
				newTop:uni.getSystemInfoSync().statusBarHeight + 50,
				orderNav:[
					{title:'全部',tag:'all'},
					{title:'待付款',tag:'waiting'},
					{title:'已下单',tag:'paid'},
					{title:'已发货',tag:'shipped'},
					{title:'已完成',tag:'completed'},
				],
				activeIndex:0,
				scrollLeft:0,
				tabsScrollLeft:0,
				navWidth:'', //导航宽度 
				orderList:[],
				flag:true,
				isLoading:false,
				total:0,
				totalAll:-1,
				page: 1,
				size: 10,
				tag: 'all',
				order_coding:'', //订单号
			}
		},
		onLoad(op) {
			if(op.tag !== ''){
				this.tag = op.tag;
			}
			if(op.index !== ''){
				this.activeIndex = op.index;
			}
			this.navWidth = this.orderNav.length*150 - 20 + 'rpx';
			// 分类切换效果
			this.setTabList();
		},
		onShow() {
			this.orderList=[];
			this.getOrderList();
		},
		onReachBottom(e) {
			if(this.orderList.length<this.total){
				this.page++;
				this.getOrderList();
			}
		},
		// 分享到微信
		onShareAppMessage() {
			
		},
		// 分享到朋友圈
		onShareTimeline(res){
			
		},
		methods: {
			// 导航切换
			changeNav(index,tag) {
				this.total=0;
				this.totalAll=-1;
				this.activeIndex = index;
				this.tag = tag;
				this.orderList=[];
				this.page = 1;
				this.order_coding = '';
				this.getOrderList();
				// 分类切换效果
				this.setTabList();
			},
			// 搜索订单
			doSearch(){
				this.orderList = [];
				this.activeIndex = 0;
				this.tag = 'all'
				// 获取订单列表
				this.getOrderList();
			},
			// 获取订单列表
			getOrderList(){
				uni.showLoading({
					title:'加载中'
				});
				let params = {
					page: this.page,
					size: this.size,
					tag: this.tag,
					order_coding:this.order_coding,
				}
				this.$requst.get('/api/user/order',params).then(res=>{
					console.log(res,'订单列表')
					if(res.data.length!=0){
						this.total = res.data.total;
						let newArr = [];
						res.data.list.forEach(item=>{
							let obj = {
								id: item.id, //id
								coding: item.coding, //订单号
								price: item.price, //总价
								status: item.status, //订单状态英文
								status_text: item.status_text, //订单状态中文
								skus: item.skus ,//订单详情
							}
							newArr.push(obj);
						})
						this.orderList = this.orderList.concat(newArr);
						if(this.orderList.length == this.total){
							this.totalAll = this.total;
						}
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			// 去详情
			toDetail(id){
				uni.navigateTo({
					url:`/pagesA/order/detail?id=${id}`
				})
			},
			// 取消订单
			cancleEv(coding){
				let params = {
					order_coding: coding //订单号
				}
				this.$requst.post('/api/order/cancel',params).then(res=>{
					if(res.code==0) {
						this.$toolAll.tools.showToast('取消订单成功(*^▽^*)');
						this.orderList = [];
						this.page = 1;
						this.getOrderList();
					} else {
						this.$toolAll.tools.showToast(res.msg)
					}
				})
			},
			// 确认收货
			affirmEv(id){
				let params = {
					order_id: id //订单号
				}
				this.$requst.post('/api/order/accepted',params).then(res=>{
					if(res.code==0) {
						this.$toolAll.tools.showToast('确认收货成功(*^▽^*)');
						this.orderList = [];
						this.page = 1;
						this.getOrderList();
					} else {
						this.$toolAll.tools.showToast(res.msg)
					}
				})
			},
			// 再次购买
			buyAgain(index){
				let buyList = [];
				let newArr = this.orderList[index];
				newArr.skus.forEach(item=>{
					let obj = {
						sku_coding: item.coding,
						num: item.num
					}
					buyList.push(obj);
				})
				uni.setStorageSync('buyList',buyList);
				uni.navigateTo({
					url:'/pages/cart/settlement'
				})
			},
			
			// 立即支付
			payEv(coding){
				this.$requst.post('/api/order/pay',{order_coding:coding}).then(res=>{
					if(res.code==0) {
						console.log(res,'立即支付');
						// 调用微信支付
						this.callPayMent(res.data.payment_params)
					} else {
						this.$toolAll.tools.showToast(res.msg)
					}
				})
			},
			
			// 调用微信支付
			callPayMent(data){
				//调起支付
				wx.requestPayment({ 
					'timeStamp': data.timeStamp,
					'nonceStr': data.nonceStr,
					'package': data.package,
					"signType": data.signType,
					'paySign': data.sign,
					'success': function (res) { // 接口调用成功的回调函数
						console.log('支付成功:',res);
						this.$toolAll.tools.showToast('支付成功(*^▽^*)');
						uni.navigateTo({
							url:`/pages/cart/finish`
						})
					},
					'fail': function (res) { // 接口调用失败的回调函数
						console.log('支付失败:' + JSON.stringify(res));
					}
				  })
			},
			
			// 分类切换效果
			setTabList() {
				this.$nextTick(() => {
					if (this.orderNav.length > 0) {
						//计算左滑距离
						this.setLeft()
					}
				})
			},
			
			//计算左滑距离
			setLeft() {
				let lineLeft = 0;
				this.getElementData('#tab_list', (data) => {
					let list = data[0];
					this.getElementData('#tab_item', (res) => {
						let el = res[this.activeIndex]
						lineLeft = el.width / 2 + (-list.left) + el.left - list.width / 2 - this.scrollLeft
						this.tabsScrollLeft = this.scrollLeft + lineLeft
					})
				})
			},
			
			// 获取DOM距离
			getElementData(el, callback) {
				uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
					callback(data[0]);
				});
			},
			
			// 滚动
			scroll(e) {
				this.scrollLeft = e.detail.scrollLeft;
			},
		}
	}
</script>

<style scoped>
	
</style>