feat: 1.0

supplied-h5/src/router/index.js

@@ -9,7 +9,6 @@ import JoyfulSelectionCart from '@/view/joyful-selection/cart/index.vue'
 import JoyfulSelectionCartEdit from '@/view/joyful-selection/cart/edit/index.vue'
 import JoyfulSelectionCheckout from '@/view/joyful-selection/order/checkout/index.vue'
 import JoyfulSelectionPayment from '@/view/joyful-selection/order/payment/index.vue'
-import JoyfulSelectionPaymentConfirm from '@/view/joyful-selection/order/payment-confirm/index.vue'
 import JoyfulSelectionPaymentSuccess from '@/view/joyful-selection/order/payment-success/index.vue'
 import JoyfulSelectionAddressList from '@/view/joyful-selection/address/index.vue'
 import JoyfulSelectionAddressEdit from '@/view/joyful-selection/address/edit/index.vue'
@@ -38,7 +37,6 @@ export default new Router({
         { path: 'cart/edit', component: JoyfulSelectionCartEdit },
         { path: 'checkout', component: JoyfulSelectionCheckout },
         { path: 'payment', component: JoyfulSelectionPayment },
-        { path: 'payment-confirm', component: JoyfulSelectionPaymentConfirm },
         { path: 'payment-success', component: JoyfulSelectionPaymentSuccess },
         { path: 'address', component: JoyfulSelectionAddressList },
         { path: 'address/edit', component: JoyfulSelectionAddressEdit },

supplied-h5/src/view/joyful-selection/order/payment-success/index.vue

@@ -1,17 +1,25 @@
 <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>
+    <van-nav-bar title="支付成功" left-arrow @click-left="$router.back()" />
+
+    <section class="success-card">
+      <div class="success-icon">
+        <van-icon name="success" />
+      </div>
+      <h2>支付成功</h2>
+      <b>¥ {{ amountText }}</b>
+
+      <div class="order-info">
+        <p><span>订单编号</span><em>{{ paymentInfo.orderNo || '-' }}</em></p>
+        <p><span>支付方式</span><em>{{ payTypeText }}</em></p>
+        <p><span>支付时间</span><em>{{ paidAt }}</em></p>
+      </div>
+
+      <footer>
+        <van-button round plain @click="$router.push('/joyful-selection/orders')">查看订单</van-button>
+        <van-button round type="danger" @click="$router.push('/joyful-selection/home')">继续购物</van-button>
+      </footer>
     </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>
 
@@ -52,6 +60,105 @@ export default {
 }
 </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 scoped lang="less">
+.success-page {
+  min-height: 100vh;
+  padding: 46px 8px 24px;
+  background: #f7f7f7;
+}
+
+.success-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);
+}
+
+.success-card {
+  min-height: calc(100vh - 70px);
+  margin-top: 8px;
+  padding: 34px 20px 24px;
+  border-radius: 8px;
+  background: #fff;
+  text-align: center;
+}
+
+.success-icon {
+  display: flex;
+  width: 58px;
+  height: 58px;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  border-radius: 50%;
+  color: #fff;
+  background: #22c55e;
+}
+
+.success-icon .van-icon {
+  font-size: 34px;
+  font-weight: 700;
+}
+
+.success-card h2 {
+  margin: 14px 0 9px;
+  color: #222;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.success-card > b {
+  display: block;
+  color: #222;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.order-info {
+  margin-top: 34px;
+}
+
+.order-info p {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+  color: #777;
+  font-size: 12px;
+  line-height: 31px;
+}
+
+.order-info em {
+  max-width: 68%;
+  overflow: hidden;
+  color: #333;
+  font-style: normal;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.success-card footer {
+  display: flex;
+  gap: 14px;
+  margin-top: 28px;
+}
+
+.success-card footer .van-button {
+  flex: 1;
+  height: 38px;
+  border-radius: 5px;
+}
+
+.success-card ::v-deep .van-button--plain {
+  color: #333;
+  border-color: #ddd;
+}
+
+.success-card ::v-deep .van-button--danger {
+  background: #ff5b20;
+  border-color: #ff5b20;
+}
 </style>

supplied-h5/src/view/joyful-selection/order/payment/index.vue

@@ -38,6 +38,27 @@
     </section>
 
     <van-button class="pay-button" round block @click="onPay">立即支付 ¥{{ amountText }}</van-button>
+
+    <van-popup v-model="showConfirm" class="pay-popup" round position="bottom">
+      <article class="pay-panel">
+        <header>
+          <van-icon name="cross" @click="showConfirm = false" />
+          <h2>确认支付</h2>
+        </header>
+        <section class="pay-summary">
+          <p>支付金额</p>
+          <b>¥ {{ amountText }}</b>
+        </section>
+        <div class="pay-info">
+          <p><span>支付方式</span><b>{{ payTypeText }}</b></p>
+          <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>
+        </footer>
+      </article>
+    </van-popup>
   </main>
 </template>
 
@@ -48,6 +69,7 @@ export default {
   name: 'JoyfulSelectionPayment',
   data: () => ({
     payType: 'points',
+    showConfirm: false,
     paymentInfo: {},
     pointsBalance: '32.00'
   }),
@@ -61,6 +83,11 @@ export default {
 
       return tel ? `${name}　${tel}` : name
     },
+    payTypeText() {
+      const method = this.payMethods.find(item => item.name === this.payType)
+
+      return method ? method.label.replace(/（.*$/, '') : '积分支付'
+    },
     payMethods() {
       return [
         { name: 'points', label: `积分支付（余额：¥${this.pointsBalance}）`, icon: 'gold-coin-o' },
@@ -74,7 +101,10 @@ export default {
   },
   methods: {
     onPay() {
-      this.$router.push({ path: '/joyful-selection/payment-confirm', query: { payType: this.payType } })
+      this.showConfirm = true
+    },
+    confirmPay() {
+      this.$router.push({ path: '/joyful-selection/payment-success', query: { payType: this.payType } })
     }
   }
 }
@@ -217,4 +247,94 @@ export default {
   font-size: 15px;
   font-weight: 700;
 }
+
+.pay-popup {
+  overflow: hidden;
+}
+
+.pay-panel {
+  padding: 0 18px 18px;
+  background: #fff;
+}
+
+.pay-panel header {
+  position: relative;
+  display: flex;
+  height: 52px;
+  align-items: center;
+  justify-content: center;
+}
+
+.pay-panel header h2 {
+  margin: 0;
+  color: #222;
+  font-size: 17px;
+  font-weight: 700;
+}
+
+.pay-panel header .van-icon {
+  position: absolute;
+  left: 0;
+  color: #999;
+  font-size: 20px;
+}
+
+.pay-summary {
+  padding: 18px 0 20px;
+  text-align: center;
+}
+
+.pay-summary p {
+  margin: 0 0 12px;
+  color: #777;
+  font-size: 13px;
+}
+
+.pay-summary b {
+  color: #222;
+  font-size: 30px;
+  line-height: 1;
+}
+
+.pay-info {
+  padding: 10px 0;
+  border-top: 1px solid #f3f3f3;
+  border-bottom: 1px solid #f3f3f3;
+}
+
+.pay-info p {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+  color: #777;
+  font-size: 13px;
+  line-height: 32px;
+}
+
+.pay-info b {
+  max-width: 68%;
+  overflow: hidden;
+  color: #333;
+  font-weight: 500;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pay-panel footer {
+  display: flex;
+  gap: 12px;
+  padding-top: 18px;
+}
+
+.pay-panel footer .van-button {
+  flex: 1;
+  height: 40px;
+}
+
+.payment-page ::v-deep .van-button--danger {
+  background: #ff5b20;
+  border-color: #ff5b20;
+}
 </style>

supplied-h5/src/view/joyful-selection/profile/index.vue

@@ -1,59 +1,215 @@
 <template>
   <main class="profile-page">
-    <section class="profile-top">
-      <van-image round width="48" height="48" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
-      <div><b>张三</b><p>欢迎来到悦享优选</p></div>
-      <van-icon name="ellipsis" />
+    <section class="profile-hero">
+      <div class="profile-actions">
+        <van-icon name="setting-o" />
+        <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" />
+        <div>
+          <b>张三</b>
+          <p>欢迎来到悦享优选</p>
+        </div>
+      </div>
     </section>
-    <section class="asset">
+
+    <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>
     </section>
+
     <section class="panel">
-      <div class="panel-title">我的订单 <span @click="$router.push('/joyful-selection/orders')">全部订单 ›</span></div>
+      <div class="panel-title">
+        <b>我的订单</b>
+        <span @click="$router.push('/joyful-selection/orders')">全部订单 <van-icon name="arrow" /></span>
+      </div>
       <van-grid :column-num="5" :border="false">
-        <van-grid-item icon="balance-pay" text="待付款" />
-        <van-grid-item icon="logistics" text="待发货" />
-        <van-grid-item icon="send-gift-o" text="待收货" />
-        <van-grid-item icon="todo-list-o" text="已完成" />
-        <van-grid-item icon="after-sale" text="售后" />
+        <van-grid-item v-for="item in orderItems" :key="item.text" :icon="item.icon" :text="item.text" />
       </van-grid>
     </section>
-    <section class="panel">
-      <div class="panel-title">我的服务</div>
-      <van-grid :column-num="4" :border="false">
-        <van-grid-item icon="star-o" text="我的收藏" />
-        <van-grid-item icon="clock-o" text="浏览记录" />
-        <van-grid-item icon="location-o" text="收货地址" />
-        <van-grid-item icon="coupon-o" text="优惠券" />
-        <van-grid-item icon="gift-o" text="积分商城" @click="$router.push('/joyful-selection/points')" />
-        <van-grid-item icon="service-o" text="客户服务" />
-        <van-grid-item icon="edit" text="意见反馈" />
-        <van-grid-item icon="setting-o" text="设置" />
-      </van-grid>
+
+    <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" />
+        <p>敬请期待</p>
+      </div>
     </section>
   </main>
 </template>
 
 <script>
 export default {
-  name: 'JoyfulSelectionProfile'
+  name: 'JoyfulSelectionProfile',
+  data: () => ({
+    orderItems: [
+      { icon: 'balance-pay', text: '待付款' },
+      { icon: 'logistics', text: '待发货' },
+      { icon: 'send-gift-o', text: '待收货' },
+      { icon: 'todo-list-o', text: '已完成' },
+      { icon: 'after-sale', text: '售后' }
+    ],
+  })
 }
 </script>
 
-<style scoped>
-.profile-page { min-height: 100vh; padding-bottom: 70px; background: #f7f7f7; }
-.profile-top { display: flex; align-items: center; gap: 12px; padding: 24px 20px; background: linear-gradient(135deg, #dcd8ff, #f9f8ff); }
-.profile-top div { flex: 1; }
-.profile-top b { font-size: 17px; }
-.profile-top p { margin: 4px 0 0; color: #777; font-size: 11px; }
-.asset { display: flex; margin: -3px 12px 12px; padding: 14px; border-radius: 10px; background: #fff; }
-.asset div { display: grid; flex: 1; gap: 6px; text-align: center; }
-.asset small { color: #777; font-size: 11px; }
-.asset b { color: #ff5b20; }
-.panel { margin: 10px 12px; border-radius: 10px; background: #fff; }
-.panel-title { padding: 13px; font-size: 13px; font-weight: bold; }
-.panel-title span { float: right; color: #999; font-size: 11px; font-weight: normal; }
-.panel ::v-deep .van-grid-item__text { font-size: 10px; }
+<style scoped lang="less">
+.profile-page {
+  min-height: 100vh;
+  padding-bottom: 92px;
+  background: #f7f7f7;
+}
+
+.profile-hero {
+  position: relative;
+  z-index: 0;
+  min-height: 182px;
+  padding: 26px 18px 56px;
+  overflow: hidden;
+}
+
+.profile-hero::before {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  background-image: url('~@/assets/joyful-selection/profile-bg.png');
+  background-size: cover;
+  background-position: center;
+  content: '';
+  opacity: .72;
+}
+
+.profile-actions {
+  position: absolute;
+  top: 18px;
+  right: 16px;
+  display: flex;
+  gap: 13px;
+  color: #333;
+}
+
+.profile-actions .van-icon {
+  font-size: 19px;
+}
+
+.user-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-top: 44px;
+}
+
+.user-row ::v-deep .van-image {
+  border: 2px solid rgba(255, 255, 255, .72);
+}
+
+.user-row b {
+  color: #222;
+  font-size: 17px;
+  font-weight: 700;
+}
+
+.user-row p {
+  margin: 6px 0 0;
+  color: #666;
+  font-size: 11px;
+}
+
+.asset-card {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  margin: -40px 10px 16px;
+  padding: 20px 0 18px;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 4px 16px rgba(61, 68, 92, .06);
+}
+
+.asset-card div {
+  display: grid;
+  flex: 1;
+  gap: 6px;
+  text-align: center;
+}
+
+.asset-card small {
+  color: #333;
+  font-size: 12px;
+}
+
+.asset-card b {
+  color: #ff5b20;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.panel {
+  margin: 16px 10px 0;
+  overflow: hidden;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.panel-title {
+  display: flex;
+  height: 42px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+}
+
+.panel-title b {
+  color: #222;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.panel-title span {
+  display: flex;
+  align-items: center;
+  color: #999;
+  font-size: 11px;
+}
+
+.panel-title span .van-icon {
+  margin-left: 2px;
+  font-size: 12px;
+}
+
+.panel ::v-deep .van-grid-item__content {
+  padding: 11px 0 16px;
+}
+
+.panel ::v-deep .van-grid-item__icon {
+  color: #333;
+  font-size: 22px;
+}
+
+.panel ::v-deep .van-grid-item__text {
+  margin-top: 6px;
+  color: #333;
+  font-size: 10px;
+}
+
+.service-panel {
+  padding-bottom: 20px;
+}
+
+.coming-soon {
+  display: flex;
+  min-height: 196px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 0 32px;
+}
+
+.coming-soon p {
+  margin: 12px 0 0;
+  color: #999;
+  font-size: 12px;
+}
 </style>

supplied-h5/src/view/joyful-selection/profile/orders/index.vue

@@ -1,19 +1,34 @@
 <template>
   <main class="orders-page">
     <van-nav-bar title="我的订单" left-arrow @click-left="$router.back()" />
-    <van-tabs v-model="active">
+    <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>
-      <article v-for="order in orders" :key="order.id">
-        <header><span>订单号：{{ order.id }}</span><b :class="order.status">{{ order.status }}</b></header>
-        <van-card
-          :title="order.product.name"
-          desc="共 3 件商品"
-          price="297.90"
-          :thumb="order.product.image"
-        />
-        <footer><span>合计：<b>¥297.90</b></span><van-button size="small" round plain type="danger">查看详情</van-button></footer>
+
+    <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"
+            />
+          </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>
     </section>
   </main>
@@ -28,22 +43,187 @@ export default {
     active: 0,
     tabs: ['全部', '待付款', '待发货', '待收货', '已完成', '售后'],
     orders: [
-      { id: 'YX2024051812345678', status: '待发货', product: joyfulProducts[0] },
-      { id: 'YX2024051509876543', status: '待收货', product: joyfulProducts[1] },
-      { id: 'YX2024051211223344', status: '已完成', product: joyfulProducts[2] }
+      {
+        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'
+      }
     ]
-  })
+  }),
+  computed: {
+    visibleOrders() {
+      const tab = this.tabs[this.active]
+
+      return tab === '全部' ? this.orders : this.orders.filter(order => order.status === tab)
+    }
+  }
 }
 </script>
 
-<style scoped>
-.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; }
-.orders-page header b { color: #ff5b20; }
-.orders-page .已完成 { color: #27ae60; }
-.orders-page footer b { color: #222; }
-.orders-page .van-card { background: #fff; }
+<style scoped lang="less">
+.orders-page {
+  min-height: 100vh;
+  padding-top: 90px;
+  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);
+}
+
+.order-tabs {
+  position: fixed;
+  z-index: 19;
+  top: 46px;
+  right: 0;
+  left: 0;
+}
+
+.orders-page ::v-deep .van-tabs__wrap {
+  height: 44px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
+}
+
+.orders-page ::v-deep .van-tab {
+  color: #333;
+  font-size: 12px;
+}
+
+.order-list {
+  padding: 8px 8px 14px;
+}
+
+.order-card {
+  overflow: hidden;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.order-card header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 12px 8px;
+}
+
+.order-card header span {
+  min-width: 0;
+  overflow: hidden;
+  color: #777;
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.order-card header b {
+  flex: none;
+  margin-left: 10px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.order-card header .pending {
+  color: #ff5b20;
+}
+
+.order-card header .done {
+  color: #21b36b;
+}
+
+.order-body {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding: 0 12px 10px;
+}
+
+.thumb-row {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  gap: 8px;
+}
+
+.order-thumb {
+  width: 62px;
+  height: 62px;
+  flex: none;
+  overflow: hidden;
+  border-radius: 4px;
+  background: #f5f5f5;
+}
+
+.order-summary {
+  flex: none;
+  margin-left: 10px;
+  color: #777;
+  font-size: 11px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.order-summary p {
+  margin: 0;
+  line-height: 22px;
+}
+
+.order-summary b {
+  color: #222;
+  font-size: 12px;
+}
+
+.order-card footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 12px 12px;
+}
+
+.order-card footer .van-button {
+  min-width: 78px;
+  height: 28px;
+  padding: 0 14px;
+  border-radius: 15px;
+  font-size: 11px;
+}
+
+.primary-action {
+  color: #ff5b20;
+  border-color: #ff5b20;
+}
+
+.dark-action {
+  color: #333;
+  border-color: #ddd;
+}
 </style>