404 lines
14 KiB
Vue
404 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<view class="order-detail">
|
|||
|
|
|
|||
|
|
<view class="m-t-20 bg-white">
|
|||
|
|
<!-- Header -->
|
|||
|
|
<view class="order-header flex row-between">
|
|||
|
|
<view class="black md bold">
|
|||
|
|
商品信息
|
|||
|
|
</view>
|
|||
|
|
<view class="order-status nr m-l-20">
|
|||
|
|
{{orderInfo.order_status_text}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- Stction -->
|
|||
|
|
<block v-for="(item, index) in orderInfo.order_goods">
|
|||
|
|
<view class="goods flex m-t-20" @click="toDetail(orderInfo.id)">
|
|||
|
|
<view class="image">
|
|||
|
|
<u-image :src="item.image" width="160rpx" height="160rpx"></u-image>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="m-l-16 line-2">
|
|||
|
|
<!-- 订单名称 -->
|
|||
|
|
<view class="m-b-10 flex row-between col-top">
|
|||
|
|
<view class="order-name ">
|
|||
|
|
{{item.goods_name}}
|
|||
|
|
</view>
|
|||
|
|
<view class="text-right " style="height: 100%;">
|
|||
|
|
<view>¥{{item.goods_price}}</view>
|
|||
|
|
<view>x{{item.goods_num}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 商品规格 -->
|
|||
|
|
<view class="order-str m-t-10">{{item.spec_value}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
<u-collapse>
|
|||
|
|
<u-collapse-item v-for="(item, index) in itemList" :key="index">
|
|||
|
|
<view slot="title" class="p-l-20 p-r-20 nr flex row-between" style="width: 100%;">
|
|||
|
|
<view class="normal">支付方式：{{orderInfo.pay_way_text}}</view>
|
|||
|
|
<view class="lighter">实际付款：<text style="color: #FF0000;">¥{{orderInfo.order_amount}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="flex m-b-20 row-around">
|
|||
|
|
<view>商品金额： ¥{{orderInfo.goods_price}}</view>
|
|||
|
|
<view>运费金额： ¥{{orderInfo.shipping_price}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="m-b-40 flex row-around">
|
|||
|
|
<view>会员优惠： ¥{{orderInfo.member_amount}}</view>
|
|||
|
|
<view>优惠金额： ¥{{orderInfo.discount_amount}}</view>
|
|||
|
|
</view>
|
|||
|
|
</u-collapse-item>
|
|||
|
|
</u-collapse>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="bg-white m-t-20" style="padding: 20rpx 20rpx 50rpx 20rpx;" v-if="orderInfo.delivery_content">
|
|||
|
|
<view class="black md bold">
|
|||
|
|
发货内容
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
<view>
|
|||
|
|
{{orderInfo.delivery_content || '-'}}
|
|||
|
|
</view>
|
|||
|
|
<view class="flex row-right m-t-30" @click="copy(orderInfo.delivery_content)">
|
|||
|
|
<view class="copy-btn" >复制</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="bg-white m-t-20" style="padding: 20rpx 20rpx 50rpx 20rpx;">
|
|||
|
|
<view class="black md bold">
|
|||
|
|
买家信息
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
买家昵称： {{orderInfo.user.nickname || '-'}}
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
买家编号： {{orderInfo.user.sn}}
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
买家手机号： {{orderInfo.user.mobile}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="bg-white m-t-20" style="padding: 20rpx 20rpx 50rpx 20rpx;">
|
|||
|
|
<view class="black md bold">
|
|||
|
|
收货信息
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
收件人： {{orderInfo.consignee}}
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
手机号： {{orderInfo.mobile}}
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
收货地址： {{orderInfo.delivery_address}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 发票信息 -->
|
|||
|
|
<view class="bg-white m-t-20" style="padding: 20rpx 20rpx 50rpx 20rpx;" v-if="orderInfo.invoice != null">
|
|||
|
|
<view class="black md bold">
|
|||
|
|
发票信息
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
发票类型： {{orderInfo.invoice.type == 0 ? '普通发票' : '专用发票'}}
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
抬头名称： {{orderInfo.invoice.name}}
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
抬头类型： {{orderInfo.invoice.header_type == 0 ? '个人' : '企业'}}
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20" v-if="orderInfo.invoice.duty_number">
|
|||
|
|
企业税号： {{orderInfo.invoice.duty_number}}
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
电子邮箱： {{orderInfo.invoice.email}}
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20" v-if="orderInfo.invoice.address">
|
|||
|
|
企业地址： {{orderInfo.invoice.address}}
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20" v-if="orderInfo.invoice.mobile">
|
|||
|
|
企业电话： {{orderInfo.invoice.mobile}}
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20" v-if="orderInfo.invoice.bank">
|
|||
|
|
开户银行： {{orderInfo.invoice.bank}}
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20" v-if="orderInfo.invoice.bank_account">
|
|||
|
|
银行账号： {{orderInfo.invoice.bank_account}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="bg-white m-t-20" style="padding: 20rpx 20rpx 50rpx 20rpx;">
|
|||
|
|
<view class="black md bold">
|
|||
|
|
订单信息
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
订单编号： {{orderInfo.order_sn}}
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
订单类型： {{orderInfo.order_type_text}}({{orderInfo.order_source_text}})
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
下单时间： {{orderInfo.create_time}}
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
支付状态： {{orderInfo.pay_status_text}}
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
支付时间： {{orderInfo.pay_time}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="bg-white m-t-20" style="padding: 20rpx 20rpx 50rpx 20rpx;">
|
|||
|
|
<view class="black md bold">
|
|||
|
|
买家留言
|
|||
|
|
</view>
|
|||
|
|
<view class="normal sm m-t-20">
|
|||
|
|
{{orderInfo.user_remark||'-'}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="footer bg-white flex row-right">
|
|||
|
|
<template v-if="orderInfo.edit_address_btn">
|
|||
|
|
<router-link :to="'/pages/address_edit/address_edit?id='+orderInfo.id">
|
|||
|
|
<button class="btn hollow br60 flex row-center normal">修改地址</button>
|
|||
|
|
</router-link>
|
|||
|
|
</template>
|
|||
|
|
<template v-if="orderInfo.shop_cancel_btn">
|
|||
|
|
<button class="btn solid br60 flex row-center normal" @click="openFunc(orderInfo, 'close')">取消订单</button>
|
|||
|
|
</template>
|
|||
|
|
<template v-if="orderInfo.to_ship_btn">
|
|||
|
|
<router-link :to="'/bundle/pages/deliver_goods/deliver_goods?id='+orderInfo.id">
|
|||
|
|
<button class="btn solid br60 flex row-center normal">去发货</button>
|
|||
|
|
</router-link>
|
|||
|
|
</template>
|
|||
|
|
<template v-if="orderInfo.take_btn">
|
|||
|
|
<button class="btn solid br60 flex row-center normal" @click="openFunc(orderInfo, 'confirm')">确认收货</button>
|
|||
|
|
</template>
|
|||
|
|
<template v-if="orderInfo.delivery_btn">
|
|||
|
|
<button class="btn hollow br60 flex row-center normal" @click="openFunc(orderInfo, 'recycle')">查看物流</button>
|
|||
|
|
</template>
|
|||
|
|
<template v-if="orderInfo.del_btn">
|
|||
|
|
<button class="btn hollow br60 flex row-center normal" @click="openFunc(orderInfo, 'del')">删除</button>
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<modal height="200rpx" v-model="close" @confirm="orderSetting">
|
|||
|
|
<view class="black nr flex row-center" style="height: 200rpx;">
|
|||
|
|
确认取消该订单吗?
|
|||
|
|
</view>
|
|||
|
|
</modal>
|
|||
|
|
|
|||
|
|
<modal height="200rpx" v-model="del" @confirm="orderSetting">
|
|||
|
|
<view class="black nr flex row-center" style="height: 200rpx;">
|
|||
|
|
确认删除该订单吗?
|
|||
|
|
</view>
|
|||
|
|
</modal>
|
|||
|
|
|
|||
|
|
<modal height="200rpx" v-model="confirm" @confirm="orderSetting">
|
|||
|
|
<view class="black nr flex row-center" style="height: 200rpx;">
|
|||
|
|
确认用户已收到货？请谨慎处理！
|
|||
|
|
</view>
|
|||
|
|
</modal>
|
|||
|
|
|
|||
|
|
<modal height="200rpx" :cancelShow="false" v-model="recycle">
|
|||
|
|
<view class="black nr" style="height: 200rpx;">
|
|||
|
|
<view class="m-t-40">快递公司： {{logistics.shipping_name}}</view>
|
|||
|
|
<view class="m-t-20">快递公司： {{logistics.invoice_no}} <text class="copy" @click="copy(logistics.invoice_no)">复制</text></view>
|
|||
|
|
</view>
|
|||
|
|
</modal>
|
|||
|
|
|
|||
|
|
<u-toast ref="uToast" />
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
apiOrderDetail,
|
|||
|
|
apiOrderClose,
|
|||
|
|
apiOrderConfirm,
|
|||
|
|
apiOrderLogistics,
|
|||
|
|
apiOrderDelete
|
|||
|
|
} from '@/api/order'
|
|||
|
|
import {
|
|||
|
|
copy
|
|||
|
|
} from "@/utils/tools.js"
|
|||
|
|
export default {
|
|||
|
|
name: 'orderDetail',
|
|||
|
|
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
orderInfo: {
|
|||
|
|
user: {
|
|||
|
|
nickname: ''
|
|||
|
|
}
|
|||
|
|
}, // 商品信息
|
|||
|
|
itemList: [{
|
|||
|
|
head: "赏识在于角度的转换",
|
|||
|
|
body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
|
|||
|
|
open: true,
|
|||
|
|
disabled: true
|
|||
|
|
}],
|
|||
|
|
|
|||
|
|
action: '',
|
|||
|
|
|
|||
|
|
close: false,
|
|||
|
|
del: false,
|
|||
|
|
confirm: false,
|
|||
|
|
recycle: false,
|
|||
|
|
|
|||
|
|
// 物流
|
|||
|
|
logistics: {
|
|||
|
|
shipping_name: '-',
|
|||
|
|
invoice_no: ''
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
|
|||
|
|
// 初始化商品详情数据
|
|||
|
|
initOrderDetail() {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
apiOrderDetail({
|
|||
|
|
id: this.order_id
|
|||
|
|
}).then(data => {
|
|||
|
|
this.orderInfo = data
|
|||
|
|
}).catch(err => {
|
|||
|
|
reject(err)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
copy(content) {
|
|||
|
|
copy(content)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async openFunc(item, action) {
|
|||
|
|
if(action == 'recycle') {
|
|||
|
|
const res = await apiOrderLogistics({id: item.id})
|
|||
|
|
this.logistics = res;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.curData = item;
|
|||
|
|
this.action = action;
|
|||
|
|
this[action] = true;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 操作订单
|
|||
|
|
async orderSetting() {
|
|||
|
|
let id = this.curData.id,
|
|||
|
|
action = this.action
|
|||
|
|
|
|||
|
|
if (action == 'close') {
|
|||
|
|
await apiOrderClose({id})
|
|||
|
|
} else if (action == 'del') {
|
|||
|
|
await apiOrderDelete({id})
|
|||
|
|
} else if (action == 'confirm') {
|
|||
|
|
await apiOrderConfirm({id})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.initOrderDetail()
|
|||
|
|
this.$refs.uToast.show({
|
|||
|
|
title: '操作成功',
|
|||
|
|
type: 'success'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onLoad() {
|
|||
|
|
const options = this.$Route.query
|
|||
|
|
this.order_id = options.id
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async onShow() {
|
|||
|
|
await this.initOrderDetail()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.order-detail {
|
|||
|
|
padding-bottom: 150rpx;
|
|||
|
|
|
|||
|
|
.order-header {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
|
|||
|
|
.order-status {
|
|||
|
|
color: $-color-primary;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
|
|||
|
|
.order-name {
|
|||
|
|
width: 400rpx;
|
|||
|
|
|
|||
|
|
color: $-color-black;
|
|||
|
|
font-size: $-font-size-nr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-str {
|
|||
|
|
color: $-color-muted;
|
|||
|
|
font-size: $-font-size-xs;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
>view {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image {
|
|||
|
|
flex: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 120rpx;
|
|||
|
|
padding: 18rpx 0;
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
width: 168rpx;
|
|||
|
|
height: 64rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hollow {
|
|||
|
|
color: $-color-lighter;
|
|||
|
|
border: 1px solid #DBDBDB;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.solid {
|
|||
|
|
color: $-color-white;
|
|||
|
|
background-color: $-color-primary;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.copy {
|
|||
|
|
font-size: $-font-size-xs;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
padding: 4rpx 10rpx;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
color: $-color-primary;
|
|||
|
|
background-color: rgba(64, 175, 250, .1);
|
|||
|
|
}
|
|||
|
|
.copy-btn {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
padding: 10rpx 30rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
color: $-color-primary;
|
|||
|
|
background: rgba($color: $-color-primary, $alpha: .1);
|
|||
|
|
}
|
|||
|
|
</style>
|