daoji_h5/agent/pages/order/change.vue

508 lines
13 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="order-pages" v-if="isLoad">
<fixed @height="initFixHeight" :initHeight="transferForm.coach_type">
<view class="fill-base pd-lg">
<view class="flex-between">
<view class="f-title c-title text-bold">转派订单</view>
<view class="flex-center">
<view @tap.stop="toChangeItem('coach_type',item.id)"
class="flex-center service-type-item c-caption" :class="[{'ml-lg':index!=0}]"
:style="{background:transferForm.coach_type == item.id ? primaryColor:'',color:transferForm.coach_type == item.id ? '#fff':''}"
v-for="(item,index) in tabList" :key="index">
{{item.title}}
</view>
</view>
</view>
<view class="fill-base flex-center mt-lg pt-lg b-1px-t" v-if="transferForm.coach_type == 1">
<view class="flex-1">
<search @input="toSearch" type="input" :padding="0" :radius="30" height="70rpx"
:placeholder="placeholder">
</search>
</view>
<view @tap.stop="$refs.show_transfer_item.open()" class="flex-y-center pl-lg">筛选<i
class="iconfont iconshaixuanxia-1 c-caption"></i></view>
</view>
</view>
</fixed>
<block v-if="transferForm.coach_type == 1">
<view @tap.stop="toChangeItem('coach_id',index)"
class="list-item fill-base pt-lg pb-lg pl-md pr-lg flex-center mt-md ml-md mr-md radius-16"
v-for="(item,index) in list.data" :key="index">
<i class="iconfont mr-md"
:class="[{'icon-xuanze':transferForm.coach_id!=item.id},{'icon-radio-fill':transferForm.coach_id==item.id}]"
:style="{color:transferForm.coach_id==item.id?primaryColor:''}"></i>
<view class="flex-1 flex-warp">
<image class="avatar radius" :src="item.work_img"></image>
<view class="flex-1 ml-md">
<view class="flex-between">
<view class="f-title c-title text-bold max-200 ellipsis">{{item.coach_name}}</view>
<view class="can-service-btn flex-center f-icontext rel" :style="{color:primaryColor}">
<view class="bg abs" :style="{background:primaryColor}"></view>
最早可约:{{item.near_time}}
</view>
</view>
<view class="f-desc" style="color:#4D4D4D">
所属代理商:{{item.admin_info.username}}{{cityType[item.admin_info.city_type]}}代理)</view>
<view class="flex-between f-caption c-caption mt-sm">
<view>电话:{{item.mobile}}</view>
<view class="flex-y-center"><i class="iconfont iconjuli1"></i>{{item.distance}}</view>
</view>
</view>
</view>
</view>
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading"
v-if="loading">
</load-more>
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
</block>
<block v-if="transferForm.coach_type == 2">
<view class="pd-lg f-mini-title c-title fill-base b-1px-t">
<view class="text-bold flex-y-center pb-lg"><i
class="iconfont icon-required c-warning"></i>线下{{$t('action.attendantName')}}</view>
<input v-model="transferForm.coach_name" type="text" class="item-input pl-lg pr-lg radius-16"
maxlength="15" :placeholder="rule[0].errorMsg" placeholder-class="color:#C7C7C7" />
<view class="text-bold flex-y-center pt-lg pb-lg"><i class="iconfont icon-required c-warning"></i>联系电话
</view>
<input v-model="transferForm.mobile" type="text" class="item-input pl-lg pr-lg radius-16" maxlength="11"
:placeholder="rule[1].errorMsg" placeholder-class="color:#C7C7C7" />
<view class="text-bold pt-lg pb-lg">转派备注 </view>
<textarea v-model="transferForm.text" class="item-textarea pd-lg radius-16"
placeholder-class="color:#C7C7C7" maxlength="400" placeholder="若订单有其他特殊情况可单独备注在此处" />
<view @tap.stop="toChooseAgent" class="flex-between pt-lg pb-lg">
<view class="text-bold">关联代理商</view>
<view class="flex-y-center" :class="[{'c-caption':!transferForm.admin_id}]">
<view class="max-400 ellipsis">{{transferForm.admin_id | handleAdminName(base_agent)}}</view>
<i class="iconfont icongengduo"></i>
</view>
</view>
</view>
<view class="flex-center f-caption c-caption pt-lg">
不关联代理商则默认是平台的{{$t('action.attendantName')}}</view>
</block>
<view class="space-max-footer"></view>
<fix-bottom-button @confirm="toConfirm" :text="[{text:'确定',type:'confirm'}]" bgColor="#fff">
</fix-bottom-button>
<uni-popup type="top" ref="show_transfer_item" :top="`${popupHeight+1}px`" :custom="true">
<view class="popup-transfer-type pd-lg fill-base">
<view @tap.stop="toChangeItem('type',item.id)" class="f-paragraph mb-lg" :class="[{'mt-lg':index==0}]"
:style="{color:param.type==item.id?primaryColor:''}" v-for="(item,index) in transfreTypeList"
:key="index">
{{item.title}}
</view>
</view>
</uni-popup>
<uni-popup ref="choose_item" type="bottom" :custom="true">
<view @touchmove.stop.prevent class="common-popup-content fill-base"
style="width: 100%;border-radius: 34rpx 34rpx 0 0;">
<view class="flex-center f-title c-title text-bold pb-lg">选择代理商</view>
<scroll-view scroll-y style="width: 100%;max-height:50vh">
<view @tap.stop="toChangeItem('chooseInd',index)" class="flex-center pt-sm pb-sm"
:style="{color:chooseInd == index ? primaryColor: ''}" v-for="(item,index) in base_agent"
:key="index">
<view class="f-title flex-1 pr-lg">
{{item.agent_name}}
</view>
<i class="iconfont c-caption"
:class="[{'icon-xuanze':chooseInd != index},{'icon-radio-fill':chooseInd == index}]"
style="font-size: 40rpx;" :style="{color:chooseInd == index ? primaryColor: ''}"></i>
</view>
</scroll-view>
<view class="button">
<view @tap.stop="$refs.choose_item.close()" class="item-child">
取消
</view>
<view @tap.stop="toConfirmCheck" class="item-child"
:style="{background: primaryColor,color:'#fff'}">
确定
</view>
</view>
<view class="space-safe"></view>
</block>
</view>
</uni-popup>
</view>
</template>
<script>
import {
mapState,
mapActions,
mapMutations
} from "vuex"
export default {
components: {},
data() {
return {
isLoad: false,
options: {},
placeholder: '请输入' + this.$t('action.attendantName') + '名称',
tabList: [{
id: 1,
title: '更换' + this.$t('action.attendantName')
}, {
id: 2,
title: '委派' + this.$t('action.attendantName')
}],
transfreTypeList: [{
id: 1,
title: '距离最近'
}, {
id: 2,
title: '最早可预约'
}],
cityType: ['', '城市', '区县', '省'],
param: {
page: 1,
coach_name: '',
type: 1
},
list: {
data: []
},
loading: true,
index: -1,
lockTap: false,
popupHeight: '',
popupInfo: {},
base_agent: [],
chooseInd: -1,
transferForm: {
order_id: '',
coach_type: 1,
coach_id: '',
coach_name: '',
near_time: '',
mobile: '',
text: '',
admin_id: ''
},
rule: [{
name: "coach_name",
checkType: "isNotNull",
errorMsg: "请输入" + this.$t('action.attendantName') + "姓名",
regType: 2
},
{
name: "mobile",
checkType: "isMobile",
errorMsg: "请输入联系电话"
}
]
}
},
computed: mapState({
primaryColor: state => state.config.configInfo.primaryColor,
subColor: state => state.config.configInfo.subColor,
configInfo: state => state.config.configInfo,
userInfo: state => state.user.userInfo,
}),
onLoad(options) {
let {
id,
agent = 0
} = options
options.agent = agent * 1
this.options = options
this.transferForm.order_id = id
this.initIndex()
},
onPullDownRefresh() {
// #ifndef APP-PLUS
uni.showNavigationBarLoading()
// #endif
this.initRefresh()
uni.stopPullDownRefresh()
},
onReachBottom() {
if (this.list.current_page >= this.list.last_page || this.loading) return;
this.param.page = this.param.page + 1;
this.loading = true;
this.getList();
},
methods: {
...mapActions(['getConfigInfo']),
...mapMutations(['updateTechnicianItem']),
async initIndex(refresh = false) {
// #ifdef H5
if (!refresh && this.$jweixin.isWechat()) {
await this.$jweixin.initJssdk();
this.$jweixin.wxReady(() => {
this.$jweixin.hideOptionMenu()
})
}
// #endif
if (!this.configInfo.id || refresh) {
await this.getConfigInfo()
}
await Promise.all([this.getBaseInfo(), this.getList()])
this.isLoad = true
this.$util.setNavigationBarColor({
bg: this.primaryColor
})
},
initRefresh() {
this.param.page = 1
this.initIndex(true)
},
async getBaseInfo() {
let {
agent = 0
} = this.options
let methodKey = agent ? 'agent' : 'admin'
this.base_agent = await this.$api[methodKey].adminSelect()
},
toSearch(val) {
this.param.page = 1
this.param.coach_name = val
this.transferForm.coach_id = ''
this.getList()
},
async getList() {
let {
list: oldList,
param,
} = this
let {
id,
agent = 0
} = this.options
param.order_id = id
let methodKey = agent ? 'agent' : 'admin'
let newList = await this.$api[methodKey].orderChangeCoachList(param)
if (this.param.page == 1) {
this.list = newList
} else {
newList.data = oldList.data.concat(newList.data)
this.list = newList
}
this.loading = false
this.$util.hideAll()
},
initFixHeight(val) {
this.popupHeight = val
},
toChangeItem(key, val) {
switch (key) {
case 'type':
this.transferForm.coach_id = ''
this.param[key] = val
this.param.page = 1
this.getList()
this.$refs.show_transfer_item.close()
break
case 'coach_type':
let data = Object.assign({}, this.transferForm, {
coach_type: val,
coach_id: '',
coach_name: '',
near_time: '',
mobile: '',
text: '',
admin_id: ''
})
this.transferForm = data
break
case 'coach_id':
let {
id, near_time
} = this.list.data[val]
this.transferForm[key] = id
this.transferForm.near_time = near_time
break
case 'chooseInd':
this[key] = val
break
}
},
toChooseAgent() {
let {
admin_id = 0
} = this.transferForm
let ind = this.base_agent.findIndex(item => {
return item.id == admin_id
})
this.chooseInd = ind
this.$refs.choose_item.open()
},
toConfirmCheck() {
let {
id
} = this.base_agent[this.chooseInd]
this.transferForm.admin_id = id
this.$refs.choose_item.close()
},
//表单验证
validate(param) {
let validate = new this.$util.Validate();
this.rule.map(item => {
let {
name,
} = item
validate.add(param[name], item);
})
let message = validate.start();
return message;
},
async toConfirm() {
let param = this.$util.deepCopy(this.transferForm)
let {
coach_type: ctype = 1,
coach_id = 0
} = param
if (ctype === 1) {
if (!coach_id) {
this.$util.showToast({
title: `请选择` + this.$t('action.attendantName')
})
return
}
delete param.coach_name
delete param.mobile
delete param.text
delete param.admin_id
} else {
param.coach_id = 0
let msg = this.validate(param);
if (msg) {
this.$util.showToast({
title: msg
});
return;
}
delete param.near_time
}
delete param.coach_type
param.text = param.text ? param.text.substring(0, 400) : ''
if (this.lockTap) return
let {
agent
} = this.options
let methodKey = agent ? 'agent' : 'admin'
try {
await this.$api[methodKey].orderChangeCoach(param)
this.$util.showToast({
title: '操作成功'
})
this.lockTap = false;
this.$util.hideAll()
this.updateTechnicianItem({
key: 'haveOperItem',
val: true
})
this.$util.back()
this.$util.goUrl({
url: 1,
openType: `navigateBack`
})
} catch (e) {
setTimeout(() => {
this.lockTap = false
this.$util.hideAll()
}, 2000)
return
}
},
// 订单详情
goDetail(index) {
let {
id
} = this.list.data[index]
let {
agent
} = this.options
let url = `/agent/pages/order/detail?id=${id}&agent=${agent}`
this.$util.goUrl({
url
})
}
},
filters: {
handleAdminName(val, data) {
let text = '请选择代理商'
if (val) {
let arr = data.filter(item => {
return item.id == val
})
text = arr[0].agent_name
}
return text
}
}
}
</script>
<style lang="scss">
.order-pages {
.iconshaixuanxia-1 {
font-size: 20rpx;
transform: scale(0.6);
}
.popup-transfer-type {
width: 100%;
height: 234rpx;
}
.list-item {
.icon-xuanze,
.icon-radio-fill {
font-size: 38rpx;
color: '#BEC3CE'
}
.avatar {
width: 124rpx;
height: 124rpx;
}
.can-service-btn {
height: 32rpx;
padding: 0 6rpx 0 6rpx;
.bg {
opacity: 0.1;
border-radius: 5rpx;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
}
}
.item-input {
height: 110rpx;
background: #F9FAF9;
}
.item-textarea {
width: 630rpx;
height: 300rpx;
background: #F9FAF9;
}
.icongengduo {
color: #5A677E;
font-size: 20rpx;
}
}
</style>