zhuce
/
lilishop-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
lilishop-uniapp/pages/product/goods.vue

827 lines
26 KiB
Vue
Raw Normal View History

commit message
2021-05-13 11:03:32 +08:00
<template>
<div class="main-page">
<!-- #ifdef APP-PLUS -->
<view class="status_bar"></view>
<!-- #endif -->
<!-- 仅h5有效 打开App -->
<!-- 分享 -->
<shares v-if="shareFlage && goodsDetail.id" :skuId="this.routerVal.id" :goodsId="this.routerVal.goodsId" :link="'/pages/product/goods?id='+this.routerVal.id+'&goodsId='+this.routerVal.goodsId"
:thumbnail="goodsDetail.thumbnail" :goodsName="goodsDetail.goodsName" type="goods" @close="shareFlage = false" />
<view class="index">
<u-navbar :background="navbar" :is-back="false" :class="headerFlag ? 'header' : 'header bg-none scoll-hide'">
<div class="headerRow">
<div class="backs" @click="back()">
<u-icon name="arrow-left" color="#8e8e8e"></u-icon>
</div>
<div class="headerList" :class="headerFlag ? 'tab-bar' : 'tab-bar scoll-hide'">
<div class="headerRow">
<div style="text-align: center" :span="3" v-for="header in headerList" :key="header.id" :class="{ cur: scrollId === header.id }" @click="headerTab(header.id)">
{{ header.text }}
</div>
</div>
</div>
<div class="share" @click="shareChange()">
<image class="shareImg" src="/static/share.png" alt=""></image>
</div>
</div>
</u-navbar>
<view class="showBack" v-show="!headerFlag">
<u-row>
<u-col :span="2" @click="back()">
<div class="iconBag" style="text-align: center">
<image class="headerImg" src="/static/bagBack.png" alt=""></image>
</div>
</u-col>
<u-col :span="8"></u-col>
<u-col :span="2" class="share" style="text-align: center" @click="shareChange()">
<image class="headerImg" src="/static/bagShare.png" alt=""></image>
</u-col>
</u-row>
</view>
</view>
<view class="product-container" :style="{ height: productRefHeight }" ref="productRef" id="productRef">
<scroll-view scroll-anchoring enableBackToTop="true" scroll-with-animation scroll-y class="scoll-page" :scroll-top="tabScrollTop" @scroll="pageScroll">
<view>
<!-- 轮播图 -->
<GoodsSwiper id="main1" :res="imgList" />
<!-- 促销活动条 -->
<PromotionAssembleLayout v-if="PromotionList" :detail="goodsDetail" :res="PromotionList" />
<view class="card-box top-radius-0" id="main2">
<!-- 活动不显示价钱 -->
<view v-if="!is_promotion" class="desc-blod -goods-msg">
<view class="-goods-flex">
<view class="desc-blod">
{{ 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">
优化注释
2021-05-17 18:19:26 +08:00
<span v-if="pointDetail.points"> <span class="price">{{pointDetail.points}}</span>
commit message
2021-05-13 11:03:32 +08:00
<span>积分</span>
</span>
优化注释
2021-05-17 18:19:26 +08:00
<span v-else> <span>¥</span><span class="price">{{ formatPrice(goodsDetail.price)[0] }}</span>.{{
formatPrice(goodsDetail.price)[1]
commit message
2021-05-13 11:03:32 +08:00
}} </span>
</view>
<view class="-goods-price" v-else> ¥<span class="price">0 </span>.00 </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-name desc-blod">
{{ 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">
<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>
<!-- 评价 -->
修改看到的一些问题
2021-06-04 18:11:34 +08:00
<Evaluation id="main5" :goodsDetail="goodsDetail" />
commit message
2021-05-13 11:03:32 +08:00
<!-- 店铺推荐 -->
<storeLayout id="main7" :storeDetail="storeDetail" :goodsDetail="goodsDetail" :res="recommendList" />
<!-- 宝贝详情 -->
<GoodsIntro id="main9" :res="goodsDetail" :goodsId="goodsDetail.goodsId" v-if="goodsDetail.id" />
<!-- 宝贝推荐 -->
<GoodsRecommend id="main11" :res="likeGoodsList" />
</view>
</scroll-view>
<view class="page-bottom mp-iphonex-bottom" id="pageBottom">
<view class="icon-btn">
优化注释
2021-05-17 18:19:26 +08:00
<view class="icon-btn-item" @click="navigateToStore(goodsDetail.storeId)">
commit message
2021-05-13 11:03:32 +08:00
<u-icon size="34" class="red" name="home-fill"></u-icon>
<view class="red icon-btn-name">店铺</view>
</view>
合并ma隐藏客服功能
2021-05-27 16:26:24 +08:00
<!-- <view class="icon-btn-item" @click="linkMsgDetail()">
commit message
2021-05-13 11:03:32 +08:00
<u-icon size="34" name="kefu-ermai"></u-icon>
<view class="icon-btn-name">客服</view>
合并ma隐藏客服功能
2021-05-27 16:26:24 +08:00
</view> -->
commit message
2021-05-13 11:03:32 +08:00
<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>
<!-- 正常结算页面 -->
<view class="detail-btn" v-if="!isGroup">
<view class="to-store-car to-store-btn" @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>
<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="popup spec" @click="shutMask(false)" v-show="maskFlag">
<!-- 促销弹窗 -->
<view class="cuxiao mask" v-show="cuxiao">
<view ref="mask_title" class="title mask_title">
优惠
<span @click="shutMask(false)">×</span>
</view>
<scroll-view class="scroll_mask" :scroll-y="true">
<view class="con-cuxiao">
<text>促销活动</text>
<PromotionDetailsLayout :res="PromotionList" />
</view>
<view class="con-cuxiao coupons">
<text>可领优惠券</text>
<PromotionCoupon @getCoupon="getCoupon" :res="PromotionList" />
</view>
</scroll-view>
</view>
<!-- 配送地址弹窗 -->
<popupAddress @closeAddress="closePopupAddress" @deliveryData="deliveryFun" v-if="goodsDetail.id" :goodsId="goodsDetail.id" :addressFlag="addressFlag" />
<!-- 商品规格 商品详情，以及默认参与活动的id-->
优化注释
2021-05-17 18:19:26 +08:00
<popupGoods :addr="delivery" ref="popupGoods" @changed="changedGoods" @closeBuy="closePopupBuy" @queryCart="cartCount()" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" :id="productId"
v-if="goodsDetail.id " :pointDetail="pointDetail" @handleClickSku="init" :buyMask="buyMask" />
commit message
2021-05-13 11:03:32 +08:00
</view>
</view>
</div>
</template>
<script>
/************接口API***************/
优化部分代码样式以及bug,新增app升级功能
2021-05-21 16:47:26 +08:00
import {
getGoods,
getGoodsList,
getMpScene,
getGoodsDistribution,
} from "@/api/goods.js";
commit message
2021-05-13 11:03:32 +08:00
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 storage from "@/utils/storage.js";
/************组件***************/
import PromotionLayout from "./product/promotion/-promotion"; //促销组件
import PromotionDetailsLayout from "./product/promotion/-promotion-details"; //促销活动详情
import PromotionAssembleLayout from "./product/promotion/-promotion-assemble-promotions"; //促销活动条
import PromotionAssembleListLayout from "./product/promotion/-promotion-assemble-list"; //拼团用户列表
import PromotionCoupon from "./product/promotion/-promotion-coupon"; //优惠券组件
import GoodsIntro from "./product/goods/-goods-intro"; //商品介绍组件
import GoodsRecommend from "./product/goods/-goods-recommend"; //宝贝推荐
import storeLayout from "./product/shop/-shop"; //店铺组件
import Evaluation from "./product/evaluation/-evaluation"; //评价组件
import GoodsSwiper from "./product/goods/-goods-swiper"; //轮播图组件
import popupGoods from "./product/popup/goods"; //购物车商品的模块
import popupAddress from "./product/popup/address"; //地址选择模块
import shares from "@/components/m-share/index"; //分享
export default {
components: {
shares,
PromotionLayout,
PromotionDetailsLayout,
PromotionAssembleLayout,
PromotionAssembleListLayout,
PromotionCoupon,
GoodsIntro,
GoodsRecommend,
storeLayout,
Evaluation,
GoodsSwiper,
popupGoods,
popupAddress,
},
data() {
return {
shareFlage: false,
selectedGoods: "", //选择的商品规格昵称
is_promotion: true, //判断显示拼团活动文字
isGroup: false, // 是否是拼团活动
pointDetail: "", // 是否是积分商品
assemble: "", //拼团的sku
scroll_mask_height: 0, //促销活动的高度
navbar: {
background: "#fff",
},
productRefHeight: "",
header: {
top: 0,
height: 50,
},
headerFlag: false, //顶部导航显示与否
headerList: [
//顶部导航文字
{
text: "商品",
id: "1",
},
{
text: "评价",
id: "2",
},
{
text: "详情",
id: "3",
},
{
text: "推荐",
id: "4",
},
],
oldtabScrollTop: 0,
tabScrollTop: null,
scrollArr: [],
scrollId: "1",
scrollFlag: true,
current: "1", //当前显示的轮播图页
goodsDetail: {}, //商品数据
goodsSpec: "", //规格数据
imgList: [], //轮播图数据
favorite: false, //收藏与否flag
recommendList: [], //推荐列表
maskFlag: false, //模态显示与否
cuxiao: false, //促销弹窗
goodsInfo: false, //商品介绍弹窗
addressFlag: false, //配送地址弹窗
buyMask: false, //添加购物车直接购买，查看已选 弹窗
num: 1, //添加到购物车的数量
skuId: "", //
storeDetail: "", //店铺基本信息,
// 店铺信息
storeParams: {
pageNumber: 1,
pageSize: 10,
},
likeGoodsList: "", //相似商品列表
PromotionList: "", //活动,促销，列表
specList: [],
skusCombination: [],
selectedSpec: [],
nums: 0,
delivery: "",
exchange: {},
productId: 0,
startTimer: false, //未开启 是false
routerVal: "",
};
},
watch: {
isGroup(val) {
if (val) {
let timer = setInterval(() => {
this.$refs.popupGoods.buyType = "PINTUAN";
优化部分代码样式以及bug,新增app升级功能
2021-05-21 16:47:26 +08:00
commit message
2021-05-13 11:03:32 +08:00
clearInterval(timer);
}, 100);
this.is_promotion = false;
} else {
this.is_promotion = true;
this.$refs.popupGoods.buyType = "";
}
},
},
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.routerVal = options;
优化部分代码样式以及bug,新增app升级功能
2021-05-21 16:47:26 +08:00
},
async onShow() {
commit message
2021-05-13 11:03:32 +08:00
this.goodsDetail = {};
//如果有参数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,
优化部分代码样式以及bug,新增app升级功能
2021-05-21 16:47:26 +08:00
this.routerVal.distributionId,
this.routerVal.whetherPoint
commit message
2021-05-13 11:03:32 +08:00
);
}
},
methods: {
// 循环出当前促销是否为空
emptyPromotion() {
if (
this.PromotionList == "" ||
this.PromotionList == null ||
this.PromotionList == []
) {
return true;
}
},
/**初始化信息 */
优化注释
2021-05-17 18:19:26 +08:00
async init(id, goodsId, distributionId) {
commit message
2021-05-13 11:03:32 +08:00
this.isGroup = false; //初始化拼团
this.productId = id; // skuId
// 这里请求获取到页面数据 解析数据
uni.showLoading({
title: "加载中",
mask: true,
});
优化部分代码样式以及bug,新增app升级功能
2021-05-21 16:47:26 +08:00
let response = await getGoods(id, goodsId);
// 这里是绑定分销员
if (distributionId || this.$store.state.distributionId) {
let disResult = await getGoodsDistribution(distributionId);
if (!disResult.data.success || disResult.statusCode == 403) {
this.$store.state.distributionId = distributionId;
}
}
commit message
2021-05-13 11:03:32 +08:00
uni.hideLoading();
/**商品信息以及规格信息存储 */
this.goodsDetail = response.data.result.data;
this.goodsSpec = response.data.result.specs;
this.PromotionList = response.data.result.promotionMap;
// 判断是否拼团活动或者积分商品 如果有则显示拼团活动信息
this.PromotionList &&
Object.keys(this.PromotionList).forEach((item) => {
// 拼团商品
if (item.indexOf("PINTUAN") == 0) {
this.isGroup = true;
}
// 积分
if (item.indexOf("POINTS_GOODS") == 0) {
this.pointDetail = this.PromotionList[item];
}
});
// 轮播图
this.imgList = this.goodsDetail.goodsGalleryList;
// 获取店铺基本信息
this.getstoreBaseInfoFun(this.goodsDetail.storeId);
// 获取购物车
优化注释
2021-05-17 18:19:26 +08:00
this.cartCount();
commit message
2021-05-13 11:03:32 +08:00
// 获取店铺推荐商品
this.getstoreRecommend();
// 获取商品列表
this.getOtherLikeGoods();
// 获取商品是否已被收藏 如果未登录不获取
if (this.$options.filters.isLogin("auth")) {
this.getGoodsCollectionFun(this.goodsDetail.id);
}
},
合并ma隐藏客服功能
2021-05-27 16:26:24 +08:00
linkMsgDetail () {
uni.navigateTo({
url: '/pages/product/customerservice/index'
})
小程序im客服对接
2021-05-26 18:03:15 +08:00
},
commit message
2021-05-13 11:03:32 +08:00
// 格式化金钱 1999 --> [1999,00]
优化注释
2021-05-17 18:19:26 +08:00
formatPrice(val) {
commit message
2021-05-13 11:03:32 +08:00
if (typeof val == "undefined") {
return val;
}
return val.toFixed(2).split(".");
},
优化注释
2021-05-17 18:19:26 +08:00
/**选择商品 */
commit message
2021-05-13 11:03:32 +08:00
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);
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 查看购物车
*/
commit message
2021-05-13 11:03:32 +08:00
reluchToCart() {
let obj = {
from: "product",
id: this.productId,
};
storage.setCartBackbtn(obj);
uni.switchTab({
url: "/pages/tabbar/cart/cartList",
});
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 查询购物车总数量
*/
cartCount() {
commit message
2021-05-13 11:03:32 +08:00
if (storage.getHasLogin()) {
API_trade.getCartNum().then((res) => {
this.nums = res.data.result;
});
}
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 返回
*/
commit message
2021-05-13 11:03:32 +08:00
back() {
优化部分代码样式以及bug,新增app升级功能
2021-05-21 16:47:26 +08:00
if (getCurrentPages().length == 1) {
优化注释
2021-05-17 18:19:26 +08:00
uni.switchTab({
优化部分代码样式以及bug,新增app升级功能
2021-05-21 16:47:26 +08:00
url: "/pages/tabbar/home/index",
优化注释
2021-05-17 18:19:26 +08:00
});
优化部分代码样式以及bug,新增app升级功能
2021-05-21 16:47:26 +08:00
} else {
uni.navigateBack();
优化注释
2021-05-17 18:19:26 +08:00
}
commit message
2021-05-13 11:03:32 +08:00
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 获取店铺信息
*/
commit message
2021-05-13 11:03:32 +08:00
getstoreBaseInfoFun(id) {
API_store.getstoreBaseInfo(id).then((res) => {
if (res.data.success) {
this.storeDetail = res.data.result;
}
});
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 删除收藏店铺
*/
commit message
2021-05-13 11:03:32 +08:00
deleteGoodsCollectionFun(id) {
API_Members.deleteGoodsCollection(id).then((res) => {
if (res.statusCode == 200) {
uni.showToast({
title: "商品已取消收藏!",
icon: "none",
});
this.favorite = !this.favorite;
}
});
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 获取商品是否已被收藏
*/
commit message
2021-05-13 11:03:32 +08:00
getGoodsCollectionFun(goodsId) {
if (storage.getHasLogin()) {
API_Members.getGoodsIsCollect(goodsId, "GOODS").then((res) => {
this.favorite = res.data.result;
});
}
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 获取店铺推荐商品列表
*/
commit message
2021-05-13 11:03:32 +08:00
getstoreRecommend() {
getGoodsList({
pageNumber: 1,
pageSize: 6,
storeId: this.goodsDetail.storeId,
recommend: true,
}).then((res) => {
this.recommendList = res.data.result.content;
});
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 获取相似商品列表
*/
commit message
2021-05-13 11:03:32 +08:00
getOtherLikeGoods() {
getGoodsList({
pageNumber: 1,
pageSize: 10,
category: this.goodsDetail.categoryId,
keyword: this.goodsDetail.name,
}).then((res) => {
this.likeGoodsList = res.data.result.content;
});
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 领取优惠券
*/
commit message
2021-05-13 11:03:32 +08:00
receiveCouponsFun(id) {
API_Members.receiveCoupons(id).then((res) => {
uni.showToast({
title: res.data.message,
icon: "none",
});
});
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 跳转到店铺页面
*/
navigateToStore(store_id) {
commit message
2021-05-13 11:03:32 +08:00
uni.navigateTo({
url: `/pages/product/shopPage?id=` + store_id,
});
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 获取优惠券按钮
*/
commit message
2021-05-13 11:03:32 +08:00
getCoupon(item) {
this.receiveCouponsFun(item.id);
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 规格弹窗开关
*/
commit message
2021-05-13 11:03:32 +08:00
shutMask(flag, buyFlag, type) {
// type是指是否点击底部按钮
if (flag) {
switch (flag) {
case 1: //优惠券弹窗
this.maskFlag = true;
this.cuxiao = true;
break;
case 3:
this.maskFlag = true;
this.addressFlag = true;
break;
case 4: //添加购物车直接购买，查看已选 弹窗
// 判断是否是一个规格
this.maskFlag = true;
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;
}
} else {
this.maskFlag = false;
this.cuxiao = false;
this.buyMask = false;
}
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 收藏
*/
commit message
2021-05-13 11:03:32 +08:00
clickFavorite(id) {
if (this.favorite) {
// 取消收藏
this.deleteGoodsCollectionFun(id);
return false;
}
API_Members.collectionGoods(id, "GOODS").then((res) => {
if (res.data.success) {
uni.showToast({
title: "收藏成功!",
icon: "none",
});
}
});
this.favorite = !this.favorite;
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 顶部header显示或隐藏
*/
commit message
2021-05-13 11:03:32 +08:00
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";
}
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 计算每个要跳转到的模块高度信息
*/
commit message
2021-05-13 11:03:32 +08:00
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;
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 点击顶部跳转到对应位置
*/
commit message
2021-05-13 11:03:32 +08:00
headerTab(id) {
if (this.scrollFlag) {
this.calcSize();
}
this.scrollId = id;
this.$nextTick(() => {
this.tabScrollTop = this.scrollArr[id - 1];
});
},
优化注释
2021-05-17 18:19:26 +08:00
/**
* 点击分享
*/
commit message
2021-05-13 11:03:32 +08:00
async shareChange() {
this.shareFlage = true;
},
},
};
</script>
<style lang="scss" scoped>
// #ifdef MP-WEIXIN
@import "./product/mp-goods.scss";
// #endif
@import "./product/style.scss";
@import "./product/product.scss";
</style>