307 lines
6.8 KiB
Vue
307 lines
6.8 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 订单信息 -->
|
|
<view class="info-card">
|
|
<view class="info-item">
|
|
<text class="label">订单编号</text>
|
|
<text class="value">{{ orderInfo.orderSn }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">创建时间</text>
|
|
<text class="value">{{ orderInfo.createTime }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">客户姓名</text>
|
|
<text class="value">{{ orderInfo.memberName }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">客户手机</text>
|
|
<text class="value">{{ orderInfo.memberPhone }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商品信息 -->
|
|
<view class="info-card">
|
|
<view class="card-title">商品信息</view>
|
|
<view class="">
|
|
<view v-for="(item, index) in orderInfo.orderItems" :key="index" class="product-item">
|
|
<image :src="item.productPic" mode="aspectFill" class="product-image" @click="lookPic(item.productPic)"></image>
|
|
<view class="product-info">
|
|
<text class="product-name">{{ item.productName }}</text>
|
|
<view class="product-bottom">
|
|
<text class="product-quantity">x{{ item.productQuantity }}</text>
|
|
<text class="product-price">¥{{ (item.productPrice / 100).toFixed(2) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 订单金额信息 -->
|
|
<view class="amount-info">
|
|
<view class="amount-item">
|
|
<text>总金额</text>
|
|
<text class="price">¥{{ (orderInfo.totalAmount / 100).toFixed(2) }}</text>
|
|
</view>
|
|
<view class="amount-item">
|
|
<text>已付额</text>
|
|
<text class="price paid">¥{{ orderInfo.payAmount ? (orderInfo.payAmount / 100).toFixed(2) : '0.00' }}</text>
|
|
</view>
|
|
<view class="amount-item">
|
|
<text>支付方式</text>
|
|
<view class="payment-method">
|
|
<!-- <u-icon name="weixin-fill" color="#07c160" size="28"></u-icon> -->
|
|
<text>{{getDictName('mall_pay_type',orderInfo.payType,'dictLabel')}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单其他信息 -->
|
|
<view class="info-card">
|
|
<view class="info-item">
|
|
<text class="label">订单来源</text>
|
|
<view class="value source">
|
|
<u-icon name="shopping-mall" size="24"></u-icon>
|
|
<text>{{getDictName('mall_source_type',orderInfo.sourceType,'dictLabel')}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">订单状态</text>
|
|
<text class="value status" :class="['dict-item',getDictName('mall_order_status',orderInfo.orderStatus,'listClass')]">{{getDictName('mall_order_status',orderInfo.orderStatus,'dictLabel')}}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">订单备注</text>
|
|
<text class="value">{{ orderInfo.orderNote || '无' }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
orderId:'',
|
|
orderInfo:{
|
|
"billContent": null,
|
|
"billHeader": null,
|
|
"billReceiverEmail": null,
|
|
"billReceiverPhone": null,
|
|
"billType": 0,
|
|
"confirmStatus": 0,
|
|
"createBy": "",
|
|
"createTime": "",
|
|
"deliveryTime": null,
|
|
"finishTime": null,
|
|
"freightAmount": null,
|
|
"id": "",
|
|
"memberName": "",
|
|
"memberPhone": "",
|
|
"memberUsername": "",
|
|
"orderItems": [],
|
|
"orderNote": null,
|
|
"orderSn": "",
|
|
"orderStatus": 0,
|
|
"orderType": 0,
|
|
"payAmount": null,
|
|
"payTime": null,
|
|
"payType": 0,
|
|
"receiverCity": null,
|
|
"receiverDetailAddress": null,
|
|
"receiverName": null,
|
|
"receiverPhone": null,
|
|
"receiverPostCode": null,
|
|
"receiverProvince": null,
|
|
"receiverRegion": null,
|
|
"sourceType": 0,
|
|
"totalAmount": 0,
|
|
"updateBy": "",
|
|
"updateTime": ""
|
|
},
|
|
mall_order_status:[],
|
|
mall_source_type:[],
|
|
mall_pay_type:[],
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.getDictDataList('mall_order_status');
|
|
this.getDictDataList('mall_source_type');
|
|
this.getDictDataList('mall_pay_type');
|
|
console.log("option",option)
|
|
this.orderId = option.id;
|
|
this.getOrderDetail(option.id);
|
|
},
|
|
methods:{
|
|
// 获取订单详情
|
|
getOrderDetail(id){
|
|
this.$api.orderApi.getOrderDetail(id).then((res)=>{
|
|
console.log("获取订单详情",res)
|
|
if(res.code == 200){
|
|
this.orderInfo = res.data;
|
|
}
|
|
}).catch(()=>{
|
|
})
|
|
},
|
|
getDictDataList(type){
|
|
this.$api.getDictList(type).then((res)=>{
|
|
if(res.code===200){
|
|
this[type] = res.data || [];
|
|
}
|
|
})
|
|
},
|
|
getDictName(list,value,key){
|
|
let name = ''
|
|
if(this[list]){
|
|
this[list].forEach((item)=>{
|
|
if(item.dictValue == value){
|
|
name = item[key];
|
|
}
|
|
})
|
|
return name;
|
|
}
|
|
},
|
|
lookPic(url){
|
|
uni.previewImage({
|
|
current: '', // 当前显示图片的 http 链接
|
|
urls: [url] // 需要预览的图片 http 链接列表
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.info-card {
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
.label {
|
|
color: #666;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.value {
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.product-item {
|
|
display: flex;
|
|
padding: 20rpx 0;
|
|
border-bottom: 1rpx solid #eee;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
|
|
.product-image {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 8rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.product-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.product-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.product-quantity {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.product-price {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.amount-info {
|
|
margin-top: 30rpx;
|
|
padding-top: 30rpx;
|
|
border-top: 1rpx solid #eee;
|
|
}
|
|
|
|
.amount-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
font-size: 28rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.price {
|
|
font-weight: 500;
|
|
|
|
&.paid {
|
|
color: #19be6b;
|
|
}
|
|
}
|
|
}
|
|
|
|
.payment-method {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.source {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.status {
|
|
color: #19be6b;
|
|
}
|
|
</style>
|
|
|