373 lines
8.9 KiB
Vue
373 lines
8.9 KiB
Vue
<template>
|
||
<view>
|
||
<view :key="index">
|
||
<u-image :src="imgUrl+detailList.cover" width="750rpx" height="530rpx">
|
||
</u-image>
|
||
<view class="collect" v-if="detailList.is_fav==0||!detailList.is_fav" @click="starTap">
|
||
<view class="star">
|
||
<u-image src="/static/detail/xp_icon_wstar.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="collect" v-if="detailList.is_fav==1" @click="cancelStarTap(detailList.id)">
|
||
<view class="star">
|
||
<u-image 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 class="footer" @click="showModal()">
|
||
<u-icon name="kefu-ermai" color="#fff" size="30rpx"></u-icon>
|
||
<text>联系客服</text>
|
||
</view>
|
||
<u-modal :show="showCall" showCancelButton closeOnClickOverlay="false" confirmText="是" cancelText="否"
|
||
@confirm="confirmCall" @cancel="cancelCall">
|
||
<view>
|
||
<view>{{phone}}</view>
|
||
<text>是否拨打客服电话</text>
|
||
</view>
|
||
</u-modal>
|
||
<view style="margin:0 20rpx;">
|
||
<u-overlay :show="!isLoad">
|
||
<login @success="reOnLoad()" @fail="failToLoad()"></login>
|
||
</u-overlay>
|
||
</view>
|
||
<u-modal :show="showM" :content='content' closeOnClickOverlay="false" showCancelButton="true"
|
||
confirmText="升级VIP" @confirm="confirm" confirmColor="#0EBB5B">
|
||
<rich-text :nodes="content"></rich-text>
|
||
</u-modal>
|
||
</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: '',
|
||
showHeart: false,
|
||
detailList: [],
|
||
isLoad: true,
|
||
showM: false,
|
||
showCall: false,
|
||
phone: '138 1222 222',
|
||
content: '您暂无权限访问，请升级VIP访问'
|
||
}
|
||
},
|
||
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.msg == "没有权限访问" && uni.getStorageSync('loginToken')) {
|
||
this.showM = true
|
||
}
|
||
if (res.data.data) {
|
||
let detail = res.data.data
|
||
detail.pub_time = dateFormatDetail(detail.pub_time)
|
||
detail.tags = detail.tags.split(',')
|
||
this.detailList = detail
|
||
} else {
|
||
this.$toast.warn('没有更多详情了')
|
||
}
|
||
}).finally(_ => {})
|
||
},
|
||
//点击star收藏
|
||
starTap() {
|
||
this.$apiServe.collect(this.id).then(res => {
|
||
// console.log('收藏成功', res.data)
|
||
if (res.data.code == 1) {
|
||
this.$toast.warn('收藏成功')
|
||
this.getProductDetail()
|
||
} else {
|
||
this.$toast.warn('收藏失败')
|
||
}
|
||
}).finally(_ => {})
|
||
},
|
||
//点击star取消收藏
|
||
cancelStarTap(id) {
|
||
// console.log('this.detailList.id', id);
|
||
// this.$apiServe.deleteHistoryOrCollection(id).then(res => {
|
||
// console.log('取消收藏', res.data);
|
||
// // if (res.data.code == 1) {
|
||
// // this.$toast.warn('取消收藏')
|
||
// // this.getProductDetail()
|
||
// // } 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() {
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
},
|
||
confirm() {
|
||
uni.navigateTo({
|
||
url: '../../../packageMy/memberCenter/memberCenter?ask=' + 1
|
||
})
|
||
},
|
||
// 联系客服模态框
|
||
showModal() {
|
||
this.showCall = true
|
||
},
|
||
confirmCall() {
|
||
this.showCall = false
|
||
let phone = '1381222222'
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone,
|
||
success: function() {
|
||
console.log('拨打电话成功');
|
||
},
|
||
fail() {
|
||
console.log('打电话失败了');
|
||
}
|
||
})
|
||
},
|
||
cancelCall() {
|
||
this.showCall = false
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 100rpx;
|
||
background: #0EBB5B;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-content: center;
|
||
text-align: center;
|
||
|
||
.u-icon {
|
||
justify-content: center;
|
||
}
|
||
|
||
text {
|
||
font-size: 20rpx;
|
||
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
line-height: 26rpx;
|
||
}
|
||
}
|
||
</style>
|