1
This commit is contained in:
@fawn-nine
829
pages/peanut/bookshelf.vue
Normal file
829
pages/peanut/bookshelf.vue
Normal file
@@ -0,0 +1,829 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<public-module></public-module>
|
||||
<z-nav-bar backState="2000" title="我的书架"></z-nav-bar>
|
||||
|
||||
<view v-if="this.bookData.length==0" style="margin-top: 250rpx;text-align: center;font-size: 30rpx;">暂无书籍</view>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<view class="more-shade" v-if="moreOff" @click.stop="moreOff = false">
|
||||
<view class="more">
|
||||
<view class="more-list more-underline" @click.stop="examine">查看详情</view>
|
||||
<view class="more-list more-underline remove" @click.stop="shiftOut">移出</view>
|
||||
<view class="more-list" @click.stop="moreOff =false">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bookrack-body" :class="{'bookrack-active' :checkboOff}">
|
||||
<view class="book-top">
|
||||
<view class="top-left" v-if="this.bookData.length!=0">
|
||||
<view class="top-btn" v-if="!checkboOff" @click="managementBtn">
|
||||
<view>管理</view>
|
||||
</view>
|
||||
<view class="top-btn" v-if="checkboOff" @click="accomplish">
|
||||
完成
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜索按钮 -->
|
||||
<!-- <view class="top-right">
|
||||
<view class="input-cancel" v-if="searchOff">
|
||||
<view class="cancel-left">
|
||||
<input class="uni-input" confirm-type="search" maxlength="50" placeholder="请输入关键词搜索" />
|
||||
|
||||
</view>
|
||||
<view class="cancel-right">
|
||||
<view class="top-btn" @click="cancelBtn">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="top-btn" v-if="!checkboOff && !searchOff" @click="searchBtn">
|
||||
|
||||
<span class="icon_search"></span>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="book-rack">
|
||||
<view style="text-align: right;font-size: 28rpx;margin: 20rpx;color: #5a5a5a;">共{{bookData.length}}本</view>
|
||||
<view class="book-card" v-for="(item,index) in bookData" :key="index"
|
||||
@click="bookCardBtn($event,index,'bookHeight' + index,item)" @longtap="managementBtn"
|
||||
ref="bookcard">
|
||||
<view class="book-checkbox" v-if="checkboOff">
|
||||
<view class="checkboxcard" :class="{'checkboxactiva':item.checked}">
|
||||
<view v-if="item.checked" class="check"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="image-text" :id="'bookHeight' + index">
|
||||
<view class="ripple" v-if="index == bookNum" :style="{ top: leftY + 'px', left: topX + 'px' }">
|
||||
</view>
|
||||
<view class="book-left">
|
||||
<image class="book-img" :src="item.image"></image>
|
||||
</view>
|
||||
<view class="book-right">
|
||||
<view class="flex book-text">
|
||||
<view class="head">{{item.bookName}}</view>
|
||||
<view class="author">{{item.authorName}} [著]</view>
|
||||
<view class="schedule">
|
||||
<view class="schedule-text">已读 {{item.precent}}</view>
|
||||
<view class="book-icon" v-if="!checkboOff">
|
||||
<i class="iconfont omit" @click.stop="omitBtn(index,item.bookShelfId)"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<!-- 底下悬浮窗口 -->
|
||||
<view class="book-bottom" v-if="checkboOff">
|
||||
<view class="bottom-box">
|
||||
<view class="bottom-box-left">
|
||||
<view class="top-btn" v-if="checkboOff && !checkAllOff" @click="checkAll">
|
||||
<view>全选</view>
|
||||
</view>
|
||||
<view class="top-btn" v-if="checkboOff && checkAllOff" @click="checkNooAll">
|
||||
<view>全不选</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-box-right">
|
||||
<view class="top-btn" @click="deleteBtn">
|
||||
<view>移出书架({{selection.length}})</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<z-navigation></z-navigation>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bookNum: null, //
|
||||
topX: '', //x轴
|
||||
leftY: '', //y轴
|
||||
selection: [], //多选
|
||||
checkboOff: false, //显示多选开关
|
||||
checkAllOff: false, //全选全不选
|
||||
searchOff: false, //搜索
|
||||
moreOff: false, //更多弹窗开关
|
||||
moreId: '', //移除书籍ID
|
||||
bookData: [],
|
||||
bokMesDet:{}
|
||||
};
|
||||
},
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
// 隐藏原生的tabbar
|
||||
uni.hideTabBar();
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo'])
|
||||
},
|
||||
//页面显示
|
||||
onShow() {
|
||||
// 隐藏原生的tabbar
|
||||
uni.hideTabBar();
|
||||
this.getData();
|
||||
},
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.getData()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
getData() {
|
||||
this.bokMesDet.userId = this.userInfo.id
|
||||
|
||||
// 获取输家 列表
|
||||
this.$http
|
||||
.post('book/bookshelf/getUserBookshelf', {
|
||||
'userId': this.userInfo.id
|
||||
})
|
||||
.then(res => {
|
||||
this.bookData = res.userBookshelf
|
||||
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
bookCardBtn(e, value, id) { //卡片点击按钮
|
||||
//清空遗留数据
|
||||
this.bookNum = null
|
||||
this.topX = null
|
||||
this.leftY = null
|
||||
//开始脑残逻辑
|
||||
this.bookNum = value //第几个波纹效果显示
|
||||
this.topX = e.detail.x //获取相对于屏幕X轴坐标，并赋值
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('#' + id).boundingClientRect(data => {
|
||||
let cardT = JSON.stringify(data.top) //获取点击容器到顶距离
|
||||
let cardY = e.detail.y //获取相对于屏幕y轴坐标，并赋值
|
||||
this.leftY = Number(cardY) - Number(cardT) //计算容器内点击Y轴坐标
|
||||
}).exec();
|
||||
if (this.checkboOff == true) { //多选状态下的事件
|
||||
this.selection = []
|
||||
this.topX = e.detail.x - 44
|
||||
this.bookData[value].checked = !this.bookData[value].checked
|
||||
this.bookData.forEach(item => {
|
||||
if (item.checked === true) {
|
||||
this.selection.push(item.bookShelfId) //ID值，根据开发自定义 与上面checkbox的value绑定值相同
|
||||
}
|
||||
})
|
||||
if (this.selection.length == this.bookData.length) {
|
||||
this.checkAllOff = true
|
||||
} else if (this.selection.length < this.bookData.length) {
|
||||
this.checkAllOff = false
|
||||
}
|
||||
} else { //非多选状态下的事件
|
||||
const that = this;
|
||||
that.bokMesDet.id = that.bookData[value].bookShelfId
|
||||
that.bokMesDet.bookId = that.bookData[value].bookid
|
||||
|
||||
// 加入阅读记录
|
||||
$http.request({
|
||||
url: "book/bookshelf/update",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data: that.bokMesDet,
|
||||
header: { //默认 无 说明：请求头
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(function(res) {
|
||||
if (res.code == 0) {
|
||||
// 跳转页面
|
||||
let chaId = 0
|
||||
if (that.bookData[value].chapterNum != null) {
|
||||
chaId = that.bookData[value].chapterNum-1
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '../yRead/angbook?Id=' + that.bookData[value].bookid + '&cha=' + chaId
|
||||
});
|
||||
}
|
||||
}).catch(function(error) {
|
||||
//这里只会在接口是失败状态返回，不需要去处理错误提示
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
//去TM的安卓APP、苹果APP、微信小程序、微信网页、H5的全兼容，具体兼容那些版本我不测了。
|
||||
},
|
||||
managementBtn() { //管理按钮，打开多选和删除。
|
||||
this.selection = []
|
||||
this.checkboOff = true
|
||||
this.bookData.forEach(item => {
|
||||
this.$set(item, 'checked', false)
|
||||
})
|
||||
},
|
||||
checkAll() { //全选按钮
|
||||
//清空缓存
|
||||
this.selection = []
|
||||
//全选全不选显示切换
|
||||
this.checkAllOff = !this.checkAllOff
|
||||
//遍历数组
|
||||
this.bookData.forEach(item => {
|
||||
//新增属性
|
||||
this.$set(item, 'checked', true)
|
||||
this.selection.push(item.bookShelfId) //ID值，根据开发自定义 与上面checkbox的value绑定值相同
|
||||
|
||||
})
|
||||
console.log(this.selection)
|
||||
},
|
||||
checkNooAll() { //全不选按钮
|
||||
//清空缓存
|
||||
this.selection = []
|
||||
//全选全不选显示切换
|
||||
this.checkAllOff = !this.checkAllOff
|
||||
//遍历数组
|
||||
this.bookData.forEach(item => {
|
||||
this.$set(item, 'checked', false)
|
||||
})
|
||||
console.log(this.selection)
|
||||
},
|
||||
omitBtn(value, id) { //更多，打开针对单个的删除处理。
|
||||
console.log('你点了第' + value + '个更多，id为' + id)
|
||||
this.moreId = ''
|
||||
this.moreId = id
|
||||
this.moreOff = true
|
||||
},
|
||||
deleteBtn() { //移出书架按钮
|
||||
const that = this;
|
||||
if (that.selection.length > 0) {
|
||||
$http.request({
|
||||
url: "book/bookshelf/delete",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data: that.selection,
|
||||
header: { //默认 无 说明：请求头
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(function(res) {
|
||||
console.log(res)
|
||||
if (res.code == 0) {
|
||||
that.getData();
|
||||
|
||||
uni.showToast({
|
||||
title: '移出书架成功！'
|
||||
})
|
||||
//移除书架后缓存清空复位
|
||||
that.selection = []
|
||||
that.checkboOff = false
|
||||
that.checkAllOff = false
|
||||
}
|
||||
}).catch(function(error) {
|
||||
//这里只会在接口是失败状态返回，不需要去处理错误提示
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
} else {
|
||||
|
||||
}
|
||||
},
|
||||
searchBtn() { //搜索按钮
|
||||
this.searchOff = true
|
||||
},
|
||||
cancelBtn() { //取消按钮
|
||||
// 清空复位
|
||||
this.searchOff = false
|
||||
this.selection = []
|
||||
this.checkboOff = false
|
||||
this.checkAllOff = false
|
||||
},
|
||||
accomplish() { //完成按钮
|
||||
// 清空复位
|
||||
this.searchOff = false
|
||||
this.selection = []
|
||||
this.checkboOff = false
|
||||
this.checkAllOff = false
|
||||
},
|
||||
examine() { //查看详情
|
||||
this.moreOff = false
|
||||
console.log('你查看了ID为' + this.moreId + '的书籍详情')
|
||||
},
|
||||
shiftOut() { //移出按钮
|
||||
this.moreOff = false
|
||||
console.log('你移出了ID为' + this.moreId + '的书籍')
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
|
||||
$bookTop:46px;
|
||||
$bookCardHeight:200upx;
|
||||
$second: 0.6s;
|
||||
|
||||
.bookrack-body {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
/* #ifdef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: $navHeight;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.book-top {
|
||||
height: $bookTop;
|
||||
display: flex;
|
||||
// border-bottom: 1px solid $brimColor;
|
||||
padding: 0 20upx;
|
||||
// background-color: #fff;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
top: 130upx;
|
||||
|
||||
.top-left {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
line-height: $bookTop;
|
||||
color: $dominantHue;
|
||||
max-width: 100upx;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
flex: 1;
|
||||
line-height: $bookTop;
|
||||
text-align: right;
|
||||
color: $mediumGrey;
|
||||
}
|
||||
}
|
||||
|
||||
.book-rack::-webkit-scrollbar {
|
||||
display: none
|
||||
}
|
||||
|
||||
.book-rack {
|
||||
padding-top: $bookTop+20;
|
||||
|
||||
.uni-radio-group uni-label,
|
||||
uni-checkbox-group uni-label {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.book-card {
|
||||
display: flex;
|
||||
|
||||
.book-checkbox {
|
||||
flex: 1;
|
||||
line-height: $bookCardHeight;
|
||||
padding: 10px 0 10px $bleed;
|
||||
min-width: 88upx;
|
||||
max-width: 88upx;
|
||||
box-sizing: border-box;
|
||||
animation: book-interaction 0.1s;
|
||||
}
|
||||
|
||||
@keyframes book-interaction {
|
||||
0% {
|
||||
min-width: 0upx;
|
||||
max-width: 0upx;
|
||||
}
|
||||
|
||||
100% {
|
||||
min-width: 88upx;
|
||||
max-width: 88upx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-text {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
height: $bookCardHeight + 40upx;
|
||||
padding: 10px $bleed 10px $bleed;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
||||
|
||||
|
||||
.book-left {
|
||||
flex: 1;
|
||||
min-width: 170upx;
|
||||
max-width: 170upx;
|
||||
height: $bookCardHeight;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
.book-img {
|
||||
width: 150upx;
|
||||
height: $bookCardHeight;
|
||||
border-radius: 8upx;
|
||||
overflow: auto;
|
||||
background-color: $skeletonColor;
|
||||
}
|
||||
}
|
||||
|
||||
.book-right {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: $bookCardHeight;
|
||||
z-index: 10;
|
||||
|
||||
.book-text {
|
||||
padding: 4upx 0;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.head {
|
||||
font-weight: bold;
|
||||
font-size: 30upx;
|
||||
height: 32upx;
|
||||
line-height: 32upx;
|
||||
color: $blackAll;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.author {
|
||||
padding-top: 24upx;
|
||||
font-size: 28upx;
|
||||
color: $mediumGrey;
|
||||
height: calc(100% - 8upx - 24upx - 28upx);
|
||||
}
|
||||
|
||||
.schedule {
|
||||
line-height: 28upx;
|
||||
height: 28upx;
|
||||
display: flex;
|
||||
|
||||
.schedule-text {
|
||||
flex: 1;
|
||||
font-size: 28upx;
|
||||
color: $mediumGrey;
|
||||
}
|
||||
|
||||
.book-icon {
|
||||
flex: 1;
|
||||
min-width: 55upx;
|
||||
max-width: 55upx;
|
||||
text-align: right;
|
||||
|
||||
.omit {
|
||||
font-size: 40upx;
|
||||
line-height: 28upx;
|
||||
color: $lightGray;
|
||||
padding: 10upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-btn {
|
||||
height: 48upx;
|
||||
line-height: 30upx;
|
||||
padding: 0upx 12upx;
|
||||
font-size: 28upx;
|
||||
display: inline-block;
|
||||
color: #54a966;
|
||||
font-weight: bold;
|
||||
margin-top: 14px;
|
||||
|
||||
.icon_search {
|
||||
background-image: url('@/static/icon/map_ic_search.png');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
width: 35upx;
|
||||
height: 33upx;
|
||||
margin-right: 20upx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.top-btn:active {
|
||||
background-color: $rippleBg;
|
||||
}
|
||||
|
||||
//波纹效果
|
||||
.ripple {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
z-index: -5;
|
||||
background-color: $rippleBg;
|
||||
box-shadow: 0 0 0px 500px $rippleBg;
|
||||
border-radius: 50%;
|
||||
animation: myfirst $second;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@keyframes myfirst {
|
||||
from {
|
||||
box-shadow: 0 0 0px 30px $rippleBg;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
box-shadow: 0 0 0px 500px $rippleBg;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
// 底部悬浮
|
||||
.book-bottom {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 50rpx;
|
||||
right: 0;
|
||||
height: $navHeight + 30px;
|
||||
background-color: #fff;
|
||||
z-index: 110;
|
||||
border-top: 1px solid $brimColor;
|
||||
|
||||
.bottom-box {
|
||||
height: $navHeight+30px;
|
||||
padding: 0 15upx;
|
||||
line-height: $navHeight;
|
||||
color: $dominantHue;
|
||||
display: flex;
|
||||
|
||||
.bottom-box-left {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bottom-box-right {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//复选框 原生的处理起来有点难
|
||||
.checkboxcard {
|
||||
width: 38upx;
|
||||
height: 38upx;
|
||||
border-radius: 8upx;
|
||||
border: 1px solid #DCDFE6;
|
||||
margin-top: calc(100upx - 20upx)
|
||||
}
|
||||
|
||||
.checkboxactiva {
|
||||
border: 1px solid $dominantHue;
|
||||
box-shadow: 0 0 2px rgba(0, 134, 231, 0.5);
|
||||
}
|
||||
|
||||
.check {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.check::after {
|
||||
margin-top: -6upx;
|
||||
width: 6px;
|
||||
height: 12px;
|
||||
border-style: solid;
|
||||
border-color: $dominantHue;
|
||||
border-width: 0 2px 2px 0;
|
||||
-webkit-transform: rotateZ(45deg);
|
||||
content: " ";
|
||||
animation: check-interaction 0.1s;
|
||||
}
|
||||
|
||||
@keyframes check-interaction {
|
||||
0% {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
margin-top: -6upx;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
35% {
|
||||
width: 6px;
|
||||
height: 0px;
|
||||
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 12px;
|
||||
margin-top: -6upx;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.input-cancel {
|
||||
display: flex;
|
||||
|
||||
.cancel-left {
|
||||
flex: 1;
|
||||
|
||||
.uni-input {
|
||||
line-height: 36px;
|
||||
height: 36px;
|
||||
font-size: 28upx;
|
||||
margin-top: calc((46px - 36px) / 2);
|
||||
background-color: #f4f4f4;
|
||||
border-radius: 8upx;
|
||||
padding: 0 20upx;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-right {
|
||||
flex: 1;
|
||||
max-width: 85upx;
|
||||
min-width: 85upx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.search-activa {
|
||||
z-index: 30;
|
||||
top: 20px;
|
||||
// bottom: 0px;
|
||||
animation: search-interaction 0.2s;
|
||||
}
|
||||
|
||||
.subject {
|
||||
transition: top 0.2s;
|
||||
}
|
||||
|
||||
@keyframes search-interaction {
|
||||
0% {
|
||||
top: $barHeight + 10px;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.more-shade {
|
||||
position: fixed;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.more {
|
||||
position: fixed;
|
||||
top: calc((100% - 300upx) / 2);
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
background-color: #fff;
|
||||
border-radius: 4upx;
|
||||
|
||||
.more-list {
|
||||
height: 100upx;
|
||||
line-height: 100upx;
|
||||
font-size: 30upx;
|
||||
padding: 0 40upx;
|
||||
color: $dominantHue;
|
||||
}
|
||||
|
||||
.more-underline {
|
||||
border-bottom: 1px solid #F1F1F1;
|
||||
}
|
||||
|
||||
.remove {
|
||||
color: $redAll;
|
||||
}
|
||||
}
|
||||
|
||||
.bookrack-active {
|
||||
bottom: $navHeight + 12px;
|
||||
}
|
||||
|
||||
/*苹果x适配 H5APP*/
|
||||
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
|
||||
.book-bottom {
|
||||
height: $navHeight + $navBoxHeight + 55px;
|
||||
}
|
||||
|
||||
.bookrack-body {
|
||||
top: 0;
|
||||
bottom: $navHeight + $navBoxHeight;
|
||||
/* #ifdef H5 */
|
||||
top: 0;
|
||||
bottom: $navHeight;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.bookrack-active {
|
||||
bottom: $navHeight + $navBoxHeight + 12px;
|
||||
}
|
||||
|
||||
|
||||
.search-activa {
|
||||
z-index: 30;
|
||||
top: $barHeight;
|
||||
animation: search-interaction 0.2s;
|
||||
}
|
||||
|
||||
@keyframes search-interaction {
|
||||
0% {
|
||||
top: $barHeight + $barTopHeight;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: $barHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*苹果xs适配 H5APP*/
|
||||
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
|
||||
.book-bottom {
|
||||
height: $navHeight + $navBoxHeight + 55px;
|
||||
}
|
||||
|
||||
.bookrack-body {
|
||||
top: 0;
|
||||
bottom: $navHeight + $navBoxHeight;
|
||||
/* #ifdef H5 */
|
||||
top: 0;
|
||||
bottom: $navHeight;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.bookrack-active {
|
||||
bottom: $navHeight + $navBoxHeight + 12px;
|
||||
}
|
||||
|
||||
|
||||
.search-activa {
|
||||
z-index: 30;
|
||||
top: $barHeight;
|
||||
animation: search-interaction 0.2s;
|
||||
}
|
||||
|
||||
@keyframes search-interaction {
|
||||
0% {
|
||||
top: $barHeight + $barTopHeight;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: $barHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*苹果xr适配 H5APP*/
|
||||
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
|
||||
.book-bottom {
|
||||
height: $navHeight + $navBoxHeight + 30px;
|
||||
}
|
||||
|
||||
.bookrack-body {
|
||||
top: 0;
|
||||
bottom: $navHeight + $navBoxHeight;
|
||||
/* #ifdef H5 */
|
||||
top: 0;
|
||||
bottom: $navHeight;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.bookrack-active {
|
||||
bottom: $navHeight + $navBoxHeight + 30px;
|
||||
}
|
||||
|
||||
.search-activa {
|
||||
z-index: 30;
|
||||
top: $barHeight;
|
||||
animation: search-interaction 0.2s;
|
||||
}
|
||||
|
||||
@keyframes search-interaction {
|
||||
0% {
|
||||
top: $barHeight + $barTopHeight;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: $barHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
735
pages/peanut/home.vue
Normal file
735
pages/peanut/home.vue
Normal file
@@ -0,0 +1,735 @@
|
||||
<template>
|
||||
<view style="font-size: 28upx;">
|
||||
<!-- <z-nav-bar backState="2000" title="首页"></z-nav-bar> -->
|
||||
<view class="home_bg">
|
||||
<image src="../../static/icon/home_icon_1.png" mode="aspectFit" class="icon_hua_1"></image>
|
||||
<view class="search_box" @click="onPageJump('./searchFor')">
|
||||
<text class="icon_search"></text>
|
||||
<text class="prompt">搜索...</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="home_nar">
|
||||
<view class="hn_cl_tit" @click="onPageJump('../eBook/bookList')">
|
||||
<image src="../../static/icon/home_bar_1.png" mode="aspectFit"></image>
|
||||
电子书
|
||||
</view>
|
||||
<!-- <view class="hn_cl_tit" @click="onPageJump('../bookShop/bookShopIndex')"> -->
|
||||
<view class="hn_cl_tit" @click="onPageJump('../bookShop/classify')">
|
||||
<image src="../../static/icon/home_bar_2.png" mode="aspectFit"></image>
|
||||
健康超市
|
||||
</view>
|
||||
<view class="hn_cl_tit" @click="onGoing()">
|
||||
<image src="../../static/icon/home_bar_3.png" mode="aspectFit"></image>
|
||||
讲书
|
||||
</view>
|
||||
<view class="hn_cl_tit" @click="onGoing()">
|
||||
<image src="../../static/icon/home_bar_4.png" mode="aspectFit"></image>
|
||||
论文集
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="home_lunbo">
|
||||
<u-swiper :list="list3" indicator indicatorMode="line" circular style="height: 180rpx;"></u-swiper>
|
||||
</view>
|
||||
|
||||
<view class="home_shujia">
|
||||
<view class="hn_sj" @click="onTabJump('./bookshelf')">
|
||||
<image src="../../static/icon/midBtn_01.png" mode="aspectFit"></image>
|
||||
我的书架
|
||||
</view>
|
||||
<!-- <view class="hn_sj">
|
||||
<image src="../../static/icon/midBtn_02.png" mode="aspectFit"></image>
|
||||
图书推荐
|
||||
</view> -->
|
||||
<view class="hn_sj" @click="onPageJumpData('../eBook/bookList',1)">
|
||||
<image src="../../static/icon/midBtn_03.png" mode="aspectFit"></image>
|
||||
医 学
|
||||
</view>
|
||||
<view class="hn_sj" @click="onPageJumpData('../eBook/bookList',2)">
|
||||
<image src="../../static/icon/midBtn_04.png" mode="aspectFit"></image>
|
||||
国 学
|
||||
</view>
|
||||
<view class="hn_sj" @click="onPageJumpData('../eBook/bookList',3)">
|
||||
<image src="../../static/icon/midBtn_05.png" mode="aspectFit"></image>
|
||||
文 学
|
||||
</view>
|
||||
<view class="hn_sj" @click="onPageJumpData('../eBook/bookList',4)">
|
||||
<image src="../../static/icon/midBtn_06.png" mode="aspectFit"></image>
|
||||
古 籍
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="head_line" v-if="seckillList!=null">
|
||||
<b></b>
|
||||
<text>商品秒杀</text>
|
||||
<i @click="onShopMore('Sale')">查看更多 ></i>
|
||||
</view>
|
||||
|
||||
<!-- 限时秒杀 -->
|
||||
<view class="limited" v-if="seckillList!=null">
|
||||
<view class="limitedSymbol">
|
||||
<image src="../../static/icon/shopping_xsh.png"></image>
|
||||
</view>
|
||||
<view class="limitedScrollBox">
|
||||
<u-scroll-list indicatorActiveColor="#27b386">
|
||||
<view class="limitedItem" v-for="(item,index) in seckillList" :key="index"
|
||||
@click="goDetail(item.prodInfo.productId)">
|
||||
<image :src="item.prodInfo.productImages" mode=""></image>
|
||||
<text class="biaoti">{{item.prodInfo.productName}}</text>
|
||||
<text class="xian">￥{{item.seckillPrice}}</text>
|
||||
<text class="yuan">￥{{item.prodInfo.price}}</text>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="head_line">
|
||||
<b></b>
|
||||
<text>新书上架</text>
|
||||
<i @click="onBookMore('New')">查看更多 ></i>
|
||||
</view>
|
||||
|
||||
<view class="home_xinshu">
|
||||
<view v-for="(item, index) in xinsList" @click="onBookJump(item)" v-if="index<3" class="hx_list">
|
||||
<image :src="item.image"></image>
|
||||
<view class="hx_title">{{item.bookName}}</view>
|
||||
<view class="hx_author">{{item.authorName}} [著]</view>
|
||||
<b v-if="item.isVip==1" style="background: #c79119;">VIP</b>
|
||||
<b v-if="item.isVip==2" style="background: #c74119;">付费</b>
|
||||
</view>
|
||||
<br clear='both'>
|
||||
<view v-for="(item, index) in xinsList" @click="onBookJump(item)" v-if="index>2&&index<6" class="hx_list">
|
||||
<image :src="item.image"></image>
|
||||
<view class="hx_title">{{item.bookName}}</view>
|
||||
<view class="hx_author">{{item.authorName}} [著]</view>
|
||||
<b v-if="item.isVip==1" style="background: #c79119;">VIP</b>
|
||||
<b v-if="item.isVip==2" style="background: #c74119;">付费</b>
|
||||
</view>
|
||||
<br clear='both'>
|
||||
</view>
|
||||
|
||||
<view class="head_line">
|
||||
<b></b>
|
||||
<text>限时特价</text>
|
||||
<i @click="onBookMore('Sale')">查看更多 ></i>
|
||||
</view>
|
||||
<view class="home_limit">
|
||||
<u-scroll-list indicatorActiveColor="#27b386">
|
||||
<view v-for="(item, index) in limiTist" :key="index" @click="onBookJump(item)" class="lt_list">
|
||||
<image :src="item.image"></image>
|
||||
<view class="lt_title">{{item.bookName}}</view>
|
||||
<view class="lt_author">{{item.authorName}} [著]</view>
|
||||
<view class="lt_yuan">{{item.price}}疯币</view>
|
||||
<view class="lt_xian">{{item.salePrice}}疯币</view>
|
||||
<b v-if="item.isVip==1" style="background: #c79119;">VIP</b>
|
||||
<b v-if="item.isVip==2" style="background: #c74119;">付费</b>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="head_line">
|
||||
<b></b>
|
||||
<text>精选书单</text>
|
||||
<i @click="onBookMore('Best')">查看更多 ></i>
|
||||
</view>
|
||||
<view class="home_jingxu">
|
||||
<view class="hj_hot" v-for="(item,index) in jingList" @click="onBookJump(item)">
|
||||
<view>
|
||||
<text class="bok_name">{{item.bookName}}</text>
|
||||
<text style="margin-left: 50rpx;" v-if="item.authorName!=''">{{item.authorName}}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="item.publisherName!=''">
|
||||
<text>出版社：{{item.publisherName}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>{{item.introduce | ellipsis}}</text>
|
||||
</view>
|
||||
<image :src="item.image"></image>
|
||||
<!-- <b v-if="item.isVip==0">免费</b> -->
|
||||
<b v-if="item.isVip==1" style="background: #c79119;">VIP</b>
|
||||
<b v-if="item.isVip==2" style="background: #c74119;">付费</b>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="head_line">
|
||||
<b></b>
|
||||
<text>精选商品</text>
|
||||
<i @click="onShopMore('Hot')">查看更多 ></i>
|
||||
</view>
|
||||
|
||||
<!-- 商品展示 -->
|
||||
<view class="goods">
|
||||
<view class="goodsItem" v-for="(item,index) in goodsList" :key="item.productId"
|
||||
@click="goDetail(item.productId)">
|
||||
<image :src="item.productImages" mode="" class="goodsImg"></image>
|
||||
<view class="goodsContent">
|
||||
<view class="goodsName">
|
||||
{{item.productName}}
|
||||
</view>
|
||||
<view class="goodsPrice">
|
||||
￥{{item.price}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<br clear="both">
|
||||
</view>
|
||||
|
||||
|
||||
<view>
|
||||
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
|
||||
</view>
|
||||
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<public-module></public-module>
|
||||
<z-navigation></z-navigation>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
list3: [
|
||||
'../../static/icon/home_ban_1.jpg',
|
||||
'../../static/icon/home_ban_2.jpg',
|
||||
'../../static/icon/home_ban_3.jpg',
|
||||
],
|
||||
xinsList: [],
|
||||
limiTist: [],
|
||||
jingList: [],
|
||||
seckillList: [],
|
||||
goodsList: [],
|
||||
bgiStyle: {
|
||||
background: '#2ab58833'
|
||||
},
|
||||
iconStyle: {
|
||||
fontSize: '40rpx',
|
||||
fontWeight: 'bold',
|
||||
color: '#54a966',
|
||||
},
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
},
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
// 隐藏原生的tabbar
|
||||
uni.hideTabBar();
|
||||
},
|
||||
//页面显示
|
||||
onShow() {
|
||||
// 隐藏原生的tabbar
|
||||
uni.hideTabBar();
|
||||
this.getData();
|
||||
},
|
||||
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.getData()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
|
||||
|
||||
filters: {
|
||||
// 控制字数
|
||||
ellipsis(value) {
|
||||
if (!value) return '';
|
||||
let reg = /[\u4e00-\u9fa5]/g;
|
||||
let names = value.match(reg);
|
||||
value = names ? names.join('') : '';
|
||||
if (value.length > 50) {
|
||||
return value.slice(0, 50) + '...'
|
||||
}
|
||||
return value
|
||||
},
|
||||
},
|
||||
|
||||
//方法
|
||||
methods: {
|
||||
// 获取列表数据
|
||||
getData() {
|
||||
this.$http
|
||||
.post('book/book/bookIndex')
|
||||
.then(res => {
|
||||
this.xinsList = res.bookIndex.newBookList
|
||||
this.limiTist = res.bookIndex.saleList
|
||||
this.jingList = res.bookIndex.topBookList
|
||||
});
|
||||
|
||||
// 获取限时秒杀
|
||||
this.$http
|
||||
.get(`book/shopseckill/getSeckillProd`)
|
||||
.then(res => {
|
||||
this.seckillList = res.list
|
||||
})
|
||||
|
||||
// 获取精选商品
|
||||
this.$http
|
||||
.post('book/shopproduct/appGetList?limit=4&page=1&istop=1')
|
||||
.then(res => {
|
||||
this.goodsList = res.page.list
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转
|
||||
onPageJump(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
},
|
||||
|
||||
onPageJumpData(url, data) {
|
||||
uni.navigateTo({
|
||||
url: url + '?id=' + data
|
||||
});
|
||||
},
|
||||
|
||||
onTabJump(url) {
|
||||
uni.switchTab({
|
||||
url: url
|
||||
});
|
||||
},
|
||||
|
||||
onGoing() {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '开发中，敬请期待...'
|
||||
})
|
||||
},
|
||||
|
||||
// 电子书内容跳转
|
||||
onBookJump(e) {
|
||||
uni.navigateTo({
|
||||
url: '../eBook/bookContent?Id=' + e.bookid
|
||||
});
|
||||
},
|
||||
|
||||
// 商品详情页
|
||||
goDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: '../bookShop/commodityDetail?id=' + id
|
||||
});
|
||||
},
|
||||
|
||||
// 列表跳页
|
||||
onShopMore(e) {
|
||||
uni.navigateTo({
|
||||
url: '../bookShop/bookShopType?type=' + e
|
||||
});
|
||||
},
|
||||
|
||||
// 三个列表跳页
|
||||
onBookMore(e) {
|
||||
uni.navigateTo({
|
||||
url: '../eBook/bookType?Type=' + e
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
|
||||
.head_line {
|
||||
margin: 50rpx 0 0 0;
|
||||
|
||||
|
||||
b {
|
||||
display: inline-block;
|
||||
width: 12rpx;
|
||||
height: 40rpx;
|
||||
background-color: #54a966;
|
||||
vertical-align: bottom;
|
||||
margin: 0 20rpx 0 0;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
i {
|
||||
float: right;
|
||||
font-style: normal;
|
||||
color: #8b8a91;
|
||||
font-size: 24rpx;
|
||||
margin: 5rpx 35rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.home_bg {
|
||||
background-image: url('@/static/icon/home_bg.jpg');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
padding: 100rpx 0 40rpx 0;
|
||||
position: relative;
|
||||
|
||||
.icon_hua_1 {
|
||||
margin: 0 auto;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
}
|
||||
|
||||
.search_box {
|
||||
width: 90%;
|
||||
height: 64upx;
|
||||
background-color: #fff;
|
||||
border-radius: 32upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0upx 40upx;
|
||||
position: absolute;
|
||||
margin-left: -46%;
|
||||
left: 50%;
|
||||
bottom: -30rpx;
|
||||
box-shadow: 0 0px 10px 1px #54a96633;
|
||||
|
||||
.prompt {
|
||||
color: #cccccc;
|
||||
|
||||
}
|
||||
|
||||
.icon_search {
|
||||
background-image: url('@/static/icon/map_ic_search.png');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
width: 29upx;
|
||||
height: 28upx;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home_nar {
|
||||
margin: 60rpx 50rpx 0 50rpx;
|
||||
display: flex;
|
||||
color: #333;
|
||||
|
||||
.hn_cl_tit {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
|
||||
|
||||
image {
|
||||
width: 110upx;
|
||||
height: 110upx;
|
||||
margin: 0 auto;
|
||||
// margin: 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hn_cl_tit:nth-child(1),
|
||||
.hn_cl_tit:nth-child(4) {}
|
||||
|
||||
}
|
||||
|
||||
.home_lunbo {
|
||||
margin: 40rpx 30rpx 0 30rpx;
|
||||
}
|
||||
|
||||
.home_shujia {
|
||||
margin: 40rpx 20rpx 0 20rpx;
|
||||
display: flex;
|
||||
color: #333;
|
||||
|
||||
.hn_sj {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
font-size: 26upx;
|
||||
|
||||
image {
|
||||
width: 100upx;
|
||||
height: 100upx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home_xinshu {
|
||||
margin: 35rpx 30rpx;
|
||||
padding: 36rpx 16rpx 0 16rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 30rpx;
|
||||
|
||||
.hx_list {
|
||||
margin: 0 15rpx 20rpx 15rpx;
|
||||
text-align: center;
|
||||
width: 28.5%;
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 290upx;
|
||||
margin: 0 0 20rpx 0;
|
||||
}
|
||||
|
||||
.hx_title {
|
||||
font-size: 28rpx;
|
||||
margin: 0 0 10rpx 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hx_author {
|
||||
font-size: 24rpx;
|
||||
margin: 0 0 20rpx 0;
|
||||
color: #9b9b9b;
|
||||
}
|
||||
|
||||
b {
|
||||
display: block;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
background: #27b386;
|
||||
position: absolute;
|
||||
left: -10upx;
|
||||
top: 10upx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home_limit {
|
||||
margin: 35rpx 0;
|
||||
padding: 36rpx 0 20rpx 0;
|
||||
background-color: #fff;
|
||||
|
||||
|
||||
.lt_list {
|
||||
margin: 0 35rpx 0 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 200upx;
|
||||
height: 280upx;
|
||||
margin: 0 0 20rpx 0;
|
||||
}
|
||||
|
||||
.lt_title {
|
||||
font-size: 28rpx;
|
||||
margin: 0 0 10rpx 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lt_author {
|
||||
font-size: 24rpx;
|
||||
margin: 0 0 20rpx 0;
|
||||
color: #9b9b9b;
|
||||
}
|
||||
|
||||
.lt_yuan {
|
||||
text-decoration: line-through;
|
||||
color: #c1c1c1;
|
||||
margin: 0 0 5rpx 0;
|
||||
|
||||
}
|
||||
|
||||
.lt_xian {
|
||||
color: #bf0c0c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
b {
|
||||
display: block;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
background: #27b386;
|
||||
position: absolute;
|
||||
left: -10upx;
|
||||
top: 10upx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.lt_list:nth-child(1) {
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.lt_list:nth-last-child(1) {
|
||||
padding-right: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.home_jingxu {
|
||||
margin: 60rpx 30rpx 0 30rpx;
|
||||
|
||||
|
||||
.hj_hot {
|
||||
box-shadow: 0 0px 10px 1px #56565633;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
padding: 20upx 220upx 10upx 25upx;
|
||||
margin: 0 0 60rpx 0;
|
||||
border-radius: 15rpx;
|
||||
min-height: 230rpx;
|
||||
|
||||
view {
|
||||
margin: 0 0 10rpx 0;
|
||||
|
||||
text {
|
||||
color: #9b9b9b;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.bok_name {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
right: 30upx;
|
||||
top: -30upx;
|
||||
width: 160upx;
|
||||
height: 240upx;
|
||||
}
|
||||
|
||||
b {
|
||||
display: block;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
background: #27b386;
|
||||
position: absolute;
|
||||
right: 150upx;
|
||||
top: -20upx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.limited {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 20rpx 10rpx 10rpx 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
margin-top: 50rpx;
|
||||
|
||||
.limitedSymbol {
|
||||
width: 22%;
|
||||
height: 300rpx;
|
||||
border-right: 1px solid #eee;
|
||||
vertical-align: middle;
|
||||
|
||||
image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin: 45px auto 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.limitedScrollBox {
|
||||
width: 76%;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
.limitedItem {
|
||||
width: 200rpx;
|
||||
text-align: center;
|
||||
|
||||
image {
|
||||
width: 150upx;
|
||||
height: 200upx;
|
||||
margin: 15rpx auto 20rpx auto;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 20rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.biaoti {
|
||||
font-size: 30rpx;
|
||||
margin: 10rpx 0 10rpx 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.xian {
|
||||
font-size: 32rpx;
|
||||
color: #bf0c0c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.yuan {
|
||||
text-decoration: line-through;
|
||||
color: #c1c1c1;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods {
|
||||
width: 100%;
|
||||
margin:40rpx 0 50rpx 0;
|
||||
|
||||
.goodsItem {
|
||||
display: inline-block;
|
||||
width: 46%;
|
||||
border-radius: 20rpx;
|
||||
padding: 25rpx 25rpx 20rpx 25rpx;
|
||||
margin: 0 20rpx 20rpx 20rpx;
|
||||
background-color: #fff;
|
||||
border: 1px solid #eee;
|
||||
|
||||
.goodsImg {
|
||||
width: 98%;
|
||||
height: 380rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.goodsContent {
|
||||
|
||||
.goodsName {
|
||||
margin-top: 10rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.goodsPrice {
|
||||
font-size: 30rpx;
|
||||
margin: 5rpx 0 0 3rpx;
|
||||
color: #bf0c0c;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goodsItem:nth-child(2n) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
318
pages/peanut/mine.vue
Normal file
318
pages/peanut/mine.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<view style="padding: 0 40rpx;font-size: 28upx;">
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<public-module></public-module>
|
||||
<view style="height: 50rpx;"></view>
|
||||
<view class="per_mes">
|
||||
<image :src="userMes.avatar" v-if="userMes.avatar!=null" class="per_mes_img"></image>
|
||||
<image src="../../static/icon/home_icon_1.png" v-if="userMes.avatar==null" class="per_mes_img"></image>
|
||||
<view>
|
||||
<text class="name" v-if="userMes.nickname!=null">{{userMes.nickname}}</text>
|
||||
<text class="name" v-if="userMes.nickname==null">未设置</text>
|
||||
<image v-if="userMes.vip==1" src="../../static/icon/mine_v.png" alt="" class="per_user_img"></image>
|
||||
<text style="margin-left: 20rpx;font-size: 22rpx;color: #888;">({{userMes.tel}})</text>
|
||||
|
||||
<!-- <text class="tong">累计读书5本
|
||||
<span style="margin: 0 20upx;">|</span> 今日读50分钟
|
||||
</text> -->
|
||||
</view>
|
||||
<br clear="both">
|
||||
</view>
|
||||
<view class="now_vip" v-if="userMes.vip==0">
|
||||
<text>
|
||||
<image src="../../static/icon/mine_p.png" style="height: 44rpx;"></image>
|
||||
开通会员畅享海量内容
|
||||
</text>
|
||||
<b class="kt_btn" @click="onPageJump('./opeVip')">开通VIP</b>
|
||||
</view>
|
||||
|
||||
<view class="now_vip" v-if="userMes.vip==1">
|
||||
<text>
|
||||
<image src="../../static/icon/mine_v.png"></image>
|
||||
尊贵的VIP会员
|
||||
<font style="font-size: 14rpx;margin-left: 20rpx;">{{userMes.vipValidtime}}到期</font>
|
||||
</text>
|
||||
<b class="kt_btn" @click="onPageJump('./opeVip')">立即续费</b>
|
||||
</view>
|
||||
|
||||
<view class="chong_zhi">
|
||||
<view class="zhanghu" @click="onPageJump('../user/persCount')">
|
||||
我的账户
|
||||
<text style="float: right;line-height: 85rpx;"> > </text>
|
||||
</view>
|
||||
<view class="chong_list">
|
||||
<view>
|
||||
<b>{{userMes.peanutCoin}}</b>
|
||||
疯币
|
||||
</view>
|
||||
<view>
|
||||
<b>{{userMes.conponsCount}}</b>
|
||||
优惠券
|
||||
</view>
|
||||
<!-- <b class="chong_btn" @click="onPageJump('../sdkDemo/pay')">充 值</b> -->
|
||||
<b class="chong_btn" @click="onPageJump('./reCharge')">充 值</b>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="xiugai">
|
||||
<view class="nav_list" @click="onPageJump('../bookShop/orderList')">
|
||||
<text>我的订单</text>
|
||||
</view>
|
||||
<view class="nav_list" @click="onPageJump('../eBook/bookBuy')">
|
||||
<text>电子书购买记录</text>
|
||||
</view>
|
||||
<view class="nav_list" @click="onPageJump('../eBook/bookRecord')">
|
||||
<text>阅读记录</text>
|
||||
</view>
|
||||
<view class="nav_list" @click="onPageJump('../user/persData')">
|
||||
<text>修改个人资料</text>
|
||||
</view>
|
||||
<view class="nav_list" @click="onPageJump('../user/address')">
|
||||
<text>地址管理</text>
|
||||
</view>
|
||||
<view class="nav_list" @click="onGoing()">
|
||||
<text>帮助与反馈</text>
|
||||
</view>
|
||||
<view class="nav_list" @click="signShow=true">
|
||||
<text>退出登录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-modal :show="signShow" :content="signContent" :showCancelButton="true" @cancel="signShow=false"
|
||||
@confirm="signOut">
|
||||
</u-modal>
|
||||
|
||||
<z-navigation></z-navigation>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userMes: {},
|
||||
signShow: false,
|
||||
signContent: '是否要退出登录？'
|
||||
};
|
||||
},
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
// 隐藏原生的tabbar
|
||||
uni.hideTabBar();
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo'])
|
||||
},
|
||||
//页面显示
|
||||
onShow() {
|
||||
// 隐藏原生的tabbar
|
||||
uni.hideTabBar();
|
||||
this.getData();
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
getData() {
|
||||
// 获取个人信息
|
||||
if (this.userInfo.id != undefined) {
|
||||
this.$http
|
||||
.post('book/user/info/' + this.userInfo.id)
|
||||
.then(res => {
|
||||
this.userMes = res.user
|
||||
if (this.userMes.vip == 1) {
|
||||
this.userMes.vipValidtime = this.userMes.vipValidtime.substring(0, this.userMes
|
||||
.vipValidtime
|
||||
.indexOf(' '))
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// 跳转
|
||||
onGoing() {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '开发中，敬请期待...'
|
||||
})
|
||||
},
|
||||
onPageJump(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
// 退出登录
|
||||
signOut() {
|
||||
this.signShow = false
|
||||
uni.reLaunch({
|
||||
url: '../user/login'
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
|
||||
.per_mes {
|
||||
margin: 50rpx 0 50rpx 0;
|
||||
align-items: center;
|
||||
|
||||
.per_mes_img {
|
||||
width: 120upx;
|
||||
height: 120upx;
|
||||
background-color: #fff;
|
||||
border-radius: 120upx;
|
||||
margin: 0 30upx 0 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
view {
|
||||
float: left;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.name {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
font-size: 38upx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.tong {
|
||||
color: #999;
|
||||
font-size: 25upx;
|
||||
}
|
||||
|
||||
.per_user_img {
|
||||
display: inline-block;
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
margin-left: 10rpx;
|
||||
vertical-align: super;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.now_vip {
|
||||
background-color: #fff;
|
||||
// border-radius: 20upx;
|
||||
margin: 0 0 30upx 0;
|
||||
padding: 0 30upx;
|
||||
height: 120upx;
|
||||
background-image: linear-gradient(90deg, #feeed6 0%, #f5ce99 100%);
|
||||
|
||||
image {
|
||||
width: 46rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
margin: 0 10rpx 0 0;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 30upx;
|
||||
line-height: 120upx;
|
||||
color: #977749;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.kt_btn {
|
||||
font-size: 26upx;
|
||||
display: block;
|
||||
float: right;
|
||||
border-radius: 50rpx;
|
||||
color: #fffbf6;
|
||||
padding: 12rpx 26rpx;
|
||||
margin: 33rpx 0 0 0;
|
||||
background-image: linear-gradient(90deg, #dfa964 0%, #7f5218 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.chong_zhi {
|
||||
background-color: #fff;
|
||||
margin: 0 0 30upx 0;
|
||||
padding: 0 30upx;
|
||||
height: 240upx;
|
||||
|
||||
.zhanghu {
|
||||
font-size: 32upx;
|
||||
line-height: 100upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.chong_list {
|
||||
view {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
color: #a3a1a1;
|
||||
|
||||
b {
|
||||
font-size: 45rpx;
|
||||
display: block;
|
||||
margin: 0 0 10rpx 0;
|
||||
color: #76757b;
|
||||
}
|
||||
}
|
||||
|
||||
.chong_btn {
|
||||
font-size: 26upx;
|
||||
display: block;
|
||||
float: right;
|
||||
border-radius: 50rpx;
|
||||
color: #fffbf6;
|
||||
padding: 12rpx 42rpx;
|
||||
margin: 20rpx 0 0 0;
|
||||
background: #815219;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.xiugai {
|
||||
|
||||
.nav_list {
|
||||
background-color: #fff;
|
||||
padding: 30upx 0 30upx 20upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
&:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #333;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 20upx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
background-image: url('../../static/icon/icon_right.png');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.nav_list:nth-last-child(1) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
452
pages/peanut/opeVip.vue
Normal file
452
pages/peanut/opeVip.vue
Normal file
@@ -0,0 +1,452 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<public-module></public-module>
|
||||
<z-nav-bar title="会员中心" type="transparent" fontColor="#FFF"></z-nav-bar>
|
||||
<view class="vip_top">
|
||||
<view class="now_vip">
|
||||
<image src="../../static/icon/mine_card.png" alt=""></image>
|
||||
<text>
|
||||
<image src="../../static/icon/mine_v.png" alt=""></image>
|
||||
疯子读书会员
|
||||
<br>
|
||||
<i>VIPFENGZIDUSHU</i>
|
||||
<br>
|
||||
<b>加入会员立项4项特权</b>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="vip_quan">
|
||||
<view class="vq_title">会员特权</view>
|
||||
<view class="vq_bord">
|
||||
<view class="vq_b_list">
|
||||
<view>
|
||||
<image src="../../static/icon/mine_ic1.png" alt=""></image>
|
||||
</view>
|
||||
<text>免费阅读</text>
|
||||
</view>
|
||||
<view class="vq_b_list">
|
||||
<view>
|
||||
<image src="../../static/icon/mine_ic2.png" alt=""></image>
|
||||
</view>
|
||||
<text>优惠券</text>
|
||||
</view>
|
||||
<view class="vq_b_list">
|
||||
<view>
|
||||
<image src="../../static/icon/mine_ic3.png" alt=""></image>
|
||||
</view>
|
||||
<text>购书折扣</text>
|
||||
</view>
|
||||
<view class="vq_b_list">
|
||||
<view>
|
||||
<image src="../../static/icon/mine_ic4.png" alt=""></image>
|
||||
</view>
|
||||
<text>24h客服</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="vip_chong">
|
||||
<view class="vc_title">服务类型</view>
|
||||
<view class="vc_xiang">
|
||||
<view v-for="(item, index) in vcList" @click="chosPric(item)"
|
||||
:class="stepsVc.priceTypeId == item.priceTypeId?'Tab_vc vc_price':'vc_price'">
|
||||
<view class="pr_tm">{{item.description}}</view>
|
||||
<view class="pr_jg">￥{{item.realMoney}}</view>
|
||||
<view class="pr_yl">￥{{item.money}}</view>
|
||||
<view class="pr_lj">限时特惠</view>
|
||||
</view>
|
||||
<br clear="both">
|
||||
</view>
|
||||
</view>
|
||||
<view class="vip_fangsh">
|
||||
<view class="vf_title">支付方式</view>
|
||||
<view class="vf_radio">
|
||||
<u-radio-group v-model="payType">
|
||||
<view style="width: 100%;">
|
||||
<view v-for="(item, index) in paylist" @click="choseType(item.id)" class="vf_xuanx">
|
||||
<image :src="item.img"></image>
|
||||
{{item.title}}
|
||||
<u-radio :key="index" activeColor="#fe6e09" :name='item.id'
|
||||
style="float: right;margin-top: 5rpx;"></u-radio>
|
||||
</view>
|
||||
</view>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="agree_wo">* 我已阅读并同意《会员服务协议》</view>
|
||||
|
||||
<view class="vip_btn">
|
||||
<view @click="kaiVip">立即开通会员</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
import {
|
||||
setPay,
|
||||
setPayAssign
|
||||
} from '@/config/utils';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
stepsVc: {},
|
||||
vcList: [],
|
||||
payType: 2,
|
||||
paylist: [{
|
||||
title: '支付宝',
|
||||
id: 1,
|
||||
img: '../../static/icon/pay_1.png'
|
||||
}
|
||||
// {
|
||||
// title: '微信',
|
||||
// id: 2,
|
||||
// img: '../../static/icon/pay_2.png'
|
||||
// }
|
||||
],
|
||||
};
|
||||
},
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
// 隐藏原生的tabbar
|
||||
uni.hideTabBar();
|
||||
this.getData()
|
||||
},
|
||||
//页面显示
|
||||
onShow() {
|
||||
// 隐藏原生的tabbar
|
||||
uni.hideTabBar();
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
// 获取会员类型
|
||||
getData() {
|
||||
let that = this
|
||||
this.$http
|
||||
.post('book/bookbuyconfig/getVipOrPoint', {
|
||||
type: 'vip',
|
||||
qudao: 'Android'
|
||||
})
|
||||
.then(res => {
|
||||
that.vcList = res.list
|
||||
that.stepsVc = res.list[0]
|
||||
});
|
||||
},
|
||||
|
||||
// 点击会员价格
|
||||
chosPric(e) {
|
||||
let that = this
|
||||
that.stepsVc = e
|
||||
},
|
||||
|
||||
// 选择支付方式
|
||||
choseType(e) {
|
||||
let that = this
|
||||
that.payType = e
|
||||
},
|
||||
|
||||
// 开通vip
|
||||
kaiVip() {
|
||||
let that = this
|
||||
|
||||
let data = {
|
||||
userId: that.userInfo.id, //下单人ID
|
||||
userPhone: that.userInfo.tel, //收货人手机号
|
||||
paymentMethod: that.payType, //1支付宝，2微信，3ios内购
|
||||
orderMoney: that.stepsVc.money * 1, //订单金额
|
||||
districtMoney: 0, //优惠金额
|
||||
realMoney: that.stepsVc.money * 1, //实收金额
|
||||
orderStatus: 0, //订单状态
|
||||
orderType: "vip", //订单类型
|
||||
}
|
||||
|
||||
$http.request({
|
||||
url: "book/buyorder/rechargeSave",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data,
|
||||
header: { //默认 无 说明：请求头
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
setPay({
|
||||
typePay: 'alipay',
|
||||
subject: 'vip',
|
||||
totalAmount: that.stepsVc.money,
|
||||
type: that.payType,
|
||||
relevanceoid: res.orderSn,
|
||||
body: that.stepsVc.priceTypeId,
|
||||
}, res => {
|
||||
if (res.success) {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "支付失败",
|
||||
icon: "none",
|
||||
image: '../../static/icon/ic_close.png'
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
// 跳转
|
||||
onPageJump(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
|
||||
.vip_top {
|
||||
// background-color: #2c271d;
|
||||
background-image: url('../../static/icon/mine_back.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 160rpx 40rpx 20rpx 40rpx;
|
||||
height: 450rpx;
|
||||
position: relative;
|
||||
|
||||
.now_vip {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 340rpx;
|
||||
margin: 0 0 30upx 0;
|
||||
padding: 0 40upx 0 40upx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 410rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: 60rpx;
|
||||
font-size: 50upx;
|
||||
line-height: 80upx;
|
||||
color: #977749;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: 80rpx;
|
||||
top: 3rpx;
|
||||
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 90rpx;
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
margin: 0 10rpx 0 0;
|
||||
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 40upx;
|
||||
margin-left: 80rpx;
|
||||
}
|
||||
|
||||
b {
|
||||
font-size: 25upx;
|
||||
margin: 40rpx 0 0 20rpx;
|
||||
display: block;
|
||||
color: #c39a5f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vip_quan {
|
||||
margin: 120rpx 50rpx 0 50rpx;
|
||||
|
||||
.vq_title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.vq_bord {
|
||||
margin: 40rpx 0 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
.vq_b_list {
|
||||
float: left;
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
|
||||
|
||||
view {
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background-image: url('../../static/icon/mine_bor.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 55%;
|
||||
margin: 0 auto;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 30rpx;
|
||||
margin: 20rpx 0 0 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
view:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.vip_chong {
|
||||
margin: 50rpx 50rpx 0 50rpx;
|
||||
|
||||
.vc_title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
.vc_xiang {
|
||||
margin-top: 50rpx;
|
||||
|
||||
.vc_price {
|
||||
box-shadow: 0 0 20rpx 0 #0000001a;
|
||||
float: left;
|
||||
width: 47%;
|
||||
margin: 0 30rpx 30rpx 0;
|
||||
text-align: center;
|
||||
padding: 50rpx 0 20rpx 0;
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
color: #2d2d2d;
|
||||
|
||||
.pr_tm {
|
||||
font-size: 38rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pr_jg {
|
||||
font-size: 45rpx;
|
||||
margin: 20rpx 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pr_yl {
|
||||
font-size: 25rpx;
|
||||
margin-left: 10rpx;
|
||||
text-decoration: line-through;
|
||||
color: #d9d9d9;
|
||||
position: absolute;
|
||||
bottom: 50rpx;
|
||||
right: 15rpx;
|
||||
}
|
||||
|
||||
.pr_lj {
|
||||
background-color: #fe6e09;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
left: 0;
|
||||
font-size: 24rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_price:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.Tab_vc {
|
||||
box-shadow: 0 0 20rpx 0 #fe700bcc;
|
||||
color: #7b4c0a;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.vip_fangsh {
|
||||
margin: 40rpx 50rpx 0 50rpx;
|
||||
|
||||
.vf_title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.vf_radio {
|
||||
margin-top: 40rpx;
|
||||
|
||||
.vf_xuanx {
|
||||
font-size: 32rpx;
|
||||
padding-bottom: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border-bottom: 1px solid #ededed;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: inline-block;
|
||||
margin-right: 20rpx;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.agree_wo {
|
||||
color: #aaa;
|
||||
font-size: 25rpx;
|
||||
margin-top: 30rpx;
|
||||
margin: 40rpx 50rpx 0 50rpx;
|
||||
padding-bottom: 180rpx;
|
||||
}
|
||||
|
||||
.vip_btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 30rpx;
|
||||
|
||||
view {
|
||||
background-image: linear-gradient(90deg, #feeed5 0%, #f5cd98 100%);
|
||||
color: #865b25;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: 35rpx;
|
||||
font-weight: bold;
|
||||
padding: 25rpx 0;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
307
pages/peanut/reCharge.vue
Normal file
307
pages/peanut/reCharge.vue
Normal file
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<public-module></public-module>
|
||||
<z-nav-bar title="充值"></z-nav-bar>
|
||||
<view class="cha_jine">
|
||||
<view class="cj_title">充值金额</view>
|
||||
<view class="cj_xiang">
|
||||
<view v-for="(item, index) in cjList" @click="chosPric(item)"
|
||||
:class="stepsCj.priceTypeId == item.priceTypeId?'Tab_cj cj_price':'cj_price'">
|
||||
<view class="pr_jg">￥{{item.realMoney}}</view>
|
||||
<view class="pr_yl">{{item.money}} 疯币</view>
|
||||
<view class="pr_lj">限时特惠</view>
|
||||
</view>
|
||||
<br clear="both">
|
||||
</view>
|
||||
</view>
|
||||
<view class="cha_fangsh">
|
||||
<view class="cf_title">支付方式</view>
|
||||
<view class="cf_radio">
|
||||
<u-radio-group v-model="payType">
|
||||
<view style="width: 100%;">
|
||||
<view v-for="(item, index) in paylist" @click="choseType(item.id)"
|
||||
:class="payType == item.id?'Tab_xf cf_xuanx':'cf_xuanx'">
|
||||
<image :src="item.img"></image>
|
||||
{{item.title}}
|
||||
<u-radio :key="index" activeColor="#fe6e09" :name='item.id'
|
||||
style="float: right;margin-top: 5rpx;"></u-radio>
|
||||
</view>
|
||||
</view>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="agree_wo">* 我已阅读并同意《会员服务协议》</view>
|
||||
<view class="char_btn">
|
||||
<view @click="kaiChar">立即充值</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
import {
|
||||
setPay,
|
||||
setPayAssign
|
||||
} from '@/config/utils';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
stepsCj: {},
|
||||
cjList: [],
|
||||
payType: 2,
|
||||
paylist: [{
|
||||
title: '支付宝',
|
||||
id: 1,
|
||||
img: '../../static/icon/pay_1.png'
|
||||
}
|
||||
// {
|
||||
// title: '微信',
|
||||
// id: 2,
|
||||
// img: '../../static/icon/pay_2.png'
|
||||
// }
|
||||
],
|
||||
};
|
||||
},
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
// 隐藏原生的tabbar
|
||||
uni.hideTabBar();
|
||||
this.getData();
|
||||
},
|
||||
//页面显示
|
||||
onShow() {
|
||||
// 隐藏原生的tabbar
|
||||
uni.hideTabBar();
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
// 获取充值金额
|
||||
getData() {
|
||||
this.$http
|
||||
.post('book/bookbuyconfig/getVipOrPoint', {
|
||||
type: 'point',
|
||||
qudao: 'Android'
|
||||
})
|
||||
.then(res => {
|
||||
this.cjList = res.list
|
||||
this.stepsCj = res.list[0]
|
||||
});
|
||||
},
|
||||
|
||||
// 点击充值金额
|
||||
chosPric(e) {
|
||||
this.stepsCj = e
|
||||
},
|
||||
|
||||
// 选择支付方式
|
||||
choseType(e) {
|
||||
let that = this
|
||||
that.payType = e
|
||||
},
|
||||
|
||||
// 充值
|
||||
kaiChar() {
|
||||
let that = this
|
||||
|
||||
let data = {
|
||||
userId: that.userInfo.id, //下单人ID
|
||||
userPhone: that.userInfo.tel, //收货人手机号
|
||||
paymentMethod: that.payType, //1支付宝，2微信，3ios内购
|
||||
orderMoney: that.stepsCj.money * 1, //订单金额
|
||||
districtMoney: 0, //优惠金额
|
||||
realMoney: that.stepsCj.money * 1, //实收金额
|
||||
orderStatus: 0, //订单状态
|
||||
orderType: "point", //订单类型
|
||||
}
|
||||
|
||||
$http.request({
|
||||
url: "book/buyorder/rechargeSave",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data,
|
||||
header: { //默认 无 说明：请求头
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(res => {
|
||||
// let obj={
|
||||
// typePay: 'alipay',
|
||||
// subject: 'order',
|
||||
// // subject: 'point',
|
||||
// totalAmount: that.stepsCj.money,
|
||||
// type: that.payType,
|
||||
// relevanceoid: res.orderSn,
|
||||
// customerId:this.userInfo.id, // 用户id
|
||||
// // body: that.stepsCj.priceTypeId,
|
||||
// }
|
||||
// console.log(obj,'obj')
|
||||
// return false
|
||||
if (res.code == 0) {
|
||||
setPay({
|
||||
typePay: 'alipay',
|
||||
subject: 'point',
|
||||
totalAmount: that.stepsCj.money,
|
||||
type: that.payType,
|
||||
relevanceoid: res.orderSn,
|
||||
body: that.stepsCj.priceTypeId,
|
||||
}, res => {
|
||||
if (res.success) {
|
||||
uni.showToast({
|
||||
title: "支付成功"
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "支付失败",
|
||||
icon: "none",
|
||||
image: '../../static/icon/ic_close.png'
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
// 跳转
|
||||
onPageJump(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
|
||||
.cha_jine {
|
||||
margin: 40rpx 50rpx 0 50rpx;
|
||||
|
||||
.cj_title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cj_xiang {
|
||||
margin-top: 50rpx;
|
||||
|
||||
.cj_price {
|
||||
box-shadow: 0 0 20rpx 0 #0000001a;
|
||||
float: left;
|
||||
width: 47%;
|
||||
margin: 0 30rpx 30rpx 0;
|
||||
text-align: center;
|
||||
padding: 25rpx 0 30rpx 0;
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
color: #2d2d2d;
|
||||
|
||||
.pr_jg {
|
||||
font-size: 45rpx;
|
||||
margin: 20rpx 0 10rpx 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pr_yl {
|
||||
font-size: 30rpx;
|
||||
// text-decoration: line-through;
|
||||
color: #b1b1b1;
|
||||
}
|
||||
|
||||
.pr_lj {
|
||||
background-image: linear-gradient(90deg, #fe6e09 0%, #efa574 100%);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: 0;
|
||||
font-size: 24rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
border-top-left-radius: 20rpx;
|
||||
border-bottom-right-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cj_price:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.Tab_cj {
|
||||
box-shadow: 0 0 20rpx 0 #fe700bcc;
|
||||
color: #7b4c0a;
|
||||
background: #fff9f5cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cha_fangsh {
|
||||
margin: 40rpx 50rpx 0 50rpx;
|
||||
|
||||
.cf_title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cf_radio {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.cf_xuanx {
|
||||
font-size: 32rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border-bottom: 1px solid #ededed;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: inline-block;
|
||||
margin-right: 20rpx;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.Tab_xf {
|
||||
background-color: #fdf1e9cc;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.agree_wo {
|
||||
color: #aaa;
|
||||
font-size: 25rpx;
|
||||
margin-top: 30rpx;
|
||||
margin: 40rpx 50rpx 0 50rpx;
|
||||
padding-bottom: 180rpx;
|
||||
}
|
||||
|
||||
.char_btn {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 30rpx;
|
||||
|
||||
view {
|
||||
background-image: linear-gradient(90deg, #ed7161 0%, #efa574 100%);
|
||||
color: #fff;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: 35rpx;
|
||||
font-weight: bold;
|
||||
padding: 25rpx 0;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
313
pages/peanut/searchFor.vue
Normal file
313
pages/peanut/searchFor.vue
Normal file
@@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<view>
|
||||
<z-nav-bar>
|
||||
<u-search :clearabled="true" bgColor="#fff" borderColor="#54a966" focus v-model="bookScreen.bookName"
|
||||
@custom='souBook' @clear="clear"></u-search>
|
||||
</z-nav-bar>
|
||||
<view class="sear_ch" v-if="this.show==0">
|
||||
<view class="sear_ch_tit">
|
||||
历史搜索
|
||||
</view>
|
||||
<view class="sear_ch_tag">
|
||||
<text v-for="item in historyList" @click="serkeyWord(item)">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sear_class" v-if="this.show==1">
|
||||
<view class="sc_xuan">
|
||||
<view class="sc_con" v-for="(item,index) in classFen" @click="FenBook(item)"
|
||||
:class="bookScreen.type == item.id ? 'sc_con sc_con_style' : 'sc_con'">{{item.sort}}</view>
|
||||
</view>
|
||||
<view class="sc_xuan">
|
||||
<view class="sc_con" v-for="(item,index) in classMian" @click="MianBook(item)"
|
||||
:class="bookScreen.is_charge == item.id ? 'sc_con sc_con_style' : 'sc_con'">{{item.sort}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sear_list" v-if="this.show==1">
|
||||
<view class="bl_tioa" v-for="(item,index) in bookList" @click="onBookJump(item)">
|
||||
<image :src="item.images"></image>
|
||||
<view>
|
||||
<text class="bok_name">{{item.name}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>作者：<text style="color: #333;">{{item.authorName}}</text></text>
|
||||
</view>
|
||||
<view>
|
||||
<text>出版商：<text style="color: #333;">{{item.publisherName}}</text></text>
|
||||
</view>
|
||||
<view>
|
||||
<text style="line-height: 20rpx;">{{item.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 1px;"></view>
|
||||
<view>
|
||||
<view v-if="status==0" style="text-align: center;">
|
||||
<u-loading-icon style="display: inline-block;"></u-loading-icon>
|
||||
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
|
||||
</view>
|
||||
<view v-if="status==1">
|
||||
<u-divider text="全部加载完成"></u-divider>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view v-if="this.show==1&&this.bookList==''">
|
||||
<u-divider text="暂无数据"></u-divider>
|
||||
</view>
|
||||
<view style="padding-bottom: 20rpx;">
|
||||
<u-back-top :scroll-top="scrollTop"></u-back-top>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
totalPage: 0,
|
||||
status: 3,
|
||||
show: 0,
|
||||
bookList: [],
|
||||
historyList: [],
|
||||
bookScreen: {
|
||||
authorName: '', //作者
|
||||
publisherName: '', //出版社
|
||||
type: '', //电子书类型
|
||||
bookName: '', //关键词
|
||||
is_charge: 1, //是否收费（0收费1免费）
|
||||
state: 1,
|
||||
page: 1, //当前页码数
|
||||
limit: 10, //单页数据数量
|
||||
},
|
||||
classFen: [{
|
||||
sort: '全部',
|
||||
id: ''
|
||||
}, {
|
||||
sort: '医学',
|
||||
id: 1
|
||||
}, {
|
||||
sort: '国学',
|
||||
id: 2
|
||||
}, {
|
||||
sort: '文学',
|
||||
id: 3
|
||||
}, {
|
||||
sort: '古籍',
|
||||
id: 4
|
||||
}],
|
||||
classMian: [{
|
||||
sort: '免费',
|
||||
id: 1
|
||||
}, {
|
||||
sort: 'VIP',
|
||||
id: 0
|
||||
}],
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
// 返回顶部
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
},
|
||||
|
||||
// 下拉刷新
|
||||
onReachBottom() {
|
||||
this.status = 0
|
||||
if (this.bookScreen.page < this.totalPage) {
|
||||
this.bookScreen.page = this.bookScreen.page + 1
|
||||
setTimeout(() => {
|
||||
this.$http
|
||||
.post('book/book/list', this.bookScreen)
|
||||
.then(res => {
|
||||
this.totalPage = res.page.totalPage
|
||||
for (let i in res.page.list) {
|
||||
this.bookList.push(res.page.list[i])
|
||||
}
|
||||
});
|
||||
}, 1000)
|
||||
} else {
|
||||
this.status = 1
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
|
||||
},
|
||||
//页面显示
|
||||
onShow() {
|
||||
this.getHistory()
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
// 获取缓存
|
||||
getHistory() {
|
||||
this.historyList = uni.getStorageSync('hisRecords')
|
||||
if (this.historyList.length > 10) {
|
||||
this.historyList.splice(10, this.historyList.length)
|
||||
uni.setStorageSync('hisRecords', this.historyList);
|
||||
}
|
||||
},
|
||||
|
||||
// 获取列表数据
|
||||
getData() {
|
||||
this.$http
|
||||
.post('book/book/list', this.bookScreen)
|
||||
.then(res => {
|
||||
this.bookList = res.page.list
|
||||
this.totalPage = res.page.totalPage
|
||||
this.status = 3
|
||||
this.show = 1
|
||||
});
|
||||
},
|
||||
|
||||
// 清空
|
||||
clear() {
|
||||
this.show = 0
|
||||
this.getHistory()
|
||||
},
|
||||
|
||||
// 搜索
|
||||
souBook() {
|
||||
if (this.bookScreen.bookName == '') {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请输入关键字'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.getData();
|
||||
|
||||
let ArryList = []
|
||||
if (uni.getStorageSync('hisRecords') == '') {
|
||||
ArryList.push(this.bookScreen.bookName)
|
||||
uni.setStorageSync('hisRecords', ArryList);
|
||||
} else {
|
||||
let value = uni.getStorageSync('hisRecords')
|
||||
value.unshift(this.bookScreen.bookName)
|
||||
uni.setStorageSync('hisRecords', value);
|
||||
}
|
||||
},
|
||||
|
||||
// 点击历史搜索
|
||||
serkeyWord(e) {
|
||||
this.bookScreen.bookName = e
|
||||
this.getData();
|
||||
},
|
||||
|
||||
// 分类选择
|
||||
FenBook(e) {
|
||||
if (e.id == 0) {
|
||||
this.bookScreen.type = ''
|
||||
} else {
|
||||
this.bookScreen.type = e.id
|
||||
}
|
||||
this.bookScreen.page = 1
|
||||
this.getData();
|
||||
},
|
||||
MianBook(e) {
|
||||
this.bookScreen.is_charge = e.id
|
||||
this.bookScreen.page = 1
|
||||
this.getData();
|
||||
},
|
||||
|
||||
// 电子书内容跳转
|
||||
onBookJump(e) {
|
||||
uni.navigateTo({
|
||||
url: '../eBook/bookContent?Id=' + e.id
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
|
||||
.sear_ch {
|
||||
margin: 50rpx 40rpx 0 40rpx;
|
||||
|
||||
.sear_ch_tit {
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
margin: 40rpx 0 0 0;
|
||||
}
|
||||
|
||||
.sear_ch_tag {
|
||||
margin: 20rpx 0 0 0;
|
||||
|
||||
text {
|
||||
background-color: #eee;
|
||||
font-size: 24rpx;
|
||||
border-radius: 50rpx;
|
||||
display: inline-block;
|
||||
margin: 0 30rpx 20rpx 0;
|
||||
padding: 10rpx 25rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sear_class {
|
||||
margin: 20rpx 30rpx 60rpx 30rpx;
|
||||
|
||||
.sc_xuan {
|
||||
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.sc_con {
|
||||
display: inline-block;
|
||||
font-size: 28rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
}
|
||||
|
||||
.sc_con_style {
|
||||
color: #27b386;
|
||||
background-color: #2ab58833;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sear_list {
|
||||
margin: 50rpx 30rpx 0 30rpx;
|
||||
|
||||
.bl_tioa {
|
||||
box-shadow: 0 0px 10px 1px #d3d1d133;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
padding: 0 25upx 10upx 220upx;
|
||||
margin: 0 0 60rpx 0;
|
||||
border-radius: 15rpx;
|
||||
min-height: 250rpx;
|
||||
|
||||
view {
|
||||
|
||||
text {
|
||||
color: #9b9b9b;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.bok_name {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
left: 30upx;
|
||||
top: -20upx;
|
||||
width: 160upx;
|
||||
height: 240upx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
347
pages/peanut/shopping.vue
Normal file
347
pages/peanut/shopping.vue
Normal file
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<view>
|
||||
<z-nav-bar backState="2000" title="购物车"></z-nav-bar>
|
||||
<view class="shopCarContent">
|
||||
<scroll-view scroll-y="true">
|
||||
<view class="cartItem" v-for="(item,index) in cartList" :key="index">
|
||||
<view class="select">
|
||||
<checkbox :checked="item.checked" @click="checkboxGroupChange(index,item)"
|
||||
class="round checkedItem" />
|
||||
</view>
|
||||
<view class="cartContent">
|
||||
<image :src="item.image" mode="" @click="goDetail(item.productId)"></image>
|
||||
<view class="itemCenter">
|
||||
<view class="cartTitle" @click="goDetail(item.productId)">
|
||||
<text>{{item.productName}}</text>
|
||||
</view>
|
||||
<view class="itemPrice">
|
||||
<text>￥{{item.price*item.productAmount}}</text>
|
||||
<u-number-box v-model="item.productAmount" @change="valChange($event,item)" :input-width="50"
|
||||
:input-height="20" :min="1" :max="item.productStock" integer @overlimit='overlimit'></u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作区 -->
|
||||
<view class="shopCarFooter">
|
||||
<view class="selectAll">
|
||||
<checkbox :checked="all" @click="isSelectAll()" class="round checkedItem" />
|
||||
<text class="cartCho">全选</text>
|
||||
<text class="cartDel" v-if="isCartDelShow" @click="delCart()">删除</text>
|
||||
</view>
|
||||
<view class="exhibition">
|
||||
<text class="total">合计: <b>￥{{totalPrice}}</b></text>
|
||||
<view class="settlement" @click="setTment()">
|
||||
结算
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<public-module></public-module>
|
||||
|
||||
<z-navigation></z-navigation>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
totalPrice: 0, // 总价
|
||||
all: false, // 是否全选
|
||||
isCartDelShow: false, // 是否展示删除按钮
|
||||
cartList: [] // 购物车列表
|
||||
};
|
||||
},
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
// 隐藏原生的tabbar
|
||||
uni.hideTabBar();
|
||||
this.getCartList()
|
||||
},
|
||||
//页面显示
|
||||
onShow() {
|
||||
// 隐藏原生的tabbar
|
||||
uni.hideTabBar();
|
||||
this.getCartList();
|
||||
this.all = false;
|
||||
this.isCartDelShow = false
|
||||
this.totalPrice = 0
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
// 获取购物车列表
|
||||
getCartList() {
|
||||
this.$http.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`).then(res => {
|
||||
this.cartList = res.cartList
|
||||
if (res.cartList.length > 0) {
|
||||
res.cartList.forEach((item, index) => {
|
||||
item.checked = false
|
||||
})
|
||||
this.cartList = res.cartList
|
||||
}
|
||||
})
|
||||
},
|
||||
// 是否全选
|
||||
isSelectAll(e) {
|
||||
if (this.cartList.length > 0) {
|
||||
this.all = !this.all
|
||||
this.cartList.forEach((item, index) => {
|
||||
item.checked = this.all
|
||||
})
|
||||
this.isCartDelShow = this.all
|
||||
this.total()
|
||||
} else {
|
||||
this.all = false
|
||||
}
|
||||
},
|
||||
// 选中单独商品
|
||||
checkboxGroupChange(index, item) {
|
||||
// 修改当前item的checked
|
||||
this.cartList[index].checked = !item.checked
|
||||
// 判断是否全选
|
||||
this.all = this.cartList.every((item, index) => {
|
||||
return item.checked == true
|
||||
})
|
||||
// 判断是否展示删除按钮
|
||||
this.isCartDelShow = this.cartList.some((item, index) => {
|
||||
return item.checked == true
|
||||
})
|
||||
// 计算总价
|
||||
this.total()
|
||||
},
|
||||
// 计算总价
|
||||
total() {
|
||||
let allprice = 0;
|
||||
this.cartList.forEach((item, index) => {
|
||||
let price = 0;
|
||||
if (item.checked) {
|
||||
price = item.productAmount * item.price;
|
||||
}
|
||||
allprice += price
|
||||
})
|
||||
this.totalPrice = allprice
|
||||
},
|
||||
// 超出阈值时
|
||||
overlimit(){
|
||||
uni.showToast({
|
||||
title:'超出商品数量',
|
||||
icon: 'error',
|
||||
duration: 1000
|
||||
})
|
||||
},
|
||||
valChange(e, item) {
|
||||
console.log(e)
|
||||
let productItem = {}
|
||||
productItem = item
|
||||
productItem.productAmount = e.value
|
||||
this.updateCart(productItem)
|
||||
setTimeout(() => {
|
||||
this.total()
|
||||
}, 300)
|
||||
},
|
||||
// 更新购物车
|
||||
updateCart(shagnpin){
|
||||
// 已在购物车中添加
|
||||
$http.request({
|
||||
url: "book/ordercart/update",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data: shagnpin,
|
||||
header: { //默认 无 说明：请求头
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
// uni.showToast({
|
||||
// title: '加入购物车成功',
|
||||
// duration: 1000,
|
||||
// });
|
||||
}
|
||||
})
|
||||
},
|
||||
// 删除购物车
|
||||
delCart() {
|
||||
let cartIdArr = [];
|
||||
this.cartList.forEach((item, index) => {
|
||||
if (item.checked) {
|
||||
cartIdArr.push(item.cartId)
|
||||
}
|
||||
})
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '是否删除这个商品',
|
||||
confirmText: '确定',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
console.log(cartIdArr)
|
||||
$http.request({
|
||||
url: "book/ordercart/delete",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data: cartIdArr,
|
||||
header: { //默认 无 说明：请求头
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(res => {
|
||||
this.getCartList()
|
||||
uni.hideLoading()
|
||||
})
|
||||
} else {
|
||||
console.log('cancel') //点击取消之后执行的代码
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转结算页面
|
||||
setTment() {
|
||||
let shangList=[]
|
||||
this.cartList.forEach((item, index) => {
|
||||
if (item.checked) {
|
||||
shangList.push(index)
|
||||
}
|
||||
})
|
||||
// 如果没有勾选
|
||||
if(shangList.length == 0){
|
||||
uni.showToast({
|
||||
title: "请先勾选商品",
|
||||
icon: 'error',
|
||||
duration: 1000,
|
||||
})
|
||||
}else{
|
||||
uni.navigateTo({
|
||||
url: '../bookShop/settlement?type=1&list='+JSON.stringify(shangList)
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 商品内容跳转
|
||||
goDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: '../bookShop/commodityDetail?id=' + id
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
|
||||
.shopCarContent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.cartItem {
|
||||
padding: 10rpx 10rpx 10rpx 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
|
||||
.cartContent {
|
||||
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
image {
|
||||
width: 150rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 10rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.itemCenter {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.cartTitle {
|
||||
font-size: 30rpx;
|
||||
margin: 35rpx 0 20rpx 0;
|
||||
}
|
||||
|
||||
.itemPrice {
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shopCarFooter {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
bottom: 110rpx;
|
||||
|
||||
.selectAll {
|
||||
|
||||
display: flex;
|
||||
|
||||
|
||||
.cartCho {
|
||||
margin-top: 12rpx;
|
||||
font-size: 25rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.cartDel {
|
||||
font-weight: bold;
|
||||
color: #bf0c0c;
|
||||
font-size: 14px;
|
||||
margin: 12rpx 0 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.exhibition {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.total {
|
||||
font-size: 15px;
|
||||
padding: 0 40rpx 0 0;
|
||||
color: #888;
|
||||
|
||||
b {
|
||||
margin-left: 10rpx;
|
||||
color: #e97512;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.settlement {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
padding: 10rpx 50rpx;
|
||||
background-image: linear-gradient(90deg, #eba00b 0%, #c96713 100%);
|
||||
color: #fff;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user