儿童绘本馆图书借阅租赁知识付费小程序源码交流
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')">更多></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 () {}
}