points-mall/supplied-h5/src/view/joyful-selection/after-sale/select/index.vue

<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>