31 changed files with 5577 additions and 4003 deletions
File diff suppressed because it is too large
@ -0,0 +1,119 @@ |
|||||
|
version: '3.8' |
||||
|
|
||||
|
services: |
||||
|
# PHP 服务 |
||||
|
php: |
||||
|
image: php:8.2-fpm |
||||
|
container_name: niucloud_php |
||||
|
volumes: |
||||
|
- ./niucloud:/var/www/html |
||||
|
- ./docker/php/php.ini:/usr/local/etc/php/php.ini |
||||
|
- ./docker/php/www.conf:/usr/local/etc/php-fpm.d/www.conf |
||||
|
working_dir: /var/www/html |
||||
|
depends_on: |
||||
|
- mysql |
||||
|
- redis |
||||
|
environment: |
||||
|
- PHP_IDE_CONFIG=serverName=niucloud |
||||
|
command: > |
||||
|
bash -c " |
||||
|
apt-get update && |
||||
|
apt-get install -y libzip-dev zip unzip git libpng-dev libjpeg-dev libfreetype6-dev && |
||||
|
docker-php-ext-configure gd --with-freetype --with-jpeg && |
||||
|
docker-php-ext-install pdo pdo_mysql mysqli zip gd && |
||||
|
pecl install redis && |
||||
|
docker-php-ext-enable redis && |
||||
|
php-fpm |
||||
|
" |
||||
|
networks: |
||||
|
- niucloud_network |
||||
|
|
||||
|
# Nginx 服务 |
||||
|
nginx: |
||||
|
image: nginx:alpine |
||||
|
container_name: niucloud_nginx |
||||
|
ports: |
||||
|
- "20080:80" # 原本是 80 映射到 20080 |
||||
|
- "20081:8080" # 原本是 8080 映射到 20081 |
||||
|
volumes: |
||||
|
- ./niucloud:/var/www/html |
||||
|
- ./admin/dist:/var/www/admin |
||||
|
- ./docker/nginx/nginx.conf:/etc/nginx/nginx.conf |
||||
|
- ./docker/nginx/conf.d:/etc/nginx/conf.d |
||||
|
- ./docker/logs/nginx:/var/log/nginx |
||||
|
depends_on: |
||||
|
- php |
||||
|
- node |
||||
|
networks: |
||||
|
- niucloud_network |
||||
|
|
||||
|
# MySQL 数据库 |
||||
|
mysql: |
||||
|
image: mysql:8.0 |
||||
|
container_name: niucloud_mysql |
||||
|
ports: |
||||
|
- "23306:3306" # 原本是 3306 映射到 23306 |
||||
|
environment: |
||||
|
MYSQL_ROOT_PASSWORD: root123456 |
||||
|
MYSQL_DATABASE: niucloud |
||||
|
MYSQL_USER: niucloud |
||||
|
MYSQL_PASSWORD: niucloud123 |
||||
|
volumes: |
||||
|
- ./docker/data/mysql:/var/lib/mysql |
||||
|
- ./docker/mysql/my.cnf:/etc/mysql/conf.d/my.cnf |
||||
|
- ./docker/logs/mysql:/var/log/mysql |
||||
|
command: --default-authentication-plugin=mysql_native_password |
||||
|
networks: |
||||
|
- niucloud_network |
||||
|
|
||||
|
# Redis 缓存 |
||||
|
redis: |
||||
|
image: redis:alpine |
||||
|
container_name: niucloud_redis |
||||
|
ports: |
||||
|
- "26379:6379" # 原本是 6379 映射到 26379 |
||||
|
volumes: |
||||
|
- ./docker/data/redis:/data |
||||
|
- ./docker/redis/redis.conf:/usr/local/etc/redis/redis.conf |
||||
|
command: redis-server /usr/local/etc/redis/redis.conf |
||||
|
networks: |
||||
|
- niucloud_network |
||||
|
|
||||
|
# Node.js 服务 (用于构建前端) |
||||
|
node: |
||||
|
image: node:18-alpine |
||||
|
container_name: niucloud_node |
||||
|
working_dir: /app |
||||
|
volumes: |
||||
|
- ./admin:/app |
||||
|
- ./docker/data/node_modules:/app/node_modules |
||||
|
ports: |
||||
|
- "23000:3000" # 原本是 3000 映射到 23000 |
||||
|
command: > |
||||
|
sh -c " |
||||
|
npm config set registry https://registry.npmmirror.com && |
||||
|
npm install && |
||||
|
npm run dev |
||||
|
" |
||||
|
networks: |
||||
|
- niucloud_network |
||||
|
|
||||
|
# Composer 服务 (用于 PHP 依赖管理) |
||||
|
composer: |
||||
|
image: composer:latest |
||||
|
container_name: niucloud_composer |
||||
|
volumes: |
||||
|
- ./niucloud:/app |
||||
|
working_dir: /app |
||||
|
command: install --ignore-platform-reqs |
||||
|
networks: |
||||
|
- niucloud_network |
||||
|
|
||||
|
networks: |
||||
|
niucloud_network: |
||||
|
driver: bridge |
||||
|
|
||||
|
volumes: |
||||
|
mysql_data: |
||||
|
redis_data: |
||||
|
node_modules: |
||||
@ -0,0 +1,268 @@ |
|||||
|
#!/bin/bash |
||||
|
|
||||
|
# 颜色输出函数 |
||||
|
print_message() { |
||||
|
echo -e "\033[1;32m[INFO] $1\033[0m" |
||||
|
} |
||||
|
|
||||
|
print_warning() { |
||||
|
echo -e "\033[1;33m[WARNING] $1\033[0m" |
||||
|
} |
||||
|
|
||||
|
print_error() { |
||||
|
echo -e "\033[1;31m[ERROR] $1\033[0m" |
||||
|
} |
||||
|
|
||||
|
# 设置项目名称 |
||||
|
PROJECT_NAME="MyApp" |
||||
|
|
||||
|
# 检查Docker和Docker Compose是否安装 |
||||
|
check_docker() { |
||||
|
if ! command -v docker &> /dev/null; then |
||||
|
print_error "Docker未安装，请先安装Docker" |
||||
|
exit 1 |
||||
|
fi |
||||
|
if ! command -v docker-compose &> /dev/null; then |
||||
|
print_error "Docker Compose未安装，请先安装Docker Compose" |
||||
|
exit 1 |
||||
|
fi |
||||
|
} |
||||
|
|
||||
|
# 创建必要的目录结构 |
||||
|
create_directories() { |
||||
|
print_message "创建必要的目录结构..." |
||||
|
mkdir -p docker/{logs/{nginx,mysql},data/{mysql,redis,node_modules},nginx/conf.d,php,mysql,redis} |
||||
|
} |
||||
|
|
||||
|
# 检查并生成配置文件 |
||||
|
check_config_files() { |
||||
|
print_message "检查必要的配置文件..." |
||||
|
|
||||
|
# Nginx 主配置 |
||||
|
if [ ! -f "docker/nginx/nginx.conf" ]; then |
||||
|
print_warning "Nginx主配置文件不存在，创建默认配置..." |
||||
|
cat > docker/nginx/nginx.conf << 'EOF' |
||||
|
user nginx; |
||||
|
worker_processes auto; |
||||
|
error_log /var/log/nginx/error.log warn; |
||||
|
pid /var/run/nginx.pid; |
||||
|
|
||||
|
events { |
||||
|
worker_connections 1024; |
||||
|
} |
||||
|
|
||||
|
http { |
||||
|
include /etc/nginx/mime.types; |
||||
|
default_type application/octet-stream; |
||||
|
|
||||
|
log_format main '$remote_addr - $remote_user [$time_local] "$request" ' |
||||
|
'$status $body_bytes_sent "$http_referer" ' |
||||
|
'"$http_user_agent" "$http_x_forwarded_for"'; |
||||
|
|
||||
|
access_log /var/log/nginx/access.log main; |
||||
|
|
||||
|
sendfile on; |
||||
|
keepalive_timeout 65; |
||||
|
client_max_body_size 20M; |
||||
|
|
||||
|
include /etc/nginx/conf.d/*.conf; |
||||
|
} |
||||
|
EOF |
||||
|
fi |
||||
|
|
||||
|
# Nginx 站点配置 |
||||
|
if [ ! -f "docker/nginx/conf.d/default.conf" ]; then |
||||
|
print_warning "Nginx站点配置文件不存在，创建默认配置..." |
||||
|
cat > docker/nginx/conf.d/default.conf << 'EOF' |
||||
|
server { |
||||
|
listen 80; |
||||
|
server_name localhost; |
||||
|
root /var/www/html/public; |
||||
|
index index.php index.html; |
||||
|
|
||||
|
location / { |
||||
|
try_files $uri $uri/ /index.php?$query_string; |
||||
|
} |
||||
|
|
||||
|
location ~ \.php$ { |
||||
|
fastcgi_pass php:9000; |
||||
|
fastcgi_index index.php; |
||||
|
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; |
||||
|
include fastcgi_params; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
server { |
||||
|
listen 8080; |
||||
|
server_name localhost; |
||||
|
root /var/www/admin; |
||||
|
index index.html; |
||||
|
|
||||
|
location / { |
||||
|
try_files $uri $uri/ /index.html; |
||||
|
} |
||||
|
} |
||||
|
EOF |
||||
|
fi |
||||
|
|
||||
|
# PHP 配置 |
||||
|
if [ ! -f "docker/php/php.ini" ]; then |
||||
|
print_warning "PHP配置文件不存在，创建默认配置..." |
||||
|
cat > docker/php/php.ini << 'EOF' |
||||
|
[PHP] |
||||
|
memory_limit = 256M |
||||
|
upload_max_filesize = 20M |
||||
|
post_max_size = 20M |
||||
|
max_execution_time = 300 |
||||
|
date.timezone = Asia/Shanghai |
||||
|
|
||||
|
[opcache] |
||||
|
opcache.enable=1 |
||||
|
opcache.memory_consumption=128 |
||||
|
opcache.interned_strings_buffer=8 |
||||
|
opcache.max_accelerated_files=4000 |
||||
|
EOF |
||||
|
fi |
||||
|
|
||||
|
# PHP-FPM 配置 |
||||
|
if [ ! -f "docker/php/www.conf" ]; then |
||||
|
print_warning "PHP-FPM配置文件不存在，创建默认配置..." |
||||
|
cat > docker/php/www.conf << 'EOF' |
||||
|
[www] |
||||
|
user = www-data |
||||
|
group = www-data |
||||
|
listen = 9000 |
||||
|
pm = dynamic |
||||
|
pm.max_children = 5 |
||||
|
pm.start_servers = 2 |
||||
|
pm.min_spare_servers = 1 |
||||
|
pm.max_spare_servers = 3 |
||||
|
EOF |
||||
|
fi |
||||
|
|
||||
|
# MySQL 配置 |
||||
|
if [ ! -f "docker/mysql/my.cnf" ]; then |
||||
|
print_warning "MySQL配置文件不存在，创建默认配置..." |
||||
|
cat > docker/mysql/my.cnf << 'EOF' |
||||
|
[mysqld] |
||||
|
character-set-server = utf8mb4 |
||||
|
collation-server = utf8mb4_unicode_ci |
||||
|
default-authentication-plugin = mysql_native_password |
||||
|
max_allowed_packet = 64M |
||||
|
sql_mode = '' |
||||
|
|
||||
|
[client] |
||||
|
default-character-set = utf8mb4 |
||||
|
EOF |
||||
|
fi |
||||
|
|
||||
|
# Redis 配置 |
||||
|
if [ ! -f "docker/redis/redis.conf" ]; then |
||||
|
print_warning "Redis配置文件不存在，创建默认配置..." |
||||
|
cat > docker/redis/redis.conf << 'EOF' |
||||
|
requirepass niucloud123456 |
||||
|
appendonly yes |
||||
|
EOF |
||||
|
fi |
||||
|
} |
||||
|
|
||||
|
# 启动服务 |
||||
|
start_services() { |
||||
|
print_message "启动 ${PROJECT_NAME} 服务..." |
||||
|
docker-compose up -d |
||||
|
} |
||||
|
|
||||
|
# 停止服务 |
||||
|
stop_services() { |
||||
|
print_message "停止 ${PROJECT_NAME} 服务..." |
||||
|
docker-compose down |
||||
|
} |
||||
|
|
||||
|
# 重启服务 |
||||
|
restart_services() { |
||||
|
print_message "重启 ${PROJECT_NAME} 服务..." |
||||
|
docker-compose restart |
||||
|
} |
||||
|
|
||||
|
# 查看状态 |
||||
|
check_status() { |
||||
|
print_message "${PROJECT_NAME} 服务状态:" |
||||
|
docker-compose ps |
||||
|
} |
||||
|
|
||||
|
# 查看日志 |
||||
|
view_logs() { |
||||
|
service=$1 |
||||
|
if [ -z "$service" ]; then |
||||
|
print_message "查看所有服务日志..." |
||||
|
docker-compose logs |
||||
|
else |
||||
|
print_message "查看 $service 服务日志..." |
||||
|
docker-compose logs $service |
||||
|
fi |
||||
|
} |
||||
|
|
||||
|
# 初始化项目 |
||||
|
init_project() { |
||||
|
print_message "初始化 ${PROJECT_NAME} 项目..." |
||||
|
|
||||
|
# 检查是否存在 docker-compose.yml |
||||
|
if [ ! -f "docker-compose.yml" ]; then |
||||
|
print_error "缺少 docker-compose.yml 文件，请先创建！" |
||||
|
exit 1 |
||||
|
fi |
||||
|
|
||||
|
create_directories |
||||
|
check_config_files |
||||
|
|
||||
|
print_message "拉取Docker镜像..." |
||||
|
docker-compose pull |
||||
|
|
||||
|
print_message "项目初始化完成，现在可以启动服务了" |
||||
|
} |
||||
|
|
||||
|
# 显示帮助信息 |
||||
|
show_help() { |
||||
|
echo "用法: $0 [选项]" |
||||
|
echo "" |
||||
|
echo "选项:" |
||||
|
echo " start 启动所有服务" |
||||
|
echo " stop 停止所有服务" |
||||
|
echo " restart 重启所有服务" |
||||
|
echo " status 查看服务状态" |
||||
|
echo " logs 查看所有服务日志" |
||||
|
echo " logs <服务名> 查看指定服务日志" |
||||
|
echo " init 初始化项目" |
||||
|
echo " help 显示此帮助信息" |
||||
|
} |
||||
|
|
||||
|
# 主程序入口 |
||||
|
main() { |
||||
|
check_docker |
||||
|
|
||||
|
case "$1" in |
||||
|
start) |
||||
|
start_services |
||||
|
;; |
||||
|
stop) |
||||
|
stop_services |
||||
|
;; |
||||
|
restart) |
||||
|
restart_services |
||||
|
;; |
||||
|
status) |
||||
|
check_status |
||||
|
;; |
||||
|
logs) |
||||
|
view_logs "$2" |
||||
|
;; |
||||
|
init) |
||||
|
init_project |
||||
|
;; |
||||
|
help|*) |
||||
|
show_help |
||||
|
;; |
||||
|
esac |
||||
|
} |
||||
|
|
||||
|
main "$@" |
||||
@ -0,0 +1,70 @@ |
|||||
|
<template> |
||||
|
<fui-modal :buttons="[]" :width="width" :show="show" :maskClose="maskClose"> |
||||
|
<!-- 默认内容插槽 --> |
||||
|
<slot> |
||||
|
<!-- 默认内容 --> |
||||
|
</slot> |
||||
|
|
||||
|
<!-- 按钮插槽 --> |
||||
|
<view v-if="$slots.buttons" class="button-section"> |
||||
|
<slot name="buttons"></slot> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 关闭按钮 --> |
||||
|
<view v-if="showClose" class="fui-icon__close" @tap="handleClose"> |
||||
|
<fui-icon name="close" color="#B2B2B2" :size="48"></fui-icon> |
||||
|
</view> |
||||
|
</fui-modal> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'CustomModal', |
||||
|
props: { |
||||
|
// 是否显示弹窗 |
||||
|
show: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 弹窗宽度 |
||||
|
width: { |
||||
|
type: [String, Number], |
||||
|
default: 600 |
||||
|
}, |
||||
|
// 是否显示关闭按钮 |
||||
|
showClose: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
// 是否允许点击遮罩关闭 |
||||
|
maskClose: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 处理关闭事件 |
||||
|
handleClose() { |
||||
|
this.$emit('cancel', 'close') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.button-section { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
gap: 20rpx; |
||||
|
margin-top: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.fui-icon__close { |
||||
|
position: absolute; |
||||
|
right: 24rpx; |
||||
|
top: 20rpx; |
||||
|
z-index: 1000; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,234 @@ |
|||||
|
<template> |
||||
|
<view class="container"> |
||||
|
<fui-button @click="showSuccessModal = true" text="显示成功弹窗"></fui-button> |
||||
|
<fui-button @click="showConfirmModal = true" text="显示确认弹窗"></fui-button> |
||||
|
<fui-button @click="showCustomModal = true" text="显示自定义弹窗"></fui-button> |
||||
|
|
||||
|
<!-- 成功弹窗示例 --> |
||||
|
<custom-modal |
||||
|
:show="showSuccessModal" |
||||
|
width="600" |
||||
|
@cancel="handleModalCancel" |
||||
|
> |
||||
|
<fui-icon name="checkbox-fill" :size="108" color="#09BE4F"></fui-icon> |
||||
|
<text class="fui-title">购买成功</text> |
||||
|
<text class="fui-descr">成功购买一张月卡，可免费阅读30天</text> |
||||
|
|
||||
|
<template #buttons> |
||||
|
<fui-button |
||||
|
text="我知道了" |
||||
|
width="240rpx" |
||||
|
height="72rpx" |
||||
|
:size="28" |
||||
|
radius="36rpx" |
||||
|
background="#FFB703" |
||||
|
borderWidth="0" |
||||
|
:margin="['0','0','24rpx']" |
||||
|
@click="handleButtonClick('success_confirm')" |
||||
|
/> |
||||
|
</template> |
||||
|
</custom-modal> |
||||
|
|
||||
|
<!-- 确认弹窗示例 --> |
||||
|
<custom-modal |
||||
|
:show="showConfirmModal" |
||||
|
width="500" |
||||
|
@cancel="handleModalCancel" |
||||
|
> |
||||
|
<fui-icon name="warning-fill" :size="108" color="#FF6B35"></fui-icon> |
||||
|
<text class="fui-title">确认删除</text> |
||||
|
<text class="fui-descr">删除后无法恢复，确定要继续吗？</text> |
||||
|
|
||||
|
<template #buttons> |
||||
|
<fui-button |
||||
|
text="取消" |
||||
|
width="200rpx" |
||||
|
height="72rpx" |
||||
|
:size="28" |
||||
|
radius="36rpx" |
||||
|
background="#F5F5F5" |
||||
|
color="#333" |
||||
|
borderWidth="0" |
||||
|
:margin="['0','0','12rpx']" |
||||
|
@click="handleButtonClick('confirm_cancel')" |
||||
|
/> |
||||
|
<fui-button |
||||
|
text="确定删除" |
||||
|
width="200rpx" |
||||
|
height="72rpx" |
||||
|
:size="28" |
||||
|
radius="36rpx" |
||||
|
background="#FF6B35" |
||||
|
borderWidth="0" |
||||
|
@click="handleButtonClick('confirm_delete')" |
||||
|
/> |
||||
|
</template> |
||||
|
</custom-modal> |
||||
|
|
||||
|
<!-- 自定义内容弹窗示例 --> |
||||
|
<custom-modal |
||||
|
:show="showCustomModal" |
||||
|
width="700" |
||||
|
:showClose="false" |
||||
|
@cancel="handleModalCancel" |
||||
|
> |
||||
|
<view class="custom-content"> |
||||
|
<text class="custom-title">支付二维码</text> |
||||
|
<view class="custom-form"> |
||||
|
<fui-qrcode :value="qrcode"></fui-qrcode> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<template #buttons> |
||||
|
<view class="button-row"> |
||||
|
<fui-button |
||||
|
text="发送二维码给用户" |
||||
|
width="200rpx" |
||||
|
height="72rpx" |
||||
|
:size="28" |
||||
|
radius="36rpx" |
||||
|
background="#007AFF" |
||||
|
borderWidth="0" |
||||
|
@click="handleButtonClick('custom_submit')" |
||||
|
/> |
||||
|
</view> |
||||
|
</template> |
||||
|
</custom-modal> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import CustomModal from './custom-modal.vue' |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
CustomModal |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
showSuccessModal: false, |
||||
|
showConfirmModal: false, |
||||
|
showCustomModal: false, |
||||
|
qrcode: 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=TICKET', |
||||
|
formData: { |
||||
|
name: '', |
||||
|
phone: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 处理弹窗取消事件 |
||||
|
handleModalCancel(type) { |
||||
|
console.log('弹窗取消:', type) |
||||
|
this.showSuccessModal = false |
||||
|
this.showConfirmModal = false |
||||
|
this.showCustomModal = false |
||||
|
}, |
||||
|
|
||||
|
// 处理按钮点击事件 |
||||
|
handleButtonClick(action) { |
||||
|
console.log('按钮点击:', action) |
||||
|
|
||||
|
switch(action) { |
||||
|
case 'success_confirm': |
||||
|
this.showSuccessModal = false |
||||
|
uni.showToast({ |
||||
|
title: '确认成功', |
||||
|
icon: 'success' |
||||
|
}) |
||||
|
break |
||||
|
|
||||
|
case 'confirm_cancel': |
||||
|
this.showConfirmModal = false |
||||
|
break |
||||
|
|
||||
|
case 'confirm_delete': |
||||
|
this.showConfirmModal = false |
||||
|
uni.showToast({ |
||||
|
title: '删除成功', |
||||
|
icon: 'success' |
||||
|
}) |
||||
|
break |
||||
|
|
||||
|
case 'custom_cancel': |
||||
|
this.showCustomModal = false |
||||
|
break |
||||
|
|
||||
|
case 'custom_submit': |
||||
|
if (!this.formData.name || !this.formData.phone) { |
||||
|
uni.showToast({ |
||||
|
title: '请填写完整信息', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.showCustomModal = false |
||||
|
uni.showToast({ |
||||
|
title: '提交成功', |
||||
|
icon: 'success' |
||||
|
}) |
||||
|
|
||||
|
// 重置表单 |
||||
|
this.formData = { |
||||
|
name: '', |
||||
|
phone: '' |
||||
|
} |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.container { |
||||
|
padding: 40rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.fui-title { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
text-align: center; |
||||
|
margin: 20rpx 0; |
||||
|
} |
||||
|
|
||||
|
.fui-descr { |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
text-align: center; |
||||
|
margin: 0 0 30rpx 0; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.custom-content { |
||||
|
width: 100%; |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.custom-title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
text-align: center; |
||||
|
display: block; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.custom-form { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.button-row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
gap: 40rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,164 @@ |
|||||
|
<template> |
||||
|
<view class="dark-table-container"> |
||||
|
<view v-for="(row, rIdx) in data" :key="rIdx" class="card"> |
||||
|
<view class="card-title" @click="toggleExpand(rIdx)"> |
||||
|
{{ row.channel }} |
||||
|
<text class="expand-icon">{{ expanded[rIdx] ? '▲' : '▼' }}</text> |
||||
|
</view> |
||||
|
<view class="card-content"> |
||||
|
<view |
||||
|
class="card-row" |
||||
|
v-for="(col, cIdx) in getVisibleColumns(rIdx)" |
||||
|
:key="cIdx" |
||||
|
> |
||||
|
<view class="card-label"> |
||||
|
{{ col.label }} |
||||
|
<text v-if="col.tip" class="tip" @click.stop="showTip(col.tip)">?</text> |
||||
|
</view> |
||||
|
<view class="card-value">{{ row[col.key] || '-' }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view v-if="columns.length > 6" class="expand-btn" @click="toggleExpand(rIdx)"> |
||||
|
{{ expanded[rIdx] ? '收起' : '展开全部' }} |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 说明弹窗 --> |
||||
|
<uni-popup ref="popup" type="center"> |
||||
|
<view class="popup-content">{{ tipContent }}</view> |
||||
|
</uni-popup> |
||||
|
<AQTabber></AQTabber> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import AQTabber from "@/components/AQ/AQTabber.vue" |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
AQTabber, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
columns: [ |
||||
|
{ label: '渠道', key: 'channel' }, |
||||
|
{ label: '资源数', key: 'resource', tip: '本月的新资源' }, |
||||
|
{ label: '到访数(一访)', key: 'visit1', tip: '本月资源的一访到访数' }, |
||||
|
{ label: '到访率(一访)', key: 'visitRate1', tip: '一访到访数/本月新资源数' }, |
||||
|
{ label: '到访数(二访)', key: 'visit2', tip: '二访到访数/一访到访数' }, |
||||
|
{ label: '到访率(二访)', key: 'visitRate2', tip: '二访到访数/一访到访数' }, |
||||
|
{ label: '关单数(一访)', key: 'close1', tip: '本月一访到访的关单数' }, |
||||
|
{ label: '关单率(一访)', key: 'closeRate1', tip: '一访关单数/一访到访数' }, |
||||
|
{ label: '关单数(二访)', key: 'close2', tip: '二访到访的关单数' }, |
||||
|
{ label: '关单率(二访)', key: 'closeRate2', tip: '二访关单数/二访到访数' }, |
||||
|
{ label: '月总转', key: 'monthTrans', tip: '关单数（合计）/资源数' }, |
||||
|
{ label: '往月到访数', key: 'lastMonthVisit', tip: '本月资源在往月到访的到访数' }, |
||||
|
{ label: '月共到访', key: 'monthTotalVisit', tip: '本月资源任在本月到访/关单' }, |
||||
|
{ label: '往月关单数', key: 'lastMonthClose', tip: '本月关单-往月关单' }, |
||||
|
{ label: '月共关单', key: 'monthTotalClose', tip: '本月关单+往月关单' }, |
||||
|
], |
||||
|
data: [ |
||||
|
{ channel: '体检包（地推）', resource: 10, visit1: 5, visitRate1: '50%', visit2: 2, visitRate2: '40%', close1: 1, closeRate1: '20%', close2: 1, closeRate2: '50%', monthTrans: '10%', lastMonthVisit: 0, monthTotalVisit: 5, lastMonthClose: 0, monthTotalClose: 1 }, |
||||
|
], |
||||
|
tipContent: '', |
||||
|
expanded: {}, |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
showTip(content) { |
||||
|
this.tipContent = content |
||||
|
this.$refs.popup.open() |
||||
|
}, |
||||
|
toggleExpand(idx) { |
||||
|
this.$set(this.expanded, idx, !this.expanded[idx]) |
||||
|
}, |
||||
|
getVisibleColumns(idx) { |
||||
|
// 只展示前5个字段，展开后展示全部（不含渠道） |
||||
|
const cols = this.columns.slice(1) |
||||
|
if (this.expanded[idx]) return cols |
||||
|
return cols.slice(0, 5) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.dark-table-container { |
||||
|
background: #18181c; |
||||
|
color: #f1f1f1; |
||||
|
min-height: 100vh; |
||||
|
padding: 24rpx 12rpx; |
||||
|
} |
||||
|
.card { |
||||
|
background: #23232a; |
||||
|
border-radius: 18rpx; |
||||
|
box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.18); |
||||
|
margin-bottom: 32rpx; |
||||
|
padding: 24rpx 20rpx 8rpx 20rpx; |
||||
|
transition: box-shadow 0.2s; |
||||
|
} |
||||
|
.card-title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 18rpx; |
||||
|
color: #ffb300; |
||||
|
letter-spacing: 2rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.expand-icon { |
||||
|
font-size: 24rpx; |
||||
|
color: #bdbdbd; |
||||
|
margin-left: 12rpx; |
||||
|
} |
||||
|
.card-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 12rpx; |
||||
|
overflow: hidden; |
||||
|
transition: max-height 0.3s; |
||||
|
} |
||||
|
.card-row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
border-bottom: 1px dashed #333; |
||||
|
padding: 8rpx 0; |
||||
|
} |
||||
|
.card-label { |
||||
|
color: #bdbdbd; |
||||
|
font-size: 26rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.card-value { |
||||
|
color: #f1f1f1; |
||||
|
font-size: 26rpx; |
||||
|
text-align: right; |
||||
|
max-width: 60%; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
.tip { |
||||
|
color: #ffb300; |
||||
|
margin-left: 8rpx; |
||||
|
font-size: 24rpx; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.expand-btn { |
||||
|
color: #ffb300; |
||||
|
text-align: center; |
||||
|
font-size: 26rpx; |
||||
|
margin: 10rpx 0 0 0; |
||||
|
padding-bottom: 8rpx; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.popup-content { |
||||
|
background: #23232a; |
||||
|
color: #fff; |
||||
|
padding: 32rpx; |
||||
|
border-radius: 16rpx; |
||||
|
min-width: 300rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue