修改

pages.json

@@ -176,6 +176,7 @@
 			}, {
 				"path": "CommodityOrder/CommodityOrder",
 				"style": {
+					"navigationStyle": "custom", // 隐藏系统导航栏
 					"navigationBarTitleText": "商品订单",
 					"onReachBottomDistance": 40, //距离底部多远时触发 单位为px
 					"enablePullDownRefresh": true //设置参数为true

pages/myinformation/myinformation.vue

@@ -54,30 +54,30 @@
 			<view class="title">
 				我的订单
 			</view>
-			<view class="righttitle" @tap="goorder">
+			<view class="righttitle" @tap="goorder(0,'')">
 				查看全部
 				<image src="../../static/huijiantou.png" mode=""></image>
 			</view>
 			<view class="orderStatus">
-				<view class="item">
+				<view class="item" @tap="goorder(1,'WAIT_PAY')">
 					<image src="../../static/pages/daifukuan.png" mode=""></image>
 					<view class="text">
 						待付款
 					</view>
 				</view>
-				<view class="item">
+				<view class="item" @tap="goorder(2,'WAIT_RECEIVED_GOODS')">
 					<image src="../../static/pages/daishouhuo.png" mode=""></image>
 					<view class="text">
 						待收货
 					</view>
 				</view>
-				<view class="item">
+				<view class="item" @tap="goorder(3,'RECEIVED_GOODS')">
 					<image src="../../static/pages/daipingjia.png" mode=""></image>
 					<view class="text">
 						待评价
 					</view>
 				</view>
-				<view class="item">
+				<view class="item" @tap="goorder(4,'EVALUATED')">
 					<image src="../../static/pages/yiwancheng.png" mode=""></image>
 					<view class="text">
 						已完成
@@ -156,12 +156,12 @@
 		},
 		methods: {
 			//全部订单
-			goorder() {
+			goorder(index, item) {
 				const value = uni.getStorageSync('openid');
 				const value2 = uni.getStorageSync('patientId');
 				if (value && value2) {
 					uni.navigateTo({
-						url: '/pagesB/CommodityOrder/CommodityOrder'
+						url: `/pagesB/CommodityOrder/CommodityOrder?toindex=${index}&&orderStatus=${item}`
 					})
 				} else {
 					this.gologin();

pagesB/CommodityOrder/CommodityOrder.scss

@@ -1,10 +1,62 @@
+page{
+	background-color: #F7F5F5;
+}
 .app {
 		width: 100%;
 		padding: 3%;
-		padding: 3%;
+		::v-deep .u-tabs{
+			background-color: #F7F5F5 !important;
+		}
 		.noorder{
 			margin-top: 20%;
 		}
+		.u-navbar{
+			image{
+				margin:0 4% 0 4%;
+				width: 20rpx;
+				height: 30rpx;
+			}
+			.title{
+				width: 31%;
+			font-size: 34rpx;
+			font-weight: 500;
+			color: #FFFFFF;
+			}
+			.inputs {
+				position: relative;
+				margin-left: 4%;
+				box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
+				width: 60%;
+				height: 65rpx;
+				border-radius: 20rpx;
+				z-index: 999;
+			background: #65c0a9;
+			color: #FFFFFF;
+			.placeholder{
+				color: #FFFFFF;
+			}
+				.input {
+					margin: 0 auto;
+					position: absolute;
+					height: 65rpx;
+					// top: 8%;
+					left: 18%;
+					width: 80%;
+					font-size: 26rpx;
+					color: #FFFFFF;
+				}
+			
+				.icon {
+					background: url(@/static/pagesB/sousuo.png) no-repeat;
+					width: 30rpx;
+					height: 28rpx;
+					background-size: cover;
+					position: absolute;
+					top: 28%;
+					left: 4%;
+				}
+			}
+		}
 		.submits {
 			width: 501rpx;
 			height: 71rpx;
@@ -210,36 +262,5 @@
 			}
 		}
 
-		.inputs {
-			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
-			border: 1px solid #f0f0f0;
-			width: 100%;
-			height: 65rpx;
-			margin: 10rpx 0 10rpx 50%;
-			transform: translateX(-50%);
-			border-radius: 20rpx;
-			background-color: #Ffffff;
-			z-index: 999;
 
-			.input {
-				margin: 0 auto;
-				position: absolute;
-				height: 65rpx;
-				// top: 8%;
-				left: 10%;
-				width: 90%;
-				font-size: 26rpx;
-				color: #000000;
-			}
-
-			.icon {
-				background: url(@/static/pagesB/sousuo.png) no-repeat;
-				width: 30rpx;
-				height: 28rpx;
-				background-size: cover;
-				position: absolute;
-				top: 30%;
-				left: 3%;
-			}
-		}
 	}

pagesB/CommodityOrder/CommodityOrder.vue

@@ -1,9 +1,18 @@
 <template>
 	<view class="app">
-		<view class="inputs">
+		<u-navbar :is-back="false" :background="background" class="u-navbar">
-			<i class="icon"></i>
+			<image src="@/static/pagesB/fanhui.png" mode="" @tap="goprevious"></image>
-			<input v-model="goodsName" type="text" name="" id="" class="input" placeholder="请输入商品名称">
+			<view class="title" @tap="goprevious">
-		</view>
+				商品订单
+			</view>
+			<view class="inputs">
+				<i class="icon"></i>
+				<input v-model="goodsName" type="text" name="" id="" class="input" placeholder="搜索订单"
+					placeholder-class="placeholder">
+			</view>
+		</u-navbar>
+		<u-tabs :list="tabslist" :is-scroll="false" :current="tabscurrent" @change="tabschange" :show-bar='false'
+			active-color='#000000'></u-tabs>
 		<view class="" v-if="total>0">
 			<view class="Apayment" v-for='(item,index) in orderlist' :key="index">
 				<view class="names">店铺名称
@@ -120,10 +129,29 @@
 	export default {
 		data() {
 			return {
+				tabslist: [{
+					name: '全部',
+					orderStatus: '',
+				}, {
+					name: '待付款',
+					orderStatus: 'WAIT_PAY',
+				}, {
+					name: '待收货',
+					orderStatus: 'WAIT_RECEIVED_GOODS',
+				}, {
+					name: '待评价',
+					orderStatus: 'RECEIVED_GOODS',
+				}, {
+					name: '已完成',
+					orderStatus: 'EVALUATED',
+				}],
+				tabscurrent: 0,
+				background: {
+					backgroundColor: '#26A888',
+				},
 				orderNoitem: null,
 				patientId: '',
 				openid: '',
-				title: '商品订单', //导航标题
 				baseurl: '', //url
 				orderlist: [], //商品订单list
 				total: 0, //list长度
@@ -138,6 +166,18 @@
 			}
 		},
 		methods: {
+			//点击tabs
+			tabschange(index) {
+				this.tabscurrent = index;
+				this.orderStatus = this.tabslist[index].orderStatus
+				this.goodsOrderinfo();
+			},
+			//返回上一页
+			goprevious() {
+				uni.navigateBack({
+					delta: 1
+				})
+			},
 			//查看评价
 			golookrate(item) {
 				uni.navigateTo({
@@ -274,9 +314,9 @@
 			},
 		},
 		onReady() { //更改导航栏文字
-			uni.setNavigationBarTitle({
+			// uni.setNavigationBarTitle({
-				title: this.title,
+			// 	title: this.title,
-			});
+			// });
 		},
 		onShow() {
 			this.pageNum = 1;
@@ -295,20 +335,9 @@
 				that.patientId = value
 				that.openid = value2
 				if (options.orderStatus) {
+					that.tabscurrent = options.toindex
 					that.orderStatus = options.orderStatus
-					if (options.orderStatus == 'WAIT_PAY') {
+					that.goodsOrderinfo();
-						that.title = '待付款'
-						that.goodsOrderinfo();
-					} else if (options.orderStatus == 'WAIT_RECEIVED_GOODS') {
-						that.title = '待收货'
-						that.goodsOrderinfo();
-					} else if (options.orderStatus == 'RECEIVED_GOODS') {
-						that.title = '待评价'
-						that.goodsOrderinfo();
-					} else if (options.orderStatus == 'EVALUATED') {
-						that.title = '已完成'
-						that.goodsOrderinfo();
-					}
 				} else {
 					that.goodsOrderinfo();
 				}