wangxiaowei/jianbing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善订单

Browse Source
This commit is contained in:
wangxiaowei
2025-05-16 15:15:36 +08:00
parent 2b0d3c9c20
commit 7ae003c61f
8 changed files with 433 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
bundle/pages/apply_refund/apply_refund.vue Normal file
View File

@ -0,0 +1,345 @@
<template>
<view>
<!-- pages/apply_refund/apply_refund.wxml -->
<view class="apply-refund">
<view class="goods">
<view class="row">
<u-image width="160rpx" height="160rpx" radius="6rpx" lazy-load :src="goods.image" />
<view class="goods-info">
<view class="nr line2">{{ goods.goods_name }}</view>
<view class="xs muted mt10">{{ goods.spec_value }}</view>
</view>
</view>
</view>
<view class="opt-box mt20" :hidden="hiddenOpt">
<view class="opt-item row-between border-line" @tap="onlyRefund">
<view>
<view class="lg normal">仅退款</view>
<view class="muted xs mt10">未收到货，与卖家协商同意无需退货只需退款</view>
</view>
<image style="width: 28rpx; height: 28rpx" src="/static/images/arrow_right.png"></image>
</view>
<view class="opt-item row-between" @tap="allRefunds">
<view>
<view class="lg normal">退货退款</view>
<view class="muted xs mt10">已收到货，需退还收到的实物</view>
</view>
<image style="width: 28rpx; height: 28rpx" src="/static/images/arrow_right.png"></image>
</view>
</view>
<view :hidden="!hiddenOpt">
<view class="refund-info row-between mt20">
<view class="lable">数量</view>
<view>{{ goods.goods_num }}</view>
</view>
<view class="refund-info row-between">
<view class="lable">退款金额</view>
<price-format color="#FF2C3C" :price="parseFloat(goods.total_pay_price) +
parseFloat(goods.refund_express_money)
" showSubscript="true" :subscriptSize="28" :firstSize="28" :secondSize="28" />
</view>
<view class="refund-info row-between" @tap="showPopup">
<view class="lable">退款原因</view>
<view class="row">
<text :class="'nr ' + (reasonIndex == -1 ? 'muted' : 'normal')">{{
reasonIndex == -1 ? "请选择" : reason[reasonIndex]
}}</text>
<image class="icon-sm ml20" src="/static/images/arrow_right.png"></image>
</view>
</view>
<view class="refund-info row">
<view class="label">备注说明</view>
<textarea v-show="!showPop" class="bg-body" placeholder="请描述申请售后的具体原因，100字以内" v-model="remark"
name="textarea"></textarea>
</view>
<view class="upload bg-white">
<view class="title row-between">
<view>上传凭证</view>
<view class="muted">（选填，最多可上传1张）</view>
</view>
<uploader :deletable="true" preview-size="160rpx" :file-list="fileList" @after-read="afterRead"
@delete="deleteImage" image-fit="aspectFill" />
</view>
<button class="btn br60" type="primary" size="lg" @tap="onSubmit">
申请退款
</button>
</view>
</view>
<u-popup id="popup" v-model="showPop" mode="bottom">
<view class="pop-container bg-white">
<view class="pop-header row-center md normal"> 退款原因 </view>
<scroll-view style="height: 800rpx" :scroll-y="true">
<view class="reason-box mt20">
<radio-group @change="radioChange">
<label v-for="(item, index) in reason" :key="index" class="reason-item row-between"
@tap="hidePopup">
<view class="reason-desc nr">
{{ item }}
</view>
<radio :value="index"></radio>
</label>
</radio-group>
</view>
</scroll-view>
</view>
</u-popup>
</view>
</template>
<script>
import { refundOptType } from "@/utils/type";
import { baseURL } from "@/config/app";
import { getGoodsInfo, applyAfterSale, applyAgain } from "@/api/user";
import { uploadFile, trottle } from "@/utils/tools.js";
export default {
data() {
return {
hiddenOpt: false,
optTyle: refundOptType.ONLY_REFUND,
goods: {},
reason: [],
showPop: false,
reasonIndex: -1,
fileList: [],
remark: "",
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let { order_id, item_id, afterSaleId } = options;
this.orderId = order_id;
this.itemId = item_id;
this.afterSaleId = afterSaleId;
this.getGoodsInfoFun();
this.onSubmit = trottle(this.onSubmit, 1000, this);
},
methods: {
showPopup() {
this.showPop = true;
},
radioChange(e) {
this.reasonIndex = e.detail.value;
},
hidePopup() {
this.showPop = false;
},
onlyRefund: function () {
this.optTyle = refundOptType.ONLY_REFUND;
this.hiddenOpt = true;
},
allRefunds() {
this.optTyle = refundOptType.REFUNDS;
this.hiddenOpt = true;
},
onSubmit() {
console.log(this.afterSaleId);
if (this.afterSaleId) {
this.applyAgainFun();
} else {
this.applyAfterSaleFun();
}
},
// 重新申请
applyAgainFun() {
let { reason, reasonIndex, optTyle, remark, fileList } = this;
if (!reason[reasonIndex]) {
return this.$toast({
title: "请选择退款原因",
});
}
const data = {
id: this.afterSaleId,
reason: reason[reasonIndex],
refund_type: optTyle,
remark: remark,
img: fileList.length <= 0 ? "" : fileList[0].base_url,
};
applyAgain(data).then((res) => {
if (res.code == 1) {
uni.$emit("refreshsale");
this.$toast(
{
title: res.msg,
},
{
tab: 5,
url:
"/bundle/pages/after_sales_detail/after_sales_detail?afterSaleId=" +
res.data.after_sale_id,
}
);
}
});
},
onInput(e) {
this.setData({
remark: e.detail.value,
});
this.remark = e.detail.value;
},
applyAfterSaleFun() {
let { reason, reasonIndex, optTyle, remark, fileList } = this;
if (!reason[reasonIndex]) {
return this.$toast({
title: "请选择退款原因",
});
}
const data = {
item_id: this.itemId,
order_id: this.orderId,
reason: reason[reasonIndex],
refund_type: optTyle,
remark: remark,
img: fileList.length <= 0 ? "" : fileList[0].url,
};
applyAfterSale(data).then((res) => {
if (res.code == 1) {
uni.$emit("refreshsale");
this.$toast({
title: "提交成功",
});
setTimeout(() => {
uni.redirectTo({
url:
"/bundle/pages/after_sales_detail/after_sales_detail?afterSaleId=" +
res.data.after_sale_id,
});
}, 500);
}
});
},
afterRead(e) {
const file = e;
uni.showLoading({
title: "正在上传中...",
mask: true,
});
file.map((item) => {
uploadFile(item.path).then((res) => {
uni.hideLoading();
this.fileList.push(res);
});
});
},
deleteImage(index) {
this.fileList.splice(index, 1);
},
getGoodsInfoFun() {
let { orderId, itemId } = this;
getGoodsInfo({
order_id: orderId,
item_id: itemId,
}).then((res) => {
if (res.code == 1) {
this.goods = res.data.goods;
this.reason = res.data.reason;
}
});
},
},
};
</script>
<style lang="scss">
/* pages/apply_refund/apply_refund.wxss */
.apply-refund {
padding-bottom: 50rpx;
.goods {
padding: 20rpx 0;
background-color: white;
padding: 20rpx 24rpx;
.goods-info {
margin-left: 24rpx;
flex: 1;
}
}
}
.opt-box {
.opt-item {
padding: 20rpx 20rpx 20rpx 30rpx;
background-color: white;
}
}
.border-line {
border: 1px solid #f2f2f2;
}
.apply-refund {
.refund-info {
background-color: #fff;
padding: 24rpx 20rpx;
border-bottom: var(--border);
.label {
align-self: start;
width: 140rpx;
line-height: 36rpx;
margin-top: 19rpx;
}
textarea {
flex: 1;
height: 172rpx;
border-radius: 10rpx;
padding: 20rpx;
box-sizing: border-box;
}
}
.upload {
padding: 0 20rpx 20rpx;
.title {
padding: 24rpx 0;
}
}
.btn {
width: 680rpx;
margin-top: 30rpx;
margin-left: 26rpx;
margin-right: 26rpx;
}
}
.pop-header {
line-height: 42rpx;
padding: 30rpx;
}
.reason-box {
.reason-item {
padding: 24rpx 20rpx;
.reason-desc {
line-height: 46rpx;
}
}
}
</style>

17
components/cate-one/cate-one.vue
View File

@ -325,9 +325,22 @@
// 去结算
goSettle() {
uni.navigateTo({
url: `/pages/order_now/order_now?id=${id}`
const goods = this.cartLists.map(item => {
return {
item_id: item.item_id,
num: item.goods_num
}
})
uni.navigateTo({
url: "/pages/order_now/order_now?data=" +
encodeURIComponent(
JSON.stringify({
goods,
type: "cart",
})
),
});
},
// 跳转商品详情页

45
components/order-goods/order-goods.vue
View File

@ -3,15 +3,17 @@
<view v-for="(item, index) in list" :key="index" class="item-wrap u-p-b-20">
<view class="row-between u-p-r-20 u-p-t-20 u-p-b-24" v-if="mode === 'order'">
<view class="u-line-1 nr bold-500 text-000"> {{ item.goods_name || item.name }}</view>
<view class="text-999 flex1 u-m-l-40 text-nowrap">{{ orderDesc }}</view>
<!-- 未发货订单暂时理解为未制作 -->
<!-- 已发货订单暂时理解为已完成 -->
<view class="flex1 u-m-l-40 text-nowrap" :class="{'primary': orderStatus == 1, 'text-999': orderStatus != 1}">{{ orderDesc }}</view>
</view>
<view class="item" :class="{row: mode != 'pay', 'row-start': mode == 'pay'}" @tap="toGoods(item.goods_id)">
<view>
<view :style="{ width: imageWidth + 'rpx', height: imageHeight + 'rpx' }">
<u-image :src="item.image_str || item.image"
:width="imageWidth"
:height="imageHeight"
:border-radius="imageRadius"
:mode="mode === 'confirm' ? 'aspectFill' : 'aspectFit'"
:mode="imgMode"
lazy-load/>
</view>
<view class="goods-info ml20 flex1">
@ -21,7 +23,7 @@
<view>数量:x{{ item.goods_num }}</view>
<view>实付:
<price-format
v-if="!item.is_member && order_type === 0"
v-if="!item.is_member && (order_type === 0 || order_type === 1)"
:weight="500"
:subscript-size="24"
:first-size="34"
@ -63,33 +65,6 @@
>该商品不支持门店自提</view
>
</template>
<view class="goods-footer row" v-if="link">
<view style="flex: 1"></view>
<navigator
class="mr20"
hover-class="none"
:url="'/bundle/pages/goods_reviews/goods_reviews?id=' + item.id"
v-if="item.comment_btn"
>
<button size="xs" class="plain br60" hover-class="none">评价晒图</button>
</navigator>
<navigator
v-if="item.refund_btn"
hover-class="none"
:url="
'/bundle/pages/apply_refund/apply_refund?order_id=' +
item.order_id +
'&item_id=' +
item.item_id
"
>
<button size="xs" class="plain br60" hover-class="none">申请退款</button>
</navigator>
<view v-if="item.after_status_desc" style="color: orange">
{{ item.after_status_desc }}
</view>
</view>
</view>
</view>
</template>
@ -142,6 +117,14 @@ export default {
orderDesc: {
type: String,
default: ''
},
imgMode: {
type: String,
default: 'scaleToFill'
},
orderStatus: {
type: Number,
default: 0
}
},

43
components/order-list/order-list.vue
View File

@ -6,7 +6,7 @@
:key="index"
:url="'/pages/order_details/order_details?id=' + item.id">
<order-goods :list="item.order_goods" :order_type="item.order_type" :imageRadius="12"
:orderDesc="item.order_status_desc"></order-goods>
:orderDesc="item.order_status_desc" :orderStatus="item.order_status"></order-goods>
<view class="u-m-t-26 u-m-b-26 u-p-l-20 u-p-r-20">
<u-line color="#EEE" />
</view>
@ -33,12 +33,12 @@
:customStyle="{ width: '164rpx', height: '60rpx', backgroundColor: themeColor, color: '#fff', border: 'none' }"
:hair-line="false" shape="circle">去付款</u-button>
</view>
<view v-if="type === 'delivery' || type === 'finish'">
<u-button @click="seeDetails" hover-class="none" :customStyle="{width: '164rpx', height: '60rpx', backgroundColor: themeColor, color: '#fff', border: 'none'}" :hair-line="false" shape="circle">查看详情</u-button>
<view v-if="item.order_status > 0 && item.order_status < 4">
<u-button @click.stop="seeDetails(item.id)" hover-class="none" :customStyle="{width: '164rpx', height: '60rpx', backgroundColor: themeColor, color: '#fff', border: 'none'}" :hair-line="false" shape="circle">查看详情</u-button>
</view>
<view v-if="item.order_status == 4">
<u-button @click.stop="toRefund(item.id, item.order_goods)" hover-class="none" :customStyle="{width: '164rpx', height: '60rpx', backgroundColor: themeColor, color: '#fff', border: 'none'}" :hair-line="false" shape="circle">申请退款</u-button>
</view>
<!-- <view>
<u-button @click="toRefund" hover-class="none" :customStyle="{width: '164rpx', height: '60rpx', backgroundColor: themeColor, color: '#fff', border: 'none'}" :hair-line="false" shape="circle">申请退款</u-button>
</view> -->
</view>
</view>
</navigator>
@ -88,7 +88,20 @@ export default {
}
},
created() {
uni.$on("refreshorder", () => {
this.reflesh();
});
uni.$on("payment", (params) => {
if (params.result) {
this.reflesh();
uni.navigateBack();
setTimeout(() => this.$toast({ title: "支付成功" }), 0.5 * 1000);
}
});
},
destroyed: function () {
uni.$off(["payment", "refreshorder"]);
},
methods: {
// 初始化数据
upCallback(page) {
@ -138,13 +151,23 @@ export default {
},
// 查看详情
seeDetails() {
seeDetails(id) {
uni.navigateTo({
url: `/pages/order_details/order_details?id=${id}`
})
},
// 申请退款
toRefund() {
toRefund(id, goods) {
if (goods.length == 1) {
uni.navigateTo({
url: `/bundle/pages/apply_refund/apply_refund?order_id=${goods[0].order_id}&item_id=${goods[0].item_id}`
})
} else {
uni.navigateTo({
url: `/pages/order_details/order_details?id=${id}`
})
}
}
},
computed: {

6
pages.json
View File

@ -200,6 +200,12 @@
"style": {
"navigationBarTitleText": "联系客服"
}
},
{
"path": "pages/apply_refund/apply_refund",
"style": {
"navigationBarTitleText": "申请售后"
}
}
]
}

8
pages/order_details/order_details.vue
View File

@ -43,7 +43,7 @@
:order_type="orderDetail.order_type" :mode="orderDetail.order_status == 0 ? 'pay' : 'order_detail'"></order-goods>
</view>
<view class="row-end">
<view class="row-end" v-if="orderDetail.order_status > 0">
<u-button class="u-m-r-24" @click="mobileLogin" hover-class="none" :customStyle="{height: '46rpx', color: '#454545', border: '1px solid #454545', borderRadius: '8rpx', padding: '0 8rpx', fontSize: '24rpx'}" :plain="true" :hair-line="false">再来一单</u-button>
<u-button @click="mobileLogin" hover-class="none" :customStyle="{height: '46rpx', color: '#454545', border: '1px solid #454545', borderRadius: '8rpx', padding: '0 8rpx', fontSize: '24rpx'}" :plain="true" :hair-line="false">申请售后</u-button>
</view>
@ -64,7 +64,7 @@
</view>
</view>
<view class="bg-white u-p-32 u-m-t-40 br8" v-if="orderDetail.order_status == 0" >
<view class="bg-white u-p-32 u-m-t-40 br8" v-if="orderDetail.order_status == 0">
<view class="bold-600 u-font-28">订单信息</view>
<view class="text-attr u-m-t-16">
<view class="u-m-t-8 text-999">
@ -81,7 +81,7 @@
</view>
</view>
<view class="bg-white u-p-32 u-m-t-32">
<view class="bg-white u-p-32 u-m-t-32" v-if="orderDetail.order_status > 0">
<view class="row-between">
<view class="nr">商品总价</view>
<view>
@ -121,7 +121,7 @@
</view>
</view>
<view class="bg-white u-p-32 u-m-t-40 br8">
<view class="bg-white u-p-32 u-m-t-40 br8" v-if="orderDetail.order_status > 0">
<view class="bold-600 u-font-28">订单信息</view>
<view class="text-attr u-m-t-16">
<view class="u-m-t-8 row-between">

9
pages/order_now/order_now.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="px32">
<view class="px32" style="padding-bottom: 200rpx;">
<!-- 收货方式 -->
<view class="bg-white br16 row u-m-t-32">
<!-- <u-tabs
@ -72,9 +72,9 @@
<u-icon name="arrow-right" />
</view> -->
</view>
<view class="bg-white br16 row u-m-t-32">
<view class="bg-white br16 row u-m-t-32 u-p-20">
<order-goods :team="{ need: orderInfo.team_need }" :list="goodsLists" :delivery="delivery"
:order_type="orderInfo.order_type" :imageWidth="260" :imageHeight="172" mode="confirm"></order-goods>
:order_type="orderInfo.order_type" :imageWidth="186" :imageHeight="186" mode="confirm"></order-goods>
</view>
<view class="item row-between bg-white br16 row u-m-t-32 p24" @tap="showCoupon = true">
@ -218,6 +218,7 @@ export default {
unusableCoupon: [], // 优惠券--不可用
showCoupon: false, // 显示优惠券Popup
userRemark: '', // 用户留言
type: '', // 订单类型
}
},
@ -225,6 +226,7 @@ export default {
const data = JSON.parse(decodeURIComponent(options.data))
console.log("data>>>", data);
this.goods = data.goods
this.type = data.type
//#ifdef MP-WEIXIN
this.pay.weixin = 1
@ -411,6 +413,7 @@ export default {
this.showLoading = true
from.remark = this.userRemark
from.type = this.type
try {
const { code, data, msg } = await orderBuy(from)

20
pages/shop_cart/shop_cart.vue
View File

@ -215,20 +215,20 @@
});
}
});
console.log("this.cartList>>>", goods);
console.log("this.cartList1>>>", goods);
if (goods.length == 0) return this.$toast({
title: "您还没有选择商品哦",
});
// uni.navigateTo({
// url: "/pages/confirm_order/confirm_order?data=" +
// encodeURIComponent(
// JSON.stringify({
// goods,
// type: "cart",
// })
// ),
// });
uni.navigateTo({
url: "/pages/order_now/order_now?data=" +
encodeURIComponent(
JSON.stringify({
goods,
type: "cart",
})
),
});
},
},