293 lines
6.8 KiB
Vue
293 lines
6.8 KiB
Vue
<template>
|
||
<view>
|
||
<view :key="index">
|
||
<u-image :src="imgUrl+detailList.cover" width="750rpx" height="530rpx">
|
||
</u-image>
|
||
<view class="collect" @click="starTap">
|
||
<view class="star">
|
||
<u-image v-if="detailList.is_fav==0||!detailList.is_fav" src="/static/detail/xp_icon_wstar.png"
|
||
width="28rpx" height="28rpx">
|
||
</u-image>
|
||
<u-image v-if="detailList.is_fav==1" src="/static/detail/xp_icon_star.png" width="28rpx"
|
||
height="28rpx">
|
||
</u-image>
|
||
</view>
|
||
<u-image src="/static/detail/xiangqing_icon_shoucang.png" width="119rpx" height="48rpx">
|
||
</u-image>
|
||
</view>
|
||
|
||
<view class="content">
|
||
<view class="title_box">
|
||
<text class="title">{{detailList.name}}</text>
|
||
<view class="title_tag">{{detailList.cate_bname}}</view>
|
||
</view>
|
||
<view class="desc">
|
||
{{detailList.title}}
|
||
</view>
|
||
<view class="classify">
|
||
{{detailList.cate_name}}
|
||
</view>
|
||
<view class="tag_view">
|
||
<view>
|
||
<text class="tagOne" v-for="item in detailList.tags" :key="item.id">{{item}}</text>
|
||
</view>
|
||
<view v-if="detailList.thumb" class="heart">
|
||
<u-image src="/static/detail/xp_icon_ysc.png" width="34rpx" height="32rpx">
|
||
</u-image>
|
||
<text class="thumb">{{detailList.thumb}}赞</text>
|
||
</view>
|
||
<view v-else class="heart" @click="heartTap">
|
||
<u-image v-if="showHeart==false" src="/static/detail/xp_icon_heart.png" width="34rpx"
|
||
height="32rpx">
|
||
</u-image>
|
||
<u-image v-if="showHeart==true" src="/static/detail/xp_icon_ysc.png" width="34rpx"
|
||
height="32rpx">
|
||
</u-image>
|
||
<text class="thumb">点赞</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="releaseDate">
|
||
<u-image src="/static/products/xp_icon_sjf.png" width="24rpx" height="24rpx">
|
||
</u-image>
|
||
<text class="release">发布日期：</text>
|
||
<text>{{detailList.pub_time}}</text>
|
||
</view>
|
||
<u-parse :content="detailList.desc" @preview="preview" @navigate="navigate"></u-parse>
|
||
<view style="margin:0 20rpx;">
|
||
<u-overlay :show="!isLoad">
|
||
<login @success="reOnLoad()" @fail="failToLoad()"></login>
|
||
</u-overlay>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
dateFormatDetail
|
||
} from '../../../utills/date.js'
|
||
import login from 'pages/my/login/login'
|
||
export default {
|
||
components: {
|
||
login
|
||
},
|
||
data() {
|
||
return {
|
||
id: '',
|
||
imgUrl: '',
|
||
tagsArray: [],
|
||
showHeart: false,
|
||
detailList: [],
|
||
isLoad: true
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.id = option.id
|
||
this.getProductDetail()
|
||
this.imgUrl = uni.getStorageSync('img_url')
|
||
if (!uni.getStorageSync('loginToken') || uni.getStorageSync('loginToken').length === 0) {
|
||
this.isLoad = false
|
||
// uni.navigateTo({
|
||
// url: '../../pages/my/login/login'
|
||
// })
|
||
return
|
||
}
|
||
this.isLoad = true
|
||
},
|
||
methods: {
|
||
//获取详情信息
|
||
getProductDetail() {
|
||
this.$apiServe.getProductDetail(this.id).then(res => {
|
||
console.log('产品详情页', res.data)
|
||
if (res.data.data.thumb) {
|
||
this.isThumb = true
|
||
}
|
||
if (res.data.code == 0) {
|
||
this.$toast.warn('没有权限访问')
|
||
}
|
||
if (res.data.data) {
|
||
let detail = res.data.data
|
||
detail.pub_time = dateFormatDetail(detail.pub_time)
|
||
let tag = detail.tags
|
||
this.tagsArray = tag.split(',')
|
||
detail.tags = this.tagsArray
|
||
this.detailList = res.data.data
|
||
} else {
|
||
this.$toast.warn('没有更多详情了')
|
||
}
|
||
}).finally(_ => {})
|
||
},
|
||
//收藏按钮
|
||
starTap() {
|
||
if (this.detailList.is_fav === 1) {
|
||
this.$toast.warn('已收藏')
|
||
} else if (this.detailList.is_fav === 0) {
|
||
this.$apiServe.collect(this.id).then(res => {
|
||
// console.log('收藏成功', res.data)
|
||
if (res.data.code == 1) {
|
||
this.detailList.is_fav = 1
|
||
this.$toast.warn('收藏成功')
|
||
} else {
|
||
this.$toast.warn('收藏失败')
|
||
}
|
||
}).finally(_ => {})
|
||
}
|
||
},
|
||
//点赞按钮
|
||
heartTap() {
|
||
// this.showHeart = !this.showHeart
|
||
this.$apiServe.thumb(this.id).then(res => {
|
||
console.log('点赞成功', res.data)
|
||
if (res.data.code == 1) {
|
||
this.showHeart = 1
|
||
this.$toast.warn('点赞成功')
|
||
} else {
|
||
this.$toast.warn('点赞失败')
|
||
}
|
||
}).finally(_ => {})
|
||
},
|
||
reOnLoad() {
|
||
if (!uni.getStorageSync('loginToken') || uni.getStorageSync('loginToken').length === 0) {
|
||
this.$toast.warn('登录失败请重试')
|
||
this.isLoad = false
|
||
// uni.navigateTo({
|
||
// url: '../../pages/my/login/login'
|
||
// })
|
||
return
|
||
}
|
||
this.isLoad = true
|
||
this.getProductDetail()
|
||
},
|
||
failToLoad() {
|
||
this.$toast.warn('登录失败请重试')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.collect {
|
||
display: flex;
|
||
position: absolute;
|
||
top: 16rpx;
|
||
right: 0;
|
||
color: #fff;
|
||
border-radius: 54rpx 0px 0px 54rpx;
|
||
padding: 2px 2px 2px 3px;
|
||
|
||
.star {
|
||
position: absolute !important;
|
||
top: 6px !important;
|
||
right: 77rpx;
|
||
z-index: 99;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
|
||
.title_box {
|
||
position: relative;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
font-weight: 400;
|
||
color: #0EBB5B;
|
||
line-height: 50rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.title_tag {
|
||
height: 30rpx;
|
||
background: #0EBB5B;
|
||
border-radius: 7rpx;
|
||
font-size: 20rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
line-height: 28rpx;
|
||
padding: 1rpx 15rpx;
|
||
}
|
||
}
|
||
|
||
.desc {
|
||
font-size: 30rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #3E3E3E;
|
||
line-height: 34rpx;
|
||
padding: 15rpx 0;
|
||
}
|
||
|
||
.classify {
|
||
width: 80rpx;
|
||
height: 30rpx;
|
||
border-radius: 6rpx;
|
||
border: 1rpx solid #EEEEEE;
|
||
font-size: 20rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 28rpx;
|
||
padding: 1rpx 15rpx;
|
||
}
|
||
|
||
.tag_view {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-top: 14rpx;
|
||
font-size: 20rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #CCCCCC;
|
||
line-height: 28rpx;
|
||
|
||
.tagOne {
|
||
padding-right: 20rpx;
|
||
}
|
||
|
||
.heart {
|
||
display: flex;
|
||
|
||
.thumb {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
margin-left: 14rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.releaseDate {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 33rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx 20rpx;
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
|
||
|
||
.release {
|
||
padding: 0 10rpx 0 6rpx;
|
||
}
|
||
}
|
||
</style>
|