294 lines
8.7 KiB
Vue
294 lines
8.7 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>
|
|
</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>
|
|
|
|
<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 @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>
|
|
</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-text :text="curPro.item.empName" size="30" :bold="true" lines="1"></u-text>
|
|
<view class="mt-20">
|
|
{{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 {
|
|
this.goto(`post/post?bindEmpCode=${item.empCode}&bindEmpName=${item.empName}`)
|
|
}
|
|
},
|
|
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> |