913 lines
30 KiB
Vue
913 lines
30 KiB
Vue
|
<template>
|
|||
|
|
<view :data-theme="theme">
|
|||
|
|
<view class='order-details'>
|
|||
|
|
<!-- 给header上与data上加on为退款订单-->
|
|||
|
|
<view class='header bg-color'>
|
|||
|
|
<view class='picTxt acea-row row-middle'>
|
|||
|
|
<view class='data'>
|
|||
|
|
<view class="flex">
|
|||
|
|
<view v-if="orderInfo.refundStatus == 3" class='state fs-36'>已退款</view>
|
|||
|
|
<!-- 次卡商品部分核销 -->
|
|||
|
|
<view v-else-if="orderInfo.status == 3 && secondType == ProductTypeEnum.PunchCard &&
|
|||
|
|
punchCardOrderInfo.verifyRemainingTimes!=punchCardOrderInfo.verifyTotalTimes" class="state fs-36">
|
|||
|
|
<text>部分使用</text>
|
|||
|
|
</view>
|
|||
|
|
<view v-else class='state fs-36'>{{orderInfo.status | orderStatusFilter}}</view>
|
|||
|
|
<!-- 次卡商品核销次数 -->
|
|||
|
|
<view v-if="orderInfo.status == 3 && secondType == ProductTypeEnum.PunchCard" class='state fs-36 ml-12'>
|
|||
|
|
{{punchCardOrderInfo.verifyTotalTimes-punchCardOrderInfo.verifyRemainingTimes}} /
|
|||
|
|
{{punchCardOrderInfo.verifyTotalTimes}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="secondType === ProductTypeEnum.Reservation" class="fs-26 flex">
|
|||
|
|
<view class="">
|
|||
|
|
预约时间：{{merchantOrderList.reservationDate}}
|
|||
|
|
</view>
|
|||
|
|
<view class="ml-16">
|
|||
|
|
{{merchantOrderList.reservationTimeSlot}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-else-if="secondType === ProductTypeEnum.PunchCard" class="fs-26 flex">
|
|||
|
|
使用时间：
|
|||
|
|
<view v-if="punchCardOrderInfo.verifyEndDate" class="flex">
|
|||
|
|
<view>{{punchCardOrderInfo.verifyStartDate}}</view>
|
|||
|
|
<view>~</view>
|
|||
|
|
<view>{{punchCardOrderInfo.verifyEndDate}}</view>
|
|||
|
|
<view class="ml-8">到期</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-else>无限期</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-else class="fs-26">
|
|||
|
|
<view v-if="orderInfo.createTime && orderInfo.status>0">{{orderInfo.createTime}}</view>
|
|||
|
|
<view v-if="orderInfo.refundReasonTime !== null">{{orderInfo.refundReasonTime}}</view>
|
|||
|
|
<view v-if="orderInfo.status===0">请在{{orderInfo.expirationTime}}前完成支付！</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="">
|
|||
|
|
<image class="orderStatusPng"
|
|||
|
|
:src="urlDomain+`crmebimage/presets/orderStatus/${statusPng[orderInfo.status]}.png`" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="gradient-bg absolute" style="height: 100rpx;"></view>
|
|||
|
|
</view>
|
|||
|
|
<view style="margin-top: -100rpx;">
|
|||
|
|
<view class="borderPad relative z-10">
|
|||
|
|
<!-- 进度条 -->
|
|||
|
|
<progress-bar
|
|||
|
|
v-if="orderInfo.status !== 9 && orderInfo.refundStatus !== 3 && shippingType != 2 && shippingType != 4"
|
|||
|
|
:orderInfo="orderInfo" :status="orderInfo.status" :shippingType="shippingType" :secondType="secondType">
|
|||
|
|
</progress-bar>
|
|||
|
|
<!-- 预约信息 -->
|
|||
|
|
<reservation-info v-if="merchantOrderList && secondType === ProductTypeEnum.Reservation"
|
|||
|
|
:orderInfo="merchantOrderList" :codeUrl="codeImg" @copy="handleCopy" @showMaoLocation="showMaoLocation"
|
|||
|
|
@makePhone="makePhone">
|
|||
|
|
</reservation-info>
|
|||
|
|
<!-- 用户信息 -->
|
|||
|
|
<top-order-info
|
|||
|
|
v-if="merchantOrderList && Object.keys(merchantOrderList).length > 0 && shippingType == 1 && secondType !== ProductTypeEnum.Fictitious"
|
|||
|
|
:orderInfo="merchantOrderList" :secondType="secondType" :type="'merDelivery'"
|
|||
|
|
@showMaoLocation="showMaoLocation">
|
|||
|
|
</top-order-info>
|
|||
|
|
<!-- 商户信息 -->
|
|||
|
|
<top-order-info v-if="merchantOrderList && Object.keys(merchantOrderList).length > 0 && shippingType == 2"
|
|||
|
|
:orderInfo="merchantOrderList" :secondType="secondType" :type="'pickUp'" @showMaoLocation="showMaoLocation">
|
|||
|
|
</top-order-info>
|
|||
|
|
<!-- 收货地址只显示一次 -->
|
|||
|
|
<!-- <view v-if="isUserAddress && secondType !== ProductTypeEnum.Fictitious" class='wrapper borRadius14 address'>
|
|||
|
|
<view class='name'>{{userAddress[0].realName}}<text class='phone'>{{userAddress[0].userPhone}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view>{{userAddress[0].userAddress}}</view>
|
|||
|
|
</view> -->
|
|||
|
|
<block v-for="(item, index) in orderInfo.merchantOrderList" :key="item.merId">
|
|||
|
|
<view v-if="item.shippingType == 2 && orderInfo.status == 3 && orderInfo.refundStatus !== 3">
|
|||
|
|
<!-- 核销码 -->
|
|||
|
|
<view class="writeOff borRadius14">
|
|||
|
|
<VerificationQRCode :codeImg="codeImg" :merOrderInfo="item" @handleCopy="handleCopy">
|
|||
|
|
</VerificationQRCode>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="map borRadius14">
|
|||
|
|
<view class='title item acea-row row-between-wrapper'>
|
|||
|
|
<view>自提地址信息</view>
|
|||
|
|
<view class="place font-color acea-row row-center-wrapper" @tap="showMaoLocation(item)">
|
|||
|
|
<text class="iconfont icon-ic_location1"></text>查看位置
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="address">
|
|||
|
|
<view class='name' @tap="makePhone(item.merPhone)">{{item.merName}}<text
|
|||
|
|
class='phone'>{{item.merPhone}}</text><text class="iconfont icon-tonghua font-color"></text>
|
|||
|
|
</view>
|
|||
|
|
<view>{{item.merAddressDetail}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
<!-- <view class="writeOff borRadius14">
|
|||
|
|
<view class="title">核销信息</view>
|
|||
|
|
<view class="grayBg">
|
|||
|
|
<view class="pictrue">
|
|||
|
|
<image :src="codeImg"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="gear">
|
|||
|
|
<image src="../static/images/writeOff.jpg"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="num">{{item.verifyCode}}</view>
|
|||
|
|
<view class="rules" v-if='item.systemStore'>
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="rulesTitle acea-row row-middle">
|
|||
|
|
<text class="iconfont icon-icon_clock1"></text>核销时间
|
|||
|
|
</view>
|
|||
|
|
<view class="info">
|
|||
|
|
每日：<text class="time">{{item.systemStore.dayTime.replace(',','-')}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="rulesTitle acea-row row-middle">
|
|||
|
|
<text class="iconfont icon-a-ic_tanhao1"></text>使用说明
|
|||
|
|
</view>
|
|||
|
|
<view class="info">可将二维码出示给店员扫描或提供数字核销码</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="borRadius14 orderGoodsBox mt20">
|
|||
|
|
<view class="borderPad">
|
|||
|
|
<orderGoods :orderInfo="item" :orderNo="orderNo" :cartInfo="item.orderInfoList" :jump="true"
|
|||
|
|
:orderData="orderInfo" :secondType="orderInfo.secondType">
|
|||
|
|
</orderGoods>
|
|||
|
|
</view>
|
|||
|
|
<!-- 配送方式-->
|
|||
|
|
<!-- <DeliveryMethod :secondType="secondType" :orderInfo="orderInfo" :item="item" /> -->
|
|||
|
|
<!-- <view class='flex justify-between userRemarkBox'>
|
|||
|
|
<view class="f-s-28 color28">买家留言：</view>
|
|||
|
|
<view class='cor-86 f-s-28 userRemark'>{{item.userRemark || '-'}}</view>
|
|||
|
|
<view v-show="!isShow" @click="isShow=!isShow">
|
|||
|
|
<view class='mark_show f-s-28'>{{item.userRemark}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 预约信息 -->
|
|||
|
|
<view v-if="orderInfo.secondType == ProductTypeEnum.Reservation" class="borderPad">
|
|||
|
|
<view class="writeOff borRadius14 pad24">
|
|||
|
|
<view class='item acea-row row-between'>
|
|||
|
|
<view>预约时间：</view>
|
|||
|
|
<view>
|
|||
|
|
{{ merchantOrderList.orderInfoList[0].reservationDate || '-' }}
|
|||
|
|
{{ merchantOrderList.orderInfoList[0].reservationTimeSlot || '-' }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='item acea-row row-between mt-32'>
|
|||
|
|
<view>预约数量：</view>
|
|||
|
|
<view>
|
|||
|
|
{{merchantOrderList.orderInfoList[0].payNum}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 系统表单信息 "-->
|
|||
|
|
<view v-if="orderExtend.length" class="borderPad">
|
|||
|
|
<view>
|
|||
|
|
<systemFromInfo :orderExtend="orderExtend"></systemFromInfo>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 订单信息 "-->
|
|||
|
|
<view class="borderPad">
|
|||
|
|
<view class='wrapper borRadius14'>
|
|||
|
|
<view class='item acea-row row-between'>
|
|||
|
|
<view>订单编号：</view>
|
|||
|
|
<view class='conter acea-row row-middle row-right' style="width: auto;"><text
|
|||
|
|
class="text-overflow">{{orderInfo.orderNo}}</text>
|
|||
|
|
<!-- #ifndef H5 -->
|
|||
|
|
<text class='order-copy-btn line-heightOne' @tap='handleCopy(orderInfo.orderNo)'>复制</text>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<text class='order-copy-btn copy-data' :data-clipboard-text="orderInfo.orderNo">复制</text>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
v-show="(orderInfo.payType && secondType !== ProductTypeEnum.Integral) || (secondType === ProductTypeEnum.Integral && orderInfo.payPrice!=0)"
|
|||
|
|
class='item acea-row row-between'>
|
|||
|
|
<view>支付方式：</view>
|
|||
|
|
<view class='conter'>{{orderInfo.payType | payTypeFilter}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='item acea-row row-between'>
|
|||
|
|
<view>支付状态：</view>
|
|||
|
|
<view class='conter' v-if="orderInfo.paid">已支付</view>
|
|||
|
|
<view class='conter' v-else>未支付</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='item acea-row row-between'>
|
|||
|
|
<view>支付时间：</view>
|
|||
|
|
<view class='conter'>{{orderInfo.payTime || '-'}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='item acea-row row-between'>
|
|||
|
|
<view>下单时间：</view>
|
|||
|
|
<view class='conter'>{{(orderInfo.createTime || 0)}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='item acea-row row-between'>
|
|||
|
|
<view>买家留言：</view>
|
|||
|
|
<view class='conter'>{{merchantOrderList.userRemark || '-'}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<view class='wrapper borRadius14' v-if='orderInfo.deliveryType=="express"'>
|
|||
|
|
<view class='item acea-row row-between'>
|
|||
|
|
<view>配送方式：</view>
|
|||
|
|
<view class='conter'>发货</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='item acea-row row-between'>
|
|||
|
|
<view>快递公司：</view>
|
|||
|
|
<view class='conter'>{{orderInfo.deliveryName || ''}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='item acea-row row-between'>
|
|||
|
|
<view>快递号：</view>
|
|||
|
|
<view class='conter'>{{orderInfo.deliveryId || ''}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='wrapper borRadius14' v-else-if='orderInfo.deliveryType=="send"'>
|
|||
|
|
<view class='item acea-row row-between'>
|
|||
|
|
<view>配送方式：</view>
|
|||
|
|
<view class='conter'>送货</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='item acea-row row-between'>
|
|||
|
|
<view>配送人姓名：</view>
|
|||
|
|
<view class='conter'>{{orderInfo.deliveryName || ''}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='item acea-row row-between'>
|
|||
|
|
<view>联系电话：</view>
|
|||
|
|
<view class='conter acea-row row-middle row-right'>{{orderInfo.deliveryId || ''}}<text class='copy'
|
|||
|
|
@tap='goTel'>拨打</text></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='wrapper borRadius14' v-else-if='orderInfo.deliveryType=="fictitious"'>
|
|||
|
|
<view class='item acea-row row-between'>
|
|||
|
|
<view>虚拟发货：</view>
|
|||
|
|
<view class='conter'>已发货，请注意查收</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='wrapper borRadius14'>
|
|||
|
|
<view class='item acea-row row-between'>
|
|||
|
|
<view>商品总价：</view>
|
|||
|
|
<!-- 积分价格 -->
|
|||
|
|
<PointsPrice v-if="secondType === ProductTypeEnum.Integral" :pointsPrice="pointsPrice"
|
|||
|
|
:pointsGoodsStyle="hotPointsStyle"></PointsPrice>
|
|||
|
|
<!-- 其他价格 -->
|
|||
|
|
<view v-else class='conter'>￥{{orderInfo.proTotalPrice || 0}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='item acea-row row-between' v-if="orderInfo.payPostage > 0">
|
|||
|
|
<view>运费：</view>
|
|||
|
|
<view class='conter'>￥{{orderInfo.payPostage || 0}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='item acea-row row-between' v-if='orderInfo.svipDiscountPrice > 0'>
|
|||
|
|
<view>SVIP抵扣：</view>
|
|||
|
|
<view class='conter'>-￥{{orderInfo.svipDiscountPrice || 0}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='item acea-row row-between' v-if='orderInfo.merchantMemberDiscountPrice > 0'>
|
|||
|
|
<view>商户会员抵扣：</view>
|
|||
|
|
<view class='conter'>-￥{{orderInfo.merchantMemberDiscountPrice || 0}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='item acea-row row-between' v-if='orderInfo.merCouponPrice > 0'>
|
|||
|
|
<view>店铺优惠：</view>
|
|||
|
|
<view class='conter'>-￥{{orderInfo.merCouponPrice || 0}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='item acea-row row-between' v-if='orderInfo.platCouponPrice > 0'>
|
|||
|
|
<view>平台优惠：</view>
|
|||
|
|
<view class='conter'>-￥{{orderInfo.platCouponPrice || 0}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='item acea-row row-between' v-if="orderInfo.integralPrice > 0">
|
|||
|
|
<view>积分抵扣：</view>
|
|||
|
|
<view class='conter'>-￥{{orderInfo.integralPrice || 0}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-show="secondType !== ProductTypeEnum.Integral" class='actualPay acea-row row-right'>
|
|||
|
|
<text>实付款：</text>
|
|||
|
|
<text class='money semiBold'>
|
|||
|
|
<text class="fs-24">￥</text>
|
|||
|
|
<text class="fs-40">{{orderInfo.payPrice || 0}}</text>
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view style='height:200rpx;'></view>
|
|||
|
|
|
|||
|
|
<!-- 底部按钮 --> <!-- v-show="isShowBtn" 订单状态（0：待支付，1：待发货,2：部分发货， 3：待核销，4：待收货,5：已收货,6：已完成，9：已取消） -->
|
|||
|
|
<view class='footer acea-row row-right row-middle'>
|
|||
|
|
<view class="qs-btn" v-show="orderInfo.status==0" @click.stop="cancelOrder">取消订单</view>
|
|||
|
|
<view class='bnt cancel'
|
|||
|
|
v-show="Number(orderInfo.status) >1 &&Number(orderInfo.status) < 9 && orderInfo.status!=3&&shippingType===1"
|
|||
|
|
@tap='godeliverRecord'>发货记录
|
|||
|
|
</view>
|
|||
|
|
<view class='bnt cancel' v-show="orderInfo.status==6 || orderInfo.status==9" @tap='delOrder'>删除订单
|
|||
|
|
</view>
|
|||
|
|
<view class='bnt bg-color' v-show="orderInfo.combinationId > 0" @tap='goJoinPink'>查看拼团</view>
|
|||
|
|
<view class='bnt' :class="orderInfo.status==4?'bg-color':'cancel'" v-show="(orderInfo.status>0) && isBuyAgain"
|
|||
|
|
@tap='goOrderConfirm'>
|
|||
|
|
再次购买</view>
|
|||
|
|
<view class='bnt bg-color' v-show="orderInfo.status==4 && orderInfo.refundStatus!==3" @tap='confirmOrder'>确认收货
|
|||
|
|
</view>
|
|||
|
|
<view class='bnt bg-color' v-show="orderInfo.status==0" @tap='goPay(orderInfo)'>立即付款</view>
|
|||
|
|
<view class='bnt bg-color'
|
|||
|
|
v-show="orderInfo.status==3 && orderInfo.refundStatus !== 3 && secondType === ProductTypeEnum.Reservation && orderInfo.isCancelServiceOrder"
|
|||
|
|
@tap='handleCancelReservation'>取消订单</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Copyright (c) 2016~2026 https://www.crmeb.com All rights reserved.
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Author: CRMEB Team <admin@crmeb.com>
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
import easyLoadimage from '@/components/base/easy-loadimage.vue';
|
|||
|
|
import {
|
|||
|
|
getOrderDetail,
|
|||
|
|
orderTake,
|
|||
|
|
orderCancel,
|
|||
|
|
strToBase64Api,
|
|||
|
|
orderStatusImgApi
|
|||
|
|
} from '@/api/order.js';
|
|||
|
|
import {
|
|||
|
|
cartBatchAddApi
|
|||
|
|
} from '@/api/product.js';
|
|||
|
|
import orderGoods from "@/components/orderGoods";
|
|||
|
|
import ClipboardJS from "@/plugin/clipboard/clipboard.js";
|
|||
|
|
import {
|
|||
|
|
toLogin
|
|||
|
|
} from '@/libs/login.js';
|
|||
|
|
import {
|
|||
|
|
mapGetters
|
|||
|
|
} from "vuex";
|
|||
|
|
// #ifdef MP
|
|||
|
|
import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
|
|||
|
|
// #endif
|
|||
|
|
import {
|
|||
|
|
setThemeColor
|
|||
|
|
} from '@/utils/setTheme.js'
|
|||
|
|
import {
|
|||
|
|
Debounce
|
|||
|
|
} from '@/utils/validate.js'
|
|||
|
|
import {
|
|||
|
|
ProductTypeEnum,
|
|||
|
|
ProductMarketingTypeEnum
|
|||
|
|
} from "../../../enums/productEnums";
|
|||
|
|
import systemFromInfo from '@/components/systemFromInfo';
|
|||
|
|
import PointsPrice from '@/components/PointsPrice.vue';
|
|||
|
|
import ReservationInfo from './components/reservationInfo.vue';
|
|||
|
|
import VerificationQRCode from './components/verificationQRCode.vue'
|
|||
|
|
import topOrderInfo from './components/topOrderInfo.vue'
|
|||
|
|
import progressBar from './components/progressBar.vue'
|
|||
|
|
import {
|
|||
|
|
onDelOrder
|
|||
|
|
} from "../../../libs/order";
|
|||
|
|
import DeliveryMethod from "../../../components/DeliveryMethod";
|
|||
|
|
import {
|
|||
|
|
cancelReservationApi
|
|||
|
|
} from "../../../api/order";
|
|||
|
|
import util from "../../../utils/util";
|
|||
|
|
/**
|
|||
|
|
* 积分商品推荐样式
|
|||
|
|
*/
|
|||
|
|
const hotPointsStyle = {
|
|||
|
|
iconStyle: {
|
|||
|
|
width: '28rpx',
|
|||
|
|
height: '28rpx'
|
|||
|
|
},
|
|||
|
|
priceStyle: {
|
|||
|
|
fontSize: '28rpx',
|
|||
|
|
},
|
|||
|
|
unitStyle: {
|
|||
|
|
fontSize: '26rpx',
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
const app = getApp();
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
orderGoods,
|
|||
|
|
easyLoadimage,
|
|||
|
|
systemFromInfo,
|
|||
|
|
PointsPrice,
|
|||
|
|
ReservationInfo,
|
|||
|
|
DeliveryMethod,
|
|||
|
|
VerificationQRCode,
|
|||
|
|
topOrderInfo,
|
|||
|
|
progressBar
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
codeImg: '',
|
|||
|
|
qrcodeSize: 100,
|
|||
|
|
orderNo: '',
|
|||
|
|
cartInfo: [], //购物车产品
|
|||
|
|
orderInfo: {
|
|||
|
|
systemStore: {},
|
|||
|
|
pstatus: {}
|
|||
|
|
}, //订单详情
|
|||
|
|
status: {}, //订单底部按钮状态
|
|||
|
|
totalPrice: '0',
|
|||
|
|
id: 0, //订单id
|
|||
|
|
uniId: '',
|
|||
|
|
utils: this.$util,
|
|||
|
|
againStatus: 0,
|
|||
|
|
type: 0, //订单类型 0-普通订单，1-视频号订单,2-秒杀订单
|
|||
|
|
secondType: 0, //订单二级类型:0-普通订单，1-积分订单，2-虚拟订单，4-视频号订单，5-云盘订单，6-卡密订单
|
|||
|
|
isShow: true,
|
|||
|
|
theme: app.globalData.theme,
|
|||
|
|
bgColor: '#e93323',
|
|||
|
|
userAddress: [],
|
|||
|
|
shippingType: 1,
|
|||
|
|
statusPic: '',
|
|||
|
|
isUserAddress: false, //是否只显示一次收货地址
|
|||
|
|
ProductMarketingTypeEnum: ProductMarketingTypeEnum,
|
|||
|
|
ProductTypeEnum: ProductTypeEnum,
|
|||
|
|
orderExtend: [], //系统表单数据
|
|||
|
|
isSplitDelivery: false, //是否拆单发货
|
|||
|
|
deliveryType: '', // 配送方式
|
|||
|
|
hotPointsStyle: hotPointsStyle,
|
|||
|
|
urlDomain: this.$Cache.get("imgHost"),
|
|||
|
|
statusPng: ['beforPay', 'beforSend', 'beforSend', 'beforPay', 'beforResaved', 'orderDone', 'orderDone',
|
|||
|
|
'', '', 'orderCancel'
|
|||
|
|
],
|
|||
|
|
isShowBtn: false, //是否展示底部按钮
|
|||
|
|
merchantOrderList: {}, //商户信息
|
|||
|
|
punchCardOrderInfo: {}, // 次卡商品信息
|
|||
|
|
spaceStr: ' ', // 空格字符
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
//是否可以再次购买
|
|||
|
|
isBuyAgain() {
|
|||
|
|
return this.type === ProductMarketingTypeEnum.Normal && this.secondType === this.ProductTypeEnum.Normal && !this
|
|||
|
|
.orderExtend.length
|
|||
|
|
},
|
|||
|
|
...mapGetters(['isLogin', 'chatUrl', 'userInfo']),
|
|||
|
|
//积分价格
|
|||
|
|
pointsPrice() {
|
|||
|
|
return {
|
|||
|
|
redeemIntegral: this.orderInfo.redeemIntegral,
|
|||
|
|
price: this.orderInfo.proTotalPrice
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
onLoad: function(options) {
|
|||
|
|
if (!options.orderNo) return this.$util.Tips({
|
|||
|
|
title: '缺少参数'
|
|||
|
|
}, {
|
|||
|
|
tab: 3,
|
|||
|
|
url: 1
|
|||
|
|
});
|
|||
|
|
this.$set(this, 'orderNo', options.orderNo);
|
|||
|
|
this.bgColor = setThemeColor();
|
|||
|
|
uni.setNavigationBarColor({
|
|||
|
|
frontColor: '#ffffff',
|
|||
|
|
backgroundColor: this.bgColor,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
if (this.isLogin) {
|
|||
|
|
this.getOrderInfo();
|
|||
|
|
} else {
|
|||
|
|
toLogin();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onHide: function() {
|
|||
|
|
this.isClose = true;
|
|||
|
|
},
|
|||
|
|
// 滚动监听
|
|||
|
|
onPageScroll(e) {
|
|||
|
|
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
|
|||
|
|
uni.$emit('scroll');
|
|||
|
|
},
|
|||
|
|
onReady: function() {
|
|||
|
|
// #ifdef H5
|
|||
|
|
this.$nextTick(function() {
|
|||
|
|
const clipboard = new ClipboardJS(".copy-data");
|
|||
|
|
clipboard.on("success", () => {
|
|||
|
|
this.$util.Tips({
|
|||
|
|
title: '复制成功'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//发货记录
|
|||
|
|
godeliverRecord() {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '加载中...'
|
|||
|
|
});
|
|||
|
|
let order_logistics = `/pages/goods/order_logistics/index?orderNo=${this.orderInfo.orderNo}`
|
|||
|
|
let send_record = `/pages/goods/send_record/index?orderNo=${this.orderNo}&index=0`
|
|||
|
|
if (this.isSplitDelivery) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: order_logistics
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
let url = this.deliveryType === 'express' ? order_logistics : send_record
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: url
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 取消预约
|
|||
|
|
async handleCancelReservation() {
|
|||
|
|
const result = await uni.showModal({
|
|||
|
|
content: "取消订单将自动退款，确定取消吗？",
|
|||
|
|
});
|
|||
|
|
if (result[0] || result[1].cancel) return;
|
|||
|
|
try {
|
|||
|
|
await cancelReservationApi(this.orderNo)
|
|||
|
|
await this.$util.Tips({
|
|||
|
|
title: '取消预约成功'
|
|||
|
|
});
|
|||
|
|
await this.getOrderInfo();
|
|||
|
|
} catch (e) {
|
|||
|
|
this.$util.Tips({
|
|||
|
|
title: e
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 打开支付组件
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
goPay: Debounce(function(item) {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '加载中...'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/goods/order_payment/index?orderNo=${item.orderNo}&payPrice=${item.payPrice}`
|
|||
|
|
});
|
|||
|
|
}),
|
|||
|
|
/**
|
|||
|
|
* 拨打电话
|
|||
|
|
*/
|
|||
|
|
makePhone: function(e) {
|
|||
|
|
uni.makePhoneCall({
|
|||
|
|
phoneNumber: e
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 打开地图
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
showMaoLocation: function(e) {
|
|||
|
|
if (!e.merLatitude || !e.merLongitude) return this.$util.Tips({
|
|||
|
|
title: '缺少经纬度信息无法查看地图！'
|
|||
|
|
});
|
|||
|
|
//#ifdef H5
|
|||
|
|
if (this.$wechat.isWeixin() === true) {
|
|||
|
|
this.$wechat.seeLocation({
|
|||
|
|
latitude: parseFloat(e.merLatitude),
|
|||
|
|
longitude: parseFloat(e.merLongitude),
|
|||
|
|
name: e.merName,
|
|||
|
|
address: e.merAddressDetail,
|
|||
|
|
}).then(res => {
|
|||
|
|
console.log('success');
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
//#endif
|
|||
|
|
uni.openLocation({
|
|||
|
|
latitude: parseFloat(e.merLatitude),
|
|||
|
|
longitude: parseFloat(e.merLongitude),
|
|||
|
|
scale: 8,
|
|||
|
|
name: e.merName,
|
|||
|
|
address: e.merAddressDetail,
|
|||
|
|
success: function(res) {
|
|||
|
|
console.log('res地址', res)
|
|||
|
|
},
|
|||
|
|
fail: function(error) {
|
|||
|
|
console.error('openLocation failed:', error); // 输出错误信息
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
orderStatusImg() {
|
|||
|
|
let that = this;
|
|||
|
|
orderStatusImgApi().then(res => {
|
|||
|
|
res.data.map(item => {
|
|||
|
|
if (item.title === 'await_pay' && this.orderInfo.status === 0) {
|
|||
|
|
this.statusPic = item.pic
|
|||
|
|
} else if (item.title === 'await_shipped' && this.orderInfo.status === 1) {
|
|||
|
|
this.statusPic = item.pic
|
|||
|
|
} else if (item.title === 'receiving' && this.orderInfo.status === 3) {
|
|||
|
|
this.statusPic = item.pic
|
|||
|
|
} else if (item.title === 'spike' && this.orderInfo.status === 2) {
|
|||
|
|
this.statusPic = item.pic
|
|||
|
|
} else if (item.title === 'complete' && this.orderInfo.status === 4) {
|
|||
|
|
this.statusPic = item.pic
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}).catch(err => {
|
|||
|
|
that.$util.Tips({
|
|||
|
|
title: err
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 获取订单详细信息
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
getOrderInfo: function() {
|
|||
|
|
let that = this;
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: "正在加载中"
|
|||
|
|
});
|
|||
|
|
getOrderDetail(that.orderNo).then(res => {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
let data = res.data;
|
|||
|
|
that.$set(that, 'orderInfo', data);
|
|||
|
|
that.merchantOrderList = data.merchantOrderList[0] // 商户信息
|
|||
|
|
that.punchCardOrderInfo = data.merchantOrderList[0].orderInfoList[0] // 第一个商户的商品信息
|
|||
|
|
that.$set(that, 'id', data.id);
|
|||
|
|
that.$set(that, 'type', data.type);
|
|||
|
|
that.$set(that, 'secondType', data.secondType);
|
|||
|
|
if (this.secondType === ProductTypeEnum.Reservation) {
|
|||
|
|
that.$set(that, 'orderExtend', data.orderExtend ? JSON.parse(data.orderExtend) : []);
|
|||
|
|
} else {
|
|||
|
|
that.$set(that, 'orderExtend', data.orderExtend ? [JSON.parse(data.orderExtend)] : []);
|
|||
|
|
}
|
|||
|
|
that.orderStatusImg();
|
|||
|
|
that.userAddress = data.merchantOrderList.filter(item => {
|
|||
|
|
return item.shippingType === 1
|
|||
|
|
})
|
|||
|
|
that.isUserAddress = that.userAddress.length > 0 ? true : false;
|
|||
|
|
if (data.status !== 0 || data.status !== 9) {
|
|||
|
|
if (data.merchantOrderList[0].shippingType == 2 || data.merchantOrderList[0]
|
|||
|
|
.shippingType == 4) that.markCode(data.merchantOrderList[
|
|||
|
|
0].verifyCode);
|
|||
|
|
}
|
|||
|
|
that.$set(that, 'shippingType', data.merchantOrderList[0].shippingType);
|
|||
|
|
that.$set(that, 'cartInfo', data.merchantOrderList[0].orderInfoList);
|
|||
|
|
that.$set(that, 'isSplitDelivery', data.merchantOrderList[0].isSplitDelivery);
|
|||
|
|
that.$set(that, 'deliveryType', data.merchantOrderList[0].deliveryType);
|
|||
|
|
that.getIsShowBtn();
|
|||
|
|
if (that.orderInfo.refundStatus > 0) {
|
|||
|
|
uni.setNavigationBarColor({
|
|||
|
|
frontColor: '#fff',
|
|||
|
|
backgroundColor: '#666666'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}).catch(err => {
|
|||
|
|
that.$util.Tips({
|
|||
|
|
title: err
|
|||
|
|
}, {
|
|||
|
|
tab: 4,
|
|||
|
|
url: '/pages/user/index'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//是否展示底部操作按钮
|
|||
|
|
//<!-- 订单状态（0：待支付，1：待发货,2：部分发货， 3：待核销，4：待收货,5：已收货,6：已完成，9：已取消） -->
|
|||
|
|
// <!-- 已退款的订单详情中，不支持任何操作。 orderInfo.refundStatus !== 3,拼团已退款订单还可进行【查看拼团】操作-->
|
|||
|
|
getIsShowBtn() {
|
|||
|
|
this.isShowBtn = (this.orderInfo.status != 3 && this.orderInfo.status != 1) || this.orderInfo
|
|||
|
|
.refundStatus !== 3 || (this.orderInfo.refundStatus == 3 && this.type !== this.ProductMarketingTypeEnum
|
|||
|
|
.Groupbuying) || (this.orderInfo.merchantOrderList && this.orderInfo.merchantOrderList[0]
|
|||
|
|
.shippingType === 2 && this.orderInfo.status === 1)
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
*
|
|||
|
|
* 生成二维码
|
|||
|
|
*/
|
|||
|
|
markCode(text) {
|
|||
|
|
strToBase64Api({
|
|||
|
|
height: '145',
|
|||
|
|
text: text,
|
|||
|
|
width: '145'
|
|||
|
|
}).then(res => {
|
|||
|
|
this.codeImg = res.data.code
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
*
|
|||
|
|
* 剪切订单号
|
|||
|
|
*/
|
|||
|
|
// #ifndef H5
|
|||
|
|
handleCopy: function(num) {
|
|||
|
|
uni.setClipboardData({
|
|||
|
|
data: num
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
/**
|
|||
|
|
* 打电话
|
|||
|
|
*/
|
|||
|
|
goTel: function() {
|
|||
|
|
uni.makePhoneCall({
|
|||
|
|
phoneNumber: this.orderInfo.deliveryId
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 去拼团详情
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
goJoinPink: function() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/activity/goods_combination_status/index?id=' + this.orderInfo.pinkId,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 再此购买
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
goOrderConfirm: Debounce(function() {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '加载中...'
|
|||
|
|
});
|
|||
|
|
let cartListRequest = []
|
|||
|
|
let that = this;
|
|||
|
|
this.cartInfo.map(item => {
|
|||
|
|
cartListRequest.push({
|
|||
|
|
productId: parseFloat(item.productId),
|
|||
|
|
productAttrUnique: item.attrValueId,
|
|||
|
|
cartNum: parseFloat(item.payNum)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
cartBatchAddApi(cartListRequest).then(function(res) {
|
|||
|
|
uni.switchTab({
|
|||
|
|
url: '/pages/order_addcart/order_addcart'
|
|||
|
|
})
|
|||
|
|
}).catch(res => {
|
|||
|
|
return this.$util.Tips({
|
|||
|
|
title: res
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}),
|
|||
|
|
//确认收货
|
|||
|
|
confirmOrder: Debounce(function() {
|
|||
|
|
let that = this;
|
|||
|
|
let applyRefundNum = 0;
|
|||
|
|
that.orderInfo.merchantOrderList.map((item) => {
|
|||
|
|
item.orderInfoList.map((i) => {
|
|||
|
|
applyRefundNum = Number(i.applyRefundNum);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
// 如果有售后中的，提示
|
|||
|
|
if (applyRefundNum > 0) return uni.showModal({
|
|||
|
|
confirmColor: '#f55850',
|
|||
|
|
title: '提示',
|
|||
|
|
content: '请先撤销售后，再进行收货操作',
|
|||
|
|
confirmText: '我知道了',
|
|||
|
|
success(res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '确认收货',
|
|||
|
|
content: '为保障权益，请收到货确认无误后，再确认收货',
|
|||
|
|
confirmColor: '#f55850',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
orderTake(that.orderNo).then(res => {
|
|||
|
|
return that.$util.Tips({
|
|||
|
|
title: '操作成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
}, function() {
|
|||
|
|
that.getOrderInfo();
|
|||
|
|
});
|
|||
|
|
}).catch(err => {
|
|||
|
|
return that.$util.Tips({
|
|||
|
|
title: err
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
/**
|
|||
|
|
*
|
|||
|
|
* 删除订单
|
|||
|
|
*/
|
|||
|
|
delOrder: Debounce(function() {
|
|||
|
|
onDelOrder(this.orderNo);
|
|||
|
|
}),
|
|||
|
|
cancelOrder: Debounce(function() {
|
|||
|
|
let self = this
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确认取消该订单?',
|
|||
|
|
cancelColor: '#f55850',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
orderCancel(self.orderNo)
|
|||
|
|
.then((data) => {
|
|||
|
|
self.$util.Tips({
|
|||
|
|
title: '取消成功'
|
|||
|
|
}, {
|
|||
|
|
tab: 4,
|
|||
|
|
url: '/pages/user/index'
|
|||
|
|
})
|
|||
|
|
}).catch((err) => {
|
|||
|
|
self.$util.Tips({
|
|||
|
|
title: err
|
|||
|
|
})
|
|||
|
|
self.getDetail();
|
|||
|
|
});
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
@import '../static/css/order_details.scss';
|
|||
|
|
|
|||
|
|
.orderStatusPng {
|
|||
|
|
width: 128rpx;
|
|||
|
|
height: 128rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.picTxt {
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.writeOff {
|
|||
|
|
padding: 0 24rpx 42rpx 24rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.verification-record-box {}
|
|||
|
|
|
|||
|
|
.verification-code-box {
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-top: 48rpx;
|
|||
|
|
|
|||
|
|
.verification-code-img {
|
|||
|
|
width: 320rpx;
|
|||
|
|
height: 320rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.copy-btn {
|
|||
|
|
margin-left: 14rpx;
|
|||
|
|
// border-radius: 26rpx;
|
|||
|
|
// border: 1rpx solid #ddd;
|
|||
|
|
// padding: 4rpx 20rpx;
|
|||
|
|
// margin-left: 12rpx;
|
|||
|
|
// line-height: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.verification-time {
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex-baseline {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: baseline;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.color-666 {
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pad24 {
|
|||
|
|
padding: 24rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-copy-btn {
|
|||
|
|
height: 36rpx;
|
|||
|
|
line-height: 36rpx;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
border: 0.5px solid #ddd;
|
|||
|
|
border-radius: 20px !important;
|
|||
|
|
margin-left: 12rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fs-40 {
|
|||
|
|
font-size: 40rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fs-36 {
|
|||
|
|
font-size: 36rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// .record {
|
|||
|
|
// position: relative;
|
|||
|
|
// display: flex;
|
|||
|
|
// align-items: center;
|
|||
|
|
// // top: 40rpx;
|
|||
|
|
// // right: 0;
|
|||
|
|
// // color: #FFDDB8;
|
|||
|
|
// // font-size: 22rpx;
|
|||
|
|
// // background-color: rgba(0, 0, 0, 0.3);
|
|||
|
|
// padding: 8rpx 0;
|
|||
|
|
// border-radius: 20px 0px 0px 20px;
|
|||
|
|
// }
|
|||
|
|
</style>
|