charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat:微信支付&售后取消支付

Browse Source
This commit is contained in:
charles
2025-09-05 23:52:22 +08:00
parent 6477b2c006
commit 2bcf3ce800
7 changed files with 158 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/mine_package/mine_order/after-sales/refund-popu.vue
+9 -9
View File
@@ -44,7 +44,7 @@
</view>
<view class="card_list" @click="onSelectExpress">
<view class="list_left">选择快递名称</view>
<view>{{ cancelForm.expressName || "--" }}</view>
<view>{{ product.expressName || "--" }}</view>
</view>
<view class="card_list">
<view class="list_left">填快递单号</view>
@@ -53,7 +53,7 @@
type="text"
:disabled="status != 2"
placeholder="请填写快递单号"
v-model="cancelForm.expressNo"
v-model="product.expressNo"
/>
</view>
</view>
@@ -63,9 +63,9 @@
'bottom_box',
{
bottom_box_disabled:
status == 2 && (!cancelForm.expressNo || !cancelForm.expressName),
status == 2 && (!product.expressNo || !product.expressName),
},
{ bottom_box_quash: status == 1 || status == 3},
{ bottom_box_quash: status == 1 || status == 3 },
]"
>
<view class="button operate_but_2" @click="submit">
@@ -130,7 +130,7 @@ export default {
this.onCancelApply();
}
if (this.status == 2) {
if (!this.cancelForm.expressNo || !this.cancelForm.expressName) {
if (!this.product.expressNo || !this.product.expressName) {
this.$refs.uToastRef.show({
type: "error",
message: "请填写快递信息",
@@ -193,8 +193,8 @@ export default {
async onReturnGoods() {
const params = {
id: this.product.afterId,
expressNo: this.cancelForm.expressNo,
expressId: this.cancelForm.expressId,
expressNo: this.product.expressNo,
expressId: this.product.expressId,
};
console.log("寄回商品", params);
const { bizcode } = await returnGoodsFeedback(params);
@@ -220,8 +220,8 @@ export default {
onExpressConfirm(item) {
console.log(item);
const val = item.value[0];
this.cancelForm.expressName = val.name;
this.cancelForm.expressId = val.id;
this.product.expressName = val.name;
this.product.expressId = val.id;
this.expressShow = false;
},
onSelectExpress() {
pages/mine_package/mine_order/mine_order.vue
+130 -236
View File
@@ -1,93 +1,50 @@
<template>
<view class="order_warp">
<view class="order_header">
<up-image
src="/static/common/left.png"
width="20"
height="20"
bgColor="#f1f6ff00"
@click="jumpLeft"
></up-image>
<up-search
shape="round"
bgColor="#FFFFFFFF"
:showAction="false"
@blur="onBlur"
@search="searchFun"
v-model="search"
></up-search>
<up-image src="/static/common/left.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpLeft"></up-image>
<up-search shape="round" bgColor="#FFFFFFFF" :showAction="false" @blur="onBlur" @search="searchFun"
v-model="search"></up-search>
</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"
>
<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)"
>
<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" 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>
<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] }"
>
<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 &&
item.status === ORDER_TYPE.UNPAID
"
class="order_item_header_right order_right_due"
>
<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 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>
<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>
@@ -98,100 +55,63 @@
</view> -->
</view>
<view class="content_right">
<view class="content_right_total"
>￥{{ pItem.goodsAmount }}</view
>
<view class="content_right_quantity"
>x{{ pItem.buyNum }}</view
>
<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">
<view>
运单号：
<text v-if="pItem.expressName"
>（{{ pItem.expressName }}）</text
>
<text v-if="pItem.expressName">（{{ pItem.expressName }}）</text>
{{ pItem.expressNo }}
</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>
<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 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-else
>共{{ item.buyNum }}件,合计￥{{ item.sumAmount }}</view
>
<view class="collect_msg" v-else>共{{ item.buyNum }}件,合计￥{{ item.sumAmount }}</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_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_2"
v-if="
!isCheckSigne &&
index == 0 &&
item.status === ORDER_TYPE.SUCCEED
"
@click="downShow = true"
>去签署</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_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 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_1"
v-if="!item.isAfter && form.type !== MINE_ORDER_TYPE.AFTER_SALE"
@click="onSaleAfter(item)"
>
售后
<view :class="[
'operate_comm',
form.type === MINE_ORDER_TYPE.UNPAID
? 'operate_but_3'
: 'operate_but_1',
]" v-if="!item.isAfter && form.type !== MINE_ORDER_TYPE.AFTER_SALE" @click="onSaleAfter(item)">
{{ form.type === MINE_ORDER_TYPE.UNPAID ? "取消支付" : "售后" }}
</view>
<view
class="operate_comm operate_but_1"
v-if="form.type === MINE_ORDER_TYPE.AFTER_SALE"
@click="onAfterSaleDetail(item)"
>
<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" v-if="item.status === ORDER_TYPE.AFTER_SALE">查看售后</view> -->
@@ -202,12 +122,8 @@
</view>
</view>
<view v-else class="not_order_warp">
<up-image
src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/not_order.png"
width="80"
height="80"
bgColor="#f1f6ff00"
></up-image>
<up-image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/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>
@@ -218,12 +134,7 @@
<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>
<up-image src="/static/common/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
</view>
<view class="content_">
<view class="content_1">温馨提示</view>
@@ -236,45 +147,30 @@
</up-modal>
<!-- 申请售后 -->
<up-popup
v-model:show="afterShow"
class="after-sales-popup"
:customStyle="{
height: '1200rpx',
overflow: 'scroll',
position: 'relative',
paddingBottom: '80rpx',
}"
:round="10"
:closeOnClickOverlay="false"
:closeable="true"
:safeAreaInsetBottom="false"
@close="afterShow = false"
>
<up-popup v-model:show="afterShow" class="after-sales-popup" :customStyle="{
height: '1200rpx',
overflow: 'scroll',
position: 'relative',
paddingBottom: '80rpx',
}" :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"
>
<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="activeIndex = 1"
>退货退款</view
>
<view :class="['after-sales-tabs-item', { active: activeIndex === 1 }]" @click="activeIndex = 1">退货退款</view>
</view>
<view class="content_" v-if="activeIndex === 0">
@@ -282,50 +178,30 @@
<view class="content_2">如遇退/换货等问题，请联系客服处理</view>
<view class="content_3">
<view style="margin-left: 20rpx">
<up-image
src="/static/common/kf_dh.png"
width="40"
height="40"
bgColor="#f1f6ff00"
></up-image>
<up-image src="/static/common/kf_dh.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">
{{ 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>
<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="/static/common/kf_wx.png"
width="40"
height="40"
bgColor="#f1f6ff00"
></up-image>
<up-image src="/static/common/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>
<up-image src="/static/common/copy_c.png" width="14" height="14" bgColor="#f1f6ff00"
@click="copyMobile(WECHAT)"></up-image>
</view>
</view>
</view>
@@ -338,18 +214,9 @@
<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 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>
@@ -360,27 +227,20 @@
</view>
<!-- 确认退货退款 -->
<view v-if="salesServer == 2">
<refund-popup
:product="aftterSalesProduct"
:cancelForm="cancelForm"
@close="onCloseAfterShow"
/>
<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>
<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 class="sure_pay" :show="surePayShow" title="提示" showCancelButton @cancel="surePayShow = false" @confirm="cancelPay" confirmColor="#7934F6"
content="确定取消支付吗？"></u-modal>
</view>
</template>
@@ -401,6 +261,7 @@ import {
isSignContract,
getMiniProgramSignUrl,
afterSaleDetail,
cancelOrder
} from "@/api/order.js";
import dayjs from "dayjs";
import { formatDate1, copyData } from "@/utils/index.js";
@@ -460,6 +321,8 @@ export default {
title: "售后",
},
],
surePayShow: false,
cancelPayParams: {},
form: {
page: 1,
pageSize: 10,
@@ -508,11 +371,11 @@ export default {
onNextRefund() {
this.salesServer = 2;
this.aftterSalesProduct = {
...this.aftterSalesProduct,
...{ afterReason: this.cancelForm.afterReason },
this.aftterSalesProduct = {
...this.aftterSalesProduct,
...{ afterReason: this.cancelForm.afterReason },
}
},
onSaleAfterTab() {
@@ -521,19 +384,27 @@ export default {
// 售后
onSaleAfter(item) {
console.log("售后---1", item, this.form.type);
// 未售后
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 - 1;
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 - 1;
}
},
// 售后订单详情
async onAfterSaleDetail(item) {
if(item.status === 8){
this.$refs.uToastRef.show({
if (item.status === 8) {
this.$refs.uToastRef.show({
type: "success",
message: "订单已作废",
});
@@ -546,6 +417,7 @@ export default {
this.afterShow = true;
}
},
// 关闭售后申请
onCloseAfterShow(item) {
// 重新发起
@@ -561,6 +433,22 @@ export default {
this.afterShow = false;
},
// 取消支付
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;
},
@@ -1145,4 +1033,10 @@ export default {
font-size: 30rpx;
color: #ffffff;
}
.sure_pay{
::v-deep(.u-modal__content__text){
text-align: center;
}
}
</style>