363 lines
14 KiB
Vue
363 lines
14 KiB
Vue
<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">
|
||
<!-- 现价、原价 -->
|
||
<view v-if="user_type!='personal'">
|
||
<view class="colorf78 fon24 bold">￥<text class="fon36">{{proDetailTwo.cur_price/100}}</text>.00</view>
|
||
<view class="color9 fon24 dis" v-if="proDetailTwo.cur_price!=proDetailTwo.price">原价<text style="text-decoration: line-through;">￥{{proDetailTwo.price/100}}.00</text></view>
|
||
</view>
|
||
<view v-if="user_type=='personal'" class="colorf78 fon24 bold">￥<text class="fon36">{{proDetailTwo.price/100}}</text>.00</view>
|
||
<!-- 收藏 -->
|
||
<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>
|
||
<!-- 商品评价 -->
|
||
<view v-if="user_type!='personal'" class="margin-s20 bacb">
|
||
<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,
|
||
size:10,
|
||
total:'',
|
||
isZanw:true,
|
||
only_image:0,
|
||
statusHNH:uni.getStorageSync('statusHNH'),
|
||
pageShow:false,
|
||
titleVal:'',
|
||
xiaj:false,//是否下架
|
||
showShare:true,
|
||
user_type:uni.getStorageSync('user_type')//权限
|
||
}
|
||
},
|
||
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)
|
||
// })
|
||
// }
|
||
},
|
||
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
|
||
}
|
||
},
|
||
methods:{
|
||
like(){//查询猜你喜欢列表
|
||
this.$requst.post('product/spu/guess',{page:this.page,size:this.size}).then(res=>{
|
||
// console.log('猜你喜欢',res);
|
||
if(res.code==0){
|
||
if(this.page==1) this.page = []
|
||
this.total = res.data.total
|
||
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>
|