code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2025-12-18 16:35:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

commit message

Browse Source
This commit is contained in:
Chopper
2021-05-13 11:03:32 +08:00
commit 23804939eb
2158 changed files with 149684 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

412
pages/order/afterSales/afterSales.vue Normal file
View File

@@ -0,0 +1,412 @@
<template>
<view class="content">
<view class="u-tabs-box">
<u-tabs bg-color="#fff" :list="list" :is-scroll="false" :current="current" @change="change" :active-color="$lightColor"></u-tabs>
</view>
<scroll-view class="body-view" scroll-y @scrolltolower="renderDate">
<view class="seller-view" v-for="(order, orderIndex) in orderList" :key="orderIndex">
<!-- 店铺名称 -->
<view class="seller-info u-flex u-row-between" v-if="current == 0">
<view class="seller-name">
<view class="name">{{ order.storeName }}</view>
</view>
<view class="order-sn">订单编号：{{ order.sn }}</view>
</view>
<!-- 申请记录 选项卡 -->
<view class="seller-info u-flex u-row-between" v-if="current != 0">
<view class="order-sn">售后单号：{{ order.service_sn || order.sn }}</view>
<view class="order-sn">{{ order.serviceType_text }}</view>
</view>
<view v-for="(sku, goodsIndex) in order.orderItems" :key="goodsIndex">
<view class="goods-item-view" @click="onDetail(sku)">
<view class="goods-img">
<u-image border-radius="6" width="100%" height="100%" :src="sku.image"></u-image>
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{ sku.name }}</view>
<!-- 如果商品多个则不显示每个商品价格-->
<view class="goods-price" v-if="order.orderItems.length <= 1">
￥{{ order.flowPrice | unitPrice }}
</view>
</view>
<view class="goods-num">
<view>x{{ sku.num }}</view>
</view>
</view>
<view class="btn-view u-flex u-row-between">
<view class="description">
<!-- 售后申请 -->
<view v-if="
current === 0 && order.groupAfterSaleStatus &&
order.groupAfterSaleStatus === 'ALREADY_APPLIED'
" class="cannot_apply">
<u-icon class="icon" name="info-circle-fill"></u-icon>
该商品已申请售后服务
</view>
<view class="cannot_apply" v-if="current === 0 && order.groupAfterSaleStatus && order.groupAfterSaleStatus === 'EXPIRED'" @click="tipsShow = true">
<u-icon class="icon" name="info-circle-fill"></u-icon>
该商品无法申请售后
</view>
<div v-if="current === 1 || current === 2">
<!-- 申请中 -->
<view class="cannot_apply" v-if="order.serviceType == 'RETURN_GOODS'">退货处理-{{ serviceStatusList[order.serviceStatus] }}</view>
<view class="cannot_apply" v-if="order.serviceType == 'SUPPLY_AGAIN_GOODS'">补发商品-{{ serviceStatusList[order.serviceStatus] }}</view>
<view class="cannot_apply" v-if="order.serviceType == 'RETURN_MONEY'">退款-{{ serviceStatusList[order.serviceStatus] }}</view>
<view class="cannot_apply" v-if="order.serviceType == 'EXCHANGE_GOODS'">换货-{{ serviceStatusList[order.serviceStatus] }}</view>
<view class="cannot_apply" v-if="order.serviceType == 'CANCEL'">取消订单-{{ serviceStatusList[order.serviceStatus] }}</view>
</div>
<!-- 申请记录 -->
</view>
<view class="after-line">
<!-- 售后申请 -->
<view v-if="
current === 0 && order.groupAfterSaleStatus=='NOT_APPLIED'
" @click="applyService(sku.sn, order, sku)" class="rebuy-btn">
申请售后
</view>
<!-- 申请中 -->
<view class="rebuy-btn" v-if="
current === 2 &&
order.serviceStatus &&
order.serviceStatus == 'PASS' &&
order.serviceType != 'RETURN_MONEY'
" @click="onExpress(order, sku)">
提交物流
</view>
<view @click="afterDetails(order, sku)" v-if="current === 1 || current === 2" class="rebuy-btn">
售后详情
</view>
<!-- 申请记录 -->
<!-- <u-button type="info" size="mini" shape="circle" v-if="current === 2">删除记录</u-button> -->
</view>
</view>
</view>
<view v-if="
current === 0 && order.groupAfterSaleStatus &&
order.groupAfterSaleStatus != 'ALREADY_APPLIED' &&
order.orderItems.length >= 1
" class="btn-view u-flex u-row-between">
<!-- 多个商品显示订单总价格 -->
<view class="cannot_apply">
订单总金额:<span class="countMoney">￥{{ order.flowPrice | unitPrice }}</span>
</view>
</view>
</view>
<u-loadmore bg-color="#f8f8f8" :status="status" />
</scroll-view>
<u-modal v-model="tipsShow" content="当订单未确认收货|已过售后服务有效期|已申请售后服务时，不能申请售后"></u-modal>
</view>
</template>
<script>
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
import empty from "@/components/empty";
import { getAfterSale, getAfterSaleList } from "@/api/after-sale.js";
import { getOrderList } from "@/api/order.js";
export default {
components: {
uniLoadMore,
},
data() {
return {
serviceStatusList: {
APPLY: "申请售后",
PASS: "通过售后",
REFUSE: "拒绝售后",
BUYER_RETURN: "买家退货，待卖家收货",
SELLER_RE_DELIVERY: "商家换货/补发",
SELLER_CONFIRM: "卖家确认收货",
SELLER_TERMINATION: "卖家终止售后",
BUYER_CONFIRM: "买家确认收货",
BUYER_CANCEL: "买家取消售后",
WAIT_REFUND: "等待平台退款",
COMPLETE: "完成售后",
},
list: [
{
name: "售后申请",
},
{
name: "申请中",
},
{
name: "申请记录",
},
],
current: 0,
tipsShow: false,
orderList: [],
params: {
pageNumber: 1,
pageSize: 10,
},
logParams: {
pageNumber: 1,
pageSize: 10,
},
status: "loadmore",
};
},
onLoad() {
this.orderList = [];
this.params.pageNumber = 1;
this.getOrderList(this.current);
},
onPullDownRefresh() {
this.change(this.current);
},
watch: {
current(val) {},
},
methods: {
//切换tab页时，初始化数据
change(index) {
this.current = index;
this.params = {
pageNumber: 1,
pageSize: 10,
};
this.orderList = [];
//如果是2 则读取售后申请记录列表
if (index == 0) {
this.getOrderList(index);
} else {
this.logParams = {
pageNumber: 1,
pageSize: 10,
};
if (index === 1) {
this.logParams.serviceStatus = "APPLY";
}
this.orderList = [];
this.getAfterSaleLogList();
}
uni.stopPullDownRefresh();
},
getOrderList(index) {
uni.showLoading({
title: "加载中",
mask: true,
});
getOrderList(this.params).then((res) => {
uni.hideLoading();
const orderlist = res.data.result.records;
if (orderlist.length > 0) {
this.orderList = this.orderList.concat(orderlist);
this.params.pageNumber += 1;
}
if (orderlist.length < 10) {
this.status = "nomore";
} else {
this.status = "loading";
}
});
},
// 详情
afterDetails(order) {
uni.navigateTo({
url: "./applyDetail?sn=" + order.sn,
});
},
//申请记录列表
getAfterSaleLogList() {
getAfterSaleList(this.logParams).then((res) => {
let afterSaleLogList = res.data.result.records;
afterSaleLogList.forEach((item) => {
item.orderItems = [
{
image: item.goodsImage,
skuId: item.skuId,
name: item.goodsName,
num: item.num,
price: item.flowPrice,
},
];
console.log(item.orderItems);
});
this.orderList = this.orderList.concat(afterSaleLogList);
if (afterSaleLogList.length < 10) {
this.status = "nomore";
} else {
this.status = "loading";
}
});
},
//申请售后
applyService(sn, order, sku) {
let data = {
...order,
...sku,
};
uni.navigateTo({
url: `/pages/order/afterSales/afterSalesSelect?sn=${sn}&sku=${encodeURIComponent(
JSON.stringify(data)
)}`,
});
},
//提交物流信息
onExpress(order, sku) {
sku.storeName = order.storeName;
uni.navigateTo({
url: `./afterSalesDetailExpress?serviceSn=${
order.sn
}&sku=${encodeURIComponent(JSON.stringify(sku))}`,
});
},
onDetail(sku) {
console.log(sku);
if (!this.$u.test.isEmpty(sku.skuId)) {
uni.navigateTo({
url: `/pages/product/goods?id=${sku.skuId}&goodsId=${sku.goodsId}`,
});
}
},
renderDate() {
if (this.current === 0) {
this.params.pageNumber += 1;
this.getOrderList();
} else {
this.logParams.pageNumber += 1;
this.getAfterSaleLogList();
}
},
},
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.body-view {
// height: calc(100vh - 44px -40px);
// overflow-y: auto;
height: 100%;
}
.countMoney {
margin-left: 7rpx;
color: $main-color;
font-size: 28rpx;
}
.seller-view {
background-color: #fff;
margin: 20rpx 0rpx;
padding: 0rpx 20rpx;
border-radius: 20rpx;
.seller-info {
height: 70rpx;
.seller-name {
font-size: 28rpx;
display: flex;
flex-direction: row;
.name {
margin-left: 15rpx;
margin-top: -2rpx;
}
}
.order-sn {
font-size: 22rpx;
color: #909399;
}
}
.goods-item-view {
display: flex;
flex-direction: row;
padding: 10rpx 10rpx;
.goods-img {
width: 131rpx;
height: 131rpx;
}
.goods-info {
padding-left: 30rpx;
flex: 1;
.goods-title {
margin-bottom: 10rpx;
color: #333333;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
font-size: 28rpx;
margin-bottom: 10rpx;
color: #ff5a10;
}
}
.goods-num {
width: 60rpx;
color: $main-color;
}
}
.btn-view {
padding: 16rpx 0;
.after-line {
display: flex;
line-height: 90rpx;
}
}
}
.description {
color: #909399;
size: 25rpx;
}
.cannot_apply {
text-align: center;
font-size: 22rpx;
color: #999999;
height: 70rpx;
line-height: 70rpx;
}
.icon {
margin-right: 10rpx;
}
.cancel-btn {
color: #999999;
border-color: #999999;
margin-left: 15rpx;
height: 60rpx;
}
.pay-btn {
background-color: #1abc9c;
color: #ffffff;
margin-left: 15rpx;
height: 60rpx;
}
.rebuy-btn {
background-color: #ffffff;
margin-left: 15rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
font-size: 24rpx;
border: 2rpx solid $light-color;
color: $light-color;
padding: 0 24rpx;
border-radius: 200px;
}
</style>

566
pages/order/afterSales/afterSalesDetail.vue Normal file
View File

@@ -0,0 +1,566 @@
<template>
<view class="content">
<u-form :model="form" ref="uForm">
<view class="after-sales-goods-detail-view">
<view class="header">
<view>
本次售后服务将由
<text class="seller-name">{{ sku.storeName }}</text>
为您提供
</view>
</view>
<view>
<view class="goods-item-view" v-for="(item,index) in sku.orderItems" v-if="item.sn == sn" @click="gotoGoodsDetail(sku.goods_id)">
<view class="goods-img">
<u-image border-radius="6" width="131rpx" height="131rpx" :src="item.image"></u-image>
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{ item.name }}</view>
<view class="goods-price">
<span>￥{{ applyInfo.applyRefundPrice }}</span>
<span class="num">购买数量:{{ item.num }}</span>
</view>
</view>
</view>
</view>
<view class="after-num">
<view>申请数量</view>
<view>
<u-number-box :value="parseInt(form.num)" disabled-input :min="1" :max="parseInt(sku.num)" bg-color="#fff" @change="valChange"></u-number-box>
</view>
</view>
</view>
<view class="body-view">
<!-- 退款原因 -->
<view class="opt-view">
<u-form-item label="申请原因" :label-width="150">
<u-input v-model="form.reason" type="select" input-align="right" :select-open="reasonSelectShow" @click="reasonSelectShow = true" placeholder="请选择申请原因" />
</u-form-item>
<u-form-item label="申请说明" :label-width="150">
<u-input input-align="right" type="textarea" v-model="form.problemDesc" placeholder="请描述申请售后的说明" />
</u-form-item>
</view>
<!-- 上传凭证 -->
<view class="opt-view">
<view class="img-title">上传凭证（最多5张）</view>
<view class="images-view">
<u-upload :header=" { accessToken: storage.getAccessToken() }" :action="action" width="150" @on-uploaded="onUploaded" :max-count="5" :show-progress="false"></u-upload>
</view>
</view>
<view class="opt-view">
<u-form-item label="退款方式" :label-width="150">
<u-input :value="
applyInfo.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'
" type="text" input-align="right" :disabled="true" />
</u-form-item>
<view v-if="
applyInfo.accountType === 'BANK_TRANSFER' &&
applyInfo.applyRefundPrice != 0
">
<u-form-item label="银行开户行" :label-width="150">
<u-input v-model="form.bankDepositName" type="text" input-align="right" placeholder="请输入银行开户行" />
</u-form-item>
<u-form-item label="银行开户名" :label-width="150">
<u-input v-model="form.bankAccountName" type="text" input-align="right" placeholder="请输入银行开户名" />
</u-form-item>
<u-form-item label="银行账号" :label-width="150">
<u-input v-model="form.bankAccountNumber" type="text" input-align="right" placeholder="请输入银行账号" />
</u-form-item>
</view>
<u-form-item label="返回方式" :label-width="150">
<u-input type="text" input-align="right" value="快递至第三方卖家" :disabled="true" />
</u-form-item>
</view>
<view class="opt-tip">提交服务单后，售后专员可能与您电话沟通，请保持手机畅通</view>
</view>
</u-form>
<view class="submit-view">
<u-button type="primary" ripple shape="circle" v-if="applyInfo.refundWay" :custom-style="customStyle" @click="onSubmit">提交申请</u-button>
</view>
<u-select mode="single-column" :list="reasonList" v-model="reasonSelectShow" @confirm="reasonSelectConfirm"></u-select>
<u-select mode="single-column" :list="typeList" v-model="typeSelectShow" @confirm="typeSelectConfirm"></u-select>
<u-select mode="single-column" :list="returnList" v-model="returnSelectShow" @confirm="returnSelectConfirm"></u-select>
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
getAfterSaleReason,
applyReturn,
getAfterSaleInfo,
} from "@/api/after-sale";
import city from "@/components/m-city/m-city";
import { upload } from "@/api/common.js";
import storage from "@/utils/storage.js";
export default {
component: {
city,
},
data() {
return {
storage,
list: [{ id: "", localName: "请选择", children: [] }],
action: upload,
fileList: [],
sn: "",
sku: {},
typeValue: 0,
value: "",
type: "textarea",
border: true,
//退款原因 弹出框
reasonSelectShow: false,
reasonList: [],
//退款方式为账号退款 账号类型弹出框
typeSelectShow: false,
typeList: [
{
value: "ALIPAY",
label: "支付宝",
},
{
value: "WEIXINPAY",
label: "微信",
},
{
value: "BANK_TRANSFER",
label: "银行卡",
},
],
//返回方式
returnSelectShow: false,
returnList: [
{
value: 1,
label: "快递至第三方卖家",
},
],
customStyle: {
backgroundColor: this.$lightColor,
},
applyInfo: {},
form: {
orderItemSn: "", // 订单sn
skuId: "",
reason: "", //退款原因
problemDesc: "", //退款说明
images: [], //图片凭证
num: 1, //退货数量
goodsId: "", //商品id
accountType: "",
applyRefundPrice: "",
refundWay: "",
serviceType: "", //申请类型
},
};
},
onLoad(options) {
let navTitle = "申请售后";
this.form.serviceType = "RETURN_GOODS";
if (options.value == 1) {
navTitle = "申请退货";
this.form.serviceType = "RETURN_GOODS";
}
if (options.value == 2) {
navTitle = "申请换货";
this.form.serviceType = "EXCHANGE_GOODS";
}
if (options.value == 3) {
navTitle = "申请退款";
this.form.serviceType = "RETURN_MONEY";
}
this.typeValue = options.value;
uni.setNavigationBarTitle({
title: navTitle, //此处写页面的title
});
this.sn = options.sn;
let dsku = decodeURIComponent(options.sku);
let newSku = JSON.parse(dsku);
this.sku = newSku
this.form.orderItemSn = options.sn;
this.form.skuId = this.sku.skuId;
this.form.num = this.sku.num;
this.form.goodsId = this.sku.goodsId;
this.getReasonActions(this.form.serviceType);
this.init(options.sn);
},
methods: {
/** 获取申请原因下拉框数据 */
async getReasonActions(serviceType) {
uni.showLoading({
title: "加载中",
});
await getAfterSaleReason(serviceType).then((res) => {
if (res.data.success) {
let action = [];
res.data.result.forEach((item) => {
action.push({
value: item.id,
label: item.reason,
});
});
this.reasonList = action;
}
});
uni.hideLoading();
},
//打开地区选择器
showCitySelect() {
this.$refs.cityPicker.show();
},
init(sn) {
getAfterSaleInfo(sn).then((response) => {
if (response.data.code == 400) {
uni.showToast({
title: response.data.message,
duration: 2000,
icon: "none",
});
} else {
this.applyInfo = response.data.result;
this.form.accountType = response.data.result.accountType;
}
});
},
//退款原因
reasonSelectConfirm(e) {
this.form.reason = e[0].label;
},
//退款方式
typeSelectConfirm(e) {
this.form.accountType = e[0].value;
this.form.accountType_label = e[0].label;
},
//返回方式
returnSelectConfirm(e) {
console.log(e);
},
//修改申请数量
valChange(e) {
this.form.num = e.value;
},
//图片上传
onUploaded(lists) {
console.log(lists);
let images = [];
lists.forEach((item) => {
images.push(item.response.result);
});
this.form.images = images;
},
//提交申请
onSubmit() {
//提交申请前检测参数
if (!this.handleCheckParams()) {
return;
}
uni.showLoading({
title: "加载中",
});
this.form.accountType = this.applyInfo.accountType;
this.form.refundWay = this.applyInfo.refundWay;
this.form.applyRefundPrice = this.applyInfo.applyRefundPrice;
applyReturn(this.sn, this.form).then((resp) => {
uni.hideLoading();
if (resp.data.success) {
this.$refs.uToast.show({ title: "提交成功", type: "success" });
uni.redirectTo({
url: "/pages/order/afterSales/applySuccess",
});
} else {
this.$refs.uToast.show({ title: resp.data.message, type: "error" });
}
});
},
// 验证银行卡号
checkBankno(bankno) {
var lastNum = bankno.substr(bankno.length - 1, 1); //取出最后一位（与luhm进行比较）
var first15Num = bankno.substr(0, bankno.length - 1); //前15或18位
var newArr = [];
for (var i = first15Num.length - 1; i > -1; i--) {
//前15或18位倒序存进数组
newArr.push(first15Num.substr(i, 1));
}
var arrJiShu = []; //奇数位*2的积 <9
var arrJiShu2 = []; //奇数位*2的积 >9
var arrOuShu = []; //偶数位数组
for (var j = 0; j < newArr.length; j++) {
if ((j + 1) % 2 == 1) {
//奇数位
if (parseInt(newArr[j]) * 2 < 9)
arrJiShu.push(parseInt(newArr[j]) * 2);
else arrJiShu2.push(parseInt(newArr[j]) * 2);
} //偶数位
else arrOuShu.push(newArr[j]);
}
var jishu_child1 = []; //奇数位*2 >9 的分割之后的数组个位数
var jishu_child2 = []; //奇数位*2 >9 的分割之后的数组十位数
for (var h = 0; h < arrJiShu2.length; h++) {
jishu_child1.push(parseInt(arrJiShu2[h]) % 10);
jishu_child2.push(parseInt(arrJiShu2[h]) / 10);
}
var sumJiShu = 0; //奇数位*2 < 9 的数组之和
var sumOuShu = 0; //偶数位数组之和
var sumJiShuChild1 = 0; //奇数位*2 >9 的分割之后的数组个位数之和
var sumJiShuChild2 = 0; //奇数位*2 >9 的分割之后的数组十位数之和
var sumTotal = 0;
for (var m = 0; m < arrJiShu.length; m++) {
sumJiShu = sumJiShu + parseInt(arrJiShu[m]);
}
for (var n = 0; n < arrOuShu.length; n++) {
sumOuShu = sumOuShu + parseInt(arrOuShu[n]);
}
for (var p = 0; p < jishu_child1.length; p++) {
sumJiShuChild1 = sumJiShuChild1 + parseInt(jishu_child1[p]);
sumJiShuChild2 = sumJiShuChild2 + parseInt(jishu_child2[p]);
}
//计算总和
sumTotal =
parseInt(sumJiShu) +
parseInt(sumOuShu) +
parseInt(sumJiShuChild1) +
parseInt(sumJiShuChild2);
//计算Luhm值
var k = parseInt(sumTotal) % 10 == 0 ? 10 : parseInt(sumTotal) % 10;
var luhm = 10 - k;
if (lastNum == luhm) {
return true;
} else {
return false;
}
},
//检测提交参数
handleCheckParams() {
console.log(this.form.accountType);
if (this.$u.test.isEmpty(this.form.reason)) {
this.$refs.uToast.show({ title: "请选择 退款原因", type: "error" });
return false;
}
if (this.$u.test.isEmpty(this.form.problemDesc)) {
this.$refs.uToast.show({ title: "请输入 退款说明", type: "error" });
return false;
}
if (this.form.accountType == "BANK_TRANSFER") {
// 银行开户行校验
if (this.$u.test.isEmpty(this.form.bankDepositName)) {
this.$refs.uToast.show({
title: "请输入 银行开户行",
type: "error",
});
return false;
}
// 银行开户名校验
if (this.$u.test.isEmpty(this.form.bankAccountName)) {
this.$refs.uToast.show({
title: "请输入 银行开户名",
type: "error",
});
return false;
}
// 银行账号校验
if (this.$u.test.isEmpty(this.form.bankAccountNumber)) {
this.$refs.uToast.show({
title: "请输入 银行账号",
type: "error",
});
return false;
} else if (this.checkBankno(this.form.bankAccountNumber) === false) {
this.$refs.uToast.show({
title: "银行卡卡号不正确",
type: "error",
});
return false;
} else if (this.$u.test.chinese(this.form.bankAccountName) === false) {
this.$refs.uToast.show({
title: "银行开户名输入错误",
type: "error",
});
return false;
} else if (this.$u.test.chinese(this.form.bankDepositName) === false) {
this.$refs.uToast.show({
title: "银行开户行输入错误",
type: "error",
});
return false;
}
}
return true;
},
showOrHide() {
let flag = true;
switch (this.form.serviceType) {
case "CHANGE_GOODS":
flag = false;
break;
case "SUPPLY_AGAIN_GOODS":
flag = false;
break;
default:
flag = true;
break;
}
return flag;
},
},
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.body-view {
margin-bottom: 150rpx;
}
.after-sales-goods-detail-view {
background-color: #fff;
.header {
background-color: #f7f7f7;
color: #999999;
font-size: 22rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
line-height: 70rpx;
.header-text {
background-color: #999999;
padding: 10rpx 30rpx;
border-radius: 50rpx;
}
.seller-name {
color: $main-color;
}
}
.goods-item-view {
display: flex;
flex-direction: row;
padding: 10rpx 30rpx;
background-color: #eef1f2;
.goods-info {
padding-left: 30rpx;
flex: 1;
.goods-title {
margin-bottom: 10rpx;
color: $font-color-dark;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 28rpx;
margin-bottom: 10rpx;
color: $light-color;
.num {
font-size: 24rpx;
color: #999999;
}
}
}
.goods-num {
width: 60rpx;
color: $main-color;
}
}
}
.after-num {
margin: 0rpx 30rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 80rpx;
}
.opt-tip {
margin-top: 20rpx;
padding: 10rpx 30rpx;
font-size: 22rpx;
}
.opt-view {
background-color: #fff;
margin-top: 20rpx;
padding: 10rpx 30rpx;
.how-view {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 80rpx;
border-bottom: 1px solid $page-color-base;
}
.explain-view {
display: flex;
flex-direction: row;
align-items: center;
height: 150rpx;
}
.img-title {
height: 80rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.images-view {
padding: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
}
.item-apply-voucher {
width: 100%;
display: flex;
justify-content: flex-end;
}
.submit-view {
position: fixed;
z-index: 999;
bottom: 0px;
left: 0px;
margin-top: 100rpx;
border: solid 2rpx #f2f2f2;
background-color: #ffffff;
height: 100rpx;
width: 750rpx;
align-items: center;
padding: 0rpx 20rpx;
}
</style>

255
pages/order/afterSales/afterSalesDetailExpress.vue Normal file
View File

@@ -0,0 +1,255 @@
<template>
<view class="mp-iphonex-bottom content">
<u-form :model="form" ref="uForm">
<view class="after-sales-goods-detail-view">
<view class="header">
<view>
本次售后服务将由
<text class="seller-name">{{ sku.storeName }}</text>
为您提供
</view>
</view>
<view>
<view class="goods-item-view" @click="gotoGoodsDetail(sku.skuId)">
<view class="goods-img">
<u-image border-radius="6" width="131rpx" height="131rpx" :src="sku.image"></u-image>
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{ sku.name }}</view>
<view class="goods-price">
<!-- <span v-if="sku.point">￥{{ sku.subtotal }}+{{ sku.point }}积分</span> -->
<span>￥{{ sku.price | unitPrice }}</span>
<span class="num">购买数量: {{ sku.num }} </span>
</view>
</view>
</view>
</view>
</view>
<scroll-view scroll-y>
<!-- 上传凭证 -->
<view class="opt-view">
<view class="img-title" style="font-size: 30rpx">填写物流信息</view>
<u-form-item label="返回方式" :label-width="150">
<u-input type="text" input-align="right" value="快递至第三方卖家" />
</u-form-item>
<u-form-item label="快递公司" :label-width="150">
<u-input v-model="form.courier_company" type="select" input-align="right" :select-open="companySelectShow" @click="companySelectShow = true" placeholder="请选择快递公司" />
</u-form-item>
<u-form-item label="快递单号" :label-width="150">
<u-input input-align="right" v-model="form.logisticsNo" placeholder="请输入快递单号" />
</u-form-item>
<u-form-item label="发货时间" :label-width="150">
<u-input input-align="right" type="selects" disabled v-model="form.mDeliverTime" @click="timeshow = true" placeholder="请选择发货时间" />
</u-form-item>
</view>
</scroll-view>
<view class="submit-view">
<u-button ripple :customStyle="{'background':$lightColor,'color':'#fff' }" shape="circle" @click="onSubmit">提交申请</u-button>
</view>
</u-form>
<u-select mode="single-column" :list="companyList" v-model="companySelectShow" @confirm="companySelectConfirm"></u-select>
<u-calendar v-model="timeshow" :mode="'date'" @change="onTimeChange"></u-calendar>
<u-toast ref="uToast" />
</view>
</template>
<script>
import { getLogistics } from "@/api/address.js";
import { fillShipInfo } from "@/api/after-sale.js";
export default {
data() {
return {
typeValue: 0,
value: "",
type: "textarea",
border: true,
//快递公司 弹出框
companySelectShow: false,
companyList: [],
timeshow: false,
form: {
courier_company: "",
logisticsId: "", //快递公司ID
logisticsNo: "", //快递单号
mDeliverTime: "", //发货时间
},
serviceDetail: {},
sku: {},
};
},
onShow(options) {},
onLoad(options) {
this.sku = JSON.parse(decodeURIComponent(options.sku));
let navTitle = "服务单详情";
uni.setNavigationBarTitle({
title: navTitle, //此处写页面的title
});
this.serviceDetail.sn = options.serviceSn;
this.Logistics();
},
methods: {
//快递公司
companySelectConfirm(e) {
this.form.logisticsId = e[0].value;
this.form.courier_company = e[0].label;
},
// 获取快递公司
Logistics() {
getLogistics().then((res) => {
if (res.data.success) {
res.data.result.forEach((item, index) => {
this.companyList[index] = {
value: item.id,
label: item.name,
};
});
// this.companyList= res
}
});
},
onTimeChange(e) {
this.form.mDeliverTime = e.result;
},
onSubmit() {
uni.showLoading({
title: "加载中",
mask: true,
});
delete this.form.courier_company;
fillShipInfo(this.serviceDetail.sn, this.form).then((res) => {
uni.hideLoading();
if (res.statusCode === 200) {
this.$refs.uToast.show({
title: "提交成功",
type: "success",
back: true,
url: "/pages/order/afterSales/afterSales",
});
}
});
},
},
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.mp-iphonex-bottom{
overflow: hidden;
}
.after-sales-goods-detail-view {
background-color: #fff;
padding: 10rpx 0rpx;
.header {
background-color: #f7f7f7;
color: #999999;
font-size: 22rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
line-height: 70rpx;
.header-text {
background-color: #999999;
padding: 10rpx 30rpx;
border-radius: 50rpx;
}
.seller-name {
color: $main-color;
}
}
.goods-item-view {
display: flex;
flex-direction: row;
padding: 20rpx 30rpx;
background-color: #eef1f2;
.goods-info {
padding-left: 30rpx;
flex: 1;
.goods-title {
margin-bottom: 10rpx;
color: $font-color-dark;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 28rpx;
margin-bottom: 10rpx;
color: $light-color;
.num {
font-size: 24rpx;
color: #999999;
}
}
}
.goods-num {
width: 60rpx;
color: $main-color;
}
}
}
.opt-view {
background-color: #fff;
padding: 40rpx 30rpx 0rpx 30rpx;
font-size: 26rpx;
.how-view {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 80rpx;
border-bottom: 1px solid $page-color-base;
}
.explain-view {
display: flex;
flex-direction: row;
align-items: center;
height: 150rpx;
}
.img-title {
height: 80rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.images-view {
padding: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
}
.submit-view {
position: fixed;
z-index: 999;
bottom: 10px;
left: 0px;
margin-top: 100rpx;
height: 100rpx;
width: 750rpx;
align-items: center;
padding: 0rpx 20rpx;
color: #fff;
}
</style>

193
pages/order/afterSales/afterSalesSelect.vue Normal file
View File

@@ -0,0 +1,193 @@
<template>
<view>
<view class="after-sales-goods-detail-view">
<view class="header">
<view>
本次售后服务将由
<text class="seller-name">{{ sku.storeName }}</text>
为您提供
</view>
</view>
<view>
<view class="goods-item-view" v-for="(item,index) in sku.orderItems" v-if="item.sn == sn" @click="gotoGoodsDetail(sku.skuId)">
<view class="goods-img">
<u-image border-radius="6" width="131rpx" height="131rpx" :src="item.image"></u-image>
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{ item.name }}</view>
<view class="goods-price">
<!-- <span v-if="sku.point">￥{{ sku.subtotal }}+{{ sku.point }}积分</span> -->
<span v-if="sku.orderItems.length <= 1">￥{{ sku.flowPrice }}</span>
<span class="num" v-else>购买数量{{item.num}}</span>
<span v-if="sku.orderItems.length <= 1" class="num">购买数量: {{ item.num }}</span>
</view>
</view>
</view>
</view>
</view>
<view class="select-view">
<view class="select-cell" @click="onSelect(1)">
<view class="select-image">
<image style="height: 51rpx; width: 51rpx" src="/static/order/t1.png"></image>
</view>
<view class="right">
<view class="select-title">退货</view>
<view class="select-sub-title">
退回收到的商品
<uni-icons color="#BABABA" type="arrowright"></uni-icons>
</view>
</view>
</view>
<view class="select-cell" @click="onSelect(3)">
<view class="select-image">
<image style="height: 51rpx; width: 51rpx" src="/static/order/t3.png"></image>
</view>
<view class="right">
<view class="select-title">退款</view>
<view class="select-sub-title">
退款商品返还金额
<uni-icons color="#BABABA" type="arrowright"></uni-icons>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import UniIcons from "@/components/uni-icons/uni-icons.vue";
export default {
components: {
UniIcons,
},
data() {
return {
sn: "",
applyInfo: {},
sku: {},
};
},
onLoad(options) {
this.sn = options.sn;
let dData = decodeURIComponent(options.sku);
let newData = JSON.parse(dData);
this.sku = newData;
},
methods: {
onSelect(value) {
uni.redirectTo({
url: `./afterSalesDetail?sn=${this.sn}&sku=${encodeURIComponent(
JSON.stringify(this.sku)
)}&value=${value}`,
});
},
gotoGoodsDetail(id) {
uni.navigateTo({
url: `/pages/product/goods?id=${id}&goodsId=${goodsId}`,
});
},
},
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.after-sales-goods-detail-view {
background-color: #fff;
.header {
background-color: #f7f7f7;
color: #999999;
font-size: 22rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
line-height: 70rpx;
.header-text {
background-color: #999999;
padding: 10rpx 30rpx;
border-radius: 50rpx;
}
.seller-name {
color: $main-color;
}
}
.goods-item-view {
display: flex;
flex-direction: row;
padding: 10rpx 30rpx;
background-color: #eef1f2;
.goods-img {
}
.goods-info {
padding-left: 30rpx;
flex: 1;
.goods-title {
margin-bottom: 10rpx;
color: $font-color-dark;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 28rpx;
margin-bottom: 10rpx;
color: $light-color;
.num {
font-size: 24rpx;
color: #999999;
}
}
}
.goods-num {
width: 60rpx;
color: $main-color;
}
}
}
.select-view {
background-color: #fff;
margin-top: 20rpx;
.select-cell {
display: flex;
align-items: center;
margin: 0rpx 20rpx;
line-height: 110rpx;
border-bottom: 1px solid $page-color-base;
.select-image {
width: 51rpx;
height: 110rpx;
line-height: 110rpx;
display: flex;
align-items: center;
}
.right {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
.select-title {
margin-left: 18rpx;
color: #666666;
width: 200rpx;
}
.select-sub-title {
color: #cccccc;
}
}
}
}
</style>

298
pages/order/afterSales/applyCancel.vue Normal file
View File

@@ -0,0 +1,298 @@
<template>
<view>
<view class="cancel-head">
<u-cell-group>
<u-cell-item title="未收货" :arrow="false">
<u-radio-group wrap v-model="rog"><u-radio active-color="#1ABC9C" name="NO" @click="radioChange('NO')"></u-radio></u-radio-group>
</u-cell-item>
<u-cell-item title="已收货" v-if="applyService" :arrow="false">
<u-radio-group wrap v-model="rog"><u-radio active-color="#1ABC9C" name="YES" @click="radioChange('YES')"></u-radio></u-radio-group>
</u-cell-item>
</u-cell-group>
</view>
<view class="cancle-body" v-if="rog === 'NO'">
<view class="cancel-tips">
<view class="tips-header">温馨提示：</view>
<view>1. 订单取消后无法恢复;</view>
<view>2. 订单取消后，使用的优惠券将不再返还，积分可以退回;</view>
<view>3. 订单取消后，订单中的赠品要随商品一起返还给商家;</view>
</view>
<u-cell-group>
<u-cell-item title="退款方式" value="原路退回" :arrow="false" v-if="isRetrace"></u-cell-item>
<u-cell-item title="退款方式" value="账号退款" :arrow="false" v-else></u-cell-item>
<u-cell-item title="退款金额" :value="refund_info.refund_price" :arrow="false"></u-cell-item>
<u-cell-item title="取消原因" :value="refund_info.reason" @click="handleShowReason" :arrow="true" arrow-direction="down" required></u-cell-item>
<u-action-sheet :list="reasonSelectActions" v-model="reasonSelectShow" @click="onSelectReason"></u-action-sheet>
<view v-if="!isRetrace">
<u-cell-item title="账户类型" :value="accountTypeText" @click="handleShowAccountType" :arrow="true" arrow-direction="down" required></u-cell-item>
<u-action-sheet :list="accountTypeSelectActions" v-model="accountTypeSelectShow" @click="onSelectAccountType"></u-action-sheet>
<view v-if="refund_info.account_type === 'BANK_TRANSFER'">
<u-field v-model="refund_info.bank_name" required clearable label="银行名称" input-align="right" placeholder="请输入银行名称"></u-field>
<u-field v-model="refund_info.bank_deposit_name" label-width="150" required clearable label="银行开户行" input-align="right" placeholder="请输入银行开户行"></u-field>
<u-field v-model="refund_info.bank_account_name" label-width="150" required clearable label="银行开户名" input-align="right" placeholder="请输入银行开户名"></u-field>
<u-field v-model="refund_info.bank_account_number" required clearable label="银行账号" input-align="right" placeholder="请输入银行账号"></u-field>
</view>
<u-field v-model="refund_info.return_account" required clearable label="退款账号" input-align="right" placeholder="请输入退款账号"></u-field>
</view>
<u-field v-model="refund_info.mobile" required clearable label="联系方式" input-align="right" placeholder="请输入手机号码"></u-field>
</u-cell-group>
<view class="submit-btn">
<u-button shape="circle" class="cancel-btn" @click="handleCancelSubmit">取消</u-button>
<u-button shape="circle" class="main-btn" @click="handleSubmitApply">提交</u-button>
</view>
</view>
<view class="service-body" v-else>
<view class="cancel-tips">
<view class="tips-header">温馨提示：</view>
<view>1. 当前订单还未确认收货，如果申请售后，则订单自动确认收货;</view>
<view>2. 如申请售后，使用的优惠券和积分等将不再返还;</view>
<view>3. 订单中的赠品要随申请售后的商品一起返还给商家;</view>
</view>
<view class="submit-btn"><u-button shape="circle" class="main-btn" @click="handleApplyService">申请售后</u-button></view>
</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
import Foundation from '@/utils/Foundation.js';
import RegExp from '@/utils/RegExp.js';
import { applyCancelOrder } from '@/api/after-sale.js';
import { confirmReceipt, getOrderDetail } from '@/api/order.js';
export default {
data() {
return {
/** 订单编号 */
order_sn: 0,
/** 订单详细 */
order: '',
/** 是否允许申请售后 */
applyService: false,
/** 是否已收货 */
rog: 'NO',
/** 是否支持原路退款 */
isRetrace: false,
/** 申请取消订单参数 */
refund_info: {
reason: '请选择取消原因',
mobile: '',
account_type: '',
return_account: '',
refund_price: 0.0
},
/** 是否展示取消原因下拉框 */
reasonSelectShow: false,
/** 取消原因下拉框数据 */
reasonSelectActions: [
{ text: '商品无货' },
{ text: '配送时间问题' },
{ text: '不想要了' },
{ text: '商品信息填写错误' },
{ text: '地址信息填写错误' },
{ text: '商品降价' },
{ text: '货物破损已拒签' },
{ text: '订单无物流跟踪记录' },
{ text: '非本人签收' },
{ text: '其他' }
],
/** 账户类型下拉框选中的值 */
accountTypeText: '请选择账户类型',
/** 是否展示账户类型下拉框 */
accountTypeSelectShow: false,
/** 账户类型下拉框数据 */
accountTypeSelectActions: [{ text: '支付宝', value: 'ALIPAY' }, { text: '微信', value: 'WEIXINPAY' }, { text: '银行卡', value: 'BANK_TRANSFER' }]
};
},
onLoad(options) {
this.order_sn = options.sn;
this.GET_OrderCancelDetail();
},
methods: {
// 选中任一radio时，由radio-group触发
radioChange(e) {
this.rog = e;
},
/** 展示申请原因上拉框事件绑定 */
handleShowReason() {
this.reasonSelectShow = true;
},
/** 申请原因选中事件绑定 */
onSelectReason(index) {
this.reasonSelectShow = false;
this.refund_info.reason = this.reasonSelectActions[index].text;
},
/** 展示账户类型上拉框事件绑定 */
handleShowAccountType() {
this.accountTypeSelectShow = true;
},
/** 账户类型选中事件绑定 */
onSelectAccountType(index) {
this.accountTypeSelectShow = false;
this.accountTypeText = this.accountTypeSelectActions[index].text;
this.refund_info.account_type = this.accountTypeSelectActions[index].value;
},
/** 跳转至订单列表页面 */
handleCancelSubmit() {
uni.redirectTo({
url: '/pages/order/myOrder?status=0'
});
},
/** 申请售后 */
handleApplyService() {
confirmReceipt(this.order_sn).then(() => {
uni.redirectTo({
url: '/pages/order/afterSales/afterSales'
});
});
},
/** 校验参数 */
handleCheckParams() {
// 取消原因校验
if (!this.refund_info.reason || this.refund_info.reason === '请选择取消原因') {
this.$refs.uToast.show({ title: '请选择取消原因!', type: 'error' });
return false;
}
// 联系方式校验
if (!this.refund_info.mobile || !this.$u.test.mobile(this.refund_info.mobile)) {
this.$refs.uToast.show({ title: '请输入正确格式的手机号码!', type: 'error' });
return false;
}
// 如果不支持原路退款
if (!this.isRetrace) {
// 账户类型校验
if (!this.refund_info.account_type) {
this.$refs.uToast.show({ title: '请选择账户类型!', type: 'error' });
return false;
}
// 如果账户类型不为银行卡
if (this.refund_info.account_type != 'BANK_TRANSFER') {
// 退款账号校验
if (!this.refund_info.return_account) {
this.$refs.uToast.show({ title: '请输入退款账号!', type: 'error' });
return false;
}
} else {
// 银行名称校验
if (!this.refund_info.bank_name) {
this.$refs.uToast.show({ title: '请输入银行名称!', type: 'error' });
return false;
}
// 银行开户行校验
if (!this.refund_info.bank_deposit_name) {
this.$refs.uToast.show({ title: '请输入银行开户行!', type: 'error' });
return false;
}
// 银行开户名校验
if (!this.refund_info.bank_account_name) {
this.$refs.uToast.show({ title: '请输入银行开户名!', type: 'error' });
return false;
}
// 银行账号校验
if (!this.refund_info.bank_account_number) {
this.$refs.uToast.show({ title: '请输入银行账号!', type: 'error' });
return false;
}
}
}
return true;
},
/** 提交取消订单申请 */
handleSubmitApply() {
// 校验参数
if (!this.handleCheckParams()) {
return false;
}
this.refund_info.order_sn = this.order_sn;
applyCancelOrder(this.refund_info).then(() => {
this.$refs.uToast.show({ title: '提交成功!', type: 'success' });
this.handleCancelSubmit();
});
},
/** 获取订单详情信息 */
GET_OrderCancelDetail() {
getOrderDetail(this.order_sn).then(response => {
this.order = response.data;
this.isRetrace = this.order.is_retrace;
this.refund_info.refund_price = Foundation.formatPrice(this.order.order_price);
this.applyService = this.order.order_status === 'SHIPPED' && this.order.ship_status === 'SHIP_YES';
});
}
}
};
</script>
<style lang="scss">
/deep/ .u-cell {
// #ifdef MP-WEIXIN
width: 100vw !important;
overflow: hidden !important;
display: block !important;
// #endif
}
/deep/ .u-cell_title{
// #ifdef MP-WEIXIN
float: left;
// #endif
}
/deep/ .u-cell__value{
// #ifdef MP-WEIXIN
float: right;
// #endif
}
.cancel-head {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.submit-btn {
display: flex;
margin-top: 40rpx;
margin-bottom: 40rpx;
text-align: center;
justify-content: center;
align-items: center;
}
.cancel-tips {
display: flex;
flex-direction: column;
padding: 20rpx;
font-size: 22rpx;
font-family: PingFang SC, PingFang SC-Regular;
color: #999999;
view {
margin-top: 6rpx;
}
.tips-header {
color: #ff6262;
font-size: 26rpx;
margin-bottom: 6rpx;
}
}
.main-btn {
width: 40%;
background-color: $light-color;
color: #ffffff;
}
.cancel-btn {
margin-right: 30px;
width: 40%;
border-color: $light-color;
color: $light-color;
}
</style>

592
pages/order/afterSales/applyDetail.vue Normal file
View File

@@ -0,0 +1,592 @@
<template>
<view v-if="serviceDetail">
<view class="after-sales-goods-detail-view">
<view class="header">
<view>
本次售后服务将由
<text class="seller-name">{{ serviceDetail.storeName }}</text>
为您提供
</view>
</view>
<view class="apply-info-view">
<view class="status-info">
<view class="status-info-box">
<view class="status-val">{{
serviceStatusList[serviceDetail.serviceStatus]
}}</view>
<!-- <view class="status-tip" v-if="allowable.allow_ship"
>请您尽快将申请售后的商品退还给卖家</view
> -->
<view class="status-tip">{{
serviceDetail.serviceStatus | statusFilter
}}</view>
</view>
</view>
<view class="log-box-bottom"></view>
<view class="log-box-top" @click="onProgress()">
<view class="top01">
<view>审核日志</view>
<view class="log-first-show" v-if="logs[0]">{{
logs[0].message
}}</view>
</view>
<uni-icons type="arrowright" style="margin-right: 5px"></uni-icons>
</view>
</view>
<view class="goods-info">
<view class="info-box">
<view class="goods-item-view" @click="gotoGoodsDetail(serviceDetail)">
<view class="goods-img">
<u-image border-radius="6" width="131rpx" height="131rpx" :src="serviceDetail.goodsImage"></u-image>
</view>
<view class="goods-info">
<view class="goods-title u-line-2">{{
serviceDetail.goodsName
}}</view>
<view class="goods-price">
<view class="price"> ￥{{ serviceDetail.flowPrice | unitPrice }}</view>
<view>
<view>申请售后数量：{{ serviceDetail.num }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="apply-detail-view">
<view class="detail-item">
<view class="title">服务单号:</view>
<view class="value">{{ serviceDetail.sn }}</view>
</view>
<view class="detail-item">
<view class="title">订单编号:</view>
<view class="value">{{ serviceDetail.orderSn }}</view>
</view>
<view class="detail-item" v-if="serviceDetail.new_order_sn">
<view class="title">新订单编号:</view>
<view class="value">{{ serviceDetail.new_order_sn }}</view>
</view>
<view class="detail-item">
<view class="title">服务类型:</view>
<view class="value">{{
serviceTypeList[serviceDetail.serviceType]
}}</view>
</view>
<view class="detail-item">
<view class="title">申请原因:</view>
<view class="value">{{ serviceDetail.reason }}</view>
</view>
<!-- <view class="detail-item" v-if="serviceDetail.apply_vouchers">
<view class="title">申请凭证:</view>
<view class="value">{{ serviceDetail.apply_vouchers }}</view>
</view> -->
<view class="detail-item" v-if="serviceDetail.problemDesc">
<view class="title">问题描述:</view>
<view class="value">{{ serviceDetail.problemDesc }}</view>
</view>
<view class="detail-item" v-if="
serviceDetail.afterSaleImage &&
serviceDetail.afterSaleImage.split(',').length != 0
">
<image :src="img" @click="preview(serviceDetail.afterSaleImage.split(','), index)" v-for="(img, index) in serviceDetail.afterSaleImage.split(',')" :key="index"
style="width: 50px; height: 50px; margin: 0px 5px"></image>
</view>
<!-- 如果服务类型为退款则不显示 -->
<view class="detail-item" v-if="serviceDetail.serviceType != 'RETURN_MONEY' && serviceDetail.serviceStatus != 'APPLY'">
<view class="title">收货地址:</view>
<view class="value">
<span v-if="change_info.salesConsigneeAddressPath">{{
change_info.salesConsigneeAddressPath
}}</span>
</view>
</view>
<!-- 如果服务类型为退款则不显示 -->
<view class="detail-item" v-if="serviceDetail.serviceType != 'RETURN_MONEY' && serviceDetail.serviceStatus != 'APPLY'">
<view class="title">联系人:</view>
<view class="value">{{ change_info.salesConsigneeName }}</view>
</view>
<!-- 如果服务类型为退款则不显示 -->
<view class="detail-item" v-if="serviceDetail.serviceType != 'RETURN_MONEY' && serviceDetail.serviceStatus != 'APPLY'">
<view class="title">联系方式:</view>
<view class="value">{{
change_info.salesConsigneeMobile || "" | secrecyMobile
}}</view>
</view>
<view v-if="refundShow">
<view class="detail-item">
<view class="title">退款金额:</view>
<view class="value">{{
serviceDetail.flowPrice | unitPrice("￥")
}}</view>
</view>
<view class="detail-item" v-if="serviceDetail.agree_price">
<view class="title">同意退款:</view>
<view class="value">{{
serviceDetail.agree_price | unitPrice("￥")
}}</view>
</view>
<view class="detail-item" v-if="serviceDetail.actual_price">
<view class="title">实际退款:</view>
<view class="value">{{
serviceDetail.actual_price | unitPrice("￥")
}}</view>
</view>
<view class="detail-item" v-if="serviceDetail.actual_price">
<view class="title">退款时间:</view>
<view class="value">{{
serviceDetail.refund_time | unixToDate
}}</view>
</view>
<view class="detail-item" v-if="serviceDetail.refund_price !== 0">
<view class="title">退款方式:</view>
<view class="value">{{
serviceDetail.refundWay | refundWayFilter
}}</view>
</view>
<view class="detail-item" v-if="accountShow && serviceDetail.refund_price != 0">
<view class="title">账户类型:</view>
<view class="value">{{
serviceDetail.accountType | accountTypeFilter
}}</view>
</view>
<view class="detail-item" v-if="
accountShow && !bankShow && serviceDetail.actualRefundPrice != 0
">
<view class="title">退款账号:</view>
<view class="value">{{ serviceDetail.bankAccountNumber }}</view>
</view>
<view class="detail-item" v-if="bankShow">
<view class="title">银行名称:</view>
<view class="value">{{ serviceDetail.bankAccountName }}</view>
</view>
<view class="detail-item" v-if="bankShow">
<view class="title">银行账号:</view>
<view class="value">{{ serviceDetail.bankAccountNumber }}</view>
</view>
<view class="detail-item" v-if="bankShow">
<view class="title">银行开户名:</view>
<view class="value">{{ serviceDetail.bankAccountName }}</view>
</view>
<view class="detail-item" v-if="bankShow">
<view class="title">银行开户行:</view>
<view class="value">{{ serviceDetail.bankDepositName }}</view>
</view>
<view class="detail-item" v-if="serviceDetail.mlogisticsName">
<view class="title">回寄快递:</view>
<view class="value">{{ serviceDetail.mlogisticsName }}</view>
</view>
<view class="detail-item" v-if="serviceDetail.mlogisticsNo">
<view class="title">回寄运单号:</view>
<view class="value">{{ serviceDetail.mlogisticsNo }}</view>
</view>
<view class="detail-item" v-if="serviceDetail.mDeliverTime">
<view class="title">回寄时间:</view>
<view class="value">{{ serviceDetail.mDeliverTime }}</view>
</view>
</view>
</view>
<!-- <view class="submit-view">
<view>在线客服</view>
<view><u-button type="info" shape="circle" size="mini">撤销申请</u-button></view>
</view> -->
</view>
</template>
<script>
import {
getServiceDetail,
getstoreAfterSaleAddress,
getAfterSaleLog,
} from "@/api/after-sale.js";
import UniIcons from "@/components/uni-icons/uni-icons.vue";
export default {
components: {
UniIcons,
},
data() {
return {
// 售后单状态
serviceStatusList: {
APPLY: "申请售后",
PASS: "通过售后",
REFUSE: "拒绝售后",
BUYER_RETURN: "买家退货，待卖家收货",
SELLER_RE_DELIVERY: "商家换货/补发",
SELLER_CONFIRM: "卖家确认收货",
SELLER_TERMINATION: "卖家终止售后",
BUYER_CONFIRM: "买家确认收货",
BUYER_CANCEL: "买家取消售后",
WAIT_REFUND: "等待平台退款",
COMPLETE: "完成售后",
},
// 售后类型
serviceTypeList: {
CANCEL: "取消",
RETURN_GOODS: "退货",
EXCHANGE_GOODS: "换货",
RETURN_MONEY: "退款",
},
orderStatusList: {
UNDELIVERED: "待发货",
UNPAID: "未付款",
PAID: "已付款",
DELIVERED: "已发货",
CANCELLED: "已取消",
COMPLETE: "已完成",
TAKE: "已完成",
},
serviceDetail: {},
logs: [],
allowable: {},
goodsList: [],
change_info: {},
serviceDetail: {},
express_info: {},
imagesList: [],
refundShow: false,
accountShow: false,
bankShow: false,
returnAdressShow: true,
shipInfoShow: false,
sn: "",
};
},
onLoad(options) {
uni.setNavigationBarTitle({
title: "服务单详情",
});
this.sn = options.sn;
this.loadDetail();
this.getAddress();
this.getLog(options.sn);
},
filters: {
statusFilter(val) {
switch (val) {
case "APPLY":
return "售后服务申请成功，等待商家审核";
case "PASS":
return "售后服务申请审核通过";
case "REFUSE":
return "售后服务申请已被商家拒绝，如有疑问请及时联系商家";
case "FULL_COURIER":
return "申请售后的商品已经寄出，等待商家收货";
case "STOCK_IN":
return "商家已将售后商品入库";
case "WAIT_FOR_MANUAL":
return "等待平台进行人工退款";
case "REFUNDING":
return "商家退款中，请您耐心等待";
case "COMPLETED":
return "售后服务已完成，感谢您的支持";
case "ERROR_EXCEPTION":
return "系统生成新订单异常，等待商家手动创建新订单";
case "CLOSED":
return "售后服务已关闭";
case "WAIT_REFUND":
return "等待平台进行退款";
default:
return "";
}
},
refundWayFilter(val) {
switch (val) {
case "OFFLINE":
return "账户退款";
case "OFFLINE":
return "线下退款";
case "ORIGINAL":
return "原路退回";
default:
return "";
}
},
accountTypeFilter(val) {
switch (val) {
case "WEIXINPAY":
return "微信";
case "ALIPAY":
return "支付宝";
case "BANK_TRANSFER":
return "银行卡";
default:
return "";
}
},
},
methods: {
preview(urls, index) {
uni.previewImage({
current: index,
urls: urls,
longPressActions: {
itemList: ["保存图片"],
success: function (data) {},
fail: function (err) {},
},
});
},
getAddress() {
getstoreAfterSaleAddress(this.sn).then((res) => {
if (res.data.success) {
this.change_info = res.data.result;
}
});
},
getLog(sn) {
getAfterSaleLog(sn).then((res) => {
this.logs = res.data.result;
});
},
loadDetail() {
uni.showLoading({
title: "加载中",
});
getServiceDetail(this.sn).then((res) => {
uni.hideLoading();
this.serviceDetail = res.data.result;
this.allowable = this.serviceDetail.allowable;
this.express_info = this.serviceDetail.express_info;
if (this.serviceDetail.serviceType == "RETURN_GOODS") {
this.refundShow = true;
}
this.accountShow =
(this.serviceDetail.serviceType === "RETURN_GOODS" ||
this.serviceDetail.serviceType === "ORDER_CANCEL") &&
this.serviceDetail.refundWay === "OFFLINE";
this.bankShow =
(this.serviceDetail.serviceType === "RETURN_GOODS" ||
this.serviceDetail.serviceType === "ORDER_CANCEL") &&
this.serviceDetail.refundWay === "OFFLINE" &&
this.serviceDetail.accountType === "BANK_TRANSFER";
});
},
gotoGoodsDetail(item) {
uni.navigateTo({
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
});
},
onProgress() {
uni.navigateTo({
url: `./applyProgress?sn=${
this.serviceDetail.sn
}&createTime=${encodeURIComponent(this.serviceDetail.createTime)}
&logs=${encodeURIComponent(JSON.stringify(this.logs))}&serviceStatus=${
this.serviceDetail.serviceStatus
}`,
});
},
},
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.after-sales-goods-detail-view {
background-color: #fff;
.header {
background-color: #f7f7f7;
color: #999999;
font-size: 22rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
line-height: 70rpx;
.header-text {
background-color: #999999;
padding: 10rpx 30rpx;
border-radius: 50rpx;
}
.seller-name {
color: $main-color;
}
}
.apply-info-view {
background: $page-color-base;
}
.goods-item-view {
display: flex;
flex-direction: row;
padding: 20rpx 30rpx;
background-color: #eef1f2;
.goods-info {
padding-left: 30rpx;
flex: 1;
.goods-title {
margin-bottom: 10rpx;
font-size: 28rpx;
color: $font-color-dark;
}
.goods-specs {
font-size: 24rpx;
margin-bottom: 10rpx;
color: #cccccc;
}
.goods-price {
display: flex;
justify-content: space-between;
font-size: 24rpx;
color: #999999;
}
.price {
color: $light-color;
}
}
.goods-num {
width: 60rpx;
color: $main-color;
}
}
.after-num {
margin: 0rpx 30rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 80rpx;
}
}
.apply-detail-view {
background-color: #f7f7f7;
margin-top: 10rpx;
padding: 20rpx;
color: #666666;
.detail-item {
padding: 12rpx;
display: flex;
flex-direction: row;
align-items: center;
font-size: 24rpx;
.title {
padding-left: 10rpx;
width: 140rpx;
}
.value {
padding-left: 40rpx;
}
}
}
.submit-view {
position: fixed;
z-index: 999;
bottom: 0px;
left: 0px;
margin-top: 100rpx;
border: solid 2rpx #f2f2f2;
background-color: #ffffff;
height: 100rpx;
width: 750rpx;
padding: 0rpx 20rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.addr-title {
height: 88rpx;
line-height: 88rpx;
text-align: center;
font-size: 32rpx;
font-weight: bold;
border-bottom: 2rpx solid #d6d6d6;
}
.addr-info {
padding: 50rpx;
font-size: 26rpx;
font-weight: bold;
}
.log-box-bottom {
height: 120rpx;
flex-direction: column;
background-color: rgb(247, 247, 247);
}
.log-box-top {
height: 153rpx;
display: flex;
flex-direction: row;
background-color: rgb(255, 255, 255);
position: absolute;
top: 200rpx;
left: 0rpx;
right: 0rpx;
bottom: 0rpx;
margin-left: 22rpx;
margin-right: 22rpx;
margin-top: 22rpx;
border-radius: 22rpx;
justify-content: space-between;
align-items: center;
padding-bottom: 52rpx;
padding-top: 52rpx;
padding-left: 32rpx;
.top01 {
width: 90%;
font-family: PingFangSC-Regular;
font-size: 28rpx;
line-height: 30rpx;
color: rgb(46, 45, 45);
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
.log-first-show {
flex-direction: row;
margin-top: 16rpx;
margin-right: 44rpx;
font-family: PingFangSC-Regular;
font-size: 22rpx;
color: rgb(140, 140, 140);
line-height: 30rpx;
}
}
}
.status-info {
flex-direction: row;
background-color: $light-color;
.status-info-box {
height: 180rpx;
flex-direction: row;
padding-left: 54rpx;
padding-right: 54rpx;
padding-top: 20rpx;
font-family: PingFangSC-Regular;
color: rgb(255, 255, 255);
background-color: rgba(0, 0, 0, 0);
line-height: 50rpx;
.status-val {
font-size: 32rpx;
}
.status-tip {
font-size: 24rpx;
}
}
}
.info-box {
padding-right: 40rpx 0rpx;
background-color: #eef1f2;
}
</style>

141
pages/order/afterSales/applyProgress.vue Normal file
View File

@@ -0,0 +1,141 @@
<template>
<view>
<view class="info-view">
<view class="header-title-view">
<view class="title">售后单号:</view>
<view>{{ sn }}</view>
</view>
<view class="header-title-view">
<view class="title">申请时间:</view>
<view>{{ createTime }}</view>
</view>
</view>
<view class="info-view">
<view class="header-title-view">
<view>{{ serviceStatus }}</view>
</view>
</view>
<view class="info-view">
<view>
<u-time-line v-if="list.length != 0">
<u-time-line-item>
<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
<template v-slot:content>
<view v-for="(time,index) in list" :key="index">
<view class="u-order-desc">{{time.message}}</view>
<view class="u-order-time">{{time.createTime}}</view>
</view>
</template>
</u-time-line-item>
</u-time-line>
<view v-else>
<u-empty text="暂无审核日志"></u-empty>
</view>
</view>
</view>
</view>
</template>
<script>
import UEmpty from "@/uview-ui/components/u-empty/u-empty.vue";
export default {
components: {
UEmpty
},
data() {
return {
sn: "",
createTime: "",
list: [],
serviceStatus: "",
};
},
onLoad(options) {
this.sn = options.sn;
this.createTime = decodeURIComponent(options.createTime);
this.serviceStatus = this.statusFilter(options.serviceStatus);
this.list = JSON.parse(decodeURIComponent(options.logs));
console.log(options.logs);
// list.forEach(res => {
// res.log_time_str = this.$u.timeFormat(res.log_time, 'yyyy-mm-dd hh:MM:ss');
// })
// this.list = list;
},
methods: {
statusFilter(val) {
switch (val) {
case "APPLY":
return "售后服务申请成功，等待商家审核";
case "PASS":
return "售后服务申请审核通过";
case "REFUSE":
return "售后服务申请已被商家拒绝，如有疑问请及时联系商家";
case "FULL_COURIER":
return "申请售后的商品已经寄出，等待商家收货";
case "STOCK_IN":
return "商家已将售后商品入库";
case "WAIT_FOR_MANUAL":
return "等待平台进行人工退款";
case "REFUNDING":
return "商家退款中，请您耐心等待";
case "COMPLETED":
return "售后服务已完成，感谢您的支持";
case "ERROR_EXCEPTION":
return "系统生成新订单异常，等待商家手动创建新订单";
case "CLOSED":
return "售后服务已关闭";
case "WAIT_REFUND":
return "等待平台进行退款";
default:
return "";
}
},
},
};
</script>
<style lang="scss">
page,
.content {
background: $page-color-base;
height: 100%;
}
.u-order-time {
font-size: 24rpx;
color: #999;
margin: 20rpx 0;
}
.info-view {
margin: 20rpx 0;
border-radius: 20rpx;
background-color: #fff;
padding: 30rpx;
.header-title-view {
display: flex;
flex-direction: row;
align-items: center;
color: #909399;
.title {
width: 160rpx;
}
}
.steps-view {
display: flex;
flex-direction: row;
align-items: center;
color: #909399;
border-bottom: 1px solid $page-color-base;
margin-bottom: 10rpx;
.title {
width: 160rpx;
}
}
}
</style>

81
pages/order/afterSales/applySuccess.vue Normal file
View File

@@ -0,0 +1,81 @@
<template>
<view>
<view class="header">
<u-icon name='checkmark' size="150" color="#ff6b35"></u-icon>
<view class="success-text">售后申请提交成功</view>
<view class="btn-view">
<view class="btn-item">
<u-button ripple class="btn1" shape="circle" @click="toMenu()">查看记录</u-button>
</view>
<view class="btn-item">
<u-button ripple class="btn2" shape="circle" @click="toHome()">回到主页</u-button>
</view>
</view>
</view>
<view class="text-view">
<view style="display: flex; margin-bottom: 20rpx; align-items: center">温馨提示：</view>
<view>• 商品寄回地址将在审核通过后在申请记录中查询。</view>
<view>• 提交服务单后，售后专员可能与您电话沟通，请保持手机畅通。</view>
<view>• 退货处理成功后退款金额将原路返回到您的支持账户中；</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
methods: {
toMenu() {
uni.redirectTo({
url: "/pages/order/afterSales/afterSales",
});
},
toHome() {
uni.switchTab({
url: "/pages/tabbar/home/index",
});
},
},
};
</script>
<style lang="scss">
page {
background: $page-color-base;
padding-bottom: 100rpx;
}
.btn1 {
background: $light-color;
color: #fff;
}
.btn2 {
color: $light-color;
}
.header {
background-color: #fff;
height: 500rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.success-text {
font-size: 40rpx;
font-weight: 400;
margin: 20rpx 0;
}
.btn-view {
display: flex;
flex-direction: row;
margin: 40rpx 0rpx;
.btn-item {
margin: 0rpx 20rpx;
}
}
}
.text-view {
margin: 40rpx;
color: #909399;
}
</style>