emis-sapp/pages/user/exclusiveCourier.vue
2024-11-11 16:40:54 +08:00

311 lines
9.4 KiB
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 class="">
<view @click="handleScan" class="blcok-grey-sm" style="margin-top: 0;">
<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>
<view class="blcok-grey-sm">
<u-text :text="'查询绑定'" size="30" :bold="true" lines="1"></u-text>
<u-row custom-style="margin-top: 20rpx;">
<tpx-input placeholder="输入工号或手机号" v-model:value="bindModal.data.searchValue"></tpx-input>
<view class="ml-20">
<u-button @click="handleBindSearchEmp" type="primary"
custom-style="height:66rpx;font-size: 30rpx;">
搜索
</u-button>
</view>
</u-row>
</view>
</view>
</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-row>
<u-text :text="item.empName" size="30" :bold="true" lines="1"></u-text>
<view class="ml-10 font-24 pos-rlt" style="padding: 8rpx 20rpx;border-radius: 20rpx;background-color: #d2d4d8;">
{{item.ownerSiteName || '-'}}
</view>
</u-row>
<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>
<u-line color="#DEDEDE" margin="30rpx 0 0 0"></u-line>
<u-row custom-style="margin-top:20rpx;" justify="between">
<u-row>
<text class="pr-20 clr-sub">默认</text>
<u-switch v-model="item.defaultFlag" @change="handleDefaultSwitch(item)" activeValue="1" inactiveValue="0" active-color="#B12D29" size="34"></u-switch>
</u-row>
<u-row>
<u-text @click="handleDelItem(item)" text="删除" prefixIcon="trash" size="26" margin="0 0 0 20rpx"></u-text>
</u-row>
</u-row>
</view>
</view>
</view>
</tpx-scroll-view>
</view>
</template>
<!-- <template v-slot:footer>
<view class="blcok-white-noradius" >
<u-button @click="handleBindShow()" type="primary" size="large" shape="circle"
custom-style="height:80rpx;font-size: 30rpx;">绑定快递员</u-button>
</view>
</template> -->
</tpx-layout>
<tpx-dialog title="绑定快递员" v-model:show="bindModal.show" >
<view style="height: calc(50vh);">
<tpx-layout>
<template v-slot:body>
<view class="pl-30 pr-30"></view>
</template>
</tpx-layout>
</view>
</tpx-dialog>
<tpx-dialog title="快递员信息" v-model:show="bindSearchModal.show" >
<view>
<tpx-layout>
<template v-slot:body>
<view class="pl-30 pr-30 pt-30">
<tpx-checkitems :list="bindSearchModal.data._list" v-model:value="bindSearchModal.data.empCode" v-model:text="bindSearchModal.data.empName" v-slot="curPro" min-checked="1" type="single"
@onChange="handleChooseItem" :transKeyVal="{valKey: 'empCode', titleKey: 'empName'}"
>
<view slot :class="`yunf-item ${curPro.checked?'active':''}`">
<u-row>
<u-avatar :src="curPro.item.avatar" size="110"></u-avatar>
<view class="pl-30">
<u-row>
<u-text :text="curPro.item.empName" size="30" :bold="true" lines="1"></u-text>
<view class="ml-20 font-24 pos-rlt" style="padding: 8rpx 20rpx;border-radius: 20rpx;background-color: #d2d4d8;">
{{curPro.item.ownerSiteName}}
</view>
</u-row>
<view class="mt-10">
{{curPro.item.phone}}
</view>
</view>
</u-row>
</view>
</tpx-checkitems>
</view>
</template>
<template v-slot:footer>
<view class="blcok-white-noradius" style="margin-top: 0;margin-bottom: 0;">
<u-button @click="handleConfirmBind" type="primary" size="large" shape="circle"
custom-style="height:80rpx;font-size: 30rpx;">
绑定
</u-button>
</view>
</template>
</tpx-layout>
</view>
</tpx-dialog>
</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: [] },
bindModal: {
show: false,
data: {}
},
bindSearchModal: {
show: false,
data: {}
}
}
},
onShareAppMessage() {
return {
}
},
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 {
let cpData = {
_bindTsmName: item.empName,
_bindTsmCode: item.empCode,
_bindTsmAvatar: item.avatar,
}
this.goto(`post/post?defaultSubParams=${encodeURIComponent(JSON.stringify(cpData))}&type=create`)
}
},
async handleDelItem(item) {
let bl = await this.confirmModal('确认要删除吗?')
if(bl) {
await apiService.deleteBindSalemen({ empCode: item.empCode, _loading: true })
this.showToast('操作成功')
this.$refs.listRef.getDataList(true) // 重置到第一页数据
}
},
async handleDefaultSwitch(item) {
setTimeout(async ()=> {
let defaultFlag = item.defaultFlag
try{
await apiService.setDefaultBindSalesmen({ empCode: item.empCode, defaultFlag, _loading: true })
this.showToast('操作成功')
this.$refs.listRef.getDataList(true) // 重置到第一页数据
}catch(e){
// 操作失败,切回按钮状态
item.defaultFlag = Number(!Number(defaultFlag)) + ''
}
}, 300)
},
async handleScan() {
const resData = await scanCode()
let params = getQueryObject(resData)
await apiService.bindSalesmen({ ...params, _loading: true })
this.bindSucceed()
},
handleBindShow(item={}) {
this.bindModal.show = true
this.bindModal.data = {}
},
async handleBindSearchEmp(item={}) {
let res = await apiService.queryNewSalesmen({ ...this.bindModal.data, _loading: true })
this.bindSearchModal.show = true
this.bindSearchModal.data = {
_list: res.data || []
}
let dflCheckItem = this.bindSearchModal.data?._list?.[0]
if(dflCheckItem) {
Object.assign(this.bindSearchModal.data, dflCheckItem)
}
},
async handleConfirmBind(){
let res = await apiService.bindSalesmen({ ...this.bindSearchModal.data, _loading: true })
this.bindSucceed()
},
bindSucceed(){
this.showToast('绑定成功')
this.bindModal.show = false
this.bindSearchModal.show = false
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;
}
.yunf-item {
margin-bottom: 20rpx;
padding: 30rpx;
background: #F6F6F6;
border-radius: 20rpx;
border: 2rpx solid transparent;
&.active {
border-color: $uni-color-primary;
}
}
</style>