feat: 查积分、支付、拆弹、取消订单

2026-07-28 18:39:34 +08:00
parent 53305757f8
commit c443109869
40 changed files with 1814 additions and 163 deletions
@@ -2,6 +2,25 @@ const API_BASE = process.env.VUE_APP_SUPPLIED_API_BASE || 'http://localhost:8888

 const normalizeBase = base => base.replace(/\/$/, '')

+export const getFunction = async (name, params = {}) => {
+  const url = new URL(`${normalizeBase(API_BASE)}/${name}`)
+  Object.entries(params).forEach(([key, value]) => {
+    if (value !== undefined && value !== null && value !== '') {
+      url.searchParams.set(key, value)
+    }
+  })
+
+  const response = await fetch(url.toString())
+  const payload = await response.json().catch(() => ({}))
+
+  if (!response.ok || payload.success === false) {
+    const message = payload.error?.message || payload.msg || '请求失败'
+    throw new Error(message)
+  }
+
+  return payload.data
+}
+
 export const postFunction = async (name, body = {}) => {
  const response = await fetch(`${normalizeBase(API_BASE)}/${name}`, {
    method: 'POST',
@@ -3,6 +3,7 @@ import { postFunction } from '@/api/supplied-service'

 const USER_KEY = 'joyful-selection-user'
 const DEFAULT_SUPPLIER_IDENTIFICATION = (process.env.VUE_APP_SUPPLIER_IDENTIFICATION || '').toLowerCase()
+let bridgeTokenPromise = null

 const readUser = () => {
  try {
@@ -22,10 +23,10 @@ export const useUserStore = defineStore('joyfulSelectionUser', {
    supplierIdentification: '',
    supplierId: '',
    supplierName: '',
-    clientId: '',
    token: '',
    refreshToken: '',
    tokenExpiresAt: 0,
+    pointsBalance: 0,
    loaded: false,
    loadingToken: false
  }),
@@ -42,10 +43,10 @@ export const useUserStore = defineStore('joyfulSelectionUser', {
      this.supplierIdentification = supplierIdentification
      this.supplierId = supplierChanged ? '' : data.supplierId || ''
      this.supplierName = supplierChanged ? '' : data.supplierName || ''
-      this.clientId = supplierChanged ? '' : data.clientId || ''
      this.token = supplierChanged ? '' : data.token || ''
      this.refreshToken = supplierChanged ? '' : data.refreshToken || ''
      this.tokenExpiresAt = supplierChanged ? 0 : Number(data.tokenExpiresAt || 0)
+      this.pointsBalance = supplierChanged ? 0 : Number(data.pointsBalance || 0)
      this.loaded = true
    },
    persistUser() {
@@ -54,10 +55,10 @@ export const useUserStore = defineStore('joyfulSelectionUser', {
        supplierIdentification: this.supplierIdentification,
        supplierId: this.supplierId,
        supplierName: this.supplierName,
-        clientId: this.clientId,
        token: this.token,
        refreshToken: this.refreshToken,
-        tokenExpiresAt: this.tokenExpiresAt
+        tokenExpiresAt: this.tokenExpiresAt,
+        pointsBalance: this.pointsBalance
      })
      this.loaded = true
    },
@@ -73,6 +74,7 @@ export const useUserStore = defineStore('joyfulSelectionUser', {
        this.token = ''
        this.refreshToken = ''
        this.tokenExpiresAt = 0
+        this.pointsBalance = 0
      }
      if (!this.supplierIdentification) {
        this.supplierIdentification = DEFAULT_SUPPLIER_IDENTIFICATION
@@ -100,19 +102,21 @@ export const useUserStore = defineStore('joyfulSelectionUser', {

      this.supplierId = data?.supplierId || ''
      this.supplierName = data?.supplierName || ''
-      this.clientId = data?.clientId || ''
      this.persistUser()
    },
    async fetchBridgeToken() {
      if (!this.loaded) {
        this.loadUser()
      }
-      if (!this.userId || !this.supplierIdentification || this.loadingToken || this.hasToken) {
+      if (!this.userId || !this.supplierIdentification || this.hasToken) {
        return
      }
+      if (this.loadingToken && bridgeTokenPromise) {
+        return bridgeTokenPromise
+      }

      this.loadingToken = true
-      try {
+      bridgeTokenPromise = (async () => {
        if (!this.supplierId) {
          await this.fetchSupplierInfo()
        }
@@ -129,9 +133,34 @@ export const useUserStore = defineStore('joyfulSelectionUser', {
        const expiresIn = Number(data?.expiresIn || 0)
        this.tokenExpiresAt = this.token && expiresIn > 0 ? Date.now() + expiresIn * 1000 : 0
        this.persistUser()
+      })()
+
+      try {
+        await bridgeTokenPromise
      } finally {
        this.loadingToken = false
+        bridgeTokenPromise = null
      }
+    },
+    async fetchUserPoints() {
+      if (!this.loaded) {
+        this.loadUser()
+      }
+      await this.fetchBridgeToken()
+
+      if (!this.userId || !this.supplierId || !this.token) {
+        return this.pointsBalance
+      }
+
+      const data = await postFunction('supplier-points', {
+        userId: this.userId,
+        supplierId: this.supplierId,
+        token: this.token
+      })
+
+      this.pointsBalance = Number(data?.userPoints || 0)
+      this.persistUser()
+      return this.pointsBalance
    }
  }
 })
@@ -24,7 +24,7 @@
    <section class="product-section">
      <header class="section-head"><b>限时秒杀</b><a @click="$router.push('/joyful-selection/products')">更多 ›</a></header>
      <div class="product-row">
-        <article v-for="item in flashProducts" :key="item.name" @click="goProductDetail(item)">
+        <article v-for="item in flashProducts" :key="item.id" @click="goProductDetail(item)">
          <van-image :src="item.image" fit="cover" />
          <div class="product-meta">
            <p>{{ item.name }}</p><b>¥{{ item.price }}</b>
@@ -36,7 +36,7 @@
    <section class="product-section hot-section">
      <header class="section-head"><b>爆款推荐</b><a @click="$router.push('/joyful-selection/products')">更多 ›</a></header>
      <div class="product-row">
-        <article v-for="item in hotProducts" :key="item.name" @click="goProductDetail(item)">
+        <article v-for="item in hotProducts" :key="item.id" @click="goProductDetail(item)">
          <van-image :src="item.image" fit="cover" />
          <div class="product-meta">
            <p>{{ item.name }}</p><b>¥{{ item.price }}</b>
@@ -44,12 +44,11 @@
        </article>
      </div>
    </section>
-
  </main>
 </template>

 <script>
-import { joyfulProducts } from './product-data'
+import { getFunction } from '@/api/supplied-service'

 export default {
  name: 'JoyfulSelectionHome',
@@ -68,11 +67,30 @@ export default {
        { name: '超值专区', icon: 'label', color: '#ec8c3d', background: '#fff4e9' },
        { name: '全部分类', icon: 'apps-o', color: '#989898', background: '#f5f5f5' }
      ],
-      flashProducts: joyfulProducts.slice(0, 4),
-      hotProducts: [joyfulProducts[2], joyfulProducts[0], joyfulProducts[1], joyfulProducts[3]]
+      products: []
    }
  },
+  computed: {
+    flashProducts() {
+      return this.products.slice(0, 4)
+    },
+    hotProducts() {
+      return this.products.slice(0, 4).reverse()
+    }
+  },
+  created() {
+    this.loadProducts()
+  },
  methods: {
+    async loadProducts() {
+      try {
+        const data = await getFunction('product-list')
+        this.products = data?.products || []
+      } catch (error) {
+        console.warn('查询商品列表失败', error)
+        this.$toast(error.message || '查询商品列表失败')
+      }
+    },
    goProductDetail(item) {
      this.$router.push({ path: '/joyful-selection/product-detail', query: { id: item.id } })
    }
@@ -199,8 +217,8 @@ export default {

 .section-head {
  display: flex;
-  align-items: center;
  min-height: 18px;
+  align-items: center;
  margin: 0 0 8px 1px;
 }

@@ -229,10 +247,10 @@ export default {

 .product-row .van-image {
  width: 100%;
-  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
  border-radius: 4px;
+  aspect-ratio: 1 / 1;
  background: #f5f5f5;
 }

@@ -269,5 +287,4 @@ export default {
 .hot-section {
  margin-bottom: 6px;
 }
-
 </style>
@@ -55,7 +55,9 @@

 <script>
 import { mapActions, mapState } from 'pinia'
+import { postFunction } from '@/api/supplied-service'
 import { useCartStore } from '@/store/cart'
+import { useUserStore } from '@/store/user'
 import { readAddresses, readChosenAddressId } from '../../address/address-data'
 import { createOrderNo, savePaymentInfo } from '../payment/payment-data'

@@ -67,10 +69,12 @@ export default {
    remark: '',
    goods: [],
    showAllGoods: false,
-    chosenAddress: {}
+    chosenAddress: {},
+    submitting: false
  }),
  computed: {
    ...mapState(useCartStore, ['items']),
+    ...mapState(useUserStore, ['supplierId', 'token', 'userId']),
    visibleGoods() {
      return this.showAllGoods ? this.goods : this.goods.slice(0, 3)
    },
@@ -91,6 +95,7 @@ export default {
  },
  methods: {
    ...mapActions(useCartStore, ['loadCart']),
+    ...mapActions(useUserStore, ['fetchBridgeToken']),
    getCheckoutGoods() {
      const storedItems = this.readCheckoutItems()

@@ -122,15 +127,44 @@ export default {
    maskTel(tel = '') {
      return tel.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
    },
-    onSubmit() {
-      savePaymentInfo({
-        orderNo: createOrderNo(),
-        amount: this.goodsAmount,
-        receiverName: this.chosenAddress.name || '',
-        receiverTel: this.maskTel(this.chosenAddress.tel || ''),
-        goods: this.goods
-      })
-      this.$router.push('/joyful-selection/payment')
+    async onSubmit() {
+      if (this.submitting) {
+        return
+      }
+
+      this.submitting = true
+      try {
+        await this.fetchBridgeToken()
+
+        if (!this.supplierId || !this.token || !this.userId) {
+          throw new Error('供应商授权信息不完整，请重新进入商城')
+        }
+
+        const orderNo = createOrderNo()
+        const data = await postFunction('order-create', {
+          supplierId: this.supplierId,
+          userId: this.userId,
+          token: this.token,
+          orderNo,
+          amount: this.goodsAmount,
+          goods: this.goods
+        })
+
+        savePaymentInfo({
+          orderNo: data?.orderId || orderNo,
+          orderNumberId: data?.orderNumberId || '',
+          amount: this.goodsAmount,
+          receiverName: this.chosenAddress.name || '',
+          receiverTel: this.maskTel(this.chosenAddress.tel || ''),
+          goods: this.goods
+        })
+        this.$router.push('/joyful-selection/payment')
+      } catch (error) {
+        console.warn('提交待支付订单失败', error)
+        this.$toast(error.message || '提交待支付订单失败')
+      } finally {
+        this.submitting = false
+      }
    }
  }
 }
@@ -37,7 +37,9 @@
      </van-radio-group>
    </section>

-    <van-button class="pay-button" round block @click="onPay">立即支付 ¥{{ amountText }}</van-button>
+    <van-button class="pay-button" round block :loading="submitting" @click="onPay">
+      立即支付 ¥{{ amountText }}
+    </van-button>

    <van-popup v-model="showConfirm" class="pay-popup" round position="bottom">
      <article class="pay-panel">
@@ -54,8 +56,8 @@
          <p><span>订单编号</span><b>{{ paymentInfo.orderNo || '-' }}</b></p>
        </div>
        <footer>
-          <van-button round @click="showConfirm = false">取消</van-button>
-          <van-button round type="danger" @click="confirmPay">确认支付</van-button>
+          <van-button round :disabled="submitting" @click="showConfirm = false">取消</van-button>
+          <van-button round type="danger" :loading="submitting" @click="confirmPay">确认支付</van-button>
        </footer>
      </article>
    </van-popup>
@@ -63,6 +65,9 @@
 </template>

 <script>
+import { mapActions, mapState } from 'pinia'
+import { postFunction } from '@/api/supplied-service'
+import { useUserStore } from '@/store/user'
 import { readPaymentInfo, formatYuan } from './payment-data'

 export default {
@@ -70,10 +75,11 @@ export default {
  data: () => ({
    payType: 'points',
    showConfirm: false,
-    paymentInfo: {},
-    pointsBalance: '32.00'
+    submitting: false,
+    paymentInfo: {}
  }),
  computed: {
+    ...mapState(useUserStore, ['pointsBalance', 'supplierId', 'token']),
    amountText() {
      return formatYuan(this.paymentInfo.amount)
    },
@@ -81,7 +87,7 @@ export default {
      const name = this.paymentInfo.receiverName || '-'
      const tel = this.paymentInfo.receiverTel || ''

-      return tel ? `${name}　${tel}` : name
+      return tel ? `${name} ${tel}` : name
    },
    payTypeText() {
      const method = this.payMethods.find(item => item.name === this.payType)
@@ -90,21 +96,61 @@ export default {
    },
    payMethods() {
      return [
-        { name: 'points', label: `积分支付（余额：¥${this.pointsBalance}）`, icon: 'gold-coin-o' },
+        { name: 'points', label: `积分支付（余额：¥${this.pointsBalanceText}）`, icon: 'gold-coin-o' },
        { name: 'wechat', label: '微信支付', icon: 'wechat-pay' },
        { name: 'alipay', label: '支付宝支付', icon: 'alipay' }
      ]
+    },
+    pointsBalanceText() {
+      return Number(this.pointsBalance || 0).toLocaleString('zh-CN', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      })
    }
  },
  created() {
    this.paymentInfo = readPaymentInfo()
+    this.fetchUserPoints().catch(error => {
+      console.warn('查询用户积分失败', error)
+      this.$toast(error.message || '查询用户积分失败')
+    })
  },
  methods: {
+    ...mapActions(useUserStore, ['fetchUserPoints', 'fetchBridgeToken']),
    onPay() {
      this.showConfirm = true
    },
-    confirmPay() {
-      this.$router.push({ path: '/joyful-selection/payment-success', query: { payType: this.payType } })
+    async confirmPay() {
+      if (this.submitting) {
+        return
+      }
+
+      this.submitting = true
+      try {
+        await this.fetchBridgeToken()
+
+        if (!this.supplierId || !this.token || !this.paymentInfo.orderNo) {
+          throw new Error('订单支付信息不完整，请重新提交订单')
+        }
+
+        await postFunction('order-pay', {
+          supplierId: this.supplierId,
+          token: this.token,
+          orderId: this.paymentInfo.orderNo,
+          amount: this.paymentInfo.amount,
+          totalPrice: Number(this.amountText),
+          wPayOrAPay: 0,
+          pointsPrice: Number(this.amountText)
+        })
+
+        this.showConfirm = false
+        this.$router.push({ path: '/joyful-selection/payment-success', query: { payType: this.payType } })
+      } catch (error) {
+        console.warn('确认购买失败', error)
+        this.$toast(error.message || '确认购买失败')
+      } finally {
+        this.submitting = false
+      }
    }
  }
 }
@@ -5,7 +5,7 @@ export const createOrderNo = () => {
  const pad = value => String(value).padStart(2, '0')
  const timestamp = `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`

-  return `YX${timestamp}`
+  return `ORD${timestamp}`
 }

 export const savePaymentInfo = info => {
@@ -11,7 +11,7 @@

    <section class="image-section">
      <van-image class="product-image" :src="product.image" fit="cover" />
-      <span class="image-index">1/5</span>
+      <span class="image-index">1/{{ imageCount }}</span>
    </section>

    <section class="product-info">
@@ -82,11 +82,22 @@

 <script>
 import { mapActions, mapState } from 'pinia'
+import { getFunction } from '@/api/supplied-service'
 import { useCartStore } from '@/store/cart'
-import { getJoyfulProduct } from '../product-data'
 import JoyfulSkuPopup from '../products/components/JoyfulSkuPopup.vue'
 import JoyfulCartPanel from '../cart/components/JoyfulCartPanel.vue'

+const emptyProduct = {
+  id: '',
+  name: '',
+  detail: '',
+  price: '0.00',
+  originPrice: '0.00',
+  image: '',
+  picInfo: [],
+  tag: ''
+}
+
 export default {
  name: 'JoyfulSelectionProductDetail',
  components: {
@@ -94,13 +105,14 @@ export default {
    JoyfulCartPanel
  },
  data: () => ({
+    product: emptyProduct,
    showCartPopup: false,
    count: 1,
    features: [
-      { icon: 'music-o', title: '舒适半入耳设计', desc: '长时间佩戴更舒适' },
-      { icon: 'bar-chart-o', title: '高清音质', desc: '清晰稳定的聆听体验' },
-      { icon: 'battery-o', title: '长续航', desc: '单次可用约 5 小时' },
-      { icon: 'cluster-o', title: '蓝牙 5.0', desc: '稳定连接，低延迟' }
+      { icon: 'certificate', title: '品质优选', desc: '精选商品，安心兑换' },
+      { icon: 'logistics', title: '快速配送', desc: '下单后尽快安排发货' },
+      { icon: 'shield-o', title: '售后保障', desc: '商品问题及时处理' },
+      { icon: 'gold-coin-o', title: '积分抵扣', desc: '支持积分支付兑换' }
    ]
  }),
  computed: {
@@ -108,13 +120,25 @@ export default {
    cartBadge() {
      return this.totalCount > 0 ? this.totalCount : ''
    },
-    product() { return getJoyfulProduct(this.$route.query.id) }
+    imageCount() {
+      return Math.max(this.product.picInfo?.length || 1, 1)
+    }
  },
  created() {
    this.loadCart()
+    this.loadProduct()
  },
  methods: {
    ...mapActions(useCartStore, ['loadCart']),
+    async loadProduct() {
+      try {
+        const data = await getFunction('product-detail', { id: this.$route.query.id })
+        this.product = data || emptyProduct
+      } catch (error) {
+        console.warn('查询商品详情失败', error)
+        this.$toast(error.message || '查询商品详情失败')
+      }
+    },
    openCartPopup() {
      this.loadCart()
      this.showCartPopup = true
@@ -130,6 +154,9 @@ export default {
      this.$router.push({ path: '/joyful-selection/checkout', query: { source: 'cart' } })
    },
    openSku(mode) {
+      if (!this.product.id) {
+        return
+      }
      this.$refs.skuPopup.open(this.product, mode)
    }
  }
@@ -15,18 +15,23 @@
      <aside>
        <div class="layout-aside">
          <span
-          v-for="category in categories"
-          :key="category.id"
-          :class="{ active: category.id === selectedCategoryId }"
-          @click="selectedCategoryId = category.id"
-        >
-          {{ category.name }}
+            v-for="category in categories"
+            :key="category.id"
+            :class="{ active: category.id === selectedCategoryId }"
+            @click="selectedCategoryId = category.id"
+          >
+            {{ category.name }}
          </span>
        </div>
      </aside>

      <div class="goods">
-        <article v-for="item in visibleGoods" :key="item.id" class="goods-item" @click="goProductDetail(item)">
+        <article
+          v-for="item in visibleGoods"
+          :key="item.id"
+          class="goods-item"
+          @click="goProductDetail(item)"
+        >
          <van-image class="goods-thumb" :src="item.image" fit="cover" />
          <div class="goods-info">
            <div class="goods-title">
@@ -52,9 +57,13 @@
 </template>

 <script>
-import { joyfulCategories, joyfulProductList } from '../product-data'
+import { getFunction } from '@/api/supplied-service'
 import JoyfulSkuPopup from './components/JoyfulSkuPopup.vue'

+const defaultCategories = [
+  { id: 'recommend', name: '推荐' }
+]
+
 export default {
  name: 'JoyfulSelectionProductList',
  components: {
@@ -63,20 +72,34 @@ export default {
  data: () => ({
    selectedCategoryId: 'recommend',
    keyword: '',
-    categories: joyfulCategories,
-    goods: joyfulProductList
+    categories: defaultCategories,
+    goods: []
  }),
  computed: {
    visibleGoods() {
      const categoryGoods = this.selectedCategoryId === 'recommend'
-          ? this.goods.slice(0, 10)
-          : this.goods.filter(item => item.categoryId === this.selectedCategoryId)
+        ? this.goods
+        : this.goods.filter(item => item.categoryId === this.selectedCategoryId)
+
      return this.keyword
-          ? categoryGoods.filter(item => item.name.includes(this.keyword))
-          : categoryGoods
+        ? categoryGoods.filter(item => item.name.includes(this.keyword))
+        : categoryGoods
    }
  },
+  created() {
+    this.loadProducts()
+  },
  methods: {
+    async loadProducts() {
+      try {
+        const data = await getFunction('product-list')
+        this.categories = data?.categories?.length ? data.categories : defaultCategories
+        this.goods = data?.products || []
+      } catch (error) {
+        console.warn('查询商品列表失败', error)
+        this.$toast(error.message || '查询商品列表失败')
+      }
+    },
    goProductDetail(item) {
      this.$router.push({ path: '/joyful-selection/product-detail', query: { id: item.id } })
    },
@@ -185,9 +208,9 @@ export default {
 }

 .layout-aside {
-  background-color: #f5f6f8;
-  border-top-right-radius: 15px;
  overflow: hidden;
+  border-top-right-radius: 15px;
+  background-color: #f5f6f8;
 }

 .layout aside span {
@@ -204,8 +227,8 @@ export default {

 .layout aside .active {
  position: relative;
-  background: #ededed;;
  color: #111;
+  background: #ededed;
  font-size: 15px;
  font-weight: 700;
 }
@@ -340,5 +363,4 @@ export default {
 .cart-button .van-icon {
  font-size: 20px;
 }
-
 </style>
@@ -6,7 +6,12 @@
        <van-icon name="ellipsis" />
      </div>
      <div class="user-row">
-        <van-image round width="52" height="52" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+        <van-image
+          round
+          width="52"
+          height="52"
+          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+        />
        <div>
          <b>张三</b>
          <p>欢迎来到悦享优选</p>
@@ -15,9 +20,26 @@
    </section>

    <section class="asset-card">
-      <div><small>我的积分</small><b>2368</b></div>
-      <div><small>成长值</small><b>3680</b></div>
-      <div><small>优惠券</small><b>5</b></div>
+      <van-image
+        width="64"
+        height="64"
+        fit="contain"
+        :src="require('@/assets/joyful-selection/profile/coins.png')"
+      />
+      <div class="asset-info">
+        <small>我的积分</small>
+        <b>{{ formattedPoints }}</b>
+      </div>
+      <button class="points-link" type="button" @click="$router.push('/joyful-selection/points')">
+        <van-image
+          width="18"
+          height="18"
+          fit="contain"
+          :src="require('@/assets/joyful-selection/profile/gift.png')"
+        />
+        <span>积分明细</span>
+        <van-icon name="arrow" />
+      </button>
    </section>

    <section class="panel">
@@ -26,14 +48,24 @@
        <span @click="$router.push('/joyful-selection/orders')">全部订单 <van-icon name="arrow" /></span>
      </div>
      <van-grid :column-num="5" :border="false">
-        <van-grid-item v-for="item in orderItems" :key="item.text" :icon="item.icon" :text="item.text" />
+        <van-grid-item
+          v-for="item in orderItems"
+          :key="item.text"
+          :icon="item.icon"
+          :text="item.text"
+        />
      </van-grid>
    </section>

    <section class="panel service-panel">
      <div class="panel-title"><b>我的服务</b></div>
      <div class="coming-soon">
-        <van-image width="104" height="80" fit="contain" src="https://img.yzcdn.cn/vant/empty-image-default.png" />
+        <van-image
+          width="104"
+          height="80"
+          fit="contain"
+          src="https://img.yzcdn.cn/vant/empty-image-default.png"
+        />
        <p>敬请期待</p>
      </div>
    </section>
@@ -41,6 +73,9 @@
 </template>

 <script>
+import { mapActions, mapState } from 'pinia'
+import { useUserStore } from '@/store/user'
+
 export default {
  name: 'JoyfulSelectionProfile',
  data: () => ({
@@ -50,8 +85,25 @@ export default {
      { icon: 'send-gift-o', text: '待收货' },
      { icon: 'todo-list-o', text: '已完成' },
      { icon: 'after-sale', text: '售后' }
-    ],
-  })
+    ]
+  }),
+  computed: {
+    ...mapState(useUserStore, ['pointsBalance']),
+    formattedPoints() {
+      return Number(this.pointsBalance || 0).toLocaleString('zh-CN', {
+        maximumFractionDigits: 2
+      })
+    }
+  },
+  created() {
+    this.fetchUserPoints().catch(error => {
+      console.warn('查询用户积分失败', error)
+      this.$toast(error.message || '查询用户积分失败')
+    })
+  },
+  methods: {
+    ...mapActions(useUserStore, ['fetchUserPoints'])
+  }
 }
 </script>

@@ -121,18 +173,20 @@ export default {
  position: relative;
  z-index: 1;
  display: flex;
+  min-height: 92px;
+  align-items: center;
+  gap: 12px;
  margin: -40px 10px 16px;
-  padding: 20px 0 18px;
+  padding: 14px 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(61, 68, 92, .06);
 }

-.asset-card div {
+.asset-info {
  display: grid;
  flex: 1;
-  gap: 6px;
-  text-align: center;
+  gap: 5px;
 }

 .asset-card small {
@@ -142,7 +196,23 @@ export default {

 .asset-card b {
  color: #ff5b20;
-  font-size: 16px;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.points-link {
+  display: inline-flex;
+  height: 44px;
+  min-width: 118px;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  border: 0;
+  border-radius: 999px;
+  background: #fff0ec;
+  color: #ff5b20;
+  font-size: 13px;
  font-weight: 700;
 }

@@ -1,86 +1,109 @@
 <template>
  <main class="orders-page">
    <van-nav-bar title="我的订单" left-arrow @click-left="$router.back()" />
-    <van-tabs v-model="active" class="order-tabs" line-width="18" line-height="2" color="#ff5b20" title-active-color="#ff5b20">
+    <van-tabs
+      v-model="active"
+      class="order-tabs"
+      line-width="18"
+      line-height="2"
+      color="#ff5b20"
+      title-active-color="#ff5b20"
+    >
      <van-tab v-for="tab in tabs" :key="tab" :title="tab" />
    </van-tabs>

    <section class="order-list">
-      <article v-for="order in visibleOrders" :key="order.id" class="order-card">
-        <header>
-          <span>订单号：{{ order.id }}</span>
-          <b :class="order.statusClass">{{ order.status }}</b>
-        </header>
-        <div class="order-body">
-          <div class="thumb-row">
-            <van-image
-              v-for="item in order.products"
-              :key="item.id"
-              class="order-thumb"
-              :src="item.image"
-              fit="cover"
-            />
+      <van-loading v-if="loading" class="order-loading" color="#ff5b20" size="24px">加载中...</van-loading>
+      <van-empty v-else-if="visibleOrders.length === 0" description="暂无订单" />
+
+      <template v-else>
+        <article v-for="order in visibleOrders" :key="order.id" class="order-card">
+          <header>
+            <div class="order-nos">
+              <span>主单号：{{ order.mainOrderId || '-' }}</span>
+              <span>子单号：{{ order.orderId || '-' }}</span>
+            </div>
+            <b :class="order.statusClass">{{ order.status }}</b>
+          </header>
+          <div class="order-body">
+            <div class="thumb-row">
+              <van-image
+                v-for="item in previewProducts(order.products)"
+                :key="item.id"
+                class="order-thumb"
+                :src="item.image"
+                fit="cover"
+              />
+            </div>
+            <div class="order-summary">
+              <p>共{{ order.count }}件商品</p>
+              <p>合计：<b>¥{{ order.amount }}</b></p>
+            </div>
          </div>
-          <div class="order-summary">
-            <p>共{{ order.count }}件商品</p>
-            <p>合计：<b>¥{{ order.amount }}</b></p>
-          </div>
-        </div>
-        <footer>
-          <van-button size="small" round plain :class="order.buttonClass">{{ order.actionText }}</van-button>
-        </footer>
-      </article>
+          <footer>
+            <van-button size="small" round plain :class="order.buttonClass">{{ order.actionText }}</van-button>
+          </footer>
+        </article>
+      </template>
    </section>
  </main>
 </template>

 <script>
-import { joyfulProducts } from '../../product-data'
+import { mapActions, mapState } from 'pinia'
+import { Toast } from 'vant'
+import { postFunction } from '@/api/supplied-service'
+import { useUserStore } from '@/store/user'

 export default {
  name: 'JoyfulSelectionOrders',
  data: () => ({
    active: 0,
    tabs: ['全部', '待付款', '待发货', '待收货', '已完成', '售后'],
-    orders: [
-      {
-        id: 'YX2024051812345678',
-        status: '待发货',
-        statusClass: 'pending',
-        actionText: '查看物流',
-        buttonClass: 'primary-action',
-        products: joyfulProducts.slice(0, 3),
-        count: 3,
-        amount: '287.90'
-      },
-      {
-        id: 'YX2024051509876543',
-        status: '待收货',
-        statusClass: 'pending',
-        actionText: '确认收货',
-        buttonClass: 'dark-action',
-        products: joyfulProducts.slice(1, 2),
-        count: 2,
-        amount: '139.00'
-      },
-      {
-        id: 'YX2024051211223344',
-        status: '已完成',
-        statusClass: 'done',
-        actionText: '再次购买',
-        buttonClass: 'dark-action',
-        products: joyfulProducts.slice(2, 3),
-        count: 1,
-        amount: '69.90'
-      }
-    ]
+    orders: [],
+    loading: false
  }),
  computed: {
+    ...mapState(useUserStore, ['supplierId', 'userId']),
    visibleOrders() {
      const tab = this.tabs[this.active]

      return tab === '全部' ? this.orders : this.orders.filter(order => order.status === tab)
    }
+  },
+  created() {
+    this.loadOrders()
+  },
+  methods: {
+    ...mapActions(useUserStore, ['fetchBridgeToken']),
+    previewProducts(products = []) {
+      return products.slice(0, 3)
+    },
+    async loadOrders() {
+      this.loading = true
+
+      try {
+        await this.fetchBridgeToken()
+
+        if (!this.supplierId || !this.userId) {
+          Toast('用户信息不完整，请重新进入商城')
+          this.orders = []
+          return
+        }
+
+        const data = await postFunction('order-list', {
+          supplierId: this.supplierId,
+          userId: this.userId
+        })
+
+        this.orders = data?.orders || []
+      } catch (error) {
+        Toast(error.message || '查询订单失败，请稍后再试')
+        this.orders = []
+      } finally {
+        this.loading = false
+      }
+    }
  }
 }
 </script>
@@ -123,6 +146,12 @@ export default {
  padding: 8px 8px 14px;
 }

+.order-loading {
+  display: flex;
+  justify-content: center;
+  padding: 42px 0;
+}
+
 .order-card {
  overflow: hidden;
  margin-bottom: 10px;
@@ -132,16 +161,21 @@ export default {

 .order-card header {
  display: flex;
-  align-items: center;
+  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 12px 8px;
 }

-.order-card header span {
+.order-nos {
  min-width: 0;
+}
+
+.order-nos span {
+  display: block;
  overflow: hidden;
  color: #777;
  font-size: 11px;
+  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
@@ -151,6 +185,7 @@ export default {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 700;
+  line-height: 18px;
 }

 .order-card header .pending {
@@ -1,3 +1,138 @@
-<template><main class="points-page"><van-nav-bar title="我的积分" left-arrow @click-left="$router.back()"/><section class="score"><small>可用积分</small><b>2368</b><van-button size="small" round @click="$router.push('/joyful-selection/products')">积分说明</van-button></section><van-grid :column-num="4" :border="false"><van-grid-item icon="gift-o" text="积分商城"/><van-grid-item icon="gift-card-o" text="积分抽奖"/><van-grid-item icon="balance-list-o" text="积分兑换"/><van-grid-item icon="todo-list-o" text="积分签到"/></van-grid><section class="details"><h3>积分明细</h3><van-cell v-for="item in items" :key="item.title" :title="item.title" :label="item.time" :value="item.value" :value-class="item.value[0] === '+' ? 'income' : 'cost'"/><p>没有更多了～</p></section></main></template>
-<script>export default{name:'JoyfulSelectionPoints',data:()=>({items:[{title:'签到奖励',time:'2024-05-18 09:30',value:'+10'},{title:'订单完成奖励',time:'2024-05-14 10:20',value:'+88'},{title:'积分兑换',time:'2024-05-08 15:11',value:'-200'},{title:'晒单奖励',time:'2024-05-02 08:30',value:'+20'},{title:'评价奖励',time:'2024-04-28 12:08',value:'+5'}]})}</script>
-<style scoped>.points-page{min-height:100vh;padding-top:46px;background:#f7f7f7}.points-page ::v-deep .van-nav-bar{position:fixed;z-index:20;top:0;right:0;left:0;box-shadow:0 1px 0 rgba(0,0,0,.04)}.score{position:relative;margin:10px 12px;padding:16px 18px;border-radius:10px;background:linear-gradient(135deg,#ffe0ac,#ffc66e)}.score small,.score b{display:block}.score small{font-size:11px}.score b{margin-top:6px;font-size:22px}.score .van-button{position:absolute;right:14px;top:24px;background:rgba(255,255,255,.6)}.points-page>.van-grid{margin:0 12px;border-radius:10px;background:#fff}.details{margin:10px 12px;padding:2px 0;border-radius:10px;background:#fff}.details h3{margin:14px;font-size:14px}.details p{text-align:center;color:#aaa;font-size:11px}.income{color:#14a44d}.cost{color:#f15b45}</style>
+<template>
+  <main class="points-page">
+    <van-nav-bar title="我的积分" left-arrow @click-left="$router.back()" />
+    <section class="score">
+      <small>可用积分</small>
+      <b>{{ formattedPoints }}</b>
+      <van-button size="small" round @click="$router.push('/joyful-selection/products')">积分说明</van-button>
+    </section>
+    <van-grid :column-num="4" :border="false">
+      <van-grid-item icon="gift-o" text="积分商城" />
+      <van-grid-item icon="gift-card-o" text="积分抽奖" />
+      <van-grid-item icon="balance-list-o" text="积分兑换" />
+      <van-grid-item icon="todo-list-o" text="积分签到" />
+    </van-grid>
+    <section class="details">
+      <h3>积分明细</h3>
+      <van-cell
+        v-for="item in items"
+        :key="item.title"
+        :title="item.title"
+        :label="item.time"
+        :value="item.value"
+        :value-class="item.value[0] === '+' ? 'income' : 'cost'"
+      />
+      <p>没有更多了～</p>
+    </section>
+  </main>
+</template>
+
+<script>
+import { mapActions, mapState } from 'pinia'
+import { useUserStore } from '@/store/user'
+
+export default {
+  name: 'JoyfulSelectionPoints',
+  data: () => ({
+    items: [
+      { title: '订单兑换', time: '2024-05-18 14:35', value: '-287.9' },
+      { title: '积分发放', time: '2024-05-10 09:20', value: '+300' }
+    ]
+  }),
+  computed: {
+    ...mapState(useUserStore, ['pointsBalance']),
+    formattedPoints() {
+      return Number(this.pointsBalance || 0).toLocaleString('zh-CN', {
+        maximumFractionDigits: 2
+      })
+    }
+  },
+  created() {
+    this.fetchUserPoints().catch(error => {
+      console.warn('查询用户积分失败', error)
+      this.$toast(error.message || '查询用户积分失败')
+    })
+  },
+  methods: {
+    ...mapActions(useUserStore, ['fetchUserPoints'])
+  }
+}
+</script>
+
+<style scoped>
+.points-page {
+  min-height: 100vh;
+  padding-top: 46px;
+  background: #f7f7f7;
+}
+
+.points-page ::v-deep .van-nav-bar {
+  position: fixed;
+  z-index: 20;
+  top: 0;
+  right: 0;
+  left: 0;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
+}
+
+.score {
+  position: relative;
+  margin: 10px 12px;
+  padding: 16px 18px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #ffe0ac, #ffc66e);
+}
+
+.score small,
+.score b {
+  display: block;
+}
+
+.score small {
+  font-size: 11px;
+}
+
+.score b {
+  margin-top: 6px;
+  font-size: 22px;
+}
+
+.score .van-button {
+  position: absolute;
+  top: 24px;
+  right: 14px;
+  background: rgba(255, 255, 255, .6);
+}
+
+.points-page > .van-grid {
+  margin: 0 12px;
+  border-radius: 10px;
+  background: #fff;
+}
+
+.details {
+  margin: 10px 12px;
+  padding: 2px 0;
+  border-radius: 10px;
+  background: #fff;
+}
+
+.details h3 {
+  margin: 14px;
+  font-size: 14px;
+}
+
+.details p {
+  color: #aaa;
+  font-size: 11px;
+  text-align: center;
+}
+
+.income {
+  color: #14a44d;
+}
+
+.cost {
+  color: #f15b45;
+}
+</style>