1359 lines
33 KiB
Vue
1359 lines
33 KiB
Vue
<template>
|
||
<view class="order_item">
|
||
<view class="expresser expresser-2">
|
||
<view class="header">
|
||
<text class="symbol">#</text>
|
||
<text>{{ orderItem.order_pickup_num }}</text>
|
||
</view>
|
||
<view class="body">
|
||
<view class="item info" v-if="orderItem.sf_order_info.operator_name">
|
||
<view class="name">{{ orderItem.sf_order_info.operator_name }}</view>
|
||
<view class="btn_call" @click="handerExpedite">催快递</view>
|
||
</view>
|
||
<view class="item time">
|
||
立即送达/{{
|
||
$u.timeFormat(orderItem.arrival_time, "mm-dd hh:MM")
|
||
}}前送达
|
||
</view>
|
||
<u-icon
|
||
v-if="currOrderItem.sf_order_info.feed && !isErrorOrder"
|
||
class="icon"
|
||
name="arrow-right"
|
||
color="#000"
|
||
size="12"
|
||
@click="showSfFlowPopup = true"
|
||
></u-icon>
|
||
</view>
|
||
<view class="footer">
|
||
<view
|
||
:class="['status', `status-${orderItem.sf_order_info.order_status}`]"
|
||
>
|
||
{{ sfFormatStatus(orderItem.sf_order_info.order_status) }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="user">
|
||
<view class="header">
|
||
<view class="info">
|
||
<view class="name">{{ orderItem.buyer_info.da_name }}/</view>
|
||
<view class="mobile">{{ orderItem.buyer_info.da_mobile }}</view>
|
||
</view>
|
||
<view class="box">
|
||
<view
|
||
class="btn_call"
|
||
@click="makePhone(orderItem.buyer_info.da_mobile)"
|
||
>
|
||
联系顾客
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="body">
|
||
<view class="info">
|
||
{{
|
||
orderItem.buyer_info.da_province +
|
||
orderItem.buyer_info.da_city +
|
||
orderItem.buyer_info.da_county +
|
||
orderItem.buyer_info.da_address
|
||
}}
|
||
</view>
|
||
<view class="box"></view>
|
||
</view>
|
||
<view class="order_picking_box" v-if="!isErrorOrder">
|
||
<view class="order_picking_text">
|
||
拣货中：
|
||
<text>{{ getRemainingTime(orderItem.arrival_time) }}</text>
|
||
</view>
|
||
<u-button class="picking_btn" @click="handerShowOrderPickingPopup()">
|
||
拣货完成
|
||
</u-button>
|
||
</view>
|
||
<view class="footer">
|
||
<view class="info" v-if="orderItem.buyer_info.order_message">
|
||
<text>备注:</text>
|
||
{{ orderItem.buyer_info.order_message }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="goods">
|
||
<view class="single" v-if="!orderItem.showRefundOrderInfo">
|
||
<view class="body">
|
||
<view class="info">
|
||
<view class="img_box">
|
||
<view
|
||
v-for="(item, index) of orderItem.order_items.slice(0, 3)"
|
||
mode="aspectFit"
|
||
class="img"
|
||
:style="{ backgroundImage: `url('${item.order_item_image}')` }"
|
||
/>
|
||
</view>
|
||
|
||
<view class="total">
|
||
共{{ orderItem.order_items.length }}件商品
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="footer">
|
||
<view class="text">合计</view>
|
||
<view class="prize_type">¥</view>
|
||
<view class="prize_num">{{ sumBigInts }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list" v-if="orderItem.showRefundOrderInfo">
|
||
<view class="item" v-for="(group, index2) of orderItem.order_items">
|
||
<image :src="group.order_item_image" mode="aspectFit" class="img" />
|
||
<view class="box">
|
||
<view class="tit">{{ group.item_name }}</view>
|
||
<view class="desc">
|
||
<view class="total">数量X{{ group.order_item_quantity }}</view>
|
||
<view class="price">¥{{ group.order_item_amount }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="counter">
|
||
<view class="text">小计</view>
|
||
<view class="prize_type">¥</view>
|
||
<view class="prize_num">{{ orderItem.order_product_amount }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
class="result"
|
||
style="border: none"
|
||
v-if="orderItem.showRefundOrderInfo"
|
||
>
|
||
<view class="cell">
|
||
<view class="header">商品总额</view>
|
||
<view class="body">
|
||
<text>¥</text>
|
||
<text class="total">{{ orderItem.order_product_amount }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="header">配送运费</view>
|
||
<view class="body red">- ¥{{ orderItem.order_shipping_fee }}</view>
|
||
</view>
|
||
<view class="cell" v-if="orderItem.packing_fee > 0">
|
||
<view class="header">打包费用</view>
|
||
<view class="body green">+ ¥{{ orderItem.packing_fee }}</view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="header">平台佣金</view>
|
||
<view class="body red">- ¥{{ orderItem.platform_fee }}</view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="header">活动减免</view>
|
||
<view class="body red">- ¥{{ orderItem.total_discount_amount }}</view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="header">合计实收</view>
|
||
<view class="body">
|
||
¥
|
||
<text class="count">{{ orderItem.order_payment_amount }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="header">预计收入</view>
|
||
<view class="body">
|
||
¥
|
||
<text class="count">{{ orderItem.order_income_amount }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="result" v-if="orderItem.showRefundOrderInfo">
|
||
<view class="cell">
|
||
<view class="header">订单编号</view>
|
||
<view class="body">
|
||
<view class="order_num">{{ orderItem.order_id }}</view>
|
||
<view class="btn_copy" @click="copy(orderItem.order_id, 'order')">
|
||
复制
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="header">下单时间</view>
|
||
<view class="body">{{ orderItem.order_time }}</view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="header">支付时间</view>
|
||
<view class="body">{{ orderItem.payment_time }}</view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="header">配送方式</view>
|
||
<view class="body">
|
||
{{ deliveryTypeName(currOrderItem.delivery_type_id) }}
|
||
</view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="header">配送单号</view>
|
||
<view class="body">
|
||
<view class="order_num">
|
||
{{ orderItem.sf_order_info.sf_order_id }}
|
||
</view>
|
||
<view
|
||
class="btn_copy"
|
||
@click="copy(orderItem.sf_order_info.sf_order_id, 'distribution')"
|
||
>
|
||
复制
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tool">
|
||
<view class="header" @click="showRefundOrderInfo">
|
||
<template>
|
||
{{ orderItem.showRefundOrderInfo ? "收起" : "更多订单信息" }}
|
||
|
||
<u-icon
|
||
style="display: inline-block; margin-left: 6rpx"
|
||
:name="orderItem.showRefundOrderInfo ? 'arrow-up' : 'arrow-down'"
|
||
size="8"
|
||
color="#cccccc"
|
||
></u-icon>
|
||
</template>
|
||
</view>
|
||
<view
|
||
class="body"
|
||
v-if="
|
||
!isErrorOrder &&
|
||
orderItem.order_state_id >= 2040 &&
|
||
orderItem.order_state_id <= 2070
|
||
"
|
||
>
|
||
<view class="btn btn_cancel" @click="handerShowCancelOrder">
|
||
取消订单
|
||
</view>
|
||
<view class="btn btn_refund" @click="handerShowPartOrderRefund">
|
||
部分退款
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-popup
|
||
class="affirm-popup"
|
||
zIndex="10077"
|
||
:show="showCancelOrderPopup"
|
||
mode="center"
|
||
@close="showCancelOrderPopup = false"
|
||
>
|
||
<view class="affirm-popup-content">
|
||
<view class="affirm-popup-title">取消订单</view>
|
||
<view class="affirm-popup-tips">
|
||
取消订单后，金额将原路退回给用户，确定取消？
|
||
</view>
|
||
<view class="affirm-popup-form">
|
||
<u--form
|
||
labelPosition="left"
|
||
:model="form"
|
||
ref="uForm"
|
||
label-width="70"
|
||
:rules="rules"
|
||
>
|
||
<u-form-item
|
||
label="退款原因"
|
||
prop="reason"
|
||
class="form-item"
|
||
required
|
||
>
|
||
<u--textarea
|
||
class="u-textarea"
|
||
v-model="form.reason"
|
||
count
|
||
autoHeight
|
||
maxlength="100"
|
||
placeholder="请输入取消订单原因"
|
||
></u--textarea>
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
<view class="popup-btn-list">
|
||
<u-button
|
||
class="btn-item"
|
||
:hairline="true"
|
||
:plain="true"
|
||
shape="circle"
|
||
@click="showCancelOrderPopup = false"
|
||
>
|
||
取消
|
||
</u-button>
|
||
<u-button
|
||
class="btn-item btn-item-2"
|
||
:hairline="true"
|
||
:plain="true"
|
||
shape="circle"
|
||
@click="getInitiativeOrderRefund"
|
||
>
|
||
确定
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup
|
||
class="part-order-refund-popup"
|
||
zIndex="10080"
|
||
:show="showPartOrderRefundPopup"
|
||
mode="bottom"
|
||
closeable
|
||
@close="showPartOrderRefundPopup = false"
|
||
>
|
||
<view class="part-order-refund-popup-content">
|
||
<view class="part-order-refund-popup-title">部分退款</view>
|
||
<scroll-view
|
||
scroll-y
|
||
class="specification-type-search-scroll"
|
||
:show-scrollbar="false"
|
||
:style="{
|
||
maxHeight: orderItem.order_items.length >= 5 ? '500px' : 'none',
|
||
overflowY: orderItem.order_items.length >= 5 ? 'auto' : 'visible',
|
||
}"
|
||
>
|
||
<view class="affirm-popup-form">
|
||
<u--form
|
||
labelPosition="left"
|
||
:model="form"
|
||
ref="uForm"
|
||
label-width="100"
|
||
:rules="rules"
|
||
>
|
||
<u-form-item
|
||
label="退款原因"
|
||
prop="reason"
|
||
class="form-item"
|
||
required
|
||
>
|
||
<u--textarea
|
||
class="u-textarea"
|
||
v-model="form.reason"
|
||
count
|
||
autoHeight
|
||
maxlength="100"
|
||
placeholder="请输入取消订单原因"
|
||
></u--textarea>
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
<view class="radio-list" v-if="orderItem.order_items.length > 0">
|
||
<u-checkbox-group
|
||
v-model="commodityCheckBoxList"
|
||
placement="column"
|
||
>
|
||
<view
|
||
class="commodity-info-item"
|
||
v-for="(item, index) of orderItem.order_items"
|
||
:key="index"
|
||
>
|
||
<view class="commodity-info-box">
|
||
<image
|
||
class="commodity-info-img"
|
||
:src="item.order_item_image"
|
||
></image>
|
||
|
||
<view class="commodity-content">
|
||
<view class="commodity-name">
|
||
{{ item.item_name || 0 }}
|
||
</view>
|
||
|
||
<view style="padding-left: 8rpx">
|
||
X{{ item.order_item_quantity || 0 }}
|
||
</view>
|
||
<view class="commodity-price">
|
||
￥{{
|
||
item.order_item_quantity * item.item_unit_price || 0
|
||
}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-number-box
|
||
:min="1"
|
||
:max="item.order_item_quantity_2"
|
||
v-model="item.order_item_quantity"
|
||
></u-number-box>
|
||
<u-checkbox
|
||
:customStyle="{ marginBottom: '8px' }"
|
||
:key="index"
|
||
:name="item.item_id"
|
||
></u-checkbox>
|
||
</view>
|
||
</u-checkbox-group>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="popup-btn-list">
|
||
<u-button
|
||
class="btn-item"
|
||
:hairline="true"
|
||
:plain="true"
|
||
shape="circle"
|
||
@click="showPartOrderRefundPopup = false"
|
||
>
|
||
取消
|
||
</u-button>
|
||
<u-button
|
||
class="btn-item btn-item-2"
|
||
:hairline="true"
|
||
:plain="true"
|
||
shape="circle"
|
||
@click="getInitiativeOrderRefund"
|
||
>
|
||
确认
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup
|
||
class="affirm-popup"
|
||
zIndex="10077"
|
||
:show="showOrderPickingPopup"
|
||
mode="center"
|
||
@close="showOrderPickingPopup = false"
|
||
>
|
||
<view class="affirm-popup-content">
|
||
<view class="affirm-popup-title">取消订单</view>
|
||
<view class="affirm-popup-tips">
|
||
确定将取货号“ {{ currOrderItem.order_pickup_num }} ”提前拣货完成？
|
||
</view>
|
||
<view class="popup-btn-list">
|
||
<u-button
|
||
class="btn-item"
|
||
:hairline="true"
|
||
:plain="true"
|
||
shape="circle"
|
||
@click="showOrderPickingPopup = false"
|
||
>
|
||
取消
|
||
</u-button>
|
||
<u-button
|
||
class="btn-item btn-item-2"
|
||
:hairline="true"
|
||
:plain="true"
|
||
shape="circle"
|
||
@click="getOrderPicking"
|
||
>
|
||
确定
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup
|
||
class="SfFlow-popup"
|
||
zIndex="10077"
|
||
:show="showSfFlowPopup"
|
||
mode="center"
|
||
closeable
|
||
@close="showSfFlowPopup = false"
|
||
>
|
||
<view class="SfFlow-popup-content">
|
||
<view class="SfFlow-popup-title">同城轨迹</view>
|
||
<view class="SfFlow-content">
|
||
<u-steps
|
||
:current="
|
||
currOrderItem.sf_order_info.feed
|
||
? currOrderItem.sf_order_info.feed.length
|
||
: 0
|
||
"
|
||
direction="column"
|
||
>
|
||
<u-steps-item
|
||
v-for="(item, index) of currOrderItem.sf_order_info.feed"
|
||
:title="item.content"
|
||
:desc="item.create_time"
|
||
></u-steps-item>
|
||
</u-steps>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-toast ref="uToast"></u-toast>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
GetExpediteSFOrder,
|
||
GetInitiativeOrderRefund,
|
||
GetOrderPicking,
|
||
} from "@/api/order";
|
||
|
||
import { makePhoneCall } from "@/utils/callPhone";
|
||
|
||
export default {
|
||
props: {
|
||
orderItem: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
isErrorOrder: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
orderItemIndex: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
sfStatus: [
|
||
{
|
||
id: 1,
|
||
label: "已接单",
|
||
},
|
||
{
|
||
id: 2,
|
||
label: "订单取消",
|
||
},
|
||
{
|
||
id: 10,
|
||
label: "配送员接单",
|
||
},
|
||
{
|
||
id: 12,
|
||
label: "配送员到店",
|
||
},
|
||
{
|
||
id: 15,
|
||
label: "配送中",
|
||
},
|
||
{
|
||
id: 17,
|
||
label: "配送员妥投完单",
|
||
},
|
||
{
|
||
id: 22,
|
||
label: "配送员撤单",
|
||
},
|
||
{
|
||
id: 91,
|
||
label: "骑士上报异常",
|
||
},
|
||
{
|
||
id: 31,
|
||
label: "取消中",
|
||
},
|
||
],
|
||
deliveryType: [
|
||
{
|
||
id: 5,
|
||
label: "自提",
|
||
},
|
||
{
|
||
id: 10,
|
||
label: "普通快递",
|
||
},
|
||
{
|
||
id: 16,
|
||
label: "同城配送",
|
||
},
|
||
],
|
||
isCancelOrder: false,
|
||
showCancelOrderPopup: false,
|
||
showPartOrderRefundPopup: false,
|
||
form: {
|
||
reason: "",
|
||
},
|
||
rules: {
|
||
reason: [
|
||
{
|
||
required: true,
|
||
message: "请输入取消订单原因",
|
||
// 可以单个或者同时写两个触发验证方式
|
||
trigger: ["change", "blur"],
|
||
},
|
||
],
|
||
},
|
||
commodityCheckBoxList: [],
|
||
refreshInterval: null, // 全局定时器
|
||
showOrderPickingPopup: false,
|
||
currOrderItem: {
|
||
order_items: [],
|
||
sf_order_info: {
|
||
feed: null,
|
||
},
|
||
},
|
||
isRefreshing: false,
|
||
refreshInterval: null, // 全局定时器
|
||
showSfFlowPopup: false,
|
||
};
|
||
},
|
||
computed: {
|
||
sumBigInts() {
|
||
// 高精度累加
|
||
const sum =
|
||
this.orderItem.order_items.reduce((acc, item) => {
|
||
// 将数值转换为字符串以避免浮点数精度问题
|
||
const current =
|
||
typeof item.order_item_amount === "string"
|
||
? parseFloat(item.order_item_amount)
|
||
: item.order_item_amount;
|
||
// 使用乘以100再除以100的方法来避免浮点数精度问题
|
||
return acc + Math.round(current * 100);
|
||
}, 0) / 100;
|
||
|
||
return sum;
|
||
},
|
||
},
|
||
created() {
|
||
this.currOrderItem = JSON.parse(JSON.stringify(this.orderItem));
|
||
if (this.currOrderItem.sf_order_info.feed) {
|
||
this.currOrderItem.sf_order_info.feed = JSON.parse(
|
||
this.currOrderItem.sf_order_info.feed
|
||
);
|
||
}
|
||
},
|
||
mounted() {
|
||
// 每1秒刷新一次数据（触发界面更新）
|
||
this.refreshInterval = setInterval(() => {
|
||
this.$forceUpdate(); // 强制更新视图
|
||
}, 1000);
|
||
},
|
||
beforeDestroy() {
|
||
// 组件销毁时清除定时器
|
||
if (this.refreshInterval) {
|
||
clearInterval(this.refreshInterval);
|
||
}
|
||
},
|
||
methods: {
|
||
getRemainingTime(arrivalTime) {
|
||
if (!arrivalTime) return "时间未设定";
|
||
|
||
const now = Date.now();
|
||
const remainingMs = arrivalTime - now;
|
||
|
||
if (remainingMs <= 0) return "已超时";
|
||
|
||
// 计算分钟和秒
|
||
const minutes = Math.floor(remainingMs / (1000 * 60));
|
||
const seconds = Math.floor((remainingMs % (1000 * 60)) / 1000);
|
||
|
||
// 格式化为 MM:SS（补零）
|
||
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
|
||
},
|
||
sfFormatStatus(id) {
|
||
let label = "";
|
||
|
||
this.sfStatus.forEach((item) => {
|
||
if (item.id == id) {
|
||
label = item.label;
|
||
}
|
||
});
|
||
|
||
return label;
|
||
},
|
||
deliveryTypeName(id) {
|
||
let label = "";
|
||
this.deliveryType.forEach((item) => {
|
||
if (item.id == id) {
|
||
label = item.label;
|
||
}
|
||
});
|
||
|
||
return label;
|
||
},
|
||
async handerExpedite() {
|
||
let params = {
|
||
order_id: this.item.order_id,
|
||
};
|
||
|
||
let res = await GetExpediteSFOrder(params);
|
||
if (res && res.status == 200) {
|
||
uni.$u.toast("催单成功");
|
||
}
|
||
},
|
||
showRefundOrderInfo() {
|
||
this.$emit(
|
||
"showRefundOrderInfo",
|
||
!this.orderItem.showRefundOrderInfo,
|
||
this.orderItemIndex
|
||
);
|
||
},
|
||
makePhone(phone) {
|
||
console.log(makePhoneCall);
|
||
|
||
makePhoneCall(phone);
|
||
// // #ifdef H5
|
||
// uni.showToast({
|
||
// title: "H5环境不支持",
|
||
// icon: "none",
|
||
// });
|
||
// // #endif
|
||
|
||
// // #ifdef APP-PLUS
|
||
// uni.makePhoneCall({
|
||
// phoneNumber: phone,
|
||
// success: function () {
|
||
// console.log("拨打电话成功");
|
||
// },
|
||
// fail: function () {
|
||
// console.log("拨打电话失败");
|
||
// },
|
||
// });
|
||
// // #endif
|
||
},
|
||
copy(num, type) {
|
||
uni.setClipboardData({
|
||
data: num,
|
||
success: function () {
|
||
uni.showToast({
|
||
title: `${type == "order" ? "订单编号" : "配送单号"}复制成功`,
|
||
icon: "none",
|
||
});
|
||
},
|
||
});
|
||
},
|
||
handerShowCancelOrder() {
|
||
this.showCancelOrderPopup = true;
|
||
this.isCancelOrder = true;
|
||
},
|
||
handerShowPartOrderRefund() {
|
||
let _item = JSON.parse(JSON.stringify(this.orderItem));
|
||
|
||
_item.order_items.forEach((group) => {
|
||
group.order_item_quantity_2 = group.order_item_quantity;
|
||
});
|
||
|
||
this.currOrderItem = _item;
|
||
|
||
this.showPartOrderRefundPopup = true;
|
||
this.isCancelOrder = false;
|
||
},
|
||
getInitiativeOrderRefund() {
|
||
var params = {
|
||
order_id: this.currOrderItem.order_id,
|
||
reason: this.form.reason,
|
||
};
|
||
|
||
if (!this.isCancelOrder) {
|
||
if (this.commodityCheckBoxList.length <= 0) {
|
||
this.$refs.uToast.show({
|
||
message: "请先选择你要退的商品",
|
||
type: "error",
|
||
duration: 1000,
|
||
zIndex: 12000,
|
||
position: "top",
|
||
});
|
||
return;
|
||
}
|
||
const matchedItems = this.currOrderItem.order_items.filter((item) =>
|
||
this.commodityCheckBoxList.includes(item.item_id)
|
||
);
|
||
|
||
params.order_return_vo = {
|
||
order_id: this.currOrderItem.order_id,
|
||
return_items: matchedItems.map((item) => {
|
||
return {
|
||
order_item_id: item.item_id,
|
||
return_item_num: item.order_item_quantity,
|
||
return_refund_amount:
|
||
item.order_item_quantity * item.item_unit_price,
|
||
};
|
||
}),
|
||
};
|
||
}
|
||
|
||
this.$refs.uForm.validate().then(async (valid) => {
|
||
let res = await GetInitiativeOrderRefund(params);
|
||
if (res && res.status == 200) {
|
||
this.showCancelOrderPopup = false;
|
||
this.showPartOrderRefundPopup = false;
|
||
if (!this.isCancelOrder) {
|
||
uni.$u.toast("部分订单退款成功");
|
||
} else {
|
||
uni.$u.toast("取消订单成功");
|
||
}
|
||
this.form.reason = "";
|
||
|
||
this.commodityCheckBoxList = [];
|
||
this.$emit("cancelOrder");
|
||
}
|
||
this.showCancelOrderPopup = false;
|
||
this.showPartOrderRefundPopup = false;
|
||
});
|
||
},
|
||
handerShowOrderPickingPopup() {
|
||
this.showOrderPickingPopup = true;
|
||
},
|
||
async getOrderPicking() {
|
||
let params = {
|
||
order_id: this.currOrderItem.order_id,
|
||
store_id: this.currOrderItem.store_info.store_id,
|
||
};
|
||
|
||
let res = await GetOrderPicking(params);
|
||
if (res && res.status == 200) {
|
||
this.showOrderPickingPopup = false;
|
||
uni.$u.toast("操作成功");
|
||
}
|
||
this.showOrderPickingPopup = false;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/styles/variables.scss";
|
||
|
||
.order_item {
|
||
padding: 24rpx;
|
||
margin-bottom: 24rpx;
|
||
border-radius: 12rpx;
|
||
background: #fff;
|
||
font-size: 24rpx;
|
||
color: #222;
|
||
|
||
.expresser {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
|
||
.header {
|
||
text {
|
||
font-size: 48rpx;
|
||
}
|
||
}
|
||
.body {
|
||
flex: 1;
|
||
padding-left: 24rpx;
|
||
position: relative;
|
||
|
||
// &::after {
|
||
// position: absolute;
|
||
// right: 0;
|
||
// top: 0;
|
||
// height: 100%;
|
||
// display: block;
|
||
// content: " ";
|
||
// width: 1px;
|
||
// background-image: linear-gradient(to bottom, #000 80%, transparent 20%);
|
||
// background-size: 100% 16rpx;
|
||
// opacity: 0.2;
|
||
// }
|
||
|
||
.icon {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 32%;
|
||
}
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&.info {
|
||
margin-bottom: 8rpx;
|
||
}
|
||
.time {
|
||
color: rgba(34, 34, 34, 0.9);
|
||
}
|
||
.name {
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
&::before {
|
||
display: block;
|
||
content: " ";
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||
border-radius: 6rpx;
|
||
margin-right: 12rpx;
|
||
background: url("@/static/icon_mt.png") no-repeat 50% 50%;
|
||
background-size: 28rpx 28rpx;
|
||
}
|
||
}
|
||
.btn_call {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 24rpx;
|
||
&::before {
|
||
display: block;
|
||
content: " ";
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
background: url("@/static/icon_phone.png") no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.footer {
|
||
width: 228rpx;
|
||
position: relative;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
height: 100%;
|
||
display: block;
|
||
content: " ";
|
||
width: 1px;
|
||
background-image: linear-gradient(to bottom, #000 80%, transparent 20%);
|
||
background-size: 100% 16rpx;
|
||
opacity: 0.2;
|
||
}
|
||
|
||
.status {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: rgba(0, 182, 142, 1);
|
||
}
|
||
|
||
.status-2,
|
||
.status-22,
|
||
.status-31,
|
||
.status-91 {
|
||
color: red;
|
||
}
|
||
}
|
||
}
|
||
|
||
.expresser-2 {
|
||
color: #000;
|
||
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.symbol {
|
||
margin-right: 4rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.user {
|
||
margin-bottom: 24rpx;
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
.info {
|
||
display: flex;
|
||
align-items: center;
|
||
.name {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.btn_call {
|
||
display: flex;
|
||
align-items: center;
|
||
&::before {
|
||
display: block;
|
||
content: " ";
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
background: url("@/static/icon_phone.png") no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.body {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.btn_map {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||
border-radius: 6rpx;
|
||
background: url("@/static/icon_map.png") no-repeat 50% 50%;
|
||
background-size: 28rpx 28rpx;
|
||
}
|
||
.box {
|
||
padding-left: 40rpx;
|
||
}
|
||
|
||
.info {
|
||
text-align: left;
|
||
color: rgba(34, 34, 34, 0.75);
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
.info {
|
||
margin: 16rpx 0 24rpx;
|
||
background: rgba(254, 247, 234, 0.5);
|
||
padding: 12rpx 24rpx;
|
||
border-radius: 8rpx;
|
||
text {
|
||
color: #ff801f;
|
||
display: inline-block;
|
||
margin-right: 12rpx;
|
||
}
|
||
}
|
||
|
||
&::after {
|
||
display: block;
|
||
content: " ";
|
||
height: 1px;
|
||
background-image: linear-gradient(to right, #000 50%, transparent 20%);
|
||
background-size: 16rpx 100%;
|
||
opacity: 0.2;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods {
|
||
margin-bottom: 24rpx;
|
||
.single {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.body {
|
||
display: flex;
|
||
align-items: center;
|
||
.info {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.img_box {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 10rpx;
|
||
margin-right: 12rpx;
|
||
overflow: hidden;
|
||
}
|
||
.img {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
background-position: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
// background: #666;
|
||
}
|
||
}
|
||
.footer {
|
||
display: flex;
|
||
align-items: baseline;
|
||
line-height: 36rpx;
|
||
.text {
|
||
color: #666;
|
||
}
|
||
.prize_type {
|
||
margin-left: 14rpx;
|
||
}
|
||
.prize_num {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list {
|
||
margin-bottom: 24rpx;
|
||
.item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.img {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 10rpx;
|
||
background: #666;
|
||
}
|
||
.box {
|
||
flex: 1;
|
||
padding: 0 24rpx;
|
||
.desc {
|
||
display: flex;
|
||
color: #666;
|
||
padding-top: 8rpx;
|
||
.total {
|
||
margin-right: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.counter {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: baseline;
|
||
min-width: 156rpx;
|
||
.prize_type {
|
||
font-weight: bold;
|
||
padding-left: 12rpx;
|
||
}
|
||
.prize_num {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.result {
|
||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||
padding-top: 24rpx;
|
||
|
||
.cell {
|
||
color: #666666;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
|
||
.body {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.red {
|
||
color: #fe411b;
|
||
}
|
||
|
||
.green {
|
||
color: #62d910;
|
||
}
|
||
|
||
text {
|
||
color: #222;
|
||
}
|
||
.total {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
.count {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
.order_num {
|
||
display: flex;
|
||
align-items: center;
|
||
&::after {
|
||
display: block;
|
||
content: " ";
|
||
width: 1px;
|
||
height: 24rpx;
|
||
margin: 0 12rpx;
|
||
background: #ccc;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tool {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.header {
|
||
color: #666;
|
||
display: flex;
|
||
align-items: center;
|
||
.icon {
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
.body {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.btn {
|
||
width: 132rpx;
|
||
height: 48rpx;
|
||
line-height: 48rpx;
|
||
text-align: center;
|
||
border: 1px solid #666;
|
||
border-radius: 8rpx;
|
||
margin-left: 24rpx;
|
||
}
|
||
.btn_refund {
|
||
border-color: $base-color;
|
||
color: $base-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
.part-order-refund-popup {
|
||
::v-deep.u-popup__content {
|
||
border-top-left-radius: 16rpx;
|
||
border-top-right-radius: 16rpx;
|
||
}
|
||
|
||
::v-deep.u-fade-enter-to {
|
||
z-index: 10079 !important;
|
||
}
|
||
|
||
.part-order-refund-popup-content {
|
||
.part-order-refund-popup-title {
|
||
font-size: 32rpx;
|
||
padding: 40rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.affirm-popup-form {
|
||
padding: 20rpx 60rpx;
|
||
}
|
||
|
||
.radio-list {
|
||
.commodity-info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 28rpx;
|
||
|
||
.commodity-info-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.commodity-info-img {
|
||
margin-right: 20rpx;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup-btn-list {
|
||
display: flex;
|
||
margin: 50rpx;
|
||
|
||
.btn-item {
|
||
width: 46%;
|
||
height: 64rpx;
|
||
border-color: #909193;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.btn-item-2 {
|
||
background: $base-color;
|
||
color: #fff;
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.SfFlow-popup {
|
||
::v-deep.u-popup__content {
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
::v-deep.u-fade-enter-to {
|
||
z-index: 10076 !important;
|
||
}
|
||
|
||
.SfFlow-popup-content {
|
||
width: 600rpx;
|
||
|
||
.SfFlow-popup-title {
|
||
padding: 30rpx 0 20rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.SfFlow-content {
|
||
margin: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.affirm-popup {
|
||
::v-deep.u-popup__content {
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
::v-deep.u-fade-enter-to {
|
||
z-index: 10076 !important;
|
||
}
|
||
|
||
.affirm-popup-content {
|
||
width: 600rpx;
|
||
|
||
.affirm-popup-title {
|
||
padding: 60rpx 0 20rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.affirm-popup-tips {
|
||
padding: 0 32rpx;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.u-form {
|
||
padding: 0 60rpx;
|
||
}
|
||
|
||
.popup-btn-list {
|
||
display: flex;
|
||
margin: 50rpx;
|
||
|
||
.btn-item {
|
||
width: 46%;
|
||
height: 64rpx;
|
||
border-color: #909193;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.btn-item-2 {
|
||
background: $base-color;
|
||
color: #fff;
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.order_picking_box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16rpx 0;
|
||
margin: 0 8rpx;
|
||
border-bottom: 1px solid #f7f7f7;
|
||
|
||
.order_picking_text {
|
||
font-size: 26rpx;
|
||
color: #7f7f7f;
|
||
font-weight: 500;
|
||
flex: 1;
|
||
|
||
text {
|
||
color: red;
|
||
}
|
||
}
|
||
|
||
.picking_btn {
|
||
width: 34%;
|
||
height: 60rpx;
|
||
font-size: 24rpx;
|
||
|
||
color: #666666;
|
||
border-color: #666666;
|
||
}
|
||
}
|
||
|
||
::v-deep.u-toast {
|
||
.u-transition {
|
||
z-index: 12000;
|
||
}
|
||
}
|
||
}
|
||
</style>
|