You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
292 lines
7.9 KiB
292 lines
7.9 KiB
<template>
|
|
<view class="page" v-if="showPage">
|
|
<view class="page1" v-if="isUp == 1">
|
|
<view class="pageMain">
|
|
<view class="swiperBox" v-if="swipers.length > 0">
|
|
<ty-swiper-swiper-detail :list="swipers"></ty-swiper-swiper-detail>
|
|
</view>
|
|
<view class="padding-tb-25 padding-lr-30">
|
|
<!-- 商铺详情 -->
|
|
<view class="text-34 text-bold">
|
|
{{detailData.name}}
|
|
</view>
|
|
<view class="text-26 text-77 line-45 margin-top-25" style="white-space: pre-line;"
|
|
v-if="detailData.detail">
|
|
{{detailData.detail}}
|
|
</view>
|
|
<view class="margin-top-25" v-if="detailData.detail_img.length > 0">
|
|
<image :src="item" class="width-100p block" :class="index == 0 ? '' : 'margin-top-20'"
|
|
mode="aspectFill" v-for="(item,index) in detailData.detail_img" :key="index"></image>
|
|
</view>
|
|
<!-- 商品价格 -->
|
|
<view class="flex align-center justify-center margin-top-40"
|
|
v-if="detailData.price || detailData.price_img.length > 0">
|
|
<view class="titleLine"></view>
|
|
<view class="margin-lr-15 text-26 text-98">商品价格</view>
|
|
<view class="titleLine"></view>
|
|
</view>
|
|
<view class="text-26 text-33 line-45 margin-top-20" style="white-space: pre-line;"
|
|
v-if="detailData.price">
|
|
{{detailData.price}}
|
|
</view>
|
|
<view class="margin-top-25" v-if="detailData.price_img.length > 0">
|
|
<image :src="item" class="width-100p block" :class="index == 0 ? '' : 'margin-top-20'"
|
|
mode="aspectFill" v-for="(item,index) in detailData.price_img" :key="index"></image>
|
|
</view>
|
|
<!-- 检测报告 -->
|
|
<view class="flex align-center justify-center margin-top-50"
|
|
v-if="detailData.report || detailData.report_img.length > 0">
|
|
<view class="titleLine"></view>
|
|
<view class="margin-lr-15 text-26 text-98">检测报告</view>
|
|
<view class="titleLine"></view>
|
|
</view>
|
|
<view class="text-26 text-33 line-45 margin-top-20" style="white-space: pre-line;"
|
|
v-if="detailData.report">
|
|
{{detailData.report}}
|
|
</view>
|
|
<view class="margin-top-25" v-if="detailData.report_img.length > 0">
|
|
<image :src="item" class="width-100p block" :class="index == 0 ? '' : 'margin-top-20'"
|
|
mode="widthFix" v-for="(item,index) in detailData.report_img" :key="index"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 聊天 -->
|
|
<view class="chatBox" @click="go('/pages/chat/index',3)">
|
|
<view class="icon-icon-xiaoxi iconfont text-ff text-40"></view>
|
|
<view class="redCircle" v-if="isChatRed"></view>
|
|
</view>
|
|
<!-- 底部 -->
|
|
<view class="bottomBox flex align-center justify-between">
|
|
<view class="flex flex-direction align-center position-relative">
|
|
<view class="icon-icon-fenxiang iconfont text-42 margin-bottom-5 text-33"></view>
|
|
<view class="text-22 text-33 line-30">分享</view>
|
|
<button class="shareBtn" open-type="share"></button>
|
|
</view>
|
|
<view class="flex flex-direction align-center" @click="changeCollect">
|
|
<view class="tyIcon-shoucang text-42 margin-bottom-5 "
|
|
:class="isCollected ? 'text-2f9' : 'text-33'"></view>
|
|
<view class="text-22 text-33 line-30">{{isCollected ? '已收藏' : '收藏'}}</view>
|
|
</view>
|
|
<view class="bg-2f9 text-center text-ff text-30 text-bold line-height-80 radius-40"
|
|
style="width: 470rpx;" @click="goChat">
|
|
咨询商家</view>
|
|
</view>
|
|
</view>
|
|
<view class="page2 flex flex-direction align-center" v-else>
|
|
<view class="emptyImg">
|
|
<image src="/static/home/empty1.png" class="width-100p height-100p block"></image>
|
|
</view>
|
|
<view class="text-33 text-30 margin-bottom-35">商品已过期或已删除</view>
|
|
<view class="text-26 text-ff text-center line-height-60 radius-30 bg-2f9" style="width: 220rpx;"
|
|
@click="go('/pages/home/index',3)">去首页逛逛
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import chat from '../chat/api/chat.js'
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
swipers: [],
|
|
detailData: {},
|
|
id: '',
|
|
isCollected: false,
|
|
isUp: 1, //0--已下架 1-已上架
|
|
showPage: false,
|
|
isChatRed: false,
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: this.detailData.name,
|
|
imageUrl: this.detailData.cover_img,
|
|
path: 'pages/material/detail?id=' + this.id
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.id = options.id ? options.id : '';
|
|
this.getPageData();
|
|
},
|
|
onShow() {
|
|
if (this.cn.isLogin()) {
|
|
this.getBottomTabRed()
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取底部导航栏红点是否显示
|
|
getBottomTabRed() {
|
|
this.rq.getData('chat/api/FriendsChat/getNoReadNumber').then((res) => {
|
|
if (res.code == 0) {
|
|
if (res.data.number > 0) {
|
|
this.isChatRed = true;
|
|
} else {
|
|
this.isChatRed = false;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
getPageData() {
|
|
this.rq.getData('fire/api/Fire/getProductDetail', {
|
|
product_id: this.id
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
this.detailData = res.data.detail;
|
|
if (res.data.detail.status) {
|
|
res.data.detail.img_path.forEach((item, index) => {
|
|
this.swipers.push({
|
|
type: 1,
|
|
image_url: item
|
|
})
|
|
})
|
|
if (res.data.detail.video_url) {
|
|
this.swipers.unshift({
|
|
type: 2,
|
|
video_url: res.data.detail.video_url,
|
|
image_url: res.data.detail.video_cover_img
|
|
})
|
|
}
|
|
if (res.data.detail.status == 3) {
|
|
this.isUp = 0;
|
|
} else {
|
|
this.isUp = 1;
|
|
}
|
|
this.isCollected = res.data.detail.is_collect == 1 ? true : false;
|
|
} else {
|
|
this.isUp = 0;
|
|
}
|
|
this.showPage = true;
|
|
}
|
|
})
|
|
},
|
|
changeCollect() {
|
|
if (this.cn.isLogin()) {
|
|
this.rq.getData('fire/api/Fire/submitCollectProduct', {
|
|
product_id: this.id
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
this.isCollected = !this.isCollected
|
|
}
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '/pages/home/login'
|
|
})
|
|
}
|
|
},
|
|
goChat() {
|
|
if (this.cn.isLogin()) {
|
|
let clientId = '';
|
|
if (this.websocket.isSocketOpen) {
|
|
clientId = uni.getStorageSync('clientId')
|
|
}
|
|
if (uni.getStorageSync('user_id') != this.detailData.user_id) {
|
|
this.rq.getData('chat/api/FriendsChat/updateChatRoom', {
|
|
to_user_id: this.detailData.user_id,
|
|
client_id: clientId
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
console.log(1005, res)
|
|
var room_id = res.data.room_id
|
|
chat.insertChatMessage(room_id, 5, this.detailData.name, {}, {
|
|
id: this.id,
|
|
name: this.detailData.name,
|
|
cover_img: this.detailData.cover_img
|
|
}).then(res => {
|
|
uni.navigateTo({
|
|
url: '/pages/chat/message?room_id=' + room_id
|
|
})
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
this.cn.alert('不能跟自己对话')
|
|
}
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '/pages/home/login'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pageMain {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
background: #fff;
|
|
padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.page2 {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: #fff;
|
|
padding-top: 100rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.swiperBox {
|
|
width: 100vw;
|
|
}
|
|
|
|
.titleLine {
|
|
width: 60rpx;
|
|
height: 3rpx;
|
|
background: #CCCCCC;
|
|
}
|
|
|
|
|
|
.bottomBox {
|
|
width: 100vw;
|
|
background: #fff;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
box-sizing: border-box;
|
|
padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom)) 60rpx;
|
|
}
|
|
|
|
.shareBtn {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
opacity: 0;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.chatBox {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background: rgba(0, 0, 0, .3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.redCircle {
|
|
position: absolute;
|
|
width: 15rpx;
|
|
height: 15rpx;
|
|
background: red;
|
|
right: 5rpx;
|
|
top: 5rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.emptyImg {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
</style> |