<template> <view class="wrapper"> <view class="order-status w-100"> {{order_detail.order.order_status | orderStatus}} </view> <view class="goods w-100"> <block v-for="(item, index) in order_detail.goods" :key="index" > <view class="goods-item"> <view class="flex j-start a-center"> <image class="cover" :src="baseUrl + '/' + item.goods_thumb" mode="aspectFit" /> <view class="title flex-1">{{item.goods_name}}</view> </view> <block v-for="(s, sidx) in item.list" :key="sidx" > <view class="mt-2">规格:{{s.goods_attr}}</view> <view class="mt-2">单价:{{s.goods_price}}</view> <view class="mt-2 flex j-between a-center"> <text>数量:{{s.cart_number}}</text> <text class="primary">小计:¥{{s.amount}}</text> </view> </block> </view> </block> </view> <view class="wrap mt-2 flex j-end a-center"> 合计:<text class="primary">{{order_detail.totalCount || 0}}</text><text class="mr-2">件</text>合计:<text class="primary">¥{{order_detail.order.sum_amount || 0}}</text> </view> <view class="mt-2 box" v-if="order_detail.order.shipping_type === '1'"> <view>商家派送: 商家自行派送<text class="primary ml-1" @click="makePhoneCall()">联系商家</text></view> <view class="mt-2">派送地址: {{order_detail.order.address_json.address1 + order_detail.order.address_json.address2}}</view> <view class="mt-2"> <text class="mr-2">{{order_detail.order.address_json.consignee}}</text> <text>{{order_detail.order.address_json.mobile}}</text> </view> </view> <view class="mt-2 box" v-else> <view>商家派送: 买家自提<text class="primary ml-1" @click="makePhoneCall()">联系商家</text></view> <view class="mt-2">派送地址: {{order_detail.order.pickup_address}}</view> <view class="mt-2"> <text class="mr-2">店铺名称:</text> <text>{{order_detail.order.shop_name}}</text> </view> <view class="mt-2"> <text class="mr-2">自提时间:</text> <text>{{order_detail.order.pickup_hours}}</text> </view> </view> <view class="wrap mt-2">发票: 发票信息参数(文字/图片等)</view> <view class="mt-2 box"> <view class="item w-100 flex j-start a-center"> <view class="hd">订单编号:</view> <view class="flex-1 flex j-between a-center"> <text>{{order_detail.order.order_sn}}</text> <text class="primary" @click="copyOrderSn">复制</text> </view> </view> <view class="item w-100 flex j-start a-center"> <view class="hd">创建时间:</view> <view class="flex-1"> <text>{{order_detail.order.add_time | parseTime}}</text> </view> </view> </view> <view class="mt-2 flex j-end a-center"> <order-btn :item="order_detail.order" @changeData='changeData'> <countdown-t slot="time" v-if="order_detail.order.goods_before_pay === '0' && order_detail.order.countdownT > 0" :countdownNum="order_detail.order.countdownT" :pauseTimer="pauseTimer" :params="{ index }" @timerEnd="timerEnd" /> </order-btn> </view> </view> </template> <script> import orderBtn from './components/order-btn.vue' import countdownT from './components/countdownT.vue' import { orderDetail } from '@/apis/order.js' import { makePhoneCall } from '@/utils/common.js' import { baseUrl } from '@/config/index.js' let order_sn = null const order_statsu = { '0': '待接单', '1': '待付款', '2': '交易关闭', '5': '交易完成', '6': '待发货', '7': '待收货', '9': '退货退款中', '10': '已收货', '11': '退款退货审核' } export default { data() { return { baseUrl, order_detail: { order: { add_time: '' } } } }, components: { countdownT, orderBtn }, onLoad(ops) { order_sn = ops.order_sn this.getDetail() }, filters: { orderStatus(val) { console.log(val) return order_statsu[val] || '' } }, methods: { makePhoneCall, changeData() { this.getDetail() }, async getDetail() { try{ if(!order_sn) return const { status, data } = await orderDetail(order_sn) if(status) { if(data.order.order_status === '1') { // item.pay_endTime = item.confirm_time === '0' ? 0 : ~~item.confirm_time + 3600 data.order.countdownT = ~~data.order.confirm_time + 3600 - data.order.confirm_time // item.last_payTime = '' } else { data.order.countdownT = 0 // item.last_payTime = '' } this.order_detail = { goods: data.goods2 || [], order: data.order || {}, totalCount: data.goods2.reduce((pre, cur) => { return pre + cur.list.reduce((p, c) => { return p + ~~c.cart_number }, 0) }, 0) } } }catch(e){ this.$toast({title: e.msg || '程序错误,获取订单详情失败'}) //TODO handle the exception } }, // 复制订单号 copyOrderSn() { if(!order_sn) return this.$toast({title: '订单号为空'}) uni.setClipboardData({ data: order_sn, success: () => { this.$toast({title: '复制成功'}) } }) } } } </script> <style lang="scss" scoped> .wrapper { .order-status { padding: 24rpx 30rpx; color: #fff; background-color: $primary; } .goods { background-color: #fff; .goods-item { @include borderBox(20rpx, 30rpx); border-bottom: 1rpx solid $line; &:first-child { margin-top: 20rpx; } &:last-child { border-bottom: none; } .cover { flex: 0 0 160rpx; width: 160rpx; height: 160rpx; margin-right: 20rpx; } } } .primary { color: $primary; } .wrap { padding: 24rpx 30rpx; background-color: #fff; } .box { @include borderBox(20rpx, 30rpx); background-color: #fff; .item { margin-bottom: 20rpx; &:last-child { border-bottom: none; } .hd { flex: 0 0 140rpx; } } } .btn-wrap { box-sizing: border-box; width: 100%; background-color: #fff; .btn { @include borderBox(16rpx, 34rpx); border-radius: 8rpx; } .cancle { border: 1rpx solid $line; background-color: #fff; } .pay { color: #fff; background-color: $primary; } } } </style>