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);
pages/order/confirm.vue
+348 -374
View File
@@ -1,414 +1,388 @@
<template>
<s-layout title="确认订单">
<!-- v-if="state.orderInfo.need_address === 1" -->
<!-- 这个判断先删除 -->
<view class="bg-white address-box ss-m-b-14 ss-r-b-10" @tap="onSelectAddress">
<s-address-item :item="state.addressInfo" :hasBorderBottom="false">
<view class="ss-rest-button"><text class="_icon-forward"></text></view>
</s-address-item>
</view>
<view class="order-card-box ss-m-b-14">
<s-goods-item v-for="item in state.orderInfo.goods_list" :key="item.goods_id"
:img="item.current_sku_price.image || item.goods.image" :title="item.goods.title"
:skuText="item.current_sku_price?.goods_sku_text" :price="item.current_sku_price.price"
:num="item.goods_num" marginBottom="10">
<template #top>
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white">
<view class="item-title">配送方式</view>
<view class="ss-flex ss-col-center">
<text class="item-value">{{ item.dispatch_type_text }}</text>
</view>
</view>
</template>
</s-goods-item>
<s-layout title="确认订单">
<!-- TODO：这个判断先删除 v-if="state.orderInfo.need_address === 1" -->
<view class="bg-white address-box ss-m-b-14 ss-r-b-10" @tap="onSelectAddress">
<s-address-item :item="state.addressInfo" :hasBorderBottom="false">
<view class="ss-rest-button">
<text class="_icon-forward" />
</view>
</s-address-item>
</view>
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white ss-r-10">
<view class="item-title">订单备注</view>
<view class="ss-flex ss-col-center">
<uni-easyinput maxlength="20" placeholder="建议留言前先与商家沟通" v-model="state.orderPayload.remark"
:inputBorder="false" :clearable="false"></uni-easyinput>
</view>
</view>
</view>
<!-- 合计 -->
<view class="bg-white total-card-box ss-p-20 ss-m-b-14 ss-r-10">
<view class="total-box-content border-bottom">
<view class="order-item ss-flex ss-col-center ss-row-between">
<view class="item-title">商品金额</view>
<view class="ss-flex ss-col-center">
<text class="item-value ss-m-r-24">￥{{ state.orderInfo.goods_amount }}</text>
</view>
</view>
<view class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderPayload.order_type === 'score'">
<view class="item-title">扣除积分</view>
<view class="ss-flex ss-col-center">
<image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img"></image>
<text class="item-value ss-m-r-24">{{ state.orderInfo.score_amount }}</text>
</view>
</view>
<view class="order-item ss-flex ss-col-center ss-row-between">
<view class="item-title">运费</view>
<view class="ss-flex ss-col-center">
<text class="item-value ss-m-r-24">+￥{{ state.orderInfo.dispatch_amount }}</text>
</view>
</view>
<view class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderPayload.order_type != 'score'">
<!-- <view v-if="state.orderInfo.coupon_discount_fee > 0" class="order-item ss-flex ss-col-center ss-row-between"> -->
<view class="item-title">优惠券</view>
<view class="ss-flex ss-col-center" @tap="state.showCoupon = true">
<text class="item-value text-red"
v-if="state.orderPayload.coupon_id">-￥{{ state.orderInfo.coupon_discount_fee }}</text>
<text class="item-value"
:class="state.couponInfo.can_use?.length > 0 ? 'text-red' : 'text-disabled'" v-else>{{
state.couponInfo.can_use?.length > 0
? state.couponInfo.can_use?.length + '张可用'
: '暂无可用优惠券'
}}</text>
<!-- 商品信息 -->
<view class="order-card-box ss-m-b-14">
<s-goods-item
v-for="item in state.orderInfo.items"
:key="item.skuId"
:img="item.picUrl"
:title="item.spuName"
:skuText="item.properties.map((property) => property.valueName).join(' ')"
:price="item.price"
:num="item.count"
marginBottom="10"
/>
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white ss-r-10">
<view class="item-title">订单备注</view>
<view class="ss-flex ss-col-center">
<uni-easyinput
maxlength="20"
placeholder="建议留言前先与商家沟通"
v-model="state.orderPayload.remark"
:inputBorder="false"
:clearable="false"
/>
</view>
</view>
</view>
<text class="_icon-forward item-icon"></text>
</view>
</view>
<view class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.promo_infos?.length">
<!-- <view v-if="state.orderInfo.promo_discount_fee > 0" class="order-item ss-flex ss-col-center ss-row-between"> -->
<view class="item-title">活动优惠</view>
<view class="ss-flex ss-col-center" @tap="state.showDiscount = true">
<text class="item-value text-red"> -￥{{ state.orderInfo.promo_discount_fee }} </text>
<text class="_icon-forward item-icon"></text>
</view>
</view>
</view>
<view class="total-box-footer ss-font-28 ss-flex ss-row-right ss-col-center ss-m-r-28">
<view class="total-num ss-m-r-20">共{{ state.totalNumber }}件</view>
<view>合计：</view>
<view class="total-num text-red"> ￥{{ state.orderInfo.pay_fee }} </view>
<view class="ss-flex" v-if="state.orderPayload.order_type === 'score'">
<view class="total-num ss-font-30 text-red ss-m-l-4"> + </view>
<image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img"></image>
<view class="total-num ss-font-30 text-red">{{ state.orderInfo.score_amount }}</view>
</view>
</view>
</view>
<!-- 发票 -->
<view class="bg-white ss-p-20 ss-r-20">
<view class="order-item ss-flex ss-col-center ss-row-between">
<view class="item-title">发票申请</view>
<view class="ss-flex ss-col-center" @tap="onSelectInvoice">
<text class="item-value">{{ state.invoiceInfo.name || '无需开具发票' }}</text>
<text class="_icon-forward item-icon"></text>
</view>
</view>
</view>
<!-- 选择优惠券弹框 -->
<s-coupon-select v-model="state.couponInfo" :show="state.showCoupon" @confirm="onSelectCoupon"
@close="state.showCoupon = false" />
<!-- 满额折扣弹框 -->
<s-discount-list v-model="state.orderInfo" :show="state.showDiscount" @close="state.showDiscount = false" />
<!-- 底部 -->
<su-fixed bottom :opacity="false" bg="bg-white" placeholder :noFixed="false" :index="200">
<view class="footer-box border-top ss-flex ss-row-between ss-p-x-20 ss-col-center">
<view class="total-box-footer ss-flex ss-col-center">
<view class="total-num ss-font-30 text-red"> ￥{{ state.orderInfo.pay_fee }} </view>
<view v-if="state.orderPayload.order_type === 'score'" class="ss-flex">
<view class="total-num ss-font-30 text-red ss-m-l-4">+</view>
<image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img"></image>
<view class="total-num ss-font-30 text-red">{{ state.orderInfo.score_amount }}</view>
</view>
</view>
<!-- 价格信息 -->
<view class="bg-white total-card-box ss-p-20 ss-m-b-14 ss-r-10">
<view class="total-box-content border-bottom">
<view class="order-item ss-flex ss-col-center ss-row-between">
<view class="item-title">商品金额</view>
<view class="ss-flex ss-col-center">
<text class="item-value ss-m-r-24">
￥{{ fen2yuan(state.orderInfo.price.totalPrice) }}
</text>
</view>
</view>
<!-- TODO 芋艿：接入积分 -->
<view
class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderPayload.order_type === 'score'"
>
<view class="item-title">扣除积分</view>
<view class="ss-flex ss-col-center">
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
/>
<text class="item-value ss-m-r-24">{{ state.orderInfo.score_amount }}</text>
</view>
</view>
<view class="order-item ss-flex ss-col-center ss-row-between">
<view class="item-title">运费</view>
<view class="ss-flex ss-col-center">
<text class="item-value ss-m-r-24">
+￥{{ fen2yuan(state.orderInfo.price.deliveryPrice) }}
</text>
</view>
</view>
<!-- 优惠劵：只有 type = 0 普通订单（非拼团、秒杀、砍价），才可以使用优惠劵 -->
<view
class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.type === 0"
>
<view class="item-title">优惠券</view>
<view class="ss-flex ss-col-center" @tap="state.showCoupon = true">
<text class="item-value text-red" v-if="state.orderPayload.couponId > 0">
-￥{{ fen2yuan(state.orderInfo.price.couponPrice) }}
</text>
<text
class="item-value"
:class="state.couponInfo.length > 0 ? 'text-red' : 'text-disabled'"
v-else
>
{{
state.couponInfo.length > 0 ? state.couponInfo.length + ' 张可用' : '暂无可用优惠券'
}}
</text>
<text class="_icon-forward item-icon" />
</view>
</view>
<view
class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.price.discountPrice > 0"
>
<view class="item-title">活动优惠</view>
<view class="ss-flex ss-col-center">
<!-- @tap="state.showDiscount = true" TODO 芋艿：后续要把优惠信息打进去 -->
<text class="item-value text-red">
-￥{{ fen2yuan(state.orderInfo.price.discountPrice) }}
</text>
<text class="_icon-forward item-icon" />
</view>
</view>
</view>
<view class="total-box-footer ss-font-28 ss-flex ss-row-right ss-col-center ss-m-r-28">
<view class="total-num ss-m-r-20">
共{{ state.orderInfo.items.reduce((acc, item) => acc + item.count, 0) }}件
</view>
<view>合计：</view>
<view class="total-num text-red"> ￥{{ fen2yuan(state.orderInfo.price.payPrice) }} </view>
</view>
</view>
<button class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main" @tap="onConfirm">
{{ exchangeNow ? '立即兑换' : '提交订单' }}
</button>
</view>
</su-fixed>
</s-layout>
<!-- 选择优惠券弹框 -->
<s-coupon-select
v-model="state.couponInfo"
:show="state.showCoupon"
@confirm="onSelectCoupon"
@close="state.showCoupon = false"
/>
<!-- 满额折扣弹框 TODO 芋艿：后续要把优惠信息打进去 -->
<s-discount-list
v-model="state.orderInfo"
:show="state.showDiscount"
@close="state.showDiscount = false"
/>
<!-- 底部 -->
<su-fixed bottom :opacity="false" bg="bg-white" placeholder :noFixed="false" :index="200">
<view class="footer-box border-top ss-flex ss-row-between ss-p-x-20 ss-col-center">
<view class="total-box-footer ss-flex ss-col-center">
<view class="total-num ss-font-30 text-red">
￥{{ fen2yuan(state.orderInfo.price.payPrice) }}
</view>
</view>
<button
class="ss-reset-button ui-BG-Main-Gradient ss-r-40 submit-btn ui-Shadow-Main"
@tap="onConfirm"
>
提交订单
</button>
</view>
</su-fixed>
</s-layout>
</template>
<script setup>
import {
reactive,
computed
} from 'vue';
import {
onLoad,
onPageScroll,
onShow
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import {
isEmpty
} from 'lodash';
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import { isEmpty } from 'lodash';
import OrderApi from '@/sheep/api/trade/order';
import CouponApi from '@/sheep/api/promotion/coupon';
import { fen2yuan } from '@/sheep/hooks/useGoods';
const state = reactive({
orderPayload: {},
orderInfo: {},
addressInfo: {},
invoiceInfo: {},
totalNumber: 0,
showCoupon: false,
couponInfo: [],
showDiscount: false,
});
const state = reactive({
orderPayload: {},
orderInfo: {
items: [], // 商品项列表
price: {}, // 价格信息
},
addressInfo: {}, // 选择的收货地址
showCoupon: false, // 是否展示优惠劵
couponInfo: [], // 优惠劵列表
showDiscount: false, // 是否展示营销活动
});
// 立即兑换(立即兑换无需跳转收银台)
const exchangeNow = computed(
() => state.orderPayload.order_type === 'score' && state.orderInfo.pay_fee == 0,
);
// 选择地址
function onSelectAddress() {
uni.$once('SELECT_ADDRESS', (e) => {
changeConsignee(e.addressInfo);
});
sheep.$router.go('/pages/user/address/list');
}
// 选择地址
function onSelectAddress() {
uni.$once('SELECT_ADDRESS', (e) => {
changeConsignee(e.addressInfo);
});
sheep.$router.go('/pages/user/address/list');
}
// 更改收货人地址&计算订单信息
async function changeConsignee(addressInfo = {}) {
if (!isEmpty(addressInfo)) {
state.addressInfo = addressInfo;
}
await getOrderInfo();
}
// 更改收货人地址&计算订单信息
async function changeConsignee(addressInfo = {}) {
if (isEmpty(addressInfo)) {
const {
code,
data
} = await sheep.$api.user.address.default();
console.log(data, '默认收货地址');
if (code === 0 && !isEmpty(data)) {
console.log('执行赋值')
addressInfo = data;
}
}
if (!isEmpty(addressInfo)) {
state.addressInfo = addressInfo;
state.orderPayload.address_id = state.addressInfo.id;
}
getOrderInfo();
}
// 选择优惠券
async function onSelectCoupon(couponId) {
state.orderPayload.couponId = couponId || 0;
await getOrderInfo();
state.showCoupon = false;
}
// 选择优惠券
async function onSelectCoupon(e) {
state.orderPayload.coupon_id = e || 0;
getOrderInfo();
state.showCoupon = false;
}
// 提交订单
function onConfirm() {
if (!state.addressInfo.id) {
sheep.$helper.toast('请选择收货地址');
return;
}
submitOrder();
}
// 选择发票信息
function onSelectInvoice() {
uni.$once('SELECT_INVOICE', (e) => {
state.invoiceInfo = e.invoiceInfo;
state.orderPayload.invoice_id = e.invoiceInfo.id || 0;
});
sheep.$router.go('/pages/user/invoice/list');
}
// 创建订单&跳转
async function submitOrder() {
const { code, data } = await OrderApi.createOrder({
items: state.orderPayload.items,
couponId: state.orderPayload.couponId,
addressId: state.addressInfo.id,
deliveryType: 1, // TODO 芋艿：需要支持【门店自提】
pointStatus: false, // TODO 芋艿：需要支持【积分选择】
});
if (code !== 0) {
return;
}
// 更新购物车列表，如果来自购物车
if (state.orderPayload.items[0].cartId > 0) {
sheep.$store('cart').getList();
}
// 跳转到支付页面
sheep.$router.redirect('/pages/pay/index', {
id: data.payOrderId,
});
}
// 提交订单/立即兑换
function onConfirm() {
if (!state.orderPayload.address_id && state.orderInfo.need_address === 1) {
sheep.$helper.toast('请选择收货地址');
return;
}
// 检查库存 & 计算订单价格
async function getOrderInfo() {
// 计算价格
const { data, code } = await OrderApi.settlementOrder({
items: state.orderPayload.items,
couponId: state.orderPayload.couponId,
addressId: state.addressInfo.id,
deliveryType: 1, // TODO 芋艿：需要支持【门店自提】
pointStatus: false, // TODO 芋艿：需要支持【积分选择】
});
if (code !== 0) {
return;
}
state.orderInfo = data;
// 设置收货地址
if (state.orderInfo.address) {
state.addressInfo = state.orderInfo.address;
}
}
if (exchangeNow.value) {
uni.showModal({
title: '提示',
content: '确定使用积分立即兑换?',
cancelText: '再想想',
success: async function(res) {
if (res.confirm) {
submitOrder();
}
},
});
} else {
submitOrder();
}
}
// 获取可用优惠券
async function getCoupons() {
const { code, data } = await CouponApi.getMatchCouponList(
state.orderInfo.price.payPrice,
state.orderInfo.items.map((item) => item.spuId),
state.orderPayload.items.map((item) => item.skuId),
state.orderPayload.items.map((item) => item.categoryId),
);
if (code === 0) {
state.couponInfo = data;
}
}
// 创建订单&跳转
async function submitOrder() {
const {
error,
data
} = await sheep.$api.order.create(state.orderPayload);
if (error === 0) {
// 更新购物车列表
if (state.orderPayload.from === 'cart') {
sheep.$store('cart').getList();
}
if (exchangeNow.value) {
sheep.$router.redirect('/pages/pay/result', {
orderSN: data.order_sn,
});
} else {
sheep.$router.redirect('/pages/pay/index', {
orderSN: data.order_sn,
});
}
}
}
// 检查库存&计算订单价格
async function getOrderInfo() {
console.log(state.orderPayload, '计算价格传参')
// let {code, data} = await sheep.$api.order.calc(state.orderPayload);
// let data = await sheep.$api.order.calc(state.orderPayload);
console.log(state.orderPayload.items)
let data = await sheep.$api.order.calc({
deliveryType: 1,
pointStatus: false,
items: state.orderPayload.items
});
console.log(data, '修改后的获取订单详细数据')
return;
if (error === 0) {
state.totalNumber = 0;
state.orderInfo = data;
state.orderInfo.goods_list.forEach((item) => {
state.totalNumber += item.goods_num;
});
}
}
// 获取可用优惠券
async function getCoupons() {
const {
error,
data
} = await sheep.$api.order.coupons(state.orderPayload);
if (error === 0) {
state.couponInfo = data;
}
}
onLoad(async (options) => {
console.log(options)
if (options.data) {
state.orderPayload = JSON.parse(options.data);
changeConsignee();
if (state.orderPayload.order_type !== 'score') {
getCoupons();
}
}
});
onLoad(async (options) => {
if (!options.data) {
sheep.$helper.toast('参数不正确，请检查！');
return;
}
state.orderPayload = JSON.parse(options.data);
await getOrderInfo();
await getCoupons();
});
</script>
<style lang="scss" scoped>
:deep() {
.uni-input-wrapper {
width: 320rpx;
}
:deep() {
.uni-input-wrapper {
width: 320rpx;
}
.uni-easyinput__content-input {
font-size: 28rpx;
height: 72rpx;
text-align: right !important;
padding-right: 0 !important;
.uni-easyinput__content-input {
font-size: 28rpx;
height: 72rpx;
text-align: right !important;
padding-right: 0 !important;
.uni-input-input {
font-weight: 500;
color: #333333;
font-size: 26rpx;
height: 32rpx;
margin-top: 4rpx;
}
}
.uni-input-input {
font-weight: 500;
color: #333333;
font-size: 26rpx;
height: 32rpx;
margin-top: 4rpx;
}
}
.uni-easyinput__content {
display: flex !important;
align-items: center !important;
justify-content: right !important;
}
}
.uni-easyinput__content {
display: flex !important;
align-items: center !important;
justify-content: right !important;
}
}
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.order-item {
height: 80rpx;
.order-item {
height: 80rpx;
.item-title {
font-size: 28rpx;
font-weight: 400;
}
.item-title {
font-size: 28rpx;
font-weight: 400;
}
.item-value {
font-size: 28rpx;
font-weight: 500;
font-family: OPPOSANS;
}
.item-value {
font-size: 28rpx;
font-weight: 500;
font-family: OPPOSANS;
}
.text-disabled {
color: #bbbbbb;
}
.text-disabled {
color: #bbbbbb;
}
.item-icon {
color: $dark-9;
}
.item-icon {
color: $dark-9;
}
.remark-input {
text-align: right;
}
.remark-input {
text-align: right;
}
.item-placeholder {
color: $dark-9;
font-size: 26rpx;
text-align: right;
}
}
.item-placeholder {
color: $dark-9;
font-size: 26rpx;
text-align: right;
}
}
.total-box-footer {
height: 90rpx;
.total-box-footer {
height: 90rpx;
.total-num {
color: #333333;
font-family: OPPOSANS;
}
}
.total-num {
color: #333333;
font-family: OPPOSANS;
}
}
.footer-box {
height: 100rpx;
.footer-box {
height: 100rpx;
.submit-btn {
width: 240rpx;
height: 70rpx;
font-size: 28rpx;
font-weight: 500;
.submit-btn {
width: 240rpx;
height: 70rpx;
font-size: 28rpx;
font-weight: 500;
.goto-pay-text {
line-height: 28rpx;
}
}
.goto-pay-text {
line-height: 28rpx;
}
}
.cancel-btn {
width: 240rpx;
height: 80rpx;
font-size: 26rpx;
background-color: #e5e5e5;
color: $dark-9;
}
}
.cancel-btn {
width: 240rpx;
height: 80rpx;
font-size: 26rpx;
background-color: #e5e5e5;
color: $dark-9;
}
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.subtitle {
font-size: 28rpx;
color: #999999;
}
.subtitle {
font-size: 28rpx;
color: #999999;
}
.cicon-checkbox {
font-size: 36rpx;
color: var(--ui-BG-Main);
}
.cicon-checkbox {
font-size: 36rpx;
color: var(--ui-BG-Main);
}
.cicon-box {
font-size: 36rpx;
color: #999999;
}
</style>
.cicon-box {
font-size: 36rpx;
color: #999999;
}
</style>
pages/order/detail.vue
+552 -619
View File
File diff suppressed because it is too large Load Diff
pages/order/dispatch/content.vue
-84
View File
@@ -1,84 +0,0 @@
<template>
<s-layout title="发货内容">
<view class="order-card ss-m-x-20 ss-r-20">
<s-goods-item
:img="state.data.goods_image"
:title="state.data.goods_title"
:skuText="state.data.goods_sku_text"
:price="state.data.goods_price"
:num="state.data.goods_num"
radius="20"
>
<template #priceSuffix>
<button class="ss-reset-button tag-btn" v-if="state.data.status_text">
{{ state.data.status_text }}
</button>
</template>
</s-goods-item>
</view>
<view class="bg-white ss-p-20 ss-m-x-20 ss-r-20">
<view class="title ss-m-b-26">发货信息</view>
<view v-if="state.data.ext?.dispatch_content_type === 'params'">
<view class="desc ss-m-b-20" v-for="item in state.data.ext.dispatch_content" :key="item">
{{ item.title }}: {{ item.content }}
</view>
</view>
<view class="desc" v-else>{{ state.data.ext?.dispatch_content }}</view>
</view>
</s-layout>
</template>
<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive } from 'vue';
import sheep from '@/sheep';
const state = reactive({
data: [],
});
async function getDetail(id, item_id) {
const { error, data } = await sheep.$api.order.itemDetail(id,item_id);
if (error === 0) {
state.data = data;
}
}
onLoad((options) => {
getDetail(options.id, options.item_id);
});
</script>
<style lang="scss" scoped>
.order-card {
padding: 20rpx 0;
.order-sku {
font-size: 24rpx;
font-weight: 400;
color: rgba(153, 153, 153, 1);
width: 450rpx;
margin-bottom: 20rpx;
.order-num {
margin-right: 10rpx;
}
}
.tag-btn {
margin-left: 16rpx;
font-size: 24rpx;
height: 36rpx;
color: var(--ui-BG-Main);
border: 2rpx solid var(--ui-BG-Main);
border-radius: 14rpx;
padding: 0 4rpx;
}
}
.title {
font-size: 28rpx;
font-weight: bold;
color: #333333;
}
.desc {
font-size: 26rpx;
font-weight: 400;
color: #333333;
}
</style>
pages/order/express/list.vue
-104
View File
@@ -1,104 +0,0 @@
<!-- 物流包裹-->
<template>
<s-layout title="物流包裹">
<view class="express-wrap">
<su-sticky bgColor="#FFE2B6">
<view class="header ss-flex ss-p-l-24">{{ state.list.length }}个包裹已派送</view>
</su-sticky>
<view
class="express-box"
v-for="item in state.list"
:key="item.type"
@tap="sheep.$router.go('/pages/order/express/log', { id: item.id, orderId: state.orderId })"
>
<view class="express-box-header ss-flex ss-row-between">
<view class="express-box-header-type">{{ item.status_text }}</view>
<view class="express-box-header-num">{{
item.express_name + ' : ' + item.express_no
}}</view>
</view>
<view class="express-box-content">
<view class="content-address">{{ item.logs[0]?.content }}</view>
<view class="" v-if="item.items?.length">
<scroll-view class="scroll-box" scroll-x scroll-anchoring>
<view class="ss-flex">
<view v-for="i in item.items" :key="i" class="ss-m-r-20"
><image class="content-img" :src="sheep.$url.static(i.goods_image)" />
</view>
</view>
</scroll-view>
</view>
</view>
<view class="express-box-foot">共{{ item.items.length }}件商品</view>
</view>
</view>
</s-layout>
</template>
<script setup>
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import { computed, reactive } from 'vue';
const state = reactive({
list: [],
orderId: '',
});
async function getExpressList(id) {
const { data } = await sheep.$api.order.express(id, '');
state.list = data;
}
onLoad((Option) => {
state.orderId = Option.orderId;
getExpressList(state.orderId);
});
</script>
<style lang="scss" scoped>
.header {
height: 84rpx;
font-size: 30rpx;
font-weight: 500;
color: #a8700d;
}
.express-box {
background: #fff;
padding-bottom: 30rpx;
box-sizing: border-box;
margin-bottom: 20rpx;
.express-box-header {
height: 76rpx;
padding: 0 24rpx;
border-bottom: 2rpx solid rgba(#dfdfdf, 0.5);
.express-box-header-type {
font-size: 26rpx;
font-weight: 500;
color: #999;
}
.express-box-header-num {
font-size: 26rpx;
font-weight: 400;
color: #999999;
}
}
.express-box-content {
padding: 20rpx 24rpx;
.content-address {
font-size: 28rpx;
font-weight: 400;
color: #333333;
line-height: normal;
margin-bottom: 20rpx;
}
.content-img {
width: 180rpx;
height: 180rpx;
}
}
.express-box-foot {
padding: 0 24rpx;
font-size: 24rpx;
font-weight: 400;
color: #999999;
}
}
</style>
pages/order/express/log.vue
+37 -49
View File
@@ -2,65 +2,46 @@
<template>
<s-layout title="物流追踪">
<view class="log-wrap">
<!-- 商品信息 -->
<view class="log-card ss-flex ss-m-20 ss-r-10" v-if="goodsImages.length > 0">
<uni-swiper-dot :info="goodsImages" :current="state.current" mode="round">
<swiper class="swiper-box" @change="change">
<swiper class="swiper-box">
<swiper-item v-for="(item, index) in goodsImages" :key="index">
<image class="log-card-img" :src="sheep.$url.static(item.image)"></image>
<image class="log-card-img" :src="sheep.$url.static(item.image)" />
</swiper-item>
</swiper>
</uni-swiper-dot>
<view class="log-card-msg">
<view class="ss-flex ss-m-b-8">
<view>物流状态：</view>
<view class="warning-color">{{ state.info.status_text }}</view>
</view>
<view class="ss-m-b-8">快递单号：{{ state.info.express_no }}</view>
<view>快递公司：{{ state.info.express_name }}</view>
<!-- TODO 芋艿：优化点：展示状态 -->
<!-- <view class="ss-flex ss-m-b-8">-->
<!-- <view>物流状态：</view>-->
<!-- <view class="warning-color">{{ state.info.status_text }}</view>-->
<!-- </view>-->
<view class="ss-m-b-8">快递单号：{{ state.info.logisticsNo }}</view>
<view>快递公司：{{ state.info.logisticsName }}</view>
</view>
</view>
<!-- 物流轨迹 -->
<view class="log-content ss-m-20 ss-r-10">
<view
class="log-content-box ss-flex"
v-for="(item, index) in state.info.logs"
v-for="(item, index) in state.tracks"
:key="item.title"
>
<view class="log-icon ss-flex-col ss-col-center ss-m-r-20">
<text
v-if="state.info.logs[index].status === state.info.logs[index - 1]?.status"
class="cicon-title"
></text>
<text
v-if="state.info.logs[index].status != state.info.logs[index - 1]?.status"
:class="[
index === 0 ? 'activity-color' : 'info-color',
item.status === 'transport'
? 'sicon-transport'
: item.status === 'delivery'
? 'sicon-delivery'
: item.status === 'collect'
? 'sicon-a-collectmaterials'
: item.status === 'fail' || item.status === 'back' || item.status === 'refuse'
? 'sicon-circleclose'
: item.status === 'signfor'
? 'sicon-circlecheck'
: 'sicon-warning-outline',
]"
></text>
<view v-if="state.info.logs.length - 1 != index" class="line"></view>
<text class="cicon-title" />
<view v-if="state.tracks.length - 1 !== index" class="line" />
</view>
<view class="log-content-msg">
<view
v-if="
item.status_text &&
state.info.logs[index].status != state.info.logs[index - 1]?.status
"
class="log-msg-title ss-m-b-20"
>{{ item.status_text }}</view
>
<!-- TODO 芋艿：优化点：展示状态 -->
<!-- <view class="log-msg-title ss-m-b-20">-->
<!-- {{ item.status_text }}-->
<!-- </view>-->
<view class="log-msg-desc ss-m-b-16">{{ item.content }}</view>
<view class="log-msg-date ss-m-b-40">{{ item.change_date }}</view>
<view class="log-msg-date ss-m-b-40">
{{ sheep.$helper.timeFormat(item.time, 'yyyy-mm-dd hh:MM:ss') }}
</view>
</view>
</view>
</view>
@@ -72,31 +53,38 @@
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import { computed, reactive } from 'vue';
import OrderApi from '@/sheep/api/trade/order';
const state = reactive({
info: [],
current: 0,
tracks: [],
});
const goodsImages = computed(() => {
let array = [];
if (state.info.items) {
state.info.items.forEach((item) => {
array.push({
image: item.goods_image,
image: item.picUrl,
});
});
}
return array;
});
function change(e) {
state.current = e.detail.current;
async function getExpressDetail(id) {
const { data } = await OrderApi.getOrderExpressTrackList(id);
state.tracks = data.reverse();
}
async function getExpressdetail(id, orderId) {
const { data } = await sheep.$api.order.express(id, orderId);
async function getOrderDetail(id) {
const { data } = await OrderApi.getOrder(id)
state.info = data;
}
onLoad((Option) => {
getExpressdetail(Option.id, Option.orderId);
onLoad((options) => {
getExpressDetail(options.id);
getOrderDetail(options.id);
});
</script>
pages/order/invoice.vue
-329
View File
@@ -1,329 +0,0 @@
<!-- 订单详情 -->
<template>
<s-layout title="发票详情" class="invoice-wrap" navbar="inner">
<view
class="invoice-heard ss-flex-col ss-row-right ss-col-center"
:style="[
{
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
paddingTop: Number(statusBarHeight + 88) + 'rpx',
},
]"
>
<view class="ss-flex ss-m-t-32 ss-m-b-32">
<text
class="sicon-warning-line"
v-if="state.data.status === 'waiting' || state.data.status === 'unpaid'"
></text>
<text class="sicon-check-line" v-if="state.data.status === 'finish'"></text>
<view class="invoice-heard-title">{{ state.data.status_text }}</view>
</view>
<view class="ss-flex ss-m-b-52">
<view class="ss-m-r-20 invoice-heard-desc">预计可开发票金额：</view>
<view class="invoice-heard-price">￥{{ state.data.amount }}</view>
</view>
</view>
<view class="invoice-content ss-flex-col ss-col-center">
<view class="ss-m-t-50 ss-m-b-42 invoice-content-title">增值税电子普通发票</view>
<view class="ss-flex ss-m-b-64">
<view v-for="(item, index) in state.info" :key="item.title">
<view class="log-icon ss-flex">
<text class="sicon-circlecheck" v-if="statusNum >= index"></text>
<text class="sicon-unchecked" v-else></text>
<view
v-if="state.info.length - 1 != index"
class="line"
:class="statusNum >= index ? 'activity-color' : ''"
></view>
</view>
<view class="log-title">{{ item.title }}</view>
</view>
</view>
<view class="invoice-content-list ss-flex ss-row-between ss-col-top">
<view class="">
<view class="ss-flex">
<view class="list-title">发票类型</view>
<view class="list-desc">{{ state.data.type_text }}</view>
</view>
<view class="ss-flex">
<view class="list-title">发票抬头</view>
<view class="list-desc">{{ state.data.name }}</view>
</view>
<view class="ss-flex" v-if="state.data.type === 'company'">
<view class="list-title">发票税号</view>
<view class="list-desc">{{ state.data.tax_no }}</view>
</view>
<view class="ss-flex" v-if="state.data.status === 'finish'">
<view class="list-title">实开金额</view>
<view class="list-desc">￥{{ state.data.invoice_amount }}</view>
</view>
<view class="ss-flex" v-if="state.data.status === 'finish'">
<view class="list-title">开票时间</view>
<view class="list-desc">{{ state.data.finish_time }}</view>
</view>
<view class="ss-flex">
<view class="list-title">申请时间</view>
<view class="list-desc">{{ state.data.create_time }}</view>
</view>
</view>
<view
class="invoice-content-img ss-flex-col ss-col-center"
v-if="state.data.status === 'finish'"
>
<su-image
class="invoice-img"
isPreview
:previewList="state.jointImage"
:current="0"
:src="sheep.$url.static('/static/img/shop/order/invoice_thumb.png')"
:height="110"
mode="scaleToFill"
v-if="state.jointImage[0].substr(-4) != '.pdf'"
></su-image>
<!-- TODO: 发票为多个pdf时 -->
<view v-if="state.jointImage[0].substr(-4) == '.pdf'" @tap="onInvoice">
<image
:src="sheep.$url.static('/static/img/shop/order/invoice_thumb.png')"
class="invoice-img"
></image>
</view>
<view class="invoice-img-num">共{{ state.numImage }}张</view>
<view class="invoice-img-title">点击预览发票</view>
</view>
</view>
</view>
<view class="invoice-order ss-m-t-20">
<view class="goods-box" v-for="item in state.data.order_items" :key="item.id">
<s-goods-item
:img="item.goods_image"
:title="item.goods_title"
:skuText="item.goods_sku_text"
:price="item.goods_price"
:num="item.goods_num"
/>
</view>
<view class="invoice-order-list">
<view class="ss-flex">
<view class="list-title">订单状态</view>
<view class="list-desc">{{ state.data.order?.status_text }}</view>
</view>
<view class="ss-flex">
<view class="list-title">订单编号</view>
<view class="list-desc">{{ state.data.order?.order_sn }}</view>
</view>
<view class="ss-flex">
<view class="list-title">下单时间</view>
<view class="list-desc">{{ state.data.order?.create_time }}</view>
</view>
</view>
</view>
</s-layout>
</template>
<script setup>
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import { computed, reactive } from 'vue';
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const headerBg = sheep.$url.css('/static/img/shop/order/invoice_bg.png');
const state = reactive({
info: [
{
title: '订单提交',
},
{
title: '等待开票',
},
{
title: '开票完成',
},
],
data: {},
jointImage: [],
numImage: 0,
});
const statusNum = computed(() => {
if (state.data.status === 'finish') {
return 2;
} else if (state.data.status === 'waiting') {
return 1;
} else {
return 0;
}
});
function onInvoice() {
// #ifdef H5
window.open(state.jointImage);
// #endif
// #ifdef MP || APP-PLUS
uni.downloadFile({
url: state.jointImage[0],
success: function (res) {
var filePath = res.tempFilePath;
uni.openDocument({
filePath: filePath,
showMenu: true,
success: function (res) {
console.log('打开文档成功');
},
});
},
});
// #endif
}
async function getInvoiceDetail(id) {
const { data } = await sheep.$api.order.invoice(id);
state.data = data;
state.data.download_urls?.forEach((i, index) => {
state.numImage = index + 1;
if (i.substr(-4) != '.pdf') {
state.jointImage.push(sheep.$url.static(i));
} else {
state.jointImage.push(sheep.$url.static(i));
}
});
}
onLoad((options) => {
getInvoiceDetail(options.invoiceId);
});
</script>
<style lang="scss" scoped>
.invoice-heard {
width: 100%;
box-sizing: border-box;
background: v-bind(headerBg) no-repeat,
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
background-size: 750rpx 100%;
.sicon-warning-line {
color: #fff;
font-size: 34rpx;
}
.sicon-check-line {
color: #fff;
font-size: 34rpx;
}
.invoice-heard-title {
font-size: 34rpx;
font-weight: 500;
color: #ffffff;
margin-left: 8rpx;
line-height: normal;
}
.invoice-heard-desc {
font-size: 24rpx;
font-weight: 500;
color: #ffffff;
}
.invoice-heard-price {
font-size: 28rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
}
}
.invoice-content {
width: 100%;
position: relative;
z-index: 3;
background: #ffffff;
border-radius: 20rpx;
margin-top: -16rpx;
.invoice-content-title {
font-size: 30rpx;
font-weight: 500;
color: #333333;
}
.log-icon {
.sicon-unchecked {
color: #c2bec2;
font-size: 44rpx;
}
.sicon-circlecheck {
color: #e60a00;
font-size: 44rpx;
}
.line {
width: 158rpx;
height: 6rpx;
background: #f2f2f2;
border: 2rpx solid #ffffff;
}
.activity-color {
background: #e60a00;
}
}
.log-title {
font-size: 26rpx;
font-weight: 500;
color: #333333;
margin-left: -26rpx;
margin-top: 30rpx;
}
.invoice-content-list {
width: 100%;
padding: 0 46rpx 0 30rpx;
box-sizing: border-box;
}
.list-title {
font-size: 26rpx;
font-weight: 500;
color: #999999;
margin-right: 44rpx;
margin-bottom: 36rpx;
}
.list-desc {
font-size: 26rpx;
font-weight: 500;
color: #333333;
margin-bottom: 36rpx;
}
.invoice-img {
width: 200rpx;
height: 110rpx;
}
.invoice-img-num {
width: 216rpx;
height: 40rpx;
background: rgba(#000000, 0.45);
font-size: 24rpx;
font-weight: 500;
color: #ffffff;
text-align: center;
margin-top: -30rpx;
z-index: 1;
}
.invoice-img-title {
font-size: 24rpx;
font-weight: 500;
color: #999999;
}
}
.invoice-order {
width: 100%;
padding-top: 30rpx;
box-sizing: border-box;
background: #fff;
border-radius: 20rpx;
}
.goods-box {
border-bottom: 2rpx solid #dfdfdf;
}
.invoice-order-list {
padding: 40rpx 24rpx 0 24rpx;
.list-title {
font-size: 26rpx;
font-weight: 500;
color: #999999;
margin-right: 44rpx;
margin-bottom: 36rpx;
}
.list-desc {
font-size: 26rpx;
font-weight: 500;
color: #333333;
margin-bottom: 36rpx;
}
}
</style>
pages/order/list.vue
+123 -250
View File
@@ -1,153 +1,71 @@
<!-- 页面 -->
<!-- 订单列表 -->
<template>
<s-layout title="我的订单">
<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/order-empty.png" text="暂无订单"></s-empty>
<s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" />
<view v-if="state.pagination.total > 0">
<view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20" v-for="order in state.pagination.data"
:key="order.id" @tap="onOrderDetail(order.id)">
<view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20" v-for="order in state.pagination.list"
:key="order.id" @tap="onOrderDetail(order.id)">
<view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
<view class="order-no">订单号：{{ order.no }}</view>
<view class="order-state ss-font-26" :class="formatOrderColor(order.status_code)">{{
order.status
}}</view>
<view class="order-state ss-font-26" :class="formatOrderColor(order)">
{{ formatOrderStatus(order) }}
</view>
</view>
<view class="border-bottom" v-for="item in order.items" :key="item.id">
<s-goods-item :img="item.picUrl" :title="item.spuName"
:skuText="item.properties.length>1? item.properties.reduce((items2,items)=>items2.valueName+' '+items.valueName):item.properties[0].valueName"
:price="item.price/100" :score="order.score_amount" :num="item.count">
<template #tool>
<view class="ss-flex">
<!-- <button class="ss-reset-button apply-btn" v-if="item.btns.includes('aftersale')"
@tap.stop="
sheep.$router.go('/pages/order/aftersale/apply', {
item: JSON.stringify(item),
})
">
申请售后
</button>
<button class="ss-reset-button apply-btn" v-if="item.btns.includes('re_aftersale')"
@tap.stop="
sheep.$router.go('/pages/order/aftersale/apply', {
item: JSON.stringify(item),
})
">
重新售后
</button>
<button class="ss-reset-button apply-btn" v-if="item.btns.includes('aftersale_info')"
@tap.stop="
sheep.$router.go('/pages/order/aftersale/detail', {
id: item.ext.aftersale_id,
})
">
售后详情
</button>
<button class="ss-reset-button apply-btn" v-if="item.btns.includes('buy_again')"
@tap.stop="
sheep.$router.go('/pages/goods/index', {
id: item.goods_id,
})
">
再次购买
</button> -->
</view>
</template>
</s-goods-item>
<s-goods-item
:img="item.picUrl"
:title="item.spuName"
:skuText="item.properties.map((property) => property.valueName).join(' ')"
:price="item.price"
:num="item.count"
/>
</view>
<view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
<!-- <view v-if="order.total_discount_fee > 0" class="ss-flex ss-col-center ss-m-r-8">
<view class="discounts-title">优惠:￥</view>
<view class="discounts-money">{{ order.total_discount_fee }}</view>
</view> -->
<!-- <view class="ss-flex ss-col-center ss-m-r-8">
<view class="discounts-title">运费:￥</view>
<view class="discounts-money">{{ order.dispatch_amount }}</view>
</view> -->
<view class="ss-flex ss-col-center">
<view class="discounts-title pay-color">共{{count}}件商品,总金额:</view>
<view class="discounts-money pay-color" v-if="Number(order.payPrice) > 0">
￥{{ order.payPrice/100 }}</view>
<view v-if="order.score_amount && Number(order.payPrice) > 0">+</view>
<view class="discounts-money pay-color ss-flex ss-col-center" v-if="order.score_amount">
<image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img">
</image>
<view>{{ order.score_amount }}</view>
</view>
<view class="discounts-title pay-color">共 {{ order.productCount }} 件商品,总金额:</view>
<view class="discounts-money pay-color">
￥{{ fen2yuan(order.payPrice) }}
</view>
</view>
</view>
<!-- :class="order.btns.length > 3 ? 'ss-row-between' : 'ss-row-right'" -->
<view class="order-card-footer ss-flex ss-col-center ss-p-x-20">
<!-- <su-popover>
<button class="more-btn ss-reset-button" @click.stop>更多</button>
<template #content>
<view class="more-item-box">
<view class="more-item ss-flex ss-col-center ss-reset-button">
<view class="item-title">删除订单</view>
</view>
<view class="more-item ss-flex ss-col-center ss-reset-button">
<view class="item-title">查看发票</view>
</view>
<view class="more-item ss-flex ss-col-center ss-reset-button">
<view class="item-title">评价晒单</view>
</view>
</view>
</template>
</su-popover> -->
<view class="order-card-footer ss-flex ss-col-center ss-p-x-20"
:class="order.buttons.length > 3 ? 'ss-row-between' : 'ss-row-right'">
<view class="ss-flex ss-col-center">
<!-- <button v-if="order.btns.includes('groupon')" class="tool-btn ss-reset-button"
<button v-if="order.buttons.includes('combination')" class="tool-btn ss-reset-button"
@tap.stop="onOrderGroupon(order)">
{{ order.status_code === 'groupon_ing' ? '邀请拼团' : '拼团详情' }}
拼团详情
</button>
<button v-if="order.btns.includes('invoice')" class="tool-btn ss-reset-button"
@tap.stop="onOrderInvoice(order.invoice?.id)">
查看发票
<button v-if="order.buttons.length === 0" class="tool-btn ss-reset-button"
@tap.stop="onOrderDetail(order.id)">
查看详情
</button>
<button v-if="order.btns.length === 0" class="tool-btn ss-reset-button"
@tap.stop="onOrderDetail(order.order_sn)">
查看详情
<button v-if="order.buttons.includes('confirm')" class="tool-btn ss-reset-button"
@tap.stop="onConfirm(order)">
确认收货
</button>
<button v-if="order.btns.includes('confirm')" class="tool-btn ss-reset-button"
@tap.stop="onConfirm(order)">
确认收货
</button>
<button v-if="order.btns.includes('express')" class="tool-btn ss-reset-button"
@tap.stop="onExpress(order.id)">
<button v-if="order.buttons.includes('express')" class="tool-btn ss-reset-button"
@tap.stop="onExpress(order.id)">
查看物流
</button>
<button v-if="order.btns.includes('apply_refund')" class="tool-btn ss-reset-button"
@tap.stop="onRefund(order.id)">
申请退款
</button>
<button v-if="order.btns.includes('re_apply_refund')" class="tool-btn ss-reset-button"
@tap.stop="onRefund(order.id)">
重新退款
</button>
<button v-if="order.btns.includes('cancel')" class="tool-btn ss-reset-button"
@tap.stop="onCancel(order.id)">
<button v-if="order.buttons.includes('cancel')" class="tool-btn ss-reset-button"
@tap.stop="onCancel(order.id)">
取消订单
</button>
<button v-if="order.btns.includes('comment')" class="tool-btn ss-reset-button"
@tap.stop="onComment(order.order_sn)">
评价晒单
<button v-if="order.buttons.includes('comment')" class="tool-btn ss-reset-button"
@tap.stop="onComment(order.id)">
评价
</button>
<button v-if="order.btns.includes('delete')" class="delete-btn ss-reset-button"
@tap.stop="onDelete(order.id)">
<button v-if="order.buttons.includes('delete')" class="delete-btn ss-reset-button"
@tap.stop="onDelete(order.id)">
删除订单
</button>
<button v-if="order.btns.includes('pay')" class="tool-btn ss-reset-button ui-BG-Main-Gradient"
@tap.stop="onPay(order.order_sn)">
<button v-if="order.buttons.includes('pay')" class="tool-btn ss-reset-button ui-BG-Main-Gradient"
@tap.stop="onPay(order.payOrderId)">
继续支付
</button> -->
</button>
</view>
</view>
</view>
@@ -156,52 +74,45 @@
<!-- 加载更多 -->
<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 {
computed,
reactive
} from 'vue';
import {
onLoad,
onReachBottom,
onPullDownRefresh
} from '@dcloudio/uni-app';
import {
formatOrderColor
} from '@/sheep/hooks/useGoods';
import { reactive } from 'vue';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import {
fen2yuan,
formatOrderColor, formatOrderStatus, handleOrderButtons,
} from '@/sheep/hooks/useGoods';
import sheep from '@/sheep';
import _ from 'lodash';
import {
isEmpty
} from 'lodash';
import OrderApi from '@/sheep/api/trade/order';
const pagination = {
data: [],
current_page: 1,
total: 1,
last_page: 1,
const paginationNull = {
list: [],
total: 0,
pageNo: 1,
pageSize: 5,
};
// 数据
const state = reactive({
currentTab: 0,
currentTab: 0, // 选中的 tabMaps 下标
pagination: {
data: [],
current_page: 1,
total: 1,
last_page: 1,
list: [],
total: 0,
pageNo: 1,
pageSize: 5,
},
loadStatus: '',
deleteOrderId: 0,
error: 0,
loadStatus: ''
});
const tabMaps = [{
name: '全部',
// value: 'all',
name: '全部'
},
{
name: '待付款',
@@ -223,53 +134,47 @@
// 切换选项卡
function onTabsChange(e) {
if (state.currentTab === e.index) return;
state.pagination = pagination;
if (state.currentTab === e.index) {
return;
}
// 重头加载代码
state.pagination = paginationNull;
state.currentTab = e.index;
getOrderList();
}
// 订单详情
function onOrderDetail(orderSN) {
function onOrderDetail(id) {
sheep.$router.go('/pages/order/detail', {
orderSN,
id,
});
}
// 分享拼团
// 分享拼团 TODO 芋艿：待测试
function onOrderGroupon(order) {
sheep.$router.go('/pages/activity/groupon/detail', {
id: order.ext.groupon_id,
});
}
// 查看发票
function onOrderInvoice(invoiceId) {
sheep.$router.go('/pages/order/invoice', {
invoiceId,
});
}
// 继续支付
function onPay(orderSN) {
function onPay(payOrderId) {
sheep.$router.go('/pages/pay/index', {
orderSN,
id: payOrderId,
});
}
// 评价
function onComment(orderSN) {
function onComment(id) {
sheep.$router.go('/pages/goods/comment/add', {
orderSN,
id,
});
}
// 确认收货
// 确认收货 TODO 芋艿：待测试
async function onConfirm(order, ignore = false) {
// 需开启确认收货组件
// todo:
// todo: 芋艿：需要后续接入微信收货组件
// 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
let isOpenBusinessView = true;
@@ -284,18 +189,15 @@
}
// 正常的确认收货流程
const {
error
} = await sheep.$api.order.confirm(order.id);
if (error === 0) {
state.pagination = pagination;
getOrderList();
const { code } = await OrderApi.receiveOrder(order.id);
if (code === 0) {
state.pagination = paginationNull;
await getOrderList();
}
}
// #ifdef MP-WEIXIN
// 小程序确认收货组件
// 小程序确认收货组件 TODO 芋艿：后续再接入
function mpConfirm(order) {
if (!wx.openBusinessView) {
sheep.$helper.toast(`请升级微信版本`);
@@ -327,9 +229,9 @@
// #endif
// 查看物流
async function onExpress(orderId) {
sheep.$router.go('/pages/order/express/list', {
orderId,
async function onExpress(id) {
sheep.$router.go('/pages/order/express/log', {
id,
});
}
@@ -339,16 +241,17 @@
title: '提示',
content: '确定要取消订单吗?',
success: async function(res) {
if (res.confirm) {
const {
error,
data
} = await sheep.$api.order.cancel(orderId);
if (error === 0) {
let index = state.pagination.data.findIndex((order) => order.id === orderId);
state.pagination.data[index] = data;
}
if (!res.confirm) {
return;
}
const { code } = await OrderApi.cancelOrder(orderId);
if (code === 0) {
// 修改数据的状态
let index = state.pagination.list.findIndex((order) => order.id === orderId);
const orderInfo = state.pagination.list[index];
orderInfo.status = 40;
handleOrderButtons(orderInfo);
}
},
});
}
@@ -360,36 +263,11 @@
content: '确定要删除订单吗?',
success: async function(res) {
if (res.confirm) {
const {
error,
data
} = await sheep.$api.order.delete(orderId);
if (error === 0) {
let index = state.pagination.data.findIndex((order) => order.id === orderId);
state.pagination.data.splice(index, 1);
}
}
},
});
}
// 申请退款
async function onRefund(orderId) {
uni.showModal({
title: '提示',
content: '确定要申请退款吗?',
success: async function(res) {
if (res.confirm) {
// #ifdef MP
sheep.$platform.useProvider('wechat').subscribeMessage('order_refund');
// #endif
const {
error,
data
} = await sheep.$api.order.applyRefund(orderId);
if (error === 0) {
let index = state.pagination.data.findIndex((order) => order.id === orderId);
state.pagination.data[index] = data;
const { code } = await OrderApi.deleteOrder(orderId);
if (code === 0) {
// 删除数据
let index = state.pagination.list.findIndex((order) => order.id === orderId);
state.pagination.list.splice(index, 1);
}
}
},
@@ -397,52 +275,47 @@
}
// 获取订单列表
async function getOrderList(page = 1, list_rows = 5) {
async function getOrderList() {
state.loadStatus = 'loading';
let res = await sheep.$api.order.list({
status: tabMaps[state.currentTab].value,
pageSize: list_rows,
pageNo: page,
commentStatus: tabMaps[state.currentTab].value == 30 ? false : null
let { code, data } = await OrderApi.getOrderPage({
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
status: tabMaps[state.currentTab].value,
commentStatus: tabMaps[state.currentTab].value === 30 ? false : null
});
state.error = res.code;
if (res.code === 0) {
let orderList = _.concat(state.pagination.data, res.data.list);
state.pagination = {
...res.data,
data: orderList,
};
console.log(state.pagination)
if (state.pagination.data.length < state.pagination.total) {
state.loadStatus = 'more';
} else {
state.loadStatus = 'noMore';
}
}
}
if (code !== 0) {
return;
}
data.list.forEach(order => handleOrderButtons(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';
}
onLoad(async (options) => {
if (options.type) {
state.currentTab = options.type;
}
getOrderList();
await getOrderList();
});
// 加载更多
function loadmore() {
if (state.loadStatus !== 'noMore') {
getOrderList(parseInt((state.pagination.data.length / 5) + 1));
function loadMore() {
if (state.loadStatus === 'noMore') {
return
}
}
state.pagination.pageNo++;
getOrderList();
}
// 上拉加载更多
onReachBottom(() => {
loadmore();
loadMore();
});
//下拉刷新
// 下拉刷新
onPullDownRefresh(() => {
state.pagination = pagination;
state.pagination = paginationNull;
getOrderList();
setTimeout(function() {
uni.stopPullDownRefresh();