2021-08-26 01:49:06 +00:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="padding-x120">
|
|
|
|
|
|
<status-nav :statusBackw="true" :whereCome="whereCome*1" :statusTitle="true" :title-val="titleVal" :tabcolor="'#ffffff'"></status-nav>
|
|
|
|
|
|
<view v-if="pageShow">
|
|
|
|
|
|
<!-- 使用标题栏 -->
|
|
|
|
|
|
<view class="bacb padding-x20" :style="{paddingTop:(statusHNH+10)+'px'}">
|
|
|
|
|
|
<!-- 图片 -->
|
|
|
|
|
|
<image :src="zhuImg" mode="aspectFit" style="height: 682rpx;width: 100%;margin-top: 20rpx;"></image>
|
|
|
|
|
|
<view class="margin20">
|
|
|
|
|
|
<view class="disba">
|
|
|
|
|
|
<!-- 现价、原价 -->
|
2021-08-27 09:04:04 +00:00
|
|
|
|
<view v-if="user_type!='personal'">
|
2021-08-26 01:49:06 +00:00
|
|
|
|
<view class="colorf78 fon24 bold">￥<text class="fon36">{{proDetailTwo.cur_price/100}}</text>.00</view>
|
2021-08-28 06:23:27 +00:00
|
|
|
|
<view class="color9 fon24 dis" v-if="proDetailTwo.cur_price!=proDetailTwo.price">原价<text style="text-decoration: line-through;">￥{{proDetailTwo.price/100}}.00</text></view>
|
2021-08-26 01:49:06 +00:00
|
|
|
|
</view>
|
2021-08-27 09:04:04 +00:00
|
|
|
|
<view v-if="user_type=='personal'" class="colorf78 fon24 bold">￥<text class="fon36">{{proDetailTwo.price/100}}</text>.00</view>
|
2021-08-26 01:49:06 +00:00
|
|
|
|
<!-- 收藏 -->
|
|
|
|
|
|
<view class="discc" @tap="collection(proDetail.id)">
|
|
|
|
|
|
<image v-if="isCollection" style="width: 40rpx; height: 38rpx;" src="/static/img/public/shouc.png" mode=""></image>
|
|
|
|
|
|
<image v-else class="animated bounceIn" style="width: 40rpx; height: 38rpx;" src="/static/img/public/shoucactive.png" mode=""></image>
|
|
|
|
|
|
<view class="fon24 color9 margin-s10">收藏</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="color33 fon32 margin-sx16 clips2">{{proDetail.name}}</view>
|
|
|
|
|
|
<view class="fon24 color9">{{proDetail.sub_title}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 商品评价 -->
|
2021-08-27 08:01:51 +00:00
|
|
|
|
<view v-if="user_type!='personal'" class="margin-s20 bacb">
|
2021-08-26 01:49:06 +00:00
|
|
|
|
<view class="disba padding-sx20 padding-zy20">
|
|
|
|
|
|
<view class="fon32 bold">商品评价({{evalTotal}})</view>
|
|
|
|
|
|
<view class="disac">
|
|
|
|
|
|
<view @tap="checkAllp(proDetail.id)" class="fon26 color9 margin-y10">查看全部</view>
|
|
|
|
|
|
<image style="width: 12rpx;height: 22rpx;" src="/static/img/my/youj.png" mode=""></image>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 评价列表 -->
|
|
|
|
|
|
<evaluateList :eval-arr="evalArr" :isEval="true" :isShow="false" :len="2"></evaluateList>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 商品详情 -->
|
|
|
|
|
|
<view class="disbcac padding-sx40">
|
|
|
|
|
|
<view class="gouwcxian "></view>
|
|
|
|
|
|
<image class="margin-zy20 margin-s10 gouwchh" src="/static/img/gouwc/heh.png" mode=""></image>
|
|
|
|
|
|
<view class="bold fon32">商品详情</view>
|
|
|
|
|
|
<view class="gouwcxian margin-z20"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 详情 -->
|
|
|
|
|
|
<view class="padding20 bacb">
|
|
|
|
|
|
<view class="fon32 bold margin-sx10" style="color: #353535;">规格与包装</view>
|
|
|
|
|
|
<view class="disba fon24 color6 flw">
|
|
|
|
|
|
<view class="disac margin-x10" style="width: 50%;" v-if="proDetail.brand_name!=''"><view style="width: 32%;" class="flexs"><text>品牌</text></view><view class="flexs clips1">： {{proDetail.brand_name}} </view></view>
|
|
|
|
|
|
<view class="disac margin-x10" style="width: 50%;"><view style="width: 32%;" class="flexs">商品编号</view><view class="clips1">： {{proDetailTwo.coding}}</view></view>
|
|
|
|
|
|
<view class="disac margin-x10" style="width: 50%;"><view style="width: 32%;" class="flexs">商品名称</view><view class="clips1">： {{proDetail.name}}</view></view>
|
|
|
|
|
|
<view class="disac margin-x10" style="width: 50%;"><view style="width: 32%;" class="flexs">类别</view><view class="flexs clips1">： {{proDetail.category_name}}</view></view>
|
|
|
|
|
|
<block v-for="(itemspec,indexspec) in proDetailTwo.own_spec" :key="indexspec">
|
|
|
|
|
|
<view class="disac margin-x10" style="width: 50%;"><view style="width: 32%;" class="flexs">{{itemspec.name}}</view><view class="flexs clips1">：{{itemspec.value}}{{itemspec.unit}}</view></view>
|
|
|
|
|
|
</block>
|
|
|
|
|
|
<!-- <view class="disac margin-x10" style="width: 50%;"><view style="width: 32%;" class="flexs">容量(L)</view><view class="flexs clips1">： 其他</view></view>
|
|
|
|
|
|
<view class="disac margin-x10" style="width: 50%;"><view style="width: 32%;" class="flexs">商品毛重</view><view class="flexs clips1">： 11.6kg</view></view> -->
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="margin-s20">
|
|
|
|
|
|
<rich-text :nodes="detailCon"></rich-text>
|
|
|
|
|
|
<!-- <image :src="itemimg.src" mode="widthFix" style="width: 100%;" v-for="(itemimg,indeximg) in detailImg" :key="indeximg"></image> -->
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 猜你喜欢 -->
|
|
|
|
|
|
<view class="disbcac padding-sx40">
|
|
|
|
|
|
<view class="gouwcxian "></view>
|
|
|
|
|
|
<image class="margin-zy20 margin-s10 gouwchh" src="/static/img/gouwc/heh.png" mode=""></image>
|
|
|
|
|
|
<view class="bold fon32">猜你喜欢</view>
|
|
|
|
|
|
<view class="gouwcxian margin-z20"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 喜欢列表 -->
|
|
|
|
|
|
<twocoluList @addChe="addChe" :dataList="dataList"></twocoluList>
|
|
|
|
|
|
<!-- 分享 -->
|
|
|
|
|
|
<button v-if="showShare" data-name="shareBtn" open-type="share" plain="true" style="border: none;">
|
|
|
|
|
|
<image class="zIn5 share animated pulse infinite" src="/static/img/product/share.png" mode=""></image>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<!-- 底部 -->
|
|
|
|
|
|
<bottomkf :detail="proDetail" @diaoq="proDetailEv" :sku_img="sku_img"></bottomkf>
|
|
|
|
|
|
<!-- 返回顶部 -->
|
|
|
|
|
|
<backTop :showTop="showTop" @backTop="backTop"></backTop>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view v-if="xiaj" class="zanwu">该商品已下架，将自动返回</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import twocoluList from '@/components/twocoluList.vue';
|
|
|
|
|
|
import bottomkf from '@/components/bottomkf.vue';
|
|
|
|
|
|
import evaluateList from '@/components/evaluateList.vue';
|
|
|
|
|
|
import backTop from '@/components/backTop.vue';
|
|
|
|
|
|
export default {
|
|
|
|
|
|
components:{
|
|
|
|
|
|
twocoluList,
|
|
|
|
|
|
bottomkf,
|
|
|
|
|
|
evaluateList,
|
|
|
|
|
|
backTop
|
|
|
|
|
|
},
|
|
|
|
|
|
data(){
|
|
|
|
|
|
return {
|
|
|
|
|
|
whereCome:0,
|
|
|
|
|
|
dataInfo:{},
|
|
|
|
|
|
dataList:[],
|
|
|
|
|
|
guigArr:[],
|
|
|
|
|
|
guigCurrent:0,
|
|
|
|
|
|
num:1,
|
|
|
|
|
|
isBtn:false,
|
|
|
|
|
|
evalArr:[],
|
|
|
|
|
|
showTop:false,
|
|
|
|
|
|
isCollection:true,
|
|
|
|
|
|
proDetail:{},
|
|
|
|
|
|
zhuImg:'',
|
|
|
|
|
|
detailImg:[],
|
|
|
|
|
|
proDetailTwo:{},
|
|
|
|
|
|
detailCon:'',
|
|
|
|
|
|
order_sku_id:'',
|
|
|
|
|
|
evalTotal:0,
|
|
|
|
|
|
sku_img:'',
|
|
|
|
|
|
page:1,
|
2021-08-29 01:35:35 +00:00
|
|
|
|
size:10,
|
|
|
|
|
|
total:'',
|
|
|
|
|
|
isZanw:true,
|
2021-08-26 01:49:06 +00:00
|
|
|
|
only_image:0,
|
|
|
|
|
|
statusHNH:uni.getStorageSync('statusHNH'),
|
|
|
|
|
|
pageShow:false,
|
|
|
|
|
|
titleVal:'',
|
|
|
|
|
|
xiaj:false,//是否下架
|
2021-08-27 08:01:51 +00:00
|
|
|
|
showShare:true,
|
|
|
|
|
|
user_type:uni.getStorageSync('user_type')//权限
|
2021-08-26 01:49:06 +00:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
onPageScroll(e) {
|
|
|
|
|
|
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
|
|
|
|
|
|
},
|
|
|
|
|
|
onShareAppMessage(options) {
|
|
|
|
|
|
var ya = this;
|
|
|
|
|
|
var shareObj = {
|
|
|
|
|
|
title: ya.proDetail.name, // 默认是小程序的名称(可以写slogan等)
|
|
|
|
|
|
path: '/pagesA/productDetail/productDetail?id='+ya.proDetail.id+"&index=2", // 默认是当前页面，必须是以‘/’开头的完整路径
|
|
|
|
|
|
imageUrl: ya.zhuImg, //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
|
|
|
|
|
|
success: function(res){
|
|
|
|
|
|
// 转发成功之后的回调
|
|
|
|
|
|
if(res.errMsg == 'shareAppMessage:ok'){
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
fail: function(res){
|
|
|
|
|
|
// 转发失败之后的回调
|
|
|
|
|
|
if(res.errMsg == 'shareAppMessage:fail cancel'){
|
|
|
|
|
|
// 用户取消转发
|
|
|
|
|
|
}else if(res.errMsg == 'shareAppMessage:fail'){
|
|
|
|
|
|
// 转发失败，其中 detail message 为详细失败信息
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
// 来自页面内的按钮的转发
|
|
|
|
|
|
if( options.from == 'button' ){
|
|
|
|
|
|
var eData = options.target.dataset;
|
|
|
|
|
|
//console.log( eData.name ); // shareBtn
|
|
|
|
|
|
// 此处可以修改 shareObj 中的内容
|
|
|
|
|
|
shareObj.path = '/pages/tabbar/my/my';
|
|
|
|
|
|
}
|
|
|
|
|
|
return shareObj;
|
|
|
|
|
|
},
|
|
|
|
|
|
onShow() {
|
|
|
|
|
|
this.$toolAll.tools.guoq()
|
|
|
|
|
|
if(uni.getStorageSync('is_active')==0) {
|
|
|
|
|
|
this.showShare = false
|
|
|
|
|
|
}
|
|
|
|
|
|
uni.removeStorageSync('orderInfo')
|
|
|
|
|
|
},
|
|
|
|
|
|
onLoad(options) {
|
|
|
|
|
|
let ya = this
|
|
|
|
|
|
if(uni.getStorageSync('token')!=''){
|
|
|
|
|
|
let whereNum = options.index
|
|
|
|
|
|
if(whereNum!=undefined) this.whereCome = whereNum
|
|
|
|
|
|
this.checkDetail(options.id)
|
|
|
|
|
|
this.like()
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.$toolAll.tools.showToast('您目前是游客，请登录')
|
|
|
|
|
|
setTimeout(function(){
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url:'/pages/login/login'
|
|
|
|
|
|
})
|
|
|
|
|
|
},2000)
|
|
|
|
|
|
}
|
|
|
|
|
|
// this.proDetail = uni.getStorageSync('proDetail')
|
|
|
|
|
|
// this.zhuImg = this.$http + this.proDetail.main_sku.main_image
|
|
|
|
|
|
// if(this.proDetail.main_sku.images.length!=0){
|
|
|
|
|
|
// this.proDetail.main_sku.images.forEach(item=>{
|
|
|
|
|
|
// let detailImgObj = {
|
|
|
|
|
|
// src:this.$http+item.src
|
|
|
|
|
|
// }
|
|
|
|
|
|
// this.detailImg.push(detailImgObj)
|
|
|
|
|
|
// })
|
|
|
|
|
|
// }
|
|
|
|
|
|
},
|
2021-08-29 01:35:35 +00:00
|
|
|
|
onReachBottom() {
|
|
|
|
|
|
if(this.total!=this.dataList.length && this.total>=this.dataList.length){
|
|
|
|
|
|
this.page++
|
|
|
|
|
|
this.like()//调用自主预约列表事件
|
|
|
|
|
|
} else {
|
|
|
|
|
|
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多商品列表','none',1000)
|
|
|
|
|
|
this.isZanw = false
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2021-08-26 01:49:06 +00:00
|
|
|
|
methods:{
|
|
|
|
|
|
like(){//查询猜你喜欢列表
|
|
|
|
|
|
this.$requst.post('product/spu/guess',{page:this.page,size:this.size}).then(res=>{
|
|
|
|
|
|
// console.log('猜你喜欢',res);
|
|
|
|
|
|
if(res.code==0){
|
2021-08-29 01:35:35 +00:00
|
|
|
|
if(this.page==1) this.page = []
|
|
|
|
|
|
this.total = res.data.total
|
2021-08-26 01:49:06 +00:00
|
|
|
|
if(res.data.list.length!=0){
|
|
|
|
|
|
res.data.list.forEach(item=>{
|
|
|
|
|
|
let likeObj = {
|
|
|
|
|
|
id:item.main_sku.id,
|
|
|
|
|
|
spu_id:item.id,
|
|
|
|
|
|
src:this.$http + item.main_sku.main_image,
|
|
|
|
|
|
title:item.name,
|
|
|
|
|
|
price:item.main_sku.cur_price/100,
|
|
|
|
|
|
tags:item.tags
|
|
|
|
|
|
}
|
|
|
|
|
|
this.dataList.push(likeObj)
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},error=>{})
|
|
|
|
|
|
},
|
|
|
|
|
|
proDetailEv(){
|
|
|
|
|
|
this.sku_img = this.$http + this.proDetail.sku_list[0].main_image
|
|
|
|
|
|
},
|
|
|
|
|
|
checkDetail(id){//详情接口
|
|
|
|
|
|
this.$requst.post('product/spu/detail',{id:id}).then(res=>{
|
|
|
|
|
|
if(res.code==0){
|
|
|
|
|
|
this.pageShow = true
|
|
|
|
|
|
this.proDetail = res.data
|
|
|
|
|
|
this.titleVal = this.proDetail.name
|
|
|
|
|
|
if(res.data.is_collected==0) this.isCollection = true
|
|
|
|
|
|
if(res.data.is_collected==1) this.isCollection = false
|
|
|
|
|
|
if(res.data.sku_list.length!=0){
|
|
|
|
|
|
for (let i = 0; i < res.data.sku_list.length; i++) {
|
|
|
|
|
|
if(res.data.sku_list[i].is_main==1){
|
|
|
|
|
|
this.proDetailTwo = res.data.sku_list[i]
|
|
|
|
|
|
this.zhuImg = this.$http + res.data.sku_list[i].main_image
|
|
|
|
|
|
this.order_sku_id = res.data.sku_list[i].id
|
|
|
|
|
|
break;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.proDetailTwo = res.data.sku_list[i]
|
|
|
|
|
|
this.zhuImg = this.$http + res.data.sku_list[0].main_image
|
|
|
|
|
|
this.order_sku_id = res.data.sku_list[0].id
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
this.detailCon = this.$toolAll.tools.escape2Html(this.proDetail.spu_detail.description)
|
|
|
|
|
|
this.checkEval(this.proDetail.id)
|
|
|
|
|
|
}
|
|
|
|
|
|
// if(res.code==4004){
|
|
|
|
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
},error=>{
|
|
|
|
|
|
this.xiaj = true
|
|
|
|
|
|
setTimeout(function(){
|
|
|
|
|
|
uni.navigateBack({delta:1})
|
|
|
|
|
|
},1500)
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
checkEval(id){//评论接口
|
|
|
|
|
|
let allEvaluateObj = {
|
|
|
|
|
|
spu_id:id,
|
|
|
|
|
|
page:this.page,
|
|
|
|
|
|
size:this.size,
|
|
|
|
|
|
only_image:this.only_image
|
|
|
|
|
|
}
|
|
|
|
|
|
let pingArr = []
|
|
|
|
|
|
this.$requst.post('product/spu/comment-list',allEvaluateObj).then(res=>{
|
|
|
|
|
|
if(res.code==0){
|
|
|
|
|
|
this.evalTotal = res.data.total
|
|
|
|
|
|
if(res.data.list.length!=0){
|
|
|
|
|
|
res.data.list.forEach((item,index)=>{
|
|
|
|
|
|
let imgArr = []
|
|
|
|
|
|
item.images.forEach(itemimg=>{
|
|
|
|
|
|
let imgObj = {
|
|
|
|
|
|
src:this.$http + itemimg
|
|
|
|
|
|
}
|
|
|
|
|
|
imgArr.push(imgObj)
|
|
|
|
|
|
})
|
|
|
|
|
|
let haveH = item.account.headimgurl.slice(0,4)
|
|
|
|
|
|
if(haveH!='http') {
|
|
|
|
|
|
haveH = this.$http
|
|
|
|
|
|
} else haveH = ''
|
|
|
|
|
|
let newname = this.$toolAll.tools.hideName(item.account.nickname)//隐藏姓名中间几位
|
|
|
|
|
|
let evalObj = {
|
|
|
|
|
|
src:haveH + item.account.headimgurl,
|
|
|
|
|
|
name:newname,
|
|
|
|
|
|
xingj:item.grade,
|
|
|
|
|
|
content:item.content,
|
|
|
|
|
|
title:item.orderSku.spu_name,
|
|
|
|
|
|
time:item.created_at,
|
|
|
|
|
|
imgList:imgArr
|
|
|
|
|
|
}
|
|
|
|
|
|
if(index<2){
|
|
|
|
|
|
this.evalArr.push(evalObj)
|
|
|
|
|
|
}
|
|
|
|
|
|
pingArr.push(evalObj)
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// console.log('pingArr:',pingArr);
|
|
|
|
|
|
// console.log(res);
|
|
|
|
|
|
},error=>{})
|
|
|
|
|
|
},
|
|
|
|
|
|
checkAllp(id){
|
|
|
|
|
|
uni.setStorageSync('plOrder',this.proDetail)
|
|
|
|
|
|
uni.navigateTo({url:'/pagesB/allEvaluate/allEvaluate?id='+id})
|
|
|
|
|
|
},
|
|
|
|
|
|
backTop(){
|
|
|
|
|
|
uni.pageScrollTo({
|
|
|
|
|
|
scrollTop: 0,
|
|
|
|
|
|
duration: 300
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
addChe(e){//加入购物车事件
|
|
|
|
|
|
// console.log('加入购物车：'+e)
|
|
|
|
|
|
this.$toolAll.tools.showToast('加入购物车'+e)
|
|
|
|
|
|
},
|
|
|
|
|
|
collection(id){
|
|
|
|
|
|
if(uni.getStorageSync('is_active')==0) {
|
|
|
|
|
|
this.$toolAll.tools.showToast('您目前是游客，请授权登录')
|
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
|
uni.navigateTo({url:'/pages/login/login'})
|
|
|
|
|
|
},1500)
|
|
|
|
|
|
} else {
|
|
|
|
|
|
// console.log('收藏商品ID',id);
|
|
|
|
|
|
let newApi = ''
|
|
|
|
|
|
if(this.isCollection==true){//添加收藏事件
|
|
|
|
|
|
this.$requst.post('user/collection-add',{spu_id:id}).then(res=>{
|
|
|
|
|
|
// console.log(res);
|
|
|
|
|
|
if(res.code==0){
|
|
|
|
|
|
this.isCollection = false
|
|
|
|
|
|
uni.showToast({title:'收藏成功',icon:'none'})
|
|
|
|
|
|
}
|
|
|
|
|
|
},error=>{})
|
|
|
|
|
|
} else {//取消收藏事件
|
|
|
|
|
|
// console.log('信息',this.proDetail);
|
|
|
|
|
|
this.$requst.post('user/collection-del',{spu_id:id}).then(res=>{
|
|
|
|
|
|
// console.log(res);
|
|
|
|
|
|
if(res.code==0){
|
|
|
|
|
|
this.isCollection = true
|
|
|
|
|
|
uni.showToast({title:'取消成功',icon:'none'})
|
|
|
|
|
|
}
|
|
|
|
|
|
},error=>{})
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
</style>
|
