3230 lines
87 KiB
Vue
3230 lines
87 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 骨架屏 -->
|
||
<view v-if="isPageLoading" class="skeleton-container">
|
||
<!-- 头部导航骨架 -->
|
||
<view class="skeleton-header" :style="{
|
||
height: (menu.bottom || 88) + 8 + 'px',
|
||
paddingTop: (menu.top || 44) + 'px'
|
||
}">
|
||
<view class="skeleton-nav">
|
||
<view class="skeleton-back-btn skeleton-animate"></view>
|
||
<view class="skeleton-title skeleton-animate"></view>
|
||
<view class="skeleton-share-btn skeleton-animate"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品图片骨架 -->
|
||
<view class="skeleton-product-image" :style="{
|
||
marginTop: (menu.bottom || 88) + 8 + 'px',
|
||
width: '100vw',
|
||
height: '100vw'
|
||
}">
|
||
<view class="skeleton-swiper skeleton-animate"></view>
|
||
</view>
|
||
|
||
<!-- 商品信息骨架 -->
|
||
<view class="skeleton-product-info">
|
||
<!-- 价格区域 -->
|
||
<view class="skeleton-price-section">
|
||
<view class="skeleton-price skeleton-animate"></view>
|
||
<view class="skeleton-original-price skeleton-animate"></view>
|
||
</view>
|
||
|
||
<!-- 标题和描述 -->
|
||
<view class="skeleton-title-section">
|
||
<view class="skeleton-product-title skeleton-animate"></view>
|
||
<view class="skeleton-product-subtitle skeleton-animate"></view>
|
||
</view>
|
||
|
||
<!-- 规格选择 -->
|
||
<view class="skeleton-spec-section">
|
||
<view class="skeleton-spec-title skeleton-animate"></view>
|
||
<view class="skeleton-spec-options">
|
||
<view class="skeleton-spec-item skeleton-animate" v-for="item in 3" :key="item"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品详情骨架 -->
|
||
<view class="skeleton-detail-section">
|
||
<view class="skeleton-detail-tabs">
|
||
<view class="skeleton-tab-item skeleton-animate" v-for="item in 2" :key="item"></view>
|
||
</view>
|
||
<view class="skeleton-detail-content">
|
||
<view class="skeleton-detail-line skeleton-animate" v-for="item in 5" :key="item"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部按钮骨架 -->
|
||
<view class="skeleton-bottom-bar">
|
||
<view class="skeleton-bottom-left">
|
||
<view class="skeleton-cart-btn skeleton-animate"></view>
|
||
<view class="skeleton-collect-btn skeleton-animate"></view>
|
||
</view>
|
||
<view class="skeleton-bottom-right">
|
||
<view class="skeleton-buy-btn skeleton-animate"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- scroll-y="true" @scroll="handlePageScroll" :scroll-into-view="scrollView" -->
|
||
<view v-else class="page-body" :style="{ paddingBottom: `${134 + (isCountdown || panicBuying ? 64 : 0)}rpx` }">
|
||
<div class="product-image" :style="{
|
||
// marginTop: menu.top - 4 + 'px',
|
||
marginTop: menu.bottom + 8 + 'px',
|
||
width: '100vw',
|
||
height: '100vw',
|
||
}">
|
||
<view class="header" :style="{
|
||
height: menu.bottom + 8 + 'px',
|
||
// background: showTopFixed ? '#fff' : '',
|
||
background: '#fff'
|
||
}">
|
||
<view class="headerBottom" :style="{ bottom: 0, height: menu.height + 'px' }">
|
||
<view class="backArrowBox">
|
||
<image class="img" @click="handleBackIndex" src="/static/images/home/backArrowblack.svg" />
|
||
<view class="line"></view>
|
||
<image class="img" src="/static/images/home/export.svg" @click="handleShowExportBox" />
|
||
</view>
|
||
|
||
<view class="tabBox" v-if="showTopFixed">
|
||
<view @click="handleChangePageTab(1)" :class="pageTab === 1 ? 'tabItem selectTabItem' : 'tabItem'">商品
|
||
</view>
|
||
<view @click="handleChangePageTab(2)" :class="pageTab === 2 ? 'tabItem selectTabItem' : 'tabItem'">详情
|
||
</view>
|
||
</view>
|
||
<view class="rightContent"></view>
|
||
|
||
<view class="moreFunBox" :style="{ top: menu.top + 'px' }" v-if="showExportFun">
|
||
<view class="triangle"></view>
|
||
<view class="funList">
|
||
<view class="funItem" v-for="(item, index) in funList" :key="index" @click="handleExpentGo(item)">
|
||
<image class="funItemIcon" :src="item.src" />
|
||
<text class="funItemText" :style="{
|
||
border: index + 1 === funList.length ? 'none' : '',
|
||
}">{{ item.label }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<block v-if="good.List && good.List.length > 0">
|
||
<!-- interval="3000" -->
|
||
<swiper scroll-x="true" class="banner" circular :indicator-dots="true" indicator-active-color="#ff6d00"
|
||
:autoplay="true" id="banner">
|
||
<swiper-item v-for="(img, i) in good.List" :key="i">
|
||
<!-- <view
|
||
:style="{
|
||
width: '100%',
|
||
height: '100%',
|
||
backgroundImage: `url(${img.IMAGE_URL})`,
|
||
backgroundSize: '100% 100%',
|
||
}"
|
||
></view> -->
|
||
<image mode="aspectFit" :lazy-load="true" :src="img.IMAGE_URL" @click="handlePreviewSwiper(img, i)">
|
||
</image>
|
||
</swiper-item>
|
||
</swiper>
|
||
<!-- <div class="swiper-dots" v-if="pageMsg.imgeCount > 0">
|
||
<div class="dot">
|
||
{{ pageMsg.current + 1 }}/{{ pageMsg.imgeCount }}
|
||
</div>
|
||
</div> -->
|
||
</block>
|
||
<block v-else>
|
||
<view class="defaultImgBox">
|
||
<image mode="aspectFit" :lazy-load="true" :src="good.DEFAULT_IMG"></image>
|
||
</view>
|
||
</block>
|
||
</div>
|
||
|
||
<hr />
|
||
<div class="product-info">
|
||
<div style="
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
padding: 16rpx 32rpx 16rpx 32rpx;
|
||
justify-content: space-between;
|
||
">
|
||
<!-- align-items: center;
|
||
justify-content: space-between; -->
|
||
<view style="display: flex">
|
||
<div class="price-box">
|
||
<div class="vip-price">
|
||
<span class="unit">¥</span>
|
||
<span style="font-weight: bold">
|
||
{{ good.bigNumber || "" }}.{{ good.smallNumber || "00" }}
|
||
<!-- {{ good.COMMODITY_MEMBERPRICE || "-" }} -->
|
||
</span>
|
||
</div>
|
||
|
||
<!-- <div class="originalPrice" v-if="pageType === 'UnionMall'">
|
||
<span class="unit">¥</span>
|
||
<span class="oldPrice">
|
||
{{ good.RETbigNumber || "" }}.{{ good.RETsmallNumber || "00" }}
|
||
</span>
|
||
</div> -->
|
||
</div>
|
||
|
||
|
||
<div class="marketBottom" v-if="good.COMMODITY_RETAILPRICE">
|
||
<span class="marketPrice">市场价：¥{{ good.COMMODITY_RETAILPRICE }}</span>
|
||
</div>
|
||
</view>
|
||
|
||
|
||
<div>
|
||
<view class="inventory">销量：{{ good.COMMODITY_EN || "0" }}</view>
|
||
<!-- <span class="sale-count">
|
||
{{
|
||
good.COMMODITY_STOCK > 0 ? "库存 " + good.COMMODITY_STOCK : "售罄"
|
||
}}</span
|
||
>
|
||
<span class="sale-count">已售 {{ good.SALE_COUNT }}</span> -->
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div class="product-title">
|
||
{{ good.COMMODITY_NAME || "-" }}
|
||
</div>
|
||
<div class="product-brand" style="align-items: flex-end">
|
||
<!-- <view class="oldPrice"
|
||
>原价：¥ {{ good.RETbigNumber || "" }}.{{
|
||
good.RETsmallNumber || "00"
|
||
}}</view
|
||
> -->
|
||
<view class="inventory">库存：{{ good.COMMODITY_STOCK || "0" }}</view>
|
||
<view class="inventory" style="max-width: 50%;">规格：{{ good.COMMODITY_RULE || "" }}</view>
|
||
|
||
<button class="share-btn" @tap="handleShowPopup">
|
||
<!-- <van-icon name="share" color="#ea3323" size="20px" /> -->
|
||
<div style="width: 16px; height: 16px">
|
||
<image style="width: 16px; height: 16px" src="/static/images/home/share.svg" />
|
||
</div>
|
||
<div>分享</div>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="product-brand" v-if="good.REMINDER_DAY">
|
||
<view class="inventory">{{ `平均${good.REMINDER_DAY}天内发货` }}</view>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="product-detail" style="background: #fff; padding: 0" v-if="
|
||
new Date(good.UPPER_DATE).getTime() > new Date().getTime() ||
|
||
good.SEND_MODE > 0 ||
|
||
good.DELIVER_AREA ||
|
||
good.LIMIT_TOTALCOUNT > 0
|
||
">
|
||
<view class="detail-right" style="width: 100%; box-sizing: border-box; padding: 0 32rpx">
|
||
<view v-if="new Date(good.UPPER_DATE).getTime() > new Date().getTime()">预售时间：{{
|
||
good.UPPER_DATE && good.OFF_DATE
|
||
? `${good.UPPER_DATE || "-"}-${good.OFF_DATE || "-"}`
|
||
: good.UPPER_DATE && !good.OFF_DATE
|
||
? `${good.UPPER_DATE || "-"}起`
|
||
: ""
|
||
}}</view>
|
||
<!-- 预售时间：{{ good.UPPER_DATE || "-" }}-{{
|
||
good.OFF_DATE || "-"
|
||
}} -->
|
||
<view>{{
|
||
good.SEND_MODE === 1000
|
||
? "发货模式：自提"
|
||
: good.SEND_MODE === 2000
|
||
? "发货模式：邮寄"
|
||
: good.SEND_MODE === 3000
|
||
? "发货模式：免发货"
|
||
: ""
|
||
}}</view>
|
||
|
||
<view>{{
|
||
good.DELIVER_AREA
|
||
? `配送区域：${good.DELIVER_AREA || "仅限云南省即江浙沪包邮区购买"}`
|
||
: ""
|
||
}}</view>
|
||
<view>{{
|
||
good.LIMIT_TOTALCOUNT
|
||
? `限购数量：每人限购${good.LIMIT_TOTALCOUNT}件`
|
||
: ""
|
||
}}</view>
|
||
<view>{{
|
||
good.LIMIT_TOTALCOUNT
|
||
? `每日限购：每人每日限购${good.LIMIT_TOTALCOUNT}件`
|
||
: ""
|
||
}}</view>
|
||
</view>
|
||
</div>
|
||
|
||
<div class="product-detail" style="background: #fff; padding: 0" v-if="good.AFTERSALE_NATRUE">
|
||
<view class="detail-right" style="width: 100%; box-sizing: border-box; padding: 16rpx 32rpx">
|
||
<view>{{
|
||
good.AFTERSALE_NATRUE
|
||
? `${good.AFTERSALE_NATRUE == 1000
|
||
? "仅支持退货"
|
||
: good.AFTERSALE_NATRUE == 2000
|
||
? "仅支持换货"
|
||
: good.AFTERSALE_NATRUE == 3000
|
||
? "支持退货和换货"
|
||
: ""
|
||
}`
|
||
: ""
|
||
}}</view>
|
||
</view>
|
||
</div>
|
||
|
||
<div class="product-detail" style="padding-bottom: 16rpx" v-if="good.COMMODITY_DESC">
|
||
<div class="detail-unit" style="flex-direction: column" id="detail">
|
||
<div class="detail-title desc-ico" style="margin-bottom: 32rpx; box-sizing: border-box; padding: 0 32rpx">
|
||
商品备注
|
||
</div>
|
||
<div class="detail-right" style="width: 100%; box-sizing: border-box; padding: 0 32rpx">
|
||
{{ good.COMMODITY_DESC || "暂无" }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="product-detail" v-if="!(good.ContentImgList && good.ContentImgList.length > 0)">
|
||
<div class="detail-unit" style="flex-direction: column" id="detail">
|
||
<div class="detail-title desc-ico" style="margin-bottom: 32rpx; box-sizing: border-box; padding: 0 32rpx">
|
||
商品简介
|
||
</div>
|
||
<div class="detail-right">
|
||
<rich-text :nodes="good.COMMODITY_INTRO"></rich-text>
|
||
<!-- {{ good.COMMODITY_DESC || "暂无" }} -->
|
||
</div>
|
||
</div>
|
||
<!-- <div class="">
|
||
<div class="detail-unit rate-title">
|
||
<div class="detail-title desc-ico">
|
||
评价
|
||
</div>
|
||
<div class="rate-desc" @click="goRate" v-show="pageMsg.rateTotal > 0">
|
||
<span>共{{ pageMsg.rateTotal }}条评论</span>
|
||
<van-icon
|
||
name="arrow"
|
||
size="20rpx"
|
||
color="#262626"
|
||
custom-style="margin-left: 8rpx;"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
|
||
</div>
|
||
<block v-if="good.ContentImgList && good.ContentImgList.length > 0" id="detail">
|
||
<!-- ContentImgList -->
|
||
<div class="detail-unit">
|
||
<span class="detail-title desc-ico">产品介绍</span>
|
||
</div>
|
||
<div class="detail-image-box">
|
||
<block v-for="(img, i) in good.ContentImgList" :key="i" v-show="detailImgList[i]">
|
||
<image mode="widthFix" class="img" :lazy-load="true" :src="img.IMAGE_URL" @load="loadDetailImg($event, i)"
|
||
@click="handlePreviewDetailImg(img, good.ContentImgList)"></image>
|
||
<!-- :style="
|
||
'width:' +
|
||
detailImgList[i].width +
|
||
'rpx; height:' +
|
||
detailImgList[i].height +
|
||
'rpx;'
|
||
" -->
|
||
</block>
|
||
</div>
|
||
</block>
|
||
|
||
|
||
|
||
<uni-popup :show="showShareBox" position="bottom" overlay="false" @close="handleClosePopup" ref="popup"
|
||
:safe-area="false">
|
||
<view class="share-popup" style="background-color: #fff">
|
||
<view class="share-divider">
|
||
<text>分享</text>
|
||
</view>
|
||
<!-- <van-divider contentPosition="center">分享</van-divider> -->
|
||
<view class="share-pop-btn">
|
||
<button open-type="share" @tap="handleClosePopup">
|
||
<image src="https://eshangtech.com/ShopICO/icos/fxhy.png" act></image>
|
||
<text>分享给好友</text>
|
||
</button>
|
||
<!-- <button @tap="creatPageQR">
|
||
<image src="https://eshangtech.com/ShopICO/icos/fxpyq.png"></image>
|
||
<text>生成分享海报</text>
|
||
</button> -->
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<uni-popup ref="shopPopup" :safe-area="false">
|
||
<view class="shopPopupBox">
|
||
<view class="shopPopupContent">
|
||
<div class="detailTop">
|
||
<image class="detailImg" :src="good.DEFAULT_IMG || '/static/images/home/defultImg.png'" />
|
||
<div class="box">
|
||
<div class="nameTop">
|
||
<text class="name">{{ good.COMMODITY_NAME }}</text>
|
||
<image class="closeIcon" @click="handleClosePop"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg" />
|
||
</div>
|
||
<div class="priceBox">
|
||
<text class="priceIcon">￥</text>
|
||
<text class="price">{{ good.COMMODITY_MEMBERPRICE }}</text>
|
||
<text class="unit">/{{ good.COMMODITY_UNIT }}</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<scroll-view :scroll-y="true" class="scrollDetailBox">
|
||
<div class="detailMessage">
|
||
<p class="detailTitle">详细信息</p>
|
||
<text class="detailText"></text>
|
||
</div>
|
||
<div class="orderDetail">
|
||
<p class="orderTitle">下单信息</p>
|
||
<div class="numBox">
|
||
<text class="numTitle">购买数量</text>
|
||
<div class="cartcontrol">
|
||
<div class="subtract" @click="handleDetailSubtract($event, good)">
|
||
<image class="img" src="/static/images/home/subtract.svg"></image>
|
||
</div>
|
||
<input class="cart-count" confirm-type="done" type="digit" :maxlength="7"
|
||
style="background: #fff; text-align: center; width: 100px" placeholder="0"
|
||
@blur="haveFocus($event, good)" @focus="haveFocus($event, good)" v-model="good.count" />
|
||
<!-- @input="handleNumber" -->
|
||
|
||
<div class="subtract" @click="handleDetailAdd($event, good)">
|
||
<image class="img" src="/static/images/home/addIcon.svg"></image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sizeBox">
|
||
<div class="sizeTitle">规格</div>
|
||
|
||
<scroll-view :scroll-x="true" :scroll-y="true" class="sizeScrollBox">
|
||
<div class="sizeList">
|
||
<div :class="good.RTCOMMODITY_MULTI_ID === item.RTCOMMODITY_MULTI_ID
|
||
? 'sizeItem selectSizeItem'
|
||
: 'sizeItem'
|
||
" :style="{
|
||
background: item.COMMODITY_STOCK > 0 ? good.RTCOMMODITY_MULTI_ID === item.RTCOMMODITY_MULTI_ID ? '#e7f3ff' : '#dbdad6' : '#9c9c9a0',
|
||
color: item.COMMODITY_STOCK > 0 ? good.RTCOMMODITY_MULTI_ID === item.RTCOMMODITY_MULTI_ID ? '#1890ff' : '#000' : '#a4a4a4'
|
||
}" v-for="(item, index) in good.SKULIST" :key="index"
|
||
@click="handleChangeSelectSKULIST(item.RTCOMMODITY_MULTI_ID, item)">
|
||
{{ item.COMMODITY_NAME }}
|
||
</div>
|
||
<!-- <div class="sizeItem">{{ good.COMMODITY_UNIT }}</div> -->
|
||
</div>
|
||
</scroll-view>
|
||
</div>
|
||
<!-- <div class="sizeBox">
|
||
<text class="sizeTitle">规格</text>
|
||
<div class="sizeList">
|
||
<div :class="good.COMMODITY_RULE === item.COMMODITY_MULTI_ID
|
||
? 'sizeItem selectSizeItem'
|
||
: 'sizeItem'
|
||
" v-for="(item, index) in good.SKULIST" :key="index"
|
||
@click="handleChangeSelectSKULIST(item.COMMODITY_MULTI_ID)">
|
||
{{ item.COMMODITY_NAME }}
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
<div class="descBox">
|
||
<input class="desc" :value="good.SALEDETAIL_DESC" placeholder="请填写商品备注"
|
||
@input="handleDesc($event, good)" />
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view class="bottomBtn">
|
||
<view class="shopCarBtn" v-if="bottomBtnType === 1" @click="handleAddShopCar">加入购物车</view>
|
||
<view class="makeOrderBtn" v-if="bottomBtnType === 2" @click="handleMakeOrder">立即购买</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
|
||
<div class="product-btn-box">
|
||
<view class="leftBtn">
|
||
<view class="btnItem" @click="handleBackIndex">
|
||
<image class="btnItemImg" src="https://eshangtech.com/ShopICO/shoppingMall/home.png" />
|
||
<text class="btnItemText">首页</text>
|
||
</view>
|
||
<view class="btnItem" @click="handleCollect">
|
||
<image class="btnItemImg"
|
||
:src="isCollect ? '/static/images/home/collected.svg' : '/static/images/home/collect.svg'" />
|
||
<text class="btnItemText">收藏</text>
|
||
</view>
|
||
<view class="btnItem" @click="handleShowShopCar">
|
||
<image class="btnItemImg" src="/static/images/home/shopCarIcon.svg" />
|
||
<text class="btnItemText">购物车</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="home-btn" url="/pages/home/index" open-type="switchTab"
|
||
>首页</view
|
||
> -->
|
||
|
||
<!-- 积分暂时没有规定 所以 -->
|
||
<view class="rightBtn" v-if="good.PAY_METHOD !== 2000 && pageType !== 'pointsMall' && !offShop">
|
||
<div class="addCarBtn" @click="handleShowShopPopup(1)">加入购物车</div>
|
||
<div class="sellOut presale" @click="handleShowShopPopup(4)" v-if="isCountdown">
|
||
预售中
|
||
</div>
|
||
<div class="addOrder" @click="handleShowShopPopup(2)"
|
||
v-if="good.OFF_DATE && !isCountdown ? new Date().getTime() < new Date(good.OFF_DATE).getTime() : (good.COMMODITY_STOCK > 0 && !isCountdown)">
|
||
立即购买
|
||
</div>
|
||
<div class="sellOut" @click="handleShowShopPopup(3)" v-if="good.COMMODITY_STOCK === 0 && !isCountdown">
|
||
已售罄
|
||
</div>
|
||
<div class="sellOut" @click="handleShowShopPopup(3)"
|
||
v-if="new Date().getTime() > new Date(good.OFF_DATE).getTime() && !(good.OFF_DATE && !isCountdown)">
|
||
已结束
|
||
</div>
|
||
</view>
|
||
|
||
<view class="rightBtn" v-if="(good.PAY_METHOD === 2000 || pageType === 'pointsMall') && !offShop">
|
||
<div class="sellOut" style="width: 100%;border-radius: 16rpx;">
|
||
积分不足
|
||
</div>
|
||
</view>
|
||
<!-- <div
|
||
class="buynow-btn"
|
||
@click="getMemberPoint(1)"
|
||
v-if="good.COMMODITY_STOCK > 0 && good.PAY_METHOD !== 1000"
|
||
>
|
||
立即兑换
|
||
</div>
|
||
<div
|
||
class="join-shopCart"
|
||
@click="getMemberPoint(2)"
|
||
v-if="good.COMMODITY_STOCK > 0 && good.PAY_METHOD !== 2000"
|
||
>
|
||
立即购买
|
||
</div>
|
||
<div
|
||
class="buynow-btn"
|
||
style="background: #eee; color: #999"
|
||
v-if="good.COMMODITY_STOCK < 1"
|
||
>
|
||
已售罄
|
||
</div> -->
|
||
</div>
|
||
|
||
<!-- 预售倒计时 -->
|
||
<div class="countdown" v-if="isCountdown || panicBuying">
|
||
此商品为{{ panicBuying ? '热销' : '预售' }}商品，{{ panicBuying ? '抢购' : '起售' }}倒计时 {{ countdown || "" }}
|
||
</div>
|
||
|
||
<!-- 商品下架显示 -->
|
||
<div class="offShopDown" v-if="offShop">商品已下架！</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
// import rateItem from "../../rate/components/rateItem";
|
||
import { mapGetters, mapActions, mapMutations } from "vuex";
|
||
export default {
|
||
data() {
|
||
const windows = uni.getSystemInfoSync();
|
||
return {
|
||
isPageLoading: true,
|
||
safeHeight: 0,
|
||
pageMsg: {
|
||
current: 0,
|
||
imgeCount: 0,
|
||
goodId: "",
|
||
buyCount: 1,
|
||
rateTotal: 0,
|
||
memberPoint: 0,
|
||
money: 0,
|
||
},
|
||
isShowCount: 0,
|
||
showSharePro: false, // 是否生成分享海报
|
||
showShareBox: false, // 是否展示分享选项
|
||
good: {},
|
||
rateList: [], // 评价列表
|
||
detailImgList: [],
|
||
windowMsg: {
|
||
width: 375,
|
||
height: 667,
|
||
ratio: 0.5,
|
||
scale: windows.pixelRatio,
|
||
},
|
||
menu: {
|
||
top: 44,
|
||
bottom: 88,
|
||
height: 32
|
||
},
|
||
inputMaxLength: -1,
|
||
bottomBtnType: 0,
|
||
shopCarList: [], // 当前的购物车
|
||
funList: [
|
||
{ label: "首页", value: 1, src: "/static/images/shopTabbar/home.png" },
|
||
{
|
||
label: "分类",
|
||
value: 2,
|
||
src: "/static/images/shopTabbar/classification.png",
|
||
},
|
||
{
|
||
label: "购物车",
|
||
value: 3,
|
||
src: "/static/images/shopTabbar/shopCar.png",
|
||
},
|
||
], // 展开来的方法列表
|
||
showExportFun: false, // 显示展开的悬浮框
|
||
showTopFixed: false, // 顶部显示的锚点tab
|
||
pageTab: 1, // 锚点tab的选中
|
||
scrollView: "", // 滚动的锚点
|
||
pageType: "", // 页面类型 UnionMall 为工会之家
|
||
countdown: "", // 存储倒计时的显示内容
|
||
isCountdown: false, // 判断是否进入到倒计时
|
||
panicBuying: false,//判断是否是抢购的倒计时
|
||
timer: null, // 定时器
|
||
isCollect: false,
|
||
shopId: "",// 商品id
|
||
offShop: false,// 判断商品是否下架了
|
||
};
|
||
},
|
||
components: {
|
||
// rateItem,
|
||
// UniPopup,
|
||
},
|
||
computed: {
|
||
...mapGetters("shoppingCart", {
|
||
totalNum: "goodNum",
|
||
}),
|
||
...mapGetters(["user"]),
|
||
},
|
||
methods: {
|
||
...mapActions("shoppingCart", {
|
||
addGood: "ADDGOOD",
|
||
addCate: "ADDCATE",
|
||
}),
|
||
...mapMutations("shoppingCart", {
|
||
setOrder: "ORDERGOOD",
|
||
}),
|
||
...mapMutations(["setInvitedCode"]),
|
||
// 备注的输入框
|
||
handleDesc(e, item) {
|
||
this.good.SALEDETAIL_DESC = e.detail.value
|
||
},
|
||
// 查一下 当前商品有没有被收藏
|
||
|
||
// 收藏
|
||
async handleCollect() {
|
||
|
||
|
||
|
||
if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
|
||
let _this = this;
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "请您授权登录后再操作。",
|
||
success(res) {
|
||
if (res.confirm) {
|
||
uni.navigateTo({ url: "/pages/register/index" });
|
||
}
|
||
},
|
||
});
|
||
return;
|
||
}
|
||
if (this.isCollect) {
|
||
console.log('this.isCollectthis.isCollect', this.isCollect);
|
||
console.log('this.good', this.good);
|
||
|
||
let req = {
|
||
COLLECTIONId: this.good.COLLECTION_ID,
|
||
type: "encryption",
|
||
}
|
||
// 同步收藏
|
||
console.log('reqreqreq', req);
|
||
const data = await this.$api.$zzyLocalPost(
|
||
"/Member/DeleteCOLLECTION",
|
||
req
|
||
);
|
||
console.log('data', data);
|
||
if (data.Result_Code === 100) {
|
||
uni.showToast({
|
||
title: '取消成功！',
|
||
icon: 'none'
|
||
})
|
||
this.isCollect = false
|
||
} else {
|
||
uni.showToast({
|
||
title: data.Result_Desc,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} else {
|
||
if (this.offShop) {
|
||
return
|
||
}
|
||
|
||
let req = {
|
||
COLLECTION_ID: this.good.COLLECTION_ID || "",
|
||
COLLECTION_TYPE: 2000,
|
||
MEMBERSHIP_ID: this.user.MEMBERSHIP_ID,
|
||
TABLE_ID: this.good.COMMODITY_ID,
|
||
TABLE_NAME: "COOP_MERCHANT.T_COMMODITY",
|
||
APP_GUID: "wxee018fb96955552a",
|
||
COLLECTION_STATE: 1,
|
||
PROVINCE_CODE: this.user.PROVINCE_CODE,
|
||
OWNERUNIT_ID: 911,
|
||
type: "encryption",
|
||
STAFF_NAME: this.user.MEMBERSHIP_NAME,
|
||
OPERATE_DATE: this.$moment.now().format("YYYY-MM-DD")
|
||
}
|
||
// 同步收藏
|
||
console.log('reqreqreq', req);
|
||
|
||
const data = await this.$api.$zzyLocalPost(
|
||
"/Member/SynchroCOLLECTION",
|
||
req
|
||
);
|
||
console.log('data', data);
|
||
if (data.Result_Code === 100) {
|
||
uni.showToast({
|
||
title: '已添加至收藏夹',
|
||
icon: 'none'
|
||
})
|
||
this.isCollect = true
|
||
await this.getDetail(this.good.COMMODITY_ID);
|
||
this.$forceUpdate()
|
||
} else {
|
||
uni.showToast({
|
||
title: data.Result_Desc,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// if (this.isCollect) {
|
||
// let collectGoodList = uni.getStorageSync('collectGood')
|
||
// let newList = []
|
||
// if (collectGoodList && collectGoodList.length > 0) {
|
||
// collectGoodList.forEach((item) => {
|
||
// if (item.COMMODITY_ID !== this.shopId) {
|
||
// newList.push(item)
|
||
// }
|
||
// })
|
||
// }
|
||
// uni.setStorageSync('collectGood', newList)
|
||
// uni.showToast({
|
||
// title: '取消收藏',
|
||
// icon: 'none'
|
||
// })
|
||
// this.isCollect = false
|
||
// } else {
|
||
// let collectGoodList = uni.getStorageSync('collectGood')
|
||
// if (collectGoodList && collectGoodList.length > 0) {
|
||
// collectGoodList.push(this.good)
|
||
// } else {
|
||
// collectGoodList = [this.good]
|
||
// }
|
||
// uni.setStorageSync('collectGood', collectGoodList)
|
||
// uni.showToast({
|
||
// title: '已添加至收藏夹',
|
||
// icon: 'none'
|
||
// })
|
||
// this.isCollect = true
|
||
// }
|
||
|
||
},
|
||
// 倒计时方法
|
||
startCountdown(targetTime) {
|
||
console.log("targetTime", targetTime);
|
||
|
||
let target = new Date(targetTime); // 目标时间
|
||
let _this = this;
|
||
|
||
this.timer = setInterval(() => {
|
||
let now = new Date(); // 当前时间
|
||
let timeDiff = target - now; // 目标时间与当前时间的差值（毫秒）
|
||
|
||
if (timeDiff <= 0) {
|
||
clearInterval(this.timer); // 倒计时结束，停止定时器
|
||
_this.isCountdown = false;
|
||
_this.panicBuying = false;
|
||
_this.countdown = "";
|
||
|
||
if (
|
||
new Date(_this.good.UPPER_DATE).getTime() > new Date().getTime()
|
||
) {
|
||
_this.isCountdown = true;
|
||
_this.startCountdown(_this.good.UPPER_DATE);
|
||
} else {
|
||
_this.isCountdown = false;
|
||
if (new Date(_this.good.OFF_DATE).getTime() > new Date().getTime()) {
|
||
_this.panicBuying = true;
|
||
_this.startCountdown(_this.good.OFF_DATE);
|
||
} else {
|
||
_this.panicBuying = false;
|
||
}
|
||
}
|
||
} else {
|
||
// 计算剩余时间的小时、分钟和秒数
|
||
let hours = Math.floor(timeDiff / (1000 * 60 * 60)); // 小时
|
||
let minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60)); // 分钟
|
||
let seconds = Math.floor((timeDiff % (1000 * 60)) / 1000); // 秒
|
||
|
||
// 格式化为“时:分:秒”
|
||
_this.countdown = ` ${hours}时${minutes}分${seconds}秒`;
|
||
}
|
||
}, 1000); // 每秒更新一次
|
||
},
|
||
// 输入框里面的数量
|
||
haveFocus(e, item) {
|
||
console.log("e", e);
|
||
let value = e.detail.value.toString();
|
||
let number = 0;
|
||
if (value.indexOf(".") === -1) {
|
||
number = Number(value);
|
||
} else {
|
||
let bigNumber = value.split(".")[0];
|
||
number = Number(bigNumber);
|
||
}
|
||
console.log("number", number);
|
||
|
||
if (number < 0) {
|
||
item.count = 1;
|
||
} else {
|
||
item.count = Number(number);
|
||
}
|
||
|
||
console.log("item", item);
|
||
this.good = item;
|
||
console.log("this.good", this.good);
|
||
this.$forceUpdate();
|
||
},
|
||
// 输入框输入的触发方法
|
||
// handleNumber(e) {
|
||
// console.log("e", e);
|
||
// if (e.detail.value.indexOf(".") !== -1) {
|
||
// const flag = e.detail.value.indexOf(".");
|
||
// console.log("flag", flag);
|
||
// if (flag === 0) {
|
||
// this.inputMaxLength = flag + 4;
|
||
// } else {
|
||
// this.inputMaxLength = flag + 3;
|
||
// }
|
||
// } else {
|
||
// // if (e.mp.detail.value === '') {
|
||
// // this.currentRow.count = 0
|
||
// // }
|
||
// this.inputMaxLength = -1;
|
||
// }
|
||
// console.log("inputMaxLength", this.inputMaxLength);
|
||
// },
|
||
handleClosePop() {
|
||
// this.good.COMMODITY_RULE = undefined;
|
||
this.$refs.shopPopup.close();
|
||
},
|
||
// 改变当前选中的规格
|
||
handleChangeSelectSKULIST(value, obj) {
|
||
if (obj.COMMODITY_STOCK > 0) {
|
||
console.log("value", value);
|
||
// this.good.COMMODITY_RULE = value;
|
||
this.good.COMMODITY_RULE = obj.COMMODITY_NAME;
|
||
this.good.RTCOMMODITY_MULTI_ID = value;
|
||
if (obj.COMMODITY_MEMBERPRICE) {
|
||
this.good.COMMODITY_MEMBERPRICE = obj.COMMODITY_MEMBERPRICE
|
||
}
|
||
if (obj.COMMODITY_PURCHASEPRICE) {
|
||
this.good.COMMODITY_PURCHASEPRICE = obj.COMMODITY_PURCHASEPRICE
|
||
}
|
||
console.log("this.good", this.good);
|
||
this.$forceUpdate()
|
||
} else {
|
||
uni.showToast({
|
||
title: "已售罄",
|
||
icon: 'error'
|
||
})
|
||
}
|
||
},
|
||
// 点击的锚点
|
||
handleChangePageTab(value) {
|
||
this.pageTab = value;
|
||
if (value === 1) {
|
||
this.scrollView = "banner";
|
||
} else {
|
||
this.scrollView = "detail";
|
||
}
|
||
},
|
||
// 预览轮播图
|
||
handlePreviewSwiper(obj) {
|
||
console.log("obj", obj);
|
||
let imgList = [];
|
||
if (this.good.List && this.good.List.length > 0) {
|
||
this.good.List.forEach((item) => {
|
||
imgList.push(item.IMAGE_URL);
|
||
});
|
||
}
|
||
uni.previewImage({
|
||
current: obj.IMAGE_URL, // 当前显示图片的http链接
|
||
urls: imgList, // 需要预览的图片http链接列表
|
||
});
|
||
},
|
||
// 预览详情图片
|
||
handlePreviewDetailImg(obj, list) {
|
||
console.log("obj", obj);
|
||
let imgList = [];
|
||
if (list && list.length > 0) {
|
||
imgList = list
|
||
} else {
|
||
if (this.good.List && this.good.List.length > 0) {
|
||
this.good.List.forEach((item) => {
|
||
imgList.push(item.IMAGE_URL);
|
||
});
|
||
}
|
||
}
|
||
|
||
uni.previewImage({
|
||
current: obj.IMAGE_URL, // 当前显示图片的http链接
|
||
urls: imgList, // 需要预览的图片http链接列表
|
||
});
|
||
},
|
||
handlePageScroll(e) {
|
||
// console.log("handlePageScroll", e.detail.scrollTop);
|
||
let scrollTop = e.detail.scrollTop;
|
||
if (scrollTop < 80) {
|
||
this.showTopFixed = false;
|
||
this.scrollView = "";
|
||
} else {
|
||
this.showTopFixed = true;
|
||
}
|
||
if (scrollTop < 300) {
|
||
this.scrollView = "banner";
|
||
this.pageTab = 1;
|
||
} else {
|
||
this.scrollView = "detail";
|
||
this.pageTab = 2;
|
||
}
|
||
|
||
this.showExportFun = false;
|
||
},
|
||
// 显示展开功能
|
||
handleShowExportBox() {
|
||
this.showExportFun = !this.showExportFun;
|
||
},
|
||
// 跳转对应的
|
||
handleExpentGo(obj) {
|
||
if (obj.value === 1) {
|
||
uni.redirectTo({
|
||
url: `/pages/shopMallPage/index/index?pageType=${this.pageType}`,
|
||
});
|
||
} else if (obj.value === 2) {
|
||
uni.redirectTo({
|
||
url: `/pages/shopMallPage/shopType/index?pageType=${this.pageType}`,
|
||
});
|
||
} else if (obj.value === 3) {
|
||
uni.redirectTo({
|
||
url: `/pages/shopMallPage/shopCar/index?pageType=${this.pageType}`,
|
||
});
|
||
}
|
||
},
|
||
// 返回首页
|
||
handleBackIndex() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
},
|
||
// 显示购物车
|
||
handleShowShopCar() {
|
||
if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
|
||
let _this = this;
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "请您授权登录后再操作。",
|
||
success(res) {
|
||
if (res.confirm) {
|
||
uni.navigateTo({ url: "/pages/register/index" });
|
||
}
|
||
},
|
||
});
|
||
return;
|
||
}
|
||
uni.redirectTo({
|
||
url: `/pages/shopMallPage/shopCar/index?pageType=${this.pageType}`,
|
||
});
|
||
},
|
||
// 加入购物车方法
|
||
handleAddShopCar() {
|
||
console.log('this.good', this.good);
|
||
|
||
if (
|
||
this.good.SKULIST &&
|
||
this.good.SKULIST.length > 0 &&
|
||
// (this.good.COMMODITY_RULE === "默认" || !this.good.COMMODITY_RULE)
|
||
(!this.good.RTCOMMODITY_MULTI_ID)
|
||
) {
|
||
uni.showToast({
|
||
title: "请先选择规格！",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 是否为已售罄
|
||
if (this.good.COMMODITY_STOCK === 0) {
|
||
uni.showToast({
|
||
title: "商品已售罄！",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (this.good.COMMODITY_STOCK < this.good.count) {
|
||
uni.showToast({
|
||
title: "商品库存不足！",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!this.good.COMMODITY_MEMBERPRICE) {
|
||
uni.showToast({
|
||
title: "商品信息有误，无法添加购物车！",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
|
||
|
||
console.log("this.good", this.good);
|
||
console.log('this.shopCarList', JSON.parse(JSON.stringify(this.shopCarList)));
|
||
// 当前购物车的数据
|
||
if (this.shopCarList && this.shopCarList.length > 0) {
|
||
let nowShopList = [];
|
||
// 判断有没有一样的
|
||
let isSame = false;
|
||
let list = JSON.parse(JSON.stringify(this.shopCarList));
|
||
console.log('listlistlistlist', list);
|
||
list.forEach((item) => {
|
||
// 先看看有没有规格id 如果选了规格 不一样规格 算不同的商品
|
||
if (this.good.RTCOMMODITY_MULTI_ID) {
|
||
// 是多规格 看一下 当前购物车中 是否已经有了 这个规格的商品
|
||
let filterRuleList = list.filter(
|
||
(item) => item.RTCOMMODITY_MULTI_ID === this.good.RTCOMMODITY_MULTI_ID
|
||
);
|
||
console.log('filterRuleList', JSON.parse(JSON.stringify(filterRuleList)));
|
||
|
||
// 如果有一样规格的 就替换值 没有 就等于新增商品
|
||
// 如果原本已经有了 那么就是当前购物车的数量 + 本次的数量
|
||
if (filterRuleList && filterRuleList.length > 0) {
|
||
if (item.COMMODITY_ID === this.good.COMMODITY_ID) {
|
||
item.count = this.good.count + item.count;
|
||
item.SALEDETAIL_DESC = this.good.SALEDETAIL_DESC
|
||
}
|
||
isSame = true;
|
||
} else {
|
||
// 同商品 但是不同规格的添加
|
||
// list.push({ ...this.good });
|
||
}
|
||
} else {
|
||
// 没有多规格 购物车中又已经有了该商品 那么就数量就加上这次添加到购物车的数量
|
||
if (item.COMMODITY_ID === this.good.COMMODITY_ID) {
|
||
// item.count = this.good.count;
|
||
item.count = this.good.count + item.count
|
||
item.SALEDETAIL_DESC = this.good.SALEDETAIL_DESC
|
||
isSame = true;
|
||
} else {
|
||
// 当前购物车中找不到同样的商品 说明是新商品 那么直接添加到购物车中
|
||
// list.push({ ...this.good });
|
||
// isSame = false
|
||
}
|
||
}
|
||
});
|
||
// nowShopList = list
|
||
// 判断是否是一样的商品
|
||
if (isSame) {
|
||
// nowShopList = this.shopCarList;
|
||
nowShopList = JSON.parse(JSON.stringify(list));
|
||
} else {
|
||
// this.shopCarList.push(this.good);
|
||
// list.push(this.good);
|
||
list.unshift(this.good);
|
||
|
||
// nowShopList = this.shopCarList;
|
||
nowShopList = JSON.parse(JSON.stringify(list));
|
||
}
|
||
|
||
console.log('nowShopListnowShopListnowShopList', nowShopList);
|
||
this.shopCarList = nowShopList
|
||
|
||
// 区分一下 这个是工会商城的购物车 还是外面商城的购物车
|
||
if (this.pageType === "UnionMall") {
|
||
this.$store.commit("unionMyShopCar", nowShopList);
|
||
} else {
|
||
this.$store.commit("myShopCar", nowShopList);
|
||
}
|
||
} else {
|
||
// 这是当前购物车为空的情况 那么就直接把当前商品 添加进去即可
|
||
let nowShopList = [];
|
||
let good = JSON.parse(JSON.stringify(this.good))
|
||
nowShopList.push(good);
|
||
this.shopCarList = [good]
|
||
console.log('nowShopListnowShopListnowShopList', this.shopCarList);
|
||
if (this.pageType === "UnionMall") {
|
||
this.$store.commit("unionMyShopCar", nowShopList);
|
||
} else {
|
||
this.$store.commit("myShopCar", nowShopList);
|
||
}
|
||
}
|
||
|
||
uni.showToast({
|
||
title: "加入成功！",
|
||
duration: 2000,
|
||
});
|
||
let _this = this
|
||
setTimeout(() => {
|
||
_this.handleCloseShopPopup()
|
||
// this.$refs.shopPopup.close();
|
||
}, 1000);
|
||
},
|
||
// 立即购买方法
|
||
async handleMakeOrder() {
|
||
let userInfo = {};
|
||
if (this.pageType === "UnionMall") {
|
||
// 获取最新的用户余额
|
||
uni.showLoading({
|
||
title: "获取用户余额...",
|
||
});
|
||
const userData = await this.$api.getCoop({
|
||
action_type: "GetMembershipInfo",
|
||
WechatUserId: this.user.WechatUserId,
|
||
});
|
||
userInfo = userData.Data;
|
||
console.log("this.userInfo", this.userInfo);
|
||
uni.hideLoading();
|
||
if (!(userInfo && userInfo.ACCOUNT_BALANCE > 0)) {
|
||
uni.showToast({
|
||
title: "您未被纳入工会会员采购名录，如有疑问，请联系工会咨询",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
|
||
if (
|
||
this.good.SKULIST &&
|
||
this.good.SKULIST.length > 0 &&
|
||
(this.good.COMMODITY_RULE === "默认" || !this.good.COMMODITY_RULE)
|
||
) {
|
||
console.log('this.goodthis.good', this.good);
|
||
|
||
uni.showToast({
|
||
title: "请先选择规格！",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
// 是否为已售罄
|
||
if (this.good.COMMODITY_STOCK === 0) {
|
||
uni.showToast({
|
||
title: "商品已售罄！",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (this.good.COMMODITY_STOCK < this.good.count) {
|
||
uni.showToast({
|
||
title: "商品库存不足！",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
console.log("this.good", this.good);
|
||
let nowShopList = [this.good];
|
||
|
||
if (nowShopList && nowShopList.length > 0) {
|
||
this.pageOut = true;
|
||
let orderList = [];
|
||
let noSelectList = [];
|
||
nowShopList.forEach((item) => {
|
||
item.ORDER_COUNT = item.count;
|
||
item.AVERAGE_PRICE = item.COMMODITY_MEMBERPRICE;
|
||
item.cartItemAoumt = Number(
|
||
(item.AVERAGE_PRICE * item.ORDER_COUNT).toFixed(2)
|
||
);
|
||
item.ORDER_AMOUNT = Number(
|
||
(item.AVERAGE_PRICE * item.ORDER_COUNT).toFixed(2)
|
||
);
|
||
item.COMMODITY_INTRO = "";
|
||
orderList.push(item);
|
||
});
|
||
// this.$store.commit('shopcartOrder', orderList)
|
||
// 购物车改了后有些id不一样了 统一一下
|
||
if (orderList && orderList.length > 0) {
|
||
orderList.forEach((item) => {
|
||
let [big, small] = item.COMMODITY_MEMBERPRICE.toString().split(".");
|
||
item.COMMODITY_INYEGER = big;
|
||
item.COMMODITY_DECIMAL = small;
|
||
// item.COMMODITY_ID = item.SELLERCOMMODITY_ID
|
||
});
|
||
}
|
||
console.log("noSelectList", noSelectList);
|
||
console.log("orderList", orderList);
|
||
let id = Number(
|
||
Math.random().toString().substr(3, 5) + Date.now()
|
||
).toString(36);
|
||
if (orderList.length > 0) {
|
||
uni.navigateTo({
|
||
url: `/pages/shopPages/settlement/index?pageType=${this.pageType
|
||
}&shopCarList=${JSON.stringify(orderList)}`,
|
||
});
|
||
} else {
|
||
uni.showToast({ title: "购物车内无勾选商品", icon: "none" });
|
||
}
|
||
}
|
||
},
|
||
// 减少当前商品
|
||
handleDetailSubtract(e, obj) {
|
||
if (obj.count > 0) {
|
||
if (obj.count - 1 === 0) {
|
||
obj.count = 1;
|
||
} else {
|
||
obj.count -= 1;
|
||
}
|
||
this.good = obj;
|
||
this.$forceUpdate();
|
||
}
|
||
},
|
||
// 增加当前商品的数量
|
||
handleDetailAdd(e, obj) {
|
||
obj.count += 1;
|
||
this.good = obj;
|
||
this.$forceUpdate();
|
||
},
|
||
// 打开购物车 或 立即购买的悬浮框 1 打开购物车 2 立即购买 3售罄 4预售
|
||
handleShowShopPopup(type) {
|
||
if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
|
||
let _this = this;
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "请您授权登录后再操作。",
|
||
success(res) {
|
||
if (res.confirm) {
|
||
uni.navigateTo({ url: "/pages/register/index" });
|
||
}
|
||
},
|
||
});
|
||
return;
|
||
}
|
||
if (type === 4) {
|
||
uni.showToast({
|
||
title: "商品预售中",
|
||
icon: "none",
|
||
});
|
||
} else if (type === 3) {
|
||
uni.showToast({
|
||
title: "商品已售罄",
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
if (!this.user.MEMBERSHIP_ID) {
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "请您授权登录后再操作。",
|
||
success(res) {
|
||
if (res.confirm) {
|
||
uni.navigateTo({ url: "/pages/register/index" });
|
||
}
|
||
},
|
||
});
|
||
} else {
|
||
this.bottomBtnType = type;
|
||
this.$refs.shopPopup.open("bottom");
|
||
}
|
||
}
|
||
},
|
||
handleShowPopup() {
|
||
this.$refs.popup.open("bottom");
|
||
this.showShareBox = true;
|
||
},
|
||
// 关闭分享框的事件
|
||
handleClosePopup() {
|
||
this.$refs.popup.close();
|
||
this.showShareBox = false;
|
||
},
|
||
// 关闭商品弹出框 触发的事件
|
||
handleCloseShopPopup() {
|
||
this.$refs.shopPopup.close();
|
||
// this.showShareBox = false;
|
||
// 关闭详情 在多规格的时候 把商品数量变为1 选择的规格 清空
|
||
this.good.count = 1
|
||
this.good.RTCOMMODITY_MULTI_ID = null
|
||
this.$forceUpdate()
|
||
},
|
||
swiperChange(e) {
|
||
this.pageMsg.current = e.mp.detail.current;
|
||
},
|
||
goShop() {
|
||
uni.navigateTo({ url: "/pages/product/shopCart/index" });
|
||
},
|
||
decodeHTML(str) {
|
||
return str
|
||
.replace(/</g, "<")
|
||
.replace(/>/g, ">")
|
||
.replace(/&/g, "&")
|
||
.replace(/"/g, '"')
|
||
.replace(/ /g, " ");
|
||
},
|
||
async getDetail(id) {
|
||
let _this = this;
|
||
const res = await this.$api
|
||
.getCoop({
|
||
action_type: "GetGoodsDetail",
|
||
commodityId: id,
|
||
})
|
||
|
||
|
||
console.log("detail", res);
|
||
res.Data.COMMODITY_GRADE = null
|
||
res.Data.LIMIT_TOTALCOUNT = res.Data.LIMIT_TOTALCOUNT.toString()
|
||
res.Data.LIMIT_DAILYCOUNT = res.Data.LIMIT_DAILYCOUNT.toString()
|
||
res.Data.REMINDER_DAY = res.Data.REMINDER_DAY.toString()
|
||
res.Data.SEND_MODE = res.Data.SEND_MODE.toString()
|
||
res.Data.AFTERSALE_NATRUE = res.Data.AFTERSALE_NATRUE.toString()
|
||
res.Data.DUTY_PARAGRAPH = res.Data.DUTY_PARAGRAPH.toString()
|
||
|
||
|
||
if (res.Data.COLLECTION_STATE === '1') {
|
||
_this.isCollect = true
|
||
}
|
||
|
||
_this.good = res.Data;
|
||
// 判断商品是否已经下架了 若当前时间大于 下架时间 就代表 已经下架了
|
||
if (_this.good.OFF_DATE && new Date().getTime() > new Date(_this.good.OFF_DATE).getTime()) {
|
||
_this.offShop = true
|
||
}
|
||
|
||
_this.good.COMMODITY_CURRPRICE = _this.good.COMMODITY_MEMBERPRICE;
|
||
_this.good.count = 1;
|
||
_this.pageMsg.current = 0;
|
||
_this.pageMsg.imgeCount = res.Data.List.length || 0;
|
||
_this.good.COMMODITY_INTRO = _this.decodeHTML(
|
||
res.Data.COMMODITY_INTRO
|
||
);
|
||
// _this.good.COMMODITY_DESC = _this.decodeHTML(res.Data.COMMODITY_DESC);
|
||
|
||
if (
|
||
_this.good.COMMODITY_MEMBERPRICE &&
|
||
_this.good.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
|
||
) {
|
||
_this.good.bigNumber =
|
||
_this.good.COMMODITY_MEMBERPRICE.toString().split(".")[0];
|
||
_this.good.smallNumber =
|
||
_this.good.COMMODITY_MEMBERPRICE.toString().split(".")[1];
|
||
} else {
|
||
_this.good.bigNumber = _this.good.COMMODITY_MEMBERPRICE;
|
||
}
|
||
|
||
if (
|
||
_this.good.COMMODITY_RETAILPRICE &&
|
||
_this.good.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
|
||
) {
|
||
_this.good.RETbigNumber =
|
||
_this.good.COMMODITY_RETAILPRICE.toString().split(".")[0];
|
||
_this.good.RETsmallNumber =
|
||
_this.good.COMMODITY_RETAILPRICE.toString().split(".")[1];
|
||
} else {
|
||
_this.good.RETbigNumber = _this.good.COMMODITY_RETAILPRICE;
|
||
}
|
||
console.log("_this.good", _this.good);
|
||
|
||
if (_this.good.COMMODITY_INTRO.indexOf("</br>") > -1) {
|
||
let desArr = _this.good.COMMODITY_INTRO.split("</br>");
|
||
_this.good.COMMODITY_INTRO = [];
|
||
desArr.forEach((element) => {
|
||
_this.good.COMMODITY_INTRO.push({
|
||
name: "p",
|
||
children: [{ type: "text", text: element }],
|
||
});
|
||
});
|
||
}
|
||
|
||
_this.good.ContentImgList.map((n) => {
|
||
_this.detailImgList.push({ width: 750, height: 400 });
|
||
});
|
||
|
||
if (
|
||
new Date(_this.good.UPPER_DATE).getTime() > new Date().getTime()
|
||
) {
|
||
_this.isCountdown = true;
|
||
_this.startCountdown(_this.good.UPPER_DATE);
|
||
} else {
|
||
_this.isCountdown = false;
|
||
if (new Date(_this.good.OFF_DATE).getTime() > new Date().getTime()) {
|
||
_this.panicBuying = true;
|
||
_this.startCountdown(_this.good.OFF_DATE);
|
||
} else {
|
||
_this.panicBuying = false;
|
||
}
|
||
}
|
||
|
||
},
|
||
getRate() {
|
||
// 获取商品评价
|
||
let _this = this;
|
||
_this.$api
|
||
.getCoop({
|
||
action_type: "getMallCommentList",
|
||
commodityId: this.pageMsg.goodId,
|
||
pageIndex: 1,
|
||
pageSize: 3,
|
||
})
|
||
.then((res) => {
|
||
_this.rateList = res.Data.List;
|
||
_this.pageMsg.rateTotal = res.Data.TotalCount;
|
||
});
|
||
},
|
||
goRate() {
|
||
uni.navigateTo({ url: "/pages/rate/index?id=" + this.pageMsg.goodId });
|
||
},
|
||
seePhoto(item, list) {
|
||
let u = [];
|
||
|
||
list.map((n) => {
|
||
u.push(n.IMAGE_URL);
|
||
});
|
||
uni.previewImage({
|
||
current: item, // 当前显示图片的http链接
|
||
urls: u, // 需要预览的图片http链接列表
|
||
});
|
||
},
|
||
addGoodToCartFn: function () {
|
||
// 添加商品到购物车
|
||
let cate = {
|
||
USERDEFINEDTYPE_NAME: this.good.USERDEFINEDTYPE_NAME,
|
||
USERDEFINEDTYPE_ID: this.good.USERDEFINEDTYPE_ID,
|
||
};
|
||
this.addGood(this.good);
|
||
this.addCate(cate);
|
||
this.$forceUpdate();
|
||
},
|
||
|
||
buyNow() {
|
||
let s = [];
|
||
let _this = this;
|
||
let el = this.good;
|
||
|
||
if (
|
||
_this.isShowCount === 1 &&
|
||
_this.pageMsg.memberPoint < this.pageMsg.buyCount * el.COMMODITY_POINT
|
||
) {
|
||
uni.showToast({
|
||
title: "您的积分不足",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
s.push({
|
||
COMMODITY_ID: el.COMMODITY_ID,
|
||
COMMODITY_CODE: el.COMMODITY_CODE,
|
||
COMMODITY_NAME: el.COMMODITY_NAME,
|
||
COMMODITY_BARCODE: el.COMMODITY_BARCODE,
|
||
COMMODITY_UNIT: el.COMMODITY_UNIT,
|
||
COMMODITY_RULE: el.COMMODITY_RULE,
|
||
COMMODITY_POINT: el.COMMODITY_POINT,
|
||
ORDER_COUNT: this.pageMsg.buyCount,
|
||
AVERAGE_PRICE: el.COMMODITY_MEMBERPRICE,
|
||
ORDER_AMOUNT: this.pageMsg.buyCount * el.COMMODITY_MEMBERPRICE,
|
||
DISCOUNT_AMOUNT: 0,
|
||
SUPPLIER_ID: el.SUPPLIER_ID,
|
||
SUPPLIER_NAME: el.SUPPLIER_NAME,
|
||
DEFAULT_IMG: el.DEFAULT_IMG,
|
||
PAY_TYPE: _this.isShowCount === 1 ? 3000 : 1000, // 支付方式 3000 积分支付
|
||
});
|
||
_this.isShowCount = 0;
|
||
_this.setOrder(s);
|
||
uni.navigateTo({
|
||
url:
|
||
"/pages/product/confirmOrder/index?type=1&nature=" +
|
||
el.COMMODITY_NATURE,
|
||
});
|
||
},
|
||
loadDetailImg(e, i) {
|
||
// 加载商品介绍图片指定原尺寸宽高
|
||
let $width = e.mp.detail.width; // 获取图片真实宽度
|
||
let $height = e.mp.detail.height;
|
||
// 将图片的datadata-index作为image对象的key,然后存储图片的宽高值
|
||
this.detailImgList[i] = {
|
||
width: $width,
|
||
height: $height,
|
||
};
|
||
this.$forceUpdate();
|
||
},
|
||
getMemberPoint(type) {
|
||
// 获取会员积分
|
||
let _this = this;
|
||
if (this.user.MEMBERSHIP_ID) {
|
||
this.$api
|
||
.getCoop({
|
||
action_type: "GetMemberPoint",
|
||
})
|
||
.then(function (rs) {
|
||
_this.pageMsg.memberPoint = rs.Data.MEMBERSHIP_POINT;
|
||
_this.pageMsg.money = rs.Data.MEMBERSHIP_POINT;
|
||
_this.isShowCount = type;
|
||
});
|
||
} else {
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "您还没有登录，快去登录吧",
|
||
confirmText: "一键登录",
|
||
confirmColor: "#498fe2",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateTo({ url: "/pages/register/index" });
|
||
}
|
||
},
|
||
});
|
||
}
|
||
},
|
||
creatPageQR() {
|
||
// 生成当前页面小程序二维码
|
||
let _this = this;
|
||
_this.showShareBox = false;
|
||
uni.showLoading({ title: "正在加载" });
|
||
_this.$api
|
||
.getCoop({
|
||
action_type: "CreateWxCode",
|
||
page: "pages/product/productDetail/index",
|
||
scene: _this.pageMsg.goodId + "&" + _this.user.InviteCode, // 商品id & 当前用户邀请码
|
||
width: 280,
|
||
})
|
||
.then((res) => {
|
||
console.log("creatPageQR", res);
|
||
// let bin64 = res.Data.imgUrl
|
||
// 生成的base64二维码
|
||
// let fs = uni.getFileSystemManager()
|
||
|
||
// fs.writeFile({
|
||
// filePath: `${uni.env.USER_DATA_PATH}/` + _this.pageMsg.goodId + `pro.png`,
|
||
// data: bin64,
|
||
// encoding: 'base64',
|
||
// success (res) {
|
||
uni.getImageInfo({
|
||
src: res.Data.imgUrl,
|
||
success(res) {
|
||
let codePath = res.path;
|
||
let codeW = res.width;
|
||
|
||
uni.getImageInfo({
|
||
src: _this.good.DEFAULT_IMG, // _this.good.DEFAULT_IMG,
|
||
success: (rs) => {
|
||
let productPath = rs.path;
|
||
let productW = rs.width;
|
||
let productH = rs.height;
|
||
_this.showSharePro = true;
|
||
_this.drawImage(
|
||
productPath,
|
||
productW,
|
||
productH,
|
||
codePath,
|
||
codeW
|
||
);
|
||
},
|
||
});
|
||
},
|
||
fail(err) {
|
||
console.error(err);
|
||
},
|
||
});
|
||
// },
|
||
// fail (err) {
|
||
// console.error(err)
|
||
// }})
|
||
});
|
||
},
|
||
drawImage(productPath, productW, productH, codePath, codeW) {
|
||
// 才canvas上画海报
|
||
let _this = this;
|
||
|
||
let canv = uni.createCanvasContext("pro", this);
|
||
let ratio = uni.getSystemInfoSync().windowWidth / 750; // 适配不同机型的图片比例
|
||
let imgMaxW = _this.windowMsg.width;
|
||
// let imgMaxH = _this.windowMsg.width
|
||
let canvHeight = _this.windowMsg.height;
|
||
|
||
let paddL = 24 * ratio;
|
||
let paddT = 24;
|
||
let clipWidth = imgMaxW * ratio;
|
||
let clipHeight = ((productH * imgMaxW) / productW) * ratio;
|
||
let imgLeft = 0;
|
||
|
||
if (productH / productW > 1.5 || clipHeight > clipWidth) {
|
||
// 如果图片原图比例1：1.5则需要根据商品的高度调整适配
|
||
clipHeight = imgMaxW * ratio;
|
||
clipWidth = (clipHeight * productW) / productH;
|
||
imgLeft = (imgMaxW * ratio - clipWidth) / 2;
|
||
}
|
||
|
||
// 设置一个背景色
|
||
canv.fillStyle = "#fff";
|
||
canv.fillRect(0, 0, imgMaxW * ratio, canvHeight);
|
||
// canv.draw()
|
||
|
||
// 设置字体大小、文本颜色 （如果不先写文字 则图片无法写入）
|
||
canv.setFontSize(20 * ratio);
|
||
canv.setFillStyle("#454545");
|
||
// 简易绘制两行文本，多余...
|
||
_this.canvasTextAutoLine(
|
||
_this.good.COMMODITY_NAME,
|
||
canv,
|
||
paddL,
|
||
paddT,
|
||
28,
|
||
clipWidth - 24,
|
||
1
|
||
); // 标题
|
||
// 绘制价格
|
||
|
||
let text = _this.good.PAY_METHOD === 2000 ? "积分" : "元";
|
||
let price =
|
||
_this.good.PAY_METHOD === 2000
|
||
? _this.good.COMMODITY_POINT
|
||
: _this.good.COMMODITY_MEMBERPRICE;
|
||
canv.setFontSize(30 * ratio);
|
||
canv.setFillStyle("#EA3323");
|
||
canv.fillText(price, paddL, paddT + 28 * ratio + 8);
|
||
|
||
let priceWidth = canv.measureText(price + "").width;
|
||
canv.setFontSize(16 * ratio);
|
||
canv.setFillStyle("#EA3323");
|
||
canv.fillText(text, paddL + priceWidth + 1, paddT + 28 * ratio + 8);
|
||
|
||
canv.setFontSize(16 * ratio);
|
||
canv.setFillStyle("#999");
|
||
canv.fillText(
|
||
"长按识别·去逛逛",
|
||
60 * ratio + 80,
|
||
(canvHeight - 92) * ratio
|
||
);
|
||
canv.draw();
|
||
|
||
canv.save();
|
||
// 绘制商品图片
|
||
canv.drawImage(
|
||
productPath,
|
||
0 + imgLeft,
|
||
paddT + 58 * ratio,
|
||
clipWidth,
|
||
clipHeight
|
||
);
|
||
|
||
// 绘制小程序二维码图片
|
||
|
||
canv.drawImage(codePath, 60 * ratio, (canvHeight - 164) * ratio, 72, 72);
|
||
canv.draw(true);
|
||
// canv.scale(ratio, ratio)
|
||
uni.hideLoading();
|
||
},
|
||
/*
|
||
* 绘制多行文本，自动换行，超出添加...
|
||
*
|
||
str:要绘制的字符串
|
||
canvas:canvas对象
|
||
initX:绘制字符串起始x坐标
|
||
initY:绘制字符串起始y坐标
|
||
lineHeight:字行高，自己定义个值即可
|
||
maxWidth: 文本最大宽度
|
||
row: 最大行数
|
||
*/
|
||
canvasTextAutoLine: function (
|
||
str,
|
||
ctx,
|
||
initX,
|
||
initY,
|
||
lineHeight,
|
||
maxWidth,
|
||
row = 1
|
||
) {
|
||
var lineWidth = 0;
|
||
var lastSubStrIndex = 0;
|
||
var currentRow = 1;
|
||
for (let i = 0; i < str.length; i++) {
|
||
lineWidth += ctx.measureText(str[i]).width;
|
||
if (lineWidth > maxWidth) {
|
||
currentRow++;
|
||
let newStr = str.substring(lastSubStrIndex, i);
|
||
if (currentRow > row && str.length > i) {
|
||
newStr = str.substring(lastSubStrIndex, i - 2) + "...";
|
||
}
|
||
ctx.fillText(newStr, initX, initY);
|
||
initY += lineHeight;
|
||
lineWidth = 0;
|
||
lastSubStrIndex = i;
|
||
|
||
if (currentRow > row) {
|
||
break;
|
||
}
|
||
}
|
||
if (i === str.length - 1) {
|
||
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
|
||
}
|
||
}
|
||
},
|
||
saveImage() {
|
||
// 将海报保存图片到
|
||
let _this = this;
|
||
uni.getSetting({
|
||
success(res) {
|
||
if (!res.authSetting["scope.writePhotosAlbum"]) {
|
||
uni.authorize({
|
||
scope: "scope.writePhotosAlbum",
|
||
|
||
success() {
|
||
// 用户已经同意小程序使用相册
|
||
|
||
_this.saveImageToPhotos();
|
||
},
|
||
|
||
fail() {
|
||
wx.openSetting({
|
||
success: (res) => { },
|
||
});
|
||
},
|
||
});
|
||
} else {
|
||
// 用户已经同意小程序使用相册
|
||
|
||
_this.saveImageToPhotos();
|
||
}
|
||
},
|
||
});
|
||
},
|
||
saveImageToPhotos(tempFilePath) {
|
||
let _this = this;
|
||
uni.showLoading({ title: "正在生成图片" });
|
||
uni.canvasToTempFilePath(
|
||
{
|
||
width: _this.windowMsg.width, // 导出图片的宽
|
||
height: _this.windowMsg.height, // 导出图片的高
|
||
destWidth: _this.windowMsg.width * _this.windowMsg.scale * 4, // 导出图片的宽
|
||
destHeight: _this.windowMsg.height * _this.windowMsg.scale * 4, // 导出图片的高
|
||
|
||
canvasId: "pro",
|
||
success: function (res) {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: res.tempFilePath,
|
||
success(result) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: "保存成功，从相册中分享到朋友圈吧",
|
||
icon: "none",
|
||
duration: 4000,
|
||
});
|
||
_this.showSharePro = false;
|
||
},
|
||
fail: function (res) {
|
||
uni.showToast({
|
||
title: "图片保存失败",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
},
|
||
});
|
||
},
|
||
fail: function (res) {
|
||
wx.showToast({
|
||
title: "图片生成失败",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
},
|
||
},
|
||
_this
|
||
);
|
||
},
|
||
|
||
handleGetIsCollect() {
|
||
let collectGoodList = uni.getStorageSync('collectGood')
|
||
if (collectGoodList && collectGoodList.length > 0) {
|
||
let haveSame = false
|
||
collectGoodList.forEach(item => {
|
||
if (item.COMMODITY_ID === this.shopId) {
|
||
haveSame = true
|
||
}
|
||
})
|
||
|
||
this.isCollect = haveSame
|
||
}
|
||
}
|
||
},
|
||
onShareAppMessage() {
|
||
let _this = this;
|
||
|
||
return {
|
||
title: _this.good.COMMODITY_NAME,
|
||
path: `/pages/shopPages/shopDetail/index?pageType=${_this.pageType}&id=${_this.good.COMMODITY_ID}`,
|
||
};
|
||
},
|
||
onShareTimeline() {
|
||
let _this = this;
|
||
return {
|
||
title: _this.good.COMMODITY_NAME,
|
||
path: `/pages/shopPages/shopDetail/index?pageType=${_this.pageType}&id=${_this.good.COMMODITY_ID}`,
|
||
};
|
||
},
|
||
// onShareAppMessage() {
|
||
// let _this = this;
|
||
|
||
// return {
|
||
// title: _this.good.COMMODITY_NAME,
|
||
// path:
|
||
// "/pages/product/productDetail/index?invite=" +
|
||
// _this.user.InviteCode +
|
||
// "&id=" +
|
||
// _this.pageMsg.goodId,
|
||
// imageUrl: _this.good.DEFAULT_IMG,
|
||
// };
|
||
// },
|
||
onUnload() {
|
||
this.isShowCount = false;
|
||
this.showSharePro = false;
|
||
this.good = {};
|
||
clearInterval(this.timer);
|
||
},
|
||
async onLoad(option) {
|
||
console.log('页面开始加载，骨架屏状态:', this.isPageLoading);
|
||
let systemInfo = uni.getSystemInfoSync();
|
||
let height = systemInfo.safeAreaInsets.bottom;
|
||
this.safeHeight = Number(height);
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
console.log("option", option);
|
||
console.log("user", this.user);
|
||
if (option.pageType) {
|
||
this.pageType = option.pageType;
|
||
}
|
||
|
||
if (option.id) {
|
||
this.shopId = Number(option.id)
|
||
}
|
||
|
||
// 判断当前的购物车里面是否有东西
|
||
let shopCarList = [];
|
||
if (this.pageType === "UnionMall") {
|
||
shopCarList = this.$store.state.unionMyShopCar;
|
||
} else {
|
||
shopCarList = this.$store.state.myShopCar;
|
||
}
|
||
console.log("shopCarList", shopCarList);
|
||
if (shopCarList && shopCarList.length > 0) {
|
||
this.shopCarList = shopCarList;
|
||
}
|
||
|
||
await this.getDetail(option.id);
|
||
|
||
this.handleGetIsCollect()
|
||
|
||
this.$utils.addUserBehaviorNew({
|
||
behaviorRecordDesc: `查看商品【${this.good.COMMODITY_NAME}】详情`
|
||
});
|
||
|
||
// 数据加载完成，立即隐藏骨架屏
|
||
console.log('数据加载完成，隐藏骨架屏');
|
||
this.isPageLoading = false;
|
||
// if (option.scene) {
|
||
// // 是否是商品分享码扫入的 带有他人的邀请码
|
||
// let scene = decodeURIComponent(option.scene);
|
||
// scene = scene.split("&");
|
||
// this.pageMsg.goodId = scene[0];
|
||
// this.setInvitedCode(scene[1]);
|
||
// } else {
|
||
// this.pageMsg.goodId = option.id;
|
||
// }
|
||
|
||
// if (option.invite) {
|
||
// this.setInvitedCode(option.invite);
|
||
// }
|
||
// this.pageMsg.buyCount = 1;
|
||
|
||
// this.getRate();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
|
||
<style lang="less" scoped>
|
||
// 骨架屏样式
|
||
.skeleton-container {
|
||
min-height: 100vh;
|
||
background: #f5f5f5;
|
||
position: relative;
|
||
z-index: 999;
|
||
}
|
||
|
||
.skeleton-animate {
|
||
background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
|
||
background-size: 200% 100%;
|
||
animation: skeleton-loading 1.5s infinite;
|
||
}
|
||
|
||
@keyframes skeleton-loading {
|
||
0% {
|
||
background-position: 200% 0;
|
||
}
|
||
|
||
100% {
|
||
background-position: -200% 0;
|
||
}
|
||
}
|
||
|
||
// 头部导航骨架
|
||
.skeleton-header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background: #fff;
|
||
z-index: 999;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
|
||
.skeleton-nav {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.skeleton-back-btn,
|
||
.skeleton-share-btn {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.skeleton-title {
|
||
width: 200rpx;
|
||
height: 40rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 商品图片骨架
|
||
.skeleton-product-image {
|
||
.skeleton-swiper {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 0;
|
||
}
|
||
}
|
||
|
||
// 商品信息骨架
|
||
.skeleton-product-info {
|
||
background: #fff;
|
||
padding: 32rpx;
|
||
margin-top: 20rpx;
|
||
|
||
.skeleton-price-section {
|
||
margin-bottom: 32rpx;
|
||
|
||
.skeleton-price {
|
||
width: 200rpx;
|
||
height: 60rpx;
|
||
border-radius: 8rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.skeleton-original-price {
|
||
width: 120rpx;
|
||
height: 32rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
|
||
.skeleton-title-section {
|
||
margin-bottom: 32rpx;
|
||
|
||
.skeleton-product-title {
|
||
width: 100%;
|
||
height: 48rpx;
|
||
border-radius: 8rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.skeleton-product-subtitle {
|
||
width: 80%;
|
||
height: 32rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
|
||
.skeleton-spec-section {
|
||
.skeleton-spec-title {
|
||
width: 120rpx;
|
||
height: 40rpx;
|
||
border-radius: 6rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.skeleton-spec-options {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
|
||
.skeleton-spec-item {
|
||
width: 120rpx;
|
||
height: 60rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 商品详情骨架
|
||
.skeleton-detail-section {
|
||
background: #fff;
|
||
margin-top: 20rpx;
|
||
padding: 32rpx;
|
||
|
||
.skeleton-detail-tabs {
|
||
display: flex;
|
||
margin-bottom: 32rpx;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
padding-bottom: 20rpx;
|
||
|
||
.skeleton-tab-item {
|
||
width: 120rpx;
|
||
height: 40rpx;
|
||
border-radius: 6rpx;
|
||
margin-right: 40rpx;
|
||
}
|
||
}
|
||
|
||
.skeleton-detail-content {
|
||
.skeleton-detail-line {
|
||
width: 100%;
|
||
height: 32rpx;
|
||
border-radius: 6rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
&:nth-child(2) {
|
||
width: 85%;
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
width: 92%;
|
||
}
|
||
|
||
&:nth-child(4) {
|
||
width: 78%;
|
||
}
|
||
|
||
&:last-child {
|
||
width: 65%;
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 底部操作栏骨架
|
||
.skeleton-bottom-bar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 134rpx;
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
border-top: 1px solid #f0f0f0;
|
||
|
||
.skeleton-bottom-left {
|
||
display: flex;
|
||
gap: 32rpx;
|
||
|
||
.skeleton-cart-btn,
|
||
.skeleton-collect-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.skeleton-bottom-right {
|
||
.skeleton-buy-btn {
|
||
width: 240rpx;
|
||
height: 80rpx;
|
||
border-radius: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.page-body {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
// overflow-x: hidden;
|
||
// overflow-y: scroll;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
hr {
|
||
color: #e9e9e9;
|
||
height: 2rpx;
|
||
}
|
||
|
||
.product-image {
|
||
height: 55vh;
|
||
width: 100%;
|
||
// padding-top 20rpx
|
||
background: #fff;
|
||
// position: relative;
|
||
|
||
.header {
|
||
width: 100%;
|
||
position: fixed;
|
||
z-index: 10;
|
||
top: 0;
|
||
|
||
.headerBottom {
|
||
width: calc(100% - 64rpx);
|
||
position: absolute;
|
||
left: 32rpx;
|
||
z-index: 10;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.backArrowBox {
|
||
width: 120rpx;
|
||
background: rgba(255, 255, 255, 0.6);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 32rpx;
|
||
border: 1px solid #d9d5cc;
|
||
padding: 4rpx 16rpx;
|
||
margin-bottom: 8px;
|
||
|
||
.img {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.line {
|
||
width: 2rpx;
|
||
height: 32rpx;
|
||
background: #bbbbba;
|
||
margin: 0 8rpx;
|
||
}
|
||
}
|
||
|
||
.tabBox {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tabItem {
|
||
padding: 0 16rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.selectTabItem {
|
||
position: relative;
|
||
}
|
||
|
||
.selectTabItem:after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: -6rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 2rem;
|
||
height: 4rpx;
|
||
background: #ff8000;
|
||
}
|
||
}
|
||
|
||
.rightContent {
|
||
width: 120rpx;
|
||
}
|
||
|
||
.moreFunBox {
|
||
width: 220rpx;
|
||
height: 220rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
position: absolute;
|
||
z-index: 10;
|
||
left: 50rpx;
|
||
box-sizing: border-box;
|
||
padding: 12rpx 0 12rpx 16rpx;
|
||
|
||
.triangle {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 5px solid transparent;
|
||
/* 左边透明 */
|
||
border-right: 5px solid transparent;
|
||
/* 右边透明 */
|
||
border-bottom: 10px solid #fff;
|
||
/* 底边颜色 */
|
||
top: -10px;
|
||
left: 40px;
|
||
}
|
||
|
||
.funList {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.funItem {
|
||
width: 100%;
|
||
height: 70rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.funItemIcon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.funItemText {
|
||
width: calc(100% - 50rpx);
|
||
height: 100%;
|
||
display: inline-block;
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #dad6cb;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.banner {
|
||
height: 100%;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
|
||
image {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.defaultImgBox {
|
||
height: 100%;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
|
||
image {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.swiper-dots {
|
||
width: 100%;
|
||
height: 30rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
bottom: 70rpx;
|
||
// flex-direction row
|
||
// position absolute
|
||
// left 50%
|
||
// transform translateX(-50%)
|
||
// bottom 100rpx
|
||
}
|
||
|
||
.dot {
|
||
width: 70rpx;
|
||
height: 32rpx;
|
||
border-radius: 32rpx;
|
||
line-height: 32rpx;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
// opacity .3
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
}
|
||
|
||
.product-info {
|
||
background: #fff;
|
||
}
|
||
|
||
.price-box {
|
||
color: #ea3323;
|
||
font-size: 40rpx;
|
||
// height: 75rpx;
|
||
// padding-bottom: 25rpx;
|
||
line-height: 1;
|
||
// padding-left: 32rpx;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
position: relative;
|
||
}
|
||
|
||
.marketBottom {
|
||
margin-left: 12px;
|
||
|
||
.marketPrice {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #9fa3a8;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.marketPriceValue {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #9fa3a8;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.unit {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #9fa3a8;
|
||
}
|
||
}
|
||
|
||
.sale-count {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
padding-right: 32rpx;
|
||
}
|
||
|
||
|
||
.inventory {
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.vip-price {
|
||
font-size: 42rpx;
|
||
color: #ea3323;
|
||
|
||
.unit {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
// display flex
|
||
// align-items flex-end
|
||
// margin-left 24rpx
|
||
// justify-content center
|
||
|
||
// line-height 1
|
||
// padding-bottom 4rpx
|
||
.vip-card-ico {
|
||
background: url("https://eshangtech.com/ShopICO/shoppingMall/vip-text.png") no-repeat center; // eshangtech.com/ShopICO/shoppingMall/vip-text.png) no-repeat center
|
||
background-size: contain;
|
||
font-size: 18rpx;
|
||
color: #e6e1cf;
|
||
height: 26rpx;
|
||
line-height: 26rpx;
|
||
width: 52rpx;
|
||
text-align: right;
|
||
padding-right: 10rpx;
|
||
margin-bottom: 2rpx;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.originalPrice {
|
||
display: inline-block;
|
||
margin-left: 16rpx;
|
||
|
||
.unit {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.oldPrice {
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
text-decoration: line-through;
|
||
}
|
||
}
|
||
|
||
// .share-btn:before
|
||
// content ''
|
||
// height 31rpx
|
||
// width 32rpx
|
||
// background url(https://eshangtech.com/ShopICO/shoppingMall/share-btn.png) no-repeat center
|
||
// background-size contain
|
||
.share-btn {
|
||
position: relative;
|
||
background: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: #ea3323;
|
||
font-size: 20rpx;
|
||
// height 100rpx
|
||
width: 100rpx;
|
||
justify-content: center;
|
||
margin: 0;
|
||
padding: 0;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
button:after {
|
||
border: none;
|
||
}
|
||
|
||
.colorRed {
|
||
color: #ea3323;
|
||
font-size: 24rpx;
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
.join-vip {
|
||
height: 120rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 26rpx;
|
||
border: 1rpx solid #ebebeb;
|
||
|
||
.vip-left {
|
||
background: #f7f7f7;
|
||
flex: 1;
|
||
height: 120rpx;
|
||
padding-left: 32rpx;
|
||
padding-top: 16rpx;
|
||
box-sizing: border-box;
|
||
|
||
.vip-card-ico:before {
|
||
content: "";
|
||
background: url("https://eshangtech.com/ShopICO/shoppingMall/vip-ico.png") no-repeat center; // eshangtech.com/ShopICO/shoppingMall/vip-ico.png) no-repeat center
|
||
width: 13rpx;
|
||
height: 12rpx;
|
||
margin-right: 4rpx;
|
||
background-size: contain;
|
||
}
|
||
|
||
.vip-card-ico {
|
||
font-size: 20rpx;
|
||
color: #e6e1cf;
|
||
border-radius: 20rpx;
|
||
height: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 30rpx;
|
||
background: #362f14;
|
||
width: 90rpx;
|
||
justify-content: center;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.vip-title {
|
||
color: #333;
|
||
line-height: 1.5;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.vip-des {
|
||
color: #999;
|
||
line-height: 2;
|
||
}
|
||
}
|
||
|
||
.vip-right {
|
||
height: 120rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #f4eee0;
|
||
width: 140rpx;
|
||
line-height: 1.5;
|
||
padding: 20rpx 20rpx 20rpx 36rpx;
|
||
color: #000;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
.product-title {
|
||
color: #333333;
|
||
line-height: 1.5;
|
||
font-weight: bolder;
|
||
font-size: 30rpx;
|
||
padding: 12rpx 24rpx;
|
||
}
|
||
|
||
.product-brand {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8rpx 16rpx 16rpx 32rpx;
|
||
justify-content: space-between;
|
||
|
||
.oldPrice {
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
text-decoration-line: line-through;
|
||
}
|
||
|
||
.inventory {
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.product-detail {
|
||
margin-top: 32rpx;
|
||
font-size: 26rpx;
|
||
// padding-bottom: 150rpx;
|
||
}
|
||
|
||
.detail-unit {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 16rpx 0;
|
||
display: flex;
|
||
align-items: top;
|
||
justify-content: space-between;
|
||
background: #ffffff;
|
||
margin-top: 32rpx;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
|
||
.detail-title {
|
||
width: 240rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.detail-right {
|
||
// width: calc(100% - 240rpx);
|
||
}
|
||
}
|
||
|
||
.detail-unit+.detail-unit {
|
||
border-top: 2rpx solid #e9e9e9;
|
||
}
|
||
|
||
.detail-title .small-title {
|
||
font-size: 24rpx;
|
||
color: #ea3a3c;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
.rate-desc {
|
||
color: #b2b2b2;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.rate-title {
|
||
align-items: center;
|
||
}
|
||
|
||
.rate-box {
|
||
background: #fff;
|
||
padding: 16rpx 32rpx;
|
||
}
|
||
|
||
.detail-image-box {
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
|
||
.img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.product-btn-box {
|
||
height: 124rpx;
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: 0rpx;
|
||
left: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: space-between;
|
||
z-index: 2;
|
||
box-sizing: border-box;
|
||
padding-bottom: 24rpx;
|
||
background: #fff;
|
||
|
||
.leftBtn {
|
||
width: 38%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
box-sizing: border-box;
|
||
padding: 0 0 0 12rpx;
|
||
|
||
.btnItem {
|
||
width: calc(100% / 2);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.btnItemImg {
|
||
height: 46rpx;
|
||
width: 46rpx;
|
||
}
|
||
|
||
.btnItemText {
|
||
color: #c6a773;
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// .home-btn:before {
|
||
// content: "";
|
||
// height: 45rpx;
|
||
// width: 47rpx;
|
||
// background: url("https://eshangtech.com/ShopICO/shoppingMall/home.png")
|
||
// no-repeat center; // eshangtech.com/ShopICO/shoppingMall/home.png) no-repeat center
|
||
// background-size: contain;
|
||
// }
|
||
|
||
// .home-btn {
|
||
// flex: 1;
|
||
// background: #fff;
|
||
// border-top: 2rpx solid #e9e9e9;
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// align-items: center;
|
||
// color: #c6a773;
|
||
// font-size: 20rpx;
|
||
// height: 100rpx;
|
||
// justify-content: center;
|
||
// position: relative;
|
||
// }
|
||
|
||
.rightBtn {
|
||
width: 58%;
|
||
height: 100%;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 12rpx;
|
||
display: flex;
|
||
|
||
.addCarBtn {
|
||
width: 50%;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
background: linear-gradient(90deg, #ffc500 0%, #ff8d00 100%);
|
||
border-radius: 16rpx 0 0 16rpx;
|
||
}
|
||
|
||
.addOrder {
|
||
width: 50%;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
background: linear-gradient(90deg, #ff6d00 0%, #ff3a00 100%);
|
||
border-radius: 0 16rpx 16rpx 0;
|
||
}
|
||
|
||
.sellOut {
|
||
width: 50%;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
background: #bbbbbb;
|
||
border-radius: 0 16rpx 16rpx 0;
|
||
}
|
||
|
||
.presale {
|
||
background: #ffae00;
|
||
}
|
||
}
|
||
|
||
.shopcart-btn:before {
|
||
content: "";
|
||
height: 45rpx;
|
||
width: 47rpx;
|
||
background: url("https://eshangtech.com/ShopICO/shoppingMall/shopcart.png") no-repeat center; // eshangtech.com/ShopICO/shoppingMall/shopcart.png) no-repeat center
|
||
background-size: contain;
|
||
}
|
||
|
||
.shopcart-btn {
|
||
flex: 1;
|
||
background: #fff;
|
||
border-top: 2rpx solid #e9e9e9;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: #c6a773;
|
||
font-size: 20rpx;
|
||
height: 100rpx;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
|
||
.shopcart-count {
|
||
position: absolute;
|
||
top: 10rpx;
|
||
right: 66rpx;
|
||
width: 42rpx;
|
||
height: 32rpx;
|
||
line-height: 32rpx;
|
||
text-align: center;
|
||
border-radius: 32rpx;
|
||
font-size: 18rpx;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
background: rgba(240, 20, 20, 0.808);
|
||
// box-shadow 0 0rpx 4rpx 0 rgba(0, 0, 0, 0.4)
|
||
}
|
||
|
||
.join-shopCart {
|
||
flex: 2;
|
||
background: #404040;
|
||
font-size: 30rpx;
|
||
line-height: 100rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.buynow-btn {
|
||
flex: 2;
|
||
font-size: 30rpx;
|
||
line-height: 100rpx;
|
||
color: #fff;
|
||
background: linear-gradient(to right, #c5a671, #dcc194);
|
||
}
|
||
}
|
||
|
||
.countdown {
|
||
width: 100%;
|
||
height: 64rpx;
|
||
background: #fff2e7;
|
||
position: fixed;
|
||
z-index: 2;
|
||
left: 0;
|
||
bottom: 124rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #ff8417;
|
||
line-height: 32rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.offShopDown {
|
||
width: 100%;
|
||
height: 64rpx;
|
||
background: #F5F6F7;
|
||
position: fixed;
|
||
z-index: 2;
|
||
left: 0;
|
||
bottom: 124rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #716F69;
|
||
line-height: 32rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.popup-box {
|
||
padding: 50rpx 40rpx 32rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.shopPopupBox {
|
||
width: 100%;
|
||
height: 80vh;
|
||
background: #fff;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
box-sizing: border-box;
|
||
padding: 16px;
|
||
|
||
.shopPopupContent {
|
||
width: 100%;
|
||
height: calc(80vh - 80px - 32px + 12rpx);
|
||
margin-bottom: 12rpx;
|
||
|
||
.detailTop {
|
||
display: flex;
|
||
border-bottom: 1px solid #f2f4f5;
|
||
|
||
.detailImg {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
|
||
.box {
|
||
width: calc(100% - 92px);
|
||
padding-bottom: 16px;
|
||
margin-left: 12px;
|
||
|
||
.nameTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.name {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #020e1a;
|
||
line-height: 18px;
|
||
display: block;
|
||
width: calc(100% - 56rpx);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.closeIcon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
}
|
||
|
||
.priceBox {
|
||
margin-top: 32px;
|
||
|
||
.priceIcon {
|
||
font-size: 16px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #ff6219;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.price {
|
||
font-size: 20px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #ff6219;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.unit {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #9fa3a8;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.scrollDetailBox {
|
||
width: 100%;
|
||
height: calc(80vh - 80px - 32px + 12rpx - 80px);
|
||
|
||
.detailMessage {
|
||
margin-top: 16px;
|
||
border-bottom: 1px solid #f2f4f5;
|
||
padding-bottom: 16px;
|
||
|
||
.detailTitle {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #020e1a;
|
||
line-height: 20px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.detailText {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #6c737a;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
|
||
.orderDetail {
|
||
margin-top: 16px;
|
||
|
||
.orderTitle {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #020e1a;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.numBox {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 12px;
|
||
|
||
.numTitle {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #020e1a;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.cartcontrol {
|
||
width: 150px;
|
||
height: 30px;
|
||
line-height: 24px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
border: 1px solid rgba(2, 14, 26, 0.06);
|
||
border-radius: 2px;
|
||
|
||
.subtract {
|
||
width: 30px;
|
||
height: 30px;
|
||
background: #f2f4f5;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 2px 0 0 2px;
|
||
font-size: 8px;
|
||
color: #9fa3a8;
|
||
|
||
.img {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
|
||
.cart-count {
|
||
height: 30px !important;
|
||
font-size: 16px;
|
||
line-height: 30px;
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sizeBox {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 12px;
|
||
|
||
.sizeTitle {
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #020e1a;
|
||
line-height: 20px;
|
||
width: 100rpx;
|
||
}
|
||
|
||
.sizeScrollBox {
|
||
width: calc(100% - 112rpx);
|
||
flex: 1;
|
||
|
||
.sizeList {
|
||
// display: flex;
|
||
width: 100%;
|
||
|
||
.sizeItem {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #000;
|
||
line-height: 18px;
|
||
padding: 4px 16px;
|
||
background: #dbdad6;
|
||
border-radius: 4px;
|
||
margin-left: 8px;
|
||
display: inline-block;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.selectSizeItem {
|
||
display: inline-block;
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #1890ff;
|
||
line-height: 18px;
|
||
padding: 4px 16px;
|
||
background: #e7f3ff;
|
||
border-radius: 4px;
|
||
margin-left: 8px;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.descBox {
|
||
width: 100%;
|
||
height: 76px;
|
||
background: #f2f4f5;
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
padding: 8px 12px;
|
||
margin-top: 19px;
|
||
}
|
||
|
||
.submitBtn {
|
||
font-size: 16px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
line-height: 22px;
|
||
width: 100%;
|
||
height: 40px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #1890ff;
|
||
border-radius: 4px;
|
||
margin-top: 24px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.bottomBtn {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
z-index: 9;
|
||
|
||
.shopCarBtn {
|
||
width: 100%;
|
||
height: 76rpx;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
background: linear-gradient(90deg, #ffc500 0%, #ff8d00 100%);
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.makeOrderBtn {
|
||
width: 100%;
|
||
height: 76rpx;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
background: linear-gradient(90deg, #ff6d00 0%, #ff3a00 100%);
|
||
border-radius: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cart-count {
|
||
width: 80rpx;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
font-size: 20rpx;
|
||
color: #333;
|
||
height: 40rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.buy-it-btn {
|
||
text-align: center;
|
||
width: 674rpx;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
border-radius: 6rpx;
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
margin-top: 100rpx;
|
||
background: linear-gradient(to right, #1f1f1f, #62605f);
|
||
}
|
||
|
||
.cartcontrol {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin-left: 45rpx;
|
||
}
|
||
|
||
.cart-decrease {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border: 2rpx solid #eee;
|
||
position: relative;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.cart-decrease:before {
|
||
content: "";
|
||
height: 4rpx;
|
||
width: 25rpx;
|
||
background: #4d4d4d;
|
||
display: block;
|
||
position: absolute;
|
||
left: 12rpx;
|
||
top: 21rpx;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.cart-add {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border: 2rpx solid #e6e6e6;
|
||
position: relative;
|
||
border-radius: 50%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.cart-add:before {
|
||
content: "";
|
||
height: 4rpx;
|
||
width: 25rpx;
|
||
background: #4d4d4d;
|
||
display: block;
|
||
position: absolute;
|
||
left: 11rpx;
|
||
top: 21rpx;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.cart-add:after {
|
||
content: "";
|
||
height: 25rpx;
|
||
width: 4rpx;
|
||
background: #4d4d4d;
|
||
display: block;
|
||
position: absolute;
|
||
top: 11rpx;
|
||
left: 21rpx;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.desc-ico:before {
|
||
content: "";
|
||
height: 30rpx;
|
||
width: 6rpx;
|
||
background: linear-gradient(#dcb97e, #faefdd);
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
// 分享商品页弹出窗口
|
||
.share-pop-body {
|
||
width: 100%;
|
||
background: #f9f9f9;
|
||
overflow: hidden;
|
||
height: 100%;
|
||
position: relative;
|
||
padding-top: 80rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.down-img-btn {
|
||
text-align: center;
|
||
padding: 32rpx 0;
|
||
background: #fff;
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
left: 0;
|
||
}
|
||
|
||
.canvas-content {
|
||
margin: auto;
|
||
display: hidden;
|
||
}
|
||
|
||
//
|
||
.share-pop-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
.share-pop-btn button {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
background: #fff;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.share-pop-btn image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.share-popup {
|
||
padding: 16px;
|
||
border-radius: 12px 12px 0 0;
|
||
/* 圆角设置 */
|
||
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.share-divider {
|
||
text-align: center;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-bottom: 16px;
|
||
color: #333;
|
||
}
|
||
|
||
.share-pop-btn {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
|
||
.share-btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: none;
|
||
border: none;
|
||
}
|
||
|
||
.share-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
margin-bottom: 8px;
|
||
}
|
||
</style>
|