当前位置: 首页 > news >正文

儿童绘本馆图书借阅租赁知识付费小程序源码交流

1.分类图书

2.书单推荐

4.会员卡次、期限购买

5.借阅时间选择

6.积分签到

7.优惠Q领取

前端uniapp开发   后端thinkphp开发 完全开源

 

 

 

 

<template>
    <view class="sp-section sp-index">
        <!-- search -->
        <view class="sp-index__search" @click="jumpTo('pages/index/search')">
            <input
                type="text"
                placeholder="书籍名称/作者名称"
                placeholder-class="sp-index__search-desc"
                readonly
            />
        </view>
        
        <!-- back -->
        <view class="sp-index__back"></view>
        
        <!-- banner -->
        <view class="sp-index__swiper">
            <swiper
                :indicator-dots="swiper.indicatorDots"
                :autoplay="swiper.autoplay"
                :interval="swiper.interval"
                :duration="swiper.duration"
            >
                <swiper-item v-for="(item, $index) in info.rotation_chart" :key="$index">
                    <image :src="item.rotation_image" @click="jumpToDetail(item)"></image>
                </swiper-item>
            </swiper>
        </view>
        
        <!-- grid -->
        <view class="sp-index__menu">
            <view
                class="sp-index__menu-item"
                v-for="(item, $index) in info.age"
                :key="$index"
                @click="setCategory($index)"
            >
                <image :src="item.age_img"></image>
                <text>{{ item.age }}</text>
            </view>
        </view>
        
        <!-- ads -->
        <view class="sp-index__link">
            <view class="sp-index__link-item" @click="jumpTo('pages/mine/member')">
                <text>成为会员</text>
                <text>畅享多重特权福利</text>
            </view>
            <view class="sp-index__link-item" @click="jumpTo('pages/mine/article')">
                <text>租借流程</text>
                <text>便捷租书运送快</text>
            </view>
        </view>
        
        <!-- ads -->
        <view class="sp-index__ad" v-if="info.index_img && info.index_img.index_img">
            <image :src="info.index_img.index_img" @click="jumpTo('pages/mine/member')"></image>
        </view>
        
        <!-- 推荐书单 -->
        <view class="sp-index__boxes">
            <view class="sp-index__title">
                <text class="sp-index__title-main">推荐书单</text>
                <text class="sp-index__title-more" @click="jumpTo('pages/book/series')">更多&gt;</text>
            </view>
            <scroll-view :scroll-x="true" class="sp-index__hot">
                <view class="sp-index__hot-item" v-for="(item, $index) in info.book_menu" :key="$index" @click="jumpTo('pages/book/list?id=' + item.id)">
                    <view class="sp-index__hot-back"></view>
                    <view class="sp-index__hot-pics">
                        <image v-for="(book, $book) in item.book_list" :key="$book" :src="book.book_img"></image>
                    </view>
                    <view class="sp-index__hot-info">{{ item.menu_name }}</view>
                </view>
            </scroll-view>
        </view>
        
        <!-- 系列精品 -->
        <view class="sp-index__boxes">
            <view class="sp-index__title">
                <text class="sp-index__title-main">系列精品</text>
            </view>
            <view class="sp-index__list">
                <view class="sp-index__list-item" v-for="item in info.book_series" :key="item.id" @click="jumpTo('pages/book/series?id=' + item.id)">
                    <view class="sp-index__list-info">
                        <text>{{ item.series_name }}</text>
                        <text>{{ item.series_synopsis }}</text>
                    </view>
                    <view class="sp-index__list-pics">
                        <image :src="item.series_img"></image>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 推荐图书 -->
        <view class="sp-index__boxes">
            <view class="sp-index__title">
                <text class="sp-index__title-main">推荐图书</text>
            </view>
            <view class="sp-index__goods">
                <sp-goods v-for="(item, $index) in info.books" :key="$index" :index="$index" :info="item" />
            </view>
        </view>
        <!-- <section class="sp-groods__row sp-index__goods">
            <sp-goods />
        </section> -->
        
        <!-- 用户信息 -->
        <view class="sp-index__user" v-if="showUsers && !info.users || info.users.age == 0">
            <view class="sp-index__user-content">
                <view class="sp-index__user-icon"></view>
                <image src="../../static/images/index/back.png" mode="widthFix"></image>
                <view class="sp-index__user-title">填写宝贝信息</view>
                <view class="sp-index__user-form">
                    <view class="sp-index__user-item">
                        <label>宝贝昵称</label>
                        <input type="text" placeholder="请输入宝贝昵称" v-model="user.username">
                    </view>
                    <view class="sp-index__user-item">
                        <label>宝贝性别</label>
                        <view class="sp-index__user-sex">
                            <view
                                class="sp-index__user-man"
                                :class="{ 'active': user.sex == '男' }"
                                @click="() => { user.sex = '男' }"
                            ></view>
                            <view
                                class="sp-index__user-woman"
                                :class="{ 'active': user.sex == '女' }"
                                @click="() => { user.sex = '女' }"
                            ></view>
                        </view>
                    </view>
                    <view class="sp-index__user-item">
                        <label>宝贝年龄</label>
                        <input type="text" placeholder="请输入宝贝年龄" v-model="user.age">
                    </view>
                    <view class="sp-index__user-type">
                        <label>喜欢的图书类型</label>
                        <view class="sp-index__user-classify">
                            <text
                                v-for="(item, $index) in navs"
                                :key="$index"
                                :class="{ 'checked': item.checked }"
                                @click="setNavsChecked($index)"
                            >{{ item.class_name }}</text>
                        </view>
                    </view>
                </view>
                <view class="sp-index__user-button" @click="saveUserInfo">完成</view>
            </view>
        </view>
        
        <!-- 碳层 -->
        <view class="sp-index__mask" v-if="showPopup">
            <view class="sp-index__mask-image">
                <image :src="info.index_img.index_popup" @click="toPopupDetail"></image>
                <view class="sp-index__mask-close" @click="closePopup"></view>
            </view>
        </view>
        
        <!-- fixed 客服 -->
        <sp-contact />
        
        <!-- 登录  -->
        <u-popup v-model="show" mode="bottom" borderRadius="24" :closeable="true">
            <sp-login v-if="!isUser" @complete="getLoginComplete" />
        </u-popup>
    </view>
</template>

<script>
    export default {
        name: 'MemberIndex',
        data () {
            return {
                show: false,
                info: {},
                isUser: true,
                swiper: {
                    indicatorDots: true,
                    autoplay: true,
                    interval: 2000,
                    duration: 500
                },
                navs: [],
                user: {
                    username: '',
                    sex: '',
                    age: '',
                    id: ''
                },
                showUsers: false,
                showPopup: false
            }
        },
        onLoad () {
            // this.setLogin()
        },
        onShow () {
            // this.getInitData()
            const userId = uni.getStorageSync('userId')
            this.isUser = userId ? true : false
            this.show = userId ? false : true
            if (this.isUser) {
                this.getInitData(userId)
            }
            this.getCategory()
            setTimeout(() => {
                this.showPopup = uni.getStorageSync('showPopup') ? uni.getStorageSync('showPopup') : false
            }, 500)
        },
        created () {},
        mounted () {
        },
        methods: {
            // 点击年龄跳转
            setCategory (index) {
                uni.setStorageSync('ageIndex', index)
                uni.switchTab({
                    url: '/pages/book/category'
                })
            },
            // popup跳转
            toPopupDetail () {
                uni.navigateTo({
                    url: this.info.index_img.index_popup_url
                })
            },
            // 关闭popup
            closePopup () {
                this.showPopup = false
                uni.setStorageSync('showPopup', false)
            },
            // 保存
            async saveUserInfo() {
                const params = this.user
                params.book_interest = this.navs.filter(item => item.checked).map(item => item.id)
                if (params.username === '') {
                    this.$u.toast('请填写宝宝昵称')
                    return false
                }
                if (params.sex === '') {
                    this.$u.toast('请选择宝宝性别')
                    return false
                }
                if (params.age === '') {
                    this.$u.toast('请选择宝宝年龄')
                    return false
                }
                if (params.book_interest === '') {
                    this.$u.toast('请选择图书类型')
                    return false
                }
                const userId = uni.getStorageSync('userId')
                params.user_id = userId
                delete params.id
                const { code, data } = await this.$u.api.IndexApi.setModalInfo(params)
                console.log('saveUsers', code, data)
                if (code === 200) {
                    const userId = uni.getStorageSync('userId') 
                    this.getInitData(userId)
                }
            },
            // 获取1级分类
            async getCategory () {
                const { code, data } = await this.$u.api.IndexApi.getFirsetCategory()
                if (code === 200) {
                    this.navs = data.first_class.map(item => {
                        item.checked = false
                        return item
                    })
                }
            },
            setNavsChecked(index) {
                this.navs[index].checked = !this.navs[index].checked
            },
            jumpTo(val) {
                this.$u.route(val)
            },
            // 跳转到书籍详情
            jumpToDetail (item) {
                // "join_type": 1, // 0=不关联,1=书籍详情,2=推荐书单详情,3=系列精品详情,4=推广页面
                if (item.join_type == 0 || item.book_id == 0) {
                    return false
                } else if (item.join_type == 1) {
                    uni.navigateTo({
                        url: '/pages/book/detail?id=' + item.book_id
                    })
                } else if (item.join_type == 2) {
                    uni.navigateTo({
                        url: '/pages/book/list?id=' + item.book_id
                    })
                } else if (item.join_type == 3) {
                    uni.navigateTo({
                        url: '/pages/book/series?id=' + item.book_id
                    })
                } else if (item.join_type == 4) {
                    uni.navigateTo({
                        url: '/pages/mine/qrcodeExtension'
                    })
                } else {
                    return false
                }
            },
            // 出发获取首页
            getLoginComplete () {
                const userId = uni.getStorageSync('userId') 
                this.isUser = userId ? true : false
                this.show = userId ? false : true
                // this.isUser = true
                this.getInitData(userId)
            },
            // 获取首页信息
            async getInitData (id) {
                const { code, data } = await this.$u.api.IndexApi.getIndexInfo(id)
                if (code === 200) {
                    this.info = data
                    this.showUsers = this.info.users.age == 0
                    this.showPopup = this.info.users.age < 1
                }
            }
        },
        onShareAppMessage () {}
    }

相关文章:

儿童绘本馆图书借阅租赁知识付费小程序源码交流

1.分类图书 2.书单推荐 4.会员卡次、期限购买 5.借阅时间选择 6.积分签到 7.优惠Q领取 前端uniapp开发 后端thinkphp开发 完全开源 <template> <view class"sp-section sp-index"> <!-- search --> <view class&qu…...

Vue3 中 axios 的安装及使用

目录前言&#xff1a;一、什么是 axios &#xff1f;二、Axios 的配置项三、Axios 的请求方式四、自定义创建实例五、Axios 请求错误处理六、Axios 解决跨域问题七、Axios 请求案例随机笑话大全总结&#xff1a;前言&#xff1a; 在编写vue里的项目时&#xff0c;必须要用和后台…...

Django设计模式以及模板层介绍

MVC和MTV 传统的MVC作用&#xff1a;降低模块间的耦合度&#xff08;解耦&#xff09;Django的MTV模式 作用&#xff1a;降低模块间的耦合度&#xff08;解耦&#xff09;什么是模板 1、模板是可以根据字典数据动态变化的html网页2、模板可以根据视图中传递的字典数据动态生成相…...

Linux信号一门搞定

1.信号是什么&#xff1f; 信号其实就是一个软件中断。 例&#xff1a; 输入命令&#xff0c;在Shell下启动一个前台进程。用户按下Ctrl-C&#xff0c;键盘输入产生一个硬件中断。如果CPU当前正在执行这个进程的代码&#xff0c;则该进程的用户空间代码暂停执行&#xff0c;…...

手撸一个动态Feign,实现一个“万能”接口调用

Feign&#xff0c;在微服务框架中&#xff0c;是的服务直接的调用变得很简洁、简单&#xff0c;而不需要再编写Java Http调用其他微服务的接口。 动态feign 对于fegin调用&#xff0c;我们一般的用法&#xff1a;为每个微服务都创建对应的feignclient接口&#xff0c;然后为每…...

Linux Capabilities 入门

目录 Linux capabilities 是什么&#xff1f; capabilities 的赋予和继承 线程的 capabilities Permitted Effective Inheritable Bounding Ambient 文件的 capabilities Permitted Inheritable Effective 运行 execve() 后 capabilities 的变化 案例 Linux capab…...

驱动 day6

关于设备树的理解&#xff1a; 设备树&#xff08;Device Tree&#xff09;是一种用于特定硬件设备的解释语法树。它用来表示存储有关主板硬件和CPU架构信息的数据在内核中的传递格式&#xff0c;使内核可以更好地了解硬件并支持它们&#xff0c;而不必编写固定的代码。设备节点…...

附录2-tensorflow目标检测

源码来自作者Bubbliiiing&#xff0c;我对参考链接的代码略有修改&#xff0c;网盘地址 链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;dvb1 目录 1 参考链接 2 环境 3 数据集准备 3.1 VOCdevkit/VOC2007 3.2 model_data/voc_classes.txt 3.3 voc_an…...

常见的EMC问题

电磁兼容设计的目的就在于满足产品功能要求、减少调试时间&#xff0c;使产品满足电磁兼容标准的要求&#xff0c;并且使产品不会对系统中的其它设备产生电磁干扰。 电磁兼容设计中常见的问题有哪些&#xff1f; 1、电磁兼容设计可以从电路设计&#xff08;包括器件选择&…...

Redis内存存储效率问题

目录 内存碎片是如何形成的&#xff1f; 如何判断是否有内存碎片&#xff1f; 如何清理内存碎片&#xff1f; INFO命令 面向 Prometheus 的 Redis-exporter 监控 实习期间&#xff0c;了解到&#xff0c;企业级开发中多个项目使用Redis&#xff0c;运行Redis实例的有可能是…...

3.28 haas506 2.0开发教程-example-蓝牙多设备扫描(仅支持M320,HD1)

haas506 2.0开发教程-example-蓝牙多设备扫描案例说明蓝牙信息克隆1.手机蓝牙改名信息克隆代码测试案例说明 开发板扫描蓝牙设备&#xff0c;获取并打印蓝牙设备mac地址。mac地址每个设备不同&#xff0c;且不能更改。本案例仅适用于M320开发板和HD1-RTU。案例使用手机与iBeac…...

C语言经典编程题100例(41~60)

目录41、习题4-4 特殊a串数列求和42、习题4-6 水仙花数43、习题4-7 最大公约数和最小公倍数44、习题7-5 找鞍点45、练习5-1 求m到n之和46、练习5-2 找两个数中最大者47、练习5-3 数字金字塔48、习题5-1 符号函数49、习题5-2 使用函数求奇数和50、习题5-3 使用函数计算两点间的距…...

git日常使用命令

实习这段时间使用了很多git指令来提交代码&#xff0c;简单记录一下日常使用的指令&#xff1a; 提交代码通常顺序&#xff1a; 1.git status 查看本地修改项 2.git add . 提交全部文件 &#xff08;这个 .是全部文件&#xff09;到暂存区 3.git commit -m ‘本次提交的说明’…...

ES6对象展开运算符浅拷贝or深拷贝

ES6中提出的对象展开运算符“…”就是用来展开元素的。有了它就不用代码循环遍历了&#xff0c;偷懒专用。 1. 合并数组 展开原有数组中的所有元素&#xff0c;可以合并成一个新的数组。 var a[1,2,3]; var b[4,5,6]; var c[...a,...b]; console.log(c) // 输出&#xff1a;…...

leaflet 上传包含shp的zip文件,在map上解析显示图形(059)

第059个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中本地上传包含shp的zip文件,利用shapefile读取shp数据,并在地图上显示图形。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 文章目录 示例效果加载shapefile.js方式安装引用jszip(…...

CAN总线详细介绍

1.1 CAN是什么&#xff1f; CAN 最终成为国际标准 &#xff08; ISO11898(高速应用)和 ISO11519&#xff08;低速应用&#xff09;&#xff09;&#xff0c;是国际上应用最广泛的现场总线之一。 1.2 CAN总线特点 多主方式: 可以多主方式工作&#xff0c;网络上任意一个节点…...

python如何完成对 Excel文件的解密后读取?

通常为了防止重要的Excel文件数据内容的泄露&#xff0c;需要对文件整体进行加密与解密的操作。 对于文件的加解密过程&#xff0c;python也有很多非标准库来帮助我们完成操作&#xff0c;这里主要说明如何完成对Excel文件的解密与读取操作。 这里我们使用到的是msoffcrypto-…...

微服务实战--高级篇:RabbitMQ高级

服务异步通信-高级篇 消息队列在使用过程中&#xff0c;面临着很多实际问题需要思考&#xff1a; 1.消息可靠性 消息从发送&#xff0c;到消费者接收&#xff0c;会经理多个过程&#xff1a; 其中的每一步都可能导致消息丢失&#xff0c;常见的丢失原因包括&#xff1a; 发送…...

autoCAD2022 - 设置新的原点

文章目录autoCAD2022 - 设置新的原点概述笔记UCS原点设置功能的菜单位置ENDautoCAD2022 - 设置新的原点 概述 上次整板子的dxf时, 原来的原点不合适, 想调整一下. 当时整完了, 没记录. 这次用的时候, 又找半天… 设置新原点的功能, 不在顶部菜单中, 而是在视图右上角的UCS图标…...

spring boot 配置 mybatis-plus多数据源

简介Mybatis-puls 多数据源的使用&#xff0c;采用的是官方提供的dynamic-datasource-spring-boot-starter包的 DS 注解&#xff0c;具体可以参考官网&#xff1a;https://gitee.com/baomidou/dynamic-datasource-spring-boot-starterpom.xml文件引入如下依赖主要引入dynamic-d…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画!!!

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

实战设计模式之模板方法模式

概述 模板方法模式定义了一个操作中的算法骨架&#xff0c;并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下&#xff0c;重新定义算法中的某些步骤。简单来说&#xff0c;就是在一个方法中定义了要执行的步骤顺序或算法框架&#xff0c;但允许子类…...