<template>
|
<view class="video-container">
|
<swiper class="video-swiper" :current="currentIndex" @change="onSwiperChange"
|
easing-function="linear">
|
<swiper-item v-for="(item, index) in goodsList" :key="item.updateKey"
|
@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
|
|
<div class="main-page">
|
<!-- #ifdef APP-PLUS -->
|
<view class="status_bar"></view>
|
<!-- #endif -->
|
<!-- 仅h5有效 打开App -->
|
|
<!-- 分享 -->
|
<shares v-if="enableShare && goodsDetail.id" :skuId="item.id" :goodsId="item.goodsId" :link="'/pages/product/goods?id=' +
|
item.id +
|
'&goodsId=' +
|
item.goodsId
|
" :thumbnail="goodsDetail.thumbnail" :goodsName="goodsDetail.goodsName" type="goods"
|
@close="enableShare = false" />
|
<popups v-model="popupsSwitch" @tapPopup="handleNavbarList" :popData="navbarListData"
|
:x="navbarListX" :y="navbarListY" placement="top-start" />
|
|
<view class="product-container" :style="{ height: productRefHeight }" ref="productRef"
|
id="productRef">
|
<scroll-view scroll-anchoring enableBackToTop="true" scroll-with-animation scroll-y
|
class="scroll-page" :scroll-top="tabScrollTop" @scroll="pageScroll">
|
<view>
|
<!-- 轮播图 -->
|
|
<GoodsSwiper id="main1" :res="imgList" :video="goodsDetail.goodsVideo" />
|
|
<!-- 促销活动条 -->
|
<PromotionAssembleLayout v-if="PromotionList" :detail="goodsDetail"
|
:res="PromotionList" />
|
|
<view class="card-box top-radius-0" id="main2">
|
<!-- 活动不显示价钱 -->
|
<view v-if="isSeckill || isGroup" class="desc-bold -goods-msg">
|
<view class="-goods-flex">
|
<view class="desc-bold">
|
{{ goodsDetail.goodsName || "" }}
|
</view>
|
<view class="favorite" @click="clickFavorite(goodsDetail.id)">
|
<u-icon size="30" :color="favorite ? '#f2270c' : '#262626'"
|
:name="favorite ? 'heart-fill' : 'heart'">
|
</u-icon>
|
<view :style="{ color: favorite ? '#f2270c' : '#262626' }">{{
|
favorite ? "已收藏" : "收藏"
|
}}</view>
|
</view>
|
</view>
|
<!-- 商品描述 -->
|
<view class="-goods-desc">
|
{{ goodsDetail.sellingPoint || "" }}
|
</view>
|
</view>
|
<view v-else class="-goods-msg">
|
<!-- 没有拼团，秒杀等活动的情况下 -->
|
<view>
|
<view class="-goods-flex">
|
<!-- 如果有积分显示积分 -->
|
<view class="-goods-price" v-if="goodsDetail.price != undefined">
|
|
<span>
|
<span v-if="wholesaleList.length">
|
<span>¥</span><span class="price">{{
|
$options.filters.goodsFormatPrice(wholesaleList[wholesaleList.length
|
- 1].price)[0]
|
}}</span>.{{
|
$options.filters.goodsFormatPrice(wholesaleList[wholesaleList.length
|
- 1].price)[1]
|
}}
|
~
|
<span>¥</span><span class="price">{{
|
$options.filters.goodsFormatPrice(wholesaleList[0].price)[0]
|
}}</span>.{{
|
$options.filters.goodsFormatPrice(wholesaleList[0].price)[1]
|
}}
|
</span>
|
<span v-else>
|
<span>¥</span><span class="price">{{
|
$options.filters.goodsFormatPrice(goodsDetail.price)[0]
|
}}</span>.{{
|
$options.filters.goodsFormatPrice(goodsDetail.price)[1] }}
|
</span>
|
</span>
|
</view>
|
<view class="-goods-price" v-else>
|
<div v-if="takeDownFromSale" class="price down-goods">
|
暂无报价
|
</div>
|
<span v-else>
|
¥<span class="price">0 </span>.00
|
</span>
|
</view>
|
|
<view class="icons share" @click="shareChange()">
|
<u-icon size="30" name="share-fill"></u-icon>
|
<view>分享</view>
|
</view>
|
<view class="icons" @click="clickFavorite(goodsDetail.id)">
|
<u-icon size="30" :color="favorite ? '#f2270c' : '#262626'"
|
:name="favorite ? 'heart-fill' : 'heart'"></u-icon>
|
<view :style="{ color: favorite ? '#f2270c' : '#262626' }">{{
|
favorite ? "已收藏" : "收藏"
|
}}</view>
|
</view>
|
</view>
|
<view class="-goods-name desc-bold">
|
{{ goodsDetail.goodsName || "" }}
|
</view>
|
<view class="-goods-desc">
|
{{ goodsDetail.sellingPoint || "" }}
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="card-box">
|
<view class="card-flex" @click="shutMask(1)">
|
<view class="card-title"> 促销 </view>
|
<view class="card-content">
|
<span v-if="PromotionList && emptyPromotion()">暂无促销信息</span>
|
<PromotionLayout v-else @shutMasks="shutMask" :res="PromotionList" />
|
</view>
|
<view class="card-bottom">
|
<u-icon name="more-dot-fill"></u-icon>
|
</view>
|
</view>
|
</view>
|
|
<!-- 拼团用户列表 -->
|
<PromotionAssembleListLayout v-if="isGroup" @to-assemble-buy-now="toAssembleBuyNow"
|
:res="PromotionList" />
|
|
<!-- 配置地址 如果是虚拟产品的时候不展示 -->
|
<view class="card-box" v-if="goodsDetail.goodsType != 'VIRTUAL_GOODS'">
|
<view class="card-flex" @click="shutMask(4)">
|
<view class="card-title"> 可选规格 </view>
|
<view class="card-content">
|
<span v-if="selectedGoods.spec">{{ selectedGoods.spec.specName }}-{{
|
selectedGoods.spec.specValue
|
}}</span>
|
<span v-else>默认</span>
|
</view>
|
<view class="card-bottom">
|
<u-icon name="more-dot-fill"></u-icon>
|
</view>
|
</view>
|
<view class="card-flex" @click="shutMask(3)">
|
<view class="card-title"> 送至</view>
|
<view class="card-content">
|
<span v-if="delivery">{{
|
delivery.consigneeAddressPath | clearStrComma
|
}}</span>
|
<span v-else>暂无地址信息</span>
|
</view>
|
<view class="card-bottom">
|
<u-icon name="more-dot-fill"></u-icon>
|
</view>
|
</view>
|
</view>
|
|
<!-- 评价 -->
|
<Evaluation id="main5" :goodsDetail="goodsDetail" />
|
|
<!-- 店铺推荐 -->
|
<storeLayout v-if="false" id="main7" :storeDetail="storeDetail"
|
:goodsDetail="goodsDetail" :res="recommendList" />
|
|
<!-- 宝贝详情 -->
|
<GoodsIntro id="main9" :res="goodsDetail" :goodsParams="goodsParams"
|
:goodsId="goodsDetail.goodsId" v-if="goodsDetail.id" />
|
|
<!-- 宝贝推荐 -->
|
<GoodsRecommend id="main11" :res="likeGoodsList" v-if="false" />
|
</view>
|
</scroll-view>
|
|
|
<view class="page-bottom mp-iphonex-bottom" id="pageBottom">
|
<view class="icon-btn">
|
<view class="icon-btn-item" @click="navigateToStore(goodsDetail.storeId)">
|
<u-icon size="34" class="red" name="home-fill"></u-icon>
|
<view class="red icon-btn-name">店铺</view>
|
</view>
|
<view class="icon-btn-item" @click="linkMsgDetail()">
|
<u-icon size="34" name="kefu-ermai"></u-icon>
|
<view class="icon-btn-name">客服</view>
|
</view>
|
<view class="icon-btn-item" @click="reluchToCart()">
|
<u-icon size="34" name="storeping-cart"></u-icon>
|
<view class="icon-btn-name">购物车</view>
|
<view v-if="nums && nums > 0" class="num-icon">{{ nums }}</view>
|
</view>
|
</view>
|
<!-- 下架展示 -->
|
<!-- <div class="detail-btn" v-if="takeDownFromSale">
|
<view class="to-store-car to-store-btn" @click="reStartTakeDownSale">
|
查看类似商品</view>
|
</div> -->
|
<!-- 正常结算页面 -->
|
<view class="detail-btn" v-if="!isGroup && !takeDownFromSale">
|
<view class="to-store-car to-store-btn" v-if="goodsDetail.goodsType != 'VIRTUAL_GOODS'"
|
@click="shutMask(4)">
|
加入购物车</view>
|
<view class="to-buy to-store-btn" @click="shutMask(4, 'buy')">立即购买</view>
|
<view class="to-store-car to-store-btn" v-if="startTimer">暂未开始</view>
|
</view>
|
<!-- 拼团结算 -->
|
<view class="detail-btn" v-else-if="isGroup">
|
<view class="to-store-car pt-buy to-store-btn" @click="shutMask(4, 'buy')">
|
<view>￥{{ goodsDetail.price | unitPrice }}</view>
|
<view>单独购买</view>
|
</view>
|
<view class="to-buy pt-buy to-store-btn" @click="toAssembleBuyNow">
|
<view>￥{{ goodsDetail.promotionPrice | unitPrice }}</view>
|
<view>拼团价格</view>
|
</view>
|
</view>
|
</view>
|
<!-- 规格-模态层弹窗 -->
|
<view class="spec">
|
<!-- 促销弹窗 -->
|
<u-popup v-model="promotionShow" :height="setup.height" :mode="setup.mode"
|
:border-radius="setup.radius" @close="promotionShow = false"
|
:mask-close-able="setup.close" closeable>
|
<view class="header-title">优惠</view>
|
<view class="cuxiao">
|
<scroll-view class="scroll_mask" :scroll-y="true">
|
<view class="con-cuxiao">
|
<view class="cuxiao-title">促销活动</view>
|
<PromotionDetailsLayout :res="PromotionList" />
|
</view>
|
<view class="con-cuxiao coupons">
|
<view class="cuxiao-title">可领优惠券</view>
|
<PromotionCoupon @getCoupon="getCoupon" :res="PromotionList" />
|
</view>
|
</scroll-view>
|
</view>
|
</u-popup>
|
|
<!-- 配送地址弹窗 -->
|
<popupAddress @closeAddress="closePopupAddress" @deliveryData="deliveryFun"
|
v-if="goodsDetail.id" :goodsId="goodsDetail.id" :addressFlag="addressFlag" />
|
|
<!-- 商品规格 商品详情，以及默认参与活动的id-->
|
<popupGoods :addr="delivery" ref="popupGoods" @changed="changedGoods"
|
@closeBuy="closePopupBuy" @queryCart="cartCount()" :goodsDetail="goodsDetail"
|
:goodsSpec="goodsSpec" :isGroup="isGroup" :id="productId" v-if="goodsDetail.id"
|
:pointDetail="pointDetail" :wholesaleList="wholesaleList" @handleClickSku="selectSku"
|
:buyMask="buyMask" />
|
|
|
<!-- 下架框 -->
|
<takeDownFormSaleGoods ref="takeDownSale" v-if="takeDownFromSale" />
|
</view>
|
</view>
|
</div>
|
</swiper-item>
|
</swiper>
|
</view>
|
</template>
|
<script>
|
import '@/components/uview-components/uview-ui';
|
|
|
/************接口API***************/
|
import { getGoods, getGoodsList, getMpScene, getGoodsDistribution } from "@/api/goods.js";
|
import * as API_trade from "@/api/trade.js";
|
import * as API_Members from "@/api/members.js";
|
import * as API_store from "@/api/store.js";
|
import { getIMDetail } from "@/api/common";
|
import { modelNavigateTo } from "@/pages/tabbar/home/template/tpl.js";
|
/************请求存储***************/
|
import storage from "@/utils/storage.js";
|
|
/************组件***************/
|
import PromotionLayout from "@/pages/product/product/promotion/-promotion.vue"; //促销组件
|
import PromotionDetailsLayout from "@/pages/product/product/promotion/-promotion-details.vue"; //促销活动详情
|
import PromotionAssembleLayout from "@/pages/product/product/promotion/-promotion-assemble-promotions.vue"; //促销活动条
|
import PromotionAssembleListLayout from "@/pages/product/product/promotion/-promotion-assemble-list.vue"; //拼团用户列表
|
import PromotionCoupon from "@/pages/product/product/promotion/-promotion-coupon.vue"; //优惠券组件
|
import GoodsIntro from "@/pages/product/product/goods/-goods-intro.vue"; //商品介绍组件
|
import GoodsRecommend from "@/pages/product/product/goods/-goods-recommend.vue"; //宝贝推荐
|
import storeLayout from "@/pages/product/product/shop/-shop.vue"; //店铺组件
|
import Evaluation from "@/pages/product/product/evaluation/-evaluation"; //评价组件
|
import GoodsSwiper from "@/pages/product/product/goods/-goods-swiper.vue"; //轮播图组件
|
import popupGoods from "@/pages/product/m-buy/goods.vue"; //购物车商品的模块
|
import popupAddress from "@/pages/product/product/popup/address.vue"; //地址选择模块
|
import shares from "@/pages/product/m-share/index.vue"; //分享
|
import popups from "@/pages/product/popups/popups.vue"; //气泡框
|
import takeDownFormSaleGoods from "@/pages/product/m-take-down-sale-goods/index.vue"; //下架框
|
import setup from "@/pages/product/product/popup/popup.js";
|
import { getSessionId, userAction } from "@/api/userAction.js";
|
|
import { getGoodsDetail } from "@/api/video.js"
|
import {
|
getSTSToken
|
} from '@/api/common.js'
|
export default {
|
components: {
|
popups,
|
shares,
|
PromotionLayout,
|
PromotionDetailsLayout,
|
PromotionAssembleLayout,
|
PromotionAssembleListLayout,
|
PromotionCoupon,
|
GoodsIntro,
|
GoodsRecommend,
|
storeLayout,
|
Evaluation,
|
GoodsSwiper,
|
popupGoods,
|
popupAddress,
|
takeDownFormSaleGoods
|
},
|
data() {
|
return {
|
setup,
|
promotionShow: false, //弹窗开关
|
// #ifdef H5
|
navbarListX: 110, //导航栏列表栏x轴
|
navbarListY: 80, //导航栏列表栏y轴
|
// #endif
|
// #ifdef MP-WEIXIN
|
navbarListX: 100, //导航栏列表栏x轴
|
navbarListY: 140, //导航栏列表栏y轴
|
// #endif
|
// #ifdef APP-PLUS
|
navbarListX: 120, //导航栏列表栏x轴
|
navbarListY: 170, //导航栏列表栏y轴
|
// #endif
|
navbarListData: [
|
//导航栏列表栏数据
|
// {
|
// title: "首页",
|
// icon: "home-fill",
|
// ___type: "other",
|
// },
|
{
|
title: "购物车",
|
icon: "bag-fill",
|
___type: "other",
|
},
|
// {
|
// title: "搜索",
|
// icon: "search",
|
// ___type: "category",
|
// },
|
{
|
title: "个人中心",
|
icon: "account-fill",
|
___type: "other",
|
},
|
],
|
goodsList: [],
|
currentIndex: 0,
|
popupsSwitch: false, //导航栏列表栏开关
|
enableShare: false,
|
selectedGoods: "", //选择的商品规格昵称
|
isGroup: false, // 是否是拼团活动
|
isSeckill: false, // 是否秒杀活动
|
pointDetail: "", // 是否是积分商品
|
assemble: "", //拼团的sku
|
navbarOnlyBack: {
|
background: "transparent",
|
},
|
navbar: {
|
background: "#fff",
|
},
|
|
productRefHeight: "",
|
header: {
|
top: 0,
|
height: 50,
|
},
|
goodsParams: [], // 商品参数
|
headerFlag: false, //顶部导航显示与否
|
headerList: [
|
//顶部导航文字按照规则来 详情全局搜索
|
{
|
text: "商品",
|
id: "1",
|
},
|
{
|
text: "评价",
|
id: "2",
|
},
|
{
|
text: "详情",
|
id: "3",
|
},
|
// {
|
// text: "推荐",
|
// id: "4",
|
// },
|
],
|
tabScrollTop: null,
|
scrollArr: [],
|
scrollId: "1",
|
scrollFlag: true,
|
current: "1", //当前显示的轮播图页
|
goodsDetail: {}, //商品数据
|
goodsSpec: "", //规格数据
|
imgList: [], //轮播图数据
|
favorite: false, //收藏与否flag
|
recommendList: [], //推荐列表
|
// maskFlag: false, //模态显示与否
|
goodsInfo: false, //商品介绍弹窗
|
addressFlag: false, //配送地址弹窗
|
buyMask: false, //添加购物车直接购买，查看已选 弹窗
|
num: 1, //添加到购物车的数量
|
skuId: "", //
|
storeDetail: "", //店铺基本信息,
|
// 店铺信息
|
storeParams: {
|
pageNumber: 1,
|
pageSize: 10,
|
},
|
|
likeGoodsList: "", //相似商品列表
|
PromotionList: "", //活动,促销，列表
|
specList: [],
|
selectedSpec: [],
|
nums: 0,
|
delivery: "",
|
|
exchange: {},
|
productId: 0,
|
|
startTimer: false, //未开启 是false
|
|
routerVal: "",
|
IMLink: "", // IM地址
|
wholesaleList: [],
|
takeDownFromSale: false, // 下架销售状态
|
touchStartX: 0,
|
touchEndX: 0,
|
minSwipeDistance: 100, // 最小滑动距离，用于判断是否为有效滑动
|
pageSessionNo:"",
|
actionParam:{
|
sessionId:'',
|
actionType:"PAGE",
|
joinType:"SELF",
|
pageCode:"SWIPER_GOODS",
|
pageParams:"{}",
|
pageStatus:"JOIN",
|
pageType:"DETAIL"
|
}
|
};
|
},
|
|
computed: {
|
// udesk IM
|
IM() {
|
return this.IMLink + this.storeDetail.merchantEuid;
|
},
|
},
|
|
props: ["id", "goodsId"],
|
mounted() {
|
const { windowHeight } = uni.getSystemInfoSync();
|
let bottomHeight = 0;
|
let topHeight = 0;
|
uni.getSystemInfo({
|
success: function (res) {
|
// res - 各种参数
|
let bottom = uni.createSelectorQuery().select(".page-bottom");
|
bottom
|
.boundingClientRect(function (data) {
|
if (data && data.height) {
|
//data - 各种参数
|
bottomHeight = data.height; // 获取元素宽度
|
}
|
})
|
.exec();
|
let top = uni.createSelectorQuery().select(".header");
|
top
|
.boundingClientRect(function (data) {
|
if (data && data.height) {
|
//data - 各种参数
|
topHeight = data.height; // 获取元素宽度
|
}
|
})
|
.exec();
|
},
|
});
|
|
this.productRefHeight = windowHeight - bottomHeight + "px";
|
},
|
async onLoad(options) {
|
this.actionParam.pageParams = JSON.stringify(options)
|
|
this.videoId = options.videoId;
|
this.getGoodsList();
|
|
// #ifdef MP-WEIXIN
|
// 小程序默认分享
|
uni.showShareMenu({
|
withShareTicket: true,
|
menus: ["shareAppMessage", "shareTimeline"],
|
});
|
// #endif
|
},
|
onUnload() {
|
let param = this.actionParam;
|
if (this.sendOnShow)return
|
param.pageStatus = "LEAVE"
|
userAction(param)
|
},
|
onHide() {
|
this.startHidenTime = Date.now()
|
let param = this.actionParam;
|
this.sendOnShow = true;
|
param.pageStatus = "LEAVE"
|
userAction(param)
|
},
|
async onShow() {
|
getSessionId().then(res=>{
|
this.pageSessionNo = res.data.data
|
if(this.pageSessionNo){
|
let param = this.actionParam;
|
param.sessionId = this.pageSessionNo
|
userAction(param)
|
}
|
})
|
// this.goodsDetail = {};
|
// debugger
|
// //如果有参数ids说明事分销短连接，需要获取参数
|
// if (this.routerVal.scene) {
|
// getMpScene(this.routerVal.scene).then((res) => {
|
// if (res.data.success) {
|
// let data = res.data.result.split(","); // skuId,goodsId,distributionId
|
// this.init(data[0], data[1], data[2]);
|
// }
|
// });
|
// } else {
|
// this.init(this.routerVal.id, this.routerVal.goodsId, this.routerVal.distributionId);
|
// }
|
},
|
|
methods: {
|
// 获取商品列表
|
async getGoodsList() {
|
getGoodsDetail(this.videoId).then(res => {
|
this.goodsList = res.data.data
|
if (this.goodsList != null && this.goodsList.length > 0) {
|
var goods = this.goodsList[0]
|
this.init(goods.id, goods.goodsId)
|
}
|
})
|
},
|
// 解析URL参数
|
parseUrlParams(url) {
|
const params = {};
|
// 处理可能存在的hash（如果有的话）
|
const cleanUrl = url.split('#')[0];
|
const queryStr = cleanUrl.split('?')[1] || '';
|
|
queryStr.split('&').forEach(pair => {
|
const [key, value] = pair.split('=');
|
if (key) {
|
// 如果值存在，则解码，否则设为空字符串
|
params[key] = value ? decodeURIComponent(value) : '';
|
}
|
});
|
|
return params;
|
},
|
// 重新打开下架
|
reStartTakeDownSale() {
|
this.$refs.takeDownSale.show = true
|
},
|
share() {
|
return `/pages/product/goods?id=${this.routerVal.id}&goodsId=${this.routerVal.goodsId}`;
|
},
|
/**
|
* 导航栏列表栏
|
*/
|
handleNavbarList(val) {
|
modelNavigateTo({ url: val });
|
},
|
|
/**
|
* 循环出当前促销是否为空
|
*/
|
emptyPromotion() {
|
if (
|
this.PromotionList == "" ||
|
this.PromotionList == null ||
|
this.PromotionList == []
|
) {
|
return true;
|
}
|
},
|
selectSku(idObj) {
|
this.init(idObj.skuId, idObj.goodsId);
|
},
|
/**
|
* 初始化信息
|
*/
|
async init(id, goodsId, distributionId = "") {
|
console.log('打印id:' + id)
|
console.log('打印goodsId:' + goodsId)
|
this.isGroup = false; //初始化拼团
|
this.productId = id; // skuId
|
// 这里请求获取到页面数据 解析数据
|
|
let response = await getGoods(id || 'undefined', goodsId);
|
|
// 判断当前接口返回内容
|
if (!response.data.success) {
|
// 商品已下架
|
if (response.data.code == 11001) {
|
this.takeDownFromSale = true
|
}
|
// setTimeout(() => {
|
// uni.navigateBack();
|
// }, 500);
|
}
|
// 这里是绑定分销员
|
if (distributionId || this.$store.state.distributionId) {
|
let disResult = await getGoodsDistribution(distributionId);
|
if (!disResult.data.success || disResult.statusCode == 403) {
|
this.$store.state.distributionId = distributionId;
|
}
|
}
|
const sts = await getSTSToken();
|
const stsUrl = sts.data.data.endpoint
|
// // 处理数据
|
// goodsList.data.result.records.forEach(item => {
|
// if (item.thumbnail !== '' && item.thumbnail !== null && item.thumbnail.indexOf('http') ===
|
// -1) {
|
// item.thumbnail = stsUrl + '/' + item.thumbnail
|
// }
|
// if (item.goodsVideo !== '' && item.goodsVideo !== null && item.goodsVideo.indexOf(
|
// 'http') === -1) {
|
// item.goodsVideo = stsUrl + '/' + item.goodsVideo
|
// }
|
// })
|
/**商品信息以及规格信息存储 */
|
console.log('--------------------------1>', response.data.result.data.goodsGalleryList)
|
response.data.result.data.goodsGalleryList.forEach((item, index) => {
|
if (item !== '' && item !== null && item.indexOf('http') ===
|
-1) {
|
response.data.result.data.goodsGalleryList[index] = stsUrl + '/' + item
|
console.log('是否执行-------------》', item)
|
}
|
})
|
console.log('--------------------------2>', response.data.result.data.goodsGalleryList)
|
this.goodsDetail = response.data.result.data;
|
if (this.goodsDetail.goodsVideo !== '' && this.goodsDetail.goodsVideo !== null && this.goodsDetail.goodsVideo.indexOf(
|
'http') === -1) {
|
this.goodsDetail.goodsVideo = stsUrl + '/' + this.goodsDetail.goodsVideo
|
}
|
console.log('--------------------------2>', this.goodsDetail.goodsGalleryList)
|
this.wholesaleList = response.data.result.wholesaleList;
|
this.goodsSpec = response.data.result.specs;
|
this.PromotionList = response.data.result.promotionMap;
|
this.goodsParams = response.data.result.goodsParamsDTOList || [];
|
console.log('优惠卷活动--------------------》', response.data.result.promotionMap)
|
// 判断是否拼团活动或者积分商品 如果有则显示拼团活动信息
|
this.PromotionList &&
|
Object.keys(this.PromotionList).forEach((item) => {
|
// 拼团商品
|
if (item.indexOf("PINTUAN") == 0) {
|
this.isGroup = true;
|
}
|
|
// 秒杀
|
if (item.indexOf("SECKILL") == 0) {
|
this.isSeckill = true
|
}
|
});
|
// 轮播图
|
this.imgList = this.goodsDetail.goodsGalleryList.filter(i => i.indexOf("\"url\":") === -1 && i.indexOf("\"status\":") === -1);
|
|
// 获取店铺基本信息
|
this.getStoreBaseInfoFun(this.goodsDetail.storeId);
|
|
// 获取购物车
|
this.cartCount();
|
|
// 获取店铺推荐商品
|
this.getStoreRecommend();
|
|
// 获取商品列表
|
this.getOtherLikeGoods();
|
// 获取商品是否已被收藏 如果未登录不获取
|
|
if (this.$options.filters.isLogin("auth")) {
|
this.getGoodsCollectionFun(this.goodsDetail.id);
|
}
|
// 获取IM 需要的话使用
|
// this.getIMDetailMethods();
|
},
|
|
async getIMDetailMethods() {
|
let res = await getIMDetail();
|
if (res.data.success) {
|
this.IMLink = res.data.result;
|
}
|
},
|
|
linkMsgDetail() {
|
// lili 基础客服
|
this.$options.filters.talkIm(this.goodsDetail.storeId, this.routerVal.goodsId, this.routerVal.id)
|
// uni.navigateTo({
|
// url: `/pages/mine/im/index?userId=${this.goodsDetail.storeId}&goodsid=${this.routerVal.goodsId}&skuid=${this.routerVal.id}`
|
// });
|
|
// udesk 代码
|
// if (this.storeDetail.merchantEuid) {
|
// uni.navigateTo({
|
// url: `/pages/tabbar/home/web-view?src=${this.IM}`,
|
// });
|
// }
|
|
|
// 客服 云智服代码
|
// // #ifdef MP-WEIXIN
|
// const params = {
|
// storeName: this.storeDetail.storeName,
|
// goodsName: this.goodsDetail.goodsName,
|
// goodsId: this.goodsDetail.goodsId,
|
// goodsImg: this.goodsDetail.thumbnail,
|
// price: this.goodsDetail.promotionPrice || this.goodsDetail.price,
|
// // originalPrice: this.goodsDetail.original || this.goodsDetail.price,
|
// uuid: storage.getUuid(),
|
// token: storage.getAccessToken(),
|
// sign: this.storeDetail.yzfSign,
|
// mpSign: this.storeDetail.yzfMpSign,
|
// };
|
// uni.navigateTo({
|
// url:
|
// "/pages/product/customerservice/index?params=" +
|
// encodeURIComponent(JSON.stringify(params)),
|
// });
|
// // #endif
|
// // #ifndef MP-WEIXIN
|
// const sign = this.storeDetail.yzfSign;
|
// uni.navigateTo({
|
// url:
|
// "/pages/tabbar/home/web-view?src=https://yzf.qq.com/xv/web/static/chat/index.html?sign=" +
|
// sign,
|
// });
|
// // #endif
|
|
},
|
/**选择商品 */
|
changedGoods(val) {
|
this.selectedGoods = val;
|
},
|
|
/** 点击子级地址回调参数*/
|
deliveryFun(val) {
|
this.delivery = val;
|
},
|
/**
|
* 地址子级关闭回调
|
*/
|
closePopupAddress(val) {
|
this.addressFlag = val;
|
// this.maskFlag = false;
|
},
|
/**
|
* 商品规格子级关闭回调
|
*/
|
closePopupBuy(val) {
|
this.buyMask = val;
|
// this.maskFlag = false;
|
},
|
|
/** 参与拼团 创建拼团 */
|
toAssembleBuyNow(order) {
|
this.shutMask(4, "PINTUAN", order);
|
},
|
/**
|
* 查看购物车
|
*/
|
reluchToCart() {
|
console.log('点击了购物车-----------------------》')
|
let obj = {
|
from: "product",
|
id: this.productId,
|
};
|
storage.setCartBackbtn(obj);
|
uni.redirectTo({
|
url: "/pages/cusbar/cart/cartList",
|
});
|
},
|
|
/**
|
* 查询购物车总数量
|
*/
|
cartCount() {
|
if (storage.getHasLogin()) {
|
API_trade.getCartNum().then((res) => {
|
this.nums = res.data.result;
|
});
|
}
|
},
|
|
/**
|
* 返回
|
*/
|
back() {
|
if (getCurrentPages().length == 1) {
|
uni.redirectTo({
|
url: "/pages/commodity-square/commoditySquare",
|
});
|
} else {
|
uni.navigateBack();
|
}
|
},
|
|
/**
|
* 获取店铺信息
|
*/
|
getStoreBaseInfoFun(id) {
|
API_store.getStoreBaseInfo(id).then((res) => {
|
if (res.data.success) {
|
this.storeDetail = res.data.result;
|
}
|
});
|
},
|
|
/**
|
* 删除收藏店铺
|
*/
|
deleteGoodsCollectionFun(id) {
|
API_Members.deleteGoodsCollection(id).then((res) => {
|
if (res.statusCode == 200) {
|
uni.showToast({
|
title: "商品已取消收藏!",
|
icon: "none",
|
});
|
this.favorite = !this.favorite;
|
}
|
});
|
},
|
|
/**
|
* 获取商品是否已被收藏
|
*/
|
getGoodsCollectionFun(goodsId) {
|
if (storage.getHasLogin()) {
|
API_Members.getGoodsIsCollect("GOODS", goodsId).then((res) => {
|
this.favorite = res.data.result;
|
});
|
}
|
},
|
|
/**
|
* 获取店铺推荐商品列表
|
*/
|
getStoreRecommend() {
|
getGoodsList({
|
pageNumber: 1,
|
pageSize: 6,
|
storeId: this.goodsDetail.storeId,
|
recommend: true,
|
}).then((res) => {
|
this.recommendList = res.data.result.records;
|
});
|
},
|
|
/**
|
* 获取相似商品列表
|
*
|
*/
|
getOtherLikeGoods() {
|
getGoodsList({
|
pageNumber: 1,
|
pageSize: 10,
|
category: this.goodsDetail.categoryId,
|
keyword: this.goodsDetail.name,
|
}).then((res) => {
|
this.likeGoodsList = res.data.result.records;
|
});
|
},
|
|
/**
|
* 领取优惠券
|
*/
|
receiveCouponsFun(id) {
|
API_Members.receiveCoupons(id).then((res) => {
|
uni.showToast({
|
title: res.data.message,
|
icon: "none",
|
});
|
});
|
},
|
|
/**
|
* 跳转到店铺页面
|
*/
|
navigateToStore(store_id) {
|
uni.navigateTo({
|
url: `/pages/product/shopPage?id=` + store_id,
|
});
|
},
|
|
/**
|
* 获取优惠券按钮
|
*/
|
getCoupon(item) {
|
this.receiveCouponsFun(item.id);
|
},
|
|
/**
|
* 规格弹窗开关
|
*/
|
shutMask(flag, buyFlag, type) {
|
this.promotionShow = false;
|
this.buyMask = false;
|
this.addressFlag = false;
|
if (flag) {
|
switch (flag) {
|
case 1: //优惠券弹窗
|
this.promotionShow = true;
|
|
break;
|
case 3:
|
this.addressFlag = true;
|
break;
|
case 4: //添加购物车直接购买，查看已选 弹窗
|
// 判断是否是一个规格
|
|
this.buyMask = true;
|
if (buyFlag == "PINTUAN") {
|
if (type.orderSn) {
|
this.$refs.popupGoods.parentOrder = type;
|
}
|
this.$refs.popupGoods.buyType = "PINTUAN";
|
}
|
if (buyFlag == "buy") {
|
this.$refs.popupGoods.buyType = "";
|
}
|
|
break;
|
}
|
}
|
},
|
|
/**
|
* 收藏
|
*/
|
clickFavorite(id) {
|
if (this.favorite) {
|
// 取消收藏
|
this.deleteGoodsCollectionFun(id);
|
return false;
|
}
|
API_Members.collectionGoods("GOODS", id).then((res) => {
|
if (res.data.success) {
|
uni.showToast({
|
title: "收藏成功!",
|
icon: "none",
|
});
|
}
|
});
|
this.favorite = !this.favorite;
|
},
|
|
/**
|
* 顶部header显示或隐藏
|
*/
|
pageScroll(e) {
|
if (this.scrollFlag) {
|
this.calcSize();
|
}
|
if (e.detail.scrollTop > 200) {
|
//当距离大于200时显示回到顶部按钮
|
this.headerFlag = true;
|
} else {
|
//当距离小于200时隐藏回到顶部按钮
|
this.headerFlag = false;
|
}
|
if (e.detail.scrollTop < this.scrollArr[0] - 10) {
|
this.scrollId = "1";
|
}
|
if (e.detail.scrollTop > this.scrollArr[1] - 10) {
|
this.scrollId = "2";
|
}
|
if (e.detail.scrollTop > this.scrollArr[2] - 10) {
|
this.scrollId = "3";
|
}
|
if (e.detail.scrollTop > this.scrollArr[3] - 10) {
|
this.scrollId = "4";
|
}
|
},
|
|
/**
|
* 计算每个要跳转到的模块高度信息
|
*/
|
calcSize() {
|
let h = 0;
|
let that = this;
|
let arr = [
|
"main1",
|
"main2",
|
"main3",
|
"main4",
|
"main5",
|
"main6",
|
"main7",
|
"main8",
|
"main9",
|
"main10",
|
"main11",
|
];
|
arr.forEach((item) => {
|
let view = uni.createSelectorQuery().select("#" + item);
|
view
|
.fields(
|
{
|
size: true,
|
},
|
(data) => {
|
if (
|
item === "main1" ||
|
item === "main5" ||
|
item === "main9" ||
|
item === "main11"
|
) {
|
that.scrollArr.push(h);
|
}
|
if (data && data.height) {
|
h += data.height;
|
}
|
}
|
)
|
.exec();
|
});
|
this.scrollFlag = false;
|
},
|
|
/**
|
* 点击顶部跳转到对应位置
|
*/
|
headerTab(id) {
|
if (this.scrollFlag) {
|
this.calcSize();
|
}
|
this.scrollId = id;
|
|
this.$nextTick(() => {
|
this.tabScrollTop = this.scrollArr[id - 1];
|
});
|
},
|
onSwiperChange(e) {
|
if (e.detail.current == -1) {
|
uni.navigateBack();
|
}
|
this.currentIndex = e.detail.current;
|
var goods = this.goodsList[this.currentIndex];
|
this.init(goods.id, goods.goodsId);
|
},
|
/**
|
* 点击分享
|
*/
|
async shareChange() {
|
this.enableShare = true;
|
},
|
|
// 添加触摸开始事件处理函数
|
handleTouchStart(e) {
|
this.touchStartX = e.touches[0].clientX;
|
},
|
|
// 添加触摸移动事件处理函数
|
handleTouchMove(e) {
|
// 可以在这里添加一些视觉反馈，如果需要的话
|
},
|
|
// 添加触摸结束事件处理函数
|
handleTouchEnd(e) {
|
this.touchEndX = e.changedTouches[0].clientX;
|
|
// 计算水平滑动距离
|
const swipeDistance = this.touchEndX - this.touchStartX;
|
|
// 如果是在第一个商品详情页(currentIndex=0)，并且是向右滑动(swipeDistance > minSwipeDistance)
|
if (this.currentIndex === 0 && swipeDistance > this.minSwipeDistance) {
|
// 返回首页
|
uni.navigateBack();
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.video-container {
|
width: 100%;
|
height: 100vh;
|
background-color: #fff;
|
}
|
|
.video-swiper {
|
width: 100%;
|
height: calc(100% - 50px);
|
}
|
|
// #ifdef MP-WEIXIN
|
@import "../product/product/mp-goods.scss";
|
// #endif
|
|
@import "../product/product/style.scss";
|
@import "../product/product/product.scss";
|
</style>
|
