feat(order): 新增联想工单功能

src/common/api/order.js

@@ -200,6 +200,9 @@ let orderApiFun = function(vm){
 	let cancelParts = async (partOrderId) => await vm.$u.put(prefix + 'parts/' + vm.vuex_token + '/orders/'+ partOrderId +'/cancel',{}, formType);
 	// 点击了异常单去处理
 	let workerDealWithError = async (orderId, params = {}) => await vm.$u.post( prefix + vm.vuex_token + '/order/' + orderId + '/workerDealWithError', params)
+	
+	// 工单搜索联想
+	let association = async (params = {}) => await vm.$u.get('/wxh-worker-rest/rest/order/revision/' + vm.vuex_token + '/association', params);
 	const orderApi = {
 		listByRecommendOrder,
 		listOrderCount,
@@ -252,7 +255,8 @@ let orderApiFun = function(vm){
 		getOrderPartsSum,
 		receiveParts,
 		cancelParts,
-		workerDealWithError
+		workerDealWithError,
+		association
 	}
 	return orderApi
 }

src/pages/order/search.vue

@@ -19,13 +19,29 @@
 					'color': '#2272FF'
 				}"
 				:focus="true"
+				@change="keywordChange"
+				@focus="onfocus"
+				@blur="loseFocus"
 				@search="searchOrder"
 				@custom="searchOrder"
 				></u-search>
 		</view>
-		<view class="content-item">
+		<view class="association-wrap" v-show="showAssociation">
+			<view v-for="(item, index) in associationList" :key="index"
+			 class="association-cell u-border-top"
+			 @click="handleClick(item, orderType, true)">
+				<view class="u-m-l-40">
+					<u-parse :html="item.contactNameHighlight" :tag-style="style"></u-parse>
+				</view>
+				<view class="u-m-l-10">
+					<u-parse :html="item.contactPhoneHighlight" :tag-style="style"></u-parse>
+				</view>
+			</view>
+			<view class="u-border-top"/>
+		</view>
+		<view class="content-item" v-show="showOrderCell">
 			<view v-if="orderList && orderList.length > 0" class="order-row">
-				<view v-for="(item, index) in orderList" :key="item.orderId">
+				<view v-for="(item) in orderList" :key="item.orderId">
 					<OrderCell :orderData="item" :orderType="orderType" :location="dataValue"
 						@click="handleClick" @action="handleClickCellButton"> </OrderCell>
 				</view>
@@ -60,14 +76,21 @@
 					orderStatusRangeType: '',
 				},
 				orderList: [],
+				associationList: [],
 				loaded: false,
+				focused: true,
 				total: 10,
 				loadStaus: 'loadmore',
+				style: {
+					// 字符串的形式
+					span: 'color: red'
+				}
 			};
 		},
 		onLoad() {
 			getApp().trackPage('订单搜索页')
 			// this.searchOrder()
+			this.associationOrder()
 		},
 		onReachBottom() {
 			let len = this.orderList && this.orderList.length || 0
@@ -80,6 +103,12 @@
 			searchEmpty() {
 				return process.uniEnv.qn_base_url + 'SearchEmpty.png'
 			},
+			showAssociation() {
+				return this.focused && !this.$u.test.isEmpty(this.associationList)
+			},
+			showOrderCell() {
+				return !this.focused && this.$u.test.isEmpty(this.associationList)
+			}
 		},
 		methods: {
 			searchOrder(index) {
@@ -90,6 +119,57 @@
 					this.getOrderList()
 				}
 			},
+			// 高亮文本
+			highlights () {
+				const keyword = this.search.keyword
+				this.associationList = this.associationList.map(item => {
+					for (let key in item) {
+						if (key === 'contactName' || key === 'contactPhone') {
+							let replaceReg = new RegExp(keyword, 'g')// 匹配关键字正则
+							let replaceString = '<span>' + keyword + '</span>' // 高亮替换v-html值
+							item[key + 'Highlight'] = item[key].replace(replaceReg, replaceString) // 开始替换
+						}
+					}
+					return item
+				})
+			},
+			/** 联想工单 */
+			async associationOrder() {
+				let res = await this.$u.api.association(this.search)
+				if (res && res.code == 200) {
+					this.associationList = res.data
+				}
+
+				this.associationList = [
+					{contactName: "张一山", contactPhone: "10000000000", orderId: "1"},
+					{contactName: "赵十天", contactPhone: "19999999999", orderId: "2"},
+					{contactName: "王九平", contactPhone: "11111111111", orderId: "3"},
+					{contactName: "李二狗", contactPhone: "12222222222", orderId: "4"},
+					{contactName: "王三水", contactPhone: "13333333333", orderId: "5"},
+					{contactName: "赵四方", contactPhone: "14444444444", orderId: "6"},
+					{contactName: "张五月", contactPhone: "15555555555", orderId: "7"},
+					{contactName: "李六七", contactPhone: "16666666666", orderId: "8"},
+					{contactName: "王七斤", contactPhone: "17777777777", orderId: "9"},
+					{contactName: "赵八有", contactPhone: "18888888888", orderId: "0"},
+				]
+				this.highlights()
+			},
+			/** 搜索关键字变更 */
+			keywordChange(value) {
+				if (this.$u.test.isEmpty(value)) {
+					this.associationList = []
+				} else {
+					this.associationOrder()
+				}
+			},
+			/** 获得焦点 */
+			onfocus() {
+				this.focused = true
+			},
+			/** 失去焦点 */
+			loseFocus() {
+				this.focused = false
+			},
 			// 页面数据
 			getOrderList(event) {
 				let self = this;
@@ -181,5 +261,16 @@
 		}
 		
 	}
+
+	.association-wrap {
+		.association-cell {
+			display: flex;
+			padding: 26rpx 32rpx;
+			font-size: 28rpx;
+			line-height: 54rpx;
+			color: #606266;
+			background: #FFFFFF;
+		}
+	}
 }
 </style>