Skip to content

飞
飞鹤小程序
Commit 49311851 authored by spc's avatar spc
Browse files
Options

fixed

parent a15fa78b
Hide whitespace changes
Inline Side-by-side
Showing with 1233 additions and 37 deletions
components/xingmaLab/IMAGES.md 0 → 100644
View file @ 49311851
# 图片资源目录结构
## 目录结构
```
static/
└── XingmaLabPop/
└── v1/
├── XingmaLabConfirmPopBg.png # 确认弹窗背景图片
├── XingmaLabConfirmPopConfirmBtn.png # 确认弹窗确认按钮图片
├── XingmaLabCancelBtn.png # 确认弹窗取消按钮图片
├── XingmaLabNoTimePopBg.png # 无时间弹窗背景图片
└── XingmaLabNoTimePopBtn.png # 无时间弹窗按钮图片
```
## 图片规格说明
### Xingmalabconfirmpop 组件图片
#### 1. XingmaLabConfirmPopBg.png (确认弹窗背景)
- **尺寸**: 618 × 557 像素
- **格式**: PNG (支持透明背景)
- **用途**: 确认弹窗的主要背景图片
- **建议**: 使用高质量图片，确保在不同设备上显示清晰
#### 2. XingmaLabConfirmPopConfirmBtn.png (确认按钮)
- **尺寸**: 275 × 97 像素
- **格式**: PNG (支持透明背景)
- **用途**: 确认按钮的图片
- **建议**: 按钮图片应该清晰，有良好的视觉反馈
#### 3. XingmaLabCancelBtn.png (取消按钮)
- **尺寸**: 279 × 101 像素
- **格式**: PNG (支持透明背景)
- **用途**: 取消按钮的图片
- **建议**: 与确认按钮保持视觉一致性
### Xingmalabnotimepop 组件图片
#### 4. XingmaLabNoTimePopBg.png (无时间弹窗背景)
- **尺寸**: 618 × 460 像素
- **格式**: PNG (支持透明背景)
- **用途**: 无时间弹窗的主要背景图片
- **建议**: 使用高质量图片，确保在不同设备上显示清晰
#### 5. XingmaLabNoTimePopBtn.png (无时间弹窗按钮)
- **尺寸**: 466 × 97 像素
- **格式**: PNG (支持透明背景)
- **用途**: 无时间弹窗的按钮图片
- **建议**: 按钮图片应该清晰，有良好的视觉反馈
## 图片命名规范
- 使用 PascalCase 命名方式
- 文件名清晰描述图片用途
- 版本号使用 `v1`, `v2` 等格式
- 保持命名的一致性和可读性
- 按组件功能分组命名
## 图片优化建议
1. **文件大小**: 建议单张图片不超过 100KB
2. **图片质量**: 使用适当的压缩比例，平衡质量和文件大小
3. **格式选择**: PNG 格式适合需要透明背景的图片
4. **响应式**: 考虑为不同分辨率设备准备不同尺寸的图片
5. **一致性**: 保持同一组件内图片的视觉风格一致
## 部署说明
1. 将图片文件放置在对应的目录结构中
2. 确保图片文件权限正确
3. 测试图片在不同设备上的显示效果
4. 验证图片加载性能
5. 检查图片在不同分辨率下的显示效果
## 注意事项
- 图片路径在 `config.js` 中配置
- 组件会自动根据配置加载对应的图片
- 如需更换图片，只需替换文件并更新版本号
- 建议使用 CDN 加速图片加载
- 图片尺寸和位置信息在配置文件中统一管理
- 支持版本控制，便于图片资源更新和管理
components/xingmaLab/README.md 0 → 100644
View file @ 49311851
# XingmaLab 弹窗组件库
这是一个弹窗组件库，包含多个弹窗组件，用于不同的业务场景。
## 组件列表
### 1. Xingmalabconfirmpop - 确认弹窗组件
用于显示确认对话框，支持确认和取消操作。
### 2. Xingmalabnotimepop - 无时间弹窗组件
用于显示无时间状态的弹窗，通常只有一个按钮。
## 功能特性
- 支持显示/隐藏控制
- 响应式设计
- 图片资源集中配置管理
- 支持版本控制和图片更新
- 统一的样式和交互规范
- 支持自定义文案和样式
## 使用方法
### Xingmalabconfirmpop 组件
```vue
<template>
<view>
<button @click="showConfirm = true">显示确认弹窗</button>
<Xingmalabconfirmpop
:visible="showConfirm"
title="确认操作"
confirm-text="确定"
cancel-text="取消"
@confirm="handleConfirm"
@cancel="handleCancel"
@close="showConfirm = false"
/>
</view>
</template>
<script setup>
import { ref } from 'vue'
import Xingmalabconfirmpop from '@/components/xingmaLab/Xingmalabconfirmpop.vue'
const showConfirm = ref(false)
const handleConfirm = () => {
console.log('用户点击了确认')
showConfirm.value = false
}
const handleCancel = () => {
console.log('用户点击了取消')
showConfirm.value = false
}
</script>
```
### Xingmalabnotimepop 组件
```vue
<template>
<view>
<button @click="showNoTime = true">显示无时间弹窗</button>
<Xingmalabnotimepop
:visible="showNoTime"
title="暂无时间"
@button-click="handleButtonClick"
@close="showNoTime = false"
/>
</view>
</template>
<script setup>
import { ref } from 'vue'
import Xingmalabnotimepop from '@/components/xingmaLab/Xingmalabnotimepop.vue'
const showNoTime = ref(false)
const handleButtonClick = () => {
console.log('用户点击了按钮')
showNoTime.value = false
}
</script>
```
## 在发布页面中的使用
### 发布流程弹窗逻辑
在 `XingmaLabPublishPage.vue` 中，我们使用弹窗组件实现了以下逻辑：
1. **发布按钮点击** → 检查发布次数限制
2. **有剩余次数** → 显示确认发布弹窗 (`Xingmalabconfirmpop`)
3. **无剩余次数** → 显示无次数弹窗 (`Xingmalabnotimepop`)
### 代码示例
```vue
<template>
<!-- 确认发布弹窗 -->
<Xingmalabconfirmpop
:visible="showConfirmPopup"
title="确认发布"
confirm-text="确认发布"
cancel-text="取消"
@confirm="handleConfirmPublish"
@cancel="handleCancelPublish"
@close="showConfirmPopup = false"
/>
<!-- 无次数弹窗 -->
<Xingmalabnotimepop
:visible="showNoTimePopup"
title="发布次数已用完"
@button-click="handleNoTimeButtonClick"
@close="showNoTimePopup = false"
/>
</template>
<script setup>
import Xingmalabconfirmpop from '@/components/xingmaLab/Xingmalabconfirmpop.vue'
import Xingmalabnotimepop from '@/components/xingmaLab/Xingmalabnotimepop.vue'
// 弹窗显示状态
const showConfirmPopup = ref(false)
const showNoTimePopup = ref(false)
// 发布按钮点击处理
const handlePublishBtnClick = async () => {
// 检查发布次数限制
const canPublish = await checkPublishLimit()
if (!canPublish) {
// 显示无次数弹窗
showNoTimePopup.value = true
return
}
// 显示确认发布弹窗
showConfirmPopup.value = true
}
// 确认发布
const handleConfirmPublish = async () => {
showConfirmPopup.value = false
// 执行发布逻辑...
}
// 无次数弹窗按钮点击处理
const handleNoTimeButtonClick = () => {
showNoTimePopup.value = false
uni.showToast({
title: '发布次数已用完，请明天再试',
icon: 'none'
})
}
</script>
```
## Props
### Xingmalabconfirmpop Props
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| visible | Boolean | false | 控制弹窗显示/隐藏 |
| title | String | '确认' | 弹窗标题 |
| confirmText | String | '确认' | 确认按钮文本 |
| cancelText | String | '取消' | 取消按钮文本 |
### Xingmalabnotimepop Props
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| visible | Boolean | false | 控制弹窗显示/隐藏 |
| title | String | '暂无时间' | 弹窗标题 |
## Events
### Xingmalabconfirmpop Events
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| confirm | 点击确认按钮时触发 | - |
| cancel | 点击取消按钮时触发 | - |
| close | 点击遮罩层时触发 | - |
### Xingmalabnotimepop Events
| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| button-click | 点击按钮时触发 | - |
| close | 点击遮罩层时触发 | - |
## 图片配置
组件使用集中化的图片配置管理，所有图片路径都在 `config.js` 文件中配置：
```javascript
// 确认弹窗图片配置
images: {
background: `XingmaLabPop/v1/XingmaLabConfirmPopBg.png`,
confirmBtn: `XingmaLabPop/v1/XingmaLabConfirmPopConfirmBtn.png`,
cancelBtn: `XingmaLabPop/v1/XingmaLabCancelBtn.png`
}
// 无时间弹窗图片配置
images: {
background: `XingmaLabPop/v1/XingmaLabNoTimePopBg.png`,
button: `XingmaLabPop/v1/XingmaLabNoTimePopBtn.png`
}
```
### 图片目录结构
```
static/
└── XingmaLabPop/
└── v1/
├── XingmaLabConfirmPopBg.png # 确认弹窗背景
├── XingmaLabConfirmPopConfirmBtn.png # 确认弹窗确认按钮
├── XingmaLabCancelBtn.png # 确认弹窗取消按钮
├── XingmaLabNoTimePopBg.png # 无时间弹窗背景
└── XingmaLabNoTimePopBtn.png # 无时间弹窗按钮
```
## 配置管理
### 尺寸配置
```javascript
// 确认弹窗尺寸
dimensions: {
width: 750, // 弹窗宽度
height: 1624, // 弹窗高度
background: { // 背景尺寸
width: 618,
height: 557
},
confirmBtn: { // 确认按钮尺寸和位置
width: 275,
height: 97,
left: 318,
top: 408
},
cancelBtn: { // 取消按钮尺寸和位置
width: 279,
height: 101,
left: 28,
top: 406
}
}
// 无时间弹窗尺寸
dimensions: {
width: 750, // 弹窗宽度
height: 1624, // 弹窗高度
background: { // 背景尺寸
width: 618,
height: 460
},
button: { // 按钮尺寸和位置
width: 466,
height: 97,
left: 76,
top: 312
}
}
```
### 样式配置
```javascript
styles: {
zIndex: 999, // 层级
borderRadius: '16rpx', // 圆角
transition: 'all 0.3s ease' // 过渡动画
}
```
## 版本控制
组件支持版本控制，通过修改 `config.js` 中的 `version` 变量来管理不同版本的图片资源：
```javascript
const version = 'v1' // 当前版本
```
## 注意事项
1. **图片资源**: 需要准备对应的背景图片文件并放置在正确的目录结构中
2. **样式单位**: 组件使用 rpx 单位，确保跨平台兼容性
3. **事件处理**: 组件会发射标准事件，父组件可以监听处理
4. **配置管理**: 所有图片路径和尺寸配置都在 `config.js` 中集中管理
5. **版本更新**: 如需更新图片，只需替换文件并更新版本号即可
6. **组件复用**: 多个弹窗组件共享相同的配置管理机制
7. **发布流程**: 在发布页面中，弹窗组件用于二次确认和次数限制提示
## 文件结构
```
components/xingmaLab/
├── Xingmalabconfirmpop.vue # 确认弹窗组件
├── Xingmalabnotimepop.vue # 无时间弹窗组件
├── config.js # 配置文件
├── README.md # 使用说明
├── IMAGES.md # 图片资源说明
└── example.vue # 使用示例
pages/XingmaLabPublishPage/
├── XingmaLabPublishPage.vue # 发布页面（使用弹窗组件）
├── test-popup.vue # 弹窗组件测试页面
└── ...
```
components/xingmaLab/Xingmalabconfirmpop.vue 0 → 100644
View file @ 49311851
<template>
<view v-if="visible" class="xingmalabconfirmpop modal_center" :style="containerStyle" @click="handleOverlayClick">
<span class="xingmalabconfirmpopbg" :style="backgroundStyle"></span>
<span class="xingmalabconfirmpopconfirmbtn" :style="confirmBtnStyle" @click="handleConfirm"></span>
<span class="xingmalabcancelbtn" :style="cancelBtnStyle" @click="handleCancel"></span>
</view>
</template>
<script setup>
import { defineProps, defineEmits, computed, getCurrentInstance } from 'vue'
import { getImageUrl, getDimensions, getStyles } from './config.js'
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl
// 定义组件属性
const props = defineProps({
visible: {
type: Boolean,
default: false
},
title: {
type: String,
default: '确认'
},
confirmText: {
type: String,
default: '确认'
},
cancelText: {
type: String,
default: '取消'
}
})
// 定义组件事件
const emit = defineEmits(['confirm', 'cancel', 'close'])
// 获取配置信息
const dimensions = getDimensions()
const styles = getStyles()
// 计算样式
const containerStyle = computed(() => ({
width: `${dimensions.width}rpx`,
height: `${dimensions.height}rpx`,
zIndex: styles.zIndex
}))
const backgroundStyle = computed(() => ({
width: `${dimensions.background.width}rpx`,
height: `${dimensions.background.height}rpx`,
backgroundImage: `url(${$baseUrl + getImageUrl('xingmaLab/v1/XingmaLabConfirmPopBg.png')})`
}))
const confirmBtnStyle = computed(() => ({
width: `${dimensions.confirmBtn.width}rpx`,
height: `${dimensions.confirmBtn.height}rpx`,
left: `${dimensions.confirmBtn.left}rpx`,
top: `${dimensions.confirmBtn.top}rpx`,
backgroundImage: `url(${$baseUrl + getImageUrl('xingmaLab/v1/XingmaLabConfirmPopConfirmBtn.png')})`
}))
const cancelBtnStyle = computed(() => ({
width: `${dimensions.cancelBtn.width}rpx`,
height: `${dimensions.cancelBtn.height}rpx`,
left: `${dimensions.cancelBtn.left}rpx`,
top: `${dimensions.cancelBtn.top}rpx`,
backgroundImage: `url(${$baseUrl + getImageUrl('xingmaLab/v1/XingmaLabCancelBtn.png')})`
}))
// 确认按钮点击事件
const handleConfirm = () => {
emit('confirm')
}
// 取消按钮点击事件
const handleCancel = () => {
emit('cancel')
}
// 遮罩层点击事件
const handleOverlayClick = (event) => {
// 阻止事件冒泡
event.stopPropagation()
emit('close')
}
</script>
<style lang="less" scoped>
@import "../../common.less";
.xingmalabconfirmpop {
left: 0;
top: 0;
position: absolute;
z-index: 999;
.xingmalabconfirmpopbg {
left: 0;
top: 0;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
}
.xingmalabconfirmpopconfirmbtn {
position: absolute;
background-size: cover;
background-repeat: no-repeat;
cursor: pointer;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.8;
}
&:active {
opacity: 0.6;
}
}
.xingmalabcancelbtn {
position: absolute;
background-size: cover;
background-repeat: no-repeat;
cursor: pointer;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.8;
}
&:active {
opacity: 0.6;
}
}
}
// 弹窗居中样式
.modal_center {
display: flex;
align-items: center;
justify-content: center;
}
</style>
components/xingmaLab/Xingmalabnotimepop.vue 0 → 100644
View file @ 49311851
<template>
<view v-if="visible" class="xingmalabnotimepop modal_center" :style="containerStyle" @click="handleOverlayClick">
<span class="xingmalabnotimepopbg" :style="backgroundStyle"></span>
<span class="xingmalabnotimepopbtn" :style="buttonStyle" @click="handleButtonClick"></span>
</view>
</template>
<script setup>
import { defineProps, defineEmits, computed, getCurrentInstance } from 'vue'
import { getImageUrl, getDimensions, getStyles } from './config.js'
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl
// 定义组件属性
const props = defineProps({
visible: {
type: Boolean,
default: false
},
title: {
type: String,
default: '暂无时间'
}
})
// 定义组件事件
const emit = defineEmits(['button-click', 'close'])
// 获取配置信息
const dimensions = getDimensions('noTime')
const styles = getStyles('noTime')
// 计算样式
const containerStyle = computed(() => ({
width: `${dimensions.width}rpx`,
height: `${dimensions.height}rpx`,
zIndex: styles.zIndex
}))
const backgroundStyle = computed(() => ({
width: `${dimensions.background.width}rpx`,
height: `${dimensions.background.height}rpx`,
backgroundImage: `url(${$baseUrl + getImageUrl('XingmaLabPop/v1/XingmaLabNoTimePopBg.png')})`
}))
const buttonStyle = computed(() => ({
width: `${dimensions.button.width}rpx`,
height: `${dimensions.button.height}rpx`,
left: `${dimensions.button.left}rpx`,
top: `${dimensions.button.top}rpx`,
backgroundImage: `url(${$baseUrl + getImageUrl('XingmaLabPop/v1/XingmaLabNoTimePopBtn.png')})`
}))
// 按钮点击事件
const handleButtonClick = () => {
emit('button-click')
}
// 遮罩层点击事件
const handleOverlayClick = (event) => {
// 阻止事件冒泡
event.stopPropagation()
emit('close')
}
</script>
<style lang="less" scoped>
@import "../../common.less";
.xingmalabnotimepop {
left: 0;
top: 0;
position: absolute;
z-index: 999;
.xingmalabnotimepopbg {
left: 0;
top: 0;
position: absolute;
background-size: cover;
background-repeat: no-repeat;
}
.xingmalabnotimepopbtn {
position: absolute;
background-size: cover;
background-repeat: no-repeat;
cursor: pointer;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.8;
}
&:active {
opacity: 0.6;
}
}
}
// 弹窗居中样式
.modal_center {
display: flex;
align-items: center;
justify-content: center;
}
</style>
\ No newline at end of file
components/xingmaLab/config.js 0 → 100644
View file @ 49311851
const version = 'v1'
// Xingmalabconfirmpop 组件配置
export const xingmalabConfirmConfig = {
// 图片资源路径配置
images: {
// 弹窗背景图片
background: `XingmaLabPop/${version}/XingmaLabConfirmPopBg.png`,
// 确认按钮图片
confirmBtn: `XingmaLabPop/${version}/XingmaLabConfirmPopConfirmBtn.png`,
// 取消按钮图片
cancelBtn: `XingmaLabPop/${version}/XingmaLabCancelBtn.png`
},
// 弹窗尺寸配置
dimensions: {
width: 750,
height: 1624,
background: {
width: 618,
height: 557
},
confirmBtn: {
width: 275,
height: 97,
left: 318,
top: 408
},
cancelBtn: {
width: 279,
height: 101,
left: 28,
top: 406
}
},
// 文案配置
texts: {
defaultTitle: '确认',
defaultConfirmText: '确认',
defaultCancelText: '取消'
},
// 样式配置
styles: {
zIndex: 999,
borderRadius: '16rpx',
transition: 'all 0.3s ease'
}
}
// Xingmalabnotimepop 组件配置
export const xingmalabNoTimeConfig = {
// 图片资源路径配置
images: {
// 弹窗背景图片
background: `XingmaLabPop/${version}/XingmaLabNoTimePopBg.png`,
// 按钮图片
button: `XingmaLabPop/${version}/XingmaLabNoTimePopBtn.png`
},
// 弹窗尺寸配置
dimensions: {
width: 750,
height: 1624,
background: {
width: 618,
height: 460
},
button: {
width: 466,
height: 97,
left: 76,
top: 312
}
},
// 文案配置
texts: {
defaultTitle: '暂无时间'
},
// 样式配置
styles: {
zIndex: 999,
borderRadius: '16rpx',
transition: 'all 0.3s ease'
}
}
// 获取完整图片URL
export const getImageUrl = (imagePath) => {
return `${imagePath}`
}
// 获取所有图片配置
export const getAllImages = () => {
return {
confirm: xingmalabConfirmConfig.images,
noTime: xingmalabNoTimeConfig.images
}
}
// 获取尺寸配置
export const getDimensions = (type = 'confirm') => {
return type === 'noTime' ? xingmalabNoTimeConfig.dimensions : xingmalabConfirmConfig.dimensions
}
// 获取样式配置
export const getStyles = (type = 'confirm') => {
return type === 'noTime' ? xingmalabNoTimeConfig.styles : xingmalabConfirmConfig.styles
}
// 获取指定组件的配置
export const getComponentConfig = (type = 'confirm') => {
return type === 'noTime' ? xingmalabNoTimeConfig : xingmalabConfirmConfig
}
components/xingmaLab/example.vue 0 → 100644
View file @ 49311851
<template>
<view class="example-page">
<view class="header">
<text class="title">XingmaLab 弹窗组件示例</text>
</view>
<view class="content">
<view class="section">
<text class="section-title">确认弹窗组件</text>
<view class="button-group">
<button
class="btn btn-primary"
@click="showBasicConfirm = true"
>
基础确认弹窗
</button>
<button
class="btn btn-secondary"
@click="showCustomConfirm = true"
>
自定义文本弹窗
</button>
<button
class="btn btn-warning"
@click="showDeleteConfirm = true"
>
删除确认弹窗
</button>
</view>
</view>
<view class="section">
<text class="section-title">无时间弹窗组件</text>
<view class="button-group">
<button
class="btn btn-info"
@click="showNoTime = true"
>
显示无时间弹窗
</button>
<button
class="btn btn-success"
@click="showCustomNoTime = true"
>
自定义标题弹窗
</button>
</view>
</view>
</view>
<!-- 基础确认弹窗 -->
<Xingmalabconfirmpop
:visible="showBasicConfirm"
@confirm="handleBasicConfirm"
@cancel="handleBasicCancel"
@close="showBasicConfirm = false"
/>
<!-- 自定义文本弹窗 -->
<Xingmalabconfirmpop
:visible="showCustomConfirm"
title="自定义操作"
confirm-text="确定执行"
cancel-text="暂不执行"
@confirm="handleCustomConfirm"
@cancel="handleCustomCancel"
@close="showCustomConfirm = false"
/>
<!-- 删除确认弹窗 -->
<Xingmalabconfirmpop
:visible="showDeleteConfirm"
title="删除确认"
confirm-text="删除"
cancel-text="取消"
@confirm="handleDeleteConfirm"
@cancel="handleDeleteCancel"
@close="showDeleteConfirm = false"
/>
<!-- 无时间弹窗 -->
<Xingmalabnotimepop
:visible="showNoTime"
@button-click="handleNoTimeButtonClick"
@close="showNoTime = false"
/>
<!-- 自定义标题无时间弹窗 -->
<Xingmalabnotimepop
:visible="showCustomNoTime"
title="系统繁忙"
@button-click="handleCustomNoTimeButtonClick"
@close="showCustomNoTime = false"
/>
</view>
</template>
<script setup>
import { ref } from 'vue'
import Xingmalabconfirmpop from './Xingmalabconfirmpop.vue'
import Xingmalabnotimepop from './Xingmalabnotimepop.vue'
// 确认弹窗显示状态
const showBasicConfirm = ref(false)
const showCustomConfirm = ref(false)
const showDeleteConfirm = ref(false)
// 无时间弹窗显示状态
const showNoTime = ref(false)
const showCustomNoTime = ref(false)
// 基础确认弹窗事件处理
const handleBasicConfirm = () => {
uni.showToast({
title: '用户点击了确认',
icon: 'success'
})
showBasicConfirm.value = false
}
const handleBasicCancel = () => {
uni.showToast({
title: '用户点击了取消',
icon: 'none'
})
showBasicConfirm.value = false
}
// 自定义文本弹窗事件处理
const handleCustomConfirm = () => {
uni.showToast({
title: '执行自定义操作',
icon: 'success'
})
showCustomConfirm.value = false
}
const handleCustomCancel = () => {
uni.showToast({
title: '暂不执行操作',
icon: 'none'
})
showCustomConfirm.value = false
}
// 删除确认弹窗事件处理
const handleDeleteConfirm = () => {
uni.showModal({
title: '提示',
content: '确定要删除这个项目吗？',
success: (res) => {
if (res.confirm) {
uni.showToast({
title: '删除成功',
icon: 'success'
})
}
}
})
showDeleteConfirm.value = false
}
const handleDeleteCancel = () => {
uni.showToast({
title: '取消删除',
icon: 'none'
})
showDeleteConfirm.value = false
}
// 无时间弹窗事件处理
const handleNoTimeButtonClick = () => {
uni.showToast({
title: '用户点击了按钮',
icon: 'success'
})
showNoTime.value = false
}
const handleCustomNoTimeButtonClick = () => {
uni.showToast({
title: '系统繁忙，请稍后再试',
icon: 'none'
})
showCustomNoTime.value = false
}
</script>
<style lang="less" scoped>
.example-page {
padding: 40rpx;
background-color: #f5f5f5;
min-height: 100vh;
}
.header {
text-align: center;
margin-bottom: 60rpx;
.title {
font-size: 48rpx;
font-weight: bold;
color: #333;
}
}
.content {
.section {
margin-bottom: 60rpx;
.section-title {
display: block;
font-size: 36rpx;
font-weight: 600;
color: #333;
margin-bottom: 30rpx;
padding-left: 20rpx;
border-left: 8rpx solid #007aff;
}
.button-group {
display: flex;
flex-direction: column;
gap: 30rpx;
.btn {
padding: 30rpx;
border-radius: 16rpx;
border: none;
font-size: 32rpx;
font-weight: 500;
&.btn-primary {
background-color: #007aff;
color: white;
}
&.btn-secondary {
background-color: #34c759;
color: white;
}
&.btn-warning {
background-color: #ff3b30;
color: white;
}
&.btn-info {
background-color: #5ac8fa;
color: white;
}
&.btn-success {
background-color: #4cd964;
color: white;
}
&:active {
opacity: 0.8;
}
}
}
}
}
</style>
pages/XingmaLabPublishPage/XingmaLabPublishPage.vue
View file @ 49311851
......@@ -62,24 +62,24 @@
<span class="xingmalabpublishpagesucnum">{{ config.texts.suc.numberPrefix }}{{ publishNumber }}</span>
</div>
<!-- 确认发布弹窗 -->
<uni-popup ref="confirmPopup" type="center" :mask-click="false">
<view class="confirm-popup">
<view class="confirm-title">确认发布</view>
<view class="confirm-content">
<view class="confirm-image" v-if="uploadedImage">
<image :src="uploadedImage" mode="aspectFill" />
</view>
<view class="confirm-description">
{{ description || '暂无文案介绍' }}
</view>
</view>
<view class="confirm-actions">
<button class="confirm-btn cancel" @click="handleCancelPublish">取消</button>
<button class="confirm-btn confirm" @click="handleConfirmPublish">确认发布</button>
</view>
</view>
</uni-popup>
<!-- 确认发布弹窗 - 使用 Xingmalabconfirmpop 组件 -->
<Xingmalabconfirmpop
:visible="showConfirmPopup"
title="确认发布"
confirm-text="确认发布"
cancel-text="取消"
@confirm="handleConfirmPublish"
@cancel="handleCancelPublish"
@close="showConfirmPopup = false"
/>
<!-- 无次数弹窗 - 使用 Xingmalabnotimepop 组件 -->
<Xingmalabnotimepop
:visible="showNoTimePopup"
title="发布次数已用完"
@button-click="handleNoTimeButtonClick"
@close="showNoTimePopup = false"
/>
<!-- 用户信息授权弹窗 -->
<uni-popup ref="userInfoPopup" type="bottom" :mask-click="false">
......@@ -127,6 +127,8 @@
<script setup>
import { ref, onMounted, computed } from 'vue'
import { xingmaLabConfig, getImageUrl, getRandomSuccessMessage } from './config.js'
import Xingmalabconfirmpop from '@/components/xingmaLab/Xingmalabconfirmpop.vue'
import Xingmalabnotimepop from '@/components/xingmaLab/Xingmalabnotimepop.vue'
// 组件名称
defineOptions({
......@@ -139,7 +141,6 @@ const publishNumber = ref('123456789')
const uploadedImage = ref('') // 上传的图片
const description = ref('') // 藏品文案介绍
const isUploading = ref(false) // 上传状态
const confirmPopup = ref(null) // 确认弹窗引用
const userInfoPopup = ref(null) // 用户信息授权弹窗引用
const successMessage = ref('') // 成功文案
const tempUserInfo = ref({ // 临时用户信息
......@@ -147,6 +148,10 @@ const tempUserInfo = ref({ // 临时用户信息
nickName: ''
})
// 弹窗显示状态
const showConfirmPopup = ref(false) // 确认发布弹窗
const showNoTimePopup = ref(false) // 无次数弹窗
// 配置对象
const config = xingmaLabConfig
......@@ -268,8 +273,16 @@ const handlePublishBtnClick = async () => {
return
// }
// 显示确认弹窗
confirmPopup.value.open()
// 检查发布次数限制
const canPublish = await checkPublishLimit()
if (!canPublish) {
// 显示无次数弹窗
showNoTimePopup.value = true
return
}
// 显示确认发布弹窗
showConfirmPopup.value = true
}
// 选择头像
......@@ -321,30 +334,33 @@ const handleAllowAuth = () => {
// 关闭授权弹窗
userInfoPopup.value.close()
// 显示确认弹窗
confirmPopup.value.open()
// 检查发布次数限制
checkPublishLimitAndShowConfirm()
}
// 检查发布次数限制并显示确认弹窗
const checkPublishLimitAndShowConfirm = async () => {
const canPublish = await checkPublishLimit()
if (!canPublish) {
// 显示无次数弹窗
showNoTimePopup.value = true
return
}
// 显示确认发布弹窗
showConfirmPopup.value = true
}
// 取消发布
const handleCancelPublish = () => {
confirmPopup.value.close()
showConfirmPopup.value = false
}
// 确认发布
const handleConfirmPublish = async () => {
confirmPopup.value.close()
showConfirmPopup.value = false
try {
// 检查发布次数限制
const canPublish = await checkPublishLimit()
if (!canPublish) {
uni.showToast({
title: '发布次数已达上限',
icon: 'none'
})
return
}
// 执行发布
await performPublish()
......@@ -365,13 +381,24 @@ const handleConfirmPublish = async () => {
}
}
// 无次数弹窗按钮点击处理
const handleNoTimeButtonClick = () => {
showNoTimePopup.value = false
uni.showToast({
title: '发布次数已用完，请明天再试',
icon: 'none'
})
}
// 检查发布次数限制
const checkPublishLimit = async () => {
// 这里应该调用后端接口检查发布次数
// 暂时返回true作为示例
// 暂时返回true作为示例，实际使用时应该根据后端返回结果判断
return new Promise((resolve) => {
setTimeout(() => {
resolve(true)
// 模拟检查结果，这里可以改为实际的接口调用
const hasRemainingCount = Math.random() > 0.3 // 70% 概率有剩余次数
resolve(hasRemainingCount)
}, 500)
})
}
......
pages/XingmaLabPublishPage/test-popup.vue 0 → 100644
View file @ 49311851
<template>
<view class="test-page">
<view class="header">
<text class="title">弹窗组件测试页面</text>
</view>
<view class="content">
<view class="button-group">
<button
class="btn btn-primary"
@click="showConfirmPopup = true"
>
显示确认弹窗
</button>
<button
class="btn btn-warning"
@click="showNoTimePopup = true"
>
显示无次数弹窗
</button>
</view>
</view>
<!-- 确认弹窗 -->
<Xingmalabconfirmpop
:visible="showConfirmPopup"
title="确认发布"
confirm-text="确认发布"
cancel-text="取消"
@confirm="handleConfirm"
@cancel="handleCancel"
@close="showConfirmPopup = false"
/>
<!-- 无次数弹窗 -->
<Xingmalabnotimepop
:visible="showNoTimePopup"
title="发布次数已用完"
@button-click="handleNoTimeButtonClick"
@close="showNoTimePopup = false"
/>
</view>
</template>
<script setup>
import { ref } from 'vue'
import Xingmalabconfirmpop from '@/components/xingmaLab/Xingmalabconfirmpop.vue'
import Xingmalabnotimepop from '@/components/xingmaLab/Xingmalabnotimepop.vue'
// 弹窗显示状态
const showConfirmPopup = ref(false)
const showNoTimePopup = ref(false)
// 确认弹窗事件处理
const handleConfirm = () => {
uni.showToast({
title: '确认发布',
icon: 'success'
})
showConfirmPopup.value = false
}
const handleCancel = () => {
uni.showToast({
title: '取消发布',
icon: 'none'
})
showConfirmPopup.value = false
}
// 无次数弹窗事件处理
const handleNoTimeButtonClick = () => {
uni.showToast({
title: '发布次数已用完',
icon: 'none'
})
showNoTimePopup.value = false
}
</script>
<style lang="less" scoped>
.test-page {
padding: 40rpx;
background-color: #f5f5f5;
min-height: 100vh;
}
.header {
text-align: center;
margin-bottom: 60rpx;
.title {
font-size: 48rpx;
font-weight: bold;
color: #333;
}
}
.content {
.button-group {
display: flex;
flex-direction: column;
gap: 30rpx;
.btn {
padding: 30rpx;
border-radius: 16rpx;
border: none;
font-size: 32rpx;
font-weight: 500;
&.btn-primary {
background-color: #007aff;
color: white;
}
&.btn-warning {
background-color: #ff3b30;
color: white;
}
&:active {
opacity: 0.8;
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment