480 lines
14 KiB
Vue
480 lines
14 KiB
Vue
<template>
|
||
<view class="orderDetailContainer">
|
||
<scroll-view class="contentArea" scroll-y v-if="orderInfo.SALEBILL_ID">
|
||
<!-- 地址信息 + 订单状态 -->
|
||
<view class="addressCard card">
|
||
<view class="statusTag" :class="statusClass">{{ statusName }}</view>
|
||
<view class="userInfo">
|
||
<text class="userName">{{ orderInfo.ORDER_PERSON || '收货人' }}</text>
|
||
<text class="userPhone">{{ orderInfo.ORDER_PERSONTEL || '' }}</text>
|
||
</view>
|
||
<view class="addressDetail">
|
||
<text class="addrText">{{ orderInfo.WAREHOUSE_NAME || '暂无收货地址' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品明细 -->
|
||
<view class="productCard card">
|
||
<view class="cardHeader">商品明细</view>
|
||
<view class="productList">
|
||
<view class="productItem" v-for="(item, index) in orderInfo.CommodityList" :key="index">
|
||
<view class="itemMain">
|
||
<image class="productImg"
|
||
:src="item.IMAGE_PATH || 'https://eshangtech.com/ShopICO/no-picture.png'"
|
||
mode="aspectFill" />
|
||
<view class="itemInfo">
|
||
<view class="itemTitle">{{ item.COMMODITY_NAME }}</view>
|
||
<view class="itemPriceRow">
|
||
<view class="price">
|
||
<text class="symbol">¥</text>
|
||
<text class="val">{{ item.AVERAGE_PRICE }}</text>
|
||
</view>
|
||
<view class="count">x{{ item.ORDER_COUNT }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="itemRemark" v-if="item.SALEDETAIL_DESC">
|
||
<text class="remarkLabel">备注：</text>
|
||
<text class="remarkVal">{{ item.SALEDETAIL_DESC }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单信息 -->
|
||
<view class="infoCard card">
|
||
<view class="infoItem">
|
||
<text class="label">订单编号</text>
|
||
<view class="valBox">
|
||
<text class="val">{{ orderInfo.SALEBILL_CODE }}</text>
|
||
<text class="copyBtn" @click="handleCopy(orderInfo.SALEBILL_CODE)">复制</text>
|
||
</view>
|
||
</view>
|
||
<view class="infoItem">
|
||
<text class="label">下单时间</text>
|
||
<text class="val">{{ orderInfo.ORDER_DATE }}</text>
|
||
</view>
|
||
<view class="infoItem">
|
||
<text class="label">配送单位</text>
|
||
<text class="val">{{ orderInfo.WAREHOUSE_NAME || '' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 价格明细 -->
|
||
<view class="financeCard card">
|
||
<view class="financeItem">
|
||
<text class="label">商品总额</text>
|
||
<text class="val">¥{{ orderInfo.ORDER_AMOUNT }}</text>
|
||
</view>
|
||
<view class="divider"></view>
|
||
<view class="totalRow">
|
||
<text class="label">实付款</text>
|
||
<view class="price">
|
||
<text class="symbol">¥</text>
|
||
<text class="val">{{ orderInfo.ORDER_AMOUNT }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottomPlaceholder"></view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
menu: {},
|
||
orderInfo: {},
|
||
statusName: '',
|
||
statusClass: ''
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
|
||
console.log('options', options);
|
||
|
||
if (options.id) {
|
||
this.fetchOrderDetail(options.id);
|
||
} else {
|
||
uni.showToast({ title: '参数错误', icon: 'none' });
|
||
setTimeout(() => uni.navigateBack(), 1500);
|
||
}
|
||
},
|
||
methods: {
|
||
handleBack() {
|
||
uni.navigateBack();
|
||
},
|
||
async fetchOrderDetail(id) {
|
||
uni.showLoading({ title: '加载中...' });
|
||
const res = await this.$api.$samemberGet(
|
||
"/EShangApiMain/WeChatMall/GetMallOrderDetail",
|
||
{ OrderId: id, WeChat_AppId: "wxee018fb96955552a" }
|
||
);
|
||
console.log('dasjdkasjdas', res);
|
||
|
||
if (res.Result_Code === 100) {
|
||
this.orderInfo = res.Result_Data;
|
||
// 处理状态显示
|
||
this.statusName = this.getStatusName(this.orderInfo.SALEBILL_STATE);
|
||
this.statusClass = this.getStatusClass(this.orderInfo.SALEBILL_STATE);
|
||
} else {
|
||
uni.showToast({ title: res.Result_Desc, icon: 'none' });
|
||
}
|
||
},
|
||
getStatusName(state) {
|
||
const states = {
|
||
1090: '待发货',
|
||
2000: '备货中',
|
||
2010: '已发货',
|
||
3000: '已接收',
|
||
4000: '已完成'
|
||
};
|
||
return states[state] || '';
|
||
},
|
||
// 根据状态返回对应的样式类
|
||
getStatusClass(state) {
|
||
if (state === 1090 || state === 2000) return 'status-pending';
|
||
if (state === 2010) return 'status-shipping';
|
||
if (state === 3000 || state === 4000) return 'status-done';
|
||
return 'status-pending';
|
||
},
|
||
handleCopy(text) {
|
||
uni.setClipboardData({
|
||
data: text,
|
||
success: () => uni.showToast({ title: '复制成功', icon: 'none' })
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.orderDetailContainer {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background-color: #f2f4f5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.navBar {
|
||
background: #fff;
|
||
width: 100%;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
|
||
.navContent {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
|
||
.backBtn {
|
||
width: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.backIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.navTitle {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.placeholder {
|
||
width: 60rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.contentArea {
|
||
flex: 1;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
|
||
.card {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.statusBanner {
|
||
background: linear-gradient(90deg, #1890ff, #4ea4ff);
|
||
padding: 40rpx 30rpx;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.statusLeft {
|
||
color: #fff;
|
||
|
||
.statusText {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.statusTip {
|
||
font-size: 24rpx;
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
.statusIcon {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
.addressCard {
|
||
position: relative;
|
||
padding-bottom: 30rpx;
|
||
|
||
.statusTag {
|
||
position: absolute;
|
||
top: 20rpx;
|
||
right: 20rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
padding: 6rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.userInfo {
|
||
margin-bottom: 10rpx;
|
||
|
||
.userName {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.userPhone {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.addrText {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
line-height: 38rpx;
|
||
}
|
||
|
||
.addressLine {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 6rpx;
|
||
}
|
||
}
|
||
|
||
.productCard {
|
||
.cardHeader {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.productItem {
|
||
margin-bottom: 30rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.itemMain {
|
||
display: flex;
|
||
|
||
.productImg {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
border-radius: 12rpx;
|
||
background: #f9f9f9;
|
||
}
|
||
|
||
.itemInfo {
|
||
flex: 1;
|
||
margin-left: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.itemTitle {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.itemPriceRow {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.price {
|
||
color: #333;
|
||
|
||
.symbol {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.val {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.unit {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.count {
|
||
color: #999;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.itemRemark {
|
||
margin-top: 20rpx;
|
||
background: #f7f8f9;
|
||
padding: 12rpx 20rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 24rpx;
|
||
|
||
.remarkLabel {
|
||
color: #999;
|
||
}
|
||
|
||
.remarkVal {
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.infoCard {
|
||
.infoItem {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 24rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.label {
|
||
color: #999;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.val {
|
||
color: #333;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.valBox {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.copyBtn {
|
||
margin-left: 10rpx;
|
||
color: #1890ff;
|
||
font-size: 24rpx;
|
||
padding: 0 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.financeCard {
|
||
.financeItem {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
|
||
.label {
|
||
color: #666;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.val {
|
||
color: #333;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.divider {
|
||
height: 1rpx;
|
||
background: #f0f0f0;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.totalRow {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.label {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.price {
|
||
color: #ff4d4f;
|
||
|
||
.symbol {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.val {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottomPlaceholder {
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 状态标签颜色类 - 放在根级别确保 scoped 生效 */
|
||
.status-pending {
|
||
color: #e67e22;
|
||
background: rgba(230, 126, 34, 0.1);
|
||
}
|
||
|
||
.status-shipping {
|
||
color: #1890ff;
|
||
background: rgba(24, 144, 255, 0.1);
|
||
}
|
||
|
||
.status-done {
|
||
color: #27ae60;
|
||
background: rgba(39, 174, 96, 0.1);
|
||
}
|
||
</style>
|