提交
This commit is contained in:
liuyuan
@@ -2,12 +2,12 @@ let baseUrl = "";
|
|||||||
let socketUrl = "";
|
let socketUrl = "";
|
||||||
if (process.env.NODE_ENV === 'development') {
|
if (process.env.NODE_ENV === 'development') {
|
||||||
//开发环境
|
//开发环境
|
||||||
baseUrl = "https://api.nuttyreading.com/"; // 线上正式
|
//baseUrl = "https://api.nuttyreading.com/"; // 线上正式
|
||||||
//baseUrl = "http://192.168.110.100:9200/pb/"; // 张川川
|
baseUrl = "http://192.168.110.100:9200/pb/"; // 张川川
|
||||||
} else if (process.env.NODE_ENV === 'production') {
|
} else if (process.env.NODE_ENV === 'production') {
|
||||||
//生产环境
|
//生产环境
|
||||||
baseUrl = "https://api.nuttyreading.com/";
|
//baseUrl = "https://api.nuttyreading.com/";
|
||||||
//baseUrl = "http://192.168.110.100:9200/pb/"; // 张川川
|
baseUrl = "http://192.168.110.100:9200/pb/"; // 张川川
|
||||||
}
|
}
|
||||||
const courtConfig = {
|
const courtConfig = {
|
||||||
//微信公众号APPID
|
//微信公众号APPID
|
||||||
|
|||||||
10
main.js
10
main.js
@@ -16,9 +16,9 @@ import {
|
|||||||
Vue.prototype.$getHours = nowHour
|
Vue.prototype.$getHours = nowHour
|
||||||
|
|
||||||
// 地址
|
// 地址
|
||||||
// Vue.prototype.$baseUrl = "http://192.168.110.100:9100/pb/"
|
Vue.prototype.$baseUrl = "http://192.168.110.100:9100/pb/"
|
||||||
// Vue.prototype.$baseUrl = "http://59.110.212.44:9100/pb/"
|
//Vue.prototype.$baseUrl = "https://api.nuttyreading.com/"
|
||||||
Vue.prototype.$baseUrl = "https://api.nuttyreading.com/"
|
|
||||||
// 安卓安卓包下载地址
|
// 安卓安卓包下载地址
|
||||||
// Vue.prototype.$apkUrl = "https://www.nuttyreading.com/nuttyreading.apk" // 本地地址
|
// Vue.prototype.$apkUrl = "https://www.nuttyreading.com/nuttyreading.apk" // 本地地址
|
||||||
Vue.prototype.$apkUrl = "https://a.app.qq.com/o/simple.jsp?pkgname=com.cn.nuttyreading" // 应用宝
|
Vue.prototype.$apkUrl = "https://a.app.qq.com/o/simple.jsp?pkgname=com.cn.nuttyreading" // 应用宝
|
||||||
@@ -85,8 +85,8 @@ import config from 'uview-ui/libs/config/config'
|
|||||||
Vue.component("mescroll-body", MescrollBody);
|
Vue.component("mescroll-body", MescrollBody);
|
||||||
import commonCoupon from '@/pages/component/commonComponents/coupon/index.vue'
|
import commonCoupon from '@/pages/component/commonComponents/coupon/index.vue'
|
||||||
Vue.component('common-coupon', commonCoupon);
|
Vue.component('common-coupon', commonCoupon);
|
||||||
// import musicPlay from '@/components/music.vue'
|
import commonList from '@/pages/component/commonComponents/list.vue'
|
||||||
// Vue.component('music-play', musicPlay);
|
Vue.component('common-list', commonList);
|
||||||
import commonAdvertisement from '@/pages/component/commonComponents/advertisement.vue'
|
import commonAdvertisement from '@/pages/component/commonComponents/advertisement.vue'
|
||||||
Vue.component('common-advertisement', commonAdvertisement);
|
Vue.component('common-advertisement', commonAdvertisement);
|
||||||
|
|
||||||
|
|||||||
@@ -157,6 +157,13 @@
|
|||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/user/points",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "我的积分",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/user/bindPhone",
|
"path": "pages/user/bindPhone",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
@@ -1,839 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,853 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,352 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,847 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,251 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,287 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -201,7 +201,7 @@
|
|||||||
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle="bgiStyle" :iconStyle="iconStyle"></u-back-top>
|
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle="bgiStyle" :iconStyle="iconStyle"></u-back-top>
|
||||||
</view>
|
</view>
|
||||||
<view class="appJump">
|
<view class="appJump">
|
||||||
<view class="soulspace item flexbox" @click="appjumpfun('soulspace')" v-if="$platform != 'ios'">
|
<view class="soulspace item flexbox" @click="appjumpfun('soulspace')">
|
||||||
<view class="img">
|
<view class="img">
|
||||||
<image src="@/static/xlkj.png"></image>
|
<image src="@/static/xlkj.png"></image>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -31,46 +31,26 @@
|
|||||||
</view>
|
</view>
|
||||||
<br clear="both" />
|
<br clear="both" />
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="now_vip" v-if="userMes.vip==0">
|
|
||||||
<text>
|
|
||||||
<image src="../../static/icon/mine_p.png" style="height: 44rpx;"></image>
|
|
||||||
开通会员畅享海量内容
|
|
||||||
</text>
|
|
||||||
<b class="kt_btn" @click="onPageJump('./opeVip')">开通VIP</b>
|
|
||||||
</view> -->
|
|
||||||
|
|
||||||
<!-- <view class="now_vip" v-if="userMes.vip==1">
|
|
||||||
<text>
|
|
||||||
<image src="../../static/icon/mine_v.png"></image>
|
|
||||||
尊贵的VIP会员
|
|
||||||
<font style="font-size: 14rpx;margin-left: 20rpx;">{{userMes.vipValidtime}}到期</font>
|
|
||||||
</text>
|
|
||||||
<b class="kt_btn" @click="onPageJump('./opeVip')">立即续费</b>
|
|
||||||
</view> -->
|
|
||||||
|
|
||||||
<view class="chong_zhi">
|
<view class="chong_zhi">
|
||||||
<view class="zhanghu" @click="onPageJump('../user/persCount')">
|
<!-- <view class="zhanghu" @click="onPageJump('../user/persCount')">
|
||||||
我的账户
|
我的账户
|
||||||
<text style="float: right; line-height: 85rpx"> > </text>
|
<text style="float: right; line-height: 85rpx"> </text>
|
||||||
</view>
|
</view> -->
|
||||||
<view class="chong_list">
|
<view class="chong_list">
|
||||||
<view >
|
<view @click="onPageJump('/pages/user/persCount')">
|
||||||
<b style="color: #11a669!important;">{{ userMes.peanutCoin }}</b>
|
<b style="color: #11a669!important;">{{ userMes.peanutCoin }}</b>
|
||||||
天医币
|
天医币
|
||||||
</view>
|
</view>
|
||||||
|
<view @click="onPageJump('/pages/user/points')">
|
||||||
|
<b style="color: #11a669!important;">{{ userMes.jf }}</b>
|
||||||
|
积分
|
||||||
|
</view>
|
||||||
<view @click="onPageJump('/pages/mine/wallet/couponList')">
|
<view @click="onPageJump('/pages/mine/wallet/couponList')">
|
||||||
<b style="color: #fd6004 !important;">{{ userCouponNum }}</b>
|
<b style="color: #fd6004 !important;">{{ userCouponNum }}</b>
|
||||||
优惠券
|
优惠券
|
||||||
</view>
|
</view>
|
||||||
|
<b class="chong_btn" v-if="$platform == 'android'" @click="onPageJump('./reCharge')">充 值</b>
|
||||||
<!-- <view v-if="iosHide">
|
|
||||||
<b>{{ userMes.conponsCount }}</b>
|
|
||||||
优惠券
|
|
||||||
</view> -->
|
|
||||||
<!-- <b class="chong_btn" @click="onPageJump('../sdkDemo/pay')">充 值</b> -->
|
|
||||||
<b class="chong_btn" v-if="platform == 'android'" @click="onPageJump('./reCharge')"
|
|
||||||
>充 值</b
|
|
||||||
>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -78,41 +58,15 @@
|
|||||||
<view class="nav_list" @click="onPageJump('../bookShop/orderList')">
|
<view class="nav_list" @click="onPageJump('../bookShop/orderList')">
|
||||||
<text>我的订单</text>
|
<text>我的订单</text>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="nav_list" @click="onPageJump('../clock/clockList')">
|
|
||||||
<text>我的打卡</text>
|
|
||||||
</view> -->
|
|
||||||
<!-- <view class="nav_list" @click="onPageJump('../listen/home')" v-if="iosHide">
|
|
||||||
<text>我的听书</text>
|
|
||||||
</view> -->
|
|
||||||
<!-- 暂时去掉 -->
|
|
||||||
<!-- <view class="nav_list" @click="onPageJump('../listen/setListen')" v-if="iosHide">
|
|
||||||
<text>听书设置</text>
|
|
||||||
</view> -->
|
|
||||||
<!-- <view class="nav_list" @click="onPageJump('../peanut/myComments')">
|
|
||||||
<text>我的评价</text>
|
|
||||||
</view> -->
|
|
||||||
|
|
||||||
<!-- 暂时去掉 -->
|
|
||||||
<view class="nav_list" @click="onPageJump('../peanut/shopping')">
|
<view class="nav_list" @click="onPageJump('../peanut/shopping')">
|
||||||
<text>购物车</text>
|
<text>购物车</text>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view v-if="showEbook" class="nav_list" @click="onPageJump('../eBook/bookBuy')">
|
|
||||||
<text>电子书购买记录</text>
|
|
||||||
</view> -->
|
|
||||||
<!-- <view v-if="showEbook" class="nav_list" @click="onPageJump('../eBook/bookRecord')">
|
|
||||||
<text>阅读记录</text>
|
|
||||||
</view> -->
|
|
||||||
<view class="nav_list" @click="onPageJump('../user/persData')">
|
<view class="nav_list" @click="onPageJump('../user/persData')">
|
||||||
<text>修改个人资料</text>
|
<text>修改个人资料</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="nav_list" @click="onPageJump('../user/address')">
|
<view class="nav_list" @click="onPageJump('../user/address')">
|
||||||
<text>地址管理</text>
|
<text>地址管理</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- <view class="nav_list" @click="onGoing()">
|
|
||||||
<text>帮助与反馈11111</text>
|
|
||||||
</view> -->
|
|
||||||
<!-- <view class="nav_list" @click="newOnShare" v-if="isAndorid"> -->
|
|
||||||
<view class="nav_list" @click="newOnShare">
|
<view class="nav_list" @click="newOnShare">
|
||||||
<text>分享App</text>
|
<text>分享App</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -161,20 +115,13 @@ export default {
|
|||||||
userCouponNum: 0,
|
userCouponNum: 0,
|
||||||
signShow: false,
|
signShow: false,
|
||||||
signContent: "是否要退出登录？",
|
signContent: "是否要退出登录？",
|
||||||
playData: {},
|
playData: {}
|
||||||
isAndorid: true,
|
|
||||||
platform: null, // 设备系统
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
//第一次加载
|
//第一次加载
|
||||||
onLoad(e) {
|
onLoad(e) {
|
||||||
// 隐藏原生的tabbar
|
// 隐藏原生的tabbar
|
||||||
uni.hideTabBar();
|
uni.hideTabBar();
|
||||||
// #ifdef APP-PLUS
|
|
||||||
this.getOS();
|
|
||||||
this.platform = uni.getSystemInfoSync().platform;
|
|
||||||
console.log('操纵系统',this.platform)
|
|
||||||
// #endif
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(["userInfo"]),
|
...mapState(["userInfo"]),
|
||||||
@@ -184,7 +131,6 @@ export default {
|
|||||||
// 隐藏原生的tabbar
|
// 隐藏原生的tabbar
|
||||||
uni.hideTabBar();
|
uni.hideTabBar();
|
||||||
this.getData();
|
this.getData();
|
||||||
|
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
musicPlay,
|
musicPlay,
|
||||||
@@ -219,17 +165,6 @@ export default {
|
|||||||
this.$commonJS.showToast(e.errMsg);
|
this.$commonJS.showToast(e.errMsg);
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 获得操作系统
|
|
||||||
getOS() {
|
|
||||||
let oprateOs = "";
|
|
||||||
oprateOs = uni.getSystemInfoSync().platform;
|
|
||||||
// console.log(oprateOs)
|
|
||||||
if (oprateOs == "android") {
|
|
||||||
this.isAndorid = true;
|
|
||||||
} else {
|
|
||||||
this.isAndorid = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
haveSelected(data) {
|
haveSelected(data) {
|
||||||
console.log(data, " 选择的是");
|
console.log(data, " 选择的是");
|
||||||
if (data.index == 0) {
|
if (data.index == 0) {
|
||||||
@@ -422,9 +357,8 @@ export default {
|
|||||||
|
|
||||||
.chong_zhi {
|
.chong_zhi {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
margin: 0 0 30upx 0;
|
padding: 30upx;
|
||||||
padding: 0 30upx;
|
margin-bottom: 30rpx;
|
||||||
height: 240upx;
|
|
||||||
|
|
||||||
.zhanghu {
|
.zhanghu {
|
||||||
font-size: 32upx;
|
font-size: 32upx;
|
||||||
@@ -440,7 +374,7 @@ export default {
|
|||||||
color: #a3a1a1;
|
color: #a3a1a1;
|
||||||
|
|
||||||
b {
|
b {
|
||||||
font-size: 45rpx;
|
font-size: 40rpx;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 0 10rpx 0;
|
margin: 0 0 10rpx 0;
|
||||||
color: #76757b;
|
color: #76757b;
|
||||||
@@ -455,7 +389,7 @@ export default {
|
|||||||
color: #fffbf6;
|
color: #fffbf6;
|
||||||
padding: 12rpx 42rpx;
|
padding: 12rpx 42rpx;
|
||||||
margin: 20rpx 0 0 0;
|
margin: 20rpx 0 0 0;
|
||||||
background: #815219;
|
background: #11a669;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,32 +16,20 @@
|
|||||||
: 'cj_price'
|
: 'cj_price'
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<view
|
<view class="pr_jg" >￥{{ item.realMoney }}</view>
|
||||||
class="pr_jg"
|
<view class="pr_yl" :style="item.givejf&&item.givejf>0?' paddingTop: 0':''">{{ item.money }}天医币<text v-if="item.givejf&&item.givejf>0">（赠{{ item.givejf }}积分）</text></view>
|
||||||
style="display: flex; align-items: center; justify-content: center"
|
<view class="pr_lj" v-if="item.description&&item.description!=''">{{item.description}}</view>
|
||||||
>
|
|
||||||
<image
|
|
||||||
src="@/static/icon/currency.png"
|
|
||||||
alt=""
|
|
||||||
style="width: 40rpx; height: 40rpx; margin-right: 10rpx"
|
|
||||||
/>
|
|
||||||
{{ item.money }}
|
|
||||||
</view>
|
|
||||||
<view class="pr_yl" style="color: #565455"
|
|
||||||
>￥{{ item.realMoney }}</view
|
|
||||||
>
|
|
||||||
<view class="pr_lj" v-if="item.description&&item.description!=''"
|
|
||||||
> {{item.description}}</view
|
|
||||||
>
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<br clear="both" />
|
<br clear="both" />
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view class="limitBlock" v-if="isAndroid">
|
||||||
><text style="font-size: 24rpx; color: #8e8e8e; font-weight: 500"
|
<text>其他金额</text>
|
||||||
>说明 : 天医币属于虚拟产品，一经购买概不退还</text
|
<input type="text" v-model="limitVal" placeholder="请输入充值金额" placeholder-class="limit-placeholder" @input="input()" />
|
||||||
></view
|
</view>
|
||||||
>
|
<view>
|
||||||
|
<text style="font-size: 24rpx; color: #8e8e8e;">说明 : 天医币属于虚拟产品，一经购买概不退还</text>
|
||||||
|
</view>
|
||||||
|
<view class="active_block" v-if="isAndroid&&activityContent.remark" v-html="activityContent.remark"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="cha_fangsh">
|
<view class="cha_fangsh">
|
||||||
@@ -88,7 +76,7 @@
|
|||||||
<radio-group class="agree">
|
<radio-group class="agree">
|
||||||
<view v-for="(item, index) in argee" :key="index">
|
<view v-for="(item, index) in argee" :key="index">
|
||||||
<radio
|
<radio
|
||||||
class="agreeRadio"
|
class="agreeRadio" color="#fe6e09"
|
||||||
:value="item.id"
|
:value="item.id"
|
||||||
:checked="item.id == radioValue"
|
:checked="item.id == radioValue"
|
||||||
@click="radioCheck(index)"
|
@click="radioCheck(index)"
|
||||||
@@ -182,6 +170,8 @@ export default {
|
|||||||
// 成功回调
|
// 成功回调
|
||||||
},
|
},
|
||||||
oprateOs: "",
|
oprateOs: "",
|
||||||
|
limitVal: '',
|
||||||
|
activityContent: {}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
//第一次加载
|
//第一次加载
|
||||||
@@ -190,7 +180,8 @@ export default {
|
|||||||
uni.hideTabBar();
|
uni.hideTabBar();
|
||||||
this.chargeOrderSn = e.orderSn;
|
this.chargeOrderSn = e.orderSn;
|
||||||
this.oprateOs = uni.getSystemInfoSync().platform;
|
this.oprateOs = uni.getSystemInfoSync().platform;
|
||||||
// console.log(e.orderSn,'orderSn')
|
|
||||||
|
this.getActivity();
|
||||||
},
|
},
|
||||||
//页面显示
|
//页面显示
|
||||||
onShow() {
|
onShow() {
|
||||||
@@ -500,7 +491,7 @@ export default {
|
|||||||
// 点击充值金额
|
// 点击充值金额
|
||||||
chosPric(e) {
|
chosPric(e) {
|
||||||
this.stepsCj = e;
|
this.stepsCj = e;
|
||||||
console.log(e);
|
this.limitVal = '';
|
||||||
},
|
},
|
||||||
|
|
||||||
// 选择支付方式1
|
// 选择支付方式1
|
||||||
@@ -508,6 +499,29 @@ export default {
|
|||||||
let that = this;
|
let that = this;
|
||||||
that.payType = e;
|
that.payType = e;
|
||||||
},
|
},
|
||||||
|
//获取活动文案
|
||||||
|
getActivity(){
|
||||||
|
$http.request({
|
||||||
|
url: "common/bookBuyConfig/getRechargeActivity",
|
||||||
|
method: "POST",
|
||||||
|
data: {},
|
||||||
|
header: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((data) => {
|
||||||
|
if(data.code==0){
|
||||||
|
if(data.res&&data.res.length>0){
|
||||||
|
this.activityContent = data.res[0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//输入金额
|
||||||
|
input(val){
|
||||||
|
this.stepsCj = {};
|
||||||
|
},
|
||||||
|
|
||||||
//ios充值
|
//ios充值
|
||||||
iosPay() {
|
iosPay() {
|
||||||
this.iphonepay();
|
this.iphonepay();
|
||||||
@@ -518,6 +532,31 @@ export default {
|
|||||||
},
|
},
|
||||||
// 正常充值
|
// 正常充值
|
||||||
kaiChar() {
|
kaiChar() {
|
||||||
|
if(!this.stepsCj.priceTypeId&&!this.limitVal){
|
||||||
|
uni.showToast({
|
||||||
|
title: "请选择充值商品",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const regex = /^[1-9]\d*$/;
|
||||||
|
//如果输入其他金额
|
||||||
|
if(this.limitVal){
|
||||||
|
if(!regex.test(this.limitVal)){
|
||||||
|
uni.showToast({
|
||||||
|
title: "充值金额必须为正整数",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
//设置充值金额和id
|
||||||
|
this.stepsCj = {
|
||||||
|
money: this.limitVal,
|
||||||
|
priceTypeId: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 常规充值
|
// 常规充值
|
||||||
if (this.radioValue == "1") {
|
if (this.radioValue == "1") {
|
||||||
uni.showLoading({
|
uni.showLoading({
|
||||||
@@ -781,43 +820,56 @@ export default {
|
|||||||
margin-top: 40rpx;
|
margin-top: 40rpx;
|
||||||
|
|
||||||
.cj_price {
|
.cj_price {
|
||||||
border: 4rpx solid #ebebeb;
|
box-shadow: 0 0 20rpx 0 #0000001a;
|
||||||
// box-shadow: 0 0 20rpx 0 #0000001a;
|
|
||||||
float: left;
|
float: left;
|
||||||
width: 31%;
|
width: 47%;
|
||||||
margin: 0 3% 30rpx 0;
|
margin: 0 5% 30rpx 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 25rpx 0 30rpx 0;
|
padding: 30rpx 0 0;
|
||||||
border-radius: 15rpx;
|
border-radius: 15rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
color: #2d2d2d;
|
color: #2d2d2d;
|
||||||
|
height: 160rpx;
|
||||||
|
line-height: 44rpx;
|
||||||
|
|
||||||
.pr_jg {
|
.pr_jg {
|
||||||
font-size: 38rpx;
|
font-size: 45rpx;
|
||||||
margin: 0rpx 0 10rpx 0;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pr_yl {
|
.pr_yl {
|
||||||
font-size: 28rpx;
|
padding-top: 10rpx;
|
||||||
// text-decoration: line-through;
|
font-size: 26rpx;
|
||||||
color: #8d8f8e;
|
color: #575555;
|
||||||
|
|
||||||
|
text{
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 10rpx;
|
||||||
|
color: red;
|
||||||
|
display: block;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pr_lj {
|
.pr_lj {
|
||||||
background-image: linear-gradient(90deg, #fe6e09 0%, #efa574 100%);
|
background-image: linear-gradient(180deg, #fe6e09 0%, #efa574 100%);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -22rpx;
|
top: -22rpx;
|
||||||
right: -22rpx;
|
right: -22rpx;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
padding: 5rpx 4rpx;
|
line-height: 20px;
|
||||||
|
padding: 5rpx 10rpx;
|
||||||
border-top-left-radius: 20rpx;
|
border-top-left-radius: 20rpx;
|
||||||
border-bottom-right-radius: 20rpx;
|
border-bottom-right-radius: 20rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cj_price:nth-child(3n) {
|
.cj_price:nth-child(2n) {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -835,7 +887,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.highlight {
|
.highlight {
|
||||||
color: $uni-color-primary;
|
color: #fe6e09;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cha_fangsh {
|
.cha_fangsh {
|
||||||
@@ -863,10 +915,6 @@ export default {
|
|||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.Tab_xf {
|
|
||||||
background-color: #fdf1e9cc;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -879,10 +927,12 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.char_btn {
|
.char_btn {
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
padding: 20rpx 0;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 30rpx;
|
bottom: 0;
|
||||||
|
|
||||||
view {
|
view {
|
||||||
background-image: linear-gradient(90deg, #ed7161 0%, #efa574 100%);
|
background-image: linear-gradient(90deg, #ed7161 0%, #efa574 100%);
|
||||||
@@ -890,10 +940,67 @@ export default {
|
|||||||
width: 90%;
|
width: 90%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 35rpx;
|
font-size: 30rpx;
|
||||||
font-weight: bold;
|
padding: 20rpx 0;
|
||||||
padding: 25rpx 0;
|
|
||||||
border-radius: 50rpx;
|
border-radius: 50rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.limitBlock{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
|
||||||
|
text{
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
input{
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
width: 300rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
border: 1rpx solid #ededed;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.limit-placeholder{
|
||||||
|
font-size: 25rpx;
|
||||||
|
color: #8b8c90 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active_block{
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(238, 147, 109, 0.2);
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 42rpx;
|
||||||
|
margin-top: 15rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/.active_block span{
|
||||||
|
color: red;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0 5rpx;
|
||||||
|
}
|
||||||
|
/deep/.active_block span:first-child{
|
||||||
|
padding: 0 5rpx 0 0;
|
||||||
|
}
|
||||||
|
/deep/.active_block p{
|
||||||
|
padding-top: 10rpx;
|
||||||
|
color: #666;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 34rpx;
|
||||||
|
}
|
||||||
|
/deep/.active_block p span{
|
||||||
|
padding: 0 5rpx !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -3,41 +3,53 @@
|
|||||||
<!-- 公共组件-每个页面必须引入 -->
|
<!-- 公共组件-每个页面必须引入 -->
|
||||||
<public-module></public-module>
|
<public-module></public-module>
|
||||||
<z-nav-bar title="我的账户"></z-nav-bar>
|
<z-nav-bar title="我的账户"></z-nav-bar>
|
||||||
|
<u-alert
|
||||||
|
type="warning"
|
||||||
|
size="20rpx"
|
||||||
|
:title="goBuyTitle"
|
||||||
|
:show-icon="true"
|
||||||
|
>
|
||||||
|
</u-alert>
|
||||||
<view class="ACTable">
|
<view class="ACTable">
|
||||||
<u-tabs :list="tab_list" @click="tab_click" lineColor="#54a966 100% 100%"
|
<!-- <u-tabs :list="tab_list" @click="tab_click" lineColor="#54a966 100% 100%"
|
||||||
:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.1)'}" v-if="iosHide"></u-tabs>
|
:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.1)'}" v-if="iosHide"></u-tabs>
|
||||||
|
|
||||||
<u-tabs :list="tab_list_ios" @click="tab_click" lineColor="#54a966 100% 100%"
|
<u-tabs :list="tab_list_ios" @click="tab_click" lineColor="#54a966 100% 100%"
|
||||||
:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.1)'}" v-if="!iosHide"></u-tabs>
|
:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.1)'}" v-if="!iosHide"></u-tabs> -->
|
||||||
|
<view>
|
||||||
<view v-if="tab_muJian==0">
|
<view
|
||||||
<view class="AC_mes">
|
class="AC_chong"
|
||||||
<view style="font-size: 50rpx;font-weight: bold;">{{userMes.peanutCoin}}</view>
|
@click="onPageJump('/pages/peanut/reCharge')"
|
||||||
<view style="color: #888;font-size: 30rpx;margin-top: 10rpx;">天医币</view>
|
>立即充值
|
||||||
|
<u-icon
|
||||||
<text v-if="platform != 'ios'" class="AC_chong" @click="buPoint()">充值</text>
|
name="arrow-right"
|
||||||
|
color="#fff"
|
||||||
|
size="16"
|
||||||
|
class="rightArrow"
|
||||||
|
></u-icon>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view v-if="tab_muJian==0">
|
||||||
<view class="AC_con">
|
<view class="AC_con">
|
||||||
<view class="AC_jilu">充值记录</view>
|
<view class="AC_jilu PM_font">充值消费记录</view>
|
||||||
<view v-for="(item,index) in MoneyRecord" class="AC_List">
|
<view v-for="(item,index) in MoneyRecord" class="AC_List">
|
||||||
<view class="AC_title">
|
<view class="AC_title">
|
||||||
{{item.orderType}}
|
{{item.orderType}}
|
||||||
<view>
|
<view>
|
||||||
<text v-if="item.changeAmount>0">+</text>
|
<text v-if="item.changeAmount>0">+</text>
|
||||||
<text>{{item.changeAmount}}</text>
|
<text>{{item.changeAmount}}</text>
|
||||||
天医币
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="AC_mark">{{item.remark}}</view>
|
<view class="AC_mark" v-if="item.remark">{{item.remark}}</view>
|
||||||
|
<view class="AC_note" v-if="item.note&&item.note!='null'">说明：{{item.note}}</view>
|
||||||
<view class="AC_time">{{item.createTime}}</view>
|
<view class="AC_time">{{item.createTime}}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="tab_muJian==1">
|
<view v-if="tab_muJian==1">
|
||||||
<view class="couponList">
|
<view class="couponList">
|
||||||
<view v-for="(item,index) in couponTabs" @click="couponTabCLi(index)"
|
<view v-for="(item,index) in couponTabs"
|
||||||
:class="couponListTab==index?'couStyle':''">{{item.name}}</view>
|
:class="couponListTab==index?'couStyle':''">{{item.name}}</view>
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view>
|
||||||
@@ -117,6 +129,7 @@
|
|||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
goBuyTitle:'【天医币】仅为我平台支付使用币种 。一人民币=一天医币，仅为了方便用户支付使用。【天医币】可以用于在我平台支付书籍或课程使用。【天医币】这个名称是为适应我们平台的定位属性，所起名称。与区块链虚拟货币无任何关系。',
|
||||||
playData: {},
|
playData: {},
|
||||||
platform: null,
|
platform: null,
|
||||||
tab_list: [{
|
tab_list: [{
|
||||||
@@ -196,10 +209,7 @@
|
|||||||
onLoad(e) {
|
onLoad(e) {
|
||||||
// 隐藏原生的tabbar
|
// 隐藏原生的tabbar
|
||||||
uni.hideTabBar();
|
uni.hideTabBar();
|
||||||
// #ifdef APP-PLUS
|
|
||||||
this.platform = uni.getSystemInfoSync().platform
|
this.platform = uni.getSystemInfoSync().platform
|
||||||
console.log('操纵系统', this.platform)
|
|
||||||
// #endif
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(['userInfo'])
|
...mapState(['userInfo'])
|
||||||
@@ -209,8 +219,6 @@
|
|||||||
// 隐藏原生的tabbar
|
// 隐藏原生的tabbar
|
||||||
uni.hideTabBar();
|
uni.hideTabBar();
|
||||||
this.getData();
|
this.getData();
|
||||||
this.getCourpe();
|
|
||||||
|
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
musicPlay
|
musicPlay
|
||||||
@@ -222,6 +230,9 @@
|
|||||||
if(!this.iosHide){
|
if(!this.iosHide){
|
||||||
this.tab_muJian=1
|
this.tab_muJian=1
|
||||||
}
|
}
|
||||||
|
var data = {
|
||||||
|
userId: this.userInfo.id,
|
||||||
|
};
|
||||||
// 用户详情
|
// 用户详情
|
||||||
if (this.userInfo.id != undefined) {
|
if (this.userInfo.id != undefined) {
|
||||||
this.$http
|
this.$http
|
||||||
@@ -230,45 +241,29 @@
|
|||||||
this.userMes = res.user
|
this.userMes = res.user
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
uni.showLoading({
|
||||||
|
title: '加载中'
|
||||||
|
})
|
||||||
// 充值记录
|
// 充值记录
|
||||||
this.$http
|
$http
|
||||||
.post('book/transactiondetails/list?userId=' + this.userInfo.id + '&page=' + this.RecordScreen
|
.request({
|
||||||
.page + '&limit=' + this.RecordScreen.limit)
|
url: 'common/transactionDetails/getTransactionDetailsList',
|
||||||
.then(res => {
|
method: "POST",
|
||||||
this.MoneyRecord = res.page.list
|
data,
|
||||||
this.totalPage = res.page.totalPage
|
header: {
|
||||||
this.totalCount = res.page.totalCount
|
"Content-Type": "application/json",
|
||||||
});
|
},
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
this.MoneyRecord = res.transactionDetailsList;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 点击tab
|
// 点击tab
|
||||||
tab_click(e) {
|
tab_click(e) {
|
||||||
this.tab_muJian = e.index
|
this.tab_muJian = e.index
|
||||||
},
|
},
|
||||||
|
|
||||||
// 优惠券
|
|
||||||
// getCourpe() {
|
|
||||||
// this.$http
|
|
||||||
// .post('/book/couponhistory/appGetUserCenterCoupon?userId=' + this.userInfo.id + '&useStatus=' + this
|
|
||||||
// .couponListTab)
|
|
||||||
// .then(res => {
|
|
||||||
// // this.cardList = res.couponVos
|
|
||||||
// this.cardList = res.couponVos
|
|
||||||
// });
|
|
||||||
// },
|
|
||||||
// 切换优惠券
|
|
||||||
couponTabCLi(e) {
|
|
||||||
// this.couponListTab = e
|
|
||||||
// this.getCourpe()
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 充值天医币
|
// 充值天医币
|
||||||
buPoint() {
|
buPoint() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
@@ -314,8 +309,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.AC_con {
|
.AC_con {
|
||||||
margin-top: 50rpx;
|
padding: 20rpx;
|
||||||
padding: 30rpx 30rpx;
|
|
||||||
box-shadow: 0 0px 10px 1px #d3d1d133;
|
box-shadow: 0 0px 10px 1px #d3d1d133;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 15rpx;
|
border-radius: 15rpx;
|
||||||
@@ -323,20 +317,17 @@
|
|||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
|
|
||||||
.AC_jilu {
|
.AC_jilu {
|
||||||
font-size: 32rpx;
|
font-size: 42rpx;
|
||||||
text-align: center;
|
text-align: left;
|
||||||
margin-bottom: 30rpx;
|
color: $themeColor;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.AC_List {
|
.AC_List {
|
||||||
border-bottom: 1px solid #eee;
|
overflow: hidden;
|
||||||
padding: 40rpx 10rpx;
|
|
||||||
|
|
||||||
.AC_title {
|
.AC_title {
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
margin-bottom: 20rpx;
|
|
||||||
|
|
||||||
view {
|
view {
|
||||||
float: right;
|
float: right;
|
||||||
@@ -346,14 +337,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.AC_mark {
|
.AC_mark {
|
||||||
|
width: 100%;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
margin-bottom: 15rpx;
|
margin-bottom: 15rpx;
|
||||||
color: #888;
|
color: #888;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.AC_note {
|
||||||
|
color: #888;
|
||||||
|
font-size: 26rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.AC_time {
|
.AC_time {
|
||||||
color: #bababa;
|
color: #bababa;
|
||||||
font-size: 25rpx;
|
font-size: 26rpx;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -569,10 +567,28 @@
|
|||||||
background: #c6c6c6;
|
background: #c6c6c6;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
/deep/.u-alert__content__title{
|
||||||
|
font-size: 24rpx !important;
|
||||||
|
line-height: 28rpx !important;
|
||||||
|
}
|
||||||
|
.AC_chong {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-image: linear-gradient(90deg, #54a966 0%, #a3d7ae 100%);
|
||||||
|
color: #fff;
|
||||||
|
border-top-left-radius: 15rpx;
|
||||||
|
border-top-right-radius: 15rpx;
|
||||||
|
padding: 20rpx 20rpx;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.rightArrow {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
float: right;
|
||||||
|
margin-left: 10rpx;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
429
pages/user/points.vue
Normal file
429
pages/user/points.vue
Normal file
@@ -0,0 +1,429 @@
|
|||||||
|
<template>
|
||||||
|
<view class="commonPageBox">
|
||||||
|
<z-nav-bar title="我的积分"> </z-nav-bar>
|
||||||
|
<view class="ACTable"><view>
|
||||||
|
<view class="AC_con">
|
||||||
|
<common-list
|
||||||
|
:dataList="MoneyRecord"
|
||||||
|
isCondition="true"
|
||||||
|
isNoIcon="true"
|
||||||
|
label="orderType"
|
||||||
|
>
|
||||||
|
<template slot="labelSlot" slot-scope="slotProps">
|
||||||
|
<view class="label_content AC_List" @click="slotProps.row.relationId?goClick(slotProps.row.relationId):''">
|
||||||
|
<view class="point_box">
|
||||||
|
<view class="title"><view class="AC_time">{{slotProps.row.createTime}}</view></view>
|
||||||
|
|
||||||
|
<view class="Hot">
|
||||||
|
<text v-if="slotProps.row.changeAmount > 0">+</text>
|
||||||
|
<text>{{slotProps.row.changeAmount}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="AC_mark" v-if="slotProps.row.remark">{{slotProps.row.remark}}</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</common-list>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view style="padding-bottom: 20rpx">
|
||||||
|
<u-back-top
|
||||||
|
:scroll-top="scrollTop"
|
||||||
|
bottom="60"
|
||||||
|
:customStyle="bgiStyle"
|
||||||
|
:iconStyle="iconStyle"
|
||||||
|
>
|
||||||
|
</u-back-top>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import $http from "@/config/requestConfig.js";
|
||||||
|
import { mapState } from "vuex";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
playData: {},
|
||||||
|
platform: null,
|
||||||
|
urlList: {
|
||||||
|
list: "common/jfTransactionDetails/getJfTransactionDetailsList",
|
||||||
|
},
|
||||||
|
cardList: [],
|
||||||
|
couponListTab: 0,
|
||||||
|
MoneyRecord: [],
|
||||||
|
userMes: {},
|
||||||
|
RecordScreen: {
|
||||||
|
userid: "",
|
||||||
|
page: 1,
|
||||||
|
limit: 5,
|
||||||
|
},
|
||||||
|
scrollTop: 0,
|
||||||
|
status: 3,
|
||||||
|
totalPage: 0,
|
||||||
|
totalCount: 0,
|
||||||
|
tab_muJian: 0,
|
||||||
|
bgiStyle: {
|
||||||
|
background: "#bbe5d8",
|
||||||
|
},
|
||||||
|
iconStyle: {
|
||||||
|
fontSize: "40rpx",
|
||||||
|
fontWeight: "bold",
|
||||||
|
color: "#54a966",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
// 返回顶部
|
||||||
|
onPageScroll(e) {
|
||||||
|
this.scrollTop = e.scrollTop;
|
||||||
|
},
|
||||||
|
//第一次加载
|
||||||
|
onLoad(e) {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(["userInfo"]),
|
||||||
|
},
|
||||||
|
//页面显示
|
||||||
|
onShow() {
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
//方法
|
||||||
|
methods: {
|
||||||
|
//列表进入详情
|
||||||
|
goClick(id){
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/detail/orderLCont?orderId=" + id
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//获取数据
|
||||||
|
getData() {
|
||||||
|
var data = {
|
||||||
|
userId: this.userInfo.id,
|
||||||
|
};
|
||||||
|
if (!this.iosHide) {
|
||||||
|
this.tab_muJian = 1;
|
||||||
|
}
|
||||||
|
//用户详情
|
||||||
|
if (this.userInfo.id != undefined) {
|
||||||
|
this.$http.post("book/user/info/" + this.userInfo.id).then((res) => {
|
||||||
|
this.userMes = res.user;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
uni.showLoading({
|
||||||
|
title: '加载中'
|
||||||
|
})
|
||||||
|
$http.request({
|
||||||
|
url: this.urlList.list,
|
||||||
|
method: "POST",
|
||||||
|
data,
|
||||||
|
header: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
this.MoneyRecord = res.transactionDetailsList;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.ACTable {
|
||||||
|
padding: 20rpx;
|
||||||
|
|
||||||
|
.AC_mes {
|
||||||
|
width: 100%;
|
||||||
|
height: 300rpx;
|
||||||
|
padding: 40rpx 20rpx;
|
||||||
|
box-shadow: 0 0px 10px 1px #d3d1d133;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.wallet_title {
|
||||||
|
color: #333;
|
||||||
|
font-size: 40rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
.wallet_number {
|
||||||
|
color: #333;
|
||||||
|
font-size: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.AC_con {
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 15rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
|
||||||
|
.AC_jilu {
|
||||||
|
font-size: 42rpx;
|
||||||
|
text-align: left;
|
||||||
|
color: #3d75bf;
|
||||||
|
padding: 10rpx 20rpx 40rpx;
|
||||||
|
}
|
||||||
|
/deep/.list_item {
|
||||||
|
background-color: rgba(255, 255, 255, 0.85) !important;
|
||||||
|
box-shadow: 0 0px 10px 1px #d3d1d133 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.couponList {
|
||||||
|
view {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 0 25rpx 0;
|
||||||
|
margin: 40rpx 0 40rpx 0;
|
||||||
|
width: 33%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.couStyle {
|
||||||
|
border-bottom: 5rpx solid #54a966;
|
||||||
|
color: #54a966;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
padding-left: 10rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card > view {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .dot-left,
|
||||||
|
.card .dot-right {
|
||||||
|
display: block;
|
||||||
|
width: 12rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #f5f5f5;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .dot-left {
|
||||||
|
bottom: -6rpx;
|
||||||
|
left: -6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .dot-right {
|
||||||
|
bottom: -6rpx;
|
||||||
|
right: -6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .page-group {
|
||||||
|
position: absolute;
|
||||||
|
top: 10rpx;
|
||||||
|
left: -2rpx;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 200rpx;
|
||||||
|
|
||||||
|
.fold-page {
|
||||||
|
display: block;
|
||||||
|
width: 10rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background: #54a966;
|
||||||
|
transform: skewY(-40deg);
|
||||||
|
position: absolute;
|
||||||
|
top: -5rpx;
|
||||||
|
left: -8rpx;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
display: block;
|
||||||
|
padding: 5rpx 20rpx 3rpx 20rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
background: linear-gradient(137deg, #54a966 0%, #0d5e1e 100%);
|
||||||
|
border-radius: 0 20rpx 20rpx 0;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
left: -8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .page-group.grey {
|
||||||
|
.fold-page {
|
||||||
|
background: #c6c6c6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
background: linear-gradient(137deg, #c6c6c6 0%, #999595 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .content {
|
||||||
|
width: 100%;
|
||||||
|
height: 180rpx;
|
||||||
|
border-bottom: 1rpx dotted #f5f5f5;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .content .coupon-detail {
|
||||||
|
display: flex;
|
||||||
|
padding: 0 15rpx 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .content .coupon-detail > view {
|
||||||
|
height: 130rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .content .coupon-detail > view:first-child {
|
||||||
|
color: #54a966;
|
||||||
|
padding-top: 100rpx;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .content .coupon-detail > view.grey {
|
||||||
|
color: #c6c6c6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .content .coupon-detail > view:first-child > span:first-child {
|
||||||
|
font-size: 30rpx;
|
||||||
|
margin: 0 10rpx 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .content .coupon-detail > view:first-child > span:last-child {
|
||||||
|
font-size: 70rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .content .coupon-detail > view:last-child > view {
|
||||||
|
color: #54a966;
|
||||||
|
border: 1rpx solid #54a966;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 25px;
|
||||||
|
width: 150rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
margin: 100rpx 0 0 5rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .coupon-detail > view:nth-child(2) {
|
||||||
|
flex-direction: column;
|
||||||
|
padding-top: 60rpx;
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .coupon-detail > view:nth-child(2) > view {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .coupon-detail > view:nth-child(2) > view:first-child {
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 25rpx;
|
||||||
|
margin: 0 0 10rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .coupon-detail > view:nth-child(2) > view:last-child {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #adadad;
|
||||||
|
margin-top: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .coupon-detail > view:nth-child(2) > view:last-child > view {
|
||||||
|
transform: scale(0.8);
|
||||||
|
margin-left: -14rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
.footer {
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 30rpx 15rpx 30rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ribbon {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background: #54a966;
|
||||||
|
position: absolute;
|
||||||
|
right: -40rpx;
|
||||||
|
top: 25rpx;
|
||||||
|
transform: rotateZ(45deg);
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20rpx;
|
||||||
|
line-height: 44rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ribbon.grey {
|
||||||
|
background: #c6c6c6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.Hot {
|
||||||
|
color: #333 !important;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.AC_chong {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-image: linear-gradient(90deg, #258feb 0%, #73ee9c 100%);
|
||||||
|
color: #fff;
|
||||||
|
border-top-left-radius: 15rpx;
|
||||||
|
border-top-right-radius: 15rpx;
|
||||||
|
padding: 20rpx 20rpx;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.rightArrow {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
float: right;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
.point_box{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.AC_mark {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #343434;
|
||||||
|
padding-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.AC_time {
|
||||||
|
color: #909090;
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding-top: 10rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -27,6 +27,9 @@ button {
|
|||||||
button::after {
|
button::after {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
.PM_font {
|
||||||
|
font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
|
||||||
|
}
|
||||||
// 主题背景色
|
// 主题背景色
|
||||||
.themeBgColor {
|
.themeBgColor {
|
||||||
background-color: $themeColor;
|
background-color: $themeColor;
|
||||||
|
|||||||
Reference in New Issue
Block a user