发布v1.0.3
This commit is contained in:
kele
@@ -0,0 +1,353 @@
|
||||
<!-- 订单详情 -->
|
||||
<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">
|
||||
<view
|
||||
class="ss-flex ss-col-center ss-p-y-10"
|
||||
v-for="(item, index) in state.refundTypeList"
|
||||
:key="index"
|
||||
@tap="formData.type = item.value"
|
||||
>
|
||||
<radio
|
||||
:checked="formData.type === item.value"
|
||||
color="var(--ui-BG-Main)"
|
||||
style="transform: scale(0.8)"
|
||||
/>
|
||||
<view class="item-value">{{ item.text }}</view>
|
||||
</view>
|
||||
</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">
|
||||
<view
|
||||
class="ss-flex ss-col-center"
|
||||
v-for="item in state.refundReasonList"
|
||||
:key="item.value"
|
||||
>
|
||||
<view class="ss-flex-1 ss-p-20" @tap="onTitle(item.value, item.title)">{{
|
||||
item.title
|
||||
}}</view>
|
||||
<view class="radio">
|
||||
<radio-group @change="onChange(item.value, item.title)">
|
||||
<label class="radio">
|
||||
<radio
|
||||
:value="item.value"
|
||||
color="var(--ui-BG-Main)"
|
||||
:checked="item.value === state.currentValue"
|
||||
/>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</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: {},
|
||||
// showSuccess: false,
|
||||
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() {
|
||||
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,
|
||||
});
|
||||
// state.showSuccess = true;
|
||||
sheep.$router.go('/pages/order/aftersale/list');
|
||||
}
|
||||
}
|
||||
|
||||
//选择申请原因
|
||||
function onChange(val, title) {
|
||||
state.currentValue = val;
|
||||
state.reasonText = 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,350 @@
|
||||
<!-- 售后详情 -->
|
||||
<template>
|
||||
<s-layout title="售后详情" navbar="inner">
|
||||
<view class="content_box" v-if="JSON.stringify(state.info) != '{}'">
|
||||
<!-- 步骤条 -->
|
||||
<!-- TODO-jj: 步骤条样式 -->
|
||||
<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.refund_fee }}</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>
|
||||
</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.aftersale_sn }}</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">{{ state.info.create_time }}</view>
|
||||
</view>
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">售后类型：</view>
|
||||
<view class="item-content">{{ state.info.type_text }}</view>
|
||||
</view>
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">申请原因：</view>
|
||||
<view class="item-content">{{ state.info.reason }}</view>
|
||||
</view>
|
||||
<view class="aftersale-item ss-flex ss-col-center">
|
||||
<view class="item-title">相关描述：</view>
|
||||
<view class="item-content">{{ state.info.content }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<s-empty v-if="state.info === null" icon="/static/order-empty.png" text="暂无该订单售后详情" />
|
||||
<su-fixed bottom placeholder bg="bg-white" v-if="JSON.stringify(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';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const state = reactive({
|
||||
active: 0,
|
||||
aftersaleId: 0,
|
||||
info: {},
|
||||
list: [
|
||||
{
|
||||
title: '提交申请',
|
||||
},
|
||||
{
|
||||
title: '处理中',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
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 { error, data } = await sheep.$api.order.aftersale.detail(id);
|
||||
if (error === 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("sheep.$url.css('/static/img/shop/order/order_bg.png')") 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,236 @@
|
||||
<!-- 售后列表 -->
|
||||
<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.aftersale_sn }}</text>
|
||||
<text class="state">{{ order.aftersale_status_text }}</text>
|
||||
</view>
|
||||
<s-goods-item
|
||||
:img="order.goods_image"
|
||||
:title="order.goods_title"
|
||||
:skuText="order.goods_sku_text"
|
||||
:price="order.goods_price"
|
||||
:num="order.goods_num"
|
||||
></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">{{ order.type_text }}</view>
|
||||
<view class="value">{{ order.aftersale_status_desc }}</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 state = reactive({
|
||||
currentTab: 0,
|
||||
showApply: false,
|
||||
pagination: {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
},
|
||||
loadStatus: '',
|
||||
});
|
||||
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
{
|
||||
name: '申请中',
|
||||
value: 'nooper',
|
||||
},
|
||||
{
|
||||
name: '处理中',
|
||||
value: 'ing',
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
value: 'completed',
|
||||
},
|
||||
{
|
||||
name: '已拒绝',
|
||||
value: 'refuse',
|
||||
},
|
||||
];
|
||||
// 切换选项卡
|
||||
function onTabsChange(e) {
|
||||
state.pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
};
|
||||
state.currentTab = e.index;
|
||||
getOrderList();
|
||||
}
|
||||
|
||||
// 获取售后列表
|
||||
async function getOrderList(page = 1, list_rows = 5) {
|
||||
state.loadStatus = 'loading';
|
||||
let res = await sheep.$api.order.aftersale.list({
|
||||
type: tabMaps[state.currentTab].value,
|
||||
list_rows,
|
||||
page,
|
||||
});
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let orderList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: orderList,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
|
||||
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) {
|
||||
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) {
|
||||
getOrderList();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (options.type) {
|
||||
state.currentTab = options.type;
|
||||
}
|
||||
getOrderList();
|
||||
});
|
||||
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus !== 'noMore') {
|
||||
getOrderList(state.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,112 @@
|
||||
<!-- 售后进度 -->
|
||||
<template>
|
||||
<s-layout title="售后进度">
|
||||
<view class="log-box">
|
||||
<view class="log-content-box ss-flex" v-for="(item, index) in state.info" :key="item.title">
|
||||
<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="state.info.length - 1 != index" class="line"></view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="text">{{ item.log_type_text }}</view>
|
||||
<su-parse class="richtext" :content="item.content"></su-parse>
|
||||
<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"
|
||||
><image class="content-img" :src="sheep.$url.static(i)" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="date">{{ item.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 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;
|
||||
.log-content-box {
|
||||
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,404 @@
|
||||
<template>
|
||||
<s-layout title="确认订单">
|
||||
<view class="bg-white address-box ss-m-b-14 ss-r-b-20" @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="bg-white 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"
|
||||
></s-goods-item>
|
||||
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20">
|
||||
<view class="item-title">配送方式</view>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<text class="item-value">物流快递</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20">
|
||||
<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">
|
||||
<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 != 0"
|
||||
>-￥{{ state.orderInfo.coupon_discount_fee }}</text
|
||||
>
|
||||
<text class="item-value text-red" v-else
|
||||
>{{ 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 { error, data } = await sheep.$api.user.address.default();
|
||||
if (error === 0 && !isEmpty(data)) {
|
||||
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) {
|
||||
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() {
|
||||
let { error, data } = await sheep.$api.order.calc(state.orderPayload);
|
||||
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) => {
|
||||
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;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.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,541 @@
|
||||
<!-- 订单详情 -->
|
||||
<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">
|
||||
<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">
|
||||
<!-- 订单信息 -->
|
||||
<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 #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">
|
||||
<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.promo_discount_fee > 0"
|
||||
>
|
||||
<text class="title">优惠金额</text>
|
||||
<text class="detail">¥{{ state.orderInfo.promo_discount_fee }}</text>
|
||||
</view>
|
||||
<view class="notice-item all-rpice-item ss-flex ss-m-t-20">
|
||||
<text class="title">已付款</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"
|
||||
class="detail all-price"
|
||||
>+</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 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_invalid' ? '拼团详情' : '邀请拼团' }}
|
||||
</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.order_sn)"
|
||||
>评价晒单</button
|
||||
>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</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 state = reactive({
|
||||
orderInfo: {},
|
||||
});
|
||||
|
||||
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) {
|
||||
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) {
|
||||
const { error, data } = await sheep.$api.order.confirm(orderId);
|
||||
if (error === 0) {
|
||||
getOrderDetail(data.order_sn);
|
||||
}
|
||||
}
|
||||
|
||||
// 评价
|
||||
function onComment(orderSN) {
|
||||
uni.$once('SELECT_INVOICE', (e) => {
|
||||
state.invoiceInfo = e.invoiceInfo;
|
||||
});
|
||||
sheep.$router.go('/pages/goods/comment/add', {
|
||||
orderSN,
|
||||
});
|
||||
}
|
||||
async function getOrderDetail(id) {
|
||||
const { data, error } = await sheep.$api.order.detail(id);
|
||||
if (error === 0) {
|
||||
state.orderInfo = data;
|
||||
} else {
|
||||
sheep.$router.back();
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
let id = '';
|
||||
if (options.orderSN) {
|
||||
id = options.orderSN;
|
||||
}
|
||||
if (options.id) {
|
||||
id = options.id;
|
||||
}
|
||||
getOrderDetail(id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.score-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
.state-box {
|
||||
color: rgba(#fff, 0.9);
|
||||
width: 100%;
|
||||
background: v-bind("sheep.$url.css('/static/img/shop/order/order_bg.png')") 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;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.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,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" 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">
|
||||
<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,328 @@
|
||||
<!-- 订单详情 -->
|
||||
<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">
|
||||
<view class="list-title">开票金额</view>
|
||||
<view class="list-desc">￥{{ state.data.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 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("sheep.$url.css('/static/img/shop/order/invoice_bg.png')") 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,585 @@
|
||||
<!-- 页面 -->
|
||||
<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.order_sn)"
|
||||
>
|
||||
<view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
|
||||
<view class="order-no">订单号：{{ order.order_sn }}</view>
|
||||
<view class="order-state ss-font-26" :class="formatOrderColor(order.status_code)">{{
|
||||
order.status_text
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="border-bottom" v-for="item in 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"
|
||||
:score="order.score_amount"
|
||||
:num="item.goods_num"
|
||||
>
|
||||
<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">总金额:</view>
|
||||
<view class="discounts-money pay-color" v-if="Number(order.order_amount) > 0"
|
||||
>￥{{ order.order_amount }}</view
|
||||
>
|
||||
<view v-if="order.score_amount && Number(order.order_amount) > 0">+</view>
|
||||
<view class="price-text 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>
|
||||
<view
|
||||
class="order-card-footer ss-flex ss-col-center ss-p-x-20"
|
||||
:class="order.btns.length > 3 ? 'ss-row-between' : 'ss-row-right'"
|
||||
>
|
||||
<!-- <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_invalid' ? '拼团详情' : '邀请拼团' }}
|
||||
</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.id)"
|
||||
>
|
||||
确认收货
|
||||
</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';
|
||||
|
||||
// 数据
|
||||
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: 'unpaid',
|
||||
},
|
||||
{
|
||||
name: '待发货',
|
||||
value: 'nosend',
|
||||
},
|
||||
{
|
||||
name: '待收货',
|
||||
value: 'noget',
|
||||
},
|
||||
{
|
||||
name: '待评价',
|
||||
value: 'nocomment',
|
||||
},
|
||||
];
|
||||
|
||||
// 切换选项卡
|
||||
function onTabsChange(e) {
|
||||
if (state.currentTab === e.index) return;
|
||||
|
||||
state.pagination = {
|
||||
data: [],
|
||||
current_page: 1,
|
||||
total: 1,
|
||||
last_page: 1,
|
||||
};
|
||||
|
||||
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(orderId) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请确认包裹全部到达后再确认收货',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const { error, data } = await sheep.$api.order.confirm(orderId);
|
||||
if (error === 0) {
|
||||
let index = state.pagination.data.findIndex((order) => order.id === orderId);
|
||||
state.pagination.data[index] = data;
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 查看物流
|
||||
async function onExpress(orderId) {
|
||||
sheep.$router.go('/pages/order/express/list', {
|
||||
orderId,
|
||||
});
|
||||
}
|
||||
|
||||
// 取消订单
|
||||
async function onCancel(orderId) {
|
||||
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, confirm = false) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要申请退款吗?',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
// #ifdef MP
|
||||
sheep.$platform.useProvider('wechat').subscribeMessage('order_apply_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({
|
||||
type: tabMaps[state.currentTab].value,
|
||||
list_rows,
|
||||
page,
|
||||
});
|
||||
state.error = res.error;
|
||||
if (res.error === 0) {
|
||||
if (page >= 2) {
|
||||
let orderList = _.concat(state.pagination.data, res.data.data);
|
||||
state.pagination = {
|
||||
...res.data,
|
||||
data: orderList,
|
||||
};
|
||||
} else {
|
||||
state.pagination = res.data;
|
||||
}
|
||||
|
||||
if (state.pagination.current_page < state.pagination.last_page) {
|
||||
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(state.pagination.current_page + 1);
|
||||
}
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadmore();
|
||||
});
|
||||
|
||||
//下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
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