初始化
This commit is contained in:
落日晚风
@@ -0,0 +1,318 @@
|
||||
<!-- 订单详情 -->
|
||||
<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>
|
||||
</view>
|
||||
|
||||
<uni-forms ref="form" v-model="formData" :rules="rules" label-position="top">
|
||||
<!-- 售后类型 -->
|
||||
<view class="refund-item">
|
||||
<view class="item-title ss-m-b-20">售后类型</view>
|
||||
<view class="ss-flex-col">
|
||||
<radio-group @change="onRefundChange">
|
||||
<label class="ss-flex ss-col-center ss-p-y-10" v-for="(item, index) in state.refundTypeList" :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" v-if="formData.reason">{{ formData.reason }}</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>
|
||||
<view class="upload-img">
|
||||
<s-uploader v-model:url="formData.images" fileMediatype="image" limit="9" mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx' }" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms>
|
||||
<!-- 底部按钮 -->
|
||||
<su-fixed bottom placeholder>
|
||||
<view class="foot-wrap">
|
||||
<view class="foot_box ss-flex ss-col-center ss-row-between ss-p-x-30">
|
||||
<button class="ss-reset-button contcat-btn" @tap="sheep.$router.go('/pages/chat/index')">联系客服</button>
|
||||
<button class="ss-reset-button ui-BG-Main-Gradient sub-btn" @tap="submit">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
</su-fixed>
|
||||
<!-- 申请原因弹窗 -->
|
||||
|
||||
<su-popup :show="state.showModal" round="10" :showClose="true" @close="state.showModal = false">
|
||||
<view class="modal-box page_box">
|
||||
<view class="modal-head item-title head_box ss-flex ss-row-center ss-col-center">申请原因</view>
|
||||
<view class="modal-content content_box">
|
||||
<radio-group @change="onChange">
|
||||
<label class="radio ss-flex ss-col-center" v-for="item in state.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>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="modal-foot foot_box ss-flex ss-row-center ss-col-center">
|
||||
<button class="ss-reset-button close-btn ui-BG-Main-Gradient" @tap="onReason">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { reactive, ref, 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({});
|
||||
|
||||
// 提交表单
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
//选择售后类型
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
//确定
|
||||
function onReason() {
|
||||
formData.reason = state.reasonText;
|
||||
state.showModal = false;
|
||||
}
|
||||
|
||||
function onTitle(e, title) {
|
||||
state.currentValue = e;
|
||||
state.reasonText = title;
|
||||
}
|
||||
onLoad((options) => {
|
||||
state.goodsItem = JSON.parse(options.item);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
// margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
// 售后项目
|
||||
.refund-item {
|
||||
background-color: #fff;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
padding: 30rpx;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
// 留言
|
||||
.describe-box {
|
||||
width: 690rpx;
|
||||
background: rgba(249, 250, 251, 1);
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.describe-content {
|
||||
height: 200rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
// 联系方式
|
||||
.input-box {
|
||||
height: 84rpx;
|
||||
background: rgba(249, 250, 251, 1);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
background: #fff;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.foot-wrap {
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.foot_box {
|
||||
height: 100rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.sub-btn {
|
||||
width: 336rpx;
|
||||
line-height: 74rpx;
|
||||
border-radius: 38rpx;
|
||||
color: rgba(#fff, 0.9);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.contcat-btn {
|
||||
width: 336rpx;
|
||||
line-height: 74rpx;
|
||||
background: rgba(238, 238, 238, 1);
|
||||
border-radius: 38rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
width: 750rpx;
|
||||
// height: 680rpx;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
background: #fff;
|
||||
|
||||
.modal-head {
|
||||
height: 100rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.modal-foot {
|
||||
.close-btn {
|
||||
width: 710rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
color: rgba(#fff, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.success-box {
|
||||
width: 600rpx;
|
||||
padding: 90rpx 0 64rpx 0;
|
||||
|
||||
.cicon-check-round {
|
||||
font-size: 96rpx;
|
||||
color: #04b750;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.success-btn {
|
||||
width: 492rpx;
|
||||
height: 70rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main-gradient), var(--ui-BG-Main));
|
||||
border-radius: 35rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,355 @@
|
||||
<!-- 售后详情 -->
|
||||
<template>
|
||||
<s-layout title="售后详情" :navbar="!isEmpty(state.info) && state.loading ? 'inner' : 'normal'">
|
||||
<view class="content_box" v-if="!isEmpty(state.info) && state.loading">
|
||||
<!-- 步骤条 -->
|
||||
<!-- 这个没找到替换方案 -->
|
||||
<view class="steps-box ss-flex" :style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 88) + 'rpx',
|
||||
},
|
||||
]">
|
||||
<!-- <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-circlecheck" v-else
|
||||
:class="state.active >= index ? 'activity-color' : 'info-color'"></text>
|
||||
|
||||
<view v-if="state.list.length - 1 != index" class="line"
|
||||
:class="state.active >= index ? 'activity-bg' : 'info-bg'"></view>
|
||||
</view>
|
||||
<view class="steps-item-title" :class="state.active >= index ? 'activity-color' : 'info-color'">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务状态 -->
|
||||
<!-- <view class="status-box ss-flex ss-col-center ss-row-between ss-m-x-20"
|
||||
@tap="sheep.$router.go('/pages/order/aftersale/log', { id: state.aftersaleId })">
|
||||
<view class="">
|
||||
<view class="status-text">{{ state.info.aftersale_status_desc }}</view>
|
||||
<view class="status-time">{{ state.info.update_time }}</view>
|
||||
</view>
|
||||
<text class="ss-iconfont _icon-forward" style="color: #666"></text>
|
||||
</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>
|
||||
<!-- 服务商品 -->
|
||||
<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>
|
||||
</view>
|
||||
|
||||
<!-- 服务内容 -->
|
||||
<view class="aftersale-content">
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">服务单号：</view>
|
||||
<view class="item-content ss-m-r-16">{{ state.info.no }}</view>
|
||||
<button class="ss-reset-button copy-btn" @tap="onCopy">复制</button>
|
||||
</view>
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">申请时间：</view>
|
||||
<view class="item-content">
|
||||
{{ sheep.$helper.timeFormat(state.info.createTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">售后类型：</view>
|
||||
<view class="item-content">{{ status2[state.info.way] }}</view>
|
||||
</view>
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">申请原因：</view>
|
||||
<view class="item-content">{{ state.info.applyReason }}</view>
|
||||
</view>
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">相关描述：</view>
|
||||
<view class="item-content">{{ state.info.applyDescription }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<s-empty v-if="isEmpty(state.info) && state.loading" icon="/static/order-empty.png" text="暂无该订单售后详情" />
|
||||
<!-- <su-fixed bottom placeholder bg="bg-white" v-if="!isEmpty(state.info)">
|
||||
<view class="foot_box">
|
||||
<button class="ss-reset-button btn" v-if="state.info.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>
|
||||
</view>
|
||||
</su-fixed> -->
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
reactive
|
||||
} from 'vue';
|
||||
import {
|
||||
isEmpty
|
||||
} from 'lodash';
|
||||
|
||||
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: '处理中',
|
||||
},
|
||||
],
|
||||
loading: false,
|
||||
});
|
||||
|
||||
const status2 = {
|
||||
10: '仅退款',
|
||||
20: '退货退款'
|
||||
}
|
||||
|
||||
function onApply(orderId) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
};
|
||||
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;
|
||||
}
|
||||
}
|
||||
onLoad((options) => {
|
||||
state.aftersaleId = options.id;
|
||||
getDetail(options.id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 步骤条
|
||||
.steps-box {
|
||||
width: 100%;
|
||||
height: 190rpx;
|
||||
background: v-bind(headerBg) no-repeat,
|
||||
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
background-size: 750rpx 100%;
|
||||
padding-left: 72rpx;
|
||||
|
||||
.steps-item {
|
||||
.sicon-circleclose {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sicon-circlecheck {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.steps-item-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
margin-top: 16rpx;
|
||||
margin-left: -36rpx;
|
||||
width: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-color {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.info-color {
|
||||
color: rgba(#fff, 0.4);
|
||||
}
|
||||
|
||||
.activity-bg {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.info-bg {
|
||||
background: rgba(#fff, 0.4);
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 270rpx;
|
||||
height: 4rpx;
|
||||
}
|
||||
|
||||
// 服务状态
|
||||
.status-box {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx 20rpx 0px 0px;
|
||||
padding: 20rpx;
|
||||
margin-top: -20rpx;
|
||||
|
||||
.status-text {
|
||||
font-size: 28rpx;
|
||||
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.status-time {
|
||||
font-size: 24rpx;
|
||||
|
||||
font-weight: 400;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// 退款金额
|
||||
.aftersale-money {
|
||||
background-color: #fff;
|
||||
height: 98rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 20rpx;
|
||||
|
||||
.aftersale-money--title {
|
||||
font-size: 28rpx;
|
||||
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
|
||||
.aftersale-money--num {
|
||||
font-size: 28rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #ff3000;
|
||||
}
|
||||
}
|
||||
|
||||
// order-shop
|
||||
.order-shop {
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
}
|
||||
|
||||
// 服务内容
|
||||
.aftersale-content {
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
margin: 0 20rpx;
|
||||
|
||||
.aftersale-item {
|
||||
height: 60rpx;
|
||||
|
||||
.copy-btn {
|
||||
background: #eeeeee;
|
||||
color: #333;
|
||||
border-radius: 20rpx;
|
||||
width: 75rpx;
|
||||
height: 40rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 底部功能
|
||||
.foot_box {
|
||||
height: 100rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.btn {
|
||||
width: 160rpx;
|
||||
line-height: 60rpx;
|
||||
background: rgba(238, 238, 238, 1);
|
||||
border-radius: 30rpx;
|
||||
padding: 0;
|
||||
margin-right: 20rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,238 @@
|
||||
<!-- 售后列表 -->
|
||||
<template>
|
||||
<s-layout title="售后列表">
|
||||
<!-- tab -->
|
||||
<su-sticky bgColor="#fff">
|
||||
<su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab"></su-tabs>
|
||||
</su-sticky>
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无数据">
|
||||
</s-empty>
|
||||
<!-- 列表 -->
|
||||
<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"
|
||||
@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>
|
||||
</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>
|
||||
<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>
|
||||
<text class="_icon-forward"></text>
|
||||
</view>
|
||||
<!-- <view class="tool-btn-box ss-flex ss-col-center ss-row-right ss-p-r-20">
|
||||
<view>
|
||||
<button class="ss-reset-button tool-btn" @tap.stop="onApply(order.id)"
|
||||
v-if="order.btns.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>
|
||||
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}" @tap="loadmore" />
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import {
|
||||
onLoad,
|
||||
onReachBottom
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
computed,
|
||||
reactive
|
||||
} from 'vue';
|
||||
import _ from 'lodash';
|
||||
|
||||
const pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
};
|
||||
const state = reactive({
|
||||
currentTab: 0,
|
||||
showApply: false,
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
});
|
||||
// 字典需要登录 尚未接入 先用固定值代替
|
||||
const status = {
|
||||
10: '申请售后',
|
||||
20: '商品待退货',
|
||||
30: '商家待收货',
|
||||
40: '等待退款',
|
||||
50: '退款成功',
|
||||
61: '买家取消',
|
||||
62: '商家拒绝',
|
||||
63: '商家拒收货'
|
||||
}
|
||||
const status2 = {
|
||||
10: '仅退款',
|
||||
20: '退货退款'
|
||||
}
|
||||
const tabMaps = [{
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
// {
|
||||
// name: '申请中',
|
||||
// value: 'nooper',
|
||||
// },
|
||||
// {
|
||||
// name: '处理中',
|
||||
// value: 'ing',
|
||||
// },
|
||||
// {
|
||||
// name: '已完成',
|
||||
// value: 'completed',
|
||||
// },
|
||||
// {
|
||||
// name: '已拒绝',
|
||||
// value: 'refuse',
|
||||
// },
|
||||
];
|
||||
// 切换选项卡
|
||||
function onTabsChange(e) {
|
||||
state.pagination = pagination
|
||||
state.currentTab = e.index;
|
||||
getOrderList();
|
||||
}
|
||||
|
||||
// 获取售后列表
|
||||
async function getOrderList(page = 1, list_rows = 5) {
|
||||
pagination.current_page = page;
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.order.aftersale.list({
|
||||
// type: tabMaps[state.currentTab].value,
|
||||
pageSize: list_rows,
|
||||
pageNo: page,
|
||||
});
|
||||
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';
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
function onApply(orderId) {
|
||||
uni.showModal({
|
||||
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();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (options.type) {
|
||||
state.currentTab = options.type;
|
||||
}
|
||||
getOrderList();
|
||||
});
|
||||
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
// if (state.loadStatus !== 'noMore') {
|
||||
getOrderList(pagination.current_page + 1);
|
||||
// }
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-box {
|
||||
background-color: #fff;
|
||||
|
||||
.order-head {
|
||||
padding: 0 25rpx;
|
||||
height: 77rpx;
|
||||
}
|
||||
|
||||
.apply-box {
|
||||
height: 82rpx;
|
||||
|
||||
.title {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 22rpx;
|
||||
color: $dark-6;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-btn-box {
|
||||
height: 100rpx;
|
||||
|
||||
.tool-btn {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
background: #f6f6f6;
|
||||
border-radius: 30rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<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>
|
||||
</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>
|
||||
<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,
|
||||
default() {},
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
data: {
|
||||
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 {
|
||||
align-items: stretch;
|
||||
}
|
||||
.log-icon {
|
||||
height: inherit;
|
||||
.cicon-title {
|
||||
font-size: 30rpx;
|
||||
color: #dfdfdf;
|
||||
}
|
||||
.activity-color {
|
||||
color: #60bd45;
|
||||
}
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #dfdfdf;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
.richtext {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
margin: 20rpx 0 0 0;
|
||||
}
|
||||
.content-img {
|
||||
margin-top: 20rpx;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
.date {
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!-- 售后进度 -->
|
||||
<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>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { computed, reactive } from 'vue';
|
||||
import logItem from './log-item.vue';
|
||||
|
||||
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',
|
||||
},
|
||||
],
|
||||
});
|
||||
async function getDetail(id) {
|
||||
const { data } = await sheep.$api.order.aftersale.detail(id);
|
||||
state.info = data.logs;
|
||||
}
|
||||
onLoad((options) => {
|
||||
state.aftersaleId = options.id;
|
||||
getDetail(options.id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.log-box {
|
||||
padding: 24rpx 24rpx 24rpx 40rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,414 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
computed
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad,
|
||||
onPageScroll,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import {
|
||||
isEmpty
|
||||
} from 'lodash';
|
||||
|
||||
const state = reactive({
|
||||
orderPayload: {},
|
||||
orderInfo: {},
|
||||
addressInfo: {},
|
||||
invoiceInfo: {},
|
||||
totalNumber: 0,
|
||||
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');
|
||||
}
|
||||
|
||||
// 更改收货人地址&计算订单信息
|
||||
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(e) {
|
||||
state.orderPayload.coupon_id = e || 0;
|
||||
getOrderInfo();
|
||||
state.showCoupon = false;
|
||||
}
|
||||
|
||||
// 选择发票信息
|
||||
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');
|
||||
}
|
||||
|
||||
// 提交订单/立即兑换
|
||||
function onConfirm() {
|
||||
if (!state.orderPayload.address_id && state.orderInfo.need_address === 1) {
|
||||
sheep.$helper.toast('请选择收货地址');
|
||||
return;
|
||||
}
|
||||
|
||||
if (exchangeNow.value) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定使用积分立即兑换?',
|
||||
cancelText: '再想想',
|
||||
success: async function(res) {
|
||||
if (res.confirm) {
|
||||
submitOrder();
|
||||
}
|
||||
},
|
||||
});
|
||||
} else {
|
||||
submitOrder();
|
||||
}
|
||||
}
|
||||
|
||||
// 创建订单&跳转
|
||||
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();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.uni-input-wrapper {
|
||||
width: 320rpx;
|
||||
}
|
||||
|
||||
.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-easyinput__content {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: right !important;
|
||||
}
|
||||
}
|
||||
|
||||
.score-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
height: 80rpx;
|
||||
|
||||
.item-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.text-disabled {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.remark-input {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.item-placeholder {
|
||||
color: $dark-9;
|
||||
font-size: 26rpx;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.total-box-footer {
|
||||
height: 90rpx;
|
||||
|
||||
.total-num {
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-box {
|
||||
height: 100rpx;
|
||||
|
||||
.submit-btn {
|
||||
width: 240rpx;
|
||||
height: 70rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.goto-pay-text {
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 240rpx;
|
||||
height: 80rpx;
|
||||
font-size: 26rpx;
|
||||
background-color: #e5e5e5;
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.cicon-checkbox {
|
||||
font-size: 36rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
.cicon-box {
|
||||
font-size: 36rpx;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,692 @@
|
||||
<!-- 订单详情 -->
|
||||
<template>
|
||||
<s-layout title="订单详情" class="index-wrap" navbar="inner">
|
||||
<!-- 订单状态 -->
|
||||
<view class="state-box ss-flex-col ss-col-center ss-row-right" :style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 88) + 'rpx',
|
||||
},
|
||||
]">
|
||||
<view class="ss-flex ss-m-t-32 ss-m-b-20">
|
||||
<image v-if="
|
||||
state.orderInfo.status_code == 'unpaid' ||
|
||||
state.orderInfo.status_code == 'nosend' ||
|
||||
state.orderInfo.status_code == 'nocomment'
|
||||
" class="state-img" :src="sheep.$url.static('/static/img/shop/order/order_loading.png')">
|
||||
</image>
|
||||
<image v-if="
|
||||
state.orderInfo.status_code == 'completed' ||
|
||||
state.orderInfo.status_code == 'refund_agree'
|
||||
" class="state-img" :src="sheep.$url.static('/static/img/shop/order/order_success.png')">
|
||||
</image>
|
||||
<image v-if="state.orderInfo.status_code == 'cancel' || state.orderInfo.status_code == 'closed'"
|
||||
class="state-img" :src="sheep.$url.static('/static/img/shop/order/order_close.png')">
|
||||
</image>
|
||||
<image v-if="state.orderInfo.status_code == 'noget'" class="state-img"
|
||||
:src="sheep.$url.static('/static/img/shop/order/order_express.png')">
|
||||
</image>
|
||||
<view class="ss-font-30">{{ state.orderInfo.status_text }}</view>
|
||||
</view>
|
||||
<view class="ss-font-26 ss-m-x-20 ss-m-b-70">{{ state.orderInfo.status_desc }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 收货地址 -->
|
||||
<view class="order-address-box" v-if="state.orderInfo.address">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<text class="address-username">
|
||||
{{ state.orderInfo.address.consignee }}
|
||||
</text>
|
||||
<text class="address-phone">{{ state.orderInfo.address.mobile }}</text>
|
||||
</view>
|
||||
<view class="address-detail">{{ addressText }}</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-goods" :style="[{ marginTop: state.orderInfo.address ? '0' : '-40rpx' }]">
|
||||
<!-- 订单信息 -->
|
||||
<view class="order-list" v-for="item in state.orderInfo.items" :key="item.goods_id">
|
||||
<view class="order-card">
|
||||
<s-goods-item @tap="onGoodsDetail(item.goods_id)" :img="item.goods_image" :title="item.goods_title"
|
||||
:skuText="item.goods_sku_text" :price="item.goods_price" :score="state.orderInfo.score_amount"
|
||||
:num="item.goods_num">
|
||||
<!-- <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 ss-m-r-20">{{ item.dispatch_type_text }}</text>
|
||||
<button class="ss-reset-button copy-btn" @tap="onDetail(item)" v-if="
|
||||
(item.dispatch_type === 'autosend' || item.dispatch_type === 'custom') &&
|
||||
item.dispatch_status !== 0
|
||||
">详情</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<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>
|
||||
<template #priceSuffix>
|
||||
<button class="ss-reset-button tag-btn" v-if="item.status_text">
|
||||
{{ item.status_text }}
|
||||
</button>
|
||||
</template> -->
|
||||
</s-goods-item>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 订单信息 -->
|
||||
<view class="notice-box">
|
||||
<view class="notice-box__content">
|
||||
<view class="notice-item--center">
|
||||
<view class="ss-flex ss-flex-1">
|
||||
<text class="title">订单编号：</text>
|
||||
<text class="detail">{{ state.orderInfo.order_sn }}</text>
|
||||
</view>
|
||||
<button class="ss-reset-button copy-btn" @tap="onCopy">复制</button>
|
||||
</view>
|
||||
<view class="notice-item">
|
||||
<text class="title">下单时间：</text>
|
||||
<text class="detail">{{ state.orderInfo.create_time }}</text>
|
||||
</view>
|
||||
<view class="notice-item" v-if="state.orderInfo.paid_time">
|
||||
<text class="title">支付时间：</text>
|
||||
<text class="detail">{{ state.orderInfo.paid_time || '-' }}</text>
|
||||
</view>
|
||||
<view class="notice-item">
|
||||
<text class="title">支付方式：</text>
|
||||
<text class="detail">{{ state.orderInfo.pay_types_text?.join(',') || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 价格信息 -->
|
||||
<view class="order-price-box">
|
||||
<view class="notice-item ss-flex ss-row-between">
|
||||
<text class="title">商品总额</text>
|
||||
<view class="ss-flex">
|
||||
<text class="detail"
|
||||
v-if="Number(state.orderInfo.goods_amount) > 0">￥{{ state.orderInfo.goods_amount }}</text>
|
||||
<view v-if="state.orderInfo.score_amount && Number(state.orderInfo.goods_amount) > 0"
|
||||
class="detail">+</view>
|
||||
<view class="price-text ss-flex ss-col-center" v-if="state.orderInfo.score_amount">
|
||||
<image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img"></image>
|
||||
<view class="detail">{{ state.orderInfo.score_amount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="notice-item ss-flex ss-row-between">
|
||||
<text class="title">运费</text>
|
||||
<text class="detail">￥{{ state.orderInfo.dispatch_amount }}</text>
|
||||
</view>
|
||||
<view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.total_discount_fee > 0">
|
||||
<text class="title">优惠金额</text>
|
||||
<text class="detail">¥{{ state.orderInfo.total_discount_fee }}</text>
|
||||
</view>
|
||||
<view class="notice-item all-rpice-item ss-flex ss-m-t-20">
|
||||
<text class="title">{{
|
||||
['paid', 'completed'].includes(state.orderInfo.status) ? '已付款' : '需付款'
|
||||
}}</text>
|
||||
<text class="detail all-price"
|
||||
v-if="Number(state.orderInfo.pay_fee) > 0">￥{{ state.orderInfo.pay_fee }}</text>
|
||||
<view v-if="
|
||||
state.orderInfo.score_amount &&
|
||||
Number(state.orderInfo.pay_fee) > 0 &&
|
||||
['paid', 'completed'].includes(state.orderInfo.status)
|
||||
" class="detail all-price">+</view>
|
||||
<view class="price-text ss-flex ss-col-center" v-if="
|
||||
state.orderInfo.score_amount && ['paid', 'completed'].includes(state.orderInfo.status)
|
||||
">
|
||||
<image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img"></image>
|
||||
<view class="detail all-price">{{ state.orderInfo.score_amount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="notice-item all-rpice-item ss-flex ss-m-t-20" v-if="refundFee > 0">
|
||||
<text class="title">已退款</text>
|
||||
<text class="detail all-price">￥{{ refundFee.toFixed(2) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<!-- TODO: 查看物流、等待成团、评价完后返回页面没刷新页面 -->
|
||||
<su-fixed bottom placeholder bg="bg-white" v-if="state.orderInfo.btns?.length">
|
||||
<view class="footer-box ss-flex ss-col-center ss-row-right">
|
||||
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.btns?.includes('cancel')"
|
||||
@tap="onCancel(state.orderInfo.id)">取消订单</button>
|
||||
<button class="ss-reset-button pay-btn ui-BG-Main-Gradient" v-if="state.orderInfo.btns?.includes('pay')"
|
||||
@tap="onPay(state.orderInfo.order_sn)">继续支付</button>
|
||||
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.btns?.includes('apply_refund')"
|
||||
@tap="onRefund(state.orderInfo.id)">申请退款</button>
|
||||
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.btns?.includes('groupon')" @tap="
|
||||
sheep.$router.go('/pages/activity/groupon/detail', {
|
||||
id: state.orderInfo.ext.groupon_id,
|
||||
})
|
||||
">
|
||||
{{ state.orderInfo.status_code === 'groupon_ing' ? '邀请拼团' : '拼团详情' }}
|
||||
</button>
|
||||
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.btns?.includes('express')"
|
||||
@tap="onExpress(state.orderInfo.id)">查看物流</button>
|
||||
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.btns?.includes('confirm')"
|
||||
@tap="onConfirm(state.orderInfo.id)">确认收货</button>
|
||||
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.btns?.includes('comment')"
|
||||
@tap="onComment(state.orderInfo.id,state.orderInfo)">评价晒单</button>
|
||||
<button v-if="state.orderInfo.btns?.includes('invoice')" class="ss-reset-button cancel-btn"
|
||||
@tap.stop="onOrderInvoice(state.orderInfo.invoice?.id)">
|
||||
查看发票
|
||||
</button>
|
||||
<button v-if="state.orderInfo.btns?.includes('re_apply_refund')" class="ss-reset-button cancel-btn"
|
||||
@tap.stop="onRefund(state.orderInfo.id)">
|
||||
重新退款
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
computed,
|
||||
reactive
|
||||
} from 'vue';
|
||||
import {
|
||||
isEmpty
|
||||
} from 'lodash';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
|
||||
const tradeManaged = computed(() => sheep.$store('app').has_wechat_trade_managed);
|
||||
|
||||
const state = reactive({
|
||||
orderInfo: {},
|
||||
merchantTradeNo: '', // 商户订单号
|
||||
comeinType: '', // 进入订单详情的来源类型
|
||||
});
|
||||
|
||||
const addressText = computed(() => {
|
||||
let data = state.orderInfo.address;
|
||||
if (data) {
|
||||
return `${data.province_name} ${data.city_name} ${data.district_name} ${data.address}`;
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
// 复制
|
||||
const onCopy = () => {
|
||||
sheep.$helper.copyText(state.orderInfo.order_sn);
|
||||
};
|
||||
//退款总额
|
||||
const refundFee = computed(() => {
|
||||
let refundFee = 0;
|
||||
state.orderInfo.items?.forEach((i) => {
|
||||
refundFee += Number(i.refund_fee);
|
||||
});
|
||||
return refundFee;
|
||||
});
|
||||
// 去支付
|
||||
function onPay(orderSN) {
|
||||
sheep.$router.go('/pages/pay/index', {
|
||||
orderSN,
|
||||
});
|
||||
}
|
||||
|
||||
function onGoodsDetail(id) {
|
||||
sheep.$router.go('/pages/goods/index', {
|
||||
id
|
||||
});
|
||||
}
|
||||
|
||||
// 取消订单
|
||||
async function onCancel(orderId) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要取消订单吗?',
|
||||
success: async function(res) {
|
||||
if (res.confirm) {
|
||||
const {
|
||||
error,
|
||||
data
|
||||
} = await sheep.$api.order.cancel(orderId);
|
||||
if (error === 0) {
|
||||
getOrderDetail(data.order_sn);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 申请退款
|
||||
async function onRefund(orderId) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要申请退款吗?',
|
||||
success: async function(res) {
|
||||
if (res.confirm) {
|
||||
const {
|
||||
error,
|
||||
data
|
||||
} = await sheep.$api.order.applyRefund(orderId);
|
||||
if (error === 0) {
|
||||
getOrderDetail(data.order_sn);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 查看物流
|
||||
async function onExpress(orderId) {
|
||||
sheep.$router.go('/pages/order/express/list', {
|
||||
orderId,
|
||||
});
|
||||
}
|
||||
|
||||
//确认收货
|
||||
async function onConfirm(orderId, ignore = false) {
|
||||
// 需开启确认收货组件
|
||||
// todo:
|
||||
// 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
|
||||
// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
|
||||
let isOpenBusinessView = true;
|
||||
if (
|
||||
sheep.$platform.name === 'WechatMiniProgram' &&
|
||||
!isEmpty(state.orderInfo.wechat_extra_data) &&
|
||||
isOpenBusinessView &&
|
||||
!ignore
|
||||
) {
|
||||
mpConfirm(orderId);
|
||||
return;
|
||||
}
|
||||
|
||||
// 正常的确认收货流程
|
||||
const {
|
||||
error,
|
||||
data
|
||||
} = await sheep.$api.order.confirm(orderId);
|
||||
if (error === 0) {
|
||||
getOrderDetail(data.order_sn);
|
||||
}
|
||||
}
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 小程序确认收货组件
|
||||
function mpConfirm(orderId) {
|
||||
if (!wx.openBusinessView) {
|
||||
sheep.$helper.toast(`请升级微信版本`);
|
||||
return;
|
||||
}
|
||||
wx.openBusinessView({
|
||||
businessType: 'weappOrderConfirm',
|
||||
extraData: {
|
||||
merchant_trade_no: state.orderInfo.wechat_extra_data.merchant_trade_no,
|
||||
transaction_id: state.orderInfo.wechat_extra_data.transaction_id,
|
||||
},
|
||||
success(response) {
|
||||
console.log('success:', response);
|
||||
if (response.errMsg === 'openBusinessView:ok') {
|
||||
if (response.extraData.status === 'success') {
|
||||
onConfirm(orderId, true);
|
||||
}
|
||||
}
|
||||
},
|
||||
fail(error) {
|
||||
console.log('error:', error);
|
||||
},
|
||||
complete(result) {
|
||||
console.log('result:', result);
|
||||
},
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
|
||||
// 查看发票
|
||||
function onOrderInvoice(invoiceId) {
|
||||
sheep.$router.go('/pages/order/invoice', {
|
||||
invoiceId,
|
||||
});
|
||||
}
|
||||
|
||||
// 配送方式详情
|
||||
function onDetail(item) {
|
||||
sheep.$router.go('/pages/order/dispatch/content', {
|
||||
id: item.order_id,
|
||||
item_id: item.id,
|
||||
});
|
||||
}
|
||||
|
||||
// 评价
|
||||
function onComment(orderSN, orderId) {
|
||||
console.log(orderId);
|
||||
// return;
|
||||
uni.$once('SELECT_INVOICE', (e) => {
|
||||
state.invoiceInfo = e.invoiceInfo;
|
||||
});
|
||||
sheep.$router.go('/pages/goods/comment/add', {
|
||||
orderSN,
|
||||
orderId
|
||||
});
|
||||
}
|
||||
async function getOrderDetail(id) {
|
||||
// 对详情数据进行适配
|
||||
let res = {};
|
||||
if (state.comeinType === 'wechat') {
|
||||
res = await sheep.$api.order.detail(id, {
|
||||
merchant_trade_no: state.merchantTradeNo,
|
||||
});
|
||||
} else {
|
||||
res = await sheep.$api.order.detail(id);
|
||||
}
|
||||
console.log(res, '我的订单详情数据');
|
||||
if (res.code === 0) {
|
||||
let obj = {
|
||||
10: ['待发货', '等待买家付款', ["apply_refund"]],
|
||||
30: ['待评价', '等待买家评价', ["express", "comment"]]
|
||||
}
|
||||
res.data.status_text = obj[res.data.status][0];
|
||||
res.data.status_desc = obj[res.data.status][1];
|
||||
res.data.btns = obj[res.data.status][2];
|
||||
res.data.address = {
|
||||
province_name: res.data.receiverAreaName.split(' ')[0],
|
||||
district_name: res.data.receiverAreaName.split(' ')[2],
|
||||
city_name: res.data.receiverAreaName.split(' ')[1],
|
||||
address: res.data.receiverDetailAddress,
|
||||
consignee: res.data.receiverName,
|
||||
mobile: res.data.receiverMobile,
|
||||
}
|
||||
res.data.pay_fee = res.data.payPrice / 100
|
||||
res.data.create_time = sheep.$helper.timeFormat(res.data.createTime, 'yyyy-mm-dd hh:MM:ss')
|
||||
res.data.order_sn = res.data.no
|
||||
res.data.goods_amount = res.data.totalPrice / 100
|
||||
res.data.dispatch_amount = res.data.deliveryPrice / 100
|
||||
res.data.pay_types_text = res.data.payChannelName.split(',')
|
||||
res.data.items = res.data.items.map(ite => {
|
||||
|
||||
return {
|
||||
...ite,
|
||||
goods_title: ite.spuName,
|
||||
goods_num: ite.count,
|
||||
goods_price: ite.price / 100,
|
||||
goods_image: ite.picUrl,
|
||||
goods_sku_text: ite.properties.reduce((it0, it1) => it0 + it1.valueName + ' ', '')
|
||||
}
|
||||
})
|
||||
state.orderInfo = res.data;
|
||||
console.log(state.orderInfo, '修改后数据')
|
||||
} else {
|
||||
sheep.$router.back();
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
let id = 0;
|
||||
if (options.orderSN) {
|
||||
id = options.orderSN;
|
||||
}
|
||||
if (options.id) {
|
||||
id = options.id;
|
||||
}
|
||||
state.comeinType = options.comein_type;
|
||||
if (state.comeinType === 'wechat') {
|
||||
state.merchantTradeNo = options.merchant_trade_no;
|
||||
}
|
||||
getOrderDetail(id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.score-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
|
||||
.apply-btn {
|
||||
width: 140rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
font-size: 24rpx;
|
||||
border: 2rpx solid #dcdcdc;
|
||||
line-height: normal;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.state-box {
|
||||
color: rgba(#fff, 0.9);
|
||||
width: 100%;
|
||||
background: v-bind(headerBg) no-repeat,
|
||||
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
background-size: 750rpx 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.state-img {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order-address-box {
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin: -50rpx 20rpx 16rpx 20rpx;
|
||||
padding: 44rpx 34rpx 42rpx 20rpx;
|
||||
font-size: 30rpx;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
|
||||
.address-username {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.address-detail {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-goods {
|
||||
border-radius: 10rpx;
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
|
||||
.order-list {
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 订单信息。
|
||||
.notice-box {
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
|
||||
.notice-box__head {
|
||||
font-size: 30rpx;
|
||||
|
||||
font-weight: 500;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
line-height: 80rpx;
|
||||
border-bottom: 1rpx solid #dfdfdf;
|
||||
padding: 0 25rpx;
|
||||
}
|
||||
|
||||
.notice-box__content {
|
||||
padding: 20rpx;
|
||||
|
||||
.self-pickup-box {
|
||||
width: 100%;
|
||||
|
||||
.self-pickup--img {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 40rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice-item,
|
||||
.notice-item--center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: normal;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
width: 100rpx;
|
||||
line-height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
padding: 0;
|
||||
background: rgba(238, 238, 238, 1);
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
}
|
||||
|
||||
// 订单价格信息
|
||||
.order-price-box {
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
|
||||
.notice-item {
|
||||
line-height: 70rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
|
||||
.all-rpice-item {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.all-price {
|
||||
font-size: 26rpx;
|
||||
font-family: OPPOSANS;
|
||||
line-height: normal;
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 底部
|
||||
.footer-box {
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
padding-right: 20rpx;
|
||||
|
||||
.cancel-btn {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
background: #eeeeee;
|
||||
border-radius: 30rpx;
|
||||
margin-right: 20rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
font-size: 26rpx;
|
||||
border-radius: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,84 @@
|
||||
<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>
|
||||
@@ -0,0 +1,104 @@
|
||||
<!-- 物流包裹-->
|
||||
<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>
|
||||
@@ -0,0 +1,174 @@
|
||||
<!-- 物流追踪 -->
|
||||
<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-item v-for="(item, index) in goodsImages" :key="index">
|
||||
<image class="log-card-img" :src="sheep.$url.static(item.image)"></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>
|
||||
</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"
|
||||
: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>
|
||||
</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
|
||||
>
|
||||
<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>
|
||||
</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({
|
||||
info: [],
|
||||
current: 0,
|
||||
});
|
||||
const goodsImages = computed(() => {
|
||||
let array = [];
|
||||
if (state.info.items) {
|
||||
state.info.items.forEach((item) => {
|
||||
array.push({
|
||||
image: item.goods_image,
|
||||
});
|
||||
});
|
||||
}
|
||||
return array;
|
||||
});
|
||||
function change(e) {
|
||||
state.current = e.detail.current;
|
||||
}
|
||||
async function getExpressdetail(id, orderId) {
|
||||
const { data } = await sheep.$api.order.express(id, orderId);
|
||||
state.info = data;
|
||||
}
|
||||
onLoad((Option) => {
|
||||
getExpressdetail(Option.id, Option.orderId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swiper-box {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
.log-card {
|
||||
border-top: 2rpx solid rgba(#dfdfdf, 0.5);
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
.log-card-img {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.log-card-msg {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
width: 490rpx;
|
||||
color: #333333;
|
||||
.warning-color {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.log-content {
|
||||
padding: 34rpx 20rpx 0rpx 20rpx;
|
||||
background: #fff;
|
||||
.log-content-box {
|
||||
align-items: stretch;
|
||||
}
|
||||
.log-icon {
|
||||
height: inherit;
|
||||
.cicon-title {
|
||||
color: #ccc;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.activity-color {
|
||||
color: #f0c785;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.info-color {
|
||||
color: #ccc;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #d8d8d8;
|
||||
}
|
||||
}
|
||||
|
||||
.log-content-msg {
|
||||
.log-msg-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
.log-msg-desc {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.log-msg-date {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,329 @@
|
||||
<!-- 订单详情 -->
|
||||
<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>
|
||||
@@ -0,0 +1,586 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<s-layout title="我的订单">
|
||||
<su-sticky bgColor="#fff">
|
||||
<su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab"></su-tabs>
|
||||
</su-sticky>
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单"></s-empty>
|
||||
<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="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>
|
||||
<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>
|
||||
</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>
|
||||
</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="ss-flex ss-col-center">
|
||||
<!-- <button v-if="order.btns.includes('groupon')" 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>
|
||||
<button v-if="order.btns.length === 0" class="tool-btn ss-reset-button"
|
||||
@tap.stop="onOrderDetail(order.order_sn)">
|
||||
查看详情
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
<button v-if="order.btns.includes('comment')" class="tool-btn ss-reset-button"
|
||||
@tap.stop="onComment(order.order_sn)">
|
||||
评价晒单
|
||||
</button>
|
||||
|
||||
<button v-if="order.btns.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> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}" @tap="loadmore" />
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
reactive
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad,
|
||||
onReachBottom,
|
||||
onPullDownRefresh
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
formatOrderColor
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash';
|
||||
import {
|
||||
isEmpty
|
||||
} from 'lodash';
|
||||
|
||||
const pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
};
|
||||
// 数据
|
||||
const state = reactive({
|
||||
currentTab: 0,
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
deleteOrderId: 0,
|
||||
error: 0,
|
||||
});
|
||||
|
||||
const tabMaps = [{
|
||||
name: '全部',
|
||||
// value: 'all',
|
||||
},
|
||||
{
|
||||
name: '待付款',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: '待发货',
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
name: '待收货',
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
name: '待评价',
|
||||
value: 30,
|
||||
},
|
||||
];
|
||||
|
||||
// 切换选项卡
|
||||
function onTabsChange(e) {
|
||||
if (state.currentTab === e.index) return;
|
||||
|
||||
state.pagination = pagination;
|
||||
state.currentTab = e.index;
|
||||
|
||||
getOrderList();
|
||||
}
|
||||
|
||||
// 订单详情
|
||||
function onOrderDetail(orderSN) {
|
||||
sheep.$router.go('/pages/order/detail', {
|
||||
orderSN,
|
||||
});
|
||||
}
|
||||
|
||||
// 分享拼团
|
||||
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) {
|
||||
sheep.$router.go('/pages/pay/index', {
|
||||
orderSN,
|
||||
});
|
||||
}
|
||||
|
||||
// 评价
|
||||
function onComment(orderSN) {
|
||||
sheep.$router.go('/pages/goods/comment/add', {
|
||||
orderSN,
|
||||
});
|
||||
}
|
||||
|
||||
// 确认收货
|
||||
async function onConfirm(order, ignore = false) {
|
||||
// 需开启确认收货组件
|
||||
// todo:
|
||||
// 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
|
||||
// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
|
||||
let isOpenBusinessView = true;
|
||||
if (
|
||||
sheep.$platform.name === 'WechatMiniProgram' &&
|
||||
!isEmpty(order.wechat_extra_data) &&
|
||||
isOpenBusinessView &&
|
||||
!ignore
|
||||
) {
|
||||
mpConfirm(order);
|
||||
return;
|
||||
}
|
||||
|
||||
// 正常的确认收货流程
|
||||
|
||||
const {
|
||||
error
|
||||
} = await sheep.$api.order.confirm(order.id);
|
||||
if (error === 0) {
|
||||
state.pagination = pagination;
|
||||
getOrderList();
|
||||
}
|
||||
}
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 小程序确认收货组件
|
||||
function mpConfirm(order) {
|
||||
if (!wx.openBusinessView) {
|
||||
sheep.$helper.toast(`请升级微信版本`);
|
||||
return;
|
||||
}
|
||||
wx.openBusinessView({
|
||||
businessType: 'weappOrderConfirm',
|
||||
extraData: {
|
||||
merchant_id: '1481069012',
|
||||
merchant_trade_no: order.wechat_extra_data.merchant_trade_no,
|
||||
transaction_id: order.wechat_extra_data.transaction_id,
|
||||
},
|
||||
success(response) {
|
||||
console.log('success:', response);
|
||||
if (response.errMsg === 'openBusinessView:ok') {
|
||||
if (response.extraData.status === 'success') {
|
||||
onConfirm(order, true);
|
||||
}
|
||||
}
|
||||
},
|
||||
fail(error) {
|
||||
console.log('error:', error);
|
||||
},
|
||||
complete(result) {
|
||||
console.log('result:', result);
|
||||
},
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
|
||||
// 查看物流
|
||||
async function onExpress(orderId) {
|
||||
sheep.$router.go('/pages/order/express/list', {
|
||||
orderId,
|
||||
});
|
||||
}
|
||||
|
||||
// 取消订单
|
||||
async function onCancel(orderId) {
|
||||
uni.showModal({
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 删除订单
|
||||
function onDelete(orderId) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 获取订单列表
|
||||
async function getOrderList(page = 1, list_rows = 5) {
|
||||
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
|
||||
});
|
||||
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';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (options.type) {
|
||||
state.currentTab = options.type;
|
||||
}
|
||||
getOrderList();
|
||||
});
|
||||
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getOrderList(parseInt((state.pagination.data.length / 5) + 1));
|
||||
}
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
|
||||
//下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
state.pagination = pagination;
|
||||
getOrderList();
|
||||
setTimeout(function() {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 800);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.score-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
background: #f6f6f6;
|
||||
font-size: 26rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
width: 160rpx;
|
||||
height: 56rpx;
|
||||
color: #ff3000;
|
||||
background: #fee;
|
||||
border-radius: 28rpx;
|
||||
font-size: 26rpx;
|
||||
margin-right: 10rpx;
|
||||
line-height: normal;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.apply-btn {
|
||||
width: 140rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
font-size: 24rpx;
|
||||
border: 2rpx solid #dcdcdc;
|
||||
line-height: normal;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
flex: 1;
|
||||
|
||||
.swiper-item {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.order-list-card-box {
|
||||
.order-card-header {
|
||||
height: 80rpx;
|
||||
|
||||
.order-no {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.order-state {}
|
||||
}
|
||||
|
||||
.pay-box {
|
||||
.discounts-title {
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.discounts-money {
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
color: #999;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.pay-color {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.order-card-footer {
|
||||
height: 100rpx;
|
||||
|
||||
.more-item-box {
|
||||
padding: 20rpx;
|
||||
|
||||
.more-item {
|
||||
height: 60rpx;
|
||||
|
||||
.title {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
color: $dark-9;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 154rpx;
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.uni-tooltip-popup) {
|
||||
background: var(--ui-BG);
|
||||
}
|
||||
|
||||
.warning-color {
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.danger-color {
|
||||
color: #ff3000;
|
||||
}
|
||||
|
||||
.success-color {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.info-color {
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user