YGChatCS/pages/goods/components/GoodConfirm/demo.vue

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