商家订单详情页优化

pages/shopOrder/index.vue

@@ -71,7 +71,7 @@
 						page: 1,
 						isPage: true
 					}, {
-						name: '待使用',
+						name: '待核销',
 						type: 'paid',
 						list: [],
 						loadingClass: true,
@@ -80,7 +80,7 @@
 						isPage: true
 					},
 					{
-						name: '已完成',
+						name: '已核销',
 						type: 'complete',
 						list: [],
 						loadingClass: true,
@@ -122,18 +122,8 @@
 				this.getUserOrder();
 			},
 			goDetails(tabIndex,index) {
-				// this.$routerGo('/pages/order/order-details?order_id=55')
-				
-				console.log(tabIndex,index)
 				let item = this.tab_list[tabIndex].list[index]
-				if (item.state == 1) {
-					this.$routerGo('/pages/order/unpay-details?order_id=' + item.id)
-				} else if(item.state == 4){
-					this.$routerGo('/pages/order/apply-details?order_id=' + item.id)
-				}else {
-					this.$routerGo('/pages/order/order-details?order_id=' + item.id)
-				}
-
+				this.$routerGo('/pages/shopOrder/order-details?order_id=' + item.id)
 			},
 			onReachBottom() {
 				let tab_item = this.tab_list[this.current];

pages/shopOrder/order-details.vue

@@ -2,6 +2,7 @@
 	<view>
 		<!-- 商品信息 -->
 		<block v-if="isRight(orderDetails)">
+			<self-line/>
 			<view class="bg-white">
 				<skeleton :loading="skeletonLoading" :row="2" :showAvatar="false" :showTitle="true">
 			
@@ -14,23 +15,24 @@
 							<text class="block text-gray lf-font-28" style="margin-top: 20rpx;line-height: 40rpx;">数量 <text class="margin-left margin-right-xs text-gray">x</text>{{orderDetails.number}}</text>
 							
 							<view class="flex justify-between" style="margin-top: 28rpx;">
-								<lf-price :price="orderDetails.selling_price" style="margin-top: 8rpx;" /> 
-							<!-- 	<view class="text-red text-price lf-font-42 lf-font-bold" style="margin-top: 16rpx;">
+								<lf-price :price="orderDetails.selling_price" /> 
+								<!-- <view class="text-red text-price lf-font-42 lf-font-bold" style="margin-top: 16rpx;">
 									{{Number(orderDetails.selling_price || 0)}}
 								</view> -->
-								<view>
+								<!-- <view>
 									<button v-if="orderDetails.state == 2" class="cu-btn line-orange text-orange round margin-left-sm lf-font-28" @tap="$routerGo('/pages/order/apply-refund?order_id='+orderDetails.id)">申请退款</button>
-									<button v-else class="cu-btn line-gray bg-white border round margin-left-sm lf-font-28">{{orderDetails.state_text.text}}</button>
-								</view>
+									<button v-if="orderDetails.state == 5" class="cu-btn line-gray bg-white border round margin-left-sm lf-font-28">{{orderDetails.state_text.text}}</button>
+								</view> -->
 							</view>
 						</view>
 					</view>
+			
 				</skeleton>
 			</view>
 			
 			<self-line/>
 			<!-- 表单 -->
-			<skeleton :loading="skeletonLoading" :row="16" :showAvatar="false" :showTitle="true">
+			<skeleton :loading="skeletonLoading" :row="10" :showAvatar="false" :showTitle="true">
 				<view class="bg-white">
 					<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
 						<text class="text-gray lf-font-32">订单编号</text>
@@ -60,69 +62,23 @@
 						<text class="lf-font-32 text-black1" v-if="orderDetails.coupons == null">暂无优惠</text>
 					</view>
 				</view>
-				
-				<view>
-					<self-line/>
-					<view class="bg-white flex flex-direction justify-around align-center text-center padding-tb">
-						<view>
-							<tki-qrcode ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff" foreground="#000"
-							 pdground="#000" :onval="true" :loadMake="true" />
-							 <!-- :icon="require('@/static/images/system/user-default.jpg')" -->
-						</view>
-						<view class="flex justify-around align-center text-center" style="margin-top: 10rpx;">
-							<view @tap="refreshCode()" v-if="orderDetails.state==2">
-								<image class="margin-right" src="@/static/images/system/refresh.png" mode="widthFix" style="width: 20px;height: 20px;"></image>
-							</view>
-							<view class="lf-font-32 text-black1">{{checkArea}}</view>
-							<view v-if="orderDetails.state == 2" class="text-orange lf-font-28 margin-left" @tap="copy(checkArea)">复制</view>
-						</view>
-						<view style="margin-top: 10rpx;" class="text-gray lf-font-28" v-if="orderDetails.refund_text">
-							{{orderDetails.refund_text}}
-						</view>
-						<view style="margin-top: 10rpx;" class="text-green lf-font-32" v-if="orderDetails.state == 2">
-							{{orderDetails.confirm_code_text}}
-						</view>
-					</view>
-					<view class="padding-lr padding-tb-sm bg-white flex justify-between align-center solid-top1 btn-bottom">
-						<view class="flex align-center">
-							<text class="text-gray lf-font-28" style="margin-right: 20rpx;">实付款</text>
-							<lf-price :price="orderDetails.amount" /> 
-							
-							
-							<!-- <view class="text-red text-price lf-font-42 lf-font-bold">
-								{{Number(orderDetails.amount || 0)}}
-							</view> -->
-						</view>
-						<view class="lf-font-32 text-black1">
-							{{orderDetails.state_text.text}}
-						</view>
-					</view>
-				</view>
+				<self-line/>
 			</skeleton>
 		</block>
 	</view>
 </template>
 
 <script>
-	import tkiQrcode from "tki-qrcode" // 二维码生成器
 	export default {
-		components: {
-			tkiQrcode
-		},
 		data() {
 			return {
-				base64Img: '',	//
 				skeletonLoading: true,
 				loading: false,
 				order_id:1,
 				orderDetails: {},
-				checkArea: '0'
 			}
 		},
 		computed: {
-			total(){
-				return this.num * this.price
-			},
 			isRight(){
 				return function(val){
 					return this.$shared.isRight(val);
@@ -136,24 +92,14 @@
 			}
 		},
 		methods: {
-			refreshCode() {
-				this.getOrderDetails()
-				this.$msg('刷新成功')
-			},
-			//二维码回调
-			qrR(data) {
-				this.base64Img = data;
-			},
 			getOrderDetails() {
 				this.$http(this.API.API_ORDER_DETAILS, {order_id: this.order_id}).then(res => {
-					if(res.code == 0) {
-						this.orderDetails = res.data
-						this.checkArea = res.data.confirm_code
-						this.skeletonLoading = false
-					}
-					
+					this.orderDetails = res.data
+					this.skeletonLoading = false
 				}).catch(err => {
-					
+					setTimeout(() => {
+						this.$toBack();
+					}, 1000);
 				});
 			},
 			// 点击复制
@@ -161,111 +107,18 @@
 				uni.setClipboardData({
 					data: text
 				});
-			},
-			submit(){
-				this.$routerGo('/pages/order/order?type=all')
-			},
-		},
-		created() {
-			
+			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.tag-self {
-		position: absolute!important;
-		top: 0!important;
-		border-radius: 20rpx 0 20rpx 0!important;
-		width: max-content;
-		height: 32rpx!important;
-	}
-	.title {
-		font-size: 28rpx;
-		color: $u-content-color;
-		height: 80rpx;
-	}
-
-	// tab
-	.ctab {
-		width: 100%;
-		margin: 20rpx 0 0rpx 0rpx;
-		padding: 0 22rpx;
-	}
-
-	// 商品列表
-	.com {
-		width: 100%;
+	.bref-box {
+		text-overflow: -o-ellipsis-lastline;
 		overflow: hidden;
-
-		.list {
-			border-radius: 10rpx;
-			overflow: hidden;
-			margin: 20rpx 32rpx;
-			background-color: #FFFFFF;
-			// box-shadow: 0 0 10px 5px #e5e5e5;
-			box-shadow: 0 10rpx 20rpx 0 rgba(0, 0, 0, 0.1);
-			align-items: flex-start;
-
-			.left {
-				overflow: hidden;
-
-				image {
-					width: 186rpx;
-					height: 186rpx;
-					margin: 20rpx;
-					border-radius: 10rpx;
-				}
-			}
-
-			.right {
-				overflow: hidden;
-				width: 64%;
-
-				.title {
-					margin: 0rpx 20rpx 10rpx 0;
-					color: #222222;
-					font-size: 32rpx;
-				}
-
-				.tips {
-					margin: 16rpx 0;
-					overflow: hidden;
-
-					.u-line-progress {
-						width: 112rpx;
-						overflow: hidden;
-						margin-right: 20rpx;
-					}
-
-					.progress {
-						color: #777777;
-						font-size: 24rpx;
-					}
-
-					.bought {
-						color: #777777;
-						font-size: 24rpx;
-						margin-right: 20rpx;
-					}
-				}
-
-				.price {
-					overflow: hidden;
-					color: #FF0000;
-					margin-top: 10rpx;
-					button {
-						width: 176rpx;
-						height: 60rpx;
-						background: #FE9903;
-						border-radius: 15px;
-						font-size: 24rpx;
-						color: #FFFFFF;
-						margin: 0rpx 20rpx 0rpx 20rpx;
-						border: none;
-					}
-				}
-			}
-		}
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
 	}
-</style>
+</style>