From 018dc3e3f8e9d77c273169cbdd6fffbcf2742b54 Mon Sep 17 00:00:00 2001
From: jia <1451658316@qq.com>
Date: Wed, 9 Aug 2023 11:38:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=AE=A2=E5=8D=95=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/cx-navTitle.vue                   | 117 ++++++
 config/app.js                                |   4 +-
 pages.json                                   |   7 +
 pages/gather/gather.vue                      |   2 +-
 pages/users/releaseOrdermanagement/index.vue | 412 +++++++++++++++++--
 5 files changed, 512 insertions(+), 30 deletions(-)
 create mode 100644 components/cx-navTitle.vue

diff --git a/components/cx-navTitle.vue b/components/cx-navTitle.vue
new file mode 100644
index 0000000..f2a8708
--- /dev/null
+++ b/components/cx-navTitle.vue
@@ -0,0 +1,117 @@
+<template>
+  <!-- tab选项卡滑动切换 -->
+  <view class="my-tab" ref="myTabRef">
+    <view
+      class="my-tab-item"
+      v-for="(item, index) in tabs" :ref="`tab${item.name}Ref`"
+      :class="{ active: item.name === activeItem }" :key="index"
+    >
+      <view class="my-tab-text" ref="tabName"  @click="tabClick(item,index)">
+         <view class="name">{{ item.label }}</view>
+         <view class="xian"></view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+	/*
+		tabs -- 传入标签名 array类型 : tabs: [{name: "tabOne",label: "全部"},{...}]
+		activeItem -- 默认第一个class名 string
+		@tabClick -- 自定义点击事件 回传用到 做逻辑判断
+	  标签大小、默认颜色、选中颜色，下边框线等样式，已在css中注释，请根据注释修改即可
+	*/
+export default {
+  name: "cx-navTitle",
+  props:{
+    tabs:{ //所有标签名
+     type:Array,
+     default:[]
+    },
+    activeItem:{//默认第一个 选中的class类名
+      type:String,
+      default:''
+    },
+  },
+  data() {
+    return {
+    };
+  },
+  mounted(){
+  },
+  methods: {
+    // tab点击
+    tabClick(item,index) {
+      this.$emit('tabClick',item) //回传数据
+      // 触发滑动方法
+      this.scrollLeftTo(item.name);
+    },
+    // 滑动
+    scrollLeftTo(name) {
+      const ref = `tab${name}Ref`;
+      // 获取myTabRef的DOM元素，即类名为my-tab的标签
+      const nav = this.$refs.myTabRef.$el;
+      // 获取当前点击的某一个tab的的DOM元素，即类名为my-tab-item的标签
+      const title = this.$refs[ref][0].$el;
+      // 计算位移偏差
+      const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
+      nav.scrollLeft = to;
+    },
+  },
+};
+</script>
+ 
+<style lang="scss">
+.my-tab {
+  width:720rpx;
+  margin:0 auto;
+  // height:80rpx;
+  // background: #ffffff;
+  // line-height:80rpx;
+  // border:1px solid red;
+  display: flex;
+  overflow-x: scroll;
+  padding-right:0rpx;
+  scroll-behavior: smooth; //平稳的滑动效果
+  font-size:32rpx;
+  font-family:PingFang-SC-Heavy;
+  .my-tab-item {
+    padding: 20rpx 35rpx; //标签上下左右距离 -- 在这里改
+    color:#707070; //标签默认颜色 -- 在这里改
+    // height: 0rpx;
+    text-align: center;
+    flex: 1 0 auto;
+    &.active {
+      color:#333333; //标签选中颜色 -- 在这里改
+      font-family:PingFang-SC-Heavy;
+      font-weight:600;
+      position: relative;
+      .my-tab-text {
+        .xian{
+         position:relative;
+         top:0rpx; //下边框线和标签距离 -- 在这里改
+         z-index:8;
+         border:1rpx solid #F84221; //标签底部下边框线 -- 在这里改
+         border-radius:50rpx;
+         padding:0rpx 30rpx;
+         opacity:0.6;//下边框线透明度 -- 在这里改
+        }
+        .name{
+          position:relative;
+          z-index:9;
+		  font-size: 32rpx;
+		  font-family:  PingFang SC;
+		  font-weight: 500;
+		  color: #F84221;
+		  color: #F84221;
+        }
+      }
+    }
+  }
+}
+// 隐藏滚动条
+::-webkit-scrollbar {
+  height: 0;
+  width: 0;
+  color: transparent;
+}
+</style>
\ No newline at end of file
diff --git a/config/app.js b/config/app.js
index 30401c6..d257d78 100644
--- a/config/app.js
+++ b/config/app.js
@@ -9,8 +9,8 @@ let httpApiThree
 // 网络接口修改此字符 小程序域名要求https
 // let httpApi = 'http://192.168.31.110:8324' // 测试
 if (process.env.NODE_ENV === "development") {
-	httpApi = 'https://shop.lihaink.cn' // 生产
-	// httpApi = "https://crmeb-test.shop.lihaink.cn"
+	   // httpApi = 'https://shop.lihaink.cn' // 生产
+	httpApi = "https://crmeb-test.shop.lihaink.cn"
 	// httpApi = "http://192.168.0.222"
 	  // httpApi = "http://192.168.0.108:8325"
 	// #ifdef MP-WEIXIN
diff --git a/pages.json b/pages.json
index 83381a8..39ccf49 100644
--- a/pages.json
+++ b/pages.json
@@ -698,6 +698,13 @@
 						"enablePullDownRefresh": false
 					}
 
+				}, {
+					"path": "releaseOrdermanagement/index",
+					"style": {
+						"navigationBarTitleText": "订单管理",
+						"enablePullDownRefresh": false
+					}
+
 				}
 			]
 		},
diff --git a/pages/gather/gather.vue b/pages/gather/gather.vue
index f3a830a..380506b 100644
--- a/pages/gather/gather.vue
+++ b/pages/gather/gather.vue
@@ -134,7 +134,7 @@
 								<text class="text">委托销售</text>
 							</view>
 							<view class="examine"
-								@click="navigator(`/pages/product/basicSet?mer_id=${mer_id}`, '商户设置')">
+								@click="navigator(`/pages/users/releaseOrdermanagement/index`, '商户设置')">
 								<image class="icon_img" src="@/static/images/fabu.png" mode="aspectFill">
 								</image>
 								<text class="text">发布管理</text>
diff --git a/pages/users/releaseOrdermanagement/index.vue b/pages/users/releaseOrdermanagement/index.vue
index bc5b404..edd5ade 100644
--- a/pages/users/releaseOrdermanagement/index.vue
+++ b/pages/users/releaseOrdermanagement/index.vue
@@ -1,37 +1,395 @@
 <template>
-	<view class="">
-         <view class="">
-         
-         </view>
-		 
-		 
+	<view class="content">
+
+		<view class="content_top">
+			<!--选项卡滑动切换-->
+			<cxNavTitle :tabs="tabs" :activeItem="activeItem" @tabClick="tabClick"></cxNavTitle>
+		</view>
+
+		<view class="content-content">
+
+			<view class="content-onea" v-if='this.tabTitle=="tabTwo"'>
+				<view class="content-one-img">
+					<image src="@/static/images/bg2.png" mode="aspectFit"></image>
+				</view>
+				<view class="content-one-txt">
+					<view class="one-txt-a">
+						超级无敌一级棒乌龙山马龙尖茶...
+					</view>
+					<view class="one-txt-b">
+						<view class="txt-b-a">
+							￥ 100.00
+						</view>
+						<view class="txt-b-b">
+							类型:调货
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="content-one" v-else>
+				<view class="content-one-img">
+					<image src="@/static/images/bg2.png" mode="aspectFit"></image>
+				</view>
+				<view class="content-one-txt">
+					<view class="one-txt-a">
+						超级无敌一级棒乌龙山马龙尖茶...
+					</view>
+					<view class="one-txt-b">
+						<view class="txt-b-a">
+							￥ 100.00
+						</view>
+						<view class="txt-b-b">
+							类型:调货
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="content-two_one" v-if='this.tabTitle=="tabOne"'>
+
+				<view class="content-two-edit">
+					编辑
+				</view>
+
+			</view>
+			<view class="content-two-two" v-if='this.tabTitle=="tabTwo"'>
+				<!-- <view class="content-two-delete">
+					删除
+				</view>
+				<view class="content-two-edit">
+					编辑
+				</view>
+			   -->
+			</view>
+			<view class="content-two-three" v-if='this.tabTitle=="tabThree"'>
+				<view class="content-two-delete">
+					删除
+				</view>
+				<view class="content-two-edit">
+					编辑
+				</view>
+
+			</view>
+			<view class="content-two-four" v-if='this.tabTitle=="tabFour"'>
+				<view class="content-two-delete">
+					删除
+				</view>
+				<view class="content-two-edit">
+					编辑
+				</view>
+
+			</view>
+			<view class="content-two-five" v-if='this.tabTitle=="tabFive"'>
+				<view class="content-two-delete">
+					拒绝
+				</view>
+
+				<view class="content-two-agree">
+					同意
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
+	import cxNavTitle from '@/components/cx-navTitle.vue'
 	export default {
-	
-	data() {
-	return {
-	list:[{
-		name:在售
-	},
-	{
-		name:已售出
-	},
-	{
-		name:待审核
-	},
-	{
-		name:审核未通过
-	},
-	{
-		name:在售
-	}]
-	}
-	}
+		components: {
+			cxNavTitle
+		},
+		data() {
+			return {
+				activeItem: "tabOne",
+				tabTitle: "",
+				tabs: [{
+						name: "tabOne",
+						label: '在售',
+					},
+					{
+						name: "tabTwo",
+						label: '已售出',
+					},
+					{
+						name: "tabThree",
+						label: '待审核',
+					},
+					{
+						name: "tabFour",
+						label: '审核未通过',
+					},
+					{
+						name: "tabFive",
+						label: '审核通过',
+					},
+				],
+			}
+		},
+		onLoad() {
+			this.tabTitle = this.tabs[0].name
+			//有时进入页面需要获取默认的第一个标签做逻辑判断 -- 如下:
+			console.log(this.tabs[0])
+		},
+		methods: {
+			tabClick(e) { //点击获取当前标签数据 
+				console.log('你点击了【' + e.label + '】的选项卡标签', e.name)
+				this.activeItem = e.name; //当前class类名 
+				this.tabTitle = e.name; //当前选的标签名
+			}
+		}
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.content_top {}
+
+
+	.content_top {
+
+		width: 100%;
+	}
+
+	.content-content {
+
+
+		background: #FFFFFF;
+		margin-left: 28rpx;
+		margin-right: 28rpx;
+		padding: 28rpx 46rpx;
+		background: #FFFFFF;
+		border-radius: 14px 14px 14px 14px;
+		opacity: 1;
+		position: relative;
+
+		.content-onea {
+			display: flex;
+
+
+
+
+			.content-one-img {
+				width: 148rpx;
+				height: 148rpx;
+				margin-right: 28rpx;
+				border: 1px solid;
+				
+
+				image {
+					width: 148rpx;
+					height: 148rpx;
+				}
+			}
+
+			.content-one-txt {
+				margin-bottom: 23rpx;
+				.txt-b-a {
+					font-size: 32rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #333333;
+				}
+
+				.one-txt-b {
+					display: flex;
+					margin-top: 30rpx;
+
+					.txt-b-a {
+						font-size: 32rpx;
+						font-family: SF Pro Display-Medium, SF Pro Display;
+						font-weight: 500;
+						color: #F84221;
+						margin-right: 74rpx;
+					}
+
+					.txt-b-b {
+						font-size: 28rpx;
+						font-family: PingFang SC;
+						font-weight: 400;
+						color: #333333
+					}
+				}
+
+			}
+
+		}
+
+		.content-one {
+			display: flex;
+
+			border-bottom: 1px solid #CCCCCC;
+
+
+			.content-one-img {
+				width: 148rpx;
+				height: 148rpx;
+				margin-right: 28rpx;
+				border: 1px solid;
+			
+
+				image {
+					width: 148rpx;
+					height: 148rpx;
+				}
+			}
+
+			.content-one-txt {
+				margin-bottom: 23rpx;
+				.txt-b-a {
+					font-size: 32rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #333333;
+				}
+
+				.one-txt-b {
+					display: flex;
+					margin-top: 30rpx;
+
+					.txt-b-a {
+						font-size: 32rpx;
+						font-family: SF Pro Display-Medium, SF Pro Display;
+						font-weight: 500;
+						color: #F84221;
+						margin-right: 74rpx;
+					}
+
+					.txt-b-b {
+						font-size: 28rpx;
+						font-family: PingFang SC;
+						font-weight: 400;
+						color: #333333
+					}
+				}
+
+			}
+
+		}
+
+		.content-two_one {
+
+			.content-two-edit {
+				width: 168rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				text-align: center;
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 400;
+				color: #FFFFFF;
+				background: linear-gradient(90deg, #F98649 0%, #F34E45 100%);
+				border-radius: 32rpx 32rpx 32rpx 32rpx;
+				position: absolute;
+				right: 28rpx;
+				bottom: 23rpx;
+			}
+		}
+
+		.content-two-three {
+
+			.content-two-edit {
+				width: 168rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				text-align: center;
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 400;
+				color: #FFFFFF;
+				background: linear-gradient(90deg, #F98649 0%, #F34E45 100%);
+				border-radius: 32rpx 32rpx 32rpx 32rpx;
+				position: absolute;
+				right: 28rpx;
+				bottom: 23rpx;
+			}
+
+			.content-two-delete {
+				width: 168rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				text-align: center;
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 400;
+				color: #999999;
+				border: 2rpx solid #999999;
+				position: absolute;
+				right: 228rpx;
+				bottom: 23rpx;
+				border-radius: 32rpx 32rpx 32rpx 32rpx;
+			}
+		}
+
+		.content-two-four {
+
+			.content-two-edit {
+				width: 168rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				text-align: center;
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 400;
+				color: #FFFFFF;
+				background: linear-gradient(90deg, #F98649 0%, #F34E45 100%);
+				border-radius: 32rpx 32rpx 32rpx 32rpx;
+				position: absolute;
+				right: 28rpx;
+				bottom: 23rpx;
+			}
+
+			.content-two-delete {
+				width: 168rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				text-align: center;
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 400;
+				color: #999999;
+				border: 2rpx solid #999999;
+				position: absolute;
+				right: 228rpx;
+				bottom: 23rpx;
+				border-radius: 32rpx 32rpx 32rpx 32rpx;
+			}
+		}
+
+
+		.content-two-five {
+
+			.content-two-agree {
+				width: 168rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				text-align: center;
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 400;
+				color: #FFFFFF;
+				background: linear-gradient(90deg, #F98649 0%, #F34E45 100%);
+				border-radius: 32rpx 32rpx 32rpx 32rpx;
+				position: absolute;
+				right: 28rpx;
+				bottom: 23rpx;
+			}
+
+			.content-two-delete {
+				width: 168rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				text-align: center;
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 400;
+				color: #999999;
+				border: 2rpx solid #999999;
+				position: absolute;
+				right: 228rpx;
+				bottom: 23rpx;
+				border-radius: 32rpx 32rpx 32rpx 32rpx;
+			}
+		}
+
+	}
 </style>
\ No newline at end of file