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

99 lines
4.0 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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>