431 lines
11 KiB
Vue
431 lines
11 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.fav_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>
|
||
<!-- thumb有值，显示数字+赞 -->
|
||
<view v-if="detailList.thumb" class="heart">
|
||
<!-- 如果用户对该商品没有点赞，显示灰星 -->
|
||
<u-image v-if="detailList.is_thumb==0" src="/static/detail/xp_icon_heart.png" width="34rpx"
|
||
height="32rpx" @click="heartTap">
|
||
</u-image>
|
||
<!-- 如果用户对该商品已经点赞，显示黄星-->
|
||
<u-image v-if="detailList.is_thumb==1" src="/static/detail/xp_icon_ysc.png" width="34rpx"
|
||
height="32rpx" @click="cancelHeartTap(detailList.thumb_id)">
|
||
</u-image>
|
||
<text class="thumb">{{detailList.thumb}} 赞</text>
|
||
</view>
|
||
<!-- thumb无值，显示‘点赞’二字 ，用户进行一次点赞之后，显示1赞-->
|
||
<view v-else class="heart">
|
||
<view v-if="detailList.is_thumb==0" style="display: flex;">
|
||
<u-image src="/static/detail/xp_icon_heart.png" width="34rpx" height="32rpx"
|
||
@click="heartTap">
|
||
</u-image>
|
||
<text class="thumb" @click="heartTap">点赞</text>
|
||
</view>
|
||
<view v-if="detailList.is_thumb==1" style="display: flex;">
|
||
<!-- 用户是否点赞字段 showHeart -->
|
||
<u-image src="/static/detail/xp_icon_ysc.png" width="34rpx" height="32rpx"
|
||
@click="cancelHeartTap(detailList.thumb_id)">
|
||
</u-image>
|
||
<text class="thumb">{{detailList.thumb==NaN?1:detailList.thumb}} 赞</text>
|
||
</view>
|
||
</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="showContact()">
|
||
<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 style="text-indent: 25rpx;">{{mobile}}</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="showUpdate" :content='content' closeOnClickOverlay="false" showCancelButton="true"
|
||
confirmText="升级VIP" @confirm="confirm" @cancel="cancel" confirmColor="#0EBB5B">
|
||
<rich-text :nodes="updateContent"></rich-text>
|
||
</u-modal>
|
||
<u-modal :show="showUpdating" closeOnClickOverlay="false" confirmText="确定" @confirm="confirm">
|
||
<rich-text :nodes="updatingContent"></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,
|
||
showUpdate: false,
|
||
showUpdating: false,
|
||
showCall: false,
|
||
mobile: '',
|
||
updateContent: '您暂无权限访问，请升级VIP访问',
|
||
updatingContent: '升级VIP，正在审核中'
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.imgUrl = uni.getStorageSync('img_url')
|
||
this.id = option.id
|
||
this.getProductDetail()
|
||
this.getCsTel()
|
||
},
|
||
methods: {
|
||
//获取客服电话
|
||
getCsTel() {
|
||
this.$apiServe.getCsTel().then(res => {
|
||
this.mobile = res.data.data.cs_tel
|
||
}).finally(_ => {})
|
||
},
|
||
//获取详情信息
|
||
getProductDetail() {
|
||
this.$apiServe.getProductDetail(this.id).then(res => {
|
||
console.log('产品详情mtype', res.data.data);
|
||
let detail = res.data.data
|
||
let dataCode = res.data.code
|
||
//授权登录拦截
|
||
if (dataCode == 0 && detail.mytpe == 1) {
|
||
this.isLoad = false
|
||
}
|
||
//跳转到升级VIP页面
|
||
if (dataCode == 0 && detail.mytpe == 2) {
|
||
this.showUpdate = true
|
||
}
|
||
//升级VIP正在审核中
|
||
if (dataCode == 0 && detail.mytpe == 3) {
|
||
this.showUpdating = true
|
||
}
|
||
|
||
|
||
if (detail) {
|
||
detail.pub_time = dateFormatDetail(detail.pub_time)
|
||
if (detail.tags) {
|
||
detail.tags = detail.tags.split(',')
|
||
}
|
||
//点赞数
|
||
if (detail.thumbcount !== 0 && detail.is_thumb == 0) {
|
||
detail.thumb = parseInt(detail.thumb) + parseInt(detail.thumbcount)
|
||
} else {
|
||
if (detail.is_thumb == 1) {
|
||
detail.thumb = parseInt(detail.thumb) + parseInt(detail.thumbcount)
|
||
} else {
|
||
detail.thumb = parseInt(detail.thumb) - parseInt(detail.thumbcount)
|
||
}
|
||
}
|
||
this.detailList = detail
|
||
}
|
||
}).finally(_ => {})
|
||
},
|
||
//点击star收藏
|
||
starTap() {
|
||
if (!uni.getStorageSync('loginToken')) {
|
||
this.$toast.warn('请登录后操作')
|
||
} else {
|
||
this.$apiServe.collect(this.id).then(res => {
|
||
if (res.data.code == 1) {
|
||
this.$toast.warn('收藏成功')
|
||
this.getProductDetail()
|
||
} else {
|
||
this.$toast.warn('收藏失败')
|
||
}
|
||
}).finally(_ => {})
|
||
}
|
||
},
|
||
//点击star取消收藏
|
||
cancelStarTap(fav_id) {
|
||
this.$apiServe.deleteHistoryOrCollection(fav_id).then(res => {
|
||
if (res.data.code == 1) {
|
||
this.$toast.warn('取消收藏')
|
||
this.getProductDetail()
|
||
} else {
|
||
this.$toast.warn('取消收藏失败')
|
||
}
|
||
}).finally(_ => {})
|
||
},
|
||
//点赞按钮
|
||
heartTap() {
|
||
if (!uni.getStorageSync('loginToken')) {
|
||
this.$toast.warn('请登录后操作')
|
||
} else {
|
||
this.$apiServe.thumb(this.id).then(res => {
|
||
if (res.data.code == 1) {
|
||
this.getProductDetail()
|
||
this.$toast.warn('点赞成功')
|
||
} else {
|
||
this.$toast.warn('点赞失败')
|
||
}
|
||
}).finally(_ => {})
|
||
}
|
||
},
|
||
//取消点赞
|
||
cancelHeartTap(thumb_id) {
|
||
this.$apiServe.cancelThumb(thumb_id).then(res => {
|
||
if (res.data.code == 1) {
|
||
this.getProductDetail()
|
||
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
|
||
})
|
||
},
|
||
cancel() {
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
},
|
||
// 联系客服模态框
|
||
showContact() {
|
||
this.showCall = true
|
||
},
|
||
confirmCall() {
|
||
this.showCall = false
|
||
let phone = this.mobile
|
||
phone = phone.toString()
|
||
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: 20rpx 0;
|
||
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>
|