mall_client/zyhs3_uniapp/pages/order/details.vue

886 lines
32 KiB
Vue
Raw Normal View History

2026-03-13 07:50:35 +00:00
<template>
<view>
<!-- 状态 -->
<view class="bg-base flex flex-center flex-column header">
<block v-if="orderInfo.status === 1">
<text class="font30">待付款</text>
<text class="font24">{{payExpireTime}}将自动关闭</text>
</block>
<block v-if="orderInfo.status === 10">
<text class="font30">已退款</text>
<text class="font24">{{refundObj.identityType === 1 ? '您' : '商家'}}已操作退款</text>
</block>
<text v-if="orderInfo.status === 2">未支付完成</text>
<text v-if="orderInfo.status === 3">{{deliveryStatus(orderInfo)}}</text>
<text v-if="orderInfo.status === 4">待评价</text>
<text v-if="orderInfo.status === 5">已完成</text>
<text v-if="orderInfo.status === 11">已关闭</text>
</view>
<!-- 用户的收货地址用户自提时不显示 -->
<view class="address-section" v-if="orderInfo.deliveryMethod !== 3">
<view class="order-content">
<image :src="staticUrl + 'user/addr.png'" mode="" class="img"></image>
<view class="cen">
<view class="flex flex-between">
<view class="top">
<text class="name">{{ orderInfo.userFullName }}</text>
<text class="mobile">{{ orderInfo.userMobile }}</text>
</view>
<text class="color-purple font28" v-if="isCanEditAddr(orderInfo)" @click="editAddress">修改</text>
</view>
<text class="address">{{ orderInfo.userThreeAdcode | filterAddr}}{{ orderInfo.userAddressDetails }}{{ orderInfo.userAddressSupplement }}</text>
</view>
</view>
<image class="a-bg" :src="staticUrl + 'user/addr_bg.png'"></image>
</view>
<!-- 配送信息 -->
<view class="distribution" v-if="(orderInfo.status === 3 || orderInfo.status === 4 || orderInfo.status === 5) && orderInfo.combOrderType !== 2">
<block v-if="orderInfo.deliveryMethod === 1">
<text class="title">物流配送</text>
<view class="flex flex-between font30" style="margin-bottom: 10rpx;" v-if="orderInfo.deliveryLogisticsCompanyName">
<text class="color-b3" style="margin-right: 10rpx;">物流公司</text>
<text class="color-b6 flex-grow">{{orderInfo.deliveryLogisticsCompanyName}}</text>
</view>
<view class="flex flex-between font30" style="margin-bottom: 20rpx;" v-if="orderInfo.deliveryLogisticsOrderNumber">
<text class="color-b3" style="margin-right: 10rpx;">物流单号</text>
<text class="color-b6 flex-grow">{{orderInfo.deliveryLogisticsOrderNumber}}</text>
<text class="color-purple" @click="$onCopy(orderInfo.deliveryLogisticsOrderNumber)">复制</text>
</view>
<uni-steps :options="logisticsOption" active-color="#F8D247" :active="logisticsActive"></uni-steps>
</block>
<block v-if="orderInfo.deliveryMethod === 2">
<view class="flex flex-between">
<text class="title">商家配送</text>
<!-- 配送中显示送达码 -->
<text class="code" v-if="orderInfo.deliveryBusinessStatus === 2" @click="$onCopy(orderInfo.deliveryBusinessCode)">送达码: {{orderInfo.deliveryBusinessCode}}</text>
</view>
<view class="flex flex-between" style="margin-bottom: 20rpx;">
<view class="flex flex-column flex-grow">
<text class="font30">发货人{{orderInfo.storeFullName || storeInfo.name}}</text>
<text class="font28 color-b6">联系电话{{orderInfo.storeMobile || storeInfo.mobile}}</text>
</view>
</view>
<uni-steps :options="businessOption" active-color="#F8D247" :active="businessActive"></uni-steps>
<map class="map" :latitude="storeInfo.lat" :longitude="storeInfo.lng" @markertap="toMap" :markers="[{
latitude: storeInfo.lat,
longitude: storeInfo.lng,
id: 2,
iconPath: staticUrl + 'icon_position.png'
}]"></map>
</block>
<block v-if="orderInfo.deliveryMethod === 3">
<view class="flex flex-between">
<text class="title">用户自提</text>
<text class="code" @click="$onCopy(orderInfo.deliveredRaisingCode)">取货码: {{orderInfo.deliveredRaisingCode}}</text>
</view>
<view class="flex flex-between">
<view class="flex flex-column flex-grow">
<text class="font30">发货人{{orderInfo.storeFullName || storeInfo.name}}</text>
<text class="font28 color-b6">联系电话{{orderInfo.storeMobile || storeInfo.mobile}}</text>
</view>
<!-- <view>
<text class="btn" @click="toChat(storeInfo.imAccount, 1)">消息</text>
<text class="btn" @click="callPhone(orderInfo.storeMobile||storeInfo.mobile)">拨打</text>
</view> -->
</view>
<map class="map" :latitude="storeInfo.lat" :longitude="storeInfo.lng" @markertap="toMap" :markers="[{
latitude: storeInfo.lat,
longitude: storeInfo.lng,
id: 2,
iconPath: staticUrl + 'icon_position.png'
}]"></map>
</block>
<block v-if="orderInfo.deliveryMethod === 4">
<view class="flex flex-between">
<text class="title">平台配送</text>
<text class="code" v-if="orderInfo.deliveryPlatformStatus === 4" @click="$onCopy(orderInfo.deliveryPlatformServiceCode)">确认码: {{orderInfo.deliveryPlatformServiceCode}}</text>
</view>
<view class="flex flex-between" style="margin-bottom: 20rpx;" v-if="orderInfo.deliveryPlatformStatus !== 1">
<image :src="deliveryUserInfo.headPortrait" mode="" class="img" @click="jumpToUser"></image>
<view class="flex flex-column flex-grow">
<text class="font30">{{deliveryUserInfo.nickname}}</text>
<text class="font28 color-b6" v-if="isDeliveryPhone(orderInfo)">{{deliveryUserInfo.mobile}}</text>
</view>
<view>
<text class="btn" @click="toChat(deliveryUserInfo.imAccount, 2)">消息</text>
<text class="btn" v-if="isDeliveryPhone(orderInfo)" @click="callPhone(deliveryUserInfo.mobile)">拨打</text>
</view>
</view>
<uni-steps :options="agentOption" active-color="#F8D247" :active="agentActive"></uni-steps>
<view class="flex flex-center" style="margin: 20rpx 0;" v-if="distance">
<text class="font28 color-purple">距离我{{distance}}</text>
</view>
<map class="map"
:latitude="deliveryUserInfo.showLat" :longitude="deliveryUserInfo.showLng" v-if="orderInfo.deliveryPlatformStatus === 3 || orderInfo.deliveryPlatformStatus === 4"
@markertap="toMap" :markers="[{
latitude: deliveryUserInfo.showLat,
longitude: deliveryUserInfo.showLng,
id: 2,
iconPath: staticUrl + 'icon_position.png'
}]"></map>
<view class="flex flex-center" style="margin-top: 20rpx;" v-if="orderInfo.orderType === 2">
<button type="primary" size="mini" class="bg-base" v-if="orderInfo.deliveryPlatformStatus === 1" @click="selectAgent()">选择配送员</button>
<button type="primary" size="mini" class="bg-base" :disabled="btnLoading" :loading="btnLoading" v-if="orderInfo.deliveryPlatformStatus === 2" @click="cancelDelivery()">取消配送</button>
</view>
</block>
</view>
<!-- 商品信息 -->
<view class="goods bg-w">
<view class="flex flex-between store" @tap="jumpTo('store', storeInfo.id)">
<image :src="filterImg(storeInfo.logoImage)" mode="" class="img"></image>
<view class="flex-grow">
<text class="font32 color-b3">{{storeInfo.name}}</text>
<text class="iconfont color-b9 font38">&#xe770;</text>
</view>
<view>
<!-- <text class="btn" @tap.stop="toChat(storeInfo.imAccount, 3)">客服</text> -->
<text class="btn" @tap.stop="callPhone(orderInfo.storeMobile || storeInfo.mobile)">拨打</text>
</view>
</view>
<view class="goods-item">
<view class="flex cen" @click="jumpTo('details', orderInfo.goodsId)">
<view><image :src="filterImg(orderInfo.skuImage || orderInfo.goodsImage)" mode="" class="pic"></image></view>
<block v-if="orderInfo.combOrderType === 1">
<view class="flex flex-column flex-grow">
<text class="color-b3 line line-2 font32">{{orderInfo.goodsName + ' - ' + orderInfo.periodNo + '期'}}</text>
<text class="spec">{{orderInfo.skuName}}</text>
</view>
<view class="flex flex-column flex-align-end" style="margin-left: 10rpx;">
<text class="color-b3 font32">¥0</text>
<!-- <text class="color-b9 font26">x{{orderInfo.number}}</text> -->
</view>
</block>
<block v-else>
<view class="flex flex-column flex-grow">
<text class="color-b3 line line-2 font32">{{orderInfo.goodsName}}</text>
<text class="spec">{{orderInfo.skuName}}</text>
</view>
<view class="flex flex-column flex-align-end" style="margin-left: 10rpx;">
<text class="color-b3 font32">¥{{orderInfo.unitPrice}}</text>
<text class="color-b9 font26">x{{orderInfo.number}}</text>
</view>
</block>
</view>
<view class="grid" v-if="orderInfo.paymentCombination === 2">
<text class="label">组合支付</text>
<text class="color-b9">人民币{{orderInfo.paymentRmb}}%积分{{orderInfo.paymentIntegral}}</text>
</view>
<view class="grid">
<text class="label">配送方式</text>
<text class="color-b9">{{orderInfo.deliveryMethod | filterDelivery}}</text>
<text class="color-b9" v-if="orderInfo.deliveryMethod === 1 && orderInfo.combOrderType === 2"> - 分期子订单</text>
</view>
</view>
<block v-if="orderInfo.combOrderType !== 1">
<view class="flex flex-between cell font26 color-b9">
<text>商品总价</text>
<text>¥{{orderInfo.totalPrice}}</text>
</view>
<view class="flex flex-between cell font26 color-b9" v-if="orderInfo.orderType === 3">
<text>进价百分比</text>
<text>{{orderInfo.boutiqueBuying}}%</text>
</view>
<view class="flex flex-between cell font26 color-b9" v-if="orderInfo.payIntegralAmount">
<text>积分</text>
<text>{{orderInfo.payIntegralAmount}}</text>
</view>
<view class="flex flex-between cell font26 color-b9" v-if="orderInfo.couponStatus === 2">
<text>优惠券</text>
<text>¥{{orderInfo.couponAmount}}</text>
</view>
<view class="flex flex-between cell font32">
<text>实付款</text>
<text class="color-purple">¥{{orderInfo.payRmbAmount}}</text>
</view>
</block>
</view>
<!-- 订单信息 -->
<view class="goods bg-w">
<text class="font34">订单信息</text>
<!-- <view class="flex flex-align-center li">
<text class="label">订单备注</text>
<text class="note">发啦卡减肥啦卡发觉啦放假啦肥路上的</text>
</view> -->
<view class="flex flex-align-center li">
<text class="label">订单类型</text>
<text>{{orderInfo.orderType | filterType}}</text>
</view>
<view class="flex flex-align-center li" v-if="orderInfo.orderType === 1 && orderInfo.bonusIntegral">
<text class="label">赠送积分</text>
<text>{{orderInfo.bonusIntegral}}%-{{((orderInfo.bonusIntegral/100)*orderInfo.totalPrice).toFixed(2)}}积分</text>
</view>
<view class="flex flex-between li">
<text class="label">订单编号</text>
<text class="flex-grow">{{orderInfo.orderNumber}}</text>
<text class="color-purple" @click="$onCopy(orderInfo.orderNumber)">复制</text>
</view>
<view class="flex flex-align-center li" v-if="orderInfo.rmbPayOrderNumber">
<text class="label">商户单号</text>
<text class="flex-grow">{{orderInfo.rmbPayOrderNumber}}</text>
<text class="color-purple" @click="$onCopy(orderInfo.rmbPayOrderNumber)">复制</text>
</view>
<view class="flex flex-align-center li">
<text class="label">支付方式</text>
<text>{{orderInfo.rmbPayType | filterPayType}}</text>
</view>
<view class="flex flex-align-center li">
<text class="label">创建时间</text>
<text>{{orderInfo.createTime}}</text>
</view>
<view class="flex flex-align-center li" v-if="orderInfo.rmbPayTime">
<text class="label">付款时间</text>
<text>{{orderInfo.rmbPayTime}}</text>
</view>
<view class="flex flex-align-center li" v-if="refundObj.reasonContent">
<text class="label">退款原因</text>
<text>{{refundObj.reasonContent}}</text>
</view>
<view class="flex flex-align-center li" v-if="refundObj.createTime">
<text class="label">退款时间</text>
<text>{{refundObj.createTime}}</text>
</view>
</view>
<!-- 评价信息 -->
<view class="evaluate flex flex-column" v-if="orderInfo.status === 5">
<view class="flex flex-between" style="margin-bottom: 20rpx;">
<text class="font34">评价信息</text>
<text class="font30 color-b6" v-if="goodsEvaluate.status === 1">审核中</text>
<text class="font30 color-b6" v-if="goodsEvaluate.status === 2">评价成功</text>
<text class="font30 color-b6" v-if="goodsEvaluate.status === 3">评价违规</text>
</view>
<block v-if="goodsEvaluate.evaluateDistributionScore">
<view class="flex">
<image :src="orderInfo.deliveryUserInfo.headPortrait" mode="" class="avatar" @click="jumpToUser()"></image>
<view class="flex flex-column">
<text>{{orderInfo.deliveryUserInfo.nickname}}</text>
<uni-rate :size="15" :margin="4" :value="goodsEvaluate.evaluateDistributionScore" readonly></uni-rate>
</view>
</view>
<text class="font28 color-b9">评价配送员<text class="color-b3">{{goodsEvaluate.evaluateDistributionComment || "用户未评论配送员"}}</text></text>
<view class="imgs" v-if="goodsEvaluate.evaluateDistributionImages">
<image :src="item" mode="" class="pic" v-for="(item, index) in goodsEvaluate.evaluateDistributionImages" :key="index" @click="viewImg(goodsEvaluate.evaluateDistributionImages, item)"></image>
</view>
</block>
<text class="font28 color-b9">评价商品<text class="color-b3">{{goodsEvaluate.evaluateGoodsComment || "用户未评论商品"}}</text></text>
<view class="flex flex-align-center">
<text class="font28 color-b9">评分</text>
<uni-rate :size="15" :margin="4" :value="goodsEvaluate.evaluateGoodsScore" readonly></uni-rate>
</view>
<view class="imgs" v-if="goodsEvaluate.evaluateGoodsImages">
<image :src="item" mode="" class="pic" v-for="(item, index) in goodsEvaluate.evaluateGoodsImages" :key="index" @click="viewImg(goodsEvaluate.evaluateGoodsImages, item)"></image>
</view>
<text class="font28 color-b9">评价时间<text class="color-b3">{{goodsEvaluate.createTime}}</text></text>
</view>
<!-- 占位 -->
<view style="height: 120rpx;"></view>
<!-- 操作按钮 -->
<view class="fixed flex flex-space-end">
<!-- orderInfo.deliveryLogisticsCompanyName -->
<text class="button base" @click="handlerExpress(orderInfo)" v-if="orderInfo.deliveryLogisticsCompanyName">查看物流</text>
<text class="button base" @click="payOrder(orderInfo)" v-if="orderInfo.status === 1 || orderInfo.status === 2">立即支付</text>
<text class="button base" v-if="orderInfo.status === 4 && orderInfo.combOrderType !== 1" @tap.stop="toEvaluate(orderInfo.id)">立即评价</text>
<text class="button base" @click="confimDelivery(id, 'getOrderInfo')" v-if="orderInfo.status === 3 && judgeReceiv(orderInfo)">确认收货</text>
<text class="button base" @click="confimUse(id, 'getOrderInfo')" v-if="orderInfo.status === 12 && judgeReceiv(orderInfo)">确认使用</text>
<!-- <block v-if="orderInfo.status === 3 && judgeRefund(orderInfo)">
<block v-if="orderInfo.status === 3 && judgeRefund(orderInfo)">
<text class="button base" @click="onRefund(orderInfo)">申请退款</text>
</block> -->
<text class="button base" v-if="orderInfo.status === 1 || orderInfo.status === 11" @click="delOrder(id, true)">删除订单</text>
<text class="button base" v-if="orderInfo.qvyu == 5 && orderInfo.status != 11" @click="handlerSign">签署合同</text>
</view>
<!-- 取货码/确认码 -->
<uni-popup ref="popup">
<view class="popup">
<text class="color-purple font48" v-if="orderInfo.deliveryMethod === 3">{{orderInfo.deliveredRaisingCode}}</text>
<text class="color-purple font48" v-if="orderInfo.deliveryMethod === 4">{{orderInfo.deliveryPlatformServiceCode}}</text>
</view>
</uni-popup>
</view>
</template>
<script>
import url from "@/common/http/url.js"
import publics from "@/common/utils/public.js"
import selectOptions from "@/common/utils/selectOptions.js"
import { computeLngLatDistance } from "@/common/utils/index.js"
import mix from "./mix.js"
import imMix from "./imMix.js"
import uniSteps from './components/uni-steps/uni-steps.vue'
import uniPopup from "@/components/uni-popup/uni-popup.vue"
import uniRate from "@/components/uni-rate/uni-rate.vue"
import { handlerSign } from '@/utils/common.js'
let timer = null
export default{
components: {uniSteps, uniPopup, uniRate},
mixins: [mix, imMix],
data(){
return {
staticUrl: this.$staticUrl,
btnLoading: false,
id: "",
orderInfo: {},
storeInfo: {},
payExpireTime: "",
refundObj: {},
// 物流配送
logisticsOption: [
{title: "待发货"},
{title: "已发货"},
{title: "已收货"}
],
logisticsActive: 0,
// 商家配送
businessOption: [
{title: "待送货"},
{title: "配送中"},
{title: "已送达"}
],
businessActive: 0,
// 平台配送
agentOption: [
{title: "已接单"},
{title: "配送中"},
{title: "已送达"}
],
agentActive: 0,
goodsEvaluate: {},
// 配送员信息
deliveryUserInfo: {},
distance: ""
}
},
filters: {
filterType(val){
let value = "其他"
selectOptions.goodsTypeList.forEach(v => {
if (v.value === val) {
value = v.name
return
}
})
return value
}
},
onLoad(opt) {
this.id = opt.id
},
onShow() {
this.init()
},
onPullDownRefresh() {
this.init()
},
onHide() {
this.clearCountDown()
},
onUnload() {
this.clearCountDown()
},
methods:{
startPayCountdown(ts){
this.clearCountDown()
timer = setInterval(()=>{
let left = ts - new Date().getTime()
if (left >= 0) {
let h = Math.floor(left / 1000 / 60 / 60)
let m = Math.floor(left / 1000 / 60 % 60)
let s = Math.floor(left / 1000 % 60)
let hh = h.toString().length === 1 ? ("0" + h) : h
let mm = m.toString().length === 1 ? ("0" + m) : m
let ss = s.toString().length === 1 ? ("0" + s) : s
this.payExpireTime = hh + "时" + mm + "分" + ss + "秒"
} else {
this.clearCountDown()
}
}, 1000)
},
handlerSign () {
handlerSign(this.orderInfo.id);
return
this.$http("GET", url.order.signContract, { orderId: this.orderInfo.id }).then((res) => {
let { code, data } = res;
if (code == 200) {
if (data.status == 1) {
this.$msg('合同已签署正在保存至手机')
setTimeout(() => {
uni.downloadFile({
url: data.url,
success: ({ tempFilePath }) => {
console.log('tempFilePath', tempFilePath)
uni.saveFile({
tempFilePath: tempFilePath,
success: ({ savedFilePath }) => {
this.$msg('成功保存到' + savedFilePath)
},
fail: () => {
this.$msg('文件保存失败')
}
})
},
fail: () => {
this.$msg('文件下载失败')
}
})
},1000)
} else {
uni.navigateTo({
url: '/pages/common/webView/webView?url=' + data.url
})
}
}
})
},
handlerExpress (orderInfo) {
this.$navigateTo(`/pages/order/express/express?com=${this.orderInfo.deliveryLogisticsCompanyCode}&num=${this.orderInfo.deliveryLogisticsOrderNumber}&name=${this.orderInfo.deliveryLogisticsCompanyName}`)
},
init(){
this.logisticsOption = [
{title: "待发货"},
{title: "已发货"},
{title: "已收货"}
]
this.businessOption = [
{title: "待送货"},
{title: "配送中"},
{title: "已送达"}
]
this.agentOption = [
{title: "已接单"},
{title: "配送中"},
{title: "已送达"}
]
this.getOrderInfo()
},
getOrderInfo(){
this.$http("GET", url.order.getOrderInfoById, {orderId: this.id}).then(res =>{
this.orderInfo = res.data
this.storeInfo = res.data.storeInfo
if (res.data.goodsEvaluate) {
this.goodsEvaluate = res.data.goodsEvaluate
this.goodsEvaluate.evaluateGoodsScore = res.data.goodsEvaluate.evaluateGoodsScore / 2
}
if (res.data.refundList && res.data.refundList.length > 0) {
this.refundObj = res.data.refundList[0]
}
if (res.data.payExpireTime) {
let expire = res.data.payExpireTime
let ts = typeof expire === 'number' ? expire : new Date((expire || '').replace(/-/g, '/')).getTime()
if (!isNaN(ts) && (res.data.status === 1 || res.data.status === 2)) {
this.startPayCountdown(ts)
} else {
let time = String(expire).split(" ")[1] || ''
let ms = time.split(":")
if (ms.length >= 3) {
let h = parseInt(ms[0]) || 0
let m = parseInt(ms[1]) || 0
let s = parseInt(ms[2]) || 0
let hh = h.toString().length === 1 ? ("0" + h) : h
let mm = m.toString().length === 1 ? ("0" + m) : m
let ss = s.toString().length === 1 ? ("0" + s) : s
this.payExpireTime = hh + "时" + mm + "分" + ss + "秒"
} else if (ms.length >= 2) {
this.payExpireTime = ms[0]+"时"+ms[1]+"分"
}
}
}
// 物流配送
if (res.data.deliveryMethod === 1) {
this.logisticsOption[0].desc = this.splitTime(res.data.createTime)
this.logisticsOption[1].desc = this.splitTime(res.data.deliveryLogisticsDeliverTime) || ""
this.logisticsOption[2].desc = this.splitTime(res.data.confirmReceiptTime) || ""
this.logisticsActive = res.data.deliveryLogisticsStatus - 1
}
// 商家配送
if (res.data.deliveryMethod === 2) {
this.businessOption[0].desc = this.splitTime(res.data.createTime)
this.businessOption[1].desc = this.splitTime(res.data.deliveryBusinessDeliveredTime) || ""
this.businessOption[2].desc = this.splitTime(res.data.confirmReceiptTime) || ""
this.businessActive = res.data.deliveryBusinessStatus - 1
}
// 平台配送
if (res.data.deliveryMethod === 4) {
if (res.data.orderType === 1) { // 普通商品
this.agentOption.unshift({title: "等待配送员接单", desc: this.splitTime(res.data.createTime)})
if (res.data.deliveryPlatformStatus === 1) {
this.agentActive = res.data.deliveryPlatformStatus - 1
} else {
this.agentActive = res.data.deliveryPlatformStatus - 2
}
} else if (res.data.orderType === 2) {
this.agentOption.unshift({
title: "请选择配送员", desc: this.splitTime(res.data.createTime)},
{title: "已选择配送员", desc: this.splitTime(res.data.deliveryPlatformSelectTime)})
this.agentActive = res.data.deliveryPlatformStatus - 1
}
let length = this.agentOption.length
this.agentOption[length-3].desc = this.splitTime(res.data.deliveryPlatformOrderTime) || ""
this.agentOption[length-2].desc = this.splitTime(res.data.deliveryPlatformPickedTime) || ""
this.agentOption[length-1].desc = this.splitTime(res.data.confirmReceiptTime) || ""
this.deliveryUserInfo = res.data.deliveryUserInfo || {}
// 已接单或配送中时,计时器开始获取配送员经纬度,更新配送员位置,暂时注释
// if (res.data.deliveryPlatformStatus === 3 || res.data.deliveryPlatformStatus === 4) { // 已接单/配送中
// this.countDown()
// this.sessionOperation()
// } else {
// this.clearCountDown()
// }
}
this.$forceUpdate()
uni.stopPullDownRefresh()
})
},
splitTime(time){
if (!time) return ""
let split = time.split(":")
return split[0] + ":" + split[1]
},
countDown(){
let _this = this
let deliveryLat = this.deliveryUserInfo.showLat || this.orderInfo.deliveryUserInfo.showLat
let deliveryLng = this.deliveryUserInfo.showLng || this.orderInfo.deliveryUserInfo.showLng
this.distance = computeLngLatDistance(deliveryLat, deliveryLng, this.orderInfo.userLat, this.orderInfo.userLng)
this.clearCountDown()
timer = setInterval(()=>{
_this.$http("GET", url.user.getUserInfoById, {toImAccount: _this.deliveryUserInfo.imAccount}).then(res =>{
_this.deliveryUserInfo = res.data
})
}, 10000)
},
clearCountDown(){
this.distance = ""
if (timer) {
clearInterval(timer)
timer = null
}
},
// showPopup(code){
// // #ifdef H5
// this.$refs.popup.open()
// // #endif
// // #ifdef APP-PLUS
// uni.$emit('page-popup', {// 向 popup 传递消息
// code: code
// });
// const subNVue = uni.getSubNVueById('popup');// 通过 id 获取 nvue 子窗体
// subNVue.show('zoom-fade-out', 250);// 打开 nvue 子窗体
// // #endif
// },
// 判断是否可以修改地址
// 1、未付款
// 2、已付款并且是精品订单并且未有配送员接单时可修改就是平台配送状态deliveryPlatformStatus = 1的时候可以操作
// 3、已付款非精品订单未发货前可修改【暂时不支持保留位置等以后用到再说】
isCanEditAddr(item){
if (item.status === 1 || item.status === 2) {
return true
}
if (item.status === 3 && item.orderType === 2 && item.deliveryPlatformStatus === 1) {
return true
}
// if (item.status === 3 && item.orderType !== 2 && (
// (item.deliveryMethod === 1 && item.deliveryLogisticsStatus === 1) || // 物流未发货
// (item.deliveryMethod === 2 && item.deliveryBusinessStatus === 1) || // 商家未发货
// (item.deliveryMethod === 4 && item.deliveryPlatformStatus === 1))){ // 平台未接单
// return true
// }
},
// 是否隐藏配送元手机号码和点击拨号
// 如果是精品订单,平台配送,已选择配送员则隐藏订单中的配送员手机号,和拨号按钮
isDeliveryPhone(row){
if (row.orderType === 2 && row.deliveryMethod === 4 && row.deliveryPlatformStatus === 2) {
return false
}
return true
},
// 修改收货地址
editAddress(){
this.$navigateTo(`/pages/user/address/index?orderId=${this.orderInfo.id}&&editAddr=true`)
},
toChat(imAccount, type){
this.$navigateTo(`/pages/interaction/im-chat?type=${type}&&id=${imAccount}`)
},
// 拨打电话
callPhone(phone){
uni.makePhoneCall({
phoneNumber: phone
})
},
// 查看地图
toMap(){
let _this = this
uni.openLocation({
latitude: _this.storeInfo.lat,
longitude: _this.storeInfo.lng,
address: _this.storeInfo.addressDetails + _this.storeInfo.addressSupplement
});
},
// 取消配送员为我配送
cancelDelivery(){
this.btnLoading = true
let toImAccount = this.deliveryUserInfo.imAccount
this.sessionOperation(toImAccount, 2)
this.$http("POST", url.distributor.cancelDistributor, {orderId: this.id}).then(res =>{
this.$msg(res.data)
this.init()
// #ifdef APP-PLUS
// 发送一条消息,判断对方是否在线
this.isOtherOnline(toImAccount, "userCancel")
// 发送消息给对方
let goodsInfo = {
orderId: this.id,
goodsId: this.orderInfo.goodsId, // 商品id
goodsImage: this.orderInfo.skuImage || this.orderInfo.goodsImage, // 商品图片
goodsName: this.orderInfo.goodsName,
skuName: this.orderInfo.skuName,
price: this.orderInfo.totalPrice,
status: 2 , // 1-邀请对方接单,用户和配送员都可操作取消 2-用户取消配送 3-配送员取消接单 4-配送员接单
identity: toImAccount, // 配送配送员imAccount
}
this.sendMsgToOther(toImAccount, goodsInfo, 6, 2, ()=>{
this.editDBData(goodsInfo.orderId, goodsInfo.status)
})
// #endif
this.btnLoading = false
}).catch(()=>{
this.btnLoading = false
})
},
// 选择配送员
selectAgent(){
let data = {
orderId: this.id,
goodsId: this.orderInfo.goodsId,
goodsImage: this.orderInfo.skuImage || this.orderInfo.goodsImage,
goodsName: this.orderInfo.goodsName,
skuName: this.orderInfo.skuName,
price: this.orderInfo.totalPrice
}
uni.setStorageSync("agentData", data)
this.$navigateTo('agentList')
},
viewImg(list, img){
uni.previewImage({
urls: list,
current:img
})
},
jumpTo(path, id){
this.$navigateTo(`/pages/home/${path}?id=${id}`)
},
jumpToUser(){
this.$navigateTo(`/pages/interaction/user?userId=${this.deliveryUserInfo.imAccount}`)
}
}
}
</script>
<style scoped lang="scss">
.header{
height: 100rpx;
border-radius: 0 0 30rpx 30rpx;
margin-bottom: 20rpx;
color: white;
}
.address-section {
padding: 30upx;
background: #fff;
position: relative;
.order-content {
display: flex;
align-items: center;
}
.img{
width: 60rpx;
height: 60rpx;
}
.cen {
display: flex;
flex-direction: column;
flex: 1;
font-size: 32upx;
color: #303133;
margin-left: 20rpx;
}
.name {
font-size: 34upx;
margin-right: 24upx;
}
.address {
margin-top: 10upx;
margin-right: 20upx;
color: #909399;
}
.icon-right {
font-size: 44upx;
color: #909399;
}
.a-bg {
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
height: 5upx;
}
}
.distribution{
background-color: white;
padding: 20rpx;
margin-top: 20rpx;
.title{
margin-bottom: 20rpx;
display: block;
border-left: 6rpx solid #F8D247;
padding-left: 20rpx;
}
.img{
width: 90rpx;
height: 90rpx;
border-radius: 50%;
margin-right: 10rpx;
}
.code{
border: 2rpx solid #F8D247;
border-radius: 50rpx;
padding: 6rpx 30rpx;
font-size: 24rpx;
color: #F8D247;
}
.map{
width: 100%;
height: 250rpx;
margin-top: 10rpx;
}
}
.btn{
border-radius: 8rpx;
width: 130rpx;
height: 50rpx;
text-align: center;
line-height: 50rpx;
border:2rpx solid #F8D247;
font-size: 24rpx;
color: #F8D247;
display: inline-block;
margin-left: 10rpx;
}
.goods{
margin-top: 20rpx;
padding: 20rpx;
.store{
margin-bottom: 30rpx;
.img{
width: 50rpx;
height: 50rpx;
border-radius: 4rpx;
margin-right: 10rpx;
}
}
&-item{
.cen{
margin-bottom: 20rpx;
.pic{
width: 180rpx;
height: 180rpx;
border-radius: 10rpx;
margin-right: 20rpx;
}
.spec{
background-color: #F8F8F8;
color: #bcbbbd;
font-size: 24rpx;
padding: 10rpx;
margin-top: 4rpx;
border-radius: 8rpx;
align-self: flex-start;
}
}
.grid{
margin-bottom: 20rpx;
font-size: 28rpx;
.label{
width: 180rpx;
margin-right: 20rpx;
text-align: right;
display: inline-block;
}
}
}
.cell{
margin-top: 10rpx;
}
.li{
margin-top: 20rpx;
font-size: 28rpx;
color: #666666;
.label{
width: 160rpx;
}
.note{
width: 500rpx;
}
}
}
.evaluate{
background-color: white;
padding: 20rpx;
margin-top: 20rpx;
.avatar{
width: 80rpx;
height: 80rpx;
margin-right: 20rpx;
border-radius: 10rpx;
}
.imgs{
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 10rpx;
.pic{
width: 160rpx;
height: 160rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
border-radius: 10rpx;
}
}
}
.fixed{
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
background-color: #FFFFFF;
border-top: 2rpx solid #f0f0f0;
.button{
font-size: 26rpx;
border: 2rpx solid #aeadaf;
padding: 10rpx 26rpx;
border-radius: 50rpx;
margin-right: 20rpx;
color: #666;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.base{
color: #F8D247;
border: 2rpx solid #F8D247;
}
}
.popup{
background-color: white;
width: 500rpx;
height: 200rpx;
display: flex;
border-radius: 20rpx;
align-items: center;
justify-content: center;
z-index: 9999;
}
</style>