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

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 () {}
    }