From 78bca3b3d5e84adca88aa4513b2c7dc591c1a394 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=8C=E5=85=88=E8=88=9C?= <2499071264@qq.com>
Date: Tue, 28 Jul 2026 10:08:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=95=86=E5=93=81=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |   6 +
 supplied-h5/package-lock.json                 |   7 +
 supplied-h5/package.json                      |   1 +
 supplied-h5/src/router/index.js               |   4 +
 supplied-h5/src/store/cart.js                 |   8 +
 .../joyful-selection/address/address-data.js  |  48 ++
 .../joyful-selection/address/edit/index.vue   | 132 ++++++
 .../view/joyful-selection/address/index.vue   |  94 ++++
 .../joyful-selection/cart/checkout/index.vue  | 409 ++++++++++++++++--
 .../cart/components/JoyfulCartPanel.vue       | 324 ++++++++++++++
 .../view/joyful-selection/cart/edit/index.vue | 227 +++++++++-
 .../src/view/joyful-selection/cart/index.vue  |  61 +--
 .../cart/payment-confirm/index.vue            |  56 ++-
 .../cart/payment-success/index.vue            |  59 ++-
 .../joyful-selection/cart/payment/index.vue   | 223 +++++++++-
 .../cart/payment/payment-data.js              |  23 +
 .../src/view/joyful-selection/index.vue       |   2 +-
 .../src/view/joyful-selection/layout.vue      |  15 +-
 .../src/view/joyful-selection/product-data.js |  84 +++-
 .../joyful-selection/product-detail/index.vue |  69 ++-
 .../components/JoyfulSkuPopup.vue             | 123 ++++--
 .../view/joyful-selection/products/index.vue  | 103 +----
 .../joyful-selection/profile/orders/index.vue |   3 +-
 .../joyful-selection/profile/points/index.vue |   2 +-
 24 files changed, 1849 insertions(+), 234 deletions(-)
 create mode 100644 package-lock.json
 create mode 100644 supplied-h5/src/view/joyful-selection/address/address-data.js
 create mode 100644 supplied-h5/src/view/joyful-selection/address/edit/index.vue
 create mode 100644 supplied-h5/src/view/joyful-selection/address/index.vue
 create mode 100644 supplied-h5/src/view/joyful-selection/cart/components/JoyfulCartPanel.vue
 create mode 100644 supplied-h5/src/view/joyful-selection/cart/payment/payment-data.js
 rename supplied-h5/src/view/joyful-selection/{ => products}/components/JoyfulSkuPopup.vue (62%)

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..d0d75c7
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "points-mall",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/supplied-h5/package-lock.json b/supplied-h5/package-lock.json
index 589a31a..6a1a02e 100644
--- a/supplied-h5/package-lock.json
+++ b/supplied-h5/package-lock.json
@@ -8,6 +8,7 @@
       "name": "supplied-h5",
       "version": "1.0.0",
       "dependencies": {
+        "@vant/area-data": "^1.5.2",
         "core-js": "^3.37.1",
         "pinia": "^2.3.1",
         "vant": "^2.13.9",
@@ -1851,6 +1852,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@vant/area-data": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@vant/area-data/-/area-data-1.5.2.tgz",
+      "integrity": "sha512-Gtxgt6Rjgopt6234ANpO0bBsSwtjZ23lBlVDHIy8Mi2NJqyoj1vgVWY0dri8/2LCZAWzQ6EnwRrUVViUZ0cvMA==",
+      "license": "MIT"
+    },
     "node_modules/@vant/icons": {
       "version": "3.0.2",
       "license": "MIT"
diff --git a/supplied-h5/package.json b/supplied-h5/package.json
index 52e330d..74b1e31 100644
--- a/supplied-h5/package.json
+++ b/supplied-h5/package.json
@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "@vant/area-data": "^1.5.2",
     "core-js": "^3.37.1",
     "pinia": "^2.3.1",
     "vant": "^2.13.9",
diff --git a/supplied-h5/src/router/index.js b/supplied-h5/src/router/index.js
index 0e4df03..6673e53 100644
--- a/supplied-h5/src/router/index.js
+++ b/supplied-h5/src/router/index.js
@@ -11,6 +11,8 @@ import JoyfulSelectionCheckout from '@/view/joyful-selection/cart/checkout/index
 import JoyfulSelectionPayment from '@/view/joyful-selection/cart/payment/index.vue'
 import JoyfulSelectionPaymentConfirm from '@/view/joyful-selection/cart/payment-confirm/index.vue'
 import JoyfulSelectionPaymentSuccess from '@/view/joyful-selection/cart/payment-success/index.vue'
+import JoyfulSelectionAddressList from '@/view/joyful-selection/address/index.vue'
+import JoyfulSelectionAddressEdit from '@/view/joyful-selection/address/edit/index.vue'
 import JoyfulSelectionOrders from '@/view/joyful-selection/profile/orders/index.vue'
 import JoyfulSelectionProfile from '@/view/joyful-selection/profile/index.vue'
 import JoyfulSelectionPoints from '@/view/joyful-selection/profile/points/index.vue'
@@ -38,6 +40,8 @@ export default new Router({
         { path: 'payment', component: JoyfulSelectionPayment },
         { path: 'payment-confirm', component: JoyfulSelectionPaymentConfirm },
         { path: 'payment-success', component: JoyfulSelectionPaymentSuccess },
+        { path: 'address', component: JoyfulSelectionAddressList },
+        { path: 'address/edit', component: JoyfulSelectionAddressEdit },
         { path: 'orders', component: JoyfulSelectionOrders },
         { path: 'profile', component: JoyfulSelectionProfile },
         { path: 'points', component: JoyfulSelectionPoints }
diff --git a/supplied-h5/src/store/cart.js b/supplied-h5/src/store/cart.js
index 4e9dc8b..7005886 100644
--- a/supplied-h5/src/store/cart.js
+++ b/supplied-h5/src/store/cart.js
@@ -45,6 +45,14 @@ export const useCartStore = defineStore('joyfulSelectionCart', {
         this.items.unshift(item)
       }
 
+      this.persistCart()
+    },
+    removeItems(cartIds) {
+      if (!this.loaded) {
+        this.loadCart()
+      }
+
+      this.items = this.items.filter(item => !cartIds.includes(item.cartId))
       this.persistCart()
     }
   }
diff --git a/supplied-h5/src/view/joyful-selection/address/address-data.js b/supplied-h5/src/view/joyful-selection/address/address-data.js
new file mode 100644
index 0000000..a2ca581
--- /dev/null
+++ b/supplied-h5/src/view/joyful-selection/address/address-data.js
@@ -0,0 +1,48 @@
+const ADDRESS_KEY = 'joyful-selection-addresses'
+const CHOSEN_ADDRESS_KEY = 'joyful-selection-chosen-address-id'
+
+const defaultAddresses = [
+  {
+    id: 'addr-1',
+    name: '张三',
+    tel: '13888888888',
+    province: '浙江省',
+    city: '杭州市',
+    county: '余杭区',
+    addressDetail: '文一西路 888 号未来科技城海创园5幢1203室',
+    areaCode: '330110',
+    postalCode: '310000',
+    isDefault: true
+  }
+]
+
+export const readAddresses = () => {
+  try {
+    const addresses = JSON.parse(localStorage.getItem(ADDRESS_KEY) || '[]')
+    return addresses.length ? addresses : defaultAddresses
+  } catch (error) {
+    return defaultAddresses
+  }
+}
+
+export const saveAddresses = addresses => {
+  localStorage.setItem(ADDRESS_KEY, JSON.stringify(addresses))
+}
+
+export const readChosenAddressId = () => {
+  return localStorage.getItem(CHOSEN_ADDRESS_KEY) || readAddresses().find(item => item.isDefault)?.id || readAddresses()[0]?.id || ''
+}
+
+export const saveChosenAddressId = id => {
+  localStorage.setItem(CHOSEN_ADDRESS_KEY, id)
+}
+
+export const formatAddress = address => {
+  if (!address) {
+    return ''
+  }
+
+  return `${address.province}${address.city}${address.county}${address.addressDetail}`
+}
+
+export const createAddressId = () => `addr-${Date.now()}`
diff --git a/supplied-h5/src/view/joyful-selection/address/edit/index.vue b/supplied-h5/src/view/joyful-selection/address/edit/index.vue
new file mode 100644
index 0000000..9171c57
--- /dev/null
+++ b/supplied-h5/src/view/joyful-selection/address/edit/index.vue
@@ -0,0 +1,132 @@
+<template>
+  <main class="address-edit-page">
+    <van-nav-bar :title="pageTitle" left-arrow @click-left="$router.back()" />
+    <van-address-edit
+      :area-list="areaList"
+      :address-info="addressInfo"
+      show-postal
+      show-delete
+      show-set-default
+      show-search-result
+      :search-result="searchResult"
+      :area-columns-placeholder="['请选择', '请选择', '请选择']"
+      @save="onSave"
+      @delete="onDelete"
+      @change-detail="onChangeDetail"
+    />
+  </main>
+</template>
+
+<script>
+import { Toast } from 'vant'
+import { areaList } from '@vant/area-data'
+import { createAddressId, readAddresses, saveAddresses, saveChosenAddressId } from '../address-data'
+
+export default {
+  name: 'JoyfulSelectionAddressEdit',
+  data: () => ({
+    areaList,
+    searchResult: [],
+    addressInfo: {}
+  }),
+  computed: {
+    editId() {
+      return this.$route.query.id
+    },
+    pageTitle() {
+      return this.editId ? '编辑地址' : '新增地址'
+    }
+  },
+  created() {
+    const address = readAddresses().find(item => item.id === this.editId)
+
+    if (address) {
+      this.addressInfo = { ...address }
+    }
+  },
+  methods: {
+    onSave(content) {
+      const addresses = readAddresses()
+      const nextAddress = {
+        ...content,
+        id: this.editId || content.id || createAddressId()
+      }
+      const nextAddresses = addresses.filter(item => item.id !== nextAddress.id)
+
+      if (nextAddress.isDefault) {
+        nextAddresses.forEach(item => { item.isDefault = false })
+      }
+
+      if (!nextAddresses.length && !nextAddress.isDefault) {
+        nextAddress.isDefault = true
+      }
+
+      saveAddresses([nextAddress, ...nextAddresses])
+      saveChosenAddressId(nextAddress.id)
+      Toast('保存成功')
+      this.$router.back()
+    },
+    onDelete() {
+      if (!this.editId) {
+        this.$router.back()
+        return
+      }
+
+      const addresses = readAddresses().filter(item => item.id !== this.editId)
+
+      if (addresses.length && !addresses.some(item => item.isDefault)) {
+        addresses[0].isDefault = true
+      }
+
+      saveAddresses(addresses)
+      saveChosenAddressId(addresses[0]?.id || '')
+      Toast('删除成功')
+      this.$router.back()
+    },
+    onChangeDetail(value) {
+      this.searchResult = value
+        ? [
+          {
+            name: '未来科技城',
+            address: '浙江省杭州市余杭区文一西路'
+          },
+          {
+            name: '海创园',
+            address: '浙江省杭州市余杭区文一西路998号'
+          }
+        ]
+        : []
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.address-edit-page {
+  min-height: 100vh;
+  padding-top: 46px;
+  background: #f7f7f7;
+}
+
+.address-edit-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);
+}
+
+.address-edit-page ::v-deep .van-address-edit {
+  padding: 12px;
+}
+
+.address-edit-page ::v-deep .van-button--danger {
+  background: #ff5b20;
+  border-color: #ff5b20;
+}
+
+.address-edit-page ::v-deep .van-switch--on {
+  background: #ff5b20;
+}
+</style>
diff --git a/supplied-h5/src/view/joyful-selection/address/index.vue b/supplied-h5/src/view/joyful-selection/address/index.vue
new file mode 100644
index 0000000..71e9abe
--- /dev/null
+++ b/supplied-h5/src/view/joyful-selection/address/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <main class="address-page">
+    <van-nav-bar title="地址管理" left-arrow @click-left="$router.back()" />
+    <van-address-list
+      v-model="chosenAddressId"
+      :list="addressList"
+      :disabled-list="disabledList"
+      disabled-text="以下地址超出配送范围"
+      default-tag-text="默认"
+      @add="onAdd"
+      @edit="onEdit"
+      @select="onSelect"
+    />
+  </main>
+</template>
+
+<script>
+import { formatAddress, readAddresses, readChosenAddressId, saveChosenAddressId } from './address-data'
+
+export default {
+  name: 'JoyfulSelectionAddressList',
+  data: () => ({
+    chosenAddressId: '',
+    addresses: [],
+    disabledList: []
+  }),
+  computed: {
+    addressList() {
+      return this.addresses.map(item => ({
+        id: item.id,
+        name: item.name,
+        tel: item.tel,
+        address: formatAddress(item),
+        isDefault: item.isDefault
+      }))
+    }
+  },
+  created() {
+    this.addresses = readAddresses()
+    this.chosenAddressId = readChosenAddressId()
+  },
+  methods: {
+    onSelect(item) {
+      this.chosenAddressId = item.id
+      saveChosenAddressId(item.id)
+
+      if (this.$route.query.from === 'checkout') {
+        this.$router.back()
+      }
+    },
+    onAdd() {
+      this.$router.push('/joyful-selection/address/edit')
+    },
+    onEdit(item) {
+      this.$router.push({ path: '/joyful-selection/address/edit', query: { id: item.id } })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.address-page {
+  min-height: 100vh;
+  padding-top: 46px;
+  background: #f7f7f7;
+}
+
+.address-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);
+}
+
+.address-page ::v-deep .van-address-list {
+  padding: 12px 12px 86px;
+}
+
+.address-page ::v-deep .van-address-item {
+  border-radius: 8px;
+}
+
+.address-page ::v-deep .van-address-item .van-radio__icon--checked .van-icon,
+.address-page ::v-deep .van-address-list__add {
+  border-color: #ff5b20;
+  background: #ff5b20;
+}
+
+.address-page ::v-deep .van-tag--danger {
+  background: #ff5b20;
+}
+</style>
diff --git a/supplied-h5/src/view/joyful-selection/cart/checkout/index.vue b/supplied-h5/src/view/joyful-selection/cart/checkout/index.vue
index 32b44e3..6c63a15 100644
--- a/supplied-h5/src/view/joyful-selection/cart/checkout/index.vue
+++ b/supplied-h5/src/view/joyful-selection/cart/checkout/index.vue
@@ -1,50 +1,393 @@
 <template>
   <main class="checkout-page">
     <van-nav-bar title="确认订单" left-arrow @click-left="$router.back()" />
-    <van-cell-group inset>
-      <van-cell title="收货人：张三　138****8888" label="浙江省杭州市余杭区文一西路 888 号 1203 室" is-link />
-    </van-cell-group>
-    <van-cell-group inset title="配送方式">
-      <van-cell title="预计送达：5月20日（周二）" value="快速配送 免邮" />
-    </van-cell-group>
-    <van-cell-group inset>
-      <van-card
-        v-for="item in goods"
-        :key="item.id"
-        :title="item.name"
-        :desc="item.desc"
-        :price="item.price"
-        :thumb="item.image"
-        num="1"
-      />
-    </van-cell-group>
-    <van-field v-model="remark" label="订单备注" placeholder="选填，给商家留言" />
-    <section class="amount">
-      <p>商品金额 <b>¥297.90</b></p>
-      <p>运费 <b>¥0.00</b></p>
-      <p>优惠券 <b>暂无优惠券</b></p>
+
+    <section class="address-card" @click="$router.push({ path: '/joyful-selection/address', query: { from: 'checkout' } })">
+      <van-icon class="address-icon" name="location" />
+      <div class="address-info">
+        <h3>收货人：{{ chosenAddress.name }} <span>{{ maskTel(chosenAddress.tel) }}</span></h3>
+        <p>{{ chosenAddress.province }}{{ chosenAddress.city }}{{ chosenAddress.county }}</p>
+        <p>{{ chosenAddress.addressDetail }}</p>
+      </div>
+      <van-icon class="arrow-icon" name="arrow" />
     </section>
-    <van-submit-bar :price="29790" button-text="提交订单" @submit="$router.push('/joyful-selection/payment')" />
+
+    <section class="delivery-card">
+      <div class="delivery-row">
+        <span>配送方式</span>
+        <b>快速配送&nbsp;&nbsp;免邮</b>
+      </div>
+      <div class="delivery-row delivery-date">
+        <span>预计送达：</span>
+        <em>5月20日（周二）</em>
+      </div>
+    </section>
+
+    <section class="goods-card">
+      <article v-for="item in visibleGoods" :key="item.cartId || item.id" class="order-item">
+        <van-image class="order-thumb" :src="item.image" fit="cover" />
+        <div class="order-info">
+          <h3>{{ item.name }}</h3>
+          <p>¥{{ item.price }}</p>
+        </div>
+        <span class="order-count">x{{ item.count || 1 }}</span>
+      </article>
+      <button v-if="showLoadMore" type="button" class="load-more" @click="showAllGoods = true">
+        加载更多
+        <van-icon name="arrow-down" />
+      </button>
+    </section>
+
+    <section class="remark-card">
+      <span>订单备注</span>
+      <input v-model="remark" type="text" placeholder="选填，给商家留言" />
+    </section>
+
+    <section class="amount-card">
+      <p><span>商品金额</span><b>¥{{ formatYuan(goodsAmount) }}</b></p>
+      <p><span>运费</span><b>¥0.00</b></p>
+      <p><span>优惠券</span><b class="muted">选择优惠券</b></p>
+    </section>
+
+    <van-submit-bar :price="goodsAmount" button-text="提交订单" @submit="onSubmit" />
   </main>
 </template>
 
 <script>
-import { joyfulProducts } from '../../product-data'
+import { mapActions, mapState } from 'pinia'
+import { useCartStore } from '@/store/cart'
+import { readAddresses, readChosenAddressId } from '../../address/address-data'
+import { createOrderNo, savePaymentInfo } from '../payment/payment-data'
+
+const CHECKOUT_ITEMS_KEY = 'joyful-selection-checkout-items'
 
 export default {
   name: 'JoyfulSelectionCheckout',
   data: () => ({
     remark: '',
-    goods: joyfulProducts.slice(0, 3)
-  })
+    goods: [],
+    showAllGoods: false,
+    chosenAddress: {}
+  }),
+  computed: {
+    ...mapState(useCartStore, ['items']),
+    visibleGoods() {
+      return this.showAllGoods ? this.goods : this.goods.slice(0, 3)
+    },
+    showLoadMore() {
+      return !this.showAllGoods && this.goods.length > 3
+    },
+    goodsAmount() {
+      return this.goods.reduce((total, item) => total + Math.round(Number(item.price) * 100) * Number(item.count || 1), 0)
+    }
+  },
+  created() {
+    this.loadCart()
+    this.goods = this.getCheckoutGoods()
+    this.loadAddress()
+  },
+  activated() {
+    this.loadAddress()
+  },
+  methods: {
+    ...mapActions(useCartStore, ['loadCart']),
+    getCheckoutGoods() {
+      const storedItems = this.readCheckoutItems()
+
+      if (storedItems.length) {
+        return storedItems
+      }
+
+      if (this.$route.query.source === 'cart') {
+        return this.items
+      }
+
+      return []
+    },
+    readCheckoutItems() {
+      try {
+        return JSON.parse(sessionStorage.getItem(CHECKOUT_ITEMS_KEY) || '[]')
+      } catch (error) {
+        return []
+      }
+    },
+    formatYuan(price) {
+      return (Number(price || 0) / 100).toFixed(2)
+    },
+    loadAddress() {
+      const addresses = readAddresses()
+      const chosenId = readChosenAddressId()
+      this.chosenAddress = addresses.find(item => item.id === chosenId) || addresses[0] || {}
+    },
+    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')
+    }
+  }
 }
 </script>
 
-<style scoped>
-.checkout-page { min-height: 100vh; padding-bottom: 60px; background: #f7f7f7; }
-.van-cell-group { margin: 10px 12px; }
-.amount { margin: 10px 12px; padding: 10px 16px; border-radius: 10px; background: #fff; font-size: 13px; }
-.amount p { display: flex; justify-content: space-between; }
-.amount b { font-weight: normal; }
-.van-submit-bar { bottom: 0; }
+<style scoped lang="less">
+.checkout-page {
+  min-height: 100vh;
+  padding: 46px 0 62px;
+  background: #f7f7f7;
+}
+
+.checkout-page ::v-deep .van-nav-bar {
+  position: fixed;
+  z-index: 20;
+  top: 0;
+  right: 0;
+  left: 0;
+  background: #fff;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
+}
+
+.address-card,
+.delivery-card,
+.goods-card,
+.remark-card,
+.amount-card {
+  margin: 10px 12px 0;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.address-card {
+  display: flex;
+  align-items: center;
+  padding: 14px 12px;
+}
+
+.address-icon {
+  flex: none;
+  margin-right: 10px;
+  color: #ff5b20;
+  font-size: 20px;
+}
+
+.address-info {
+  min-width: 0;
+  flex: 1;
+}
+
+.address-info h3 {
+  margin: 0 0 5px;
+  color: #222;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.address-info h3 span {
+  margin-left: 12px;
+  font-weight: 700;
+}
+
+.address-info p {
+  overflow: hidden;
+  margin: 2px 0 0;
+  color: #555;
+  font-size: 12px;
+  line-height: 17px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.arrow-icon {
+  flex: none;
+  color: #999;
+  font-size: 16px;
+}
+
+.delivery-card {
+  padding: 13px 14px;
+}
+
+.delivery-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #333;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.delivery-row b {
+  color: #333;
+  font-weight: 700;
+}
+
+.delivery-date {
+  justify-content: flex-start;
+  color: #999;
+}
+
+.delivery-date em {
+  margin-left: 8px;
+  color: #999;
+  font-style: normal;
+}
+
+.goods-card {
+  padding: 2px 14px;
+}
+
+.order-item {
+  display: flex;
+  align-items: center;
+  min-height: 86px;
+  padding: 12px 0;
+}
+
+.order-item + .order-item {
+  border-top: 1px solid #f4f4f4;
+}
+
+.load-more {
+  display: flex;
+  width: 100%;
+  height: 44px;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  border: 0;
+  border-top: 1px solid #f4f4f4;
+  color: #ff5b20;
+  font-size: 13px;
+  background: #fff;
+}
+
+.load-more .van-icon {
+  font-size: 14px;
+}
+
+.order-thumb {
+  width: 64px;
+  height: 64px;
+  flex: none;
+  overflow: hidden;
+  border-radius: 4px;
+  background: #f7f7f7;
+}
+
+.order-info {
+  min-width: 0;
+  flex: 1;
+  padding: 0 10px;
+}
+
+.order-info h3 {
+  display: -webkit-box;
+  overflow: hidden;
+  margin: 0 0 8px;
+  color: #222;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.order-info p {
+  margin: 0;
+  color: #333;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.order-count {
+  flex: none;
+  color: #222;
+  font-size: 12px;
+}
+
+.remark-card {
+  display: flex;
+  align-items: center;
+  height: 46px;
+  padding: 0 14px;
+}
+
+.remark-card span {
+  flex: none;
+  color: #333;
+  font-size: 13px;
+}
+
+.remark-card input {
+  min-width: 0;
+  flex: 1;
+  margin-left: 16px;
+  border: 0;
+  outline: none;
+  color: #333;
+  font-size: 13px;
+  text-align: right;
+  background: transparent;
+}
+
+.remark-card input::placeholder {
+  color: #999;
+}
+
+.amount-card {
+  padding: 12px 14px;
+}
+
+.amount-card p {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+  color: #777;
+  font-size: 13px;
+  line-height: 28px;
+}
+
+.amount-card b {
+  color: #333;
+  font-weight: 700;
+}
+
+.amount-card .muted {
+  color: #777;
+  font-weight: 400;
+}
+
+.checkout-page ::v-deep .van-submit-bar {
+  bottom: 0;
+  height: 58px;
+  border-top: 1px solid #eee;
+}
+
+.checkout-page ::v-deep .van-submit-bar__bar {
+  height: 58px;
+  padding: 0 16px;
+}
+
+.checkout-page ::v-deep .van-submit-bar__price {
+  color: #ff5b20;
+  font-size: 17px;
+  font-weight: 700;
+}
+
+.checkout-page ::v-deep .van-submit-bar__button {
+  width: 112px;
+  height: 40px;
+  border-radius: 22px;
+  background: #ff5b20;
+  border-color: #ff5b20;
+  font-weight: 700;
+}
 </style>
diff --git a/supplied-h5/src/view/joyful-selection/cart/components/JoyfulCartPanel.vue b/supplied-h5/src/view/joyful-selection/cart/components/JoyfulCartPanel.vue
new file mode 100644
index 0000000..6f1275f
--- /dev/null
+++ b/supplied-h5/src/view/joyful-selection/cart/components/JoyfulCartPanel.vue
@@ -0,0 +1,324 @@
+<template>
+  <section class="cart-panel" :class="{ 'cart-panel--page': pageMode }">
+    <van-notice-bar v-if="showNotice" text="满 199 元包邮，快去凑单吧～" left-icon="info-o" />
+    <section class="cart-list">
+      <van-empty v-if="!items.length" description="购物车还是空的" />
+      <template v-else>
+        <article
+          v-for="item in items"
+          :key="item.cartId"
+          class="cart-item"
+        >
+          <van-checkbox
+            :value="isItemChecked(item)"
+            class="item-check"
+            checked-color="#ff5b20"
+            @input="toggleItem(item, $event)"
+          />
+          <van-image class="item-thumb" :src="item.image" fit="cover" />
+          <div class="item-info">
+            <h3>{{ item.name }}</h3>
+            <p class="item-desc">{{ item.desc }}</p>
+            <van-tag class="item-tag" plain type="danger">{{ item.tag }}</van-tag>
+            <div class="item-bottom">
+              <b>¥{{ item.price }}</b>
+              <van-stepper
+                v-model="item.count"
+                class="quantity-stepper"
+                integer
+                min="0"
+                button-size="30"
+                input-width="36"
+                @change="onCountChange(item, $event)"
+              />
+            </div>
+          </div>
+        </article>
+      </template>
+    </section>
+    <van-submit-bar
+      :fixed="fixedSubmit"
+      :price="selectedTotalPrice"
+      :button-text="submitText"
+      @submit="$emit('checkout', selectedItems)"
+    >
+      <van-checkbox
+        :value="isAllChecked"
+        :indeterminate="isPartChecked"
+        checked-color="#ff5b20"
+        @input="toggleAll"
+      >全选</van-checkbox>
+    </van-submit-bar>
+  </section>
+</template>
+
+<script>
+import { mapActions, mapState } from 'pinia'
+import { useCartStore } from '@/store/cart'
+
+export default {
+  name: 'JoyfulCartPanel',
+  props: {
+    fixedSubmit: {
+      type: Boolean,
+      default: false
+    },
+    pageMode: {
+      type: Boolean,
+      default: false
+    },
+    showNotice: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data: () => ({
+    selectedIds: []
+  }),
+  computed: {
+    ...mapState(useCartStore, ['items']),
+    cartIds() {
+      return this.items.map(item => item.cartId)
+    },
+    selectedItems() {
+      return this.items.filter(item => this.selectedIds.includes(item.cartId))
+    },
+    selectedTotalCount() {
+      return this.selectedItems.reduce((total, item) => total + Number(item.count || 0), 0)
+    },
+    selectedTotalPrice() {
+      return this.selectedItems.reduce((total, item) => total + Math.round(Number(item.price) * 100) * Number(item.count || 0), 0)
+    },
+    isAllChecked() {
+      return this.items.length > 0 && this.selectedIds.length === this.items.length
+    },
+    isPartChecked() {
+      return this.selectedIds.length > 0 && this.selectedIds.length < this.items.length
+    },
+    submitText() {
+      return `去结算（${this.selectedTotalCount}）`
+    }
+  },
+  watch: {
+    cartIds(newIds, oldIds) {
+      const wasAllChecked = oldIds.length > 0 && oldIds.every(cartId => this.selectedIds.includes(cartId))
+      const validSelectedIds = this.selectedIds.filter(cartId => newIds.includes(cartId))
+
+      this.selectedIds = wasAllChecked ? newIds : validSelectedIds
+    }
+  },
+  created() {
+    this.loadCart()
+    this.selectAllItems()
+  },
+  methods: {
+    ...mapActions(useCartStore, ['loadCart', 'persistCart', 'removeItems']),
+    selectAllItems() {
+      this.selectedIds = this.items.map(item => item.cartId)
+    },
+    isItemChecked(item) {
+      return this.selectedIds.includes(item.cartId)
+    },
+    toggleItem(item, checked) {
+      if (checked && !this.isItemChecked(item)) {
+        this.selectedIds = [...this.selectedIds, item.cartId]
+        return
+      }
+
+      if (!checked) {
+        this.selectedIds = this.selectedIds.filter(cartId => cartId !== item.cartId)
+      }
+    },
+    toggleAll(checked) {
+      this.selectedIds = checked ? this.items.map(item => item.cartId) : []
+    },
+    onCountChange(item, count) {
+      if (Number(count) < 1) {
+        this.removeItems([item.cartId])
+        return
+      }
+
+      this.persistCart()
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.cart-panel {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  background: #fff;
+}
+
+.cart-panel--page {
+  min-height: calc(100vh - 46px);
+  padding-bottom: 108px;
+}
+
+.cart-panel ::v-deep .van-notice-bar {
+  height: 34px;
+  flex: none;
+  color: #ff7a38;
+  background: #fff3ea;
+  font-size: 13px;
+}
+
+.cart-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 16px 12px;
+  background: #fff;
+}
+
+.cart-item {
+  display: flex;
+  min-height: 128px;
+  align-items: center;
+  padding: 16px 0;
+  background: #fff;
+}
+
+.cart-item + .cart-item {
+  border-top: 1px solid #f5f5f5;
+}
+
+.item-check {
+  flex: none;
+  margin-right: 12px;
+}
+
+.cart-panel ::v-deep .van-checkbox__icon--checked .van-icon {
+  border-color: #ff5b20;
+  background-color: #ff5b20;
+}
+
+.item-thumb {
+  width: 94px;
+  height: 94px;
+  flex: none;
+  overflow: hidden;
+  border-radius: 5px;
+  background: #f7f7f7;
+}
+
+.item-info {
+  display: flex;
+  min-width: 0;
+  min-height: 94px;
+  flex: 1;
+  flex-direction: column;
+  padding-left: 12px;
+}
+
+.item-info h3 {
+  display: -webkit-box;
+  overflow: hidden;
+  margin: 0 0 4px;
+  color: #222;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.item-desc {
+  overflow: hidden;
+  margin: 0 0 6px;
+  color: #999;
+  font-size: 12px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.item-tag {
+  width: fit-content;
+  color: #ff5b20;
+  border-color: #ff9b73;
+  font-size: 11px;
+  line-height: 14px;
+}
+
+.item-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+}
+
+.item-bottom b {
+  color: #ff5b20;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.quantity-stepper {
+  flex: none;
+}
+
+.cart-panel ::v-deep .quantity-stepper .van-stepper__minus,
+.cart-panel ::v-deep .quantity-stepper .van-stepper__plus,
+.cart-panel ::v-deep .quantity-stepper .van-stepper__input {
+  height: 30px;
+  margin: 0;
+  border: 1px solid #edf0f4;
+  background: #fff;
+  color: #222;
+}
+
+.cart-panel ::v-deep .quantity-stepper .van-stepper__minus {
+  width: 32px;
+  border-radius: 6px 0 0 6px;
+  color: #9aa0a6;
+}
+
+.cart-panel ::v-deep .quantity-stepper .van-stepper__input {
+  border-right: 0;
+  border-left: 0;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.cart-panel ::v-deep .quantity-stepper .van-stepper__plus {
+  width: 32px;
+  border-radius: 0 6px 6px 0;
+}
+
+.cart-panel ::v-deep .van-submit-bar {
+  position: relative;
+  height: 58px;
+  flex: none;
+  border-top: 1px solid #f0f0f0;
+  background: #fff;
+}
+
+.cart-panel--page ::v-deep .van-submit-bar {
+  position: fixed;
+  bottom: 50px;
+}
+
+.cart-panel ::v-deep .van-submit-bar__bar {
+  height: 58px;
+  padding: 0 18px;
+}
+
+.cart-panel ::v-deep .van-submit-bar__price {
+  color: #ff5b20;
+  font-size: 17px;
+  font-weight: 700;
+}
+
+.cart-panel ::v-deep .van-submit-bar__button {
+  width: 104px;
+  height: 40px;
+  border-radius: 22px;
+  background: #ff5b20;
+  border-color: #ff5b20;
+  font-weight: 700;
+}
+</style>
diff --git a/supplied-h5/src/view/joyful-selection/cart/edit/index.vue b/supplied-h5/src/view/joyful-selection/cart/edit/index.vue
index 1aad777..cc860b3 100644
--- a/supplied-h5/src/view/joyful-selection/cart/edit/index.vue
+++ b/supplied-h5/src/view/joyful-selection/cart/edit/index.vue
@@ -1,42 +1,227 @@
 <template>
   <main class="edit-page">
     <van-nav-bar title="购物车" right-text="完成" @click-right="$router.push('/joyful-selection/cart')" />
-    <section>
-      <van-card
-        v-for="item in goods"
-        :key="item.id"
-        :title="item.name"
-        :desc="item.desc"
-        :price="item.price"
-        :thumb="item.image"
-      >
-        <template #footer><van-stepper v-model="item.count" theme="round" button-size="22" /></template>
-      </van-card>
+    <section class="edit-list">
+      <van-empty v-if="!items.length" description="购物车还是空的" />
+      <article v-for="item in items" :key="item.cartId" class="edit-item">
+        <van-checkbox
+          :value="isItemChecked(item)"
+          class="item-check"
+          checked-color="#ff5b20"
+          @input="toggleItem(item, $event)"
+        />
+        <van-image class="item-thumb" :src="item.image" fit="cover" />
+        <div class="item-info">
+          <h3>{{ item.name }}</h3>
+          <p>{{ item.desc }}</p>
+          <van-tag class="item-tag" plain type="danger">{{ item.tag }}</van-tag>
+          <div class="item-bottom">
+            <b>¥{{ item.price }}</b>
+            <span>x{{ item.count }}</span>
+          </div>
+        </div>
+      </article>
     </section>
-    <van-submit-bar button-text="删除" @submit="remove">
-      <van-checkbox v-model="checked">全选</van-checkbox>
+    <van-submit-bar class="edit-submit" button-text="删除" @submit="remove">
+      <van-checkbox
+        :value="isAllChecked"
+        :indeterminate="isPartChecked"
+        checked-color="#ff5b20"
+        @input="toggleAll"
+      >全选</van-checkbox>
     </van-submit-bar>
   </main>
 </template>
 
 <script>
 import { Toast } from 'vant'
-import { joyfulProducts } from '../../product-data'
+import { mapActions, mapState } from 'pinia'
+import { useCartStore } from '@/store/cart'
 
 export default {
   name: 'JoyfulSelectionCartEdit',
   data: () => ({
-    checked: false,
-    goods: joyfulProducts.map(item => ({ ...item, count: 1 }))
+    selectedIds: []
   }),
+  computed: {
+    ...mapState(useCartStore, ['items']),
+    isAllChecked() {
+      return this.items.length > 0 && this.selectedIds.length === this.items.length
+    },
+    isPartChecked() {
+      return this.selectedIds.length > 0 && this.selectedIds.length < this.items.length
+    }
+  },
+  created() {
+    this.loadCart()
+    this.selectedIds = this.items.map(item => item.cartId)
+  },
   methods: {
-    remove() { Toast('请选择要删除的商品') }
+    ...mapActions(useCartStore, ['loadCart', 'removeItems']),
+    isItemChecked(item) {
+      return this.selectedIds.includes(item.cartId)
+    },
+    toggleItem(item, checked) {
+      if (checked && !this.isItemChecked(item)) {
+        this.selectedIds = [...this.selectedIds, item.cartId]
+        return
+      }
+
+      if (!checked) {
+        this.selectedIds = this.selectedIds.filter(cartId => cartId !== item.cartId)
+      }
+    },
+    toggleAll(checked) {
+      this.selectedIds = checked ? this.items.map(item => item.cartId) : []
+    },
+    remove() {
+      if (!this.selectedIds.length) {
+        Toast('请选择要删除的商品')
+        return
+      }
+
+      this.removeItems(this.selectedIds)
+      this.selectedIds = []
+      Toast('已删除')
+    }
   }
 }
 </script>
 
-<style scoped>
-.edit-page { min-height: 100vh; padding-bottom: 60px; background: #f7f7f7; }
-.edit-page section { padding: 0 12px; }
-.edit-page .van-card { margin-top: 10px; border-radius: 10px; background: #fff; }
+<style scoped lang="less">
+.edit-page {
+  min-height: 100vh;
+  padding: 46px 0 58px;
+  background: #fff;
+}
+
+.edit-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);
+}
+
+.edit-list {
+  padding: 0 16px 14px;
+  background: #fff;
+}
+
+.edit-item {
+  display: flex;
+  min-height: 128px;
+  align-items: center;
+  padding: 16px 0;
+  background: #fff;
+}
+
+.edit-item + .edit-item {
+  border-top: 1px solid #f5f5f5;
+}
+
+.item-check {
+  flex: none;
+  margin-right: 12px;
+}
+
+.edit-page ::v-deep .van-checkbox__icon--checked .van-icon {
+  border-color: #ff5b20;
+  background-color: #ff5b20;
+}
+
+.item-thumb {
+  width: 94px;
+  height: 94px;
+  flex: none;
+  overflow: hidden;
+  border-radius: 5px;
+  background: #f7f7f7;
+}
+
+.item-info {
+  display: flex;
+  min-width: 0;
+  min-height: 94px;
+  flex: 1;
+  flex-direction: column;
+  padding-left: 12px;
+}
+
+.item-info h3 {
+  display: -webkit-box;
+  overflow: hidden;
+  margin: 0 0 4px;
+  color: #222;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.item-info p {
+  overflow: hidden;
+  margin: 0 0 6px;
+  color: #999;
+  font-size: 12px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.item-tag {
+  width: fit-content;
+  color: #ff5b20;
+  border-color: #ff9b73;
+  font-size: 11px;
+  line-height: 14px;
+}
+
+.item-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+}
+
+.item-bottom b {
+  color: #ff5b20;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.item-bottom span {
+  color: #777;
+  font-size: 13px;
+}
+
+.edit-page ::v-deep .van-submit-bar {
+  bottom: 0;
+  height: 58px;
+  border-top: 1px solid #f0f0f0;
+  background: #fff;
+}
+
+.edit-page ::v-deep .van-submit-bar__bar {
+  height: 58px;
+  justify-content: space-between;
+  padding: 0 18px;
+}
+
+.edit-page ::v-deep .van-submit-bar__text {
+  flex: 1;
+  text-align: left;
+}
+
+.edit-page ::v-deep .van-submit-bar__button {
+  width: 104px;
+  height: 40px;
+  border-radius: 22px;
+  background: #ff5b20;
+  border-color: #ff5b20;
+  font-weight: 700;
+}
 </style>
diff --git a/supplied-h5/src/view/joyful-selection/cart/index.vue b/supplied-h5/src/view/joyful-selection/cart/index.vue
index 3787e61..3ae4454 100644
--- a/supplied-h5/src/view/joyful-selection/cart/index.vue
+++ b/supplied-h5/src/view/joyful-selection/cart/index.vue
@@ -1,57 +1,40 @@
 <template>
   <main class="cart-page">
     <van-nav-bar title="购物车" right-text="编辑" @click-right="$router.push('/joyful-selection/cart/edit')" />
-    <van-notice-bar text="满 199 元包邮，快去凑单吧～" left-icon="info-o" />
-    <section class="cart-list">
-      <van-empty v-if="!items.length" description="购物车还是空的" />
-      <template v-else>
-        <van-card
-          v-for="item in items"
-          :key="item.cartId"
-          :title="item.name"
-          :desc="item.desc"
-          :price="item.price"
-          :thumb="item.image"
-        >
-          <template #tags><van-tag plain type="danger">{{ item.tag }}</van-tag></template>
-          <template #footer><van-stepper v-model="item.count" theme="round" button-size="22" @change="persistCart" /></template>
-        </van-card>
-      </template>
-    </section>
-    <van-submit-bar :price="totalPrice" :button-text="submitText" @submit="$router.push('/joyful-selection/checkout')">
-      <van-checkbox v-model="checked">全选</van-checkbox>
-    </van-submit-bar>
+    <joyful-cart-panel fixed-submit page-mode @checkout="goCheckout" />
   </main>
 </template>
 
 <script>
-import { mapActions, mapState } from 'pinia'
-import { useCartStore } from '@/store/cart'
+import JoyfulCartPanel from './components/JoyfulCartPanel.vue'
 
 export default {
   name: 'JoyfulSelectionCart',
-  data: () => ({
-    checked: true
-  }),
-  computed: {
-    ...mapState(useCartStore, ['items', 'totalCount', 'totalPrice']),
-    submitText() {
-      return `去结算（${this.totalCount}）`
-    }
-  },
-  created() {
-    this.loadCart()
+  components: {
+    JoyfulCartPanel
   },
   methods: {
-    ...mapActions(useCartStore, ['loadCart', 'persistCart'])
+    goCheckout(items) {
+      sessionStorage.setItem('joyful-selection-checkout-items', JSON.stringify(items))
+      this.$router.push({ path: '/joyful-selection/checkout', query: { source: 'cart' } })
+    }
   }
 }
 </script>
 
 <style scoped lang="less">
-.cart-page { min-height: 100vh; padding-bottom: 106px; background: #f7f7f7; }
-.cart-list { padding: 0 12px; }
-.cart-list .van-card { margin-top: 10px; border-radius: 10px; background: #fff; }
-.cart-list ::v-deep .van-card__price { color: #ff5b20; font-weight: bold; }
-.van-submit-bar { bottom: 50px; }
+.cart-page {
+  min-height: 100vh;
+  padding-top: 46px;
+  background: #fff;
+}
+
+.cart-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);
+}
 </style>
diff --git a/supplied-h5/src/view/joyful-selection/cart/payment-confirm/index.vue b/supplied-h5/src/view/joyful-selection/cart/payment-confirm/index.vue
index 766a75c..abecfca 100644
--- a/supplied-h5/src/view/joyful-selection/cart/payment-confirm/index.vue
+++ b/supplied-h5/src/view/joyful-selection/cart/payment-confirm/index.vue
@@ -1,3 +1,53 @@
-<template><main class="confirm-page"><van-nav-bar title="确认支付" left-arrow @click-left="$router.back()"/><section><p>支付金额</p><b>¥ 297.90</b></section><van-popup v-model="show" round position="bottom" :style="{height:'42%'}" :close-on-click-overlay="false"><article><h2>确认支付</h2><p>您即将使用微信支付</p><p>支付金额 <b>¥297.90</b></p><div><van-button round @click="$router.back()">取消</van-button><van-button round type="danger" @click="$router.push('/joyful-selection/payment-success')">确认支付</van-button></div></article></van-popup></main></template>
-<script>export default{name:'JoyfulSelectionPaymentConfirm',data:()=>({show:true})}</script>
-<style scoped>.confirm-page{min-height:100vh;background:#f7f7f7;text-align:center}.confirm-page section{margin:15px;padding:30px;border-radius:12px;background:#fff}.confirm-page section b{font-size:26px}.confirm-page article{padding:20px;text-align:center}.confirm-page article p{color:#666;font-size:13px}.confirm-page article div{display:flex;gap:10px;margin-top:40px}.confirm-page article .van-button{flex:1}</style>
+<template>
+  <main class="confirm-page">
+    <van-nav-bar title="确认支付" left-arrow @click-left="$router.back()" />
+    <section>
+      <p>支付金额</p>
+      <b>¥ {{ amountText }}</b>
+    </section>
+    <van-popup v-model="show" round position="bottom" :style="{ height: '42%' }" :close-on-click-overlay="false">
+      <article>
+        <h2>确认支付</h2>
+        <p>您即将使用{{ payTypeText }}</p>
+        <p>支付金额 <b>¥{{ amountText }}</b></p>
+        <div>
+          <van-button round @click="$router.back()">取消</van-button>
+          <van-button round type="danger" @click="$router.push({ path: '/joyful-selection/payment-success', query: { payType: $route.query.payType } })">确认支付</van-button>
+        </div>
+      </article>
+    </van-popup>
+  </main>
+</template>
+
+<script>
+import { readPaymentInfo, formatYuan } from '../payment/payment-data'
+
+export default {
+  name: 'JoyfulSelectionPaymentConfirm',
+  data: () => ({
+    show: true,
+    paymentInfo: {}
+  }),
+  computed: {
+    amountText() {
+      return formatYuan(this.paymentInfo.amount)
+    },
+    payTypeText() {
+      const map = {
+        points: '积分支付',
+        wechat: '微信支付',
+        alipay: '支付宝支付'
+      }
+
+      return map[this.$route.query.payType] || '积分支付'
+    }
+  },
+  created() {
+    this.paymentInfo = readPaymentInfo()
+  }
+}
+</script>
+
+<style scoped>
+.confirm-page{min-height:100vh;padding-top:46px;background:#f7f7f7;text-align:center}.confirm-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)}.confirm-page section{margin:15px;padding:30px;border-radius:12px;background:#fff}.confirm-page section b{font-size:26px}.confirm-page article{padding:20px;text-align:center}.confirm-page article p{color:#666;font-size:13px}.confirm-page article div{display:flex;gap:10px;margin-top:40px}.confirm-page article .van-button{flex:1}.confirm-page ::v-deep .van-button--danger{background:#ff5b20;border-color:#ff5b20}
+</style>
diff --git a/supplied-h5/src/view/joyful-selection/cart/payment-success/index.vue b/supplied-h5/src/view/joyful-selection/cart/payment-success/index.vue
index 8567e5b..43673d2 100644
--- a/supplied-h5/src/view/joyful-selection/cart/payment-success/index.vue
+++ b/supplied-h5/src/view/joyful-selection/cart/payment-success/index.vue
@@ -1,4 +1,57 @@
-<template><main class="success-page"><van-icon name="checked" color="#20bd58" size="68"/><h2>支付成功</h2><b>¥ 297.90</b><section><p>订单编号 <span>YX2024051812345678</span></p><p>支付方式 <span>微信支付</span></p><p>支付时间 <span>2024-05-18 14:35:28</span></p></section><div><van-button round @click="$router.push('/joyful-selection/orders')">查看订单</van-button><van-button round type="danger" @click="$router.push('/joyful-selection/home')">继续购物</van-button></div></main></template>
-<script>export default{name:'JoyfulSelectionPaymentSuccess'}</script>
-<style scoped>.success-page{min-height:100vh;padding:80px 30px;text-align:center;background:#fff}.success-page h2{margin:15px 0 10px;font-size:17px}.success-page>b{font-size:22px}.success-page section{margin-top:42px;text-align:left;color:#888;font-size:12px}.success-page section p{display:flex;justify-content:space-between}.success-page section span{color:#333}.success-page>div{display:flex;gap:10px;margin-top:35px}.success-page .van-button{flex:1}</style>
+<template>
+  <main class="success-page">
+    <van-icon name="checked" color="#20bd58" size="68" />
+    <h2>支付成功</h2>
+    <b>¥ {{ amountText }}</b>
+    <section>
+      <p>订单编号 <span>{{ paymentInfo.orderNo || '-' }}</span></p>
+      <p>支付方式 <span>{{ payTypeText }}</span></p>
+      <p>支付时间 <span>{{ paidAt }}</span></p>
+    </section>
+    <div>
+      <van-button round @click="$router.push('/joyful-selection/orders')">查看订单</van-button>
+      <van-button round type="danger" @click="$router.push('/joyful-selection/home')">继续购物</van-button>
+    </div>
+  </main>
+</template>
 
+<script>
+import { readPaymentInfo, formatYuan } from '../payment/payment-data'
+
+export default {
+  name: 'JoyfulSelectionPaymentSuccess',
+  data: () => ({
+    paymentInfo: {},
+    paidAt: ''
+  }),
+  computed: {
+    amountText() {
+      return formatYuan(this.paymentInfo.amount)
+    },
+    payTypeText() {
+      const map = {
+        points: '积分支付',
+        wechat: '微信支付',
+        alipay: '支付宝支付'
+      }
+
+      return map[this.$route.query.payType] || '积分支付'
+    }
+  },
+  created() {
+    this.paymentInfo = readPaymentInfo()
+    this.paidAt = this.formatTime(new Date())
+  },
+  methods: {
+    formatTime(date) {
+      const pad = value => String(value).padStart(2, '0')
+
+      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+    }
+  }
+}
+</script>
+
+<style scoped>
+.success-page{min-height:100vh;padding:80px 30px;text-align:center;background:#fff}.success-page h2{margin:15px 0 10px;font-size:17px}.success-page>b{font-size:22px}.success-page section{margin-top:42px;text-align:left;color:#888;font-size:12px}.success-page section p{display:flex;justify-content:space-between}.success-page section span{color:#333}.success-page>div{display:flex;gap:10px;margin-top:35px}.success-page .van-button{flex:1}.success-page .van-button--danger{background:#ff5b20;border-color:#ff5b20}
+</style>
diff --git a/supplied-h5/src/view/joyful-selection/cart/payment/index.vue b/supplied-h5/src/view/joyful-selection/cart/payment/index.vue
index 709950a..ece2de0 100644
--- a/supplied-h5/src/view/joyful-selection/cart/payment/index.vue
+++ b/supplied-h5/src/view/joyful-selection/cart/payment/index.vue
@@ -1,3 +1,220 @@
-<template><main class="payment-page"><van-nav-bar title="确认支付" left-arrow @click-left="$router.back()"/><section class="pay-total"><p>支付金额</p><b>¥ 297.90</b></section><van-cell-group inset title="订单信息"><van-cell title="订单编号" value="YX2024051812345678"/><van-cell title="收货人" value="张三　138****8888"/></van-cell-group><van-radio-group v-model="payType"><van-cell-group inset title="支付方式"><van-cell title="微信支付" icon="wechat-pay" clickable @click="payType='wechat'"><template #right-icon><van-radio name="wechat"/></template></van-cell><van-cell title="支付宝支付" icon="alipay" clickable @click="payType='alipay'"><template #right-icon><van-radio name="alipay"/></template></van-cell><van-cell title="银联支付" icon="credit-pay" clickable @click="payType='union'"><template #right-icon><van-radio name="union"/></template></van-cell><van-cell title="余额支付（余额：¥32.00）" icon="gold-coin-o" clickable @click="payType='balance'"><template #right-icon><van-radio name="balance"/></template></van-cell></van-cell-group></van-radio-group><van-button class="pay-button" round type="danger" block @click="$router.push('/joyful-selection/payment-confirm')">立即支付 ¥297.90</van-button></main></template>
-<script>export default{name:'JoyfulSelectionPayment',data:()=>({payType:'wechat'})}</script>
-<style scoped>.payment-page{min-height:100vh;background:#f7f7f7}.pay-total{padding:25px;text-align:center;background:#fff}.pay-total p{margin:0;color:#666;font-size:13px}.pay-total b{display:block;margin-top:10px;font-size:26px}.van-cell-group{margin:10px 12px}.pay-button{position:fixed;right:16px;bottom:20px;left:16px;width:calc(100% - 32px)}</style>
+<template>
+  <main class="payment-page">
+    <van-nav-bar title="确认支付" left-arrow @click-left="$router.back()" />
+
+    <section class="amount-card">
+      <p>支付金额</p>
+      <b>¥ {{ amountText }}</b>
+    </section>
+
+    <section class="info-card">
+      <h3>订单信息</h3>
+      <p><span>订单编号</span><b>{{ paymentInfo.orderNo || '-' }}</b></p>
+      <p><span>收货人</span><b>{{ receiverText }}</b></p>
+    </section>
+
+    <section class="pay-card">
+      <h3>支付方式</h3>
+      <van-radio-group v-model="payType">
+        <van-cell
+          v-for="item in payMethods"
+          :key="item.name"
+          clickable
+          @click="payType = item.name"
+        >
+          <template #title>
+            <div class="pay-method">
+              <span class="pay-icon" :class="item.name">
+                <van-icon :name="item.icon" />
+              </span>
+              <b>{{ item.label }}</b>
+            </div>
+          </template>
+          <template #right-icon>
+            <van-radio :name="item.name" checked-color="#ff5b20" />
+          </template>
+        </van-cell>
+      </van-radio-group>
+    </section>
+
+    <van-button class="pay-button" round block @click="onPay">立即支付 ¥{{ amountText }}</van-button>
+  </main>
+</template>
+
+<script>
+import { readPaymentInfo, formatYuan } from './payment-data'
+
+export default {
+  name: 'JoyfulSelectionPayment',
+  data: () => ({
+    payType: 'points',
+    paymentInfo: {},
+    pointsBalance: '32.00'
+  }),
+  computed: {
+    amountText() {
+      return formatYuan(this.paymentInfo.amount)
+    },
+    receiverText() {
+      const name = this.paymentInfo.receiverName || '-'
+      const tel = this.paymentInfo.receiverTel || ''
+
+      return tel ? `${name}　${tel}` : name
+    },
+    payMethods() {
+      return [
+        { name: 'points', label: `积分支付（余额：¥${this.pointsBalance}）`, icon: 'gold-coin-o' },
+        { name: 'wechat', label: '微信支付', icon: 'wechat-pay' },
+        { name: 'alipay', label: '支付宝支付', icon: 'alipay' }
+      ]
+    }
+  },
+  created() {
+    this.paymentInfo = readPaymentInfo()
+  },
+  methods: {
+    onPay() {
+      this.$router.push({ path: '/joyful-selection/payment-confirm', query: { payType: this.payType } })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.payment-page {
+  min-height: 100vh;
+  padding: 46px 8px 84px;
+  background: #f7f7f7;
+}
+
+.payment-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);
+}
+
+.amount-card,
+.info-card,
+.pay-card {
+  margin-top: 10px;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.amount-card {
+  padding: 24px 16px 27px;
+  text-align: center;
+}
+
+.amount-card p {
+  margin: 0 0 14px;
+  color: #333;
+  font-size: 12px;
+}
+
+.amount-card b {
+  color: #222;
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.info-card {
+  padding: 14px 12px 12px;
+}
+
+.info-card h3,
+.pay-card h3 {
+  margin: 0 0 12px;
+  color: #222;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.info-card p {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+  color: #777;
+  font-size: 12px;
+  line-height: 26px;
+}
+
+.info-card b {
+  color: #333;
+  font-weight: 400;
+}
+
+.pay-card {
+  overflow: hidden;
+  padding: 14px 0 4px;
+}
+
+.pay-card h3 {
+  padding: 0 12px;
+}
+
+.pay-card ::v-deep .van-cell {
+  padding: 10px 12px;
+}
+
+.pay-card ::v-deep .van-cell::after {
+  display: none;
+}
+
+.pay-method {
+  display: flex;
+  align-items: center;
+}
+
+.pay-method b {
+  color: #333;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.pay-icon {
+  display: flex;
+  width: 18px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  border-radius: 4px;
+  color: #fff;
+}
+
+.pay-icon .van-icon {
+  font-size: 14px;
+}
+
+.pay-icon.points {
+  background: #ffb000;
+}
+
+.pay-icon.wechat {
+  background: #18c764;
+}
+
+.pay-icon.alipay {
+  background: #1989fa;
+}
+
+.pay-button {
+  position: fixed;
+  right: 8px;
+  bottom: 18px;
+  left: 8px;
+  width: calc(100% - 16px);
+  height: 44px;
+  border: 0;
+  color: #fff;
+  background: #ff5b20;
+  font-size: 15px;
+  font-weight: 700;
+}
+</style>
diff --git a/supplied-h5/src/view/joyful-selection/cart/payment/payment-data.js b/supplied-h5/src/view/joyful-selection/cart/payment/payment-data.js
new file mode 100644
index 0000000..94599a0
--- /dev/null
+++ b/supplied-h5/src/view/joyful-selection/cart/payment/payment-data.js
@@ -0,0 +1,23 @@
+const PAYMENT_KEY = 'joyful-selection-payment-info'
+
+export const createOrderNo = () => {
+  const now = new Date()
+  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}`
+}
+
+export const savePaymentInfo = info => {
+  sessionStorage.setItem(PAYMENT_KEY, JSON.stringify(info))
+}
+
+export const readPaymentInfo = () => {
+  try {
+    return JSON.parse(sessionStorage.getItem(PAYMENT_KEY) || '{}')
+  } catch (error) {
+    return {}
+  }
+}
+
+export const formatYuan = price => (Number(price || 0) / 100).toFixed(2)
diff --git a/supplied-h5/src/view/joyful-selection/index.vue b/supplied-h5/src/view/joyful-selection/index.vue
index af349dc..164c771 100644
--- a/supplied-h5/src/view/joyful-selection/index.vue
+++ b/supplied-h5/src/view/joyful-selection/index.vue
@@ -68,7 +68,7 @@ export default {
         { name: '超值专区', icon: 'label', color: '#ec8c3d', background: '#fff4e9' },
         { name: '全部分类', icon: 'apps-o', color: '#989898', background: '#f5f5f5' }
       ],
-      flashProducts: joyfulProducts,
+      flashProducts: joyfulProducts.slice(0, 4),
       hotProducts: [joyfulProducts[2], joyfulProducts[0], joyfulProducts[1], joyfulProducts[3]]
     }
   },
diff --git a/supplied-h5/src/view/joyful-selection/layout.vue b/supplied-h5/src/view/joyful-selection/layout.vue
index e8f787f..26694d3 100644
--- a/supplied-h5/src/view/joyful-selection/layout.vue
+++ b/supplied-h5/src/view/joyful-selection/layout.vue
@@ -4,19 +4,32 @@
     <van-tabbar v-if="showTabbar" route active-color="#ff5b20" inactive-color="#777">
       <van-tabbar-item icon="wap-home-o" to="/joyful-selection/home">首页</van-tabbar-item>
       <van-tabbar-item icon="apps-o" to="/joyful-selection/products">分类</van-tabbar-item>
-      <van-tabbar-item icon="cart-o" to="/joyful-selection/cart">购物车</van-tabbar-item>
+      <van-tabbar-item icon="cart-o" :badge="cartBadge" to="/joyful-selection/cart">购物车</van-tabbar-item>
       <van-tabbar-item icon="user-o" to="/joyful-selection/profile">我的</van-tabbar-item>
     </van-tabbar>
   </main>
 </template>
 
 <script>
+import { mapActions, mapState } from 'pinia'
+import { useCartStore } from '@/store/cart'
+
 export default {
   name: 'JoyfulSelectionLayout',
   computed: {
+    ...mapState(useCartStore, ['totalCount']),
+    cartBadge() {
+      return this.totalCount > 0 ? this.totalCount : ''
+    },
     showTabbar() {
       return ['/joyful-selection/home', '/joyful-selection/products', '/joyful-selection/cart', '/joyful-selection/profile'].includes(this.$route.path)
     }
+  },
+  created() {
+    this.loadCart()
+  },
+  methods: {
+    ...mapActions(useCartStore, ['loadCart'])
   }
 }
 </script>
diff --git a/supplied-h5/src/view/joyful-selection/product-data.js b/supplied-h5/src/view/joyful-selection/product-data.js
index 1c3badf..64e08ff 100644
--- a/supplied-h5/src/view/joyful-selection/product-data.js
+++ b/supplied-h5/src/view/joyful-selection/product-data.js
@@ -3,6 +3,87 @@ import miniOvenImage from '@/assets/joyful-selection/products/mini-oven.png'
 import smartSpeakerImage from '@/assets/joyful-selection/products/smart-speaker.png'
 import giftBoxImage from '@/assets/joyful-selection/products/gift-box.png'
 
+const productImages = {
+  bluetoothEarbuds: bluetoothEarbudsImage,
+  miniOven: miniOvenImage,
+  smartSpeaker: smartSpeakerImage,
+  giftBox: giftBoxImage
+}
+
+const createProduct = ({ id, name, desc, detail, price, sales, image, categoryId, category, tag = '赠品' }) => ({
+  id,
+  name,
+  desc,
+  detail: detail || desc,
+  price,
+  originPrice: (Number(price) * 1.25).toFixed(2),
+  sales,
+  image,
+  categoryId,
+  category,
+  tag
+})
+
+export const joyfulCategories = [
+  { id: 'recommend', name: '推荐' },
+  { id: 'homeLiving', name: '居家生活' },
+  { id: 'digitalAppliance', name: '数码家电' },
+  { id: 'beautyCare', name: '美妆个护' },
+  { id: 'foodDrink', name: '食品饮料' },
+  { id: 'motherBaby', name: '母婴玩具' },
+  { id: 'fashionBag', name: '服饰鞋包' },
+  { id: 'sportsOutdoor', name: '运动户外' }
+]
+
+const categoryNameMap = joyfulCategories.reduce((map, category) => {
+  map[category.id] = category.name
+  return map
+}, {})
+
+const rawProducts = [
+  ['cream-oven', '奶油白家用迷你烤箱', '小巧不占地，早餐烘焙好帮手', '129.00', '1.2万件', productImages.miniOven, 'homeLiving'],
+  ['cotton-bedding', '100%纯棉舒适四件套', '柔软亲肤，安心睡眠', '179.00', '6453件', productImages.miniOven, 'homeLiving'],
+  ['aroma-gift', '橙意香薰礼盒套装', '淡雅留香，装点居家空间', '59.90', '8321件', productImages.giftBox, 'homeLiving'],
+  ['desktop-vase', '简约北欧陶瓷花瓶', '清新配色，点亮桌面角落', '39.90', '3180件', productImages.giftBox, 'homeLiving'],
+  ['earbuds-air2', '小米蓝牙耳机 Air2 SE', '轻盈半入耳，通勤运动都好听', '69.90', '1.2万件', productImages.bluetoothEarbuds, 'digitalAppliance'],
+  ['smart-speaker-pro', '黑曜智能音箱 Pro', '语音唤醒，沉浸听感', '99.00', '2.1万件', productImages.smartSpeaker, 'digitalAppliance'],
+  ['electric-toothbrush', '智能声波电动牙刷', '高频洁净，呵护口腔', '129.00', '2.1万件', productImages.bluetoothEarbuds, 'digitalAppliance'],
+  ['dual-charger', '双口快充充电器 30W', '小巧便携，多设备快充', '69.00', '5632件', productImages.smartSpeaker, 'digitalAppliance'],
+  ['skin-care-box', '植萃保湿护肤礼盒', '水润修护，清爽不粘腻', '99.90', '4820件', productImages.giftBox, 'beautyCare'],
+  ['aroma-wash', '香氛洗护旅行套装', '温和清洁，清新留香', '59.90', '7932件', productImages.giftBox, 'beautyCare'],
+  ['makeup-mirror', '便携补光化妆镜', '高清镜面，随时补妆', '49.90', '3651件', productImages.smartSpeaker, 'beautyCare'],
+  ['hand-cream', '滋润护手霜三支装', '细腻滋养，轻柔香气', '39.90', '5280件', productImages.giftBox, 'beautyCare'],
+  ['orange-gift', '橙意惊喜零食礼盒', '精致包装，送礼更有心意', '59.90', '6324件', productImages.giftBox, 'foodDrink'],
+  ['coffee-cup', '咖啡随行杯组合', '锁温防漏，醇香随行', '49.90', '3520件', productImages.bluetoothEarbuds, 'foodDrink'],
+  ['tea-snack', '下午茶点心礼盒', '多种风味，一盒满足', '69.90', '4891件', productImages.giftBox, 'foodDrink'],
+  ['fruit-drink', '轻享果饮礼盒', '清爽酸甜，聚会常备', '79.90', '2976件', productImages.giftBox, 'foodDrink'],
+  ['baby-bottle', '安心防摔儿童水杯', '轻巧易握，出门好携带', '39.90', '4250件', productImages.bluetoothEarbuds, 'motherBaby'],
+  ['toy-blocks', '益智拼搭积木套装', '色彩柔和，陪伴成长', '89.00', '2186件', productImages.giftBox, 'motherBaby'],
+  ['kids-night-light', '柔光儿童陪伴夜灯', '温和光线，安心入睡', '69.90', '3548件', productImages.smartSpeaker, 'motherBaby'],
+  ['baby-towel', '纯棉柔软浴巾两件装', '亲肤吸水，日常必备', '59.90', '2761件', productImages.miniOven, 'motherBaby'],
+  ['laptop-backpack', '大容量双肩电脑背包', '分区收纳，通勤出行轻松装', '149.00', '1.6万件', productImages.giftBox, 'fashionBag'],
+  ['mini-bag', '轻巧通勤斜挎小包', '简洁百搭，日常实用', '79.90', '5321件', productImages.giftBox, 'fashionBag'],
+  ['silk-scarf', '柔软撞色丝巾礼盒', '细腻亲肤，点亮穿搭', '69.90', '2680件', productImages.giftBox, 'fashionBag'],
+  ['canvas-tote', '简约帆布托特包', '大容量开口，随手能装', '49.90', '6412件', productImages.giftBox, 'fashionBag'],
+  ['sport-bottle', '运动便携保温水杯', '长效锁温，户外随行', '49.90', '7342件', productImages.bluetoothEarbuds, 'sportsOutdoor'],
+  ['neck-massager', '筋膜放松按摩仪 Mini', '轻巧便携，舒缓酸胀', '99.00', '3921件', productImages.smartSpeaker, 'sportsOutdoor'],
+  ['camping-light', '户外便携露营灯', '多档照明，夜晚更安心', '79.00', '2568件', productImages.smartSpeaker, 'sportsOutdoor'],
+  ['fitness-band', '弹力健身拉力带套装', '居家训练，轻松塑形', '29.90', '4396件', productImages.miniOven, 'sportsOutdoor']
+]
+
+export const joyfulProductList = rawProducts.map(([id, name, desc, price, sales, image, categoryId]) =>
+  createProduct({
+    id,
+    name,
+    desc,
+    price,
+    sales,
+    image,
+    categoryId,
+    category: categoryNameMap[categoryId]
+  })
+)
+
 export const joyfulProducts = [
   {
     id: 'bluetooth-earbuds',
@@ -47,7 +128,8 @@ export const joyfulProducts = [
     category: '食品饮料',
     tag: '品质精选',
     image: giftBoxImage
-  }
+  },
+  ...joyfulProductList
 ]
 
 export const getJoyfulProduct = id => joyfulProducts.find(item => item.id === id) || joyfulProducts[0]
diff --git a/supplied-h5/src/view/joyful-selection/product-detail/index.vue b/supplied-h5/src/view/joyful-selection/product-detail/index.vue
index 9b28095..0d01ad5 100644
--- a/supplied-h5/src/view/joyful-selection/product-detail/index.vue
+++ b/supplied-h5/src/view/joyful-selection/product-detail/index.vue
@@ -59,13 +59,24 @@
 
     <van-goods-action>
       <van-goods-action-icon icon="chat-o" text="客服" dot />
-      <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartBadge" @click="$router.push('/joyful-selection/cart')" />
+      <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartBadge" @click="openCartPopup" />
       <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
       <van-goods-action-button type="warning" text="加入购物车" @click="openSku('cart')" />
       <van-goods-action-button type="danger" text="立即购买" @click="openSku('buy')" />
     </van-goods-action>
 
     <joyful-sku-popup ref="skuPopup" @add-cart="loadCart" />
+    <van-popup v-model="showCartPopup" class="cart-popup" position="bottom" round>
+      <header class="cart-popup-head">
+        <b>购物车</b>
+        <van-icon name="cross" @click="showCartPopup = false" />
+      </header>
+      <joyful-cart-panel
+        ref="cartPanel"
+        class="cart-popup-panel"
+        @checkout="goCheckout"
+      />
+    </van-popup>
   </main>
 </template>
 
@@ -73,14 +84,17 @@
 import { mapActions, mapState } from 'pinia'
 import { useCartStore } from '@/store/cart'
 import { getJoyfulProduct } from '../product-data'
-import JoyfulSkuPopup from '../components/JoyfulSkuPopup.vue'
+import JoyfulSkuPopup from '../products/components/JoyfulSkuPopup.vue'
+import JoyfulCartPanel from '../cart/components/JoyfulCartPanel.vue'
 
 export default {
   name: 'JoyfulSelectionProductDetail',
   components: {
-    JoyfulSkuPopup
+    JoyfulSkuPopup,
+    JoyfulCartPanel
   },
   data: () => ({
+    showCartPopup: false,
     count: 1,
     features: [
       { icon: 'music-o', title: '舒适半入耳设计', desc: '长时间佩戴更舒适' },
@@ -101,6 +115,20 @@ export default {
   },
   methods: {
     ...mapActions(useCartStore, ['loadCart']),
+    openCartPopup() {
+      this.loadCart()
+      this.showCartPopup = true
+      this.$nextTick(() => {
+        if (this.$refs.cartPanel) {
+          this.$refs.cartPanel.selectAllItems()
+        }
+      })
+    },
+    goCheckout(items) {
+      sessionStorage.setItem('joyful-selection-checkout-items', JSON.stringify(items))
+      this.showCartPopup = false
+      this.$router.push({ path: '/joyful-selection/checkout', query: { source: 'cart' } })
+    },
     openSku(mode) {
       this.$refs.skuPopup.open(this.product, mode)
     }
@@ -357,4 +385,39 @@ export default {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+
+.cart-popup {
+  display: flex;
+  height: 76vh;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.cart-popup-head {
+  display: flex;
+  height: 48px;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid #f2f2f2;
+  background: #fff;
+}
+
+.cart-popup-head b {
+  color: #222;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.cart-popup-head .van-icon {
+  position: absolute;
+  right: 16px;
+  color: #999;
+  font-size: 20px;
+}
+
+.cart-popup-panel {
+  flex: 1;
+  min-height: 0;
+}
 </style>
diff --git a/supplied-h5/src/view/joyful-selection/components/JoyfulSkuPopup.vue b/supplied-h5/src/view/joyful-selection/products/components/JoyfulSkuPopup.vue
similarity index 62%
rename from supplied-h5/src/view/joyful-selection/components/JoyfulSkuPopup.vue
rename to supplied-h5/src/view/joyful-selection/products/components/JoyfulSkuPopup.vue
index b85b859..e7870d4 100644
--- a/supplied-h5/src/view/joyful-selection/components/JoyfulSkuPopup.vue
+++ b/supplied-h5/src/view/joyful-selection/products/components/JoyfulSkuPopup.vue
@@ -1,13 +1,15 @@
 <template>
   <van-sku
     v-model="show"
+    :class="`sku-popup--${mode}`"
     :sku="sku"
     :goods="skuGoods"
     :goods-id="currentGoods.id"
     :initial-sku="initialSku"
     :hide-stock="sku.hide_stock"
-    :show-add-cart-btn="mode === 'cart'"
-    :show-buy-btn="mode === 'buy'"
+    :show-stepper="false"
+    :show-add-cart-btn="mode !== 'buy'"
+    :show-buy-btn="true"
     :preview-on-click-image="true"
     add-cart-text="加入购物车"
     buy-text="立即购买"
@@ -61,13 +63,19 @@ export default {
     },
     sku() {
       const price = Math.round(Number(this.currentGoods.price) * 100)
+      const imageOptions = colorOptions.map(color => ({
+        ...color,
+        imgUrl: this.currentGoods.image,
+        previewImgUrl: this.currentGoods.image
+      }))
 
       return {
         tree: [
           {
             k: '颜色',
             k_s: 's1',
-            v: colorOptions
+            v: imageOptions,
+            largeImageMode: true
           },
           {
             k: '尺寸',
@@ -81,13 +89,13 @@ export default {
             s1: color.id,
             s2: size.id,
             price,
-            stock_num: 99
+            stock_num: 227
           }))
         ),
         price: this.currentGoods.price,
-        stock_num: 99,
+        stock_num: 227,
         none_sku: false,
-        hide_stock: true
+        hide_stock: false
       }
     }
   },
@@ -129,50 +137,115 @@ export default {
       this.$emit('add-cart')
     },
     onBuyClicked(data) {
-      this.addCart(data)
+      const item = this.getCartPayload(data)
+
+      sessionStorage.setItem('joyful-selection-checkout-items', JSON.stringify([item]))
       this.show = false
       this.$emit('buy')
-      this.$router.push('/joyful-selection/checkout')
+      this.$router.push({ path: '/joyful-selection/checkout', query: { source: 'buy' } })
     }
   }
 }
 </script>
 
 <style scoped lang="less">
+::v-deep .van-sku-container {
+  overflow: hidden;
+  border-radius: 14px 14px 0 0;
+}
+
 ::v-deep .van-sku-header {
-  min-height: 118px;
+  min-height: 96px;
+  padding: 18px 42px 12px 16px;
 }
 
 ::v-deep .van-sku-header__img-wrap {
-  width: 110px;
-  height: 110px;
-  border-radius: 8px;
+  display: none;
 }
 
 ::v-deep .van-sku-header__goods-info {
-  min-height: 110px;
-  padding-top: 2px;
+  min-height: 66px;
+  padding: 0;
+}
+
+::v-deep .van-sku__goods-price {
+  margin-top: 0;
 }
 
 ::v-deep .van-sku__goods-name {
-  color: #111;
-  font-size: 15px;
-  font-weight: 700;
-  line-height: 20px;
+  margin-top: 7px;
+  color: #999;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 18px;
 }
 
 ::v-deep .van-sku__price-symbol,
 ::v-deep .van-sku__price-num {
-  color: #ff5b20;
+  color: #f0182d;
+}
+
+::v-deep .van-sku__price-symbol {
+  font-size: 17px;
+}
+
+::v-deep .van-sku__price-num {
+  font-size: 22px;
+  font-weight: 400;
+}
+
+::v-deep .van-sku__stock {
+  color: #999;
+  font-size: 13px;
+}
+
+::v-deep .van-sku__selected-name {
+  margin-top: 8px;
+  color: #999;
+  font-size: 12px;
+}
+
+::v-deep .van-sku-body {
+  padding: 0 16px;
+}
+
+::v-deep .van-sku-group-container {
+  margin-left: 0;
+}
+
+::v-deep .van-sku-row {
+  margin: 0;
+  padding: 0 0 12px;
+}
+
+::v-deep .van-sku-row__title {
+  padding-bottom: 12px;
+  color: #333;
+  font-size: 14px;
+}
+
+::v-deep .van-sku-row__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+::v-deep .van-sku-row:not(:first-child) .van-sku-row__item {
+  height: 31px;
+  margin: 0 10px 8px 0;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 4px;
+  background: #f6f7f9;
+  color: #333;
+  font-size: 13px;
+  line-height: 31px;
 }
 
 ::v-deep .van-sku-row__item--active {
-  color: #ff5b20;
-  border-color: #ff5b20;
+  color: #ff5b20 !important;
+  border-color: #ff5b20 !important;
+  background: #fff8f4 !important;
 }
 
-::v-deep .van-sku-actions .van-button--danger {
-  background: #ff5b20;
-  border-color: #ff5b20;
-}
 </style>
diff --git a/supplied-h5/src/view/joyful-selection/products/index.vue b/supplied-h5/src/view/joyful-selection/products/index.vue
index 91b80c4..1b48140 100644
--- a/supplied-h5/src/view/joyful-selection/products/index.vue
+++ b/supplied-h5/src/view/joyful-selection/products/index.vue
@@ -52,103 +52,8 @@
 </template>
 
 <script>
-import { joyfulProducts } from '../product-data'
-import JoyfulSkuPopup from '../components/JoyfulSkuPopup.vue'
-
-const productImages = joyfulProducts.map(item => item.image)
-
-const categories = [
-  {
-    id: 'recommend',
-    name: '推荐',
-    products: []
-  },
-  {
-    id: 'homeLiving',
-    name: '居家生活',
-    products: [
-    ['cream-oven', '奶油白家用迷你烤箱', '小巧不占地，早餐烘焙好帮手', '129.00', '1.2万件', productImages[1]],
-    ['cotton-bedding', '100%纯棉舒适四件套', '柔软亲肤，安心睡眠', '179.00', '6453件', productImages[1]],
-    ['aroma-gift', '橙意香薰礼盒套装', '淡雅留香，装点居家空间', '59.90', '8321件', productImages[3]],
-    ['desktop-vase', '简约北欧陶瓷花瓶', '清新配色，点亮桌面角落', '39.90', '3180件', productImages[3]]
-    ]
-  },
-  {
-    id: 'digitalAppliance',
-    name: '数码家电',
-    products: [
-    ['earbuds-air2', '小米蓝牙耳机 Air2 SE', '轻盈半入耳，通勤运动都好听', '69.90', '1.2万件', productImages[0]],
-    ['smart-speaker-pro', '黑曜智能音箱 Pro', '语音唤醒，沉浸听感', '99.00', '2.1万件', productImages[2]],
-    ['electric-toothbrush', '智能声波电动牙刷', '高频洁净，呵护口腔', '129.00', '2.1万件', productImages[0]],
-    ['dual-charger', '双口快充充电器 30W', '小巧便携，多设备快充', '69.00', '5632件', productImages[2]]
-    ]
-  },
-  {
-    id: 'beautyCare',
-    name: '美妆个护',
-    products: [
-    ['skin-care-box', '植萃保湿护肤礼盒', '水润修护，清爽不粘腻', '99.90', '4820件', productImages[3]],
-    ['aroma-wash', '香氛洗护旅行套装', '温和清洁，清新留香', '59.90', '7932件', productImages[3]],
-    ['makeup-mirror', '便携补光化妆镜', '高清镜面，随时补妆', '49.90', '3651件', productImages[2]],
-    ['hand-cream', '滋润护手霜三支装', '细腻滋养，轻柔香气', '39.90', '5280件', productImages[3]]
-    ]
-  },
-  {
-    id: 'foodDrink',
-    name: '食品饮料',
-    products: [
-    ['orange-gift', '橙意惊喜零食礼盒', '精致包装，送礼更有心意', '59.90', '6324件', productImages[3]],
-    ['coffee-cup', '咖啡随行杯组合', '锁温防漏，醇香随行', '49.90', '3520件', productImages[0]],
-    ['tea-snack', '下午茶点心礼盒', '多种风味，一盒满足', '69.90', '4891件', productImages[3]],
-    ['fruit-drink', '轻享果饮礼盒', '清爽酸甜，聚会常备', '79.90', '2976件', productImages[3]]
-    ]
-  },
-  {
-    id: 'motherBaby',
-    name: '母婴玩具',
-    products: [
-    ['baby-bottle', '安心防摔儿童水杯', '轻巧易握，出门好携带', '39.90', '4250件', productImages[0]],
-    ['toy-blocks', '益智拼搭积木套装', '色彩柔和，陪伴成长', '89.00', '2186件', productImages[3]],
-    ['kids-night-light', '柔光儿童陪伴夜灯', '温和光线，安心入睡', '69.90', '3548件', productImages[2]],
-    ['baby-towel', '纯棉柔软浴巾两件装', '亲肤吸水，日常必备', '59.90', '2761件', productImages[1]]
-    ]
-  },
-  {
-    id: 'fashionBag',
-    name: '服饰鞋包',
-    products: [
-    ['laptop-backpack', '大容量双肩电脑背包', '分区收纳，通勤出行轻松装', '149.00', '1.6万件', productImages[3]],
-    ['mini-bag', '轻巧通勤斜挎小包', '简洁百搭，日常实用', '79.90', '5321件', productImages[3]],
-    ['silk-scarf', '柔软撞色丝巾礼盒', '细腻亲肤，点亮穿搭', '69.90', '2680件', productImages[3]],
-    ['canvas-tote', '简约帆布托特包', '大容量开口，随手能装', '49.90', '6412件', productImages[3]]
-    ]
-  },
-  {
-    id: 'sportsOutdoor',
-    name: '运动户外',
-    products: [
-    ['sport-bottle', '运动便携保温水杯', '长效锁温，户外随行', '49.90', '7342件', productImages[0]],
-    ['neck-massager', '筋膜放松按摩仪 Mini', '轻巧便携，舒缓酸胀', '99.00', '3921件', productImages[2]],
-    ['camping-light', '户外便携露营灯', '多档照明，夜晚更安心', '79.00', '2568件', productImages[2]],
-    ['fitness-band', '弹力健身拉力带套装', '居家训练，轻松塑形', '29.90', '4396件', productImages[1]]
-    ]
-  }
-]
-
-const productCategories = categories.filter(category => category.id !== 'recommend')
-
-const goods = productCategories.flatMap(category =>
-    category.products.map(([id, name, desc, price, sales, image]) => ({
-      id,
-      name,
-      desc,
-      price,
-      sales,
-      image,
-      categoryId: category.id,
-      tag: '赠品'
-    }))
-)
+import { joyfulCategories, joyfulProductList } from '../product-data'
+import JoyfulSkuPopup from './components/JoyfulSkuPopup.vue'
 
 export default {
   name: 'JoyfulSelectionProductList',
@@ -158,8 +63,8 @@ export default {
   data: () => ({
     selectedCategoryId: 'recommend',
     keyword: '',
-    categories,
-    goods
+    categories: joyfulCategories,
+    goods: joyfulProductList
   }),
   computed: {
     visibleGoods() {
diff --git a/supplied-h5/src/view/joyful-selection/profile/orders/index.vue b/supplied-h5/src/view/joyful-selection/profile/orders/index.vue
index 065bdcc..d062380 100644
--- a/supplied-h5/src/view/joyful-selection/profile/orders/index.vue
+++ b/supplied-h5/src/view/joyful-selection/profile/orders/index.vue
@@ -37,7 +37,8 @@ export default {
 </script>
 
 <style scoped>
-.orders-page { min-height: 100vh; background: #f7f7f7; }
+.orders-page { min-height: 100vh; padding-top: 46px; background: #f7f7f7; }
+.orders-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); }
 .orders-page section { padding: 0 12px; }
 .orders-page article { margin-top: 10px; border-radius: 10px; background: #fff; }
 .orders-page header, .orders-page footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: #999; font-size: 11px; }
diff --git a/supplied-h5/src/view/joyful-selection/profile/points/index.vue b/supplied-h5/src/view/joyful-selection/profile/points/index.vue
index 2eff562..d2148fc 100644
--- a/supplied-h5/src/view/joyful-selection/profile/points/index.vue
+++ b/supplied-h5/src/view/joyful-selection/profile/points/index.vue
@@ -1,3 +1,3 @@
 <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;background:#f7f7f7}.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>
+<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>