mall_client/zyhs3_uniapp/pages/agent/index.vue

637 lines
19 KiB
Vue
Raw Normal View History

2026-03-13 07:50:35 +00:00
<template>
<view>
<view class="header">
<!-- #ifdef MP-WEIXIN -->
<view :style="{height: wxBtnHeight + 'px'}"></view>
<!-- #endif -->
<view class="header-item flex flex-between">
<text class="iconfont icon" @click="$navigateBack()">&#xe771;</text>
<view class="tabs">
<view class="tab" :class="{'active': current === i}" v-for="(item, i) in tabs" :key="i" @click="tabsChange(i)">
<text class="name">{{item.name}}<text v-if="item.total">({{item.total}})</text></text>
<text class="xian"></text>
</view>
</view>
<text class="iconfont icon" @click="showDrawer">&#xe61a;</text>
</view>
</view>
<swiper :current="current" @change="swiperChange" :style="{height: (scrollHeight-45-statusBarHeight)+'px'}">
<swiper-item style="height: 100%;" v-for="(tab, index) in tabs" :key="index">
<you-scroll @onPullDown="onPullDown" @onLoadMore="loadMore">
<view class="scroll">
<view class="flex flex-center flex-column work" v-if="!checked">
<image src="https://hejiume-public.oss-cn-chengdu.aliyuncs.com/app/work.png" mode="" class="img"></image>
<text class="color-b9 font28">休息中开启工作后可接单</text>
<button type="primary" class="btn" @click="switchChange(null)">开始工作</button>
</view>
<view class="grid" v-else>
<view class="grid-item" v-for="(item, i) in tab.list" :key="i" @click="goDetail(item)">
<view class="title">
<text class="color-b6 font32">{{item.createTime}}</text>
<text class="color-purple font34">¥{{item.deliveryPlatformMoney}}</text>
</view>
<text class="line">{{item.goodsName}}</text>
<view class="cell">
<text class="font30 line">
<text class="color-purple iconfont font24 icon">&#xe630;</text>
<text class="color-purple" v-if="item.orderType === 2">精品商品请自身供货</text>
<text class="color-b9" v-else>{{item.storeAddressDetails}}{{item.storeAddressSupplement}}</text>
</text>
</view>
<view class="cell">
<text class="font30 blod line">
<text class="color-yellow iconfont font24 icon">&#xe630;</text>
<text>{{item.userFullName}}</text>
</text>
<text class="line font30 blod">{{item.userAddressDetails}}{{item.userAddressSupplement}}</text>
</view>
<view class="flex flex-center" style="margin-top: 20rpx;">
<button type="primary" size="mini" class="bg-base" v-if="item.deliveryPlatformStatus === 1 || item.deliveryPlatformStatus === 2"
@tap.stop="confirmOrder(item)">确认接单</button>
<button type="primary" size="mini" class="bg-base" v-if="item.deliveryPlatformStatus === 3"
@tap.stop="confirmPickup(item.id)">确认取货</button>
<button type="primary" size="mini" class="bg-base" v-if="item.deliveryPlatformStatus === 4"
@tap.stop="showPopup(item.id)">确认送达</button>
<!-- <button type="primary" size="mini" class="bg-base" v-if="item.deliveryPlatformStatus !== 5 && item.deliveryPlatformStatus !== 1"
@tap.stop="openModal(item)">取消配送</button> -->
</view>
</view>
<uni-load-more :status="tab.loading"></uni-load-more>
</view>
</view>
</you-scroll>
</swiper-item>
</swiper>
<!-- 左侧菜单 -->
<uni-drawer ref="drawer" mode="left">
<scroll-view scroll-y class="drawer" :style="{height: scrollHeight+'px'}">
<view class="top">
<view class="flex flex-between" @tap="jumpTo('/pages/setting/personal')">
<view><image :src="userData.headPortrait" mode="" class="avatar"></image></view>
<view class="flex flex-column flex-grow">
<text class="font30 line">{{userData.nickname}}</text>
</view>
<text class="iconfont">&#xe770;</text>
</view>
<view class="flex flex-between today font28">
<text>配送员钱包</text>
<text>¥{{balance||0}}</text>
</view>
</view>
<view class="flex flex-between status">
<text class="color-b3 font28">{{checked?'工作中':'休息中'}}</text>
<switch :checked="checked" @change="switchChange" style="transform: scale(0.8);"/>
</view>
<view class="addr" v-if="userData.showAddress">
<image :src="staticUrl+'user/addr.png'" mode="" class="icon"></image>
<text class="color-b6 font28">{{userData.showAddress}}</text>
</view>
<view class="list">
<view class="list-item" @tap="jumpTo('/pages/user/wallet/index?type=2')">
<text class="iconfont icon">&#xe61c;</text>
<text class="name">我的钱包</text>
</view>
<view class="list-item" @tap="jumpTo('deposit?title='+depositTitle)">
<text class="iconfont icon">&#xe719;</text>
<text class="name">{{depositTitle}}</text>
</view>
<view class="list-item" @tap="jumpTo('orderHistory')">
<text class="iconfont icon">&#xe75f;</text>
<text class="name">历史订单</text>
</view>
<view class="list-item" @tap="jumpTo('stock')">
<text class="iconfont icon">&#xe603;</text>
<text class="name">库存管理</text>
</view>
<view class="list-item" @tap="jumpTo('/pages/setting/personal')">
<text class="iconfont icon">&#xe60e;</text>
<text class="name">个人信息</text>
</view>
<view class="list-item" @tap="jumpTo('/pages/notice/index')">
<text class="iconfont icon">&#xe68a;</text>
<text class="name">系统通知</text>
</view>
</view>
</scroll-view>
</uni-drawer>
<!-- 确认送达 -->
<uni-popup ref="popup" type="bottom">
<view class="popup">
<text class="title">确认送达</text>
<view class="form">
<text>确认码</text>
<input type="number" :maxlength="6" v-model="deliveryPlatformServiceCode" placeholder="请输入" class="flex-wrap color-b6 flex-1" style="margin-left: 20rpx;">
</view>
<view class="flex flex-align-center flex-space-around">
<button type="default" class="btn" @click="closePopup">取消</button>
<button type="primary" class="btn bg-base" @click="onConfirm">确认</button>
</view>
</view>
</uni-popup>
<!-- 取消配送弹框 -->
<uni-popup ref="canCelPopup" type="dialog">
<uni-popup-dialog
mode="input"
title="取消配送"
placeholder="取消配送原因"
@confirm="cancelOrder"></uni-popup-dialog>
</uni-popup>
<!-- 弹框 -->
<modal v-if="showModal">
<image :src="advertData.ossUrl" mode="widthFix" @click="imgJump"></image>
<text class="iconfont color-w font60" style="margin-top: 20rpx;" @click="showModal = false">&#xe64a;</text>
</modal>
</view>
</template>
<script>
import url from "@/common/http/url.js"
import publics from "@/common/utils/public.js"
import imMix from "../order/imMix.js"
import modal from "@/components/modal.vue"
import vTabs from "@/components/v-tabs/v-tabs.vue"
import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import uniPopup from "@/components/uni-popup/uni-popup.vue"
import uniPopupDialog from "@/components/uni-popup/uni-popup-dialog.vue"
import youScroll from '@/components/you-scroll'
export default{
components: { vTabs, uniDrawer, uniLoadMore, uniPopup, uniPopupDialog, youScroll, modal },
mixins: [imMix],
data(){
return {
staticUrl: this.$staticUrl,
// tabs: ["待接单", "已接单", "普通订单大厅"],
tabs: [
{ name: "待接单", status: 1, total: 0, loading: "loading", list: [], pageSize: 1 },
{ name: "接单中", status: 2, total: 0, loading: "loading", list: [], pageSize: 1 },
{ name: "普通订单大厅", loading: "loading", list: []}
],
current: 0,
statusBarHeight: getApp().statusBarHeight,
scrollHeight: 0,
checked: false,
userData: {},
pageSize: 1,
list: [],
loading: "loading",
generalList: [],
advertData: {},
showModal: false,
balance: 0,
orderInfo: {},
depositTitle: "配送定金",
orderId: null,
deliveryPlatformServiceCode: "",
// #ifdef MP-WEIXIN
wxBtnHeight: 0,
// #endif
}
},
onShow() {
this.scrollHeight = uni.getSystemInfoSync().windowHeight
},
onLoad() {
// #ifdef MP-WEIXIN
this.wxBtnHeight = wx.getMenuButtonBoundingClientRect().height
// #endif
this.getUserInfo()
this.getWalletInfo()
this.getDepositTitle()
// 广告弹框
this.$http("GET", url.cms.advertisingMap, {position: 9}).then(res =>{
if (res.data && res.data.length > 0) {
this.advertData = res.data[0]
if (this.advertData.popupMode === 2) {
if (!publics.advertShowToStorage(this.advertData.id)) {
this.showModal = true
}
} else {
this.showModal = true
}
}
})
},
methods:{
// 获取配送押金标题
getDepositTitle(){
this.$http("GET", url.common.distributorDepositConfig).then(res => {
this.depositTitle = res.data.keyValue
})
},
getWalletInfo(){
this.$http('GET', url.user.getWalletInfo).then(res =>{
this.balance = res.data.distributorBalance
})
},
getUserInfo(type){
this.$http("GET", url.user.getUserInfoBasic).then(res =>{
this.userData = res.data
if (res.data.distributorWorkStatus !== 1) {
this.checked = true
}
this.getList('add', 1)
this.getList('add', 2)
})
},
getList(type, status, done){
if (!this.checked) return
let obj = status ? this.tabs[status - 1] : this.tabs[this.current]
if (type === 'add') {
if (obj.loading === 'nomore') {
return;
}
obj.loading = 'loading';
} else {
obj.pageSize = 1
obj.list = []
obj.loading = 'more';
}
let params = {
orderStatus: status || obj.status,
pageSize: obj.pageSize
}
this.$http("GET", url.distributor.distributorWorkOrder, params).then(res =>{
obj.list = obj.list.concat(res.data.records)
obj.total = res.data.total
if (obj.list.length < res.data.total) {
obj.loading = "more"
obj.pageSize++
} else {
obj.loading = "nomore"
}
this.$nextTick(function(){
this.tabs[params.orderStatus - 1] = obj
})
uni.stopPullDownRefresh()
if (typeof done === "function") done()
})
},
getGeneralList(done){
this.tabs[this.current].loading = "loading"
this.$http("GET", url.distributor.generalOrderList, {pageNum: this.tabs[this.current].list.length}).then(res =>{
this.tabs[this.current].list = this.tabs[this.current].list.concat(res.data)
if (this.tabs[this.current].list.length < 12) {
this.tabs[this.current].loading = "nomore"
} else {
this.tabs[this.current].loading = "more"
}
uni.stopPullDownRefresh()
if (typeof done === "function") done()
})
},
onPullDown(done){
if (this.current === 2) {
this.tabs[this.current].list = []
this.getGeneralList(done)
} else {
this.getList('refresh', null, done)
}
},
loadMore(){
if (this.current === 2) {
this.getGeneralList()
} else {
this.getList('add', null)
}
},
//获取订单中的用户会话信息
getOrderUserConversationInfo(orderInfo, callBack){
let params = {
orderId: orderInfo.id,
orderUserId: orderInfo.userId
}
this.$http("GET", url.distributor.getOrderDetailsById, params).then(res =>{
if (res.data.toUserConversation) {
callBack(res.data.toUserConversation)
}else{
callBack(null)
}
}).catch(()=>{
callBack(null)
})
},
// 确认接单, 普通订单接单时暂不发送消息给对方
confirmOrder(row){
//获取订单中的用户会话信息
this.getOrderUserConversationInfo(row,(userConversation)=>{
//设置会话,加判断是防止自己给自己发信息,是不允许的
if(userConversation){
this.setSessionOperation(userConversation)
}
this.$http("POST", url.distributor.confirmReceiptOrder, {orderId: row.id}).then((res)=>{
this.$msg(res.data)
// #ifdef APP-PLUS
if (userConversation){//(this.current !== 2),加判断是防止自己给自己发信息,是不允许的
// 发送一条消息,判断对方是否在线
this.isOtherOnline(row.userOrderImAccount, "agentConfirm")
// 发送消息给对方,邀请对方接单
let goodsInfo = {
orderId: row.id,
goodsId: row.goodsId,
goodsImage: row.skuImage || row.goodsImage,
goodsName: row.goodsName,
skuName: row.skuName,
price: row.totalPrice,
number: row.number,
status: 4 ,// 1-邀请对方接单,用户和配送员都可操作取消 2-用户取消配送 3-配送员取消接单 4-配送员接单
identity: this.userData.imAccount, // 配送配送员的imAccount
}
this.sendMsgToOther(row.userOrderImAccount, goodsInfo, 6, 2, ()=>{
this.editDBData(goodsInfo.orderId, goodsInfo.status)
})
}
// #endif
this.onPullDown(false)
})
})
},
// 显示取消配送弹框
openModal(row){
this.orderInfo = row
this.$refs.canCelPopup.open()
},
// 取消配送
cancelOrder(done, value){
if (!value) return this.$msg("请输入取消配送理由")
let row = this.orderInfo
let toImAccount = row.userOrderImAccount
//获取订单中的用户会话信息
this.getOrderUserConversationInfo(row,(userConversation)=>{
//设置会话,加判断是防止自己给自己发信息,是不允许的
if(userConversation){
this.setSessionOperation(userConversation)
}
this.$http("POST", url.distributor.cancelReceiptOrder, {orderId: row.id}).then((res)=>{
done()
this.$msg(res.data)
// #ifdef APP-PLUS
//加判断是防止自己给自己发信息,是不允许的
if(userConversation){
// 发送一条消息,判断对方是否在线
this.isOtherOnline(toImAccount, "agentCancel")
// 发送消息给对方
let goodsInfo = {
orderId: row.id,
goodsId: row.goodsId,
goodsImage: row.skuImage || row.goodsImage,
goodsName: row.goodsName,
skuName: row.skuName,
price: row.totalPrice,
number: row.number,
status: 3, // 1-邀请对方接单,用户和配送员都可操作取消 2-用户取消配送 3-配送员取消接单 4-配送员接单
identity: this.userData.imAccount, // 配送配送员的imAccount
reason: value
}
this.sendMsgToOther(toImAccount, goodsInfo, 6, 2, ()=>{
this.editDBData(goodsInfo.orderId, goodsInfo.status)
})
}
// #endif
this.getList('refresh', null)
})
})
},
// 确认取货
confirmPickup(id){
let _this = this
this.$showModal("是否确认当前商品已取得", "提示", res=>{
if (res.confirm) {
_this.$http("POST", url.distributor.confirmPickUp, {orderId: id}).then(()=>{
_this.onPullDown(false)
})
}
})
},
// 确认送达
onConfirm(){
let _this = this
this.closePopup()
uni.showLoading({
mask:true
})
let params = {
orderId: this.orderId,
deliveryPlatformServiceCode: this.deliveryPlatformServiceCode
}
this.$http("POST", url.distributor.confirmService, params).then(res =>{
uni.hideLoading()
_this.deliveryPlatformServiceCode = ''
_this.getList('refresh', null)
}).catch(()=>{
uni.hideLoading()
})
},
showPopup(orderId){
this.orderId = orderId
this.$refs.popup.open()
},
closePopup(){
this.$refs.popup.close()
},
goDetail(row){
this.$navigateTo('detail?id='+row.id+'&orderUserId='+row.userId)
},
jumpTo(path){
this.$navigateTo(path)
},
showDrawer(){
this.$refs.drawer.open()
this.getWalletInfo()
},
switchChange(e){
if (e) {
this.checked = e.detail.value
} else {
this.checked = true
}
this.$http("POST", url.distributor.updateWorkStatus).then(res=>{
this.onPullDown(false)
}).catch(()=>{
this.checked = !this.checked
})
},
tabsChange(i){
this.current = i
},
swiperChange(e){
this.current = e.detail.current
if (this.current === 2) {
this.tabs[this.current].list = []
this.getGeneralList(false)
} else {
this.getList('add', null, false)
}
},
imgJump(){
this.showModal = false
this.$http("POST", url.cms.clickAdvertisingMap, {id: this.advertData.id})
publics.advertOption(this.advertData.operationCode, this.advertData.operationValue)
},
}
}
</script>
<style scoped lang="scss">
.header{
background-color: #FFFFFF;
padding: 0 20rpx;
padding-top: var(--status-bar-height);
&-item{
height: 90rpx;
}
.icon{
font-size: 56rpx;
}
.tabs{
display: flex;
align-items: center;
.tab{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 20rpx;
.name{
font-size: 30rpx;
color: #666666;
margin-bottom: 10rpx;
}
.xian{
height: 6rpx;
width: 40rpx;
}
}
.active .name{
font-size: 36rpx;
color: #000000;
}
.active .xian{
background-color: #F8D247;
}
}
}
.scroll{
height: 100%;
.work{
margin-top: 50rpx;
.img{
width: 500rpx;
height: 300rpx;
margin-bottom: 10rpx;
}
.btn{
border-radius: 50rpx;
width: 300rpx;
margin-top: 20rpx;
}
}
.grid{
margin: 20rpx;
&-item{
background-color: white;
padding: 20rpx;
border-radius: 20rpx;
margin-bottom: 20rpx;
.title{
border-bottom: 2rpx solid #EEEEEE;
padding-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
}
.cell{
display: flex;
flex-direction: column;
margin-top: 16rpx;
.icon{
margin-right: 10rpx;
transform: scale(0.6);
}
}
}
}
}
.drawer{
.top{
color: #FFFFFF;
background-color: #41414F;
padding: 20rpx;
padding-top: var(--status-bar-height);
.avatar{
width: 100rpx;
height: 100rpx;
margin-right: 20rpx;
border-radius: 50%;
}
.today{
padding: 20rpx 0;
margin-top: 20rpx;
border-top: 2rpx solid #4e4d4e;
}
}
.status{
padding: 20rpx;
}
.addr{
margin: 0 20rpx;
.icon{
width: 40rpx;
height: 40rpx;
margin-bottom: -8rpx;
}
}
.list{
&-item{
display: flex;
align-items: center;
padding: 30rpx;
border-bottom: 2rpx solid #EEEEEE;
.icon{
margin-right: 20rpx;
font-size: 44rpx;
color: #222;
}
.name{
font-size: 28rpx;
color: #333333;
}
}
}
}
.popup{
background-color: white;
border-radius: 20rpx 20rpx 0 0;
padding: 20rpx;
.title{
display: block;
width: 100%;
text-align: center;
font-size: 32rpx;
padding-bottom: 20rpx;
margin-bottom: 20rpx;
}
.form{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40rpx;
border-bottom: 2rpx solid #EEEEEE;
padding-bottom: 20rpx;
color: #333333;
}
.btn{
width: 40%;
}
}
</style>