englishread-front/pages/index/test2.vue

<template>
  <view class="content">
    <!-- 小程序环境使用web-view加载StPageFlip -->
    <web-view 
      :src="webviewUrl" 
      @message="handleMessage"
      class="webview-container"
    ></web-view>
    
    <!-- 控制按钮
    <view class="controls">
      <button @click="prevPage" :disabled="currentPage <= 0" class="control-btn">上一页</button>
      <text class="page-info">{{ currentPage + 1 }} / {{ totalPages }}</text>
      <button @click="nextPage" :disabled="currentPage >= totalPages - 1" class="control-btn">下一页</button>
    </view> -->
  </view>
</template>

<script>
export default {
    data() {
        return {
            // 当前页码
            currentPage: 0,
            // 总页数
            totalPages: 6,
            // webview URL - 需要部署到服务器或使用本地路径
            webviewUrl: 'https://hfllll.github.io/My/', // 请替换为实际的服务器地址
            // 本地测试可以使用: '/static/stpageflip.html'
        };
    },
    methods: {
        // 处理来自webview的消息
        handleMessage(e) {
            console.log('收到webview消息:', e.detail.data);
            const data = e.detail.data[0]; // 小程序webview消息格式
            
            if (data.type === 'pageFlip') {
                this.currentPage = data.currentPage;
                this.totalPages = data.totalPages;
            } else if (data.type === 'stateChange') {
                console.log('翻页状态变化:', data.state);
                if (data.state === 'flipping') {
                    uni.showToast({
                        title: '翻页中',
                        duration: 500,
                        icon: 'none'
                    });
                }
            }
        },
        
        // 上一页
        prevPage() {
            this.sendMessageToWebview({
                type: 'prevPage'
            });
        },
        
        // 下一页
        nextPage() {
            this.sendMessageToWebview({
                type: 'nextPage'
            });
        },
        
        // 跳转到指定页面
        turnToPage(pageNumber) {
            this.sendMessageToWebview({
                type: 'turnToPage',
                pageNumber: pageNumber
            });
        },
        
        // 向webview发送消息
        sendMessageToWebview(data) {
            // 注意：小程序向webview发送消息需要特殊处理
            // 这里只是示例，实际可能需要其他方式
            console.log('向webview发送消息:', data);
        }
    },
    
    onLoad() {
        console.log('StPageFlip翻页组件加载完成');
    }
}
</script>

<style lang="scss" scoped>
page {
    width: 100%;
    height: 100%;
}

.content {
    width: 100%;
    height: 100vh;
    position: relative;
    background: #f5f5f5;
}

.webview-container {
    width: 100%;
    height: calc(100vh - 80px);
}

.controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.control-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

.control-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.control-btn:disabled {
    background: #bdc3c7;
    color: #7f8c8d;
    box-shadow: none;
    transform: none;
}

.page-info {
    font-size: 16px;
    font-weight: 500;
    color: #2c3e50;
    background: rgba(255, 255, 255, 0.8);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
}
</style>