mall-laonong/pagesA/order/detail.vue

<template>
	<view class="pad-x170" v-if="isLoading">
		<status-nav :ifReturn="true" navBarTitle="订单详情" :marginBottom="0" :backTag="backTag"></status-nav>
		<!-- 收件人信息 -->
		<view class="settlement-content pad-zy20 border-box">
			<!-- 订单简介 -->
			<view class="section background-white radius30 mar-x40 pad-all25 border-box font30">
				<view class="order-info pad-zy20 border-box">
					<view class="flex mar-s20">
						<text>订单编号</text>
						<text>{{orderDetail.coding}}</text>
					</view>
					<view class="flex mar-s20">
						<text>下单时间</text>
						<text>{{orderDetail.created_at}}</text>
					</view>
					<view class="flex mar-s20">
						<text>订单状态</text>
						<text>{{orderDetail.status_text}}</text>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="section background-white radius30 mar-x40 pad-all25 border-box font30">
				<view class="title">订单信息</view>
				<view class="shop-slide-list">
					<view class="shop-slide-item">
						<view class="item border-box background-white flex" v-for="(item,index) in orderDetail.skus" :key="index">
							<view class="shop-img radius30">
								<image :src="item.spu_cover" mode="widthFix"></image> 
							</view>
							<view class="shop-txt">
								<view class="shop-txt-top">
									<view class="title font30 clips1">{{item.spu_name}}</view>
									<view class="specs font24 color-66 mar-sx10 clips2">规格：{{item.sku_name}}</view>
								</view>
								<view class="shop-txt-bottom flex">
									<!-- 商品价格 -->
									<view class="price font30 color-red">￥{{item.price}}<text class="font24 color-66">x{{item.num}}</text></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 收货信息 -->
			<view class="section background-white radius30 mar-x40 pad-all25 border-box font30">
				<view class="title">收货信息</view>
				<view class="addressee-info mar-s20 flex">
					<view class="txt">
						<view class="font30 mar-x10">{{orderDetail.address_info.name}}<text>{{orderDetail.address_info.phone}}</text></view>
						<text class="font24 color-8c">{{orderDetail.address_info.province_str}}{{orderDetail.address_info.city_str}}{{orderDetail.address_info.county_str}}{{orderDetail.address_info.address}}</text>
					</view>
				</view>
			</view>
			<!-- 物流信息 -->
			<view class="section background-white radius30 mar-x40 pad-all25 border-box font30" v-if="orderDetail.express_name!==''">
				<view class="title">物流信息</view>
				<view class="addressee-info mar-s20 flex">
					<view class="txt" style="width: 100%;">
						<view class="font30 mar-x10">{{orderDetail.express_name}}</view>
						<view class="txt-coding font24 flex" style="margin-top: 10rpx;">
							<text class="color-8c">快递单号：{{orderDetail.express_number}}</text>
							<view class="copy_btn" @tap="copyEV">复制查询</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 付款信息 -->
			<view class="section background-white radius30 mar-x40 pad-all25 border-box font30" v-if="orderDetail.status!=='waiting'">
				<view class="pay-info">
					<view class="flex">
						<text>商品总金额</text>
						<text class="color-red">{{orderDetail.original_price}}</text>
					</view>
					<view class="flex mar-s20">
						<text>折扣优惠</text>
						<text class="color-red">{{coupon_vip_price>0?coupon_vip_price:0}}</text>
					</view>
					<view class="flex mar-s20">
						<text>积分抵扣</text>
						<text class="color-red">{{orderDetail.score_deduction_money>0?orderDetail.score_deduction_money:0}}</text>
					</view>
					<view class="pay-actual mar-s30 flex">实付款:<text class="color-red font36">{{priceAll>0?'￥'+ priceAll:0}}</text></view>
				</view>
			</view>
		</view>
		<!-- 尾部 -->
		<view class="pull-btn background-white border-box" style="box-shadow: 0 -9rpx 21rpx rgba(0,0,0,.1);">
			<view class="btn border-btn border-box color-8c font36 radius30 flex" @tap="cancleEv(orderDetail.coding)" v-if="orderDetail.status == 'waiting' || orderDetail.status == 'paid'">取消订单</view>
			<view class="btn border-box background-orange color-ff font36 radius30 flex" @tap="affirmEv(orderDetail.id)" v-if="orderDetail.status == 'shipped'">确认收货</view>
			<view class="btn border-btn border-box color-8c font36 radius30 flex" @tap="buyAgain" v-if="orderDetail.status == 'completed' || orderDetail.status == 'closed'">再次购买</view>
		</view>
	</view>
</template>

<script>
	import {getCartInfo} from '@/jsFile/public-api.js';
	import {mapState} from 'vuex'//引入mapState
	export default {
		data() {
			return {
				orderDetail:{}, //订单详情
				flag:true,
				isLoading:false,
				id:0, //订单id
				coupon_vip_price:'', //折扣优惠
				priceAll:'', //实际付款
				backTag:'',
			}
		},
		onLoad(op) {
			if(op.id){this.id = op.id;}
			if(op.backTag){this.backTag = op.backTag;}
			this.getOrderDetail();
		},
		methods: {
			// 查询订单详情
			getOrderDetail(){
				uni.showLoading({
					title:'加载中'
				});
				this.$requst.get('/api/user/order-detail',{id:this.id}).then(res=>{
					if(res.code==0){
						console.log(res,'订单详情')
						this.orderDetail = res.data;
						this.coupon_vip_price = this.$toolAll.tools.addXiaoShu(parseFloat(res.data.discount_money) + parseFloat(res.data.coupon_price));
						this.priceAll = this.$toolAll.tools.addXiaoShu(parseFloat(res.data.balance) + parseFloat(res.data.wechat));
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			
			// 取消订单
			cancleEv(coding){
				let params = {
					order_coding: 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)
					}
				})
			},
			// 确认收货
			affirmEv(id){
				let params = {
					order_id: id //订单号
				}
				this.$requst.post('/api/order/accepted',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:'/pages/cart/settlement'
				})
			},
			// 复制查询
			copyEV(){
				this.$toolAll.tools.clickCopy(this.orderDetail.express_number);
			},
		}
	}
</script>

<style scoped>
	
</style>