zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 商品详情交互开发

Browse Source
This commit is contained in:
duanshuwen
2025-08-03 18:06:06 +08:00
parent 42c5354978
commit 5e0d53fc20
22 changed files with 1906 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
components/FormCard/demo.vue Normal file
View File

@@ -0,0 +1,256 @@
<template>
<view class="demo-container">
<view class="demo-title">FormCard 表单组件演示</view>
<view class="demo-description">
<text>✨ 支持姓名和手机号输入，自动过滤非数字字符</text>
<text>👤 姓名失去焦点时验证，自动去除首尾空格</text>
<text>📱 手机号失去焦点时验证，支持中国大陆手机号格式</text>
<text>🎨 优化UI设计，支持悬停效果和动画</text>
<text>🗑️ 支持删除操作（可配置显示/隐藏）</text>
<text>📱 响应式设计，适配小屏幕设备</text>
</view>
<!-- 示例1: 基础用法 -->
<view class="demo-section">
<view class="section-title">示例1: 基础用法</view>
<FormCard
:form="form1"
title="游客1"
@update:name="form1.name = $event"
@update:phone="form1.phone = $event"
@delete="handleDelete1"
/>
<view class="form-data">
<text>姓名: {{ form1.name }}</text>
<text>手机号: {{ form1.phone }}</text>
</view>
</view>
<!-- 示例2: 自定义标题 -->
<view class="demo-section">
<view class="section-title">示例2: 自定义标题</view>
<FormCard
:form="form2"
title="成人票"
@update:name="form2.name = $event"
@update:phone="form2.phone = $event"
@delete="handleDelete2"
/>
<view class="form-data">
<text>姓名: {{ form2.name }}</text>
<text>手机号: {{ form2.phone }}</text>
</view>
</view>
<!-- 示例3: 隐藏删除图标 -->
<view class="demo-section">
<view class="section-title">示例3: 隐藏删除图标</view>
<FormCard
:form="form3"
title="联系人信息"
:show-delete-icon="false"
@update:name="form3.name = $event"
@update:phone="form3.phone = $event"
/>
<view class="form-data">
<text>姓名: {{ form3.name }}</text>
<text>手机号: {{ form3.phone }}</text>
</view>
</view>
<!-- 示例4: 多个表单卡片 -->
<view class="demo-section">
<view class="section-title">示例4: 多个表单卡片</view>
<FormCard
v-for="(item, index) in formList"
:key="index"
:form="item"
:title="`游客${index + 1}`"
@update:name="item.name = $event"
@update:phone="item.phone = $event"
@delete="handleDeleteForm(index)"
/>
<button class="add-btn" @click="addForm">添加游客</button>
<view class="form-list-data">
<view class="list-title">表单数据:</view>
<view v-for="(item, index) in formList" :key="index" class="list-item">
<text>游客{{ index + 1 }}: {{ item.name }} - {{ item.phone }}</text>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import FormCard from './index.vue'
// 单个表单数据
const form1 = reactive({
name: '',
phone: ''
})
const form2 = reactive({
name: '张三',
phone: '13800138000'
})
const form3 = reactive({
name: '',
phone: ''
})
// 多个表单数据
const formList = ref([
{ name: '', phone: '' },
{ name: '', phone: '' }
])
// 事件处理
const handleDelete1 = () => {
console.log('删除表单1')
uni.showToast({
title: '删除表单1',
icon: 'none'
})
}
const handleDelete2 = () => {
console.log('删除表单2')
uni.showToast({
title: '删除表单2',
icon: 'none'
})
}
const handleDeleteForm = (index) => {
console.log(`删除表单${index + 1}`)
formList.value.splice(index, 1)
uni.showToast({
title: `删除游客${index + 1}`,
icon: 'none'
})
}
const addForm = () => {
formList.value.push({ name: '', phone: '' })
uni.showToast({
title: '添加游客成功',
icon: 'none'
})
}
</script>
<style scoped lang="scss">
.demo-container {
padding: 20rpx;
background-color: #f5f5f5;
min-height: 100vh;
}
.demo-title {
font-size: 32rpx;
font-weight: bold;
text-align: center;
margin-bottom: 20rpx;
color: #333;
}
.demo-description {
margin-bottom: 40rpx;
padding: 20rpx;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-radius: 12rpx;
border: 1px solid #bae6fd;
text {
display: block;
font-size: 26rpx;
color: #0369a1;
margin-bottom: 8rpx;
line-height: 1.5;
&:last-child {
margin-bottom: 0;
}
}
}
.demo-section {
margin-bottom: 60rpx;
}
.section-title {
font-size: 28rpx;
font-weight: 600;
margin-bottom: 20rpx;
color: #333;
border-left: 6rpx solid #00a6ff;
padding-left: 16rpx;
}
.form-data {
margin-top: 20rpx;
padding: 20rpx;
background: #fff;
border-radius: 8rpx;
border: 1px solid #e5e8ef;
text {
display: block;
font-size: 24rpx;
color: #666;
margin-bottom: 8rpx;
&:last-child {
margin-bottom: 0;
}
}
}
.add-btn {
width: 100%;
height: 80rpx;
background: #00a6ff;
color: #fff;
border: none;
border-radius: 8rpx;
font-size: 28rpx;
margin-top: 20rpx;
&:active {
background: #0056b3;
}
}
.form-list-data {
margin-top: 30rpx;
padding: 20rpx;
background: #fff;
border-radius: 8rpx;
border: 1px solid #e5e8ef;
}
.list-title {
font-size: 26rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
}
.list-item {
margin-bottom: 8rpx;
text {
font-size: 24rpx;
color: #666;
}
&:last-child {
margin-bottom: 0;
}
}
</style>