luban-mall/pagesA/order/detail.vue

<template>
	<view class="pad-b140">
		<status-nav :ifReturn="true" navBarTitle="订单详情" :marginBottom="0"></status-nav>
		<!-- 订单简介 -->
		<view class="order-info-bg" v-if="isLoading">
			<view class="order-info">
				<view class="flex">
					<text>订单编号</text>
					<text>{{orderDetail.coding}}</text>
				</view>
				<view class="flex">
					<text>下单时间</text>
					<text>{{orderDetail.created_at}}</text>
				</view>
				<view class="flex">
					<text>订单状态</text>
					<text>{{orderDetail.status_text}}</text>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order-list" v-if="isLoading">
			<view class="order-item order-item-detail">
				<view class="order-information">订单信息</view>
				<view class="item-bg">
					<view class="item flex" v-for="(item,index) in orderDetail.skus" :key="index" @tap="toDetail(item.spu_id,item.is_series)">
						<view class="img"><image :src="item.spu_cover" mode="widthFix"></image></view>
						<view class="txt">
							<view class="title">{{item.spu_name}}</view>
							<view class="specs clips2">规格：{{item.custom_title}}</view>
							<view class="price flex">
								<text>￥{{item.price}}</text>
								<view><text>x</text>{{item.num}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="total-price total-price-detail flex">
					<text>总价：￥{{orderDetail.original_price}}</text>
				</view>
			</view>
		</view>
		<!-- 联系方式 -->
		<view class="contact-info-bg" v-if="isLoading">
			<view class="contact-info">
				<view class="title">联系方式</view>
				<view class="name">
					<text>{{orderDetail.contact}}</text>
					<text>{{orderDetail.phone}}</text>
				</view>
				<view class="item">{{orderDetail.address}}</view>
				<view class="item" v-if="orderDetail.remarks!==''">希望到货时间：{{orderDetail.remarks}}</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="shop-btns order-btns flex">
			<view class="btn btn-grey" @tap="cancleEv" v-if="orderDetail.status == 'ordered'">取消订单</view>
			<view class="btn" @tap="buyAgain" v-if="orderDetail.status == 'completed' || orderDetail.status == 'closed'">再次购买</view>
		</view>
		<!-- 客服btn -->
		<customer-service></customer-service>
	</view>
</template>

<script>
	import statusNav from '@/components/status-navs/status-nav';
	import customerService from '@/components/customer-service/customer-service.vue';
	import {getCartNum,userInfoEv} from '@/jsFile/public-api.js';
	import {mapState} from 'vuex'//引入mapState
	export default {
		components:{
			statusNav,
			customerService
		},
		data() {
			return {
				orderDetail:{}, //订单详情
				flag:true,
				ifLoading:false,
				id:0, //订单id
				cacheBusinessId:-1, //商户id
				isLoading:false,
			}
		},
		onLoad(op) {
			if(op.id !== ''){
				this.id = op.id;
				if(op.business_id){
					this.cacheBusinessId = op.business_id;
				}
			}
		},
		onShow() {
			if(this.cacheBusinessId !== -1){
				this.$requst.post('/api/index/change-business',{business_id:this.cacheBusinessId}).then(res=>{
					if(res.code == 0){
						this.getOrderDetail();
						userInfoEv();
					}
				})
			}else{
				this.getOrderDetail();
				userInfoEv();
			}
		},
		// 分享到微信
		onShareAppMessage() {
			let path = uni.getStorageSync('page-path-options')+'?business_id='+uni.getStorageSync('business_id');
			return {
				path:path
			}
		},
		// 分享到朋友圈
		onShareTimeline(res){
			let path = uni.getStorageSync('page-path-options')+'?business_id='+uni.getStorageSync('business_id');
			return {
				path:path
			}
		},
		methods: {
			// 查询订单详情
			getOrderDetail(){
				uni.showLoading({
					title: '加载中'
				});
				this.isLoading =false;
				this.$requst.get('/api/user/order-detail',{id:this.id}).then(res=>{
					if(res.code==0){
						this.orderDetail = res.data;
					}
					uni.hideLoading();
					this.isLoading =true;
				})
			},
			
			
			// 取消订单
			cancleEv(){
				let params = {
					order_coding: this.orderDetail.coding //订单号
				}
				this.$requst.post('/api/order/cancel',params).then(res=>{
					if(res.code==0) {
						this.$toolAll.tools.showToast('取消订单成功(*^▽^*)');
						uni.navigateTo({
							url:'/pagesA/order/order'
						})
					} else {
						this.$toolAll.tools.showToast(res.msg)
					}
				})
			},
			// 再次购买
			buyAgain(index){
				let buyList = [];
				let newArr = this.orderDetail;
				newArr.skus.forEach(item=>{
					let obj = {
						sku_coding: item.coding,
						num: item.num
					}
					buyList.push(obj);
				})
				uni.setStorageSync('buyList',buyList);
				uni.navigateTo({
					url:'/pagesA/cart/settlement'
				})
			},
			//去商品详情页
			toDetail(id,type){
				if(type == 0){
					uni.navigateTo({
						url:`/pagesA/shop/detail?id=${id}&source=shop`
					})
				}
				if(type == 1){
					uni.navigateTo({
						url:`/pages/tabbar/kit/detail?id=${id}`
					})
				}
			}
		}
	}
</script>

<style scoped>
	
</style>