618活动修改充值、天医币、积分
This commit is contained in:
liuyuan
839
pages/comments/comments.vue
Normal file
839
pages/comments/comments.vue
Normal file
@@ -0,0 +1,839 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<!-- 顶部导航栏 -->
|
||||
<z-nav-bar :title="productInfo.name+'-书评'"></z-nav-bar>
|
||||
</view>
|
||||
<view class="bookInfo">
|
||||
<!-- <image :src="productInfo.images" mode="aspectFill"></image>
|
||||
<view>
|
||||
<span class="title">{{productInfo.name}}</span>
|
||||
<view class="description" v-if="productInfo.description == ''">暂无简介内容</view>
|
||||
<view class="description">{{productInfo.description}}</view>
|
||||
</view> -->
|
||||
<view class="flexbox" style="margin-bottom: 20px;">
|
||||
<image :src="productInfo.images" mode="aspectFill" class="imageradius bookinfoimage"></image>
|
||||
<view class="bookInfo-inner">
|
||||
<span class="title">{{productInfo.name}}</span>
|
||||
<span class="author" v-if="productInfo.authorName!=''">作者：{{productInfo.authorName}}</span>
|
||||
<!-- <view class="description">{{productInfo.bookdesc}}</view> -->
|
||||
|
||||
<view class="ting-du-mai">
|
||||
<view class="ting-du-mai-item" v-if="productInfo.canListen" @click="toOtherPage(1,productInfo)">
|
||||
听书</view>
|
||||
<view class="ting-du-mai-item" v-if="productInfo.clockIn == 1"
|
||||
@click="toOtherPage(2,productInfo)">读书打卡</view>
|
||||
<view class="ting-du-mai-item" v-if="productInfo.bookType == 0"
|
||||
@click="toOtherPage(3,productInfo)">立即购买</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="description" v-if="productInfo.content == ''">暂无简介内容</view>
|
||||
<view class="description" v-else>简介：{{productInfo.content}}</view>
|
||||
|
||||
</view>
|
||||
<view class="mainContent">
|
||||
|
||||
<view v-if="shupingList.length > 0">
|
||||
<view class="flexbox shuping-topbar">
|
||||
<view class="shuping-topbar-tiao">{{shupingNum || 0}}条书评</view>
|
||||
<view class="shuping-topbar-order">
|
||||
<!-- <view v-for="(item,index) in orderTabs" @click="orderTabCLi(item.value)" :key="index"
|
||||
:class="orderListTab==item.value?'orderdefine ordStyle':'orderdefine'">{{item.name}}</view> -->
|
||||
<view :class="orderListTab==1?'orderdefine ordStyle':'orderdefine'" @click="orderTabCLi(1)">按时间
|
||||
</view>
|
||||
<view style="border-left:2rpx solid #e9e9e9;height:36rpx;"></view>
|
||||
<view :class="orderListTab==2?'orderdefine ordStyle':'orderdefine'" @click="orderTabCLi(2)">按热度
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item" @click.stop="toDetail(item)" v-for="(item,index1) in shupingList" :key="index1">
|
||||
|
||||
|
||||
<view class="title">{{item.title}}</view>
|
||||
<image class="feng" v-if="item.image" :src="item.image" mode="aspectFill"></image>
|
||||
<view class="description descriptionNew" v-html="item.content">
|
||||
|
||||
</view>
|
||||
<!-- <image class="feng" v-if="item.image == ''" src="../../static/icon/home_bg.jpg" mode="aspectFill"></image> -->
|
||||
|
||||
<view class="btns flexbox" style="margin-top:10rpx;">
|
||||
|
||||
<span class="left" style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item.createTime)}}</span>
|
||||
<span class="right flexbox opbtns">
|
||||
<image class="gzicon" v-if="item.ilike" src="../../static/icon/gz2.png" mode="aspectFill"
|
||||
@click.stop="clickLike(item)"></image>
|
||||
<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill"
|
||||
@click.stop="clickLike(item)"></image>
|
||||
<view style="color: #C0C4CC;">{{item.contlike}}</view>
|
||||
<!-- <image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill" @click.stop="pinglun(item.id)"></image>
|
||||
<view style="color: #C0C4CC;" @click.stop="pinglun(item.id)">{{item.commentNum}}</view> -->
|
||||
<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill">
|
||||
</image>
|
||||
<view style="color: #C0C4CC;">{{item.commentNum}}</view>
|
||||
</span>
|
||||
</view>
|
||||
<view style="border-bottom:2rpx solid #e9e9e9;height:36rpx;" v-if="index1<shupingList.length-1">
|
||||
</view>
|
||||
<!-- <image class="feng" v-if="item.image == ''" src="../../static/icon/home_bg.jpg" mode="scaleToFill" style="width: 100%;"></image>
|
||||
<image class="feng" v-else :src="item.image" mode="scaleToFill" style="width: 100%;"></image>
|
||||
<text class="title">{{item.title}}</text> -->
|
||||
<!-- <view class="description" v-html="item.content">
|
||||
{{item.content}}
|
||||
</view> -->
|
||||
<!-- <view class="btns flexbox">
|
||||
<span class="time">{{item.updateTime}}</span>
|
||||
<span class="flexbox opbtns">
|
||||
<span class="flexbox" @click="dianzan('1')">
|
||||
<u-icon name="heart" color="#55aa00" size="26"></u-icon>
|
||||
<text>2656</text>
|
||||
</span>
|
||||
<span class="flexbox pingjia" @click.stop="pinglun(item.id)">
|
||||
<u-icon name="chat" color="#55aa00" size="26"></u-icon>
|
||||
<text>2656</text>
|
||||
</span>
|
||||
</span>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="quesheng" v-else>
|
||||
暂无书评内容~
|
||||
</view>
|
||||
<view v-if="status==0" style="text-align: center;">
|
||||
<u-loading-icon style="display: inline-block;"></u-loading-icon>
|
||||
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
|
||||
</view>
|
||||
<view v-if="status==1" style="padding-bottom: 20rpx;">
|
||||
<u-divider text="全部加载完成"></u-divider>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 评价对话框 -->
|
||||
<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">
|
||||
<!-- 评价图片 -->
|
||||
<!-- end -->
|
||||
<!-- <uni-forms-item name="comment" label-width="0">
|
||||
<uni-easyinput type="textarea" v-model="Pform.comment" placeholder="请输入您的商品评价" />
|
||||
</uni-forms-item> -->
|
||||
</uni-forms>
|
||||
<!-- <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="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="">
|
||||
<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>
|
||||
<music-play :playData="playData"></music-play>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
|
||||
import musicPlay from '@/components/music.vue'
|
||||
import {
|
||||
data
|
||||
} from 'jquery';
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
import {
|
||||
checkBookRight
|
||||
} from '@/config/utils';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderListTab: 1,
|
||||
orderTabs: [{
|
||||
name: '按时间',
|
||||
value: 1
|
||||
}, {
|
||||
name: '按热度',
|
||||
value: 2
|
||||
}],
|
||||
shupingNum: 0,
|
||||
loadingNow: false,
|
||||
playData: {},
|
||||
isShowEmj: false,
|
||||
emojiIcon: 'cuIcon-emoji',
|
||||
windowWidth: 0,
|
||||
bookid: null,
|
||||
productInfo: {},
|
||||
pingjiaShow: false, //添加评价
|
||||
Pform: { // 评价表单
|
||||
star: 0,
|
||||
comment: '',
|
||||
img: [],
|
||||
html: ''
|
||||
},
|
||||
emoji: [],
|
||||
Files: [],
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
status: 3,
|
||||
shupingList: [],
|
||||
bfaid: null,
|
||||
newTime:'',
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
console.log('下拉刷新了')
|
||||
uni.stopPullDownRefresh();
|
||||
|
||||
this.page = 1, // 页码
|
||||
this.shupingList = []
|
||||
this.getBookCom(this.orderListTab)
|
||||
|
||||
},
|
||||
onReachBottom() {
|
||||
this.loadingNow = true
|
||||
if (this.page < this.total) {
|
||||
this.page++
|
||||
console.log('加载', this.page)
|
||||
this.status = 0
|
||||
this.getBookCom(this.orderListTab)
|
||||
|
||||
} else {
|
||||
this.status = 1
|
||||
console.log('加载完成了', this.page)
|
||||
return
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.windowWidth = uni.getSystemInfoSync().windowWidth;
|
||||
console.log(e, 'onload')
|
||||
this.bookid = e.bookid
|
||||
this.getProDetail(e)
|
||||
this.getBookCom(this.orderListTab)
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
methods: {
|
||||
toOtherPage(e, productInfo) {
|
||||
if (e == 1) {
|
||||
// 跳转到听书
|
||||
uni.navigateTo({
|
||||
url: "../listen/listen?bookid=" + productInfo.id
|
||||
});
|
||||
}
|
||||
if (e == 2) {
|
||||
// 跳转到读书打卡
|
||||
let data = {
|
||||
'userId': this.userInfo.id,
|
||||
'bookId': productInfo.id
|
||||
}
|
||||
checkBookRight(data, res => {
|
||||
console.log(res)
|
||||
if (res.success) {
|
||||
uni.navigateTo({
|
||||
url: '../clock/clock?bookid=' + productInfo.id
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '购买本书后方可参与打卡!',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
if (e == 3) {
|
||||
// 跳转到购买
|
||||
uni.navigateTo({
|
||||
url: '../bookShop/commodityDetail?id=' + productInfo.id
|
||||
});
|
||||
}
|
||||
},
|
||||
// 切换tab状态
|
||||
orderTabCLi(e) {
|
||||
this.orderListTab = e
|
||||
this.page = 1
|
||||
this.shupingList = []
|
||||
this.getBookCom(this.orderListTab)
|
||||
},
|
||||
clickLike(item) {
|
||||
this.$http
|
||||
.post("forum/articles/chickForumContlike?forum_id=" + item.id, )
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.showToast({
|
||||
title: '点赞成功！',
|
||||
icon: 'success'
|
||||
})
|
||||
item.contlike++
|
||||
}
|
||||
}).catch((e) => {
|
||||
console.log(e, 'e')
|
||||
})
|
||||
},
|
||||
formatTimeDifferenceFromT(dateTimeT) {
|
||||
dateTimeT= dateTimeT.replace(/-/g,"/")
|
||||
console.log("🚀 ~ formatTimeDifferenceFromT ~ dateTimeT:", dateTimeT)
|
||||
const now = new Date();
|
||||
const t = new Date(dateTimeT);
|
||||
console.log("🚀 ~ formatTimeDifferenceFromT ~ t:", t)
|
||||
const differenceInSeconds = Math.floor((now - t) / 1000);
|
||||
console.log("🚀 ~ formatTimeDifferenceFromT ~ differenceInSeconds:", differenceInSeconds)
|
||||
|
||||
if (differenceInSeconds <= 3600) {
|
||||
const minutes = Math.floor(differenceInSeconds / 60);
|
||||
return `${minutes} 分钟前`;
|
||||
} else if (differenceInSeconds <= 86400) {
|
||||
const hours = Math.floor(differenceInSeconds / 3600);
|
||||
return `${hours} 小时前`;
|
||||
} else if (differenceInSeconds <= 2592000) {
|
||||
const days = Math.floor(differenceInSeconds / 86400);
|
||||
return `${days} 天前`;
|
||||
} else {
|
||||
const currentYear = now.getFullYear();
|
||||
const tYear = t.getFullYear();
|
||||
if (currentYear === tYear) {
|
||||
const month = t.getMonth() + 1;
|
||||
const day = t.getDate();
|
||||
return `${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
|
||||
} else {
|
||||
const year = t.getFullYear();
|
||||
const month = t.getMonth() + 1;
|
||||
const day = t.getDate();
|
||||
return `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 书评详情
|
||||
toDetail(val) {
|
||||
console.log(val, 'val')
|
||||
uni.navigateTo({
|
||||
url: './commentsDetail?bookid=' + this.bookid + '&bfa_id=' + val.id
|
||||
})
|
||||
},
|
||||
getProDetail(e) {
|
||||
// 获取商品详情
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
});
|
||||
//console.log(e.id,'e.id')
|
||||
this.$http
|
||||
.post('book/book/appinfo/' + this.bookid + '/' + this.userInfo.id)
|
||||
.then(res => {
|
||||
console.log(res, 'res')
|
||||
this.productInfo = res.book
|
||||
uni.hideLoading();
|
||||
}).catch((e) => {
|
||||
console.log(e, 'e')
|
||||
})
|
||||
},
|
||||
// 获得书评
|
||||
getBookCom(flag) {
|
||||
let data = {
|
||||
'page': this.page,
|
||||
'limit': this.pageSize,
|
||||
'bookId': this.bookid,
|
||||
'order': flag
|
||||
}
|
||||
console.log(data, 'data')
|
||||
this.$http
|
||||
.post('forum/articles/getForumByBook', data)
|
||||
.then(res => {
|
||||
console.log(res, '获取成功')
|
||||
this.total = res.page.pages
|
||||
this.shupingNum = res.page.total
|
||||
this.shupingList = this.shupingList.concat(res.page.records)
|
||||
// console.log(res,'已购买')
|
||||
this.status = 3
|
||||
}).catch((e) => {
|
||||
console.log(e, 'e')
|
||||
})
|
||||
},
|
||||
// 获得输入的表情数组
|
||||
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)
|
||||
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() {
|
||||
// 格式化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
|
||||
}
|
||||
//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 = []
|
||||
},
|
||||
// 点赞
|
||||
dianzan(val) {},
|
||||
|
||||
// 显示评论
|
||||
pinglun(val) {
|
||||
this.bfaid = val
|
||||
this.pingjiaShow = true
|
||||
},
|
||||
// 提交评论
|
||||
submitPJ() {
|
||||
if (this.Pform.comment != '') {
|
||||
let data = {
|
||||
'content': this.Pform.comment,
|
||||
'userid': this.userInfo.id,
|
||||
'bookid': this.bookid,
|
||||
'bfaid': this.bfaid
|
||||
}
|
||||
// console.log(data,'data')
|
||||
$http.request({
|
||||
url: "forum/comment/save",
|
||||
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.pinglunId = null
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请先输入您的评价内容 ！',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
musicPlay,
|
||||
emotion
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.tanchu {
|
||||
padding: 40rpx 30rpx 40rpx 30rpx;
|
||||
position: relative;
|
||||
|
||||
|
||||
.dp_title {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 50rpx;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dp_add {
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
right: 30rpx;
|
||||
font-size: 22rpx;
|
||||
background-color: #fd6004;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
|
||||
.u-icon {
|
||||
display: inline-block;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shuping-topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.shuping-topbar-tiao {
|
||||
font-size: 28rpx;
|
||||
color: #8b8a91;
|
||||
}
|
||||
|
||||
.shuping-topbar-order {
|
||||
width: 280rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.orderdefine {
|
||||
display: inline-block;
|
||||
padding: 20rpx 0 20rpx 0;
|
||||
// margin: 40rpx 0 15rpx 0;
|
||||
width: 230rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.ordStyle {
|
||||
// border-bottom: 4rpx solid #54a966;
|
||||
// color: #54a966;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quesheng {
|
||||
text-align: center;
|
||||
margin-top: 100rpx;
|
||||
color: #8b8a91;
|
||||
padding-bottom: 20rpx;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.bookInfo {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
// border: 1px splid #999;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.ting-du-mai {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
font-size: 28rpx;
|
||||
width: 400rpx;
|
||||
|
||||
.ting-du-mai-item {
|
||||
color: deepskyblue;
|
||||
border: 1px solid deepskyblue;
|
||||
border-radius: 6rpx;
|
||||
padding: 4rpx 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.imageradius {
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid #e9e9e9;
|
||||
}
|
||||
|
||||
.bookinfoimage {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.bookInfo-inner {
|
||||
padding-left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 100px);
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
margin-top: 0rpx;
|
||||
margin-bottom: 20rpx;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 30rpx;
|
||||
margin-top: 0rpx;
|
||||
margin-bottom: 20rpx;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 28rpx;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
color: #888;
|
||||
padding-left: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 9;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
}
|
||||
|
||||
// view{ padding-left: 30rpx; box-sizing: border-box; width: calc(100% - 150px);
|
||||
// .title{font-size: 38rpx; margin-top: 20rpx; font-weight: blod; margin-bottom: 20rpx; display: block;
|
||||
// }
|
||||
// .description{line-height: 20px; width: 100%; color:#888; padding-left: 0;}
|
||||
// }
|
||||
// image{width: 150px !important; }
|
||||
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.item {
|
||||
// padding: 10px;
|
||||
margin-bottom: 30rpx;
|
||||
// border: 1px solid #999;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.feng {
|
||||
margin: 10rpx 20rpx 0 0;
|
||||
height: 160rpx;
|
||||
width: 140rpx;
|
||||
float: left;
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid #e9e9e9;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.description {
|
||||
// width: 100%;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden !important;
|
||||
height:190rpx;
|
||||
color: #666 !important;
|
||||
text-overflow: -o-ellipsis-lastline !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
display: -webkit-box !important;
|
||||
-webkit-line-clamp: 5 !important;
|
||||
line-clamp: 5 !important;
|
||||
-webkit-box-orient: vertical !important;
|
||||
font-size: 26rpx !important;
|
||||
margin-bottom: 20rpx !important;
|
||||
margin-top: 10rpx !important;
|
||||
|
||||
white-space: pre-wrap;
|
||||
|
||||
// height: 172rpx;
|
||||
}
|
||||
|
||||
// .btns{
|
||||
// font-size: 24rpx;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
// .time{font-size: 24rpx; color: #666; }
|
||||
// .opbtns{
|
||||
// .pingjia{margin-left: 10px;}
|
||||
// }
|
||||
// }
|
||||
|
||||
.btns {
|
||||
font-size: 22rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
width: 300rpx;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 300rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gzicon {
|
||||
margin: 0 0 0 20rpx;
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
// float:left;
|
||||
// border-radius: 20rpx;
|
||||
// border:1rpx solid #e9e9e9;
|
||||
}
|
||||
|
||||
.opbtns {
|
||||
.pingjia {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mb30 {
|
||||
margin-bottom: 30rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.descriptionNew{
|
||||
// overflow: auto;
|
||||
}
|
||||
</style>
|
||||
853
pages/comments/commentsDetail.vue
Normal file
853
pages/comments/commentsDetail.vue
Normal file
@@ -0,0 +1,853 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<!-- 顶部导航栏 -->
|
||||
<z-nav-bar title="书评详情"></z-nav-bar>
|
||||
</view>
|
||||
<view class="bookInfo">
|
||||
<!-- <image :src="productInfo.images" mode="aspectFill"></image>
|
||||
<view>
|
||||
<span class="title">{{productInfo.name}}</span>
|
||||
<view class="description">{{productInfo.description}}</view>
|
||||
</view> -->
|
||||
<!-- <view class="flexbox" style="margin-bottom: 20px;">
|
||||
<image :src="productInfo.images" mode="aspectFill" class="imageradius bookinfoimage"></image>
|
||||
<view class="bookInfo-inner">
|
||||
<span class="title">{{productInfo.name}}</span>
|
||||
<span class="author">作者：{{productInfo.authorName}}</span>
|
||||
<view class="description" v-if="productInfo.description == ''">暂无简介内容</view>
|
||||
<view class="description" v-else>简介：{{productInfo.description}}</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="item">
|
||||
<view class="title">{{commentInfo.title}}</view>
|
||||
<view style="display:flex;">
|
||||
<image v-if="productInfo.images != ''" class="feng" :src="productInfo.images" mode="aspectFill" style="" @click="previewImage(productInfo.images)"></image>
|
||||
<image v-if="commentInfo.image != ''" class="feng" :src="commentInfo.image" mode="aspectFill" style="" @click="previewImage(commentInfo.image)"></image>
|
||||
</view>
|
||||
<!-- <view class="description">
|
||||
|
||||
</view> -->
|
||||
<view class="btns flexbox">
|
||||
<!-- <span class="time">{{commentInfo.createTime}}</span> -->
|
||||
<span class="flexbox opbtns">
|
||||
<!-- <span class="flexbox" @click="dianzan('1')">
|
||||
<u-icon name="heart" color="#55aa00" size="22"></u-icon>
|
||||
<text>2656</text>
|
||||
</span> -->
|
||||
</span>
|
||||
</view>
|
||||
<view class="zhengwen" v-html="commentInfo.content">
|
||||
</view>
|
||||
<view class="btns flexbox">
|
||||
<span class="left"></span>
|
||||
<span class="right flexbox opbtns" style="color:#C0C4CC;">
|
||||
{{formatTimeDifferenceFromT(commentInfo.createTime)}}
|
||||
</span>
|
||||
</view>
|
||||
<view class="btns flexbox" style="margin-top:10rpx;">
|
||||
<span class="left" style="color: #C0C4CC;"></span>
|
||||
<span class="right flexbox opbtns">
|
||||
<image class="gzicon" v-if="commentInfo.ilike" src="../../static/icon/gz2.png" mode="aspectFill" @click.stop="clickLikeshuping(commentInfo)"></image>
|
||||
<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill" @click.stop="clickLikeshuping(commentInfo)"></image>
|
||||
<view style="color: #C0C4CC;">{{commentInfo.contlike}}</view>
|
||||
<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill" @click="pinglun()"></image>
|
||||
<view style="color: #C0C4CC;" @click="pinglun()">{{commentInfo.commentNum}}</view>
|
||||
</span>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="mainContent">
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
<view class="pinglunMain" >
|
||||
<!-- <u-button class="addPl" type='success' plain @click="pinglun()">添加评论</u-button>
|
||||
<view class="">
|
||||
<view style="font-weight: 700;margin:30rpx 0rpx 30rpx;font-size: 30rpx;color:#55aa00;">精彩热评</view>
|
||||
</view> -->
|
||||
<!-- <h4>~ 精彩热评 ~</h4> -->
|
||||
<view v-if="plList.length > 0">
|
||||
<view class="pl-item" v-for="item in plList" :key="item.id">
|
||||
<view class="plusername">{{item.user.name}}</view>
|
||||
<view class="content" v-html="item.content"></view>
|
||||
<!-- <view class="btns flexbox"> -->
|
||||
<!-- <span class="time">{{formatTimeDifferenceFromT(item.createTime)}}</span> -->
|
||||
<!-- <span class="flexbox opbtns">
|
||||
<span class="flexbox pingjia" @click="pinglun(item.id)">
|
||||
<u-icon name="chat" color="#888" size="26"></u-icon>
|
||||
</span>
|
||||
</span> -->
|
||||
<view class="btns flexbox" style="margin-top:10rpx;">
|
||||
<span class="left" style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item.createTime)}}</span>
|
||||
<span class="right flexbox opbtns">
|
||||
<image class="gzicon" v-if="item.ilike" src="../../static/icon/gz2.png" mode="aspectFill" @click.stop="clickLikehuifu(item)"></image>
|
||||
<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill" @click.stop="clickLikehuifu(item)"></image>
|
||||
<view style="color: #C0C4CC;">{{item.contlike}}</view>
|
||||
<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill" @click="pinglun(item)"></image>
|
||||
<view style="color: #C0C4CC;" @click="pinglun(item)">{{item.commentsNum}}</view>
|
||||
</span>
|
||||
</view>
|
||||
<view class="pl-son" v-if="item.comments.length > 0">
|
||||
<view class="pl-son-item" v-for="(item1,index) in item.comments" :key="index">
|
||||
<view class="pl-son-item-content">
|
||||
<text class="pl-son-atob">{{item1.user.name + " 回复 " + item1.puser.name}}：</text>
|
||||
<text v-html="item1.content"></text>
|
||||
</view>
|
||||
<view class="btns flexbox" style="margin-top:10rpx;">
|
||||
<span class="left" style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item1.createTime)}}</span>
|
||||
<span class="right flexbox opbtns">
|
||||
<image class="gzicon" v-if="item1.ilike" src="../../static/icon/gz2.png" mode="aspectFill" @click.stop="clickLikehuifu(item1)"></image>
|
||||
<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill" @click.stop="clickLikehuifu(item1)"></image>
|
||||
<view style="color: #C0C4CC;">{{item1.contlike}}</view>
|
||||
<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill" @click="pinglun(item1)"></image>
|
||||
<!-- <view style="color: #C0C4CC;" @click="pinglun(item1)">{{item1.commentsNum}}</view> -->
|
||||
</span>
|
||||
</view>
|
||||
<view style="border-bottom:2rpx solid #e9e9e9;height:20rpx;" v-if="index<item.comments.length-1"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- </view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="quesheng" v-else>
|
||||
<text>暂无评论内容~</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="status==0" style="text-align: center;">
|
||||
<u-loading-icon style="display: inline-block;"></u-loading-icon>
|
||||
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
|
||||
</view>
|
||||
<u-divider v-if="status == 1" text="已加载全部评论"></u-divider>
|
||||
<!-- 评论书评对话框 -->
|
||||
<!-- 回复评论对话框 -->
|
||||
<u-popup :show="pingjiaShow" :round="10" @close="closePingjia">
|
||||
<view class="tanchu">
|
||||
<view class="dp_title">{{Pform.name?("回复："+Pform.name):"添加评论"}}</view>
|
||||
<view style="max-height: 1000rpx;overflow-y: scroll;">
|
||||
<!-- <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="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="">
|
||||
<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>
|
||||
<music-play :playData="playData"></music-play>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
|
||||
import musicPlay from '@/components/music.vue'
|
||||
import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playData:{},
|
||||
isShowEmj: false,
|
||||
emojiIcon:'cuIcon-emoji',
|
||||
windowWidth:0,
|
||||
bookid:null,
|
||||
bfa_id:null, //书评id
|
||||
productInfo:{},
|
||||
status:3,
|
||||
pingjiaShow:false, //添加评价
|
||||
Pform:{ // 评价表单
|
||||
//star:0,
|
||||
comment:'',
|
||||
//img:[],
|
||||
html:''
|
||||
},
|
||||
emoji:[],
|
||||
Files:[],
|
||||
commentInfo:{},
|
||||
pPage:1,
|
||||
pTotal:0, // 评论的总条数
|
||||
// pinglunId:null,
|
||||
plList:[], // 书评的评论list
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
this.windowWidth = uni.getSystemInfoSync().windowWidth;
|
||||
console.log(e,'onload')
|
||||
this.bookid = e.bookid
|
||||
this.bfa_id = e.bfa_id
|
||||
},
|
||||
onShow() {
|
||||
this.getProDetail()
|
||||
this.getbookComInfo()
|
||||
this.getCommPL()
|
||||
},
|
||||
onReachBottom() {
|
||||
console.log('到底了')
|
||||
if(this.pPage+1 <= this.pTotal){
|
||||
this.status = 0
|
||||
this.pPage++
|
||||
this.getCommPL()
|
||||
}else{
|
||||
this.status = 3
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
methods: {
|
||||
formatTimeDifferenceFromT(dateTimeT) {
|
||||
const now = new Date();
|
||||
const t = new Date(dateTimeT);
|
||||
const differenceInSeconds = Math.floor((now - t) / 1000);
|
||||
|
||||
if (differenceInSeconds <= 3600) {
|
||||
const minutes = Math.floor(differenceInSeconds / 60);
|
||||
return `${minutes} 分钟前`;
|
||||
} else if (differenceInSeconds <= 86400) {
|
||||
const hours = Math.floor(differenceInSeconds / 3600);
|
||||
return `${hours} 小时前`;
|
||||
} else if (differenceInSeconds <= 2592000) {
|
||||
const days = Math.floor(differenceInSeconds / 86400);
|
||||
return `${days} 天前`;
|
||||
} else {
|
||||
const currentYear = now.getFullYear();
|
||||
const tYear = t.getFullYear();
|
||||
if (currentYear === tYear) {
|
||||
const month = t.getMonth() + 1;
|
||||
const day = t.getDate();
|
||||
return `${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
|
||||
} else {
|
||||
const year = t.getFullYear();
|
||||
const month = t.getMonth() + 1;
|
||||
const day = t.getDate();
|
||||
return `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获得书评回复列表
|
||||
getCommPL(){
|
||||
let data = {
|
||||
'forumId':this.bfa_id,
|
||||
'limit': 5,
|
||||
'page': this.pPage,
|
||||
}
|
||||
console.log(data,'data')
|
||||
this.$http
|
||||
.post('forum/articles/getCommentByForum', data)
|
||||
.then(res => {
|
||||
if(res.code == 0){
|
||||
console.log(res,'书评评论')
|
||||
// this.plList = this.plList.concat(res.page.list)
|
||||
let plList1 = res.page.records
|
||||
this.pTotal = res.page.pages
|
||||
this.status = 3
|
||||
// 评论格式化
|
||||
var newarr = []
|
||||
plList1.forEach((item1)=>{
|
||||
item1.content = this.getHtmlComment(item1.content)
|
||||
if(item1.comments && item1.comments.length>0){
|
||||
item1.comments.forEach((item2)=>{
|
||||
item2.content = this.getHtmlComment(item2.content)
|
||||
})
|
||||
}
|
||||
// console.log(pjstr)
|
||||
newarr.push(item1)
|
||||
|
||||
})
|
||||
this.plList = this.plList.concat(newarr)
|
||||
console.log('改变格式后', this.plList)
|
||||
}
|
||||
}).catch((e)=>{
|
||||
console.log(e)
|
||||
})
|
||||
},
|
||||
// 获得书评详情
|
||||
getbookComInfo(){
|
||||
this.$http
|
||||
.post(`forum/articles/appinfo/${this.bfa_id}`)
|
||||
.then(res => {
|
||||
if(res.code == 0){
|
||||
console.log(res,'书评详细内容')
|
||||
this.commentInfo = res.BookForumArticlesEntity
|
||||
}
|
||||
}).catch((e)=>{
|
||||
console.log(e)
|
||||
})
|
||||
},
|
||||
clickLikeshuping(item){
|
||||
this.$http
|
||||
.post("forum/articles/chickForumContlike?forum_id=" + item.id,)
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.showToast({
|
||||
title:'点赞成功！',
|
||||
icon:'success'
|
||||
})
|
||||
|
||||
item.contlike++
|
||||
}
|
||||
}).catch((e)=>{
|
||||
console.log(e,'e')
|
||||
})
|
||||
},
|
||||
clickLikehuifu(item){
|
||||
let data = {
|
||||
comment_id: item.id
|
||||
}
|
||||
this.$http
|
||||
.post("forum/articles/chickCommentConlike", data)
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.showToast({
|
||||
title:'点赞成功！',
|
||||
icon:'success'
|
||||
})
|
||||
|
||||
item.contlike++
|
||||
}
|
||||
}).catch((e)=>{
|
||||
console.log(e,'e')
|
||||
})
|
||||
},
|
||||
getProDetail(){
|
||||
// 获取商品详情
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
});
|
||||
//console.log(e.id,'e.id')
|
||||
this.$http
|
||||
.post('book/book/appinfo/' + this.bookid + '/' + this.userInfo.id)
|
||||
.then(res => {
|
||||
console.log(res,'res')
|
||||
this.productInfo = res.book
|
||||
uni.hideLoading();
|
||||
}).catch((e)=>{
|
||||
console.log(e,'e')
|
||||
})
|
||||
},
|
||||
// 获得输入的表情数组
|
||||
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)
|
||||
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(comment){
|
||||
// 格式化html
|
||||
// console.log(comment,'comment')
|
||||
// 这里处理 链接 换行符
|
||||
let replacedStr = comment.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
|
||||
// console.log(item, index)
|
||||
var indexss = emojiList1.findIndex(item1 => item1.alt === item)
|
||||
// console.log(indexss, 'indexss')
|
||||
return '<img src="https://www.nuttyreading.com/emojis/emojis/qq/' + emojiList1[indexss].url + '" width="18rpx">';
|
||||
});
|
||||
// console.log(replacedStr,'replacedStr')
|
||||
return replacedStr.replace(/(\r\n)|(\n)/g, '<br>');
|
||||
|
||||
|
||||
},
|
||||
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 = []
|
||||
},
|
||||
// 点赞
|
||||
dianzan(val){},
|
||||
|
||||
// 放大图片
|
||||
previewImage(url) {
|
||||
console.log(url)
|
||||
uni.previewImage({
|
||||
urls: [url]
|
||||
});
|
||||
},
|
||||
// 显示评论框
|
||||
pinglun(val){
|
||||
console.log('pinglun-val', val)
|
||||
if(val && val.user && val.user.id && val.puser && val.puser.id){
|
||||
this.Pform.name = val.user.name || ''
|
||||
this.Pform.pid = val.pid
|
||||
this.Pform.puserId = val.user.id || ''
|
||||
}else if(val && val.user && val.user.id){
|
||||
this.Pform.name = val.user.name || ''
|
||||
this.Pform.pid = val.id
|
||||
this.Pform.puserId = val.user.id || ''
|
||||
}else {
|
||||
// this.pinglunId = val || null
|
||||
this.Pform.pid = ''
|
||||
this.Pform.puserId = ''
|
||||
}
|
||||
this.pingjiaShow = true
|
||||
},
|
||||
// 提交评论
|
||||
submitPJ(){
|
||||
if(this.Pform.comment != ''){
|
||||
|
||||
// let data={
|
||||
// 'content':this.Pform.comment,
|
||||
// 'userid':this.userInfo.id,
|
||||
// 'bookid':this.bookid,
|
||||
// 'bfaid' : this.bfa_id,
|
||||
// // 'id': this.pinglunId
|
||||
// }
|
||||
// console.log(data,'data')
|
||||
|
||||
|
||||
let data = {
|
||||
forumId : this.bfa_id,
|
||||
userId: this.userInfo.id,
|
||||
content: this.Pform.comment,
|
||||
pid: this.Pform.pid,
|
||||
puserId: this.Pform.puserId,
|
||||
}
|
||||
console.log(data,'提交的评论id')
|
||||
this.$http
|
||||
.post("forum/articles/pushMsgToForum", data)
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.showToast({
|
||||
title:'评论成功！',
|
||||
icon:'success'
|
||||
})
|
||||
// this.getCommPL()
|
||||
this.pingjiaShow = false
|
||||
this.Pform.comment = ''
|
||||
this.Pform.name = ''
|
||||
this.Pform.pid = ''
|
||||
this.Pform.puserId = ''
|
||||
// this.pinglunId = null
|
||||
|
||||
// 把回复的评论拼进this.plList回复列表中
|
||||
let comment = res.comment
|
||||
// 第一种情况：1级回复
|
||||
if(comment&&comment.pid == 0){
|
||||
comment.content = this.getHtmlComment(comment.content)
|
||||
console.log('this.userInfo',this.userInfo)
|
||||
comment.user = this.userInfo
|
||||
comment.comments = []
|
||||
this.plList.unshift(comment)
|
||||
}else if(comment&&comment.pid > 0){// 第二种情况：回复第1级回复和回复第2级回复
|
||||
|
||||
for(let i=0;i<this.plList.length;i++){
|
||||
if(this.plList[i].id == comment.pid){
|
||||
|
||||
comment.content = this.getHtmlComment(comment.content)
|
||||
console.log('this.userInfo',this.userInfo)
|
||||
comment.user = this.userInfo
|
||||
comment.puser = this.plList[i].user
|
||||
// comment.comments = []
|
||||
this.plList[i].comments.push(comment)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}).catch((e)=>{
|
||||
console.log(e,'e')
|
||||
})
|
||||
|
||||
// $http.request({
|
||||
// url: "forum/comment/save",
|
||||
// method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
// data,
|
||||
// header: { //默认 无 说明：请求头
|
||||
// 'Content-Type': 'application/json'
|
||||
// },
|
||||
// }).then(res => {
|
||||
// if (res.code == 0) {
|
||||
// uni.showToast({
|
||||
// title:'评论成功！',
|
||||
// icon:'success'
|
||||
// })
|
||||
// this.getCommPL()
|
||||
// this.pingjiaShow = false
|
||||
// this.Pform.comment = ''
|
||||
// this.pinglunId = null
|
||||
// }
|
||||
// })
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:'请先输入您的评价内容 ！',
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
components:{
|
||||
musicPlay,
|
||||
emotion
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.addPl{padding-top: 0rpx; margin-bottom: 0rpx;}
|
||||
.pinglunMain{
|
||||
.pl-item{
|
||||
margin: 0 0 14rpx 0;
|
||||
padding: 0 0 14rpx 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
.pl-son{
|
||||
margin: 14rpx 0 14rpx 60rpx;
|
||||
padding: 0 14rpx 14rpx 14rpx;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 10rpx;
|
||||
.pl-son-item{
|
||||
font-size: 26rpx;
|
||||
padding-top: 28rpx;
|
||||
.pl-son-item-content{
|
||||
|
||||
}
|
||||
.pl-son-atob{
|
||||
color: #a1a1a1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.plusername{
|
||||
font-size: 26rpx;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
.content{
|
||||
margin: 30rpx 0rpx;
|
||||
line-height: 40rpx;
|
||||
color: #000;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
background-color: #fff; padding: 10px;
|
||||
// h4{color: #55aa00; font-size: 40rpx; margin:30rpx 0 ; text-align: center;}
|
||||
.time{color: #888; font-size: 24rpx;}
|
||||
.btns{
|
||||
font-size: 22rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.left{
|
||||
width: 300rpx;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
.right{
|
||||
width: 300rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.gzicon{
|
||||
margin:0 0 0 20rpx;
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
// float:left;
|
||||
// border-radius: 20rpx;
|
||||
// border:1rpx solid #e9e9e9;
|
||||
}
|
||||
.opbtns{
|
||||
.pingjia{margin-left: 10px;}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// .mbtns{padding: 5px; background-color: #f4fff5; border-radius: 10px; font-size: 34rpx; color: #8b8a91; margin:15px 0; justify-content: space-between;}
|
||||
/deep/.zhengwen{
|
||||
line-height: 50rpx;
|
||||
font-size: 28rpx;
|
||||
margin-top: 20rpx;
|
||||
img{
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
.flexbox{display: flex;}
|
||||
.container{padding: 10px;}
|
||||
.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; }
|
||||
.tanchu {
|
||||
padding: 40rpx 30rpx 40rpx 30rpx;
|
||||
position: relative;
|
||||
|
||||
|
||||
.dp_title {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 50rpx;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dp_add {
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
right: 30rpx;
|
||||
font-size: 22rpx;
|
||||
background-color: #fd6004;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
|
||||
.u-icon {
|
||||
display: inline-block;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
}}
|
||||
|
||||
.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91; padding-bottom: 20rpx; padding-top: 20rpx;}
|
||||
// .bookInfo{justify-content: space-between; margin-bottom: 15px; background-color: #fff; padding:10px; border: 1px splid #999;
|
||||
|
||||
// view{ padding-left: 30rpx;width: calc(100% - 150rpx); box-sizing: border-box;
|
||||
// .title{font-size: 38rpx; margin-top: 20rpx; margin-bottom: 20rpx; display: block;}
|
||||
// .description{line-height: 20px; width: 100%; color:#888; padding-left: 0;}
|
||||
// text{margin-left: 10px; line-height: 20px; color: #888; padding-left: 0;}
|
||||
// }
|
||||
// image{width: 150px; height: 150px;}
|
||||
|
||||
// }
|
||||
.bookInfo{
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
background-color: #fff;
|
||||
padding:10px;
|
||||
border: 1px splid #999;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
// .imageradius{
|
||||
// border-radius: 20rpx;
|
||||
// border:1rpx solid #e9e9e9;
|
||||
// }
|
||||
|
||||
// .bookInfo-inner{ padding-left: 30rpx; box-sizing: border-box; width: calc(100% - 150px);
|
||||
// .title{font-size: 32rpx; margin-top: 0rpx; margin-bottom: 20rpx;font-weight: 700; display: block;}
|
||||
// .author{font-size: 30rpx;margin-top: 0rpx;margin-bottom: 20rpx;font-weight: 500; display: block; }
|
||||
|
||||
// .description{
|
||||
// font-size: 28rpx;
|
||||
// line-height: 20px;
|
||||
// width: 100%;
|
||||
// color:#888;
|
||||
// padding-left: 0;
|
||||
// overflow:hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// -webkit-line-clamp: 9;
|
||||
// display: -webkit-box;
|
||||
// -webkit-box-orient: vertical;
|
||||
// }
|
||||
// }
|
||||
// .bookinfoimage{width: 150px !important; }
|
||||
|
||||
// view{ padding-left: 30rpx; box-sizing: border-box; width: calc(100% - 150px);
|
||||
// .title{font-size: 38rpx; margin-top: 20rpx; font-weight: blod; margin-bottom: 20rpx; display: block;
|
||||
// }
|
||||
// .description{line-height: 20px; width: 100%; color:#888; padding-left: 0;}
|
||||
// }
|
||||
// image{width: 150px !important; }
|
||||
|
||||
.btns{
|
||||
font-size: 22rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.left{
|
||||
width: 300rpx;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
.right{
|
||||
width: 300rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.gzicon{
|
||||
margin:0 0 0 20rpx;
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
// float:left;
|
||||
// border-radius: 20rpx;
|
||||
// border:1rpx solid #e9e9e9;
|
||||
}
|
||||
.opbtns{
|
||||
.pingjia{margin-left: 10px;}
|
||||
}
|
||||
}
|
||||
|
||||
.feng{
|
||||
// margin:10rpx 0 0 0;
|
||||
// height: 670rpx;
|
||||
// width: 670rpx;
|
||||
// border-radius: 20rpx;
|
||||
// border:1rpx solid #e9e9e9;
|
||||
|
||||
margin:10rpx 20rpx 0 0;
|
||||
height: 360rpx;
|
||||
width: 280rpx;
|
||||
// float:left;
|
||||
border-radius: 20rpx;
|
||||
border:1rpx solid #e9e9e9;
|
||||
}
|
||||
.item{
|
||||
// padding: 10px;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
// .title{font-size: 38rpx; font-weight: blod; color: #55aa00; overflow: hidden;}
|
||||
.title{font-size: 32rpx; font-weight: 700; color: #000; overflow: hidden;padding-top: 20rpx;padding-bottom: 10rpx;}
|
||||
.description{
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 30rpx;
|
||||
margin-top:10rpx;
|
||||
}
|
||||
|
||||
}
|
||||
.mainContent{
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
.item{
|
||||
// padding: 10px;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.feng{
|
||||
// margin:10rpx 0 0 0;
|
||||
// height: 670rpx;
|
||||
// width: 670rpx;
|
||||
// border-radius: 20rpx;
|
||||
// border:1rpx solid #e9e9e9;
|
||||
|
||||
margin:10rpx 20rpx 0 0;
|
||||
height: 160rpx;
|
||||
width: 140rpx;
|
||||
float:left;
|
||||
border-radius: 20rpx;
|
||||
border:1rpx solid #e9e9e9;
|
||||
}
|
||||
// .title{font-size: 38rpx; font-weight: blod; color: #55aa00; overflow: hidden;}
|
||||
.title{font-size: 32rpx; font-weight: 500; color: #55aa00; overflow: hidden;padding-top: 20rpx;}
|
||||
.description{
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 15px;
|
||||
margin-top:5px;
|
||||
|
||||
// overflow: hidden;
|
||||
// color: #666;
|
||||
// text-overflow: -o-ellipsis-lastline;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// display: -webkit-box;
|
||||
// -webkit-line-clamp: 5;
|
||||
// line-clamp: 5;
|
||||
// -webkit-box-orient: vertical;
|
||||
// font-size: 28rpx;
|
||||
// margin-bottom: 15px;
|
||||
// margin-top:5px;
|
||||
// min-height: 186rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.mb30{margin-bottom: 30rpx; overflow: hidden;}
|
||||
</style>
|
||||
352
pages/comments/commentsList-old.vue
Normal file
352
pages/comments/commentsList-old.vue
Normal file
@@ -0,0 +1,352 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<!-- 顶部导航栏 -->
|
||||
<z-nav-bar title="书评列表" bgColor="red"></z-nav-bar>
|
||||
</view>
|
||||
<view class="bookInfo" v-for="(productInfo,index) in productList" :key="index">
|
||||
<view class="flexbox" style="margin-bottom: 20px;">
|
||||
<image :src="productInfo.bookimage" mode="aspectFill" class="imageradius bookinfoimage"></image>
|
||||
<view class="bookInfo-inner">
|
||||
<span class="title">{{productInfo.bookName}}</span>
|
||||
<span class="author">作者：{{productInfo.authorName}}</span>
|
||||
<view class="description">简介：{{productInfo.bookdesc}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mainContent">
|
||||
<view style="display:flex;justify-content:space-between;">
|
||||
<view style="font-weight: 700;margin:0rpx 0rpx 40rpx;font-size:32rpx;">热门书评</view>
|
||||
<view style="font-weight: 500;margin:0rpx 0rpx 20rpx;font-size:28rpx;color:#8b8a91" @click.stop="toMore(productInfo)">查看更多＞</view>
|
||||
</view>
|
||||
<view v-if="productInfo.shupingList.length > 0">
|
||||
<view class="item" @click.stop="toDetail(item)" v-for="(item,index1) in productInfo.shupingList" :key="index1">
|
||||
|
||||
<view class="title">{{item.title}}</view>
|
||||
<image class="feng" v-if="item.image" :src="item.image" mode="aspectFill"></image>
|
||||
<view class="description" v-html="item.content">
|
||||
</view>
|
||||
<!-- <image class="feng" v-if="item.image == ''" src="../../static/icon/home_bg.jpg" mode="aspectFill"></image> -->
|
||||
|
||||
<view class="btns flexbox">
|
||||
<span class="time">{{item.createTime}}</span>
|
||||
<span class="flexbox opbtns">
|
||||
</span>
|
||||
</view>
|
||||
<view style="border-bottom:2rpx solid #e9e9e9;height:50rpx;" v-if="index1<productInfo.shupingList.length-1"></view>
|
||||
</view>
|
||||
<!-- <view class="gengduoshuping" @click.stop="toMore(productInfo)">
|
||||
查看更多
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="quesheng" v-else>
|
||||
暂无书评内容~
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="status==0" style="text-align: center;">
|
||||
<u-loading-icon style="display: inline-block;"></u-loading-icon>
|
||||
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
|
||||
</view>
|
||||
<view v-if="status==1" style="padding-bottom: 20rpx;">
|
||||
<u-divider text="全部加载完成"></u-divider>
|
||||
</view>
|
||||
|
||||
<music-play :playData="playData"></music-play>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
|
||||
import musicPlay from '@/components/music.vue'
|
||||
import { data } from 'jquery';
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// loadingNow : false,
|
||||
playData:{},
|
||||
emojiIcon:'cuIcon-emoji',
|
||||
windowWidth:0,
|
||||
bookid:null,
|
||||
booklistpage: 1,
|
||||
productList:[],
|
||||
productInfo:{},
|
||||
pingjiaShow:false, //添加评价
|
||||
Pform:{ // 评价表单
|
||||
star:0,
|
||||
comment:'',
|
||||
img:[],
|
||||
html:''
|
||||
},
|
||||
emoji:[],
|
||||
Files:[],
|
||||
page:1,
|
||||
pageSize:10,
|
||||
total:0,
|
||||
status:3,
|
||||
shupingList:[],
|
||||
bfaid:null,
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
console.log('下拉刷新了')
|
||||
uni.stopPullDownRefresh();
|
||||
|
||||
this.booklistpage=1, // 页码
|
||||
this.productList = []
|
||||
this.getBookList()
|
||||
|
||||
},
|
||||
onReachBottom() {
|
||||
// this.loadingNow = true
|
||||
this.booklistpage++
|
||||
this.getBookList()
|
||||
// if(this.page < this.total){
|
||||
// this.page++
|
||||
// console.log('加载',this.page)
|
||||
// this.status = 0
|
||||
// this.getBookCom()
|
||||
|
||||
// }else{
|
||||
// this.status = 1
|
||||
// console.log('加载完成了',this.page)
|
||||
// return
|
||||
// }
|
||||
},
|
||||
onLoad(e) {
|
||||
this.windowWidth = uni.getSystemInfoSync().windowWidth;
|
||||
console.log(e,'onload')
|
||||
// this.bookid = e.bookid
|
||||
this.getBookList()
|
||||
},
|
||||
computed:{
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
methods: {
|
||||
// 查看本书更多书评
|
||||
toMore(val){
|
||||
console.log(val,'val')
|
||||
uni.navigateTo({
|
||||
url: '../comments/comments?bookid='+val.bookid,
|
||||
});
|
||||
},
|
||||
// 书评详情
|
||||
toDetail(val){
|
||||
console.log(val,'val')
|
||||
uni.navigateTo({
|
||||
url:'../comments/commentsDetail?bookid='+val.bookid+'&bfa_id='+val.id
|
||||
})
|
||||
},
|
||||
getBookList(){
|
||||
// 获取商品详情
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
});
|
||||
this.$http
|
||||
.post('forum/articles/desc/' + this.booklistpage)
|
||||
.then(res => {
|
||||
let list = res.descupdatelist.list
|
||||
console.log(list,'list')
|
||||
for(let i=0; i < list.length; i++){
|
||||
let data = {
|
||||
'page': 1,
|
||||
'limit': 3,
|
||||
'bookid' : list[i].bookid
|
||||
}
|
||||
this.$http
|
||||
.post('forum/articles/descupdatelist', data)
|
||||
.then(res => {
|
||||
// this.total = res.page.totalPage
|
||||
// this.shupingList = this.shupingList.concat(res.page.list)
|
||||
list[i].shupingList = res.page.list
|
||||
console.log(res.page.list,'评论获取成功')
|
||||
|
||||
console.log(list,'list')
|
||||
this.productList.push(list[i])
|
||||
console.log(this.productList,'productList')
|
||||
// this.status = 3
|
||||
}).catch((e)=>{
|
||||
console.log(e,'e')
|
||||
})
|
||||
}
|
||||
if(list.length != 2){
|
||||
this.status = 1
|
||||
} else {
|
||||
this.status = 0
|
||||
}
|
||||
uni.hideLoading();
|
||||
}).catch((e)=>{
|
||||
console.log(e,'e')
|
||||
})
|
||||
},
|
||||
|
||||
// 显示评论
|
||||
pinglun(val){
|
||||
this.bfaid = val
|
||||
this.pingjiaShow = true
|
||||
},
|
||||
// 提交评论
|
||||
submitPJ(){
|
||||
if(this.Pform.comment != ''){
|
||||
let data={
|
||||
'content':this.Pform.comment,
|
||||
'userid':this.userInfo.id,
|
||||
'bookid':this.bookid,
|
||||
'bfaid': this.bfaid
|
||||
}
|
||||
// console.log(data,'data')
|
||||
$http.request({
|
||||
url: "forum/comment/save",
|
||||
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.pinglunId = null
|
||||
}
|
||||
})
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:'请先输入您的评价内容 ！',
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
components:{
|
||||
musicPlay,
|
||||
emotion
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.flexbox{display: flex;}
|
||||
.container{padding: 10px;}
|
||||
.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; }
|
||||
.tanchu {
|
||||
padding: 40rpx 30rpx 40rpx 30rpx;
|
||||
position: relative;
|
||||
|
||||
|
||||
.dp_title {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 50rpx;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dp_add {
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
right: 30rpx;
|
||||
font-size: 22rpx;
|
||||
background-color: #fd6004;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
|
||||
.u-icon {
|
||||
display: inline-block;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
}}
|
||||
|
||||
.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91; padding-bottom: 20rpx; padding-top: 20rpx;}
|
||||
.gengduoshuping{text-align: right; color: #0044ff; padding-bottom: 20rpx; padding-top: 20rpx;}
|
||||
.bookInfo{
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
background-color: #fff;
|
||||
padding:10px;
|
||||
border: 1px splid #999;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.imageradius{
|
||||
border-radius: 20rpx;
|
||||
border:1rpx solid #e9e9e9;
|
||||
}
|
||||
|
||||
.bookInfo-inner{ padding-left: 30rpx; box-sizing: border-box; width: calc(100% - 150px);
|
||||
.title{font-size: 32rpx; margin-top: 0rpx; margin-bottom: 20rpx;font-weight: 700; display: block;}
|
||||
.author{font-size: 30rpx;margin-top: 0rpx;margin-bottom: 20rpx;font-weight: 500; display: block; }
|
||||
|
||||
.description{
|
||||
font-size: 28rpx;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
color:#888;
|
||||
padding-left: 0;
|
||||
overflow:hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 9;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
.bookinfoimage{width: 150px !important; }
|
||||
|
||||
}
|
||||
.mainContent{
|
||||
background-color: #fff;
|
||||
.item{
|
||||
// padding: 10px;
|
||||
margin-bottom: 30rpx;
|
||||
// border: 1px solid #999;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.feng{margin:10rpx 0 0 0;height: 200rpx;width: 200rpx;float:right;border-radius: 20rpx;border:1rpx solid #e9e9e9;}
|
||||
.title{font-size: 32rpx; font-weight: 500; color: #55aa00; overflow: hidden;}
|
||||
.description{
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 5;
|
||||
line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 15px;
|
||||
margin-top:5px;
|
||||
min-height: 144rpx;
|
||||
}
|
||||
.btns{
|
||||
font-size: 24rpx;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.time{font-size: 24rpx; color: #666; }
|
||||
.opbtns{
|
||||
.pingjia{margin-left: 10px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mb30{margin-bottom: 30rpx; overflow: hidden;}
|
||||
</style>
|
||||
847
pages/comments/commentsList.vue
Normal file
847
pages/comments/commentsList.vue
Normal file
@@ -0,0 +1,847 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<public-module></public-module>
|
||||
<view class="header">
|
||||
<!-- 顶部导航栏 -->
|
||||
<z-nav-bar title="书评列表"></z-nav-bar>
|
||||
<view class="orderTabs">
|
||||
<view v-for="(item,index) in commentsTabs" @click="commentsTabCLi(item.value)" :key="index"
|
||||
:class="commentsListTab==item.value?'orderdefine ordStyle':'orderdefine'">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 站位 -->
|
||||
<view class="orderTabs" style="z-index:0;position:unset;">
|
||||
<view class="orderdefine">1</view>
|
||||
</view>
|
||||
<view v-if="commentsListTab == 1">
|
||||
<view v-if="newList.length > 0">
|
||||
<view class="bookInfo" v-for="(item,index) in newList" :key="index">
|
||||
<view class="mainContent">
|
||||
<view class="item" @click.stop="toDetail(item)">
|
||||
|
||||
<view class="title">{{item.title}}</view>
|
||||
<image class="feng" v-if="item.bookimage" :src="item.bookimage" mode="aspectFill"></image>
|
||||
<view class="description" v-html="item.content">
|
||||
</view>
|
||||
<view class="btns flexbox">
|
||||
<span class="left">{{item.bookname}}</span>
|
||||
<span class="right flexbox opbtns" style="color:#3c9cff;">
|
||||
全文
|
||||
</span>
|
||||
</view>
|
||||
<view class="btns flexbox" style="margin-top:10rpx;">
|
||||
<span class="left"
|
||||
style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item.createTime)}}</span>
|
||||
<span class="right flexbox opbtns">
|
||||
<image class="gzicon" v-if="item.ilike" src="../../static/icon/gz2.png"
|
||||
mode="aspectFill" @click.stop="clickLike(item)"></image>
|
||||
<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill"
|
||||
@click.stop="clickLike(item)"></image>
|
||||
<view style="color: #C0C4CC;">{{item.contlike}}</view>
|
||||
<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png"
|
||||
mode="aspectFill"></image>
|
||||
<view style="color: #C0C4CC;">{{item.commentNum}}</view>
|
||||
</span>
|
||||
</view>
|
||||
<view style="border-bottom:2rpx solid #e9e9e9;height:50rpx;" v-if="index<item.length-1">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="quesheng" v-else>
|
||||
暂无书评内容~
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="commentsListTab == 2">
|
||||
<view v-if="hotList.length > 0">
|
||||
<view class="bookInfo" v-for="(item,index) in hotList" :key="index">
|
||||
<view class="mainContent">
|
||||
<view class="item" @click.stop="toDetail(item)">
|
||||
|
||||
<view class="title">{{item.title}}</view>
|
||||
<image class="feng" v-if="item.bookimage" :src="item.bookimage" mode="aspectFill"></image>
|
||||
<view class="description" v-html="item.content">
|
||||
</view>
|
||||
<view class="btns flexbox">
|
||||
<span class="left">{{item.bookname}}</span>
|
||||
<span class="right flexbox opbtns" style="color:#3c9cff;">
|
||||
全文
|
||||
</span>
|
||||
</view>
|
||||
<view class="btns flexbox" style="margin-top:10rpx;">
|
||||
<span class="left"
|
||||
style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item.createTime)}}</span>
|
||||
<span class="right flexbox opbtns">
|
||||
<image class="gzicon" v-if="item.ilike" src="../../static/icon/gz2.png"
|
||||
mode="aspectFill" @click.stop="clickLike(item)"></image>
|
||||
<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill"
|
||||
@click.stop="clickLike(item)"></image>
|
||||
<view style="color: #C0C4CC;">{{item.contlike}}</view>
|
||||
<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png"
|
||||
mode="aspectFill"></image>
|
||||
<view style="color: #C0C4CC;">{{item.commentNum}}</view>
|
||||
</span>
|
||||
</view>
|
||||
<view style="border-bottom:2rpx solid #e9e9e9;height:50rpx;" v-if="index<item.length-1">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="quesheng" v-else>
|
||||
暂无书评内容~
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="commentsListTab == 3">
|
||||
<view class="" style="padding:40rpx 20rpx;">
|
||||
<view class="mytabs flexbox">
|
||||
<view :class="['item','item1', contentShow == 1 ? 'active' :'']" @click="setData(1)">
|
||||
已购图书
|
||||
</view>
|
||||
<view :class="['item','item2', contentShow == 2 ? 'active' :'']" @click="setData(2)">
|
||||
推荐图书
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="bookList.length > 0">
|
||||
<view class="bookInfo3" v-for="(item,index) in bookList" :key="index">
|
||||
<view class="mainContent3">
|
||||
<view class="item">
|
||||
<view class="btns flexbox" @click.stop="toMore(item)">
|
||||
<view class="title">{{item.name}}</view>
|
||||
<view class="pianshuping">{{item.forumNum}}篇书评</view>
|
||||
</view>
|
||||
<image class="feng" v-if="item.images" :src="item.images" mode="aspectFill"
|
||||
@click.stop="toMore(item)"></image>
|
||||
<view class="shupingList">
|
||||
<view class="description" v-for="(item1,index1) in item.forums" :key="index1"
|
||||
@click.stop="toDetail1(item1)">{{item1.title}}</view>
|
||||
</view>
|
||||
<view class="btns flexbox" @click.stop="toMore(item)">
|
||||
<span class="left"></span>
|
||||
<span class="right flexbox opbtns" style="color:#3c9cff;">
|
||||
全部
|
||||
</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="quesheng" v-else>
|
||||
暂无书评内容~
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="status==0" style="text-align: center;">
|
||||
<u-loading-icon style="display: inline-block;"></u-loading-icon>
|
||||
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
|
||||
</view>
|
||||
<view v-if="status==1" style="padding-bottom: 20rpx;">
|
||||
<u-divider text="全部加载完成"></u-divider>
|
||||
</view>
|
||||
|
||||
<music-play :playData="playData"></music-play>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
|
||||
import musicPlay from '@/components/music.vue'
|
||||
import {
|
||||
data
|
||||
} from 'jquery';
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex';
|
||||
import {
|
||||
checkBookRight
|
||||
} from '@/config/utils';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// loadingNow : false,
|
||||
playData: {},
|
||||
emojiIcon: 'cuIcon-emoji',
|
||||
windowWidth: 0,
|
||||
bookid: null,
|
||||
booklistpage: 1,
|
||||
productList: [],
|
||||
productInfo: {},
|
||||
pingjiaShow: false, //添加评价
|
||||
Pform: { // 评价表单
|
||||
star: 0,
|
||||
comment: '',
|
||||
img: [],
|
||||
html: ''
|
||||
},
|
||||
emoji: [],
|
||||
Files: [],
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 0, // 资源的总页数1
|
||||
status: 3,
|
||||
shupingList: [],
|
||||
bfaid: null,
|
||||
commentsTabs: [{
|
||||
name: '书集',
|
||||
value: 3
|
||||
}, {
|
||||
name: '最新',
|
||||
value: 1
|
||||
}, {
|
||||
name: '最热',
|
||||
value: 2
|
||||
}],
|
||||
commentsListTab: 3,
|
||||
newestpage: 1,
|
||||
hotestpage: 1,
|
||||
booksetpage: 1,
|
||||
newList: [],
|
||||
hotList: [],
|
||||
bookList: [],
|
||||
contentShow: 1,
|
||||
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
console.log('下拉刷新了')
|
||||
uni.stopPullDownRefresh();
|
||||
|
||||
this.newestpage = 1
|
||||
this.hotestpage = 1
|
||||
this.booksetpage = 1
|
||||
this.newList = []
|
||||
this.hotList = []
|
||||
this.bookList = []
|
||||
this.total = 0
|
||||
this.getBookList(this.commentsListTab, false)
|
||||
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.newestpage + 1 <= this.total || this.hotestpage + 1 <= this.total || this.booksetpage + 1 <= this
|
||||
.total) {
|
||||
this.newestpage++
|
||||
this.hotestpage++
|
||||
this.booksetpage++
|
||||
this.getBookList(this.commentsListTab, false)
|
||||
} else {
|
||||
this.status = 1
|
||||
}
|
||||
|
||||
},
|
||||
onLoad(e) {
|
||||
this.windowWidth = uni.getSystemInfoSync().windowWidth;
|
||||
console.log(e, 'onload')
|
||||
// this.bookid = e.bookid
|
||||
this.getBookList(3, false)
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['setLoadingShow']),
|
||||
setData(e) {
|
||||
this.contentShow = e
|
||||
this.getBookList(this.commentsListTab, true)
|
||||
},
|
||||
formatTimeDifferenceFromT(dateTimeT) {
|
||||
const now = new Date();
|
||||
const t = new Date(dateTimeT);
|
||||
const differenceInSeconds = Math.floor((now - t) / 1000);
|
||||
|
||||
if (differenceInSeconds <= 3600) {
|
||||
const minutes = Math.floor(differenceInSeconds / 60);
|
||||
return `${minutes} 分钟前`;
|
||||
} else if (differenceInSeconds <= 86400) {
|
||||
const hours = Math.floor(differenceInSeconds / 3600);
|
||||
return `${hours} 小时前`;
|
||||
} else if (differenceInSeconds <= 2592000) {
|
||||
const days = Math.floor(differenceInSeconds / 86400);
|
||||
return `${days} 天前`;
|
||||
} else {
|
||||
const currentYear = now.getFullYear();
|
||||
const tYear = t.getFullYear();
|
||||
if (currentYear === tYear) {
|
||||
const month = t.getMonth() + 1;
|
||||
const day = t.getDate();
|
||||
return `${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
|
||||
} else {
|
||||
const year = t.getFullYear();
|
||||
const month = t.getMonth() + 1;
|
||||
const day = t.getDate();
|
||||
return `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 切换tab状态
|
||||
commentsTabCLi(e) {
|
||||
this.commentsListTab = e
|
||||
this.newestpage = 1
|
||||
this.hotestpage = 1
|
||||
this.booksetpage = 1
|
||||
this.total = 0
|
||||
this.newList = []
|
||||
this.hotList = []
|
||||
this.bookList = []
|
||||
this.getBookList(this.commentsListTab, false)
|
||||
},
|
||||
// 查看本书更多书评
|
||||
toMore(val) {
|
||||
// console.log(val,'val')
|
||||
let data = {
|
||||
'userId': this.userInfo.id,
|
||||
'bookId': val.id
|
||||
}
|
||||
checkBookRight(data, res => {
|
||||
console.log(res)
|
||||
if (res.success) {
|
||||
uni.navigateTo({
|
||||
url: '../comments/comments?bookid=' + val.id,
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '购买本书后方可查看此内容!',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 书评详情
|
||||
toDetail(val) {
|
||||
// console.log(val,'val')
|
||||
uni.navigateTo({
|
||||
url: '../comments/commentsDetail?bookid=' + val.bookid + '&bfa_id=' + val.id
|
||||
})
|
||||
},
|
||||
// 判断健全
|
||||
toDetail1(val) {
|
||||
// console.log(val,'val')
|
||||
let data = {
|
||||
'userId': this.userInfo.id,
|
||||
'bookId': val.bookid
|
||||
}
|
||||
checkBookRight(data, res => {
|
||||
console.log(res)
|
||||
if (res.success) {
|
||||
uni.navigateTo({
|
||||
url: '../comments/commentsDetail?bookid=' + val.bookid + '&bfa_id=' + val.id
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '购买本书后方可查看此内容!',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
clickLike(item) {
|
||||
this.$http
|
||||
.post("forum/articles/chickForumContlike?forum_id=" + item.id, )
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.showToast({
|
||||
title: '点赞成功！',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
item.contlike++
|
||||
}
|
||||
}).catch((e) => {
|
||||
console.log(e, 'e')
|
||||
})
|
||||
},
|
||||
getBookList(flag, tushuflag) {
|
||||
// 根据tab不同，获取最新书评、最热书评、书集列表
|
||||
// uni.showLoading({
|
||||
// title: '加载中'
|
||||
// });
|
||||
|
||||
var httpurl = ""
|
||||
if (flag == 1) {
|
||||
httpurl = "forum/articles/getForumsNew?page=" + this.newestpage + '&limit=10'
|
||||
} else if (flag == 2) {
|
||||
httpurl = "forum/articles/getForumsHot?page=" + this.hotestpage + '&limit=10'
|
||||
} else {
|
||||
if (tushuflag) { // 点击切换已购和推荐
|
||||
this.booksetpage = 1
|
||||
this.bookList = []
|
||||
}
|
||||
if (this.contentShow == 1) {
|
||||
httpurl = "forum/articles/getHasForumsAndBook?page=" + this.booksetpage + '&limit=10&userId=' +
|
||||
this.userInfo.id
|
||||
} else {
|
||||
httpurl = "forum/articles/getBestForumsAndBook?page=" + this.booksetpage + '&limit=10&userId=' +
|
||||
this.userInfo.id
|
||||
}
|
||||
}
|
||||
this.$http
|
||||
.post(httpurl)
|
||||
.then(res => {
|
||||
|
||||
if (flag == 1) {
|
||||
this.newList = this.newList.concat(res.page.records)
|
||||
} else if (flag == 2) {
|
||||
this.hotList = this.hotList.concat(res.page.records)
|
||||
} else {
|
||||
this.bookList = this.bookList.concat(res.page.records)
|
||||
}
|
||||
this.total = res.page.pages
|
||||
console.log(this.newList, 'this.newList')
|
||||
// let list = res.page.records
|
||||
// console.log(list,'list')
|
||||
// for(let i=0; i < list.length; i++){
|
||||
// let data = {
|
||||
// 'page': 1,
|
||||
// 'limit': 3,
|
||||
// 'bookid' : list[i].bookid
|
||||
// }
|
||||
// this.$http
|
||||
// .post('forum/articles/descupdatelist', data)
|
||||
// .then(res => {
|
||||
// // this.total = res.page.totalPage
|
||||
// // this.shupingList = this.shupingList.concat(res.page.list)
|
||||
// list[i].shupingList = res.page.list
|
||||
// console.log(res.page.list,'评论获取成功')
|
||||
|
||||
// console.log(list,'list')
|
||||
// this.productList.push(list[i])
|
||||
// console.log(this.productList,'productList')
|
||||
// // this.status = 3
|
||||
// }).catch((e)=>{
|
||||
// console.log(e,'e')
|
||||
// })
|
||||
// }
|
||||
// if(res.page.records.length != 10){
|
||||
// this.status = 1
|
||||
// } else {
|
||||
this.status = 0
|
||||
// }
|
||||
// uni.hideLoading();
|
||||
}).catch((e) => {
|
||||
console.log(e, 'e')
|
||||
})
|
||||
},
|
||||
|
||||
// 显示评论
|
||||
pinglun(val) {
|
||||
this.bfaid = val
|
||||
this.pingjiaShow = true
|
||||
},
|
||||
// 提交评论
|
||||
submitPJ() {
|
||||
if (this.Pform.comment != '') {
|
||||
let data = {
|
||||
'content': this.Pform.comment,
|
||||
'userid': this.userInfo.id,
|
||||
'bookid': this.bookid,
|
||||
'bfaid': this.bfaid
|
||||
}
|
||||
// console.log(data,'data')
|
||||
$http.request({
|
||||
url: "forum/comment/save",
|
||||
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.pinglunId = null
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请先输入您的评价内容 ！',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
musicPlay,
|
||||
emotion
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// @import '@/style/mixin.scss';
|
||||
.orderTabs {
|
||||
// margin: 70rpx 0 0 0;
|
||||
width: 100%;
|
||||
// padding: 0 3% 3% 3%;
|
||||
position: fixed;
|
||||
// top: 80rpx;
|
||||
background-color: #f7faf9;
|
||||
z-index: 100;
|
||||
|
||||
.orderdefine {
|
||||
display: inline-block;
|
||||
padding: 20rpx 0 20rpx 0;
|
||||
// margin: 40rpx 0 15rpx 0;
|
||||
width: 230rpx;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.ordStyle {
|
||||
// border-bottom: 4rpx solid #54a966;
|
||||
// color: #54a966;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flexbox {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.tanchu {
|
||||
padding: 40rpx 30rpx 40rpx 30rpx;
|
||||
position: relative;
|
||||
|
||||
|
||||
.dp_title {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 50rpx;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dp_add {
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
right: 30rpx;
|
||||
font-size: 22rpx;
|
||||
background-color: #fd6004;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
|
||||
.u-icon {
|
||||
display: inline-block;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quesheng {
|
||||
text-align: center;
|
||||
margin-top: 100rpx;
|
||||
color: #8b8a91;
|
||||
padding-bottom: 20rpx;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.gengduoshuping {
|
||||
text-align: right;
|
||||
color: #0044ff;
|
||||
padding-bottom: 20rpx;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.bookInfo {
|
||||
justify-content: space-between;
|
||||
// margin-bottom: 15px;
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
border: 1px splid #999;
|
||||
box-sizing: border-box;
|
||||
// padding-bottom: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
// .imageradius{
|
||||
// border-radius: 20rpx;
|
||||
// border:1rpx solid #e9e9e9;
|
||||
// }
|
||||
|
||||
// .bookInfo-inner{ padding-left: 30rpx; box-sizing: border-box; width: calc(100% - 150px);
|
||||
// .title{font-size: 32rpx; margin-top: 0rpx; margin-bottom: 20rpx;font-weight: 700; display: block;}
|
||||
// .author{font-size: 30rpx;margin-top: 0rpx;margin-bottom: 20rpx;font-weight: 500; display: block; }
|
||||
|
||||
// .description{
|
||||
// font-size: 28rpx;
|
||||
// line-height: 20px;
|
||||
// width: 100%;
|
||||
// color:#888;
|
||||
// padding-left: 0;
|
||||
// overflow:hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// -webkit-line-clamp: 9;
|
||||
// display: -webkit-box;
|
||||
// -webkit-box-orient: vertical;
|
||||
// }
|
||||
// }
|
||||
// .bookinfoimage{width: 150px !important; }
|
||||
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
background-color: #fff;
|
||||
|
||||
.item {
|
||||
// padding: 10px;
|
||||
// margin-bottom: 30rpx;
|
||||
// border: 1px solid #999;
|
||||
box-sizing: border-box;
|
||||
// padding-bottom: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
// margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.feng {
|
||||
margin: 10rpx 20rpx 0 0;
|
||||
height: 160rpx;
|
||||
width: 140rpx;
|
||||
float: left;
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid #e9e9e9;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/deep/.description {
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 5;
|
||||
line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 20rpx;
|
||||
margin-top: 10rpx;
|
||||
line-height: 34rpx;
|
||||
height: calc(5 * 34rpx);
|
||||
|
||||
img {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btns {
|
||||
font-size: 22rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
width: 300rpx;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 300rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gzicon {
|
||||
margin: 0 0 0 20rpx;
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
// float:left;
|
||||
// border-radius: 20rpx;
|
||||
// border:1rpx solid #e9e9e9;
|
||||
}
|
||||
|
||||
.opbtns {
|
||||
.pingjia {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mb30 {
|
||||
margin-bottom: 30rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bookInfo3 {
|
||||
justify-content: space-between;
|
||||
// margin-bottom: 15px;
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
border: 1px splid #999;
|
||||
box-sizing: border-box;
|
||||
// padding-bottom: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.mainContent3 {
|
||||
background-color: #fff;
|
||||
|
||||
.item {
|
||||
// padding: 10px;
|
||||
// margin-bottom: 30rpx;
|
||||
// border: 1px solid #999;
|
||||
box-sizing: border-box;
|
||||
// padding-bottom: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
// margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.feng {
|
||||
margin: 10rpx 20rpx 0 0;
|
||||
height: 240rpx;
|
||||
width: 164rpx;
|
||||
float: left;
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid #e9e9e9;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pianshuping {
|
||||
font-size: 24rpx;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.shupingList {
|
||||
min-height: 212rpx;
|
||||
}
|
||||
|
||||
/deep/.description {
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 20rpx;
|
||||
margin-top: 10rpx;
|
||||
|
||||
img {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btns {
|
||||
font-size: 22rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.left {
|
||||
width: 300rpx;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 300rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gzicon {
|
||||
margin: 0 0 0 20rpx;
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
// float:left;
|
||||
// border-radius: 20rpx;
|
||||
// border:1rpx solid #e9e9e9;
|
||||
}
|
||||
|
||||
.opbtns {
|
||||
.pingjia {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mytabs {
|
||||
// background: url('@/static/icon/bgtushu.png') no-repeat left top;
|
||||
height: 80rpx;
|
||||
// margin-bottom: 30rpx;
|
||||
|
||||
.item {
|
||||
border-radius: 10rpx;
|
||||
background-color: #c6ead0;
|
||||
width: 48%;
|
||||
// margin: 0 10rpx;
|
||||
text-align: center;
|
||||
color: #3c7f56;
|
||||
font-size: 36rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.item.active {
|
||||
background-color: #3c7f56;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.item1 {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
251
pages/component/commonComponents/advertisement.vue
Normal file
251
pages/component/commonComponents/advertisement.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<view
|
||||
class="container commonPageBox commonDetailPage"
|
||||
style="height: auto !important; padding-bottom: 0 !important"
|
||||
>
|
||||
<u-popup :show="show" v-if="show" mode="center" class="popup_box">
|
||||
<div class="product_image" scroll-y="true" style="position: relative">
|
||||
|
||||
<swiper
|
||||
:style="{ height: fullHeight }"
|
||||
class="swiper-tall"
|
||||
:indicator-dots="indicatorDots"
|
||||
:autoplay="autoplay"
|
||||
:previous-margin="previousMargin"
|
||||
:next-margin="nextMargin"
|
||||
:circular="circular"
|
||||
@change="change"
|
||||
:current="swiperCurrentIndex"
|
||||
>
|
||||
<swiper-item
|
||||
class="swiper-container"
|
||||
v-for="(img, index) in list"
|
||||
:key="index"
|
||||
:item-id="index"
|
||||
:data-year="index"
|
||||
>
|
||||
<view
|
||||
@click="gotoDetail(img)"
|
||||
class="swiper-item"
|
||||
:style="{
|
||||
background: img ? 'url(' + img.icon + ') center no-repeat' : '',
|
||||
backgroundSize: '100% 100%',
|
||||
}"
|
||||
:animation="animationData[index]"
|
||||
>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view style="display: flex;align-items: center;justify-content: center;">
|
||||
<view @click="close" style="font-weight: bold;background-color: rgba(255, 255, 255, 0.8); color: #333;padding:20rpx 10rpx;width: 200rpx;font-size: 30rpx;border-radius: 40rpx;text-align: center;letter-spacing: 0.5rpx;">
|
||||
关闭
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</div>
|
||||
</u-popup></view
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const stopPenetrate = () => {
|
||||
return;
|
||||
};
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
props: ["list"],
|
||||
data() {
|
||||
return {
|
||||
screenHeight: 0,
|
||||
animationData: {
|
||||
0: {},
|
||||
1: {},
|
||||
2: {},
|
||||
},
|
||||
title: "0",
|
||||
indicatorDots: false,
|
||||
autoplay: false,
|
||||
previousMargin: uni.upx2px(82) + "px",
|
||||
nextMargin: uni.upx2px(82) + "px",
|
||||
circular: true,
|
||||
zoomParam: 1.1,
|
||||
swiperCurrentIndex: 0,
|
||||
data: [],
|
||||
max: 0,
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.show = false;
|
||||
},
|
||||
onLoad() {},
|
||||
onHide() {
|
||||
// this.showSearchList = false
|
||||
// this.searchList = []
|
||||
},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
|
||||
fullHeight() {
|
||||
const res = uni.getSystemInfoSync();
|
||||
return (
|
||||
res.windowHeight - uni.upx2px(60) - (res.statusBarHeight + 44) + "px"
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
gotoDetail(v) {
|
||||
console.log("v at line 58:", v);
|
||||
if (v.relationId) {
|
||||
if (v.type == 0) {
|
||||
if (v.shopProduct) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/bookShop/commodityDetail?id=${v.shopProduct.productId}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if (v.type == 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/peanut/reCharge`,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// if (v.type == 2) {
|
||||
// uni.navigateTo({
|
||||
// url: `/pages/mine/vip/index`,
|
||||
// });
|
||||
// }
|
||||
|
||||
this.show = false;
|
||||
},
|
||||
// 放大图片
|
||||
previewImage(url) {
|
||||
console.log(url);
|
||||
uni.previewImage({
|
||||
urls: [url],
|
||||
longPressActions: {
|
||||
itemList: ["很抱歉，暂不支持保存图片到本地"],
|
||||
success: function (res) {
|
||||
// console.log(res,'+++++')
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
change(e) {
|
||||
this.swiperCurrentIndex = e.detail.current;
|
||||
this.title = e.detail.currentItemId;
|
||||
for (let key in this.animationData) {
|
||||
if (e.detail.currentItemId == key) {
|
||||
this.animation.scale(this.zoomParam).step();
|
||||
this.animationData[key] = this.animation.export();
|
||||
} else {
|
||||
this.animation.scale(1.0).step();
|
||||
this.animationData[key] = this.animation.export();
|
||||
}
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
selectGoods(data) {
|
||||
this.$emit("selectGoods", data);
|
||||
},
|
||||
open() {
|
||||
this.animation = uni.createAnimation();
|
||||
this.animation.scale(this.zoomParam).step();
|
||||
this.animationData[0] = this.animation.export();
|
||||
this.show = true;
|
||||
},
|
||||
|
||||
onHandleClickBuy() {
|
||||
this.$emit("selectGoodsData", this.selectGoodsData);
|
||||
this.$emit("onHandleClickBuy");
|
||||
},
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/style/mixin.scss";
|
||||
|
||||
.goods_image {
|
||||
width: 70vw;
|
||||
}
|
||||
|
||||
.popup_box {
|
||||
padding-top: 30rpx;
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
.popup_content {
|
||||
padding-bottom: 140rpx;
|
||||
}
|
||||
/deep/.list_item {
|
||||
// border-bottom: none;
|
||||
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.product_image {
|
||||
width: 100vw;
|
||||
|
||||
max-height: 90vh;
|
||||
}
|
||||
}
|
||||
/deep/.u-popup__content {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/deep/.u-popup__content__close {
|
||||
color: #fff !important;
|
||||
}
|
||||
.title_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 0;
|
||||
.title_price {
|
||||
color: #ef1224;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.swiper-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 858upx;
|
||||
width: 530upx;
|
||||
line-height: 300upx;
|
||||
text-align: center;
|
||||
broder-radius: 6upx;
|
||||
margin-bottom: 50upx;
|
||||
}
|
||||
|
||||
.swiper-tall {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper-title {
|
||||
width: 750upx;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
287
pages/component/commonComponents/coupon/index.vue
Normal file
287
pages/component/commonComponents/coupon/index.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-for="(item, index) in List" :key="index">
|
||||
<view :class="`youhuiItem ${itemClass}`">
|
||||
<view class="centerbg">
|
||||
<view class="centerView" style="position: relative"
|
||||
><text
|
||||
v-if="source == 'mine'"
|
||||
class="border_radius_10"
|
||||
style="
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
top: 10rpx;
|
||||
font-size: 25rpx;
|
||||
/* background-color: #fad4bd; */
|
||||
color: #ed2a2e;
|
||||
"
|
||||
>{{ item.couponEntity.couponRange | couponType }}</text
|
||||
>
|
||||
<view style="color: #fd4347; width: 200rpx">
|
||||
<view
|
||||
style="position: relative; border-right: 1px dashed #fa8277"
|
||||
>
|
||||
<text
|
||||
style="
|
||||
font-weight: 700;
|
||||
font-size: 40rpx;
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 0rpx;
|
||||
"
|
||||
>￥</text
|
||||
>
|
||||
<text
|
||||
style="
|
||||
font-size: 64rpx;
|
||||
letter-spacing: 0.1px;
|
||||
font-weight: 700;
|
||||
margin-left: 40rpx;
|
||||
"
|
||||
>{{ item.couponEntity.couponAmount }}</text
|
||||
>
|
||||
<text
|
||||
v-if="source == 'mine'"
|
||||
style="
|
||||
display: block;
|
||||
color: #333;
|
||||
font-size: 25rpx;
|
||||
margin-left: 0rpx;
|
||||
margin-top: 0rpx;
|
||||
"
|
||||
>满{{ item.couponEntity.useLevel }}元可用</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: calc(100% - 220rpx)">
|
||||
<view>
|
||||
<view
|
||||
style="color: #fd4347; font-size: 44rpx; font-weight: bold;"
|
||||
>{{
|
||||
item.couponEntity.couponType == 0 ? "现金" : "折扣"
|
||||
}}优惠券
|
||||
|
||||
|
||||
<!-- <text v-if="source == 'mine'" style="box-sizing: border-box;padding:4rpx 20rpx;margin-left: 10rpx;font-size: 24rpx;background-color: #fff;border-radius: 24rpx;float: right;">去使用</text> -->
|
||||
|
||||
|
||||
|
||||
|
||||
</view
|
||||
>
|
||||
|
||||
|
||||
<text
|
||||
v-if="source != 'goodsDetail'"
|
||||
style="
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
margin-top: 10rpx;
|
||||
"
|
||||
>有效期至：{{
|
||||
item.effectType == 0 ? "永久有效" : item.endTime
|
||||
}}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottombg">
|
||||
<view
|
||||
style="
|
||||
width: 100%;
|
||||
padding: 16rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
margin-right: 6rpx;
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
text-align: center;
|
||||
"
|
||||
>
|
||||
<view
|
||||
class="title"
|
||||
style="
|
||||
line-height: 34rpx;
|
||||
margin-bottom: 10rpx;
|
||||
color: #fff;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
"
|
||||
>
|
||||
{{ item.couponEntity.couponName }}
|
||||
</view>
|
||||
<view
|
||||
v-if="item.couponEntity.remark"
|
||||
style="
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
bottom: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: 22rpx;
|
||||
color: #fafafa;
|
||||
"
|
||||
>
|
||||
<!-- 详细信息
|
||||
<u-icon
|
||||
size="20rpx"
|
||||
color="#fafafa"
|
||||
style="color: #fafafa; float: right;margin-left: 4rpx;"
|
||||
name="arrow-down-fill"
|
||||
></u-icon> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-collapse
|
||||
v-if="source != 'goodsDetail'&&item.couponEntity.remark"
|
||||
style="
|
||||
margin-top: 0rpx;
|
||||
z-index: 10 !important;
|
||||
background-color: #fafafa;
|
||||
border-bottom-left-radius: 10rpx;
|
||||
border-bottom-right-radius: 10rpx;
|
||||
"
|
||||
:border="false"
|
||||
>
|
||||
<u-collapse-item title="详细信息" name="Docs guide">
|
||||
<view
|
||||
style="
|
||||
font-size: 22rpx;
|
||||
width: 100%;
|
||||
margin-right: 20rpx !important;
|
||||
"
|
||||
>使用说明：{{ item.couponEntity.remark }}</view
|
||||
>
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
props: ["List", "source", "itemClass"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
filters: {
|
||||
couponType(type) {
|
||||
// 0无限制 1课程卷 2课程品类卷
|
||||
var str = "";
|
||||
switch (type) {
|
||||
case 0:
|
||||
str = "全场通用";
|
||||
break;
|
||||
case 1:
|
||||
str = "指定课程可用";
|
||||
break;
|
||||
case 2:
|
||||
str = "指定课程品类可用";
|
||||
break;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.youhuiItem {
|
||||
min-height: 320rpx;
|
||||
position: relative;
|
||||
background: linear-gradient(to top right, #fd4c50, #fe393d);
|
||||
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 10rpx;
|
||||
width: 100%;
|
||||
|
||||
padding: 26rpx;
|
||||
margin: 25rpx 0 0 0;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.centerbg {
|
||||
width: 100%;
|
||||
background-image: linear-gradient(60deg, #ffefd3 0%, #f8be85 100%);
|
||||
|
||||
height: calc(100%);
|
||||
border-radius: 10rpx;
|
||||
padding-bottom: 86rpx;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.centerView {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 30rpx 20rpx 0 40rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.bottombg {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
background-image: url("@/static/icon/coupon/bottom.png") !important;
|
||||
}
|
||||
|
||||
.youhuiItem > view {
|
||||
}
|
||||
|
||||
.youhuiItem.youItem_style {
|
||||
border-color: #fd6004;
|
||||
}
|
||||
|
||||
::v-deep .u-cell__body {
|
||||
padding-top: 0 !important ;
|
||||
padding-bottom: 0 !important ;
|
||||
z-index: 10 !important ;
|
||||
.u-cell__title-text {
|
||||
color: #333 !important;
|
||||
font-size: 24rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .u-collapse-item__content__text {
|
||||
padding: 10rpx 20rpx !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::v-deep.itemCouponClass {
|
||||
min-height: 180rpx !important;
|
||||
.bottombg {
|
||||
.title {
|
||||
font-size: 26rpx !important;
|
||||
}
|
||||
}
|
||||
.centerbg {
|
||||
padding-bottom: 60rpx !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
159
pages/component/commonComponents/list.vue
Normal file
159
pages/component/commonComponents/list.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
|
||||
<view style="width: 100%; height: 100%">
|
||||
<view v-if="axiosStatus != ''">
|
||||
<scroll-view
|
||||
@scrolltolower="lower"
|
||||
scroll-y="true"
|
||||
class="scroll-Y"
|
||||
v-if="dataList && dataList.length > 0"
|
||||
style="height: 100%"
|
||||
>
|
||||
<view
|
||||
@click="gotoDetail(item, index)"
|
||||
class="scroll-view-item list_item"
|
||||
v-for="(item, index) in dataList"
|
||||
:key="indexKey ? item[indexKey] : item.id"
|
||||
:index="indexKey ? item[indexKey] : index"
|
||||
>
|
||||
<view :class="['titleItem', '']">
|
||||
<slot name="leftSlot" :row="item" :item="item" :index="index">
|
||||
</slot>
|
||||
|
||||
<template v-if="isCondition">
|
||||
<slot name="labelSlot" :row="item" :rowIndex="index"></slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ item[label] }}
|
||||
</template>
|
||||
|
||||
<slot name="rightSlot" :row="item" :rowIndex="index"></slot>
|
||||
</view>
|
||||
<image
|
||||
v-if="!isNoIcon"
|
||||
src="@/static/icon/icon_right.png"
|
||||
class="rightArrow"
|
||||
style=""
|
||||
></image>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<u-empty
|
||||
v-else-if="noDataIcon && isLoadingHide"
|
||||
:mode="noDataIcon"
|
||||
:icon="`http://cdn.uviewui.com/uview/empty/${noDataIcon}.png`"
|
||||
>
|
||||
</u-empty>
|
||||
<u-divider style="width: 100%" v-else text="暂无数据哦~"></u-divider>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
props: [
|
||||
"indexKey",
|
||||
"dataList",
|
||||
"label",
|
||||
"isCondition",
|
||||
"isNoIcon",
|
||||
"pagination",
|
||||
"noDataIcon",
|
||||
"isLoadingHide",
|
||||
"axiosStatus",
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
status: "",
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
this.status = "";
|
||||
},
|
||||
onHide() {
|
||||
// this.showSearchList = false
|
||||
// this.searchList = []
|
||||
},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
methods: {
|
||||
lower() {
|
||||
this.$emit("lower");
|
||||
},
|
||||
gotoDetail(data, index) {
|
||||
this.$emit("hancleClick", data, index);
|
||||
},
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list_item {
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
font-size: 30rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1rpx solid #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.list_item :last-child(1) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.scroll-view-item:nth-child(2n-1) {
|
||||
background-color: #f5f5f5 !important;
|
||||
}
|
||||
|
||||
.rightArrow {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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: 100%;
|
||||
// height: 300rpx;
|
||||
// line-height: 300rpx;
|
||||
// text-align: center;
|
||||
// font-size: 36rpx;
|
||||
}
|
||||
|
||||
.titleItem {
|
||||
width: calc(100%) !important;
|
||||
}
|
||||
|
||||
/deep/.scroll-view-item:nth-child(2n-1) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.list_item:last-child {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view style="padding: 0 40rpx; font-size: 28upx">
|
||||
<view style="padding: 0 20rpx; font-size: 28upx">
|
||||
<!-- 公共组件-每个页面必须引入 -->
|
||||
<public-module></public-module>
|
||||
<view style="height: 50rpx"></view>
|
||||
|
||||
@@ -285,7 +285,7 @@
|
||||
@import '@/style/mixin.scss';
|
||||
|
||||
.ACTable {
|
||||
padding: 20rpx 30rpx;
|
||||
padding: 20rpx;
|
||||
|
||||
.AC_mes {
|
||||
margin-top: 50rpx;
|
||||
@@ -309,10 +309,9 @@
|
||||
}
|
||||
|
||||
.AC_con {
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 0px 10px 1px #d3d1d133;
|
||||
background-color: #fff;
|
||||
border-radius: 15rpx;
|
||||
border-radius: 0 0 15rpx 15rpx;
|
||||
margin-bottom: 40rpx;
|
||||
font-size: 30rpx;
|
||||
|
||||
@@ -320,19 +319,22 @@
|
||||
font-size: 42rpx;
|
||||
text-align: left;
|
||||
color: $themeColor;
|
||||
padding: 20rpx 0;
|
||||
padding: 30rpx 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.AC_List {
|
||||
overflow: hidden;
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #e0e0e0;
|
||||
|
||||
.AC_title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
|
||||
view {
|
||||
float: right;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #11a669;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -380,7 +380,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.Hot {
|
||||
color: #333 !important;
|
||||
color: #11a669 !important;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user