xsl/meida_applet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

清空代码-初始化yudao

Browse Source
This commit is contained in:
落日晚风
2023-12-18 14:02:47 +08:00
parent aad925ed51
commit 4cb256af6c
102 changed files with 4959 additions and 7836 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/order/aftersale/apply.vue
+278 -239
View File
@@ -1,11 +1,15 @@
<!-- 订单详情 -->
<!-- 售后申请 -->
<template>
<s-layout title="申请售后">
<!-- 售后商品 -->
<view class="goods-box">
<s-goods-item :img="state.goodsItem.goods_image" :title="state.goodsItem.goods_title"
:skuText="state.goodsItem.goods_sku_text" :price="state.goodsItem.goods_price"
:num="state.goodsItem.goods_num"></s-goods-item>
<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">
@@ -14,69 +18,104 @@
<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.refundTypeList" :key="index">
<radio :checked="formData.type === item.value" color="var(--ui-BG-Main)" style="transform: scale(0.8)"
:value="item.value" />
<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.reason">{{ formData.reason }}</text>
<text class="ss-m-r-20" v-if="formData.applyReason">{{ formData.applyReason }}</text>
<text class="ss-m-r-20" v-else>请选择申请原因~</text>
<!-- <text class="ss-iconfont _icon-forward" style="color: #666"></text> -->
<text class="cicon-forward" style="height: 28rpx"></text>
</view>
</view>
<view class="refund-item u-m-b-20">
<view class="item-title ss-m-b-20">联系方式</view>
<view class="input-box u-flex">
<uni-easyinput :inputBorder="false" type="number" v-model="formData.mobile" placeholder="请输入您的联系电话"
paddingLeft="10" />
</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.content" placeholder="客官~请描述您遇到的问题，建议上传照片"></uni-easyinput>
<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' }" />
<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 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-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.refundReasonList" :key="item.value">
<view class="ss-flex-1 ss-p-20">{{ item.title }}</view>
<radio :value="item.value" color="var(--ui-BG-Main)" :checked="item.value === state.currentValue" />
<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>
<button class="ss-reset-button close-btn ui-BG-Main-Gradient" @tap="onReason">
确定
</button>
</view>
</view>
</su-popup>
@@ -84,235 +123,235 @@
</template>
<script setup>
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref, unref } from 'vue';
const form = ref(null);
const state = reactive({
showModal: false,
currentValue: 0,
goodsItem: {},
reasonText: '',
//售后类型
refundTypeList: [
{
text: '仅退款',
value: 'refund',
},
{
text: '退/换货',
value: 'return',
},
{
text: '其他',
value: 'other',
},
],
refundReasonList: [
{
value: '1',
title: '卖家发错货了',
},
{
value: '2',
title: '退运费',
},
{
value: '3',
title: '大小/重量与商品描述不符',
},
{
value: '4',
title: '生产日期/保质期与商品描述不符',
},
{
value: '5',
title: '质量问题',
},
{
value: '6',
title: '我不想要了',
},
],
});
const formData = reactive({
type: '',
reason: '',
mobile: '',
content: '',
images: [],
});
const rules = reactive({});
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';
// 提交表单
async function submit() {
// #ifdef MP
sheep.$platform.useProvider('wechat').subscribeMessage('order_aftersale_change');
// #endif
let data = {
...formData,
order_id: state.goodsItem.order_id,
order_item_id: state.goodsItem.id,
};
const res = await sheep.$api.order.aftersale.apply(data);
if (res.error === 0) {
uni.showToast({
title: res.msg,
});
sheep.$router.go('/pages/order/aftersale/list');
}
}
const form = ref(null);
const state = reactive({
orderId: 0, // 订单编号
itemId: 0, // 订单项编号
order: {}, // 订单
item: {}, // 订单项
config: {}, // 交易配置
//选择售后类型
function onRefundChange(e) {
formData.type = e.detail.value;
}
//选择申请原因
function onChange(e) {
state.currentValue = e.detail.value;
state.refundReasonList.forEach((item) => {
if (item.value === e.detail.value) {
state.reasonText = item.title;
}
// 售后类型
wayList: [
{
text: '仅退款',
value: '10',
},
{
text: '退款退货',
value: '20',
},
],
reasonList: [], // 可选的申请原因数组
showModal: false, // 是否显示申请原因弹窗
currentValue: '' // 当前选择的售后原因
});
}
//确定
function onReason() {
formData.reason = state.reasonText;
state.showModal = false;
}
const formData = reactive({
way: '',
applyReason: '',
applyDescription: '',
images: [],
});
const rules = reactive({});
function onTitle(e, title) {
state.currentValue = e;
state.reasonText = title;
}
onLoad((options) => {
state.goodsItem = JSON.parse(options.item);
});
// 提交表单
async function submit() {
// #ifdef MP
sheep.$platform.useProvider('wechat').subscribeMessage('order_aftersale_change');
// #endif
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;
.item-title {
font-size: 30rpx;
font-weight: bold;
color: rgba(51, 51, 51, 1);
// margin-bottom: 20rpx;
}
.modal-content {
font-size: 28rpx;
}
// 售后项目
.refund-item {
background-color: #fff;
border-bottom: 1rpx solid #f5f5f5;
padding: 30rpx;
.modal-foot {
.close-btn {
width: 710rpx;
line-height: 80rpx;
border-radius: 40rpx;
color: rgba(#fff, 0.9);
&: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;
}
}
}
.success-box {
width: 600rpx;
padding: 90rpx 0 64rpx 0;
.cicon-check-round {
font-size: 96rpx;
color: #04b750;
.goods-box {
background: #fff;
padding: 20rpx;
margin-bottom: 20rpx;
}
.success-title {
font-weight: 500;
color: #333333;
font-size: 32rpx;
.foot-wrap {
height: 100rpx;
width: 100%;
}
.success-btn {
width: 492rpx;
height: 70rpx;
background: linear-gradient(90deg, var(--ui-BG-Main-gradient), var(--ui-BG-Main));
border-radius: 35rpx;
.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>
pages/order/aftersale/detail.vue
+87 -103
View File
@@ -3,26 +3,22 @@
<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',
},
]">
<!-- <uni-steps :options="state.list" :active="state.active" active-color="#fff" /> -->
<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 && state.info.aftersale_status === -2) ||
(state.list.length - 1 == index && state.info.aftersale_status === -1)
"></text>
<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'"></text>
: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 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 }}
@@ -32,28 +28,33 @@
</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.aftersaleId })">
<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">{{ state.info.aftersale_status_desc }}</view>
<view class="status-time">{{ state.info.update_time }}</view>
<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"></text>
</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">￥{{ state.info.refundPrice/100 }}</view>
<view class="aftersale-money--num">￥{{ fen2yuan(state.info.refundPrice) }}</view>
</view>
<!-- 服务商品 -->
<view class="order-shop">
<!-- <s-goods-item :title="state.info.goods_title" :price="state.info.goods_price"
:img="state.info.goods_image" priceColor="#333333" :titleWidth="480"
:skuText="state.info.goods_sku_text" :num="state.info.goods_num"></s-goods-item> -->
<s-goods-item :img=" state.info.picUrl" :title=" state.info.spuName" priceColor="#333333"
:titleWidth="480" :skuText=" state.info.properties.reduce((a,b)=>a+b.valueName+' ','')"
:price=" state.info.refundPrice/100" :num=" state.info.count"></s-goods-item>
<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>
<!-- 服务内容 -->
@@ -71,7 +72,7 @@
</view>
<view class="aftersale-item ss-flex ss-col-center">
<view class="item-title">售后类型：</view>
<view class="item-content">{{ status2[state.info.way] }}</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>
@@ -83,114 +84,97 @@
</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)">
<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.btns?.includes('cancel')"
@tap="onApply(state.info.id)">取消申请</button>
<button class="ss-reset-button btn" v-if="state.info.btns?.includes('delete')"
@tap="onDelete(state.info.id)">删除</button>
<button class="ss-reset-button contcat-btn btn"
@tap="sheep.$router.go('/pages/chat/index')">联系客服</button>
<!-- TODO 功能缺失：填写退货信息 -->
<button class="ss-reset-button btn" v-if="state.info.buttons?.includes('cancel')"
@tap="onApply(state.info.id)">
取消申请
</button>
<button class="ss-reset-button contcat-btn btn" @tap="sheep.$router.go('/pages/chat/index')">
联系客服
</button>
</view>
</su-fixed> -->
</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';
import { onLoad } from '@dcloudio/uni-app';
import { reactive } from 'vue';
import { isEmpty } from 'lodash';
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({
active: 0,
aftersaleId: 0,
info: {},
list: [{
title: '提交申请',
},
{
title: '处理中',
},
],
id: 0, // 售后编号
info: {}, // 收货信息
loading: false,
active: 0, // 在 list 的激活位置
list: [{
title: '提交申请',
}, {
title: '处理中',
}, {
title: '完成'
}], // 时间轴
});
const status2 = {
10: '仅退款',
20: '退货退款'
}
function onApply(orderId) {
function onApply(id) {
uni.showModal({
title: '提示',
content: '确定要取消此申请吗？',
success: async function(res) {
if (res.confirm) {
const {
error
} = await sheep.$api.order.aftersale.cancel(orderId);
if (error === 0) {
getDetail(state.aftersaleId);
}
if (!res.confirm) {
return;
}
const { code } = await AfterSaleApi.cancelAfterSale(id);
if (code === 0) {
await getDetail(id);
}
},
});
}
function onDelete(orderId) {
uni.showModal({
title: '提示',
content: '确定要删除吗？',
success: async function(res) {
if (res.confirm) {
const {
error
} = await sheep.$api.order.aftersale.delete(orderId);
if (error === 0) {
sheep.$router.back();
}
}
},
});
}
const onCopy = () => {
sheep.$helper.copyText(state.info.aftersale_sn);
// 复制
const onCopy = () => {
sheep.$helper.copyText(state.info.no);
};
async function getDetail(id) {
const {
code,
data
} = await sheep.$api.order.aftersale.detail(id);
state.loading = true;
if (code === 0) {
state.info = data;
if (state.info.aftersale_status === -2 || state.info.aftersale_status === -1) {
state.list.push({
title: state.info.aftersale_status_text
});
state.active = 2;
} else {
state.list.push({
title: '完成'
});
state.active = state.info.aftersale_status;
}
} else {
state.info = null;
}
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) => {
state.aftersaleId = options.id;
if (!options.id) {
sheep.$helper.toast(`缺少订单信息，请检查`);
return
}
state.id = options.id;
getDetail(options.id);
});
</script>
pages/order/aftersale/list.vue
+60 -105
View File
@@ -3,92 +3,73 @@
<s-layout title="售后列表">
<!-- tab -->
<su-sticky bgColor="#fff">
<su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab"></su-tabs>
<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="暂无数据">
</s-empty>
<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.data" :key="order.id"
<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">{{ status[order.status] }}</text>
<text class="state">{{ formatAfterSaleStatus(order) }}</text>
</view>
<s-goods-item :img="order.picUrl" :title="order.spuName"
:skuText="order.properties.reduce((a,b)=>a+b.valueName+' ','')" :price="order.refundPrice/100"
:num="order.count"></s-goods-item>
<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">{{ status2[order.way] }}</view>
<!-- <view class="value">{{ order.aftersale_status_desc }}</view> -->
<view class="value">{{ order.applyReason }}</view>
<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">
<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.btns.includes('cancel')">取消申请</button>
v-if="order?.buttons.includes('cancel')">取消申请</button>
</view>
<view>
<button class="ss-reset-button tool-btn" @tap.stop="onDelete(order.id)"
v-if="order.btns.includes('delete')">删除</button>
</view>
</view> -->
</view>
</view>
</view>
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
contentdown: '上拉加载更多',
}" @tap="loadmore" />
}" @tap="loadMore" />
</s-layout>
</template>
<script setup>
import sheep from '@/sheep';
import {
onLoad,
onReachBottom
} from '@dcloudio/uni-app';
import {
computed,
reactive
} from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { reactive } from 'vue';
import _ from 'lodash';
import { formatAfterSaleStatus, formatAfterSaleStatusDescription, handleAfterSaleButtons } from '@/sheep/hooks/useGoods';
import AfterSaleApi from '@/sheep/api/trade/afterSale';
const pagination = {
data: [],
current_page: 1,
total: 1,
last_page: 1,
const paginationNull = {
list: [],
total: 0,
pageNo: 1,
pageSize: 10
};
const state = reactive({
currentTab: 0,
showApply: false,
pagination: {
data: [],
current_page: 1,
total: 1,
last_page: 1,
list: [],
total: 0,
pageNo: 1,
pageSize: 10
},
loadStatus: '',
});
// 字典需要登录 尚未接入 先用固定值代替
const status = {
10: '申请售后',
20: '商品待退货',
30: '商家待收货',
40: '等待退款',
50: '退款成功',
61: '买家取消',
62: '商家拒绝',
63: '商家拒收货'
}
const status2 = {
10: '仅退款',
20: '退货退款'
}
// TODO 芋艿：优化点，增加筛选
const tabMaps = [{
name: '全部',
value: 'all',
@@ -110,38 +91,29 @@
// value: 'refuse',
// },
];
// 切换选项卡
function onTabsChange(e) {
state.pagination = pagination
state.pagination = paginationNull
state.currentTab = e.index;
getOrderList();
}
// 获取售后列表
async function getOrderList(page = 1, list_rows = 5) {
pagination.current_page = page;
async function getOrderList() {
state.loadStatus = 'loading';
let res = await sheep.$api.order.aftersale.list({
let { data, code } = await sheep.$api.order.aftersale.list({
// type: tabMaps[state.currentTab].value,
pageSize: list_rows,
pageNo: page,
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
});
console.log(res, '未处理前售后列表数据')
if (res.code === 0) {
let orderList = _.concat(state.pagination.data, res.data.list);
state.pagination = {
total: res.data.total,
...res.data,
data: orderList,
};
console.log(state.pagination, '售后订单数据')
// if (state.pagination.current_page < state.pagination.last_page) {
state.loadStatus = 'more';
// } else {
// state.loadStatus = 'noMore';
// }
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) {
@@ -149,33 +121,14 @@
title: '提示',
content: '确定要取消此申请吗？',
success: async function(res) {
if (res.confirm) {
const {
error
} = await sheep.$api.order.aftersale.cancel(orderId);
if (error === 0) {
state.pagination = pagination
getOrderList();
}
}
},
});
}
function onDelete(orderId) {
uni.showModal({
title: '提示',
content: '确定要删除吗？',
success: async function(res) {
if (res.confirm) {
const {
error
} = await sheep.$api.order.aftersale.delete(orderId);
if (error === 0) {
state.pagination = pagination
getOrderList();
}
if (!res.confirm) {
return;
}
const { code } = await AfterSaleApi.cancelAfterSale(orderId);
if (code === 0) {
state.pagination = paginationNull
await getOrderList();
}
},
});
}
@@ -184,19 +137,21 @@
if (options.type) {
state.currentTab = options.type;
}
getOrderList();
await getOrderList();
});
// 加载更多
function loadmore() {
// if (state.loadStatus !== 'noMore') {
getOrderList(pagination.current_page + 1);
// }
function loadMore() {
if (state.loadStatus === 'noMore') {
return
}
state.pagination.pageNo++;
getOrderList();
}
// 上拉加载更多
onReachBottom(() => {
loadmore();
loadMore();
});
</script>
pages/order/aftersale/log-item.vue
+10 -32
View File
@@ -1,57 +1,35 @@
<!-- 售后日志的每一项展示 -->
<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' : ''"></text>
<view v-if="data.length - 1 != index" class="line"></view>
<text class="cicon-title" :class="index === 0 ? 'activity-color' : ''" />
<view v-if="data.length - 1 !== index" class="line" />
</view>
<view>
<view class="text">{{ item.log_type_text }}</view>
<mp-html class="richtext" :content="item.content"></mp-html>
<view class="" v-if="item.images?.length">
<scroll-view class="scroll-box" scroll-x scroll-anchoring>
<view class="ss-flex">
<view v-for="i in item.images" :key="i" class="ss-m-r-20">
<su-image
class="content-img"
isPreview
:previewList="state.commentImages"
:current="index"
:src="i"
:height="120"
:width="120"
mode="aspectFit"
></su-image>
</view>
</view>
</scroll-view>
<view class="text">{{ item.content }}</view>
<view class="date">
{{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
</view>
<view class="date">{{ item.create_time }}</view>
</view>
</view>
</template>
<script setup>
import sheep from '@/sheep';
import { reactive } from 'vue';
const props = defineProps({
item: {
type: Object,
type: Object, // 当前日志
default() {},
},
index: {
type: Number,
type: Number, // item 在 data 的下标
default: 0,
},
data: {
type: Object,
type: Object, // 日志列表
default() {},
},
});
const state = reactive({
commentImages: [],
});
props.item.images?.forEach((i) => {
state.commentImages.push(sheep.$url.cdn(i));
});
</script>
<style lang="scss" scoped>
.log-item {
pages/order/aftersale/log.vue
+10 -26
View File
@@ -1,45 +1,29 @@
<!-- 售后进度 -->
<!-- 售后日志列表 -->
<template>
<s-layout title="售后进度">
<view class="log-box">
<view v-for="(item, index) in state.info" :key="item.title">
<log-item :item="item" :index="index" :data="state.info"></log-item>
<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 sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import { computed, reactive } from 'vue';
import { reactive } from 'vue';
import logItem from './log-item.vue';
import AfterSaleApi from '@/sheep/api/trade/afterSale';
const state = reactive({
active: 1,
list: [
{
title: '买家下单',
desc: '2018-11-11',
},
{
title: '卖家发货',
desc: '2018-11-12',
},
{
title: '买家签收',
desc: '2018-11-13',
},
{
title: '交易完成',
desc: '2018-11-14',
},
],
list: [],
});
async function getDetail(id) {
const { data } = await sheep.$api.order.aftersale.detail(id);
state.info = data.logs;
const { data } = await AfterSaleApi.getAfterSaleLogList(id);
state.list = data;
}
onLoad((options) => {
state.aftersaleId = options.id;
getDetail(options.id);