mall-applet1/pagesB/order-detail/order-detail.vue

<template>
	<view>
		<status-container titlet="订单详情">
			<view slot="content">
				<view class="pad-zy20">
					<view class="bacf radius30 pad-sx30 pad-zy40 fon30 mar-x25">
						<view class="disjbac">
							<view class="">订单编号</view>
							<view class="bold">{{orderDetail.coding}}</view>
						</view>
						<view class="disjbac mar-sx30">
							<view class="">下单时间</view>
							<view class="bold">{{orderDetail.status_text}}</view>
						</view>
						<view class="disjbac">
							<view class="">订单状态</view>
							<view class="bold">{{orderDetail.coding}}</view>
						</view>
					</view>
					<view class="bacf radius30 pad-sx30 pad-zy40 fon30 mar-x25">
						<view class="">订单信息</view>
						<view class="disjb bbot pad-sx30" v-for="(item,index) in orderDetail.skus" :key="index">
							<image class="mar-y30 flexs radius30" :src="item.sku_cover" mode="widthFix" style="width: 210rpx;height: 210rpx;"></image>
							<view class="width100 disjb fc line-h40" style="height: 210rpx;">
								<view class="clips2 fon24">{{item.spu_name}} </view>
								<view class="">
									<view class="fon24 mar-x30" style="color: #8c8c9b;">单位：{{item.sku_unit}}</view>
									<view class="disjbac ">
										<view class="textc bold">￥{{item.price}}</view>
										<view class="fon24" style="color: #8c8c9b;">x{{item.num}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="disje pad-s30">总计：<text class="fon36 bold textc" style="margin-top: -6rpx;">￥{{orderDetail.original_price}}</text></view>
					</view>
					<view class="bacf radius30 pad-sx30 pad-zy40 fon30 mar-x25">
						<view class="mar-x30">联系信息</view>
						<view class="bold">{{orderDetail.contacts}} {{orderDetail.phone}}</view>
						<view class="fon24">
							<view class="mar-sx10" style="color: #8c8c9b;">{{orderDetail.address}}</view>
							<view class="" style="color: #8c8c9b;">婚期：{{orderDetail.wedding_date}}</view>
							<view class="mar-s10" style="color: #8c8c9b;">希望到货时间：{{orderDetail.expected_delivery_date}}</view>
						</view>
					</view>
				</view>
			</view>
		</status-container>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail: []
			}
		},
		onShareAppMessage(res) {
			var shareObj = {
		　　　　	title: res.target.dataset.title, // 默认是小程序的名称(可以写slogan等)
		　　　　	path: `/pagesB/shopDetail/shopDetail?id=${res.target.dataset.id}&category_id=0&is_activity=${res.target.dataset.is_activity}&share_id=${uni.getStorageSync('userId')}&invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
		　　　　	imageUrl: res.target.dataset.imgsrc//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
		　	};
		　　return shareObj;
		},
		onLoad(op) {
			this.getDetail(op.id);
		},
		methods: {
			getDetail(id){
				this.$requst.post('/api/user/order-detail',{id}).then(res=>{
					if(res.code==0) {
						let dataObj = {
							coding: res.data.coding, //订单号
							created_at: res.data.created_at, //下单时间
							status_text: res.data.status_text, //订单状态
							expected_delivery_date: res.data.expected_delivery_date, //期望到货时间
							wedding_date: res.data.wedding_date, //婚期
							original_price: res.data.original_price, //总价
							contacts: res.data.contacts, //收件人姓名
							address: res.data.address, //收件地址
							phone: res.data.phone, //联系电话
							skus: res.data.skus //订单详情列表
						}
						this.orderDetail = dataObj;
						console.log(this.orderDetail,'订单详情2')
					}
				})
			}
		}
	}
</script>

<style>
	.navigate-to-where {height: 98rpx;line-height: 98rpx;background: linear-gradient(to right, #ff3772 0%,#fd5548 100%);box-shadow: 0rpx 6rpx 10rpx rgba(0, 0, 0, 0.2);}
</style>