Files
MER-2.2_2601/mer_uniapp/pages/goods/goods_details/index.vue
2026-03-08 20:07:52 +08:00

3268 lines
106 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view :data-theme="theme">
<tui-skeleton v-if="showSkeleton"></tui-skeleton>
<view class="product-con tui-skeleton" :style="{ visibility: showSkeleton ? 'hidden' : 'visible' }">
<view class="navbar" :class="opacity > 0.6 ? 'bgwhite' : ''">
<view class="navbarH" :style="'height:' + navH + 'rpx;'">
<view class="navbarCon acea-row" :style="{ paddingRight: navbarRight + 'px' }">
<nav-bar :isBackgroundColor="false" ref="navBarRef" :isHeight="false">
</nav-bar>
<!-- 头部tab标题 -->
<!-- #ifdef H5 || APP-PLUS-->
<view class="tab_nav relative" v-if="opacity > 0.6">
<view class="header flex align-center relative z-999">
<view class="item" :class="
navActive === index
? 'on'
: ''
" v-for="(item, index) in navList" :key="index" @tap="tap(index)">
{{ item }}
</view>
<view style="width: 10rpx;height: 2px;" @click="listenerActionSheet"></view>
</view>
</view>
<!-- #endif -->
<!-- 分享 -->
<view class="iconfont icon-ic_share1" :style="[shareStyle]" @click="listenerActionSheet">
</view>
</view>
</view>
</view>
<!-- 导航小图标 -->
<view class="dialog_nav" v-show="currentPage" :style="{ top: navH + 'rpx' }">
<view class="dialog_nav_item" :class="item.after" v-for="(item, index) in selectNavList" :key="index"
@click="linkPage(item.url)">
<text class="iconfont" :class="item.icon"></text>
<text class="pl-20">{{ item.name }}</text>
</view>
</view>
<!-- 商品详情 -->
<view class="detail_container" @touchstart="touchStart">
<scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation="true"
:style="'height:' + height + 'px;'" @scroll="scroll">
<view id="past0">
<!-- #ifdef MP || APP-PLUS -->
<view class="" :style="'width:100%;' + 'height:' + sysHeight + 'px'"></view>
<!-- #endif -->
<productConSwiper class="tui-skeleton-rect" :isGroup="marketingType" :imgUrls="sliderImage"
:videoline="videoLink" :productType="productType" @videoPause="videoPause"
:isMarketingGoods="isMarketingGoods">
</productConSwiper>
<!-- 秒杀card -->
<seckill-card v-if="marketingType === ProductMarketingTypeEnum.Seckill" :seckillStatus="seckillStatus"
:seckillTime="seckillTime" :productInfo="productInfo" :productPrice="productPrice"></seckill-card>
<!-- 拼团card -->
<group-card :productInfo="attr.productSelect" :groupBuyActivityResponse="groupBuyActivityResponse"
v-if="marketingType === ProductMarketingTypeEnum.Groupbuying"></group-card>
<!-- 氛围图card -->
<activity-style v-if="productInfo.activityStyle" :productPrice="productPrice"
:productInfo="productInfo"></activity-style>
<view class="borderPad 48bfb4a" :class="
marketingType === ProductMarketingTypeEnum.Seckill ||
marketingType === ProductMarketingTypeEnum.Groupbuying
? 'mtop'
: ''
">
<view class="wrapper mb20 borRadius14">
<view v-if="
marketingType === ProductMarketingTypeEnum.Normal &&
!productInfo.activityStyle
">
<view class="share acea-row row-between mb10">
<!-- 积分商品价格 -->
<view v-if="productType === ProductTypeEnum.Integral" class="flex-y-center theme-font-color">
<span class="semiBold theme-font-color fs-40">{{
productPrice.redeemIntegral
}}</span><span class="f-s-36 theme-font-color ml-4">积分</span>
<view v-show="productPrice.price > 0" class="ml-4">
+
<span class="semiBold ml-4 fs-40">{{
productPrice.price
}}</span><span class="f-s-36 theme-font-color ml-4">元</span>
</view>
</view>
<!-- 其他商品价格 -->
<svip-price v-else :svipIconStyle="svipIconStyle" :productPrice="productPrice"
:svipPriceStyle="svipPriceStyle"></svip-price>
<!-- 收藏 -->
<view v-show="productType !== ProductTypeEnum.Integral" @click="setCollect"
class="item tui-skeleton-rect">
<view class="iconfont icon-ic_love_2 " :class="isMarketingGoods? 'color-normal': 'color-change'"
v-if="userCollect"></view>
<view class="iconfont icon-ic_love" v-else></view>
</view>
<!-- <view class="iconfont icon-fenxiang" @click="listenerActionSheet"></view> -->
</view>
<view v-if="couponList.length > 0" class="acea-row row-between-wrapper">
<view class="flex-1 acea-row row-middle">
<span v-for="(item, index) in couponList" :key="index" class="coupon_label">{{
item.minPrice === 0
? "无门槛减" + item.money
: "满" + item.minPrice + "减" + item.money
}}</span>
</view>
<view class="coupon_more" @click="couponTap">领券<text class="iconfont icon-ic_rightarrow"></text>
</view>
</view>
<view class="introduce tui-skeleton-rect line2 mt30">{{
productInfo.name
}}</view>
</view>
<view v-if="marketingType !== ProductMarketingTypeEnum.Normal"
class="share acea-row row-between row-middle">
<view class="introduce tui-skeleton-rect line2 lineWidth">{{ productInfo.name }}
</view>
<!-- 收藏 -->
<view v-show="productType !== ProductTypeEnum.Integral" @click="setCollect"
class="item tui-skeleton-rect">
<view class="iconfont icon-ic_love_2 color-change" v-if="userCollect"></view>
<view class="iconfont icon-ic_love" v-else></view>
</view>
<!-- <view class="iconfont icon-fenxiang" @click="listenerActionSheet"></view> -->
</view>
<view v-if="
marketingType === ProductMarketingTypeEnum.Normal &&
productInfo.activityStyle
">
<view v-if="couponList.length > 0" class="acea-row row-between-wrapper mb30">
<view class="flex-1 acea-row row-middle">
<span v-for="(item, index) in couponList" :key="index" class="coupon_label">{{
item.minPrice === 0
? "无门槛减" + item.money
: "满" + item.minPrice + "减" + item.money
}}</span>
</view>
<view class="coupon_more" @click="couponTap">领券<text class="iconfont icon-ic_rightarrow"></text>
</view>
</view>
<view class="share acea-row row-between row-middle">
<view class="introduce tui-skeleton-rect line2 lineWidth">{{ productInfo.name }}
</view>
<!-- 收藏 -->
<view v-show="productType !== ProductTypeEnum.Integral" @click="setCollect"
class="item tui-skeleton-rect">
<view class="iconfont icon-ic_love_2 " :class="isMarketingGoods? 'color-normal': 'color-change'"
v-if="userCollect"></view>
<view class="iconfont icon-ic_love" v-else></view>
</view>
</view>
</view>
<!-- 次卡商品信息 -->
<view class="label acea-row row-between-wrapper " v-if="productInfo.type === ProductTypeEnum.PunchCard">
<view>使用次数:{{productInfo.verifyQuantity}}</view>
<view class="flex">
<view class="">使用时间:</view>
<view v-if="productInfo.verifyTimeLimitType === 1">
无限期
</view>
<view v-if="productInfo.verifyTimeLimitType === 2">
购买{{productInfo.verifyTimeLimitDay}}天内有效
</view>
<view v-if="productInfo.verifyTimeLimitType === 3">
{{productInfo.verifyTimeLimitStartDate}}&nbsp~&nbsp{{productInfo.verifyTimeLimitEndDate}}
</view>
</view>
</view>
<view class="label acea-row row-between-wrapper">
<view class="tui-skeleton-rect text-line" v-if="
marketingType === ProductMarketingTypeEnum.Groupbuying
">¥{{ attr.productSelect.otPrice || 0 }}</view>
<view class="tui-skeleton-rect text-line" v-else>
¥{{
productType === ProductTypeEnum.Integral
? attr.productSelect.cost
: attr.productSelect.otPrice || 0
}}
</view>
<!-- 拼团库存 -->
<view class="tui-skeleton-rect" v-if="
marketingType === ProductMarketingTypeEnum.Groupbuying
">
库存:{{ attr.productSelect.stock>0?attr.productSelect.groupStock:0}}{{ productInfo.unitName || "" }}
</view>
<!-- 普通库存 -->
<view class="tui-skeleton-rect"
v-show="productType !== ProductTypeEnum.Reservation && marketingType !== ProductMarketingTypeEnum.Groupbuying">
库存:{{ attr.productSelect.stock || 0}}{{ productInfo.unitName || "" }}
</view>
<!-- 拼团销量 -->
<view class="tui-skeleton-rect" v-if="
marketingType === ProductMarketingTypeEnum.Groupbuying
">
{{`销量:${groupBuyActivityResponse.sales}`}}{{ productInfo.unitName || "" }}
</view>
<!-- 其他销量 -->
<view class="tui-skeleton-rect" v-if="
marketingType !== ProductMarketingTypeEnum.Groupbuying
">
{{
productType === ProductTypeEnum.Integral
? "已兑换:"
: "销量:"
}}{{
Math.floor(productInfo.sales) +
Math.floor(productInfo.ficti) || 0
}}{{ productInfo.unitName || "" }}
</view>
</view>
<view class="coupon acea-row row-between-wrapper" v-if="activityH5.length">
<view class="line1 acea-row">
<text class="activityName tui-skeleton-rect">活&nbsp;&nbsp;&nbsp;动:</text>
<view v-for="(item, index) in activityH5" :key="index" @click="goActivity(item)"
class="activityBox">
<view v-if="item.type === '1'" class="tui-skeleton-rect" :class="
index == 0
? 'activity_pin'
: '' || index == 1
? 'activity_miao'
: '' || index == 2
? 'activity_kan'
: ''
">
<text class="iconfonts iconfont icon-miaosha1"></text>
<text class="activity_title"> 参与秒杀</text>
</view>
<view class="tui-skeleton-rect" :class="
index == 0
? 'activity_pin'
: '' || index == 1
? 'activity_miao'
: '' || index == 2
? 'activity_kan'
: ''
" v-if="item.type === '2'">
<text class="iconfonts iconfont icon-kanjia"></text>
<text class="activity_title"> 参与砍价</text>
</view>
</view>
</view>
</view>
</view>
<!-- 规格、保障服务 -->
<view class="attribute mb20 borRadius14 tui-skeleton-rect 70ba6a"
:class="productType !== ProductTypeEnum.Reservation?'':''">
<view class="p-24" v-show="productType !== ProductTypeEnum.Reservation">
<view class="acea-row row-between-wrapper" @click="selecAttr">
<view class="line1 text-666">{{ attrTxt }}
<text class="atterTxt text-333">{{ attrValue }}</text>
</view>
<view class="iconfont icon-ic_rightarrow"></view>
</view>
<view class="acea-row row-between-wrapper" style="margin-top: 7px; padding-left: 55px"
v-if="skuImage.length > 0">
<view class="flex">
<image :src="item" v-for="(item, index) in skuImage.slice(0, 3)" :key="index" class="attrImg">
</image>
</view>
<view class="switchTxt">共{{ skuArr.length }}种规格可选</view>
</view>
</view>
<view v-if="guaranteeList.length > 0" class="acea-row row-between-wrapper p-24"
@click="handleToGgle(true)">
<view class="line1 tui-skeleton-fillet">
<text class="text-666">保&nbsp;&nbsp;&nbsp;障:</text>
<text class="text-333 tui-skeleton-fillet" v-for="(item, index) in guaranteeList"
:key="index">{{ item.name }} ·
</text>
</view>
<view class="iconfont icon-ic_rightarrow"></view>
</view>
</view>
</view>
</view>
<!-- 正在拼团 -->
<group-doing :processItem="groupBuyActivityResponse.processItem"
:groupBuyActivityResponse="groupBuyActivityResponse" @toGroup="toGroup" v-if="
marketingType === ProductMarketingTypeEnum.Groupbuying &&
groupBuyActivityResponse.showGroup
"></group-doing>
<!-- 拼团玩法 -->
<group-playing v-if="marketingType === ProductMarketingTypeEnum.Groupbuying"></group-playing>
<!-- 评价 -->
<view v-show="productType !== ProductTypeEnum.Integral && replyCount > 0" id="past1"
class="borderPad af90db">
<view class="userEvaluation tui-skeleton-rect">
<view class="title acea-row row-between-wrapper" :style="
replyCount == 0
? 'border-bottom-left-radius:24rpx;border-bottom-right-radius:24rpx;'
: ''
">
<view>用户评价<i>({{ replyCount }})</i></view>
<navigator class="praise" hover-class="none" :url="
'/pages/goods/goods_comment_list/index?productId=' +
(Number(masterProductId) > 0 ? masterProductId : id)
">
<i>好评</i>&nbsp;<text :class="isMarketingGoods ? 'groupColor': 'font_color'"
class=" px-12">{{ $util.$h.Mul(replyChance, 100) || 0 }}%</text>
<text class="iconfont icon-ic_rightarrow"></text>
</navigator>
</view>
<block v-if="replyCount">
<userEvaluation :reply="reply"></userEvaluation>
</block>
</view>
</view>
<!-- 店铺 -->
<view class="borderPad" v-if="!isMarketingGoods">
<view class="superior borRadius14 8bfb4" v-if="merchantInfo">
<merHome :merchantInfo="merchantInfo" :merId="productInfo.merId" type="home" :isShowTypeId="isShowTypeId"
v-if="merchantInfo" :marketingType="marketingType">
</merHome>
<view class="slider-banner banner">
<view class="list acea-row row-middle">
<view class="item" v-for="(val, indexw) in merchantInfo.proList" :key="indexw"
@click="goDetail(val.id)">
<view class="pictrue relative">
<view v-show="val.stock===0" class="sellOut">已售罄</view>
<easy-loadimage :image-src="val.image" radius="16rpx" width="206rpx"
height="204rpx"></easy-loadimage>
</view>
<view class="name line2 mt-20 h-74 lh-38rpx">{{ val.name }}</view>
<view class="money theme_price regular">¥{{ val.price }}</view>
</view>
</view>
</view>
</view>
</view>
<!-- 产品详情 -->
<view class="product-intro detailText" id="past2">
<view class="title">
<image src="../static/images/xzuo.png"></image>
<span class="sp">产品详情</span>
<image src="../static/images/xyou.png"></image>
</view>
<view class="conter borRadius14">
<view class="borRadius14">
<!-- #ifdef MP || APP-PLUS -->
<mp-html :content="description" :tag-style="tagStyle" />
<!-- #endif -->
<!-- #ifdef H5 -->
<view v-html="description" class="w-100-p111-"></view>
<!-- #endif -->
</view>
</view>
</view>
<view style="height: 120rpx"></view>
</scroll-view>
</view>
<!-- 脚部按钮 -->
<view class="footer acea-row row-between-wrapper">
<view class="item tui-skeleton-rect" @click="serviceClick">
<view class="iconfont f-s-40 icon-ic_customerservice"></view>
<view>客服</view>
</view>
<navigator v-show="productType !== ProductTypeEnum.Integral"
:url="`/pages/merchant/home/index?merId=${productInfo.merId}`" hover-class="none">
<view class="item tui-skeleton-rect flex flex-column flex-y-center">
<view class="iconfont f-s-38 icon-ic_mall"></view>
<view>店铺</view>
</view>
</navigator>
<navigator v-show="productType !== ProductTypeEnum.Integral" open-type="switchTab"
class="animated item tui-skeleton-rect flex flex-column flex-y-center"
:class="animated == true ? 'bounceIn' : ''" url="/pages/order_addcart/order_addcart" hover-class="none">
<view class="iconfont f-s-40 icon-ic_ShoppingCart">
<text v-if="Math.floor(CartCount) > 0" class="num bg-color">{{
CartCount
}}</text>
</view>
<view>购物车</view>
</navigator>
<!-- 普通商品 -->
<block v-if="marketingType === ProductMarketingTypeEnum.Normal">
<!-- 普通商品售罄 -->
<view class="bnt acea-row" v-if="attr.productSelect.stock <= 0">
<!-- 预约商品-->
<form v-if="productType === ProductTypeEnum.Reservation" @submit="goBuy" report-submit="true">
<button class="longBnts buy" form-type="submit">
立即购买
</button>
</form>
<form v-else report-submit="true">
<button class="longBnts bg-color-hui" form-type="submit" :class="
productType == ProductTypeEnum.Integral ? 'w-640rpx' : ''
">
已售罄
</button>
</form>
</view>
<view class="bnt acea-row tui-skeleton-rect" v-else>
<!-- 正常商品 -->
<block v-if="productType === ProductTypeEnum.Normal">
<form v-show="productInfo.systemFormId == 0" @submit="joinCart" report-submit="true">
<button class="joinCart bnts" form-type="submit">
加入购物车
</button>
</form>
<form @submit="goBuy" report-submit="true">
<button :class="productInfo.systemFormId == 0 ? 'bnts' : 'longBnts'" class="buy" form-type="submit">
立即购买
</button>
</form>
</block>
<!-- 积分商品 -->
<block v-else-if="productType === ProductTypeEnum.Integral">
<form @submit="goBuy" report-submit="true">
<button class="longBnts w-640rpx" :class="
productPrice.redeemIntegral > userInfo.integral
? 'bg-color-hui'
: 'theme-btn-color'
" :disabled="productPrice.redeemIntegral > userInfo.integral" form-type="submit">
立即兑换
</button>
</form>
</block>
<!-- 虚拟商品 -->
<view v-else class="bnt bntVideo acea-row">
<form @submit="goBuy" report-submit="true">
<button class="buy bg-color longBnts" form-type="submit">
立即购买
</button>
</form>
</view>
</view>
</block>
<!-- 除去二级类型是普通商品的售罄按钮 -->
<view v-if="
(attr.productSelect.stock <= 0 ||
(attr.productSelect.groupStock <= 0 &&
marketingType === ProductMarketingTypeEnum.Groupbuying)) &&
marketingType !== ProductMarketingTypeEnum.Normal
" class="bnt bntVideo acea-row">
<form report-submit="true">
<button class="longBnts bg-color-hui" :class="
productType === ProductTypeEnum.Integral ? 'w-640rpx' : ''
" form-type="submit">
已售罄
</button>
</form>
</view>
<view class="bnt acea-row" v-if="
marketingType === ProductMarketingTypeEnum.Groupbuying &&
attr.productSelect.groupStock > 0 &&
groupBuyActivityResponse.buyLimitCount == 0
">
<form report-submit="true">
<button class="longBnts bg-color-hui" form-type="submit">
超出限购数量
</button>
</form>
</view>
<!-- 秒杀商品 -->
<view v-if="
seckillStatus !== 1 &&
marketingType === ProductMarketingTypeEnum.Seckill &&
attr.productSelect.stock > 0
" class="bnt acea-row">
<form @submit="goDetail(masterProductId)" report-submit="true">
<button class="joinCart bnts" form-type="submit">直接购买</button>
</form>
<form report-submit="true">
<button class="bg-color-hui bnts" form-type="submit">
{{ seckillStatus === 0 ? "活动已结束" : "活动未开始" }}
</button>
</form>
</view>
<!-- 秒杀商品、视频号商品购买 -->
<view v-if="
attr.productSelect.stock > 0 &&
(productType === ProductTypeEnum.Video ||
(marketingType === ProductMarketingTypeEnum.Seckill &&
seckillStatus === 1))
" class="bnt bntVideo acea-row">
<form @submit="goBuy" report-submit="true">
<button class="bg-color longBnts" form-type="submit">
立即购买
</button>
</form>
</view>
<!-- 拼团商品单独购买/开团 -->
<view class="bnt acea-row tui-skeleton-rect" v-if="
!(
marketingType !== ProductMarketingTypeEnum.Groupbuying ||
attr.productSelect.groupStock <= 0 ||
(attr.productSelect.groupStock > 0 &&
groupBuyActivityResponse.buyLimitCount == 0) ||
attr.productSelect.stock == 0 ||
groupRecordId != 0
)
">
<form @submit="toAloneBuy" report-submit="true" v-if="productInfo.isShow">
<button class="joinCart bnts groupJoin" form-type="submit">单独购买</button>
</form>
<form @submit="goBuy" report-submit="true">
<button :class="productInfo.isShow?'group-buy':'group-buy2'" class=" bnts" form-type="submit">立即开团</button>
</form>
</view>
<view class="bnt acea-row tui-skeleton-rect" v-if="
groupRecordId != 0 &&
attr.productSelect.stock > 0 &&
attr.productSelect.groupStock > 0 &&
groupBuyActivityResponse.buyLimitCount != 0
">
<form @submit="goBuy" report-submit="true">
<button class="spredGroupStyle" form-type="submit">立即参团</button>
</form>
</view>
</view>
<!-- 组件 -->
<productWindow :attr="attr" :isShow="1" :iSplus="1" @myevent="onMyEvent" @ChangeAttr="ChangeAttr"
@ChangeCartNum="ChangeCartNum" @attrVal="attrVal" @iptCartNum="iptCartNum" id="product-window"
@getImg="showImg" :productType="productType" :marketingType="marketingType"
:isMarketingGoods="isMarketingGoods" :groupBuyActivityResponse="groupBuyActivityResponse"
:productPrice="productPrice" @buyLimit="buyLimit">
</productWindow>
<couponListWindow :coupon="coupon" :typeNum="couponDeaultType[0].useType" @ChangCouponsClone="ChangCouponsClone"
@ChangCoupons="ChangCoupons" @ChangCouponsUseState="ChangCouponsUseState" @tabCouponType="tabCouponType">
</couponListWindow>
<!-- 分享按钮 -->
<view class="generate-posters" :class="posters ? 'on' : ''">
<view class="generateCon acea-row row-middle">
<!-- #ifndef MP -->
<button class="item" hover-class="none" v-if="weixinStatus === true" @click="H5ShareBox = true">
<view class="pictrue">
<image src="../static/images/weixin.png"></image>
</view>
<view class="">分享给好友</view>
</button>
<!-- #endif -->
<!-- #ifdef MP -->
<button class="item" open-type="share" hover-class="none">
<view class="pictrue">
<image src="../static/images/weixin.png"></image>
</view>
<view class="">分享给好友</view>
</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view class="item" @click="appShare('WXSceneSession')">
<view class="pictrue">
<image src="../static/images/weixin.png"></image>
</view>
<view class="">微信好友</view>
</view>
<view class="item" @click="appShare('WXSenceTimeline')">
<view class="pictrue">
<image src="../static/images/weixinCircle.png"></image>
</view>
<view class="">微信朋友圈</view>
</view>
<!-- #endif -->
<!-- #ifdef H5 || MP -->
<view class="item" @click="getpreviewImage">
<view class="pictrue">
<image src="../static/images/changan.png"></image>
</view>
<view class="">预览发图</view>
</view>
<!-- #endif -->
<!-- #ifdef MP -->
<button class="item" hover-class="none" @click="savePosterPath">
<view class="pictrue">
<image src="../static/images/haibao.png"></image>
</view>
<view class="">保存海报</view>
</button>
<!-- #endif -->
</view>
<view class="generateClose acea-row row-center-wrapper" @click="posterImageClose">取消</view>
</view>
<!-- 查看规格商品图 -->
<cus-previewImg ref="cusPreviewImg" :list="skuArr" @changeSwitch="changeSwitch"
@shareFriend="listenerActionSheet" />
<view class="mask" v-if="posters" @click="closePosters"></view>
<view class="mask" v-if="canvasStatus"></view>
<view class="mask_transparent" v-if="currentPage" @touchmove="hideNav" @click="hideNav()"></view>
<!-- 海报展示 -->
<view class="poster-pop" v-if="canvasStatus">
<image :src="imagePath"></image>
</view>
<view class="canvas" v-else>
<canvas style="width: 750px; height: 1190px" canvas-id="firstCanvas"></canvas>
<canvas canvas-id="qrcode" :style="{ width: `${qrcodeSize}px`, height: `${qrcodeSize}px` }" />
</view>
<!-- 发送给朋友图片 -->
<view class="share-box" v-if="H5ShareBox">
<image :src="urlDomain + 'crmebimage/presets/share-info.png'" @click="H5ShareBox = false"></image>
</view>
<!-- 保障服务弹窗 -->
<uni-popup ref="popup" type="bottom" borderRadius="20px 20px 0 0">
<view class="ensure">
<view @click="handleToGgle(false)" class="title">保障服务
<CloseIcon></CloseIcon>
</view>
<view class="list">
<view class="item acea-row" v-for="(item, index) in guaranteeList" :key="index">
<view class="pictrue">
<image :src="item.icon"></image>
</view>
<view class="text">
<view class="name">{{ item.name }}</view>
<view>{{ item.content }}</view>
</view>
</view>
</view>
<view class="activityBtn" :class="isMarketingGoods?'bg-red':'bnt'" @click="handleToGgle(false)">确定
</view>
</view>
</uni-popup>
</view>
</view>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2026 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import uQRCode from "@/js_sdk/Sansnn-uQRCode/uqrcode.js";
import {
HTTP_H5_URL
} from "@/config/app.js";
import {
getProductDetail,
collectAdd,
collectCancel,
postCartAdd,
getReplyConfig,
getReplyProduct,
} from "@/api/product.js";
import {
getCoupons,
tokenIsExistApi
} from "@/api/api.js";
import {
merCustomerApi
} from "@/api/merchant.js";
import {
getCartCounts
} from "@/api/order.js";
import {
toLogin
} from "@/libs/login.js";
import {
mapGetters
} from "vuex";
import {
imageBase64
} from "@/api/public";
import productConSwiper from "../components/productConSwiper/index.vue";
import couponListWindow from "../components/getCoponWindow";
import productWindow from "@/components/productWindow";
import userEvaluation from "../components/userEvaluation";
import cusPreviewImg from "../components/cus-previewImg/cus-previewImg.vue";
import merHome from "@/components/merHome/index.vue";
import mpHtml from "@/uni_modules/mp-html/components/mp-html/mp-html.vue";
import {
silenceBindingSpread
} from "@/utils";
import parser from "../components/jyf-parser/jyf-parser";
import tuiDrawer from "@/components/tui-drawer/tui-drawer.vue";
import tuiSkeleton from "@/components/base/tui-skeleton.vue";
import easyLoadimage from "@/components/base/easy-loadimage.vue";
import svipPrice from "@/components/svipPrice.vue";
// #ifdef MP
import {
base64src
} from "@/utils/base64src.js";
import {
mpQrcode
} from "@/api/api.js";
// #endif
let app = getApp();
import {
setThemeColor
} from "@/utils/setTheme.js";
import {
Debounce
} from "@/utils/validate.js";
import {
chatConfig
} from "@/utils/consumerType.js";
import {
goProductDetail
} from "@/libs/order.js";
import seckillCard from "./components/seckillCard.vue";
import groupCard from "./components/groupCard.vue";
import groupPlaying from "./components/groupPlaying.vue";
import groupDoing from "./components/groupDoing.vue";
import activityStyle from "./components/activityStyle.vue";
import navBar from '@/components/navBar';
import {
onGetPreOrder
} from "@/libs/order";
import {
ProductMarketingTypeEnum,
ProductTypeEnum,
} from "@/enums/productEnums";
import useActivity from "@/mixins/useActivity";
let sysHeight = uni.getSystemInfoSync().statusBarHeight;
import productAttr from '@/mixins/productAttr.js';
export default {
mixins: [useActivity, productAttr],
components: {
productConSwiper,
couponListWindow,
productWindow,
userEvaluation,
cusPreviewImg,
merHome,
"jyf-parser": parser,
tuiDrawer,
tuiSkeleton,
easyLoadimage,
seckillCard,
activityStyle,
svipPrice,
groupCard,
groupPlaying,
groupDoing,
mpHtml,
navBar
},
data() {
return {
ProductMarketingTypeEnum: ProductMarketingTypeEnum,
ProductTypeEnum: ProductTypeEnum,
urlDomain: this.$Cache.get("imgHost"),
sysHeight: sysHeight,
showSkeleton: true, //骨架屏显示隐藏
//属性是否打开
coupon: {
coupon: false,
type: 2,
list: [],
count: [],
},
attrTxt: "请选择", //属性页面提示
attrValue: "", //已选属性
animated: false, //购物车动画
id: 0, //商品id
replyCount: 0, //总评论数量
reply: [], //评论列表
productInfo: {}, //商品详情
productValue: [], //系统属性
couponList: [], //优惠券
cart_num: 1, //购买数量
isOpen: false, //是否打开属性组件
actionSheetHidden: true,
storeImage: "", //海报产品图
PromotionCode: "", //二维码图片
posterbackgd: "../static/images/posterbackgd.png",
pinkbackgd: "../static/images/pink_share.png",
pinkWhiteBg: "../static/images/whiteBg.png",
sharePacket: {
isState: true, //默认不显示
touchstart: false,
}, //分销商详细
circular: false,
autoplay: false,
interval: 3000,
duration: 500,
clientHeight: "",
systemStore: {}, //门店信息
good_list: [],
replyChance: 0,
CartCount: 0,
isDown: true,
posters: false,
weixinStatus: false,
attr: {
cartAttr: false,
productAttr: [],
productSelect: {},
},
description: "",
navActive: 0,
H5ShareBox: false, //公众号分享图片
activityH5: [],
retunTop: true, //顶部返回
navH: "",
navList: [],
opacity: 0,
scrollY: 0,
topArr: [],
height: 0,
heightArr: [],
lock: false,
scrollTop: 0,
tagStyle: {
img: "width:100%;display:block;",
table: "width:100%",
video: "width:100%",
},
sliderImage: [],
videoLink: "",
qrcodeSize: 600,
canvasStatus: false, //是否显示海报
imagePath: "", //海报路径
imgTop: "",
errT: "",
navbarRight: 0,
userCollect: false,
options: null,
returnShow: true, //判断顶部返回是否出现
marketingType: 0, //视频号普通商品营销类型
theme: app.globalData.theme,
indicatorBg: "",
shareStatus: true,
skuArr: [],
currentPage: false,
selectSku: "",
selectNavList: [{
name: "首页",
icon: "icon-ic_mall",
url: "/pages/index/index",
after: "dialog_after",
},
{
name: "搜索",
icon: "icon-ic_search",
url: "/pages/goods/goods_list/index",
after: "dialog_after",
},
{
name: "购物车",
icon: "icon-gouwuche7",
url: "/pages/order_addcart/order_addcart",
after: "dialog_after",
},
{
name: "我的收藏",
icon: "icon-shoucang3",
url: "/pages/goods/user_goods_collection/index",
after: "dialog_after",
},
{
name: "个人中心",
icon: "icon-a-ic_user1",
url: "/pages/user/index",
},
],
defaultCoupon: [],
couponDeaultType: [{
useType: 1,
}, ],
guaranteeList: [],
assureDrawer: false,
merchantInfo: {},
isShowTypeId: false,
serviceConfig: {},
seckillStatus: 0,
seckillTime: null,
homeTopApp: 0,
shareRight: 0,
searchHeight: 0,
masterProductId: 0, //活动商品中主商品id
tokenIsExist: false, //校验token是否有效
publicLoginType: app.globalData.publicLoginType, //公众号登录方式(单选),1微信授权2手机号登录
productType: 0, //商品类型 0=普通商品,1-积分商品,2-虚拟商品,4=视频号,5-云盘商品,6-卡密商品
//普通价格
svipPriceStyle: {
svipBox: {
height: "34rpx",
borderRadius: "60rpx 56rpx 56rpx 20rpx",
},
icon: {
fontSize: "23rpx",
height: "34rpx",
borderRadius: "16rpx 0 16rpx 2rpx",
},
price: {
fontSize: "44rpx",
},
svipPrice: {
fontSize: "27rpx",
},
topStyle: {
top: "6rpx",
},
},
productPrice: {
price: "",
vipPrice: "",
isPaidMember: false, //是否是付费会员商品
vipPriceType: 0, // 会员价类型0-无1-svip价2-商户会员价
redeemIntegral: 0,
},
//svip价格
svipIconStyle: {
svipBox: {
height: "34rpx",
borderRadius: "36rpx 40rpx 40rpx 0.4rpx",
},
price: {
fontSize: "44rpx",
},
svipPrice: {
fontSize: "22rpx",
},
},
groupBuyActivityResponse: "",
groupActivityId: "",
buyLimitNum: "",
groupRecordId: 0,
isPink: 0,
skuImage: [] //规格小图
};
},
computed: {
...mapGetters(["isLogin", "uid", "chatUrl", "globalData", 'userInfo']),
// 是否是拼团、秒杀、积分商品,用红色不用主题色
isMarketingGoods() {
return this.marketingType === ProductMarketingTypeEnum.Groupbuying || this.productType === ProductTypeEnum
.Integral || this.marketingType === ProductMarketingTypeEnum.Seckill
},
shareStyle() {
return {
top: this.homeTopApp + 'px',
right: this.shareRight + 'px',
// #ifdef MP
width: this.searchHeight + 'px',
height: this.searchHeight + 'px',
lineHeight: this.searchHeight - 2 + 'px',
borderRadius: this.searchHeight / 2 + 'px',
// #endif
}
}
},
watch: {
isOpen(nVal) {
if (!nVal && this.isPink) {
this.groupRecordId = 0;
}
},
},
created() {
var pages = getCurrentPages();
this.returnShow = pages.length === 1 ? false : true;
//用户从分享卡片进入的场景下获取主题色配置
this.$set(this, "theme", this.$Cache.get("theme"));
//判断顶部返回是否出现
var pages = getCurrentPages();
this.returnShow = pages.length === 1 ? false : true;
if (pages.length <= 1) {
this.retunTop = false;
}
//页面中需要计算的一些值
// #ifdef MP
const res = uni.getMenuButtonBoundingClientRect()
this.homeTopApp = res.top; //胶囊距离顶部
this.searchHeight = res.height;
this.shareRight = res.width + 15;
// #endif
// #ifdef APP
this.homeTopApp = this.sysHeight + 6;
this.shareRight = 15
// #endif
// #ifdef H5
this.homeTopApp = 9;
this.shareRight = 50
// #endif
this.navH = this.globalData.navHeight;
let that = this;
uni.getSystemInfo({
success: function(res) {
that.height = res.windowHeight;
//res.windowHeight:获取整个窗口高度为px*2为rpx98为头部占据的高度
// #ifndef APP-PLUS || H5 || MP-ALIPAY
that.navbarRight =
res.windowWidth - uni.getMenuButtonBoundingClientRect().left;
// #endif
},
});
},
onLoad(options) {
//获取浏览器传来的对象
this.options = options;
//获取浏览器秒杀状态、秒杀时间
if (options.status) this.seckillStatus = Number(options.status); //秒杀状态
if (options.datatime) this.seckillTime = Number(options.datatime); //秒杀时间
if (options.gd) this.groupActivityId = options.gd; //拼团活动id
if (options.rd) this.groupRecordId = options.rd; //是否为参团
if (options.sd) this.$store.commit('Change_Spread', options.sd); //分享id
//获取浏览器中的参数商品id商品类型type普通normal秒杀seckill砍价拼团视频号video
if (!options.scene && !options.id) {
this.showSkeleton = false;
this.$store.commit('Change_Advertisement', false);
this.$util.Tips({
title: "缺少参数无法查看商品",
}, {
url: "/pages/index/index",
});
return;
}
if (options.id) this.id = options.id;
//订单中跳入商品详情,点击进入商品详情获取商品类型
//marketingType商品类型:0-普通1-秒杀seckill2-拼团
this.marketingType = Number(options.mt);
// 仅仅小程序扫码进入获取商品id商品类型
if (options.scene) {
let value = this.$util.getUrlParams(decodeURIComponent(options.scene));
this.id = value.id ? value.id : "";
this.marketingType = Number(value.mt);
if (value.sd) this.$store.commit('Change_Spread', value.sd);
if (value.gd) this.groupActivityId = value.gd; //拼团活动id
if (value.rd) this.groupRecordId = value.rd; //是否为参团
//this.type = value.type ? value.type : 'normal';
}
//商品类型存入vuex中
this.$store.commit("PRODUCT_TYPE", this.marketingType);
//商品详情
this.getGoodsDetails();
this.indicatorBg = setThemeColor();
},
onShow() {
//校验token是否有效,true为有效false为无效
this.getTokenIsExist();
},
// 滚动监听
onPageScroll(e) {
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
uni.$emit("scroll");
},
// #ifdef MP
/**
* 用户点击右上角分享到朋友圈
*/
onShareTimeline() {
if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
return {
title: this.productInfo.name || "",
imageUrl: this.productInfo.image || "",
query: `id=${this.id}&mt=${this.marketingType}&gd=${this.groupActivityId}&sd=${this.uid}`,
};
} else {
return {
title: this.productInfo.name || "",
imageUrl: this.productInfo.image || "",
query: `id=${this.id}&mt=${this.marketingType}&sd=${this.uid}`,
};
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage(res) {
this.$set(this, "actionSheetHidden", !this.actionSheetHidden);
if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
return {
title: this.productInfo.name || "",
imageUrl: this.productInfo.image || "",
path: `/pages/goods/goods_details/index?id=${this.id}&mt=${this.marketingType}&gd=${this.groupActivityId}&sd=${this.uid}`,
};
} else {
return {
title: this.productInfo.name || "",
imageUrl: this.productInfo.image || "",
path: `/pages/goods/goods_details/index?id=${this.id}&mt=${this.marketingType}&sd=${this.uid}`,
};
}
},
// #endif
methods: {
// 保障协议弹出框
handleToGgle(type) {
if (type) {
this.$refs.popup.open()
} else {
this.$refs.popup.close()
}
},
//滚动
touchStart() {
this.$refs.navBarRef.currentPage = false;
},
getShareInfo() {
if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
return {
title: this.productInfo.name || "",
imageUrl: this.productInfo.image || "",
path: `/pages/goods/goods_details/index?id=${this.id}&mt=${this.marketingType}&gd=${this.groupActivityId}&sd=${this.uid}`,
};
} else {
return {
title: this.productInfo.name || "",
imageUrl: this.productInfo.image || "",
path: `/pages/goods/goods_details/index?id=${this.id}&mt=${this.marketingType}&sd=${this.uid}`,
};
}
},
//去拼团
toGroup(e) {
this.goBuy();
this.groupRecordId = e;
this.isPink = 1;
},
buyLimit(e) {
this.buyLimitNum = e;
},
//校验token是否有效,true为有效false为无效
getTokenIsExist() {
tokenIsExistApi().then((res) => {
this.tokenIsExist = res.data;
if (this.isLogin && this.tokenIsExist) {
this.getUserIntegral(); //获取我的积分
this.getCouponList();
this.getCartCount(true);
}
silenceBindingSpread(this.isLogin, this.globalData.spread);
});
},
getMerCustomer(id) {
merCustomerApi(id).then((res) => {
this.serviceConfig = res.data;
});
},
closeAssure() {
this.assureDrawer = false;
},
// #ifdef APP-PLUS
appShare(scene) {
let that = this;
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
let curRoute = routes[routes.length - 1].$page.fullPath; // 获取当前页面路由,也就是最后一个打开的页面路由
uni.share({
provider: "weixin",
scene: scene,
type: 0,
href: `${HTTP_H5_URL}${curRoute}&sd=${that.uid}&mt=${this.marketingType}&gd=${this.groupActivityId}`,
title: that.productInfo.name,
summary: that.productInfo.intro ? that.productInfo.intro : '',
imageUrl: that.productInfo.image,
success: function(res) {
that.posters = false;
},
fail: function(err) {
uni.showToast({
title: "分享失败",
icon: "none",
duration: 2000,
});
that.posters = false;
},
});
},
// #endif
serviceClick() {
if (this.productType === this.ProductTypeEnum.Integral) {
chatConfig(this.$Cache.getItem("platChatConfig"));
} else {
chatConfig(this.serviceConfig);
}
},
goActivity: function(e) {
let item = e;
if (item.type === "1") {
uni.navigateTo({
url: `/pages/activity/goods_seckill_details/index?id=${item.id}`,
});
} else if (item.type === "2") {
uni.navigateTo({
url: `/pages/activity/goods_bargain_details/index?id=${item.id}&startBargainUid=${this.uid}`,
});
} else {
uni.navigateTo({
url: `/pages/activity/goods_combination_details/index?id=${item.id}`,
});
}
},
/**
* 购物车手动填写
*
*/
iptCartNum: function(e) {
this.$set(this.attr.productSelect, "cart_num", e);
},
// 后退
returns: function() {
uni.navigateBack();
},
showNav() {
this.currentPage = !this.currentPage;
},
tap: function(index) {
var id = "past" + index;
this.$set(this, "navActive", index);
this.$set(this, "lock", true);
this.$set(
this,
"scrollTop",
index > 0 ?
this.topArr[index] - this.globalData.navHeight / 2 :
this.topArr[index]
);
},
scroll: function(e) {
var that = this,
scrollY = e.detail.scrollTop;
var opacity = scrollY / 200;
opacity = opacity > 1 ? 1 : opacity;
that.$set(that, "opacity", opacity);
that.$set(that, "scrollY", scrollY);
if (that.lock) {
that.$set(that, "lock", false);
return;
}
for (var i = 0; i < that.topArr.length; i++) {
if (
scrollY <
that.topArr[i] - this.globalData.navHeight / 2 + that.heightArr[i]
) {
that.$set(that, "navActive", i);
break;
}
}
that.$set(that.sharePacket, "touchstart", true); //滑动屏幕时让分享气泡缩回
uni.$emit("scroll");
},
/*
*去商品详情页
*/
goDetail(id) {
uni.redirectTo({
url: `/pages/goods/goods_details/index?id=${id}&mt=0`
})
},
ChangCouponsClone: function() {
this.$set(this.coupon, "coupon", false);
},
/**
* 购物车数量加和数量减
*
*/
ChangeCartNum: function(changeValue, buyLimitNum, type) {
//changeValue:是否 加|减
//获取当前变动属性
let productSelect = this.productValue[this.attrValue];
//如果没有属性,赋值给商品默认库存
if (productSelect === undefined && !this.attr.productAttr.length)
productSelect = this.attr.productSelect;
//无属性值即库存为0不存在加减
let flag = false;
if (productSelect.groupStock === null && productSelect.stock === 0) {
flag = true
}
if (productSelect.groupStock != null && (productSelect.stock === 0 || productSelect.groupStock ===
0)) {
flag = true
}
if (flag) return;
let stock;
if (type == 2) {
stock = buyLimitNum || 0;
} else {
stock = productSelect.stock || 0;
}
let num = this.attr.productSelect;
if (changeValue) {
num.cart_num++;
if (num.cart_num > stock) {
this.$set(this.attr.productSelect, "cart_num", stock);
this.$set(this, "cart_num", stock);
}
} else {
num.cart_num--;
if (num.cart_num < 1) {
this.$set(this.attr.productSelect, "cart_num", 1);
this.$set(this, "cart_num", 1);
}
}
},
attrVal(val) {
this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attrValues[val
.indexn]);
},
// 当前展示的金额
getProductPrice() {
this.productPrice = {
price: this.attr.productSelect.price,
vipPrice: this.attr.productSelect.vipPrice,
isPaidMember: this.productInfo.isPaidMember, //是否是付费会员商品
vipPriceType: this.productInfo.vipPriceType, // 会员价类型0-无1-svip价2-商户会员价
redeemIntegral: this.attr.productSelect.redeemIntegral, //积分
};
},
/**
* 属性变动赋值
*
*/
ChangeAttr: function(res) {
let productSelect = this.productValue[res];
this.$set(this, "selectSku", productSelect);
if (!productSelect) {
this.$util.Tips({
title: '重新选择',
success: () => {
this.noGoods = true;
this.attr.productSelect.stock = 0;
this.attr.productSelect.quota = 0;
this.attr.productSelect.cartNum = 0;
this.attr.productSelect.image = this.productInfo.image;
}
});
} else {
this.setCheckedAttr(productSelect);
this.$set(this, "attrValue", res);
}
this.getProductPrice();
},
/**
* 领取完毕移除当前页面领取过的优惠券展示
*/
ChangCoupons: function(e) {
let coupon = e;
let couponList = this.$util.ArrayRemove(this.couponList, "id", coupon.id);
this.getCouponList();
},
setClientHeight: function() {
let that = this;
if (!that.good_list.length) return;
let view = uni.createSelectorQuery().in(this).select("#list0");
view
.fields({
size: true,
},
(data) => {
that.$set(that, "clientHeight", data.height + 20);
}
)
.exec();
},
/**
* 获取产品详情
*
*/
getGoodsDetails: function() {
let that = this;
getProductDetail(that.id, that.marketingType, 0, this.groupActivityId)
.then((res) => {
let data = res.data;
let productInfo = data.productInfo;
// 字符串数组转数组;
let arrayImg = productInfo.sliderImage;
let sliderImage = JSON.parse(arrayImg);
if (that.getFileType(sliderImage[0]) == "video") {
//判断轮播图第一张是否是视频如果是就赋值给videoLink并且将其在轮播图中删除
this.$set(this, "videoLink", sliderImage[0]);
sliderImage.splice(0, 1);
}
that.productType = productInfo.type; //商品类型 0=普通商品,1-积分商品,2-虚拟商品,4=视频号,5-云盘商品,6-卡密商品,7预约商品
that.description = productInfo.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
.replace(/style="text-wrap: wrap;"/gi, '')
that.getSeckillInfo(data); // 秒杀
that.$set(that, "couponList", data.couponList);
that.$set(that, "sliderImage", sliderImage);
that.$set(that, "productInfo", productInfo);
that.$set(that, "masterProductId", data.masterProductId || 0);
that.$set(that, "merchantInfo", data.merchantInfo);
that.$set(that, "userCollect", data.userCollect);
that.$set(that.attr, "productAttr", data.productAttr || []);
that.$set(that, "productValue", data.productValue || []);
that.$set(
that,
"guaranteeList",
data.guaranteeList ? data.guaranteeList : []
);
data.groupBuyActivityResponse &&
that.$set(
that,
"groupBuyActivityResponse",
data.groupBuyActivityResponse
);
// 获取suk小图
this.getSkuImage()
let navList =
that.productType !== this.ProductTypeEnum.Integral ? ["商品", "评价", "详情"] : ["商品", "详情"];
this.$set(that, "navList", navList);
if (productInfo.merId) that.getMerCustomer(productInfo.merId);
for (let key in data.productValue) {
let obj = data.productValue[key];
that.skuArr.push(obj);
}
this.$set(this, "selectSku", that.skuArr[0]);
uni.setNavigationBarTitle({
title: productInfo.name.substring(0, 7) + "...",
});
let productAttr = this.attr.productAttr.map((item) => {
return {
attrName: item.attributeName,
attrValues: item.optionList.map(items => items.optionName),
id: item.id,
isDel: item.isDel,
productId: item.productId,
optionList: item.optionList,
isShowImage: item.isShowImage
};
});
this.$set(this.attr, "productAttr", productAttr);
this.getProductReplyList();
this.getProductReplyCount();
//#ifdef H5
that.make(that.uid);
that.ShareInfo();
this.getImageBase64(this.productInfo.image);
// #endif
// #ifdef MP
that.getQrcode();
// #endif
setTimeout(function() {
that.infoScroll();
}, 500);
// #ifdef MP
that.imgTop = data.productInfo.image;
// #endif
// #ifndef H5
that.downloadFilestoreImage();
// #endif
this.defaultSelect()
// this.DefaultSelect();
this.showSkeleton = false;
setTimeout(() => {
this.defaultCoupon = this.coupon.list;
}, 1000);
})
.catch((err) => {
//状态异常返回上级页面
that.$util.Tips({
title: err.toString(),
}, {
tab: 3,
url: 1,
});
this.showSkeleton = false;
});
},
// 获取suk小图
getSkuImage() {
let sku = []
let skuTable = []
this.attr.productAttr.map((item) => {
item.optionList.map(items => {
if (items.image) sku.push(items.image)
});
})
const uniqueData = sku.filter((item, index, self) =>
index === self.findIndex((t) => t === item))
if (uniqueData.length > 0) {
this.skuImage = uniqueData
} else {
for (let key in this.productValue) {
let obj = this.productValue[key];
skuTable.push(obj.image);
}
this.skuImage = skuTable.filter((item, index, self) =>
index === self.findIndex((t) => t === item))
}
},
// 秒杀
getSeckillInfo(data) {
let startTimeStamp = data.startTimeStamp; //秒杀开始结束时间戳
let endTimeStamp = data.endTimeStamp;
if (
!this.options.datatime &&
this.marketingType === ProductMarketingTypeEnum.Seckill
) {
let data = Date.parse(new Date());
if (Number(data) < Number(startTimeStamp)) {
this.seckillTime = Number(startTimeStamp) / 1000;
this.seckillStatus = 2;
} else if (Number(data) < Number(endTimeStamp)) {
this.seckillTime = Number(endTimeStamp) / 1000;
this.seckillStatus = 1;
} else {
this.seckillTime = 0;
this.seckillStatus = 0;
}
// seckillStatus 秒杀状态 0=已结束 1=抢购中 2=即将开始 3=明日预告
}
},
getProductReplyList: function() {
let id =
Number(this.masterProductId) > 0 ? this.masterProductId : this.id;
getReplyProduct(id).then((res) => {
this.reply = res.data.productReply ? [res.data.productReply] : [];
});
},
getProductReplyCount: function() {
let that = this;
let id =
Number(that.masterProductId) > 0 ? that.masterProductId : that.id;
getReplyConfig(id).then((res) => {
that.$set(that, "replyChance", res.data.replyChance);
that.$set(that, "replyCount", res.data.sumCount);
});
},
infoScroll: function() {
var that = this,
topArr = [],
heightArr = [];
for (var i = 0; i < that.navList.length; i++) {
//productListVertical
//获取元素所在位置
var query = uni.createSelectorQuery().in(this);
var idView = "#past" + i;
query.select(idView).boundingClientRect();
query.exec(function(res) {
var top = res[0] ? res[0].top : "";
var height = res[0] ? res[0].height : "";
topArr.push(top);
heightArr.push(height);
that.$set(that, "topArr", topArr);
that.$set(that, "heightArr", heightArr);
});
}
},
/**
* 获取优惠券
*
*/
getCouponList() {
let that = this,
obj = {
page: 1,
limit: 20,
productId: that.id,
category: 0,
};
getCoupons(obj).then((res) => {
that.$set(that.coupon, "list", res.data.list);
});
},
async getCouponType() {
//在onLoad只调用一次获取默认的类型作为打开优惠券列表的参数不会随着切换变化
let dataList = await getCoupons({
productId: this.id,
});
if (dataList.length) {
this.couponDeaultType = dataList.data;
this.$set(this.coupon, "type", dataList);
}
},
tabCouponType(type) {
this.$set(this.coupon, "type", type);
this.getCouponList();
},
ChangCouponsUseState(index) {
let that = this;
that.coupon.list[index].isUse = true;
that.$set(that.coupon, "list", that.coupon.list);
that.$set(that.coupon, "coupon", false);
},
/**
*
*
* 收藏商品
*/
setCollect: Debounce(function() {
let that = this;
if (this.isLogin === false) {
toLogin("isLogin");
} else {
let id =
Number(this.masterProductId) > 0 ?
this.masterProductId :
this.productInfo.id;
if (this.userCollect) {
collectCancel({
ids: id,
}).then((res) => {
that.$set(that, "userCollect", !that.userCollect);
that.$util.Tips({
title: "取消收藏",
});
});
} else {
collectAdd(id).then((res) => {
that.$set(that, "userCollect", !that.userCollect);
that.$util.Tips({
title: "收藏成功",
});
});
}
}
}),
/**
* 打开属性插件
*/
selecAttr: function() {
this.$set(this.attr, "cartAttr", true);
this.$set(this, "isOpen", true);
this.attr.productSelect.cart_num = 1;
},
/**
* 打开优惠券插件
*/
couponTap: function() {
let that = this;
if (that.isLogin === false) {
toLogin();
} else {
that.getCouponList(); //打开弹框默认请求商品券
that.$set(that.coupon, "coupon", true);
}
},
onMyEvent: function() {
this.$set(this.attr, "cartAttr", false);
this.$set(this, "isOpen", false);
this.attr.productSelect.cart_num = 1;
},
/**
* 打开属性加入购物车
*
*/
joinCart: Debounce(function(e) {
//是否登录
if (this.isLogin === false) {
toLogin();
} else {
this.goCat(1);
}
}),
/*
* 加入购物车
*/
goCat: function(num) {
let that = this,
productSelect = that.productValue[this.attrValue];
//打开属性
if (that.attrValue) {
//默认选中了属性,但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
that.attr.cartAttr = !that.isOpen ? true : false;
} else {
if (that.isOpen) that.attr.cartAttr = true;
else that.attr.cartAttr = !that.attr.cartAttr;
}
//只有关闭属性弹窗时进行加入购物车
if (that.attr.cartAttr === true && that.isOpen === false)
return (that.isOpen = true);
//如果有属性,没有选择,提示用户选择
if (
that.attr.productAttr.length &&
productSelect.stock === 0 &&
that.isOpen === true
)
return that.$util.Tips({
title: "产品库存不足,请选择其它",
});
if (num === 1) {
let q = {
productId: parseFloat(that.id),
cartNum: parseFloat(that.attr.productSelect.cart_num),
isNew: false,
productAttrUnique: that.attr.productSelect !== undefined ?
that.attr.productSelect.unique : that.productInfo.id,
};
postCartAdd(q)
.then(function(res) {
that.isOpen = false;
that.attr.cartAttr = false;
that.$util.Tips({
title: "添加购物车成功",
success: () => {
that.getCartCount(true);
},
});
})
.catch((res) => {
that.isOpen = false;
return that.$util.Tips({
title: res,
});
});
} else {
this.getPreOrder();
}
},
/**
* 获取购物车数量
* @param boolean 是否展示购物车动画和重置属性
*/
getCartCount: function(isAnima) {
let that = this;
getCartCounts(true, "total")
.then((res) => {
that.CartCount = res.data.count;
//加入购物车后重置属性
if (isAnima) {
that.animated = true;
setTimeout(function() {
that.animated = false;
}, 500);
}
})
.catch((err) => {
that.CartCount = 0;
});
},
/**
* 立即购买
*/
goBuy: Debounce(function(e) {
if (this.isLogin === false) {
toLogin();
} else {
if (this.productType === this.ProductTypeEnum.Reservation) {
this.$util.navigateTo(`/pages/activity/reservation/reservation/index?id=${this.id}`);
} else {
this.goCat(0);
}
}
}),
/**
* 预下单
*/
getPreOrder: function() {
if (
this.marketingType === ProductMarketingTypeEnum.Groupbuying &&
this.attr.productSelect.cart_num > this.buyLimitNum
) {
this.isOpen = false;
return this.$util.Tips({
title: "超出限购数量",
});
}
if (this.attr.productSelect.cart_num < 1) {
uni.showToast({
title: "单次可购买商品数量范围为 1~99",
icon: "none",
});
} else {
let types = "";
switch (this.marketingType) {
case ProductMarketingTypeEnum.Normal:
if (this.productType === 4) {
types = "video";
} else {
types = "buyNow";
}
break;
case ProductMarketingTypeEnum.Seckill:
types = "seckill";
break;
case ProductMarketingTypeEnum.Groupbuying:
types = "group";
break;
}
onGetPreOrder(types, [{
attrValueId: parseFloat(this.attr.productSelect.unique),
productId: parseFloat(this.id),
productNum: parseFloat(this.attr.productSelect.cart_num),
groupBuyActivityId: parseFloat(this.groupActivityId),
groupBuyRecordId: this.groupRecordId,
}, ]);
}
this.isOpen = false;
},
/**
* 分享打开
*
*/
listenerActionSheet: function() {
this.goPoster();
this.posters = true;
// #ifdef H5
if (this.$wechat.isWeixin()) {
this.weixinStatus = true;
}
// #endif
},
closePosters: function() {
this.posters = false;
this.currentPage = false;
},
//隐藏海报
posterImageClose: function() {
this.canvasStatus = false;
this.posters = false;
},
//替换安全域名
setDomain: function(url) {
url = url ? url.toString() : "";
//本地调试打开,生产请注销
if (url.indexOf("https://") > -1) return url;
else return url.replace("http://", "https://");
},
//获取海报产品图(解决跨域问题,只适用于小程序)
downloadFilestoreImage: function() {
let that = this;
uni.downloadFile({
url: that.setDomain(that.productInfo.image),
success: function(res) {
that.storeImage = res.tempFilePath;
},
fail: function() {
return that.$util.Tips({
title: "",
});
that.storeImage = "";
},
});
},
// 小程序关闭分享弹窗;
goFriend: function() {
this.posters = false;
},
// 小程序二维码
getQrcode() {
let that = this;
let data;
if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
data = {
scene: "id=" +
this.id +
"&sd=" +
that.uid +
"&mt=" +
2 +
"&gd=" +
this.groupActivityId,
page: "pages/goods/goods_details/index",
};
} else {
data = {
scene: "id=" + this.id + "&sd=" + that.uid + "&mt=" + that.marketingType,
page: "pages/goods/goods_details/index",
};
}
mpQrcode(data)
.then((res) => {
base64src(res.data.code, Date.now(), (res) => {
that.PromotionCode = res;
});
})
.catch((err) => {
that.errT = err;
});
},
// 生成二维码;
make(uid) {
let href;
if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
href =
location.href.split("?")[0] +
"?id=" +
this.id +
"&sd=" +
this.uid +
"&mt=" +
this.marketingType +
"&gd=" +
this.groupActivityId;
} else {
href =
location.href.split("?")[0] +
"?id=" +
this.id +
"&sd=" +
this.uid +
"&mt=" +
this.marketingType;
}
uQRCode.make({
canvasId: "qrcode",
text: href,
size: this.qrcodeSize,
margin: 10,
success: (res) => {
this.PromotionCode = res;
},
complete: () => {},
fail: (res) => {
this.$util.Tips({
title: "海报二维码生成失败!",
});
},
});
},
getImageBase64: function(images) {
let that = this;
imageBase64({
url: images,
}).then((res) => {
that.imgTop = res.data.code;
});
},
/**
* 获取产品分销二维码
* @param function successFn 下载完成回调
*
*/
downloadFilePromotionCode: function(successFn) {
let that = this;
getProductCode(that.id)
.then((res) => {
uni.downloadFile({
url: that.setDomain(res.data.code),
success: function(res) {
that.$set(that, "isDown", false);
if (typeof successFn == "function") {
successFn && successFn(res.tempFilePath);
} else {
that.$set(that, "PromotionCode", res.tempFilePath);
}
},
fail: function() {
that.$set(that, "isDown", false);
that.$set(that, "PromotionCode", "");
},
});
})
.catch((err) => {
that.$set(that, "isDown", false);
that.$set(that, "PromotionCode", "");
});
},
/**
* 生成海报
*/
goPoster: function() {
let that = this;
uni.showLoading({
title: "海报生成中",
mask: true,
});
that.posters = false;
let arrImagesUrl = "";
let arrImagesUrlTop = "";
if (!that.PromotionCode) {
uni.hideLoading();
that.$util.Tips({
title: that.errT,
});
return;
}
setTimeout(() => {
if (!that.imgTop) {
uni.hideLoading();
that.$util.Tips({
title: "无法生成商品海报!",
});
return;
}
}, 1000);
uni.downloadFile({
url: that.imgTop, //仅为示例,并非真实的资源
success: (res) => {
arrImagesUrlTop = res.tempFilePath;
let arrImages = [
that.posterbackgd,
arrImagesUrlTop,
that.PromotionCode,
];
let name = that.productInfo.name;
let price;
let otPrice;
if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
price = that.groupBuyActivityResponse.activePrice;
otPrice = that.productInfo.price;
} else {
price = that.productInfo.price;
otPrice = that.productType === that.ProductTypeEnum.Integral ? that.productInfo
.cost : that.productInfo.otPrice;
}
setTimeout(() => {
that.$util.PosterCanvas(
arrImages,
name,
price,
otPrice,
function(tempFilePath) {
that.imagePath = tempFilePath;
that.canvasStatus = true;
uni.hideLoading();
}
);
}, 500);
},
});
},
// 图片预览;
getpreviewImage: function() {
if (this.imagePath) {
let photoList = [];
photoList.push(this.imagePath);
uni.previewImage({
urls: photoList,
current: this.imagePath,
});
} else {
this.$util.Tips({
title: "您的海报尚未生成",
});
}
},
/*
* 保存到手机相册
*/
// #ifdef MP
savePosterPath: function() {
let that = this;
uni.getSetting({
success(res) {
if (!res.authSetting["scope.writePhotosAlbum"]) {
uni.authorize({
scope: "scope.writePhotosAlbum",
success() {
uni.saveImageToPhotosAlbum({
filePath: that.imagePath,
success: function(res) {
that.posterImageClose();
that.$util.Tips({
title: "保存成功",
icon: "success",
});
},
fail: function(res) {
that.$util.Tips({
title: "保存失败",
});
},
});
},
});
} else {
uni.saveImageToPhotosAlbum({
filePath: that.imagePath,
success: function(res) {
that.posterImageClose();
that.$util.Tips({
title: "保存成功",
icon: "success",
});
},
fail: function(res) {
that.$util.Tips({
title: "保存失败",
});
},
});
}
},
});
},
// #endif
ShareInfo() {
let data = this.productInfo;
let href = location.href;
if (this.$wechat.isWeixin() && this.publicLoginType == 1) {
if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
href =
href.split("?")[0] +
"?id=" +
this.id +
"&sd=" +
this.uid +
"&mt=" +
this.marketingType +
"&gd=" +
this.groupActivityId;
} else {
href = href.split("?")[0] +
"?id=" +
this.id +
"&sd=" +
this.uid +
"&mt=" +
this.marketingType
}
let configAppMessage = {
desc: data.intro ? data.intro : '',
title: data.name,
link: href,
imgUrl: data.image,
};
this.$wechat
.wechatEvevt(
[
"updateAppMessageShareData",
"updateTimelineShareData",
"onMenuShareAppMessage",
"onMenuShareTimeline",
],
configAppMessage
)
.then((res) => {})
.catch((err) => {
console.log(err);
});
}
},
showShare(status) {
let that = this;
that.$set(that.sharePacket, "touchstart", status);
},
hideNav() {
this.currentPage = false;
},
//下拉导航页面跳转
linkPage(url) {
this.$store.commit('Change_Advertisement', false);
if (
[
"/pages/index/index",
"/pages/order_addcart/order_addcart",
"/pages/user/index",
"/pages/discover_index/index",
].indexOf(url) > -1
) {
uni.switchTab({
url,
});
} else {
uni.navigateTo({
url,
});
}
this.currentPage = false;
},
//点击sku图片打开轮播图
showImg(index) {
if (this.selectSku) {
if (this.marketingType === ProductMarketingTypeEnum.Groupbuying) {
this.$refs.cusPreviewImg.open(this.selectSku.sku, 1);
} else {
this.$refs.cusPreviewImg.open(this.selectSku.sku, 0);
}
} else {
this.$refs.cusPreviewImg.open({}, 0);
}
},
//滑动轮播图选择商品
changeSwitch(e) {
let productSelect = this.skuArr[e];
this.$set(this, "selectSku", productSelect);
var skuList = productSelect.sku.split(",");
skuList.forEach((i, index) => {
this.$set(this.attr.productAttr[index], "index", skuList[index]);
});
if (productSelect) {
this.setCheckedAttr(productSelect)
this.$set(this, "attrValue", productSelect.sku);
this.getProductPrice();
}
},
getFileType(fileName) {
// 后缀获取
let suffix = "";
// 获取类型结果
let result = "";
try {
const flieArr = fileName.split(".");
suffix = flieArr[flieArr.length - 1];
} catch (err) {
suffix = "";
}
// fileName无后缀返回 false
if (!suffix) {
return false;
}
suffix = suffix.toLocaleLowerCase();
// 图片格式
const imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
// 进行图片匹配
result = imglist.find((item) => item === suffix);
if (result) {
return "image";
}
// 匹配 视频
const videolist = [
"mp4",
"m2v",
"mkv",
"rmvb",
"wmv",
"avi",
"flv",
"mov",
"m4v",
];
result = videolist.find((item) => item === suffix);
if (result) {
return "video";
}
// 其他 文件类型
return "other";
},
//直接购买
toAloneBuy() {
goProductDetail(this.productInfo.id, 0, "");
},
videoPause() {},
},
};
</script>
<style scoped lang="scss">
/deep/.tui-drawer-container {
border-radius: 40rpx !important;
}
/deep/.evaluateItem {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.icon-ic_share1 {
font-size: 30rpx;
background: rgba(255, 255, 255, 0.6);
border: 1rpx solid rgba(0, 0, 0, 0.1);
/* #ifdef H5 || APP-PLUS */
width: 50rpx;
height: 50rpx;
line-height: 48rpx;
border-radius: 25rpx;
/* #endif */
/* #ifdef MP */
width: 60rpx;
height: 60rpx;
line-height: 56rpx;
border-radius: 30rpx;
padding-left: 4rpx;
/* #endif */
position: fixed;
text-align: center;
z-index: 999;
}
.w-640rpx {
width: 640rpx !important;
}
.icon-ic_left,
.icon-ic_home {
font-size: 30rpx !important;
font-weight: 600;
}
.mb10 {
margin-bottom: 10rpx;
}
.coupon_label {
height: 34rpx;
line-height: 32rpx;
border-radius: 4rpx;
padding: 0 10rpx;
font-size: 22rpx;
margin-right: 10rpx;
@include main_color(theme);
@include cate-two-btn(theme);
}
.coupon_more {
font-size: 22rpx;
@include main_color(theme);
.iconfont {
font-size: 24rpx;
}
}
.longBnts {
width: 444rpx;
text-align: center;
line-height: 72rpx;
color: #fff;
font-size: 26rpx;
display: inline-block;
border-radius: 50rpx !important;
}
.mtop {
/* #ifdef MP */
margin-top: -74rpx;
/* #endif */
/* #ifndef MP */
margin-top: -68rpx;
/* #endif */
}
.lineWidth {
width: 588rpx;
}
.superior {
/deep/.name,
/deep/.icon-ic_rightarrow {
color: #333 !important;
}
/deep/.store {
padding: 0 !important;
}
}
.product-con {
height: 100%;
}
.ensure {
width: 100%;
background-color: #fff;
border-top-left-radius: 40rpx;
border-top-right-radius: 40rpx;
padding-bottom: 22rpx;
padding-top: 38rpx;
padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
.title {
font-size: 32rpx;
color: #282828;
text-align: center;
margin: 0 0 36rpx 0;
position: relative;
}
.list {
max-height: 64vh;
margin: 0 30rpx;
overflow: scroll;
.item {
margin-bottom: 40rpx;
.pictrue {
width: 36rpx;
height: 36rpx;
border-radius: 50%;
margin-right: 30rpx;
/deep/image,
.easy-loadimage,
image,
uni-image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.text {
width: 618rpx;
color: #999999;
font-size: 28rpx;
.name {
color: #333333;
font-weight: bold;
margin-bottom: 20rpx;
}
}
}
}
.bnt,
.activityBtn {
width: 690rpx;
height: 86rpx;
text-align: center;
line-height: 86rpx;
border-radius: 43rpx;
font-size: 30rpx;
color: #fff;
margin: 0 auto;
}
.bnt {
@include main_bg_color(theme);
}
}
.ensure.on {
transform: translate3d(0, 0, 0);
}
/deep/ .tui-drawer-container_bottom {
border-radius: 40rpx 40rpx 0 0;
}
.product-con {
height: 100%;
}
.bg-color-hui {
background: #bbb !important;
border-radius: 0 25px 25px 0;
}
.lang {
width: 170rpx !important;
height: 60rpx !important;
border-radius: 33rpx;
}
.px-20 {
padding: 0 20rpx 0;
}
.bgwhite {
background: #fff;
}
.input {
display: flex;
align-items: center;
/* #ifdef MP */
width: 300rpx;
/* #endif */
/* #ifndef MP */
width: 460rpx;
/* #endif */
height: 58rpx;
padding: 0 0 0 30rpx;
border: 1px solid rgba(0, 0, 0, 0.07);
border-radius: 33rpx;
color: #666;
font-size: 26rpx;
position: fixed;
left: 0;
right: 0;
margin: auto;
background: rgba(255, 255, 255, 0.3);
.iconfont {
margin-right: 20rpx;
font-size: 26rpx;
color: #666666;
}
}
.tab_nav {
width: 100%;
height: 48px;
/* #ifdef MP */
margin-left: 220rpx;
/* #endif */
}
.dialog_nav {
position: absolute;
/* #ifdef MP */
left: 14rpx;
/* #endif */
/* #ifdef H5 || APP-PLUS*/
right: 14rpx;
/* #endif */
width: 240rpx;
background: #ffffff;
box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.08);
z-index: 310;
border-radius: 14rpx;
&::before {
content: "";
width: 0;
height: 0;
position: absolute;
/* #ifdef MP */
left: 0;
right: 0;
margin: auto;
/* #endif */
/* #ifdef H5 || APP-PLUS */
right: 8px;
/* #endif */
top: -9px;
border-bottom: 10px solid #f5f5f5;
border-left: 10px solid transparent;
/*transparent 表示透明*/
border-right: 10px solid transparent;
}
}
.dialog_nav_item {
width: 100%;
height: 84rpx;
line-height: 84rpx;
padding: 0 20rpx 0;
box-sizing: border-box;
border-bottom: #eee;
font-size: 28rpx;
color: #333;
position: relative;
.iconfont {
font-size: 32rpx;
color: #333;
}
}
.dialog_after {
::after {
content: "";
position: absolute;
width: 172rpx;
height: 1px;
background-color: #eeeeee;
bottom: 0;
right: 0;
}
}
.pl-20 {
padding-left: 20rpx;
}
.activity {
padding: 0 20rpx;
@include coupons_border_color(theme);
@include main_color(theme);
font-size: 24rpx;
line-height: 32rpx;
position: relative;
margin-left: 4rpx;
}
.product-con .wrapper .coupon .activity:before {
content: " ";
position: absolute;
width: 7rpx;
height: 10rpx;
border-radius: 0 7rpx 7rpx 0;
@include coupons_border_color(theme);
background-color: #fff !important;
bottom: 50%;
left: -3rpx;
margin-bottom: -6rpx;
@include white_left_border;
}
.product-con .wrapper .coupon .activity:after {
content: " ";
position: absolute;
width: 7rpx;
height: 10rpx;
border-radius: 7rpx 0 0 7rpx;
@include coupons_border_color(theme);
background-color: #fff;
right: -3rpx;
bottom: 50%;
margin-bottom: -6rpx;
@include white_right_border;
}
.justify-center {
justify-content: center;
}
.align-center {
align-items: center;
}
.align-baseline {
align-items: baseline;
}
.vip_icon {
width: 44rpx;
height: 28rpx;
}
.pl-2 {
padding-left: 20rpx;
}
.vip_money {
background: #ffe7b9;
border-radius: 4px;
font-size: 22rpx;
color: #333;
line-height: 28rpx;
text-align: center;
padding: 0 6rpx;
box-sizing: border-box;
margin-left: -4rpx;
}
.theme_price {
@include price_color(theme);
margin-top: 5rpx;
}
.activityName {
line-height: 44rpx;
}
.userEvaluation {
i {
display: inline-block;
}
}
.bntVideo {
width: auto !important;
.buy {
border-radius: 50rpx !important;
}
}
.attribute {
.line1 {
width: 600rpx;
}
.acea-row {
overflow: hidden;
}
}
.chat-btn {
background-color: antiquewhite !important;
}
.activity_pin {
width: auto;
height: 44rpx;
line-height: 44rpx;
@include linear-gradient(theme);
opacity: 1;
border-radius: 22rpx;
padding: 0 15rpx;
}
.activity_miao {
width: auto;
height: 44rpx;
line-height: 44rpx;
padding: 0 15rpx;
// background: linear-gradient(90deg, rgba(250, 102, 24, 1) 0%, rgba(254, 161, 15, 1) 100%);
@include linear-gradient(theme);
opacity: 1;
border-radius: 22rpx;
margin-left: 19rpx;
}
.iconfonts {
color: #fff !important;
font-size: 28rpx;
}
.activity_title {
font-size: 24rpx;
color: #fff;
}
.activity_kan {
width: auto;
height: 44rpx;
line-height: 44rpx;
padding: 0 15rpx;
@include linear-gradient(theme);
opacity: 1;
border-radius: 22rpx;
margin-left: 19rpx;
}
.mask {
z-index: 300 !important;
}
.head-bar {
background: #fff;
}
.generate-posters {
width: 100%;
background-color: #fff;
position: fixed;
left: 0;
bottom: 0;
z-index: 388;
transform: translate3d(0, 100%, 0);
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
border-top: 1rpx solid #eee;
border-radius: 40rpx 40rpx 0 0;
.generateCon {
height: 220rpx;
}
.generateClose {
width: 654rpx;
height: 72rpx;
background: #F5F5F5;
border-radius: 36rpx;
font-size: 26rpx;
font-weight: 500;
margin: 0 auto 40rpx;
}
.item {
.pictrue {
width: 86rpx;
height: 86rpx;
border-radius: 50%;
margin: 0 auto 12rpx auto;
/deep/image,
.easy-loadimage,
image,
uni-image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
}
}
.generate-posters.on {
transform: translate3d(0, 0, 0);
}
.generate-posters .item {
flex: 1;
text-align: center;
font-size: 30rpx;
}
.generate-posters .item .iconfont {
font-size: 80rpx;
color: #5eae72;
}
.product-con .footer {
padding: 0 20rpx 0 30rpx;
position: fixed;
bottom: 0;
width: 100%;
box-sizing: border-box;
background-color: #fff;
z-index: 277;
border-top: 1rpx solid #f0f0f0;
height: 100rpx;
height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
}
.product-con .footer .item {
font-size: 18rpx;
color: #666;
}
.product-con .footer .item .iconfont {
text-align: center;
}
.color-change {
@include main_color(theme);
}
.color-normal {
color: #e93323 !important;
}
.product-con .footer .item .iconfont.icon-ic_ShoppingCart {
font-size: 40rpx;
position: relative;
}
.product-con .footer .item .iconfont.icon-ic_ShoppingCart .num {
color: #fff;
position: absolute;
font-size: 18rpx;
padding: 2rpx 8rpx 3rpx;
border-radius: 200rpx;
top: -10rpx;
right: -10rpx;
}
.product-con .footer .bnt {
height: 72rpx;
}
.product-con .footer .bnt .bnts {
width: 222rpx;
text-align: center;
line-height: 72rpx;
color: #fff;
font-size: 26rpx;
}
.product-con .footer .bnt .joinCart {
border-radius: 50rpx 0 0 50rpx;
@include left_color(theme);
}
.product-con .footer .bnt .joinCart.groupJoin {
background-color: #FE960F !important;
}
.product-con .footer .bnt .buy {
border-radius: 0 50rpx 50rpx 0;
@include main_bg_color(theme);
}
.product-con .store-info {
margin-top: 20rpx;
background-color: #fff;
}
.product-con .store-info .title {
padding: 0 30rpx;
font-size: 28rpx;
color: #282828;
height: 80rpx;
line-height: 80rpx;
border-bottom: 1px solid #f5f5f5;
}
.product-con .store-info .info {
padding: 0 30rpx;
height: 126rpx;
}
.product-con .store-info .info .picTxt {
width: 615rpx;
}
.product-con .store-info .info .picTxt .pictrue {
width: 76rpx;
height: 76rpx;
}
.product-con .store-info .info .picTxt .text {
width: 522rpx;
}
.product-con .store-info .info .picTxt .text .name {
font-size: 30rpx;
color: #282828;
}
.product-con .store-info .info .picTxt .text .address {
font-size: 24rpx;
color: #666;
margin-top: 3rpx;
}
.product-con .store-info .info .picTxt .text .address .iconfont {
color: #707070;
font-size: 18rpx;
margin-left: 10rpx;
}
.product-con .store-info .info .picTxt .text .address .addressTxt {
max-width: 480rpx;
}
.product-con .store-info .info .iconfont {
font-size: 40rpx;
}
.product-con .superior {
background-color: #fff;
margin-top: 20rpx;
padding: 24rpx;
.title {
height: 98rpx;
image {
width: 20rpx;
height: 20rpx;
}
.titleTxt {
margin: 0 10rpx;
font-size: 30rpx;
color: #333333;
}
}
.slider-banner {
width: 100%;
margin: 0 auto;
position: relative;
.list {
width: 100%;
.item {
width: 204rpx;
margin: 24rpx 3.2% 0 0;
font-size: 28rpx;
.name {
color: #282828;
}
}
.item:nth-of-type(3n) {
margin-right: 0;
}
}
}
}
button {
padding: 0;
margin: 0;
line-height: normal;
background-color: #fff;
}
button::after {
border: 0;
}
action-sheet-item {
padding: 0;
height: 240rpx;
align-items: center;
display: flex;
}
.contact {
font-size: 16px;
width: 50%;
background-color: #fff;
padding: 8rpx 0;
border-radius: 0;
margin: 0;
line-height: 2;
}
.contact::after {
border: none;
}
.action-sheet {
font-size: 17px;
line-height: 1.8;
width: 50%;
position: absolute;
top: 0;
right: 0;
padding: 25rpx 0;
}
.canvas {
position: fixed;
z-index: -5;
opacity: 0;
}
.poster-pop {
position: fixed;
width: 500rpx;
height: 714rpx;
top: 50%;
left: 50%;
transform: translateX(-50%);
margin-top: -432rpx;
z-index: 399;
// background-image: url('https://api.admin.merchant.crmeb.xbdzz.cn/crmebimage/public/product/2024/08/13/8a25e3c98d864299b7a5201f70ea24edkoj7sce8za.png');
// background-size: cover;
}
.poster-pop image {
width: 100%;
height: 100%;
display: block;
}
.poster-pop .close {
width: 46rpx;
height: 75rpx;
position: fixed;
right: 0;
top: -73rpx;
display: block;
}
.poster-pop .save-poster {
background-color: #df2d0a;
font-size: 22rpx;
color: #fff;
text-align: center;
height: 76rpx;
line-height: 76rpx;
width: 100%;
}
.poster-pop .keep {
color: #fff;
text-align: center;
font-size: 25rpx;
margin-top: 10rpx;
}
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
}
.pro-wrapper .iconn {
background-image: url("data:image/png;base64,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");
width: 100rpx;
height: 100rpx;
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0 auto;
}
.pro-wrapper .iconn.iconn1 {
background-image: url("data:image/png;base64,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");
}
.pictrue_log {
width: 80upx;
height: 40upx;
border-radius: 10upx 0 12upx 0;
line-height: 40upx;
font-size: 24upx;
}
.pictrue_log_class {
z-index: 3;
background: -webkit-gradient(linear,
left top,
right top,
from(rgba(246, 122, 56, 1)),
to(rgba(241, 27, 9, 1)));
background: linear-gradient(90deg,
rgba(246, 122, 56, 1) 0%,
rgba(241, 27, 9, 1) 100%);
opacity: 1;
position: absolute;
top: 0;
left: 0;
color: #fff;
text-align: center;
}
.tab_nav .header {
/* #ifdef H5 || APP-PLUS */
width: 77%;
justify-content: space-around;
/* #endif */
/* #ifdef MP */
width: 100%;
/* #endif */
height: 96rpx;
font-size: 28rpx;
color: #050505;
margin: auto;
background-color: #fff;
}
.navbar .header .item {
position: relative;
margin: 0 25rpx;
}
.navbar .header .item.on:before {
position: absolute;
width: 60rpx;
height: 5rpx;
background-repeat: no-repeat;
content: "";
@include linear-gradient(theme);
bottom: -10rpx;
left: 50%;
margin-left: -28rpx;
}
.navbar {
position: fixed;
// background-color: #fff;
top: 0;
left: 0;
z-index: 99;
width: 100%;
}
.navbar .navbarH {
position: relative;
width: 100%;
}
.navbar .navbarH .navbarCon {
position: absolute;
bottom: 0;
height: 100rpx;
width: 100%;
}
.h5_back {
color: #000;
position: fixed;
left: 20rpx;
font-size: 26rpx;
text-align: center;
width: 50rpx;
height: 50rpx;
line-height: 50rpx;
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
}
.share-box {
z-index: 1000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
image {
width: 100%;
height: 100%;
}
}
.mask_transparent {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
z-index: 300;
}
.px-12 {
padding-left: 12rpx;
padding-right: 12rpx;
}
.font-44 {
font-size: 44rpx;
}
.font_color {
@include main_color(theme);
}
.attrImg {
width: 66rpx;
height: 66rpx;
border-radius: 8rpx;
display: block;
margin-right: 14rpx;
}
.switchTxt {
height: 60rpx;
flex: 1;
line-height: 60rpx;
box-sizing: border-box;
background: #eeeeee;
padding-right: 0 24rpx 0;
border-radius: 8rpx;
text-align: center;
}
.text-666 {
color: #666;
}
.text-333 {
color: #333 !important;
}
.iconColor {
@include main_color(theme);
}
.activityIcon {
color: #e93323;
}
.detailText {
padding-bottom: 30rpx;
}
.spredGroupStyle {
width: 450rpx;
height: 76rpx;
line-height: 76rpx;
background: #e93323;
border-radius: 40rpx;
font-weight: 400;
font-size: 28rpx;
color: #ffffff;
}
.group-buy {
// background: #e93323;
@include main_bg_color(theme) border-radius: 0px 76rpx 76rpx 0px;
}
.group-buy2 {
width: 450rpx !important;
// background: #e93323;
@include main_bg_color(theme) border-radius: 76rpx;
}
.navbar .header .item.groupTabOn:before {
position: absolute;
width: 60rpx;
height: 5rpx;
background-repeat: no-repeat;
content: "";
background: #e93323;
bottom: -10rpx;
left: 50%;
margin-left: -28rpx;
}
.groupColor {
color: #e93323;
}
.theme-bg-color {
@include main_bg_color(theme)
}
.theme-btn-color {
@include main_bg_color(theme)
}
.theme-font-color {
@include main_color(theme)
}
</style>