Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
ZF Sun
2025-10-27 15:55:29 +08:00
commit 6632080b83
513 changed files with 117442 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

465
components/goods-detail-view/detail.js Normal file
View File

@@ -0,0 +1,465 @@
// 商品详情业务
import {
Weixin
} from '@/common/js/wx-jssdk.js';
export default {
data() {
return {
skuId: 0,
goodsId: 0,
isIphoneX: false, //判断手机是否是iphoneX以上
whetherCollection: 0,
//是否开启预览，0：不开启，1：开启
preview: 0,
videoContext: '',
// 媒体,图片,视频
// 解决每个商品SKU图片数量不同时，无法切换到第一个，导致轮播图显示不出来
swiperInterval: 1,
swiperAutoplay: false,
swiperCurrent: 1,
switchMedia: 'img',
//评价
goodsEvaluate: [{
member_headimg: '',
member_name: '',
content: '',
images: [],
create_time: 0,
sku_name: ''
}],
evaluateConfig: {
evaluate_audit: 1,
evaluate_show: 0,
evaluate_status: 1
},
// 是否可分享到好物圈
goodsCircle: false,
service: null,
shareUrl: '', // 分享链接
source_member: 0, //分享人的id
isCommunity: false, //社群弹窗
poster: "-1", //海报
posterMsg: "", //海报错误信息
posterHeight: 0,
posterParams: {}, //海报所需参数
goodsRoute: '',
posterApi: '',
goodsAttrShow: false, // 商品属性是否展开
//门店列表
storeList: {
data: [],
page: 1,
page_size: 10
},
isShowStore: false,
latitude: null, // 纬度
longitude: null, // 经度
evaluateCount: 0, // 商品评论数量
deliveryType: null, // 配送方式
isVirtual: 0 //是否为虚拟商品
}
},
created() {
this.isIphoneX = this.$util.uniappIsIPhoneX();
if (this.location) {
this.latitude = this.location.latitude;
this.longitude = this.location.longitude;
} else {
this.$util.getLocation();
}
this.getStoreData();
},
watch: {
location: function (nVal) {
if (nVal) {
this.latitude = nVal.latitude;
this.longitude = nVal.longitude;
this.getStoreData();
}
}
},
methods: {
init(params) {
this.skuId = params.sku_id;
this.goodsId = params.goods_id;
this.preview = params.preview;
this.source_member = params.source_member;
this.whetherCollection = params.whetherCollection;
this.posterParams = params.posterParams;
this.shareUrl = params.shareUrl;
this.goodsRoute = params.goodsRoute;
this.posterApi = params.posterApi;
this.isVirtual = params.isVirtual;
this.deliveryType = params.deliveryType;
this.evaluateConfig = params.evaluateConfig;
if (this.evaluateConfig.evaluate_show == 1) {
//商品评论
this.getGoodsEvaluate(params.evaluateList);
this.evaluateCount = params.evaluateCount;
}
for (let k in this.deliveryType) {
if (k == 'store') {
this.isShowStore = true;
}
}
this.getService();
this.videoContext = uni.createVideoContext('goodsVideo');
// #ifdef MP-WEIXIN
this.goodsSyncToGoodsCircle();
// #endif
},
swiperChange(e) {
this.swiperCurrent = e.detail.current + 1;
},
//-------------------------------------服务-------------------------------------
openMerchantsServicePopup() {
this.$refs.merchantsServicePopup.open();
},
closeMerchantsServicePopup() {
this.$refs.merchantsServicePopup.close();
},
//-------------------------------------门店列表-------------------------------------
openStoreListPopup() {
this.$refs.storeListPopup.open();
},
closeStoreListPopup() {
this.$refs.storeListPopup.close();
},
getStoreData() {
//门店列表
let data = {
page: this.storeList.page,
page_size: this.storeList.page_size
};
if (this.latitude && this.longitude) {
data.latitude = this.latitude;
data.longitude = this.longitude;
}
this.$api.sendRequest({
url: '/api/store/page',
data: data,
success: res => {
if (this.storeList.page == 1) this.storeList.data == [];
if (res.code >= 0 && res.data) {
this.storeList.data = this.storeList.data.concat(res.data.list);
} else {
this.$util.showToast({
title: res.message
});
}
}
});
},
selectStore(item) {
this.$util.redirectTo('/pages_tool/store/detail', {
store_id: item.store_id
});
this.closeStoreListPopup();
},
//-------------------------------------属性-------------------------------------
switchGoodsAttr() {
this.goodsAttrShow = !this.goodsAttrShow;
},
//-------------------------------------评价-------------------------------------
//商品评论列表
getGoodsEvaluate(list) {
if (list) {
this.goodsEvaluate = list;
this.goodsEvaluate.forEach((item, index) => {
if (this.goodsEvaluate[index].images) this.goodsEvaluate[index].images = this.goodsEvaluate[index].images.split(",");
if (this.goodsEvaluate[index].is_anonymous == 1) this.goodsEvaluate[index].member_name = this.goodsEvaluate[index].member_name.replace(this.goodsEvaluate[index].member_name.substring(1, this.goodsEvaluate[index].member_name.length - 1), '***')
})
// if (this.goodsEvaluate.images) this.goodsEvaluate.images = this.goodsEvaluate.images.split(",");
// if (this.goodsEvaluate.is_anonymous == 1) this.goodsEvaluate.member_name = this.goodsEvaluate.member_name.replace(
// this.goodsEvaluate.member_name.substring(1, this.goodsEvaluate.member_name.length - 1), '***')
}
},
// 预览评价图片
previewEvaluate(index, img_index, field) {
var paths = [];
for (let i = 0; i < this.goodsEvaluate[index][field].length; i++) {
paths.push(this.$util.img(this.goodsEvaluate[index][field][i]));
}
uni.previewImage({
current: img_index,
urls: paths
});
},
//-------------------------------------关注-------------------------------------
async collection() {
if (this.preview) return; // 开启预览，禁止任何操作和跳转
if (this.storeToken) {
//未关注添加关注
if (this.whetherCollection == 0) {
let res = await this.$api.sendRequest({
url: "/api/goodscollect/add",
data: {
sku_id: this.skuId,
goods_id: this.goodsSkuDetail.goods_id,
sku_name: this.goodsSkuDetail.sku_name,
sku_price: this.goodsSkuDetail.show_price,
sku_image: this.goodsSkuDetail.sku_image
},
async: false,
});
var data = res.data;
if (data > 0) {
this.whetherCollection = 1;
}
} else {
//已关注取消关注
let res = await this.$api.sendRequest({
url: "/api/goodscollect/delete",
data: {
goods_id: this.goodsSkuDetail.goods_id
},
async: false,
});
var data = res.data;
if (data > 0) {
this.whetherCollection = 0;
}
}
return this.whetherCollection;
} else {
if (this.source_member) {
this.$refs.login.open(this.shareUrl + '&source_member=' + this.source_member);
} else {
this.$refs.login.open(this.shareUrl);
}
}
},
//-------------------------------------分享-------------------------------------
// 打开分享弹出层
openSharePopup() {
this.$refs.sharePopup.open();
},
// 关闭分享弹出层
closeSharePopup() {
this.$refs.sharePopup.close();
},
copyUrl() {
let text = this.$config.h5Domain + this.shareUrl;
if (this.memberInfo && this.memberInfo.member_id) text += '&source_member=' + this.memberInfo.member_id;
this.$util.copy(text, () => {
this.closeSharePopup();
});
},
//-------------------------------------海报-------------------------------------
// 打开海报弹出层
openPosterPopup() {
this.getGoodsPoster();
this.$refs.sharePopup.close();
},
// 关闭海报弹出层
closePosterPopup() {
this.$refs.posterPopup.close();
this.poster = ''
},
//生成海报
getGoodsPoster() {
uni.showLoading({
'title': '海报生成中...'
})
//活动海报信息
if (this.memberInfo && this.memberInfo.member_id) this.posterParams.source_member = this.memberInfo.member_id;
this.$api.sendRequest({
url: this.posterApi,
data: {
page: this.goodsRoute,
qrcode_param: JSON.stringify(this.posterParams)
},
success: res => {
if (res.code == 0) {
this.$refs.posterPopup.open();
this.poster = res.data.path + "?time=" + new Date().getTime();
} else {
this.posterMsg = res.message;
this.$util.showToast({
title: res.message
})
}
uni.hideLoading();
},
fail: err => {
uni.hideLoading();
}
});
},
// 预览图片
previewMedia(index) {
var paths = [];
for (let i = 0; i < this.goodsSkuDetail.sku_images.length; i++) {
paths.push(this.$util.img(this.goodsSkuDetail.sku_images[i], {
size: 'big'
}));
}
uni.previewImage({
current: index,
urls: paths,
// longPressActions: {
// itemList: ['发送给朋友', '保存图片', '关注'],
// success: function(data) {
// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
// },
// fail: function(err) {
// console.log(err.errMsg);
// }
// }
});
},
swiperImageError(index) {
this.goodsSkuDetail.sku_images[index] = this.$util.getDefaultImage().goods;
this.$forceUpdate();
},
// #ifdef MP || APP-PLUS
//小程序中保存海报
saveGoodsPoster() {
let url = this.$util.img(this.poster);
uni.downloadFile({
url: url,
success: (res) => {
if (res.errMsg == "downloadFile:ok") {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
this.$util.showToast({
title: "保存成功"
});
},
fail: (err) => {
this.$util.showToast({
title: "保存失败，请稍后重试"
});
}
});
}
},
fail: (err) => {
this.$util.showToast({
title: "保存失败，请稍后重试"
});
}
});
},
// #endif
//售后保障查询
getService() {
this.$api.sendRequest({
url: '/api/goods/aftersale',
success: res => {
if (res.code == 0 && res.data) {
this.service = res.data;
}
}
});
},
// #ifdef MP-WEIXIN
/**
* 将商品同步到微信圈子
*/
goodsSyncToGoodsCircle() {
this.$api.sendRequest({
url: '/goodscircle/api/goods/sync',
data: {
goods_id: this.goodsSkuDetail.goods_id
},
success: res => {
if (res.code == 0) {
this.goodsCircle = true;
}
}
})
},
/**
* 将商品推荐到微信圈子
*/
openBusinessView() {
if (wx.openBusinessView) {
wx.openBusinessView({
businessType: 'friendGoodsRecommend',
extraData: {
product: {
item_code: this.goodsSkuDetail.goods_id,
title: this.goodsSkuDetail.sku_name,
image_list: this.goodsSkuDetail.sku_images.map((ele) => {
return this.$util.img(ele);
})
}
},
success: function (res) {
console.log('success', res);
},
fail: function (res) {
console.log('fail', res);
}
})
}
},
// #endif
toEvaluateDetail(id) {
this.$util.redirectTo('/pages_tool/goods/evaluate', {
goods_id: id
});
},
showImg(e) {
//拿到图片的路径里面的内容放在我们数组中
let contentimg = e.target.dataset.nodes;
let arrImg = [];
for (var i = 0; i < contentimg.length; i++) {
var img = contentimg[i].children;
if (Array.isArray(img)) {
for (var j = 0; j < img.length; j++) {
if (img[j].attrs && img[j].name == "img") {
if (img[j].attrs.src) {
arrImg.push(img[j].attrs.src)
}
}
}
}
}
//最后一步就是把我们的所有图片放在预览的api中就可以了
uni.previewImage({
current: arrImg,
urls: arrImg,
})
},
//-------------------------------------社群-------------------------------------
//添加福利群
onCommunity() {
this.isCommunity = true
},
onCloseCommunity() {
this.isCommunity = false
},
}
}

455
components/goods-detail-view/goods-detail-view.vue Normal file
View File

@@ -0,0 +1,455 @@
<template>
<view>
<view scroll-y="true" class="goods-detail" :class="isIphoneX ? 'active' : ''">
<view class="goods-container">
<!-- 弹幕 -->
<pengpai-fadein-out v-if="goodsSkuDetail.barrage_show && goodsSkuDetail.barrageData" ref="pengpai" :duration="1600" :wait="1900" :top="200" :left="0" :radius="60" :loop="true" :info="goodsSkuDetail.barrageData"/>
<!-- 商品媒体信息 -->
<view class="goods-media" :style="{height: goodsSkuDetail.swiperHeight}">
<!-- 商品图片 -->
<view class="goods-img" :class="{ show: switchMedia == 'img' }">
<swiper class="swiper" @change="swiperChange" :interval="swiperInterval" :autoplay="swiperAutoplay" autoplay="true" interval="4000" circular="true">
<swiper-item v-for="(item, index) in goodsSkuDetail.sku_images" :key="index" :item-id="'goods_id_' + index">
<view class="item" @click="previewMedia(index)">
<image :src="$util.img(item, { size: 'big' })" @error="swiperImageError(index)" mode="aspectFit" />
</view>
</swiper-item>
</swiper>
<view class="img-indicator-dots">
<text>{{ swiperCurrent }}</text>
<text v-if="goodsSkuDetail.sku_images">/{{ goodsSkuDetail.sku_images.length }}</text>
</view>
</view>
<!-- 商品视频 -->
<view class="goods-video" :class="{ show: switchMedia == 'video' }">
<video id="goodsVideo" :src="$util.img(goodsSkuDetail.video_url)" :poster="$util.img(goodsSkuDetail.sku_image, { size: 'big' })" objectFit="cover"></video>
</view>
<!-- 切换视频、图片 -->
<view class="media-mode" v-if="goodsSkuDetail.video_url != ''">
<text :class="{ 'color-base-bg': switchMedia == 'video' }" @click="switchMedia = 'video'">{{ $lang('video') }}</text>
<text :class="{ 'color-base-bg': switchMedia == 'img' }" @click="(switchMedia = 'img'), videoContext.pause()">{{ $lang('image') }}</text>
</view>
</view>
<!-- 价格区域 -->
<view class="goods-gression">
<slot name="price"></slot>
</view>
<view class="newdetail margin-bottom" v-if="goodsSkuDetail.isinformation == 0">
<!-- 入口区域 -->
<slot name="entrance"></slot>
<!-- 配送 -->
<!-- @click="$refs.deliveryType.open()" -->
<view class="item delivery-type" v-if="goodsSkuDetail.is_virtual == 0" >
<view class="label">{{$lang('send')}}</view>
<block v-if="deliveryType">
<view class="box">
<block v-for="(item, index) in deliveryType" :key="index">
<text v-if="goodsSkuDetail.support_trade_type.indexOf(index) != -1">{{$lang('express')}}</text>
<!-- {{ item.name }} -->
</block>
</view>
<text class="iconfont icon-right"></text>
</block>
<block v-else>
<view class="box">未配置</view>
</block>
</view>
<!-- 门店 -->
<!-- <view class="item store-wrap" @click="openStoreListPopup()" v-if="addonIsExist.store && globalStoreInfo && isShowStore">
<view class="label">门店</view>
<view class="list-wrap">
<view class="name-wrap">
<text class="icondiy icon-system-shop"></text>
<text class="name">{{globalStoreInfo.store_name}}</text>
</view>
<view class="other-wrap">
<text class="distance" v-if="parseFloat(globalStoreInfo.distance)">距离{{ globalStoreInfo.distance > 1 ? globalStoreInfo.distance + 'km' : globalStoreInfo.distance * 1000 + 'm' }}</text>
<text class="decorate" v-if="parseFloat(globalStoreInfo.distance)">.</text>
<view class="address">{{ globalStoreInfo.full_address + globalStoreInfo.address }}
</view>
</view>
</view>
<text class="iconfont icon-right"></text>
</view> -->
<view class="item service" @click="openMerchantsServicePopup()" v-if="goodsSkuDetail.goods_service.length">
<view class="label">服务</view>
<view class="list-wrap">
<view class="item-wrap" v-for="(item, index) in goodsSkuDetail.goods_service" :key="index" v-if="index < 3">
<view class="item-wrap-box">
<view class="item-wrap-icon">
<text class="iconfont icon-dui" v-if="!item.icon || (!item.icon.imageUrl && !item.icon.icon)"></text>
<image class="icon-img" v-else-if="item.icon.iconType == 'img'" :src=" $util.img(item.icon.imageUrl)" />
<diy-icon class="icon-box" v-else-if="item.icon.iconType == 'icon'" :icon="item.icon.icon" :value="item.icon.style ? item.icon.style : null"></diy-icon>
</view>
<text>{{ item.service_name }}</text>
</view>
</view>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
<!--多规格区域-->
<view class="newdetail margin-bottom" v-if="goodsSkuDetail.sku_spec_format">
<!-- 入口区域 -->
<slot name="skuspec"></slot>
</view>
<view class="newdetail margin-bottom" v-if="goodsSkuDetail.merch_id > 0">
<!-- 入口区域 -->
<slot name="entrance"></slot>
<!-- 商家 -->
<view class="item store-wrap" @click="$util.redirectTo('/pages_promotion/merch/detail', { merch_id: goodsSkuDetail.merch_id })">
<view class="list-wrap" style="display: flex;">
<view class="name-wrap">
<image :src="$util.img(goodsSkuDetail.merchinfo.merch_image)" mode="widthFix" style="width: 100rpx;height: 100rpx;border-radius: 50rpx;"></image>
</view>
<view class="other-wrap">
<view class="address" style="margin-left: 30rpx;">
<view>{{goodsSkuDetail.merchinfo.merch_name}}</view>
<view style="font-size: 24rpx;color: #888;">官方认证商家，值得信赖！</view>
</view>
</view>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
<!-- 配送方式 -->
<view @touchmove.prevent.stop>
<uni-popup ref="deliveryType" type="bottom">
<view class="deliverytype-popup-layer popup-layer">
<view class="head-wrap" @click="$refs.deliveryType.close()">
<text>配送</text>
<text class="iconfont icon-close"></text>
</view>
<scroll-view scroll-y class="type-body">
<block v-for="(item, index) in deliveryType" :key="index">
<view class="type-item" :class="{ 'not-support': goodsSkuDetail.support_trade_type.indexOf(index) == -1 }">
<text class="iconfont" :class="item.icon"></text>
<view class="content">
<view class="title">{{ item.name }}</view>
<view class="desc">{{ item.desc }}</view>
</view>
</view>
</block>
</scroll-view>
</view>
</uni-popup>
</view>
<!-- 商品服务 -->
<view @touchmove.prevent.stop>
<uni-popup ref="merchantsServicePopup" type="bottom">
<view class="goods-merchants-service-popup-layer popup-layer">
<view class="head-wrap" @click="closeMerchantsServicePopup()">
<text>商品服务</text>
<text class="iconfont icon-close"></text>
</view>
<scroll-view scroll-y>
<view class="item" :class="{ 'empty-desc': !item.desc }" v-for="(item, index) in goodsSkuDetail.goods_service" :key="index">
<view class="item-icon" :class="{'empty-desc':!item.desc}">
<text class="iconfont icon-dui color-base-text" v-if="!item.icon || (!item.icon.imageUrl && !item.icon.icon)"></text>
<image class="icon-img" v-else-if="item.icon.iconType == 'img'" :src=" $util.img(item.icon.imageUrl)" />
<diy-icon class="icon-box" v-else-if="item.icon.iconType == 'icon'" :icon="item.icon.icon" :value="item.icon.style ? item.icon.style : null"></diy-icon>
</view>
<view class="info-wrap">
<text class="title">{{ item.service_name }}</text>
<text class="describe" v-if="item.desc">{{ item.desc }}</text>
</view>
</view>
</scroll-view>
<view class="button-box">
<button type="primary" @click="closeMerchantsServicePopup()">确定</button>
</view>
</view>
</uni-popup>
</view>
<!-- 门店列表 -->
<view @touchmove.prevent.stop>
<uni-popup ref="storeListPopup" type="bottom">
<view class="goods-merchants-service-popup-layer popup-layer store-list-wrap">
<view class="head-wrap" @click="closeStoreListPopup()">
<text>门店列表</text>
<text class="iconfont icon-close"></text>
</view>
<scroll-view scroll-y>
<view class="store-list-content">
<view class="list-item" v-for="(item, index) in storeList.data" :key="index" @click="selectStore(item)">
<view class="item-box">
<view class="item-image">
<image :src="$util.img(item.store_image)" v-if="item.store_image"/>
<image :src="$util.getDefaultImage().store" v-else/>
</view>
<view class="item-info">
<view class="item-title">
<text class="title">{{ item.store_name }}</text>
<text class="distance color-base-text" v-if="item.distance">
距离{{ item.distance > 1 ? item.distance + 'km' : item.distance * 1000 + 'm' }}
</text>
</view>
<view class="item-time" v-if="item.open_date">营业时间：{{ item.open_date }}
</view>
<view class="item-address">{{ item.full_address + item.address }}</view>
</view>
<view class="item-right"><text class="iconfont icon-right"></text></view>
</view>
</view>
</view>
</scroll-view>
</view>
</uni-popup>
</view>
<!-- 业务区域 -->
<slot name="business"></slot>
<view class="detail-community" v-if="goodsSkuDetail.qr_data && goodsSkuDetail.qr_data.qr_state == 1">
<view class="community-box">
<image :src="$util.img('public/uniapp/goods/detail_erweiImage.png')" mode="aspectFill"></image>
<view class="community-content">
<view class="community-title">{{ goodsSkuDetail.qr_data.qr_name }}</view>
<view class="community-txt">{{ goodsSkuDetail.qr_data.community_describe }}</view>
</view>
</view>
<view class="community-btn" @click="onCommunity()">添加</view>
</view>
<!-- 促销 -->
<!-- <view class="community-model" @touchmove.prevent.stop @click.stop="onCloseCommunity()" v-show="isCommunity">
<view class="community-model-content" @click.stop>
<view class="community-model-content-radius">
<view>添加社群</view>
</view>
<view class="community-model-content-draw" v-if="goodsSkuDetail.qr_data && goodsSkuDetail.qr_data.qr_img">
<image :src="goodsSkuDetail.qr_data.qr_img != '' && goodsSkuDetail.qr_data.qr_state == 1 ? $util.img(goodsSkuDetail.qr_data.qr_img) : $util.img('public/uniapp/goods/detail_erweiImage.png') " mode="aspectFill" show-menu-by-longpress="true"/>
</view>
<view class="community-model-content-text">长按识别二维码，添加社群</view>
</view>
<view class="community-model-close" @click.stop="onCloseCommunity()">
<text class="iconfont icon-close"></text>
</view>
</view> -->
<!-- 参与流程 -->
<slot name="articipation"></slot>
<!-- 商品评价 -->
<view class="group-wrap" v-if="evaluateConfig.evaluate_show == 1 && goodsSkuDetail.isinformation == 0" style="display: none;">
<view class="goods-evaluate" @click="toEvaluateDetail(goodsSkuDetail.goods_id)">
<view class="tit">
<!-- <view class="tit" :class="{ active: goodsEvaluate.content }"> -->
<view>
<text class="color-title font-size-base">
评价
<text class="font-size-base">({{ evaluateCount }})</text>
</text>
<text class="evaluate-item-empty" v-if="!evaluateCount">暂无评价</text>
<view class="evaluate-item-empty" v-else>
<text class="font-size-tag">查看全部</text>
<text class="iconfont icon-right font-size-tag"></text>
</view>
</view>
</view>
<view class="evaluate-item" v-for="(item, index) in goodsEvaluate" :key="index"
v-if="item.content">
<view class="evaluator">
<view class="evaluator-info">
<view class="evaluator-face">
<image v-if="item.member_headimg" :src="$util.img(item.member_headimg)" @error="item.member_headimg = $util.getDefaultImage().head" mode="aspectFill" />
<image v-else :src="$util.getDefaultImage().head" @error="item.member_headimg = $util.getDefaultImage().head" mode="aspectFill" />
</view>
<view class="evaluator-name-wrap">
<text class="evaluator-name using-hidden" v-if="item.member_name.length > 2 && item.is_anonymous == 1">
{{ item.member_name[0] }}***{{ item.member_name[item.member_name.length - 1] }}
</text>
<text class="evaluator-name using-hidden" v-else>{{ item.member_name }}</text>
<view v-if="item.scores" class="evaluator-xing">
<xiaoStarComponent :starCount="item.scores * 2"></xiaoStarComponent>
</view>
</view>
</view>
<text class="time color-tip">{{ $util.timeStampTurnTime(item.create_time) }}</text>
</view>
<view class="cont margin-top">{{ item.content }}</view>
<scroll-view scroll-x="true">
<view class="evaluate-img" v-if="item.images">
<view class="img-box" v-for="(img, img_index) in item.images" :key="img_index" @click="previewEvaluate(index, img_index, 'images')">
<image :src="$util.img(img)" mode="aspectFill" />
</view>
</view>
</scroll-view>
</view>
</view>
</view>
<view class="goods-attr" v-if="goodsSkuDetail.goods_attr_format && goodsSkuDetail.goods_attr_format.length > 0">
<view class="title">规格属性</view>
<view class="attr-wrap">
<block v-for="(item, index) in goodsSkuDetail.goods_attr_format" :key="index">
<view class="item" v-if="goodsAttrShow || (!goodsAttrShow && index < 4)">
<text class="attr-name">{{ item.attr_name }}</text>
<text class="value-name">{{ item.attr_value_name }}</text>
</view>
</block>
<view class="attr-action" v-if="goodsSkuDetail.goods_attr_format.length > 4" @click="switchGoodsAttr">
<block v-if="!goodsAttrShow">
展开<text class="iconfont icon-iconangledown"></text>
</block>
<block v-else>
收起<text class="iconfont icon-iconangledown-copy"></text>
</block>
</view>
</view>
</view>
<!-- 详情 -->
<view class="goods-detail-tab">
<view class="detail-tab">
<view class="tab-item">{{$lang('details')}}</view>
</view>
<view class="detail-content active">
<view class="detail-content-item">
<view class="goods-details" v-if="goodsSkuDetail.goods_content">
<!-- <rich-text :nodes="goodsSkuDetail.goods_content" @click="showImg($event)" :data-nodes="goodsSkuDetail.goods_content"></rich-text> -->
<!-- {{goodsSkuDetail.goods_content}} -->
<mp-html :content="goodsSkuDetail.goods_content" />
<!-- :loading="loading" @preview="preview" @navigate="navigate" -->
</view>
<view class="goods-details active" v-else></view>
<view class="goods-details" v-if="service && service.is_display == 1 && service.content">
<rich-text :nodes="service.content" @click="showImg($event)" :data-nodes="service.content"></rich-text>
</view>
</view>
</view>
</view>
<!-- 商品推荐 -->
<ns-goods-recommend ref="goodrecommend" route="goods_detail"></ns-goods-recommend>
<ns-copyright></ns-copyright>
<!-- 海报 -->
<view @touchmove.prevent.stop class="poster-layer">
<uni-popup ref="posterPopup" type="center">
<template v-if="poster != '-1'">
<view class="poster-wrap">
<view class="image-wrap">
<image :src="$util.img(poster)" :show-menu-by-longpress="true" mode="widthFix" />
<view class="close iconfont icon-close" @click="closePosterPopup()"></view>
</view>
<!-- #ifdef MP || APP-PLUS -->
<view class="save-btn" @click="saveGoodsPoster()">保存图片</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="save-btn">长按图片进行保存</view>
<!-- #endif -->
</view>
</template>
</uni-popup>
</view>
<!-- 分享弹窗 -->
<view @touchmove.prevent.stop>
<uni-popup ref="sharePopup" type="bottom" class="share-popup">
<view>
<view class="share-title">分享</view>
<view class="share-content">
<!-- #ifdef MP -->
<view class="share-box">
<button class="share-btn" :plain="true" open-type="share">
<view class="iconfont icon-share-friend"></view>
<text>分享给好友</text>
</button>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="share-box" v-if="goodsCircle">
<button class="share-btn" :plain="true" @click="openBusinessView">
<view class="iconfont icon-haowuquan"></view>
<text>分享到好物圈</text>
</button>
</view>
<!-- #endif -->
<view class="share-box" @click="openPosterPopup">
<button class="share-btn" :plain="true">
<view class="iconfont icon-pengyouquan"></view>
<text>生成分享海报</text>
</button>
</view>
<!-- #ifdef H5 -->
<view class="share-box" @click="copyUrl">
<button class="share-btn" :plain="true">
<view class="iconfont icon-fuzhilianjie"></view>
<text>复制链接</text>
</button>
</view>
<!-- #endif -->
</view>
<view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
</view>
</uni-popup>
</view>
<slot name="fixedbtn"></slot>
</view>
</view>
<!-- 操作区域 -->
<slot name="action"></slot>
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
<ns-login ref="login"></ns-login>
</view>
</template>
<script>
// 商品详情视图
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue';
import pengpaiFadeinOut from '@/components/pengpai-fadein-out/pengpai-fadein-out.vue';
import xiaoStarComponent from '@/components/xiao-star-component/xiao-star-component.vue';
import scroll from '@/common/js/scroll-view.js';
import toTop from '@/components/toTop/toTop.vue';
import detail from './detail.js';
export default {
name: 'goods-detail-view',
props: {
goodsSkuDetail: {
type: Object,
default: () => {
return {};
}
}
},
components: {
uniPopup,
nsGoodsRecommend,
pengpaiFadeinOut,
toTop,
xiaoStarComponent
},
mixins: [scroll, detail]
};
</script>
<style lang="scss">
@import '@/common/css/goods_detail.scss';
</style>
<style scoped></style>