feat: 订单售后
This commit is contained in:
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<main class="after-sale-select-page">
|
||||
<van-nav-bar title="申请售后" left-arrow @click-left="$router.back()" />
|
||||
|
||||
<section v-if="loading" class="skeleton-card">
|
||||
<van-skeleton title :row="3" />
|
||||
<van-skeleton title :row="4" />
|
||||
</section>
|
||||
|
||||
<section v-show="!loading" class="product-card">
|
||||
<h3>售后商品</h3>
|
||||
<article v-for="item in products" :key="item.id" class="product-row">
|
||||
<van-image class="product-thumb" :src="item.image" fit="cover" />
|
||||
<div class="product-info">
|
||||
<h4>{{ item.name || '-' }}</h4>
|
||||
<p>{{ skuText(item) }}</p>
|
||||
<b>¥{{ item.price || currentSubOrder.amount || '0.00' }}</b>
|
||||
</div>
|
||||
<span>x{{ item.number || 1 }}</span>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section v-show="!loading" class="type-card">
|
||||
<h3>请选择售后类型</h3>
|
||||
<div class="type-item" @click="goReturn">
|
||||
<span class="type-icon return-icon"><van-icon name="gift-o" /></span>
|
||||
<div>
|
||||
<h4>退货</h4>
|
||||
<p>已收到货，需要退回已收到的商品</p>
|
||||
</div>
|
||||
<van-icon name="arrow" />
|
||||
</div>
|
||||
<div class="type-item" @click="goExchange">
|
||||
<span class="type-icon exchange-icon"><van-icon name="exchange" /></span>
|
||||
<div>
|
||||
<h4>换货</h4>
|
||||
<p>已收到货，需要更换已收到的商品</p>
|
||||
</div>
|
||||
<van-icon name="arrow" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p v-show="!loading" class="tips">售后申请提交后，商家会尽快为您处理</p>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import { Toast } from 'vant'
|
||||
import { postFunction } from '@/api/supplied-service'
|
||||
import { useUserStore } from '@/store/user'
|
||||
|
||||
const SKU_COLOR_MAP = {
|
||||
cream: '奶油白',
|
||||
blue: '雾霾蓝',
|
||||
orange: '暖橙色'
|
||||
}
|
||||
|
||||
const SKU_SIZE_MAP = {
|
||||
standard: '标准款',
|
||||
plus: '升级款'
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'JoyfulSelectionAfterSaleSelect',
|
||||
data: () => ({
|
||||
loading: false,
|
||||
currentOrder: {},
|
||||
currentSubOrder: {}
|
||||
}),
|
||||
computed: {
|
||||
...mapState(useUserStore, ['supplierId', 'userId']),
|
||||
products() {
|
||||
return this.currentSubOrder.products || []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadOrderDetail()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useUserStore, ['fetchBridgeToken']),
|
||||
skuText(item = {}) {
|
||||
const sku = String(item.sku || item.skuText || '').trim()
|
||||
const parts = sku.split('-').slice(-2).filter(Boolean)
|
||||
const color = SKU_COLOR_MAP[parts[0]] || parts[0]
|
||||
const size = SKU_SIZE_MAP[parts[1]] || parts[1]
|
||||
|
||||
return color || size ? [color, size].filter(Boolean).join(' | ') : '-'
|
||||
},
|
||||
async loadOrderDetail() {
|
||||
this.loading = true
|
||||
try {
|
||||
await this.fetchBridgeToken()
|
||||
const data = await postFunction('order-detail', {
|
||||
supplierId: this.supplierId,
|
||||
userId: this.userId,
|
||||
mainOrderId: String(this.$route.query.mainOrderId || ''),
|
||||
orderId: String(this.$route.query.orderId || '')
|
||||
})
|
||||
|
||||
this.currentOrder = data?.order || {}
|
||||
this.currentSubOrder = data?.subOrder || {}
|
||||
} catch (error) {
|
||||
Toast(error.message || '查询订单详情失败，请稍后再试')
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
goReturn() {
|
||||
this.$router.push({
|
||||
path: '/joyful-selection/after-sale/return',
|
||||
query: {
|
||||
mainOrderId: this.currentOrder.mainOrderId || this.$route.query.mainOrderId,
|
||||
orderId: this.currentSubOrder.orderId || this.$route.query.orderId
|
||||
}
|
||||
})
|
||||
},
|
||||
goExchange() {
|
||||
this.$router.push({
|
||||
path: '/joyful-selection/after-sale/exchange',
|
||||
query: {
|
||||
mainOrderId: this.currentOrder.mainOrderId || this.$route.query.mainOrderId,
|
||||
orderId: this.currentSubOrder.orderId || this.$route.query.orderId
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.after-sale-select-page {
|
||||
min-height: 100vh;
|
||||
padding: 46px 10px 16px;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.after-sale-select-page ::v-deep .van-nav-bar {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.product-card,
|
||||
.skeleton-card,
|
||||
.type-card {
|
||||
margin-top: 10px;
|
||||
padding: 14px 12px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.product-card h3,
|
||||
.type-card h3 {
|
||||
margin: 0 0 14px;
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.product-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.product-thumb {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
flex: none;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
.product-info h4 {
|
||||
margin: 0 0 7px;
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.product-info p {
|
||||
margin: 0 0 7px;
|
||||
color: #8f8f8f;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.product-info b {
|
||||
color: #ff5b20;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.product-row > span {
|
||||
align-self: flex-end;
|
||||
color: #111;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.type-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 70px;
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
display: flex;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.return-icon {
|
||||
background: #ff6b2c;
|
||||
}
|
||||
|
||||
.exchange-icon {
|
||||
background: #5aa7ff;
|
||||
}
|
||||
|
||||
.type-item div {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.type-item h4 {
|
||||
margin: 0 0 6px;
|
||||
color: #222;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.type-item p {
|
||||
margin: 0;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.type-item > .van-icon {
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin: 10px 0 0;
|
||||
padding: 11px 12px;
|
||||
border-radius: 8px;
|
||||
color: #aaa;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user