项目初始化
This commit is contained in:
jerry
351
pages/order/aftersale/apply.vue
Normal file
351
pages/order/aftersale/apply.vue
Normal file
@@ -0,0 +1,351 @@
|
||||
<!-- 售后申请 -->
|
||||
<template>
|
||||
<s-layout title="申请售后">
|
||||
<!-- 售后商品 -->
|
||||
<view class="goods-box">
|
||||
<s-goods-item
|
||||
:img="state.item.picUrl"
|
||||
:title="state.item.spuName"
|
||||
:skuText="state.item.properties?.map((property) => property.valueName).join(' ')"
|
||||
:price="state.item.price"
|
||||
:num="state.item.count"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<uni-forms ref="form" v-model="formData" :rules="rules" label-position="top">
|
||||
<!-- 售后类型 -->
|
||||
<view class="refund-item">
|
||||
<view class="item-title ss-m-b-20">售后类型</view>
|
||||
<view class="ss-flex-col">
|
||||
<radio-group @change="onRefundChange">
|
||||
<label
|
||||
class="ss-flex ss-col-center ss-p-y-10"
|
||||
v-for="(item, index) in state.wayList"
|
||||
:key="index"
|
||||
>
|
||||
<radio
|
||||
:checked="formData.type === item.value"
|
||||
color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.8)"
|
||||
:value="item.value"
|
||||
/>
|
||||
<view class="item-value ss-m-l-8">{{ item.text }}</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 退款金额 -->
|
||||
<view class="refund-item ss-flex ss-col-center ss-row-between" @tap="state.showModal = true">
|
||||
<text class="item-title">退款金额</text>
|
||||
<view class="ss-flex refund-cause ss-col-center">
|
||||
<text class="ss-m-r-20">￥{{ fen2yuan(state.item.payPrice) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 申请原因 -->
|
||||
<view class="refund-item ss-flex ss-col-center ss-row-between" @tap="state.showModal = true">
|
||||
<text class="item-title">申请原因</text>
|
||||
<view class="ss-flex refund-cause ss-col-center">
|
||||
<text class="ss-m-r-20" v-if="formData.applyReason">{{ formData.applyReason }}</text>
|
||||
<text class="ss-m-r-20" v-else>请选择申请原因~</text>
|
||||
<text class="cicon-forward" style="height: 28rpx"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 留言 -->
|
||||
<view class="refund-item">
|
||||
<view class="item-title ss-m-b-20">相关描述</view>
|
||||
<view class="describe-box">
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
class="describe-content"
|
||||
type="textarea"
|
||||
maxlength="120"
|
||||
autoHeight
|
||||
v-model="formData.applyDescription"
|
||||
placeholder="客官~请描述您遇到的问题，建议上传照片"
|
||||
/>
|
||||
<!-- TODO 芋艿：上传的测试 -->
|
||||
<view class="upload-img">
|
||||
<s-uploader
|
||||
v-model:url="formData.images"
|
||||
fileMediatype="image"
|
||||
limit="9"
|
||||
mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<su-fixed bottom placeholder>
|
||||
<view class="foot-wrap">
|
||||
<view class="foot_box ss-flex ss-col-center ss-row-between ss-p-x-30">
|
||||
<button class="ss-reset-button contcat-btn" @tap="sheep.$router.go('/pages/chat/index')">
|
||||
联系客服
|
||||
</button>
|
||||
<button class="ss-reset-button ui-BG-Main-Gradient sub-btn" @tap="submit">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
</su-fixed>
|
||||
|
||||
<!-- 申请原因弹窗 -->
|
||||
<su-popup :show="state.showModal" round="10" :showClose="true" @close="state.showModal = false">
|
||||
<view class="modal-box page_box">
|
||||
<view class="modal-head item-title head_box ss-flex ss-row-center ss-col-center">
|
||||
申请原因
|
||||
</view>
|
||||
<view class="modal-content content_box">
|
||||
<radio-group @change="onChange">
|
||||
<label class="radio ss-flex ss-col-center" v-for="item in state.reasonList" :key="item">
|
||||
<view class="ss-flex-1 ss-p-20">{{ item }}</view>
|
||||
<radio
|
||||
:value="item"
|
||||
color="var(--ui-BG-Main)"
|
||||
:checked="item === state.currentValue"
|
||||
/>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="modal-foot foot_box ss-flex ss-row-center ss-col-center">
|
||||
<button class="ss-reset-button close-btn ui-BG-Main-Gradient" @tap="onReason">
|
||||
确定
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { reactive, ref } from 'vue';
|
||||
import OrderApi from '@/sheep/api/trade/order';
|
||||
import TradeConfigApi from '@/sheep/api/trade/config';
|
||||
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import AfterSaleApi from '@/sheep/api/trade/afterSale';
|
||||
import { WxaSubscribeTemplate } from '@/sheep/util/const';
|
||||
|
||||
const form = ref(null);
|
||||
const state = reactive({
|
||||
orderId: 0, // 订单编号
|
||||
itemId: 0, // 订单项编号
|
||||
order: {}, // 订单
|
||||
item: {}, // 订单项
|
||||
config: {}, // 交易配置
|
||||
|
||||
// 售后类型
|
||||
wayList: [
|
||||
{
|
||||
text: '仅退款',
|
||||
value: '10',
|
||||
},
|
||||
{
|
||||
text: '退款退货',
|
||||
value: '20',
|
||||
},
|
||||
],
|
||||
reasonList: [], // 可选的申请原因数组
|
||||
showModal: false, // 是否显示申请原因弹窗
|
||||
currentValue: '', // 当前选择的售后原因
|
||||
});
|
||||
let formData = reactive({
|
||||
way: '',
|
||||
applyReason: '',
|
||||
applyDescription: '',
|
||||
images: [],
|
||||
});
|
||||
const rules = reactive({});
|
||||
|
||||
// 提交表单
|
||||
async function submit() {
|
||||
let data = {
|
||||
orderItemId: state.itemId,
|
||||
refundPrice: state.item.payPrice,
|
||||
...formData,
|
||||
};
|
||||
const { code } = await AfterSaleApi.createAfterSale(data);
|
||||
if (code === 0) {
|
||||
uni.showToast({
|
||||
title: '申请成功',
|
||||
});
|
||||
sheep.$router.go('/pages/order/aftersale/list');
|
||||
}
|
||||
}
|
||||
|
||||
// 选择售后类型
|
||||
function onRefundChange(e) {
|
||||
formData.way = e.detail.value;
|
||||
// 清理理由
|
||||
state.reasonList =
|
||||
formData.way === '10'
|
||||
? state.config.afterSaleRefundReasons || []
|
||||
: state.config.afterSaleReturnReasons || [];
|
||||
formData.applyReason = '';
|
||||
state.currentValue = '';
|
||||
}
|
||||
|
||||
// 选择申请原因
|
||||
function onChange(e) {
|
||||
state.currentValue = e.detail.value;
|
||||
}
|
||||
|
||||
// 确定
|
||||
function onReason() {
|
||||
formData.applyReason = state.currentValue;
|
||||
state.showModal = false;
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
// 解析参数
|
||||
if (!options.orderId || !options.itemId) {
|
||||
sheep.$helper.toast(`缺少订单信息，请检查`);
|
||||
return;
|
||||
}
|
||||
state.orderId = options.orderId;
|
||||
state.itemId = parseInt(options.itemId);
|
||||
|
||||
// 读取订单信息
|
||||
const { code, data } = await OrderApi.getOrder(state.orderId);
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.order = data;
|
||||
state.item = data.items.find((item) => item.id === state.itemId) || {};
|
||||
|
||||
// 设置选项
|
||||
if (state.order.status === 10) {
|
||||
state.wayList.splice(1, 1);
|
||||
}
|
||||
|
||||
// 读取配置
|
||||
state.config = (await TradeConfigApi.getTradeConfig()).data;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
// margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
// 售后项目
|
||||
.refund-item {
|
||||
background-color: #fff;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
padding: 30rpx;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
// 留言
|
||||
.describe-box {
|
||||
width: 690rpx;
|
||||
background: rgba(249, 250, 251, 1);
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.describe-content {
|
||||
height: 200rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
// 联系方式
|
||||
.input-box {
|
||||
height: 84rpx;
|
||||
background: rgba(249, 250, 251, 1);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
background: #fff;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.foot-wrap {
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.foot_box {
|
||||
height: 100rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.sub-btn {
|
||||
width: 336rpx;
|
||||
line-height: 74rpx;
|
||||
border-radius: 38rpx;
|
||||
color: rgba(#fff, 0.9);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.contcat-btn {
|
||||
width: 336rpx;
|
||||
line-height: 74rpx;
|
||||
background: rgba(238, 238, 238, 1);
|
||||
border-radius: 38rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
width: 750rpx;
|
||||
// height: 680rpx;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
background: #fff;
|
||||
|
||||
.modal-head {
|
||||
height: 100rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.modal-foot {
|
||||
.close-btn {
|
||||
width: 710rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
color: rgba(#fff, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.success-box {
|
||||
width: 600rpx;
|
||||
padding: 90rpx 0 64rpx 0;
|
||||
|
||||
.cicon-check-round {
|
||||
font-size: 96rpx;
|
||||
color: #04b750;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.success-btn {
|
||||
width: 492rpx;
|
||||
height: 70rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main-gradient), var(--ui-BG-Main));
|
||||
border-radius: 35rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
379
pages/order/aftersale/detail.vue
Normal file
379
pages/order/aftersale/detail.vue
Normal file
@@ -0,0 +1,379 @@
|
||||
<!-- 售后详情 -->
|
||||
<template>
|
||||
<s-layout title="售后详情" :navbar="!isEmpty(state.info) && state.loading ? 'inner' : 'normal'">
|
||||
<view class="content_box" v-if="!isEmpty(state.info) && state.loading">
|
||||
<!-- 步骤条 -->
|
||||
<view
|
||||
class="steps-box ss-flex"
|
||||
:style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 88) + 'rpx',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<view class="ss-flex">
|
||||
<view class="steps-item" v-for="(item, index) in state.list" :key="index">
|
||||
<view class="ss-flex">
|
||||
<text
|
||||
class="sicon-circleclose"
|
||||
v-if="state.list.length - 1 === index && [61, 62, 63].includes(state.info.status)"
|
||||
/>
|
||||
<text
|
||||
class="sicon-circlecheck"
|
||||
v-else
|
||||
:class="state.active >= index ? 'activity-color' : 'info-color'"
|
||||
/>
|
||||
|
||||
<view
|
||||
v-if="state.list.length - 1 !== index"
|
||||
class="line"
|
||||
:class="state.active >= index ? 'activity-bg' : 'info-bg'"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
class="steps-item-title"
|
||||
:class="state.active >= index ? 'activity-color' : 'info-color'"
|
||||
>
|
||||
{{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务状态 -->
|
||||
<view
|
||||
class="status-box ss-flex ss-col-center ss-row-between ss-m-x-20"
|
||||
@tap="sheep.$router.go('/pages/order/aftersale/log', { id: state.id })"
|
||||
>
|
||||
<view class="">
|
||||
<view class="status-text">
|
||||
{{ formatAfterSaleStatusDescription(state.info) }}
|
||||
</view>
|
||||
<view class="status-time">
|
||||
{{ sheep.$helper.timeFormat(state.info.updateTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</view>
|
||||
</view>
|
||||
<text class="ss-iconfont _icon-forward" style="color: #666" />
|
||||
</view>
|
||||
|
||||
<!-- 退款金额 -->
|
||||
<view class="aftersale-money ss-flex ss-col-center ss-row-between">
|
||||
<view class="aftersale-money--title">退款总额</view>
|
||||
<view class="aftersale-money--num">￥{{ fen2yuan(state.info.refundPrice) }}</view>
|
||||
</view>
|
||||
<!-- 服务商品 -->
|
||||
<view class="order-shop">
|
||||
<s-goods-item
|
||||
:img="state.info.picUrl"
|
||||
:title="state.info.spuName"
|
||||
:titleWidth="480"
|
||||
:skuText="state.info.properties.map((property) => property.valueName).join(' ')"
|
||||
:num="state.info.count"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 服务内容 -->
|
||||
<view class="aftersale-content">
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">服务单号：</view>
|
||||
<view class="item-content ss-m-r-16">{{ state.info.no }}</view>
|
||||
<button class="ss-reset-button copy-btn" @tap="onCopy">复制</button>
|
||||
</view>
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">申请时间：</view>
|
||||
<view class="item-content">
|
||||
{{ sheep.$helper.timeFormat(state.info.createTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">售后类型：</view>
|
||||
<view class="item-content">{{ state.info.way === 10 ? '仅退款' : '退款退货' }}</view>
|
||||
</view>
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">申请原因：</view>
|
||||
<view class="item-content">{{ state.info.applyReason }}</view>
|
||||
</view>
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">相关描述：</view>
|
||||
<view class="item-content">{{ state.info.applyDescription }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作区 -->
|
||||
<s-empty
|
||||
v-if="isEmpty(state.info) && state.loading"
|
||||
icon="/static/order-empty.png"
|
||||
text="暂无该订单售后详情"
|
||||
/>
|
||||
<su-fixed bottom placeholder bg="bg-white" v-if="!isEmpty(state.info)">
|
||||
<view class="foot_box">
|
||||
<button
|
||||
class="ss-reset-button btn"
|
||||
v-if="state.info.buttons?.includes('cancel')"
|
||||
@tap="onApply(state.info.id)"
|
||||
>
|
||||
取消申请
|
||||
</button>
|
||||
<button
|
||||
class="ss-reset-button btn"
|
||||
v-if="state.info.buttons?.includes('delivery')"
|
||||
@tap="sheep.$router.go('/pages/order/aftersale/return-delivery', { id: state.info.id })"
|
||||
>
|
||||
填写退货
|
||||
</button>
|
||||
<button
|
||||
class="ss-reset-button contcat-btn btn"
|
||||
@tap="sheep.$router.go('/pages/chat/index')"
|
||||
>
|
||||
联系客服
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import { isEmpty } from 'lodash-es';
|
||||
import {
|
||||
fen2yuan,
|
||||
formatAfterSaleStatusDescription,
|
||||
handleAfterSaleButtons,
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
import AfterSaleApi from '@/sheep/api/trade/afterSale';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
|
||||
const state = reactive({
|
||||
id: 0, // 售后编号
|
||||
info: {}, // 收货信息
|
||||
loading: false,
|
||||
active: 0, // 在 list 的激活位置
|
||||
list: [
|
||||
{
|
||||
title: '提交申请',
|
||||
},
|
||||
{
|
||||
title: '处理中',
|
||||
},
|
||||
{
|
||||
title: '完成',
|
||||
},
|
||||
], // 时间轴
|
||||
});
|
||||
|
||||
function onApply(id) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要取消此申请吗？',
|
||||
success: async function (res) {
|
||||
if (!res.confirm) {
|
||||
return;
|
||||
}
|
||||
const { code } = await AfterSaleApi.cancelAfterSale(id);
|
||||
if (code === 0) {
|
||||
await getDetail(id);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 复制
|
||||
const onCopy = () => {
|
||||
sheep.$helper.copyText(state.info.no);
|
||||
};
|
||||
|
||||
async function getDetail(id) {
|
||||
state.loading = true;
|
||||
const { code, data } = await AfterSaleApi.getAfterSale(id);
|
||||
if (code !== 0) {
|
||||
state.info = null;
|
||||
return;
|
||||
}
|
||||
state.info = data;
|
||||
handleAfterSaleButtons(state.info);
|
||||
|
||||
// 处理时间轴
|
||||
if ([10].includes(state.info.status)) {
|
||||
state.active = 0;
|
||||
} else if ([20, 30].includes(state.info.status)) {
|
||||
state.active = 1;
|
||||
} else if ([40, 50].includes(state.info.status)) {
|
||||
state.active = 2;
|
||||
} else if ([61, 62, 63].includes(state.info.status)) {
|
||||
state.active = 2;
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (!options.id) {
|
||||
sheep.$helper.toast(`缺少订单信息，请检查`);
|
||||
return;
|
||||
}
|
||||
state.id = options.id;
|
||||
getDetail(options.id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 步骤条
|
||||
.steps-box {
|
||||
width: 100%;
|
||||
height: 190rpx;
|
||||
background: v-bind(headerBg) no-repeat,
|
||||
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
background-size: 750rpx 100%;
|
||||
padding-left: 72rpx;
|
||||
|
||||
.steps-item {
|
||||
.sicon-circleclose {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sicon-circlecheck {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.steps-item-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
margin-top: 16rpx;
|
||||
margin-left: -36rpx;
|
||||
width: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-color {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.info-color {
|
||||
color: rgba(#fff, 0.4);
|
||||
}
|
||||
|
||||
.activity-bg {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.info-bg {
|
||||
background: rgba(#fff, 0.4);
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 270rpx;
|
||||
height: 4rpx;
|
||||
}
|
||||
|
||||
// 服务状态
|
||||
.status-box {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx 20rpx 0px 0px;
|
||||
padding: 20rpx;
|
||||
margin-top: -20rpx;
|
||||
|
||||
.status-text {
|
||||
font-size: 28rpx;
|
||||
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.status-time {
|
||||
font-size: 24rpx;
|
||||
|
||||
font-weight: 400;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// 退款金额
|
||||
.aftersale-money {
|
||||
background-color: #fff;
|
||||
height: 98rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 20rpx;
|
||||
|
||||
.aftersale-money--title {
|
||||
font-size: 28rpx;
|
||||
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
|
||||
.aftersale-money--num {
|
||||
font-size: 28rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #ff3000;
|
||||
}
|
||||
}
|
||||
|
||||
// order-shop
|
||||
.order-shop {
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
}
|
||||
|
||||
// 服务内容
|
||||
.aftersale-content {
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
margin: 0 20rpx;
|
||||
|
||||
.aftersale-item {
|
||||
height: 60rpx;
|
||||
|
||||
.copy-btn {
|
||||
background: #eeeeee;
|
||||
color: #333;
|
||||
border-radius: 20rpx;
|
||||
width: 75rpx;
|
||||
height: 40rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 底部功能
|
||||
.foot_box {
|
||||
height: 100rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.btn {
|
||||
width: 160rpx;
|
||||
line-height: 60rpx;
|
||||
background: rgba(238, 238, 238, 1);
|
||||
border-radius: 30rpx;
|
||||
padding: 0;
|
||||
margin-right: 20rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
210
pages/order/aftersale/list.vue
Normal file
210
pages/order/aftersale/list.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<!-- 售后列表 -->
|
||||
<template>
|
||||
<s-layout title="售后列表">
|
||||
<!-- tab -->
|
||||
<su-sticky bgColor="#fff">
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
:scrollable="false"
|
||||
@change="onTabsChange"
|
||||
:current="state.currentTab"
|
||||
/>
|
||||
</su-sticky>
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无数据" />
|
||||
<!-- 列表 -->
|
||||
<view v-if="state.pagination.total > 0">
|
||||
<view
|
||||
class="list-box ss-m-y-20"
|
||||
v-for="order in state.pagination.list"
|
||||
:key="order.id"
|
||||
@tap="sheep.$router.go('/pages/order/aftersale/detail', { id: order.id })"
|
||||
>
|
||||
<view class="order-head ss-flex ss-col-center ss-row-between">
|
||||
<text class="no">服务单号：{{ order.no }}</text>
|
||||
<text class="state">{{ formatAfterSaleStatus(order) }}</text>
|
||||
</view>
|
||||
<s-goods-item
|
||||
:img="order.picUrl"
|
||||
:title="order.spuName"
|
||||
:skuText="order.properties.map((property) => property.valueName).join(' ')"
|
||||
:price="order.refundPrice"
|
||||
/>
|
||||
<view class="apply-box ss-flex ss-col-center ss-row-between border-bottom ss-p-x-20">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<view class="title ss-m-r-20">{{ order.way === 10 ? '仅退款' : '退款退货' }}</view>
|
||||
<view class="value">{{ formatAfterSaleStatusDescription(order) }}</view>
|
||||
</view>
|
||||
<text class="_icon-forward"></text>
|
||||
</view>
|
||||
<view class="tool-btn-box ss-flex ss-col-center ss-row-right ss-p-r-20">
|
||||
<!-- TODO 功能缺失：填写退货信息 -->
|
||||
<view>
|
||||
<button
|
||||
class="ss-reset-button tool-btn"
|
||||
@tap.stop="onApply(order.id)"
|
||||
v-if="order?.buttons.includes('cancel')"
|
||||
>取消申请</button
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadMore"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import _ from 'lodash-es';
|
||||
import {
|
||||
formatAfterSaleStatus,
|
||||
formatAfterSaleStatusDescription,
|
||||
handleAfterSaleButtons,
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
import AfterSaleApi from '@/sheep/api/trade/afterSale';
|
||||
import { resetPagination } from '@/sheep/util';
|
||||
|
||||
const state = reactive({
|
||||
currentTab: 0,
|
||||
showApply: false,
|
||||
pagination: {
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
loadStatus: '',
|
||||
});
|
||||
|
||||
// TODO 芋艿：优化点，增加筛选
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
// {
|
||||
// name: '申请中',
|
||||
// value: 'nooper',
|
||||
// },
|
||||
// {
|
||||
// name: '处理中',
|
||||
// value: 'ing',
|
||||
// },
|
||||
// {
|
||||
// name: '已完成',
|
||||
// value: 'completed',
|
||||
// },
|
||||
// {
|
||||
// name: '已拒绝',
|
||||
// value: 'refuse',
|
||||
// },
|
||||
];
|
||||
|
||||
// 切换选项卡
|
||||
function onTabsChange(e) {
|
||||
resetPagination(state.pagination);
|
||||
state.currentTab = e.index;
|
||||
getOrderList();
|
||||
}
|
||||
|
||||
// 获取售后列表
|
||||
async function getOrderList() {
|
||||
state.loadStatus = 'loading';
|
||||
let { data, code } = await AfterSaleApi.getAfterSalePage({
|
||||
// type: tabMaps[state.currentTab].value,
|
||||
pageNo: state.pagination.pageNo,
|
||||
pageSize: state.pagination.pageSize,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
data.list.forEach((order) => handleAfterSaleButtons(order));
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
}
|
||||
|
||||
function onApply(orderId) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要取消此申请吗？',
|
||||
success: async function (res) {
|
||||
if (!res.confirm) {
|
||||
return;
|
||||
}
|
||||
const { code } = await AfterSaleApi.cancelAfterSale(orderId);
|
||||
if (code === 0) {
|
||||
resetPagination(state.pagination);
|
||||
await getOrderList();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (options.type) {
|
||||
state.currentTab = options.type;
|
||||
}
|
||||
await getOrderList();
|
||||
});
|
||||
|
||||
// 加载更多
|
||||
function loadMore() {
|
||||
if (state.loadStatus === 'noMore') {
|
||||
return;
|
||||
}
|
||||
state.pagination.pageNo++;
|
||||
getOrderList();
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadMore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-box {
|
||||
background-color: #fff;
|
||||
|
||||
.order-head {
|
||||
padding: 0 25rpx;
|
||||
height: 77rpx;
|
||||
}
|
||||
|
||||
.apply-box {
|
||||
height: 82rpx;
|
||||
|
||||
.title {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 22rpx;
|
||||
color: $dark-6;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-btn-box {
|
||||
height: 100rpx;
|
||||
|
||||
.tool-btn {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
background: #f6f6f6;
|
||||
border-radius: 30rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
77
pages/order/aftersale/log-item.vue
Normal file
77
pages/order/aftersale/log-item.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<!-- 售后日志的每一项展示 -->
|
||||
<template>
|
||||
<view class="log-item ss-flex">
|
||||
<view class="log-icon ss-flex-col ss-col-center ss-m-r-20">
|
||||
<text class="cicon-title" :class="index === 0 ? 'activity-color' : ''" />
|
||||
<view v-if="data.length - 1 !== index" class="line" />
|
||||
</view>
|
||||
<view>
|
||||
<view class="text">{{ item.content }}</view>
|
||||
<view class="date">
|
||||
{{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object, // 当前日志
|
||||
default() {},
|
||||
},
|
||||
index: {
|
||||
type: Number, // item 在 data 的下标
|
||||
default: 0,
|
||||
},
|
||||
data: {
|
||||
type: Object, // 日志列表
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.log-item {
|
||||
align-items: stretch;
|
||||
}
|
||||
.log-icon {
|
||||
height: inherit;
|
||||
.cicon-title {
|
||||
font-size: 30rpx;
|
||||
color: #dfdfdf;
|
||||
}
|
||||
.activity-color {
|
||||
color: #60bd45;
|
||||
}
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #dfdfdf;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
.richtext {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
margin: 20rpx 0 0 0;
|
||||
}
|
||||
.content-img {
|
||||
margin-top: 20rpx;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
.date {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
</style>
|
||||
38
pages/order/aftersale/log.vue
Normal file
38
pages/order/aftersale/log.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<!-- 售后日志列表 -->
|
||||
<template>
|
||||
<s-layout title="售后进度">
|
||||
<view class="log-box">
|
||||
<view v-for="(item, index) in state.list" :key="item.id">
|
||||
<log-item :item="item" :index="index" :data="state.list" />
|
||||
</view>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import logItem from './log-item.vue';
|
||||
import AfterSaleApi from '@/sheep/api/trade/afterSale';
|
||||
|
||||
const state = reactive({
|
||||
list: [],
|
||||
});
|
||||
|
||||
async function getDetail(id) {
|
||||
const { data } = await AfterSaleApi.getAfterSaleLogList(id);
|
||||
state.list = data;
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
state.aftersaleId = options.id;
|
||||
getDetail(options.id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.log-box {
|
||||
padding: 24rpx 24rpx 24rpx 40rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
195
pages/order/aftersale/return-delivery.vue
Normal file
195
pages/order/aftersale/return-delivery.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<s-layout title="退货物流">
|
||||
<view>
|
||||
<form @submit="subRefund" report-submit='true'>
|
||||
<view class='apply-return'>
|
||||
<view class='list borRadius14'>
|
||||
<view class='item acea-row row-between-wrapper' style="display: flex;align-items: center;">
|
||||
<view>物流公司</view>
|
||||
<view v-if="state.expresses.length>0" style="flex:1">
|
||||
<picker mode='selector' class='num' @change="bindPickerChange" :value="state.expressIndex"
|
||||
:range="state.expresses" range-key="name">
|
||||
<view class="picker acea-row row-between-wrapper" style="display: flex;justify-content: space-between;">
|
||||
<view class='reason'>{{ state.expresses[state.expressIndex].name }}</view>
|
||||
<text class='iconfont _icon-forward' />
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class='item textarea acea-row row-between' style="display: flex;align-items: center;">
|
||||
<view>物流单号</view>
|
||||
<input placeholder='请填写物流单号' class='num' name="logisticsNo"
|
||||
placeholder-class='placeholder' />
|
||||
</view>
|
||||
<button class='returnBnt bg-color ss-reset-button ui-BG-Main-Gradient sub-btn'
|
||||
form-type="submit"
|
||||
style="background: linear-gradient(90deg,var(--ui-BG-Main),var(--ui-BG-Main-gradient))!important">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import AfterSaleApi from '@/sheep/api/trade/afterSale';
|
||||
import DeliveryApi from '@/sheep/api/trade/delivery';
|
||||
|
||||
const state = reactive({
|
||||
id: 0, // 售后编号
|
||||
expressIndex: 0, // 选中的 expresses 下标
|
||||
expresses: [], // 可选的快递列表
|
||||
})
|
||||
|
||||
function bindPickerChange(e) {
|
||||
state.expressIndex = e.detail.value;
|
||||
}
|
||||
|
||||
async function subRefund(e) {
|
||||
let data = {
|
||||
id: state.id,
|
||||
logisticsId: state.expresses[state.expressIndex].id,
|
||||
logisticsNo: e.detail.value.logisticsNo,
|
||||
};
|
||||
const { code } = await AfterSaleApi.deliveryAfterSale(data);
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
uni.showToast({
|
||||
title: '填写退货成功',
|
||||
});
|
||||
sheep.$router.go('/pages/order/aftersale/detail', { id: state.id });
|
||||
}
|
||||
|
||||
// 获得快递物流列表
|
||||
async function getExpressList() {
|
||||
const { code, data } = await DeliveryApi.getDeliveryExpressList();
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.expresses = data;
|
||||
}
|
||||
|
||||
onLoad(options => {
|
||||
if (!options.id) {
|
||||
sheep.$helper.toast(`缺少订单信息，请检查`);
|
||||
return
|
||||
}
|
||||
state.id = options.id;
|
||||
// 获得快递物流列表
|
||||
getExpressList();
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.apply-return {
|
||||
padding: 20rpx 30rpx 70rpx 30rpx;
|
||||
}
|
||||
|
||||
.apply-return .list {
|
||||
background-color: #fff;
|
||||
margin-top: 18rpx;
|
||||
padding: 0 24rpx 70rpx 24rpx;
|
||||
}
|
||||
|
||||
.apply-return .list .item {
|
||||
min-height: 90rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.apply-return .list .item .num {
|
||||
color: #282828;
|
||||
margin-left: 27rpx;
|
||||
// width: 227rpx;
|
||||
// text-align: right;
|
||||
}
|
||||
|
||||
.apply-return .list .item .num .picker .reason {
|
||||
width: 385rpx;
|
||||
}
|
||||
|
||||
.apply-return .list .item .num .picker .iconfont {
|
||||
color: #666;
|
||||
font-size: 30rpx;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
|
||||
.apply-return .list .item.textarea {
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
|
||||
.apply-return .list .item textarea {
|
||||
height: 100rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.apply-return .list .item .placeholder {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.apply-return .list .item .title {
|
||||
height: 95rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.apply-return .list .item .title .tip {
|
||||
font-size: 30rpx;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.apply-return .list .item .upload {
|
||||
padding-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.apply-return .list .item .upload .pictrue {
|
||||
border-radius: 14rpx;
|
||||
margin: 22rpx 23rpx 0 0;
|
||||
width: 156rpx;
|
||||
height: 156rpx;
|
||||
position: relative;
|
||||
font-size: 24rpx;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.apply-return .list .item .upload .pictrue:nth-of-type(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.apply-return .list .item .upload .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 14rpx;
|
||||
}
|
||||
|
||||
.apply-return .list .item .upload .pictrue .icon-guanbi1 {
|
||||
position: absolute;
|
||||
font-size: 45rpx;
|
||||
top: -10rpx;
|
||||
right: -10rpx;
|
||||
}
|
||||
|
||||
.apply-return .list .item .upload .pictrue .icon-icon25201 {
|
||||
color: #bfbfbf;
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.apply-return .list .item .upload .pictrue:nth-last-child(1) {
|
||||
border: 1rpx solid #ddd;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.apply-return .returnBnt {
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 86rpx;
|
||||
border-radius: 50rpx;
|
||||
text-align: center;
|
||||
line-height: 86rpx;
|
||||
margin: 43rpx auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user