From a84b0f70cd5b19557067fce886f0654b6853c2e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Fri, 29 Apr 2022 11:25:14 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=AE=8C=E5=96=84=E3=80=91=20?=
 =?UTF-8?q?=E6=88=91=E7=9A=84=E8=AE=A2=E5=8D=95=E3=80=81=E5=BF=AB=E9=80=9F?=
 =?UTF-8?q?=E8=AF=84=E7=BA=A7=E3=80=81=E8=AF=84=E7=BA=A7=E6=A0=87=E5=87=86?=
 =?UTF-8?q?=E3=80=81=E8=AF=84=E5=8D=A1=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=20=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91=20?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E6=B8=B2=E6=9F=93=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/lf-table.vue                       | 235 ++++++++++++++++++
 .../ratingQueryDetail/ratingQueryDetail.vue   |  95 +++----
 pages/fastRating/fastRating.vue               |  10 +-
 pages/order/order.vue                         | 106 +++++---
 pages/ratingCriteria/ratingCriteria.vue       |  15 +-
 5 files changed, 345 insertions(+), 116 deletions(-)
 create mode 100644 components/lf-table.vue

diff --git a/components/lf-table.vue b/components/lf-table.vue
new file mode 100644
index 0000000..37da317
--- /dev/null
+++ b/components/lf-table.vue
@@ -0,0 +1,235 @@
+<template>
+	<view class="formBox" :style="{width: formWidth,height: formHeight}">
+		<!-- 表头 -->
+		<view class="headerBox" :style="{height: formRowHeight,width: length + 'rpx',lineHeight:formRowHeight}">
+			<view class="numberBox" v-if="showNumber" :style="{height: formRowHeight}">
+				序号
+			</view>
+			<view  
+				class="headerTitle" 
+				v-for="itemH in Header"
+				:style="{height: formRowHeight,width: itemH.width+'rpx'}">
+					{{itemH.text}}
+			</view>
+		</view>
+		<view class="titel" v-if="Content.length <= 0">
+			暂无数据
+		</view>
+		<view :style="{width: length + 'rpx'}">
+			<view class="contentBox" v-for="(itemC,index) in Content" @click="clickList(itemC,index)">
+				<block v-for="(itemH,index2) in Header">
+					<view class="keyBox" :style="{height: formRowHeight,width: itemH.width+'rpx'}">
+						{{itemC[itemH.key]}}
+					</view>
+				</block>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	
+/*
+*
+* 
+* 
+*/
+	export default {
+		name:'nk-form',
+		props:{
+			Header: {
+				type: Array,
+				default: ()=>{
+					return []
+				}
+			},
+			Content: {
+				type: Array,
+				default: ()=>{
+					return []
+				}
+			},
+			height: {
+				type: [String,Number],
+				default: 1000
+			},
+			width: {
+				type: [String,Number],
+				default: '600'
+			},
+			showNumber: {
+				type: Boolean,
+				default: true
+			},
+			rowHeight: {
+				type: [String,Number],
+				default: 80
+			}
+		},
+		data() {
+			return {
+				headerData:'',
+				contentData:'',
+				formWidth: '',
+				formHeight: '',
+				formRowHeight: '',
+				length: 0
+			};
+		},
+		created() {
+			if(typeof this.width == 'string'){
+				if(this.width.indexOf('rpx') > -1){
+					this.formWidth = this.width;
+				}
+				if(this.width.indexOf('%') > -1){
+					this.formWidth = this.width;
+				}
+				else{
+					this.formWidth = this.width + 'rpx';
+				}
+			}else{
+				this.formWidth = this.width + 'rpx';
+			}
+			if(typeof this.height == 'string'){
+				if(this.height.indexOf('rpx') > -1){
+					this.formHeight = this.height;
+				}
+				if(this.height.indexOf('%') > -1){
+					this.formHeight = this.height;
+				}
+				else{
+					this.formHeight = this.height + 'rpx';
+				}
+			}else{
+				this.formHeight = this.height + 'rpx';
+			}
+			if(typeof this.rowHeight == 'string'){
+				if(this.rowHeight.indexOf('rpx') > -1){
+					this.formRowHeight = this.rowHeight + 'rpx';
+				}
+				if(this.rowHeight.indexOf('%') > -1){
+					this.formRowHeight = this.rowHeight;
+				}
+				else{
+					this.formHeight = this.height + 'rpx';
+				}
+			}else{
+				this.formRowHeight = this.rowHeight + 'rpx';
+			}
+		},
+		methods:{
+			// 计算总长度
+			getLength(){
+				for(let i = 0; i < this.Header.length; i++){
+					this.length = this.length + this.Header[i].width * 1;
+				}
+				if(this.showNumber){
+					this.length = this.length + 80;
+				}
+			},
+			
+			// 点击事件
+			clickList(event,index) {
+				let data = {
+					content: event,
+					index: index
+				}
+				this.$emit("clickList",data);
+			}
+		},
+		mounted:function(){
+			this.getLength();
+		}
+	}
+</script>
+
+<style lang="scss">
+.formBox{
+	overflow: auto;
+	position: relative;
+	.headerBox{
+		position: sticky;
+		top: 0;
+		display: flex;
+		justify-content: flex-start;
+		.numberBox,.headerTitle{
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 30rpx;
+			font-weight: 900;
+			color: rgb(68, 68, 68);
+			// background-color: #dddddd;
+			background-color: #f7f5f6;
+			border: 1px solid #F6F6F6;
+			box-sizing: border-box;
+		}
+		.numberBox{
+			width: 80rpx;
+		}
+	}
+	.contentBox{
+		.keyBox{
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 30rpx;
+			font-weight: 900;
+			border: 1px solid #F6F6F6;
+			box-sizing: border-box;
+		}
+	}
+	// .contentBox:nth-child(2n){
+	// 	background-color: #F1F1F1;
+	// }
+	.titel{
+		text-align: center;
+		margin-top: 80rpx;
+		color: #007AFF;
+	}
+}
+
+
+/* .headerBox{
+	height: 60rpx;
+	position: sticky;
+	top: 0;
+} */
+
+
+
+
+// .headerBoxII{
+// 	height: 60rpx;
+// 	line-height: 60rpx;
+// 	display: inline-block;
+// 	text-align: center;
+// 	font-size: 30rpx;
+// 	font-weight: 900;
+// 	color: rgb(68, 68, 68);
+// }
+// .headerBoxIII{
+// 	background-color: #dddddd;
+// 	border: 1px solid rgb(235, 238, 245);
+// }
+// .contentBox{
+// 	height: 60rpx;
+// 	line-height: 60rpx;
+// 	float: left;
+// 	text-align: center;
+// }
+// .contentBoxII{
+// 	height: 60rpx;
+// 	line-height: 60rpx;
+// 	border: 1px solid rgb(235, 238, 245);
+// }
+// .contentBoxII:nth-child(2n){
+// 	background-color: #E6E6E6;
+// }
+// .tipsBox{
+// 	margin-top: 30rpx;
+// 	font-size: 40rpx;
+// 	text-align: center;
+// 	color: #999;
+// }
+</style>
diff --git a/packages/ratingQueryDetail/ratingQueryDetail.vue b/packages/ratingQueryDetail/ratingQueryDetail.vue
index 6ffbbb8..0901bd3 100644
--- a/packages/ratingQueryDetail/ratingQueryDetail.vue
+++ b/packages/ratingQueryDetail/ratingQueryDetail.vue
@@ -63,63 +63,50 @@
       </view>
       <view class="flex-col section_6">
         <view class="flex-col group_16">
-          <view class="flex-col section_7">
-            <view class="justify-between section_8">
-              <view class="left-text-wrapper flex-col items-center">
-                <text>评级</text>
-              </view>
-              <view class="section_9"> </view>
-              <view class="left-text-wrapper flex-col items-center">
-                <text>数量</text>
-              </view>
-            </view>
-            <view class="justify-between group_17">
-              <text>10</text>
-              <text class="text_25">1</text>
-            </view>
-            <view class="justify-between group_18">
-              <text>9.5</text>
-              <text class="text_27">3</text>
-            </view>
-            <view class="justify-between group_19">
-              <text>9</text>
-              <text>10</text>
-              <view class="divider"> </view>
-            </view>
-            <view class="justify-between group_20">
-              <text>8.5</text>
-              <text>35</text>
-            </view>
-            <view class="justify-between group_21">
-              <text>8</text>
-              <text>70</text>
-            </view>
-            <view class="justify-between group_22">
-              <view class="flex-row">
-                <image
-                  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497794827070883.png"
-                  class="image_8"
-                />
-                <text class="text_34">7.5</text>
-              </view>
-              <text class="text_35">30</text>
-            </view>
-          </view>
-          <view class="flex-col items-center button">
+			<lf-table :Header="header" :Content="content" height="auto" width="686" :showNumber="false"></lf-table>
+          <view class="flex-col items-center button" @click="setClipboardData">
             <text>复制拍卖链接</text>
           </view>
         </view>
-        <view class="section_10"> </view>
       </view>
     </view>
   </view>
 </template>
 
 <script>
+	import lfTable from '@/components/lf-table.vue'
+	
   export default {
+	  components: {
+		lfTable  
+	  },
     data() {
-      return {};
+      return {
+		  header: [{
+			  text: '评级',
+			  width: 343,
+			  key: 'rating'
+		  },{
+			  text: '数量',
+			  width: 343,
+			  key: 'number'
+		  }],
+		  content: [{
+			  rating: '10',
+			  number: 1
+		  },{
+			  rating: '12',
+			  number: 3
+		  }]
+	  };
     },
+	methods: {
+		setClipboardData(){
+			uni.setClipboardData({
+				data: '测试'
+			})
+		}
+	}
   };
 </script>
 
@@ -190,13 +177,7 @@
   .group_16 {
     padding: 40rpx 0;
   }
-  .section_10 {
-    align-self: center;
-    background-color: rgb(0, 0, 0);
-    border-radius: 4rpx;
-    width: 196rpx;
-    height: 8rpx;
-  }
+  
   .image_7 {
     margin-left: 25rpx;
   }
@@ -445,15 +426,7 @@
   .text_27 {
     margin-right: 12rpx;
   }
-  .divider {
-    background-color: rgb(246, 246, 246);
-    width: 560rpx;
-    height: 2rpx;
-    position: absolute;
-    bottom: 22rpx;
-    left: 50%;
-    transform: translateX(-50%);
-  }
+ 
   .text_35 {
     margin-right: 18rpx;
   }
diff --git a/pages/fastRating/fastRating.vue b/pages/fastRating/fastRating.vue
index de78e77..ce68d50 100644
--- a/pages/fastRating/fastRating.vue
+++ b/pages/fastRating/fastRating.vue
@@ -19,7 +19,6 @@
           <text class="text_9">7day/30rmb</text>
         </view>
       </view>
-      <view class="section_3"> </view>
     </view>
   </view>
 </template>
@@ -48,14 +47,7 @@
     padding: 40rpx 30rpx 40rpx 32rpx;
     background-color: rgb(255, 255, 255);
   }
-  .section_3 {
-    margin-top: 1016rpx;
-    align-self: center;
-    background-color: rgb(0, 0, 0);
-    border-radius: 4rpx;
-    width: 196rpx;
-    height: 8rpx;
-  }
+  
   .group_6 {
     margin-top: 50rpx;
   }
diff --git a/pages/order/order.vue b/pages/order/order.vue
index ea097f7..f97890a 100644
--- a/pages/order/order.vue
+++ b/pages/order/order.vue
@@ -9,6 +9,7 @@
 					:lineWidth="34"
 					:scrollable="false" 
 					:itemWidth="100 / tabList.length +'%'" 
+					lineColor="#E7A23F"
 					@change="switchTab"
 				>
 				</u-tabs>
@@ -25,30 +26,8 @@
 			    <view class="flex-col">
 			      <text class="text_7">按收货确认时间</text>
 			      <view class="flex-col group_8">
-			        <view class="flex-row">
-			          <view class="flex-col items-center text-wrapper">
-			            <text>1个月内</text>
-			          </view>
-			          <view class="text-wrapper_1 flex-col items-center">
-			            <text>3个月内</text>
-			          </view>
-			          <view class="text-wrapper_1 flex-col items-center view_3">
-			            <text>6个月内</text>
-			          </view>
-			          <view class="text-wrapper_1 flex-col items-center">
-			            <text>今年</text>
-			          </view>
-			        </view>
-			        <view class="flex-row group_10">
-			          <view class="left-text-wrapper flex-col items-center">
-			            <text>2021年</text>
-			          </view>
-			          <view class="left-text-wrapper flex-col items-center view_6">
-			            <text>2020年</text>
-			          </view>
-			          <view class="left-text-wrapper flex-col items-center view_7">
-			            <text>2019年</text>
-			          </view>
+			        <view class="lf-flex lf-flex-wrap">
+						<view class="filter-date-item" :class="{active: filterGather.date == item.value}" @click="filterGather.date = item.value" v-for="(item, index) in receivingTimeList" :key="index">{{ item.label }}</view>
 			        </view>
 			      </view>
 			    </view>
@@ -56,24 +35,24 @@
 			      <text class="text_15">按送评信息</text>
 			      <view class="flex-row group_12">
 			        <view class="flex-col items-center text-wrapper_2">
-			          <text>输入送评人姓名或手机号</text>
+					  <u-input v-model="filterGather.name" placeholder="输入送评人姓名或手机号"></u-input>
 			        </view>
 			        <view class="flex-col items-start text-wrapper_3">
-			          <text class="text_17">输入标签</text>
+					  <u-input v-model="filterGather.label" placeholder="输入标签"></u-input>
 			        </view>
 			      </view>
 			    </view>
 			    <view class="flex-col group_13">
 			      <text class="text_18">按送评信息</text>
 			      <view class="flex-col items-start text-wrapper_4">
-			        <text class="text_19">输入评级编号</text>
+					<u-input v-model="filterGather.number" placeholder="输入评级编号" class="text-wrapper_4-input" ></u-input>
 			      </view>
 			    </view>
 			    <view class="flex-row group_14">
-			      <view class="flex-col items-center text-wrapper_5">
+			      <view class="flex-col items-center text-wrapper_5" @click="reset">
 			        <text>重置</text>
 			      </view>
-			      <view class="flex-col items-center text-wrapper_6">
+			      <view class="flex-col items-center text-wrapper_6" @click="confirm">
 			        <text>确认</text>
 			      </view>
 			    </view>
@@ -198,7 +177,34 @@
 					...publicKey
 				}],
 				tabIndex: 0,
-				scenic: {}
+				receivingTimeList: [{
+					label: '1个月内',
+					value: '1'
+				},{
+					label: '3个月内',
+					value: '2'
+				},{
+					label: '6个月内',
+					value: '3'
+				},{
+					label: '今年',
+					value: '4'
+				},{
+					label: '2021年',
+					value: '5'
+				},{
+					label: '2020年',
+					value: '6'
+				},{
+					label: '2019年',
+					value: '7'
+				}],
+				filterGather: {
+					date: '1',
+					name: '',
+					label: '',
+					number: ''
+				}
 			}
 		},
 		computed: {
@@ -218,10 +224,16 @@
 		},
 		onLoad(options){
 			this.tabIndex = Number(options.current || this.tabIndex);
-			this.scenic = uni.getStorageSync("scenic_key") || {};
 			this[ this.tabList[this.tabIndex].requestFunction ](); // 获取当前tab下的数据列表
 		},
 		methods: {
+			confirm(){
+				this.$msg('确认');
+				this.showFilter = false;
+			},
+			reset(){
+				this.filterGather = this.$options.data().filterGather;
+			},
 			// 获取数据
 			getList(options = {}){
 				let tabItem = this.tabList[this.tabIndex];
@@ -404,7 +416,7 @@
 		}
 		.text-wrapper_4 {
 		  margin-top: 18rpx;
-		  padding: 12rpx 0;
+		  // padding: 12rpx 0;
 		  color: rgb(195, 195, 195);
 		  font-size: 28rpx;
 		  font-weight: 500;
@@ -412,6 +424,9 @@
 		  white-space: nowrap;
 		  border-radius: 10rpx;
 		  border: solid 2rpx rgb(195, 195, 195);
+		  /deep/.u-input{
+			  width: 100%;
+		  }
 		}
 		.text-wrapper_5 {
 		  padding: 24rpx 0;
@@ -447,7 +462,7 @@
 		  white-space: nowrap;
 		}
 		.text-wrapper_2 {
-		  padding: 12rpx 0;
+		  // padding: 12rpx 0;
 		  flex: 1 1 auto;
 		  border-radius: 10rpx;
 		  height: 68rpx;
@@ -455,7 +470,7 @@
 		}
 		.text-wrapper_3 {
 		  margin-left: 28rpx;
-		  padding: 12rpx 0;
+		  // padding: 12rpx 0;
 		  border-radius: 10rpx;
 		  width: 308rpx;
 		  height: 68rpx;
@@ -598,4 +613,27 @@
 		height: calc( env(safe-area-inset-bottom) + 20rpx );
 		height: calc( constant(safe-area-inset-bottom) + 20rpx );
 	}
+	
+	.filter-date-item{
+		width: 160rpx;
+		height: 68rpx;
+		background: #F6F6F6;
+		border-radius: 10rpx;
+		font-size: 28rpx;
+		color: #333333;
+		margin-right: 16rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		&:nth-child(4n){
+			margin-right: 0rpx;
+		}
+		&:nth-child(n+5){
+			margin-top: 16rpx;
+		}
+		&.active{
+			color: #FFFFFF;
+			background-color: #E7A23F;
+		}
+	}
 </style>
diff --git a/pages/ratingCriteria/ratingCriteria.vue b/pages/ratingCriteria/ratingCriteria.vue
index ae2fa10..53fb014 100644
--- a/pages/ratingCriteria/ratingCriteria.vue
+++ b/pages/ratingCriteria/ratingCriteria.vue
@@ -7,21 +7,21 @@
           class="image_6"
         />
         <view class="flex-col group_5">
-          <view class="justify-between">
+          <view class="justify-between" @click="$msg('敬请期待')">
             <text>关于我们</text>
             <image
               src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497893779891395.png"
               class="image_7"
             />
           </view>
-          <view class="justify-between group_7">
+          <view class="justify-between group_7" @click="$msg('敬请期待')">
             <text>卡砖设计</text>
             <image
               src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497893779891395.png"
               class="image_7"
             />
           </view>
-          <view class="justify-between group_8">
+          <view class="justify-between group_8" @click="$msg('敬请期待')">
             <text>评级标准</text>
             <image
               src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62677e395a7e3f03107ffc5f/62677e4a35a7e10011e93a80/16509497893779891395.png"
@@ -30,7 +30,6 @@
           </view>
         </view>
       </view>
-      <view class="section_3"> </view>
     </view>
   </view>
 </template>
@@ -68,14 +67,6 @@
     padding: 100rpx 32rpx 80rpx;
     background-color: rgb(255, 255, 255);
   }
-  .section_3 {
-    margin-top: 710rpx;
-    align-self: center;
-    background-color: rgb(0, 0, 0);
-    border-radius: 4rpx;
-    width: 196rpx;
-    height: 8rpx;
-  }
   .image_6 {
     align-self: center;
     width: 220rpx;