Files
frontend-app/pages/mine_package/mine_order/mine_order.vue
T
2026-08-21 14:10:43 +08:00

1363 lines
40 KiB
Vue

<template>
<view class="order_warp" :style="mpWarpStyle">
<view class="order_header" :style="mpHeaderStyle">
<view class="back_btn" @click="jumpLeft">
<up-image src="/static/common/left.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
</view>
<view class="search_box">
<up-search shape="round" bgColor="#FFFFFFFF" :showAction="false" @blur="onBlur" @search="searchFun"
v-model="search"></up-search>
</view>
</view>
<view class="order_type_title">
<view :class="form.type === item.id
? 'order_type_title_item order_type_title_item_sel'
: 'order_type_title_item'
" v-for="(item, index) in orderTypeList" @click="checkType(item)" :key="index">
{{ item.title }}
</view>
</view>
<scroll-view scroll-y="true" @scrolltolower="loadMore" style="height: calc(100vh - 300rpx)">
<view v-if="orderList && orderList.length !== 0" class="order_list_warp">
<view class="order_item" v-for="(item, index) in orderList" :key="item.id">
<!-- 头部 -->
<view class="order_item_header">
<view class="order_item_header_left">
<up-image :src="item.shopLogo" width="22" height="22" bgColor="#f1f6ff00" shape="circle"></up-image>
<view class="order_product_title">{{ item.shopName }}</view>
</view>
<!-- 除开待付款 -->
<view v-if="
item.status !== ORDER_TYPE.UNPAID &&
form.type !== MINE_ORDER_TYPE.AFTER_SALE
" class="order_item_header_right" :style="{ color: ORDER_STATUS_CSS[item.status] }">
{{ getValue(ORDER_STATUS, item.status) }}
</view>
<!-- 售后显示订单状态 -->
<view v-if="
form.type == MINE_ORDER_TYPE.AFTER_SALE
" class="order_item_header_right" :style="{ color: ORDER_STATUS_CSS[item.status] }">
{{ getValue(AFTER_ORDER_STATUS, item.status) }}
</view>
<!-- 待付款 -->
<view v-if="
form.type !== MINE_ORDER_TYPE.AFTER_SALE &&
item.status === ORDER_TYPE.UNPAID
" class="order_item_header_right order_right_due">
<view class="order_right_due_msg">等待付款</view>
<view class="order_right_due_time">{{ formatDate1(item.expireTime) }}前</view>
</view>
</view>
<!-- 产品详情 -->
<view class="order_item_content">
<view v-for="pItem in item.items" :key="pItem.id">
<view class="content_item" @click="jumpOrderInfo(item)">
<up-image :src="pItem.mainGraph" width="80" height="80" bgColor="#f1f6ff00"></up-image>
<view class="content_info">
<view class="content_info_title">{{ pItem.title }}</view>
<view class="content_info_tag">{{ pItem.goodsSpece }}</view>
<!-- <view>
<text class="content_info_description" v-for="dItem in pItem.description">
{{dItem}}
</text>
</view> -->
</view>
<view class="content_right">
<view class="content_right_total">¥{{ pItem.goodsAmount }}</view>
<view class="content_right_quantity">x{{ pItem.buyNum }}</view>
</view>
</view>
<view class="content_item_yd" v-if="pItem.expressNo && pItem.expressData">
<view class="express-view text-overflow1" v-if="
Array.isArray(pItem.expressData?.logisticsTraceDetailList)
">
<u-icon name="email" color="#333" size="20"></u-icon>
<text class="text-24 text-gray text-space" style="margin-left: 10rpx">{{
pItem.expressData.logisticsStatusDesc }}</text>
<text class="text-24 text-fu text-space text-overflow1" style="margin-left: 10rpx">{{
Array.isArray(pItem.expressData?.logisticsTraceDetailList)
? pItem.expressData?.logisticsTraceDetailList[
pItem.expressData.logisticsTraceDetailList.length -
1
].desc
: ""
}}</text>
</view>
<!-- <view style="margin-left: 10rpx">
<up-image src="/static/common/copy.png" width="14" height="14" bgColor="#f1f6ff00"
@click="copyData(pItem.expressNo)"></up-image>
</view> -->
</view>
</view>
</view>
<!-- 汇总 -->
<view class="order_item_collect">
<!-- <view class="collect_msg collect_msg_s" v-if="this.form.type === MINE_ORDER_TYPE.NOT_RECEIVE">
<view class="content_item_yd_msg">(快递动态跟进请复制单号至[快递100官网] 查询)</view>
<view>共{{ item.buyNum }}件,合计¥{{ item.sumAmount }}</view>
</view> -->
<view class="collect_msg" v-if="item.buyDeductionValue">共{{ item.buyNum }}件,合计数字积分{{ item.buyDeductionValue
}}
+¥{{ item.sumAmount }}</view>
<view class="collect_msg" v-if="!item.buyDeductionValue">运费:¥{{ item.postage }},商品总价:¥{{ item.sumAmount }}
</view>
<view class="collect_msg" v-if="!item.buyDeductionValue">共{{ item.buyNum }}件,合计¥{{ item.sumAmount +
item.postage }}</view>
<view class="collect_operate">
<!-- <view class="operate_comm operate_but_1" v-if="item.status === ORDER_TYPE.UNSHIPPED" @click="checkCancel(true)">取消订单</view> -->
<view class="operate_comm operate_but_2" v-if="
item.status === ORDER_TYPE.UNPAID &&
form.type !== MINE_ORDER_TYPE.AFTER_SALE
" @click="jumpOrderInfo(item)">去付款</view>
<!-- <view class="operate_comm operate_but_1" v-if="item.status === ORDER_TYPE.COMPLETED">申请退款</view> -->
<view class="operate_comm operate_but_2" v-if="item.status === ORDER_TYPE.NOT_RECEIVE"
@click="confirmReceiptOk(item)">确认收货</view>
<view class="operate_comm operate_but_1" style="bordercolor: #7732ff" v-if="form.type == 3"
@click="onExpress(item.id, item.items.expressNo)">
<text class="text-zi">查看物流</text>
</view>
<view class="operate_comm operate_but_2" v-if="
!isCheckSigne &&
index == 0 &&
item.status === ORDER_TYPE.SUCCEED
" @click="downShow = true">去签署</view>
<!-- <view class="operate_comm operate_but_3" v-if="item.status === ORDER_TYPE.UNSHIPPED">提醒发货</view> -->
<view class="operate_comm operate_but_1" v-if="item.isAfter && form.type !== MINE_ORDER_TYPE.AFTER_SALE"
@click="onSaleAfterTab">
查看售后
</view>
<!-- 修改地址按钮 (待发货/待收货状态) -->
<view class="operate_comm operate_but_3" v-if="
([MINE_ORDER_TYPE.UNSHIPPED].includes(form.type) ||
[ORDER_TYPE.UNSHIPPED].includes(item.status)) && item.modifyShippingAddressStatus == 0
" @click="changeOrderAddress(item)">
修改地址
</view>
<view :class="[
'operate_comm',
'operate_but_3'
]" v-if="!item.isAfter && form.type === MINE_ORDER_TYPE.UNPAID && item.status !== 5"
@click="onSaleAfter(item)">
取消支付
</view>
<view :class="[
'operate_comm',
'operate_but_1'
]"
v-if="!item.isAfter && form.type !== MINE_ORDER_TYPE.UNPAID && form.type !== MINE_ORDER_TYPE.AFTER_SALE && item.status !== 5"
@click="onSaleAfter(item)">
申请售后
</view>
<view class="operate_comm operate_but_1" v-if="form.type === MINE_ORDER_TYPE.AFTER_SALE"
@click="onAfterSaleDetail(item)">
售后详情
</view>
<view class="operate_comm operate_but_1 operate_comm_evaluate" v-if="item.status == 4 && !item.isReview"
@click="evaluate(item)">评价</view>
<!-- <view class="operate_comm operate_but_1" v-if="item.status === ORDER_TYPE.AFTER_SALE">查看售后</view> -->
<view class="operate_comm operate_but_1 operate_comm_delete" v-if="
[
MINE_ORDER_TYPE.SUCCEED,
MINE_ORDER_TYPE.AFTER_SALE,
].includes(form.type)
" @click="deleteOrder(item)">删除</view>
<!-- <view class="operate_comm operate_but_3" v-if="[ORDER_TYPE.COMPLETED,ORDER_TYPE.CANCELED].includes(item.status)">再次购买</view> -->
</view>
</view>
</view>
</view>
<view v-else class="not_order_warp">
<up-image src="https://static.tbmall.xin/static/not_order.png" width="80" height="80"
bgColor="#f1f6ff00"></up-image>
<view class="not_order_msg_warp">暂无相关订单</view>
</view>
<view v-if="loading" style="text-align: center">加载中...</view>
</scroll-view>
<up-toast ref="uToastRef"></up-toast>
<!-- 暂未开放 -->
<up-modal :show="openShow" :showConfirmButton="false">
<view class="slot-content">
<view class="close_warp" @click="openShow = false">
<up-image src="/static/common/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
</view>
<view class="content_">
<view class="content_1">温馨提示</view>
<view class="content_2">暂未开放</view>
</view>
<view class="but_">
<view class="but_copy" @click="openShow = false">确定</view>
</view>
</view>
</up-modal>
<!-- 申请售后 -->
<up-popup v-model:show="afterShow" class="after-sales-popup" :customStyle="{
overflow: 'hidden',
position: 'relative',
}" :round="10" :closeOnClickOverlay="false" :closeable="true" :safeAreaInsetBottom="false"
@close="afterShow = false">
<view class="after-sales-title">
{{
salesServer === 1
? "申请售后"
: salesServer === 2
? "确认退货/退款信息"
: "退货/退款进度"
}}
</view>
<!-- 申请售后 -->
<view class="slot-content" v-if="salesServer == 1">
<view class="after-sales-tabs">
<view :class="['after-sales-tabs-item', { active: activeIndex === 0 }]" @click="activeIndex = 0">
联系售后
<text class="after-sales-tabs-text">荐</text>
</view>
<view :class="['after-sales-tabs-item', { active: activeIndex === 1 }]" @click="toApplyRefundPage">退货/退款
</view>
</view>
<view class="content_" v-if="activeIndex === 0">
<view class="content_1">售后联系方式</view>
<view class="content_2">如遇退/换货等问题,请联系客服处理</view>
<view class="content_3">
<view style="margin-left: 20rpx">
<up-image src="/pages/rwa_package/static/kf_dh.png" width="40" height="40" bgColor="#f1f6ff00"></up-image>
</view>
<view class="content_info" @click="onKefu">
<view class="content_info_title" style="margin-top: 20rpx">在线客服</view>
<!-- <view class="content_info_mobile">
{{ PHONE_NUMBER }}
<view style="margin-left: 20rpx">
<up-image src="/static/common/copy_c.png" width="14" height="14" bgColor="#f1f6ff00"
@click="copyMobile(PHONE_NUMBER)"></up-image>
</view>
</view> -->
</view>
</view>
<!-- <view class="content_3">
<view style="margin-left: 20rpx">
<up-image src="/pages/rwa_package/static/kf_wx.png" width="40" height="40" bgColor="#f1f6ff00"></up-image>
</view>
<view class="content_info">
<view class="content_info_title">客服微信</view>
<view class="content_info_mobile">
{{ WECHAT }}
<view style="margin-left: 20rpx">
<up-image src="/static/common/copy_c.png" width="14" height="14" bgColor="#f1f6ff00"
@click="copyMobile(WECHAT)"></up-image>
</view>
</view>
</view>
</view> -->
</view>
<!-- 退货退款 -->
<!-- <after-sales v-if="activeIndex === 1" @nextNum="getNextNum" /> -->
<view v-if="activeIndex === 1">
<view class="cancel_show_warp">
<view class="cancel_show_reason_warp">
<view class="reason_title">选择退货原因 </view>
<up-radio-group v-model="cancelForm.afterReason" placement="column">
<up-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in RETURN_REASON" :key="index"
:label="item.name" :name="item.id" activeColor="#7934F6"></up-radio>
</up-radio-group>
</view>
</view>
<view class="cancel_show_but">
<view class="cancel_show_button" @click="onNextRefund">下一步</view>
</view>
</view>
</view>
<!-- 确认退货退款 -->
<view v-if="salesServer == 2">
<refund-popup :product="aftterSalesProduct" :cancelForm="cancelForm" @close="onCloseAfterShow" />
</view>
</up-popup>
<!-- 腾讯电子签H5 → 集成到UniApp -->
<web-view v-if="signUrl" :src="signUrl" @message="handleMessage"></web-view>
<u-modal :show="tipsShow" :showCancelButton="true" confirmText="去认证" @cancel="onTipsCancel" @confirm="onConfirm"
confirmColor="#7934F6" title="提示" content="签署合同需要进行实名认证,请先完成实名认证"></u-modal>
<DownPopup :show="downShow" @ok="onSignContract" @cancel="onCancel" />
<u-modal :show="deleteShow" title="提示" showCancelButton @cancel="deleteShow = false" @confirm="againDeleteOrder"
content="确定删除吗?"></u-modal>
<u-modal class="sure_pay" :show="surePayShow" title="提示" showCancelButton @cancel="surePayShow = false"
@confirm="cancelPay" confirmColor="#7934F6" content="确定取消支付吗?"></u-modal>
<qiaobao-assistant page-key="pages/mine_package/mine_order/mine_order" title="我的订单" />
</view>
</template>
<script>
import {
MINE_ORDER_TYPE,
ORDER_TYPE,
ORDER_STATUS,
AFTER_ORDER_STATUS,
getValue,
} from "@/utils/enumUtils.js";
import { ORDER_STATUS_CSS } from "@/pages/mine_package/utils/enumCssUtils.js";
import DownPopup from "@/components/common/down-popup.vue";
import {
getOrderList,
confirmReceipt,
getSignUrl,
signContract,
isSignContract,
getMiniProgramSignUrl,
afterSaleDetail,
cancelOrder,
orderLogistics,
deleteOrderQuery,
updateOrderAddress,
applyUpdateAddress
} from "@/api/order.js";
import dayjs from "dayjs";
import { formatDate1, copyData } from "@/utils/index.js";
import { getUserInfo } from "@/api/auth.js";
import { CUSTOMER_SERVICE_PHONE_NUMBER } from "@/utils/config.js";
import afterSales from "./after-sales/index";
import refundPopup from "@/pages/mine_package/mine_order/after-sales/refund-popup.vue";
import { RETURN_REASON_LIST } from "@/pages/mine_package/mine_order/emun/index.js";
export default {
components: { DownPopup, afterSales, refundPopup },
created() {
uni.$on('selectAddress', this.onSelectAddressForOrder);
},
beforeUnmount() {
uni.$off('selectAddress', this.onSelectAddressForOrder);
},
beforeDestroy() {
uni.$off('selectAddress', this.onSelectAddressForOrder);
},
computed: {
MINE_ORDER_TYPE() {
return MINE_ORDER_TYPE;
},
ORDER_STATUS() {
return ORDER_STATUS;
},
ORDER_STATUS_CSS() {
return ORDER_STATUS_CSS;
},
ORDER_TYPE() {
return ORDER_TYPE;
},
PHONE_NUMBER() {
return CUSTOMER_SERVICE_PHONE_NUMBER;
},
AFTER_ORDER_STATUS() {
return AFTER_ORDER_STATUS
},
// WECHAT() {
// return CLOUD_SERVICE_WECHAT;
// },
RETURN_REASON() {
return RETURN_REASON_LIST;
},
},
data() {
return {
changingOrder: null,
salesServer: 1, //为1展示申请售后 2:选择退货原因 3.退货退款申请,4.退款申请失败
orderTypeList: [
{
id: MINE_ORDER_TYPE.UNPAID,
title: "待支付",
},
{
id: MINE_ORDER_TYPE.UNSHIPPED,
title: "待发货",
},
{
id: MINE_ORDER_TYPE.NOT_RECEIVE,
title: "待收货",
},
{
id: MINE_ORDER_TYPE.SUCCEED,
title: "已完成",
},
{
id: MINE_ORDER_TYPE.AFTER_SALE,
title: "售后",
},
],
surePayShow: false,
cancelPayParams: {},
form: {
page: 1,
pageSize: 10,
type: MINE_ORDER_TYPE.UNPAID, // 选中的类型
},
hasMore: true, // 是否有更多数据可以加载
orderList: [],
cancelShow: false, // 取消订单
cancelForm: {
afterReason: null,
remark: null,
},
loading: false, // 加载状态标志
openShow: false,
afterShow: false, // 售后申请
isCheckSigne: false,
flowId: null,
signUrl: null,
downShow: false,
tipsShow: false,
selectItem: null,
userInfo: null,
search: "",
activeIndex: 0,
aftterSalesProduct: {}, //售后商品信息
deleteShow: false,
deleteInfo: {},
mpWarpStyle: {},
mpHeaderStyle: {}
};
},
onLoad(options) {
// #ifdef MP-WEIXIN || MP
this.initMPHeader();
// #endif
const type = options.type;
this.form.type = type ? parseInt(type, 10) : MINE_ORDER_TYPE.UNPAID;
this.$nextTick(() => {
this.loadData();
});
// 待收货判断是否签署
if (
this.form.type === MINE_ORDER_TYPE.NOT_RECEIVE ||
this.form.type === MINE_ORDER_TYPE.SUCCEED
) {
this.checkSigned();
}
this.userinfo();
},
methods: {
initMPHeader() {
// #ifdef MP-WEIXIN || MP
try {
const menuButton = uni.getMenuButtonBoundingClientRect();
const systemInfo = uni.getSystemInfoSync();
if (menuButton && menuButton.top && menuButton.top > 0) {
const menuButtonHeight = menuButton.height || 32;
const menuButtonTop = menuButton.top;
const menuButtonLeft = menuButton.left;
const windowWidth = systemInfo.windowWidth;
this.mpWarpStyle = {
paddingTop: `${menuButtonTop}px`
};
this.mpHeaderStyle = {
height: `${menuButtonHeight}px`,
paddingRight: `${windowWidth - menuButtonLeft + 10}px`,
display: 'flex',
alignItems: 'center'
};
}
} catch (e) {
console.error("initMPHeader error:", e);
}
// #endif
},
dayjs,
getValue,
formatDate1,
copyData,
onExpress(itemId) {
console.log("onExpress", itemId);
// let expressId =
uni.navigateTo({
url: `/pages/rwa_package/express/express?id=${itemId}`,
});
},
onNextRefund() {
// 退款申请失败
this.salesServer = 2;
if (this.aftterSalesProduct.status == 8) {
this.salesServer = 4;
}
this.aftterSalesProduct = {
...this.aftterSalesProduct,
...{ afterReason: this.cancelForm.afterReason },
};
},
onSaleAfterTab() {
this.checkType({ id: MINE_ORDER_TYPE.AFTER_SALE, title: "售后" });
},
onKefu() {
uni.navigateTo({
url: "/pages/rwa_package/kefu/kefu?scene=order",
});
},
// 修改订单地址:跳转至 mine_address 页面 (moduleType=2)
changeOrderAddress(item) {
this.changingOrder = item;
const originalId = item.addressId || item.address?.id || (item.address && item.address.id) || '';
let url = `/pages/mine_package/mine_address/mine_address?moduleType=2`;
if (originalId) {
url += `&originalId=${originalId}`;
}
if (item.address) {
try {
url += `&originalAddress=${encodeURIComponent(JSON.stringify(item.address))}`;
} catch (e) { }
}
uni.navigateTo({ url });
},
// 选择新地址后的回调处理,选择后直接返回此页面并触发接口修改
async onSelectAddressForOrder(addressObj) {
if (!this.changingOrder || !addressObj) return;
const order = this.changingOrder;
this.changingOrder = null;
try {
const params = {
orderId: order.id, // 订单ID
addrId: addressObj.id // 选中地址ID
};
console.log("选择新地址后的回调处理,选择后直接返回此页面并触发接口修改", params)
const res = await applyUpdateAddress(params);
if (res && res.bizcode === 100) {
if (this.$refs.uToastRef) {
this.$refs.uToastRef.show({
type: 'success',
message: '申请修改地址已提交,请等待'
});
} else {
uni.showToast({
title: '申请修改地址已提交,请等待',
icon: 'success'
});
}
}
} catch (e) {
console.error('updateOrderAddress error:', e);
}
this.form.page = 1;
this.loadData();
},
// 售后
onSaleAfter(item) {
console.log("售后---1", item, this.form.type);
if (this.form.type === MINE_ORDER_TYPE.UNPAID) {
// 取消支付
this.cancelPayParams = { orderId: item.id };
this.surePayShow = true;
} else {
// 未售后
this.cancelForm.afterReason = "";
this.salesServer = 1;
this.activeIndex = 0;
this.aftterSalesProduct = item;
this.afterShow = true;
this.aftterSalesProduct.status = 9;
this.aftterSalesProduct.afterType =
this.form.type == MINE_ORDER_TYPE.UNSHIPPED ? 1 : 2;
}
},
toApplyRefundPage() {
this.activeIndex = 1;
this.afterShow = false;
const orderId = this.aftterSalesProduct ? this.aftterSalesProduct.id : '';
uni.navigateTo({
url: `/pages/mine_package/apply_refund/apply_refund?id=${orderId}&orderData=${encodeURIComponent(JSON.stringify(this.aftterSalesProduct || {}))}`
});
},
// 售后订单详情
async onAfterSaleDetail(item) {
const { bizcode, data } = await afterSaleDetail({ id: item.afterId });
if (bizcode == 100) {
this.aftterSalesProduct = { ...data, ...{ afterId: item.afterId, status: item.status } };
console.log("售后订单详情", this.aftterSalesProduct);
if (this.aftterSalesProduct.afterType == 2 && this.aftterSalesProduct.status == 1) {
uni.navigateTo({
url: `/pages/mine_package/fill_express/fill_express?afterData=${encodeURIComponent(JSON.stringify(this.aftterSalesProduct))}`
});
return;
}
this.salesServer = 2;
this.afterShow = true;
}
},
// 关闭售后申请
onCloseAfterShow(item) {
// 重新发起
if (item) {
this.salesServer = 1;
this.activeIndex = 0;
return;
}
console.log("关闭售后申请");
this.form.page = 1;
this.orderList = [];
this.loadData();
this.afterShow = false;
},
// 删除
deleteOrder(item) {
console.log("删除", item, this.form.type);
this.deleteShow = true;
this.deleteInfo = item;
},
// 评价
evaluate(item) {
console.log('订单id', item);
// return
uni.navigateTo({
url: "/pages/order_package/evaluate/evaluate?id=" + item.id + "&title=" + item.items[0].title + "&mainGraph=" + item.items[0].mainGraph + "&goodsSpece=" + item.items[0].goodsSpece + "&goodsId=" + item.items[0].goodsId,
});
},
async againDeleteOrder() {
let params;
if (this.form.type === 4 && (this.deleteInfo.status === 4 || this.deleteInfo.status === 5 || this.deleteInfo.status === 6 || this.deleteInfo.status === 7)) {
params = {
orderId: this.deleteInfo.id,
type: 1
}
}
if (this.form.type === 5 && this.deleteInfo.status === 7) {
params = {
orderId: this.deleteInfo.afterId,
type: 2
}
}
console.log("删除-1", params);
if (!params.orderId) {
return;
}
const res = await deleteOrderQuery(params);
if (res.bizcode == 100) {
this.$refs.uToastRef.show({
type: "success",
message: "删除成功",
});
this.deleteShow = false;
this.form.page = 1;
this.orderList = [];
this.loadData();
}
},
// 取消支付
cancelPay() {
cancelOrder(this.cancelPayParams).then((res) => {
if (res.bizcode == 100) {
this.$refs.uToastRef.show({
type: "success",
message: "取消成功",
});
this.surePayShow = false;
this.form.page = 1;
this.orderList = [];
this.loadData();
}
});
},
onTipsCancel() {
this.tipsShow = false;
},
userinfo() {
getUserInfo().then((res) => {
if (res.bizcode == 100) {
this.userInfo = res.data;
}
console.log("res", res);
});
},
onCancel() {
this.downShow = false;
},
onConfirm() {
this.onTipsCancel();
uni.navigateTo({
url: "/pages/mine_package/mine_authentication/mine_authentication",
});
},
copyMobile(mobile) {
copyData(mobile);
this.afterShow = false;
},
jumpLeft() {
uni.switchTab({
url: "/pages/mine/mine",
});
},
onBlur() {
this.loadData(1);
},
searchFun(val) {
console.log("searchFun", val);
},
checkType(item) {
console.log("checkType---", item);
this.form.page = 1;
this.form.type = item.id;
this.orderList = [];
// 待收货判断是否签署
if (
this.form.type === MINE_ORDER_TYPE.NOT_RECEIVE ||
this.form.type === MINE_ORDER_TYPE.SUCCEED
) {
this.checkSigned();
}
// if (item.id !== MINE_ORDER_TYPE.AFTER_SALE) {
// this.loadData();
// } else {
// this.openShow = true; // 未开发的弹框
// }
this.loadData();
},
jumpOrderInfo(item) {
uni.navigateTo({
url:
"/pages/mine_package/mine_order_info/mine_order_info?id=" + item.id,
});
},
// 处理到期时间
handleExpressTime(expressTime) {
let resultM = 0;
if (!expressTime || expressTime === 0) {
return resultM;
}
const currentTimestamp = dayjs().unix();
const time = currentTimestamp - expressTime;
resultM = dayjs(time).format("YYYY-MM-DD HH:MM:SS"); // 获取时分格式的字符串
// 如果需要将时分转换为分钟数(例如,'12:34'转换为754分钟),则需要额外计算:
// const [hours, minutes] = formattedTime.split(':').map(Number); // 分解小时和分钟为数字
// resultM = hours * 60 + minutes; // 计算总分钟数
// console.log(resultM); // 输出总分钟数,例如754
return resultM;
},
// 加载数据的方法
async loadData(type = null) {
console.log("加载数据的方法", type);
if (this.loading) return; // 如果正在加载,则不重复加载
this.loading = true; // 设置加载状态为true
if (type) {
this.form.page = 1;
this.orderList = [];
}
try {
// 模拟异步获取数据,实际应用中应该替换为你的数据获取逻辑,例如API调用
const newData = await this.fetchData(
this.form.page,
this.form.pageSize
);
if (newData.entitys && newData.entitys.length !== 0) {
this.orderList = [...this.orderList, ...newData.entitys]; // 将新数据添加到列表中
this.form.page++; // 页码加1
console.log("this.orderList", this.orderList);
}
} catch (error) {
console.error("加载数据失败:", error);
} finally {
this.$forceUpdate();
this.loading = false; // 设置加载状态为false
}
},
// 模拟获取数据的方法,实际应用中应该替换为你的数据获取逻辑,例如从服务器获取数据
async fetchData(page, pageSize) {
const params = {
...this.form,
page,
pageSize,
};
if (this.search) {
params["search"] = this.search;
}
const data = await getOrderList(params);
if (data && data.bizcode === 100) {
for (let i = 0; i < data.data.entitys.length; i++) {
for (let j = 0; j < data.data.entitys[i].items.length; j++) {
if (data.data.entitys[i].items[j].expressNo) {
data.data.entitys[i].items[j].expressData =
await this.getOrderLogistics(
data.data.entitys[i].items[j].expressNo
);
}
}
}
// data.data.entitys.forEach(item=>{
// if(item.items.length){
// item.items.forEach(async (Iitem)=>{
// if(Iitem.expressNo){
// Iitem.expressData = await this.getOrderLogistics(Iitem.expressNo);
// }
// })
// }
// })
return data.data;
} else {
return "";
}
},
async getOrderLogistics(id) {
const params = {
mailNo: id,
};
const data = await orderLogistics(params);
if (data.bizcode == 100) {
return data.data;
} else {
return [];
}
},
// 当滚动到底部时触发的方法
loadMore() {
this.loadData(); // 加载更多数据
},
checkCancel(status) {
this.cancelShow = status;
if (!status) {
this.cancelForm = {
reason: null,
remark: null,
};
}
},
/**
* 确认收货
*/
confirmReceiptOk(item) {
const then = this;
uni.showModal({
title: "提示",
content: "是否确认收货?",
success: function (res) {
if (res.confirm) {
then.confirmReceiptFun(item);
}
},
});
},
async confirmReceiptFun(item) {
const params = {
id: item.id,
};
const resp = await confirmReceipt(params);
if (resp && resp.bizcode === 100) {
this.orderList = [];
this.form.page = 1;
this.loadData();
if (!this.isCheckSigne) {
this.selectItem = item;
this.downShow = true;
return;
}
}
},
// 判断是否已经签名
async checkSigned() {
const { bizcode, data } = await isSignContract();
if (bizcode === 100) {
this.isCheckSigne = data;
}
},
// 发起合同签章
async onSignContract() {
if (this.userInfo.certStatus == 0) {
this.downShow = false;
this.tipsShow = true;
return;
} else if (this.userInfo.certStatus == 1) {
this.downShow = false;
this.$refs.uToastRef.show({
type: "success",
message: "请耐心等待审核通过",
});
return;
}
const { bizcode, data } = await signContract();
if (bizcode === 100) {
this.flowId = data.flowId;
console.log("明天查找第一步", this.flowId);
if (this.flowId)
// #ifdef APP-PLUS || WEB
this.onGetSignUrl(this.flowId);
// #endif
// #ifdef MP-WEIXIN
// 小程序
uni.showModal({
title: "请复制链接前往APP签署合同?",
content: `APP下载地址:https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/document/android/trustbridge.apk`,
confirmText: "复制链接",
success: function (res) {
if (res.confirm) {
copyData("https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/document/android/trustbridge.apk");
}
},
});
// this.onGetMiniProgramSignUrl(this.flowId);
// #endif
}
},
// 获取H5签署链接
async onGetSignUrl(flowId) {
const params = {
// 需要的参数
flowId: flowId,
};
const { bizcode, data } = await getSignUrl(params);
if (bizcode === 100) {
this.downShow = false;
this.signUrl = data.flowApproverUrlInfos[0].longUrl;
} else {
this.$refs.uToastRef.show({
type: "error",
message: "获取签署链接失败,请稍后再试",
});
return null;
}
},
// 获取跳转至腾讯电子签小程序的签署链接
async onGetMiniProgramSignUrl(flowId) {
const params = {
flowId: flowId,
// endPoint: "APP",
};
const { bizcode, data } = await getMiniProgramSignUrl(params);
console.log("明天查找第二步", data);
if (bizcode === 100) {
console.log("跳转至腾讯电子签小程序的签署链接", data);
this.openTencentESign(data.schemeUrl);
} else {
this.$refs.uToastRef.show({
type: "error",
message: "获取签署链接失败,请稍后再试",
});
return null;
}
},
// 电子签的回调地址
handleMessage(e) {
const data = e.detail;
console.log("电子签的回调地址", e);
},
// 小程序签名
openTencentESign(signPath) {
console.log("跳转至腾讯电子签小程序的签署链接-1", signPath);
// 这个链接需要后端调用腾讯电子签 API 获取
uni.navigateToMiniProgram({
appId: "wxa023b292fd19d41d", // 腾讯电子签官方小程序的 appId
path: "pages/guide?id=" + this.flowId,
// path: signPath, // 跳转到的页面路径 + 参数
extraData: {}, // 如果需要传额外参数
envVersion: "release", // 小程序版本 release / trial / develop
success(res) {
console.log("跳转成功", res);
},
fail(err) {
console.error("跳转失败", err);
},
});
},
},
};
</script>
<style lang="scss" scoped>
.express-view {
width: 100%;
height: 52rpx;
background-color: #f5f5f5;
display: flex;
flex-direction: row;
align-items: center;
border-radius: 4rpx;
line-height: 1.6;
}
.after-sales-tabs-text {
width: 36rpx;
height: 30rpx;
text-align: center;
line-height: 30rpx;
background: #7934f6;
border-radius: 4rpx;
font-size: 20rpx;
color: #ffffff;
margin-left: 12rpx;
}
.after-sales-popup {
max-height: 80% !important;
}
.after-sales-title {
font-size: 28rpx;
color: #71737c;
text-align: center;
padding: 28rpx 32rpx;
}
.after-sales-title .close_but {
color: #000;
font-weight: 800;
}
.slot-content {
width: calc(100% - 64rpx);
padding: 0 32rpx;
}
.after-sales-tabs {
width: calc(100% - 64rpx);
height: 80rpx;
background: #f5f5f7;
border-radius: 8rpx;
display: flex;
align-items: center;
padding: 0 8rpx;
}
.after-sales-tabs-item {
width: 50%;
height: 64rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #666666;
}
.after-sales-tabs-item.active {
color: #000000;
border-radius: 8rpx;
background-color: #fff;
}
.content_ {
margin-top: 20rpx;
}
.content_ .content_1,
.content_ .content_2 {
text-align: left;
margin-top: 20rpx;
}
.content_ .content_3 {
width: calc(100% - 32rpx);
height: 132rpx;
box-shadow: 0px 4rpx 12rpx 0px rgba(215, 215, 215, 0.5);
border-radius: 16rpx;
box-sizing: border-box;
}
.order_warp {
height: calc(100vh - env(safe-area-inset-bottom) - 130rpx);
background-color: $app-bj;
padding: 100rpx 30rpx 30rpx;
/* #ifdef MP-WEIXIN */
padding-top: 20rpx;
/* #endif */
overflow-y: hidden;
position: relative;
}
.order_header {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
box-sizing: border-box;
.back_btn {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin-right: 20rpx;
flex-shrink: 0;
}
.search_box {
flex: 1;
display: flex;
align-items: center;
height: 100%;
}
}
.order_type_title {
display: flex;
margin-top: 30rpx;
align-items: center;
}
.order_type_title_item {
margin-right: 40rpx;
font-weight: 500;
font-size: 30rpx;
color: #222222;
}
.order_type_title_item_sel {
font-weight: 800;
font-size: 36rpx;
color: $app-bt-bj;
}
.order_list_warp {
// height: calc(100vh - 270rpx);
// overflow-y: auto;
}
.order_item {
background: #ffffff;
border-radius: 20rpx;
padding: 30rpx 20rpx;
margin-top: 20rpx;
}
.order_item_header {
display: flex;
justify-content: space-between;
align-items: center;
}
.order_product_title {
font-weight: bold;
font-size: 28rpx;
color: #1a1a1a;
margin-left: 10rpx;
}
.order_item_header_left {
display: flex;
align-items: center;
}
.order_item_header_right {
font-weight: 500;
font-size: 22rpx;
}
.order_right_due {
display: flex;
background: #fff9f2;
border-radius: 19rpx 22rpx 22rpx 19rpx;
}
.order_right_due_msg {
background: $app-bt-bj;
border-radius: 22rpx 0rpx 12rpx 22rpx;
color: #ffffff;
padding: 10rpx 20rpx;
}
.order_right_due_time {
font-weight: bold;
font-size: 24rpx;
color: $app-bt-bj;
padding: 10rpx 20rpx;
}
.order_item_collect {
margin-top: 20rpx;
}
.collect_msg {
font-weight: 500;
font-size: 24rpx;
color: #666666;
text-align: right;
}
.collect_msg_s {
display: flex;
justify-content: space-between;
}
.cancel_show_warp {
padding: 20rpx;
}
.cancel_show_title_warp {
position: relative;
font-weight: bold;
font-size: 36rpx;
color: #222222;
line-height: 48rpx;
text-align: center;
}
.cancel_show_title_icon {
position: absolute;
right: 14rpx;
top: 6rpx;
}
.cancel_show_msg_warp {
background: #f8f8f8;
padding: 30rpx;
font-weight: 500;
font-size: 26rpx;
color: #222222;
line-height: 48rpx;
margin-top: 20rpx;
}
.cancel_show_reason_warp {
margin-top: 20rpx;
}
.reason_title {
font-weight: bold;
font-size: 32rpx;
color: #222222;
line-height: 36rpx;
margin-bottom: 20rpx;
}
.but_border_warp {
border: 1rpx solid #eeeeee94;
margin: 30rpx 0;
}
.cancel_show_but {
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 98rpx;
background: transparent;
z-index: 100;
box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.06);
}
.cancel_show_button {
position: initial;
width: 94%;
background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
border-radius: 8rpx;
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 28rpx;
color: #ffffff;
}
.content_info_title {
width: 370rpx;
}
.content_item_yd {
font-weight: bold;
font-size: 24rpx;
display: flex;
align-items: center;
}
.content_item_yd_msg {
font-weight: bold;
font-size: 18rpx;
}
.content_2 {
font-size: 26rpx;
color: rgba(0, 0, 0, 0.4);
margin-bottom: 40rpx;
}
.content_3 {
display: flex;
background: #ffffff;
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.06);
border-radius: 12rpx;
}
.content_info {
display: grid;
margin-left: 20rpx;
text-align: left;
}
.content_info_title {
font-weight: 600;
font-size: 26rpx;
color: rgba(0, 0, 0, 0.9);
line-height: 38rpx;
}
.content_info_mobile {
font-size: 30rpx;
color: rgba(0, 0, 0, 0.4);
display: flex;
}
.but_ {
display: flex;
justify-content: center;
margin-top: 40rpx;
}
.but_close {
background: #f24a00;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(242, 74, 0, 0.5);
border-radius: 41rpx;
width: 60%;
padding: 20rpx 0;
font-size: 30rpx;
color: #ffffff;
}
.operate_comm_delete {
color: #f24a00;
border: 1rpx solid #f24a00;
}
.operate_comm_evaluate {
color: #333333;
border: 1rpx solid #8b8b8b;
}
.sure_pay {
::v-deep(.u-modal__content__text) {
text-align: center;
}
}
</style>