mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 10:57:25 +08:00
refactor(myOrder, orderDetail): improve UI components and logic
- Updated order promotion tag rendering logic for better clarity. - Enhanced image handling for order items to ensure correct display. - Refined radio button implementation in cancellation reasons for consistency. - Adjusted styles for order number display and overall layout for improved user experience.
This commit is contained in:
@@ -17,7 +17,7 @@
|
|||||||
<view class="seller-name wes" @click="navigateToStore(order)">
|
<view class="seller-name wes" @click="navigateToStore(order)">
|
||||||
<view class="name">{{ order.storeName }}</view>
|
<view class="name">{{ order.storeName }}</view>
|
||||||
|
|
||||||
<view class="name" v-if="order.orderPromotionType">
|
<view class="name" v-if="renderOrderTag(order.orderPromotionType)">
|
||||||
<u-tag
|
<u-tag
|
||||||
:text="renderOrderTag(order.orderPromotionType)"
|
:text="renderOrderTag(order.orderPromotionType)"
|
||||||
:color="renderOrderTagColor(order.orderPromotionType)"
|
:color="renderOrderTagColor(order.orderPromotionType)"
|
||||||
@@ -33,8 +33,8 @@
|
|||||||
<view class="goods-item-view" @click="navigateToOrderDetail(order.sn)">
|
<view class="goods-item-view" @click="navigateToOrderDetail(order.sn)">
|
||||||
<view class="goods-img" v-for="(goods, goodsIndex) in order.orderItems"
|
<view class="goods-img" v-for="(goods, goodsIndex) in order.orderItems"
|
||||||
:key="goodsIndex">
|
:key="goodsIndex">
|
||||||
<u-image border-radius="6" width="100%" height="100%"
|
<u-image border-radius="6" width="131rpx" height="131rpx" mode="aspectFill"
|
||||||
:src="goods.image"></u-image>
|
:src="getOrderItemImage(goods, order, goodsIndex)"></u-image>
|
||||||
</view>
|
</view>
|
||||||
<view class="goods-info">
|
<view class="goods-info">
|
||||||
<view v-if="order.orderItems.length <= 1" class="goods-title u-line-2">
|
<view v-if="order.orderItems.length <= 1" class="goods-title u-line-2">
|
||||||
@@ -94,8 +94,8 @@
|
|||||||
<u-radio-group v-model="reason">
|
<u-radio-group v-model="reason">
|
||||||
<view class="value">
|
<view class="value">
|
||||||
<view class="radio-view" :key="index" v-for="(item, index) in cancelList">
|
<view class="radio-view" :key="index" v-for="(item, index) in cancelList">
|
||||||
<u-radio :active-color="lightColor" label-size="25" shape="circle" :name="item.reason"
|
<u-radio :active-color="lightColor" shape="circle" :name="item.reason"
|
||||||
@change="reasonChange">{{ item.reason }}</u-radio>
|
:label="item.reason" @change="reasonChange"></u-radio>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</u-radio-group>
|
</u-radio-group>
|
||||||
@@ -208,7 +208,7 @@
|
|||||||
cancelShow: false, //是否显示取消
|
cancelShow: false, //是否显示取消
|
||||||
orderSn: "", //ordersn
|
orderSn: "", //ordersn
|
||||||
reason: "", //取消原因
|
reason: "", //取消原因
|
||||||
cancelList: "", //取消列表
|
cancelList: [], //取消列表
|
||||||
rogShow: false, //显示是否收货
|
rogShow: false, //显示是否收货
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@@ -285,7 +285,7 @@
|
|||||||
renderOrderTag(orderPromotionType) {
|
renderOrderTag(orderPromotionType) {
|
||||||
switch (orderPromotionType) {
|
switch (orderPromotionType) {
|
||||||
case "NORMAL":
|
case "NORMAL":
|
||||||
return "普通订单";
|
return "";
|
||||||
case "PINTUAN":
|
case "PINTUAN":
|
||||||
return "拼团订单";
|
return "拼团订单";
|
||||||
break;
|
break;
|
||||||
@@ -320,6 +320,14 @@
|
|||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
getOrderItemImage(goods, order, index) {
|
||||||
|
let image = goods.image;
|
||||||
|
if (!image && order.groupImages) {
|
||||||
|
const images = String(order.groupImages).split(",");
|
||||||
|
image = images[index] || images[0];
|
||||||
|
}
|
||||||
|
return this.parseGoodsImageUrl(image);
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* 取消订单
|
* 取消订单
|
||||||
*/
|
*/
|
||||||
@@ -587,6 +595,7 @@
|
|||||||
|
|
||||||
.list-scroll-content {
|
.list-scroll-content {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
padding: 16rpx 20rpx 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
@@ -632,11 +641,11 @@
|
|||||||
.seller-view {
|
.seller-view {
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
margin: 20rpx 0rpx;
|
margin: 16rpx 0;
|
||||||
|
|
||||||
.seller-info {
|
.seller-info {
|
||||||
height: 70rpx;
|
padding: 24rpx 20rpx 16rpx;
|
||||||
padding: 0 20rpx;
|
align-items: center;
|
||||||
|
|
||||||
.seller-name {
|
.seller-name {
|
||||||
flex: 10;
|
flex: 10;
|
||||||
|
|||||||
@@ -148,9 +148,9 @@
|
|||||||
<view style="width: 100%">
|
<view style="width: 100%">
|
||||||
<view class="order-info-view">
|
<view class="order-info-view">
|
||||||
<view class="title">订单编号:</view>
|
<view class="title">订单编号:</view>
|
||||||
<view class="value">
|
<view class="value order-sn-value">
|
||||||
{{ order.sn }}
|
<text class="order-sn-text">{{ order.sn }}</text>
|
||||||
<u-tag class="copy" text="复制" type="info" size="mini" @click="onCopy(order.sn)" />
|
<u-tag class="copy" text="复制" type="info" mode="plain" size="mini" @click="onCopy(order.sn)" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="order-info-view">
|
<view class="order-info-view">
|
||||||
@@ -229,8 +229,8 @@
|
|||||||
<u-radio-group v-model="reason">
|
<u-radio-group v-model="reason">
|
||||||
<view class="value">
|
<view class="value">
|
||||||
<view class="radio-view" v-for="(item, index) in cancelList" :key="index">
|
<view class="radio-view" v-for="(item, index) in cancelList" :key="index">
|
||||||
<u-radio :active-color="lightColor" label-size="25" shape="circle" :name="item.reason"
|
<u-radio :active-color="lightColor" shape="circle" :name="item.reason"
|
||||||
@change="reasonChange">{{ item.reason }}</u-radio>
|
:label="item.reason" @change="reasonChange"></u-radio>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</u-radio-group>
|
</u-radio-group>
|
||||||
@@ -701,11 +701,20 @@ page,
|
|||||||
flex:10;
|
flex:10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.order-sn-value {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-sn-text {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
.copy {
|
.copy {
|
||||||
font-size: 20rpx;
|
margin-left: 16rpx;
|
||||||
color: #333;
|
flex-shrink: 0;
|
||||||
border: 1px solid #dddddd;
|
|
||||||
margin-left: 30rpx;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user