From 045619b37a9840c890870d47ed90dcafa0015d4b Mon Sep 17 00:00:00 2001
From: aihe <961836564@qq.com>
Date: Wed, 6 Dec 2023 18:37:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0tags=E3=80=81search=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/tpx-search/tpx-search.vue |  96 ++++++++++++++++++++
 components/tpx-tags/tpx-tags.vue     | 128 +++++++++++++++++++++++++++
 pages/post/post.vue                  |  39 +++-----
 pages/tabBar/search/search.vue       |  71 +++++----------
 4 files changed, 258 insertions(+), 76 deletions(-)
 create mode 100644 components/tpx-search/tpx-search.vue
 create mode 100644 components/tpx-tags/tpx-tags.vue

diff --git a/components/tpx-search/tpx-search.vue b/components/tpx-search/tpx-search.vue
new file mode 100644
index 0000000..d5a29c9
--- /dev/null
+++ b/components/tpx-search/tpx-search.vue
@@ -0,0 +1,96 @@
+<template>
+	<view>
+		<u-row justify="start">
+			<view v-for="(item) in list" @click="handleChangeTab(item)"
+				:class="`sta-item ${value == item.val?'active':''} stai-${mode}`">
+				<view class="stai-text">
+					{{item.title}}
+					<view class="stai-chk-line"></view>
+				</view>
+			</view>
+		</u-row>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			list: {
+				default () {
+					return []
+				}
+			},
+			value: {
+				default () {
+					return ''
+				}
+			},
+			mode: {
+				default () {
+					return 'primary' // primary info  
+				}
+			}
+		},
+		data() {
+			return {
+
+			}
+		},
+		created() {
+
+		},
+		onHide() {
+
+		},
+		destroyed() {},
+		
+		methods: {
+			handleChangeTab(cur){
+				this.$emit('tabchange', cur.val)
+				this.$emit('update:value', cur.val) 
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.sta-item {
+		flex: 1;
+		padding: 0 0 30rpx 0;
+		margin-right: 30rpx;
+		position: relative;
+		font-size: 28rpx;
+		color: #FFF;
+		opacity: 0.8;
+		.stai-text {
+			position: relative;
+			display: inline-block;
+		}
+
+		&.active {
+			font-weight: 600;
+			opacity: 1;
+			.stai-text {
+				.stai-chk-line{
+					content: ' ';
+					position: absolute;
+					bottom: -30rpx;
+					left: 0;
+					margin-left: 10%;
+					width: 80%;
+					height: 4rpx;
+					background: #FFF;
+					border-radius: 2rpx;
+				}
+			}
+		}
+		&.stai-primary{
+			color: #0E0708;
+			&.active {
+				.stai-chk-line{
+					background: $u-primary;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/components/tpx-tags/tpx-tags.vue b/components/tpx-tags/tpx-tags.vue
new file mode 100644
index 0000000..32690bf
--- /dev/null
+++ b/components/tpx-tags/tpx-tags.vue
@@ -0,0 +1,128 @@
+<template>
+	<view>
+		<view class="smp-tag" v-for="(item, dIndex) in list">
+			<u-tag :text="`${item.title}`" :plain="!checkedVal.indexOf(item.val) > -1" :type="mode" 
+				border-color="transparent" shape="circle" :bg-color="`${(checkedVal.indexOf(item.val)>-1 || (mode == 'primary'))?activeColor:color}`" 
+				:color="`${(checkedVal.indexOf(item.val)>-1 || (mode == 'primary'))?'#fff':'#666'}`" 
+				@click="handleCheckBoxClick(item)" @close="handleDeleteItem(item)" :closable="closable">
+			</u-tag>
+		</view>
+	</view>
+</template>
+
+<script>
+	
+	const typeEnum = {
+		single: 'single',
+		multiple: 'multiple'
+	}
+	
+	export default {
+		computed: {
+			checkedVal() {
+				let val = this.value
+				let res = []
+				if(typeof val == "object") {
+					res = val
+				}
+				if(typeof val == 'string' && val !== '') {
+					res = val.split(",")
+				}
+				if(typeof val == 'number') {
+					res = [val]
+				}
+				return res
+			},
+		},
+		props: {
+			list: {
+				default () {
+					return []
+				}
+			},
+			value: {
+				default () {
+					return []
+				}
+			},
+			type: {
+				default () {
+					return typeEnum.multiple // typeEnum | ''; 为空代表不做切换选中功能
+				}
+			},
+			closable: {
+				default () {
+					return false  
+				}
+			},
+			mode: {
+				default () {
+					return 'info'  // 'info' | 'primary'
+				}
+			},
+			color: {
+				default () {
+					return '#F6F6F6' 
+				}
+			},
+			activeColor: {
+				default () {
+					return '#de524e'
+				}
+			},
+			
+		},
+		data() {
+			return {
+				
+			}
+		},
+		created() {
+
+		},
+		onHide() {
+
+		},
+		destroyed() {},
+		
+		methods: {
+			handleCheckBoxClick(curItem) {
+				if(this.type) {
+					const curVal = curItem.val
+					let checkedVal = [].concat(this.checkedVal)
+					const hasChked = checkedVal.indexOf(curVal) > -1
+					if(hasChked) {
+						checkedVal = checkedVal.filter(val=> val != curVal)
+					} else {
+						if(this.type == typeEnum.multiple) {
+							checkedVal.push(curVal)
+						} else {
+							checkedVal = [curVal]
+						}
+					}
+					this.changeTabCheck(checkedVal)
+				}
+				this.$emit('onItemClick', curItem)
+			},
+			handleDeleteItem(curItem) {
+				const newList = this.list.filter(t=> t.val != curItem.val)
+				this.$emit('onChange', newList)
+				this.$emit('update:list', newList)
+			},
+			changeTabCheck(checkedVal) {
+				let oldVal = checkedVal
+				let val = oldVal
+				if(this.type == typeEnum.single) {
+					val = checkedVal[0]
+				}
+				
+				this.$emit('onChange', val)
+				this.$emit('update:value', val)
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	
+</style>
\ No newline at end of file
diff --git a/pages/post/post.vue b/pages/post/post.vue
index aaec3c8..bc16921 100644
--- a/pages/post/post.vue
+++ b/pages/post/post.vue
@@ -178,11 +178,7 @@
 			
 				<view class="com-section mt-30">给快递员捎话</view>
 				<view class="blcok-white">
-					<view class="smp-tag" v-for="(item, index) in tipsList">
-						<u-tag :text="`${item.title}`" :plain="!item.checked" type="info" shape="circle"
-							:bg-color="`${item.checked?'#de524e':''}`" @click="handleCheckBoxClick(item)">
-						</u-tag>
-					</view>
+					<tpx-tags :list="tipsList" v-model:value="submitParam.tips"></tpx-tags>
 					<u-textarea v-model="submitParam.otherDes" border="surround" height="160" placeholder="其他说明"
 						maxlength="50" count></u-textarea>
 					<u-line margin="20rpx 0 10rpx 0"></u-line>
@@ -257,35 +253,20 @@
 		},
 		data() {
 			return {
-				sendTypeList: [{
-						title: '上门取件',
-						val: 1
-					},
-					{
-						title: '仓库收货',
-						val: 2
-					},
-					{
-						title: '整柜提货',
-						val: 3
-					}
+				sendTypeList: [
+					{ title: '上门取件', val: 1 },
+					{ title: '仓库收货', val: 2 },
+					{ title: '整柜提货', val: 3 }
 				],
-				tipsList: [{
-						title: '请带纸箱',
-						val: 3
-					},
-					{
-						title: '需要爬楼',
-						val: 3
-					},
-					{
-						title: '来前电话',
-						val: 3
-					},
+				tipsList: [
+					{ title: '请带纸箱', val: '请带纸箱' },
+					{ title: '需要爬楼', val: '需要爬楼' },
+					{ title: '来前电话', val: '来前电话' },
 				],
 				showCladar: false,
 				agreePrivateRule: false,
 				submitParam: {
+					tips: [],
 					type: 1,
 					otherDes: ''
 				}
diff --git a/pages/tabBar/search/search.vue b/pages/tabBar/search/search.vue
index ee9dca2..d7d8670 100644
--- a/pages/tabBar/search/search.vue
+++ b/pages/tabBar/search/search.vue
@@ -42,39 +42,18 @@
 								<view style="padding: 0 0 30rpx 0">
 									<view>
 										<u-text text="快递状态" size="28" :bold="true" margin="0 0 20rpx 0"></u-text>
-										<view class="smp-tag" v-for="(dItem, dIndex) in dlvTypeList">
-											<u-tag :text="`${dItem.title}`" :plain="!dItem.checked" type="info" shape="circle" :bg-color="`${dItem.checked?'#de524e':''}`" :name="dIndex"
-												@click="handleCheckBoxClick(dItem)">
-											</u-tag>
-										</view>
+										<tpx-tags :list="dlvTypeList" v-model:value="tmpSearchParam.postStatus" ></tpx-tags>
 									</view>
 									
 									<view>
 										<u-text text="付款方式" size="28" :bold="true" margin="20rpx 0 20rpx 0"></u-text>	
-										<view class="smp-tag" v-for="(pItem, pIndex) in payTypeList">
-											<u-tag :text="`${pItem.title}`" :plain="!pItem.checked" type="info" shape="circle" :bg-color="`${pItem.checked?'#de524e':''}`" :name="pIndex"
-												@click="handleCheckBoxClick(pItem)">
-											</u-tag>
-										</view>
+										<tpx-tags :list="payTypeList" v-model:value="tmpSearchParam.payType" ></tpx-tags>
 									</view>
 									
 									<view>
 										<u-text text="时间范围" size="28" :bold="true" margin="20rpx 0 20rpx 0"></u-text>
-										<view class="smp-tag" v-for="(daItem, daIndex) in dateTypeList" 
-											v-show="!(tmpSearchParam.date && dateTypeEnum.custom == daItem.val)" 
-										>
-											<u-tag 
-												:text="`${daItem.title}`" :plain="!(daItem.val == tmpSearchParam.dateType)" type="info" shape="circle" :bg-color="`${daItem.val == tmpSearchParam.dateType?'#de524e':''}`"
-												@click="handleCheckDate(daItem)">
-											</u-tag>
-										</view>
-										<view v-if="tmpSearchParam.date" class="smp-tag" style="display: block;">
-											<view style="display: inline-block;">
-												<u-tag :text="`${tmpSearchParam.date}`" :plain="false" type="info" shape="circle" :bg-color="`#de524e`"
-													@click="handleSwitchCladar()">
-												</u-tag>
-											</view>
-										</view>
+										<tpx-tags type="single" :list="dateTypeList" v-model:value="tmpSearchParam.dateType" @onItemClick="handleCheckDate"></tpx-tags>
+										<tpx-tags v-if="tmpSearchParam.date" type='' :list="[{title: tmpSearchParam.date}]" @onItemClick="handleSwitchCladar()" mode="primary"></tpx-tags>
 									</view>
 								</view>
 							</view>
@@ -196,10 +175,7 @@
 				showSearchMore: false,
 				showCladar: false,
 				tmpSearchParam: {
-					postStatus: '', // 快递状态
-					payType: '', // 支付类型
-					dateType: '', // 日期类型
-					date: '' // 日期
+					
 				},
 				ordList: [
 					{},{},{},{},{},{},{},{}
@@ -215,6 +191,7 @@
 			}
 		},
 		onLoad() {
+			this.initTmpSrchParam()
 			this.initData();
 		},
 		onUnload() {
@@ -228,8 +205,17 @@
 					uni.stopPullDownRefresh();
 				}, 300);
 			},
-			setListData() {
-				
+			initTmpSrchParam(){
+				this.tmpSearchParam = {
+					postStatus: [], // 快递状态
+					payType: [], // 支付类型
+					dateType: [], // 日期类型
+					date: '' // 日期
+				}
+			},
+			loadListData() {
+				// 请求列表数据 TODO
+				console.log('====this.searchParam===', this.searchParam)
 			},
 			
 			onScrollBottom() {
@@ -238,15 +224,14 @@
 					return;
 				}
 				this.showLoadMore = true;
-				setTimeout(() => {
-					this.setListData();
-				}, 300);
+				this.handleSearchParamChange();
 			},
 			handleSearchMoreBtn(){
 				if(!this.showLoadMore) {
 					// 回显更多条件
 					Object.keys(this.tmpSearchParam).map(t=> {
-						this.tmpSearchParam[t] = this.searchParam[t] || ''
+						const val = this.searchParam[t]
+						typeof val != 'undefined' && (this.tmpSearchParam[t] = val)
 					})
 				}
 				this.showSearchMore = !this.showSearchMore
@@ -255,7 +240,7 @@
 				if(key) {
 					this.searchParam[key] = val
 				}
-				
+				this.loadListData()
 			},
 			async handleDealItem(item, deal = { type: '1' }) {
 				switch (deal.type){
@@ -275,28 +260,20 @@
 				}
 			},
 			handleResetTempSearch(){
-				Object.keys(this.tmpSearchParam).map(t=> {
-					this.tmpSearchParam[t] = ''
-				})
+				this.initTmpSrchParam()
 			},
 			handleConfirmTempSearch(){
 				Object.assign(this.searchParam, this.tmpSearchParam)
-				// Object.keys(this.tmpSearchParam).map(t=> {
-				// 	this.searchParam[t] = this.tmpSearchParam[t]
-				// })
-			},
-			handleCheckBoxClick(item, key){
-				item.checked = !item.checked
+				this.showSearchMore = false
+				this.handleSearchParamChange();
 			},
 			handleCheckDate(item) {
 				let newVal = item.val
 				if(newVal == dateTypeEnum.custom) {
 					this.handleSwitchCladar()
 				} else {
-					newVal == this.tmpSearchParam.dateType && (newVal = '')
 					this.tmpSearchParam.date = ''
 				}
-				this.tmpSearchParam.dateType = newVal
 			},
 			handleClaOk(res){
 				const ary = Object.values(res)