feat: 商品详情交互调整

pages/goods/components/GoodConfirm/demo.vue

@@ -0,0 +1,191 @@
+<template>
+  <view class="demo-container">
+    <TopNavBar title="商品确认组件演示" :fixed="true" />
+    
+    <view class="content-wrapper">
+      <view class="demo-section">
+        <view class="section-title">基础用法</view>
+        <view class="demo-item">
+          <button class="demo-btn" @click="showBasicDemo">显示基础确认弹窗</button>
+        </view>
+      </view>
+
+      <view class="demo-section">
+        <view class="section-title">自定义商品数据</view>
+        <view class="demo-item">
+          <button class="demo-btn" @click="showCustomDemo">显示自定义商品弹窗</button>
+        </view>
+      </view>
+
+      <view class="demo-section">
+        <view class="section-title">功能特性</view>
+        <view class="feature-list">
+          <view class="feature-item">✓ 基于 uni-popup 弹出层组件</view>
+          <view class="feature-item">✓ 商品信息展示（图片、标题、价格、标签）</view>
+          <view class="feature-item">✓ 数量选择控制（加减按钮、手动输入）</view>
+          <view class="feature-item">✓ 实时总价计算</view>
+          <view class="feature-item">✓ 确认购买和关闭事件</view>
+          <view class="feature-item">✓ 响应式设计，适配移动端</view>
+          <view class="feature-item">✓ 优雅的动画效果</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 基础演示弹窗 -->
+    <GoodConfirm 
+      ref="basicDemoRef" 
+      :goodsData="basicGoodsData" 
+      @confirm="handleBasicConfirm"
+      @close="handleBasicClose"
+    />
+
+    <!-- 自定义演示弹窗 -->
+    <GoodConfirm 
+      ref="customDemoRef" 
+      :goodsData="customGoodsData" 
+      @confirm="handleCustomConfirm"
+      @close="handleCustomClose"
+    />
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import TopNavBar from '@/components/TopNavBar/index.vue'
+import GoodConfirm from './index.vue'
+
+// 引用
+const basicDemoRef = ref(null)
+const customDemoRef = ref(null)
+
+// 基础商品数据
+const basicGoodsData = ref({
+  commodityName: '【成人票】云从朵花温泉门票',
+  price: 399,
+  timeTag: '随时可退',
+  commodityPhotoList: [
+    {
+      photoUrl: '/static/test/mk_img_1.png'
+    }
+  ]
+})
+
+// 自定义商品数据
+const customGoodsData = ref({
+  commodityName: '【亲子套票】海洋世界一日游',
+  price: 268,
+  timeTag: '限时优惠',
+  commodityPhotoList: [
+    {
+      photoUrl: '/static/test/mk_img_1.png'
+    }
+  ]
+})
+
+// 方法定义
+const showBasicDemo = () => {
+  basicDemoRef.value?.showPopup()
+}
+
+const showCustomDemo = () => {
+  customDemoRef.value?.showPopup()
+}
+
+const handleBasicConfirm = (orderData) => {
+  console.log('基础演示确认订单:', orderData)
+  uni.showModal({
+    title: '订单确认',
+    content: `商品：${orderData.goodsData.commodityName}\n数量：${orderData.quantity}\n总价：¥${orderData.totalPrice}`,
+    showCancel: false
+  })
+}
+
+const handleBasicClose = () => {
+  console.log('基础演示关闭弹窗')
+}
+
+const handleCustomConfirm = (orderData) => {
+  console.log('自定义演示确认订单:', orderData)
+  uni.showModal({
+    title: '订单确认成功',
+    content: `商品：${orderData.goodsData.commodityName}\n数量：${orderData.quantity}\n总价：¥${orderData.totalPrice}`,
+    showCancel: false
+  })
+}
+
+const handleCustomClose = () => {
+  console.log('自定义演示关闭弹窗')
+}
+</script>
+
+<style scoped lang="scss">
+.demo-container {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.content-wrapper {
+  padding: 100px 20px 20px;
+}
+
+.demo-section {
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  .section-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 16px;
+    padding-bottom: 8px;
+    border-bottom: 2px solid #ff6b35;
+  }
+
+  .demo-item {
+    margin-bottom: 12px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .demo-btn {
+    width: 100%;
+    height: 48px;
+    background: linear-gradient(135deg, #ff6b35 0%, #ff8f65 100%);
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 500;
+    transition: all 0.2s;
+    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
+
+    &:active {
+      transform: translateY(1px);
+      box-shadow: 0 1px 4px rgba(255, 107, 53, 0.3);
+    }
+
+    &::after {
+      border: none;
+    }
+  }
+
+  .feature-list {
+    .feature-item {
+      padding: 8px 0;
+      font-size: 14px;
+      color: #666;
+      line-height: 20px;
+      border-bottom: 1px solid #f0f0f0;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+</style>