优化

hdApp/src/admin/stat/cgItem.vue

@@ -1,42 +1,66 @@
 <template>
 <view class="app-content">
 	<view class="ex-page">
-    <view class="input-wrap_box">
-      <view>
-        <AppSearchModule placeholder="输入拼音首字母搜索" @input="searchFn"/>
+    <view class="toolbar-panel">
+      <view class="search-box">
+        <AppSearchModule placeholder="输入拼音首字母搜索" @input="searchFn" />
       </view>
-    </view>
-	<view class="top-bar">
-		<DateSelect class="bar" top="0" @selectDateFn="selectDateFn" />
 
-					<button class="admin-button-com middle blue" style="position: absolute;right:320upx;top:-8upx;" @click="selGhs()">{{ ghsName==''?'选供货商':ghsName }}</button>
+      <view class="filter-panel">
+        <view class="filter-row">
+          <view class="filter-chip filter-chip--date">
+            <DateSelect
+              ref="dateSelectRef"
+              class="filter-date-select"
+              top="0"
+              @selectDateFn="selectDateFn"
+            />
+          </view>
+          <view
+            class="filter-chip filter-chip--ghs"
+            :class="{ 'filter-chip--active': ghsId > 0 }"
+            @click="selGhs()"
+          >
+            <text class="filter-chip-text">{{ ghsFilterLabel }}</text>
+          </view>
+        </view>
 
-			<button class="admin-button-com middle" :class="[showGhsParam == 1 ? 'blue' : 'default']" style="position: absolute;right:130upx;top:-8upx;" @click="showGhsName()">显供货商名</button>
-			
-			<button class="admin-button-com middle blue" style="position: absolute;right:20upx;top:-8upx;" @click="resetSearch()">重置</button>
+        <view class="filter-row">
+          <view
+            class="filter-chip filter-chip--toggle"
+            :class="{ 'filter-chip--active': showGhsParam == 1 }"
+            @click="showGhsName()"
+          >
+            <text class="filter-chip-text">按批发店的花材名称统计</text>
+          </view>
+          <view class="filter-chip filter-chip--reset" @click="resetSearch()">
+            <text class="filter-chip-text">重置</text>
+          </view>
+        </view>
+      </view>
+    </view>
 
-	</view>
-		<scroll-view scroll-y scroll-with-animation class="main-view">
-			<view class="space-view ex-table">
-				<block v-if="!$util.isEmpty(profile)">
-					<t-table :headerBackgroundColor="'#F0F2F6'">
-						<t-tr header><t-th>花材</t-th><t-th>数量</t-th><t-th>总金额</t-th></t-tr>
+	<scroll-view scroll-y scroll-with-animation class="main-view">
+		<view class="space-view ex-table">
+			<block v-if="!$util.isEmpty(profile)">
+				<t-table :headerBackgroundColor="'#F0F2F6'">
+					<t-tr header><t-th>花材</t-th><t-th>数量</t-th><t-th>总金额</t-th></t-tr>
+					<t-tr>
+						<t-td><view style="color:black;">合计</view></t-td>
+						<t-td><view style="color:black;">{{info.totalNum?parseFloat(info.totalNum):0}}</view></t-td>
+						<t-td><view style="color:black;">{{info.totalAmount?parseFloat(info.totalAmount):0}}</view></t-td>
+					</t-tr>
+					<view v-for="(item, index) in profile" :key="index" @click="goDetail(item)">
 						<t-tr>
-							<t-td><view style="color:black;">合计</view></t-td>
-							<t-td><view style="color:black;">{{info.totalNum?parseFloat(info.totalNum):0}}</view></t-td>
-							<t-td><view style="color:black;">{{info.totalAmount?parseFloat(info.totalAmount):0}}</view></t-td>
+							<t-td><view>{{item.name}}</view></t-td>
+							<t-td><view>{{item.num?parseFloat(item.num):0}}</view></t-td>
+							<t-td><view>{{item.amount?parseFloat(item.amount):0}}</view></t-td>
 						</t-tr>
-						<view v-for="(item, index) in profile" :key="index" @click="goDetail(item)">
-							<t-tr>
-								<t-td><view>{{item.name}}</view></t-td>
-								<t-td><view>{{item.num?parseFloat(item.num):0}}</view></t-td>
-								<t-td><view>{{item.amount?parseFloat(item.amount):0}}</view></t-td>
-							</t-tr>
-						</view>
-					</t-table>
-				</block>
-			</view>
-		</scroll-view>
+					</view>
+				</t-table>
+			</block>
+		</view>
+	</scroll-view>
 	</view>
 </view>
 </template>
@@ -51,7 +75,17 @@ import AppSearchModule from "@/components/module/app-search";
 export default {
 	components: { AppWrapperEmpty,ShopSelect,DateSelect,AppSearchModule},
 	mixins: [list],
-	computed: {		...mapGetters(["getDictionariesInfo","getLoginInfo"])	},
+	computed: {
+		...mapGetters(["getDictionariesInfo","getLoginInfo"]),
+		/** 供货商筛选展示文案，过长时截断 */
+		ghsFilterLabel () {
+			const name = this.ghsName || "选择批发店";
+			if (name.length <= 10) {
+				return name;
+			}
+			return name.slice(0, 10) + "...";
+		}
+	},
 	data() {
 		return {
 			isShow:false,
@@ -103,6 +137,11 @@ export default {
 			this.startTime = ''
 			this.endTime = ''
 			this.showGhsParam = 0
+			if (this.$refs.dateSelectRef) {
+				this.$refs.dateSelectRef.defaultDateName = "今天"
+				this.$refs.dateSelectRef.startDate = ""
+				this.$refs.dateSelectRef.endDate = ""
+			}
 			this.resetList()
 			this.getMyStatList()
 		},
@@ -155,30 +194,14 @@ export default {
 </script>
 <style lang="scss" scoped>
 .ex-page {
-	background: white;
-	padding-top:20upx;
+	background: #f0f2f6;
 	height: 100%;
 	display: flex;
 	flex-direction: column;
-	.top-bar {
-		position: absolute;
-		left: 0;
-		display: flex;
-		width: 100%;
-		top:116upx;
-		z-index: 20;
-		.bar{
-			width: 50%;
-			height: 100%;
-			text-align: center;
-			&:nth-child(1){
-				border-right: 1upx solid #eeeeec;
-			}
-		}
-	}
+
 	.main-view {
-		margin-top: 80upx;
 		flex: 1;
+		margin-top: 16upx;
 		background-color: #f9fbfc;
 		.space-view {
 			background-color: #fff;
@@ -234,4 +257,100 @@ export default {
 		}
 	}
 }
+
+.toolbar-panel {
+	flex-shrink: 0;
+	background: #ffffff;
+	padding: 20upx 24upx 0;
+	box-shadow: 0 8upx 20upx rgba(24, 37, 30, 0.06);
+}
+
+.search-box {
+	margin-bottom: 16upx;
+}
+
+.filter-panel {
+	padding-bottom: 20upx;
+}
+
+.filter-row {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.filter-row + .filter-row {
+	margin-top: 16upx;
+}
+
+.filter-chip {
+	height: 68upx;
+	padding: 0 22upx;
+	border: 1upx solid #e3e8e6;
+	border-radius: 16upx;
+	background: #ffffff;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.filter-chip + .filter-chip {
+	margin-left: 16upx;
+}
+
+.filter-chip--date {
+	min-width: 148upx;
+}
+
+.filter-chip--ghs,
+.filter-chip--toggle {
+	flex: 1;
+	min-width: 0;
+	justify-content: flex-start;
+}
+
+.filter-chip--reset {
+	min-width: 120upx;
+	border-color: #d9dee8;
+	background: #f7f8fa;
+}
+
+.filter-chip--active {
+	border-color: #09c567;
+	background: #f3fbf7;
+}
+
+.filter-chip-text {
+	font-size: 26upx;
+	color: #24282d;
+	line-height: 36upx;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.filter-chip--active .filter-chip-text {
+	color: #09c567;
+}
+
+.filter-chip--reset .filter-chip-text {
+	color: #666666;
+}
+
+.filter-date-select {
+	display: flex;
+	align-items: center;
+}
+
+.filter-date-select ::v-deep .select-title {
+	font-size: 26upx;
+	color: #24282d;
+}
+
+.filter-date-select ::v-deep .select-title.select_corlor {
+	color: #09c567;
+}
 </style>