emis-sapp/pages/user/exclusiveCourier.vue

<template>
	<tpx-page>
		<tpx-layout>
			<template v-slot:header>
			</template>
			
			<template v-slot:body>
				<view class="pos-abt-all">
					<tpx-scroll-view v-model:resObject="resData" :searchParam="searchParam" :getListFun="getListFun"
						ref="listRef"
					>
						<view class="pgb-header">
							<view class="com-jianju">
								<!-- 关键字搜索框 -->
								<tpx-search placeholder="请输入工号或手机号码" v-model:value="searchParam.searchValue"></tpx-search>												
							</view>
						</view>
						
						<view class="pgb-cont">
							<view v-for="(item) in resData.list" class="blcok-white radius-20 mb-20" style="margin-top: 0;"
								
							>
								<view>
									<u-row justify="between">
										<u-row @click="handleItemClick(item)">
											<u-avatar :src="item.avatar" size="90"></u-avatar>
											<view class="pl-10">
												<u-text :text="item.empName" size="30" :bold="true" lines="1"></u-text>
												<view class="mt-10">
													{{item.phone}}
													<!-- <u-row>
														<uni-rate allow-half :value="3" activeColor="#B12D29" :readonly="true" size="18"></uni-rate>
														<view class="pl-10">
															<u-text :text="'3分'" size="26" color="#B12D29"></u-text>
														</view>		
													</u-row> -->
												</view>
											</view>
										</u-row>
										<u-row 
										>
											<u-button @click="handleItemClick(item)" shape="circle" type="primary" 
												custom-style="height: 54rpx; width:120rpx;margin-left: 12rpx;white-space: nowrap;">去发货</u-button>
										</u-row>
									</u-row>
								</view>
							</view>
						</view>
					</tpx-scroll-view>
				</view>
			</template>
			
			<template v-slot:footer> 
				<view class="blcok-white-noradius" @click="handleScan">
					<u-row justify="between">
						<view>
							<u-text :text="'扫码绑定'" size="30" :bold="true" lines="1"></u-text>
							<u-text margin="10rpx 0 0 0" :text="'扫描快递小哥二维码'" size="28" color="#999"></u-text>
							<u-text margin="10rpx 0 0 0" :text="'即可享受快递寄件、专属送快递服务'" size="28" color="#999"></u-text>
						</view>
						<view>
							<u-icon name="scan" size="88" color="#B12D29"></u-icon>
						</view>
					</u-row>
				</view>
			</template>
			
		</tpx-layout>
	</tpx-page>
</template>

<script>
	import { scanCode } from "@/common/untool"
	import * as apiService from "@/common/api"
	import { getQueryObject } from "@/common/util"
	import { pageEventNames } from "@/common/enum"
	
	export default {
		props: {
		},
		computed: {
			
		},
		data() {
			return {
				searchParam: {
					searchValue: '',
				},
				queryOption: {
					type: '', // 'choose' 选择操作
				},
				resData: { list: [] },
			}
		},
		onShareAppMessage() {
			return {
				// title: '',
				// path: 'TODO'
			}
		},
		onLoad(queryOption) {
			this.queryOption = queryOption
			this.initData();
		},
		onUnload() {
			
		},
		methods: {
			getListFun: apiService.getListBindSalesmen,
			initData(){
				
			},
			triggerListReload(){
				this?.$refs?.listRef?.getDataList?.(true) // 重置到第一页数据
			},
			handleItemClick(item){
				if(this.queryOption.type == "choose") {
					uni.$emit(pageEventNames.chooseEpm, {
						queryOption: this.queryOption,
						data: item
					})
					this.goBack()
				} else {
					this.goto(`post/post?bindEmpCode=${item.empCode}&bindEmpName=${item.empName}`)
				}
			},
			async handleScan() {
				const resData = await scanCode()
				let params = getQueryObject(resData)
				await apiService.bindSalesmen(params)
				this.showToast('绑定成功')
				this.triggerListReload()
			},
			
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';
	page {
		background-color: #F6F6F6;
		height: 100% !important;
	}
	
</style>
<style scoped lang="scss">
	.pgb-header {
		// padding-top: --status-bar-height;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		background-color: #FFF;
		position: relative;
	}
	.pgb-cont{
		padding: 30rpx 30rpx 0 30rpx;
	}
</style>