播放器雏形
This commit is contained in:
@fawn-nine
@@ -80,17 +80,20 @@
|
||||
<view style="height: 30rpx;"></view>
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<public-module></public-module>
|
||||
<music-play :playData="playData"></music-play>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import musicPlay from '@/components/music.vue'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playData:{},
|
||||
keyword: '', // 搜索索引值
|
||||
// 轮播图数据
|
||||
swiperlist: [{
|
||||
@@ -124,6 +127,9 @@
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
components: {
|
||||
musicPlay
|
||||
},
|
||||
onLoad() {
|
||||
// 获取分类
|
||||
this.$http
|
||||
|
||||
@@ -131,6 +131,7 @@
|
||||
this.$http
|
||||
.post('book/shopcategory/getOneLevel')
|
||||
.then(res => {
|
||||
console.log(res,'一级分类')
|
||||
this.oneLevel = res.list
|
||||
// this.current = e.type
|
||||
this.getTowLevel(this.oneLevel[0])
|
||||
@@ -144,6 +145,7 @@
|
||||
this.$http
|
||||
.post(`book/shopcategory/getTwoLevel?catId=${e.catId}`)
|
||||
.then(res => {
|
||||
console.log(res,'二级分类')
|
||||
this.towLevel = res.list
|
||||
if (this.towLevel == '') {
|
||||
this.commodityList = []
|
||||
@@ -174,6 +176,7 @@
|
||||
'catId': e.catId
|
||||
})
|
||||
.then(res => {
|
||||
console.log(res,'二级分类')
|
||||
this.commodityList = res.list
|
||||
})
|
||||
},
|
||||
|
||||
@@ -55,8 +55,25 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
用户评价
|
||||
<view v-else >
|
||||
<!-- 商品评价 -->
|
||||
<view class="" v-if="commentsList && commentsList.length > 0">
|
||||
<view class="pingjiaBox" v-for="(item, index) in commentsList" :key="index">
|
||||
<view class="flexbox">
|
||||
<view class="touxiang">
|
||||
<image :src="item.avatar" mode="aspectFit"></image>
|
||||
<text class="username nowrap ">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="contentBox">
|
||||
<view class="content" v-html="item.content"></view>
|
||||
<text class="time">2023-07-28</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="quesheng" v-else>
|
||||
<text>暂无评价~</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 120rpx;"></view>
|
||||
</view>
|
||||
@@ -103,16 +120,38 @@
|
||||
productInfo: {},
|
||||
productAmount: 1, // 商品数量
|
||||
cartList: [], // 购物车列表
|
||||
commentsList:[], // 评论列表
|
||||
productId:null, // 商品评论
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.getProDetail(e)
|
||||
this.getComment()
|
||||
onLoad(e) {
|
||||
this.productId = e.id
|
||||
this.getProDetail(e)
|
||||
this.getComments()
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
methods: {
|
||||
// 获取评价
|
||||
getComments(){
|
||||
$http.request({
|
||||
url: "buy/record/All",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档1
|
||||
data: {
|
||||
'bookid': this.productId
|
||||
},
|
||||
header: { //默认 无 说明：请求头
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
console.log(res,'评价')
|
||||
if(res.code == 0){
|
||||
this.commentsList = res.list
|
||||
}
|
||||
})
|
||||
},
|
||||
getProDetail(e){
|
||||
// 获取商品详情
|
||||
uni.showLoading({
|
||||
@@ -136,12 +175,7 @@
|
||||
}
|
||||
uni.hideLoading();
|
||||
})
|
||||
},
|
||||
|
||||
// 获取商品评论
|
||||
getComment(){
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
contentButtonClick(e){
|
||||
this.contentShow = e.index
|
||||
@@ -333,6 +367,22 @@ formatRichText (html) { //控制小程序中图片大小
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
|
||||
.pingjiaBox{color: #555; margin-bottom: 20rpx;}
|
||||
.flexbox{display: flex;}
|
||||
.contentBox{width: calc(100% - 50px);box-sizing: border-box; padding-left: 20rpx;
|
||||
.content{font-size: 28rpx; line-height: 40rpx;}
|
||||
.time{font-size: 24rpx; color: #999; margin-top: 6rpx; float: right;}
|
||||
}
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.touxiang{width:50px; overflow: hidden; text-align: center;
|
||||
image{width:50px !important; padding: 3px; height: 50px !important; border: 1px solid #eee; border-radius: 64px; overflow: hidden;;}
|
||||
.username{font-size: 24rpx; color: #999; margin-top: 6rpx; }
|
||||
}
|
||||
.xiangqing {
|
||||
overflow: hidden; overflow-x: hidden;
|
||||
img{display: block; max-width: 100%;}
|
||||
|
||||
@@ -49,6 +49,15 @@
|
||||
</view>
|
||||
<br clear="both">
|
||||
</view>
|
||||
<view class="orderOper" >
|
||||
<view style="width: 100%; text-align: right;">
|
||||
<view @click.stop="pingji(item.productId)" class="opCan" >评价</view>
|
||||
<view @click.stop="pingji(item.productId)" class="opCan" >追加评价</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<br clear="both">
|
||||
</view>
|
||||
<view class="orderContent" v-if="orderContet.products==''">
|
||||
@@ -89,48 +98,81 @@
|
||||
<text style="font-size: 24rpx;color: #666;">{{orderContet.createTime}}</text>
|
||||
</view>
|
||||
<view class="orderOper">
|
||||
<view v-if="orderContet.orderStatus==2" style="width: 100%; text-align: right;">
|
||||
<view style="width: 100%; text-align: right;">
|
||||
<!-- <u-button text="" type="success" plain ></u-button>
|
||||
<u-button text="" type="primary" plain >
|
||||
|
||||
</u-button> -->
|
||||
<view class="opFix" @click="onPageJump(orderID)">查看物流</view>
|
||||
<view class="opCan" @click="OverOrder" >确认收货</view>
|
||||
</view>
|
||||
<view v-if="orderContet.orderStatus==0" style="width: 100%; text-align: right;">
|
||||
<view class="opFix" @click="canceOrder">取消订单</view>
|
||||
<view class="opCan" @click="goPay">去支付</view>
|
||||
</view>
|
||||
<view style="width: 100%; text-align: right;">
|
||||
<view class="opFix" @click="pingji">评价</view>
|
||||
<view v-if="orderContet.orderStatus==2" class="opFix" @click="onPageJump(orderID)">查看物流</view>
|
||||
<view v-if="orderContet.orderStatus==2" class="opCan" @click="OverOrder" >确认收货</view>
|
||||
|
||||
<view v-if="orderContet.orderStatus==0" class="opFix" @click="canceOrder">取消订单</view>
|
||||
<view v-if="orderContet.orderStatus==0" class="opCan" @click="goPay">去支付</view>
|
||||
|
||||
|
||||
<view class="opCan" @click="kefu">联系客服</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 对话框 -->
|
||||
<u-popup :show="pingjiaShow" :round="10" @close="pingjiaShow=false">
|
||||
<u-popup :show="pingjiaShow" :round="10" @close="closePingjia">
|
||||
<view class="tanchu">
|
||||
<view class="dp_title">添加评价</view>
|
||||
<view style="max-height: 1000rpx;overflow-y: scroll;">
|
||||
<uni-forms :modelValue="Pform">
|
||||
<!-- 评价图片 -->
|
||||
<!-- <uni-forms-item label-width="0">
|
||||
<uni-file-picker @success="upSuccess" @select="select" v-model="Pform.img" fileMediatype="image" :image-styles="imageStyles"/>
|
||||
</uni-forms-item> -->
|
||||
<!-- 评价图片 -->
|
||||
<!-- end -->
|
||||
<uni-forms-item name="comment" label-width="0">
|
||||
<!-- <uni-forms-item name="comment" label-width="0">
|
||||
<uni-easyinput type="textarea" v-model="Pform.comment" placeholder="请输入您的商品评价" />
|
||||
</uni-forms-item>
|
||||
</uni-forms-item> -->
|
||||
</uni-forms>
|
||||
<u-button type="success" @click="submitPJ">提交评价</u-button>
|
||||
<!-- <u-button type="success" @click="submitPJ">提交评价</u-button> -->
|
||||
<!-- 提交 -->
|
||||
<view class="padding-bottom-sm flex padding-lr-sm" style="border-bottom: 1px solid #EEEEEE;">
|
||||
|
||||
<view class="mb20">
|
||||
<view v-html="Pform.html">
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="mb30">
|
||||
<span :class="['star',Pform.star>=1 ? 'starLight': 'starGray']" @click="getStar(1)"></span>
|
||||
<span :class="['star',Pform.star>=2 ? 'starLight': 'starGray']" @click="getStar(2)"></span>
|
||||
<span :class="['star',Pform.star>=3 ? 'starLight': 'starGray']" @click="getStar(3)"></span>
|
||||
<span :class="['star',Pform.star>=4 ? 'starLight': 'starGray']" @click="getStar(4)"></span>
|
||||
<span :class="['star',Pform.star>=5 ? 'starLight': 'starGray']" @click="getStar(5)"></span>
|
||||
</view>
|
||||
<view class="mb30">
|
||||
<!-- <uni-file-picker :auto-upload="false" ref="files" @delete="deleteImg" limit="5" @success="upSuccess" @select="select" v-model="Pform.img" fileMediatype="image" :image-styles="imageStyles"/> -->
|
||||
<u-upload :fileList="Pform.img" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="4"
|
||||
width="80" height="80" :previewFullImage="true">
|
||||
</u-upload>
|
||||
</view>
|
||||
<view class="flex-sub flexbox">
|
||||
<i @click="showEmj()" :class="emojiIcon" ></i>
|
||||
<!-- <input type="text" @focus="InputFocus" @blur="InputBlur" v-model="message" @input="textareaBInput" placeholder-style="font-size:24rpx;color:#aaaaaa;" placeholder="请输入您要发送的内容"></input> -->
|
||||
<textarea class="textarea" v-model="Pform.comment" @focus="InputFocus" @blur="InputBlur" @input="textareaBInput" placeholder-style="font-size:24rpx;color:#aaaaaa;" placeholder="请输入您要发送的内容"></textarea>
|
||||
</view>
|
||||
<view class="">
|
||||
<!-- <button class="cu-btn bg-gradual-blue shadow-blur">发送</button> -->
|
||||
<u-button type="success" @click="submitPJ">提交评价</u-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="position: relative;">
|
||||
<emotion @emotion="handleEmj" :height="220" v-if="isShowEmj" :windowWidth="windowWidth"></emotion>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import {
|
||||
setPay,
|
||||
@@ -142,10 +184,21 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello',
|
||||
isShowEmj: false,
|
||||
emojiIcon:'cuIcon-emoji',
|
||||
message: '',
|
||||
|
||||
|
||||
windowWidth:0,
|
||||
windowHeight:500,
|
||||
Pform:{ // 评价表单
|
||||
star:0,
|
||||
comment:'',
|
||||
img:[],
|
||||
html:''
|
||||
},
|
||||
productID:null, // 订单商品id
|
||||
imageStyles:{
|
||||
width:64,
|
||||
height:64,
|
||||
@@ -166,48 +219,191 @@
|
||||
deliverDetails: [{
|
||||
Traces: []
|
||||
}], // 物流详情信息全部
|
||||
deliverDetailsLength: null
|
||||
deliverDetailsLength: null,
|
||||
emoji:[],
|
||||
Files:[]
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.windowWidth = uni.getSystemInfoSync().windowWidth;
|
||||
this.orderID = e.orderId
|
||||
this.orderType = e.orderType
|
||||
this.orderSn = e.orderSn
|
||||
console.log(this.orderID,'this.orderID')
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.getOrderList()
|
||||
},
|
||||
components:{
|
||||
emotion
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
methods: {
|
||||
|
||||
methods: {
|
||||
handleEmj(i) {
|
||||
console.log(i,'i');
|
||||
this.inputValue = i
|
||||
// console.log(this.inputValue);
|
||||
if(i.emotioni == '[em_98]') {
|
||||
//匹配最后一个表情符号并删除11。
|
||||
this.Pform.comment = this.Pform.comment.replace(/(\[[^\]]+\]|[\s\S])$/, '');
|
||||
if(this.emoji.length > 0){
|
||||
this.emoji = this.emoji.slice(0,-1)
|
||||
}
|
||||
} else {
|
||||
this.emoji.push({'tag' : i.emotion, 'name':i.emotioni})
|
||||
// console.log(this.emoji,'this.emoji')
|
||||
this.Pform.comment += i.emotioni;
|
||||
/// this.Pform.html += i.emotion
|
||||
}
|
||||
},
|
||||
textareaBInput(e) {
|
||||
console.log(e,'e')
|
||||
this.Pform.comment = e.detail.value
|
||||
/// this.Pform.html = e.detail.value
|
||||
},
|
||||
showEmj() {
|
||||
let bool = !this.isShowEmj;
|
||||
if(bool) {
|
||||
this.emojiIcon = 'cuIcon-keyboard';
|
||||
} else {
|
||||
this.emojiIcon = 'cuIcon-emoji';
|
||||
}
|
||||
|
||||
this.isShowEmj = bool;
|
||||
this.$emit('show')
|
||||
},
|
||||
InputBlur(e){
|
||||
|
||||
},
|
||||
InputFocus(e){
|
||||
this.isShowEmj = false;
|
||||
this.emojiIcon = 'cuIcon-emoji';
|
||||
this.$emit('foc')
|
||||
},
|
||||
|
||||
// end
|
||||
deleteImg(e){
|
||||
// var arr = this.Pform.img.slice(0,-1)
|
||||
this.Pform.img.pop()
|
||||
// console.log('删除文件',arr)
|
||||
console.log(this.Pform)
|
||||
},
|
||||
getStar(i){
|
||||
this.Pform.star = i
|
||||
},
|
||||
select(e){
|
||||
console.log('选择文件：',e)
|
||||
console.log('选择文件：',e)
|
||||
let arr = e.tempFiles.map(item => {
|
||||
return {'url':item.url,'name':item.name}
|
||||
})
|
||||
this.Pform.img = this.Pform.img.concat(...arr)
|
||||
//this.Pform.img = arr
|
||||
console.log(this.Pform,'img')
|
||||
},
|
||||
upSuccess(e){
|
||||
console.log(e)
|
||||
},
|
||||
// 获取html格式的评论1
|
||||
getHtmlComment(){
|
||||
var ss = this.Pform.comment
|
||||
if(this.emoji.length> 0){
|
||||
for (var i = 0; i<this.emoji.length; i++){
|
||||
if(this.Pform.comment.indexOf(this.emoji[i].name) !== -1 ){
|
||||
//var re = new RegExp(this.emoji[0].name,"g"); //定义正则表达式
|
||||
//第一个参数是要替换掉的内容，第二个参数"g"表示替换全部（global）。
|
||||
// ss = ss.replace(re, ); //第一个参数是正则表达式。
|
||||
ss = ss.replace(this.emoji[i].name, this.emoji[i].tag)
|
||||
// console.log(ss)
|
||||
}
|
||||
}
|
||||
this.Pform.html = ss
|
||||
}else{
|
||||
this.Pform.html = this.Pform.comment
|
||||
}
|
||||
|
||||
//console.log(this.Pform.html,'this.Pform.html')
|
||||
},
|
||||
deletePic() {
|
||||
let that = this
|
||||
that.Pform.img.splice(0, 1)
|
||||
//console.log(that.Pform.img)
|
||||
},
|
||||
afterRead(e) {
|
||||
//console.log(e)
|
||||
let that = this
|
||||
for (var i=0; i< e.file.length; i++) {
|
||||
//console.log(i,e.file[i].url)
|
||||
uni.uploadFile({
|
||||
url: this.$baseUrl + 'oss/fileoss',
|
||||
filePath: e.file[i].url,
|
||||
//files:e.file,
|
||||
name: 'file',
|
||||
formData: {},
|
||||
success: (res) => {
|
||||
that.Pform.img.push({
|
||||
url: JSON.parse(res.data).url
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
closePingjia(){
|
||||
this.pingjiaShow = false
|
||||
this.Pform.comment = ''
|
||||
this.Pform.html = ''
|
||||
this.emoji = []
|
||||
},
|
||||
// 提交评价
|
||||
submitPJ(){
|
||||
if(this.Pform.comment != ''){
|
||||
console.log(this.Pform,'this.Pform')
|
||||
return false
|
||||
this.$http
|
||||
.post('buy/record/comment',{
|
||||
'userid':this.userInfo.id,
|
||||
'orderSn': this.orderSn,
|
||||
//'starLevel':'',
|
||||
'comment': this.Pform.comment,
|
||||
})
|
||||
.then(res => {
|
||||
// 格式化html
|
||||
var ss = this.Pform.comment
|
||||
if(this.emoji.length> 0){
|
||||
for (var i = 0; i<this.emoji.length; i++){
|
||||
if(this.Pform.comment.indexOf(this.emoji[i].name) !== -1 ){
|
||||
//var re = new RegExp(this.emoji[0].name,"g"); //定义正则表达式
|
||||
//第一个参数是要替换掉的内容，第二个参数"g"表示替换全部（global）。
|
||||
// ss = ss.replace(re, ); //第一个参数是正则表达式。
|
||||
ss = ss.replace(this.emoji[i].name, this.emoji[i].tag)
|
||||
// console.log(ss)
|
||||
}
|
||||
}
|
||||
this.Pform.html = ss
|
||||
}else{
|
||||
this.Pform.html = this.Pform.comment
|
||||
}
|
||||
|
||||
let data={
|
||||
'userid':this.userInfo.id,
|
||||
'orderSn': this.orderSn,
|
||||
'bookid': this.productID,
|
||||
'content': this.Pform.html,
|
||||
'starLevel':this.Pform.star,
|
||||
'images':this.Pform.img
|
||||
}
|
||||
// console.log(data,'data')
|
||||
$http.request({
|
||||
url: "buy/record/UserRecordcomment",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data,
|
||||
header: { //默认 无 说明：请求头
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.showToast({
|
||||
title:'评价成功！',
|
||||
icon:'success'
|
||||
})
|
||||
|
||||
this.pingjiaShow = false
|
||||
this.Pform.comment = ''
|
||||
this.Pform.html = ''
|
||||
this.emoji = []
|
||||
}
|
||||
})
|
||||
}else{
|
||||
@@ -218,7 +414,9 @@
|
||||
}
|
||||
},
|
||||
// 添加评价
|
||||
pingji(){
|
||||
pingji(id){
|
||||
console.log(id)
|
||||
this.productID = id
|
||||
this.pingjiaShow = true
|
||||
},
|
||||
// 联系客服
|
||||
@@ -285,6 +483,10 @@
|
||||
.post(`book/buyorder/appGetOrderInfo/${this.orderType}?orderId=${this.orderID}`)
|
||||
.then(res => {
|
||||
this.orderContet = res.buyOrder
|
||||
this.productIDs = res.buyOrder.products.map(item => {
|
||||
return item.productId
|
||||
})
|
||||
// console.log(this.orderContet,'this.orderContet')
|
||||
if (this.orderContet.orderStatus == 0) {
|
||||
this.titleStat = '待支付'
|
||||
} else if (this.orderContet.orderStatus == 1) {
|
||||
@@ -383,6 +585,15 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.star{display: inline-block; width: 20px; height: 20px; margin-right: 10rpx;}
|
||||
.starGray{ background : url(../../static/icon/star_greey.png) no-repeat; background-size: contain; }
|
||||
.starLight{ background : url(../../static/icon/star_light.png) no-repeat; background-size: contain;}
|
||||
.cuIcon-emoji {
|
||||
background : url(../../static/biaoqing.png) no-repeat; background-size: contain; display: block; margin-right: 20rpx;
|
||||
width: 30px; }
|
||||
.cuIcon-keyboard{background : url(../../static/biaoqing.png) no-repeat; background-size: contain; display: block;
|
||||
width: 30px; }
|
||||
.mb30{margin-bottom: 30rpx; overflow: hidden;}
|
||||
.tanchu {
|
||||
padding: 40rpx 30rpx 40rpx 30rpx;
|
||||
position: relative;
|
||||
|
||||
@@ -159,9 +159,9 @@
|
||||
|
||||
// 电子书内容跳转
|
||||
onBookJump(e) {
|
||||
uni.navigateTo({
|
||||
url: './bookContent?Id=' + e.id
|
||||
});
|
||||
// uni.navigateTo({
|
||||
// url: './bookContent?Id=' + e.id
|
||||
// });
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
22
pages/listen/bgMusic.vue
Normal file
22
pages/listen/bgMusic.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view>
|
||||
4545
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
403
pages/listen/bgMusix.vue
Normal file
403
pages/listen/bgMusix.vue
Normal file
@@ -0,0 +1,403 @@
|
||||
<template>
|
||||
<view style="padding-bottom: 250rpx;">
|
||||
<view style="padding-bottom: 250rpx;">
|
||||
<view v-for="(song, index) in playlist" :key="index" @click="play(index)" class="music-item" :class="{'music-item__hover': playIndex === index}">
|
||||
<view class="music-info">
|
||||
<text class="music-name">{{song.musicName}}</text>
|
||||
<!-- <view class="music-creators">
|
||||
<text class="music-creator">{{song.musicArtist + ' '}}</text>
|
||||
<text class="music-al">- {{song.musicAlbum}}</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view @click="showFloatWindow">打开浮窗</view>
|
||||
<view @click="hideFloatWindow">关闭浮窗</view>
|
||||
<!-- <view @click="setFavour">{{ favour ? '搜藏' : '未搜藏' }}</view> -->
|
||||
<view @click="last">上一首</view>
|
||||
<view @click="playOrPause">{{ playing ? '暂停' : '播放' }}</view>
|
||||
<view @click="next">下一首</view>
|
||||
<view @click="switchNotification">{{ systemNotification ? '系统' : '自定义' }}</view>
|
||||
<view @click="lockActivity">{{ isLockActivity ? '关闭' : '打开' }}锁屏页</view>
|
||||
<!-- <view @click="setWidgetStyle">修改小部件</view> -->
|
||||
<view @click="logout">退出</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playIndex: 0, //播放下标
|
||||
playing: false, //播放状态
|
||||
isLockActivity: false, // 是否开启锁屏页
|
||||
isCreateNotification: false, // 是否创建了Notification
|
||||
systemNotification: false, // 是否使用系统的 Notification, 只有 android 8.0 以上才有效
|
||||
themeColor: '#55ff00ff',
|
||||
playlist:[ // 本地音乐列表
|
||||
{
|
||||
id: 1, //ID
|
||||
musicName: "美人谷", //歌名
|
||||
//musicArtist: "阿兰", //歌手
|
||||
// musicAlbum: "美人谷",//专辑
|
||||
musicAlbumID: 1, //专辑ID
|
||||
musicAlbumURl: "https://p1.music.126.net/byZ9hvAI2r20WBnuB-S_ng==/109951163069341151.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0", //专辑图片路径
|
||||
musicPath: "https://ehh-private-01.oss-cn-beijing.aliyuncs.com/2023/07/14/6c6d7f7b947c4dc18881e8682b4dc36a2ce742.mp3", //路径
|
||||
//musicYear: "2017-10-27", //发布年份
|
||||
musicDuration: 281000, //时长
|
||||
// size: 3436481, //文件大小
|
||||
lyric: ''
|
||||
|
||||
}, {
|
||||
id: 2,
|
||||
musicName: "朝暮",
|
||||
// musicArtist: "阿兰",
|
||||
// musicAlbum: "朝暮",
|
||||
musicAlbumID: 2,
|
||||
musicAlbumURl: "https://p1.music.126.net/hB5AqPeXTg5Q-5BsyLiCwg==/109951164325877834.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0",
|
||||
musicPath: "http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4",
|
||||
//musicYear: "2019-08-28",
|
||||
musicDuration: 247000,
|
||||
// size: 3022101,
|
||||
lyric: ''
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.init()
|
||||
// 监听生命周期事件回调
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
// 移除监听生命周期事件回调
|
||||
plus.globalEvent.removeEventListener('musicLifecycle')
|
||||
// 移除暂停或播放按钮事件回调监听
|
||||
plus.globalEvent.removeEventListener('musicNotificationPause')
|
||||
// 移除播放上一首按钮事件回调监听
|
||||
plus.globalEvent.removeEventListener('musicNotificationPrevious')
|
||||
// 移除播放下一首按钮事件回调监听
|
||||
plus.globalEvent.removeEventListener('musicNotificationNext')
|
||||
// 移除收藏按钮事件回调监听
|
||||
plus.globalEvent.removeEventListener('musicNotificationFavourite')
|
||||
// 移除耳机事件回调监听
|
||||
plus.globalEvent.removeEventListener('musicMediaButton')
|
||||
// 移除关闭按钮事件回调
|
||||
plus.globalEvent.removeEventListener('musicNotificationClose')
|
||||
},
|
||||
onBackPress() {
|
||||
// 退回桌面后台播放
|
||||
let main = plus.android.runtimeMainActivity();
|
||||
plus.android.invoke(main, 'moveTaskToBack', false);
|
||||
return true;
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.audioMannager = uni.getBackgroundAudioManager();
|
||||
// bgAudioManager.title = '致爱丽丝';
|
||||
// bgAudioManager.singer = '暂无';
|
||||
// bgAudioManager.coverImgUrl = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
|
||||
// bgAudioManager.src = 'http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11582.mp3';
|
||||
this.musicNotification = uni.requireNativePlugin('XZH-musicNotification');
|
||||
this.musicNotification.init({
|
||||
//点击通知栏跳转页面
|
||||
path: '/pages/listen/bgMusix', // 非必传
|
||||
// (废弃)设置状态栏小图标，只有 android 8.0 以上才有效，新的方式：覆盖插件目录的 android/res/drawable/music_icon.png
|
||||
icon: '',
|
||||
});
|
||||
plus.globalEvent.addEventListener('musicLifecycle', (e) => {
|
||||
console.log("生命周期", e);
|
||||
});
|
||||
// 监听暂停或播放按钮事件回调
|
||||
plus.globalEvent.addEventListener('musicNotificationPause', (e) => {
|
||||
console.log("暂停或播放按钮事件回调", e);
|
||||
this.playOrPause()
|
||||
});
|
||||
// 监听播放上一首按钮事件回调
|
||||
plus.globalEvent.addEventListener('musicNotificationPrevious', (e) => {
|
||||
console.log("播放上一首按钮事件回调", e);
|
||||
this.last()
|
||||
});
|
||||
// 监听播放下一首按钮事件回调
|
||||
plus.globalEvent.addEventListener('musicNotificationNext', (e) => {
|
||||
console.log("播放下一首按钮事件回调", e);
|
||||
this.next();
|
||||
});
|
||||
// 监听收藏按钮事件回调
|
||||
plus.globalEvent.addEventListener('musicNotificationFavourite', (e) => {
|
||||
console.log("收藏按钮事件回调", e);
|
||||
this.setFavour()
|
||||
});
|
||||
// 监听关闭按钮事件回调
|
||||
plus.globalEvent.addEventListener('musicNotificationClose', (e) => {
|
||||
console.log("关闭按钮事件回调", e);
|
||||
this.logout()
|
||||
});
|
||||
// 监听耳机事件回调，注意只能在应用播放音乐的时候才能接收到事件
|
||||
plus.globalEvent.addEventListener('musicMediaButton', (e) => {
|
||||
console.log("耳机按钮事件回调", e);
|
||||
uni.showToast({
|
||||
title: JSON.stringify(e),
|
||||
icon:'none',
|
||||
position:"center"
|
||||
})
|
||||
switch (e.type) {
|
||||
case 'headset':
|
||||
// 有线耳机事件 拔出： 0, 插入：1
|
||||
if (e.keyCode === 0) {
|
||||
this.playOrPause(false);
|
||||
}
|
||||
break;
|
||||
case 'bluetooth':
|
||||
// 蓝牙耳机事件 断开： 0, 打开：1，连接：2
|
||||
if (e.keyCode === 0) {
|
||||
this.playOrPause(false);
|
||||
}
|
||||
break;
|
||||
case 'mediaButton':
|
||||
// 耳机按键事件，如果有的耳机按键按了没反应，不要怀疑是插件问题，插件已经把事件直接返回了，没有事件，那就是耳机根本没发起事件
|
||||
switch (e.keyCode) {
|
||||
case 79:
|
||||
/** 谷歌原文 Key code constant: Headset Hook key. Used to hang up calls and stop media. */
|
||||
this.playOrPause();
|
||||
break;
|
||||
case 87:
|
||||
/** 谷歌原文 Key code constant: Play Next media key. */
|
||||
this.next();
|
||||
break;
|
||||
case 88:
|
||||
/** 谷歌原文 Key code constant: Play Previous media key. */
|
||||
this.last();
|
||||
break;
|
||||
case 126:
|
||||
/** 谷歌原文 Key code constant: Play media key. */
|
||||
this.playOrPause(true);
|
||||
break;
|
||||
case 127:
|
||||
/** 谷歌原文 Key code constant: Pause media key. */
|
||||
this.playOrPause(false);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// this.audioMannager.onCanplay(() => {
|
||||
// console.log('onCanplay',this.audioMannager.duration);
|
||||
|
||||
// let res = this.musicNotification.update({
|
||||
// //歌曲名字
|
||||
// songName: this.playlist[this.playIndex].musicName,
|
||||
// //专辑名字
|
||||
// // artistsName: this.playlist[this.playIndex].musicArtist,
|
||||
// //搜藏
|
||||
// // favour: this.playlist[this.playIndex].favour,
|
||||
// //专辑图片
|
||||
// picUrl: this.playlist[this.playIndex].musicAlbumURl,
|
||||
// // 时长
|
||||
// duration: this.audioMannager.duration * 1000
|
||||
// });
|
||||
|
||||
// switch (res.code) {
|
||||
// case -1: //未知错误
|
||||
// console.log("未知错误");
|
||||
// return;
|
||||
// case -2: //没有权限1
|
||||
// this.musicNotification.openPermissionSetting(); //没有权限，跳转设置页面
|
||||
// return;
|
||||
// }
|
||||
// })
|
||||
this.audioMannager.onEnded(() => this.next())
|
||||
this.audioMannager.onError(() => this.next())
|
||||
},
|
||||
showFloatWindow: function() {
|
||||
if(this.checkOverlayDisplayPermission()) {
|
||||
this.musicNotification.showFloatWindow("#AD1EF7")
|
||||
} else {
|
||||
// 没有权限，弹出一个对话框1
|
||||
this.showLockActivityModal(() => this.musicNotification.showFloatWindow("#AD1EF7"))
|
||||
}
|
||||
},
|
||||
hideFloatWindow: function() {
|
||||
this.musicNotification.hideFloatWindow()
|
||||
},
|
||||
checkOverlayDisplayPermission() {
|
||||
// 检查是否有浮窗权限
|
||||
return this.musicNotification.checkOverlayDisplayPermission()
|
||||
},
|
||||
last: function() {
|
||||
this.play(--this.playIndex);
|
||||
},
|
||||
next: function() {
|
||||
this.play(++this.playIndex);
|
||||
console.log(this.playIndex,'this.playIndex')
|
||||
},
|
||||
play: async function(index) {
|
||||
console.log(!this.isCreateNotification);
|
||||
if (!this.isCreateNotification) await this.createNotification();
|
||||
|
||||
this.playIndex = index;
|
||||
if (this.playIndex < 0) {
|
||||
this.playIndex = this.playlist.length - 1;
|
||||
} else if (this.playIndex > this.playlist.length - 1) {
|
||||
this.playIndex = 0;
|
||||
}
|
||||
|
||||
const data = this.playlist[this.playIndex];
|
||||
this.audioMannager.title = data.musicName;
|
||||
// this.audioMannager.singer = data.musicArtist;
|
||||
this.audioMannager.coverImgUrl = data.musicAlbumURl;
|
||||
this.audioMannager.src = data.musicPath;
|
||||
|
||||
this.playOrPause(true)
|
||||
},
|
||||
createNotification: function() {
|
||||
// 创建通知栏，要创建通知栏成功才能做别的操作
|
||||
return new Promise((resolve, reject) => {
|
||||
this.musicNotification.createNotification(() => {
|
||||
this.isCreateNotification = true;
|
||||
resolve();
|
||||
})
|
||||
})
|
||||
},
|
||||
playOrPause: function(playing) {
|
||||
this.playing = typeof playing === 'boolean' ? playing : !this.playing;
|
||||
this.musicNotification.playOrPause(this.playing);
|
||||
// 设置播放进度单位毫秒
|
||||
this.musicNotification.setPosition(this.audioMannager.currentTime * 1000);
|
||||
|
||||
if (this.playing) {
|
||||
this.audioMannager.play();
|
||||
} else {
|
||||
this.audioMannager.pause();
|
||||
}
|
||||
},
|
||||
lockActivity: function() {
|
||||
// 设置锁屏页，同时返回授权状态
|
||||
if(this.checkOverlayDisplayPermission()) {
|
||||
// 有权限
|
||||
this.musicNotification.openLockActivity(!this.isLockActivity)
|
||||
this.isLockActivity = !this.isLockActivity;
|
||||
} else {
|
||||
// 没有权限，弹出一个对话框
|
||||
this.showLockActivityModal(() => this.lockActivity())
|
||||
}
|
||||
},
|
||||
showLockActivityModal: function(callback) {
|
||||
uni.showModal({
|
||||
content: '该功能需要开启悬浮窗权限',
|
||||
success: ({ confirm }) => {
|
||||
if (confirm) {
|
||||
// 用户点击确定，注册授权监听
|
||||
plus.globalEvent.addEventListener('openLockActivity', ({
|
||||
type
|
||||
}) => {
|
||||
// 获得悬浮窗权限
|
||||
if (type) callback();
|
||||
// 注销授权监听
|
||||
plus.globalEvent.removeEventListener('openLockActivity');
|
||||
});
|
||||
/**
|
||||
* 没有悬浮窗权限，跳转设置页面
|
||||
*/
|
||||
this.musicNotification.openOverlaySetting();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// setFavour: function() {
|
||||
// // 设置收藏状态
|
||||
// this.playlist[this.playIndex].favour = !this.playlist[this.playIndex].favour
|
||||
// this.musicNotification.favour(this.playlist[this.playIndex].favour);
|
||||
// },
|
||||
switchNotification: function() {
|
||||
// 切换系统的 Notification
|
||||
this.systemNotification = !this.systemNotification
|
||||
this.musicNotification.switchNotification(this.systemNotification);
|
||||
},
|
||||
// setWidgetStyle: function() {
|
||||
// // 设置桌面小部件风格
|
||||
// // { bg, title, tip } 只支持 ARGB 和 RGB 的颜色值
|
||||
// this.themeColor = this.themeColor === '#55ff00ff' ? '#55ffff00' : '#55ff00ff';
|
||||
// this.musicNotification.setWidgetStyle({
|
||||
// themeColor: this.themeColor,
|
||||
// titleColor: '#FFFFFF',
|
||||
// artistColor: '#ff00ff'
|
||||
// })
|
||||
// },
|
||||
logout: function() {
|
||||
// 关闭通知栏
|
||||
this.isCreateNotification = false;
|
||||
console.log('logout');
|
||||
this.musicNotification.cancel();
|
||||
this.audioMannager.stop();
|
||||
// setTimeout(function() {
|
||||
// plus.runtime.quit();
|
||||
// }, 100)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.music-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.music-item__hover {
|
||||
background: #007AFF;
|
||||
}
|
||||
|
||||
.music-info {
|
||||
flex: 1;
|
||||
height: 100rpx;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.music-name {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.music-creators {
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.music-creator {
|
||||
font-size: 18rpx;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.music-al {
|
||||
font-size: 18rpx;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: fixed;
|
||||
bottom: 25rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.bottom>view {
|
||||
width: calc(25vw - 20rpx);
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
margin: 5rpx 10rpx;
|
||||
text-align: center;
|
||||
background-color: #007AFF;
|
||||
}
|
||||
</style>
|
||||
152
pages/listen/bigListen.vue
Normal file
152
pages/listen/bigListen.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<!--父组件-->
|
||||
|
||||
<view class="container">
|
||||
<view class="mini"></view>
|
||||
<view>
|
||||
<z-nav-bar title="悦耳听书"></z-nav-bar>
|
||||
<!-- <view class="pageTabBox">
|
||||
<u-tabs active-color="#27b386" :list="pageTab" :current="current" @change="TabChange" font-size='60'></u-tabs>
|
||||
</view> -->
|
||||
<!-- 正在播放章节 -->
|
||||
<view class="playTitle flexbox">
|
||||
<text class="nowPlayTitle">正在播放:</text><text-scroll :myStyle="StyleSheet" :text="boardRemark" class="textScroll"></text-scroll>
|
||||
</view>
|
||||
|
||||
<!-- 播放器 -->
|
||||
<view v-show="current==0">
|
||||
<view class="cxAdudioPlay" >
|
||||
<cxAdudioPlay :list="videoList" ></cxAdudioPlay>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!-- <music-play :playData="playData"></music-play> -->
|
||||
<!-- <z-navigation></z-navigation> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*
|
||||
list -- 音频文件传入 不传无法播放/数组形式
|
||||
Faskms -- 快进秒数 number 默认15秒
|
||||
Slowms -- 快退秒数 number 默认15秒
|
||||
autoNext -- 是否自动播放下一首
|
||||
autoplays -- 进入页面是否自动播放 - 默认false
|
||||
slideYes -- 滑动进度条时是否开启播放 - 默认false
|
||||
switAud -- 切换上下音频是否开启播放 - 默认false
|
||||
BsNav -- 倍数数据传入/数组形式
|
||||
|
||||
按钮图片未自定义，如想改动请在组件内部修改，页面头部已注释 -- 逻辑根据自己需求改
|
||||
目前只测试 微信小程序和H5和APP -- 其他平台未知
|
||||
Author:chenxin 交流vx:cxalq8-24
|
||||
*/
|
||||
|
||||
import textScroll from '@/components/textScroll/index.vue'
|
||||
import cxAdudioPlay from '@/components/cx-audio-play/cx-audio-play.vue'
|
||||
// import musicPlay from '@/components/music.vue'
|
||||
import $http from '../../config/requestConfig';
|
||||
import {
|
||||
mapState,mapMutations
|
||||
} from 'vuex';
|
||||
export default {
|
||||
components: {
|
||||
cxAdudioPlay,
|
||||
textScroll,
|
||||
// musicPlay
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
playData:{},
|
||||
stopPlay:false, // 关闭音频
|
||||
jia:false, // 下一首
|
||||
|
||||
current:0,
|
||||
bookid:null, // 书籍id
|
||||
playid:null, // 正在播放的章节id
|
||||
playchapName:'', // 正在播放的章节名称
|
||||
playIndex:null, // 正在播放的序号值
|
||||
currentTime:{
|
||||
time:0,
|
||||
flag:''
|
||||
},
|
||||
pageTab:[
|
||||
{name: '正在播放'},
|
||||
{name: '播放列表'}
|
||||
],
|
||||
fengImg:'', // 播放封面
|
||||
libLIst:[], // 书籍目录
|
||||
videoList: [ //音频文件
|
||||
// {
|
||||
// recorPath: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
|
||||
// },
|
||||
// {
|
||||
// recorPath: 'http://vjs.zencdn.net/v/oceans.mp4'
|
||||
// },
|
||||
// {
|
||||
// recorPath: 'http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4'
|
||||
// },
|
||||
],
|
||||
orderPlayBtn:false, // 是否开启按顺序播放
|
||||
LibVisible:false,
|
||||
//boardRemark: this.userInfo.playTitle,
|
||||
StyleSheet:'font-size:36rpx; text-align:left',
|
||||
jian:false, // 上一曲切换
|
||||
}
|
||||
},
|
||||
//第一次加载
|
||||
onLoad() {
|
||||
// 隐藏原生的tabbar
|
||||
uni.hideTabBar();
|
||||
// this.bookid = e.bookid
|
||||
//console.log(this.userInfo.playFlag,'this.userInfo.playFlag')
|
||||
// this.getLibList()
|
||||
this.libLIst = this.$bgm.musicList
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
// console.log(this.userInfo.orderPlayBtn,'初始化')
|
||||
if(this.userInfo.orderPlayBtn != undefined){
|
||||
this.orderPlayBtn = this.userInfo.orderPlayBtn
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
boardRemark(){
|
||||
return this.userInfo.playTitle
|
||||
// console.log(this.userInfo, 'this.userInfo')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 选择章节
|
||||
choseMusic(item, index){
|
||||
this.currentTime.time = 0
|
||||
this.currentTime.flag = ''
|
||||
this.listen(item,index)
|
||||
this.LibVisible = false
|
||||
},
|
||||
// 获取章节列表
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.nowPlayTitle{color: #666; font-size:36rpx ;}
|
||||
.flexbox{display: flex;}
|
||||
.textScroll{max-width:400rpx;}
|
||||
// .container{background-color: #fff; height: 100vh;}
|
||||
.playTitle{width: 80%; margin: 20rpx auto; margin-top: 50rpx; justify-content: space-around; align-items: center;}
|
||||
.libTitle{font-size:40rpx; margin:40rpx 0; display: block; text-align: center;}
|
||||
.tanchu{ padding: 40rpx 30rpx 40rpx 30rpx; }
|
||||
.playList{padding: 20rpx; color: #666; }
|
||||
.playList .item{line-height:40rpx; margin-bottom: 40rpx; white-space: nowrap;
|
||||
overflow-x: hidden; font-size: 40rpx;
|
||||
text-overflow: ellipsis;}
|
||||
.playNow{color: #27b386;}
|
||||
.pageTabBox{width:150px; margin: 20rpx auto; font-size:60rpx;}
|
||||
.cxAdudioPlay{position:fixed; bottom: 0; left:0; }
|
||||
</style>
|
||||
216
pages/listen/home.vue
Normal file
216
pages/listen/home.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<public-module></public-module>
|
||||
<!-- <z-nav-bar title="我的订单"></z-nav-bar> -->
|
||||
<z-nav-bar title="悦耳听书"></z-nav-bar>
|
||||
<view class="listenList" v-if="bookList.length > 0">
|
||||
<view class="wrap">
|
||||
<u-row gutter="16" justify="flex-start">
|
||||
<u-col span="4" @click="goToListen(item)" v-for="(item,index) in bookList" :key="index">
|
||||
<view class="videoBox demo-layout bg-purple">
|
||||
<image :src="item.image" mode="scaleToFill" ></image>
|
||||
<u-icon class="playButton" name="play-circle" color="#54a966" size="28"></u-icon>
|
||||
</view>
|
||||
<text class="bookName">{{item.bookName}}</text>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
<view class="quesheng" v-else>
|
||||
<text>暂无听书数据~</text>
|
||||
</view>
|
||||
<music-play :playData="playData"></music-play>
|
||||
<!-- <z-navigation></z-navigation> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import musicPlay from '@/components/music.vue'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playData:{},
|
||||
loadingNow : false,
|
||||
bookList:[]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getListDate()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
console.log('下拉刷新了')
|
||||
uni.stopPullDownRefresh();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.loadingNow = true
|
||||
console.log('到底了')
|
||||
},
|
||||
components:{
|
||||
musicPlay
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo'])
|
||||
},
|
||||
methods: {
|
||||
// 获取已购买书籍
|
||||
getfreeBook(){
|
||||
this.$http
|
||||
.post('book/bookshelf/getUserBookshelf', {
|
||||
'userId': this.userInfo.id
|
||||
})
|
||||
.then(res => {
|
||||
if(res.code == 0){
|
||||
this.bookList = res.userBookshelf
|
||||
console.log(res)
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
getListDate(){
|
||||
this.loadingNow = false
|
||||
// 获取书架列表
|
||||
this.$http
|
||||
.post('book/bookshelf/getUserBookshelf', {
|
||||
'userId': this.userInfo.id
|
||||
})
|
||||
.then(res => {
|
||||
if(res.code == 0){
|
||||
this.bookList = res.userBookshelf
|
||||
console.log(res)
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
goToListen(item){
|
||||
uni.navigateTo({
|
||||
// url: "./musicbg?bookid="+item.bookid+"&fengImg="+item.image // 后台播放版本
|
||||
url: "./listen?bookid="+item.bookid+"&fengImg="+item.image // 前台播放版本
|
||||
// url: "./bgMusix"
|
||||
});
|
||||
},
|
||||
// 跳转11
|
||||
onPageJump(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
|
||||
.bookName{
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 30rpx; color: #333; padding: 10rpx 0;
|
||||
}
|
||||
.videoBox{position: relative;}
|
||||
|
||||
.playButton{position: absolute; z-index: 1; right: 4px; bottom: 4px; padding: 5px; border-radius: 100%; }
|
||||
uni-image {
|
||||
width:auto !important;
|
||||
height: 350rpx;
|
||||
}
|
||||
.u-row{flex-wrap: wrap;}
|
||||
.u-col{overflow: hidden; height: 210px; margin-bottom: 30rpx; }
|
||||
.listenList{padding: 10rpx; box-sizing: border-box; width: calc(100% - 10rpx);}
|
||||
.flexbox{display: flex;}
|
||||
.scroll-Y {
|
||||
height: 300rpx;
|
||||
}
|
||||
.scroll-view_H {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
.scroll-view-item {
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.scroll-view-item_H {
|
||||
display: inline-block;
|
||||
width: 60%;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.head_line {
|
||||
margin: 50rpx 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
571
pages/listen/listen.vue
Normal file
571
pages/listen/listen.vue
Normal file
@@ -0,0 +1,571 @@
|
||||
<template>
|
||||
<!--父组件-->
|
||||
|
||||
<view class="container">
|
||||
<!-- <view class="mini"></view> -->
|
||||
<view>
|
||||
<z-nav-bar title="悦耳听书"></z-nav-bar>
|
||||
<!-- 基本信息 -->
|
||||
<view class="book_neir">
|
||||
<view class="flexbox info">
|
||||
<view class="item">
|
||||
<image class="bn_img" :src="bookInfo.images"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
<!-- <img :src="bookInfo.images" class="bn_img"> -->
|
||||
<view class="item">
|
||||
<!-- <b class="leiXing" v-if="bookInfo.isVip==1" style="background: #c79119;">VIP</b>
|
||||
<b class="leiXing" v-if="bookInfo.isVip==2" style="background: #c74119;">付费</b> -->
|
||||
<view class="bn_nes">
|
||||
<view style="font-weight: bold;margin-bottom: 30rpx;">
|
||||
{{bookInfo.name}}
|
||||
</view>
|
||||
<view style="color: #9b9b9b;font-size: 28rpx;margin:20rpx 0 0 0;max-width: 400rpx;line-height: 38rpx;">
|
||||
<p @click="onAuCHJump(bookInfo.authorId,1)" style="margin-bottom: 20rpx;">
|
||||
{{bookInfo.authorName}} [著] >
|
||||
</p>
|
||||
<p @click="onAuCHJump(item.id,2)" v-for="item in this.bookInfo.publisherNIList">
|
||||
{{item.title}} >
|
||||
</p>
|
||||
</view>
|
||||
<view class="price">
|
||||
<text class="light">￥98.00</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 按钮组 -->
|
||||
<view class="btns">
|
||||
<!-- 已购买组 -->
|
||||
<view class="home_nar flexbox" v-if="isBuy">
|
||||
<view class="hn_cl_tit yigoumai" >
|
||||
<image src="../../static/icon/yigou.png" mode="aspectFit"></image>
|
||||
<text>已购买</text>
|
||||
</view>
|
||||
<view class="hn_cl_tit chaoshi" @click="addMusicList">
|
||||
<image src="../../static/icon/shiting.png" mode="aspectFit"></image>
|
||||
<text>立即听书</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 试听组 -->
|
||||
<view class="home_nar flexbox" v-else>
|
||||
<view class="hn_cl_tit shiting" @click="buyBook">
|
||||
<image src="../../static/icon/goumai.png" mode="aspectFit"></image>
|
||||
<text>立即购买</text>
|
||||
</view>
|
||||
<view class="hn_cl_tit chaoshi" @click="addMusicList">
|
||||
<image src="../../static/icon/shiting.png" mode="aspectFit"></image>
|
||||
<text>立即试听</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<!-- end -->
|
||||
<!--
|
||||
sort:0 可以听
|
||||
sort:1 不可以听
|
||||
-->
|
||||
<view class="playList" >
|
||||
<view class="item" v-for="(item,index) in libLIst" :key="index" >
|
||||
<view >
|
||||
<view
|
||||
:class="[item.sort == 1 && isBuy == false ? 'graytitle' : '',
|
||||
userInfo.playingInfo.bookid == item.bookid && userInfo.playingInfo.chapterId == item.chapterId ? 'playing' : '']" @click="listenOne(item)">{{item.chapterName}}
|
||||
<uni-tag v-if="item.sort == 0 && isBuy == false" class="tag" size="small" :inverted="true" text="试听" type="success" />
|
||||
<!-- <image class="playingFig" src="/static/playingGif.gif" mode="aspectFill"></image> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<music-play :playData="playData"></music-play>
|
||||
<z-navigation></z-navigation>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
// import textScroll from '@/components/textScroll/index.vue'
|
||||
// import cxAdudioPlay from '@/components/cx-audio-play/cx-audio-play.vue'
|
||||
import musicPlay from '@/components/music.vue'
|
||||
import $http from '../../config/requestConfig';
|
||||
import {
|
||||
mapState,mapMutations
|
||||
} from 'vuex';
|
||||
export default {
|
||||
components: {
|
||||
// cxAdudioPlay,
|
||||
// textScroll,
|
||||
musicPlay
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isBuy:false, // true 已购买，false 未购买
|
||||
playData:{},
|
||||
stopPlay:false, // 关闭音频
|
||||
jia:false, // 下一I首
|
||||
forceRefresh:true,
|
||||
current:0,
|
||||
bookInfo:{}, // 书籍详情
|
||||
bookid:null, // 书籍id
|
||||
playid:null, // 正在播放的章节id
|
||||
playchapName:'', // 正在播放的章节名称
|
||||
playIndex:null, // 正在播放的序号值
|
||||
currentTime:{
|
||||
time:0,
|
||||
flag:''
|
||||
},
|
||||
pageTab:[
|
||||
{name: '正在播放'},
|
||||
{name: '播放列表'}
|
||||
],
|
||||
fengImg:'', // 播放封面
|
||||
libLIst:[
|
||||
// {
|
||||
// name:"第二章",
|
||||
// url: 'https://ehh-private-01.oss-cn-beijing.aliyuncs.com/2023/07/14/6c6d7f7b947c4dc18881e8682b4dc36a2ce742.mp3'
|
||||
// },
|
||||
|
||||
], // 书籍目录
|
||||
videoList: [], //音频文件
|
||||
BsNav: [ //倍数-自定义
|
||||
{
|
||||
id: 1.0,
|
||||
bs: '1.0'
|
||||
}, {
|
||||
id: 1.5,
|
||||
bs: '1.5'
|
||||
}, {
|
||||
id: 2.0,
|
||||
bs: '2.0'
|
||||
}
|
||||
],
|
||||
orderPlayBtn:false, // 是否开启按顺序播放
|
||||
LibVisible:false,
|
||||
boardRemark: '',
|
||||
StyleSheet:'font-size:36rpx; text-align:center',
|
||||
jian:false, // 上一曲切换
|
||||
}
|
||||
},
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
// 隐藏原生的tabbar
|
||||
// console.log(e,'e')
|
||||
|
||||
uni.hideTabBar();
|
||||
this.bookid = e.bookid
|
||||
//console.log(this.userInfo.playFlag,'this.userInfo.playFlag')
|
||||
this.getLibList()
|
||||
this.getBookInfo()
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
// console.log(this.userInfo.orderPlayBtn,'初始化')
|
||||
if(this.userInfo.orderPlayBtn != undefined){
|
||||
this.orderPlayBtn = this.userInfo.orderPlayBtn
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo'])
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['setUserInfo']),
|
||||
getBookInfo(){
|
||||
// 获取书本基本信息
|
||||
this.$http
|
||||
.post('book/book/appinfo/' + this.bookid + '/' + this.userInfo.id)
|
||||
.then(res => {
|
||||
if(res.code == 0){
|
||||
this.bookInfo = res.book
|
||||
}else{
|
||||
console.log(res.msg)
|
||||
}
|
||||
console.log(res,'res基本信息')
|
||||
}).catch((error)=>{
|
||||
console.log(error.msg)
|
||||
})
|
||||
},
|
||||
addMusicList(){
|
||||
this.playData = {
|
||||
'myList' : this.libLIst,
|
||||
// 'fengImg' : this.fengImg,
|
||||
}
|
||||
// 显示播放组件
|
||||
this.setUserInfo({'playVisible':true})
|
||||
uni.setStorage({
|
||||
key: 'playVisible',
|
||||
data: true,
|
||||
success: function () {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
|
||||
// console.log(this.playData,'this.playData')
|
||||
},
|
||||
|
||||
// 播放单个音频
|
||||
listenOne(item){
|
||||
console.log('点击了1')
|
||||
if(this.$bgm._options.src == ''){
|
||||
this.$music.playBgm({mute:false})
|
||||
this.$music.setOneMusic(item)
|
||||
}else{
|
||||
this.$music.setOneMusic(item)
|
||||
}
|
||||
},
|
||||
|
||||
// 购买
|
||||
buyBook(){
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
cancelText: '暂不购买',
|
||||
confirmText:'立即购买',
|
||||
content: '确定花费￥95元购买本书电子版吗？',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 信息介绍跳转
|
||||
onAuCHJump(id, e) {
|
||||
uni.navigateTo({
|
||||
url: '../eBook/bookMessage?Id=' + id + '&typ=' + e
|
||||
});
|
||||
},
|
||||
// 获取听书进度
|
||||
getListenRate(){
|
||||
// this.forceRefresh = false
|
||||
let data = {
|
||||
bookId: this.bookid,
|
||||
userId: this.userInfo.id,
|
||||
}
|
||||
$http.request({
|
||||
url: "book/listening/getReadRate",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data,
|
||||
header: { //默认 无 说明：请求头
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(res => {
|
||||
console.log(res,'历史记录')
|
||||
if(res.readRate.chapterId){ // 有听书进度时
|
||||
this.playid = res.readRate.chapterId
|
||||
this.currentTime.time = res.readRate.precent
|
||||
this.currentTime.flag = 'init'
|
||||
|
||||
// this.forceRefresh = true
|
||||
for (var i =0; i<this.libLIst.length; i++) {
|
||||
if(res.readRate.chapterId == this.libLIst[i].chapterId){
|
||||
this.playIndex = i
|
||||
}
|
||||
}
|
||||
// this.playIndex = res.readRate.id - 1
|
||||
// console.log('有内容',this.playIndex)
|
||||
this.playIndex >= this.libLIst.length - 1 ? this.jia = true : this.jia = false
|
||||
this.playIndex > 0 ? this.jian = true : this.jian = false
|
||||
|
||||
// this.firstListen()
|
||||
|
||||
|
||||
}else{ // 没有听书进度时
|
||||
// this.listen(this.libLIst[0],0)
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
},
|
||||
// 第一次加载音乐播放器
|
||||
firstListen(){
|
||||
this.forceRefresh = false
|
||||
this.$http
|
||||
.post('book/bookchaptercontent/appBooksChapterContent', {
|
||||
'userId': this.userInfo.id,
|
||||
'bookid': this.bookid,
|
||||
'id': this.playid
|
||||
})
|
||||
.then(res => {
|
||||
//this.tmpChapter.text = res.bookCatalogue
|
||||
if(res.code == 0){
|
||||
if(res.bookCatalogue.voices[0] != null){
|
||||
// console.log('走这')
|
||||
this.videoList = []
|
||||
this.boardRemark = res.bookCatalogue.chapter[0]
|
||||
this.fengImg = res.image
|
||||
this.videoList.push({'recorPath':res.bookCatalogue.voices[0]})
|
||||
// console.log(res.bookCatalogue.voices[0],'path')
|
||||
this.forceRefresh = true
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:'暂无可播放音频~',
|
||||
icon:'none',
|
||||
duration:2000
|
||||
})
|
||||
setTimeout(()=>{
|
||||
uni.navigateBack({ // 返回上一页
|
||||
delta: 1
|
||||
});
|
||||
},2000)
|
||||
}
|
||||
}
|
||||
}).catch((e)=>{})
|
||||
},
|
||||
// 存储播放进度
|
||||
saveRate(val){
|
||||
this.$http
|
||||
.post('book/listening/save', {
|
||||
'userId': this.userInfo.id,
|
||||
'bookId': this.bookid,
|
||||
'chapterId': this.playid,
|
||||
'chapterName':this.playchapName ,
|
||||
'precent': Math.ceil(val),
|
||||
//'contentId'
|
||||
})
|
||||
.then(res => {
|
||||
if(res.code == 0){
|
||||
console.log(res,'存储完成')
|
||||
}
|
||||
}).catch((e)=>{})
|
||||
},
|
||||
// 播放上一首
|
||||
playPrev(val){
|
||||
console.log('播放上一首')
|
||||
this.playIndex -= 1
|
||||
//console.log(this.playIndex)
|
||||
this.currentTime.time = 0
|
||||
this.currentTime.flag = ''
|
||||
this.listen(this.libLIst[this.playIndex],this.playIndex)
|
||||
},
|
||||
// 顺序播放开关
|
||||
orderPlay(val){
|
||||
this.setUserInfo({orderPlayBtn:val})
|
||||
console.log(this.userInfo.orderPlayBtn)
|
||||
this.orderPlayBtn = val
|
||||
console.log(val,'orderPlay')
|
||||
},
|
||||
// 显示播放列表
|
||||
showLib(e){
|
||||
console.log(e)
|
||||
this.LibVisible = true
|
||||
},
|
||||
// 选择章节
|
||||
choseMusic(item, index){
|
||||
this.currentTime.time = 0
|
||||
this.currentTime.flag = ''
|
||||
this.listen(item,index)
|
||||
this.LibVisible = false
|
||||
},
|
||||
// 获取章节列表
|
||||
getLibList(){
|
||||
this.$http
|
||||
.post('book/book/getBookCatalogue', {
|
||||
'userid': this.userInfo.id,
|
||||
'bookid': this.bookid,
|
||||
// 'id': this.playid
|
||||
})
|
||||
.then(res => {
|
||||
if(res.code == 0){
|
||||
console.log(res,999)
|
||||
if(res.BookCatalogue.length > 0){
|
||||
this.libLIst = res.BookCatalogue
|
||||
// this.fengImg = res.images
|
||||
this.isBuy = res.buy
|
||||
// if(this.userInfo.playFlag){
|
||||
// console.log('有内容在播放，不获取内容',)
|
||||
// return
|
||||
|
||||
// }else{
|
||||
// this.getListenRate()
|
||||
// }
|
||||
}else{
|
||||
setTimeout(()=>{
|
||||
uni.navigateBack({ // 返回上一页
|
||||
delta: 1
|
||||
});
|
||||
},2000)
|
||||
}
|
||||
}
|
||||
}).catch((e)=>{})
|
||||
},
|
||||
// 获取音频数据
|
||||
listen(e,index){
|
||||
console.log(this.currentTime,'this.currentTime')
|
||||
// console.log(e,'playchapName')
|
||||
this.playid = e.chapterId
|
||||
this.playIndex = index
|
||||
this.playchapName = e.chapterName
|
||||
this.playIndex >= this.libLIst.length - 1 ? this.jia = true : this.jia = false
|
||||
this.playIndex > 0 ? this.jian = true : this.jian = false
|
||||
// console.log(this.jian,45454545)
|
||||
this.forceRefresh = false
|
||||
this.$http
|
||||
.post('book/bookchaptercontent/appBooksChapterContent', {
|
||||
'userId': this.userInfo.id,
|
||||
'bookid': this.bookid,
|
||||
'id': this.playid
|
||||
})
|
||||
.then(res => {
|
||||
//this.tmpChapter.text = res.bookCatalogue
|
||||
if(res.code == 0){
|
||||
// console.log(res)
|
||||
if(res.bookCatalogue.voices[0] != null && res.bookCatalogue.voices[0].length> 15){
|
||||
// console.log('走这')
|
||||
|
||||
this.videoList = []
|
||||
this.boardRemark = res.bookCatalogue.chapter[0]
|
||||
this.fengImg = res.image
|
||||
this.videoList.push({'recorPath':res.bookCatalogue.voices[0]})
|
||||
console.log(res.bookCatalogue.voices[0],'path')
|
||||
this.forceRefresh = true
|
||||
}else{
|
||||
this.forceRefresh = true
|
||||
uni.showToast({
|
||||
title:'暂无可播放音频,加载下一章',
|
||||
icon:'none',
|
||||
duration:2000
|
||||
})
|
||||
setTimeout(()=>{
|
||||
if(this.playIndex+1 >= this.libLIst.length){
|
||||
// this.stopPlay = true
|
||||
uni.showToast({
|
||||
title:'本书已全部播放完毕',
|
||||
icon:'none',
|
||||
duration:2000
|
||||
})
|
||||
}else{
|
||||
this.listen(this.libLIst[this.playIndex],this.playIndex)
|
||||
}
|
||||
},2000)
|
||||
|
||||
}
|
||||
}
|
||||
}).catch((e)=>{})
|
||||
},
|
||||
// 下一首
|
||||
xiayishou(){
|
||||
console.log('加载下一首')
|
||||
if(this.playIndex + 1 <= this.libLIst.length-1){
|
||||
this.playIndex += 1
|
||||
this.saveRate(0)
|
||||
this.currentTime.time = 0
|
||||
this.currentTime.flag = ''
|
||||
this.listen(this.libLIst[this.playIndex],this.playIndex)
|
||||
}else{
|
||||
this.jia = false
|
||||
uni.showToast({
|
||||
title:"音频已经播放完毕！",
|
||||
icon:"none"
|
||||
})
|
||||
}
|
||||
},
|
||||
TabChange(e){
|
||||
// tab 切换
|
||||
this.current = e.index
|
||||
// console.log(e)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// watch:{
|
||||
// list: {
|
||||
// handler (newName, oldName) {
|
||||
// console.log(newName)
|
||||
// },
|
||||
// immediate: true
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.playingFig{ width:100rpx; height:100rpx; display: inline-block; vertical-align: middle;}
|
||||
.price{ margin-top: 160rpx; overflow: hidden;
|
||||
.light{font-size: 50rpx; font-weight: bold; color: #f05654;}
|
||||
}
|
||||
.charType{display: inline; width:20px !important;}
|
||||
.graytitle{color: #999;}
|
||||
.yigoumai{background-color: #ffc773;}
|
||||
.shiting{background-color:#f47983 ; }
|
||||
.playing{color: #1daa5c;}
|
||||
.chaoshi{background-color:#1daa5c ; }
|
||||
.home_nar{margin: 30rpx 0; justify-content: space-between;}
|
||||
.hn_cl_tit {
|
||||
width: 48%;
|
||||
text-align: center;
|
||||
border-radius: 20rpx ; padding-top: 10rpx;
|
||||
// line-height: 110upx;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
image {
|
||||
|
||||
width: 80upx;
|
||||
height: 80upx;
|
||||
display: inline-block;
|
||||
// margin: 0 auto;
|
||||
// margin: 0 20rpx;
|
||||
}
|
||||
text{height: 100upx; display:inline-block; line-height: 80upx; color: #fff; font-size: 38rpx;}
|
||||
}
|
||||
.flexbox{display: flex;}
|
||||
.book_neir{ margin-top: 80rpx; padding: 20rpx;
|
||||
.bn_img{width:300rpx !important;}
|
||||
}
|
||||
.info{overflow: hidden;width: 100%;}
|
||||
.book_neir {
|
||||
margin: 20rpx 0 0 0;
|
||||
position: relative;
|
||||
|
||||
.item{display: inline-block; float: left; width: 50%; overflow: hidden;}
|
||||
.bn_img {
|
||||
float: left;
|
||||
width: 250upx;
|
||||
height: 320upx;
|
||||
}
|
||||
|
||||
.bn_nes {
|
||||
float: left;
|
||||
font-size: 36rpx;
|
||||
margin-left: 40rpx;
|
||||
|
||||
view {
|
||||
margin: 20rpx 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.leiXing {
|
||||
display: block;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
background: #27b386;
|
||||
position: absolute;
|
||||
left: -15upx;
|
||||
top: 10upx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
}
|
||||
.container{background-color: #fff; }
|
||||
.playTitle{width: 80%; margin: 20rpx auto; margin-top: 50rpx;}
|
||||
.libTitle{font-size:40rpx; margin:40rpx 0; display: block; text-align: center;}
|
||||
.tanchu{ padding: 40rpx 30rpx 40rpx 30rpx; }
|
||||
.playList{padding: 20rpx; color: #666; }
|
||||
.playList .item{display: block;line-height:80rpx; white-space: nowrap;
|
||||
overflow-x: hidden; font-size: 36rpx;
|
||||
text-overflow: ellipsis;}
|
||||
.tag{margin-left: 20rpx;}
|
||||
.playNow{color: #27b386;}
|
||||
.pageTabBox{width:150px; margin: 20rpx auto; font-size:60rpx;}
|
||||
.cxAdudioPlay{position:fixed; bottom: 150rpx; left:0; }
|
||||
</style>
|
||||
407
pages/listen/listen55.vue
Normal file
407
pages/listen/listen55.vue
Normal file
@@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<!--父组件-->
|
||||
|
||||
<view class="container">
|
||||
<view class="mini"></view>
|
||||
<view>
|
||||
<z-nav-bar title="悦耳听书"></z-nav-bar>
|
||||
<!-- <view class="pageTabBox">
|
||||
<u-tabs active-color="#27b386" :list="pageTab" :current="current" @change="TabChange" font-size='60'></u-tabs>
|
||||
</view> -->
|
||||
<!-- 正在播放章节 -->
|
||||
<view class="playTitle">
|
||||
<text-scroll :myStyle="StyleSheet" :text="boardRemark"></text-scroll>
|
||||
</view>
|
||||
<!-- 播放列表 -->
|
||||
<!-- <view v-show="current==1" class="playList">
|
||||
<view class="item" v-for="(item,index) in libLIst" :key="index" >
|
||||
<view @click="listen(item,index)" :class="playid==item.chapterId ? 'playNow' : ''">
|
||||
<text>{{item.chapterName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 播放器 -->
|
||||
<view v-show="current==0">
|
||||
<view class="cxAdudioPlay" >
|
||||
<cxAdudioPlay v-if="forceRefresh" :fengImg="fengImg" :cctime="currentTime" :list="videoList" @saveRate="saveRate" @xiayishou="xiayishou" @playPrev="playPrev" :jian="jian" :jia="jia" @showLib="showLib" ></cxAdudioPlay>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 播放列表 -->
|
||||
<u-popup mode="bottom" :show="LibVisible" :round="10" @close="LibVisible=false">
|
||||
<view class="libTitle">播放列表</view>
|
||||
<view class="tanchu playList">
|
||||
<view class="item" v-for="(item,index) in libLIst" :key="index" >
|
||||
<view @click="choseMusic(item,index)" :class="playid==item.chapterId ? 'playNow' : ''">
|
||||
<text>{{item.chapterName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- end -->
|
||||
<!-- <music-play></music-play> -->
|
||||
<z-navigation></z-navigation>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*
|
||||
list -- 音频文件传入 不传无法播放/数组形式
|
||||
Faskms -- 快进秒数 number 默认15秒
|
||||
Slowms -- 快退秒数 number 默认15秒
|
||||
autoNext -- 是否自动播放下一首
|
||||
autoplays -- 进入页面是否自动播放 - 默认false
|
||||
slideYes -- 滑动进度条时是否开启播放 - 默认false
|
||||
switAud -- 切换上下音频是否开启播放 - 默认false
|
||||
BsNav -- 倍数数据传入/数组形式
|
||||
|
||||
按钮图片未自定义，如想改动请在组件内部修改，页面头部已注释 -- 逻辑根据自己需求改
|
||||
目前只测试 微信小程序和H5和APP -- 其他平台未知
|
||||
Author:chenxin 交流vx:cxalq8-24
|
||||
*/
|
||||
import textScroll from '@/components/textScroll/index.vue'
|
||||
import cxAdudioPlay from '@/components/cx-audio-play/cx-audio-play.vue'
|
||||
import musicPlay from '@/components/music.vue'
|
||||
import $http from '../../config/requestConfig';
|
||||
import {
|
||||
mapState,mapMutations
|
||||
} from 'vuex';
|
||||
export default {
|
||||
components: {
|
||||
cxAdudioPlay,
|
||||
textScroll,
|
||||
musicPlay
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
stopPlay:false, // 关闭音频
|
||||
jia:false, // 下一首
|
||||
forceRefresh:true,
|
||||
current:0,
|
||||
bookid:null, // 书籍id
|
||||
playid:null, // 正在播放的章节id
|
||||
playchapName:'', // 正在播放的章节名称
|
||||
playIndex:null, // 正在播放的序号值
|
||||
currentTime:{
|
||||
time:0,
|
||||
flag:''
|
||||
},
|
||||
pageTab:[
|
||||
{name: '正在播放'},
|
||||
{name: '播放列表'}
|
||||
],
|
||||
fengImg:'', // 播放封面
|
||||
libLIst:[], // 书籍目录
|
||||
videoList: [ //音频文件
|
||||
// {
|
||||
// recorPath: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
|
||||
// },
|
||||
// {
|
||||
// recorPath: 'http://vjs.zencdn.net/v/oceans.mp4'
|
||||
// },
|
||||
// {
|
||||
// recorPath: 'http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4'
|
||||
// },
|
||||
],
|
||||
BsNav: [ //倍数-自定义
|
||||
{
|
||||
id: 1.0,
|
||||
bs: '1.0'
|
||||
}, {
|
||||
id: 1.5,
|
||||
bs: '1.5'
|
||||
}, {
|
||||
id: 2.0,
|
||||
bs: '2.0'
|
||||
}
|
||||
],
|
||||
orderPlayBtn:false, // 是否开启按顺序播放
|
||||
LibVisible:false,
|
||||
boardRemark: '',
|
||||
StyleSheet:'font-size:36rpx; text-align:center',
|
||||
jian:false, // 上一曲切换
|
||||
}
|
||||
},
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
// 隐藏原生的tabbar
|
||||
// console.log(e,'e')
|
||||
|
||||
uni.hideTabBar();
|
||||
this.bookid = e.bookid
|
||||
//console.log(this.userInfo.playFlag,'this.userInfo.playFlag')
|
||||
this.getLibList()
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
// console.log(this.userInfo.orderPlayBtn,'初始化')
|
||||
if(this.userInfo.orderPlayBtn != undefined){
|
||||
this.orderPlayBtn = this.userInfo.orderPlayBtn
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo'])
|
||||
},
|
||||
methods: {
|
||||
// 获取听书进度
|
||||
getListenRate(){
|
||||
// this.forceRefresh = false
|
||||
let data = {
|
||||
bookId: this.bookid,
|
||||
userId: this.userInfo.id,
|
||||
}
|
||||
$http.request({
|
||||
url: "book/listening/getReadRate",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data,
|
||||
header: { //默认 无 说明：请求头
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(res => {
|
||||
console.log(res,'历史记录')
|
||||
if(res.readRate != null){ // 有听书进度时
|
||||
this.playid = res.readRate.chapterId
|
||||
this.currentTime.time = res.readRate.precent
|
||||
this.currentTime.flag = 'init'
|
||||
|
||||
// this.forceRefresh = true
|
||||
for (var i =0; i<this.libLIst.length; i++) {
|
||||
if(res.readRate.chapterId == this.libLIst[i].chapterId){
|
||||
this.playIndex = i
|
||||
}
|
||||
}
|
||||
// this.playIndex = res.readRate.id - 1
|
||||
// console.log('有内容',this.playIndex)
|
||||
this.playIndex >= this.libLIst.length - 1 ? this.jia = true : this.jia = false
|
||||
this.playIndex > 0 ? this.jian = true : this.jian = false
|
||||
|
||||
this.firstListen()
|
||||
console.log('firstListen')
|
||||
|
||||
}else{ // 没有听书进度时
|
||||
this.listen(this.libLIst[0],0)
|
||||
console.log('Listen')
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
},
|
||||
// 第一次加载音乐播放器
|
||||
firstListen(){
|
||||
this.forceRefresh = false
|
||||
this.$http
|
||||
.post('book/bookchaptercontent/appBooksChapterContent', {
|
||||
'userId': this.userInfo.id,
|
||||
'bookid': this.bookid,
|
||||
'id': this.playid
|
||||
})
|
||||
.then(res => {
|
||||
//this.tmpChapter.text = res.bookCatalogue
|
||||
if(res.code == 0){
|
||||
|
||||
if(res.bookCatalogue.voices[0] != null){
|
||||
// console.log('走这')
|
||||
this.videoList = []
|
||||
this.boardRemark = res.bookCatalogue.chapter[0]
|
||||
this.fengImg = res.image
|
||||
this.videoList.push({'recorPath':res.bookCatalogue.voices[0]})
|
||||
// console.log(res.bookCatalogue.voices[0],'path')
|
||||
this.forceRefresh = true
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:'暂无可播放音频~',
|
||||
icon:'none',
|
||||
duration:2000
|
||||
})
|
||||
setTimeout(()=>{
|
||||
uni.navigateBack({ // 返回上一页
|
||||
delta: 1
|
||||
});
|
||||
},2000)
|
||||
}
|
||||
}
|
||||
}).catch((e)=>{})
|
||||
},
|
||||
// 存储播放进度
|
||||
saveRate(val){
|
||||
this.$http
|
||||
.post('book/listening/save', {
|
||||
'userId': this.userInfo.id,
|
||||
'bookId': this.bookid,
|
||||
'chapterId': this.playid,
|
||||
'chapterName':this.playchapName ,
|
||||
'precent': Math.ceil(val),
|
||||
//'contentId'
|
||||
})
|
||||
.then(res => {
|
||||
if(res.code == 0){
|
||||
console.log(res,'存储完成')
|
||||
}
|
||||
}).catch((e)=>{})
|
||||
},
|
||||
// 播放上一首
|
||||
playPrev(val){
|
||||
console.log('播放上一首')
|
||||
this.playIndex -= 1
|
||||
//console.log(this.playIndex)
|
||||
this.currentTime.time = 0
|
||||
this.currentTime.flag = ''
|
||||
this.listen(this.libLIst[this.playIndex],this.playIndex)
|
||||
},
|
||||
// 顺序播放开关
|
||||
orderPlay(val){
|
||||
this.setUserInfo({orderPlayBtn:val})
|
||||
console.log(this.userInfo.orderPlayBtn)
|
||||
this.orderPlayBtn = val
|
||||
console.log(val,'orderPlay')
|
||||
},
|
||||
// 显示播放列表
|
||||
showLib(e){
|
||||
console.log(e)
|
||||
this.LibVisible = true
|
||||
},
|
||||
// 选择章节
|
||||
choseMusic(item, index){
|
||||
this.currentTime.time = 0
|
||||
this.currentTime.flag = ''
|
||||
this.listen(item,index)
|
||||
this.LibVisible = false
|
||||
},
|
||||
// 获取章节列表
|
||||
getLibList(){
|
||||
this.$http
|
||||
.post('book/book/getBookCatalogue', {
|
||||
'bookid': this.bookid
|
||||
})
|
||||
.then(res => {
|
||||
if(res.code == 0){
|
||||
console.log(res,999)
|
||||
if(res.bookCatalogue.length > 0){
|
||||
this.libLIst = res.bookCatalogue
|
||||
// if(this.userInfo.playFlag){
|
||||
// console.log('有内容在播放，不获取内容',)
|
||||
// return
|
||||
|
||||
// }else{
|
||||
this.getListenRate()
|
||||
// }
|
||||
}else{
|
||||
setTimeout(()=>{
|
||||
uni.navigateBack({ // 返回上一页
|
||||
delta: 1
|
||||
});
|
||||
},2000)
|
||||
}
|
||||
}
|
||||
}).catch((e)=>{})
|
||||
},
|
||||
// 获取音频数据
|
||||
listen(e,index){
|
||||
console.log(this.currentTime,'this.currentTime')
|
||||
// console.log(e,'playchapName')
|
||||
this.playid = e.chapterId
|
||||
this.playIndex = index
|
||||
this.playchapName = e.chapterName
|
||||
this.playIndex >= this.libLIst.length - 1 ? this.jia = true : this.jia = false
|
||||
this.playIndex > 0 ? this.jian = true : this.jian = false
|
||||
// console.log(this.jian,45454545)
|
||||
this.forceRefresh = false
|
||||
this.$http
|
||||
.post('book/bookchaptercontent/appBooksChapterContent', {
|
||||
'userId': this.userInfo.id,
|
||||
'bookid': this.bookid,
|
||||
'id': this.playid
|
||||
})
|
||||
.then(res => {
|
||||
console.log(res,'path')
|
||||
//this.tmpChapter.text = res.bookCatalogue
|
||||
if(res.code == 0){
|
||||
// console.log(res)
|
||||
|
||||
if(res.bookCatalogue.voices[0] != null && res.bookCatalogue.voices[0].length> 15){
|
||||
// console.log('走这')
|
||||
|
||||
this.videoList = []
|
||||
this.boardRemark = res.bookCatalogue.chapter[0]
|
||||
this.fengImg = res.image
|
||||
this.videoList.push({'recorPath':res.bookCatalogue.voices[0]})
|
||||
console.log(res.bookCatalogue.voices[0],'path')
|
||||
this.forceRefresh = true
|
||||
}else{
|
||||
console.log(res.bookCatalogue.voices[0],'path')
|
||||
this.forceRefresh = true
|
||||
uni.showToast({
|
||||
title:'暂无可播放音频,加载下一章',
|
||||
icon:'none',
|
||||
duration:2000
|
||||
})
|
||||
// setTimeout(()=>{
|
||||
// if(this.playIndex+1 >= this.libLIst.length){
|
||||
// // this.stopPlay = true
|
||||
// uni.showToast({
|
||||
// title:'本书已全部播放完毕',
|
||||
// icon:'none',
|
||||
// duration:2000
|
||||
// })
|
||||
// }else{
|
||||
// this.listen(this.libLIst[this.playIndex],this.playIndex)
|
||||
// }
|
||||
// },2000)
|
||||
|
||||
}
|
||||
}
|
||||
}).catch((e)=>{})
|
||||
},
|
||||
// 下一首
|
||||
xiayishou(){
|
||||
console.log('加载下一首')
|
||||
if(this.playIndex + 1 <= this.libLIst.length-1){
|
||||
this.playIndex += 1
|
||||
this.saveRate(0)
|
||||
this.currentTime.time = 0
|
||||
this.currentTime.flag = ''
|
||||
this.listen(this.libLIst[this.playIndex],this.playIndex)
|
||||
}else{
|
||||
this.jia = false
|
||||
uni.showToast({
|
||||
title:"音频已经播放完毕！",
|
||||
icon:"none"
|
||||
})
|
||||
}
|
||||
},
|
||||
TabChange(e){
|
||||
// tab 切换
|
||||
this.current = e.index
|
||||
// console.log(e)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// watch:{
|
||||
// list: {
|
||||
// handler (newName, oldName) {
|
||||
// console.log(newName)
|
||||
// },
|
||||
// immediate: true
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
// .container{background-color: #fff; height: 100vh;}
|
||||
.playTitle{width: 80%; margin: 20rpx auto; margin-top: 50rpx;}
|
||||
.libTitle{font-size:40rpx; margin:40rpx 0; display: block; text-align: center;}
|
||||
.tanchu{ padding: 40rpx 30rpx 40rpx 30rpx; }
|
||||
.playList{padding: 20rpx; color: #666; }
|
||||
.playList .item{line-height:40rpx; margin-bottom: 40rpx; white-space: nowrap;
|
||||
overflow-x: hidden; font-size: 40rpx;
|
||||
text-overflow: ellipsis;}
|
||||
.playNow{color: #27b386;}
|
||||
.pageTabBox{width:150px; margin: 20rpx auto; font-size:60rpx;}
|
||||
.cxAdudioPlay{position:fixed; bottom: 150rpx; left:0; }
|
||||
</style>
|
||||
138
pages/listen/music.js
Normal file
138
pages/listen/music.js
Normal file
@@ -0,0 +1,138 @@
|
||||
export default [{
|
||||
id: 1, //ID
|
||||
musicName: "美人谷", //歌名
|
||||
musicArtist: "阿兰", //歌手
|
||||
musicAlbum: "美人谷",//专辑
|
||||
musicAlbumID: 1, //专辑ID
|
||||
musicAlbumURl: "https://p1.music.126.net/byZ9hvAI2r20WBnuB-S_ng==/109951163069341151.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0", //专辑图片路径
|
||||
musicPath: "https://music.163.com/song?id=1454732243&userid=306770142", //路径
|
||||
musicYear: "2017-10-27", //发布年份
|
||||
musicDuration: 281000, //时长
|
||||
size: 3436481, //文件大小
|
||||
favour: false,
|
||||
lyric: `[ti:美人谷]
|
||||
[ar:阿兰]
|
||||
[al:十念]
|
||||
|
||||
[by:天龙888]
|
||||
[00:00.00]美人谷 - 阿兰
|
||||
[00:05.00]
|
||||
[00:07.95]词：毛慧
|
||||
[00:09.09]曲：阿兰/毛慧
|
||||
[00:11.31]编曲：叶月/王晨
|
||||
[00:13.57]制作人：毛慧
|
||||
[00:15.76]录音：张生磊（记忆时刻录音棚）
|
||||
[00:17.45]
|
||||
[00:38.13]越过山河的神秘
|
||||
[00:41.03]一幕自然的洗礼
|
||||
[00:44.18]看见山川出云泽被着大地
|
||||
[00:49.76]
|
||||
[00:50.59]雨顺菁华自天际
|
||||
[00:53.69]花随鱼翔潜水底
|
||||
[00:57.44]可有语言能形容的美丽
|
||||
[01:02.62]
|
||||
[01:03.44]如此熟悉的声音
|
||||
[01:06.38]莫名安全的气息
|
||||
[01:09.45]这是谁安排了我们的相聚
|
||||
[01:14.87]
|
||||
[01:15.84]没有前世的际遇
|
||||
[01:18.93]怎会有心灵相犀
|
||||
[01:22.48]任日夕月落耳鬓无语
|
||||
[01:28.34]
|
||||
[01:31.72]如果道路很遥远
|
||||
[01:35.19]你是否会愿意
|
||||
[01:38.44]等春播秋忙
|
||||
[01:40.34]夏耕冬藏
|
||||
[01:41.83]平凡的神谕
|
||||
[01:44.69]如果你看到我的心
|
||||
[01:47.84]就能看到自己
|
||||
[01:51.06]我会陪你一同醉去
|
||||
[01:57.00]
|
||||
[02:47.58]采撷飘来的飞絮
|
||||
[02:50.56]点缀纯净的天宇
|
||||
[02:53.73]谁让万物轮转都不会死去
|
||||
[02:58.84]
|
||||
[03:00.04]穿越最远的距离
|
||||
[03:03.14]唤醒沉睡的记忆
|
||||
[03:06.91]我的爱在这里等你
|
||||
[03:11.88]
|
||||
[03:12.74]如果道路很遥远
|
||||
[03:16.20]你是否会愿意
|
||||
[03:19.49]等春播秋忙
|
||||
[03:21.35]夏耕冬藏
|
||||
[03:22.89]平凡的神谕
|
||||
[03:25.78]如果你看到我的心
|
||||
[03:28.98]就能看到自己
|
||||
[03:32.01]我会陪你一同醉去
|
||||
[03:37.11]
|
||||
[03:38.01]如果时间很遥远
|
||||
[03:41.46]你是否会愿意
|
||||
[03:44.66]等朝花夕拾
|
||||
[03:46.57]缤纷舞尽
|
||||
[03:48.16]神灵的游戏
|
||||
[03:50.96]如果你能找到我心
|
||||
[03:54.19]就能找到自己
|
||||
[03:57.32]因为我的爱已随你而去
|
||||
[04:04.55]
|
||||
[04:06.88]lrc歌词编辑：天龙 QQ：26092798`
|
||||
}, {
|
||||
id: 2,
|
||||
musicName: "朝暮",
|
||||
musicArtist: "阿兰",
|
||||
musicAlbum: "朝暮",
|
||||
musicAlbumID: 2,
|
||||
musicAlbumURl: "https://p1.music.126.net/hB5AqPeXTg5Q-5BsyLiCwg==/109951164325877834.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0",
|
||||
musicPath: "https://music.163.com/song?id=1454732243&userid=306770142",
|
||||
musicYear: "2019-08-28",
|
||||
musicDuration: 247000,
|
||||
size: 3022101,
|
||||
favour: false,
|
||||
lyric: `[ti:朝暮]
|
||||
[ar:阿兰]
|
||||
[al:朝暮]
|
||||
[by:]
|
||||
[offset:0]
|
||||
[00:00.22]朝暮 - 阿兰
|
||||
[00:01.15]词：林乔
|
||||
[00:01.75]曲：罗力威
|
||||
[00:02.55]编曲：郭峻江
|
||||
[00:03.47]制作人：郭峻江
|
||||
[00:04.87]人声监制/录音：张生磊
|
||||
[00:07.01]吉他录制：金天
|
||||
[00:08.23]弦乐录制：国际首席爱乐乐团
|
||||
[00:10.57]混音工程师：李嘉佳
|
||||
[00:12.15]混音工作室：记忆时刻
|
||||
[00:13.96]母带制作：玉霖@麦合星臣
|
||||
[00:15.87]出品：阿兰工作室
|
||||
[00:40.33]天雨润酥街 我遥遥 又怅羡
|
||||
[00:45.02]莫非清风转 你茫茫 化流年
|
||||
[00:49.84]落晖别有涟 撑纸伞
|
||||
[00:53.07]徐徐踱步犹犹几夜
|
||||
[00:59.55]跃上星宿间 我幽幽 洒心愿
|
||||
[01:04.26]月华徒倚圆 你返返 在何年
|
||||
[01:09.88]若祈愿苍天 聚散一眸间
|
||||
[01:18.76]朝朝若相盼 暮暮若相唤
|
||||
[01:23.60]何何你再伴 流流萤扑扇
|
||||
[01:28.28]长啸复琴弹 歌待欢
|
||||
[01:33.33]怎负花尽看 惹泪低惋
|
||||
[01:38.24]朝朝若相盼 暮暮若相唤
|
||||
[01:42.79]何何你再伴 红红烛窗婉
|
||||
[01:47.46]天涯再远端 近思眷
|
||||
[01:52.53]岁月终会换 执手彼岸 相挽
|
||||
[02:01.92]天雨润酥街 我遥遥 又怅羡
|
||||
[02:06.74]莫非清风转 你茫茫 化流年
|
||||
[02:11.65]落晖别有涟 撑纸伞
|
||||
[02:14.62]徐徐踱步犹犹几夜
|
||||
[02:21.26]跃上星宿间 我幽幽 洒心愿
|
||||
[02:26.02]月华徒倚圆 你返返 在何年
|
||||
[02:31.51]若祈愿苍天 聚散一眸间
|
||||
[03:02.02]朝朝若相盼 暮暮若相唤
|
||||
[03:06.76]何何你再伴 流流萤扑扇
|
||||
[03:11.51]长啸复琴弹 歌待欢
|
||||
[03:16.43]怎负花尽看 惹泪低惋
|
||||
[03:21.39]朝朝若相盼 暮暮若相唤
|
||||
[03:25.87]何何你再伴 红红烛窗婉
|
||||
[03:30.67]天涯再远端 近思眷
|
||||
[03:35.71]岁月终会换 执手彼岸 相挽
|
||||
[03:45.25]岁月终会换 执手彼岸 相挽`
|
||||
}]
|
||||
268
pages/listen/musicbg.vue
Normal file
268
pages/listen/musicbg.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<!--父组件-->
|
||||
<view class="container">
|
||||
<z-nav-bar title="悦耳听书"></z-nav-bar>
|
||||
<!-- <view class="pageTabBox">
|
||||
<u-tabs active-color="#27b386" :list="pageTab" :current="current" @change="TabChange" font-size='60'></u-tabs>
|
||||
</view> -->
|
||||
<!-- 正在播放章节 -->
|
||||
<view class="playTitle">
|
||||
<text-scroll :myStyle="StyleSheet" :text="boardRemark"></text-scroll>
|
||||
</view>
|
||||
<!-- 播放列表 -->
|
||||
|
||||
<!-- 播放器 -->
|
||||
<view v-show="current==0">
|
||||
<view class="cxAdudioPlay" >
|
||||
<cxAdudioPlay v-if="forceRefresh" :fengImg="fengImg" :list="videoList" @xiayishou="xiayishou" @playPrev="playPrev" :jian="jian" :jia="jia" @showLib="showLib" @orderPlay="orderPlay" :orderPlayBtn='orderPlayBtn'></cxAdudioPlay>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 播放列表 -->
|
||||
<u-popup mode="bottom" :show="LibVisible" :round="10" @close="LibVisible=false">
|
||||
<view class="libTitle">播放列表</view>
|
||||
<view class="tanchu playList">
|
||||
<view class="item" v-for="(item,index) in libLIst" :key="index" >
|
||||
<view @click="choseMusic(item,index)" :class="playid==item.chapterId ? 'playNow' : ''">
|
||||
<text>{{item.chapterName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- end -->
|
||||
<z-navigation></z-navigation>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import textScroll from '@/components/textScroll/index.vue'
|
||||
import cxAdudioPlay from '@/components/cx-audio-play/cx-audio-play.vue'
|
||||
import {
|
||||
mapState,mapMutations
|
||||
} from 'vuex';
|
||||
export default {
|
||||
components: {
|
||||
cxAdudioPlay,
|
||||
textScroll
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
jia:false, // 下一首
|
||||
forceRefresh:true,
|
||||
current:0,
|
||||
bookid:null, // 书籍id
|
||||
playid:null, // 正在播放的章节id
|
||||
playIndex:null, // 正在播放的序号值
|
||||
pageTab:[
|
||||
{name: '正在播放'},
|
||||
{name: '播放列表'}
|
||||
],
|
||||
fengImg:'', // 播放封面
|
||||
libLIst:[], // 书籍目录
|
||||
videoList: [ //音频文件
|
||||
// {
|
||||
// recorPath: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
|
||||
// },
|
||||
// {
|
||||
// recorPath: 'http://vjs.zencdn.net/v/oceans.mp4'
|
||||
// },
|
||||
// {
|
||||
// recorPath: 'http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4'
|
||||
// },
|
||||
],
|
||||
BsNav: [ //倍数-自定义
|
||||
{
|
||||
id: 1.0,
|
||||
bs: '1.0'
|
||||
}, {
|
||||
id: 1.5,
|
||||
bs: '1.5'
|
||||
}, {
|
||||
id: 2.0,
|
||||
bs: '2.0'
|
||||
}
|
||||
],
|
||||
orderPlayBtn:false, // 是否开启按顺序播放
|
||||
LibVisible:false,
|
||||
boardRemark: '',
|
||||
StyleSheet:'font-size:36rpx; text-align:center',
|
||||
jian:false, // 上一曲切换
|
||||
audioMannager:null,
|
||||
}
|
||||
},
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
// 隐藏原生的tabbar
|
||||
// console.log(e,'e')
|
||||
|
||||
uni.hideTabBar();
|
||||
this.bookid = e.bookid
|
||||
this.getLibList()
|
||||
this.pageInit()
|
||||
},
|
||||
onShow() {
|
||||
console.log(this.userInfo.orderPlayBtn,'初始化')
|
||||
if(this.userInfo.orderPlayBtn != undefined){
|
||||
this.orderPlayBtn = this.userInfo.orderPlayBtn
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo'])
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['setUserInfo']),
|
||||
// 初始化背景音乐
|
||||
pageInit(){
|
||||
this.audioMannager = uni.getBackgroundAudioManager();
|
||||
},
|
||||
// 播放上一首
|
||||
playPrev(val){
|
||||
console.log('播放上一首')
|
||||
this.playIndex -= 1
|
||||
console.log(this.playIndex)
|
||||
this.listen(this.libLIst[this.playIndex],this.playIndex)
|
||||
},
|
||||
// 顺序播放开关
|
||||
orderPlay(val){
|
||||
this.setUserInfo({orderPlayBtn:val})
|
||||
console.log(this.userInfo.orderPlayBtn)
|
||||
this.orderPlayBtn = val
|
||||
console.log(val,'orderPlay')
|
||||
},
|
||||
// 显示播放列表
|
||||
showLib(e){
|
||||
console.log(e)
|
||||
this.LibVisible = true
|
||||
},
|
||||
// 选择章节
|
||||
choseMusic(item, index){
|
||||
this.listen(item,index)
|
||||
this.LibVisible = false
|
||||
},
|
||||
// 获取章节列表
|
||||
getLibList(){
|
||||
this.$http
|
||||
.post('book/book/getBookCatalogue', {
|
||||
'bookid': this.bookid
|
||||
})
|
||||
.then(res => {
|
||||
if(res.code == 0){
|
||||
//console.log(res)
|
||||
this.libLIst = res.bookCatalogue
|
||||
this.listen(this.libLIst[0],0)
|
||||
}
|
||||
}).catch((e)=>{})
|
||||
},
|
||||
// 获取音频数据
|
||||
listen(e,index){
|
||||
this.playid = e.chapterId
|
||||
this.playIndex = index
|
||||
this.playIndex >= this.libLIst.length - 1 ? this.jia = true : this.jia = false
|
||||
this.playIndex > 0 ? this.jian = true : this.jian = false
|
||||
console.log(this.jian,45454545)
|
||||
this.forceRefresh = false
|
||||
this.$http
|
||||
.post('book/bookchaptercontent/appBooksChapterContent', {
|
||||
'userId': this.userInfo.id,
|
||||
'bookid': this.bookid,
|
||||
'id': this.playid
|
||||
})
|
||||
.then(res => {
|
||||
//this.tmpChapter.text = res.bookCatalogue
|
||||
if(res.code == 0){
|
||||
console.log(res)
|
||||
if(res.bookCatalogue.voices[0] != null){
|
||||
console.log('走这')
|
||||
this.videoList = []
|
||||
this.boardRemark = res.bookCatalogue.chapter[0]
|
||||
this.fengImg = res.image
|
||||
|
||||
//this.videoList.push({'recorPath':res.bookCatalogue.voices[0]})
|
||||
this.audioMannager.title = '致爱丽丝';
|
||||
this.audioMannager.singer = '暂无';
|
||||
this.audioMannager.coverImgUrl = res.image
|
||||
this.audioMannager.src = res.bookCatalogue.voices[0];
|
||||
// console.log(this.videoList)
|
||||
this.forceRefresh = true
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:'暂无可播放音频~',
|
||||
icon:'none',
|
||||
duration:2000
|
||||
})
|
||||
setTimeout(()=>{
|
||||
uni.navigateBack({ // 返回上一页
|
||||
delta: 1
|
||||
});
|
||||
},2000)
|
||||
}
|
||||
}
|
||||
}).catch((e)=>{})
|
||||
},
|
||||
// 下一首
|
||||
xiayishou(){
|
||||
if(this.playIndex + 1 <= this.libLIst.length-1){
|
||||
this.playIndex += 1
|
||||
this.listen(this.libLIst[this.playIndex],this.playIndex)
|
||||
}else{
|
||||
this.jia = false
|
||||
uni.showToast({
|
||||
title:"音频已经播放完毕！",
|
||||
icon:"none"
|
||||
})
|
||||
}
|
||||
},
|
||||
TabChange(e){
|
||||
// tab 切换
|
||||
this.current = e.index
|
||||
// console.log(e)
|
||||
}
|
||||
},
|
||||
// watch:{
|
||||
// list: {
|
||||
// handler (newName, oldName) {
|
||||
// console.log(newName)
|
||||
// },
|
||||
// immediate: true
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
// .container{background-color: #fff; height: 100vh;}
|
||||
.playTitle{width: 80%; margin: 20rpx auto; margin-top: 50rpx;}
|
||||
.libTitle{font-size:40rpx; margin:40rpx 0; display: block; text-align: center;}
|
||||
.tanchu{ padding: 40rpx 30rpx 40rpx 30rpx; }
|
||||
.playList{padding: 20rpx; color: #666; }
|
||||
.playList .item{line-height:40rpx; margin-bottom: 40rpx; white-space: nowrap;
|
||||
overflow-x: hidden; font-size: 40rpx;
|
||||
text-overflow: ellipsis;}
|
||||
.playNow{color: #27b386;}
|
||||
.pageTabBox{width:150px; margin: 20rpx auto; font-size:60rpx;}
|
||||
|
||||
.cxAdudioPlay{position:fixed; bottom: 150rpx; left:0; padding: 20rpx;}
|
||||
</style>
|
||||
262
pages/listen/search.vue
Normal file
262
pages/listen/search.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<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>
|
||||
</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>
|
||||
70
pages/listen/setListen.vue
Normal file
70
pages/listen/setListen.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<z-nav-bar title="听书设置"></z-nav-bar>
|
||||
<view class="setBox">
|
||||
<view class="flexbox line">
|
||||
<text>显示播放小组件:</text>
|
||||
<u-switch v-model="playerVisible" active-color="#1daa5c" @change="changePlayerVisible"></u-switch>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 播放组件 -->
|
||||
<music-play :playData="playData"></music-play>
|
||||
<!-- <z-navigation></z-navigation> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import musicPlay from '@/components/music.vue'
|
||||
import {
|
||||
mapState,mapMutations
|
||||
} from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playData:{},
|
||||
formData:{},
|
||||
playerVisible:false
|
||||
// playerVisible:this.userInfo.playVisible
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.userInfo.playVisible ? this.playerVisible = this.userInfo.playVisible : ''
|
||||
console.log(this.userInfo,'this.userInfo')
|
||||
},
|
||||
components: {
|
||||
|
||||
musicPlay
|
||||
},
|
||||
computed:{
|
||||
...mapState(['userInfo'])
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['setUserInfo']),
|
||||
changePlayerVisible(e){
|
||||
// console.log(e)
|
||||
var show = ''
|
||||
e ? show = '显示播放组件' : show = '隐藏播放组件'
|
||||
uni.setStorage({
|
||||
key: 'playVisible',
|
||||
data: e,
|
||||
success: function () {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
this.setUserInfo({'playVisible':e})
|
||||
uni.showToast({
|
||||
title:show,
|
||||
icon:'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
*{color: #888;}
|
||||
.container{padding: 20rpx;}
|
||||
.line{justify-content: space-between; padding: 30rpx 0 ; border-bottom: 1px solid #eee;}
|
||||
.flexbox{display: flex;}
|
||||
.setBox{width: 100%; margin-top: 40rpx;}
|
||||
</style>
|
||||
79
pages/peanut/aboutUs.vue
Normal file
79
pages/peanut/aboutUs.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
versionCode:null,
|
||||
versionName:null
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getAppInfo()
|
||||
},
|
||||
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: '拨打客服热线：022-24142321',
|
||||
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>
|
||||
@@ -9,7 +9,11 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="home_nar" v-if="showEbook"> -->
|
||||
<view class="home_nar">
|
||||
<view class="home_nar">
|
||||
<view class="hn_cl_tit chaoshi" @click="onPageJump('../bookShop/classify')">
|
||||
<image src="../../static/icon/home_bar_2.png" mode="aspectFit"></image>
|
||||
<text>读书</text>
|
||||
</view>
|
||||
<view class="hn_cl_tit dianzishu" @click="onPageJump('../listen/home')">
|
||||
<image src="../../static/icon/home_bar_1.png" mode="aspectFit"></image>
|
||||
<text>听书</text>
|
||||
@@ -19,10 +23,7 @@
|
||||
<text>电子书</text>
|
||||
</view> -->
|
||||
<!-- <view class="hn_cl_tit" @click="onPageJump('../bookShop/bookShopIndex')"> -->
|
||||
<view class="hn_cl_tit chaoshi" @click="onPageJump('../bookShop/classify')">
|
||||
<image src="../../static/icon/home_bar_2.png" mode="aspectFit"></image>
|
||||
<text>健康超市</text>
|
||||
</view>
|
||||
|
||||
<!-- <view class="hn_cl_tit" @click="onGoing()">
|
||||
<image src="../../static/icon/home_bar_3.png" mode="aspectFit"></image>
|
||||
讲书
|
||||
@@ -190,11 +191,13 @@
|
||||
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<public-module></public-module>
|
||||
<z-navigation></z-navigation>
|
||||
<z-navigation></z-navigation>
|
||||
<music-play :playList="myList"></music-play>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import musicPlay from '@/components/music.vue'
|
||||
import repciptData from '@/static/json/repcipt.json'
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import {
|
||||
@@ -203,6 +206,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
myList:[],
|
||||
showEbook:false, // 显示电子书相关
|
||||
transaction: { // 成功回调
|
||||
|
||||
@@ -278,6 +282,9 @@
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
components:{
|
||||
musicPlay
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
...mapMutations(['setUserInfo']),
|
||||
@@ -609,9 +616,9 @@
|
||||
display: flex;
|
||||
color: #333;
|
||||
.dianzishu{ margin-right:10rpx;
|
||||
background-color: #d6ffda; border: 2px solid #bae9bf;
|
||||
background-color: #d6ffda; border: 2px solid #bae9bf; margin-left:10rpx;
|
||||
}
|
||||
.chaoshi{background-color:#fff2d8 ; margin-left:10rpx; border: 2px solid #ede6d3; }
|
||||
.chaoshi{background-color:#fff2d8 ; border: 2px solid #ede6d3; }
|
||||
.hn_cl_tit {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
|
||||
@@ -61,6 +61,12 @@
|
||||
<view class="nav_list" @click="onPageJump('../listen/home')">
|
||||
<text>我的听书</text>
|
||||
</view>
|
||||
<view class="nav_list" @click="onPageJump('../listen/setListen')">
|
||||
<text>听书设置</text>
|
||||
</view>
|
||||
<view class="nav_list" @click="onPageJump('../peanut/myComments')">
|
||||
<text>我的评价</text>
|
||||
</view>
|
||||
<!-- <view v-if="showEbook" class="nav_list" @click="onPageJump('../eBook/bookBuy')">
|
||||
<text>电子书购买记录</text>
|
||||
</view> -->
|
||||
@@ -75,8 +81,8 @@
|
||||
</view>
|
||||
|
||||
<!-- <view class="nav_list" @click="onGoing()">
|
||||
<text>帮助与反馈</text>
|
||||
</view> -->
|
||||
<text>帮助与反馈11111</text>
|
||||
</view> -->
|
||||
<view class="nav_list" @click="onShare">
|
||||
<text>分享App</text>
|
||||
</view>
|
||||
@@ -95,12 +101,13 @@
|
||||
<u-modal :show="signShow" :content="signContent" :showCancelButton="true" @cancel="signShow=false"
|
||||
@confirm="signOut">
|
||||
</u-modal>
|
||||
|
||||
<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 {
|
||||
@@ -112,7 +119,8 @@
|
||||
showEbook:false, // 显示电子书相关
|
||||
userMes: {},
|
||||
signShow: false,
|
||||
signContent: '是否要退出登录？'
|
||||
signContent: '是否要退出登录？',
|
||||
playData:{}
|
||||
};
|
||||
},
|
||||
//第一次加载
|
||||
@@ -129,6 +137,9 @@
|
||||
uni.hideTabBar();
|
||||
this.getData();
|
||||
},
|
||||
components: {
|
||||
musicPlay
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
switchTab(url){
|
||||
@@ -211,6 +222,7 @@
|
||||
})
|
||||
},
|
||||
onPageJump(url) {
|
||||
console.log(url,'url')
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
|
||||
78
pages/peanut/myComments.vue
Normal file
78
pages/peanut/myComments.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<view style="background-color: #fff;">
|
||||
<z-nav-bar title="我的评价"></z-nav-bar>
|
||||
<view class="container">
|
||||
<view class="" v-if="commentsList && commentsList.length > 0">
|
||||
<view class="pingjiaBox" v-for="(item, index) in commentsList" :key="index">
|
||||
<view class="flexbox">
|
||||
<!-- <view class="touxiang">
|
||||
<image :src="item.avatar" mode="aspectFit"></image>
|
||||
<text class="username nowrap ">{{item.name}}</text>
|
||||
</view> -->
|
||||
<view class="contentBox">
|
||||
<view class="content">{{ item.content }}<br/></view>
|
||||
<text class="time">订单编号：{{ item.orderSn }}</text>
|
||||
<text class="time">发布时间：{{ item.createDate }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="quesheng" v-else>
|
||||
<text>暂无评价~</text>
|
||||
</view>
|
||||
</view>
|
||||
<z-navigation></z-navigation>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
commentsList:[]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getComments()
|
||||
},
|
||||
computed:{
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
methods: {
|
||||
// 获取评价列表
|
||||
getComments(){
|
||||
$http.request({
|
||||
url: "buy/record/Allevaluations",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data: {
|
||||
'userid': this.userInfo.id
|
||||
},
|
||||
header: { //默认 无 说明：请求头
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
console.log(res,'评价')
|
||||
if(res.code == 0){
|
||||
this.commentsList = res.Allevaluations
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
|
||||
.container{margin-top: 10rpx; background-color: #fff; padding:20rpx; border-top:#f1f1f1 1px solid ;}
|
||||
|
||||
.contentBox{ overflow: hidden; margin-bottom: 30rpx; padding-bottom: 30rpx; border-bottom: 1px solid #f1f1f1; margin-top: 30rpx;
|
||||
.content{font-size: 28rpx; line-height: 40rpx;}
|
||||
.time{font-size: 24rpx; color: #999; margin-top: 6rpx; display: block; width: 100%; text-align:right}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user