zm/medicine_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第一次提交

Browse Source
This commit is contained in:
@fawn-nine
2024-05-22 13:42:15 +08:00
commit bb53af8bde
2133 changed files with 129959 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
pages/peanut/aboutUs.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<view>
<public-module></public-module>
<z-nav-bar title="关于我们"></z-nav-bar>
<view class="APPinfo">
<image src="../../static/icon/fengziIcon.jpg" mode="" style="height: 150rpx; width: 150rpx; margin: 0 auto;"></image><br/>
<p>版本信息：{{versionName}},{{versionCode}}</p>
</view>
<view class="telInfo">
<view class="nav_list flexbox">
<text>客服热线</text>
<view class="view1">
<text>022-24142321</text>
<image @click="makeTel" src="../../static/icon/tel.png" mode="" style="height: 46rpx; width: 46rpx; margin-bottom: -10rpx; display: inline-block; "></image>
</view>
</view>
</view>
<view class="prof">
<p>一款线上电子书APP，包含医学类、国学类、文学类、中医古籍等各种类型。3D仿真翻页、护眼模式等阅读技术，打造舒适阅读体验。图文混排，AI人声读书听书。部分电子书也有对应的纸质书，给予用户更多的阅读选择。</p>
</view>
<view class="" style="text-align: center;">
<!-- https://main.nuttyreading.com/privacy.html -->
<!-- <text @click="seeDetail('')" style="color: #007aff; font-size: 26rpx;">隐私政策</text> -->
<uni-link href="https://main.nuttyreading.com/privacy.html" text="隐私政策"></uni-link>
<!-- <uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"></uni-link> -->
</view>
<music-play :playData="playData"></music-play>
</view>
</template>
<script>
import musicPlay from '@/components/music.vue'
export default {
data() {
return {
playData:{},
versionCode:null,
versionName:null
}
},
onLoad() {
this.getAppInfo()
},
components:{
musicPlay
},
methods: {
// 获取版本信息
getAppInfo(){
let that = this
plus.runtime.getProperty(plus.runtime.appid, function(inf) {
that.versionCode = inf.version
that.versionName = inf.name
// console.log(that.versionCode,555)
});
},
makeTel(){
uni.showModal({
title: '提示',
content: '微信号：yilujiankangkefu',
// success: function (res) {
// if (res.confirm) {
// uni.makePhoneCall({
// phoneNumber: '022-24142321' //仅为示例
// });
// } else if (res.cancel) {
// }
// }
})
}
}
}
</script>
<style scoped lang="less">
.prof{padding: 20rpx; color: #666; font-size: 24rpx; line-height: 40rpx; text-indent: 2em;}
.telInfo{background-color:#fff;
.nav_list{padding: 30upx 0 30upx 20upx; border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; justify-content: space-between; color: #666;
.view1{width:300rpx;}
}
}
.APPinfo{background-color:#fff; padding: 40rpx 0; margin-top: 20rpx; text-align: center;
p{font-size: 28rpx;}
}
.flexbox{display: flex; justify-content: center;}
</style>

831
pages/peanut/bookshelf.vue Normal file
View File

@@ -0,0 +1,831 @@
<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>
<music-play :playData="playData"></music-play>
</view>
</template>
<script>
import musicPlay from '@/components/music.vue'
import $http from '@/config/requestConfig.js';
import {
mapState
} from 'vuex';
export default {
data() {
return {
playData:{},
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()
},
//方法
components:{
musicPlay
},
methods: {
getData() {
this.bokMesDet.userId = this.userInfo.id
// 获取书架列表
this.$http
.post('book/bookshelf/getUserBookshelf', {
'userId': this.userInfo.id
})
.then(res => {
this.bookData = res.userBookshelf
console.log(res)
});
},
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: 150rpx;
.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>

275
pages/peanut/chargeDetaill.vue Normal file
View File

@@ -0,0 +1,275 @@
<template>
<view class="container">
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<!-- <z-nav-bar title="我的订单"></z-nav-bar> -->
<z-nav-bar title="充值详情"></z-nav-bar>
<view class="leve1">
<view class="item flexbox" v-if="orderDetail.orderStatus == 3">
<view class="">
<view class="img">
<image @click="" style="width: 120rpx; height: 120rpx; margin-top: 0;" class=""
src="/static/icon/cgts.png" mode="aspectFill"></image>
</view>
<view class="txt">
<text>充值成功</text>
</view>
<view class="">
<text style="font-size: 30rpx;">充值金额：</text><text style=" color: #ff5500;">￥</text>
<text class="price">{{orderDetail.orderPrice}}</text>
</view>
</view>
</view>
<view class="item flexbox" v-if="orderDetail.orderStatus == 0">
<view class="">
<view class="img">
<image @click="" style="width: 120rpx; height: 120rpx; margin-top: 0;" class=""
src="/static/icon/noPay.png" mode="aspectFill"></image>
</view>
<view class="txt">
<text>待付款</text>
</view>
<view class="">
<text style="font-size: 30rpx;">充值金额：</text><text style=" color: #ff5500;">￥</text>
<text class="price">{{orderDetail.orderPrice}}</text>
</view>
</view>
</view>
<view class="item flexbox" v-if="orderDetail.orderStatus > 3">
<view class="">
<view class="img">
<image @click="" style="width: 120rpx; height: 120rpx; margin-top: 0;" class=""
src="/static/icon/fail.png" mode="aspectFill"></image>
</view>
<view class="txt">
<text>充值失败</text>
</view>
<view class="">
<text style="font-size: 30rpx;">充值金额：</text><text style=" color: #ff5500;">￥</text>
<text class="price">{{orderDetail.orderPrice}}</text>
</view>
</view>
</view>
<view class="leve2">
<view class="times">
<view class="flexbox">
<text>订单编号：</text><text>{{orderDetail.orderSn}}</text>
</view>
<view class="flexbox">
<text>订单创建时间：</text><text>{{orderDetail.createTime}}</text>
</view>
<view class="flexbox" v-if="orderDetail.orderStatus > 0">
<text>到账时间：</text><text>{{orderDetail.createTime}}</text>
</view>
</view>
</view>
<view class="leve3 flexbox">
<view class="item">
<button v-if="orderDetail.orderStatus == 3" @click="goHome" class="mini-btn" type="primary" style="backgroundColor:#1AAD19;borderColor:#1AAD19" >完成</button>
<button v-if="orderDetail.orderStatus == 0" @click="goPay" class="mini-btn" type="warn" >去支付</button>
</view>
<view class="item" v-if="orderDetail.orderStatus == 3">
<button class="mini-btn" type="primary" @click="goCharge">继续充值</button>
</view>
</view>
</view>
<z-navigation></z-navigation>
<music-play :playData="playData"></music-play>
</view>
</template>
<script>
import {
setPay,
setPayAssign,
setWXPay
} from '@/config/utils';
import musicPlay from '@/components/music.vue'
import $http from '@/config/requestConfig.js';
import {
mapState,
mapMutations
} from 'vuex';
export default {
data() {
return {
playData: {},
orderId: null,
orderSn: '',
orderDetail: {},
titleStat: '',
}
},
onLoad(e) {
this.orderId = e.orderId
this.orderSn = e.orderSn
},
onShow() {
this.getOrderDetail()
},
components: {
musicPlay
},
computed: {
...mapState(['userInfo']),
},
methods: {
// 支付
goPay() {
let payItem = this.orderDetail
console.log(payItem, 'payItem')
if (payItem.paymentMethod == 2) {
console.log('阿里支付')
setPay({
typePay: 'alipay',
subject: 'order',
totalAmount: payItem.realMoney,
type: 2,
relevanceoid: payItem.orderSn,
customerId: this.userInfo.id,
}, res => {
if (res.success) {
uni.showToast({
title: "支付成功"
});
setTimeout(()=>{
uni.navigateTo({
url:'/pages/user/persCount'
})
},2000)
} else {
uni.showToast({
title: "支付失败",
icon: "none",
image: '../../static/icon/ic_close.png'
});
}
this.getOrderDetail()
})
} else if (payItem.paymentMethod == 1) {
console.log('微信支付')
// console.log(this.isAndorid)
if (this.isAndorid == false) {
uni.showModal({
title: '提示',
content: '很抱歉，苹果系统暂不支持微信支付',
showCancel: false
})
return false
} else {
let data1 = {
orderSn: payItem.orderSn,
buyOrderId: null,
totalAmount: payItem.realMoney
}
console.log(data1, 'data1')
setWXPay(data1, res => {
if (res.success) {
uni.showToast({
title: "支付成功"
});
setTimeout(()=>{
uni.navigateTo({
url:'/pages/user/persCount'
})
},2000)
} else {
console.log(res)
if (res.data.errMsg.indexOf('User canceled') != -1) {
uni.showToast({
title: "用户取消支付",
icon: "none",
image: '../../static/icon/ic_close.png'
});
} else {
uni.showToast({
title: "支付失败",
icon: "none",
image: '../../static/icon/ic_close.png'
});
}
}
})
}
} else if (payItem.paymentMethod == 3) {
// 苹果充值
console.log('苹果二次支付')
if (this.isAndorid) {
uni.showModal({
title: '提示',
showCancel: false,
content: '很抱歉，当前订单属于苹果系统内购订单，安卓系统无法完成支付操作，您可切换到苹果系统进行支付，也可以取消该订单，并重新下单'
})
} else {
// this.iphonepay(payItem)
}
}
},
goCharge(){
uni.navigateTo({
url:'./reCharge'
})
},
goHome(){
uni.switchTab({
url:'/pages/peanut/home'
})
},
getOrderDetail() {
this.$http
.get(`/book/buyOrder/orderDetail?orderSn=${this.orderSn}`)
.then(res => {
console.log('订单详情', res)
this.orderDetail = res.result
this.consigneeShow = true
// console.log(this.orderContet,'this.orderContet')
if (this.orderDetail.orderStatus == 0) {
this.titleStat = '待支付'
} else if (this.orderDetail.orderStatus == 1) {
this.titleStat = '待发货'
} else if (this.orderDetail.orderStatus == 2) {
this.titleStat = '待收货'
} else if (this.orderDetail.orderStatus == 3) {
this.titleStat = '已完成'
}
})
},
}
}
</script>
<style lang="scss" scoped>
.flexbox{display: flex;}
.container {
height: 100vh;
background-color: #fff;
padding: 10rpx;
}
.leve1 {
.item {
text-align: center;
height: 400rpx;
justify-content: center;
align-items: center;
.txt{margin-bottom: 20rpx;}
.price{font-size: 50rpx; color: #ff5500; }
.img { margin-bottom: 20rpx;
image {
margin: 0 auto;
}
}
}
}
.leve2{ text-align: center; font-size: 30rpx;
.times{ padding: 20rpx; font-size: 28rpx; line-height: 60rpx;
.flexbox{width: 100%; justify-content:space-between;}
}
}
.leve3{width: 100%; justify-content: space-around; margin-top: 50rpx;
.item{width: 40%;}
}
</style>

1571
pages/peanut/home.vue Normal file
View File

File diff suppressed because it is too large Load Diff

467
pages/peanut/mine.vue Normal file
View File

@@ -0,0 +1,467 @@
<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"
v-if="userMes.tel"
>({{ userMes.tel }})</text
>
<text style="margin-left: 20rpx; font-size: 22rpx; color: #888" v-else
>({{ userMes.email }})</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 v-if="iosHide">
<b>{{ userMes.peanutCoin }}</b>
天医币
</view>
<view v-if="iosHide">
<b>{{ userMes.conponsCount }}</b>
优惠券
</view>
<!-- <b class="chong_btn" @click="onPageJump('../sdkDemo/pay')">充 值</b> -->
<b class="chong_btn" v-if="iosHide" @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('../clock/clockList')">
<text>我的打卡</text>
</view> -->
<!-- <view class="nav_list" @click="onPageJump('../listen/home')" v-if="iosHide">
<text>我的听书</text>
</view> -->
<!-- 暂时去掉 -->
<!-- <view class="nav_list" @click="onPageJump('../listen/setListen')" v-if="iosHide">
<text>听书设置</text>
</view> -->
<!-- <view class="nav_list" @click="onPageJump('../peanut/myComments')">
<text>我的评价</text>
</view> -->
<!-- 暂时去掉 -->
<view class="nav_list" @click="onPageJump('../peanut/shopping')">
<text>购物车</text>
</view>
<!-- <view v-if="showEbook" class="nav_list" @click="onPageJump('../eBook/bookBuy')">
<text>电子书购买记录</text>
</view> -->
<!-- <view v-if="showEbook" 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>帮助与反馈11111</text>
</view> -->
<!-- <view class="nav_list" @click="newOnShare" v-if="isAndorid"> -->
<view class="nav_list" @click="newOnShare">
<text>分享App</text>
</view>
<view class="nav_list" @click="onPageJump('../peanut/aboutUs')">
<text>关于我们</text>
</view>
<view class="nav_list" @click="signShow = true">
<text>退出登录</text>
</view>
<view class="nav_list" @click="logout">
<text>注销帐号</text>
</view>
</view>
<u-modal
:show="signShow"
:content="signContent"
:showCancelButton="true"
@cancel="signShow = false"
@confirm="signOut"
>
</u-modal>
<!-- 分享弹窗 -->
<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
<uni-popup-share @select="haveSelected"></uni-popup-share>
</uni-popup>
<music-play :playData="playData"></music-play>
<z-navigation></z-navigation>
</view>
</template>
<script>
import musicPlay from "@/components/music.vue";
import $http from "@/config/requestConfig.js";
// import appShare, { closeShare } from '@/uni_modules/zhouWei-APPshare/js_sdk/appShare';
import { mapState, mapMutations } from "vuex";
export default {
data() {
return {
showEbook: false, // 显示电子书相关
userMes: {},
signShow: false,
signContent: "是否要退出登录？",
playData: {},
isAndorid: true,
platform: null, // 设备系统
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
// #ifdef APP-PLUS
this.getOS();
this.platform = uni.getSystemInfoSync().platform;
// console.log('操纵系统',this.platform)
// #endif
},
computed: {
...mapState(["userInfo"]),
},
//页面显示
onShow() {
// 隐藏原生的tabbar
uni.hideTabBar();
this.getData();
},
components: {
musicPlay,
},
//方法
methods: {
...mapMutations(["setUserInfo"]),
// 获得操作系统
getOS() {
let oprateOs = "";
oprateOs = uni.getSystemInfoSync().platform;
// console.log(oprateOs)
if (oprateOs == "android") {
this.isAndorid = true;
} else {
this.isAndorid = false;
}
},
haveSelected(data) {
console.log(data, " 选择的是");
if (data.index == 0) {
// 分享到好友
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 0,
href: this.$apkUrl,
title: "疯子读书",
summary: "我正在使用疯子读书提升自己，赶紧跟我一起来体验吧！",
imageUrl: "static/fengziIcon.jpg",
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
},
});
} else if (data.index == 1) {
// 分享到朋友圈
uni.share({
provider: "weixin",
scene: "WXSceneTimeline",
type: 0,
href: this.$apkUrl,
title: "疯子读书",
summary: "我正在使用疯子读书提升自己，赶紧跟我一起来体验吧！",
imageUrl: "static/fengziIcon.jpg",
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
},
});
}
},
switchTab(url) {
uni.switchTab({
url: url,
});
},
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(" ")
);
}
});
}
},
// 新写分享
newOnShare() {
this.$refs.share.open();
},
// 注销账户
logout() {
let that = this;
uni.showModal({
title: "提示",
content: "确定要注销当前账户吗？",
success: function (res) {
if (res.confirm) {
uni.showModal({
title: "提示",
showCancel: false,
content: `注销申请已提交成功,请联系客服进行后续操作：022-24142321`,
success: function (res1) {
if (res1.confirm) {
that.signOut();
}
},
});
} else if (res.cancel) {
// 取消操作
}
},
});
},
// 跳转
onGoing() {
uni.showToast({
icon: "none",
title: "开发中，敬请期待...",
});
},
onPageJump(url) {
console.log(url, "url");
uni.navigateTo({
url: url,
});
},
// 退出登录
signOut() {
this.signShow = false;
this.setUserInfo({ token: null });
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>

731
pages/peanut/opeVip.vue Normal file
View File

@@ -0,0 +1,731 @@
<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>
<view class="text">
<image src="../../static/icon/mine_v.png" alt=""></image>
疯子读书会员
<br>
<i>VIPFENGZIDUSHU</i>
<br>
<b>加入会员立项4项特权</b>
</view>
</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}}
<span v-if="item.id == 4" style="color: #bbb; margin-left: 10px;">{{userMes.peanutCoin}}天医币可用</span>
<span @click.stop="buPoint" style="color: #bf0c0c; margin-left: 10px;" v-if="item.id == 4" class="chongBtn">去充值</span>
<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" style="float: left; display: flex;">
<radio-group class="agree">
<view v-for="(item, index) in argee" :key="index" >
<radio class="agreeRadio" :value="item.id" :checked="item.id==radioValue" @click="radioCheck(index)"></radio>
<!-- <view>{{item.value}}</view> -->
</view>
</radio-group>
<view>* 我已阅读并同意<span class="highlight" @click="showXieyi">《会员服务协议》</span></view></view>
<view class="vip_btn">
<view @click="goPoinBuy">立即开通会员</view>
</view>
<!-- 充值协议 -->
<u-popup :show="xieyiShow" :round="10" @close="xieyiShow=false">
<view class="tanchu">
<view class="dp_title">{{xieyi.title}}</view>
<view style="max-height: 1000rpx;overflow-y: scroll;">
<view v-html="xieyi.content"></view>
</view>
</view>
</u-popup>
<music-play :playData="playData"></music-play>
</view>
</template>
<script>
import musicPlay from '@/components/music.vue'
import $http from '@/config/requestConfig.js';
import {
mapState
} from 'vuex';
import {
setPay,
setPayAssign
} from '@/config/utils';
export default {
data() {
return {
playData:{},
xieyiShow : false,
xieyi:{
title:'',
content:''
},
argee:[
{value:false,id:'1'}
] ,// 同意权限
radioValue:'',
stepsVc: {},
vcList: [],
userMes:{},
payType: 4,
paylist: [
// {
// title: '支付宝',
// id: 1,
// img: '../../static/icon/pay_1.png'
// },
{
title: '天医币充值',
id: 4,
img: '../../static/icon/oder_chong.png'
}
// {
// title: '微信',
// id: 2,
// img: '../../static/icon/pay_2.png'
// }
],
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
this.getData()
},
//页面显示
onShow() {
this.getDataPoint()
// 隐藏原生的tabbar
uni.hideTabBar();
},
computed: {
...mapState(['userInfo']),
},
components:{
musicPlay
},
//方法
methods: {
showXieyi(){
this.$http
.get(`sys/agreement/list?key=member`)
.then(res => {
this.xieyi = res.page.list[0]
this.xieyiShow = true
})
},
radioCheck (index) {
this.argee.forEach((item =>{
item.isCheck = false
}))
if(this.radioValue==this.argee[index].id) {
this.radioValue =null
}else {
this.radioValue = this.argee[index].id
}
// console.log(this.radioValue)
},
goPoinBuy(){
if(this.radioValue == '1'){
if(this.stepsVc.money > this.userMes.peanutCoin){
// uni.showToast({
// title:'天医币不足，请充值',
// icon: 'none',
// duration: 2000
// })
uni.showModal({
title: '提示',
content: '天医币不足',
confirmText:'去充值',
showCancel:'知道了',
success: function (res) {
let that = this
if (res.confirm) {
console.log('用户点击确定');
uni.navigateTo({
url: '../peanut/reCharge'
});
} else if (res.cancel) {
//console.log('用户点击取消');
}
}
});
return
}else{
this.kaiVip()
}
}else{
uni.showToast({
title:'请勾选服务协议',
icon:'error'
})
return false
}
},
// 充值天医币
buPoint() {
uni.navigateTo({
url: '../peanut/reCharge'
});
},
getDataPoint() {
let that = this
// 获取个人信息
// 用户详情
if (this.userInfo.id != undefined) {
this.$http
.post('book/user/info/' + this.userInfo.id)
.then(res => {
this.userMes = res.user
// consol.log(this.userMes.peanutCoin,'呼呼')
if (this.userMes.vip != 0) {
this.typeFen = 2
}
});
}
},
// 获取会员类型
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) {
console.log(res)
if(that.payType != 4){
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'
});
}
})
}else{
console.log(that.userMes)
this.$http
.post('book/user/openVipByVirtualCoin', {
'configId': that.stepsVc.priceTypeId,
'userId': that.userMes.id,
'orderSn':res.orderSn
})
.then(res => {
if(res.code == 0){
console.log(res, 'res')
uni.showToast({
title: "充值成功",
icon:'success',
duration:2000
});
setTimeout(()=>{
uni.switchTab({
url: '../bookShop/orderList'
});
},1000)
}
})
}
}else{
uni.showToast({
title: "下单失败",
icon:'Error',
duration:2000
});
}
})
},
// 跳转
onPageJump(url) {
uni.navigateTo({
url: url
});
},
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.highlight{color: $uni-color-primary;}
.agreeRadio{ zoom: .8;}
.tanchu {
padding: 40rpx 30rpx 40rpx 30rpx;
position: relative;
.dp_title {
font-size: 32rpx;
margin-bottom: 50rpx;
color: #555;
text-align: center;
font-weight: bold;
}
.dp_add {
position: absolute;
top: 40rpx;
right: 30rpx;
font-size: 22rpx;
background-color: #fd6004;
color: #fff;
border-radius: 10rpx;
padding: 5rpx 10rpx;
.u-icon {
display: inline-block;
margin-right: 5rpx;
}
}
.addressItem {
border: 2px dashed #d9d9d9;
border-radius: 10rpx;
width: 100%;
display: flex;
padding: 20rpx 10rpx;
margin: 25rpx 0 0 0;
align-items: center;
background-color: #fff;
.addrContent {
margin-left: 40rpx;
flex: 1;
.addrContentTop {
display: flex;
align-items: flex-end;
margin: 0 0 15rpx 0;
position: relative;
.userName {
font-size: 35rpx;
font-weight: bold;
margin-right: 30rpx;
}
.userTel {
font-size: 25rpx;
color: #888;
}
.userMoren {
border: 1px solid #fd6004;
color: #fd6004;
padding: 3rpx 10rpx;
font-size: 22rpx;
border-radius: 10rpx;
margin: 0 0 0 20rpx;
}
.chooseCheck {
position: absolute;
top: 3rpx;
right: 6rpx;
}
}
.addrContentBottom {
font-size: 32rpx;
}
}
}
.addressItem.addItem_style {
border-color: #fd6004;
}
.youhuiItem {
border: 1px solid #d9d9d9;
border-radius: 10rpx;
width: 100%;
display: flex;
padding: 20rpx 10rpx;
margin: 25rpx 0 0 0;
align-items: center;
background-color: #fff;
font-size: 30rpx;
}
.youhuiItem>view {
float: left;
}
.youhuiItem.youItem_style {
border-color: #fd6004;
}
}
.chongBtn {
background-color: #54a966;
color: #fff !important;
margin-left: 20rpx;
border-radius: 10rpx;
padding: 2rpx 10rpx;
font-size: 20rpx;
display: inline-block;
}
.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;}
.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>

756
pages/peanut/reCharge.vue Normal file
View File

@@ -0,0 +1,756 @@
<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%;" v-if="isAndroid">
<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>
<view style="width: 100%;" v-else>
<view v-for="(item, index) in iosPaylist" @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 flexbox" style="float: left; display: flex;">
<radio-group class="agree">
<view v-for="(item, index) in argee" :key="index">
<radio class="agreeRadio" :value="item.id" :checked="item.id==radioValue"
@click="radioCheck(index)"></radio>
</view>
</radio-group>
<view>* 我已阅读并同意<span class="highlight" @click="showXieyi">《增值服务协议》</span></view>
</view>
<view class="char_btn">
<view @click="goToPay">立即充值</view>
<!-- <view @click="iosPay" >立即充值</view> -->
</view>
<!-- 充值协议 -->
<u-popup :show="xieyiShow" :round="10" @close="xieyiShow=false">
<view class="tanchu">
<view class="dp_title">{{xieyi.title}}</view>
<view style="max-height: 1000rpx;overflow-y: scroll;">
<view v-html="xieyi.content"></view>
</view>
</view>
</u-popup>
<music-play :playData="playData"></music-play>
</view>
</template>
<script>
import musicPlay from '@/components/music.vue'
import $http from '@/config/requestConfig.js';
import {
checkIapOrder
} from '@/store/modules/common.js';
// import { // 引入ios支付
// Iap,
// IapTransactionState
// } from "@/utils/iap.js"
import {
mapState,mapMutations
} from 'vuex';
import {
setPay,
setPayAssign,setWXPay
} from '@/config/utils';
// const IAPOrders = [ // 根据这些ids获取到苹果app内商品信息，这些ids就是你上面设置的产品id
// 'add69'
// ]
export default {
data() {
return {
playData:{},
xieyi: {
title: '',
content: ''
},
chargeOrderSn:'', // 通过query传过来的orderSN（二次支付情况）
xieyiShow: false,
stepsCj: {},
cjList: [],
argee: [{
value: false,
id: '1'
}
], // 同意权限
radioValue: '',
orderSn: '', // 订单sn
productid: '',
isAndroid: true, // 是否为安卓环境
payType: 2,
// #ifdef APP-IOS
payType: 3,
// #endif
paylist: [{
title: '支付宝',
id: 2,
img: '../../static/icon/pay_1.png'
},
{
title: '微信',
id: 1,
img: '../../static/icon/pay_2.png'
}
],
iosPaylist: [{
title: 'apple pay支付',
id: 3,
img: '../../static/icon/pay_2.png'
}],
transaction: { // 成功回调
},
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
this.chargeOrderSn = e.orderSn
// console.log(e.orderSn,'orderSn')
},
//页面显示
onShow() {
// 隐藏原生的tabbar
// this.iphonepay()
uni.hideTabBar();
this.getDevName()
// setTimeout(()=>{
// uni.navigateTo({
// url:'/pages/user/persCount'
// })
// },2000)
},
computed: {
...mapState(['userInfo']),
},
components:{
musicPlay
},
//方法
methods: {
...mapMutations(['setUserInfo']),
// 关闭交易订单
finishTransaction(trans){
this.iapChannel.finishTransaction(trans, (success) => {
console.log('关闭订单成功');
this.setUserInfo({restoreFlag:false});
}, (fail) => {
console.log('关闭订单失败');
});
},
showXieyi() {
this.$http
.get(`sys/agreement/list?key=pay`)
.then(res => {
this.xieyi = res.page.list[0]
this.xieyiShow = true
})
},
radioCheck(index) { // 勾选用户协议
this.argee.forEach((item => {
item.isCheck = false
}))
if (this.radioValue == this.argee[index].id) {
this.radioValue = null
} else {
this.radioValue = this.argee[index].id
}
// console.log(this.radioValue)
},
iphonepay() {
const that = this
// 如果ios已经绑定支付信息，就直接支付，如果没有绑定，就需要先绑定
console.log('检测支付环境...')
plus.payment.getChannels((channels) => {
console.log(channels, 'channels')
for (var i in channels) {
// 判断是否苹果支付1
if (channels[i].id === 'appleiap') {
that.iapChannel = channels[i]
that.requestOrder()
}
}
})
},
requestOrder() {
uni.showLoading({
title: '获取商品信息',
mask: true
})
const that = this
console.log(that.stepsCj.priceTypeId, 88888888)
// ['xxxxx'] 是平台申请拿到的内购商品的id
let IAPOrders = []
IAPOrders.push(that.stepsCj.priceTypeId+'')
console.log(IAPOrders, 'IAPOrders')
// 新建订单
that.iapChannel.requestOrder(IAPOrders, function(event) {
// uni.hideLoading()
console.log(event, 'event')
for (var index in event) {
var OrderItem = event[index]
// console.log(OrderItem, 'OrderItem')
console.log(OrderItem.productid,'OrderItem.productid')
that.topay(OrderItem.productid)
}
}, function(erroemsg) {
uni.showToast({
title: "商品获取失败",
icon: 'none'
})
})
},
topay(id) {
const that = this
uni.hideLoading()
// if(this.chargeOrderSn != '' || this.chargeOrderSn != undefined){ // 判断是不是二次支付的订单
// that.orderSn = this.chargeOrderSn
// console.log(that.orderSn,'二次支付的订单号')
// }
// var restoreFlag = true; // 调用支付接口时标记 restoreFlag = true , 实际应用请将标记存储在 storage 中
this.setUserInfo({restoreFlag:true});
console.log(this.userInfo,'更新后的用户信息')
plus.payment.request(that.iapChannel, {
productid: id,
username: that.orderSn, // 用户标识/订单标识
manualFinishTransaction: true // 3.5.1+ 支持，设置此参数后需要开发者主动关闭订单，参见下面的关闭订单方法 finishTransaction()
}, function(result) {
// restoreFlag = false; // 支付成功清除标记 restoreFlag = false
that.transaction = result
// 支付成功，result 为 IAP商品交易信息对象 IAPTransaction 需将返回的支付凭证传给后端进行二次认证
that.iapCheck(result)
}, function(e) {
console.log('错误回调', e)
if(e.errCode == 2){
// 用户未绑定支付方式，app内支付流程结束，系统弹出框引导用户绑定支付方式，此过程将跳转到系统应用 AppStore 进行绑定支付方式，绑定成功同步支付成功，用户成功付款
plus.runtime.openURL("https://apps.apple.com/account/billing");
}else{
// restoreFlag = false; // 支付失败清楚标记
that.finishTransaction(result);
//console.log('订单关闭后的用户信息', that.userInfo);
console.log(e)
//console.log(e.message)
}
});
},
iapCheck(result) {
let that = this
console.log('进入后台验证')
let data = {
transactionId: result.transactionIdentifier, // 支付交易id
customerOid: that.userInfo.id,
productId: result.payment.productid, // 产品id
orderId: result.payment.username, // 系统订单号
receiptData: result.transactionReceipt ,// 苹果返回收据
// body: that.stepsCj.priceTypeId // 充值类型id
}
console.log(data,'data')
$http.request({
url: "/Ipa/veri",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
console.log(JSON.stringify(res))
if(res.code == 0){
//uni.hideLoading()
that.userInfo.restoreFlag == true ? that.setUserInfo({restoreFlag:false}) : ''
console.log(that.userInfo.restoreFlag)
console.log('充值订单已处理，请留意账户金额变动....')
// 服务器验证票据有效后在客户端关闭订单 (iapChannel.finishTransaction)
that.finishTransaction(result);
}
}).catch(e => {
uni.showModal({
title: '提示',
showCancel:false,
content: '支付验证失败，请稍后重启app，如不能解决您的问题，可联系官方客服',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
}
}
});
})
},
getDevName() {
// 获取使用环境
if (uni.getSystemInfoSync().platform === 'android') {
this.isAndroid = true
// console.log('运行Android上')
} else {
this.isAndroid = false
// console.log('运行iOS上')
}
this.getData();
},
// 获取充值金额
getData() {
// console.log(this.isAndroid)
if(this.isAndroid){
this.getAndorList()
}else{
this.getAppleList()
}
},
// 安卓充值列表
getAndorList(){
this.$http
.post('book/bookbuyconfig/getVipOrPoint', {
type: 'point',
qudao: 'Android'
})
.then(res => {
this.cjList = res.list
this.stepsCj = res.list[0]
});
},
// 苹果充值列表
getAppleList(){
this.$http
.post('book/bookbuyconfig/getVipOrPoint', {
type: 'point',
qudao: 'IOS'
})
.then(res => {
this.cjList = res.list
this.stepsCj = res.list[0]
});
},
// 点击充值金额
chosPric(e) {
this.stepsCj = e
console.log(e)
},
// 选择支付方式1
choseType(e) {
let that = this
that.payType = e
},
//ios充值
iosPay() {
this.iphonepay()
},
// 充值
goToPay(){
this.kaiChar()
},
// 正常充值
kaiChar() { // 常规充值
if (this.radioValue == '1') {
uni.showLoading({
title: '支付中，请勿离开',
icon: 'loading'
})
let that = this
let data = {
userId: that.userInfo.id, //下单人ID
userPhone: that.userInfo.tel, //收货人手机号
paymentMethod: that.payType, //2支付宝，1微信，3ios内购
orderMoney: that.stepsCj.money * 1, //订单金额
districtMoney: 0, //优惠金额
realMoney: that.stepsCj.money * 1, //实收金额
orderStatus: 0, //订单状态
orderType: "point", //订单类型
productId: that.stepsCj.priceTypeId // 充值的类型id
}
$http.request({
url: "book/buyOrder/rechargeSave",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头1
'Content-Type': 'application/json'
},
}).then(res => {
that.orderSn = res.orderSn
uni.hideLoading()
if (res.code == 0) {
if (that.payType == 2) {
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: "支付成功"
});
setTimeout(()=>{
uni.navigateTo({
url:'/pages/user/persCount'
})
},2000)
} else {
uni.showToast({
title: "支付失败",
icon: "none",
image: '../../static/icon/ic_close.png'
});
}
})
} else if (that.payType == 1) {
// 微信支付
that.orderSn = res.orderSn
let data1={
orderSn:that.orderSn,
buyOrderId: that.stepsCj.priceTypeId,
totalAmount: that.stepsCj.money
}
console.log(data1,'data1')
// console.log(this.userInfo.channelList,'channelList')
// this.userInfo.channelList.map(item => {
// if(item.id == "wxpay"){
// console.log('支持微信支付')
setWXPay(data1,res => {
if (res.success) {
uni.showToast({
title: "支付成功"
});
setTimeout(()=>{
uni.navigateTo({
url:'/pages/user/persCount'
})
},2000)
} else {
console.log(res)
if(res.data.errMsg.indexOf('User canceled') != -1){
uni.showToast({
title: "用户取消支付",
icon: "none",
image: '../../static/icon/ic_close.png'
});
}else{
uni.showToast({
title: "支付失败",
icon: "none",
image: '../../static/icon/ic_close.png'
});
}
}
})
// }
// })
} else if (that.payType == 3) {
console.log('苹果支付', )
that.iosPay()
}
}
})
} else {
uni.showToast({
title: '请勾选 已阅读会员服务协议',
icon: 'none'
})
return false
}
},
// 跳转
onPageJump(url) {
uni.navigateTo({
url: url
});
},
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.tanchu {
padding: 40rpx 30rpx 40rpx 30rpx;
position: relative;
.dp_title {
font-size: 32rpx;
margin-bottom: 50rpx;
color: #555;
text-align: center;
font-weight: bold;
}
.dp_add {
position: absolute;
top: 40rpx;
right: 30rpx;
font-size: 22rpx;
background-color: #fd6004;
color: #fff;
border-radius: 10rpx;
padding: 5rpx 10rpx;
.u-icon {
display: inline-block;
margin-right: 5rpx;
}
}
.addressItem {
border: 2px dashed #d9d9d9;
border-radius: 10rpx;
width: 100%;
display: flex;
padding: 20rpx 10rpx;
margin: 25rpx 0 0 0;
align-items: center;
background-color: #fff;
.addrContent {
margin-left: 40rpx;
flex: 1;
.addrContentTop {
display: flex;
align-items: flex-end;
margin: 0 0 15rpx 0;
position: relative;
.userName {
font-size: 35rpx;
font-weight: bold;
margin-right: 30rpx;
}
.userTel {
font-size: 25rpx;
color: #888;
}
.userMoren {
border: 1px solid #fd6004;
color: #fd6004;
padding: 3rpx 10rpx;
font-size: 22rpx;
border-radius: 10rpx;
margin: 0 0 0 20rpx;
}
.chooseCheck {
position: absolute;
top: 3rpx;
right: 6rpx;
}
}
.addrContentBottom {
font-size: 32rpx;
}
}
}
.addressItem.addItem_style {
border-color: #fd6004;
}
.youhuiItem {
border: 1px solid #d9d9d9;
border-radius: 10rpx;
width: 100%;
display: flex;
padding: 20rpx 10rpx;
margin: 25rpx 0 0 0;
align-items: center;
background-color: #fff;
font-size: 30rpx;
}
.youhuiItem>view {
float: left;
}
.youhuiItem.youItem_style {
border-color: #fd6004;
}
}
.agreeRadio {
zoom: .8;
}
.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;
}
}
}
.highlight {
color: $uni-color-primary;
}
.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>

331
pages/peanut/searchFor.vue Normal file
View File

@@ -0,0 +1,331 @@
<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="flexbox" style="display: flex; flex-wrap: wrap; justify-content: space-evenly;">
<view class="bl_tioa" v-for="(item,index) in bookList" @click="onBookJump(item)">
<image :src="item.productImages"></image>
<view>
<text class="bok_name">{{item.productName}}</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>
<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 style="padding-bottom: 20rpx;">
<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>
</view>
<view v-if="this.show==1&&this.bookList==''">
<u-divider text="暂无数据"></u-divider>
</view>
<music-play :playData="playData"></music-play>
</view>
</template>
<script>
import musicPlay from '@/components/music.vue'
export default {
data() {
return {
playData:{},
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)
.post('book/shopproduct/selectList?limit=8&page=1&key='+this.bookScreen.bookName)
.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()
},
components:{
musicPlay
},
//方法
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)
.post('book/shopproduct/selectList?limit=8&page=1&key='+ this.bookScreen.bookName)
.then(res => {
console.log(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) {
console.log(e,'e')
uni.navigateTo({
// url: '../eBook/bookContent?Id=' + e.id
url: '../bookShop/commodityDetail?type=2&id=' + e.productId
});
},
},
};
</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;
// justify-content: space-between;
.bl_tioa {
width: 30%;
box-shadow: 0 0px 10px 1px #d3d1d133; padding-bottom: 10rpx;
background-color: #fff; margin-bottom: 20rpx;
// position: relative;
// padding: 0 25upx 10upx 220upx;
// margin: 0 0 60rpx 0;
text-align: center;
border-radius: 15rpx;
min-height: 250rpx;
view {
display: block;
text { display: block;
color: #9b9b9b;
font-size: 24rpx;
line-height: 36rpx;
}
.bok_name {
font-weight: bold;
color: #333;
font-size: 28rpx;
}
}
image { display: inline-block;
padding-top:20rpx;
width: 160upx;
height: 220upx;
}
}
}
</style>

362
pages/peanut/shopping.vue Normal file
View File

@@ -0,0 +1,362 @@
<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 v-if="item.activityPrice && item.activityPrice > 0">￥{{item.activityPrice*item.productAmount}}</text>
<text v-else>￥{{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" >删除</text> -->
<button class="mini-btn" style="border-radius: 40rpx; font-size: 30rpx; height: 56rpx; line-height: 56rpx; margin-left: 6rpx;" v-if="isCartDelShow" @click="delCart()" type="warn" size="mini">删除</button>
</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>
<music-play :playData="playData"></music-play>
</view>
</template>
<script>
import musicPlay from '@/components/music.vue'
import $http from '@/config/requestConfig.js';
import {
mapState
} from 'vuex';
export default {
data() {
return {
playData:{},
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']),
},
components:{
musicPlay
},
//方法
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) {
if(item.activityPrice && item.activityPrice > 0){
price = item.productAmount * item.activityPrice;
}else{
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.isCartDelShow = false
this.totalPrice = 0
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-bottom: 104rpx;
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>