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.

689 lines
20 KiB

<template>
<view class="goodsDetails" :class="['theme', themeObj.name]">
<!-- 顶部自定义导航栏 -->
<view class="top_nav">
<navBar textcolor="#000" :showLeft="true" :showTitle="false"></navBar>
</view>
<!-- 轮播图 -->
<swipers :goodsData="goods" @setShowVideo="setShowVideo"></swipers>
<!-- -->
<!-- #ifndef MP -->
<view class="place" :style="'top:-' + toBar"></view>
<!-- #endif -->
<!-- 商品信息 -->
<view class="goods_info">
<view class="goods_name">
{{goods.goodsName}}
</view>
<view class="text-gray text-sm padding-top-xs">
{{goods.category}}
</view>
<view class="goods_price" v-if="goods.price > 0">
<text class="money text-lg">¥{{goods.price}}</text>
<text>/{{ goods.unit }}</text>
<text class="h_money">{{goodsData.hprice}}</text>
</view>
<view class="goods_price" v-else>
<text class="money text-lg">客服询价</text>
</view>
<!-- <view class="shoucang">
<view class="sc_icons" @tap="setisColl">
<text :class="['iconfont',isColl == true?'icon-shoucang1':'icon-shoucang'] " :style="{color: isColl == true? colors :''}"></text>
</view>
<view class="sc_text" :style="{color: isColl == true? colors :''}">收藏</view>
</view> -->
</view>
<view class="other">
<!-- v-if="goodsData.baoyou == true" -->
<p>快递: 包邮</p>
<!-- <p v-else>快递费:10元</p> -->
<!-- <p>销量:{{goodsData.xiaoliang}}</p> -->
</view>
<view class="other">
<p >分类: {{ goods.category }}</p>
</view>
<view class="other">
<p >厂商: {{ goods.factory }}</p>
</view>
<!-- 分享按钮 -->
<view class="share">
<!-- <view class="tips" style="color: #666;">
<text class="iconfont icon-zuanshi" style="color: #FF546E;font-size: 38upx;font-weight: 600;"></text>
分享商品可获得商城积分
</view> -->
<!-- #ifdef MP -->
<!-- <view class="onshare" style="color: #FF546E;">
<text class="iconfont icon-fenxiang"></text>
<button open-type="share" class="share_btn">1</button>
立即分享
</view> -->
<!-- #endif -->
<!-- <view class="poster" style="color: #FF546E;" @tap="openPoster">
<text class="iconfont icon-CombinedShape"></text>
生成海报
</view> -->
</view>
<!-- 店铺信息 -->
<!-- <view class="shop">
<image class="shop_img" src="/static/images/log.png" mode="aspectFill"></image>
<view class="shop_center" style="width: 65%;">
<view class="shop_name">社区团购自营店</view>
<view class="shop_address">{{goodsData.stallAddress}}</view>
</view> -->
<!-- #ifdef MP -->
<!-- <view class="shoucang go_btn" @tap="nearAddress">
<view class="sc_icons">
<text class="iconfont icon-dizhi"></text>
</view>
<view class="sc_text">到这去</view>
</view> -->
<!-- #endif -->
<!-- #ifndef MP -->
<!-- 直接打开地图需要传递店铺的经纬度 来获取店铺的位置 -->
<!-- <view class="shoucang go_btn" @tap="openMap">
<view class="sc_icons">
<text class="iconfont icon-dizhi"></text>
</view>
<view class="sc_text">到这去</view>
</view> -->
<!-- #endif -->
<!-- </view> -->
<!-- 选择规格和优惠券 -->
<view class="sku_pon">
<view class="cell" @tap="openSku">
<text class="text1">商品规格:</text>
<text class="text2">{{ goods.specs }}</text>
<image src="/static/images/home/right.png"></image>
</view>
<!-- <view class="cell" style="border:none" @tap="opencoupon">
<text class="text1">优 惠 券:</text>
<text class="text2" :style="{color: colors}">领取优惠券</text>
<image src="/static/images/home/right.png"></image>
</view> -->
</view>
<!-- 商品评价 -->
<view class="evaluate">
<p class="eva_title">
{{ commits.length > 0 ? '商品评价' : '暂无评价' }}<text>({{ commits.length }})</text>
<text class="seeAll" @click="seeAll" v-if="commits.length > 0">查看全部</text>
</p>
<view class="evaluate_box">
<view class="pingjia">
<view v-if="commits.length > 0">
<view class="pingjia_box" v-for="(row, index) in commits" :key="index">
<view class="box_top">
<image :src="row.headimg || defaultUserImg" mode="" class="head"></image>
<view class="right">
<p class="name">{{ row.userName }}</p>
<p class="p2">
<text class="text1">{{ row.createTime }}</text>
<text class="text2">{{ row.goodsName }}</text>
</p>
<p class="p3">
<image src="/static/images/home/stars.png" v-for="s in +row.qualityScore" :key="s" mode=""></image>
<image src="/static/images/home/star-no.png" v-for="(s,h) in (5-row.qualityScore)"
:key="h" mode=""></image>
</p>
</view>
</view>
<view class="tag_box" v-if="row.tags">
<view class="tags" v-for="(s,x) in row.tags" :key="x">{{s}}</view>
</view>
<view class="ping_neirong">{{ row.content }}</view>
<fileList v-model="row.fileList" :show-title="false" :show-colse-btn="false"></fileList>
<view class="huifu" v-if="row.reply && row.reply !== ''">商家回复:{{ row.reply }}</view>
</view>
</view>
</view>
</view>
</view>
<!-- 商品详情 -->
<view class="details">
<view class="details_title">
—— <text style="color: #666666;margin: 0 20upx;"> 商品详情 </text> ——
</view>
<view class="details_content">
<rich-text :nodes="htmlNode"></rich-text>
</view>
</view>
<!-- 底部操作栏 -->
<view class="operation">
<view class="home" @tap="toHome">
<text class="iconfont icon-shouye"></text>
</view>
<view class="cart" @tap="toCart">
<text class="iconfont icon-gouwuche1"></text>
</view>
<view class="btns" v-if="goods.ifSale !== 0">
<view class="addcart"
@tap="openSku">
加入购物车
</view>
<view class="dingjin" @tap="openSku">
立 即 购 买
</view>
</view>
</view>
<!-- 规格弹出层 -->
<sku :goods="goods" :showModal="showModal" :colors="colors" bottoms="0" @onhide="onhide"></sku>
<!-- 选择优惠券弹出层 -->
<view class="mask" catchtouchmove="preventTouchMove" v-if="couponshow == true" @tap="hidecoupon"></view>
<view class="coupon" :style="'bottom:' + (couponshow == true ? '0px':'')">
<scroll-view class="scrolls" scroll-y>
<coupon :colors="colors" :couponList="couponList" @onReceive="onReceive"></coupon>
</scroll-view>
</view>
<!-- 返回顶部按钮 -->
<view class="go_top" :style="'right: ' + (scrollShow == true ? '3%':'-200upx')">
<view class="ontop" @tap="goTop">
<image src="/static/images/home/TOP.png"></image>
</view>
</view>
<uni-popup ref="popup" type="center">
<view class="center_poter" style="margin: 0 auto;" v-if="shows">
<!-- #ifndef MP -->
<image class="close_btn" src="/static/images/goods/close.png" @click="hidePoster">
</image>
<!-- #endif -->
<!-- #ifdef MP -->
<cover-image class="close_btn" src="/static/images/goods/close.png" @click="hidePoster">
</cover-image>
<!-- #endif -->
<poster :posterData="goodsData"></poster>
</view>
</uni-popup>
<!-- 预览视频弹窗 -->
<view class="mask" v-if="showVideo == true" @touchmove.stop.prevent="ondefault"
@click="hideShow">
<view class="close">
<image src="/static/images/goods/close.png"></image>
</view>
</view>
<view class="previewvideo" v-if="showVideo == true">
<view class="videos">
<video class="nowvideos" id="nowVideo" v-if="showVideo == true"
:src="goods.videos" :autoplay="showVideo"
:show-center-play-btn="true" :show-mute-btn="true" :show-fullscreen-btn="false"></video>
</view>
</view>
<!-- 用来承载H5预览视频的 -->
<view style="position: absolute;top: -999upx;left: -999upx;">
<video ref="newVideo" id="newVideo"
:src="goods.videos"
:autoplay="showVideo"
:show-center-play-btn="false" :show-mute-btn="true" :show-fullscreen-btn="false"
@fullscreenchange="hideShow"></video>
</view>
<loading v-if="isShow == true"></loading>
</view>
</template>
<script>
var app = getApp();
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import navBar from "../../commponent/public/navBar";
import sku from "../../commponent/public/sku";
import coupon from "../../commponent/public/coupon";
import loading from "../../commponent/public/loading";
import poster from '../../commponent/goods/poster.vue'
import swipers from './swiper/swiper.vue'
import fileList from '@/pages/commponent/public/fileList.vue'
import {getGoodsDetails,getlocation, getToken, setGoodsHistory} from '@/utils/auth.js'
import { getGoodsById, addCart, getCommits } from '@/api';
import CONFIG from '@/config'
import { getFileList } from'@/utils/util.js'
export default {
data() {
return {
good:{}, //获取数据
colors: '',
shows: false,
statusBarHeight: app.globalData.statusHeight + 'px',
toBar: app.globalData.toBar+ 'px',
showdots: false,
swiperList: [],
isColl: false,
latitude: '',
longitude: '',
nowList: {},
goodsData: {
title: '',
skuSubTitle:'',
type: 1,
goods_id: 201,
money: 0,
number: 1,
hmoney: '',
img: '',
youhui: true,
baoyou: true,
status: 0, //商品过期状态 0正常 1已失效
stock: 600,
xiaoliang:'',//销量
videos: '',
imgList: [],
stallAddress:"社区团购模拟地址",//商家地址(先用获取地址渲染)
sku: [],
skuArr: []
},
showModal: false,
couponshow: false,
isshowVideo: true,
voice: false,
showVideo: false,
isShow: false,
couponList: [ //优惠券列表
{
money: 100,
reduce: 10,
date: '2020-02-09 2020-10-02',
id: 1,
status: 0,
condition: ['新人专享', '仅在支付时使用', '可与其他产品共享']
}, {
money: 100,
reduce: 20,
date: '2020-02-09 2020-10-02',
id: 2,
status: 0,
condition: ['新人专享']
}, {
money: 100,
reduce: 30,
date: '2020-02-09 2020-10-02',
id: 3,
status: 0,
condition: ['仅在支付时使用', '可与其他产品共享']
}, {
money: 100,
reduce: 40,
date: '2020-02-09 2020-10-02',
id: 4,
status: 0,
condition: ['新人专享', '可与其他产品共享']
}, {
money: 100,
reduce: 50,
date: '2020-02-09 2020-10-02',
id: 5,
status: 0,
condition: ['新人专享', '仅在支付时使用']
}
],
htmlNode: '',
// 商品详情
descriptionStr: '<div id="commDesc" hasdata="1" style="line-height: 2; transform-origin: 0px 0px; font-size: 30px;width:100%;"><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/99519/11/4669/136444/5de8bbdbE0cba049d/517f1fb75b582456.jpg!q70.dpg.webp" loaded="17"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/92267/13/4771/160442/5de8bbdbE50655175/7dd51e0b966aba15.jpg!q70.dpg.webp" loaded="16"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/93624/28/4672/131382/5de8bbdbE65d14e5d/81bc1227ec775788.jpg!q70.dpg.webp" loaded="15"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/97366/21/4817/101042/5de8bbdbE8854b673/7c4ce7faa45a418b.jpg!q70.dpg.webp" loaded="14"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/98311/21/4778/122770/5de8bbdcE13375754/f4324ca9294eef4c.jpg!q70.dpg.webp" loaded="13"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/103373/15/4747/118973/5de8bbdcE2058ee8e/d921d5f1a4aa5c89.jpg!q70.dpg.webp" loaded="12"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/88841/34/4711/84977/5de8bbdeE0b691b9a/e69796d32a63bbaa.jpg!q70.dpg.webp" loaded="11"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/95248/2/4771/99041/5de8bbdfE06b41b3b/3c4a2b1cb97a5262.jpg!q70.dpg.webp" loaded="10"></div>',
goodsEva: [ //评价列表
{
headimg: '/static/images/face.jpg',
nickname: '反转',
create_time: '2020-09-10 15:36',
goods_name: '测试规格1',
score: 5,
comment: '产品很不错,赞',
images: ['/static/images/goods/two.jpg', '/static/images/goods/one.jpg'],
reply: '感谢您的支持',
tags: ['价格合理', '味道好', '价格优惠', '态度好']
},
{
headimg: '/static/images/face.jpg',
nickname: '清风',
create_time: '2020-09-10 13:36',
goods_name: '测试规格2',
score: 4,
comment: '味道还不错~',
images: [],
reply: '',
tags: []
}
],
scrollShow: false,
defaultUserImg: '/static/images/face.jpg',
commits: [],
goodsId: 0,
goods: {
imgList: [],
_skus: [],
isSafe: 1
},
hasToken: !!getToken(),
themeObj: app.globalData.themeObj
};
},
components: {
navBar,
sku,
coupon,
loading,
poster,
uniPopup,
swipers,
fileList
},
props: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.colors = app.globalData.newColor
this.themeObj = app.globalData.themeObj
// #ifdef APP-PLUS
this.toBar = app.globalData.toBar + 25 + 'px'
// #endif
this.newVideo = uni.createVideoContext('newVideo');
this.goodsId = options.id
this.getGoodsById()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面滚动
*/
onPageScroll: function(e) {
if (e.scrollTop >= 400) {
this.scrollShow = true
} else {
this.scrollShow = false
}
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
return {
title: this.goods.goodsName,
path: '/pages/views/goods/goodsDetails?id=' + this.goods.id,
imageUrl: this.goods.url,
}
},
/**
* 用户点击右上角分享到朋友圈
*/
onShareTimeline: function() {
return {
title: this.goods.goodsName,
path: '/pages/views/goods/goodsDetails',
imageUrl: this.goods.url
}
},
methods: {
previewImg(url){ //预览图片
let arr = []
arr[0] = url
uni.previewImage({
urls:arr
})
},
getCommits(goods) {
let s = [
{
"rule": "eq",
"type": "string",
"dictCode": "",
"val": goods.id,
"field": "goodId"
},
// {
// "rule": "eq",
// "type": "string",
// "dictCode": "",
// "val": getUserInfo().id,
// "field": "goodId"
// }
]
const params = {
pageNo:1,
pageSize: 5,
superQueryParams: s,
superQueryMatchType: 'and',
"column": "createTime",
order: "desc",
}
params.superQueryParams = encodeURI(JSON.stringify(s))
getCommits(params).then(res => {
const list = res.result.records.map(v => {
v.fileList = getFileList(v.url)
return v
})
console.log(list)
this.commits = list
})
},
getGoodsById() {
uni.showLoading()
getGoodsById({ id: this.goodsId }).then(res => {
uni.hideLoading()
if (res.result) {
this.initGoodsData(res.result)
} else {
this.$toast('商品不存在')
setTimeout(() => {
uni.navigateBack()
}, 1000)
}
})
},
initGoodsData(goods) {
this.goods = goods
this.getCommits(goods)
if (goods.ifSale !== 1) {
this.$toast('该商品已下架')
// uni.navigateBack()
// return
}
this.goods.imgList = [this.goods.url]
this.setFrom(this.goods.url); //处理商品详情 富文本
if(this.goods.specs){
const specs = this.goods.specs.split('|')
this.goods._skus = [{
sku_id: this.goods.id,
skuname: '规格',
child: specs.map((v, index) => {
return {
tagname: v,
id: index + 1,
imgs: '',
money: this.goods.price
}
})
}]
}
setGoodsHistory(this.goods)
// this.getLocation(); //获取位置信息
// if(getlocation()){this.goodsData.stallAddress = getlocation().poiaddress}
},
getLocation() {
let that = this;
uni.getLocation({
type: 'wgs84',
geocode: true,
success: res => {
console.log('获取经纬度成功', res);
that.setData({
latitude: res.latitude,
longitude: res.longitude
});
},
fail: () => {
console.log('获取经纬度失败');
that.setData({
latitude: '',
longitude: ''
});
},
complete: () => { // 解析地址
}
});
},
setFrom(html) {
let _html = `<div> <img src="${html}" /> </div>`
//处理富文本 让图片居中适应
let newContent = _html.replace(/\<img/gi, '<img class="rich-img" ');
this.setData({
htmlNode: newContent
});
},
openPoster() { //生成海报
this.shows = false
uni.showLoading({
title: '海报绘制中..'
})
this.$refs.popup.open()
setTimeout(() => {
uni.hideLoading()
this.shows = true
}, 600)
},
hidePoster(){//关闭海报
this.$refs.popup.close()
},
setisColl() {
//收藏与取消收藏
let iscoll = !this.isColl;
this.setData({
isColl: iscoll
});
},
openMap() {
//打开地图
let that = this;
uni.openLocation({
latitude: 39.90,
longitude: 116.40,
success: e => {
}
});
},
nearAddress() {
if (this.longitude !== '') {
this.openMap();
} else {
const _this = this; // 处理拒绝再次打开调用设置
uni.getSetting({
success(res) {
if (res && res.authSetting && res.authSetting.hasOwnProperty('scope.userLocation')) {
uni.openSetting({
success() {
_this.getLocation();
}
});
}
}
});
}
},
setShowVideo(showVideo, isH5){ //操作视频
this.showVideo = showVideo
if(isH5 == true){
this.newVideo.play()
}
},
hideShow(){
this.showVideo = false
},
ondefault(){ //阻止事件 抛弃
},
onhide() {
this.showModal = false
},
openSku() {
if (this.goods.price === 0) {
this.$toast('请联系客服人员询价')
return
}
this.nowList = this.goodsData
this.showModal = true
},
opencoupon() {
this.couponshow = true
},
hidecoupon() {
this.couponshow = false
},
toHome() {
uni.switchTab({
url: '/pages/views/tabBar/category'
});
},
toCart() {
uni.switchTab({
url: '/pages/views/tabBar/cart'
});
},
goTop() { //返回顶部
uni.pageScrollTo({
scrollTop: 0
});
},
onReceive(item, index) { //领取优惠券
console.log(item, index)
if (item.status == 1) {
return
} else {
this.couponList[index].status = 1 //领取成功
this.$toast('领取成功')
}
},
seeAll() { //查看全部评论
uni.navigateTo({
url: '/pages/views/goods/goodsEvaluate?id=' + this.goods.id
})
}
}
};
</script>
<style scoped lang="scss">
@import "./goodsDetails.scss";
/deep/.rich-img {
width: 100%;
height: auto;
}
</style>